/* Fragment 9/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.
 */
.note-cl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--fg) 30%, transparent);
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.15s;
}
.note-cl-dot:hover { border-color: var(--fg); transform: scale(1.2); }
.note-cl-row.done .note-cl-dot {
  background: var(--accent);
  border-color: var(--accent);
}
.note-cl-row.done .note-cl-text {
  opacity: 0.4;
  background: linear-gradient(currentColor, currentColor) no-repeat;
  background-size: 0 1px;
  background-position: 0 calc(50% - 1px);
  animation: cl-strike 0.32s ease-out forwards;
  transition: opacity 0.2s ease;
}
/* Draws the strikethrough line left-to-right when the row is marked
   done, instead of snapping it in full-width on the same frame. */
@keyframes cl-strike {
  to { background-size: 100% 1px; }
}
.note-cl-text {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  font-size: 12px;
  padding: 3px 0 3px 3px;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  outline: none;
}
.note-cl-text:focus { border-color: var(--fg); }
.note-cl-rm {
  background: none;
  border: none;
  color: var(--fg);
  opacity: 0.3;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  width: 24px;
  height: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  line-height: 1;
}
.note-cl-rm:hover { opacity: 0.8; color: var(--red); }
.note-cl-add {
  background: none;
  border: none;
  color: var(--fg);
  opacity: 0.4;
  cursor: pointer;
  font-size: 11px;
  padding: 4px 0;
  text-align: left;
}

/* ── Calendar ── */
.cal-modal-content { width:min(680px, 94vw); max-height:88vh; overflow-x:hidden; position:relative; }
#calendar-modal .cal-modal-content { animation: none; }
/* Was overflow-y:auto with grid + day-detail flowing naturally. Now uses a
   true splitter layout: the body is a flex column that doesn't scroll
   itself; the grid takes the remaining space and scrolls if needed; the
   day-detail has an explicit height (driven by the splitter drag via
   --cal-detail-h) and shrinks the grid visually as it grows. */
#cal-body { display:flex; flex-direction:column; gap:8px; overflow:hidden; padding:0; min-height:0; }
#cal-body > .cal-grid { flex: 1 1 auto; min-height: 120px; overflow-y: auto; overflow-x: hidden; }
@media (max-width: 768px) {
  /* Let the calendar pane shrink to nothing on mobile so the day-detail
     splitter can be dragged all the way to the top, hiding the calendar
     entirely. Without min-height:0 the grid (or the week-wrap below)
     refuses to shrink past its built-in floor. */
  #cal-body > .cal-grid,
  #cal-body > .cal-wk-wrap {
    min-height: 0;
    max-height: none;
  }
  /* Let the week grid fill the calendar pane and scroll its hours internally
     instead of overflowing #cal-body (which clips it and feels cramped). */
  #cal-body > .cal-wk-wrap {
    flex: 1 1 auto;
    overflow: auto;
  }
}
.cal-toolbar { display:flex; align-items:center; gap:6px; margin-bottom:7px; flex-wrap:wrap; line-height:1; max-width:100%; row-gap:6px; }

/* Quick-add bar: natural-language event creation. Sits directly under
   the toolbar; focused with `Q`; opens the bespoke form pre-filled. */
.cal-quickadd-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 1px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--fg) 3%, var(--bg));
  transition: border-color 0.15s, background 0.15s;
  position: relative;
}
/* Two-tone placeholder hint: "Quick add" in accent, the example in grey, both
   at one low opacity. Overlays the (empty) input; hidden once the user types. */
.cal-quickadd-hint {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--fg);
  opacity: 0.5;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
}
.cal-quickadd-hint .qa-hint-accent { color: var(--accent, var(--red)); }
/* ↵ enter glyph in the hint — makes it obvious the field submits on Enter. */
.cal-quickadd-hint .qa-hint-enter { margin-left: auto; flex: 0 0 auto; color: var(--accent, var(--red)); opacity: 0.8; }
/* Cycling example text fades out before swap, then fades back in. */
.cal-quickadd-hint .qa-hint-example {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: italic;
  transition: opacity 0.18s ease;
}
.cal-quickadd-hint .qa-hint-example.qa-hint-fade { opacity: 0; }
.cal-title-hint {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(calc(-50% - 2px));
  display: none;
  align-items: center;
  gap: 7px;
  font-size: 18px;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  color: color-mix(in srgb, var(--fg) 42%, transparent);
}
.cal-hero-title:placeholder-shown ~ .cal-title-hint { display: inline-flex; }
.cal-title-hint .cal-title-enter-ico { color: var(--accent, var(--red)); flex-shrink: 0; }
/* Pure-CSS toggle: hide the hint as soon as the field has real text (no
   per-keystroke JS, so typing never triggers a re-render / focus loss). */
.cal-quickadd-input:not(:placeholder-shown) ~ .cal-quickadd-hint { display: none; }
.cal-quickadd-row:focus-within {
  border-color: color-mix(in srgb, var(--accent, var(--fg)) 55%, var(--border));
  background: color-mix(in srgb, var(--fg) 5%, var(--bg));
}
.cal-quickadd-icon {
  color: color-mix(in srgb, var(--accent, var(--fg)) 80%, transparent);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0.7;
}
.cal-quickadd-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--fg);
  font-family: inherit;
  font-size: 12px;
  height: 22px;
  padding: 0;
}
.cal-quickadd-status {
  font-size: 10px;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}
.cal-toolbar > *, .cal-toolbar-nav > *, .cal-toolbar-right > * { vertical-align:middle; }
.cal-toolbar-nav { display:inline-flex; align-items:center; gap:4px; flex-wrap:wrap; }
.cal-toolbar-right {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  flex: 1 1 100%;
  width: 100%;
  margin-left: 0;
  margin-top: 6px;
  flex-wrap: wrap;
}
.cal-title { font-size:13px; font-weight:600; white-space:nowrap; height:24px; line-height:30px; padding:0 6px; display:inline-block; vertical-align:middle; box-sizing:border-box; }
.cal-toolbar-clock {
  margin-left: 8px;
  color: var(--accent, var(--red));
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
button.cal-nav { background:color-mix(in srgb, var(--fg) 6%, transparent); border:1px solid var(--border); color:var(--fg); border-radius:5px; padding:0 8px; height:24px; line-height:22px; cursor:pointer; font-size:11px; font-family:inherit; box-sizing:border-box; vertical-align:middle; }
button.cal-nav:hover { background:color-mix(in srgb, var(--fg) 12%, transparent); }
button.cal-nav.cal-toolbar-arrow {
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
  border-radius: 50%;
  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: 1;
  opacity: 0.84;
}
.cal-toolbar-arrow-glyph {
  position: relative;
  top: -1px;
  line-height: 1;
}
@media (max-width: 768px) {
  button.cal-nav.cal-toolbar-arrow { display: inline-flex !important; }
  .cal-toolbar-nav {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }
  #cal-next { margin-left: auto; }
}
.cal-week-start-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  width: max-content;
  padding: 0;
  height: 24px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
}
.cal-week-start-btn {
  box-sizing: border-box;
  height: 22px !important;
  min-height: 22px !important;
  margin-top: 0 !important;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: color-mix(in srgb, var(--fg) 68%, transparent);
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  line-height: 20px;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.cal-settings-actions {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
#cal-settings-panel .cal-week-start-toggle {
  display: flex;
  margin-left: auto;
}
.cal-settings-sync-status {
  position: relative;
  top: 2px;
  font-size: 11px;
  opacity: 0.6;
}
.cal-settings-sync-status.is-error {
  color: var(--red);
  opacity: 1;
}
.cal-week-start-btn:hover {
  color: var(--fg);
  background: color-mix(in srgb, var(--fg) 8%, transparent);
}
.cal-week-start-btn.active,
.cal-week-start-btn.active:hover {
  color: var(--fg);
  border-color: color-mix(in srgb, var(--accent, var(--red)) 40%, var(--border));
  background: color-mix(in srgb, var(--accent, var(--red)) 16%, transparent);
}
.cal-side-nav {
  position: absolute;
  top: var(--cal-side-nav-y, 50%);
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
  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);
  cursor: pointer;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  font-family: inherit;
  font-size: 24px;
  line-height: 28px;
  padding: 0 0 3px;
  transition: opacity 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.cal-modal-content:hover .cal-side-nav,
.cal-side-nav:focus-visible {
  opacity: 0.84;
  pointer-events: auto;
}
.cal-side-nav:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--bg) 76%, var(--fg) 24%);
  transform: translateY(-50%) scale(1.04);
}
button.cal-today-btn { font-size:10px; opacity:0.5; }
button.cal-add-btn { background:var(--accent); color:#fff; border:none; border-radius:50%; width:24px; height:24px; line-height:22px; font-size:18px; cursor:pointer; flex-shrink:0; padding:0; box-sizing:border-box; font-family:inherit; vertical-align:middle; text-align:center; }
button.cal-add-btn.cal-add-btn-text {
  width:auto; min-width:0;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0 10px 0 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  line-height: 1;
  margin-top: 0;
  transition: background 0.15s, border-color 0.15s;
}
button.cal-add-btn.cal-add-btn-text:hover {
  background: color-mix(in srgb, var(--fg) 14%, transparent);
  border-color: var(--accent);
  opacity: 1;
}
.cal-add-plus {
  font-size: 16px;
  line-height: 1;
  color: var(--accent, var(--red));
  font-weight: 500;
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding-bottom: 2px;
}
button.cal-add-btn.cal-add-btn-text:hover .cal-add-plus {
  transform: rotate(180deg);
}
.cal-add-label { font-size:11px; font-weight:600; line-height:1; opacity:0.85; }
/* Small variant of the toolbar's +New button. Inherits the .cal-add-btn-text
   styles (pill with "+" + "New" + spring-rotate on the +), so the
   animation is identical. Just shrunk a bit. */
button.cal-add-btn.cal-add-btn-text.cal-add-btn-sm {
  height: 20px;
  border-radius: 10px;
  /* At rest: tight, equal padding around the "+" so it sits centred
     with no trailing gap. On hover the right pad and the flex gap grow
     to make room for the revealed "New". */
  padding: 0 5px;
  gap: 0;
  transition: padding 0.25s ease, gap 0.25s ease, background 0.15s, border-color 0.15s;
}
/* Don't touch .cal-add-plus on the small variant — the toolbar +New is
   the reference and we want the same rotation centre / motion. The label
   is shrunk and hidden until hover so the pill is compact at rest. */
button.cal-add-btn.cal-add-btn-text.cal-add-btn-sm .cal-add-label {
  font-size: 10px;
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.25s ease, opacity 0.18s ease, margin-left 0.25s ease;
}
button.cal-add-btn.cal-add-btn-text.cal-add-btn-sm:hover .cal-add-label {
  max-width: 40px;
  margin-left: 3px;
  opacity: 0.85;
}
.cal-add-btn:hover { opacity:0.85; }

/* Mobile: bump the +New pill and the +/- zoom buttons up to a tap-friendly
   size so they're easy to hit with a thumb. */
@media (max-width: 768px) {
  /* Toolbar +New (relocated by JS into the quickadd row on mobile) */
  button.cal-add-btn.cal-add-btn-text {
    height: 36px;
    border-radius: 18px;
    padding: 0 14px 0 12px;
    gap: 6px;
    flex-shrink: 0;
  }
  /* Day-detail +New: just a "+" on mobile — drop the label entirely. */
  button.cal-add-btn.cal-add-btn-text.cal-add-btn-sm {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    padding: 0;
    gap: 0;
    justify-content: center;
  }
  button.cal-add-btn.cal-add-btn-text.cal-add-btn-sm .cal-add-label {
    display: none;
  }
  button.cal-add-btn.cal-add-btn-text.cal-add-btn-sm .cal-add-plus {
    font-size: 18px;
    padding-bottom: 0;
  }
  .cal-add-plus { font-size: 22px; padding-bottom: 1px; }
  .cal-add-label { font-size: 13px; }
  .cal-wk-zoom {
    width: 36px;
    height: 36px;
    font-size: 20px;
    border-radius: 8px;
    opacity: 0.85;
  }
  /* The +New button sits as a sibling of the quickadd row inside a flex
     wrapper, so it's clearly outside the input's bordered box. The row
     itself keeps its own styling. */
  .cal-quickadd-wrap {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin: 0 0 8px;
  }
  .cal-quickadd-wrap > #cal-quickadd-row {
    flex: 1;
    min-width: 0;
    margin: 0;
  }
  .cal-quickadd-wrap > .cal-add-btn-text {
    align-self: stretch;
    flex-shrink: 0;
  }
  /* Nudge the "+" glyph up one pixel on the round day-detail button so it
     sits visually centred inside the circle. */
  button.cal-add-btn.cal-add-btn-text.cal-add-btn-sm .cal-add-plus {
    transform: translateY(-1px);
  }
  /* Event form: bigger Create / Cancel buttons so they're easy to tap. */
  .cal-form-actions button.cal-btn {
    height: 44px;
    padding: 0 20px;
    font-size: 14px;
    border-radius: 8px;
    min-width: 96px;
  }
  /* Left-align the day/month + tags row in the day-detail panel and
     the calendar/category chip row so they sit flush against the
     left edge on a narrow screen. */
  .cal-detail-header {
    justify-content: flex-start;
    gap: 12px;
  }
  .cal-filters {
    justify-content: flex-start;
  }
}

/* Refresh button spin — driven by JS toggling .cal-syncing on the button.
   transform-box + transform-origin keep the rotation pivoted at the SVG's
   own centre so it spins in place instead of orbiting / drifting up. */
#cal-sync svg,
#email-lib-refresh-btn svg { display: block; transform-box: fill-box; transform-origin: 50% 50%; }
/* Brief checkmark flash after a refresh completes. Lasts ~900ms in JS;
   the small bounce + accent color give a clear "done" cue. */
#cal-sync.cal-sync-done svg,
#email-lib-refresh-btn.email-lib-refresh-done svg {
  color: var(--accent, #2ea043);
  animation: refresh-check-pop 0.32s ease-out;
}
@keyframes refresh-check-pop {
  0%   { transform: scale(0.55); opacity: 0.4; }
  60%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
#cal-sync.cal-syncing svg,
#email-lib-refresh-btn.email-lib-refreshing svg { animation: spin 0.6s linear infinite; }
.email-undone-toggle.active,
.email-attach-toggle.active {
  background: color-mix(in srgb, var(--accent, var(--red)) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent, var(--red)) 50%, transparent);
  color: var(--accent, var(--red));
  font-weight: 600;
}
/* Hide the gallery-style reader-btn labels on desktop — only the mobile
   @media block re-displays them under each icon. Desktop keeps compact
   icon-only reader buttons. */
.reader-btn-label {
  display: inline-block;
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0.85;
}

/* Inline attachment-filter toggle nested inside the search input. The
   input has padding-right:34px set inline so its text doesn't slide
   under the button. */
.email-search-wrap { display: flex; align-items: center; }
/* Keep the email search input and the adjacent "Select" button identical in
   height regardless of base-vs-mobile overrides — pin both explicitly. */
.email-search-row .memory-search-input {
  height: 32px;
  min-height: 32px;
  box-sizing: border-box;
}
.email-search-row .email-search-select-btn {
  height: 32px;
  min-height: 32px;
  box-sizing: border-box;
  margin-top: 6px;
  flex-shrink: 0;
}
/* Select moved into the dropdown row — dock it to the right and match the
   selects' vertical nudge (.memory-sort-select has top:3px). */
.memory-category-filters .email-filter-select-btn,
.memory-category-filters .email-filter-refresh-btn {
  position: relative;
  top: 3px;
  flex-shrink: 0;
}
.memory-category-filters .email-filter-refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
}
.memory-category-filters .email-reminders-clear-btn {
  position: relative;
  top: -2px;
  flex-shrink: 0;
}
.email-attach-toggle-inline {
  position: absolute !important;
  right: 4px !important;
  top: 50%;
  transform: translateY(calc(-50% - 5px));
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: none !important;
  opacity: 0.55;
}
.email-attach-toggle-inline:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--fg) 10%, transparent) !important;
}
.email-attach-toggle-inline.active {
  opacity: 1;
  background: color-mix(in srgb, var(--accent, var(--red)) 16%, transparent) !important;
  color: var(--accent, var(--red)) !important;
}
/* Inline undone-toggle nested inside the search input, sits LEFT of the
   attach toggle. Same visual treatment. */
.email-undone-toggle-inline {
  position: absolute !important;
  right: 34px !important;
  top: 50%;
  transform: translateY(calc(-50% - 3px));
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: none !important;
  opacity: 0.55;
}
.email-reminder-toggle-inline {
  position: absolute !important;
  right: 64px !important;
  top: 50%;
  transform: translateY(calc(-50% - 3px));
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: none !important;
  opacity: 0.55;
}
.email-reminder-toggle-inline:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--fg) 10%, transparent) !important;
}
.email-reminder-toggle-inline.active {
  opacity: 1;
  background: color-mix(in srgb, var(--accent, var(--red)) 16%, transparent) !important;
  color: var(--accent, var(--red)) !important;
}
.email-undone-toggle-inline:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--fg) 10%, transparent) !important;
}
.email-undone-toggle-inline.active {
  opacity: 1;
  background: color-mix(in srgb, var(--accent, var(--red)) 16%, transparent) !important;
  color: var(--accent, var(--red)) !important;
}
/* Round (circular) toggles in the search bar, matching the app's default icon
   buttons. Always fully visible (not dimmed until hover). */
.email-attach-toggle-inline,
.email-undone-toggle-inline,
.email-reminder-toggle-inline { border-radius: 50% !important; opacity: 1 !important; }
.email-search-options-btn {
  position: absolute !important;
  right: 5px !important;
  top: 50% !important;
  transform: translateY(calc(-50% - 5px));
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 0 !important;
  color: inherit !important;
  opacity: 0.7;
  z-index: 2;
}
.email-search-options-btn:hover,
.email-search-options-btn.active {
  opacity: 1;
  background: color-mix(in srgb, var(--accent, var(--red)) 14%, transparent) !important;
  color: var(--accent, var(--red)) !important;
}
.email-search-options-menu {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  z-index: 75;
  min-width: 140px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel, var(--bg));
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.email-search-options-title {
  padding: 5px 9px 4px;
  color: var(--fg-muted, var(--fg));
  font-size: 10px;
  font-weight: 600;
  opacity: 0.65;
  white-space: nowrap;
}
.email-search-options-menu button {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 10px;
  height: auto;
  min-height: 0;
  padding: 6px 8px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  cursor: pointer;
}
.email-search-options-menu button:hover,
.email-search-options-menu button.active {
  background: color-mix(in srgb, var(--accent, var(--red)) 10%, transparent);
  color: var(--accent, var(--red));
}
.email-search-option-icon {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  opacity: 0.5;
}
.email-search-option-icon svg { width: 14px; height: 14px; }
.email-search-date-panel {
  width: 220px;
  padding: 6px 7px 5px;
  border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}
