:root,
[data-theme="light"] {
  color-scheme: light;
  --app-font: "Aptos", "Inter", "Helvetica Neue", Arial, sans-serif;
  --app-bg-light: #E8F0EC;
  --app-surface-light: rgba(255, 255, 255, 0.78);
  --app-surface-raised-light: rgba(252, 255, 253, 0.96);
  --app-ink-light: #14201C;
  --app-muted-light: #3D4F47;
  --app-border-light: rgba(20, 32, 28, 0.12);
  --app-accent-light: #0F6B5C;
  --app-accent-hover-light: #0A4D42;
  --app-focus-light: #0F6B5C;
  --app-bg-dark: #090909;
  --app-surface-dark: #111111;
  --app-surface-raised-dark: #171717;
  --app-ink-dark: #F3F3F3;
  --app-muted-dark: #A3A3A3;
  --app-border-dark: #2A2A2A;
  --app-accent-dark: #B5B5B5;
  --app-accent-hover-dark: #D0D0D0;
  --app-focus-dark: #E0E0E0;
  --app-danger: #B94A48;
  --app-radius-sm: 10px;
  --app-radius-md: 14px;
  --app-radius-lg: 20px;
  --app-shadow-light: 0 24px 60px rgba(20, 40, 34, 0.12);
  --app-shadow-dark: 0 12px 32px rgba(0, 0, 0, 0.35);
  --app-bg: var(--app-bg-light);
  --app-surface: var(--app-surface-light);
  --app-surface-raised: var(--app-surface-raised-light);
  --app-ink: var(--app-ink-light);
  --app-muted: var(--app-muted-light);
  --app-border: var(--app-border-light);
  --app-accent: var(--app-accent-light);
  --app-accent-hover: var(--app-accent-hover-light);
  --app-focus: var(--app-focus-light);
  --ink: var(--app-ink);
  --ink-soft: var(--app-muted);
  --paper: var(--app-bg);
  --panel: var(--app-surface-raised);
  --panel-strong: var(--app-surface-raised);
  --line: var(--app-border);
  --accent: var(--app-accent);
  --accent-deep: var(--app-accent-hover);
  --accent-soft: rgba(15, 107, 92, 0.12);
  --danger: var(--app-danger);
  --shadow: var(--app-shadow-light);
  --input-bg: var(--app-surface-raised);
  --card-bg: var(--app-surface);
  --messages-bg: var(--app-surface);
  --bubble-user: rgba(15, 107, 92, 0.12);
  --bubble-zana: var(--app-surface-raised);
  --wash-a: transparent;
  --wash-b: transparent;
  --wash-c: var(--app-bg);
  --wash-d: var(--app-bg);
  --wash-e: var(--app-bg);
  --font-display: var(--app-font);
  --font-body: var(--app-font);
  --green: var(--app-accent);
  --muted: var(--app-muted);
}

[data-theme="dark"] {
  color-scheme: dark;
  --app-bg: var(--app-bg-dark);
  --app-surface: var(--app-surface-dark);
  --app-surface-raised: var(--app-surface-raised-dark);
  --app-ink: var(--app-ink-dark);
  --app-muted: var(--app-muted-dark);
  --app-border: var(--app-border-dark);
  --app-accent: var(--app-accent-dark);
  --app-accent-hover: var(--app-accent-hover-dark);
  --app-focus: var(--app-focus-dark);
  --ink: var(--app-ink);
  --ink-soft: var(--app-muted);
  --paper: var(--app-bg);
  --panel: var(--app-surface);
  --panel-strong: var(--app-surface-raised);
  --line: var(--app-border);
  --accent: var(--app-accent);
  --accent-deep: var(--app-accent-hover);
  --accent-soft: rgba(255, 255, 255, 0.08);
  --danger: var(--app-danger);
  --shadow: var(--app-shadow-dark);
  --input-bg: var(--app-surface);
  --card-bg: var(--app-surface-raised);
  --messages-bg: var(--app-surface);
  --bubble-user: rgba(255, 255, 255, 0.08);
  --bubble-zana: var(--app-surface-raised);
  --wash-a: transparent;
  --wash-b: transparent;
  --wash-c: var(--app-bg);
  --wash-d: var(--app-bg);
  --wash-e: var(--app-bg);
  --font-display: var(--app-font);
  --font-body: var(--app-font);
  --green: var(--app-accent);
  --muted: var(--app-muted);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  color: var(--ink);
  font-family: var(--font-body);
  background: var(--paper);
}

.atmosphere {
  display: none;
}

@keyframes wash {
  from { filter: saturate(1) brightness(1); }
  to { filter: saturate(1.08) brightness(1.02); }
}

[data-theme="dark"] .atmosphere {
  animation: wash-dark 16s ease-in-out infinite alternate;
}

@keyframes wash-dark {
  from { filter: saturate(1) brightness(0.95); }
  to { filter: saturate(1.12) brightness(1.05); }
}

.shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  display: grid;
  place-items: stretch;
  padding: 0;
  overflow: hidden;
}

.shell:has(#gate:not([hidden])) {
  place-items: center;
  padding: 1.5rem 1rem;
  overflow: auto;
}

.mobile-tabs,
.desktop-panel-tabs {
  display: none;
}

.panel {
  width: min(440px, 100%);
  margin: auto;
  padding: 2.25rem 2rem 2rem;
  background: var(--panel);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  animation: rise 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

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

.brand {
  margin: 0 0 1.4rem;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 8vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.95;
}

.brand-sm {
  margin: 0;
  font-size: 1.65rem;
}

.headline {
  margin: 0 0 0.65rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 520;
  line-height: 1.25;
}

.lede {
  margin: 0 0 1.6rem;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.45;
}

.login-form {
  display: grid;
  gap: 0.95rem;
}

#gate {
  position: relative;
  z-index: 2;
  isolation: isolate;
  pointer-events: auto;
}

#gate .login-form,
#gate .field,
#gate input,
#gate button,
#gate a {
  pointer-events: auto;
}

#gate input {
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
}

.field {
  display: grid;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

.field input,
.compose textarea,
.vault-bar-setup input,
.vault-bar-actions input {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--input-bg);
  color: var(--ink);
  border-radius: 2px;
  padding: 0.72rem 0.8rem;
  font: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.field input:focus,
.compose textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.primary,
.ghost {
  font: inherit;
  cursor: pointer;
  border-radius: 2px;
}

.primary {
  margin-top: 0.35rem;
  border: 0;
  background: var(--accent);
  color: #f7fffc;
  padding: 0.8rem 1rem;
  font-weight: 600;
  transition: background 160ms ease, transform 160ms ease;
}

[data-theme="dark"] .primary {
  color: #06120f;
}

.primary:hover { background: var(--accent-deep); }
.primary:active { transform: translateY(1px); }
.primary:disabled {
  opacity: 0.55;
  cursor: wait;
}

.ghost {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.35rem 0.2rem;
}

.ghost:hover { color: var(--ink); }

.error {
  margin: 0;
  color: var(--danger);
  font-size: 0.88rem;
}

.workspace {
  --rail-left: 22%;
  --rail-right: 24%;
  --handle: 6px;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: var(--rail-left) var(--handle) minmax(0, 1fr) var(--handle) var(--rail-right);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "tabs tabs tabs tabs tabs"
    "left hl chat hr right";
  gap: 0.35rem;
  padding: 0.45rem;
  align-items: stretch;
  animation: rise 480ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.workspace[data-swapped="1"] {
  grid-template-areas:
    "tabs tabs tabs tabs tabs"
    "right hl chat hr left";
}

.workspace[data-left-collapsed="1"] {
  --rail-left: 0px;
}

.workspace[data-right-collapsed="1"] {
  --rail-right: 0px;
}

.desktop-panel-tabs {
  grid-area: tabs;
  display: none;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.1rem;
  overflow-x: auto;
}

.workspace[data-left-collapsed="1"] .desktop-panel-tabs,
.workspace[data-right-collapsed="1"] .desktop-panel-tabs {
  display: flex;
}

.workspace[data-left-collapsed="1"] .desktop-panel-tab[data-side="left"],
.workspace[data-right-collapsed="1"] .desktop-panel-tab[data-side="right"] {
  display: inline-flex;
}

.desktop-panel-tab {
  display: none;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.7rem;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
}

.desktop-panel-tab:hover,
.desktop-panel-tab.is-active {
  color: var(--accent-deep);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.rail-left { grid-area: left; }
.rail-right { grid-area: right; }
.chat { grid-area: chat; }
.rail-handle-left { grid-area: hl; }
.rail-handle-right { grid-area: hr; }

.workspace[data-left-collapsed="1"] .rail-left {
  display: none !important;
}

.workspace[data-right-collapsed="1"] .rail-right {
  display: none !important;
}

.workspace.desktop-sheet-open[data-desktop-sheet="evidence"] .rail-left,
.workspace.desktop-sheet-open[data-desktop-sheet="past"] .rail-left,
.workspace.desktop-sheet-open[data-desktop-sheet="current"] .rail-right,
.workspace.desktop-sheet-open[data-desktop-sheet="work"] .rail-right,
.workspace.desktop-sheet-open[data-desktop-sheet="whole"] .rail-right {
  display: contents !important;
}

.rail-handle {
  width: 100%;
  min-width: var(--handle);
  cursor: col-resize;
  border-radius: 2px;
  background: transparent;
  position: relative;
  touch-action: none;
  align-self: stretch;
}

.rail-handle::after {
  content: "";
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: var(--line);
  opacity: 0.7;
  transition: background 120ms ease, opacity 120ms ease, width 120ms ease;
}

.rail-handle:hover::after,
.rail-handle.is-dragging::after,
.rail-handle:focus-visible::after {
  width: 3px;
  opacity: 1;
  background: var(--accent);
}

.rail-handle:focus-visible {
  outline: none;
}

.workspace[data-left-collapsed="1"] .rail-handle-left::after,
.workspace[data-right-collapsed="1"] .rail-handle-right::after {
  width: 4px;
  background: var(--accent);
  opacity: 0.85;
}

.rail {
  display: grid;
  grid-template-rows: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 0.5rem;
  min-height: 0;
  height: 100%;
  min-width: 0;
}

.rail-right {
  grid-template-rows: minmax(0, 1.2fr) minmax(0, 0.8fr);
}

.side,
.chat {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0.9rem 0.9rem 1rem;
}

.side-head h2,
.pic-block h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.side-head h2 { font-size: 0.95rem; }

.side-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.side-head-row > div { min-width: 0; flex: 1; }

.evidence-show-all {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.28rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  white-space: nowrap;
}

.evidence-show-all[aria-pressed="true"] {
  border-color: rgba(15, 107, 92, 0.45);
  color: var(--accent-deep);
  background: rgba(15, 107, 92, 0.1);
}

.side-head p,
.persist-note {
  margin: 0.2rem 0 0.5rem;
  color: var(--ink-soft);
  font-size: 0.65rem;
  line-height: 1.3;
}

.vault-section-title {
  margin: 0.65rem 0 0.2rem;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
}

.evidence-vault-block {
  margin-top: 0.35rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--line);
}

.panel-evidence.is-show-all {
  flex: 1.4 1 0;
}

.panel-evidence.is-show-all .side-feed {
  max-height: none;
}

.panel-voice {
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--line);
  flex: 0 0 auto;
  overflow: visible;
}

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

/* Compact voice line under the Message Zana composer (not overlapping chat). */
.voice-composer-host {
  display: block !important;
  position: relative;
  min-height: 0;
  z-index: 20;
  order: 99;
}

.settings-dialog { width: min(44rem, calc(100vw - 2rem)); max-height: min(88vh, 54rem); overflow: auto; border: 1px solid var(--line); border-radius: 1.1rem; padding: 1rem; color: var(--ink); background: var(--panel); }
.settings-dialog::backdrop { background: rgb(0 0 0 / 55%); }
.settings-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.settings-dialog section { border-top: 1px solid var(--line); padding: 0.85rem 0; }
.settings-dialog section > p { color: var(--ink-soft); line-height: 1.45; }
.settings-action-feedback { min-height: 1.2em; margin: 0.35rem 0 0; color: var(--ink-soft); font-size: 0.85rem; overflow-wrap: anywhere; }
.connections-dialog { width: min(48rem, calc(100vw - 2rem)); }
.connections-intro { margin: .35rem 0 1rem; color: var(--ink-soft); line-height: 1.45; }
.connection-provider { border-top: 1px solid var(--line); }
.connection-provider:last-of-type { border-bottom: 1px solid var(--line); }
.connection-provider > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; cursor: pointer; }
.connection-provider > summary::-webkit-details-marker { display: none; }
.connection-provider > summary > span:first-child { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.connection-provider > summary strong { font-size: .95rem; }
.connection-provider > summary small { color: var(--ink-soft); font-size: .78rem; }
.connection-state { color: var(--ink-soft); font-size: .78rem; text-align: right; }
.connection-provider-body { padding: 0 0 1rem; }
.connection-service-grid { display: grid; gap: .55rem; }
.connection-service { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 1rem; padding: .7rem .75rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--panel-strong); }
.connection-service strong { font-size: .85rem; }
.connection-service p { margin: .2rem 0 0; color: var(--ink-soft); font-size: .76rem; line-height: 1.4; }
.connection-service-action { display: flex; align-items: center; gap: .55rem; }
.connection-service-action > span { color: var(--ink-soft); font-size: .72rem; white-space: nowrap; }
.connection-access-label { display: inline-flex; align-items: center; }
.connection-access-select { min-width: 8.25rem; color: var(--ink); background: var(--input-bg); border: 1px solid var(--line); border-radius: 8px; padding: .35rem .5rem; font: inherit; font-size: .76rem; }
.connection-access-select:disabled { opacity: .58; cursor: not-allowed; }
.connections-provider-actions { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .7rem; }
.connections-provider-account { margin: .7rem 0 0; color: var(--ink-soft); font-size: .8rem; }
.github-repository-inventory { margin: .75rem 0; padding: .75rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--panel-strong); }
.github-repository-inventory[hidden], .github-repository-inventory [hidden] { display: none; }
.github-repository-inventory h3 { margin: 0 0 .4rem; font-size: .85rem; }
.github-repository-inventory p { margin: .25rem 0 .5rem; font-size: .78rem; color: var(--ink-soft); }
.github-repository-inventory #github-repositories-list { display: grid; gap: .3rem; list-style: none; padding: 0; margin: 0 0 .5rem; max-height: 12rem; overflow-y: auto; }
.connection-verification .github-repository-inventory { border: 0; border-top: 1px solid var(--line); border-radius: 0; margin: .65rem 0 .2rem; padding: .65rem 0 0; background: transparent; }
.github-repository-inventory li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .35rem .8rem; padding: .4rem .45rem; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.github-repository-check-status { font-size: .72rem; color: var(--ink-soft); flex-basis: 100%; }
.github-repository-inventory li strong { font-size: .8rem; font-weight: 550; }
.github-repository-inventory li small { color: var(--ink-soft); font-size: .72rem; white-space: nowrap; }
.github-repository-inventory #github-repositories-more { margin-bottom: .3rem; }
.connection-verification { margin-top: .8rem; padding: .75rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--panel-strong); }
.connection-verification h3 { margin: 0 0 .45rem; font-size: .82rem; }
.connection-verification dl { display: grid; gap: .35rem; margin: 0; }
.connection-verification dl > div { display: grid; grid-template-columns: minmax(9rem, .7fr) minmax(0, 1.3fr); gap: .75rem; font-size: .76rem; line-height: 1.4; }
.connection-verification dt { color: var(--ink-soft); }
.connection-verification dd { margin: 0; overflow-wrap: anywhere; }
.connection-verification > p { margin: .5rem 0 0; color: var(--ink-soft); font-size: .72rem; line-height: 1.45; }
@media (max-width: 640px) {
  .connection-service { grid-template-columns: 1fr; }
  .connection-service-action { justify-content: space-between; }
  .connection-provider > summary { align-items: flex-start; }
  .connection-state { max-width: 45%; white-space: normal; }
  .connection-verification dl > div { grid-template-columns: minmax(7.5rem, .7fr) minmax(0, 1.3fr); }
}

/* Keep Vault state in the composer, immediately above its actions. */
.composer-options-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-width: 0;
  padding: 0.2rem 0.15rem;
}
.vault-inline-state { appearance: none; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--ink-soft); font: inherit; font-size: 0.75rem; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.vault-inline-state:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 0.2rem; }
.vault-inline-state.is-unlocked { color: var(--accent-deep); }
.compose { grid-template-columns: minmax(0, 1fr) auto; }
.compose-shell, .compose-tools { grid-row: 1; }
.compose-shell { grid-column: 1; }
.compose-tools { grid-column: 2; }
.composer-options-row { grid-row: 2; }
.compose-tools { align-self: end; }

.tool-btn, .primary, .ghost, .mode-pill, .mobile-tab, .compose-tool, .compose-send { border-radius: 999px; }

#vault-panel-host #vault-panel {
  position: relative;
  inset: auto;
  z-index: auto;
  max-height: min(35vh, 20rem);
  margin: 0.2rem 0 0;
  box-shadow: none;
}

.composer-dock {
  overflow: visible !important;
}

#voice-modes-panel.panel-voice:not([hidden]),
.composer-dock #voice-modes-panel:not([hidden]),
.composer-dock .panel-voice:not([hidden]),
.voice-composer-host .panel-voice:not([hidden]) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 20;
  margin: 0.2rem 0 0;
  padding: 0.28rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: none;
  pointer-events: auto;
}

.panel-voice-compact .voice-panel-body {
  gap: 0.15rem;
}

.panel-voice-compact .voice-toolbar {
  flex-wrap: nowrap;
  gap: 0.22rem;
}

.panel-voice-compact .voice-chip {
  width: 1.55rem;
  height: 1.55rem;
  font-size: 0.65rem;
}

.panel-voice-compact .voice-chip.voice-speed-toggle {
  min-width: 1.55rem;
  padding: 0 0.35rem;
  font-size: 0.58rem;
}

.panel-voice-compact .voice-action-compact {
  min-height: 1.55rem;
  padding: 0.1rem 0.4rem;
}

.panel-voice-compact .voice-panel-close {
  margin-left: auto;
  font-size: 0.6rem !important;
  padding: 0.1rem 0.3rem !important;
}

.panel-voice-compact .voice-status-line {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.25;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Explicit-utterance fallback remains visible and touch-sized on small devices. */
#voice-modes-panel .voice-manual-record {
  width: 100%;
  min-height: 2.6rem;
  text-align: center;
  border-style: dashed;
}
#voice-modes-panel .voice-manual-record[hidden] { display: none !important; }
#voice-modes-panel .voice-manual-record[aria-pressed="true"] {
  background: rgba(15, 107, 92, 0.12);
  border-color: var(--accent);
}
/* Personal Voice: speech selection and microphone are separate controls. */
#voice-modes-panel .voice-panel-body { gap: 0.42rem; }
#voice-modes-panel .voice-panel-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
#voice-modes-panel .voice-panel-title { margin: 0; font-size: 0.88rem; font-weight: 700; color: var(--ink); }
#voice-modes-panel .voice-panel-help { font-size: 0.67rem; color: var(--ink-soft); }
#voice-modes-panel .voice-status-line[data-state="ERROR"] { color: #de8d8d; font-weight: 650; }
#voice-modes-panel .voice-status-line[data-state="CONNECTING"] { color: var(--ink); font-weight: 600; }
#voice-modes-panel .voice-panel-heading {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
#voice-modes-panel .voice-selection-label,
#voice-modes-panel .voice-wake-name {
  font-weight: 500;
  font-size: 0.65rem;
  color: var(--ink-soft);
  text-align: right;
}
#voice-modes-panel .voice-output-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
#voice-modes-panel .voice-output-row .voice-chip {
  min-width: 2.1rem;
  width: auto;
  height: 1.9rem;
  flex: 1 1 0;
  font-size: 0.72rem;
}
#voice-modes-panel .voice-toolbar { flex-wrap: wrap; gap: 0.35rem; }
#voice-modes-panel .voice-action-compact {
  min-width: min(9rem, 37%);
  flex: 1 1 0;
  min-height: 2.45rem;
  border-radius: 10px;
  padding: 0.3rem 0.45rem;
}
#voice-modes-panel .voice-panel-close { margin-left: auto; }
#voice-modes-panel .voice-status-line {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
  min-height: 1.4rem;
}
@media (max-width: 460px) {
  #voice-modes-panel .voice-action-compact { min-width: 36%; }
  #voice-modes-panel .voice-selection-label,
  #voice-modes-panel .voice-wake-name { max-width: 55%; }
}

/* Never hide the working voice tools behind AD chrome rules when they are enabled */
.workspace[data-product="ad"] #voice-tool-btn:not([hidden]),
.workspace[data-product="ad-admin"] #voice-tool-btn:not([hidden]),
.workspace[data-product="personal"] #voice-tool-btn:not([hidden]) {
  display: inline-flex !important;
}

.voice-mobile-host:empty {
  display: none;
}

.voice-panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.3rem;
}

.voice-panel-title {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
}

.voice-panel-close {
  font-size: 0.65rem !important;
  padding: 0.15rem 0.35rem !important;
}

.voice-panel-body {
  display: grid;
  gap: 0.3rem;
}

.voice-toolbar {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: nowrap;
  min-width: 0;
}

.voice-chip {
  flex: 0 0 auto;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--input-bg);
  color: var(--ink);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  padding: 0;
}

.voice-chip.voice-speed-toggle {
  width: auto;
  min-width: 1.85rem;
  padding: 0 0.45rem;
  font-size: 0.62rem;
  letter-spacing: 0.01em;
}

.voice-chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #f7fffc;
}

.voice-speed-drawer[hidden] {
  display: none !important;
}

.voice-speed-drawer {
  display: block;
}

.voice-speed-wrap {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.voice-speed-slider {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  accent-color: var(--accent);
  height: 1.1rem;
  cursor: pointer;
}

.voice-speed-val {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--ink-soft);
  min-width: 1.6rem;
  text-align: right;
}

.voice-action {
  display: grid;
  gap: 0.05rem;
  text-align: left;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
}

.voice-action:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.voice-action-compact {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.28rem 0.4rem;
  border-radius: 999px;
  text-align: center;
  gap: 0;
}

.voice-action[aria-pressed="true"],
.voice-action.is-hot {
  border-color: rgba(15, 107, 92, 0.45);
  background: rgba(15, 107, 92, 0.12);
  color: var(--accent-deep);
}

.voice-action-label {
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.1;
}

.voice-action-meta {
  font-size: 0.58rem;
  color: var(--ink-soft);
  line-height: 1.1;
}

.voice-status-line {
  margin: 0;
  font-size: 0.65rem;
  color: var(--ink-soft);
  line-height: 1.25;
}

.voice-status-line[data-state="COMMAND_CAPTURE"],
.voice-status-line[data-state="TRANSCRIBING"],
.voice-status-line[data-state="SPEAKING"],
.voice-status-line[data-state="PROCESSING"] {
  color: var(--accent-deep);
}

/* Reserved slot below status so Stop never shifts Talk/Stay upward. */
.voice-stop-slot {
  min-height: 0;
  display: flex;
  align-items: stretch;
}

.voice-stop-slot:has(#voice-stop:not([hidden])) {
  min-height: 1.85rem;
}

.voice-stop-btn {
  width: 100%;
  margin: 0;
  font-size: 0.72rem;
  padding: 0.3rem 0.4rem;
}

.voice-stop-btn[hidden] {
  display: none !important;
}

.side-scroll {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: auto;
  flex: 1;
  min-height: 0;
  padding-right: 0.15rem;
}

.pic-block h3 {
  margin: 0 0 0.4rem;
  font-size: 0.88rem;
}

.past-feed {
  max-height: none;
}

.inspect-note {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
}

.side-card.is-selectable {
  cursor: pointer;
}

.side-card.is-selectable:hover {
  border-color: var(--accent);
}

.picture-status {
  margin: 0 0 0.35rem;
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.side-card.is-subdued {
  opacity: 0.55;
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.45rem;
}

.ghost.micro {
  font-size: 0.72rem;
  padding: 0.2rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: 2px;
}

.group-label {
  margin: 0.35rem 0 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.picture-actions {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

.correction-btn {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  padding: 0.55rem 0.65rem;
}

.sheet-backdrop {
  display: none;
}

.side-feed {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  overflow: auto;
  flex: 1;
  min-height: 0;
  padding-right: 0.15rem;
}

.side-card {
  border: 1px solid var(--line);
  background: var(--card-bg);
  padding: 0.65rem 0.7rem;
  animation: bubble-in 280ms ease both;
}

.side-card .eyebrow {
  margin: 0 0 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.side-card .body {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.4;
  white-space: pre-wrap;
}

.side-card .why {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--ink-soft);
}

.side-empty {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.4;
}

.chat {
  display: grid;
  /* header | status | messages | composer dock | voice controls */
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  gap: 0.55rem;
  min-height: 0;
  padding: 0.85rem 0.9rem 0.95rem;
}

.chat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.1rem 0.1rem 0;
}

.chat-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
}

.tool-btn {
  border: 1px solid var(--line);
  min-width: 2.1rem;
  padding: 0.35rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 2px;
}

.tool-btn.is-active {
  color: var(--accent-deep);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.session-status {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.35;
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.brand-row .brand-sm {
  margin: 0;
}

.mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}

.mode-switch[hidden] {
  display: none !important;
}

.mode-pill {
  flex: 0 0 auto;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.2;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.mode-pill.mode-personal {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line);
}

.mode-pill.mode-personal.is-active {
  background: #ffffff;
  color: #0b1210;
  border-color: #ffffff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.mode-pill.mode-ad {
  font-size: 0.95rem;
  padding: 0.4rem 0.9rem;
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line);
}

.mode-pill.mode-ad.is-active {
  background: #ffffff;
  color: #0b1210;
  border-color: #ffffff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.mode-pill.mode-ad-admin {
  font-size: 0.82rem;
  padding: 0.35rem 0.75rem;
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line);
}

.mode-pill.mode-ad-admin.is-active {
  background: #ffffff;
  color: #0b1210;
  border-color: #ffffff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

[data-theme="light"] .mode-pill.mode-personal,
[data-theme="light"] .mode-pill.mode-ad,
[data-theme="light"] .mode-pill.mode-ad-admin {
  background: transparent;
  color: var(--ink-soft);
  border-color: rgba(20, 32, 28, 0.22);
}

[data-theme="light"] .mode-pill.mode-personal.is-active,
[data-theme="light"] .mode-pill.mode-ad.is-active,
[data-theme="light"] .mode-pill.mode-ad-admin.is-active {
  background: #0f6b5c;
  color: #ffffff;
  border-color: #0f6b5c;
  box-shadow: none;
}

/* Legacy single badge — unused but keep safe if referenced */
.workspace-badge {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--input-bg);
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.2;
}

.workspace-badge.is-workspace {
  color: var(--accent-deep);
  border-color: rgba(15, 107, 92, 0.45);
  background: rgba(15, 107, 92, 0.12);
}

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

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

.house-feed-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.35rem 0 0.55rem;
}

.house-feed-quick[hidden] {
  display: none !important;
}

.house-feed-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.4rem;
}

.house-feed-item-actions .tool-btn {
  font-size: 0.72rem;
  padding: 0.2rem 0.45rem;
}

.house-feed {
  display: grid;
  gap: 0.45rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--input-bg);
  flex-shrink: 0;
  max-height: 42vh;
}

.house-feed[hidden] {
  display: none !important;
}

.house-feed-head {
  display: grid;
  gap: 0.15rem;
}

.house-feed-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.house-feed-note {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.35;
}

.house-feed-messages {
  overflow: auto;
  display: grid;
  gap: 0.45rem;
  max-height: 22vh;
  padding-right: 0.15rem;
}

.house-feed-item {
  display: grid;
  gap: 0.2rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.house-feed-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: baseline;
  font-size: 0.72rem;
  color: var(--ink-soft);
}

.house-feed-author {
  font-weight: 700;
  color: var(--ink);
}

.house-feed-status {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.house-feed-body {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.4;
  white-space: pre-wrap;
}

.house-feed-reactions,
.house-feed-replies {
  margin: 0;
  font-size: 0.75rem;
  color: var(--ink-soft);
}

.house-feed-drafts {
  display: grid;
  gap: 0.35rem;
}

.house-feed-draft {
  padding: 0.45rem 0.55rem;
  border: 1px dashed rgba(15, 107, 92, 0.45);
  border-radius: 8px;
  background: rgba(15, 107, 92, 0.08);
  font-size: 0.82rem;
  line-height: 1.4;
  display: grid;
  gap: 0.4rem;
}

.house-feed-draft-body {
  margin: 0;
  white-space: pre-wrap;
  font: inherit;
}

.house-feed-draft-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.house-feed-affordances {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.house-feed-compose {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.house-feed-compose input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 0.86rem;
}

.messages {
  overflow: auto;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--line);
  background: var(--messages-bg);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 0;
}

.bubble {
  max-width: 88%;
  padding: 0.75rem 0.9rem;
  line-height: 1.45;
  font-size: 0.98rem;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  animation: bubble-in 280ms ease both;
}
.msg-row.is-restored .bubble,
.knowing-log .bubble {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .bubble { animation: none; }
}

@keyframes bubble-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.bubble.user {
  align-self: flex-end;
  background: var(--bubble-user);
  border: 1px solid rgba(15, 107, 92, 0.18);
}

[data-theme="dark"] .bubble.user {
  border-color: rgba(61, 186, 163, 0.28);
}

.bubble.zana {
  align-self: flex-start;
  background: var(--bubble-zana);
  border: 1px solid var(--line);
}

.bubble.system {
  align-self: center;
  color: var(--ink-soft);
  font-size: 0.85rem;
  background: transparent;
  border: 0;
  padding: 0.2rem;
}

.thinking-status {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  max-width: 92%;
  margin: 0.15rem 0 0.35rem;
  padding: 0.15rem 0.1rem;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.35;
  animation: bubble-in 220ms ease both;
}

.thinking-status .thinking-mark {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  opacity: 0.55;
  animation: thinking-dot 1.1s ease-in-out infinite;
}

.thinking-status .thinking-copy {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.thinking-status .thinking-label {
  font-style: italic;
}

.thinking-status .thinking-detail {
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.3;
  opacity: 0.78;
}

@keyframes thinking-dot {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

.compose {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.4rem;
  flex-shrink: 0;
  padding: 0.35rem 0.4rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--input-bg);
  box-shadow: none;
}

.compose-shell {
  position: relative;
  min-width: 0;
  display: grid;
}

.compose-expand {
  position: absolute;
  top: 0.1rem;
  right: 0.1rem;
  z-index: 2;
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-strong);
  color: var(--ink-soft);
  font-size: 0.75rem;
  line-height: 1;
  cursor: ns-resize;
  padding: 0;
  display: inline-grid;
  place-items: center;
}

.compose-expand[hidden] {
  display: none !important;
}

.compose textarea {
  resize: none;
  min-height: 1.7rem;
  max-height: none;
  width: 100%;
  border: none;
  background: transparent;
  padding: 0.35rem 1.6rem 0.35rem 0.3rem;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--ink);
  overflow-y: auto;
}

