/* JARVIS v2 — "Aurora" visual language.
   A complete visual overhaul of the workspace: a deep canvas carrying slow
   aurora light, translucent glass panels with hairline borders, an
   electric blue→violet accent gradient reserved for the things you act on,
   and every interactive surface animated with intent. Light and dark are
   two palettes of the same system; the app follows the OS scheme, and an
   explicit Appearance preference can pin either one.  */

:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  line-height: 1.45;

  /* Static base ramps */
  --dsw-static-deepseek-50: rgb(237, 243, 254);
  --dsw-static-deepseek-100: rgb(228, 237, 253);
  --dsw-static-deepseek-200: rgb(211, 226, 255);
  --dsw-static-deepseek-400: rgb(103, 158, 254);
  --dsw-static-deepseek-500: rgb(65, 118, 230);
  --dsw-static-neutral-bluish-00: rgb(255, 255, 255);
  --dsw-static-neutral-bluish-50: rgb(249, 250, 251);
  --dsw-static-neutral-bluish-60: rgb(245, 246, 247);
  --dsw-static-neutral-bluish-75: rgb(241, 243, 245);
  --dsw-static-neutral-bluish-100: rgb(235, 238, 242);
  --dsw-static-neutral-bluish-150: rgb(233, 236, 242);
  --dsw-static-neutral-bluish-300: rgb(207, 211, 214);
  --dsw-static-neutral-bluish-400: rgb(173, 178, 184);
  --dsw-static-neutral-bluish-500: rgb(151, 157, 166);
  --dsw-static-neutral-bluish-600: rgb(129, 133, 140);
  --dsw-static-neutral-bluish-700: rgb(97, 102, 107);
  --dsw-static-neutral-bluish-750: rgb(67, 69, 74);
  --dsw-static-neutral-bluish-800: rgb(53, 54, 56);
  --dsw-static-neutral-bluish-850: rgb(44, 44, 46);
  --dsw-static-neutral-bluish-875: rgb(35, 35, 36);
  --dsw-static-neutral-bluish-900: rgb(27, 27, 28);
  --dsw-static-neutral-bluish-950: rgb(21, 21, 23);
  --dsw-static-neutral-bluish-1000: rgb(15, 17, 21);
  --dsw-static-green-500: rgb(23, 190, 126);
  --dsw-static-red-400: rgb(246, 118, 118);
  --dsw-static-red-500: rgb(240, 68, 68);
  --dsw-static-red-600: rgb(229, 42, 52);
  --dsw-static-red-50: rgb(254, 242, 242);
  --dsw-static-amber-500: rgb(217, 119, 6);

  /* ---- Aurora accent system ---------------------------------------- */
  --jarvis-accent-1: #3d63e6;
  --jarvis-accent-2: #7a4ff0;
  --jarvis-accent-text: #3c56d6;
  --jarvis-accent-grad: linear-gradient(120deg, var(--jarvis-accent-1), var(--jarvis-accent-2));
  --jarvis-accent-grad-soft: linear-gradient(120deg, rgba(61, 99, 230, 0.14), rgba(122, 79, 240, 0.16));
  --jarvis-accent-ring: rgba(84, 96, 240, 0.22);
  --jarvis-glow: 0 10px 28px -10px rgba(72, 88, 238, 0.55);
  --jarvis-success: #16a34a;
  --jarvis-success-soft: rgba(22, 163, 74, 0.12);
  --jarvis-warn: #b45309;
  --jarvis-warn-soft: rgba(180, 83, 9, 0.12);
  --jarvis-danger: #dc2626;
  --jarvis-danger-soft: rgba(220, 38, 38, 0.1);
  --jarvis-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --jarvis-card-shadow:
    0 1px 2px rgba(16, 24, 64, 0.04),
    0 12px 32px -14px rgba(16, 24, 64, 0.16);
  --jarvis-float-shadow:
    0 2px 6px rgba(16, 24, 64, 0.06),
    0 24px 64px -20px rgba(16, 24, 64, 0.3);
  --jarvis-aurora-1: rgba(99, 132, 255, 0.16);
  --jarvis-aurora-2: rgba(167, 120, 255, 0.13);
  --jarvis-aurora-3: rgba(103, 232, 249, 0.1);
  --jarvis-glass-blur: 18px;

  /* Aliases — light */
  --dsw-bg-base: #f5f6fa;
  --dsw-sidebar-fill: rgba(255, 255, 255, 0.66);
  --dsw-elevated-fill: #ffffff;
  --dsw-elevated-hover: #f4f5fa;
  --dsw-menu: #ffffff;
  --dsw-overlay: rgba(238, 240, 248, 0.86);
  --dsw-input-major: #ffffff;
  --dsw-selector: #eef0f7;
  --dsw-label-primary: #14161d;
  --dsw-label-secondary: #4b5263;
  --dsw-label-tertiary: #697088;
  --dsw-label-caption: #98a0b4;
  --dsw-label-dimmed: #c6cbdb;
  --dsw-border-l1: rgba(18, 22, 44, 0.05);
  --dsw-border-l2-thin: rgba(18, 22, 44, 0.08);
  --dsw-border-l2: rgba(18, 22, 44, 0.1);
  --dsw-border-l3: rgba(18, 22, 44, 0.14);
  --dsw-border-l4: rgba(18, 22, 44, 0.2);
  --dsw-interactive-hover: rgba(48, 62, 112, 0.06);
  --dsw-interactive-hover-solid: #eff1f8;
  --dsw-interactive-active: rgba(48, 62, 112, 0.11);
  --dsw-nav-item-hover: rgba(48, 62, 112, 0.06);
  --dsw-nav-item-active: rgba(61, 99, 230, 0.12);
  --dsw-hover-danger: rgba(220, 38, 38, 0.07);
  --dsw-bubble: rgba(61, 99, 230, 0.09);
  --dsw-bubble-highlight: rgba(61, 99, 230, 0.16);
  --dsw-info-fill: var(--jarvis-accent-1);
  --dsw-info-hover: #2f55d6;
  --dsw-success: var(--jarvis-success);
  --dsw-error: var(--jarvis-danger);
  --dsw-error-secondary: var(--dsw-static-red-400);
  --dsw-warn: var(--jarvis-warn);
  --dsw-mask: rgba(12, 14, 24, 0.4);
  --dsw-scrollbar: rgba(18, 22, 44, 0.22);
  --dsw-scrollbar-hover: rgba(18, 22, 44, 0.4);
  --dsw-shadow-lv2: var(--jarvis-card-shadow);
  --dsh-content-width: 820px;
  --dsh-content-font-size: 14px;
  --dsh-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dsh-spring: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Dark theme tokens are declared TWICE so a manual Appearance preference can force either theme: the "system" case applies whenever the OS is dark and the user has not explicitly chosen light; the forced case applies when the user picked dark. Keep both copies in sync. */
@media (prefers-color-scheme: dark) {
  :root:not([data-ds-theme="light"]) {
    color-scheme: dark;
    /* Aurora accents — dark */
    --jarvis-accent-1: #6b8cff;
    --jarvis-accent-2: #9d75ff;
    --jarvis-accent-text: #a3b8ff;
    --jarvis-accent-ring: rgba(126, 108, 255, 0.28);
    --jarvis-glow: 0 10px 30px -10px rgba(112, 102, 255, 0.5);
    --jarvis-success: #2fca8a;
    --jarvis-success-soft: rgba(47, 202, 138, 0.14);
    --jarvis-warn: #e8b25c;
    --jarvis-warn-soft: rgba(232, 178, 92, 0.14);
    --jarvis-danger: #ff7581;
    --jarvis-danger-soft: rgba(255, 100, 116, 0.14);
    --jarvis-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    --jarvis-card-shadow:
      0 1px 2px rgba(0, 0, 0, 0.2),
      0 16px 40px -16px rgba(0, 0, 0, 0.55);
    --jarvis-float-shadow:
      0 4px 12px rgba(0, 0, 0, 0.3),
      0 32px 72px -24px rgba(0, 0, 0, 0.7);
    --jarvis-aurora-1: rgba(90, 116, 255, 0.16);
    --jarvis-aurora-2: rgba(150, 104, 255, 0.12);
    --jarvis-aurora-3: rgba(80, 210, 255, 0.07);
    /* Aliases — dark */
    --dsw-bg-base: #151517;
    --dsw-sidebar-fill: rgba(26, 27, 31, 0.72);
    --dsw-elevated-fill: #1d1e23;
    --dsw-elevated-hover: #26282e;
    --dsw-menu: #1d1e23;
    --dsw-overlay: rgba(28, 29, 34, 0.82);
    --dsw-input-major: #191a1f;
    --dsw-selector: #2b2d34;
    --dsw-label-primary: #f3f4f8;
    --dsw-label-secondary: #b4bac8;
    --dsw-label-tertiary: #8b91a2;
    --dsw-label-caption: #6c7280;
    --dsw-label-dimmed: #454a56;
    --dsw-border-l1: rgba(255, 255, 255, 0.05);
    --dsw-border-l2-thin: rgba(255, 255, 255, 0.07);
    --dsw-border-l2: rgba(255, 255, 255, 0.1);
    --dsw-border-l3: rgba(255, 255, 255, 0.15);
    --dsw-border-l4: rgba(255, 255, 255, 0.22);
    --dsw-interactive-hover: rgba(255, 255, 255, 0.07);
    --dsw-interactive-hover-solid: #26282e;
    --dsw-interactive-active: rgba(255, 255, 255, 0.13);
    --dsw-nav-item-hover: rgba(255, 255, 255, 0.07);
    --dsw-nav-item-active: rgba(107, 140, 255, 0.16);
    --dsw-hover-danger: rgba(255, 117, 129, 0.14);
    --dsw-bubble: rgba(107, 140, 255, 0.13);
    --dsw-bubble-highlight: rgba(107, 140, 255, 0.22);
    --dsw-info-fill: var(--jarvis-accent-1);
    --dsw-info-hover: #85a4ff;
    --dsw-success: var(--jarvis-success);
    --dsw-error: var(--jarvis-danger);
    --dsw-error-secondary: var(--dsw-static-red-400);
    --dsw-warn: var(--jarvis-warn);
    --dsw-mask: rgba(4, 4, 8, 0.62);
    --dsw-scrollbar: rgba(255, 255, 255, 0.2);
    --dsw-scrollbar-hover: rgba(255, 255, 255, 0.36);
    --dsw-shadow-lv2: var(--jarvis-card-shadow);
  }
  body:not([data-ds-theme="light"]) {
    background: #151517;
  }
}