.email-search-date-panel input {
  width: 100%;
  height: 26px;
  box-sizing: border-box;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 5px;
  outline: none;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
}
.email-search-date-panel input:focus { border-color: var(--accent, var(--red)); }
.email-search-date-actions { display: flex; justify-content: flex-end; gap: 5px; }
.email-search-options-menu .email-search-date-actions [data-email-date-apply] {
  color: var(--accent, var(--red));
  background: color-mix(in srgb, var(--accent, var(--red)) 12%, transparent);
}
@media (max-width: 768px) {
  .email-search-options-menu button {
    min-height: 44px;
    padding: 12px 12px !important;
    font-size: 14px !important;
    gap: 10px !important;
  }
  .email-search-options-menu .email-search-option-icon {
    width: 18px;
    height: 18px;
  }
  .email-search-options-menu .email-search-option-icon svg {
    width: 16px;
    height: 16px;
  }
}
/* Mobile: enlarge the icons inside the inline search-bar toggles
   (done / attachment / reminders) — buttons themselves stay the same,
   only the SVG glyph scales up so it's tappable + visible. */
@media (max-width: 768px) {
  .email-filter-btn {
    height: 30px;
    min-height: 30px;
    font-size: 12px;
    top: -6px;
    padding: 0 9px;
  }
  .email-folder-btn {
    top: -4px;
  }

  #email-lib-folder,
  .memory-category-filters .email-filter-select-btn,
  .memory-category-filters .email-filter-refresh-btn,
  .memory-category-filters .email-filter-settings-btn {
    height: 30px !important;
    min-height: 30px !important;
    box-sizing: border-box;
  }

  .memory-category-filters .email-filter-refresh-btn,
  .memory-category-filters .email-filter-settings-btn {
    width: 30px;
    padding: 0 !important;
  }
  .memory-category-filters .email-filter-settings-btn > svg {
    width: 15px;
    height: 15px;
  }

  .email-search-row .memory-search-input {
    height: 38px;
    min-height: 38px;
  }

  #email-lib-chip-bar {
    padding-right: 42px !important;
    padding-left: 30px !important;
    gap: 5px !important;
  }

  .email-lib-chip-bar-icon {
    width: 14px !important;
    height: 14px !important;
    left: 9px !important;
  }

  #email-lib-search {
    font-size: 14px !important;
    min-width: 88px !important;
    top: 0 !important;
  }

	  #email-lib-search::placeholder {
	    font-size: 14px !important;
	  }

	  #email-lib-chip-bar.has-email-lib-pills #email-lib-search {
	    min-width: 24px !important;
	    flex: 1 1 24px !important;
	  }

  .email-lib-pill {
    min-height: 24px !important;
    height: 24px !important;
    line-height: 24px !important;
    font-size: 12px !important;
    padding: 0 6px 0 8px !important;
    max-width: 180px !important;
  }

  .email-lib-pill svg {
    width: 14px !important;
    height: 14px !important;
  }

  .email-lib-pill-x {
    font-size: 13px !important;
    top: -4.5px !important;
  }

  .email-lib-filter-pill {
    min-height: 24px !important;
    height: 24px !important;
    line-height: 24px !important;
    gap: 4px !important;
    padding: 0 6px 0 8px !important;
  }

  .email-lib-filter-pill .email-lib-pill-icon {
    width: 17px !important;
    height: 17px !important;
  }

  .email-lib-filter-pill svg {
    width: 18px !important;
    height: 18px !important;
  }

  .email-lib-filter-pill .email-lib-pill-x {
    font-size: 13px !important;
    top: -4.5px !important;
  }

  .email-tags-toggle-inline {
    right: 6px;
    height: 28px !important;
    min-width: 42px;
    padding: 0 8px !important;
    font-size: 11px !important;
    transform: translateY(calc(-50% - 3px));
  }

  .email-attach-toggle-inline {
    right: 56px !important;
    width: 32px !important;
    height: 32px !important;
    transform: translateY(calc(-50% - 3px));
  }

  .email-undone-toggle-inline {
    right: 92px !important;
    width: 32px !important;
    height: 32px !important;
    transform: translateY(calc(-50% - 3px));
  }

  .email-reminder-toggle-inline {
    right: 128px !important;
    width: 32px !important;
    height: 32px !important;
    transform: translateY(calc(-50% - 3px));
  }

  .email-attach-toggle-inline svg,
  .email-undone-toggle-inline svg,
  .email-reminder-toggle-inline svg,
  .email-filter-refresh-btn svg {
    width: 16px !important;
    height: 16px !important;
  }
}
.email-accounts-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 6px;
}
.email-accounts-row .doclib-desc { flex-shrink: 0; }
/* Only the direct-child compose button gets pushed right; nested chips
   inside #email-lib-accounts pack to the left as normal flex items. */
.email-accounts-row > .memory-toolbar-btn { flex-shrink: 0; margin-left: auto; }
.email-account-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.email-account-chip.email-account-has-unread {
  border-color: color-mix(in srgb, var(--accent, var(--red)) 42%, var(--border));
  background: color-mix(in srgb, var(--accent, var(--red)) 10%, transparent);
  color: color-mix(in srgb, var(--accent, var(--red)) 86%, var(--fg));
}
.email-account-unread-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent, var(--red));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--red)) 14%, transparent);
  flex: 0 0 auto;
}
.email-account-chip-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.email-account-unread-count {
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  color: var(--accent, var(--red));
  opacity: 0.9;
  position: relative;
  top: 0;
}
.email-account-away-label {
  color: var(--accent, var(--red));
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
}
.email-accounts-loading-whirlpool {
  width: 14px;
  height: 14px;
  margin: 3px 4px 0 1px;
  display: inline-flex;
  flex: 0 0 auto;
}
.email-accounts-loading-label {
  font-size: 10px;
  opacity: 0.55;
  position: relative;
  top: 2px;
  white-space: nowrap;
}
.email-loading-with-label {
  /* Fill the email list grid so the spinner lands in the middle of the
     email window rather than the top of the empty list section. */
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  pointer-events: none;
}
.date-section-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 9px 4px;
  color: color-mix(in srgb, var(--fg) 58%, transparent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
  user-select: none;
}
.date-section-header::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: color-mix(in srgb, var(--border) 72%, transparent);
}
#session-list .date-section-header {
  padding-left: 10px;
  padding-right: 8px;
  cursor: pointer;
}
#session-list .date-section-header.collapsed {
  color: color-mix(in srgb, var(--fg) 36%, transparent);
}
#session-list .date-section-header.collapsed::after {
  opacity: 0.45;
}
#session-list .date-section-header:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 2px;
  border-radius: 5px;
}
/* Bootstrap row shown while the session list hydrates, and on load failure.
   Reads as a normal list row but is not selectable. */
.session-list-bootstrap {
  cursor: default;
  pointer-events: none;
}
#email-lib-grid .date-section-header {
  padding: 10px 5px 3px;
}
#email-lib-modal .email-lib-sync-status {
  flex: 0 0 auto;
  min-height: 14px;
  padding: 1px 4px 0;
  font-size: 10.5px;
  line-height: 1.2;
  text-align: center;
  opacity: 0.58;
  color: var(--muted-text, currentColor);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  top: 4px;
}
@media (max-width: 768px) {
  #email-lib-modal .email-lib-sync-status {
    min-height: 13px;
    padding-right: 5px;
    font-size: 10px;
  }
}
/* Nudge the subject + sender/date meta line 4px right inside each
   email card so they don't sit flush against the read/unread/done
   markers on the left. Includes #email-lib-modal selector to
   override the expanded card's `padding: 4px 0 6px` shorthand
   which was zeroing out the title's padding-left. */
#email-lib-grid .email-card-titlerow,
#email-lib-grid .memory-item-meta,
#email-lib-modal .doclib-card-expanded .email-card-titlerow {
  padding-left: 4px;
}
.email-loading-label {
  font-size: 11px;
  opacity: 0.6;
}

/* Refresh button now lives top-right in the modal header next to the close X.
   Borderless (matches the close X), and a fixed square box so the spin and the
   refresh→checkmark icon swap never change its size or nudge neighbours. */
.email-lib-header-actions #email-lib-refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: none;
  background: none;
  padding: 0;
  width: 24px;
  height: 24px;
}
/* Bump the icon up on mobile for a bigger visual — but keep the button BOX at
   24px so it never exceeds the header's natural height (the title/close set
   that). A taller box would grow the sticky header and push the list down. */
@media (max-width: 768px) {
  .email-lib-header-actions #email-lib-refresh-btn svg {
    width: 17px;
    height: 17px;
  }
}
.cal-view-toggle {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
  vertical-align: middle;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  line-height: 1;
}
.cal-view-btn + .cal-view-btn { border-left: 1px solid var(--border); }
.cal-view-btn:hover { opacity: 0.75; }
.cal-view-btn.active {
  background: color-mix(in srgb, var(--fg) 12%, transparent);
  color: var(--accent, var(--red));
  opacity: 1;
  font-weight: 600;
}
/* Toolbar holds only the toggle button; the chip row renders below the
   toolbar on its own line and wraps freely. */
.cal-filters {
  display:flex;
  gap:6px;
  margin:6px 0 8px;
  flex-wrap:wrap;
  padding:6px 8px;
  border:1px solid color-mix(in srgb, var(--fg) 8%, transparent);
  border-radius:8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--fg) 4%, transparent), transparent),
    color-mix(in srgb, var(--fg) 2.5%, var(--bg));
  box-shadow:inset 0 1px 0 color-mix(in srgb, #fff 4%, transparent);
}
/* Round the native color-input swatch in calendar settings. The outer
   <input> wraps a colored fill drawn by the browser; we need to round both
   the wrapper and the fill so it actually appears circular. */
.cal-s-color { border-radius: 50%; overflow: hidden; }
.cal-filter-item { display:inline-flex; align-items:center; gap:4px; cursor:pointer; font-size:10px; padding:2px 8px; line-height:1.4; border-radius:10px; background:color-mix(in srgb, var(--bg) 72%, transparent); border:1px solid color-mix(in srgb, var(--fg) 12%, transparent); transition:opacity 0.15s, background 0.15s, border-color 0.15s, transform 0.15s; }
.cal-filter-item:hover { background:color-mix(in srgb, var(--fg) 10%, transparent); }
.cal-filter-item.cal-filter-important { font-weight:700; color:#e5a33a; border-color:color-mix(in srgb, #e5a33a 40%, transparent); }
/* Match the toolbar's other buttons (cal-nav, cal-view-btn, cal-add-btn-text):
   24px tall, 11px font, 5px corners. */
.cal-filter-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  border: 1px solid var(--border);
  color: var(--fg);
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
  font-weight: 500;
  padding: 0 10px;
  height: 24px;
  line-height: 1;
  border-radius: 5px;
  box-sizing: border-box;
  vertical-align: middle;
  opacity: 0.65;
  position: relative;
  top: -3px;
}
.cal-filter-toggle:hover { opacity: 1; background: color-mix(in srgb, var(--fg) 12%, transparent); }
.cal-filter-toggle-glyph {
  display: inline-block;
  position: relative;
  top: 0;
  margin-right: 3px;
  color: var(--accent, var(--red));
}
.cal-filter-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
/* The grid is now a flex column: one row of weekday headers + six
   .cal-week-row rows. Each row holds the 7 day cells in its own
   internal grid plus the absolute-positioned multi-day overlays.
   --bars on a week-row is the number of multi-day events overlapping
   it; cells in that row use it to reserve top padding so the bar
   overlays don't cover the day numbers or single-event rows. */
.cal-grid { display:flex; flex-direction:column; gap:1px; background:color-mix(in srgb, var(--fg) 8%, transparent); border-radius:6px; overflow:hidden; }
.cal-week-headers { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; }
.cal-week-row { position:relative; display:grid; grid-template-columns:repeat(7,1fr); gap:1px; }
.cal-weekday { background:color-mix(in srgb, var(--fg) 5%, var(--bg)); text-align:center; font-size:10px; font-weight:600; opacity:0.4; padding:5px 0; }
.cal-day {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--fg) 2%, transparent), transparent 34px),
    var(--bg);
  min-height:78px;
  padding:3px;
  cursor:pointer;
  position:relative;
  transition:background 0.12s, box-shadow 0.12s;
  overflow:hidden;
}
.cal-day:hover { background:color-mix(in srgb, var(--fg) 5%, var(--bg)); }
.cal-day.cal-today {
  box-shadow: inset 0 0 0 2px var(--accent, var(--red));
  background: var(--bg);
  border-radius: 8px;
}
.cal-day.cal-selected:not(.cal-today) .cal-day-num {
  color: var(--accent, var(--fg));
  opacity: 1;
  font-weight: 700;
}
.cal-day.cal-drag-over { background:color-mix(in srgb, var(--accent) 18%, var(--bg)); }
.cal-day.cal-range-select { background:color-mix(in srgb, var(--accent, var(--red)) 25%, var(--bg)); box-shadow:inset 0 0 0 1px var(--accent, var(--red)); }
.cal-day-num { font-size:10px; font-weight:600; display:block; margin-bottom:1px; opacity:0.7; line-height:1.2; }
.cal-dots { display:flex; flex-direction:row; align-items:center; gap:2px; flex-wrap:nowrap; margin-bottom:1px; height:6px; }
.cal-dot { width:5px; height:5px; border-radius:50%; display:inline-block; cursor:grab; flex-shrink:0; }
.cal-dot-more { font-size:7px; opacity:0.4; }
.cal-event-row {
  display:flex;
  align-items:center;
  gap:4px;
  padding:2px 4px;
  border-radius:4px;
  cursor:grab;
  line-height:1.2;
  margin-bottom:2px;
  min-height:17px;
  background:color-mix(in srgb, var(--fg) 5%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--fg) 7%, transparent);
  animation:cal-event-enter 0.16s ease-out both;
  transition:background 0.15s, box-shadow 0.15s, transform 0.15s;
}
.cal-event-row:hover { background:color-mix(in srgb, var(--fg) 10%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--fg) 14%, transparent); transform:translateY(-1px); }
.cal-event-row-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; box-shadow:0 0 0 1px color-mix(in srgb, var(--bg) 80%, transparent); }
.cal-event-row-time { font-size:10px; opacity:0.72; font-variant-numeric:tabular-nums; flex-shrink:0; font-weight:600; }
.cal-event-row-name { font-size:10px; opacity:0.96; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; font-weight:600; }
.cal-event-reminder {
  display: inline-flex;
  width: 12px;
  height: 12px;
  margin-left: 5px;
  vertical-align: -2px;
  color: color-mix(in srgb, var(--fg) 58%, transparent);
  opacity: 0.9;
  flex: 0 0 auto;
}
.cal-event-reminder svg {
  width: 100%;
  height: 100%;
  display: block;
}
.cal-event-row .cal-event-reminder {
  width: 10px;
  height: 10px;
  margin-left: 4px;
}
.cal-event-source {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:12px;
  height:12px;
  margin-left:5px;
  border-radius:50%;
  font-size:7px;
  font-weight:800;
  line-height:1;
  color:var(--cal-event-fg, var(--fg));
  background:color-mix(in srgb, currentColor 16%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 20%, transparent);
  vertical-align:1px;
}
.cal-event-source svg {
  width: 10px;
  height: 10px;
  display: block;
}
.cal-event-row .cal-event-source {
  width:11px;
  height:11px;
  font-size:7px;
  margin-left:4px;
  color:color-mix(in srgb, var(--fg) 72%, transparent);
}
.cal-multiday .cal-event-reminder,
.cal-wk-allday-event .cal-event-reminder {
  color: var(--cal-event-fg, currentColor);
  opacity: 0.88;
}
.cal-multiday .cal-event-source,
.cal-wk-allday-event .cal-event-source {
  color: var(--cal-event-fg, currentColor);
}
.cal-event-more { font-size:9px; opacity:0.55; padding-left:6px; }
/* Multi-day bar — positioned as an absolute overlay inside its
   .cal-week-row so it spans uninterrupted across every column it
   covers. --col is the starting column (0–6), --span is the number
   of days it covers within the row, --slot stacks parallel bars. */
.cal-multiday {
  position: absolute;
  /* Fractional offsets let timed events that cross midnight render at
     true proportional width. start-frac shifts the left edge into the
     first day; end-frac trims the right edge inside the last day.
     All-day events default to (0, 1) and still fill whole columns. */
  left: calc((var(--col, 0) + var(--start-frac, 0)) * (100% / 7));
  width: calc(
    (var(--span, 1) - var(--start-frac, 0) - (1 - var(--end-frac, 1)))
    * (100% / 7)
  );
  top: calc(2px + var(--slot, 0) * 12px);
  height: 12px;
  font-size: 9px;
  line-height: 12px;
  padding: 0 5px;
  border-radius: 4px;
  color: var(--cal-event-fg, #fff);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: grab;
  opacity: 0.98;
  z-index: 2;
  pointer-events: auto;
  box-shadow: 0 1px 2px color-mix(in srgb, #000 18%, transparent);
}
/* Splitter between the month/week grid and the day-tasks panel — drag
   vertically to give the day panel more room. Height clamped by the
   `--cal-detail-h` variable set on #cal-body by the splitter drag JS. */
.cal-splitter {
  height: 8px;
  margin: 6px -10px 0;
  cursor: row-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
  touch-action: none;
}
/* Mobile: fat hitbox so the splitter is easy to grab with a thumb,
   without changing how the grip itself looks. */
@media (max-width: 768px) {
  .cal-splitter {
    height: 24px;
    margin-top: 0;
    margin-bottom: 0;
  }
  .cal-splitter-grip {
    width: 56px;
    height: 4px;
  }
}
.cal-splitter-grip {
  width: 42px;
  height: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--fg) 25%, transparent);
  transition: background 0.12s;
}
.cal-splitter:hover .cal-splitter-grip,
.cal-splitter-dragging .cal-splitter-grip {
  background: var(--accent, var(--red));
}
.cal-day-detail {
  margin-top: 4px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
  height: var(--cal-detail-h, 240px);
  overflow-y: auto;
  overscroll-behavior: contain;
  flex-shrink: 0;
}
.cal-detail-header { display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:600; margin-bottom:6px; padding-right:8px; }
.cal-empty { font-size:11px; opacity:0.3; padding:4px 0; }
.cal-event-item { display:flex; gap:9px; padding:8px 9px; border-radius:6px; cursor:pointer; align-items:flex-start; background:color-mix(in srgb, var(--fg) 3.5%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--fg) 6%, transparent); margin-bottom:4px; }
.cal-event-item:hover { background:color-mix(in srgb, var(--fg) 8%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--fg) 12%, transparent); }
.cal-event-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; margin-top:4px; box-shadow:0 0 0 1px color-mix(in srgb, var(--bg) 80%, transparent); }
.cal-event-info { flex:1; min-width:0; }
.cal-event-name { font-size:13px; font-weight:700; line-height:1.25; color:color-mix(in srgb, var(--fg) 96%, transparent); overflow-wrap:anywhere; }
.cal-event-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 8px;
  border: 1px solid;
  margin-left: 6px;
  vertical-align: 1px;
  opacity: 0.85;
  white-space: nowrap;
}
.cal-event-time { font-size:11px; opacity:0.68; line-height:1.35; margin-top:2px; font-weight:500; }
.cal-event-loc { font-size:11px; opacity:0.58; line-height:1.35; margin-top:1px; }
/* ── Week view: hour grid ──────────────────────────────────────────
   Vertical hour rail on the left, 7 day columns on the right with their
   own all-day strip and an absolute-positioned hour grid below it. */