.compose textarea:focus {
  outline: none;
}

.compose-tools {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}

.compose-send[data-mode="cancel"] {
  background: #8a3b3b;
  border-color: #8a3b3b;
}

.compose-send[data-mode="busy"] {
  opacity: 0.85;
}

.attach-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.35rem;
}

.attach-chips[hidden] {
  display: none !important;
}

.attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-strong);
  font-size: 0.72rem;
  color: var(--ink);
}

.attach-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 12rem;
}

.attach-chip-remove {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0 0.1rem;
}

.attach-notice {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  color: var(--ink-soft);
}

.attach-notice[hidden] {
  display: none !important;
}

.edit-mode-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.65rem;
  margin-bottom: 0.35rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent, #1ec8a5) 16%, transparent);
  color: var(--ink);
  font-size: 0.88rem;
}
.edit-mode-banner[hidden] { display: none !important; }
.msg-attach-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.45rem;
}
.msg-attach-chip {
  font-size: 0.75rem;
  opacity: 0.9;
}

.attach-menu {
  position: absolute;
  left: 0.4rem;
  bottom: calc(100% + 0.35rem);
  z-index: 6;
  min-width: 15rem;
  max-width: min(22rem, 92vw);
  padding: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-strong);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

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

.attach-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  padding: 0.55rem 0.5rem;
  border-radius: 8px;
  cursor: pointer;
}

.attach-menu-item:hover {
  background: rgba(15, 107, 92, 0.12);
}

.attach-menu-note {
  margin: 0.15rem 0.35rem 0.25rem;
  font-size: 0.68rem;
  color: var(--muted);
  line-height: 1.35;
}

.drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: rgba(6, 12, 10, 0.72);
  border: 2px dashed rgba(61, 186, 163, 0.7);
  pointer-events: none;
}

.drop-overlay[hidden] {
  display: none !important;
}

.drop-overlay-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: #f7fffc;
}

.drop-overlay-sub {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: rgba(247, 255, 252, 0.75);
}

.msg-row {
  display: grid;
  gap: 0.25rem;
  animation: bubble-in 280ms ease both;
}

.msg-row.user {
  justify-items: end;
}

.msg-row.zana {
  justify-items: start;
}

.msg-row .bubble {
  animation: none;
}

.msg-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.25rem;
  opacity: 0;
  transition: opacity 120ms ease;
}

.msg-row.user .msg-meta {
  justify-content: flex-end;
}

.msg-row:hover .msg-meta,
.msg-row:focus-within .msg-meta,
.msg-row.is-open .msg-meta {
  opacity: 1;
}

.msg-time {
  font-size: 0.65rem;
  color: var(--muted);
}

.msg-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

.msg-action {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 0.78rem;
  line-height: 1;
  padding: 0.2rem 0.28rem;
  border-radius: 6px;
}

.msg-action:hover,
.msg-action[aria-pressed="true"] {
  background: rgba(15, 107, 92, 0.12);
  color: var(--accent-deep);
}

.msg-more-btn {
  display: none;
}

@media (max-width: 980px) {
  .msg-meta {
    opacity: 1;
  }
  .msg-more-btn {
    display: inline-grid;
  }
  .msg-row.user .msg-actions-desktop {
    display: none;
  }
  .msg-row.user.is-open .msg-actions-desktop {
    display: inline-flex;
  }
}

/* Personal mobile utilities open below the fixed top navigation, inside the
   workspace's clipped viewport, so the actions remain visible on phones. */
@media (max-width: 980px) {
  #workspace.workspace[data-product="personal"] > #mobile-navigation {
    position: relative;
    z-index: 200;
    overflow: visible;
  }

  #workspace.workspace[data-product="personal"] #mobile-menu {
    position: relative;
    z-index: 201;
    overflow: visible;
  }

  #workspace.workspace[data-product="personal"] #mobile-menu[open] > .mobile-menu-panel {
    position: absolute;
    top: calc(100% + 0.65rem);
    right: 0;
    bottom: auto;
    left: auto;
    width: min(18rem, calc(100vw - 1.4rem));
    max-height: min(70dvh, 34rem);
    overflow: auto;
    z-index: 202;
  }
}

.history-search-status {
  margin: 0.3rem 0 0;
  color: var(--ink-soft);
  font-size: 0.74rem;
  line-height: 1.35;
}

.compose-status {
  margin: 0;
  min-height: 0;
  font-size: 0.68rem;
  font-weight: 650;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.compose-status:empty {
  display: none;
}

.compose-status.is-live {
  color: var(--accent-deep);
}

.workspace-member-editor { margin: 0.75rem 0; padding-top: 0.65rem; border-top: 1px solid var(--line); }
.workspace-member-editor h3 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.workspace-member-row { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 0.6rem; padding: 0.45rem 0; border-bottom: 1px solid var(--line); }
.workspace-member-row > span { flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; }
.workspace-member-row button { flex: 0 0 auto; }
.workspace-str-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem 0.7rem; }
.workspace-str-roles label { display: flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; }
.workspace-str-roles input { width: auto; }
@media (max-width: 620px) { .workspace-str-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.compose-tool {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--input-bg);
  color: var(--ink);
  cursor: pointer;
}

#vault-tool-btn {
  color: var(--accent-deep);
  border-color: rgba(15, 107, 92, 0.35);
}

.compose-tool[aria-expanded="true"],
.compose-tool.is-on {
  color: #f7fffc;
  background: var(--accent);
  border-color: var(--accent);
}

.compose-send {
  margin-top: 0 !important;
  width: auto !important;
  min-width: 3.6rem;
  padding: 0.4rem 0.7rem !important;
  font-size: 0.82rem;
  border-radius: 999px !important;
}

.composer-dock {
  position: relative;
  display: grid;
  gap: 0.45rem;
  flex-shrink: 0;
  padding-top: 0.35rem;
}

.composer-flyout {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 0.35rem);
  z-index: 40;
  display: grid;
  gap: 0.45rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow);
  max-height: min(52vh, 22rem);
  overflow: auto;
}

.current-work-card {
  display: grid;
  gap: 0.58rem;
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-strong);
}

.current-work-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1.3;
}

.current-work-card > .current-work-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  min-height: 2rem;
  list-style: none;
  cursor: pointer;
}
.current-work-card > .current-work-summary::-webkit-details-marker { display: none; }
.current-work-card > .current-work-summary::before {
  content: "";
  width: 0.48rem;
  height: 0.48rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
}
.current-work-card > .current-work-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
.current-work-compact-name { font-weight: 700; white-space: nowrap; }
.current-work-status {
  flex: 0 0 auto;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 0.68rem;
}
.current-work-status[data-status="paused"] { background: var(--line); color: var(--ink-soft); }
.current-work-compact-notice {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.current-work-details { display: grid; gap: 0.58rem; padding-top: 0.65rem; }

.current-work-line {
  display: grid;
  grid-template-columns: minmax(6rem, 0.36fr) minmax(0, 1fr);
  gap: 0.65rem;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.current-work-line strong { color: var(--ink-soft); font-weight: 600; }
.current-work-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; padding-top: 0.25rem; }
.current-work-action-status { min-height: 1em; margin: 0; color: var(--ink-soft); font-size: 0.74rem; }

.composer-flyout[hidden] {
  display: none !important;
}

.composer-flyout-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

.vault-bar {
  display: none;
}
.vault-bar[hidden] { display: none !important; }
.vault-bar-status {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.vault-bar-status.is-unlocked { color: var(--accent-deep); font-weight: 600; }
.vault-bar-setup,
.vault-bar-actions {
  display: grid;
  gap: 0.4rem;
}
.vault-bar-setup[hidden],
.vault-bar-actions[hidden] { display: none !important; }
.vault-bar-actions {
  grid-template-columns: 1fr auto;
  align-items: center;
}
.vault-bar-setup input,
.vault-bar-actions input {
  width: 100%;
  min-width: 0;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 0.85rem;
  background: var(--input-bg);
  color: var(--ink);
}
.vault-bar-btn {
  margin-top: 0 !important;
  width: 100% !important;
  padding: 0.45rem 0.75rem !important;
  font-size: 0.85rem !important;
}
.vault-bar-actions .ghost {
  width: auto;
}
.vault-bar-note {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted);
}
.core-files-panel { border-top: 1px solid var(--line); margin-top: .75rem; padding-top: .75rem; display: flex; flex-direction: column; gap: .45rem; max-height: 72vh; overflow: hidden; }
.core-files-panel[hidden] { display: none !important; }
.core-files-panel h2, .core-files-panel h3 { margin: 0; }
.core-files-head { flex: 0 0 auto; }
.core-files-head .sheet-close-btn { float: right; }
.core-files-browser { display: flex; flex-direction: column; gap: .7rem; min-height: 0; overflow: auto; }
.core-files-toolbar { display: grid; gap: .6rem; flex: 0 0 auto; }
.core-files-search { width: 100%; min-height: 2.65rem; border: 1px solid var(--line); border-radius: 14px; padding: .62rem .8rem; background: var(--input-bg); color: var(--ink); font: inherit; }
.core-files-filter-strip { display: flex; gap: .42rem; overflow-x: auto; padding: .05rem 0 .2rem; scrollbar-width: none; }
.core-files-filter-strip::-webkit-scrollbar { display: none; }
.core-files-filter { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; padding: .46rem .72rem; background: var(--input-bg); color: var(--ink-soft); font: inherit; font-size: .78rem; cursor: pointer; white-space: nowrap; }
.core-files-filter.is-active { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); background: color-mix(in srgb, var(--accent) 12%, var(--input-bg)); }
.core-files-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.core-files-primary-actions { justify-content: flex-end; }
.core-files-status { margin: 0; min-height: 1.2em; }
.core-files-list { display: grid; gap: .55rem; min-height: 0; }
.core-file-card { display: grid; grid-template-columns: 4.5rem minmax(0,1fr) auto; gap: .7rem; align-items: center; padding: .65rem; border: 1px solid var(--line); border-radius: 14px; background: var(--card-bg); }
.core-file-visual { width: 4.5rem; height: 4.5rem; border: 1px solid var(--line); border-radius: 11px; padding: .35rem; overflow: hidden; background: var(--input-bg); color: var(--ink-soft); font: inherit; font-size: .72rem; font-weight: 650; cursor: pointer; }
.core-file-visual img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 7px; }
.core-file-info { min-width: 0; display: grid; gap: .18rem; }
.core-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.core-file-description { margin: 0; color: var(--ink-soft); font-size: .76rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.core-file-description:empty { display: none; }
.core-file-meta { color: var(--muted); font-size: .7rem; }
.core-file-card-actions { display: flex; flex-direction: column; align-items: stretch; gap: .3rem; }
.core-file-card-actions button { white-space: nowrap; }
.core-files-list.is-image-grid { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.core-files-list.is-image-grid .core-file-card { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; }
.core-files-list.is-image-grid .core-file-visual { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.core-files-list.is-image-grid .core-file-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.core-files-list.is-image-grid .core-file-card-actions { flex-direction: row; flex-wrap: wrap; }
.core-files-empty { padding: 1rem .25rem; text-align: center; }
.core-file-preview-dialog { width: min(54rem, calc(100vw - 1rem)); max-height: 90dvh; }
.core-file-preview-body { min-height: 12rem; max-height: 72dvh; overflow: auto; display: grid; gap: .7rem; padding-top: .7rem; }
.core-file-preview-image { display: block; max-width: 100%; max-height: 68dvh; margin: 0 auto; object-fit: contain; border-radius: 12px; }
.core-file-preview-frame { width: 100%; height: 68dvh; border: 1px solid var(--line); border-radius: 10px; background: var(--input-bg); }
.core-file-preview-block { border: 1px solid var(--line); border-radius: 10px; padding: .7rem; background: var(--card-bg); }
.core-file-preview-block strong { display: block; margin-bottom: .4rem; color: var(--ink-soft); font-size: .72rem; }
.core-file-preview-block pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .82rem; line-height: 1.45; color: var(--ink); }
.chat-durable-files { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .45rem; }
.chat-durable-image { width: 10rem; height: 10rem; border: 1px solid var(--line); border-radius: 12px; padding: 0; overflow: hidden; background: var(--input-bg); cursor: zoom-in; }
.chat-durable-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-durable-file-chip, .chat-durable-file-locked { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bubble.system.vault-status-muted {
  font-size: 0.72rem;
  color: var(--muted);
  opacity: 0.85;
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
  background: transparent;
  border: none;
  box-shadow: none;
}

.voice-bar.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.workspace.desktop-sheet-open .sheet-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 4;
  background: rgba(0, 0, 0, 0.45);
}

.workspace.desktop-sheet-open[data-desktop-sheet="evidence"] .rail-left,
.workspace.desktop-sheet-open[data-desktop-sheet="past"] .rail-left,
.workspace.desktop-sheet-open[data-desktop-sheet="current"] .rail-right,
.workspace.desktop-sheet-open[data-desktop-sheet="whole"] .rail-right {
  display: contents !important;
}

.workspace.desktop-sheet-open .rail .side {
  display: none !important;
}

.workspace.desktop-sheet-open[data-desktop-sheet="evidence"] .panel-evidence,
.workspace.desktop-sheet-open[data-desktop-sheet="past"] .panel-past,
.workspace.desktop-sheet-open[data-desktop-sheet="current"] .panel-current,
.workspace.desktop-sheet-open[data-desktop-sheet="work"] .panel-current-work,
.workspace.desktop-sheet-open[data-desktop-sheet="whole"] .panel-whole {
  display: flex !important;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: min(440px, calc(100vw - 2rem));
  height: min(72dvh, 640px);
  max-height: 72dvh;
  border-radius: 8px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--panel-strong);
  padding: 0.9rem;
  animation: rise 240ms ease both;
}

.workspace.desktop-sheet-open[data-desktop-sheet="files"] .rail-right {
  display: contents !important;
}
.workspace.desktop-sheet-open[data-desktop-sheet="files"] .rail .panel-files {
  display: flex !important;
  position: fixed;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 5; width: min(440px, calc(100vw - 2rem));
  height: min(72dvh, 640px); max-height: 72dvh;
  border-radius: 8px; border: 1px solid var(--line);
  box-shadow: var(--shadow); background: var(--panel-strong); padding: 0.9rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

[hidden] { display: none !important; }

@media (max-width: 640px) {
  .core-file-card { grid-template-columns: 3.7rem minmax(0,1fr); align-items: start; }
  .core-file-visual { width: 3.7rem; height: 3.7rem; }
  .core-file-card-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .core-files-primary-actions { justify-content: flex-start; }
  .core-file-preview-dialog { width: calc(100vw - .5rem); max-height: 94dvh; padding: .8rem; }
  .core-file-preview-frame { height: 72dvh; }
  .chat-durable-image { width: min(12rem, 60vw); height: min(12rem, 60vw); }
}

@media (max-width: 980px) {
  .shell {
    place-items: stretch;
    padding: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  .workspace {
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
    margin: 0;
    gap: 0;
    padding: 0;
    /* minmax(0,1fr) — plain 1fr uses min-content and tabs blow past the viewport */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "tabs"
      "chat";
    border: 0;
    box-shadow: none;
    background: transparent;
    overflow: hidden;
  }

  .desktop-panel-tabs,
  .rail-handle,
  #swap-rails {
    display: none !important;
  }

  .mobile-tabs {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    max-width: 100%;
    padding: 0.55rem 0.65rem;
    padding-top: calc(0.55rem + env(safe-area-inset-top, 0px));
    background: var(--panel-strong);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(14px);
    z-index: 2;
    grid-area: tabs;
  }

  .mobile-tabs-scroll {
    display: flex;
    flex: 1;
    min-width: 0;
    gap: 0.3rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .mobile-tabs-scroll::-webkit-scrollbar {
    display: none;
  }

  .mobile-tab {
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.45rem 0.55rem;
    border-radius: 2px;
    cursor: pointer;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .mobile-tab.is-active {
    color: var(--accent-deep);
    background: var(--accent-soft);
    border-color: var(--accent);
  }

  .mobile-signout {
    padding: 0.45rem 0.35rem;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .desktop-signout {
    display: none;
  }

  .chat-tools #theme-toggle {
    display: none;
  }

  .chat {
    display: none;
    grid-area: chat;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    padding: 0.75rem 0.8rem calc(0.8rem + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
  }

  .rail,
  .side {
    display: none !important;
  }

  .workspace[data-mobile-tab="chat"] .chat {
    display: grid;
  }

  .workspace[data-mobile-tab="evidence"] .rail-left,
  .workspace[data-mobile-tab="past"] .rail-left,
  .workspace[data-mobile-tab="current"] .rail-right,
  .workspace[data-mobile-tab="work"] .rail-right,
  .workspace[data-mobile-tab="whole"] .rail-right {
    display: contents !important;
  }

  .workspace[data-mobile-tab="evidence"] .panel-evidence,
  .workspace[data-mobile-tab="past"] .panel-past,
  .workspace[data-mobile-tab="current"] .panel-current,
  .workspace[data-mobile-tab="work"] .panel-current-work,
  .workspace[data-mobile-tab="whole"] .panel-whole {
    display: flex !important;
    grid-area: chat;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    background: var(--panel);
    padding: 0.85rem 0.85rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
  }

  .workspace[data-mobile-tab="files"] .rail-right { display: contents !important; }
  .workspace[data-mobile-tab="files"] .panel-files {
    display: flex !important; grid-area: chat; flex-direction: column;
    min-height: 0; height: 100%; max-height: none; border: 0;
    border-radius: 0; box-shadow: none; backdrop-filter: none;
    background: var(--panel); padding: 0.85rem 0.85rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
  }

/* Voice docks at the bottom of the screen without crowding the History panel. */
  .voice-mobile-host {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    pointer-events: none;
  }

  .voice-mobile-host .panel-voice:not([hidden]) {
    display: block !important;
    pointer-events: auto;
    margin: 0;
    padding: 0.35rem 0.55rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 14px 14px 0 0;
    background: var(--panel-strong);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(14px);
  }

  .voice-mobile-host .voice-panel-top {
    margin-bottom: 0.2rem;
  }

  .voice-mobile-host .voice-panel-title {
    font-size: 0.75rem;
  }

  .voice-mobile-host .voice-status-line {
    font-size: 0.6rem;
  }

  .workspace.voice-dock-open .chat,
  .workspace.voice-dock-open .panel-evidence,
  .workspace.voice-dock-open .panel-past,
  .workspace.voice-dock-open .panel-current,
  .workspace.voice-dock-open .panel-whole {
    /* The measured dock height already includes its safe-area padding. */
    padding-bottom: var(--voice-dock-height, 4rem) !important;
  }

  .sheet-backdrop {
    display: none !important;
  }

  .chat-top .brand-sm {
    font-size: 1.45rem;
  }

  .messages {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  .compose {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.4rem;
  }

  .compose textarea {
    min-height: 1.7rem;
    max-height: 4.5rem;
    font-size: 16px;
  }

  .compose-send {
    min-height: 2rem;
    padding: 0.4rem 0.7rem;
  }

  .side-head p {
    margin-bottom: 0.65rem;
  }

  .profile-block {
    flex: 1 1 auto;
  }
}

@media (max-width: 640px) {
  .panel {
    width: min(100%, 100vw);
    margin: 0.75rem;
    padding: 1.5rem 1.15rem 1.25rem;
  }

  .brand {
    font-size: clamp(2.2rem, 12vw, 2.8rem);
    margin-bottom: 1rem;
  }

  .headline {
    font-size: 1.2rem;
  }

  .bubble {
    max-width: 92%;
    font-size: 0.95rem;
  }
}

/* Keep chat chrome and workspace pills inside narrow phone viewports. */
@media (max-width: 640px) {
  html, body, .shell, .workspace, .chat { min-width: 0; max-width: 100%; }
  html, body { overflow-x: hidden; }
  .chat-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; min-width: 0; }
  .brand-row { min-width: 0; max-width: 100%; flex-wrap: wrap; gap: 0.4rem; }
  .mode-switch { min-width: 0; max-width: 100%; flex: 1 1 100%; flex-wrap: wrap; gap: 0.25rem; }
  .mode-pill { max-width: 100%; padding: 0.3rem 0.55rem; font-size: 0.72rem; overflow-wrap: anywhere; }
  .ad-space-circles { min-width: 0; max-width: 100%; flex-wrap: wrap; margin-left: 0; }
  .chat-tools { min-width: 0; max-width: 100%; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; }
  .session-status { min-width: 0; overflow-wrap: anywhere; }
  .messages, .msg-row, .bubble { min-width: 0; max-width: 100%; }
  .bubble { overflow-wrap: break-word; }
  .compose { min-width: 0; grid-template-columns: minmax(0, 1fr) auto; }
  .compose-shell { min-width: 0; }
  .compose-tools { min-width: 0; gap: 0.2rem; }
  .compose-tool { width: 2rem; height: 2rem; }
  .composer-options-row { align-items: center; flex-direction: row; gap: 0.35rem; }
  .vault-inline-state { flex: 1 1 auto; }
  .chat-tools { overflow: visible; display: grid; grid-template-columns: repeat(4, minmax(2.4rem, auto)); justify-content: end; }
  .chat-tools .tool-btn { min-height: 2.5rem; }
  .brand-row { grid-row: 1; }
  .chat-tools { grid-row: 2; }
  .mode-switch { gap: 0.35rem; }
  .mode-pill { min-height: 2.3rem; }
  input, select, textarea, button { font-size: max(16px, 1em); }
}

.chat-artifact-card {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.65rem;
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-strong);
  overflow-wrap: anywhere;
}
.chat-artifact-card p { margin: 0; color: var(--ink-soft); font-size: 0.82rem; }
.chat-artifact-card button { justify-self: start; min-height: 2.5rem; }
.chat-artifact-card.is-error { color: var(--danger); }
.chat-artifact-preview { max-height: 18rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 0.65rem; margin: 0; border: 1px solid var(--line); border-radius: 8px; }
/* Proposal previews show the document's contents, never its transport schema. */
.file-proposal-preview { display: grid; gap: 1rem; min-width: 0; }
.file-proposal-preview p { white-space: pre-wrap; margin: 0; line-height: 1.5; }
.file-proposal-note { color: var(--ink-soft); font-size: .85rem; }
.file-proposal-slide { display: grid; gap: .85rem; padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: 12px; background: var(--panel-strong); overflow-wrap: anywhere; }
.file-proposal-slide h4 { margin: 0; font-size: clamp(1.2rem, 3vw, 1.7rem); line-height: 1.2; }
.file-proposal-slide h5 { margin: 0 0 .6rem; font-size: 1.05rem; }
.file-proposal-slide-number { color: var(--ink-soft); font-size: .8rem; }
.file-proposal-subtitle { color: var(--ink-soft); }
.file-proposal-slide ul { margin: 0; padding-left: 1.3rem; line-height: 1.5; }
.file-proposal-columns, .file-proposal-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: 1.2rem; margin: 0; }
.file-proposal-columns section { padding: 1rem; border: 1px solid var(--line); border-radius: 8px; }
.file-proposal-metrics dt { color: var(--ink-soft); }
.file-proposal-metrics dd { margin: .3rem 0; font-size: 2rem; font-weight: 700; }
.file-proposal-timeline { display: grid; gap: 1rem; margin: 0; padding-left: 1.3rem; }
.file-proposal-table { min-width: 0; overflow-x: auto; }
.file-proposal-table table { border-collapse: collapse; width: 100%; text-align: left; }
.file-proposal-table caption { text-align: left; padding-bottom: .6rem; font-weight: 600; }
.file-proposal-table th, .file-proposal-table td { border-bottom: 1px solid var(--line); padding: .6rem; }
.chat-artifact-detail { display: grid; gap: 1rem; }
.chat-artifact-detail > .chat-file-status { white-space: normal; overflow: visible; }
.chat-artifact-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.voice-playback-fallback { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-top: 0.55rem; color: var(--ink-soft); font-size: 0.82rem; }
.voice-playback-fallback button { min-height: 2.5rem; }

@media (min-width: 981px) {
  .mobile-tabs {
    display: none !important;
  }

  .mobile-signout {
    display: none !important;
  }
}

/* === Workspace product chrome === */
.workspace[data-product="ad"] .personal-chrome,
.workspace[data-product="ad-admin"] .personal-chrome {
  display: none !important;
}

.workspace[data-product="personal"] .ad-chrome {
  display: none !important;
}

/* Organization Workspaces keep Zana chat fixed in the center. Their safe,
   approved manifest owns the two side rails. */
.workspace[data-product="workspace"],
.workspace[data-product="workspace-admin"] {
  --rail-left: minmax(190px, 22%);
  --rail-right: minmax(220px, 24%);
  grid-template-columns: var(--rail-left) 6px minmax(0, 1fr) 6px var(--rail-right);
  grid-template-areas:
    "tabs tabs tabs tabs tabs"
    "left hl chat hr right";
}
.workspace[data-product="workspace"] .rail-left,
.workspace[data-product="workspace"] .rail-right,
.workspace[data-product="workspace"] .rail-handle,
.workspace[data-product="workspace"] .desktop-panel-tabs,
.workspace[data-product="workspace"] .mobile-tabs,
.workspace[data-product="workspace"] .personal-chrome,
.workspace[data-product="workspace"] .ad-chrome,
.workspace[data-product="workspace-admin"] .rail-left,
.workspace[data-product="workspace-admin"] .rail-right,
.workspace[data-product="workspace-admin"] .rail-handle,
.workspace[data-product="workspace-admin"] .desktop-panel-tabs,
.workspace[data-product="workspace-admin"] .mobile-tabs,
.workspace[data-product="workspace-admin"] .personal-chrome,
.workspace[data-product="workspace-admin"] .ad-chrome,
.workspace[data-product="workspace-admin"] .org-admin-mobile-details {
  display: none;
}
.workspace[data-product="workspace"] .rail-left,
.workspace[data-product="workspace"] .rail-right,
.workspace[data-product="workspace-admin"] .rail-left,
.workspace[data-product="workspace-admin"] .rail-right { display: flex; min-width: 0; }
.workspace[data-product="workspace"] .rail-handle,
.workspace[data-product="workspace-admin"] .rail-handle { display: block; }
.workspace[data-product="workspace"][data-left-visible="0"],
.workspace[data-product="workspace-admin"][data-left-visible="0"] { --rail-left: 0px; }
.workspace[data-product="workspace"][data-right-visible="0"],
.workspace[data-product="workspace-admin"][data-right-visible="0"] { --rail-right: 0px; }
.workspace[data-product="workspace"][data-left-visible="0"] .rail-left,
.workspace[data-product="workspace-admin"][data-left-visible="0"] .rail-left,
.workspace[data-product="workspace"][data-left-visible="0"] .rail-handle-left,
.workspace[data-product="workspace-admin"][data-left-visible="0"] .rail-handle-left,
.workspace[data-product="workspace"][data-right-visible="0"] .rail-right,
.workspace[data-product="workspace-admin"][data-right-visible="0"] .rail-right,
.workspace[data-product="workspace"][data-right-visible="0"] .rail-handle-right,
.workspace[data-product="workspace-admin"][data-right-visible="0"] .rail-handle-right { display: none; }
.workspace-experience-rail { min-height: 0; height: 100%; overflow: hidden; }
.workspace-experience-rail:not([hidden]) { display: flex; flex-direction: column; gap: .5rem; }
.workspace-experience-panel { min-height: 0; flex: 1; overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: .85rem; }
.ws-group-panel { display: flex; flex-direction: column; gap: .45rem; }
.ws-thread { flex: 1 1 auto; min-height: 8rem; overflow: auto; }
.ws-msg { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; padding: .4rem 0; border-top: 1px solid var(--line); }
.ws-msg.is-mine { align-items: flex-end; }
.ws-msg p { margin: 0; }
.ws-reactions { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.ws-reactions button, .ws-react-menu summary { border: 1px solid var(--line); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: .8rem; padding: .05rem .4rem; cursor: pointer; }
.ws-react-menu { position: relative; }
#ws-group-search, #ws-audience-query { width: 100%; box-sizing: border-box; margin: 0; }
/* AD keeps Copy; Drive attachments belong to Personal conversations. */
#workspace.workspace[data-product="workspace"] .sr-tray .sr-tray-label,
#workspace.workspace[data-product="workspace"] .sr-tray .sr-tray-add,
#workspace.workspace[data-product="workspace"] .sr-tray .sr-chip { display: none !important; }
.workspace-experience-panel[data-slot="full"] { flex: 1; }
.workspace-experience-panel h2 { font-size: 1rem; margin: 0 0 .7rem; }
.workspace-experience-panel p { color: var(--ink-soft); font-size: .88rem; }
.workspace-panel-list { display: flex; flex-direction: column; gap: .35rem; overflow-y: auto; }
.workspace-panel-list p { margin: 0; border-top: 1px solid var(--line); padding: .5rem 0; overflow-wrap: anywhere; }
.workspace-conversation-search { width: 100%; margin: 0 0 .65rem; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--ink); padding: .5rem .65rem; font: inherit; }
.workspace-panel-person { width: 100%; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--ink); padding: .55rem .65rem; font: inherit; cursor: pointer; }
.workspace-panel-person:hover { border-color: var(--accent); background: var(--accent-soft); }
.workspace-panel-person.is-unread { border-color: var(--accent); font-weight: 650; }
.workspace-panel-person.is-on { border-color: var(--accent); background: var(--accent-soft); }
.workspace-panel-person { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.workspace-feature-badge { min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 999px; background: #d35b50; color: #fff; font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.chat.is-match-open { position: relative; }
.ws-match-board { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; gap: .55rem; padding: .8rem; background: var(--panel); overflow: hidden; }
.ws-match-board .cal-grid-wrap { flex: 1; }
.ws-match-board .cal-bar { justify-content: space-between; }
.ws-match-card { border: 1px solid #d35b50; border-radius: 12px; padding: .7rem .8rem; background: color-mix(in srgb, #d35b50 10%, var(--panel)); }
.ws-match-card p { margin: 0 0 .45rem; color: var(--ink); }
.workspace-capsule-create { width: min(100%, 48rem); margin: 1rem auto; padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.workspace-capsule-create h3, .workspace-capsule-create p { margin-top: 0; }
.workspace-capsule-create form { display: grid; gap: .6rem; }
.workspace-capsule-create input, .workspace-capsule-create textarea { width: 100%; min-width: 0; padding: .7rem; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-strong); color: var(--ink); font: inherit; }
.workspace-capsule-create textarea { min-height: 5rem; resize: vertical; }
.workspace-capsule-create form button { justify-self: start; }
.workspace-route-recipient { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; border-top: 1px solid var(--line); padding: .55rem 0; }
.workspace-route-recipient > span:nth-of-type(1) { flex: 1 1 12rem; }
.workspace-route-recipient select { max-width: 10rem; }
.workspace-route-priority { flex: 0 0 auto !important; font-size: .78rem !important; }
.workspace-route-recipient button { padding: .3rem .5rem; font-size: .8rem; }
.workspace-page-nav { display: flex; align-items: center; gap: .35rem; }
.workspace-page-nav button { border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); padding: .55rem .9rem; font: inherit; font-weight: 650; cursor: pointer; }
.workspace-page-nav button.is-active { background: var(--accent-soft); color: var(--accent-deep); }
.workspace[data-product="workspace"] #workspace-page-nav,
.workspace[data-product="workspace-admin"] #workspace-page-nav { display: flex; }
.workspace[data-product="workspace"] #chat,
.workspace[data-product="workspace-admin"] #chat {
  grid-area: chat;
  min-width: 0;
  width: 100%;
}
.workspace[data-product="workspace"] .workspace-nav-shell,
.workspace[data-product="workspace-admin"] .workspace-nav-shell { display: flex; align-items: center; gap: .65rem; }
.workspace[data-product="workspace-admin"] #workspace-page-nav { display: none !important; }
.workspace[data-product="workspace-admin"] #session-status,
.workspace[data-product="workspace-admin"] #workspace-builder-memory-panel { display: none !important; }
.workspace-admin-heading {
  flex: 0 0 auto;
  padding: .8rem 1rem .65rem;
  border-bottom: 1px solid var(--line);
}
.workspace-admin-heading[hidden] { display: none !important; }
.workspace-admin-heading > p, .workspace-admin-rail-heading > p {
  margin: 0;
  color: var(--accent-deep);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.workspace-admin-heading h1 { margin: .25rem 0; font-size: clamp(1.25rem, 2vw, 1.7rem); }
.workspace-admin-heading span { color: var(--ink-soft); font-size: .9rem; }
.workspace-admin-rail-heading { flex: 0 0 auto; padding: .75rem .8rem; border-bottom: 1px solid var(--line); }
.workspace-admin-rail-heading h2 { margin: .25rem 0 0; font-size: 1rem; }
.workspace-admin-card { flex: 0 0 auto; margin: .5rem; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.workspace-admin-card h2 { margin: 0 0 .35rem; font-size: .93rem; }
.workspace-admin-card p, .workspace-admin-card li { color: var(--ink-soft); font-size: .82rem; line-height: 1.4; overflow-wrap: anywhere; }
.workspace-admin-card p { margin: .2rem 0; }
.workspace-admin-card ul { margin: 0; padding-left: 1.2rem; }
.workspace-admin-card li + li { margin-top: .2rem; }
.workspace-admin-import-review { border-top: 1px solid var(--line); padding: .55rem 0; }
.workspace-admin-import-review h3 { margin: 0 0 .25rem; font-size: .82rem; overflow-wrap: anywhere; }
.workspace-admin-import-review ul { max-height: 9rem; overflow: auto; margin: .35rem 0; padding-left: 1.1rem; }
.workspace-admin-import-review li { font-size: .76rem; }
.workspace-admin-import-review button { width: 100%; margin-top: .4rem; }
.workspace[data-product="workspace-admin"] .rail-left,
.workspace[data-product="workspace-admin"] .rail-right { flex-direction: column; gap: 0; overflow: auto; }
.workspace[data-product="workspace-admin"] #workspace-experience-left,
.workspace[data-product="workspace-admin"] #workspace-experience-right { height: auto; flex: 1 1 auto; overflow: auto; }
.workspace[data-product="workspace-admin"] #workspace-experience-left:not([hidden]),
.workspace[data-product="workspace-admin"] #workspace-experience-right:not([hidden]) { display: flex; flex-direction: column; }
.workspace[data-product="workspace-admin"] #workspace-admin-tools,
.workspace[data-product="workspace-admin"] #workspace-roles-panel,
.workspace[data-product="workspace-admin"] #workspace-import-panel { max-height: none; overflow: visible; }
.workspace[data-product="workspace-admin"] #workspace-admin-tools[hidden] { display: none !important; }
.workspace[data-product="workspace-admin"] #org-covenant-panel { display: grid; grid-template-columns: minmax(0, 1fr); }
.workspace[data-product="workspace-admin"] .org-governance-lanes { grid-template-columns: minmax(0, 1fr); }
.workspace[data-product="workspace-admin"] .org-governance-lanes > section { min-width: 0; }
.workspace-admin-load-error { margin: .75rem; color: var(--danger); }
.workspace-admin-empty-note { margin: .75rem; color: var(--ink-soft); font-size: .88rem; line-height: 1.45; }
.workspace[data-product="workspace"] #messages,
.workspace[data-product="workspace-admin"] #messages {
  max-height: none;
  flex: 1;
}
.workspace-empty-state {
  align-self: center;
  width: min(100%, 52rem);
  margin-block: auto;
}
.workspace-empty-state .bubble {
  max-width: 100%;
  border-color: var(--line);
  background: var(--panel);
}

/* Personal and regular Workspace chrome: one compact destination picker followed by its pages. */
.workspace:not([data-product="ad"]):not([data-product="ad-admin"]) .chat,
.workspace:not([data-product="ad"]):not([data-product="ad-admin"]) .chat-top,
.workspace:not([data-product="ad"]):not([data-product="ad-admin"]) .brand-row,
.workspace:not([data-product="ad"]):not([data-product="ad-admin"]) .workspace-nav-shell {
  min-width: 0;
  max-width: 100%;
}

.workspace:not([data-product="ad"]):not([data-product="ad-admin"]) .chat-top {
  flex-wrap: wrap;
}

.workspace:not([data-product="ad"]):not([data-product="ad-admin"]) .workspace-nav-shell {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  gap: 0.55rem;
}

.workspace:not([data-product="ad"]):not([data-product="ad-admin"]) .mode-switch {
  display: none !important;
}

.workspace[data-product="ad"] .workspace-picker,
.workspace[data-product="ad-admin"] .workspace-picker {
  display: none !important;
}

.workspace:not([data-product="ad"]):not([data-product="ad-admin"]) .workspace-picker {
  position: relative;
  order: 1;
  flex: 0 1 auto;
  min-width: 0;
}

.workspace:not([data-product="ad"]):not([data-product="ad-admin"]) .workspace-picker[hidden] {
  display: none !important;
}

.workspace:not([data-product="ad"]):not([data-product="ad-admin"]) .workspace-picker-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  max-width: min(16rem, 34vw);
  min-height: 2.4rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: var(--panel);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.workspace:not([data-product="ad"]):not([data-product="ad-admin"]) .workspace-picker-trigger::-webkit-details-marker {
  display: none;
}

.workspace-picker-trigger > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-picker-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: 90;
  display: grid;
  gap: 0.2rem;
  width: max-content;
  min-width: 12rem;
  max-width: min(20rem, calc(100vw - 2rem));
  max-height: min(60vh, 28rem);
  overflow: auto;
  padding: 0.4rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: var(--panel-strong);
  box-shadow: var(--shadow);
}

.workspace-picker:not([open]) .workspace-picker-menu {
  display: none;
}

.workspace-picker-item {
  width: 100%;
  min-width: 0;
  padding: 0.6rem 0.7rem;
  border: 0;
  border-radius: 0.55rem;
  color: var(--ink);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.workspace-picker-item:hover,
.workspace-picker-item.is-active {
  background: var(--accent-soft);
  color: var(--accent-deep);
}

.workspace[data-product="workspace"] #workspace-page-nav,
.workspace[data-product="workspace-admin"] #workspace-page-nav {
  order: 2;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.workspace[data-product="workspace"] #workspace-page-nav::-webkit-scrollbar,
.workspace[data-product="workspace-admin"] #workspace-page-nav::-webkit-scrollbar {
  display: none;
}

.workspace:not([data-product="ad"]):not([data-product="ad-admin"]) #messages {
  min-width: 0;
  min-height: 0;
}

@media (max-width: 640px) {
  .workspace:not([data-product="ad"]):not([data-product="ad-admin"]) .workspace-nav-shell {
    flex-wrap: wrap;
  }

  .workspace:not([data-product="ad"]):not([data-product="ad-admin"]) .workspace-picker-trigger {
    max-width: calc(100vw - 7rem);
  }

  .workspace[data-product="workspace"] #workspace-page-nav,
  .workspace[data-product="workspace-admin"] #workspace-page-nav {
    flex: 1 1 100%;
  }
}

/* The legacy center shell is only a DOM home for reusable Space panels.
   Persistent left navigation stays retired; the compact Space row drives the left dock. */
.workspace[data-product="ad"] #ad-nav,
.workspace[data-product="ad"] #ad-shell,
.workspace[data-product="ad-admin"] #ad-nav,
.workspace[data-product="ad-admin"] #ad-shell,
.workspace[data-product="ad"] .ws-dyn-space-icons,
.workspace[data-product="ad-admin"] .ws-dyn-space-icons {
  display: none !important;
}

.workspace[data-product="ad"] .personal-only-tab,
.workspace[data-product="ad-admin"] .personal-only-tab,
.workspace[data-product="ad"] .ad-only-tab,
.workspace[data-product="ad-admin"] .ad-only-tab {
  display: none !important;
}

.workspace[data-product="personal"] .ad-only-tab {
  display: none !important;
}

.workspace[data-product="ad"] #messages,
.workspace[data-product="ad-admin"] #messages {
  max-height: none;
  flex: 1;
}

