/* _workspace-*.css used to be @import-ed here; they now live at the end of
 * main.css (bundle.css) and the base.html / login.html fallback links. */
/* Brand gallery shell, Aaron direction 20 Sep 2026, ws_212.
 * White/off-white light mode, neutral charcoal dark mode.
 * Rollback: data/brand/harness-gallery-20260920/backup. */
:root, html:root[data-theme="light"] {
  color-scheme: light;
  --mirai-navy: #06183E;
  --mirai-teal: #21BFC1;
  --s-bg-page: #FAFAFA;
  --s-bg-surface: #FFFFFF;
  --s-bg-surface-raised: #FFFFFF;
  --s-bg-surface-sunken: #F0F1F3;
  --s-bg-overlay: #FFFFFF;
  --s-bg-input: #FFFFFF;
  --s-bg-header: #FAFAFA;
  --s-bg-hover: #F0F3F4;
  --s-bg-active: #E8EDF3;
  --s-bg-selected: #E8EDF3;
  --s-text-primary: #06183E;
  --s-text-secondary: #435770;
  --s-text-tertiary: #50617A;
  /* Navy for small text/icons; original teal for filled controls below.
   * Do not darken brand teal into green to make white labels readable. */
  --s-accent: #06183E;
  --s-accent-hover: #183765;
  --s-accent-active: #06183E;
  --s-accent-on: #FFFFFF;
  --s-text-on-accent: #FFFFFF;
  --s-accent-subtle: rgba(6,24,62,.06);
  --s-text-link: #06183E;
  --s-text-link-hover: #183765;
  --s-border: #D5DADF;
  --s-border-subtle: #E7E9EC;
  --s-border-strong: #8390A0;
  --s-border-focus: #06183E;
  --s-bg-sidebar: #FFFFFF;
  --s-sidebar-text: #435269;
  --s-sidebar-text-active: #06183E;
  --s-sidebar-text-muted: #58677A;
  --s-sidebar-icon: #58677A;
  --s-sidebar-icon-active: #06183E;
  --s-sidebar-hover: rgba(6,24,62,.04);
  --s-sidebar-active: rgba(6,24,62,.07);
  --s-shadow-md: none;
  --s-shadow-lg: 0 4px 16px rgba(6,24,62,.08);
  --s-shadow-focus: 0 0 0 2px rgba(6,24,62,.22);
  --chart-1: #21BFC1;
}
html:root[data-theme="dark"] {
  color-scheme: dark;
  /* Aaron, 20 Sep: remove near-black/navy casts from chat and Threads. */
  --s-bg-sidebar: #2C2C2C;
  --s-sidebar-text: #D0D0D0;
  --s-sidebar-text-active: #FAFAFA;
  --s-sidebar-text-muted: #B0B0B0;
  --s-sidebar-icon: #B0B0B0;
  --s-sidebar-icon-active: #21BFC1;
  --s-sidebar-hover: #353535;
  --s-sidebar-active: #3C3C3C;
  --s-bg-page: #242424;
  --s-bg-surface: #2C2C2C;
  --s-bg-surface-raised: #333333;
  --s-bg-surface-sunken: #202020;
  --s-bg-overlay: #333333;
  --s-bg-input: #2C2C2C;
  --s-bg-header: #242424;
  --s-bg-hover: #353535;
  --s-bg-active: #3C3C3C;
  --s-bg-selected: #3C3C3C;
  --s-text-primary: #FAFAFA;
  --s-text-secondary: #D0D0D0;
  --s-text-tertiary: #B0B0B0;
  --s-accent: #21BFC1;
  --s-accent-hover: #5AD5D5;
  --s-accent-active: #83E2E0;
  --s-accent-on: #06183E;
  --s-text-on-accent: #06183E;
  --s-accent-subtle: rgba(33,191,193,.12);
  --s-text-link: #21BFC1;
  --s-text-link-hover: #5AD5D5;
  --s-border: #494949;
  --s-border-subtle: #383838;
  --s-border-strong: #7A7A7A;
  --s-border-focus: #21BFC1;
  --s-shadow-md: 0 12px 32px rgba(0,0,0,.5);
  --s-shadow-lg: 0 16px 48px rgba(0,0,0,.55);
  --s-shadow-focus: 0 0 0 3px rgba(33,191,193,.25);
}
/* Bind saved legacy component colours to the current brand theme. */
:root, html:root[data-theme] {
  --c-heading-color: var(--s-text-primary);
  --c-subheading-color: var(--s-text-secondary);
  --c-header-bg: var(--s-bg-header);
  --c-header-title-text: var(--s-text-primary);
  --c-footer-bg: var(--s-bg-page);
  --c-sidebar-bg: var(--s-bg-sidebar);
  --c-sidebar-item-text: var(--s-sidebar-text);
  --c-sidebar-item-icon: var(--s-sidebar-icon);
  --c-sidebar-accent: var(--s-sidebar-icon-active);
  --c-chat-sidebar-bg: var(--s-bg-surface);
  --c-chat-sidebar-text: var(--s-text-primary);
  --c-chat-sidebar-hover: var(--s-bg-hover);
  --c-chat-sidebar-border: var(--s-border-subtle);
  --c-btn-primary-bg: var(--s-accent);
  --c-btn-primary-text: var(--s-accent-on);
  --c-btn-primary-bg-hover: var(--s-accent-hover);
  --c-btn-primary-text-hover: var(--s-accent-on);
  --c-btn-secondary-bg: transparent;
  --c-btn-secondary-text: var(--s-text-primary);
  --c-btn-secondary-bg-hover: var(--s-bg-hover);
  --c-input-bg: var(--s-bg-input);
  --c-input-border: var(--s-border);
  --c-card-bg: var(--s-bg-surface);
  --c-card-border-hover: var(--s-border-strong);
  --c-table-header-bg: var(--s-bg-surface-sunken);
  --c-table-header-text: var(--s-text-secondary);
  --c-table-row-bg-hover: var(--s-bg-hover);
  --c-table-row-border: var(--s-border-subtle);
  --c-chat-bg: var(--s-bg-page);
  --c-chat-window-bg: var(--s-bg-page);
  --c-chat-user-bg: transparent;
  --c-chat-user-text: var(--s-text-primary);
  --c-chat-assistant-bg: transparent;
  --c-chat-assistant-text: var(--s-text-primary);
}
html:root[data-theme="light"] {
  --c-btn-primary-bg: #21BFC1;
  --c-btn-primary-text: #06183E;
  --c-btn-primary-bg-hover: #5AD5D5;
  --c-btn-primary-bg-active: #21BFC1;
  --c-btn-primary-text-hover: #06183E;
  --c-dropdown-shadow: 0 4px 16px rgba(6,24,62,.08);
}
html[data-theme] .nav-sidebar {
  background: var(--s-bg-sidebar) !important;
  border-right-color: var(--s-border-subtle) !important;
}
html[data-theme="dark"] .voice-sidebar {
  background: var(--c-chat-sidebar-bg) !important;
  border-left-color: var(--s-border-subtle) !important;
}
html[data-theme="dark"] .voice-sidebar :is(.sidebar-item-time, .sidebar-item-meta, .sidebar-title) {
  color: var(--s-text-tertiary) !important;
}
.mirai-brand-home {
  position: relative;
  display: flex; align-items: center; justify-content: flex-start;
  /* Match the navigation rows' 12px padding plus 2px leading border. */
  padding: 0 14px; box-sizing: border-box;
  height: 64px; min-height: 64px; flex: 0 0 64px;
  text-decoration: none;
}
html[data-theme] .nav-sidebar .mirai-brand-home:focus,
html[data-theme] .nav-sidebar .mirai-brand-home:focus-visible { outline: none !important; }
/* A quiet underline provides keyboard location without framing the logo. */
.mirai-brand-home:focus-visible::after { content: ""; position: absolute; bottom: 6px; left: 24%; right: 24%; height: 1px; background: var(--s-text-secondary); }
.mirai-brand-symbol { display: block; width: 26px; height: 26px; }
.mirai-brand-wordmark { display: none; width: 140px; height: auto; object-fit: contain; }
/* The approved 800px-wide SVG has 75px of clear space before the M.
 * Offset that space at 140px so the artwork aligns with the nav icons. */
