/* ==========================================================================
   Embla · CORE (Nightfall) — dunkles Liquid-Glass-Design-System
   Dark-first · cinematic · Glas nur für Steuerungs-/Nav-Ebene · SF-Typo
   ========================================================================== */

:root{
  /* Atmosphäre / Flächen */
  --bg:#0b0a0f;
  --bg-2:#141019;
  --night:#1b1620;

  /* Akzent: Ember (warm, dominant) + scharfe Akzente */
  --ember:#ffb24d;
  --ember-deep:#ff7a3c;
  --gold:#ffd27a;
  --garnet:#ff5c7a;
  --teal:#3fe0c8;          /* sparsamer Kühl-Akzent */

  /* Text auf dunkel */
  --txt:#f6f3ef;
  --dim:rgba(246,243,239,.66);
  --faint:rgba(246,243,239,.42);

  /* Glas (Liquid Glass) */
  --glass:rgba(26,24,34,.5);
  --glass-strong:rgba(20,18,26,.66);
  --glass-line:rgba(255,255,255,.16);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.12);

  /* Status / Semantik */
  --online:#5fe3a1; --stop:#ff5c7a; --verified:var(--ember);

  --font:-apple-system,system-ui,"SF Pro Display","SF Pro Text",sans-serif;

  --r-md:16px; --r-lg:22px; --r-xl:28px; --r-2xl:34px; --r-pill:999px;

  --e-2:0 16px 40px -16px rgba(0,0,0,.7);
  --e-3:0 30px 70px -24px rgba(0,0,0,.8);
  --glow-ember:0 0 28px -2px rgba(255,150,70,.7);

  --ease:cubic-bezier(0.16,1,0.3,1); --t:240ms; --t-fast:130ms;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased}
body{font-family:var(--font);color:var(--txt);background:var(--bg)}

/* Typo-Helfer (SF, mutige Hierarchie) */
.t-display{font:800 40px/0.98 var(--font);letter-spacing:-.03em}
.t-h1{font:800 30px/1.02 var(--font);letter-spacing:-.025em}
.t-h2{font:700 22px/1.1 var(--font);letter-spacing:-.02em}
.t-h3{font:600 18px/1.2 var(--font);letter-spacing:-.01em}
.t-body{font:400 16px/1.45 var(--font)}
.t-small{font:500 14px/1.35 var(--font)}
.t-cap{font:600 12px/1.2 var(--font)}
.t-over{font:700 10px/1 var(--font);letter-spacing:.14em;text-transform:uppercase}

