/* TumbuhTanpaRokok - minimal custom styles */

.ttr-sticky-help{
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: 290px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: .5rem;
  padding: .75rem;
  z-index: 1030;
}
@media (max-width: 576px){
  .ttr-sticky-help{
    left: .75rem;
    right: .75rem;
    width: auto;
  }
}

.ttr-plant-wrap { user-select:none; }
.ttr-plant svg { display:block; margin: 0 auto; }

.ttr-pot { fill: #8d6e63; }
.ttr-pot-rim { fill: #6d4c41; }
.ttr-stem { fill: #2e7d32; }
.ttr-leaf-left, .ttr-leaf-right { fill: none; stroke: #2e7d32; stroke-width: 8; stroke-linecap: round; opacity: 0; }
.ttr-canopy { fill: #43a047; opacity: 0; }
.ttr-flower { fill: #ffcc80; opacity: 0; }

.ttr-stage-seed .ttr-stem { transform: scaleY(.35); transform-origin: 100px 143px; opacity: .8; }
.ttr-stage-seed .ttr-leaf-left, .ttr-stage-seed .ttr-leaf-right,
.ttr-stage-seed .ttr-canopy, .ttr-stage-seed .ttr-flower { opacity: 0; }

.ttr-stage-sprout .ttr-stem { transform: scaleY(.6); transform-origin: 100px 143px; }
.ttr-stage-sprout .ttr-leaf-left, .ttr-stage-sprout .ttr-leaf-right { opacity: .5; }

.ttr-stage-leafy .ttr-stem { transform: scaleY(.85); transform-origin: 100px 143px; }
.ttr-stage-leafy .ttr-leaf-left, .ttr-stage-leafy .ttr-leaf-right { opacity: 1; }
.ttr-stage-leafy .ttr-canopy { opacity: .25; }

.ttr-stage-blooming .ttr-canopy { opacity: .6; }
.ttr-stage-blooming .ttr-flower { opacity: 1; }

.ttr-stage-strong_tree .ttr-canopy { opacity: .95; }
.ttr-stage-strong_tree .ttr-flower { opacity: .6; }

.ttr-wilted { filter: grayscale(.35) brightness(.92); }
.ttr-wilted .ttr-leaf-left { transform: rotate(18deg); transform-origin: 100px 120px; opacity: .6; }
.ttr-wilted .ttr-leaf-right { transform: rotate(-18deg); transform-origin: 100px 125px; opacity: .6; }
.ttr-wilted .ttr-canopy { opacity: .25; }
.ttr-wilted .ttr-flower { opacity: 0; }

.ttr-bubble-area{
  position: relative;
  height: 220px;
  border: 1px dashed rgba(0,0,0,.15);
  border-radius: .5rem;
  background: #fff;
  overflow: hidden;
}
.ttr-bubble{
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(25,135,84,.35);
  background: rgba(25,135,84,.08);
  cursor: pointer;
  animation: floatUp 2.4s linear infinite;
}
@keyframes floatUp{
  0% { transform: translateY(12px); opacity: .85; }
  100% { transform: translateY(-30px); opacity: .35; }
}

.ttr-chat { display:flex; flex-direction:column; gap:.5rem; }
.ttr-bubble{ max-width: 92%; padding: .6rem .75rem; border-radius: .75rem; }
.ttr-bubble-bot{ align-self:flex-start; background:#f1f8f4; border:1px solid rgba(25,135,84,.18); }
.ttr-bubble-user{ align-self:flex-end; background:#ffffff; border:1px solid rgba(0,0,0,.08); }

.ttr-timeline .ttr-time{ padding:.75rem; border-left: 3px solid rgba(25,135,84,.45); margin-left:.25rem; }