.ad-space-circles {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.55rem;
  flex: 0 0 auto;
}

.ad-space-circles[hidden] {
  display: none !important;
}

.ad-space-circle {
  min-width: 1.85rem;
  height: 1.95rem;
  padding: 0 0.7rem !important;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

.ad-space-circle.is-active {
  background: #ffffff;
  color: #0b1210;
  border-color: #ffffff;
}

[data-theme="light"] .ad-space-circle.is-active {
  background: #14201c;
  color: #ffffff;
  border-color: #14201c;
}

.ad-space-dock {
  display: none;
  flex-direction: column;
  gap: 0.65rem;
  height: 100%;
  overflow: auto;
  padding: 0.75rem 0.65rem;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 2px;
}

.workspace[data-product="ad"][data-space-open] #ad-space-dock:not([hidden]),
.workspace[data-product="ad-admin"][data-space-open] #ad-space-dock:not([hidden]),
.workspace[data-product="workspace"][data-space-open] #ad-space-dock:not([hidden]),
.workspace[data-product="workspace-admin"][data-space-open] #ad-space-dock:not([hidden]) {
  display: flex !important;
}

.ad-space-dock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.ad-space-dock-head h2 {
  margin: 0;
  font-size: 0.95rem;
}

.ad-space-dock-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
  flex: 1;
}

.ad-capsule-card {
  border: 1px solid var(--line);
  background: var(--input-bg);
  padding: 0.65rem 0.7rem;
  border-radius: 2px;
}

.ad-capsule-card h3 {
  margin: 0 0 0.25rem;
  font-size: 0.9rem;
}

.ad-capsule-meta,
.ad-capsule-status {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.builder-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.55rem;
}

.connect-action-card { margin: .85rem 0; padding: 1rem; border: 1px solid var(--line, rgba(0,0,0,.16)); border-radius: 14px; background: var(--panel, rgba(255,255,255,.92)); display: grid; gap: .85rem; }
.connect-action-card > strong { font-size: 1.05rem; letter-spacing: -.01em; }
.connect-action-card > p { margin: 0; line-height: 1.5; color: var(--ink-soft); }
.connect-action-card label { display: grid; gap: .4rem; font-size: .82rem; font-weight: 600; }
.connect-action-card input, .connect-action-card textarea { width: 100%; box-sizing: border-box; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: 9px; background: var(--input-bg); color: var(--ink); font: inherit; line-height: 1.5; }
.connect-action-card input:focus, .connect-action-card textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 1px; }
.connect-action-card textarea { min-height: 13rem; resize: vertical; white-space: pre-wrap; }
.connect-action-card button { min-height: 2.75rem; border-radius: 999px; }
.connect-action-card button:disabled { opacity: .62; cursor: wait; }

.org-covenant-panel { display: grid; gap: .7rem; min-height: 0; overflow: auto; }
.org-covenant-details, .org-proposal-form, .org-governance-lanes > section { border: 1px solid var(--line); border-radius: 8px; background: var(--input-bg); padding: .7rem; }
.org-covenant-details summary { cursor: pointer; font-weight: 700; }
.org-covenant-details label, .org-proposal-form label { display: grid; gap: .25rem; margin: .55rem 0; font-size: .83rem; }
.org-covenant-details textarea, .org-proposal-form textarea, .org-proposal-form input { width: 100%; box-sizing: border-box; font: inherit; padding: .45rem; color: var(--ink); background: var(--panel); border: 1px solid var(--line); }
.org-governance-lanes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .55rem; align-items: start; }
.org-governance-lanes h3, .org-proposal-form h3 { margin: 0 0 .5rem; font-size: .95rem; }
.org-proposal-card { border: 1px solid var(--line); border-radius: 7px; padding: .6rem; margin: .45rem 0; overflow-wrap: anywhere; }
.org-proposal-card h4 { margin: 0 0 .3rem; }
.org-proposal-card p { font-size: .82rem; line-height: 1.4; }
.org-proposal-meta, .org-governance-note { color: var(--ink-soft); }
.org-proposal-preview { border-left: 3px solid var(--accent); padding-left: .5rem; }
.org-feedback-controls, .org-admin-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.org-feedback-controls button, .org-admin-actions button { font-size: .76rem; }
.workspace-ideas-open { align-self: flex-start; }

.workspace-admin-tools {
  flex: 0 0 auto;
  max-height: min(46vh, 520px);
  overflow: auto;
  margin: 0.35rem 0 0.55rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: var(--panel);
}
.workspace-admin-tools > summary {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.65rem 0.8rem;
  background: var(--panel);
  color: var(--ink);
  font-weight: 650;
  cursor: pointer;
}
.workspace-admin-tools #org-covenant-panel { display: block; }
.workspace-builder-stage {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.6rem;
  padding: 0.75rem;
  border: 1px solid var(--accent);
  border-radius: 0.65rem;
  background: var(--panel);
}
.workspace-builder-stage h3,
.workspace-builder-stage p { margin: 0; }
.workspace-admin-tools .org-governance-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
@media (max-width: 760px) {
  .workspace-admin-tools { max-height: 42vh; }
  .workspace-admin-tools .org-governance-lanes { grid-template-columns: 1fr; }
}
.workspace-ideas-panel { position: fixed; z-index: 50; inset: 12% max(5%, calc((100vw - 900px)/2)); max-height: 76vh; overflow: auto; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 12px 48px #0008; }
.workspace-ideas-panel[hidden] { display: none; }
.workspace-ideas-panel > header { display:flex; align-items:center; justify-content:space-between; }
@media (max-width: 760px) { .org-governance-lanes { grid-template-columns: 1fr; } .workspace-ideas-panel { inset: 5% 3%; max-height: 90vh; } }
.org-governance-side { display: none; min-height: 0; overflow: auto; }
.org-governance-side > header { padding: .6rem .7rem; border-bottom: 1px solid var(--line); }
.org-governance-side > header h2 { font-size: 1rem; margin: 0; }
.org-governance-side > header p { margin: .2rem 0 0; color: var(--ink-soft); font-size: .8rem; }
#org-lanes-target { padding: .45rem; overflow: auto; }
.workspace[data-product="ad-admin"] .org-governance-lanes { display: flex; flex-direction: column; }
.workspace[data-product="ad-admin"] .org-governance-lanes > section { width: 100%; box-sizing: border-box; }
.org-admin-mobile-details { display: none; }


.ad-nav {
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.65rem 0.45rem;
  height: 100%;
  overflow: auto;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 2px;
}

.ad-nav-brand {
  margin: 0 0.35rem 0.15rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.ad-nav-label {
  margin: 0 0.35rem 0.45rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}

.ad-nav-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.42rem 0.55rem;
  border-radius: 2px;
  cursor: pointer;
}

.ad-nav-item:hover {
  color: var(--ink);
  background: var(--accent-soft);
}

.ad-nav-item.is-active {
  color: var(--ink);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
}

.ad-nav-rule {
  height: 1px;
  margin: 0.45rem 0.35rem;
  background: var(--line);
}

.ad-shell {
  flex-direction: column;
  min-height: 0;
  flex: 0 0 auto;
  max-height: 46%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--panel);
  margin-bottom: 0.45rem;
}

.ad-center {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.ad-space {
  display: none;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  overflow: auto;
  padding: 0.65rem 0.75rem;
}

.ad-space.is-active {
  display: flex;
}

.ad-space-head {
  margin-bottom: 0.55rem;
}

.ad-space-head h2 {
  margin: 0 0 0.2rem;
  font-size: 1.05rem;
}

.ad-space-head p,
.ad-space-empty {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.4;
}

.ad-space-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}

.ad-space-card {
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.55rem 0.65rem;
  background: var(--input-bg);
}

.ad-space-card h3 {
  margin: 0 0 0.2rem;
  font-size: 0.92rem;
}

.ad-space-card .ad-card-status {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 0.25rem;
}

.ad-zana-assist {
  border-top: 1px solid var(--line);
  padding: 0.35rem 0.75rem;
  flex: 0 0 auto;
}

.ad-zana-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.ad-right {
  flex-direction: column;
  gap: 0.45rem;
  height: 100%;
  min-height: 0;
  overflow: auto;
}

.ad-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ad-list li {
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--ink);
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--input-bg);
}

.workspace[data-product="ad"] #messages,
.workspace[data-product="ad-admin"] #messages {
  max-height: none;
  flex: 1;
}

.house-feed-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.4rem;
}

.house-feed-item-actions .tool-btn {
  font-size: 0.72rem;
  padding: 0.2rem 0.45rem;
}

.house-feed {
  display: grid;
  gap: 0.45rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow: auto;
}

.house-feed[hidden] {
  display: none !important;
}

.house-feed-head {
  display: grid;
  gap: 0.15rem;
}

.house-feed-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.house-feed-note {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.35;
}

.house-feed-messages {
  overflow: auto;
  display: grid;
  gap: 0.45rem;
  max-height: 22vh;
  padding-right: 0.15rem;
}

.house-feed-item {
  display: grid;
  gap: 0.2rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.house-feed-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: baseline;
  font-size: 0.72rem;
  color: var(--ink-soft);
}

.house-feed-author {
  font-weight: 700;
  color: var(--ink);
}

.house-feed-status {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.house-feed-body {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.4;
  white-space: pre-wrap;
}

.house-feed-reactions,
.house-feed-replies {
  margin: 0;
  font-size: 0.75rem;
  color: var(--ink-soft);
}

.house-feed-drafts {
  display: grid;
  gap: 0.35rem;
}

.house-feed-draft {
  padding: 0.45rem 0.55rem;
  border: 1px dashed rgba(15, 107, 92, 0.45);
  border-radius: 8px;
  background: rgba(15, 107, 92, 0.08);
  font-size: 0.82rem;
  line-height: 1.4;
  display: grid;
  gap: 0.4rem;
}

.house-feed-draft-body {
  margin: 0;
  white-space: pre-wrap;
  font: inherit;
}

.house-feed-draft-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.house-feed-affordances {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.house-feed-compose {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.house-feed-compose input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 0.86rem;
}

.messages {
  overflow: auto;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--line);
  background: var(--messages-bg);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 0;
}

.bubble {
  max-width: 88%;
  padding: 0.75rem 0.9rem;
  line-height: 1.45;
  font-size: 0.98rem;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  animation: bubble-in 280ms ease both;
}
.msg-row.is-restored .bubble,
.knowing-log .bubble {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .bubble { animation: none; }
}

@keyframes bubble-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.bubble.user {
  align-self: flex-end;
  background: var(--bubble-user);
  border: 1px solid rgba(15, 107, 92, 0.18);
}

[data-theme="dark"] .bubble.user {
  border-color: rgba(61, 186, 163, 0.28);
}

.bubble.zana {
  align-self: flex-start;
  background: var(--bubble-zana);
  border: 1px solid var(--line);
}

.bubble.system {
  align-self: center;
  color: var(--ink-soft);
  font-size: 0.85rem;
  background: transparent;
  border: 0;
  padding: 0.2rem;
}

.thinking-status {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  max-width: 92%;
  margin: 0.15rem 0 0.35rem;
  padding: 0.15rem 0.1rem;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.35;
  animation: bubble-in 220ms ease both;
}

.thinking-status .thinking-mark {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  opacity: 0.55;
  animation: thinking-dot 1.1s ease-in-out infinite;
}

.thinking-status .thinking-copy {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.thinking-status .thinking-label {
  font-style: italic;
}

.thinking-status .thinking-detail {
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.3;
  opacity: 0.78;
}

@keyframes thinking-dot {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

.compose {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.4rem;
  flex-shrink: 0;
  padding: 0.35rem 0.4rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--input-bg);
  box-shadow: none;
}

.compose-shell {
  position: relative;
  min-width: 0;
  display: grid;
}

.compose-expand {
  position: absolute;
  top: 0.1rem;
  right: 0.1rem;
  z-index: 2;
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-strong);
  color: var(--ink-soft);
  font-size: 0.75rem;
  line-height: 1;
  cursor: ns-resize;
  padding: 0;
  display: inline-grid;
  place-items: center;
}

.compose-expand[hidden] {
  display: none !important;
}

.compose textarea {
  resize: none;
  min-height: 1.7rem;
  max-height: none;
  width: 100%;
  border: none;
  background: transparent;
  padding: 0.35rem 1.6rem 0.35rem 0.3rem;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--ink);
  overflow-y: auto;
}

.compose textarea:focus {
  outline: none;
}

.compose-tools {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}

.compose-send[data-mode="cancel"] {
  background: #8a3b3b;
  border-color: #8a3b3b;
}

.compose-send[data-mode="busy"] {
  opacity: 0.85;
}

.attach-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.35rem;
}

.attach-chips[hidden] {
  display: none !important;
}

.attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-strong);
  font-size: 0.72rem;
  color: var(--ink);
}

.attach-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 12rem;
}

.attach-chip-remove {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0 0.1rem;
}

.attach-notice {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  color: var(--ink-soft);
}

.attach-notice[hidden] {
  display: none !important;
}

.edit-mode-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.65rem;
  margin-bottom: 0.35rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent, #1ec8a5) 16%, transparent);
  color: var(--ink);
  font-size: 0.88rem;
}
.edit-mode-banner[hidden] { display: none !important; }
.msg-attach-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.45rem;
}
.msg-attach-chip {
  font-size: 0.75rem;
  opacity: 0.9;
}

.attach-menu {
  position: absolute;
  left: 0.4rem;
  bottom: calc(100% + 0.35rem);
  z-index: 6;
  min-width: 15rem;
  max-width: min(22rem, 92vw);
  padding: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-strong);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

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

.attach-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  padding: 0.55rem 0.5rem;
  border-radius: 8px;
  cursor: pointer;
}

.attach-menu-item:hover {
  background: rgba(15, 107, 92, 0.12);
}

.attach-menu-note {
  margin: 0.15rem 0.35rem 0.25rem;
  font-size: 0.68rem;
  color: var(--muted);
  line-height: 1.35;
}

.drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: rgba(6, 12, 10, 0.72);
  border: 2px dashed rgba(61, 186, 163, 0.7);
  pointer-events: none;
}

.drop-overlay[hidden] {
  display: none !important;
}

.drop-overlay-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: #f7fffc;
}

.drop-overlay-sub {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: rgba(247, 255, 252, 0.75);
}

.msg-row {
  display: grid;
  gap: 0.25rem;
  animation: bubble-in 280ms ease both;
}

.msg-row.user {
  justify-items: end;
}

.msg-row.zana {
  justify-items: start;
}

.msg-row .bubble {
  animation: none;
}

.msg-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.25rem;
  opacity: 0;
  transition: opacity 120ms ease;
}

.msg-row.user .msg-meta {
  justify-content: flex-end;
}

.msg-row:hover .msg-meta,
.msg-row:focus-within .msg-meta,
.msg-row.is-open .msg-meta {
  opacity: 1;
}

.msg-time {
  font-size: 0.65rem;
  color: var(--muted);
}

.msg-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

.msg-action {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 0.78rem;
  line-height: 1;
  padding: 0.2rem 0.28rem;
  border-radius: 6px;
}

.msg-action:hover,
.msg-action[aria-pressed="true"] {
  background: rgba(15, 107, 92, 0.12);
  color: var(--accent-deep);
}

.msg-more-btn {
  display: none;
}

@media (max-width: 980px) {
  .msg-meta {
    opacity: 1;
  }
  .msg-more-btn {
    display: inline-grid;
  }
  .msg-row.user .msg-actions-desktop {
    display: none;
  }
  .msg-row.user.is-open .msg-actions-desktop {
    display: inline-flex;
  }
}

.compose-status {
  margin: 0;
  min-height: 0;
  font-size: 0.68rem;
  font-weight: 650;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.compose-status:empty {
  display: none;
}

.compose-status.is-live {
  color: var(--accent-deep);
}

.compose-tool {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--input-bg);
  color: var(--ink);
  cursor: pointer;
}

#vault-tool-btn {
  color: var(--accent-deep);
  border-color: rgba(15, 107, 92, 0.35);
}

.compose-tool[aria-expanded="true"],
.compose-tool.is-on {
  color: #f7fffc;
  background: var(--accent);
  border-color: var(--accent);
}

.compose-send {
  margin-top: 0 !important;
  width: auto !important;
  min-width: 3.6rem;
  padding: 0.4rem 0.7rem !important;
  font-size: 0.82rem;
  border-radius: 999px !important;
}

.composer-dock {
  position: relative;
  display: grid;
  gap: 0.45rem;
  flex-shrink: 0;
  padding-top: 0.35rem;
}

.composer-flyout {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 0.35rem);
  z-index: 40;
  display: grid;
  gap: 0.45rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow);
  max-height: min(52vh, 22rem);
  overflow: auto;
}

.composer-flyout[hidden] {
  display: none !important;
}

.composer-flyout-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

.vault-bar {
  display: none;
}
.vault-bar[hidden] { display: none !important; }
.vault-bar-status {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.vault-bar-status.is-unlocked { color: var(--accent-deep); font-weight: 600; }
.vault-bar-setup,
.vault-bar-actions {
  display: grid;
  gap: 0.4rem;
}
.vault-bar-setup[hidden],
.vault-bar-actions[hidden] { display: none !important; }
.vault-bar-actions {
  grid-template-columns: 1fr auto;
  align-items: center;
}
.vault-bar-setup input,
.vault-bar-actions input {
  width: 100%;
  min-width: 0;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 0.85rem;
  background: var(--input-bg);
  color: var(--ink);
}
.vault-bar-btn {
  margin-top: 0 !important;
  width: 100% !important;
  padding: 0.45rem 0.75rem !important;
  font-size: 0.85rem !important;
}
.vault-bar-actions .ghost {
  width: auto;
}
.vault-bar-note {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted);
}
.bubble.system.vault-status-muted {
  font-size: 0.72rem;
  color: var(--muted);
  opacity: 0.85;
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
  background: transparent;
  border: none;
  box-shadow: none;
}

.voice-bar.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.workspace.desktop-sheet-open .sheet-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 4;
  background: rgba(0, 0, 0, 0.45);
}

.workspace.desktop-sheet-open[data-desktop-sheet="evidence"] .rail-left,
.workspace.desktop-sheet-open[data-desktop-sheet="past"] .rail-left,
.workspace.desktop-sheet-open[data-desktop-sheet="current"] .rail-right,
.workspace.desktop-sheet-open[data-desktop-sheet="work"] .rail-right,
.workspace.desktop-sheet-open[data-desktop-sheet="whole"] .rail-right {
  display: contents !important;
}

