/* ── Sidebar responsive ──────────────────────────────────────────────────── */
@media (min-width: 641px) { #hamburger { display: none !important; } }
@media (max-width: 640px) {
  #sidebar {
    position: fixed;
    top: calc(44px + env(safe-area-inset-top, 0px));
    left: 0;
    bottom: 0;
    width: min(86vw, 22rem) !important;
    min-width: min(86vw, 22rem) !important;
    max-width: min(86vw, 22rem) !important;
    transform: translateX(-103%); z-index: 10;
    transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overscroll-behavior: contain;
  }
  #sidebar.open { transform: translateX(0); box-shadow: 4px 0 20px rgba(0,0,0,.4); }

  /* Compact chat composer on phones — less height, less dead space under bar */
  #composer-row { padding: 0 !important; }
  .composer-surface { min-height: 0; border-radius: 0.8rem; }
  #chat-input.chat-input,
  #chat-input {
    min-height: 32px !important;
    max-height: 72px !important;
    padding: 0 !important;
    border-radius: 0.65rem 0.65rem 0 0;
    /* 16px prevents iOS Safari auto-zoom on focus */
    font-size: 16px !important;
    line-height: 1.4 !important;
  }
  .composer-icon-btn { width: 40px; height: 40px; font-size: 19px; }
  .composer-send-btn, .composer-stop-btn { min-height: 40px; height: 40px; }
  .composer-hint { display: none; }
  #chat-opts {
    padding-top: 0.35rem !important;
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important;
    gap: 0.35rem !important;
  }
  #scroll-nav {
    bottom: 4.5rem !important;
  }
  /* File list actions always visible on touch (no hover) */
  .file-row-action {
    opacity: 1 !important;
  }

  /* Tighter chrome so the thread is the product */
  #topbar-project { display: none; }
  #project-view > .flex.bg-base-200 { /* tab strip */
    min-height: 40px;
  }
  #project-view [data-tab] {
    padding: 0.55rem 0.85rem !important;
    font-size: 13px !important;
  }
  #project-notes-bar,
  #session-notes-bar {
    font-size: 11px;
    padding: 0.35rem 0.7rem !important;
  }
  #messages {
    padding: 0.65rem 0.45rem !important;
    gap: 0.55rem !important;
  }
  .msg-row { gap: 3px; }
  .msg-row.assistant > div:not(.msg-ts),
  .msg-row.error > div:not(.msg-ts) {
    max-width: 100% !important;
    border-radius: 1rem !important;
    border-top-left-radius: 0.3rem !important;
  }
  .msg-row.user > div:not(.msg-ts) {
    max-width: 88% !important;
    border-radius: 1rem !important;
    border-top-right-radius: 0.3rem !important;
  }
  #sidebar-resize,
  #sidebar-toggle {
    display: none !important;
  }
  #sidebar .input,
  #sidebar .select {
    min-height: 2.25rem;
    font-size: 16px !important; /* prevents Safari focus zoom */
  }
  #sidebar #time-range { font-size: 12px !important; }
  #sidebar #session-list {
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
  }
  #sidebar [data-view],
  #sidebar .agent-pill {
    min-height: 28px;
  }
  #sidebar .sidebar-mobile-actions {
    display: flex;
    gap: 0.35rem;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
  }
  .md {
    font-size: 0.9375rem;
    line-height: 1.6;
  }
  .md h1, .md h2, .md h3 {
    font-size: 1.02em !important;
    padding: 0.05em 0 0.15em 0.45em !important;
    border-left-width: 3px !important;
    background: none !important;
    border-bottom: none !important;
    margin: 0.7em 0 0.35em !important;
  }
  .md :not(pre) > code {
    white-space: nowrap;
    display: inline;
    font-size: 0.82em;
    padding: 0.08em 0.32em;
  }
  .token-bar {
    font-size: 10px;
    line-height: 1.45;
    padding: 0.15rem 0.45rem;
  }
}

@media (min-width: 641px) {
  #sidebar .sidebar-mobile-actions { display: none !important; }
  #sidebar {
    transition: width .18s ease, min-width .18s ease;
  }
  #sidebar.desktop-collapsed {
    border-right-color: transparent;
  }
}

/* File row actions: hover-reveal on desktop only */
@media (min-width: 641px) {
  .file-row-action {
    opacity: 0;
  }
  .group:hover .file-row-action,
  .group:focus-within .file-row-action {
    opacity: 1;
  }
}

/*
 * Safe areas (PWA + mobile Safari with viewport-fit=cover):
 * Do NOT pad the whole body (that leaves a dead empty strip under the chat bar).
 * Paint chrome into the insets; only inset interactive content.
 */
html, body {
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}
/* iOS keyboard: shrink the app to the visual viewport so the composer
 * sits above the keyboard instead of floating over Safari chrome. */
html.vv-keyboard,
html.vv-keyboard body {
  height: var(--vvh, 100dvh);
  max-height: var(--vvh, 100dvh);
}
html.vv-keyboard body {
  position: fixed;
  top: var(--vv-top, 0px);
  left: 0;
  right: 0;
  width: 100%;
}
html.pwa-standalone,
html.pwa-standalone body {
  background: oklch(var(--b1));
}
/* Top bar: extend under status bar, push content below notch */
html.pwa-standalone #topbar {
  padding-top: env(safe-area-inset-top, 0px);
  min-height: calc(44px + env(safe-area-inset-top, 0px));
  height: auto !important;
  padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
}
/*
 * Chat composer: background fills home-indicator inset.
 * Inner #composer-row already has small padding; only add safe-area beyond that
 * so we don't stack large empty strips under the input.
 */
#chat-form {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
#chat-composer {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
html.vv-keyboard #chat-composer {
  padding-bottom: 0;
}
/* Welcome / machine picker full-screen panels */
html.pwa-standalone #welcome,
html.pwa-standalone #machine-picker {
  padding-top: max(1rem, env(safe-area-inset-top, 0px));
  padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  padding-left: max(1rem, env(safe-area-inset-left, 0px));
  padding-right: max(1rem, env(safe-area-inset-right, 0px));
}
/* Meta agent drawer bottom */
html.pwa-standalone #meta-agent-panel,
html.pwa-standalone .ma-panel {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

#conn-dot {
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-base-200) 80%, transparent);
}

