/* Fragment 4/9 of the former static/style.css.
 *
 * This is a mechanical, order-preserving slice: rules were moved verbatim
 * and this file's position in the <link> order of static/index.html is what
 * keeps the cascade identical. Reordering the links, or moving a rule between
 * fragments, can change which of two competing declarations wins.
 *
 * static/index.html and the PRECACHE list in static/sw.js must list every
 * fragment in the same order. tests/test_static_stylesheet_manifest.py and
 * tests/test_css_computed_style_snapshot.py both fail if that drifts.
 */
/* ===== Markdown highlighting — document editor =====
   IMPORTANT: this is an overlay layered behind a transparent textarea, so
   every styled token must occupy the EXACT same width as the corresponding
   characters in the textarea. Anything that changes glyph metrics
   (font-weight/style, padding, border, letter-spacing) makes the caret drift
   away from the rendered glyph underneath. Color / background / text-
   decoration are safe — they don't change layout width. */
.doc-editor-highlight .language-markdown .hljs-section {
  color: var(--hl-keyword, #c678dd);
}
.doc-editor-highlight .language-markdown .hljs-strong {
  color: var(--hl-number, #d19a66);
}
.doc-editor-highlight .language-markdown .hljs-emphasis {
  color: var(--hl-string, #e5c07b);
}
.doc-editor-highlight .language-markdown .hljs-bullet {
  color: var(--hl-builtin, #56b6c2);
}
.doc-editor-highlight .language-markdown .hljs-code {
  color: var(--hl-builtin, #56b6c2);
  background: color-mix(in srgb, var(--hl-builtin, #56b6c2) 10%, transparent);
  border-radius: 2px;
}
.doc-editor-highlight .language-markdown .hljs-link {
  color: var(--hl-function, #61afef);
  text-decoration: underline;
}
.doc-editor-highlight .language-markdown .hljs-quote {
  color: var(--hl-comment, #828997);
}
.doc-editor-highlight .language-markdown .hljs-symbol {
  color: var(--red);
}
/* Standalone [bracketed text] — scene directions, annotations */
.doc-editor-highlight .language-markdown .md-bracket {
  color: var(--hl-builtin, #56b6c2);
  opacity: 0.85;
}
/* Heading # markers — dimmer than the heading text */
.doc-editor-highlight .language-markdown .md-heading-marker {
  color: var(--hl-comment, #828997);
  font-weight: 400;
}

/* ===== CUSTOM PRESET MODAL ===== */

.preset-modal-content {
  width: min(460px, 90vw);
  border-radius: 12px;
  overflow: hidden;
}
.preset-modal-body {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Footer Start/Cancel buttons get a leading icon. Done via ::before + a masked
   SVG (not an inline <svg> child) because the labels are set with .textContent,
   which would wipe a child element on every tab switch. background:currentColor
   makes the icon follow the button's text color. */
#save-custom-preset,
#cancel-custom-preset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#save-custom-preset::before,
#cancel-custom-preset::before {
  content: "";
  width: 13px; height: 13px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--_btn-ic) center / contain no-repeat;
  mask: var(--_btn-ic) center / contain no-repeat;
}
#save-custom-preset::before {
  --_btn-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'/%3E%3C/svg%3E");
}
#cancel-custom-preset::before {
  --_btn-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

.preset-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin: 0 -10px 12px;
  padding: 0 10px;
  margin: 0 -16px;
  padding: 0 16px;
  margin-bottom: 12px;
}

.preset-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.preset-tab-icon { flex-shrink: 0; }
/* On narrow widths the icon + label can crowd 4 tabs — drop the labels to
   icon-only so the row stays clean. */
@media (max-width: 460px) {
  .preset-tab span { display: none; }
}

.preset-tab:hover {
  color: var(--fg);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
}

.preset-tab.active {
  color: var(--red);
  border-bottom-color: var(--red);
}

.preset-tab-content {
  overflow: hidden;
}
.preset-tab-content.hidden {
  display: none;
}

.preset-templates-hint {
  font-size: 11px;
  color: var(--color-muted);
  margin: 0 0 8px;
}

.prompt-templates-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
}

.prompt-template-card {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  cursor: pointer;
  transition: all 0.15s;
}

.prompt-template-card:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.prompt-template-card.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.prompt-template-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 4px;
}

.prompt-template-preview {
  font-size: 11px;
  color: var(--color-muted);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preset-slider-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  margin-bottom: 6px;
}

.preset-slider-row label {
  font-size: 13px;
  color: var(--fg);
  font-weight: 500;
  margin: 0;
}

.preset-slider-value {
  font-size: 12px;
  color: var(--fg);
  font-weight: 600;
  min-width: 40px;
  text-align: right;
}

.preset-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--border);
  border-radius: 4px;
  outline: none;
  margin-bottom: 4px;
  box-sizing: border-box;
  display: block;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
}

.preset-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--red, var(--fg));
  cursor: pointer;
  border: 2px solid var(--panel);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.preset-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--red, var(--fg));
  cursor: pointer;
  border: 2px solid var(--panel);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.preset-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 4px;
}

.preset-range::-moz-range-track {
  height: 6px;
  background: var(--border);
  border-radius: 4px;
}

.preset-temp-hints {
  display: flex;
  font-size: 10px;
  color: var(--color-muted);
  margin-top: -4px;
  margin-bottom: 10px;
  padding: 0 2px;
  opacity: 0.7;
}
.preset-temp-hints span {
  flex: 1;
}
.preset-temp-hints span:nth-child(2) {
  text-align: center;
}
.preset-temp-hints span:last-child {
  text-align: right;
}

.preset-clear-btn {
  padding: 7px 14px;
  background: none;
  border: 1px solid var(--border);
  color: var(--color-muted);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.15s;
}

.preset-clear-btn:hover {
  color: var(--color-error);
  border-color: var(--color-error);
}

.preset-hint-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--border);
  font-size: 10px;
  font-weight: 600;
  color: var(--color-muted);
  cursor: help;
  vertical-align: middle;
  margin-left: 4px;
  transition: all 0.15s;
}
.preset-hint-icon:hover {
  color: var(--fg);
  border-color: var(--fg);
}

.preset-section-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  padding: 0 2px;
}

.user-template-card {
  position: relative;
}
.user-template-delete {
  background: none;
  border: none;
  color: var(--color-muted);
  font-size: 13px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.user-template-card:hover .user-template-delete {
  opacity: 1;
}
.user-template-delete:hover {
  color: var(--color-error);
}

.preset-save-template-btn {
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: none;
  color: var(--fg);
  cursor: pointer;
  transition: all 0.15s;
}
.preset-save-template-btn:hover {
  border-color: var(--accent, var(--red));
  color: var(--accent, var(--red));
}

.char-prompt-wrap {
  position: relative;
}
.char-prompt-wrap textarea {
  padding-bottom: 28px;
}
.char-expand-btn {
  position: absolute;
  bottom: 14px;
  right: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--color-muted);
  font-size: 11px;
  padding: 2px 8px;
  cursor: pointer;
  transition: all 0.15s;
  margin: 0;
  z-index: 1;
}
.char-expand-btn:hover {
  color: var(--red);
  border-color: var(--red);
}
.char-expand-btn.expanding {
  opacity: 0.5;
  pointer-events: none;
}

/* Memory scope bar (My Memories / Characters) */
.memory-scope-bar {
  display: flex;
  gap: 0;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.memory-scope-btn {
  flex: 1;
  padding: 8px 12px !important;
  margin: 0 !important;
  font-size: 11px !important;
  font-weight: 600;
  background: none;
  border: none;
  color: var(--fg);
  opacity: 0.5;
  cursor: pointer;
  transition: all 0.15s;
}
.memory-scope-btn + .memory-scope-btn {
  border-left: 1px solid var(--border);
}
.memory-scope-btn.active {
  background: color-mix(in srgb, var(--red) 12%, transparent);
  color: var(--red);
  opacity: 1;
}
.memory-scope-btn:hover:not(.active) {
  background: color-mix(in srgb, var(--fg) 5%, transparent);
}
.memory-char-list {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.memory-char-chip {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: none;
  color: var(--fg);
  cursor: pointer;
  transition: all 0.15s;
  margin: 0;
}
.memory-char-chip.active {
  background: color-mix(in srgb, var(--red) 12%, transparent);
  border-color: var(--red);
  color: var(--red);
}
.memory-char-chip:hover:not(.active) {
  background: color-mix(in srgb, var(--fg) 6%, transparent);
}

/* Disabled state dims the form */
#char-fields-wrap.disabled {
  opacity: 0.35;
  pointer-events: none;
  filter: grayscale(0.5);
  transition: opacity 0.2s, filter 0.2s;
}
#char-fields-wrap {
  transition: opacity 0.2s, filter 0.2s;
}

/* Name combo: input + delete btn */
.char-name-combo {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-bottom: 8px;
}
.char-name-combo input,
.char-name-combo select {
  flex: 1;
}
.char-template-select {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg);
  padding: 6px 8px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.char-template-select:focus {
  outline: none;
  border-color: var(--red);
}
.char-action-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--color-muted);
  font-size: 11px;
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  margin: 0 !important;
  white-space: nowrap;
  /* Uniform width so the trailing button column matches between the select
     row (+ New) and the name row (Reset) — that keeps the select and the
     name input the same width, since both fields flex:1 into the leftover. */
  min-width: 64px;
  text-align: center;
}
.char-action-btn:hover {
  color: var(--fg);
  border-color: var(--fg);
}
#char-delete-template-btn:hover {
  color: var(--color-error);
  border-color: var(--color-error);
}

/* Character toggle row in preset modal */
.preset-toggle-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--fg);
}
.preset-sub-option {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--color-muted);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.preset-mem-choice {
  flex: 1;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: none;
  color: var(--fg);
  cursor: pointer;
  transition: all 0.15s;
  margin: 0;
}
.preset-mem-choice.active {
  background: color-mix(in srgb, var(--red) 12%, transparent);
  border-color: var(--red);
  color: var(--red);
}
.preset-mem-choice:hover:not(.active) {
  background: color-mix(in srgb, var(--fg) 6%, transparent);
}


/* ===== MEMORY MODAL ===== */

.memory-modal-content {
  width: min(560px, 90vw);
  max-height: 78vh;
  font-size: 12px;
  overflow: hidden;   /* clip both axes; the inner .memory-modal-body owns scrolling.
                         (overflow-x alone promotes overflow-y to `auto` → a stray vertical scrollbar) */
  /* Subtle synapse-pulse — a soft radial glow that breathes in/out.
     Layered over the existing modal bg so it shows through without
     overpowering content. */
  position: relative;
  isolation: isolate;
}
.memory-modal-content::before { content: none; }
@media (prefers-reduced-motion: reduce) {
  .memory-modal-content::before { animation: none; opacity: 0.4; }
}
.memory-modal-content .modal-header h4 {
  font-size: 1rem;
}

.memory-modal-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  overflow-x: hidden;        /* Stop synapse-pulse pseudo-elements from triggering a sideways scrollbar */
  overscroll-behavior: contain;
  min-height: 0;
  /* Fill the modal-content's height so the flex chain (tab-panel → admin-card
     → list → expanded card) is bounded. Without this the chain grows to
     content, so an expanded skill card pushed its footer off-screen; capping
     the preview then left it floating too high. Bounding here lets the
     preview flex to fill and the footer pin to the bottom naturally. */
  flex: 1 1 auto;
}
.memory-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin: -4px -4px 0;
  padding: 0 4px;
  flex-shrink: 0;
}
#memory-modal [data-memory-scope].hidden {
  display: none !important;
}
.memory-tab {
  background: none;
  border: none;
  color: var(--fg);
  opacity: 0.5;
  font-size: 12px;
  font-family: inherit;
  padding: 8px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: opacity 0.15s, border-color 0.15s, color 0.15s, background 0.15s;
}
.memory-tab:hover {
  opacity: 0.8;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
}
.memory-tab.active {
  opacity: 1;
  color: var(--red);
  border-bottom-color: var(--red);
}
.memory-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  /* overflow-y:auto makes the browser compute overflow-x to `auto` too, which
     produced a stray horizontal scrollbar whenever a child was slightly too
     wide (long unbroken memory text, or the skills two-column row). Clip X
     explicitly — inner code blocks keep their own overflow-x:auto. */
  overflow-x: hidden;
  flex: 1;
  min-width: 0;
  min-height: 0;
}
.memory-tab-panel.hidden { display: none; }
/* Browse: bounded flex column so #memory-list gets remaining height (not 0px).
   height:min(78vh,max-content) gives a definite cap when long, natural height
   when short. flex-basis:auto (not 0) on the list avoids collapse in auto-sized
   parents. Toolbar siblings are flex-shrink:0; only #memory-list grows. */
#memory-modal .memory-modal-content:has(
  .memory-tab-panel[data-memory-panel="browse"]:not(.hidden)
) {
  display: flex;
  flex-direction: column;
  max-height: 78vh;
  height: 78vh;
  overflow: hidden;
}
#memory-modal .memory-modal-content:has(
  .memory-tab-panel[data-memory-panel="browse"]:not(.hidden)
) .modal-header,
#memory-modal .memory-modal-content:has(
  .memory-tab-panel[data-memory-panel="browse"]:not(.hidden)
) .memory-tabs {
  flex: 0 0 auto;
}
#memory-modal .memory-modal-content:has(
  .memory-tab-panel[data-memory-panel="browse"]:not(.hidden)
) .memory-modal-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
#memory-modal .memory-tab-panel[data-memory-panel="browse"] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
#memory-modal .memory-tab-panel[data-memory-panel="browse"] > .admin-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
#memory-modal .memory-tab-panel[data-memory-panel="browse"] > .admin-card > *:not(#memory-list):not(#memory-suggestions-body) {
  flex: 0 0 auto;
}
#memory-modal .memory-tab-panel[data-memory-panel="browse"] #memory-list:not(.hidden),
#memory-modal .memory-tab-panel[data-memory-panel="browse"] #memory-suggestions-body:not(.hidden) {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
#memory-modal .memory-tab-panel[data-memory-panel="browse"] #memory-suggestions-body:not(.hidden) .memory-suggestions-header {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg);
}
#memory-modal .memory-tab-panel[data-memory-panel].hidden {
  display: none;
}
/* Settings cards dim + mute when their toggle is OFF (matches the
   .memory-toolbar-toggle "off" treatment elsewhere). */
#memory-modal .memory-tab-panel[data-memory-panel="settings"] .admin-card {
  transition: opacity 0.15s, border-color 0.15s, background 0.15s;
}
#memory-modal .memory-tab-panel[data-memory-panel="settings"] .admin-card:has(.admin-switch input:not(:checked)) {
  opacity: 0.55;
  border-color: color-mix(in srgb, var(--fg) 8%, transparent);
  background: color-mix(in srgb, var(--fg) 2%, transparent);
}
/* Skills tab — two-column layout: skills list (left, wider) + Add Skill
   form (right, narrower). Collapses to a single column on narrow screens. */
.memory-tab-panel[data-memory-panel="skills"] {
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
}
.memory-tab-panel[data-memory-panel="skills"] > .admin-card:first-of-type {
  flex: 2 1 0;
  min-width: 0;
}
/* The shared chip-scroll frame is a flex-growing row by default. In the
   vertical Skills card it must stay content-sized so #skills-list keeps the
   remaining height for the skill cards. */
.memory-tab-panel[data-memory-panel="skills"] > .admin-card > .doclib-chip-scroll-frame {
  flex: 0 0 auto;
  min-height: 25px;
}
.memory-tab-panel[data-memory-panel="skills"] > .admin-card:nth-of-type(2) {
  flex: 1 1 0;
  margin-top: 0 !important;
  min-width: 220px;
}
@media (max-width: 640px) {
  .memory-tab-panel[data-memory-panel="skills"] { flex-direction: column; }
  .memory-tab-panel[data-memory-panel="skills"] > .admin-card:nth-of-type(2) {
    margin-top: 12px !important;
  }
}
.memory-desc {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  /* 65% keeps this description text above WCAG AA 4.5:1 (50% was ~3.9:1). */
  color: color-mix(in srgb, var(--fg) 65%, transparent);
}

.memory-add-row {
  display: flex;
  gap: 6px;
  align-items: center;
  height: 32px;
}

/* Skill Import beside URL field — match input height; cancel modal-body button margin. */
.memory-add-row .theme-io-btn {
  flex: none;
  height: 28px;
  box-sizing: border-box;
  margin-top: 0;
  padding: 5px 10px;
}

.memory-add-input {
  flex: 1;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font-family: inherit;
  font-size: 12px;
  box-sizing: border-box;
}
/* Textareas need explicit vertical padding — inputs vertically center text
   via line-height/height; textareas would otherwise pin text to the top. */
textarea.memory-add-input {
  height: auto;
  padding: 6px 10px;
  line-height: 1.4;
}

.memory-add-input:focus {
  outline: none;
  border-color: var(--red);
}

.memory-add-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font-size: 16px;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}

.memory-add-btn:hover {
  background: var(--panel);
  border-color: var(--red);
  color: var(--red);
}

.memory-toolbar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0 8px;
}

.memory-toolbar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}



.memory-toolbar-btn {
  background: none;
  border: 1px solid var(--border);
  color: color-mix(in srgb, var(--fg) 60%, transparent);
  font-size: 11px;
  height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}