.mirai-brand-home .mirai-brand-wordmark { margin-left: -13.125px; }
html[data-theme="light"] .nav-sidebar.expanded .mirai-brand-light,
html[data-theme="dark"] .nav-sidebar.expanded .mirai-brand-dark { display: block; }
.nav-sidebar.expanded .mirai-brand-symbol { display: none; }
html[data-theme] .nav-sidebar .sidebar-item { color: var(--s-sidebar-text) !important; }
html[data-theme] .nav-sidebar .sidebar-item .material-icons { color: var(--s-sidebar-icon) !important; opacity: 1; }
html[data-theme] .nav-sidebar .sidebar-item:hover { color: var(--s-sidebar-text-active) !important; background: var(--s-sidebar-hover) !important; }
html[data-theme] .nav-sidebar .sidebar-item.active {
  color: var(--s-sidebar-text-active) !important;
  background: var(--s-sidebar-active) !important;
  border-left-color: var(--s-sidebar-icon-active) !important;
}
html[data-theme] .nav-sidebar .sidebar-item.active .material-icons,
html[data-theme] .nav-sidebar .sidebar-item.active .sidebar-item-icon { color: var(--s-sidebar-icon-active) !important; }
html[data-theme] .nav-sidebar .sidebar-section-label { color: var(--s-sidebar-text-muted) !important; }
.mirai-theme-toggle {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  flex: 0 0 44px; min-height: 44px; margin: 8px 6px;
  padding: 0; border: 1px solid var(--s-border-subtle); border-radius: 8px;
  background: transparent; color: var(--s-sidebar-text); cursor: pointer; font: inherit;
}
.nav-sidebar.expanded .mirai-theme-toggle { justify-content: flex-start; padding: 0 14px; }
.mirai-theme-toggle:hover { background: var(--s-sidebar-hover); }
.mirai-theme-toggle:focus-visible { outline: 2px solid var(--s-accent); outline-offset: 2px; }
.mirai-theme-toggle .sidebar-item-label { font-size: 13px; }
.mirai-sidebar-logout {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  flex: 0 0 44px; min-height: 44px; margin: 8px 6px;
  padding: 0; border: 1px solid var(--s-border-subtle); border-radius: 8px;
  background: transparent; color: var(--s-sidebar-text); cursor: pointer;
  font: inherit; text-decoration: none;
}
.nav-sidebar.expanded .mirai-sidebar-logout { justify-content: flex-start; padding: 0 14px; }
.mirai-sidebar-logout:hover { background: var(--s-sidebar-hover); color: var(--s-sidebar-text-active); }
.mirai-sidebar-logout:focus-visible { outline: 2px solid var(--s-accent); outline-offset: 2px; }
.mirai-sidebar-logout .material-icons { font-size: 20px; line-height: 1; }
.mirai-sidebar-logout .sidebar-item-label { font-size: 13px; }
/* A quieter document surface: spacious type, hairlines and a flat composer. */
html[data-theme] .empty-state-title {
  font-size: 28px !important; font-weight: 400 !important;
  text-transform: none !important; letter-spacing: -.025em !important;
  color: var(--s-text-primary) !important;
}
/* Founder 18 Oct 2026: no centre logo on a new thread or while switching
   threads. The empty state stays as a layout hook. Sidebar wordmark stays. */
.empty-state-brand,
.empty-state-brand-dark,
.empty-state-brand-light,
html[data-theme="light"] .empty-state-brand-dark,
html[data-theme="light"] .empty-state-brand-light {
  display: none !important;
}
html[data-theme] .empty-state-hint { color: var(--s-text-secondary) !important; font-size: 14px !important; opacity: 1 !important; }
html[data-theme] .empty-state-keys kbd { color: var(--s-text-secondary) !important; }
html[data-theme] .msg.mira .msg-content { color: var(--s-text-primary) !important; }
html[data-theme] .controls .text-input-wrap {
  background: transparent !important;
  position: relative;
  border: 1px solid transparent !important; box-shadow: none !important;
  border-radius: 10px !important;
}
/* Aaron, 28 Sep: a teal idle caret replaces the composer outline. */
html[data-theme] .controls .text-input-wrap::after {
  content: ''; position: absolute; left: 14px; top: 50%;
  width: 2px; height: 1.25em; margin-top: -.625em;
  border: 0; border-radius: 0; transform: none;
  background: var(--composer-icon-teal, var(--mirai-teal));
  pointer-events: none; animation: composer-idle-caret 1.1s steps(1, end) infinite;
}
html[data-theme] .controls .text-input-wrap:is(:focus-within, .has-text)::after { display: none; }
html[data-theme] .controls .text-input { caret-color: var(--composer-icon-teal, var(--mirai-teal)); }
@keyframes composer-idle-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html[data-theme] .controls .text-input-wrap::after { animation: none; }
}
html[data-theme] .controls .text-input-wrap:focus-within { border-color: transparent !important; box-shadow: none !important; }
html[data-theme] .controls .text-input-wrap .text-input { color: var(--s-text-primary) !important; }
html[data-theme] .controls .text-input-wrap .text-input::placeholder { color: var(--s-text-secondary) !important; opacity: 1; }
/* Aaron, 28 Sep: align typed text with the transcript, including narrow tablets.
   Extend the outline into the gutter by its 1px border + 10px wrapper padding
   + 4px textarea padding, retaining breathing room inside the outline. */
