/* ─────────────────────────────────────────────────────────────────────────
   KnowStash companion web app — styles.

   Self-contained: /app pages load ONLY this sheet (not admin.css), so it must
   define everything admin.js + app.js reach for by class name (.toast, .modal,
   .spinner, .notice, .badge, .hidden, buttons …) plus the full app shell.

   Design language: a calm, flat, document-like UI with a LEFT VERTICAL SIDEBAR
   menu — warm paper background, minimal chrome, whitespace + hairline dividers
   instead of boxes. KnowStash red is the brand accent, used sparingly.
   ───────────────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@500;600;700&family=Inter:wght@400;450;500;600&display=swap");

:root {
  /* Warm neutral paper palette */
  --bg:        #faf9f5;   /* main content background */
  --sidebar:   #f3f1ea;   /* the left rail */
  --surface:   #ffffff;   /* inputs, modals — the few intentional surfaces */
  --surface-2: #f6f4ee;
  --ink:       #20201d;   /* primary text */
  --ink-soft:  #3f3d38;
  --muted:     #6b6760;
  --muted-2:   #9a958b;
  --line:      #e6e2d8;   /* hairlines + dividers */
  --line-soft: #eeeae1;
  --hover:     #efece4;   /* row / nav hover tint */
  --active:    #e7e2d6;   /* active nav fill */

  /* Brand accent (used sparingly) */
  --red:     #DC2626;
  --red-700: #B91C1C;
  --red-900: #7F1D1D;

  /* Status accents (muted to fit the warm palette) */
  --blue:        #3f5fa6;
  --blue-bg:     #eef1f8;
  --amber:       #d9910e;
  --amber-ink:   #92580e;
  --amber-bg:    #f7eed5;
  --emerald:     #2f7d56;
  --emerald-bg:  #e8f2ea;
  --emerald-ink: #2c6a49;

  --sb-w: 250px;
  --maxw: 1040px;
  --radius: 12px;
  --mono: "Geist Mono", "SF Mono", Menlo, Consolas, monospace;
  --ui: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body.app {
  font-family: var(--ui);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  font-size: 15px;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.55rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: .4rem; }
h2 { font-size: 1.02rem; font-weight: 600; margin: 1.8rem 0 .7rem; letter-spacing: -0.01em; }
h3 { font-size: .92rem; font-weight: 600; margin: 1rem 0 .4rem; color: var(--ink-soft); }
p { margin: .45rem 0; }

.muted { color: var(--muted); }
.small { font-size: .84rem; }
.mono { font-family: var(--mono); }
code { font-family: var(--mono); background: var(--surface-2); padding: .08em .35em; border-radius: 5px; font-size: .86em; color: var(--ink-soft); }
.hidden { display: none !important; }
.accent { color: var(--red-700); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.spacer { flex: 1; }
.stack { display: flex; flex-direction: column; gap: .5rem; }
.rowflex { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* ── Layout shell: fixed left sidebar + offset content ──────────────────── */

/* (Cross-document View Transitions were removed: the rendered-content + sidebar
   snapshots already give an instant, flicker-free swap, and the transition was an
   untested variable while chasing navigation glitches. Can be re-added later.) */
#app-header {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sb-w);
  background: var(--sidebar); border-right: 1px solid var(--line);
  z-index: 60; overflow-y: auto;
}
.sb-inner { display: flex; flex-direction: column; min-height: 100%; padding: 1.1rem .8rem 1rem; }

.sb-logo { display: flex; align-items: center; gap: .55rem; padding: .2rem .5rem 1.1rem; color: var(--ink) !important; text-decoration: none !important; }
.sb-logo span { font-family: Geist, var(--ui); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.02em; }
.sb-logo b { color: var(--red-700); font-weight: 700; }

.sb-nav { display: flex; flex-direction: column; gap: 2px; }
.app-nav-link {
  display: flex; align-items: center; gap: .65rem; padding: .5rem .65rem; border-radius: 9px;
  color: var(--ink-soft) !important; text-decoration: none !important; font-size: .92rem; font-weight: 500;
}
.app-nav-link:hover { background: var(--hover); text-decoration: none !important; }
.app-nav-link.active { background: var(--active); color: var(--ink) !important; font-weight: 600; }
.nav-ico { display: inline-flex; width: 19px; height: 19px; color: var(--muted); flex-shrink: 0; }
.app-nav-link.active .nav-ico { color: var(--red-700); }

.sb-foot { margin-top: auto; padding-top: .6rem; }
.sb-account {
  display: flex; align-items: center; gap: .55rem; width: 100%; padding: .5rem .55rem;
  border: 1px solid transparent; background: none; border-radius: 11px; cursor: pointer; text-align: left; font-family: inherit;
}
.sb-account:hover { background: var(--hover); }
.sb-avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--red-700); color: #fff; font-weight: 600; font-size: .85rem; flex-shrink: 0;
}
.sb-avatar.lg { width: 36px; height: 36px; font-size: .98rem; }
.sb-acc-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sb-acc-name { font-size: .82rem; font-weight: 550; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-acc-credits { font-size: .74rem; color: var(--muted); font-family: var(--mono); display: flex; align-items: center; gap: .35rem; }
.credits-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex-shrink: 0; }
.sb-acc-chev { color: var(--muted-2); font-size: 1.05rem; flex-shrink: 0; line-height: 1; }
.link-button { background: none; border: none; padding: 0; cursor: pointer; color: var(--muted); font-size: .78rem; text-decoration: underline; font-family: inherit; white-space: nowrap; }
.link-button:hover { color: var(--ink); }

/* Announcements bell (system messages) — sits above the profile button; hidden
   until the list has something to show. Badge = server unread count. */