/* ── Theme-aware code / tool surfaces ────────────────────────────────────── */
/* Prefer DaisyUI tokens so light/dark both look intentional — no #0d1117 hardcode. */
.code-surface {
  background: color-mix(in oklch, oklch(var(--bc)) 6%, oklch(var(--b1)));
  color: oklch(var(--bc) / 0.88);
  border: 1px solid oklch(var(--b3));
}
[data-theme="dark"] .code-surface,
[data-theme="night"] .code-surface,
[data-theme="black"] .code-surface {
  background: color-mix(in oklch, oklch(var(--b1)) 70%, black);
  color: oklch(var(--bc) / 0.9);
}

/* ── Markdown rendering (DaisyUI 5: use --color-* full oklch values) ──────── */
/* NOTE: DaisyUI 5 does NOT use --p/--bc components. Colors are already oklch(...). */
.md {
  line-height: 1.65;
  font-size: 0.9375rem;
  color: color-mix(in oklch, var(--color-base-content) 92%, transparent);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.md > :first-child { margin-top: 0 !important; }
.md > :last-child  { margin-bottom: 0 !important; }

/* Headings — force size/weight over DaisyUI base reset, colorful accents */
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 {
  font-weight: 700 !important;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 1.15em 0 0.5em;
  scroll-margin-top: 0.5rem;
}
.md h1 {
  font-size: 1.38em !important;
  color: var(--color-primary) !important;
  padding: 0.15em 0 0.4em 0.7em;
  border-left: 4px solid var(--color-primary);
  border-bottom: 1px solid color-mix(in oklch, var(--color-primary) 30%, transparent);
  background: linear-gradient(
    90deg,
    color-mix(in oklch, var(--color-primary) 14%, transparent),
    transparent 72%
  );
  border-radius: 0 6px 0 0;
}
.md h2 {
  font-size: 1.2em !important;
  color: var(--color-secondary) !important;
  padding: 0.1em 0 0.3em 0.65em;
  border-left: 3px solid var(--color-secondary);
  border-bottom: 1px dashed color-mix(in oklch, var(--color-secondary) 35%, transparent);
  background: linear-gradient(
    90deg,
    color-mix(in oklch, var(--color-secondary) 12%, transparent),
    transparent 68%
  );
}
.md h3 {
  font-size: 1.08em !important;
  color: var(--color-accent) !important;
  padding-left: 0.55em;
  border-left: 3px solid var(--color-accent);
}
.md h4 {
  font-size: 1em !important;
  color: var(--color-info) !important;
  padding-left: 0.45em;
  border-left: 2px solid var(--color-info);
}
.md h5 {
  font-size: 0.88em !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-success) !important;
}
.md h6 {
  font-size: 0.82em !important;
  font-weight: 650 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-warning) !important;
}

.md p { margin: 0.55em 0; }

/* Inline emphasis */
.md strong {
  font-weight: 750 !important;
  color: color-mix(in oklch, var(--color-warning) 55%, var(--color-base-content)) !important;
}
.md em {
  font-style: italic;
  color: color-mix(in oklch, var(--color-secondary) 45%, var(--color-base-content)) !important;
}
.md strong em,
.md em strong {
  color: color-mix(in oklch, var(--color-primary) 60%, var(--color-base-content)) !important;
}
.md s, .md del {
  color: var(--color-error) !important;
  text-decoration-color: color-mix(in oklch, var(--color-error) 60%, transparent);
  opacity: 0.85;
}
.md mark {
  background: color-mix(in oklch, var(--color-warning) 40%, transparent);
  color: var(--color-base-content);
  padding: 0.05em 0.25em;
  border-radius: 3px;
}

/* Lists — DaisyUI sets list-style:none globally */
.md ul, .md ol {
  margin: 0.5em 0;
  padding-left: 1.5em !important;
}
.md ul { list-style-type: disc !important; }
.md ol { list-style-type: decimal !important; }
.md li { margin: 0.28em 0; padding-left: 0.15em; display: list-item; }
.md li > ul, .md li > ol { margin: 0.2em 0; }
.md ul > li::marker { color: var(--color-primary); }
.md ol > li::marker {
  color: var(--color-secondary);
  font-weight: 700;
}
.md ul ul > li::marker { color: var(--color-accent); }
.md ul ul ul > li::marker { color: var(--color-success); }
.md ul.contains-task-list,
.md ul.task-list {
  list-style: none !important;
  padding-left: 0.2em !important;
}
.md li.task-list-item,
.md li:has(> input[type="checkbox"]) {
  list-style: none !important;
  display: flex;
  align-items: flex-start;
  gap: 0.45em;
}
.md input[type="checkbox"] {
  margin-top: 0.35em;
  accent-color: var(--color-success);
  flex-shrink: 0;
}

/* Inline code */
.md :not(pre) > code {
  font-family: ui-monospace, SFMono-Regular, "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 0.86em;
  font-weight: 600;
  padding: 0.12em 0.4em;
  border-radius: 4px;
  background: color-mix(in oklch, var(--color-primary) 16%, var(--color-base-200));
  color: color-mix(in oklch, var(--color-primary) 75%, var(--color-base-content));
  border: 1px solid color-mix(in oklch, var(--color-primary) 28%, transparent);
  white-space: break-spaces;
}