/* ---------- Bühne + iPhone ---------- */
.stage{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;
  background:radial-gradient(120% 80% at 50% 0%, #2a1d24 0%, #141019 55%, #0b0a0f 100%)}
.phone{width:390px;height:844px;background:#000;border-radius:54px;padding:11px;position:relative;
  box-shadow:0 60px 120px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06), 0 0 90px -30px rgba(255,140,60,.26)}
.screen{width:100%;height:100%;border-radius:44px;overflow:hidden;position:relative;background:var(--bg);display:flex;flex-direction:column}
.island{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:122px;height:34px;background:#000;border-radius:20px;z-index:60}

.statusbar{height:54px;flex:none;display:flex;align-items:flex-end;justify-content:space-between;padding:0 26px 8px;color:#fff;font:600 15px/1 var(--font);z-index:30}
.statusbar.abs{position:absolute;top:0;left:0;right:0}
.sb-r{display:flex;gap:7px;align-items:center}
.canvas{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.canvas::-webkit-scrollbar{display:none}

/* ---------- Atmosphäre-Overlays ---------- */
.atmos{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:
  radial-gradient(70% 42% at 50% -6%, rgba(255,160,80,.55) 0%, transparent 58%),
  radial-gradient(55% 35% at 90% 12%, rgba(255,92,122,.3) 0%, transparent 60%),
  radial-gradient(80% 45% at 18% 104%, rgba(63,224,200,.16) 0%, transparent 60%)}
.scrim-b{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top, #0b0a0f 3%, rgba(11,10,15,.55) 24%, transparent 50%, rgba(11,10,15,.4) 92%)}

/* ---------- Liquid Glass Primitive ---------- */
.glass{background:var(--glass);backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5);
  border:1px solid var(--glass-line);box-shadow:var(--e-2),var(--glass-hi)}
.glass-strong{background:var(--glass-strong);backdrop-filter:blur(30px) saturate(1.5);-webkit-backdrop-filter:blur(30px) saturate(1.5);
  border:1px solid var(--glass-line);box-shadow:var(--e-3),var(--glass-hi)}

/* ---------- Glas-Topbar / Nav ---------- */
.glassbar{position:absolute;top:58px;left:14px;right:14px;height:50px;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 16px;border-radius:var(--r-pill)}
.brand{display:flex;align-items:center;gap:8px;color:#fff;font:700 20px/1 var(--font);letter-spacing:-.02em}
.spark-glow{filter:drop-shadow(0 0 6px rgba(255,170,80,.9))}
.gicon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);color:#fff;border:none;cursor:pointer}

/* ---------- Ember-Buttons ---------- */
.btn{border:none;cursor:pointer;font:700 16px/1 var(--font);border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform var(--t-fast) var(--ease)}
.btn:active{transform:scale(.97)}
.btn-ember{color:#241206;padding:15px 22px;background:radial-gradient(120% 160% at 30% 20%, #ffd27a 0%, var(--ember) 45%, var(--ember-deep) 100%);box-shadow:var(--glow-ember),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-glass{color:#fff;padding:15px 22px;background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-line)}
.btn-ghost{color:var(--dim);background:none;padding:14px 18px}
.btn-block{width:100%}

/* ---------- Verified-Pille ---------- */
.verline{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-line);padding:6px 12px 6px 8px;border-radius:var(--r-pill);font:600 12px/1 var(--font);color:#fff}
.verline .seal,.vseal{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--ember-deep));display:flex;align-items:center;justify-content:center;color:#1b0f08;flex:none}
.vseal svg,.verline .seal svg{width:11px;height:11px}

/* ---------- Prompt-Glaskarte ---------- */
.promptglass{padding:16px 18px;border-radius:var(--r-xl)}
.promptglass .pl{font:700 10px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--ember)}
.promptglass .pa{margin-top:8px;font:600 17px/1.34 var(--font);color:#fff;letter-spacing:-.01em}

/* ---------- Pills / Tags ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;font:600 13px/1 var(--font);padding:8px 13px;border-radius:var(--r-pill);background:rgba(255,255,255,.08);color:var(--txt);border:1px solid var(--glass-line)}
.pill-ember{background:rgba(255,150,70,.16);color:var(--gold);border-color:rgba(255,170,90,.3)}

/* ---------- Aktionsleiste (Discovery) ---------- */
.actionbar{position:absolute;left:14px;right:14px;bottom:34px;z-index:40;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 20px;border-radius:var(--r-pill)}
.later{background:none;border:none;color:var(--dim);font:600 15px/1 var(--font);cursor:pointer;white-space:nowrap}
.actright{display:flex;align-items:center;gap:10px}
.act-note{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid var(--glass-line);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.act-send{display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;color:#241206;font:700 15px/1 var(--font);padding:0 18px;height:48px;border-radius:var(--r-pill);background:radial-gradient(120% 160% at 30% 20%, #ffd27a 0%, var(--ember) 45%, var(--ember-deep) 100%);box-shadow:var(--glow-ember),inset 0 1px 0 rgba(255,255,255,.5)}

/* ---------- Glas-Tabbar (4 Tabs) ---------- */
.tabbar{position:absolute;left:14px;right:14px;bottom:22px;z-index:40;height:66px;display:flex;align-items:center;justify-content:space-around;padding:0 8px;border-radius:var(--r-pill)}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;color:var(--faint);font:600 10px/1 var(--font);cursor:pointer}
.tab.active{color:var(--ember)}
.tab.active .spark-glow{filter:drop-shadow(0 0 5px rgba(255,170,80,.9))}

/* ---------- Inputs (dark) ---------- */
.field-label{font:600 13px/1 var(--font);color:var(--dim);margin-bottom:8px;display:block}
.input{width:100%;background:rgba(255,255,255,.06);border:1px solid var(--glass-line);border-radius:var(--r-md);padding:15px 16px;font:500 16px/1.2 var(--font);color:#fff}
.input::placeholder{color:var(--faint)}
.input:focus{outline:none;border-color:var(--ember);box-shadow:0 0 0 3px rgba(255,150,70,.18)}

/* ---------- Chat-Bubbles ---------- */
.bubble{max-width:78%;padding:11px 15px;border-radius:20px;font:400 15px/1.4 var(--font)}
.bubble.in{background:rgba(255,255,255,.09);color:var(--txt);align-self:flex-start;border-bottom-left-radius:7px;border:1px solid var(--glass-line)}
.bubble.out{color:#241206;align-self:flex-end;border-bottom-right-radius:7px;font-weight:600;background:radial-gradient(120% 200% at 20% 0%, var(--gold) 0%, var(--ember) 60%, var(--ember-deep) 100%)}

/* ---------- Avatar / online ---------- */
.avatar{border-radius:50%;object-fit:cover;display:block;background:#222}
.online{width:12px;height:12px;border-radius:50%;background:var(--online);border:2.5px solid var(--bg)}

/* ---------- Divider / Listrow ---------- */
.divider{height:1px;background:var(--glass-line)}
.listrow{display:flex;align-items:center;gap:14px;padding:14px 18px}
.listrow .grow{flex:1;min-width:0}