static/game.css

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Spectral:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@500&display=swap');

/* ---- forest backdrop: deep canopy gradient + slow drifting fireflies ---- */
.gradio-container { position: relative; }
.gradio-container::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='130'%3E%3Cpolygon points='46,10 80,122 12,122' fill='%23040a09'/%3E%3C/svg%3E") repeat-x left bottom,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='96'%3E%3Cpolygon points='36,8 62,90 10,90' fill='%23081411'/%3E%3C/svg%3E") repeat-x 34px bottom,
    radial-gradient(1200px 700px at 78% -8%, rgba(58,140,98,.20), transparent 60%),
    radial-gradient(900px 600px at 8% 108%, rgba(28,86,72,.28), transparent 60%),
    radial-gradient(1400px 900px at 50% 120%, rgba(0,0,0,.45), transparent 55%),
    linear-gradient(168deg, #0c1512 0%, #0a120f 45%, #060c0b 100%);
  background-size: 92px 130px, 72px 96px, auto, auto, auto, auto; }
.gradio-container::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity:.5;
  background-image:
    radial-gradient(rgba(190,255,210,.55) 1px, transparent 1.8px),
    radial-gradient(rgba(160,230,255,.40) 1px, transparent 1.8px);
  background-size: 120px 120px, 200px 180px; background-position: 0 0, 60px 90px;
  animation: fireflies 26s linear infinite; }
@keyframes fireflies { from { background-position: 0 0, 60px 90px; }
  to { background-position: 80px 260px, -120px -200px; } }

/* ---- hero (collapsible) ---- */
.hero-wrap { margin:0 0 8px; border-radius:14px; border:1px solid rgba(150,210,180,.14);
  background:rgba(8,16,14,.55); overflow:hidden; }