:root[data-ds-theme="dark"] {
  color-scheme: dark;
  /* Aurora accents — dark (forced) */
  --jarvis-accent-1: #6b8cff;
  --jarvis-accent-2: #9d75ff;
  --jarvis-accent-text: #a3b8ff;
  --jarvis-accent-ring: rgba(126, 108, 255, 0.28);
  --jarvis-glow: 0 10px 30px -10px rgba(112, 102, 255, 0.5);
  --jarvis-success: #2fca8a;
  --jarvis-success-soft: rgba(47, 202, 138, 0.14);
  --jarvis-warn: #e8b25c;
  --jarvis-warn-soft: rgba(232, 178, 92, 0.14);
  --jarvis-danger: #ff7581;
  --jarvis-danger-soft: rgba(255, 100, 116, 0.14);
  --jarvis-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --jarvis-card-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 16px 40px -16px rgba(0, 0, 0, 0.55);
  --jarvis-float-shadow:
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 32px 72px -24px rgba(0, 0, 0, 0.7);
  --jarvis-aurora-1: rgba(90, 116, 255, 0.16);
  --jarvis-aurora-2: rgba(150, 104, 255, 0.12);
  --jarvis-aurora-3: rgba(80, 210, 255, 0.07);
  /* Aliases — dark (forced) */
  --dsw-bg-base: #151517;
  --dsw-sidebar-fill: rgba(26, 27, 31, 0.72);
  --dsw-elevated-fill: #1d1e23;
  --dsw-elevated-hover: #26282e;
  --dsw-menu: #1d1e23;
  --dsw-overlay: rgba(28, 29, 34, 0.82);
  --dsw-input-major: #191a1f;
  --dsw-selector: #2b2d34;
  --dsw-label-primary: #f3f4f8;
  --dsw-label-secondary: #b4bac8;
  --dsw-label-tertiary: #8b91a2;
  --dsw-label-caption: #6c7280;
  --dsw-label-dimmed: #454a56;
  --dsw-border-l1: rgba(255, 255, 255, 0.05);
  --dsw-border-l2-thin: rgba(255, 255, 255, 0.07);
  --dsw-border-l2: rgba(255, 255, 255, 0.1);
  --dsw-border-l3: rgba(255, 255, 255, 0.15);
  --dsw-border-l4: rgba(255, 255, 255, 0.22);
  --dsw-interactive-hover: rgba(255, 255, 255, 0.07);
  --dsw-interactive-hover-solid: #26282e;
  --dsw-interactive-active: rgba(255, 255, 255, 0.13);
  --dsw-nav-item-hover: rgba(255, 255, 255, 0.07);
  --dsw-nav-item-active: rgba(107, 140, 255, 0.16);
  --dsw-hover-danger: rgba(255, 117, 129, 0.14);
  --dsw-bubble: rgba(107, 140, 255, 0.13);
  --dsw-bubble-highlight: rgba(107, 140, 255, 0.22);
  --dsw-info-fill: var(--jarvis-accent-1);
  --dsw-info-hover: #85a4ff;
  --dsw-success: var(--jarvis-success);
  --dsw-error: var(--jarvis-danger);
  --dsw-error-secondary: var(--dsw-static-red-400);
  --dsw-warn: var(--jarvis-warn);
  --dsw-mask: rgba(4, 4, 8, 0.62);
  --dsw-scrollbar: rgba(255, 255, 255, 0.2);
  --dsw-scrollbar-hover: rgba(255, 255, 255, 0.36);
  --dsw-shadow-lv2: var(--jarvis-card-shadow);
}
body[data-ds-theme="dark"] {
  background: #151517;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--dsw-bg-base);
  color: var(--dsw-label-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection {
  background: rgba(90, 116, 255, 0.28);
  color: inherit;
}

h1, h2, h3, p { margin-top: 0; }
a { color: inherit; }
img { user-select: none; }

mark {
  padding: 0 2px;
  border-radius: 4px;
  background: var(--jarvis-accent-grad-soft);
  color: inherit;
  box-shadow: inset 0 0 0 1px rgba(99, 120, 255, 0.28);
}

kbd {
  display: inline-block;
  min-width: 20px;
  padding: 1px 7px 2px;
  border: 1px solid var(--dsw-border-l2);
  border-bottom-width: 2px;
  border-radius: 7px;
  background: var(--dsw-elevated-fill);
  color: var(--dsw-label-secondary);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}

/* Quiet, themed scrollbars. */
* { scrollbar-width: thin; scrollbar-color: var(--dsw-scrollbar) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
  background-color: var(--dsw-scrollbar);
}
::-webkit-scrollbar-thumb:hover { background-color: var(--dsw-scrollbar-hover); }
::-webkit-scrollbar-track { background: transparent; }

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

:focus-visible {
  outline: 2px solid var(--dsw-info-fill);
  outline-offset: 2px;
}

/* ---- Buttons ---------------------------------------------------------- */

button {
  color: var(--dsw-label-primary);
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
button,
input,
textarea {
  min-width: 0;
}

/* Primary actions carry the aurora gradient, a soft glow, and a lift. */
.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  background: var(--jarvis-accent-grad);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: var(--jarvis-glow), var(--jarvis-inset-highlight);
  transition: transform 160ms var(--dsh-spring), box-shadow 160ms ease,
    filter 160ms ease;
}
.primary svg { width: 18px; height: 18px; flex: none; }
.primary:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: saturate(1.12) brightness(1.05);
  box-shadow: var(--jarvis-glow), var(--jarvis-inset-highlight);
}
.primary:active:not(:disabled) { transform: translateY(0); filter: brightness(0.97); }
.primary:disabled { background: var(--jarvis-accent-grad); opacity: 0.55; box-shadow: none; }

.ghost-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--dsw-label-secondary);
  font-size: 13px;
  line-height: 20px;
  font-weight: 550;
  white-space: nowrap;
  transition: background-color 140ms ease, color 140ms ease,
    border-color 140ms ease, transform 140ms var(--dsh-spring);
}
.ghost-button svg { width: 16px; height: 16px; flex: none; color: inherit; }
.ghost-button:hover:not(:disabled) {
  background: var(--dsw-interactive-hover);
  color: var(--dsw-label-primary);
}
.ghost-button:active:not(:disabled) { transform: scale(0.98); }
.ghost-button:disabled { color: var(--dsw-label-dimmed); }

.danger-ghost { color: var(--dsw-error); }
.danger-ghost:hover:not(:disabled) {
  background: var(--dsw-hover-danger);
  color: var(--dsw-error);
}
button.danger-armed,
button.danger-armed:hover {
  background: var(--dsw-error) !important;
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(240, 68, 68, 0.5);
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  color: var(--dsw-label-secondary);
  transition: background-color 140ms ease, color 140ms ease, transform 140ms var(--dsh-spring);
}
.icon-button svg { width: 16px; height: 16px; }
.icon-button:hover:not(:disabled) {
  background: var(--dsw-interactive-hover);
  color: var(--dsw-label-primary);
}
.icon-button:active:not(:disabled) { transform: scale(0.94); }

/* Filter chips (sidebar filters + search window + notification filters). */
.filter-chip {
  min-height: 26px;
  padding: 0 11px;
  border: 1px solid var(--dsw-border-l2-thin);
  border-radius: 999px;
  background: transparent;
  color: var(--dsw-label-secondary);
  font-size: 12px;
  line-height: 18px;
  font-weight: 550;
  transition: background-color 140ms ease, color 140ms ease,
    border-color 140ms ease, box-shadow 140ms ease;
}
.filter-chip:hover:not(:disabled) {
  border-color: var(--dsw-border-l3);
  color: var(--dsw-label-primary);
}
.filter-chip-active,
.filter-chip.filter-chip-active {
  border-color: transparent;
  background: var(--jarvis-accent-grad-soft);
  color: var(--jarvis-accent-text);
  box-shadow: inset 0 0 0 1px rgba(99, 120, 255, 0.35);
}
.filter-chip.filter-chip-active:hover { color: var(--jarvis-accent-text); }

/* ---- Access / sign-in -------------------------------------------------- */

.access-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px;
  overflow: hidden;
  background: var(--dsw-bg-base);
}
/* Slow aurora: two drifting light fields plus a ground sweep. */
.access-panel::before,
.access-panel::after {
  content: "";
  position: absolute;
  inset: -30%;
  pointer-events: none;
  filter: blur(24px);
}
.access-panel::before {
  background:
    radial-gradient(42% 34% at 28% 24%, var(--jarvis-aurora-1), transparent 70%),
    radial-gradient(38% 30% at 74% 66%, var(--jarvis-aurora-2), transparent 72%);
  animation: aurora-drift 26s ease-in-out infinite alternate;
}
.access-panel::after {
  background:
    radial-gradient(46% 30% at 62% 20%, var(--jarvis-aurora-3), transparent 70%),
    radial-gradient(30% 24% at 22% 78%, var(--jarvis-aurora-2), transparent 74%);
  animation: aurora-drift 34s ease-in-out infinite alternate-reverse;
}
.access-shell {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(100%, 27rem);
  padding: 44px 40px 36px;
  text-align: center;
  border: 1px solid var(--dsw-border-l2);
  border-radius: 28px;
  background:
    linear-gradient(180deg, var(--dsw-elevated-fill), var(--dsw-elevated-fill));
  box-shadow: var(--jarvis-float-shadow), var(--jarvis-inset-highlight);
  backdrop-filter: blur(var(--jarvis-glass-blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--jarvis-glass-blur)) saturate(1.3);
}
/* A faint gradient hairline crowns the card. */
.access-shell::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(120, 120, 255, 0.7), transparent);
}
@media (max-height: 44rem) {
  .access-shell { padding: 28px 28px 24px; }
}
.access-shell > * { position: relative; }
.access-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.access-brand img {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  box-shadow: var(--jarvis-glow);
}
.access-wordmark {
  font-size: 27px;
  line-height: 32px;
  font-weight: 750;
  letter-spacing: 0.16em;
  background: var(--jarvis-accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.access-title {
  margin: 4px 0 0;
  font-size: 24px;
  line-height: 31px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--dsw-label-primary);
}
.access-lede {
  margin: 0 0 10px;
  max-width: 22rem;
  color: var(--dsw-label-secondary);
  font-size: 14px;
  line-height: 22px;
}
.login-form {
  display: grid;
  gap: 10px;
  width: 100%;
}
.access-button {
  min-height: 46px;
  padding: 0 22px;
  font-size: 15px;
  width: 100%;
}
.login-hint {
  margin: 6px 0 0;
  color: var(--dsw-label-caption);
  font-size: 12px;
  line-height: 18px;
}
.access-footer {
  margin-top: 20px;
  color: var(--dsw-label-caption);
  font-size: 12px;
  letter-spacing: 0.02em;
}

@keyframes aurora-drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1.02) rotate(0.5deg); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.08) rotate(-0.5deg); }
}

/* ---- Workspace frame --------------------------------------------------- */

.workspace {
  /* Fixed viewport-height shell at every width: the page itself never
     scrolls, so the sidebar and composer stay put while only the transcript
     (and the sidebar's own conversation list) scroll internally. `100vh`
     first keeps the invariant on browsers that lack `dvh`. */
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--dsw-bg-base);
}
/* The workspace aurora sits behind everything; glass panels on top catch it. */
.workspace::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(44% 38% at 16% 8%, var(--jarvis-aurora-1), transparent 70%),
    radial-gradient(40% 32% at 88% 22%, var(--jarvis-aurora-2), transparent 72%),
    radial-gradient(36% 30% at 70% 96%, var(--jarvis-aurora-3), transparent 74%),
    radial-gradient(30% 26% at 8% 92%, var(--jarvis-aurora-2), transparent 76%);
  animation: aurora-drift 36s ease-in-out infinite alternate;
}
.frame {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  min-height: 0;
  background: transparent;
}
.eyebrow {
  margin: 0 0 4px;
  color: var(--jarvis-accent-text);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-width: 0;
  min-height: 0;
  /* On stacked (narrow) layouts the sidebar never leaves the screen: it caps
     at this share of the viewport and its conversation list scrolls inside
     it; the desktop row layout overrides this below. */
  max-height: 50dvh;
  overflow-y: auto;
  padding: 12px;
  border-right: 1px solid var(--dsw-border-l1);
  background: var(--dsw-sidebar-fill);
  color: var(--dsw-label-primary);
  font-size: 14px;
  backdrop-filter: blur(var(--jarvis-glass-blur)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--jarvis-glass-blur)) saturate(1.25);
}
.sidebar-logo-row {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  margin-bottom: 12px;
  overflow: hidden;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  border-radius: 10px;
}
.brand img {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 8px;
  box-shadow: 0 4px 12px -4px rgba(90, 116, 255, 0.6);
}
.brand-name {
  font-size: 16px;
  font-weight: 750;
  line-height: 24px;
  letter-spacing: 0.14em;
  background: var(--jarvis-accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.service-state {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 60%;
  padding: 3px 11px;
  border: 1px solid var(--dsw-border-l2-thin);
  border-radius: 999px;
  background: var(--dsw-elevated-fill);
  color: var(--dsw-label-secondary);
  font-size: 11px;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: var(--jarvis-inset-highlight);
}
.service-state::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--jarvis-accent-grad);
  box-shadow: 0 0 0 3px var(--jarvis-accent-ring);
}

/* New chat — the aurora gradient CTA of the rail. */
.new-session {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  padding: 8px 14px;
  margin-bottom: 8px;
  border: none;
  border-radius: 12px;
  background: var(--jarvis-accent-grad);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  box-shadow: var(--jarvis-glow), var(--jarvis-inset-highlight);
  transition: transform 160ms var(--dsh-spring), filter 160ms ease;
}
.new-session svg { width: 16px; height: 16px; flex: none; }
.new-session:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: saturate(1.12) brightness(1.05);
  background: var(--jarvis-accent-grad);
}
.new-session:active:not(:disabled) { transform: translateY(0); filter: brightness(0.97); }
.new-session:disabled { opacity: 0.5; }
.new-session-label {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Agent nav sits beneath the CTA as a quieter sibling. */
.new-session.agent-nav-button,
.agent-nav-button.new-session {
  background: var(--dsw-elevated-fill);
  color: var(--dsw-label-primary);
  border: 1px solid var(--dsw-border-l2-thin);
  box-shadow: var(--jarvis-inset-highlight);
  font-weight: 550;
}
.new-session.agent-nav-button:hover:not(:disabled) {
  border-color: rgba(99, 120, 255, 0.45);
  color: var(--jarvis-accent-text);
  filter: none;
  transform: none;
}
.new-session.agent-nav-button svg { color: var(--jarvis-accent-text); }

.sidebar-search {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin-bottom: 6px;
  padding: 0 11px;
  border: 1px solid var(--dsw-border-l2-thin);
  border-radius: 10px;
  background: var(--dsw-input-major);
  color: var(--dsw-label-caption);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.sidebar-search:focus-within {
  border-color: rgba(99, 120, 255, 0.55);
  box-shadow: 0 0 0 3px var(--jarvis-accent-ring);
}
.sidebar-search-icon { width: 15px; height: 15px; flex: none; }
.sidebar-search input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--dsw-label-primary);
  font-size: 13px;
  line-height: 18px;
}
.sidebar-search input::placeholder { color: var(--dsw-label-tertiary); }
.sidebar-search input::-webkit-search-cancel-button { display: none; }

.search-window {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}
.search-window-chip { min-height: 24px; padding: 0 10px; font-size: 11.5px; }

.next-reminder {
  margin: 4px 2px 2px;
  padding: 6px 10px;
  border: 1px solid rgba(232, 178, 92, 0.35);
  border-radius: 10px;
  background: var(--jarvis-warn-soft);
  color: var(--dsw-warn);
  font-size: 12px;
  line-height: 18px;
}

