/* ETTI PWA — iPad-first, dark by default. Zero dependencies. */



:root {
  --workspace-left: 0px;
  --workspace-top: 48px;
  --workspace-width: 100vw;
  --workspace-height: calc(100dvh - 48px);
  --ar-tilt-x: 0px;
  --ar-tilt-y: 0px;
  --radius: 10px;
  --motion-navigation-ms: 180ms;
  --tab-section-opacity: 62%;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#app-layout {
  width: 100%;
  height: 100dvh;
  min-width: 0;
  overflow: hidden;
}

.hidden { display: none !important; }
.muted { color: var(--text-muted); }

/* Native menus must follow the chosen theme too, including in fullscreen.
   Low specificity lets each component retain its sizing and focus styling. */
:where(select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])) {
  color: var(--text);
  background-color: var(--bg-inset);
  border-color: var(--border);
}

.banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 6px 16px;
  text-align: center;
  background: var(--warn);
  color: #201500;
  font-weight: 600;
}

/* Live AI-to-AI approval is global, blocking, and intentionally visible over
   every PWA panel. The server remains authoritative; this is only the alert
   and decision surface. */
.ai-communication-alert {
  position: fixed;
  z-index: 1200;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 20px));
  padding: 12px;
  border: 2px solid var(--accent, #e68a00);
  border-radius: 12px;
  background: var(--surface, #fff);
  color: var(--text, #111);
  box-shadow: 0 8px 28px rgb(0 0 0 / 28%);
}
.ai-communication-alert h2 { margin: 0 0 4px; font-size: 1rem; }
.ai-communication-alert p { margin: 4px 0; }
.ai-communication-alert .approval-preview {
  max-height: 5.5em;
  overflow: auto;
  padding: 6px;
  border-radius: 6px;
  background: var(--bg-inset, #f3f3f3);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ai-communication-alert .approval-feedback {
  width: 100%;
  min-height: 48px;
  resize: vertical;
  margin-top: 6px;
}
.ai-communication-alert .approval-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.ai-communication-alert .approval-phrase-label {
  flex: 1 1 100%;
  font-weight: 600;
}
.ai-communication-alert .approval-phrase-input {
  flex: 1 1 20rem;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--border, #bbb);
  border-radius: 6px;
  background: var(--surface, #fff);
  color: var(--text, #111);
}
.ai-communication-alert .approval-phrase-message {
  flex: 1 1 100%;
  font-size: 0.78rem;
}

.layout {
  display: grid;
  grid-template-columns: var(--lime-sidebar-width, 300px) 8px minmax(0, 1fr);
  height: 100dvh;
  min-width: 0;
}

/* The selected Lime Tree gets a small, always-available shell bar.  It is
   intentionally translucent so the conversation remains visually primary,
   while the sidebar toggle still works after the panel has been collapsed. */
.layout.sidebar-collapsed {
  grid-template-columns: 0px var(--drag-bar-width, 10px) minmax(0, 1fr);
  transition: grid-template-columns var(--motion-navigation-ms, 180ms) cubic-bezier(.22,.61,.36,1);
}
.layout.sidebar-collapsed > .sidebar {
  display: flex;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  padding-inline: 0;
  border: 0;
  overflow: clip;
  visibility: hidden;
  opacity: 0;
  transform: translateX(-8px);
  pointer-events: none;
  transition: opacity var(--motion-navigation-ms, 180ms) ease, transform var(--motion-navigation-ms, 180ms) cubic-bezier(.22,.61,.36,1), visibility 0s linear var(--motion-navigation-ms, 180ms);
}
.layout:not(.sidebar-collapsed) { transition: grid-template-columns var(--motion-navigation-ms, 180ms) cubic-bezier(.22,.61,.36,1); }
.layout:not(.sidebar-collapsed) > .sidebar { visibility: visible; opacity: 1; transform: translateX(0); transition: opacity var(--motion-navigation-ms, 180ms) ease, transform var(--motion-navigation-ms, 180ms) cubic-bezier(.22,.61,.36,1), visibility 0s; }
:root { --drag-bar-width: 10px; }
.sidebar-resize-handle {
  position: relative;
  z-index: 4;
  cursor: col-resize;
  touch-action: none;
  width: var(--drag-bar-width);
  min-width: var(--drag-bar-width);
  background: rgb(24 27 36 / 46%);
  transition: background .16s ease, width .16s ease;
}
.sidebar-resize-handle::after {
  content: "";
  position: absolute;
  inset: 25% calc(var(--drag-bar-width)/2 - 2px);
  width: 4px;
  border-radius: 999px;
  background: #459fff;
  opacity: .95;
}
.sidebar-resize-handle:hover,
.sidebar-resize-handle:focus-visible,
.sidebar-resize-handle.dragging { background: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.sidebar-resize-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.layout.sidebar-collapsed > .sidebar-resize-handle { display: block; }
body.sidebar-resizing,
body.sidebar-resizing * { user-select: none !important; -webkit-user-select: none !important; cursor: col-resize !important; }

/* ------------------------------------------------------------- sidebar --- */

.sidebar {
  border-right: 1px solid var(--border);
  background: var(--bg-raised);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sidebar-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 14px 14px 10px;
}

.sidebar-brand-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-width: 0;
}
.deployment-zone-badge { margin-left:auto; align-self:flex-start; font-size:.66rem; letter-spacing:.08em; color:var(--muted); white-space:nowrap; }
.deployment-zone-badge.production { color:var(--accent,#ffb454); }
.deployment-zone-badge { display:none !important; }
.file-code-preview { padding:0; text-align:left; counter-reset:file-line; min-width:0; }
.file-code-line { display:grid; grid-template-columns:4.5rem minmax(0,1fr); min-height:1.35em; min-width:0; }
.file-line-number { color:var(--muted); text-align:right; padding-right:.75rem; user-select:none; border-right:1px solid var(--border); white-space:nowrap; min-width:4.5rem; box-sizing:border-box; overflow:hidden; text-overflow:clip; font-variant-numeric:tabular-nums; }
.file-code-line code { padding-left:.8rem; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; min-width:0; }
.syntax-json .file-code-line code, .syntax-code .file-code-line code { color:var(--text); }
.syntax-markdown .file-code-line code { color:var(--text); }
.syntax-keyword { color:var(--syntax-keyword); }
.syntax-string { color:var(--syntax-string); }
.syntax-comment { color:var(--syntax-comment); font-style:italic; }
.syntax-heading { color:var(--syntax-heading); font-weight:700; }
/* ── Files expanded view: wrapping + infinite-scroll sentinel ── */
.file-viewer pre, .file-viewer-text, .file-content, .file-code,
.file-browser-text, .file-viewer-text pre,
.file-code-preview, .file-code-line code {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
.file-viewer-text { min-width:0; max-width:100%; }
.viewer-center, .media-slide-pane, .viewer-center-viewport { min-width:0; }
.file-viewer-sentinel { height:1px; width:100%; flex:none; pointer-events:none; }

/* The profile entry point is an avatar, not another crowded navigation tab.
   Its button remains a normal, keyboard-focusable control that opens the
   existing Profile & Settings panel. */
.profile-avatar-button {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 62%, var(--border));
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-inset));
  color: var(--text);
  box-shadow: 0 2px 8px rgb(0 0 0 / 16%);
}
.profile-avatar-button:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 23%, var(--bg-inset));
}
.profile-avatar-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.nav-profile-btn {
  width: 32px;
  height: 32px;
  margin-left: auto;
}
.nav-profile-btn .profile-avatar {
  width: 24px;
  height: 24px;
  font-size: 0.7rem;
}
.nav-scroll-hint {
  display: none;
  align-self: center;
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 400;
  margin-left: 8px;
  padding-right: 4px;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .primary-nav .nav-scroll-hint {
    display: inline-flex;
  }
}
.profile-avatar {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  line-height: 1;
  border-radius: inherit;
  overflow: hidden;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.profile-avatar img,
.profile-avatar-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-avatar-pending {
  color: transparent;
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-raised));
}

/* Shared ETTI brand lockup.  Keeping the slogan in its own line gives the
   product name a stable, readable hierarchy in both the auth view and the
   Lime Tree header without allowing action controls to shift it around. */
.brand-lockup {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  align-items: center;
}

.brand-lockup-action {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  border-radius: 8px;
}

.brand-lockup-action:hover,
.brand-lockup-action:focus-visible {
  text-decoration: none;
  outline: 2px solid var(--fruit-focused-border, #62df8a);
  outline-offset: 5px;
}

.schedule-field {
  display: block;
  margin: 4px 0;
  font-size: 0.82rem;
}

.schedule-field > input,
.schedule-field > textarea {
  display: block;
  width: 100%;
  margin-top: 2px;
}

.schedule-field-hint {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 400;
}

.brand-lockup h1 {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.05;
  letter-spacing: 0.04em;
  color: #efd35b;
}

.brand-slogan {
  display: block;
  color: #efd35b;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Title always occupies its own full-width row so the action buttons can
   never overlap it or the window edge, at any sidebar width (Phase 5.13
   responsive fix for the four-button header). */
.sidebar-header > h1 {
  font-size: 17px;
  margin: 0;
  min-width: 0;
}

.sidebar-header .brand-lockup {
  /* Keep the lockup at the left edge while allowing the slogan to share the
     exact visual width of ETTI instead of stretching across the sidebar. */
  flex: 0 0 auto;
  align-self: flex-start;
}

.job-list {
  list-style: none;
  margin: 0;
  padding: 4px 8px 12px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.job-list li {
  padding: 10px;
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.job-list li:hover { background: var(--bg-inset); }
.job-list li.selected { background: var(--bg-inset); outline: 1px solid var(--border); }
.job-list li.lime-open-in-multi { background: color-mix(in srgb, var(--accent) 14%, var(--bg-inset)); outline: 1px solid color-mix(in srgb, var(--accent) 48%, var(--border)); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 72%, transparent); }
.job-list .job-prompt-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The primary left navigation is a Lime Tree.  Each row is a conversation
   container; its messages appear only after the Lime is opened in the main
   conversation surface. */
.sidebar-new-lime {
  flex: 0 0 auto;
  white-space: nowrap;
}
.lime-list-item {
  position: relative;
  display: block !important;
  overflow: hidden;
  padding: 0 !important;
  touch-action: pan-y;
  isolation: isolate;
}
.lime-swipe-surface {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title status"
    "preview preview"
    "meta meta";
  align-items: center;
  gap: 2px 8px;
  min-height: 72px;
  padding: 10px 10px 9px;
  background: var(--bg-raised);
  transform: translate3d(var(--lime-swipe, 0px), 0, 0);
  transition: transform 160ms ease;
  will-change: transform;
}
.lime-list-item.selected .lime-swipe-surface,
.lime-list-item.bulk-selected .lime-swipe-surface {
  background: var(--bg-inset);
}
.lime-swipe-actions {
  position: absolute;
  inset-block: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}
.lime-swipe-actions-start {
  left: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 24%, var(--bg-inset)), transparent);
}
.lime-swipe-actions-end {
  right: 0;
  background: linear-gradient(270deg, color-mix(in srgb, var(--accent) 24%, var(--bg-inset)), transparent);
}
.lime-list-item.swipe-open-start .lime-swipe-actions-start,
.lime-list-item.swipe-open-end .lime-swipe-actions-end {
  opacity: 1;
  pointer-events: auto;
}
.lime-swipe-action {
  min-width: 48px;
  padding: 5px 8px;
  font-size: 0.72rem;
  white-space: nowrap;
}
.lime-list-item .lime-title {
  grid-area: title;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.84rem;
}
.lime-list-item .badge { grid-area: status; justify-self: end; }
.lime-list-item .lime-preview {
  grid-area: preview;
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lime-list-item .lime-meta {
  grid-area: meta;
  font-size: 0.67rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------- badges --- */

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.roadmap-summary progress {
  display: block;
  height: 0.7rem;
  accent-color: var(--accent);
}
.roadmap-next-list {
  display: grid;
  gap: 0.55rem;
}
.roadmap-next-list h3 { margin: 0.2rem 0 0; }
.roadmap-item { display: grid; gap: 0.35rem; padding: 0.7rem; }
.roadmap-item-title { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.roadmap-status { color: var(--text); background: var(--bg-raised); border: 1px solid var(--border); }
.roadmap-status.attention { color: var(--state-warn-text); background: var(--state-warn-surface); }
.roadmap-next-action { margin: 0; font-size: 0.82rem; }
.roadmap-nonblocking { font-size: 0.72rem; }
.roadmap-todos { padding: 0.7rem; }
.roadmap-todos h3, .roadmap-todos p { margin: 0; }
.roadmap-todos p { margin-top: 0.35rem; font-size: 0.8rem; }

.state-queued      { background: var(--state-neutral-surface); color: var(--state-neutral-text); }
.state-running     { background: var(--state-info-surface); color: var(--state-info-text); }
.state-waiting_for_permission { background: var(--state-warn-surface); color: var(--state-warn-text); }
.state-needs_attention { background: var(--state-warn-surface); color: var(--state-warn-text); }
.state-completed   { background: var(--state-success-surface); color: var(--state-success-text); }
.state-failed      { background: var(--state-danger-surface); color: var(--state-danger-text); }
.state-cancelled   { background: var(--state-neutral-surface); color: var(--state-neutral-text); }

/* ----------------------------------------------------------------- main --- */

.main {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  /* Phase 5.14 layout model: .main NEVER scrolls. It is a fixed-height flex
     column: [scrollable content region][composer]. All page growth is
     absorbed by exactly ONE scroll owner (#job-scroll), so the header,
     composer, and controls stay put regardless of message length.
     min-height:0 on every flex child keeps this contract intact. */
  overflow: hidden;
}

/* The single scroll owner for the main column. */
.party-board button[data-game-selected="true"] { outline: 3px solid var(--accent); outline-offset: 2px; }
.job-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-block: 60px;
}

.lime-top-nav {
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin: 0;
  padding: 7px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--bg-raised) 72%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}
.panel-multitask-workspace > .lime-multitask-card {
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 280px;
  pointer-events: auto;
}
.lime-multitask-card { min-width: 0; padding: 0; overflow: hidden; }
.lime-multitask-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--bg-raised) 88%, transparent);
  border-bottom: 1px solid var(--border);
}
.lime-tree-sticky-header {
  position: sticky;
  top: 0;
  z-index: 5;
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--fruit-focused-border,#62df8a));
  border-radius: var(--radius);
}
.lime-tree-sticky-header.hidden { display: none !important; }
.lime-multitask-history { max-height: min(58dvh, 620px); overflow: auto; padding: 8px; }
.lime-multitask-turn { display: grid; gap: 5px; margin-bottom: 9px; }
.lime-multitask-turn p { margin: 0; padding: 7px 9px; border-radius: 10px; white-space: pre-wrap; }
.lime-multitask-seed { justify-self: end; max-width: 88%; background: var(--accent); color: var(--on-accent); }
.lime-multitask-lime { justify-self: start; max-width: 92%; background: var(--bg-inset); color: var(--text); }
.lime-top-nav-sidebar,
.lime-menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 32px;
  padding: 5px 9px;
  border-color: color-mix(in srgb, var(--border) 85%, var(--accent));
  white-space: nowrap;
}
.lime-collapsed-brand {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  line-height: 1;
}
.lime-collapsed-brand-name {
  color: var(--text);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.lime-collapsed-brand .brand-slogan {
  font-size: 0.52rem;
  letter-spacing: 0.12em;
}
.layout.sidebar-collapsed .lime-collapsed-brand { display: flex; }
.layout.sidebar-collapsed .lime-top-nav-chips { display: flex; }
.lime-top-nav-title {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Keep the empty Lime surface's view-mode menu at the far right without
   showing a meaningless title.  `.hidden` normally removes an element from
   layout; this scoped exception is an intentional invisible flex spacer. */
.lime-top-nav > .lime-top-nav-title.hidden {
  display: block !important;
  visibility: hidden;
}
.lime-favourite-indicator {
  flex: 0 0 auto;
  color: var(--accent, #4a9eff);
  font-size: 1rem;
  line-height: 1;
  text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 35%, transparent);
}
.lime-list-item .lime-favourite-indicator {
  margin-right: 4px;
  font-size: 0.78rem;
  vertical-align: 0.04em;
}
.lime-top-nav-actions {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-inline-start: 4px;
  /* Keep the mode/actions menu pinned to the far edge even when the
     selected Lime title is intentionally hidden on the empty surface. */
  margin-left: auto;
}
.lime-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  /* Keep the menu above the tab-panel drag surface in the same shell layer. */
  z-index: 20;
  display: grid;
  min-width: 156px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-raised) 94%, transparent);
  box-shadow: 0 10px 30px rgb(0 0 0 / 28%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}
.lime-menu-item {
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  text-align: left;
}
.lime-menu-item:hover,
.lime-menu-item:focus-visible {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  outline: none;
}
.lime-menu-danger { color: var(--danger); }
.deployment-switch-status { max-width: 260px; margin: 4px 10px; font-size: .85rem; overflow-wrap: anywhere; }
.deployment-switch-status[hidden] { display: none; }

.latest-btn {
  /* Own the bottom edge of the conversation, not a guessed composer height.
     Negative top margin floats into the scroll area without stealing space. */
  position: relative;
  flex: none;
  align-self: center;
  min-height: 40px;
  margin: -48px auto 8px;
  z-index: 13;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  text-align: center;
  color: var(--text-muted);
  padding: 40px 24px;
  box-sizing: border-box;
}
.empty-state h2 { margin: 0 0 8px; }
.empty-state p { margin: 0; }
.empty-state-content { margin: 0; }
.empty-state-bottom-row { width: 100%; margin: 0; padding-top: 24px; display: flex; justify-content: center; }
.empty-state-bottom-row .ghost-btn { min-height: 44px; }
body.multi-window-has-content .main > #job-scroll { display: none !important; }
#mom-body { display: grid; gap: 0.6rem; width: 100%; box-sizing: border-box; min-width: 0; }
#mom-body > * { min-width: 0; overflow-wrap: anywhere; max-width: 100%; box-sizing: border-box; }
#mom-panel .panel, #mom-body .panel { max-width: 100%; overflow-wrap: anywhere; }

.job-list:has(> .empty-state-item:only-child) {
  display: flex;
  align-items: center;
  justify-content: center;
}
.empty-state-item {
  text-align: center;
  color: var(--text-muted);
  padding: 40px 16px;
  list-style: none;
}

.job-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Final answer actions must remain above the floating Latest/Sow chips. */
  padding: 16px 18px calc(64px + env(safe-area-inset-bottom));
  gap: 12px;
}