.workspace.desktop-sheet-open .rail .side {
  display: none !important;
}

.workspace.desktop-sheet-open[data-desktop-sheet="evidence"] .panel-evidence,
.workspace.desktop-sheet-open[data-desktop-sheet="past"] .panel-past,
.workspace.desktop-sheet-open[data-desktop-sheet="current"] .panel-current,
.workspace.desktop-sheet-open[data-desktop-sheet="work"] .panel-current-work,
.workspace.desktop-sheet-open[data-desktop-sheet="whole"] .panel-whole {
  display: flex !important;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: min(440px, calc(100vw - 2rem));
  height: min(72dvh, 640px);
  max-height: 72dvh;
  border-radius: 8px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--panel-strong);
  padding: 0.9rem;
  animation: rise 240ms ease both;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

[hidden] { display: none !important; }

@media (max-width: 980px) {
  .shell {
    place-items: stretch;
    padding: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  .workspace {
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
    margin: 0;
    gap: 0;
    padding: 0;
    /* minmax(0,1fr) — plain 1fr uses min-content and tabs blow past the viewport */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "tabs"
      "chat";
    border: 0;
    box-shadow: none;
    background: transparent;
    overflow: hidden;
  }

  .desktop-panel-tabs,
  .rail-handle,
  #swap-rails {
    display: none !important;
  }

  .mobile-tabs {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    max-width: 100%;
    padding: 0.55rem 0.65rem;
    padding-top: calc(0.55rem + env(safe-area-inset-top, 0px));
    background: var(--panel-strong);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(14px);
    z-index: 2;
    grid-area: tabs;
  }

  .mobile-tabs-scroll {
    display: flex;
    flex: 1;
    min-width: 0;
    gap: 0.3rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .mobile-tabs-scroll::-webkit-scrollbar {
    display: none;
  }

  .mobile-tab {
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.45rem 0.55rem;
    border-radius: 2px;
    cursor: pointer;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .mobile-tab.is-active {
    color: var(--accent-deep);
    background: var(--accent-soft);
    border-color: var(--accent);
  }

  .mobile-signout {
    padding: 0.45rem 0.35rem;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .desktop-signout {
    display: none;
  }

  .chat-tools #theme-toggle {
    display: none;
  }

  .chat {
    display: none;
    grid-area: chat;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    padding: 0.75rem 0.8rem calc(0.8rem + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
  }

  .rail,
  .side {
    display: none !important;
  }

  .workspace[data-mobile-tab="chat"] .chat {
    display: grid;
  }

  .workspace[data-mobile-tab="evidence"] .rail-left,
  .workspace[data-mobile-tab="past"] .rail-left,
  .workspace[data-mobile-tab="current"] .rail-right,
  .workspace[data-mobile-tab="work"] .rail-right,
  .workspace[data-mobile-tab="whole"] .rail-right {
    display: contents !important;
  }

  .workspace[data-mobile-tab="evidence"] .panel-evidence,
  .workspace[data-mobile-tab="past"] .panel-past,
  .workspace[data-mobile-tab="current"] .panel-current,
  .workspace[data-mobile-tab="work"] .panel-current-work,
  .workspace[data-mobile-tab="whole"] .panel-whole {
    display: flex !important;
    grid-area: chat;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    background: var(--panel);
    padding: 0.85rem 0.85rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
  }

/* Voice docks at the bottom of the screen without crowding the History panel. */
  .voice-mobile-host {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    pointer-events: none;
  }

  .voice-mobile-host .panel-voice:not([hidden]) {
    display: block !important;
    pointer-events: auto;
    margin: 0;
    padding: 0.35rem 0.55rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 14px 14px 0 0;
    background: var(--panel-strong);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(14px);
  }

  .voice-mobile-host .voice-panel-top {
    margin-bottom: 0.2rem;
  }

  .voice-mobile-host .voice-panel-title {
    font-size: 0.75rem;
  }

  .voice-mobile-host .voice-status-line {
    font-size: 0.6rem;
  }

  .workspace.voice-dock-open .chat,
  .workspace.voice-dock-open .panel-evidence,
  .workspace.voice-dock-open .panel-past,
  .workspace.voice-dock-open .panel-current,
  .workspace.voice-dock-open .panel-whole {
    /* The measured dock height already includes its safe-area padding. */
    padding-bottom: var(--voice-dock-height, 4rem) !important;
  }

  .sheet-backdrop {
    display: none !important;
  }

  .chat-top .brand-sm {
    font-size: 1.45rem;
  }

  .messages {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  .compose {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.4rem;
  }

  .compose textarea {
    min-height: 1.7rem;
    max-height: 4.5rem;
    font-size: 16px;
  }

  .compose-send {
    min-height: 2rem;
    padding: 0.4rem 0.7rem;
  }

  .side-head p {
    margin-bottom: 0.65rem;
  }

  .profile-block {
    flex: 1 1 auto;
  }
}

@media (max-width: 640px) {
  .panel {
    width: min(100%, 100vw);
    margin: 0.75rem;
    padding: 1.5rem 1.15rem 1.25rem;
  }

  .brand {
    font-size: clamp(2.2rem, 12vw, 2.8rem);
    margin-bottom: 1rem;
  }

  .headline {
    font-size: 1.2rem;
  }

  .bubble {
    max-width: 92%;
    font-size: 0.95rem;
  }
}

@media (min-width: 981px) {
  .mobile-tabs {
    display: none !important;
  }

  .mobile-signout {
    display: none !important;
  }
}

/* Workspace product Builder + dynamic Space icons */
.ws-builder-panel { display: flex; flex-direction: column; gap: 0.75rem; }
.ws-builder-log { font-size: 0.9rem; line-height: 1.4; }
.ws-builder-preview { white-space: pre-wrap; font-size: 0.85rem; border-top: 1px solid rgba(0,0,0,.12); padding-top: 0.75rem; }
.ws-builder-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.ws-builder-btn { appearance: none; border: 1px solid rgba(0,0,0,.25); background: #111; color: #fff; padding: 0.45rem 0.75rem; cursor: pointer; }
.ws-builder-btn-secondary { background: transparent; color: inherit; }
.ws-form-host { margin-bottom: 1rem; }
.ws-form { display: flex; flex-direction: column; gap: 0.65rem; }
.ws-form-field { display: flex; flex-direction: column; gap: 0.25rem; }
.ws-form-field input, .ws-form-field textarea, .ws-form-field select { font: inherit; padding: 0.4rem 0.5rem; }
.ws-form-actions { display: flex; gap: 0.5rem; }
.ws-dyn-space-icons { display: none; gap: 0.35rem; flex-wrap: wrap; margin-left: 0.5rem; align-items: center; }
.workspace[data-product="ad"] .ws-dyn-space-icons,
.workspace[data-product="ad-admin"] .ws-dyn-space-icons,
body.ad-mode .ws-dyn-space-icons { display: none !important; }
.ws-dyn-space-icon { min-width: 2.25rem; padding: 0.35rem 0.45rem; border: 1px solid rgba(0,0,0,.2); background: transparent; cursor: pointer; font-size: 0.75rem; }

.builder-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.55rem;
}

.workspace-prompt-starter {
  display: grid;
  gap: 0.45rem;
  margin: 0.5rem 0 1rem;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 86%, var(--accent));
}
.workspace-prompt-starter h3,
.workspace-prompt-starter p { margin: 0; }
.workspace-prompt-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.workspace-prompt-preview {
  max-height: min(45vh, 24rem);
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  font: 0.82rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (max-width: 560px) {
  .workspace-prompt-actions { display: grid; grid-template-columns: 1fr; }
  .workspace-prompt-actions button { min-height: 2.7rem; }
}
.whole-picture-bullets { margin: 0; padding-left: 1.2rem; }
.whole-picture-bullets li { margin: 0.28rem 0; line-height: 1.38; }
.whole-picture-bullets small { color: var(--muted); }
.person-navigation { display: flex; flex-direction: column; gap: .16rem; padding: .7rem .8rem; border-bottom: 1px solid var(--line, #31534f); }
.person-navigation h2 { margin: 0 0 .35rem; font-size: .92rem; }
.person-navigation button { border: 0; background: transparent; color: inherit; text-align: left; padding: .38rem .55rem; border-radius: .4rem; cursor: pointer; }
.person-navigation button:hover, .person-navigation button[aria-current="page"] { background: color-mix(in srgb, var(--accent, #42b9a4) 15%, transparent); }
.person-mobile-navigation { display: none; }
.person-topic-buttons { display: flex; flex-wrap: wrap; gap: .4rem; }
.whole-picture-suppressed-row { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .35rem 0; }
.whole-picture-suppressed-row span { min-width: 0; }
.voice-choice {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  padding: 0;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
}
.voice-choice[aria-pressed="true"] {
  border-color: var(--accent, #7c5cff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #7c5cff) 28%, transparent);
}

.repair-card {
  margin-top: .5rem;
  padding: .5rem .75rem;
  border: 1px solid var(--line, #31534f);
  border-radius: .6rem;
  background: color-mix(in srgb, var(--panel, #14211f) 96%, var(--accent, #42b9a4));
  overflow-wrap: anywhere;
  font-size: .85rem; line-height: 1.4;
}
.repair-card strong { font-size: .9rem; font-weight: 650; }
.repair-card p { margin: .2rem 0; }
.repair-card .repair-hint { opacity: .75; }
.repair-card ul { margin: .5rem 0 .75rem; padding-left: 1.35rem; }
.repair-card li { margin: .25rem 0; }
.repair-card .repair-status { font-size: .92em; }

/* Keep Vault status and retention on the first composer row; message actions sit beneath them. */
.composer-options-row { grid-column: 1 / -1; grid-row: 1; }
.compose-shell { grid-column: 1; grid-row: 2; }
.compose-tools { grid-column: 2; grid-row: 2; }
.tool-btn, .primary, .ghost, .mode-pill, .mobile-tab, .compose-tool, .compose-send { border-radius: 999px; }
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px; }
  .chat, .chat-top, .brand-row, .chat-tools, .compose, .composer-options-row { min-width: 0; max-width: 100%; }
  .chat-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; overflow: visible; }
  .chat-tools .tool-btn { min-height: 2.5rem; }
  .composer-options-row { flex-direction: row; align-items: center; }
  .vault-inline-state { flex: 1 1 auto; }
.vault-inline-state { font-size: 0.8rem; }
}

/* Personal product surfaces share the chat center and keep the side rails useful. */
.person-surface,
.history-surface {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1.1rem;
  min-height: 0;
  overflow: auto;
  padding: clamp(1.1rem, 3vw, 2.2rem);
  background: var(--panel);
  color: var(--ink);
}
.person-surface[hidden],
.history-surface[hidden] { display: none !important; }
.chat.is-person-view .messages,
.chat.is-person-view .composer-dock,
.chat.is-history-view .messages,
.chat.is-history-view .composer-dock { display: none !important; }
.person-surface-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: .85rem;
}
.person-surface-head .eyebrow { margin: 0 0 .25rem; color: var(--ink-soft); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.person-surface-head h1 { margin: 0; font: 650 clamp(1.35rem, 2vw, 1.8rem)/1.15 var(--font-display); letter-spacing: -.025em; }
.person-section-content { max-width: 54rem; width: 100%; }
.person-content-section { line-height: 1.65; }
.person-content-section[hidden] { display: none !important; }
.person-understanding { display: grid; gap: .8rem; }
.person-understanding:empty { display: none; }
.person-understanding p { max-width: 62ch; margin: 0; font-size: 1.03rem; line-height: 1.7; }
.person-guided-intro { max-width: 62ch; color: var(--ink-soft); }
.history-search-label { display: block; margin: .55rem 0 .3rem; color: var(--ink-soft); font-size: .72rem; }
#history-search { width: 100%; min-width: 0; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: .65rem; color: var(--ink); background: var(--input-bg); }
.history-conversation-row { display: grid; width: 100%; gap: .3rem; padding: .65rem .7rem; text-align: left; color: var(--ink); border: 1px solid var(--line); border-radius: .75rem; background: var(--panel-strong); cursor: pointer; }
.history-conversation-row:hover { border-color: var(--app-accent); background: var(--accent-soft); }
.history-conversation-row:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; }
.history-conversation-preview { overflow-wrap: anywhere; line-height: 1.4; }
.history-conversation-row small { color: var(--ink-soft); font-size: .72rem; }
.question-text { margin: 0 0 .6rem; font-size: 1rem; line-height: 1.5; }
#questions-guided-open { margin: .25rem 0 .6rem; }
.history-preview-summary { display: grid; gap: .85rem; max-width: 60rem; }
.history-preview-summary section { border-left: 2px solid var(--line); padding-left: .8rem; }
.history-preview-summary h2 { margin: 0 0 .25rem; font: 650 .84rem/1.3 var(--font-display); color: var(--ink-soft); }
.history-preview-summary p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.history-integrity-note { display: block; color: var(--warning-ink, #8a5a12); font-size: .78rem; line-height: 1.4; }
.history-preview-exact { display: grid; gap: .7rem; max-width: 60rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.history-preview-exact[hidden] { display: none !important; }
.history-exact-turn-unreadable { border-inline-start: 3px solid var(--warning-ink, #8a5a12); padding-inline-start: .65rem; }
.voice-transcript-bubble { display: grid; gap: .45rem; }
.voice-transcript-details { min-width: 0; }
.voice-transcript-details > summary { cursor: pointer; font-weight: 600; }
.voice-transcript-details > pre { max-height: 18rem; overflow: auto; margin: .45rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.history-exact-message { max-width: 48rem; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.history-exact-message[data-role="user"] { justify-self: end; background: var(--input-bg); }
.history-exact-message[data-role="assistant"] { justify-self: start; }
.history-preview-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .75rem; }
.person-projection-status { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 0 0 .75rem; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: .8rem; color: var(--ink-soft); font-size: .82rem; }
.person-projection-status > span { flex: 1; }
.person-projection-status[hidden] { display: none !important; }
.help-dialog { width: min(42rem, calc(100vw - 2rem)); max-height: min(88vh, 54rem); overflow: auto; border: 1px solid var(--line); border-radius: 1.1rem; padding: 1.15rem; color: var(--ink); background: var(--panel); }
.help-dialog::backdrop { background: rgb(0 0 0 / 55%); }
.help-dialog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.help-dialog h2 { margin: 0; font: 650 1.35rem/1.2 var(--font-display); }
.help-intro { color: var(--ink-soft); line-height: 1.5; }
.help-form { display: grid; justify-items: end; gap: .55rem; }
.help-form textarea { width: 100%; resize: vertical; min-height: 6rem; padding: .7rem; border: 1px solid var(--line); border-radius: .7rem; color: var(--ink); background: var(--input-bg); }
.help-answer { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; padding: .8rem 0; border-top: 1px solid var(--line); }
.vault-duration-label { color: var(--ink-soft); font-size: .75rem; }
#vault-unlock-duration { max-width: 10rem; color: var(--ink); background: var(--panel); border: 1px solid var(--line); padding: .3rem .45rem; }
@media (max-width: 640px) {
  .person-surface, .history-surface { padding: 1rem; }
  .person-surface-head { align-items: center; }
  #vault-unlock-duration { max-width: 8.5rem; }
}


/* Compact phone header: navigation and utilities share one menu. */
@media (max-width: 980px) {
  .mobile-tabs { position: relative; justify-content: flex-start; }
  .mobile-menu { position: relative; }
  .mobile-menu-trigger { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.5rem; padding: .4rem .75rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: var(--panel); font-weight: 650; list-style: none; cursor: pointer; }
  .mobile-menu-trigger::-webkit-details-marker { display: none; }
  .mobile-menu-panel { position: absolute; top: calc(100% + .4rem); left: 0; width: min(18rem, calc(100vw - 1.25rem)); max-height: min(76dvh, 42rem); overflow: auto; display: grid; gap: .65rem; padding: .7rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--panel-strong); box-shadow: var(--shadow); z-index: 70; }
  .mobile-menu:not([open]) .mobile-menu-panel { display: none; }
  .mobile-menu-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem; }
  .mobile-menu-actions .tool-btn { display: inline-flex !important; align-items: center; justify-content: flex-start; min-width: 0; min-height: 2.65rem; width: 100%; border-radius: .65rem; }
  .mobile-menu-actions #theme-toggle, .mobile-menu-actions .desktop-signout { display: inline-flex !important; }
  .mobile-menu-actions #files-open-button[hidden] { display: none !important; }
  .chat-tools { display: none !important; }
  .workspace.voice-dock-open .chat, .workspace.voice-dock-open .panel-evidence, .workspace.voice-dock-open .panel-past, .workspace.voice-dock-open .panel-current, .workspace.voice-dock-open .panel-whole { padding-bottom: var(--voice-dock-height, 4rem) !important; }
}


/* === Workspace repair: AD three-column operating shell === */
/* Product contract: center is always Zana chat; Space opens left; AD Now + Chapter stay right. */
@media (min-width: 981px) {
  .workspace[data-product="ad"],
  .workspace[data-product="ad-admin"] {
    --rail-left: auto;
    --rail-right: auto;
    --handle: 0px;
    grid-template-columns: minmax(15rem, 19rem) minmax(26rem, 1fr) minmax(16rem, 20rem);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "left chat right";
    gap: 0.55rem;
  }

  .workspace[data-product="ad"] .rail-left,
  .workspace[data-product="ad-admin"] .rail-left,
  .workspace[data-product="ad"] .rail-right,
  .workspace[data-product="ad-admin"] .rail-right {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
    min-width: 0;
    height: 100%;
  }

  .workspace[data-product="ad"] .rail-handle,
  .workspace[data-product="ad-admin"] .rail-handle,
  .workspace[data-product="ad"] .desktop-panel-tabs,
  .workspace[data-product="ad-admin"] .desktop-panel-tabs {
    display: none !important;
  }
}

.workspace[data-product="ad"] .personal-chrome,
.workspace[data-product="ad-admin"] .personal-chrome,
.workspace[data-product="ad"] #ad-nav,
.workspace[data-product="ad-admin"] #ad-nav,
.workspace[data-product="ad"] #ad-shell,
.workspace[data-product="ad-admin"] #ad-shell,
.workspace[data-product="ad"] .org-governance-side,
.workspace[data-product="ad-admin"] .org-governance-side,
.workspace[data-product="ad"] .org-admin-mobile-details,
.workspace[data-product="ad-admin"] .org-admin-mobile-details {
  display: none !important;
}

.workspace[data-product="ad"] #ad-right,
.workspace[data-product="ad-admin"] #ad-right {
  display: grid !important;
  grid-template-rows: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 0.55rem;
  min-height: 0;
  overflow: hidden;
}

.workspace[data-product="ad"] #ad-right > .side,
.workspace[data-product="ad-admin"] #ad-right > .side,
.workspace[data-product="ad-admin"] #ad-now,
.workspace[data-product="ad-admin"] #ad-chapter {
  display: flex !important;
  height: auto;
  min-height: 0;
}

.workspace[data-product="ad"] .brand-row,
.workspace[data-product="ad-admin"] .brand-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "brand modes"
    "spaces spaces";
  align-items: center;
  gap: 0.45rem 0.7rem;
  flex: 1 1 auto;
}

.workspace[data-product="ad"] .brand-row .brand-sm,
.workspace[data-product="ad-admin"] .brand-row .brand-sm {
  grid-area: brand;
}

.workspace[data-product="ad"] .mode-switch,
.workspace[data-product="ad-admin"] .mode-switch {
  grid-area: modes;
  justify-self: start;
  min-width: 0;
}

.workspace[data-product="ad"] .mode-dynamic-workspace,
.workspace[data-product="ad-admin"] .mode-dynamic-workspace,
.workspace[data-product="ad"] .mode-dynamic-admin,
.workspace[data-product="ad-admin"] .mode-dynamic-admin,
.workspace[data-product="ad"] .mode-act,
.workspace[data-product="ad-admin"] .mode-act {
  display: none !important;
}

.workspace[data-product="ad"] .ad-space-circles,
.workspace[data-product="ad-admin"] .ad-space-circles {
  grid-area: spaces;
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0.05rem 0 0.15rem;
  gap: 0.35rem;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
}

.workspace[data-product="ad"] .ad-space-circles::-webkit-scrollbar,
.workspace[data-product="ad-admin"] .ad-space-circles::-webkit-scrollbar {
  display: none;
}

.workspace[data-product="ad"] .ad-space-circles[hidden],
.workspace[data-product="ad-admin"] .ad-space-circles[hidden] {
  display: none !important;
}

.workspace[data-product="ad"] .ad-space-circle,
.workspace[data-product="ad-admin"] .ad-space-circle {
  width: auto;
  flex: none;
  white-space: nowrap;
  height: 2rem;
  min-width: 2rem;
  padding: 0 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.workspace[data-product="ad"] .ad-space-circle:hover,
.workspace[data-product="ad-admin"] .ad-space-circle:hover {
  color: var(--ink);
  border-color: var(--ink-soft);
  background: var(--input-bg);
}

.workspace[data-product="ad"] .ad-space-circle.is-active,
.workspace[data-product="ad-admin"] .ad-space-circle.is-active {
  background: var(--ink);
  color: var(--panel);
  border-color: var(--ink);
}

.workspace[data-product="ad"] #ad-space-dock:not([hidden]),
.workspace[data-product="ad-admin"] #ad-space-dock:not([hidden]) {
  display: flex !important;
  height: 100%;
  max-height: none;
  min-height: 0;
  border-radius: 2px;
}

.workspace[data-product="ad"] #ad-space-dock-body,
.workspace[data-product="ad-admin"] #ad-space-dock-body {
  min-height: 0;
  overflow: auto;
}

.workspace[data-product="ad"] #ad-space-dock-body > .ad-space,
.workspace[data-product="ad-admin"] #ad-space-dock-body > .ad-space {
  display: flex;
  flex: 1;
  min-height: 0;
  padding: 0;
  overflow: visible;
}

.workspace[data-product="ad"] #ad-space-dock .house-feed,
.workspace[data-product="ad-admin"] #ad-space-dock .house-feed {
  max-height: none;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.workspace[data-product="ad-admin"] #ad-space-projects .org-governance-lanes {
  grid-template-columns: 1fr;
}

.workspace[data-product="ad-admin"] #ad-space-projects .org-covenant-panel {
  overflow: visible;
}

@media (max-width: 980px) {
  .workspace[data-product="ad"] .rail-left,
  .workspace[data-product="ad-admin"] .rail-left,
  .workspace[data-product="ad"] .rail-right,
  .workspace[data-product="ad-admin"] .rail-right {
    display: none !important;
  }

  .workspace[data-product="ad"][data-space-open] .rail-left,
  .workspace[data-product="ad-admin"][data-space-open] .rail-left {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 80;
    height: 100dvh;
    padding: max(0.65rem, env(safe-area-inset-top, 0px)) 0.65rem max(0.65rem, env(safe-area-inset-bottom, 0px));
    background: var(--panel-strong);
  }

  .workspace[data-product="ad"][data-space-open] #ad-space-dock,
  .workspace[data-product="ad-admin"][data-space-open] #ad-space-dock {
    height: 100%;
    border: 0;
    background: transparent;
    padding: 0;
  }

  .workspace[data-product="ad"] .chat-top,
  .workspace[data-product="ad-admin"] .chat-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.45rem;
  }

  .workspace[data-product="ad"] .brand-row,
  .workspace[data-product="ad-admin"] .brand-row {
    grid-template-columns: auto minmax(0, 1fr);
    width: 100%;
  }

  .workspace[data-product="ad"] .ad-space-circles,
  .workspace[data-product="ad-admin"] .ad-space-circles {
    padding-bottom: 0.2rem;
  }

  .workspace[data-product="ad"] .ad-space-circle,
  .workspace[data-product="ad-admin"] .ad-space-circle {
    width: 2.15rem;
    height: 2.15rem;
    min-width: 2.15rem;
  }
}

.thinking-status .thinking-copy { display: inline; }
.thinking-status .thinking-label { display: inline; }
.thinking-status .thinking-detail { display: block; }

@media (max-width: 980px) {
  .workspace[data-product="workspace"] .mobile-tabs,
  .workspace[data-product="workspace-admin"] .mobile-tabs {
    display: flex !important;
    grid-area: tabs;
  }
}

/* Calm, consistent controls and a reliable mobile action menu. */
button, input, select, textarea {
  font-family: var(--app-font);
}

button, select, input, textarea {
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease,
    box-shadow 140ms ease, transform 140ms ease;
}

button:focus-visible, a:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--app-focus);
  outline-offset: 2px;
}

@media (hover: hover) {
  .tool-btn:hover, .ghost:hover, .mobile-tab:hover, .mobile-menu-trigger:hover {
    border-color: var(--app-accent);
    background-color: var(--app-surface);
  }
}

.mobile-menu-trigger {
  min-height: 2.75rem;
  padding-inline: 0.9rem;
  border-color: var(--app-border);
  background: var(--app-surface-raised);
  box-shadow: 0 2px 8px rgba(24, 33, 29, 0.06);
}

@media (max-width: 980px) {
  .workspace .mobile-tabs {
    position: relative;
    z-index: 120;
    overflow: visible;
    padding-top: max(0.35rem, env(safe-area-inset-top, 0px));
    padding-inline: max(0.65rem, env(safe-area-inset-left, 0px));
  }

  .workspace .chat-top > .chat-tools,
  .workspace .chat-tools {
    display: none !important;
  }

  .workspace #mobile-menu {
    position: relative;
    z-index: 121;
    overflow: visible;
  }

  .workspace #mobile-menu .mobile-menu-panel {
    position: fixed;
    top: max(3.5rem, calc(env(safe-area-inset-top, 0px) + 3.25rem));
    left: max(0.65rem, env(safe-area-inset-left, 0px));
    width: min(25rem, calc(100vw - max(1.3rem, env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px))));
    max-height: calc(100dvh - max(4.25rem, env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px) + 4rem));
    overflow: auto;
    overscroll-behavior: contain;
    border-color: var(--app-border);
    border-radius: var(--app-radius-lg);
    background: var(--app-surface-raised);
    box-shadow: var(--app-shadow-light);
    z-index: 122;
  }

  [data-theme="dark"] .workspace #mobile-menu .mobile-menu-panel {
    box-shadow: var(--app-shadow-dark);
  }

  .workspace #mobile-menu-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace #mobile-menu-actions > button {
    min-height: 2.75rem;
    border-color: var(--app-border);
  }
}

@media (max-width: 640px) {
  .workspace .mobile-tabs { gap: 0.4rem; }
  .workspace #mobile-menu .mobile-menu-panel { padding: 0.8rem; }
}

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

/* === Generic Workspace Builder V1 === */
.workspace-builder-memory-panel {
  margin: 0 1rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  background: var(--panel);
}
.workspace-builder-memory-panel > summary {
  cursor: pointer;
  padding: 0.55rem 0.75rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 650;
}
.workspace-builder-memory-panel pre,
.workspace-builder-summary {
  margin: 0;
  padding: 0.75rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink);
  background: transparent;
}
.workspace-builder-card {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.65rem;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--panel);
}
.workspace-org-role-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .45rem .8rem; margin: .5rem 0; padding: .65rem; border: 1px solid var(--line); border-radius: .65rem; }
.workspace-org-role-row legend { grid-column: 1 / -1; font-weight: 700; }
.workspace-org-role-row label { display: flex; align-items: center; gap: .4rem; }
.workspace-org-role-row button { justify-self: start; }
.workspace-import-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .65rem; }
.workspace-import-actions .persist-note { flex-basis: 100%; margin: 0; }
.workspace-import-actions #workspace-import-status { min-height: 1.3em; }

.workspace-layout-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
  margin: 0.7rem 0;
  align-items: stretch;
}
.workspace-layout-preview-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 1.2fr) minmax(0, 1fr);
  gap: 0.4rem;
}
.workspace-layout-preview-page > h4 { grid-column: 1 / -1; margin: 0; text-transform: capitalize; }
.workspace-layout-preview-rail,
.workspace-layout-preview-center {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  min-width: 0;
  min-height: 6rem;
  padding: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: var(--panel);
}
.workspace-layout-preview-rail > span {
  padding: 0.45rem;
  border-radius: 0.55rem;
  background: var(--panel-strong);
  text-transform: capitalize;
}
.workspace-layout-preview-center {
  place-items: center;
  text-align: center;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
}
@media (max-width: 600px) {
  .workspace-layout-preview-page { grid-template-columns: 1fr 1fr; }
  .workspace-layout-preview-center {
    grid-column: 1 / -1;
    grid-row: 1;
  }
}
.workspace-builder-card h3,
.workspace-builder-card p {
  margin: 0;
}
.workspace-builder-space-preview {
  padding: 0.65rem 0;
  border-top: 1px solid var(--line);
}
.workspace-builder-space-preview:first-of-type {
  border-top: 0;
}
.workspace-builder-space-preview p {
  margin-top: 0.25rem;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.workspace-generic-form,
.workspace-generic-items {
  display: grid;
  gap: 0.65rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
}
.workspace-generic-form h3,
.workspace-generic-items > h3 {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.workspace-item-type-select,
.ws-schema-form input,
.ws-schema-form textarea,
.ws-schema-form select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--input-bg);
  color: var(--ink);
  padding: 0.55rem 0.65rem;
  font: inherit;
}
.ws-schema-form {
  display: grid;
  gap: 0.7rem;
}
.ws-schema-title {
  margin: 0;
  font-size: 1rem;
}
.ws-field {
  display: grid;
  gap: 0.32rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.ws-field input,
.ws-field textarea,
.ws-field select {
  color: var(--ink);
}
.ws-field.ws-check {
  grid-template-columns: auto 1fr;
  align-items: center;
}
.ws-field.ws-check input {
  width: auto;
}
.ws-schema-submit {
  justify-self: start;
  border: 0;
  border-radius: 999px;
  padding: 0.55rem 0.9rem;
  background: var(--accent);
  color: #07110f;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.workspace-item-card {
  display: grid;
  gap: 0.2rem;
}
.workspace-item-field {
  margin: 0.1rem 0 0;
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}
.workspace-item-editor {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.55rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--line);
}
.workspace-view-tabs,
.workspace-channel-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.workspace-view {
  min-width: 0;
}
.workspace-view-list,
.workspace-view-feed,
.workspace-view-calendar {
  display: grid;
  gap: 0.6rem;
}
.workspace-view-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 0.65rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
}
.workspace-board-column {
  display: grid;
  align-content: start;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--panel-soft, var(--input-bg));
}
.workspace-board-column > h4,
.workspace-channel-panel > h4 {
  margin: 0;
  font-size: 0.82rem;
}
.workspace-view-directory {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.6rem;
}
.workspace-calendar-date {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  color: var(--ink-soft);
}
.workspace-channels {
  display: grid;
  gap: 0.65rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
}
.workspace-channels > h3 {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.workspace-channel-panel {
  display: grid;
  gap: 0.5rem;
}
.workspace-channel-message {
  display: grid;
  gap: 0.2rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  background: var(--input-bg);
}
.workspace-channel-message p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.workspace-channel-message small {
  color: var(--ink-soft);
}
.workspace-channel-compose {
  display: grid;
  gap: 0.45rem;
}
.workspace-channel-compose textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  background: var(--input-bg);
  color: var(--ink);
  padding: 0.6rem 0.7rem;
  font: inherit;
}

