:root {
  --bg: #141413;
  --sidebar: #171717;
  --panel: #1e1e1d;
  --panel-2: #232322;
  --panel-3: #252524;
  --panel-4: #2d2d2b;
  --input: #20201f;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.12);
  --text: #ece7df;
  --muted: #a59f96;
  --muted-2: #8c877f;
  --accent: #d1a065;
  --accent-strong: #deb173;
  --accent-soft: rgba(209, 160, 101, 0.18);
  --accent-halo: rgba(209, 160, 101, 0.08);
  --user: #21413b;
  --link: #f1bf80;
  --link-visited: #dfb788;
  --link-border: rgba(241, 191, 128, 0.35);
  --link-border-hover: rgba(241, 191, 128, 0.8);
  --code-bg: #1a1a19;
  --code-keyword: #f0b86c;
  --danger-bg: #2b1f1d;
  --danger-text: #efc0b6;
  --danger-border: rgba(239, 192, 182, 0.12);
  --send-text: #24170d;
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  --ease: 220ms cubic-bezier(0.22, 1, 0.36, 1);
  --layout-height: 100vh;
  --viewport-height: 100vh;
  --viewport-offset-top: 0px;
  --viewport-keyboard-inset: 0px;
  --composer-height: 0px;
  --sidebar-width: 290px;
  --app-gap: 16px;
}

html[data-theme="forest"] {
  --bg: #111715;
  --sidebar: #15211d;
  --panel: #1a2420;
  --panel-2: #202b26;
  --panel-3: #1f2824;
  --panel-4: #26312c;
  --input: #18211e;
  --border: rgba(173, 220, 196, 0.09);
  --border-strong: rgba(173, 220, 196, 0.16);
  --text: #edf5ef;
  --muted: #a4b7ab;
  --muted-2: #85988d;
  --accent: #5fb88f;
  --accent-strong: #7ed2aa;
  --accent-soft: rgba(95, 184, 143, 0.2);
  --accent-halo: rgba(95, 184, 143, 0.1);
  --user: #1f4b41;
  --link: #8fdcb8;
  --link-visited: #7fcba8;
  --link-border: rgba(143, 220, 184, 0.35);
  --link-border-hover: rgba(143, 220, 184, 0.75);
  --code-bg: #16201d;
  --code-keyword: #85d8b0;
  --danger-bg: #2a201e;
  --danger-text: #efc7b7;
  --danger-border: rgba(239, 199, 183, 0.12);
  --send-text: #10271f;
}

html[data-theme="graphite"] {
  --bg: #101112;
  --sidebar: #151719;
  --panel: #1b1e21;
  --panel-2: #23272b;
  --panel-3: #202327;
  --panel-4: #2a2f35;
  --input: #191b1e;
  --border: rgba(207, 215, 225, 0.08);
  --border-strong: rgba(207, 215, 225, 0.14);
  --text: #eef1f5;
  --muted: #a5adb8;
  --muted-2: #87909c;
  --accent: #6fa8d8;
  --accent-strong: #8abbe5;
  --accent-soft: rgba(111, 168, 216, 0.2);
  --accent-halo: rgba(111, 168, 216, 0.1);
  --user: #254556;
  --link: #9bc9ee;
  --link-visited: #88b8df;
  --link-border: rgba(155, 201, 238, 0.34);
  --link-border-hover: rgba(155, 201, 238, 0.72);
  --code-bg: #171a1e;
  --code-keyword: #8abbe5;
  --danger-bg: #22252b;
  --danger-text: #c6d4e2;
  --danger-border: rgba(198, 212, 226, 0.12);
  --send-text: #10202e;
}

html[data-theme="light"] {
  --bg: #e4eaf2;
  --sidebar: #edf2f8;
  --panel: #f6f8fb;
  --panel-2: #eef3f8;
  --panel-3: #e8eef5;
  --panel-4: #dde6ef;
  --input: rgba(246, 249, 253, 0.94);
  --border: rgba(27, 43, 61, 0.1);
  --border-strong: rgba(27, 43, 61, 0.16);
  --text: #182330;
  --muted: #5d6c7d;
  --muted-2: #7a8796;
  --accent: #5e8fc8;
  --accent-strong: #467fbd;
  --accent-soft: rgba(94, 143, 200, 0.14);
  --accent-halo: rgba(94, 143, 200, 0.08);
  --user: #dcecff;
  --link: #2f6cad;
  --link-visited: #5c69bb;
  --link-border: rgba(47, 108, 173, 0.2);
  --link-border-hover: rgba(47, 108, 173, 0.38);
  --code-bg: #eff4f9;
  --code-keyword: #285f9d;
  --danger-bg: #fff1ee;
  --danger-text: #b85b4d;
  --danger-border: rgba(184, 91, 77, 0.14);
  --send-text: #102238;
}

html[data-theme="aurora"] {
  --bg: #0e0a24;
  --sidebar: #14103a;
  --panel: #1a1542;
  --panel-2: #221c50;
  --panel-3: #1f1948;
  --panel-4: #2a2360;
  --input: #16113e;
  --border: rgba(180, 140, 240, 0.1);
  --border-strong: rgba(180, 140, 240, 0.18);
  --text: #ece4ff;
  --muted: #a8a0c8;
  --muted-2: #8c849f;
  --accent: #a880e6;
  --accent-strong: #c39df0;
  --accent-soft: rgba(168, 128, 230, 0.2);
  --accent-halo: rgba(168, 128, 230, 0.1);
  --user: #2c2360;
  --link: #b89ef0;
  --link-visited: #a48edc;
  --link-border: rgba(184, 158, 240, 0.35);
  --link-border-hover: rgba(184, 158, 240, 0.72);
  --code-bg: #15103d;
  --code-keyword: #c4a3f5;
  --danger-bg: #2a1c30;
  --danger-text: #f4c8e8;
  --danger-border: rgba(244, 200, 232, 0.12);
  --send-text: #190f30;
}

html[data-theme="sunset"] {
  --bg: #1a0d12;
  --sidebar: #221218;
  --panel: #2a161e;
  --panel-2: #341b25;
  --panel-3: #311920;
  --panel-4: #3d2129;
  --input: #25141a;
  --border: rgba(255, 180, 130, 0.1);
  --border-strong: rgba(255, 180, 130, 0.18);
  --text: #ffe5d9;
  --muted: #c9a89c;
  --muted-2: #a18a80;
  --accent: #ff8a65;
  --accent-strong: #ffa481;
  --accent-soft: rgba(255, 138, 101, 0.2);
  --accent-halo: rgba(255, 138, 101, 0.1);
  --user: #4a2230;
  --link: #ffb289;
  --link-visited: #e69d77;
  --link-border: rgba(255, 178, 137, 0.36);
  --link-border-hover: rgba(255, 178, 137, 0.72);
  --code-bg: #20111a;
  --code-keyword: #ffaf7d;
  --danger-bg: #30181a;
  --danger-text: #ffc9bc;
  --danger-border: rgba(255, 201, 188, 0.12);
  --send-text: #2a120c;
}

html[data-theme="sakura"] {
  --bg: #19121a;
  --sidebar: #211622;
  --panel: #28192a;
  --panel-2: #321d33;
  --panel-3: #2e1c30;
  --panel-4: #38233b;
  --input: #221520;
  --border: rgba(255, 180, 200, 0.1);
  --border-strong: rgba(255, 180, 200, 0.18);
  --text: #fce4ed;
  --muted: #c9a8b6;
  --muted-2: #a18a96;
  --accent: #ff8eaf;
  --accent-strong: #ffa6c1;
  --accent-soft: rgba(255, 142, 175, 0.2);
  --accent-halo: rgba(255, 142, 175, 0.1);
  --user: #4a223a;
  --link: #ffaad0;
  --link-visited: #e69abf;
  --link-border: rgba(255, 170, 208, 0.34);
  --link-border-hover: rgba(255, 170, 208, 0.7);
  --code-bg: #1f131d;
  --code-keyword: #ffaad0;
  --danger-bg: #2a181c;
  --danger-text: #ffc9d6;
  --danger-border: rgba(255, 201, 214, 0.12);
  --send-text: #2a121c;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", sans-serif;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  padding: 12px;
}

.app-shell::before,
.app-shell::after {
  content: "";
  position: absolute;
  inset: -12%;
  pointer-events: none;
  z-index: 0;
}

/* Smooth theme transitions: applied only during a brief window after theme change.
   Uses !important so it temporarily overrides per-element transitions.
   The class is removed after ~700ms in applyTheme(). */
html.theme-transitioning,
html.theme-transitioning body,
html.theme-transitioning *:not(.site-plasma-canvas):not(canvas):not(svg *) {
  transition:
    background-color 600ms cubic-bezier(0.22, 1, 0.36, 1),
    color 500ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 500ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 500ms cubic-bezier(0.22, 1, 0.36, 1),
    fill 500ms cubic-bezier(0.22, 1, 0.36, 1),
    stroke 500ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

html.theme-transitioning::before,
html.theme-transitioning::after,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition:
    background 600ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 600ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 500ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 500ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.app-shell::before {
  background:
    radial-gradient(circle at 20% 20%, rgba(209, 160, 101, 0.08), transparent 30%),
    radial-gradient(circle at 78% 24%, rgba(209, 160, 101, 0.06), transparent 26%),
    radial-gradient(circle at 55% 82%, rgba(209, 160, 101, 0.05), transparent 34%);
  filter: blur(18px);
  animation: site-bg-drift 18s ease-in-out infinite alternate;
}

.app-shell::after {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.02), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.01), transparent 46%);
  opacity: 0.9;
  animation: site-bg-breathe 14s ease-in-out infinite;
}

html[data-theme="graphite"] .app-shell::before {
  background:
    radial-gradient(circle at 18% 22%, rgba(111, 168, 216, 0.12), transparent 28%),
    radial-gradient(circle at 72% 28%, rgba(138, 187, 229, 0.09), transparent 24%),
    radial-gradient(circle at 52% 78%, rgba(111, 168, 216, 0.08), transparent 34%),
    radial-gradient(circle at 56% 10%, rgba(166, 207, 245, 0.1), transparent 20%),
    radial-gradient(circle at 22% 36%, rgba(166, 207, 245, 0.22) 0 1.5px, transparent 4px),
    radial-gradient(circle at 68% 24%, rgba(166, 207, 245, 0.16) 0 1.5px, transparent 4px),
    radial-gradient(circle at 74% 62%, rgba(133, 176, 227, 0.14) 0 1.5px, transparent 4px),
    radial-gradient(circle at 42% 68%, rgba(133, 176, 227, 0.12) 0 1.2px, transparent 4px),
    radial-gradient(ellipse at 56% 74%, transparent 0 26%, rgba(141, 188, 236, 0.028) 26.4% 26.8%, transparent 27.2% 35%, rgba(141, 188, 236, 0.022) 35.4% 35.8%, transparent 36.2%),
    linear-gradient(180deg, rgba(100, 132, 180, 0.06), rgba(16, 18, 24, 0) 22%, rgba(70, 98, 144, 0.04) 70%, rgba(14, 16, 20, 0));
  filter: blur(24px);
}

html[data-theme="graphite"] .app-shell::after {
  background:
    radial-gradient(circle at 56% 46%, rgba(155, 201, 238, 0.055), transparent 30%),
    repeating-linear-gradient(116deg, rgba(148, 188, 234, 0.012) 0 1px, transparent 1px 22px),
    linear-gradient(180deg, rgba(168, 206, 246, 0.065), rgba(120, 156, 214, 0.02) 28%, rgba(18, 24, 34, 0) 72%),
    radial-gradient(circle at 50% 84%, rgba(88, 126, 188, 0.08), transparent 34%);
  opacity: 0.68;
  animation: site-bg-breathe 14s ease-in-out infinite, site-bg-drift 24s ease-in-out infinite alternate;
}

html[data-theme="light"] .app-shell::before {
  background:
    radial-gradient(circle at 16% 18%, rgba(125, 164, 210, 0.07), transparent 28%),
    radial-gradient(circle at 72% 20%, rgba(111, 154, 208, 0.05), transparent 26%),
    radial-gradient(circle at 52% 82%, rgba(125, 164, 210, 0.045), transparent 34%);
  filter: blur(34px);
}

html[data-theme="light"] .app-shell::after {
  background:
    radial-gradient(circle at 56% 46%, rgba(255, 255, 255, 0.32), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 24%);
  opacity: 0.6;
  animation: site-bg-breathe 14s ease-in-out infinite;
}

html[data-theme="forest"] .app-shell::before {
  background:
    radial-gradient(circle at 18% 26%, rgba(95, 184, 143, 0.075), transparent 28%),
    radial-gradient(circle at 76% 20%, rgba(126, 210, 170, 0.05), transparent 24%),
    radial-gradient(circle at 52% 78%, rgba(95, 184, 143, 0.05), transparent 34%);
  filter: blur(26px);
}

html[data-theme="forest"] .app-shell::after {
  background:
    radial-gradient(circle at 24% 34%, rgba(185, 247, 213, 0.018), transparent 16%),
    radial-gradient(circle at 68% 58%, rgba(158, 234, 195, 0.016), transparent 14%),
    radial-gradient(circle at 18% 26%, rgba(214, 255, 232, 0.24) 0 2px, transparent 4px),
    radial-gradient(circle at 34% 72%, rgba(195, 255, 221, 0.18) 0 1.5px, transparent 4px),
    radial-gradient(circle at 62% 24%, rgba(198, 255, 223, 0.16) 0 2px, transparent 4px),
    radial-gradient(circle at 78% 66%, rgba(214, 255, 232, 0.2) 0 2px, transparent 4px),
    radial-gradient(circle at 54% 86%, rgba(188, 247, 212, 0.15) 0 1.5px, transparent 4px),
    radial-gradient(circle at 86% 34%, rgba(214, 255, 232, 0.18) 0 2px, transparent 4px),
    linear-gradient(160deg, rgba(255, 255, 255, 0.01), transparent 42%);
  opacity: 0.62;
  animation: site-bg-aurora 16s ease-in-out infinite alternate, site-bg-fireflies 19s ease-in-out infinite;
}

html[data-theme="ember"] .app-shell::before {
  background: none;
  filter: none;
}

html[data-theme="ember"] .app-shell::after {
  background: none;
  opacity: 0;
  animation: none;
}

html[data-theme="aurora"] .app-shell::before {
  background:
    radial-gradient(circle at 18% 22%, rgba(168, 128, 230, 0.16), transparent 30%),
    radial-gradient(circle at 76% 18%, rgba(120, 200, 220, 0.12), transparent 28%),
    radial-gradient(circle at 60% 80%, rgba(220, 130, 200, 0.1), transparent 32%),
    radial-gradient(circle at 30% 70%, rgba(110, 90, 200, 0.1), transparent 28%);
  filter: blur(28px);
}

html[data-theme="aurora"] .app-shell::after {
  background:
    radial-gradient(ellipse at 50% 32%, rgba(168, 128, 230, 0.08), transparent 40%),
    radial-gradient(ellipse at 50% 78%, rgba(120, 200, 220, 0.06), transparent 38%),
    linear-gradient(180deg, rgba(168, 128, 230, 0.04), rgba(20, 16, 50, 0) 30%, rgba(120, 200, 220, 0.05) 80%, rgba(20, 16, 50, 0));
  opacity: 0.78;
  animation: site-bg-aurora 18s ease-in-out infinite alternate, site-bg-breathe 16s ease-in-out infinite;
}

html[data-theme="sunset"] .app-shell::before {
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 138, 101, 0.16), transparent 30%),
    radial-gradient(circle at 78% 22%, rgba(255, 100, 80, 0.12), transparent 26%),
    radial-gradient(circle at 50% 86%, rgba(255, 180, 110, 0.14), transparent 36%),
    radial-gradient(circle at 30% 60%, rgba(220, 80, 90, 0.08), transparent 30%);
  filter: blur(32px);
}

html[data-theme="sunset"] .app-shell::after {
  background:
    radial-gradient(ellipse at 50% 78%, rgba(255, 168, 110, 0.16), transparent 44%),
    radial-gradient(ellipse at 50% 24%, rgba(255, 100, 80, 0.08), transparent 36%),
    linear-gradient(180deg, rgba(255, 100, 80, 0.04), rgba(40, 14, 18, 0) 32%, rgba(255, 168, 110, 0.06) 78%, rgba(40, 14, 18, 0));
  opacity: 0.72;
  animation: site-bg-breathe 14s ease-in-out infinite, site-bg-drift 22s ease-in-out infinite alternate;
}

html[data-theme="sakura"] .app-shell::before {
  background:
    radial-gradient(circle at 22% 20%, rgba(255, 142, 175, 0.14), transparent 30%),
    radial-gradient(circle at 76% 24%, rgba(255, 180, 200, 0.1), transparent 26%),
    radial-gradient(circle at 52% 84%, rgba(255, 142, 175, 0.12), transparent 34%),
    radial-gradient(circle at 30% 64%, rgba(255, 180, 160, 0.08), transparent 30%);
  filter: blur(30px);
}

html[data-theme="sakura"] .app-shell::after {
  /* Soft pink ambient glow */
  background:
    radial-gradient(ellipse at 78% 18%, rgba(255, 180, 200, 0.08), transparent 40%),
    radial-gradient(ellipse at 22% 78%, rgba(255, 200, 180, 0.06), transparent 38%);
  opacity: 1;
  animation: site-bg-breathe 16s ease-in-out infinite;
}

.composer-show-sidebar-btn {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-right: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-10px) scale(0.92);
  transition:
    width 260ms cubic-bezier(0.22, 1, 0.36, 1),
    flex-basis 260ms cubic-bezier(0.22, 1, 0.36, 1),
    margin-right 260ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms ease,
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

html.sidebar-collapsed .composer-show-sidebar-btn {
  margin-right: 4px;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

html:not(.sidebar-collapsed) .composer-show-sidebar-btn {
  width: 0;
  flex-basis: 0;
  margin-right: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-10px) scale(0.92);
  border-color: transparent;
  background: transparent;
}

@media (min-width: 981px) {
  html:not(.sidebar-collapsed) .composer-show-sidebar-btn {
    margin-right: -8px;
  }
}

button,
input,
select,
textarea {
  font: inherit;
}

.app-shell {
  width: calc(100vw - 24px);
  height: calc(100vh - 24px);
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  gap: var(--app-gap);
  overflow: visible;
  transition: grid-template-columns 360ms cubic-bezier(0.22, 1, 0.36, 1), gap 360ms cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  z-index: 1;
  isolation: isolate;
}

html.sidebar-collapsed .app-shell {
  --sidebar-width: 0px;
  grid-template-columns: 0 minmax(0, 1fr);
  gap: 0;
}

.sidebar {
  /* Visual glass layer is on .sidebar::before so the account pill —
     which is a sibling inside .sidebar — paints on top of it with its
     own glass + drop shadow, giving the "floating over the sidebar"
     look. */
  background: transparent;
  border: none;
  border-radius: 20px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  transform-origin: left center;
  transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1), transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  backdrop-filter: blur(20px) saturate(150%) brightness(1.04);
  -webkit-backdrop-filter: blur(20px) saturate(150%) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 12px 32px rgba(0, 0, 0, 0.16);
}

html.sidebar-collapsed .sidebar {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-24px) scale(0.96);
}

.sidebar-head,
.brand-lockup,
.settings-head,
.settings-footer,
.settings-footer-actions,
.composer-input-row,
.composer-toolbar,
.composer-tools-left,
.composer-tools-right,
.thinking-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-head,
.settings-head,
.settings-footer,
.composer-toolbar {
  justify-content: space-between;
}

.brand-mark,
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--panel-3);
  border: 1px solid var(--border);
  font-weight: 700;
}

.brand-title {
  font-size: 14px;
  font-weight: 700;
}

.brand-subtitle,
.sidebar-card p,
.helper-card li,
.thinking-head,
.thinking-meta {
  color: var(--muted);
}

.brand-subtitle {
  font-size: 12px;
}

.sidebar-btn,
.sidebar-icon-btn,
.new-chat-btn,
.secondary-btn,
.danger-btn,
.icon-btn,
.send-btn,
.composer-tool-btn,
.composer-refresh-btn,
.thinking-toggle,
.sidebar-action-btn,
.session-item {
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}

.sidebar-btn,
.sidebar-icon-btn,
.new-chat-btn,
.secondary-btn,
.danger-btn,
.icon-btn,
.send-btn,
.composer-tool-btn,
.composer-refresh-btn,
.sidebar-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  line-height: 1;
  opacity: 0.92;
}

.btn-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

.sidebar-icon-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  backdrop-filter: blur(12px) saturate(130%) brightness(1.03);
  -webkit-backdrop-filter: blur(12px) saturate(130%) brightness(1.03);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03);
}

.sidebar-btn,
.secondary-btn,
.icon-btn,
.composer-tool-btn,
.composer-refresh-btn,
.sidebar-action-btn,
.session-item {
  padding: 9px 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  backdrop-filter: blur(12px) saturate(130%) brightness(1.03);
  -webkit-backdrop-filter: blur(12px) saturate(130%) brightness(1.03);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-action-btn {
  flex: 1;
}

.sidebar-footer {
  /* Pulled out of normal flow and pinned to the sidebar's bottom-inner
     corner so the account pill literally floats *over* the chat list,
     casting its own drop shadow onto the sidebar's glass surface. */
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
}

.sidebar-collapse-btn {
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  backdrop-filter: blur(12px) saturate(130%) brightness(1.03);
  -webkit-backdrop-filter: blur(12px) saturate(130%) brightness(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sidebar-collapse-btn svg {
  transition: transform var(--ease);
}

.new-chat-btn {
  width: 100%;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-weight: 500;
  font-size: 13px;
}

.new-chat-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.new-chat-btn.secondary {
  background: transparent;
  color: var(--muted);
  border-color: rgba(255,255,255,0.06);
}

.new-chat-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.agents-btn {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 8px;
  background: transparent !important;
  color: var(--muted) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

.agents-btn:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--text) !important;
}

.agents-btn .btn-icon {
  flex-shrink: 0;
}

.agents-btn-badge {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c83ff, #a78bfa);
  color: #fff;
  text-transform: uppercase;
  line-height: 1.2;
  box-shadow: 0 2px 6px -2px rgba(124, 131, 255, 0.6);
}

.sidebar-primary-actions {
  display: grid;
  gap: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sidebar-primary-actions .new-chat-btn {
  justify-content: flex-start;
}

.sidebar-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  animation: ui-fade-up 460ms var(--ease);
  overflow: visible;
}

/* Chat list card grows to fill remaining vertical space so its inner
   .session-list flex:1 actually has a bounded height to scroll within.
   Without min-height:0 the flex item refuses to shrink below content. */
.session-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Footer never shrinks — keeps the account pill anchored. */
.sidebar-footer {
  flex: 0 0 auto;
}

.sidebar-label {
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-left: 4px;
}

.helper-card {
  display: none;
}

.helper-card ul {
  margin: 10px 0 0;
  padding-left: 18px;
  line-height: 1.8;
  font-size: 13px;
}

.helper-card code {
  font-family: "IBM Plex Mono", monospace;
}

.settings-section {
  margin-top: 22px;
}

.sidebar-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.settings-actions {
  margin-top: 8px;
}

.settings-server-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-server-section .sounds-toggle {
  display: flex;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-2);
  flex: 0 0 auto;
}
.settings-server-section .sounds-toggle-label {
  flex: 1 1 auto;
  min-width: 0;
}
.settings-server-section .settings-hint {
  margin-top: 4px;
}

.settings-hint {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.45;
}

.sidebar-section-label {
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 4px 4px;
}

.sidebar-projects-section,
.sidebar-recent-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-projects-section + .sidebar-recent-section {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.session-search-input {
  width: 100%;
  margin-top: 6px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-size: 12px;
  outline: none;
}

.session-search-input:focus {
  border-color: rgba(255,255,255,0.14);
}

.session-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* Reserve space at the bottom so the last chats don't hide under the
     floating account pill. Roughly: pill height (≈50px) + breathing
     room. */
  padding-bottom: 72px;
  /* Soft fade at the bottom — items slide gently under the floating
     pill instead of getting hard-clipped at its top edge. */
  mask-image: linear-gradient(180deg, #000 calc(100% - 80px), transparent calc(100% - 8px));
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 80px), transparent calc(100% - 8px));
  /* Hide native scrollbar to match the popover treatment. Wheel/touch
     scrolling still works. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.session-list::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.project-group {
  display: grid;
  gap: 2px;
}

.project-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  border: none;
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  text-align: left;
  transition: background 100ms ease;
}

.project-header:hover {
  background: rgba(255,255,255,0.04);
}

.project-main {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
}

.project-header.active {
  background: rgba(255,255,255,0.06);
  color: var(--text);
}

.project-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.project-count {
  font-size: 11px;
  color: var(--muted-2);
}

.project-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.project-menu-wrap {
  position: static;
}

.project-action {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: none;
  background: rgba(255,255,255,0.06);
  color: var(--muted);
  font-size: 11px;
}

.project-action:hover {
  background: rgba(255,255,255,0.12);
  color: var(--text);
}

.project-action.toggle {
  font-size: 13px;
}

.project-action.danger {
  color: var(--danger-text);
}

.project-session-list {
  display: grid;
  gap: 2px;
  padding-left: 6px;
}

.project-session-list[hidden] {
  display: none !important;
}

.project-menu {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 220px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border-strong));
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    color-mix(in srgb, var(--panel) 94%, black 6%);
  backdrop-filter: blur(18px) saturate(140%) brightness(1.03);
  -webkit-backdrop-filter: blur(18px) saturate(140%) brightness(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 38px rgba(0, 0, 0, 0.34),
    0 0 0 1px color-mix(in srgb, var(--accent-halo) 18%, transparent);
  z-index: 40;
}

.project-menu.floating {
  z-index: 200;
}

.project-menu[hidden] {
  display: none !important;
}

.project-menu-item {
  width: 100%;
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease), box-shadow var(--ease), color var(--ease);
}

.project-menu-item:hover,
.project-menu-item:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));
}

.project-menu-item.danger {
  color: var(--danger-text);
}

.project-menu-item.danger:hover,
.project-menu-item.danger:focus-visible {
  border-color: color-mix(in srgb, var(--danger-text) 32%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--danger-text) 10%, rgba(255,255,255,0.04)), rgba(255,255,255,0.02));
}

.session-list-empty {
  padding: 14px 12px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.session-item {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  text-align: left;
  padding: 8px 10px;
  position: relative;
  transform-origin: center left;
  background: transparent;
  border: none;
  border-radius: 10px;
  transition: background 100ms ease;
}

.session-item.active {
  background: rgba(255, 255, 255, 0.09);
  border-left: 2px solid var(--accent);
}

.session-item:hover {
  background: rgba(255, 255, 255, 0.055);
  transform: none;
  box-shadow: none;
}

.session-title {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.session-meta {
  display: none;
}

.session-content {
  min-width: 0;
  display: block;
  padding-right: 40px;
}

.session-actions {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transition: opacity var(--ease);
  pointer-events: none;
}

.session-item:hover .session-actions,
.session-item.active .session-actions {
  opacity: 1;
  pointer-events: auto;
}

.session-action {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: none;
  background: rgba(255,255,255,0.06);
  color: var(--muted);
  font-size: 12px;
}

.session-action:hover {
  background: rgba(255,255,255,0.12);
  color: var(--text);
}

.session-action.danger {
  color: var(--danger-text);
}

.session-action.menu {
  width: 24px;
  height: 24px;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 1px;
  background: transparent;
}
.session-action.menu:hover,
.session-action.menu.is-open {
  background: rgba(255,255,255,0.10);
  color: var(--text);
}

.project-menu.session-menu {
  min-width: 200px;
}

/* ── Chat tags ───────────────────────────────────────── */

.session-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  max-width: 100%;
}

.session-tag-chip {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.session-tag-chip:hover {
  background: rgba(255, 255, 255, 0.11);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.16);
}

.session-tag-chip.is-overflow {
  cursor: default;
  opacity: 0.7;
}

html[data-theme="light"] .session-tag-chip {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .session-tag-chip:hover {
  background: rgba(0, 0, 0, 0.07);
  border-color: rgba(0, 0, 0, 0.14);
}

/* Tag filter bar at top of session list */

.session-tag-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.session-tag-filter-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.session-tag-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-height: 88px;
  overflow-y: auto;
}

.session-tag-filter {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.session-tag-filter:hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.16);
}

.session-tag-filter.is-active {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--text);
}

.session-tag-filter.is-active:hover {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}