.sidebar-list-head {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 8px;
  margin: 4px 4px 4px;
}
.sidebar-list-title {
  margin: 0;
  font-size: 11px;
  font-weight: 650;
  color: var(--dsw-label-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.conversation-summary {
  margin: 0;
  color: var(--dsw-label-caption);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.sidebar-list-head .conversation-summary {
  /* The head row carries the title, the filter chips, and the summary
     together; the summary wraps onto its own line and truncates rather than
     squeezing the conversation list. */
  flex: 1 1 auto;
  min-width: max-content;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conversation-filters {
  display: inline-flex;
  gap: 4px;
}

.sidebar-region {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px;
  display: flex;
  flex-direction: column;
}
.conversation-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}
.conversation-list button { width: 100%; text-align: left; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 34px; padding: 6px 9px;
  position: relative;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--dsw-label-secondary);
  font-size: 13.5px;
  line-height: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 130ms ease, color 130ms ease, border-color 130ms ease;
}
.conversation-list button:hover {
  background: var(--dsw-nav-item-hover);
  color: var(--dsw-label-primary);
  border-color: var(--dsw-border-l1);
}
.conversation-list button[aria-current="page"] {
  border-color: rgba(99, 120, 255, 0.3);
  background: var(--dsw-nav-item-active);
  color: var(--dsw-label-primary);
}
.conversation-list button[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 3px;
  border-radius: 999px;
  background: var(--jarvis-accent-grad);
}
.conversation-list .conversation-row-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font-weight: 500;
}
.conversation-activity {
  flex: none;
  margin-left: auto;
  color: var(--dsw-label-caption);
  font-size: 11px;
  line-height: 20px;
  white-space: nowrap;
}
.conversation-state {
  flex: none;
  padding: 1px 8px;
  border: 1px solid var(--dsw-border-l2-thin);
  border-radius: 999px;
  background: var(--dsw-selector);
  color: var(--dsw-label-secondary);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}
/* Source tabs: one filterable chip per inbound channel (Slack/Telegram/
   webhook) that has at least one bound conversation. Web chats are always
   on and never get a tab. */
.source-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 2px 0 4px;
  padding: 0 2px;
}
.source-tab {
  font-size: 11px;
  padding: 2px 10px;
}
/* Per-row source chip: the small tab-like badge on a conversation row that
   tells you which external source(s) feed it. */
.conversation-source-tab {
  flex: none;
  padding: 1px 8px;
  border: 1px solid rgba(99, 120, 255, 0.3);
  border-radius: 999px;
  background: rgba(99, 120, 255, 0.08);
  color: var(--jarvis-accent-text);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.conversation-list li { min-width: 0; }
.conversation-list .empty-state {
  margin-top: 2px;
  padding: 10px 9px 6px;
  color: var(--dsw-label-tertiary);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.conversation-row-preview {
  flex-basis: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--dsw-label-tertiary);
  font-size: 12px;
  line-height: 17px;
}
.conversation-project {
  display: inline-flex;
  align-items: center;
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--jarvis-accent-text);
  border: 1px solid rgba(99, 120, 255, 0.3);
  border-radius: 999px;
  padding: 1px 8px;
  background: var(--jarvis-accent-grad-soft);
}

.sidebar-foot {
  /* The account/settings/logout seat stays pinned to the visible bottom of
     the sidebar: sticky bottom keeps it on screen even on short viewports
     (where the whole sidebar scrolls) and on mobile; the full-bleed negative
     margins cover the sidebar padding with the sidebar fill so rows passing
     underneath never bleed through. */
  position: sticky;
  bottom: 0;
  z-index: 3;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px -12px -12px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--dsw-border-l1);
  background: var(--dsw-sidebar-fill);
  backdrop-filter: blur(var(--jarvis-glass-blur));
  -webkit-backdrop-filter: blur(var(--jarvis-glass-blur));
}
.source-revision {
  max-width: 100%;
  color: var(--dsw-label-dimmed);
  font-size: 11px;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}
.source-revision a {
  color: var(--dsw-label-caption);
  text-decoration: none;
  text-underline-offset: 0.18em;
  border-bottom: 1px dotted currentColor;
}
.source-revision a:hover,
.source-revision a:focus-visible { color: var(--jarvis-accent-text); }
.sidebar-foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.company-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--dsw-label-secondary);
  font-size: 12px;
  font-weight: 600;
}
.sidebar-foot-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.inbox-unread {
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(99, 120, 255, 0.35);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 11px;
  font-weight: 700;
  color: var(--jarvis-accent-text);
  cursor: pointer;
  background: var(--jarvis-accent-grad-soft);
  line-height: 18px;
}
.inbox-unread:hover { border-color: rgba(99, 120, 255, 0.6); }

.shortcut-help-toggle {
  flex: none;
  margin: 8px 2px 0;
  align-self: flex-start;
  padding: 2px 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--dsw-label-caption);
  font-size: 11.5px;
  font-weight: 550;
  transition: color 140ms ease, background-color 140ms ease;
}
.shortcut-help-toggle:hover { background: var(--dsw-interactive-hover); color: var(--dsw-label-secondary); }
.shortcut-help {
  flex: none;
  margin: 6px 2px 8px;
  padding: 10px 12px;
  border: 1px solid var(--dsw-border-l2-thin);
  border-radius: 12px;
  background: var(--dsw-elevated-fill);
  box-shadow: var(--jarvis-inset-highlight);
}
.shortcut-help ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--dsw-label-secondary);
  font-size: 12px;
  line-height: 19px;
}

/* ---- Conversation column ----------------------------------------------- */

.center-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: transparent;
}
.conversation-heading {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 12px 24px 0;
}
.conversation-heading::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--dsw-border-l2) 12%, var(--dsw-border-l2) 88%, transparent);
  pointer-events: none;
}
.title-cluster {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.conversation-title {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 22px;
  color: var(--dsw-label-primary);
}
.conversation-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex: none;
  flex-wrap: wrap;
}
.conversation-project-chip {
  margin-left: 0;
  display: inline-flex;
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--jarvis-accent-text);
  border: 1px solid rgba(99, 120, 255, 0.3);
  border-radius: 999px;
  padding: 2px 10px;
  background: var(--jarvis-accent-grad-soft);
}

/* ---- Agent (codebase) main view ---------------------------------------- */

.agent-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.agent-view-head {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 24px 14px;
}
.agent-requests-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 24px 16px;
}
.agent-request {
  max-width: var(--dsh-content-width);
  width: 100%;
  margin: 0 auto;
  border: 1px solid var(--dsw-border-l2-thin);
  border-radius: 14px;
  background: var(--dsw-elevated-fill);
  box-shadow: var(--jarvis-card-shadow), var(--jarvis-inset-highlight);
  overflow: hidden;
}
.agent-request summary {
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  color: var(--dsw-label-secondary);
  font-size: 13px;
  line-height: 20px;
  transition: background-color 130ms ease;
}
.agent-request summary:hover { background: var(--dsw-interactive-hover); }
.agent-request[open] summary {
  color: var(--dsw-label-primary);
  border-bottom: 1px solid var(--dsw-border-l1);
  background: var(--dsw-interactive-hover);
}
.agent-request-output {
  margin: 0;
  padding: 14px 16px;
  color: var(--dsw-label-secondary);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;
  font-size: 12px;
  line-height: 19px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 18rem;
  overflow-y: auto;
}

/* ---- Worker requests panel (0060) ------------------------------------ */

.worker-request-heading {
  max-width: var(--dsh-content-width);
  width: 100%;
  margin: 8px auto 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dsw-label-secondary);
}
.worker-request {
  max-width: var(--dsh-content-width);
  width: 100%;
  margin: 0 auto;
  border: 1px solid var(--dsw-border-l2-thin);
  border-radius: 14px;
  background: var(--dsw-elevated-fill);
  box-shadow: var(--jarvis-card-shadow), var(--jarvis-inset-highlight);
  overflow: hidden;
}
.worker-request-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 8px;
}
.worker-request-title {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--dsw-label-primary);
  overflow-wrap: anywhere;
}
.worker-request-status {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--dsw-label-secondary);
  background: var(--dsw-interactive-hover);
}
.worker-request-status.status-open {
  color: var(--jarvis-accent, var(--jarvis-accent-text));
  background: color-mix(in srgb, var(--jarvis-accent) 14%, transparent);
}
.worker-request-status.status-approved,
.worker-request-status.status-answered {
  color: #1a7f37;
  background: rgba(26, 127, 55, 0.12);
}
.worker-request-status.status-rejected {
  color: #b42318;
  background: rgba(180, 35, 24, 0.1);
}
.worker-request-when {
  flex: none;
  font-size: 11px;
  color: var(--dsw-label-secondary);
}
.worker-request-body {
  margin: 0;
  padding: 4px 16px 8px;
  color: var(--dsw-label-secondary);
  font-size: 13px;
  line-height: 20px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.worker-request-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 8px;
}
.worker-request-option {
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--dsw-interactive-hover);
  color: var(--dsw-label-primary);
}
.worker-request-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 16px 12px;
}
.worker-answer-input {
  flex: 1;
  min-width: 160px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--dsw-border-l2-thin);
  border-radius: 10px;
  background: var(--dsw-surface-background);
  color: var(--dsw-label-primary);
  font-size: 13px;
}
.worker-answer-input:focus-visible {
  outline: 2px solid var(--jarvis-accent);
  outline-offset: 1px;
}
.primary-button {
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 7px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--jarvis-accent);
  cursor: pointer;
}
.primary-button:hover:not(:disabled) { filter: brightness(1.06); }
.primary-button:disabled { opacity: 0.55; cursor: default; }
.agent-scan-scope {
  appearance: none;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--dsw-border-l2-thin);
  border-radius: 10px;
  background: var(--dsw-surface-background);
  color: var(--dsw-label-primary);
  font: inherit;
  font-size: 13px;
}
.agent-repos-bar {
  max-width: var(--dsh-content-width);
  width: 100%;
  margin: 0 auto 10px;
  border: 1px solid var(--dsw-border-l2-thin);
  border-radius: 14px;
  background: var(--dsw-elevated-fill);
  box-shadow: var(--jarvis-card-shadow), var(--jarvis-inset-highlight);
  padding: 12px 16px;
}
.agent-repos-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.agent-repos-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dsw-label-secondary);
}
.agent-repos-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.agent-repo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--dsw-border-l2-thin);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--dsw-surface-background);
}
.agent-repo-info { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.agent-repo-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--dsw-label-primary);
  overflow-wrap: anywhere;
}
.agent-repo-detail {
  font-size: 11px;
  color: var(--dsw-label-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-repo-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.agent-repo-form input {
  flex: 1 1 200px;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--dsw-border-l2-thin);
  border-radius: 10px;
  background: var(--dsw-surface-background);
  color: var(--dsw-label-primary);
  font-size: 13px;
}
.agent-repo-form input:focus-visible {
  outline: 2px solid var(--jarvis-accent);
  outline-offset: 1px;
}
.worker-request-target {
  padding: 0 16px 8px;
}
.worker-request-repo {
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  color: var(--dsw-label-primary);
  background: var(--dsw-interactive-hover);
}
.agent-jobs-list {
  max-width: var(--dsh-content-width);
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 24px 18px;
}
.agent-job-row {
  font-size: 12px;
  line-height: 18px;
  color: var(--dsw-label-secondary);
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--dsw-interactive-hover);
  overflow-wrap: anywhere;
}
.agent-job {
  font-size: 12px;
  line-height: 18px;
  color: var(--dsw-label-secondary);
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--dsw-interactive-hover);
  overflow-wrap: anywhere;
}
.agent-job summary {
  cursor: pointer;
  list-style-position: inside;
}
.agent-job-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0 4px;
}
.agent-job-output {
  margin: 8px 0 2px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--dsw-surface-2, var(--dsw-background));
  color: var(--dsw-label-primary);
  font-size: 12px;
  line-height: 16px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 280px;
  overflow-y: auto;
}
.worker-jobs-status {
  max-width: var(--dsh-content-width);
  width: 100%;
  margin: 4px auto 0;
  padding: 0 24px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dsw-label-secondary);
}

/* ---- Blank-session hero ------------------------------------------------ */