.sb-bell {
  display: flex; align-items: center; gap: .65rem; width: 100%; padding: .5rem .65rem; margin-bottom: .15rem;
  border: none; background: none; border-radius: 9px; cursor: pointer; text-align: left; font-family: inherit;
  font-size: .92rem; font-weight: 500; color: var(--ink-soft);
}
.sb-bell:hover { background: var(--hover); }
.sb-bell-badge {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; flex-shrink: 0;
  background: var(--red); color: #fff; font-size: .7rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Account popover — pops out to the right of the rail from the profile button */
.sb-popover { position: fixed; z-index: 90; min-width: 232px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 14px 38px rgba(0,0,0,.17); padding: .4rem; }
.sb-pop-head { display: flex; align-items: center; gap: .6rem; padding: .55rem .55rem .65rem; border-bottom: 1px solid var(--line-soft); margin-bottom: .35rem; }
.sb-pop-id { min-width: 0; }
.sb-pop-email { font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 168px; }
.sb-pop-credits { margin-top: .12rem; font-family: var(--mono); }
.sb-pop-item { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .5rem .55rem; border: none; background: none; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: .88rem; color: var(--ink-soft) !important; text-decoration: none !important; text-align: left; }
.sb-pop-item:hover { background: var(--hover); text-decoration: none !important; }
.sb-pop-item svg { width: 17px; height: 17px; color: var(--muted); flex-shrink: 0; }

main.app-main { padding: 1.6rem 1.25rem 5rem; }
body.app-authed main.app-main {
  margin-left: var(--sb-w);
  display: grid;
  grid-template-columns: minmax(0, var(--maxw));
  justify-content: center;
  align-content: start;
  padding: 2.2rem clamp(1.5rem, 5vw, 3.5rem) 6rem;
}

/* ── Mobile: sidebar becomes a slide-in drawer ─────────────────────────── */
#app-mobilebar { display: none; }
#app-scrim { display: none; }
@media (max-width: 860px) {
  #app-mobilebar {
    display: flex; align-items: center; gap: .6rem; position: fixed; top: 0; left: 0; right: 0; height: 52px;
    padding: 0 .9rem; background: var(--sidebar); border-bottom: 1px solid var(--line); z-index: 55;
  }
  .app-burger { background: none; border: none; cursor: pointer; color: var(--ink); display: inline-flex; padding: .3rem; }
  .mb-logo { display: flex; align-items: center; gap: .4rem; color: var(--ink) !important; text-decoration: none !important; }
  .mb-logo span { font-family: Geist, var(--ui); font-weight: 600; }
  .mb-logo b { color: var(--red-700); }
  #app-header { transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(0,0,0,.12); }
  body.sb-open #app-header { transform: translateX(0); }
  #app-scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.32); z-index: 58; opacity: 0; pointer-events: none; transition: opacity .22s ease; }
  body.sb-open #app-scrim { opacity: 1; pointer-events: auto; }
  body.app-authed main.app-main { margin-left: 0; padding: 4.6rem 1.1rem 5rem; }
}

/* ── Auth / gate cards ─────────────────────────────────────────────────── */
.auth-card {
  max-width: 410px; margin: 6rem auto 1rem; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 2.4rem 2rem;
  box-shadow: 0 10px 40px rgba(0,0,0,.04);
}
.auth-logo { display: flex; justify-content: center; margin-bottom: .9rem; }
.auth-card h1 { font-family: Geist, var(--ui); font-size: 1.7rem; margin-bottom: .3rem; }
.auth-tag { color: var(--muted); margin-bottom: 1.5rem; font-size: .95rem; }
.auth-foot { margin-top: 1.3rem; font-size: .85rem; color: var(--muted); }
.google-btn {
  display: inline-flex; align-items: center; gap: .6rem; background: #fff; color: var(--ink);
  border: 1px solid var(--line); padding: .7rem 1.2rem; border-radius: 10px; font-size: .95rem;
  font-weight: 500; cursor: pointer; font-family: inherit;
}
.google-btn:hover { background: var(--surface-2); }
.google-btn:disabled { opacity: .6; cursor: not-allowed; }
/* Email/password sign-in beside the Google button (self-service signups). */
.auth-divider { display: flex; align-items: center; gap: .7rem; color: var(--muted-2); font-size: .78rem; margin: 1.1rem 0 .9rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-pwform { display: flex; flex-direction: column; gap: .55rem; text-align: left; }
/* Turnstile bot-check slot — empty/hidden until the backend demands a pass. */
.captcha-box { display: flex; justify-content: center; margin: .9rem 0; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: var(--ink); color: #fff; border: 1px solid var(--ink);
  padding: .5rem 1rem; border-radius: 9px; font-size: .89rem; font-weight: 550;
  cursor: pointer; font-family: inherit; text-decoration: none !important; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, opacity .12s ease;
}
.btn:hover { background: var(--ink-soft); border-color: var(--ink-soft); }
.btn:disabled { background: #cfccc3; border-color: #cfccc3; cursor: not-allowed; }
.btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-secondary:hover { background: var(--hover); border-color: var(--muted-2); }
.btn-danger { background: var(--red-700); border-color: var(--red-700); color: #fff; }
.btn-danger:hover { background: var(--red-900); }
.btn-red { background: var(--red); border-color: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-700); }
/* Outlined CTA — coloured call-to-action one step below the solid red hero
   (queue's Create Note buttons sit beside the solid-red Stash all). */
.btn-red-outline { background: transparent; color: var(--red-700); border: 1px solid #ecc6bf; }
.btn-red-outline:hover { background: #fdf2f0; border-color: var(--red); }
.btn-red-outline:disabled { background: transparent; color: var(--muted-2); border-color: var(--line); cursor: not-allowed; }
.btn-sm { padding: .32rem .62rem; font-size: .82rem; border-radius: 7px; }
.btn-ghost { background: transparent; border: 1px solid transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--hover); color: var(--ink); }
.btn-block { width: 100%; }

/* ── Inputs ────────────────────────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="number"], input[type="search"],
input[type="date"], input[type="password"], select, textarea {
  font-family: inherit; font-size: .92rem; padding: .5rem .7rem; border: 1px solid var(--line);
  border-radius: 9px; background: var(--surface); color: var(--ink); width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--muted-2); box-shadow: 0 0 0 3px rgba(32,32,29,.05);
}
textarea { min-height: 4em; resize: vertical; line-height: 1.55; }
label { font-size: .78rem; color: var(--muted); font-weight: 500; }
.field { display: flex; flex-direction: column; gap: .25rem; flex: 1; min-width: 160px; }
.field.checkbox { flex-direction: row; align-items: center; gap: .45rem; min-width: 0; flex: 0 0 auto; }
.field.checkbox input { width: auto; }
.field.checkbox label { color: var(--ink); }
.form-row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: .7rem; }
.model-select { width: auto; min-width: 112px; }

/* ── Sections (flattened — NO boxes) ───────────────────────────────────── */
/* `.card` is a transparent section, separated by whitespace, not a bordered
   box. The only intentional surfaces are inputs, the composer, and modals. */
.card { background: none; border: none; padding: 0; margin: 0 0 1.9rem; }
.card.pad-sm { margin-bottom: 1rem; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .5rem 1.5rem; }

.stat-row { display: flex; gap: 2.2rem; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; gap: .1rem; }
.stat-label { font-size: .72rem; color: var(--muted-2); text-transform: uppercase; letter-spacing: .05em; }
.stat-value { font-size: 1.5rem; font-weight: 600; font-family: var(--mono); letter-spacing: -0.01em; }

/* Dashboard quick-link rows (clean list, not boxes) */
.nav-card { display: flex; align-items: center; gap: .6rem; padding: .7rem .25rem; text-decoration: none !important; color: inherit !important; border-bottom: 1px solid var(--line-soft); }
.nav-card:hover { text-decoration: none !important; }
.nav-card:hover h3 { color: var(--red-700); }
.nav-card h3 { color: var(--ink); margin: 0; font-size: .95rem; display: flex; align-items: center; gap: .5rem; }
.nav-card p { color: var(--muted); font-size: .85rem; margin: 0; }
.nav-card-count { margin-left: auto; font-family: var(--mono); color: var(--muted-2); font-size: .85rem; }

/* ── Page header ───────────────────────────────────────────────────────── */
.page-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.page-head h1 { margin: 0; }
.page-head .spacer { flex: 1; }
/* Hero CTAs (Create note… / New collection) stack full-width on phones instead
   of wrapping raggedly next to the h1. */
@media (max-width: 640px) {
  .page-head > .btn-red { flex: 1 1 100%; }
}

/* ── Toolbar (search / sort / filter) ──────────────────────────────────── */
.toolbar { display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.1rem; }
/* Uniform 38px control height (the filter-control standard) wherever buttons
   sit beside selects/inputs — queue selector toolbar + add row. */
.toolbar .btn, .toolbar select, .form-row .btn, .form-row input { height: 38px; }
.search-box { position: relative; flex: 1; min-width: 220px; }
.search-box input { padding-right: 2rem; }
.search-clear {
  position: absolute; right: .45rem; top: 50%; transform: translateY(-50%);
  border: none; background: var(--line); color: var(--muted); width: 20px; height: 20px; border-radius: 50%;
  cursor: pointer; font-size: .9rem; line-height: 1; display: none;
}
.search-box.has-text .search-clear { display: block; }

/* ── Filter bar: search + collection on the first row, sort + filter on the
   second (Notes / Videos), so the controls no longer crowd one line. */
.filterbar { display: flex; flex-direction: column; gap: .7rem; margin-bottom: 1.2rem; }
.filterbar-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.filterbar-row .search-box { flex: 1 1 260px; }
/* Inline filter controls: a wrap-row of labelled fields (Sort / Channel / date). */
.filterbar-fields { display: flex; flex-wrap: wrap; gap: .8rem 1.1rem; align-items: flex-start; }
.filter-field { display: flex; flex-direction: column; gap: .4rem; }
.filter-field-label { font-size: .68rem; color: var(--muted-2); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; line-height: 1; }
/* One uniform control height so the segmented controls line up with the inputs
   and date fields (otherwise the shorter segs float above the taller boxes). */
.filter-field .seg,
.filter-field > input,
.filter-field .drf-head { height: 38px; }
.filter-field .seg { align-self: flex-start; }
.filter-field .seg button { display: inline-flex; align-items: center; }
/* The box-style fields (channel + dates) flex between 160–230px so the whole
   field row — Sort · Channel · Published · Added on Videos — shares one row at
   the content max-width instead of wrapping the last field. */
.filter-field.ff-channel, .filter-field.ff-date { flex: 1 1 160px; min-width: 160px; max-width: 230px; }

/* ── Custom single-select dropdown (collection filter trigger) ─────────────── */
.fsel {
  display: inline-flex; align-items: center; gap: .4rem; max-width: 230px; height: 38px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  padding: 0 .6rem; font-family: inherit; font-size: .86rem; color: var(--ink-soft); cursor: pointer;
}
.fsel:hover { background: var(--hover); border-color: var(--muted-2); }
.fsel.pop-open { border-color: var(--muted-2); background: var(--hover); }
.fsel:disabled { opacity: .55; cursor: not-allowed; }
.fsel.fsel-on { color: var(--ink); }
.fsel-ico { display: inline-flex; color: var(--muted); flex-shrink: 0; }
.fsel-cap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsel-chev { display: inline-flex; color: var(--muted-2); flex-shrink: 0; transition: transform .15s ease; }
.fsel.pop-open .fsel-chev { transform: rotate(180deg); }

/* ── Anchored popover (collection menu + filter panel) ─────────────────────── */
.app-pop {
  position: fixed; z-index: 120; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 12px 34px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.05);
  padding: .4rem; max-height: calc(100vh - 24px); overflow-y: auto;
}
.fsel-menu { display: flex; flex-direction: column; gap: .25rem; }
.fsel-search { margin: .1rem .1rem .15rem; }
.fsel-list { display: flex; flex-direction: column; gap: 1px; max-height: 300px; overflow-y: auto; }
.fsel-opt {
  display: flex; align-items: center; gap: .5rem; width: 100%; padding: .48rem .55rem;
  border: none; background: transparent; border-radius: 8px; cursor: pointer;
  font-family: inherit; font-size: .86rem; color: var(--ink); text-align: left;
}
.fsel-opt:hover { background: var(--hover); }
.fsel-opt.sel { background: var(--surface-2); }
.fsel-opt-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsel-opt-count { flex-shrink: 0; font-family: var(--mono); }
.fsel-opt-check { display: inline-flex; color: var(--blue); flex-shrink: 0; }
.fsel-opt-check svg { width: 15px; height: 15px; }
/* Live-monitoring badge (queue picker trigger + dropdown rows). */
.fsel-livedot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); animation: mp-pulse 2.6s ease-in-out infinite; }

