:root {
  color-scheme: light;
  --bg: #eaf8fb;
  --panel: rgba(255, 255, 255, .86);
  --panel-2: rgba(240, 250, 252, .92);
  --line: rgba(118, 184, 199, .36);
  --text: #294952;
  --muted: #718b92;
  --accent: #ff9fbd;
  --codex: #6fc8ee;
  --ok: #70b969;
  --radius: 24px;
  font-family: "Arial Rounded MT Bold", "SF Pro Rounded", ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Fresh 2026 character themes. These use new IDs and original local artwork. */
html[data-theme="sunlands"] {
  color-scheme: light;
  --bg: #55365f;
  --panel: rgba(255, 244, 210, .91);
  --panel-2: rgba(248, 211, 146, .92);
  --line: rgba(112, 61, 70, .28);
  --text: #432b35;
  --muted: #7a5960;
  --accent: #e56845;
  --codex: #7f4264;
  --ok: #477b58;
}
html[data-theme="sunlands"] body {
  background: linear-gradient(rgba(255, 222, 153, .08), rgba(53, 36, 48, .2)), url("/assets/sun-cub-kingdom.svg?v=20260717-1") center / cover fixed, var(--bg);
}
html[data-theme="sunlands"] .theme-toggle { background: linear-gradient(135deg, #ffe79a, #ef8b55 62%, #8e4261); border-color: rgba(255, 247, 203, .9); box-shadow: 0 8px 22px rgba(63, 31, 50, .3); color: #522f3d; }
html[data-theme="sunlands"] .theme-toggle:hover { box-shadow: 0 11px 28px rgba(63, 31, 50, .4); }
html[data-theme="sunlands"] .landing-card { background: rgba(255, 224, 164, .68); border-color: rgba(255, 243, 203, .82); box-shadow: 0 30px 85px rgba(49, 27, 48, .4); }
html[data-theme="sunlands"] .login-card,
html[data-theme="sunlands"] .provider-card { background: rgba(255, 246, 216, .89); border-color: rgba(255, 248, 220, .96); box-shadow: 0 18px 44px rgba(65, 36, 52, .25), inset 0 0 0 1px var(--line); }
html[data-theme="sunlands"] .provider-card:hover { box-shadow: 0 24px 54px rgba(65, 36, 52, .34), inset 0 0 0 1px var(--line); }
html[data-theme="sunlands"] .eyebrow { color: #a84954; }
html[data-theme="sunlands"] .login-card input { background: rgba(255, 252, 230, .86); }
html[data-theme="sunlands"] .login-card button[type="submit"] { background: linear-gradient(135deg, #e76d48, #9a4665); color: #fff8dc; }
html[data-theme="sunlands"] .provider-mark { background: linear-gradient(145deg, #ffb85b, #ec7048); border-color: #fff4c8; color: #642f3d; }
html[data-theme="sunlands"] .codex-card .provider-mark,
html[data-theme="sunlands"] body[data-provider="codex"] .provider-mark { background: linear-gradient(145deg, #98506e, #593c68); border-color: #ffe8ae; color: #fff1c4; }
html[data-theme="sunlands"] .topbar { background: linear-gradient(90deg, rgba(255, 231, 168, .9), rgba(247, 202, 139, .86)); box-shadow: 0 5px 23px rgba(66, 35, 53, .23); }
html[data-theme="sunlands"] .brand { color: #71374e; }
html[data-theme="sunlands"] .brand::before { color: #e56b48; content: "✦ "; }
html[data-theme="sunlands"] .provider-tabs { background: rgba(255, 247, 213, .72); border-color: rgba(255, 249, 224, .94); }
html[data-theme="sunlands"] .provider-tabs a.active { background: linear-gradient(135deg, #eb754b, #8f4565); color: #fff8dc; }
html[data-theme="sunlands"] .sidebar { background: rgba(245, 209, 150, .79); }
html[data-theme="sunlands"] .sidebar button { background: rgba(255, 243, 205, .88); color: #713b4c; }
html[data-theme="sunlands"] .thread-row.active { background: linear-gradient(135deg, rgba(231, 111, 71, .88), rgba(125, 64, 96, .84)); border-color: rgba(100, 49, 73, .42); color: #fff6d8; }
html[data-theme="sunlands"] .thread-row.active strong,
html[data-theme="sunlands"] .thread-row.active span { color: #fff6dc; }
html[data-theme="sunlands"] .controls { background: rgba(255, 229, 177, .82); }
html[data-theme="sunlands"] .messages { background: rgba(81, 44, 64, .16); }
html[data-theme="sunlands"] .welcome { background: rgba(255, 238, 192, .82); border: 1px solid rgba(255, 247, 216, .9); border-radius: 27px; box-shadow: 0 17px 44px rgba(62, 34, 51, .2); padding: 25px; }
html[data-theme="sunlands"] .message.user { background: linear-gradient(135deg, rgba(232, 108, 70, .97), rgba(147, 67, 96, .95)); border-color: rgba(255, 225, 169, .7); color: #fff9e4; }
html[data-theme="sunlands"] .message.user .message-role,
html[data-theme="sunlands"] .message.user .message-status { color: rgba(255, 244, 217, .82); }
html[data-theme="sunlands"] .message.assistant { background: rgba(255, 245, 211, .91); border-color: rgba(255, 239, 193, .95); box-shadow: 0 9px 26px rgba(67, 35, 53, .19); }
html[data-theme="sunlands"] .markdown-body a { color: #a64155; }
html[data-theme="sunlands"] .markdown-body pre { background: #332532; border-color: rgba(255, 205, 126, .28); color: #fff1ca; }
html[data-theme="sunlands"] .reasoning-block { background: rgba(247, 208, 144, .92); border-color: rgba(255, 241, 204, .95); }
html[data-theme="sunlands"] .turn-activity { background: rgba(208, 225, 157, .9); border-color: rgba(255, 241, 204, .95); color: #4d6b43; }
html[data-theme="sunlands"] .approval-card { background: rgba(255, 221, 159, .97); border-color: #fff0bd; }
html[data-theme="sunlands"] .approval-actions .approve-once { background: #a84c5c; border-color: #a84c5c; color: #fff7dc; }
html[data-theme="sunlands"] .composer { background: rgba(255, 242, 204, .95); border-color: #ffebae; box-shadow: 0 13px 37px rgba(58, 31, 49, .3), inset 0 0 0 1px var(--line); }
html[data-theme="sunlands"] .attach { background: #f5bd61; color: #70384a; }
html[data-theme="sunlands"] .send { background: linear-gradient(135deg, #e76d48, #944462); color: #fff9df; }
html[data-theme="sunlands"] .send.stop { background: #563448; color: #ffe9b4; }
html[data-theme="sunlands"] .attachment-chip { background: linear-gradient(135deg, #f7c76f, #e9996d); border-color: #fff0bd; }
html[data-theme="sunlands"] .artifact-shelf { background: rgba(255, 232, 180, .86); border-color: #ffedb6; }
html[data-theme="sunlands"] .artifact-card a { background: linear-gradient(135deg, #d96047, #924360); color: #fff9df; }
html[data-theme="sunlands"] .native-dialog { background: rgba(255, 241, 204, .98); border-color: #ffecb4; }

html[data-theme="webslinger"] {
  color-scheme: dark;
  --bg: #070a25;
  --panel: rgba(9, 18, 51, .94);
  --panel-2: rgba(17, 35, 76, .96);
  --line: rgba(94, 211, 255, .28);
  --text: #edf8ff;
  --muted: #a9c5dc;
  --accent: #ff4967;
  --codex: #49bff2;
  --ok: #65dfa6;
}
html[data-theme="webslinger"] body { background: linear-gradient(rgba(4, 8, 31, .16), rgba(31, 9, 41, .32)), url("/assets/neon-web-slinger.svg?v=20260717-1") center / cover fixed, var(--bg); }
html[data-theme="webslinger"] .theme-toggle { background: linear-gradient(135deg, #f22c59, #6337b6 52%, #16a9df); border-color: rgba(173, 235, 255, .68); box-shadow: 0 8px 25px rgba(0, 4, 25, .58), 0 0 18px rgba(52, 194, 242, .18); color: #fff; }
html[data-theme="webslinger"] .landing-card { background: rgba(8, 15, 48, .78); border-color: rgba(85, 210, 255, .35); box-shadow: 0 31px 90px rgba(1, 4, 24, .7); }
html[data-theme="webslinger"] .login-card,
html[data-theme="webslinger"] .provider-card { background: rgba(10, 22, 58, .91); border-color: rgba(92, 210, 255, .38); box-shadow: 0 19px 48px rgba(1, 4, 26, .56), inset 0 0 0 1px rgba(255, 86, 118, .07); }
html[data-theme="webslinger"] .provider-card:hover { box-shadow: 0 25px 58px rgba(1, 4, 26, .72), 0 0 26px rgba(49, 190, 240, .18); }
html[data-theme="webslinger"] .eyebrow { color: #ff7590; }
html[data-theme="webslinger"] .login-card input { background: rgba(3, 10, 35, .82); border-color: rgba(84, 201, 244, .4); }
html[data-theme="webslinger"] .login-card button[type="submit"] { background: linear-gradient(135deg, #f52d59, #7a2ca5); color: #fff; }
html[data-theme="webslinger"] .provider-mark { background: linear-gradient(145deg, #ff4568, #9d1754); border-color: #9ceaff; color: #fff; }
html[data-theme="webslinger"] .codex-card .provider-mark,
html[data-theme="webslinger"] body[data-provider="codex"] .provider-mark { background: linear-gradient(145deg, #25b9ed, #3155ba); border-color: #a8edff; color: #fff; }
html[data-theme="webslinger"] .topbar { background: linear-gradient(90deg, rgba(7, 15, 48, .94), rgba(35, 15, 62, .92)); box-shadow: 0 5px 25px rgba(0, 3, 22, .58); }
html[data-theme="webslinger"] .brand { color: #ff6682; }
html[data-theme="webslinger"] .brand::before { color: #76ddff; content: "◇ "; }
html[data-theme="webslinger"] .provider-tabs { background: rgba(16, 35, 80, .82); border-color: rgba(77, 200, 244, .34); }
html[data-theme="webslinger"] .provider-tabs a.active { background: linear-gradient(135deg, #ef3159, #2a8ed4); color: #fff; }
html[data-theme="webslinger"] .connection.online { color: #6de4ab; }
html[data-theme="webslinger"] .sidebar { background: rgba(6, 15, 45, .9); }
html[data-theme="webslinger"] .sidebar button { background: rgba(18, 42, 88, .9); color: #d9f3ff; }
html[data-theme="webslinger"] .thread-row.active { background: linear-gradient(135deg, rgba(239, 42, 86, .9), rgba(35, 137, 207, .88)); border-color: rgba(112, 221, 255, .42); }
html[data-theme="webslinger"] .thread-row.active strong,
html[data-theme="webslinger"] .thread-row.active span { color: #fff; }
html[data-theme="webslinger"] .controls { background: rgba(8, 20, 57, .92); }
html[data-theme="webslinger"] .controls input,
html[data-theme="webslinger"] .controls select { background: rgba(16, 37, 78, .96); }
html[data-theme="webslinger"] .messages { background: rgba(2, 6, 28, .4); }
html[data-theme="webslinger"] .welcome { background: rgba(8, 21, 58, .84); border: 1px solid rgba(79, 204, 247, .36); border-radius: 27px; box-shadow: 0 18px 48px rgba(1, 4, 25, .55); padding: 25px; }
html[data-theme="webslinger"] .message.user { background: linear-gradient(135deg, rgba(244, 43, 83, .98), rgba(130, 30, 105, .96)); border-color: rgba(255, 111, 139, .52); color: #fff; }
html[data-theme="webslinger"] .message.user .message-role,
html[data-theme="webslinger"] .message.user .message-status { color: rgba(255, 225, 234, .82); }
html[data-theme="webslinger"] .message.assistant { background: rgba(10, 28, 68, .95); border-color: rgba(73, 190, 237, .42); box-shadow: 0 9px 28px rgba(1, 5, 29, .48); }
html[data-theme="webslinger"] .markdown-body a { color: #73d9ff; }
html[data-theme="webslinger"] .markdown-body code { background: rgba(77, 184, 231, .15); border-color: rgba(91, 205, 246, .22); }
html[data-theme="webslinger"] .markdown-body pre { background: rgba(2, 6, 25, .97); border-color: rgba(71, 196, 241, .32); color: #eaf9ff; }
html[data-theme="webslinger"] .reasoning-block { background: rgba(18, 53, 103, .94); border-color: rgba(76, 199, 243, .4); }
html[data-theme="webslinger"] .turn-activity { background: rgba(10, 68, 77, .94); border-color: rgba(92, 226, 175, .38); color: #a0f1c8; }
html[data-theme="webslinger"] .approval-card { background: rgba(68, 25, 70, .97); border-color: rgba(255, 75, 111, .48); }
html[data-theme="webslinger"] .approval-actions .approve-once { background: #ef2f59; border-color: #ef2f59; color: #fff; }
html[data-theme="webslinger"] .composer { background: rgba(8, 21, 60, .97); border-color: rgba(77, 202, 246, .44); box-shadow: 0 14px 40px rgba(0, 4, 25, .64), inset 0 0 0 1px rgba(255, 81, 116, .07); }
html[data-theme="webslinger"] .composer textarea::placeholder { color: #829fbc; }
html[data-theme="webslinger"] .attach { background: #2059aa; color: #ddf6ff; }
html[data-theme="webslinger"] .send { background: linear-gradient(135deg, #f22f59, #96205f); color: #fff; }
html[data-theme="webslinger"] .send.stop { background: #267ebc; color: #f0fbff; }
html[data-theme="webslinger"] .attachment-chip { background: linear-gradient(135deg, #1f7fba, #a31c62); border-color: rgba(112, 220, 255, .44); color: #fff; }
html[data-theme="webslinger"] .artifact-shelf { background: rgba(8, 26, 70, .9); border-color: rgba(78, 204, 247, .4); }
html[data-theme="webslinger"] .artifact-card a { background: linear-gradient(135deg, #228dc8, #3456bd); color: #fff; }
html[data-theme="webslinger"] .native-dialog { background: rgba(7, 19, 56, .99); border-color: rgba(83, 208, 250, .46); }

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background:
    linear-gradient(rgba(247, 253, 250, .68), rgba(232, 249, 252, .76)),
    url("/assets/happy-puppy-waves.svg") center / cover fixed,
    var(--bg);
  color: var(--text);
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

.theme-toggle {
  align-items: center;
  background: rgba(255, 255, 255, .78);
  border: 2px solid rgba(255, 255, 255, .94);
  border-radius: 999px;
  box-shadow: 0 5px 16px rgba(72, 143, 158, .13), inset 0 0 0 1px var(--line);
  color: #527d88;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 900;
  gap: 6px;
  min-height: 34px;
  padding: 6px 11px;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.theme-toggle:hover { box-shadow: 0 8px 20px rgba(72, 143, 158, .2), inset 0 0 0 1px var(--line); transform: translateY(-1px); }
.theme-toggle:focus-visible { outline: 3px solid rgba(111, 200, 238, .46); outline-offset: 2px; }
.floating-theme { position: fixed; right: max(16px, env(safe-area-inset-right)); top: max(16px, env(safe-area-inset-top)); z-index: 5; }
.topbar-actions { align-items: center; display: flex; gap: 9px; justify-self: end; min-width: 0; }

.login-page {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: 20px;
}

.login-card {
  background: rgba(255, 255, 255, .84);
  border: 2px solid rgba(255, 255, 255, .95);
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(83, 158, 177, .2), inset 0 0 0 1px var(--line);
  backdrop-filter: blur(18px);
  padding: 28px;
  width: min(420px, 100%);
}

.login-card h1 { margin: 12px 0 8px; }
.login-card > p:not(.eyebrow) { color: var(--muted); line-height: 1.55; }
.login-card form { display: grid; gap: 10px; margin-top: 24px; }
.login-card label { color: var(--muted); font-size: 13px; }
.login-card input {
  background: rgba(235, 249, 253, .86);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  padding: 12px;
}
.login-card button {
  background: linear-gradient(135deg, #ffb0cf, #ffd98b);
  border: 0;
  border-radius: 10px;
  color: #714354;
  font-weight: 800;
  margin-top: 6px;
  padding: 12px;
}


.landing {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: 24px;
}

.landing-card { width: min(980px, 100%); }
.landing-card { background: rgba(255, 255, 255, .38); border: 2px solid rgba(255, 255, 255, .76); border-radius: 34px; box-shadow: 0 28px 80px rgba(74, 156, 180, .16); padding: clamp(22px, 5vw, 48px); backdrop-filter: blur(10px); }
.eyebrow { color: #5fa5b7; font-size: 12px; font-weight: 900; letter-spacing: .16em; }
.landing h1 { font-size: clamp(30px, 6vw, 54px); line-height: 1.05; margin: 14px 0; }
.lede { color: var(--muted); font-size: 17px; }

.provider-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}

.writing-card .provider-mark {
  background: linear-gradient(145deg, #24324f, #b47b77);
  border-color: #f8e9c7;
  color: #fff4cf;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
}

@media (max-width: 980px) and (min-width: 721px) {
  .provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.provider-card {
  background: rgba(255, 255, 255, .78);
  border: 2px solid rgba(255, 255, 255, .94);
  border-radius: var(--radius);
  display: grid;
  gap: 10px;
  min-height: 210px;
  padding: 24px;
  box-shadow: 0 15px 35px rgba(74, 156, 180, .14), inset 0 0 0 1px var(--line);
  transition: box-shadow .16s ease, transform .16s ease;
  backdrop-filter: blur(12px);
}

.provider-card:hover { box-shadow: 0 20px 42px rgba(74, 156, 180, .22), inset 0 0 0 1px rgba(86, 170, 189, .42); transform: translateY(-3px) rotate(-.3deg); }
.provider-card strong { align-self: end; font-size: 22px; }
.provider-card > span:last-child { color: var(--muted); }

.provider-mark {
  align-items: center;
  background: linear-gradient(145deg, #ffb3d1, #ffd9e9);
  border: 4px solid #fff;
  border-radius: 17px;
  box-shadow: 0 5px 12px rgba(219, 117, 160, .18);
  color: #9b5873;
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  height: 42px;
  justify-content: center;
  letter-spacing: .08em;
  width: 42px;
}

.codex-card .provider-mark,
body[data-provider="codex"] .provider-mark {
  background: linear-gradient(145deg, #9ee6ff, #d7f6ff);
  border-color: #fff;
  color: #397d99;
}

.games-card .provider-mark {
  background: linear-gradient(145deg, #b7f27f, #fff08b);
  border-color: #fff;
  color: #4e7336;
  font-size: 20px;
}

.workspace { height: 100dvh; overflow: hidden; }

.topbar {
  align-items: center;
  background: rgba(244, 252, 253, .78);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  height: 58px;
  padding: 0 18px;
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 5px 20px rgba(72, 143, 158, .08);
}

.brand {
  align-items: center;
  color: #4d9eb3;
  display: inline-flex;
  font-weight: 900;
  gap: 7px;
  letter-spacing: .03em;
  min-width: max-content;
}
.brand::before { display: none; }
.brand-avatar {
  display: block;
  flex: 0 0 42px;
  height: 42px;
  isolation: isolate;
  position: relative;
  transition: transform .2s ease;
  width: 42px;
}
.brand-avatar::before {
  background: radial-gradient(circle at 35% 28%, var(--panel), color-mix(in srgb, var(--accent) 44%, var(--panel)) 56%, color-mix(in srgb, var(--codex) 52%, var(--panel)));
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: 61% 39% 55% 45% / 46% 58% 42% 54%;
  box-shadow: inset 0 1px rgba(255, 255, 255, .72), 0 5px 14px color-mix(in srgb, var(--accent) 18%, transparent);
  content: "";
  inset: 5px 2px 2px 4px;
  position: absolute;
  transform: rotate(-7deg);
  z-index: -1;
}
.brand-avatar::after {
  background: url("/assets/puppy-brand-head.png?v=20260718-1") center / contain no-repeat;
  content: "";
  inset: -4px;
  position: absolute;
}
.brand:hover .brand-avatar { transform: rotate(-2deg) translateY(-1px) scale(1.04); }
.brand-name { line-height: 1; }
.provider-tabs { background: rgba(255, 255, 255, .68); border: 2px solid rgba(255, 255, 255, .9); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); display: flex; padding: 3px; }
.provider-tabs a { border-radius: 999px; color: var(--muted); font-weight: 800; padding: 7px 14px; }
.provider-tabs a.active { background: linear-gradient(135deg, #bcecff, #fff3bd); box-shadow: 0 3px 10px rgba(74, 156, 180, .15); color: #356777; }
.connection { color: var(--muted); font-size: 13px; justify-self: end; }
.connection.online { color: var(--ok); }

.chat-shell { display: grid; grid-template-columns: 270px minmax(0, 1fr); height: calc(100dvh - 58px); }
.sidebar { background: rgba(238, 249, 251, .68); border-right: 1px solid var(--line); padding: 14px; backdrop-filter: blur(14px); }
.sidebar-heading { align-items: center; display: flex; justify-content: space-between; }
.sidebar-actions { display: flex; gap: 6px; }
.sidebar button { background: rgba(255, 255, 255, .76); border: 1px solid var(--line); border-radius: 999px; color: #527d88; font-weight: 700; padding: 7px 10px; }
.empty-note { color: var(--muted); font-size: 13px; line-height: 1.5; margin-top: 22px; }
.thread-list { display: grid; gap: 6px; margin-top: 16px; }
.thread-row { display: grid; gap: 5px; min-width: 0; text-align: left; width: 100%; }
.thread-row strong { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-row span { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-row { border-radius: 16px !important; padding: 10px !important; }
.thread-row.active { background: linear-gradient(135deg, rgba(181, 235, 255, .82), rgba(255, 244, 190, .72)); border-color: rgba(99, 180, 202, .38); box-shadow: 0 5px 13px rgba(77, 153, 174, .1); }

.conversation { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; position: relative; }
.controls { align-items: end; background: rgba(247, 253, 252, .64); border-bottom: 1px solid var(--line); display: flex; gap: 10px; min-height: 64px; overflow-x: auto; padding: 10px 16px; backdrop-filter: blur(14px); }
.controls label { color: var(--muted); display: grid; flex: 0 0 auto; font-size: 11px; gap: 4px; }
.controls input,
.controls select { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--text); min-width: 150px; padding: 7px 9px; }
.controls select { padding-right: 28px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.8); }
.model-runtime { align-self: center; background: rgba(228, 249, 221, .86); border: 1px solid rgba(112, 185, 105, .35); border-radius: 999px; color: #578e52; flex: 0 0 auto; font-size: 11px; max-width: 310px; overflow: hidden; padding: 7px 10px; text-overflow: ellipsis; white-space: nowrap; }
.model-runtime.mismatch { background: rgba(255, 221, 229, .86); border-color: rgba(221, 120, 151, .35); color: #b35f7b; }
.controls input:disabled,
.controls select:disabled { color: var(--muted); }
.mobile-new { display: none; }
.mobile-history { display: none; }
.mobile-thread-search { display: none !important; }
.mobile-thread-label { display: none !important; }

.native-dialog { background: rgba(249, 254, 253, .94); border: 2px solid #fff; border-radius: 26px; box-shadow: 0 26px 80px rgba(61, 128, 145, .24); color: var(--text); height: min(780px, calc(100dvh - 32px)); max-width: 1080px; padding: 18px; width: calc(100% - 32px); }
.native-dialog::backdrop { background: rgba(113, 184, 201, .34); backdrop-filter: blur(8px); }
.native-dialog-heading { align-items: center; display: flex; justify-content: space-between; }
.native-dialog-heading h2 { margin: 3px 0 0; }
.native-dialog-heading button,
.native-actions button { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 8px 10px; }
.native-status { color: var(--muted); font-size: 13px; }
.native-search { background: rgba(255, 255, 255, .78); border: 1px solid var(--line); border-radius: 12px; color: var(--text); margin: 10px 0 8px; padding: 9px 11px; width: min(100%, 420px); }
.native-browser { display: grid; gap: 14px; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); height: calc(100% - 130px); min-height: 0; }
.native-list,
.native-preview { border: 1px solid var(--line); border-radius: 12px; min-height: 0; overflow-y: auto; padding: 10px; }
.native-list { display: grid; align-content: start; gap: 8px; }
.native-row { background: rgba(255, 255, 255, .75); border: 1px solid var(--line); border-radius: 16px; display: grid; gap: 6px; padding: 10px; }
.native-row > span,
.native-row > small,
.native-meta { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.native-actions { display: flex; gap: 7px; margin-top: 3px; }
.native-actions .native-import { background: var(--accent); border-color: var(--accent); color: #160a08; font-weight: 800; }
.native-actions button:disabled { opacity: .4; }
.native-preview h3 { margin: 4px 0; }
.native-message { border-bottom: 1px solid var(--line); padding: 12px 4px; }
.native-message strong { color: var(--muted); display: block; font-size: 11px; margin-bottom: 5px; }
.native-message div { line-height: 1.55; overflow-wrap: anywhere; white-space: pre-wrap; }
.native-warning { color: #ffb09f; font-size: 12px; }

.messages { background: rgba(241, 252, 250, .34); min-height: 0; overflow-y: auto; padding: 24px max(18px, calc((100% - 780px) / 2)); }
.jump-latest { align-items: center; backdrop-filter: blur(16px); background: rgba(255, 255, 255, .82); border: 1px solid rgba(94, 151, 166, .24); border-radius: 50%; bottom: max(88px, calc(78px + env(safe-area-inset-bottom))); box-shadow: 0 5px 18px rgba(35, 68, 77, .14); color: var(--muted); display: grid; font-size: 20px; height: 46px; justify-items: center; left: 50%; line-height: 1; padding: 0; position: absolute; transform: translateX(-50%); width: 46px; z-index: 5; }
.jump-latest:active { transform: translateX(-50%) scale(.94); }
.jump-latest:focus-visible { outline: 3px solid rgba(86, 181, 216, .42); outline-offset: 2px; }
.jump-latest[hidden] { display: none; }
.welcome { margin: min(18vh, 150px) auto 0; max-width: 520px; text-align: center; }
.welcome .provider-mark { margin: 0 auto; }
.welcome h1 { font-size: 30px; margin: 14px 0 8px; }
.welcome p { color: var(--muted); line-height: 1.6; }
.message { margin: 0 auto 18px; max-width: 780px; }
.message.user { background: linear-gradient(135deg, rgba(255, 223, 235, .94), rgba(255, 246, 201, .9)); border: 2px solid rgba(255, 255, 255, .94); border-radius: 22px 22px 7px 22px; box-shadow: 0 8px 22px rgba(128, 94, 107, .09); margin-left: auto; max-width: min(680px, 86%); padding: 12px 15px; }
.message.assistant { background: rgba(255, 255, 255, .72); border: 2px solid rgba(255, 255, 255, .86); border-radius: 8px 22px 22px 22px; box-shadow: 0 8px 22px rgba(66, 133, 151, .08); padding: 13px 15px; backdrop-filter: blur(8px); }
.message-role { color: var(--muted); display: block; font-size: 11px; font-weight: 700; margin-bottom: 6px; text-transform: uppercase; }
.message-content { line-height: 1.65; overflow-wrap: anywhere; white-space: pre-wrap; }
.markdown-body { white-space: normal; }
.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child { margin-bottom: 0; }
.markdown-body p { margin: .65em 0; }
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 { color: var(--text); line-height: 1.25; margin: 1.1em 0 .55em; }
.markdown-body h1 { font-size: 1.55em; }
.markdown-body h2 { font-size: 1.35em; }
.markdown-body h3 { font-size: 1.17em; }
.markdown-body ul,
.markdown-body ol { margin: .65em 0; padding-left: 1.6em; }
.markdown-body li { margin: .24em 0; }
.markdown-body blockquote { border-left: 4px solid var(--codex); color: var(--muted); margin: .8em 0; padding: .15em 0 .15em .9em; }
.markdown-body blockquote p { margin: .35em 0; }
.markdown-body a { color: #2484aa; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.markdown-body code { background: rgba(87, 150, 169, .12); border: 1px solid rgba(87, 150, 169, .18); border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9em; padding: .12em .34em; }
.markdown-body pre { background: rgba(35, 68, 77, .92); border: 1px solid rgba(255,255,255,.18); border-radius: 14px; color: #f4fbfd; margin: .8em 0; max-width: 100%; overflow-x: auto; padding: 13px; }
.markdown-body pre code { background: transparent; border: 0; color: inherit; display: block; padding: 0; white-space: pre; }
.markdown-body hr { border: 0; border-top: 1px solid var(--line); margin: 1em 0; }
.markdown-table-wrap { max-width: 100%; overflow-x: auto; }
.markdown-body table { border-collapse: collapse; margin: .8em 0; min-width: 320px; width: 100%; }
.markdown-body th,
.markdown-body td { border: 1px solid var(--line); padding: 7px 9px; text-align: left; }
.markdown-body th { background: rgba(111, 200, 238, .14); }
.markdown-image-reference { background: rgba(255, 216, 139, .35); border-radius: 7px; color: var(--muted); padding: .08em .35em; }
.artifact-shelf { background: rgba(255,255,255,.64); border: 2px solid rgba(255,255,255,.88); border-radius: 20px; display: grid; gap: 9px; margin: 4px auto 18px; max-width: 780px; padding: 13px; }
.artifact-shelf > strong { color: var(--muted); font-size: 12px; }
.artifact-card { align-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; display: flex; gap: 10px; justify-content: space-between; min-width: 0; padding: 10px 11px; }
.artifact-card > div { display: grid; gap: 3px; min-width: 0; }
.artifact-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artifact-card span { color: var(--muted); font-size: 11px; }
.artifact-card a { background: linear-gradient(135deg, #78d2f3, #9fe0f5); border-radius: 999px; color: #275e70; flex: 0 0 auto; font-size: 12px; font-weight: 900; padding: 8px 12px; }
.generated-image-card { align-items: stretch; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.generated-image-link { background: rgba(255,255,255,.42) !important; border-radius: 13px !important; grid-column: 1 / -1; overflow: hidden; padding: 0 !important; }
.generated-image-preview { display: block; height: auto; max-height: 560px; object-fit: contain; width: 100%; }
.web-artifact-card { align-items: stretch; display: grid; gap: 10px; padding: 10px; }
.artifact-card > .web-artifact-toolbar { align-items: center; display: flex; gap: 12px; justify-content: space-between; min-width: 0; }
.web-artifact-toolbar > div:first-child { display: grid; gap: 3px; min-width: 0; }
.web-artifact-actions { align-items: center; display: flex !important; flex: 0 0 auto; gap: 7px !important; }
.web-artifact-actions button,
.artifact-preview-dialog button { background: linear-gradient(135deg, #78d2f3, #9fe0f5); border: 0; border-radius: 999px; color: #275e70; cursor: pointer; font: inherit; font-size: 12px; font-weight: 900; padding: 8px 12px; }
.web-artifact-preview { aspect-ratio: 16 / 10; background: #fff; border: 1px solid var(--line); border-radius: 13px; display: block; min-height: 300px; width: 100%; }
.artifact-preview-dialog { background: var(--panel); border: 2px solid rgba(255,255,255,.86); border-radius: 22px; box-shadow: 0 24px 80px rgba(24, 53, 63, .34); height: min(88dvh, 900px); max-height: none; max-width: none; overflow: hidden; padding: 0; width: min(94vw, 1280px); }
.artifact-preview-dialog::backdrop { backdrop-filter: blur(8px); background: rgba(20, 39, 46, .48); }
.artifact-preview-dialog header { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 10px 12px; }
.artifact-preview-dialog iframe { background: #fff; border: 0; display: block; height: calc(100% - 57px); width: 100%; }
.message-status { color: var(--muted); display: block; font-size: 11px; margin-top: 7px; }
.reasoning-block { background: rgba(215, 244, 255, .78); border: 2px solid rgba(255,255,255,.9); border-radius: 18px; color: var(--muted); margin: 0 auto 16px; max-width: 780px; padding: 10px 12px; }
.reasoning-block summary { cursor: pointer; font-size: 13px; font-weight: 700; }
.reasoning-content { font-size: 13px; line-height: 1.55; margin-top: 8px; overflow-wrap: anywhere; white-space: pre-wrap; }
.turn-activity { align-items: center; background: rgba(228, 249, 221, .82); border: 2px solid rgba(255,255,255,.9); border-radius: 18px; color: #63875f; display: flex; font-size: 13px; gap: 9px; margin: 4px auto 18px; max-width: 780px; padding: 10px 12px; }
.activity-dot { animation: puppy-pulse 1.1s ease-in-out infinite; background: currentColor; border-radius: 50%; height: 7px; width: 7px; }
@keyframes puppy-pulse { 0%, 100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
.approval-card { background: rgba(255, 247, 218, .94); border: 2px solid #fff; border-radius: 20px; box-shadow: 0 10px 26px rgba(145, 118, 56, .12); display: grid; gap: 9px; margin: 14px auto; max-width: 780px; padding: 14px; }
.approval-card p { color: var(--muted); margin: 0; }
.approval-card code { background: rgba(255,255,255,.72); border: 1px solid rgba(187,157,86,.24); border-radius: 12px; display: block; overflow-x: auto; padding: 10px; white-space: pre-wrap; }
.approval-card small { color: var(--muted); overflow-wrap: anywhere; }
.approval-actions { display: flex; gap: 8px; justify-content: flex-end; }
.approval-actions button { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 8px 11px; }
.approval-actions .approve-once { background: #ffd170; border-color: #ffd170; color: #76551c; font-weight: 800; }

.composer {
  align-items: end;
  background: var(--panel);
  border: 2px solid rgba(255, 255, 255, .96);
  border-radius: 24px;
  box-shadow: 0 12px 34px rgba(58, 128, 147, .18), inset 0 0 0 1px var(--line);
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin: 10px max(12px, calc((100% - 820px) / 2)) max(10px, env(safe-area-inset-bottom));
  padding: 9px;
  backdrop-filter: blur(18px);
}

.composer textarea { background: transparent; border: 0; color: var(--text); min-height: 38px; outline: 0; padding: 8px 4px; resize: none; width: 100%; }
.composer textarea::placeholder { color: #8aa0a5; }
.composer button { border: 0; border-radius: 10px; height: 38px; }
.attach { background: #fff4bd; color: #d79b32; font-size: 24px; width: 38px; }
.attachment-list { display: flex; flex-wrap: wrap; gap: 7px; grid-column: 1 / -1; }
.attachment-list[hidden] { display: none; }
.attachment-chip { align-items: center; background: linear-gradient(135deg, #daf5ff, #fff2c8); border: 2px solid #fff; border-radius: 999px; display: inline-flex; font-size: 12px; gap: 6px; max-width: 100%; padding: 5px 7px 5px 9px; }
.attachment-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-chip button { background: transparent; color: var(--muted); flex: 0 0 auto; font-size: 18px; height: 24px; width: 24px; }
.send { background: linear-gradient(135deg, #78d2f3, #9fe0f5); color: #275e70; font-weight: 900; padding: 0 16px; }
.send.stop { background: #ffd1dc; color: #8d5162; }
.composer button:disabled { cursor: not-allowed; opacity: .38; }

.mascot {
  align-items: flex-end;
  bottom: max(92px, calc(82px + env(safe-area-inset-bottom)));
  display: grid;
  gap: 5px;
  justify-items: end;
  pointer-events: none;
  position: absolute;
  right: max(10px, calc((100% - 1020px) / 2));
  transform-origin: bottom center;
  width: 128px;
  z-index: 4;
}

.mascot[hidden] { display: none; }
.mascot-bubble {
  align-items: center;
  background: rgba(255, 251, 231, .94);
  border: 2px solid #fff;
  border-radius: 14px 14px 4px 14px;
  box-shadow: 0 7px 19px rgba(69, 105, 112, .15);
  color: #6d5143;
  display: flex;
  font-size: 11px;
  font-weight: 800;
  gap: 5px;
  line-height: 1.3;
  max-width: 126px;
  overflow-wrap: anywhere;
  padding: 7px 9px;
  text-align: center;
}

.mascot-art {
  height: 150px;
  position: relative;
  transform-origin: 50% 100%;
  width: 112px;
}

.mascot-sprite {
  background-image: url("/assets/mascot/puppy-mascot-sprite-v2.png?v=20260717-1");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 200% 200%;
  filter: drop-shadow(0 8px 8px rgba(56, 62, 61, .24));
  height: 100%;
  inset: 0;
  max-width: none;
  object-fit: contain;
  position: absolute;
  transform-origin: 52% 86%;
  width: 100%;
}

.mascot-symbol {
  align-items: center;
  background: #ff704a;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(81, 54, 41, .2);
  color: #fff;
  display: flex;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 1000;
  height: 17px;
  justify-content: center;
  position: static;
  transform-origin: center;
  width: 17px;
}

.mascot-hide {
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  bottom: 5px;
  font-size: 12px;
  height: 21px;
  line-height: 1;
  opacity: 0;
  pointer-events: auto;
  position: absolute;
  right: 2px;
  transition: opacity .16s ease;
  width: 21px;
  z-index: 3;
}
.mascot:hover .mascot-hide,
.mascot-hide:focus-visible { opacity: 1; }

.mascot-restore {
  background: rgba(255, 247, 215, .94);
  border: 2px solid #fff;
  border-radius: 999px;
  bottom: max(92px, calc(82px + env(safe-area-inset-bottom)));
  box-shadow: 0 8px 20px rgba(58, 105, 116, .18);
  cursor: pointer;
  font-size: 18px;
  height: 40px;
  position: absolute;
  right: 12px;
  width: 40px;
  z-index: 4;
}

.mascot[data-state="idle"] .mascot-art { animation: mascot-breathe 3.4s ease-in-out infinite; }
.mascot[data-state="listening"] .mascot-art { animation: mascot-listen 1.8s ease-in-out infinite; }
.mascot[data-state="thinking"] .mascot-art { animation: mascot-think 2.2s ease-in-out infinite; }
.mascot[data-state="thinking"] .mascot-symbol { animation: mascot-dots 1.25s ease-in-out infinite; }
.mascot[data-state="responding"] .mascot-art { animation: mascot-talk .75s ease-in-out infinite; }
.mascot[data-state="working"] .mascot-art { animation: mascot-work .62s ease-in-out infinite; }
.mascot[data-state="working"] .mascot-symbol { animation: mascot-spin 1.6s linear infinite; }
.mascot[data-state="approval"] .mascot-art { animation: mascot-alert .7s ease-in-out infinite; }
.mascot[data-state="approval"] .mascot-symbol { animation: mascot-pop .8s ease-in-out infinite; }
.mascot[data-state="success"] .mascot-art { animation: mascot-celebrate .72s ease-in-out 3; }
.mascot[data-state="success"] .mascot-symbol { animation: mascot-pop .6s ease-in-out 3; background: #ff9d3d; }
.mascot[data-state="error"] .mascot-art,
.mascot[data-state="disconnected"] .mascot-art { animation: mascot-worry 1.9s ease-in-out infinite; filter: saturate(.72); }
.mascot[data-state="error"] .mascot-symbol,
.mascot[data-state="disconnected"] .mascot-symbol { background: #7f8790; }
.mascot[data-state="uploading"] .mascot-art { animation: mascot-bounce .9s ease-in-out infinite; }

.mascot[data-state="idle"] .mascot-sprite,
.mascot[data-state="listening"] .mascot-sprite,
.mascot[data-state="responding"] .mascot-sprite,
.mascot[data-state="uploading"] .mascot-sprite { animation: mascot-blink-frames 4.8s steps(1, end) infinite; }
.mascot[data-state="thinking"] .mascot-sprite,
.mascot[data-state="working"] .mascot-sprite,
.mascot[data-state="error"] .mascot-sprite,
.mascot[data-state="disconnected"] .mascot-sprite { background-position: 0 100%; }
.mascot[data-state="thinking"] .mascot-sprite { animation: mascot-think-frames 2.4s steps(1, end) infinite; }
.mascot[data-state="working"] .mascot-sprite { animation: mascot-work-frames 1.1s steps(1, end) infinite; }
.mascot[data-state="approval"] .mascot-sprite,
.mascot[data-state="success"] .mascot-sprite { background-position: 100% 100%; }
.mascot[data-state="success"] .mascot-sprite { animation: mascot-success-frames .72s steps(1, end) 3; }

@keyframes mascot-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.012); } }
@keyframes mascot-listen { 0%, 100% { transform: rotate(-1deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-3px); } }
@keyframes mascot-think { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-2px); } }
@keyframes mascot-dots { 0%, 100% { opacity: .45; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes mascot-talk { 0%, 100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-2px) rotate(.8deg); } }
@keyframes mascot-work { 0%, 100% { transform: translateX(-1px) rotate(-1deg); } 50% { transform: translateX(2px) rotate(1deg); } }
@keyframes mascot-spin { to { transform: rotate(360deg); } }
@keyframes mascot-alert { 0%, 100% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-7px) rotate(-2deg); } 65% { transform: translateY(-5px) rotate(2deg); } }
@keyframes mascot-pop { 0%, 100% { transform: scale(.88); } 50% { transform: scale(1.13); } }
@keyframes mascot-celebrate { 0%, 100% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-12px) rotate(-4deg); } 70% { transform: translateY(-6px) rotate(4deg); } }
@keyframes mascot-worry { 0%, 100% { transform: translateX(0) rotate(-1deg); } 50% { transform: translateX(-3px) rotate(1deg); } }
@keyframes mascot-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes mascot-blink-frames {
  0%, 43%, 50%, 93%, 100% { background-position: 0 0; }
  44%, 49%, 94%, 99% { background-position: 100% 0; }
}
@keyframes mascot-think-frames {
  0%, 78%, 100% { background-position: 0 100%; }
  82%, 94% { background-position: 100% 0; }
}
@keyframes mascot-work-frames {
  0%, 49% { background-position: 0 100%; }
  50%, 100% { background-position: 0 0; }
}
@keyframes mascot-success-frames {
  0%, 24%, 76%, 100% { background-position: 100% 100%; }
  25%, 75% { background-position: 100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mascot *, .mascot { animation: none !important; transition: none !important; }
}

/* Conversation management */
.thread-filters { display: grid; gap: 7px; grid-template-columns: minmax(0, 1fr) auto; margin: 12px 0 8px; }
.thread-filters input,
.thread-filters select { background: rgba(255, 255, 255, .74); border: 1px solid var(--line); border-radius: 11px; color: var(--text); min-width: 0; padding: 8px 9px; }
.thread-row { position: relative; }
.thread-row.pinned strong::before { content: "📌 "; }
.thread-row.archived { opacity: .72; }
.thread-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.thread-tag { background: color-mix(in srgb, var(--accent) 13%, transparent); border-radius: 999px; color: var(--muted); font-size: 10px !important; padding: 2px 6px; }
.thread-manage { align-self: end; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: var(--text); flex: 0 0 auto; min-height: 34px; padding: 7px 11px; }
.thread-dialog { background: color-mix(in srgb, var(--panel) 96%, transparent); border: 2px solid rgba(255,255,255,.8); border-radius: 24px; box-shadow: 0 24px 80px rgba(43, 91, 104, .3); color: var(--text); max-width: 560px; padding: 20px; width: calc(100% - 28px); }
.thread-dialog::backdrop { background: rgba(40, 74, 83, .42); backdrop-filter: blur(7px); }
.thread-dialog-heading { align-items: center; display: flex; justify-content: space-between; }
.thread-dialog h2 { margin: 0 0 12px; }
.thread-dialog label { color: var(--muted); display: grid; font-size: 13px; gap: 6px; margin: 12px 0; }
.thread-dialog input,
.thread-dialog textarea { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; color: var(--text); font: inherit; padding: 10px 12px; resize: vertical; width: 100%; }
.thread-dialog .pin-check { align-items: center; display: flex; gap: 8px; }
.thread-dialog .pin-check input { height: 18px; width: 18px; }
.thread-impact { background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 12px; color: var(--muted); padding: 10px 12px; }
.thread-dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.thread-dialog button,
.message-actions button { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; color: var(--text); font-weight: 700; padding: 8px 12px; }
.thread-dialog button.danger { background: #a93649; border-color: #c95c6e; color: #fff; }
.message-actions { display: flex; gap: 6px; margin-top: 7px; opacity: .78; }
.message-actions button { font-size: 11px; padding: 5px 9px; }
.message:hover .message-actions,
.message:focus-within .message-actions { opacity: 1; }
.search-note { color: var(--muted); font-size: 11px; margin: 6px 2px; }
@media (max-width: 720px) {
  .thread-dialog { border-radius: 20px; max-height: calc(100dvh - 24px); overflow-y: auto; padding: 16px; }
  .thread-dialog-actions { justify-content: stretch; }
  .thread-dialog-actions button { flex: 1 1 auto; }
}

html[data-theme="bluey"] {
  --bg: #9edcf0;
  --panel: rgba(255, 248, 224, .9);
  --panel-2: rgba(221, 244, 250, .94);
  --line: rgba(42, 111, 153, .31);
  --text: #173f5f;
  --muted: #58798d;
  --accent: #f49a53;
  --codex: #4a9bcd;
  --ok: #5ca85c;
}

html[data-theme="bluey"] body {
  background:
    linear-gradient(rgba(222, 246, 251, .54), rgba(255, 244, 207, .58)),
    url("/assets/bluey-family.svg") center / cover fixed,
    var(--bg);
}
html[data-theme="bluey"] .theme-toggle {
  background: linear-gradient(135deg, rgba(255, 246, 213, .96), rgba(212, 240, 250, .96));
  border-color: #fff8dc;
  color: #276d98;
}
html[data-theme="bluey"] .landing-card {
  background: rgba(235, 248, 245, .43);
  border-color: rgba(255, 248, 219, .9);
  box-shadow: 0 28px 80px rgba(32, 101, 143, .2);
}
html[data-theme="bluey"] .login-card,
html[data-theme="bluey"] .provider-card {
  background: rgba(255, 248, 224, .86);
  border-color: rgba(255, 250, 228, .98);
  box-shadow: 0 16px 38px rgba(36, 98, 135, .19), inset 0 0 0 1px var(--line);
}
html[data-theme="bluey"] .provider-card:hover { box-shadow: 0 21px 44px rgba(36, 98, 135, .27), inset 0 0 0 1px var(--line); }
html[data-theme="bluey"] .eyebrow { color: #2d83af; }
html[data-theme="bluey"] .login-card button[type="submit"] { background: linear-gradient(135deg, #f2a257, #ffd46d); color: #68401f; }
html[data-theme="bluey"] .provider-mark {
  background: linear-gradient(145deg, #f5a05c, #ffd481);
  border-color: #fff8dc;
  color: #7d461f;
}
html[data-theme="bluey"] .codex-card .provider-mark,
html[data-theme="bluey"] body[data-provider="codex"] .provider-mark {
  background: linear-gradient(145deg, #4c9fd0, #a7def1);
  border-color: #fff8dc;
  color: #194f75;
}
html[data-theme="bluey"] .topbar {
  background: rgba(216, 241, 246, .86);
  box-shadow: 0 5px 20px rgba(33, 92, 128, .13);
}
html[data-theme="bluey"] .brand { color: #236f9c; }
html[data-theme="bluey"] .brand::before { color: #f28b4e; }
html[data-theme="bluey"] .provider-tabs { background: rgba(255, 247, 217, .73); border-color: rgba(255, 251, 230, .96); }
html[data-theme="bluey"] .provider-tabs a.active { background: linear-gradient(135deg, #61acd8, #ffd275); color: #173f5f; }
html[data-theme="bluey"] .sidebar { background: rgba(211, 239, 245, .76); }
html[data-theme="bluey"] .sidebar button { background: rgba(255, 248, 221, .82); color: #2a6d93; }
html[data-theme="bluey"] .thread-row.active { background: linear-gradient(135deg, rgba(99, 177, 216, .76), rgba(255, 209, 112, .73)); border-color: rgba(38, 111, 153, .4); }
html[data-theme="bluey"] .controls { background: rgba(225, 244, 243, .72); }
html[data-theme="bluey"] .messages { background: rgba(216, 242, 244, .28); }
html[data-theme="bluey"] .message.user { background: linear-gradient(135deg, rgba(255, 199, 115, .95), rgba(255, 236, 176, .92)); }
html[data-theme="bluey"] .message.assistant { background: rgba(246, 251, 238, .82); border-color: rgba(255, 249, 224, .94); }
html[data-theme="bluey"] .reasoning-block { background: rgba(179, 226, 242, .86); border-color: rgba(255, 249, 224, .94); }
html[data-theme="bluey"] .turn-activity { background: rgba(210, 239, 183, .88); border-color: rgba(255, 249, 224, .94); }
html[data-theme="bluey"] .approval-card { background: rgba(255, 236, 176, .95); border-color: #fff8dc; }
html[data-theme="bluey"] .composer { background: rgba(255, 248, 224, .92); border-color: #fff8dc; box-shadow: 0 12px 34px rgba(30, 93, 130, .2), inset 0 0 0 1px var(--line); }
html[data-theme="bluey"] .attach { background: #ffd575; color: #9b5b23; }
html[data-theme="bluey"] .send { background: linear-gradient(135deg, #4c9fd0, #84c9e8); color: #173f5f; }
html[data-theme="bluey"] .attachment-chip { background: linear-gradient(135deg, #b8e3f1, #ffe09a); border-color: #fff8dc; }
html[data-theme="bluey"] .artifact-card a { background: linear-gradient(135deg, #4c9fd0, #84c9e8); color: #173f5f; }
html[data-theme="bluey"] .native-dialog { background: rgba(239, 249, 240, .96); border-color: #fff8dc; }

html[data-theme="pridelands"] {
  --bg: #d87a31;
  --panel: rgba(255, 242, 202, .92);
  --panel-2: rgba(249, 218, 153, .94);
  --line: rgba(105, 54, 28, .34);
  --text: #3a2418;
  --muted: #74533d;
  --accent: #d7612e;
  --codex: #a7462e;
  --ok: #527b42;
}

html[data-theme="pridelands"] body {
  background:
    linear-gradient(rgba(255, 217, 134, .2), rgba(67, 27, 28, .28)),
    url("/assets/pride-lands.svg?v=20260717-2") center / cover fixed,
    var(--bg);
}
html[data-theme="pridelands"] .theme-toggle {
  background: linear-gradient(135deg, rgba(255, 226, 143, .96), rgba(230, 111, 49, .94));
  border-color: rgba(255, 237, 178, .96);
  box-shadow: 0 7px 20px rgba(72, 26, 22, .28), inset 0 0 0 1px rgba(121, 54, 29, .28);
  color: #542a20;
}
html[data-theme="pridelands"] .theme-toggle:hover { box-shadow: 0 10px 25px rgba(72, 26, 22, .38), inset 0 0 0 1px rgba(121, 54, 29, .32); }
html[data-theme="pridelands"] .theme-toggle:focus-visible { outline-color: rgba(255, 205, 86, .8); }
html[data-theme="pridelands"] .landing-card {
  background: rgba(255, 222, 151, .7);
  border-color: rgba(255, 235, 180, .88);
  box-shadow: 0 28px 80px rgba(50, 20, 20, .36);
}
html[data-theme="pridelands"] .login-card,
html[data-theme="pridelands"] .provider-card {
  background: rgba(255, 238, 194, .9);
  border-color: rgba(255, 239, 197, .98);
  box-shadow: 0 18px 42px rgba(64, 28, 21, .28), inset 0 0 0 1px var(--line);
}
html[data-theme="pridelands"] .provider-card:hover { box-shadow: 0 23px 48px rgba(57, 22, 20, .4), inset 0 0 0 1px var(--line); }
html[data-theme="pridelands"] .eyebrow { color: #9a3e28; }
html[data-theme="pridelands"] .login-card input { background: rgba(255, 248, 220, .84); }
html[data-theme="pridelands"] .login-card button[type="submit"] { background: linear-gradient(135deg, #d9572e, #f4a13f); color: #fff3cf; }
html[data-theme="pridelands"] .provider-mark {
  background: linear-gradient(145deg, #d6532f, #f2a33e);
  border-color: #ffe8a8;
  box-shadow: 0 5px 14px rgba(94, 35, 25, .28);
  color: #fff0bd;
}
html[data-theme="pridelands"] .codex-card .provider-mark,
html[data-theme="pridelands"] body[data-provider="codex"] .provider-mark {
  background: linear-gradient(145deg, #6f2c2c, #c6532f);
  border-color: #ffe8a8;
  color: #ffe9ad;
}
html[data-theme="pridelands"] .topbar {
  background: rgba(255, 221, 145, .88);
  box-shadow: 0 5px 22px rgba(60, 25, 21, .25);
}
html[data-theme="pridelands"] .brand { color: #843522; }
html[data-theme="pridelands"] .brand::before { color: #dd652f; content: "☀ "; }
html[data-theme="pridelands"] .provider-tabs { background: rgba(255, 238, 190, .77); border-color: rgba(255, 243, 205, .95); }
html[data-theme="pridelands"] .provider-tabs a.active { background: linear-gradient(135deg, #d9562f, #f2aa43); color: #fff1c6; }
html[data-theme="pridelands"] .connection.online { color: #3e713d; }
html[data-theme="pridelands"] .sidebar { background: rgba(246, 211, 143, .8); }
html[data-theme="pridelands"] .sidebar button { background: rgba(255, 239, 194, .86); color: #713722; }
html[data-theme="pridelands"] .thread-row.active { background: linear-gradient(135deg, rgba(214, 86, 46, .76), rgba(244, 173, 68, .78)); border-color: rgba(114, 45, 28, .42); color: #fff0c5; }
html[data-theme="pridelands"] .thread-row.active strong,
html[data-theme="pridelands"] .thread-row.active span { color: #fff2ce; }
html[data-theme="pridelands"] .controls { background: rgba(255, 226, 163, .79); }
html[data-theme="pridelands"] .model-runtime { background: rgba(223, 235, 174, .9); border-color: rgba(78, 119, 61, .38); color: #466b38; }
html[data-theme="pridelands"] .messages { background: rgba(94, 39, 28, .18); }
html[data-theme="pridelands"] .welcome { background: rgba(255, 232, 179, .8); border: 1px solid rgba(255, 239, 198, .86); border-radius: 26px; box-shadow: 0 16px 42px rgba(58, 24, 22, .22); padding: 25px; }
html[data-theme="pridelands"] .message.user { background: linear-gradient(135deg, rgba(220, 91, 47, .96), rgba(244, 168, 65, .94)); border-color: rgba(255, 226, 157, .92); color: #fff5d6; }
html[data-theme="pridelands"] .message.user .message-role,
html[data-theme="pridelands"] .message.user .message-status { color: rgba(255, 244, 211, .82); }
html[data-theme="pridelands"] .message.assistant { background: rgba(255, 241, 202, .9); border-color: rgba(255, 232, 171, .94); box-shadow: 0 9px 25px rgba(62, 26, 22, .2); }
html[data-theme="pridelands"] .markdown-body a { color: #a43d27; }
html[data-theme="pridelands"] .markdown-body pre { background: rgba(45, 24, 20, .95); border-color: rgba(255, 205, 104, .32); color: #fff2cd; }
html[data-theme="pridelands"] .markdown-body th { background: rgba(211, 91, 46, .18); }
html[data-theme="pridelands"] .reasoning-block { background: rgba(247, 207, 126, .9); border-color: rgba(255, 234, 181, .94); }
html[data-theme="pridelands"] .turn-activity { background: rgba(217, 226, 151, .9); border-color: rgba(255, 234, 181, .94); color: #5b743e; }
html[data-theme="pridelands"] .approval-card { background: rgba(255, 219, 133, .96); border-color: #ffe8a8; }
html[data-theme="pridelands"] .approval-actions .approve-once { background: #c94e2d; border-color: #c94e2d; color: #fff1c6; }
html[data-theme="pridelands"] .composer { background: rgba(255, 235, 187, .94); border-color: #ffe7a9; box-shadow: 0 13px 36px rgba(54, 23, 20, .34), inset 0 0 0 1px var(--line); }
html[data-theme="pridelands"] .composer textarea::placeholder { color: #8a6548; }
html[data-theme="pridelands"] .attach { background: #f6b64f; color: #81351f; }
html[data-theme="pridelands"] .send { background: linear-gradient(135deg, #c8492c, #e87832); color: #fff1c6; }
html[data-theme="pridelands"] .send.stop { background: #682b2b; color: #ffe8ba; }
html[data-theme="pridelands"] .attachment-chip { background: linear-gradient(135deg, #f4ae4b, #f7d37c); border-color: #ffe8a8; }
html[data-theme="pridelands"] .artifact-shelf { background: rgba(255, 230, 174, .82); border-color: #ffe8a8; }
html[data-theme="pridelands"] .artifact-card a { background: linear-gradient(135deg, #c8492c, #e87832); color: #fff1c6; }
html[data-theme="pridelands"] .native-dialog { background: rgba(255, 238, 195, .97); border-color: #ffe8a8; }
html[data-theme="pridelands"] .native-dialog::backdrop { background: rgba(51, 23, 22, .55); }

html[data-theme="spiderman"] {
  color-scheme: dark;
  --bg: #080d2c;
  --panel: rgba(12, 23, 58, .93);
  --panel-2: rgba(20, 39, 82, .95);
  --line: rgba(108, 162, 226, .34);
  --text: #edf6ff;
  --muted: #a9bed8;
  --accent: #ef3651;
  --codex: #5797ef;
  --ok: #71d69a;
}

html[data-theme="spiderman"] body {
  background:
    linear-gradient(rgba(6, 11, 36, .18), rgba(5, 8, 27, .42)),
    url("/assets/web-hero-city.svg?v=20260717-1") center / cover fixed,
    var(--bg);
}
html[data-theme="spiderman"] .theme-toggle {
  background: linear-gradient(135deg, rgba(226, 31, 65, .96), rgba(27, 76, 157, .96));
  border-color: rgba(177, 214, 255, .72);
  box-shadow: 0 7px 22px rgba(2, 7, 28, .5), inset 0 0 0 1px rgba(211, 235, 255, .24);
  color: #f4f9ff;
}
html[data-theme="spiderman"] .theme-toggle:hover { box-shadow: 0 10px 28px rgba(2, 7, 28, .65), inset 0 0 0 1px rgba(211, 235, 255, .32); }
html[data-theme="spiderman"] .theme-toggle:focus-visible { outline-color: rgba(101, 174, 255, .82); }
html[data-theme="spiderman"] .landing-card {
  background: rgba(8, 17, 48, .76);
  border-color: rgba(118, 173, 235, .44);
  box-shadow: 0 30px 90px rgba(1, 5, 24, .62);
}
html[data-theme="spiderman"] .login-card,
html[data-theme="spiderman"] .provider-card {
  background: rgba(11, 24, 61, .9);
  border-color: rgba(112, 170, 234, .46);
  box-shadow: 0 19px 46px rgba(1, 5, 25, .52), inset 0 0 0 1px rgba(211, 235, 255, .1);
}
html[data-theme="spiderman"] .provider-card:hover { box-shadow: 0 24px 54px rgba(1, 5, 25, .7), 0 0 24px rgba(229, 39, 73, .2), inset 0 0 0 1px var(--line); }
html[data-theme="spiderman"] .eyebrow { color: #ff667d; }
html[data-theme="spiderman"] .login-card input { background: rgba(4, 11, 36, .78); border-color: rgba(105, 167, 235, .42); }
html[data-theme="spiderman"] .login-card button[type="submit"] { background: linear-gradient(135deg, #e01f43, #bd1839); color: #fff; }
html[data-theme="spiderman"] .provider-mark {
  background: linear-gradient(145deg, #f13a55, #ac1536);
  border-color: #b8dcff;
  box-shadow: 0 5px 16px rgba(2, 8, 32, .5);
  color: #fff;
}
html[data-theme="spiderman"] .codex-card .provider-mark,
html[data-theme="spiderman"] body[data-provider="codex"] .provider-mark {
  background: linear-gradient(145deg, #2769cb, #153e91);
  border-color: #b8dcff;
  color: #f0f7ff;
}
html[data-theme="spiderman"] .topbar {
  background: rgba(7, 16, 48, .9);
  box-shadow: 0 5px 24px rgba(1, 5, 25, .48);
}
html[data-theme="spiderman"] .brand { color: #ff506a; }
html[data-theme="spiderman"] .brand::before { color: #dbeeff; content: "🕸 "; }
html[data-theme="spiderman"] .provider-tabs { background: rgba(17, 37, 82, .78); border-color: rgba(109, 169, 235, .4); }
html[data-theme="spiderman"] .provider-tabs a.active { background: linear-gradient(135deg, #dc2144, #245fb9); color: #fff; }
html[data-theme="spiderman"] .connection.online { color: #77dea0; }
html[data-theme="spiderman"] .sidebar { background: rgba(8, 19, 52, .87); }
html[data-theme="spiderman"] .sidebar button { background: rgba(22, 46, 94, .88); color: #d9ebff; }
html[data-theme="spiderman"] .thread-row.active { background: linear-gradient(135deg, rgba(218, 31, 66, .86), rgba(34, 88, 174, .88)); border-color: rgba(133, 190, 249, .48); }
html[data-theme="spiderman"] .thread-row.active strong,
html[data-theme="spiderman"] .thread-row.active span { color: #fff; }
html[data-theme="spiderman"] .controls { background: rgba(9, 21, 57, .88); }
html[data-theme="spiderman"] .controls input,
html[data-theme="spiderman"] .controls select { background: rgba(18, 39, 82, .94); }
html[data-theme="spiderman"] .model-runtime { background: rgba(21, 71, 71, .9); border-color: rgba(94, 220, 161, .4); color: #9aefbf; }
html[data-theme="spiderman"] .messages { background: rgba(3, 8, 31, .36); }
html[data-theme="spiderman"] .welcome { background: rgba(8, 21, 58, .82); border: 1px solid rgba(105, 167, 235, .4); border-radius: 26px; box-shadow: 0 17px 46px rgba(1, 5, 24, .48); padding: 25px; }
html[data-theme="spiderman"] .message.user { background: linear-gradient(135deg, rgba(226, 32, 68, .97), rgba(167, 20, 54, .96)); border-color: rgba(255, 117, 140, .6); color: #fff; }
html[data-theme="spiderman"] .message.user .message-role,
html[data-theme="spiderman"] .message.user .message-status { color: rgba(255, 226, 233, .82); }
html[data-theme="spiderman"] .message.assistant { background: rgba(13, 29, 70, .93); border-color: rgba(95, 158, 225, .48); box-shadow: 0 9px 27px rgba(1, 6, 28, .45); }
html[data-theme="spiderman"] .markdown-body a { color: #7fb8ff; }
html[data-theme="spiderman"] .markdown-body code { background: rgba(79, 137, 210, .17); border-color: rgba(114, 175, 238, .24); }
html[data-theme="spiderman"] .markdown-body pre { background: rgba(3, 8, 27, .96); border-color: rgba(101, 167, 235, .34); color: #eaf5ff; }
html[data-theme="spiderman"] .markdown-body th { background: rgba(51, 105, 181, .25); }
html[data-theme="spiderman"] .reasoning-block { background: rgba(23, 55, 108, .92); border-color: rgba(102, 167, 234, .46); }
html[data-theme="spiderman"] .turn-activity { background: rgba(16, 72, 77, .92); border-color: rgba(95, 218, 164, .42); color: #a0efc1; }
html[data-theme="spiderman"] .approval-card { background: rgba(72, 32, 63, .96); border-color: rgba(244, 81, 108, .55); }
html[data-theme="spiderman"] .approval-card code { background: rgba(6, 13, 39, .74); border-color: rgba(111, 169, 231, .34); }
html[data-theme="spiderman"] .approval-actions .approve-once { background: #df2145; border-color: #df2145; color: #fff; }
html[data-theme="spiderman"] .composer { background: rgba(10, 23, 61, .95); border-color: rgba(103, 166, 232, .5); box-shadow: 0 13px 38px rgba(1, 5, 24, .6), inset 0 0 0 1px rgba(211, 235, 255, .08); }
html[data-theme="spiderman"] .composer textarea::placeholder { color: #8198b8; }
html[data-theme="spiderman"] .attach { background: #234f9b; color: #d8ebff; }
html[data-theme="spiderman"] .send { background: linear-gradient(135deg, #e22448, #b8163a); color: #fff; }
html[data-theme="spiderman"] .send.stop { background: #285fae; color: #eef7ff; }
html[data-theme="spiderman"] .attachment-chip { background: linear-gradient(135deg, #204c96, #b91c43); border-color: rgba(143, 194, 247, .5); color: #fff; }
html[data-theme="spiderman"] .artifact-shelf { background: rgba(10, 26, 67, .88); border-color: rgba(104, 168, 235, .44); }
html[data-theme="spiderman"] .artifact-card a { background: linear-gradient(135deg, #275fb5, #337bd6); color: #fff; }
html[data-theme="spiderman"] .native-dialog { background: rgba(9, 22, 59, .98); border-color: rgba(109, 170, 235, .5); }
html[data-theme="spiderman"] .native-dialog::backdrop { background: rgba(1, 4, 21, .72); }

@media (max-width: 720px) {
  .provider-grid { grid-template-columns: 1fr; }
  .provider-card { min-height: 160px; }
  .topbar { grid-template-columns: auto 1fr auto; padding: 0 10px; }
  .topbar-actions { gap: 6px; }
  .topbar .theme-toggle { height: 34px; justify-content: center; padding: 5px; width: 34px; }
  .topbar .theme-toggle [data-theme-label] { display: none; }
  .connection { font-size: 11px; max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .brand { font-size: inherit; gap: 0; }
  .brand::after { content: none; }
  .brand-name { display: none; }
  .provider-tabs { justify-self: center; }
  .provider-tabs a { padding-inline: 9px; }
  .chat-shell { display: block; }
  .sidebar { display: none; }
  .conversation { height: calc(100dvh - 58px); }
  .controls { min-height: 58px; padding-inline: 10px; }
  .controls input,
  .controls select { min-width: 128px; max-width: 50vw; }
  .mobile-new { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--text); display: block; flex: 0 0 auto; padding: 8px 10px; }
  .mobile-history { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--text); display: block; flex: 0 0 auto; padding: 8px 10px; }
  .mobile-thread-search { display: grid !important; }
  .mobile-thread-search input { min-width: 142px; width: 38vw; }
  .mobile-thread-label { display: grid !important; }
  .messages { padding: 18px 14px; }
  .artifact-card > .web-artifact-toolbar { align-items: stretch; flex-direction: column; }
  .web-artifact-actions { justify-content: flex-end; }
  .web-artifact-preview { aspect-ratio: 3 / 4; min-height: 420px; }
  .artifact-preview-dialog { border-radius: 16px; height: calc(100dvh - 16px); width: calc(100vw - 12px); }
  .composer { margin-inline: 8px; }
  .mascot { bottom: max(82px, calc(72px + env(safe-area-inset-bottom))); right: 5px; transform: scale(.76); transform-origin: bottom right; }
  .mascot-bubble { font-size: 10px; max-width: 110px; }
  .mascot-hide { opacity: .58; }
  .mascot-restore { bottom: max(82px, calc(72px + env(safe-area-inset-bottom))); right: 8px; }
  .native-dialog { height: 100dvh; max-height: 100dvh; padding: 12px; width: 100%; }
  .native-browser { grid-template-columns: 1fr; grid-template-rows: minmax(180px, 42%) minmax(0, 1fr); }
}

/* Royal sunrise: warm storybook cinema with readable cream glass panels. */
html[data-theme="lionking"] {
  color-scheme: light;
  --bg: #6b4b5d;
  --panel: rgba(255, 247, 218, .91);
  --panel-2: rgba(249, 219, 159, .93);
  --line: rgba(104, 59, 63, .3);
  --text: #3f2d32;
  --muted: #765b59;
  --accent: #e16d43;
  --codex: #74465f;
  --ok: #4d7a54;
}
html[data-theme="lionking"] body { background: linear-gradient(rgba(255, 225, 158, .06), rgba(44, 36, 42, .12)), url("/assets/simba-and-friends.svg?v=20260717-1") center / cover fixed, var(--bg); }
html[data-theme="lionking"] .theme-toggle { background: linear-gradient(135deg, #ffe486, #ef9a55 58%, #8d4963); border-color: rgba(255, 246, 203, .94); box-shadow: 0 8px 24px rgba(62, 38, 49, .3), inset 0 0 0 1px rgba(107, 60, 67, .18); color: #4e3038; }
html[data-theme="lionking"] .theme-toggle:hover { box-shadow: 0 12px 30px rgba(62, 38, 49, .4); transform: translateY(-1px); }
html[data-theme="lionking"] .landing-card { background: linear-gradient(145deg, rgba(255, 236, 183, .78), rgba(255, 211, 150, .65)); border-color: rgba(255, 247, 213, .88); box-shadow: 0 30px 86px rgba(55, 32, 47, .42); }
html[data-theme="lionking"] .login-card,
html[data-theme="lionking"] .provider-card { background: linear-gradient(145deg, rgba(255, 250, 225, .94), rgba(251, 228, 181, .88)); border-color: rgba(255, 249, 222, .98); box-shadow: 0 18px 44px rgba(68, 39, 48, .25), inset 0 0 0 1px var(--line); }
html[data-theme="lionking"] .provider-card:hover { box-shadow: 0 25px 55px rgba(68, 39, 48, .35), inset 0 0 0 1px var(--line); transform: translateY(-3px) rotate(-.2deg); }
html[data-theme="lionking"] .eyebrow { color: #a84a49; letter-spacing: .13em; }
html[data-theme="lionking"] .login-card input { background: rgba(255, 253, 235, .88); border-color: rgba(133, 81, 78, .28); }
html[data-theme="lionking"] .login-card button[type="submit"] { background: linear-gradient(135deg, #e86e43, #9a4a5c); color: #fff8db; }
html[data-theme="lionking"] .provider-mark { background: linear-gradient(145deg, #ffc966, #e37743); border: 3px solid #fff2b4; box-shadow: 0 7px 18px rgba(92, 49, 47, .25); color: #63333d; }
html[data-theme="lionking"] .codex-card .provider-mark,
html[data-theme="lionking"] body[data-provider="codex"] .provider-mark { background: linear-gradient(145deg, #9b5267, #573a5b); color: #ffeeb6; }
html[data-theme="lionking"] .topbar { background: linear-gradient(90deg, rgba(255, 232, 176, .93), rgba(247, 202, 147, .89)); border-bottom-color: rgba(118, 67, 68, .19); box-shadow: 0 5px 24px rgba(65, 37, 48, .24); }
html[data-theme="lionking"] .brand { color: #71394c; text-shadow: 0 1px #fff0b6; }
html[data-theme="lionking"] .brand::before { color: #e06d43; content: "☀ "; }
html[data-theme="lionking"] .provider-tabs { background: rgba(255, 248, 216, .76); border-color: rgba(255, 250, 226, .98); }
html[data-theme="lionking"] .provider-tabs a.active { background: linear-gradient(135deg, #eb7748, #8f4860); color: #fff9dc; }
html[data-theme="lionking"] .connection.online { color: #45734d; }
html[data-theme="lionking"] .sidebar { background: linear-gradient(180deg, rgba(247, 214, 157, .86), rgba(225, 184, 133, .8)); border-right-color: rgba(102, 59, 63, .22); }
html[data-theme="lionking"] .sidebar button { background: rgba(255, 244, 208, .9); color: #713d49; }
html[data-theme="lionking"] .thread-row.active { background: linear-gradient(135deg, rgba(231, 108, 66, .9), rgba(127, 66, 91, .88)); border-color: rgba(100, 49, 66, .4); color: #fff7d6; box-shadow: 0 7px 18px rgba(87, 46, 59, .22); }
html[data-theme="lionking"] .thread-row.active strong,
html[data-theme="lionking"] .thread-row.active span { color: #fff7db; }
html[data-theme="lionking"] .controls { background: rgba(255, 232, 184, .86); border-bottom-color: rgba(106, 61, 64, .2); }
html[data-theme="lionking"] .model-runtime { background: rgba(220, 233, 177, .92); border-color: rgba(82, 122, 72, .34); color: #4d7046; }
html[data-theme="lionking"] .messages { background: linear-gradient(rgba(79, 48, 60, .11), rgba(65, 52, 48, .18)); }
html[data-theme="lionking"] .message.user { background: linear-gradient(135deg, rgba(234, 111, 67, .98), rgba(151, 68, 88, .96)); border-color: rgba(255, 225, 160, .7); color: #fffbea; box-shadow: 0 9px 26px rgba(81, 43, 56, .22); }
html[data-theme="lionking"] .message.user .message-role,
html[data-theme="lionking"] .message.user .message-status { color: rgba(255, 244, 211, .84); }
html[data-theme="lionking"] .message.assistant { background: rgba(255, 248, 218, .94); border-color: rgba(255, 239, 191, .98); box-shadow: 0 9px 27px rgba(65, 40, 49, .2); }
html[data-theme="lionking"] .markdown-body a { color: #a7424b; }
html[data-theme="lionking"] .markdown-body pre { background: #352833; border-color: rgba(255, 207, 127, .3); color: #fff2cc; }
html[data-theme="lionking"] .markdown-body th { background: rgba(218, 104, 67, .16); }
html[data-theme="lionking"] .reasoning-block { background: rgba(248, 211, 145, .93); border-color: rgba(255, 242, 204, .98); }
html[data-theme="lionking"] .turn-activity { background: rgba(213, 229, 170, .92); border-color: rgba(255, 242, 204, .98); color: #4e7148; }
html[data-theme="lionking"] .approval-card { background: rgba(255, 222, 159, .98); border-color: #fff0b8; }
html[data-theme="lionking"] .approval-actions .approve-once { background: #a84c59; border-color: #a84c59; color: #fff8dd; }
html[data-theme="lionking"] .composer { background: rgba(255, 245, 211, .96); border-color: #ffedb1; box-shadow: 0 14px 38px rgba(59, 37, 47, .31), inset 0 0 0 1px var(--line); }
html[data-theme="lionking"] .composer textarea::placeholder { color: #8a6a64; }
html[data-theme="lionking"] .attach { background: #f7bd5d; color: #6c3845; }
html[data-theme="lionking"] .send { background: linear-gradient(135deg, #e66e44, #93465e); color: #fff9df; }
html[data-theme="lionking"] .send.stop { background: #573746; color: #ffeab2; }
html[data-theme="lionking"] .attachment-chip { background: linear-gradient(135deg, #f8ca70, #eca06a); border-color: #fff0b7; }
html[data-theme="lionking"] .artifact-shelf { background: rgba(255, 234, 184, .88); border-color: #ffedb4; }
html[data-theme="lionking"] .artifact-card a { background: linear-gradient(135deg, #d95f43, #91445c); color: #fff9df; }
html[data-theme="lionking"] .native-dialog { background: rgba(255, 243, 207, .99); border-color: #ffedb3; }
html[data-theme="lionking"] .native-dialog::backdrop { background: rgba(55, 35, 47, .58); }

/* Comic city: saturated ink, halftone energy and cyan-edged night glass. */
html[data-theme="spiderhero"] {
  color-scheme: dark;
  --bg: #111c46;
  --panel: rgba(13, 27, 65, .94);
  --panel-2: rgba(22, 47, 96, .96);
  --line: rgba(104, 215, 245, .31);
  --text: #f0f9ff;
  --muted: #acc7dc;
  --accent: #f04461;
  --codex: #47c1ec;
  --ok: #70dda6;
}
html[data-theme="spiderhero"] body { background: linear-gradient(rgba(9, 17, 52, .09), rgba(20, 12, 44, .25)), url("/assets/amazing-web-city.svg?v=20260717-1") center / cover fixed, var(--bg); }
html[data-theme="spiderhero"] .theme-toggle { background: linear-gradient(135deg, #f03b5b, #873a91 50%, #2cbce8); border-color: rgba(196, 243, 255, .78); box-shadow: 0 8px 26px rgba(3, 8, 37, .58), 0 0 18px rgba(60, 202, 239, .18); color: #fff; }
html[data-theme="spiderhero"] .theme-toggle:hover { box-shadow: 0 12px 31px rgba(3, 8, 37, .7), 0 0 24px rgba(60, 202, 239, .28); transform: translateY(-1px) rotate(1deg); }
html[data-theme="spiderhero"] .landing-card { background: linear-gradient(145deg, rgba(11, 24, 64, .84), rgba(42, 26, 78, .78)); border-color: rgba(96, 218, 248, .38); box-shadow: 0 31px 90px rgba(1, 5, 31, .7); }
html[data-theme="spiderhero"] .login-card,
html[data-theme="spiderhero"] .provider-card { background: linear-gradient(145deg, rgba(12, 28, 70, .94), rgba(26, 39, 86, .9)); border-color: rgba(104, 218, 247, .4); box-shadow: 0 20px 50px rgba(1, 5, 31, .58), inset 0 0 0 1px rgba(245, 68, 98, .08); }
html[data-theme="spiderhero"] .provider-card:hover { box-shadow: 0 26px 60px rgba(1, 5, 31, .72), 0 0 28px rgba(53, 191, 233, .2); transform: translateY(-3px) rotate(.2deg); }
html[data-theme="spiderhero"] .eyebrow { color: #ff7790; letter-spacing: .13em; }
html[data-theme="spiderhero"] .login-card input { background: rgba(5, 15, 48, .84); border-color: rgba(87, 204, 241, .42); }
html[data-theme="spiderhero"] .login-card button[type="submit"] { background: linear-gradient(135deg, #f13b5d, #414fc3); color: #fff; }
html[data-theme="spiderhero"] .provider-mark { background: linear-gradient(145deg, #f34b65, #a11749); border: 3px solid #a9edff; box-shadow: 0 7px 19px rgba(2, 8, 37, .48); color: #fff; }
html[data-theme="spiderhero"] .codex-card .provider-mark,
html[data-theme="spiderhero"] body[data-provider="codex"] .provider-mark { background: linear-gradient(145deg, #35c2ec, #3155bd); color: #fff; }
html[data-theme="spiderhero"] .topbar { background: linear-gradient(90deg, rgba(8, 20, 58, .95), rgba(42, 23, 78, .93)); border-bottom-color: rgba(86, 204, 241, .25); box-shadow: 0 5px 26px rgba(1, 5, 29, .58); }
html[data-theme="spiderhero"] .brand { color: #ff6c86; text-shadow: 0 0 16px rgba(255, 75, 108, .26); }
html[data-theme="spiderhero"] .brand::before { color: #75ddf8; content: "🕸 "; }
html[data-theme="spiderhero"] .provider-tabs { background: rgba(18, 42, 91, .84); border-color: rgba(89, 207, 244, .36); }
html[data-theme="spiderhero"] .provider-tabs a.active { background: linear-gradient(135deg, #ef3c5e, #347fcf); color: #fff; }
html[data-theme="spiderhero"] .connection.online { color: #75e5ad; }
html[data-theme="spiderhero"] .sidebar { background: linear-gradient(180deg, rgba(7, 18, 53, .93), rgba(22, 24, 69, .9)); border-right-color: rgba(84, 201, 239, .23); }
html[data-theme="spiderhero"] .sidebar button { background: rgba(19, 45, 96, .92); color: #dff7ff; }
html[data-theme="spiderhero"] .thread-row.active { background: linear-gradient(135deg, rgba(240, 55, 89, .92), rgba(43, 132, 207, .9)); border-color: rgba(117, 224, 252, .44); box-shadow: 0 7px 20px rgba(4, 9, 38, .35); }
html[data-theme="spiderhero"] .thread-row.active strong,
html[data-theme="spiderhero"] .thread-row.active span { color: #fff; }
html[data-theme="spiderhero"] .controls { background: rgba(8, 23, 63, .94); border-bottom-color: rgba(83, 200, 238, .24); }
html[data-theme="spiderhero"] .controls input,
html[data-theme="spiderhero"] .controls select { background: rgba(17, 42, 89, .97); }
html[data-theme="spiderhero"] .model-runtime { background: rgba(12, 74, 77, .92); border-color: rgba(103, 228, 174, .38); color: #a4f1ca; }
html[data-theme="spiderhero"] .messages { background: linear-gradient(rgba(2, 8, 35, .31), rgba(18, 8, 40, .4)); }
html[data-theme="spiderhero"] .message.user { background: linear-gradient(135deg, rgba(243, 57, 89, .99), rgba(157, 27, 73, .97)); border-color: rgba(255, 124, 148, .54); color: #fff; box-shadow: 0 9px 28px rgba(2, 7, 34, .42); }
html[data-theme="spiderhero"] .message.user .message-role,
html[data-theme="spiderhero"] .message.user .message-status { color: rgba(255, 227, 235, .84); }
html[data-theme="spiderhero"] .message.assistant { background: rgba(11, 32, 76, .96); border-color: rgba(80, 196, 235, .44); box-shadow: 0 9px 29px rgba(1, 6, 34, .5); }
html[data-theme="spiderhero"] .markdown-body a { color: #73dcfa; }
html[data-theme="spiderhero"] .markdown-body code { background: rgba(76, 189, 230, .16); border-color: rgba(94, 211, 247, .24); }
html[data-theme="spiderhero"] .markdown-body pre { background: rgba(2, 7, 29, .98); border-color: rgba(74, 197, 237, .34); color: #eafaff; }
html[data-theme="spiderhero"] .markdown-body th { background: rgba(53, 159, 213, .23); }
html[data-theme="spiderhero"] .reasoning-block { background: rgba(18, 55, 108, .95); border-color: rgba(84, 203, 241, .42); }
html[data-theme="spiderhero"] .turn-activity { background: rgba(10, 73, 78, .95); border-color: rgba(100, 229, 178, .4); color: #a6f2cc; }
html[data-theme="spiderhero"] .approval-card { background: rgba(72, 27, 70, .98); border-color: rgba(246, 77, 109, .5); }
html[data-theme="spiderhero"] .approval-actions .approve-once { background: #ef3d5f; border-color: #ef3d5f; color: #fff; }
html[data-theme="spiderhero"] .composer { background: rgba(8, 25, 68, .98); border-color: rgba(85, 205, 243, .46); box-shadow: 0 14px 42px rgba(0, 4, 28, .66), inset 0 0 0 1px rgba(255, 78, 110, .08); }
html[data-theme="spiderhero"] .composer textarea::placeholder { color: #87a5c0; }
html[data-theme="spiderhero"] .attach { background: #245eb1; color: #def7ff; }
html[data-theme="spiderhero"] .send { background: linear-gradient(135deg, #f23e5f, #a21e55); color: #fff; }
html[data-theme="spiderhero"] .send.stop { background: #2b80bf; color: #f0fbff; }
html[data-theme="spiderhero"] .attachment-chip { background: linear-gradient(135deg, #2086bd, #aa205f); border-color: rgba(118, 226, 253, .46); color: #fff; }
html[data-theme="spiderhero"] .artifact-shelf { background: rgba(8, 30, 76, .92); border-color: rgba(84, 205, 243, .42); }
html[data-theme="spiderhero"] .artifact-card a { background: linear-gradient(135deg, #278fc9, #3c56bd); color: #fff; }
html[data-theme="spiderhero"] .native-dialog { background: rgba(7, 22, 63, .99); border-color: rgba(92, 213, 249, .48); }
html[data-theme="spiderhero"] .native-dialog::backdrop { background: rgba(1, 4, 24, .76); }

html[data-theme="propellerpup"] {
  color-scheme: light;
  --bg: #efa71b;
  --panel: rgba(255, 248, 224, .94);
  --panel-2: rgba(255, 231, 177, .95);
  --line: rgba(93, 74, 67, .27);
  --text: #433936;
  --muted: #75635e;
  --accent: #f08fa8;
  --codex: #6879bb;
  --ok: #789b25;
}
html[data-theme="propellerpup"] body {
  background: linear-gradient(rgba(255, 244, 205, .08), rgba(144, 82, 27, .12)), url("/assets/propeller-pup-parade.svg?v=20260722-1") 72% center / cover fixed, var(--bg);
}
html[data-theme="propellerpup"] .theme-toggle { background: linear-gradient(135deg, #fff2c8 0 29%, #f3a0b4 29% 48%, #c8e323 48% 66%, #7383c3 66% 86%, #fffaf0 86%); border-color: #fff9e8; box-shadow: 0 8px 24px rgba(111, 66, 24, .26), inset 0 0 0 1px rgba(73, 61, 57, .18); color: #493d39; text-shadow: 0 1px rgba(255,255,255,.75); }
html[data-theme="propellerpup"] .theme-toggle:hover { box-shadow: 0 12px 30px rgba(111, 66, 24, .35), inset 0 0 0 1px rgba(73, 61, 57, .2); transform: translateY(-1px) rotate(-.5deg); }
html[data-theme="propellerpup"] .landing-card { background: rgba(255, 239, 190, .67); border-color: rgba(255, 253, 239, .94); box-shadow: 0 30px 84px rgba(107, 64, 27, .3); }
html[data-theme="propellerpup"] .login-card,
html[data-theme="propellerpup"] .provider-card { background: rgba(255, 249, 225, .9); border-color: rgba(255, 253, 241, .98); box-shadow: 0 18px 43px rgba(103, 64, 30, .23), inset 0 0 0 1px var(--line); }
html[data-theme="propellerpup"] .provider-card:hover { box-shadow: 0 24px 52px rgba(103, 64, 30, .31), inset 0 0 0 1px var(--line); transform: translateY(-3px) rotate(.25deg); }
html[data-theme="propellerpup"] .eyebrow { color: #9d5a3c; letter-spacing: .14em; }
html[data-theme="propellerpup"] .login-card input { background: rgba(255, 253, 239, .92); border-color: rgba(102, 75, 65, .28); }
html[data-theme="propellerpup"] .login-card button[type="submit"] { background: linear-gradient(135deg, #7283c5, #ef8fa9); color: #fff; }
html[data-theme="propellerpup"] .provider-mark { background: linear-gradient(145deg, #f3d77d, #f08ea6); border: 3px solid #fff8df; color: #513d3b; }
html[data-theme="propellerpup"] .codex-card .provider-mark,
html[data-theme="propellerpup"] body[data-provider="codex"] .provider-mark { background: linear-gradient(145deg, #8495d3, #6373b4); border-color: #fff8df; color: #fff; }
html[data-theme="propellerpup"] .games-card .provider-mark { background: linear-gradient(145deg, #d6eb34, #f5d45f); color: #526020; }
html[data-theme="propellerpup"] .topbar { background: linear-gradient(90deg, rgba(255, 239, 194, .95), rgba(255, 220, 159, .9)); border-bottom-color: rgba(105, 76, 64, .2); box-shadow: 0 5px 23px rgba(105, 65, 30, .2); }
html[data-theme="propellerpup"] .brand { color: #66569b; }
html[data-theme="propellerpup"] .provider-tabs { background: rgba(255, 250, 226, .83); border-color: rgba(255, 253, 239, .98); }
html[data-theme="propellerpup"] .provider-tabs a.active { background: linear-gradient(135deg, #ed91aa, #d6e631 48%, #7a8ac8); color: #403737; }
html[data-theme="propellerpup"] .connection.online { color: #63842d; }
html[data-theme="propellerpup"] .sidebar { background: rgba(244, 203, 126, .83); border-right-color: rgba(101, 73, 61, .22); }
html[data-theme="propellerpup"] .sidebar button { background: rgba(255, 246, 211, .91); color: #66569b; }
html[data-theme="propellerpup"] .thread-row.active { background: linear-gradient(135deg, rgba(239, 145, 170, .92), rgba(202, 226, 42, .86) 52%, rgba(111, 127, 190, .88)); border-color: rgba(85, 70, 68, .28); box-shadow: 0 7px 18px rgba(102, 62, 31, .2); }
html[data-theme="propellerpup"] .thread-row.active strong,
html[data-theme="propellerpup"] .thread-row.active span { color: #3f3533; }
html[data-theme="propellerpup"] .controls { background: rgba(255, 229, 178, .88); border-bottom-color: rgba(102, 75, 64, .2); }
html[data-theme="propellerpup"] .model-runtime { background: rgba(215, 231, 79, .9); border-color: rgba(93, 117, 32, .34); color: #526b27; }
html[data-theme="propellerpup"] .messages { background: rgba(255, 244, 211, .2); }
html[data-theme="propellerpup"] .message.user { background: linear-gradient(135deg, rgba(239, 145, 169, .97), rgba(201, 224, 45, .94)); border-color: rgba(255, 250, 225, .9); color: #443736; box-shadow: 0 9px 25px rgba(102, 63, 31, .2); }
html[data-theme="propellerpup"] .message.user .message-role,
html[data-theme="propellerpup"] .message.user .message-status { color: rgba(68, 55, 54, .7); }
html[data-theme="propellerpup"] .message.assistant { background: rgba(255, 250, 229, .94); border-color: rgba(255, 254, 242, .98); box-shadow: 0 9px 26px rgba(101, 63, 31, .18); }
html[data-theme="propellerpup"] .markdown-body a { color: #6475b5; }
html[data-theme="propellerpup"] .markdown-body code { background: rgba(111, 126, 187, .12); border-color: rgba(103, 117, 178, .2); }
html[data-theme="propellerpup"] .markdown-body pre { background: #3f3a48; border-color: rgba(246, 211, 123, .35); color: #fff6da; }
html[data-theme="propellerpup"] .markdown-body th { background: rgba(237, 142, 166, .14); }
html[data-theme="propellerpup"] .reasoning-block { background: rgba(246, 219, 151, .94); border-color: rgba(255, 250, 225, .98); }
html[data-theme="propellerpup"] .turn-activity { background: rgba(218, 233, 110, .93); border-color: rgba(255, 250, 225, .98); color: #576f2a; }
html[data-theme="propellerpup"] .approval-card { background: rgba(255, 222, 166, .98); border-color: #fff3c5; }
html[data-theme="propellerpup"] .approval-actions .approve-once { background: #6d7fbc; border-color: #6d7fbc; color: #fff; }
html[data-theme="propellerpup"] .composer { background: rgba(255, 248, 221, .97); border-color: #fff0be; box-shadow: 0 14px 37px rgba(101, 62, 31, .27), inset 0 0 0 1px var(--line); }
html[data-theme="propellerpup"] .composer textarea::placeholder { color: #92786b; }
html[data-theme="propellerpup"] .attach { background: #dce844; color: #536326; }
html[data-theme="propellerpup"] .send { background: linear-gradient(135deg, #7889c8, #ef8ea8); color: #fff; }
html[data-theme="propellerpup"] .send.stop { background: #514a61; color: #fff2c8; }
html[data-theme="propellerpup"] .attachment-chip { background: linear-gradient(135deg, #f2d778, #f09aae); border-color: #fff1c6; }
html[data-theme="propellerpup"] .artifact-shelf { background: rgba(255, 230, 178, .9); border-color: #fff0bd; }
html[data-theme="propellerpup"] .artifact-card a { background: linear-gradient(135deg, #7182c1, #ee8fa8); color: #fff; }
html[data-theme="propellerpup"] .native-dialog { background: rgba(255, 247, 218, .99); border-color: #fff0bc; }
html[data-theme="propellerpup"] .native-dialog::backdrop { background: rgba(92, 58, 31, .5); }

@media (max-width: 720px) {
  html[data-theme="propellerpup"] body { background-position: 76% center; }
  html[data-theme="propellerpup"] .landing-card { background: rgba(255, 241, 198, .75); }
}


/* Touch-first screen pet. It enhances the provider mascot and creates the same
   companion on the landing and game surfaces without changing page layout. */
.mascot.pet-enabled {
  left: var(--pet-left, calc(100% - 146px));
  right: auto;
  transition: left .58s cubic-bezier(.2, .8, .25, 1);
}

.mascot.pet-standalone {
  bottom: max(18px, env(safe-area-inset-bottom));
  position: fixed;
  z-index: 25;
}

.pet-enabled .mascot-art {
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.pet-enabled .mascot-art:active { cursor: grabbing; }
.pet-enabled .mascot-art:focus-visible {
  border-radius: 44%;
  outline: 4px solid color-mix(in srgb, var(--accent) 60%, transparent);
  outline-offset: 2px;
}
.pet-care-toggle {
  background: linear-gradient(135deg, #fff4bd, #ffd1de);
  border: 2px solid rgba(255, 255, 255, .95);
  border-radius: 999px;
  bottom: 3px;
  box-shadow: 0 7px 18px rgba(67, 103, 112, .2);
  color: #744f4d;
  cursor: pointer;
  font-size: 12px;
  font-weight: 1000;
  left: -5px;
  min-height: 44px;
  min-width: 52px;
  padding: 0 9px;
  pointer-events: auto;
  position: absolute;
  z-index: 4;
}
.pet-enabled[data-pet-action="pet"] .mascot-art { animation: pet-nuzzle .52s ease-in-out infinite alternate !important; }
.pet-enabled[data-pet-action="treat"] .mascot-art { animation: pet-treat .5s ease-in-out 3 !important; }
.pet-enabled[data-pet-action="bath"] .mascot-art { animation: pet-bath .62s ease-in-out 3 !important; }
.pet-enabled[data-pet-action="sleep"] .mascot-art { animation: pet-sleep 2.4s ease-in-out infinite !important; }
.pet-enabled[data-pet-action="play"] .mascot-art,
.pet-enabled[data-pet-action="run"] .mascot-art { animation: pet-run .24s ease-in-out infinite alternate !important; }
@keyframes pet-nuzzle {
  from { transform: rotate(-4deg) translateY(0) scale(1); }
  to { transform: rotate(4deg) translateY(-7px) scale(1.04); }
}
@keyframes pet-treat {
  0%, 100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-12px) scale(1.06); }
}
@keyframes pet-bath {
  0%, 100% { transform: rotate(-2deg); filter: saturate(1); }
  50% { transform: rotate(3deg); filter: saturate(1.25) brightness(1.06); }
}
@keyframes pet-sleep {
  0%, 100% { transform: translateY(0) scale(1); filter: saturate(.86); }
  50% { transform: translateY(3px) scale(.985); filter: saturate(.72); }
}
@keyframes pet-run {
  from { transform: translateY(0) rotate(-2deg); }
  to { transform: translateY(-9px) rotate(2deg); }
}
.pet-thrown-ball {
  color: #ff7a57;
  filter: drop-shadow(0 4px 4px rgba(79, 54, 44, .28));
  font-size: 25px;
  line-height: 1;
  pointer-events: none;
  position: fixed;
  z-index: 90;
}
.pet-care-scrim {
  align-items: flex-end;
  background: rgba(24, 43, 51, .35);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 16px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  position: fixed;
  z-index: 80;
}
.pet-care-scrim[hidden] { display: none; }
.pet-care-sheet {
  background: color-mix(in srgb, var(--panel) 96%, white 4%);
  border: 2px solid rgba(255, 255, 255, .86);
  border-radius: 26px;
  box-shadow: 0 24px 75px rgba(31, 62, 70, .3), inset 0 0 0 1px var(--line);
  color: var(--text);
  max-width: 560px;
  padding: 20px;
  width: 100%;
}
.pet-care-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}
.pet-care-heading h2 { font-size: 24px; margin: 2px 0 0; }
.pet-care-kicker { color: var(--muted); font-size: 10px; font-weight: 1000; letter-spacing: .16em; }
.pet-care-close {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  min-height: 44px;
  padding: 0 16px;
}
.pet-meters { display: grid; gap: 10px; }
.pet-meter-label {
  align-items: center;
  display: flex;
  font-size: 13px;
  justify-content: space-between;
  margin-bottom: 5px;
}
.pet-meter-track {
  background: color-mix(in srgb, var(--muted) 17%, transparent);
  border-radius: 999px;
  display: block;
  height: 9px;
  overflow: hidden;
}
.pet-meter-fill {
  background: linear-gradient(90deg, var(--codex), var(--accent));
  border-radius: inherit;
  display: block;
  height: 100%;
  transition: width .35s ease;
  width: var(--pet-meter, 0%);
}
.pet-care-actions {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
}
.pet-care-action {
  align-items: center;
  background: linear-gradient(145deg, var(--panel-2), var(--panel));
  border: 2px solid rgba(255, 255, 255, .72);
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text);
  cursor: pointer;
  display: grid;
  font-size: 26px;
  gap: 3px;
  min-height: 74px;
  padding: 8px;
  place-items: center;
}
.pet-care-action strong { font-size: 13px; }
.pet-care-action:active { transform: scale(.97); }
.pet-care-tip { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 14px 0 0; text-align: center; }
.pet-standalone-restore {
  bottom: max(18px, env(safe-area-inset-bottom));
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  z-index: 25;
}
.puppy-easter-egg {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  z-index: 120;
}
.easter-egg-copy {
  background: color-mix(in srgb, var(--panel) 92%, white 8%);
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 999px;
  box-shadow: 0 14px 40px rgba(38, 69, 77, .24), inset 0 0 0 1px var(--line);
  color: var(--text);
  font-size: clamp(14px, 2.3vw, 21px);
  font-weight: 1000;
  left: 50%;
  max-width: calc(100vw - 28px);
  padding: 12px 20px;
  position: absolute;
  text-align: center;
  top: max(74px, calc(env(safe-area-inset-top) + 64px));
  transform: translateX(-50%);
  white-space: nowrap;
}
.easter-egg-spark {
  animation: easter-egg-spark 1.25s cubic-bezier(.15, .75, .28, 1) var(--spark-delay) both;
  background: hsl(var(--spark-hue) 92% 62%);
  border-radius: 999px;
  box-shadow: 0 0 14px hsl(var(--spark-hue) 95% 67%);
  height: 10px;
  left: var(--spark-left);
  position: absolute;
  top: var(--spark-top);
  width: 10px;
}
.easter-egg-runner {
  animation: easter-egg-puppy-rush 2.25s cubic-bezier(.22, .72, .22, 1) var(--runner-delay) both;
  background-image: url("/assets/mascot/puppy-mascot-sprite-v2.png?v=20260717-1");
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: 200% 200%;
  bottom: var(--runner-bottom);
  filter: drop-shadow(0 8px 8px rgba(42, 55, 56, .25));
  height: 150px;
  left: 0;
  position: absolute;
  width: 112px;
}
.conversation.easter-egg-shaking { animation: easter-egg-shake .82s ease-in-out 1; }
@keyframes easter-egg-spark {
  0% { opacity: 0; transform: translate(0, 0) scale(.2); }
  16% { opacity: 1; transform: translate(0, 0) scale(1.15); }
  100% { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) scale(.25); }
}
@keyframes easter-egg-puppy-rush {
  0% { transform: translateX(-140px) translateY(0) rotate(-3deg); }
  20% { transform: translateX(20vw) translateY(-14px) rotate(3deg); }
  40% { transform: translateX(40vw) translateY(0) rotate(-3deg); }
  60% { transform: translateX(60vw) translateY(-14px) rotate(3deg); }
  80% { transform: translateX(80vw) translateY(0) rotate(-3deg); }
  100% { transform: translateX(calc(100vw + 150px)) translateY(-8px) rotate(2deg); }
}
@keyframes easter-egg-shake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  15% { transform: translate(-7px, 3px) rotate(-.35deg); }
  30% { transform: translate(6px, -3px) rotate(.3deg); }
  45% { transform: translate(-5px, -2px) rotate(-.22deg); }
  60% { transform: translate(5px, 2px) rotate(.2deg); }
  75% { transform: translate(-3px, 1px) rotate(-.12deg); }
}
@media (max-width: 720px) {
  .mascot.pet-enabled {
    bottom: max(84px, calc(74px + env(safe-area-inset-bottom)));
    right: auto;
    transform: scale(.88);
    transform-origin: bottom left;
  }
  .mascot.pet-standalone { bottom: max(14px, env(safe-area-inset-bottom)); }
  .pet-care-toggle { font-size: 13px; min-height: 50px; min-width: 58px; }
  .pet-care-sheet { border-radius: 24px; padding: 18px 14px; }
  .pet-care-action { min-height: 78px; }
}
@media (prefers-reduced-motion: reduce) {
  .mascot.pet-enabled,
  .pet-enabled .mascot-art,
  .pet-meter-fill { animation: none !important; transition: none !important; }
  .easter-egg-spark { animation: none; opacity: .8; }
  .easter-egg-runner {
    animation: none;
    left: calc(50% - 56px);
  }
  .conversation.easter-egg-shaking {
    animation: none;
    box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--accent) 65%, transparent);
  }
}