.scroll-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.hero {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px 8px;
}
.hero-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  width: 100%;
  max-width: var(--dsh-content-width);
  animation: hero-in 700ms var(--dsh-spring) both;
}
@keyframes hero-in {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.hero-headline {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero-mark {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  box-shadow: var(--jarvis-glow);
}
/* A halo slowly breathing behind the mark. */
.hero-headline::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 22px;
  width: 120px;
  height: 120px;
  translate: -33% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--jarvis-aurora-1), transparent 72%);
  animation: thinking-pulse 4.5s ease-in-out infinite;
  pointer-events: none;
}
.hero-title {
  font-size: 34px;
  line-height: 40px;
  font-weight: 750;
  letter-spacing: 0.12em;
  background: var(--jarvis-accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.suggestion {
  min-height: 34px;
  padding: 4px 15px;
  border: 1px solid var(--dsw-border-l2-thin);
  border-radius: 999px;
  background: var(--dsw-elevated-fill);
  color: var(--dsw-label-secondary);
  font-size: 13px;
  line-height: 20px;
  font-weight: 550;
  box-shadow: var(--jarvis-card-shadow), var(--jarvis-inset-highlight);
  transition: transform 160ms var(--dsh-spring), border-color 160ms ease,
    color 160ms ease, box-shadow 160ms ease;
}
.suggestion:hover {
  transform: translateY(-2px);
  border-color: rgba(99, 120, 255, 0.45);
  color: var(--jarvis-accent-text);
}
.suggestion:active { transform: translateY(0); }

/* ---- Messages ---------------------------------------------------------- */

.message-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  margin: 0 auto;
  padding: 14px 24px;
  list-style: none;
}
.message {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: var(--dsh-content-width);
  min-width: 0;
  animation: message-in 420ms var(--dsh-spring) both;
}
@keyframes message-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.message-avatar {
  flex: none;
  width: 30px;
  height: 30px;
  margin-top: 4px;
  border-radius: 9px;
  box-shadow: 0 4px 10px -4px rgba(90, 116, 255, 0.55), 0 0 0 1px rgba(120, 120, 255, 0.18);
}
.message-user { justify-content: flex-end; }
.message-assistant .message-body,
.message-assistant .message-bubble {
  min-width: 0;
  flex: 1;
}
.message strong {
  display: block;
  margin-bottom: 5px;
  color: var(--dsw-label-tertiary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.message-user strong { text-align: right; color: rgba(255, 255, 255, 0.82); }
.message-assistant strong {
  background: var(--jarvis-accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.message p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--dsh-content-font-size);
  line-height: 1.62;
}
/* The traveler's words ride an aurora gradient; JARVIS speaks on glass. */
.message-user .message-bubble {
  max-width: 78%;
  padding: 11px 15px;
  border-radius: 18px 18px 6px 18px;
  background: var(--jarvis-accent-grad);
  color: #fff;
  box-shadow: var(--jarvis-glow), var(--jarvis-inset-highlight);
}
/* A just-sent message lands in the transcript immediately and stays slightly
   quiet until the server-confirmed re-render replaces it with the real turn. */
.message-user.message-pending .message-bubble {
  opacity: 0.84;
}
.message-assistant {
  overflow-wrap: anywhere;
}
.message-assistant .message-bubble {
  min-width: 0;
  padding: 11px 15px;
  border-radius: 18px 18px 18px 6px;
  border: 1px solid var(--dsw-border-l2-thin);
  background: var(--dsw-elevated-fill);
  box-shadow: var(--jarvis-card-shadow), var(--jarvis-inset-highlight);
}
.message .message-copy {
  display: inline-flex;
  margin-top: 8px;
  margin-right: 6px;
  padding: 2px 10px;
  min-height: 22px;
  border: 1px solid var(--dsw-border-l2-thin);
  border-radius: 999px;
  background: transparent;
  color: var(--dsw-label-tertiary);
  font-size: 11px;
  font-weight: 550;
  opacity: 0;
  transition: opacity 130ms ease, background-color 130ms ease, color 130ms ease,
    border-color 130ms ease;
}
.message-user .message-copy {
  border-color: rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.78);
}
.message:focus-within .message-copy,
.message:hover .message-copy { opacity: 1; }
.message-copy:focus-visible { opacity: 1; }
.message-copy:hover {
  background: var(--dsw-interactive-hover);
  color: var(--dsw-label-primary);
}
.message-user .message-copy:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.message-speak { margin-left: 0; }
.empty-state {
  padding: 12px;
  color: var(--dsw-label-caption);
  font-size: 13px;
  text-align: center;
}

/* ---- Composer ---------------------------------------------------------- */

.composer {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: var(--dsh-content-width);
  margin: 0 auto;
  padding: 12px 14px 6px;
  border: 1px solid var(--dsw-border-l2);
  border-radius: 24px;
  background: var(--dsw-elevated-fill);
  box-shadow: var(--jarvis-float-shadow), var(--jarvis-inset-highlight);
  transition: border-color 180ms ease, box-shadow 220ms ease;
}
/* Focus summons the aurora: gradient border + ring glow. */
.composer:focus-within {
  border-color: transparent;
  background:
    linear-gradient(var(--dsw-elevated-fill), var(--dsw-elevated-fill)) padding-box,
    var(--jarvis-accent-grad) border-box;
  box-shadow:
    0 0 0 4px var(--jarvis-accent-ring),
    var(--jarvis-float-shadow);
}
.composer textarea {
  width: 100%;
  min-height: 24px;
  max-height: 240px;
  padding: 4px 9px 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--dsw-label-primary);
  font-size: var(--dsh-content-font-size);
  line-height: 24px;
  caret-color: var(--dsw-info-fill);
}
.composer textarea::placeholder { color: var(--dsw-label-caption); }
.composer textarea:focus-visible { outline: none; }
.composer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 4px;
}
.composer-tools { display: flex; align-items: center; min-width: 0; }
.composer-trailing {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  margin-left: auto;
}
.stop-button {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--dsw-error);
  font-weight: 600;
}
.send-button {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 999px;
  background: var(--jarvis-accent-grad);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--jarvis-glow), var(--jarvis-inset-highlight);
  transition: transform 150ms var(--dsh-spring), filter 150ms ease, box-shadow 150ms ease;
}
.send-button svg { width: 18px; height: 18px; }
.send-button:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: saturate(1.12) brightness(1.06);
}
.send-button:active:not(:disabled) { transform: translateY(0); filter: brightness(0.96); }
.send-button:disabled { opacity: 0.4; cursor: default; box-shadow: none; }
.composer-hint {
  margin: 0;
  padding: 0 4px 4px;
  color: var(--dsw-label-caption);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}
.composer-count {
  margin-right: auto;
  color: var(--dsw-label-caption);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  padding-left: 6px;
}
.composer-count.composer-count-limit { color: var(--dsw-warn); font-weight: 600; }

.voice-input-button.voice-recording {
  color: var(--dsw-error);
  background: var(--jarvis-danger-soft);
  animation: voice-pulse 1.4s ease-out infinite;
}
@keyframes voice-pulse {
  0% { box-shadow: 0 0 0 0 rgba(251, 113, 133, 0.45); }
  100% { box-shadow: 0 0 0 12px rgba(251, 113, 133, 0); }
}

/* JARVIS is thinking: two gradient orbs breathing with a phase shift. */
.thinking-indicator {
  flex: none;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border: 1px solid var(--dsw-border-l2-thin);
  border-radius: 999px;
  background: var(--dsw-elevated-fill);
  box-shadow: var(--jarvis-card-shadow), var(--jarvis-inset-highlight);
  color: var(--dsw-label-secondary);
  font-size: 12.5px;
  font-weight: 550;
}
.thinking-indicator::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jarvis-accent-grad);
  animation: thinking-pulse 1.2s ease-in-out infinite;
}
.thinking-indicator::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jarvis-accent-grad);
  animation: thinking-pulse 1.2s ease-in-out infinite;
  animation-delay: 180ms;
}
@keyframes thinking-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* Long-turn progress notices: JARVIS needs more time / very long request. */
.turn-progress {
  flex: none;
  margin: 0 auto 10px;
  max-width: min(560px, 92%);
  padding: 8px 14px;
  border: 1px solid var(--dsw-border-l2-thin);
  border-radius: 14px;
  background: var(--dsw-elevated-fill);
  box-shadow: var(--jarvis-card-shadow), var(--jarvis-inset-highlight);
  color: var(--dsw-label-secondary);
  font-size: 13px;
  line-height: 1.45;
}
.turn-progress p {
  margin: 0;
}
.turn-progress .turn-progress-hint {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--dsw-label-tertiary);
}

/* ---- Unified action card (plugin-loop cutover) -------------------------- */

.action-card {
  position: relative;
  flex: none;
  width: 100%;
  max-width: var(--dsh-content-width);
  margin: 0 auto 10px;
  padding: 16px 18px;
  border: 1px solid var(--dsw-border-l2);
  border-radius: 18px;
  background: var(--dsw-elevated-fill);
  box-shadow: var(--jarvis-float-shadow), var(--jarvis-inset-highlight);
  font-size: 14px;
  overflow: hidden;
  animation: message-in 420ms var(--dsh-spring) both;
}
/* A gradient hairline crowns the confirmation card. */
.action-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--jarvis-accent-grad);
  opacity: 0.85;
}
.action-card .eyebrow { margin: 0 0 4px; }
.action-card h3 { margin: 0 0 6px; font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; }
.action-card-label {
  margin: 0 0 6px;
  font-family: var(--dsh-mono, monospace);
  font-size: 12.5px;
  color: var(--dsw-label-secondary);
  overflow-wrap: anywhere;
}
.action-card-text {
  margin: 0;
  max-height: 12rem;
  overflow-y: auto;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  color: var(--dsw-label-primary);
}
.action-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.action-card-actions .primary {
  min-height: 36px;
  padding: 0 18px;
  font-size: 13.5px;
}
.agent-setting-label {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--dsw-label-secondary);
}

/* ---- Settings dialog --------------------------------------------------- */

/* Full-bleed settings: the dialog fills the viewport, a slim left glass nav
   rail sits beside a scrolling content column whose sticky header carries
   the title, company scope, and Close. Panes group their rows into airy
   rounded cards. */

/* A closed <dialog> must never render in document flow: browsers without
   native <dialog> support fall back to an inline block at the bottom of the
   page unless hidden here. The Notifications panel is only shown on demand
   after the badge is clicked. */
dialog:not([open]) {
  display: none !important;
}

.settings-dialog {
  width: 100%;
  height: 100dvh;
  max-width: 100%;
  max-height: 100dvh;
  padding: 0;
  overflow: hidden;
  border: none;
  border-radius: 0;
  background: var(--dsw-bg-base);
  color: var(--dsw-label-primary);
  box-shadow: none;
}
.settings-dialog[open] {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 0;
  padding: 0;
  animation: settings-in 260ms var(--dsh-spring) both;
}
@keyframes settings-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.settings-dialog::backdrop {
  background: var(--dsw-mask);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.settings-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  overflow-y: auto;
  padding: 28px 16px 24px;
  background: var(--dsw-sidebar-fill);
  border-right: 1px solid var(--dsw-border-l1);
  backdrop-filter: blur(var(--jarvis-glass-blur));
  -webkit-backdrop-filter: blur(var(--jarvis-glass-blur));
}
.settings-menu::after {
  content: "";
  position: sticky;
  bottom: -24px;
  display: block;
  height: 0;
}
.settings-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--dsw-label-secondary);
  text-align: left;
  font-size: 14px;
  font-weight: 550;
  line-height: 22px;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.settings-menu-item:hover:not([aria-selected="true"]) {
  background: var(--dsw-nav-item-hover);
  color: var(--dsw-label-primary);
}
.settings-menu-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.settings-menu-badge {
  flex: none;
  max-width: 110px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10.5px;
  line-height: 18px;
  color: var(--dsw-label-caption);
}
.settings-menu-item[aria-selected="true"] {
  border-color: rgba(99, 120, 255, 0.28);
  background: var(--dsw-nav-item-active);
  color: var(--dsw-label-primary);
}
.settings-menu-item[aria-selected="true"]::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 22%;
  bottom: 22%;
  width: 3px;
  border-radius: 999px;
  background: var(--jarvis-accent-grad);
}
.settings-menu-item[aria-selected="true"] .settings-menu-badge {
  color: var(--jarvis-accent-text);
}

.settings-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 0 44px 44px;
  scroll-behavior: smooth;
}
/* The active pane is a tall flex child. With the default flex-shrink: 1 it
   would be crushed to fit the viewport, its content would overflow the
   crushed box, and it would overlap the trailing status line. Keeping every
   child at its natural height (flex-shrink: 0) makes the pane grow and the
   container scroll instead — sections stack cleanly with no overlap. */
.settings-content > * {
  flex-shrink: 0;
}
.settings-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 -44px;
  padding: 20px 44px 16px;
  background: var(--dsw-bg-base);
  background: color-mix(in srgb, var(--dsw-bg-base) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--dsw-border-l1);
}
.settings-header h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.settings-header form { display: block; }
.settings-description, .settings-company {
  margin: 0;
  color: var(--dsw-label-secondary);
  font-size: 13px;
  line-height: 20px;
  max-width: 64ch;
}
.settings-company { font-weight: 600; color: var(--jarvis-accent-text); }

/* Dedicated Notifications overlay: a centered glass card with its own
   header, filter chips, and bulk actions. */