.detail-header {
  flex: none;
  padding: 2px 0;
}
.detail-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.detail-title-row h2 {
  font-size: 16px;
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.route-line, .stats-line {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* --------------------------------------------------------------- panels --- */

.panel {
  flex: none;
  border: 1px solid var(--warn);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: var(--bg-raised);
}
.panel h3 { margin: 0 0 6px; font-size: 15px; }
.panel p { margin: 4px 0; }
.panel .actions { display: flex; gap: 10px; margin-top: 10px; }
.panel.warn { border-color: var(--warn); background: var(--warn-surface); color: var(--warn-text); }

.analytics-heading h3 { margin-bottom: 2px; }
.analytics-heading p { margin-top: 0; }
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.analytics-card {
  display: grid;
  gap: 3px;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-inset);
}
.analytics-card-label { font-size: 0.76rem; }
.analytics-card strong { overflow-wrap: anywhere; }
.analytics-section { margin-top: 10px; border-color: var(--border); }
.analytics-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.analytics-section-heading h3 { margin-bottom: 0; }

.error-card {
  flex: none;
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  padding: 10px 14px;
  background: var(--danger-surface);
  color: var(--danger-text);
  font-size: 14px;
  white-space: pre-wrap;
}
.error-card .actions { margin-top: 8px; }

.cmd-details {
  flex: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-inset);
  font-size: 13px;
}
.cmd-details summary { padding: 8px 12px; cursor: pointer; color: var(--text-muted); }
.cmd-details pre {
  margin: 0;
  padding: 0 12px 10px;
  overflow-x: auto;
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* -------------------------------------------------------------- console --- */

.output-console {
  flex: 1;
  min-height: 120px;
  margin: 0;
  padding: 12px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.output-console:empty { display: none; }

/* ------------------------------------------------------------- composer --- */

.composer {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--bg-raised);
}
/* Sow/Hide owns the whole Seed surface, including the options above it. */
.composer.composer-collapsed { display: none; }
.composer:not(.composer-collapsed) { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.composer-collapse-btn {
  position: absolute;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 24;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 62px;
  min-height: 42px;
  padding: 8px 13px;
  border-color: color-mix(in srgb, var(--accent) 65%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-raised) 82%, transparent);
  color: var(--text);
  box-shadow: 0 8px 26px rgba(0,0,0,.24);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
.composer .composer-collapse-btn {
  position: static;
  z-index: auto;
  min-width: 0;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: var(--radius);
  box-shadow: none;
}
.composer-collapse-icon { font-size: .95rem; line-height: 1; }
.composer-collapse-label { font-size: .76rem; font-weight: 700; }

.composer textarea {
  flex: 1;
  resize: vertical;
  min-height: 72px;
  background: var(--bg-inset);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  font: inherit;
  line-height: 1.5;
}

/* Keep the Seed prompt hint legible but subordinate to entered text in both
   themes.  Opacity lets the theme surface gently lift the muted tone instead
   of making the placeholder compete with the conversation. */
.composer textarea::placeholder {
  color: var(--text-muted);
  opacity: .82;
}

.composer textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ChatGPT-style composer: the primary Sow/Stop action lives inside the
   message field, anchored to its lower edge.  The field keeps enough end
   padding that typed content never sits underneath the control. */
.composer-draft-status { margin: .2rem .7rem; font-size: .75rem; color: var(--muted, #9ba3b5); overflow-wrap: anywhere; }
.composer-draft-status[data-warning="true"] { color: var(--warn); }
.composer-draft-status[hidden] { display: none !important; }
#composer-draft-conflict[hidden] { display: none !important; }
.composer-input-shell {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--fruit-open-border, #f0d564);
  border-radius: calc(var(--radius) + 2px);
  background: color-mix(in srgb, var(--bg-raised) 94%, var(--accent));
}
.composer-input-shell:focus-within { border-color:var(--fruit-focused-border,#62df8a); }
.composer-mode-strip {
  display: flex;
  align-items: center;
  min-height: 28px;
  padding: 0 2px;
}
.composer-mode-strip .composer-modes {
  width: 100%;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
.composer-mode-strip .composer-modes .mode-btn {
  width: auto;
  min-width: 64px;
  padding: 5px 9px;
}
.composer-mode-strip .mode-keyboard-hint {
  margin-left: auto;
  text-align: right;
}
.composer-input-shell textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding-right: 84px;
  margin: 0;
  text-align: center;
  align-content: center;
  border-color:var(--fruit-open-border,#f0d564);
}
.composer-input-shell textarea:focus::placeholder { opacity: 0; }
.composer-input-shell textarea:focus { border-color:var(--fruit-focused-border,#62df8a); outline-color:var(--fruit-focused-border,#62df8a); }
.composer-input-shell textarea.composer-key-safe { border-color:var(--fruit-focused-border,#62df8a); outline-color:var(--fruit-focused-border,#62df8a); }
.composer-input-shell textarea.composer-key-destructive { border-color:#ff626f; outline-color:#ff626f; }
.composer-input-shell textarea.composer-key-neutral { border-color:var(--fruit-open-border,#f0d564); outline-color:var(--fruit-open-border,#f0d564); }
.composer-input-shell:focus-within:has(textarea.composer-key-safe) { border-color:var(--fruit-focused-border,#62df8a); }
.composer-input-shell:focus-within:has(textarea.composer-key-destructive) { border-color:#ff626f; }
.composer-input-shell:focus-within:has(textarea.composer-key-neutral) { border-color:var(--fruit-open-border,#f0d564); }
.composer-textarea-wrap {
  position: relative;
  min-width: 0;
}
.seed-attachment-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px;
  min-width: 0;
  padding: 0 2px;
}
.seed-attachment-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.seed-attachment-btn {
  min-height: 28px;
  padding: 4px 8px;
  font-size: .72rem;
  white-space: nowrap;
}
.seed-attachments-list {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}
.seed-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  padding: 4px 6px 4px 8px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent));
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-inset) 92%, var(--accent));
  font-size: .7rem;
}
.seed-attachment-chip-label {
  overflow: hidden;
  max-width: min(34rem, 62vw);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seed-attachment-chip-state {
  white-space: nowrap;
  font-size: .64rem;
}
.seed-attachment-remove {
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  line-height: 1;
}
.seed-attachment-remove:hover,
.seed-attachment-remove:focus-visible {
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: var(--danger);
}
.seed-attachment-remove:disabled { opacity: .5; cursor: default; }
.composer-submit-button {
  position: absolute;
  right: 9px;
  top: 50%;
  bottom: auto;
  z-index: 1;
  min-width: 62px;
  min-height: 38px;
  padding: 7px 13px;
  margin: 0;
  border-radius: 999px;
  line-height: 1;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 30%, transparent);
  transform: translateY(-50%);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}
#submit-btn[data-action="sow"] { border-color:var(--fruit-open-border,#f0d564); }
#submit-btn[aria-label="Sowing Seed"] { border-color:var(--fruit-focused-border,#62df8a); }

/* Keep the surface toggle in the Upload row, aligned below the right-hand Sow action. */
#seed-attachment-controls .seed-attachment-actions:has(> .composer-hide-sow-button) { flex: 1 1 100%; width: 100%; justify-content: space-between; padding-right: 9px; }
#seed-attachment-controls .seed-attachment-actions > .composer-hide-sow-button {
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 0;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: var(--radius);
  box-shadow: none;
}
.composer-submit-button:hover:not(:disabled) { filter: brightness(1.06); }
.composer-submit-button:active:not(:disabled) { transform: translateY(-50%) scale(.96); }
.composer-submit-button.composer-stop-button {
  min-width: 40px;
  width: 40px;
  padding: 6px;
  background: var(--bg-raised);
  border-color: var(--danger);
  color: var(--danger);
  font-size: 1rem;
}
.composer-submit-button.composer-stop-button:focus-visible {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
}

.composer-controls {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  order: -1;
}

.composer-modes {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mode-keyboard-hint {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 0.62rem;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

.composer-modes .mode-btn {
  width: 100%;
  text-align: center;
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: 600;
}

.composer-model {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
  flex: 1 1 190px;
  max-width: 250px;
}

.model-picker-context {
  font-size: 0.62rem;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
}

.composer-model .scope-select {
  width: 100%;
  max-width: none;
}

.composer-chatgpt-options {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 0 1 270px;
  min-width: 180px;
  max-width: 330px;
  padding: 4px 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-raised));
}
.composer-chatgpt-heading {
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.03em;
}
.composer-chatgpt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}
.chatgpt-option-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.chatgpt-option-field > span {
  font-size: 0.62rem;
  color: var(--text-muted);
}
.chatgpt-option-field select {
  min-height: 30px;
  width: 100%;
  padding: 4px 6px;
  font-size: 0.7rem;
  text-overflow: ellipsis;
}

#submit-btn {
  margin-left: auto;
  align-self: flex-start;
  min-height: 44px;
  padding: 8px 20px;
  font-weight: 600;
}

.composer-response-size,
.composer-execution-preference {
  position: relative;
  display: flex;
  flex: 0 1 150px;
  min-width: 120px;
  max-width: 180px;
  flex-direction: column;
  gap: 2px;
}


.roadmap-filter-label {
  font-size: 0.75rem;
  white-space: nowrap;
}

.roadmap-filter {
  min-width: 170px;
  max-width: 220px;
}

.composer-response-size label,
.composer-execution-preference label,
.composer-model label {
  font-size: 0.72rem;
}

.composer-response-size select,
.composer-execution-preference select {
  width: 100%;
  min-height: 36px;
  padding: 6px 8px;
  text-overflow: ellipsis;
}

.response-size-custom {
  width: min(240px, 100%);
  box-sizing: border-box;
  margin-top: 2px;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text);
}

.response-size-custom:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Small screens: stack everything */
@media (max-width: 600px) {
  .composer-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .composer-modes {
    flex-direction: row;
    gap: 4px;
  }
  .composer-modes .mode-btn {
    flex: 1;
  }
  .composer-model {
    width: 100%;
    max-width: none;
  }
  .composer-chatgpt-options {
    width: 100%;
    max-width: none;
  }
  .composer-response-size,
  .composer-execution-preference {
    width: 100%;
    max-width: none;
  }
  #submit-btn.composer-submit-button {
    width: auto;
    min-width: 58px;
    margin: 0;
  }
}

/* ── Calm composer surface -------------------------------------------------
   The textarea remains the primary action. Model, speed, intelligence, and
   supported model tuning stay behind a compact
   disclosure instead of competing with the Seed action on every screen. */
.composer-controls {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 8px;
}
.composer-options {
  order: 1;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--border) 86%, var(--accent));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-raised) 92%, var(--accent));
  overflow: visible;
}
.composer-options > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  padding: 5px 9px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.composer-options > summary::-webkit-details-marker { display: none; }
.composer-options > summary::before {
  content: "▸";
  flex: 0 0 auto;
  color: var(--fruit-focused-border,#62df8a);
  font-size: 0.72rem;
}
.composer-options[open] > summary::before { content: "▾"; }
.composer-options > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius);
}
.composer-options-title {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-right: auto;
  flex-shrink:0;
}
.composer-options-hint {
  color: var(--muted);
  font-size: 0.74rem;
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;
  text-align:right;
}
.composer-options-grid {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(170px, 1.25fr) minmax(120px, 0.8fr);
  align-items: end;
  gap: 8px;
  padding: 8px;
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, var(--accent));
}
.composer-options-grid > .composer-model,
.composer-options-grid > .composer-response-size,
.composer-options-grid > .composer-execution-preference {
  width: auto;
  max-width: none;
  min-width: 0;
  flex: 1 1 auto;
}
.composer-options-grid .scope-select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.composer-options-grid > .composer-chatgpt-options {
  grid-column: 1 / -1;
  width: auto;
  max-width: none;
  min-width: 0;
  flex: none;
}
/* The list heading is a section banner, not another Lime row. */
.sidebar-list-heading {
  margin: 4px 6px 0;
  padding: 6px 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 650;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-inset));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 70%, transparent);
}
.sidebar-list-heading-copy {
  display: grid;
  flex: 1 1 100px;
  min-width: 0;
  gap: 0;
}
.sidebar-list-heading-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  flex: 1 0 auto;
  min-width: 0;
  margin-top: 0;
}
.live-sync-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 650;
  white-space: nowrap;
}
.live-sync-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #43c77a;
  box-shadow: 0 0 0 2px color-mix(in srgb, #43c77a 20%, transparent);
}
.live-sync-status[data-state="syncing"] .live-sync-dot {
  /* Kept as a compatibility state for older cached clients, but a normal
     snapshot refresh is still live and must not look disconnected/purple. */
  background: #43c77a;
  box-shadow: 0 0 0 2px color-mix(in srgb, #43c77a 20%, transparent);
}
.live-sync-status[data-state="retrying"] .live-sync-dot,
.live-sync-status[data-state="error"] .live-sync-dot {
  background: var(--warn, #e8b34c);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn, #e8b34c) 20%, transparent);
}
#sidebar-list-label {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  line-height: 1.15;
}
.sidebar-list-heading .muted { font-size: 0.58rem !important; }
.lime-meta[data-draft="true"] { color: var(--accent); }

@media (max-width: 600px) {
  .sidebar-list-heading { padding-inline: 7px; }
  .sidebar-list-heading-actions { gap: 4px; }
  .composer-options-grid { grid-template-columns: 1fr 1fr; }
  .composer-options-grid > .composer-model { grid-column: 1 / -1; }
  .composer-options-grid > .composer-chatgpt-options { grid-column: 1 / -1; }
  .composer-mode-strip .composer-modes { flex: 1 1 auto; }
  .composer-submit-button { right: 8px; top: 50%; bottom: auto; }
}

@media (max-width: 390px) {
  .sidebar-list-heading {
    gap: 4px;
  }
  .sidebar-list-heading .muted { display: none; }
  .sidebar-new-lime { padding-inline: 7px; }
  .composer-options-grid { grid-template-columns: 1fr; }
  .composer-options-grid > .composer-model,
  .composer-options-grid > .composer-chatgpt-options { grid-column: auto; }
  .composer-submit-button { right: 8px; top: 50%; bottom: auto; }
}

/* ------------------------------------------------------------- buttons --- */

button {
  font: inherit;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 8px 14px;
  cursor: pointer;
  background: var(--bg-inset);
  color: var(--text);
}
button:disabled { opacity: 0.5; cursor: default; }

.primary-btn { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.danger-btn  { background: transparent; border-color: var(--danger); color: var(--danger); font-weight: 600; }
.ghost-btn   { background: transparent; }

/* Lime Tree state view buttons: Archived, Trashed, Select */
#archived-view-btn,
#trash-view-btn,
#select-messages-btn {
  display: block;
  width: max-content;
  margin: 0 auto 8px auto;
}
#archived-view-btn,
#trash-view-btn {
  margin: 0 auto 8px auto;
}

/* ---------------------------------------------------------- small screens --- */

@media (max-width: 760px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  /* The desktop dragger updates only a custom property. The breakpoint owns
     the actual grid immediately, so Safari live-resize cannot leave the main
     surface squeezed into a stale desktop column. */
  .layout:not(.sidebar-collapsed) {
    grid-template-columns: minmax(0, 1fr);
  }
  .sidebar-resize-handle { display: none; }
  .layout.sidebar-collapsed {
    grid-template-rows: 1fr;
  }
  .sidebar {
    border-right: none;
    border-bottom: 1px solid var(--border);
    height: clamp(250px, 50dvh, 420px);
    max-height: min(50dvh, 420px);
    min-width: 0;
    overflow: hidden;
  }
  .sidebar-header {
    flex: 0 0 auto;
    max-height: none;
    min-height: 0;
    padding: 8px 10px 6px;
    gap: 5px 8px;
    overflow: visible;
  }
  .sidebar-brand-row {
    align-items: center;
  }
  .sidebar-header .brand-lockup h1 { font-size: 1.25rem; }
  .sidebar-header .brand-slogan { font-size: .58rem; }
  .job-list {
    min-height: 88px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  .composer {
    max-height: 58dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px max(8px, env(safe-area-inset-right))
      calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  .composer-input-shell textarea { padding-right: 76px; }
  .composer-mode-strip .mode-keyboard-hint { display: none; }
  .composer-controls,
  .composer-options { min-width: 0; max-width: 100%; }
}

@media (max-width: 420px) {
  .sidebar { height: clamp(240px, 50dvh, 360px); max-height: min(50dvh, 360px); }
  .sidebar-header { padding: 7px 8px 5px; }
  .sidebar-list-heading { margin-inline: 4px; }
  .composer-input-shell { padding: 5px; }
  .composer-input-shell textarea { min-height: 68px; padding-right: 68px; }
  .seed-attachment-controls { padding-right: 2px; }
  #submit-btn.composer-submit-button {
    right: 7px;
    top: 50%;
    bottom: auto;
    min-width: 54px;
    min-height: 36px;
    padding-inline: 10px;
  }
}

/* ------------------------------------------------- auth (Phase 5.2) --- */

.auth-view {
  min-height: 100dvh;
  max-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: auto;
}

.auth-card {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.auth-card .brand-lockup { margin-bottom: 4px; align-self: flex-start; }
.auth-card .brand-lockup h1 { font-size: 1.45rem; }
.auth-card h1 { font-size: 1.3rem; }
.auth-card label { font-size: 0.85rem; color: var(--muted); margin-top: 6px; }
.auth-card input {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  font: inherit;
}
.auth-card input:focus { outline: 1px solid var(--accent); }
.auth-card .hint { font-size: 0.8rem; margin: 4px 0 8px; }
.auth-card code {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}
/* Invitation links exchange themselves for the normal device credential;
   keep the manual pairing controls out of that brief automatic hand-off. */
.auth-card.invitation-auto-pairing > label,
.auth-card.invitation-auto-pairing > input,
.auth-card.invitation-auto-pairing > button { display: none; }

.header-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  position: relative; /* anchor for .nav-menu absolute positioning */
  max-width: 100%;    /* never exceed the sidebar column */
  min-width: 0;
}
.header-actions .ghost-btn { white-space: nowrap; }
.nav-tabs-toggle { display: none; }
.tabs-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  background: color-mix(in srgb, var(--bg-raised) 88%, transparent);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0,0,0,.14);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  backdrop-filter: blur(12px) saturate(130%);
}
.tabs-chip-icon { font-size: 1.05rem; line-height: 1; }
.tabs-chip-label { font-size: 0.76rem; }
.tabs-chip[aria-expanded="true"] { border-color: color-mix(in srgb, var(--accent) 65%, var(--border)); background: color-mix(in srgb, var(--accent) 14%, var(--bg-raised)); }
.tabs-chip[aria-pressed="true"] { border-color: color-mix(in srgb, #58d6ff 72%, var(--border)); background: color-mix(in srgb, #58d6ff 16%, var(--bg-raised)); }

/* ETTI WAVE VIEW is one fixed, lifecycle-owned visual workspace. It does not
   move or recreate Lime/media nodes underneath, and it releases an owned
   microphone when hidden or backgrounded. */
.wave-view-shell {
  position: fixed;
  z-index: 900;
  inset: 0;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  gap: 10px;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 12%, rgba(88,214,255,.18), transparent 34%),
    radial-gradient(circle at 92% 82%, rgba(181,124,255,.16), transparent 38%),
    color-mix(in srgb, var(--bg) 96%, #07131b);
  color: var(--text);
}
.wave-view-header, .wave-view-actions, .wave-view-controls, .wave-source-head, .wave-tag-row, .wave-view-title { display: flex; align-items: center; }
.wave-view-header { justify-content: space-between; gap: 12px; min-width: 0; }
.wave-view-title { gap: 10px; min-width: 0; }
.wave-view-title > div { display: grid; min-width: 0; }
.wave-view-title strong { letter-spacing: .08em; font-size: clamp(1rem, 2vw, 1.4rem); }
.wave-view-title span:not(.wave-view-mark) { color: var(--text-muted); font-size: .72rem; }
.wave-view-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(88,214,255,.55); border-radius: 50%; color: #58d6ff; font-size: 1.8rem; box-shadow: 0 0 28px rgba(88,214,255,.22); }
.wave-view-actions { justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.wave-view-controls { flex-wrap: wrap; gap: 8px; padding: 8px; border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--bg-raised) 75%, transparent); backdrop-filter: blur(18px); }
.wave-view-controls label { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--text-muted); }
.wave-view-controls select { min-height: 34px; padding-block: 4px; }
.wave-colour-control input[type="color"] { width: 36px; height: 30px; padding: 2px; border: 1px solid var(--border); border-radius: 9px; background: transparent; }
.wave-view-status, .wave-view-evidence { margin: 0; }
.wave-view-status { color: var(--health-ok); font-weight: 650; }
.wave-view-status[data-kind="error"] { color: var(--danger); }
.wave-view-evidence { max-width: 100ch; color: var(--text-muted); font-size: .72rem; }
.wave-view-scroll { overflow: auto; overscroll-behavior: contain; min-height: 0; padding: 2px 2px 24px; }
.wave-source-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 10px; margin-top: 10px; }
.wave-source-card { min-width: 0; padding: 10px; border: 1px solid color-mix(in srgb, var(--border) 72%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--bg-raised) 66%, transparent); box-shadow: 0 12px 35px rgba(0,0,0,.16); overflow: hidden; }
.speaker-playback { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 16px; background: color-mix(in srgb, var(--bg-raised) 78%, transparent); }
.speaker-playback-results { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)); gap: 12px; margin-top: 12px; }
.speaker-playback-results > p { grid-column: 1 / -1; margin: 0; overflow-wrap: anywhere; }
.speaker-playback-results > div { min-width: 0; padding: 8px; border: 1px solid var(--border); border-radius: 12px; }
.speaker-playback-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.speaker-playback-controls > :is(select,input[type="file"]) { flex: 1 1 200px; width: auto; margin: 0; }
.speaker-playback-controls > button { flex: 0 1 auto; min-height: 38px; white-space: normal; }
.speaker-playback input, .speaker-playback select { width: 100%; min-width: 0; max-width: 100%; margin-block: 6px; box-sizing: border-box; font: inherit; color: var(--text); }
.speaker-playback input:not([type="file"]), .speaker-playback select { min-height: 36px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-raised); }
.speaker-playback input[type="file"] { padding-block: 4px; font-size: .8rem; }
.speaker-playback input[type="file"]::file-selector-button { min-height: 36px; margin-right: 8px; padding: 6px 10px; font: inherit; color: var(--text); border: 1px solid var(--border); border-radius: 9px; background: var(--bg-raised); cursor: pointer; }
.speaker-playback :is(input, select, button):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.speaker-playback > p { font-size: .85rem; line-height: 1.5; color: var(--text-muted); overflow-wrap: anywhere; }
.speaker-playback label { display: block; overflow-wrap: anywhere; }
.speaker-playback audio { max-width: 100%; }
/* Fit the actual panel track, not the browser viewport: Multi may place Voice
   beside another tab even on a phone. Native select/range minimums must yield. */
.voice-tts-section { min-width: 0; overflow-wrap: anywhere; }
.voice-tts-settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; margin-bottom: 12px; }
.voice-tts-options-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 8px; }
.voice-tts-settings-grid > *, .voice-tts-options-grid > * { min-width: 0; }
.voice-tts-section :is(input:not([type="checkbox"]), select, button) { min-width: 0; max-width: 100%; box-sizing: border-box; }
.voice-tts-section button { white-space: normal; overflow-wrap: anywhere; }
.wave-combined-card { min-height: 210px; }
.wave-source-head { gap: 7px; min-width: 0; }
.wave-source-live { color: #67e7a8; filter: drop-shadow(0 0 6px rgba(103,231,168,.8)); }
.wave-source-label { flex: 1 1 10rem; min-width: 5rem; border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 700; }
.wave-source-kind { max-width: 8rem; min-width: 0; }
.wave-source-color { flex: 0 0 34px; width: 34px; height: 30px; padding: 2px; border: 1px solid var(--border); border-radius: 9px; background: transparent; }
.wave-source-visibility { min-width: 52px; padding: 4px 8px; }
.wave-source-canvas { display: block; width: 100%; height: clamp(116px, 21vh, 220px); margin-top: 8px; border-radius: 12px; background: radial-gradient(circle at center, rgba(88,214,255,.06), transparent 68%), rgba(2,7,12,.42); touch-action: none; }
.wave-combined-card .wave-source-canvas { height: clamp(150px, 28vh, 290px); }
[data-theme="light"] .wave-source-canvas { background: radial-gradient(circle at center, rgba(26,117,154,.09), transparent 68%), rgba(238,247,251,.74); }
.wave-detections { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-height: 28px; margin-top: 7px; color: var(--text-muted); font-size: .7rem; }
.wave-detection, .wave-tag { border: 1px solid color-mix(in srgb, #58d6ff 35%, var(--border)); border-radius: 999px; padding: 3px 7px; background: rgba(88,214,255,.08); color: var(--text); font: inherit; font-size: .68rem; }
.wave-source-tags { display: flex; flex-wrap: wrap; gap: 4px; min-height: 2px; }
.wave-tag { cursor: pointer; }
.wave-tag-row { gap: 6px; margin-top: 6px; }
.wave-tag-row input { flex: 1 1 auto; min-width: 0; padding: 7px 9px; border: 1px solid var(--border); border-radius: 10px; }
.wave-history-disclosure { margin-top: 12px; padding: 10px; border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--bg-raised) 70%, transparent); }
.wave-history-disclosure > summary { cursor: pointer; font-weight: 700; }
.wave-history { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 8px; }
.wave-history-item { min-width: 0; padding: 7px; border: 1px solid color-mix(in srgb, var(--border) 65%, transparent); border-radius: 10px; }
.wave-history-heading { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; color: var(--text-muted); }
.wave-history-canvas { display: block; width: 100%; height: 72px; }
@media (max-width: 680px) {
  .wave-view-shell { gap: 7px; padding-inline: 8px; }
  .wave-view-header { align-items: flex-start; }
  .wave-view-actions { max-width: 62%; }
  .wave-view-actions button { min-height: 32px; padding: 5px 8px; font-size: .7rem; }
  .wave-view-controls { overflow-x: auto; flex-wrap: nowrap; }
  .wave-view-controls label { flex: 0 0 auto; }
  .wave-view-evidence { display: none; }
  .wave-source-head { flex-wrap: wrap; }
  .wave-source-label { flex-basis: calc(100% - 30px); }
}
@media (prefers-reduced-motion: reduce) {
  .wave-view-mark, .wave-source-live { filter: none; box-shadow: none; }
}
.primary-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  width: 100%;
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, var(--accent) 45%);
  background: color-mix(in srgb, var(--bg-raised) 96%, var(--bg-inset));
  border-radius: 0 0 8px 8px;
}
.primary-nav.primary-nav-collapsed { display: none; }
@media (max-width: 760px) {
  .header-actions { gap: 4px; }
  .primary-nav {
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .primary-nav .nav-tab {
    flex: 0 0 auto;
    min-width: max-content;
  }
}
.sidebar-actions-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  width: 100%;
  margin-top: 8px;
  padding-top: 10px;
  padding-inline: 6px;
  padding-bottom: 6px;
  border-top: 2px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  background: color-mix(in srgb, var(--bg-inset) 80%, var(--bg-raised));
  border-radius: 8px;
}
.sidebar-actions-row #archived-view-btn,
.sidebar-actions-row #trash-view-btn,
.sidebar-actions-row #select-messages-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 5px 4px;
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.action-chip::before,
.nav-tab::before { content: attr(data-icon); flex: 0 0 auto; font-size: .92em; }
.sidebar-actions-row > .active {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--border));
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-inset));
  color: var(--text);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent) 72%, transparent);
}
.seed-list-edit {
  flex: 0 0 auto;
  padding: 3px 6px;
  font-size: 0.7rem;
}

/* ------------------------------------------------------- settings --- */

