/* Fragment 5/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.
 */
.admin-ep-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* Status messages */
.admin-error { color: var(--color-error); font-size: 11px; margin-top: 4px; }
.admin-success { color: var(--color-success); font-size: 11px; margin-top: 4px; }
.admin-empty {
  color: color-mix(in srgb, var(--fg) 40%, transparent);
  font-size: 12px;
  padding: 10px 0;
  text-align: center;
}
/* Endpoint-list empty states ("No endpoints configured" / "None") get a
   left-aligned, accent-colored treatment so they read as "this row is your
   placeholder, click Add" rather than a centered "nothing here" grey blob. */
#adm-epList-local .admin-empty,
#adm-epList-api .admin-empty {
  text-align: left;
  padding: 8px 4px;
  color: var(--accent-primary, var(--accent, var(--red)));
}

/* RAG upload zone */
.admin-rag-upload-zone {
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 14px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  margin-bottom: 8px;
}
.admin-rag-upload-zone:hover,
.admin-rag-upload-zone.dragover {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 7%, transparent);
}
.admin-rag-upload-zone p {
  color: color-mix(in srgb, var(--fg) 50%, transparent);
  font-size: 11px;
  margin-top: 4px;
}
.admin-rag-icon { font-size: 18px; }
.admin-rag-dir-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.admin-rag-dir-row input {
  flex: 1;
  padding: 5px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg);
  font-size: 12px;
}
.admin-rag-dir-row input:focus { outline: none; border-color: var(--red); }
.admin-rag-dir-row button {
  padding: 5px 8px;
  border: none;
  border-radius: 6px;
  background: var(--red);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
}
.admin-rag-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
}
.admin-rag-section-label {
  font-size: 10px;
  color: color-mix(in srgb, var(--fg) 50%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 8px 0 4px;
}
.admin-rag-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  background: var(--bg);
  border-radius: 6px;
  margin-bottom: 4px;
  font-size: 12px;
}
.admin-rag-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg);
}
.admin-rag-item-meta {
  color: color-mix(in srgb, var(--fg) 40%, transparent);
  font-size: 10px;
  margin: 0 6px;
  flex-shrink: 0;
}
.admin-rag-status {
  font-size: 11px;
  color: color-mix(in srgb, var(--fg) 50%, transparent);
  margin-top: 6px;
}

/* Token reveal */
.admin-token-reveal {
  margin-top: 8px;
  padding: 8px;
  background: color-mix(in srgb, var(--red) 8%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--red) 25%, var(--border));
  border-radius: 8px;
}

/* Selects in admin cards */
.admin-card select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg);
  font-size: 12px;
}
.admin-card input {
  font-family: inherit;
  font-size: 12px;
}
.admin-card label {
  font-size: 12px;
}

/* ---- Document Library ---- */

.doclib-modal-content {
  width: min(600px, 92vw);
  max-height: 85vh;
  font-size: 12px;
  background: var(--bg);
}
/* Anchor doclib modal to top so only the bottom edge moves on resize */
#doclib-modal {
  align-items: flex-start;
  padding-top: 8vh;
}
.doclib-modal-content .modal-header h4 {
  font-size: 1rem;
}
/* The "open in new tab" email modal inherited the 1rem doclib header, which
   read way bigger than the email subject in the regular (inline) reader. Pin
   it smaller so the two views are consistent. */
.email-reader-tab-modal .modal-header h4 {
  font-size: 13px;
  font-weight: 600;
}
/* Match the sticky modal-header to the doclib modal-content body color
   (var(--bg)) instead of the global var(--panel) default — otherwise the
   header reads as a darker stripe above the email list. */
.doclib-modal-content > .modal-header {
  background: var(--bg);
}
.doclib-stats {
  font-size: 11px;
  color: var(--fg-muted);
  margin-bottom: 8px;
}
.doclib-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}
.doclib-search {
  flex: 1;
  padding: 6px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg);
  font-size: 12px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
#archive-select-btn { height: auto; padding: 5px 8px; }
.doclib-search:focus {
  border-color: var(--red);
}
.doclib-sort {
  padding: 6px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg);
  font-size: 12px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
}
.doclib-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.doclib-chip {
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, border-color 0.15s;
}
.doclib-chip:hover {
  border-color: var(--red);
}
.doclib-chip.active {
  background: color-mix(in srgb, var(--red) 15%, transparent);
  border-color: color-mix(in srgb, var(--red) 40%, transparent);
  color: var(--red);
}
/* Document library — language chip row */
.doclib-lang-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 2px 0;
  max-height: 52px;
  overflow-y: auto;
}
.doclib-lang-chips:empty { display: none; }
/* Mobile: keep tag chips on ONE row and scroll horizontally instead of wrapping
   into a tall multi-line block (Serve, library — anywhere .doclib-lang-chips is used). */
@media (max-width: 768px) {
  .doclib-lang-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .doclib-lang-chips::-webkit-scrollbar { display: none; }
  .doclib-lang-chips > * { flex-shrink: 0; }
}
#doclib-tidy-btn, #doclib-select-btn, #doclib-chats-tidy-btn {
  position: relative;
  top: -3px;
}
/* Document library — list layout */
.doclib-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 400px;
  overflow-y: auto;
  padding: 0;
  position: relative;
}

/* Gallery grid domino-in cascade on open — same recipe as the document/email
   libraries. Applied to #gallery-grid in gallery.js on the first render after
   each open, removed after the longest delay so re-renders feel instant. */
.gallery-just-opened > .gallery-card {
  animation: section-domino-in 0.36s cubic-bezier(0.22, 1.61, 0.36, 1) backwards;
}
.gallery-just-opened > :nth-child(1)  { animation-delay: 0.02s; }
.gallery-just-opened > :nth-child(2)  { animation-delay: 0.04s; }
.gallery-just-opened > :nth-child(3)  { animation-delay: 0.06s; }
.gallery-just-opened > :nth-child(4)  { animation-delay: 0.08s; }
.gallery-just-opened > :nth-child(5)  { animation-delay: 0.10s; }
.gallery-just-opened > :nth-child(6)  { animation-delay: 0.12s; }
.gallery-just-opened > :nth-child(7)  { animation-delay: 0.14s; }
.gallery-just-opened > :nth-child(8)  { animation-delay: 0.16s; }
.gallery-just-opened > :nth-child(9)  { animation-delay: 0.18s; }
.gallery-just-opened > :nth-child(10) { animation-delay: 0.20s; }
.gallery-just-opened > :nth-child(11) { animation-delay: 0.22s; }
.gallery-just-opened > :nth-child(12) { animation-delay: 0.24s; }
.gallery-just-opened > :nth-child(13) { animation-delay: 0.26s; }
.gallery-just-opened > :nth-child(14) { animation-delay: 0.28s; }
.gallery-just-opened > :nth-child(15) { animation-delay: 0.30s; }
.gallery-just-opened > :nth-child(16) { animation-delay: 0.32s; }
.gallery-just-opened > :nth-child(17) { animation-delay: 0.34s; }
.gallery-just-opened > :nth-child(18) { animation-delay: 0.36s; }
.gallery-just-opened > :nth-child(19) { animation-delay: 0.38s; }
.gallery-just-opened > :nth-child(20) { animation-delay: 0.40s; }
.gallery-just-opened > :nth-child(n+21) { animation-delay: 0.42s; }

/* Tasks list domino-in cascade on open — mirrors gallery / doclib. Applied to
   #tasks-list in tasks.js on the first render after each open, removed after
   the longest delay so re-renders feel instant. */
.tasks-just-opened > .task-card {
  animation: section-domino-in 0.36s cubic-bezier(0.22, 1.61, 0.36, 1) backwards;
}
.tasks-just-opened > :nth-child(1)  { animation-delay: 0.02s; }
.tasks-just-opened > :nth-child(2)  { animation-delay: 0.04s; }
.tasks-just-opened > :nth-child(3)  { animation-delay: 0.06s; }
.tasks-just-opened > :nth-child(4)  { animation-delay: 0.08s; }
.tasks-just-opened > :nth-child(5)  { animation-delay: 0.10s; }
.tasks-just-opened > :nth-child(6)  { animation-delay: 0.12s; }
.tasks-just-opened > :nth-child(7)  { animation-delay: 0.14s; }
.tasks-just-opened > :nth-child(8)  { animation-delay: 0.16s; }
.tasks-just-opened > :nth-child(9)  { animation-delay: 0.18s; }
.tasks-just-opened > :nth-child(10) { animation-delay: 0.20s; }
.tasks-just-opened > :nth-child(11) { animation-delay: 0.22s; }
.tasks-just-opened > :nth-child(12) { animation-delay: 0.24s; }
.tasks-just-opened > :nth-child(13) { animation-delay: 0.26s; }
.tasks-just-opened > :nth-child(14) { animation-delay: 0.28s; }
.tasks-just-opened > :nth-child(15) { animation-delay: 0.30s; }
.tasks-just-opened > :nth-child(16) { animation-delay: 0.32s; }
.tasks-just-opened > :nth-child(17) { animation-delay: 0.34s; }
.tasks-just-opened > :nth-child(18) { animation-delay: 0.36s; }
.tasks-just-opened > :nth-child(19) { animation-delay: 0.38s; }
.tasks-just-opened > :nth-child(20) { animation-delay: 0.40s; }
.tasks-just-opened > :nth-child(n+21) { animation-delay: 0.42s; }

/* Document library cascade — same recipe as email library, applied per-tab
   the first time content loads (chats / archive / research / documents).
   Module-level Set in documentLibrary.js prevents re-firing on tab swaps
   or filter/sort re-renders within the same page session. */
.doclib-just-opened > .memory-item,
.doclib-just-opened > .doclib-card {
  animation: section-domino-in 0.36s cubic-bezier(0.22, 1.61, 0.36, 1) backwards;
}
.doclib-just-opened > :nth-child(1)  { animation-delay: 0.02s; }
.doclib-just-opened > :nth-child(2)  { animation-delay: 0.04s; }
.doclib-just-opened > :nth-child(3)  { animation-delay: 0.06s; }
.doclib-just-opened > :nth-child(4)  { animation-delay: 0.08s; }
.doclib-just-opened > :nth-child(5)  { animation-delay: 0.10s; }
.doclib-just-opened > :nth-child(6)  { animation-delay: 0.12s; }
.doclib-just-opened > :nth-child(7)  { animation-delay: 0.14s; }
.doclib-just-opened > :nth-child(8)  { animation-delay: 0.16s; }
.doclib-just-opened > :nth-child(9)  { animation-delay: 0.18s; }
.doclib-just-opened > :nth-child(10) { animation-delay: 0.20s; }
.doclib-just-opened > :nth-child(11) { animation-delay: 0.22s; }
.doclib-just-opened > :nth-child(12) { animation-delay: 0.24s; }
.doclib-just-opened > :nth-child(13) { animation-delay: 0.26s; }
.doclib-just-opened > :nth-child(14) { animation-delay: 0.28s; }
.doclib-just-opened > :nth-child(15) { animation-delay: 0.30s; }
.doclib-just-opened > :nth-child(16) { animation-delay: 0.32s; }
.doclib-just-opened > :nth-child(17) { animation-delay: 0.34s; }
.doclib-just-opened > :nth-child(18) { animation-delay: 0.36s; }
.doclib-just-opened > :nth-child(19) { animation-delay: 0.38s; }
.doclib-just-opened > :nth-child(20) { animation-delay: 0.40s; }
.doclib-just-opened > :nth-child(n+21) { animation-delay: 0.42s; }

/* Domino cascade on first open of the email library — mirrors the sidebar
   .section-just-expanded recipe so list items spring in staggered. Class
   is applied to #email-lib-grid in emailLibrary.js on the first render
   only, then removed after the longest delay so re-renders feel instant. */
.email-lib-just-opened :is(.doclib-card, .date-section-header) {
  animation: section-domino-in 0.36s cubic-bezier(0.22, 1.61, 0.36, 1) backwards;
}
.email-lib-just-opened :is(.doclib-card, .date-section-header):nth-child(1)  { animation-delay: 0.02s; }
.email-lib-just-opened :is(.doclib-card, .date-section-header):nth-child(2)  { animation-delay: 0.04s; }
.email-lib-just-opened :is(.doclib-card, .date-section-header):nth-child(3)  { animation-delay: 0.06s; }
.email-lib-just-opened :is(.doclib-card, .date-section-header):nth-child(4)  { animation-delay: 0.08s; }
.email-lib-just-opened :is(.doclib-card, .date-section-header):nth-child(5)  { animation-delay: 0.10s; }
.email-lib-just-opened :is(.doclib-card, .date-section-header):nth-child(6)  { animation-delay: 0.12s; }
.email-lib-just-opened :is(.doclib-card, .date-section-header):nth-child(7)  { animation-delay: 0.14s; }
.email-lib-just-opened :is(.doclib-card, .date-section-header):nth-child(8)  { animation-delay: 0.16s; }
.email-lib-just-opened :is(.doclib-card, .date-section-header):nth-child(9)  { animation-delay: 0.18s; }
.email-lib-just-opened :is(.doclib-card, .date-section-header):nth-child(10) { animation-delay: 0.20s; }
.email-lib-just-opened :is(.doclib-card, .date-section-header):nth-child(11) { animation-delay: 0.22s; }
.email-lib-just-opened :is(.doclib-card, .date-section-header):nth-child(12) { animation-delay: 0.24s; }
.email-lib-just-opened :is(.doclib-card, .date-section-header):nth-child(13) { animation-delay: 0.26s; }
.email-lib-just-opened :is(.doclib-card, .date-section-header):nth-child(14) { animation-delay: 0.28s; }
.email-lib-just-opened :is(.doclib-card, .date-section-header):nth-child(15) { animation-delay: 0.30s; }
.email-lib-just-opened :is(.doclib-card, .date-section-header):nth-child(16) { animation-delay: 0.32s; }
.email-lib-just-opened :is(.doclib-card, .date-section-header):nth-child(17) { animation-delay: 0.34s; }
.email-lib-just-opened :is(.doclib-card, .date-section-header):nth-child(18) { animation-delay: 0.36s; }
.email-lib-just-opened :is(.doclib-card, .date-section-header):nth-child(19) { animation-delay: 0.38s; }
.email-lib-just-opened :is(.doclib-card, .date-section-header):nth-child(20) { animation-delay: 0.40s; }
/* Cap the cascade at 20 — beyond that they animate together so opening a
   long inbox doesn't take forever to settle. */
.email-lib-just-opened :is(.doclib-card, .date-section-header):nth-child(n+21) { animation-delay: 0.42s; }

/* Inside the email library modal, the grid needs to grow with the modal —
   but `flex: 1 1 0` collapses to 0 when the parent isn't height-constrained
   (which is the non-fullscreen default). Use `auto` basis + a sensible
   `min-height` floor so it shows ~400px naturally and absorbs more when
   the modal is resized / fullscreened. */
#email-lib-modal .doclib-grid {
  max-height: none;
  height: auto;
  flex: 1 1 auto;
  min-height: 400px;
}

/* ── Mobile compose FAB (email) ──
   Replaces the top-right "New" button on phones with a round mail-icon button
   bottom-right that collapses to a circle while the list scrolls and springs
   back out to "New" when scrolling stops. Desktop is unchanged. */
.email-lib-fab { display: none; }
@media (max-width: 768px) {
  /* The absolute FAB anchors to the email panel card. */
  #email-lib-modal .admin-card { position: relative; }
  /* Hide the toolbar "New" button — the FAB is the mobile entry point. */
  #email-lib-compose-btn { display: none; }

  #email-lib-modal .email-lib-fab {
    --fab-size: 56px;
    display: flex;
    align-items: center;
    gap: 9px;
    /* Hidden until the email list has rendered; JS adds .fab-revealed to pop
       it in (scale-from-center). Avoids the button flashing at the top and
       sliding down before _positionFab() places it. */
    transform: scale(0);
    opacity: 0;
    transform-origin: center center;
    position: absolute;
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    height: var(--fab-size);
    min-width: var(--fab-size);
    padding: 0 20px 0 18px;
    border: none;
    border-radius: 999px;
    background: var(--accent-primary, var(--red));
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,.38), 0 2px 6px rgba(0,0,0,.28);
    z-index: 30;
    pointer-events: auto;
    /* This (base) transition governs the EXPAND — slower + graceful. */
    transition:
      padding 420ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 240ms ease,
      transform 140ms ease,
      background 140ms ease;
    will-change: padding, transform;
  }
  #email-lib-modal .email-lib-fab svg { flex: 0 0 auto; display: block; }
  #email-lib-modal .email-lib-fab .email-lib-fab-label {
    overflow: hidden;
    white-space: nowrap;
    max-width: 120px;
    opacity: 1;
    /* EXPAND timing — label eases out a touch after the width opens up. */
    transition:
      max-width 420ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 300ms 60ms cubic-bezier(0.22, 1, 0.36, 1),
      margin 420ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* Collapsed (while scrolling) → pure circle, icon only. We DON'T set an
     explicit width: the container is auto-width and shrinks smoothly as the
     padding + label max-width animate (min-width keeps it circular). Setting a
     fixed width here made the collapse snap, since auto↔px width can't tween.
     This (.collapsed) transition governs the COLLAPSE — kept snappy. */
  #email-lib-modal .email-lib-fab.collapsed {
    padding: 0;
    justify-content: center;
    transition:
      padding 230ms cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 200ms ease,
      transform 140ms ease;
  }
  #email-lib-modal .email-lib-fab.collapsed .email-lib-fab-label {
    max-width: 0;
    opacity: 0;
    margin-left: -9px;
    transition:
      max-width 230ms cubic-bezier(0.4, 0, 0.2, 1),
      opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
      margin 230ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  /* Entrance: circle-expand-from-middle pop, played once when revealed. No
     `forwards` fill so the resting transform (scale 1) comes from this rule —
     that keeps the :active press transform working afterwards. */
  #email-lib-modal .email-lib-fab.fab-revealed {
    transform: scale(1);
    opacity: 1;
    animation: emailFabPop 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  #email-lib-modal .email-lib-fab:active {
    transform: scale(0.93);
    filter: brightness(0.92);
    box-shadow: 0 3px 10px rgba(0,0,0,.4);
  }
}
@keyframes emailFabPop {
  from { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.06); opacity: 1; }
  to   { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #email-lib-modal .email-lib-fab,
  #email-lib-modal .email-lib-fab .email-lib-fab-label { transition-duration: 1ms; }
  #email-lib-modal .email-lib-fab.fab-revealed { animation: none; }
}
/* When the modal-content has explicit height (fullscreen or user-resized),
   drop the floor so the grid sizes purely from flex. */
#email-lib-modal.email-lib-fullscreen .doclib-grid,
#email-lib-modal .modal-content[style*="height"] .doclib-grid {
  min-height: 0;
}
/* Document library: same fix as the email library (#74). When fullscreened
   the modal-content gets an inline `height: 100vh`, but the inner
   .doclib-grid stays capped at the 400px default so the list looks like a
   tiny strip floating in a giant empty modal. Mirror the email recipe:
   make the modal a flex column, give the body/admin-card claim of the
   remaining height, and let the grid take the rest. Scoped to the
   fullscreen class so windowed-mode layout is unchanged. */
/* Inner flex chain that lets the chats/documents grid claim the full
   remaining height of the modal. Applies in BOTH fullscreen AND
   right-docked states — without the docked state included, dragging a
   fullscreen doclib to the right snap zone breaks the flex layout
   because exitFullscreen removes .doclib-fullscreen, and the grid
   falls back to its base max-height: 400px showing only ~8 items.
   The CSS variable :is() selector lets both states share one rule. */
#doclib-modal.doclib-fullscreen .doclib-modal-content,
#doclib-modal.modal-right-docked .doclib-modal-content,
#doclib-modal.modal-left-docked .doclib-modal-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Fullscreen positioning — scoped to NOT apply when also right-docked.
   Without this exclusion, dragging a fullscreen doclib to the right snap
   zone keeps .doclib-fullscreen on the modal and these !important rules
   override the dock's inline styles, leaving the modal stuck fullscreen
   instead of becoming a side panel. */
