.transcript-shell {
      flex: 1;
      border: 1px solid var(--border-neutral);
      border-radius: 8px;
      min-height: 240px;
      max-height: 60vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: var(--surface);
    }

.transcript-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 8px 12px;
      border-bottom: 1px solid var(--border-neutral-soft);
      background: var(--surface-toolbar);
    }

.current-chat-title {
      min-width: 0;
      max-width: 100%;
      color: var(--text-faint);
      background: transparent;
      border: 1px solid transparent;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 650;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: text;
      padding: 4px 6px;
      text-align: left;
    }

.current-chat-title:hover,
.current-chat-title:focus {
      color: var(--brand);
      background: var(--surface-purple);
      border-color: var(--border-purple);
      outline: none;
    }

.current-chat-title.is-saving {
      color: var(--text-subtle);
      cursor: wait;
    }

.current-chat-title-editor {
      min-width: 0;
      width: min(420px, 100%);
      color: var(--text);
      background: var(--surface);
      border: 1px solid var(--border-purple-strong);
      border-radius: 6px;
      font-size: 12px;
      font-weight: 650;
      padding: 4px 6px;
      outline: none;
    }

.current-chat-actions {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

.current-chat-mobile-menu {
      display: none;
    }

.current-chat-action {
      min-height: 28px;
      padding: 4px 8px;
      color: var(--text-subtle);
      background: transparent;
      border: 1px solid transparent;
      border-radius: 6px;
      cursor: pointer;
      font-size: 11px;
      font-weight: 650;
    }

.current-chat-action:hover:not(:disabled) {
      color: var(--brand);
      background: var(--surface-purple);
      border-color: var(--border-purple);
    }

.current-chat-save {
      color: var(--brand);
    }

.current-chat-action:disabled {
      color: var(--text-disabled-strong);
      cursor: not-allowed;
    }

.current-chat-delete {
      color: var(--danger);
    }

#log {
      flex: 1;
      min-height: 0;
      padding: 16px;
      line-height: 1.5;
      overflow-y: auto;
      font-size: 16px;
    }

@media (max-width: 600px) {
      .transcript-shell {
        position: relative;
      }

      .transcript-toolbar {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 5;
        display: block;
        padding: 0;
        border: 0;
        background: transparent;
      }

      .current-chat-title {
        display: none;
      }

      .current-chat-mobile-menu {
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border-warm);
        border-radius: 999px;
        background: var(--surface-toolbar);
        color: var(--text-soft);
        font: inherit;
        font-size: 13px;
        font-weight: 800;
        line-height: 1;
      }

      .current-chat-actions {
        display: none;
        position: absolute;
        top: 38px;
        right: 0;
        min-width: 156px;
        padding: 6px;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        border: 1px solid var(--border-warm);
        border-radius: 8px;
        background: var(--surface-toolbar);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
      }

      .transcript-toolbar.mobile-menu-open .current-chat-actions {
        display: flex;
      }

      .current-chat-action {
        min-height: 34px;
        text-align: left;
      }
    }

.transcript-idle-visual {
      min-height: 100%;
      height: clamp(260px, 48vh, 520px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 28px;
      color: var(--brand);
      pointer-events: none;
    }

.voice-orb {
      position: relative;
      width: clamp(112px, 24vw, 172px);
      aspect-ratio: 1;
      display: grid;
      place-items: center;
    }

.voice-orb-core {
      width: 44%;
      aspect-ratio: 1;
      border-radius: 50%;
      background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.18) 30%, transparent 46%),
        linear-gradient(135deg, #6c4fd8, #35a179);
      box-shadow: 0 14px 42px rgba(89, 70, 178, 0.22);
      animation: voiceOrbCorePulse 2.2s ease-in-out infinite;
    }

.voice-orb-ring {
      position: absolute;
      inset: 14%;
      border: 2px solid rgba(89, 70, 178, 0.28);
      border-radius: 42% 58% 46% 54% / 52% 44% 56% 48%;
      animation: voiceOrbRing 5.5s ease-in-out infinite;
    }

.voice-orb-ring-b {
      inset: 4%;
      border-color: rgba(53, 161, 121, 0.22);
      animation-duration: 6.7s;
      animation-direction: reverse;
    }

.voice-wave {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      height: 46px;
      opacity: 0.84;
    }

.voice-wave span {
      display: block;
      width: 5px;
      height: 16px;
      border-radius: 999px;
      background: linear-gradient(180deg, #6c4fd8, #35a179);
      animation: voiceWaveBar 1.35s ease-in-out infinite;
    }

.voice-wave span:nth-child(2) { animation-delay: -1.18s; }
.voice-wave span:nth-child(3) { animation-delay: -1.01s; }
.voice-wave span:nth-child(4) { animation-delay: -0.84s; }
.voice-wave span:nth-child(5) { animation-delay: -0.67s; }
.voice-wave span:nth-child(6) { animation-delay: -0.50s; }
.voice-wave span:nth-child(7) { animation-delay: -0.33s; }
.voice-wave span:nth-child(8) { animation-delay: -0.16s; }
.voice-wave span:nth-child(9) { animation-delay: 0s; }

@keyframes voiceOrbCorePulse {
      0%, 100% { transform: scale(0.96); }
      50% { transform: scale(1.08); }
    }

@keyframes voiceOrbRing {
      0%, 100% {
        transform: rotate(0deg) scale(0.96);
        border-radius: 42% 58% 46% 54% / 52% 44% 56% 48%;
      }
      50% {
        transform: rotate(14deg) scale(1.04);
        border-radius: 55% 45% 57% 43% / 44% 58% 42% 56%;
      }
    }

@keyframes voiceWaveBar {
      0%, 100% { height: 14px; opacity: 0.46; }
      50% { height: 42px; opacity: 0.95; }
    }

@media (prefers-reduced-motion: reduce) {
      .voice-orb-core,
      .voice-orb-ring,
      .voice-wave span {
        animation: none;
      }
    }

.user { color: var(--text); font-weight: 500; margin-bottom: 6px; }

.claude { color: var(--brand); margin-bottom: 10px; }

.user,
.claude {
      padding: 2px 4px;
      margin-left: -4px;
      margin-right: -4px;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
    }

.user:hover,
.claude:hover {
      background: var(--surface-tint);
    }

.turn-action-row {
      display: flex;
      align-items: flex-start;
      gap: 4px;
      flex-wrap: wrap;
      margin-top: 4px;
      color: var(--text-soft);
      opacity: 0.78;
    }

.turn-action-button,
.turn-action-more-summary {
      min-height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 3px 6px;
      color: var(--text-soft);
      background: transparent;
      border: 1px solid transparent;
      border-radius: 6px;
      cursor: pointer;
      font: inherit;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.2;
    }

.turn-copy-action {
      width: 24px;
      padding: 0;
    }

.turn-action-button:hover:not(:disabled),
.turn-action-button:focus-visible,
.turn-action-more-summary:hover,
.turn-action-more[open] > .turn-action-more-summary {
      color: var(--brand-strong);
      background: var(--surface);
      border-color: var(--border-warm-soft);
      opacity: 1;
    }

.turn-copy-action svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
    }

@media (hover: hover) and (pointer: fine) {
      .user:hover .turn-action-row,
      .claude:hover .turn-action-row,
      .saved-history-turn:hover .turn-action-row,
      .turn-action-row:focus-within {
        opacity: 0.9;
      }

      .turn-action-row:hover {
        opacity: 1;
      }
    }

.user.important-moment-turn,
.claude.important-moment-turn,
.saved-history-turn.important-moment-turn {
      background: var(--flag-surface);
      box-shadow: inset 3px 0 0 var(--flag-border);
    }

.user.highlight-review-active,
.claude.highlight-review-active {
      background: #e8f8ee;
      box-shadow:
        inset 3px 0 0 #2f9d64,
        0 0 0 2px rgba(47, 157, 100, 0.18);
    }

.highlight-review-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 8px 12px;
      color: #173f2a;
      background: #e3f7ea;
      border-bottom: 1px solid #8ccfa5;
      box-shadow: inset 3px 0 0 #2f9d64;
    }

.highlight-review-bar[hidden] {
      display: none;
    }

.highlight-review-copy {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

.highlight-review-count {
      color: #173f2a;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.2;
    }

.highlight-review-status {
      color: #2f5c42;
      font-size: 12px;
      line-height: 1.3;
    }

.highlight-review-status.error {
      color: var(--danger);
    }

.highlight-review-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      flex-wrap: wrap;
      flex-shrink: 0;
    }

.highlight-review-actions .settings-reset-btn {
      color: #205639;
      background: #f4fff7;
      border-color: #9ed9b3;
    }