html[data-theme] .app.voice-app .controls {
  padding-inline: max(24px, calc((100% - 720px) / 2)) !important;
}
html[data-theme] .controls .controls-text-group { max-width: none !important; }
html[data-theme] .controls .text-input-wrap {
  margin-left: -15px;
  padding-left: 10px !important;
}
html[data-theme] .controls .text-input-wrap textarea.text-input { padding-left: 4px !important; }
@media (max-width: 768px) {
  html[data-theme] .app.voice-app .controls { padding-inline: 16px !important; }
}
html[data-theme] .controls .text-input-wrap .input-btn,
html[data-theme] .controls .text-input-wrap .loop-toggle-btn { color: var(--s-text-secondary) !important; }
/* Composer icons — Aaron, 27 Sep 2026. Match chat activity teal in each theme. */
html[data-theme] .controls .text-input-wrap { --composer-icon-teal: var(--mirai-teal); }
html[data-theme="light"] .controls .text-input-wrap { --composer-icon-teal: #087677; }
html[data-theme] .controls .text-input-wrap .upload-btn,
html[data-theme] .controls .text-input-wrap .voice-btn { color: var(--composer-icon-teal) !important; }
html[data-theme] .controls .text-input-wrap .upload-btn svg,
html[data-theme] .controls .text-input-wrap .voice-btn .voice-bar { fill: currentColor !important; }
/* Voice activity stays in the waveform; no illuminated button box in any phase. */
html[data-theme] .controls .text-input-wrap .voice-btn {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}
html[data-theme] .controls .text-input-wrap .voice-btn:focus-visible {
  outline: 2px solid var(--composer-icon-teal);
  outline-offset: 2px;
}
/* Icon-only send/stop, transparent composer and a quiet second beat — Aaron, 27 Sep. */
html[data-theme] .controls .text-input-wrap .send-btn {
  background: transparent !important;
  color: var(--composer-icon-teal) !important;
  border: 0 !important;
  box-shadow: none !important;
}
html[data-theme] .controls .text-input-wrap .send-btn:focus-visible {
  outline: 2px solid var(--composer-icon-teal);
  outline-offset: 2px;
}
html[data-theme] .controls { background: transparent !important; }
.chat-weave #composerActivity .weave-clock {
  color: var(--chat-activity-accent, var(--s-accent));
}
.chat-weave #composerActivity .weave-activity:is([data-phase="thinking"], [data-phase="tools"], [data-phase="writing"]) .weave-clock {
  animation: composer-clock-pulse 1s ease-in-out infinite;
}
@keyframes composer-clock-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .75; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-weave #composerActivity .weave-activity .weave-clock { animation: none !important; }
}
html[data-theme] .mod-btn-primary { background: var(--c-btn-primary-bg) !important; color: var(--c-btn-primary-text) !important; }
html[data-theme] .mod-btn-primary:hover { background: var(--c-btn-primary-bg-hover) !important; }
html[data-theme="light"] .sidebar-new-chat,
html[data-theme="light"] :is(.btn-primary, .btn.primary, button.primary) {
  background: var(--c-btn-primary-bg) !important;
  color: var(--c-btn-primary-text) !important;
}
html[data-theme="light"] .sidebar-new-chat:hover,
html[data-theme="light"] :is(.btn-primary, .btn.primary, button.primary):hover {
  background: var(--c-btn-primary-bg-hover) !important;
  color: var(--c-btn-primary-text-hover) !important;
}
/* Older shared module polish used literal white for these labels/borders. */
html[data-theme="light"] :is(.mod-btn-secondary, .mod-btn-outline) {
  color: var(--s-text-primary) !important;
  border-color: var(--s-border-strong) !important;
}
html[data-theme="light"] .mod-btn-ghost { color: var(--s-text-secondary); }
html[data-theme="light"] :is(.mod-btn-secondary, .mod-btn-outline, .mod-btn-ghost):hover {
  background: var(--s-bg-hover) !important;
  /* colour deliberately not !important: module hover affordances (e.g. todo's red delete) must win */
  color: var(--s-text-primary);
}
/* Login follows the theme; only the logo sizing lives here. */
.login-brand-logo { display: block; width: 220px; max-width: 100%; height: auto; margin: 0 auto 18px; }
@media (min-width: 769px) {
  html:not(.mirai-mobile) .transcript { gap: 28px !important; padding-top: 32px !important; }
  html:not(.mirai-mobile) .controls { padding-bottom: 24px !important; }
}
/* Mobile remains headerless; the logo and mode control live in the drawer. */
html.mirai-mobile .mirai-brand-symbol { display: none; }
html.mirai-mobile[data-theme="light"] .mirai-brand-light,
html.mirai-mobile[data-theme="dark"] .mirai-brand-dark { display: block; }
html.mirai-mobile .mirai-theme-toggle,
html.mirai-mobile .mirai-sidebar-logout { justify-content: flex-start; padding: 0 16px; }
@media (max-width: 768px) {
  .nav-sidebar .mirai-brand-symbol { display: none; }
  html[data-theme="light"] .nav-sidebar .mirai-brand-light,
  html[data-theme="dark"] .nav-sidebar .mirai-brand-dark { display: block; }
  .mirai-theme-toggle,
  .mirai-sidebar-logout { justify-content: flex-start; padding: 0 16px; }
  .mirai-theme-toggle .sidebar-item-label,
  .mirai-sidebar-logout .sidebar-item-label { display: block; }
}
/* Markdown must remain legible in both modes, including older chat-UX rules. */
html[data-theme] #transcript .msg .msg-content :is(h1,h2,h3,h4) { color: var(--s-text-primary) !important; }
html[data-theme] #transcript .msg .sender { color: var(--mirai-teal, #21BFC1) !important; }
html[data-theme="light"] #transcript .msg .sender { color: #087677 !important; }
html[data-theme] #transcript .msg .time { color: var(--chat-turn-divider, var(--mirai-teal)) !important; }
html[data-theme] .history-divider { color: var(--s-text-tertiary) !important; }
html[data-theme] #transcript .msg .msg-content :is(pre,code) { color: var(--s-text-primary) !important; border-color: var(--s-border-subtle) !important; }
html[data-theme] #transcript .msg .msg-content pre { background: var(--s-bg-surface-sunken) !important; }
html[data-theme] #transcript .msg .msg-content pre code { background: transparent !important; }
html[data-theme] #transcript .msg .msg-content :is(table,th,td) { border-color: var(--s-border) !important; }
html[data-theme] #transcript .msg .msg-content th { background: var(--s-bg-surface-sunken) !important; color: var(--s-text-secondary) !important; }
html[data-theme] #transcript .msg .msg-content td { color: var(--s-text-primary) !important; }
html[data-theme] .empty-state-hint { max-width: 380px; }
/* The gallery's neutral type stack keeps the light wordmark and UI balanced. */
:root, html:root[data-theme] { --t-font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }
html[data-theme] body { font-family: var(--t-font-family); }
html[data-theme] .nav-sidebar .sidebar-item-label { font-size: 13px; }
html[data-theme] .header-action-btn,
html[data-theme] .header-action-btn .material-icons,
html[data-theme] .sidebar-rail-toggle,
html[data-theme] .threads-rail-toggle { color: var(--s-text-secondary) !important; }
html[data-theme] .header-action-btn:hover { color: var(--s-text-primary) !important; }