.cal-wk-wrap {
  display: flex;
  flex-direction: row;
  gap: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--fg) 3%, transparent), transparent 120px),
    var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  /* The wrap itself scrolls so the hour rail and day columns move
     together; column headers and the rail spacer are sticky-pinned. */
  overflow: auto;
  max-height: calc(100vh - 220px);
  min-height: 360px;
  position: relative;
}
.cal-wk-now-below-hint {
  position: absolute;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--accent, var(--red));
  pointer-events: none;
  z-index: 38;
}
@media (max-width: 768px) {
  .cal-wk-wrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
  .cal-wk-wrap > .cal-wk-rail,
  .cal-wk-wrap > .cal-wk-cols {
    transform: translateY(var(--wk-edge-pull, 0));
  }
  .cal-wk-wrap.cal-wk-edge-release > .cal-wk-rail,
  .cal-wk-wrap.cal-wk-edge-release > .cal-wk-cols {
    transition: transform 0.14s cubic-bezier(0.2, 0.75, 0.25, 1);
  }
  .cal-wk-wrap.cal-wk-pull-top {
    border-top-color: color-mix(in srgb, var(--accent, var(--red)) 65%, var(--border));
  }
  .cal-wk-wrap.cal-wk-pull-bottom {
    border-bottom-color: color-mix(in srgb, var(--accent, var(--red)) 65%, var(--border));
  }
}
.cal-wk-rail {
  flex: 0 0 56px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--fg) 2%, var(--bg));
  position: sticky;
  left: 0;
  z-index: 5;
}
.cal-wk-rail-spacer {
  /* Match the 32px day header. The 24px all-day row gets its own spacer
     below, so the zoom controls sit high without shifting the hour grid. */
  height: 32px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--fg) 2%, var(--bg));
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 4px;
}
.cal-wk-rail-allday-spacer {
  height: 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: sticky;
  top: 32px;
  z-index: 8;
  background: color-mix(in srgb, var(--fg) 1.5%, var(--bg));
}
.cal-wk-zoom {
  position: relative;
  top: -3px;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  border-radius: 50%;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0.55;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}
.cal-wk-zoom:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--fg) 8%, var(--bg));
  border-color: color-mix(in srgb, var(--accent, var(--fg)) 50%, var(--border));
}
.cal-wk-rail-cell {
  font-size: 11px;
  color: color-mix(in srgb, var(--fg) 55%, transparent);
  padding: 4px 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 5%, transparent);
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
}
.cal-wk-cols {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  position: relative;
}
.cal-wk-col {
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cal-wk-col:first-child { border-left: none; }
.cal-wk-col-head {
  height: 32px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--fg) 3%, var(--bg));
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 5%, transparent);
  position: sticky;
  top: 0;
  z-index: 40;
}
/* Today on a Sunday still wins the accent treatment. */
.cal-wk-col.cal-wk-today.cal-wk-sun .cal-wk-col-head { background: color-mix(in srgb, var(--accent, var(--fg)) 12%, var(--bg)); }
.cal-wk-col.cal-wk-today.cal-wk-sun .cal-wk-dn,
.cal-wk-col.cal-wk-today.cal-wk-sun .cal-wk-dt { color: var(--accent, var(--fg)); }
.cal-wk-dn { font-weight: 600; opacity: 0.6; }
.cal-wk-allday {
  height: 24px;
  padding: 2px 4px;
  display: flex;
  flex-direction: row;
  gap: 2px;
  align-items: center;
  background: color-mix(in srgb, var(--fg) 1.5%, var(--bg));
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  position: sticky;
  top: 32px;
  z-index: 39;
}
.cal-wk-allday-event {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 4px;
  color: var(--cal-event-fg, var(--fg));
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Hour grid body */
.cal-wk-grid {
  position: relative;
  flex: 0 0 auto;
  cursor: cell;
  user-select: none;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--wk-hour-px, 52px) / 2 - 1px),
      color-mix(in srgb, var(--fg) 4%, transparent) calc(var(--wk-hour-px, 52px) / 2),
      transparent calc(var(--wk-hour-px, 52px) / 2 + 1px)
    );
}
.cal-wk-cell {
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 6%, transparent);
  box-sizing: border-box;
}
.cal-wk-cell:hover { background: color-mix(in srgb, var(--fg) 3%, transparent); }
/* "Now" line */
.cal-wk-now {
  position: absolute;
  left: 0; right: 0;
  height: 0;
  border-top: 2px solid color-mix(in srgb, var(--accent, var(--red, #f87171)) 90%, transparent);
  pointer-events: none;
  z-index: 7;
  filter: drop-shadow(0 1px 3px color-mix(in srgb, var(--accent, var(--red)) 35%, transparent));
}
/* Event blocks */
.cal-wk-block {
  position: absolute;
  left: calc((var(--lane, 0) * (100% / var(--lane-count, 1))) + 2px);
  width: calc((100% / var(--lane-count, 1)) - 4px);
  right:auto;
  border-left: 4px solid var(--fg);
  border-radius: 5px;
  padding: 5px 7px 7px;
  font-size: 12px;
  line-height: 1.3;
  cursor: pointer;
  /* `clip` preserves the rounded-card boundary without creating an overflow
     container, allowing the label inside to stick to the week scroller. */
  overflow: clip;
  z-index: 2;
  box-shadow: 0 2px 6px color-mix(in srgb, #000 14%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--fg) 7%, transparent);
  animation:cal-event-enter 0.18s ease-out both;
  transition: width 0.2s cubic-bezier(0.2, 0.75, 0.25, 1), height 0.2s cubic-bezier(0.2, 0.75, 0.25, 1), filter 0.12s, transform 0.12s, box-shadow 0.16s;
  box-sizing: border-box;
}
.cal-wk-block:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 5px 14px color-mix(in srgb, #000 20%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--fg) 14%, transparent); }
.cal-wk-block-label {
  position: sticky;
  top: 37px;
  z-index: 1;
  min-width: 0;
  pointer-events: none;
}
.cal-wk-has-allday .cal-wk-block-label {
  top: 61px;
}
.cal-wk-block-name { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; color:color-mix(in srgb, var(--fg) 96%, transparent); }
.cal-wk-block-time { font-size: 10.5px; opacity: 0.82; font-variant-numeric: tabular-nums; margin-top: 2px; font-weight:600; }
@media (hover: hover) and (pointer: fine) {
  .cal-wk-block.cal-wk-block-crowded.cal-wk-expand-left {
    left: auto;
    right: calc(100% - var(--lane-right) + 2px);
  }
  .cal-wk-block.cal-wk-block-crowded:hover {
    width: var(--hover-width, 170px);
    height: var(--hover-fit-height, var(--hover-height, var(--event-height))) !important;
    overflow: clip;
    z-index: 30;
    filter: brightness(1.08);
    transform: translateY(var(--hover-shift-y, -2px));
    box-shadow: 0 8px 22px color-mix(in srgb, #000 34%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--fg) 18%, transparent);
  }
  .cal-wk-block.cal-wk-block-crowded.cal-wk-hover-width-only:hover {
    height: var(--event-height) !important;
    transform: translateY(-1px);
  }
  .cal-wk-block.cal-wk-block-crowded:hover .cal-wk-block-label {
    position: absolute;
    top: 5px;
    width: calc(var(--hover-width, 170px) - 18px);
    animation: cal-wk-hover-label-reveal 0.2s ease-out both;
  }
  .cal-wk-block.cal-wk-block-crowded.cal-wk-expand-left:hover .cal-wk-block-label {
    left: auto;
    right: 7px;
  }
  .cal-wk-block.cal-wk-block-crowded.cal-wk-expand-right:hover .cal-wk-block-label {
    left: 7px;
    right: auto;
  }
  .cal-wk-block.cal-wk-block-crowded:hover .cal-wk-block-name {
    display: block;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 768px) {
  /* Mobile week view: the hour rail already shows the time, so drop it from the
     card and let the title wrap to fill the freed space (more readable text). */
  .cal-wk-block-time { display: none; }
  .cal-wk-block-name {
    white-space: normal;
    line-height: 1.15;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }
  .cal-wk-block.cal-wk-mobile-expanded.cal-wk-expand-left {
    left: auto;
    right: calc(100% - var(--lane-right) + 2px);
  }
  .cal-wk-block.cal-wk-mobile-expanded {
    width: var(--hover-width, 170px);
    height: var(--hover-fit-height, var(--hover-height, var(--event-height))) !important;
    overflow: clip;
    z-index: 30;
    filter: brightness(1.08);
    transform: translateY(var(--hover-shift-y, 0));
    box-shadow: 0 8px 22px color-mix(in srgb, #000 34%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--fg) 18%, transparent);
  }
  .cal-wk-block.cal-wk-mobile-expanded .cal-wk-block-label {
    position: absolute;
    top: 5px;
    width: calc(var(--hover-width, 170px) - 18px);
    animation: cal-wk-hover-label-reveal 0.2s ease-out both;
  }
  .cal-wk-block.cal-wk-mobile-expanded.cal-wk-expand-left .cal-wk-block-label {
    left: auto;
    right: 7px;
  }
  .cal-wk-block.cal-wk-mobile-expanded.cal-wk-expand-right .cal-wk-block-label {
    left: 7px;
    right: auto;
  }
  .cal-wk-block.cal-wk-mobile-expanded .cal-wk-block-name {
    display: block;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    -webkit-line-clamp: unset;
  }
}
/* Resize handle: a 6 px hit zone along the block's bottom edge. The
   visible 2-px stripe only shows on hover so blocks at rest stay clean. */
.cal-wk-block-resize {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 0;
  height: 6px;
  cursor: ns-resize;
  z-index: 3;
}
/* Drag-to-create ghost */
.cal-wk-ghost {
  position: absolute;
  left: 2px;
  right: 2px;
  background: color-mix(in srgb, var(--accent, var(--fg)) 28%, transparent);
  border: 1px dashed color-mix(in srgb, var(--accent, var(--fg)) 70%, transparent);
  border-radius: 4px;
  pointer-events: none;
  z-index: 3;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent, var(--fg));
  font-variant-numeric: tabular-nums;
}
.cal-wk-slot-selected {
  background: color-mix(in srgb, var(--accent, var(--fg)) 20%, var(--bg));
  border-style: solid;
  border-color: var(--accent, var(--fg));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, var(--fg)) 20%, transparent);
  overflow: visible;
  pointer-events: auto;
  cursor: pointer;
}
.cal-wk-slot-resize {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -7px;
  height: 14px;
  z-index: 4;
  cursor: ns-resize;
  touch-action: none;
  pointer-events: auto;
}
.cal-year { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
.cal-year-month { background:color-mix(in srgb, var(--fg) 3%, var(--bg)); border:1px solid var(--border); border-radius:6px; padding:6px; cursor:pointer; transition:background 0.15s, border-color 0.15s, transform 0.15s; }
.cal-year-month:hover { background:color-mix(in srgb, var(--fg) 8%, var(--bg)); border-color:var(--accent); transform:translateY(-1px); }
.cal-year-month-title { font-size:11px; font-weight:600; text-align:center; margin-bottom:4px; opacity:0.7; }
.cal-year-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:1px; }
.cal-year-wd { font-size:7px; text-align:center; opacity:0.3; padding:1px 0; }
.cal-year-cell { font-size:8px; text-align:center; padding:2px 0; min-height:14px; border-radius:2px; transition:transform 0.12s, background 0.12s; }
.cal-year-day:hover { background:var(--accent, var(--red)); color:#fff; opacity:1; transform:scale(1.15); font-weight:700; z-index:2; position:relative; }
.cal-year-today { color:var(--accent, var(--red)); font-weight:700; opacity:1; }
.cal-year-has { opacity:1; background:color-mix(in srgb, var(--accent) 15%, transparent); }
.cal-year-has.cal-year-today { background:color-mix(in srgb, var(--accent, var(--red)) 25%, transparent); }
.cal-loading { display:flex; justify-content:center; padding:40px 0; }
.cal-badge { background:var(--accent); border-radius:50%; width:6px; height:6px; margin-left:auto; display:inline-block; flex-shrink:0; }
/* Search input — in-panel variant lives inside the day-detail panel and
   spans its width; no width animation since growing/shrinking on every
   keystroke would jitter beside the events list. */
.cal-search-input { background:color-mix(in srgb, var(--fg) 5%, var(--bg)); border:1px solid var(--border); border-radius:5px; padding:0 8px; height:24px; color:var(--fg); font-size:11px; font-family:inherit; width:120px; box-sizing:border-box; transition:width 0.15s; }
.cal-search-input:focus { outline:none; border-color:var(--accent); width:180px; }
.cal-search-input.cal-day-search { width:100%; margin-bottom:0; transition:none; padding-left: 28px; }
/* Wrap for the search input so the magnifying-glass icon can be absolute-
   positioned inside the field. */
.cal-search-wrap {
  position: relative;
  display: block;
  margin-bottom: 6px;
}
.cal-search-wrap .cal-search-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--accent, var(--red));
}
.cal-day-search-meta { font-size:10px; opacity:0.5; margin:0 2px 6px; }
.cal-search-results { display:flex; flex-direction:column; gap:4px; }
.cal-search-count { font-size:10px; opacity:0.5; padding:4px 2px 8px; }
/* Agenda view */
.cal-agenda { display:flex; flex-direction:column; gap:12px; flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding-left:4px; }
.cal-agenda-day { display:flex; flex-direction:column; gap:5px; position:relative; padding-left:14px; }
.cal-agenda-date { font-size:12px; font-weight:800; opacity:0.72; padding:5px 2px 3px; border-bottom:1px solid var(--border); }
.cal-agenda-today-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent, var(--red)) 18%, transparent);
  color: var(--accent, var(--red));
  vertical-align: 1px;
}
.cal-agenda-empty { font-size:11px; opacity:0.4; padding:8px; font-style:italic; }
.cal-agenda-event {
  display:flex;
  gap:9px;
  padding:9px 10px;
  border-radius:6px;
  cursor:pointer;
  align-items:center;
  position:relative;
  background:color-mix(in srgb, var(--fg) 3.5%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--fg) 6%, transparent);
  animation:cal-event-enter 0.18s ease-out both;
  transition:background 0.15s, box-shadow 0.15s, transform 0.15s;
}
.cal-agenda-event:hover {
  background:color-mix(in srgb, var(--fg) 8%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--fg) 12%, transparent);
  transform:translateX(2px);
}
.cal-agenda-event .cal-event-more,
.cal-event-item .cal-event-more { opacity:0; transition:opacity 0.15s; }
.cal-event-item { position:relative; }

/* ── Personal Assistant ── */
.sidebar-assistant-entry { gap: 6px; min-height: 29px; box-sizing: border-box; align-items: center; }
.sidebar-assistant-entry .sidebar-action-icon { position: relative; left: -2px; }
#sidebar-assistant-gear:hover { opacity: 0.8 !important; }
.assistant-settings-form { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px 2px; }
.assistant-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: color-mix(in srgb, var(--fg) 70%, transparent); }
.assistant-field > span { font-size: 11px; opacity: 0.6; }
.assistant-field input[type="text"],
.assistant-field input[type="time"],
.assistant-field select,
.assistant-field textarea {
  background: color-mix(in srgb, var(--fg) 5%, var(--bg));
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 7px 10px;
  color: var(--fg);
  font-size: 12px;
  font-family: inherit;
  box-sizing: border-box;
}
.assistant-field textarea { resize: vertical; min-height: 60px; }
.assistant-field input:focus,
.assistant-field select:focus,
.assistant-field textarea:focus { outline: none; border-color: var(--accent, var(--red)); }
.assistant-field-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.assistant-field-row > .assistant-field { flex: 1 1 180px; }
.assistant-field-check { flex-direction: row !important; align-items: center; gap: 6px; padding-bottom: 7px; }
.assistant-checkins { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border); }
.assistant-checkins h5 { margin: 0 0 2px; font-size: 12px; font-weight: 600; opacity: 0.8; }
.assistant-checkin-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--fg) 3%, transparent);
}
.assistant-checkin-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.assistant-checkin-head input[type="text"],
.assistant-checkin-head input[type="time"] {
  background: color-mix(in srgb, var(--fg) 5%, var(--bg));
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  color: var(--fg);
  font-size: 12px;
  font-family: inherit;
}
.assistant-checkin-head input[type="text"] { flex: 1; min-width: 120px; }
.assistant-checkin-head input[type="time"] { width: 90px; }
.assistant-checkin-run {
  background: none;
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: inherit;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.assistant-checkin-run:hover { opacity: 1; }
.assistant-checkin-prompt {
  background: color-mix(in srgb, var(--fg) 5%, var(--bg));
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  color: var(--fg);
  font-size: 12px;
  font-family: inherit;
  resize: vertical;
  min-height: 48px;
}
.assistant-checkin-prompt:focus { outline: none; border-color: var(--accent, var(--red)); }
.assistant-checkin-meta { font-size: 10px; opacity: 0.45; }
.assistant-settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.assistant-tools-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-top: 4px;
}
.assistant-tool-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.assistant-tool-group-label {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.5;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  width: 100%;
  margin-bottom: 1px;
}
.assistant-tool-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
  user-select: none;
}
.assistant-tool-item:hover {
  background: color-mix(in srgb, var(--fg) 5%, transparent);
}
.assistant-tool-item:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.assistant-tool-item input[type="checkbox"] {
  width: 12px;
  height: 12px;
  margin: 0;
}

