/* ============================================================
   Rafa AI · Design tokens (v4)
   Themes: obsidian (default) · cyber · slate
   ============================================================ */
:root, html[data-theme="cyber"] {
  color-scheme: dark;

  --bg: #050b1b;
  --bg-deep: #03060f;
  --surface-1: #0a1428;
  --surface-2: #0d1b33;
  --surface-3: #122443;
  --stroke: rgba(125, 180, 255, .16);
  --stroke-strong: rgba(125, 180, 255, .34);

  --text: #edf5ff;
  --text-2: #b3c7e8;
  --muted: #8fa6c9;

  --accent: #4d9bff;
  --accent-hover: #7cc0ff;
  --accent-press: #2563eb;
  --accent-ink: #03101f;
  --accent-text: #8dc5ff;
  --accent-soft: rgba(77, 155, 255, .18);
  --accent-2: #22d3ee;
  --accent-3: #ff4fb8;

  --image-accent: #ff4fb8;
  --image-ink: #1a0410;

  --video-accent: #ffb454;
  --video-accent-2: #ff7a59;
  --video-ink: #1f1204;
  --video-text: #ffc98a;
  --video-soft: rgba(255, 180, 84, .14);

  --song-accent: #a78bfa;
  --song-accent-2: #f472b6;
  --song-ink: #150726;
  --song-text: #d8c6ff;
  --song-soft: rgba(167, 139, 250, .14);

  --success: #3ddc97;
  --warning: #ffc857;
  --danger: #ff6b7a;
  --focus: rgba(111, 176, 255, .80);

  --blob-1: #2563eb;
  --blob-2: #d946ef;
  --blob-3: #06b6d4;
  --blob-opacity: .44;

  --glass-tint: rgba(10, 20, 40, .72);
  --glass-border: rgba(125, 180, 255, .20);
}

html[data-theme="obsidian"] {
  color-scheme: dark;

  --bg: #0b0713;
  --bg-deep: #05030b;
  --surface-1: #130e1f;
  --surface-2: #191227;
  --surface-3: #221836;
  --stroke: rgba(196, 181, 253, .16);
  --stroke-strong: rgba(196, 181, 253, .34);

  --text: #f6f1ff;
  --text-2: #d0c4ea;
  --muted: #a99cc6;

  --accent: #a78bfa;
  --accent-hover: #c4b5fd;
  --accent-press: #8b5cf6;
  --accent-ink: #120726;
  --accent-text: #cdb9ff;
  --accent-soft: rgba(167, 139, 250, .18);
  --accent-2: #22d3ee;
  --accent-3: #f472b6;

  --image-accent: #c084fc;
  --image-ink: #150621;

  --video-accent: #f2b36b;
  --video-accent-2: #e58c5a;
  --video-ink: #1c0f05;
  --video-text: #f6cba0;
  --video-soft: rgba(242, 179, 107, .12);

  --song-accent: #a78bfa;
  --song-accent-2: #22d3ee;
  --song-ink: #0c0618;
  --song-text: #c4b5fd;
  --song-soft: rgba(167, 139, 250, .13);

  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;
  --focus: rgba(167, 139, 250, .85);

  --blob-1: #7c3aed;
  --blob-2: #db2777;
  --blob-3: #0891b2;
  --blob-opacity: .34;

  --glass-tint: rgba(19, 14, 31, .78);
  --glass-border: rgba(196, 181, 253, .20);
}