#doclib-modal.doclib-fullscreen:not(.modal-right-docked) .doclib-modal-content {
  position: fixed !important;
  top: 0 !important;
  left: calc(var(--icon-rail-w, 48px) + var(--sidebar-w, 0px)) !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  transform: none !important;
}
#doclib-modal.doclib-fullscreen .modal-header,
#doclib-modal.doclib-fullscreen .lib-tabs,
#doclib-modal.modal-right-docked .modal-header,
#doclib-modal.modal-right-docked .lib-tabs,
#doclib-modal.modal-left-docked .modal-header,
#doclib-modal.modal-left-docked .lib-tabs {
  flex: 0 0 auto;
}
#doclib-modal.doclib-fullscreen .modal-body,
#doclib-modal.modal-right-docked .modal-body,
#doclib-modal.modal-left-docked .modal-body {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#doclib-modal.doclib-fullscreen .admin-card,
#doclib-modal.modal-right-docked .admin-card,
#doclib-modal.modal-left-docked .admin-card {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#doclib-modal.doclib-fullscreen .doclib-grid:not(:has(.doclib-card-expanded)),
#doclib-modal.modal-right-docked .doclib-grid:not(:has(.doclib-card-expanded)),
#doclib-modal.modal-left-docked .doclib-grid:not(:has(.doclib-card-expanded)) {
  max-height: none;
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
/* "Reply" docks the open email modal to the left as a sidebar so the doc
   panel (which slides in from the right of the chat area) is visible
   side-by-side. The .modal backdrop is already pointer-events:none for
   email modals — only the content takes pointer events — so the chat /
   doc panel underneath stays interactive. */
.modal.email-snap-left {
  align-items: stretch;
  justify-content: flex-start;
  left: 0 !important;
  width: 100% !important;
}
.modal.email-snap-left .modal-content {
  left: var(--email-doc-split-left-x, 0px) !important;
  width: var(--email-doc-split-email-w, 420px) !important;
  max-width: var(--email-doc-split-email-w, 420px) !important;
  border-right: 1px solid var(--border);
  box-shadow: 4px 0 14px rgba(0, 0, 0, 0.18);
  border-radius: 0;
}
@media (min-width: 769px) {
  body.email-doc-split-active.doc-view #email-lib-modal,
  body.email-doc-split-active.doc-view.email-front #email-lib-modal,
  body.email-doc-split-active.doc-view .modal[id^="email-reader-"],
  body.email-doc-split-active.doc-view.email-front .modal[id^="email-reader-"] {
    z-index: 150 !important;
  }
  body.email-doc-split-active #email-lib-modal.email-snap-left,
  body.email-doc-split-active #email-lib-modal.modal-left-docked {
    left: var(--email-doc-split-left-x, 0px) !important;
    width: var(--email-doc-split-email-w, 420px) !important;
    overflow: hidden !important;
    z-index: 155 !important;
  }
  body.email-doc-split-active #email-lib-modal.email-snap-left:not(.modal-dragging) .modal-content,
  body.email-doc-split-active #email-lib-modal.modal-left-docked:not(.modal-dragging) .modal-content,
  body.email-doc-split-active .modal[id^="email-reader-"].email-snap-left:not(.modal-dragging) .modal-content,
  body.email-doc-split-active .modal[id^="email-reader-"].modal-left-docked:not(.modal-dragging) .modal-content {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    right: auto !important;
    width: var(--email-doc-split-email-w, 420px) !important;
    max-width: var(--email-doc-split-email-w, 420px) !important;
    height: 100vh !important;
    max-height: 100vh !important;
    transform: none !important;
    margin: 0 !important;
  }
  body.email-doc-split-active.doc-view .doc-divider {
    display: none !important;
  }
  body.email-doc-split-active.doc-view .doc-editor-pane {
    position: fixed !important;
    left: var(--email-doc-split-right-x, 420px) !important;
    right: var(--right-dock-w, 0px) !important;
    top: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: 100vh !important;
    z-index: 260 !important;
    margin-top: 0 !important;
    transform: none !important;
    border-left: none !important;
  }
}

/* Edge docking. Docked panels are fixed to the viewport edge; the workspace
   panes reserve room with margins so left + right docks can be active at the
   same time without skewing the entire body box. */
body.right-dock-active {
  padding-right: 0;
}
body.left-dock-active {
  padding-left: 0;
}
body.left-dock-active:not(.email-doc-split-active) .chat-container {
  margin-left: var(--left-dock-w, 0px);
}
body.right-dock-active .chat-container,
body.right-dock-active:not(.email-doc-split-active) .doc-editor-pane {
  margin-right: var(--right-dock-w, 0px);
}
.modal.modal-right-docked {
  align-items: stretch;
  justify-content: flex-end;
}
.modal.modal-right-docked .modal-content {
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 14px rgba(0, 0, 0, 0.18);
  border-radius: 0;
}
.modal.modal-left-docked {
  align-items: stretch;
  justify-content: flex-start;
}
.modal.modal-left-docked .modal-content {
  border-right: 1px solid var(--border);
  box-shadow: 4px 0 14px rgba(0, 0, 0, 0.18);
  border-radius: 0;
  /* Pin transitions OFF on the dock's positioning properties. The wide
     sidebar collapse/expand changes --sidebar-w instantly, which means
     the docked modal's `left: calc(...)` jumps by ~240px. Any CSS
     transition on `left` (inherited or otherwise) would animate that
     jump as a fly-across. Same defense for right-docked / fullscreen
     panels in case future themes add a generic transition. */
  transition: none !important;
}
.modal.modal-right-docked .modal-content,
#email-lib-modal.email-lib-fullscreen .modal-content,
#doclib-modal.doclib-fullscreen .doclib-modal-content {
  transition: none !important;
}
.modal.modal-right-docked .email-reader-header,
.modal.modal-left-docked .email-reader-header {
  flex-direction: column;
  /* Stretch the meta to the full header width so the absolute
     action cluster's right:0 lands at the right edge (was sizing
     meta to chip content width and centering it). */
  align-items: stretch;
  gap: 6px;
}
/* Docked panes: 4px between From→To and 4px between To→Cc.
   Meta has its own 2px gap (From→details) so an extra 2px on
   details margin-top gives a 4px From→To distance, and gap:4 on
   the details flex column gives 4px between To and Cc. */
.modal.modal-right-docked .email-reader-meta-details,
.modal.modal-left-docked .email-reader-meta-details {
  margin-top: 2px;
  gap: 4px;
}
/* Docked: always show To/Cc — there's vertical room reserved for
   the action cluster already and the chevron toggle just adds
   friction. Force the hidden attribute open and hide the chevron. */
.modal.modal-right-docked .email-reader-meta-details[hidden],
.modal.modal-left-docked .email-reader-meta-details[hidden] {
  display: flex !important;
}
.modal.modal-right-docked .email-reader-meta-toggle,
.modal.modal-left-docked .email-reader-meta-toggle {
  display: none;
}
.modal.modal-right-docked .email-reader-header > .email-reader-actions,
.modal.modal-left-docked .email-reader-header > .email-reader-actions {
  position: static;
  align-self: flex-end;
  background: none;
  padding-left: 0;
}
/* Docked modal: keep all meta rows as flex so From / To / Cc
   labels align at the same x. Chips already overflow-scroll
   inside each row when there are too many. No per-row margin-top
   here — the spacing between rows comes entirely from
   .email-reader-meta-details gap so From→To and To→Cc match. */
.modal.modal-right-docked .email-reader-meta-row:not(.email-reader-meta-from),
.modal.modal-left-docked .email-reader-meta-row:not(.email-reader-meta-from) {
  padding-right: 0;
}
.modal.modal-right-docked .email-reader-meta-row strong,
.modal.modal-left-docked .email-reader-meta-row strong {
  min-width: 0;
}
.modal.modal-right-docked .recipient-chip,
.modal.modal-left-docked .recipient-chip {
  max-width: 100%;
}
.archive-list {
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
#archive-modal .memory-sort-select,
#archive-modal .memory-toolbar-btn {
  height: 32px;
}
.archive-menu-btn {
  position: relative;
  top: 2px;
}
#archive-chips .doclib-chip {
  height: 22px;
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  padding: 0 8px;
}
/* Library tab panels — Chats / Archive / Research / Documents share the
   same toolbar dimensions so the sort dropdown + Select button line up
   identically across tabs. */
#doclib-panel-chats .memory-sort-select,
#doclib-panel-archive .memory-sort-select,
#doclib-panel-research .memory-sort-select,
[data-doclib-panel="documents"] .memory-sort-select {
  height: 24px;
  font-size: 11px;
  width: 86px;
}
#doclib-panel-chats .memory-toolbar-btn,
#doclib-panel-archive .memory-toolbar-btn,
#doclib-panel-research .memory-toolbar-btn,
[data-doclib-panel="documents"] .memory-toolbar-btn {
  height: 24px;
  font-size: 11px;
  position: relative;
  top: -3px;
}
/* Research's Recent (sort) + Select sat 1px lower than the other tabs — nudge up. */
#doclib-panel-research .memory-sort-select { position: relative; top: 1.5px; }
#doclib-panel-research .memory-toolbar-btn { top: -4.5px; }
.library-sort-picker {
  width: 108px;
  flex: 0 0 108px;
  top: 1px;
}
.library-sort-picker .library-sort-btn {
  top: 0;
  width: 100%;
}
.library-sort-picker .library-sort-menu {
  top: calc(100% + 4px);
  width: max(100%, 154px);
}
.library-sort-picker .library-sort-item[aria-selected="true"] {
  background: color-mix(in srgb, var(--accent, var(--red)) 13%, transparent);
}
#doclib-panel-chats #doclib-chats-tidy-btn,
#doclib-panel-chats #doclib-chats-select-btn,
#doclib-panel-archive #doclib-arc-select-btn {
  top: 1px;
}
#doclib-panel-chats .doclib-chip-scroll-arrow {
  top: calc(50% - 9px) !important;
}
[data-doclib-panel="documents"] .doclib-chip-scroll-arrow {
  top: calc(50% - 9px) !important;
}
#doclib-modal .doclib-chip-scroll-arrow {
  top: calc(50% - 19px) !important;
}
[data-doclib-panel="documents"] #doclib-tidy-btn,
[data-doclib-panel="documents"] #doclib-select-btn {
  top: 1px;
}
#doclib-panel-research #doclib-research-tidy-btn,
#doclib-panel-research #doclib-research-select-btn {
  top: -0.5px;
}
#doclib-panel-research .library-sort-picker { top: -0.5px; }
[data-doclib-panel] { padding-top: 6px !important; }
#doclib-panel-chats, #doclib-panel-archive { padding-top: 14px !important; }
#doclib-panel-chats .memory-desc, #doclib-panel-archive .memory-desc, #doclib-panel-research .memory-desc { margin-top: 7px; }
#doclib-panel-chats .memory-search-input,
#doclib-panel-archive .memory-search-input {
  height: 30px !important;
  min-height: 30px !important;
  flex-shrink: 0;
  font-size: 11px;
}
/* Unified search bar across Library tabs + Memory modal — same height,
   same magnifying-glass icon at the start, consistent padding. */
#doclib-panel-chats .memory-search-input,
#doclib-panel-archive .memory-search-input,
#doclib-panel-research .memory-search-input,
[data-doclib-panel="documents"] .memory-search-input,
#memory-modal .memory-search-input,
#tasks-modal .memory-search-input {
  height: 30px;
  min-height: 30px;
  font-size: 11px;
  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='%23e06c75' stroke-opacity='0.85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat: no-repeat;
  background-position: 9px center;
  padding-left: 28px;
}
#doclib-panel-chats .doclib-chip {
  height: 28px;
}
#doclib-panel-archive .doclib-chip {
  height: 28px;
}
#doclib-panel-chats .doclib-chip,
#doclib-panel-archive .doclib-chip {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  padding: 0 8px;
  border-radius: 10px;
}
.doclib-grid:has(.doclib-card-expanded) > .doclib-card:not(.doclib-card-expanded) {
  display: none;
}
/* Hide everything except the grid when a card is expanded */
.admin-card:has(.doclib-card-expanded) > *:not(.doclib-grid):not(.hwfit-cached-list) {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  margin: 0 !important;
  padding: 0 !important;
  transition: opacity 0.12s ease, max-height 0.2s ease;
}
.admin-card:has(.doclib-card-expanded) > .memory-bulk-bar {
  display: none;
}
.admin-card:has(.doclib-card-expanded) > .doclib-grid,
.admin-card:has(.doclib-card-expanded) > .hwfit-cached-list {
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}
/* Firefox-mobile (no :has()) fallback: when reading an email, fully remove the
   list-mode chrome (accounts row, toolbar, bulk bar, desc) — display:none so no
   residual flex-gap leaves an empty strip above the reader — and zero the
   admin-card gap so the grid/reader starts flush at the top. */
#email-lib-modal.email-reading .admin-card > *:not(.doclib-grid):not(.hwfit-cached-list) {
  display: none !important;
}
#email-lib-modal .admin-card:has(.doclib-card-expanded),
#email-lib-modal.email-reading .admin-card {
  gap: 0 !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
/* Override for chat-rows + research-rows: those expand inline with a
   bounded preview (max-height: 60vh), so the grid must stay clipped
   and scrollable. Without this scoping the overflow:visible above lets
   the expanded chat preview escape the grid and overlap whatever's
   underneath/beside the modal (e.g., a docked sibling panel) — what
   the user calls "merging with other windows". */
.admin-card:has(.doclib-chat-row.doclib-card-expanded) > .doclib-grid {
  overflow: hidden auto !important;
}
/* Email modal needs the grid to STAY a constrained flex container when
   expanded — overflow:visible (set above for cookbook) lets content escape
   instead of letting the expanded reader fill via flex:1. We keep the same
   max-height:none + min-height:0 but flip overflow back so the reader
   actually fills the modal. */
#email-lib-modal .admin-card:has(.doclib-card-expanded) > .doclib-grid,
#email-lib-modal.email-reading .admin-card > .doclib-grid {
  overflow: hidden !important;
  display: flex !important;
  flex: 1 1 auto !important;
}
#email-lib-modal.email-reading #email-lib-grid > .date-section-header {
  display: none !important;
}
#email-lib-modal.email-reading .doclib-modal-content {
  min-height: var(--email-reading-modal-min-h, auto);
}
#email-lib-modal .doclib-card.doclib-card-expanded {
  flex: 1 1 auto !important;
  height: 100% !important;
  /* Neutral frame on the active email — the accent border + glow felt
     overbearing on desktop; the size jump alone is enough signal. */
  border: 1px solid var(--border) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important;
  animation: none !important;
}
/* Desktop-only, ONLY on the currently-expanded email card. Nudges the title
   row down 6px / right 2px, bolds the subject, hides the timestamp from the
   meta line (the reader header carries its own date), and pulls the prev/next
   nav arrows in 4px. */
@media (min-width: 769px) {
  #email-lib-modal .doclib-card-expanded .email-card-titlerow,
  #email-lib-modal .doclib-card-expanded .email-card-titlerow > * {
    position: relative;
    top: 6px;
    left: 2px;
  }
  /* Smaller subject — the reader header below already carries weight. */
  #email-lib-modal .doclib-card-expanded .email-card-titlerow .memory-item-title {
    font-weight: 700;
    font-size: 12px;
  }
  /* A bit more breathing room around the title row so the smaller bold text
     doesn't crowd the meta line below. (Timestamp kept — user changed mind.) */
  #email-lib-modal .doclib-card-expanded .email-card-titlerow {
    padding: 4px 0 6px;
    line-height: 1.35;
  }
  /* Nudge the date down/left in the meta row, and give the meta line +4px of
     extra bottom space so the shifted date isn't clipped. */
  #email-lib-modal .doclib-card-expanded .email-meta-date {
    position: relative;
    top: 4px;
    left: 0;
  }
  #email-lib-modal .doclib-card-expanded .memory-item-meta {
    padding-bottom: 4px;
  }
  #email-lib-modal .doclib-card-expanded .email-card-nav-arrows {
    position: relative;
    left: -4px;
  }
}
/* Skills modal: same mechanism as email above. The default expanded-grid
   rule (overflow:visible, no flex) lets the card expand inline to ~content
   height instead of filling — which is why the skill preview stopped at
   partial height. Flip the grid back to a constrained flex container and
   let the expanded card fill it, exactly like the email reader. */
#memory-modal .admin-card:has(.doclib-card-expanded) > .doclib-grid {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}
#memory-modal .doclib-card.doclib-card-expanded {
  flex: 1 1 auto !important;
  height: 100% !important;
}
#email-lib-modal .modal-content {
  transition: width 0.22s ease-out, height 0.22s ease-out;
}
@media (min-width: 769px) {
  body:not(.email-doc-split-active) #email-lib-modal:not(.email-lib-fullscreen):not(.modal-left-docked):not(.modal-right-docked) .modal-content:not([style*="height"]) {
    min-height: min(560px, 85vh);
  }
}

/* Serve panel specifically: the admin-card inline style is
   `overflow:hidden` (so the toolbar/header don't drift), and the list
   inside has overflow:visible. On short windows that combination
   clipped the cards off the bottom with no scrollbar. Make the list
   itself the scroll surface so the rest of the card stays put. */
.cookbook-group[data-backend-group="Serve"] > .admin-card {
  min-height: 0;
}
.cookbook-group[data-backend-group="Serve"] > .admin-card > #hwfit-cached-list,
.cookbook-group[data-backend-group="Serve"] > .admin-card > .hwfit-cached-list {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
.cookbook-group[data-backend-group="Serve"] > .admin-card > .hwfit-cached-list .doclib-card.doclib-card-expanded {
  flex: 0 0 auto !important;
  overflow: visible !important;
}
/* Launch model cards use the same domino entrance as the other library lists
   when a cached-model scan finishes. The class is removed after the one-shot
   entrance, so filtering and sorting stay instantaneous. */
#cookbook-modal .hwfit-cached-list.cookbook-serve-models-just-loaded > .doclib-card {
  animation: section-domino-in 0.36s cubic-bezier(0.22, 1.61, 0.36, 1) backwards;
}
#cookbook-modal .hwfit-cached-list.cookbook-serve-models-just-loaded > .doclib-card:nth-child(1)  { animation-delay: 0.04s; }
#cookbook-modal .hwfit-cached-list.cookbook-serve-models-just-loaded > .doclib-card:nth-child(2)  { animation-delay: 0.08s; }
#cookbook-modal .hwfit-cached-list.cookbook-serve-models-just-loaded > .doclib-card:nth-child(3)  { animation-delay: 0.12s; }
#cookbook-modal .hwfit-cached-list.cookbook-serve-models-just-loaded > .doclib-card:nth-child(4)  { animation-delay: 0.16s; }
#cookbook-modal .hwfit-cached-list.cookbook-serve-models-just-loaded > .doclib-card:nth-child(5)  { animation-delay: 0.20s; }
#cookbook-modal .hwfit-cached-list.cookbook-serve-models-just-loaded > .doclib-card:nth-child(6)  { animation-delay: 0.24s; }
#cookbook-modal .hwfit-cached-list.cookbook-serve-models-just-loaded > .doclib-card:nth-child(7)  { animation-delay: 0.28s; }
#cookbook-modal .hwfit-cached-list.cookbook-serve-models-just-loaded > .doclib-card:nth-child(8)  { animation-delay: 0.32s; }
#cookbook-modal .hwfit-cached-list.cookbook-serve-models-just-loaded > .doclib-card:nth-child(9)  { animation-delay: 0.36s; }
#cookbook-modal .hwfit-cached-list.cookbook-serve-models-just-loaded > .doclib-card:nth-child(10) { animation-delay: 0.40s; }
#cookbook-modal .hwfit-cached-list.cookbook-serve-models-just-loaded > .doclib-card:nth-child(11) { animation-delay: 0.44s; }
#cookbook-modal .hwfit-cached-list.cookbook-serve-models-just-loaded > .doclib-card:nth-child(12) { animation-delay: 0.48s; }
#cookbook-modal .hwfit-cached-list.cookbook-serve-models-just-loaded > .doclib-card:nth-child(n+13) { animation-delay: 0.48s; }
@media (prefers-reduced-motion: reduce) {
  #cookbook-modal .hwfit-cached-list.cookbook-serve-models-just-loaded > .doclib-card {
    animation: none;
  }
}
/* Drag-and-drop visual hint for the email compose pane. Subtle accent
   outline + tinted overlay so it's obvious files will attach if dropped. */