/* Empty state */
.cal-empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 20px; text-align:center; gap:10px; }
.cal-empty-title { font-size:14px; font-weight:600; opacity:0.8; }
.cal-empty-msg { font-size:12px; opacity:0.5; max-width:320px; line-height:1.5; margin-bottom:8px; }
.cal-allday-switch { margin:0; flex-shrink:0; }
/* Stack the "All day" label above its toggle so it doesn't get squeezed /
   truncated next to the date inputs in the row. */
.cal-allday-ctrl { display:flex; flex-direction:column; align-items:center; gap:3px; flex-shrink:0; }
.cal-allday-label { font-size:10px; opacity:0.5; white-space:nowrap; line-height:1; }
.cal-form { display:flex; flex-direction:column; gap:8px; }
.cal-form-title { font-size:13px; font-weight:600; margin-bottom:2px; }
.cal-title-wrap { position: relative; }
/* Calendar-picker select sits 2px higher; its border-left/background tint is
   set in JS to the chosen calendar's colour. */
.cal-f-cal-select { position: relative; top: -4px; }

/* ── Bespoke event form ────────────────────────────────────────────
   Big clock-face date/time hero with the title under it. Details panel
   stays collapsed until the title gets focus or "Add details" is clicked.
*/
.cal-form-bespoke {
  position: relative;
  width: min(720px, calc(100% - 24px));
  max-width: none;
  margin: 12px auto;
  padding: 18px 28px 14px;
  box-sizing: border-box;
  background: var(--bg);
  /* Optional per-event tint set by JS via --ev-color. When unset, falls
     back to the theme's neutral border so the card looks like normal. */
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--fg) 6%, transparent);
  transition: border-color 0.18s, box-shadow 0.18s;
}
/* When a colour is picked, lift the card with a soft tinted border + glow
   so the choice is unmistakable. */
.cal-form-bespoke[style*="--ev-color"] {
  border-color: color-mix(in srgb, var(--ev-color) 55%, var(--border));
  box-shadow: 0 8px 28px color-mix(in srgb, var(--ev-color) 22%, transparent);
}
.cal-form-bespoke[style*="--ev-color"] .cal-btn-primary {
  background: var(--ev-color);
  border-color: var(--ev-color);
}
.cal-form-bespoke.cal-form-bg-image .cal-btn-primary {
  background: var(--accent, var(--red));
  border-color: var(--accent, var(--red));
  color: var(--bg);
}
.cal-form-close {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none; color: var(--fg);
  opacity: 0.35; cursor: pointer; font-size: 20px; line-height: 1;
  padding: 4px 8px; border-radius: 6px;
}
.cal-form-close:hover { opacity: 0.9; background: color-mix(in srgb, var(--fg) 8%, transparent); }
.cal-form-mobile-cancel { display: none; }

/* "Today is …" header pinned at the top of the form. Keeps you oriented
   even when the event date you're picking is way off in the future. */
.cal-form-today {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.45;
  margin-bottom: 0;
}

/* Hero — clock face + date label. Spacing between the two lives entirely
   on the clock's bottom margin so it's predictable. */
.cal-hero {
  display: flex; flex-direction: column; align-items: center;
  gap: 0; margin-bottom: 12px;
}
.cal-hero-time {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: ui-monospace, SFMono-Regular, "Menlo", "Consolas", monospace;
  font-variant-numeric: tabular-nums;
  font-size: 56px;
  letter-spacing: 0.02em;
  font-weight: 200;
  color: var(--fg);
  line-height: 1;
  /* Behaves like a button — strip native chrome but keep it tappable. */
  background: none;
  border: none;
  /* Pill that reads as a real hit target for a 56-px clock face.
     Top padding kept tight so the clock sits close to the "Today is" line. */
  padding: 6px 38px 18px;
  margin: 0 0 24px;
  border-radius: 18px;
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
/* The clock is a `<button>` and a global `button:hover` rule paints
   every button's background on hover. Suppress it explicitly. */
.cal-hero-time:hover { background: transparent; border-color: transparent; }
.cal-hero-clock { font-feature-settings: "tnum"; display: inline-flex; align-items: baseline; }
/* Per-segment hover so it's clear hh vs mm are individually clickable. */
.cal-hero-clock-hh, .cal-hero-clock-mm {
  display: inline-block;
  border-radius: 6px;
  padding: 0 2px;
  transition: background 0.12s;
}
.cal-hero-clock-hh:hover, .cal-hero-clock-mm:hover {
  background: color-mix(in srgb, var(--fg) 9%, transparent);
}
.cal-hero-sep { padding: 0 2px; opacity: 0.55; pointer-events: none; }
.cal-hero-ampm {
  font-size: 14px;
  letter-spacing: 0.12em;
  opacity: 0.55;
  font-weight: 500;
  text-transform: uppercase;
}
.cal-hero-date {
  font-size: 16px;
  opacity: 0.6;
  letter-spacing: 0.04em;
  background: none;
  border: none;
  color: inherit;
  font-family: inherit;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  margin: 7px 0 0;          /* extra nudge below the clock */
  transition: background 0.15s, opacity 0.15s;
}
.cal-hero-date:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); opacity: 0.85; }

/* Title input — flat, large, no chrome until focused */
.cal-input.cal-hero-title {
  font-size: 18px;
  text-align: left;
  padding: 10px 12px 10px 0;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 18%, transparent);
  border-radius: 0;
  margin-bottom: 4px;
}

/* Details panel — animated reveal via max-height + opacity. */
.cal-form-bespoke .cal-form-details {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 240ms ease, opacity 180ms ease, margin 220ms ease;
  margin-top: 0;
}
/* The detail children themselves keep the existing flex/gap rules from
   the regular .cal-form, so we don't restyle inputs/rows here. */
.cal-form-bespoke .cal-form-details > * + * { margin-top: 8px; }


/* Location row: input + Apple Maps pin link. Pin only lights up when the
   field has content; clicking opens maps.apple.com (native Maps app on
   Apple devices, web fallback elsewhere). All theme vars. */
.cal-loc-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.cal-loc-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}
.cal-loc-hint {
  position: absolute;
  inset: 0 auto 0 10px;
  display: none;
  align-items: center;
  gap: 5px;
  pointer-events: none;
  color: color-mix(in srgb, var(--fg) 42%, transparent);
  font-size: 12px;
}
.cal-loc-map {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--accent, var(--red));
  background: color-mix(in srgb, var(--fg) 5%, var(--bg));
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.cal-loc-map:hover { background: color-mix(in srgb, var(--accent, var(--red)) 14%, var(--bg)); border-color: var(--accent, var(--red)); }

@media (max-width: 520px) {
  .cal-hero-time { font-size: 44px; }
  .cal-form-bespoke { margin: 16px 12px; padding: 32px 16px 14px; }
  .cal-form-mobile-cancel {
    display: inline-flex;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    color: var(--fg);
    opacity: 0.72;
    cursor: pointer;
    z-index: 3;
    -webkit-tap-highlight-color: transparent;
  }
  .cal-form-mobile-cancel:active {
    opacity: 1;
    background: color-mix(in srgb, var(--accent, var(--red)) 14%, var(--bg));
    border-color: color-mix(in srgb, var(--accent, var(--red)) 55%, var(--border));
  }
}
.cal-input { background:color-mix(in srgb, var(--fg) 5%, var(--bg)); border:1px solid var(--border); border-radius:5px; padding:7px 10px; color:var(--fg); font-size:12px; width:100%; box-sizing:border-box; }
.cal-input:focus { outline:none; border-color:var(--accent); }
.cal-input-time { width:auto; flex:1; }
.cal-form-row { display:flex; gap:8px; align-items:center; }
.cal-form-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:4px; }
button.cal-btn { background:color-mix(in srgb, var(--fg) 8%, transparent); border:1px solid var(--border); color:var(--fg); border-radius:5px; padding:0 14px; height:28px; font-size:11px; font-weight:500; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; transition:background 0.15s, border-color 0.15s; }
button.cal-btn:hover { background:color-mix(in srgb, var(--fg) 14%, transparent); }
button.cal-btn.cal-btn-primary { background:var(--accent, var(--red)); color:var(--bg); border-color:var(--accent, var(--red)); }
button.cal-btn.cal-btn-primary:hover { opacity:0.9; background:var(--accent, var(--red)); }
@media (max-width: 600px) {
  .cal-modal-container { max-width:100vw; width:100vw; border-radius:0; max-height:100vh; height:100vh; }
  .cal-day { min-height:58px; padding:3px; }
  .cal-day-num { font-size:10px; }
  .cal-event-preview { display:none; }
  .cal-multiday { font-size:8.5px; padding:0 4px; }
  .cal-event-row { min-height:16px; padding:2px 3px; gap:3px; }
  .cal-event-row-name,
  .cal-event-row-time { font-size:9.5px; }
  /* Two-row toolbar on mobile:
        Row 1 — Title (full width)
        Row 2 — [← Today →] [view toggle] [settings/sync/filters/+New]
     Title gets its own row so it isn't squeezed to nothing when the
     right-side group is wide. The .cal-toolbar-nav (which now only
     contains the title since JS moved the date-nav to the right) is
     width:100% so it forces a wrap before .cal-toolbar-right. */
  .cal-toolbar {
    gap: 4px;
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .cal-toolbar-nav {
    flex-wrap: nowrap;
    flex: 1 1 100%;
    min-width: 0;
    justify-content: flex-start;
  }
  .cal-toolbar-right {
    margin-top: 6px;
    margin-left: 0;
    flex-wrap: nowrap;
    flex-shrink: 1;
    overflow-x: auto;
    scrollbar-width: none;
    width: 100%;
  }
  .cal-quickadd-row {
    top: -2px;
  }
  .cal-toolbar-right::-webkit-scrollbar { display: none; }
  .cal-title {
    font-size: 13px;
    padding: 0 4px;
  }
  #cal-side-prev,
  #cal-side-next {
    display: none !important;
  }
  .cal-nav { padding: 2px 5px; font-size: 10px; }
  .cal-view-btn { padding: 2px 5px; font-size: 9px; }
  .cal-filters {
    gap: 3px;
    margin: 0 0 6px;
    padding: 0;
  }
  .cal-filter-toggle { top: -5px; }
  .cal-filter-item { font-size: 9px; padding: 1px 5px; }
  .cal-year { grid-template-columns:repeat(3, 1fr); gap:6px; }
  .cal-year-cell { font-size:7px; }
}

/* ═══ Research Panel ═══ */
/* .research-overlay inherits from .modal — no extra layout needed */
.research-pane {
  display:flex; flex-direction:column;
  padding:10px; box-sizing:border-box;
  font-size:12px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Research hydration replaces picker options after mount. Do not inherit
     the generic scale-in animation: scaling a changing-height frame reads as
     a bounce, particularly next to the document split pane. */
  animation: research-pane-enter 0.18s ease-out both;
}
/* Synapse signal traveling around the outer edge of the pane. The pane keeps a
   flat background; only this thin border ring remains animated. */
.research-pane::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--research-orbit-angle, 0deg),
    transparent 0deg,
    transparent 300deg,
    color-mix(in srgb, var(--accent, var(--red)) 70%, transparent) 335deg,
    var(--accent, var(--red)) 350deg,
    color-mix(in srgb, var(--accent, var(--red)) 70%, transparent) 358deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}
@media (prefers-reduced-motion: reduce) {
  .research-pane::after { animation: none; opacity: 0.4; }
}
.research-pane-header {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:6px; cursor:grab; user-select:none;
}
.research-pane-title-icon {
  display: inline-flex;
  align-items: center;
}
.research-pane-title-icon svg { display: block; }
.research-pane-header-actions {
  display: flex; align-items: center; gap: 2px;
  margin-left: auto;
}
.research-pane-body {
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  /* Flat surface — matches Library's .modal-body (no inset sub-window).
     The outer .research-pane already provides the 10px padding + border. */
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 12px;
  color: var(--fg);
}
/* Research uses the same flat tab navigation as Memory and Skills. Each view
   owns its scrolling so switching tabs never leaves the form or result list
   clipped by the modal body. */
.research-tabs {
  flex: 0 0 auto;
  margin: -4px -4px 0;
  padding: 0 4px;
}
.research-tabs .memory-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.research-tabs .memory-tab[hidden] { display: none !important; }
.research-tabs .memory-tab svg {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  opacity: 0.75;
}
.research-tab-panel {
  flex: 1 1 auto;
}
.research-tab-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 28px;
  margin: 0 0 6px;
}
.research-tab-heading > .memory-count {
  font-size: 10px;
  opacity: 0.55;
  font-weight: normal;
}
.research-tab-heading #research-history-clear { margin-left: auto; }
/* Match the .admin-card surface used in Cookbook (Download / Serve sections):
   var(--panel) bg with var(--border) and rounded corners. */