html[data-theme="slate"] {
  color-scheme: dark;

  --bg: #041512;
  --bg-deep: #020b09;
  --surface-1: #08211d;
  --surface-2: #0c2b25;
  --surface-3: #12382f;
  --stroke: rgba(148, 233, 216, .16);
  --stroke-strong: rgba(148, 233, 216, .34);

  --text: #ebfffb;
  --text-2: #aad6cc;
  --muted: #83a9a1;

  --accent: #2dd4bf;
  --accent-hover: #5eead4;
  --accent-press: #14b8a6;
  --accent-ink: #03211c;
  --accent-text: #5eead4;
  --accent-soft: rgba(45, 212, 191, .16);
  --accent-2: #38bdf8;
  --accent-3: #f6c66d;

  --image-accent: #f6c66d;
  --image-ink: #221604;

  --video-accent: #fbbf24;
  --video-accent-2: #f59e0b;
  --video-ink: #221604;
  --video-text: #fcd68a;
  --video-soft: rgba(251, 191, 36, .12);

  --song-accent: #f0a68a;
  --song-accent-2: #e8879a;
  --song-ink: #2a1008;
  --song-text: #f6c4ad;
  --song-soft: rgba(240, 166, 138, .12);

  --success: #34d399;
  --warning: #fbbf24;
  --danger: #fb7185;
  --focus: rgba(94, 234, 212, .75);

  --blob-1: #0d9488;
  --blob-2: #0e7490;
  --blob-3: #b45309;
  --blob-opacity: .32;

  --glass-tint: rgba(8, 33, 29, .72);
  --glass-border: rgba(148, 233, 216, .20);
}

/* Bridge to the legacy variable names used across the app. */
:root {
  --panel-solid: var(--surface-1);
  --panel: color-mix(in srgb, var(--surface-1) 86%, transparent);
  --app-1: color-mix(in srgb, var(--surface-2) 92%, transparent);
  --app-2: color-mix(in srgb, var(--surface-1) 96%, transparent);
  --topbar-1: color-mix(in srgb, var(--surface-1) 72%, transparent);
  --topbar-2: color-mix(in srgb, var(--surface-1) 24%, transparent);
  --side-1: color-mix(in srgb, var(--surface-1) 80%, transparent);
  --side-2: color-mix(in srgb, var(--surface-1) 94%, transparent);
  --card-1: color-mix(in srgb, var(--surface-2) 97%, transparent);
  --card-2: color-mix(in srgb, var(--surface-1) 99%, transparent);
  --bg-glow-1: var(--blob-1);
  --bg-glow-2: var(--blob-2);
  --bg-base-1: var(--bg);
  --bg-base-2: var(--bg-deep);
  --bg-veil: .55;

  --font-ui: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.875rem;
  --fs-base: 0.9375rem;
  --fs-lg: 1rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --lh-tight: 1.2;
  --lh-ui: 1.4;
  --lh-body: 1.65;
  --track-caps: 0.16em;
  --track-meta: 0.08em;

  --shadow-1: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 2px 8px rgba(0, 0, 0, .32);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 18px 40px -18px rgba(0, 0, 0, .70);
  --shadow-3: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 40px 90px -40px rgba(0, 0, 0, .85);
  --shadow: var(--shadow-3);
  --shadow-accent: 0 10px 36px -12px color-mix(in srgb, var(--accent) 55%, transparent);
  --radius-lg: 22px;

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --z-ambient: 0;
  --z-shell: 1;
  --z-content: 2;
  --z-popover: 40;
  --z-modal: 60;
  --z-toast: 80;

  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    radial-gradient(1200px 700px at 15% -10%, var(--bg-glow-1) 0%, transparent 55%),
    radial-gradient(900px 600px at 110% 10%, var(--bg-glow-2) 0%, transparent 50%),
    linear-gradient(160deg, var(--bg-base-1) 0%, var(--bg-base-2) 100%);
  overflow-x: hidden;
  transition: background .4s ease;
}

::selection { background: rgba(110, 168, 255, .35); }