.highlight-review-actions .settings-reset-btn:hover:not(:disabled) {
      background: #daf3e4;
    }

.highlight-review-actions .feedback-submit-btn {
      color: #ffffff;
      background: #2f9d64;
      border-color: #2f9d64;
    }

@media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) .user.highlight-review-active,
      :root:not([data-theme="light"]) .claude.highlight-review-active {
        background: #123924;
        box-shadow:
          inset 3px 0 0 #62d893,
          0 0 0 2px rgba(98, 216, 147, 0.22);
      }

      :root:not([data-theme="light"]) .highlight-review-bar {
        color: #d9ffe8;
        background: #10321f;
        border-bottom-color: #2c7b4f;
        box-shadow: inset 3px 0 0 #62d893;
      }

      :root:not([data-theme="light"]) .highlight-review-count {
        color: #e8fff0;
      }

      :root:not([data-theme="light"]) .highlight-review-status {
        color: #bfe9cf;
      }

      :root:not([data-theme="light"]) .highlight-review-actions .settings-reset-btn {
        color: #d9ffe8;
        background: #173f2a;
        border-color: #3f9864;
      }

      :root:not([data-theme="light"]) .highlight-review-actions .settings-reset-btn:hover:not(:disabled) {
        background: #205639;
      }

      :root:not([data-theme="light"]) .highlight-review-actions .feedback-submit-btn {
        color: #07160e;
        background: #77e3a1;
        border-color: #77e3a1;
      }
    }

:root[data-theme="dark"] .user.highlight-review-active,
:root[data-theme="dark"] .claude.highlight-review-active {
      background: #123924;
      box-shadow:
        inset 3px 0 0 #62d893,
        0 0 0 2px rgba(98, 216, 147, 0.22);
    }

:root[data-theme="dark"] .highlight-review-bar {
      color: #d9ffe8;
      background: #10321f;
      border-bottom-color: #2c7b4f;
      box-shadow: inset 3px 0 0 #62d893;
    }

:root[data-theme="dark"] .highlight-review-count {
      color: #e8fff0;
    }

:root[data-theme="dark"] .highlight-review-status {
      color: #bfe9cf;
    }

:root[data-theme="dark"] .highlight-review-actions .settings-reset-btn {
      color: #d9ffe8;
      background: #173f2a;
      border-color: #3f9864;
    }

:root[data-theme="dark"] .highlight-review-actions .settings-reset-btn:hover:not(:disabled) {
      background: #205639;
    }

:root[data-theme="dark"] .highlight-review-actions .feedback-submit-btn {
      color: #07160e;
      background: #77e3a1;
      border-color: #77e3a1;
    }

.important-moment-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 8px;
    }

.important-moment-tags {
      margin-top: 0;
    }

.important-moment-tags-btn {
      min-height: 22px;
      padding: 1px 7px;
      color: var(--brand);
      background: var(--surface-tint);
      border: 1px solid var(--border-purple);
      border-radius: 999px;
      cursor: pointer;
      font: inherit;
      font-size: 10px;
      font-weight: 650;
      line-height: 1.2;
    }

.important-moment-tags-btn:hover {
      background: var(--surface-purple);
    }

/* Markdown-rendered content inside assistant bubbles. Tight margins so
       headings and lists don't balloon the bubble; muted colors for code
       so the monospace stays readable inside the purple body text. */
    .claude p { margin: 0 0 8px 0; }

.claude p:last-child { margin-bottom: 0; }

.turn-action-button:disabled {
      color: var(--text-subtle);
      opacity: 0.8;
    }

.turn-action-button:disabled[data-thinking="true"] {
      cursor: wait;
    }

.turn-action-button.is-complete {
      cursor: default;
    }

.verification-byline {
      display: block;
      margin: 0 0 8px 0;
      font-size: 13px;
      color: var(--text-subtle);
    }

.verification-byline strong {
      color: var(--brand-strong);
      font-weight: 800;
    }

/* Keep the first assistant paragraph inline with the speaker label.
   marked.parse() wraps plain assistant text in a <p>, which otherwise
   forces labels like "GPT (5.5):" onto their own line after turn-end.
   Later paragraphs/lists/code blocks keep their normal block layout. */
.claude .claude-body > p:first-child { display: inline; }

/* Restore visible paragraph separation after the first inline paragraph.
   Without this, short multi-paragraph assistant replies can look like one
   continuous block even though the transcript/export still has breaks. */
.claude .claude-body > p:first-child + p,
.claude .claude-body > p:first-child + ul,
.claude .claude-body > p:first-child + ol,
.claude .claude-body > p:first-child + blockquote,
.claude .claude-body > p:first-child + pre,
.claude .claude-body > p:first-child + table {
      margin-top: 8px;
    }

.claude .claude-body > p + p { margin-top: 8px; }


.claude h1, .claude h2, .claude h3, .claude h4, .claude h5, .claude h6 {
      font-weight: 700;
      margin: 10px 0 6px 0;
      color: var(--brand);
    }

.claude h1 { font-size: 1.25em; }

.claude h2 { font-size: 1.15em; }

.claude h3 { font-size: 1.08em; }

.claude h4, .claude h5, .claude h6 { font-size: 1em; }

.claude ul, .claude ol {
      margin: 4px 0 8px 0;
      padding-left: 24px;
    }

.claude li { margin-bottom: 2px; }

.claude code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      background: var(--surface-purple);
      color: var(--brand-strong);
      padding: 1px 5px;
      border-radius: 4px;
      font-size: 0.92em;
    }

.claude pre {
      background: var(--surface-purple-hover);
      border: 1px solid var(--border-purple-soft);
      border-radius: 6px;
      padding: 10px 12px;
      margin: 8px 0;
      overflow-x: auto;
      font-size: 0.9em;
    }

.claude pre code {
      background: transparent;
      color: var(--brand-strong);
      padding: 0;
      font-size: inherit;
    }

.claude a {
      color: var(--brand);
      text-decoration: underline;
      word-break: break-word;
    }

.claude a:hover { color: var(--brand-strong); }

.claude blockquote {
      border-left: 3px solid var(--border-purple-strong);
      margin: 6px 0;
      padding: 2px 12px;
      color: var(--text-purple-muted);
      font-style: italic;
    }

.claude table {
      border-collapse: collapse;
      margin: 8px 0;
      font-size: 0.95em;
    }

.claude th, .claude td {
      border: 1px solid var(--border-purple);
      padding: 4px 10px;
      text-align: left;
    }

.claude th {
      background: var(--surface-purple);
      font-weight: 600;
    }

.claude strong { font-weight: 700; }

.claude em { font-style: italic; }

.claude hr {
      border: none;
      border-top: 1px solid var(--border-purple);
      margin: 10px 0;
    }

/* Inline summary block — distinct from conversation turns. Shows up
       when the user taps the Summarize button. Styled as a subtle bordered
       card so it reads as metadata rather than as another speaker turn. */
    .summary {
      background: var(--surface-tint);
      border: 1px solid var(--border-purple);
      border-radius: 8px;
      padding: 12px 14px;
      margin: 14px 0;
      color: var(--brand-strong);
      font-size: 0.97em;
    }

.summary-label {
      font-weight: 600;
      color: var(--brand);
      margin-bottom: 6px;
      font-size: 0.92em;
      letter-spacing: 0.02em;
    }

.summary-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 6px;
    }

.summary-header .summary-label {
      margin-bottom: 0;
    }

.summary-copy-btn {
      min-height: 26px;
      padding: 3px 8px;
      color: var(--brand);
      background: var(--surface-purple);
      border: 1px solid var(--border-purple);
      border-radius: 999px;
      cursor: pointer;
      font: inherit;
      font-size: 11px;
      font-weight: 700;
    }

.summary-copy-btn:hover:not(:disabled) {
      background: var(--surface-purple-hover);
    }

.summary-save-note {
      margin: 0 0 10px 0;
      color: var(--text-subtle);
      font-size: 12px;
      line-height: 1.35;
    }

.summary p { margin: 0 0 8px 0; }

.summary p:last-child { margin-bottom: 0; }

.summary ul {
      margin: 4px 0 0 0;
      padding-left: 22px;
    }

.summary li { margin-bottom: 4px; }

.summary li:last-child { margin-bottom: 0; }

/* Loading state of the summary block while waiting for the LLM. */
    .summary.loading {
      color: var(--text-faint);
      font-style: italic;
    }

/* Quick audio controls below the input row. */
    .quick-audio-row {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      flex-wrap: wrap;
    }

/* Mode toggle row above the mic button */
    .mode-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 44px;
      padding: 8px 14px;
      background: var(--surface-purple-hover);
      border: 1px solid transparent;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      color: var(--text-soft);
      line-height: 1;
    }

