:root,[data-theme="dark"]{
  --bg:#0b0f14;
  --bg-sidebar:#111827;
  --bg-elevated:#1e293b;
  --bg-elevated-hover:#243044;
  --bg-active:#1e3a5f;
  --bg-bubble:#1e293b;
  --bg-composer:#111827;
  --bg-input:transparent;
  --bg-input-disabled:#0f172a;
  --bg-header-badge:#111827;
  --bg-overlay:#00000066;
  --text:#e2e8f0;
  --text-strong:#f1f5f9;
  --text-heading:#f8fafc;
  --text-muted:#94a3b8;
  --text-faint:#64748b;
  --text-brand:#60a5fa;
  --border:#1f2937;
  --border-strong:#334155;
  --accent:#2563eb;
  --accent-hover:#1d4ed8;
  --accent-soft:#3b82f6;
  --accent-disabled:#1e3a5f;
  --error:#f87171;
  --shadow-hero:#2563eb3a;
  --shadow-composer:#00000040;
  --shadow-sidebar:#00000066;
  --scrollbar:#334155;
  --color-scheme:dark;
  --fx-opacity:0;
  --spark-opacity:0;
  --glow-a:transparent;
  --glow-b:transparent;
  --glow-c:transparent;
  --pattern-dot:transparent;
  --card-shine:transparent;
}
[data-theme="light"]{
  --bg:#fafbfc;
  --bg-sidebar:#f3f5f8;
  --bg-elevated:#ffffff;
  --bg-elevated-hover:#eef2f7;
  --bg-active:#e5edfa;
  --bg-bubble:#eef2f7;
  --bg-composer:#ffffff;
  --bg-input:transparent;
  --bg-input-disabled:#f8fafc;
  --bg-header-badge:#ffffff;
  --bg-overlay:#0f172a33;
  --text:#1e293b;
  --text-strong:#0f172a;
  --text-heading:#0f172a;
  --text-muted:#64748b;
  --text-faint:#94a3b8;
  --text-brand:#2563eb;
  --border:#e2e8f0;
  --border-strong:#d0d8e4;
  --accent:#245cbd;
  --accent-hover:#1d4ed8;
  --accent-soft:#93b4e8;
  --accent-disabled:#91aad5;
  --error:#b91c1c;
  --shadow-hero:#2156b62a;
  --shadow-composer:#1d396712;
  --shadow-sidebar:#142a4822;
  --scrollbar:#cbd5e1;
  --color-scheme:light;
  --fx-opacity:0;
  --spark-opacity:0;
  --glow-a:transparent;
  --glow-b:transparent;
  --glow-c:transparent;
  --pattern-dot:transparent;
  --card-shine:transparent;
}
[data-theme="midnight"]{
  --bg:#070b14;
  --bg-sidebar:#0c1220;
  --bg-elevated:#152038;
  --bg-elevated-hover:#1a2944;
  --bg-active:#1a3360;
  --bg-bubble:#152038;
  --bg-composer:#0c1220;
  --bg-input:transparent;
  --bg-input-disabled:#0a101c;
  --bg-header-badge:#0c1220;
  --bg-overlay:#00000077;
  --text:#dbe7ff;
  --text-strong:#eef4ff;
  --text-heading:#f5f8ff;
  --text-muted:#8fa3c4;
  --text-faint:#5f7396;
  --text-brand:#7db4ff;
  --border:#1a2740;
  --border-strong:#2a3d5f;
  --accent:#3b82f6;
  --accent-hover:#2563eb;
  --accent-soft:#60a5fa;
  --accent-disabled:#1e3a5f;
  --error:#f87171;
  --shadow-hero:#3b82f640;
  --shadow-composer:#00000055;
  --shadow-sidebar:#00000077;
  --scrollbar:#2a3d5f;
  --color-scheme:dark;
  --fx-opacity:.55;
  --spark-opacity:0;
  --glow-a:#3b82f628;
  --glow-b:#60a5fa18;
  --glow-c:#2563eb14;
  --pattern-dot:#7db4ff14;
  --card-shine:#60a5fa12;
}
[data-theme="forest"]{
  --bg:#0a1210;
  --bg-sidebar:#101a17;
  --bg-elevated:#1a2b24;
  --bg-elevated-hover:#213530;
  --bg-active:#1d3d32;
  --bg-bubble:#1a2b24;
  --bg-composer:#101a17;
  --bg-input:transparent;
  --bg-input-disabled:#0d1613;
  --bg-header-badge:#101a17;
  --bg-overlay:#00000066;
  --text:#dcece5;
  --text-strong:#eef7f2;
  --text-heading:#f4faf7;
  --text-muted:#8eaaa0;
  --text-faint:#648076;
  --text-brand:#5eead4;
  --border:#1c2e27;
  --border-strong:#2d4a3f;
  --accent:#10b981;
  --accent-hover:#059669;
  --accent-soft:#34d399;
  --accent-disabled:#14532d;
  --error:#f87171;
  --shadow-hero:#10b9813a;
  --shadow-composer:#00000040;
  --shadow-sidebar:#00000066;
  --scrollbar:#2d4a3f;
  --color-scheme:dark;
  --fx-opacity:.55;
  --spark-opacity:0;
  --glow-a:#10b98128;
  --glow-b:#34d39918;
  --glow-c:#05966914;
  --pattern-dot:#5eead414;
  --card-shine:#34d39912;
}
[data-theme="sunset"]{
  --bg:#140f0d;
  --bg-sidebar:#1c1512;
  --bg-elevated:#2a1f1a;
  --bg-elevated-hover:#34261f;
  --bg-active:#4a2c22;
  --bg-bubble:#2a1f1a;
  --bg-composer:#1c1512;
  --bg-input:transparent;
  --bg-input-disabled:#17110f;
  --bg-header-badge:#1c1512;
  --bg-overlay:#00000066;
  --text:#f3e8e2;
  --text-strong:#faf4f0;
  --text-heading:#fff8f4;
  --text-muted:#b9a094;
  --text-faint:#8a7164;
  --text-brand:#fb923c;
  --border:#2f231d;
  --border-strong:#4a372c;
  --accent:#f97316;
  --accent-hover:#ea580c;
  --accent-soft:#fb923c;
  --accent-disabled:#7c2d12;
  --error:#f87171;
  --shadow-hero:#f973163a;
  --shadow-composer:#00000040;
  --shadow-sidebar:#00000066;
  --scrollbar:#4a372c;
  --color-scheme:dark;
  --fx-opacity:.6;
  --spark-opacity:.15;
  --glow-a:#f973162c;
  --glow-b:#fb923c1a;
  --glow-c:#ea580c14;
  --pattern-dot:#fb923c16;
  --card-shine:#fb923c14;
}
[data-theme="orchid"]{
  --bg:#120b18;
  --bg-sidebar:#1a1024;
  --bg-elevated:#2a1a3d;
  --bg-elevated-hover:#34224b;
  --bg-active:#4a2a6e;
  --bg-bubble:#2a1a3d;
  --bg-composer:#1a1024;
  --bg-input:transparent;
  --bg-input-disabled:#140c1c;
  --bg-header-badge:#1a1024;
  --bg-overlay:#00000070;
  --text:#efe6fb;
  --text-strong:#f7f0ff;
  --text-heading:#fbf7ff;
  --text-muted:#b5a0cc;
  --text-faint:#846e9c;
  --text-brand:#c084fc;
  --border:#2e1f42;
  --border-strong:#4a3368;
  --accent:#a855f7;
  --accent-hover:#9333ea;
  --accent-soft:#c084fc;
  --accent-disabled:#581c87;
  --error:#fb7185;
  --shadow-hero:#a855f745;
  --shadow-composer:#00000050;
  --shadow-sidebar:#00000070;
  --scrollbar:#4a3368;
  --color-scheme:dark;
  --fx-opacity:.7;
  --spark-opacity:.35;
  --glow-a:#a855f730;
  --glow-b:#c084fc20;
  --glow-c:#9333ea18;
  --pattern-dot:#c084fc18;
  --card-shine:#c084fc16;
}
[data-theme="aqua"]{
  --bg:#061316;
  --bg-sidebar:#0b1c21;
  --bg-elevated:#123038;
  --bg-elevated-hover:#173942;
  --bg-active:#1a4f5c;
  --bg-bubble:#123038;
  --bg-composer:#0b1c21;
  --bg-input:transparent;
  --bg-input-disabled:#09171b;
  --bg-header-badge:#0b1c21;
  --bg-overlay:#00000070;
  --text:#d9f6fb;
  --text-strong:#ecfcff;
  --text-heading:#f4feff;
  --text-muted:#7fb8c4;
  --text-faint:#568995;
  --text-brand:#22d3ee;
  --border:#183740;
  --border-strong:#2a5560;
  --accent:#06b6d4;
  --accent-hover:#0891b2;
  --accent-soft:#22d3ee;
  --accent-disabled:#155e75;
  --error:#f87171;
  --shadow-hero:#06b6d445;
  --shadow-composer:#00000050;
  --shadow-sidebar:#00000070;
  --scrollbar:#2a5560;
  --color-scheme:dark;
  --fx-opacity:.7;
  --spark-opacity:.3;
  --glow-a:#06b6d430;
  --glow-b:#22d3ee20;
  --glow-c:#0891b218;
  --pattern-dot:#22d3ee18;
  --card-shine:#22d3ee16;
}
[data-theme="berry"]{
  --bg:#160914;
  --bg-sidebar:#21101c;
  --bg-elevated:#351828;
  --bg-elevated-hover:#421f32;
  --bg-active:#5c2444;
  --bg-bubble:#351828;
  --bg-composer:#21101c;
  --bg-input:transparent;
  --bg-input-disabled:#180c15;
  --bg-header-badge:#21101c;
  --bg-overlay:#00000070;
  --text:#fce7f3;
  --text-strong:#fff1f8;
  --text-heading:#fff7fb;
  --text-muted:#c89bb3;
  --text-faint:#95637c;
  --text-brand:#f472b6;
  --border:#3a1f30;
  --border-strong:#5a314a;
  --accent:#ec4899;
  --accent-hover:#db2777;
  --accent-soft:#f472b6;
  --accent-disabled:#9d174d;
  --error:#fb7185;
  --shadow-hero:#ec489945;
  --shadow-composer:#00000050;
  --shadow-sidebar:#00000070;
  --scrollbar:#5a314a;
  --color-scheme:dark;
  --fx-opacity:.75;
  --spark-opacity:.4;
  --glow-a:#ec489930;
  --glow-b:#f472b620;
  --glow-c:#db277718;
  --pattern-dot:#f472b618;
  --card-shine:#f472b616;
}
[data-theme="cotton"]{
  --bg:#fff5f8;
  --bg-sidebar:#ffe8f0;
  --bg-elevated:#ffffff;
  --bg-elevated-hover:#ffd6e7;
  --bg-active:#ffc2db;
  --bg-bubble:#ffe0ec;
  --bg-composer:#ffffff;
  --bg-input:transparent;
  --bg-input-disabled:#fff0f5;
  --bg-header-badge:#ffffff;
  --bg-overlay:#f472b633;
  --text:#5c3a4a;
  --text-strong:#3d2432;
  --text-heading:#2a1822;
  --text-muted:#a07088;
  --text-faint:#c49aab;
  --text-brand:#ec4899;
  --border:#f8c8d8;
  --border-strong:#f0a8c0;
  --accent:#f472b6;
  --accent-hover:#ec4899;
  --accent-soft:#f9a8d4;
  --accent-disabled:#f0a8c0;
  --error:#e11d48;
  --shadow-hero:#f472b635;
  --shadow-composer:#f472b618;
  --shadow-sidebar:#f472b622;
  --scrollbar:#f0a8c0;
  --color-scheme:light;
  --fx-opacity:1;
  --spark-opacity:.85;
  --glow-a:#ff8fc9aa;
  --glow-b:#ffb1c6aa;
  --glow-c:#d8b4fe99;
  --pattern-dot:#ec489955;
  --card-shine:#fff8fbcc;
}
[data-theme="peach"]{
  --bg:#fff7f2;
  --bg-sidebar:#ffe8dc;
  --bg-elevated:#ffffff;
  --bg-elevated-hover:#ffd8c4;
  --bg-active:#ffc8a8;
  --bg-bubble:#ffe4d4;
  --bg-composer:#ffffff;
  --bg-input:transparent;
  --bg-input-disabled:#fff2ea;
  --bg-header-badge:#ffffff;
  --bg-overlay:#fb923c33;
  --text:#5c3d2e;
  --text-strong:#3d261c;
  --text-heading:#2a1a12;
  --text-muted:#a07860;
  --text-faint:#c4a088;
  --text-brand:#f97316;
  --border:#f5d0b8;
  --border-strong:#e8b090;
  --accent:#fb923c;
  --accent-hover:#f97316;
  --accent-soft:#fdba74;
  --accent-disabled:#e8b090;
  --error:#e11d48;
  --shadow-hero:#fb923c35;
  --shadow-composer:#fb923c16;
  --shadow-sidebar:#fb923c20;
  --scrollbar:#e8b090;
  --color-scheme:light;
  --fx-opacity:1;
  --spark-opacity:.8;
  --glow-a:#ffb068aa;
  --glow-b:#ff9b8aaa;
  --glow-c:#ffe08a99;
  --pattern-dot:#f9731655;
  --card-shine:#fffaf5cc;
}
[data-theme="mint"]{
  --bg:#f2fbf7;
  --bg-sidebar:#dff5eb;
  --bg-elevated:#ffffff;
  --bg-elevated-hover:#c8eedd;
  --bg-active:#a8e4cc;
  --bg-bubble:#d4f3e6;
  --bg-composer:#ffffff;
  --bg-input:transparent;
  --bg-input-disabled:#eaf9f2;
  --bg-header-badge:#ffffff;
  --bg-overlay:#34d39933;
  --text:#2d4a3f;
  --text-strong:#1a3028;
  --text-heading:#122018;
  --text-muted:#5e8878;
  --text-faint:#8aafa0;
  --text-brand:#10b981;
  --border:#b8e4d0;
  --border-strong:#8ed4b8;
  --accent:#34d399;
  --accent-hover:#10b981;
  --accent-soft:#6ee7b7;
  --accent-disabled:#8ed4b8;
  --error:#e11d48;
  --shadow-hero:#34d39935;
  --shadow-composer:#34d39916;
  --shadow-sidebar:#34d39920;
  --scrollbar:#8ed4b8;
  --color-scheme:light;
  --fx-opacity:1;
  --spark-opacity:.8;
  --glow-a:#5eead0aa;
  --glow-b:#86efacaa;
  --glow-c:#a7f3d099;
  --pattern-dot:#10b98155;
  --card-shine:#f5fffacc;
}
[data-theme="lavender"]{
  --bg:#f7f4ff;
  --bg-sidebar:#ebe4ff;
  --bg-elevated:#ffffff;
  --bg-elevated-hover:#ddd2ff;
  --bg-active:#cbb8ff;
  --bg-bubble:#e6dcff;
  --bg-composer:#ffffff;
  --bg-input:transparent;
  --bg-input-disabled:#f2edff;
  --bg-header-badge:#ffffff;
  --bg-overlay:#a78bfa33;
  --text:#3d3460;
  --text-strong:#2a2248;
  --text-heading:#1c1635;
  --text-muted:#7a70a0;
  --text-faint:#a098c0;
  --text-brand:#8b5cf6;
  --border:#d4c8f5;
  --border-strong:#b8a8e8;
  --accent:#a78bfa;
  --accent-hover:#8b5cf6;
  --accent-soft:#c4b5fd;
  --accent-disabled:#b8a8e8;
  --error:#e11d48;
  --shadow-hero:#a78bfa35;
  --shadow-composer:#a78bfa16;
  --shadow-sidebar:#a78bfa20;
  --scrollbar:#b8a8e8;
  --color-scheme:light;
  --fx-opacity:1;
  --spark-opacity:.85;
  --glow-a:#c4b5fdaa;
  --glow-b:#f0abfcaa;
  --glow-c:#a5b4fc99;
  --pattern-dot:#8b5cf655;
  --card-shine:#fbf8ffcc;
}
[data-theme="critters"]{
  --bg:#fff8f2;
  --bg-sidebar:#ffe9d8;
  --bg-elevated:#ffffff;
  --bg-elevated-hover:#ffe0c8;
  --bg-active:#ffd0a8;
  --bg-bubble:#ffe8d4;
  --bg-composer:#ffffff;
  --bg-input:transparent;
  --bg-input-disabled:#fff4ea;
  --bg-header-badge:#ffffff;
  --bg-overlay:#fb923c33;
  --text:#5a3d2e;
  --text-strong:#3b261c;
  --text-heading:#2a1a12;
  --text-muted:#a07a60;
  --text-faint:#c4a088;
  --text-brand:#f97316;
  --border:#f0d0b8;
  --border-strong:#e0b090;
  --accent:#f59e0b;
  --accent-hover:#d97706;
  --accent-soft:#fbbf24;
  --accent-disabled:#e0b090;
  --error:#e11d48;
  --shadow-hero:#f59e0b40;
  --shadow-composer:#f59e0b18;
  --shadow-sidebar:#f59e0b22;
  --scrollbar:#e0b090;
  --color-scheme:light;
  --fx-opacity:1;
  --spark-opacity:0;
  --glow-a:#fdba74bb;
  --glow-b:#f9a8d4aa;
  --glow-c:#86efac99;
  --pattern-dot:#f59e0b44;
  --card-shine:#fffaf3cc;
}