/* ── Date-range field + calendar ───────────────────────────────────────────── */
.drf { display: flex; flex-direction: column; gap: .3rem; }
.drf-label { font-size: .76rem; color: var(--muted); font-weight: 500; }
.drf-head {
  display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  padding: .5rem .6rem; cursor: pointer; font-family: inherit; font-size: .88rem; color: var(--ink);
}
.drf-head:hover { border-color: var(--muted-2); }
.drf.drf-open .drf-head { border-color: var(--muted-2); box-shadow: 0 0 0 3px rgba(32,32,29,.05); }
.drf-ico { display: inline-flex; color: var(--muted); flex-shrink: 0; }
.drf-cap { flex: 1; min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drf.drf-set .drf-cap { color: var(--ink); }
.drf-clear { display: none; border: none; background: none; cursor: pointer; color: var(--muted-2); font-size: 1.05rem; line-height: 1; padding: 0 .15rem; flex-shrink: 0; }
.drf-clear:hover { color: var(--red); }
.drf.drf-set .drf-clear { display: inline-block; }
.drf-cal { padding: .2rem .1rem 0; }

.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.cal-title { font-size: .84rem; font-weight: 600; color: var(--ink); }
.cal-nav {
  border: 1px solid var(--line); background: var(--surface); border-radius: 7px; width: 26px; height: 26px;
  cursor: pointer; color: var(--ink-soft); font-size: 1.05rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.cal-nav:hover { background: var(--hover); border-color: var(--muted-2); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-wd { text-align: center; font-size: .66rem; color: var(--muted-2); padding: .15rem 0; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.cal-cell {
  border: none; background: none; border-radius: 7px; height: 30px; cursor: pointer;
  font-family: inherit; font-size: .8rem; color: var(--ink-soft);
  display: inline-flex; align-items: center; justify-content: center;
}
.cal-cell.empty { visibility: hidden; cursor: default; }
.cal-cell:hover:not(.empty):not(.sel) { background: var(--hover); }
.cal-cell.today { font-weight: 700; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.cal-cell.in-range { background: var(--blue-bg); border-radius: 0; color: var(--blue); }
.cal-cell.sel { background: var(--ink); color: #fff; font-weight: 600; }
.cal-cell.sel.start { border-radius: 7px 0 0 7px; }
.cal-cell.sel.end { border-radius: 0 7px 7px 0; }
.cal-cell.sel.start.end { border-radius: 7px; }

/* Search with a leading magnifier; height matches the filter controls (38px). */
.search-box.search-lg input {
  height: 38px; padding: 0 2rem 0 2.3rem; font-size: .92rem; border-radius: 9px;
  box-shadow: 0 1px 2px rgba(0,0,0,.02);
}
.search-box.search-lg input:focus { box-shadow: 0 0 0 3px rgba(32,32,29,.05); }
.search-box.search-lg::before {
  content: ""; position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239a958b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.search-box.search-lg .search-clear { right: .6rem; }

/* ── List rows (flat, divided, hover-tinted — NO boxes) ────────────────── */
.list { display: flex; flex-direction: column; }
.row {
  display: flex; gap: .85rem; align-items: flex-start; padding: .9rem .55rem;
  border: none; background: none; border-bottom: 1px solid var(--line-soft);
}
.list > .row:last-child { border-bottom: none; }
.row.clickable { cursor: pointer; border-radius: 10px; }
.row.clickable:hover { background: var(--hover); }
.row-main { flex: 1; min-width: 0; }
.row-title { font-weight: 600; font-size: .95rem; margin-bottom: .15rem; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.row-sub { color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
.row-meta { display: flex; gap: .55rem; align-items: center; color: var(--muted-2); font-size: .8rem; flex-wrap: wrap; }
.row-aside { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; flex-shrink: 0; }
.row-thumb { width: 120px; height: 68px; border-radius: 8px; object-fit: cover; background: var(--surface-2); flex-shrink: 0; }
.row-checkbox { margin-top: .25rem; }
/* Row ticked in a note-creation flow (Videos / Notes multi-select) — the
   hover rule would otherwise repaint a selected row grey mid-hover. */
.row.selected, .row.clickable.selected:hover { background: var(--blue-bg); border-radius: 10px; }

/* ── Chips / badges / pills ────────────────────────────────────────────── */
.chip-row { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; margin: .3rem 0; }
.chip {
  display: inline-flex; align-items: center; gap: .3rem; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 999px; padding: .12rem .6rem; font-size: .76rem; color: var(--ink-soft);
}
.chip.clickable { cursor: pointer; }
.chip.clickable:hover { background: var(--hover); }
/* Chip that navigates somewhere (queue → collection) — blue tint so it reads
   as a link, mirroring the extension's collection chips. */
.chip-link { background: var(--blue-bg); border-color: #d4ddf2; color: var(--blue); }
.chip.clickable.chip-link:hover { background: #e3eaf8; }
.chip-x { border: none; background: none; cursor: pointer; color: var(--muted-2); font-size: .9rem; line-height: 1; padding: 0; }
.chip-x:hover { color: var(--red); }
.badge {
  display: inline-block; padding: .12rem .5rem; border-radius: 6px; font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line);
}
.badge-stash { background: var(--blue-bg); color: var(--blue); border-color: transparent; }
.badge-notes { background: var(--emerald-bg); color: var(--emerald-ink); border-color: transparent; }
.badge-shared { background: var(--emerald-bg); color: var(--emerald-ink); border-color: transparent; }
.badge-pending { background: var(--amber-bg); color: var(--amber-ink); border-color: transparent; }
.badge-failed { background: #f7e3e0; color: #9a3528; border-color: transparent; }
.badge-running { background: var(--blue-bg); color: var(--blue); border-color: transparent; }
.badge-completed { background: var(--emerald-bg); color: var(--emerald-ink); border-color: transparent; }
/* Track chips (audio / video provenance & coverage) — neutral, informational,
   not clickable (mirrors the plugin's .ks-track-chip). */
.track-badges { display: inline-flex; align-items: center; gap: .3rem; }
.badge-track { text-transform: lowercase; letter-spacing: .02em; border-radius: 999px; background: var(--surface-2); color: var(--muted); border-color: var(--line); }
.pill { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .78rem; background: var(--surface-2); border: 1px solid var(--line); }

/* ── Segmented control ─────────────────────────────────────────────────── */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--surface); }
.seg button { border: none; background: transparent; padding: .38rem .8rem; cursor: pointer; font-size: .82rem; font-family: inherit; color: var(--ink-soft); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.active { background: var(--ink); color: #fff; }

/* ── Note detail / markdown ────────────────────────────────────────────── */
.note-detail { background: none; border: none; padding: 0; }
.note-actions { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line-soft); }
.disclosure { border-top: 1px solid var(--line-soft); padding: .6rem 0; }
.disclosure summary { cursor: pointer; font-weight: 600; font-size: .85rem; color: var(--ink-soft); list-style: none; }
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::before { content: "›"; display: inline-block; margin-right: .5rem; color: var(--muted-2); transition: transform .12s; }
.disclosure[open] summary::before { transform: rotate(90deg); }

.ks-md { font-size: .96rem; line-height: 1.72; color: var(--ink-soft); word-wrap: break-word; }
.ks-md h1, .ks-md h2, .ks-md h3 { color: var(--ink); margin: 1.2em 0 .5em; line-height: 1.3; }
.ks-md h1 { font-size: 1.4em; } .ks-md h2 { font-size: 1.2em; } .ks-md h3 { font-size: 1.05em; }
.ks-md p { margin: .75em 0; }
.ks-md ul, .ks-md ol { margin: .65em 0; padding-left: 1.5em; }
.ks-md li { margin: .28em 0; }
.ks-md a { color: var(--blue); text-decoration: underline; }
.ks-md code { background: var(--surface-2); padding: .12em .35em; border-radius: 5px; font-size: .9em; }
.ks-md pre { background: var(--surface-2); padding: .9em 1em; border-radius: 10px; overflow-x: auto; border: 1px solid var(--line); }
.ks-md pre code { background: none; padding: 0; }
.ks-md blockquote { border-left: 3px solid var(--line); padding-left: 1em; color: var(--muted); margin: .75em 0; }
.ks-md table { border-collapse: collapse; margin: .75em 0; font-size: .9em; }
.ks-md th, .ks-md td { border: 1px solid var(--line); padding: .4em .6em; text-align: left; }
.ks-md hr { border: none; border-top: 1px solid var(--line); margin: 1.3em 0; }
.ks-md img { max-width: 100%; border-radius: 8px; }

/* ── Composer (Ask / quick note — the one intentional input surface) ───── */
.composer { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: .9rem 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.02); }
.composer input[type="text"], .composer textarea { border: none; background: none; box-shadow: none !important; padding: .35rem .15rem; font-size: .98rem; }
.composer input:focus, .composer textarea:focus { border: none; box-shadow: none !important; }
.composer textarea { min-height: 3em; }
.composer-row { display: flex; gap: .5rem; align-items: center; margin-top: .5rem; flex-wrap: wrap; }
.composer-row .spacer { flex: 1; }
.prompt-bar { display: flex; align-items: center; gap: .5rem; background: var(--blue-bg); border: 1px solid #dbe3f3; border-radius: 9px; padding: .35rem .65rem; font-size: .8rem; margin-bottom: .5rem; }
.prompt-bar .pb-id { font-family: var(--mono); color: var(--blue); }

/* ── Chat composer (note creation — Home + video detail) ────────────────── */
/* A separate URL field sits ABOVE the composer (Home), never inside its box. */
.url-field { display: flex; align-items: center; gap: .55rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: .1rem .85rem; margin-bottom: .7rem; box-shadow: 0 1px 2px rgba(0,0,0,.02); transition: border-color .15s ease, box-shadow .15s ease; }
.url-field:focus-within { border-color: var(--muted-2); box-shadow: 0 0 0 3px rgba(0,0,0,.035); }
.url-field svg { color: var(--muted-2); flex-shrink: 0; }
.url-field input { flex: 1; min-width: 0; border: none !important; background: none !important; box-shadow: none !important; outline: none; font-family: inherit; font-size: .95rem; color: var(--ink); padding: .62rem 0; }
.url-field input::placeholder { color: var(--muted-2); }

.chatbox { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: .55rem .65rem .55rem .85rem; box-shadow: 0 1px 2px rgba(0,0,0,.02); transition: border-color .15s ease, box-shadow .15s ease; }
.chatbox:focus-within { border-color: var(--muted-2); box-shadow: 0 0 0 3px rgba(0,0,0,.035); }
.chatbox-input { width: 100%; border: none !important; background: none !important; box-shadow: none !important; outline: none; resize: none; font-family: inherit; font-size: .98rem; line-height: 1.5; color: var(--ink); padding: .35rem .15rem; min-height: 40px; max-height: 260px; box-sizing: border-box; }
.chatbox-input::placeholder { color: var(--muted-2); }
.chatbox.locked .chatbox-input { color: var(--muted); cursor: default; }
.chatbox-bottom { display: flex; align-items: center; gap: .5rem; margin-top: .2rem; }
.chatbox-grow { flex: 1; }
.chatbox-plus { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.chatbox-cost { white-space: nowrap; }
.chatbox-cancel { flex-shrink: 0; border: none; background: none; cursor: pointer; color: var(--muted); font-size: .8rem; font-family: inherit; padding: 0 .3rem; }
.chatbox-cancel:hover { color: var(--ink); }

.chatbox-linked { display: flex; align-items: center; gap: .5rem; background: var(--blue-bg); border: 1px solid #dbe3f3; border-radius: 9px; padding: .3rem .35rem .3rem .6rem; font-size: .8rem; color: var(--ink-soft); margin-bottom: .45rem; }
.chatbox-linked-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chatbox-linked-id { font-family: var(--mono); color: var(--blue); }
.chatbox-linked-x { flex-shrink: 0; border: none; background: none; cursor: pointer; color: var(--muted); font-size: 1.05rem; line-height: 1; padding: 0 .25rem; }
.chatbox-linked-x:hover { color: var(--ink); }
/* Advisory cost-estimate warnings (estimate_warnings flag) — amber, informational,
   never blocks send. One line per warning message, rendered verbatim. */
.chatbox-warn { display: flex; flex-direction: column; gap: .3rem; background: var(--amber-bg); border: 1px solid #ecd9a6; border-radius: 9px; padding: .45rem .6rem; font-size: .8rem; line-height: 1.45; color: var(--amber-ink); margin-bottom: .45rem; }

.plus-trigger { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; font-family: inherit; transition: background-color .15s ease, color .15s ease, transform .15s ease; }
.plus-trigger:hover:not(:disabled) { background: var(--hover); color: var(--ink); }
.plus-trigger.active { background: var(--hover); color: var(--ink); transform: rotate(45deg); }
.plus-trigger:disabled { opacity: .5; cursor: default; }
.plus-tags { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.plus-tag { flex-shrink: 0; padding: .2rem .5rem; font-size: .72rem; font-family: inherit; color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.plus-tag:hover { background: var(--hover); color: var(--ink); }

.chat-send { flex-shrink: 0; display: inline-flex; align-items: stretch; height: 34px; border-radius: 9px; overflow: hidden; background: var(--red); transition: background-color .15s ease; }
.chat-send:hover:not(.busy):not(.off) { background: var(--red-700); }
.chat-send.busy, .chat-send.off { background: var(--muted-2); }
.chat-send.off .chat-send-main { cursor: default; }
.chat-send-main { display: inline-flex; align-items: center; justify-content: center; width: 36px; border: none; background: transparent; color: #fff; cursor: pointer; font-family: inherit; transition: transform .12s ease; }
.chat-send-main:active:not(:disabled) { transform: scale(.94); }
.chat-send-main:disabled { cursor: default; }
.chat-send-arrow { font-size: 1.15rem; font-weight: 700; line-height: 1; }
.chat-send-spin { display: none; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.chat-send.busy .chat-send-arrow { display: none; }
.chat-send.busy .chat-send-spin { display: inline-block; }
.chat-send-div { width: 1px; background: rgba(255,255,255,.28); flex-shrink: 0; }
.chat-send-chev { display: inline-flex; align-items: center; justify-content: center; width: 26px; border: none; background: transparent; color: #fff; cursor: pointer; }
.chat-send-chev:hover, .chat-send-chev.active { background: rgba(0,0,0,.10); }

/* "+" options drop-up + model chevron menu (both portaled to <body>). */
.pm-menu { position: fixed; z-index: 120; min-width: 250px; max-width: 300px; max-height: calc(100vh - 24px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 34px rgba(0,0,0,.17), 0 2px 8px rgba(0,0,0,.06); padding: .35rem; display: flex; flex-direction: column; gap: 1px; }
.pm-row { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .55rem .6rem; font-size: .86rem; font-family: inherit; text-align: left; color: var(--ink); background: transparent; border: none; border-radius: 8px; cursor: pointer; }
.pm-row:hover:not(:disabled) { background: var(--hover); }
.pm-row:disabled { opacity: .45; cursor: default; }
.pm-ico { flex-shrink: 0; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.pm-ico svg { width: 18px; height: 18px; }
.pm-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-right { flex-shrink: 0; display: inline-flex; align-items: center; gap: .4rem; color: var(--muted-2); }
.pm-sub { font-size: .74rem; color: var(--muted); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-check { color: var(--blue); display: inline-flex; }
.pm-check svg { width: 16px; height: 16px; }
.pm-chev svg { width: 15px; height: 15px; display: block; }
.pm-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; font-size: .7rem; font-weight: 600; color: var(--blue); background: var(--blue-bg); border: 1px solid #c7d3ee; border-radius: 9px; }
.pm-divider { height: 1px; margin: .3rem; background: var(--line-soft); }

.mc-menu { position: fixed; z-index: 120; min-width: 170px; max-height: calc(100vh - 24px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.14); padding: .3rem; display: flex; flex-direction: column; gap: 1px; }
.mc-item { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .45rem .55rem; font-size: .84rem; font-family: inherit; text-align: left; color: var(--ink); background: transparent; border: none; border-radius: 7px; cursor: pointer; }
.mc-item:hover { background: var(--hover); }
.mc-item.active { background: var(--surface-2); }
.mc-name { flex: 1; }
.mc-check { color: var(--muted); }
/* Section chrome for the combined Model + Tracks menu. */
.mc-sec { padding: .3rem .55rem .15rem; font-size: .66rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-2); }
.mc-div { height: 1px; margin: .25rem .2rem; background: var(--line-soft); }
.mc-hint { flex-shrink: 0; font-size: .7rem; color: var(--muted-2); }

/* Queue: the two note-action buttons (synthesize one / one per video). */
.queue-note-actions { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.queue-note-actions .btn { flex: 1; min-width: 200px; }

/* ── Streaming note card ───────────────────────────────────────────────── */
.stream-card { background: none; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.3rem; }
.skeleton-bar { height: 11px; border-radius: 6px; background: linear-gradient(90deg, var(--line-soft), var(--surface-2), var(--line-soft)); background-size: 200% 100%; animation: shimmer 1.4s infinite; margin: .5rem 0; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Progress dots / marching bar (queue, bulk) ────────────────────────── */
.dots-grid { display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0; }
.dot { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.dot.running { background: var(--blue); animation: pulse 1s ease-in-out infinite; }
.dot.done { background: var(--emerald); }
.dot.failed { background: var(--red); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.marching { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.3) 0 8px, transparent 8px 16px); background-size: 200% 100%; animation: march 1s linear infinite; }
@keyframes march { to { background-position: 32px 0; } }

/* ── Collection / prompt picker (modal bodies) ─────────────────────────── */
.coll-picker, .prompt-picker { display: flex; flex-direction: column; gap: .6rem; }
.coll-picker-input { width: 100%; }
.coll-picker-results { max-height: 280px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.coll-picker-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .5rem .7rem; cursor: pointer; border-bottom: 1px solid var(--line-soft); overflow-wrap: anywhere; }
.coll-picker-row:last-child { border-bottom: none; }
.coll-picker-row:hover { background: var(--hover); }
.coll-picker-row.create { color: var(--blue); font-weight: 600; }
.prompt-row { flex-direction: column; align-items: flex-start; }

/* ── Pagination / empty / loading ──────────────────────────────────────── */
.pagination { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; font-size: .85rem; color: var(--muted); margin-top: 1.2rem; }
.pagination .pg-info { margin-right: .5rem; }
.empty-state { text-align: center; padding: 3.5rem 1rem; color: var(--muted); }
.empty-state-msg { font-size: 1rem; margin-bottom: .4rem; color: var(--ink-soft); }
.loading-row { display: flex; align-items: center; gap: .5rem; padding: 1.6rem; color: var(--muted); justify-content: center; }
.spinner { display: inline-block; width: .85rem; height: .85rem; border: 2px solid var(--line); border-top-color: var(--ink); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Notices ───────────────────────────────────────────────────────────── */
.notice { padding: .75rem 1rem; background: var(--amber-bg); border: 1px solid #ecd9a6; border-radius: 10px; color: var(--amber-ink); font-size: .85rem; margin: .6rem 0; }
.notice.info { background: var(--blue-bg); border-color: #d4ddf2; color: var(--blue); }
.notice.error { background: #f8e7e4; border-color: #ecc6bf; color: #9a3528; }
.notice.success { background: var(--emerald-bg); border-color: #c5e3cf; color: var(--emerald-ink); }

/* ── Toast (admin.js creates .toast nodes; styled here) ────────────────── */
.toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
.toast { padding: .7rem 1rem; border-radius: 10px; background: #2b2823; color: #fff; font-size: .85rem; box-shadow: 0 6px 18px rgba(0,0,0,.16); max-width: 380px; opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease; pointer-events: auto; }
.toast.toast-visible { opacity: 1; transform: translateY(0); }
.toast.toast-success { background: var(--emerald-ink); }
.toast.toast-warning { background: var(--amber-ink); }
.toast.toast-error { background: #9a3528; }

/* ── Modal ─────────────────────────────────────────────────────────────── */
.modal-backdrop { position: fixed; inset: 0; background: rgba(20,18,15,.42); display: flex; align-items: flex-start; justify-content: center; z-index: 1000; padding: 6vh 1rem 2rem; overflow-y: auto; }
.modal { background: var(--surface); border-radius: 16px; max-width: 520px; width: 100%; padding: 1.6rem; box-shadow: 0 24px 60px rgba(0,0,0,.24); }
.modal h2 { margin-top: 0; }
.modal-body { margin: .6rem 0; }
.modal-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1.3rem; }

/* ── Announcements modal (system messages) — flat rows, hairline dividers ── */
.msg-toolbar { display: flex; justify-content: flex-end; padding: 0 .35rem .3rem; }
.msg-row { border-bottom: 1px solid var(--line-soft); }
.msg-row:last-child { border-bottom: none; }
.msg-head {
  display: flex; align-items: center; gap: .55rem; width: 100%; padding: .6rem .35rem;
  border: none; background: none; cursor: pointer; font-family: inherit; text-align: left; border-radius: 8px;
}
.msg-head:hover { background: var(--hover); }
.msg-ico { display: inline-flex; flex-shrink: 0; color: var(--muted); }
.msg-ico svg { width: 15px; height: 15px; }
.msg-row.unread .msg-ico { color: var(--blue); }
.msg-row.unread.warn .msg-ico { color: var(--amber-ink); }
.msg-title { flex: 1; min-width: 0; font-size: .9rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-row.unread .msg-title { font-weight: 600; color: var(--ink); }
.msg-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex-shrink: 0; }
.msg-date { font-size: .74rem; color: var(--muted-2); flex-shrink: 0; }
.msg-body { padding: .1rem .35rem .8rem 2.05rem; font-size: .88rem; }
.msg-body :first-child { margin-top: 0; }

/* ── Monitor panel (queue.html — the monitor-queue identity section) ─────
   Flat (no box), separated by a coloured LEFT ACCENT + whitespace, matching
   the app's no-boxes language. Accent: emerald = live, amber = needs
   attention (no enabled source / still setting up), grey = paused. */
.mp { border-left: 3px solid var(--line); padding: .15rem 0 .35rem 1rem; margin: 0 0 1.6rem; }
.mp--live { border-left-color: var(--emerald); }
.mp--warn { border-left-color: var(--amber); }
.mp--off .mp-sec, .mp--off .mp-row, .mp--off .mp-slot, .mp--off .mp-src-add,
.mp--off .mp-schedrow, .mp--off .mp-cadence { opacity: .55; }

.mp-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.mp-title { font-weight: 600; font-size: .98rem; letter-spacing: -0.01em; }
.mp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); flex-shrink: 0; }
.mp-dot.on { background: var(--emerald); animation: mp-pulse 2.6s ease-in-out infinite; }
.mp-dot.warn { background: var(--amber); animation: mp-pulse-warn 2.6s ease-in-out infinite; }  /* after .on — amber wins */
.mp-dot.busy { background: var(--amber); animation: mp-blink 1s ease-in-out infinite; }
@keyframes mp-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(47,125,86,.35); } 50% { box-shadow: 0 0 0 4px rgba(47,125,86,0); } }
@keyframes mp-pulse-warn { 0%,100% { box-shadow: 0 0 0 0 rgba(217,145,14,.35); } 50% { box-shadow: 0 0 0 4px rgba(217,145,14,0); } }
@keyframes mp-blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.mp-status { margin: .1rem 0 0 1.35rem; font-size: .8rem; color: var(--muted-2); }
.mp-status--live { display: flex; align-items: center; gap: .4rem; color: var(--emerald-ink); font-weight: 600; }
.mp-livedot { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); flex-shrink: 0; animation: mp-blink 1s ease-in-out infinite; }

/* Check-now pill */
.mp-check { flex-shrink: 0; padding: .28rem .8rem; font-size: .8rem; font-weight: 550; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-soft); cursor: pointer; font-family: inherit; transition: background .12s ease, border-color .12s ease; }
.mp-check:hover:not(:disabled) { background: var(--hover); border-color: var(--muted-2); }
.mp-check:disabled { color: var(--muted-2); cursor: default; }

/* Toggle switch (master + slot rows). .warn = amber "on, needs attention"
   (armed auto-note / sourceless master) — the knob sits in the ON position. */
.mp-switch { position: relative; flex-shrink: 0; width: 32px; height: 18px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--line-soft); cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.mp-switch.on { background: var(--emerald); border-color: var(--emerald); }
.mp-switch.warn { background: var(--amber); border-color: var(--amber); }
.mp-switch:disabled { opacity: .5; cursor: default; }
.mp-switch--setup { cursor: default; }        /* non-interactive setup indicator stays vivid */
.mp-switch--setup:disabled { opacity: 1; }
.mp-knob { position: absolute; top: 1px; left: 1px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s ease; }
.mp-switch.on .mp-knob, .mp-switch.warn .mp-knob { transform: translateX(14px); }

/* Sections / rows */
.mp-sec { margin-top: .8rem; font-size: .82rem; font-weight: 650; color: var(--ink); }
.mp-row { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; row-gap: .3rem; margin-top: .45rem; }
.mp-div { height: 1px; background: var(--line-soft); border: none; margin: .8rem 0 .15rem; }
.mp-hint { margin-top: .3rem; font-size: .78rem; color: var(--muted-2); }
.mp-none { font-size: .8rem; color: var(--muted-2); font-style: italic; }
.mp-box { margin-top: .5rem; padding: .5rem .7rem; border-radius: 8px; font-size: .8rem; line-height: 1.5; word-break: break-word; }
.mp-box--info { background: var(--emerald-bg); border: 1px solid #c5e3cf; color: var(--emerald-ink); }
.mp-box--warn { background: var(--amber-bg); border: 1px solid #ecd9a6; color: var(--amber-ink); }
.mp-box--err { background: #f8e7e4; border: 1px solid #ecc6bf; color: #9a3528; }

/* Source chips (click body to edit; × removes) */
.mp-chip { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; padding: .16rem .5rem .16rem .6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); font-size: .8rem; color: var(--ink-soft); }
.mp-chip--editing { border-color: #d4ddf2; background: var(--blue-bg); }
.mp-chip-edit { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; padding: 0; border: none; background: none; cursor: pointer; font-family: inherit; font-size: .8rem; color: inherit; }
.mp-chip-edit:disabled { cursor: default; }
.mp-chip-edit:hover:not(:disabled) .mp-chip-text { text-decoration: underline; }
.mp-chip-ico { flex-shrink: 0; width: 12px; height: 12px; color: var(--muted); display: inline-flex; }
.mp-chip-ico svg { width: 12px; height: 12px; }
.mp-chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }

/* Full-width dashed add (empty Sources — carries the section) */
.mp-src-add { display: flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; margin-top: .45rem; padding: .6rem; font-size: .88rem; font-weight: 600; border: 1px dashed var(--muted-2); border-radius: 9px; background: var(--surface); color: var(--muted); cursor: pointer; font-family: inherit; }
.mp-src-add:hover:not(:disabled) { border-color: var(--ink-soft); color: var(--ink); }
.mp-src-add:disabled { opacity: .5; cursor: default; }

/* Add/edit-source form — one of the few intentional input surfaces. */
.mp-form { margin-top: .5rem; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.mp-form .seg { margin-bottom: .55rem; }
.mp-form-foot { display: flex; align-items: center; gap: .45rem; margin-top: .6rem; }
.mp-inrow { display: flex; align-items: center; gap: .45rem; margin-top: .55rem; flex-wrap: wrap; }
.mp-inlabel { font-size: .8rem; font-weight: 550; color: var(--muted); flex-shrink: 0; }
.mp-num { width: 64px; padding: .3rem .45rem; font-size: .84rem; }
.mp-opt { display: flex; align-items: center; gap: .4rem; margin-top: .55rem; font-size: .8rem; color: var(--muted); cursor: pointer; }
.mp-opt input { width: 14px; height: 14px; margin: 0; flex-shrink: 0; }
/* Native date input: unset renders as dashes, not the browser's scaffold. */
.mp-datewrap { position: relative; display: inline-flex; }
.mp-date { width: auto; padding: .3rem .45rem; font-size: .84rem; }
.mp-date--empty:not(:focus)::-webkit-datetime-edit { color: transparent; }
.mp-date-ph { position: absolute; left: .55rem; top: 50%; transform: translateY(-50%); font-size: .84rem; letter-spacing: 1px; color: var(--muted-2); pointer-events: none; }
.mp-x { flex-shrink: 0; padding: 0 .25rem; font-size: 1.05rem; line-height: 1; color: var(--muted-2); background: none; border: none; cursor: pointer; font-family: inherit; }
.mp-x:hover { color: var(--red); }

/* Channel autocomplete: in-flow suggestions + picked-channel bar */
.mp-sug { margin-top: .35rem; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); overflow: hidden; display: flex; flex-direction: column; }
.mp-sug-row { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .4rem .6rem; border: none; background: none; cursor: pointer; font-family: inherit; text-align: left; }
.mp-sug-row:hover { background: var(--hover); }
.mp-sug-row + .mp-sug-row { border-top: 1px solid var(--line-soft); }
.mp-sug-thumb { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.mp-sug-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mp-sug-name { font-size: .86rem; font-weight: 550; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-sug-sub { font-size: .78rem; color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-pickbar { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.mp-pick-name { font-size: .86rem; font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-pick-name--muted { font-weight: 500; color: var(--muted-2); font-style: italic; }
.mp-pick-sub { flex-shrink: 0; font-size: .78rem; color: var(--muted-2); white-space: nowrap; }

/* Automation slot rows (Auto-stash / Auto-note / Email) */
.mp-slot { display: flex; align-items: center; gap: .5rem; padding: .42rem 0; }
.mp-slot-ico { flex-shrink: 0; width: 16px; height: 16px; color: var(--muted-2); display: inline-flex; }
.mp-slot-ico svg { width: 16px; height: 16px; }
.mp-slot--on .mp-slot-ico { color: var(--emerald); }
.mp-slot--warn .mp-slot-ico { color: var(--amber); }
.mp-slot-name { flex-shrink: 0; min-width: 84px; font-size: .88rem; font-weight: 600; color: var(--ink-soft); }
.mp-slot-sub { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; color: var(--muted); }
.mp-slot-sub--off { color: var(--muted-2); }
.mp-slot-sub--warn { color: var(--amber-ink); }
.mp-slot-controls { display: inline-flex; align-items: center; gap: .35rem; flex-shrink: 0; margin-left: auto; }
.mp-slot .mp-switch { margin-left: .35rem; }
/* Compact model pill on the Auto-stash row (the default .fsel is toolbar-height). */
.mp-slot-controls .fsel { height: 28px; font-size: .78rem; padding: 0 .5rem; border-radius: 7px; }
.mp-tag { display: inline-block; margin-right: .35rem; padding: 0 .45rem; font-size: .64rem; font-weight: 650; text-transform: uppercase; letter-spacing: .03em; color: var(--emerald-ink); background: var(--emerald-bg); border: 1px solid #c5e3cf; border-radius: 999px; vertical-align: middle; }
.mp-seg-help { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 13px; height: 13px; margin-left: .3rem; border-radius: 50%; border: 1px solid currentColor; font-size: .6rem; font-weight: 700; line-height: 1; opacity: .7; user-select: none; }
.mp-notelink { padding: 0; border: none; background: none; color: var(--blue); font-family: inherit; font-size: inherit; cursor: pointer; }
.mp-notelink:hover { text-decoration: underline; }
/* Email schedule pickers ("Sends [day] at [HH:00]") */
.mp-schedrow { display: flex; align-items: center; gap: .4rem; padding: .1rem 0 .3rem 1.6rem; flex-wrap: wrap; }
.mp-timesel { width: auto; padding: .22rem .4rem; font-size: .8rem; }
.mp-nl-prompt { flex: 1; min-width: 180px; padding: .3rem .5rem; font-size: .82rem; }
/* Small segments on slot rows (Instant/Daily/Weekly, note-mode) */
.mp-seg-sm button { padding: .22rem .55rem; font-size: .74rem; }

/* Cadence slider */
.mp-cadence { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; }
.mp-cadence-label { font-size: .8rem; font-weight: 550; color: var(--muted); flex-shrink: 0; }
.mp-slider { flex: 1; min-width: 90px; max-width: 320px; height: 14px; accent-color: var(--emerald); cursor: pointer; }
.mp-slider:disabled { accent-color: var(--line); cursor: default; }
.mp-iv { flex-shrink: 0; min-width: 56px; font-size: .8rem; color: var(--ink-soft); font-weight: 550; font-family: var(--mono); }

/* Activity (lazy disclosure) */
.mp-act-toggle { display: flex; align-items: center; gap: .25rem; margin-top: .5rem; padding: .15rem 0; font-size: .8rem; font-weight: 600; color: var(--muted); background: none; border: none; cursor: pointer; font-family: inherit; }
.mp-act-toggle:hover { color: var(--ink); }
.mp-act-chev { width: 11px; height: 11px; transition: transform .15s ease; }
.mp-act-chev.open { transform: rotate(90deg); }
.mp-act { margin-top: .15rem; max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.mp-run { display: flex; align-items: center; gap: .45rem; padding: .18rem .2rem .18rem 1.1rem; border-radius: 6px; font-size: .8rem; color: var(--ink-soft); }
.mp-run:hover { background: var(--hover); }
.mp-run-dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; }
.mp-run-ico { flex-shrink: 0; width: 12px; height: 12px; color: var(--muted-2); display: inline-flex; }
.mp-run-ico svg { width: 12px; height: 12px; }
.mp-run-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-run-time { flex-shrink: 0; color: var(--muted-2); font-size: .74rem; font-family: var(--mono); }
.mp-run-trigger { flex-shrink: 0; padding: 0 .4rem; font-size: .62rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; line-height: 1.6; }
.mp-run-trigger--manual { color: var(--blue); background: var(--blue-bg); border-color: #d4ddf2; }
.mp-run-sub { margin: 0 .2rem .15rem 2.35rem; font-size: .74rem; color: var(--muted-2); line-height: 1.4; }
.mp-run-err { margin: 0 .2rem .2rem 2.35rem; padding: .3rem .5rem; border-radius: 6px; background: #f8e7e4; border: 1px solid #ecc6bf; color: #9a3528; font-size: .74rem; line-height: 1.45; word-break: break-word; user-select: text; }
.mp-run-refs { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 .2rem .25rem 2.35rem; }
.mp-ref-chip { display: inline-block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .06rem .5rem; font-size: .74rem; font-family: inherit; color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; text-decoration: none !important; cursor: pointer; }
.mp-ref-chip:hover { background: var(--hover); border-color: var(--muted-2); text-decoration: none !important; }
.mp-ref-chip--note { color: var(--emerald-ink); background: var(--emerald-bg); border-color: #c5e3cf; }
.mp-ref-chip--note:hover { background: #dceee2; }
.mp-ref-more { font-size: .74rem; color: var(--muted-2); align-self: center; }
.mp-act-more { display: block; margin: .3rem 0 .1rem 1.1rem; padding: .22rem .7rem; font-size: .78rem; font-weight: 500; color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-family: inherit; }
.mp-act-more:hover:not(:disabled) { background: var(--hover); border-color: var(--muted-2); }
.mp-act-more:disabled { color: var(--muted-2); cursor: default; }

/* Panel foot (Remove monitoring / cancel-setup) */
.mp-foot { display: flex; align-items: center; gap: .45rem; margin-top: .55rem; }
.mp-remove { margin-left: auto; border: none; background: none; cursor: pointer; color: var(--muted-2); font-size: .78rem; font-family: inherit; padding: .1rem .2rem; }
.mp-remove:hover { color: var(--red-700); text-decoration: underline; }

/* Neutral variant of the chat composer's send group — the auto-note editor's
   save-arrow is a config SAVE, deliberately NOT the brand-red hero send. */
.chatbox-neutral .chat-send { background: var(--surface); border: 1px solid var(--line); }
.chatbox-neutral .chat-send:hover:not(.busy):not(.off) { background: var(--hover); border-color: var(--muted-2); }
.chatbox-neutral .chat-send-main, .chatbox-neutral .chat-send-chev { color: var(--ink-soft); }
.chatbox-neutral .chat-send-div { background: var(--line); }
.chatbox-neutral .chat-send.busy, .chatbox-neutral .chat-send.off { background: var(--surface); border-color: var(--line-soft); }
.chatbox-neutral .chat-send.off .chat-send-main, .chatbox-neutral .chat-send.busy .chat-send-main { color: var(--muted-2); }
.chatbox-neutral .chat-send-spin { border-color: var(--line); border-top-color: var(--muted); }