.mode-toggle .mode-label { display: flex; align-items: center; gap: 8px; }

.mode-toggle.hands-free-nudge {
      animation: handsFreeToggleNudge 0.75s ease-in-out 6;
    }

.mode-toggle.hands-free-nudge .slider-track {
      box-shadow: 0 0 0 8px rgba(138, 108, 28, 0.24);
    }

.mode-toggle.hands-free-nudge .mode-state {
      color: #6f5511;
    }

.mode-toggle .mode-state {
      font-weight: 500;
      color: var(--brand);
      min-width: 32px;
      text-align: right;
    }

.switch {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 24px;
      flex-shrink: 0;
    }

.switch input { opacity: 0; width: 0; height: 0; }

.slider-track {
      position: absolute;
      cursor: pointer;
      top: 0; left: 0; right: 0; bottom: 0;
      background-color: var(--border-neutral-strong);
      transition: .25s;
      border-radius: 24px;
    }

.slider-track:before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 3px;
      bottom: 3px;
      background-color: var(--on-brand);
      transition: .25s;
      border-radius: 50%;
    }

input:checked + .slider-track { background-color: var(--brand); }

input:checked + .slider-track:before { transform: translateX(20px); }

@keyframes handsFreeToggleNudge {
      0%, 100% {
        background: var(--surface-purple-hover);
        box-shadow: 0 0 0 0 rgba(89, 70, 178, 0);
        transform: translateY(0);
      }
      50% {
        background: #f1d06a;
        box-shadow: 0 0 0 5px rgba(138, 108, 28, 0.22);
        transform: translateY(-1px);
      }
    }

@keyframes audioOffNudge {
      0%, 100% {
        background: var(--surface-tint);
        box-shadow: 0 0 0 0 rgba(138, 108, 28, 0);
        transform: translateY(0);
      }
      50% {
        background: #f1d06a;
        box-shadow: 0 0 0 5px rgba(138, 108, 28, 0.22);
        transform: translateY(-1px);
      }
    }

@media (prefers-reduced-motion: reduce) {
      .mode-toggle.hands-free-nudge,
      .stop-audio-btn.audio-off-nudge {
        animation: none;
      }
    }

.controls {
      display: flex;
      gap: 8px;
      align-items: stretch;
      flex-wrap: wrap;
    }

#send {
      padding: 12px 18px;
      border: none;
      background: var(--brand);
      color: var(--on-brand);
      border-radius: 8px;
      cursor: pointer;
      font-size: 16px;
      font-weight: 500;
    }

#send:disabled { background: var(--control-disabled); cursor: not-allowed; }

.hint {
      color: var(--text-faint);
      font-size: 13px;
      text-align: center;
      margin: 0;
    }

/* Page header — branded logo on the left (icon + "MANY MINDS" wordmark),
       gear icon on the right. Matches the universal pattern users expect for
       settings access. */
    .page-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

.page-header-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0; /* allows wordmark to shrink on narrow screens */
      border-radius: 8px;
      cursor: pointer;
    }

.page-header-brand:hover,
.page-header-brand:focus-visible {
      outline: none;
      color: var(--brand);
    }

.page-header-brand:hover .page-header-wordmark,
.page-header-brand:focus-visible .page-header-wordmark {
      color: var(--brand);
    }

.page-header-icon {
      width: 32px;
      height: 32px;
      flex-shrink: 0;
      display: block;
    }

.page-header-wordmark {
      font-family: 'Montserrat', system-ui, sans-serif;
      font-weight: 800;
      font-size: 20px;
      letter-spacing: 0.08em;
      color: var(--ink-navy);
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

.settings-toggle {
      background: transparent;
      border: 1px solid transparent;
      color: var(--text-soft);
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
      padding: 6px 10px;
      border-radius: 8px;
      flex-shrink: 0;
    }

.settings-toggle:hover { background: var(--surface-purple-hover); color: var(--brand); border-color: var(--border-purple-soft); }

.settings-toggle:active { background: var(--surface-purple-pressed); }

.top-chat-controls {
      display: grid;
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 1.35fr);
      gap: 8px;
    }

.top-chat-control {
      min-width: 0;
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 8px 10px;
      color: var(--brand-strong);
      background: var(--surface-tint);
      border: 1px solid var(--border-purple);
      border-radius: 8px;
      cursor: pointer;
      font-size: 13px;
      line-height: 1.2;
      font-weight: 650;
    }

.top-chat-control:hover {
      background: var(--surface-purple);
      border-color: var(--border-purple-strong);
    }

.top-chat-control[aria-expanded="true"] {
      background: var(--surface-purple-active);
      border-color: var(--brand);
    }

.multi-tab-warning {
      padding: 9px 12px;
      color: var(--flag-text);
      background: var(--flag-surface);
      border: 1px solid var(--flag-border);
      border-radius: 8px;
      font-size: 13px;
      font-weight: 650;
      line-height: 1.35;
    }

.multi-tab-warning[hidden] {
      display: none;
    }