.session-tag-filter-clear {
  align-self: flex-start;
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 10.5px;
  cursor: pointer;
  padding: 2px 0;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.session-tag-filter-clear:hover {
  color: var(--text);
}

html[data-theme="light"] .session-tag-filter {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .session-tag-filter:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.16);
}

/* Tag editor modal body */

.tag-editor-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 32px;
  padding: 4px 0;
}

.tag-editor-empty {
  color: var(--muted);
  font-size: 12.5px;
  padding: 4px 0;
}

.tag-editor-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 4px 0 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}

.tag-editor-chip > button {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.tag-editor-chip > button:hover {
  background: rgba(255, 255, 255, 0.16);
}

html[data-theme="light"] .tag-editor-chip > button:hover {
  background: rgba(0, 0, 0, 0.08);
}

.tag-editor-input-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.tag-editor-input {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

.tag-editor-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="light"] .tag-editor-input {
  background: rgba(0, 0, 0, 0.03);
}
html[data-theme="light"] .tag-editor-input:focus {
  background: rgba(0, 0, 0, 0.05);
}

.tag-editor-error {
  margin-top: 6px;
  color: var(--danger-text);
  font-size: 12px;
}

/* Mobile / phone tuning */
@media (max-width: 640px) {
  .session-tag-chip { font-size: 10px; max-width: 96px; }
  .session-tag-filter { font-size: 10.5px; height: 24px; padding: 0 10px; }
  .session-tag-filter-list { flex-wrap: nowrap; overflow-x: auto; max-height: none; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .session-tag-filter-bar { padding: 6px 8px 8px; }
  .tag-editor-input-row { flex-direction: column; }
  .tag-editor-input-row > .source-modal-btn { align-self: stretch; }
}

.chat-layout {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
  overflow: hidden;
  background: transparent;
  position: relative;
  --preview-panel-width: clamp(420px, 34vw, 680px);
}

.preview-panel {
  position: absolute;
  top: 84px;
  right: 20px;
  bottom: calc(var(--composer-height) + 26px);
  width: var(--preview-panel-width);
  max-width: calc(100% - 32px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(20, 22, 28, 0.92), rgba(12, 14, 18, 0.94));
  backdrop-filter: blur(18px) saturate(124%);
  -webkit-backdrop-filter: blur(18px) saturate(124%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  z-index: 18;
}

.preview-resize-handle {
  display: none;
}

.preview-panel[hidden] {
  display: none !important;
}

.preview-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.preview-panel-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.preview-panel-action,
.preview-panel-close {
  flex: 0 0 auto;
}

.preview-panel-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.preview-panel-subtitle {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.preview-panel-body {
  flex: 1;
  min-height: 0;
  background: rgba(255, 255, 255, 0.02);
}

.preview-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.workspace-panel {
  position: absolute;
  top: 84px;
  right: 20px;
  bottom: calc(var(--composer-height) + 26px);
  width: var(--workspace-panel-width, 860px);
  max-width: calc(100% - 32px);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  background: linear-gradient(168deg, rgba(22, 25, 33, 0.97), rgba(13, 15, 20, 0.99));
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 8px 24px rgba(0, 0, 0, 0.32),
    0 24px 48px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  z-index: 18;
}

.workspace-panel[hidden] {
  display: none !important;
}

.workspace-resize-handle {
  display: none;
}

.workspace-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.workspace-panel-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.workspace-panel-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.workspace-panel-subtitle {
  font-size: 11px;
  color: var(--muted);
  opacity: 0.7;
  padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,0.08);
}

.workspace-panel-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.workspace-panel-action,
.workspace-panel-close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  transition: background 0.15s, opacity 0.15s;
  opacity: 0.55;
}

.workspace-panel-action:hover,
.workspace-panel-close:hover {
  background: rgba(255,255,255,0.08);
  opacity: 1;
}

.workspace-panel-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  background: transparent;
}

.workspace-files-pane {
  min-width: 0;
  border-right: 1px solid rgba(255,255,255,0.06);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: rgba(0,0,0,0.12);
}

.workspace-files-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px 6px;
}

.workspace-files-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.workspace-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted-2);
  text-transform: uppercase;
  margin-bottom: 0;
}

.workspace-tree {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 4px 6px;
}

.workspace-tree::-webkit-scrollbar { width: 4px; }
.workspace-tree::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
.workspace-tree::-webkit-scrollbar-track { background: transparent; }

.workspace-files-footer {
  margin-top: auto;
  padding: 8px 8px 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.08);
}

.workspace-tree-dir {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.workspace-tree-dir-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding: 5px 8px;
}

.workspace-tree-children {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 8px;
  margin-left: 8px;
  border-left: 1px solid rgba(255,255,255,0.05);
}

.workspace-tree-file {
  width: 100%;
  text-align: left;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workspace-tree-file:hover {
  background: rgba(255,255,255,0.06);
}

.workspace-tree-file.is-selected {
  background: rgba(255,255,255,0.08);
  color: var(--accent, #60a5fa);
  font-weight: 500;
}

.cmd-blocks-panel {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cmd-block {
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: #1a1d24;
  overflow: hidden;
  font-family: "SFMono-Regular", Consolas, "IBM Plex Mono", monospace;
  font-size: 12.5px;
  line-height: 1.55;
  animation: ws-patch-in 0.25s ease-out;
}

.cmd-block-cmd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  color: #f59e0b;
  font-weight: 600;
  font-size: 12.5px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.025);
}

.cmd-block-cmd::before {
  content: "⬤";
  font-size: 7px;
  color: #f59e0b;
  opacity: 0.7;
}

.cmd-block-stdout,
.message-text pre.cmd-block-stdout {
  margin: 0;
  padding: 10px 14px;
  color: rgba(255,255,255,0.78);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 260px;
  overflow-y: auto;
  font-size: 12px;
  line-height: 1.6;
  border-radius: 0;
  border: none;
  background: transparent;
}

.cmd-block-stdout::-webkit-scrollbar { width: 5px; }
.cmd-block-stdout::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }

.cmd-block-stderr,
.message-text pre.cmd-block-stderr {
  margin: 0;
  padding: 10px 14px;
  color: #f87171;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 180px;
  overflow-y: auto;
  font-size: 12px;
  line-height: 1.6;
  background: rgba(248,113,113,0.04);
  border-radius: 0;
  border: none;
}

.cmd-block-stderr::-webkit-scrollbar { width: 5px; }
.cmd-block-stderr::-webkit-scrollbar-thumb { background: rgba(248,113,113,0.2); border-radius: 4px; }

.test-dashboard {
  display: flex;
  flex-direction: column;
}

.td-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 13px;
}

.td-header-icon {
  font-size: 16px;
  line-height: 1;
}

.td-status-pass { color: #3fb950; background: rgba(63,185,80,0.06); }
.td-status-fail { color: #f85149; background: rgba(248,81,73,0.06); }

.td-suites {
  display: flex;
  flex-direction: column;
  max-height: 300px;
  overflow-y: auto;
}

.td-suites::-webkit-scrollbar { width: 5px; }
.td-suites::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

.td-suite { display: flex; flex-direction: column; }

.td-suite-header {
  padding: 6px 14px 2px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-top: 1px solid rgba(255,255,255,0.04);
}

.td-suite:first-child .td-suite-header { border-top: none; }

.td-test {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 14px 3px 20px;
  font-size: 12.5px;
  line-height: 1.5;
}

.td-test-icon {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
}

.td-test-pass .td-test-icon { color: #3fb950; }
.td-test-fail .td-test-icon { color: #f85149; }
.td-test-skip .td-test-icon { color: #8b949e; }

.td-test-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.td-test-pass .td-test-name { color: rgba(255,255,255,0.72); }
.td-test-fail .td-test-name { color: #ffa198; }
.td-test-skip .td-test-name { color: #8b949e; }

.td-test-time {
  flex-shrink: 0;
  font-size: 11px;
  color: rgba(255,255,255,0.3);
}

.td-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  border-top: 1px solid rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.015);
}

.td-sum-pass { color: #3fb950; }
.td-sum-fail { color: #f85149; }
.td-sum-skip { color: #8b949e; }
.td-sum-time { color: rgba(255,255,255,0.4); }
.td-sum-sep { color: rgba(255,255,255,0.15); }

html[data-theme="light"] .td-status-pass { color: #1a7f37; background: rgba(26,127,55,0.06); }
html[data-theme="light"] .td-status-fail { color: #cf222e; background: rgba(207,34,46,0.06); }
html[data-theme="light"] .td-suite-header { color: rgba(0,0,0,0.45); border-color: rgba(0,0,0,0.06); }
html[data-theme="light"] .td-test-pass .td-test-name { color: #1f2328; }
html[data-theme="light"] .td-test-fail .td-test-name { color: #cf222e; }
html[data-theme="light"] .td-test-time { color: rgba(0,0,0,0.3); }
html[data-theme="light"] .td-summary { border-color: rgba(0,0,0,0.06); background: rgba(0,0,0,0.02); }
html[data-theme="light"] .td-sum-pass { color: #1a7f37; }
html[data-theme="light"] .td-sum-fail { color: #cf222e; }
html[data-theme="light"] .td-sum-time { color: rgba(0,0,0,0.35); }
html[data-theme="light"] .td-sum-sep { color: rgba(0,0,0,0.15); }

.cmd-block-rc {
  padding: 3px 14px 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  border-top: 1px solid rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.015);
}

.cmd-block-rc.cmd-exit-ok { color: #3fb950; }
.cmd-block-rc.cmd-exit-err { color: #f85149; }

html[data-theme="light"] .cmd-block {
  background: #f6f8fa;
  border-color: rgba(0,0,0,0.12);
}
html[data-theme="light"] .cmd-block-cmd {
  color: #9a6700;
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.08);
}
html[data-theme="light"] .cmd-block-cmd::before { color: #9a6700; }
html[data-theme="light"] .cmd-block-stdout { color: #1f2328; }
html[data-theme="light"] .cmd-block-stderr { color: #cf222e; background: rgba(207,34,46,0.04); }
html[data-theme="light"] .cmd-block-rc { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); }
html[data-theme="light"] .cmd-block-rc.cmd-exit-ok { color: #1a7f37; }
html[data-theme="light"] .cmd-block-rc.cmd-exit-err { color: #cf222e; }

#d0, body > [id^="dmmd-"], body > svg[id^="mmd-"], body > .mermaid-error {
  display: none !important;
  position: absolute !important;
  left: -9999px !important;
}

.mermaid-block {
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: #1a1d24;
  overflow: hidden;
}

.mermaid-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.025);
  font-size: 12px;
  color: rgba(255,255,255,0.45);
}

.mermaid-render {
  padding: 12px;
  overflow: auto;
  max-height: 420px;
}

.mermaid-render pre.mermaid,
.message-text pre.mermaid {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0;
  text-align: center;
}

.mermaid-render svg {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
}

.mermaid-render svg text {
  fill: rgba(255,255,255,0.85) !important;
}

.mermaid-render svg .node rect,
.mermaid-render svg .node polygon,
.mermaid-render svg .node circle,
.mermaid-render svg .node ellipse,
.mermaid-render svg .node path {
  stroke: rgba(255,255,255,0.2) !important;
}

.mermaid-render svg .edgePath .path {
  stroke: rgba(255,255,255,0.4) !important;
}

.mermaid-render svg marker path {
  fill: rgba(255,255,255,0.4) !important;
}

.mermaid-render svg .edgeLabel {
  background-color: #1a1d24 !important;
  color: rgba(255,255,255,0.7) !important;
}

.mermaid-render svg .edgeLabel rect {
  fill: #1a1d24 !important;
  opacity: 1 !important;
}

html[data-theme="light"] .mermaid-render svg text {
  fill: #1f2328 !important;
}
html[data-theme="light"] .mermaid-render svg .node rect,
html[data-theme="light"] .mermaid-render svg .node polygon,
html[data-theme="light"] .mermaid-render svg .node circle {
  stroke: rgba(0,0,0,0.15) !important;
}
html[data-theme="light"] .mermaid-render svg .edgePath .path {
  stroke: rgba(0,0,0,0.3) !important;
}
html[data-theme="light"] .mermaid-render svg marker path {
  fill: rgba(0,0,0,0.3) !important;
}
html[data-theme="light"] .mermaid-render svg .edgeLabel {
  background-color: #f6f8fa !important;
  color: #1f2328 !important;
}
html[data-theme="light"] .mermaid-render svg .edgeLabel rect {
  fill: #f6f8fa !important;
}

html[data-theme="light"] .mermaid-block {
  background: #f6f8fa;
  border-color: rgba(0,0,0,0.1);
}
.mermaid-fallback {
  margin: 0;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
  background: transparent;
  border: none;
  border-radius: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.message-text pre.mermaid-fallback {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 12px 14px !important;
}

html[data-theme="light"] .mermaid-fallback { color: rgba(0,0,0,0.55); }

html[data-theme="light"] .mermaid-block-head {
  color: rgba(0,0,0,0.4);
  border-color: rgba(0,0,0,0.06);
  background: rgba(0,0,0,0.02);
}

.ws-patches-panel {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

@keyframes ws-patch-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.ws-patch-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 13px;
  font-family: "SFMono-Regular", Consolas, "IBM Plex Mono", monospace;
  flex-wrap: wrap;
  animation: ws-patch-in 0.25s ease-out;
}

.ws-patch-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

.ws-patch-action-created .ws-patch-icon { background: rgba(63,185,80,0.18); color: #3fb950; }
.ws-patch-action-updated .ws-patch-icon { background: rgba(210,153,34,0.18); color: #d29922; }
.ws-patch-action-deleted .ws-patch-icon { background: rgba(248,81,73,0.18); color: #f85149; }
.ws-patch-action-renamed .ws-patch-icon { background: rgba(130,80,223,0.18); color: #8250df; }

.ws-patch-label {
  color: var(--text-secondary, rgba(255,255,255,0.5));
  font-size: 12px;
  text-transform: capitalize;
}

.ws-patch-file {
  color: var(--text, #fff);
  font-weight: 600;
}

.ws-patch-dir {
  color: var(--text-secondary, rgba(255,255,255,0.4));
  font-size: 12px;
  margin-left: -4px;
}

.ws-patch-dir::before { content: "/"; }

.ws-patch-diff {
  margin-left: auto;
  display: flex;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
}

.ws-patch-added { color: #3fb950; }
.ws-patch-removed { color: #f85149; }

[data-theme="light"] .ws-patch-item {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .ws-patch-file { color: #1f2328; }
[data-theme="light"] .ws-patch-label { color: #656d76; }
[data-theme="light"] .ws-patch-dir { color: #656d76; }
[data-theme="light"] .ws-patch-action-created .ws-patch-icon { background: rgba(26,127,55,0.12); color: #1a7f37; }
[data-theme="light"] .ws-patch-action-updated .ws-patch-icon { background: rgba(154,103,0,0.12); color: #9a6700; }
[data-theme="light"] .ws-patch-action-deleted .ws-patch-icon { background: rgba(207,34,46,0.12); color: #cf222e; }
[data-theme="light"] .ws-patch-added { color: #1a7f37; }
[data-theme="light"] .ws-patch-removed { color: #cf222e; }

.workspace-editor-pane {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: rgba(0,0,0,0.06);
}

.workspace-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.015);
  min-height: 36px;
}

.workspace-current-file {
  display: none;
}

.workspace-editor-main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  flex: 1 1 0;
  overflow: hidden;
}

.workspace-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding: 0;
}

.workspace-tabs::-webkit-scrollbar { height: 0; }

.workspace-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 0;
  border: none;
  border-right: 1px solid rgba(255,255,255,0.04);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  flex: 0 0 auto;
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
  position: relative;
}

.workspace-tab:hover {
  color: var(--text);
  background: rgba(255,255,255,0.04);
}

.workspace-tab.is-active {
  color: var(--text);
  background: rgba(255,255,255,0.06);
}

.workspace-tab.is-active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent, #60a5fa);
  border-radius: 2px 2px 0 0;
}

.workspace-tab-label {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-tab-close {
  opacity: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: opacity 0.12s, background 0.12s;
}

.workspace-tab:hover .workspace-tab-close {
  opacity: 0.6;
}

.workspace-tab-close:hover {
  opacity: 1 !important;
  background: rgba(255,255,255,0.1);
}

.workspace-editor-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-right: 8px;
}

.workspace-monaco-host,
.workspace-diff-host {
  flex: 1;
  min-height: 0;
}

.workspace-monaco-host[hidden],
.workspace-diff-host[hidden] {
  display: none !important;
}

.workspace-editor {
  flex: 1;
  min-height: 0;
  width: 100%;
  border: 0;
  outline: 0;
  resize: none;
  padding: 12px 16px;
  background: transparent;
  color: var(--text);
  font: 13px/1.65 "SFMono-Regular", Consolas, "IBM Plex Mono", "Liberation Mono", Menlo, monospace;
  tab-size: 2;
}

.workspace-output-pane {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 0;
  background: rgba(0,0,0,0.15);
  min-height: 100px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.workspace-output-pane .workspace-section-label {
  padding: 8px 12px 4px;
  margin: 0;
  font-size: 10px;
  opacity: 0.6;
}

.workspace-output {
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 10px 10px;
  flex: 1;
  min-height: 0;
}

.workspace-output::-webkit-scrollbar { width: 4px; }
.workspace-output::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

.workspace-output-entry {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.workspace-output-line,
.workspace-output-meta {
  font-size: 11px;
  color: var(--muted);
  opacity: 0.7;
}

.workspace-output-stream {
  margin: 0;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.04);
  background: rgba(0,0,0,0.3);
  color: rgba(255,255,255,0.85);
  overflow: auto;
  font: 12px/1.5 "SFMono-Regular", Consolas, "IBM Plex Mono", monospace;
}

.workspace-output-stream.stderr {
  border-color: rgba(239, 68, 68, 0.2);
  color: rgba(248,113,113,0.9);
}

.workspace-output-line.sandbox-cmd {
  font-family: "SFMono-Regular", Consolas, "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--accent, #60a5fa);
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(96,165,250,0.06);
  border-left: 2px solid var(--accent, #60a5fa);
}

.workspace-output-meta.exit-ok {
  color: #3fb950;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.workspace-output-meta.exit-err {
  color: #f85149;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

html[data-theme="light"] .workspace-output-line.sandbox-cmd {
  color: var(--accent, #2563eb);
  background: rgba(37,99,235,0.06);
  border-color: var(--accent, #2563eb);
}

html[data-theme="light"] .workspace-output-meta.exit-ok { color: #1a7f37; }
html[data-theme="light"] .workspace-output-meta.exit-err { color: #cf222e; }

/* Light theme */
html[data-theme="light"] .workspace-panel {
  background: linear-gradient(168deg, rgba(249, 250, 252, 0.98), rgba(240, 243, 248, 0.99));
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.04),
    0 8px 24px rgba(0, 0, 0, 0.08),
    0 24px 48px rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .workspace-panel-head {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(0,0,0,0.06);
}

html[data-theme="light"] .workspace-panel-subtitle {
  border-color: rgba(0,0,0,0.1);
}

html[data-theme="light"] .workspace-panel-action,
html[data-theme="light"] .workspace-panel-close {
  opacity: 0.5;
}

html[data-theme="light"] .workspace-panel-action:hover,
html[data-theme="light"] .workspace-panel-close:hover {
  background: rgba(0,0,0,0.06);
  opacity: 1;
}

html[data-theme="light"] .workspace-files-pane {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.06);
}

html[data-theme="light"] .workspace-files-footer {
  border-color: rgba(0,0,0,0.06);
  background: rgba(0,0,0,0.02);
}

html[data-theme="light"] .workspace-tree-file {
  background: transparent;
}

html[data-theme="light"] .workspace-tree-file:hover {
  background: rgba(0,0,0,0.04);
}

html[data-theme="light"] .workspace-tree-file.is-selected {
  background: rgba(0,0,0,0.06);
  color: var(--accent, #2563eb);
}

html[data-theme="light"] .workspace-editor-head {
  background: rgba(255,255,255,0.4);
  border-color: rgba(0,0,0,0.06);
}

html[data-theme="light"] .workspace-tab {
  border-color: rgba(0,0,0,0.04);
}

html[data-theme="light"] .workspace-tab:hover {
  background: rgba(0,0,0,0.03);
}

html[data-theme="light"] .workspace-tab.is-active {
  background: rgba(0,0,0,0.04);
}

html[data-theme="light"] .workspace-tab.is-active::after {
  background: var(--accent, #2563eb);
}

html[data-theme="light"] .workspace-output-pane {
  background: rgba(0,0,0,0.025);
  border-color: rgba(0,0,0,0.06);
}

html[data-theme="light"] .workspace-output-stream {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.06);
  color: #1f2328;
}

html[data-theme="light"] .workspace-editor-pane {
  background: rgba(0,0,0,0.01);
}

html[data-theme="light"] .workspace-tree-children {
  border-color: rgba(0,0,0,0.06);
}

/* Theme variants */
html[data-theme="ember"] .workspace-panel {
  background:
    radial-gradient(circle at 18% 14%, rgba(212, 165, 116, 0.06), transparent 24%),
    linear-gradient(168deg, rgba(24, 19, 16, 0.97), rgba(16, 13, 11, 0.99));
}

html[data-theme="forest"] .workspace-panel {
  background:
    radial-gradient(circle at 16% 16%, rgba(104, 178, 142, 0.06), transparent 24%),
    linear-gradient(168deg, rgba(14, 24, 21, 0.97), rgba(10, 18, 15, 0.99));
}

html[data-theme="graphite"] .workspace-panel {
  background:
    radial-gradient(circle at 18% 14%, rgba(140, 184, 232, 0.05), transparent 24%),
    linear-gradient(168deg, rgba(18, 21, 28, 0.97), rgba(12, 14, 19, 0.99));
}

/* Responsive */
@media (max-width: 1280px) {
  .workspace-panel-body {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .workspace-output-pane {
    max-height: 35%;
  }
}

@media (max-width: 760px) {
  .workspace-panel {
    top: 72px;
    right: 8px;
    left: 8px;
    bottom: calc(var(--composer-height) + 14px);
    width: auto;
    max-width: none;
    border-radius: 12px;
  }

  .workspace-panel-body {
    grid-template-columns: 1fr;
    grid-template-rows: 160px minmax(0, 1fr);
  }

  .workspace-files-pane {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  .workspace-output-pane {
    max-height: 30%;
  }
}

@media (min-width: 981px) {
  .chat-layout.has-preview .preview-resize-handle {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    width: 10px;
    transform: translateX(-50%);
    cursor: col-resize;
    z-index: 2;
  }

  .chat-layout.has-preview .preview-resize-handle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 72px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    transform: translate(-50%, -50%);
  }

  .chat-layout.has-preview .chat-header {
    padding-right: calc(var(--preview-panel-width) + 28px);
  }

  .chat-layout.has-preview .chat-feed {
    padding-right: calc(var(--preview-panel-width) + 28px);
  }

  .chat-layout.has-preview .composer-wrap {
    right: calc(var(--preview-panel-width) + 30px);
  }

  .chat-layout.has-preview .preview-panel {
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--preview-panel-width);
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 1px solid var(--border);
    border-radius: 18px 0 0 18px;
    box-shadow: none;
    background: linear-gradient(180deg, rgba(17, 20, 26, 0.96), rgba(11, 13, 18, 0.98));
  }

  .chat-layout.has-workspace .chat-header {
    padding-right: calc(var(--workspace-panel-width) + 28px);
  }

  .chat-layout.has-workspace .chat-feed {
    padding-right: calc(var(--workspace-panel-width) + 28px);
  }

  .chat-layout.has-workspace .composer-wrap {
    right: calc(var(--workspace-panel-width) + 30px);
  }

  .chat-layout.has-workspace .workspace-panel {
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--workspace-panel-width);
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 1px solid var(--border);
    border-radius: 18px 0 0 18px;
    box-shadow: none;
  }

  .chat-layout.has-workspace .workspace-resize-handle {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    width: 10px;
    transform: translateX(-50%);
    cursor: col-resize;
    z-index: 2;
  }

  .chat-layout.has-workspace .workspace-resize-handle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 72px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    transform: translate(-50%, -50%);
  }
}

body.is-resizing-preview {
  cursor: col-resize;
  user-select: none;
}

body.is-resizing-workspace {
  cursor: col-resize;
  user-select: none;
}

.chat-header {
  padding: 8px 18px 0;
  position: relative;
  z-index: 18;
  overflow: visible;
}

.chat-header-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
}

.chat-header-summary {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  justify-self: start;
}

.chat-header-title {
  font-size: 18px;
  font-weight: 700;
}

.header-model-picker {
  /* Fixed-ish desktop width so the trigger pill and the popover
     underneath share the same footprint. Shrinks on narrow desktops
     via the vw cap; mobile/tablet media queries below still take
     over for small viewports. */
  width: min(440px, 50vw);
  min-width: 340px;
  max-width: min(520px, 50vw);
  justify-self: center;
}

.chat-header-main > .token-usage-badge {
  justify-self: end;
}

.token-usage-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  height: 28px;
  padding: 0 12px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  backdrop-filter: blur(16px) saturate(140%) brightness(1.04);
  -webkit-backdrop-filter: blur(16px) saturate(140%) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.14);
  color: var(--muted);
  font-size: 12px;
  position: relative;
  overflow: hidden;
}

.token-usage-summary-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-strong);
  font-size: 10px;
  line-height: 1;
}

.token-usage-summary-badge[hidden] {
  display: none !important;
}

.token-usage-badge::before,
.connection-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 32%),
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.08), transparent 36%);
  opacity: 0.68;
  pointer-events: none;
}

.token-usage-badge > *,
.connection-badge > * {
  position: relative;
  z-index: 1;
}

.token-usage-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.token-usage-label {
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
}

.token-usage-divider {
  color: var(--muted-2);
}

.header-model-picker .model-picker-btn {
  min-height: 38px;
  align-items: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  backdrop-filter: blur(16px) saturate(140%) brightness(1.04);
  -webkit-backdrop-filter: blur(16px) saturate(140%) brightness(1.04);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 8px 30px rgba(0, 0, 0, 0.16);
  position: relative;
  overflow: hidden;
}

.header-model-picker .model-picker-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 32%),
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.12), transparent 36%);
  opacity: 0.75;
  pointer-events: none;
}

.header-model-picker .model-picker-btn > * {
  position: relative;
  z-index: 1;
}

.header-model-picker .model-picker-menu {
  top: calc(100% + 10px);
  bottom: auto;
  /* left:0 + right:0 are inherited from the base .model-picker-menu
     rule, so the popover matches the trigger pill width exactly. */
}

.connection-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  backdrop-filter: blur(16px) saturate(140%) brightness(1.04);
  -webkit-backdrop-filter: blur(16px) saturate(140%) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.14);
  color: var(--muted);
  font-size: 12px;
  position: relative;
  overflow: hidden;
}

.connection-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}

.connection-badge[data-state="checking"] .connection-dot {
  background: var(--accent);
}

.connection-badge[data-state="connected"] .connection-dot {
  background: #7fc994;
}

.connection-badge[data-state="error"] .connection-dot {
  background: #de8576;
}

.chat-feed {
  min-height: 0;
  overflow: auto;
  padding: 6px 0 calc(var(--composer-height) + 28px);
  overscroll-behavior: contain;
}

.empty-state {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 40px 24px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 46%, rgba(74, 108, 255, 0.08), rgba(74, 108, 255, 0) 22%),
    radial-gradient(circle at 50% 52%, rgba(88, 190, 255, 0.06), rgba(88, 190, 255, 0) 28%);
}

.site-plasma-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.42;
  mix-blend-mode: normal;
  filter: blur(8px) saturate(105%);
}

html[data-theme="graphite"] .site-plasma-canvas {
  opacity: 0.58;
  filter: blur(5px) saturate(116%);
}

html[data-theme="ember"] .site-plasma-canvas {
  opacity: 0.28;
  filter: blur(1px) saturate(108%);
}

@media (max-width: 760px) {
  html[data-theme="graphite"] .site-plasma-canvas {
    opacity: 0.54;
    filter: blur(5px) saturate(112%);
  }

  html[data-theme="forest"] .site-plasma-canvas {
    opacity: 0.34;
    filter: blur(3px) saturate(102%);
  }
}

html[data-theme="light"] .site-plasma-canvas {
  opacity: 0.07;
  filter: blur(16px) saturate(90%);
}

html[data-theme="aurora"] .site-plasma-canvas {
  opacity: 0.62;
  filter: blur(4px) saturate(120%);
}

html[data-theme="sunset"] .site-plasma-canvas {
  opacity: 0.46;
  filter: blur(7px) saturate(118%);
}

html[data-theme="sakura"] .site-plasma-canvas {
  opacity: 0.78;
  filter: blur(1.4px) saturate(112%);
}

html[data-theme="light"] .token-usage-badge,
html[data-theme="light"] .connection-badge,
html[data-theme="light"] .header-model-picker .model-picker-btn,
html[data-theme="light"] .composer-shell,
html[data-theme="light"] .model-picker-menu,
html[data-theme="light"] .web-mode-menu,
html[data-theme="light"] .composer-plus-panel,
html[data-theme="light"] .sidebar::before {
  border-color: rgba(31, 49, 68, 0.1);
  background: linear-gradient(180deg, rgba(244, 247, 251, 0.94), rgba(233, 239, 246, 0.9));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 12px 24px rgba(116, 137, 162, 0.1),
    0 2px 6px rgba(116, 137, 162, 0.06);
  backdrop-filter: blur(14px) saturate(115%) brightness(1.02);
  -webkit-backdrop-filter: blur(14px) saturate(115%) brightness(1.02);
}

html[data-theme="light"] .token-usage-badge::before,
html[data-theme="light"] .connection-badge::before,
html[data-theme="light"] .header-model-picker .model-picker-btn::before,
html[data-theme="light"] .composer-shell::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), transparent 46%),
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.24), transparent 34%);
  opacity: 0.52;
}

html[data-theme="light"] .sidebar-btn,
html[data-theme="light"] .secondary-btn,
html[data-theme="light"] .icon-btn,
html[data-theme="light"] .composer-tool-btn,
html[data-theme="light"] .composer-refresh-btn,
html[data-theme="light"] .sidebar-action-btn,
html[data-theme="light"] .session-item,
html[data-theme="light"] .composer-plus-btn,
html[data-theme="light"] .composer-mic-btn,
html[data-theme="light"] .composer-plus-action,
html[data-theme="light"] .model-option,
html[data-theme="light"] .web-mode-option,
html[data-theme="light"] .model-picker-refresh,
html[data-theme="light"] .model-picker-filter-btn,
html[data-theme="light"] .sidebar-icon-btn,
html[data-theme="light"] .sidebar-collapse-btn {
  border-color: rgba(31, 49, 68, 0.09);
  background: linear-gradient(180deg, rgba(242, 246, 251, 0.92), rgba(231, 238, 245, 0.96));
  color: var(--text);
  box-shadow: 0 6px 14px rgba(125, 145, 170, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.46);
}

html[data-theme="light"] .sidebar-card,
html[data-theme="light"] .source-card,
html[data-theme="light"] .attachment-chip,
html[data-theme="light"] .table-wrap {
  background: rgba(241, 245, 250, 0.82);
  border-color: rgba(31, 49, 68, 0.09);
}

html[data-theme="light"] .message-action-btn,
html[data-theme="light"] .message-meta-chip,
html[data-theme="light"] .thinking-toggle {
  background: rgba(235, 241, 247, 0.92);
  border-color: rgba(31, 49, 68, 0.1);
}

html[data-theme="light"] .message-row.user .avatar {
  background: #d5e6d8;
  color: #183228;
}

html[data-theme="light"] .message-row.user .message-main {
  border-color: rgba(94, 143, 200, 0.14);
  background: linear-gradient(180deg, #ddeaf9, #d2e3f7);
  box-shadow: 0 6px 16px rgba(132, 161, 198, 0.08);
}

html[data-theme="light"] .thinking-card {
  border-color: rgba(31, 49, 68, 0.1);
  background: linear-gradient(180deg, rgba(242, 246, 250, 0.96), rgba(232, 238, 245, 0.92));
  box-shadow: 0 12px 26px rgba(117, 139, 165, 0.08);
}

html[data-theme="light"] .thinking-row:not(.is-finished) .thinking-card {
  border-color: rgba(94, 143, 200, 0.18);
  box-shadow: 0 0 0 1px rgba(94, 143, 200, 0.04), 0 10px 22px rgba(116, 140, 170, 0.08);
}

html[data-theme="light"] .thinking-row:not(.is-finished) .thinking-card::before {
  background: linear-gradient(115deg, transparent 18%, rgba(94, 143, 200, 0.08) 35%, rgba(255, 255, 255, 0.5) 50%, rgba(94, 143, 200, 0.08) 65%, transparent 82%);
}

html[data-theme="light"] .thinking-row:not(.is-finished) .thinking-card::after {
  background: radial-gradient(circle, rgba(94, 143, 200, 0.08), rgba(255, 255, 255, 0.08) 52%, transparent 74%);
}

html[data-theme="light"] .thinking-body,
html[data-theme="light"] .thinking-head,
html[data-theme="light"] .thinking-toggle,
html[data-theme="light"] .thinking-meta {
  color: #405160;
}

html[data-theme="light"] .thinking-dot {
  background: #4d86c1;
}

html[data-theme="light"] #messageInput {
  background: rgba(244, 247, 251, 0.98);
  border-color: rgba(31, 49, 68, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

html[data-theme="light"] .send-btn {
  background: linear-gradient(180deg, #7ea9da, #6a96cc);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 8px 16px rgba(109, 155, 212, 0.14);
}

html[data-theme="light"] .empty-state {
  background:
    radial-gradient(circle at 50% 44%, rgba(113, 156, 214, 0.045), rgba(113, 156, 214, 0) 22%),
    radial-gradient(circle at 50% 54%, rgba(126, 186, 228, 0.035), rgba(126, 186, 228, 0) 28%);
}

html[data-theme="light"] .empty-state p {
  color: #6d7d8e;
}

html[data-theme="light"] .empty-state h3 {
  text-shadow: none;
}

html[data-theme="light"] .message-text blockquote {
  border-left-color: rgba(94, 143, 200, 0.22);
}

html[data-theme="light"] .message-text code,
html[data-theme="light"] .message-text th,
html[data-theme="light"] .message-text pre,
html[data-theme="light"] .code-copy-btn,
html[data-theme="light"] .code-preview-btn {
  background: #eef3f8;
}

html[data-theme="light"] .message-text pre,
html[data-theme="light"] .code-copy-btn,
html[data-theme="light"] .code-preview-btn,
html[data-theme="light"] .message-text th {
  border-color: rgba(31, 49, 68, 0.1);
}

html[data-theme="light"] .preview-panel {
  background: linear-gradient(180deg, rgba(244, 247, 251, 0.98), rgba(232, 238, 245, 0.96));
}

html[data-theme="light"] .preview-frame {
  background: #f7f9fc;
}

@media (max-width: 980px) {
  .preview-panel {
    top: 72px;
    right: 14px;
    left: 14px;
    width: auto;
    bottom: calc(var(--composer-height) + 18px);
  }
}

html[data-theme="light"] .message-text pre .token-string {
  color: #2f8a58;
}

html[data-theme="light"] .message-text pre .token-number {
  color: #2f6fb1;
}

html[data-theme="light"] .message-text pre .token-comment {
  color: #7d8791;
}

html[data-theme="light"] .model-picker-badge,
html[data-theme="light"] .capability-badge {
  border: 1px solid rgba(31, 49, 68, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

html[data-theme="light"] .capability-fast {
  background: rgba(116, 183, 136, 0.18);
  color: #3d8a56;
}

html[data-theme="light"] .capability-reasoning {
  background: rgba(105, 145, 216, 0.18);
  color: #4d73b2;
}

html[data-theme="light"] .capability-coding {
  background: rgba(110, 156, 232, 0.18);
  color: #4e76bf;
}

html[data-theme="light"] .capability-tools {
  background: rgba(94, 170, 224, 0.18);
  color: #417cae;
}

html[data-theme="light"] .capability-vision {
  background: rgba(220, 150, 201, 0.2);
  color: #b16195;
}

.empty-state > div {
  max-width: 480px;
  text-align: center;
  position: relative;
  z-index: 1;
  animation: empty-state-rise 560ms var(--ease) both;
}

.empty-state > div::before,
.empty-state > div::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: none;
}

.empty-state .orb {
  position: relative;
  width: 60px;
  aspect-ratio: 1;
  margin: 0 auto 16px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(230, 251, 255, 0.98) 0%, rgba(143, 242, 255, 0.92) 18%, rgba(92, 165, 255, 0.92) 38%, rgba(56, 76, 173, 0.96) 68%, rgba(18, 22, 44, 1) 100%);
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.28),
    0 0 38px rgba(96, 177, 255, 0.2),
    inset -8px -10px 18px rgba(15, 22, 52, 0.46),
    inset 8px 10px 18px rgba(214, 248, 255, 0.16);
  animation: empty-state-orb 6.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.empty-state h3 {
  margin: 0;
  letter-spacing: 0.01em;
  text-shadow: 0 0 18px rgba(120, 203, 255, 0.08);
}

.empty-state p {
  margin: 0;
  color: #b4c0d8;
}

.empty-state h3 {
  animation: empty-state-fade 720ms 90ms var(--ease) both;
}

.empty-state p {
  animation: empty-state-fade 820ms 160ms var(--ease) both;
}

.empty-state-quote {
  margin: 6px 0 0;
  font-size: 13.5px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
  opacity: 0.6;
  animation: empty-state-quote-fade 900ms 280ms var(--ease) both;
}

.empty-hints {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
  animation: empty-state-fade 900ms 220ms var(--ease) both;
}

.empty-hint-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px 7px 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  font-family: var(--sans);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.empty-hint-chip svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.6;
}

.empty-hint-chip:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.9);
}

html[data-theme="light"] .empty-hint-chip {
  border-color: rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.03);
  color: rgba(0,0,0,0.6);
}
html[data-theme="light"] .empty-hint-chip:hover {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.18);
  color: rgba(0,0,0,0.8);
}

@media (min-width: 769px) {
  .chat-layout.is-empty .chat-feed {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .chat-layout.is-empty .empty-state {
    min-height: 0;
    padding: 0 24px;
    overflow: visible;
  }

  .chat-layout.is-empty .empty-state > div {
    max-width: none;
    width: min(680px, 90vw);
  }

  .empty-state .composer-wrap {
    position: static !important;
    width: min(680px, 90vw);
    margin: 18px auto 0;
    pointer-events: auto;
    transform: none !important;
  }

  .empty-state .composer-shell {
    pointer-events: auto;
  }

  .chat-layout.is-empty .empty-hints {
    margin-top: 8px;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .empty-hints { display: none; }
}

.empty-state::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(109, 187, 255, 0.16) 0%, rgba(88, 144, 255, 0.08) 24%, rgba(88, 144, 255, 0.02) 46%, rgba(88, 144, 255, 0) 72%),
    conic-gradient(from 0deg, rgba(115, 231, 255, 0.12), rgba(255, 255, 255, 0.015), rgba(96, 121, 255, 0.14), rgba(255, 255, 255, 0.02), rgba(115, 231, 255, 0.12));
  filter: blur(18px);
  animation: empty-state-glow 7.6s ease-in-out infinite;
}

.empty-state::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160px;
  height: 160px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(120, 203, 255, 0.18);
  box-shadow:
    0 0 0 18px rgba(113, 206, 255, 0.04),
    0 0 0 42px rgba(93, 139, 255, 0.03),
    inset 0 0 30px rgba(130, 225, 255, 0.05);
  opacity: 0.9;
  animation: empty-state-rings 12s linear infinite;
}

.empty-state > div::before,
.empty-state > div::after {
  display: none;
}

.empty-state .orb::before,
.empty-state .orb::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(109, 203, 255, 0.2);
  opacity: 0.8;
}

.empty-state .orb::before {
  transform: rotate(18deg) scaleX(1.46) scaleY(0.54);
  animation: empty-state-ring-spin 8.8s linear infinite;
}

.empty-state .orb::after {
  inset: -24px;
  border-color: rgba(132, 164, 255, 0.16);
  transform: rotate(-24deg) scaleX(1.92) scaleY(0.42);
  animation: empty-state-ring-spin-reverse 10.8s linear infinite;
}

.thinking-row,
.message-block {
  max-width: none;
  margin: 0 58px 0 50px;
}

.message-block {
  padding: 16px 0;
}

.message-block.is-new {
  animation: ui-message-enter 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.thinking-row {
  padding: 4px 0 12px 0;
}

.thinking-card {
  width: min(960px, 100%);
  padding: 7px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(35, 35, 34, 0.92), rgba(30, 30, 29, 0.96));
  position: relative;
  overflow: hidden;
}

.thinking-row:not(.is-finished) .thinking-card {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent-halo), 0 18px 36px rgba(0, 0, 0, 0.18);
}

.thinking-row:not(.is-finished) .thinking-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(115deg, transparent 18%, var(--accent-halo) 35%, rgba(255, 255, 255, 0.08) 50%, var(--accent-halo) 65%, transparent 82%);
  transform: translateX(-100%);
  animation: thinking-sheen 2.8s linear infinite;
  pointer-events: none;
}

.thinking-row:not(.is-finished) .thinking-card::after {
  content: "";
  position: absolute;
  inset: auto -18% -55% auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft), rgba(255, 255, 255, 0.02) 50%, transparent 72%);
  animation: thinking-orbit 4.6s ease-in-out infinite;
  pointer-events: none;
}