.backdrop { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.backdrop span {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  animation: drift 26s ease-in-out infinite alternate;
}
.backdrop span:nth-child(1) { width: 460px; height: 460px; top: -160px; left: -120px; background: var(--blob-1); }
.backdrop span:nth-child(2) { width: 400px; height: 400px; bottom: -180px; right: -100px; background: var(--blob-2); animation-delay: -8s; }
.backdrop span:nth-child(3) { width: 320px; height: 320px; top: 45%; left: 55%; background: var(--blob-3); opacity: .25; animation-delay: -15s; }

.custom-bg {
  position: fixed;
  inset: -3%;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(3px) saturate(1.05);
  animation: fade .5s ease both;
}
.custom-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 700px at 50% 0%, transparent 0%, rgba(3, 6, 12, calc(var(--bg-veil, .55) * .55)) 100%),
    rgba(3, 6, 12, var(--bg-veil, .55));
}
body.has-custom-bg .backdrop { display: none; }
body.has-custom-bg .app {
  background:
    linear-gradient(180deg, rgba(10, 16, 30, .66), rgba(6, 10, 20, .82)),
    var(--panel-solid);
  backdrop-filter: blur(26px) saturate(1.1);
}
body.has-custom-bg .topbar {
  background: linear-gradient(180deg, rgba(8, 13, 26, .62), rgba(8, 13, 26, .18));
}
body.has-custom-bg .sidebar {
  background: linear-gradient(180deg, rgba(12, 19, 36, .72), rgba(8, 12, 24, .82));
  backdrop-filter: blur(20px);
}

.app {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  height: min(880px, calc(100dvh - 44px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--stroke);
  border-radius: 28px;
  background:
    linear-gradient(180deg, var(--app-1), var(--app-2)),
    var(--panel-solid);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(18px);
  animation: rise .45s cubic-bezier(.2, .8, .2, 1) both;
}

/* ---------- Header ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--stroke);
  background: linear-gradient(180deg, var(--topbar-1), var(--topbar-2));
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(135deg, #5b8dff, #9c7bff 55%, #45e0c0);
  color: #07101f;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -.03em;
  box-shadow: 0 10px 26px rgba(91, 141, 255, .38), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.brand-text { min-width: 0; }
.brand h1 {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: -.02em;
}
#status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 3px 0 0;
  font-size: .76rem;
  color: var(--muted);
}
#status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, .16);
  animation: pulse 2.4s ease-in-out infinite;
}
#status.offline::before { background: #ffb454; box-shadow: 0 0 0 3px rgba(255, 180, 84, .16); animation-duration: 4s; }
.header-actions { display: flex; gap: 8px; align-items: center; flex: none; }
.header-actions form { margin: 0; display: flex; }

/* ---------- Buttons ---------- */
button {
  font: inherit;
  cursor: pointer;
  border: 0;
  color: #fff;
}
button:disabled { opacity: .5; cursor: not-allowed; }
.ghost {
  padding: 8px 13px;
  border-radius: 11px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, .04);
  color: #c4d3f2;
  font-size: .8rem;
  font-weight: 600;
  transition: background .18s, border-color .18s, color .18s, transform .18s;
}
.ghost:hover { background: rgba(255, 255, 255, .09); border-color: var(--stroke-strong); color: #fff; }
.ghost:active { transform: translateY(1px); }
.ghost.small { width: 34px; height: 34px; padding: 0; font-size: .95rem; flex: none; }
.ghost.spinning { animation: spin .7s linear infinite; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Chat ---------- */
#chat {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 22px 10px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 178, 235, .25) transparent;
}
#chat::-webkit-scrollbar, .gallery::-webkit-scrollbar { width: 9px; }
#chat::-webkit-scrollbar-thumb, .gallery::-webkit-scrollbar-thumb {
  background: rgba(148, 178, 235, .22);
  border-radius: 999px;
}
#chat::-webkit-scrollbar-track, .gallery::-webkit-scrollbar-track { background: transparent; }