@media (max-width: 720px) {
  .workspace-view-board {
    grid-auto-columns: minmax(82vw, 1fr);
  }
  .workspace-view-directory {
    grid-template-columns: 1fr;
  }
}


/* Generic Workspaces stay chat-first until a built Space is opened. */
.workspace[data-product="workspace"] .ad-space-circles,
.workspace[data-product="workspace-admin"] .ad-space-circles {
  display: flex;
  grid-area: spaces;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  gap: 0.35rem;
  padding: 0.05rem 0 0.15rem;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
}
.workspace[data-product="workspace"] .ad-space-circles[hidden],
.workspace[data-product="workspace-admin"] .ad-space-circles[hidden] {
  display: none !important;
}
.workspace[data-product="workspace"] .brand-row,
.workspace[data-product="workspace-admin"] .brand-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "brand modes"
    "spaces spaces";
  gap: 0.45rem 0.7rem;
  align-items: center;
  flex: 1 1 auto;
}
.workspace[data-product="workspace"] .brand-row .brand-sm,
.workspace[data-product="workspace-admin"] .brand-row .brand-sm {
  grid-area: brand;
}
.workspace[data-product="workspace"] .mode-switch,
.workspace[data-product="workspace-admin"] .mode-switch {
  grid-area: modes;
}
.workspace[data-product="workspace"] .ad-space-circle,
.workspace[data-product="workspace-admin"] .ad-space-circle {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.62rem;
  font-weight: 700;
}
.workspace[data-product="workspace"] .ad-space-circle.is-active,
.workspace[data-product="workspace-admin"] .ad-space-circle.is-active {
  background: var(--ink);
  color: var(--panel);
  border-color: var(--ink);
}

@media (min-width: 981px) {
  .workspace[data-product="workspace"][data-space-open],
  .workspace[data-product="workspace-admin"][data-space-open] {
    --handle: 0px;
    grid-template-columns: minmax(15rem, 19rem) minmax(26rem, 1fr) minmax(15rem, 20rem);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "left chat right";
    gap: 0.55rem;
  }
  .workspace[data-product="workspace"][data-space-open] .rail-handle,
  .workspace[data-product="workspace-admin"][data-space-open] .rail-handle { display: none !important; }
  .workspace[data-product="workspace"][data-space-open] .rail-right,
  .workspace[data-product="workspace-admin"][data-space-open] .rail-right { grid-area: right; min-width: 0; height: 100%; }
  .workspace[data-product="workspace"][data-space-open] .rail-left,
  .workspace[data-product="workspace-admin"][data-space-open] .rail-left {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
    height: 100%;
    min-width: 0;
  }
  .workspace[data-product="workspace"][data-space-open] #ad-space-dock,
  .workspace[data-product="workspace-admin"][data-space-open] #ad-space-dock {
    display: flex !important;
    height: 100%;
    min-height: 0;
  }
}

@media (max-width: 980px) {
  .workspace[data-product="workspace"][data-space-open] .rail-left,
  .workspace[data-product="workspace-admin"][data-space-open] .rail-left {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 80;
    height: 100dvh;
    padding: max(0.65rem, env(safe-area-inset-top, 0px)) 0.65rem max(0.65rem, env(safe-area-inset-bottom, 0px));
    background: var(--panel-strong);
  }
  .workspace[data-product="workspace"][data-space-open] #ad-space-dock,
  .workspace[data-product="workspace-admin"][data-space-open] #ad-space-dock {
    display: flex !important;
    height: 100%;
    border: 0;
  }
}


/* === Generic Workspace Capsule UI === */
.workspace-generic-capsules {
  display: grid;
  gap: 0.65rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
}
.workspace-generic-capsules > h3 {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.workspace-capsule-card {
  display: grid;
  gap: 0.45rem;
}
.workspace-capsule-responses {
  display: grid;
  gap: 0.3rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--line);
}
.workspace-capsule-responses p {
  margin: 0;
  padding: 0.4rem 0.5rem;
  border-radius: 0.45rem;
  background: var(--input-bg);
  font-size: 0.78rem;
}
.workspace-capsule-response-input {
  flex: 1 1 12rem;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--input-bg);
  color: var(--ink);
  padding: 0.5rem 0.6rem;
  font: inherit;
}


/* === Workspace dock control polish === */
.ad-space-dock input,
.ad-space-dock textarea,
.ad-space-dock select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--input-bg);
  color: var(--ink);
  padding: 0.55rem 0.65rem;
  font: inherit;
}
.ad-space-dock textarea {
  min-height: 5.5rem;
  resize: vertical;
}
.ad-space-dock button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}
.ad-space-dock button:hover {
  background: var(--input-bg);
}
.ad-space-dock .ws-builder-btn,
.ad-space-dock .ws-schema-submit {
  border-color: transparent;
  background: var(--accent);
  color: #07110f;
  font-weight: 700;
}
.ad-space-dock label {
  display: grid;
  gap: 0.28rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
}
.ad-space-dock .ad-capsule-card {
  border-radius: 0.65rem;
  padding: 0.75rem;
}

/* Create Workspace from the Workspace selector without leaving Zana. */
.mode-create-workspace { border-style: dashed; }
.workspace-create-dialog {
  width: min(34rem, calc(100vw - 2rem));
  max-height: min(90vh, 42rem);
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--panel-strong);
  color: var(--ink);
  box-shadow: 0 1.5rem 5rem #0008;
}
.workspace-create-dialog::backdrop { background: #07110fcc; backdrop-filter: blur(3px); }
.workspace-create-dialog form { display: grid; gap: 0.8rem; }
.workspace-create-dialog header,
.workspace-create-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.workspace-create-dialog h2 { margin: 0; font-size: 1.25rem; }
.workspace-create-dialog label { display: grid; gap: 0.3rem; font-size: 0.88rem; font-weight: 650; }
.workspace-create-dialog label span,
.workspace-create-note { color: var(--ink-soft); font-size: 0.78rem; font-weight: 400; }
.workspace-create-dialog input,
.workspace-create-dialog textarea {
  box-sizing: border-box; width: 100%; border: 1px solid var(--line); border-radius: 0.55rem;
  padding: 0.7rem; color: var(--ink); background: var(--input-bg); font: inherit;
}
.workspace-create-dialog textarea { resize: vertical; }
.workspace-create-note { margin: 0; line-height: 1.5; }
.workspace-create-actions p { min-height: 1.2em; margin: 0; color: var(--ink-soft); font-size: 0.78rem; }
.workspace-create-actions button { flex: 0 0 auto; }
@media (max-width: 640px) {
  .workspace-create-dialog { padding: 1rem; }
  .workspace-create-actions { align-items: stretch; flex-direction: column; }
  .workspace-create-actions button { width: 100%; }
}

/* Keep the hamburger and its action menu available on every screen size. */
#workspace.workspace .mobile-tabs {
  display: flex !important;
  position: relative;
  grid-area: tabs;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  padding: 0.45rem 0.65rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel-strong);
  z-index: 120;
}

#workspace.workspace .brand-row {
  min-width: 0;
  flex-wrap: wrap;
}

#workspace.workspace .mode-switch {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}

#workspace.workspace .chat-tools {
  display: none !important;
}

.workspace-chat-heading {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 1rem 0.55rem;
  border-bottom: 1px solid var(--line);
}
.workspace-chat-kicker { margin: 0 0 0.1rem; color: var(--ink-soft); font-size: 0.72rem; font-weight: 650; }
.workspace-chat-switch { display: flex; gap: 0.35rem; flex: 0 0 auto; }
.workspace-chat-switch button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.78rem;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
}
.workspace-chat-switch button[aria-pressed="true"] {
  color: var(--ink);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.workspace-chat-heading h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.2;
}

#workspace.workspace #mobile-menu {
  position: relative;
  z-index: 121;
}

#workspace.workspace #mobile-menu .mobile-menu-panel {
  position: fixed;
  top: max(3.5rem, calc(env(safe-area-inset-top, 0px) + 3.25rem));
  left: max(0.65rem, env(safe-area-inset-left, 0px));
  width: min(18rem, calc(100vw - 1.3rem));
  max-height: calc(100dvh - max(4.25rem, env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px) + 4rem));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--app-radius-lg);
  background: var(--panel-strong);
  box-shadow: var(--shadow);
  z-index: 122;
}

#workspace.workspace #mobile-menu:not([open]) .mobile-menu-panel {
  display: none;
}

#workspace.workspace #mobile-menu-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
}

#workspace.workspace #mobile-menu-actions > button {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
}

@media (max-width: 980px) {
  #workspace.workspace .mobile-tabs { padding-top: max(0.35rem, env(safe-area-inset-top, 0px)); }
}


/* === Serious dark shell + unified Zana header === */
[data-theme="dark"] body,
[data-theme="dark"] .shell,
[data-theme="dark"] #workspace.workspace {
  background: var(--app-bg-dark);
}

[data-theme="dark"] .panel,
[data-theme="dark"] .chat,
[data-theme="dark"] .side,
[data-theme="dark"] .mobile-menu-panel {
  background-color: var(--app-surface-dark);
}

#workspace.workspace .chat-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 3.1rem;
  padding: 0.15rem 0.1rem 0.2rem;
}

#workspace.workspace .chat-top > .brand-row {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  overflow: hidden;
}

#workspace.workspace .chat-top > .mobile-tabs {
  display: flex !important;
  position: relative;
  flex: 0 0 auto;
  grid-area: auto;
  align-items: center;
  justify-content: center;
  min-width: auto;
  width: auto;
  max-width: none;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  z-index: 140;
}

#workspace.workspace #mobile-menu {
  position: relative;
  z-index: 141;
}

#workspace.workspace .mobile-menu-trigger {
  display: inline-grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  min-height: 2.55rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel-strong) 88%, transparent);
  box-shadow: none;
  list-style: none;
  cursor: pointer;
}

#workspace.workspace .header-camera-tool {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.65rem;
  min-width: 2.65rem;
  height: 2.65rem;
  min-height: 2.65rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel-strong) 88%, transparent);
  cursor: pointer;
}

#workspace.workspace .header-camera-tool:focus-visible {
  outline: 3px solid var(--app-focus);
  outline-offset: 2px;
}

#workspace.workspace .header-camera-tool[data-availability="gated"] {
  color: var(--ink-soft);
}

#workspace.workspace .mobile-menu-trigger::-webkit-details-marker {
  display: none;
}

#workspace.workspace .hamburger-icon {
  display: grid;
  width: 1.12rem;
  gap: 0.22rem;
}

#workspace.workspace .hamburger-icon > span {
  display: block;
  width: 100%;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
}

#workspace.workspace #mobile-menu[open] .hamburger-icon > span:nth-child(1) {
  transform: translateY(0.275rem) rotate(45deg);
}

#workspace.workspace #mobile-menu[open] .hamburger-icon > span:nth-child(2) {
  opacity: 0;
}

#workspace.workspace #mobile-menu[open] .hamburger-icon > span:nth-child(3) {
  transform: translateY(-0.275rem) rotate(-45deg);
}

#workspace.workspace .hamburger-icon > span {
  transition: transform 140ms ease, opacity 140ms ease;
}

#workspace.workspace #mobile-menu .mobile-menu-panel {
  position: fixed;
  top: max(4.15rem, calc(env(safe-area-inset-top, 0px) + 3.9rem));
  right: max(0.7rem, env(safe-area-inset-right, 0px));
  left: auto;
  width: min(18rem, calc(100vw - 1.4rem));
  max-height: calc(100dvh - max(5rem, env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px) + 4.6rem));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: var(--panel-strong);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
  z-index: 160;
}

#workspace.workspace #mobile-menu-actions {
  gap: 0.4rem;
}

#workspace.workspace #mobile-menu-actions > button {
  border-radius: 0.55rem;
}

@media (max-width: 980px) {
  #workspace.workspace {
    /* Workspace product columns outrank the generic .workspace phone rule.
       Reset the five desktop rail tracks before placing chat in the sole area. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "chat";
  }

  #workspace.workspace .chat {
    grid-area: chat;
    padding-top: max(0.45rem, env(safe-area-inset-top, 0px));
  }

  #workspace.workspace .chat-top {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.5rem;
    min-width: 0;
  }

  #workspace.workspace .brand-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap !important;
    min-width: 0;
    overflow: hidden;
  }

  #workspace.workspace .brand-sm {
    flex: 0 0 auto;
    font-size: 1.45rem;
  }

  #workspace.workspace .mode-switch {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #workspace.workspace .mode-switch::-webkit-scrollbar {
    display: none;
  }

  #workspace.workspace .mode-pill {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  #workspace.workspace .chat-top > .mobile-tabs {
    flex: 0 0 auto;
  }

  #workspace.workspace #mobile-menu .mobile-menu-panel {
    top: max(4rem, calc(env(safe-area-inset-top, 0px) + 3.85rem));
  }
}

@media (min-width: 981px) {
  #workspace.workspace .chat-top > .mobile-tabs {
    display: flex !important;
  }

  #workspace.workspace #mobile-menu .mobile-menu-panel {
    top: 4.1rem;
    right: 1rem;
  }
}

/* Final navigation layout: readable, single-column choices instead of a button grid. */
#workspace.workspace #mobile-menu .mobile-menu-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.5rem;
}

/* The workspace header assigns the view switch to the named "modes" area.
   Once moved into this menu that desktop placement creates implicit columns. */
#workspace.workspace #mobile-menu .mobile-menu-panel > * {
  grid-area: auto !important;
  justify-self: stretch;
  min-width: 0;
  width: 100%;
}

#workspace.workspace #mobile-menu-actions,
#workspace.workspace #mobile-menu .mode-switch {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  gap: 0.35rem;
}

#workspace.workspace #mobile-menu-actions > button,
#workspace.workspace #mobile-menu .mode-pill {
  display: flex !important;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  min-height: 2.65rem;
  text-align: left;
  white-space: normal;
  border-radius: 0.65rem;
}

#workspace.workspace #mobile-menu .menu-section-title {
  margin: 0.15rem 0 -0.15rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 700;
}

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


/* === Top Personal / Workspace navigation ===
   Keep destinations beside Zana. The hamburger is reserved for utilities. */
#workspace.workspace .workspace-nav-shell {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

#workspace.workspace .workspace-nav-shell[hidden] {
  display: none !important;
}

#workspace.workspace .workspace-nav-shell .mode-switch {
  display: flex !important;
  align-items: center;
  gap: 0.35rem;
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0.08rem 0.02rem;
}

#workspace.workspace .workspace-nav-shell .mode-switch::-webkit-scrollbar {
  display: none;
}

#workspace.workspace .workspace-nav-shell .mode-pill {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: min(18rem, 62vw);
  min-height: 2.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#workspace.workspace .workspace-nav-shell .mode-pill[hidden] {
  display: none !important;
}

/* Older AD chrome hid other Workspace destinations once AD was open.
   The global destination row must remain available in every product context. */
#workspace.workspace[data-product="ad"] .workspace-nav-shell .mode-dynamic-workspace,
#workspace.workspace[data-product="ad-admin"] .workspace-nav-shell .mode-dynamic-workspace,
#workspace.workspace[data-product="ad"] .workspace-nav-shell .mode-dynamic-admin,
#workspace.workspace[data-product="ad-admin"] .workspace-nav-shell .mode-dynamic-admin,
#workspace.workspace[data-product="ad"] .workspace-nav-shell .mode-act,
#workspace.workspace[data-product="ad-admin"] .workspace-nav-shell .mode-act {
  display: inline-flex !important;
}

#workspace.workspace .workspace-picker {
  display: none;
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
}

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

#workspace.workspace .workspace-picker-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  min-height: 2.2rem;
  max-width: 11rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

#workspace.workspace .workspace-picker-trigger::-webkit-details-marker {
  display: none;
}

#workspace.workspace #workspace-picker-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

#workspace.workspace .workspace-picker-chevron {
  flex: 0 0 auto;
  transition: transform 140ms ease;
}

#workspace.workspace .workspace-picker[open] .workspace-picker-chevron {
  transform: rotate(180deg);
}

#workspace.workspace .workspace-picker-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 170;
  display: grid;
  gap: 0.3rem;
  width: min(20rem, calc(100vw - 1.5rem));
  max-height: min(70dvh, 32rem);
  overflow: auto;
  padding: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: var(--panel-strong);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
}

#workspace.workspace .workspace-picker:not([open]) .workspace-picker-menu {
  display: none;
}

#workspace.workspace .workspace-picker-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 2.55rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid transparent;
  border-radius: 0.55rem;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}

#workspace.workspace .workspace-picker-item:hover,
#workspace.workspace .workspace-picker-item.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
}

/* The brand + destinations own the available header width up to the hamburger. */
#workspace.workspace .chat-top > .brand-row {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

#workspace.workspace[data-product="personal"] .brand-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.65rem;
}


/* Final shell contract: one active destination control, workspace pages next,
   and the utility menu on the same header row. The legacy membership pills stay
   in the DOM as menu actions only so existing click handlers remain authoritative. */
#workspace.workspace .chat-top {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 0.55rem;
  min-width: 0;
  overflow: visible;
}

#workspace.workspace .chat-top > .brand-row {
  display: flex !important;
  flex: 1 1 auto;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.65rem;
  min-width: 0;
  overflow: visible;
}

#workspace.workspace .chat-top > .mobile-tabs {
  display: flex !important;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  grid-area: auto;
  min-width: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

#workspace.workspace .workspace-nav-shell {
  display: flex !important;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

#workspace.workspace .workspace-nav-shell[hidden] { display: none !important; }
#workspace.workspace .workspace-nav-shell .mode-switch { display: none !important; }
#workspace.workspace .workspace-nav-shell .workspace-picker {
  display: block !important;
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(15rem, 35vw);
}

#workspace.workspace .workspace-picker[hidden] { display: none !important; }
#workspace.workspace .workspace-picker-trigger {
  width: auto;
  max-width: min(15rem, 35vw);
  min-height: 2.35rem;
  padding: 0.4rem 0.7rem;
  font-size: 0.78rem;
}

#workspace.workspace .workspace-picker-menu { left: 0; right: auto; }
#workspace.workspace #workspace-page-nav {
  display: flex !important;
  order: 2;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

#workspace.workspace .workspace-admin-toggle {
  order: 3;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 2.2rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

#workspace.workspace .workspace-admin-toggle:hover,
#workspace.workspace .workspace-admin-toggle.is-active {
  border-color: var(--line);
  background: var(--accent-soft);
  color: var(--accent-deep);
}

#workspace.workspace .workspace-admin-toggle[hidden] { display: none !important; }
#workspace.workspace #workspace-page-nav[hidden] { display: none !important; }
#workspace.workspace #workspace-page-nav::-webkit-scrollbar { display: none; }

#workspace.workspace .brand-row > .ad-space-circles {
  flex: 1 0 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

#workspace.workspace .mobile-menu-trigger {
  width: 2.65rem;
  min-width: 2.65rem;
  height: 2.65rem;
  min-height: 2.65rem;
  justify-content: center;
  padding: 0;
  border-radius: 0.7rem;
}

#workspace.workspace .workspace-rail-empty {
  align-self: center;
  margin: auto;
  padding: 0.75rem;
  color: var(--ink-soft);
  font-size: 0.82rem;
  text-align: center;
}

/* AD keeps the same three information zones, with both dividers draggable and
   keyboard-operable through the shared rail controller. */
@media (min-width: 981px) {
  #workspace.workspace[data-product="ad"],
  #workspace.workspace[data-product="ad-admin"] {
    --handle: 8px;
    grid-template-columns: minmax(0, var(--rail-left)) var(--handle) minmax(0, 1fr) var(--handle) minmax(0, var(--rail-right));
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "tabs tabs tabs tabs tabs"
      "left hl chat hr right";
    gap: 0.35rem;
  }

  #workspace.workspace[data-product="ad"] .rail-handle,
  #workspace.workspace[data-product="ad-admin"] .rail-handle {
    display: block !important;
    min-width: var(--handle);
  }

  #workspace.workspace[data-product="ad"] .rail-left,
  #workspace.workspace[data-product="ad"] .rail-right,
  #workspace.workspace[data-product="ad-admin"] .rail-left,
  #workspace.workspace[data-product="ad-admin"] .rail-right {
    min-width: 0;
    overflow: auto;
  }
}

/* Empty Workspace rails remain reachable so their dividers can expand them. */
#workspace.workspace[data-product="workspace"] .rail-handle-left,
#workspace.workspace[data-product="workspace"] .rail-handle-right,
#workspace.workspace[data-product="workspace-admin"] .rail-handle-left,
#workspace.workspace[data-product="workspace-admin"] .rail-handle-right {
  display: block !important;
}

@media (max-width: 640px) {
  #workspace.workspace .chat-top { gap: 0.35rem; }
  #workspace.workspace .brand-sm { font-size: 1.25rem; }
  #workspace.workspace .workspace-nav-shell { gap: 0.3rem; }
  #workspace.workspace .workspace-picker-trigger { max-width: min(10rem, 42vw); }
  #workspace.workspace #workspace-page-nav button { padding-inline: 0.45rem; }
}

/* AD and generic Workspaces keep their Space row beneath the global destination row. */
#workspace.workspace[data-product="ad"] .brand-row,
#workspace.workspace[data-product="ad-admin"] .brand-row,
#workspace.workspace[data-product="workspace"] .brand-row,
#workspace.workspace[data-product="workspace-admin"] .brand-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "brand destinations"
    "spaces spaces";
  gap: 0.45rem 0.7rem;
  align-items: center;
  min-width: 0;
}

#workspace.workspace[data-product="ad"] .brand-row .brand-sm,
#workspace.workspace[data-product="ad-admin"] .brand-row .brand-sm,
#workspace.workspace[data-product="workspace"] .brand-row .brand-sm,
#workspace.workspace[data-product="workspace-admin"] .brand-row .brand-sm {
  grid-area: brand;
}

#workspace.workspace[data-product="ad"] .workspace-nav-shell,
#workspace.workspace[data-product="ad-admin"] .workspace-nav-shell,
#workspace.workspace[data-product="workspace"] .workspace-nav-shell,
#workspace.workspace[data-product="workspace-admin"] .workspace-nav-shell {
  grid-area: destinations;
}

#workspace.workspace[data-product="ad"] .ad-space-circles,
#workspace.workspace[data-product="ad-admin"] .ad-space-circles,
#workspace.workspace[data-product="workspace"] .ad-space-circles,
#workspace.workspace[data-product="workspace-admin"] .ad-space-circles {
  grid-area: spaces;
}

/* On phones the same destinations collapse to one compact selector.
   The full pill row remains the source of truth and stays available on wider displays. */
@media (max-width: 980px) {
  #workspace.workspace .workspace-nav-shell {
    flex: 1 1 auto;
    max-width: 100%;
  }

  #workspace.workspace .workspace-nav-shell .mode-switch {
    display: none !important;
  }

  #workspace.workspace .workspace-picker {
    display: block;
    flex: 1 1 auto;
    max-width: min(15rem, 58vw);
  }

  #workspace.workspace .workspace-picker-trigger {
    width: 100%;
    max-width: 100%;
    min-height: 2.35rem;
  }

  #workspace.workspace .workspace-picker-menu {
    left: 0;
    right: auto;
    width: min(20rem, calc(100vw - 4.8rem));
  }

  #workspace.workspace[data-product="ad"] .brand-row,
  #workspace.workspace[data-product="ad-admin"] .brand-row,
  #workspace.workspace[data-product="workspace"] .brand-row,
  #workspace.workspace[data-product="workspace-admin"] .brand-row {
    grid-template-columns: auto minmax(0, 1fr);
    width: 100%;
  }

  #workspace.workspace[data-product="workspace"] .rail-handle-left,
  #workspace.workspace[data-product="workspace"] .rail-handle-right,
  #workspace.workspace[data-product="workspace-admin"] .rail-handle-left,
  #workspace.workspace[data-product="workspace-admin"] .rail-handle-right {
    display: none !important;
  }
}

@media (max-width: 520px) {
  #workspace.workspace .brand-sm {
    font-size: 1.3rem;
  }

  #workspace.workspace .workspace-picker {
    max-width: min(12.5rem, 54vw);
  }

  #workspace.workspace .workspace-picker-trigger {
    padding-inline: 0.55rem;
    font-size: 0.72rem;
  }
}


/* === Personal Picture rails ===
   Personal owns one full-height Past rail on the left and Current + Whole on the right.
   Files are an explicit utility sheet and never consume a persistent rail row. */
@media (min-width: 981px) {
  #workspace.workspace[data-product="personal"] {
    --rail-left: 22%;
    --rail-right: 24%;
  }

  #workspace.workspace[data-product="personal"] .rail-left,
  #workspace.workspace[data-product="personal"] .rail-right {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr);
  }

  #workspace.workspace[data-product="personal"] .desktop-panel-tabs {
    display: none !important;
  }

  #workspace.workspace[data-product="personal"] #personal-left {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    height: 100%;
  }

  #workspace.workspace[data-product="personal"] #personal-left > .panel-past {
    min-height: 0;
    height: 100%;
  }

  #workspace.workspace[data-product="personal"] #personal-right {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    gap: 0.5rem;
    min-height: 0;
    height: 100%;
  }

  #workspace.workspace[data-product="personal"] #personal-right > .side {
    min-height: 0;
    height: auto;
  }

  #workspace.workspace[data-product="personal"] #panel-now {
    display: flex;
    flex-direction: column;
  }

  #workspace.workspace[data-product="personal"] #panel-now > .now-scroll {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 0;
  }

  #workspace.workspace[data-product="personal"] #panel-now .now-section {
    flex: 0 0 auto;
    min-height: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.45rem;
  }

  #workspace.workspace[data-product="personal"] #panel-now .now-section:last-child {
    border-bottom: 0;
  }

  #workspace.workspace[data-product="personal"] #panel-now .now-section > .side-scroll,
  #workspace.workspace[data-product="personal"] #panel-now #picture-panel {
    max-height: none;
    overflow: visible;
  }

  #workspace.workspace[data-product="personal"] #core-files-panel:not([hidden]) {
    display: none;
  }

  #workspace.workspace[data-product="personal"].desktop-sheet-open[data-desktop-sheet="files"] #core-files-panel {
    display: flex !important;
  }
}

/* Personal's four concepts stay stable on narrow screens. Now is one scrollable
   surface containing Current Picture, Current Work and Questions. */
@media (max-width: 980px) {
  #workspace.workspace[data-product="personal"][data-mobile-tab="current"] .rail-right {
    display: contents !important;
  }

  #workspace.workspace[data-product="personal"][data-mobile-tab="current"] #personal-right {
    display: flex !important;
    grid-area: chat;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  #workspace.workspace[data-product="personal"][data-mobile-tab="current"] #panel-now {
    display: flex !important;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    background: var(--panel);
    padding: 0.85rem 0.85rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
  }

  #workspace.workspace[data-product="personal"][data-mobile-tab="current"] #panel-now > .now-scroll {
    overflow: auto;
    overscroll-behavior: contain;
  }

  #workspace.workspace[data-product="personal"][data-mobile-tab="current"] #panel-now .now-section > .side-scroll,
  #workspace.workspace[data-product="personal"][data-mobile-tab="current"] #panel-now #picture-panel {
    overflow: visible;
  }
}

.side-card.is-active-picture {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

.side-card.is-active-picture .eyebrow {
  color: var(--accent-deep);
}

/* Keep Vault as a compact popup anchored to the composer, not a full-width row. */
.composer-dock > #vault-panel:not([hidden]) {
  left: auto;
  right: 0;
  width: min(30rem, calc(100% - 0.5rem));
  max-height: min(45dvh, 24rem);
  overflow: auto;
  overscroll-behavior: contain;
}

@media (max-width: 640px) {
  .composer-dock > #vault-panel:not([hidden]) {
    right: 0;
    width: min(100%, calc(100vw - 2rem));
    max-height: min(42dvh, 20rem);
  }
}

.workspace-admin-mobile-links,
.workspace-admin-mobile-back { display: none; }

/* Generic Workspace keeps chat central on phones and makes both side rails
   reachable without forcing horizontal scrolling or shrinking the chat. */
#workspace.workspace .workspace-mobile-panel-nav { display: none !important; }