.thinking-row.is-finished .thinking-card {
  border-color: var(--border-strong);
}

.thinking-head {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.thinking-spacer {
  flex: 1;
}

.thinking-toggle {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  transition: border-color var(--ease), background var(--ease), color var(--ease), transform var(--ease), opacity var(--ease);
}

.thinking-toggle:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-strong);
  color: var(--text);
}

.thinking-toggle:active {
  transform: scale(0.985);
}

.thinking-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: thinking-pulse 1s ease-in-out infinite;
}

.thinking-body {
  margin-top: 8px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow: hidden;
  max-height: 0;
  opacity: 1;
  transition: max-height 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms cubic-bezier(0.22, 1, 0.36, 1), margin-top 220ms cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  z-index: 1;
}

.thinking-row.is-collapsed .thinking-body {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}

.thinking-row.is-finished .thinking-dot {
  animation: none;
  opacity: 0.8;
}

.message-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
}

.message-row.user {
  grid-template-columns: minmax(0, 1fr) 36px;
}

.message-row.user .avatar {
  order: 2;
  background: #2b463f;
}

.message-row.user .avatar::before {
  content: "Y";
}

.message-row.assistant .avatar::before {
  content: "AI";
}

.message-main {
  min-width: 0;
}

.message-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.message-meta-chip {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
}

.message-meta-chip.model {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
}

.message-meta-chip.tool {
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.message-role {
  display: none;
}

.message-actions {
  display: flex;
  justify-content: flex-start;
  gap: 6px;
  margin-top: 8px;
  padding-left: 50px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  flex-wrap: wrap;
  pointer-events: none;
}

.message-block:hover .message-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.message-block.user .message-actions {
  justify-content: flex-end;
  padding-left: 0;
  padding-right: 50px;
}

.message-action-btn {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-size: 11px;
}

.message-action-btn.danger {
  color: var(--danger-text);
}

.message-text {
  color: var(--text);
  font-size: 15px;
  line-height: 1.75;
  white-space: normal;
}

.message-text p,
.message-text ul,
.message-text ol,
.message-text .table-wrap,
.message-text blockquote,
.message-text hr,
.message-text pre,
.message-text h1,
.message-text h2,
.message-text h3,
.message-text h4,
.message-text h5,
.message-text h6 {
  margin: 0 0 14px;
}

.message-text p:last-child,
.message-text ul:last-child,
.message-text ol:last-child,
.message-text .table-wrap:last-child,
.message-text blockquote:last-child,
.message-text hr:last-child,
.message-text pre:last-child,
.message-text h1:last-child,
.message-text h2:last-child,
.message-text h3:last-child,
.message-text h4:last-child,
.message-text h5:last-child,
.message-text h6:last-child {
  margin-bottom: 0;
}

.message-text h1,
.message-text h2,
.message-text h3,
.message-text h4,
.message-text h5,
.message-text h6 {
  line-height: 1.25;
  font-weight: 700;
}

.message-text h1 { font-size: 1.7em; }
.message-text h2 { font-size: 1.45em; }
.message-text h3 { font-size: 1.25em; }
.message-text h4 { font-size: 1.12em; }
.message-text h5 { font-size: 1.02em; }
.message-text h6 { font-size: 0.95em; color: var(--muted); }

.message-text ul,
.message-text ol {
  padding-left: 22px;
}

.message-text blockquote {
  border-left: 2px solid rgba(255,255,255,0.14);
  padding-left: 14px;
  color: var(--muted);
}

.message-text hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
}

.message-text a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid var(--link-border);
}

.message-text a:hover {
  border-bottom-color: var(--link-border-hover);
}

.message-text a:visited {
  color: var(--link-visited);
}

.message-text s {
  color: var(--muted);
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}

.message-text table {
  width: 100%;
  border-collapse: collapse;
  min-width: 420px;
}

.message-text th,
.message-text td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.message-text th {
  color: var(--text);
  font-weight: 700;
  background: rgba(255, 255, 255, 0.04);
}

.message-text tbody tr:last-child td {
  border-bottom: 0;
}

.message-text code {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.92em;
  background: rgba(255,255,255,0.06);
  padding: 2px 6px;
  border-radius: 8px;
}

.message-text .katex {
  font-size: 1.3em;
  line-height: 1;
}

.message-text .katex-display {
  font-size: 1.16em;
}

.math-block {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 0;
}

.message-text pre {
  position: relative;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px 14px;
  overflow: auto;
}

.code-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.message-text pre code {
  background: transparent;
  padding: 0;
  display: block;
  line-height: 1.6;
}

.message-text pre .token-keyword {
  color: var(--code-keyword);
}

.message-text pre .token-string {
  color: #9fd0a8;
}

.message-text pre .token-number {
  color: #8dc3ff;
}

.message-text pre .token-comment {
  color: #8b857d;
}

.code-block-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.code-preview-btn,
.code-copy-btn {
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #272725;
  color: var(--text);
  font-size: 12px;
}

.code-copy-btn {
  position: static;
}

.message-row.user .message-main {
  justify-self: end;
  max-width: min(680px, 100%);
  background: var(--user);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 14px 16px;
}

.message-row.assistant .message-main {
  padding-top: 2px;
}

.message-image {
  max-width: 280px;
  border-radius: 14px;
  border: 1px solid var(--border);
  margin-bottom: 10px;
  display: block;
}

.composer-wrap {
  position: fixed;
  left: calc(12px + var(--sidebar-width) + var(--app-gap) + 32px);
  right: 44px;
  bottom: 14px;
  padding: 0;
  background: transparent;
  z-index: 26;
  pointer-events: none;
  transition: left 320ms cubic-bezier(0.22, 1, 0.36, 1), right 320ms cubic-bezier(0.22, 1, 0.36, 1), bottom 220ms ease;
}

html.sidebar-collapsed .composer-wrap {
  left: 44px;
}

.composer-shell {
  margin: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  padding: 4px 10px 10px;
  backdrop-filter: blur(16px) saturate(140%) brightness(1.04);
  -webkit-backdrop-filter: blur(16px) saturate(140%) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 12px 28px rgba(0, 0, 0, 0.16);
  pointer-events: auto;
  position: relative;
  overflow: visible;
  transition: padding 220ms ease, box-shadow 220ms ease, border-color 180ms ease;
}

.composer-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 32%),
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.08), transparent 36%);
  opacity: 0.68;
  pointer-events: none;
}

.composer-shell > * {
  position: relative;
  z-index: 1;
}

.attachment-tray {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 12px;
}

.attachment-chip button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
}

.composer-shell.is-drop-target {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent), 0 12px 30px rgba(0, 0, 0, 0.22);
}

.composer-input-row {
  align-items: center;
  gap: 8px;
}

.composer-plus-menu {
  position: relative;
  flex: 0 0 auto;
}

.composer-plus-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.composer-mic-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.composer-mic-btn.is-active {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-strong);
}

/* Voice-mode button — sized and coloured identically to .send-btn so the
   swap between them (empty composer ⇄ typing) feels like a label change on
   the same button rather than a layout shift. Keep the animated bars icon
   to keep the "voice" cue obvious. */
.composer-voice-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 92px;
  height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-strong) 84%, rgba(255,255,255,0.16)), color-mix(in srgb, var(--accent) 82%, rgba(255,255,255,0.12)));
  backdrop-filter: blur(12px) saturate(135%);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  color: var(--send-text);
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 24px var(--accent-halo);
  transition: transform 140ms ease, box-shadow 180ms ease, opacity 160ms ease, background 180ms ease;
  white-space: nowrap;
}
.composer-voice-btn:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 14px 32px var(--accent-halo);
  transform: translateY(-0.5px);
}
.composer-voice-btn:active {
  transform: translateY(0.5px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 14px var(--accent-halo);
}

.composer-voice-bars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 16px;
}
.composer-voice-bars > span {
  display: block;
  width: 2px;
  border-radius: 2px;
  background: currentColor;
  animation: composer-voice-bars-pulse 1.2s ease-in-out infinite;
}
.composer-voice-bars > span:nth-child(1) { height: 6px;  animation-delay: -0.9s; }
.composer-voice-bars > span:nth-child(2) { height: 12px; animation-delay: -0.6s; }
.composer-voice-bars > span:nth-child(3) { height: 9px;  animation-delay: -0.3s; }
.composer-voice-bars > span:nth-child(4) { height: 5px;  animation-delay: 0s; }

@keyframes composer-voice-bars-pulse {
  0%, 100% { transform: scaleY(0.55); opacity: 0.75; }
  50%      { transform: scaleY(1);    opacity: 1; }
}

/* Voice vs Send swap:
   - Empty composer (placeholder visible) → show Voice, collapse Send.
   - Non-empty composer (user typed / dictated) → show Send, collapse Voice.
   Both buttons animate their collapse so the swap feels smooth instead of
   jumpy. We use width/padding/border/opacity instead of display:none so the
   transitions actually run.

   !important on width/min-width/padding is required because .send-btn.is-busy
   (set while the app is checking models / streaming) ships its own
   `min-width: 42px !important` rule — without !important here, sendBtn would
   stay as a 42px Stop square while the composer is empty and push the
   voice pill off the right edge. */
.composer-input-row:has(#messageInput:not(:placeholder-shown)) .composer-voice-btn,
.composer-input-row:has(#messageInput:placeholder-shown) #sendBtn {
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 160ms ease, transform 160ms ease, width 160ms ease, padding 160ms ease;
}

/* The parent `.composer-input-row` keeps a `gap: 8px` between siblings even
   when one of them is collapsed to width:0 — that leaves an 8px "ghost"
   gap on either side of the collapsed button. Pull the visible button
   into that gap so spacing stays consistent in both states:
   - Empty composer: voice is rightmost; pull it right to hug the edge.
   - Typing: send is rightmost; pull it left so textarea↔send is one gap. */
.composer-input-row:has(#messageInput:placeholder-shown) .composer-voice-btn {
  margin-right: -8px;
}
.composer-input-row:has(#messageInput:not(:placeholder-shown)) #sendBtn {
  margin-left: -8px;
}

/* Touch / mobile devices: voice entry points are backed by MediaRecorder
   + /api/whisper (see `_useMobileVoiceBackend`). Layout behaves like
   desktop — the voice pill and send button swap places based on whether
   the textarea has content (see the `:has(#messageInput:...)` collapse
   rules above). The only mobile-specific tweak is icon-only sendBtn
   to save room for the textarea; the voice pill keeps its label since
   it's only visible when the textarea is empty (so there's nothing
   competing for horizontal space).

   NOTE: Mobile detection for the voice backend lives in JS
   (`_useMobileVoiceBackend` uses coarse-pointer OR no-hover OR mobile UA)
   and is deliberately more permissive than this media query. Some
   Android flagships report `hover: hover` — they'll still get Whisper,
   but they won't trigger these CSS tweaks. That's fine: on such devices
   the desktop composer layout is usable anyway. */
@media (pointer: coarse) and (hover: none) {
  /* Compact icon-only sendBtn — ONLY while it's actually visible
     (textarea has content). Scoping the override to the "typing" state
     is critical: if we styled #sendBtn unconditionally, our width/gap
     values would clobber the collapse rule above (which zeroes width
     to hide the button when the textarea is empty) and both the voice
     pill and send button would end up visible at once. */
  .composer-input-row:has(#messageInput:not(:placeholder-shown)) #sendBtn {
    min-width: 42px !important;
    width: 42px !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  .composer-input-row:has(#messageInput:not(:placeholder-shown)) #sendBtn > span:last-child {
    max-width: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
  }

  /* Textarea must be allowed to shrink below its intrinsic min-content
     width, otherwise flex refuses to compress it and the whole row
     overflows horizontally. */
  #messageInput {
    min-width: 0 !important;
    flex: 1 1 0 !important;
  }

  /* Hide the standalone mic-dictation button on touch. It duplicates
     voice-mode (both route through MediaRecorder + /api/whisper) and
     would otherwise eat ~46px from an already-tight composer row. If
     the user wants to dictate text into the textarea, they can tap the
     voice pill, speak, close the overlay — the transcript ends up in
     the textarea just the same. Matches the UX of ChatGPT / Gemini
     mobile, which also expose only one voice control.

     Row becomes: [sidebar 38] [+ 38] [textarea flex] [voice ~100 | send 42 collapsed]
     → on a 360px screen textarea gets ~130px (vs ~80px before). */
  #micBtn {
    display: none !important;
  }
}

.composer-plus-btn.is-open {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

.composer-plus-panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  z-index: 14;
  min-width: 220px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border-strong));
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    color-mix(in srgb, var(--panel) 94%, black 6%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 38px rgba(0, 0, 0, 0.34),
    0 0 0 1px color-mix(in srgb, var(--accent-halo) 18%, transparent);
  backdrop-filter: blur(18px) saturate(140%) brightness(1.03);
  -webkit-backdrop-filter: blur(18px) saturate(140%) brightness(1.03);
  overflow: visible;
}

.composer-plus-panel[hidden],
.web-mode-menu[hidden],
.model-picker-menu[hidden],
.slash-command-menu[hidden] {
  display: none !important;
}

.slash-command-menu {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(100% + 6px);
  z-index: 20;
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    color-mix(in srgb, var(--panel) 96%, black 4%);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 16px 40px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
  animation: ui-pop 180ms cubic-bezier(0.22,1,0.36,1);
}

.slash-command-menu::-webkit-scrollbar { width: 5px; }
.slash-command-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

.slash-cmd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 120ms ease;
}

.slash-cmd-item:hover,
.slash-cmd-item.is-active {
  background: rgba(255,255,255,0.07);
}

.slash-cmd-name {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  font-family: var(--mono);
}

.slash-cmd-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-theme="light"] .slash-command-menu {
  border-color: rgba(0,0,0,0.1);
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244,247,251,0.94));
  box-shadow: 0 16px 40px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.5);
}
html[data-theme="light"] .slash-cmd-item:hover,
html[data-theme="light"] .slash-cmd-item.is-active {
  background: rgba(0,0,0,0.05);
}
html[data-theme="light"] .slash-cmd-name { color: #1f2328; }
html[data-theme="light"] .slash-cmd-desc { color: rgba(0,0,0,0.45); }

.composer-plus-action {
  width: 100%;
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  transition: border-color var(--ease), background var(--ease), box-shadow var(--ease), color var(--ease);
}

.composer-plus-action:hover,
.composer-plus-action:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));
}

.plus-skill-picker .composer-plus-action.is-highlighted {
  border-color: color-mix(in srgb, var(--accent) 34%, rgba(255, 255, 255, 0.18));
  background:
    radial-gradient(circle at 10% 50%, color-mix(in srgb, var(--accent-halo) 38%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, rgba(255, 255, 255, 0.06)), rgba(255, 255, 255, 0.03));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px color-mix(in srgb, var(--accent-halo) 24%, transparent);
}

.plus-skill-picker .composer-plus-action.is-highlighted:hover,
.plus-skill-picker .composer-plus-action.is-highlighted:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 48%, rgba(255, 255, 255, 0.18));
  background:
    radial-gradient(circle at 10% 50%, color-mix(in srgb, var(--accent-halo) 44%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, rgba(255, 255, 255, 0.07)), rgba(255, 255, 255, 0.04));
}

.plus-skill-picker,
.plus-web-mode-picker {
  position: relative;
}

.plus-skill-picker .composer-plus-action,
.plus-web-mode-picker .composer-plus-action {
  justify-content: flex-start;
}

.plus-skill-picker .model-picker-caret,
.plus-web-mode-picker .model-picker-caret {
  margin-left: auto;
}

.plus-skill-picker .web-mode-menu,
.plus-web-mode-picker .web-mode-menu {
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
}