.notifications-dialog {
  width: min(720px, calc(100vw - 2rem));
  height: auto;
  max-height: min(82dvh, 760px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--dsw-border-l3);
  border-radius: 20px;
  background: var(--dsw-elevated-fill);
  color: var(--dsw-label-primary);
  box-shadow: var(--jarvis-float-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.notifications-dialog[open] { animation: notification-in 240ms var(--dsh-spring) both; }
@keyframes notification-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.notifications-dialog::backdrop {
  background: var(--dsw-mask);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.notifications-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 14px;
  border-bottom: 1px solid var(--dsw-border-l1);
}
.notifications-title-cluster { display: flex; flex-direction: column; gap: 2px; }
.notifications-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.notifications-count {
  margin: 0;
  font-size: 13px;
  color: var(--dsw-label-secondary);
}
.notifications-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 24px;
  border-bottom: 1px solid var(--dsw-border-l1);
  background: var(--dsw-sidebar-fill);
}
.notifications-filters {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.notifications-filter { min-height: 26px; }
.notifications-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.notifications-list {
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.notification-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--dsw-border-l2-thin);
  border-radius: 14px;
  background: var(--dsw-menu);
  box-shadow: var(--jarvis-card-shadow), var(--jarvis-inset-highlight);
  transition: transform 160ms var(--dsh-spring), border-color 160ms ease;
}
.notification-card:hover {
  transform: translateY(-1px);
  border-color: var(--dsw-border-l3);
}
.notification-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.notification-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--dsw-border-l2);
  background: var(--dsw-selector);
  color: var(--dsw-label-secondary);
  white-space: nowrap;
}
.notification-chip-email { color: var(--jarvis-accent-text); border-color: rgba(99, 120, 255, 0.35); background: var(--jarvis-accent-grad-soft); }
.notification-chip-ticket { color: var(--dsw-warn); border-color: rgba(228, 154, 60, 0.4); background: var(--jarvis-warn-soft); }
.notification-chip-reminder { color: #9333ea; border-color: rgba(147, 51, 234, 0.35); background: rgba(147, 51, 234, 0.1); }
.notification-chip-agent { color: var(--jarvis-success); border-color: rgba(34, 197, 94, 0.35); background: var(--jarvis-success-soft); }
.notification-chip-system { color: var(--jarvis-accent-text); border-color: rgba(99, 120, 255, 0.35); background: var(--jarvis-accent-grad-soft); }
.notification-card-time {
  font-size: 11.5px;
  color: var(--dsw-label-caption);
  white-space: nowrap;
}
.notification-card-text {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--dsw-label-primary);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.notification-card-actions {
  display: flex;
  justify-content: flex-end;
}
.notifications-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 48px 24px;
  text-align: center;
}
.notifications-empty-glyph { font-size: 34px; line-height: 1; }
.notifications-empty-title {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  color: var(--dsw-label-primary);
}
.notifications-empty-sub {
  margin: 0;
  max-width: 34ch;
  font-size: 13px;
  line-height: 20px;
  color: var(--dsw-label-secondary);
}
@media (max-width: 40rem) {
  .notifications-dialog {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    border: none;
  }
  .notification-card-time { display: none; }
}

/* Per-conversation model diagnostics: the full raw JARVIS <-> model log. */
.diagnostics-dialog {
  width: min(860px, calc(100vw - 2rem));
  height: min(88vh, 900px);
  max-height: min(88vh, 900px);
  height: min(88dvh, 900px);
  max-height: min(88dvh, 900px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--dsw-border-l3);
  border-radius: 20px;
  background: var(--dsw-elevated-fill);
  color: var(--dsw-label-primary);
  box-shadow: var(--jarvis-float-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.diagnostics-dialog[open] { animation: notification-in 240ms var(--dsh-spring) both; }
.diagnostics-dialog::backdrop {
  background: var(--dsw-mask);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.diagnostics-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 14px;
  border-bottom: 1px solid var(--dsw-border-l1);
}
.diagnostics-title-cluster { display: flex; flex-direction: column; gap: 2px; }
.diagnostics-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.diagnostics-count {
  margin: 0;
  font-size: 13px;
  color: var(--dsw-label-secondary);
}
.diagnostics-content {
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  flex: 1 1 0;
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.diagnostics-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.diagnostics-empty {
  margin: 0;
  padding: 48px 24px;
  text-align: center;
  font-size: 14px;
  line-height: 22px;
  color: var(--dsw-label-secondary);
}
.diagnostics-entry {
  border: 1px solid var(--dsw-border-l2-thin);
  border-radius: 14px;
  background: var(--dsw-menu);
  box-shadow: var(--jarvis-card-shadow), var(--jarvis-inset-highlight);
  overflow: hidden;
}
.diagnostics-entry > summary {
  cursor: pointer;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dsw-label-primary);
  letter-spacing: 0.01em;
  user-select: none;
  overflow-wrap: anywhere;
}
.diagnostics-entry > summary:hover { background: var(--dsw-selector); }
.diagnostics-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 16px 16px;
}
.diagnostics-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.diagnostics-section strong {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dsw-label-caption);
}
.diagnostics-section pre {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--dsw-border-l2-thin);
  border-radius: 10px;
  background: var(--dsw-sidebar-fill);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 19px;
  color: var(--dsw-label-primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.diagnostics-copy { align-self: flex-end; min-height: 26px; }
.diagnostics-toggle { align-self: flex-start; min-height: 26px; margin-top: 2px; }
@media (max-width: 40rem) {
  .diagnostics-dialog {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    border: none;
  }
}

.settings-panel,
#appearance-panel {
  min-height: 0;
}

/* Grouped pane cards: each pane's rows live in one airy glass card. */
.settings-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--dsw-border-l2-thin);
  border-radius: 18px;
  background: var(--dsw-menu);
  box-shadow: var(--jarvis-card-shadow), var(--jarvis-inset-highlight);
}

/* Full-width form sections: a heading + description up top, then the fields
   below at full width (no cramped 420px control column). Used by the
   Profile, Projects, Notifications, Data, and Voice panes. */
.settings-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--dsw-border-l1);
}
.settings-section:last-child { border-bottom: none; }
.settings-section-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.settings-section-head .settings-row-title { margin-bottom: 0; }
/* Keep full-width form fields from stretching edge-to-edge on wide screens. */
.settings-section .settings-field-grid,
.settings-section > .settings-field,
.settings-section .plugin-setting-actions,
.settings-section .settings-checkbox,
.settings-section .settings-inline-check {
  max-width: 640px;
}

/* Plugins pane section heads. */
.plugin-section-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 8px;
}
.plugin-section-head:first-child { margin-top: 0; }
.plugin-section-title {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  color: var(--dsw-label-secondary);
}
.plugin-section-detail {
  margin: 0;
  color: var(--dsw-label-caption);
  font-size: 12px;
  line-height: 18px;
}

/* Settings rows: label column + control, hairline separators between rows. */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--dsw-border-l1);
}
.settings-row:last-child { border-bottom: none; }
.settings-row-copy { min-width: 0; }
.settings-row-control {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  min-width: 0;
  flex: 0 1 420px;
  max-width: 480px;
}
.settings-row-control-wide {
  flex: 1 1 520px;
  max-width: 560px;
}
.settings-row-control .memory-list { width: 100%; }
.settings-row-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 650;
  color: var(--dsw-label-primary);
}
.settings-row-detail {
  margin: 0;
  color: var(--dsw-label-tertiary);
  font-size: 13px;
  line-height: 20px;
}

/* Field grids inside row controls: two-up labelled inputs. */
.settings-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}
.settings-field-wide {
  grid-column: 1 / -1;
}
/* JARVIS's-voice picker: full-width voice list plus a preview action. */
.voice-picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.voice-picker-row select {
  flex: 1 1 auto;
  min-width: 0;
}
.voice-picker-row .ghost-button {
  flex: none;
  min-height: 38px;
}
.settings-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.settings-field > label,
.settings-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--dsw-label-secondary);
}
.settings-field select {
  width: 100%;
  min-height: 38px;
  padding: 6px 12px;
  border: 1px solid var(--dsw-border-l2);
  border-radius: 10px;
  background: var(--dsw-input-major);
  color: var(--dsw-label-primary);
  font-size: 13px;
  line-height: 20px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.settings-field select:focus {
  border-color: rgba(99, 120, 255, 0.55);
  outline: none;
  box-shadow: 0 0 0 3px var(--jarvis-accent-ring);
}
.settings-checkbox,
.settings-inline-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 20px;
  color: var(--dsw-label-primary);
  cursor: pointer;
}
.settings-checkbox input,
.settings-inline-check input { margin: 0; accent-color: var(--jarvis-accent-1); }
.plugin-setting-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Inline lists (memory, audit, reminders, inbox, attachments): rows with a
   hairline between entries. */
.memory-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.memory-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--dsw-border-l1);
  font-size: 13px;
  line-height: 20px;
  color: var(--dsw-label-primary);
}
.memory-row:last-child { border-bottom: none; }
.memory-row-text { min-width: 0; overflow-wrap: anywhere; }
.memory-row-meta {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--dsw-label-caption);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.memory-row .ghost-button { margin-left: 8px; }
@media (max-width: 34rem) {
  .memory-row-meta { margin-left: 0; }
}

/* First-class Projects: management pane rows. */
.project-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--dsw-border-l1);
  font-size: 13px;
  line-height: 20px;
  color: var(--dsw-label-primary);
}
.project-row:last-child { border-bottom: none; }
.project-row-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
}
.project-row-name { font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
.project-row-meta {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--dsw-label-caption);
  white-space: nowrap;
}
.project-row-detail { font-size: 12px; color: var(--dsw-label-caption); overflow-wrap: anywhere; }
.project-row-stale { color: var(--dsw-warn); font-weight: 650; }
.project-row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.project-detail-block { display: flex; flex-direction: column; gap: 4px; }
.project-detail-empty { color: var(--dsw-label-caption); font-size: 13px; }
/* Products badge + nested sub-project tree. */
.project-kind-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--dsw-border-l1);
  color: var(--dsw-label-caption);
  font-size: 11px;
  font-weight: 650;
  vertical-align: middle;
}
.project-row-nested { padding-left: 14px; }
.project-row-children {
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid var(--dsw-border-l1);
}
.project-state-select {
  max-width: 190px;
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid var(--dsw-border-l1);
  background: transparent;
  color: inherit;
}

/* Appearance theme cubes: icon-over-label cards with live palette previews
   for Light / Dark / System. */
.theme-cubes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.theme-cube {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 96px;
  padding: 16px 20px;
  border: 1px solid var(--dsw-border-l2);
  border-radius: 16px;
  background: transparent;
  color: var(--dsw-label-primary);
  font-size: 13px;
  line-height: 20px;
  cursor: pointer;
  transition: transform 160ms var(--dsh-spring), border-color 160ms ease,
    box-shadow 160ms ease;
}
.theme-cube svg { width: 20px; height: 20px; }
/* Each swatch carries its own ink so the icon + label stay legible on the
   swatch background (the light swatch needs dark ink, the dark swatch light
   ink). The swatch is fixed-colour, so this holds in every app theme. */