.settings-panel {
  position: fixed;
  left: calc(var(--workspace-left, 0px) + var(--workspace-width, 100vw) / 2);
  top: calc(var(--workspace-top, 48px) + var(--workspace-height, 70dvh) / 2);
  transform: translate(-50%, -50%);
  width: min(680px, calc(var(--workspace-width, 100vw) - 24px));
  max-height: max(80px, calc(var(--workspace-height, 70dvh) - 24px));
  overflow: auto;
  z-index: 30;
  background: color-mix(in srgb, var(--bg-inset) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 16px 48px rgb(0 0 0 / 32%), inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(128%);
  backdrop-filter: blur(20px) saturate(128%);
}
.panel-multitask-workspace {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  z-index: 11;
  inset: auto !important;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  grid-auto-rows: minmax(280px, 1fr);
  gap: 10px;
  padding: 2px;
  overflow: auto;
  overscroll-behavior: contain;
  pointer-events: none;
  /* Layout modes: grid (default), vertical, horizontal */
}
/* 3 items in grid: first two 1/4 each, last spans 1/2 */
.panel-multitask-workspace:not(.layout-vertical):not(.layout-horizontal) > :nth-child(3):last-child {
  grid-column: span 2;
}
/* 5 items: last spans to fill */
.panel-multitask-workspace:not(.layout-vertical):not(.layout-horizontal) > :nth-child(5):last-child {
  grid-column: span 2;
}
/* 7 items: last spans to fill (2x3 grid + 1 spanning 2) */
.panel-multitask-workspace:not(.layout-vertical):not(.layout-horizontal) > :nth-child(7):last-child {
  grid-column: span 2;
}
.panel-multitask-workspace.layout-vertical {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: minmax(280px, auto);
}
.panel-multitask-workspace.layout-horizontal {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-auto-rows: minmax(280px, 1fr);
  grid-auto-flow: column;
}
.panel-multitask-workspace > .settings-panel:not(.hidden) {
  position: relative;
  inset: auto;
  transform: none;
  width: auto;
  height: auto;
  max-height: none;
  min-width: 0;
  min-height: 280px;
  z-index: auto;
  pointer-events: auto;
}
.panel-multitask-workspace > .mw-window {
  /* A dedicated strip keeps the touch target clear of header controls. */
  padding-top: 48px;
  height: var(--mw-user-height, auto);
  min-height: var(--mw-user-height, 280px);
}
.panel-multitask-workspace.layout-horizontal > .mw-window {
  width: var(--mw-user-width, min(70vw, 720px));
  min-width: min(var(--mw-user-width, 280px), 100%);
}
.mw-drag-handle,
.mw-resize-handle {
  position: absolute;
  z-index: 24;
  display: block;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  background: color-mix(in srgb, var(--accent) 74%, var(--border));
  box-shadow: 0 2px 12px rgb(0 0 0 / 30%);
  opacity: .7;
}
.mw-drag-handle {
  top: 2px;
  left: 50%;
  width: 88px;
  height: 44px;
  transform: translateX(-50%);
  cursor: grab;
  background: transparent;
  box-shadow: none;
  opacity: .9;
}
.mw-drag-handle::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 16px;
  height: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 74%, var(--border));
  box-shadow: 0 2px 8px rgb(0 0 0 / 25%);
}
.mw-resize-handle {
  right: 5px;
  bottom: 5px;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
}
.mw-drag-handle:hover,
.mw-resize-handle:hover,
.mw-drag-handle:focus-visible,
.mw-resize-handle:focus-visible,
.mw-window.mw-dragging > .mw-drag-handle,
.mw-window.mw-resizing > .mw-resize-handle { opacity: 1; }
.mw-drag-handle:focus-visible,
.mw-resize-handle:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.mw-window.mw-dragging > .mw-drag-handle { cursor: grabbing; }
.mw-window.mw-dragging { opacity: .72; }
.panel-multitask-workspace:not(.layout-horizontal) > .mw-window.mw-drop-before { box-shadow: inset 0 4px 0 var(--accent), 0 16px 48px rgb(0 0 0 / 32%); }
.panel-multitask-workspace:not(.layout-horizontal) > .mw-window.mw-drop-after { box-shadow: inset 0 -4px 0 var(--accent), 0 16px 48px rgb(0 0 0 / 32%); }
.panel-multitask-workspace.layout-horizontal > .mw-window.mw-drop-before { box-shadow: inset 4px 0 0 var(--accent), 0 16px 48px rgb(0 0 0 / 32%); }
.panel-multitask-workspace.layout-horizontal > .mw-window.mw-drop-after { box-shadow: inset -4px 0 0 var(--accent), 0 16px 48px rgb(0 0 0 / 32%); }
body.mw-pointer-active,
body.mw-pointer-active * { -webkit-user-select: none !important; user-select: none !important; }
.panel-multitask-workspace > .lime-multitask-card {
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 280px;
  pointer-events: auto;
}
.layout.sidebar-collapsed .panel-multitask-workspace {
  inset-inline-start: 16px;
}
/* Multi-window extras: fullscreen, focused, composer visibility, close-all, profile avatar top */
.mw-fullscreen { min-width: 0; padding: 4px 8px; font-size: 0.82rem; }
.mw-fullscreen-active {
  position: fixed !important;
  transform: none !important;
  inset: 0 !important;
  z-index: 9999 !important;
  width: auto !important;
  height: auto !important;
  max-height: 100dvh !important;
  max-width: 100vw !important;
  overflow: auto !important;
  border-radius: 0 !important;
  background: var(--bg-raised);
}
/* Fullscreen keeps the existing tab node and scene. Hidden chrome retains its
   layout state, so exiting restores the same panes, composer and playback. */
body:has(.mw-fullscreen-active:not(.hidden)) * {
  visibility: hidden !important;
}
body:has(.mw-fullscreen-active:not(.hidden)) :is(.mw-fullscreen-active:not(.hidden), .mw-fullscreen-active:not(.hidden) *, .trinbago-scene, .trinbago-scene *) {
  visibility: visible !important;
}
body:has(.mw-fullscreen-active:not(.hidden)) .mw-fullscreen-active {
  margin: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  pointer-events: auto !important;
}
.mw-focused {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}
body.panel-multitasking #composer { z-index: 24; }
#profile-avatar-top { display: none; }
.layout.sidebar-collapsed #profile-avatar-top { display: inline-flex !important; }
.layout.sidebar-collapsed #settings-btn { display: none !important; }
.lime-top-nav-chips #profile-avatar-top .profile-avatar { width: 100%; height: 100%; font-size: 0.72rem; }
#multi-close-all-top { white-space: nowrap; }
.lime-top-nav-chips {
  align-items: center;
  flex: 0 1 auto;
  gap: 6px;
  max-width: min(72vw, 720px);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}
.lime-top-nav-chips::-webkit-scrollbar { display: none; }
@media (max-width: 760px) {
  .panel-multitask-workspace {
    inset: 8px;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: minmax(70dvh, 1fr);
  }
  .panel-multitask-workspace.layout-horizontal {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
  }
}

/* Shared refresh stability contract. Dynamic panel regions keep their last
   measured footprint while a cache-while-revalidate request is in flight.
   Layout containment prevents a late chip/detail update from reflowing the
   surrounding panel or anchoring the page's scroll position to a new child. */
[data-stable-region] {
  contain: layout;
  overflow-anchor: none;
  min-height: 2.25rem;
}
[data-stable-region].panel-refreshing {
  opacity: 0.82;
  transition: opacity 140ms ease;
}
@media (prefers-reduced-motion: reduce) {
  [data-stable-region].panel-refreshing { transition: none; }
}
#projects-list { min-height: 3rem; }
#project-detail { min-height: 10rem; }
#files-location { min-height: 2.75rem; }
#files-body { min-height: 9rem; }

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.settings-header h2 { margin: 0; font-size: 1.05rem; }

.action-toast {
  width: max-content;
  position: fixed;
  z-index: 12050;
  left: 50%;
  bottom: max(76px, calc(env(safe-area-inset-bottom) + 58px));
  transform: translateX(-50%);
  max-width: min(560px, calc(100vw - 28px));
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 62%, var(--border));
  border-radius: 999px;
  color: var(--text);
  background: color-mix(in srgb, var(--bg-raised) 92%, transparent);
  box-shadow: 0 10px 38px rgb(0 0 0 / 34%);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  text-align: center;
  font-size: .82rem;
}

.voice-contact-card {
  position: fixed;
  z-index: 12060;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(76px, calc(env(safe-area-inset-bottom) + 58px));
  display: grid;
  gap: 9px;
  width: min(360px, calc(100vw - 28px));
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 66%, var(--border));
  border-radius: 18px;
  color: var(--text);
  background: color-mix(in srgb, var(--bg-raised) 94%, transparent);
  box-shadow: 0 18px 54px rgb(0 0 0 / 38%);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}
.voice-contact-card.hidden { display: none; }
.voice-contact-card > span { color: var(--muted); overflow-wrap: anywhere; }
.voice-contact-actions { display: flex; justify-content: flex-end; gap: 8px; }
.voice-contact-actions button { min-height: 42px; }