/* Mixed mode: graphite reading surface + soft charcoal navigation. 20 Sep, Aaron.
 * data-theme=dark provides compatible component colours and native controls. */
html:root[data-theme-mode="mixed"] {
  color-scheme: dark;
  --s-bg-page: #1B1D22;
  --s-bg-header: #1B1D22;
  --s-bg-surface: #25282E;
  --s-bg-surface-raised: #2E3239;
  --s-bg-surface-sunken: #17191D;
  --s-bg-overlay: #2E3239;
  --s-bg-input: #292C32;
  --s-bg-hover: #30343B;
  --s-bg-active: #393E47;
  --s-bg-selected: #393E47;
  --s-text-primary: #CDD0D5;
  --s-text-secondary: #B9BEC6;
  --s-text-tertiary: #A6ADB7;
  --s-border: #454A54;
  --s-border-subtle: #33373F;
  --s-border-strong: #666E7C;
  --s-shadow-md: none;
  --s-shadow-lg: none;
}
html[data-theme-mode="mixed"] :is(.nav-sidebar, .voice-sidebar) {
  color-scheme: dark;
  /* Aaron, 20 Sep: soft charcoal sidebars with a darker graphite chat workspace. */
  --s-bg-sidebar: #25282E;
  --s-sidebar-text: #B9BEC6;
  --s-sidebar-text-active: #CDD0D5;
  --s-sidebar-text-muted: #A6ADB7;
  --s-sidebar-icon: #A6ADB7;
  --s-sidebar-icon-active: #21BFC1;
  --s-sidebar-hover: #30343B;
  --s-sidebar-active: #393E47;
  --s-bg-page: #202329;
  --s-bg-surface: #25282E;
  --s-bg-surface-raised: #2E3239;
  --s-bg-surface-sunken: #1B1D22;
  --s-bg-overlay: #2E3239;
  --s-bg-input: #25282E;
  --s-bg-header: #202329;
  --s-bg-hover: #30343B;
  --s-bg-active: #393E47;
  --s-bg-selected: #393E47;
  --s-text-primary: #CDD0D5;
  --s-text-secondary: #B9BEC6;
  --s-text-tertiary: #A6ADB7;
  --s-accent: #21BFC1;
  --s-accent-hover: #5AD5D5;
  --s-accent-active: #83E2E0;
  --s-accent-on: #06183E;
  --s-text-on-accent: #06183E;
  --s-accent-subtle: rgba(33,191,193,.12);
  --s-text-link: #21BFC1;
  --s-text-link-hover: #5AD5D5;
  --s-border: #454A54;
  --s-border-subtle: #33373F;
  --s-border-strong: #666E7C;
  --s-border-focus: #21BFC1;
  --s-shadow-md: 0 12px 32px rgba(0,0,0,.5);
  --s-shadow-lg: 0 16px 48px rgba(0,0,0,.55);
  --s-shadow-focus: 0 0 0 3px rgba(33,191,193,.25);
  --c-heading-color: var(--s-text-primary);
  --c-subheading-color: var(--s-text-secondary);
  --c-header-bg: var(--s-bg-header);
  --c-header-title-text: var(--s-text-primary);
  --c-footer-bg: var(--s-bg-page);
  --c-sidebar-bg: var(--s-bg-sidebar);
  --c-sidebar-item-text: var(--s-sidebar-text);
  --c-sidebar-item-icon: var(--s-sidebar-icon);
  --c-sidebar-accent: var(--s-sidebar-icon-active);
  --c-chat-sidebar-bg: var(--s-bg-surface);
  --c-chat-sidebar-text: var(--s-text-primary);
  --c-chat-sidebar-hover: var(--s-bg-hover);
  --c-chat-sidebar-border: var(--s-border-subtle);
  --c-btn-primary-bg: var(--s-accent);
  --c-btn-primary-text: var(--s-accent-on);
  --c-btn-primary-bg-hover: var(--s-accent-hover);
  --c-btn-primary-text-hover: var(--s-accent-on);
  --c-btn-secondary-bg: transparent;
  --c-btn-secondary-text: var(--s-text-primary);
  --c-btn-secondary-bg-hover: var(--s-bg-hover);
  --c-input-bg: var(--s-bg-input);
  --c-input-border: var(--s-border);
  --c-card-bg: var(--s-bg-surface);
  --c-card-border-hover: var(--s-border-strong);
  --c-table-header-bg: var(--s-bg-surface-sunken);
  --c-table-header-text: var(--s-text-secondary);
  --c-table-row-bg-hover: var(--s-bg-hover);
  --c-table-row-border: var(--s-border-subtle);
  --c-chat-bg: var(--s-bg-page);
  --c-chat-window-bg: var(--s-bg-page);
  --c-chat-user-bg: transparent;
  --c-chat-user-text: var(--s-text-primary);
  --c-chat-assistant-bg: transparent;
  --c-chat-assistant-text: var(--s-text-primary);
  --s-hairline: rgba(255,255,255,.06);
  --s-hairline-strong: rgba(255,255,255,.08);
  --s-hover-wash: rgba(255,255,255,.03);
  --s-active-wash: rgba(255,255,255,.07);
  --s-shadow-md: none;
  --s-shadow-lg: none;
  background: var(--s-bg-sidebar) !important;
  color: var(--s-text-primary);
  border-color: var(--s-border-subtle) !important;
}
html[data-theme-mode="mixed"] .voice-sidebar :is(.sidebar-item-time, .sidebar-item-meta, .sidebar-title) {
  color: var(--s-text-tertiary) !important;
}
html[data-theme-mode="mixed"] .nav-sidebar .mirai-brand-light { display: none !important; }
html[data-theme-mode="mixed"] .nav-sidebar.expanded .mirai-brand-dark,
html.mirai-mobile[data-theme-mode="mixed"] .nav-sidebar .mirai-brand-dark { display: block; }
@media (max-width: 768px) {
  html[data-theme-mode="mixed"] .nav-sidebar .mirai-brand-dark { display: block; }
}
/* Copy controls and drawer headings must stay readable across the split. */
html[data-theme-mode="mixed"] :is(.msg-action-btn, .code-copy-btn) {
  color: var(--s-text-secondary) !important;
}
html[data-theme-mode="mixed"] :is(.sidebar-header-label, .sidebar-section-label, .sidebar-group-header) {
  color: var(--s-text-tertiary) !important;
  opacity: 1 !important;
}