*,*::before,*::after{box-sizing:border-box}
html{color-scheme:var(--color-scheme)}
body{
  margin:0;
  background:
    radial-gradient(900px 520px at 12% -8%, var(--glow-a), transparent 60%),
    radial-gradient(700px 480px at 92% 8%, var(--glow-b), transparent 55%),
    radial-gradient(640px 420px at 70% 100%, var(--glow-c), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  position:relative;
  min-height:100dvh;
}
button,textarea,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:default}
a{color:inherit}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent-soft);outline-offset:2px}

.layout{height:100dvh;display:flex;position:relative;overflow:hidden;z-index:1}

/* ——— Theme atmosphere ——— */
.theme-fx{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:5;
  overflow:hidden;
  opacity:var(--fx-opacity);
  transition:opacity .35s ease;
}
.theme-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(36px);
  opacity:.72;
  mix-blend-mode:multiply;
  will-change:transform;
}
[data-theme="midnight"] .theme-blob,
[data-theme="forest"] .theme-blob,
[data-theme="sunset"] .theme-blob,
[data-theme="orchid"] .theme-blob,
[data-theme="aqua"] .theme-blob,
[data-theme="berry"] .theme-blob{
  mix-blend-mode:screen;
  opacity:.55;
}
.theme-blob-a{
  width:min(480px,78vw);
  height:min(480px,78vw);
  left:-10%;
  top:-8%;
  background:var(--glow-a);
  animation:blob-drift 18s ease-in-out infinite;
}
.theme-blob-b{
  width:min(420px,68vw);
  height:min(420px,68vw);
  right:-8%;
  top:16%;
  background:var(--glow-b);
  animation:blob-drift 22s ease-in-out infinite reverse;
}
.theme-blob-c{
  width:min(520px,80vw);
  height:min(360px,55vw);
  left:28%;
  bottom:-14%;
  background:var(--glow-c);
  animation:blob-drift 26s ease-in-out infinite;
}
.theme-spark{
  position:absolute;
  font-size:20px;
  line-height:1;
  color:var(--text-brand);
  opacity:var(--spark-opacity);
  filter:drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 55%, transparent));
  animation:spark-float 7s ease-in-out infinite;
  z-index:1;
}
.theme-spark.s1{left:18%;top:16%;font-size:16px;animation-delay:0s}
.theme-spark.s2{right:8%;top:20%;font-size:18px;animation-delay:.8s}
.theme-spark.s3{left:36%;bottom:26%;font-size:15px;animation-delay:1.4s}
.theme-spark.s4{right:14%;bottom:16%;font-size:17px;animation-delay:2s}
.theme-spark.s5{left:58%;top:12%;font-size:14px;animation-delay:2.6s}
.theme-spark.s6{right:32%;top:38%;font-size:16px;animation-delay:3.2s}
.theme-animal{
  display:none;
  position:absolute;
  width:clamp(58px,9vw,92px);
  height:clamp(58px,9vw,92px);
  border-radius:26px;
  object-fit:cover;
  box-shadow:
    0 12px 28px #00000022,
    0 0 0 3px #ffffffdd;
  animation:animal-bob 6.5s ease-in-out infinite;
  z-index:2;
}
[data-theme="critters"] .theme-animal{display:block}
[data-theme="critters"] .theme-spark{display:none}
.theme-animal.a1{left:4%;top:12%;animation-delay:0s;--tilt:-8deg}
.theme-animal.a2{right:5%;top:18%;animation-delay:.7s;--tilt:10deg}
.theme-animal.a3{left:8%;bottom:22%;animation-delay:1.3s;--tilt:6deg}
.theme-animal.a4{right:7%;bottom:14%;animation-delay:1.9s;--tilt:-12deg}
.theme-animal.a5{left:42%;top:8%;animation-delay:2.4s;width:clamp(48px,7vw,72px);height:clamp(48px,7vw,72px);--tilt:4deg}
.theme-animal.a6{right:22%;top:40%;animation-delay:3s;width:clamp(50px,7.5vw,76px);height:clamp(50px,7.5vw,76px);--tilt:-6deg}
[data-theme="dark"] .theme-fx,
[data-theme="light"] .theme-fx{display:none}
@keyframes blob-drift{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(28px,-18px) scale(1.06)}
  66%{transform:translate(-18px,22px) scale(.96)}
}
@keyframes spark-float{
  0%,100%{transform:translateY(0) rotate(0deg);opacity:var(--spark-opacity)}
  50%{transform:translateY(-10px) rotate(8deg);opacity:calc(var(--spark-opacity) * .55)}
}
@keyframes animal-bob{
  0%,100%{transform:translateY(0) rotate(var(--tilt,0deg))}
  50%{transform:translateY(-14px) rotate(var(--tilt,0deg))}
}
@media (prefers-reduced-motion:reduce){
  .theme-blob,.theme-spark,.theme-animal{animation:none}
}

