/* scenario-refresh.css
   ---
   Visual refresh layer for in-app scenario surfaces.
   Loads AFTER each page's inline <style> block AND after
   theme-botanical.css, so refresh rules win the cascade by source
   order alone (no !important needed).
   ---
   Scope: scenario panels, state cards/pips, titles, post-choice
   insight, choice buttons (resting fill), chat surfaces (bubbles +
   input area), scenario picker cards, module tabs.
   ---
   Goal: less flat, less delicate. More contrast, restrained depth,
   warmer surface, clearer affordances. Layout untouched, DOM untouched.
   ---
   Easy to revert: delete this file + remove the <link> tag from the
   26 surfaces that load it.
*/

/* =====================================================
   Scenario panels (.panel left + right) — resting elevation
   + atmosphere-aware shadow tint for mid/high tension states.
   ===================================================== */
.panel {
  box-shadow:
    0 1px 2px rgba(45, 93, 58, 0.04),
    0 6px 18px -10px rgba(45, 93, 58, 0.12);
}
.right-panel.mid-tension {
  box-shadow:
    0 1px 2px rgba(45, 93, 58, 0.05),
    0 8px 22px -12px rgba(180, 130, 70, 0.18);
  border-color: rgba(180, 130, 70, 0.22);
}
.right-panel.high-tension {
  box-shadow:
    0 1px 2px rgba(45, 93, 58, 0.06),
    0 8px 22px -12px rgba(164, 80, 80, 0.22);
  border-color: rgba(164, 80, 80, 0.28);
}

/* =====================================================
   State card + pip tracks — warm fill, more substantial bars.
   ===================================================== */
.state-card {
  background: rgba(253, 248, 238, 0.55);
  box-shadow: 0 1px 2px rgba(45, 93, 58, 0.04);
}
.state-pip-track {
  height: 10px;
  background: rgba(45, 93, 58, 0.10);
}
.state-pip-fill {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}

/* =====================================================
   Scenario title + scene hook hierarchy
   ===================================================== */
.title {
  font-weight: 500;
  letter-spacing: -0.005em;
}
.scene-hook {
  color: var(--text-2);
}

/* =====================================================
   Turn insight (post-choice micro-feedback) — coral accent
   border so it reads as "the system speaking" not body text.
   Eyebrow quieted so the body text dominates the callout.
   ===================================================== */
.turn-insight {
  border-left: 3px solid var(--accent);
  padding-left: 12px;
}
.turn-insight-eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* =====================================================
   Choice buttons — resting warm fill so the three options
   read as three real choices, not three labels. Hover lift
   already provided by theme-botanical's refresh layer.
   ===================================================== */
.choice-btn {
  background: rgba(255, 255, 255, 0.72);
}
[data-theme="dark"] .choice-btn {
  background: rgba(255, 255, 255, 0.06);
}

/* =====================================================
   Live-chat — frame the chat columns, strengthen bubbles,
   give the input area a clear edge.
   ===================================================== */
.chat-aside,
.chat-main {
  box-shadow:
    0 1px 2px rgba(45, 93, 58, 0.04),
    0 6px 18px -10px rgba(45, 93, 58, 0.10);
}
.chat-bubble.other {
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(45, 93, 58, 0.04);
}
.chat-bubble.you {
  box-shadow:
    0 1px 2px rgba(217, 127, 92, 0.10),
    0 4px 12px -6px rgba(217, 127, 92, 0.25);
}
#inputForm {
  border-top: 1px solid var(--line);
  background: rgba(253, 248, 238, 0.40);
}

/* =====================================================
   Scenario picker cards (practice-guided + practice-simulation)
   — warm fill + soft shadow at rest. Hover lift already
   provided by theme-botanical's refresh layer via .scenario-card.
   ===================================================== */
.scenario-card {
  background: rgba(253, 248, 238, 0.65);
  box-shadow:
    0 1px 2px rgba(45, 93, 58, 0.04),
    0 6px 16px -10px rgba(45, 93, 58, 0.12);
}
.scenario-card-title {
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* =====================================================
   Module tabs — active state earns its weight with a small
   shadow so the selection reads at a glance.
   ===================================================== */
.module-toggle button.active {
  box-shadow:
    0 1px 2px rgba(45, 93, 58, 0.08),
    0 6px 14px -8px rgba(45, 93, 58, 0.20);
}