/* Fenced code block */
.md .code-block {
  margin: 0.75em 0;
  border-radius: 8px;
  border: 1px solid color-mix(in oklch, var(--color-primary) 18%, var(--color-base-300));
  background: color-mix(in oklch, var(--color-base-content) 4%, var(--color-base-100));
  overflow: hidden;
}
[data-theme="dark"] .md .code-block,
[data-theme="night"] .md .code-block,
[data-theme="black"] .md .code-block {
  background: color-mix(in oklch, var(--color-base-100) 70%, black);
  border-color: color-mix(in oklch, var(--color-primary) 22%, transparent);
}
.md .code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0.65rem;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
  background: linear-gradient(
    90deg,
    color-mix(in oklch, var(--color-primary) 14%, transparent),
    color-mix(in oklch, var(--color-accent) 8%, transparent) 55%,
    transparent
  );
  border-bottom: 1px solid color-mix(in oklch, var(--color-primary) 20%, transparent);
  user-select: none;
}
.md .code-block-lang {
  text-transform: lowercase;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--color-primary);
}
.md .code-copy {
  appearance: none;
  border: 1px solid color-mix(in oklch, var(--color-primary) 30%, transparent);
  background: color-mix(in oklch, var(--color-primary) 10%, var(--color-base-200));
  color: var(--color-primary);
  border-radius: 4px;
  padding: 0.1rem 0.45rem;
  font-size: 10px;
  line-height: 1.4;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.md .code-copy:hover {
  color: var(--color-primary-content);
  border-color: var(--color-primary);
  background: var(--color-primary);
}
.md .code-copy.copied {
  color: var(--color-success);
  border-color: color-mix(in oklch, var(--color-success) 50%, transparent);
  background: color-mix(in oklch, var(--color-success) 14%, transparent);
}
.md .code-block pre {
  margin: 0 !important;
  padding: 0.75rem 0.85rem !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow-x: auto;
  line-height: 1.55;
}
.md pre {
  margin: 0.75em 0;
  padding: 0.75rem 0.85rem;
  border-radius: 8px;
  border: 1px solid color-mix(in oklch, var(--color-base-content) 12%, transparent);
  background: color-mix(in oklch, var(--color-base-content) 5%, var(--color-base-100));
  color: color-mix(in oklch, var(--color-base-content) 92%, transparent);
  overflow-x: auto;
  line-height: 1.55;
}
[data-theme="dark"] .md pre,
[data-theme="night"] .md pre,
[data-theme="black"] .md pre {
  background: color-mix(in oklch, var(--color-base-100) 65%, black);
}
.md pre code {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-size: 0.84em;
  font-family: ui-monospace, SFMono-Regular, "Cascadia Code", Menlo, Consolas, monospace;
  color: inherit;
  white-space: pre;
}
.md pre code.hljs { background: transparent !important; }

/* Syntax highlight tokens */
.md pre .hljs-comment,
.md pre .hljs-quote {
  color: color-mix(in oklch, var(--color-base-content) 42%, transparent);
  font-style: italic;
}
.md pre .hljs-keyword,
.md pre .hljs-selector-tag,
.md pre .hljs-meta .hljs-keyword {
  color: #7c3aed;
  font-weight: 600;
}
[data-theme="dark"] .md pre .hljs-keyword,
[data-theme="night"] .md pre .hljs-keyword,
[data-theme="black"] .md pre .hljs-keyword { color: #c792ea; }
.md pre .hljs-string,
.md pre .hljs-attr,
.md pre .hljs-template-tag { color: #15803d; }
[data-theme="dark"] .md pre .hljs-string,
[data-theme="night"] .md pre .hljs-string { color: #c3e88d; }
.md pre .hljs-number,
.md pre .hljs-built_in,
.md pre .hljs-literal { color: #c2410c; }
[data-theme="dark"] .md pre .hljs-number,
[data-theme="night"] .md pre .hljs-number { color: #f78c6c; }
.md pre .hljs-title,
.md pre .hljs-section,
.md pre .hljs-function .hljs-title { color: #1d4ed8; }
[data-theme="dark"] .md pre .hljs-title,
[data-theme="night"] .md pre .hljs-title { color: #82aaff; }
.md pre .hljs-type,
.md pre .hljs-class .hljs-title { color: #0e7490; }
[data-theme="dark"] .md pre .hljs-type { color: #ffcb6b; }
.md pre .hljs-variable,
.md pre .hljs-template-variable,
.md pre .hljs-params {
  color: color-mix(in oklch, var(--color-base-content) 88%, transparent);
}
.md pre .hljs-addition {
  color: var(--color-success);
  background: color-mix(in oklch, var(--color-success) 14%, transparent);
}
.md pre .hljs-deletion {
  color: var(--color-error);
  background: color-mix(in oklch, var(--color-error) 14%, transparent);
}

/* Files tab: full-file preview with highlight.js */
.file-preview {
  background: color-mix(in oklch, var(--color-base-content) 4%, var(--color-base-100));
  color: color-mix(in oklch, var(--color-base-content) 92%, transparent);
}
[data-theme="dark"] .file-preview,
[data-theme="night"] .file-preview,
[data-theme="black"] .file-preview {
  background: color-mix(in oklch, var(--color-base-100) 65%, black);
}
.file-preview code.hljs,
.file-preview code.file-preview-code {
  display: block;
  padding: 0 !important;
  background: transparent !important;
  font-family: ui-monospace, SFMono-Regular, "Cascadia Code", Menlo, Consolas, monospace;
  font-size: inherit;
  color: inherit;
  white-space: pre;
  overflow-x: auto;
}
/* Reuse chat token palette outside .md so file preview is colored even if CDN theme lags */
.file-preview .hljs-comment,
.file-preview .hljs-quote {
  color: color-mix(in oklch, var(--color-base-content) 42%, transparent);
  font-style: italic;
}
.file-preview .hljs-keyword,
.file-preview .hljs-selector-tag,
.file-preview .hljs-meta .hljs-keyword {
  color: #7c3aed;
  font-weight: 600;
}
[data-theme="dark"] .file-preview .hljs-keyword,
[data-theme="night"] .file-preview .hljs-keyword,
[data-theme="black"] .file-preview .hljs-keyword { color: #c792ea; }
.file-preview .hljs-string,
.file-preview .hljs-attr,
.file-preview .hljs-template-tag { color: #15803d; }
[data-theme="dark"] .file-preview .hljs-string,
[data-theme="night"] .file-preview .hljs-string { color: #c3e88d; }
.file-preview .hljs-number,
.file-preview .hljs-built_in,
.file-preview .hljs-literal { color: #c2410c; }
[data-theme="dark"] .file-preview .hljs-number,
[data-theme="night"] .file-preview .hljs-number { color: #f78c6c; }
.file-preview .hljs-title,
.file-preview .hljs-section,
.file-preview .hljs-function .hljs-title { color: #1d4ed8; }
[data-theme="dark"] .file-preview .hljs-title,
[data-theme="night"] .file-preview .hljs-title { color: #82aaff; }
.file-preview .hljs-type,
.file-preview .hljs-class .hljs-title { color: #0e7490; }
[data-theme="dark"] .file-preview .hljs-type { color: #ffcb6b; }
.file-preview .hljs-variable,
.file-preview .hljs-template-variable,
.file-preview .hljs-params {
  color: color-mix(in oklch, var(--color-base-content) 88%, transparent);
}
.file-preview .hljs-addition {
  color: var(--color-success);
  background: color-mix(in oklch, var(--color-success) 14%, transparent);
}
.file-preview .hljs-deletion {
  color: var(--color-error);
  background: color-mix(in oklch, var(--color-error) 14%, transparent);
}

/* ── Office file previews (docx / xlsx / pptx) ─────────────────────────────── */
.office-preview {
  min-height: 0;
}
.office-docx-body {
  max-width: 52rem;
  margin: 0 auto;
  line-height: 1.65;
  font-size: 0.9375rem;
}
.office-docx-body p { margin: 0.55em 0; }
.office-docx-body h1, .office-docx-body h2, .office-docx-body h3 {
  font-weight: 700;
  margin: 1em 0 0.4em;
  line-height: 1.3;
}
.office-docx-body h1 { font-size: 1.4em; }
.office-docx-body h2 { font-size: 1.2em; }
.office-docx-body h3 { font-size: 1.05em; }
.office-docx-body ul, .office-docx-body ol {
  margin: 0.5em 0;
  padding-left: 1.4em;
}
.office-docx-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.75em 0;
  font-size: 0.88em;
}
.office-docx-body td, .office-docx-body th {
  border: 1px solid color-mix(in oklch, var(--color-base-content) 18%, transparent);
  padding: 0.35em 0.55em;
}
.office-docx-body img {
  max-width: 100%;
  height: auto;
}
.office-warn {
  border-bottom: 1px solid color-mix(in oklch, var(--color-warning) 30%, transparent);
  margin: -1rem -1rem 0.75rem;
  padding: 0.4rem 1rem;
  background: color-mix(in oklch, var(--color-warning) 10%, transparent);
}

.office-sheet-tab {
  appearance: none;
  border: 1px solid color-mix(in oklch, var(--color-base-content) 14%, transparent);
  background: color-mix(in oklch, var(--color-base-content) 4%, var(--color-base-100));
  color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
  border-radius: 6px;
  padding: 0.2rem 0.65rem;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.office-sheet-tab:hover { border-color: var(--color-primary); color: var(--color-primary); }
.office-sheet-tab.active {
  background: color-mix(in oklch, var(--color-primary) 16%, transparent);
  border-color: color-mix(in oklch, var(--color-primary) 45%, transparent);
  color: var(--color-primary);
  font-weight: 600;
}
.office-sheet-body table {
  border-collapse: collapse;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  width: max-content;
  min-width: 100%;
}
.office-sheet-body td, .office-sheet-body th {
  border: 1px solid color-mix(in oklch, var(--color-base-content) 14%, transparent);
  padding: 0.2rem 0.45rem;
  white-space: pre;
  max-width: 20rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.office-sheet-body th,
.office-sheet-body tr:first-child td {
  background: color-mix(in oklch, var(--color-primary) 8%, var(--color-base-200));
  font-weight: 600;
}

.office-slide-card {
  border: 1px solid color-mix(in oklch, var(--color-base-content) 12%, transparent);
  border-radius: 10px;
  background: color-mix(in oklch, var(--color-base-content) 3%, var(--color-base-100));
  overflow: hidden;
}
.office-slide-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
  padding: 0.35rem 0.75rem;
  border-bottom: 1px solid color-mix(in oklch, var(--color-primary) 18%, transparent);
  background: color-mix(in oklch, var(--color-primary) 8%, transparent);
}
.office-slide-body {
  padding: 0.75rem 0.9rem;
  font-size: 0.9rem;
  line-height: 1.55;
}
.office-slide-body p { margin: 0.35em 0; }

.office-pdf-figure {
  margin: 0 auto;
  max-width: 100%;
  text-align: center;
}
.office-pdf-cap {
  font-size: 10px;
  color: color-mix(in oklch, var(--color-base-content) 45%, transparent);
  margin-bottom: 0.35rem;
  font-family: ui-monospace, Menlo, monospace;
}
.office-pdf-page {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid color-mix(in oklch, var(--color-base-content) 12%, transparent);
  box-shadow: 0 4px 18px color-mix(in oklch, black 18%, transparent);
  background: white;
}

/* Session list: favorites + thin (low-turn) markers */
.session-fav-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: color-mix(in oklch, var(--color-base-content) 35%, transparent);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  padding: 0 1px;
}
.session-fav-btn:hover { color: #eab308; }
.session-fav-btn.is-fav { color: #eab308; }
.session-row.session-fav { background: color-mix(in oklch, #eab308 6%, transparent); }
.session-row.session-thin {
  opacity: 0.88;
}
.session-thin-badge {
  font-size: 9px;
  font-family: ui-monospace, Menlo, monospace;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0 4px;
  border-radius: 3px;
  color: color-mix(in oklch, var(--color-warning) 90%, var(--color-base-content));
  background: color-mix(in oklch, var(--color-warning) 18%, transparent);
  border: 1px solid color-mix(in oklch, var(--color-warning) 35%, transparent);
}
.session-note-dot { font-size: 10px; opacity: 0.85; }
.session-renamed-badge {
  font-size: 9px;
  color: color-mix(in oklch, var(--color-primary) 80%, var(--color-base-content));
  opacity: 0.9;
}
.session-title-renamed { font-style: normal; }
.session-rename-btn,
.session-hide-btn {
  appearance: none;
  border: none;
  background: transparent;
  font-size: 10px;
  line-height: 1;
  padding: 1px 3px;
  border-radius: 4px;
  color: color-mix(in oklch, var(--color-base-content) 35%, transparent);
  opacity: 0;
  cursor: pointer;
  transition: opacity .12s, color .12s, background .12s;
}
.session-row:hover .session-rename-btn,
.session-row:focus-within .session-rename-btn,
.session-row:hover .session-hide-btn,
.session-row:focus-within .session-hide-btn,
#session-notes-bar .session-rename-btn,
#session-notes-bar .session-hide-btn {
  opacity: 1;
}
.session-rename-btn:hover {
  color: var(--color-primary);
  background: color-mix(in oklch, var(--color-primary) 12%, transparent);
}
.session-hide-btn:hover {
  color: var(--color-warning);
  background: color-mix(in oklch, var(--color-warning) 12%, transparent);
}
.session-hide-btn.is-hidden {
  opacity: 1;
  color: var(--color-warning);
}
.session-row.session-hidden-row {
  opacity: 0.78;
}
.session-hidden-badge {
  font-size: 9px;
  font-family: ui-monospace, Menlo, monospace;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0 4px;
  border-radius: 3px;
  color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
  background: color-mix(in oklch, var(--color-base-content) 8%, transparent);
  border: 1px solid color-mix(in oklch, var(--color-base-content) 14%, transparent);
}
.session-title-wrap {
  width: 100%;
}
.session-title-wrap.session-rename-active {
  flex: 1;
  min-width: 0;
}
.session-title-text {
  cursor: text;
}
.session-title-text:hover {
  color: var(--color-primary);
}
.session-rename-input {
  height: 1.5rem !important;
  min-height: 1.5rem !important;
  padding-left: 0.4rem !important;
  padding-right: 0.4rem !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  width: 100%;
}
.session-title-inline {
  padding: 1px 4px;
  border-radius: 4px;
  border: 1px solid transparent;
}
.session-title-inline:hover {
  border-color: color-mix(in oklch, var(--color-base-content) 12%, transparent);
  background: color-mix(in oklch, var(--color-base-content) 4%, transparent);
}

/* Hub machine picker + topbar menu */
#machine-picker {
  background: color-mix(in oklch, var(--color-base-100) 92%, black);
}
.machine-pick-card {
  background: color-mix(in oklch, var(--color-base-content) 3%, var(--color-base-100));
  cursor: pointer;
}
.machine-pick-card:disabled {
  cursor: not-allowed;
}
#machine-menu {
  scrollbar-width: thin;
}
.machine-menu-item:disabled {
  cursor: not-allowed;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Blockquote */
.md blockquote {
  margin: 0.75em 0;
  padding: 0.55em 0.9em;
  border-left: 3px solid var(--color-info);
  background: linear-gradient(
    90deg,
    color-mix(in oklch, var(--color-info) 14%, var(--color-base-200)),
    color-mix(in oklch, var(--color-info) 5%, var(--color-base-200))
  );
  border-radius: 0 8px 8px 0;
  color: color-mix(in oklch, var(--color-info) 28%, var(--color-base-content));
}
.md blockquote p { margin: 0.35em 0; }
.md blockquote > :first-child { margin-top: 0; }
.md blockquote > :last-child { margin-bottom: 0; }
.md blockquote strong {
  color: color-mix(in oklch, var(--color-info) 50%, var(--color-base-content)) !important;
}
.md blockquote blockquote {
  margin-left: 0.25em;
  border-left-color: var(--color-accent);
  background: color-mix(in oklch, var(--color-accent) 10%, var(--color-base-200));
}

/* Links — DaisyUI sets a { color: inherit } */
.md a {
  color: var(--color-primary) !important;
  text-decoration: underline !important;
  text-decoration-color: color-mix(in oklch, var(--color-primary) 45%, transparent);
  text-underline-offset: 2px;
  font-weight: 600;
  transition: color .12s, text-decoration-color .12s;
}
.md a:hover {
  color: var(--color-secondary) !important;
  text-decoration-color: var(--color-secondary);
}

/* Tables */
.md .table-wrap {
  overflow-x: auto;
  margin: 0.75em 0;
  border-radius: 8px;
  border: 1px solid color-mix(in oklch, var(--color-primary) 28%, transparent);
  box-shadow: 0 1px 0 color-mix(in oklch, var(--color-primary) 10%, transparent);
}
.md table {
  border-collapse: collapse;
  width: 100%;
  margin: 0;
  font-size: 0.88em;
  line-height: 1.45;
}
.md th,
.md td {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: color-mix(in oklch, var(--color-primary) 18%, var(--color-base-300)) !important;
  padding: 0.45em 0.7em;
  text-align: left;
  vertical-align: top;
}
.md th {
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--color-primary) 22%, var(--color-base-200)),
    color-mix(in oklch, var(--color-primary) 12%, var(--color-base-200))
  );
  color: color-mix(in oklch, var(--color-primary) 70%, var(--color-base-content)) !important;
  font-weight: 700 !important;
  white-space: nowrap;
}
.md tr:nth-child(even) td {
  background: color-mix(in oklch, var(--color-primary) 5%, transparent);
}
.md tr:hover td {
  background: color-mix(in oklch, var(--color-accent) 12%, transparent);
}

/* HR */
.md hr {
  border: none;
  height: 2px;
  margin: 1.15em 0;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in oklch, var(--color-primary) 60%, transparent) 12%,
    color-mix(in oklch, var(--color-accent) 55%, transparent) 50%,
    color-mix(in oklch, var(--color-success) 50%, transparent) 88%,
    transparent
  );
}

/* Images */
.md img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid color-mix(in oklch, var(--color-primary) 25%, transparent);
  margin: 0.5em 0;
  box-shadow: 0 2px 8px color-mix(in oklch, var(--color-primary) 12%, transparent);
}

/* Kbd */
.md kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8em;
  font-weight: 600;
  padding: 0.12em 0.45em;
  border-radius: 4px;
  border: 1px solid color-mix(in oklch, var(--color-secondary) 35%, transparent);
  background: color-mix(in oklch, var(--color-secondary) 12%, var(--color-base-200));
  color: color-mix(in oklch, var(--color-secondary) 65%, var(--color-base-content));
  box-shadow: 0 1px 0 color-mix(in oklch, var(--color-secondary) 20%, transparent);
}

.md li > p { margin: 0.25em 0; }

.msg-row.assistant .md {
  min-width: 0;
}

/* ── Diff colors ─────────────────────────────────────────────────────────── */
.diff-add  { color: oklch(var(--su)); }
.diff-del  { color: oklch(var(--er)); }
.diff-hunk { color: oklch(var(--in)); }
.diff-head { color: oklch(var(--bc)/.5); }

/* ── Chat composer ───────────────────────────────────────────────────────── */
/* One calm surface holds the prompt and its actions, like a modern messenger. */
.composer-surface {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--color-base-content) 16%, transparent);
  border-radius: 0.875rem;
  background: color-mix(in oklch, var(--color-base-100) 78%, var(--color-base-200));
  box-shadow: 0 8px 24px color-mix(in oklch, black 12%, transparent), inset 0 1px 0 color-mix(in oklch, white 6%, transparent);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.composer-surface:focus-within {
  border-color: color-mix(in oklch, var(--color-primary) 62%, transparent);
  box-shadow: 0 8px 28px color-mix(in oklch, black 15%, transparent), 0 0 0 3px color-mix(in oklch, var(--color-primary) 12%, transparent);
}
.composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 0;
}
.composer-tools, .composer-submit { display: flex; align-items: center; gap: .35rem; }
.composer-icon-btn,
.composer-send-btn,
.composer-stop-btn {
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.composer-icon-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  color: color-mix(in oklch, var(--color-base-content) 72%, transparent);
  background: transparent;
  font-size: 17px;
  line-height: 1;
}
.composer-icon-btn:hover { background: color-mix(in oklch, var(--color-base-content) 9%, transparent); color: var(--color-base-content); }
.composer-send-btn, .composer-stop-btn { height: 36px; min-height: 36px; padding: 0 .95rem; font-size: .8125rem; font-weight: 700; }
.composer-send-btn { color: oklch(var(--pc)); background: oklch(var(--p)); box-shadow: 0 3px 10px color-mix(in oklch, oklch(var(--p)) 38%, transparent); }
.composer-send-btn:hover { transform: translateY(-1px); background: color-mix(in oklch, oklch(var(--p)) 88%, white); }
.composer-send-btn.btn-warning { color: oklch(var(--wc)); background: oklch(var(--wa)); box-shadow: 0 3px 10px color-mix(in oklch, oklch(var(--wa)) 38%, transparent); }
.composer-stop-btn { color: oklch(var(--ec)); background: oklch(var(--er)); }
.composer-hint { color: color-mix(in oklch, var(--color-base-content) 43%, transparent); font-size: 11px; }
.composer-surface:has(.textarea-warning) { border-color: color-mix(in oklch, var(--color-warning) 65%, transparent); }
#chat-composer.chat-drop-active {
  outline: 2px dashed color-mix(in oklch, var(--color-primary) 70%, transparent);
  outline-offset: -2px;
  background: color-mix(in oklch, var(--color-primary) 8%, var(--color-base-200));
}
#chat-attach-bar:not(.hidden) {
  display: flex;
}
.chat-thumb {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--color-base-content) 12%, transparent);
  position: relative;
  flex-shrink: 0;
  background: color-mix(in oklch, var(--color-base-content) 4%, var(--color-base-100));
  box-shadow: 0 1px 2px color-mix(in oklch, black 12%, transparent);
}
.chat-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.chat-thumb-path {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 10px;
  padding: 4px;
  text-align: center;
  word-break: break-all;
  line-height: 1.15;
  color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
  background: color-mix(in oklch, var(--color-base-content) 6%, var(--color-base-100));
}
.chat-thumb-label {
  display: none;
}
.chat-thumb-x {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(255,255,255,.92);
  color: #334155;
  border: 1px solid rgba(15,23,42,.1);
  border-radius: 999px;
  font-size: 11px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  line-height: 1;
  z-index: 1;
  box-shadow: 0 1px 3px rgba(15,23,42,.18);
}
#chat-input.chat-input,
#chat-input {
  width: 100%;
  min-height: 32px;
  max-height: 72px;
  padding: 0;
  border: 0;
  border-radius: 0.75rem 0.75rem 0 0;
  background: transparent;
  color: var(--color-base-content);
  outline: none !important;
  box-shadow: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  transition: background .15s ease;
  /* Avoid iOS inherited large text scaling making the box look oversized */
  -webkit-text-size-adjust: 100%;
}
/* Kill browser password/contact autofill widgets (side checkmarks / arrows) */
#chat-input::-webkit-contacts-auto-fill-button,
#chat-input::-webkit-credentials-auto-fill-button,
#chat-input::-webkit-strong-password-auto-fill-button,
#ma-input::-webkit-contacts-auto-fill-button,
#ma-input::-webkit-credentials-auto-fill-button {
  visibility: hidden !important;
  display: none !important;
  pointer-events: none !important;
  position: absolute !important;
  right: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
}
#chat-input:-webkit-autofill,
#chat-input:-webkit-autofill:hover,
#chat-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--color-base-100) inset !important;
  transition: background-color 99999s ease-in-out 0s;
}

/* Recent sessions panel (position set in JS under topbar; never use top:100% with fixed) */
#recent-menu {
  min-width: 16rem;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#recent-menu.recent-menu-open {
  display: block; /* beat .hidden if both race */
}
.topbar-icon-btn {
  gap: .35rem;
  min-width: 2rem;
  padding-inline: .45rem;
}
.topbar-icon {
  width: 1rem;
  height: 1rem;
  display: block;
  flex: 0 0 auto;
}
.topbar-icon-label { display: inline; }
.mermaid-diagram {
  overflow-x: auto;
  padding: .75rem .25rem .25rem;
  text-align: center;
  cursor: zoom-in;
}
.mermaid-diagram svg { max-width: 100%; height: auto; }
.mermaid-diagram:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: .5rem; }
.mermaid-error { border-color: color-mix(in oklch, var(--color-error) 55%, var(--color-base-300)); }
.mermaid-zoom-overlay { position: fixed; inset: 0; z-index: 100; padding: 1rem; background: color-mix(in srgb, #000 76%, transparent); display: flex; align-items: center; justify-content: center; }
.mermaid-zoom-overlay.hidden { display: none; }
.mermaid-zoom-canvas { width: min(96vw, 1200px); max-height: 92vh; overflow: auto; padding: 2rem; border-radius: .75rem; background: var(--color-base-100); cursor: zoom-out; }
.mermaid-zoom-canvas svg { display: block; width: max-content; min-width: min(100%, 48rem); max-width: none; height: auto; margin: auto; }
.mermaid-zoom-close { position: fixed; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: var(--color-base-100); color: var(--color-base-content); font-size: 1.8rem; line-height: 1; }
.math-display { display: block; overflow-x: auto; margin: .75rem 0; padding: .2rem 0; text-align: center; }
.math-inline .katex { font-size: 1.05em; }
@media (max-width: 640px) {
  #recent-menu {
    min-width: 0;
    width: auto;
  }
  /* Keep 最近 + hamburger reachable; tuck secondary actions */
  #topbar {
    overflow: visible;
    gap: 0.35rem;
  }
  #topbar .topbar-actions {
    gap: 0.25rem;
    flex-shrink: 0;
  }
  #btn-theme,
  #btn-settings,
  #btn-logout,
  #btn-pwa-install {
    display: none !important;
  }
  .topbar-icon-label { display: none; }
  #topbar-project {
    font-size: 11px;
    max-width: 30vw;
  }
  #recent-menu-list .recent-menu-item {
    min-height: 44px; /* comfortable touch targets */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}