/* ——— Sidebar ——— */
aside{
  width:280px;
  background:
    radial-gradient(280px 180px at 0% 0%, var(--glow-a), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--bg-sidebar)), var(--bg-sidebar));
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  flex:none;
  z-index:6;
  position:relative;
  overflow:hidden;
  transition:width .22s ease,border-color .22s ease,opacity .18s ease;
}
.layout.sidebar-collapsed aside{
  width:0;
  border-right-color:transparent;
  opacity:0;
  pointer-events:none;
}
.layout.sidebar-collapsed #open-menu{display:grid}
.sidebar-toggle{
  margin-left:auto;
  width:34px;
  height:34px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--text-muted);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.sidebar-toggle:hover{background:var(--bg-elevated);color:var(--text-strong)}
.sidebar-toggle:focus-visible{outline:2px solid var(--accent-soft);outline-offset:2px}
aside::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.9;
  background-image:radial-gradient(var(--pattern-dot) 1.1px, transparent 1.1px);
  background-size:18px 18px;
  mask-image:linear-gradient(180deg,#000 0%, transparent 78%);
  z-index:0;
}
aside > *{position:relative;z-index:1}
.sidebar-top{padding:20px 16px 12px}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:20px;
  font-weight:800;
  letter-spacing:-.04em;
  color:var(--text-strong);
  min-height:40px;
  width:100%;
}
.brand-mark{
  height:40px;
  width:auto;
  display:block;
  background:transparent;
  border-radius:0;
  flex:none;
  object-fit:contain;
}