#messageInput,
#baseUrl,
#apiKey,
#languageSelect,
#themeSelect,
#settingsWebModeSelect,
#ttsSpeakerRuSelect,
#ttsSpeakerEnSelect,
#modelSelect,
#systemPrompt,
#memoryProfile {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--input);
  color: var(--text);
  border-radius: 14px;
  outline: none;
}

#messageInput {
  height: 42px;
  min-height: 42px;
  max-height: 160px;
  flex: 1;
  resize: none;
  padding: 10px 12px;
  font-size: 15px;
  line-height: 1.35;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px) saturate(125%);
  -webkit-backdrop-filter: blur(10px) saturate(125%);
}

.send-btn {
  min-width: 92px;
  height: 42px;
  padding: 0 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-strong) 84%, rgba(255,255,255,0.16)), color-mix(in srgb, var(--accent) 82%, rgba(255,255,255,0.12)));
  backdrop-filter: blur(12px) saturate(135%);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  color: var(--send-text);
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 24px var(--accent-halo);
}

.composer-toolbar {
  display: none;
}

#stopBtn {
  display: none;
}

.composer-tools-left,
.composer-tools-right {
  gap: 8px;
  align-items: stretch;
}

.composer-model-select {
  width: auto;
  min-width: 170px;
  max-width: 220px;
  padding: 8px 30px 8px 10px;
  border-radius: 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
}

.model-picker {
  position: relative;
  min-width: 280px;
  max-width: 420px;
  display: flex;
}

.model-picker-btn {
  width: 100%;
  min-height: 34px;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--panel-3), var(--panel));
  color: var(--text);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 12px;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.model-picker-btn.is-open {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

.model-picker-copy {
  min-width: 0;
  display: block;
}

.model-picker-label,
.model-option-name {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
}

.model-picker-label {
  display: block;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.model-picker-badges,
.model-option-capabilities {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
}

.model-picker-badge,
.capability-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.model-picker-badge,
.capability-fast {
  background: rgba(100, 171, 131, 0.14);
  color: #bce3c6;
}

.capability-reasoning {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-strong);
}

.capability-coding {
  background: rgba(120, 170, 255, 0.14);
  color: #b9d3ff;
}

.capability-tools {
  background: rgba(99, 163, 255, 0.14);
  color: #9bd5ff;
}

.capability-vision {
  background: rgba(211, 132, 182, 0.14);
  color: #efb9dc;
}

.model-picker-caret {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.model-picker-caret svg {
  width: 16px;
  height: 16px;
  transition: transform var(--ease);
}

.model-picker-btn.is-open .model-picker-caret svg {
  transform: rotate(180deg);
}

.model-picker-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 8;
  max-height: min(360px, 50vh);
  overflow: auto;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 20px 38px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px) saturate(140%) brightness(1.03);
  -webkit-backdrop-filter: blur(18px) saturate(140%) brightness(1.03);
  /* Hide native scrollbar — wheel/touch scrolling still works,
     keeps the popover edge clean. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.model-picker-menu::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

html[data-theme="ember"] .model-picker-menu {
  border-color: rgba(222, 177, 115, 0.18);
  background:
    radial-gradient(circle at 50% 0%, rgba(209, 160, 101, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(40, 31, 24, 0.96), rgba(25, 21, 18, 0.93));
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 204, 0.08),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    0 20px 38px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(209, 160, 101, 0.06);
}

html[data-theme="forest"] .model-picker-menu {
  border-color: rgba(126, 210, 170, 0.18);
  background:
    radial-gradient(circle at 50% 0%, rgba(95, 184, 143, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(22, 33, 28, 0.96), rgba(16, 24, 21, 0.93));
  box-shadow:
    inset 0 1px 0 rgba(222, 255, 239, 0.07),
    inset 0 -1px 0 rgba(255, 255, 255, 0.02),
    0 20px 38px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(95, 184, 143, 0.05);
}

html[data-theme="graphite"] .model-picker-menu {
  border-color: rgba(138, 187, 229, 0.18);
  background:
    radial-gradient(circle at 50% 0%, rgba(111, 168, 216, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(26, 29, 34, 0.97), rgba(20, 23, 27, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(238, 245, 255, 0.08),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    0 20px 38px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(111, 168, 216, 0.05);
}

.model-picker-btn.is-open + .model-picker-menu {
  animation: modelMenuOpen 280ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: 50% 100%;
}

.header-model-picker .model-picker-btn.is-open + .model-picker-menu {
  transform-origin: 50% 0;
}

@keyframes modelMenuOpen {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.model-picker-btn.is-open + .model-picker-menu .model-option {
  animation: modelOptionEnter 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.model-picker-btn.is-open + .model-picker-menu .model-option:nth-child(1) { animation-delay: 60ms; }
.model-picker-btn.is-open + .model-picker-menu .model-option:nth-child(2) { animation-delay: 90ms; }
.model-picker-btn.is-open + .model-picker-menu .model-option:nth-child(3) { animation-delay: 120ms; }
.model-picker-btn.is-open + .model-picker-menu .model-option:nth-child(4) { animation-delay: 150ms; }
.model-picker-btn.is-open + .model-picker-menu .model-option:nth-child(5) { animation-delay: 180ms; }
.model-picker-btn.is-open + .model-picker-menu .model-option:nth-child(6) { animation-delay: 210ms; }
.model-picker-btn.is-open + .model-picker-menu .model-option:nth-child(n+7) { animation-delay: 240ms; }

@keyframes modelOptionEnter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.model-picker-refresh {
  width: 100%;
  margin-bottom: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  backdrop-filter: blur(12px) saturate(130%) brightness(1.03);
  -webkit-backdrop-filter: blur(12px) saturate(130%) brightness(1.03);
}

/* Toolbar row that hosts Refresh + the vendor-filter toggle. Refresh
   keeps its grow-to-fill behavior; the toggle sits at a fixed pill
   width on the right. */
.model-picker-toolbar {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-bottom: 10px;
}

.model-picker-toolbar .model-picker-refresh {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

.model-picker-filter-btn {
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  backdrop-filter: blur(12px) saturate(130%) brightness(1.03);
  -webkit-backdrop-filter: blur(12px) saturate(130%) brightness(1.03);
}

.model-picker-filter-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.model-picker-filter-btn .btn-icon svg {
  width: 14px;
  height: 14px;
}

.model-picker-filter-btn.is-active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 40%, rgba(255, 255, 255, 0.12));
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 22%, rgba(255, 255, 255, 0.08)),
    color-mix(in srgb, var(--accent) 10%, rgba(255, 255, 255, 0.025)));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 4px 14px color-mix(in srgb, var(--accent) 22%, transparent);
}

@media (max-width: 520px) {
  /* On narrow popovers, hide the toggle label to keep the toolbar
     on a single row — the funnel icon + tooltip still convey intent. */
  .model-picker-filter-btn .model-picker-filter-label {
    display: none;
  }
  .model-picker-filter-btn {
    padding: 10px;
  }
}

.model-picker-empty {
  padding: 14px;
  color: var(--muted);
  text-align: center;
  font-size: 12px;
}

/* --- Tabbed picker (arena.ai-style) --------------------------------
   The picker popover now opens with a tab strip (Fast / Coding /
   Reasoning) and only the selected tab's list is shown in the panel
   below. Tabs with zero models are rendered disabled so the user can
   still see which categories exist. */
.model-picker-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
}

/* Vendor mode: tab count is dynamic (10-15 vendors), so swap the
   grid for a horizontally-scrolling flex strip wrapped with prev/next
   arrow overlays. Native scrollbar is hidden — navigation happens via
   the buttons (and trackpad/swipe on touch devices). */
.model-picker-tabs-wrap {
  position: relative;
  margin-bottom: 10px;
}

.model-picker-tabs-wrap .model-picker-tabs {
  margin-bottom: 0;
}

.model-picker-tabs.model-picker-tabs--scroll {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  /* True transparency fade via mask-image: tabs literally lose alpha
     near the arrow buttons instead of being covered by an opaque
     panel-colored gradient. JS sets --mask-left / --mask-right based
     on scroll position so the fade only shows on sides that have
     more content to scroll into. */
  --mask-left: 0px;
  --mask-right: 0px;
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--mask-left),
    #000 calc(100% - var(--mask-right)),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--mask-left),
    #000 calc(100% - var(--mask-right)),
    transparent 100%
  );
  transition: mask-image 160ms ease, -webkit-mask-image 160ms ease;
}

.model-picker-tabs.model-picker-tabs--scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.model-picker-tabs.model-picker-tabs--scroll .model-tab {
  flex: 0 0 auto;
  min-width: 92px;
  scroll-snap-align: start;
  padding: 7px 12px;
}

/* Prev/next arrow overlays. Sit absolute over the strip's edges with
   the same frosted-glass treatment as Refresh / "По вендору":
   semi-transparent white layer + backdrop-filter blur so popover
   content shows through softly. is-hidden state triggered by JS
   when the strip is scrolled to the matching end. */
.model-picker-tabs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 26px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
  color: var(--text);
  cursor: pointer;
  opacity: 1;
  transition: opacity 160ms ease, background 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
  backdrop-filter: blur(14px) saturate(140%) brightness(1.04);
  -webkit-backdrop-filter: blur(14px) saturate(140%) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 14px rgba(0, 0, 0, 0.22);
}

.model-picker-tabs-arrow:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
  border-color: color-mix(in srgb, var(--accent) 55%, rgba(255, 255, 255, 0.18));
  color: var(--text);
  transform: translateY(-50%) scale(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 6px 18px rgba(0, 0, 0, 0.3),
    0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent),
    0 0 18px color-mix(in srgb, var(--accent) 24%, transparent);
}

.model-picker-tabs-arrow:active {
  transform: translateY(-50%) scale(0.94);
}

.model-picker-tabs-arrow svg {
  width: 14px;
  height: 14px;
}

.model-picker-tabs-arrow--prev { left: 4px; }
.model-picker-tabs-arrow--next { right: 4px; }

.model-picker-tabs-arrow.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Fade is now handled by mask-image on the strip itself — see the
   .model-picker-tabs--scroll rule above. The pseudo-element gradient
   approach is intentionally retired because it laid an opaque colored
   layer over tabs instead of giving them true transparency. */

.model-tab {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 7px 6px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.model-tab:hover:not(:disabled) {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.model-tab.is-active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
  border-color: color-mix(in srgb, var(--accent) 38%, rgba(255, 255, 255, 0.08));
  color: var(--text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 4px 14px rgba(0, 0, 0, 0.22);
}

.model-tab.is-disabled,
.model-tab:disabled {
  cursor: default;
  opacity: 0.42;
}

.model-tab-label {
  display: inline-block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-tab-count {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
}

/* On narrow viewports the label + count fights for too little space
   and both get truncated to "Бы…". Hide the counter below ~520px of
   popover width (count is recoverable by looking at the list itself,
   the tab label is not). */
@media (max-width: 520px) {
  .model-tab-count {
    display: none;
  }
  .model-tab {
    padding: 8px 4px;
  }
}

.model-tab.is-active .model-tab-count {
  background: color-mix(in srgb, var(--accent) 34%, rgba(255, 255, 255, 0.05));
  color: var(--text);
}

.model-picker-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

html[data-theme="light"] .model-picker-tabs {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.04), rgba(15, 23, 42, 0.02));
  border-color: rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .model-tab {
  color: var(--muted);
}

/* Light theme: invert the glass tint — instead of a white veneer over
   a dark panel, use a gentle white veneer over light panels with a
   tinted dark border for definition. */
html[data-theme="light"] .model-picker-tabs-arrow {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.4));
  border-color: rgba(31, 49, 68, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 4px 12px rgba(70, 90, 120, 0.14);
}

html[data-theme="light"] .model-picker-tabs-arrow:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.55));
  border-color: color-mix(in srgb, var(--accent) 50%, rgba(31, 49, 68, 0.2));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 6px 16px rgba(70, 90, 120, 0.2),
    0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent),
    0 0 16px color-mix(in srgb, var(--accent) 20%, transparent);
}

html[data-theme="light"] .model-tab:hover:not(:disabled) {
  background: rgba(15, 23, 42, 0.04);
}

html[data-theme="light"] .model-tab.is-active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
  border-color: color-mix(in srgb, var(--accent) 42%, rgba(15, 23, 42, 0.12));
}

html[data-theme="light"] .model-tab-count {
  background: rgba(15, 23, 42, 0.08);
}

/* Legacy group styles kept for any old cached markup; picker itself
   now renders .model-picker-panel instead. */
.model-group + .model-group {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.model-group-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 2px 4px 8px;
}

.model-group-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}

.model-group-subtitle {
  font-size: 11px;
  color: var(--muted-2);
}

.model-group-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.model-option {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  backdrop-filter: blur(10px) saturate(128%) brightness(1.03);
  -webkit-backdrop-filter: blur(10px) saturate(128%) brightness(1.03);
  position: relative;
  overflow: hidden;
  --mouse-x: 50%;
  --mouse-y: 50%;
  --spotlight-color: color-mix(in srgb, var(--accent) 24%, transparent);
}

.model-option::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), var(--spotlight-color), transparent 72%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.model-option > * {
  position: relative;
  z-index: 1;
}

.model-option-trailing {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.model-option:hover,
.model-option.is-selected {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}

.model-option:hover::before,
.model-option:focus-within::before {
  opacity: 0.6;
}

.composer-mode-btn {
  min-height: 36px;
  min-width: 104px;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-3);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
}

.web-mode-picker {
  position: relative;
}

.web-mode-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  z-index: 8;
  min-width: 140px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border-strong));
  border-radius: 12px;
  background:
    radial-gradient(circle at 12% 14%, color-mix(in srgb, var(--accent-halo) 26%, transparent), transparent 48%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel-3) 90%, rgba(255,255,255,0.04)), color-mix(in srgb, var(--panel) 94%, black 6%));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 -1px 0 rgba(255,255,255,0.03),
    0 20px 38px rgba(0, 0, 0, 0.34),
    0 0 0 1px color-mix(in srgb, var(--accent-halo) 16%, transparent);
  backdrop-filter: blur(18px) saturate(140%) brightness(1.03);
  -webkit-backdrop-filter: blur(18px) saturate(140%) brightness(1.03);
}

.composer-mode-btn[aria-expanded="true"] + .web-mode-menu,
.composer-plus-btn.is-open + .composer-plus-panel {
  animation: ui-pop 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.web-mode-option {
  width: 100%;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  color: var(--text);
  font-size: 12px;
  text-align: left;
}

.web-mode-option:hover,
.web-mode-option.is-active {
  border-color: color-mix(in srgb, var(--accent) 24%, rgba(255,255,255,0.08));
  background: linear-gradient(180deg, rgba(255,255,255,0.08), color-mix(in srgb, var(--accent) 8%, rgba(255,255,255,0.03)));
}

.model-option.is-selected .model-option-pill {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-strong);
}

.composer-tool-btn,
.composer-refresh-btn {
  min-height: 34px;
  padding: 3px 12px;
  border: 1px solid var(--border);
  background: var(--panel-3);
  color: var(--text);
  border-radius: 14px;
  font-size: 12px;
}

.stop-btn {
  color: var(--danger-text);
}

.settings-modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--ease), visibility var(--ease);
}

.settings-modal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.settings-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.settings-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  padding: 18px;
}

.settings-modal.open .settings-card {
  animation: ui-modal-in 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 22px;
}

.field.grow {
  flex: 1;
}

.server-managed-field {
  display: none;
}

#baseUrl,
#apiKey,
#languageSelect,
#themeSelect,
#settingsWebModeSelect,
#ttsSpeakerRuSelect,
#ttsSpeakerEnSelect,
#systemPrompt,
#memoryProfile {
  padding: 12px 14px;
}

.voice-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.voice-row select {
  flex: 1;
  min-width: 0;
}

.voice-preview-btn {
  flex-shrink: 0;
  width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--input);
  color: var(--text);
  border-radius: 14px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease;
}

.voice-preview-btn svg {
  width: 16px;
  height: 16px;
}

.voice-preview-btn:hover {
  background: var(--input-hover, var(--input));
  border-color: var(--accent, var(--border));
  color: var(--accent, var(--text));
}

.voice-preview-btn:active {
  transform: scale(0.95);
}

.voice-preview-btn.is-playing {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.55);
  color: rgb(165, 180, 252);
}

.voice-preview-btn:disabled {
  opacity: 0.5;
  cursor: progress;
}

.sources-panel {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.sources-title {
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.sources-list {
  display: grid;
  gap: 10px;
}

.source-card {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}

.source-meta,
.source-open {
  font-size: 11px;
  color: var(--muted-2);
}

.source-link {
  font-weight: 600;
}

.source-snippet {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

#systemPrompt,
#memoryProfile {
  min-height: 140px;
  resize: vertical;
  margin-top: 6px;
}

#memoryProfile {
  min-height: 96px;
}

.settings-footer {
  margin-top: 24px;
}

.secondary-btn,
.danger-btn,
.icon-btn {
  padding: 11px 14px;
}

.danger-btn {
  background: var(--danger-bg);
  color: var(--danger-text);
  border: 1px solid var(--danger-border);
}

button:hover {
  transform: translateY(-1px);
}

button:active {
  transform: translateY(0) scale(0.985);
}

button:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 80%, transparent);
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

@keyframes thinking-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.55; }
}

@keyframes thinking-sheen {
  0% { transform: translateX(-110%); opacity: 0; }
  14% { opacity: 1; }
  55% { opacity: 1; }
  100% { transform: translateX(115%); opacity: 0; }
}

@keyframes thinking-orbit {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.92); opacity: 0.55; }
  50% { transform: translate3d(-18px, -12px, 0) scale(1.08); opacity: 0.95; }
}

@keyframes empty-state-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes empty-state-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes empty-state-quote-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 0.6; transform: translateY(0); }
}

/* === Send burst particles === */
.send-burst-particle {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #6cc6ff);
  box-shadow: 0 0 8px var(--accent, #6cc6ff);
  opacity: 0.9;
  animation: sendBurst 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: transform, opacity;
}
@keyframes sendBurst {
  0% { transform: translate(0, 0) scale(1); opacity: 0.95; }
  60% { opacity: 0.6; }
  100% { transform: translate(var(--dx, 60px), var(--dy, 0)) scale(0.2); opacity: 0; }
}

/* Send button: smooth shrink-to-stop transition */
.send-btn {
  transition:
    min-width 420ms cubic-bezier(0.22, 1, 0.36, 1),
    width 420ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 420ms cubic-bezier(0.22, 1, 0.36, 1),
    gap 420ms cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 420ms cubic-bezier(0.22, 1, 0.36, 1),
    background 220ms ease,
    box-shadow 220ms ease;
  white-space: nowrap;
  overflow: hidden;
  will-change: min-width, padding;
}

.send-btn > span:last-child {
  display: inline-block;
  max-width: 140px;
  opacity: 1;
  overflow: hidden;
  white-space: nowrap;
  transition:
    opacity 220ms ease,
    max-width 420ms cubic-bezier(0.22, 1, 0.36, 1),
    margin 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.send-btn .btn-icon {
  transition: opacity 160ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Compact stop state: perfect square matching button height */
.send-btn.is-busy {
  min-width: 42px !important;
  width: 42px;
  padding: 0 !important;
  border-radius: 12px;
  gap: 0 !important;
}

.send-btn.is-busy > span:last-child {
  max-width: 0 !important;
  opacity: 0;
  margin: 0 !important;
}

/* Subtle press squeeze on click */
.send-btn.is-firing {
  animation: sendBtnSqueeze 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes sendBtnSqueeze {
  0%   { transform: scale(1); }
  35%  { transform: scale(0.94); }
  70%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}

.send-btn.is-firing .btn-icon {
  animation: sendArrowFly 380ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes sendArrowFly {
  0% { transform: translateX(0); opacity: 1; }
  45% { transform: translateX(14px); opacity: 0; }
  46% { transform: translateX(-10px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* === Smooth chat-feed transition when switching sessions === */
.chat-feed {
  transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.chat-feed.is-switching {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .send-burst-particle,
  .send-btn,
  .send-btn.is-firing,
  .send-btn.is-firing .btn-icon,
  .chat-feed {
    animation: none !important;
    transition: none !important;
  }
}

@keyframes freshQuoteEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 0.6; transform: none; }
}

@keyframes empty-state-glow {
  0%, 100% { opacity: 0.54; transform: translate(-50%, -50%) scale(0.92) rotate(0deg); }
  50% { opacity: 0.96; transform: translate(-50%, -50%) scale(1.08) rotate(180deg); }
}

@keyframes empty-state-orb {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  25% { transform: translateY(-4px) rotate(3deg) scale(1.02); }
  50% { transform: translateY(-7px) rotate(0deg) scale(1.045); }
  75% { transform: translateY(-3px) rotate(-3deg) scale(1.018); }
}

@keyframes empty-state-rings {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(0.95); opacity: 0.48; }
  50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.05); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(0.95); opacity: 0.48; }
}

@keyframes empty-state-ring-spin {
  from { transform: rotate(18deg) scaleX(1.46) scaleY(0.54); }
  to { transform: rotate(378deg) scaleX(1.46) scaleY(0.54); }
}

@keyframes empty-state-ring-spin-reverse {
  from { transform: rotate(-24deg) scaleX(1.92) scaleY(0.42); }
  to { transform: rotate(-384deg) scaleX(1.92) scaleY(0.42); }
}

@keyframes ui-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ui-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ui-modal-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) scale(0.985); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes ui-sheet-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ui-message-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes empty-state-exit {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to { opacity: 0; transform: scale(0.96) translateY(-20px); }
}

.empty-state.is-exiting {
  animation: empty-state-exit 340ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  pointer-events: none;
}

/* === Cinematic glow trail while composer flies to bottom === */
.composer-wrap.is-launching {
  animation: composer-glow-pulse 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes composer-glow-pulse {
  0% {
    filter:
      drop-shadow(0 0 6px rgba(255, 200, 130, 0.0))
      drop-shadow(0 0 10px rgba(124, 158, 255, 0.0));
  }
  35% {
    filter:
      drop-shadow(0 0 28px rgba(255, 200, 130, 0.55))
      drop-shadow(0 0 60px rgba(124, 158, 255, 0.45));
  }
  70% {
    filter:
      drop-shadow(0 0 18px rgba(255, 200, 130, 0.35))
      drop-shadow(0 0 36px rgba(124, 158, 255, 0.25));
  }
  100% {
    filter:
      drop-shadow(0 0 0 rgba(255, 200, 130, 0))
      drop-shadow(0 0 0 rgba(124, 158, 255, 0));
  }
}

/* === Orb particle explosion === */
.empty-particle {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 60;
  filter: blur(0.6px);
  will-change: transform, opacity;
  mix-blend-mode: screen;
}

@media (prefers-reduced-motion: reduce) {
  .composer-wrap.is-launching { animation: none; filter: none; }
  .empty-particle { display: none; }
}

@keyframes site-bg-drift {
  0% { transform: translate3d(-2%, -1%, 0) scale(1); }
  100% { transform: translate3d(2%, 1.5%, 0) scale(1.05); }
}

@keyframes site-bg-breathe {
  0%, 100% { opacity: 0.66; transform: scale(0.98); }
  50% { opacity: 0.95; transform: scale(1.03); }
}

@keyframes site-bg-scan {
  0% { transform: translateY(-10px); opacity: 0.28; }
  50% { transform: translateY(10px); opacity: 0.5; }
  100% { transform: translateY(-10px); opacity: 0.28; }
}

@keyframes site-bg-aurora {
  0% { transform: translate3d(-1.5%, 0, 0) scale(0.98); opacity: 0.72; }
  100% { transform: translate3d(1.5%, -1.5%, 0) scale(1.04); opacity: 0.96; }
}

@keyframes site-bg-fireflies {
  0%, 100% { opacity: 0.58; transform: translate3d(0, 0, 0) scale(0.98); }
  25% { opacity: 0.82; transform: translate3d(-0.8%, -1.2%, 0) scale(1.02); }
  50% { opacity: 0.66; transform: translate3d(1.1%, 0.6%, 0) scale(1); }
  75% { opacity: 0.92; transform: translate3d(-0.4%, 1.2%, 0) scale(1.03); }
}

@keyframes site-bg-ember {
  0% { transform: translate3d(-1%, 1%, 0) scale(0.98); opacity: 0.72; }
  100% { transform: translate3d(1.5%, -1%, 0) scale(1.05); opacity: 0.98; }
}

html[data-theme="ember"] .empty-state {
  background:
    radial-gradient(circle at 50% 44%, rgba(209, 160, 101, 0.12), rgba(209, 160, 101, 0) 20%),
    radial-gradient(circle at 50% 54%, rgba(222, 177, 115, 0.08), rgba(222, 177, 115, 0) 28%);
}

html[data-theme="ember"] .empty-state::before {
  background:
    radial-gradient(circle, rgba(209, 160, 101, 0.16) 0%, rgba(209, 160, 101, 0.08) 24%, rgba(209, 160, 101, 0.02) 46%, rgba(209, 160, 101, 0) 72%),
    conic-gradient(from 0deg, rgba(222, 177, 115, 0.12), rgba(255, 255, 255, 0.015), rgba(209, 160, 101, 0.14), rgba(255, 255, 255, 0.02), rgba(222, 177, 115, 0.12));
}

html[data-theme="ember"] .empty-state::after {
  border-color: rgba(209, 160, 101, 0.18);
  box-shadow:
    0 0 0 18px rgba(209, 160, 101, 0.05),
    0 0 0 42px rgba(209, 160, 101, 0.03),
    inset 0 0 30px rgba(255, 225, 185, 0.05);
  animation: empty-state-ember-halo 7.2s ease-in-out infinite;
}

html[data-theme="ember"] .empty-state .orb {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 241, 214, 0.98) 0%, rgba(247, 203, 147, 0.92) 18%, rgba(209, 160, 101, 0.92) 38%, rgba(120, 84, 52, 0.96) 68%, rgba(34, 25, 18, 1) 100%);
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.28),
    0 0 34px rgba(209, 160, 101, 0.18),
    inset -8px -10px 18px rgba(46, 31, 18, 0.42),
    inset 8px 10px 18px rgba(255, 236, 204, 0.16);
  animation: empty-state-ember-core 5.8s ease-in-out infinite;
}

html[data-theme="ember"] .empty-state > div::before {
  display: block;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 227, 176, 0.28) 0%, rgba(255, 227, 176, 0.1) 34%, rgba(255, 227, 176, 0) 70%),
    conic-gradient(from 0deg, rgba(255, 232, 188, 0) 0%, rgba(255, 232, 188, 0.22) 16%, rgba(255, 232, 188, 0) 36%, rgba(255, 232, 188, 0.18) 56%, rgba(255, 232, 188, 0) 76%, rgba(255, 232, 188, 0.12) 100%);
  filter: blur(10px);
  opacity: 0.96;
  animation: empty-state-ember-flare 9.4s linear infinite;
}

html[data-theme="ember"] .empty-state .orb::before,
html[data-theme="ember"] .empty-state .orb::after {
  border-color: rgba(209, 160, 101, 0.2);
}

html[data-theme="ember"] .empty-state .orb::before {
  transform: rotate(14deg) scaleX(1.38) scaleY(0.58);
  animation: empty-state-ember-spin 10.4s linear infinite;
}

html[data-theme="ember"] .empty-state .orb::after {
  inset: -22px;
  border-color: rgba(237, 191, 131, 0.16);
  transform: rotate(-32deg) scaleX(1.78) scaleY(0.44);
  animation: empty-state-ember-spin-reverse 12.2s linear infinite;
}

html[data-theme="ember"] .empty-state h3 {
  text-shadow: 0 0 18px rgba(209, 160, 101, 0.1);
}

html[data-theme="ember"] .empty-state p {
  color: #c3b4a3;
}

html[data-theme="forest"] .empty-state {
  background:
    radial-gradient(circle at 50% 44%, rgba(95, 184, 143, 0.12), rgba(95, 184, 143, 0) 20%),
    radial-gradient(circle at 50% 56%, rgba(126, 210, 170, 0.08), rgba(126, 210, 170, 0) 28%);
}

html[data-theme="forest"] .empty-state::before {
  background:
    radial-gradient(circle, rgba(95, 184, 143, 0.14) 0%, rgba(95, 184, 143, 0.08) 24%, rgba(95, 184, 143, 0.02) 46%, rgba(95, 184, 143, 0) 72%),
    conic-gradient(from 0deg, rgba(126, 210, 170, 0.1), rgba(255, 255, 255, 0.012), rgba(95, 184, 143, 0.14), rgba(255, 255, 255, 0.015), rgba(126, 210, 170, 0.1));
}