/* Mixed-mode heading and feature accents — Aaron, 22 Sep 2026, ws_223.
 * Keep the legacy heading token neutral: it also colours record titles,
 * form values and body labels. Accent structural headings explicitly.
 * Rollback/evidence: data/ui/mixed-teal-20260922/. */
html:root[data-theme-mode="mixed"] {
  --s-text-heading: var(--mirai-teal);
}
html[data-theme-mode="mixed"] #headerPageTitle {
  color: var(--s-text-heading) !important;
}
html[data-theme-mode="mixed"] :is(
  .header-title, .mod-title, .mod-nav-title, .mod-page-title, .mod-section-title,
  .mod-card-title, .mod-panel-header, .dsh-link-title, .dsh-section-title,
  .org-month-title, .org-section-title, .td-section-title
),
html[data-theme-mode="mixed"] .mod-page :is(h1, h2, h3, h4, h5, h6),
html[data-theme-mode="mixed"] #transcript .msg .msg-content :is(h1, h2, h3, h4, h5, h6) {
  color: var(--s-text-heading) !important;
}
html[data-theme-mode="mixed"] .nav-sidebar :is(.sidebar-section-label, .sidebar-group-header),
html[data-theme-mode="mixed"] .voice-sidebar :is(.sidebar-header-label, .sidebar-date-group, .lb-strip-label) {
  color: var(--s-text-heading) !important;
}
html[data-theme-mode="mixed"] .dsh-app-icon {
  color: var(--s-accent);
}
html[data-theme-mode="mixed"] .nav-sidebar .sidebar-item.active,
html[data-theme-mode="mixed"] .nav-sidebar .sidebar-item.active .sidebar-item-label {
  color: var(--s-accent) !important;
}

/* Launchpad typography — Aaron, 22 Sep 2026, ws_223.
 * Scope the hierarchy to the nine uplifted modules. !important is necessary
 * to beat legacy theme/mobile rules that treated section titles as labels.
 * Keep icon fonts and technical pre/code blocks on their own type stacks. */