@media (max-width: 980px) {
  #workspace.workspace[data-product="workspace"] {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    grid-template-areas: "workspace-mobile-panels" "chat" !important;
  }
  #workspace.workspace[data-product="workspace"] .workspace-mobile-panel-nav:not([hidden]) {
    display: flex !important;
    grid-area: workspace-mobile-panels;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    padding: calc(.3rem + env(safe-area-inset-top, 0px)) .55rem .3rem;
    border-bottom: 1px solid var(--line);
    background: var(--panel-strong);
  }
  #workspace.workspace .workspace-mobile-panel-nav[hidden] { display: none !important; }
  #workspace.workspace .workspace-mobile-panel-nav button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 2.35rem;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: .35rem .4rem;
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    font-size: .78rem;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #workspace.workspace .workspace-mobile-panel-nav button.is-active {
    border-color: var(--line);
    background: var(--accent-soft);
    color: var(--accent-deep);
  }
  #workspace.workspace[data-product="workspace"][data-workspace-mobile-panel="left"] .chat,
  #workspace.workspace[data-product="workspace"][data-workspace-mobile-panel="right"] .chat { display: none !important; }
  #workspace.workspace[data-product="workspace"][data-workspace-mobile-panel="left"] .rail-left,
  #workspace.workspace[data-product="workspace"][data-workspace-mobile-panel="right"] .rail-right { display: contents !important; }
  #workspace.workspace[data-product="workspace"][data-workspace-mobile-panel="left"] #workspace-experience-left,
  #workspace.workspace[data-product="workspace"][data-workspace-mobile-panel="right"] #workspace-experience-right {
    display: flex !important;
    position: fixed;
    top: calc(3.15rem + env(safe-area-inset-top, 0px));
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    padding: .65rem .65rem max(.65rem, env(safe-area-inset-bottom, 0px));
    overflow: auto;
    overscroll-behavior: contain;
    background: var(--panel-strong);
  }
}

@media (max-width: 980px) {
  #workspace.workspace[data-product="workspace-admin"] .workspace-admin-mobile-links {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .6rem;
  }
  #workspace.workspace[data-product="workspace-admin"] .workspace-admin-mobile-links button,
  #workspace.workspace[data-product="workspace-admin"] .workspace-admin-mobile-back {
    min-height: 2.4rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    color: var(--ink);
    padding: .45rem .7rem;
    font: inherit;
    font-weight: 650;
  }
  #workspace.workspace[data-product="workspace-admin"] .workspace-admin-mobile-back { display: inline-flex; margin-top: .45rem; }
  #workspace.workspace[data-product="workspace-admin"] .rail-left,
  #workspace.workspace[data-product="workspace-admin"] .rail-right { display: none !important; }
  #workspace.workspace[data-product="workspace-admin"][data-workspace-admin-rail="left"] .rail-left,
  #workspace.workspace[data-product="workspace-admin"][data-workspace-admin-rail="right"] .rail-right { display: contents !important; }
  #workspace.workspace[data-product="workspace-admin"][data-workspace-admin-rail="left"] .chat,
  #workspace.workspace[data-product="workspace-admin"][data-workspace-admin-rail="right"] .chat { display: none !important; }
  #workspace.workspace[data-product="workspace-admin"][data-workspace-admin-rail="left"] #workspace-experience-left,
  #workspace.workspace[data-product="workspace-admin"][data-workspace-admin-rail="right"] #workspace-experience-right {
    display: flex !important;
    position: fixed;
    inset: 0;
    z-index: 100;
    box-sizing: border-box;
    width: 100%;
    height: 100dvh;
    padding: max(.65rem, env(safe-area-inset-top, 0px)) .65rem max(.65rem, env(safe-area-inset-bottom, 0px));
    overflow: auto;
    background: var(--panel-strong);
  }
}

/* Deploy/version handoff: never silently leave an open tab on stale client code. */
.release-update-banner {
  margin: 0 .2rem .25rem;
  padding: .15rem .2rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .45rem;
  min-width: 0;
  font-size: .68rem;
}
.release-update-banner[hidden] { display: none !important; }
.release-update-banner span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.release-update-banner button { flex: 0 0 auto; padding: .2rem .55rem; font-size: .68rem; }
@media (max-width: 980px) {
  .release-update-banner {
    margin-inline: .1rem;
    align-items: center;
    flex-direction: row;
  }
}

@media (max-width: 980px) {
  #workspace.workspace[data-product="personal"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "tabs" "chat";
  }

  #workspace.workspace[data-mobile-tab="person"] #person-mobile-navigation {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.35rem;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 0 0 0.55rem;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #person-mobile-navigation::-webkit-scrollbar { display: none; }
  #person-mobile-navigation button {
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    padding: 0.4rem 0.65rem;
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    font-size: 0.78rem;
    white-space: nowrap;
  }
  #person-mobile-navigation button[aria-current="page"] {
    background: var(--accent-soft);
    color: var(--accent-deep);
  }

  #workspace.workspace > #mobile-navigation {
    grid-area: tabs;
    justify-content: flex-start;
  }

  #mobile-navigation .mobile-tabs-scroll {
    display: flex;
  }

  #mobile-navigation .mobile-menu {
    margin-left: auto;
    flex: 0 0 auto;
  }

  #workspace.workspace[data-mobile-tab="person"] .chat,
  #workspace.workspace[data-mobile-tab="history-preview"] .chat {
    display: grid;
  }

  #workspace.workspace[data-mobile-tab="past"] #person-navigation {
    display: none !important;
  }
}


/* === Personal Live Work UI v1 · 2026-09-29 ===
   One conversation, one live work surface, quiet side rails, Vault stays in composer. */
#workspace.workspace[data-product="personal"] {
  --personal-gap: 0.7rem;
}

#workspace.workspace[data-product="personal"] .chat,
#workspace.workspace[data-product="personal"] .side {
  border-color: color-mix(in srgb, var(--line) 72%, transparent);
  box-shadow: 0 10px 32px rgba(20, 28, 24, 0.045);
}

#workspace.workspace[data-product="personal"] .chat-status-stack,
#workspace.workspace[data-product="workspace"] .chat-status-stack {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}

#workspace.workspace[data-product="personal"] .personal-chat-controls,
#workspace.workspace[data-product="workspace"] .personal-chat-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.32rem;
  min-height: 1.75rem;
}

#workspace.workspace[data-product="personal"] .personal-chat-controls .ghost,
#workspace.workspace[data-product="workspace"] .personal-chat-controls .ghost {
  min-height: 1.65rem;
  padding: 0.2rem 0.55rem;
  border-color: color-mix(in srgb, var(--line) 82%, transparent);
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.72rem;
}

#workspace.workspace:not([data-product="personal"]):not([data-product="workspace"]) .personal-chat-controls {
  display: none;
}

#workspace.workspace[data-product="personal"] .messages {
  border: 0;
  background: transparent;
  gap: 0.72rem;
  padding: 1rem 1.05rem 1.15rem;
}

#workspace.workspace[data-product="personal"] .bubble.user {
  max-width: min(78%, 42rem);
  border: 0;
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent-soft) 74%, var(--panel));
  padding: 0.72rem 0.9rem;
}

#workspace.workspace[data-product="personal"] .bubble.zana {
  max-width: min(90%, 54rem);
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0.2rem 0;
}

#workspace.workspace[data-product="personal"] .msg-meta {
  padding-inline: 0.15rem;
}

#workspace.workspace[data-product="personal"] .thinking-status.live-work-status {
  align-self: stretch;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.8rem;
  width: min(100%, 56rem);
  max-width: 100%;
  margin: 0.1rem 0 0.35rem;
  padding: 1.05rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel-strong) 78%, #eef0ef);
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.48;
}

#workspace.workspace[data-product="personal"] .thinking-status.live-work-status .thinking-mark {
  display: grid;
  place-items: center;
  width: 1.72rem;
  height: 1.72rem;
  margin-top: 0.02rem;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 76%, var(--panel));
  color: var(--accent-deep);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1;
  opacity: 1;
  animation: live-work-presence 1.8s ease-in-out infinite;
}

#workspace.workspace[data-product="personal"] .thinking-status.live-work-status .thinking-copy {
  display: grid;
  gap: 0.42rem;
}

#workspace.workspace[data-product="personal"] .thinking-status.live-work-status .thinking-label {
  color: var(--ink);
  font-style: normal;
  font-weight: 520;
}

#workspace.workspace[data-product="personal"] .thinking-status.live-work-status .thinking-detail {
  color: var(--ink-soft);
  font-size: 0.8rem;
  line-height: 1.42;
  opacity: 0.78;
}

#workspace.workspace[data-product="personal"] .live-work-steer {
  display: block;
  margin-top: 0.18rem;
  padding-top: 0.52rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  color: var(--accent-deep);
  font-size: 0.78rem;
  font-weight: 650;
}

#workspace.workspace[data-product="personal"] .live-work-steer[hidden] {
  display: none !important;
}

#workspace.workspace[data-product="personal"] .thinking-status.live-work-status.is-popping .thinking-label {
  animation: live-work-copy-shift 180ms ease both;
}
@media (prefers-reduced-motion: reduce) {
  #workspace.workspace[data-product="personal"] .thinking-status.live-work-status.is-popping .thinking-label {
    animation: none;
  }
}

@keyframes live-work-presence {
  0%, 100% { transform: scale(0.96); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
  50% { transform: scale(1); box-shadow: 0 0 0 0.26rem color-mix(in srgb, var(--accent) 10%, transparent); }
}

@keyframes live-work-copy-shift {
  from { transform: translateY(2px); }
  to { transform: translateY(0); }
}

#workspace.workspace[data-product="personal"] .compose,
#workspace.workspace[data-product="workspace"] .compose {
  border-color: color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 18px;
  padding: 0.48rem 0.52rem 0.42rem;
  background: var(--panel-strong);
  box-shadow: 0 8px 24px rgba(20, 28, 24, 0.04);
}

#workspace.workspace[data-product="personal"] .composer-options-row,
#workspace.workspace[data-product="workspace"] .composer-options-row {
  padding: 0.15rem 0.3rem 0.05rem;
}

#workspace.workspace[data-product="personal"] .vault-inline-state,
#workspace.workspace[data-product="workspace"] .vault-inline-state {
  font-size: 0.7rem;
}

#workspace.workspace[data-product="personal"] .compose-tool,
#workspace.workspace[data-product="workspace"] .compose-tool {
  background: transparent;
  border-color: color-mix(in srgb, var(--line) 82%, transparent);
}

#workspace.workspace[data-product="personal"] .compose-send,
#workspace.workspace[data-product="workspace"] .compose-send {
  min-width: 4rem;
  padding-inline: 0.9rem !important;
}

#workspace.workspace[data-product="personal"] .compose-send[data-mode="cancel"],
#workspace.workspace[data-product="workspace"] .compose-send[data-mode="cancel"] {
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line);
}

#workspace.workspace[data-product="personal"] .person-navigation,
#workspace.workspace[data-product="personal"] .panel-past,
#workspace.workspace[data-product="personal"] #panel-now {
  background: transparent;
}

#workspace.workspace[data-product="personal"] .person-navigation button {
  border-radius: 999px;
}

#workspace.workspace[data-product="personal"] .history-conversation-row,
#workspace.workspace[data-product="personal"] .current-work-card {
  border-color: color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 14px;
  box-shadow: none;
}

#workspace.workspace[data-product="personal"] .current-work-card {
  padding: 0.7rem 0.75rem;
  background: color-mix(in srgb, var(--panel-strong) 88%, transparent);
}

#workspace.workspace[data-product="personal"] .current-work-summary {
  align-items: flex-start;
}

#workspace.workspace[data-product="personal"] .current-work-compact-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-weight: 650;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#workspace.workspace[data-product="personal"] .current-work-status {
  margin-left: auto;
  white-space: nowrap;
}

#workspace.workspace[data-product="personal"] #panel-now .now-section {
  padding-block: 0.65rem;
}

#workspace.workspace[data-product="personal"] #panel-now .now-section:first-child {
  padding-top: 0.2rem;
}

#workspace.workspace[data-product="personal"] #whole-hindsight-question-block {
  padding: 0.72rem 0.75rem;
  border: 1px solid color-mix(in srgb, #c69222 32%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, #fff7dc 42%, var(--panel));
}

#workspace.workspace[data-product="personal"] #whole-hindsight-question-block .question-text {
  margin-bottom: 0.35rem;
  font-weight: 650;
}

@media (min-width: 981px) {
  #workspace.workspace[data-product="personal"] {
    --handle: 10px;
    /* Rail widths are draggable again: the handles sit between the rails and the chat. */
    grid-template-columns: minmax(14rem, var(--rail-left)) var(--handle) minmax(28rem, 1fr) var(--handle) minmax(15rem, var(--rail-right));
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "left hl chat hr right";
    gap: 0;
    padding: var(--personal-gap);
  }

  #workspace.workspace[data-product="personal"] .rail-handle { display: block !important; min-width: var(--handle); }
  #workspace.workspace[data-product="personal"] .desktop-panel-tabs { display: none !important; }

  #workspace.workspace[data-product="personal"] .chat,
  #workspace.workspace[data-product="personal"] .side {
    border-radius: 22px;
  }

  #workspace.workspace[data-product="personal"] .chat {
    padding: 1rem 1.1rem 0.9rem;
  }

  #workspace.workspace[data-product="personal"] .rail-left,
  #workspace.workspace[data-product="personal"] .rail-right {
    gap: var(--personal-gap);
  }

  #workspace.workspace[data-product="personal"] .side {
    padding: 1rem;
  }

  #workspace.workspace[data-product="personal"] #panel-now > .now-scroll {
    gap: 0;
  }
}

@media (max-width: 980px) {
  #workspace.workspace[data-product="personal"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "tabs" "chat";
    background: var(--paper);
  }

  #workspace.workspace[data-product="personal"] > #mobile-navigation {
    position: relative;
    grid-area: tabs;
    min-height: calc(3.7rem + env(safe-area-inset-top, 0px));
    padding: calc(0.42rem + env(safe-area-inset-top, 0px)) 0.55rem 0.42rem;
    border-top: 0;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel-strong) 94%, transparent);
    backdrop-filter: blur(18px);
  }

  #workspace.workspace[data-product="personal"] #mobile-navigation .mobile-tabs-scroll {
    justify-content: space-around;
    gap: 0.15rem;
    overflow: visible;
  }

  #workspace.workspace[data-product="personal"] #mobile-navigation .mobile-tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: 2.55rem;
    border: 0;
    border-radius: 12px;
    padding: 0.45rem 0.35rem;
    text-align: center;
    font-size: 0.72rem;
  }

  #workspace.workspace[data-product="personal"] #mobile-navigation .mobile-tab.is-active {
    background: var(--accent-soft);
    color: var(--accent-deep);
  }

  #workspace.workspace[data-product="personal"] #mobile-navigation .mobile-menu-trigger {
    min-width: 2.55rem;
    min-height: 2.55rem;
    justify-content: center;
    padding: 0.45rem;
    border: 0;
    background: transparent;
  }

  #workspace.workspace[data-product="personal"] .chat {
    padding: 0.68rem 0.72rem 0.62rem;
    background: var(--panel);
  }

  #workspace.workspace[data-product="personal"] .chat-top {
    margin-bottom: 0.25rem;
  }

  #workspace.workspace[data-product="personal"] .messages {
    padding: 0.8rem 0.1rem 1rem;
  }

  #workspace.workspace[data-product="personal"] .bubble.user {
    max-width: 86%;
  }

  #workspace.workspace[data-product="personal"] .thinking-status.live-work-status {
    width: 100%;
    border-radius: 16px;
    padding: 0.92rem 0.95rem;
  }

  #workspace.workspace[data-product="personal"] .compose,
#workspace.workspace[data-product="workspace"] .compose {
    border-radius: 17px;
  }

  #workspace.workspace[data-product="personal"][data-mobile-tab="current"] #panel-now {
    padding: 0.9rem 0.85rem 1rem;
    background: var(--panel);
  }

  #workspace.workspace[data-product="personal"] .current-work-compact-name {
    white-space: normal;
  }

  #workspace.workspace[data-product="personal"] .current-work-line {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  #workspace.workspace[data-product="personal"] #vault-panel-host #vault-panel {
    max-height: min(42dvh, 20rem);
  }
}

@media (max-width: 520px) {
  #workspace.workspace[data-product="personal"] .chat-top {
    padding-inline: 0.15rem;
  }

  #workspace.workspace[data-product="personal"] .chat-top .brand-sm {
    font-size: 1.55rem;
  }

  #workspace.workspace[data-product="personal"] .workspace-picker {
    max-width: 48vw;
  }

  #workspace.workspace[data-product="personal"] .compose-tools,
#workspace.workspace[data-product="workspace"] .compose-tools {
    gap: 0.18rem;
  }

  #workspace.workspace[data-product="personal"] .compose-tool,
#workspace.workspace[data-product="workspace"] .compose-tool {
    width: 2rem;
    height: 2rem;
  }

  #workspace.workspace[data-product="personal"] .compose-send,
#workspace.workspace[data-product="workspace"] .compose-send {
    min-width: 3.8rem;
  }
}


/* iOS Safari zooms focused form controls whose computed font size is below 16px.
   These selectors intentionally outrank inherited .field and Vault rules. */
@media (max-width: 980px) {
  #gate input,
  #vault-panel input,
  #vault-panel select {
    font-size: 16px;
  }
}


/* === Personal mobile fixed viewport v1 · 2026-09-29 ===
   The app shell stays pinned to the device viewport. Only the active content
   surface scrolls, preventing Safari page/bounce scrolling from moving Zana. */
@media (max-width: 980px) {
  body:has(#workspace[data-product="personal"]:not([hidden])) {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  .shell:has(#workspace[data-product="personal"]:not([hidden])) {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    max-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  #workspace.workspace[data-product="personal"]:not([hidden]) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  #workspace.workspace[data-product="personal"] .messages,
  #workspace.workspace[data-product="personal"] .side-scroll,
  #workspace.workspace[data-product="personal"] .side-feed,
  #workspace.workspace[data-product="personal"] #panel-now > .now-scroll,
  #workspace.workspace[data-product="personal"] .panel-past,
  #workspace.workspace[data-product="personal"] #person-surface {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}


/* === Personal mobile polish + question overlay v1 · 2026-09-29 === */
.hindsight-question-toast {
  position: fixed;
  top: var(--zana-question-toast-top, 5rem);
  left: 50%;
  z-index: 195;
  width: min(34rem, calc(100vw - 1.5rem));
  padding: 0.78rem 2.4rem 0.78rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel-strong) 96%, transparent);
  color: var(--ink);
  box-shadow: 0 16px 42px rgba(20, 28, 24, 0.16);
  backdrop-filter: blur(18px);
  transform: translate3d(calc(-50% + var(--question-swipe-x, 0px)), 0, 0);
  touch-action: pan-y;
  animation: hindsight-question-drop 220ms cubic-bezier(.2,.8,.2,1) both;
}
.hindsight-question-toast[hidden] { display: none !important; }
@keyframes hindsight-question-drop {
  from { opacity: 0; transform: translate3d(calc(-50% + var(--question-swipe-x, 0px)), -18px, 0); }
  to { opacity: 1; transform: translate3d(calc(-50% + var(--question-swipe-x, 0px)), 0, 0); }
}
.hindsight-question-toast-summary { display: grid; gap: 0.22rem; cursor: pointer; outline: none; }
.hindsight-question-toast-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.hindsight-question-toast-eyebrow { color: var(--accent-deep); font-size: 0.7rem; font-weight: 750; letter-spacing: 0.02em; }
.hindsight-question-toast-summary strong { font-size: 0.94rem; line-height: 1.35; }
.hindsight-question-toast-hint { color: var(--ink-soft); font-size: 0.7rem; }
.hindsight-question-toast-close {
  position: absolute; top: 0.55rem; right: 0.55rem; width: 1.9rem; height: 1.9rem;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft);
  font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.hindsight-question-toast-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.45rem; margin-top: 0.65rem; }
.hindsight-question-toast-form[hidden] { display: none !important; }
.hindsight-question-toast-form input {
  min-width: 0; border: 1px solid var(--line); border-radius: 999px; padding: 0.62rem 0.8rem;
  background: var(--input-bg); color: var(--ink); font: inherit; font-size: 16px;
}
.hindsight-question-toast-form .primary { margin: 0; padding: 0.6rem 0.85rem; border-radius: 999px; }
.hindsight-question-toast-feedback { margin: 0.45rem 0 0; color: var(--ink-soft); font-size: 0.72rem; }
.chat-notices { display: grid; gap: 0.25rem; min-width: 0; }

@media (max-width: 980px) {
  .shell:has(#workspace[data-product="personal"]:not([hidden])) {
    top: var(--zana-visual-top, 0px);
    right: 0;
    bottom: auto;
    left: 0;
    height: var(--zana-visual-height, 100dvh);
    max-height: var(--zana-visual-height, 100dvh);
  }
  #workspace.workspace[data-product="personal"] .chat {
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    min-height: 0; height: 100%;
  }
  #workspace.workspace[data-product="personal"] .chat-notices { grid-row: 2; min-height: 0; }
  #workspace.workspace[data-product="personal"] #session-status { display: none; }
  #workspace.workspace[data-product="personal"] #budget-notice:not([hidden]) {
    display: block; margin: 0; padding: 0.35rem 0.5rem; border-radius: 10px;
    background: color-mix(in srgb, var(--accent-soft) 45%, transparent);
    color: var(--ink-soft); font-size: 0.72rem; line-height: 1.35;
  }
  #workspace.workspace[data-product="personal"] .messages { grid-row: 3; }
  #workspace.workspace[data-product="personal"] .composer-dock { grid-row: 4; min-height: 0; }
  #workspace.workspace[data-product="personal"] .voice-composer-host { grid-row: 5; }

  #workspace.workspace[data-product="personal"] .chat.is-person-view {
    grid-template-rows: minmax(0, 1fr); gap: 0; padding: 0;
  }
  #workspace.workspace[data-product="personal"] .chat.is-person-view > .chat-top,
  #workspace.workspace[data-product="personal"] .chat.is-person-view > .chat-notices { display: none !important; }
  #workspace.workspace[data-product="personal"] .chat.is-person-view #person-surface {
    grid-row: 1; height: 100%; padding: 1rem; gap: 0.8rem;
  }
  #workspace.workspace[data-product="personal"] .chat.is-person-view #person-chat-return { display: none; }
  #workspace.workspace[data-product="personal"] .person-section-content { max-width: none; }
  #workspace.workspace[data-product="personal"] .person-mobile-navigation { flex: 0 0 auto; }

  #workspace.workspace[data-product="personal"][data-mobile-tab="current"] #panel-now > .now-scroll {
    justify-content: flex-start; gap: 0.9rem;
  }
  #workspace.workspace[data-product="personal"][data-mobile-tab="current"] #panel-now .now-section,
  #workspace.workspace[data-product="personal"][data-mobile-tab="current"] #panel-now .now-section > .side-scroll,
  #workspace.workspace[data-product="personal"][data-mobile-tab="current"] #panel-now #picture-panel,
  #workspace.workspace[data-product="personal"][data-mobile-tab="current"] #current-work-panel,
  #workspace.workspace[data-product="personal"][data-mobile-tab="current"] #questions-panel {
    flex: 0 0 auto; min-height: 0; height: auto;
  }
  #workspace.workspace[data-product="personal"][data-mobile-tab="current"] #panel-now .now-section {
    padding-block: 0.35rem 0.85rem;
  }

  /* One implicit auto column sizes to the widest child; pin it to the screen so nothing can push the page sideways. */
  #workspace.workspace[data-product="personal"] .chat { grid-template-columns: minmax(0, 1fr); }
  #workspace.workspace[data-product="personal"] .chat > *,
#workspace.workspace[data-product="personal"] .composer-dock { min-width: 0; max-width: 100%; }
  /* Typing on a phone: the whole top (tabs, Zana/Personal row, usage notice) steps away and the chat runs to the top of the screen.
     .zana-typing is set while the message box has focus (the keyboard-size check alone is unreliable on iOS). !important: base rules force these to flex/grid. */
  /* Only while the keyboard is really up (focus alone made the header flicker when the mic or a button took focus). */
  html.zana-typing.zana-keyboard-open #workspace.workspace[data-product="personal"] > #mobile-navigation,
  html.zana-typing.zana-keyboard-open #workspace.workspace[data-product="personal"] .chat > .chat-top,
  html.zana-typing.zana-keyboard-open #workspace.workspace[data-product="personal"] .chat > .chat-notices { display: none !important; }
  html.zana-typing.zana-keyboard-open #workspace.workspace[data-product="personal"] .chat { gap: 0.25rem; padding-top: 0.5rem; }
  html.zana-typing.zana-keyboard-open .shell:has(#workspace[data-product="personal"]:not([hidden])),
  html.zana-typing.zana-keyboard-open #workspace.workspace[data-product="personal"] { padding-top: 0; }
  html.zana-keyboard-open #workspace.workspace[data-product="personal"] .chat { padding-bottom: 0.35rem; }
  html.zana-keyboard-open #workspace.workspace[data-product="personal"] .messages { overscroll-behavior: contain; }
  html.zana-keyboard-open #workspace.workspace[data-product="personal"] .compose {
    box-shadow: 0 8px 22px rgba(20, 28, 24, 0.08);
  }
}
@media (max-width: 520px) {
  .hindsight-question-toast { width: calc(100vw - 1rem); padding: 0.72rem 2.25rem 0.72rem 0.8rem; border-radius: 16px; }
  .hindsight-question-toast-form { grid-template-columns: minmax(0, 1fr) auto; }
  #workspace.workspace[data-product="personal"] .compose,
#workspace.workspace[data-product="workspace"] .compose { grid-template-columns: minmax(0, 1fr) auto; }
  #workspace.workspace[data-product="personal"] .compose textarea,
#workspace.workspace[data-product="workspace"] .compose textarea { font-size: 16px; }
}

/* Core -> Plan offer: states the outcome and lets the person choose */
.plan-offer { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line, rgba(127,127,127,.35)); border-radius: 12px; }
.plan-offer-label { margin: 0 0 4px; font-size: 12px; opacity: .75; }
.plan-offer-outcome { margin: 0 0 10px; font-weight: 600; }
.plan-offer-actions { display: flex; gap: 8px; flex-wrap: wrap; }


/* Desktop: the optional question sits quietly at the bottom right (never over the header), and tapping it opens a quick answer box. */
@media (min-width: 981px) {
  .hindsight-question-toast { top: auto; bottom: 1.25rem; left: auto; right: 1.25rem; width: min(24rem, 30vw); transform: translate3d(var(--question-swipe-x, 0px), 0, 0); animation: hindsight-question-rise 220ms cubic-bezier(.2,.8,.2,1) both; }
  @keyframes hindsight-question-rise { from { opacity: 0; transform: translate3d(var(--question-swipe-x, 0px), 14px, 0); } to { opacity: 1; transform: translate3d(var(--question-swipe-x, 0px), 0, 0); } }
}