#chat-input:focus,
#chat-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent;
}
#chat-input.textarea-warning {
  border-color: color-mix(in oklch, var(--color-warning) 65%, transparent);
  background: color-mix(in oklch, var(--color-warning) 6%, var(--color-base-100));
}
#chat-input.textarea-warning:focus {
  border-color: color-mix(in oklch, var(--color-warning) 80%, transparent);
}

/* ── Typing dots ─────────────────────────────────────────────────────────── */
.dot { width: 5px; height: 5px; background: currentColor; border-radius: 50%; display: inline-block; animation: blink 1.2s infinite; }
.dot:nth-child(2) { animation-delay: .4s; }
.dot:nth-child(3) { animation-delay: .8s; }
@keyframes blink { 0%,80%,100% { opacity:.2 } 40% { opacity:1 } }

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: oklch(var(--b3)); border-radius: 2px; }

/* ── Scroll jump buttons ─────────────────────────────────────────────────── */
.scroll-fab {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; cursor: pointer;
  background: oklch(var(--b2)); color: oklch(var(--bc));
  border: 1px solid oklch(var(--b3));
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  opacity: .85; transition: opacity .15s, transform .15s;
}
.scroll-fab:hover { opacity: 1; transform: translateY(-1px); }
.scroll-fab.hidden { display: none; }