.memory-toolbar-btn:hover {
  border-color: var(--fg);
  color: var(--fg);
}

.memory-toolbar-btn.active {
  background: color-mix(in srgb, var(--red) 15%, transparent);
  border-color: color-mix(in srgb, var(--red) 40%, transparent);
  color: var(--red);
}
.email-note-actions .memory-toolbar-btn.active:hover {
  color: var(--fg);
}

.memory-toolbar-btn.danger {
  color: var(--color-error);
  border-color: var(--color-error);
}

.memory-toolbar-btn.danger:hover {
  background: color-mix(in srgb, var(--color-error) 10%, transparent);
}

.memory-toolbar-btn:disabled {
  opacity: 0.35;
  cursor: default;
  outline: none;
}
.memory-toolbar-btn.spinning {
  border-color: transparent;
  background: none;
}
.memory-toolbar-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  height: 24px;
  color: color-mix(in srgb, var(--fg) 60%, transparent);
  cursor: pointer;
  padding: 0 4px;
  user-select: none;
  transition: all 0.15s;
}
.memory-toolbar-toggle:hover {
  color: var(--fg);
}
.memory-toolbar-toggle .admin-switch {
  vertical-align: middle;
}
.memory-toolbar-toggle:has(input:not(:checked)) {
  opacity: 0.7;
}

/* Bulk action bar */
.memory-bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px;
  margin-bottom: 2px;
  border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--red) 5%, transparent);
  font-size: 11px;
}

.memory-bulk-bar.hidden {
  display: none;
}

/* Custom Memory sort picker — replaces the native <select> so each
   option can carry its own SVG icon. Themed to match .email-filter-btn. */
.memory-sort-picker {
  position: relative;
  top: 0;
  flex-shrink: 0;
}
.memory-sort-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 11px;
  height: 24px;
  padding: 0 8px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s, background 0.12s;
}
.memory-sort-btn:hover { border-color: color-mix(in srgb, var(--accent, var(--red)) 50%, var(--border)); }
.memory-sort-btn:focus-visible {
  outline: none;
  border-color: var(--accent, var(--red));
}
.memory-sort-current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}
.memory-sort-icon-cur {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  color: var(--accent, var(--red));
  flex-shrink: 0;
}
.memory-sort-icon-cur svg { width: 13px; height: 13px; }
.memory-sort-caret {
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform 0.15s;
}

.memory-sort-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 140px;
  z-index: 100;
  background: var(--panel, var(--bg));
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.22);
  padding: 4px;
}
.memory-sort-item {
  all: unset;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 9px;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
  color: var(--fg);
  box-sizing: border-box;
}
.memory-sort-item:hover,
.memory-sort-item:focus-visible {
  background: color-mix(in srgb, var(--fg) 8%, transparent);
}
.memory-sort-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--accent, var(--red));
  flex-shrink: 0;
}
.memory-sort-item-icon svg { width: 13px; height: 13px; }
.memory-sort-item-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Enabled/Disabled text label next to an admin toggle.
   Matches the .memory-desc treatment (same color + 11px size) so it
   visually belongs to the section description, not the switch. */
.admin-toggle-state {
  font-size: 10px;
  line-height: 1.5;
  font-weight: normal;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--fg) 65%, transparent);
}
.admin-card > div:has(.admin-switch input) .admin-toggle-state::before {
  content: "Disabled";
}
.admin-card > div:has(.admin-switch input:checked) .admin-toggle-state::before {
  content: "Enabled";
}
/* Nudge the bulk-bar action buttons up 2px (and Memory's -2px left) to
   align with the row baseline. Covers both the Memory bulk bar
   (Cancel/Delete) and the Skills bulk bar (Cancel/Approve/Delete) — both
   live inside #memory-modal. */
#memory-modal .memory-bulk-bar #memory-bulk-cancel,
#memory-modal .memory-bulk-bar #memory-bulk-delete {
  position: relative;
  top: -3px;
  left: -2px;
}
#memory-modal .memory-bulk-bar #skills-bulk-cancel,
#memory-modal .memory-bulk-bar #skills-bulk-publish,
#memory-modal .memory-bulk-bar #skills-bulk-audit,
#memory-modal .memory-bulk-bar #skills-bulk-delete-nonpassing,
#memory-modal .memory-bulk-bar #skills-bulk-delete {
  position: relative;
  top: -2px;
}
#skills-bulk-bar #skills-bulk-delete-nonpassing {
  margin-left: auto;
}
#skills-select-btn .memory-select-btn-icon {
  position: relative;
  top: -2px;
}
#doclib-research-bulk .memory-toolbar-btn {
  position: relative;
  top: 3px;
  right: 16px;
}
/* Archive bulk buttons — nudge down 1px to match research. */
#doclib-arc-bulk .memory-toolbar-btn {
  position: relative;
  top: 1px;
}
/* Same right-aligned layout for the other bulk bars — Chats, Documents,
   Archive, Skills, Memories. Cancel's auto-margin pushes the action group
   to the right; 8px of extra right padding seats it off the edge (matching
   the research bar's 8px nudge). */
#doclib-chats-bulk #doclib-chats-bulk-archive,
#doclib-bulk-bar #doclib-bulk-archive,
#doclib-arc-bulk #doclib-arc-bulk-restore,
#email-lib-bulk #email-lib-bulk-actions,
#tasks-bulk-bar #tasks-bulk-delete,
#serve-bulk-bar #serve-bulk-delete,
#gallery-bulk-bar #gallery-bulk-actions,
#gallery-editor-drafts-bulk #gallery-editor-drafts-bulk-delete,
#memory-modal .memory-bulk-bar #memory-bulk-delete,
#memory-modal .memory-bulk-bar #skills-bulk-publish {
  margin-left: auto;
  position: relative;
  top: -1px;
}

/* X-icon Cancel button used in every bulk-select bar (Esc target). The bare SVG
   sits slightly too high vs. the adjacent text buttons — nudge it down 2px. */
[id$="-bulk-cancel"] {
  background: color-mix(in srgb, var(--red) 15%, transparent);
  border-color: color-mix(in srgb, var(--red) 40%, transparent);
  color: var(--red);
}
[id$="-bulk-cancel"]:hover {
  background: color-mix(in srgb, var(--red) 24%, transparent);
  border-color: var(--red);
  color: var(--red);
}
[id$="-bulk-cancel"] svg {
  width: 12px;
  height: 12px;
  position: relative;
  top: 2px;
}
#doclib-chats-bulk,
#doclib-bulk-bar,
#doclib-arc-bulk,
#email-lib-bulk,
#tasks-bulk-bar,
#serve-bulk-bar,
#gallery-bulk-bar,
#gallery-editor-drafts-bulk,
#memory-modal .memory-bulk-bar {
  padding-right: 18px;
}
#email-lib-bulk-delete.email-bulk-loading,
#email-lib-bulk-actions.email-bulk-loading,
#tasks-bulk-delete.tasks-bulk-loading {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  opacity: 0.9;
  cursor: wait;
}
#email-lib-bulk-delete.email-bulk-loading .email-bulk-whirlpool,
#email-lib-bulk-actions.email-bulk-loading .email-bulk-whirlpool,
#tasks-bulk-delete.tasks-bulk-loading .tasks-bulk-whirlpool {
  width: 12px;
  height: 12px;
  margin: 0;
  position: relative;
  top: -1px;
}
#email-lib-bulk-delete.email-bulk-loading .email-bulk-loading-label,
#email-lib-bulk-actions.email-bulk-loading .email-bulk-loading-label,
#tasks-bulk-delete.tasks-bulk-loading .tasks-bulk-loading-label {
  position: relative;
  top: 0;
}
/* Nudge the whole memory + skills bulk buttons (icon + label together) up. */
#memory-modal #memory-bulk-bar .memory-toolbar-btn,
#memory-modal #skills-bulk-bar .memory-toolbar-btn {
  position: relative;
  top: -2px;
}

.memory-bulk-check-all {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: color-mix(in srgb, var(--fg) 60%, transparent);
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  user-select: none;
  position: relative;
  top: 0;
}
.memory-bulk-check-all:hover {
  background: color-mix(in srgb, var(--fg) 6%, transparent);
}

#memory-selected-count {
  color: color-mix(in srgb, var(--fg) 50%, transparent);
  font-size: 10px;
  flex: 1;
}

/* Custom checkbox — toggle dot (shared by select-all and per-item) */
.memory-select-cb,
.memory-bulk-check-all input {
  -webkit-appearance: none;
  appearance: none;
  width: 6px !important;
  height: 6px !important;
  min-width: 6px;
  min-height: 6px;
  max-width: 6px;
  max-height: 6px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
  align-self: center;
  position: relative;
  box-sizing: content-box;
  transition: all 0.15s;
}

.memory-select-cb:hover,
.memory-bulk-check-all input:hover {
  border-color: var(--red);
}

.memory-select-cb:checked,
.memory-bulk-check-all input:checked {
  background: var(--red);
  border-color: var(--red);
}

.memory-count {
  font-size: 11px;
  color: var(--color-muted);
}

.memory-search-input {
  height: 24px;
  margin-top: 6px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font-family: inherit;
  font-size: 11px;
  width: 100%;
  box-sizing: border-box;
}

.memory-search-input:focus {
  outline: none;
  border-color: var(--red);
}