.workspace-builder-card.is-compact { display: flex; align-items: center; gap: .75rem; padding: .5rem .8rem; }
.workspace-builder-card.is-compact .workspace-builder-details { flex: 1 1 auto; min-width: 0; }
.workspace-builder-oneline { cursor: pointer; font-weight: 600; font-size: .95rem; list-style-position: inside; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.workspace-builder-details[open] .workspace-builder-oneline { white-space: normal; }
.workspace-builder-details .workspace-builder-summary { max-height: 40vh; overflow: auto; margin-top: .5rem; white-space: pre-wrap; }
.workspace-builder-card.is-compact .ws-builder-btn { flex: 0 0 auto; }
@media (max-width: 760px) { .workspace-builder-card.is-compact { flex-direction: column; align-items: stretch; } }

.person-overview-head { margin: 1rem 0 .3rem; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.person-overview-head:first-child { margin-top: 0; }
.person-overview-list { margin: 0 0 .4rem; padding-left: 1.1rem; display: grid; gap: .25rem; }
.person-overview-list li { line-height: 1.4; }
.person-overview-more { opacity: .6; list-style: none; margin-left: -1.1rem; }

.person-add-btn { align-self: flex-start; margin: 0 0 .4rem; padding: .35rem .9rem; border-radius: 99px; border: 1px solid var(--accent, #42b9a4); background: transparent; color: var(--accent, #42b9a4); font: inherit; font-weight: 600; cursor: pointer; }
.person-add-btn:hover { background: color-mix(in srgb, var(--accent, #42b9a4) 14%, transparent); }
.person-add-btn[hidden] { display: none; }

/* Cancel is red wherever it appears: the composer button while Zana works or listens, and the voice bar's Cancel. */
#send-btn[data-mode="cancel"], .voice-panel-close.is-cancel { background: #c0392b !important; border-color: #c0392b !important; color: #fff !important; }
#send-btn[data-mode="cancel"]:hover, .voice-panel-close.is-cancel:hover { background: #a93226 !important; }

.plan-change { display: grid; gap: .5rem; margin: .6rem 0; } .plan-change textarea, .plan-change input { width: 100%; box-sizing: border-box; font: inherit; padding: .55rem .7rem; border-radius: 10px; border: 1px solid var(--line, rgba(128,128,128,.3)); background: transparent; color: inherit; }
.plan-missing { margin: .6rem 0; padding: .6rem .8rem; border-radius: 12px; border: 1px solid var(--accent-amber, #d4a24a); } .plan-missing h4 { margin: 0 0 .3rem; }

/* A plan message is never clipped: its buttons are always reachable. */
.msg-row .bubble.plan-message, .msg-row:has(.plan-message) { max-height: none !important; overflow: visible !important; }
.plan-message .plan-message-actions { margin-top: .6rem; padding-bottom: .4rem; position: relative; z-index: 1; }

.plan-answer { display: flex; gap: .5rem; margin-top: .35rem; } .plan-answer input { flex: 1; min-width: 0; font: inherit; padding: .45rem .65rem; border-radius: 10px; border: 1px solid var(--line, rgba(128,128,128,.3)); background: transparent; color: inherit; }

.work-progress { display: flex; align-items: center; gap: .6rem; margin: .5rem 0; padding: .55rem .8rem; border-radius: 12px; border: 1px solid var(--line, rgba(128,128,128,.3)); font-size: .88rem; }
.work-progress-dot { width: .6rem; height: .6rem; border-radius: 50%; background: #F08A24; animation: agent-pulse 1.4s ease-in-out infinite; flex: none; }
.work-progress-text { flex: 1; min-width: 0; } .work-progress-clock { opacity: .6; font-variant-numeric: tabular-nums; }
.work-progress.is-done .work-progress-dot { background: #4fbf8a; animation: none; } .work-progress.is-failed .work-progress-dot { background: #c0392b; animation: none; }

.plan-message .plan-spend { display: grid; gap: .3rem; margin: .6rem 0; font-size: .85rem; } .plan-message .plan-spend input { padding: .5rem .7rem; border-radius: 10px; border: 1px solid var(--line, rgba(128,128,128,.35)); background: transparent; color: inherit; max-width: 10rem; }
.sr-card .sr-ask { margin-top: .5rem; flex-wrap: wrap; } .sr-card .sr-ask input { flex: 1 1 9rem; }

.notif-offer { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .35rem 0; padding: .45rem .7rem; border: 1px solid var(--line, rgba(128,128,128,.3)); border-radius: 12px; font-size: .85rem; } .notif-offer span { flex: 1 1 12rem; }

/* Workspace chat has more stacked parts (heading, update banner, notices) than the fixed 5-row grid was written for;
   a flex column lets the message list take the leftover height instead of the flexible row landing on a zero-height notice. */
@media (min-width: 981px) {
  #workspace.workspace:not([data-product="personal"]) > .chat { display: flex; flex-direction: column; gap: 0.55rem; }
  #workspace.workspace:not([data-product="personal"]) > .chat > * { flex: 0 0 auto; min-width: 0; }
  #workspace.workspace:not([data-product="personal"]) > .chat > .chat-stream { flex: 1 1 0; min-height: 4rem; overflow: hidden; }
  #workspace.workspace:not([data-product="personal"]) > .chat > #chat-notices { min-height: 0; }
}

.member-onboarding { display: grid; gap: .5rem; margin-top: .6rem; } .member-onboarding input { padding: .55rem .75rem; border-radius: 10px; border: 1px solid var(--line, rgba(128,128,128,.35)); background: transparent; color: inherit; font: inherit; }

/* Team chat: GroupMe-style bubbles with a bar pinned at the bottom */
.team-chat { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; height: 100%; gap: .5rem; }
.team-chat-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .3rem; padding: .25rem .1rem; }
.team-chat-day { align-self: center; font-size: .72rem; color: var(--ink-soft); margin: .6rem 0 .2rem; }
.team-chat-msg { max-width: 82%; align-self: flex-start; background: var(--input-bg, rgba(128,128,128,.14)); border-radius: 18px 18px 18px 6px; padding: .45rem .75rem; }
.team-chat-msg.is-mine { align-self: flex-end; background: var(--accent, #2f7d5b); color: #fff; border-radius: 18px 18px 6px 18px; }
.team-chat-name { font-size: .72rem; font-weight: 700; opacity: .75; margin-bottom: .1rem; }
.team-chat-text { white-space: pre-wrap; word-break: break-word; font-size: .95rem; line-height: 1.35; }
.team-chat-time { font-size: .65rem; opacity: .65; text-align: right; margin-top: .1rem; }
.team-chat-bar { display: flex; align-items: flex-end; gap: .4rem; flex: 0 0 auto; }
.team-chat-bar textarea { flex: 1; resize: none; border-radius: 20px; padding: .6rem .9rem; font: inherit; max-height: 120px; }
.team-chat-send { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 0; background: var(--accent, #2f7d5b); color: #fff; font-size: 1rem; cursor: pointer; }
.space-edit-panel { display: grid; gap: .5rem; margin: .4rem 0 .8rem; padding: .7rem; border: 1px solid var(--line); border-radius: 12px; }
.space-edit-panel textarea { width: 100%; box-sizing: border-box; font: inherit; border-radius: 10px; padding: .55rem; }
.space-edit-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
/* Workspace chat controls use the Personal layout (see the shared composer rules). */

.admin-nav { display: flex; gap: .4rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
.admin-tab-btn.is-active { background: var(--accent-soft, rgba(15,107,92,.14)); font-weight: 600; }

/* Sign-in: Google is a real button, not a text link. */
#google-signin-btn { width: 100%; border: 1px solid var(--line, rgba(128,128,128,.4)); padding: .75rem 1rem; border-radius: 999px; font-weight: 650; font-size: .95rem; cursor: pointer; background: transparent; color: inherit; }
#google-signin-btn:hover { background: var(--accent-soft, rgba(255,255,255,.06)); }
.login-alt { margin-top: .6rem; font-size: .85rem; opacity: .85; }
.login-alt summary { cursor: pointer; }

/* Space buttons: labelled pills that size to their text in every Workspace (circles of fixed width made labels overlap). */
#workspace.workspace .ad-space-circles .ad-space-circle { width: auto; min-width: 0; height: auto; min-height: 2rem; padding: .3rem .75rem; border-radius: 999px; white-space: nowrap; flex: 0 0 auto; font-size: .78rem; }
#workspace.workspace .ad-space-circles { flex-wrap: wrap; gap: .4rem; overflow: visible; max-width: 100%; }

.zr-svg-preview { display: block; max-width: min(100%, 420px); height: auto; margin: .5rem 0; border-radius: 10px; background: #fff; }

.image-lightbox { position: fixed; inset: 0; z-index: 9998; background: rgba(8,10,12,.92); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.image-lightbox img { max-width: min(96vw, 1100px); max-height: 90vh; border-radius: 12px; }
.image-lightbox-close { position: absolute; top: 14px; right: 14px; background: #fff; color: #111; border: 0; border-radius: 999px; padding: 8px 16px; font-weight: 600; cursor: pointer; }
#voice-stop-speaking { background: #b94a48; color: #fff; border-color: transparent; font-weight: 650; }

/* Team channels get a full conversation view, with the same controls on desktop and phones.
   The dock stays the height of the column. Only the message list scrolls, so the last bubble is not cut off by the composer. */
.workspace[data-team-chat-open="true"] #ad-space-dock { overflow: hidden; min-height: 0; }
.workspace[data-team-chat-open="true"] #ad-space-dock-body { display: flex; flex-direction: column; overflow: hidden; min-height: 0; flex: 1 1 auto; }
.workspace[data-team-chat-open="true"] .team-chat { flex: 1 1 auto; min-height: 0; height: auto; max-height: 100%; overflow: hidden; }
.team-chat-toolbar, .team-chat-pinned, .team-chat-status, .team-chat-reply-preview, .team-chat-previews, .team-chat-compose-tools, .team-chat-bar, .team-chat-emoji-picker { flex: 0 0 auto; }
.workspace[data-team-chat-open="true"] .ad-space-dock-head { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.workspace[data-team-chat-open="true"] .ad-space-dock-head h2 { font-size: 1.35rem; }
.team-chat { gap: 8px; color: var(--ink); }
.team-chat-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 4px 0 10px; }
.team-chat-toolbar button, .team-chat-compose-tools button { border-radius: 12px; padding: 8px 12px; font: inherit; color: var(--ink); }
.team-chat-search { flex: 1; min-width: 140px; border-radius: 12px; font: inherit; padding: 10px 12px; }
.team-chat-list { padding: 12px; gap: 10px; overscroll-behavior: contain; scrollbar-gutter: stable; }
.team-chat-msg { max-width: min(76%, 640px); padding: 12px 16px; border-radius: 18px 18px 18px 4px; background: var(--input-bg, rgba(128,128,128,.14)); }
.team-chat-msg.is-mine { color: #10251d; background: #82d8b0; border-radius: 18px 18px 4px 18px; }
.team-chat-name { font-size: .78rem; margin-bottom: 6px; opacity: .9; }
.team-chat-day { font-size: .8rem; margin: 16px 0 4px; }
.team-chat-message-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .72rem; }
.ad-space-dock .team-chat-message-actions button, .team-chat-message-actions summary { border: 0; background: transparent; color: inherit; padding: 4px 2px; font: inherit; cursor: pointer; opacity: .8; }
.team-chat-message-actions time { margin-left: auto; white-space: nowrap; }
.team-chat-reactions { display: flex; flex-wrap: wrap; gap: 5px; }
.ad-space-dock .team-chat-reactions button { border-radius: 16px; background: rgba(0,0,0,.08); color: inherit; padding: 3px 8px; margin-top: 6px; font-size: .8rem; }
.team-chat-reactions button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px currentColor; }
.team-chat-react-menu { position: relative; }
.team-chat-react-menu > div { position: absolute; bottom: 100%; left: 0; display: flex; width: 220px; flex-wrap: wrap; padding: 6px; background: var(--panel-strong); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; z-index: 3; }
.team-chat-photo { display: block; max-width: 100%; max-height: 360px; width: auto; border-radius: 12px; margin: 6px 0; cursor: zoom-in; }
.team-chat-quoted { margin: 4px 0 8px; padding: 6px 10px; border-left: 3px solid currentColor; opacity: .8; font-size: .85rem; white-space: pre-wrap; }
.team-chat-pinned { display: flex; gap: 8px; flex-wrap: wrap; border-radius: 12px; background: var(--input-bg); padding: 8px; }
.team-chat-pinned button { text-align: left; font-size: .8rem; }
.team-chat-compose-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.team-chat-bar { gap: 10px; }
.team-chat-bar textarea { min-width: 0; width: 100%; border-radius: 16px; min-height: 48px; padding: 12px 16px; }
.ad-space-dock .team-chat-send { width: 48px; height: 48px; border-radius: 50%; background: #82d8b0; color: #10251d; font-size: 1.2rem; }
.team-chat-status { font-size: .8rem; color: var(--ink-soft); margin: 0; }
.team-chat-status:empty { display: none; }
.team-chat-empty { align-self: center; max-width: 320px; text-align: center; color: var(--ink-soft); padding: 32px 0; }
.team-chat-reply-preview { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-left: 3px solid #82d8b0; padding: 8px 12px; font-size: .82rem; }
.team-chat-previews { display: flex; gap: 10px; }
.team-chat-photo-preview { position: relative; }
.team-chat-photo-preview img { width: 80px; height: 80px; object-fit: cover; border-radius: 10px; }
.team-chat-photo-preview button { display: block; font-size: .72rem; padding: 3px 6px; }
.team-chat-emoji-picker { display: flex; gap: 5px; flex-wrap: wrap; padding: 8px; border: 1px solid var(--line); border-radius: 12px; }
.team-chat-emoji-picker button { font-size: 1.25rem; padding: 5px 8px; background: transparent; }
.team-chat-photo-dialog { background: var(--panel-strong); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; padding: 16px; max-width: 90vw; max-height: 90dvh; }
.team-chat-photo-dialog::backdrop { background: rgba(0,0,0,.8); }
.team-chat-photo-dialog img { display: block; max-width: 85vw; max-height: 75dvh; margin-top: 12px; object-fit: contain; }
.ad-space-circle[data-unread="true"]::after { content: ''; width: 9px; height: 9px; background: #82d8b0; border-radius: 50%; margin-left: 6px; display: inline-block; }
.workspace-admin-next-steps { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; display: flex; flex-direction: column; gap: 8px; }
.workspace-admin-next-steps h3, .workspace-admin-next-steps p { margin: 0; }
.workspace-admin-next-steps p { font-size: .88rem; color: var(--ink-soft); }
.workspace-admin-next-steps button { text-align: left; white-space: normal; }
@media (max-width: 700px) {
  .workspace[data-team-chat-open="true"] #ad-space-dock:not([hidden]) { inset: 0; height: 100dvh; border-radius: 0; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
  .team-chat-toolbar { gap: 6px; padding-bottom: 0; }
  .team-chat-search { flex-basis: 100%; }
  .team-chat-toolbar button { font-size: .76rem; padding: 7px 9px; }
  .team-chat-list { padding: 8px 0; }
  .team-chat-msg { max-width: 87%; padding: 10px 12px; }
  .team-chat-photo { max-height: 280px; }
  .team-chat-compose-tools button { font-size: .8rem; padding: 8px 10px; }
}

.team-chat-camera-dialog { border-radius: 20px; border: 1px solid var(--line); padding: 20px; background: var(--panel-strong); color: var(--ink); max-width: min(640px, 92vw); }
.team-chat-camera-dialog::backdrop { background: rgba(0,0,0,.7); }
.team-chat-camera-dialog video { width: 100%; max-height: 60dvh; border-radius: 12px; }
.team-chat-camera-dialog button { padding: 10px 16px; margin: 12px 8px 0 0; border-radius: 12px; font: inherit; }

/* Settings actions looked like plain text; give them an outline so they read as buttons. */
.settings-dialog section button.ghost {
  border: 1px solid var(--line, rgba(128,128,128,.4)); border-radius: 8px; padding: .4rem .7rem; margin: .2rem .35rem .2rem 0; cursor: pointer;
}
.settings-dialog section button.ghost:hover { border-color: var(--accent, #7cc9a9); }
/* A directed mention stays distinct from ordinary team messages. */
.team-chat-msg.is-mentioned { outline: 1px solid var(--accent, #80d6b1); }
.team-chat-mention-label { display: block; font-size: 11px; margin-bottom: 4px; font-weight: 600; }

.carpool-calendar { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--line, rgba(128,128,128,.3)); display: grid; gap: .5rem; }
.carpool-calendar textarea, .carpool-calendar input[type=text], .carpool-calendar select, .carpool-calendar input[type=datetime-local] { width: 100%; box-sizing: border-box; }
.cc-swap { padding: .6rem .7rem; border: 1px solid var(--line, rgba(128,128,128,.3)); border-radius: 10px; margin: .4rem 0; }
.cc-saved { margin: 0; padding-left: 1.1rem; font-size: .85rem; }

/* The side panels fill their whole rail (they were sizing to their text and left a gap next to the centre). */
.workspace-experience-rail { flex: 1 1 100%; width: 100%; min-width: 0; }

.team-chat-name { display: flex; align-items: center; gap: 8px; }
.team-chat-avatar { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .72rem; font-weight: 700; background: rgba(0,0,0,.2); color: inherit; flex: 0 0 auto; }
.team-chat-msg.is-mine .team-chat-avatar { background: rgba(16,37,29,.22); }

/* A view opened from Views (Help, Team chat, Carpools, Assignments) takes the left column and widens it; closing it brings the panels back. */
@media (min-width: 901px) {
  .workspace[data-product="workspace"][data-space-open] { --rail-left: minmax(340px, 36%); }
}

/* A private onboarding epoch is a focused first-conversation surface, not the
   full Personal control room. It uses the existing chat and Core path. */
.personal-birth-welcome {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: clamp(1.5rem, 7vh, 5rem) 1.2rem;
  text-align: center;
  overflow: auto;
}

.personal-birth-welcome[hidden] { display: none !important; }
.personal-birth-mark {
  font-size: 0.94rem;
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 50%;
  color: var(--accent-deep);
  font-size: 0.94rem;
  font-weight: 650;
  letter-spacing: -0.04em;
  box-shadow: 0 0 0 0.65rem color-mix(in srgb, var(--accent) 7%, transparent);
}
.personal-birth-welcome .eyebrow { margin: 1rem 0 0; }
.personal-birth-welcome h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.1rem); letter-spacing: -0.045em; }
.personal-birth-lede { margin: 0.15rem 0 0; font-size: clamp(1.08rem, 2.3vw, 1.3rem); }
.personal-birth-copy { max-width: 34rem; margin: 0.35rem 0 0; color: var(--ink-soft); line-height: 1.55; }
.personal-birth-question { margin: 1.35rem 0 0; font-weight: 650; }

.personal-product-orientation {
  width: min(54rem, calc(100vw - 2rem));
  max-height: min(90vh, 58rem);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  padding: clamp(1.1rem, 3vw, 1.8rem);
  color: var(--ink);
  background: var(--panel);
  box-shadow: 0 1.5rem 5rem rgb(0 0 0 / 38%);
}
.personal-product-orientation::backdrop { background: rgb(0 0 0 / 66%); backdrop-filter: blur(4px); }
.personal-product-orientation > header,
.personal-product-orientation > footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.personal-product-orientation h2 { margin: 0; font: 650 clamp(1.45rem, 3vw, 2rem)/1.2 var(--font-display); }
.personal-orientation-intro { margin: 0.7rem 0 1.1rem; color: var(--ink-soft); }
.personal-orientation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.personal-orientation-grid section { min-width: 0; border: 1px solid var(--line); border-radius: 0.9rem; padding: 1rem; background: color-mix(in srgb, var(--panel) 86%, var(--ink) 3%); }
.personal-orientation-grid h3 { margin: 0 0 0.55rem; font-size: 1rem; }
.personal-orientation-grid p { margin: 0.45rem 0 0; color: var(--ink-soft); line-height: 1.5; }
.personal-product-orientation > footer { margin-top: 1.2rem; color: var(--ink-soft); }
.personal-product-orientation[hidden] { display: none; }
@media (max-width: 720px) {
  .personal-orientation-grid { grid-template-columns: 1fr; }
  .personal-product-orientation > header,
  .personal-product-orientation > footer { align-items: flex-start; }
  .personal-product-orientation > footer { flex-direction: column; }
}

.personal-chat-purpose {
  margin-right: auto;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}
.workspace:not([data-product="personal"]) #personal-chat-purpose { display: none; }

/* A conversational introduction never changes access to the Personal app. */
#workspace[data-personal-onboarding="unavailable"] .desktop-panel-tabs,
#workspace[data-personal-onboarding="unavailable"] #mobile-navigation,
#workspace[data-personal-onboarding="unavailable"] .rail,
#workspace[data-personal-onboarding="unavailable"] .rail-handle,
#workspace[data-personal-onboarding="unavailable"] .chat-top,
#workspace[data-personal-onboarding="unavailable"] #session-status,
#workspace[data-personal-onboarding="unavailable"] #chat-notices,
#workspace[data-personal-onboarding="unavailable"] #messages,
#workspace[data-personal-onboarding="unavailable"] #zana-welcome,
#workspace[data-personal-onboarding="unavailable"] #personal-birth-welcome,
#workspace[data-personal-onboarding="unavailable"] #compose,
#workspace[data-personal-onboarding="unavailable"] #person-surface,
#workspace[data-personal-onboarding="unavailable"] #history-surface,
#workspace[data-personal-onboarding="unavailable"] #workspace-mobile-panel-nav {
  display: none !important;
}
#workspace[data-personal-onboarding="unavailable"] {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  grid-template-areas: "chat" !important;
  gap: 0 !important;
  padding: 0 !important;
}
#workspace[data-personal-onboarding="unavailable"] #chat {
  display: flex !important;
  grid-area: chat;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  padding: 0 clamp(0.75rem, 4vw, 2rem);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#workspace[data-personal-onboarding="unavailable"] #release-update-banner {
  flex: 0 0 auto;
  align-self: center;
  width: min(100%, 36rem);
  box-sizing: border-box;
  margin: max(0.6rem, env(safe-area-inset-top, 0px)) auto 0.5rem;
}
.personal-startup-unavailable {
  flex: 0 1 auto;
  width: min(100%, 34rem);
  margin: auto;
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: center;
}
.personal-startup-unavailable[hidden] { display: none !important; }
.personal-startup-unavailable h1 { font-size: clamp(1.3rem, 5vw, 1.6rem); line-height: 1.2; letter-spacing: -0.03em; }
.personal-startup-unavailable p { max-width: 38ch; margin-inline: auto; color: var(--ink-soft); line-height: 1.55; }

@media (max-width: 980px) {
  #workspace.workspace[data-personal-onboarding="unavailable"]:not([hidden]) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-template-areas: "chat" !important;
  }

  #workspace[data-personal-onboarding="unavailable"] #chat {
    padding-inline: max(0.75rem, env(safe-area-inset-left, 0px)) max(0.75rem, env(safe-area-inset-right, 0px));
  }

  #workspace[data-personal-onboarding="unavailable"] #release-update-banner {
    margin-top: max(0.5rem, env(safe-area-inset-top, 0px));
  }

  #workspace[data-personal-onboarding="unavailable"] .personal-startup-unavailable {
    width: min(100%, 34rem);
    padding: 0.75rem 0.25rem;
  }
}
.shell-quiet { opacity: .65; font-size: .85rem; margin: .3rem 0; }
.shell-need { display: grid; gap: .15rem; text-align: left; }
.shell-need span { font-size: .8rem; opacity: .75; }
.shell-view { text-align: left; }
.shell-card, .shell-help-card { border: 1px solid var(--line); border-radius: 12px; padding: .7rem .85rem; margin: .5rem 0; background: var(--input-bg, rgba(128,128,128,.08)); }
.shell-card h3, .shell-help-card h3 { margin: 0 0 .35rem; font-size: .95rem; }
.shell-help-card p { margin: 0; font-size: .88rem; line-height: 1.45; }
.shell-list { margin: 0; padding-left: 1.1rem; font-size: .88rem; display: grid; gap: .2rem; }
.shell-list .is-done { opacity: .6; text-decoration: line-through; }
.shell-strong { font-weight: 650; margin: .1rem 0; }
.shell-fact { font-size: .85rem; margin: .25rem 0; }
.shell-tabs { display: flex; gap: .4rem; margin-bottom: .5rem; }
.shell-tab.is-on { border-color: var(--accent, #7cc9a9); }

/* Voice controls occupy a normal row directly below the message field. */
#workspace .composer-dock > #voice-composer-host {
  position: relative !important;
  display: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
#workspace .composer-dock > #voice-composer-host:has(> #voice-modes-panel:not([hidden])) {
  display: block !important;
  margin-top: .5rem !important;
}
#workspace .composer-dock #voice-composer-host > #voice-modes-panel:not([hidden]) {
  position: relative !important;
  display: block !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 100%;
  max-height: none;
  overflow: visible;
  z-index: auto !important;
  box-sizing: border-box;
  margin: 0 !important;
  padding: .65rem !important;
  border: 1px solid var(--line);
  border-radius: .9rem;
  background: var(--panel-strong);
  box-shadow: none;
}
#voice-modes-panel .voice-panel-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.32rem;
}
#voice-modes-panel .voice-panel-top {
  grid-row: 1;
  position: relative;
  min-height: 1.4rem;
  padding-right: 3.3rem;
  margin: 0;
}
#voice-modes-panel .voice-panel-title { font-size: 0.76rem; }
#voice-modes-panel .voice-panel-help,
#voice-modes-panel .voice-panel-heading { display: none; }
#voice-modes-panel .voice-toolbar {
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 0.3rem;
  min-width: 0;
  flex-wrap: nowrap;
}
#voice-modes-panel .voice-action-compact {
  min-width: 0 !important;
  min-height: 2.25rem;
  padding: 0.3rem 0.22rem;
  border-radius: 0.5rem;
  text-align: center;
}
#voice-modes-panel .voice-action-label { font-size: 0.7rem; }
#voice-modes-panel .voice-action-meta { font-size: 0.53rem; }
#voice-modes-panel .voice-output-row {
  grid-row: 3;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.22rem;
}
#voice-modes-panel .voice-output-row::before {
  content: "Reply voice";
  margin-right: auto;
  color: var(--ink-soft);
  font-size: 0.63rem;
}
#voice-modes-panel .voice-output-row .voice-chip {
  flex: 0 0 auto;
  min-width: 1.78rem;
  width: 1.78rem;
  height: 1.72rem;
  font-size: 0.66rem;
  padding: 0;
}
#voice-modes-panel .voice-panel-close {
  position: absolute;
  right: 0;
  top: -0.12rem;
  margin: 0;
  padding: 0.18rem 0.34rem !important;
  font-size: 0.64rem !important;
}
#voice-modes-panel #voice-stop-speaking:not([hidden]) {
  position: absolute;
  top: 0.22rem;
  right: 3.35rem;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
}
#voice-modes-panel .voice-manual-record { display: none !important; }
#voice-modes-panel .voice-status-line {
  grid-row: 4;
  min-height: 0;
  margin: 0;
  font-size: 0.62rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#voice-modes-panel .voice-status-line[data-state="ERROR"],
#voice-modes-panel .voice-status-line[data-state="BLOCKED"] {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
/* Embedded beside Zana's World: only the conversation, nothing around it. */
.embed-world .rail, .embed-world .mobile-tabs, .embed-world .desktop-panel-tabs, .embed-world #desktop-panel-tabs, .embed-world .chat-tools, .embed-world .rail-resizer, .embed-world [role="separator"] { display: none !important; }
.embed-world .shell { display: block !important; grid-template-columns: 1fr !important; }
.embed-world .chat { width: 100% !important; max-width: none !important; border: 0 !important; }
.embed-world .chat-top { padding-block: 8px; }

/* Personal recovery: controls remain in the same readable conversation. */
.ask-recovery-spinner { display:inline-block;width:.8rem;height:.8rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;margin-right:.5rem;animation:ask-recovery-spin 1s linear infinite; }
@keyframes ask-recovery-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ask-recovery-spinner { animation:none; } }
.msg-row[data-queued-ask-note] .bubble { display:flex;align-items:center;gap:.5rem;flex-wrap:wrap; }
.person-inline-review { width:100%;box-sizing:border-box;padding:1rem;margin:1rem 0;border:1px solid var(--line);border-radius:14px;background:var(--panel); }
.person-inline-head { display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem; }
.person-inline-columns { display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:1rem; }
.person-inline-review .sr-person-mid { min-width:0; }
.person-inline-review .sr-tabs { display:flex; gap:.35rem; flex-wrap:wrap; padding-bottom:.15rem; }
.person-inline-review .sr-tabs button { flex:0 0 auto; }
.person-inline-review .sr-tabs .is-on { color:var(--ink); background:color-mix(in srgb, var(--accent) 22%, transparent); border-color:var(--accent); }
#personal-left > .person-inline-review .person-inline-columns { align-content:start; }
.person-inline-review .sr-person-portrait { white-space:pre-wrap; }
@media(max-width:700px) { .person-inline-columns { grid-template-columns:minmax(0,1fr); } }

/* Personal composer: one input surface, with explicit tools and optional controls. */
#workspace.workspace[data-product="personal"] .compose,
#workspace.workspace[data-product="workspace"] .compose { cursor: text; gap: .5rem; padding: .65rem; }
#workspace.workspace[data-product="personal"] .compose:focus-within,
#workspace.workspace[data-product="workspace"] .compose:focus-within { border-color: var(--accent); }
#workspace.workspace[data-product="personal"] .compose-shell,
#workspace.workspace[data-product="workspace"] .compose-shell { min-height: 3rem; align-self: stretch; }
#workspace.workspace[data-product="personal"] .compose textarea,
#workspace.workspace[data-product="personal"] .compose textarea:focus,
#workspace.workspace[data-product="workspace"] .compose textarea,
#workspace.workspace[data-product="workspace"] .compose textarea:focus {
  box-sizing: border-box; width: 100%; min-height: 3rem; border: 0; border-radius: 0;
  outline: none; box-shadow: none; background: transparent; font-size: 1rem; padding: .55rem .3rem;
}
#workspace.workspace[data-product="personal"] .composer-options-row,
#workspace.workspace[data-product="workspace"] .composer-options-row { flex-wrap: wrap; gap: .35rem .6rem; }
#workspace.workspace[data-product="personal"] .compose-tools,
#workspace.workspace[data-product="workspace"] .compose-tools { align-self: end; }
#workspace.workspace[data-product="personal"] .compose-tool,
#workspace.workspace[data-product="workspace"] .compose-tool { width: 2.75rem; height: 2.75rem; }
#workspace.workspace[data-product="personal"] .compose-send,
#workspace.workspace[data-product="workspace"] .compose-send { min-height: 2.75rem; }
#workspace #vault-panel-host { min-width: 0; }
#workspace #vault-panel-host > #vault-panel:not([hidden]) {
  position: relative; inset: auto; width: 100%; max-width: 100%; box-sizing: border-box;
  max-height: min(45dvh, 24rem); overflow: auto; margin: .5rem 0 0; padding: .8rem;
  z-index: auto; box-shadow: none; border-radius: .9rem;
}
#workspace #vault-panel-host > #vault-panel[hidden] { display: none !important; }
.vault-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.vault-panel-heading .composer-flyout-title { margin: 0; font-size: .8rem; letter-spacing: 0; text-transform: none; }
#workspace #vault-panel-host .vault-bar-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
#workspace #vault-panel-host input { min-width: 0; max-width: 100%; box-sizing: border-box; }
#workspace #vault-panel-host #vault-bar-password { flex: 1 1 100%; width: 100%; }
#workspace #voice-modes-panel .voice-action-compact { min-height: 2.75rem; }
#workspace #voice-modes-panel .voice-action-label { font-size: .85rem; }
#workspace #voice-modes-panel .voice-action-meta { font-size: .72rem; }
#workspace #voice-modes-panel .voice-status-line { display: block; font-size: .75rem; line-height: 1.4; overflow: visible; }
#workspace #voice-modes-panel .voice-output-row .voice-chip { width: 2.5rem; height: 2.5rem; font-size: .8rem; }
@media (max-width: 980px) {
  #workspace.workspace[data-product="personal"] .chat { grid-template-rows: auto auto minmax(0, 1fr) auto; }
  #workspace.workspace[data-product="personal"] .composer-dock {
    min-height: 0; max-height: min(55dvh, 28rem); overflow-y: auto !important;
    padding-bottom: env(safe-area-inset-bottom, 0px); scrollbar-width: thin;
  }
  /* The add menu opens above the composer. A scrolling dock was cutting off its label. */
  #workspace.workspace[data-product="personal"] .composer-dock:has(#attach-menu:not([hidden])) {
    overflow: visible !important;
  }
  #workspace.workspace[data-product="personal"] .compose,
#workspace.workspace[data-product="workspace"] .compose { grid-template-columns: minmax(0, 1fr); padding: .6rem; }
  #workspace.workspace[data-product="personal"] .compose-shell,
#workspace.workspace[data-product="workspace"] .compose-shell { grid-column: 1; grid-row: 2; }
  #workspace.workspace[data-product="personal"] .composer-options-row,
#workspace.workspace[data-product="workspace"] .composer-options-row { grid-column: 1; grid-row: 1; }
  #workspace.workspace[data-product="personal"] .compose-tools,
#workspace.workspace[data-product="workspace"] .compose-tools { grid-column: 1; grid-row: 3; justify-content: flex-end; gap: .4rem; }
  #workspace.workspace[data-product="personal"] .vault-inline-state,
#workspace.workspace[data-product="workspace"] .vault-inline-state { font-size: .75rem; }
  #workspace.workspace[data-product="personal"] .messages { overflow-x: hidden; min-width: 0; }
  #workspace.workspace[data-product="personal"] .bubble { overflow-wrap: anywhere; min-width: 0; }
  #workspace.workspace[data-product="personal"] .attach-chips { flex-wrap: wrap; }
  #workspace.workspace[data-product="personal"] .person-inline-review { padding: .7rem; }
  #workspace.workspace[data-product="personal"] .person-inline-columns { grid-template-columns: minmax(0,1fr); }
  #workspace.workspace[data-product="personal"] .person-inline-review .sr-tabs { flex-wrap: wrap; }
  #workspace.workspace[data-product="personal"] .person-inline-review .sr-tabs button { flex: 0 0 auto; }
}