.message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 88%;
  align-self: flex-start;
  animation: rise .28s cubic-bezier(.2, .8, .2, 1) both;
}
.message.user { align-self: flex-end; flex-direction: row-reverse; }
.avatar {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 11px;
  font-size: .8rem;
  font-weight: 800;
  user-select: none;
}
.message.assistant .avatar {
  background: linear-gradient(135deg, rgba(110, 168, 255, .28), rgba(156, 123, 255, .28));
  border: 1px solid rgba(110, 168, 255, .35);
  color: #bcd6ff;
}
.message.user .avatar {
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--stroke);
  color: #c4d3f2;
}
.bubble {
  min-width: 0;
  padding: 10px 14px 11px;
  border-radius: 18px 18px 18px 6px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
}
.message.user .bubble {
  border-radius: 18px 18px 6px 18px;
  border-color: rgba(130, 160, 255, .28);
  background: linear-gradient(135deg, #3a6ae0, #6d5ae8);
  box-shadow: 0 12px 28px rgba(60, 100, 220, .28);
}
.message.error .bubble {
  border-color: rgba(255, 123, 123, .4);
  background: rgba(255, 90, 90, .09);
}
.msg-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
  font-size: .68rem;
  color: var(--muted);
}
.message.user .msg-head { color: rgba(235, 242, 255, .72); }
.msg-head .who { font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.msg-head time { font-size: .68rem; opacity: .8; }
.msg-body {
  font-size: .95rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.msg-body p { margin: .45em 0; }
.msg-body p:first-child { margin-top: 0; }
.msg-body p:last-child { margin-bottom: 0; }
.msg-body h2, .msg-body h3, .msg-body h4, .msg-body h5 { margin: .8em 0 .35em; font-size: 1.03em; }
.msg-body h2:first-child, .msg-body h3:first-child, .msg-body h4:first-child { margin-top: 0; }
.msg-body ul, .msg-body ol { margin: .45em 0; padding-left: 1.3em; }
.msg-body li { margin: .18em 0; }
.msg-body a { color: #a8c8ff; text-underline-offset: 2px; }
.msg-body code {
  background: rgba(4, 8, 18, .6);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 6px;
  padding: .12em .4em;
  font-size: .9em;
}
.msg-body pre {
  background: rgba(4, 8, 18, .72);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 12px;
  padding: 12px 14px;
  overflow: auto;
  margin: .55em 0;
}
.msg-body pre code { background: none; border: 0; padding: 0; font-size: .86em; line-height: 1.5; }

.message.streaming .msg-body::after {
  content: "▍";
  margin-left: 2px;
  color: var(--accent);
  animation: blink 1s steps(2) infinite;
}

.typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: .87rem;
}
.typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: bounce 1.1s ease-in-out infinite;
}
.typing i:nth-child(2) { animation-delay: .14s; }
.typing i:nth-child(3) { animation-delay: .28s; }
.typing span { margin-left: 5px; }

.copy-btn {
  display: inline-flex;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .05);
  color: var(--muted);
  font-size: .7rem;
  opacity: 0;
  transition: opacity .18s, background .18s;
}
.message:hover .copy-btn { opacity: 1; }
.copy-btn:hover { background: rgba(255, 255, 255, .11); color: #fff; }
@media (hover: none) { .copy-btn { opacity: .75; } }

.welcome-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(110, 168, 255, .3);
  background: rgba(110, 168, 255, .1);
  color: #c3d8ff;
  font-size: .8rem;
  transition: background .18s, transform .18s, border-color .18s;
}
.chip:hover { background: rgba(110, 168, 255, .2); border-color: rgba(110, 168, 255, .55); transform: translateY(-1px); }