.memory-list {
  flex: 1;
  min-height: 0;             /* Required so flex:1 inside a flex parent can shrink rather than push its parent past 85vh */
  overflow-y: auto;
  overflow-x: hidden;        /* Stop the synapse sweep from triggering a sideways scrollbar */
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.memory-item.task-paused {
  opacity: 0.45 !important;
  filter: saturate(0.55);
  background: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--fg) 2%, transparent),
    color-mix(in srgb, var(--fg) 2%, transparent) 8px,
    color-mix(in srgb, var(--fg) 5%, transparent) 8px,
    color-mix(in srgb, var(--fg) 5%, transparent) 16px
  ) !important;
}
.task-status-badge {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0;
  height: 20px;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  flex-shrink: 0;
  cursor: pointer;
  border: 1px solid transparent;
  line-height: 1;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease, filter 0.12s ease;
  user-select: none;
}
.task-state-badge > svg,
.task-state-badge > .task-state-label {
  pointer-events: none;
}
.task-state-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.task-state-label-mobile {
  display: none;
}
.task-paused-badge {
  color: var(--orange, #ffb86c);
  background: color-mix(in srgb, var(--orange, #ffb86c) 22%, transparent);
  border-color: color-mix(in srgb, var(--orange, #ffb86c) 35%, transparent);
}
.task-active-badge {
  color: var(--green, #50fa7b);
  background: color-mix(in srgb, var(--green, #50fa7b) 20%, transparent);
  border-color: color-mix(in srgb, var(--green, #50fa7b) 35%, transparent);
}
.task-run-now-badge {
  color: var(--accent, var(--red));
  background: color-mix(in srgb, var(--accent, var(--red)) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent, var(--red)) 34%, transparent);
}
.task-card-run-btn {
  appearance: none;
  height: 20px;
  min-height: 0;
  box-sizing: border-box;
  position: relative;
  top: -6px;
}
.task-state-badge svg {
  position: relative;
  top: 0;
}
.task-status-badge:hover {
  filter: brightness(1.08) saturate(1.15);
}
.task-paused-badge:hover {
  background: color-mix(in srgb, var(--orange, #ffb86c) 30%, transparent);
  border-color: color-mix(in srgb, var(--orange, #ffb86c) 55%, transparent);
}
.task-active-badge:hover {
  background: color-mix(in srgb, var(--green, #50fa7b) 28%, transparent);
  border-color: color-mix(in srgb, var(--green, #50fa7b) 55%, transparent);
}
.task-run-now-badge:hover {
  background: color-mix(in srgb, var(--accent, var(--red)) 24%, transparent);
  border-color: color-mix(in srgb, var(--accent, var(--red)) 52%, transparent);
}

.task-builtin-badge {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--accent, var(--red));
  background: color-mix(in srgb, var(--accent, var(--red)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, var(--red)) 40%, transparent);
  padding: 1px 6px;
  border-radius: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}
.task-builtin-badge.modified {
  color: var(--orange, #ff9800);
  border-color: color-mix(in srgb, var(--orange, #ff9800) 40%, transparent);
  background: color-mix(in srgb, var(--orange, #ff9800) 12%, transparent);
}
.memory-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  max-height: 200px;
  flex-shrink: 0;        /* memory-list is a flex column; without this, items get squeezed to fit */
  transition: all 0.15s;
}

.memory-item-title {
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memory-item:hover,
.doclib-card:hover {
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  border-color: color-mix(in srgb, var(--fg) 16%, transparent);
}
/* Synapse pulse — a brief horizontal light sweep runs left → right across
   each memory like a signal traversing a neural pathway. Per-item stagger
   via nth-child + varied durations keeps the list shimmering rather than
   pulsing in sync. */
#memory-list .memory-item {
  position: relative;
  overflow: hidden;
}
#memory-list .memory-item::after {
  /* Sweep highlight rides the border ring only — gradient-fill + mask cutout
     keeps the bright pulse on the 1px stroke instead of washing the body. */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(
    to right,
    transparent 0%,
    transparent calc(var(--sweep, -20%) - 8%),
    color-mix(in srgb, var(--red) 85%, transparent) var(--sweep, -20%),
    transparent calc(var(--sweep, -20%) + 8%),
    transparent 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: memory-synapse-sweep 6.2s linear infinite;
  animation-delay: 0.4s;
}
#memory-list .memory-item:nth-child(2n)::after { animation-duration: 7.4s; animation-delay: 1.6s; }
#memory-list .memory-item:nth-child(3n)::after { animation-duration: 8.8s; animation-delay: 3.2s; }
#memory-list .memory-item:nth-child(5n)::after { animation-duration: 9.3s; animation-delay: 4.7s; }
#memory-list .memory-item:nth-child(7n)::after { animation-duration: 5.5s; animation-delay: 2.3s; }
#memory-list .memory-item:hover::after { animation: none; opacity: 0; }
@property --sweep {
  syntax: '<percentage>';
  inherits: false;
  initial-value: -20%;
}
@media (prefers-reduced-motion: reduce) {
  #memory-list .memory-item::after { animation: none; opacity: 0; }
}
.memory-pinned:hover {
  background: color-mix(in srgb, var(--red) 4%, transparent);
  border-color: var(--border);
  border-left-color: var(--red);
}

.memory-item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.memory-item-text {
  font-size: 11px;
  line-height: 1.5;
  word-break: break-word;
  color: var(--fg);
}

.memory-item-edit-input {
  flex: 1;
  padding: 3px 5px;
  border-radius: 4px;
  border: 1px solid var(--red);
  background: var(--bg);
  color: var(--fg);
  font-family: inherit;
  font-size: 11px;
  min-width: 0;
}


/* Edit row: text input + category select side by side */
.memory-edit-row {
  display: flex;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.memory-edit-cat-select {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--red);
  border-radius: 4px;
  font-family: inherit;
  font-size: 9px;
  padding: 2px 8px;
  cursor: pointer;
  flex-shrink: 0;
}


/* The Add-memory category select uses the same semantic control as inline
   editing, but needs the full-size add-row dimensions. */
.memory-add-row .memory-edit-cat-select {
  height: 28px;
  min-width: 92px;
  box-sizing: border-box;
  border-color: var(--border);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 12px;
}


.memory-item-editing {
  border-color: color-mix(in srgb, var(--red) 40%, transparent);
  background: color-mix(in srgb, var(--red) 3%, transparent);
}

.memory-menu-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--color-muted);
  font-size: 18px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  padding: 0;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.memory-item:hover .memory-menu-btn {
  opacity: 1;
}

.memory-menu-btn:hover {
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  border-color: var(--border);
  color: var(--fg);
}

.memory-item-dropdown {
  display: none;
  position: fixed;
  z-index: 1000;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  min-width: auto;
  width: max-content;
}

.memory-item-dropdown .dropdown-item-compact {
  padding: 6px 8px;
  font-size: 11px;
  border-radius: 8px;
  white-space: nowrap;
}

.memory-item-dropdown .dropdown-item-compact:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.memory-item-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.15s;
}

.memory-item:hover .memory-item-actions {
  opacity: 1;
}

/* Skill rows show actions at a dim opacity by default so view/run/delete are
   always discoverable, then brighten on hover. */
.memory-item.skill-row .memory-item-actions {
  opacity: 0.35;
  position: relative;
  top: -1px;
}
.memory-item.skill-row:hover .memory-item-actions {
  opacity: 1;
}

.memory-item-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--color-muted);
  font-size: 11px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  /* Nudge the ••• menu button up on mobile so it visually aligns with the
     title row rather than sitting a hair below it. */
  .memory-item-actions .memory-item-btn { transform: translateY(-3px); }
  /* Email rows sit on a slightly different baseline (extra meta row /
     nav-arrows cluster), so pull the menu button back down 1px. */
  #email-lib-modal .memory-item-actions .memory-item-btn { transform: translateY(-2px); }
  /* Base rule above hides .memory-item-actions until hover. Mobile has no
     hover → the ⋮ button in cookbook serve / library cards was invisible
     and effectively unclickable. Force-show on mobile. */
  .memory-item-actions { opacity: 0.7 !important; }
  .memory-item-actions .memory-item-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }
}

/* Research-preview sub-sections — used by the research-tab expand pattern. */
.doclib-research-section-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
  margin: 8px 0 4px;
}
.doclib-research-sources ol {
  margin: 0;
  padding-left: 18px;
  font-size: 11px;
  line-height: 1.5;
}
.doclib-research-sources a {
  color: var(--accent, var(--red));
  text-decoration: none;
}
.doclib-research-sources a:hover { text-decoration: underline; }
.doclib-research-summary {
  font-size: 11px;
  line-height: 1.5;
}
.doclib-research-summary p { margin: 4px 0; }

.memory-item-btn:hover {
  color: var(--fg);
  border-color: var(--border);
  background: color-mix(in srgb, var(--fg) 6%, transparent);
}

.memory-item-btn.delete:hover {
  color: var(--color-error);
  border-color: var(--color-error);
}

.memory-item-btn.save {
  color: var(--red);
}

.memory-item-btn.save:hover {
  border-color: var(--red);
}

.memory-item-btn.pin {
  padding: 1px 4px;
  opacity: 0.4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.memory-item-btn.pin.active {
  opacity: 1;
}
.memory-pin-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fg);
  opacity: 0.5;
  transition: all 0.15s;
}
.memory-item-btn.pin.active .memory-pin-dot {
  background: var(--red);
  opacity: 1;
}
.memory-pinned {
  border-left: 3px solid var(--red);
  border-radius: 4px;
  background: color-mix(in srgb, var(--red) 4%, transparent);
}
.memory-pinned .memory-item-actions {
  opacity: 1;
}
.memory-pinned .memory-item-actions .memory-item-btn:not(.pin) {
  opacity: 0;
}
.memory-pinned:hover .memory-item-actions .memory-item-btn:not(.pin) {
  opacity: 1;
}

/* Category filter chips */
.memory-category-filters {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.memory-cat-chip {
  background: none;
  border: 1px solid var(--border);
  color: color-mix(in srgb, var(--fg) 60%, transparent);
  font-size: 10px;
  height: 22px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  text-transform: lowercase;
}

.memory-cat-chip:hover {
  border-color: var(--red);
  color: var(--red);
}

.memory-cat-chip.active {
  background: color-mix(in srgb, var(--red) 15%, transparent);
  border-color: color-mix(in srgb, var(--red) 40%, transparent);
  color: var(--red);
}

@media (max-width: 768px) {
  .memory-category-filters:has(.memory-cat-chip),
  .gallery-tag-chips,
  .gallery-album-chips,
  .gallery-ai-tags {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;
  }
  .memory-category-filters:has(.memory-cat-chip)::-webkit-scrollbar,
  .gallery-tag-chips::-webkit-scrollbar,
  .gallery-album-chips::-webkit-scrollbar,
  .gallery-ai-tags::-webkit-scrollbar {
    display: none;
  }
  .memory-category-filters:has(.memory-cat-chip) .memory-cat-chip,
  .gallery-tag-chips .gallery-chip,
  .gallery-album-chips .gallery-chip,
  .gallery-ai-tags .gallery-ai-chip {
    flex: 0 0 auto;
  }
}

/* Sort select — styled to match the .email-filter-btn look:
   appearance reset + custom caret so the native chevron doesn't
   collide with our icon/border treatment. */
.memory-sort-select {
  position: relative;
  top: 3px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 11px;
  height: 24px;
  padding: 0 22px 0 8px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 7px center;
  background-size: 10px 10px;
  transition: border-color 0.12s, background 0.12s;
}
.memory-sort-select:hover {
  border-color: color-mix(in srgb, var(--accent, var(--red)) 50%, var(--border));
}
.memory-sort-select:focus {
  outline: none;
  border-color: var(--red);
}

/* Memory sort wrapper: positions the SVG icon over the left
   edge of the native <select>, mirroring the email filter btn. */
.memory-sort-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  left: -2px;
}
.memory-sort-wrap .memory-sort-select {
  padding-left: 26px;
}
.memory-sort-icon {
  position: absolute;
  left: 7px;
  top: calc(50% + 1px);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  color: var(--accent, var(--red));
  pointer-events: none;
  z-index: 1;
}
.memory-sort-icon svg { width: 13px; height: 13px; }

.email-folder-picker {
  position: relative;
  top: 0;
}
.email-folder-picker-icon {
  position: absolute;
  left: 8px;
  top: calc(50% + 3px);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  color: var(--accent, var(--red));
  pointer-events: none;
  z-index: 1;
}
.email-folder-picker-icon svg {
  width: 13px;
  height: 13px;
}

/* Custom email filter picker (All / Unread / Favorites / …). Replaces the
   native <select> so options can carry SVG icons. The hidden source
   <select id="email-lib-filter"> is the value store and dispatches
   'change' on selection. */
.email-filter-picker {
  position: relative;
  top: 3px;
}
/* Desktop nudge — sits 2px higher than the mobile default so it aligns
   with the neighbouring memory-sort-select baseline. */
@media (min-width: 769px) {
  .email-filter-picker { top: 1px; }
}
.email-filter-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 11px;
  height: 24px;
  padding: 0 8px 0 8px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s, background 0.12s;
  position: relative;
  top: -4px;
}
.email-filter-btn:hover { border-color: color-mix(in srgb, var(--accent, var(--red)) 50%, var(--border)); }
.email-filter-btn:focus-visible {
  outline: none;
  border-color: var(--accent, var(--red));
}
.email-filter-current {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.email-filter-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  color: var(--accent, var(--red));
  flex-shrink: 0;
}
.email-filter-icon svg { width: 13px; height: 13px; }
.email-filter-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.email-filter-caret {
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform 0.15s;
}
.email-filter-picker .email-filter-btn[aria-expanded="true"] .email-filter-caret {
  transform: rotate(180deg);
}

.email-filter-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: auto;
  z-index: 100;
  width: max(100%, 190px);
  max-height: 320px;
  overflow-y: auto;
  background: var(--panel, var(--bg));
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.22);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.email-filter-menu[hidden] { display: none; }
.email-filter-menu-title {
  padding: 5px 9px 4px;
  color: var(--fg-muted, var(--fg));
  font-size: 10px;
  font-weight: 600;
  opacity: 0.65;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .email-filter-menu {
    width: min(210px, calc(100vw - 24px));
  }
  .email-folder-menu {
    width: min(230px, calc(100vw - 24px));
  }
}
.email-filter-group {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  opacity: 0.55;
  padding: 8px 9px 3px;
}
.email-filter-item {
  all: unset;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 9px;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
  color: var(--fg);
  box-sizing: border-box;
}
.email-filter-item:hover,
.email-filter-item:focus-visible {
  background: color-mix(in srgb, var(--fg) 8%, transparent);
}
.email-filter-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--accent, var(--red));
  flex-shrink: 0;
}
.email-filter-item-icon svg { width: 13px; height: 13px; }
.email-filter-item-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Item metadata row */
.memory-item-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

/* Category badge on each item */
.memory-cat-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  color: var(--accent, var(--red));
  text-transform: lowercase;
}

.memory-cat-identity {
  background: color-mix(in srgb, var(--hl-function) 15%, transparent);
  color: var(--hl-function);
}
.memory-cat-preference {
  background: color-mix(in srgb, var(--hl-keyword) 15%, transparent);
  color: var(--hl-keyword);
}
.memory-cat-contact {
  background: color-mix(in srgb, #98c379 15%, transparent);
  color: #98c379;
}
.memory-cat-project {
  background: color-mix(in srgb, var(--hl-string) 15%, transparent);
  color: var(--hl-string);
}
.memory-cat-goal {
  background: color-mix(in srgb, var(--red) 15%, transparent);
  color: var(--red);
}
.memory-cat-task {
  background: color-mix(in srgb, #d19a66 15%, transparent);
  color: #d19a66;
}
.memory-cat-pinned {
  background: color-mix(in srgb, var(--red) 15%, transparent);
  color: var(--red);
}

/* Source and time metadata */
.memory-item-source,
.memory-item-time,
.memory-item-uses {
  font-size: 9px;
  color: color-mix(in srgb, var(--fg) 35%, transparent);
}
.memory-item-uses {
  font-family: monospace;
  color: color-mix(in srgb, var(--fg) 55%, transparent);
}


/* Empty state */
.memory-empty {
  padding: 24px 16px;
  color: color-mix(in srgb, var(--fg) 35%, transparent);
  text-align: center;
  font-size: 11px;
  font-style: italic;
}

/* Suggestions area */
.memory-suggestions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Bound the import-review list to the modal like the sibling .memory-list,
     so a long list scrolls internally instead of overflowing the
     overflow:hidden .admin-card — which clipped lower entries and their
     save/discard controls with no usable scroll area. */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* Small gutter so the scrollbar doesn't sit flush against the item cards. */
  padding-right: 4px;
}

.memory-suggestions.hidden {
  display: none;
}

.memory-suggestions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: color-mix(in srgb, var(--fg) 70%, transparent);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  /* Pin the title + save all/back controls to the top of the scrolling
     review list so they stay reachable while the items scroll under them.
     Opaque background masks items passing beneath. */
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel);
}
.memory-suggestions-actions,
.memory-suggestion-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.memory-suggestions-actions {
  position: relative;
  left: -4px;
}
.memory-suggestions-actions .memory-item-btn,
.memory-suggestion-actions .memory-item-btn {
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  border-color: color-mix(in srgb, var(--border) 85%, transparent);
}
.memory-suggestions-actions .memory-item-btn.save,
.memory-suggestion-actions .memory-item-btn.save {
  background: color-mix(in srgb, var(--red) 9%, transparent);
  border-color: color-mix(in srgb, var(--red) 28%, transparent);
}

.memory-suggestion-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--red) 3%, transparent);
}

/* Tidy animations */
.memory-tidy-editing {
  border-color: color-mix(in srgb, var(--hl-function) 40%, transparent);
  background: color-mix(in srgb, var(--hl-function) 6%, transparent);
  transition: all 0.3s;
}

.memory-tidy-text-old {
  opacity: 0.4;
  text-decoration: line-through;
  transition: opacity 0.25s;
}

.memory-tidy-text-new {
  color: var(--hl-function);
  transition: color 0.4s;
}

.memory-tidy-removing {
  text-decoration: line-through;
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  border-color: transparent;
  overflow: hidden;
  transition: opacity 0.3s, max-height 0.4s 0.1s, padding 0.4s 0.1s, border-color 0.3s;
}

/* ===== DOCUMENT EDITOR (ARTIFACTS) PANEL ===== */

/* Doc editor is a body-level sibling of chat-container */

/* Divider between chat and doc editor */
.doc-divider {
  width: 1px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--fg) 11%, transparent);
  cursor: col-resize;
  transition: background 0.15s;
  position: relative;
  z-index: 10;
}
.doc-divider::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -10px;
  width: 21px;
  cursor: col-resize;
}
.doc-divider:hover {
  background: color-mix(in srgb, var(--fg) 30%, transparent);
}
/* Always-visible "›" handle on the drag divider — clickable to collapse the
   panel, and signals the divider is interactive. */
.doc-divider-collapse {
  position: absolute;
  top: 50%;
  left: 2px;
  transform: translateY(-50%);
  width: 20px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--panel);
  color: var(--fg);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.1s, border-color 0.1s, left 0.08s ease;
  z-index: 12;
}
.doc-divider.doc-divider-handle-idle:hover .doc-divider-collapse,
.doc-divider.doc-divider-handle-idle:focus-within .doc-divider-collapse {
  opacity: 0.92;
  pointer-events: auto;
}
/* When in fullscreen mode (cursor outside the doc), the flap itself slides
   to the OUTSIDE edge of the divider — visually belonging to the chat side
   the cursor is on, not the doc. The left/right shift pairs with the glyph
   rotation for a single coordinated transition. */
.doc-divider-collapse[data-mode="fullscreen"] {
  left: -22px;
}
.doc-divider-collapse:hover { opacity: 1 !important; border-color: var(--accent, var(--red)); }
/* The same `›` glyph is in the markup; CSS rotates 180° for the left-pointing
   (fullscreen) state. Smooth transition pairs with the chevron's slide. */
.doc-divider-collapse > span {
  display: inline-block;
  transition: transform 0.08s ease, opacity 0.08s ease;
}
.doc-divider-collapse[data-mode="fullscreen"] > span {
  transform: rotate(180deg);
}
/* Secondary "hide panel" X button in the divider — invisible until the pane
   is fullscreen, then floats just below the unfullscreen chevron so the user
   has a one-tap escape that minimises the pane instead of just exiting
   fullscreen. */
.doc-divider-hide {
  position: absolute;
  top: 50%;
  left: 2px;
  width: 20px;
  height: 20px;
  margin-top: 22px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--panel);
  color: var(--accent, var(--red));
  cursor: pointer;
  padding: 0;
  z-index: 12;
  opacity: 0.85;
  transition: opacity 0.15s, border-color 0.15s;
}
.doc-divider-hide:hover {
  opacity: 1;
  border-color: var(--accent, var(--red));
}

/* Copy / Export split button — main click copies, the caret opens the export menu. */
.doc-split-btn {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
  height: 22px;
  flex-shrink: 0;
}
.doc-split-btn .doc-split-main,
.doc-split-btn .doc-split-caret {
  border: none !important;
  border-radius: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  /* Keep the element fully opaque so the divider line stays crisp; dim the
     glyph via colour instead (the base .doc-action-icon-btn fades the whole
     element to 0.3, which also hides the divider). */
  opacity: 1 !important;
  color: color-mix(in srgb, var(--fg) 55%, transparent) !important;
  background: none !important;
  transition: color 0.12s, background 0.12s;
}
.doc-split-btn:hover .doc-split-main,
.doc-split-btn:hover .doc-split-caret { color: var(--fg) !important; }
.doc-split-btn .doc-split-caret {
  border-left: 1px solid var(--border) !important;
  padding: 0 5px 0 7px !important;
}
.doc-split-btn .doc-split-main:hover,
.doc-split-btn .doc-split-caret:hover {
  background: color-mix(in srgb, var(--fg) 8%, transparent) !important;
  color: var(--fg) !important;
}

/* Editor pane — body-level flex sibling */
.doc-editor-pane {
  flex: 1;
  min-width: 0;
  max-width: 70vw;
  container-type: inline-size;
  container-name: docpane;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-left: 1px solid var(--border);
  box-shadow: -10px 0 22px rgba(0, 0, 0, 0.16);
  overflow: hidden;
  height: 100%;
  position: relative;
  z-index: 1;
  color-scheme: dark;
  /* Desktop entrance is driven by openPanel() so the pane has one transform
     owner. The mobile sheet has its own animation below. */
  animation: none;
  transform-origin: right center;
  will-change: clip-path, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .doc-editor-pane,
  .doc-editor-pane.doc-pane-leaving { animation: none; }
}
.doc-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

/* ---- Tab bar ---- */
.doc-tab-bar {
  display: flex;
  align-items: stretch;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  height: 36px;
}
.doc-tab-scroll {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  justify-content: flex-start;
  /* Fade tabs into the bar's background at the edges (next to the scroll
     arrows) so an overflowing tab dissolves instead of being hard-cut. The
     fade is conditional — when we're at an edge there's nothing to fade to,
     so the mask gradient becomes flat on that side (no shadow). */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.doc-tab-arrow {
  background: none;
  border: none;
  color: var(--fg);
  opacity: 0.55;
  cursor: pointer;
  font-size: 18px;
  padding: 0 6px;
  flex-shrink: 0;
  transition: opacity 0.15s;
  line-height: 1;
  display: flex;
  align-items: center;
  position: relative;
  top: -2px;
}
.doc-tab-arrow:hover {
  opacity: 1;
}
/* Mobile swipe-down grab handle at the top of the doc sheet. */
.doc-mobile-grabber { display: none; }
@media (max-width: 768px) {
  body.doc-view .doc-mobile-grabber {
    display: block;
    flex-shrink: 0;
    height: 18px;
    position: relative;
    background: transparent;
    background-color: transparent;
    background-image: none;
    touch-action: none;
    cursor: grab;
  }
  body.doc-view .doc-mobile-grabber::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: var(--fg);
    opacity: 0.25;
    border-radius: 2px;
  }
}