html[data-theme="forest"] .empty-state::after {
  border-color: rgba(95, 184, 143, 0.16);
  box-shadow:
    0 0 0 18px rgba(95, 184, 143, 0.045),
    0 0 0 42px rgba(95, 184, 143, 0.028),
    inset 0 0 30px rgba(180, 240, 212, 0.04);
  animation: empty-state-forest-halo 8.8s ease-in-out infinite;
}

html[data-theme="forest"] .empty-state > div::before,
html[data-theme="forest"] .empty-state > div::after {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(231, 251, 238, 0.96) 0%, rgba(154, 232, 193, 0.78) 56%, rgba(154, 232, 193, 0) 72%);
  filter: blur(0.3px);
  opacity: 0.82;
}

html[data-theme="forest"] .empty-state > div::before {
  box-shadow:
    -84px -42px 0 -2px rgba(172, 245, 206, 0.78),
    76px -18px 0 -3px rgba(130, 222, 180, 0.68),
    -96px 30px 0 -1px rgba(198, 255, 224, 0.76),
    88px 44px 0 -2px rgba(126, 210, 170, 0.72),
    18px 78px 0 -3px rgba(164, 238, 198, 0.64);
  animation: empty-state-forest-spores 12s ease-in-out infinite;
}

html[data-theme="forest"] .empty-state > div::after {
  box-shadow:
    -44px -88px 0 -3px rgba(187, 249, 217, 0.68),
    34px -72px 0 -2px rgba(131, 221, 181, 0.74),
    -68px 72px 0 -3px rgba(160, 236, 196, 0.68),
    102px 8px 0 -2px rgba(197, 255, 224, 0.62);
  animation: empty-state-forest-spores-reverse 14s ease-in-out infinite;
}

html[data-theme="forest"] .empty-state .orb {
  background:
    radial-gradient(circle at 34% 28%, rgba(233, 252, 242, 0.98) 0%, rgba(154, 232, 193, 0.92) 18%, rgba(95, 184, 143, 0.92) 38%, rgba(37, 92, 72, 0.96) 68%, rgba(18, 34, 28, 1) 100%);
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.28),
    0 0 34px rgba(95, 184, 143, 0.18),
    inset -8px -10px 18px rgba(17, 43, 33, 0.44),
    inset 8px 10px 18px rgba(220, 248, 230, 0.16);
}

html[data-theme="forest"] .empty-state .orb::before,
html[data-theme="forest"] .empty-state .orb::after {
  border-color: rgba(95, 184, 143, 0.18);
}

html[data-theme="forest"] .empty-state .orb::before {
  transform: rotate(26deg) scaleX(1.28) scaleY(0.62);
  animation: empty-state-forest-orbit 7.6s ease-in-out infinite;
}

html[data-theme="forest"] .empty-state .orb::after {
  inset: -22px;
  border-color: rgba(126, 210, 170, 0.14);
  transform: rotate(-18deg) scaleX(1.62) scaleY(0.48);
  animation: empty-state-forest-orbit-reverse 9.2s ease-in-out infinite;
}

html[data-theme="forest"] .empty-state h3 {
  text-shadow: 0 0 18px rgba(95, 184, 143, 0.08);
}

html[data-theme="forest"] .empty-state p {
  color: #b3c8bc;
}

/* Aurora orb: lavender/violet gradient */
html[data-theme="aurora"] .empty-state .orb {
  background:
    radial-gradient(circle at 34% 28%, rgba(245, 230, 255, 0.98) 0%, rgba(200, 160, 245, 0.92) 18%, rgba(168, 128, 230, 0.92) 38%, rgba(72, 40, 130, 0.96) 68%, rgba(20, 14, 40, 1) 100%);
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.32),
    0 0 38px rgba(168, 128, 230, 0.28),
    inset -8px -10px 18px rgba(28, 14, 50, 0.46),
    inset 8px 10px 18px rgba(232, 210, 255, 0.18);
}

html[data-theme="aurora"] .empty-state .orb::before,
html[data-theme="aurora"] .empty-state .orb::after {
  border-color: rgba(168, 128, 230, 0.22);
}

html[data-theme="aurora"] .empty-state .orb::after {
  border-color: rgba(195, 157, 240, 0.15);
}

html[data-theme="aurora"] .empty-state h3 {
  text-shadow: 0 0 18px rgba(168, 128, 230, 0.14);
}

/* Sunset orb: warm peach/coral gradient */
html[data-theme="sunset"] .empty-state .orb {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 234, 218, 0.98) 0%, rgba(255, 192, 156, 0.92) 18%, rgba(255, 138, 101, 0.92) 38%, rgba(140, 50, 50, 0.96) 68%, rgba(34, 12, 18, 1) 100%);
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.3),
    0 0 38px rgba(255, 138, 101, 0.26),
    inset -8px -10px 18px rgba(60, 22, 22, 0.46),
    inset 8px 10px 18px rgba(255, 218, 196, 0.18);
}

html[data-theme="sunset"] .empty-state .orb::before,
html[data-theme="sunset"] .empty-state .orb::after {
  border-color: rgba(255, 138, 101, 0.22);
}

html[data-theme="sunset"] .empty-state .orb::after {
  border-color: rgba(255, 168, 130, 0.15);
}

html[data-theme="sunset"] .empty-state h3 {
  text-shadow: 0 0 18px rgba(255, 138, 101, 0.14);
}

/* Sakura orb: soft pink/peach gradient */
html[data-theme="sakura"] .empty-state .orb {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 244, 248, 0.98) 0%, rgba(255, 204, 220, 0.92) 18%, rgba(255, 142, 175, 0.92) 38%, rgba(140, 60, 90, 0.96) 68%, rgba(34, 16, 24, 1) 100%);
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.28),
    0 0 38px rgba(255, 142, 175, 0.28),
    inset -8px -10px 18px rgba(60, 22, 32, 0.44),
    inset 8px 10px 18px rgba(255, 224, 232, 0.2);
}

html[data-theme="sakura"] .empty-state .orb::before,
html[data-theme="sakura"] .empty-state .orb::after {
  border-color: rgba(255, 142, 175, 0.22);
}

html[data-theme="sakura"] .empty-state .orb::after {
  border-color: rgba(255, 178, 200, 0.15);
}

html[data-theme="sakura"] .empty-state h3 {
  text-shadow: 0 0 18px rgba(255, 142, 175, 0.14);
}

html[data-theme="graphite"] .empty-state > div::after {
  display: block;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(155, 201, 238, 0.12) 0%, rgba(155, 201, 238, 0.06) 40%, rgba(155, 201, 238, 0) 72%);
  filter: blur(10px);
  opacity: 0.48;
  animation: empty-state-graphite-noise 6.6s ease-in-out infinite;
}

@keyframes empty-state-ember-spin {
  from { transform: rotate(14deg) scaleX(1.38) scaleY(0.58); }
  to { transform: rotate(374deg) scaleX(1.38) scaleY(0.58); }
}

@keyframes empty-state-ember-spin-reverse {
  from { transform: rotate(-32deg) scaleX(1.78) scaleY(0.44); }
  to { transform: rotate(-392deg) scaleX(1.78) scaleY(0.44); }
}

@keyframes empty-state-ember-core {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.065); }
}

@keyframes empty-state-ember-halo {
  0%, 100% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.52; }
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: 0.94; }
}

@keyframes empty-state-ember-flare {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(0.9); opacity: 0.28; }
  50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.08); opacity: 0.78; }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(0.9); opacity: 0.28; }
}

@keyframes empty-state-forest-halo {
  0%, 100% { transform: translate(-50%, -50%) scale(0.96); opacity: 0.52; }
  50% { transform: translate(-50%, -50%) scale(1.04); opacity: 0.88; }
}

@keyframes empty-state-forest-orbit {
  0%, 100% { transform: rotate(26deg) scaleX(1.28) scaleY(0.62); }
  50% { transform: rotate(42deg) scaleX(1.32) scaleY(0.58); }
}

@keyframes empty-state-forest-orbit-reverse {
  0%, 100% { transform: rotate(-18deg) scaleX(1.62) scaleY(0.48); }
  50% { transform: rotate(-36deg) scaleX(1.56) scaleY(0.52); }
}

@keyframes empty-state-forest-spores {
  0%, 100% { transform: translate(-50%, -50%) scale(0.96); opacity: 0.44; }
  50% { transform: translate(-50%, -50%) scale(1.04) translateY(-10px); opacity: 0.82; }
}

@keyframes empty-state-forest-spores-reverse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.98); opacity: 0.34; }
  50% { transform: translate(-50%, -50%) scale(1.03) translateY(8px); opacity: 0.72; }
}

@keyframes empty-state-graphite-noise {
  0%, 100% { transform: translate(-50%, -50%) scale(0.96); opacity: 0.24; }
  50% { transform: translate(-50%, -50%) scale(1.04); opacity: 0.42; }
}

/* Empty-state legacy effects are disabled while the plasma canvas is active. */
.empty-state {
  background: transparent !important;
}

.empty-state::before,
.empty-state::after,
.empty-state > div::before,
.empty-state > div::after {
  display: none !important;
  animation: none !important;
}

.empty-state > div,
.empty-state .orb,
.empty-state h3,
.empty-state p {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .app-shell::before,
  .app-shell::after,
  .sidebar,
  .sidebar-card,
  .chat-header,
  .composer-shell,
  .thinking-card,
  .message-block.is-new,
  .settings-modal.open .settings-card,
  .model-picker-btn.is-open + .model-picker-menu,
  .composer-mode-btn[aria-expanded="true"] + .web-mode-menu,
  .composer-plus-btn.is-open + .composer-plus-panel,
  .empty-state::before,
  .empty-state::after,
  .empty-state > div::before,
  .empty-state > div::after,
  .empty-state .orb,
  .empty-state .orb::before,
  .empty-state .orb::after,
  .empty-state > div,
  .empty-state h3,
  .empty-state p {
    animation: none !important;
  }

  .session-item,
  .session-actions,
  .message-actions,
  button,
  .sidebar,
  .app-shell {
    transition: none !important;
  }
}

@media (max-width: 760px) {
  html {
    --mobile-safe-bottom-gap: max(0px, calc(env(safe-area-inset-bottom, 0px) - 14px));
  }

  html,
  body {
    overflow: hidden;
    height: 100%;
  }

  body {
    padding: 0;
  }

  .app-shell {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--layout-height);
    min-height: var(--layout-height);
    display: block;
    overflow: visible;
  }

  .chat-layout::before {
    content: "";
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 8, 12, 0.24), rgba(4, 6, 10, 0.5));
    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 30;
  }

  html:not(.sidebar-collapsed) .chat-layout::before {
    opacity: 1;
  }

  .composer-show-sidebar-btn {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    border-radius: 16px;
  }

  .composer-show-sidebar-btn .btn-icon svg {
    width: 16px;
    height: 16px;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: var(--layout-height);
    width: 100vw;
    max-width: 100vw;
    z-index: 35;
    border-radius: 0;
    border: none;
    box-shadow: none;
    background: var(--panel);
    backdrop-filter: blur(24px) saturate(160%) brightness(1.02);
    -webkit-backdrop-filter: blur(24px) saturate(160%) brightness(1.02);
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 16px;
    overscroll-behavior: contain;
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms cubic-bezier(0.22, 1, 0.36, 1);
    /* Reset the desktop --account-pill-room cutout: on mobile the sidebar
       is a full-screen overlay with a solid panel background, so the
       floating-pill trick isn't needed. */
    --account-pill-room: 0px;
  }

  /* Hide the desktop ::before glass overlay on mobile — the .sidebar
     itself already paints a solid panel background. */
  .sidebar::before {
    display: none;
  }

  html.sidebar-collapsed .sidebar {
    width: 100vw;
    max-width: 100vw;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 16px;
    opacity: 0;
    overflow: auto;
    pointer-events: none;
    transform: translateX(-100%);
  }

  .chat-layout {
    height: var(--layout-height);
    min-height: var(--layout-height);
    overflow: hidden;
    gap: 0;
    grid-template-rows: auto minmax(0, 1fr);
    background: transparent;
  }

  html[data-theme="light"] .chat-layout {
    background: linear-gradient(180deg, rgba(228, 235, 244, 0.96), rgba(222, 230, 240, 0.98));
  }

  .chat-header {
    position: relative;
    padding: 14px 14px 10px 64px;
    border-bottom: 1px solid var(--border);
    background: transparent;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    z-index: 24;
  }

  /* Frosted glass behind the header content — applied via pseudo so the chat-header
     itself doesn't become a backdrop-filter ancestor that would clip the model
     picker menu's own backdrop blur. */
  .chat-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--panel) 70%, transparent),
      color-mix(in srgb, var(--bg) 60%, transparent)
    );
    backdrop-filter: blur(10px) saturate(135%) brightness(1.02);
    -webkit-backdrop-filter: blur(10px) saturate(135%) brightness(1.02);
    pointer-events: none;
  }

  /* Ensure header content stacks on top of the frosted-glass pseudo */
  .chat-header > * {
    position: relative;
  }

  .chat-header-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 8px;
  }

  .chat-header-summary {
    grid-column: 1 / -1;
    flex: initial;
  }

  .chat-header-title {
    font-size: 20px;
  }

  .header-model-picker {
    grid-column: 1;
    min-width: 0;
    width: 100%;
    max-width: none;
    margin-left: 0;
  }

  html[data-theme="light"] .chat-header {
    background: rgba(238, 243, 249, 0.94);
    border-bottom-color: rgba(31, 49, 68, 0.08);
    box-shadow: 0 8px 20px rgba(128, 147, 171, 0.08);
  }

  html[data-theme="light"] .header-model-picker .model-picker-menu {
    background: linear-gradient(180deg, rgba(246, 249, 252, 0.98), rgba(234, 240, 247, 0.96));
    border-color: rgba(31, 49, 68, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66), 0 20px 44px rgba(120, 142, 168, 0.18);
    backdrop-filter: blur(18px) saturate(112%) brightness(1.01);
    -webkit-backdrop-filter: blur(18px) saturate(112%) brightness(1.01);
  }

  html[data-theme="light"] .token-usage-badge,
  html[data-theme="light"] .connection-badge {
    background: linear-gradient(180deg, rgba(245, 248, 252, 0.94), rgba(233, 239, 246, 0.92));
    border-color: rgba(31, 49, 68, 0.08);
    box-shadow: 0 6px 16px rgba(128, 147, 171, 0.08);
  }

  .token-usage-badge {
    grid-column: 2;
    width: 100%;
    margin-left: 0;
    align-self: stretch;
    justify-content: center;
    flex-wrap: nowrap;
    min-width: 0;
  }

  .connection-badge {
    padding: 4px 10px;
    min-height: 28px;
    font-size: 11px;
  }

  .chat-feed {
    padding: 10px 0 calc(var(--composer-height) + var(--viewport-keyboard-inset) + var(--mobile-safe-bottom-gap) + 14px);
  }

  html[data-theme="light"] .chat-feed {
    background:
      radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.2), transparent 22%),
      linear-gradient(180deg, rgba(229, 236, 245, 0.42), rgba(226, 233, 243, 0.12) 34%, rgba(223, 231, 241, 0) 100%);
  }

  .composer-wrap {
    position: fixed;
    left: 0;
    right: 16px;
    bottom: calc(var(--viewport-keyboard-inset) + var(--mobile-safe-bottom-gap) + 2px);
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    z-index: 26;
    pointer-events: none;
  }

  html.sidebar-collapsed .composer-wrap {
    left: 0;
  }

  .composer-input-row,
  .settings-head,
  .settings-footer {
    flex-direction: column;
    align-items: stretch;
  }

  #messageInput,
  #baseUrl,
  #apiKey,
  #languageSelect,
  #themeSelect,
  #settingsWebModeSelect,
  #systemPrompt {
    font-size: 16px;
  }

  .composer-toolbar,
  .composer-tools-left,
  .composer-tools-right {
    flex-wrap: wrap;
    align-items: stretch;
  }

  .composer-tools-right {
    width: 100%;
    justify-content: stretch;
  }

  .message-block,
  .thinking-row,
  .composer-shell {
    margin-left: 12px;
    margin-right: 12px;
  }

  .thinking-row,
  .message-block {
    max-width: none;
  }

  .message-row {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
  }

  .message-row.user {
    grid-template-columns: minmax(0, 1fr) 32px;
  }

  .avatar {
    width: 32px;
    height: 32px;
  }

  .message-row.user .message-main {
    max-width: 100%;
  }

  .message-actions {
    display: none;
  }

  /* Touch devices can't hover, so show actions inline as a compact strip
     instead of hiding them entirely. Keeps rename/delete/tags reachable. */
  .session-actions {
    display: inline-flex;
    opacity: 1;
    pointer-events: auto;
    gap: 4px;
    right: 6px;
  }

  .session-item:hover .session-actions,
  .session-item.active .session-actions {
    display: inline-flex;
    opacity: 1;
    pointer-events: auto;
  }

  .session-action {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }

  .session-action.menu {
    width: 30px;
    height: 30px;
    font-size: 18px;
  }

  .session-content {
    padding-right: 44px;
  }

  .composer-shell {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 20px;
    padding: 10px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24);
    pointer-events: auto;
  }

  .send-btn {
    width: 100%;
    min-width: 0;
    height: 44px;
    border-radius: 16px;
    font-size: 17px;
  }

  .composer-tools-left > *,
  .composer-tools-right > * {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }

  .model-picker {
    min-width: 0;
    max-width: none;
    width: 100%;
    flex-basis: 100%;
  }

  .model-picker-menu,
  .web-mode-menu {
    max-width: min(420px, calc(100vw - 24px));
    backdrop-filter: blur(22px) saturate(140%) brightness(1.04);
    -webkit-backdrop-filter: blur(22px) saturate(140%) brightness(1.04);
  }

  .composer-mode-btn,
  .composer-tool-btn,
  .model-picker-btn {
    width: 100%;
    justify-content: center;
    min-height: 40px;
    border-radius: 16px;
  }

  .settings-card {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    width: 100%;
    max-height: min(88svh, calc(100vh - 12px));
    border-radius: 20px 20px 0 0;
    padding: 16px;
  }

  .settings-modal.open .settings-card {
    animation: ui-sheet-in 240ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .sidebar-actions,
  .settings-footer-actions {
    flex-direction: column;
  }
}

@media (min-width: 641px) and (max-width: 760px) {
  .chat-header {
    padding: 10px 20px 0;
  }

  .chat-header-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 12px;
  }

  .chat-header-summary {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  .header-model-picker {
    min-width: 240px;
    max-width: min(360px, 40vw);
    width: auto;
    margin-left: auto;
  }

  .header-model-picker .model-picker-btn {
    min-height: 38px;
  }

  .token-usage-badge {
    width: auto;
    max-width: min(240px, 26vw);
    justify-content: flex-end;
    align-self: center;
    margin-left: 0;
    padding: 7px 10px;
    font-size: 11px;
  }

  .composer-wrap {
    right: 22px;
    left: 0;
    padding: 0;
  }

  html.sidebar-collapsed .composer-wrap {
    left: 0;
  }

  .composer-shell {
    margin-left: 18px;
    margin-right: 18px;
    padding: 6px 12px 10px;
    border-radius: 22px;
  }

  .composer-input-row {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .composer-toolbar {
    display: none;
  }

  #stopBtn {
    display: none;
  }

  .composer-tools-right {
    justify-content: flex-end;
  }

  .composer-tools-right > * {
    flex: 0 0 auto;
  }

  #messageInput {
    min-height: 42px;
    height: 42px;
    max-height: 42px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 42px;
  }

  .composer-show-sidebar-btn,
  .composer-plus-btn {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
  }

  .send-btn {
    width: 56px;
    min-width: 56px;
    height: 42px;
    flex: 0 0 56px;
    border-radius: 16px;
  }

  .send-btn span:last-child {
    display: none;
  }

  .send-btn .btn-icon,
  .send-btn .btn-icon svg {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 640px) {
  .brand-subtitle,
  .helper-card {
    display: none;
  }

  .sidebar {
    gap: 12px;
  }

  .sidebar-card {
    padding: 12px;
  }

  .session-list {
    max-height: none;
  }

  .chat-header {
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 12px 18px;
  }

  .chat-header-main {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px 10px;
  }

  .chat-header-summary {
    grid-column: 1;
    min-width: 0;
    gap: 8px;
  }

  .chat-header-title {
    font-size: 16px;
    line-height: 1.15;
  }

  .header-model-picker {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .header-model-picker .model-picker-btn {
    min-height: 42px;
    padding: 8px 38px 8px 12px;
    border-radius: 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    position: relative;
  }

  .header-model-picker .model-picker-copy {
    display: block;
    min-width: 0;
  }

  .header-model-picker .model-picker-caret {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
  }

  .token-usage-badge {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    max-width: 44vw;
    align-self: center;
    justify-content: flex-end;
    height: 28px;
    padding: 0 10px;
    border-radius: 14px;
    gap: 6px;
    font-size: 10px;
    box-sizing: border-box;
  }

  .token-usage-label {
    font-size: 7px;
    letter-spacing: 0.02em;
  }

  .token-usage-item {
    gap: 4px;
    min-width: 0;
  }

  .token-usage-divider {
    font-size: 8px;
  }

  .connection-badge {
    min-height: 22px;
    padding: 2px 7px;
    font-size: 9px;
  }

  .message-block,
  .thinking-row,
  .composer-shell {
    margin-left: 8px;
    margin-right: 8px;
  }

  .message-block {
    padding: 12px 0;
  }

  .empty-state {
    min-height: 100%;
    padding: 24px 18px;
    place-items: center;
    align-content: center;
  }

  html[data-theme="light"] .empty-state {
    background:
      radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.22), transparent 18%),
      radial-gradient(circle at 50% 54%, rgba(122, 165, 218, 0.035), transparent 24%),
      linear-gradient(180deg, rgba(228, 235, 244, 0), rgba(221, 229, 239, 0.2));
  }

  html[data-theme="light"] .empty-state > div {
    max-width: 300px;
  }

  html[data-theme="light"] .empty-state .orb {
    filter: saturate(0.92) brightness(0.98);
  }

  html[data-theme="light"] .empty-state h3 {
    color: #253241;
  }

  html[data-theme="light"] .empty-state p {
    color: #748394;
  }

  .empty-state > div {
    max-width: 290px;
  }

  .empty-state .orb {
    width: 42px;
    margin-bottom: 14px;
  }

  .empty-state h3 {
    margin: 0 0 10px;
    font-size: 18px;
    line-height: 1.2;
  }

  .empty-state p {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--muted);
  }

  .message-row {
    gap: 8px;
  }

  .message-row.user {
    grid-template-columns: minmax(0, 1fr) 28px;
  }

  .message-row.assistant {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .avatar {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    font-size: 12px;
  }

  .message-row.user .message-main {
    padding: 12px 14px;
    max-width: min(88%, 100%);
  }

  .message-row.assistant .message-main {
    padding-top: 0;
  }

  .message-text {
    font-size: 16px;
    line-height: 1.5;
  }

  .message-text ul,
  .message-text ol {
    padding-left: 18px;
  }

  .message-text table {
    min-width: 360px;
  }

  .message-image {
    max-width: 100%;
  }

  .thinking-card,
  .message-row.user .message-main {
    border-radius: 16px;
  }

  .thinking-row {
    padding: 2px 0 8px;
  }

  .thinking-card {
    padding: 10px 12px;
  }

  .thinking-head {
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
  }

  .thinking-spacer {
    display: none;
  }

  .thinking-toggle {
    padding: 4px 8px;
    font-size: 11px;
  }

  .composer-wrap {
    padding: 4px 8px 8px;
    z-index: 26;
    overflow: visible;
  }

  .composer-shell {
    padding: 4px 7px 7px;
    border-radius: 17px;
    position: relative;
    overflow: visible;
    width: 100%;
    max-width: 100%;
  }

  .attachment-tray {
    margin-bottom: 6px;
  }

  #messageInput {
    min-height: 40px;
    height: 40px;
    border-radius: 14px;
    padding: 8px 12px;
    font-size: 16px;
    transition: min-height 180ms ease, height 180ms ease, padding 180ms ease, border-radius 180ms ease;
  }

  .composer-input-row {
    flex-direction: row;
    align-items: center;
    gap: 5px;
    min-width: 0;
    transition: gap 260ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .composer-show-sidebar-btn,
  .composer-plus-btn {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    flex: 0 0 38px;
  }

  html.sidebar-collapsed .composer-show-sidebar-btn {
    margin-right: 0;
  }

  .composer-mic-btn {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    flex: 0 0 38px;
  }

  .send-btn {
    width: 44px;
    min-width: 44px;
    min-height: 38px;
    height: 38px;
    max-height: 38px;
    padding: 0;
    border-radius: 13px;
    flex: 0 0 44px;
    align-self: center;
    line-height: 1;
  }

  .send-btn span:last-child {
    display: none;
  }

  .send-btn .btn-icon {
    width: 16px;
    height: 16px;
  }

  .send-btn .btn-icon svg {
    width: 16px;
    height: 16px;
  }

  .composer-toolbar {
    margin-top: 0;
    display: flex;
    gap: 8px;
    overflow: visible;
    padding-bottom: 0;
    position: relative;
    min-width: 0;
    justify-content: stretch;
  }

  .composer-tools-left,
  .composer-tools-right {
    display: flex;
    width: 100%;
  }

  .composer-tools-right > * {
    min-width: 0;
    flex: 1 1 auto;
  }

  .model-picker-btn {
    grid-template-columns: minmax(0, 1fr) 14px;
    gap: 10px;
    padding: 8px 10px;
  }

  .composer-tool-btn,
  .composer-mode-btn,
  .model-picker-btn {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    justify-content: center;
  }

  .composer-tool-btn span:last-child,
  .composer-mode-btn span:last-child {
    display: inline;
  }

  .composer-tool-btn,
  .composer-mode-btn {
    padding: 0 14px;
  }

  .model-picker {
    width: 100%;
    min-width: 0;
    position: static;
  }

  .web-mode-picker {
    width: 100%;
    position: static;
  }

  .web-mode-menu,
  .model-picker-menu {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 86px);
    top: auto;
    width: auto;
    max-width: none;
    max-height: min(52svh, 420px);
    z-index: 85;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(28px) saturate(160%) brightness(1.06);
    -webkit-backdrop-filter: blur(28px) saturate(160%) brightness(1.06);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.46);
  }

  .header-model-picker .model-picker-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    bottom: auto;
    width: 100%;
    max-width: none;
    max-height: min(52svh, 420px);
    z-index: 32;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(28px) saturate(160%) brightness(1.06);
    -webkit-backdrop-filter: blur(28px) saturate(160%) brightness(1.06);
  }

  .composer-plus-panel {
    min-width: 0;
    width: min(260px, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
  }

  .composer-plus-panel .web-mode-menu {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    width: auto;
    max-height: min(40svh, 280px);
    z-index: 86;
  }

  .model-picker-label,
  .model-option-name {
    font-size: 11px;
  }

  .model-picker-badges {
    display: inline-flex;
    gap: 4px;
    flex-wrap: nowrap;
    align-items: center;
    margin-top: 0;
    max-width: 100%;
    justify-self: end;
    padding-right: 18px;
  }

  .header-model-picker .model-picker-badge,
  .header-model-picker .capability-badge {
    font-size: 9px;
    padding: 3px 6px;
  }

  .composer-mode-btn,
  .composer-tool-btn,
  .model-picker-btn {
    min-height: 46px;
  }

  .composer-tool-btn,
  .composer-mode-btn {
    font-size: 14px;
    border-radius: 18px;
  }

  .model-picker-btn {
    border-radius: 18px;
  }

  .new-chat-btn {
    min-height: 48px;
    border-radius: 16px;
  }

  .session-item {
    border-radius: 16px;
  }

  .model-picker-badges,
  .model-option-capabilities {
    gap: 4px;
    flex-wrap: wrap;
  }

  .model-picker-badge,
  .capability-badge {
    padding: 3px 6px;
    font-size: 9px;
  }

  .code-block-head {
    padding-right: 80px;
  }

  .settings-card {
    max-height: 92svh;
    padding: 14px;
  }

  .settings-modal {
    z-index: 90;
  }

  .sidebar-footer {
    display: block;
    margin-top: auto;
    padding-top: 10px;
  }

  .sidebar-collapse-btn {
    min-height: 46px;
    border-radius: 16px;
  }

}

/* ── Voice Mode Overlay ───────────────────────────── */
.voice-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  --voice-color: 124, 131, 255;
  --voice-color-2: 90, 95, 255;
  animation: voiceOverlayFadeIn 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.voice-overlay[hidden] { display: none; }

