/* ==========================================================================
   Gemini Nano Playground
   1 Tokens  2 Base  3 Glow  4 Glass  5 Buttons  6 App layout  7 Toast
   8 Setup screen  9 Settings  10 Liquid toggle  11 Motion and responsive
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  --c1: #ff9a3c; --c2: #ff4f9a; --c3: #b46bff; --c4: #4d8dff; --c5: #35d0ff;
  --grad: linear-gradient(100deg, var(--c1), var(--c2), var(--c3), var(--c4), var(--c5));
  --apple: conic-gradient(from 0deg, var(--c1), var(--c2), var(--c3), var(--c4), var(--c5), var(--c1));
  --accent: #2f6df0;
  --text: #171b29;
  --muted: #5b627a;
  --bg-a: #f6f7fa; --bg-b: #eceef4;
  --panel: rgba(255,255,255,.80);
  --panel-line: rgba(60,70,110,.10);
  --flat: rgba(60,70,110,.06);
  --fade: #eff0f5;
  --glass: rgba(255,255,255,.26);
  --sheen: rgba(255,255,255,.45);
  --edge: rgba(255,255,255,.85);
  --hl: rgba(255,255,255,.95);
  --hl-low: rgba(255,255,255,.25);
  --shadow: 0 10px 30px rgba(45,55,110,.12), 0 2px 6px rgba(45,55,110,.06);
  --btn-fill: #ffffff;
  --user: rgba(77,141,255,.14);
  --track: rgba(60,70,110,.14);
  --ok: #17683a; --warn: #8a5a00; --bad: #a11d2a;
  --code-bg: #171b29;
  --knob: #ffffff;
  --l0: 81; --l1: 52;               /* liquid toggle lightness: off, on */
  --font: ui-rounded, "SF Pro Rounded", "SF Pro Display", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --spring: linear(0, 0.35 4.5%, 0.8 9%, 1.08 14%, 1.14 17%, 1.1 20%, 1.03 26%, 0.99 33%, 1.004 45%, 1);
}
:root[data-theme="dark"] {
  --accent: #7aa7ff;
  --text: #eceffa;
  --muted: #9aa2bd;
  --bg-a: #151720; --bg-b: #0e1016;
  --panel: rgba(24,27,36,.96);
  --panel-line: rgba(255,255,255,.07);
  --flat: rgba(255,255,255,.07);
  --fade: #0f1118;
  --glass: rgba(255,255,255,.06);
  --sheen: rgba(255,255,255,.12);
  --edge: rgba(255,255,255,.20);
  --hl: rgba(255,255,255,.32);
  --hl-low: rgba(255,255,255,.05);
  --shadow: 0 14px 40px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
  --btn-fill: #171a24;
  --user: rgba(77,141,255,.20);
  --track: rgba(255,255,255,.14);
  --ok: #7be0a4; --warn: #f2c765; --bad: #ff9b9b;
  --code-bg: #0b0d13;
  --knob: #f2f4fa;
  --l0: 34; --l1: 58;
}

/* ---------- 2. Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font); color: var(--text); font-size: 15px; line-height: 1.55;
  overflow: hidden;
}
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(160deg, var(--bg-a), var(--bg-b)); }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: var(--track) transparent; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
code, .mono { font-family: var(--mono); }

/* ---------- 3. Apple Intelligence glow ---------- */
.spin {
  position: absolute; left: 50%; top: 50%; background: var(--apple);
  animation: spin 6s linear infinite; animation-play-state: paused; will-change: transform;
}
@keyframes spin { to { transform: rotate(360deg); } }