.new{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  margin-top:18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) calc(var(--fx-opacity) * 16%), transparent), transparent 60%),
    var(--bg-elevated);
  border:1px solid var(--border-strong);
  border-radius:12px;
  padding:12px 14px;
  text-align:left;
  color:var(--text-strong);
  font-weight:600;
  box-shadow:0 6px 16px color-mix(in srgb, var(--accent) calc(var(--fx-opacity) * 10%), transparent);
  font-size:13px;
  transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
.new-icon{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:7px;
  background:var(--accent);
  color:#fff;
  font-size:14px;
  line-height:1;
}
.new:hover{border-color:var(--accent-soft);background:var(--bg-elevated-hover)}
.new:active{transform:scale(.98)}

.sidebar-history{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:4px 10px 8px;
}
.label{
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-faint);
  font-weight:700;
  margin:8px 8px 8px;
}
.history-search{padding:0 6px 10px}
.history-search input{
  width:100%;
  border:1px solid var(--border-strong);
  border-radius:10px;
  background:var(--bg);
  color:var(--text-strong);
  padding:9px 12px;
  font-size:12px;
  transition:border-color .15s ease;
}
.history-search input::placeholder{color:var(--text-faint)}
.history-search input:focus{border-color:var(--accent-soft)}
nav{flex:1;overflow:auto;padding:0 2px 8px;scrollbar-width:thin;scrollbar-color:var(--scrollbar) transparent}
nav::-webkit-scrollbar{width:6px}
nav::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:99px}
.history-empty{
  margin:4px 8px 0;
  padding:14px 12px;
  border:1px dashed var(--border-strong);
  border-radius:12px;
  color:var(--text-faint);
  font-size:12px;
  line-height:1.55;
}
.history-row{
  display:flex;
  align-items:center;
  gap:2px;
  border-radius:10px;
  margin-bottom:2px;
  transition:background .15s ease;
}
.history-row:hover{background:var(--bg-elevated)}
.history-row.active{background:var(--bg-active)}
.history-row.renaming{background:var(--bg-elevated)}
.history-row button{border:0;background:transparent}
.chat-title{
  flex:1;
  min-width:0;
  text-align:left;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  padding:10px 8px 10px 12px;
  color:var(--text-muted);
  font-size:13px;
  border-radius:10px;
  transition:color .15s ease;
}
.history-row.active .chat-title,
.history-row:hover .chat-title{color:var(--text-strong)}
.chat-rename-input{
  flex:1;
  min-width:0;
  margin:4px 4px 4px 8px;
  border:1px solid var(--accent-soft);
  border-radius:8px;
  background:var(--bg);
  color:var(--text-strong);
  padding:7px 10px;
  font-size:13px;
}
.history-actions{
  display:flex;
  align-items:center;
  gap:1px;
  margin-right:4px;
  flex:none;
}
.rename,.delete{
  color:var(--text-faint);
  width:28px;
  height:28px;
  border-radius:8px;
  opacity:0;
  display:grid;
  place-items:center;
  transition:opacity .15s ease,color .15s ease,background .15s ease;
}
.rename{font-size:13px}
.delete{font-size:17px}
.history-row:hover .rename,
.history-row:hover .delete,
.history-row:focus-within .rename,
.history-row:focus-within .delete,
.history-row.active .rename,
.history-row.active .delete,
.history-row.renaming .rename,
.history-row.renaming .delete{opacity:1}
.rename:hover{color:var(--text-brand);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.delete:hover{color:var(--error);background:color-mix(in srgb,var(--error) 12%,transparent)}

.sidebar-footer{
  border-top:1px solid var(--border);
  padding:14px 14px 16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  position:relative;
  z-index:8;
  background:inherit;
}
.account-panel{display:grid;gap:10px}
.account-trigger{
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  border:0;
  background:transparent;
  color:inherit;
  padding:0 2px;
  text-align:left;
  cursor:pointer;
  border-radius:8px;
}
.account-trigger:hover .status{color:var(--text-strong)}
.account-trigger:focus-visible{
  outline:2px solid var(--accent-soft);
  outline-offset:2px;
}
.account-trigger .status{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.account-trigger-chevron{
  color:var(--text-muted);
  display:grid;
  place-items:center;
  flex:none;
  transition:transform .18s ease;
}
.account-trigger[aria-expanded="false"] .account-trigger-chevron{transform:rotate(-90deg)}
.account-body{display:grid;gap:8px}
.status{
  font-size:12px;
  color:var(--text-muted);
  padding:0 2px;
  line-height:1.4;
}
.theme-picker{padding:0;position:relative}
.theme-trigger{
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border-strong);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    var(--bg-elevated);
  color:var(--text-strong);
  border-radius:10px;
  padding:6px 8px;
  text-align:left;
  transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
.theme-trigger:hover{border-color:var(--accent-soft);background:var(--bg-elevated-hover)}
.theme-trigger[aria-expanded="true"]{
  border-color:var(--accent-soft);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent);
}
.theme-trigger-swatch,
.theme-option-swatch,
.theme-swatch{
  --swatch:#64748b;
  width:28px;
  height:28px;
  border-radius:999px;
  flex:none;
  background:var(--swatch);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 0 0 1px rgba(0,0,0,.08);
}
.theme-trigger-swatch{
  width:18px;
  height:18px;
}
.theme-trigger-meta{
  flex:1;
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:6px;
}
.theme-trigger-kicker{
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-faint);
  font-weight:700;
  flex:none;
}
.theme-trigger-name{
  font-size:12px;
  font-weight:650;
  color:var(--text-strong);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.theme-trigger-chevron{
  color:var(--text-muted);
  display:grid;
  place-items:center;
  transition:transform .18s ease;
}
.theme-trigger-chevron svg{width:14px;height:14px}
.theme-trigger[aria-expanded="true"] .theme-trigger-chevron{transform:rotate(180deg)}
.theme-panel{
  position:absolute;
  left:0;
  right:0;
  bottom:calc(100% + 10px);
  z-index:20;
  background:var(--bg-composer);
  border:1px solid var(--border-strong);
  border-radius:16px;
  box-shadow:0 18px 48px var(--shadow-sidebar);
  overflow:hidden;
  animation:theme-panel-in .16s ease;
}
.theme-panel-down{
  bottom:auto;
  top:calc(100% + 10px);
  width:min(320px,80vw);
  right:0;
  left:auto;
}
.theme-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px 10px;
  border-bottom:1px solid var(--border);
}
.theme-panel-head strong{
  display:block;
  font-size:14px;
  color:var(--text-heading);
}
.theme-panel-head p{
  margin:3px 0 0;
  font-size:12px;
  color:var(--text-muted);
}
.theme-panel-close{
  width:28px;
  height:28px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--text-muted);
  font-size:18px;
  display:grid;
  place-items:center;
}
.theme-panel-close:hover{background:var(--bg-elevated);color:var(--text-strong)}
.theme-panel-body{
  max-height:min(52vh,420px);
  overflow:auto;
  padding:10px;
  display:grid;
  gap:12px;
  scrollbar-width:thin;
  scrollbar-color:var(--scrollbar) transparent;
}
.theme-group{display:grid;gap:6px}
.theme-group-label{
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-faint);
  font-weight:700;
  padding:0 4px;
}
.theme-group-grid{display:grid;gap:6px}
.theme-option{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  width:100%;
  border:1px solid var(--border);
  background:var(--bg-elevated);
  color:var(--text);
  border-radius:12px;
  padding:9px 10px;
  text-align:left;
  transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
.theme-option:hover{
  border-color:var(--accent-soft);
  background:var(--bg-elevated-hover);
  transform:translateY(-1px);
}
.theme-option[aria-pressed="true"]{
  border-color:var(--accent-soft);
  background:color-mix(in srgb, var(--accent) 12%, var(--bg-elevated));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.theme-option-copy{min-width:0;display:grid;gap:1px}
.theme-option-name{
  font-size:13px;
  font-weight:700;
  color:var(--text-strong);
}
.theme-option-desc{
  font-size:11px;
  color:var(--text-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.theme-option-check{
  width:18px;
  color:var(--text-brand);
  opacity:0;
  font-size:14px;
  font-weight:800;
}
.theme-option[aria-pressed="true"] .theme-option-check{opacity:1}
@keyframes theme-panel-in{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}
.theme-trigger-swatch[data-theme-id="auto"],
.theme-option-swatch[data-theme-id="auto"],
.theme-swatch[data-theme-id="auto"]{
  --swatch:linear-gradient(135deg,#0b0f14 50%,#f3f5f8 50%);
  background:var(--swatch);
}
.theme-trigger-swatch[data-theme-id="dark"],
.theme-option-swatch[data-theme-id="dark"],
.theme-swatch[data-theme-id="dark"]{--swatch:#0b0f14}
.theme-trigger-swatch[data-theme-id="light"],
.theme-option-swatch[data-theme-id="light"],
.theme-swatch[data-theme-id="light"]{--swatch:#f3f5f8;box-shadow:inset 0 0 0 1px #cbd5e1}
.theme-trigger-swatch[data-theme-id="midnight"],
.theme-option-swatch[data-theme-id="midnight"],
.theme-swatch[data-theme-id="midnight"]{--swatch:#1a3360}
.theme-trigger-swatch[data-theme-id="forest"],
.theme-option-swatch[data-theme-id="forest"],
.theme-swatch[data-theme-id="forest"]{--swatch:#10b981}
.theme-trigger-swatch[data-theme-id="sunset"],
.theme-option-swatch[data-theme-id="sunset"],
.theme-swatch[data-theme-id="sunset"]{--swatch:#f97316}
.theme-trigger-swatch[data-theme-id="orchid"],
.theme-option-swatch[data-theme-id="orchid"],
.theme-swatch[data-theme-id="orchid"]{--swatch:#a855f7}
.theme-trigger-swatch[data-theme-id="aqua"],
.theme-option-swatch[data-theme-id="aqua"],
.theme-swatch[data-theme-id="aqua"]{--swatch:#06b6d4}
.theme-trigger-swatch[data-theme-id="berry"],
.theme-option-swatch[data-theme-id="berry"],
.theme-swatch[data-theme-id="berry"]{--swatch:#ec4899}
.theme-trigger-swatch[data-theme-id="cotton"],
.theme-option-swatch[data-theme-id="cotton"],
.theme-swatch[data-theme-id="cotton"]{--swatch:#f9a8d4;box-shadow:inset 0 0 0 1px #f0a8c0}
.theme-trigger-swatch[data-theme-id="peach"],
.theme-option-swatch[data-theme-id="peach"],
.theme-swatch[data-theme-id="peach"]{--swatch:#fdba74;box-shadow:inset 0 0 0 1px #e8b090}
.theme-trigger-swatch[data-theme-id="mint"],
.theme-option-swatch[data-theme-id="mint"],
.theme-swatch[data-theme-id="mint"]{--swatch:#6ee7b7;box-shadow:inset 0 0 0 1px #8ed4b8}
.theme-trigger-swatch[data-theme-id="lavender"],
.theme-option-swatch[data-theme-id="lavender"],
.theme-swatch[data-theme-id="lavender"]{--swatch:#c4b5fd;box-shadow:inset 0 0 0 1px #b8a8e8}
.theme-trigger-swatch[data-theme-id="critters"],
.theme-option-swatch[data-theme-id="critters"],
.theme-swatch[data-theme-id="critters"]{
  --swatch:#fbbf24;
  box-shadow:inset 0 0 0 1px #e0b090;
  background:
    radial-gradient(circle at 30% 35%,#fff 22%,transparent 23%),
    radial-gradient(circle at 70% 35%,#fff 18%,transparent 19%),
    var(--swatch);
}

.sidebar-backdrop{
  position:fixed;
  inset:0;
  background:var(--bg-overlay);
  z-index:5;
  backdrop-filter:blur(2px);
}

/* ——— Main ——— */
main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(700px 380px at 80% -10%, var(--glow-b), transparent 60%),
    radial-gradient(560px 320px at 10% 90%, var(--glow-c), transparent 55%),
    color-mix(in srgb, var(--bg) 92%, transparent);
  position:relative;
}
main::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:radial-gradient(var(--pattern-dot) 1.35px, transparent 1.35px);
  background-size:20px 20px;
  opacity:1;
  mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 78%, transparent 100%);
}
main > *{position:relative;z-index:1}
header{
  height:64px;
  border-bottom:1px solid var(--border);
  padding:0 28px;
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--text-strong);
  flex:none;
  position:relative;
  z-index:2;
  background:linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, transparent), color-mix(in srgb, var(--bg) 70%, transparent));
  backdrop-filter:blur(10px);
}
.header-title{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}
.header-title strong{font-size:15px;letter-spacing:-.02em;line-height:1.2}
.header-sub{
  font-size:11px;
  color:var(--text-faint);
  line-height:1.2;
}
.header-right{display:flex;align-items:center;gap:12px;margin-left:auto}
.model-picker{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--text-muted);
}
.model-picker select{
  max-width:200px;
  border:1px solid var(--border-strong);
  border-radius:10px;
  background:var(--bg-composer);
  color:var(--text-strong);
  padding:8px 12px;
  font-size:12px;
  transition:border-color .15s ease;
}
.model-picker select:hover:not(:disabled){border-color:var(--accent-soft)}
.model-picker select:disabled{opacity:.55}

.scroll{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:0 24px;
  scrollbar-width:thin;
  scrollbar-color:var(--scrollbar) transparent;
  position:relative;
  z-index:1;
}
.scroll::-webkit-scrollbar{width:8px}
.scroll::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:99px}

.welcome{
  max-width:720px;
  margin:0 auto;
  text-align:center;
  padding:clamp(40px,12vh,112px) 8px 28px;
  position:relative;
  z-index:1;
}
.hero{
  display:block;
  width:auto;
  height:112px;
  margin:0 auto 22px;
  object-fit:contain;
  background:transparent;
  border-radius:0;
  flex:none;
  box-shadow:none;
}
.welcome h1{
  font-size:clamp(26px,3.2vw,36px);
  letter-spacing:-.04em;
  margin:0;
  color:var(--text-heading);
  line-height:1.15;
}
.welcome p{
  color:var(--text-muted);
  font-size:14px;
  margin:12px auto 28px;
  max-width:420px;
  line-height:1.6;
}
.suggestions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  max-width:640px;
  margin:0 auto;
  text-align:left;
}
.suggestions button{
  background:
    linear-gradient(145deg, var(--card-shine), transparent 55%),
    var(--bg-composer);
  border:1px solid var(--border-strong);
  border-radius:14px;
  padding:14px 14px 14px 12px;
  color:var(--text);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  box-shadow:0 8px 22px color-mix(in srgb, var(--accent) calc(var(--fx-opacity) * 10%), transparent);
  transition:border-color .15s ease,background .15s ease,transform .15s ease,box-shadow .15s ease;
  position:relative;
  overflow:hidden;
}
.suggestions button::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 30%, color-mix(in srgb, #fff calc(var(--fx-opacity) * 28%), transparent) 48%, transparent 62%);
  transform:translateX(-120%);
  transition:transform .55s ease;
  pointer-events:none;
}
.suggestions button:hover{
  border-color:var(--accent-soft);
  background:var(--bg-elevated);
  transform:translateY(-1px);
  box-shadow:0 12px 28px color-mix(in srgb, var(--accent) calc(var(--fx-opacity) * 18%), transparent);
}
.suggestions button:hover::after{transform:translateX(120%)}
.suggestions button:active{transform:none}
.suggestion-icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) calc(var(--fx-opacity) * 22%), transparent), transparent),
    var(--bg-elevated);
  font-size:16px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) calc(var(--fx-opacity) * 18%), transparent);
}
.suggestion-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.suggestion-title{font-size:13px;font-weight:650;color:var(--text-strong)}
.suggestion-desc{font-size:11px;color:var(--text-faint);line-height:1.35}
.suggestion-arrow{color:var(--text-faint);font-size:14px;padding-right:2px}

.messages{
  max-width:780px;
  margin:0 auto;
  padding:28px 0 20px;
  width:100%;
}
.message{
  display:flex;
  gap:12px;
  margin:0 0 24px;
  font-size:14px;
  line-height:1.7;
  align-items:flex-start;
  animation:fade-in .22s ease;
}
@keyframes fade-in{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:none}
}
.message.user{justify-content:flex-end}
.message-body{min-width:0;max-width:100%;display:flex;flex-direction:column;gap:8px}
.message.user .message-body{align-items:flex-end;max-width:min(80%,640px)}
.message.assistant .message-body{flex:1}
.bubble{white-space:pre-wrap;overflow-wrap:anywhere}
.bubble.md{white-space:normal}
.user .bubble{
  background:var(--bg-bubble);
  padding:11px 16px;
  border-radius:18px 18px 6px 18px;
  color:var(--text);
  border:1px solid var(--border);
}
.assistant .bubble{padding-top:4px;color:var(--text)}
.bubble.thinking{color:var(--text-muted)}
.bubble.thinking::after{
  content:'';
  animation:dots 1.2s steps(4,end) infinite;
}
@keyframes dots{
  0%{content:''}
  25%{content:'.'}
  50%{content:'..'}
  75%{content:'...'}
}
.avatar{
  width:30px;
  height:30px;
  background:transparent;
  border-radius:0;
  display:block;
  object-fit:contain;
  object-position:center;
  flex:none;
  margin-top:2px;
}
.error .bubble{color:var(--error)}
.msg-attachments{display:flex;flex-wrap:wrap;gap:8px}
.msg-image{
  max-width:min(280px,70vw);
  max-height:220px;
  border-radius:12px;
  border:1px solid var(--border-strong);
  object-fit:cover;
  background:var(--bg-elevated);
}
.msg-svg{margin:.55em 0}
.msg-svg .msg-image{
  object-fit:contain;
  background:#fff;
  max-height:min(360px,50vh);
}
.msg-svg-pending{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:120px;
  max-width:min(280px,70vw);
  border-radius:12px;
  border:1px dashed var(--border-strong);
  background:var(--bg-elevated);
  color:var(--text-muted);
  font-size:.9rem;
}
.msg-svg-pending-label::after{
  content:'';
  animation:msg-svg-dots 1.2s steps(4,end) infinite;
}
@keyframes msg-svg-dots{
  0%{content:''}
  25%{content:'.'}
  50%{content:'..'}
  75%{content:'...'}
}
.msg-file{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid var(--border-strong);
  background:var(--bg-elevated);
  color:var(--text-brand);
  text-decoration:none;
  font-size:12px;
  font-weight:600;
}
.msg-actions{
  display:flex;
  gap:2px;
  margin-top:4px;
  margin-left:42px;
  opacity:.55;
  transition:opacity .15s ease;
}
.message:hover .msg-actions,
.message:focus-within .msg-actions{opacity:1}
.msg-actions .msg-action-btn{
  border:0;
  background:transparent;
  color:var(--text-faint);
  width:32px;
  height:32px;
  padding:0;
  border-radius:8px;
  display:grid;
  place-items:center;
  transition:background .15s ease,color .15s ease;
}
.msg-actions .msg-action-btn:hover{
  background:var(--bg-elevated);
  color:var(--text-strong);
}
.msg-actions .msg-action-btn:focus-visible{
  outline:2px solid var(--accent-soft);
  outline-offset:1px;
}

/* ——— Composer ——— */
.compose-area{
  padding:8px 24px 14px;
  flex:none;
  background:linear-gradient(to top,var(--bg) 70%,transparent);
  position:relative;
  z-index:2;
}
.composer{
  max-width:780px;
  margin:0 auto;
  border:1px solid var(--border-strong);
  border-radius:18px;
  padding:12px 14px 12px;
  background:
    linear-gradient(160deg, var(--card-shine), transparent 50%),
    var(--bg-composer);
  box-shadow:
    0 10px 32px var(--shadow-composer),
    0 0 0 1px color-mix(in srgb, var(--accent) calc(var(--fx-opacity) * 12%), transparent);
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
  position:relative;
  z-index:1;
}
.composer:focus-within{
  border-color:var(--accent-soft);
  box-shadow:0 10px 32px var(--shadow-composer),0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}
.composer.dragover{
  border-color:var(--accent-soft);
  background:var(--bg-elevated);
}
.attach-preview{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.attach-chip{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border:1px solid var(--border-strong);
  border-radius:12px;
  background:var(--bg-elevated);
  max-width:100%;
}
.attach-chip img{width:40px;height:40px;object-fit:cover;border-radius:8px}
.attach-file-icon{width:40px;height:40px;display:grid;place-items:center;font-size:18px}
.attach-meta{min-width:0;display:flex;flex-direction:column;gap:1px}
.attach-meta strong{
  font-size:12px;
  color:var(--text-strong);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:160px;
  font-weight:650;
}
.attach-meta small{font-size:10px;color:var(--text-faint)}
.attach-remove{
  border:0;
  background:transparent;
  color:var(--text-faint);
  font-size:18px;
  line-height:1;
  padding:4px;
  border-radius:6px;
}
.attach-remove:hover{color:var(--error);background:color-mix(in srgb,var(--error) 12%,transparent)}
#prompt{
  width:100%;
  border:0;
  outline:0;
  box-shadow:none;
  resize:none;
  min-height:40px;
  max-height:180px;
  font-size:15px;
  line-height:1.5;
  padding:2px 2px 10px;
  background:transparent;
  color:var(--text-strong);
}
#prompt:focus{outline:0;box-shadow:none;border:0}
#prompt::placeholder{color:var(--text-faint)}
.composer-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-top:2px;
}
.composer-left,.composer-right{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
.composer-left{flex:1;flex-wrap:wrap}
.active-tools{display:flex;flex-wrap:wrap;gap:6px;margin-left:2px}
.active-tools[hidden]{display:none}
.active-tool-pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:32px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent) 40%,var(--border-strong));
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  color:var(--text-brand);
  font:inherit;
  font-size:12px;
  font-weight:650;
  cursor:pointer;
}
.active-tool-pill:hover{background:color-mix(in srgb,var(--accent) 18%,transparent)}
.active-tool-pill .pill-x{opacity:.65;font-size:14px;line-height:1}
.icon-btn{
  width:40px;
  height:40px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:var(--text-muted);
  flex:none;
  display:grid;
  place-items:center;
  transition:background .15s ease,color .15s ease,transform .15s ease;
}
.icon-btn:focus-visible,
.attach-menu button:focus-visible,
.more-menu button:focus-visible,
.active-tool-pill:focus-visible,
#send:focus-visible{
  outline:2px solid var(--accent-soft);
  outline-offset:2px;
}
.icon-btn:hover:not(:disabled){background:var(--bg-elevated);color:var(--text-strong)}
.icon-btn:disabled{opacity:.4}
.icon-btn.listening{
  background:color-mix(in srgb,var(--error) 16%,transparent);
  color:var(--error);
}
.icon-btn.open-menu{
  background:var(--bg-elevated);
  color:var(--text-strong);
}
.icon-btn.open-menu .icon-plus{transform:rotate(45deg)}
.icon-plus{transition:transform .15s ease}
.attach-wrap,.more-wrap{position:relative}
.attach-menu,.more-menu{
  position:fixed;
  min-width:min(300px,calc(100vw - 24px));
  max-height:min(70vh,420px);
  overflow:auto;
  padding:8px;
  border:1px solid var(--border-strong);
  border-radius:16px;
  background:var(--bg-composer);
  box-shadow:0 16px 40px var(--shadow-composer);
  z-index:40;
  display:grid;
  gap:2px;
  overscroll-behavior:contain;
}
.more-menu{min-width:min(200px,calc(100vw - 24px));border-radius:12px;padding:6px}
.attach-menu[hidden],.more-menu[hidden]{display:none}
.attach-menu button,.more-menu button{
  border:0;
  background:transparent;
  color:var(--text);
  text-align:left;
  padding:10px 12px;
  border-radius:12px;
  font:inherit;
  font-size:13px;
  font-weight:550;
  cursor:pointer;
  display:flex;
  align-items:flex-start;
  gap:12px;
  width:100%;
}
.more-menu button{align-items:center;border-radius:8px}
.attach-menu button:hover:not(:disabled),.more-menu button:hover:not(:disabled){background:var(--bg-elevated)}
.attach-menu button:disabled,.more-menu button:disabled{opacity:.45;cursor:default}
.attach-menu button svg{flex:none;margin-top:1px;color:var(--text-muted)}
.attach-menu button span{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.attach-menu button strong{font-size:13px;font-weight:650;color:var(--text-strong)}
.attach-menu button small{font-size:11px;color:var(--text-faint);font-weight:500}
.attach-menu-sep{height:1px;background:var(--border);margin:6px 4px}
.attach-tool[aria-checked="true"]{
  background:color-mix(in srgb,var(--accent) 10%,transparent);
}
.attach-tool[aria-checked="true"] svg{color:var(--text-brand)}
.attach-check{
  width:18px;
  height:18px;
  border-radius:999px;
  border:1.5px solid var(--border-strong);
  flex:none;
  margin-top:2px;
  position:relative;
}
.attach-tool[aria-checked="true"] .attach-check{
  border-color:var(--accent);
  background:var(--accent);
}
.attach-tool[aria-checked="true"] .attach-check::after{
  content:"";
  position:absolute;
  left:5px;top:2px;
  width:5px;height:9px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.header-btn{
  border:1px solid var(--border-strong);
  background:var(--bg-composer);
  color:var(--text-muted);
  border-radius:10px;
  padding:7px 12px;
  font-size:12px;
  font-weight:650;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.header-btn:hover{border-color:var(--accent-soft);color:var(--text-strong);background:var(--bg-elevated)}
.history-row.pinned .chat-title::before{
  content:'📌 ';
  font-size:11px;
}
.pin{
  color:var(--text-faint);
  width:28px;
  height:28px;
  border-radius:8px;
  opacity:0;
  display:grid;
  place-items:center;
  font-size:12px;
  transition:opacity .15s ease,color .15s ease,background .15s ease;
}
.history-row:hover .pin,
.history-row:focus-within .pin,
.history-row.active .pin,
.history-row.pinned .pin{opacity:1}
.pin:hover,.history-row.pinned .pin{color:var(--text-brand);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.message.user .msg-actions{margin-left:0;justify-content:flex-end}
.msg-actions{flex-wrap:wrap}
.skeleton-msg{
  display:flex;
  gap:12px;
  margin:0 0 24px;
  animation:pulse 1.2s ease-in-out infinite;
}
.skeleton-avatar{
  width:30px;height:30px;border-radius:9px;background:var(--bg-elevated);flex:none;
}
.skeleton-lines{flex:1;display:grid;gap:8px;padding-top:4px}
.skeleton-line{
  height:12px;border-radius:6px;background:var(--bg-elevated);
}
.skeleton-line.w60{width:60%}.skeleton-line.w80{width:80%}.skeleton-line.w40{width:40%}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
.app-dialog{
  border:1px solid var(--border-strong);
  border-radius:16px;
  padding:0;
  background:var(--bg-composer);
  color:var(--text);
  width:min(480px,92vw);
  box-shadow:0 20px 50px var(--shadow-composer);
}
.camera-dialog{width:min(560px,94vw)}
.camera-shell{padding:20px}
.camera-shell h2{margin:0 0 6px;font-size:18px;color:var(--text-heading)}
.camera-shell > p{margin:0 0 12px;color:var(--text-muted);font-size:13px}
.camera-stage{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background:#000;
  aspect-ratio:4 / 3;
  border:1px solid var(--border-strong);
}
.camera-stage video,
.camera-stage .camera-preview{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.camera-actions{margin-top:14px;flex-wrap:wrap}
.app-dialog::backdrop{background:var(--bg-overlay)}
.app-dialog form{padding:20px}
.app-dialog h2{margin:0 0 6px;font-size:18px;color:var(--text-heading)}
.app-dialog p{margin:0 0 12px;color:var(--text-muted);font-size:13px;line-height:1.5}
.app-dialog textarea{
  width:100%;
  min-height:140px;
  max-height:280px;
  border:1px solid var(--border-strong);
  border-radius:12px;
  padding:12px;
  background:var(--bg-elevated);
  color:var(--text-strong);
  resize:vertical;
  font:inherit;
}
.dialog-field{
  display:grid;
  gap:6px;
  margin:0 0 12px;
  font-size:12px;
  font-weight:650;
  color:var(--text-muted);
}
.dialog-field input{
  width:100%;
  border:1px solid var(--border-strong);
  border-radius:10px;
  padding:11px 12px;
  background:var(--bg-elevated);
  color:var(--text-strong);
  font:inherit;
}
.dialog-field input:focus{outline:0;border-color:var(--accent-soft)}
.dialog-error{margin:0 0 8px;color:var(--error);font-size:12px}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.btn{
  border:0;
  border-radius:10px;
  padding:9px 14px;
  font:inherit;
  font-weight:650;
  cursor:pointer;
}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-hover)}
.btn.danger{background:var(--error);color:#fff}
.btn.ghost{
  background:transparent;
  color:var(--text-muted);
  border:1px solid var(--border-strong);
}
.btn.ghost:hover{color:var(--text-strong);border-color:var(--accent-soft)}
.toast-host{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:40;
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
  max-width:min(360px,calc(100vw - 32px));
}
.toast{
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--bg-composer);
  border:1px solid var(--border-strong);
  color:var(--text-strong);
  border-radius:12px;
  padding:12px 14px;
  font-size:13px;
  line-height:1.4;
  box-shadow:0 12px 32px var(--shadow-composer);
  animation:toast-in .2s ease;
}
.toast > span{flex:1;min-width:0}
.toast-action{
  border:0;
  background:transparent;
  color:var(--text-brand);
  font:inherit;
  font-weight:700;
  font-size:12px;
  padding:4px 6px;
  border-radius:8px;
  cursor:pointer;
  flex:none;
}
.toast-action:hover{background:var(--bg-elevated)}
.toast.ok{border-color:color-mix(in srgb,var(--accent) 50%,var(--border-strong))}
.toast.error{border-color:color-mix(in srgb,var(--error) 55%,var(--border-strong));color:var(--error)}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.scroll-bottom{
  position:absolute;
  left:50%;
  bottom:118px;
  transform:translateX(-50%);
  z-index:3;
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid var(--border-strong);
  background:var(--bg-composer);
  color:var(--text-strong);
  box-shadow:0 8px 24px var(--shadow-composer);
  font-size:18px;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:opacity .15s ease,transform .15s ease;
}
.scroll-bottom:hover{border-color:var(--accent-soft);transform:translateX(-50%) translateY(-1px)}
#send{
  width:40px;
  height:40px;
  border:0;
  border-radius:12px;
  background:var(--accent);
  color:#fff;
  flex:none;
  display:grid;
  place-items:center;
  transition:background .15s ease,transform .15s ease;
}
#send:hover:not(:disabled){background:var(--accent-hover)}
#send:active:not(:disabled){transform:scale(.96)}
#send:disabled{background:var(--accent-disabled);color:var(--text-faint)}
#send.stop{background:var(--error)}
#send .icon-stop{display:none}
#send.stop .icon-send{display:none}
#send.stop .icon-stop{display:block}
.note{
  text-align:center;
  color:var(--text-faint);
  font-size:11px;
  margin:10px auto 0;
  max-width:780px;
  line-height:1.4;
}

#open-menu,#close-menu{
  display:none;
  background:transparent;
  border:0;
  font-size:22px;
  color:var(--text-muted);
  width:36px;
  height:36px;
  border-radius:10px;
  flex:none;
  place-items:center;
}
#open-menu:hover,#close-menu:hover{background:var(--bg-elevated);color:var(--text-strong)}

/* ——— Markdown ——— */
.bubble.md > :first-child{margin-top:0}
.bubble.md > :last-child{margin-bottom:0}
.bubble.md p{margin:.55em 0}
.bubble.md h1,.bubble.md h2,.bubble.md h3,.bubble.md h4,.bubble.md h5,.bubble.md h6{
  margin:1em 0 .4em;
  line-height:1.3;
  color:var(--text-heading);
  letter-spacing:-.02em;
}
.bubble.md h1{font-size:1.35em}
.bubble.md h2{font-size:1.2em}
.bubble.md h3{font-size:1.08em}
.bubble.md ul,.bubble.md ol{margin:.55em 0;padding-left:1.35em}
.bubble.md li{margin:.25em 0}
.bubble.md li > p{margin:.2em 0}
.bubble.md .code-block{
  margin:.75em 0;
  border:1px solid var(--border-strong);
  border-radius:12px;
  overflow:hidden;
  background:var(--bg-elevated);
}
.bubble.md .code-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:7px 10px;
  border-bottom:1px solid var(--border);
  background:color-mix(in srgb,var(--bg) 55%,var(--bg-elevated));
}
.bubble.md .code-lang{
  font-size:11px;
  color:var(--text-faint);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  text-transform:lowercase;
}
.bubble.md .code-copy{
  border:0;
  background:transparent;
  color:var(--text-muted);
  font-size:11px;
  font-weight:600;
  padding:4px 8px;
  border-radius:7px;
  cursor:pointer;
}
.bubble.md .code-copy:hover{background:var(--bg-composer);color:var(--text-strong)}
.bubble.md pre{
  margin:0;
  padding:12px 14px;
  overflow:auto;
  scrollbar-width:thin;
  background:transparent;
  border:0;
  border-radius:0;
}
.bubble.md code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
.bubble.md :not(pre) > code{
  background:var(--bg-elevated);
  padding:.12em .4em;
  border-radius:6px;
  border:1px solid var(--border);
}
.bubble.md blockquote{
  margin:.65em 0;
  padding:.15em 0 .15em 14px;
  border-left:3px solid var(--accent);
  color:var(--text-muted);
}
.bubble.md a{color:var(--text-brand);text-decoration:underline;text-underline-offset:2px}
.bubble.md a:hover{opacity:.85}
.bubble.md .md-table-wrap{
  margin:.75em 0;
  overflow:hidden;
  border:1px solid var(--border-strong);
  border-radius:12px;
  background:var(--bg-elevated);
}
.bubble.md table{
  width:100%;
  border-collapse:collapse;
  font-size:.92em;
  table-layout:fixed;
}
.bubble.md th,
.bubble.md td{
  padding:9px 12px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--border);
  line-height:1.45;
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
}
.bubble.md th{
  font-weight:650;
  color:var(--text-heading);
  background:color-mix(in srgb,var(--bg) 55%,var(--bg-elevated));
}
.bubble.md tbody tr:last-child td{border-bottom:0}
.bubble.md tbody tr:hover td{
  background:color-mix(in srgb,var(--accent-soft) 35%,transparent);
}