.research-new-job {
  flex-shrink: 0;
}
.research-query {
  width:100%; resize:vertical; min-height:80px; max-height:240px;
  /* Match the rest of the app's inputs (var(--bg) page tone) rather than
     the darker panel tone — keeps the input readable on the dark sub-window. */
  background: var(--bg); color: var(--fg);
  border:1px solid var(--border); border-radius:6px;
  padding:8px 10px; font-size:12px; font-family:inherit;
  box-sizing:border-box;
  margin-top: 6px;
}
.research-query:focus { outline:none; border-color:var(--accent-primary, var(--red)); }
.research-settings-row {
  display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.research-setting {
  display:flex; flex-direction:column; flex:1; min-width:104px;
}
.research-setting:has(#research-rounds),
.research-setting:has(#research-category) {
  position: relative;
  top: 0;
}
.research-setting:has(#research-search-provider),
.research-setting:has(#research-endpoint) {
  position: relative;
  top: 5px;
}
.research-setting:has(#research-model) {
  position: relative;
  top: 1px;
}
.research-setting-label {
  font-size:9px; text-transform:uppercase; letter-spacing:0.5px;
  color:var(--accent, var(--red)); opacity:1; margin-bottom:2px;
}
.research-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.research-picker { position: relative; min-width: 0; }
.research-picker-btn {
  width: 100%; height: 28px; padding: 0 8px;
  display: flex; align-items: center; gap: 6px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px;
  font: inherit; font-size: 12px; cursor: pointer; text-align: left;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.research-picker-btn:hover,
.research-picker.open .research-picker-btn {
  border-color: color-mix(in srgb, var(--accent, var(--red)) 62%, var(--border));
  background: color-mix(in srgb, var(--accent, var(--red)) 5%, var(--bg));
}
.research-picker-current {
  min-width: 0; flex: 1; display: flex; align-items: center; gap: 6px;
}
.research-picker-icon {
  width: 15px; height: 15px; flex: 0 0 15px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent, var(--red));
}
.research-picker-icon svg { width: 15px; height: 15px; display: block; }
.research-picker-btn > svg {
  width: 9px; height: 9px; flex-shrink: 0; opacity: 0.5;
  transition: transform 0.14s ease;
}
.research-picker-menu {
  position: absolute; z-index: 120;
  top: calc(100% + 4px); left: 0;
  width: max-content; min-width: 100%; max-width: min(280px, 82vw);
  max-height: 230px; overflow-y: auto;
  padding: 4px;
  background: var(--panel, var(--bg));
  border: 1px solid var(--border); border-radius: 7px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.32);
}
.research-picker-option {
  width: 100%; min-height: 31px; padding: 6px 7px;
  display: flex; align-items: center; gap: 7px;
  border: 0; border-radius: 5px;
  background: transparent; color: var(--fg);
  font: inherit; font-size: 12px; text-align: left; cursor: pointer;
  white-space: nowrap;
}
.research-picker-option:hover,
.research-picker-option:focus {
  background: color-mix(in srgb, var(--fg) 7%, transparent);
}
.research-picker-option.active {
  color: var(--accent, var(--red));
  background: color-mix(in srgb, var(--accent, var(--red)) 10%, transparent);
}
.research-picker-check { margin-left: auto; opacity: 0; color: var(--accent, var(--red)); }
.research-controls-row {
  display:flex; align-items:center; gap:8px; margin-top:10px;
}
.research-start-btn {
  margin-left:auto;
  display:flex; align-items:center; gap:5px;
  height:28px; padding:0 14px; border:none; border-radius:6px;
  background:var(--accent-primary, var(--red)); color:var(--bg);
  font-size:12px; font-weight:600; cursor:pointer;
  transition:opacity 0.15s;
}
.research-start-btn:hover { opacity:0.85; color:var(--fg); }
.research-start-btn:hover svg { color:inherit; }
.research-start-btn:disabled, .research-start-btn.research-start-busy {
  opacity:0.7; cursor:wait;
}
.research-start-spinner {
  display:inline-block; width:11px; height:11px; vertical-align:-1px; margin-right:4px;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  animation: spin 0.7s linear infinite;
}
.research-category-row {
  display:flex; gap:4px; margin-top:8px; flex-wrap:wrap;
}
/* Mobile: keep the category chips on ONE row (scroll horizontally) instead of
   wrapping to two rows. */
@media (max-width: 600px) {
  .research-category-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .research-category-row::-webkit-scrollbar { display: none; }
  .research-cat { flex-shrink: 0; white-space: nowrap;   position: relative; top: -8px;
}
}
/* Match .doclib-chip exactly so categories feel like document filter tags. */
.research-cat {
  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, color 0.15s;
  position: relative;
  top: -4px;
}
.research-cat:hover { border-color: var(--red); }
.research-cat.active {
  background: color-mix(in srgb, var(--red) 15%, transparent);
  border-color: color-mix(in srgb, var(--red) 40%, transparent);
  color: var(--red);
}
/* Match the Cookbook "Trending models" toggle (a left-aligned memory-toolbar-btn
   with an arrow + label) instead of the old tiny-uppercase borderless text. */
.research-settings-toggle {
  display:flex; align-items:center; gap:6px;
  width:100%; text-align:left;
  height:24px; padding:0 8px; margin-top:10px;
  background:none; border:1px solid var(--border); border-radius:4px;
  color:color-mix(in srgb, var(--fg) 60%, transparent);
  font-size:11px; font-family:inherit; cursor:pointer;
  transition:all 0.15s;
}
.research-settings-toggle:hover { color:var(--fg); border-color:var(--fg); }
.research-settings-chevron { display:inline-flex; transition:transform 0.2s; margin-left:auto; }
.research-settings-toggle.collapsed .research-settings-chevron { transform:rotate(-90deg); }
/* When settings is EXPANDED, merge the toggle bar visually into the
   settings body so it's clear the row below is the toggle's content
   (no gap, no doubled border between them). */
.research-settings-toggle:not(.collapsed) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}
.research-settings-toggle:not(.collapsed) + .research-settings-row {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top-color: color-mix(in srgb, var(--border) 50%, transparent);
}
.research-add-btn {
  height:28px;
  padding:0 10px;
  color:var(--fg);
  font-size:11px;
}
.research-add-btn:hover { background:color-mix(in srgb, var(--border) 30%, transparent); }

/* Popover anchored to the Start-All button — pick parallel vs sequential
   without the heavy "Run N jobs" modal. Drops down by default, flips to
   drop-up when there's no room below (the .rrm-up modifier is added by
   the JS that positions it). */
.research-run-mode-popover {
  position: fixed;
  z-index: 12000;
  min-width: 200px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  padding: 5px;
  font-size: 13px;
  animation: rrm-pop-in 0.12s ease-out both;
  transform-origin: top right;
}
@keyframes rrm-pop-in {
  from { opacity: 0; transform: scale(0.96) translateY(-2px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.research-run-mode-popover .research-run-mode-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--fg);
  font-family: inherit;
  padding: 10px 13px;
  border-radius: 6px;
  cursor: pointer;
}
.research-run-mode-popover .research-run-mode-row svg { flex-shrink: 0; opacity: 0.8; }
.research-run-mode-popover .rrm-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--fg);
}
.research-jobs-list {
  flex:1; min-height:0; overflow-y:auto; padding:6px 0;
  display: flex; flex-direction: column; gap: 6px;
}
.research-empty {
  text-align:center; padding:30px 14px;
  font-size:12px; opacity:0.4;
}
/* Cards match Library's .doclib-card: subtle fg 3% tint over var(--bg). */
.research-job-card {
  --cat-color: #db8576;
  margin: 0;
  padding: 9px 10px 9px 11px;
  background: color-mix(in srgb, var(--cat-color) 4%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--cat-color) 25%, var(--border));
  border-left: 3px solid var(--cat-color);
  border-radius: 8px;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.research-job-card:hover {
  background: color-mix(in srgb, var(--cat-color) 7%, var(--bg));
  border-color: color-mix(in srgb, var(--cat-color) 40%, var(--border));
}
.research-job-card.running {
  background: color-mix(in srgb, var(--cat-color) 8%, var(--bg));
  box-shadow: inset 0 1px color-mix(in srgb, var(--cat-color) 14%, transparent);
}
.research-job-card.queued { --cat-color: var(--fg-dim, #888); }
.background-tools-status.agent-thread { min-width: 0; width: calc(100% - 32px); max-width: 640px; }
.chat-research-card .agent-thread-header { width: 100%; min-height: 44px; background: none; border: 0; border-radius: 0; text-align: left; font-family: inherit; }
.chat-research-card .agent-thread-header:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.chat-research-card.agent-thread-node .agent-thread-dot { top: 23px; }
.chat-research-card .agent-thread-status { min-width: 0; }
.chat-research-background { display: inline-flex; align-items: center; gap: 5px; margin-left: 0; white-space: nowrap; flex-shrink: 0; }
.chat-research-background .spinner-whirlpool { margin: 0 !important; }
.chat-research-background canvas { transform: translateY(-2px); }
.chat-research-card .research-job-query { white-space: normal; overflow-wrap: anywhere; font-size: 12px; }
.chat-research-detail { margin-top: 5px; font-size: 12px; color: var(--fg-dim, #888); }
.chat-research-open { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; margin-top: 4px; color: var(--red); text-decoration: underline; }
.chat-research-open:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 4px; }
.research-job-card.error,
.research-job-card.cancelled { --cat-color: #f44336; }
/* Per-category theming — picks up a category accent, badge, and soft tint */
.research-job-card[data-category] { --cat-color: var(--accent, var(--red)); }
.research-job-card[data-category="product"]    { --cat-color: #5b8abf; }
.research-job-card[data-category="comparison"] { --cat-color: #e5a33a; }
.research-job-card[data-category="howto"]      { --cat-color: #82c882; }
.research-job-card[data-category="landscape"]  { --cat-color: #a07ae0; }
.research-job-card[data-category="factcheck"]  { --cat-color: var(--red); }
/* Inline category label — sits beside the title in low-opacity colored
   text instead of a separate pill. Picks up the per-card --cat-color. */
/* Uncategorized (default-format) research = "standard", shown in the same
   green as its left border so the green reads as a labelled category. */
.research-cat-badge.research-cat-standard { color: var(--cat-color); }
.research-cat-badge {
  font-size: 9px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  padding: 2px 5px;
  background: color-mix(in srgb, var(--cat-color) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cat-color) 22%, transparent);
  border-radius: 4px;
  color: var(--cat-color, var(--accent));
  opacity: 0.9;
  flex-shrink: 0;
  margin-left: 0;
}

/* Category hero banner */
.research-hero {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; margin: 8px 0 14px;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--cat-color, var(--accent)) 18%, transparent) 0%,
    color-mix(in srgb, var(--cat-color, var(--accent)) 5%, transparent) 100%
  );
  border-left: 4px solid var(--cat-color, var(--accent));
  position: relative; overflow: hidden;
}
.research-hero-icon {
  flex-shrink: 0; width: 32px; height: 32px;
  color: var(--cat-color, var(--accent));
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--cat-color, var(--accent)) 40%, transparent));
}
.research-hero-text { flex: 1; min-width: 0; }
.research-hero-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px;
  font-weight: 700; opacity: 0.7; margin-bottom: 3px;
  color: var(--cat-color, var(--accent));
}
.research-hero-query {
  font-size: 15px; font-weight: 600;
  line-height: 1.3; color: var(--fg);
}






.research-job-header {
  display:flex; align-items:center; gap:7px; min-height:24px;
}
.research-job-query {
  flex:1; min-width:0; font-size:12px; font-weight:650;
  letter-spacing: 0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color: var(--fg);
  transform: translateY(-4px);
}
.research-job-time,
.research-job-meta {
  font-size:10px; opacity:0.5; white-space:nowrap; font-family:monospace;
}
.research-job-status {
  font-size:10px; text-transform:uppercase; opacity:0.6;
}
.research-job-cancel,
.research-job-remove,
.research-job-report-link {
  background:transparent; border:none; color:var(--fg);
  opacity:0.4; cursor:pointer; padding:2px; display:flex;
  transition:opacity 0.15s;
}
/* Minimize toggle for the per-job synapse "tree" visual. */
.research-synapse-toggle {
  background:transparent; border:none; color:var(--fg);
  opacity:0.4; cursor:pointer; padding:2px; display:flex;
  transition:opacity 0.15s;
}
.research-job-model {
  font-size:9px; opacity:0.4; white-space:nowrap;
  max-width:120px; overflow:hidden; text-overflow:ellipsis;
}
.research-job-actions {
  display:flex; gap:5px; margin-top:7px;
  align-items:center;
}
.research-job-thumb-frame {
  position: relative;
  width: 49px;
  height: 29px;
  border-radius: 4px;
  flex: 0 0 49px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: var(--panel, var(--bg));
}
.research-job-summary {
  align-items: flex-start;
}
.research-job-summary-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  transform: translateY(-20px);
}
.research-job-summary .research-job-meta {
  position: relative;
  top: 12px;
  transform: none;
}
.research-job-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.research-job-thumb-empty {
  display: inline-block;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--fg) 7%, transparent),
      color-mix(in srgb, var(--fg) 3%, transparent));
}
/* Match .doclib-toolbar-btn — same font, padding, hover */
.research-job-action {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg-muted);
  font-size: 11px;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s;
}
.research-job-action:hover {
  color: var(--fg);
  border-color: var(--fg);
}
.research-job-action-dim { opacity: 0.5; border-color: transparent; }
.research-job-action-copied {
  color: var(--color-success) !important;
  border-color: color-mix(in srgb, var(--color-success) 45%, var(--border)) !important;
  opacity: 1 !important;
}
.research-job-overflow { position: relative; margin-left: auto; }
.research-job-more {
  width: 30px; height: 30px; padding: 0;
  justify-content: center; color: var(--fg-muted);
}
.research-job-menu {
  position: absolute; z-index: 140;
  right: 0; top: calc(100% + 5px);
  min-width: 168px;
  cursor: default;
}
.research-job-menu > .dropdown-item-compact svg { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.72; }
.research-job-menu > [data-menu-action="copy"] { position: relative; top: -2px; }
.research-job-menu > [data-menu-action="dismiss"] { position: relative; top: 2px; }
.research-job-phase {
  font-size:10px; font-weight:600; color:var(--cat-color);
  margin:7px 0 2px; padding:5px 7px;
  background:color-mix(in srgb, var(--cat-color) 8%, transparent);
  border-radius:4px;
}
.research-job-queued-meta {
  font-size:10px; opacity:0.4; margin-top:2px;
}
.research-section-divider {
  display:flex; align-items:center; gap:10px;
  padding:6px 14px; font-size:10px; opacity:0.4;
  text-transform:uppercase; letter-spacing:0.5px;
}
/* Foldable job sections (Active / Past research) */
/* Collapsible section styled like the Cookbook download sub-blocks (.cookbook-card):
   clean var(--bg) card, 8px radius, a real 13px/600 title. Chevron on the LEFT,
   then title, count, and a status-color dot on the right (the dot stays visible
   when folded so you get status at a glance). Keeps every modal consistent. */
.research-section {
  margin-top: 6px;
  /* Same surface as the research "window" (.research-new-job -> var(--panel)). */
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--fg) 12%, var(--border));
  border-radius: 8px;
  overflow: visible;
}
.research-section-body { display: flex; flex-direction: column; gap: 7px; padding: 9px; }
.research-section-header {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 11px; cursor: pointer; user-select: none;
  transition: background 0.15s;
  border-radius: 7px 7px 0 0;
}
.research-section-header:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.research-section-title { font-size: 13px; font-weight: 650; letter-spacing: 0; }
.research-section-chevron { flex-shrink: 0; opacity: 0.55; transition: transform 0.2s ease; }
.research-section-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; opacity: 0.9; }
/* The top "Research" heading is a plain card-style title — no bar/chevron/dot. */
.research-main-header {
  cursor: default; background: none; border: none;
  padding: 6px 2px; font-size: 13px; font-weight: 600;
}
.research-main-header:hover { background: none; }
.research-section-count {
  /* Match the panel header's "N research" chip — small, muted, no weight. */
  font-size: 10px; opacity: 0.6; font-weight: normal;
  font-variant-numeric: tabular-nums;
}
.research-job-error {
  font-size:11px; color:#f44336; margin-top:4px; line-height:1.4;
  word-break:break-word;
}
.research-job-title-error {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 42%;
  margin-top: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.research-progress-bar {
  height:4px; background:color-mix(in srgb, var(--cat-color) 13%, var(--border)); border-radius:3px; margin-top:7px;
  overflow:hidden;
}
.research-progress-fill {
  height:100%; background:var(--cat-color, var(--accent-primary, var(--red)));
  border-radius:2px; transition:width 0.4s ease;
}
/* Active research uses the same compact card language as History. The live
   map, progress, and navigation feedback are one optional detail region so a
   long-running job does not permanently take over the active list. */
#research-pane #research-active-list {
  gap: 4px;
  padding: 2px 2px 4px 0;
}
#research-pane #research-active-list .research-job-card {
  display: block;
  box-sizing: border-box;
  max-height: none;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  border: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: none;
}
#research-pane #research-active-list .research-job-card:hover {
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  border-color: color-mix(in srgb, var(--fg) 16%, transparent);
  transform: none;
}
#research-pane #research-active-list .research-active-card-header {
  min-width: 0;
  min-height: 22px;
  gap: 6px;
  cursor: pointer;
}
#research-pane #research-active-list .research-job-query {
  position: static;
  transform: none;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}