.theme-cube[data-theme-pref="light"] { background: linear-gradient(160deg, #ffffff, #eef1f8); color: #191a20; }
.theme-cube[data-theme-pref="light"] svg { color: #191a20; }
.theme-cube[data-theme-pref="dark"] { background: linear-gradient(160deg, #23242a, #101014); color: #f3f4f8; }
.theme-cube[data-theme-pref="dark"] svg { color: #f3f4f8; }
.theme-cube[data-theme-pref="system"] { background: linear-gradient(105deg, #ffffff 49.5%, #23242a 50.5%); color: #f3f4f8; }
/* The System swatch splits light/dark, so its icon + label straddle both
   halves; a soft shadow keeps the light ink readable on the white half. */
.theme-cube[data-theme-pref="system"] svg { color: #f3f4f8; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)); }
.theme-cube[data-theme-pref="system"] span { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.theme-cube:hover:not(.selected) {
  transform: translateY(-2px);
  border-color: var(--dsw-border-l3);
}
/* Selection keeps the swatch (so the theme is still previewed) and adds an
   accent ring; the per-swatch ink above stays correct because the background
   no longer swaps to a neutral fill. */
.theme-cube.selected {
  border-color: transparent;
  box-shadow: 0 0 0 4px var(--jarvis-accent-ring);
}

/* Segmented control (font size). */
.segmented {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--dsw-border-l2-thin);
  border-radius: 12px;
  background: var(--dsw-selector);
}
.segment {
  min-height: 28px;
  padding: 0 14px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--dsw-label-secondary);
  font-size: 13px;
  line-height: 20px;
  font-weight: 550;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.segment:hover { color: var(--dsw-label-primary); }
.segment[aria-pressed="true"] {
  background: var(--jarvis-accent-grad);
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(90, 116, 255, 0.55);
}

/* Plugins pane intro. */
.plugin-pane-intro {
  margin: 0 0 12px;
  color: var(--dsw-label-tertiary);
  font-size: 12.5px;
  line-height: 19px;
}

/* Pane header: a title + subtitle that names each settings category (e.g.
   Connections, Automation, Coding agent) so the panes are self-labelled and
   easy to scan. */
.plugin-pane-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 2px 0 16px;
}
.plugin-pane-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--dsw-label-primary);
}
.plugin-pane-subtitle {
  margin: 0;
  max-width: 64ch;
  color: var(--dsw-label-tertiary);
  font-size: 13px;
  line-height: 20px;
}

/* Per-plugin card: a collapsed glass header that opens the plugin's
   controls. */
.plugin-card {
  list-style: none;
  border: 1px solid var(--dsw-border-l2-thin);
  border-radius: 14px;
  background: var(--dsw-input-major);
  box-shadow: var(--jarvis-card-shadow), var(--jarvis-inset-highlight);
  overflow: hidden;
}
.plugin-card-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border: none;
  background: transparent;
  color: var(--dsw-label-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms ease;
}
.plugin-card-toggle:hover { background: var(--dsw-interactive-hover); }
.plugin-card-toggle[aria-expanded="true"] {
  background: var(--dsw-interactive-hover);
  border-bottom: 1px solid var(--dsw-border-l1);
}
.plugin-card-chevron {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--dsw-label-tertiary);
  transition: transform 200ms var(--dsh-spring);
}
.plugin-card-toggle[aria-expanded="true"] .plugin-card-chevron {
  transform: rotate(90deg);
}
.plugin-card-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plugin-state-pill {
  flex: none;
  padding: 2px 10px;
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 999px;
  background: var(--jarvis-success-soft);
  color: var(--jarvis-success);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}
.plugin-card-body {
  border-top: 1px solid var(--dsw-border-l1);
  margin: 0 16px;
  padding-bottom: 16px;
}
.plugin-card-body .plugin-setting {
  border: none;
  background: transparent;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

/* Gmail-style connection managers. */
.gmail-setting {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 0 0;
}
.gmail-setting-head h3 { margin: 0 0 4px; font-size: 15px; font-weight: 650; line-height: 1.4; }
.gmail-connections {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gmail-connection {
  border: 1px solid var(--dsw-border-l2-thin);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--dsw-elevated-fill);
}
.gmail-connection .plugin-setting-copy { min-width: 0; }
.gmail-connection-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gmail-connection-head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.gmail-connection-name { font-weight: 600; color: var(--dsw-label-primary); }
.gmail-connection-state {
  flex: none;
  padding: 1px 9px;
  border: 1px solid var(--dsw-border-l2);
  border-radius: 999px;
  background: var(--dsw-selector);
  color: var(--dsw-label-secondary);
  font-size: 11px;
  font-weight: 600;
}
.gmail-connection-state:first-child { margin-right: auto; }
.gmail-register {
  display: grid;
  gap: 8px;
  margin-top: 2px;
  padding-top: 14px;
  border-top: 1px solid var(--dsw-border-l1);
}
.gmail-register-title {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  color: var(--dsw-label-primary);
}
.open-questions-section {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--dsw-border-l1);
}
.open-question-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.open-question-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--dsw-border-l2);
  border-radius: 10px;
  background: var(--dsw-input-major);
}
.open-question-text {
  font-size: 13px;
  line-height: 20px;
  color: var(--dsw-label-primary);
  word-break: break-word;
}
.open-question-item .ghost-button {
  flex: none;
}
.gmail-register label {
  font-size: 12px;
  font-weight: 600;
  color: var(--dsw-label-secondary);
}
.settings-content input[type="text"],
.settings-content input[type="password"],
.settings-field textarea,
.settings-content textarea {
  width: 100%;
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid var(--dsw-border-l2);
  border-radius: 10px;
  background: var(--dsw-input-major);
  color: var(--dsw-label-primary);
  font-size: 13px;
  line-height: 20px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.settings-content textarea { min-height: 64px; }
.settings-content input::placeholder,
.settings-content textarea::placeholder { color: var(--dsw-label-caption); }
.settings-content input:focus,
.settings-content textarea:focus {
  border-color: rgba(99, 120, 255, 0.55);
  outline: none;
  box-shadow: 0 0 0 3px var(--jarvis-accent-ring);
}

.gmail-redirect {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.gmail-redirect-uri {
  display: inline-block;
  min-width: 0;
  padding: 5px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px dashed var(--dsw-border-l3);
  background: var(--dsw-selector);
  border-radius: 8px;
  color: var(--dsw-label-secondary);
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;
}

.plugin-settings-list {
  display: grid;
  gap: 8px;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
.plugin-setting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--dsw-border-l2-thin);
  border-radius: 12px;
  background: var(--dsw-input-major);
}
.plugin-setting h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
}
.plugin-setting-description {
  margin: 0 0 4px;
  color: var(--dsw-label-secondary);
  font-size: 13px;
  line-height: 20px;
}
.plugin-setting-detail, .plugin-setting-state {
  margin: 0;
  color: var(--dsw-label-tertiary);
  font-size: 12px;
}
.plugin-setting-state { margin-top: 2px; font-weight: 550; }
.plugin-setting.none-connected { opacity: 0.85; }

/* The plugin switch is a real-feeling toggle: gradient pill when on. */
.plugin-switch {
  min-width: 4rem;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--dsw-border-l2);
  background: transparent;
  color: var(--dsw-label-secondary);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0.02em;
  transition: background-color 160ms ease, color 160ms ease,
    border-color 160ms ease, box-shadow 160ms ease;
}
.plugin-switch[aria-checked="false"] {
  background: transparent;
  color: var(--dsw-label-tertiary);
}
.plugin-switch[aria-checked="false"]:hover {
  border-color: var(--dsw-border-l3);
  color: var(--dsw-label-secondary);
}
.plugin-switch[aria-checked="true"] {
  background: var(--jarvis-accent-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px -8px rgba(90, 116, 255, 0.7);
}
.plugin-switch.secondary {
  min-width: auto;
  min-height: 28px;
  padding: 0 12px;
}
.plugin-setting-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.settings-status {
  display: block;
  min-height: 1.25rem;
  margin: 0 -44px;
  padding: 10px 44px 14px;
  color: var(--dsw-warn);
  font-size: 12px;
  font-weight: 650;
}

/* #app-status stays in the DOM (hidden, aria-live) for screen readers only.
   The visible popup toast was removed on request; status() still announces
   through this live region. */

/* ---- Conversation context menu ----------------------------------------- */

/* Positioning is fixed because app.js places the menu with viewport
   coordinates (clientX/clientY), clamped against the sidebar. */
.conversation-context-menu {
  position: fixed;
  z-index: 40;
  display: flex;
  flex-direction: column;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--dsw-border-l3);
  border-radius: 14px;
  background: var(--dsw-overlay);
  box-shadow: var(--jarvis-float-shadow);
  backdrop-filter: blur(var(--jarvis-glass-blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--jarvis-glass-blur)) saturate(1.3);
  animation: menu-in 140ms var(--dsh-spring) both;
  transform-origin: top left;
}
@keyframes menu-in {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.conversation-menu-item {
  display: block;
  width: 100%;
  padding: 8px 11px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--dsw-label-primary);
  font-size: 13px;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.conversation-menu-item:hover { background: var(--dsw-interactive-hover); }
.conversation-menu-item-danger { color: var(--dsw-error); }
.conversation-menu-item-danger:hover { background: var(--dsw-hover-danger); }
.conversation-menu-item-armed {
  background: var(--dsw-error) !important;
  color: #fff;
}
.conversation-menu-item-armed:hover { background: var(--dsw-error); color: #fff; }

.conversation-row-action {
  border: 0;
  background: transparent;
  color: var(--dsw-label-caption);
  font-size: 11px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  border-radius: 4px;
}
.conversation-row-action:hover { color: var(--dsw-label-primary); }

/* ---- Desktop layout ---------------------------------------------------- */

@media (min-width: 48rem) {
  .frame {
    flex-direction: row;
  }
  .sidebar {
    flex: 0 0 292px;
    height: 100%;
    max-height: none;
  }
  .center-col { height: 100%; }
  .access-panel { min-height: 100dvh; }
  .workspace-header { align-items: stretch; }
}

@media (max-width: 34rem) {
  .access-panel { align-items: flex-start; padding-top: 9vh; }
  .access-shell { padding: 30px 24px 26px; }
  .workspace-header { align-items: stretch; flex-direction: column; }
  .conversation-heading { align-items: stretch; flex-direction: column; }
  .conversation-heading-actions {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }
  .conversation-heading-actions .ghost-button {
    justify-content: center;
    width: 100%;
  }
  .hero { padding-inline: 12px; }
  .hero-mark { width: 38px; height: 38px; }
  .hero-title { font-size: 28px; }
  .message-list {
    padding-inline: 12px;
    max-height: min(54vh, calc(100dvh - 20rem));
  }
  .message-user .message-bubble { max-width: 88%; }
  .composer, .action-card { border-radius: 20px; }
  .settings-dialog {
    inset: 0;
    width: 100%;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    border-radius: 0;
  }
  .settings-dialog[open] {
    grid-template-columns: 100%;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .settings-menu {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 12px;
    border-right: none;
    border-bottom: 1px solid var(--dsw-border-l1);
  }
  .settings-menu-item {
    flex: none;
    min-width: max-content;
    min-height: 36px;
    padding: 6px 12px;
    border-radius: 10px;
  }
  .settings-menu-item[aria-selected="true"]::before {
    top: auto;
    left: 12px;
    right: 12px;
    bottom: -1px;
    width: auto;
    height: 2px;
  }
  .settings-content {
    padding: 0 16px 24px;
    scroll-behavior: auto;
  }
  .settings-header {
    margin: 0 -16px;
    padding: 14px 16px 12px;
  }
  .settings-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 18px 16px;
  }
  .settings-row-control,
  .settings-row-control-wide {
    flex: none;
    align-items: stretch;
    max-width: none;
  }
  .settings-field-grid { grid-template-columns: minmax(0, 1fr); }
  .settings-status { margin: 0 -16px; padding: 10px 16px 12px; }
  .theme-cubes { width: 100%; }
  .theme-cube { flex: 1 1 0; min-width: 0; padding: 12px 8px; }
  .plugin-setting { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .plugin-switch { width: 100%; }
  .sidebar-list-title, .sidebar-list-head .conversation-summary { display: none; }
  .sidebar-region { max-height: min(45dvh, 24rem); }
}

/* ---- Accessibility ------------------------------------------------------ */

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

/* ---- Mobile dashboard -----------------------------------------------------
   Phone-first chrome (≤34rem): a top bar, a 4-tab bottom navigation
   (Feed / Chat / Status / Settings), and app-like views. The desktop shell
   is unchanged — #mobile-shell stays display:none at wider widths and the
   existing .frame/.sidebar layout takes over. Targeted pills and cards are
   sized for thumbs: 44px+ tap targets, 17px+ body type, safe-area insets. */

#mobile-shell { display: none; }

.mobile-shell {
  --mob-topbar-h: 52px;
  --mob-nav-h: calc(60px + env(safe-area-inset-bottom, 0px));
  position: relative;
  z-index: 20;
  flex: none;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: var(--dsw-bg-base);
}

/* -- Top bar ------------------------------------------------------------ */
.mobile-topbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--mob-topbar-h);
  padding:
    env(safe-area-inset-top, 0px) 10px 0
    max(env(safe-area-inset-left, 0px), 10px);
  border-bottom: 1px solid var(--dsw-border-l1);
  background: var(--dsw-sidebar-fill);
  backdrop-filter: blur(var(--jarvis-glass-blur)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--jarvis-glass-blur)) saturate(1.25);
  -webkit-tap-highlight-color: transparent;
}
.mobile-topbar-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--dsw-label-secondary);
  transition: background-color 140ms ease, color 140ms ease,
    transform 140ms var(--dsh-spring);
}
.mobile-topbar-button:active { transform: scale(0.94); }
.mobile-topbar-button:hover { background: var(--dsw-interactive-hover); color: var(--dsw-label-primary); }
.mobile-topbar-button svg { width: 22px; height: 22px; }
.mobile-topbar-brand {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}
.mobile-topbar-brand img {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 8px;
  box-shadow: 0 4px 12px -4px rgba(90, 116, 255, 0.6);
}
.mobile-topbar-wordmark {
  font-size: 15px;
  font-weight: 750;
  letter-spacing: 0.14em;
  background: var(--jarvis-accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mobile-unread-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--jarvis-accent-grad);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--jarvis-glow);
}

/* -- Views -------------------------------------------------------------- */
.mobile-views {
  flex: 1;
  min-height: 0;
  position: relative;
}
.mobile-view {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: none;
  -webkit-overflow-scrolling: touch;
  animation: mobile-view-in 220ms var(--dsh-spring) both;
}
.mobile-view.mobile-view-active { display: flex; flex-direction: column; }
@keyframes mobile-view-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.mobile-view-head {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 16px 10px;
}
.mobile-view-head-copy { min-width: 0; }
.mobile-view-title {
  margin: 0;
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 28px;
}
.mobile-view-subtitle {
  margin: 2px 0 0;
  color: var(--dsw-label-tertiary);
  font-size: 13px;
  line-height: 19px;
}
.mobile-view-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mobile-view-actions .ghost-button { min-height: 44px; padding: 0 14px; }