@keyframes voiceOverlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.voice-overlay:has(.voice-orb.is-thinking) {
  --voice-color: 255, 179, 71;
  --voice-color-2: 255, 140, 0;
}

.voice-overlay:has(.voice-orb.is-speaking) {
  --voice-color: 74, 222, 128;
  --voice-color-2: 34, 197, 94;
}

.voice-overlay-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(var(--voice-color), 0.16), transparent 55%),
    radial-gradient(circle at 50% 100%, rgba(var(--voice-color-2), 0.10), transparent 65%),
    rgba(8, 8, 12, 0.94);
  backdrop-filter: blur(36px) saturate(140%);
  -webkit-backdrop-filter: blur(36px) saturate(140%);
  transition: background 600ms ease;
}

.voice-overlay-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 48px 40px;
  max-width: 560px;
  width: 100%;
}

/* ── Voice Orb (multi-layer cinematic) ──────────────── */
.voice-orb {
  position: relative;
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  isolation: isolate;
}

/* Outer halo glow */
.voice-orb::before {
  content: "";
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(var(--voice-color), 0.28), transparent 60%);
  filter: blur(28px);
  z-index: -2;
  animation: voiceHaloBreathe 3.4s ease-in-out infinite;
}

/* Outer ring */
.voice-orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--voice-color), 0.38);
  box-shadow:
    inset 0 0 0 1px rgba(var(--voice-color), 0.08),
    0 0 60px rgba(var(--voice-color), 0.18);
  animation: voiceRingFloat 5s linear infinite;
}

/* Mid ring (added via ::after of voice-orb) */
.voice-orb::after {
  content: "";
  position: absolute;
  inset: 30px;
  border-radius: 50%;
  border: 1px solid rgba(var(--voice-color), 0.22);
  animation: voiceMidRingFloat 7s linear infinite reverse;
  z-index: -1;
}

/* Core glassy orb */
.voice-orb-core {
  position: relative;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 32%, rgba(255, 255, 255, 0.42), transparent 38%),
    radial-gradient(circle at 50% 50%, rgba(var(--voice-color), 0.95), rgba(var(--voice-color-2), 0.88) 60%, rgba(var(--voice-color-2), 0.7));
  box-shadow:
    inset 0 -20px 40px rgba(0, 0, 0, 0.25),
    inset 0 8px 20px rgba(255, 255, 255, 0.18),
    0 0 80px rgba(var(--voice-color), 0.55),
    0 0 160px rgba(var(--voice-color-2), 0.28);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1), height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Core highlight */
.voice-orb-core::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at 30% 25%, rgba(255, 255, 255, 0.5), transparent 40%);
  pointer-events: none;
}

/* Specular sheen */
.voice-orb-core::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.18), transparent 38%);
  pointer-events: none;
}

/* ── Mobile idle hint ─────────────────────────────────
   On mobile voice-mode the orb is idle between turns (waiting for
   "tap to talk"). A slow breathe on the core + ring tells the user
   it's an interactive control without being as attention-grabbing
   as the active listening pulse. */
.voice-overlay.voice-mode-mobile .voice-orb:not(.is-listening):not(.is-thinking):not(.is-speaking):not(.is-visualizing) .voice-orb-core {
  animation: voiceCoreBreathe 2.6s ease-in-out infinite;
  opacity: 0.85;
}
.voice-overlay.voice-mode-mobile .voice-orb:not(.is-listening):not(.is-thinking):not(.is-speaking):not(.is-visualizing) .voice-orb-ring {
  animation: voiceRingPulse 2.6s ease-in-out infinite;
  opacity: 0.7;
}

/* ── State: Listening ─────────────────────────────── */
.voice-orb.is-listening .voice-orb-core {
  animation: voiceCoreBreathe 1.6s ease-in-out infinite;
}
.voice-orb.is-listening .voice-orb-ring {
  animation: voiceRingPulse 1.6s ease-in-out infinite;
}

/* ── State: Thinking ──────────────────────────────── */
.voice-orb.is-thinking .voice-orb-core {
  animation: voiceCoreThink 2.4s linear infinite;
}
.voice-orb.is-thinking .voice-orb-ring {
  animation: voiceRingFloat 4s linear infinite, voiceRingPulse 1.8s ease-in-out infinite;
}

/* ── State: Speaking ──────────────────────────────── */
.voice-orb.is-speaking .voice-orb-core {
  animation: voiceCoreSpeak 0.7s ease-in-out infinite;
}
.voice-orb.is-speaking .voice-orb-ring {
  animation: voiceRingPulse 0.9s ease-in-out infinite;
}

/* ── Live Audio Visualizer (overrides idle anims) ── */
.voice-orb.is-visualizing .voice-orb-core {
  animation: none !important;
  transform: scale(calc(1 + var(--voice-volume, 0) * 0.45));
  transition: transform 70ms linear;
  box-shadow:
    inset 0 -20px 40px rgba(0, 0, 0, 0.25),
    inset 0 8px 20px rgba(255, 255, 255, 0.18),
    0 0 calc(70px + var(--voice-volume, 0) * 80px) rgba(var(--voice-color), calc(0.45 + var(--voice-volume, 0) * 0.4)),
    0 0 calc(140px + var(--voice-volume, 0) * 120px) rgba(var(--voice-color-2), calc(0.22 + var(--voice-volume, 0) * 0.3));
}

.voice-orb.is-visualizing .voice-orb-ring {
  animation: voiceRingFloat 6s linear infinite !important;
  border-color: rgba(var(--voice-color), calc(0.34 + var(--voice-volume, 0) * 0.4));
  box-shadow:
    inset 0 0 0 1px rgba(var(--voice-color), calc(0.08 + var(--voice-volume, 0) * 0.18)),
    0 0 calc(60px + var(--voice-volume, 0) * 60px) rgba(var(--voice-color), calc(0.18 + var(--voice-volume, 0) * 0.3));
  transition: border-color 90ms linear, box-shadow 90ms linear;
}

.voice-orb.is-visualizing::before {
  animation: none !important;
  background: radial-gradient(circle at center, rgba(var(--voice-color), calc(0.28 + var(--voice-volume, 0) * 0.45)), transparent 60%);
  transform: scale(calc(1 + var(--voice-volume, 0) * 0.15));
  transition: transform 120ms linear, background 120ms linear;
}

/* ── Keyframes ────────────────────────────────────── */
@keyframes voiceRingFloat {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes voiceMidRingFloat {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes voiceRingPulse {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50% { transform: scale(1.08); opacity: 0.95; }
}

@keyframes voiceHaloBreathe {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

@keyframes voiceCoreBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@keyframes voiceCoreThink {
  0% { transform: rotate(0deg) scale(0.96); }
  50% { transform: rotate(180deg) scale(1.04); }
  100% { transform: rotate(360deg) scale(0.96); }
}

@keyframes voiceCoreSpeak {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.07); }
  50% { transform: scale(0.98); }
  75% { transform: scale(1.05); }
}

/* ── Status & Transcript ──────────────────────────── */
.voice-status {
  font-size: 22px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.01em;
  text-align: center;
  text-shadow: 0 2px 24px rgba(var(--voice-color), 0.28);
  transition: text-shadow 400ms ease;
}

.voice-transcript {
  max-width: 480px;
  min-height: 28px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  line-height: 1.55;
  word-break: break-word;
  padding: 12px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
}

.voice-transcript:empty {
  display: none;
}

/* ── Controls ─────────────────────────────────────── */
.voice-controls {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

.voice-lang-btn {
  height: 56px;
  min-width: 64px;
  padding: 0 18px;
  border-radius: 28px;
  border: 1px solid rgba(var(--voice-color), 0.3);
  background: linear-gradient(180deg, rgba(var(--voice-color), 0.08), rgba(var(--voice-color), 0.03));
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.22),
    0 0 24px rgba(var(--voice-color), 0.18);
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.voice-lang-btn:hover {
  background: linear-gradient(180deg, rgba(var(--voice-color), 0.16), rgba(var(--voice-color), 0.06));
  border-color: rgba(var(--voice-color), 0.55);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 12px 28px rgba(0, 0, 0, 0.26),
    0 0 32px rgba(var(--voice-color), 0.32);
}

.voice-lang-btn:active {
  transform: translateY(0) scale(0.97);
}

.voice-close-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.22);
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.voice-close-btn:hover {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.22), rgba(239, 68, 68, 0.1));
  color: #fff;
  border-color: rgba(239, 68, 68, 0.45);
  transform: translateY(-1px);
}

.voice-close-btn:active {
  transform: translateY(0) scale(0.96);
}

.voice-close-btn svg {
  width: 22px;
  height: 22px;
}

/* ── Mobile ───────────────────────────────────────── */
@media (max-width: 760px) {
  .voice-orb {
    width: 200px;
    height: 200px;
  }
  .voice-orb-core {
    width: 110px;
    height: 110px;
  }
  .voice-orb::after {
    inset: 24px;
  }
  .voice-status {
    font-size: 18px;
  }
  .voice-transcript {
    font-size: 14px;
    max-width: 92vw;
  }
}

/* ── Team Modal ─────────────────────────────────────── */
.team-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.team-modal[hidden] { display: none; }

.team-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 12, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.team-modal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  color: var(--text);
}

.team-modal-head, .team-modal-tabs, .team-modal-footer { flex-shrink: 0; }

.team-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--border);
}

.team-modal-head h2 {
  margin: 4px 0 0;
  font-size: 22px;
  font-weight: 600;
}

.team-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.team-modal-close:hover {
  background: rgba(255, 255, 255, 0.06);
}

.team-modal-close svg {
  width: 18px;
  height: 18px;
}

.team-modal-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 24px 0;
  border-bottom: 1px solid var(--border);
}

.team-tab {
  padding: 10px 16px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.team-tab:hover { color: var(--text); }
.team-tab.is-active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.team-panel {
  padding: 18px 24px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.team-presets-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.team-preset-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
  text-align: left;
  font-family: inherit;
}

.team-preset-card:hover {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.03);
  transform: translateY(-1px);
}

.team-preset-card.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.team-preset-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
}

.team-preset-icon {
  font-size: 22px;
  line-height: 1;
}

.team-preset-card-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.team-preset-card-agents {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.team-preset-agent-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.team-preset-card-actions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.team-preset-delete-btn {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.team-preset-delete-btn:hover {
  color: #ef4444;
  border-color: #ef4444;
}

.team-agents-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0;
}

.team-agent-row {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 8px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-2);
}

.team-agent-row input[type="text"],
.team-agent-row textarea {
  width: 100%;
  padding: 8px 10px;
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  resize: vertical;
}

.team-agent-row textarea {
  min-height: 60px;
  font-family: inherit;
}

.team-agent-icon-input {
  text-align: center;
  font-size: 16px !important;
}

.team-agent-row input[type="color"] {
  width: 40px !important;
  height: 28px !important;
  padding: 2px !important;
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  cursor: pointer;
}

.team-agent-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.team-agent-row input[type="color"]::-webkit-color-swatch { border: none; border-radius: 4px; }
.team-agent-row input[type="color"]::-moz-color-swatch { border: none; border-radius: 4px; }

.team-agent-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.team-agent-remove {
  align-self: flex-start;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-agent-remove:hover {
  color: #ef4444;
  border-color: #ef4444;
}

.team-add-agent-btn,
.team-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  margin-right: 8px;
}

.team-add-agent-btn svg {
  width: 14px;
  height: 14px;
}

.team-add-agent-btn:hover,
.team-save-btn:hover {
  border-color: var(--accent);
}

.team-modal-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 24px 22px;
  border-top: 1px solid var(--border);
  background: var(--panel-2);
}

.team-modal-footer .field { display: flex; flex-direction: column; gap: 4px; }
.team-modal-footer .field > span { font-size: 12px; color: var(--muted); font-weight: 500; }

.team-custom-name-input,
.team-modal #teamCustomNameInput {
  width: 100%;
  padding: 10px 12px;
  background: var(--input, var(--panel-2));
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
}

.team-modal .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.team-modal .field > span { font-size: 12px; color: var(--muted); font-weight: 500; }

.team-selected-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.team-selected-name {
  font-size: 14px;
  font-weight: 600;
}

.team-selected-agents {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

#teamTaskInput {
  width: 100%;
  padding: 10px 12px;
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  resize: vertical;
}

.team-run-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 12px;
  border: none;
  background: var(--accent);
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}

.team-run-btn:hover { transform: translateY(-1px); }
.team-run-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.team-run-btn svg {
  width: 16px;
  height: 16px;
}

.team-mode-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.team-mode-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.team-mode-switch {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  padding: 2px;
}

.team-mode-opt {
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.team-mode-opt.is-active {
  background: var(--accent);
  color: white;
}

.team-mode-opt:hover:not(.is-active) {
  color: var(--text);
}

.team-voice-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.team-voice-toggle input {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ── Parallel Agents Layout ─────────────────────────── */
.parallel-team-row {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 12px;
  margin: 8px 0;
}

.parallel-agent-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--agent-color, var(--border));
  border-radius: 14px;
  background: var(--panel-2);
  min-height: 80px;
}

.parallel-agent-col-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--agent-color, var(--border));
  font-size: 12px;
  font-weight: 600;
  color: var(--agent-color, var(--text));
  align-self: flex-start;
}

.parallel-agent-col-head .agent-icon {
  font-size: 14px;
  line-height: 1;
}

.parallel-agent-col-content {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  word-wrap: break-word;
}

.parallel-agent-col-content.is-thinking {
  color: var(--muted);
  font-style: italic;
}

.parallel-agent-col.is-pending-col {
  opacity: 0.45;
}

/* ── Composer Context Row ──────────────────────────── */
.composer-context-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  padding: 6px 0 2px 0;
  max-height: 48px;
  overflow: hidden;
  transition: max-height 220ms ease, padding 220ms ease, opacity 200ms ease;
}

.composer-context-row[hidden] {
  display: flex !important;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  pointer-events: none;
}

/* Desktop: show only header chip; hide composer context row */
@media (min-width: 761px) {
  .composer-context-row { display: none !important; }
}

/* Mobile: hide header chip */
@media (max-width: 760px) {
  .active-persona-chip-header { display: none !important; }
}

/* ── Active Persona Chip ───────────────────────────── */
.active-persona-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--persona-color, var(--border));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  backdrop-filter: blur(16px) saturate(140%) brightness(1.04);
  -webkit-backdrop-filter: blur(16px) saturate(140%) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.14);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, transform 220ms ease, opacity 200ms ease, max-width 220ms ease, padding 220ms ease, margin 220ms ease, border-width 220ms ease;
  max-width: 220px;
  line-height: 1;
  position: relative;
  overflow: hidden;
}

.active-persona-chip:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
}

.active-persona-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--persona-color, var(--accent));
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
}

.active-persona-chip-header {
  padding: 0 4px 0 8px;
  height: 28px;
  box-sizing: border-box;
}

.connection-badge {
  height: 28px;
  padding: 0 10px;
  box-sizing: border-box;
}

.active-persona-chip-header .active-persona-chip-icon {
  width: 16px;
  height: 16px;
  font-size: 10px;
}

.active-persona-chip-header .active-persona-chip-clear {
  width: 16px;
  height: 16px;
}

.active-persona-chip[hidden] {
  display: inline-flex !important;
  opacity: 0;
  transform: scale(0.85);
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  border-width: 0;
  margin: 0;
  pointer-events: none;
  overflow: hidden;
}

@media (max-width: 760px) {
  .active-persona-chip-header[hidden] { display: none !important; }
}

.active-persona-chip-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.active-persona-chip-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.active-persona-chip-clear:hover {
  background: rgba(255, 99, 99, 0.2);
  color: #ff8a8a;
}

.active-persona-chip-clear svg {
  width: 10px;
  height: 10px;
}

/* ── Agents Page View ──────────────────────────────── */
.chat-layout.is-agents-view .chat-header,
.chat-layout.is-agents-view .chat-feed,
.chat-layout.is-agents-view #composerWrap,
.chat-layout.is-agents-view .composer-wrap {
  display: none !important;
}

/* Floating sidebar toggle — only visible when sidebar is collapsed AND we're on
   Agents or Project view (where the composer-based show-sidebar button is hidden). */
.floating-show-sidebar-btn {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 50;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  color: var(--text);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.floating-show-sidebar-btn:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04));
  border-color: var(--border-strong);
  transform: scale(1.04);
}

.floating-show-sidebar-btn .btn-icon { display: inline-flex; }
.floating-show-sidebar-btn .btn-icon svg { width: 18px; height: 18px; }

html.sidebar-collapsed .chat-layout.is-agents-view .floating-show-sidebar-btn,
html.sidebar-collapsed .chat-layout.is-project-view .floating-show-sidebar-btn {
  display: inline-flex;
}

.agents-view {
  flex: 1;
  display: flex;
  overflow-y: auto;
  padding: 32px 24px 64px;
  animation: agentsViewEnter 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.agents-view .agents-view-inner > * {
  animation: agentsItemEnter 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.agents-view .agents-view-head { animation-delay: 60ms; }
.agents-view .agents-grid { animation-delay: 120ms; }
.agents-view .agents-empty { animation-delay: 120ms; }

.agents-view .agent-card {
  animation: agentsItemEnter 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.agents-view .agent-card:nth-child(1) { animation-delay: 160ms; }
.agents-view .agent-card:nth-child(2) { animation-delay: 200ms; }
.agents-view .agent-card:nth-child(3) { animation-delay: 240ms; }
.agents-view .agent-card:nth-child(4) { animation-delay: 280ms; }
.agents-view .agent-card:nth-child(5) { animation-delay: 320ms; }
.agents-view .agent-card:nth-child(6) { animation-delay: 360ms; }
.agents-view .agent-card:nth-child(n+7) { animation-delay: 400ms; }

/* ── New Chat Creation Animation ───────────────────── */
.session-item.is-fresh {
  animation: sessionFreshEnter 540ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes sessionFreshEnter {
  0% {
    opacity: 0;
    transform: translateX(-12px) scale(0.96);
    background: color-mix(in srgb, var(--accent) 22%, transparent);
  }
  60% {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
  }
  100% {
    opacity: 1;
    transform: none;
    background: transparent;
  }
}

.chat-layout.is-fresh-chat .chat-header-title {
  animation: freshHeaderTitle 540ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 40ms;
}

.chat-layout.is-fresh-chat .connection-badge {
  animation: freshHeaderPill 520ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: 140ms;
}

.chat-layout.is-fresh-chat .header-model-picker {
  animation: freshHeaderPicker 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 80ms;
}

.chat-layout.is-fresh-chat .token-usage-badge {
  animation: freshHeaderPill 520ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: 200ms;
}

.chat-layout.is-fresh-chat .empty-state .orb {
  animation: freshOrbEnter 720ms cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
  animation-delay: 80ms !important;
}

.chat-layout.is-fresh-chat .empty-state h3 {
  animation: freshTitleEnter 560ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
  animation-delay: 220ms !important;
}

.chat-layout.is-fresh-chat .empty-state .empty-state-quote {
  animation: freshQuoteEnter 560ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
  animation-delay: 320ms !important;
}

.chat-layout.is-fresh-chat .composer-shell {
  animation: freshComposerEnter 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 120ms;
}

.chat-layout.is-fresh-chat .empty-hint-chip {
  animation: freshChipEnter 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.chat-layout.is-fresh-chat .empty-hint-chip:nth-child(1) { animation-delay: 280ms; }
.chat-layout.is-fresh-chat .empty-hint-chip:nth-child(2) { animation-delay: 340ms; }
.chat-layout.is-fresh-chat .empty-hint-chip:nth-child(3) { animation-delay: 400ms; }
.chat-layout.is-fresh-chat .empty-hint-chip:nth-child(4) { animation-delay: 460ms; }
.chat-layout.is-fresh-chat .empty-hint-chip:nth-child(n+5) { animation-delay: 520ms; }

@keyframes freshChipEnter {
  from { opacity: 0; transform: translateY(8px) scale(0.94); }
  to { opacity: 1; transform: none; }
}

@keyframes freshHeaderTitle {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: none; }
}

@keyframes freshHeaderPill {
  from { opacity: 0; transform: translateY(-6px) scale(0.85); }
  to { opacity: 1; transform: none; }
}

@keyframes freshHeaderPicker {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

@keyframes freshOrbEnter {
  0% { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes freshTitleEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes freshComposerEnter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes agentsViewEnter {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

@keyframes agentsItemEnter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.agents-view[hidden],
.agents-grid[hidden],
.agents-empty[hidden] { display: none !important; }

.agents-view-inner {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.agents-view-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.agents-view-titles h1 {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.agents-view-titles p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.agents-view-create-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  transition: opacity 0.15s, transform 0.15s;
  white-space: nowrap;
}

.agents-view-create-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.agents-view-create-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.agents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.agent-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  position: relative;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  min-height: 156px;
}

.agent-card:hover {
  border-color: var(--persona-color, var(--accent));
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.6);
}

.agent-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.agent-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: var(--persona-color, var(--accent));
  color: white;
  flex-shrink: 0;
}

.agent-card-name {
  font-size: 15px;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-card-prompt {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.agent-card-edit {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.agent-card-edit:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text);
}

.agent-card-edit svg {
  width: 14px;
  height: 14px;
}

.agent-card:hover .agent-card-edit {
  display: inline-flex;
}

.agents-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 20px;
  background: var(--panel-2);
}

.agents-empty-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  margin-bottom: 16px;
}

.agents-empty-icon svg {
  width: 28px;
  height: 28px;
}

.agents-empty-title {
  font-size: 15px;
  color: var(--text);
  margin-bottom: 16px;
  font-weight: 500;
}

.agents-empty-cta {
  margin-top: 4px;
}

@media (max-width: 760px) {
  .agents-view {
    padding: 20px 14px 32px;
  }

  .agents-view-head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
  }

  /* Hide the floating sidebar button only on project view (composer at bottom is
     the new navigation entry there). Agents view keeps it as the only way back
     to the sidebar. */
  html.sidebar-collapsed .chat-layout.is-project-view .floating-show-sidebar-btn {
    display: none !important;
  }

  /* Pin the floating sidebar button to the viewport on small screens for views
     where it's still visible (Agents). */
  .floating-show-sidebar-btn {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 14px);
    left: 14px;
    z-index: 60;
    touch-action: manipulation;
  }

  /* Make space at the top of Agents view so the floating button doesn't overlap
     the heading. */
  html.sidebar-collapsed .chat-layout.is-agents-view .agents-view {
    padding-top: 64px;
  }

  /* Mobile-only: pin the project-view composer to the BOTTOM of the viewport
     (like the chat composer) instead of the top. The composer-wrap is a
     fixed-position element reparented as a direct child of .chat-layout
     (not inside .project-view-composer-slot), so we override its top/bottom
     here directly. The slot itself collapses to zero height so the project
     content doesn't reserve a top gap for the now-bottom composer. */
  .chat-layout.is-project-view .project-view {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
  }
  .chat-layout.is-project-view .project-view-inner {
    gap: 12px;
  }
  .chat-layout.is-project-view .project-view-composer-slot {
    display: none;
  }
  .chat-layout.is-project-view > .composer-wrap {
    top: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
    left: 12px !important;
    right: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: auto !important;
    transform: none !important;
  }
  /* Drop the chat-view's ≤640px shell margin so the pill aligns with the
     wrap's exact 12px viewport gutters instead of inheriting an extra 8px on
     one side via the cascade. */
  .chat-layout.is-project-view > .composer-wrap .composer-shell {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .agents-view-titles h1 {
    font-size: 22px;
  }

  .agents-view-titles p {
    font-size: 13px;
  }

  .agents-view-actions {
    display: flex;
  }

  .agents-view-create-btn {
    width: 100%;
    justify-content: center;
  }

  .agents-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .agent-card {
    min-height: 0;
    padding: 14px;
  }

  .agents-empty {
    padding: 40px 16px;
  }

  .active-persona-chip {
    max-width: 160px;
  }

  .agents-btn-badge {
    font-size: 9px;
    padding: 1px 5px;
  }
}

/* ── Personas Sidebar ──────────────────────────────── */
.personas-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.personas-add-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.personas-add-btn svg {
  width: 14px;
  height: 14px;
}

.personas-add-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(124, 131, 255, 0.08);
}

.personas-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.persona-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: left;
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  position: relative;
  overflow: hidden;
}

.persona-item:hover {
  border-color: var(--persona-color, var(--accent));
  background: rgba(255, 255, 255, 0.03);
}

.persona-item.is-active {
  border-color: var(--persona-color, var(--accent));
  box-shadow: 0 0 0 1px var(--persona-color, var(--accent)) inset;
}

.persona-item-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--persona-color, var(--panel));
  color: white;
  font-size: 14px;
  flex-shrink: 0;
}

.persona-item-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.persona-item-edit {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  flex-shrink: 0;
}

.persona-item-edit:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.persona-item-edit svg {
  width: 12px;
  height: 12px;
}

.persona-item:hover .persona-item-edit {
  display: inline-flex;
}

.personas-empty {
  font-size: 12px;
  color: var(--muted);
  padding: 8px 4px;
  text-align: center;
  font-style: italic;
}

/* ── Persona Modal ─────────────────────────────────── */
.persona-modal-card {
  max-width: 560px;
}

.persona-edit-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

@media (max-width: 560px) {
  .persona-edit-row {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .persona-edit-fields {
    width: 100%;
  }
  .persona-modal-actions {
    flex-direction: column-reverse;
    width: 100%;
  }
  .persona-modal-actions .team-run-btn,
  .persona-modal-actions .persona-delete-btn {
    width: 100%;
  }
}

.persona-edit-icon-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}

.persona-edit-fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.persona-avatar-preview {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: white;
  line-height: 1;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  user-select: none;
}

.persona-icon-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}

#personaIconInput {
  width: 44px;
  height: 36px;
  text-align: center;
  font-size: 18px;
  padding: 0;
  border-radius: 10px;
  background: var(--input, var(--panel-2));
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  outline: none;
}

#personaIconInput:focus {
  border-color: var(--accent);
}

.persona-color-wrap {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: var(--input, var(--panel-2));
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.persona-color-wrap:hover {
  border-color: var(--accent);
}

.persona-color-wrap::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 6px;
  background: var(--current-color, #7c83ff);
  pointer-events: none;
}

#personaColorInput {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: 0;
}

#personaModal .field input,
#personaModal .field textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--input, var(--panel-2));
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  resize: vertical;
  line-height: 1.5;
}

#personaModal .field input:focus,
#personaModal .field textarea:focus {
  border-color: var(--accent);
}

#personaModal .field textarea {
  min-height: 120px;
}

.persona-modal-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.persona-delete-btn {
  padding: 12px 16px;
  border: 1px solid #e85d6f;
  background: transparent;
  color: #e85d6f;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
}

.persona-delete-btn:hover {
  background: rgba(232, 93, 111, 0.1);
}

.persona-modal-actions .team-run-btn {
  flex: 1;
}

.parallel-agent-col-content.is-pending {
  color: var(--muted);
  font-style: italic;
}

.parallel-agent-col-content .typing-dots {
  display: inline-flex;
  gap: 3px;
  margin-left: 4px;
}
.parallel-agent-col-content .typing-dots span {
  width: 4px;
  height: 4px;
  background: var(--muted);
  border-radius: 50%;
  animation: parallel-typing 1.2s ease-in-out infinite;
}
.parallel-agent-col-content .typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.parallel-agent-col-content .typing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes parallel-typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}

@media (max-width: 720px) {
  .parallel-team-row { grid-template-columns: 1fr; }
}

/* ── Agent Message Header ───────────────────────────── */
.agent-message-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--agent-color, var(--border));
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--agent-color, var(--text));
}

.agent-message-head .agent-icon {
  font-size: 14px;
  line-height: 1;
}

@media (max-width: 640px) {
  .team-modal { padding: 12px; }
  .team-modal-card { max-height: 95vh; }
  .team-presets-grid { grid-template-columns: 1fr; }
  .team-agent-row { grid-template-columns: 50px 1fr 32px; }
}

/* ── Project Page View ─────────────────────────────── */
.chat-layout.is-project-view .chat-header,
.chat-layout.is-project-view .chat-feed {
  display: none !important;
}

.project-view {
  flex: 1;
  display: block;
  overflow-y: auto;
  padding: 56px 24px 96px;
  animation: projectViewEnter 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.project-view[hidden] { display: none !important; }

.project-view-inner {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.project-view-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 4px;
  animation: projectItemEnter 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 40ms;
}

.project-view-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--text);
  opacity: 0.85;
}

.project-view-icon svg { width: 28px; height: 28px; }

.project-view-title {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  flex: 1;
  word-break: break-word;
}