#research-pane #research-active-list .research-job-model {
  max-width: 110px;
}
#research-pane #research-active-list .research-job-time {
  font-family: inherit;
  font-size: 10px;
}
#research-pane #research-active-list .research-active-card-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: var(--fg);
  opacity: 0.52;
}
#research-pane #research-active-list .research-job-overflow {
  align-self: flex-start;
  margin-left: 0;
}
#research-pane #research-active-list .research-job-more {
  width: 22px;
  height: 22px;
  min-height: 22px;
  border: 0;
  background: transparent;
}
#research-pane #research-active-list .research-active-detail {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding-top: 5px;
  overflow: hidden;
}
#research-pane #research-active-list .research-active-detail[hidden] {
  display: none !important;
}
#research-pane #research-active-list .research-job-phase {
  margin: 0 0 4px;
}
#research-pane #research-active-list .research-progress-bar {
  margin-top: 5px;
}
#research-pane #research-active-list .research-navigation-trace-live {
  margin-top: 6px;
}
.research-job-result {
  margin-top:10px; border-top:1px solid var(--border); padding-top:10px;
}
.research-job-sources {
  display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px;
}
.research-source-link {
  font-size:10px; padding:2px 6px;
  background:color-mix(in srgb, var(--accent-primary, var(--red)) 10%, transparent);
  border-radius:3px; color:var(--accent-primary, var(--red));
  text-decoration:none; white-space:nowrap;
  max-width:200px; overflow:hidden; text-overflow:ellipsis;
}
.research-source-badges {
  display:inline-flex;
  align-items:center;
  gap:3px;
  margin-left:5px;
  vertical-align:1px;
}
.research-source-badge {
  font-size:8px;
  line-height:1;
  padding:1px 3px;
  border-radius:3px;
  background:color-mix(in srgb, currentColor 12%, transparent);
  opacity:0.75;
  text-transform:uppercase;
}
.research-source-state {
  font-size:10px;
  line-height:1.45;
  white-space:pre-wrap;
  color:var(--text-muted);
  background:color-mix(in srgb, var(--accent-primary, var(--red)) 5%, transparent);
  border:1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius:5px;
  padding:6px 7px;
  margin:0 0 8px;
}
.research-navigation-trace {
  font-size:10px;
  line-height:1.4;
  color:var(--text-muted);
  background:color-mix(in srgb, var(--panel-bg, var(--bg)) 80%, transparent);
  border:1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius:5px;
  padding:6px 7px;
  margin:0 0 8px;
}
.research-nav-title {
  font-weight:600;
  color:var(--text-primary, var(--text));
  margin-bottom:4px;
}
.research-nav-spacer {
  height:6px;
}
.research-nav-row {
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  gap:5px;
  align-items:baseline;
  min-width:0;
}
.research-nav-tool {
  color:var(--accent-primary, var(--red));
  font-weight:600;
}
.research-action-skipped .research-nav-tool {
  color:var(--text-muted);
}
.research-source-more { font-size:10px; opacity:0.5; padding:2px 4px; }
.research-job-report-body {
  font-size:12px; line-height:1.55; max-height:400px; overflow-y:auto;
}
.research-job-loading { font-size:11px; opacity:0.5; padding:8px 0; }
.research-library-section {
  border-top:1px solid var(--border); flex-shrink:0;
}
.research-library-toggle {
  width:100%; background:transparent; border:none; color:var(--fg);
  padding:8px 14px; font-size:11px; text-align:left;
  opacity:0.6; cursor:pointer; font-weight:500;
}
.research-library-item {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:8px 14px; font-size:11px;
  border-bottom:1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.research-library-item:hover { background:color-mix(in srgb, var(--border) 20%, transparent); }
.research-lib-query {
  flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:120px;
}
.research-lib-actions {
  display:flex; gap:4px; margin-left:auto;
}
.research-lib-meta {
  font-size:9px; opacity:0.4; white-space:nowrap; font-family:monospace;
}
.research-lib-open,
.research-lib-delete {
  background:transparent; border:none; color:var(--fg);
  opacity:0.3; cursor:pointer; padding:2px; display:flex;
  transition:opacity 0.15s;
}
.research-lib-delete:hover { opacity:1; color:#f44336; }
.research-badge {
  background:var(--accent-primary, var(--red)); border-radius:50%;
  width:6px; height:6px; margin-left:auto; display:inline-block; flex-shrink:0;
  position: relative; left: -4px;
  /* Breathe when research has finished — gentle scale + glow pulse to
     draw the eye to the unread result without being a hard blink. */
  animation: research-badge-breathe 2.4s ease-in-out infinite;
}

/* Sidebar Deep Research running indicator — text then dot, styled the same
   as Cookbook's running status (no glow). */
.research-sb-running {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.research-sb-status {
  font-size: 8px;
  opacity: 0.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  top: 0;
  left: -12px;
}
.research-sb-dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-success, #4caf50);
  animation: cookbook-notif-pulse 2s ease-in-out infinite;
  position: relative;
  top: -1px;
  left: -4px;
}

/* ── In-house color picker ── */
/* A color-picker swatch input shows the chosen colour as its background; hide
   the underlying hex text/caret so it doesn't read as "#a1b2c3" in the box.
   (The themed/gallery variants set this too; this is the generic fallback for
   swatches outside those scopes, e.g. the calendar-settings color dots.) */
input.cp-swatch-input {
  color: transparent;
  font-size: 0;
  text-shadow: none;
  caret-color: transparent;
  user-select: none;
}
input.cp-swatch-input::selection { background: transparent; }
.cp-popover {
  position: fixed; z-index: 10000;
  display: none;
  width: 240px;
  background: var(--panel, #1a1a1a);
  border: 1px solid var(--border, #333);
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  font-family: inherit; color: var(--fg, #eee); font-size: 12px;
  user-select: none;
}
@media (max-width: 768px) {
  .cp-popover {
    width: min(240px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
  }
  .cp-sl {
    height: min(150px, 34dvh);
  }
}
.cp-sl {
  position: relative;
  width: 100%; height: 160px;
  border-radius: 6px;
  cursor: crosshair;
  overflow: hidden;
  touch-action: none;
}
.cp-sl-white {
  position: absolute; inset: 0;
  background: linear-gradient(to right, #fff, rgba(255,255,255,0));
  pointer-events: none;
}
.cp-sl-black {
  position: absolute; inset: 0;
  background: linear-gradient(to top, #000, rgba(0,0,0,0));
  pointer-events: none;
}
.cp-sl-handle {
  position: absolute;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.5);
  pointer-events: none;
}
.cp-hue {
  position: relative;
  margin-top: 10px;
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  cursor: pointer;
  touch-action: none;
}
.cp-hue-handle {
  position: absolute; top: 50%;
  width: 10px; height: 18px;
  margin: -9px 0 0 -5px;
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.5);
  pointer-events: none;
}
.cp-row {
  display: flex; align-items: center; gap: 6px; margin-top: 10px;
}
.cp-preview {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border, #333);
  flex-shrink: 0;
}
.cp-hex {
  flex: 1; min-width: 0;
  padding: 4px 6px;
  background: var(--bg, #000); color: var(--fg, #eee);
  border: 1px solid var(--border, #333);
  border-radius: 4px;
  font-family: ui-monospace, 'Fira Code', monospace;
  font-size: 12px; text-transform: lowercase;
}
.cp-hex:focus { outline: none; border-color: var(--red, #e06c75); }
.cp-copy {
  width: 26px; height: 26px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border, #333);
  border-radius: 4px;
  color: var(--fg, #eee);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 26px;
  transition: background 0.1s, color 0.1s;
}
.cp-copy:hover { background: color-mix(in srgb, var(--accent, var(--red)) 12%, transparent); color: var(--accent, var(--red)); }
.cp-eyedropper {
  width: 26px; height: 26px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border, #333);
  border-radius: 4px;
  color: var(--fg, #eee);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.1s;
}
.cp-eyedropper:hover:not(:disabled) { background: rgba(255,255,255,0.08); }
.cp-section-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px;
  opacity: 0.5; margin-top: 10px; margin-bottom: 4px;
}
.cp-swatches {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.cp-swatch {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid var(--border, #333);
  cursor: pointer;
  padding: 0;
  transition: transform 0.08s;
}
.cp-swatch:hover { transform: scale(1.15); }
.cp-recent-empty {
  font-size: 11px; opacity: 0.4; padding: 2px 0;
}

/* PDF form export modal + signature modals — match the app theme via the
   existing modal/confirm-btn classes. Only a few atom-level styles below. */
.pdf-export-overlay .modal-content { padding: 12px 14px; }
.pdf-export-overlay #pdf-export-body { padding-right: 4px; }
.pdf-export-overlay .pdf-export-section {
  margin-bottom: 14px;
}
.pdf-export-overlay .pdf-export-section-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--red);
  opacity: 0.85;
  margin-bottom: 6px;
}
.pdf-export-overlay .pdf-export-row {
  display: grid;
  grid-template-columns: 38% 62%;
  gap: 8px;
  align-items: center;
  padding: 3px 0;
}
.pdf-export-overlay .pdf-export-row label {
  font-size: 0.78rem;
  color: var(--fg);
  opacity: 0.85;
}
.pdf-export-input,
.pdf-export-overlay select.pdf-export-input,
.pdf-export-overlay input.pdf-export-input {
  padding: 4px 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  border-radius: 4px;
  font-size: 0.78rem;
  font-family: inherit;
}
.pdf-export-input:focus {
  outline: none;
  border-color: var(--fg);
}
.sig-modal-overlay .modal-content { padding: 12px 14px; }
.sig-modal-overlay .sig-canvas {
  display: block;
  width: 100%;
  height: 240px;
  background: #fff;
  cursor: crosshair;
  border: 1px dashed var(--border);
  border-radius: 5px;
  /* Drawing uses pointer events; without this, a touch-drag on the canvas pans
     the page / sheet instead of drawing ("the whole window moves"). */
  touch-action: none;
}
.sig-modal-overlay .sig-name,
.sig-modal-overlay .sig-smoothness {
  font-family: inherit;
}
.sig-modal-overlay .sig-smoothness {
  accent-color: var(--accent, var(--red));
  margin: 0;
}
.sig-modal-overlay .sig-name {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  border-radius: 4px;
  font-size: 0.85rem;
}
.sig-modal-overlay .sig-tile {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  cursor: pointer;
  background: var(--bg);
}
.sig-modal-overlay .sig-tile:hover { border-color: var(--fg); }
.sig-modal-overlay .sig-tile img {
  display: block;
  width: 100%;
  height: 80px;
  object-fit: contain;
  background: #fff;
  border-radius: 3px;
}
.sig-modal-overlay .sig-tile-del {
  position: absolute;
  top: 1px;
  right: 6px;
  width: 20px;
  height: 20px;
  /* Center the × glyph inside the round bg — without this the button's default
     text metrics push it past the right edge of the circle. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 0 1px;
  box-sizing: border-box;
  font-size: 0.85rem;
  line-height: 1;
  border: 1px solid var(--accent, var(--red));
  background: #fff;
  color: var(--accent, var(--red));
  border-radius: 50%;
  cursor: pointer;
  opacity: 1;
}
.sig-modal-overlay .sig-tile-del:hover {
  background: color-mix(in srgb, var(--accent, var(--red)) 10%, #fff);
}
.sig-modal-overlay .sig-new-tile {
  border: 2px dashed var(--border);
  border-radius: 6px;
  padding: 8px;
  cursor: pointer;
  background: var(--bg);
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 106px;
  font-weight: 600;
  opacity: 0.85;
}
.sig-modal-overlay .sig-new-tile:hover {
  opacity: 1;
  border-color: var(--fg);
}

/* Form checkboxes — render as a circular dot, theme-aware. Used in the
   Export PDF modal and the inline PDF view overlay. */
.pdf-export-overlay input[type="checkbox"],
#doc-pdf-view input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  cursor: pointer;
  border-radius: 50%;
  background: #fff;
  position: relative;
}
.pdf-export-overlay input[type="checkbox"] {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--border);
  background: var(--bg);
}
.pdf-export-overlay input[type="checkbox"]:checked {
  background: var(--fg);
  border-color: var(--fg);
}
/* PDF view overlays on a white page render — keep colors theme-independent
   so the dot is always visible against the rendered PDF. */
#doc-pdf-view input[type="checkbox"] {
  border: 1.5px solid #444;
}
#doc-pdf-view input[type="checkbox"]:checked {
  background: #111;
  border-color: #111;
}

/* ─────────────────────────────────────────────────────────────────────────
   Frosted glass theme — applied when the user enables the "Glass" toggle
   in theme settings (writes `body.theme-frosted`). Layers a semi-translucent
   tint over every panel/modal/sidebar/dropdown and blurs whatever is
   behind it, so the UI reads like layered glass.
   ───────────────────────────────────────────────────────────────────────── */
body.theme-frosted #sidebar,
body.theme-frosted .modal-content,
body.theme-frosted .doclib-modal-content,
body.theme-frosted .gallery-modal-content,
body.theme-frosted .notes-pane,
body.theme-frosted .research-pane,
body.theme-frosted .calendar-pane,
body.theme-frosted .cookbook-pane,
body.theme-frosted .doc-pane,
body.theme-frosted .doc-pane-floating,
body.theme-frosted .cp-popover,
body.theme-frosted .dropdown,
body.theme-frosted .overflow-menu,
body.theme-frosted .doc-tab-dropdown,
body.theme-frosted .email-reader,
body.theme-frosted .admin-card,
body.theme-frosted .gallery-detail-menu,
body.theme-frosted #theme-popup .modal-content {
  /* Tinted base color (set separately so the shorthand can't swallow it);
     much more transparent than before so what's behind actually shows
     through. The blur catches whatever pixels are below. */
  background-color: color-mix(in srgb, var(--panel, var(--bg)) 32%, transparent) !important;
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--fg, #fff) 14%, transparent) 0%,
    color-mix(in srgb, var(--fg, #fff)  4%, transparent) 26%,
    transparent 55%) !important;
  backdrop-filter: blur(24px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(170%) !important;
  border-color: color-mix(in srgb, var(--fg) 22%, transparent) !important;
}
/* The sidebar header + user bar paint their own opaque --sidebar-bg/--panel.
   Under the frosted theme the sidebar is translucent glass, so those solid
   bands stood out as a dark (near-black) strip over the title/avatar area.
   Make them transparent so they blend into the frosted sidebar. */
body.theme-frosted .sidebar-header,
body.theme-frosted .sidebar-user-bar {
  background: transparent !important;
}
/* Same problem on tool modals: the sticky .modal-header paints a solid
   var(--panel) bar (so scrolled content doesn't bleed through). Over a
   frosted-glass modal body that solid bar reads as a dark band across the
   title area (Calendar, Tasks, Cookbook, Memory, Email…). Give the header
   its own matching frosted glass — translucent tint + blur — so it stays
   readable while scrolling but blends into the panel instead of a black band. */
body.theme-frosted .modal-header {
  /* Transparent — NOT another panel tint. The header sits on top of the
     already-frosted modal body, so any added tint stacks and the band
     reads darker than its surroundings. Keep just the blur (which doesn't
     darken) so scrolled content stays legible under the sticky header. */
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Deep Research's header isn't sticky (content doesn't scroll under it) and
   its pane carries extra frosting — saturate + a top gradient highlight +
   the synapse glow. The generic header blur above adds its OWN glass layer,
   which renders a different shade than the pane behind it. Drop the header's
   blur so the pane's frosted background shows through the header uniformly. */
body.theme-frosted .research-pane-header {
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.theme-frosted .notes-mobile-grabber {
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Inner admin-cards inside frosted modals stack their transparency on top
   of the modal's, which kills the see-through. Make the inner card nearly
   fully transparent so the outer modal's blur dominates. */
body.theme-frosted .modal-content .admin-card,
body.theme-frosted .doclib-modal-content .admin-card,
body.theme-frosted .gallery-modal-content .admin-card,
body.theme-frosted #theme-popup .admin-card {
  background-color: color-mix(in srgb, var(--panel, var(--bg)) 10%, transparent) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Subtle inner light highlight + softer shadow on the heavier surfaces */
body.theme-frosted .modal-content,
body.theme-frosted .doclib-modal-content,
body.theme-frosted .gallery-modal-content,
body.theme-frosted .notes-pane,
body.theme-frosted .research-pane,
body.theme-frosted .calendar-pane,
body.theme-frosted .cookbook-pane,
body.theme-frosted .doc-pane,
body.theme-frosted .doc-pane-floating {
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 color-mix(in srgb, var(--fg, #fff) 14%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #000 14%, transparent) !important;
}
/* Backdrops should be MUCH less opaque so the blur effect reads through to
   the actual page content behind the modal. */
body.theme-frosted .modal {
  background: color-mix(in srgb, #000 12%, transparent) !important;
}

/* Mobile only: lift the Dependencies "Server" dropdown's selected text up ~2px. */
@media (max-width: 768px) {
  #hwfit-deps-server { padding-bottom: 4px; line-height: 1; }
}

/* Emoji rendered as monochrome line icons (OpenMoji-black via /api/emoji proxy)
   instead of colorful system glyphs — project rule: never colorful emoji. The
   SVG is used as a mask filled with the current text color, so it tints to the
   theme. Sized to sit on the text baseline. */
.emoji {
  height: 1.15em;
  width: 1.15em;
  vertical-align: -0.18em;
  margin: 0 0.05em;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: var(--em) center / contain no-repeat;
          mask: var(--em) center / contain no-repeat;
}

.assistant-message a[href^="#event-"] .emoji,
.ai-message a[href^="#event-"] .emoji,
.message.assistant a[href^="#event-"] .emoji {
  position: relative;
  top: 2px;
}

.emoji[aria-label="🔔"] {
  position: relative;
  top: 3px;
}


/* RESEARCH SCROLL FORCE — guarantee the jobs list scrolls inside the bounded
   pane (the pane is height-capped: 85vh desktop, 100dvh mobile). Each ancestor
   needs min-height:0 for a nested flex scroll to engage. */
#research-pane { min-height: 0; }
/* The BODY is the single scroller — the list flows into it and the whole body
   scrolls. (A nested list-scroller kept clipping instead of scrolling.) */
#research-pane .research-pane-body {
  flex: 1 1 auto !important; min-height: 0 !important;
  display: flex !important; flex-direction: column !important;
  overflow-y: auto !important; -webkit-overflow-scrolling: touch;
}
#research-pane .research-jobs-list {
  flex: 0 0 auto !important; min-height: 0 !important;
  overflow: visible !important; max-height: none !important;
}
/* The tabbed research panel replaces the old single body scroller above:
   each result tab now owns its list viewport. */
#research-pane .research-tab-panel {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
#research-pane .research-tab-panel:not([data-research-panel="research"]) .research-jobs-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}
#research-pane .research-tab-panel[data-research-panel="research"] .research-new-job {
  margin-bottom: 0;
}

/* RESEARCH FULLSCREEN MOBILE — the pane wasn't opening to full height on mobile,
   so its content overflowed with nowhere to scroll. Pin it to the full viewport
   (id selector + !important beats the inherited modal-content sizing). */
@media (max-width: 768px) {
  /* Bottom-sheet: 90dvh tall (a touch smaller than full-screen) anchored to the
     bottom, so there's a small gap at the top and it reads as a sheet. The body
     still scrolls within the bounded height. */
  #research-overlay { align-items: flex-end !important; justify-content: stretch !important; }
  #research-pane {
    height: 90dvh !important;
    max-height: 90dvh !important;
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 14px 14px 0 0 !important;
  }
  /* Bottom breathing room so the expanded Settings + Start button clear the
     browser's bottom toolbar / safe area and can always be scrolled into view
     (otherwise the form fits the viewport and there's no room to reach them). */
  #research-pane .research-pane-body {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40px) !important;
    touch-action: pan-y;
    overscroll-behavior: contain;
  }
}

/* Keep the primary action transition consistent with the shared toolbar. */
.research-start-btn { transition: opacity 0.16s ease; }

/* Right-side group of the section header: clear button (past), status dot, chevron. */
.research-section-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
/* "Clear all" in the Past header — styled like the cookbook-running clear btn. */
.research-section-clear {
  font-size: 10px; padding: 0 8px; height: 22px;
  border-radius: 6px; border: 1px solid var(--border);
  color: color-mix(in srgb, var(--fg) 45%, transparent);
  background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  font-family: inherit; white-space: nowrap; transition: all 0.15s;
  position: relative; top: -2px;
}
.research-section-clear:hover { color: var(--red); border-color: var(--red); background: color-mix(in srgb, var(--red) 8%, transparent); }

/* Visual Report button tinted with the research type colour (--cat-color),
   falling back to the accent for "standard" (uncategorized) research. */
.research-job-action.research-job-action-report {
  color: var(--cat-color, var(--accent, var(--red)));
  border-color: color-mix(in srgb, var(--cat-color, var(--accent, var(--red))) 45%, var(--border));
}

.research-start-btn svg,
.research-add-plus { display: inline-block; }

/* Compare's selector uses the shared Start button markup, but its accent
   background needs a readable dark foreground and a lighter hover weight. */
#compare-model-overlay .research-start-btn {
  color: #000;
}
#compare-model-overlay .research-start-btn:hover {
  color: var(--fg);
  font-weight: 400;
  opacity: 1;
}

/* Footer hint under Past research linking to the Library's Research tab. */
.research-library-hint {
  width: 100%; flex-basis: 100%; margin: -2px 0 0; line-height: 1.2;
  font-size: calc(1em - 2px); opacity: 0.55;
}
.research-library-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--accent, var(--red)); text-decoration: underline;
}


@media (max-width: 768px) {
  /* Mobile: the "Delete" label is too wide in Deep Research job rows; keep the
     familiar trash action but make it icon-only. */
  .research-job-action[data-action="delete"] {
    width: 28px;
    min-width: 28px;
    padding-left: 0;
    padding-right: 0;
    gap: 0;
    justify-content: center;
    font-size: 0;
  }
  .research-job-action[data-action="delete"] svg {
    width: 13px;
    height: 13px;
    margin: 0;
    flex-shrink: 0;
  }
}

/* Standard research gets a stable visual variant instead of inheriting the
   global warm accent. Keep typography unchanged; vary only the card tint,
   border, badge, progress bar, and report hero accent. */
.research-job-card.research-standard {
  --cat-color: var(--research-accent);
  background: color-mix(in srgb, var(--research-accent) 4%, var(--bg));
  border-color: color-mix(in srgb, var(--research-accent) 28%, var(--border));
  border-left-color: var(--research-accent);
}
.research-job-card.research-standard .research-cat-badge.research-cat-standard {
  color: var(--research-accent);
}

/* Failed research (0 sources) — red flag + actionable note. */
.research-job-card.research-job-failed { border-color: color-mix(in srgb, #f44336 40%, var(--border)); }
.research-cat-badge.research-cat-failed { color: #f44336; display: inline-flex; align-items: center; gap: 3px; }
.research-cat-badge.research-cat-failed svg { width: 10px; height: 10px; }
.research-job-failnote { position: relative; top: 2px; font-size: 10px; color: #f44336; opacity: 0.9; margin: 2px 0 6px; line-height: 1.35; }

/* Shared popup-menu row feedback. Many small menus use their own item class;
   keep the hover light and consistent instead of giving one action a special
   glow. */
:is(
  .overflow-menu-item,
  .dropdown-item,
  .dropdown-item-compact,
  .export-dropdown-item,
  .sort-dropdown-item,
  .note-reminder-menu-item,
  .research-run-mode-popover .research-run-mode-row,
  .ge-fx-menu-item
) {
  transition:
    background-color 0.14s ease,
    color 0.14s ease,
    opacity 0.14s ease,
    transform 0.14s ease;
}
:is(
  .overflow-menu-item,
  .dropdown-item,
  .dropdown-item-compact,
  .export-dropdown-item,
  .sort-dropdown-item,
  .note-reminder-menu-item,
  .research-run-mode-popover .research-run-mode-row,
  .ge-fx-menu-item
):hover:not(:disabled) {
  opacity: 1;
  color: var(--fg);
  background-color: color-mix(in srgb, var(--accent, var(--red)) 10%, transparent);
  transform: translateX(1px);
}

/* Slash command autocomplete popup, anchored to the message composer */
.slash-autocomplete-popup {
  position: fixed;
  z-index: 9000;
  background: var(--panel, var(--bg));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  font-size: 13px;
  color: var(--fg, #e6e6e6);
  overflow-y: auto;
  padding: 4px 0;
  display: none;
}
.slash-ac-cat {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted, #888);
  padding: 6px 10px 2px;
  opacity: 0.7;
}
.slash-ac-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 10px;
  cursor: pointer;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
}
.slash-ac-row:hover { background-color: color-mix(in srgb, var(--accent, var(--red)) 10%, transparent); }
.slash-ac-row-sel  { background-color: color-mix(in srgb, var(--accent, var(--red)) 14%, transparent); }
.slash-ac-token {
  font-family: 'Fira Code', ui-monospace, monospace;
  color: var(--accent, var(--red));
  font-weight: 600;
  flex-shrink: 0;
}
.slash-ac-help {
  color: var(--fg);
  opacity: 0.85;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slash-ac-usage {
  color: var(--fg-muted, #888);
  font-family: 'Fira Code', ui-monospace, monospace;
  font-size: 11px;
  opacity: 0.55;
  flex-shrink: 0;
}
.slash-ac-empty {
  padding: 10px;
  color: var(--fg-muted, #888);
  font-style: italic;
}
.slash-ac-empty code {
  font-family: 'Fira Code', ui-monospace, monospace;
  color: var(--accent, var(--red));
}

/* ══ iOS focus-zoom fix — Safari touch devices only; desktop sizes untouched ══
   16px is the threshold below which iOS Safari auto-zooms on focus.
   Selects and date/time inputs are excluded on purpose — they open native
   pickers and never zoom. */
@supports (-webkit-touch-callout: none) {
@media (hover: none) and (pointer: coarse) {

  /* 1 ── Catch-all: every text-entry control NOT pinned with its own
     !important. !important here beats any non-important rule regardless of
     specificity, so this clears the long tail (settings, admin, memory,
     notes, calendar, email, gallery, tasks, model picker, etc.). */
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="url"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input:not([type]),
  textarea {
    font-size: 16px !important;
  }

  /* 2 ── Fields that pin their own !important at specificity our catch-all
     can't beat. Each is matched at equal-or-higher specificity and, being
     later in the file, wins the tie. */
  #message { font-size: 16px !important; }                                  /* chat composer (was 13px !important) */
  .cookbook-dl-repo,
  .hwfit-search { font-size: 16px !important; }                             /* cookbook repo path + hardware search */
  .ge-topbar input { font-size: 16px !important; }                          /* image-editor topbar input */
  .ge-transform-field > input.ge-transform-popup-input {                    /* image-editor transform values */
    font-size: 16px !important;
  }
}
}

@supports (-webkit-touch-callout: none) {
@media (hover: none) and (pointer: coarse) {
  /* Only the sub-16px tiers need bumping; large lands ABOVE 16 so it
     stays zoom-safe AND visibly larger than medium (otherwise L collapses
     onto M on touch). All three editor layers move together so the
     highlight/line-number overlay stays metrically aligned with the textarea. */
  .doc-font-m .doc-editor-textarea, .doc-font-m .doc-editor-highlight, .doc-font-m .doc-line-numbers {
    font-size: 16px !important;   /* was 13px */
  }
  .doc-font-l .doc-editor-textarea, .doc-font-l .doc-editor-highlight, .doc-font-l .doc-line-numbers {
    font-size: 18px !important;   /* was 15px — keep L > M */
  }
  /* Email compose rich-body. Medium (15px) zooms, so bump it; large (17px)
     is already ≥16px and never zoomed — leave it so we don't shrink it. */
  .doc-email-richbody.doc-font-m { font-size: 16px !important; }
}
}

/* GitHub Copilot device-flow connect block (model endpoints → API) */
.adm-copilot-connect {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.adm-copilot-connect #adm-copilotStatus { flex-basis: 100%; margin-top: 0; }
.adm-copilot-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.adm-copilot-wait {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: color-mix(in srgb, var(--fg) 70%, transparent);
}
.adm-copilot-coderow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.adm-copilot-code-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--fg) 45%, transparent);
}
.adm-copilot-code {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg);
  user-select: all;
}
.adm-copilot-auth {
  text-align: center;
  text-decoration: none;
  padding: 7px 12px;
  font-size: 12px;
}
.adm-copilot-hint {
  font-size: 11px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--fg) 45%, transparent);
}
/* ChatGPT Subscription per-account usage card (Settings → Added Models) */
.adm-chatgpt-controls {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  align-items: center;
  margin: 4px 0 2px auto;
}
.adm-chatgpt-usage-chevron {
  font-size: 10px;
  line-height: 1;
  display: inline-block;
  margin-left: 2px;
}
.adm-chatgpt-usage {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 11px;
}
.adm-chatgpt-usage-plan { display: flex; gap: 6px; align-items: center; }
.adm-chatgpt-usage-limit { display: flex; flex-direction: column; gap: 6px; }
.adm-chatgpt-usage-limit-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--fg) 55%, transparent);
}
.adm-chatgpt-usage-model {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--mono, ui-monospace, monospace);
  opacity: 0.8;
}
.adm-chatgpt-usage-row { display: flex; flex-direction: column; gap: 3px; }
.adm-chatgpt-usage-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.adm-chatgpt-usage-name {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--fg) 70%, transparent);
}
.adm-chatgpt-usage-remaining { font-weight: 600; }
.adm-chatgpt-usage-bar {
  position: relative;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: color-mix(in srgb, var(--fg) 12%, transparent);
}
.adm-chatgpt-usage-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  transition: width 0.25s ease;
}
.adm-chatgpt-usage-warn .adm-chatgpt-usage-fill { background: #d99a2b; }
.adm-chatgpt-usage-critical .adm-chatgpt-usage-fill { background: #d9534f; }
.adm-chatgpt-usage-unknown .adm-chatgpt-usage-fill { background: color-mix(in srgb, var(--fg) 25%, transparent); }
.adm-chatgpt-usage-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  color: color-mix(in srgb, var(--fg) 50%, transparent);
}
.adm-chatgpt-usage-status {
  font-size: 11px;
  color: color-mix(in srgb, var(--fg) 60%, transparent);
}
.adm-chatgpt-usage-blocked { color: #d9534f; }
.adm-chatgpt-usage-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.adm-chatgpt-reconnect-status { font-size: 11px; }
/* Cookbook serve panel: Launch + ^ split button pair */
.hwfit-serve-launch-group {
  display: inline-flex;
  align-items: stretch;
  vertical-align: middle;
}
.hwfit-serve-launch-group .hwfit-serve-schedule-arrow {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: 1px solid var(--border) !important;
  padding: 0 8px !important;
  min-width: 26px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* Mobile: drop the inline icons on Launch + Cancel in the serve panel so
   the buttons are text-only and don't wrap on narrow screens. Icons stay
   on desktop where horizontal space isn't tight. */
@media (max-width: 600px) {
  .hwfit-serve-launch > svg,
  .hwfit-serve-cancel > svg {
    display: none !important;
  }
}

/* Schedule form — mounted inside the cookbook serve panel. Uses the
   theme tokens (--bg, --panel, --border, --accent, --red) so it
   matches the rest of the cookbook chrome instead of inline whites. */
.hwfit-schedule-form {
  margin: 10px 0 4px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hwfit-schedule-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.95;
  flex-wrap: wrap;
}
.hwfit-schedule-title svg { opacity: 0.7; flex-shrink: 0; }
.hwfit-schedule-title-spacer { flex: 1; min-width: 8px; }
.hwfit-schedule-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.hwfit-schedule-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  opacity: 0.75;
}
.hwfit-schedule-label {
  font-size: 11px;
  opacity: 0.75;
}
.hwfit-sched-days {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
}
.hwfit-schedule-actions-inline {
  display: inline-flex;
  align-items: flex-end;
  gap: 6px;
  align-self: flex-end;
  padding-bottom: 1px;
}
.hwfit-sched-day-chip {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 10px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.hwfit-sched-day-chip:hover { border-color: var(--accent, var(--red)); }
.hwfit-sched-day-chip.is-on {
  background: var(--accent, var(--red));
  color: var(--panel, #fff);
  border-color: var(--accent, var(--red));
}
.hwfit-schedule-actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hwfit-schedule-actions-spacer { flex: 1; }

/* Days row hosts the day-chip strip on the left and the Cancel / Save
   action buttons on the right. The spacer between them pushes the
   actions to the right edge. */
.hwfit-schedule-days-row {
  align-items: center;
}
/* Cancel + Save sit on the right side of the days row with matching
   icon-plus-label chrome. */
.hwfit-sched-cancel,
.hwfit-sched-save {
  display: inline-flex !important;
  align-items: center;
}
.hwfit-schedule-mirror-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  opacity: 0.9;
  cursor: pointer;
  user-select: none;
}
.hwfit-sched-err {
  font-size: 12px;
  color: var(--red, #ff6b6b);
  display: none;
}
@media (max-width: 600px) {
  .hwfit-schedule-row { gap: 8px; }
  .hwfit-sched-day-chip { width: 36px; height: 36px; font-size: 11px; }
}

/* ── ask_user: multiple-choice question card ─────────────────────────────
   The agent posed a question and ended its turn. The user clicks an option
   or types a free-text "Other" answer. */
.ask-user-card {
  /* Left-align like an assistant message (.msg-ai), not centered. */
  align-self: flex-start;
  margin: 10px auto 10px 8px;
  width: 85%;
  max-width: 85%;
  box-sizing: border-box;
  font-size: 11px;
  line-height: 1.45;
  padding: 12px 16px 14px;
  border: 1px solid var(--bubble-border, var(--border));
  border-radius: 18px 18px 18px 0;
  background: var(--ai-bubble-bg, var(--panel));
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.ask-user-card-attached {
  margin-top: 0;
  margin-left: 8px;
  width: 85%;
  max-width: 85%;
}
.ask-user-card-attached::before {
  content: '';
  position: absolute;
  left: 20px;
  top: -18px;
  width: 2px;
  height: 18px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--red) 18%, transparent);
  pointer-events: none;
  z-index: -1;
}
/* Focused only programmatically (tabIndex -1) to move SR/keyboard position; no
   visible outline on the whole card box. */
.ask-user-card:focus { outline: none; }
.ask-user-head {
  display: none;
}
.ask-user-close {
  display: none !important;
}
.ask-user-question {
  margin: 0 0 10px;
  font-size: 11px !important;
  font-weight: 500;
  line-height: 1.45;
  color: var(--fg);
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
.ask-user-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ask-user-option {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  row-gap: 2px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  height: auto !important;
  /* Match the height of the free-text input below (.styled-prompt-input). */
  min-height: 39px;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--fg);
  font-size: 11px !important;
  line-height: 1.35;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.ask-user-option:hover:not(:disabled) {
  border-color: var(--accent, var(--red));
  background: color-mix(in srgb, var(--accent, var(--red)) 10%, var(--bg));
}
.ask-user-option:disabled { cursor: default; }
.ask-user-card.ask-user-answered {
  opacity: 0.92;
}
.ask-user-card.ask-user-answered .ask-user-question {
  margin-bottom: 8px;
}
.ask-user-option-label,
.ask-user-option-desc {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
.ask-user-option-label {
  font-size: 11px !important;
  font-weight: 500;
  line-height: 1.35;
  color: var(--accent, var(--red));
}
.ask-user-option-desc {
  flex-basis: 100%;
  width: 100%;
  opacity: 0.65;
  font-size: 10px !important;
  line-height: 1.35;
}
/* Free-text "Other" row: input + send, on one line. */
.ask-user-other {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  min-width: 0;
}
/* Reuses .styled-prompt-input; override its full-width + top margin so it
   sits inline in the flex row next to the send button. */
.ask-user-other-input {
  flex: 1;
  min-width: 0;
  width: auto;
  margin-top: 0;
  font-size: 11px !important;
  line-height: 1.35;
}
/* Reuses .confirm-btn .confirm-btn-primary; flex-row deltas + height match to
   the input beside it (.confirm-btn won't stretch on its own). */
.ask-user-other-send {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: 32px;
  min-width: 32px;
  height: 32px !important;
  min-height: 32px;
  font-size: 11px !important;
  line-height: 1.35;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: var(--send-btn-bg, var(--red));
  color: #fff;
}
.ask-user-other-send svg { display: block; flex-shrink: 0; }
.ask-user-other-send:hover:not(:disabled) {
  background: var(--send-btn-hover, color-mix(in srgb, var(--red) 80%, white));
}
.ask-user-other-send:disabled { opacity: 0.5; cursor: default; }
.ask-user-answer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--accent, var(--red)) 24%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent, var(--red)) 8%, var(--bg));
  color: var(--fg);
  font-size: 11px !important;
  line-height: 1.35;
}
.ask-user-answer-label {
  flex: 0 0 auto;
  color: var(--accent, var(--red));
  font-weight: 600;
}
.ask-user-answer-value {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 640px) {
  .ask-user-card {
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
    margin-left: 8px;
    margin-right: 8px;
    padding: 10px 11px 12px;
    border-radius: 10px;
  }
  .ask-user-card-attached {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
  }
  .ask-user-question {
    font-size: 11px !important;
    line-height: 1.45;
  }
  .ask-user-option {
    padding: 7px 8px;
    font-size: 11px !important;
    gap: 6px;
  }
  .ask-user-option-label {
    font-size: 11px !important;
  }
  .ask-user-option-desc {
    font-size: 10px !important;
  }
  .ask-user-other {
    flex-wrap: wrap;
  }
  .ask-user-other-send {
    width: 32px;
    min-width: 32px;
    height: 32px !important;
    min-height: 32px;
    padding: 0;
  }
}

/* ── Workspace picker ───────────────────────────────────────────── */
/* Layout (width/flex column/max-height) inherited from base .modal-content. */
/* Editable path/address bar: reuses .styled-prompt-input for border/bg/radius/
   focus ring (set in the element's class list). Overrides only the deltas:
   mono font, and full-bleed via flex stretch with no horizontal margin (the
   modal-content's 10px padding is the gutter) instead of the base width:100%,
   which overflowed against the overflow:auto scrollbar. */
.workspace-cur {
  align-self: stretch;
  width: auto;
  min-width: 0;
  margin: 4px 0 8px;
  font-family: var(--mono, monospace);
  font-size: 12px;
}
/* flex/overflow inherited from base .modal-body; only the padding differs. */
.workspace-body { padding: 6px 0; }
.workspace-row {
  padding: 7px 18px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.workspace-row > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.workspace-row-icon { flex-shrink: 0; opacity: 0.75; }
.workspace-row:hover {
  background: color-mix(in srgb, var(--border) 20%, transparent);
}
.workspace-up { opacity: 0.7; }
.workspace-empty { padding: 14px 18px; opacity: 0.5; font-size: 13px; }
.workspace-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 18px;
  border-top: 1px solid var(--border);
}
.workspace-footer > .confirm-btn { position: relative; top: 4px; }
.workspace-footer > .confirm-btn-primary { color: var(--bg); }
.workspace-footer > #workspace-use { top: 3px; font-size: calc(0.85rem + 2px); font-weight: 700; }
.workspace-footer > #workspace-use:hover { color: var(--fg); }
.workspace-footer > .confirm-btn > svg { position: relative; left: -2px; top: 2px; }
.workspace-footer > #workspace-use > svg { top: 3px; color: inherit; }
.workspace-note { margin: 0 0 8px; font-size: 11px; line-height: 1.4; }

.settings-system-logs-tabs {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 0 0 10px;
  border-bottom: 1px solid var(--border);
}
.settings-system-logs-tab {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  padding: 6px 8px 7px;
  opacity: 0.62;
}
.settings-system-logs-tab.active {
  border-bottom-color: var(--accent, var(--red));
  color: var(--accent, var(--red));
}
.settings-system-logs-col {
  gap: 10px;
}
.settings-system-notification-logs-col {
  gap: 10px;
}
#system-log-terminal-panel[hidden],
#system-log-notifications-panel[hidden] {
  display: none !important;
}
.settings-system-logs-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.settings-system-logs-search {
  padding: 6px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
  font-family: inherit;
  font-size: 11px;
  flex: 1;
  min-width: 140px;
}
.settings-system-logs-select {
  padding: 5px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
  font-family: inherit;
  font-size: 11px;
  min-width: 90px;
}
#log-refresh-btn {
  height: 27px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
}
.settings-system-logs-autopoll-container {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  user-select: none;
  margin-left: auto;
}
#log-console-container {
  background: #13151a;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  font-family: Consolas, 'Fira Code', Monaco, 'Courier New', monospace;
  font-size: 11px;
  height: 280px;
  max-height: 280px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  color: #d1d4e0;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.5);
}
.settings-system-logs-placeholder {
  color: var(--color-text-dim, #7f8c8d);
  font-style: italic;
  font-family: inherit;
}
.log-line {
  margin-bottom: 3px;
  line-height: 1.4;
  font-size: 11px;
  font-family: inherit;
}
.log-line-info {
  color: var(--green, #50fa7b);
}
.log-line-warning {
  color: var(--warn, #f0ad4e);
}
.log-line-error {
  color: var(--red, #e06c75);
}
.log-line-debug {
  color: var(--color-muted, #888);
}
.log-line-default {
  color: var(--fg, #9cdef2);
}
#notification-log-container {
  height: 280px;
  max-height: 280px;
  overflow-y: auto;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg) 72%, #13151a 28%);
}
.notification-log-entry {
  padding: 9px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}
.notification-log-entry:last-child { border-bottom: 0; }
.notification-log-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.notification-log-task {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.notification-log-status {
  flex: 0 0 auto;
  padding: 2px 5px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 9px;
  line-height: 1;
  text-transform: uppercase;
  opacity: 0.82;
}
.notification-log-success .notification-log-status { color: var(--green, #50fa7b); }
.notification-log-error .notification-log-status { color: var(--red, #e06c75); }
.notification-log-meta {
  margin-top: 3px;
  color: var(--color-text-dim, #7f8c8d);
  font-size: 10px;
  overflow-wrap: anywhere;
}
.notification-log-body {
  position: relative;
  margin-top: 6px;
  padding: 7px 8px;
  border-left: 2px solid color-mix(in srgb, var(--fg) 28%, transparent);
  color: color-mix(in srgb, var(--fg) 82%, transparent);
  font-family: Consolas, 'Fira Code', Monaco, 'Courier New', monospace;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.notification-log-body-text { display: block; padding-right: 24px; }
.notification-log-copy {
  position: absolute; top: 5px; right: 5px; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 4px; background: transparent; color: currentColor;
  opacity: .45; cursor: pointer; padding: 0;
}
.notification-log-copy:hover { opacity: 1; background: color-mix(in srgb, var(--fg) 8%, transparent); }
.notification-log-copy.copied { opacity: 1; color: var(--green, #50fa7b); }
.notification-log-error .notification-log-body {
  border-left-color: var(--red, #e06c75);
  color: color-mix(in srgb, var(--red, #e06c75) 88%, var(--fg));
}

/* Compare uses one full-width response card on phones. Every pane remains
   mounted so hidden models can keep streaming while the tab strip scales to
   larger comparisons without stacking multiple chats down the page. */
@media (max-width: 768px) {
  .compare-add-flap { display: none !important; }
  .compare-mobile-tabs {
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
    gap: 5px;
    min-width: 0;
    padding: 0 8px 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .compare-mobile-tabs::-webkit-scrollbar { display: none; }
  .compare-mobile-tab {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    flex: 0 0 clamp(108px, 38vw, 156px);
    min-width: 0;
    height: 34px;
    box-sizing: border-box;
    padding: 0 9px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: color-mix(in srgb, var(--fg) 3%, var(--bg));
    color: color-mix(in srgb, var(--fg) 62%, transparent);
    font-size: 10px;
    line-height: 1;
    font-family: inherit;
    text-align: left;
    scroll-snap-align: start;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
  }
  .compare-mobile-add {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: color-mix(in srgb, var(--fg) 3%, var(--bg));
    color: color-mix(in srgb, var(--fg) 70%, transparent);
    font-size: 10px;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
  }
  .compare-mobile-add > span:first-child {
    color: var(--accent, var(--red));
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
  }
  .compare-mobile-add:disabled { opacity: .35; cursor: default; }
  .compare-mobile-add:not(:disabled):active {
    background: color-mix(in srgb, var(--accent, var(--red)) 12%, var(--bg));
  }
  .compare-mobile-tab.active {
    border-color: color-mix(in srgb, var(--accent, var(--red)) 70%, var(--border));
    background: color-mix(in srgb, var(--accent, var(--red)) 11%, var(--bg));
    color: var(--fg);
  }
  .compare-mobile-tab-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--fg) 7%, transparent);
    color: color-mix(in srgb, var(--fg) 68%, transparent);
    font-size: 9px;
    font-weight: 700;
  }
  .compare-mobile-tab.active .compare-mobile-tab-slot {
    background: var(--accent, var(--red));
    color: var(--bg);
  }
  .compare-mobile-tab-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .compare-mobile-tab-state {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--fg) 22%, transparent);
  }
  .compare-mobile-tab.is-streaming .compare-mobile-tab-state {
    background: var(--red, #e06c75);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--red, #e06c75) 65%, transparent);
    animation: compare-mobile-tab-pulse 1s ease-in-out infinite !important;
    will-change: opacity, transform, box-shadow;
  }
  .compare-mobile-tab.is-awaiting-input .compare-mobile-tab-state { background: var(--accent, var(--red)); }
  .compare-mobile-tab.is-done .compare-mobile-tab-state {
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    color: var(--color-success, #4caf50);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
  }
  .compare-mobile-tab.is-done .compare-mobile-tab-state::before { content: '✓'; }
  .compare-mobile-tab.is-failed .compare-mobile-tab-state { background: var(--color-error, #e55); }
  @keyframes compare-mobile-tab-pulse {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--red, #e06c75) 65%, transparent); }
    50% { opacity: .45; transform: scale(.72); box-shadow: 0 0 0 5px color-mix(in srgb, var(--red, #e06c75) 0%, transparent); }
  }
  .compare-grid[data-cols],
  .compare-grid.sequential-layout {
    display: block !important;
    grid-template-columns: none !important;
    flex: 1 1 0;
    min-height: 0;
    padding: 0 8px 6px;
    overflow: hidden;
  }
  .compare-grid > .compare-pane,
  .compare-grid.sequential-layout > .compare-pane {
    display: none;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin-left: 0 !important;
    box-sizing: border-box;
  }
  .compare-grid > .compare-pane.compare-pane-mobile-active,
  .compare-grid.sequential-layout > .compare-pane.compare-pane-mobile-active {
    display: flex;
    animation: compare-mobile-card-in .16s ease-out;
  }
  .compare-grid.sequential-layout .compare-pane .pane-header {
    clip-path: none;
    padding-left: 10px;
  }
  @keyframes compare-mobile-card-in {
    from { opacity: .55; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .compare-probe-card { width: min(460px, calc(100% - 16px)); padding: 12px; }
  .compare-probe-list { grid-template-columns: minmax(0, 1fr); }
  .compare-probe-row:not(.fail) .compare-probe-spinner:not(.ok):not(.fail) { transform: translateX(-2px); }
  .compare-probe-detail { flex-wrap: wrap; }
  .compare-probe-detail-message { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .compare-mobile-tab.is-streaming .compare-mobile-tab-state,
  .compare-grid > .compare-pane.compare-pane-mobile-active { animation: none; }
}




























/* Mobile tool drawers: leave a visible strip of the workspace above tall
   sheets so they read as draggable drawers rather than full-screen routes.
   Content-sized windows remain shorter; only tall content is capped at 95dvh.
   Keep the theme popup's intentionally shorter 65vh treatment unchanged. */
@media (max-width: 768px) {
  .modal:not(#theme-modal):not(#styled-confirm-overlay) > .modal-content,
  .modal:not(#theme-modal):not(#styled-confirm-overlay) > .memory-modal-content,
  .modal:not(#theme-modal):not(#styled-confirm-overlay) > .settings-modal-content {
    height: auto !important;
    max-height: 95dvh !important;
    align-self: flex-end;
    margin-bottom: calc(-1 * env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Tabbed tools need a definite flex height when their active panel changes;
     otherwise the content-sized drawer can collapse and hide the tab strip. */
  #cookbook-modal .modal-content,
  #tasks-modal .tasks-modal-content,
  #memory-modal .memory-modal-content,
  #settings-modal .settings-modal-content,
  #email-lib-modal .modal-content,
  .email-window-modal .modal-content,
  #doclib-modal .doclib-modal-content,
  #library-modal .doclib-modal-content,
  #gallery-modal .gallery-modal-content,
  #research-overlay .research-pane,
  #compare-model-overlay .modal-content,
  #custom-preset-modal .preset-modal-content {
    height: 95dvh !important;
    min-height: 95dvh !important;
    max-height: 95dvh !important;
  }

  /* Explicit fullscreen states still behave as bottom drawers on phones. */
  #email-lib-modal.email-lib-fullscreen .modal-content,
  #doclib-modal.doclib-fullscreen:not(.modal-right-docked) .doclib-modal-content {
    top: auto !important;
    bottom: 0 !important;
    height: 95dvh !important;
    max-height: 95dvh !important;
    border-radius: 14px 14px 0 0 !important;
  }

  .cal-modal-container {
    height: auto !important;
    max-height: 95dvh !important;
  }

  body.doc-view .doc-editor-pane,
  body.notes-view .notes-pane {
    inset: auto 0 0 !important;
    height: 95dvh !important;
    max-height: 95dvh !important;
  }
}



/* Shared bulk-selection trigger. Keep every Select/Cancel control on the same
   circle-dot and X language even when a feature rewrites the button label. */
:is(
  #memory-select-btn,
  #skills-select-btn,
  #notes-select-btn,
  #tasks-select-btn,
  #doclib-chats-select-btn,
  #doclib-arc-select-btn,
  #doclib-research-select-btn,
  #doclib-select-btn,
  #gallery-select-btn,
  #gallery-albums-select-btn,
  #gallery-editor-drafts-select,
  #email-lib-select-btn,
  #archive-select-btn,
  #lib-select-btn,
  #hwfit-cache-select
) {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

:is(
  #memory-select-btn,
  #skills-select-btn,
  #notes-select-btn,
  #tasks-select-btn,
  #doclib-chats-select-btn,
  #doclib-arc-select-btn,
  #doclib-research-select-btn,
  #doclib-select-btn,
  #gallery-select-btn,
  #gallery-albums-select-btn,
  #gallery-editor-drafts-select,
  #email-lib-select-btn,
  #archive-select-btn,
  #lib-select-btn,
  #hwfit-cache-select
)::before {
  content: "";
  width: 11px;
  height: 11px;
  margin-right: 3px;
  flex: 0 0 11px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='11' r='3' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='11' r='3' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

:is(
  #memory-select-btn,
  #skills-select-btn,
  #notes-select-btn,
  #tasks-select-btn,
  #doclib-chats-select-btn,
  #doclib-arc-select-btn,
  #doclib-research-select-btn,
  #doclib-select-btn,
  #gallery-select-btn,
  #gallery-albums-select-btn,
  #gallery-editor-drafts-select,
  #email-lib-select-btn,
  #archive-select-btn,
  #lib-select-btn,
  #hwfit-cache-select
).active::before {
  background-color: var(--accent, var(--red));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 6l12 12' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 6l12 12' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

:is(#memory-select-btn, #skills-select-btn, #email-lib-select-btn) > .memory-select-btn-icon {
  display: none;
}

/* The Skills toolbar sits a pixel higher than its peers. */
#skills-select-btn::before {
  transform: translateY(1px);
}


/* Deep Research History uses the same library surface as Memory, Skills, and
   Tasks: one framed block, compact toolbar, filter chips, bulk selection, and
   cards that expand in place. */
#research-pane .research-history-card {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  padding: 12px;
}
#research-pane .research-history-title-row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-height: 24px;
}
#research-pane .research-history-clear-btn svg {
  position: relative;
  top: 2px;
}
#research-pane .research-history-title-row h2 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  top: -4px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  border: 0;
  letter-spacing: 0;
}
#research-pane .research-history-title-row h2 > svg {
  width: 14px;
  height: 14px;
  color: var(--accent, var(--red));
  flex: 0 0 14px;
}
#research-pane .research-history-head-count {
  position: relative;
  top: 4px;
  font-size: 0.6em;
  opacity: 0.6;
  font-weight: normal;
}
#research-pane .research-history-toolbar {
  flex: 0 0 auto;
  max-height: none;
  overflow: visible;
}
#research-pane .research-history-toolbar-row {
  align-items: center;
  min-height: 24px;
}
#research-pane .research-history-toolbar-row .memory-sort-select {
  top: -3px;
  width: 92px;
}
#research-pane #research-history-select-btn {
  position: relative;
  top: -5px;
}
#research-pane #research-history-select-btn svg {
  flex: 0 0 auto;
  margin-right: 3px;
  vertical-align: -2px;
}
#research-pane .research-history-search-wrap > svg {
  position: absolute;
  left: 9px;
  z-index: 1;
  width: 12px;
  height: 12px;
  color: var(--accent, var(--red));
  pointer-events: none;
}
#research-pane .research-history-search-wrap .memory-search-input {
  height: 30px;
  margin: 0;
  padding-left: 28px;
}
#research-pane #research-history-filters {
  flex: 0 0 auto;
  margin: -2px 0 0;
}
#research-pane #research-history-bulk {
  flex: 0 0 auto;
  position: relative;
  top: -4px;
  margin: 2px 0 5px;
}
#research-pane #research-history-bulk-delete {
  position: relative;
  top: -4px;
  right: 0;
  margin-left: auto;
}
#research-pane #research-history-bulk-delete svg {
  width: 11px;
  height: 11px;
  margin-right: 3px;
  vertical-align: -1px;
}
#research-pane .research-history-select-cb {
  position: relative;
  top: -4px;
}
#research-pane #research-history-bulk-cancel {
  position: relative;
  top: -2px;
  right: 0;
  margin-left: 4px;
}
#research-pane #research-past-list {
  position: relative;
  top: -4px;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 2px 2px 4px 0;
  gap: 4px;
}
#research-pane #research-past-list .research-job-card {
  display: block;
  height: 67px;
  min-height: 67px;
  box-sizing: border-box;
  max-height: none;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: none;
}
#research-pane #research-past-list .research-job-card:hover {
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  border-color: color-mix(in srgb, var(--fg) 16%, transparent);
  transform: none;
}
#research-pane #research-past-list .research-job-card.doclib-card-expanded {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100%;
  max-height: none;
  overflow: hidden;
}
#research-pane #research-past-list .research-job-card.research-job-failed:not(.doclib-card-expanded) {
  height: 67px;
  min-height: 67px;
}
#research-pane #research-past-list .research-job-header {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 18px;
  gap: 6px;
  overflow: visible;
}
#research-pane #research-past-list .research-job-query {
  position: static;
  top: auto;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: normal;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  flex: 1 1 auto;
  min-width: 0;
}
#research-pane #research-past-list .research-job-header:has(.research-job-title-error) {
  flex-wrap: wrap;
  row-gap: 2px;
}
#research-pane #research-past-list .research-job-header:has(.research-job-title-error) .research-job-query {
  order: 1;
}
#research-pane #research-past-list .research-job-header:has(.research-job-title-error) .research-job-retry-badge,
#research-pane #research-past-list .research-job-header:has(.research-job-title-error) .research-job-edit-badge,
#research-pane #research-past-list .research-job-header:has(.research-job-title-error) .research-job-overflow {
  order: 2;
}
#research-pane #research-past-list .research-job-title-error {
  order: 3;
  flex: 0 0 100%;
  max-width: none;
  margin-top: 0;
  text-align: left;
}
#research-pane #research-past-list .research-job-report-badge,
#research-pane #research-past-list .research-job-discuss-badge,
#research-pane #research-past-list .research-job-overflow {
  flex: 0 0 auto;
}
  #research-pane #research-past-list .research-job-meta {
  position: relative;
  top: 4px;
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-family: inherit;
  font-size: 10px;
  line-height: 1.2;
  opacity: 0.4;
    transform: none;
  }
  #research-pane #research-past-list .research-job-summary-copy {
    transform: translateY(-22px);
  }