.doc-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  font-family: inherit;
  font-size: 11px;
  color: var(--fg);
  opacity: 0.4;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.1s, background 0.1s;
  flex-shrink: 0;
  border-right: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  position: relative;
}
.doc-tab:hover {
  opacity: 0.7;
  background: color-mix(in srgb, var(--fg) 3%, transparent);
}
.doc-tab.active {
  opacity: 1;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  border-radius: 7px 7px 0 0;
}
.doc-tab-title {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-tab-title-input {
  background: transparent;
  border: 1px solid var(--fg);
  border-radius: 2px;
  color: var(--fg);
  font-family: inherit;
  font-size: 11px;
  padding: 0 4px;
  height: 18px;
  width: 120px;
  max-width: 180px;
  outline: none;
}
.doc-tab-lang {
  font-size: 9px;
  opacity: 0.5;
}
.doc-tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--fg);
  opacity: 0.4;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  width: 24px;
  height: 24px;
  padding: 0;
  box-sizing: border-box;
  margin-left: 3px;
  flex-shrink: 0;
  align-self: center;
  transition: opacity 0.12s, color 0.12s, background 0.12s, border-color 0.12s;
}
.doc-tab-close:hover {
  opacity: 1;
  color: var(--fg);
  background: color-mix(in srgb, var(--fg) 10%, transparent);
  border-color: color-mix(in srgb, var(--fg) 12%, transparent);
}
/* Mobile-only footer (Close + Copy); hidden on desktop and in email mode. */
.doc-mobile-footer { display: none; }
.doc-tab-new {
  background: none;
  border: none;
  color: var(--fg);
  opacity: 0.25;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  padding: 0 10px;
  transition: opacity 0.1s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 100%;
}
.doc-tab-new:hover {
  opacity: 0.7;
}
.doc-tab-play {
  background: none;
  border: none;
  color: var(--fg);
  opacity: 0.55;
  cursor: pointer;
  padding: 0 2px;
  font-size: 10px;
  line-height: 1;
  transition: opacity 0.1s, color 0.1s;
  flex-shrink: 0;
}
.doc-tab-play:hover {
  opacity: 1;
  color: var(--green, #4ec970);
}
.doc-tab-play.active {
  opacity: 1;
  color: var(--green, #4ec970);
}
.doc-tab.dragging {
  opacity: 0.3;
}
.doc-tab.drag-over {
  border-left: 2px solid var(--fg);
}

/* ---- HTML preview iframe ---- */
.doc-html-preview {
  flex: 1;
  width: 100%;
  border: none;
  background: #fff;
}

/* ---- Editor header ---- */
.doc-editor-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  /* Moved to the bottom as a footer: flex order pushes it last in the pane
     column, and the divider flips to the top edge. */
  order: 99;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: nowrap;
  min-height: 36px;
  background: var(--bg);
}
/* Version now lives in the document tab, not the footer. */
#doc-version-badge { display: none !important; }
/* Language icon chip on doc tabs — sits between the version pill and title.
   Hidden when empty so docs without a language don't get awkward spacing. */
.doc-tab-lang {
  display: inline-flex; align-items: center;
  flex-shrink: 0;
  align-self: center;
}
.doc-tab-lang:empty { display: none; }
.doc-tab-lang svg { display: block; }

.doc-tab-version {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 6px;
  cursor: pointer;
  flex-shrink: 0;
  align-self: center;
  line-height: 1.4;
  /* Sits to the LEFT of the title now — space it off the title text. */
  margin-right: 6px;
  /* Accent pill so it's obvious the version is a clickable control. */
  color: var(--accent-primary, var(--red));
  border: 1px solid color-mix(in srgb, var(--accent-primary, var(--red)) 45%, transparent);
  background: color-mix(in srgb, var(--accent-primary, var(--red)) 12%, transparent);
  border-radius: 9px;
}
.doc-tab-version:hover {
  border-color: var(--accent-primary, var(--red));
  background: color-mix(in srgb, var(--accent-primary, var(--red)) 22%, transparent);
}
.doc-close-btn {
  order: -1;
  opacity: 0.5;
  flex-shrink: 0;
}
.doc-close-btn:hover {
  opacity: 1;
}

.doc-editor-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: flex-end;
}
.doc-left .doc-editor-actions {
  margin-left: 0;
}

.doc-version-badge {
  background: color-mix(in srgb, var(--red) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 55%, transparent);
  color: var(--red);
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s, border-color 0.1s;
  opacity: 0.9;
}
.doc-version-badge:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--red) 20%, transparent);
  border-color: var(--red);
}

.doc-stream-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--accent);
  opacity: 0.9;
  white-space: nowrap;
  animation: doc-stream-pulse 1.5s ease-in-out infinite;
}
.doc-stream-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* In the doc footer the type picker sits next to the accent Copy/Export split —
   match its 28px height and 6px radius so the right-hand controls line up. */
.doc-actions-footer #doc-language-select {
  height: 28px;
  border-radius: 6px;
  font-size: 11px;
  top: 0;
}
/* Lang-type icon shown to the LEFT of the language select. Browsers won't
   render SVG inside <option>, so this surface the current selection's icon
   externally. */
#doc-language-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  color: var(--accent-primary, var(--red));
  flex-shrink: 0;
}
#doc-language-icon:empty { display: none; }
#doc-language-icon svg { display: block; }

/* Visually hidden but available to assistive tech (screen readers, axe).
   Use for content that should be announced/structural but not painted —
   e.g. the persistent page <h1>. */
.a11y-visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* ── Custom language type picker (replaces visible chrome of native <select>
   — <option>s can't render SVG). Hidden select stays as the source of truth. */
.doc-langpicker-native-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  border: 0 !important;
}
.doc-langpicker-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 8px 0 10px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 11px; cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.doc-langpicker-trigger:hover {
  border-color: color-mix(in srgb, var(--accent-primary, var(--red)) 60%, var(--border));
}
.doc-langpicker-trigger.doc-langpicker-email-compact .doc-langpicker-label,
.doc-langpicker-trigger.doc-langpicker-email-compact > svg:last-child {
  display: none;
}
.doc-langpicker-trigger svg { display: block; flex-shrink: 0; }
.doc-langpicker-label {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 90px;
}
.doc-langpicker-ico-blank {
  display: inline-block; width: 14px; height: 14px; flex-shrink: 0;
}
.doc-langpicker-menu {
  background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 4px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.32);
  max-height: 60vh; overflow-y: auto;
  z-index: 10000;
  min-width: 160px;
}
.doc-langpicker-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 6px 10px;
  background: none; color: var(--fg);
  border: none; border-radius: 5px;
  font-size: 12px; text-align: left;
  cursor: pointer;
}
.doc-langpicker-item:hover {
  background: color-mix(in srgb, var(--fg) 8%, transparent);
}
.doc-langpicker-group {
  padding: 6px 10px 3px;
  color: var(--fg-muted, var(--fg));
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.55;
}
.doc-langpicker-divider {
  height: 1px;
  margin: 4px 6px;
  background: var(--border);
  opacity: 0.65;
}
.doc-langpicker-item.is-selected {
  background: color-mix(in srgb, var(--accent-primary, var(--red)) 14%, transparent);
  color: var(--accent-primary, var(--red));
}
.doc-langpicker-item svg { display: block; flex-shrink: 0; }
.doc-langpicker-item .doc-langpicker-label { max-width: 220px; }

.doc-language-select {
  background-color: var(--bg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239cdef2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 15 12 9 18 15'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  color: var(--fg);
  color-scheme: dark;
  border: 1px solid var(--border);
  border-radius: 5px;
  position: relative;
  top: 0;
  font-family: inherit;
  font-size: 10px;
  padding: 2px 20px 2px 8px;
  height: 22px;
  /* Fixed width so the right-anchored chevron doesn't shift when the selected
     option's text width changes. */
  width: 96px;
  text-overflow: ellipsis;
  opacity: 0.8;
  cursor: pointer;
  -moz-appearance: none;
  appearance: none;
}
/* Light theme: tint the chevron with the light foreground instead of cyan. */
:root.light .doc-language-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232b2b2b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 15 12 9 18 15'/></svg>");
}
/* New-tab "+" spins on hover, like the library sidebar "+". */
.doc-tab-new svg { transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.doc-tab-new:hover svg { transform: rotate(180deg) scale(1.15); }

.doc-action-btn {
  background: none;
  color: var(--fg);
  border: none;
  font-family: inherit;
  font-size: 10px;
  padding: 2px 8px;
  height: 22px;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.1s;
}
.doc-action-btn:hover {
  opacity: 1;
}
.doc-action-icon-btn {
  background: none;
  border: none;
  color: var(--fg);
  opacity: 0.3;
  cursor: pointer;
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.1s;
}
.doc-action-icon-btn:hover {
  opacity: 1;
}
.doc-action-icon-btn:disabled {
  opacity: 0.18;
  cursor: default;
  pointer-events: none;
}
#doc-undo-btn:not(:disabled),
#doc-redo-btn:not(:disabled) {
  opacity: 0.68;
}
.doc-fontsize-levels {
  position: absolute;
  right: 6px;
  bottom: 3px;
  display: inline-flex;
  line-height: 1;
  pointer-events: none;
}
.doc-fontsize-levels i {
  font-style: normal;
  font-weight: 700;
  font-size: 7px;
  /* Bare --accent is undefined in this codebase, was falling back to the
     hardcoded blue #4a9eff — use the real theme accent. */
  color: var(--accent-primary, var(--red));
  opacity: 1;
}
.doc-fontsize-levels i.active { opacity: 1; }
/* Collapsed buttons hidden in header, shown in overflow menu */
.doc-collapsible-btn.doc-collapsed { display: none !important; }
.doc-overflow-toggle:hover { opacity: 1; }
.doc-overflow-menu {
  display: none;
  position: fixed;
  z-index: 9999;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 0;
  min-width: 140px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.doc-overflow-menu.open { display: block; }
.doc-overflow-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 12px;
  background: none;
  border: none;
  color: var(--fg);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s;
}
.doc-overflow-item:hover,
.doc-overflow-item:focus-visible {
  background: color-mix(in srgb, var(--accent-primary, var(--red)) 12%, transparent);
  outline: none;
}
.doc-overflow-item .rich-align-preview {
  display: inline-block;
  white-space: nowrap;
}
.doc-overflow-item:disabled {
  opacity: 0.28;
  cursor: default;
}
.doc-overflow-item.is-current {
  color: var(--accent-primary, var(--red));
  background: color-mix(in srgb, var(--accent-primary, var(--red)) 9%, transparent);
}
.md-dd-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  margin-left: auto;
  opacity: 0;
}
.doc-overflow-item.is-current .md-dd-current { opacity: 1; }
.doc-overflow-item.rich-table-danger { color: var(--color-danger, #c0392b); }
.doc-overflow-item svg { flex-shrink: 0; opacity: 0.5; }
.doc-ai-writing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--accent-primary, var(--red));
}
.doc-ai-writing-btn svg:first-child { color: var(--accent-primary, var(--red)); opacity: 1; }
.doc-ai-writing-whirlpool { position: relative; top: -4px; }
.doc-ai-writing-menu { min-width: 206px; }
.doc-ai-writing-menu-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 6px;
  color: var(--accent-primary, var(--red));
  font-size: 10px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.doc-ai-writing-menu-title svg { opacity: 1; }
.doc-ai-writing-item-icon {
  width: 16px;
  flex: 0 0 16px;
  text-align: center;
  color: var(--accent-primary, var(--red));
  font-size: 11px;
  font-weight: 600;
}

/* Markdown Edit/Preview two-icon switch — segmented, styled to match the Copy
   split button. The active half gets a static highlight (no sliding). */
.md-view-toggle {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
  flex-shrink: 0;
  height: 22px;
}
.md-view-toggle .md-view-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 26px;
  width: auto;
  height: 100%;
  padding: 0 7px !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--fg);
  opacity: 0.45;
  cursor: pointer;
  transition: opacity 0.12s, color 0.12s, background 0.12s;
}
.md-view-label {
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}
.md-view-toggle .md-view-opt:hover { opacity: 0.8; }
.md-view-toggle .md-view-opt.active {
  opacity: 1;
  color: var(--fg);
  background: var(--bg) !important;
  /* "Punch" pop when a side becomes active (only fires on an actual switch —
     re-applying .active without a change doesn't restart the animation). */
  animation: md-view-punch 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes md-view-punch {
  0%   { transform: scale(0.8); }
  55%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .md-view-toggle .md-view-opt.active { animation: none; }
}

.doc-md-toolbar.md-preview-active {
  border-bottom-color: var(--bg);
}
.doc-md-toolbar.md-write-active {
  border-bottom-color: var(--sidebar-bg, var(--panel));
}
.doc-md-toolbar.md-preview-active #doc-md-view-toggle,
.doc-md-toolbar.md-write-active #doc-md-view-toggle {
  align-self: flex-end;
  height: 28px;
  margin-bottom: -6px;
  border-radius: 7px 7px 0 0;
  box-shadow: 0 -1px 0 var(--border), -1px 0 0 var(--border), 1px 0 0 var(--border);
}
.doc-md-toolbar.md-preview-active #doc-md-view-toggle {
  background: var(--bg);
  border-bottom-color: var(--bg);
}
.doc-md-toolbar.md-write-active #doc-md-view-toggle {
  background: var(--sidebar-bg, var(--panel));
  border-bottom-color: var(--sidebar-bg, var(--panel));
}
.doc-md-toolbar.md-preview-active #doc-md-view-toggle .md-view-opt.active {
  background: var(--bg) !important;
}
.doc-md-toolbar.md-write-active #doc-md-view-toggle .md-view-opt.active {
  background: var(--bg) !important;
}
.doc-md-preview.md-preview-active {
  background: var(--bg);
  border-top: 0;
  margin-top: 0;
}

/* Write and Preview are separate tabs that sit out from the toolbar. */
.md-view-toggle {
  position: relative;
  gap: 2px;
  height: 28px;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: var(--bg) !important;
  box-shadow: none !important;
}
/* The toolbar owns the boundary beneath the editor. A second full-width
   baseline here would remain visible directly under the active tab. */
.md-view-toggle::after { content: none; }
.md-view-toggle .md-view-opt {
  height: 28px;
  border: 1px solid var(--border) !important;
  border-bottom-color: transparent !important;
  border-radius: 7px 7px 0 0 !important;
  position: relative;
  z-index: 2;
}
.md-view-toggle .md-view-opt.active {
  z-index: 3;
}
.md-view-toggle .md-view-opt:first-child,
#doc-render-view-toggle .md-view-opt:first-child {
  background: var(--sidebar-bg, var(--panel)) !important;
}
.md-view-toggle .md-view-opt:last-child,
#doc-render-view-toggle .md-view-opt:last-child {
  background: var(--sidebar-bg, var(--panel)) !important;
}

/* Keep code's Edit/Run switch in the same visual language as Write/Preview:
   Edit is attached to the sidebar-colored editor surface, while Run/Preview
   is attached to the lighter content surface. */
#doc-render-view-toggle .md-view-opt {
  color: var(--fg);
  border-color: var(--border) !important;
}
#doc-render-view-toggle .md-view-opt.active {
  opacity: 1;
  color: var(--fg);
}

/* Code/Run uses the same tab shape and baseline as Write/Preview. */
.doc-md-toolbar #doc-render-view-toggle {
  align-self: flex-end;
  height: 28px;
  margin-bottom: -6px;
}
.doc-md-toolbar #doc-render-view-toggle .md-view-opt:first-child {
  background: var(--sidebar-bg, var(--panel)) !important;
}
.doc-md-toolbar #doc-render-view-toggle .md-view-opt:last-child {
  background: var(--bg) !important;
}

/* Mobile: the doc/email footer controls (format toggle, export button, export
   menu) were slimmer than the Send button, so the row looked ragged. Bump them
   to match the Send button height (and give the export/overflow menu bigger,
   touch-friendly rows). */
@media (max-width: 768px) {
  .md-view-toggle { height: 28px; }
  .md-view-toggle .md-view-opt { min-width: 38px; padding: 0 8px !important; }
  .doc-action-icon-btn { padding: 6px; }
  .email-send-btn { height: 28px; }
  /* The type/language picker was the slim one stuck at 22px — match it to the
     rest of the row. */
  .doc-language-select { height: 28px; font-size: 13px; padding: 2px 22px 2px 10px; }
  .doc-overflow-item { font-size: 13px; padding: 9px 14px; }
  .doc-overflow-item .overflow-icon svg,
  .doc-overflow-item svg { width: 16px; height: 16px; }
  .email-more-menu .dropdown-item-compact { padding: 9px 12px; font-size: 13px; }

  /* The doc footer is tight once the run/preview toggle joins it, so on mobile
     go icon-only for Close, Undo & Copy (their icons are clear).
     font-size:0 drops the text node next to the SVG (the SVG has fixed w/h, so
     it's unaffected). Slightly narrower type picker buys a little more room. */
  #doc-actions-footer #doc-undo-btn span,
  #doc-actions-footer #doc-footer-close-btn span,
  #doc-email-actions #doc-email-discard-btn span { display: none; }
  #doc-actions-footer #doc-undo-btn,
  #doc-actions-footer #doc-redo-btn,
  #doc-actions-footer #doc-footer-close-btn,
  #doc-email-actions #doc-email-discard-btn { gap: 0; padding: 0 9px; }
  #doc-actions-footer #doc-footer-copy-btn { gap: 0; padding: 0 13px; font-size: 0 !important; }
  /* In reply mode the button carries a "Reply" label that should stay visible
     (the icon-only treatment above is only for the plain Copy action). */
  #doc-actions-footer #doc-footer-copy-btn[data-mode="reply"] { gap: 5px; padding: 0 13px; font-size: 12px; }
  #doc-actions-footer #doc-language-select { width: 80px; }
  #doc-actions-footer .doc-stats-btn { width: 28px; padding: 0 4px; }
  #doc-actions-footer .doc-stats-unit { display: none; }
  #doc-actions-footer .doc-stats-popover { right: -34px; }
  #doc-actions-footer .doc-save-button-label { display: none; }
}

/* Very narrow document panes: keep the primary Save action visible while
   collapsing secondary labels before allowing the footer to clip. This uses
   the pane width, not the viewport width, because the editor can be docked. */