/* ---------- Composer ---------- */
.composer-wrap {
  padding: 8px 18px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgba(8, 13, 26, .65));
}
.composer { display: flex; flex-direction: column; gap: 6px; }
.composer-box {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 7px 7px 7px 14px;
  border: 1px solid var(--stroke);
  border-radius: 20px;
  background: rgba(8, 13, 26, .72);
  transition: border-color .2s, box-shadow .2s;
}
.composer-box:focus-within {
  border-color: rgba(110, 168, 255, .6);
  box-shadow: 0 0 0 4px rgba(110, 168, 255, .12);
}
#message {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  max-height: 150px;
  margin: 0;
  padding: 7px 2px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .97rem;
  line-height: 1.45;
  resize: none;
  outline: none;
  overflow-y: auto;
}
#message::placeholder { color: #7c8db1; }
textarea:disabled { opacity: .55; }
.composer-tools { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
.tool-btn {
  padding: 7px 9px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background .18s, color .18s;
}
.tool-btn:hover { background: rgba(255, 255, 255, .07); color: var(--text); }
.tool-btn.stop { color: #ffb4b4; background: rgba(255, 107, 107, .12); }
.send-btn {
  padding: 9px 16px;
  border-radius: 13px;
  background: linear-gradient(135deg, #5b8dff, #8f6bff);
  font-weight: 700;
  font-size: .88rem;
  box-shadow: 0 6px 18px rgba(91, 141, 255, .3);
  transition: transform .18s, box-shadow .18s, filter .18s;
}
.send-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(91, 141, 255, .42); }
.send-btn:active:not(:disabled) { transform: translateY(0); }
.composer-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 5px;
  font-size: .72rem;
  color: var(--muted);
}
.hint { opacity: .72; }
.char-count { margin-left: auto; font-variant-numeric: tabular-nums; opacity: .8; }
#speech-language {
  padding: 3px 7px;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  background: rgba(8, 13, 26, .8);
  color: var(--muted);
  font: inherit;
  font-size: .72rem;
  outline: none;
}
#speech-language:focus { border-color: var(--accent); }
.voice-help {
  min-height: 1em;
  margin: 4px 0 0;
  padding: 0 5px;
  font-size: .76rem;
  color: var(--muted);
}

/* ---------- Image studio ---------- */
.image-panel {
  margin: 4px 18px 18px;
  border: 1px solid var(--stroke);
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  overflow: hidden;
}
.image-panel summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background .18s;
}
.image-panel summary::-webkit-details-marker { display: none; }
.image-panel summary:hover { background: rgba(255, 255, 255, .03); }
.summary-icon {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(110, 168, 255, .14);
  border: 1px solid rgba(110, 168, 255, .25);
  font-size: 1.05rem;
}
.summary-text {
  display: flex;
  flex-direction: column;
  font-size: .92rem;
  font-weight: 650;
  line-height: 1.25;
}
.summary-text small { margin-top: 2px; font-size: .72rem; font-weight: 400; color: var(--muted); }
.gallery-count {
  margin-left: auto;
  min-width: 1.7em;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(110, 168, 255, .35), rgba(156, 123, 255, .35));
  border: 1px solid rgba(110, 168, 255, .3);
  color: #d6e5ff;
  font-size: .74rem;
  font-weight: 700;
  text-align: center;
}
.chev { color: var(--muted); font-size: 1.05rem; transition: transform .22s; }
.image-panel[open] .chev { transform: rotate(180deg); }
.panel-body {
  padding: 0 15px 15px;
  border-top: 1px solid rgba(255, 255, 255, .05);
  padding-top: 13px;
}
.image-form { display: flex; flex-direction: column; gap: 9px; }
#image-prompt {
  width: 100%;
  min-height: 72px;
  max-height: 140px;
  padding: 11px 13px;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  background: rgba(8, 13, 26, .7);
  color: var(--text);
  font: inherit;
  font-size: .92rem;
  line-height: 1.45;
  resize: none;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