.project-view-menu-btn {
  background: transparent;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.project-view-menu-btn:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text);
}
.project-view-menu-btn svg { width: 20px; height: 20px; }

html[data-theme="light"] .project-view-menu-btn:hover {
  background: rgba(0,0,0,0.05);
}

.project-view-new-chat-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.project-view-new-chat-btn svg { width: 16px; height: 16px; }
.project-view-new-chat-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
}
.project-view-new-chat-btn:active { transform: scale(0.97); }

html[data-theme="light"] .project-view-new-chat-btn {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.1);
}
html[data-theme="light"] .project-view-new-chat-btn:hover {
  background: rgba(0,0,0,0.07);
  border-color: rgba(0,0,0,0.16);
}

.project-view-composer-slot {
  min-height: 56px;
  height: 56px;
  animation: projectItemEnter 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 100ms;
}

/* In project view the composer-wrap lives as a sibling of project-view inside
   chat-layout (NOT inside the project-view scroll container) so its
   backdrop-filter can blur the scrolling project content behind it — exactly
   like the chat composer blurs chat-feed messages. Inherits position: fixed
   and left/right calc from the base .composer-wrap rule; only top is flipped
   and width is constrained to match project-view-inner (760px max).
   Desktop only: on phones (≤760px) the composer is pinned to the viewport
   bottom by the rule inside the @media (max-width: 760px) block above. */
@media (min-width: 761px) {
  .chat-layout.is-project-view > .composer-wrap {
    top: var(--project-composer-top, 124px) !important;
    bottom: auto !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Entry: subtle fade+slide on .composer-shell when entering project view.
   The shell already has its own compositing layer (backdrop-filter) so
   animating it doesn't break the blur. */
@keyframes projectComposerEnter {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: none; }
}
.chat-layout.is-project-view .composer-wrap.is-entering .composer-shell {
  animation: projectComposerEnter 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 80ms;
}

@media (min-width: 761px) and (max-width: 808px) {
  .chat-layout.is-project-view .composer-wrap {
    left: 24px !important;
    right: 24px !important;
    margin-left: 0 !important;
    width: auto !important;
  }
}

.chat-layout.is-project-view .composer-wrap .empty-hints { display: none !important; }

/* Composer is at the TOP inside project view (desktop only) — flip all
   dropdowns to open downward. On phones (≤760px) the composer is back at the
   viewport bottom, so this override doesn't apply and the base upward-opening
   behavior (defined on each menu) takes effect. */
@media (min-width: 761px) {
  .chat-layout.is-project-view .composer-plus-panel,
  .chat-layout.is-project-view .slash-command-menu,
  .chat-layout.is-project-view .model-picker-menu,
  .chat-layout.is-project-view .web-mode-menu,
  .chat-layout.is-project-view .plus-skill-picker .web-mode-menu,
  .chat-layout.is-project-view .plus-web-mode-picker .web-mode-menu {
    top: calc(100% + 10px);
    bottom: auto;
    z-index: 50;
  }
}

.project-view-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  padding: 0 4px;
  animation: projectItemEnter 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 160ms;
}

.project-view-tab {
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 14px;
  cursor: pointer;
  position: relative;
  transition: color 0.15s;
}

.project-view-tab:hover { color: var(--text); }

.project-view-tab.is-active {
  color: var(--text);
}

.project-view-tab.is-active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
}

.project-view-pane {
  min-height: 240px;
  animation: projectItemEnter 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 200ms;
}

.project-view-pane[hidden] { display: none !important; }

.project-view-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
  gap: 8px;
}

.project-view-empty-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}

.project-view-empty-sub {
  font-size: 13px;
  color: var(--muted);
  max-width: 360px;
}

.project-view-chat-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
}

.project-view-chat-row {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 10px;
  transition: background 0.15s;
}

.project-view-chat-row:hover {
  background: rgba(255,255,255,0.05);
}

html[data-theme="light"] .project-view-chat-row:hover {
  background: rgba(0,0,0,0.04);
}

.project-view-chat-item {
  flex: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 12px;
  background: transparent;
  border: none;
  padding: 12px 14px;
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}

.project-view-chat-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding-right: 6px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}

.project-view-chat-row:hover .project-view-chat-actions,
.project-view-chat-row:focus-within .project-view-chat-actions {
  opacity: 1;
  pointer-events: auto;
}

.project-view-chat-action {
  appearance: none;
  background: transparent;
  border: none;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.project-view-chat-action[data-project-chat-action="tags"] {
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}

.project-view-chat-action svg {
  width: 16px;
  height: 16px;
}

.project-view-chat-action:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text);
}

html[data-theme="light"] .project-view-chat-action:hover {
  background: rgba(0,0,0,0.06);
}

.project-view-chat-action.danger:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.project-view-chat-item-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.project-view-chat-item-meta {
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
}

.project-view-chat-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-left: 10px;
  flex-shrink: 1;
  min-width: 0;
  max-width: 50%;
}

.project-view-chat-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.project-view-chat-tag:hover {
  background: rgba(255, 255, 255, 0.11);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.18);
}

.project-view-chat-tag.is-overflow {
  cursor: default;
  opacity: 0.7;
}

html[data-theme="light"] .project-view-chat-tag {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .project-view-chat-tag:hover {
  background: rgba(0, 0, 0, 0.07);
  border-color: rgba(0, 0, 0, 0.16);
}

@media (max-width: 760px) {
  .project-view-chat-tags {
    max-width: 100%;
    margin-left: 0;
    margin-top: 6px;
    flex-basis: 100%;
  }
  .project-view-chat-tag {
    height: 20px;
    font-size: 10.5px;
    padding: 0 8px;
  }
  /* Touch devices: always show actions (no hover state). */
  .project-view-chat-actions {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ---------- Stats button (sidebar) ---------- */
.stats-btn {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 8px;
  background: transparent !important;
  color: var(--muted) !important;
  border-color: rgba(255,255,255,0.06) !important;
}
.stats-btn:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--text) !important;
}
.stats-btn .btn-icon {
  flex-shrink: 0;
}

/* ---------- Mindmap & Galaxy sidebar buttons ---------- */
.mindmap-btn,
.galaxy-btn {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 8px;
  background: transparent !important;
  color: var(--muted) !important;
  border-color: rgba(255,255,255,0.06) !important;
}
.mindmap-btn:hover,
.galaxy-btn:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--text) !important;
}
.mindmap-btn .btn-icon,
.galaxy-btn .btn-icon { flex-shrink: 0; }
html[data-theme="light"] .mindmap-btn,
html[data-theme="light"] .galaxy-btn {
  border-color: rgba(15, 23, 42, 0.08) !important;
}
html[data-theme="light"] .mindmap-btn:hover,
html[data-theme="light"] .galaxy-btn:hover {
  background: rgba(15, 23, 42, 0.04) !important;
}

/* ---------- Stats modal ---------- */
.stats-backdrop[hidden],
.stats-modal[hidden] {
  display: none !important;
}

.stats-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 14, 0.62);
  backdrop-filter: blur(6px);
  z-index: 60;
  animation: ui-fade-in 200ms ease;
}
html[data-theme="light"] .stats-backdrop {
  background: rgba(20, 25, 35, 0.45);
}

.stats-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 61;
  width: min(900px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.55);
  animation: ui-modal-in 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.stats-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--border);
}

.stats-modal-title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.stats-modal-subtitle {
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}

.stats-modal-close {
  appearance: none;
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.stats-modal-close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}
html[data-theme="light"] .stats-modal-close:hover {
  background: rgba(0, 0, 0, 0.05);
}
.stats-modal-close svg {
  width: 18px;
  height: 18px;
}

.stats-modal-body {
  padding: 18px 22px 22px;
  overflow: auto;
}

/* Summary cards */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.stats-card {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
}
html[data-theme="light"] .stats-card {
  background: rgba(0, 0, 0, 0.025);
}

.stats-card-label {
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.stats-card-value {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.stats-card-sub {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--muted);
}

/* Section heading inside body */
.stats-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 18px 0 10px;
}

/* 14-day chart */
.stats-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 110px;
  padding: 8px 8px 0;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  border-radius: 12px;
  position: relative;
}
html[data-theme="light"] .stats-chart {
  background: rgba(0, 0, 0, 0.02);
}

.stats-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  height: 100%;
  justify-content: flex-end;
  cursor: default;
}

.stats-bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);
  transition: opacity 0.15s;
  min-height: 2px;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1) inset;
}
.stats-bar:hover {
  opacity: 0.85;
}
.stats-bar-empty {
  background: rgba(255, 255, 255, 0.06);
}
html[data-theme="light"] .stats-bar-empty {
  background: rgba(0, 0, 0, 0.06);
}

.stats-bar-label {
  font-size: 9.5px;
  color: var(--muted);
  text-align: center;
  width: 100%;
  height: 12px;
  line-height: 12px;
}

/* Per-model table */
.stats-table-wrap {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.stats-table th, .stats-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.stats-table th {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.025);
}
html[data-theme="light"] .stats-table th {
  background: rgba(0, 0, 0, 0.025);
}

.stats-table td.num, .stats-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
}

.stats-table tr:last-child td {
  border-bottom: 0;
}

.stats-table tr.is-total td {
  font-weight: 700;
  background: rgba(99, 102, 241, 0.08);
}

.stats-model-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.stats-model-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
}

.stats-model-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.stats-model-badge.exact {
  background: rgba(34, 197, 94, 0.13);
  border-color: rgba(34, 197, 94, 0.28);
  color: #4ade80;
}
.stats-model-badge.estimated {
  background: rgba(234, 179, 8, 0.10);
  border-color: rgba(234, 179, 8, 0.28);
  color: #facc15;
}

/* Empty / footnote */
.stats-empty {
  padding: 36px 20px;
  text-align: center;
  color: var(--muted);
}
.stats-empty-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.stats-footnote {
  margin-top: 16px;
  padding: 10px 14px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.55;
}

@media (max-width: 760px) {
  .stats-modal {
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: auto;
    transform: none;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 14px;
  }
  .stats-modal-head {
    padding: 16px 16px 12px;
  }
  .stats-modal-title {
    font-size: 17px;
  }
  .stats-modal-body {
    padding: 14px 14px 18px;
  }
  .stats-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats-card-value {
    font-size: 18px;
  }
  .stats-table th, .stats-table td {
    padding: 8px 10px;
    font-size: 12px;
  }
  .stats-table td.num, .stats-table th.num {
    font-size: 11.5px;
  }
  .stats-model-name {
    max-width: 130px;
  }
  .stats-bar-label {
    font-size: 8.5px;
  }
}

/* ---------- Diff code blocks ---------- */
.diff-block {
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin: 8px 0;
}
html[data-theme="light"] .diff-block {
  background: rgba(0, 0, 0, 0.015);
}

.diff-block-head {
  padding: 8px 12px !important;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border);
}
html[data-theme="light"] .diff-block-head {
  background: rgba(0, 0, 0, 0.02);
}

.diff-block-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.diff-stats {
  display: inline-flex;
  gap: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  font-weight: 600;
}
.diff-stat-added { color: #4ade80; }
.diff-stat-removed { color: #f87171; }

.diff-block-actions {
  margin-left: auto;
}

.diff-toggle-btn {
  appearance: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  letter-spacing: 0.02em;
}
.diff-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border-color: var(--border-strong);
}
html[data-theme="light"] .diff-toggle-btn {
  background: rgba(0, 0, 0, 0.03);
}
html[data-theme="light"] .diff-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

.diff-body {
  display: block;
  padding: 0 !important;
  margin: 0;
  background: transparent !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  overflow-x: auto;
}

/* Unified mode rows */
.diff-body-unified .diff-line {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 6px;
  padding: 1px 12px;
  white-space: pre;
}

.diff-body-unified .diff-add {
  background: rgba(34, 197, 94, 0.12);
}
.diff-body-unified .diff-add .diff-sigil { color: #22c55e; font-weight: 700; }

.diff-body-unified .diff-remove {
  background: rgba(248, 113, 113, 0.12);
}
.diff-body-unified .diff-remove .diff-sigil { color: #f87171; font-weight: 700; }

.diff-body-unified .diff-hunk {
  background: rgba(99, 102, 241, 0.12);
  color: #c7d2fe;
  padding: 3px 12px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
html[data-theme="light"] .diff-body-unified .diff-hunk {
  color: #4338ca;
}

.diff-body-unified .diff-filemeta,
.diff-body-unified .diff-meta {
  color: var(--muted);
  font-style: italic;
  padding: 1px 12px 1px 36px;
}

.diff-sigil {
  color: var(--muted);
  text-align: center;
  user-select: none;
}

.diff-text {
  white-space: pre;
}

/* Split mode (side-by-side) */
.diff-body-split {
  padding: 0 !important;
}
.diff-split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.diff-split-row:last-child { border-bottom: 0; }
html[data-theme="light"] .diff-split-row {
  border-bottom-color: rgba(0, 0, 0, 0.04);
}

.diff-split-cell {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 6px;
  padding: 1px 12px;
  white-space: pre;
  border-right: 1px solid var(--border);
  min-width: 0;
}
.diff-split-row .diff-split-cell:last-child {
  border-right: 0;
}

.diff-split-cell.diff-add {
  background: rgba(34, 197, 94, 0.12);
}
.diff-split-cell.diff-add .diff-sigil { color: #22c55e; font-weight: 700; }

.diff-split-cell.diff-remove {
  background: rgba(248, 113, 113, 0.12);
}
.diff-split-cell.diff-remove .diff-sigil { color: #f87171; font-weight: 700; }

.diff-split-cell.diff-empty {
  background: rgba(255, 255, 255, 0.015);
}
html[data-theme="light"] .diff-split-cell.diff-empty {
  background: rgba(0, 0, 0, 0.025);
}

.diff-split-row.diff-split-both {
  grid-template-columns: 1fr;
  padding: 1px 12px;
  white-space: pre;
}
.diff-split-row.diff-split-both.diff-hunk {
  background: rgba(99, 102, 241, 0.12);
  color: #c7d2fe;
  border-top: 1px solid var(--border);
  padding: 3px 12px;
}
html[data-theme="light"] .diff-split-row.diff-split-both.diff-hunk {
  color: #4338ca;
}
.diff-split-row.diff-split-both.diff-filemeta,
.diff-split-row.diff-split-both.diff-meta {
  color: var(--muted);
  font-style: italic;
  padding-left: 32px;
}

@media (max-width: 600px) {
  .diff-toggle-btn {
    padding: 3px 8px;
    font-size: 10.5px;
  }
  .diff-body-unified .diff-line,
  .diff-split-cell {
    font-size: 11.5px;
    padding: 1px 8px;
  }
  .diff-block-head {
    padding: 6px 10px !important;
    gap: 8px;
  }
  /* Force unified on tiny screens — split is unreadable. */
  .diff-body-split .diff-split-row { grid-template-columns: 1fr; }
  .diff-body-split .diff-split-cell { border-right: 0; border-bottom: 1px solid var(--border); }
  .diff-body-split .diff-split-cell:last-child { border-bottom: 0; }
}

@keyframes projectViewEnter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes projectItemEnter {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- Chat-header icon button (used by Mind map + modal actions) ---------- */
.chat-header-icon-btn {
  appearance: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--muted);
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
  flex-shrink: 0;
}
.chat-header-icon-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border-color: var(--border-strong);
}
.chat-header-icon-btn:active {
  transform: scale(0.96);
}
html[data-theme="light"] .chat-header-icon-btn {
  background: rgba(0, 0, 0, 0.025);
}
html[data-theme="light"] .chat-header-icon-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}
.chat-header-icon-btn svg {
  width: 16px;
  height: 16px;
}

/* ---------- Mind-map modal ---------- */
.mindmap-backdrop[hidden],
.mindmap-modal[hidden] {
  display: none !important;
}

.mindmap-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 14, 0.7);
  backdrop-filter: blur(8px);
  z-index: 60;
  animation: ui-fade-in 200ms ease;
}
html[data-theme="light"] .mindmap-backdrop {
  background: rgba(20, 25, 35, 0.5);
}

.mindmap-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 61;
  width: min(1200px, calc(100vw - 24px));
  height: min(820px, calc(100vh - 24px));
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.55);
  animation: ui-modal-in 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mindmap-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.mindmap-modal-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.mindmap-modal-subtitle {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--muted);
}
.mindmap-modal-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.mindmap-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 28px 28px 40px;
  background:
    radial-gradient(circle at 25% 25%, rgba(99, 102, 241, 0.06) 0, transparent 40%),
    radial-gradient(circle at 75% 75%, rgba(56, 189, 248, 0.06) 0, transparent 40%);
}
html[data-theme="light"] .mindmap-modal-body {
  background:
    radial-gradient(circle at 25% 25%, rgba(99, 102, 241, 0.05) 0, transparent 40%),
    radial-gradient(circle at 75% 75%, rgba(56, 189, 248, 0.05) 0, transparent 40%);
}

.mindmap-canvas {
  --mindmap-zoom: 1;
  transform: scale(var(--mindmap-zoom));
  transform-origin: top left;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  min-width: max-content;
}

/* Tree layout: horizontal flow, lists carry curved connectors */
.mindmap-tree {
  display: inline-block;
  padding-bottom: 12px;
}

.mindmap-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
}

.mindmap-node-card {
  appearance: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
  max-width: 360px;
  color: var(--text);
  transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s, background 0.15s;
  position: relative;
  z-index: 1;
}
.mindmap-node-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 18px -8px rgba(99, 102, 241, 0.4);
}

.mindmap-node-label {
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  word-break: break-word;
}
.mindmap-node-sub {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

/* Root node: gradient pill */
.mindmap-node-root > .mindmap-node-card {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(56, 189, 248, 0.10));
  border-color: rgba(99, 102, 241, 0.32);
  font-weight: 600;
  min-width: 200px;
}
.mindmap-node-root > .mindmap-node-card .mindmap-node-label {
  font-size: 14.5px;
}

/* User-question node: subtle blue tint */
.mindmap-node-user > .mindmap-node-card {
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.28);
}
html[data-theme="light"] .mindmap-node-user > .mindmap-node-card {
  background: rgba(56, 189, 248, 0.12);
}

/* Topic (assistant heading) — purple tint */
.mindmap-node-topic > .mindmap-node-card {
  background: rgba(168, 85, 247, 0.07);
  border-color: rgba(168, 85, 247, 0.28);
}

/* Leaf node — quiet */
.mindmap-node-leaf > .mindmap-node-card {
  font-size: 12.5px;
  background: rgba(255, 255, 255, 0.025);
}
html[data-theme="light"] .mindmap-node-leaf > .mindmap-node-card {
  background: rgba(0, 0, 0, 0.025);
}

/* Children list: vertical, with horizontal connector to parent */
.mindmap-children {
  list-style: none;
  margin: 0;
  padding: 0 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

/* Vertical guide line through children */
.mindmap-children::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 18px;
  bottom: 18px;
  width: 1.5px;
  background: linear-gradient(180deg, transparent 0%, var(--border-strong) 12%, var(--border-strong) 88%, transparent 100%);
  border-radius: 2px;
}

.mindmap-li {
  position: relative;
  display: flex;
  align-items: stretch;
}

/* Horizontal stub from vertical guide → child node */
.mindmap-li::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 18px;
  width: 14px;
  height: 1.5px;
  background: var(--border-strong);
  border-radius: 2px;
}

/* Curved corner where vertical guide meets first/last child */
.mindmap-li:first-child::after,
.mindmap-li:last-child::after {
  content: "";
  position: absolute;
  left: -14px;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--border-strong);
  pointer-events: none;
}
.mindmap-li:first-child::after {
  top: 4px;
  border-right: 0;
  border-bottom: 0;
  border-radius: 8px 0 0 0;
}
.mindmap-li:last-child::after {
  bottom: 4px;
  top: auto;
  border-right: 0;
  border-top: 0;
  border-radius: 0 0 0 8px;
}
/* When a list has only one child, hide the duplicated curve */
.mindmap-li:only-child::after {
  display: none;
}
.mindmap-li:only-child::before {
  top: 50%;
  transform: translateY(-50%);
}

/* Empty-state */
.mindmap-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--muted);
}
.mindmap-empty-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

/* Flash highlight when jumping back to chat from mind-map */
.message-block-flash {
  animation: messageFlash 1.4s ease;
}
@keyframes messageFlash {
  0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.55); }
  40% { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0); }
  100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}

@media (max-width: 760px) {
  .mindmap-modal {
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: auto;
    transform: none;
    width: auto;
    max-width: none;
    height: calc(100vh - 12px);
    height: calc(100dvh - 12px);
    border-radius: 14px;
  }
  .mindmap-modal-head {
    padding: 12px 14px;
  }
  .mindmap-modal-title { font-size: 15px; }
  .mindmap-modal-subtitle { display: none; }
  .mindmap-modal-body {
    padding: 16px 14px 28px;
  }
  .mindmap-node-card {
    padding: 8px 11px;
    min-width: 110px;
    max-width: 240px;
  }
  .mindmap-node-label { font-size: 12.5px; }
  .mindmap-children { padding-left: 22px; gap: 8px; }
  .mindmap-children::before { left: 11px; }
  .mindmap-li::before { left: -11px; width: 11px; }
  .mindmap-li:first-child::after,
  .mindmap-li:last-child::after { left: -11px; width: 11px; }
}

@media (max-width: 640px) {
  .project-view {
    padding: 28px 16px 64px;
  }
  .project-view-title { font-size: 22px; }
  .project-view-icon svg { width: 22px; height: 22px; }
}

/* ── Project Sources tab ─────────────────────────── */
.project-sources-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 0 18px;
}

.project-sources-add {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.project-sources-add svg { width: 16px; height: 16px; }
.project-sources-add:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
}
.project-sources-add:active { transform: scale(0.98); }

html[data-theme="light"] .project-sources-add {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.1);
}
html[data-theme="light"] .project-sources-add:hover {
  background: rgba(0,0,0,0.07);
  border-color: rgba(0,0,0,0.16);
}

.project-sources-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
}

.project-sources-empty {
  padding: 64px 24px 24px;
}
.project-sources-empty-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  margin-bottom: 8px;
}
.project-sources-empty-icon svg { width: 28px; height: 28px; }
html[data-theme="light"] .project-sources-empty-icon { background: rgba(0,0,0,0.04); }

.project-source-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0 24px;
}

.project-source-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 12px;
  transition: background 0.15s;
}
.project-source-row:hover { background: rgba(255,255,255,0.04); }
html[data-theme="light"] .project-source-row:hover { background: rgba(0,0,0,0.04); }

.project-source-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 12px;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}

.project-source-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  color: var(--muted);
}
.project-source-icon svg { width: 18px; height: 18px; }
.project-source-icon[data-source-type="file"] { color: #8ab4ff; background: rgba(138, 180, 255, 0.1); }
.project-source-icon[data-source-type="url"] { color: #8ee8ff; background: rgba(142, 232, 255, 0.1); }
.project-source-icon[data-source-type="text"] { color: #f5b8e0; background: rgba(245, 184, 224, 0.1); }

html[data-theme="light"] .project-source-icon { background: rgba(0,0,0,0.05); }

.project-source-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.project-source-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-source-meta {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-source-meta-sep { opacity: 0.6; }

.project-source-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding-right: 6px;
}

.project-source-action {
  appearance: none;
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.project-source-action svg { width: 16px; height: 16px; }
.project-source-action:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text);
}
html[data-theme="light"] .project-source-action:hover { background: rgba(0,0,0,0.06); }
.project-source-action.danger:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* Pin button is always visible (unlike delete) — its state is the primary
   indicator of whether a source is pinned. */
.project-source-pin {
  opacity: 0.55;
}
.project-source-row:hover .project-source-pin,
.project-source-row.is-pinned .project-source-pin {
  opacity: 1;
}
.project-source-pin.is-active {
  color: var(--accent, #f5b8e0);
  background: rgba(245, 184, 224, 0.12);
}
.project-source-pin.is-active:hover {
  background: rgba(245, 184, 224, 0.2);
  color: var(--accent, #f5b8e0);
}
.project-source-action:not(.project-source-pin) {
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.project-source-row:hover .project-source-action:not(.project-source-pin),
.project-source-row:focus-within .project-source-action:not(.project-source-pin) {
  opacity: 1;
}

.project-source-row.is-pinned {
  background: rgba(245, 184, 224, 0.04);
  box-shadow: inset 2px 0 0 var(--accent, #f5b8e0);
}
html[data-theme="light"] .project-source-row.is-pinned {
  background: rgba(245, 184, 224, 0.08);
}

.project-sources-hint {
  font-size: 12px;
  color: var(--muted);
  padding: 0 4px 12px;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .project-source-action:not(.project-source-pin) {
    opacity: 1;
  }
}

/* ── Source modal (lightweight dialog) ───────────── */
.source-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  animation: sourceModalFade 180ms ease;
}
@keyframes sourceModalFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.source-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}

.source-modal-card {
  position: relative;
  width: min(560px, 100%);
  max-height: min(80vh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--surface, #1b1620);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  overflow: hidden;
  animation: sourceModalSlide 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes sourceModalSlide {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

html[data-theme="light"] .source-modal-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
}

.source-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 12px;
}
.source-modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.source-modal-close {
  appearance: none;
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.source-modal-close svg { width: 16px; height: 16px; }
.source-modal-close:hover { background: rgba(255,255,255,0.08); color: var(--text); }
html[data-theme="light"] .source-modal-close:hover { background: rgba(0,0,0,0.06); }

.source-modal-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 8px 20px 20px;
  overflow: auto;
}

.source-modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.source-modal-field > span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.source-modal-field input,
.source-modal-field textarea {
  appearance: none;
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
  transition: border-color 0.15s, background 0.15s;
}
.source-modal-field textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.5;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 13px;
}
.source-modal-field input:focus,
.source-modal-field textarea:focus {
  outline: none;
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
}
html[data-theme="light"] .source-modal-field input,
html[data-theme="light"] .source-modal-field textarea {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.1);
}
html[data-theme="light"] .source-modal-field input:focus,
html[data-theme="light"] .source-modal-field textarea:focus {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.2);
}

.source-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}

.source-modal-btn {
  appearance: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.source-modal-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); }
.source-modal-btn:disabled { opacity: 0.6; cursor: progress; }

.source-modal-btn.primary {
  background: var(--accent, #f5b8e0);
  border-color: transparent;
  color: #1a1018;
}
.source-modal-btn.primary:hover {
  filter: brightness(1.05);
  background: var(--accent, #f5b8e0);
}

html[data-theme="light"] .source-modal-btn {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.1);
}
html[data-theme="light"] .source-modal-btn:hover {
  background: rgba(0,0,0,0.07);
  border-color: rgba(0,0,0,0.16);
}

/* === Theme Studio: font family variants === */
html[data-font="mono"] body,
html[data-font="mono"] input,
html[data-font="mono"] textarea,
html[data-font="mono"] select,
html[data-font="mono"] button {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, ui-monospace, monospace;
}
html[data-font="serif"] body,
html[data-font="serif"] input,
html[data-font="serif"] textarea,
html[data-font="serif"] select,
html[data-font="serif"] button {
  font-family: "Iowan Old Style", "Apple Garamond", "Palatino", "Georgia", "Times New Roman", serif;
}
/* Keep code blocks and explicit monospace surfaces monospaced regardless of font choice. */
html[data-font="mono"] pre code,
html[data-font="serif"] pre code,
html[data-font="mono"] code,
html[data-font="serif"] code,
html[data-font="mono"] .stats-table,
html[data-font="serif"] .stats-table {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, ui-monospace, monospace !important;
}

/* === Theme Studio: UI density === */
html[data-density="compact"] {
  --app-gap: 10px;
  font-size: 14px;
}
html[data-density="compact"] body { padding: 8px; }
html[data-density="compact"] .messages,
html[data-density="compact"] .chat-history { gap: 10px; }
html[data-density="compact"] .field { gap: 4px; }

html[data-density="cozy"] {
  --app-gap: 16px;
  font-size: 15px;
}
html[data-density="cozy"] body { padding: 12px; }

html[data-density="spacious"] {
  --app-gap: 22px;
  font-size: 16px;
}
html[data-density="spacious"] body { padding: 18px; }
html[data-density="spacious"] .messages,
html[data-density="spacious"] .chat-history { gap: 22px; }
html[data-density="spacious"] .field { gap: 10px; }

/* === Theme Studio: background patterns === */
html[data-bg-pattern="none"] .app-shell::before,
html[data-bg-pattern="none"] .app-shell::after {
  display: none !important;
}
html[data-bg-pattern="none"] body::before {
  display: none !important;
}

html[data-bg-pattern="grid"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(0deg, var(--border) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, var(--border) 0 1px, transparent 1px 48px);
  opacity: 0.55;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.85), rgba(0,0,0,0.35) 70%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.85), rgba(0,0,0,0.35) 70%, transparent 100%);
}
html[data-bg-pattern="grid"] .app-shell::before,
html[data-bg-pattern="grid"] .app-shell::after {
  display: none !important;
}