@container docpane (max-width: 420px) {
  #doc-actions-footer {
    gap: 4px;
    padding-left: 8px;
    padding-right: 8px;
    overflow: hidden;
  }
  #doc-actions-footer > #doc-undo-btn,
  #doc-actions-footer > #doc-redo-btn {
    flex: 0 0 28px;
    padding-left: 4px;
    padding-right: 4px;
  }
  #doc-actions-footer > #doc-undo-btn span,
  #doc-actions-footer > #doc-footer-copy-btn,
  #doc-actions-footer .doc-save-button-label,
  #doc-actions-footer > #doc-stats .doc-stats-unit {
    font-size: 0;
  }
  #doc-actions-footer > #doc-undo-btn span,
  #doc-actions-footer .doc-save-button-label,
  #doc-actions-footer > #doc-stats .doc-stats-unit {
    display: none;
  }
  #doc-actions-footer > #doc-stats {
    flex: 0 0 28px;
  }
  #doc-actions-footer #doc-copy-export-split {
    flex: 0 0 auto;
  }
  #doc-actions-footer #doc-footer-copy-btn {
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    padding-left: 0;
    padding-right: 0;
    font-size: 0 !important;
    align-items: center;
    justify-content: center;
  }
  #doc-actions-footer #doc-footer-export-btn {
    flex: 0 0 24px;
    width: 24px;
    min-width: 24px;
    padding-left: 4px;
    padding-right: 4px;
  }
  #doc-actions-footer #doc-copy-export-split {
    border: 1px solid color-mix(in srgb, var(--accent-primary, var(--red)) 50%, transparent);
    border-radius: 6px;
    overflow: hidden;
    background: color-mix(in srgb, var(--accent-primary, var(--red)) 20%, transparent);
  }
  #doc-actions-footer #doc-copy-export-split .email-send-btn {
    border-top: 0;
    border-bottom: 0;
  }
  #doc-actions-footer #doc-copy-export-split #doc-footer-copy-btn {
    border-left: 0;
  }
  #doc-actions-footer #doc-copy-export-split #doc-footer-export-btn {
    border-right: 0;
  }
  #doc-actions-footer #doc-footer-export-btn svg {
    width: 10px;
    height: 10px;
  }
}

/* Markdown formatting toolbar */
.doc-md-toolbar [data-md="unlink"] { display: none !important; }
/* In code-mode the toolbar only hosts the view toggles + utility buttons
   (font-size, diff). Hide markdown-only formatting controls — bold,
   italic, headings, list, link, attach, code-dropdown, emoji, hr, and
   the PDF-only buttons. The view toggles + fontsize + diff stay. */
.doc-md-toolbar[data-mode="code"] [data-md],
.doc-md-toolbar[data-mode="code"] .md-dd-toggle,
.doc-md-toolbar[data-mode="code"] #md-toolbar-attach-btn,
.doc-md-toolbar[data-mode="code"] #md-toolbar-emoji-slot,
.doc-md-toolbar[data-mode="code"] .md-toolbar-pdf-only,
.doc-md-toolbar[data-mode="code"] .md-toolbar-sep {
  display: none !important;
}
.doc-md-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1px;
  padding: 2px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--sidebar-bg, var(--panel));
  flex-shrink: 0;
  overflow: hidden;
  height: 36px;
  position: relative;
  /* Same edge fade as the tab strip — toolbar buttons dissolve into the bar's
     background at the edges instead of being hard-cut when they overflow. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.doc-md-toolbar button {
  background: none;
  border: none;
  color: var(--fg);
  opacity: 0.85;
  padding: 4px 7px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.3;
  transition: opacity 0.1s;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.doc-md-toolbar button:hover {
  opacity: 1;
}
.doc-md-toolbar button:disabled {
  opacity: 0.28;
  cursor: default;
  pointer-events: none;
}
.doc-link-remove-btn {
  color: var(--red, #dc2626);
  border-color: color-mix(in srgb, var(--red, #dc2626) 45%, var(--border));
}
.doc-md-toolbar button:active {
  opacity: 0.6;
}
/* Active formatting state — set by the email WYSIWYG sync. Mirrors the
   selection's current marks (B/I/S, heading level, list) so the toolbar
   acts as an indicator, not just a launcher. */
.doc-md-toolbar button.is-active {
  opacity: 1;
  color: var(--accent, var(--red));
  background: color-mix(in srgb, var(--accent, var(--red)) 14%, transparent);
}
.doc-md-toolbar button.is-active:hover {
  background: color-mix(in srgb, var(--accent, var(--red)) 22%, transparent);
}
.doc-md-toolbar button:focus:not(:focus-visible),
.doc-tab-new:focus:not(:focus-visible),
.doc-tab-arrow:focus:not(:focus-visible) {
  outline: none;
  background: none;
}
.doc-md-toolbar button:focus-visible,
.doc-tab-new:focus-visible,
.doc-tab-arrow:focus-visible {
  outline: 1px solid var(--accent-primary, var(--red));
  outline-offset: -1px;
}
/* Grouped formatting dropdown toggles (heading / code / list) */
.md-dd-toggle { gap: 1px !important; }
/* Tint only dropdown chevrons accent; the main tool icon keeps toolbar color. */
.md-dd-toggle svg { opacity: 1; margin-left: 1px; flex-shrink: 0; transform: translateY(0); }
.md-dd-toggle > svg:last-child { color: var(--accent-primary, var(--red, #4a9eff)); }
.md-dd-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  flex-shrink: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  opacity: 0.7;
}
.md-toolbar-sep {
  width: 1px;
  height: 12px;
  background: color-mix(in srgb, var(--border) 60%, transparent);
  margin: 0 4px;
  flex-shrink: 0;
}
.md-toolbar-items {
  display: flex;
  align-items: center;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}
.md-toolbar-leading-controls {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.md-toolbar-items::-webkit-scrollbar { display: none; }
/* On a PDF, the annotation tools (text / checkmark / signature) are the primary
   actions — pull them to the far left of the toolbar. `order` is visual only
   (they're display:none on non-PDF docs), so it has no effect elsewhere. */
.md-toolbar-items #doc-pdf-add-text-btn { order: -3; }
.md-toolbar-items #doc-pdf-add-check-btn { order: -2; }
.md-toolbar-items #doc-pdf-add-sign-btn { order: -1; }
@media (min-width: 769px) {
  .md-toolbar-items #doc-pdf-add-text-btn {
    margin-left: 14px;
  }
}
/* Stack the signature icon over a tiny "sign" caption so the tool reads
   clearly (the icon alone is ambiguous). The JS toggles inline display
   none/'' for PDF mode, so this flex display only applies when shown. */
#doc-pdf-add-sign-btn {
  flex-direction: column;
  align-items: center;
  gap: 0;
  line-height: 1;
}
.doc-pdf-sign-label {
  font-size: 6.5px;
  letter-spacing: 0.3px;
  margin-top: 0;
  opacity: 1;
  color: var(--accent, var(--red));
}
/* Edge scroll arrows — appear when the toolbar has more icons off-screen. */
.md-scroll-arrow {
  position: static;
  flex: 0 0 28px;
  align-self: stretch;
  width: 28px;
  display: flex;
  align-items: center;
  border: none;
  cursor: pointer;
  color: var(--fg);
  padding: 0 !important;
  min-height: 0 !important;
  opacity: 1 !important;
  z-index: 6;
}
.md-scroll-arrow svg { position: relative; top: 2px; opacity: 0.75; transition: opacity 0.1s; }
.md-scroll-arrow:hover svg { opacity: 1; }
@media (min-width: 769px) {
  /* On desktop the arrow rides 2px lower than the toolbar baseline. */
  .md-scroll-arrow svg { top: 0; }
}
.md-scroll-left {
  justify-content: flex-start;
  padding-left: 3px;
  /* Mostly-solid toolbar bg so the icons behind the arrow are hidden, fading
     to transparent only at the inner edge. */
  background: linear-gradient(to right, var(--bg) 0%, var(--bg) 80%, transparent 100%);
}
.md-scroll-right {
  justify-content: flex-end;
  padding-right: 3px;
  background: linear-gradient(to left, var(--bg) 0%, var(--bg) 80%, transparent 100%);
}
.md-toolbar-overflow-wrapper {
  position: relative;
  flex-shrink: 0;
  margin-left: auto;
}
.md-toolbar-overflow-toggle {
  background: none;
  border: 1px solid transparent;
  color: var(--fg);
  opacity: 0.4;
  padding: 2px 4px;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.1s;
}
.md-toolbar-overflow-toggle:hover {
  opacity: 1;
}
.md-toolbar-overflow-menu {
  display: none;
  position: fixed;
  z-index: 1000;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  min-width: 0;
  width: max-content;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  backdrop-filter: blur(12px);
}
.md-toolbar-overflow-menu.open {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  max-width: 200px;
}
.md-toolbar-overflow-item {
  background: none;
  border: 1px solid transparent;
  color: var(--fg);
  opacity: 0.5;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.3;
  transition: opacity 0.1s, background 0.1s;
}
.md-toolbar-overflow-item:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  border-color: var(--border);
}

/* Find bar */
.doc-find-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 4px 8px;
  background: var(--panel, var(--bg));
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.doc-find-row,
.doc-replace-row {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.doc-replace-row[hidden] { display: none; }
.doc-find-input {
  flex: 1;
  min-width: 0;
  padding: 3px 6px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--fg);
  outline: none;
}
.doc-find-input:focus { border-color: var(--accent); }
.doc-find-count {
  font-size: 11px;
  opacity: 0.6;
  white-space: nowrap;
  min-width: 50px;
  text-align: center;
}
.doc-find-nav, .doc-find-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--fg);
  cursor: pointer;
  padding: 2px 5px;
  font-size: 14px;
  border-radius: 3px;
  opacity: 0.7;
}
.doc-find-nav:hover, .doc-find-close:hover,
.doc-find-nav.is-active { opacity: 1; background: color-mix(in srgb, var(--fg) 10%, transparent); }
.doc-find-action {
  min-height: 25px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.doc-find-action:hover,
.doc-find-action:focus-visible {
  border-color: var(--accent);
  outline: none;
}

/* Live document outline. It is body-portaled so the toolbar's clipping and
   edge mask cannot cut it off in the mobile full-screen editor. */
.doc-outline-menu {
  position: fixed;
  box-sizing: border-box;
  max-height: min(420px, calc(100vh - 24px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--panel, var(--bg));
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
  color: var(--fg);
}
.doc-outline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  padding: 0 10px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
}
.doc-outline-list {
  overflow-y: auto;
  padding: 4px;
  overscroll-behavior: contain;
}
.doc-outline-item {
  width: 100%;
  min-height: 30px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 7px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}
.doc-outline-item:hover,
.doc-outline-item:focus-visible {
  background: color-mix(in srgb, var(--accent, var(--red)) 12%, transparent);
  outline: none;
}
.doc-outline-level {
  opacity: 0.42;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}
.doc-outline-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-outline-empty {
  padding: 18px 12px;
  text-align: center;
  font-size: 11px;
  opacity: 0.52;
}

@media (max-width: 768px) {
  .doc-outline-menu { max-height: min(52vh, 420px); }
  .doc-outline-item { min-height: 38px; font-size: 12px; }
}

/* Selection formatting stays close to the selected text. The controls are
   symbols only and mirror the same commands as the full Rich Text toolbar. */
.doc-rich-selection-toolbar {
  position: fixed;
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 3px;
  background: var(--panel, var(--bg));
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
  color: var(--fg);
  user-select: none;
  overflow: visible;
}
.doc-rich-selection-toolbar button {
  width: 30px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  touch-action: manipulation;
}
.doc-rich-selection-toolbar button:nth-child(5) {
  margin-left: 3px;
  border-left: 1px solid var(--border);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.doc-rich-selection-toolbar button:hover,
.doc-rich-selection-toolbar button:focus-visible,
.doc-rich-selection-toolbar button.is-active {
  color: var(--accent, var(--red));
  background: color-mix(in srgb, var(--accent, var(--red)) 14%, transparent);
  outline: none;
}
.doc-rich-selection-toolbar .doc-rich-selection-close {
  position: absolute;
  top: -9px;
  right: -9px;
  z-index: 2;
  width: 18px;
  height: 18px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--panel, var(--bg));
  color: var(--fg);
  font: 700 15px/1 system-ui, sans-serif;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.35);
}
.doc-rich-selection-toolbar .doc-rich-selection-close:hover,
.doc-rich-selection-toolbar .doc-rich-selection-close:focus-visible {
  color: var(--accent, var(--red));
  background: color-mix(in srgb, var(--accent, var(--red)) 16%, var(--panel, var(--bg)));
  outline: none;
}

@media (max-width: 768px) {
  .doc-rich-selection-toolbar { padding: 4px; }
  .doc-rich-selection-toolbar button { width: 38px; height: 34px; font-size: 13px; }
  .doc-rich-selection-toolbar .doc-rich-selection-close { width: 20px; height: 20px; top: -10px; right: -10px; }
}

.doc-rich-slash-menu {
  position: fixed;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-height: min(420px, calc(100vh - 24px));
  overflow: hidden;
  background: var(--panel, var(--bg));
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
  color: var(--fg);
}
.doc-rich-slash-header {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
}
.doc-rich-slash-list {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px;
}
.doc-rich-slash-item {
  width: 100%;
  min-height: 34px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}
.doc-rich-slash-item:hover,
.doc-rich-slash-item:focus-visible,
.doc-rich-slash-item.is-active {
  background: color-mix(in srgb, var(--accent, var(--red)) 13%, transparent);
  outline: none;
}
.doc-rich-slash-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 24px;
  color: var(--accent, var(--red));
  font-size: 10px;
  font-weight: 600;
  opacity: 0.82;
}
.doc-rich-slash-empty {
  padding: 18px 12px;
  text-align: center;
  font-size: 11px;
  opacity: 0.52;
}

@media (max-width: 768px) {
  .doc-rich-slash-menu { max-height: min(54vh, 420px); }
  .doc-rich-slash-item { min-height: 42px; font-size: 12px; }
}

/* Editor — highlighted overlay + transparent textarea.
   Lock the editor wrap to a fixed text-column width, centered horizontally
   in the doc pane. This eliminates wrap-related drift bugs as a class:
   the textarea + overlay always have the same available width regardless
   of viewport, sidebar state, dock state, or window resize. Whitespace on
   either side reads like a writing-app column (Bear / iA Writer pattern).
   container-type: inline-size lets us hide the line-number gutter via a
   container query when the editor's own width is narrow (rather than
   viewport-width, which would miss the case of a narrow side-docked
   editor inside a wide window). */
.doc-editor-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  /* Cap the column at ~820px outer (~760px content area after the 60px
     of horizontal padding the textarea+overlay use for the gutter). */
  max-width: 820px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  background: var(--bg);
  container-type: inline-size;
  container-name: doceditor;
}

/* When the editor itself is narrow, soft-wrap makes one logical line
   span multiple visual rows but the gutter still shows ONE number per
   logical line — so the gutter and the visible rows fall out of sync.
   Hide the gutter (and reclaim the 48px of left padding it reserved)
   below a threshold where the mismatch reads as a glitch. */
@container doceditor (max-width: 360px) {
  .doc-line-numbers { display: none !important; }
  .doc-editor-textarea,
  .doc-editor-highlight {
    padding-left: 12px !important;
  }
}
.doc-line-numbers {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 36px;
  padding: 10px 8px 10px 0;
  margin: 0;
  font-family: inherit;
  font-size: 11px;
  line-height: 1.45;
  text-align: right;
  color: var(--fg);
  opacity: 0.18;
  background: var(--bg);
  overflow: hidden;
  white-space: pre;
  tab-size: 4;
  font-variant-ligatures: none !important;
  font-feature-settings: "kern" 0, "liga" 0, "calt" 0, "dlig" 0 !important;
  font-kerning: none !important;
  text-rendering: geometricPrecision !important;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}
.doc-line-number-content {
  display: block;
  will-change: transform;
}
.doc-line-number-row {
  position: relative;
  box-sizing: border-box;
}
.doc-line-number-label {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  text-align: right;
}
.doc-line-number-measure {
  position: absolute !important;
  visibility: hidden !important;
  pointer-events: none !important;
  left: -9999px !important;
  top: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 0 !important;
  resize: none !important;
  box-sizing: content-box !important;
  color: transparent !important;
  background: transparent !important;
}
mark.doc-find-mark.current {
  background: var(--accent) !important;
  color: var(--bg) !important;
  box-shadow: 0 0 0 2px var(--fg);
  outline: 1px solid var(--fg);
}

/* Find-match overlay rects — drawn on top of the textarea, work in
   every doc mode (markdown, email, plain) regardless of whether the
   syntax-highlight overlay is shown. Translucent band so the underlying
   text stays readable; current match gets a brighter solid band. */