#image-prompt:focus { border-color: rgba(110, 168, 255, .6); box-shadow: 0 0 0 3px rgba(110, 168, 255, .1); }
#image-prompt::placeholder { color: #7c8db1; }
.idea-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.idea-chips button {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
  font-size: .74rem;
  transition: color .18s, border-color .18s, background .18s;
}
.idea-chips button:hover { color: var(--text); border-color: rgba(110, 168, 255, .45); background: rgba(110, 168, 255, .1); }
.image-controls { display: flex; align-items: center; gap: 8px; }
#image-size {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: rgba(8, 13, 26, .8);
  color: #c9d7f2;
  font: inherit;
  font-size: .85rem;
  outline: none;
}
#image-size:focus { border-color: var(--accent); }
.create-btn {
  padding: 10px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #45e0c0, #3b9dff);
  color: #04121c;
  font-weight: 800;
  font-size: .86rem;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(69, 224, 192, .22);
  transition: transform .18s, box-shadow .18s, filter .18s;
}
.create-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(69, 224, 192, .32); }
.create-btn:disabled { filter: grayscale(.4); }
.gallery-head { display: flex; align-items: center; gap: 8px; margin: 13px 0 8px; }
.image-status { flex: 1; margin: 0; font-size: .8rem; color: var(--muted); }
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 9px;
  max-height: 300px;
  overflow-y: auto;
  padding: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 178, 235, .25) transparent;
}
.thumb {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  overflow: hidden;
  background: #0a1122;
  cursor: zoom-in;
  transition: border-color .2s, transform .2s;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.thumb:hover { border-color: rgba(110, 168, 255, .55); transform: translateY(-1px); }
.thumb:hover img { transform: scale(1.06); }
.thumb.skeleton {
  cursor: default;
  background: linear-gradient(100deg, #0e1730 20%, #18264a 40%, #0e1730 60%);
  background-size: 220% 100%;
  animation: shimmer 1.3s linear infinite;
}
.gallery-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 22px 12px;
  border: 1px dashed rgba(255, 255, 255, .12);
  border-radius: 14px;
  color: var(--muted);
  font-size: .84rem;
  text-align: center;
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 7, 16, .72);
  backdrop-filter: blur(14px);
  animation: fade .2s ease both;
}
.lightbox-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: fit-content;
  max-width: min(94vw, 860px);
  max-height: 92dvh;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  background: rgba(17, 24, 43, .94);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  animation: pop .25s cubic-bezier(.2, .8, .2, 1) both;
}
.lightbox-card img {
  max-width: 100%;
  max-height: 68vh;
  object-fit: contain;
  border-radius: 14px;
  background: #070c18;
}
.lightbox-caption { margin: 0; font-size: .74rem; color: var(--muted); text-align: center; }
.lightbox-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(8, 13, 26, .82);
  color: #e6eeff;
  font-size: 1.2rem;
  line-height: 1;
  z-index: 1;
  transition: background .18s, transform .18s;
}
.lightbox-close:hover { background: rgba(255, 255, 255, .14); transform: rotate(90deg); }
.lightbox-actions { display: flex; gap: 8px; justify-content: flex-end; }
.button-link {
  display: inline-flex;
  align-items: center;
  padding: 9px 17px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .07);
  color: var(--text);
  font-size: .88rem;
  font-weight: 650;
  text-decoration: none;
  transition: background .18s;
}
.button-link:hover { background: rgba(255, 255, 255, .13); }
.danger {
  padding: 9px 17px;
  border-radius: 11px;
  border: 1px solid rgba(255, 80, 80, .32);
  background: rgba(255, 80, 80, .14);
  color: #ffb4b4;
  font-size: .88rem;
  font-weight: 650;
  transition: background .18s;
}
.danger:hover { background: rgba(255, 80, 80, .24); }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 80;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--stroke-strong);
  background: rgba(20, 29, 52, .96);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
  font-size: .84rem;
  color: var(--text);
  opacity: 0;
  transform: translate(-50%, 14px);
  transition: opacity .22s, transform .22s;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Login ---------- */