/* === Theme Studio: collapsible panel === */
.theme-studio {
  margin: 10px 0 0;
  padding: 0;
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  background: var(--panel-2);
}
.theme-studio > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  user-select: none;
  border-radius: 12px;
}
.theme-studio > summary::-webkit-details-marker { display: none; }
.theme-studio-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.theme-studio-chev {
  width: 16px;
  height: 16px;
  opacity: 0.7;
  transition: transform 200ms ease;
}
.theme-studio[open] .theme-studio-chev { transform: rotate(180deg); }
.theme-studio-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 4px 14px 14px;
}
.theme-studio-body .field { gap: 4px; }
.theme-studio-body .field span { font-size: 12px; opacity: 0.78; }
@media (max-width: 540px) {
  .theme-studio-body { grid-template-columns: 1fr; }
}
.accent-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.accent-row input[type="color"] {
  width: 56px;
  height: 34px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 2px;
  background: var(--input);
  cursor: pointer;
}
.theme-studio-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--panel-3);
  color: var(--muted);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.theme-studio-reset:hover {
  color: var(--text);
  border-color: var(--accent-soft);
  background: var(--panel-4);
}
.theme-studio-reset svg { width: 16px; height: 16px; }

/* === Quote-and-ask floating button === */
.quote-ask-btn {
  position: absolute;
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, var(--panel-3), var(--panel-2));
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 8px 24px rgba(0, 0, 0, 0.32),
    0 2px 6px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  opacity: 0;
  transform: translateY(4px) scale(0.96);
  transition: opacity 140ms ease, transform 140ms ease, background 160ms ease, border-color 160ms ease;
  pointer-events: auto;
  user-select: none;
  white-space: nowrap;
}
.quote-ask-btn[hidden] { display: none !important; }
.quote-ask-btn.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.quote-ask-btn:hover {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--panel-4), var(--panel-3));
}
.quote-ask-btn:active {
  transform: translateY(0) scale(0.97);
}
.quote-ask-btn svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
  flex: 0 0 auto;
}
html[data-theme="light"] .quote-ask-btn {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 8px 24px rgba(15, 23, 42, 0.18),
    0 2px 6px rgba(15, 23, 42, 0.10);
}
@media (max-width: 540px) {
  .quote-ask-btn { font-size: 12px; padding: 6px 10px; }
  .quote-ask-btn svg { width: 13px; height: 13px; }
}

/* === Sounds settings row === */
.sounds-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 14px;
  margin: 10px 0 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-2);
}
.sounds-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  flex: 1 1 auto;
  min-width: 0;
}
.sounds-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.sounds-toggle-track {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--panel-4);
  border: 1px solid var(--border-strong);
  transition: background 160ms ease, border-color 160ms ease;
  flex: 0 0 auto;
}
.sounds-toggle-thumb {
  position: absolute;
  top: 50%;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text);
  transform: translateY(-50%);
  transition: left 160ms ease, background 160ms ease;
}
.sounds-toggle input:checked + .sounds-toggle-track {
  background: color-mix(in srgb, var(--accent) 70%, transparent);
  border-color: var(--accent);
}
.sounds-toggle input:checked + .sounds-toggle-track .sounds-toggle-thumb {
  left: 18px;
  background: #fff;
}
.sounds-toggle input:focus-visible + .sounds-toggle-track {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
}
.sounds-toggle-label {
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
}
.sounds-volume {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 2 1 180px;
  min-width: 160px;
}
.sounds-volume-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--muted);
  flex: 0 0 auto;
}
.sounds-volume-icon svg { width: 100%; height: 100%; }
.sounds-volume input[type="range"] {
  flex: 1 1 auto;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--panel-4);
  border-radius: 999px;
  outline: none;
}
.sounds-volume input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--panel-1);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.sounds-volume input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--panel-1);
  cursor: pointer;
}
.sounds-volume input[type="range"]:disabled { opacity: 0.45; cursor: not-allowed; }
.sounds-test-btn {
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--panel-3);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease;
  flex: 0 0 auto;
}
.sounds-test-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.sounds-test-btn:active:not(:disabled) { transform: scale(0.97); }
.sounds-test-btn:disabled { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 540px) {
  .sounds-row { gap: 8px; padding: 10px; }
  .sounds-volume { flex-basis: 100%; }
}

/* ---------- Chat Galaxy modal ---------- */
.galaxy-backdrop[hidden],
.galaxy-modal[hidden] { display: none !important; }
.galaxy-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 4, 12, 0.78);
  backdrop-filter: blur(10px);
  z-index: 60;
  animation: ui-fade-in 220ms ease;
}
.galaxy-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 61;
  width: min(1280px, calc(100vw - 24px));
  height: min(860px, calc(100vh - 24px));
  background: #05060f;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
  animation: ui-modal-in 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.galaxy-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 10, 22, 0.85);
  color: #e6e9ff;
  flex-shrink: 0;
}
.galaxy-modal-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #e6e9ff;
}
.galaxy-modal-subtitle {
  margin-top: 2px;
  font-size: 12.5px;
  color: rgba(220, 225, 255, 0.6);
}
.galaxy-modal-actions { display: flex; gap: 6px; align-items: center; }
.galaxy-modal-actions .chat-header-icon-btn {
  color: rgba(220, 225, 255, 0.85);
}
.galaxy-modal-actions .chat-header-icon-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.galaxy-modal-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #02040c;
}
.galaxy-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
}
.galaxy-canvas:active { cursor: grabbing; }
.galaxy-tooltip {
  position: absolute;
  pointer-events: none;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(15, 18, 30, 0.92);
  color: #e6e9ff;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
  z-index: 2;
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.galaxy-tooltip[hidden] { display: none !important; }
.galaxy-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(8, 10, 22, 0.7);
  color: rgba(220, 225, 255, 0.7);
  font-size: 11.5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
  z-index: 2;
  letter-spacing: 0.01em;
}
@media (max-width: 540px) {
  .galaxy-modal {
    width: min(420px, calc(100vw - 28px));
    height: min(72vh, calc(100vh - 96px));
    height: min(72dvh, calc(100dvh - 96px));
    border-radius: 16px;
  }
  .galaxy-modal-head { padding: 12px 14px; }
  .galaxy-modal-title { font-size: 15px; }
  .galaxy-modal-subtitle { font-size: 11.5px; }
  .galaxy-canvas { cursor: default; }
  .galaxy-canvas:active { cursor: default; }
  .galaxy-hint { font-size: 10.5px; padding: 5px 10px; bottom: 10px; }
}

/* ---------- User badge in sidebar footer ---------- */
.user-badge-wrap {
  position: relative;
}
.user-badge {
  display: flex;
}
.user-badge-action {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  /* Frosted-glass pill — same recipe as token-usage badge */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  backdrop-filter: blur(16px) saturate(140%) brightness(1.04);
  -webkit-backdrop-filter: blur(16px) saturate(140%) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 10px 26px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.user-badge-action:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 14px 30px rgba(0, 0, 0, 0.28);
  transform: translateY(-1px);
}
.user-badge-action .btn-icon svg { width: 16px; height: 16px; }
.user-badge[data-state="user"] .user-badge-action { display: none; }
.user-badge[data-state="anon"] .user-badge-user { display: none !important; }

.user-badge-user {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  /* Frosted-glass pill — matches the Sign in / token-usage treatment */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  backdrop-filter: blur(16px) saturate(140%) brightness(1.04);
  -webkit-backdrop-filter: blur(16px) saturate(140%) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 10px 26px rgba(0, 0, 0, 0.22);
  min-width: 0;
  font: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.user-badge-user:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 14px 30px rgba(0, 0, 0, 0.28);
  transform: translateY(-1px);
}
.user-badge-user[aria-expanded="true"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.06));
  border-color: color-mix(in srgb, var(--accent) 35%, rgba(255, 255, 255, 0.18));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 14px 30px rgba(0, 0, 0, 0.3),
    0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.user-badge-avatar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 35%, var(--panel-3));
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.user-badge-name {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.user-badge-name-text {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-badge-name-sub {
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.user-badge-caret {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: transform 160ms ease;
}
.user-badge-caret svg { width: 16px; height: 16px; display: block; }
/* Light theme: white-on-white doesn't read as glass — invert the
   recipe so the pill darkens against the light sidebar surface. */
html[data-theme="light"] .user-badge-action,
html[data-theme="light"] .user-badge-user {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.4));
  border-color: rgba(31, 49, 68, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(31, 49, 68, 0.04),
    0 10px 26px rgba(70, 90, 120, 0.16);
}

html[data-theme="light"] .user-badge-action:hover,
html[data-theme="light"] .user-badge-user:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.55));
  border-color: rgba(31, 49, 68, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(31, 49, 68, 0.05),
    0 14px 30px rgba(70, 90, 120, 0.2);
}

html[data-theme="light"] .user-badge-user[aria-expanded="true"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
  border-color: color-mix(in srgb, var(--accent) 40%, rgba(31, 49, 68, 0.2));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 14px 30px rgba(70, 90, 120, 0.22),
    0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}

.user-badge-user[aria-expanded="true"] .user-badge-caret {
  transform: rotate(180deg);
}

/* User popover menu (ChatGPT-style) */
.user-menu-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  box-shadow:
    0 18px 40px -16px rgba(0, 0, 0, 0.55),
    0 6px 14px -10px rgba(0, 0, 0, 0.35);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 1px;
  animation: userMenuIn 140ms ease-out;
  transform-origin: bottom center;
}
.user-menu-popover[hidden] { display: none !important; }
@keyframes userMenuIn {
  from { opacity: 0; transform: translateY(4px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 120ms ease, color 120ms ease;
}
/* Without this, ``display: flex`` above wins over the UA's ``[hidden] {
 * display: none }`` and the JS ``element.hidden = true`` toggle has no
 * visible effect — that's how the Admin entry was leaking to non-admins. */
.user-menu-item[hidden] { display: none !important; }
.user-menu-item:hover,
.user-menu-item:focus-visible {
  background: var(--panel-3);
  outline: none;
}
.user-menu-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.user-menu-icon svg { width: 16px; height: 16px; display: block; }
.user-menu-item:hover .user-menu-icon,
.user-menu-item:focus-visible .user-menu-icon {
  color: var(--text);
}
.user-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 4px;
}
.user-menu-danger {
  color: var(--text);
}
.user-menu-danger:hover,
.user-menu-danger:focus-visible {
  background: color-mix(in srgb, #ef9e9e 14%, var(--panel-3));
  color: #ffd5d5;
}
.user-menu-danger:hover .user-menu-icon,
.user-menu-danger:focus-visible .user-menu-icon {
  color: #ef9e9e;
}

/* ---------- Auth modal ---------- */
.auth-backdrop[hidden],
.auth-modal[hidden] { display: none !important; }
.auth-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 14, 0.62);
  backdrop-filter: blur(6px);
  z-index: 70;
  animation: ui-fade-in 200ms ease;
}
html[data-theme="light"] .auth-backdrop {
  background: rgba(20, 25, 35, 0.45);
}
.auth-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 71;
  width: min(420px, calc(100vw - 28px));
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.55);
  animation: ui-modal-in 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.auth-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 12px;
}
.auth-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.auth-modal-close {
  appearance: none;
  background: transparent;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  cursor: pointer;
}
.auth-modal-close:hover { background: var(--panel-3); color: var(--text); }
.auth-modal-tabs {
  display: flex;
  gap: 6px;
  padding: 0 20px 14px;
  border-bottom: 1px solid var(--border);
}
.auth-modal-tab {
  flex: 1;
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  padding: 9px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  border-radius: 10px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.auth-modal-tab:hover { color: var(--text); background: var(--panel-2); }
.auth-modal-tab[aria-selected="true"] {
  color: var(--text);
  background: var(--panel-2);
  border-color: var(--border);
}
.auth-modal-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px 20px;
}
.auth-modal-form .field { margin-top: 0; }
.auth-modal-form .field input {
  font: inherit;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  outline: none;
  transition: border-color 140ms ease, background 140ms ease;
}
.auth-modal-form .field input:focus {
  border-color: var(--accent);
  background: var(--panel-3);
}
.auth-modal-error {
  font-size: 12.5px;
  color: #ef6464;
  background: rgba(239, 100, 100, 0.08);
  border: 1px solid rgba(239, 100, 100, 0.3);
  padding: 8px 10px;
  border-radius: 8px;
  margin: -2px 0 -2px;
}
.auth-modal-submit {
  appearance: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 16px;
  background: var(--accent);
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, #000);
  border-radius: 10px;
  cursor: pointer;
  transition: filter 140ms ease, transform 140ms ease;
  margin-top: 2px;
}
.auth-modal-submit:hover { filter: brightness(1.08); }
.auth-modal-submit:active { transform: translateY(1px); }
.auth-modal-submit:disabled { opacity: 0.6; cursor: progress; }
.auth-modal-hint {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}

/* ---------- Admin panel modal ---------- */
.admin-backdrop[hidden],
.admin-modal[hidden] { display: none !important; }
.admin-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 14, 0.62);
  backdrop-filter: blur(6px);
  z-index: 70;
  animation: ui-fade-in 200ms ease;
}
html[data-theme="light"] .admin-backdrop {
  background: rgba(20, 25, 35, 0.45);
}
.admin-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 71;
  width: min(960px, calc(100vw - 28px));
  height: min(720px, calc(100vh - 28px));
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.55);
  animation: ui-modal-in 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.admin-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--border);
}
.admin-modal-title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.admin-modal-subtitle {
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}
.admin-modal-close {
  appearance: none;
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.admin-modal-close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}
html[data-theme="light"] .admin-modal-close:hover {
  background: rgba(0, 0, 0, 0.05);
}
.admin-modal-close svg { width: 18px; height: 18px; }

.admin-modal-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px 10px;
}
.admin-search-input {
  flex: 1;
  padding: 9px 14px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  transition: border-color 140ms ease, background 140ms ease;
}
.admin-search-input:focus {
  border-color: var(--accent);
  background: var(--panel-3);
}
.admin-refresh-btn {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.admin-refresh-btn:hover {
  background: var(--panel-3);
  color: var(--text);
  border-color: var(--border-strong);
}
.admin-refresh-btn svg { width: 16px; height: 16px; }
.admin-refresh-btn.is-loading svg { animation: admin-spin 800ms linear infinite; }
@keyframes admin-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.admin-status-bar {
  margin: 0 22px 8px;
  padding: 9px 12px;
  font-size: 12.5px;
  border-radius: 8px;
  background: color-mix(in srgb, #ef9e9e 14%, var(--panel-2));
  border: 1px solid color-mix(in srgb, #ef9e9e 35%, var(--border));
  color: #f5c0c0;
}
.admin-status-bar[data-tone="ok"] {
  background: color-mix(in srgb, #8ec5a4 12%, var(--panel-2));
  border-color: color-mix(in srgb, #8ec5a4 35%, var(--border));
  color: #b6e1c5;
}
.admin-status-bar[hidden] { display: none !important; }

.admin-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 22px 14px;
}
.admin-user-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-empty {
  padding: 40px 8px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
.admin-empty[hidden] { display: none !important; }

.admin-user-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: background 140ms ease, border-color 140ms ease;
}
.admin-user-card:hover {
  background: var(--panel-3);
  border-color: var(--border-strong);
}
.admin-user-card.is-self {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
}
.admin-user-card.is-banned {
  opacity: 0.72;
}
.admin-user-card.is-busy {
  pointer-events: none;
  opacity: 0.55;
}

.admin-user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 35%, var(--panel-3));
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.admin-user-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.admin-user-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-user-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.admin-user-self-tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 1px 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border));
  border-radius: 6px;
}
.admin-user-badges {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.admin-badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.admin-badge.is-admin {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-2));
  color: color-mix(in srgb, var(--accent) 80%, #fff);
}
.admin-badge.is-banned {
  border-color: color-mix(in srgb, #ef9e9e 50%, var(--border));
  background: color-mix(in srgb, #ef9e9e 14%, var(--panel-2));
  color: #f5c0c0;
}
.admin-badge.is-bootstrap {
  border-color: color-mix(in srgb, #c9a86b 55%, var(--border));
  background: color-mix(in srgb, #c9a86b 14%, var(--panel-2));
  color: #e2c285;
}
.admin-user-meta {
  font-size: 11.5px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.admin-user-meta strong {
  color: var(--text);
  font-weight: 600;
}

.admin-user-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.admin-action-btn {
  appearance: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.admin-action-btn:hover:not(:disabled) {
  background: var(--panel-3);
  color: var(--text);
  border-color: var(--border-strong);
}
.admin-action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.admin-action-btn svg { width: 15px; height: 15px; }
.admin-action-btn.is-active {
  background: color-mix(in srgb, var(--accent) 18%, var(--panel-2));
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  color: color-mix(in srgb, var(--accent) 80%, #fff);
}
.admin-action-btn.is-danger:hover:not(:disabled) {
  background: color-mix(in srgb, #ef9e9e 18%, var(--panel-3));
  border-color: color-mix(in srgb, #ef9e9e 50%, var(--border-strong));
  color: #ffd5d5;
}
.admin-action-btn.is-warn:hover:not(:disabled) {
  background: color-mix(in srgb, #c9a86b 18%, var(--panel-3));
  border-color: color-mix(in srgb, #c9a86b 50%, var(--border-strong));
  color: #f0d28a;
}

.admin-modal-foot {
  padding: 10px 22px 14px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--muted);
}
.admin-modal-hint code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  font-size: 11px;
}

@media (max-width: 720px) {
  .admin-modal {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    border: none;
  }
  .admin-modal-head { padding: 14px 16px 10px; }
  .admin-modal-title { font-size: 17px; }
  .admin-modal-toolbar { padding: 10px 16px 8px; }
  .admin-modal-body { padding: 4px 16px 14px; }
  .admin-modal-foot { padding: 10px 16px 14px; }
  .admin-user-card {
    grid-template-columns: 38px minmax(0, 1fr);
  }
  .admin-user-actions {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    padding-top: 6px;
    border-top: 1px dashed var(--border);
    margin-top: 6px;
  }
}

/* ---------- Settings → Account section ---------- */
/* Match the layout vocabulary already used by .settings-server-section so
   the Account block reads as "yet another rounded card", not a naked dump
   of inline elements. */
.settings-account-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.account-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-2);
}
.account-row-meta { min-width: 0; flex: 1 1 220px; }
.account-row-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.account-row-value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.account-email-value {
  font-size: 14px;
  color: var(--text);
  word-break: break-all;
}
.account-email-value.account-email-empty {
  color: var(--muted);
  font-style: italic;
  font-size: 13px;
}
.account-email-badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-3);
  color: var(--muted);
}
.account-email-badge.is-verified {
  background: color-mix(in srgb, #8ec5a4 14%, var(--panel-2));
  border-color: color-mix(in srgb, #8ec5a4 45%, var(--border));
  color: #b6e1c5;
}
.account-email-badge.is-unverified {
  background: color-mix(in srgb, #c9a86b 14%, var(--panel-2));
  border-color: color-mix(in srgb, #c9a86b 50%, var(--border));
  color: #e2c285;
}
.account-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
/* Several button base styles set ``display: inline-flex`` which has the same
   specificity as ``[hidden]`` (the browser's UA rule). The HTML attribute
   wins by source order in plain HTML but loses against later author CSS, so
   we have to assert it explicitly here — otherwise toggling ``el.hidden``
   from JS leaves the button visible. */
.sidebar-action-btn[hidden],
.secondary-btn[hidden],
.danger-btn[hidden] { display: none !important; }
.small-action-btn {
  font-size: 12px;
  padding: 5px 10px;
  /* Stop multi-word Russian labels (``Отправить ещё раз``) from wrapping
     inside the button itself — let the flex container wrap to a new row
     instead. */
  white-space: nowrap;
}
.account-danger-btn {
  color: #ef9e9e;
}
.account-danger-btn:hover {
  background: color-mix(in srgb, #ef9e9e 14%, var(--panel-3));
  border-color: color-mix(in srgb, #ef9e9e 50%, var(--border-strong));
  color: #ffd5d5;
}
.account-email-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.account-email-form[hidden] { display: none !important; }
.account-email-input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 9px 14px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  transition: border-color 140ms ease;
}
.account-email-input:focus { border-color: var(--accent); }
/* Email features temporarily hidden until the public domain is verified
 * with a transactional provider (see is-a.dev PR #37214 + Resend domain
 * verification). All backend code remains intact — flip these rules off
 * to bring the UI back. */
#accountSettingsSection,
#authEmailField,
#authForgotLink,
#authForgotForm,
#authResetForm {
  display: none !important;
}

.account-status {
  padding: 8px 12px;
  font-size: 12.5px;
  line-height: 1.4;
  border-radius: 10px;
  background: color-mix(in srgb, #8ec5a4 12%, var(--panel-2));
  border: 1px solid color-mix(in srgb, #8ec5a4 35%, var(--border));
  color: #b6e1c5;
}
.account-status[hidden] { display: none !important; }
.account-status[data-tone="err"] {
  background: color-mix(in srgb, #ef9e9e 14%, var(--panel-2));
  border-color: color-mix(in srgb, #ef9e9e 35%, var(--border));
  color: #f5c0c0;
}
.account-smtp-hint {
  color: #d8b070;
}

/* ---------- Auth modal: forgot / reset sub-forms + email row ---------- */
.auth-modal-forgot-link {
  appearance: none;
  background: transparent;
  border: none;
  font: inherit;
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
  align-self: center;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 140ms ease, color 140ms ease;
}
.auth-modal-forgot-link:hover {
  background: rgba(255, 255, 255, 0.05);
  text-decoration: underline;
}
html[data-theme="light"] .auth-modal-forgot-link:hover {
  background: rgba(0, 0, 0, 0.04);
}
.auth-modal-subform[hidden] { display: none !important; }
.auth-modal-subform-intro {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}
.auth-modal-submit.auth-modal-danger {
  background: color-mix(in srgb, #ef9e9e 18%, var(--panel-2));
  border-color: color-mix(in srgb, #ef9e9e 45%, var(--border));
  color: #f5c0c0;
}
.auth-modal-submit.auth-modal-danger:hover {
  background: color-mix(in srgb, #ef9e9e 26%, var(--panel-2));
  border-color: color-mix(in srgb, #ef9e9e 60%, var(--border));
}

/* ---------- 2FA setup / disable / regen modal ---------- */
.twofa-qr-host {
  align-self: center;
  width: 220px;
  height: 220px;
  padding: 12px;
  background: #fff; /* QR codes need a light background to scan reliably */
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.twofa-qr-host svg {
  width: 100%;
  height: 100%;
  display: block;
}
.twofa-qr-host[data-empty="true"] {
  background: var(--panel-2);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.twofa-secret-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--muted);
}
.twofa-secret-label { white-space: nowrap; }
.twofa-secret-code {
  font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "Fira Code", "Consolas", monospace;
  font-size: 13px;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  user-select: all;
  cursor: text;
  word-break: break-all;
}
.twofa-secret-code:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}
.twofa-backup-list {
  list-style: none;
  margin: 0;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "Fira Code", "Consolas", monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.twofa-backup-list li {
  position: relative;
  padding-left: 24px;
  color: var(--text);
  user-select: all;
  word-break: break-all;
}
.twofa-backup-list li::before {
  content: counter(twofa-bc) ".";
  counter-increment: twofa-bc;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 11px;
  color: var(--muted-2, var(--muted));
  font-variant-numeric: tabular-nums;
}
.twofa-backup-list { counter-reset: twofa-bc; }
.twofa-backup-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.auth-modal-submit.twofa-secondary-action {
  flex: 1 1 0;
  background: var(--panel-2);
  border-color: var(--border);
  color: var(--muted);
  font-weight: 500;
}
.auth-modal-submit.twofa-secondary-action:hover {
  background: var(--panel);
  color: var(--text);
}

/* ---------- Settings → Security card ---------- */
/* Inherits the same flex-column rhythm as .settings-account-section so the
 * label, the row, and the optional status/reminder slots stack with even
 * vertical gaps instead of collapsing against each other. */
.settings-security-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.settings-security-section .account-row-actions { gap: 6px; }
.twofa-reminder {
  font-size: 12px;
  color: var(--muted);
}
.twofa-reminder[data-tone="warn"] {
  color: #d8b070;
}
.twofa-reminder[data-tone="err"] {
  color: #ef9e9e;
}

/* ---------- Global banner (transient toasts) ---------- */
.global-banner {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  max-width: min(440px, calc(100vw - 28px));
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  color: var(--text);
  box-shadow: 0 10px 32px -8px rgba(0, 0, 0, 0.5);
  font-size: 13px;
  line-height: 1.4;
  animation: ui-banner-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  align-items: center;
  gap: 10px;
}
.global-banner[hidden] { display: none !important; }
.global-banner.is-fade-out { animation: ui-banner-out 280ms ease forwards; }
.global-banner[data-tone="ok"] {
  border-color: color-mix(in srgb, #8ec5a4 50%, var(--border-strong));
  background: color-mix(in srgb, #8ec5a4 12%, var(--panel));
  color: #d6f5e2;
}
.global-banner[data-tone="err"] {
  border-color: color-mix(in srgb, #ef9e9e 50%, var(--border-strong));
  background: color-mix(in srgb, #ef9e9e 12%, var(--panel));
  color: #ffd5d5;
}
@keyframes ui-banner-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
/* ---------------- WELCOME MODAL ---------------- */
.welcome-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 14, 0.66);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  z-index: 120;
  animation: ui-fade-in 220ms ease;
}
.welcome-backdrop[hidden] { display: none !important; }

html[data-theme="light"] .welcome-backdrop {
  background: rgba(20, 25, 35, 0.48);
}

.welcome-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 121;
  width: min(460px, calc(100vw - 32px));
  animation: welcome-modal-in 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.welcome-modal[hidden] { display: none !important; }
.welcome-card::-webkit-scrollbar { display: none; }

.welcome-card {
  position: relative;
  padding: 30px 28px 24px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035));
  backdrop-filter: blur(28px) saturate(150%) brightness(1.04);
  -webkit-backdrop-filter: blur(28px) saturate(150%) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 30px 80px rgba(0, 0, 0, 0.5);
  color: var(--text);
  text-align: left;
}

html[data-theme="light"] .welcome-card {
  border-color: rgba(31, 49, 68, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 247, 251, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 30px 80px rgba(70, 90, 120, 0.25);
}

.welcome-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.welcome-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.16);
}
.welcome-close svg {
  width: 16px;
  height: 16px;
}

html[data-theme="light"] .welcome-close {
  border-color: rgba(31, 49, 68, 0.1);
  background: rgba(31, 49, 68, 0.04);
}
html[data-theme="light"] .welcome-close:hover {
  background: rgba(31, 49, 68, 0.08);
}

.welcome-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--accent-strong, var(--accent));
  background:
    radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, rgba(255, 255, 255, 0.14));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 12px 28px color-mix(in srgb, var(--accent) 22%, transparent);
  animation: welcome-icon-spin 12s linear infinite;
}
.welcome-icon svg {
  width: 26px;
  height: 26px;
}

.welcome-title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.welcome-sub {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

.welcome-features {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.welcome-features li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.035);
}

html[data-theme="light"] .welcome-features li {
  border-color: rgba(31, 49, 68, 0.08);
  background: rgba(31, 49, 68, 0.03);
}

.welcome-feature-icon {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.welcome-feature-title {
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.3;
  margin-bottom: 2px;
  color: var(--text);
}

.welcome-feature-desc {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.welcome-cta {
  width: 100%;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 86%, transparent), color-mix(in srgb, var(--accent) 62%, transparent));
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 10px 24px color-mix(in srgb, var(--accent) 26%, transparent);
  transition: transform 160ms ease, box-shadow 200ms ease, filter 140ms ease;
}
.welcome-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 14px 30px color-mix(in srgb, var(--accent) 34%, transparent);
}
.welcome-cta:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

@keyframes welcome-modal-in {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes welcome-icon-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (max-width: 520px) {
  .welcome-card {
    padding: 24px 20px 20px;
    border-radius: 18px;
  }
  .welcome-title { font-size: 20px; }
  .welcome-features li { padding: 10px 12px; }
}

@keyframes ui-banner-out {
  from { opacity: 1; transform: translate(-50%, 0); }
  to { opacity: 0; transform: translate(-50%, -8px); }
}