.top-chat-control-label,
.top-chat-control-value {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

.top-chat-control-value {
      color: var(--text-subtle);
      font-weight: 500;
    }

.top-history-panel[hidden],
.top-model-panel[hidden] { display: none; }

.top-history-panel,
.top-model-panel {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 12px 14px;
      background: var(--surface-warm);
      border: 1px solid var(--border-warm);
      border-radius: 8px;
      max-height: min(58vh, 520px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

.top-history-sticky-shell {
      position: sticky;
      top: -12px;
      z-index: 3;
      display: flex;
      flex-direction: column;
      gap: 0;
      margin: -12px -14px 0 -14px;
      padding: 0 14px 8px 14px;
      background: var(--surface-warm);
      border-bottom: 1px solid var(--border-warm);
      border-radius: 8px 8px 0 0;
    }

.top-history-header,
.top-model-header {
      position: sticky;
      top: -12px;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: -12px -14px 0 -14px;
      padding: 10px 14px;
      background: var(--surface-warm);
      border-bottom: 1px solid var(--border-warm);
      border-radius: 8px 8px 0 0;
    }

.top-history-sticky-shell .top-history-header {
      position: static;
      z-index: auto;
      margin: 0 -14px;
      border-bottom: 1px solid var(--border-warm);
    }

.top-history-header > div:first-child {
      min-width: 130px;
      flex: 0 1 auto;
    }

.top-model-heading {
      min-width: 130px;
      flex: 0 1 auto;
    }

.top-history-title,
.top-model-title {
      color: var(--brand-strong);
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 0.03em;
    }

.top-model-subtitle {
      color: var(--text-muted);
      font-size: 12px;
      line-height: 1.4;
      margin-top: 2px;
    }

.top-model-sticky-shell {
      position: sticky;
      top: -12px;
      z-index: 3;
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin: -12px -14px 0 -14px;
      padding: 0 14px 8px 14px;
      background: var(--surface-warm);
      border-bottom: 1px solid var(--border-warm);
      border-radius: 8px 8px 0 0;
    }

.top-model-sticky-shell .top-model-header {
      position: static;
      z-index: auto;
      margin: 0 -14px;
      border-bottom: 0;
    }

.top-model-sticky-controls {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 0;
      background: transparent;
    }

.top-history-close,
.top-model-close {
      padding: 6px 12px;
      color: var(--brand);
      background: var(--surface-tint);
      border: 1px solid var(--border-purple);
      border-radius: 999px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
    }

.top-model-field {
      display: none !important;
    }

.top-model-grouping {
      align-self: flex-end;
      width: min(100%, 360px);
      margin-top: 8px;
      margin-bottom: 0;
      display: flex;
      gap: 6px;
      padding: 3px;
      background: var(--surface-purple);
      border: 1px solid var(--border-purple);
      border-radius: 8px;
    }

.top-model-grouping[hidden] {
      display: none;
    }

.top-model-grouping-btn {
      flex: 1 1 0;
      min-height: 30px;
      padding: 5px 9px;
      color: var(--brand);
      background: transparent;
      border: 0;
      border-radius: 6px;
      cursor: pointer;
      font: inherit;
      font-size: 12px;
      font-weight: 700;
    }

.top-model-grouping-btn[aria-pressed="true"] {
      color: var(--on-brand);
      background: var(--brand);
    }

.top-model-grouping-btn:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }

.top-model-native-select {
      display: none !important;
    }

.top-model-response-mode[hidden],
.top-mind-meld-panel[hidden] {
      display: none;
    }

.top-model-response-mode {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
      gap: 10px;
      align-items: center;
      padding: 10px 12px;
      border: 1px solid var(--border-warm);
      border-radius: 8px;
      background: var(--surface);
    }

.top-model-response-title {
      color: var(--brand-strong);
      font-size: 13px;
      font-weight: 700;
    }

.top-model-response-summary {
      margin-top: 2px;
      color: var(--text-muted);
      font-size: 12px;
      line-height: 1.35;
    }

.top-model-response-toggle {
      display: flex;
      gap: 6px;
    }

.top-model-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

.top-model-mind-meld-note {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 12px 14px;
      border: 1px solid var(--border-warm);
      border-radius: 8px;
      background: var(--surface);
      color: var(--text);
      font-size: 13px;
      line-height: 1.35;
    }

.top-model-mind-meld-note strong {
      color: var(--brand-deep);
      font-size: 14px;
    }

.top-model-mind-meld-note span {
      color: var(--text-muted);
    }

.top-mind-meld-panel {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 10px 12px;
      border: 1px solid var(--border-warm);
      border-radius: 8px;
      background: var(--surface);
    }

.top-mind-meld-panel[hidden] {
      display: none;
    }

.top-mind-meld-slots {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

.top-mind-meld-slot {
      display: flex;
      flex-direction: column;
      gap: 4px;
      color: var(--text-soft);
      font-size: 12px;
      font-weight: 700;
    }

.top-mind-meld-slot select {
      width: 100%;
      min-height: 38px;
      padding: 6px 8px;
      color: var(--text);
      border: 1px solid var(--border-neutral);
      border-radius: 7px;
      background: var(--surface);
      font: inherit;
      font-size: 13px;
    }

.top-model-group-title {
      margin-top: 6px;
      color: var(--text-subtle);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

.top-model-option {
      width: 100%;
      min-height: 52px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 12px;
      color: var(--text);
      background: var(--surface);
      border: 1px solid var(--border-neutral);
      border-radius: 7px;
      cursor: pointer;
      font: inherit;
      font-size: 13px;
      line-height: 1.25;
      text-align: left;
    }

.top-model-option-main {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

.top-model-option-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--text);
      font-weight: 700;
    }

.top-model-option-provider {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--text-subtle);
      font-size: 11px;
      font-weight: 500;
    }

.top-model-tags {
      flex: 0 1 auto;
      display: flex;
      justify-content: flex-end;
      gap: 5px;
      flex-wrap: wrap;
      max-width: 52%;
    }

.top-model-tag {
      display: inline-flex;
      align-items: center;
      min-height: 20px;
      padding: 2px 7px;
      color: var(--brand-strong);
      background: var(--surface-purple);
      border: 1px solid var(--border-purple);
      border-radius: 999px;
      font-size: 10px;
      font-weight: 700;
      line-height: 1.2;
      white-space: nowrap;
    }

.top-model-option:hover {
      color: var(--brand-strong);
      border-color: var(--border-purple-strong);
      background: var(--surface-tint);
    }

.top-model-option:disabled {
      color: var(--text-disabled);
      cursor: not-allowed;
      background: var(--surface-muted);
    }

.top-model-option:disabled .top-model-option-name,
.top-model-option:disabled .top-model-option-provider {
      color: var(--text-disabled);
    }

.top-model-option[aria-pressed="true"] {
      color: var(--brand-strong);
      border-color: var(--brand);
      background: var(--surface-purple-active);
      font-weight: 700;
    }

.top-model-option[aria-pressed="true"] .top-model-tag {
      background: var(--surface);
    }

.top-model-empty {
      color: var(--text-subtle);
      font-size: 13px;
    }

.history-more-btn {
      width: 100%;
      min-height: 36px;
      padding: 7px 12px;
      color: var(--brand);
      background: var(--surface-tint);
      border: 1px solid var(--border-purple);
      border-radius: 8px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 650;
    }

.history-more-btn[hidden] { display: none; }

/* Settings panel — appears below header content when opened.
       Collapsed by default to keep the main UI focused. The panel owns
       its own scrolling on small screens so it cannot consume the entire
       transcript area when native voice settings are expanded. */
    .settings-panel {
      display: none;
      flex-direction: column;
      gap: 10px;
      padding: 12px 14px;
      background: var(--surface-warm);
      border: 1px solid var(--border-warm);
      border-radius: 8px;
      margin-top: 4px;
      max-height: min(68vh, 620px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

.settings-panel.open { display: flex; }

body.settings-open .status,
body.settings-open .transcript-shell,
body.settings-open .controls,
body.settings-open .quick-audio-row,
body.settings-open .mode-toggle,
body.settings-open .hint,
body.history-open .status,
body.history-open .transcript-shell,
body.history-open .controls,
body.history-open .quick-audio-row,
body.history-open .mode-toggle,
body.history-open .hint,
body.model-open .status,
body.model-open .transcript-shell,
body.model-open .controls,
body.model-open .quick-audio-row,
body.model-open .mode-toggle,
body.model-open .hint {
      display: none;
    }

body.settings-open .settings-panel {
      flex: 0 1 auto;
      max-height: min(86vh, 920px);
      margin-top: 0;
    }

body.history-open .top-history-panel {
      flex: 0 1 auto;
      max-height: min(76vh, 760px);
    }

body.model-open .top-model-panel {
      flex: 0 1 auto;
      max-height: min(76vh, 760px);
    }

.settings-panel-header {
      position: sticky;
      top: -12px;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: -12px -14px 2px -14px;
      padding: 10px 14px;
      background: var(--surface-warm);
      border-bottom: 1px solid var(--border-warm);
      border-radius: 8px 8px 0 0;
    }

.settings-panel-title {
      color: var(--brand-strong);
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 0.03em;
    }

.settings-panel-subtitle {
      color: var(--text-subtle);
      font-size: 11px;
      line-height: 1.35;
    }

.settings-panel-close {
      padding: 6px 12px;
      color: var(--brand);
      background: var(--surface-tint);
      border: 1px solid var(--border-purple);
      border-radius: 999px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
    }

.settings-panel-close:hover { background: var(--surface-purple); }

.settings-panel-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-shrink: 0;
    }

.settings-expand-all {
      min-height: 38px;
      padding: 7px 12px;
      color: var(--brand);
      background: var(--surface-tint);
      border: 1px solid var(--border-purple);
      border-radius: 8px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
    }

.settings-expand-all:hover {
      background: var(--surface-purple);
      border-color: var(--border-purple-strong);
    }

.panel-return-btn {
      min-height: 38px;
      color: var(--return-text);
      background: var(--return-surface);
      border-color: var(--return-border);
      border-radius: 8px;
    }

.panel-return-btn:hover {
      background: var(--return-surface-hover);
    }

.settings-section {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

.settings-subsection {
      display: flex;
      flex-direction: column;
      gap: 9px;
      padding: 10px 12px 12px 12px;
      background: var(--surface);
      border: 1px solid var(--border-warm);
      border-radius: 8px;
    }

.settings-subsection-header {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

.settings-subsection-title {
      color: var(--brand-strong);
      font-size: 13px;
      font-weight: 700;
    }

.settings-subsection-subtitle {
      color: var(--text-subtle);
      font-size: 11px;
      line-height: 1.35;
    }

.settings-subsection-subtitle.error {
      color: var(--danger);
    }

.settings-field {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
    }

.settings-field label {
      min-width: 60px;
      color: var(--text-soft);
      font-weight: 500;
    }

.settings-field select {
      flex: 1;
      padding: 8px 10px;
      border: 1px solid var(--border-neutral-strong);
      border-radius: 6px;
      font-size: 14px;
      background: var(--surface);
      min-width: 0;
    }

.settings-field select:disabled {
      background: var(--border-neutral-soft);
      color: var(--text-disabled);
    }

.settings-listening-field {
      align-items: flex-start;
    }

.settings-reset-row {
      justify-content: flex-end;
      margin-top: 4px;
    }

.settings-reset-btn {
      min-height: 38px;
      padding: 7px 12px;
      font-size: 12px;
      line-height: 1.15;
      color: var(--text-subtle);
      background: var(--surface);
      border: 1px solid var(--border-neutral-strong);
      border-radius: 8px;
      cursor: pointer;
    }

.settings-reset-btn:hover {
      color: var(--brand);
      border-color: var(--brand);
    }

.settings-reset-btn:active {
      background: var(--surface-purple);
    }

/* Responsiveness preset button group. Three buttons (Snappy / Natural /
       Patient) side by side. The active one is filled with brand purple;
       inactive ones are outlined and tinted on hover. The note underneath
       clarifies that changes apply on the next mic session. */
    .responsiveness-group {
      display: flex;
      gap: 6px;
      flex: 1;
    }

.responsiveness-btn {
      flex: 1;
      padding: 6px 8px;
      font-size: 13px;
      color: var(--text-soft);
      background: var(--surface);
      border: 1px solid var(--border-neutral-strong);
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.12s, color 0.12s, border-color 0.12s;
    }

.responsiveness-btn:hover {
      color: var(--brand);
      border-color: var(--brand);
    }

.responsiveness-btn.active {
      background: var(--brand);
      color: var(--on-brand);
      border-color: var(--brand);
    }

.responsiveness-btn.active:hover {
      background: var(--brand-active);
      color: var(--on-brand);
    }

.responsiveness-note {
      font-size: 11px;
      color: var(--text-faint);
      margin-top: -2px;
      margin-left: 70px;
      font-style: italic;
      line-height: 1.45;
      max-width: 520px;
    }

@media (max-width: 600px) {
      .responsiveness-note { margin-left: 0; }
    }

/* On desktop, the full-width toggle is overkill. Constrain it to a compact
       pill on the right side of the row. Mobile keeps the full-width version
       because in a narrow viewport that reads cleaner. */
@media (min-width: 601px) {
      .quick-audio-row {
        align-self: flex-end;
      }

      .mode-toggle {
        width: auto;
        max-width: 280px;
        padding: 8px 14px;
      }
    }

/* Login overlay — full-screen modal shown at startup until Firebase Auth
       confirms the user is signed in. Subtle purple-to-blue gradient behind
       a white card, with the Many Minds logo + wordmark at the top of the
       card. Card is vertically centered; input and button stack on narrow
       screens. */
    .login-overlay {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: linear-gradient(135deg, #e9e4f7 0%, #dce6f5 50%, #e0dbf2 100%);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

.login-card {
      background: var(--surface);
      border-radius: 14px;
      padding: 32px 28px;
      max-width: 360px;
      width: 100%;
      box-shadow: 0 10px 36px rgba(89, 70, 178, 0.18);
    }

.login-brand {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      margin-bottom: 20px;
    }

.login-brand-icon {
      width: 96px;
      height: 96px;
      display: block;
    }

.login-brand-wordmark {
      font-family: 'Montserrat', system-ui, sans-serif;
      font-weight: 800;
      font-size: 24px;
      letter-spacing: 0.1em;
      color: var(--ink-navy);
      margin: 6px 0 0 0;
    }

.login-brand-tagline {
      font-family: 'Montserrat', system-ui, sans-serif;
      font-weight: 600;
      font-size: 10px;
      letter-spacing: 0.18em;
      color: var(--brand);
      margin: 0;
      text-transform: uppercase;
    }

.login-title {
      /* Kept in CSS for any code paths that might still reference it,
         but hidden in the new branded layout — the wordmark serves as title. */
      display: none;
    }

.login-subtitle {
      margin: 0 0 20px 0;
      color: var(--text-muted);
      font-size: 14px;
      text-align: center;
    }

.login-form {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

.login-input {
      padding: 12px 14px;
      border: 1px solid var(--border-neutral-strong);
      border-radius: 8px;
      font-size: 16px;
      outline: none;
      transition: border-color 0.15s;
    }

.login-input:focus {
      border-color: var(--brand);
    }

.login-submit {
      padding: 12px 20px;
      background: var(--brand);
      color: var(--on-brand);
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s;
    }

.login-submit:hover {
      background: var(--brand-hover);
    }

.login-submit:disabled {
      background: var(--brand-disabled);
      cursor: wait;
    }

.login-error {
      margin-top: 12px;
      padding: 10px 12px;
      background: var(--surface-danger-soft);
      color: var(--danger);
      border-radius: 6px;
      font-size: 14px;
    }

.login-info {
      margin-top: 12px;
      padding: 10px 12px;
      background: var(--surface-info);
      color: var(--text-info);
      border-radius: 6px;
      font-size: 14px;
    }

.login-links {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 14px;
      font-size: 13px;
    }

.login-link {
      background: none;
      border: none;
      color: var(--brand);
      cursor: pointer;
      padding: 4px 0;
      font-size: 13px;
      text-decoration: underline;
      font-family: inherit;
    }

.login-link:hover {
      color: var(--brand-hover);
    }



/* Compact settings sections for secondary actions. This keeps the primary
   model/voice controls visible while moving utility buttons into collapsible
   groups that don't eat the transcript area on portrait phones. */
.settings-disclosure {
      border: 1px solid var(--border-warm);
      border-radius: 8px;
      background: var(--surface-tint);
    }

.settings-disclosure summary {
      cursor: pointer;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 4px 6px;
      align-items: center;
      padding: 10px 12px;
      color: var(--text-soft);
      font-size: 13px;
      font-weight: 650;
      list-style: none;
    }

.settings-disclosure summary::-webkit-details-marker {
      display: none;
    }

.settings-disclosure summary::before {
      content: "▶";
      color: var(--text-subtle);
      font-size: 11px;
      line-height: 1;
      transition: transform 0.12s;
    }

.settings-disclosure[open] summary::before {
      transform: rotate(90deg);
      color: var(--brand-strong);
    }

.settings-disclosure[open] summary {
      border-bottom: 1px solid var(--border-warm-soft);
      color: var(--brand-strong);
    }

.settings-voice-disclosure summary {
      align-items: start;
    }

.settings-voice-disclosure summary::before {
      grid-row: 1;
      align-self: center;
    }

.settings-summary-title {
      color: inherit;
      font-weight: 700;
    }

.settings-summary-subtitle {
      grid-column: 2;
      color: var(--text-subtle);
      font-size: 11px;
      font-weight: 500;
      line-height: 1.35;
    }

.settings-disclosure[open] .settings-summary-subtitle {
      color: var(--text-purple-muted);
    }

.settings-action-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      gap: 8px;
      padding: 10px 12px 12px 12px;
    }

.settings-action-grid-secondary {
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

.settings-preference-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 10px 12px 0 12px;
    }

.settings-tools-preferences {
      padding-bottom: 0;
    }

.settings-default-models {
      margin: 10px 12px 0 12px;
    }

.settings-voice-disclosure .settings-section,
.settings-voice-disclosure .native-settings-panel {
      margin: 10px 12px 12px 12px;
    }

.settings-global-voice-controls {
      margin: 10px 12px 0 12px;
    }

.settings-preference-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 12px;
      background: var(--surface);
      border: 1px solid var(--border-warm);
      border-radius: 8px;
      cursor: pointer;
    }

.settings-preference-row.is-disabled {
      cursor: not-allowed;
      opacity: 0.58;
    }

.settings-preference-title {
      display: block;
      color: var(--text);
      font-size: 13px;
      font-weight: 650;
    }

.settings-preference-subtitle {
      display: block;
      color: var(--text-subtle);
      font-size: 11px;
      line-height: 1.35;
      margin-top: 2px;
    }

.settings-memory-panel {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin: 10px 12px 12px 12px;
    }

.memory-create-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: stretch;
    }

.personal-words-create-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
      gap: 8px;
      align-items: stretch;
    }

.memory-create-row textarea,
.personal-words-create-row input {
      width: 100%;
      min-height: 42px;
      padding: 8px 10px;
      border: 1px solid var(--border-warm-strong);
      border-radius: 8px;
      background: var(--surface);
      color: var(--text);
      font: inherit;
      font-size: 12px;
      line-height: 1.35;
    }

.memory-create-row textarea {
      resize: vertical;
    }

.memory-search {
      width: 100%;
      min-height: 36px;
      padding: 8px 10px;
      border: 1px solid var(--border-warm-strong);
      border-radius: 8px;
      background: var(--surface);
      color: var(--text);
      font: inherit;
      font-size: 12px;
    }

.memory-search:focus {
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(89, 70, 178, 0.12);
      outline: none;
    }

.personal-word-pair {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      align-items: baseline;
    }

.personal-word-wrong {
      color: var(--text-subtle);
      text-decoration: line-through;
    }

.personal-word-arrow {
      color: var(--text-muted);
      font-size: 11px;
    }

.personal-word-preferred {
      color: var(--text);
      font-weight: 650;
    }

.mind-meld-panel-notes {
      margin-top: 12px;
      padding-top: 8px;
      border-top: 1px solid var(--border-warm-muted);
      color: var(--text-mid);
      font-size: 13px;
      line-height: 1.4;
    }

.mind-meld-panel-notes summary {
      color: var(--brand-strong);
      cursor: pointer;
      font-weight: 700;
    }

.mind-meld-panel-notes-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 8px;
    }

.mind-meld-panel-note {
      padding: 8px 10px;
      border: 1px solid var(--border-warm);
      border-radius: 8px;
      background: var(--surface);
    }

.route-trace {
      display: none;
      flex: 1 0 100%;
      margin-top: 8px;
      color: var(--text-subtle);
      font-size: 12px;
      line-height: 1.4;
    }

.turn-action-more[open] + .route-trace {
      display: block;
    }

.turn-action-more {
      display: inline-flex;
      align-items: flex-start;
      position: relative;
    }

.turn-action-more-summary {
      list-style: none;
    }

.turn-action-more-summary::-webkit-details-marker {
      display: none;
    }

.turn-action-more[open] {
      width: auto;
    }

.turn-action-more[open] > .turn-action-more-summary {
      width: fit-content;
    }

.route-trace summary {
      color: var(--text-subtle);
      cursor: pointer;
      font-weight: 600;
    }

.route-trace-body {
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin-top: 7px;
      padding: 8px 10px;
      border: 1px solid var(--border-warm);
      border-radius: 8px;
      background: var(--surface);
    }

.route-trace-row {
      display: flex;
      gap: 6px;
      align-items: baseline;
      flex-wrap: wrap;
    }

.route-trace-row strong {
      color: var(--brand-deep);
      font-size: 12px;
    }

.settings-select-row {
      align-items: center;
    }

.settings-inline-select {
      min-width: 150px;
      min-height: 36px;
      padding: 7px 9px;
      color: var(--text);
      background: var(--surface);
      border: 1px solid var(--border-warm-strong);
      border-radius: 8px;
      font: inherit;
      font-size: 12px;
    }

.settings-inline-select:disabled {
      color: var(--text-subtle);
      border-color: var(--border-warm);
      cursor: not-allowed;
      opacity: 1;
    }

.mind-meld-panel-note > strong {
      display: block;
      margin-bottom: 4px;
      color: var(--brand-deep);
      font-size: 12px;
    }

.mind-meld-panel-note-body p {
      margin: 0 0 6px 0;
    }

.mind-meld-panel-note-body p:last-child {
      margin-bottom: 0;
    }

.memory-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

.memory-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      padding: 9px 10px;
      border: 1px solid var(--border-warm);
      border-radius: 8px;
      background: var(--surface);
    }

.memory-text {
      color: var(--text);
      font-size: 13px;
      line-height: 1.4;
      overflow-wrap: anywhere;
    }

.memory-meta {
      margin-top: 3px;
      color: var(--text-subtle);
      font-size: 11px;
      line-height: 1.35;
    }

.memory-actions {
      display: flex;
      align-items: flex-start;
      gap: 6px;
    }

.memory-empty {
      padding: 9px 10px;
      color: var(--text-subtle);
      font-size: 12px;
      background: var(--surface);
      border: 1px dashed var(--border-warm-strong);
      border-radius: 8px;
    }

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

.saved-history-panel {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 10px 12px 12px 12px;
    }

.saved-history-toolbar,
.saved-history-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

.saved-history-status {
      color: var(--text-subtle);
      font-size: 12px;
      line-height: 1.35;
    }

.saved-history-status.error {
      color: var(--danger);
    }

.history-view-tabs {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0;
      margin: 0;
      padding: 8px 0;
      background: transparent;
      border-bottom: 0;
    }

.history-view-tab {
      min-height: 34px;
      color: var(--brand);
      background: var(--surface-purple);
      border: 1px solid var(--border-purple);
      border-right-width: 0;
      border-radius: 0;
      cursor: pointer;
      font: inherit;
      font-size: 12px;
      font-weight: 700;
    }

.history-view-tab:first-child {
      border-radius: 8px 0 0 8px;
    }

.history-view-tab:last-child {
      border-right-width: 1px;
      border-radius: 0 8px 8px 0;
    }

.history-view-tab.active {
      color: var(--on-brand);
      background: var(--brand);
      border-color: var(--brand);
    }

.saved-history-search-wrap {
      margin-bottom: 8px;
    }

.top-history-search-wrap {
      flex: 1 1 240px;
      margin-bottom: 0;
    }

.saved-history-search {
      width: 100%;
      min-height: 40px;
      padding: 9px 11px;
      color: var(--text);
      background: var(--surface);
      border: 1px solid var(--border-warm);
      border-radius: 8px;
      font: inherit;
      font-size: 14px;
      outline: none;
    }

.saved-history-search:focus {
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(89, 70, 178, 0.12);
    }

.saved-history-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

.saved-history-empty {
      padding: 10px 12px;
      color: var(--text-subtle);
      background: var(--surface);
      border: 1px solid var(--border-warm);
      border-radius: 8px;
      font-size: 12px;
    }

.saved-history-item {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0;
      background: var(--surface);
      border: 1px solid var(--border-warm);
      border-radius: 8px;
    }

.saved-history-open {
      min-width: 0;
      flex: 1 1 auto;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 7px;
      padding: 10px 12px;
      text-align: left;
      color: inherit;
      background: transparent;
      border: 0;
      cursor: pointer;
    }

.saved-history-item:hover,
.saved-history-item:focus-within {
      border-color: var(--border-purple-strong);
      background: var(--surface-tint);
    }

.saved-history-item.active {
      border-color: var(--brand);
      box-shadow: 0 0 0 1px rgba(89, 70, 178, 0.12);
    }

.saved-history-row-actions {
      flex: 0 0 190px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: nowrap;
      gap: 4px;
      padding: 8px 10px 8px 0;
    }

.saved-history-moment-item .saved-history-row-actions {
      flex: 0 0 176px;
      flex-wrap: wrap;
      align-content: center;
    }

.saved-history-row-action {
      min-height: 28px;
      padding: 4px 8px;
      color: var(--brand);
      background: var(--surface-tint);
      border: 1px solid var(--border-purple);
      border-radius: 999px;
      cursor: pointer;
      font-size: 11px;
      font-weight: 650;
      white-space: nowrap;
    }

.saved-history-row-action:hover {
      background: var(--surface-purple);
    }

.saved-history-row-action.danger {
      color: var(--danger);
      border-color: var(--danger-border);
      background: var(--danger-surface);
    }

.saved-history-row-action.danger:hover {
      background: var(--danger-surface-hover);
    }

.saved-history-title {
      min-width: 0;
      color: var(--text);
      font-size: 13px;
      font-weight: 650;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

.saved-history-pin {
      display: inline-flex;
      margin-left: 7px;
      padding: 1px 6px;
      color: var(--brand);
      background: var(--surface-purple);
      border: 1px solid var(--border-purple);
      border-radius: 999px;
      font-size: 10px;
      font-weight: 700;
      vertical-align: middle;
    }

.saved-history-model,
.saved-history-date {
      color: var(--text-subtle);
      font-size: 11px;
      line-height: 1.35;
    }

.saved-history-meta-row {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 7px;
      color: var(--text-subtle);
      font-size: 11px;
      line-height: 1.35;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

.saved-history-meta-row > span + span::before {
      content: "";
      display: inline-block;
      width: 4px;
      height: 4px;
      margin-right: 7px;
      border-radius: 999px;
      background: var(--text-subtle);
      opacity: 0.55;
      vertical-align: 0.12em;
    }

.saved-history-snippet {
      grid-column: 1 / -1;
      color: var(--text-muted);
      font-size: 12px;
      line-height: 1.4;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
    }

.saved-history-note {
      grid-column: 1 / -1;
      color: var(--text-soft);
      font-size: 12px;
      font-style: italic;
      line-height: 1.4;
    }

.saved-history-moment-item .saved-history-note {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
    }

.saved-history-moment-item .saved-history-note + .saved-history-snippet {
      -webkit-line-clamp: 2;
    }

.saved-history-tags {
      grid-column: 1 / -1;
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 2px;
    }

.saved-history-tag {
      display: inline-flex;
      align-items: center;
      max-width: 100%;
      padding: 2px 6px;
      color: var(--brand);
      background: var(--surface-purple);
      border: 1px solid var(--border-purple);
      border-radius: 999px;
      font-size: 10px;
      font-weight: 700;
      line-height: 1.2;
    }

.saved-history-tag mark {
      color: var(--flag-text);
      background: var(--flag-chip-surface);
      border-radius: 3px;
      padding: 0 1px;
      font-weight: 800;
    }

.history-important-filters {
      display: block;
    }

.history-important-filters[hidden] {
      display: none;
    }

.history-important-filter-panel {
      background: var(--surface);
      border: 1px solid var(--border-neutral);
      border-radius: 8px;
    }

.history-important-filter-summary {
      display: none;
      cursor: pointer;
      padding: 8px 10px;
      color: var(--text-soft);
      font-size: 12px;
      font-weight: 800;
      list-style: none;
    }

.history-important-filter-summary::-webkit-details-marker {
      display: none;
    }

.history-important-filter-list {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      padding: 8px 10px;
    }

.history-bulk-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin: 0 -14px -8px -14px;
      padding: 8px 14px;
      background: var(--surface-warm);
      border-top: 1px solid var(--border-warm);
      border-bottom: 0;
    }

.history-bulk-toolbar[hidden] {
      display: none;
    }

.history-bulk-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      flex-wrap: wrap;
    }

.history-bulk-actions .settings-reset-btn {
      min-height: 32px;
      padding: 5px 9px;
      font-size: 11px;
    }

.history-bulk-toolbar.is-deleting {
      background: var(--surface-info);
    }

.history-bulk-select {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 12px 0 0 10px;
    }

.history-bulk-select input {
      width: 18px;
      height: 18px;
      accent-color: var(--brand);
      cursor: pointer;
    }

.history-important-filter {
      min-height: 28px;
      padding: 4px 9px;
      color: var(--text-soft);
      background: var(--surface-muted);
      border: 1px solid var(--border-neutral);
      border-radius: 999px;
      cursor: pointer;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.2;
    }

.history-important-filter:hover {
      color: var(--brand);
      border-color: var(--border-purple-strong);
      background: var(--surface-tint);
    }

.history-important-filter[aria-pressed="true"] {
      color: var(--brand-strong);
      background: var(--surface-purple-active);
      border-color: var(--brand);
    }

.history-important-filter-count {
      color: var(--text-subtle);
      font-weight: 600;
    }

@media (max-width: 600px) {
      .history-important-filter-summary {
        display: block;
      }

      .history-important-filter-panel:not([open]) .history-important-filter-list {
        display: none;
      }
    }

.history-reflection {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

.history-reflection-metrics {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
      gap: 8px;
    }

.history-reflection-metric {
      min-width: 0;
      padding: 10px;
      background: var(--surface);
      border: 1px solid var(--border-warm);
      border-radius: 8px;
    }

.history-reflection-metric strong {
      display: block;
      color: var(--text);
      font-size: 20px;
      line-height: 1.1;
    }

.history-reflection-metric span {
      display: block;
      margin-top: 4px;
      color: var(--text-subtle);
      font-size: 11px;
      line-height: 1.25;
    }

.history-reflection-section {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

.history-reflection-section h3 {
      margin: 0;
      color: var(--brand-strong);
      font-size: 13px;
      line-height: 1.25;
    }

.history-reflection-theme-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

.history-reflection-theme {
      min-width: 0;
      padding: 10px;
      text-align: left;
      color: inherit;
      background: var(--surface);
      border: 1px solid var(--border-purple);
      border-radius: 8px;
      cursor: pointer;
      font: inherit;
    }

.history-reflection-theme:hover,
.history-reflection-theme:focus-visible {
      background: var(--surface-tint);
      border-color: var(--border-purple-strong);
      outline: none;
    }

.history-reflection-theme strong,
.history-reflection-theme span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

.history-reflection-theme strong {
      color: var(--text);
      font-size: 13px;
    }

.history-reflection-theme span {
      margin-top: 3px;
      color: var(--text-subtle);
      font-size: 11px;
    }

.history-reflection-rows {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

.history-reflection-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      padding: 9px 10px;
      background: var(--surface);
      border: 1px solid var(--border-warm);
      border-radius: 8px;
    }

.history-reflection-row-body {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

.history-reflection-row-body strong {
      color: var(--text);
      font-size: 12px;
      line-height: 1.35;
    }

.history-reflection-row-body span {
      color: var(--text-subtle);
      font-size: 11px;
      line-height: 1.3;
    }

.history-reflection-row-actions {
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 4px;
    }

.saved-history-snippet mark {
      color: var(--flag-text);
      background: var(--flag-chip-surface);
      border-radius: 3px;
      padding: 0 2px;
      font-weight: 700;
    }

.saved-history-moment-role,
.saved-history-moment-role-model {
      color: var(--brand);
      font-size: 11px;
      font-weight: 700;
    }

.saved-history-date {
      white-space: nowrap;
    }

@media (max-width: 720px) {
      .saved-history-item {
        align-items: stretch;
        flex-direction: column;
        gap: 0;
      }

      .saved-history-row-actions {
        flex: 0 0 auto;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding: 0 12px 10px;
      }
    }

.saved-history-detail {
      max-height: 260px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 10px 12px;
      background: var(--surface);
      border: 1px solid var(--border-warm);
      border-radius: 8px;
    }

.saved-history-detail[hidden],
.saved-history-actions[hidden] {
      display: none;
    }

.saved-history-detail-title {
      color: var(--brand-strong);
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 3px;
    }

.saved-history-detail-meta {
      color: var(--text-subtle);
      font-size: 11px;
      line-height: 1.35;
      margin-bottom: 10px;
    }

.saved-history-turn {
      padding: 8px 0;
      padding-right: 34px;
      border-top: 1px solid var(--border-warm-soft);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
    }

.saved-history-turn:first-of-type {
      border-top: 0;
    }

.saved-history-turn:hover {
      background: var(--surface-tint);
    }

.saved-history-role {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: var(--text-soft);
      font-size: 11px;
      font-weight: 700;
      margin-bottom: 3px;
    }

.saved-history-content {
      color: var(--text);
      font-size: 13px;
      line-height: 1.45;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

.saved-history-delete-btn {
      color: var(--danger);
      border-color: var(--danger-border);
    }

.unsaved-chat-overlay[hidden] { display: none; }

.unsaved-chat-overlay {
      position: fixed;
      inset: 0;
      z-index: 10001;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(11, 19, 43, 0.38);
    }

.unsaved-chat-dialog {
      width: min(440px, 100%);
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 18px;
      background: var(--surface);
      border: 1px solid var(--border-purple);
      border-radius: 12px;
      box-shadow: 0 16px 42px rgba(11, 19, 43, 0.24);
    }

.unsaved-chat-dialog h2 {
      margin: 0 0 5px 0;
      color: var(--brand-strong);
      font-size: 16px;
      line-height: 1.2;
    }

.unsaved-chat-dialog p {
      margin: 0;
      color: var(--text-soft);
      font-size: 13px;
      line-height: 1.4;
    }

.unsaved-chat-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }

.settings-feedback-btn,
.feedback-submit-btn {
      color: var(--brand);
      border-color: var(--border-purple-strong);
      background: var(--surface-tint);
      font-weight: 650;
    }

.feedback-overlay[hidden] { display: none; }
.pinned-comment-overlay[hidden] { display: none; }

.feedback-overlay,
.pinned-comment-overlay {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(11, 19, 43, 0.38);
    }

.feedback-dialog,
.pinned-comment-dialog {
      width: min(520px, 100%);
      max-width: calc(100vw - 36px);
      flex: 0 1 520px;
      min-width: 0;
      box-sizing: border-box;
      max-height: min(82vh, 720px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 18px;
      background: var(--surface);
      border: 1px solid var(--border-purple);
      border-radius: 14px;
      box-shadow: 0 16px 42px rgba(11, 19, 43, 0.24);
    }

.feedback-dialog-header,
.pinned-comment-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

.feedback-dialog h2,
.pinned-comment-dialog h2 {
      margin: 0 0 4px 0;
      color: var(--ink-navy);
      font-size: 18px;
      font-weight: 700;
    }

.feedback-dialog p,
.pinned-comment-dialog p {
      margin: 0;
      color: var(--text-muted);
      font-size: 13px;
      line-height: 1.4;
    }

.feedback-close {
      width: 34px;
      height: 34px;
      border: 1px solid var(--border-neutral);
      border-radius: 999px;
      background: var(--surface-tint);
      color: var(--text-soft);
      cursor: pointer;
      font-size: 22px;
      line-height: 1;
    }

.feedback-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      color: var(--text-soft);
      font-size: 13px;
      font-weight: 650;
    }

.feedback-field input,
.feedback-field select,
.feedback-field textarea {
      width: 100%;
      box-sizing: border-box;
      padding: 10px 12px;
      border: 1px solid var(--border-neutral-strong);
      border-radius: 8px;
      font: inherit;
      font-weight: 400;
      color: var(--text);
      background: var(--surface);
    }

.feedback-field textarea {
      resize: vertical;
      min-height: 120px;
      line-height: 1.45;
    }

.pinned-comment-tags-status {
      min-height: 15px;
      color: var(--text-faint);
      font-size: 11px;
      font-weight: 500;
      line-height: 1.35;
    }

.pinned-comment-tags-status.error {
      color: var(--danger);
    }

.feedback-options {
      display: flex;
      flex-direction: column;
      gap: 8px;
      color: var(--text-muted);
      font-size: 13px;
    }

.feedback-options label {
      display: flex;
      align-items: center;
      gap: 8px;
    }

.feedback-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 2px;
    }

.feedback-status {
      min-height: 18px;
      color: var(--text-subtle);
      font-size: 12px;
      line-height: 1.35;
    }

.feedback-status.success { color: var(--success); }
.feedback-status.error { color: var(--danger); }

@media (max-width: 600px) {
      .top-chat-controls {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.4fr);
        gap: 6px;
      }

      .top-chat-control {
        gap: 4px;
        padding: 8px 7px;
        font-size: 12px;
      }

      .top-history-header {
        flex-wrap: wrap;
      }

      .top-model-header {
        flex-wrap: wrap;
      }

      .top-model-heading {
        flex: 1 1 160px;
      }

      .top-model-grouping {
        align-self: stretch;
        width: 100%;
      }

      .top-model-response-mode {
        grid-template-columns: 1fr;
      }

      .top-mind-meld-slots {
        grid-template-columns: 1fr;
      }

      .top-history-search-wrap {
        flex: 1 1 100%;
        order: 3;
      }

      .history-view-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
        padding: 6px 0;
      }

      .history-view-tab {
        min-height: 31px;
        border-right-width: 1px;
        border-radius: 8px;
        font-size: 11px;
      }

      .history-view-tab:first-child,
      .history-view-tab:last-child {
        border-radius: 8px;
      }

      .history-reflection-metrics,
      .history-reflection-theme-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .history-reflection-row {
        grid-template-columns: 1fr;
      }

      .history-reflection-row-actions {
        justify-content: flex-start;
      }

      .top-history-panel {
        gap: 8px;
        padding: 10px;
        max-height: min(68vh, 560px);
      }

      .top-history-sticky-shell {
        top: -10px;
        margin: -10px -10px 0 -10px;
        padding: 0 10px 7px 10px;
      }

      .top-history-sticky-shell .top-history-header {
        margin: 0 -10px;
        padding: 9px 10px;
      }

      .saved-history-list {
        gap: 5px;
      }

      .saved-history-item {
        align-items: stretch;
        flex-wrap: wrap;
        gap: 0;
      }

      .saved-history-open {
        flex-basis: 100%;
        gap: 5px;
        padding: 8px 10px;
      }

      .history-bulk-select + .saved-history-open {
        flex-basis: calc(100% - 38px);
      }

      .saved-history-snippet {
        -webkit-line-clamp: 2;
      }

      .saved-history-moment-item .saved-history-note + .saved-history-snippet {
        -webkit-line-clamp: 1;
      }

      .saved-history-tags {
        gap: 4px;
      }

      .saved-history-row-actions,
      .saved-history-moment-item .saved-history-row-actions {
        flex: 1 1 100%;
        width: 100%;
        justify-content: flex-start;
        padding: 0 8px 8px 8px;
        border-top: 1px solid var(--border-neutral-soft);
      }

      .saved-history-row-action {
        min-height: 30px;
        padding: 4px 7px;
      }

      .history-bulk-toolbar {
        margin: 0 -10px -7px -10px;
        padding: 7px 10px;
      }

      .history-important-filter-list {
        gap: 5px;
        padding: 7px 8px 8px 8px;
      }

      .history-reflection {
        gap: 10px;
      }

      .history-reflection-metric,
      .history-reflection-theme,
      .history-reflection-row {
        padding: 8px;
      }

      .top-model-option {
        align-items: flex-start;
        flex-direction: column;
      }

      .top-model-tags {
        justify-content: flex-start;
        max-width: 100%;
      }

      .settings-panel {
        max-height: 56vh;
        padding: 10px 12px;
      }

      .settings-panel-header {
        flex-wrap: wrap;
        top: -10px;
        margin: -10px -12px 0 -12px;
        padding: 9px 12px;
      }

      .settings-panel-actions {
        width: 100%;
      }

      .settings-expand-all,
      .settings-panel-close {
        flex: 1 1 0;
      }

      .settings-field {
        align-items: stretch;
        gap: 6px;
      }

      .settings-field label {
        min-width: 0;
      }

      .settings-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .settings-reset-btn {
        min-height: 44px;
        padding: 8px 10px;
        font-size: 12px;
      }

      .settings-select-row {
        align-items: stretch;
        flex-direction: column;
      }

      .settings-inline-select {
        width: 100%;
      }

      .feedback-overlay,
      .pinned-comment-overlay {
        align-items: flex-end;
        padding: 10px;
      }

      .feedback-dialog,
      .pinned-comment-dialog {
        max-height: 88vh;
        border-radius: 14px 14px 10px 10px;
      }

      .feedback-actions .settings-reset-btn {
        flex: 1 1 110px;
      }
    }

/* Native voice model-aware settings. Inserted dynamically by settings.js when
   the selected model is a native realtime model. Sandwich-only Cartesia/STT
   controls are hidden in that state because they don't apply to native audio. */
.settings-panel.native-settings-active .sandwich-only-setting {
      display: none;
    }

.pinned-comment-excerpt {
      padding: 10px 12px;
      color: var(--text-muted);
      background: var(--surface-tint);
      border: 1px solid var(--border-warm);
      border-radius: 8px;
      font-size: 13px;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

.settings-panel.native-settings-active .settings-primary-section {
      display: none;
    }

.native-settings-panel {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 12px;
      background: var(--surface-panel-soft);
      border: 1px solid var(--border-panel-soft);
      border-radius: 8px;
    }

.native-settings-panel[hidden] { display: none; }

.native-settings-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

.native-settings-title {
      color: var(--brand-strong);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.03em;
    }

.native-settings-subtitle,
.native-settings-description,
.native-settings-hint {
      color: var(--text-muted);
      font-size: 12px;
      line-height: 1.45;
    }

.native-settings-description {
      color: var(--text-soft);
    }

.native-settings-badge,
.native-choice-tag {
      display: inline-flex;
      align-items: center;
      padding: 2px 7px;
      border: 1px solid var(--border-purple-strong);
      border-radius: 999px;
      color: var(--brand);
      background: var(--surface-tint);
      font-size: 10px;
      font-weight: 600;
      white-space: nowrap;
    }

.native-settings-fields {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

.native-settings-field {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

.native-settings-label {
      color: var(--text-soft);
      font-size: 12px;
      font-weight: 700;
    }

.native-settings-choice-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
      gap: 6px;
    }

.native-choice-chip,
.native-segment-btn,
.native-toggle-row {
      border: 1px solid var(--border-neutral-strong);
      background: var(--surface);
      color: var(--text-soft);
      border-radius: 7px;
      cursor: pointer;
      font-family: inherit;
      transition: background 0.12s, color 0.12s, border-color 0.12s;
    }

.native-choice-chip {
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 7px;
      padding: 7px 9px;
      font-size: 12px;
    }

.native-choice-chip > span:first-child {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

.native-choice-tag {
      max-width: min(86px, 48%);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex: 0 1 auto;
    }

.native-choice-chip:hover,
.native-segment-btn:hover,
.native-toggle-row:hover {
      color: var(--brand);
      border-color: var(--brand);
    }

.native-choice-chip[aria-pressed="true"],
.native-segment-btn[aria-pressed="true"] {
      color: var(--on-brand);
      background: var(--brand);
      border-color: var(--brand);
    }

.native-choice-chip[aria-pressed="true"] .native-choice-tag {
      color: var(--on-brand);
      border-color: rgba(255, 255, 255, 0.55);
      background: rgba(255, 255, 255, 0.16);
    }

.native-settings-segmented {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
      gap: 6px;
    }

.native-segment-btn {
      padding: 7px 8px;
      font-size: 12px;
      text-transform: capitalize;
    }

.native-toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 12px;
      text-align: left;
    }

.native-toggle-copy {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

.native-toggle-track {
      position: relative;
      width: 42px;
      height: 24px;
      flex: 0 0 auto;
      border-radius: 999px;
      background: var(--border-neutral-strong);
      transition: background 0.12s;
    }

.native-toggle-knob {
      position: absolute;
      top: 3px;
      left: 3px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--surface);
      transition: transform 0.12s;
    }

.native-toggle-row[aria-pressed="true"] .native-toggle-track {
      background: var(--brand);
    }

.native-toggle-row[aria-pressed="true"] .native-toggle-knob {
      transform: translateX(18px);
    }

@media (max-width: 600px) {
      .personal-words-create-row {
        grid-template-columns: 1fr;
      }

      .native-settings-header { flex-direction: column; }
      .native-settings-badge { align-self: flex-start; }
      .native-settings-panel {
        padding: 10px;
      }
      .native-settings-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .native-choice-chip {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
      }
    }