.hero-wrap summary { list-style:none; cursor:pointer; padding:10px 16px; display:flex;
  align-items:center; justify-content:space-between; gap:12px;
  font-family:'Cinzel Decorative',serif; font-size:15px; color:#d8f0e0; user-select:none; }
.hero-wrap summary::-webkit-details-marker { display:none; }
.hero-wrap summary .hero-toggle { font-family:'Spectral',serif; font-size:11px; opacity:.65;
  letter-spacing:.4px; text-transform:uppercase; }
.hero-wrap:not([open]) summary { margin:0; }
.hero { text-align:center; padding: 4px 16px 12px; }
.hero h1 { font-family:'Cinzel Decorative', serif !important; font-weight:900;
  font-size: clamp(30px, 5vw, 52px); letter-spacing:1px; margin:0; line-height:1.05;
  background: linear-gradient(180deg, #f4e7b8 0%, #c9e7c2 55%, #7fc79a 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow: 0 0 36px rgba(170,255,200,.18); }
.hero p { font-family:'Spectral', serif; font-style:italic; opacity:.86; margin:6px auto 0;
  max-width: 720px; font-size: 15px; }

/* ---- trail through the wood ---- */
.trail { display:flex; align-items:center; justify-content:space-between; gap:2px; margin: 4px 0 12px; }
.trail .node { display:flex; flex-direction:column; align-items:center; gap:4px; flex:0 0 auto; }
.trail .orb { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-size:18px;
  border:1px solid rgba(150,210,180,.35); background:rgba(255,255,255,.05); transition:all .4s ease; }
.trail .lbl { font-size:9.5px; letter-spacing:.6px; text-transform:uppercase; opacity:.55; }
.trail .seg { flex:1 1 auto; height:2px; border-radius:2px; background:rgba(150,210,180,.18); }
.trail .seg.done { background:linear-gradient(90deg,#7fe0a8,#3f9d76); }
.trail .node.done .orb { background:rgba(127,224,168,.16); border-color:#7fe0a8;
  box-shadow:0 0 12px rgba(127,224,168,.4); }
.trail .node.done .lbl { opacity:.85; }
.trail .node.current .orb { border-color:#ffe08a;
  box-shadow:0 0 0 3px rgba(255,224,138,.18),0 0 22px rgba(255,224,138,.55);
  animation: pulse 2.4s ease-in-out infinite; }
.trail .node.current .lbl { opacity:1; color:#ffe9ad; }
.trail .node.locked .orb { opacity:.4; filter:grayscale(.6); }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }

/* ---- atmosphere card (darkens L1->L5) ---- */
.atmo { position:relative; overflow:hidden; border-radius:16px; padding:18px 20px; margin-bottom:12px;
  color:var(--fg); background:linear-gradient(160deg, var(--bg1), var(--bg2));
  border:1px solid rgba(255,255,255,.07);
  transition:background 1.2s ease,color 1.2s ease; box-shadow:inset 0 0 70px rgba(0,0,0,.30); }
.atmo h3 { margin:2px 0; font-family:'Cinzel Decorative',serif; font-weight:700; font-size:19px; color:var(--fg); }
.atmo .lvl-no { font-size:11px; letter-spacing:2.5px; text-transform:uppercase; opacity:.72; }
.atmo .atmo-blurb { margin:8px 0 0; opacity:.94; font-family:'Spectral',serif; font-style:italic; line-height:1.45; }
.atmo code { background:rgba(255,255,255,.18); padding:1px 6px; border-radius:6px;
  font-family:'JetBrains Mono',monospace; }
.atmo.level-1 { --bg1:#bdeccb; --bg2:#6fbf8f; --fg:#16331f; }
.atmo.level-2 { --bg1:#7fc79e; --bg2:#388f6c; --fg:#0c2a1a; }
.atmo.level-3 { --bg1:#3f8472; --bg2:#205645; --fg:#e9f6ed; }
.atmo.level-4 { --bg1:#274e49; --bg2:#123433; --fg:#dcefe9; }
.atmo.level-5 { --bg1:#161f30; --bg2:#080c18; --fg:#cdd6ee; }
.atmo-spores { position:absolute; inset:0; pointer-events:none; opacity:.40;
  background-image:radial-gradient(rgba(255,255,255,.6) 1px, transparent 1.6px); background-size:40px 40px;
  animation:drift 18s linear infinite; }
@keyframes drift { from{background-position:0 0} to{background-position:42px 140px} }
.atmo.flash-block { animation:shake .45s ease; }
.hud-wrap.flash-block .atmo { animation:shake .45s ease; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
.atmo.flash-win { animation:glow 1.4s ease; }
.hud-wrap.flash-win .atmo { animation:glow 1.4s ease; }
@keyframes glow { 0%{box-shadow:inset 0 0 70px rgba(0,0,0,.30)}
  50%{box-shadow:0 0 48px 12px rgba(255,214,102,.85),inset 0 0 70px rgba(0,0,0,.30)}
  100%{box-shadow:inset 0 0 70px rgba(0,0,0,.30)} }

/* ---- shields panel ---- */
.shields { margin: 0 0 12px; }
.shields .cap { font-size:11px; letter-spacing:2px; text-transform:uppercase; opacity:.55; margin-bottom:6px; }
.shields .row { display:flex; flex-direction:column; gap:6px; }
.chip { display:flex; align-items:center; gap:8px; font-size:13px; padding:7px 11px; border-radius:10px;
  border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.035); }
.chip.on { border-color:rgba(127,224,168,.5); background:rgba(127,224,168,.10);
  box-shadow:0 0 14px rgba(127,224,168,.18); }
.chip.on .dot { background:#7fe0a8; box-shadow:0 0 8px #7fe0a8; }
.chip .dot { width:8px; height:8px; border-radius:50%; background:#5a6b63; flex:0 0 auto; }
.chip.off { opacity:.5; }
.chip .nm { font-weight:600; } .chip .ds { opacity:.7; font-size:11.5px; }

/* ---- token budget meter ---- */
.meter { border-radius:12px; padding:12px 14px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09); }
.meter .top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.meter .top .t { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; opacity:.6; }
.meter .top .v { font-family:'JetBrains Mono',monospace; font-size:15px; }
.meter .top .v b { color:#ffe08a; }
.meter .bar { height:9px; border-radius:99px; background:rgba(0,0,0,.35); overflow:hidden; }
.meter .fill { height:100%; border-radius:99px; transition:width .5s ease;
  background:linear-gradient(90deg,#7fe0a8,#ffe08a); }
.meter .fill.over { background:linear-gradient(90deg,#ffb061,#ff6b6b); }
.meter .sub { font-size:11px; opacity:.6; margin-top:6px; }

/* ---- guardian portrait (evolves per level + reacts) ---- */
.portrait { text-align:center; margin: 2px 0 14px; position:relative; }
.portrait .frame { position:relative; width:128px; height:128px; margin:0 auto; border-radius:50%;
  display:grid; place-items:center; overflow:hidden; transition: all .6s ease;
  background: radial-gradient(circle at 50% 36%, var(--p2), var(--p1) 76%);
  border:2px solid var(--pborder); box-shadow: 0 0 28px var(--pglow), inset 0 0 32px rgba(0,0,0,.45); }
.portrait .creature { font-size:62px; line-height:1; position:relative; z-index:2;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.5)); animation: floaty 4.5s ease-in-out infinite; }
@keyframes floaty { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-7px) rotate(1deg)} }
.portrait .aura { position:absolute; inset:-18%; border-radius:50%; pointer-events:none; z-index:1;
  background: radial-gradient(circle, var(--pglow), transparent 64%); animation: breathe 5s ease-in-out infinite; }
@keyframes breathe { 0%,100%{opacity:.35; transform:scale(.95)} 50%{opacity:.7; transform:scale(1.08)} }
.portrait .rings { position:absolute; inset:0; border-radius:50%; pointer-events:none;
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.05), inset 0 0 0 13px rgba(255,255,255,.03); }
.portrait .p-name { margin-top:8px; font-family:'Cinzel Decorative',serif; font-size:14px; letter-spacing:.5px;
  color: var(--pborder); text-shadow: 0 0 14px var(--pglow); }
.p-lvl1 .frame { --p1:#2c6b45; --p2:#9be8b6; --pborder:#cdeccb; --pglow:rgba(150,240,180,.55); }
.p-lvl2 .frame { --p1:#1f5238; --p2:#6fc79a; --pborder:#aee0c2; --pglow:rgba(110,200,150,.5); }
.p-lvl3 .frame { --p1:#123a30; --p2:#3f8472; --pborder:#8fd8c4; --pglow:rgba(80,185,150,.5); }
.p-lvl4 .frame { --p1:#0c2624; --p2:#2b524c; --pborder:#a6dbd2; --pglow:rgba(95,165,155,.45); }
.p-lvl5 .frame { --p1:#070b16; --p2:#2a2150; --pborder:#c2b3ff; --pglow:rgba(150,120,255,.55); }
.portrait.mood-block .frame { border-color:#ff7a7a;
  box-shadow:0 0 34px rgba(255,90,90,.7), inset 0 0 30px rgba(0,0,0,.5); animation: pshake .5s ease; }
@keyframes pshake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }
.portrait.mood-block .creature { animation: floaty 4.5s ease-in-out infinite, angry .5s ease; }
@keyframes angry { 0%,100%{filter:none} 50%{filter:hue-rotate(-35deg) brightness(1.25)} }
.portrait.mood-win .frame { border-color:#ffe08a;
  box-shadow:0 0 48px 8px rgba(255,214,102,.85), inset 0 0 30px rgba(0,0,0,.4); animation: pwin 1.3s ease; }
@keyframes pwin { 0%{transform:scale(1)} 40%{transform:scale(1.12)} 100%{transform:scale(1)} }

/* ---- escalating 'corrupted firewall' vibe: the deeper you go, the more the Wood glitches ---- */
.atmo::after { content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none; opacity:0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.20) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay; transition:opacity 1.2s ease; }
.atmo.level-3::after { opacity:.22; }
.atmo.level-4::after { opacity:.4; }
.atmo.level-5::after { opacity:.62; animation: scanflick 3.2s steps(2) infinite; }
@keyframes scanflick { 0%,100%{opacity:.5} 50%{opacity:.78} }
.atmo.level-4 h3, .atmo.level-5 h3 { position:relative;
  text-shadow: 1.4px 0 rgba(255,40,80,.55), -1.4px 0 rgba(40,200,255,.55); }
.atmo.level-5 h3 { animation: glitchtext 3s infinite; }
@keyframes glitchtext { 0%,90%,100%{transform:translate(0)} 92%{transform:translate(-2px,1px)}
  94%{transform:translate(2px,-1px)} 96%{transform:translate(-1px,0)} }
.p-lvl5 .frame { border-style:double; }
.p-lvl5 .creature { animation: floaty 4.5s ease-in-out infinite, pglitch 4.4s steps(2) infinite; }
@keyframes pglitch { 0%,88%,100%{filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}
  90%{filter:drop-shadow(2px 0 rgba(255,0,80,.6)) drop-shadow(-2px 0 rgba(0,200,255,.6))} }
.p-lvl5 .p-name { animation: chipflick 5s steps(3) infinite; }
@keyframes chipflick { 0%,96%,100%{opacity:1} 97%{opacity:.55} 98%{opacity:.85} }

/* ---- tab transitions ---- */
.gradio-container .tabitem { animation: tabfade .38s ease; }
@keyframes tabfade { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* ---- win confetti overlay ---- */
#dojo-confetti { position:fixed; inset:0; pointer-events:none; z-index:9999; overflow:hidden; }
.confetti-bit { position:absolute; top:-12px; width:8px; height:12px; opacity:.9;
  animation: confall var(--dur,2.8s) ease-in forwards; }
@keyframes confall {
  0% { transform:translateY(0) rotate(0deg); opacity:1; }
  100% { transform:translateY(110vh) rotate(720deg); opacity:0; } }

/* ---- full-screen game shell: hide Gradio chrome, stretch the Wood edge-to-edge ---- */
footer, .gradio-footer { display:none !important; }
.gradio-container { min-height:100vh; max-width:100% !important; width:100% !important;
  padding:8px clamp(10px,2.5vw,28px) 28px !important; }
.gradio-container .tabs { border:none !important; background:transparent !important; }
.gradio-container .tab-nav { gap:6px; border-bottom:1px solid rgba(150,210,180,.14) !important;
  padding-bottom:6px; margin-bottom:10px; }
.gradio-container .tab-nav button { font-family:'Cinzel Decorative',serif !important; font-size:13px !important;
  letter-spacing:.4px; border-radius:10px 10px 0 0 !important; border:1px solid transparent !important;
  background:rgba(255,255,255,.03) !important; color:rgba(230,245,235,.82) !important; }
.gradio-container .tab-nav button.selected { border-color:rgba(127,224,168,.45) !important;
  background:rgba(127,224,168,.10) !important; color:#e8fff0 !important;
  box-shadow:0 -2px 18px rgba(127,224,168,.12); }
.game-row { align-items:stretch !important; gap:clamp(10px,2vw,22px) !important; }

/* ---- custom chat bubbles (Off-Brand: not default Gradio chat chrome) ---- */
.guardian-chat { min-height:min(62vh, 520px); border-radius:18px !important;
  border:1px solid rgba(150,210,180,.16) !important;
  background:linear-gradient(180deg, rgba(8,16,14,.72), rgba(4,10,9,.88)) !important;
  box-shadow:inset 0 0 40px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.25) !important; }
.guardian-chat .message-wrap, .guardian-chat .message-row { padding:4px 10px !important; }
.guardian-chat .message { font-family:'Spectral',serif !important; font-size:15px !important;
  line-height:1.5 !important; border-radius:14px !important; padding:12px 14px !important;
  border:1px solid rgba(255,255,255,.08) !important; max-width:92% !important; }
.guardian-chat .user, .guardian-chat .message.user, .guardian-chat [data-testid="user"] .message {
  margin-left:auto !important; background:linear-gradient(135deg, rgba(56,120,92,.55), rgba(28,74,58,.75)) !important;
  border-color:rgba(127,224,168,.35) !important; color:#e8fff0 !important; }
.guardian-chat .bot, .guardian-chat .message.bot, .guardian-chat [data-testid="bot"] .message {
  margin-right:auto !important; background:linear-gradient(135deg, rgba(22,34,48,.75), rgba(12,20,30,.9)) !important;
  border-color:rgba(180,200,255,.18) !important; color:#dde8f0 !important; }
.guardian-chat .avatar-container { display:none !important; }
.stirring { display:flex; align-items:flex-start; gap:10px; opacity:.9; font-family:'Spectral',serif;
  animation: stir 1.4s ease-in-out infinite; }
.stirring .spinner { width:16px; height:16px; margin-top:3px; flex:0 0 auto; border-radius:50%;
  border:2px solid rgba(127,224,168,.25); border-top-color:#7fe0a8; animation: spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.stirring .cold-hint { display:block; margin-top:6px; font-size:12px; opacity:.72; font-style:normal;
  letter-spacing:.2px; }
@keyframes stir { 0%,100%{opacity:.45} 50%{opacity:.95} }
.gradio-container .message-row.bot-row .message:has(.sysblock),
.sysblock { font-family:'Spectral',serif; border-style:dashed !important;
  background:rgba(255,200,120,.08) !important; border-color:rgba(255,200,120,.35) !important; }

/* ---- inputs / buttons polish ---- */
#send-btn, #guess-btn { font-weight:600; letter-spacing:.3px; }
#send-btn { background:linear-gradient(180deg,#5ecf96,#2f8f66) !important; border:none !important; }
#guess-btn { background:linear-gradient(180deg,#4a5568,#2d3748) !important;
  border:1px solid rgba(255,255,255,.12) !important; }
.gradio-container input, .gradio-container textarea {
  background:rgba(255,255,255,.05) !important; border:1px solid rgba(150,210,180,.22) !important;
  border-radius:12px !important; color:#e8f2ec !important; }
.gradio-container input:focus, .gradio-container textarea:focus {
  border-color:rgba(127,224,168,.55) !important; box-shadow:0 0 0 2px rgba(127,224,168,.15) !important; }
.win-banner { font-family:'Spectral',serif; }

/* ---- HUD level shift on advance ---- */
.hud-wrap.level-shift .trail, .hud-wrap.level-shift .atmo, .hud-wrap.level-shift .portrait {
  animation: levelshift 1.1s ease; }
@keyframes levelshift {
  0% { transform:translateY(10px); opacity:.35; filter:blur(1.5px); }
  100% { transform:translateY(0); opacity:1; filter:none; } }
.status-chip { display:inline-block; font-size:11px; letter-spacing:1.2px; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; margin-bottom:10px; }
.status-chip.live { color:#b8f5d0; background:rgba(127,224,168,.12); border:1px solid rgba(127,224,168,.4); }
.status-chip.demo { color:#ffd9a8; background:rgba(255,200,120,.10); border:1px solid rgba(255,200,120,.35); }
#send-btn:disabled, #cs-send-btn:disabled { opacity:.45 !important; cursor:not-allowed !important; }

/* ---- mobile: stack HUD above chat, tighten trail ---- */
@media (max-width: 860px) {
  .trail .orb { width:30px; height:30px; font-size:14px; }
  .trail .lbl { font-size:8px; }
  .guardian-chat { min-height:48vh; }
  .hero h1 { font-size: clamp(24px, 8vw, 36px); }
  .hero p { font-size:13px; }
}

#game-result { min-height:24px; }
#game-result .scorecard { animation: scorepop .55s ease; }
@keyframes scorepop { 0% { transform:scale(.88); opacity:.2; } 100% { transform:scale(1); opacity:1; } }
.gradio-container .dataframe { border-radius:12px !important; overflow:hidden;
  border:1px solid rgba(150,210,180,.16) !important; }

/* ---- win score-card (built for screenshotting) ---- */
.scorecard { max-width:330px; margin:10px auto; border-radius:18px; padding:20px; text-align:center;
  color:#f3f7f3; background:linear-gradient(158deg, var(--sc1), var(--sc2));
  border:1px solid rgba(255,255,255,.16); box-shadow:0 12px 42px rgba(0,0,0,.5); font-family:'Spectral',serif; }
.scorecard .sc-emoji { font-size:46px; line-height:1; }
.scorecard .sc-name { font-family:'Cinzel Decorative',serif; font-size:20px; margin:4px 0 10px; }
.scorecard .sc-badge { display:inline-block; font-size:11px; letter-spacing:1.5px; padding:4px 12px;
  border-radius:999px; background:rgba(255,224,138,.18); border:1px solid rgba(255,224,138,.5); color:#ffe9ad; }
.scorecard .sc-stats { display:flex; justify-content:center; gap:22px; margin:14px 0 4px; font-size:16px; }
.scorecard .sc-stats b { color:#ffe08a; }
.scorecard .sc-foot { font-size:11px; opacity:.7; margin-top:8px; }
.sc-lvl1 { --sc1:#2c6b45; --sc2:#16331f; } .sc-lvl2 { --sc1:#1f5238; --sc2:#0c2a1a; }
.sc-lvl3 { --sc1:#1c4a3e; --sc2:#0d2722; } .sc-lvl4 { --sc1:#1d3c39; --sc2:#0c1f1e; }
.sc-lvl5 { --sc1:#241d44; --sc2:#0a0e1c; }

@media (prefers-reduced-motion: reduce) {
  .gradio-container::after, .atmo-spores, .atmo.flash-block, .atmo.flash-win,
  .trail .node.current .orb, .portrait .creature, .portrait .aura,
  .portrait.mood-block .frame, .portrait.mood-win .frame,
  .atmo.level-5::after, .atmo.level-5 h3, .p-lvl5 .creature, .p-lvl5 .p-name,
  .stirring .spinner, .hud-wrap.level-shift .trail, .hud-wrap.level-shift .atmo,
  .hud-wrap.level-shift .portrait, .gradio-container .tabitem,
  .confetti-bit, #game-result .scorecard { animation:none !important; } }

body { margin:0; background:#060c0b; color:#e2efe8; font-family:'Spectral',serif; }
#app { min-height:100vh; padding:8px clamp(10px,2.5vw,28px) 28px; }
.tabs { display:flex; gap:6px; border-bottom:1px solid rgba(150,210,180,.14); padding-bottom:6px; margin-bottom:10px; }
.tab-btn { font-family:'Cinzel Decorative',serif; font-size:13px; padding:8px 14px; border-radius:10px 10px 0 0;
  border:1px solid transparent; background:rgba(255,255,255,.03); color:rgba(230,245,235,.82); cursor:pointer; }
.tab-btn.active { border-color:rgba(127,224,168,.45); background:rgba(127,224,168,.10); color:#e8fff0; }
.tab-panel { display:none; } .tab-panel.active { display:block; }
.game-row { display:grid; grid-template-columns:minmax(260px,2fr) minmax(300px,3fr); gap:clamp(10px,2vw,22px); }
@media (max-width:860px){ .game-row{ grid-template-columns:1fr; } }
.chat-log { min-height:min(62vh,520px); max-height:62vh; overflow-y:auto; border-radius:18px;
  border:1px solid rgba(150,210,180,.16); background:linear-gradient(180deg,rgba(8,16,14,.72),rgba(4,10,9,.88));
  padding:10px; box-shadow:inset 0 0 40px rgba(0,0,0,.35); }
.chat-msg { margin:8px 0; padding:12px 14px; border-radius:14px; max-width:92%; line-height:1.5; font-size:15px; }
.chat-msg.user { margin-left:auto; background:linear-gradient(135deg,rgba(56,120,92,.55),rgba(28,74,58,.75));
  border:1px solid rgba(127,224,168,.35); }
.chat-msg.bot { margin-right:auto; background:linear-gradient(135deg,rgba(22,34,48,.75),rgba(12,20,30,.9));
  border:1px solid rgba(180,200,255,.18); }
.input-row { display:flex; gap:8px; margin-top:10px; }
.input-row input, .input-row textarea { flex:1; padding:10px 12px; border-radius:12px;
  background:rgba(255,255,255,.05); border:1px solid rgba(150,210,180,.22); color:#e8f2ec; }
.btn { padding:10px 16px; border-radius:12px; border:none; cursor:pointer; font-weight:600; }
.btn-primary { background:linear-gradient(180deg,#5ecf96,#2f8f66); color:#f3fff7; }
.btn-secondary { background:linear-gradient(180deg,#4a5568,#2d3748); color:#dcefe4; border:1px solid rgba(255,255,255,.12); }
.btn-sm { font-size:12px; padding:6px 10px; }
.model-row { margin:10px 0; display:flex; gap:14px; flex-wrap:wrap; }
.model-row label { display:flex; align-items:center; gap:6px; cursor:pointer; }
#result-area { min-height:24px; margin-top:10px; }
.demo-banner { background:rgba(255,200,120,.12); border:1px solid rgba(255,200,120,.35); padding:10px 14px;
  border-radius:12px; margin-bottom:10px; font-size:14px; }
.lb-table { width:100%; border-collapse:collapse; border-radius:12px; overflow:hidden; }
.lb-table th, .lb-table td { padding:10px 12px; border-bottom:1px solid rgba(150,210,180,.12); text-align:left; }
.lb-table th { font-size:11px; letter-spacing:1px; text-transform:uppercase; opacity:.7; }