.doc-find-rect {
  background: color-mix(in srgb, var(--accent) 25%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 65%, transparent);
}
.doc-find-rect.current {
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.doc-editor-highlight {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 10px 12px 10px 48px;
  font-family: inherit;
  font-size: 11px !important;
  line-height: 1.45 !important;
  tab-size: 4;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: hidden;
  /* `scrollbar-gutter: stable` reserves scrollbar-track width in the
     layout even when no scrollbar is shown. The textarea below has the
     same setting — without this, the textarea would consume scrollbar
     space the moment its content overflows vertically, shrinking its
     content width and wrapping lines earlier than the overlay. The
     visible-text-drift bug user reports as "after ~16 rows it wraps
     even though there's space" was caused by exactly that. */
  scrollbar-gutter: stable;
  scrollbar-width: none;
  pointer-events: none;
  z-index: 0;
  background: var(--bg) !important;
  color: var(--hl-fg, var(--fg));
  border: none;
  /* Disable ligatures + kerning everywhere in the editor. Monospace fonts
     like Fira Code form ligatures for `=>`, `!=`, `->`, `==` etc., but
     hljs splits those pairs into separate <span>s in the overlay, which
     breaks the ligature on this side while the textarea still forms it.
     Result: visible row drift whenever code contains those pairs. Pin
     ligatures off in both layers (textarea below) so widths stay equal. */
  font-variant-ligatures: none !important;
  font-feature-settings: "kern" 0, "liga" 0, "calt" 0, "dlig" 0 !important;
  font-kerning: none !important;
  text-rendering: geometricPrecision !important;
  box-sizing: border-box;
}

/* Document font size options */
.doc-font-m .doc-editor-textarea,
.doc-font-m .doc-editor-highlight,
.doc-font-m .doc-line-numbers { font-size: 13px !important; }
.doc-font-l .doc-editor-textarea,
.doc-font-l .doc-editor-highlight,
.doc-font-l .doc-line-numbers { font-size: 15px !important; }
.doc-email-richbody.doc-font-m { font-size: 15px !important; }
.doc-email-richbody.doc-font-l { font-size: 17px !important; }
/* Markdown base text should match chat text color, not code color */
.doc-editor-highlight .language-markdown {
  color: var(--fg) !important;
}
.doc-editor-highlight code,
.doc-editor-highlight code.hljs,
.doc-editor-highlight .hljs {
  font-family: inherit;
  font-size: inherit !important;
  line-height: inherit !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  display: block;
  pointer-events: none;
}
.doc-editor-textarea {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  z-index: 1;
  background: var(--bg) !important;
  color: transparent !important;
  color-scheme: dark;
  caret-color: var(--fg);
  border: none;
  outline: none;
  resize: none;
  font-family: inherit;
  /* Caret position only matches the underlying highlight if BOTH layers use
     identical metrics — !important on font-size + line-height defends against
     anything else in the cascade nudging the textarea but not the overlay. */
  font-size: 11px !important;
  line-height: 1.45 !important;
  padding: 10px 12px 10px 48px;
  overflow-y: scroll;
  /* Pair with .doc-editor-highlight's scrollbar-gutter: stable so the
     textarea's content width DOESN'T shrink the moment its scrollbar
     appears (overflow-y: scroll keeps scrollbar permanent, gutter
     reserves the space layout-wise). Without this, line wrap diverges
     between textarea and overlay whenever content exceeds the visible
     area — caret stays right, but typed text appears on a different row
     than the caret. */
  scrollbar-gutter: stable;
  /* Show a real scrollbar for long documents. scrollbar-gutter above keeps
     the text column stable so the gutter, textarea, and find overlay stay
     metrically aligned while the scrollbar is present. */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--fg) 28%, transparent) transparent;
  -webkit-overflow-scrolling: touch;
  tab-size: 4;
  white-space: pre-wrap;
  word-wrap: break-word;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  /* Mirror the ligature/kerning lockdown from .doc-editor-highlight above.
     Without this the textarea forms `=>`/`!=`/`->`/`==` as single-glyph
     ligatures while the overlay can't (hljs splits the pair into
     separate spans), so glyph widths diverge and the visible text drifts
     down relative to the caret as code accumulates. */
  font-variant-ligatures: none !important;
  font-feature-settings: "kern" 0, "liga" 0, "calt" 0, "dlig" 0 !important;
  font-kerning: none !important;
  text-rendering: geometricPrecision !important;
}
.doc-editor-textarea::-webkit-scrollbar { width: 8px; }
.doc-editor-textarea::-webkit-scrollbar-track { background: transparent; }
.doc-editor-textarea::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--fg) 24%, transparent);
  border-radius: 999px;
}
.doc-editor-textarea::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--fg) 36%, transparent);
}
.doc-editor-textarea:hover,
.doc-editor-textarea:focus,
.doc-editor-textarea:active {
  background: var(--bg) !important;
  /* Used to force `color: transparent` here so the hidden two-layer
     textarea wouldn't bleed through on hover/focus. Now that the
     textarea renders its OWN visible text (overlay is hidden), forcing
     transparent here makes typed text disappear the moment the cursor
     enters the page. Keep the visible fg color instead. */
  color: var(--fg) !important;
  outline: none !important;
}
.doc-editor-textarea::placeholder {
  color: var(--fg);
  opacity: 0.25;
}
/* Show real text when selecting so copy/paste is visible */
.doc-editor-textarea::selection {
  color: var(--fg);
  background: color-mix(in srgb, var(--accent, var(--red)) 48%, transparent);
}

/* ---- Selection indicator badge ---- */
.doc-selection-badge {
  font-size: 10px;
  color: var(--red);
  background: color-mix(in srgb, var(--red) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
  border-radius: 4px;
  padding: 1px 4px 1px 6px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  box-sizing: border-box;
}
.doc-selection-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--fg);
  opacity: 0.4;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  width: 20px;
  height: 20px;
  padding: 0;
  box-sizing: border-box;
  transition: opacity 0.12s, color 0.12s, background 0.12s, border-color 0.12s;
}
.doc-selection-clear:hover {
  opacity: 1;
  color: var(--fg);
  background: color-mix(in srgb, var(--fg) 10%, transparent);
  border-color: color-mix(in srgb, var(--fg) 12%, transparent);
}
.doc-selection-chip-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 3px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--panel, var(--bg));
  color: var(--fg);
  font: 700 15px/1 system-ui, sans-serif;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.doc-selection-chip-clear:hover,
.doc-selection-chip-clear:focus-visible {
  color: var(--accent, var(--red));
  background: color-mix(in srgb, var(--accent, var(--red)) 16%, var(--panel, var(--bg)));
  outline: none;
}
.doc-selection-clear {
  width: auto;
  height: 18px;
  margin-left: 3px;
  padding: 0 7px;
  border-radius: 999px;
  font: 700 11px/1 system-ui, sans-serif;
  opacity: 1;
}
.doc-edit-tag {
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--accent, var(--red)) 32%, transparent);
  color: var(--accent, var(--red));
  cursor: pointer;
  font-family: inherit;
  font-size: 0.68em;
  line-height: 1;
  opacity: 0.78;
  background: color-mix(in srgb, var(--accent, var(--red)) 10%, transparent);
  border-radius: 999px;
  padding: 1px 5px;
  margin-right: 2px;
  white-space: nowrap;
  transition: opacity 0.12s, background 0.12s, border-color 0.12s;
}
.doc-edit-tag:hover,
.doc-edit-tag:focus-visible {
  opacity: 1;
  background: color-mix(in srgb, var(--accent, var(--red)) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent, var(--red)) 55%, transparent);
}
.doc-edit-tag:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent, var(--red)) 45%, transparent);
  outline-offset: 2px;
}
/* Attachment cards in user messages */
.attach-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.attach-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  /* Same border as the chat bubbles. */
  border: 1px solid var(--bubble-border, var(--border));
  font-size: 12px;
  transition: background 0.15s;
}
.attach-card[style*="cursor: pointer"]:hover,
.attach-card[data-file-id]:hover {
  background: color-mix(in srgb, var(--fg) 12%, transparent);
}
.attach-card-icon {
  flex-shrink: 0;
  opacity: 0.6;
}
.attach-card-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}
.attach-card-size {
  opacity: 0.45;
  font-size: 11px;
  white-space: nowrap;
}
.history-attach-card {
  cursor: default;
  opacity: 0.82;
}
.history-attach-card .attach-card-size {
  text-transform: lowercase;
}
/* Import prompt banner (above chatbar) */
.import-prompt-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin: 0 auto 6px;
  max-width: 800px;
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  font-size: 12px;
  color: var(--fg);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  backdrop-filter: blur(12px);
  animation: modal-enter 0.15s ease-out;
}
.import-prompt-banner span { flex: 1; }
.import-prompt-banner button {
  padding: 3px 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: none;
  color: var(--fg);
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
}
.import-prompt-banner button:hover {
  border-color: var(--fg);
}
.import-prompt-dismiss {
  border: none !important;
  background: none !important;
  opacity: 0.5;
  font-size: 16px !important;
  padding: 0 4px !important;
}
.import-prompt-dismiss:hover { opacity: 1; background: none !important; }
.doc-selection-overlay {
  position: absolute;
  background: color-mix(in srgb, var(--red) 10%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--red) 50%, transparent);
  pointer-events: none;
  z-index: 2;
  transition: top 0.05s;
}
.doc-selection-overlay-clear {
  position: absolute;
  top: 1px;
  right: 3px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  color: var(--fg);
  font: 16px/1 inherit;
  opacity: 0.7;
  cursor: pointer;
  pointer-events: auto;
}
.doc-selection-overlay-clear:hover,
.doc-selection-overlay-clear:focus-visible {
  opacity: 1;
  background: color-mix(in srgb, var(--accent, var(--red)) 18%, var(--panel));
  outline: none;
}
.doc-selection-rich-clear {
  position: fixed;
  z-index: 10040;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--panel, var(--bg));
  color: var(--fg);
  font: 700 15px/1 system-ui, sans-serif;
  opacity: 1;
  cursor: pointer;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.35);
}
.doc-selection-rich-clear:hover,
.doc-selection-rich-clear:focus-visible {
  color: var(--accent, var(--red));
  background: color-mix(in srgb, var(--accent, var(--red)) 16%, var(--panel, var(--bg)));
  outline: none;
}