/* Compact voice dock: four output choices left, microphone modes right. */
#workspace .composer-dock > #voice-composer-host:has(> #voice-modes-panel:not([hidden])) { margin-top: .2rem !important; }
#workspace .composer-dock #voice-composer-host > #voice-modes-panel:not([hidden]) { padding: .35rem .45rem !important; border-radius: .65rem; }
#workspace #voice-modes-panel .voice-panel-body { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .3rem; }
#workspace #voice-modes-panel .voice-panel-top { display: contents; }
#workspace #voice-modes-panel .voice-panel-title { display: none; }
#workspace #voice-modes-panel .voice-output-row { grid-row: 1; grid-column: 1; gap: .2rem; justify-content: flex-start; }
#workspace #voice-modes-panel .voice-output-row::before { display: none; }
#workspace #voice-modes-panel .voice-output-row .voice-chip { display: grid; place-items: center; width: auto; min-width: max-content; height: 2rem; padding: 0 .4rem; font-size: .68rem; white-space: nowrap; }
#workspace #voice-modes-panel .voice-toolbar { grid-row: 1; grid-column: 2; gap: .3rem; }
#workspace #voice-modes-panel .voice-action-compact { min-height: 2rem; padding: .2rem .3rem; }
#workspace #voice-modes-panel .voice-action-label { font-size: .78rem; }
#workspace #voice-modes-panel .voice-action-meta { font-size: .62rem; }
#workspace #voice-modes-panel .voice-panel-close { position: static; grid-row: 1; grid-column: 3; font-size: 0 !important; width: 1.5rem; height: 2rem; padding: 0 !important; }
#workspace #voice-modes-panel .voice-panel-close::after { content: '×'; font-size: 1.1rem; }
#workspace #voice-modes-panel .voice-status-line { display: none; grid-row: 3; grid-column: 1 / -1; font-size: .7rem; margin: 0; }
#workspace #voice-modes-panel .voice-status-line[data-state="ERROR"], #workspace #voice-modes-panel .voice-status-line[data-state="BLOCKED"] { display: block; }
#workspace #voice-tool-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; }
#workspace #voice-tool-btn svg { display: block; margin: 0; flex: none; }
#workspace.workspace[data-product="personal"] .composer-dock { gap: .25rem; }
@media (max-width: 600px) {
  #workspace #voice-modes-panel .voice-output-row { gap: .12rem; }
  #workspace #voice-modes-panel .voice-output-row .voice-chip { width: auto; min-width: max-content; height: 1.75rem; padding: 0 .25rem; font-size: .62rem; white-space: nowrap; }
  #workspace #voice-modes-panel .voice-action-label { font-size: .7rem; }
  #workspace #voice-modes-panel .voice-action-meta { font-size: .55rem; }
  #workspace #voice-modes-panel .voice-panel-close { width: 1rem; }
}

#workspace.workspace[data-product="personal"].voice-dock-open .chat { padding-bottom: .45rem !important; }


/* One 13px ASCII creature inside the existing composer, not another panel. */
#workspace.workspace[data-product="personal"] .compose { padding-bottom: max(1.05rem, 16px); }
#workspace .compose .zana-living-glyph {
  pointer-events: none;
  user-select: none;
  position: absolute;
  bottom: 2px;
  left: 12px;
  right: 12px;
  height: 13px;
  overflow: hidden;
  line-height: 13px;
  white-space: pre;
  color: #168060;
  opacity: .87;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0;
  z-index: 1;
}
/* Face position is ALWAYS 50% of the entire composer, not derived from
   ASCII character widths. Each independently clipped half meets it. */
#workspace .compose .zana-living-glyph .zana-glyph-side {
  position: absolute;
  top: 0;
  display: block;
  height: 13px;
  overflow: hidden;
  white-space: pre;
}
#workspace .compose .zana-living-glyph .zana-glyph-left {
  left: 0;
  right: calc(50% + 2.5ch);
  text-align: right;
}
#workspace .compose .zana-living-glyph .zana-glyph-right {
  left: calc(50% + 2.5ch);
  right: 0;
  text-align: left;
}
#workspace .compose .zana-living-glyph .zana-glyph-face {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  white-space: pre;
  display: block;
}
#workspace .compose .zana-living-glyph[data-wake="true"] { color: #dd3446; opacity: 1; }
#workspace:not([data-product="personal"]):not([data-product="workspace"]) .compose .zana-living-glyph { display: none; }
[data-theme="dark"] #workspace .compose .zana-living-glyph { color: #78cdaa; }
[data-theme="dark"] #workspace .compose .zana-living-glyph[data-wake="true"] { color: #ff6975; }
@media (max-width: 640px) {
  #workspace .compose .zana-living-glyph { left: 9px; right: 9px; font-size: 8.9px; }
}

.rail-left:has(#personal-left > .person-inline-review),
.rail-left:has(#knowing-rail:not([hidden])) { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.rail-left:has(#personal-left > .person-inline-review) #personal-left { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#personal-left:has(> .person-inline-review) > :not(.person-inline-review) { display: none !important; }
#personal-left > .person-inline-review { flex: 1; min-height: 0; margin: 0; overflow: auto; border-radius: 18px; }
#personal-left > .person-inline-review .person-inline-columns { grid-template-columns: minmax(0, 1fr); }
.rail-left:has(#knowing-rail:not([hidden])) #personal-left { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#personal-left:has(#knowing-rail:not([hidden])) > :not(#knowing-rail) { display: none !important; }
.knowing-rail { display: flex; flex-direction: column; gap: .35rem; height: 100%; min-height: 0; padding: .7rem .75rem .8rem; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.knowing-rail[hidden] { display: none !important; }
.knowing-rail-head { display: grid; grid-template-columns: 4.5rem 1fr 4.5rem; align-items: center; text-align: center; padding: .35rem .15rem .55rem; }
#person-navigation [data-person-section="tell"] { justify-content: center; margin: .15rem 0 .55rem; padding: .9rem 1rem; border: 1px solid rgba(226, 59, 74, .5); border-radius: 14px; background: rgba(226, 59, 74, .14); font-size: 1.2rem; font-weight: 700; }
.knowing-dock { display: flex; flex-direction: column; gap: .28rem; margin-top: auto; }
.knowing-dock .personal-chat-controls { display: flex; justify-content: flex-end; gap: .32rem; }
#workspace.workspace[data-product="personal"] .chat { align-content: stretch; }
#workspace.workspace[data-product="personal"] .composer-dock { margin-top: auto; padding-bottom: 0; }
#workspace.workspace[data-product="personal"] #knowing-log .msg-row { width: 100%; }
#workspace.workspace[data-product="personal"] .zana-welcome { text-align: left; margin: 0; padding: 0.15rem 0.1rem; justify-content: flex-start !important; }
#workspace.workspace[data-product="personal"] .zana-welcome h2 { margin: 0; font-size: 1rem; font-weight: 560; letter-spacing: 0; }
#workspace.workspace[data-product="personal"] .zana-welcome p:empty { display: none; }
#workspace.workspace[data-product="personal"] .zana-welcome-chips { align-items: flex-start; margin: 0.55rem 0 0; }
.knowing-rail-title h2 { margin: 0; font-size: 1.7rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.knowing-rail-tools { display: flex; gap: .25rem; }
.knowing-log { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; justify-content: flex-start; gap: .72rem; padding: .35rem .2rem .4rem; }
.knowing-status { margin: 0; font-size: .75rem; color: var(--ink-soft); }
.knowing-status:empty { display: none; }
#knowing-compose { margin-top: .15rem; }
#workspace #knowing-compose .zana-living-glyph,
[data-theme="dark"] #workspace #knowing-compose .zana-living-glyph,
[data-theme="dark"] #workspace #knowing-compose .zana-living-glyph[data-wake="true"] { color: #ff4d5a; }
#knowing-compose:focus-within { border-color: #ff4d5a; }
#knowing-compose .compose-send { background: #e23b4a; border-color: #e23b4a; color: #fff; }
#knowing-log .bubble.user { background: color-mix(in srgb, #ff4d5a 18%, var(--panel)); }
#knowing-log .bubble.zana { background: rgba(226, 59, 74, .16); border-left: 3px solid #e23b4a; }
#knowing-log .thinking-status.is-red {
  --accent: #ff4d5a;
  --accent-deep: #ffb4b8;
  --accent-soft: rgba(255, 77, 90, 0.2);
  border-color: color-mix(in srgb, #ff4d5a 46%, var(--line));
  background: color-mix(in srgb, #4a1c22 48%, var(--panel-strong));
}
#knowing-log .thinking-status.is-red .trail-dot,
#knowing-log .thinking-status.is-red .thinking-emoji,
#knowing-log .thinking-status.is-red .thinking-mark { color: #ff8a93; }
#workspace.workspace[data-product="personal"] #knowing-log .thinking-status.is-red .thinking-mark {
  border-color: color-mix(in srgb, #ff4d5a 50%, var(--line));
  background: color-mix(in srgb, #ff4d5a 20%, var(--panel));
  color: #ffb4b8;
}

/* The vault line and Clear/Resume sit above the message box, same as Tell Zana,
   so the two message fields share one bottom edge. */
.compose-face { display: contents; }
@media (min-width: 981px) {
  #workspace.workspace[data-product="personal"] #compose.compose,
  #workspace.workspace[data-product="workspace"] #compose.compose {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.28rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }
  #workspace.workspace[data-product="personal"] #compose .composer-options-row,
  #workspace.workspace[data-product="workspace"] #compose .composer-options-row {
    padding: 0 0.1rem;
  }
  #workspace.workspace[data-product="personal"] #compose .compose-face,
  #workspace.workspace[data-product="workspace"] #compose .compose-face {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    position: relative;
    gap: 0.5rem;
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    border-radius: 18px;
    background: var(--panel-strong);
    box-shadow: 0 8px 24px rgba(20, 28, 24, 0.04);
    padding: 0.65rem 0.65rem max(1.05rem, 16px);
    cursor: text;
  }
  #workspace.workspace[data-product="personal"] #compose .compose-face:focus-within,
  #workspace.workspace[data-product="workspace"] #compose .compose-face:focus-within {
    border-color: var(--accent);
  }
  #workspace.workspace[data-product="personal"] #compose .compose-shell,
  #workspace.workspace[data-product="workspace"] #compose .compose-shell,
  #workspace.workspace[data-product="personal"] #compose .compose-tools,
  #workspace.workspace[data-product="workspace"] #compose .compose-tools {
    grid-row: 1;
  }
  #workspace.workspace[data-product="personal"] #compose .compose-shell,
  #workspace.workspace[data-product="workspace"] #compose .compose-shell { grid-column: 1; }
  #workspace.workspace[data-product="personal"] #compose .compose-tools,
  #workspace.workspace[data-product="workspace"] #compose .compose-tools { grid-column: 2; align-self: end; }
  #workspace.workspace[data-product="personal"] .knowing-rail { padding-bottom: 0.9rem; }
  #workspace.workspace[data-product="personal"] #knowing-compose.compose {
    padding: 0.65rem 0.65rem max(1.05rem, 16px);
    border-radius: 18px;
  }
}

/* Talk to Zana header: a clear way back and a one-line title. */
.knowing-rail-head { grid-template-columns: auto 1fr auto; gap: .5rem; text-align: left; }
#knowing-back { min-height: 36px; padding: .35rem .8rem; border-radius: 10px; font-size: .9rem; font-weight: 600; white-space: nowrap; }
.knowing-rail-title h2 { font-size: 1.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Let Zana get to know you, full screen on a phone. */
.knowing-rail.knowing-rail-phone:not([hidden]) { position: fixed; inset: 0; z-index: 9500; display: flex !important; border-radius: 0; border: 0; padding: max(.7rem, env(safe-area-inset-top)) .75rem max(.8rem, env(safe-area-inset-bottom)); }

/* AD: tool label over Zana's reply, people logos, group chats, a set-up tool's own view. */
.ws-feature-tag { align-self: flex-start; margin: 0 0 .2rem .2rem; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; background: var(--accent-soft); color: var(--accent-deep); }
.ws-feature-tag[data-feature="car_swaps"] { background: color-mix(in srgb, #d35b50 14%, var(--panel)); color: #b0443a; }
.ws-person-logo { flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 8px; }
.ws-person-logo svg { width: 1.05rem; height: 1.05rem; }
.workspace-panel-person:has(.ws-person-logo) { justify-content: flex-start; gap: .55rem; }
.ws-person-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-add-group { color: var(--accent-deep); font-weight: 650; }
.ws-group-picker { display: grid; gap: .45rem; padding: .55rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-strong); }
.ws-group-picker[hidden] { display: none; }
.ws-group-picker input[type="text"], .ws-group-picker input[type="search"] { width: 100%; box-sizing: border-box; }
.ws-group-search { position: relative; }
.ws-group-results { margin-top: 4px; display: grid; gap: 2px; padding: .3rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-strong); box-shadow: 0 10px 28px rgba(0, 0, 0, .28); }
.ws-group-results[hidden] { display: none; }
.ws-group-results p { margin: .3rem .4rem; }
.ws-group-result { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .4rem .45rem; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ws-group-result:hover, .ws-group-result:focus-visible { background: var(--accent-soft); }
.ws-group-chosen { display: flex; flex-wrap: wrap; gap: .35rem; }
.ws-group-chosen:empty { display: none; }
.ws-group-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .5rem .2rem .25rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: .85rem; cursor: pointer; }
.ws-group-chip .ws-person-logo { width: 1.25rem; height: 1.25rem; border-radius: 6px; }
.ws-group-chip-x { opacity: .6; }
.ws-feature-body { flex: 1; overflow-y: auto; display: grid; align-content: start; gap: .55rem; }
.ws-feature-card { border: 1px solid #3f9d6a; border-radius: 12px; padding: .6rem .75rem; background: color-mix(in srgb, #3f9d6a 9%, var(--panel)); }
.ws-feature-card p { margin: .25rem 0 0; color: var(--ink); }
.ws-feature-card.is-mine { border-width: 2px; }
.ws-feature-card.is-risk { border-color: #d35b50; background: color-mix(in srgb, #d35b50 10%, var(--panel)); }
.ws-feature-card.is-done { opacity: .6; }
.ws-calendar-sync { display: flex; align-items: center; gap: .5rem; padding: .55rem .7rem; border: 1px dashed var(--line); border-radius: 12px; cursor: pointer; }

/* People: a new message from someone shows a red badge and its first words. */
.ws-unread-badge { flex: 0 0 auto; margin-left: auto; padding: .1rem .5rem; border-radius: 999px; background: #e5484d; color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .02em; }
.ws-person-preview { display: block; font-weight: 400; font-size: .78rem; opacity: .72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* AD questions: pending is green, a reply is red, and the list fills the bottom of the right rail. */
#workspace[data-product="workspace"] #workspace-experience-right { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
#workspace[data-product="workspace"] [data-panel-type="pilot"] { flex:0 0 auto; overflow:auto; max-height:46%; }
.ws-questions-panel { margin-top:auto; flex:1 1 0; min-height:16rem; display:flex; flex-direction:column; }
.ws-questions-panel .workspace-panel-list { max-height:none; flex:1 1 auto; overflow-y:auto; }
#workspace[data-product="workspace"] .ws-question-card.is-pending,
#workspace[data-product="workspace"] .ws-question-message:not(.is-answered) .bubble { border:1px solid #459c79; background:color-mix(in srgb, #459c79 14%, var(--panel)); }
#workspace[data-product="workspace"] .ws-question-card.is-answered,
#workspace[data-product="workspace"] .ws-question-message.is-answered .bubble { border:1px solid #d35b50; background:color-mix(in srgb, #d35b50 16%, var(--panel)); }
.ws-question-card { display:flex; flex-direction:column; align-items:stretch; gap:.25rem; text-align:left; cursor:pointer; }
.ws-question-card strong, .ws-reply-who, .ws-thread-line strong { font-weight:650; }
.ws-question-said, .ws-reply-text { font-weight:400; white-space:pre-wrap; }
.ws-question-thread, .ws-question-open { display:inline-block; margin-top:.45rem; padding:.35rem .7rem; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--ink); font:inherit; cursor:pointer; }
.ws-thread-line { margin-top:.8rem; }
.ws-thread-line p { margin:.2rem 0 0; white-space:pre-wrap; }
.msg-photo { display:block; max-width:min(100%, 18rem); margin-top:.45rem; border-radius:10px; }
.ws-tool-enabled { margin-left:auto; color:var(--ink-soft); font-size:.72rem; font-weight:500; }
.workspace-panel-person:focus-visible, .ws-question-open:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.ws-question-popup { width:min(38rem, calc(100% - 1.5rem)); max-height:calc(100dvh - 2rem); padding:0; border:1px solid var(--line); border-radius:16px; background:var(--panel-strong); color:var(--ink); overflow:auto; }
.ws-question-popup::backdrop { background:rgba(0,0,0,.48); }
.ws-question-popup > header { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.8rem 1rem; border-bottom:1px solid var(--line); }
#ws-question-detail { padding:1rem; }
#ws-question-detail .workspace-experience-panel { border:0; padding:0; overflow:visible; }
#ws-question-detail textarea { display:block; width:100%; box-sizing:border-box; min-height:7rem; margin:.75rem 0; padding:.7rem; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--ink); font:inherit; font-size:1rem; }
#ws-question-detail label { display:flex; align-items:flex-start; gap:.5rem; padding:.4rem 0; }
@media (max-width:980px) {
  #workspace[data-product="workspace"] .workspace-panel-person { min-height:44px; }
  #workspace[data-product="workspace"] .workspace-conversation-search, #workspace[data-product="workspace"] .ws-group-picker input { font-size:16px; }
  #workspace[data-product="workspace"] .workspace-experience-panel { flex-shrink:0; }
  #workspace[data-product="workspace"] #workspace-experience-right { gap:.8rem; }
  .ws-question-popup { margin:auto; max-height:calc(100dvh - 1.5rem); }
  .ws-questions-panel { margin-top:1rem; }
}

/* The shared chat has a variable number of headings; flex keeps history in the remaining space. */
#workspace.workspace[data-product="workspace"] .chat { display:flex !important; flex-direction:column; min-height:0; }
#workspace.workspace[data-product="workspace"] .chat > .chat-top,
#workspace.workspace[data-product="workspace"] .workspace-chat-heading,
#workspace.workspace[data-product="workspace"] .chat > .session-status { flex:0 0 auto; }
#workspace.workspace[data-product="workspace"] .messages { flex:1 1 0; min-height:0; overflow-y:auto; }
#workspace.workspace[data-product="workspace"] .workspace-chat-heading { padding:.65rem .3rem; }
@media (max-width:980px) {
  #workspace.workspace[data-product="workspace"] .workspace-mobile-panel-nav:not([hidden]) { padding-right:3rem; }
  #workspace.workspace[data-product="workspace"] .workspace-mobile-panel-nav button { font-size:.76rem; padding:.35rem .25rem; }
  #workspace.workspace[data-product="workspace"] .workspace-mobile-panel-nav button[data-workspace-mobile-panel="right"] { flex:1.7 1 0; }
  #workspace.workspace[data-product="workspace"] #session-status { display:none; }
  #workspace.workspace[data-product="workspace"] .workspace-chat-heading { padding:.5rem 0; }
  #workspace.workspace[data-product="workspace"] .workspace-chat-kicker { display:none; }
  #workspace.workspace[data-product="workspace"] .workspace-chat-switch button { min-height:36px; }
}

/* Status belongs to the current account, outside replaceable History rows. */
#workspace .chat-stream{grid-row:3;grid-column:1;display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden;flex:1 1 0}
#workspace .chat-stream > .messages{flex:1 1 0;min-height:0;overflow-y:auto}
#workspace #digital-self-chat{flex:0 1 auto;max-height:min(30dvh,15rem);overflow-y:auto;min-height:0}
#workspace #digital-self-chat[hidden]{display:none}
#workspace #digital-self-chat .ds-chat-status{margin:.25rem 0;padding:.75rem}

#workspace .chat.is-person-view > .chat-stream{display:none}
.chat-durable-file-entry{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;min-width:0}.chat-durable-file-entry [role="status"]{flex:1 1 100%;font-size:.8rem}.core-file-card-actions [role="status"]{font-size:.75rem;max-width:16rem}
/* Group chats: dark icon tiles; rename from the title. Alumni: monthly bundles from the brothers. */
.ws-group-row{display:flex;align-items:center;gap:.55rem}
.ws-group-logo{border:1px solid rgba(255,255,255,.08)}
.ws-group-rename{margin-left:.5rem;font-size:.75rem;padding:.2rem .55rem}
.ws-group-rename-form{display:inline-flex;gap:.4rem;margin-left:.5rem;align-items:center}
.ws-group-rename-form input{background:var(--card-bg,#29342d);color:inherit;border:1px solid var(--line,#536058);border-radius:.4rem;padding:.3rem .5rem;min-width:9rem}
.ws-alumni-month{display:flex;justify-content:space-between;font-weight:600}
.ws-alumni-detail{padding:.4rem .2rem .8rem;display:grid;gap:.6rem}
.ws-alumni-summary{font-weight:600;line-height:1.45;margin:0}
.ws-alumni-item{border-top:1px solid var(--line,#3b4841);padding-top:.55rem;display:grid;gap:.3rem}
.ws-alumni-item p{margin:0;line-height:1.45}
.ws-alumni-acts{display:flex;gap:.4rem;flex-wrap:wrap}
/* Chats with other people: their messages on the left in their logo colour, with their name; yours on the right. */
.msg-row.user.is-peer{justify-items:start}
.msg-row.user.is-peer .msg-meta{justify-content:flex-start}
.msg-row.user.is-peer .bubble{background:color-mix(in srgb,var(--peer-color,#5c6bc0) 22%,var(--panel-strong,#1f2124));border:1px solid color-mix(in srgb,var(--peer-color,#5c6bc0) 55%,transparent)}
.ws-peer-name{display:flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:600;color:var(--ink-soft,#a6b4ad);margin:0 0 .2rem .2rem}
.ws-peer-name .ws-person-logo{width:1.15rem;height:1.15rem}
.bubble-reply-quote{border-left:3px solid color-mix(in srgb,currentColor 35%,transparent);padding:.15rem 0 .15rem .55rem;margin:0 0 .4rem;font-size:.85em;opacity:.75;white-space:pre-wrap}

/* The welcome and the stream share the chat's one column; a second implicit column squeezed the header and composer on wide windows. */
#workspace .chat > .zana-welcome{grid-column:1;position:relative;z-index:1}

/* Admin accounts are highlighted in the People list. */
.workspace-panel-person.is-admin { border-color: color-mix(in srgb, #e0b44c 70%, transparent); background: color-mix(in srgb, #e0b44c 10%, transparent); }
.ws-admin-tag { margin-left: .45rem; padding: .05rem .4rem; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #f0cf7e; background: color-mix(in srgb, #e0b44c 22%, transparent); border: 1px solid color-mix(in srgb, #e0b44c 60%, transparent); }

/* Admin view: AD summary, who controls what, and per-person admin access. */
.workspace-ad-summary, .workspace-role-controls { margin: 0 0 .9rem; padding: .7rem .9rem; border: 1px solid var(--line, #3a3d42); border-radius: 10px; }
.workspace-ad-summary > summary, .workspace-role-controls > summary { cursor: pointer; font-weight: 700; }
.workspace-ad-summary h4 { margin: .8rem 0 .2rem; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted, #aab); }
.workspace-ad-summary p, .workspace-role-controls p { margin: .3rem 0; font-size: .88rem; line-height: 1.4; }
.workspace-admin-access { display: flex; align-items: center; gap: .4rem; padding: .3rem 0; color: #f0cf7e; font-size: .85rem; }

/* Question thread: what was asked is neutral, what came back is red, and a question still waiting is green. */
.ws-thread-line { margin: .5rem 0; padding: .55rem .8rem; border-radius: 12px; background: rgba(255,255,255,.05); border-left: 3px solid #5fc3a0; }
.ws-thread-line.is-reply { border-left-color: #d35b50; background: color-mix(in srgb, #d35b50 14%, transparent); }
.ws-thread-line strong { display: block; font-size: .75rem; letter-spacing: .04em; color: var(--muted, #b4b8bd); }
.ws-thread-line p { margin: .2rem 0 0; }
.workspace-panel-person.ws-open-admin { border-color: color-mix(in srgb, #e0b44c 55%, transparent); color: #f0cf7e; }

/* The question thread docks on the right instead of covering the chat; the chat and composer stay usable. */
dialog.ws-question-popup { position: fixed; inset: 5rem 1rem 1rem auto; width: min(30rem, calc(100vw - 2rem)); height: auto; max-height: none; margin: 0; overflow: auto; z-index: 40; box-shadow: 0 12px 40px rgba(0,0,0,.45); }
@media (max-width: 760px) { dialog.ws-question-popup { inset: 4rem .75rem .75rem; width: auto; } }

/* The Conversations list is compact so names and officer titles fit on one line in a narrow window. */
#workspace-experience-left .workspace-panel-person { font-size: .875rem; padding: .42rem .6rem; }
#workspace-experience-left .workspace-panel-person .ws-person-name { font-size: .875rem; }
#workspace-experience-left .workspace-panel h2 { font-size: 1.05rem; }
#workspace-experience-left .workspace-panel h3 { font-size: .95rem; }

.ws-question-popup .ws-builder-btn { margin: .25rem 0 .6rem; padding: .45rem .9rem; border: 0; border-radius: 999px; background: #5fc3a0; color: #0c1a14; font-weight: 650; cursor: pointer; }
.ws-question-popup .ws-builder-btn:disabled { opacity: .6; cursor: default; }
.ws-question-popup textarea { background: rgba(255,255,255,.04); }

/* Leaving Admin: the same three switches as the chat header, always visible. */
.workspace-admin-back { display: flex; gap: .4rem; justify-content: flex-end; margin-bottom: .5rem; }
.workspace-admin-back button { padding: .25rem .8rem; border: 1px solid var(--line, #3a3d42); border-radius: 999px; background: transparent; color: var(--ink, #e8eaed); font: inherit; font-size: .85rem; cursor: pointer; }
.workspace-admin-back button[aria-pressed="true"] { border-color: #e0b44c; color: #f0cf7e; cursor: default; }

/* AD columns sit as close together as Personal's: same outer padding and the same small gap beside each drag handle. */
@media (min-width: 981px) {
  .workspace[data-product="workspace"],
  .workspace[data-product="workspace-admin"] { gap: 0.35rem; padding: 0.45rem; }
}

/* In Admin the People and roles panel (admin access, who controls what, AD summary) leads the left column. */
#workspace-experience-left #workspace-admin-rail-heading { order: -2; }
#workspace-experience-left #workspace-roles-panel { order: -1; }
.workspace-ad-how { margin-top: .6rem; }
.workspace-ad-how > summary { cursor: pointer; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted, #aab); }

/* Personal chat: inline edit, delete confirmation and the "edited" tag. */
.msg-editor { display: grid; gap: .4rem; margin: .2rem 0; min-width: min(34rem, 100%); }
.msg-editor textarea { width: 100%; box-sizing: border-box; padding: .6rem .7rem; border: 1px solid #5fc3a0; border-radius: 12px; background: rgba(255,255,255,.05); color: inherit; font: inherit; resize: vertical; }
.msg-editor-actions { display: flex; gap: .4rem; justify-content: flex-end; }
.msg-editor-save, .msg-editor-cancel { padding: .3rem .9rem; border-radius: 999px; font: inherit; font-size: .85rem; cursor: pointer; border: 1px solid var(--line, #3a3d42); background: transparent; color: inherit; }
.msg-editor-save { background: #5fc3a0; border-color: #5fc3a0; color: #0c1a14; font-weight: 650; }
.msg-edited { margin-left: .4rem; font-size: .72rem; letter-spacing: .04em; color: var(--muted, #9aa); font-style: italic; }
.msg-note { margin: .15rem 0; font-size: .8rem; color: #e0a39c; }
.msg-delete-confirm { display: inline-flex; align-items: center; gap: .4rem; margin-left: .5rem; font-size: .82rem; }
.msg-action-danger { color: #f0a39c; border-color: #d35b50; }