/* ── Tool cards ──────────────────────────────────────────────────────────── */
.tool-card {
  border-radius: 6px;
  border: 1px solid color-mix(in oklch, oklch(var(--su)) 18%, oklch(var(--b3)));
  background: color-mix(in oklch, oklch(var(--su)) 6%, oklch(var(--b2)));
}
.tool-detail {
  display: none;
  margin-top: 0.25rem;
  padding: 0.5rem;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  overflow-x: auto;
  white-space: pre;
  max-height: 18rem;
  overflow-y: auto;
  background: color-mix(in oklch, oklch(var(--bc)) 5%, oklch(var(--b1)));
  color: oklch(var(--bc) / 0.85);
  border: 1px solid oklch(var(--b3));
}
[data-theme="dark"] .tool-detail,
[data-theme="night"] .tool-detail,
[data-theme="black"] .tool-detail {
  background: color-mix(in oklch, oklch(var(--b1)) 65%, black);
}
.tool-card.open .tool-detail { display: block; }
.tool-card.open .tool-chevron { transform: rotate(90deg); }
.tool-chevron { transition: transform .15s; display: inline-block; }

/* Tool batch (density: clean) */
.tool-batch {
  border-radius: 6px;
  border: 1px dashed oklch(var(--b3));
  background: oklch(var(--b2) / 0.6);
  cursor: pointer;
  user-select: none;
}
.tool-batch .tool-batch-list { display: none; margin-top: 0.35rem; }
.tool-batch.open .tool-batch-list { display: flex; flex-direction: column; gap: 0.25rem; }
.tool-batch.open .tool-chevron { transform: rotate(90deg); }