/* ── Suggestion comments (Google Docs style) ── */
.doc-suggestion-highlight {
  position: absolute;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--accent) 32%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 72%, transparent);
  border-radius: 2px;
  pointer-events: none;
  z-index: 3;
  transition: top 0.1s, opacity 0.15s;
}
/* Suggestion card — fixed next to editor, anchored to the change */
.doc-suggestion-card {
  position: fixed;
  width: 250px;
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 12px 12px 10px;
  font-size: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  animation: suggestion-enter 0.25s ease-out;
  z-index: 250;
  overflow: visible;
}
.doc-suggestion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.doc-suggestion-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.doc-suggestion-nav-btn {
  background: none;
  border: none;
  color: var(--fg);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
  opacity: 0.35;
  transition: opacity 0.1s;
}
.doc-suggestion-nav-btn:hover { opacity: 1; }
.doc-suggestion-close {
  width: 24px;
  height: 24px;
  padding: 0;
  margin: -2px -2px -2px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: color-mix(in srgb, var(--fg) 58%, transparent);
  opacity: 1;
  cursor: pointer;
  font-size: 0;
  line-height: 1;
  flex-shrink: 0;
  position: relative;
}
.doc-suggestion-close:hover,
.doc-suggestion-close:focus-visible {
  background: color-mix(in srgb, var(--fg) 10%, transparent);
  border-color: color-mix(in srgb, var(--fg) 12%, transparent);
  color: var(--fg);
  outline: none;
}
.doc-suggestion-counter {
  font-size: 10px;
  opacity: 0.4;
  font-weight: 600;
  letter-spacing: 0.5px;
}
/* Inline diff markers — injected into the code highlight element */
.sugg-inline-del {
  background: color-mix(in srgb, var(--red) 20%, transparent);
  color: color-mix(in srgb, var(--red) 70%, var(--fg));
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--red) 40%, transparent);
  border-radius: 2px;
  padding: 0 2px;
}
.sugg-inline-add {
  background: color-mix(in srgb, var(--green) 25%, transparent);
  color: var(--green);
  border-radius: 2px;
  padding: 0 2px;
}
/* ---- Diff mode ---- */
.diff-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: color-mix(in srgb, var(--fg) 4%, var(--bg));
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  flex-shrink: 0;
}
.diff-toolbar-status {
  opacity: 0.5;
  font-size: 10px;
  margin-right: auto;
}
.diff-toolbar-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--fg);
  font-size: 10px;
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.diff-toolbar-btn:hover {
  border-color: var(--accent, var(--red));
  background: color-mix(in srgb, var(--accent, var(--red)) 8%, transparent);
}
.diff-toolbar-btn-accept { color: #58a6ff; border-color: color-mix(in srgb, #58a6ff 36%, transparent); }
.diff-toolbar-btn-accept:hover { border-color: #58a6ff; background: color-mix(in srgb, #58a6ff 12%, transparent); }
.diff-toolbar-btn-reject { color: #f2cc60; border-color: color-mix(in srgb, #f2cc60 36%, transparent); }
.diff-toolbar-btn-reject:hover { border-color: #f2cc60; background: color-mix(in srgb, #f2cc60 12%, transparent); }
.diff-line-del {
  display: block;
  background: color-mix(in srgb, #f2cc60 24%, transparent);
  border-left: 3px solid #f2cc60;
  color: #f2cc60;
  padding-left: 4px;
  margin-left: -7px;
  text-decoration: line-through;
}
.diff-line-add {
  display: block;
  background: color-mix(in srgb, #58a6ff 24%, transparent);
  border-left: 3px solid #58a6ff;
  color: #58a6ff;
  padding-left: 4px;
  margin-left: -7px;
}
/* Inline diff summary (version history cards) */
.diff-del {
  color: #f2cc60;
  background: color-mix(in srgb, #f2cc60 16%, transparent);
  text-decoration: line-through;
  border-radius: 2px;
  padding: 0 2px;
}
.diff-add {
  color: #58a6ff;
  background: color-mix(in srgb, #58a6ff 16%, transparent);
  font-weight: 600;
  border-radius: 2px;
  padding: 0 2px;
}
.diff-line-equal {
  display: block;
}
.diff-chunk-resolved {
  opacity: 0.3;
  transition: opacity 0.3s;
}
.diff-chunk-actions {
  position: absolute;
  right: 8px;
  top: 0;
  display: flex;
  gap: 4px;
  z-index: 5;
  pointer-events: auto;
}
/* Diff mode: textarea sits on top of the highlight where chunk buttons live.
   Disable its pointer events so clicks reach the buttons in the layer below. */
.doc-editor-wrap.diff-mode .doc-editor-textarea {
  pointer-events: none;
  color: transparent !important;
  caret-color: transparent !important;
}
.doc-editor-wrap.diff-mode .doc-editor-highlight {
  display: block !important;
  pointer-events: auto;
  z-index: 3;
  color: var(--fg) !important;
  background: var(--sidebar-bg, var(--panel)) !important;
  overflow: hidden;
}
.doc-editor-wrap.diff-mode .doc-editor-highlight * {
  color: inherit;
}
.doc-editor-wrap.diff-mode .diff-line-del {
  color: #f2cc60 !important;
}
.doc-editor-wrap.diff-mode .diff-line-add {
  color: #58a6ff !important;
}
.diff-chunk-btn {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  transition: border-color 0.15s, background 0.15s;
  opacity: 0.6;
}
.diff-chunk-btn:hover { opacity: 1; }
.diff-chunk-btn-accept { color: #58a6ff; }
.diff-chunk-btn-accept:hover { border-color: #58a6ff; background: color-mix(in srgb, #58a6ff 15%, transparent); }
.diff-chunk-btn-reject { color: #f2cc60; }
.diff-chunk-btn-reject:hover { border-color: #f2cc60; background: color-mix(in srgb, #f2cc60 15%, transparent); }

.doc-suggestion-accept-all {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 8px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 10px;
  font-family: inherit;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  transition: background 0.1s;
}
.doc-suggestion-accept-all:hover {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}
.doc-suggestion-reason {
  opacity: 0.6;
  margin-bottom: 6px;
  font-size: 11px;
  line-height: 1.4;
}
.doc-suggestion-diff {
  background: var(--bg);
  border-radius: 4px;
  padding: 6px 8px;
  font-family: var(--code-font, monospace);
  font-size: 11px;
  margin-bottom: 8px;
  max-height: 100px;
  overflow-y: auto;
  word-break: break-word;
}
.doc-suggestion-del {
  color: var(--red);
  text-decoration: line-through;
  opacity: 0.7;
}
.doc-suggestion-add {
  color: var(--green);
}
.doc-suggestion-actions {
  display: flex;
  gap: 6px;
}
.doc-suggestion-accept,
.doc-suggestion-dismiss {
  flex: 1;
  padding: 5px 8px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
  font-weight: 500;
  transition: background 0.1s;
}
.doc-suggestion-accept {
  background: var(--accent, var(--red));
  color: #fff;
}
.doc-suggestion-dismiss {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
}
.doc-suggestion-dismiss:hover {
  background: color-mix(in srgb, var(--fg) 8%, transparent);
}
@keyframes suggestion-enter {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}
/* Mobile: suggestion card overlays top of editor (no room on side) */
@media (max-width: 768px) {
  .doc-suggestion-card {
    right: 8px;
    right: 8px;
    width: auto;
    top: 8px !important;
  }
  .doc-suggestion-card::before { display: none; }
}

/* ---- Streaming animation ---- */
.doc-editor-textarea[readonly] {
  caret-color: var(--red);
}

/* Diff overlay */
.doc-diff-overlay {
  position: absolute;
  inset: 0;
  background: var(--bg);
  z-index: 5;
  overflow-y: auto;
  padding: 8px 12px;
  font-family: 'Fira Code', monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 6px;
}
.doc-diff-overlay.visible { opacity: 1; }
.doc-diff-overlay.fading { opacity: 0; transition: opacity 0.4s ease; }
.doc-diff-stats {
  display: flex;
  gap: 10px;
  padding: 4px 0 8px;
  font-size: 0.8rem;
  font-weight: 600;
}
.diff-stat-del { color: var(--warn); }
.diff-stat-add { color: var(--green); }
.doc-diff-line {
  padding: 1px 8px;
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-all;
}
.doc-diff-line.same {
  opacity: 0.4;
}
.doc-diff-line.del {
  background: color-mix(in srgb, var(--warn) 15%, transparent);
  color: var(--warn);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--warn) 40%, transparent);
}
.doc-diff-line.add {
  background: color-mix(in srgb, var(--green) 12%, transparent);
  color: var(--green);
}
.doc-diff-sep {
  text-align: center;
  padding: 2px 0;
  font-size: 0.7rem;
  opacity: 0.3;
  color: var(--fg);
}

/* Version history panel (slide-out) */
.doc-version-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 300px;
  background: var(--bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 200;
  box-shadow: 4px 0 16px rgba(0,0,0,0.35);
  animation: version-slide-in 0.2s ease-out;
  /* Match the app modal aesthetic so nothing inherits the large body font. */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 12px;
  letter-spacing: -0.01em;
}
@keyframes version-slide-in {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
.doc-version-panel.hidden {
  display: none;
}
@media (max-width: 768px) {
  .doc-version-panel {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    height: 50vh;
    border-right: none;
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.3);
    /* It's a bottom sheet on mobile — slide UP from the bottom, not in from
       the left (the desktop animation looked like a black box janking in). */
    animation: version-slide-up 0.2s ease-out;
  }
}
@keyframes version-slide-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.doc-version-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
}

.doc-version-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.doc-version-item {
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.15s;
  background: color-mix(in srgb, var(--fg) 3%, transparent);
}
.doc-version-item:hover {
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  border-color: var(--fg);
}

.doc-version-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.doc-version-num {
  font-weight: 600;
  font-size: 12px;
  color: var(--fg);
}
.doc-version-source {
  font-size: 10px;
  color: var(--fg);
  opacity: 0.5;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  padding: 1px 6px;
  border-radius: 4px;
}
.doc-version-time {
  font-size: 10px;
  color: var(--fg);
  opacity: 0.4;
  margin-left: auto;
}
.doc-version-summary {
  font-size: 11px;
  color: var(--fg);
  opacity: 0.5;
  margin-bottom: 4px;
}

.doc-version-restore {
  background: none;
  border: 1px solid var(--border);
  color: var(--fg);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.doc-version-restore:hover {
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  border-color: var(--fg);
}
/* "latest" badge */
.doc-version-latest {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent, var(--red));
  background: color-mix(in srgb, var(--accent, var(--red)) 14%, transparent);
  padding: 1px 6px;
  border-radius: 4px;
}
/* Diff preview lines — small and muted so they don't dominate the item. */
.doc-version-diff {
  font-size: 10px;
  line-height: 1.5;
  opacity: 0.8;
  margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-word;
}
.doc-version-diff .diff-del {
  color: #f2cc60;
  background: color-mix(in srgb, #f2cc60 16%, transparent);
  opacity: 1;
}
.doc-version-diff .diff-add {
  color: #58a6ff;
  background: color-mix(in srgb, #58a6ff 16%, transparent);
}

/* Mobile: doc editor takes over full screen as toggle */
@media (max-width: 768px) {
  body.doc-view .doc-editor-pane {
    /* Force its own full-screen window on mobile. !important on these so an
       inline width/position left over from desktop drag-resize, or the base
       desktop split layout (flex: 1; max-width: 70vw; border-left), can never
       render it as a narrow side pane ("sidebar") on a phone. */
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    flex: none !important;
    z-index: 170;
    /* Stroke the top edge so the rounded corners read as a curved sheet edge. */
    border: 1px solid var(--border);
    border-bottom: none;
    /* Rounded top corners like the other mobile sheet windows. */
    border-radius: 14px 14px 0 0;
    /* Slide up from the bottom (sheet), not in from the side, on mobile. */
    animation: sheet-enter 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    transform-origin: bottom center;
  }
  /* A document that was already open before refresh should be restored in
     place, not replay the mobile sheet entrance and visibly jump upward. */
  body.doc-view .doc-editor-pane.doc-pane-restoring {
    animation: none;
    transform: none;
  }
  body.doc-view .doc-divider {
    display: none;
  }
  /* Hide chat behind doc panel on mobile */
  body.doc-view .chat-container {
    display: none;
  }
  /* Doc + email windows alternate: whichever was opened last is in front.
     Default (a doc was opened last) → email windows sit BELOW the full-screen
     doc pane (170) so the draft is on top. When the user re-opens an email
     window (body.email-front, set by openEmailLibrary / reader open+restore) →
     the email windows jump ABOVE the doc. Covers the email library AND any open
     reader window (email-reader-<uid>); both are .modal at z-250 by default. */
  body.doc-view #email-lib-modal,
  body.doc-view .modal[id^="email-reader-"] { z-index: 150 !important; }
  body.doc-view.email-front #email-lib-modal,
  body.doc-view.email-front .modal[id^="email-reader-"] { z-index: 300 !important; }
  body.doc-view:not(.email-front) .doc-editor-pane { z-index: 10010 !important; }
  body.doc-view:not(.email-front) #email-lib-modal,
  body.doc-view:not(.email-front) .modal[id^="email-reader-"] { z-index: 10000 !important; }
  /* Hide new-session button and hamburger when doc editor is open on mobile */
  body.doc-view .mobile-new-chat-btn,
  /* Hide the global hamburger while Compare Mode is active — the compare
   header has its own close button in the top-right, and overlapping the
   two looks like a bug. The .compare-active class lives on the chat
   container, not body, so use :has(). */
body:has(.compare-active) .hamburger-btn { display: none !important; }
/* Mobile: hide the sidebar hamburger when a document panel (or notes pane)
   is open — those sheets cover the whole screen on mobile, so a floating
   hamburger sticking out over them is just clutter / mis-tap bait. */
@media (max-width: 768px) {
  body.doc-view .hamburger-btn,
  body:has(#notes-pane) .hamburger-btn { display: none !important; }
}
  /* Make room for hamburger button alongside the tab/header bars (fallback if shown) */
  body.doc-view.sidebar-collapsed.hamburger-left .doc-tab-bar,
  body.doc-view.sidebar-collapsed.hamburger-left .doc-editor-header,
  body.doc-view.sidebar-collapsed.hamburger-left .doc-md-toolbar {
    padding-left: 44px;
  }
  body.doc-view.sidebar-collapsed.hamburger-right .doc-tab-bar,
  body.doc-view.sidebar-collapsed.hamburger-right .doc-editor-header,
  body.doc-view.sidebar-collapsed.hamburger-right .doc-md-toolbar {
    padding-right: 44px;
  }
  /* ── Tab bar — match header height, bigger touch targets ── */
  .doc-tab-bar {
    padding: 0;
    height: 40px;
  }
  .doc-tab {
    padding: 0 12px;
    font-size: 13px;
  }
  /* Bigger × touch target on mobile. */
  .doc-tab-close {
    font-size: 22px;
    width: 32px;
    height: 32px;
    padding: 0;
    opacity: 0.5;
  }
  .doc-tab .doc-tab-menu-btn {
    opacity: 0.4 !important;
    padding: 4px 6px !important;
  }
  .doc-tab .doc-tab-menu-btn svg {
    width: 14px !important;
    height: 14px !important;
  }
  /* Footer is identical to desktop now, so the separate mobile Close/Copy
     footer is dropped and the per-tab × stays (matching desktop). */
  .doc-mobile-footer { display: none !important; }
  .doc-tab-new {
    font-size: 13px !important;
    padding: 0 14px !important;
    gap: 4px;
  }
  /* No hamburger padding — it's hidden in doc-view */
  body.doc-view.sidebar-collapsed.hamburger-left .doc-tab-bar,
  body.doc-view.sidebar-collapsed.hamburger-left .doc-editor-header,
  body.doc-view.sidebar-collapsed.hamburger-left .doc-md-toolbar {
    padding-left: 0 !important;
  }
  body.doc-view.sidebar-collapsed.hamburger-right .doc-tab-bar,
  body.doc-view.sidebar-collapsed.hamburger-right .doc-editor-header,
  body.doc-view.sidebar-collapsed.hamburger-right .doc-md-toolbar {
    padding-right: 0 !important;
  }
  /* ── Header — identical layout to desktop (left-aligned), match tab height ── */
  .doc-editor-header {
    padding: 6px 12px 6px 8px;
    gap: 6px;
    min-height: 40px;
  }
  .doc-import-label,
  #doc-version-badge {
    display: none !important;
  }
  /* ── Markdown toolbar — same height as tab bar ── */
  .doc-md-toolbar {
    height: 40px !important;
    padding: 4px 8px;
    gap: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* The toolbar's padding-left is forced to 0 by the hamburger rules, so give
     the Edit/Preview toggle its own left margin to clear the screen edge +
     the 18px mask fade. Margin isn't overridden by those !important paddings. */
  .doc-md-toolbar .md-view-toggle { margin-left: 8px; }
  .doc-md-toolbar button {
    font-size: 13px !important;
    padding: 6px 10px !important;
    min-width: 34px;
    min-height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .md-toolbar-sep {
    height: 18px;
    margin: 0 4px;
  }
}

/* Opacity slider in the theme tabs row — lets the user see the page behind
   the modal while tweaking colors. JS toggles .hidden based on active tab. */
.theme-opacity-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  margin-right: 6px;
  padding: 2px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  opacity: 0.65;
  transition: opacity 0.15s, border-color 0.15s, background 0.15s, color 0.15s;
  height: 22px;
  align-self: center;
  /* Now a <button> toggle, not a slider wrapper. */
  cursor: pointer;
  color: var(--fg);
  font: inherit;
  background: transparent;
}
.theme-opacity-wrap.hidden { display: none; }
.theme-opacity-wrap:hover { opacity: 1; }
/* The title h4 already carries margin-right:auto to group header controls
   on the right. BOTH the Peek button AND the injected minimize button also
   have margin-left:auto — and multiple competing auto-margins split the
   free space, stranding Peek in the middle. Zero their left-autos here so
   the h4 alone pushes Peek + minimize + close together, flush right. */
.modal-header .theme-opacity-wrap,
.modal-header .modal-minimize-btn { margin-left: 0 !important; }
/* On = peeking through; highlight with the accent so the state is obvious. */
.theme-opacity-wrap.active {
  opacity: 1;
  border-color: var(--accent, var(--red));
  background: color-mix(in srgb, var(--accent, var(--red)) 14%, transparent);
  color: var(--accent, var(--red));
}
.theme-opacity-label { font-size: 10px; font-weight: 600; letter-spacing: 0.02em; }
.theme-opacity-wrap > svg { flex-shrink: 0; opacity: 0.7; }
.theme-opacity-wrap input[type="range"] {
  width: 92px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: color-mix(in srgb, var(--fg) 18%, transparent);
  border-radius: 2px;
  outline: none;
  margin: 0;
}
.theme-opacity-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent, var(--red));
  border: none;
  cursor: pointer;
}
.theme-opacity-wrap input[type="range"]::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent, var(--red));
  border: none;
  cursor: pointer;
}

/* ── Theme editor: hover-to-highlight zone ── */
.theme-zone-highlight {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  border: 2px dashed var(--accent, var(--red));
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent, var(--red)) 14%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, var(--red)) 40%, transparent),
              0 0 18px color-mix(in srgb, var(--accent, var(--red)) 35%, transparent);
  animation: theme-zone-pulse 1.4s ease-in-out infinite;
}
@keyframes theme-zone-pulse {
  0%, 100% { opacity: 0.95; }
  50%      { opacity: 0.55; }
}
/* Highlight the color row itself too so the user has a strong visual link
   between the input they're hovering and the zone overlay on the page. */
#theme-tab-customize .color-row {
  transition: background 0.15s, border-color 0.15s;
  border-radius: 6px;
}
#theme-tab-customize .color-row:hover {
  background: color-mix(in srgb, var(--accent, var(--red)) 8%, transparent);
}

/* "Auto-saved" pill that flashes after each color/font change. */
.theme-autosaved-pill {
  position: sticky;
  bottom: 8px;
  margin: 8px auto 0;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 5px;
  background: color-mix(in srgb, var(--color-success, #4caf50) 18%, var(--bg));
  color: var(--color-success, #4caf50);
  border: 1px solid color-mix(in srgb, var(--color-success, #4caf50) 40%, transparent);
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  pointer-events: none;
  z-index: 5;
}
.theme-autosaved-pill.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Doc fullscreen ---- */
.doc-editor-pane.doc-fullscreen {
  flex: 1;
  max-width: 100%;
  width: 100% !important;
  border-left: none;
}
/* Keep the hamburger reachable in fullscreen — version history can still
   hide it (the panel covers that area). */
body:has(.doc-version-panel:not(.hidden)) .hamburger-btn {
  display: none !important;
}

/* ---- Document run output ---- */
.doc-run-output {
  border-top: 2px solid var(--hl-function, #61afef);
  background: var(--bg);
  padding: 6px 12px 8px;
  max-height: 200px;
  overflow: auto;
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 0.85em;
  line-height: 1.5;
  position: relative;
}
.doc-run-output .code-runner-pre { background: none !important; border: none !important; margin: 0; padding: 0; }
.doc-run-output .code-runner-copy-inline {
  right: 16px;
  width: 28px;
  height: 26px;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.doc-run-output .code-runner-error { color: var(--red); }
.doc-run-output .code-runner-loading { font-style: italic; color: var(--red); }
.doc-run-output .code-runner-empty { color: var(--fg-muted, var(--fg)); padding: 2px 0; }
.doc-run-output .code-runner-close { position: absolute; top: 4px; right: 4px; background: none; border: none; color: var(--fg); cursor: pointer; opacity: 0.5; font-size: 14px; padding: 2px 6px; }
.doc-run-output .code-runner-close:hover { opacity: 1; }
.doc-run-pre { color: var(--fg); white-space: pre-wrap; word-break: break-word; margin: 0; }
.doc-run-error { color: var(--red); white-space: pre-wrap; word-break: break-word; margin: 0; }

/* ---- Markdown preview ---- */
.doc-md-preview {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
}
.doc-md-preview.doc-rich-preview {
  background: #fff;
  color: #111;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  padding: 32px max(24px, calc((100% - 780px) / 2));
}
.doc-rich-preview > :not(.doc-preview-hover-edit) {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}
.doc-rich-preview-empty {
  position: relative;
  left: -16px;
  top: -8px;
  color: #6b7280;
  text-align: center;
}
.doc-preview-hover-edit {
  position: sticky;
  top: 0;
  z-index: 4;
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 8px 12px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--fg);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity 0.12s, transform 0.12s, background 0.12s, border-color 0.12s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.doc-md-preview:hover .doc-preview-hover-edit,
.doc-preview-hover-edit:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.doc-preview-hover-edit:hover {
  background: color-mix(in srgb, var(--accent, var(--red)) 12%, var(--panel));
  border-color: color-mix(in srgb, var(--accent, var(--red)) 55%, var(--border));
}

/* DOCX visual preview — keep the Word document on a readable white sheet even
   when the surrounding workspace uses a dark theme. */
.doc-docx-preview {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 28px 18px 42px;
  background: #d9dce1;
  color: #111827;
}
.doc-docx-paper {
  width: min(816px, 100%);
  min-height: 1056px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 72px 76px;
  background: #fff;
  color: #111;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  box-shadow: 0 4px 18px rgba(0,0,0,.22);
}
.doc-docx-paper h1, .doc-docx-paper h2, .doc-docx-paper h3,
.doc-docx-paper h4, .doc-docx-paper h5, .doc-docx-paper h6 {
  color: #111;
  line-height: 1.2;
  margin: 1.2em 0 .55em;
}
.doc-docx-paper p { margin: 0 0 .8em; }
.doc-docx-paper img { max-width: 100%; height: auto; }
.doc-docx-paper table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.doc-docx-paper td, .doc-docx-paper th { border: 1px solid #c7cbd1; padding: 6px 8px; vertical-align: top; }
.doc-docx-paper th { background: #f2f3f5; }
.doc-docx-paper a { color: #1757a6; }
.doc-docx-preview-loading, .doc-docx-preview-error {
  max-width: 816px;
  margin: 40px auto;
  padding: 20px;
  color: var(--fg);
  text-align: center;
}
.doc-docx-preview-error { color: var(--color-error, #c2413d); }
@media (max-width: 700px) {
  .doc-docx-preview { padding: 12px 8px 28px; }
  .doc-docx-paper { min-height: 0; padding: 34px 24px; font-size: 14px; }
}
.doc-md-preview pre {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  overflow-x: auto;
}
.doc-md-preview code {
  font-size: 0.95em;
}
.doc-md-preview p { margin: 0.6em 0; }
.doc-md-preview h1, .doc-md-preview h2, .doc-md-preview h3 {
  margin: 0.8em 0 0.4em;
  color: var(--hl-string);
}
.doc-md-preview ul, .doc-md-preview ol {
  margin-left: 20px;
  margin-bottom: 0.6em;
}
.doc-md-preview blockquote {
  border-left: 3px solid var(--border);
  padding-left: 12px;
  margin: 0.6em 0;
  opacity: 0.8;
}

/* ---- Active state for doc action icon buttons ---- */
.doc-action-icon-btn.active {
  opacity: 1;
  color: var(--red);
  background: color-mix(in srgb, var(--red) 12%, transparent);
}
#doc-run-btn:hover {
  color: var(--hl-function, #61afef);
}

/* ===== ADMIN PANEL (inside settings modal) ===== */

/* Cards */
.admin-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
}
/* When the integrations editor opens, the inner admin-card should match the
   listed integration cards (subtle tint, same border) instead of reverting
   to the solid-panel admin-card surface used elsewhere. */
#unified-intg-form .admin-card,
#integrations-form .admin-card {
  background: color-mix(in srgb, var(--fg) 3%, transparent);
}
.admin-card h2 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
}
.admin-danger-card {
  border-color: color-mix(in srgb, var(--color-error) 27%, transparent);
}

/* Toggle switch */
.admin-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.admin-toggle-label {
  font-size: 13px;
  font-weight: 500;
}
.admin-toggle-sub {
  /* 65% mix keeps this helper text above WCAG AA 4.5:1 on the dark panel
     (50% only reached ~3.9:1). */
  color: color-mix(in srgb, var(--fg) 65%, transparent);
  font-size: 11px;
  margin-top: 2px;
}
/* Hide the native up/down spinners on the Max auto-skills number input. */
#skill-max-input {
  -moz-appearance: textfield;
  appearance: textfield;
}
#skill-max-input::-webkit-inner-spin-button,
#skill-max-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.admin-switch {
  position: relative;
  width: 30px;
  height: 16px;
  flex-shrink: 0;
  display: inline-block;
}
.admin-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.admin-slider {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--fg) 50%, transparent);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.08s;
}
.admin-slider::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 12px;
  height: 12px;
  background: var(--panel);
  border-radius: 50%;
  transition: transform 0.08s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.admin-switch input:checked + .admin-slider {
  background: var(--red);
}
.admin-switch input:checked + .admin-slider::before {
  transform: translateX(14px);
}

/* User rows */
.admin-user-row {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  transition: border-color 0.15s;
}
.admin-user-row:hover {
  border-color: color-mix(in srgb, var(--fg) 20%, var(--border));
}
.admin-user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-user-name { font-size: 13px; font-weight: 500; }
/* Privilege panel */
.admin-priv-panel {
  max-height: 600px;
  transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.2s ease;
  overflow: hidden;
}
.admin-priv-panel.hidden {
  max-height: 0 !important;
  opacity: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  border-top: none !important;
}
/* Privilege toggle rows */
.admin-priv-panel [data-priv] {
  accent-color: var(--accent, var(--red));
}
/* Section headers */
.admin-priv-section {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.35;
  font-weight: 600;
  margin: 10px 0 4px;
}
.admin-priv-section:first-child {
  margin-top: 0;
}
/* Model checkbox list */
.priv-models-list {
  max-height: 150px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 6px;
  background: var(--bg);
  scrollbar-width: thin;
}
.priv-models-list::-webkit-scrollbar {
  width: 4px;
}
.priv-models-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--fg) 15%, transparent);
  border-radius: 2px;
}
.priv-models-list label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 2px;
  font-size: 11px;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.1s;
}
.priv-models-list label:hover {
  background: color-mix(in srgb, var(--fg) 5%, transparent);
}
.priv-models-list input[type="checkbox"] {
  accent-color: var(--accent, var(--red));
  margin: 0;
  flex-shrink: 0;
}
/* All/None links */
.priv-models-all,
.priv-models-none {
  font-size: 10px;
  opacity: 0.5;
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.1s;
}
.priv-models-all:hover,
.priv-models-none:hover {
  opacity: 1;
}

/* MCP tool toggles panel */
.mcp-tools-panel {
  width: 100%;
  padding: 8px 0 4px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
  max-height: 600px;
  transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.2s ease;
  overflow: hidden;
}
.mcp-tools-panel.hidden {
  max-height: 0 !important;
  opacity: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
}
.mcp-tools-panel .mcp-tools-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.mcp-tools-panel .mcp-tools-header span:first-child {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.35;
  font-weight: 600;
}
.mcp-tools-panel .mcp-tools-header a {
  font-size: 10px;
  opacity: 0.5;
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.1s;
}
.mcp-tools-panel .mcp-tools-header a:hover {
  opacity: 1;
}
.mcp-tools-list {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 6px;
  background: color-mix(in srgb, var(--fg) 3%, transparent);
}
.mcp-tools-list::-webkit-scrollbar {
  width: 4px;
}
.mcp-tools-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--fg) 15%, transparent);
  border-radius: 2px;
}
.mcp-tools-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  font-size: 11px;
  cursor: pointer;
  border-radius: 3px;
  min-width: 0;
}
.mcp-tools-list label > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.mcp-tools-list label:hover {
  background: color-mix(in srgb, var(--fg) 5%, transparent);
}
.mcp-tools-list input[type="checkbox"] {
  accent-color: var(--accent, var(--red));
  margin: 0;
  flex-shrink: 0;
}
/* Dot-style toggle (mirrors .note-check-dot) for the Add Models row,
   replacing the native checkbox while keeping it for click handling. */