.edge {
  position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: hidden;
  opacity: 0; transition: opacity .8s ease;
  -webkit-mask-image: linear-gradient(to right, #000, transparent 3.5%, transparent 96.5%, #000), linear-gradient(to bottom, #000, transparent 5%, transparent 95%, #000);
  mask-image: linear-gradient(to right, #000, transparent 3.5%, transparent 96.5%, #000), linear-gradient(to bottom, #000, transparent 5%, transparent 95%, #000);
  mask-composite: add;
}
.edge .spin { width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax; animation-duration: 9s; }
html[data-busy="1"][data-glow="on"] .edge { opacity: .5; }
html[data-busy="1"] .edge .spin { animation-play-state: running; }

.ring, .ring-in {
  position: absolute; border-radius: inherit; overflow: hidden; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.ring { inset: -1.5px; padding: 1.5px; opacity: 0; transition: opacity .45s ease; }
.ring .spin, .ring-in .spin { width: 900px; height: 900px; margin: -450px 0 0 -450px; }
.halo { position: absolute; inset: -3px; border-radius: inherit; z-index: -1; pointer-events: none; filter: blur(14px); opacity: 0; transition: opacity .5s ease; }
.ring-in { inset: 0; padding: 7px; }
html[data-glow="on"] .composer-box:focus-within .ring { opacity: .9; }
html[data-glow="on"] .composer-box:focus-within .halo { opacity: .35; }
html[data-glow="on"][data-busy="1"] .composer-box .ring { opacity: 1; }
html[data-glow="on"][data-busy="1"] .composer-box .halo { opacity: .7; }
html[data-glow="on"] .composer-box:focus-within .spin,
html[data-glow="on"][data-busy="1"] .composer-box .spin { animation-play-state: running; }
html[data-glow="off"] .ring, html[data-glow="off"] .halo, html[data-glow="off"] .edge { display: none; }

/* ---------- 4. Liquid glass (controls only) ---------- */
.glass {
  background:
    radial-gradient(240px circle at var(--mx, 50%) var(--my, -40%), var(--sheen), transparent 70%),
    linear-gradient(135deg, var(--sheen), transparent 50%, var(--hl-low)),
    var(--glass);
  -webkit-backdrop-filter: blur(8px) saturate(170%); backdrop-filter: blur(8px) saturate(170%);
  border: 1px solid var(--edge);
  box-shadow: var(--shadow), inset 0 1px 0 var(--hl), inset 0 -1px 0 var(--hl-low), inset 0 0 18px var(--hl-low);
}

/* ---------- 5. Buttons ---------- */
.btn {
  border: 0; border-radius: 14px; padding: 8px 14px; background: var(--flat);
  transition: background .2s ease, transform .35s var(--spring);
}
.btn:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 16%, var(--flat)); }
.btn:active:not(:disabled) { transform: scale(.96); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-block { width: 100%; }
.btn-small { padding: 4px 10px; font-size: 12.5px; border-radius: 10px; }

/* Primary: the same multicolour ring as the message box */
.btn-primary {
  border: 1.5px solid transparent; color: var(--text); font-weight: 650;
  background:
    linear-gradient(var(--btn-fill), var(--btn-fill)) padding-box,
    conic-gradient(from var(--ang), var(--c1), var(--c2), var(--c3), var(--c4), var(--c5), var(--c1)) border-box;
  box-shadow: 0 6px 18px -8px rgba(180,107,255,.55);
  transition: box-shadow .25s ease, transform .35s var(--spring);
}
.btn-primary:hover:not(:disabled), .btn-primary:focus-visible { animation: ang 2.4s linear infinite; box-shadow: 0 8px 26px -6px rgba(180,107,255,.7); background:
    linear-gradient(var(--btn-fill), var(--btn-fill)) padding-box,
    conic-gradient(from var(--ang), var(--c1), var(--c2), var(--c3), var(--c4), var(--c5), var(--c1)) border-box; }
@keyframes ang { to { --ang: 360deg; } }
.btn-primary { padding: 9px 20px; border-radius: 20px; }

.group { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 22px; }
.group .btn { background: transparent; border-radius: 16px; padding: 8px 14px; }
.group .btn:hover:not(:disabled) { background: var(--flat); }
.menu-group { display: none; }

/* ---------- 6. App layout ---------- */
.app { position: relative; display: flex; gap: 12px; height: 100%; padding: 12px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }

.sidebar {
  width: 264px; flex-shrink: 0; border-radius: 26px; display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); border: 1px solid var(--panel-line); transition: transform .45s var(--spring);
}
.sidebar-head { padding: 14px; }
.sidebar-head .btn-primary { border-radius: 14px; padding: 11px 20px; }
.history { flex: 1; overflow-y: auto; padding: 0 10px 12px; }
.history-empty { color: var(--muted); padding: 8px 10px; font-size: 13px; }
.history-item { display: flex; align-items: center; gap: 4px; border-radius: 16px; padding: 2px 4px 2px 0; transition: background .15s; }
.history-item:hover { background: var(--flat); }
.history-item.active { background: var(--flat); box-shadow: inset 0 0 0 1px var(--panel-line); }
.history-title { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 9px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-del { background: none; border: 0; color: var(--muted); padding: 6px 8px; border-radius: 8px; opacity: 0; font-size: 12px; }
.history-item:hover .history-del, .history-del:focus-visible { opacity: 1; }
.history-del:hover { color: var(--bad); }
.sidebar-foot { padding: 12px 16px; border-top: 1px solid var(--panel-line); color: var(--muted); font-size: 12px; }

.main { position: relative; flex: 1; min-width: 0; overflow: hidden; border-radius: 26px; }
.topbar {
  position: absolute; z-index: 5; top: 0; left: 0; right: 0; height: 52px;
  display: flex; align-items: center; gap: 8px; padding: 0 4px 0 8px; pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.topbar h1 { font-size: 16px; font-weight: 650; margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usage { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Content scrolls underneath the glass controls, softened by scroll edge fades */
.messages { position: absolute; inset: 0; overflow-y: auto; padding: 78px 8px 170px; scroll-behavior: smooth; }
.main::before, .composer::before { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; z-index: 1; }
.main::before { top: 0; height: 84px; background: linear-gradient(to bottom, color-mix(in srgb, var(--fade) 70%, transparent), transparent); z-index: 4; }
.composer::before { inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--fade) 85%, transparent) 40%, transparent); }

.thread { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.empty { margin: 9vh auto 0; text-align: center; color: var(--muted); max-width: 420px; animation: rise .7s var(--spring) both; }
.empty h2 {
  font-size: 34px; font-weight: 750; letter-spacing: -.02em; margin: 0 0 8px;
  background: linear-gradient(100deg, var(--c1), var(--c2) 30%, var(--c3) 60%, var(--c4));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

.msg { display: flex; flex-direction: column; max-width: 100%; animation: rise .45s var(--spring) both; }
.msg .who { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.msg .body { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.assistant .body { white-space: normal; position: relative; }
.msg.user { align-self: flex-end; max-width: 85%; }
.msg.user .who { text-align: right; }
.msg.user .body { background: var(--user); padding: 10px 16px; border-radius: 20px 20px 6px 20px; }
@keyframes pulse { 50% { opacity: .35; } }
.msg.error .who { color: var(--bad); }
.msg.error .body { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); padding: 10px 16px; border-radius: 18px; }

.composer { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; padding: 48px 0 2px; }
.composer-box {
  position: relative; isolation: isolate; z-index: 2; max-width: 760px; margin: 0 auto;
  display: flex; gap: 8px; align-items: flex-end; border-radius: 28px; padding: 8px 8px 8px 22px;
}
.composer-box > textarea, .composer-box > .btn { position: relative; z-index: 1; }
.composer textarea { flex: 1; resize: none; border: 0; outline: 0; background: transparent; max-height: 180px; padding: 9px 0; line-height: 1.5; }
.composer textarea::placeholder { color: var(--muted); }
.composer-box .btn:not(.btn-primary) { background: color-mix(in srgb, var(--text) 10%, transparent); border-radius: 20px; padding: 9px 20px; }
.hint { position: relative; z-index: 2; max-width: 760px; margin: 6px auto 0; font-size: 12px; color: var(--muted); text-align: center; }

/* ---------- 7. Ready toast: a small glass bubble that grows, then goes away ---------- */
.toast {
  position: fixed; z-index: 60; top: calc(14px + env(safe-area-inset-top, 0px)); left: 50%;
  height: 44px; width: 44px; margin-left: -22px; overflow: hidden; border-radius: 22px;
  display: flex; align-items: center; gap: 10px; padding-left: 11px; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateY(-14px) scale(.5);
  transition: width .6s var(--spring), margin-left .6s var(--spring), transform .6s var(--spring), opacity .25s ease;
}
.toast.show { opacity: 1; transform: none; width: var(--w, 240px); margin-left: calc(var(--w, 240px) / -2); }
.toast-icon { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ok) 22%, transparent); color: var(--ok); }
.toast-icon svg { width: 14px; height: 14px; }
.toast-icon path { stroke-dasharray: 20; stroke-dashoffset: 20; }
.toast.show .toast-icon path { animation: draw .45s .35s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.toast-text { font-weight: 600; font-size: 14px; padding-right: 20px; opacity: 0; transition: opacity .2s ease; }
.toast.show .toast-text { opacity: 1; transition: opacity .3s .25s ease; }

/* ---------- 8. Setup screen (shown instead of the chat when Gemini Nano is not ready) ---------- */
.setup { position: fixed; inset: 0; z-index: 10; overflow-y: auto; display: flex; justify-content: center; padding: 48px 20px 72px; }
.setup-inner { width: min(740px, 100%); display: flex; flex-direction: column; gap: 16px; }
.setup-inner > * { animation: rise .7s var(--spring) both; animation-delay: calc(var(--i, 0) * 70ms); }
.hero { display: flex; gap: 20px; align-items: center; margin-bottom: 8px; }
.hero-ring { position: relative; flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; }
.hero-ring .spin { width: 200px; height: 200px; margin: -100px 0 0 -100px; animation-play-state: running; }
.hero-ring::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--bg-a); }
.hero-ring svg { position: absolute; z-index: 1; inset: 0; margin: auto; width: 30px; height: 30px; }
.hero h1 { margin: 0 0 6px; font-size: 28px; line-height: 1.15; letter-spacing: -.02em; }
.hero p { margin: 0; color: var(--muted); }
.card { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 22px; padding: 18px 20px; }
.card h2 { margin: 0 0 6px; font-size: 16px; display: flex; align-items: center; gap: 10px; }
.card p { margin: 6px 0; color: var(--muted); }
.card p strong { color: var(--text); font-weight: 600; }
.num { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; background: var(--grad); }
.badge { display: none; margin-left: auto; font-size: 12px; font-weight: 650; padding: 2px 10px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
#setup[data-kind="missing"] .card[data-start~="missing"] .badge,
#setup[data-kind="error"] .card[data-start~="error"] .badge,
#setup[data-kind="unavailable"] .card[data-start~="unavailable"] .badge { display: inline-flex; }
.copyrow { display: flex; align-items: center; gap: 10px; margin: 8px 0; padding: 8px 8px 8px 14px; border-radius: 14px; background: var(--flat); }
.copyrow code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.copyrow .set { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.files { margin: 8px 0; padding: 12px 16px; border-radius: 14px; background: var(--flat); font-family: var(--mono); font-size: 13px; line-height: 1.7; white-space: pre; overflow-x: auto; }
.status-line { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 16px; background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--text); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.status-line b { color: var(--warn); }
.download { display: none; }
#setup[data-kind="download"] .download { display: block; }
#setup[data-kind="download"] .status-line { display: none; }
.progress { height: 8px; border-radius: 99px; background: var(--track); overflow: hidden; margin-top: 14px; display: none; }
.progress.on { display: block; }
.progress > div { height: 100%; width: 0; border-radius: 99px; background: var(--grad); transition: width .25s ease; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
details.tech summary { cursor: pointer; color: var(--muted); font-size: 13px; }
details.tech pre { margin: 10px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--flat); font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.btn.checking { pointer-events: none; opacity: .7; }

/* ---------- 9. Settings ---------- */
.scrim { position: fixed; inset: 0; background: rgba(10,12,30,.32); opacity: 0; visibility: hidden; z-index: 20; transition: opacity .3s ease, visibility 0s .3s; }
.scrim.on { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.settings {
  position: fixed; z-index: 30; top: 12px; right: 12px; bottom: 12px; width: min(400px, calc(100% - 24px));
  display: flex; flex-direction: column; overflow: hidden; border-radius: 28px;
  background: var(--panel); border: 1px solid var(--panel-line); box-shadow: 0 24px 60px rgba(0,0,0,.35);
  transform-origin: 92% 3%; transform: translate3d(36px, 0, 0) scale(.9); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .4s ease, opacity .2s ease, visibility 0s .4s;
}
:root:not([data-theme="dark"]) .settings { background: rgba(255,255,255,.94); }
.settings.on { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: transform .6s var(--spring), opacity .25s ease, visibility 0s; }
.s-item { opacity: 0; transform: translateY(16px); transition: opacity .15s ease, transform .15s ease; }
.settings.on .s-item { opacity: 1; transform: none; transition: opacity .35s ease, transform .6s var(--spring); transition-delay: calc(100ms + var(--i, 0) * 50ms); }
.settings-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 14px 22px; border-bottom: 1px solid var(--panel-line); }
.settings-head h2 { margin: 0; font-size: 17px; }
.settings-body { padding: 18px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 24px; flex: 1; }
.field-label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 650; margin-bottom: 8px; }
.field .val { font-family: var(--mono); color: var(--accent); font-weight: 650; }
.desc { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.desc b { color: var(--text); font-weight: 600; }
.field input[type=number], .field textarea { width: 100%; padding: 10px 14px; border-radius: 16px; border: 1px solid var(--panel-line); background: var(--flat); outline: 0; }
.field input:focus, .field textarea:focus { border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 84px; }
/* Slider: the colour bar stays put (warm = focused, cool = adventurous). Only the glass thumb moves. */
.slider { position: relative; height: 56px; cursor: pointer; touch-action: none; user-select: none; outline: 0; --p: .8; --tw: 300; }
.slider-track {
  position: absolute; left: 22px; right: 22px; top: 50%; height: 10px; margin-top: -5px; border-radius: 99px;
  background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3), var(--c4), var(--c5));
  box-shadow: inset 0 1px 2px rgba(0,0,0,.25), inset 0 -1px 0 rgba(255,255,255,.25);
}
.slider-thumb {
  position: absolute; left: 22px; top: 50%; width: 40px; height: 26px; border-radius: 99px;
  border: 1px solid var(--edge);
  transform: translate(calc(var(--p) * var(--tw) * 1px - 50%), -50%);
  transition: width .5s var(--spring), height .5s var(--spring);
  box-shadow: 0 6px 18px rgba(0,0,0,.25), inset 0 1px 0 var(--hl), inset 0 -1px 0 var(--hl-low), inset 0 0 14px var(--hl-low);
  will-change: transform;
}
.slider.settling .slider-thumb { transition: transform .45s var(--spring), width .5s var(--spring), height .5s var(--spring); }
.slider.active .slider-thumb { width: 68px; height: 46px; }
.thumb-cover { position: absolute; inset: 0; border-radius: inherit; background: var(--knob); transition: opacity .25s ease; }
.slider.active .thumb-cover { opacity: 0; }
.slider:focus-visible .slider-thumb { outline: 2px solid var(--accent); outline-offset: 3px; }
.fx-group h3 { margin: 0 0 10px; font-size: 14px; }
.fx-row { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; align-items: start; padding: 12px 0; border-top: 1px solid var(--panel-line); }
.fx-row:first-of-type { border-top: 0; }
.fx-row .name { font-weight: 650; }
.fx-row .desc { grid-column: 1; margin-top: 4px; }
.fx-row .lt { grid-column: 2; grid-row: 1 / span 2; margin: 2px 6px 0 0; }
.settings-foot { padding: 14px 22px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--panel-line); }
.settings-foot .btn-primary { width: 100%; padding: 12px 20px; border-radius: 22px; }

/* ---------- 10. Liquid toggle (vanilla port of Jhey Tompkins' liquid glass toggle) ---------- */
.lt {
  --transition: .2s; --ease: ease-out; --hue: 217; --complete: 0; --border: 3px; --width: 66; --height: 34;
  --w: calc(var(--width) * 1px);
  --kw: calc(var(--width) * .6px - 2 * var(--border));
  --s: calc(8 + (var(--complete) / 100 * 92));
  --l: calc(var(--l0) - (var(--complete) / 100 * (var(--l0) - var(--l1))));
  --checked: hsl(var(--hue), calc(var(--s) * 1%), calc(var(--l) * 1%));
  height: calc(var(--height) * 1px); width: calc(var(--width) * 1px); flex: none;
  border-radius: 100px; border: 0; padding: 0; cursor: pointer; position: relative; overflow: visible;
  background: #0000; touch-action: pan-y; contain: layout style; -webkit-tap-highlight-color: transparent;
}
.lt * { pointer-events: none; }
.lt:focus-visible { outline: 3px solid color-mix(in oklch, var(--checked), #0000 40%); outline-offset: 3px; }
.lt[data-pressed="true"], .lt:active {
  --transition: .6s;
  --ease: linear(0 0%, 0.6091 3.69%, 1.0259 7.24%, 1.1733 9.05%, 1.283 10.92%, 1.3562 12.87%, 1.3948 14.95%, 1.4014 16.03%, 1.3999 17.16%, 1.3731 19.64%, 1.3202 22.27%, 1.1394 29.39%, 1.0582 33.17%, 0.9943 37.45%, 0.9734 39.64%, 0.9593 41.92%, 0.9505 45.08%, 0.9517 48.7%, 0.9924 63.02%, 1.0046 71.2%, 1.0061 78.24%, 1 100%);
}
.lt-knockout { height: calc(var(--height) * 1px); width: calc(var(--width) * 1px); border-radius: 100px; filter: url(#lt-remove-black); position: absolute; inset: 0; will-change: filter, scale; transform: translate3d(0, 0, 0); }
.lt-indicator { border-radius: 100px; height: 100%; width: 100%; background: var(--checked); position: absolute; top: 50%; left: 50%; translate: -50% -50%; z-index: 12; }
.lt-mask {
  position: absolute; height: calc(100% - (2 * var(--border))); width: calc(60% - (2 * var(--border))); top: 50%; left: var(--border);
  background: #000; border-radius: 100px;
  translate: calc(var(--complete) / 100 * var(--w) * .4) -50%;
  transition-property: height, width, margin, scale; transition-duration: var(--transition); transition-timing-function: var(--ease); will-change: height, width, margin;
}
.lt-liquid {
  position: absolute; height: calc(100% - (2 * var(--border))); width: calc(60% - (2 * var(--border)));
  top: 50%; left: var(--border); background: #0000; border-radius: 100px;
  translate: calc(var(--complete) / 100 * (var(--w) - var(--kw) - 2 * var(--border))) -50%;
  transition-property: scale; transition-duration: var(--transition); transition-timing-function: var(--ease);
}
.lt-shadow {
  opacity: 0; position: absolute; inset: 0; border-radius: 100px; z-index: 20; transition: opacity var(--transition) var(--ease);
  box-shadow: 1px -1px 2px hsl(0 0% 100% / 0.5) inset, 0px -1px 2px hsl(0 0% 100% / 0.5) inset, -1px -1px 2px hsl(0 0% 100% / 0.5) inset,
    1px 1px 2px hsl(0 0% 30% / 0.5) inset, -8px 4px 10px -6px hsl(0 0% 30% / 0.25) inset, -1px 1px 6px hsl(0 0% 30% / 0.25) inset,
    -1px -1px 8px hsl(0 0% 60% / 0.15), 1px 1px 2px hsl(0 0% 30% / 0.15), 2px 2px 6px hsl(0 0% 30% / 0.15),
    -2px -1px 2px hsl(0 0% 100% / 0.25) inset, 3px 6px 16px -6px hsl(0 0% 30% / 0.5);
}
.lt-cover { position: absolute; inset: 0; background: var(--knob); border-radius: 100px; transition: opacity var(--transition) var(--ease); }
.lt-wrapper { position: absolute; inset: 0; border-radius: 100px; clip-path: inset(0 0 0 0 round 100px); filter: blur(4px); transition: filter var(--transition) var(--ease); }
.lt-liquids { position: absolute; inset: 0; transform: translate3d(0, 0, 0); border-radius: 100px; overflow: hidden; filter: url(#lt-goo); }
.lt-liquid-shadow {
  position: absolute; inset: 0; border-radius: 100px;
  box-shadow: inset 0 0 3px 4px var(--checked), inset calc(((var(--complete) / 100) * 8px) + -4px) 0 3px 4px var(--checked);
}
.lt-track {
  height: calc(var(--height) * 1px); width: calc(var(--width) * 1px); background: var(--checked); border-radius: 100px; position: absolute; top: 50%; left: 0;
  translate: calc(var(--complete) / 100 * (var(--kw) - var(--w) - 6 * var(--border))) -50%;
  transition-property: height, width, filter, left; transition-duration: var(--transition); transition-timing-function: var(--ease);
}
.lt[aria-checked="true"]:not([data-active="true"]) .lt-track { left: calc(var(--border) * 6); }
.lt[data-pressed="true"] .lt-track { min-height: 20px; }
.lt[data-active="true"] .lt-mask, .lt:active .lt-mask {
  height: calc((100% - (2 * var(--border))) * (1.65 - (var(--delta, 0) * 0.025)));
  width: calc((60% - (2 * var(--border))) * (1.65 + (var(--delta, 0) * 0.025)));
  margin-left: calc((60% - (2 * var(--border))) * ((.65 + (var(--delta, 0) * 0.025)) * -0.5));
}
.lt[data-active="true"] .lt-liquid, .lt:active .lt-liquid { scale: calc(1.65 + (var(--delta, 0) * 0.025)) calc(1.65 - (var(--delta, 0) * 0.025)); }
.lt[data-active="true"] .lt-wrapper, .lt:active .lt-wrapper { filter: blur(0px); }
.lt[data-active="true"] .lt-shadow, .lt:active .lt-shadow { opacity: 1; }
.lt[data-active="true"] .lt-cover, .lt:active .lt-cover { opacity: 0; }
.lt[data-active="true"] .lt-track, .lt:active .lt-track { left: calc(var(--border) * 3); height: calc((var(--height) * 1px) - (6 * var(--border))); }

/* ---------- 11. Motion and responsive ---------- */
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}
.paused *, .paused *::before, .paused *::after { animation-play-state: paused !important; }
@media (max-width: 760px) {
  .sidebar { position: fixed; z-index: 25; top: 12px; bottom: 12px; left: 12px; transform: translateX(calc(-100% - 24px)); }
  .sidebar.on { transform: none; }
  .menu-group { display: flex; }
  .usage { display: none; }
  .hero { flex-direction: column; align-items: flex-start; }
}

/* ---------- 12. Reply text: markdown, fluid ink, thinking blob ---------- */
.msg.assistant .md > :first-child { margin-top: 0; }
.msg.assistant .md p { margin: 0 0 .75em; }
.msg.assistant .md p.h { font-weight: 700; }
.msg.assistant .md ul, .msg.assistant .md ol { margin: 0 0 .75em; padding-left: 1.3em; }
.msg.assistant .md li { margin: .15em 0; }
.msg.assistant .md li > ul { margin: .15em 0 0; }
.msg.assistant .md strong { font-weight: 650; }
.msg.assistant .md code { font-size: .9em; padding: .1em .4em; border-radius: 6px; background: var(--flat); }
.msg.assistant .md pre { margin: 0 0 .75em; padding: 14px 16px; border-radius: 16px; background: var(--code-bg); color: #e8eaf5; overflow-x: auto; }
.msg.assistant .md pre code { padding: 0; background: none; color: inherit; font-size: 13px; }
.msg.assistant .md > :last-child { margin-bottom: 0; }

/* New words melt in: they start blurred and glowing, then sharpen into the text behind them */
.ink { animation: ink .75s cubic-bezier(.2,.7,.2,1) both; }
@keyframes ink {
  from { opacity: 0; filter: blur(9px); text-shadow: 0 0 16px rgba(180,107,255,.95), 0 0 30px rgba(77,141,255,.7); }
  45%  { opacity: 1; }
  to   { opacity: 1; filter: blur(0); text-shadow: 0 0 0 rgba(180,107,255,0); }
}

/* Fluid blob at the end of the writing line */
.caret { position: absolute; left: 0; top: 0; width: 30px; height: 16px; pointer-events: none; transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .2s ease; filter: url(#caret-goo) drop-shadow(0 0 6px rgba(180,107,255,.8)); }
.caret i { position: absolute; top: 1px; border-radius: 50%; will-change: transform; }
.caret i:nth-child(1) { left: 1px;  width: 13px; height: 13px; background: #ff4f9a; animation: cA 1.5s ease-in-out infinite; }
.caret i:nth-child(2) { left: 8px;  width: 12px; height: 12px; background: #b46bff; animation: cB 1.9s ease-in-out infinite; }
.caret i:nth-child(3) { left: 15px; width: 10px; height: 10px;  background: #4d8dff; animation: cC 1.7s ease-in-out infinite; }
@keyframes cA { 0%,100% { transform: translate(0,0) scale(1); }    50% { transform: translate(9px,-2px) scale(.8); } }
@keyframes cB { 0%,100% { transform: translate(7px,1px) scale(.9); } 50% { transform: translate(-6px,-1px) scale(1.2); } }
@keyframes cC { 0%,100% { transform: translate(0,0) scale(1); }    50% { transform: translate(-10px,2px) scale(1.1); } }

/* Thinking: an abstract liquid blob while the model has not written its first word yet */
.liquid { position: relative; width: 150px; height: 56px; margin-top: 6px; transition: opacity .3s ease, transform .4s var(--spring); }
.liquid.out { opacity: 0; transform: scale(.6); }
.liquid .glow { position: absolute; left: 10px; top: 8px; width: 130px; height: 40px; border-radius: 50%; background: var(--grad); filter: blur(16px); opacity: .5; animation: pulse 2.6s ease-in-out infinite; }
.liquid .goo { position: absolute; inset: 0; filter: url(#blob-goo); }
.liquid .goo i { position: absolute; top: 50%; border-radius: 50%; will-change: transform; }
.liquid .goo i:nth-child(1) { left: 14px; width: 30px; height: 30px; margin-top: -15px; background: #ff9a3c; animation: bA 2.8s ease-in-out infinite; }
.liquid .goo i:nth-child(2) { left: 40px; width: 26px; height: 26px; margin-top: -13px; background: #ff4f9a; animation: bB 3.4s ease-in-out infinite; }
.liquid .goo i:nth-child(3) { left: 64px; width: 24px; height: 24px; margin-top: -12px; background: #b46bff; animation: bC 3.0s ease-in-out infinite; }
.liquid .goo i:nth-child(4) { left: 84px; width: 20px; height: 20px; margin-top: -10px; background: #4d8dff; animation: bD 3.7s ease-in-out infinite; }
.liquid .goo i:nth-child(5) { left: 96px; width: 14px; height: 14px; margin-top: -7px;  background: #35d0ff; animation: bE 2.5s ease-in-out infinite; }
@keyframes bA { 0%,100% { transform: translate(0,0) scale(1); }       50% { transform: translate(40px,-6px) scale(.8); } }
@keyframes bB { 0%,100% { transform: translate(30px,5px) scale(.9); } 50% { transform: translate(-14px,-4px) scale(1.25); } }
@keyframes bC { 0%,100% { transform: translate(-6px,-4px) scale(1.1); } 50% { transform: translate(24px,6px) scale(.85); } }
@keyframes bD { 0%,100% { transform: translate(10px,6px) scale(.9); } 50% { transform: translate(-38px,-3px) scale(1.2); } }
@keyframes bE { 0%,100% { transform: translate(-30px,0) scale(1); }   50% { transform: translate(14px,-8px) scale(1.5); } }

/* Offline info */
.net { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 600; background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); white-space: nowrap; }
.net::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.pills span { padding: 5px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 600; background: var(--flat); color: var(--text); }
.pills span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; background: var(--grad); }

.mini-btn { margin-top: 8px; }

/* Narrow window: the sidebar floats over the chat, so it needs real blur and a firmer fill */
@media (max-width: 760px) {
  .sidebar {
    background: color-mix(in srgb, var(--panel) 88%, transparent);
    -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%);
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
  }
  :root:not([data-theme="dark"]) .sidebar { background: rgba(255,255,255,.82); }
  .net { display: none; }
}