#research-pane #research-past-list .research-job-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 35px;
  margin-top: 4px;
}
  #research-pane #research-past-list .research-job-thumb-frame {
    width: 48px;
    height: 33px;
    flex-basis: 48px;
    border-radius: 3px;
    transform: translateY(-14px);
  }
#research-pane #research-past-list .research-job-overflow {
  margin-left: 0;
  align-self: flex-start;
}
#research-pane #research-past-list .research-job-more {
  width: 22px;
  height: 22px;
  min-height: 22px;
  border: 0;
  background: transparent;
}
#research-pane #research-past-list .research-job-more > svg {
  transform: translateY(6px);
}
#research-pane #research-past-list .task-status-badge {
  height: 20px;
  min-height: 20px;
  padding: 0 8px;
  gap: 4px;
}
#research-pane #research-past-list .research-job-actions .task-status-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 20px;
  min-height: 20px;
  padding: 0 8px;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  color: color-mix(in srgb, var(--fg) 72%, transparent);
  cursor: pointer;
}
#research-pane #research-past-list .research-job-actions .task-status-badge:hover {
  color: var(--fg);
  background: color-mix(in srgb, var(--accent, var(--red)) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent, var(--red)) 40%, var(--border));
}
#research-pane #research-past-list .research-job-actions .task-status-badge > svg {
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
}
#research-pane #research-past-list .task-status-badge > svg {
  width: 10px;
  height: 10px;
}
#research-pane #research-past-list .research-job-report-badge {
  color: var(--cat-color, var(--accent, var(--red)));
  background: color-mix(in srgb, var(--cat-color, var(--accent, var(--red))) 16%, transparent);
  border-color: color-mix(in srgb, var(--cat-color, var(--accent, var(--red))) 38%, transparent);
}
#research-pane #research-past-list .research-job-report-badge:hover {
  background: color-mix(in srgb, var(--cat-color, var(--accent, var(--red))) 25%, transparent);
  border-color: color-mix(in srgb, var(--cat-color, var(--accent, var(--red))) 58%, transparent);
}
#research-pane #research-past-list .research-job-retry-badge,
#research-pane #research-past-list .research-job-edit-badge {
  color: color-mix(in srgb, var(--fg) 72%, transparent);
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  border-color: color-mix(in srgb, var(--fg) 18%, transparent);
}
#research-pane #research-past-list .research-job-retry-badge:hover,
#research-pane #research-past-list .research-job-edit-badge:hover {
  color: var(--fg);
  background: color-mix(in srgb, var(--fg) 12%, transparent);
  border-color: color-mix(in srgb, var(--fg) 32%, transparent);
}
#research-pane #research-past-list .research-job-discuss-badge {
  color: color-mix(in srgb, var(--fg) 72%, transparent);
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  border-color: color-mix(in srgb, var(--fg) 18%, transparent);
}
#research-pane #research-past-list .research-job-discuss-badge:hover {
  color: var(--fg);
  background: color-mix(in srgb, var(--fg) 12%, transparent);
  border-color: color-mix(in srgb, var(--fg) 32%, transparent);
}
#research-pane .research-history-card-select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  min-width: 20px;
  min-height: 20px;
  flex: 0 0 auto;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