html[data-theme] :is(.ui-launchpad, .dsh-launchpad, .nt-page) {
  font-family: var(--t-font-family);
}
html[data-theme] body:has(.tab-panel.active :is(.ui-launchpad, .dsh-launchpad, .nt-page)) #headerPageTitle,
html[data-theme] :is(.ui-launchpad, .dsh-launchpad, .nt-page) .mod-nav-title {
  font-size: var(--t-font-size-xl) !important;
  font-weight: var(--t-font-weight-medium) !important;
  line-height: var(--t-line-height-tight) !important;
  letter-spacing: var(--t-tracking-tight) !important;
}
html[data-theme] body:has(.tab-panel.active .ui-launchpad) .mod-modal-header :is(h2, h3),
html[data-theme] :is(.ui-launchpad, .dsh-launchpad, .nt-page)
  :is(.mod-section-title, .dsh-link-title, .nt-heading, .notes-title-input) {
  font-size: var(--t-font-size-lg) !important;
  font-weight: var(--t-font-weight-medium) !important;
  line-height: var(--t-line-height-tight) !important;
  letter-spacing: var(--t-tracking-tight) !important;
  text-transform: none !important;
}
html[data-theme] :is(.ui-launchpad, .nt-page)
  :is(.plan-col-title, .ct-section-title, .nt-group-title, .rpt-cat-title) {
  font-size: var(--t-font-size-sm) !important;
  font-weight: var(--t-font-weight-medium) !important;
  line-height: var(--t-line-height-normal) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
html[data-theme] :is(.ui-launchpad, .dsh-launchpad)
  :is(.apr-row-title, .td-row-title, .org-row-title, .notes-list-title,
      .ct-row-title, .rpt-row-name, .dsh-tile-name) {
  font-size: var(--t-font-size-sm) !important;
  font-weight: var(--t-font-weight-medium) !important;
  line-height: var(--t-line-height-normal) !important;
  letter-spacing: normal !important;
}
html[data-theme] .ui-launchpad .notes-body {
  font-family: var(--t-font-family) !important;
  font-size: var(--t-font-size-sm) !important;
  line-height: var(--t-line-height-relaxed) !important;
}

/* Aaron, 22 Sep 2026: sidebar owns module names; reclaim redundant title rows.
 * Module controls, section headings and record/detail titles remain visible. */
.app.voice-app > .app-body > #chatHeader {
  display: none !important;
}
html[data-theme] .tab-panel .mod-nav:not(:has(> :not(.mod-toolbar-spacer))) {
  display: none !important;
}
/* A selected project is content, not a repeated module label. */
html[data-theme] .tab-panel .pm-detail-project-name {
  display: block !important;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Aaron, 27 Sep: edge chevrons are teal on both rails, and the two tabs must
   match in every state. The tab fill is resolved once on the root so the nav
   tab (inside the rail's scoped tokens) and the threads tab (outside the
   drawer) cannot pick up different --c-sidebar-bg values. */
html[data-theme] { --rail-tab-bg: var(--s-bg-sidebar); --rail-tab-border: var(--s-border-subtle); }
/* Mixed: root --s-bg-surface is the rails' charcoal (#25282E); root sidebar token is not. */
html[data-theme-mode="mixed"] { --rail-tab-bg: var(--s-bg-surface); }
html[data-theme] .sidebar-rail-toggle,
html[data-theme] .threads-rail-toggle {
  color: #21BFC1 !important;
  background: var(--rail-tab-bg) !important;
  border-color: var(--rail-tab-border) !important;
}
html[data-theme="light"] .sidebar-rail-toggle,
html[data-theme="light"] .threads-rail-toggle {
  color: #087677 !important;
}
/* Fill stays opaque on hover (the tabs float over content); the edge lights up. */
html[data-theme] .sidebar-rail-toggle:hover,
html[data-theme] .threads-rail-toggle:hover {
  border-color: currentColor !important;
}


/* P116 r002 — approved workspace chrome, 28 Sep 2026 (decision 760).
 * Scope excludes chat. Module-owned geometry and workflow remain local. */
.tab-panel:not(#chat-panel) .mod-page {
  --workspace-rule: var(--s-border);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  min-width: 0;
}
.tab-panel:not(#chat-panel) .mod-page > .mod-nav {
  gap: 12px;
  padding-block: 10px;
  box-shadow: none;
  background: transparent !important;
  border-bottom: 1px solid var(--workspace-rule);
}
.tab-panel:not(#chat-panel) .mod-page > .mod-nav .mod-nav-tabs {
  gap: 20px !important;
  min-width: 0;
}
.tab-panel:not(#chat-panel) .mod-page > .mod-nav .mod-nav-btn {
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 8px 2px !important;
  min-height: 36px;
  box-shadow: none;
  background: transparent !important;
  color: var(--s-text-secondary) !important;
  font: 500 13px/1.4 Arial, Helvetica, sans-serif;
}
.tab-panel:not(#chat-panel) .mod-page > .mod-nav .mod-nav-btn.active {
  color: var(--s-accent) !important;
  border-bottom-color: var(--s-accent) !important;
  background: transparent !important;
}
.tab-panel:not(#chat-panel) .mod-page .mod-section-title {
  font: 500 16px/1.4 Arial, Helvetica, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.tab-panel:not(#chat-panel) .mod-page .mod-btn {
  min-height: 36px;
  border-radius: 3px !important;
  font-size: 13px;
  box-shadow: none;
}
.tab-panel:not(#chat-panel) .mod-page :is(button,a,input,select,textarea,summary):focus-visible {
  outline: 2px solid var(--s-accent);
  outline-offset: 3px;
}
.tab-panel:not(#chat-panel) .mod-page :is(input,select,textarea) { max-width: 100%; }
.tab-panel:not(#chat-panel) .mod-page .mod-empty {
  min-height: 160px;
  padding: 32px 16px;
}
.tab-panel:not(#chat-panel) .mod-page .mod-list-row-title { overflow-wrap: anywhere; }
.loop-tool-evidence { margin-top: 8px; }
.loop-tool-evidence summary { cursor: pointer; color: var(--s-text-secondary) !important; font-size: 12px; }
.loop-tool-evidence pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 360px; overflow: auto; }
@media (max-width: 760px) {
  .tab-panel:not(#chat-panel) .mod-page > .mod-nav { gap: 8px; }
  .tab-panel:not(#chat-panel) .mod-page > .mod-nav .mod-nav-tabs { gap: 16px !important; }
  .tab-panel:not(#chat-panel) .mod-page :is(.mod-btn,.mod-nav-btn) { min-height: 44px; }
}


/* P116 · platform still field · 28 Sep 2026, decision 766.
 * Exact Peripheral Mandala renderer at t=16, exported as transparent WebP at full line ink, highlights capped for contrast (Aaron 28 Sep).
 * Shared viewport backdrop with no timer or input hitbox.
 * Dense readers, forms, maps, artwork and dialogs keep their own surfaces. */
html[data-theme] {
  --platform-field: url('/static/brand/platform-background-20260928-r003/mandala-landscape-dark.webp?v=brightness-32');
}
html[data-theme="light"] {
  --platform-field: url('/static/brand/platform-background-20260928-r003/mandala-landscape-light.webp?v=brightness-32');
}
/* One viewport field, painted on the body itself (decision 783, revised 8 Oct).
 * A fixed ::before was composited again under inactive threads: the finished
 * animation layer and the open rail each kept a second copy of the same art. */
html[data-theme] body:has(.app.voice-app) {
  background-color: var(--s-bg-page) !important;
  background-image: var(--platform-field) !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  isolation: isolate;
}
html[data-theme] body:has(.app.voice-app)::before,
html[data-theme] body:has(.app.voice-app)::after {
  content: none !important;
  display: none !important;
  background-image: none !important;
}
html[data-theme] .app.voice-app,
html[data-theme] .app.voice-app > .app-body,
html[data-theme] .app.voice-app .app-content,
html[data-theme] .app.voice-app .app-content > .main-area,
html[data-theme] .app.voice-app .tab-panel,
html[data-theme] .app.voice-app .tab-panel > .mod-page,
html[data-theme] .app.voice-app .tab-panel .mod-page > .mod-page-body {
  background-color: transparent !important;
}
html[data-theme] :is(.app.voice-app .nav-sidebar,.voice-sidebar) {
  background-image: none !important;
  background-color: color-mix(in srgb, var(--s-bg-sidebar) 48%, transparent) !important;
}
/* The canvas is the only field once it has painted, including a finished
 * thread. The still stays hidden so the two cannot stack. */
html[data-theme] body.has-active-synthesis-field:has(.app.voice-app),
html[data-theme] body:has(> .chat-synthesis-field.is-active):has(.app.voice-app) {
  background-image: none !important;
}
/* Chat must expose the still field before the first animation has ever run.
 * The ID beats the legacy chat-panel fill without depending on canvas setup. */
html[data-theme] .app.voice-app .app-content #chat-panel,
html[data-theme] .app.voice-app #chat-panel #transcript { background-color: transparent !important; }
@media (max-width: 760px) {
  html[data-theme] { --platform-field: url('/static/brand/platform-background-20260928-r003/mandala-portrait-dark.webp?v=brightness-32'); }
  html[data-theme="light"] { --platform-field: url('/static/brand/platform-background-20260928-r003/mandala-portrait-light.webp?v=brightness-32'); }
}
/* P116, 30 Sep: mobile drawers overlay content and must be opaque. */
@media (max-width: 900px) {
  html[data-theme] :is(.app.voice-app .nav-sidebar,.voice-sidebar) {
    background-color: var(--s-bg-sidebar) !important;
  }
}
html.mirai-mobile[data-theme] :is(.app.voice-app .nav-sidebar,.voice-sidebar) {
  background-color: var(--s-bg-sidebar) !important;
}
@media print {
  html[data-theme] body:has(.app.voice-app) { background-image: none !important; }
  body > .chat-synthesis-field { display: none !important; }
}

/* P116 · Aaron 28 Sep: translucent cards, same 48% tint as desktop rails.
 * Keep text fully opaque. Semantic tokens cover module-owned cards, detail
 * panes, tables, inputs and dialogs without blanket element/opacity rules.
 * Applies only to the operator harness, not document/login/brand previews. */
html:root[data-theme]:has(.app.voice-app) {
  --workspace-tint: 255, 255, 255;
  --workspace-tint-raised: 255, 255, 255;
  --workspace-tint-sunken: 240, 241, 243;
  --workspace-tint-hover: 240, 243, 244;
  --workspace-tint-selected: 232, 237, 243;
}
html:root[data-theme="dark"]:has(.app.voice-app) {
  --workspace-tint: 44, 44, 44;
  --workspace-tint-raised: 51, 51, 51;
  --workspace-tint-sunken: 32, 32, 32;
  --workspace-tint-hover: 53, 53, 53;
  --workspace-tint-selected: 60, 60, 60;
}
html:root[data-theme-mode="mixed"]:has(.app.voice-app) {
  --workspace-tint: 37, 40, 46;
  --workspace-tint-raised: 46, 50, 57;
  --workspace-tint-sunken: 23, 25, 29;
  --workspace-tint-hover: 48, 52, 59;
  --workspace-tint-selected: 57, 62, 71;
}
html:root[data-theme]:has(.app.voice-app),
html[data-theme-mode="mixed"] .app.voice-app :is(.nav-sidebar, .voice-sidebar) {
  --s-bg-surface: rgba(var(--workspace-tint), .48);
  --s-bg-surface-raised: rgba(var(--workspace-tint-raised), .48);
  --s-bg-surface-sunken: rgba(var(--workspace-tint-sunken), .24);
  --s-bg-input: rgba(var(--workspace-tint), .24);
  --s-bg-header: rgba(var(--workspace-tint), .24);
  --s-bg-overlay: rgba(var(--workspace-tint-raised), .90);
  --s-bg-hover: rgba(var(--workspace-tint-hover), .55);
  --s-bg-active: rgba(var(--workspace-tint-selected), .62);
  --s-bg-selected: rgba(var(--workspace-tint-selected), .62);
  --s-bg-disabled: rgba(var(--workspace-tint), .24);
}
/* Floating dialogs cross text below them: match the mobile rail's 90% tint.
 * No backdrop blur: it would erase the artwork rather than reveal it. */
html[data-theme] :is(.mod-modal, .modal-content, .cmdk-box, .thr-new-modal,
 .enroll-box) {
  background-color: var(--s-bg-overlay) !important;
}
/* Child search/input/footer areas do not compound the floating surface tint. */
html[data-theme] :is(.cmdk-box .cmdk-input, .cmdk-box .cmdk-footer,
 .mod-modal .mod-modal-header, .mod-modal .mod-modal-body, .mod-modal .mod-modal-footer) {
  background-color: transparent !important;
}
/* Legacy page-colour fills are local paint overrides: retain --s-bg-page
 * itself for map-marker text, canvas bases and other contrast-sensitive uses. */
html[data-theme]:has(.app.voice-app) :is(
 .sms-form-group input, .sms-form-group select, .sms-form-group textarea,
 .sms-search-input, .sms-thread-reply .sms-search-input,
 .notes-surfaces-r002 .notes-list-row:not(.active):not(:hover),
 .fx-columns, .email-mail-folders, .email-swipe .email-mail-row,
 .chains-node, .chains-inspector, pre.apr-detail-text, .code-output,
 .wx-hourly th:first-child, .thm-asset-preview) {
  background-color: var(--s-bg-surface-sunken) !important;
}
html[data-theme]:has(.app.voice-app) :is(
 .websites-dialog, .dw-dialog, .chains-dialog, .ct-profile-overlay .ct-profile) {
  background-color: var(--s-bg-overlay) !important;
}
html[data-theme]:has(.app.voice-app) :is(.db-root, .email-msg-toolbar, .email-io-pills) {
  background-color: transparent !important;
}
html[data-theme]:has(.app.voice-app) :is(.td-section-head, .sms-device-chip) {
  background-color: var(--s-bg-surface-sunken) !important;
}

/* P116 · 28 Sep: menus must obscure the content underneath. Keep these
 * paints separate from the intentionally translucent workspace surfaces.
 * Explicit menu classes also cover portals outside the active module. */
html:root[data-theme]:has(.app.voice-app) {
  --s-bg-menu: rgb(var(--workspace-tint-raised));
  --s-bg-menu-control: rgb(var(--workspace-tint));
  --s-bg-menu-hover: rgb(var(--workspace-tint-hover));
  --s-bg-menu-selected: rgb(var(--workspace-tint-selected));
}
html[data-theme]:has(.app.voice-app) :is(
 .mod-dropdown-menu, .dropdown-menu, .csel-menu, .context-menu,
 .mode-dropdown, .mode-dropdown-menu, .menu-panel, .popover,
 .thread-options-menu, .dsh-agent-menu, .agent-mention-menu,
 .fx-menu, .sms-lookup-results) {
  --s-bg-hover: var(--s-bg-menu-hover);
  --s-bg-active: var(--s-bg-menu-selected);
  --s-bg-selected: var(--s-bg-menu-selected);
  background: var(--s-bg-menu) !important;
  color: var(--s-text-primary);
  border: 1px solid var(--s-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
html[data-theme]:has(.app.voice-app) :is(select, .mod-dropdown-trigger, .csel-trigger) {
  background-color: var(--s-bg-menu-control) !important;
  color: var(--s-text-primary);
}
html[data-theme]:has(.app.voice-app) :is(option, optgroup) {
  background-color: var(--s-bg-menu) !important;
  color: var(--s-text-primary);
}
html[data-theme]:has(.app.voice-app) :is(.mod-dropdown-item, .dropdown-item, .csel-opt) {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
html[data-theme]:has(.app.voice-app) :is(.mod-dropdown-item, .dropdown-item, .csel-opt):is(:hover, :focus-visible) {
  background: var(--s-bg-menu-hover) !important;
  color: var(--s-text-primary) !important;
}
html[data-theme]:has(.app.voice-app) :is(.mod-dropdown-item, .dropdown-item, .csel-opt):is(.selected, [aria-selected="true"]) {
  background: var(--s-bg-menu-selected) !important;
  color: var(--s-text-primary) !important;
  font-weight: 600;
}
html[data-theme]:has(.app.voice-app) :is(.mod-dropdown-item, .dropdown-item, .csel-opt):focus-visible {
  outline: 2px solid var(--s-accent) !important;
  outline-offset: -3px;
}

/* P116 · Aaron 28 Sep: remove decorative item totals, not operational data.
 * Explicit module/element scope: shared count classes also carry host errors,
 * money, time remaining and pagination. Keep those, selection/limit counters,
 * progress and actionable unread/approval badges available. No DOM observer. */
html[data-theme] .app.voice-app :is(
  #organiser-panel .mod-section-count,
  #todo-panel .mod-section-count,
  #notes-panel .mod-section-count,
  #plan-panel .mod-section-count,
  #contacts-panel .mod-section-count,
  #approvals-panel .mod-section-count,
  #banking-panel .mod-section-count,
  #quorum-panel .mod-section-count,
  #secrets-panel .mod-section-count,
  #scheduled_actions-panel .mod-section-count,
  #knowledge_base-panel .mod-section-count,
  #persona_editor-panel .mod-section-count,
  #agent_settings-panel .mod-section-count,
  #notifications-panel .mod-section-count,
  #user_admin-panel .mod-section-count,
  #research-panel .mod-section-count,
  #printer-panel .mod-section-count,
  #project_management-panel .mod-section-count,
  #mirai_data-panel .mod-section-count,
  #device_plane-panel .mod-section-count,
  #design-panel .mod-section-count,
  #classifieds-panel .mod-section-count:not(.mod-status-detail),
  #location-panel .mod-section-count,
  #brand-panel .mod-section-count,
  #style_guide-panel .mod-section-count,
  #ai_gateway-panel .mod-section-count,
  #todo-panel .mod-record-count,
  #decisions-panel .mod-record-count,
  #knowledge_base-panel .mod-record-count,
  #secrets-panel .mod-record-count,
  #scheduled_actions-panel .mod-record-count,
  #user_admin-panel .mod-record-count,
  #mirai_os-panel .mod-record-count,
  #device_plane-panel .mod-record-count,
  #media-panel .mod-record-count,
  #contacts-panel .mod-nav .mod-record-count,
  #contacts-panel .ct-section-count,
  #plan-panel .plan-col-count,
  #threads-panel .thr-count,
  #suggestions-panel .sg-count,
  #websites-count,
  #fx-count,
  #notes-word-count,
  #au-count,
  #health-svc-count,
  #cpu-procs-count,
  #sms-conv-count,
  #dashboard-panel .dsh-link-count,
  .mod-item-count
) { display: none !important; }

/* P116 · 30 Sep: mobile text entry fills row one; controls occupy row two.
 * Dashboard retains its own stacked composer. APK landscape may exceed 760px. */
@media (max-width: 760px) {

html[data-theme] .controls .text-input-wrap.tools-on-right {
  grid-template-columns: minmax(0, 1fr) !important;
}
html[data-theme] .controls .text-input-wrap.tools-on-right > .text-input {
  grid-column: 1; grid-row: 1;
}
html[data-theme] .controls .text-input-wrap.tools-on-right > .composer-actions {
  grid-column: 1; grid-row: 2; width: 100%; justify-content: flex-end;
}
html[data-theme] .controls .text-input-wrap.tools-on-right::after {
  top: 16px; margin-top: 0;
}
html[data-theme] .controls .text-input-wrap.tools-on-right .composer-actions > button {
  min-width: 44px; min-height: 44px;
}
}

html.mirai-mobile[data-theme] .controls .text-input-wrap.tools-on-right {
  grid-template-columns: minmax(0, 1fr) !important;
}
html.mirai-mobile[data-theme] .controls .text-input-wrap.tools-on-right > .text-input {
  grid-column: 1; grid-row: 1;
}
html.mirai-mobile[data-theme] .controls .text-input-wrap.tools-on-right > .composer-actions {
  grid-column: 1; grid-row: 2; width: 100%; justify-content: flex-end;
}
html.mirai-mobile[data-theme] .controls .text-input-wrap.tools-on-right::after {
  top: 16px; margin-top: 0;
}
html.mirai-mobile[data-theme] .controls .text-input-wrap.tools-on-right .composer-actions > button {
  min-width: 44px; min-height: 44px;
}
/* P116 restart handoff: match the login/offline entry screens. */
#apiRestartBanner {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: max(32px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-color: var(--s-bg-page, #1B1D22);
  background-image: var(--platform-field, none);
  background-size: 100% 100%;
  background-position: center;
  color: var(--s-text-primary, #CDD0D5);
  font: 400 13px/1.5 Arial, Helvetica, sans-serif;
  text-align: center;
  overflow: auto;
}
#apiRestartBanner[open] { display: grid; place-items: center; }
#apiRestartBanner:not([open]) { display: none; }
#apiRestartBanner::backdrop { background: var(--s-bg-page, #1B1D22); }
#apiRestartBanner .api-restart-content { width: 100%; max-width: 352px; margin: auto; }
#apiRestartBanner .api-restart-logo { display: block; width: 260px; max-width: 100%; height: auto; margin: 0 auto 28px; }
#apiRestartBanner .api-restart-logo-light { display: none; }
html[data-theme="light"] #apiRestartBanner .api-restart-logo-dark { display: none; }
html[data-theme="light"] #apiRestartBanner .api-restart-logo-light { display: block; }
#apiRestartBanner h1 { margin: 0 0 12px; color: inherit; font: 500 18px/1.4 Arial, Helvetica, sans-serif; outline: none; }
#apiRestartBanner p { margin: 0; color: var(--s-text-secondary, #B9BEC6); font: inherit; overflow-wrap: anywhere; }
#apiRestartBanner .api-restart-indicator {
  display: block;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  margin: 28px auto 0;
  border: 2px solid var(--s-border, #525660);
  border-top-color: #21BFC1;
  border-radius: 50%;
  animation: api-restart-spin 1.2s linear infinite;
}
html[data-theme="light"] #apiRestartBanner .api-restart-indicator { border-top-color: #087677; }
#apiRestartBanner.is-ready .api-restart-indicator { animation: none; border-color: #21BFC1; }
@keyframes api-restart-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #apiRestartBanner .api-restart-indicator { animation: none; }
}

/* P116 8 Oct: one wallpaper. Resting drawers stay untransformed so a phone
 * does not keep a second copy of the field behind inactive threads. */
html[data-theme] :is(.voice-sidebar, .nav-sidebar):not(.is-dragging) {
  transform: none !important;
  will-change: auto;
}
html[data-theme] :is(.voice-sidebar-overlay, .sidebar-overlay) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}