.doc-editor-pane.email-dragover {
  outline: 2px dashed var(--accent, #2563eb);
  outline-offset: -8px;
  background: color-mix(in srgb, var(--accent, #2563eb) 6%, transparent);
}
.doc-editor-pane.email-dragover::after {
  content: 'Drop to attach';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent, #2563eb);
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  pointer-events: none;
  z-index: 1000;
}

/* Email reader window — make the body always fill the available vertical
   space regardless of how the window is positioned/resized. The user can
   drag the bottom-right corner to resize; the body re-flexes automatically. */
.email-window-modal .modal-content {
  display: flex !important;
  flex-direction: column !important;
  resize: both;
  overflow: hidden;
  min-width: 320px;
  min-height: 240px;
  /* When user resizes/drags so the window covers a side, force the inner
     body to fill all the way to the bottom. The default max-height: 85vh
     (set inline by _makeDraggable's exitFullscreen) and 80vh from the
     opener both cap at the *viewport* — if the browser window then changes
     size (e.g. OS aero-snap), the modal stays at the old height and
     truncates rows. Drop the cap whenever an explicit width OR height has
     been written inline by the resize handle / drag handler. */
}
.email-window-modal .modal-content[style*="width"],
.email-window-modal .modal-content[style*="height"] {
  max-height: calc(100vh - 16px) !important;
}
.email-window-modal .email-window-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  /* Explicit basis of 0 makes the body grow to fill remaining space rather
     than its content's intrinsic height (which was capping the thread). */
  flex-basis: 0 !important;
  max-height: none !important;
  overflow: auto !important;
  overscroll-behavior: contain;
}

/* Individual email reader window — fullscreen mode (drag-to-top snap or
   double-click header). Same recipe as the library modal: pin to viewport
   edges and let the inner body absorb the remaining height. */
body:not(.email-doc-split-active) .email-window-modal.email-window-fullscreen .modal-content {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
}
body:not(.email-doc-split-active) .email-window-modal.email-window-fullscreen .email-window-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Email library modal: fullscreen mode + larger mobile sheet (mirrors the
   cookbook treatment so the toolbar and bulk actions stay reachable).
   Leaves whichever navigation strip is currently visible on the left
   (the wide sidebar OR the icon rail — they're mutually exclusive, so
   one of the two CSS vars is 0 at any given time, set by init.js). */
body:not(.email-doc-split-active) #email-lib-modal.email-lib-fullscreen:not(.modal-right-docked) .modal-content {
  position: fixed !important;
  top: 0 !important;
  left: calc(var(--icon-rail-w, 48px) + var(--sidebar-w, 0px)) !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  transform: none !important;
}
/* Mobile: the /email route adds .email-lib-fullscreen, but the desktop full-
   bleed rule above squares off the corners and offsets the email by the icon
   rail. On phones the email should be the normal bottom-sheet — full width,
   rounded top corners. Same specificity as the rule above + later in source,
   so it wins on mobile. */
@media (max-width: 768px) {
  body:not(.email-doc-split-active) #email-lib-modal.email-lib-fullscreen:not(.modal-right-docked) .modal-content {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 14px 14px 0 0 !important;
    border-top: 1px solid var(--border) !important;
  }
}
/* Make the inner panes actually grow to fill the fullscreen container
   instead of staying at their natural size. The body owns the remaining
   height below the header; the admin-card + grid then expand into it. */
#email-lib-modal.email-lib-fullscreen .modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
#email-lib-modal.email-lib-fullscreen .modal-body > .admin-card {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
#email-lib-modal.email-lib-fullscreen .doclib-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: auto !important;
}
@media (max-width: 768px) {
  /* Mobile email modal sizing — keep in sync with the rule earlier in the
     file. 75dvh tall always so flex children (the expanded email reader)
     have a real height to grow into. */
  #email-lib-modal .modal-content {
    max-height: 90dvh !important;
    max-height: 90vh !important;
    height: 90dvh !important;
    height: 90vh !important;
  }
  /* Inner panes grow to fill the modal-content — without flex:1 on the
     body, the expanded email reader sits in a tiny box because there's
     nothing pushing it to take the remaining height. overflow:hidden +
     min-height:0 lets each layer pass its constraints down. */
  #email-lib-modal .modal-body,
  #email-lib-modal .admin-card {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    max-height: none !important;
  }
  #email-lib-modal .doclib-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
  }
  /* modal-content keeps its scroll OFF here — the inner flex children
     (doclib-grid for the list view, email-reader-body for the expanded
     reader) own the scroll surfaces. Without this, double-scroll layouts
     trap touches and the reader can't claim full height. */
  #email-lib-modal .modal-content {
    overflow: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  /* Attachment row on phones: cap to ~2 rows so it never dominates the
     reader. If more chips exist, the row scrolls vertically. Smaller chip
     padding + max-width keeps each chip compact so two rows usually fit
     everything anyway. */
  #email-lib-modal .email-reader-atts {
    padding: 4px 10px !important;
    gap: 3px !important;
    max-height: calc(2 * 22px + 12px); /* 2 rows × chip height + padding */
    overflow-y: auto;
    align-content: flex-start;
  }
#email-lib-modal .email-attachment-chip {
    padding: 1px 6px !important;
    font-size: 10px !important;
    max-width: min(240px, calc(100vw - 44px)) !important;
    line-height: 18px !important;
  }
}


/* Mobile: only ONE scroll surface inside the cookbook modal. The
   modal-content is the scroller. Everything inside (cookbook-body,
   cookbook-group, all the inner lists/panels) gets overflow: visible
   so touch-pan never gets trapped in a nested scroller.
   Without this, three levels of overflow:auto + max-height combinations
   produce dead-zone areas where swipes do nothing. */
@media (max-width: 768px) {
  #cookbook-modal .modal-content {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  #cookbook-modal .cookbook-body,
  #cookbook-modal .cookbook-group,
  #cookbook-modal .cookbook-section-body,
  #cookbook-modal .hwfit-cached-list,
  #cookbook-modal .doclib-grid,
  #cookbook-modal .hwfit-list,
  #cookbook-modal .hwfit-panel-cmd {
    overflow: visible !important;
    max-height: none !important;
    min-height: 0 !important;
  }
  /* Running tmux output: cap how tall an expanded card gets (a long-lived job
     can leave thousands of lines) so it doesn't balloon, but keep its own
     scroll so you can read it. Outputs default collapsed on mobile now, so
     you're usually looking at one expanded card at a time — no wall of nested
     scrollers, and you collapse it to move past. */
  #cookbook-modal .cookbook-output-pre,
  #cookbook-modal .cookbook-task .cookbook-output-pre {
    max-height: 45vh !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: auto;  /* chain to the modal at the scroll boundary */
  }
  /* cookbook-body's flex:1 was needed when it owned scrolling — drop it
     so the inner content drives modal-content's scroll height. */
  #cookbook-modal .cookbook-body {
    flex: 0 0 auto !important;
    height: auto !important;
  }
  /* Launch tab's cached-list normally has `flex: 1 1 0; min-height: 0`
     (so it fills the modal on desktop). On mobile the parent now has
     `height: auto`, which collapses `flex: 1 1 0` to ZERO PX —
     models render but the list area is invisible because the flex
     basis is 0 and there's no free space to grow into. Switch to
     content-sized flex so the list grows with its children. */
  #cookbook-modal .cookbook-group[data-backend-group="Serve"] > .admin-card > .hwfit-cached-list,
  #cookbook-modal .cookbook-group[data-backend-group="Serve"] > .admin-card > #hwfit-cached-list {
    flex: 0 0 auto !important;
    overflow: visible !important;
  }
}
#cookbook-modal .hwfit-cached-list {
  flex-shrink: 0;
}
.memory-toolbar {
  transition: opacity 0.12s ease, max-height 0.2s ease;
  max-height: 120px;
}
.doclib-card {
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s, opacity 0.3s, max-height 0.3s ease;
  position: relative;
}
.doclib-card.doclib-card-deleting {
  opacity: 0;
  max-height: 0 !important;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border-color: transparent;
}
.doclib-card.selected,
/* Universal selection highlight: any card-shaped row (documents, chats,
   archive, research, skills, memories, tasks) gets the same accent outline
   when its checkbox is checked. Done via :has() so the highlight follows
   selection without per-renderer JS changes. The canonical checkbox class
   is .memory-select-cb across every list. */
.memory-item:has(.memory-select-cb:checked),
.doclib-card:has(.memory-select-cb:checked),
.doclib-chat-row:has(.memory-select-cb:checked) {
  border-color: color-mix(in srgb, var(--red) 40%, transparent);
  background: color-mix(in srgb, var(--red) 4%, transparent);
  /* 2px accent outline overlaid on the 1px border — reads as a thicker
     selected border without shifting layout (every card would otherwise
     need a 2px transparent border to keep the same width). */
  outline: 2px solid var(--accent-primary, var(--red));
  outline-offset: -1px;
}
.doclib-card-header {
  display: flex;
  align-items: center;
  padding: 7px 8px;
  gap: 6px;
  min-width: 0;
}
/* Mobile only: push the unexpanded email card's title-row text down 4px so
   it sits visually centered with the surrounding card padding. Targets the
   actual title-row class (.email-card-titlerow) — the earlier attempt used
   .doclib-card-header which the email card builds differently. */
@media (max-width: 768px) {
  #email-lib-modal .doclib-card:not(.doclib-card-expanded) .email-card-titlerow {
    margin-top: 4px;
  }
}
.doclib-card-title {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.doclib-card-ver {
  padding: 1px 6px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent, var(--red)) 15%, transparent);
  color: var(--accent, var(--red));
  font-size: 9px;
  flex-shrink: 0;
  font-weight: 600;
  letter-spacing: 0.3px;
  min-width: 24px;
  text-align: left;
  box-sizing: border-box;
}
.doclib-card-ver-muted {
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  color: color-mix(in srgb, var(--fg) 35%, transparent);
}
.doclib-card-lang {
  padding: 1px 6px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-size: 9px;
  text-align: left;
  flex-shrink: 0;
  min-width: 52px;
  box-sizing: border-box;
}
.doclib-card-session {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 60px;
  width: 100px;
  max-width: 100px;
  font-size: 9px;
  color: var(--fg-muted);
  flex-shrink: 0;
  text-align: left;
}
.doclib-card-time {
  flex-shrink: 0;
  opacity: 0.5;
  font-size: 9px;
  color: var(--fg-muted);
  min-width: 50px;
  text-align: left;
}
/* Footer — used by archive cards */
.doclib-card-footer {
  display: contents;
}
/* Preview — hidden by default, shown on expand */
.doclib-card-preview {
  display: none;
  position: relative;
  padding: 8px 12px;
  font-family: 'Berkeley Mono', 'SF Mono', 'Fira Code', monospace;
  font-size: 9.5px;
  line-height: 1.5;
  color: var(--code-fg, var(--hl-fg, var(--fg)));
  border-top: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
  margin: 0;
}
.doclib-card-preview pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
}
.doclib-card-expanded .doclib-card-preview pre {
  flex: 1 1 0;
  overflow-y: auto;
  min-height: 0;
}
.doclib-card-preview code.hljs {
  background: none;
  padding: 0;
}
/* Expanded-only action bar — inside preview. Buttons shifted up 4px by
   trimming the row's top margin so they sit closer to the preview text. */
.doclib-card-expanded-actions {
  display: none;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 0 2px;
  border-top: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
  margin-top: 4px;
}
.doclib-card-expanded-actions > .doclib-card-action-btn,
.doclib-card-expanded-actions .doclib-action-btn-row > .doclib-card-action-btn {
  position: relative;
  top: -4px;
}
.doclib-action-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.doclib-action-btn-row {
  display: flex;
  gap: 6px;
}
.doclib-action-hint-row {
  display: flex;
  gap: 6px;
}
/* Match the chat/research footer buttons exactly: flat, bordered,
   app font, accent on hover. */