/* Density modes */
#messages[data-density="clean"] { gap: 0.35rem; }
#messages[data-density="clean"] .msg-row { margin-block: 0; }
#messages[data-density="clean"] .tool-card:not(.tool-batch-item) {
  /* individual tools still shown when inside expanded batch */
}
#messages[data-density="full"] .tool-card .tool-detail {
  /* full density: detail stays collapsed until click, but preview is longer */
}
#messages[data-density="full"] .msg-ts { opacity: 0.55; }

/* ── Message timestamps ──────────────────────────────────────────────────── */
.msg-row { display: flex; flex-direction: column; gap: 2px; }
.msg-row.user { align-items: flex-end; }
.msg-row.assistant, .msg-row.error { align-items: flex-start; }
.msg-ts {
  font-size: 10px;
  line-height: 1;
  color: oklch(var(--bc) / 0.32);
  padding: 0 10px;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.msg-row.user .msg-ts { text-align: right; }

.token-bar {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.1rem 0.45rem;
  font-size: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: color-mix(in oklch, var(--color-base-content) 38%, transparent);
  line-height: 1.45;
}
.token-bar-mark {
  flex-shrink: 0;
  opacity: 0.55;
}
.token-bar-text {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ── Long message collapse ───────────────────────────────────────────────── */
.msg-card .msg-body { max-height: 8em; overflow: hidden; mask-image: linear-gradient(to bottom, black 60%, transparent 100%); }
.msg-card.open .msg-body { max-height: none; mask-image: none; }
.msg-expand-btn { display: block; }

/* ── Git graph ───────────────────────────────────────────────────────────── */
.git-graph { font-family: monospace; font-size: 11px; line-height: 1.5; white-space: pre; color: oklch(var(--bc)/.7); }
.git-graph .gh { color: oklch(var(--su)); font-weight: 600; }
.git-graph .gm { color: oklch(var(--bc)/.85); }

/* ── Sidebar project management ──────────────────────────────────────────── */
.agent-pill {
  font-size: 10px;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid oklch(var(--b3));
  color: oklch(var(--bc) / 0.55);
  background: transparent;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.agent-pill:hover { color: oklch(var(--bc) / 0.85); background: oklch(var(--b3) / 0.5); }
.agent-pill.active {
  color: oklch(var(--p));
  border-color: color-mix(in oklch, oklch(var(--p)) 40%, transparent);
  background: color-mix(in oklch, oklch(var(--p)) 12%, transparent);
  font-weight: 600;
}
.project-header:hover .font-semibold { color: oklch(var(--p)); }

/* Shell tab terminal — keep dark intentionally (terminal aesthetic) */
#tab-shell { background: #0d1117; }
#term-output { color: #c9d1d9; }
#term-keyboard { display: none; }

/* xterm parks its input off-screen, which is unreliable for mobile IMEs.
 * Phones use the visible native command composer below the terminal instead. */
@media (max-width: 640px), (hover: none) and (pointer: coarse) {
  #term-keyboard { display: inline-flex; }
  #term-mobile-keys { display: flex !important; }
  #term-mobile-composer { display: flex !important; }
  #terminal-container { touch-action: manipulation; }
  .term-key {
    min-width: 38px;
    min-height: 32px;
    padding: 3px 7px;
    border: 1px solid #30363d;
    border-radius: 6px;
    color: #c9d1d9;
    background: #21262d;
    font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    -webkit-tap-highlight-color: transparent;
  }
  .term-key:active { background: #30363d; }
  .term-mobile-input {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #30363d;
    border-radius: 7px;
    color: #f0f6fc;
    background: #0d1117;
    font: 16px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
    outline: none;
  }
  .term-mobile-input:focus { border-color: #58a6ff; }
  .term-mobile-send {
    height: 38px;
    padding: 0 12px;
    border: 0;
    border-radius: 7px;
    color: #fff;
    background: #1f6feb;
    font-size: 14px;
    font-weight: 600;
  }
  .term-mobile-send:active { background: #388bfd; }
}

/* ── Meta Agent panel (DaisyUI 5: use --color-* full values, solid surfaces) ── */
.meta-agent-panel {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}
.meta-agent-panel.hidden { display: none !important; }
.meta-agent-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.meta-agent-sheet {
  position: relative;
  width: min(520px, 100vw);
  height: 100%;
  /* Solid panel — no alpha / no invalid oklch(var(--b1)) from DaisyUI 4 tokens */
  background: var(--color-base-100);
  color: var(--color-base-content);
  border-left: 1px solid var(--color-base-300);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  animation: ma-slide-in 0.18s ease-out;
  opacity: 1;
  isolation: isolate;
}
.ma-hist-item {
  border: 1px solid var(--color-base-300);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--color-base-200);
  transition: border-color .12s, background .12s;
}
.ma-hist-item:hover {
  border-color: color-mix(in oklch, var(--color-primary) 40%, var(--color-base-300));
}
.ma-hist-item.active {
  border-color: color-mix(in oklch, var(--color-primary) 55%, var(--color-base-300));
  background: color-mix(in oklch, var(--color-primary) 12%, var(--color-base-200));
}
.ma-hist-open { cursor: pointer; }
.ma-note-item {
  width: 100%;
  border: 1px solid var(--color-base-300);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--color-base-200);
  transition: border-color .12s, background .12s;
}
.ma-note-item:hover {
  border-color: color-mix(in oklch, var(--color-primary) 40%, var(--color-base-300));
}
.ma-note-item.active {
  border-color: color-mix(in oklch, var(--color-primary) 55%, var(--color-base-300));
  background: color-mix(in oklch, var(--color-primary) 12%, var(--color-base-200));
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#ma-resume-bar { min-height: 32px; }
@keyframes ma-slide-in {
  from { transform: translateX(16px); }
  to { transform: translateX(0); }
}
.meta-agent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-base-300);
  flex-shrink: 0;
  background: var(--color-base-200);
}
.meta-agent-body {
  min-height: 0;
  background: var(--color-base-100);
}
.ma-msg { max-width: 100%; }
.ma-bubble {
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.55;
  word-break: break-word;
}
.ma-bubble.user {
  background: color-mix(in oklch, var(--color-primary) 18%, var(--color-base-100));
  border: 1px solid color-mix(in oklch, var(--color-primary) 30%, var(--color-base-300));
  margin-left: 12%;
}
.ma-bubble.assistant {
  background: var(--color-base-200);
  border: 1px solid var(--color-base-300);
  margin-right: 4%;
}
.ma-bubble.error {
  background: color-mix(in oklch, var(--color-error) 15%, var(--color-base-100));
  border: 1px solid color-mix(in oklch, var(--color-error) 40%, var(--color-base-300));
  color: var(--color-error);
  font-size: 12px;
}
.ma-sys {
  font-size: 11px;
  color: color-mix(in oklch, var(--color-base-content) 45%, transparent);
  text-align: center;
  padding: 4px 8px;
}
.ma-tool {
  font-size: 11px;
  font-family: ui-monospace, monospace;
  background: var(--color-base-200);
  border: 1px solid var(--color-base-300);
  border-radius: 8px;
  padding: 6px 8px;
  margin-right: 8%;
}
.ma-tool.done { border-color: color-mix(in oklch, var(--color-success) 45%, var(--color-base-300)); }
.ma-tool.error { border-color: color-mix(in oklch, var(--color-error) 45%, var(--color-base-300)); }
.ma-tool-name {
  font-weight: 700;
  color: var(--color-primary);
  margin-right: 6px;
}
.ma-tool-phase { color: color-mix(in oklch, var(--color-base-content) 45%, transparent); }
.ma-tool-args, .ma-tool-result {
  margin: 4px 0 0;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 80px;
  overflow: auto;
  font-size: 10px;
  opacity: 0.75;
}
.ma-approval {
  font-size: 12px;
  background: color-mix(in oklch, var(--color-warning) 10%, var(--color-base-200));
  border: 1px solid color-mix(in oklch, var(--color-warning) 45%, var(--color-base-300));
  border-radius: 8px;
  padding: 8px 10px;
  margin-right: 8%;
}
.ma-approval-label { font-weight: 600; margin-bottom: 4px; }
.ma-approval-cmd {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-all;
  background: var(--color-base-100);
  border-radius: 6px;
  padding: 6px 8px;
  margin: 4px 0;
}
.ma-approval-actions { display: flex; gap: 6px; justify-content: flex-end; }
.ma-thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--color-base-300);
  position: relative;
  flex-shrink: 0;
}
.ma-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ma-thumb-path {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 10px;
  background: var(--color-base-200);
}
.ma-thumb-label {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  font-size: 9px;
  text-align: center;
  background: rgba(0,0,0,.55);
  color: #fff;
  line-height: 1.2;
  padding: 1px 0;
}
.ma-thumb-x {
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(0,0,0,.65);
  color: #fff;
  border: 0;
  font-size: 10px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  line-height: 1;
  z-index: 1;
}
.ma-report-md { font-size: 13px; }
.ma-report-item { display: block; }

@media (max-width: 640px) {
  .md h1, .md h2, .md h3 {
    background: none !important;
    border-bottom: none !important;
    font-size: 1.02em !important;
    padding: 0.05em 0 0.15em 0.5em !important;
  }
}

/* ── Settings: full-page overlay using the same DaisyUI tokens as #app ── */

html.settings-open #app { visibility: hidden; }
.set-page {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: hsl(var(--b1));
  color: hsl(var(--bc));
  overflow: auto;
  min-height: 100dvh;
}
.set-island {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 44px;
  padding: 0 0.75rem;
  background: hsl(var(--b2));
  border-bottom: 1px solid hsl(var(--b3));
}
.set-split {
  display: grid;
  grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
  gap: 0.75rem;
  max-width: 56rem;
  margin: 1rem auto 2.5rem;
  padding: 0 1rem 2rem;
}
.set-nav { display: flex; flex-direction: column; gap: 0.25rem; padding-top: 0.25rem; }
.set-nav-item.is-on {
  background: hsl(var(--b3));
  color: hsl(var(--bc));
}
.set-main { min-width: 0; }
.set-panel { padding: 0.25rem 0 1.5rem; }
.set-fields { display: grid; gap: 0.5rem; }
.set-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.set-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.5rem;
  background: hsl(var(--b2));
  border: 1px solid hsl(var(--b3));
}
.set-row-body { flex: 1; min-width: 0; }
.set-add { display: grid; gap: 0.5rem; }
.set-token { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.set-token textarea { min-height: 7rem; resize: vertical; }
@media (max-width: 767px) {
  .set-split { grid-template-columns: 1fr; }
  .set-nav { flex-direction: row; overflow-x: auto; gap: 0.25rem; }
  .set-nav-item { white-space: nowrap; }
}