#research-pane .research-history-card-select .memory-select-cb {
  margin: 0 1px 0 0;
}
#research-pane #research-past-list .research-history-selectable {
  cursor: pointer;
}
#research-pane #research-past-list .research-job-result {
  max-height: none;
  overflow: visible;
}
#research-pane .research-history-card:has(.doclib-card-expanded) #research-past-list {
  overflow: hidden !important;
}
#research-pane #research-past-list:has(.doclib-card-expanded) > .research-job-card:not(.doclib-card-expanded) {
  display: none !important;
}
#research-pane #research-past-list .research-job-card.doclib-card-expanded .research-job-result {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
}

@media (max-width: 600px) {
  #research-pane .research-history-card {
    padding: 10px;
  }
  #research-pane .research-history-toolbar-row {
    flex-wrap: nowrap;
  }
  #research-pane .research-history-toolbar-row .memory-sort-select {
    width: 84px;
  }
  #research-pane #research-history-clear {
    padding-left: 5px;
    padding-right: 5px;
  }
  #research-pane #research-past-list .research-job-card {
    min-height: 77px;
    padding-left: 8px;
    padding-right: 8px;
  }
  #research-pane #research-past-list .research-job-card.research-job-failed:not(.doclib-card-expanded) {
    height: 77px;
    min-height: 77px;
  }
  #research-pane #research-past-list .research-job-header {
    gap: 4px;
  }
  #research-pane #research-past-list .research-job-report-badge,
  #research-pane #research-past-list .research-job-discuss-badge {
    width: auto;
    min-width: 0;
    height: 28px;
    min-height: 28px;
    padding-left: 7px;
    padding-right: 7px;
    justify-content: center;
    gap: 4px;
  }
  #research-pane #research-past-list .research-job-report-badge > svg,
  #research-pane #research-past-list .research-job-discuss-badge > svg {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
  }
  #research-pane #research-past-list .research-job-report-badge .task-state-label,
  #research-pane #research-past-list .research-job-discuss-badge .task-state-label {
    display: inline;
    font-size: 9px;
    line-height: 1;
  }
  #research-pane #research-past-list .research-job-more {
    width: 24px;
    min-width: 24px;
  }
}