.doclib-card-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  background: none;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  cursor: pointer;
  /* These buttons live inside .doclib-card-preview, which forces a
     monospace font. The chat/research footer buttons instead inherit the
     modal font, which is the app font (Fira Code) on mobile and Inter on
     desktop (.modal-content's Inter rule is inside @media min-width:769px).
     Mirror that here so all three footers match in both contexts. */
  font-family: var(--font-family, 'Fira Code', monospace);
  transition: border-color 0.15s, color 0.15s;
}
@media (min-width: 769px) {
  .doclib-card-action-btn {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: -0.015em;
  }
}
.doclib-card-action-btn:hover {
  border-color: var(--accent, var(--red));
  color: var(--accent, var(--red));
}
.doclib-card-text-btn-danger {
  color: var(--color-danger, #e06c75);
  border-color: var(--color-danger, #e06c75);
}
.doclib-card-text-btn-danger:hover {
  color: #ff4d4d;
  border-color: #ff4d4d;
}
.doclib-card-expanded-actions > .doclib-card-action-btn {
  font-size: 10px;
  padding: 3px 8px;
}
/* Push the Open/Clone group to the right edge of the action bar — Delete
   anchors the left, primary actions sit opposite. */
.doclib-card-expanded-actions > .doclib-action-group {
  margin-left: auto;
}
.doclib-card-expanded-actions > .doclib-expanded-delete-btn,
.doclib-card-expanded-actions > .doclib-expanded-archive-btn {
  left: 0 !important;
}
.doclib-expanded-mobile-more { display: none; }
.doclib-btn-hint {
  font-weight: normal;
  opacity: 0.35;
  font-size: 8px;
  min-width: 58px;
  padding: 0 8px;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .doclib-btn-hint { display: none !important; }
}

/* Chat row expand preview — matches the documents-tab expand style. */
.doclib-card-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  line-height: 0;
  opacity: 0.3;
  transform: rotate(0deg);
  transition: transform 0.2s ease, opacity 0.15s;
}
.doclib-card-chevron svg { display: block; }
.doclib-card-expanded .doclib-card-chevron,
.task-card.expanded .doclib-card-chevron {
  opacity: 0.8;
  transform: rotate(180deg);
}
.doclib-card > .memory-item-actions { order: 1; }
.doclib-card > .doclib-card-chevron { order: 2; }
.doclib-chat-header .memory-item-actions,
.task-card .memory-item-actions { order: 2; }
.doclib-chat-header .doclib-card-chevron,
.task-card .doclib-card-chevron { order: 3; }
.hwfit-cached-list > .doclib-card > .memory-item-actions { order: 2; }
.hwfit-cached-list > .doclib-card > .doclib-card-chevron { order: 3; }
#email-lib-modal .doclib-card > .memory-item-actions { order: 1; align-self: center; }
#email-lib-modal .doclib-card > .doclib-card-chevron { display: none; }
.doclib-chat-row { flex-direction: column; align-items: stretch; }
.doclib-chat-row .doclib-card-chevron {
  display: inline-flex;
  opacity: 0.55;
  transition: transform 0.2s ease, opacity 0.15s;
  flex-shrink: 0;
}
.doclib-chat-row:not(.doclib-card-expanded) .doclib-card-chevron {
  transform: rotate(0deg);
}
.doclib-chat-row.doclib-card-expanded .doclib-card-chevron {
  opacity: 0.8;
  transform: rotate(180deg);
}
/* Release .memory-item's base max-height: 200px when a chat row is
   expanded. Without this, the row clips at 200px on desktop and the
   preview's messages/actions visually spill past the row's box —
   "colliding" with the next chat in the column. The mobile takeover
   below already handles this via the same override; this rule is the
   desktop-or-any-viewport equivalent. */
.doclib-chat-row.doclib-card-expanded {
  max-height: none;
  overflow: visible;
}
/* When a chat row is expanded, take over the grid the same way documents
   do: hide siblings, hide the admin-card toolbar, and let this row plus
   its preview claim the full available height. .memory-item's default
   max-height: 200px must be overridden or the preview will be tiny. */
/* Mobile-only "card takeover" for an expanded chat — hides siblings,
   hides the admin-card toolbar, and lets this row + its preview claim
   the full available height. On desktop the expanded preview just
   renders inline below the row with its messages constrained by
   max-height + overflow:auto so the user gets a normal scroll. */
@media (max-width: 820px) {
  .doclib-grid:has(.doclib-chat-row.doclib-card-expanded) > .doclib-chat-row:not(.doclib-card-expanded) {
    display: none;
  }
  .admin-card:has(.doclib-chat-row.doclib-card-expanded) > *:not(.doclib-grid) {
    display: none;
  }
  .admin-card:has(.doclib-chat-row.doclib-card-expanded) > .doclib-grid {
    flex: 1 1 auto !important;
    max-height: none !important;
    overflow-y: auto !important;
  }
  .doclib-chat-row.doclib-card-expanded {
    flex: 1 1 auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .doclib-chat-row.doclib-card-expanded .doclib-chat-header {
    flex: 0 0 auto !important;
  }
  .doclib-chat-row.doclib-card-expanded .doclib-chat-preview {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 4px !important;
  }
  .doclib-chat-row.doclib-card-expanded .doclib-chat-preview-messages {
    -webkit-overflow-scrolling: touch;
    max-height: none !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
}
.doclib-chat-preview {
  font-size: 11px;
  padding: 0 4px 6px;
}
.doclib-chat-preview .doclib-chat-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  background: none;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
}
.doclib-chat-preview .task-completed-report-btn {
  color: var(--accent, var(--red));
  border-color: color-mix(in srgb, var(--accent, var(--red)) 55%, var(--border));
}
.doclib-chat-preview .doclib-chat-open-btn:hover {
  border-color: var(--accent, var(--red));
  color: var(--accent, var(--red));
}
.doclib-chat-preview-messages {
  margin-top: 6px;
  max-height: 320px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
}
/* Desktop expanded state — match the documents-tab behavior: hide
   sibling chats, hide the admin-card toolbar/header, and let the
   expanded row + its messages preview claim the full modal height.
   Chat rows use `memory-item doclib-chat-row` (no `doclib-card` class)
   so the document-tab's global rules at line 12284-12304 skip them —
   these mirror those rules scoped to chat rows. The mobile media query
   above (820px) keeps the same takeover behavior for phones. */
@media (min-width: 821px) {
  .doclib-grid:has(.doclib-chat-row.doclib-card-expanded) > .doclib-chat-row:not(.doclib-card-expanded) {
    display: none;
  }
  .admin-card:has(.doclib-chat-row.doclib-card-expanded) > *:not(.doclib-grid) {
    display: none;
  }
  .admin-card:has(.doclib-chat-row.doclib-card-expanded) > .doclib-grid {
    flex: 1 1 auto !important;
    max-height: none !important;
    overflow: hidden auto !important;
  }
  .doclib-chat-row.doclib-card-expanded {
    flex: 1 1 auto !important;
    max-height: none !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .doclib-chat-row.doclib-card-expanded .doclib-chat-preview {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .doclib-chat-row.doclib-card-expanded .doclib-chat-preview-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
  }
}
.doclib-chat-preview-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 2px 0 2px;
  border-top: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
  margin-top: 2px;
  flex-shrink: 0;
  /* Whole action footer nudged down 5px. */
  position: relative;
  top: 5px;
}
.doclib-chat-delete-btn,
.doclib-chat-archive-btn,
.doclib-chat-restore-btn,
.doclib-chat-discuss-btn,
.doclib-chat-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  background: none;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
}
.doclib-chat-archive-btn,
.doclib-chat-restore-btn,
.doclib-chat-discuss-btn,
.doclib-chat-copy-btn {
  color: var(--fg-muted);
  border: 1px solid var(--border);
}
.doclib-chat-restore-btn:hover {
  color: var(--accent, var(--red));
  border-color: var(--accent, var(--red));
}
.doclib-chat-archive-btn:hover,
.doclib-chat-discuss-btn:hover,
.doclib-chat-copy-btn:hover {
  color: var(--accent, var(--red));
  border-color: var(--accent, var(--red));
}
.doclib-chat-delete-btn {
  color: var(--color-danger, #e06c75);
  border: 1px solid var(--color-danger, #e06c75);
}
.doclib-chat-delete-btn:hover {
  color: #ff4d4d;
  border-color: #ff4d4d;
}
/* When a chat is archived there's no Archive button, so Delete becomes
   the only left-side action and needs the auto margin to push Open right. */
.doclib-chat-preview-actions:not(:has(.doclib-chat-archive-btn)) > .doclib-chat-delete-btn {
  margin-right: auto;
}
/* Hide the "..." menu while the chat card is expanded — archive +
   delete live in the preview footer instead. */
.doclib-chat-row.doclib-card-expanded ._chat-menu { display: none; }
.doclib-chat-preview-actions.doclib-chat-preview-actions-top {
  border-top: none;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
  margin-top: 4px;
  margin-bottom: 6px;
  padding: 0 0 6px;
  justify-content: flex-start;
}
.doclib-chat-preview-messages .doclib-chat-msg {
  margin: 4px 0 10px;
  padding-left: 8px;
  border-left: 2px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.doclib-chat-preview-messages .doclib-chat-msg.user {
  border-left-color: color-mix(in srgb, var(--accent, var(--red)) 60%, transparent);
}
.doclib-chat-preview-messages .doclib-chat-msg-role {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 2px;
}
.doclib-chat-preview-messages .doclib-chat-msg.user .doclib-chat-msg-role {
  color: var(--accent, var(--red));
  opacity: 0.85;
}
.doclib-chat-preview-messages .doclib-chat-msg-body {
  white-space: pre-wrap;
  word-break: break-word;
  opacity: 0.85;
  line-height: 1.45;
}
/* Chat-bubble preview — mirrors the real chat layout. User bubbles hug
   right with an accent tint; assistant bubbles hug left with a neutral
   panel tint and a small model tag at the top. */
.doclib-chat-bubble-row {
  display: flex;
  margin: 6px 0;
}
.doclib-chat-bubble-row.user { justify-content: flex-end; }
.doclib-chat-bubble-row.assistant { justify-content: flex-start; }
.doclib-chat-bubble {
  max-width: 85%;
  padding: 6px 10px 8px;
  border-radius: 14px;
  font-size: 11px;
  line-height: 1.45;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
}
.doclib-chat-bubble-row.user .doclib-chat-bubble {
  background: color-mix(in srgb, var(--accent, var(--red)) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent, var(--red)) 30%, transparent);
  border-bottom-right-radius: 4px;
}
.doclib-chat-bubble-row.assistant .doclib-chat-bubble {
  border-bottom-left-radius: 4px;
}
.doclib-chat-msg-model {
  display: inline-block;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 3px;
  padding: 1px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  color: var(--fg-muted, var(--fg));
}
.doclib-chat-bubble-body { word-break: break-word; }
.doclib-chat-bubble-body p { margin: 4px 0; }
.doclib-chat-bubble-body p:first-child { margin-top: 0; }
.doclib-chat-bubble-body p:last-child { margin-bottom: 0; }
.doclib-chat-bubble-body pre {
  font-size: 10px;
  margin: 4px 0;
  padding: 6px 8px;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  border-radius: 6px;
  overflow-x: auto;
}
.doclib-chat-bubble-body code {
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
}
.doclib-chat-bubble-body pre code { background: none; padding: 0; }
.doclib-chat-bubble-body ul,
.doclib-chat-bubble-body ol {
  margin: 4px 0;
  padding-left: 18px;
}
.doclib-card-collapse-chevron {
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 22px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--color-muted, var(--fg));
  font: inherit;
  opacity: 0.3;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0 0 0 4px;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}
.doclib-card-collapse-chevron:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  border-color: color-mix(in srgb, var(--fg) 24%, transparent);
}
.cookbook-serve-title {
  display: flex;
  align-items: center;
  min-width: 0;
}
.cookbook-serve-title .doclib-card-collapse-chevron {
  display: inline-flex;
  margin-left: auto;
  margin-top: 0;
}
.doclib-card-expanded .doclib-card-collapse-chevron {
  display: inline-flex;
}
/* Expanded card — fills the whole grid */
.doclib-card.doclib-card-expanded {
  flex: 1;
  min-height: 0;
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: doclib-expand 0.2s ease-out;
}
.doclib-card.doclib-card-expanded {
  flex-direction: column !important;
  align-items: stretch !important;
  max-height: none !important;
  gap: 4px !important;
}
.doclib-card.doclib-card-expanded > .memory-item-actions { display: none; }
/* Non-preview children of an expanded doc card carry an inline flex:1 from
   the row layout. With the card now flex-column those children would steal
   half the height and shrink the preview — pin them at auto height. */
.doclib-card.doclib-card-expanded > div:not(.doclib-card-preview):not(.doclib-card-header):not(.memory-item-actions):not(.email-card-reader) {
  flex: 0 0 auto !important;
}
/* The email reader IS the scroll container — keep its flex:1 so its
   internal body can claim the rest of the card's height and scroll. */
.doclib-card.doclib-card-expanded > .email-card-reader {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
.doclib-card.doclib-card-expanded .doclib-card-preview {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto !important;
  /* The preview matches chat rows: document content scrolls, while the
     footer stays in the card rather than becoming the last scroll item. */
  overflow: hidden;
  min-height: 0;
}
.doclib-card.doclib-card-expanded .doclib-card-expanded-actions {
  display: flex;
  flex-shrink: 0;
}
/* Document cards can be expanded in the normal windowed library, where the
   grid has no definite height. A zero-basis <pre> then collapses to nothing
   while the footer remains visible. Keep the document text's intrinsic height
   in that layout; bounded/fullscreen layouts can still shrink it and scroll. */
#doclib-modal .doclib-card.doclib-card-expanded .doclib-card-preview > pre {
  flex: 1 1 auto;
  min-height: 1.5em;
}

/* Collapsible skills section headers (Your skills / Built-in). */
.skills-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  padding: 6px 4px 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.6;
  font-weight: 600;
}
.skills-section-header:hover { opacity: 0.9; }
.skills-section-chevron { transition: transform 0.15s ease; flex-shrink: 0; }
.skills-section-header.collapsed .skills-section-chevron { transform: rotate(-90deg); }
.skills-section-count {
  margin-left: auto;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
  font-weight: normal;
}
.skill-card-section-hidden { display: none !important; }
/* Warning banner shown when previewing/editing a built-in capability. */
.skill-builtin-warn {
  font-size: 9.5px;
  line-height: 1.45;
  color: var(--color-warning, #f0ad4e);
  background: color-mix(in srgb, var(--color-warning, #f0ad4e) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-warning, #f0ad4e) 35%, transparent);
  border-radius: 6px;
  padding: 6px 9px;
  margin: 0 0 8px;
  flex-shrink: 0;
}

/* #skills-list wears both .memory-list and .doclib-grid. doclib-grid's
   max-height:400px would cap the list AND clamp an expanded card — keep
   the memory-list fill-the-modal behaviour instead. */
#skills-list.doclib-grid {
  max-height: none;
  flex: 1;
  min-height: 0;
}
#skills-list.doclib-grid:has(.doclib-card-expanded) {
  overflow: hidden;  /* expanded card owns its own scroll */
}
/* When a skill is expanded, hide the sibling Add-Skill form card so the
   expanded SKILL.md uses the full panel. Otherwise the two admin-cards
   split the height ~50/50 and the expanded skill is stuck in its half
   while the Add form idles in the other. */
.memory-tab-panel[data-memory-panel="skills"]:has(.doclib-card-expanded) > .admin-card:nth-of-type(2) {
  display: none !important;
}

/* Skills cards reuse the doclib expand/footer machinery. The SKILL.md
   preview + the edit textarea need to fill the expanded card and own
   their own scroll, same as a document preview. */
/* Collapsed skill rows used a smaller (0.9em code) title, so the click row
   read slimmer than document/chat/library cards. Give the header a min-height
   so the tap target matches the other library items. */
.skill-card > .skill-card-header {
  min-height: 53px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Skill rows share Tasks' card hover colors. Draft state belongs in the
   status badge, not in a second opacity layer across the whole row. */
/* Name + description column. Name wraps to 2 lines (skill slugs are long —
   use the space rather than truncating to "check-model-downl…"). */
.skill-card-textcol {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.skill-card-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.skill-card-name {
  font-family: inherit;
  font-weight: 500;
  font-size: 12px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
  line-height: normal;
}
.skill-card-title-row .skill-card-name { min-width: 0; }
.skill-status-published {
  width: 20px;
  height: 20px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-success, #4ade80);
  background: color-mix(in srgb, var(--color-success, #4ade80) 15%, transparent);
  border-color: color-mix(in srgb, var(--color-success, #4ade80) 32%, transparent);
  border-radius: 50%;
}
.skill-stats .skill-status-published {
  width: 15px;
  height: 15px;
  margin-left: 3px;
  vertical-align: middle;
}
.skill-stats .skill-status-published svg {
  width: 9px;
  height: 9px;
}
.skill-card-desc {
  font-size: 10px;
  opacity: 0.4;
  margin-top: -1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.skills-audit-model-field {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 11px;
}
.skills-audit-model-field > span {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--fg) 68%, transparent);
}
.skills-audit-model-field select {
  min-width: 0;
  flex: 1;
  height: 26px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
}
.skill-card-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.skill-tag-pill {
  padding: 1px 5px;
  font-size: 9px;
}
.skill-usage-pill {
  margin-left: auto;
  color: color-mix(in srgb, var(--fg) 62%, transparent);
}
.skill-tag-filter-chip { cursor: pointer; }

@media (max-width: 768px) {
  .skill-card > .skill-card-header {
    align-items: flex-start;
  }
  .skill-card-textcol {
    min-width: 0;
  }
  .skill-card-tags {
    max-width: 100%;
    overflow: hidden;
  }
  .skill-card-tags .skill-tag-pill {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
/* Right cluster — pills (right-aligned), stats, then the menu/chevron. */
.skill-card-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}
.skill-card-right .memory-cat-badge { flex-shrink: 0; }
.skill-status-bin {
  background: color-mix(in srgb, var(--color-danger, #d9534f) 20%, transparent);
  color: var(--color-danger, #d9534f);
}
.skill-model-pill {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skill-model-student {
  background: color-mix(in srgb, var(--fg) 10%, transparent);
}
.skill-audit-pass {
  color: var(--color-success, #4ade80);
  background: color-mix(in srgb, var(--color-success, #4ade80) 16%, transparent);
}
.skill-audit-needs_work {
  color: var(--color-warning, #f0ad4e);
  background: color-mix(in srgb, var(--color-warning, #f0ad4e) 16%, transparent);
}
.skill-audit-fail {
  color: var(--color-danger, #e06c75);
  background: color-mix(in srgb, var(--color-danger, #e06c75) 16%, transparent);
}
.skill-audit-inconclusive,
.skill-audit-skipped,
.skill-audit-unknown {
  color: color-mix(in srgb, var(--fg) 64%, transparent);
  background: color-mix(in srgb, var(--fg) 8%, transparent);
}
.skill-model-teacher {
  background: color-mix(in srgb, var(--color-warning, #f0ad4e) 24%, transparent);
  color: var(--color-warning, #f0ad4e);
}
.skill-necessity-pill {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skill-necessity-duplicate {
  background: color-mix(in srgb, var(--color-warning, #f0ad4e) 22%, transparent);
  color: var(--color-warning, #f0ad4e);
}
.skill-necessity-trivial {
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  color: color-mix(in srgb, var(--fg) 62%, transparent);
  border-color: color-mix(in srgb, var(--fg) 16%, transparent);
}
.skill-necessity-irrelevant {
  background: color-mix(in srgb, var(--color-danger, #e06c75) 18%, transparent);
  color: var(--color-danger, #e06c75);
}
.skills-summary-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: -3px 0 8px;
}
.skills-summary-strip::-webkit-scrollbar { display: none; }
.skills-summary-strip:empty {
  display: none;
}
.skills-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 23px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  color: color-mix(in srgb, var(--fg) 70%, transparent);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
}
.skills-summary-chip:hover {
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  border-color: color-mix(in srgb, var(--fg) 18%, transparent);
}
.skills-summary-chip.active {
  background: color-mix(in srgb, var(--accent, var(--red)) 13%, transparent);
  border-color: color-mix(in srgb, var(--accent, var(--red)) 28%, transparent);
  color: var(--fg);
}
.skills-summary-chip strong {
  font-family: ui-monospace, 'SF Mono', 'Fira Code', monospace;
  font-size: 10px;
  color: var(--fg);
}

/* Shared filter/tag strip contract. These rows all sit immediately below
   their screen's search or primary toolbar and stay one line at every width. */
:is(
  .skills-summary-strip,
  #memory-category-filters,
  .memory-category-filters:has(> .memory-cat-chip),
  .doclib-lang-chips,
  .doclib-chips,
  .notes-labels-bar,
  .tasks-activity-filters,
  .gallery-tag-chips,
  .gallery-album-chips,
  .gallery-ai-tags,
  .cal-filters
) {
  align-items: center;
  flex-wrap: nowrap !important;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  max-height: none;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  box-sizing: border-box;
  padding: 0;
  margin: -3px 0 8px;
}
:is(
  .skills-summary-strip,
  #memory-category-filters,
  .memory-category-filters:has(> .memory-cat-chip),
  .doclib-lang-chips,
  .doclib-chips,
  .notes-labels-bar,
  .tasks-activity-filters,
  .gallery-tag-chips,
  .gallery-album-chips,
  .gallery-ai-tags,
  .cal-filters
)::-webkit-scrollbar { display: none; }
:is(
  .skills-summary-strip > .skills-summary-chip,
  #memory-category-filters > .skills-summary-chip,
  .memory-category-filters > .memory-cat-chip,
  .doclib-lang-chips > :is(.memory-cat-chip, .skills-summary-chip),
  .doclib-chips > .doclib-chip,
  .notes-labels-bar > .notes-label-chip,
  .tasks-activity-filters > .memory-cat-chip,
  .gallery-tag-chips > .gallery-chip,
  .gallery-album-chips > .gallery-chip,
  .gallery-ai-tags > .gallery-ai-chip,
  .cal-filters > .cal-filter-item
) {
  flex: 0 0 auto;
  box-sizing: border-box;
  height: 23px !important;
  min-height: 23px;
  padding: 0 8px !important;
  border-radius: 6px !important;
  font-size: 10px !important;
  line-height: 1;
  white-space: nowrap;
}
.doclib-lang-chips {
  flex: 0 0 auto;
  min-height: 25px;
  padding: 1px 0 !important;
  scroll-padding-inline: 1px;
}
.doclib-chip-scroll-frame {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
}
.doclib-chip-scroll-frame > .chip-scroll-strip {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
}
.doclib-chip-scroll-arrow {
  display: none;
  position: absolute;
  top: calc(50% - 1px) !important;
  transform: translateY(-50%);
  margin-top: 0;
  z-index: 2;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
  border-radius: 50%;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--bg) 86%, var(--fg) 14%);
  color: var(--accent, var(--red));
  box-shadow: 0 6px 18px rgba(0,0,0,0.16);
  font-size: 18px;
  line-height: 18px;
  cursor: pointer;
  opacity: 0.84;
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.doclib-chip-scroll-arrow-glyph {
  display: inline-block;
  position: relative;
  top: -1px;
  line-height: 1;
}
.doclib-chip-scroll-arrow:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--bg) 76%, var(--fg) 24%);
}
@media (max-width: 768px) {
  .doclib-chip-scroll-arrow { display: none !important; }
}
.doclib-chip-scroll-frame.has-overflow > .doclib-chip-scroll-arrow:not([hidden]) {
  display: inline-flex;
}
.doclib-chip-scroll-arrow.left { left: 0; }
.doclib-chip-scroll-arrow.right { right: 0; }
.doclib-chip-scroll-frame.has-overflow > .chip-scroll-strip {
  padding-left: 0 !important;
  padding-right: 22px !important;
}
.doclib-chip-scroll-frame > .chip-scroll-strip.is-pointer-dragging {
  cursor: grabbing;
  user-select: none;
}
.doclib-chip-scroll-frame > .chip-scroll-strip:not(.is-pointer-dragging) {
  cursor: grab;
}
/* Calendar tags are wrapped by chipScroll.js after render. Keep that wrapper
   content-sized inside the calendar's column layout; the default flex growth
   otherwise turns the one-line tag strip into a large empty panel. */
#cal-body > .doclib-chip-scroll-frame:has(> .cal-filters) {
  flex: 0 0 auto;
  min-height: 0;
}
/* The completed-task filters are a compact toolbar, not a flexible panel.
   Without this override the shared chip frame grows into the available
   height of the card, which is especially visible the first time the mobile
   view switches to Completed. */
.tasks-completed-card > .doclib-chip-scroll-frame:has(> #tasks-completed-status-chips) {
  flex: 0 0 auto;
  min-height: 0;
}
/* The active Tasks filter row is also a compact toolbar.  Keep its wrapper
   content-sized so changing a filter cannot make the mobile panel grow a
   large empty gap between the chips and the task cards. */
.admin-card > .doclib-chip-scroll-frame:has(> #tasks-filter-chips) {
  flex: 0 0 auto;
  min-height: 0;
}
#memory-category-filters {
  flex: 0 0 auto;
  min-height: 25px;
  padding: 1px 0 !important;
  scroll-padding-inline: 1px;
}
.cookbook-serve-tag-label {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
#serve-search,
#hwfit-cache-select,
#serve-tags {
  position: relative;
  top: -2px;
}
#hwfit-cache-select {
  top: -4px;
}
/* Calendar previously framed its tags as a separate card. It now follows the
   same unframed placement as the other filter strips. */
.cal-filters {
  border: 0;
  background: none;
  box-shadow: none;
}
.skill-duplicate-keep {
  background: color-mix(in srgb, var(--color-success, #4ade80) 22%, transparent);
  color: var(--color-success, #4ade80);
}
.skill-duplicate-group {
  font-family: ui-monospace, 'SF Mono', 'Fira Code', monospace;
  color: color-mix(in srgb, var(--fg) 62%, transparent);
  background: color-mix(in srgb, var(--fg) 8%, transparent);
}
.skill-duplicate-lower {
  background: color-mix(in srgb, var(--color-danger, #e06c75) 14%, transparent);
  color: var(--color-danger, #e06c75);
}
.skill-stats {
  font-size: 9px;
  font-family: monospace;
  white-space: nowrap;
  color: color-mix(in srgb, var(--fg) 45%, transparent);
}
.skill-turns-saved {
  font-size: 9px;
  opacity: 0.82;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: 0 0 auto;
}
.skill-expanded-savings {
  display: flex;
  align-items: center;
  min-height: 18px;
  margin: 0 0 5px;
}
.skill-turns-positive {
  color: color-mix(in srgb, var(--color-success, #4ade80) 82%, var(--fg));
}
.skill-turns-zero,
.skill-turns-unknown {
  color: color-mix(in srgb, var(--fg) 48%, transparent);
}
.skill-turns-negative {
  color: color-mix(in srgb, var(--color-danger, #e06c75) 80%, var(--fg));
}
.skill-conf {
  display: inline-block;
  min-width: 4ch;
  text-align: right;
  font-weight: 700;
  color: var(--accent, var(--red));
}
.skill-verified,
.skill-teachermark,
.skill-needsmark {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-right: 3px;
}
.skill-verified { color: var(--accent, #4ade80); }
.skill-teachermark { color: var(--color-warning, #f0ad4e); }
.skill-needsmark { color: var(--color-danger, #e06c75); cursor: help; }

/* The card currently being processed by an "Audit now" run glows + pulses so
   it's obvious which one the audit is on. */
@keyframes skill-audit-pulse {
  0%, 100% { box-shadow: 0 0 6px 0 color-mix(in srgb, var(--accent, #4ade80) 55%, transparent); }
  50%      { box-shadow: 0 0 16px 3px color-mix(in srgb, var(--accent, #4ade80) 85%, transparent); }
}
.skill-card.skill-audit-active {
  border-color: var(--accent, #4ade80) !important;
  animation: skill-audit-pulse 1.3s ease-in-out infinite;
}

/* A test is running for this skill — the app's whirlpool spinner is injected
   next to the name from JS (see _setCardRunning) so the collapsed/folded card
   still makes it obvious work is in progress. */
/* Collapsed bar shows the kebab menu; expanded shows an up-chevron to
   collapse. (Toggled by the .doclib-card-expanded class.) */
.skill-kebab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 4px;
  margin: 0;
  cursor: pointer;
  color: var(--fg);
  opacity: 0.5;
  border-radius: 5px;
  flex-shrink: 0;
  position: relative;
  top: -2px;
}
.skill-kebab-btn:hover { opacity: 1; background: color-mix(in srgb, var(--fg) 10%, transparent); }
.skill-chevron-up { display: none; align-items: center; opacity: 0.5; flex-shrink: 0; }
/* Kebab dropdown */
.skill-kebab-menu {
  position: fixed;
  /* z-index is set inline via topPortalZ() at open time (#4720); a static
     value here loses once the modal bring-to-front counter climbs past it. */
  min-width: auto;
  width: max-content;
  padding: 4px;
  background: var(--panel, var(--bg));
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.22);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.skill-kebab-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--fg);
  font-size: 11px;
  text-align: left;
}
.skill-kebab-item:hover { background: color-mix(in srgb, var(--fg) 10%, transparent); }
.skill-kebab-item.danger { color: var(--color-error, #e55); }
.skill-kebab-item.danger:hover { background: color-mix(in srgb, var(--color-error, #e55) 15%, transparent); }
/* Section labels separating "Your skills" from the read-only "Built-in
   capabilities" list. */
.skills-section-label {
  font-size: 10px;
  opacity: 0.5;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 10px 2px 4px;
  flex-shrink: 0;
}
.skills-section-label:first-child { margin-top: 0; }
/* When a learned skill is expanded the grid hides sibling cards; hide the
   section labels too so they don't orphan above the collapsed list. */
#skills-list:has(.doclib-card-expanded) .skills-section-label { display: none; }
/* Built-in cards are read-only — no expand/hover-pointer affordance. */
.skill-builtin-card { cursor: default; }
.skill-builtin-card:hover { border-color: var(--border); }
.skill-card-preview .skill-md-pre {
  font-family: ui-monospace, 'SF Mono', 'Fira Code', monospace;
  font-size: 11.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.skill-preview-copy {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  opacity: 0;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: opacity .15s, color .15s, border-color .15s;
}
.skill-card-preview:hover .skill-preview-copy { opacity: 0.7; }
.skill-preview-copy:hover,
.skill-preview-copy:focus-visible { opacity: 1 !important; }
.skill-preview-copy.copied {
  opacity: 1;
  color: var(--color-save-green, #4caf50);
  border-color: var(--color-save-green, #4caf50);
}
/* :has()-free expand layout. skills.js adds .skills-has-expanded to the
   skills admin-card when a skill opens, so this works on engines that don't
   support :has() (e.g. older Firefox mobile, where the expand stuck at
   ~50%). Hide everything but the list so the grid fills the card; the
   absolutely-positioned expanded card (mobile) then fills the grid. */
.admin-card.skills-has-expanded > *:not(#skills-list) {
  display: none !important;
}
.admin-card.skills-has-expanded > #skills-list.doclib-grid {
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
/* Expand animation — a clean opacity fade. The mobile card snaps to a
   full-screen overlay (position:absolute), so any translate/scale on it
   reads as a jarring "explosion"; a pure fade just appears smoothly. (No
   transform also keeps skills.js's height measurement accurate.) */
@keyframes skill-card-expand {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.skill-card.doclib-card-expanded {
  animation: skill-card-expand 0.18s ease-out;
}
/* Switching directly from one expanded card to another: no fade (it would
   show the previous card collapsing through the semi-transparent new one). */
.skill-card.doclib-card-expanded.skill-expand-instant {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .skill-card.doclib-card-expanded,
  .skill-card.doclib-card-expanded .doclib-card-preview {
    animation: none !important;
  }
}
/* The preview WRAPPER inherits flex:1 (grow) from the generic doclib expand
   rule — that's what stretched the card and left a void / pushed the footer
   out. Size it to content (shrink + scroll only when long) so the footer
   sits right under the preview and stays fully visible. */
.skill-card.doclib-card-expanded .doclib-card-preview {
  flex: 0 1 auto !important;
  min-height: 0;
  /* The footer lives INSIDE this wrapper. Don't let the wrapper scroll, or
     the footer scrolls off with the content. Keep it clipped; the <pre>
     inside is the scroller, so the footer stays pinned at the bottom. */
  overflow: hidden !important;
}
.skill-card.doclib-card-expanded .skill-md-pre {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
/* Skill footer buttons sit 4px high (shared rule sets top:-4px) — drop them
   back down 4px so they're vertically centered in the skill card footer. */
.skill-card .doclib-card-expanded-actions > .doclib-card-action-btn,
.skill-card .doclib-card-expanded-actions .doclib-action-btn-row > .doclib-card-action-btn {
  top: 0;
}
/* Skills select-mode bulk bar — nudge Cancel / Approve / Delete up 2px. */
#skills-bulk-bar .memory-toolbar-btn {
  position: relative;
  top: -2px;
}
/* ── Audit-all progress panel ── */
.skills-audit-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 6px 0;
  background: color-mix(in srgb, var(--fg) 3%, transparent);
}
.skills-audit-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.skills-audit-title { font-size: 12px; font-weight: 600; }
.skills-audit-bar { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--fg) 12%, transparent); margin: 6px 0; overflow: hidden; }
.skills-audit-fill { height: 100%; background: var(--accent, var(--red)); transition: width 0.3s ease; }
.skills-audit-summary { font-size: 11px; opacity: 0.7; margin-bottom: 4px; }
.skills-audit-log {
  max-height: 22vh; overflow-y: auto;
  font-family: ui-monospace, 'SF Mono', 'Fira Code', monospace;
  font-size: 10.5px; line-height: 1.5; opacity: 0.8;
}
/* ── Skill test monitor + AI eval verdict ── */
.skill-test { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.skill-test-log {
  flex: 1 1 auto;
  min-height: 120px;
  max-height: 48vh;
  overflow-y: auto;
  font-family: ui-monospace, 'SF Mono', 'Fira Code', monospace;
  font-size: 9.5px;
  line-height: 1.45;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  white-space: pre-wrap;
  word-break: break-word;
}
.skill-test-log > div { margin: 1px 0; }
.skill-test-meta  { opacity: 0.5; }
.skill-test-task  { color: var(--accent, var(--red)); font-weight: 500; font-size: 9px; opacity: 0.85; }
.skill-test-round { opacity: 0.6; margin-top: 6px !important; }
.skill-test-tool  { color: var(--accent, var(--red)); opacity: 0.85; }
.skill-test-out   { opacity: 0.7; padding-left: 10px; }
.skill-test-say   { white-space: pre-wrap; }
.skill-test-err   { color: var(--color-danger, #e06c75); }
.skill-eval-head  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.skill-eval-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em;
  padding: 2px 8px; border-radius: 10px; flex-shrink: 0;
}
.skill-eval-ok   { background: color-mix(in srgb, var(--color-success, #4ade80) 26%, transparent); color: var(--color-success, #4ade80); }
.skill-eval-warn { background: color-mix(in srgb, var(--color-warning, #f0ad4e) 26%, transparent); color: var(--color-warning, #f0ad4e); }
.skill-eval-bad  { background: color-mix(in srgb, var(--color-danger, #e06c75) 26%, transparent); color: var(--color-danger, #e06c75); }
.skill-eval-unknown { background: color-mix(in srgb, var(--fg) 14%, transparent); }
.skill-eval-summary { font-size: 11px; opacity: 0.85; }
.skill-eval-issues { margin: 6px 0 0; padding-left: 18px; font-size: 11px; opacity: 0.8; }
.skill-eval-issues li { margin: 2px 0; }
.skill-eval-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }
.skill-eval-approve.suggested {
  border-color: var(--color-success, #4ade80) !important;
  color: var(--color-success, #4ade80) !important;
}
/* Already published — the button confirms the state (click to unpublish). */
.skill-eval-approve.is-approved {
  border-color: var(--color-success, #4ade80) !important;
  color: var(--color-success, #4ade80) !important;
  background: color-mix(in srgb, var(--color-success, #4ade80) 14%, transparent) !important;
}
/* Add-Skill form: a "rich placeholder" overlay so only the FIRST word (Title,
   When to use, How, Tags) is accent-colored while the rest stays muted — real
   placeholders can't be partially colored. The native placeholder is a single
   space so :placeholder-shown still toggles the overlay. */
.skill-ph-wrap { position: relative; }
.skill-ph-wrap .skill-hint-input { width: 100%; box-sizing: border-box; }
.skill-rich-ph {
  position: absolute;
  left: 11px; right: 11px; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 12px;
  line-height: 1.2;
  color: color-mix(in srgb, var(--fg) 40%, transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Textarea: align the hint to the first line instead of vertical-centering. */
.skill-rich-ph-top { top: 7px; transform: none; }
.skill-rich-ph .k { color: var(--accent, var(--red)); }
/* Keep the memory-input enter hint pinned to the field's right edge instead
   of letting it drift after the example text. */
#new-memory-input ~ .skill-rich-ph > svg {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0 !important;
}
/* Hide the overlay once the field has real content. */
.skill-hint-input:not(:placeholder-shown) ~ .skill-rich-ph { display: none; }
.skill-md-editor {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  resize: none;
  font-family: ui-monospace, 'SF Mono', 'Fira Code', monospace;
  font-size: 11.5px;
  line-height: 1.5;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
}
.doclib-empty {
  text-align: center;
  color: color-mix(in srgb, var(--fg) 35%, transparent);
  padding: 32px 16px;
  font-size: 12px;
  font-style: italic;
}
/* Unified loading row across every Library tab (Chats / Documents / Research /
   Archive): one opacity, one size, with the whirlpool spinner next to it. */
.lib-loading-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 16px;
  font-size: 12px;
  color: color-mix(in srgb, var(--fg) 45%, transparent);
}
.pdf-loading-state {
  min-height: 120px;
  margin: 0;
  box-sizing: border-box;
  flex-direction: column;
  gap: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: color-mix(in srgb, var(--fg) 68%, transparent);
  box-shadow: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.pdf-loading-state .ai-spinner-whirlpool {
  color: var(--accent, var(--red));
  opacity: 0.95;
}
.pdf-loading-state .ai-spinner-whirlpool canvas {
  display: block;
}
.doclib-load-more {
  display: block;
  margin: 10px auto 0;
  padding: 6px 16px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg-muted);
  font-size: 11px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
  position: relative;
  top: 10px;
}
/* Soft dark gradient above the button — blends the list content into the
   load-more strip instead of a hard cutoff. Spans the modal width and
   sits behind/above the button. */
.doclib-load-more::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 100%;
  margin-bottom: 4px;
  width: min(600px, 92vw);
  height: 34px;
  pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, #000 24%, transparent), transparent);
}
.doclib-load-more:hover {
  border-color: var(--red);
  color: var(--red);
}
.doclib-inline-load-more {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: none;
  top: 0;
  font-size: 9px !important;
  line-height: 1.2 !important;
}

/* Document library toolbar buttons */
.doclib-toolbar-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.doclib-toolbar-btn:hover {
  color: var(--fg);
  border-color: var(--fg);
}
.doclib-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);
}
.doclib-toolbar-btn.danger {
  color: var(--color-error, #e55);
}
.doclib-toolbar-btn.danger:hover:not(:disabled) {
  border-color: var(--color-error, #e55);
}
.doclib-toolbar-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Bulk action bar */
.doclib-bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--red) 5%, transparent);
  font-size: 10px;
  margin-bottom: 8px;
}
.doclib-bulk-bar.hidden {
  display: none;
}
.doclib-bulk-check-all {
  display: flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  color: color-mix(in srgb, var(--fg) 60%, transparent);
  font-size: 10px;
}
#doclib-bulk-bar .memory-toolbar-btn {
  position: relative;
  top: -3px;
}

/* Custom checkboxes */
.doclib-select-cb,
.doclib-bulk-check-all input {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
  position: relative;
  transition: all 0.15s;
}
.doclib-select-cb:hover,
.doclib-bulk-check-all input:hover {
  border-color: var(--red);
}
.doclib-select-cb:checked,
.doclib-bulk-check-all input:checked {
  background: var(--red);
  border-color: var(--red);
}
.doclib-select-cb:checked::after,
.doclib-bulk-check-all input:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0px;
  width: 4px;
  height: 8px;
  border: solid var(--bg);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}


/* + button outside scroll area (when doc is on right side) */

@media (max-width: 600px) {
  .doclib-toolbar {
    flex-direction: column;
  }
  .doclib-card-session,
  .doclib-card-time {
    display: none;
  }
  .doclib-card-preview {
    max-height: 40vh;
  }
}

/* Collapse card tags before they compete with attachment/favorite controls. */
.email-card-tags .email-tags-more {
  color: var(--email-tags-more-color, var(--fg));
  background: color-mix(in srgb, var(--email-tags-more-color, var(--fg)) 18%, transparent);
}
.email-tags-more-single,
[data-email-tags-count-mini] { display: none; }
.email-tags-more-single svg { display: none; }
.email-card-tags.email-tags-mini:not(.email-tags-expanded) > .email-tag,
.email-card-tags.email-tags-mini:not(.email-tags-expanded) > .email-tag-extra {
  display: none;
}
.email-card-tags.email-tags-mini:not(.email-tags-expanded) .email-tags-more-single,
.email-card-tags.email-tags-expanded .email-tags-more-single {
  display: inline-flex;
}
.email-card-tags.email-tags-mini:not(.email-tags-expanded) [data-email-tags-count-normal] { display: none; }
.email-card-tags.email-tags-mini:not(.email-tags-expanded) [data-email-tags-count-mini],
.email-card-tags.email-tags-expanded .email-tags-more-single [data-email-tags-count-mini] { display: inline; }

/* Keep the reader actions in drafting order. */
.email-reader-actions-inline > [data-act="ai-reply"] { order: 1; }
.email-reader-actions-inline > [data-act="reply"] { order: 2; }
.email-reader-actions-inline > [data-act="reply-all"] { order: 3; }
.email-reader-actions-inline > [data-act="forward"] { order: 4; }
.email-reader-actions-inline.email-reader-actions-compact > .reader-action-overflowed {
  display: none !important;
}

/* ── Archive browser ── */
.archive-list {
  grid-template-columns: 1fr !important;
  gap: 4px !important;
}
.archive-row {
  flex-direction: row !important;
}
.archive-row .doclib-card-header {
  flex: 1;
  padding: 8px 10px;
}
.archive-row .doclib-card-title {
  flex: 1;
  min-width: 0;
}
/* Archive column layout */
.archive-header {
  display: flex;
  align-items: center;
  padding: 4px 10px;
  gap: 6px;
  font-size: 9px;
  font-weight: 600;
  opacity: 0.35;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.archive-col-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: -4px;
}
.archive-col-msgs {
  width: 40px;
  flex-shrink: 0;
  text-align: left;
  margin-left: -8px;
}
.archive-col-model {
  width: 90px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.archive-col-time {
  width: 55px;
  flex-shrink: 0;
  text-align: right;
}
.archive-col-menu {
  width: 24px;
  flex-shrink: 0;
}
.archive-menu-btn {
  background: transparent;
  border: none;
  color: var(--fg);
  opacity: 0.3;
  cursor: pointer;
  padding: 4px;
  line-height: 0;
  border-radius: 4px;
  transition: background .15s, opacity .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 4px;
  vertical-align: middle;
  height: 100%;
}
.archive-menu-btn svg {
  display: block;
  margin-top: -6px;
}
.archive-menu-btn:hover {
  background: color-mix(in srgb, var(--fg) 10%, transparent);
  opacity: 1;
}

/* ── Gallery (image library) ── */

.gallery-modal-content {
  width: min(820px, 94vw);
  max-height: 92vh;
  font-size: 12px;
}
/* Keep the Gallery frame anchored while tabs or bulk-selection controls
   change the content height. Centering the frame made every shorter tab move
   the whole window vertically. */
@media (min-width: 769px) {
  #calendar-modal,
  #gallery-modal,
  #tasks-modal,
  #memory-modal,
  #doclib-modal,
  #compare-model-overlay,
  #research-overlay,
  #theme-modal,
  #settings-modal,
  #email-lib-modal,
  #cookbook-modal {
    align-items: flex-start;
    padding-top: 4vh;
    box-sizing: border-box;
  }
}
/* While the Edit tab is active the editor needs a *definite* height so
   the right-side tool panel (`.ge-right-panel { overflow-y:auto }`)
   scrolls INTERNALLY. Without this the modal only has `max-height`, so
   `.gallery-editor { height:100% }` can't resolve — the editor grows to
   its full content height, overflows the modal body, and the modal-body
   scrollbar that appears can't be wheel-scrolled because the editor's
   `overscroll-behavior:contain` blocks the chain. Pinning a real height
   here makes the panel bounded and scrollable as designed. Scoped to
   the editor view (matched via the container's inline `display:flex`)
   so the Photos/Albums views keep sizing to their content. */
.gallery-modal-content:has(#gallery-editor-container[style*="flex"]) {
  height: 92vh;
}
/* The editor tab owns the modal body's scroll context. Keep the landing
   chooser and the mounted editor inside the available sheet height so a long
   saved-project list cannot push the launch controls below the viewport. */
.gallery-modal-content:has(#gallery-editor-container[style*="flex"]) > .modal-body {
  display: flex;
  min-height: 0;
  overflow: hidden;
}
.gallery-modal-content:has(#gallery-editor-container[style*="flex"]) #gallery-editor-container {
  min-height: 0;
  overflow: hidden;
}
/* Photo-detail view sizing (issue #314).
   The detail view is rendered as a `position:absolute; inset:0` overlay
   *inside* `.gallery-images-container`, painted over the photo grid. Because
   it's absolutely positioned it can't contribute to the container's height —
   the container (and therefore the overlay's `inset:0` box) collapses to the
   height of the grid sitting behind it. When the library only has a few
   photos that grid is short, so the detail view is crushed: the image is
   clipped and the metadata sidebar (`overflow-y:auto`) is squeezed into a
   tiny, internally-scrolling strip. (With a large library the grid is tall,
   which is why it looked fine in the demo video but cramped for users with
   few photos.)
   Fix: when the detail view is open, hide the grid-view siblings and drop the
   overlay into normal flow. The container — and the window, up to its 92vh
   max-height — then sizes to the detail's own content (image + metadata), so
   nothing is clipped or squeezed regardless of how many photos exist. Scoped
   via the detail element's inline `display:flex` so the grid / albums views
   keep sizing to their own content. Works on both desktop and the mobile
   full-screen sheet. */
#gallery-images-container:has(> #gallery-detail[style*="flex"]) > *:not(#gallery-detail) {
  display: none !important;
}
#gallery-images-container:has(> #gallery-detail[style*="flex"]) > #gallery-detail {
  position: static;
}
/* Containing block for the photo-detail overlay — keeps it inside the body
   so it sits below the modal header and the tab strip instead of covering them. */
.gallery-images-container {
  position: relative;
}
.gallery-modal-content .modal-header h4 {
  font-size: 1rem;
}
.gallery-stats {
  font-size: 10px;
  color: color-mix(in srgb, var(--fg) 50%, transparent);
  margin-bottom: 4px;
}
.gallery-toolbar {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
  align-items: center;
}
.gallery-toolbar-break { display: none; }
/* Keep the hint anchored while independently seating the input in the row. */
.gallery-search-wrap { position: relative; flex: 1; min-width: 0; display: flex; top: 0; }
.gallery-search {
  position: relative;
  top: 4px;
  flex: 1;
  width: 100%;
  padding: 4px 8px;
  padding-right: 78px;   /* room for the enter hint */
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  outline: none;
}
.gallery-search-enter-hint {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent, var(--red));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  white-space: nowrap;
}
/* Show the hint only once the user has typed something (placeholder gone). */
.gallery-search:not(:placeholder-shown) ~ .gallery-search-enter-hint { opacity: 0.95; }
.gallery-search:focus {
  border-color: var(--red);
}
.gallery-model-filter,
.gallery-sort {
  padding: 4px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  position: relative;
  top: 4px;
}
.gallery-selection-bar {
  margin-bottom: 4px;
  position: relative;
  top: 2px;
  padding-right: 18px;
}
.gallery-tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}
.gallery-chip {
  height: 28px;
  box-sizing: border-box;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 14px;
  font-size: 12px;
  line-height: 1;
  border: 1px solid var(--border);
  background: none;
  color: var(--fg);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.gallery-chip:hover {
  border-color: var(--red);
}
.gallery-chip.active {
  background: color-mix(in srgb, var(--red) 15%, transparent);
  border-color: color-mix(in srgb, var(--red) 40%, transparent);
  color: var(--red);
}
/* Album chips row */
.gallery-album-chips {
  display: flex; gap: 4px; flex-wrap: wrap; padding: 0 0 3px;
}
.gallery-chip-fav { color: var(--red); }
.gallery-chip-fav.active { background: color-mix(in srgb, var(--red) 15%, transparent); border-color: var(--red); }
.gallery-chip-add { opacity: 0.5; font-size: 14px; padding: 2px 10px; }
/* Active-album indicator — appears when the Photos grid is filtered to one album. */
.gallery-chip-active-album,
.gallery-active-filter-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: color-mix(in srgb, var(--red) 14%, transparent);
  border-color: color-mix(in srgb, var(--red) 45%, transparent);
  position: relative;
  top: 6px;
}
.gallery-active-filter-pill {
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  border-color: color-mix(in srgb, var(--fg) 18%, transparent);
  color: color-mix(in srgb, var(--fg) 86%, transparent);
}
.gallery-clear-all-filters {
  height: 28px;
  border-style: dashed;
  opacity: 0.72;
}
.gallery-clear-all-filters:hover {
  opacity: 1;
  color: var(--red);
}
.gallery-chip-clear {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  padding: 0;
  margin-left: 1px;
  width: 12px;
  height: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  position: relative;
  top: -4px;
}
.gallery-chip-clear:hover { opacity: 1; }



/* Favorite button on card */
/* Video cards: <video> fills the same slot as <img>, plus a small play badge
   so it's clear the thumbnail represents a video. */
.gallery-card video {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #000;
  display: block;
}
.gallery-card-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
.gallery-card-play svg { margin-left: 2px; }

.gallery-fav-btn {
  position: absolute; top: 0px; right: 4px; z-index: 2;
  background: rgba(0,0,0,0.4); border: none; border-radius: 50%;
  width: 26px; height: 26px; font-size: 14px;
  color: rgba(255,255,255,0.6); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s;
  padding: 0;
}
.gallery-fav-btn.gallery-fav-active { opacity: 1; color: var(--red); }

.gallery-dl-btn {
  position: absolute; top: 0px; left: 4px; z-index: 2;
  background: rgba(0,0,0,0.4); border: none; border-radius: 50%;
  width: 26px; height: 26px;
  color: rgba(255,255,255,0.75); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s, background 0.15s;
  padding: 0;
}
.gallery-dl-btn:hover { background: rgba(0,0,0,0.7); color: #fff; }
/* In select mode the per-thumbnail hover buttons (favorite + download) just
   get in the way of picking — hide them so the card is a clean select target.
   `body.gallery-selecting` is the authoritative signal (one class for the
   whole grid) — the per-card .gallery-card-selectable is kept as a backup
   in case the body class is missed. */
body.gallery-selecting .gallery-fav-btn,
body.gallery-selecting .gallery-dl-btn,
.gallery-card-selectable .gallery-fav-btn,
.gallery-card-selectable .gallery-dl-btn {
  display: none !important;
}

/* AI tag chips in detail view */
.gallery-ai-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.gallery-ai-chip {
  background: color-mix(in srgb, var(--accent, var(--red)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, var(--red)) 25%, transparent);
  border-radius: 10px; padding: 3px 8px; font-size: 10px;
  color: var(--fg); opacity: 0.8;
  font: inherit; font-size: 10px;
  cursor: pointer;
  transition: background 0.12s, opacity 0.12s, border-color 0.12s;
}
.gallery-ai-chip:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--accent, var(--red)) 22%, transparent);
  border-color: color-mix(in srgb, var(--accent, var(--red)) 50%, transparent);
}
/* AI-generated tags: muted neutral with a tiny sparkle marker so the
   user can tell at a glance these came from the model, not them. */
.gallery-aitag-chip {
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  border-color: color-mix(in srgb, var(--fg) 18%, transparent);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.gallery-aitag-chip:hover {
  background: color-mix(in srgb, var(--fg) 12%, transparent);
  border-color: color-mix(in srgb, var(--fg) 35%, transparent);
}
.gallery-aitag-mark {
  font-size: 8px;
  opacity: 0.55;
  color: var(--accent, var(--red));
}
/* User-applied tags keep the accent-colored chip — they're the personal/
   curated tags, so they get the strongest visual weight. */
.gallery-user-chip {
  font-weight: 600;
}
/* × to remove a user tag (appears inside the chip). */
.gallery-tag-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  opacity: 0.55;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.gallery-tag-x:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--red, #ff5555) 22%, transparent);
  color: var(--red, #ff5555);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  align-content: start;
  gap: 8px;
  max-height: calc(92vh - 165px);
  overflow-y: auto;
  padding: 2px;
  transition: border-color 0.15s, background 0.15s;
}
.gallery-grid.gallery-dragover {
  border: 2px dashed var(--red);
  border-radius: 8px;
  background: color-mix(in srgb, var(--red) 5%, transparent);
}
.gallery-card {
  position: relative;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.gallery-card.gallery-card-focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 36%, transparent);
}
/* Upload-affordance tile pinned to the top-left of the Photos grid. Matches
   the Upload album tile in the Albums tab — dashed border, centered icon. */
.gallery-card-upload {
  border-style: dashed;
  background: color-mix(in srgb, var(--fg) 3%, var(--bg));
  opacity: 0.75;
  transition: opacity 0.12s, border-color 0.15s, transform 0.15s;
}
/* The "Start AI tag" button turns into a Cancel control during a tag run. */
.gallery-tag-cancelling {
  color: var(--red) !important;
  border-color: color-mix(in srgb, var(--red) 45%, var(--border)) !important;
}
/* Skeleton/shimmer placeholder tiles shown while the first page of photos loads. */
.gallery-card-skeleton {
  cursor: default;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--fg) 4%, var(--panel)) 30%,
    color-mix(in srgb, var(--fg) 12%, var(--panel)) 50%,
    color-mix(in srgb, var(--fg) 4%, var(--panel)) 70%);
  background-size: 200% 100%;
  animation: gallery-skeleton-shimmer 1.25s ease-in-out infinite;
}
.gallery-card-skeleton:hover { transform: none; box-shadow: none; border-color: var(--border); }
/* Chat attachment image: shimmer skeleton + centered whirlpool shown while a
   sent photo uploads / its thumbnail loads (see chatRenderer buildAttachCards). */
.attach-image-skeleton {
  position: relative;
  width: 160px; height: 120px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--fg) 4%, var(--panel)) 30%,
    color-mix(in srgb, var(--fg) 12%, var(--panel)) 50%,
    color-mix(in srgb, var(--fg) 4%, var(--panel)) 70%);
  background-size: 200% 100%;
  animation: gallery-skeleton-shimmer 1.25s ease-in-out infinite;
}
.attach-image-skeleton > .spinner-whirlpool { margin: 0 !important; }

/* Corner "Aa" button on a chat photo thumbnail — opens the vision/OCR editor
   so the user can correct what the vision model fed to the LLM. */
.attach-image-preview { position: relative; }
.attach-vision-model,
.attach-image-name {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attach-vision-model {
  font-size: 10px;
  color: var(--accent, var(--red));
  opacity: 0.85;
  margin-top: 3px;
}
.attach-image-name {
  font-size: 10px;
  opacity: 0.5;
  margin-top: 1px;
}
.attach-ocr-btn {
  position: absolute; top: 4px; right: 4px;
  z-index: 5;  /* sit above msg-action overlays so the click lands here */
  height: 22px;
  background: rgba(0,0,0,0.55); color: #fff;
  border: 1px solid rgba(255,255,255,0.2); border-radius: 4px;
  padding: 0 8px 0 6px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 11px; font-weight: 500; line-height: 1;
  opacity: 0.75; transition: opacity 0.15s;
}
.attach-ocr-btn:hover { opacity: 1; }
.attach-ocr-btn svg { display: block; }
/* On mobile keep just the (larger) edit icon — the "Caption" label crowds
   the corner of the small chat photo. */
@media (max-width: 768px) {
  .attach-ocr-btn .attach-ocr-label { display: none; }
  .attach-ocr-btn {
    width: 28px; height: 28px;
    padding: 0;
  }
  .attach-ocr-btn svg { width: 16px; height: 16px; }
}

/* Vision/OCR text editor modal — opened from the "Aa" button above. */
.vision-editor-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.vision-editor-panel {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  width: min(560px, 92vw);
  max-height: 88vh;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.4);
}
.vision-editor-title {
  font-size: 13px; font-weight: 600; color: var(--fg);
  display: flex; align-items: center; gap: 6px;
}
.vision-editor-desc { font-size: 11px; opacity: 0.6; line-height: 1.4; }
.vision-editor-text {
  width: 100%; min-height: 180px;
  background: var(--panel); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 10px;
  font-family: inherit; font-size: 12px; line-height: 1.5;
  resize: vertical; outline: none;
}
.vision-editor-text:focus { border-color: var(--accent-primary, var(--red)); }
.vision-editor-hint { font-size: 10.5px; opacity: 0.55; line-height: 1.4; }
.vision-editor-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 4px;
}
.vision-editor-btn {
  background: var(--panel); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 14px; font-size: 12px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  display: inline-flex; align-items: center; gap: 5px;
}
.vision-editor-btn svg { display: block; }
/* Optical nudge: the button text sits 1px higher than the SVG glyphs
   alongside it. Drop the text down 1px so they line up. */
.vision-editor-btn .vision-btn-label { position: relative; top: 1px; }
.vision-editor-btn:hover { border-color: color-mix(in srgb, var(--fg) 40%, var(--border)); }
.vision-editor-btn-primary {
  background: var(--accent-primary, var(--red));
  color: #fff; border-color: transparent;
}
.vision-editor-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

/* Quick full-size lightbox shown when the user taps a chat photo thumbnail. */
.attach-lightbox {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0, 0, 0, 0.85);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; cursor: zoom-out;
  animation: attach-lightbox-fade 0.12s ease-out;
}
.attach-lightbox img {
  max-width: 100%; max-height: 100%;
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  object-fit: contain;
}
.attach-lightbox-err {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 10px; font-size: 12px;
}
@keyframes attach-lightbox-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.gallery-card-upload:hover {
  opacity: 1;
  border-color: var(--red);
  transform: translateY(-1px);
}
.gallery-card-upload-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--fg);
}
.gallery-card-upload-label {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.8;
}
.gallery-card:hover {
  border-color: var(--red);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--red) 15%, transparent);
  transform: translateY(-1px);
}
.gallery-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px;
  background: linear-gradient(180deg, rgba(0,0,0,0.42), transparent 34%, rgba(0,0,0,0.22));
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.gallery-card-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  margin-top: auto;
  margin-bottom: 34px;
}
.gallery-card-badge {
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.88);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.1;
}
.gallery-card-badge-fav {
  color: #ff5f6f;
}
.gallery-select-dot {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  display: block;
  width: 10px; height: 10px; border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--fg) 30%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 50%, transparent);
  transition: background 0.15s;
}
.gallery-select-dot.selected { background: var(--red); border-color: var(--red); }
.gallery-select-dot:hover { background: color-mix(in srgb, var(--red) 50%, transparent); }
.gallery-select-btn {
  padding: 9px 10px 11px; background: transparent; color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
  font-size: 11px; font-family: inherit; opacity: 0.6; transition: all 0.15s;
  margin-top: -4px !important;
}
.gallery-select-btn:hover { opacity: 1; }
/* Match the library Select toggle's red tint (.memory-toolbar-btn.active).
   Bumped contrast so the toggled state actually reads on mobile — the prior
   15% red on transparent was nearly invisible against the page background. */
.gallery-select-btn.active {
  background: color-mix(in srgb, var(--red) 28%, transparent);
  color: var(--red);
  border-color: var(--red);
  font-weight: 600;
  opacity: 1;
}
/* Toolbar action buttons sit 2px lower than the generic select-btn so
   they baseline-align with the toolbar's selects/inputs instead of
   floating above them. */
.gallery-toolbar-action {
  margin-top: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.gallery-bulk-bar {
  display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12px;
  justify-content: flex-end;
}
.gallery-bulk-bar.hidden { display: none; }
.gallery-bulk-all {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; opacity: 0.75; cursor: pointer; margin-right: auto;
}
.gallery-bulk-all input { accent-color: var(--accent, var(--red)); cursor: pointer; }
.gallery-bulk-delete {
  padding: 3px 10px; background: transparent; color: var(--red);
  border: 1px solid var(--red); border-radius: 4px; cursor: pointer;
  font-size: 11px; font-family: inherit;
}
.gallery-bulk-delete:hover { background: var(--red); color: #fff; }
.gallery-bulk-cancel {
  padding: 3px 10px; background: transparent; color: var(--fg);
  border: 1px solid var(--border); border-radius: 4px; cursor: pointer;
  font-size: 11px; font-family: inherit; opacity: 0.6;
}
.gallery-bulk-cancel:hover { opacity: 1; }
.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 6px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,0.75));
  color: #fff;
}
.gallery-card-prompt {
  font-size: 10px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gallery-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 9px;
  opacity: 0.8;
}
.gallery-card-model {
  padding: 1px 5px;
  border-radius: 6px;
  background: rgba(255,255,255,0.15);
}
.gallery-empty {
  text-align: center;
  color: color-mix(in srgb, var(--fg) 35%, transparent);
  padding: 32px 16px;
  font-size: 12px;
  font-style: italic;
}
.gallery-load-more {
  display: block;
  margin: 10px auto 0;
  padding: 6px 16px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  transition: border-color 0.15s, color 0.15s;
}
.gallery-load-more:hover {
  border-color: var(--red);
  color: var(--red);
}

/* Gallery detail overlay */
.gallery-detail {
  position: absolute;
  inset: 0;
  background: var(--panel);
  z-index: 10;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.gallery-detail-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 4px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  /* Pin to top so a tall (portrait) photo can't cover the Back / ⋮
     menu when the detail body grows past the visible area. */
  position: sticky;
  top: 0;
  background: var(--panel);
  /* Above the image's rotate/nav buttons (z-index:3) so they scroll cleanly
     behind the header instead of colliding with it. */
  z-index: 5;
  min-height: 0;
}
.gallery-detail-title {
  max-width: min(360px, 40vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.82;
  position: relative;
  top: 1px;
}
.gallery-detail-back {
  background: none;
  border: none;
  color: var(--fg);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  position: relative;
  top: -2px;
}
/* Slightly larger header icons (back/edit/heart/⋮) — override the inline 14px. */
.gallery-detail-header svg { width: 16px; height: 16px; }
.gallery-detail-back:hover {
  background: color-mix(in srgb, var(--fg) 10%, transparent);
}
.gallery-detail-action {
  background: none;
  border: 1px solid var(--border);
  color: var(--fg);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  transition: border-color 0.15s;
}
.gallery-detail-action:hover {
  border-color: var(--fg);
}
.gallery-detail-action.danger {
  color: var(--color-error, #e55);
}
/* Overflow menu — replaces the seven individual action buttons that used
   to crowd the right side of the detail header. */
.gallery-detail-menu-wrap { position: relative; }
.gallery-detail-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 26px;
  padding: 0;
  position: relative;
  top: -2px;
}
.gallery-detail-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 150px;
  padding: 3px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--fg) 18%, transparent);
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.gallery-detail-menu[hidden] { display: none; }
.gallery-detail-menu .dropdown-item-compact {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font: inherit;
  /* Tighter than the global default — the photo-detail menu has 8
     items so every pixel of vertical padding adds up. */
  padding: 4px 8px;
  font-size: 11px;
  gap: 8px;
  line-height: 1.2;
}
.gallery-detail-menu .dropdown-item-compact .dropdown-icon,
.gallery-detail-menu .dropdown-item-compact .dropdown-icon svg {
  width: 12px;
  height: 12px;
}
.gallery-detail-body {
  display: flex;
  gap: 16px;
  padding: 12px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.gallery-detail-image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding-inline: 56px;
  box-sizing: border-box;
  overflow: hidden;
}
/* Shrink-wraps the actual image so overlay children (heart, face boxes)
   anchor to the IMAGE bounds, not the wider letterboxed wrapper. */
.gallery-detail-img-frame {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  max-height: 100%;
}
.gallery-detail-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.85);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
  z-index: 3;
  padding: 0;
}
.gallery-detail-nav:hover { opacity: 1 !important; background: rgba(0, 0, 0, 0.7); }
.gallery-detail-nav-prev { left: 8px; }
.gallery-detail-nav-next { right: 8px; }

/* Rotate buttons — same pattern as the prev/next arrows but pinned to the
   top corners. Hover-revealed so they don't clutter the image. */
.gallery-detail-rotate {
  position: absolute;
  top: 8px;
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.85);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
  z-index: 3;
  padding: 0;
}
.gallery-detail-rotate:hover { opacity: 1 !important; background: rgba(0, 0, 0, 0.7); }
.gallery-detail-rotate-ccw { left: 8px; }
.gallery-detail-rotate-cw  { right: 8px; }
/* Inline heart that lives next to the "Date" label in the sidebar.
   Tiny outline icon by default; fills red when favorited. */
.gallery-detail-date-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.gallery-detail-fav-inline {
  background: none;
  border: none;
  padding: 0;
  /* Nudge up 8px so the heart sits visually above the Date label
     baseline rather than centred on it. */
  margin-top: -8px;
  border-radius: 4px;
  color: var(--fg-muted);
  opacity: 0.6;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: opacity 0.15s, color 0.15s;
}
/* Shrink the SVG so the heart matches the height of the small uppercase
   Date label sitting next to it. */
.gallery-detail-fav-inline svg {
  width: 12px;
  height: 12px;
  display: block;
}
.gallery-detail-fav-inline:hover {
  opacity: 1;
}
.gallery-detail-fav-inline.active {
  opacity: 1;
  color: var(--red);
}
.gallery-detail-sidebar {
  width: 290px;
  flex-shrink: 0;
  /* Vertical scroll for long metadata, but never horizontal — overflow:auto
     alone would let a wide child (e.g. long album name in the select) push
     the sidebar into horizontal-scroll mode. */
  overflow-x: hidden;
  overflow-y: auto;
  min-width: 0;
}
.gallery-detail-inspector-head {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.gallery-detail-eyebrow {
  font-size: 9px;
  font-weight: 700;
  color: var(--accent, var(--red));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 3px;
}
.gallery-detail-inspector-title {
  font-size: 14px;
  font-weight: 650;
  line-height: 1.25;
  word-break: break-word;
}
.gallery-detail-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 4px 0 12px;
}
.gallery-detail-meta-card {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  border-radius: 7px;
  padding: 7px 8px;
}
.gallery-detail-meta-card span {
  display: block;
  font-size: 9px;
  font-weight: 700;
  color: color-mix(in srgb, var(--fg) 48%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
}
.gallery-detail-meta-card strong {
  display: block;
  min-width: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  word-break: break-word;
}
.gallery-detail-inline-link {
  appearance: none;
  background: none;
  border: none;
  color: var(--accent, var(--red));
  padding: 0;
  font: inherit;
  font-weight: inherit;
  cursor: pointer;
  text-align: left;
}
.gallery-detail-mini-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}
.gallery-detail-mini-btn {
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font: inherit;
  font-size: 10.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.gallery-detail-mini-btn:hover {
  border-color: color-mix(in srgb, var(--fg) 42%, var(--border));
}
/* Constrain any child that could otherwise stretch the sidebar wider than
   its declared width (selects with long option text, long URLs, etc.). */
.gallery-detail-sidebar select,
.gallery-detail-sidebar input,
.gallery-detail-sidebar .gallery-detail-prompt {
  max-width: 100%;
  box-sizing: border-box;
}
.gallery-date-rel {
  opacity: 0.55;
  margin-left: 4px;
  font-size: 11px;
  font-style: italic;
}
.gallery-detail-section label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  opacity: 0.6;
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.gallery-detail-section div {
  font-size: 12px;
  word-break: break-word;
}
.gallery-detail-prompt {
  white-space: pre-wrap;
  line-height: 1.4;
}
.gallery-tag-input,
.gallery-detail-name-input {
  width: 100%;
  padding: 5px 8px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  font: inherit;
  font-size: 11px;
  margin-bottom: 4px;
}
.gallery-tag-input:focus,
.gallery-detail-name-input:focus {
  border-color: var(--red);
  outline: none;
}
/* ↵ enter hint inside the Add-a-tag field (accent), replacing the "press Enter"
   placeholder text. */
.gallery-tag-input-wrap { position: relative; }
.gallery-tag-enter-hint {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  margin-top: -2px;  /* the input has 4px bottom margin; center on the box */
  color: var(--accent, var(--red));
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
  opacity: 0.8;
}
.gallery-detail-name-input { font-size: 13px; font-weight: 500; }
/* ↵ enter hint on the image name field — accent, shown while editing to signal
   that Enter saves. */
.gallery-name-wrap { position: relative; }
.gallery-name-enter {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  margin-top: -2px;
  color: var(--accent, var(--red));
  opacity: 0.85;
  pointer-events: none;
  display: none;
}
.gallery-tag-save {
  background: none;
  border: 1px solid var(--border);
  color: var(--fg);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  padding: 3px 10px;
  border-radius: 4px;
  transition: border-color 0.15s, color 0.15s;
}
.gallery-tag-save:hover {
  border-color: var(--red);
  color: var(--red);
}

@media (max-width: 600px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 6px;
  }
  /* Single-row toolbar on mobile: search + Sources + Recent (sort) all share
     one row. The search bar shrinks so the dropdowns fit beside it. */
  .gallery-toolbar {
    flex-wrap: nowrap;
    gap: 4px;
  }
  .gallery-search-wrap {
    flex: 1 1 0;
    min-width: 0;
  }
  .gallery-search {
    /* Drop the desktop right-padding reserved for the "enter to tag" hint —
     hide the hint on mobile (below) so the input can use its full width. */
    padding-right: 8px;
  }
  .gallery-search-enter-hint { display: none; }
  /* Disable the row break so the filters stay inline with search. */
  .gallery-toolbar-break { display: none; }
  .gallery-model-filter,
  .gallery-sort {
    flex: 0 0 auto;
    /* Cap each dropdown so search keeps a usable amount of width. */
    max-width: 100px;
    font-size: 11px;
    padding: 4px 6px;
    /* Keep the same vertical alignment as the desktop toolbar. */
    position: relative;
    top: 4px;
  }
  .gallery-select-btn {
    padding: 6px 8px 8px;
    font-size: 9px;
    flex-shrink: 0;
    /* Push Select to the far right of the single-row toolbar, regardless
       of its DOM position (sits between search and the dropdowns). */
    order: 99;
    margin-left: auto;
  }
  /* Tabs scroll horizontally rather than wrapping when narrow. */
  .gallery-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .gallery-tabs::-webkit-scrollbar { display: none; }
  .gallery-tab { flex-shrink: 0; }
  /* Album chips also scroll horizontally so they don't stack. */
  .gallery-album-chips {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .gallery-album-chips::-webkit-scrollbar { display: none; }
  .gallery-chip { flex-shrink: 0; }
  /* Tasks filter chips — same horizontal-swipe behaviour as the gallery
     albums / library chips on mobile: one row, slide-to-see-more. */
  .tasks-activity-filters {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .tasks-activity-filters::-webkit-scrollbar { display: none; }
  .tasks-activity-filters > * { flex-shrink: 0; }
  /* Detail view */
  .gallery-detail-body {
    flex-direction: column;
    overflow: visible;
  }
  .gallery-detail-image {
    flex: 0 0 auto;
    width: 100%;
    height: clamp(280px, 58vh, 520px);
    padding-inline: 48px;
  }
  .gallery-detail-sidebar {
    width: 100%;
  }
  .gallery-detail-title {
    display: none;
  }
  .gallery-detail-meta-grid {
    grid-template-columns: 1fr;
  }
  /* Album grid: smaller tile minimum on mobile. */
  .gallery-albums-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
  }
}


/* ── Scoreboard table ── */
.scoreboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88em;
}
.scoreboard-table th {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 0.85em;
  color: color-mix(in srgb, var(--fg) 55%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.scoreboard-table th:not(:first-child) {
  text-align: center;
}
.scoreboard-table td {
  padding: 5px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
  text-align: center;
}
.scoreboard-table td.scoreboard-model {
  text-align: left;
  font-weight: 500;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scoreboard-table td.scoreboard-pct {
  font-weight: 600;
  color: var(--red);
}
.scoreboard-table tbody tr:hover {
  background: color-mix(in srgb, var(--fg) 5%, transparent);
}

#scoreboard-overlay svg {
  color: var(--accent, var(--red));
}

/* ── Compare search results ── */
.compare-search-results {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.compare-search-result {
  padding: 6px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
}
.compare-search-result:last-child {
  border-bottom: none;
}
.search-result-title {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9em;
  display: block;
  line-height: 1.3;
}
.search-result-title:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}
.search-result-snippet {
  color: color-mix(in srgb, var(--fg) 70%, transparent);
  font-size: 0.82em;
  line-height: 1.4;
  margin-top: 2px;
}
.search-result-url {
  color: color-mix(in srgb, var(--fg) 35%, transparent);
  font-size: 0.75em;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ── Cookbook Tool ── */

/* ── Cookbook ── */
.cookbook-serve-preset {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  margin-bottom: 3px;
  cursor: pointer;
  transition: background 0.15s;
}
.cookbook-serve-preset:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.cookbook-serve-preset-name {
  font-size: 11px;
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cookbook-serve-preset-meta {
  font-size: 9px;
  font-family: 'Fira Code', monospace;
  color: var(--fg-muted);
  opacity: 0.5;
}
.cookbook-serve-preset-launch {
  background: none;
  border: none;
  color: #50fa7b;
  cursor: pointer;
  font-size: 10px;
  opacity: 0.6;
  padding: 0 2px;
  position: relative;
  top: -4px;
}
.cookbook-serve-preset-launch:hover { opacity: 1; }
.cookbook-serve-preset-rm {
  background: none;
  border: none;
  color: var(--fg-muted);
  cursor: pointer;
  font-size: 10px;
  opacity: 0.3;
  padding: 0 2px;
  position: relative;
  top: -4px;
}
.cookbook-serve-preset-rm:hover { opacity: 0.8; color: var(--red); }
.cookbook-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
}
#cookbook-modal .modal-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#cookbook-modal .modal-header {
  flex: 0 0 auto;
}
#cookbook-modal .cookbook-body {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
#cookbook-modal .cookbook-group {
  min-height: 0;
}
#cookbook-modal .cookbook-group > .admin-card {
  min-height: 0;
  /* Let .cookbook-body be the SINGLE scroll surface. Nesting another
     overflow:auto here trapped the wheel inside the cached-list when a
     serve panel expanded — the page couldn't scroll past the panel's
     bottom (Launch button got hidden). */
  overflow: visible !important;
}
#cookbook-modal .cookbook-section-body {
  min-height: 0;
}
.cookbook-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
}

/* Cards — match admin-card */
.cookbook-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cookbook-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cookbook-card-header-actions { display: flex; gap: 4px; }
.cookbook-card-title { font-size: 13px; font-weight: 600; }
.cookbook-card-desc {
  font-size: 11px;
  color: color-mix(in srgb, var(--fg) 50%, transparent);
}

/* Fields grid */
.cookbook-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
  margin-top: 4px;
}
.cookbook-field-label {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  color: color-mix(in srgb, var(--fg) 60%, transparent);
  gap: 3px;
}

/* Inputs — match admin-add-form input */
.cookbook-field-input {
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
}
.cookbook-field-input:focus { border-color: var(--red); }
#hwfit-dl-server, #hwfit-usecase, #hwfit-server-select, #hwfit-cache-server, #serve-sort { height: 28px; width: 88px; }
/* Serve tab — match Documents sizing, but leave room for the active "Cancel"
   label and center it vertically so the descenders don't clip. */
#hwfit-cache-select {
  min-width: 58px;
  height: 28px;
  position: relative;
  top: -3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Command preview */
.cookbook-cmd-preview {
  margin: 4px 0 0;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: 'Fira Code', monospace;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--fg);
}

/* Buttons — match admin-btn-sm */
.cookbook-actions { display: flex; gap: 6px; margin-top: 2px; }
.cookbook-btn {
  padding: 4px 10px;
  min-width: 54px;
  text-align: center;
  font-size: 11px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
  transition: all 0.15s;
}
.cookbook-btn:hover {
  background: var(--border);
  border-color: var(--accent);
}
.cookbook-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cookbook-run-btn {
  background: var(--accent);
  color: var(--panel);
  border-color: var(--accent);
  font-weight: 600;
}
.cookbook-run-btn:hover { opacity: 0.85; }
.cookbook-stop-btn {
  background: var(--color-error);
  border-color: var(--color-error);
}

/* Output */
.cookbook-output-wrap {
  position: relative;
  margin: 0;
}
.cookbook-output-kill {
  position: absolute;
  top: 4px;
  right: 34px;
  width: 22px;
  height: 22px;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--fg-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, color .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cookbook-output-kill:hover { color: var(--color-error, var(--warn)); border-color: var(--border); }
.cookbook-output-wrap .copy-code {
  position: absolute;
  top: 6px;
  right: 6px;
}
.cookbook-output-wrap:hover .copy-code { opacity: 0.7; }
.cookbook-output-pre {
  margin: 0;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: 'Fira Code', monospace;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 180px;
  overflow-y: auto;
}
.cookbook-output-error { color: var(--color-error); }

/* Downloaded/cached models */
.hwfit-cached-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  margin: 2px 0;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  cursor: default;
  font-size: 12px;
}
.hwfit-cached-item .hwfit-serve-panel {
  flex-basis: 100%;
  margin-top: 4px;
}
.hwfit-cached-item:hover {
  background: color-mix(in srgb, var(--fg) 6%, transparent);
}
.hwfit-cached-header {
  font-size: 10px;
  opacity: 0.4;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none !important;
  background: none !important;
  padding: 2px 8px;
  cursor: default !important;
}
.hwfit-cached-header:hover { background: none !important; }
.hwfit-cached-name {
  font-weight: 600;
  flex-shrink: 0;
}
.hwfit-cached-repo {
  flex: 1;
  color: var(--fg-muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hwfit-cached-size,
.hwfit-cached-files {
  font-size: 10px;
  color: var(--fg-muted);
  white-space: nowrap;
}
.hwfit-cached-serve,
.hwfit-cached-delete {
  flex-shrink: 0;
}
.hwfit-cached-delete {
  opacity: 0.4;
  font-size: 10px;
}
.hwfit-cached-delete:hover {
  opacity: 1;
  color: var(--color-error, var(--warn));
}
.hwfit-cached-badge {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
  white-space: nowrap;
}
.hwfit-cached-ready {
  background: color-mix(in srgb, var(--color-success, #4caf50) 20%, transparent);
  color: var(--color-success, #4caf50);
}
.hwfit-cached-dl {
  background: color-mix(in srgb, var(--color-warning, #f0ad4e) 20%, transparent);
  color: var(--color-warning, #f0ad4e);
}

/* Cookbook notification dot */
#tool-cookbook-btn {
  position: relative;
}
#rail-cookbook {
  position: relative;
}
.cookbook-open-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-left: 2px;
  color: var(--accent, var(--red));
  opacity: 0.9;
}
.cookbook-open-loading .ai-spinner,
.cookbook-open-loading .ai-spinner-whirlpool {
  display: inline-flex !important;
  width: 14px;
  height: 14px;
  margin: 0 !important;
  gap: 0 !important;
}
.cookbook-open-loading canvas {
  display: block;
}
.cookbook-section-loading-wp,
.cookbook-section-loading-wp canvas {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
}
#rail-cookbook .cookbook-open-loading {
  position: absolute;
  right: 2px;
  top: -2px;
  width: 12px;
  height: 12px;
  margin-left: 0;
}
/* The serve-list 'downloading' / 'download stalled' status text sits a hair
   low against the rest of the meta line on mobile — nudge it up 2px. */
@media (max-width: 768px) {
  .cookbook-dl-status {
    position: relative;
    top: -2px;
  }
}
.cookbook-notif-dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-success, #4caf50);
  /* Drives the breathing glow in the keyframes (matches email's dot). */
  --notif-glow: var(--color-success, #4caf50);
  animation: cookbook-notif-pulse 2s ease-in-out infinite;
}
.cookbook-notif-dot.cookbook-notif-error {
  background: var(--color-error, #f44);
  --notif-glow: var(--color-error, #f44);
  position: relative;
  left: -2px;
  top: -1px;
}
.rail-notify-error { color: var(--color-error, #f44) !important; }
.cookbook-tab-error-dot {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--color-error, #f44); margin-left: 4px; vertical-align: middle;
  animation: cookbook-notif-pulse 2s ease-in-out infinite;
}
@keyframes cookbook-notif-pulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--notif-glow, var(--accent, var(--red))) 60%, transparent);
  }
  50% {
    opacity: 0.85;
    box-shadow: 0 0 6px 2px color-mix(in srgb, var(--notif-glow, var(--accent, var(--red))) 55%, transparent);
  }
}
.cookbook-clear-btn {
  font-size: 10px !important;
  padding: 0 8px !important;
  height: 22px !important;
  border-radius: 6px !important;
  border: 1px solid var(--border) !important;
  color: color-mix(in srgb, var(--fg) 40%, transparent) !important;
  opacity: 1 !important;
  background: none !important;
}
.cookbook-clear-btn:hover {
  color: var(--red) !important;
  border-color: var(--red) !important;
  background: color-mix(in srgb, var(--red) 8%, transparent) !important;
}
.cookbook-bulk-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  margin-bottom: 4px;
  background: color-mix(in srgb, var(--red) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 20%, transparent);
  border-radius: 6px;
  font-size: 11px;
}
.cookbook-bulk-bar.hidden { display: none; }
.serve-select-cb {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; cursor: pointer;
  background: var(--border); transition: background 0.15s;
  align-self: center;
  position: relative;
  top: -2px;
}
#serve-bulk-bar {
  position: relative;
  top: -6px;
}
#serve-bulk-bar #serve-bulk-cancel {
  top: -2px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  line-height: 1;
}
#serve-bulk-bar #serve-bulk-cancel svg {
  top: 0;
}
.serve-select-cb.selected { background: var(--red); }
.serve-select-cb:hover { background: color-mix(in srgb, var(--red) 50%, transparent); }
#hwfit-cache-select.active {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.cookbook-serve-dirs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.cookbook-serve-dir-pill {
  font-size: 10px;
  font-family: 'Fira Code', monospace;
  padding: 2px 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  color: var(--fg-muted);
  letter-spacing: 0.2px;
}
/* Status pills shown inline in a Serve-tab card title (next to the model
   name) when the model has a live serve / download task. Shared base
   class so "running" and "downloading" sit on the same row with the
   same chrome; only color varies. */
.cookbook-serve-running-pill,
.cookbook-serve-downloading-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.3px;
  vertical-align: 2px;
  position: relative;
  top: 1px;          /* nudged down 2px from the old -1px so it sits
                        flush with the cap-height of the title text */
}
.cookbook-serve-running-pill {
  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)) 35%, transparent);
}
.cookbook-serve-downloading-pill {
  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)) 35%, transparent);
  opacity: 0.85;
}
.cookbook-serve-downloading-pill.is-stalled {
  /* Stalled downloads stay visible but read as warning, not progress. */
  color: var(--fg-muted, #888);
  background: color-mix(in srgb, var(--fg-muted, #888) 10%, transparent);
  border-color: color-mix(in srgb, var(--fg-muted, #888) 30%, transparent);
  opacity: 1;
}
.cookbook-serve-running-pill.is-clickable {
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.cookbook-serve-running-pill.is-clickable:hover {
  background: color-mix(in srgb, var(--accent, var(--red)) 22%, transparent);
  border-color: color-mix(in srgb, var(--accent, var(--red)) 55%, transparent);
}

.cookbook-serve-dir-edit {
  font-size: 9px;
  color: var(--fg-muted);
  opacity: 0.4;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookbook-serve-dir-edit:hover {
  opacity: 0.7;
  color: var(--accent, var(--red));
}
.cookbook-gpu-group {
  display: flex;
  gap: 3px;
  margin-top: -4px;
}
.cookbook-gpu-btn {
  width: 30px; height: 30px;
  font-size: 12px;
  font-family: 'Fira Code', monospace;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: none;
  color: var(--fg-muted);
  cursor: pointer;
  opacity: 0.4;
  transition: all 0.15s;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cookbook-gpu-btn:hover {
  opacity: 0.7;
  border-color: var(--fg-muted);
}
.cookbook-gpu-btn.active {
  opacity: 1;
  background: color-mix(in srgb, var(--fg) 10%, transparent);
  border-color: color-mix(in srgb, var(--fg) 55%, transparent);
  color: var(--fg);
  font-weight: 600;
}
/* Probe annotation states (set by "Free?" button) */
.cookbook-gpu-btn.gpu-free {
  opacity: 1;
  border-color: #4ade80;
  color: #4ade80;
}
.cookbook-gpu-btn.gpu-busy {
  opacity: 0.85;
  border-color: color-mix(in srgb, var(--red) 70%, transparent);
  color: var(--red);
  background: color-mix(in srgb, var(--red) 8%, transparent);
}
.cookbook-gpu-btn.gpu-missing {
  opacity: 0.2;
  text-decoration: line-through;
  cursor: not-allowed;
}
/* "Clear Server" lives in the actions row next to "Probe GPUs".
   Inherits .cookbook-btn sizing; this rule just adds the destructive
   red tint on hover so the "this kills processes" cue stays. */
.cookbook-gpu-clear:hover:not(:disabled) {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 60%, var(--border));
  background: color-mix(in srgb, var(--red) 8%, transparent);
}
.cookbook-gpu-clear:disabled { opacity: 0.4; cursor: wait; }
.cookbook-gpu-clear:disabled { opacity: 0.4; cursor: wait; }
/* GPU probe popup — per-GPU process list with kill buttons */
.cookbook-gpu-popup {
  /* Fixed positioning (relative to viewport) so we never get pulled into
     a scrolling/transform stacking context from an ancestor. Z-index has
     to clear the cookbook modal (260) and the rest of the high-z UI
     layers (themed-confirm and various overlays sit around 9000-10000). */
  position: fixed;
  z-index: 10010;
  min-width: 280px;
  max-width: 420px;
  background: var(--panel, #1a1a1a);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  font-family: 'Fira Code', monospace;
  font-size: 11px;
  color: var(--fg);
}
.cookbook-gpu-popup-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.cookbook-gpu-popup-stats {
  flex: 1;
  font-weight: 400;
  color: var(--fg-muted);
  font-size: 10px;
}
.cookbook-gpu-popup-close {
  background: none;
  border: none;
  color: var(--fg-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
}
.cookbook-gpu-popup-close:hover { color: var(--fg); }
.cookbook-gpu-popup-body {
  padding: 4px 0;
  max-height: 320px;
  overflow-y: auto;
}
.cookbook-gpu-popup-empty {
  padding: 10px;
  color: var(--fg-muted);
  font-style: italic;
}
.cookbook-gpu-proc {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
}
.cookbook-gpu-proc:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); }
.cookbook-gpu-proc-info {
  flex: 1;
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.cookbook-gpu-proc-pid {
  color: var(--fg-muted);
  width: 56px;
  flex-shrink: 0;
}
.cookbook-gpu-proc-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.cookbook-gpu-proc-mem {
  color: var(--fg-muted);
  flex-shrink: 0;
}
.cookbook-gpu-proc-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.cookbook-gpu-kill {
  border: 1px solid color-mix(in srgb, var(--red) 60%, transparent);
  background: none;
  color: var(--red);
  border-radius: 3px;
  padding: 2px 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
}
.cookbook-gpu-kill[data-sig="KILL"] {
  background: color-mix(in srgb, var(--red) 12%, transparent);
}
.cookbook-gpu-kill:hover:not(:disabled) {
  background: color-mix(in srgb, var(--red) 20%, transparent);
}
.cookbook-gpu-kill:disabled { opacity: 0.4; cursor: wait; }
.cookbook-serve-title {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.cookbook-serve-title-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cookbook-hf-link {
  font-size: 9px;
  text-decoration: none;
  color: var(--fg-muted);
  opacity: 0.5;
  padding: 1px 5px;
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  vertical-align: 1px;
  letter-spacing: 0.3px;
  font-weight: 600;
  flex-shrink: 0;
}
.cookbook-hf-link:hover {
  opacity: 0.8;
  border-color: var(--accent, var(--red));
  color: var(--accent, var(--red));
}
/* In the Trending models list the HF pill is the row's main affordance —
   tint it accent so it stands out next to the model name. */
#cookbook-hf-latest-list .cookbook-hf-link {
  color: var(--accent, var(--red));
  opacity: 0.85;
  border-color: color-mix(in srgb, var(--accent, var(--red)) 30%, transparent);
}

/* Running tab sections */
.cookbook-saved-section,
.cookbook-serve-section,
.cookbook-dl-section {
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 6px;
  overflow: hidden;
}
/* Divider between server-group sections in the Active tab so the
   transition between e.g. local + remote-host server blocks reads
   visually instead of running into each other. */
.cookbook-group[data-backend-group="Running"] > [class*="cookbook-server-section-"] + [class*="cookbook-server-section-"] {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}
.cookbook-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  cursor: pointer;
  user-select: none;
  /* Persistent surface + border so it reads as a clickable bar instead of
     blending into the panel background. */
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: background 0.15s, border-color 0.15s;
}
.cookbook-section-header:hover {
  background: color-mix(in srgb, var(--fg) 9%, transparent);
  border-color: color-mix(in srgb, var(--fg) 22%, transparent);
}
.cookbook-section-header.has-server-color {
  color: var(--fg);
  border-color: color-mix(in srgb, var(--cookbook-server-accent, var(--cookbook-server-color)) 45%, var(--border));
  background: color-mix(in srgb, var(--cookbook-server-accent, var(--cookbook-server-color)) 4%, var(--bg));
  box-shadow: inset 6px 0 0 var(--cookbook-server-accent, var(--cookbook-server-color));
}
.cookbook-section-header.has-server-color:hover {
  background: color-mix(in srgb, var(--cookbook-server-accent, var(--cookbook-server-color)) 7%, var(--bg));
  border-color: color-mix(in srgb, var(--cookbook-server-accent, var(--cookbook-server-color)) 60%, var(--border));
}
.cookbook-section-header.has-server-color .cookbook-section-title,
.cookbook-section-header.has-server-color .cookbook-section-chevron {
  color: var(--cookbook-server-accent, var(--cookbook-server-color));
}
.cookbook-section-header.has-server-color .cookbook-srv-status.ok {
  background: var(--cookbook-server-accent, var(--cookbook-server-color));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cookbook-server-accent, var(--cookbook-server-color)) 18%, transparent),
    0 0 8px color-mix(in srgb, var(--cookbook-server-accent, var(--cookbook-server-color)) 55%, transparent);
}
.cookbook-section-header .cookbook-clear-btn {
  margin-left: 0;
  position: relative;
  top: -3px;
}
@media (max-width: 768px) {
  .cookbook-section-header .cookbook-clear-btn {
    top: -3px;
  }
  .cookbook-task-check {
    top: 4px;
  }
}
/* "Stop all" sits just left of "Clear finished"; it carries the auto margin so
   the pair is pushed together to the right of the section title. */
.cookbook-section-header .cookbook-stop-all-btn {
  margin-left: auto;
  margin-right: 6px;
  position: relative;
  top: -3px;
}
.cookbook-stop-all-btn {
  font-size: 10px !important;
  padding: 0 8px !important;
  height: 22px !important;
  border-radius: 6px !important;
  border: 1px solid var(--border) !important;
  color: color-mix(in srgb, var(--fg) 40%, transparent) !important;
  opacity: 1 !important;
  background: none !important;
}
.cookbook-stop-all-btn:hover {
  color: var(--warn, #f0ad4e) !important;
  border-color: var(--warn, #f0ad4e) !important;
  background: color-mix(in srgb, var(--warn, #f0ad4e) 8%, transparent) !important;
}
.cookbook-section-chevron {
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.cookbook-section-body {
  padding: 0;
}
.cookbook-saved-toggle-header {
  font-size: 10px;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}
.cookbook-saved-toggle:hover { color: var(--fg); }
.cookbook-saved-item {
  margin: 2px 0;
  border-radius: 4px;
  font-size: 11px;
}
.cookbook-saved-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background 0.08s;
}
.cookbook-saved-header:hover {
  background: color-mix(in srgb, var(--fg) 5%, transparent);
}
.cookbook-saved-item .hwfit-serve-panel {
  margin: 4px 0 4px 6px;
}
.cookbook-saved-host {
  font-size: 10px;
  color: var(--fg-muted);
  font-family: 'Fira Code', monospace;
}
.cookbook-saved-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cookbook-saved-launch {
  font-size: 10px;
  padding: 2px 8px;
}
.cookbook-saved-del {
  background: none;
  border: none;
  color: var(--fg-muted);
  opacity: 0.3;
  cursor: pointer;
  font-size: 11px;
  padding: 0 2px;
}
.cookbook-saved-del:hover {
  opacity: 1;
  color: var(--color-error, var(--warn));
}

/* Serve config panel */
.hwfit-serve-panel {
  margin-top: 6px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}
.cookbook-serve-slots {
  display: flex;
  gap: 3px;
  justify-content: flex-end;
  margin-bottom: 4px;
}
/* When the Save split sits inside Row 1 (next to GPUs), align it with the
   input baseline (the row's grid cells stretch top-down; without this the
   Save buttons sit above the GPU button group). */
.hwfit-serve-row .cookbook-serve-slots {
  align-self: end;
  margin-bottom: 4px;
}
.cookbook-slot-btn {
  min-width: 22px; height: 28px;
  padding: 0 6px;
  font-size: 10px; font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: none;
  white-space: nowrap;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--fg-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: all 0.15s;
}
.cookbook-slot-btn:hover { opacity: 0.9; border-color: var(--fg-muted); }
/* Saved-configs split button: "Save" + dropdown-arrow joined into one control,
   but each segment keeps its own style — Save uses the filled accent
   "Done"-button look; the arrow stays a subtle outlined menu trigger. */
.cookbook-saved-split { gap: 0; }
.cookbook-saved-save,
.cookbook-saved-arrow { max-width: none; }
.cookbook-saved-save {
  padding: 0 10px;
  gap: 4px;
  background: var(--bg);
  color: var(--fg);
  border-color: var(--border);
  font-weight: 600;
  opacity: 1;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.cookbook-saved-save:hover {
  background: var(--border);
  border-color: var(--accent);
  opacity: 1;
}
.cookbook-saved-arrow {
  padding: 0 6px;
  background: var(--bg);
  color: var(--fg);
  border-color: var(--border);
  opacity: 1;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
}
.cookbook-saved-menu .cookbook-saved-favorite {
  border-left: 3px solid var(--red);
  background: color-mix(in srgb, var(--red) 4%, transparent);
}
.cookbook-saved-fav-btn {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--fg-muted);
  opacity: 0.55;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cookbook-saved-fav-btn:hover,
.cookbook-saved-fav-btn.active {
  color: var(--red);
  opacity: 1;
  background: color-mix(in srgb, var(--red) 10%, transparent);
}
.cookbook-saved-fav-badge {
  flex-shrink: 0;
  background: transparent;
  padding: 0;
}
.cookbook-serve-favorite-model {
  border-left-color: var(--red) !important;
  background: color-mix(in srgb, var(--red) 4%, transparent);
}
.cookbook-serve-fav-badge {
  display: inline-flex;
  align-items: center;
  vertical-align: 1px;
  margin-left: 5px;
  margin-right: 2px;
  background: transparent;
  padding: 0;
}
.cookbook-slot-saved { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent); }
.cookbook-slot-saved:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.cookbook-slot-btn.active { opacity: 1; background: var(--accent); color: #fff; border-color: var(--accent);
}
.cookbook-slot-wrap {
  position: relative;
  display: inline-flex;
}
.cookbook-slot-del {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg, #1a1a1a);
  color: var(--fg-muted);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cookbook-slot-del:hover {
  color: #f44;
  border-color: #f44;
}
.cookbook-card-backend { display: none; }
/* Dependencies row — aligned tags */
.cookbook-dep-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
}
/* Let the deps list fill the available window height instead of being
   capped at the default .doclib-grid 400-px box. */
[data-backend-group="Dependencies"] #cookbook-deps-list {
  flex: 1;
  max-height: none;
}

/* Settings tab: stack the HF token + Servers cards as distinct blocks
   (matches the Download tab's block-per-section layout). */
.cookbook-settings-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  /* Scroll the whole settings panel so the Servers card can grow to hold every
     server (it used to be a cramped internal scroll box that clipped them). */
  overflow-y: auto;
  min-height: 0;
}
.cookbook-settings-stack.hidden { display: none; }
.cookbook-dep-row.cookbook-dep-blocked { opacity: 0.4; }
.cookbook-dep-info { flex: 1; min-width: 0; }
.cookbook-dep-section {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 12px 2px 4px;
}
.cookbook-dep-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.cookbook-dep-section-note {
  font-size: 10px;
  color: color-mix(in srgb, var(--fg) 50%, transparent);
}
.cookbook-dep-subgroup {
  margin: 6px 0 8px 12px;
  padding: 7px 8px 8px;
  border-left: 2px solid color-mix(in srgb, var(--accent, var(--red)) 45%, transparent);
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  border-radius: 0 6px 6px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cookbook-dep-subgroup-title {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0 1px 1px;
  font-size: 10.5px;
  font-weight: 700;
  color: color-mix(in srgb, var(--fg) 78%, transparent);
}
.cookbook-dep-subgroup-title em {
  font-size: 9.5px;
  font-style: normal;
  font-weight: 500;
  color: color-mix(in srgb, var(--fg) 48%, transparent);
}
.cookbook-dep-tag {
  font-size: 9px;
  padding: 0 8px;
  border-radius: 4px;
  white-space: nowrap;
  text-align: center;
  min-width: 62px;
  box-sizing: border-box;
  line-height: 1;
  /* Explicit height so the <button> tags (Install / Installed) are the EXACT
     same height as the sibling <span> tags — Firefox gives buttons a taller
     native box otherwise. Mirrors the server-row tag rule (height:24px). */
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cookbook-dep-target {
  border: 1px solid var(--border);
  color: color-mix(in srgb, var(--fg) 50%, transparent);
}
.cookbook-dep-cat {
  background: color-mix(in srgb, var(--fg) 10%, transparent);
  color: color-mix(in srgb, var(--fg) 60%, transparent);
}
/* Rebuild tag — same look as the LLM category tag, sits to its left. */
.cookbook-dep-rebuild {
  background: color-mix(in srgb, var(--fg) 10%, transparent);
  color: color-mix(in srgb, var(--fg) 75%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 20%, transparent);
  cursor: pointer;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  top: -2px;
}
.cookbook-dep-reinstall {
  top: -3px;
}
.cookbook-dep-rebuild:hover {
  background: color-mix(in srgb, var(--accent, var(--red)) 18%, transparent);
  color: var(--accent, var(--red));
  border-color: color-mix(in srgb, var(--accent, var(--red)) 45%, transparent);
}
.cookbook-dep-installed {
  background: color-mix(in srgb, var(--green, #50fa7b) 18%, transparent);
  color: var(--green, #50fa7b);
  border: 1px solid color-mix(in srgb, var(--green, #50fa7b) 35%, transparent);
  /* Match Install + Installed ▾ so all three variants align in mixed rows. */
  width: 87.7px;
  min-width: 87.7px;
  padding: 0 10px;
  box-sizing: border-box;
}
.cookbook-dep-na {
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  color: color-mix(in srgb, var(--fg) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 16%, transparent);
  cursor: help;
  /* Match other dep tag widths so N/A rows line up with Install / Installed. */
  min-width: 75.85px;
  padding: 0 10px;
  box-sizing: border-box;
}
.cookbook-dep-install {
  background: var(--accent, var(--red));
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  position: relative;
  top: -3px;
  width: 87.7px;
  min-width: 87.7px;
  padding: 0 10px;
  /* Strip the native button box so it's the same height as the sibling tags
     (Firefox renders <button> taller otherwise); height comes from .cookbook-dep-tag. */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.cookbook-dep-build-deps {
  width: auto;
  min-width: 87.7px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.15;
  text-align: center;
  height: auto;
  min-height: 24px;
}
/* The install state is the terminal control in a dependency row. Keep it on
   the far edge even when optional rebuild/category controls are present. */
.cookbook-dep-row > .cookbook-dep-installed,
.cookbook-dep-row > .cookbook-dep-na,
.cookbook-dep-row > .cookbook-dep-install:not(.cookbook-dep-build-deps) {
  margin-left: auto;
}
/* Center the "?" glyph inside the help chip. Without text-align it sits 0.5px
   left of true center because of the character's natural baseline offset. */
.hwfit-help-chip {
  text-align: center;
  padding-left: 0.5px;
}
.cookbook-dep-install:hover { opacity: 0.85; }
/* Installed split button: "Installed" label + separator + ▾ caret; clicking it
   opens the actions menu (Update). Replaces the old ⋮ button. */
.cookbook-dep-installed-btn {
  padding: 0;
  width: 87.7px;
  min-width: 87.7px;
  cursor: pointer;
  font-family: inherit;
  overflow: hidden;
  position: relative;
  top: -3px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.cookbook-dep-installed-btn .cookbook-dep-caret {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  padding: 0 5px;
  font-size: 14px;
  line-height: 1;
  position: relative;
  top: 1px;
  left: 4px;
  opacity: 0.85;
  border-left: 1px solid color-mix(in srgb, var(--green, #50fa7b) 35%, transparent);
}
.hwfit-serve-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 6px;
  margin-bottom: 6px;
}
/* Tighter min on the core-knobs row only so Dtype / TP / GPU Mem / Max
   Seqs fit on one line without crushing Row 1's GPU button strip or
   the Backend picker. */
.hwfit-serve-row-core {
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
}
/* Save / saved-config split aligned to the right end of Row 1 and
   nudged up 4px so it sits flush with the rest of the row. */
.hwfit-serve-row .cookbook-serve-slots {
  justify-self: end;
  position: relative;
  top: -4px;
}
/* The Settings label wraps the Save split — right-align its title text
   so the word "Settings" sits above the right-aligned Save button
   instead of floating off to the left of its grid cell. 8px right
   padding now (16px → 8px) per follow-up tweak, brings the title back
   over the actual Save button instead of overshooting it. */
.hwfit-serve-row label:has(> .cookbook-serve-slots) {
  grid-column: -2 / -1;
  justify-self: end;
  text-align: right;
  padding-right: 0;
}
.hwfit-serve-row label:has(> .cookbook-serve-slots) > span {
  display: inline-block;
  position: relative;
  left: -33px;
}
.hwfit-serve-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
}
.hwfit-serve-topline .hwfit-serve-runtime-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hwfit-serve-preset-row {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  flex: 0 0 auto;
  position: relative;
  top: -6px;
}
.hwfit-serve-row label {
  font-size: 10px;
  color: var(--fg-muted);
  white-space: nowrap;
  letter-spacing: 0.3px;
}
.hwfit-serve-row-core .hwfit-context-label {
  grid-column: span 2;
  width: auto;
  min-width: 0;
  max-width: none;
  justify-self: start;
}
.hwfit-context-control {
  display: block;
  position: relative;
  align-items: center;
  margin-top: 2px;
  width: 100px;
}
.hwfit-context-control .hwfit-sf[data-field="ctx"] {
  min-width: 0;
  width: 100%;
  padding-right: 40px;
}
.hwfit-serve-row-core label:has(.hwfit-sf[data-field="max_seqs"]) {
  position: relative;
  left: -66px;
}
.hwfit-serve-row-core label:has(.hwfit-sf[data-field="gpu_mem"]) {
  position: relative;
  left: -64px;
}
.hwfit-serve-row-core .hwfit-gpus-label {
  position: relative;
  left: -70px;
}
.hwfit-context-calc-btn {
  position: absolute;
  right: 3px;
  top: -4px;
  width: 34px;
  height: 28px;
  min-width: 34px;
  padding: 0;
  font-size: 10px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}
.hwfit-context-calc-btn .spinner-whirlpool {
  width: 12px !important;
  height: 12px !important;
  margin: 0 auto !important;
}
.hwfit-context-calc-btn .ai-spinner-whirlpool {
  width: 12px !important;
  height: 12px !important;
}
@media (min-width: 769px) {
  [data-llama-mode-toggle].mode-toggle.mode-toggle-three .mode-toggle-btn > span {
    top: -6px !important;
  }
  .mode-toggle.mode-toggle-three [data-llama-mode="unified"] > span {
    font-size: 0;
  }
  .mode-toggle.mode-toggle-three [data-llama-mode="unified"] > span::after {
    content: 'Unif';
    font-size: 11px;
  }
}
@media (max-width: 768px) {
  .hwfit-serve-row-core .hwfit-context-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .hwfit-serve-row-core label:has(.hwfit-sf[data-field="max_seqs"]),
  .hwfit-serve-row-core label:has(.hwfit-sf[data-field="gpu_mem"]) {
    left: 0;
  }
  details.hwfit-serve-advanced label:has(.hwfit-sf[data-field="vllm_env_preset"]),
  details.hwfit-serve-advanced label:has(.hwfit-sf[data-field="extra_env"]) {
    grid-column: 1 / -1 !important;
  }
  .hwfit-context-control {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: auto;
  }
  .hwfit-context-control .hwfit-sf[data-field="ctx"] {
    width: 100px;
    padding-right: 6px;
  }
  .hwfit-context-calc-btn {
    position: relative;
    top: -2px;
    left: 2px;
    right: auto;
    flex: 0 0 34px;
    width: 34px;
    min-width: 34px;
  }
}
.hwfit-auto-ctx-note {
  display: block;
  margin-top: 3px;
  font-size: 9px;
  opacity: 0.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Ctx slider — ported from origin/main. Sits in the Scan/Download toolbar
   next to the quant dropdown. Drives _ctxValue() in cookbook-hwfit.js. */
.hwfit-ctx-control {
  height: 28px;
  min-width: 134px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  font-size: 11px;  /* slightly smaller than .cookbook-field-input so Context reads quieter next to Engine/Quant */
}
.hwfit-ctx-control span {
  /* Match Quant/Engine select label style: no uppercase, no letter-spacing. */
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.9;
}
.hwfit-ctx-control > span:first-child {
  font-size: 9.5px;
}
/* Editor-style slider (same look as the gallery editor sliders): thin pill
   rail that fattens on interaction, circular red thumb that grows on hover. */
.hwfit-ctx-control input[type="range"] {
  width: 64px;
  min-width: 64px;
  height: 4px;
  padding: 0;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  /* Hard-coded grey so the rail is GUARANTEED visible regardless of theme —
     every theme-derived color we tried (--fg-muted, --border, accent-bg mix)
     kept blending into the panel background on at least one theme. */
  background: rgba(150, 150, 150, 0.65);
  border-radius: 999px;
  accent-color: var(--red);
  cursor: pointer;
  transition: height 0.15s ease, background 0.15s ease;
}
.hwfit-ctx-control input[type="range"]:hover,
.hwfit-ctx-control input[type="range"]:focus,
.hwfit-ctx-control input[type="range"]:active {
  background: var(--fg);
}
.hwfit-ctx-control input[type="range"]:hover,
.hwfit-ctx-control input[type="range"]:focus,
.hwfit-ctx-control input[type="range"]:active {
  height: 10px;
}
.hwfit-ctx-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--red);
  border: none;
  cursor: pointer;
  transition: width 0.12s ease, height 0.12s ease;
}
.hwfit-ctx-control input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--red);
  border: none;
  cursor: pointer;
  transition: width 0.12s ease, height 0.12s ease;
}
.hwfit-ctx-control input[type="range"]:hover::-webkit-slider-thumb,
.hwfit-ctx-control input[type="range"]:focus::-webkit-slider-thumb,
.hwfit-ctx-control input[type="range"]:active::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
}
.hwfit-ctx-control input[type="range"]:hover::-moz-range-thumb,
.hwfit-ctx-control input[type="range"]:focus::-moz-range-thumb,
.hwfit-ctx-control input[type="range"]:active::-moz-range-thumb {
  width: 18px;
  height: 18px;
}
.hwfit-ctx-control output {
  min-width: 28px;
  text-align: right;
  color: var(--fg);
  font-weight: 600;
}
.hwfit-sf {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
  font-family: inherit;
  font-size: 12px;
  padding: 0 6px;
  height: 28px;
  box-sizing: border-box;
}
.hwfit-sf[data-field="backend"],
.hwfit-sf[data-field="dtype"],
.hwfit-sf[data-field="tp"] {
  height: 32px;
  box-sizing: border-box;
  width: 100%;
}
.hwfit-sf:focus {
  border-color: var(--accent, var(--red));
  outline: none;
}
.hwfit-sf[type="text"] { width: 100%; }
.hwfit-sf.hwfit-sf-wide { width: 100%; }
.hwfit-serve-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}
.hwfit-sf-cb {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--fg-muted);
  cursor: pointer;
  padding: 3px 0;
}