.adm-cb-hidden {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.adm-check-dot {
  /* Lock the dot to a fixed 12×12 box. The parent rule
     `.mcp-tools-list label > span { flex: 1 }` was stretching this span
     to fill the row when it didn't have its own flex override. */
  flex: 0 0 12px !important;
  width: 12px !important;
  height: 12px;
  min-width: 12px;
  max-width: 12px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--fg) 35%, transparent);
  position: relative;
  transition: background 0.2s, border-color 0.2s, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.adm-model-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 2px 4px;
  box-sizing: border-box;
  width: 100%;
}
.adm-model-label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
}
.adm-model-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.adm-model-tools-col {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: auto;
}
.adm-model-tools-label {
  font-size: 10px;
  opacity: 0.45;
  flex-shrink: 0;
  user-select: none;
}
.adm-model-tool-mode,
.admin-tools-select {
  height: 24px;
  min-height: 24px;
  line-height: 22px;
  font-size: 11px;
  padding: 0 18px 0 6px;
  width: 124px;
  max-width: 130px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid var(--border);
  background-color: var(--select-bg);
  color: var(--select-fg);
  box-sizing: border-box;
  vertical-align: middle;
}
@media (max-width: 480px) {
  .adm-model-tool-mode,
  .admin-tools-select {
    width: 105px;
    max-width: 110px;
    font-size: 10px;
    padding: 0 14px 0 4px;
  }
}
.adm-model-row:hover .adm-check-dot {
  border-color: var(--accent, var(--red));
  transform: scale(1.15);
}
.adm-cb-hidden:checked + .adm-check-dot {
  background: var(--accent, var(--red));
  border-color: var(--accent, var(--red));
}
/* Added Models bulk selection uses the shared dot, without a check glyph. */
.adm-endpoint-select-dot {
  flex-basis: 11px !important;
  width: 11px !important;
  height: 11px;
  min-width: 11px;
  max-width: 11px;
}
/* Disabled endpoints — dim the row but keep the toggle/delete buttons
   at full opacity so the user can re-enable or remove without squinting. */
.admin-user-row.admin-ep-disabled { opacity: 0.55; }


.admin-user-row.adm-ep-just-added {
  border-radius: 8px;
  animation: adm-ep-just-added-glow 2.2s ease-out;
}
.admin-user-row.admin-ep-disabled .admin-btn-sm,
.admin-user-row.admin-ep-disabled .admin-btn-delete,
.admin-user-row.admin-ep-disabled .admin-badge-off { opacity: 1; }
/* Local / API subsection labels inside the Endpoints card */
.adm-ep-section-head {
  display: flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0.5;
  margin-bottom: 4px;
}

/* Collapsible Add-Models subsections (API / Local) — the whole header row
   acts as a toggle so a long cloud-API form can be tucked away when you
   only want to paste a local URL. */
.adm-section-toggle {
  cursor: pointer;
  user-select: none;
  opacity: 0.8;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 9px;
  margin-bottom: 6px;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  transition: border-color 0.12s, background 0.12s, opacity 0.12s;
}
.adm-section-toggle:hover {
  opacity: 1;
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 8%, transparent);
}
.adm-section-toggle .adm-section-caret { opacity: 0.6; }
/* When expanded, square off the bottom so the header reads as attached to
   the form it controls. */
.adm-add-section:not(.collapsed) .adm-section-toggle {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}
.adm-section-caret {
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.adm-quickstart-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  opacity: 0.72;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  background: color-mix(in srgb, var(--fg) 3%, transparent);
}
.adm-quickstart-toggle:hover {
  opacity: 1;
  border-color: var(--red);
}
.adm-quickstart-body {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  padding: 6px 8px;
}

/* Custom provider picker (logo + name) replacing the native <select> */
.adm-provider-picker { position: relative; margin-bottom: 6px; }
.adm-provider-combo {
  display: flex;
  align-items: stretch;
}
.adm-provider-combo input {
  flex: 1;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.adm-provider-btn {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 8px; font-family: inherit; font-size: 12px;
  cursor: pointer; text-align: left;
}
.adm-provider-combo .adm-provider-btn {
  width: 128px;
  flex-shrink: 0;
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  justify-content: space-between;
}
.adm-provider-btn:hover { border-color: color-mix(in srgb, var(--fg) 30%, var(--border)); }
.adm-provider-current { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.adm-provider-logo {
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--fg); opacity: 0.85;
}
.adm-provider-logo svg { width: 14px; height: 14px; }
/* Pull the settings-select 4px closer to its logo chip so the row
   reads as logo+select instead of having an extra gap. */
.adm-model-logo + .settings-select { margin-left: -4px; }
/* Fallback rows: stretch the model select so the trash button on
   the right aligns with the right edge of the Endpoint and Model
   dropdowns above the fallback list. Without flex:1 the model
   select shrinks to its content and the trash button rides up
   tight to it. */
.settings-fallback-row > .settings-select { flex: 1 1 0; min-width: 0; }
/* Constrain logo SVGs in settings dropdown chips. Many provider
   icons in providers.js declare only viewBox (no width/height),
   so without this rule the browser falls back to 300x150 and
   blows up the row. */
.settings-fallback-row > span[style*="width:18px"] svg:not([width]),
.settings-row > span[style*="width:18px"] svg:not([width]),
span[id$="-logo"] svg:not([width]) {
  width: 100%;
  height: 100%;
  display: block;
}
.adm-provider-logo:empty {
  background: color-mix(in srgb, var(--fg) 12%, transparent);
  border-radius: 50%;
}
.adm-provider-caret { flex-shrink: 0; transition: transform 0.15s; }
.adm-provider-picker:has(.adm-provider-menu:not(.hidden)) .adm-provider-caret {
  transform: rotate(180deg);
}
.adm-provider-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 100;
  max-height: 280px; overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  padding: 4px;
}
.adm-provider-menu.hidden { display: none; }
.adm-provider-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 4px;
  font-size: 12px; cursor: pointer;
}
.adm-provider-item:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.adm-provider-item.active { background: color-mix(in srgb, var(--accent, var(--red)) 14%, transparent); }

/* When the Appearance tab is open, the #settings-modal-opacity slider (in
   the header) fades the modal so the user can see the rest of the UI react
   as toggles flip. The fade is applied as a background color-mix in JS
   (settings.js) rather than element opacity, so the controls/text stay
   crisp — mirroring the Theme customizer's opacity slider. */

/* Search provider fallback chain — chips + drag-reorder */
.search-fallback-chain {
  flex: 1; display: flex; align-items: center;
  flex-wrap: wrap; gap: 6px; min-height: 28px;
}
.search-fb-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 4px 3px 6px;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  border: 1px solid var(--border); border-radius: 10px;
  font-size: 11px; cursor: grab; user-select: none;
}
.search-fb-chip.dragging { opacity: 0.4; }
.search-fb-grip { opacity: 0.35; font-size: 10px; line-height: 1; cursor: grab; }
.search-fb-logo {
  width: 12px; height: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; opacity: 0.85;
}
.search-fb-logo svg { width: 12px; height: 12px; }
.search-fb-remove {
  background: none; border: none; color: var(--fg);
  opacity: 0.45; cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 2px;
  transition: opacity 0.15s, color 0.15s;
}
.search-fb-remove:hover { opacity: 1; color: var(--red); }
.search-fb-add {
  background: var(--bg); color: var(--fg);
  border: 1px dashed var(--border); border-radius: 10px;
  padding: 2px 6px; font-family: inherit; font-size: 11px;
  outline: none; cursor: pointer;
}
.search-fb-add:focus,
.search-fb-add:hover {
  border-color: var(--accent, var(--red));
  border-style: solid;
}

.mcp-tools-search {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 6px;
  padding: 5px 8px;
  font-size: 11px;
  font-family: inherit;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
  outline: none;
}
.mcp-tools-search:focus {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
}
.mcp-tools-count {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.7;
}

/* Badges */
.admin-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--red) 20%, transparent);
  color: var(--red);
  font-weight: 600;
}
.admin-badge-off {
  background: color-mix(in srgb, var(--color-error) 20%, transparent);
  color: var(--color-error);
}

/* Buttons */
.admin-btn-delete {
  background: none;
  border: 1px solid color-mix(in srgb, var(--color-error) 27%, transparent);
  color: var(--color-error);
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
  transition: all 0.15s;
}
.admin-btn-delete:hover {
  background: var(--color-error);
  border-color: var(--color-error);
  color: #fff;
}
.admin-btn-add {
  padding: 4px 10px;
  border: 1px solid var(--accent, var(--red));
  border-radius: 6px;
  background: var(--accent, var(--red));
  color: var(--bg);
  cursor: pointer;
  font-weight: 600;
  font-size: 11px;
  font-family: inherit;
  box-sizing: border-box;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}
.admin-btn-add:hover {
  background: var(--accent, var(--red));
  border-color: var(--accent, var(--red));
  opacity: 0.9;
}
.admin-btn-add:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.admin-btn-sm {
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--fg);
  cursor: pointer;
  font-size: 11px;
}
.admin-btn-sm:hover {
  background: var(--border);
  border-color: var(--red);
}
.admin-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--border);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: admin-spin 0.6s linear infinite;
  vertical-align: -2px;
  margin-right: 2px;
}

/* Forms */
.admin-add-form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.admin-add-form input {
  flex: 1;
  min-width: 120px;
  padding: 5px 8px;
  height: 32px;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg);
  font-family: inherit;
  font-size: 12px;
}
.admin-add-form input:focus { outline: none; border-color: var(--red); }
.admin-switch-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: color-mix(in srgb, var(--fg) 60%, transparent);
  cursor: default;
}

.admin-model-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.admin-model-form input,
.admin-model-form select {
  padding: 5px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg);
  font-size: 12px;
}
.admin-model-form input:focus { outline: none; border-color: var(--red); }
.admin-model-form-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;       /* let buttons drop to a new row on narrow widths
                             instead of overflowing the modal */
  align-items: center;
}
.admin-model-form-row input {
  flex: 1 1 180px;       /* api-key input takes the long axis but allows
                             dropping below the buttons at small widths */
  min-width: 0;          /* don't refuse to shrink past content width */
}
.admin-model-form-row select {
  flex: 0 0 auto;
}
.admin-model-form-row button {
  flex: 0 0 auto;
  white-space: nowrap;
}
/* On narrow screens, give buttons their own row + push the Add button
   to the right so it remains the obvious primary action. */
@media (max-width: 540px) {
  .admin-model-form-row input { flex-basis: 100%; }
  .admin-model-form-row .admin-btn-add { margin-left: auto; }
}
.adm-ep-inline-msg {
  min-height: 16px;
  margin-top: 5px;
  font-size: 11px;
}

/* Endpoint items */
.admin-ep-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--bg);
  border-radius: 6px;
  margin-bottom: 4px;
  font-size: 12px;
}
.admin-ep-info { flex: 1; overflow: hidden; }
.admin-ep-name { color: var(--fg); font-weight: 500; }
.admin-ep-detail {
  color: color-mix(in srgb, var(--fg) 40%, transparent);
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: -4px;
}

/* Settings panel — tint each card's h2 title icon with the user's accent
   colour. Direct-child selector (`> h2 > svg`) so SVGs nested inside
   header buttons (Test, kebab, etc.) are untouched. Each title icon uses
   stroke="currentColor", so setting color propagates; existing inline
   opacity:0.6 stays so the tint reads soft. */
/* Selected integration card — class beats inline borderColor reset */
.intg-card.intg-card-active { border-color: var(--accent, var(--red)) !important; }

/* Edge-dock resize handle: invisible at rest, accent stripe animates in
   on hover. Inline background:transparent + transition come from
   modalSnap.js; this rule paints the accent gradient on hover, beating
   the inline style with !important. */
.edge-dock-resize-handle-left:hover {
  background: linear-gradient(to right, transparent 0 3px, color-mix(in srgb, var(--accent, var(--red)) 35%, transparent) 3px 7px, transparent 7px 10px) !important;
}
.edge-dock-resize-handle-right:hover {
  background: linear-gradient(to left, transparent 0 3px, color-mix(in srgb, var(--accent, var(--red)) 35%, transparent) 3px 7px, transparent 7px 10px) !important;
}

[data-settings-panel] .admin-card > h2 > svg,
#theme-popup .admin-card > h2 > svg,
[data-settings-panel="added-models"] .adm-ep-section-head > svg {
  color: var(--accent, var(--red));
}