/* ==========================================================================
   Growth Dashboard — Responsive Animated Analytics Widget
   File: css/growth-dashboard.css

   Replaces the old absolutely-positioned .dashboard/.bars markup that was
   getting clipped on mobile/tablet (bars cut off — see issue screenshots).

   Fix summary:
   - .hero-card no longer forces a fixed min-height with content pulled out
     of flow via `position:absolute`. The widget now sits in normal flow,
     so the card always grows to fit its content at any screen width.
   - All sizing uses fluid units (%, clamp(), aspect-ratio) instead of
     fixed pixel insets, so nothing overflows on phones or tablets.
   - Animations are progressive enhancement: the widget looks complete and
     correct even with CSS/JS partially unsupported, and everything respects
     prefers-reduced-motion.
   ========================================================================== */

.hero-card{
  display:flex;
  align-items:stretch;
  min-height:0;
  padding:clamp(14px,3vw,24px);
}

.growth-widget{
  position:relative;
  width:100%;
  max-width:100%;
  display:flex;
  flex-direction:column;
  gap:clamp(12px,2.4vw,18px);
  background:#fff;
  color:var(--ink);
  border-radius:20px;
  padding:clamp(16px,3.6vw,22px);
  box-shadow:0 20px 50px rgba(0,0,0,.18);
  overflow:hidden;
  box-sizing:border-box;
}

/* ---------- Header ---------- */
.gw-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:.75rem;
  color:#64748b;
}
.gw-tag{font-weight:600}
.gw-live{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:600;
  color:#0f9f5a;
}
.gw-dot{
  width:7px;height:7px;border-radius:50%;
  background:#22c55e;
  flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(34,197,94,.6);
}
@media (prefers-reduced-motion: no-preference){
  .gw-dot{animation:gwPulseDot 2.2s ease-out infinite}
}
@keyframes gwPulseDot{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}
  70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}

.gw-title{
  font-family:Manrope,sans-serif;
  font-size:clamp(1.05rem,2.6vw,1.25rem);
  font-weight:800;
  line-height:1.25;
  margin:0;
}

/* ---------- KPI counters ---------- */
.gw-kpis{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.gw-kpi{
  min-width:0;
  padding:clamp(11px,2.4vw,16px);
  border:1px solid var(--line);
  border-radius:15px;
}
.gw-count{
  display:block;
  font-family:Manrope,sans-serif;
  font-weight:800;
  font-size:clamp(1.15rem,3.4vw,1.45rem);
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gw-kpi small{color:var(--muted);font-size:.8rem}

/* ---------- Chart ---------- */
.gw-chart-wrap{
  min-width:0;
}
.gw-chart-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:.72rem;
  color:var(--muted);
  margin-bottom:6px;
}
.gw-chart-pct{
  font-weight:800;
  color:#0f9f5a;
  font-family:Manrope,sans-serif;
  font-size:.85rem;
}
.gw-chart{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:320/140;
  overflow:visible;
}

.gw-candle{
  transform-box:fill-box;
  transform-origin:bottom;
}
.gw-trend-line{
  fill:none;
  stroke:url(#gwLineGrad);
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.gw-trend-dot{
  fill:#fff;
  stroke:var(--brand,#2563eb);
  stroke-width:2.5;
}

@media (prefers-reduced-motion: no-preference){
  .gw-candle{
    animation:gwGrowCandle .7s cubic-bezier(.2,.8,.2,1) backwards;
  }
  .gw-chart[data-anim="idle"] .gw-candle{animation:none;transform:scaleY(0)}
  .gw-chart .gw-candle:nth-of-type(1){animation-delay:.05s}
  .gw-chart .gw-candle:nth-of-type(2){animation-delay:.18s}
  .gw-chart .gw-candle:nth-of-type(3){animation-delay:.31s}
  .gw-chart .gw-candle:nth-of-type(4){animation-delay:.44s}
  .gw-chart .gw-candle:nth-of-type(5){animation-delay:.57s}
  .gw-chart .gw-candle:nth-of-type(6){animation-delay:.7s}

  .gw-trend-line{
    stroke-dasharray:1;
    stroke-dashoffset:1;
    pathLength:1;
    animation:gwDrawLine 1.1s .55s ease forwards;
  }
  .gw-chart[data-anim="idle"] .gw-trend-line{stroke-dashoffset:1;animation:none}

  .gw-trend-dot{
    opacity:0;
    animation:gwFadeIn .4s ease forwards;
    animation-delay:1.55s;
  }
  .gw-chart[data-anim="idle"] .gw-trend-dot{opacity:0;animation:none}
}
@keyframes gwGrowCandle{
  from{transform:scaleY(0)}
  to{transform:scaleY(1)}
}
@keyframes gwDrawLine{
  to{stroke-dashoffset:0}
}
@keyframes gwFadeIn{
  to{opacity:1}
}

/* ---------- Growth chat / proof feed ---------- */
.gw-chat{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:none;
}
.gw-chat-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:9px 11px;
  border-radius:13px;
  background:var(--soft,#f5f8fc);
  min-width:0;
}
.gw-chat-icon{
  flex:0 0 auto;
  width:26px;height:26px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:.85rem;
  background:#eaf2ff;
}
.gw-chat-body{min-width:0}
.gw-chat-body b{
  display:block;
  font-size:.83rem;
  font-family:Manrope,sans-serif;
  line-height:1.3;
}
.gw-chat-body span{
  display:block;
  font-size:.76rem;
  color:var(--muted);
  overflow-wrap:anywhere;
}
.gw-chat-time{
  flex:0 0 auto;
  font-size:.68rem;
  color:#94a3b8;
  margin-left:auto;
  padding-left:6px;
  white-space:nowrap;
}

.gw-chat.gw-anim-ready .gw-chat-item{
  opacity:0;
  transform:translateY(8px);
}
@media (prefers-reduced-motion: no-preference){
  .gw-chat.gw-anim-ready .gw-chat-item{
    transition:opacity .45s ease, transform .45s ease;
  }
}
.gw-chat.gw-anim-ready .gw-chat-item.is-visible{
  opacity:1;
  transform:translateY(0);
}

.gw-disclaimer{
  margin:0;
  font-size:.68rem;
  color:#94a3b8;
  line-height:1.4;
}

/* ---------- Responsive breakpoints ---------- */
@media (max-width:950px){
  .growth-widget{gap:14px}
}

@media (max-width:620px){
  .hero-card{padding:14px}
  .growth-widget{
    padding:16px;
    border-radius:18px;
    gap:12px;
  }
  .gw-title{font-size:1.08rem}
  .gw-kpis{gap:8px}
  .gw-kpi{padding:11px}
  .gw-chat-item{padding:8px 10px}
  .gw-chat-body b{font-size:.8rem}
  .gw-chat-body span{font-size:.73rem}
}

@media (max-width:380px){
  .gw-kpis{grid-template-columns:1fr 1fr;gap:6px}
  .gw-count{font-size:1.05rem}
  .gw-chat-time{display:none}
}

/* Guard against any accidental horizontal overflow on small screens */
@media (max-width:620px){
  .hero-grid{overflow-x:hidden}
}