.login-page { padding: 20px; }
.login-card {
  width: min(400px, 100%);
  padding: 38px 30px 30px;
  text-align: center;
  border: 1px solid var(--stroke);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(24, 34, 58, .94), rgba(13, 19, 35, .97));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(18px);
  animation: rise .45s cubic-bezier(.2, .8, .2, 1) both;
}
.logo {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, #5b8dff, #9c7bff 55%, #45e0c0);
  color: #07101f;
  font-size: 1.7rem;
  font-weight: 900;
  box-shadow: 0 12px 30px rgba(91, 141, 255, .4), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.login-card h1 { margin: 0 0 6px; font-size: 1.45rem; letter-spacing: -.02em; }
.login-card p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.login-card .error {
  margin: 14px 0 0;
  padding: 9px 12px;
  border: 1px solid rgba(255, 123, 123, .3);
  border-radius: 11px;
  background: rgba(255, 90, 90, .1);
  color: #ffb4b4;
  font-size: .84rem;
}
.login-card form { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.login-card input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: rgba(8, 13, 26, .8);
  color: var(--text);
  font: inherit;
  font-size: .95rem;
  text-align: center;
  letter-spacing: .08em;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.login-card input:focus { border-color: rgba(110, 168, 255, .65); box-shadow: 0 0 0 4px rgba(110, 168, 255, .12); }
.login-card button {
  padding: 13px;
  border-radius: 12px;
  background: linear-gradient(135deg, #5b8dff, #8f6bff);
  font-weight: 700;
  font-size: .95rem;
  box-shadow: 0 8px 22px rgba(91, 141, 255, .32);
  transition: transform .18s, box-shadow .18s;
}
.login-card button:hover { transform: translateY(-1px); box-shadow: 0 11px 26px rgba(91, 141, 255, .44); }

/* ---------- Animations ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(40px, 30px, 0) scale(1.12); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
  body { display: block; padding: 0; }
  .app {
    width: 100%;
    height: var(--app-height, 100dvh);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .topbar { padding: 12px 14px; }
  .brand-mark { width: 38px; height: 38px; border-radius: 12px; font-size: 1.1rem; }
  .brand h1 { font-size: 1.05rem; }
  #status { font-size: .72rem; }
  .ghost { padding: 7px 10px; font-size: .76rem; }
  #chat { padding: 14px 12px 4px; gap: 13px; }
  .message { max-width: 94%; }
  .avatar { width: 28px; height: 28px; border-radius: 9px; font-size: .72rem; }
  .bubble { padding: 9px 12px 10px; }
  .msg-body { font-size: .93rem; }
  .composer-wrap { padding: 6px 10px calc(10px + env(safe-area-inset-bottom)); }
  .composer-box { padding: 6px 6px 6px 12px; flex-wrap: wrap; row-gap: 2px; }
  #message { font-size: 16px; flex-basis: 100%; max-height: 110px; }
  .composer-tools { width: 100%; justify-content: flex-start; }
  .composer-tools .send-btn { margin-left: auto; }
  .composer-tools { gap: 2px; }
  .tool-btn { padding: 6px 7px; font-size: .74rem; }
  .send-btn { padding: 8px 13px; font-size: .84rem; }
  .hint { display: none; }
  .composer-foot { justify-content: space-between; }
  .char-count { margin-left: 0; }
  .image-panel { margin: 2px 10px calc(10px + env(safe-area-inset-bottom)); }
  .image-panel summary { padding: 11px 12px; }
  .summary-icon { width: 34px; height: 34px; }
  .panel-body { padding: 0 12px 12px; padding-top: 11px; }
  .image-controls { flex-direction: column; align-items: stretch; }
  #image-size, .create-btn { width: 100%; min-height: 44px; }
  .gallery { grid-template-columns: repeat(3, 1fr); max-height: 34vh; gap: 7px; }
  .lightbox { padding: 0; }
  .lightbox-card {
    width: 100%;
    height: 100dvh;
    max-width: 100%;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
    justify-content: center;
    padding: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
  }
  .lightbox-card img { max-height: calc(100dvh - 170px); }
  .lightbox-close { top: calc(8px + env(safe-area-inset-top)); right: 10px; width: 42px; height: 42px; }
  .lightbox-actions a, .lightbox-actions button { flex: 1; justify-content: center; min-height: 46px; }
  .login-page { display: grid; place-items: center; min-height: 100dvh; padding: 16px; }
  .login-card { padding: 30px 22px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}