/* -- Feed --------------------------------------------------------------- */
.mobile-feed-filters {
  flex: none;
  display: flex;
  gap: 8px;
  padding: 2px 16px 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mobile-feed-filters::-webkit-scrollbar { display: none; }
.mobile-filter-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--dsw-border-l2);
  border-radius: 999px;
  background: var(--dsw-elevated-fill);
  color: var(--dsw-label-secondary);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 140ms ease, color 140ms ease,
    border-color 140ms ease, transform 140ms var(--dsh-spring);
}
.mobile-filter-chip:active { transform: scale(0.96); }
.mobile-filter-chip.mobile-filter-active {
  border-color: transparent;
  background: var(--jarvis-accent-grad);
  color: #fff;
  box-shadow: var(--jarvis-glow);
}
.mobile-feed-list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mobile-feed-card {
  position: relative;
  overflow: hidden;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 10px;
  border: 1px solid var(--dsw-border-l2);
  border-radius: 18px;
  background: var(--dsw-elevated-fill);
  box-shadow: var(--jarvis-card-shadow), var(--jarvis-inset-highlight);
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  transition: transform 200ms var(--dsh-spring), opacity 200ms ease;
  animation: mobile-card-in 240ms var(--dsh-spring) both;
}
@keyframes mobile-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.mobile-feed-card.mobile-card-dismissed {
  transform: translateX(110%);
  opacity: 0;
}
.mobile-feed-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mobile-feed-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--mob-chip-fg, var(--jarvis-accent-text));
  background: var(--mob-chip-bg, var(--jarvis-accent-grad-soft));
}
.mobile-feed-time {
  flex: none;
  color: var(--dsw-label-secondary);
  font-size: 11.5px;
  white-space: nowrap;
}
.mobile-feed-text {
  margin: 0;
  color: var(--dsw-label-primary);
  font-size: 15px;
  line-height: 22px;
  overflow-wrap: anywhere;
}
.mobile-feed-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.mobile-feed-card .ghost-button { min-height: 44px; }
.mobile-feed-open {
  border: 1px solid var(--dsw-border-l2);
  border-radius: 10px;
  background: var(--dsw-elevated-hover);
  color: var(--dsw-label-secondary);
  font-size: 13px;
  font-weight: 600;
  min-height: 40px;
  padding: 0 12px;
}
.mobile-feed-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 48px 24px;
  text-align: center;
}
.mobile-feed-empty-glyph { font-size: 40px; }
.mobile-feed-empty-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}
.mobile-feed-empty-sub {
  margin: 0;
  max-width: 30rem;
  color: var(--dsw-label-tertiary);
  font-size: 13.5px;
  line-height: 20px;
}

/* Category tints. */
.mobile-feed-card[data-kind="email"],
.mobile-filter-chip[data-mobile-filter="email"] {
  --mob-chip-bg: rgba(59, 130, 246, 0.14); --mob-chip-fg: #2563eb;
  --mob-card-tint: rgba(59, 130, 246, 0.06);
}
.mobile-feed-card[data-kind="ticket"],
.mobile-filter-chip[data-mobile-filter="ticket"] {
  --mob-chip-bg: rgba(245, 158, 11, 0.16); --mob-chip-fg: #b45309;
  --mob-card-tint: rgba(245, 158, 11, 0.06);
}
.mobile-feed-card[data-kind="project"],
.mobile-filter-chip[data-mobile-filter="project"] {
  --mob-chip-bg: rgba(139, 92, 246, 0.15); --mob-chip-fg: #7c3aed;
  --mob-card-tint: rgba(139, 92, 246, 0.06);
}
.mobile-feed-card[data-kind="agent"],
.mobile-filter-chip[data-mobile-filter="agent"] {
  --mob-chip-bg: rgba(6, 182, 212, 0.15); --mob-chip-fg: #0e7490;
  --mob-card-tint: rgba(6, 182, 212, 0.06);
}
.mobile-feed-card[data-kind="reminder"],
.mobile-filter-chip[data-mobile-filter="reminder"] {
  --mob-chip-bg: rgba(244, 63, 94, 0.13); --mob-chip-fg: #e11d48;
  --mob-card-tint: rgba(244, 63, 94, 0.05);
}
.mobile-feed-card[data-kind="improvement"],
.mobile-filter-chip[data-mobile-filter="improvement"] {
  --mob-chip-bg: rgba(16, 185, 129, 0.14); --mob-chip-fg: #047857;
  --mob-card-tint: rgba(16, 185, 129, 0.06);
}
.mobile-feed-card[data-kind="system"],
.mobile-filter-chip[data-mobile-filter="system"] {
  --mob-chip-bg: rgba(100, 116, 139, 0.15); --mob-chip-fg: #475569;
  --mob-card-tint: rgba(100, 116, 139, 0.05);
}
.mobile-feed-card { background:
  linear-gradient(140deg, var(--mob-card-tint, transparent), transparent 60%),
  var(--dsw-elevated-fill); }

/* -- Chat (reuses the existing .frame) ----------------------------------- */
#mobile-chat-view { overflow: hidden; }
#mobile-chat-view.mobile-view-active { display: flex; }
#mobile-chat-view .frame {
  flex: 1;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#mobile-chat-view .sidebar { display: none; }
#mobile-chat-view .center-col { height: 100%; }
#mobile-chat-view .conversation-heading {
  flex-direction: row;
  align-items: center;
  min-height: 44px;
  padding: 6px 14px 4px;
  gap: 8px;
  flex-wrap: nowrap;
}
/* On the phone the desktop chrome is noise: the verbose status line, the
   project chip and the Diagnostics action duplicate the Status tab and push
   the transcript down, so drop them to leave one compact row (title + the
   copy / export / forget actions). */
#mobile-chat-view #today-brief,
#mobile-chat-view #conversation-project-chip,
#mobile-chat-view #diagnostics-button {
  display: none;
}
#mobile-chat-view .conversation-heading-actions {
  flex-direction: row;
  width: auto;
  max-width: 50%;
  overflow-x: auto;
  justify-content: flex-start;
  flex-wrap: nowrap;
}
#mobile-chat-view .conversation-heading-actions .ghost-button {
  flex: none;
  min-height: 38px;
  padding: 0 12px;
}
#mobile-chat-view .conversation-heading-actions .ghost-button span {
  display: none;
}
#mobile-chat-view .message-list {
  max-height: none;
  padding: 10px 14px 6px;
  gap: 14px;
}
#mobile-chat-view .message-bubble { max-width: 100%; }
#mobile-chat-view .hero { padding-inline: 14px; }
#mobile-chat-view .composer {
  margin: 0 10px 8px;
  max-width: none;
  padding: 10px 12px 4px;
  border-radius: 20px;
}
#mobile-chat-view .composer-hint { display: none; }

/* Drawer: a dedicated phone panel listing conversations, independent of
   which tab is active. It slides in from the left over a scrim; picking a
   conversation switches to the Chat tab and loads it. */
.mobile-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(86vw, 340px);
  height: 100dvh;
  z-index: 92;
  display: flex;
  flex-direction: column;
  background: var(--dsw-sidebar-fill);
  border-right: 1px solid var(--dsw-border-l3);
  border-radius: 0 18px 18px 0;
  box-shadow: var(--jarvis-float-shadow);
  transform: translateX(-105%);
  transition: transform 220ms var(--dsh-spring);
}
.workspace.mobile-drawer-open .mobile-drawer { transform: none; }
.mobile-drawer-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 16px 8px;
}
.mobile-drawer-title { font-size: 17px; font-weight: 750; }
.mobile-drawer-new {
  flex: none;
  margin: 0 16px 10px;
  min-height: 44px;
}
.mobile-drawer-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 12px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mobile-drawer-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--dsw-label-primary);
}
.mobile-drawer-item-title {
  font-size: 14.5px;
  font-weight: 650;
  line-height: 20px;
  overflow-wrap: anywhere;
}
.mobile-drawer-item-preview {
  color: var(--dsw-label-tertiary);
  font-size: 12.5px;
  line-height: 18px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mobile-drawer-item:active { background: var(--dsw-interactive-hover); }
.mobile-drawer-empty {
  color: var(--dsw-label-tertiary);
  font-size: 13px;
  text-align: center;
  padding: 32px 12px;
}
@keyframes mobile-drawer-in {
  from { transform: translateX(-16px); opacity: 0.4; }
  to { transform: none; opacity: 1; }
}
.mobile-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 91;
  display: block;
  background: rgba(10, 12, 20, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.mobile-drawer-scrim[hidden] { display: none; }

/* -- Status -------------------------------------------------------------- */
.mobile-status-summary {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 16px 12px;
  padding: 16px;
  border: 1px solid var(--dsw-border-l2);
  border-radius: 20px;
  background:
    linear-gradient(140deg, var(--jarvis-accent-grad-soft), transparent 70%),
    var(--dsw-elevated-fill);
  box-shadow: var(--jarvis-card-shadow);
}
.mobile-status-orb {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--jarvis-accent-grad);
  box-shadow: var(--jarvis-glow), 0 0 0 8px var(--jarvis-accent-ring);
  animation: mobile-orb-pulse 2.4s ease-in-out infinite;
}
.mobile-status-orb.mobile-orb-warn {
  background: var(--jarvis-warn);
  box-shadow: 0 0 0 8px var(--jarvis-warn-soft);
}
.mobile-status-orb.mobile-orb-bad {
  background: var(--jarvis-danger);
  box-shadow: 0 0 0 8px var(--jarvis-danger-soft);
  animation: none;
}
@keyframes mobile-orb-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.mobile-status-headline {
  margin: 0;
  font-size: 16px;
  font-weight: 750;
  line-height: 22px;
}
.mobile-status-detail {
  margin: 2px 0 0;
  color: var(--dsw-label-tertiary);
  font-size: 13px;
  line-height: 19px;
}
.mobile-status-components {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 16px;
}
.mobile-status-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--dsw-border-l2);
  border-radius: 16px;
  background: var(--dsw-elevated-fill);
  box-shadow: var(--jarvis-card-shadow);
  animation: mobile-card-in 240ms var(--dsh-spring) both;
}
.mobile-status-card-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 19px;
  background: var(--mob-chip-bg, var(--jarvis-accent-grad-soft));
}
.mobile-status-card-copy { flex: 1; min-width: 0; }
.mobile-status-card-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 20px;
}
.mobile-status-card-note {
  margin: 1px 0 0;
  color: var(--dsw-label-tertiary);
  font-size: 12.5px;
  line-height: 18px;
  overflow-wrap: anywhere;
}
.mobile-status-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
}
.mobile-status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.mobile-status-pill[data-state="ready"] { background: var(--jarvis-success-soft); color: var(--jarvis-success); }
.mobile-status-pill[data-state="warn"] { background: var(--jarvis-warn-soft); color: var(--jarvis-warn); }
.mobile-status-pill[data-state="bad"] { background: var(--jarvis-danger-soft); color: var(--jarvis-danger); }
.mobile-status-note {
  margin: 14px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  color: var(--dsw-label-caption);
  font-size: 12px;
  line-height: 18px;
}

/* -- Settings ------------------------------------------------------------- */
.mobile-settings-card {
  margin: 0 16px 12px;
  padding: 6px 14px 12px;
  border: 1px solid var(--dsw-border-l2);
  border-radius: 18px;
  background: var(--dsw-elevated-fill);
  box-shadow: var(--jarvis-card-shadow), var(--jarvis-inset-highlight);
}
.mobile-card-title {
  margin: 12px 0 2px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jarvis-accent-text);
}
.mobile-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 8px 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mobile-toggle-row + .mobile-toggle-row { border-top: 1px solid var(--dsw-border-l1); }
.mobile-toggle-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mobile-toggle-title { font-size: 14.5px; font-weight: 650; line-height: 20px; }
.mobile-toggle-detail { color: var(--dsw-label-tertiary); font-size: 12.5px; line-height: 18px; }

.mobile-switch {
  position: relative;
  flex: none;
  width: 50px;
  height: 30px;
}
.mobile-switch input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.mobile-switch input:disabled { cursor: wait; }
.mobile-switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--dsw-selector);
  box-shadow: inset 0 1px 3px rgba(12, 14, 24, 0.25);
  transition: background-color 180ms ease, box-shadow 180ms ease;
}
.mobile-switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(12, 14, 24, 0.25);
  transition: transform 200ms var(--dsh-spring);
}
.mobile-switch input:checked + .mobile-switch-track {
  background: var(--jarvis-accent-grad);
  box-shadow: var(--jarvis-glow);
}
.mobile-switch input:checked + .mobile-switch-track::after {
  transform: translateX(20px);
}
.mobile-switch input:focus-visible + .mobile-switch-track {
  outline: 2px solid var(--dsw-info-fill);
  outline-offset: 2px;
}
.mobile-inline-note {
  margin: 8px 0 4px;
  color: var(--dsw-label-tertiary);
  font-size: 12.5px;
  line-height: 18px;
}
.mobile-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  color: var(--dsw-label-secondary);
  font-size: 13px;
  font-weight: 600;
}
.mobile-field input,
.mobile-field textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--dsw-border-l2);
  border-radius: 12px;
  background: var(--dsw-input-major);
  color: var(--dsw-label-primary);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.mobile-field input { min-height: 44px; padding: 0 12px; }
.mobile-field textarea {
  padding: 10px 12px;
  line-height: 22px;
  min-height: 84px;
  resize: vertical;
}
.mobile-field input:focus,
.mobile-field textarea:focus { outline: 2px solid var(--dsw-static-deepseek-400); }
.mobile-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0 10px;
}
.mobile-settings-grid > .mobile-field { min-width: 0; }
/* Standing context is free-form prose, so stack it full-width instead of
   squeezing it into two narrow columns that clip the placeholders. */
.mobile-settings-grid-space { grid-template-columns: 1fr; }
.mobile-settings-card .ghost-button { min-height: 44px; }
.mobile-full-button {
  width: 100%;
  min-height: 48px;
  margin-top: 10px;
  font-size: 15px;
}