/* ——— Responsive ——— */
@media(max-width:860px){
  header{padding:0 16px}
  .scroll{padding:0 16px}
  .compose-area{padding:8px 16px 12px}
  .header-sub{display:none}
}
@media(max-width:760px){
  .layout.sidebar-collapsed aside{
    width:min(300px,86vw);
    opacity:1;
    pointer-events:auto;
    border-right-color:var(--border);
  }
  aside{
    position:fixed;
    inset:0 auto 0 0;
    width:min(300px,86vw);
    transform:translateX(-105%);
    transition:transform .22s ease;
    box-shadow:15px 0 50px var(--shadow-sidebar);
    opacity:1;
    pointer-events:auto;
  }
  aside.open{transform:translateX(0)}
  #open-menu,#close-menu{display:grid}
  #collapse-sidebar{display:none}
  #close-menu{margin-left:auto}
  .brand{width:100%}
  header{padding:0 12px;gap:10px}
  .model-picker select{max-width:150px;padding:7px 10px}
  .compose-area{padding:6px 12px 10px}
  .msg-actions{margin-left:0}
  .welcome{padding-top:clamp(28px,8vh,64px)}
}
@media(max-width:520px){
  .suggestions{grid-template-columns:1fr}
  .model-picker span{display:none}
  .model-picker select{max-width:130px}
  .suggestion-desc{display:none}
  .messages{padding:20px 0 12px}
  .message{margin-bottom:20px}
  .composer{padding:10px 12px}
  .composer-bar{gap:6px}
  .composer-left{gap:4px}
  #send{width:40px;height:40px;border-radius:12px}
  .attach-menu button,.more-menu button{min-height:44px;padding:12px}
  .note{font-size:10px;padding:0 8px}
}