/* ------------------------------------------------------- ETTI AR --- */
.ar-camera-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #05070b;
  pointer-events: none;
}
.ar-camera {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.012);
}
.ar-camera-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 46%, transparent 28%, rgb(2 5 12 / 36%) 100%),
    linear-gradient(180deg, rgb(5 10 20 / 24%), transparent 28%, rgb(5 10 20 / 25%));
}
.ar-reticle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 76px;
  height: 76px;
  transform: translate(-50%, -50%);
  border: 1px solid rgb(142 212 255 / 46%);
  border-radius: 50%;
  box-shadow: 0 0 32px rgb(79 140 255 / 22%);
}
.ar-reticle::before,
.ar-reticle::after,
.ar-reticle span::before,
.ar-reticle span::after {
  content: "";
  position: absolute;
  background: rgb(190 232 255 / 70%);
}
.ar-reticle::before { width: 16px; height: 1px; left: -8px; top: 50%; }
.ar-reticle::after { width: 16px; height: 1px; right: -8px; top: 50%; }
.ar-reticle span::before { width: 1px; height: 16px; top: -8px; left: 50%; }
.ar-reticle span::after { width: 1px; height: 16px; bottom: -8px; left: 50%; }
/* AR spatial — hide normal PWA, show all tabs floating around camera in Jesus' name */
body.ar-session-active #app-layout > .layout,
body.vr-session-active #app-layout > .layout { visibility: hidden; pointer-events: none; }
body.ar-session-active #ar-camera-layer,
body.vr-session-active #vr-stage { visibility: visible; pointer-events: auto; }
.ar-spatial-tabs {
  position: absolute;
  inset: max(68px, calc(env(safe-area-inset-top) + 50px)) max(14px, env(safe-area-inset-right)) auto auto;
  width: min(288px, calc(100vw - 28px));
  max-height: min(64dvh, 620px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  align-content: start;
  overflow: auto;
  padding: 9px;
  border: 1px solid rgb(112 178 255 / 28%);
  border-radius: 22px;
  background: rgb(5 13 27 / 28%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);
  pointer-events: auto;
  transform: translate3d(var(--ar-tilt-x, 0px), var(--ar-tilt-y, 0px), 0);
  transition: transform 0.12s ease-out;
  perspective: 1000px;
}
.ar-spatial-tabs.hidden { display: none; }
.ar-spatial-tab {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 8px 7px;
  border-radius: 14px;
  border: 1px solid rgb(112 178 255 / 38%);
  background: linear-gradient(145deg, rgb(18 32 55 / 88%), rgb(7 12 23 / 82%));
  color: #e6f0ff;
  font: 700 0.78rem/1.2 system-ui, sans-serif;
  text-align: center;
  backdrop-filter: blur(18px) saturate(130%);
  box-shadow:
    0 10px 30px rgb(0 0 0 / 32%),
    0 4px 12px rgb(79 140 255 / 12%),
    inset 0 1px 0 rgb(255 255 255 / 12%);
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, border-color 0.15s ease-out;
}
body.ar-session-active .settings-panel.ar-spatial-open {
  visibility: visible;
  pointer-events: auto;
  position: fixed;
  z-index: 4;
  inset: max(72px, calc(env(safe-area-inset-top) + 54px)) max(320px, calc(env(safe-area-inset-right) + 306px)) max(28px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  width: auto;
  max-height: none;
  transform: translate3d(var(--ar-tilt-x, 0px), var(--ar-tilt-y, 0px), 0);
  background: color-mix(in srgb, var(--bg-inset) 76%, transparent);
  border-color: rgb(112 178 255 / 46%);
  box-shadow: 0 24px 80px rgb(0 0 0 / 46%), inset 0 1px 0 rgb(255 255 255 / 12%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
}
@media (max-width: 760px) {
  .ar-spatial-tabs {
    inset: max(62px, calc(env(safe-area-inset-top) + 44px)) 10px auto 10px;
    width: auto;
    max-height: 23dvh;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  body.ar-session-active .settings-panel.ar-spatial-open {
    inset: calc(max(62px, env(safe-area-inset-top)) + 24dvh) 10px max(18px, env(safe-area-inset-bottom));
  }
}
.ar-spatial-tab:hover {
  transform: translateZ(8px) scale(1.02);
  border-color: rgb(112 178 255 / 62%);
  box-shadow:
    0 16px 40px rgb(0 0 0 / 38%),
    0 8px 20px rgb(79 140 255 / 18%),
    inset 0 1px 0 rgb(255 255 255 / 18%);
}
.ar-spatial-tab:active {
  transform: translateZ(2px) scale(0.96);
}
.ar-spatial-recenter {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}
.ar-spatial-recenter.hidden { display: none; }
.ar-hud {
  position: absolute;
  inset: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) auto max(18px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: 10px;
  color: #dcefff;
  font: 700 12px/1.2 system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px #000;
}
.ar-hud-mark { padding: 6px 9px; border: 1px solid #8bd4ff80; border-radius: 999px; background: #07142699; }
.ar-hud-live { margin-left: auto; color: #8ff2bd; }
body.ar-session-active #app-layout > .layout { position: relative; z-index: 2; }
body.vr-session-active #app-layout > .layout { position: relative; z-index: 2; }
body.ar-session-active .main,
body.ar-session-active .job-scroll { background: transparent; }
body.vr-session-active .main,
body.vr-session-active .job-scroll { background: transparent; }
body.ar-session-active .sidebar {
  background: color-mix(in srgb, var(--bg-raised) 75%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  backdrop-filter: blur(20px) saturate(130%);
  border-right-color: rgb(112 178 255 / 42%);
}
body.vr-session-active .sidebar {
  background: color-mix(in srgb, var(--bg-raised) 75%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  backdrop-filter: blur(20px) saturate(130%);
  border-right-color: rgb(112 178 255 / 42%);
}
body.ar-session-active .settings-panel:not(.ar-panel),
body.ar-session-active .panel,
body.ar-session-active .msg,
body.ar-session-active .lime-multitask-card,
body.ar-session-active .panel-multitask-workspace > .settings-panel:not(.hidden) {
  background-color: color-mix(in srgb, var(--bg-inset) 78%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
  border-color: rgb(112 178 255 / 38%);
  box-shadow: 0 10px 30px rgb(0 0 0 / 32%), inset 0 1px 0 rgb(255 255 255 / 8%);
}
body.vr-session-active .settings-panel:not(.vr-panel),
body.vr-session-active .panel,
body.vr-session-active .msg,
body.vr-session-active .lime-multitask-card,
body.vr-session-active .panel-multitask-workspace > .settings-panel:not(.hidden) {
  background-color: color-mix(in srgb, var(--bg-inset) 78%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
  border-color: rgb(112 178 255 / 38%);
  box-shadow: 0 10px 30px rgb(0 0 0 / 32%), inset 0 1px 0 rgb(255 255 255 / 8%);
}
.ar-panel {
  inset: 50% auto auto 50%;
  transform: translate3d(calc(-50% + var(--ar-tilt-x, 0px)), calc(-50% + var(--ar-tilt-y, 0px)), 0);
  width: min(720px, calc(100vw - 24px));
  max-height: min(82dvh, 760px);
  padding: clamp(14px, 2.5vw, 24px);
  background:
    linear-gradient(145deg, rgb(18 32 55 / 88%), rgb(7 12 23 / 82%)),
    color-mix(in srgb, var(--bg-inset) 82%, transparent);
  border-color: rgb(112 178 255 / 42%);
  box-shadow: 0 22px 80px rgb(0 0 0 / 52%), inset 0 1px 0 rgb(255 255 255 / 10%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
}
body.panel-multitasking .panel-multitask-workspace > .ar-panel:not(.hidden),
body.panel-multitasking .panel-multitask-workspace > .vr-panel:not(.hidden) {
  position: relative;
  inset: auto;
  transform: none;
  width: auto;
  max-height: none;
  min-width: 0;
  min-height: var(--mw-user-height, 280px);
  z-index: auto;
}
.ar-kicker { margin: 2px 0 0; color: #9dc9ff; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.ar-orbit {
  position: relative;
  width: 118px;
  height: 118px;
  margin: 16px auto 12px;
  display: grid;
  place-items: center;
  perspective: 500px;
}
.ar-orbit-core {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 22px;
  color: #eef8ff;
  font-weight: 800;
  letter-spacing: .1em;
  background: linear-gradient(145deg, #2c8fff, #735cff);
  box-shadow: 0 0 44px rgb(70 151 255 / 46%), inset 0 1px 0 rgb(255 255 255 / 35%);
  animation: ar-core-pulse 2.2s ease-in-out infinite;
}
@keyframes ar-core-pulse { 0%,100% { transform: scale(1); box-shadow: 0 0 44px rgb(70 151 255 / 46%), inset 0 1px 0 rgb(255 255 255 / 35%); } 50% { transform: scale(1.06); box-shadow: 0 0 64px rgb(70 151 255 / 68%), inset 0 1px 0 rgb(255 255 255 / 45%); } }
.ar-orbit { animation: ar-orbit-drift 6s ease-in-out infinite; }
@keyframes ar-orbit-drift { 0%,100% { transform: rotateZ(0deg) } 50% { transform: rotateZ(1.2deg) } }
.ar-orbit i { position: absolute; inset: 5px; border: 1px solid rgb(154 210 255 / 34%); border-radius: 50%; }
.ar-orbit i:nth-child(2) { transform: rotateX(66deg); }
.ar-orbit i:nth-child(3) { transform: rotateY(66deg); }
.ar-orbit i:nth-child(4) { transform: rotate(52deg) rotateX(68deg); }
.ar-capabilities,
.ar-status { text-align: center; margin: 8px auto; }
.ar-status[data-kind="error"] { color: var(--danger-text); }
.ar-status[data-kind="success"] { color: #93efc0; }
.ar-status[data-kind="listening"] { color: #a8ffd0; font-weight: 700; }
.spatial-voice-listening #ar-speak-btn,
.spatial-voice-listening #voice-speak-btn,
#vr-speak-btn[aria-pressed="true"] { box-shadow: 0 0 0 3px rgb(75 232 157 / 16%), 0 0 24px rgb(75 232 157 / 28%); }
.voice-live-dot { color: #ff3b30; font-size: 0.62rem; letter-spacing: 0.04em; animation: voice-live-pulse 1.1s ease-in-out infinite; margin-left: 6px; vertical-align: middle; }
.voice-live-dot.hidden { display: none; }
#voice-btn.voice-live { border-color: color-mix(in srgb, #ff3b30 55%, var(--border)); background: color-mix(in srgb, #ff3b30 14%, var(--bg-raised)); box-shadow: 0 0 0 2px rgb(255 59 48 / 16%); }
@keyframes voice-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.voice-memory-section { background: color-mix(in srgb, var(--bg-raised) 62%, transparent); border-radius: 12px; padding: 10px; }
.voice-top-stop {
  border-color: color-mix(in srgb, #ff3b30 74%, var(--border));
  background: color-mix(in srgb, #ff3b30 86%, var(--bg-raised));
  color: white;
  box-shadow: 0 0 0 2px rgb(255 59 48 / 14%);
}
.voice-top-stop.hidden { display: none; }
.ar-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0; }
.ar-actions > button { min-height: 42px; }
.ar-command-help {
  display: grid;
  gap: 3px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid rgb(127 187 255 / 24%);
  border-radius: 12px;
  background: rgb(4 12 27 / 34%);
}
.ar-command-help span { color: #b8c8dd; font-size: .78rem; }
.ar-launcher {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 7px;
}
.ar-launcher-chip {
  min-width: 0;
  min-height: 42px;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgb(16 33 58 / 62%);
  border-color: rgb(123 186 255 / 24%);
}
.ar-session-chip {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 10980;
  min-width: 74px;
  min-height: 44px;
  border: 1px solid rgb(127 190 255 / 52%);
  border-radius: 999px;
  color: #eef8ff;
  background: linear-gradient(145deg, rgb(34 112 205 / 92%), rgb(79 67 190 / 92%));
  box-shadow: 0 8px 30px rgb(0 0 0 / 38%), 0 0 24px rgb(78 151 255 / 24%);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
body:has(.mini-player:not(.hidden)) .ar-session-chip { right: auto; left: max(14px, env(safe-area-inset-left)); }
.vr-session-chip { right: max(98px, calc(env(safe-area-inset-right) + 98px)); background: linear-gradient(145deg, rgb(122 66 210 / 94%), rgb(25 115 174 / 94%)); }
.vr-panel { width: min(780px, calc(100vw - 24px)); max-height: min(88dvh, 820px); }
.vr-stage {
  position: relative;
  min-height: clamp(230px, 42vh, 430px);
  margin: 14px 0;
  overflow: hidden;
  border: 1px solid rgb(139 201 255 / 30%);
  border-radius: 20px;
  background: linear-gradient(#63b8f0 0 56%, #4b9c51 56% 100%);
  perspective: 700px;
}
.vr-stage[data-vr-set="coast"] { background: linear-gradient(#65b8f0 0 55%, #1e7599 55% 72%, #e5c47d 72%); }
.vr-stage[data-vr-set="space"] { background: radial-gradient(circle at 65% 25%, #805cc2, transparent 8%), radial-gradient(circle at 32% 35%, #fff 0 1px, transparent 2px), linear-gradient(#050818, #101b3b); }
.vr-stage[data-vr-set="custom"] { background: linear-gradient(145deg, #263b69, #592b66 52%, #1c6261); }
.vr-sky { position:absolute; inset:0 0 44%; background:radial-gradient(circle at 72% 24%,#fff6b5 0 5%,transparent 6%); }
.vr-ground { position:absolute; inset:56% -12% -35%; transform:rotateX(62deg); transform-origin:top; background:repeating-linear-gradient(90deg,transparent 0 9.8%,#ffffff18 10%),repeating-linear-gradient(0deg,transparent 0 18%,#ffffff18 19%); }
.vr-landmark { position:absolute; inset:30% auto auto 50%; transform:translateX(-50%); width:112px; height:112px; display:grid; place-items:center; border:1px solid #d8f1ff80; border-radius:36px; background:#07162ca8; box-shadow:0 0 60px #75bdff72; color:white; font-weight:900; letter-spacing:.12em; }
.vr-stage-copy { position:absolute; inset:auto 16px 14px; display:flex; justify-content:space-between; gap:12px; color:white; text-shadow:0 2px 8px #000; }
.vr-set-control { display:grid; gap:5px; margin-top:8px; font-size:.8rem; }
body.vr-session-active #job-scroll,
body.vr-session-active #composer,
body.vr-session-active #composer-collapse-btn,
body.vr-session-active #latest-btn { visibility:hidden; pointer-events:none; }
body.vr-session-active .vr-panel { inset: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); width:auto; max-height:none; }
body.vr-session-active .vr-stage { min-height:calc(100dvh - 270px); }
@media (max-width: 560px) {
  .ar-panel { inset: auto 8px 8px; width: calc(100vw - 16px); max-height: calc(100dvh - 16px); transform: none; }
  .ar-orbit { width: 94px; height: 94px; margin-block: 8px; }
  .ar-orbit-core { width: 58px; height: 58px; border-radius: 18px; }
  .ar-launcher { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ar-launcher-chip { min-height: 38px; padding-inline: 5px; font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ar-panel { transform: translate(-50%, -50%); }
}
@media (max-width: 560px) and (prefers-reduced-motion: reduce) {
  .ar-panel { transform: none; }
}
[data-theme="light"] .ar-panel { color: #f4f8ff; }

.device-card,
.device-row {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}
.device-card .actions { width: 100%; }
.device-name { font-weight: 600; }
.device-meta { font-size: 0.8rem; word-break: break-all; }
.device-row button { margin-left: auto; }

.profile-photo-settings {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-raised) 72%, var(--bg-inset));
}
.profile-photo-settings label {
  font-size: 0.82rem;
  color: var(--muted);
}
.profile-photo-settings input[type="file"] {
  width: 100%;
  min-width: 0;
  font: inherit;
  color: var(--text);
}
.profile-avatar-preview {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 62%, var(--border));
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-inset));
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.profile-avatar-preview img {
  object-fit: cover;
}
.profile-photo-settings .settings-subheader {
  align-items: baseline;
}
.profile-photo-settings .settings-subheader .muted {
  font-size: 0.72rem;
}
.profile-switch-settings { display:grid; gap:8px; margin:10px 0; padding:12px; border:1px solid var(--border); border-radius:var(--radius); background:color-mix(in srgb, var(--bg-raised) var(--tab-section-opacity, 62%), transparent); }
/* Profile/settings subsections share the Switch account surface so tabs do not
   flicker between unrelated fills. The opacity is account-scoped in display preferences. */
.settings-tab-page > :is(section, details, #profile-identity) {
  background: color-mix(in srgb, var(--bg-raised) var(--tab-section-opacity, 62%), transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}
.settings-tab-page > #profile-identity:empty { display: none; }
.profile-switch-list { display:grid; gap:8px; }
.profile-switch-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--bg-inset); }
.profile-switch-info { display:grid; gap:2px; min-width:0; }
.profile-switch-actions { display:flex; gap:6px; align-items:center; flex-shrink:0; }

/* ── Media Studio Phase 5.30: read-only super marker (Devices panel) ── */
.super-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2, rgba(127, 127, 127, 0.15));
  vertical-align: middle;
}

/* ------------------------------------------------ documentation (5.13) --- */

.doc-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.doc-content {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Docs panel must be a flex column so doc-content is the sole scroller */
.doc-viewer {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.doc-viewer .doc-list {
  flex: 0 0 auto;
  max-height: 3.2rem;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  white-space: nowrap;
  padding: 2px;
  margin-bottom: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, var(--accent));
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg-inset) 88%, transparent);
  box-shadow: inset -28px 0 18px -18px color-mix(in srgb, var(--accent) 55%, transparent);
  scrollbar-color: var(--accent) transparent;
}
.doc-scroll-hint {
  display: block;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 400;
}
.doc-viewer #docs-msg { flex-shrink: 0; }

/* Long API paths and table cells must not widen the article. Fenced code keeps
   its own horizontal scroller and literal whitespace. */
.doc-content { overflow-wrap: anywhere; }
.doc-content h1 { font-size: 1.35rem; margin: 0.6em 0 0.4em; }
.doc-content h2 { font-size: 1.15rem; margin: 1em 0 0.35em; border-bottom: 1px solid var(--border); padding-bottom: 0.2em; }
.doc-content h3 { font-size: 1rem; margin: 0.8em 0 0.3em; }
.doc-content p, .doc-content li { color: var(--text); }
.doc-content a { color: #7fb3ff; }
.doc-content code {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  padding: 0.08em 0.35em;
  font-size: 0.88em;
}
.doc-code {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  overflow-x: auto;
}
.doc-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.6em 0;
  font-size: 0.86rem;
}
.doc-content th, .doc-content td {
  border: 1px solid var(--border);
  padding: 5px 8px;
  text-align: left;
  vertical-align: top;
}
.doc-content th { background: rgba(255, 255, 255, 0.05); }
.doc-content blockquote {
  border-left: 3px solid var(--border);
  margin: 0.6em 0;
  padding: 0.15em 0 0.15em 10px;
  color: #b9c0cc;
}
.doc-content details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 0.45em 0;
  padding: 6px 10px;
}
.doc-content summary {
  cursor: pointer;
  font-weight: 600;
}
.doc-content hr { border: 0; border-top: 1px solid var(--border); margin: 1em 0; }

.regression-toolbar, .regression-pager, .regression-occurrence-nav {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
}
.regression-toolbar label { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 9rem; min-width: 0; }
.regression-toolbar input, .regression-toolbar select {
  width: 100%; min-width: 0; min-height: 2.75rem; font: inherit;
  background: var(--bg-inset); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0.4rem 0.6rem;
}
.regression-toolbar input::placeholder { color: var(--text-muted); }
.regression-pager button { flex: 1; min-height: 2.75rem; }
.regression-group summary, .regression-guidance summary { min-height: 2.75rem; padding: 0.5rem 0; }
.regression-entry-date { font-size: 0.8rem; }
.regression-entry-body { margin-bottom: 0.5rem; }
.regression-page-status { font-size: 0.8rem; }
.regression-occurrence-nav button { min-height: 2.75rem; }

/* ------------------------------------------- development health (5.13) --- */

.health-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.health-table th, .health-table td {
  text-align: left;
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
}
.health-table th { width: 40%; color: #b9c0cc; font-weight: 500; }
.health-fail { color: #ff8484; }

/* ------------------------------------- conversation (Phase 5.14) -------- */

.conversation {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 12px;
}

/* Conversation is the primary Lime surface.  Progress, steering and
   diagnostics remain one tap away in a compact disclosure instead of
   competing with the message bubbles for the initial viewport. */
.conversation-primary {
  flex: 1 1 auto;
  min-height: 180px;
  padding: 4px 2px 10px;
}

.conversation-thread-host {
  display: block;
  min-height: 0;
}
.conversation-thread-host.hidden {
  display: none;
}

/* One deliberate disclosure owns every secondary Lime control.  The
   conversation bubbles and compact composer remain the calm default view. */
.lime-controls-details {
  margin: 0 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-inset);
}
.lime-controls-details > summary {
  cursor: pointer;
  min-height: 2.15rem;
  display: flex;
  align-items: center;
  padding: 7px 10px;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 650;
  list-style-position: inside;
}
.lime-controls-details[open] > summary {
  border-bottom: 1px solid var(--border);
}
.lime-controls-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  padding: 8px 10px 10px;
}
.lime-controls-body .detail-header {
  margin: 0;
}

/* Lime management belongs beside the conversation, never inside its bubble
   stack. This keeps the messages visually primary while leaving tools one
   compact tap away on desktop and iPad. */
.lime-tools {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  margin: 0 0 4px;
}
.lime-controls-body > *,
.lime-tools > *,
.lime-ai-team > div {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.lime-tools:empty,
.lime-tools.hidden {
  display: none;
}
.lime-tools > .thread-controls {
  order: 2;
  margin: 0 !important;
  padding: 4px 0;
  border-top: 1px solid var(--border);
}
.lime-tools > .lime-ai-team {
  order: 1;
}
.empty-lime-ai-team {
  margin-top: 0;
  display: grid;
  gap: 0.45rem;
  text-align: left;
}
.empty-lime-ai-team h3,
.empty-lime-ai-team p {
  margin: 0;
}
.empty-lime-tools {
  display: grid;
  gap: 6px;
  margin-top: 0.75rem;
}
.empty-lime-tools:empty {
  display: none;
}
.empty-lime-ai-team {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.55rem 0.7rem;
  background: var(--bg-inset);
}
.empty-lime-ai-team > summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 650;
  list-style-position: inside;
}
.empty-lime-ai-team[open] > summary {
  margin-bottom: 0.45rem;
}

.activity-details {
  flex: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 10px;
  background: var(--bg-inset);
}
.activity-details summary {
  cursor: pointer;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  list-style-position: inside;
}
.activity-details[open] summary { margin-bottom: 6px; }

.msg {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  max-width: 100%;
}

.msg-user {
  background: var(--bg-inset);
  align-self: flex-end;
  max-width: 85%;
}

.msg-ai { background: var(--bg-raised); }

.msg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

/* Per-Lime actions stay visible; only lifecycle details are a disclosure. */
.thread-bubble-actions {
  margin-top: 7px;
}

/* The active Seed's only always-visible secondary action.  Stop stays beside
   the compact Lime composer so collapsing Lime options never hides a safe,
   explicit way to interrupt the selected run. */
#thread-continue-form {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-top: 8px;
}
#thread-continue-form > input {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--bg-inset);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  font: inherit;
}
#thread-continue-form > input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.thread-composer-actions {
  display: flex;
  align-items: stretch;
  gap: 6px;
  flex: none;
}
.thread-stop-btn {
  min-width: 4.4rem;
}
@media (max-width: 520px) {
  #thread-continue-form {
    flex-wrap: wrap;
  }
  #thread-continue-form > input {
    flex-basis: 100%;
  }
  .thread-composer-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

.feedback-btn[aria-pressed="true"] {
  border-color: var(--proc-done);
  color: var(--feedback-active-text);
  background: var(--feedback-active-surface);
}

#conversation-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Lime Tree AI roster: visible, compact, and usable before the first Seed. */
.lime-ai-team {
  color: var(--text);
}
.lime-ai-team > summary {
  color: var(--text);
  font-weight: 700;
  min-height: 1.8rem;
  display: flex;
  align-items: center;
}
.lime-ai-invite-form {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) minmax(0, 1.35fr) auto;
  gap: 0.45rem;
  align-items: center;
  margin-top: 0.35rem;
}
.lime-ai-invite-form select,
.lime-ai-invite-form input {
  min-width: 0;
  width: 100%;
}
.lime-ai-invite-button {
  white-space: nowrap;
}
.lime-ai-team-run-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.45rem;
  align-items: center;
  padding: 0.45rem 0;
  border-block: 1px solid var(--border);
}
.lime-ai-team-run-form input,
.lime-ai-team-run-form select {
  min-width: 0;
  width: 100%;
}
.lime-ai-team-run-form button {
  white-space: nowrap;
}
.lime-ai-role-help {
  grid-column: 1 / -1;
  font-size: 0.82rem;
  line-height: 1.35;
}
@media (max-width: 620px) {
  .lime-ai-invite-form {
    grid-template-columns: 1fr;
  }
  .lime-ai-invite-button {
    width: 100%;
  }
  .lime-ai-team-run-form {
    grid-template-columns: 1fr auto;
  }
  .lime-ai-team-run-form button {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

.thread-history-more {
  align-self: center;
  max-width: 100%;
  white-space: normal;
  margin-block: 0.4rem;
}
.thread-history-more[hidden] { display: none; }

.thread-turn {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-left: 2px solid var(--border);
  padding-left: 10px;
}

/* Keep history DOM/focus/find-in-page intact while supported browsers skip
   offscreen text layout. Remember measured heights; 400px is only a first-use
   estimate. Unsupported browsers retain ordinary layout, never hidden data. */
@supports (content-visibility: auto) and (contain-intrinsic-block-size: auto 400px) {
  .thread-turn {
    content-visibility: auto;
    contain-intrinsic-block-size: auto 400px;
  }
}
@media print {
  .thread-turn { content-visibility: visible; contain-intrinsic-block-size: none; }
}

.thread-bubble {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 11px;
  overflow-wrap: anywhere;
}

.thread-bubble-user {
  align-self: flex-end;
  width: min(85%, 62rem);
  background: var(--bg-inset);
}

.thread-bubble-ai {
  align-self: flex-start;
  width: min(92%, 68rem);
  background: var(--bg-raised);
}

.thread-ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.thread-handoff-meta {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
  margin: 1px 0 6px;
  padding-left: 1px;
}

.thread-result {
  white-space: pre-wrap;
}

.thread-team-run-notice {
  margin-top: 8px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-inset);
  font-size: 0.76rem;
  line-height: 1.4;
}
.thread-team-run-notice.warn {
  border-color: var(--warn);
  background: var(--warn-surface);
  color: var(--warn-text);
}

.thread-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}
.thread-attachment-chip {
  display: inline-flex;
  align-items: center;
  max-width: min(100%, 34rem);
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent));
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-inset) 92%, var(--accent));
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Each Seed/Lime pair owns its own lazily loaded activity disclosure.  This
   keeps lifecycle/timing evidence beside the response it describes instead of
   repeating the last Lime in the global options panel. */
.thread-turn-details {
  margin-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  padding-top: 5px;
}
.thread-turn-details > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  list-style-position: inside;
}
.thread-turn-details[open] > summary {
  color: var(--text);
  margin-bottom: 6px;
}
.thread-turn-details-body {
  display: grid;
  gap: 6px;
  font-size: 0.76rem;
}
.thread-turn-detail-heading {
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.thread-turn-progress-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}
.thread-turn-progress-step {
  min-width: 0;
  padding: 4px 5px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-inset);
  overflow-wrap: anywhere;
}
.thread-turn-progress-step.done { color: var(--state-success-text); }
.thread-turn-progress-step.current { color: var(--state-info-text); }
.thread-turn-progress-step.blocked { color: var(--state-warn-text); }
.thread-turn-progress-step.error { color: var(--state-danger-text); }
.thread-turn-progress-step small {
  display: block;
  margin-top: 2px;
  font-size: 0.66rem;
}
.thread-turn-lifecycle {
  display: grid;
  gap: 2px;
}
.thread-turn-detail-line {
  display: grid;
  grid-template-columns: minmax(7rem, auto) minmax(0, 1fr);
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.thread-turn-detail-label { color: var(--muted); }
.thread-turn-detail-timing {
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.thread-turn-detail-note {
  margin: 0;
  font-size: 0.7rem;
}
@media (max-width: 620px) {
  .thread-turn-progress-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .thread-turn-detail-line { grid-template-columns: 1fr; gap: 1px; }
}

.msg-who {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 4px;
}

.msg-text {
  font-size: 0.95rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;   /* long URLs/tokens wrap, never blow out layout */
  word-break: break-word;
  min-width: 0;
}

/* Composer growth is deliberate and capped — a giant prompt scrolls inside
   the textarea instead of pushing the conversation off-screen. */
.composer textarea {
  max-height: 38vh;
  overflow-y: auto;
}

.ai-text.hidden { display: none; }

/* Google media results: bounded, untrusted visual references rendered inside
   the one assistant response that requested them. */
.google-media-results {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 9px;
}
.google-media-results-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
}
.google-media-results-note {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 400;
}
.google-media-results-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 7px;
}
.google-media-results-controls label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 0.74rem;
}
.google-media-results-controls select {
  min-height: 28px;
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-inset);
  color: var(--text);
}
.google-media-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.google-media-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-inset);
}
.google-media-card img,
.google-media-card iframe {
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 90px;
  border: 0;
  object-fit: cover;
  background: var(--viewer-stage-bg);
}
.google-media-card iframe { aspect-ratio: 16 / 9; }
.google-media-card > a:not(.google-media-card-caption) {
  display: grid;
  place-items: center;
  min-height: 90px;
  color: var(--accent);
  text-decoration: none;
  background: var(--viewer-stage-bg);
}
.google-media-card-caption {
  min-width: 0;
  padding: 0 7px 7px;
  color: var(--text);
  font-size: 0.76rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.google-media-load-more {
  margin-top: 9px;
}
.google-media-loading,
.google-media-empty {
  display: block;
  margin: 9px 0 0;
}
.google-media-scroll-sentinel {
  display: block;
  width: 1px;
  height: 1px;
}

.proc-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--proc-text);
  min-height: 1.2em;
}

.proc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--proc-text);
  animation: proc-pulse 1.2s ease-in-out infinite;
  flex: none;
}

.proc-dot.done { background: var(--proc-done); animation: none; }
.proc-dot.failed, .proc-dot.cancelled { background: var(--proc-failed); animation: none; }
.msg-failed .msg-text { color: var(--state-danger-text); }

.proc-elapsed { color: var(--muted); font-variant-numeric: tabular-nums; }

@keyframes proc-pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .proc-dot { animation: none; }
}

.tech-details { margin-top: 8px; }
.tech-details summary {
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--muted);
}
.tech-details[open] summary { margin-bottom: 6px; }
.tech-details .route-line,
.tech-details .stats-line { font-size: 0.78rem; color: var(--muted); }

.health-ok { color: var(--health-ok); font-weight: 600; }

.blocker-item { border-bottom: 1px solid var(--border); padding: 6px 0; }
.blocker-item:last-child { border-bottom: none; }
.batch-card { min-width: 0; overflow-wrap: anywhere; }
.batch-card .actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.batch-help { font-size: .78rem; color: var(--muted); margin-block: 8px; }
.batch-help summary { cursor: pointer; }
.blocker-item strong { display: block; font-size: 0.82rem; margin-bottom: 2px; }

.provider-catalog-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.provider-catalog-actions .muted { flex: 1 1 100%; }
.provider-catalog-output {
  margin: 6px 0 0;
  max-height: 240px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.72rem;
}

.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  font-size: 0.78rem;
}
.bulk-bar .muted { margin-right: auto; }
.bulk-purge-confirm {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: auto minmax(7rem, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--state-danger-text);
  border-radius: 10px;
  background: var(--state-danger-surface);
  color: var(--state-danger-text);
}
.bulk-purge-confirm input {
  min-width: 0;
  color: var(--text);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 9px;
}
.bulk-purge-confirm .muted { grid-column: 1 / -1; margin: 0; color: inherit; }
@media (max-width: 560px) {
  .bulk-purge-confirm { grid-template-columns: 1fr 1fr; }
  .bulk-purge-confirm label,
  .bulk-purge-confirm input { grid-column: 1 / -1; }
}
.job-list li.bulk-selected { background: rgba(100,149,237,0.15); border-left: 3px solid cornflowerblue; }
.job-list li input[type="checkbox"] { margin-right: 6px; accent-color: cornflowerblue; }
.job-meta {
  display: block;
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scope-select {
  background: var(--bg-inset);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px 8px;
  font-size: 0.82rem;
  max-width: 200px;
}
/* Light-theme readability: viewer surfaces and status chips previously used
   dark-only paint values, leaving labels unreadable against a light page. */
[data-theme="light"] .file-poster-icon,
[data-theme="light"] .file-size-badge,
[data-theme="light"] .media-duration-badge,
[data-theme="light"] .media-kind-badge {
  color: var(--viewer-badge-text);
  background: var(--viewer-badge-bg);
  border-color: var(--border);
}
[data-theme="light"] .media-viewer-dialog,
[data-theme="light"] .media-viewer-header,
[data-theme="light"] .media-viewer-footer {
  color: var(--text);
  background: var(--bg-raised);
  border-color: var(--border);
}
[data-theme="light"] .media-viewer-stage,
[data-theme="light"] .viewer-center-viewport,
[data-theme="light"] .media-slide-pane {
  color: var(--text);
  background: var(--viewer-stage-bg);
}
[data-theme="light"] .viewer-rail-item {
  color: var(--text);
  background: var(--viewer-rail-bg);
  border-color: var(--border);
}
[data-theme="light"] .social-viewer-rail-item {
  color: var(--text);
  background: var(--viewer-rail-bg);
  border-color: var(--border);
}
[data-theme="light"] .social-viewer-center-viewport,
[data-theme="light"] .social-media-viewer-stage,
[data-theme="light"] .mini-player {
  color: var(--text);
}
[data-theme="light"] .viewer-rail-label {
  color: var(--text);
  background: var(--viewer-rail-label-bg);
}
[data-theme="light"] .viewer-fullscreen-btn {
  color: var(--viewer-control-text);
  background: var(--viewer-control-bg);
  border-color: var(--border);
}
[data-theme="light"] .file-viewer-text,
[data-theme="light"] .file-viewer-frame {
  color: var(--text);
  background: var(--bg-raised);
  border-color: var(--border);
}
[data-theme="light"] .file-viewer-status,
[data-theme="light"] .media-viewer-unavailable {
  color: var(--text-muted, var(--muted));
}

/* Shared light-theme semantic surfaces.  Error cards, progress/status
   indicators, feedback controls, and health text used to retain dark-only
   colors, making ordinary failures and running state unreadably dark on a
   light page.  These selectors intentionally cover every shared surface so a
   new panel inherits the same readable contract automatically. */
[data-theme="light"] .error-card {
  background: var(--danger-surface);
  color: var(--danger-text);
  border-color: var(--danger);
}
[data-theme="light"] .state-queued,
[data-theme="light"] .state-cancelled {
  background: var(--state-neutral-surface);
  color: var(--state-neutral-text);
}
[data-theme="light"] .state-running {
  background: var(--state-info-surface);
  color: var(--state-info-text);
}
[data-theme="light"] .state-waiting_for_permission {
  background: var(--state-warn-surface);
  color: var(--state-warn-text);
}
[data-theme="light"] .state-completed {
  background: var(--state-success-surface);
  color: var(--state-success-text);
}
[data-theme="light"] .state-failed {
  background: var(--state-danger-surface);
  color: var(--state-danger-text);
}
[data-theme="light"] .msg-failed .msg-text { color: #991b1b; }
[data-theme="light"] .proc-line { color: var(--proc-text); }
[data-theme="light"] .proc-dot { background: var(--proc-text); }
[data-theme="light"] .proc-dot.done { background: var(--proc-done); }
[data-theme="light"] .proc-dot.failed,
[data-theme="light"] .proc-dot.cancelled { background: var(--proc-failed); }
[data-theme="light"] .health-ok { color: var(--health-ok); }
[data-theme="light"] .health-fail { color: #b42318; }
[data-theme="light"] .health-table th { color: #4b5563; }
[data-theme="light"] .feedback-btn[aria-pressed="true"] {
  border-color: var(--proc-done);
  color: var(--feedback-active-text);
  background: var(--feedback-active-surface);
}
[data-theme="light"] .doc-content a { color: #1d4ed8; }
[data-theme="light"] .doc-content code,
[data-theme="light"] .doc-code,
[data-theme="light"] .doc-content th { background: #f0f1f4; }
[data-theme="light"] .doc-content blockquote { color: #4b5563; }

.primary-nav {
  display: flex;
  flex-wrap: wrap; /* reliability fix 2026-08-24: 7 nowrap buttons formed a
                      rigid 342px row inside the 300px sidebar and floated
                      over the main panel; wrapping keeps navigation inside
                      the sidebar at every width */
  gap: 2px;
  align-items: stretch;
  touch-action: pan-y;
}
.nav-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 8px;
  font-size: 0.78rem;
  min-width: 0;
  flex: 1 1 72px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.15;
  cursor: grab;
  user-select: none;
  transition: flex-basis 140ms ease, font-size 140ms ease, padding 140ms ease,
    opacity 120ms ease, transform 120ms ease;
  border-radius: 9999px; /* Sow chip corner rounding */
  border: 1px solid var(--border);
  /* Sow chip colouring - subtle raised background */
  background: var(--bg-raised);
}
.gif-play-toggle {
  position: absolute;
  left: 50%;
  top: clamp(70px, 24%, 130px);
  z-index: 4;
  transform: translateX(-50%);
  border-color: color-mix(in srgb, var(--accent) 72%, var(--border));
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  color: var(--text);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.nav-tab:active { cursor: grabbing; }
.nav-tab.nav-tab-active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}
.nav-tab.nav-favourite {
  flex-grow: 1.35;
  flex-basis: 94px;
  font-size: 0.9rem;
  font-weight: 700;
  padding-inline: 10px;
  position: relative;
}
.nav-tab.nav-favourite::after {
  content: "★";
  position: absolute;
  top: -4px;
  right: -2px;
  font-size: 0.62rem;
  color: gold;
  text-shadow: 0 0 3px rgba(0,0,0,.7);
  pointer-events: none;
}
.nav-tab.nav-tab-hidden { display: none !important; }
.nav-tab.nav-tab-view-hidden { display: none !important; }
.nav-tab.nav-dragging {
  opacity: 0.55;
  transform: scale(0.97);
  outline: 2px dashed var(--accent);
  outline-offset: 1px;
}
.nav-tab.nav-drop-before,
.nav-tab.nav-drop-after {
  position: relative;
  z-index: 1;
}
.nav-tab.nav-drop-before {
  box-shadow: inset 3px 0 0 var(--accent), 0 0 0 1px color-mix(in srgb, var(--accent) 36%, transparent);
}
.nav-tab.nav-drop-after {
  box-shadow: inset -3px 0 0 var(--accent), 0 0 0 1px color-mix(in srgb, var(--accent) 36%, transparent);
}
.nav-favourite-toggle {
  min-width: 2.2rem;
  padding-inline: 7px;
  font-size: 1.05rem;
  line-height: 1;
}
.nav-context-menu {
  position: fixed;
  z-index: 1000;
  display: grid;
  gap: 2px;
  min-width: 174px;
  max-width: min(220px, calc(100vw - 16px));
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-inset);
  box-shadow: 0 10px 30px rgba(0,0,0,.32);
}
.nav-context-item {
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 8px 9px;
  cursor: pointer;
}
.nav-context-item:hover,
.nav-context-item:focus-visible { background: var(--bg-raised); }

.learning-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.55rem 0;
}
.learning-filters select { min-width: 9rem; }
.learning-record-card {
  display: grid;
  gap: 0.45rem;
  overflow-wrap: anywhere;
}
.learning-record-content {
  margin: 0;
  line-height: 1.45;
  white-space: pre-wrap;
}
.learning-record-card details {
  border-top: 1px solid var(--border);
  padding-top: 0.35rem;
}

.nav-preferences { margin-bottom: 16px; }
#settings-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; min-width: 0; }
#settings-tabs .mode-btn { min-width: 0; min-height: 44px; padding: 8px 4px; white-space: normal; overflow-wrap: anywhere; }
.nav-preferences > summary { cursor: pointer; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); font-weight: 600; }
.nav-preferences[open] > summary { margin-bottom: 10px; }
.settings-tab-page > .scope-select { width: 100%; max-width: 100%; min-width: 0; min-height: 44px; }
.settings-tab-page > .ghost-btn { min-height: 44px; max-width: 100%; }
.chime-tuning-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px 16px; margin-top: 12px; color: var(--muted); }
.chime-tuning-control { display: grid; min-width: 0; font-size: 0.82rem; }
.chime-tuning-control input { min-width: 0; width: 100%; max-width: 100%; min-height: 44px; margin: 0; }
.settings-subheader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.settings-subheader h3 { margin: 0; }
.nav-preferences-list { display: grid; gap: 5px; margin-top: 9px; }
.nav-preference-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 7px;
  padding: 6px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.nav-preference-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-preference-check { display: inline-flex; align-items: center; gap: 3px; font-size: .74rem; white-space: nowrap; }
.nav-preference-move { display: inline-flex; gap: 3px; }
.nav-move-btn { min-width: 2rem; padding: 3px 6px; }
@media (prefers-reduced-motion: reduce) {
  .nav-tab { transition: none; }
}
@media (max-width: 480px) {
  .nav-preference-row { grid-template-columns: minmax(0, 1fr) auto; }
  .nav-preference-move { grid-column: 2; grid-row: 1; }
  .nav-preference-check { font-size: .7rem; }
}

/* ── Phase 5.26: cache-while-revalidate change highlighting ─────────────── */
/* A refreshed surface flashes this marker until the user presses Clear,
   which accepts the new state as the baseline. Consistent across panels.  */
.cache-updated {
  animation: cachePulse 1.6s ease-in-out;
  outline: 1px solid color-mix(in srgb, var(--accent, #4a9eff) 55%, transparent);
  outline-offset: -1px;
  border-radius: var(--radius);
}
@keyframes cachePulse {
  0% { background-color: color-mix(in srgb, var(--accent, #4a9eff) 18%, transparent); }
  100% { background-color: transparent; }
}

.device-note {
  font-size: 0.74rem;
  margin-top: 8px;
}

.bulk-checkbox {
  accent-color: var(--accent, #4a9eff);
}

li.bulk-selected {
  background: color-mix(in srgb, var(--accent, #4a9eff) 12%, transparent);
}

/* --------------------------------------------------- media panel (photos) */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  align-items: stretch;
  gap: 14px;
}

/* Media cards use a masonry-like column flow so a tall caption or portrait
   item never stretches its shorter neighbor. Expanded viewers keep their
   three-pane grid layout separately. */
#media-panel .photo-grid {
  display: block;
  column-width: 260px;
  column-count: 2;
  column-gap: 14px;
}
#media-panel .photo-card {
  display: inline-block;
  width: 100%;
  margin: 0 0 14px;
  break-inside: avoid;
  vertical-align: top;
}

.photo-card {
  position: relative;
  margin: 0;
  min-height: 0;
  height: auto;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.photo-card img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bg-inset);
}

.photo-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  font-size: 0.85rem;
  color: var(--muted);
}

.photo-card figcaption strong {
  color: var(--text);
  font-size: 0.92rem;
}
.photo-card-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  z-index: 2;
}
.photo-card-actions .ghost-btn {
  font-size: .74rem;
  padding: 4px 8px;
}
.social-media-card { position: relative; }
.social-media-card-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  z-index: 2;
}

/* Files Centre cards intentionally share the Media card geometry while using
   a deterministic poster for every safe file type. Metadata stays visible so
   a card is useful even when a browser cannot decode its bytes. */
.file-grid .file-card { cursor: pointer; }
.file-card:focus-visible { outline: 2px solid var(--accent, #4a9eff); outline-offset: 2px; }
.file-poster {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  background: linear-gradient(135deg, #1b2434, #0b101a);
  color: #dce9ff;
  overflow: hidden;
}
.file-poster::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 8px;
  pointer-events: none;
}
.file-poster-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 92px;
  height: 108px;
  border: 2px solid rgba(220,233,255,.72);
  border-radius: 9px;
  background: rgba(8,12,20,.62);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  overflow-wrap: anywhere;
}
.file-poster-image { background: linear-gradient(135deg, #173e45, #111a24); }
.file-poster-audio { background: linear-gradient(135deg, #402d52, #171321); }
.file-poster-video { background: linear-gradient(135deg, #4b3920, #1d1710); }
.file-poster-pdf { background: linear-gradient(135deg, #4c242b, #1d1217); }
.file-poster-text { background: linear-gradient(135deg, #203b55, #101b29); }
.audio-waveform-poster {
  display: block;
  width: 100%;
  height: 96px;
  border-radius: 8px;
  background-color: #1a2230;
  opacity: .9;
}
.file-size-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--viewer-badge-bg);
  color: var(--viewer-badge-text);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}
.file-card-path {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-poster-directory {
  background: linear-gradient(135deg, #294665, #111c2b);
  color: #dce9ff;
}
.file-card-directory .file-poster-icon {
  width: 108px;
  height: 88px;
  border-radius: 12px 12px 8px 8px;
  font-size: 2.6rem;
}
.file-location {
  display: grid;
  gap: 6px;
  margin: 0.45rem 0 0.7rem;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-raised) 78%, transparent);
}
.file-location-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.file-location-actions button[aria-pressed="true"] {
  background: var(--accent, #4a9eff);
  color: var(--on-accent);
}
.file-location-actions button:disabled { opacity: 0.45; cursor: default; }
.file-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  min-height: 1.45rem;
  font-size: 0.78rem;
}
.file-breadcrumb button {
  border: 0;
  background: transparent;
  color: var(--accent, #4a9eff);
  padding: 2px 4px;
  cursor: pointer;
  border-radius: 4px;
}
.file-breadcrumb button:hover,
.file-breadcrumb button:focus-visible { background: var(--bg-inset); }
.file-breadcrumb .file-breadcrumb-sep { color: var(--muted); }

/* ── Social Media: one provider-neutral account/content surface ────────── */
.social-media-provider-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-raised) 82%, transparent);
}
.social-media-provider-bar label { font-size: .78rem; }
.social-media-provider-bar select { min-width: 170px; max-width: min(100%, 260px); }
.social-media-connection-status { flex: 1 1 220px; min-width: 0; font-size: .78rem; }
.social-media-profile { margin-bottom: 12px; }
.social-media-profile-card { padding: 10px 12px; }
.social-media-profile-card > strong { display: block; margin-bottom: 5px; }
.social-media-profile-table { margin: 0; width: 100%; }
.social-media-profile-table th,
.social-media-profile-table td { padding: 4px 7px; font-size: .76rem; }
.social-media-youtube-account { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.social-media-account-identity { display: flex; align-items: center; gap: 8px; min-width: 0; }
.social-media-account-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-media-account-identity .muted { font-size: .72rem; white-space: nowrap; }
.social-media-account-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); background: var(--bg-raised); }
.social-media-account-logout { flex: 0 0 auto; padding: 4px 8px; font-size: .72rem; }
.social-media-compose {
  margin: 0 0 12px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-raised) 82%, transparent);
}
.social-media-compose summary {
  cursor: pointer;
  color: var(--muted);
  font-size: .8rem;
}
.social-media-compose-form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}
.social-media-compose-field {
  display: flex;
  flex: 1 1 260px;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  font-size: .78rem;
}
.social-media-compose-field input,
.social-media-compose-field textarea { width: 100%; min-width: 0; }
.social-media-compose-field textarea { resize: vertical; min-height: 54px; }
.social-media-compose-hint,
.social-media-compose-result { flex: 1 1 100%; font-size: .75rem; }
.social-media-search-controls {
  margin: 8px 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-inset) 72%, transparent);
}
.social-media-search-form { display: flex; align-items: center; gap: 7px; }
.social-media-search-form input { flex: 1 1 auto; min-width: 0; }
.social-media-load-more { display: block; margin: 12px auto 0; }
.social-media-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  align-items: stretch;
}
.social-media-card { cursor: pointer; }
.social-media-card-poster {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 148px;
  overflow: hidden;
  background: linear-gradient(135deg, #1b2434, #0b101a);
  color: #dce9ff;
}
.social-media-card-poster img {
  width: 100%;
  height: 148px;
  object-fit: cover;
}
.social-media-card-poster-video { background: linear-gradient(135deg, #4b3920, #1d1710); }
.social-media-card-poster-image { background: linear-gradient(135deg, #173e45, #111a24); }
.social-media-card-poster-audio { background: linear-gradient(135deg, #402d52, #171321); }
.social-media-card-poster-text { background: linear-gradient(135deg, #203b55, #101b29); }
.social-media-card-poster-playlist { background: linear-gradient(135deg, #4d315f, #1e1628); }
.social-media-card-poster-subscription { background: linear-gradient(135deg, #2f4b65, #111a24); }
.social-media-card-icon { font-size: 3.2rem; line-height: 1; opacity: .9; }
.social-media-kind-badge { z-index: 2; }
.social-media-card-excerpt {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-height: 1.35;
}
.social-media-card-inline-player {
  padding: 0 8px 8px;
}
.social-media-card-inline-player video,
.social-media-card-inline-player audio {
  display: block;
  width: 100%;
  max-height: 148px;
  border-radius: 6px;
  background: var(--bg-inset);
}
.social-media-card-inline-player img.social-media-card-inline-image {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--bg-inset);
}
.social-media-card-inline-player iframe {
  display: block;
  width: 100%;
  height: 148px;
  min-height: 148px;
  border: 0;
  border-radius: 6px;
  background: #000;
}
.social-media-viewer-provider {
  max-width: 35%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: .8rem;
}
.social-media-viewer-stage { flex-direction: column; gap: 10px; overflow: auto; }
.social-media-viewer-stage iframe {
  width: min(100%, 960px);
  height: min(68vh, 620px);
  min-height: 260px;
  border: 0;
  border-radius: 8px;
  background: #000;
}
.social-media-viewer-stage img,
.social-media-viewer-stage video {
  max-width: 100%;
  max-height: 62vh;
  object-fit: contain;
  border-radius: 7px;
}
.social-media-viewer-stage audio { width: min(560px, 92%); }
.social-media-viewer-text {
  width: min(900px, 100%);
  max-height: 22vh;
  overflow: auto;
  padding: 8px 10px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  background: color-mix(in srgb, var(--bg-inset) 86%, transparent);
  font-size: .85rem;
  line-height: 1.45;
}
.social-media-viewer-actions {
  flex: 0 0 auto;
  padding: 0 14px;
  border-top: 1px solid var(--border);
}
.social-media-actions-details { padding: 7px 0; }
.social-media-action-form { display: flex; gap: 6px; align-items: flex-end; flex-wrap: wrap; margin-top: 7px; }
.social-media-action-form textarea { flex: 1 1 260px; min-height: 50px; resize: vertical; }
.social-media-action-form span,
.social-media-actions-details > span { font-size: .76rem; }

/* Social Media uses the same three-pane expanded browsing geometry as the
   Media/Files viewer. The centre remains the focus while two compact rails
   provide a visible, keyboard/touch-friendly preview of adjacent items. */
.social-media-viewer-stage {
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  overflow: hidden;
}
.social-viewer-center-viewport {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  background: var(--viewer-stage-bg);
}
.social-viewer-media-shell {
  position: relative;
  width: min(100%, 960px);
  min-height: 220px;
  height: min(68vh, 620px);
  flex: 0 1 auto;
  display: grid;
  place-items: stretch;
}
.social-viewer-media-shell > iframe {
  width: 100%;
  height: 100%;
  min-height: 220px;
  border: 0;
  border-radius: 8px;
  background: #000;
}
.social-viewer-iframe-gesture { display: none; }
.social-media-viewer-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: min(100%, 960px);
}
.social-media-viewer-text-title { color: var(--text); }
.social-media-viewer-text > summary { cursor: pointer; font-weight: 600; }
.social-media-viewer-text:not([open]) > .social-media-viewer-text-description { display: none; }
.social-media-viewer-text-description { color: var(--muted); }
.social-viewer-rail {
  flex: 0 0 clamp(82px, 14vw, 150px);
  min-width: 0;
  min-height: 0;
  display: grid;
  /* Rails are previews, not a second flexible canvas. Fixed rows keep a
     partially filled rail from stretching its last card to the full viewer
     height (especially noticeable in the Social Media expanded view). */
  grid-auto-rows: 92px;
  gap: 7px;
  align-content: center;
  overflow: hidden;
  padding: 3px;
}
.social-viewer-rail.hidden { display: none; }
.social-viewer-rail-item {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  padding: 3px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--viewer-rail-bg);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.social-viewer-rail-item:hover,
.social-viewer-rail-item:focus-visible { border-color: var(--accent); outline: none; }
.social-viewer-rail-item > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .68rem;
}
.social-viewer-rail-thumb {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 45px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--bg-inset);
  color: var(--viewer-placeholder);
  font-size: 1.4rem;
}
.social-viewer-rail-thumb img { width: 100%; height: 100%; min-height: 45px; object-fit: cover; }
.social-media-playback-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 7px 0;
  border-bottom: 0;
}
.social-media-playback-controls > .muted { flex: 1 1 auto; min-width: 120px; font-size: .76rem; }
.social-playlist-loading { padding: 24px; }

/* Persistent player: adopting the viewer's element lets the operator keep
   listening/watching while changing ETTI tabs. It intentionally sits above
   normal panels but below the approval alert. */
.mini-player {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  /* Above in-app expanded Games/Emulation (10000), without moving the live
     iframe. Native OS fullscreen is a separate browser-owned surface. */
  z-index: 11000;
  width: min(410px, calc(100vw - 28px));
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-raised) 96%, transparent);
  color: var(--text);
  box-shadow: 0 10px 34px rgb(0 0 0 / 32%);
  backdrop-filter: blur(12px);
  min-width: min(240px, calc(100vw - 20px));
  max-width: min(640px, calc(100vw - 20px));
  min-height: 0;
  /* ETTI owns centered, width-driven resizing. Native CSS resize anchors to
     a corner and therefore makes the card grow only down/right. */
  resize: none;
  overflow: hidden;
  overscroll-behavior: contain;
  /* The MiniPlayer owns its two-finger resize gesture.  `touch-action: none`
     keeps Safari from interpreting the same gesture as viewport pinch-zoom,
     which would scale the whole PWA instead of the player.  The native media/
     iframe controls remain interactive; the player-level touch handlers only
     consume a two-finger gesture and leave ordinary taps alone. */
  touch-action: none;
}
.mini-player.is-dragging { user-select: none; cursor: grabbing; }
body.mini-player-dragging,
body.mini-player-dragging * {
  user-select: none !important;
  -webkit-user-select: none !important;
}
.mini-player-header,
.mini-player-meta { cursor: grab; }
.mini-player-header,
.mini-player-heading,
.mini-player-header-actions,
.mini-player-controls {
  display: flex;
  align-items: center;
}
.mini-player-header { justify-content: space-between; gap: 8px; margin-bottom: 7px; touch-action: none; }
.mini-player-heading { min-width: 0; gap: 7px; cursor: grab; touch-action: none; }
.mini-player-heading strong { font-size: .8rem; letter-spacing: .02em; }
.mini-player-source { color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-player-header-actions { gap: 5px; }
.mini-player-header-actions .ghost-btn { padding: 3px 7px; font-size: .72rem; }
.mini-player-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: var(--viewer-stage-bg);
  /* Keep a pinch that starts on a provider iframe/media surface inside the
     MiniPlayer contract; the outer element cannot rely on touch events
     bubbling out of a cross-origin iframe.  Taps and native controls remain
     available while viewport zoom is disabled for this surface. */
  touch-action: none;
}
.mini-player-stage iframe,
.mini-player-stage video {
  width: 100%; height: 100%; max-height: none; border: 0; object-fit: contain;
  touch-action: none;
}
.mini-player-stage img.mini-player-image {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  border-radius: 7px;
}
.mini-player-stage audio {
  width: 100%;
  height: 54px;
  max-height: none;
}
.mini-player-stage-audio {
  min-height: 160px;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  aspect-ratio: auto;
}
.viewer-center > .audio-waveform-poster { width: min(720px, 92%); height: clamp(96px, 24vh, 220px); flex: none; }
.mini-player-stage-audio > .audio-waveform-poster { height: 96px; flex: none; }
.viewer-center:has(> .audio-waveform-poster) > .audio-thumb-large { display: none; }
.mini-player-gesture-surface { display: none; }
.mini-player-media { max-width: 100%; }
.mini-player-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 6px 2px 4px; }
.mini-player-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
.mini-player-caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; }
.mini-player-controls { flex-wrap: wrap; gap: 5px; }
.mini-player-controls button { padding: 4px 8px; font-size: .74rem; }
.mini-player-speed-label { display: inline-flex; align-items: center; }
.mini-player-speed {
  min-height: 27px;
  padding: 3px 22px 3px 7px;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  background: var(--bg-raised);
  font: inherit;
  font-size: .74rem;
}
.mini-player-controls button[aria-pressed="true"],
.mini-player-controls button.selected { background: var(--accent); color: var(--on-accent); }
.mini-player-background[aria-pressed="false"] { opacity: .76; }

/* Local Games panel: each game stays in its own responsive surface instead
   of competing for one overwritten body. */
.games-shell { display: grid; gap: 12px; min-width:0; }
.games-switcher {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.games-switcher button { min-height: 34px; flex:0 0 auto; white-space:nowrap; }
.games-switcher button.selected { background: var(--accent); color: var(--on-accent); }
.game-card {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-raised);
}
.game-card h3 { margin: 0; }
.game-card p { margin: 0; }
.game-board { display: grid; gap: 5px; }
.ttt-board { grid-template-columns: repeat(3, minmax(58px, 84px)); }
.memory-board { grid-template-columns: repeat(var(--memory-columns, 6), minmax(0, 1fr)); width: min(100%, 420px); }
.game-card { min-width: 0; width: 100%; box-sizing: border-box; }
.game-options { display:flex; flex-wrap:wrap; gap:12px; width:100%; }
.game-option { display:flex; flex-direction:column; gap:4px; min-width:0; max-width:100%; font-size:.85rem; }
.game-option input { width:6em; }
.game-option select, .game-option input { padding:8px; max-width:100%; box-sizing:border-box; }
.boxes-board { display:grid; width:min(100%,480px); aspect-ratio:1; align-items:stretch; }
.box-dot,.box-owner { display:grid; place-items:center; min-width:0; font-weight:bold; }
.box-dot { font-size:1.6rem; }
.box-owner { font-size:clamp(.6rem,2vw,1rem); background:var(--bg-raised); }
.box-owner[data-player="0"] { color:var(--player-one); }
.box-owner[data-player="1"] { color:var(--player-two); }
.box-owner[data-player="2"] { color:var(--player-three); }
.box-owner[data-player="3"] { color:var(--player-four); }
.box-line { padding:0; min-width:0; min-height:0; border:0; background:transparent; position:relative; cursor:pointer; touch-action:manipulation; }
.box-line::after { content:""; position:absolute; background:var(--border); border-radius:8px; }
.box-line.h::after { left:-50%;right:-50%;top:calc(50% - 3px);height:6px; pointer-events:none; }
.box-line.v::after { top:-50%;bottom:-50%;left:calc(50% - 3px);width:6px; pointer-events:none; }
.box-dot { z-index:1; pointer-events:none; }
.box-line:disabled::after { background:var(--accent); }
.box-line:hover:not(:disabled)::after { background:var(--text); }
.picture-puzzle { display:grid; gap:3px; width:min(100%,480px); aspect-ratio:1; }
.puzzle-piece { min-width:0; min-height:0; padding:0; border:1px solid var(--border); color:white; text-shadow:0 1px 3px black,0 0 4px black; font-weight:bold; aspect-ratio:1; cursor:pointer; }
.puzzle-piece[aria-pressed="true"] { outline:3px solid var(--accent); outline-offset:-4px; }
.picture-puzzle.rounded .puzzle-piece { border-radius:20%; }
.picture-puzzle.diamond .puzzle-piece { clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.puzzle-reference { width:min(100%,240px); aspect-ratio:1; background-size:cover; border-radius:10px; }
.arcade-canvas { display:block; max-width:100%; height:auto; background:#0c1526; border-radius:12px; border:1px solid var(--border); touch-action:none; }
.game-stage-tools { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.game-pass-screen { padding:32px 16px; text-align:center; border:1px solid var(--border); border-radius:20px; background:var(--bg-raised); }
#games-body [hidden] {display:none!important;}
.party-board {display:grid;grid-template-columns:repeat(var(--party-cols),minmax(0,1fr));gap:6px;max-width:420px;margin:12px auto;}
.party-board button {aspect-ratio:1;min-width:0;padding:4px;}
.party-disc {display:grid;place-items:center;aspect-ratio:1;min-width:0;font-size:clamp(1rem,4vw,2rem);border:1px solid var(--border);border-radius:50%;background:var(--surface);}
.party-disc-X {color:var(--accent);font-weight:800;}
.party-disc-O {color:var(--text);font-weight:800;}
.party-disc-empty {opacity:.85;}
.game-party-cpu-controls {display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:.5rem 0;}
.game-party-cpu-controls input {flex:0 0 auto;width:auto;}
.game-party-cpu-controls span {flex:1;min-width:0;}
.game-party-surface > h4 {margin:0;}
.game-party-surface > button {justify-self:start;}
.game-session-badge {display:block;font-size:.65rem;font-weight:400;opacity:.8;white-space:normal;}
.game-party > *, .game-party-roster, .game-party-surface, .game-party-scoreboard {min-width:0;max-width:100%;box-sizing:border-box;}
.game-party > p {overflow-wrap:anywhere;}
.game-party-roster, .game-party-surface, .game-party-scoreboard {width:100%;}
.game-party-roster {display:grid;gap:.5rem;}
.game-party-roster .arcade-controls {display:flex;flex-wrap:wrap;gap:.5rem;min-width:0;}
.game-party .game-options input, .game-party .game-options select {min-width:0;max-width:100%;box-sizing:border-box;}
.game-party-roster input {flex:1 1 8rem;width:8rem;}
.game-party .game-options > p {flex-basis:100%;font-size:.85rem;color:var(--muted);}
.game-party-rounds {flex:1 0 100%;min-width:0;margin:0;padding-left:1.4rem;box-sizing:border-box;}
.game-party-rounds li {padding:.3rem 0;overflow-wrap:anywhere;}
.game-party-rounds button {margin-left:.5rem;padding:.35rem .55rem;font-size:.8rem;max-width:100%;white-space:normal;}
.game-party-surface {display:grid;gap:.75rem;}
.game-party-code {overflow-wrap:anywhere;padding:.55rem .65rem;border:1px solid var(--border);border-radius:10px;font-size:.82rem;}
.game-party-table-scroll {width:100%;max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;border:1px solid var(--border);border-radius:10px;}
.game-party-scoreboard table {width:100%;min-width:25rem;border-collapse:collapse;font-size:.82rem;}
.game-party-scoreboard caption {padding:.6rem .7rem;text-align:left;font-weight:600;color:var(--text);}
.game-party-scoreboard th, .game-party-scoreboard td {padding:.4rem .5rem;border-top:1px solid var(--border);text-align:right;}
.game-party-scoreboard th:first-child {text-align:left;max-width:14rem;overflow-wrap:anywhere;}
.game-party-scoreboard tbody tr:nth-child(even) {background:var(--bg-raised);}
.game-party-scoreboard details {margin-top:.65rem;overflow-wrap:anywhere;}
.game-party-scoreboard details ol {padding-left:1.4rem;}
.game-party-scoreboard details li {margin:.5rem 0;}
.game-party-scoreboard > p {margin-top:.6rem;font-size:.8rem;line-height:1.45;color:var(--muted);overflow-wrap:anywhere;}
.game-selector-chip { display:flex; align-items:center; gap:6px; border:1px solid var(--border); border-radius:99px; background:var(--bg-raised); box-shadow:0 4px 16px #0003; padding:6px 10px; max-width:100%; }
.game-selector-chip select { width:auto; min-width:0; max-width:200px; border:0; background:transparent; color:inherit; }
.game-play-area,.game-control-area {display:contents;}
.settings-panel.game-stage-expanded { position:fixed!important; inset:0!important; width:100vw!important; height:100dvh!important; max-width:none!important; max-height:none!important; transform:none!important; z-index:10000; padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); display:flex; flex-direction:column; overflow:hidden; border-radius:0; box-sizing:border-box; }
.settings-panel.game-stage-expanded {padding:0!important;}
.game-stage-expanded.hidden {display:none!important;}
.game-stage-expanded #games-body {display:flex!important;flex-direction:column;flex:1;min-height:0;gap:10px!important;contain:none;}
.game-stage-expanded .game-stage-tools { position:absolute; inset-block-start:max(8px,env(safe-area-inset-top)); inset-inline: max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-right)); z-index:8; flex-shrink:0; margin:0; justify-content:space-between; pointer-events:none; }
.game-stage-expanded .game-stage-tools>* { pointer-events:auto; }
.game-stage-expanded .game-stage-tools {flex-wrap:nowrap;}
.game-stage-expanded .game-selector-chip {min-width:0;max-width:calc(100% - 52px);}
.game-stage-expanded .game-stage-tools>button {width:42px;min-width:42px;min-height:42px;padding:6px;font-size:1.25rem;}
.game-stage-expanded .games-switcher,.game-stage-expanded [data-arcade-expand] { display:none; }
.game-stage-expanded>.settings-header {display:none;}
.game-stage-expanded .game-selector-chip {border-color:color-mix(in srgb,var(--accent) 65%,var(--border));background:color-mix(in srgb,var(--bg-raised) 82%,transparent);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);}
.game-stage-expanded .games-shell {flex:1;min-height:0;display:block;}
.game-stage-expanded [data-game-panel]:not([hidden]) {height:100%;overflow:auto;}
.game-stage-expanded .game-card {max-width:1200px;margin:auto;justify-items:center;}
.game-stage-expanded .game-card.game-layout {display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;height:100%;max-width:none;padding:0;border:0;background:transparent;gap:12px;overflow:hidden;}
.game-stage-expanded .game-play-area {display:grid;place-items:center;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;}
.game-stage-expanded .game-control-area {display:flex;flex-direction:column;align-items:center;gap:10px;box-sizing:border-box;width:100%;max-height:30dvh;overflow:auto;padding:12px;background:color-mix(in srgb,var(--bg-raised) 85%,transparent);border:1px solid var(--border);border-radius:16px;}
.game-stage-expanded .game-control-area .arcade-controls,.game-stage-expanded .game-options {justify-content:center;}
.game-stage-expanded .game-control-area> :is(h3,.arcade-controls:has(h3)) {display:none;}
.game-stage-expanded .game-control-area> :is([role=status],.game-status) {order:-1;}
.game-stage-expanded .game-control-area>details {order:5;flex-shrink:0;}
.game-stage-expanded .game-control-area>.game-options {order:2;}
.game-stage-expanded .game-play-area> :is(canvas,.game-board,.boxes-board,.picture-puzzle,.chip-board,.fleet-grids,.arcade-grid) {width:var(--play-width,100%)!important;height:var(--play-height,auto)!important;max-width:100%;max-height:100%;box-sizing:border-box;}
.game-stage-expanded .ttt-board {grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));}
.game-stage-expanded .minesweeper-board {grid-template-columns:repeat(var(--mine-columns,9),minmax(0,1fr));grid-auto-rows:1fr;}
.game-stage-expanded .mahjong-solitaire-board {grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));}
.game-stage-expanded :is(.ms-cell,.mj-tile,.ttt-cell) {min-height:0;font-size:clamp(.8rem,2.2vmin,1.8rem);}
.game-stage-expanded .game-play-area .mj-tile {min-height:0;font-size:clamp(.8rem,2.2vmin,1.8rem);}
.game-stage-expanded .game-control-area .arcade-controls {gap:6px;}
.game-stage-expanded .game-control-area .arcade-controls button {padding:6px 9px;font-size:.85rem;min-height:40px;}
.game-stage-expanded .fleet-grids .arcade-grid {width:100%;}
/* Emulation inside PWA — fullscreen, centered, no separate tab */
.settings-panel.emulation-expanded { position:fixed!important; inset:0!important; width:100vw!important; height:100dvh!important; max-width:none!important; max-height:none!important; transform:none!important; z-index:10000; padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); display:flex; flex-direction:column; overflow:hidden; border-radius:0; box-sizing:border-box; background:var(--bg); }
.emulation-expanded.hidden {display:none!important;}
.settings-panel.emulation-expanded {padding:0!important;}
.emulation-expanded > .settings-header {display:flex; position:absolute; inset-block-start:max(8px,env(safe-area-inset-top)); inset-inline:max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-right)); z-index:8; width:auto; max-width:calc(100% - 16px); margin:0; padding:0; box-sizing:border-box; background:transparent; color:var(--text); border:0; box-shadow:none; pointer-events:none;}
.emulation-expanded > .settings-header > h2 {display:none;}
.emulation-expanded > .settings-header > .actions {margin-inline-start:auto;pointer-events:auto;}
.emulation-expanded.emulation-playing > .settings-header {display:none;}
.emulation-expanded #emulation-body {flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;}
.emulation-expanded .emulation-viewer {flex:1; min-height:0; display:grid; place-items:center; background:var(--bg-inset); color:var(--text); border:1px solid var(--border); border-radius:12px; overflow:hidden;}
.emulation-expanded .emulation-viewer iframe, .emulation-expanded .emulation-viewer canvas {width:100%!important; height:100%!important; max-width:100%; max-height:100%; border:0; display:block;}
.emulation-viewer {display:grid; place-items:center; min-height:280px; background:var(--bg-inset); color:var(--text); border:1px solid var(--border); border-radius:12px; overflow:hidden; position:relative;}
.emulation-viewer:empty {display:none;}
.emulation-library-tools {display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;}
.emulation-paging {display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap;margin-block:.6rem;scroll-margin-top:.5rem;}
.emulation-paging [role=status] {text-align:center;flex:1;min-width:6rem;font-size:.8rem;overflow-wrap:anywhere;}
.emulation-paging button {min-height:44px;}
.emulation-regional-filter {display:flex;align-items:center;gap:.5rem;min-height:44px;margin-top:.35rem;font-size:.85rem;cursor:pointer;}
.emulation-regional-filter input {flex:0 0 auto;width:1.1rem;height:1.1rem;margin:0;}
@media (max-width:480px) {
  .emulation-paging {display:grid;grid-template-columns:1fr 1fr;}
  .emulation-paging [role=status] {grid-column:1 / -1;grid-row:1;}
}
.emulation-library-tools [role=status] {flex:1;min-width:0;overflow-wrap:anywhere;}
.emulation-scan-status {display:block;min-width:0;max-width:100%;overflow-wrap:anywhere;}
#emulation-body .game-options {min-width:0;flex-wrap:wrap;}
#emulation-body .emulation-collapsible {align-self:start;width:100%;box-sizing:border-box;}
#emulation-body .emulation-collapsible > div {height:auto;min-height:0;align-self:start;}
#emulation-body .emulation-filter-tools {align-items:flex-start;align-content:flex-start;}
#emulation-body .emulation-filter-tools > :is(input,select,label) {height:auto;min-height:40px;align-self:flex-start;}
#emulation-body .emulation-filter-tools > input {height:40px;max-height:40px;}
#emulation-body .emulation-controller-tools > p {flex-basis:100%;margin:0;}
#emulation-body .game-options input,#emulation-body .game-options select {min-width:0;max-width:100%;box-sizing:border-box;}
#emulation-body .game-options input {flex:1 1 180px;}
.emulation-viewer iframe {width:100%; max-width:860px; aspect-ratio:4/3; border:0; display:block; background:black;}
.emulation-playing #emulation-body {overflow:hidden;}
.emulation-playing #emulation-body > .game-card {flex:1;min-height:0;display:flex;flex-direction:column;margin:0;padding:0;border:0;}
.emulation-playing .game-card > :not(.emulation-viewer) {display:none!important;}
.emulation-playing .emulation-viewer,.emulation-viewer:fullscreen {display:flex;flex-direction:column;flex:1;width:100%;height:100%;min-height:0;border:0;border-radius:0;}
.emulation-player-tools {position:relative;z-index:2;display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%;padding:6px;box-sizing:border-box;background:var(--bg-raised);color:var(--text);border-bottom:1px solid var(--border);}
.emulation-player-tools [role=status] {flex:1;min-width:80px;font-size:.8rem;overflow-wrap:anywhere;}
.emulation-expanded.emulation-playing .emulation-player-tools {position:absolute;inset-block-start:max(8px,env(safe-area-inset-top));inset-inline:max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-right));z-index:8;width:auto;max-width:calc(100% - 16px);padding:0;background:transparent;color:var(--text);border:0;pointer-events:none;}
.emulation-expanded.emulation-playing .emulation-player-tools > * {pointer-events:auto;}
.emulation-expanded.emulation-playing .emulation-player-tools > [role=status] {flex:0 1 auto;padding:.45rem .7rem;border:1px solid var(--border);border-radius:999px;background:color-mix(in srgb,var(--bg-raised) 82%,transparent);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);}
.emulation-expanded.emulation-playing .emulation-player-tools > .actions {display:flex;gap:8px;margin-inline-start:auto;}
.emulation-checkpoints {position:static;flex:0 1 auto;min-width:0;max-width:100%;}
.emulation-checkpoints summary {cursor:pointer;padding:.5rem .75rem;border:1px solid var(--border);border-radius:12px;}
.emulation-checkpoint-controls {position:absolute;right:0;top:calc(100% + 8px);z-index:5;width:min(480px,calc(100vw - 48px));box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;padding:.75rem;background:var(--bg-raised);color:var(--text);border:1px solid var(--border);border-radius:14px;box-shadow:0 8px 24px #0006;}
.emulation-checkpoint-controls select {min-width:0;max-width:100%;min-height:40px;flex:1 1 220px;}
.emulation-checkpoint-controls {max-width:100%;max-height:60dvh;overflow:auto;}
.emulation-checkpoint-controls input {min-width:0;width:100%;min-height:40px;box-sizing:border-box;}
.emulation-checkpoint-controls [role=status] {flex-basis:100%;}
.emulation-playing .emulation-viewer iframe,.emulation-viewer:fullscreen iframe {flex:1;min-height:0;max-width:none!important;width:100%;aspect-ratio:auto;}
#emulation-body > .game-card {max-width:none;justify-items:stretch;align-content:start;}
#emulation-body .media-grid {width:100%;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--rom-cell-size,160px)),1fr))!important;align-items:start;}
.emulation-rom-card {position:relative;min-width:0;border:1px solid var(--border,#333);border-radius:8px;overflow:hidden;cursor:pointer;}
.emulation-layout-vertical {display:flex !important;flex-direction:column;gap:.6rem !important;}
.emulation-layout-vertical .emulation-rom-card {width:100%;}
.emulation-layout-horizontal {display:flex !important;flex-flow:row nowrap;gap:.6rem !important;overflow-x:auto;align-items:stretch;}
.emulation-layout-horizontal .emulation-rom-card {flex:0 0 min(78vw, 360px);}
.emulation-authorization-notice {border:1px solid color-mix(in srgb, var(--accent,#ff6b86) 60%, transparent);border-radius:var(--radius,.75rem);padding:.55rem .7rem;}
.emulation-rom-card.details-open {grid-column:1 / -1;display:grid;grid-template-columns:minmax(140px,min(34%,360px)) minmax(0,1fr);cursor:default;}
.emulation-rom-card.details-open .emulation-rom-meta {align-self:start;}
.emulation-rom-details {grid-column:2;padding:.5rem .75rem .75rem;border-top:1px solid var(--border);font-size:.78rem;overflow-wrap:anywhere;}
.emulation-rom-details ul {margin:.2rem 0 .65rem;padding-inline-start:1.2rem;}
.emulation-rom-detail-label {display:block;margin-top:.55rem;font-weight:700;color:var(--muted);}
@media(max-width:560px){.emulation-rom-card.details-open{grid-template-columns:1fr}.emulation-rom-details{grid-column:1}.emulation-rom-card.details-open .emulation-rom-poster{height:min(48vw,var(--rom-poster-height,176px));}}
.emulation-rom-poster {position:relative;display:grid;place-items:center;height:var(--rom-poster-height,176px);min-width:0;overflow:hidden;color:white;text-align:center;}
.emulation-console-badge {display:block;width:fit-content;margin-top:.35rem;padding:.15rem .4rem;border-radius:20px;background:var(--bg-inset);color:var(--muted);border:1px solid var(--border);font-size:.7rem;}
.emulation-rom-poster > span {font-size:2.5rem;}
.emulation-rom-poster > img {position:absolute;inset:0;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;}
.emulation-rom-meta {padding:.4rem .5rem;font-size:.78rem;overflow-wrap:anywhere;}
.emulation-rom-actions {position:absolute;right:8px;bottom:8px;z-index:2;}
.emulation-rom-actions .ghost-btn {min-height:44px;background:rgba(9,13,22,.92);color:#fff;border-color:rgba(255,255,255,.72);box-shadow:0 3px 14px #0008;opacity:1;}
.emulation-collapsible {border:1px solid var(--border); border-radius:10px; overflow:hidden; background:color-mix(in srgb, var(--bg-raised) 60%, transparent);}
.emulation-collapsible > summary {cursor:pointer; padding:8px 12px; font-weight:700; font-size:0.82rem; list-style:none; display:flex; align-items:center; gap:6px;}
.emulation-collapsible > summary::-webkit-details-marker {display:none;}
.emulation-collapsible > summary::before {content:"▸"; font-size:0.9rem; transition:transform .18s;}
.emulation-collapsible[open] > summary::before {transform:rotate(90deg);}
.emulation-collapsible > div {padding:8px 12px;}
.emulation-scan-progress {display:flex; align-items:center; gap:8px; padding:8px 12px; margin:6px 0; border:1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius:8px; background:color-mix(in srgb, var(--accent) 8%, var(--bg-raised)); font-size:0.82rem; }
.emulation-scan-progress.hidden {display:none;}
.emulation-scan-spinner {display:inline-block; width:16px; height:16px; border:2px solid color-mix(in srgb, var(--accent) 30%, transparent); border-top-color:var(--accent); border-radius:50%; animation:emulation-spin 0.8s linear infinite; flex-shrink:0;}
.inline-activity-spinner {display:inline-block; width:0.9em; height:0.9em; border:2px solid color-mix(in srgb, currentColor 28%, transparent); border-top-color:currentColor; border-radius:50%; animation:emulation-spin 0.8s linear infinite; vertical-align:-0.08em;}
@keyframes emulation-spin { to { transform:rotate(360deg); } }
.emulation-scan-text {flex:1;}
.game-stage-expanded .game-play-area.game-multiple-boards {display:flex;flex-wrap:wrap;justify-content:center;gap:12px;overflow:auto;}
.game-stage-expanded .game-multiple-boards>.ttt-board {width:240px!important;height:240px!important;}
.game-stage-expanded #games-msg:empty {display:none;}
@media(min-width:760px) and (min-aspect-ratio:1/1){.game-stage-expanded .game-card.game-layout {grid-template-columns:minmax(0,1fr) clamp(230px,26vw,330px);grid-template-rows:minmax(0,1fr);}.game-stage-expanded .game-control-area {max-height:100%;height:100%;justify-content:center;}}
@media(max-width:400px){.game-selector-chip select {max-width:140px}.game-stage-tools button {font-size:.8rem;}}
.arcade-controls { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.settings-panel.arcade-panel-expanded { position:fixed!important; inset:0!important; width:100vw!important; height:100dvh!important; max-width:none!important; max-height:none!important; transform:none!important; z-index:10000; }
.game-card.arcade-fullscreen { display:flex; flex-direction:column; align-items:center; padding:8px; }
.arcade-fullscreen .arcade-controls { justify-content:center; }
.arcade-controls button { min-height:40px; touch-action:none; }
.arcade-controls [aria-pressed="true"] { outline:2px solid var(--accent); }
.arcade-grid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); width:min(100%,360px); gap:2px; }
.arcade-cell { padding:0; aspect-ratio:1; min-width:0; min-height:22px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:clamp(.7rem,2vw,1rem); border-radius:3px; }
.arcade-cell.filled { background:var(--state-info-surface); color:var(--state-info-text); }
.arcade-cell.hit { background:var(--state-danger-surface); color:var(--state-danger-text); }
.fleet-grids { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:16px; width:100%; }
.block-preview { display:grid; grid-template-columns:repeat(3,16px); line-height:16px; color:var(--player-one); }
.chip-board { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); width:min(100%,480px); gap:1px; background:#0c1526; border-radius:8px; overflow:hidden; }
.chip-cell { display:grid; place-items:center; aspect-ratio:1; min-width:0; font-size:clamp(.7rem,2vw,1.3rem); background:#1e3246; }
.multi-ttt { display:grid; width:100%; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); }
.ttt-cell,
.ms-cell,
.mj-tile {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 42px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.ms-cell { touch-action: none; user-select: none; -webkit-user-select: none; }
.ttt-cell { aspect-ratio: 1; font-size: 1.3rem; }
.ttt-cell:disabled { cursor: default; opacity: .9; }
.minesweeper-board { grid-template-columns: repeat(var(--mine-columns,9), minmax(0, 34px)); width:min(100%,480px); }
.ms-cell { min-height: 30px; font-size: .85rem; }
.ms-cell.revealed { background: var(--surface); border-color: var(--accent); }
.ms-cell.flagged { color: var(--accent); }
.mahjong-board { grid-template-columns: repeat(9, minmax(30px, 46px)); }
.mahjong-solitaire-board {
  position: relative;
  grid-template-columns: repeat(7, minmax(34px, 1fr));
  grid-template-rows: repeat(4, 42px);
  gap: 5px;
  width: min(100%, 420px);
  padding: 10px 8px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-inset, #101318) 82%, transparent);
  overflow: visible;
}
.mahjong-solitaire-board .mj-tile {
  min-height: 42px;
  font-size: .82rem;
  transition: transform .12s ease, opacity .12s ease, border-color .12s ease;
}
.mahjong-solitaire-board .mj-tile.mahjong-blocked { opacity: .48; cursor: not-allowed; }
.mahjong-solitaire-board .mj-tile.selected { border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.mahjong-solitaire-board .mj-tile.matched { color: var(--ok); opacity: .7; cursor: default; }
.mj-tile { min-height: 42px; font-size: .8rem; }
.mj-tile:disabled { color: var(--ok); cursor: default; }
.game-status { font-weight: 600; }
.game-reset { justify-self: start; }
@media (max-width: 520px) {
  .minesweeper-board { grid-template-columns: repeat(var(--mine-columns,9), minmax(0, 1fr)); width: 100%; }
  .mahjong-board { grid-template-columns: repeat(9, minmax(24px, 1fr)); width: 100%; }
  .mahjong-solitaire-board { grid-template-columns: repeat(7, minmax(24px, 1fr)); grid-template-rows: repeat(4, 32px); gap: 3px; padding: 6px; }
  .ms-cell, .mj-tile { min-height: 28px; }
}
@media (max-width: 640px) {
  .social-media-provider-bar { align-items: stretch; }
  .social-media-provider-bar select { flex: 1 1 160px; min-width: 0; }
  .social-media-viewer-provider { max-width: 45%; }
  .social-media-viewer-stage iframe { min-height: 210px; height: 48vh; }
  .social-viewer-media-shell { height: 48vh; min-height: 210px; }
  .social-viewer-rail { flex-basis: 74px; grid-auto-rows: 70px; gap: 4px; align-content: start; }
  .social-viewer-rail-item { padding: 2px; }
  .social-viewer-rail-item > span:last-child { font-size: .6rem; }
  .social-viewer-rail-thumb { min-height: 38px; font-size: 1.1rem; }
  .social-viewer-rail-thumb img { min-height: 38px; }
}
/* WebKit keeps touch input inside a cross-origin YouTube iframe.  The
   MiniPlayer gesture surface therefore owns only the upper video area on
   touch devices: two fingers resize the player without zooming the page,
   while the lower provider control strip remains available for scrubbing. */
@media (pointer: coarse), (any-pointer: coarse) {
  .mini-player-gesture-surface {
    display: block;
    position: absolute;
    z-index: 2;
    /* Keep the complete YouTube control strip (including the scrubber)
       outside the gesture layer. */
    inset: 0 0 72px;
    border-radius: 7px;
    background: transparent;
    touch-action: none;
  }
}
/* A parent overlay cannot forward arbitrary events into a cross-origin
   YouTube iframe. Keep the complete provider surface native on touch devices
   so play, pause, captions, settings and seeking remain accessible. Expanded
   viewer navigation stays available through rails and previous/next buttons. */
@media (pointer: coarse) {
  .social-viewer-iframe-gesture { display: none; }
  .social-viewer-media-shell > iframe { pointer-events: auto; }
}
/* Desktop fine-pointer users can operate the provider controls directly. A
   hybrid iPad keeps the MiniPlayer gesture surface so touch/trackpad pinch
   can resize it; its pointer handlers still mirror the centred play action. */
@media (any-hover: hover) and (pointer: fine) {
  .social-viewer-iframe-gesture {
    display: none;
  }
}
.mode-toggle-btn { padding: 3px 8px; font-size: .76rem; }
.mode-toggle-btn.selected,
.mode-toggle-btn[aria-pressed="true"] { background: var(--accent, #4a9eff); color: var(--on-accent); }
.media-viewer-source-toggle {
  position: relative;
  flex: 0 0 124px;
  z-index: 1;
  display: flex;
  width: 124px;
  min-width: 124px;
  margin: 0;
}
.media-viewer-source-toggle .mode-toggle-btn { flex: 1 1 50%; min-width: 0; }
.file-viewer-media { max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: 6px; }
.file-viewer-frame { width: 100%; height: min(70vh, 700px); border: 1px solid var(--border, #444); background: #fff; }
.file-viewer-text {
  width: 100%;
  max-height: 70vh;
  margin: 0;
  padding: 1rem;
  overflow: auto;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  background: rgba(0,0,0,.2);
  border: 1px solid var(--border, #333);
  border-radius: 6px;
  font: .82rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.file-viewer-status { margin: 0; text-align: center; }
.file-viewer-download { margin-top: 10px; }

/* A photo whose file failed to load dims honestly; the caption carries the
   "Image unavailable." note injected by the error listener. */
.photo-card.photo-broken img {
  opacity: 0.25;
  min-height: 96px;
}

.media-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-raised) 82%, transparent);
}
.media-filter-bar input[type="search"] { flex: 1 1 160px; min-width: 0; }
.media-filter-bar select { min-width: 110px; }
#media-panel h3 {
  margin: 14px 0 10px;
}
/* ── PLAN / PERFORM mode toggle (reliability pass 2026-08-23) ── */
.mode-toggle {
  display: inline-flex;
  border: 1px solid var(--border, #444);
  border-radius: 6px;
  overflow: hidden;
}
.mode-btn {
  appearance: none;
  background: transparent;
  color: var(--muted, #9a9a9a);
  border: none;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  cursor: pointer;
}
.mode-btn + .mode-btn { border-left: 1px solid var(--border, #444); }
.mode-btn.active {
  background: var(--surface-2, rgba(255, 255, 255, 0.08));
  color: var(--fg, inherit);
  font-weight: 600;
}
#mode-toggle[data-mode="plan"] .mode-btn.active {
  color: var(--warn, #e8b34c);
}
#mode-toggle[data-mode="perform"] .mode-btn.active {
  color: var(--perform, #f28c28);
  background: color-mix(in srgb, var(--perform, #f28c28) 14%, transparent);
}
/* ── Media Studio: per-kind grid cards (Phase 5.28) ── */
.photo-card {
  cursor: pointer;
  /* Deliberately NO transform here or on hover (2026-08-25): hover
     translateY created a layer-geometry change under the stationary
     Magic Keyboard cursor, invalidating iPadOS WebKit's scrolling-tree
     hit-testing between two-finger swipes — the "swipe dies until the
     cursor moves" bug. Paint-only border feedback is safe. */
  transition: border-color 0.15s ease;
}
.photo-card:hover, .photo-card:focus-visible {
  border-color: var(--accent, #4a9eff);
  outline: none;
}
.photo-card video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bg-inset, #10131a);
}
.photo-card audio.media-card-inline-audio {
  display: block;
  width: calc(100% - 16px);
  min-height: 42px;
  margin: 48px 8px 8px;
  border-radius: 8px;
  background: var(--bg-inset, #10131a);
}
.audio-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 120px;
  font-size: 3rem;
  color: var(--muted, #8b93a3);
  background: var(--bg-inset, #10131a);
}
.media-kind-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--viewer-badge-text);
  background: var(--viewer-badge-bg);
  border: 1px solid var(--border, #262b38);
}
.photo-card { position: relative; }
.photo-card.photo-broken video { opacity: 0.25; min-height: 96px; }

/* ── Media Studio: big-screen viewer (Phase 5.28) ── */
.media-viewer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-viewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 10, 0.92);
}
.media-viewer-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(96vw, 1400px);
  height: min(92vh, 950px);
  border: 0;
  border-radius: 12px;
  background: transparent;
  overflow: hidden;
}
.media-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border, #262b38);
}
/* Expanded viewers keep controls over the media instead of consuming four
   separate horizontal rows.  The controls remain keyboard/finger reachable,
   but their surfaces are transparent so the focused item stays primary. */
.media-viewer-dialog { position: relative; }
.media-viewer-header,
.media-viewer-footer {
  background: transparent !important;
  border: 0;
  position: absolute;
  z-index: 5;
  left: 10px;
  right: 10px;
  pointer-events: none;
}
.media-viewer-header button,
.media-viewer-footer button,
.media-viewer-header select,
.media-viewer-footer select {
  background: transparent;
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.media-viewer-header { top: 8px; }
.media-viewer-footer { bottom: 8px; }
.media-viewer-header > *,
.media-viewer-footer > * { pointer-events: auto; }
.media-viewer-stage { padding-block: 56px; }
.media-viewer-counter {
  font-size: 0.85rem;
  color: var(--muted, #8b93a3);
  font-variant-numeric: tabular-nums;
}
.media-playback-prefs,
.media-viewer-playback-prefs {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  padding: 6px 0;
}
.media-pref {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 0.82rem;
  color: var(--text, #e8eaf0);
  cursor: pointer;
  user-select: none;
}
.media-pref input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent, #4a9eff);
}
.media-viewer-playback-prefs {
  gap: 10px;
  padding: 0;
  margin-right: 8px;
}
.media-viewer-playback-prefs .media-pref {
  font-size: 0.78rem;
}
.media-viewer-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 12px;
  background: var(--viewer-stage-bg);
}
.media-viewer-stage img,
.media-viewer-stage video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
}
.media-viewer-stage .audio-thumb-large {
  height: 180px;
  font-size: 6rem;
}
/* Audio scrubber (2026-08-24): the bare <audio controls> default is ~300px
   and drowns in the big stage — give it real width and stack it under the
   glyph. */
.media-viewer-stage audio {
  width: min(560px, 92%);
  margin: 18px auto 0;
  display: block;
}
.media-viewer-unavailable {
  text-align: center;
  padding: 24px;
}
.media-viewer-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--border, #262b38);
}
.media-viewer-nav {
  flex: 0 0 auto;
}
.media-viewer-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: center;
}
.media-viewer-title {
  color: var(--text, #e8eaf0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.media-viewer-caption {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
}

/* ── Media Studio: viewer slide transitions + trackpad (Phase 5.28 polish) ── */
.media-viewer-dialog {
  overscroll-behavior: contain; /* keep trackpad swipes in-page */
  touch-action: pan-y;
}
.media-viewer-stage {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  gap: 10px;
  padding: 10px;
  min-height: 0;
  background: var(--viewer-stage-bg);
  align-items: stretch;
  justify-content: flex-start;
}
.viewer-center-viewport {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  border-radius: 8px;
  background: var(--viewer-stage-bg);
  align-self: stretch;
}
.media-slide-pane {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  min-height: 0;
  background: var(--viewer-stage-bg);
  border-radius: 8px;
}
.media-slide-pane img,
.media-slide-pane video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
}
/* ── Spatial viewer: focused centre + surrounding grids ── */
.viewer-rail {
  flex: 0 0 clamp(110px, 18vw, 220px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 92px;
  gap: 8px;
  align-content: start;
  overflow: hidden;
  opacity: 0.92;
  align-self: start;
  max-height: 100%;
  transition: opacity 120ms ease;
}
.viewer-rail.hidden { display: none !important; }
.media-viewer-dialog.viewer-rails-hidden .viewer-rail,
.media-viewer-dialog.viewer-rails-hidden .social-viewer-rail { display: none !important; }
.viewer-rail-item {
  background: var(--viewer-rail-bg);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 72px;
  /* Base transition for opacity/border only; transform transitions are managed by FLIP in JS */
  transition: opacity 160ms ease, border-color 120ms ease;
}
.viewer-rail-item:hover,
.viewer-rail-item:focus-visible { border-color: var(--accent, #4a9eff); outline: none; }
.viewer-rail-item.is-adjacent {
  border-color: var(--accent, #4a9eff);
  box-shadow: 0 0 0 2px var(--accent, #4a9eff), 0 4px 16px rgba(74,158,255,0.35);
  z-index: 1;
}
.viewer-rail-item.is-adjacent .rail-thumb {
  transform: scale(1.08);
  filter: brightness(1.1) contrast(1.05);
}
.viewer-rail-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.viewer-rail-placeholder,
.viewer-rail-audio { font-size: 1.6rem; color: var(--viewer-placeholder); display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.viewer-rail-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--viewer-rail-label-bg); color: var(--viewer-badge-text);
  font-size: 10px; line-height: 1.2; padding: 3px 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.viewer-center {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.viewer-center img,
.viewer-center video { max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: 6px; }
@media (max-width: 900px) {
  .viewer-rail { flex: 0 0 96px; grid-template-columns: 1fr; }
}
/* On narrow phones the rails are hidden by default to protect the focused
   preview and header controls.  The header toggle can explicitly restore
   them when the operator wants the browsing grid. */
@media (max-width: 760px) {
  .media-viewer-dialog:not(.show-viewer-rails) .viewer-rail,
  .media-viewer-dialog:not(.show-viewer-rails) .social-viewer-rail { display: none !important; }
  .media-viewer-header { align-items: stretch; }
  .media-viewer-header > * { min-width: 0; }
  .media-viewer-header-actions { flex: 1 1 100%; justify-content: flex-end; flex-wrap: wrap; }
  .media-viewer-playback-prefs { flex: 1 1 100%; }
}
@media (max-width: 640px) {
  .media-viewer-stage { gap: 6px; padding: 6px; }
  .viewer-rail { flex: 0 0 72px; }
}
.media-pane-pinned {
  z-index: 0;
}
.media-slide-in-right { animation: media-in-right 160ms ease-out; }
.media-slide-in-left { animation: media-in-left 160ms ease-out; }
.media-slide-out-left { animation: media-out-left 160ms ease-in forwards; }
.media-slide-out-right { animation: media-out-right 160ms ease-in forwards; }
@keyframes media-in-right {
  from { transform: translateX(100%); opacity: 0.25; }
  to { transform: none; opacity: 1; }
}
@keyframes media-in-left {
  from { transform: translateX(-100%); opacity: 0.25; }
  to { transform: none; opacity: 1; }
}
@keyframes media-out-left {
  from { transform: none; opacity: 1; }
  to { transform: translateX(-100%); opacity: 0; }
}
@keyframes media-out-right {
  from { transform: none; opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .media-slide-pane,
  .media-slide-in-right,
  .media-slide-in-left,
  .media-slide-out-left,
  .media-slide-out-right {
    animation: none !important;
  }
}

/* ── Media Studio: upload zone + viewer actions (Phase 5.30) ── */
.media-upload {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 0 0 12px;
  border: 1px dashed var(--border, #262b38);
  border-radius: var(--radius, 8px);
  background: var(--bg-inset, #10131a);
}
.media-upload-active {
  border-color: var(--accent, #4a9eff);
  background: color-mix(in srgb, var(--accent, #4a9eff) 8%, transparent);
}
.media-upload-progress {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.media-upload-progress li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
}
.upload-row-name {
  flex: 0 1 auto;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text, #e8eaf0);
}
.upload-row-bar {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--bg-inset, #10131a);
  position: relative;
  overflow: hidden;
}
.upload-row-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--w, 0%);
  background: var(--accent, #4a9eff);
}
.upload-row-bar { min-width: 80px; }
.upload-row-pct { flex: 0 0 auto; min-width: 48px; text-align: right; }
.upload-ok .upload-row-pct { color: var(--ok, #4cc38a); }
.upload-fail .upload-row-pct { color: var(--warn, #e8b34c); }
/* Queue concurrency rewrite (2026-08-24): per-row actions + clear control */
.upload-row-actions { flex: 0 0 auto; display: inline-flex; gap: 6px; }
.upload-row-btn { padding: 2px 10px; font-size: 0.85rem; }
.media-upload-clear { margin-top: 10px; }

/* Media trash (Phase 5.31) */
.media-trash { margin-top: 22px; border-top: 1px solid var(--border, #333); padding-top: 12px; }
.media-trash h4 { margin: 0 0 6px; }
.media-trash-list { list-style: none; margin: 8px 0; padding: 0; }
.media-trash-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; flex-wrap: wrap; }
.media-trash-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-trash-autopurge { display: block; font-size: 0.9em; color: var(--muted, #999); }
.media-viewer-danger { color: var(--danger, #e05252); border-color: var(--danger, #e05252); }
.media-viewer-danger:hover { background: rgba(224, 82, 82, 0.12); }

/* Media job bar (Phase 5.32–5.34) */
.media-job-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; border-top: 1px solid var(--border, #333); }
.media-job-bar.hidden { display: none; }
.media-job-title { font-weight: 600; }
.media-job-fields { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; }
.media-job-field { display: inline-flex; align-items: center; gap: 4px; font-size: 0.85em;
  color: var(--muted, #999); }
.media-job-field input, .media-job-field select { width: 5.5em; }
/* Video timestamp badge (2026-08-24): duration pill under the kind badge */
.photo-card { position: relative; }
.media-duration-badge {
  position: absolute;
  top: 40px;
  right: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  background: rgba(4, 6, 10, 0.78);
  color: #e8edf5;
}
.media-viewer-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.media-viewer-header { min-height: 44px; }

/* One compact toolbar anchored to the focused column. Geometry is supplied
   by viewer-layout.js; it never moves the live player. Reserve only measured
   chrome height so native play/seek/CC controls cannot sit beneath our chips. */
.media-viewer-dialog {
  --viewer-controls-left: 10px;
  --viewer-controls-right: 10px;
  --viewer-controls-top-space: 64px;
  --viewer-controls-bottom-space: 64px;
  --viewer-footer-height: 52px;
}
.media-viewer-header,
.media-viewer-footer,
.social-media-viewer-actions {
  left: var(--viewer-controls-left);
  right: var(--viewer-controls-right);
  padding: 4px;
  border: 0;
}
.media-viewer-header { gap: 6px; justify-content: flex-start; align-items: center; }
.media-viewer-header-actions { flex: 0 1 auto; margin-left: auto; gap: 4px; flex-wrap: wrap; }
.media-viewer-header-actions button,
.viewer-options > summary { min-width: 40px; min-height: 40px; padding: 5px 10px; text-align: center; }
.media-viewer-header-actions button { font-size: 1.1rem; }
.media-viewer-header .media-viewer-source-toggle { flex: 0 1 140px; width: 140px; min-width: 100px; }
.viewer-options { position: relative; flex: 0 0 auto; }
.viewer-options > summary { list-style: none; cursor: pointer; font-size: 1.2rem; }
.viewer-options > summary::-webkit-details-marker { display: none; }
.viewer-options-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 9;
  display: flex; flex-wrap: wrap; gap: 8px; padding: 12px;
  width: min(260px, 70vw); max-height: 45dvh; overflow: auto;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}
.viewer-options-menu[popover] {
  position: fixed; inset: auto; margin: 0; z-index: 12000;
}
.viewer-options:not([open]) > .viewer-options-menu { display: none; }
.viewer-options .media-viewer-playback-prefs { flex: 1 1 100%; margin: 0; }
.viewer-key-skip {
  width: 5.5rem;
  min-height: 30px;
  margin-left: 5px;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.media-slide-pane {
  top: var(--viewer-controls-top-space);
  bottom: var(--viewer-controls-bottom-space);
}
.viewer-center > img,
.viewer-center > video {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.viewer-center > .file-viewer-download,
.viewer-center > audio { flex: none; }
.viewer-center > .audio-waveform-poster { flex: 0 1 auto; min-height: 0; }
.social-viewer-center-viewport {
  padding-top: var(--viewer-controls-top-space);
  padding-bottom: var(--viewer-controls-bottom-space);
  justify-content: flex-start;
  gap: 6px;
  clip-path: inset(var(--viewer-controls-top-space) 0 var(--viewer-controls-bottom-space) 0);
}
.social-viewer-media-shell,
.social-viewer-media-shell > iframe { min-height: 200px; }
.social-viewer-center-viewport > .social-media-viewer-text { flex: none; }
.social-media-playback-controls { padding: 0; }
.social-media-viewer-actions {
  position: absolute;
  bottom: calc(var(--viewer-footer-height) + 12px);
  z-index: 5;
  background: transparent;
  max-height: 35dvh;
  overflow: auto;
}

/* Image editor panel (2026-08-24): client-side canvas editing */
.media-edit-panel { display: flex; flex-direction: column; gap: 8px;
  padding: 8px 12px; border-top: 1px solid var(--border, #333); }
.media-edit-panel.hidden { display: none; }
.media-edit-canvas-wrap { position: relative; align-self: center;
  line-height: 0; max-width: 100%; touch-action: none;
  user-select: none; -webkit-user-select: none; }
.media-edit-canvas-wrap canvas { max-width: 100%; max-height: 60vh;
  border-radius: 6px; background: repeating-conic-gradient(#1a1d24 0% 25%,
    #22262f 0% 50%) 0 0 / 16px 16px; }
.media-edit-select { position: absolute; border: 2px dashed #7ab6ff;
  background: rgba(122, 182, 255, 0.15); pointer-events: none; }
.media-edit-select.hidden { display: none; }
.media-edit-controls { display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; }
.media-edit-field { display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.85em; color: var(--muted, #999); }
.media-edit-field input[type="number"] { width: 4.5em; }
.media-edit-mode { font-size: 0.85em; }

/* Fullscreen dismiss button (2026-08-25) */
.fullscreen-dismiss-btn {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 2147483647;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  transition: background 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}
.fullscreen-dismiss-btn:hover,
.fullscreen-dismiss-btn:active {
  background: rgba(0, 0, 0, 0.85);
  transform: scale(1.05);
}
.fullscreen-dismiss-btn:focus-visible {
  outline: 2px solid var(--accent, #4a9eff);
  outline-offset: 2px;
}

/* GIF poster state (2026-08-25): when autoplay is OFF, GIFs show static poster */
.gif-poster {
  /* Static poster displayed instead of animated GIF */
}
.photo-card.gif-poster .media-kind-badge::after {
  content: " (paused)";
  font-size: 0.7em;
  opacity: 0.7;
}

/* Ensure fullscreen dismiss button appears above media in fullscreen */
:-webkit-full-screen .fullscreen-dismiss-btn,
:fullscreen .fullscreen-dismiss-btn {
  position: fixed;
  top: 16px;
  right: 16px;
}

/* Race/Queue monitor (2026-08-25) */
.race-row { margin-bottom: 0.5rem; border: 1px solid var(--border, #333); border-radius: 4px; }
.race-row summary { cursor: pointer; padding: 6px 10px; font-weight: 600; font-size: 0.82rem; }
.race-grid { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 6px 10px; font-size: 0.8rem; }
.monitor-active { border-color: var(--accent, #4a9eff); color: var(--accent, #4a9eff); font-weight: 600; }

/* Job conversation groups (2026-08-25): purely organizational */
.group-chip { display:inline-block; font-size:0.68rem; padding:1px 6px; margin-right:4px; border:1px solid var(--accent,#4a9eff); border-radius:10px; color:var(--accent,#4a9eff); opacity:0.85; }
.group-edit-btn { font-size:0.68rem; padding:1px 6px; margin-left:4px; }
.job-groups-chips { margin:4px 0; display:flex; flex-wrap:wrap; align-items:center; gap:2px; }
#job-groups-editor { border:1px solid var(--border,#333); border-radius:6px; padding:8px; margin:6px 0; max-height:220px; overflow:auto; }

/* Floating current-media player (2026-08-25) */
.floating-player {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  width: 380px;
  min-width: 320px;
  max-width: 520px;
  background: var(--bg, #0b0d12);
  border: 1px solid var(--border, #262b38);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: inherit;
  color: var(--text, #e8eaf0);
}

.floating-player.hidden { display: none; }

.floating-player-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border, #262b38);
  background: var(--bg-inset, #10131a);
  border-radius: 12px 12px 0 0;
}

.floating-player-title {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text, #e8eaf0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floating-player-controls {
  display: flex;
  gap: 4px;
}

.floating-player-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: var(--surface, #1a1d24);
  color: var(--text, #e8eaf0);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.1s ease;
  flex-shrink: 0;
}

.floating-player-btn:hover {
  background: var(--accent, #4a9eff);
  color: var(--on-accent);
  transform: scale(1.05);
}

.floating-player-btn:active {
  transform: scale(0.95);
}

.floating-player-btn.hidden { display: none; }

.floating-player-btn-primary {
  background: var(--accent, #4a9eff);
  color: var(--on-accent);
}

.floating-player-btn-primary:hover {
  background: var(--accent);
}

.floating-player-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

.floating-player-media {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--viewer-stage-bg);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.floating-player-media img,
.floating-player-media video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.floating-player-media .audio-thumb-large {
  font-size: 4rem;
  color: var(--muted, #8b93a3);
}

.floating-player-info {
  padding: 4px 0 2px;
}

.floating-player-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text, #e8eaf0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floating-player-caption {
  font-size: 0.75rem;
  color: var(--muted, #8b93a3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floating-player-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.floating-player-seek {
  width: 100%;
  accent-color: var(--accent, #4a9eff);
}

.floating-player-time {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--muted, #8b93a3);
}

.floating-player-transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.floating-player-btn-primary {
  background: var(--accent, #4a9eff);
  color: var(--on-accent);
}

.floating-player-volume {
  display: flex;
  align-items: center;
  gap: 8px;
}

.floating-player-volume input[type="range"] {
  flex: 1;
  max-width: 140px;
  accent-color: var(--accent, #4a9eff);
}

.floating-player-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--border, #262b38);
}

.floating-player-option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--text, #e8eaf0);
  cursor: pointer;
}

.floating-player-option input[type="checkbox"] {
  accent-color: var(--accent, #4a9eff);
  width: 14px;
  height: 14px;
}

.floating-player-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  cursor: se-resize;
  background: linear-gradient(135deg, transparent 50%, var(--border, #262b38) 50%);
  border-radius: 0 0 12px 0;
  pointer-events: auto;
}

.floating-player.hidden .floating-player-resize-handle {
  display: none;
}

/* Content cell resize handles for Media/Files/Social Media grids */
.content-cell-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 14px;
  height: 14px;
  cursor: se-resize;
  background: linear-gradient(135deg, transparent 50%, color-mix(in srgb, var(--accent) 60%, var(--border)) 50%);
  border-radius: 0 0 var(--radius) 0;
  pointer-events: auto;
  opacity: 0.6;
  transition: opacity 0.15s ease, background 0.15s ease;
  z-index: 5;
}
.content-cell-resize-handle:hover {
  opacity: 1;
  background: linear-gradient(135deg, transparent 30%, var(--accent) 70%);
}
.photo-card, .social-media-card, .file-card {
  position: relative;
}
.photo-card:has(.content-cell-resize-handle), .social-media-card:has(.content-cell-resize-handle), .file-card:has(.content-cell-resize-handle) {
  min-width: 180px;
  min-height: 140px;
}
@media (max-width: 760px) {
  .content-cell-resize-handle {
    width: 18px;
    height: 18px;
  }
}

/* Grid layout controls — rows/cols selector for all grid views */
.grid-controls { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:6px 0 8px; padding:6px 8px; border:1px solid var(--border); border-radius:var(--radius); background:color-mix(in srgb, var(--bg-raised) 86%, transparent); font-size:0.78rem; }
.grid-controls label { display:inline-flex; align-items:center; gap:4px; font-size:0.78rem; }
.grid-controls select { min-width:72px; padding:3px 6px; border:1px solid var(--border); border-radius:6px; background:var(--bg-inset); color:var(--text); font-size:0.78rem; }
/* Ensure all grid views can show 7+ items with scroll */
.photo-grid, .file-grid, .social-media-card-grid, .media-grid { overflow:auto; max-width:100%; }
.panel-multitask-workspace { overflow:auto; }
#media-body, #files-body, #social-media-body { overflow:auto; max-width:100%; }

/* PiP button state */
.floating-player-btn[aria-pressed="true"] {
  background: var(--accent, #4a9eff);
  color: var(--on-accent);
}

/* Responsive */
@media (max-width: 640px) {
  .floating-player {
    bottom: 12px;
    right: 12px;
    left: 12px;
    max-width: none;
    width: auto;
  }

  .floating-player-body {
    padding: 10px;
  }

  .floating-player-transport {
    gap: 6px;
  }

  .floating-player-btn {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .floating-player-options {
    justify-content: center;
  }
}

/* Floating player minimized state */
.floating-player.minimized .floating-player-body {
  display: none;
}

.floating-player.minimized .floating-player-minimize {
  transform: rotate(180deg);
}

/* Ensure fullscreen dismiss button appears above floating player */
:-webkit-full-screen .fullscreen-dismiss-btn,
:fullscreen .fullscreen-dismiss-btn {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 2147483647;
}

/* ── Reliability pass: responsive + trash/monitor/progress fixes (2026-08-25) ── */

/* Trash banner visibility */
.trash-banner { list-style: none; }

/* Select dropdowns in the nav area — prevent overflow on narrow viewports */
#group-filter, #provider-filter, #model-filter {
  max-width: 110px;
  font-size: 0.72rem;
  padding: 2px 4px;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  #group-filter, #provider-filter, #model-filter { max-width: 90px; }
  .race-row summary { font-size: 0.76rem; }
  .race-grid { grid-template-columns: auto 1fr; gap: 1px 6px; }
  .job-timeline div, .job-attempts div { font-size: 0.72rem; }
  .group-chip { font-size: 0.62rem; padding: 0px 4px; }
}

/* Race monitor rows on narrow screens */
@media (max-width: 480px) {
  .race-grid { font-size: 0.72rem; }
  .primary-nav .nav-tab { padding: 3px 5px; font-size: 0.72rem; }
}

/* ── Model picker (custom dropdown) ─────────────────────────────────────── */
.composer-model .scope-select.hidden-select,
.hidden-select { display: none; }

.model-picker { position: relative; }
.model-picker-btn {
  width: 100%;
  max-width: none;
  height: 36px;
  min-height: 36px;
  padding: 6px 8px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.model-picker-btn::after {
  content: "▾";
  float: right;
  opacity: 0.7;
  font-size: 0.7rem;
  margin-top: 2px;
}

.model-picker-panel {
  /* Fixed viewport coordinates escape the scrollable composer's clipping.
     Keep this node inside Seed options so Sow/Hide still owns visibility. */
  position: fixed;
  z-index: 60;
  left: 50%;
  right: auto;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  background: var(--bg-raised, #1c1d22);
  border: 1px solid var(--border, #33363e);
  border-radius: var(--radius, 10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  padding: 6px;
  width: min(440px, calc(100vw - 24px));
  min-width: min(240px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: min(420px, calc(100dvh - 24px));
  display: flex;
  flex-direction: column;
}

.model-picker-search-row { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.model-picker-search-row .model-picker-search { flex: 1; min-width: 0; margin: 0; min-height: 44px; font-size: 16px; }
#model-picker-close { flex: 0 0 auto; min-height: 44px; }

.model-picker-search {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-inset, #22242a);
  color: var(--text, #eee);
  border: 1px solid var(--border, #33363e);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 0.8rem;
  margin-bottom: 5px;
}

.model-picker-list {
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
}

.model-picker-group-header {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text, #eee);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 6px;
  cursor: pointer;
  text-align: left;
}
.model-picker-group-header::before {
  content: "▾";
  font-size: 0.66rem;
  opacity: 0.8;
}
.model-picker-group-header.collapsed::before { content: "▸"; }
.model-picker-group-count {
  margin-left: auto;
  opacity: 0.55;
  font-size: 0.68rem;
  font-weight: normal;
}

.model-picker-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  cursor: pointer;
}
.model-picker-row:hover { background: var(--bg-inset, #22242a); }
.model-picker-row.selected { outline: 1px solid var(--accent, #4a9eff); }
.model-picker-row.selected .model-picker-row-name::after { content: " ✓"; color: var(--accent, #4a9eff); }
.model-picker-row.disabled { opacity: 0.5; cursor: not-allowed; }

.model-picker-row-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-picker-row-sub { font-size: 0.66rem; opacity: 0.6; white-space: nowrap; }
.model-picker-choice, .model-picker-default {
  min-height: 44px;
  min-width: 0;
  color: inherit;
  background: transparent;
  border: 0;
  text-align: left;
}
.model-picker-choice {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
  padding: 4px 0;
}
.model-picker-default { cursor: pointer; width: 100%; }
.model-picker-choice:focus-visible, .model-picker-default:focus-visible,
.model-picker-star:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.model-picker-default .model-picker-row-name::after { content: " ↔"; color: var(--ok, #3f9d6d); font-weight: 600; }

.model-picker-star {
  background: none;
  border: none;
  color: var(--accent, #4a9eff);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0 2px;
  min-width: 44px;
  min-height: 44px;
}
.model-picker-star.preferred { color: var(--warn, #d9a441); }

.model-picker-empty {
  font-size: 0.76rem;
  opacity: 0.7;
  padding: 8px;
  text-align: center;
}

/* ── Verification job filter + badge ────────────────────────────────────── */
.verification-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  opacity: 0.9;
  white-space: nowrap;
  cursor: pointer;
}
.verification-toggle input { accent-color: var(--warn, #d9a441); }

.badge.verification-badge {
  background: #2b2533;
  color: #c7a5e8;
  border: 1px solid rgba(199, 165, 232, 0.35);
}

.composer-model { position: relative; }

.roadmap-future-ideas { margin-top: 0.75rem; }
.roadmap-future-ideas > h3 { margin-bottom: 0.25rem; }
.roadmap-future-item {
  border-top: 1px solid color-mix(in srgb, var(--border, #59606b) 45%, transparent);
  padding: 0.6rem 0;
}
.roadmap-future-item:first-of-type { border-top: 0; }
.roadmap-future-item p { margin: 0.2rem 0 0; }

/* Super-user Users surface: compact, responsive cards that remain readable
   on the trusted iPad as well as the desktop sidebar layout. */
.users-invite-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.7rem;
  margin: 0.9rem 0;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--bg-raised) 86%, transparent);
}

.users-mail-card {
  display: grid;
  gap: 0.55rem;
  margin: 0.8rem 0 1rem;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--bg-raised) 86%, transparent);
}

.users-mail-card .settings-subheader {
  margin: 0;
}

.users-mail-card p {
  margin: 0;
  max-width: 68ch;
}
.users-field { display: grid; flex: 1 1 12rem; gap: 0.35rem; min-width: 0; font-size: 0.76rem; color: var(--muted); }
.users-field input {
  width: 100%; min-width: 0; min-height: 2.75rem; box-sizing: border-box;
  padding: 0.55rem 0.65rem; border: 1px solid var(--border); border-radius: 0.65rem;
  font: inherit; font-size: 1rem; color: var(--text); background: var(--bg);
}
.users-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.users-invite-form button { min-height: 2.75rem; max-width: 100%; margin-inline-start: auto; white-space: normal; }
.users-test-toggle { display: inline-flex; align-items: center; gap: 0.45rem; width: max-content; max-width: 100%; margin: 0.3rem 0 0; color: var(--muted); font-size: 0.78rem; cursor: pointer; }
.users-test-toggle input { accent-color: var(--accent); }
.users-user-card { display: grid; gap: 0.25rem; }
.users-user-card .settings-subheader { align-items: center; gap: 0.5rem; }
.users-user-card h3 { min-width: 0; overflow-wrap: anywhere; }
.users-user-card .badge { margin-left: auto; }
.user-status-active { color: var(--ok, #54c58b); }
.user-status-invited { color: var(--warn, #d9a441); }
.user-status-signed-out { color: var(--muted); }
.user-status-revoked { color: var(--muted); }
.limits-body { display: grid; gap: 1rem; }
.limits-group { display: grid; gap: 0.55rem; }
.limits-group > h3 { margin: 0; font-size: 0.9rem; }
.limits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.7rem;
}
.limit-card { border-color: var(--border); }
.limit-card h4 { margin: 0; font-size: 0.86rem; }
.limit-description { min-height: 2.6em; font-size: 0.76rem; }
.limit-field { display: grid; gap: 0.3rem; font-size: 0.74rem; color: var(--muted); }
.limit-input-wrap { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.limit-input-wrap input { width: 100%; min-width: 0; flex: 1 1 auto; }
.limit-unit { flex: 0 0 auto; font-size: 0.76rem; }
.limit-meta { font-size: 0.68rem; overflow-wrap: anywhere; }
.limit-actions { flex-wrap: wrap; }
@media (max-width: 680px) {
  .users-invite-form { flex-direction: column; align-items: stretch; }
  .users-invite-form .users-field { flex-basis: auto; }
  .users-invite-form button { margin-inline-start: 0; }
}
/* Read-only infrastructure facts wrap at phone widths without a wide table. */
.infrastructure-provider { padding: 0.6rem 0; overflow-wrap: anywhere; }
.infrastructure-provider + .infrastructure-provider { border-top: 1px solid var(--border); }
.infrastructure-provider h4 { margin: 0 0 0.35rem; }
.infrastructure-provider p { margin: 0.35rem 0; }
#migration-panel { min-width: 0; }
#migration-panel input[type="file"] { max-width: 100%; }
#migration-panel .migration-source-card { padding: .8rem; border: 1px solid var(--border); border-radius: .75rem; min-width: 0; }
#migration-panel .migration-source-heading { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
#migration-panel .migration-source-heading strong { flex: 1 1 10rem; min-width: 0; }
#migration-panel :is(.migration-source-card, .migration-warning, #migration-status) { overflow-wrap: anywhere; }

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 0.75rem;
  align-items: start;
  min-height: 24rem;
}
.dashboard-card {
  min-width: 0;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--bg-raised) 88%, transparent);
  box-shadow: 0 0.35rem 1.2rem color-mix(in srgb, var(--accent) 8%, transparent);
}
.dashboard-card h3 { margin: 0 0 0.45rem; color: var(--accent); font-size: 0.9rem; }
.dashboard-card-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.dashboard-card-body > div + div { border-top: 1px solid var(--border); margin-top: 0.35rem; padding-top: 0.35rem; }

/* One corner setting for tab content, chips and their controls. */
:is(button, .nav-tab, .mode-btn, .ghost-btn, .primary-btn, .composer-collapse-btn, .scope-select, .panel, .settings-panel, .mw-window, .multi-window-controls, .navigation-dock, .lime-swipe-surface, .multi-history-row) { border-radius: var(--radius); }

/* Match the selected Multi tab's 2px edge without changing layout on focus.
   Borderless surfaces remain borderless; selection changes colour only. */
html:root { --etti-border-width: 2px; }
body :where(*) {
  border-width: var(--etti-border-width) !important;
}
body .panel-multitask-workspace > .mw-window {
  --fruit-panel-border-color: var(--fruit-open-border);
  border-color: var(--fruit-open-border);
}
body .panel-multitask-workspace > .mw-window.mw-focused {
  --fruit-panel-border-color: var(--fruit-focused-border);
  border-color: var(--fruit-focused-border);
  outline-color: var(--fruit-focused-border);
}
.brand-update-label { font-size: .65rem; line-height: 1.1; color: var(--accent); border-top: 2px solid currentColor; padding-top: 2px; }
.brand-update-label[hidden] { display: none; }
.brand-update-ready { outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent); outline-offset: 2px; }
.offline-data-settings { display:grid; gap:.6rem; margin:0 0 1rem; padding:.8rem; border:1px solid var(--border); border-radius:var(--radius); background:color-mix(in srgb,var(--bg-raised) 35%,transparent); }
.offline-data-settings h3,.offline-data-settings p { margin:.15rem 0; }
.offline-data-settings > select { width:100%; }
.offline-cache-all { display:flex; align-items:center; gap:.45rem; font-weight:700; }
.offline-cache-families { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:.35rem; max-height:15rem; overflow:auto; padding:.2rem; }
.offline-cache-family { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:.45rem; padding:.45rem; border:1px solid var(--fruit-open-border); border-radius:var(--radius); min-width:0; }
.offline-cache-family input { margin:.2rem 0 0; }
.offline-cache-family span { min-width:0; overflow-wrap:anywhere; }
.offline-cache-family small { display:block; color:var(--muted); font-weight:400; }
.offline-cache-progress { display:block; width:100%; height:.7rem; accent-color:var(--fruit-focused-border); }
.brand-cache-fill { --etti-cache-progress:0%; position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; clip-path:inset(calc(100% - var(--etti-cache-progress)) 0 0 0); transition:clip-path .22s linear; }
.brand-cache-fill > :is(h1,strong),
.brand-cache-fill > .brand-slogan { color:#35ca71 !important; }
.brand-cache-complete .brand-cache-fill { filter:drop-shadow(0 0 4px color-mix(in srgb,#35ca71 42%,transparent)); }

/* Stable Fruit states: default pink, opened background yellow, focused green. */
html { --fruit-default-border:color-mix(in srgb,var(--accent) 82%,white); --fruit-open-border:#efd35b; --fruit-focused-border:#62df8a; }
body :is(.nav-tab,.tabs-chip,.settings-panel,.public-entry-ministry) { border-color:var(--fruit-default-border) !important; }
body .nav-tab.nav-tab-active { border-color:var(--fruit-open-border) !important; }
body .nav-tab.nav-tab-focused,
body.single-tab-active:not(.panel-multitasking) .settings-panel:not(.hidden),
body .panel-multitask-workspace > .mw-window.mw-focused { border-color:var(--fruit-focused-border) !important; }
body.single-tab-active:not(.panel-multitasking) .settings-panel:not(.hidden),
body .panel-multitask-workspace > .mw-window:not(.mw-focused) { --fruit-panel-border-color:var(--fruit-open-border); }
body.single-tab-active:not(.panel-multitasking) .settings-panel:not(.hidden),
body .panel-multitask-workspace > .mw-window.mw-focused { --fruit-panel-border-color:var(--fruit-focused-border); }

/* Bordered content cards throughout each Fruit follow its outer state. */
body .settings-panel .panel,
body .panel-multitask-workspace > .mw-window .panel {
  border-color:var(--fruit-panel-border-color,var(--fruit-focused-border)) !important;
}

body .nav-tab:is(.nav-tab-active,.nav-tab-focused) {box-shadow:none !important;}

body .panel-multitask-workspace > .mw-window:not(.mw-focused) {border-color:var(--fruit-open-border) !important;}
.production-fruit-choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:8px; min-width:0; margin:12px 0; padding:12px; border:2px solid var(--fruit-default-border); border-radius:var(--radius); }
.production-fruit-choice { display:flex; align-items:center; gap:8px; min-width:0; padding:8px; border:2px solid var(--fruit-open-border); border-radius:var(--radius); overflow-wrap:anywhere; }
.production-fruit-choice.is-selected { border-color:var(--fruit-focused-border); }
.production-fruit-icon { display:inline-grid; flex:none; width:1.25em; place-items:center; line-height:1; font-size:1.05em; }
.production-fruit-fixed { border-color:var(--fruit-focused-border); border-style:dashed; cursor:not-allowed; }
.production-fruit-fixed input { opacity:1; }
.production-fruit-release { border-color:var(--fruit-focused-border); }
.production-release-status { min-height:1.4em; overflow-wrap:anywhere; }
.production-fruit-choice input { flex:none; accent-color:var(--fruit-focused-border); }

/* Tours are collapsed by default and keep their list choices local. */
.tours-workspace { min-width: 0; }
.tour-controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-block-end: 10px; }
.tour-controls input { min-width: 120px; flex: 1 1 180px; }
.tour-controls select { max-width: 100%; }
.tour-list { display: grid; gap: 8px; min-width: 0; }
.tour-category { min-width: 0; margin: 0; }
.tour-items { display: grid; gap: 8px; margin-block-start: 8px; }
.tour-list[data-layout="grid"] .tour-items { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.tour-list[data-layout="horizontal"] .tour-items { display: flex; overflow-x: auto; scroll-snap-type: x proximity; }
.tour-list[data-layout="horizontal"] .tour-item { flex: 0 0 min(300px, 90%); scroll-snap-align: start; }
.tour-item { min-width: 0; overflow-wrap: anywhere; }
.tour-item summary, .tour-category > summary { cursor: pointer; }
.tour-guide { margin-block-end: 12px; }
.tour-guide .actions { flex-wrap: wrap; }
.tour-target-highlight { outline: 2px solid #efd35b !important; outline-offset: 2px; }

/* Text-entry and selection controls show their Fruit state before pointer hover. */
:root[data-palette] body .settings-panel :is(select,textarea,[role="combobox"],[contenteditable="true"],input:not([type="checkbox"],[type="radio"],[type="range"],[type="color"],[type="file"],[type="button"],[type="submit"],[type="reset"],[type="hidden"])):not([aria-invalid="true"]),
:root[data-palette] body .panel-multitask-workspace > .mw-window :is(select,textarea,[role="combobox"],[contenteditable="true"],input:not([type="checkbox"],[type="radio"],[type="range"],[type="color"],[type="file"],[type="button"],[type="submit"],[type="reset"],[type="hidden"])):not([aria-invalid="true"]) {
  border-color:var(--fruit-panel-border-color,var(--fruit-open-border,#efd35b)) !important;
}

/* NLCB list and almanac surfaces share the selected list layout. */
.nlcb-calendar-feed { min-width: 0; max-width: 100%; }
.nlcb-calendar-pages { display: grid; grid-template-columns: 1fr; gap: 16px; min-width: 0; }
.nlcb-calendar-month { min-width: 0; }
.nlcb-calendar-month > h3 { margin: 8px 0; }
.nlcb-calendar-days { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: start; }
.nlcb-calendar-feed[data-layout="grid"][data-view="list"] .nlcb-calendar-days { grid-template-columns: repeat(auto-fit,minmax(min(280px,100%),1fr)); }
.nlcb-calendar-feed[data-layout="horizontal"] .nlcb-calendar-pages { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(min(640px,90vw),1fr); overflow-x: auto; }
.nlcb-calendar-date { min-width: 0; border: 1px solid var(--fruit-panel-border-color,var(--border)); border-radius: 8px; padding: 6px; overflow-wrap: anywhere; }
.nlcb-calendar-date > summary { white-space: normal; }
.nlcb-calendar-date-heading { display: block; font-weight: 600; }
.nlcb-calendar-preview { display: grid; gap: 4px; margin-top: 5px; font-size: .78rem; }
.nlcb-calendar-preview > span { display: block; }
.nlcb-calendar-game { margin-top: 6px; min-width: 0; }
.nlcb-calendar-game p { overflow-wrap: anywhere; white-space: normal; }
.nlcb-calendar-weekdays { display: none; }
.nlcb-calendar-feed[data-view="almanac"] .nlcb-calendar-weekdays { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 5px; text-align: center; font-size: .75rem; }
.nlcb-calendar-feed[data-view="almanac"] .nlcb-calendar-days { grid-template-columns: repeat(7,minmax(140px,1fr)); gap: 5px; }
.nlcb-calendar-feed[data-view="almanac"] .nlcb-calendar-month { overflow-x: auto; }
.nlcb-calendar-feed.nlcb-list-fit[data-view="almanac"] .nlcb-calendar-days { grid-template-columns: repeat(7,minmax(0,1fr)); }
.nlcb-calendar-date.nlcb-future-date { opacity: .65; }
.nlcb-calendar-feed.nlcb-list-fit { overflow: auto; overscroll-behavior: contain; }
.nlcb-game-grid.nlcb-list-fit > section { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.nlcb-game-grid.nlcb-list-fit > section > h3 { margin: 3px 0; }
.nlcb-game-grid.nlcb-list-fit [role="list"] { overflow: auto; min-height: 0; overscroll-behavior: contain; }

.nlcb-calendar-feed[data-layout="grid"][data-view="almanac"] .nlcb-calendar-pages { grid-template-columns: repeat(auto-fit,minmax(min(700px,100%),1fr)); }
.nlcb-calendar-feed[data-view="almanac"] .nlcb-calendar-weekdays { grid-template-columns: repeat(7,minmax(140px,1fr)); }
.nlcb-calendar-feed.nlcb-list-fit[data-view="almanac"] .nlcb-calendar-weekdays { grid-template-columns: repeat(7,minmax(0,1fr)); }