/* -- Bottom navigation ----------------------------------------------------- */
.mobile-nav {
  flex: none;
  position: relative;
  z-index: 30;
  display: flex;
  align-items: stretch;
  gap: 2px;
  min-height: var(--mob-nav-h);
  padding: 4px 6px env(safe-area-inset-bottom, 0px);
  border-top: 1px solid var(--dsw-border-l1);
  background: var(--dsw-sidebar-fill);
  backdrop-filter: blur(var(--jarvis-glass-blur)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--jarvis-glass-blur)) saturate(1.25);
  -webkit-tap-highlight-color: transparent;
}
.mobile-tab {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: 4px 2px;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: var(--dsw-label-tertiary);
  transition: color 160ms ease, background-color 160ms ease,
    transform 160ms var(--dsh-spring);
}
.mobile-tab svg { width: 22px; height: 22px; }
.mobile-tab-label {
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 14px;
}
.mobile-tab:active { transform: scale(0.94); }
.mobile-tab[aria-selected="true"] {
  color: var(--jarvis-accent-text);
  background: var(--jarvis-accent-grad-soft);
}
.mobile-tab[aria-selected="true"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: var(--jarvis-accent-grad);
}
.mobile-tab-badge {
  position: absolute;
  top: 3px;
  right: calc(50% - 24px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--jarvis-danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
}

/* -- Detail sheet ----------------------------------------------------------- */
.mobile-detail-dialog {
  width: min(560px, calc(100vw - 2rem));
  margin: auto;
  padding: 0;
  border: 1px solid var(--dsw-border-l3);
  border-radius: 22px;
  background: var(--dsw-elevated-fill);
  color: var(--dsw-label-primary);
  box-shadow: var(--jarvis-float-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mobile-detail-dialog[open] { animation: mobile-sheet-up 260ms var(--dsh-spring) both; }
@keyframes mobile-sheet-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
.mobile-detail-dialog::backdrop {
  background: var(--dsw-mask);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.mobile-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--dsw-border-l1);
}
.mobile-detail-title { margin: 0; font-size: 17px; font-weight: 750; }
.mobile-detail-time { margin: 0; padding: 12px 16px 0; color: var(--dsw-label-caption); font-size: 12.5px; }
.mobile-detail-body {
  margin: 0;
  padding: 8px 16px 18px;
  font-size: 15px;
  line-height: 22px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.mobile-detail-reply {
  margin: 0 16px 10px;
  width: calc(100% - 32px);
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--dsw-border-l2);
  border-radius: 12px;
  background: var(--dsw-elevated-hover);
  color: var(--dsw-label-primary);
  font: inherit;
  font-size: 15px;
  line-height: 20px;
  resize: vertical;
}
.mobile-detail-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 16px 14px;
}
.mobile-detail-send { min-height: 44px; padding: 0 16px; }

/* -- Dark-theme overrides for the category tints ----------------------------
   Declared twice (forced dark + OS-scheme dark), matching the token pattern
   used by the rest of the sheet. */
:root[data-ds-theme="dark"] .mobile-feed-card[data-kind="email"],
:root[data-ds-theme="dark"] .mobile-filter-chip[data-mobile-filter="email"] { --mob-chip-fg: #93c5fd; }
:root[data-ds-theme="dark"] .mobile-feed-card[data-kind="ticket"],
:root[data-ds-theme="dark"] .mobile-filter-chip[data-mobile-filter="ticket"] { --mob-chip-fg: #fbbf24; }
:root[data-ds-theme="dark"] .mobile-feed-card[data-kind="project"],
:root[data-ds-theme="dark"] .mobile-filter-chip[data-mobile-filter="project"] { --mob-chip-fg: #c4b5fd; }
:root[data-ds-theme="dark"] .mobile-feed-card[data-kind="agent"],
:root[data-ds-theme="dark"] .mobile-filter-chip[data-mobile-filter="agent"] { --mob-chip-fg: #67e8f9; }
:root[data-ds-theme="dark"] .mobile-feed-card[data-kind="reminder"],
:root[data-ds-theme="dark"] .mobile-filter-chip[data-mobile-filter="reminder"] { --mob-chip-fg: #fda4af; }
:root[data-ds-theme="dark"] .mobile-feed-card[data-kind="improvement"],
:root[data-ds-theme="dark"] .mobile-filter-chip[data-mobile-filter="improvement"] { --mob-chip-fg: #6ee7b7; }
:root[data-ds-theme="dark"] .mobile-feed-card[data-kind="system"],
:root[data-ds-theme="dark"] .mobile-filter-chip[data-mobile-filter="system"] { --mob-chip-fg: #cbd5e1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-ds-theme="light"]) .mobile-feed-card[data-kind="email"],
  :root:not([data-ds-theme="light"]) .mobile-filter-chip[data-mobile-filter="email"] { --mob-chip-fg: #93c5fd; }
  :root:not([data-ds-theme="light"]) .mobile-feed-card[data-kind="ticket"],
  :root:not([data-ds-theme="light"]) .mobile-filter-chip[data-mobile-filter="ticket"] { --mob-chip-fg: #fbbf24; }
  :root:not([data-ds-theme="light"]) .mobile-feed-card[data-kind="project"],
  :root:not([data-ds-theme="light"]) .mobile-filter-chip[data-mobile-filter="project"] { --mob-chip-fg: #c4b5fd; }
  :root:not([data-ds-theme="light"]) .mobile-feed-card[data-kind="agent"],
  :root:not([data-ds-theme="light"]) .mobile-filter-chip[data-mobile-filter="agent"] { --mob-chip-fg: #67e8f9; }
  :root:not([data-ds-theme="light"]) .mobile-feed-card[data-kind="reminder"],
  :root:not([data-ds-theme="light"]) .mobile-filter-chip[data-mobile-filter="reminder"] { --mob-chip-fg: #fda4af; }
  :root:not([data-ds-theme="light"]) .mobile-feed-card[data-kind="improvement"],
  :root:not([data-ds-theme="light"]) .mobile-filter-chip[data-mobile-filter="improvement"] { --mob-chip-fg: #6ee7b7; }
  :root:not([data-ds-theme="light"]) .mobile-feed-card[data-kind="system"],
  :root:not([data-ds-theme="light"]) .mobile-filter-chip[data-mobile-filter="system"] { --mob-chip-fg: #cbd5e1; }
}

/* -- Mobile chrome activation ---------------------------------------------- */
@media (max-width: 34rem) {
  #mobile-shell { display: flex; }
  #workspace > .frame { display: none; }

  /* The full-screen settings/notifications dialogs already work on phones;
     nudge their closers to comfortable tap targets. */
  .notifications-dialog {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: none;
    border-radius: 0;
  }
  .notifications-dialog .ghost-button,
  .diagnostics-dialog .ghost-button { min-height: 44px; }
}

/* -- Push enable banner (mobile feed) -------------------------------------- */
.mobile-push-banner {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 16px 10px;
  padding: 12px 12px;
  border: 1px solid rgba(99, 120, 255, 0.3);
  border-radius: 16px;
  background: var(--jarvis-accent-grad-soft);
  box-shadow: var(--jarvis-inset-highlight);
}
.mobile-push-banner-icon { font-size: 20px; line-height: 1; }
.mobile-push-banner-copy {
  flex: 1;
  min-width: 0;
  color: var(--dsw-label-secondary);
  font-size: 12.5px;
  line-height: 18px;
}
.mobile-push-banner-button {
  flex: none;
  min-height: 44px;
  padding: 0 14px;
  border: none;
  border-radius: 999px;
  background: var(--jarvis-accent-grad);
  color: #fff;
  font-size: 13px;
  font-weight: 650;
  box-shadow: var(--jarvis-glow);
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms var(--dsh-spring), filter 140ms ease;
}
.mobile-push-banner-button:active { transform: scale(0.96); filter: brightness(0.96); }

/* Push-status note tones (mobile settings). */
.mobile-push-note-ok { color: var(--jarvis-success); font-weight: 600; }
.mobile-push-note-warn { color: var(--jarvis-warn); font-weight: 600; }

/* Bottom breathing room inside scrollable mobile views (above the nav). */
.mobile-settings-view,
.mobile-status-view {
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

/* ---- Social approvals (dedicated shop-social approval section) ---------- */
.social-approvals-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 24px 20px;
}
.social-approval-group {
  margin: 6px 0 0;
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--dsw-label-secondary);
}
.social-approval-card {
  max-width: var(--dsh-content-width);
  width: 100%;
  margin: 0 auto;
  border: 1px solid var(--dsw-border-l2-thin);
  border-radius: 14px;
  background: var(--dsw-elevated-fill);
  box-shadow: var(--jarvis-card-shadow), var(--jarvis-inset-highlight);
  overflow: hidden;
}
.social-approval-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--dsw-border-l1);
}
.social-approval-title-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.social-approval-title {
  min-width: 0;
  font-size: 14.5px;
  font-weight: 650;
  line-height: 20px;
  color: var(--dsw-label-primary);
}
.social-approval-badge {
  flex: none;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
}
.social-approval-badge-pending {
  background: var(--dsw-selector);
  color: var(--dsw-label-secondary);
}
.social-approval-badge-rejected {
  background: rgba(220, 60, 60, 0.14);
  color: var(--dsw-error);
}
.social-approval-meta {
  font-size: 12px;
  color: var(--dsw-label-tertiary);
}
.social-approval-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  padding: 14px 16px;
}
.social-approval-body-nomedia { grid-template-columns: 1fr; }
.social-approval-media { min-width: 0; }
.social-approval-image {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  border-radius: 10px;
  background: repeating-conic-gradient(rgba(128, 128, 128, 0.12) 0 25%, transparent 0 50%) 0 0 / 16px 16px;
}
.social-approval-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.social-approval-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--dsw-label-secondary);
}
.social-approval-caption,
.social-approval-when {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--dsw-border-l2);
  background: var(--dsw-input-major);
  color: var(--dsw-label-primary);
}
.social-approval-caption { min-height: 90px; resize: vertical; }
.social-approval-caption:focus,
.social-approval-when:focus { outline: 2px solid var(--dsw-static-deepseek-400); }
.social-approval-note {
  margin: 0 16px 14px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.85rem;
  border: 1px solid rgba(220, 60, 60, 0.4);
  background: rgba(220, 60, 60, 0.06);
}
.social-approval-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-top: 1px solid var(--dsw-border-l1);
}
.social-approval-actions-main,
.social-approval-actions-side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.social-approval-actions .primary,
.social-approval-actions .ghost-button { min-height: 32px; }
/* Inline rejection feedback replaces the old browser prompt(). */
.social-approval-reject {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--dsw-border-l1);
  background: rgba(220, 60, 60, 0.04);
}
.social-approval-card.is-rejecting .social-approval-reject { display: flex; }
.social-approval-card.is-rejecting .social-approval-actions { display: none; }
.social-approval-reject-note {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--dsw-border-l2);
  background: var(--dsw-input-major);
  color: var(--dsw-label-primary);
  min-height: 64px;
  resize: vertical;
}
.social-approval-reject-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 48rem) {
  .social-approval-body { grid-template-columns: 1fr; }
  .social-approval-image { max-height: 200px; }
}
.plugin-setting-error {
  color: #d9534f;
}

/* Space — private, neutral long-term support. */
.mobile-space-status {
  margin: 0 16px 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--dsw-elevated-fill);
  border: 1px solid var(--dsw-border-l1);
  color: var(--dsw-label-secondary);
  font-size: 13px;
  line-height: 18px;
}
.mobile-space-status.space-status-error {
  border-color: rgba(217, 83, 79, 0.4);
  color: #d9534f;
}
.mobile-space-transcript {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px 12px;
  overflow-y: auto;
  min-height: 120px;
}
.space-message { display: flex; }
.space-message-user { justify-content: flex-end; }
.space-message-assistant { justify-content: flex-start; }
.space-message-body {
  max-width: 82%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 19px;
  white-space: pre-wrap;
  word-break: break-word;
}
.space-message-user .space-message-body {
  background: var(--dsw-static-deepseek-500);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.space-message-assistant .space-message-body {
  background: var(--dsw-elevated-fill);
  border: 1px solid var(--dsw-border-l1);
  color: var(--dsw-label-primary);
  border-bottom-left-radius: 4px;
}
.space-empty {
  color: var(--dsw-label-tertiary);
  font-size: 13px;
  line-height: 18px;
  padding: 12px 2px;
}
.mobile-space-composer {
  flex: none;
  display: flex;
  gap: 8px;
  padding: 8px 16px 14px;
  border-top: 1px solid var(--dsw-border-l1);
}
.mobile-space-input {
  flex: 1 1 auto;
  resize: none;
  border: 1px solid var(--dsw-border-l2);
  border-radius: 10px;
  padding: 9px 11px;
  font: inherit;
  background: var(--dsw-elevated-fill);
  color: var(--dsw-label-primary);
}
.mobile-space-input:focus { outline: 2px solid var(--dsw-static-deepseek-400); }
.mobile-space-composer .primary-button { flex: none; }
.space-journal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0;
}
.space-journal-entry {
  padding: 10px 12px;
  border: 1px solid var(--dsw-border-l1);
  border-radius: 12px;
  background: var(--dsw-elevated-fill);
}
.space-journal-note { margin: 0; font-size: 14px; line-height: 19px; white-space: pre-wrap; }
.space-journal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.space-journal-meta { color: var(--dsw-label-tertiary); font-size: 12px; }
.space-journal-delete {
  border: none;
  background: none;
  color: #d9534f;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}
.space-journal-delete:hover { text-decoration: underline; }
.mobile-settings-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}