/* ============================================================================
   PAPER — Mebot Selfware design system (redesign 2026-07, design_handoff_selfware_redesign)
   Loaded AFTER the legacy <style> block in dashboard.html: same-specificity
   rules here override legacy ones by cascade order. Legacy component classes
   keep working because the :root token remap below repaints them.
   Ground #F4EDE1 · card #FFFBF2 · inset #EBE1CE · ink #23180F
   terracotta #D4622A/#B04E1E · sage #94A465/#7E8C54
   Type: Anton (display) · Karla (body) · Space Mono (micro-labels)
   ========================================================================== */

:root {
  /* -- PAPER tokens -- */
  --paper: #F4EDE1;
  --card: #FFFBF2;
  --inset: #EBE1CE;
  --inset-press: #DED2B8;
  --line: #E0D4BE;
  --line-strong: #D8C9AC;
  --ink: #23180F;
  --body-c: #4A3B29;
  --body-deep: #3A2E1F;
  --muted: #8A7A63;
  /* Chevron drawn on any select that has opted out of native OS chrome.
     Stroke is --muted; a data URI can't read a custom property, so the hex is
     inlined here and this is the single place it lives. */
  --select-chevron: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238A7A63' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --faint: #A6957A;
  --terra: #D4622A;
  --terra-press: #B04E1E;
  --sage: #94A465;
  --sage-press: #7E8C54;
  --dark-raised: #3A2E1F;
  --anton: 'Anton', 'Arial Narrow', sans-serif;
  --karla: 'Karla', -apple-system, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;

  /* -- Legacy token remap: repaints every var()-driven legacy component -- */
  --bg-primary: #F4EDE1;
  --bg-secondary: #EBE1CE;
  --bg-card: #FFFBF2;
  --bg-card-hover: #F7EFDF;
  --bg-elevated: #FFFBF2;
  --orange: #D4622A;
  --orange-hover: #B04E1E;
  --orange-dim: rgba(212, 98, 42, 0.12);
  --orange-glow: rgba(212, 98, 42, 0.18);
  --green: #7E8C54;              /* sage, pressed tone for legibility on paper */
  --green-dim: rgba(148, 164, 101, 0.22);
  --blue: #8A7A63;
  --blue-dim: rgba(138, 122, 99, 0.14);
  --purple: #8A7A63;
  --purple-dim: rgba(138, 122, 99, 0.14);
  --red: #B04E1E;
  --red-dim: rgba(176, 78, 30, 0.12);
  --yellow: #B04E1E;
  --yellow-dim: rgba(176, 78, 30, 0.10);
  --cyan: #7E8C54;
  --cyan-dim: rgba(148, 164, 101, 0.20);
  --text: #23180F;               /* was undefined in legacy css */
  --text-primary: #23180F;
  --text-secondary: #4A3B29;
  --text-dim: #8A7A63;
  --text-muted: #8A7A63;
  --border: #E0D4BE;
  --border-light: #D8C9AC;
  --radius: 14px;
  --radius-sm: 10px;
  --sidebar-width: 224px;
}

/* ===== base ===== */
html { background: var(--paper); }
body {
  font-family: var(--karla);
  background: var(--paper);
  color: var(--ink);
  font-size: 13.5px;
}
::selection { background: rgba(212, 98, 42, 0.25); }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
*::-webkit-scrollbar-track { background: transparent; }
h1, h2, h3, h4 { font-family: var(--karla); color: var(--ink); }
input, textarea, select, button { font-family: var(--karla); color: var(--ink); }

@keyframes mb-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.15; } }
@keyframes mb-wave { from { transform: scaleY(1); } to { transform: scaleY(0.25); } }
@keyframes p-pop { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ===== app shell ===== */
.app { display: flex; height: 100vh; overflow: hidden; }
.main {
  margin-left: var(--sidebar-width);
  flex: 1;
  padding: 24px 32px;
  max-width: none;
  overflow-y: auto;
  background: var(--paper);
  transition: margin-left 0.15s ease;
}
body.rail .main { margin-left: 64px; }

/* ===== sidebar — full ===== */
.sidebar {
  width: var(--sidebar-width);
  background: var(--paper);
  border-right: 1.5px solid var(--line);
  position: fixed;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 12px;
  transition: width 0.15s ease;
  z-index: 50;
}
body.rail .sidebar { width: 64px; padding: 16px 0; align-items: center; }

.ps-brand { display: flex; align-items: center; gap: 8px; padding: 0 6px 10px; }
.ps-brand-dot { width: 12px; height: 12px; border-radius: 6px; background: var(--terra); flex: none; }
.ps-brand-name { flex: 1; font: 700 10.5px var(--mono); color: var(--muted); letter-spacing: 2px; }
.ps-collapse { font: 700 13px var(--mono); color: var(--muted); cursor: pointer; padding: 2px 6px; border-radius: 6px; user-select: none; background: none; border: none; }
.ps-collapse:hover { background: var(--inset); }
body.rail .ps-brand { flex-direction: column; padding: 0 0 4px; gap: 8px; }
body.rail .ps-brand-name { display: none; }

/* action buttons (TELL / ASK / BE) */
.ps-act {
  border: none; width: 100%; text-align: left;
  border-radius: 14px; padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none; box-sizing: border-box;
  font-family: var(--anton); font-size: 19px; letter-spacing: 0.5px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.ps-act .k { margin-left: auto; font: 700 10px var(--mono); }
.ps-act-tell { background: var(--terra); color: #fff; box-shadow: 0 2px 0 var(--terra-press); }
.ps-act-tell .k { color: rgba(255, 255, 255, 0.75); }
.ps-act-ask { background: var(--ink); color: var(--paper); box-shadow: 0 2px 0 #000; }
.ps-act-ask .k { color: rgba(244, 237, 225, 0.55); }
.ps-act-be { background: var(--card); color: var(--ink); border: 1.5px solid var(--line-strong); box-shadow: 0 2px 0 var(--line-strong); }
.ps-act:active { box-shadow: none !important; transform: translateY(2px); }
.ps-act.current { outline: 2.5px solid var(--sage); outline-offset: 2px; }
body.rail .ps-act {
  width: 40px; height: 40px; padding: 0; border-radius: 12px;
  align-items: center; justify-content: center; font-size: 14px; position: relative;
}
body.rail .ps-act .k, body.rail .ps-act .ps-live { display: none; }
body.rail .ps-act .p-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; border-radius: 9px; font-size: 9px; padding: 0 4px; }

.p-badge {
  min-width: 22px; height: 22px; border-radius: 11px;
  background: var(--terra); color: #fff; font: 700 11px var(--mono);
  display: inline-flex; align-items: center; justify-content: center; padding: 0 6px;
}
.p-badge.sm { min-width: 20px; height: 20px; border-radius: 10px; font-size: 10px; padding: 0 5px; }
.ps-live { width: 8px; height: 8px; border-radius: 4px; background: var(--sage); animation: mb-blink 1s infinite; margin-left: auto; flex: none; }
.ps-act-be .p-badge + .ps-live { margin-left: auto; }

.ps-label { font: 700 9px var(--mono); color: var(--faint); letter-spacing: 1.5px; padding: 12px 6px 4px; user-select: none; }
body.rail .ps-label { display: none; }
.ps-sep { display: none; }
body.rail .ps-sep { display: block; width: 26px; height: 1.5px; background: var(--line); margin: 6px 0; flex: none; }

.ps-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  color: var(--body-c); background: transparent; border: none; width: 100%; text-align: left;
  cursor: pointer; font-family: var(--karla); font-size: 13.5px; font-weight: 500; user-select: none;
  box-sizing: border-box;
}
.ps-item .ic { font: 400 13px var(--mono); width: 16px; text-align: center; color: var(--muted); flex: none; }
.ps-item .lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-item .cnt { font: 700 10px var(--mono); color: var(--faint); }
.ps-item:hover { background: var(--inset); }
.ps-item.active { background: var(--inset); color: var(--ink); font-weight: 700; }
body.rail .ps-item { width: 36px; height: 36px; padding: 0; border-radius: 10px; justify-content: center; }
body.rail .ps-item .ic { font-size: 15px; width: auto; }
body.rail .ps-item .lbl, body.rail .ps-item .cnt { display: none; }
body.rail .ps-item .p-badge { position: absolute; margin-left: 18px; margin-top: -18px; min-width: 16px; height: 16px; font-size: 8px; border-radius: 8px; }
body.rail .ps-item { position: relative; }

.ps-foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; width: 100%; }
body.rail .ps-foot { align-items: center; }
.ps-user {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 6px 0; border-top: 1.5px solid var(--line);
  cursor: pointer; position: relative; user-select: none;
}
.ps-user .av {
  width: 32px; height: 32px; border-radius: 16px; background: var(--sage); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--anton); font-size: 13px; flex: none; overflow: hidden;
}
.ps-user .av img { width: 100%; height: 100%; object-fit: cover; }
.ps-user .nm { flex: 1; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-user .st { font: 700 9px var(--mono); color: var(--sage-press); white-space: nowrap; }
.ps-user .st.demo { color: var(--terra); }
body.rail .ps-user { border-top: none; padding: 0; }
body.rail .ps-user .nm, body.rail .ps-user .st { display: none; }

/* user menu (legacy id kept) */
.user-menu {
  position: absolute; bottom: calc(100% + 8px); left: 0; right: 0;
  background: var(--card); border: 1.5px solid var(--ink); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(35, 24, 15, 0.25); z-index: 200; overflow: hidden; display: none;
}
body.rail .user-menu { left: 0; right: auto; width: 190px; }
.user-menu.open { display: block; }
.user-menu-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 10px 14px; font-size: 12.5px; font-weight: 700; color: var(--body-c);
  cursor: pointer; font-family: var(--karla);
}
.user-menu-item:hover { background: var(--inset); }
.user-menu-item.danger { color: var(--terra-press); }
.user-menu-sep { height: 1.5px; background: var(--line); }

/* ===== page scaffold ===== */
.p-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.p-h1 { font-family: var(--anton); font-size: 40px; letter-spacing: 0.5px; font-weight: 400; line-height: 1.05; color: var(--ink); margin: 0; }
.p-sub { font: 11px var(--mono); color: var(--faint); }
.p-head .spacer { margin-left: auto; }

.p-micro { font: 700 10px var(--mono); color: var(--faint); letter-spacing: 1px; }
.p-micro.dk { color: var(--muted); }
.p-hint { font-size: 11px; color: var(--faint); line-height: 1.5; }

/* chips / tabs */
.p-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--body-c);
  border: 1.5px solid var(--line-strong); border-radius: 10px; padding: 7px 14px;
  cursor: pointer; user-select: none; background: transparent; font-family: var(--karla);
  white-space: nowrap;
}
.p-chip:hover { background: var(--inset); }
.p-chip.on, .p-chip.active { background: var(--ink) !important; color: var(--paper) !important; border-color: var(--ink) !important; }
.p-chip.on:hover, .p-chip.active:hover { background: var(--ink) !important; }
.p-chip.active .mb-tab-badge, .p-chip.on .mb-tab-badge { background: var(--terra); color: #fff; }
.p-chip.active span:not(.p-badge):not(.mb-tab-badge) { color: rgba(244, 237, 225, 0.65); }
.p-chip.sage { background: var(--sage); color: var(--ink); border-color: var(--sage); }
.p-chip.dim { color: var(--faint); border-color: var(--line); }
.p-chip.sm { font-size: 12px; padding: 5px 11px; border-radius: 9px; }
.p-chiprow { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }

/* buttons */
.pb {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; font-weight: 700; font-family: var(--karla);
  border-radius: 10px; padding: 6px 12px; cursor: pointer; user-select: none;
  border: 1.5px solid transparent; background: transparent; color: var(--body-c);
  white-space: nowrap; transition: transform .1s ease, box-shadow .1s ease;
}
.pb-ghost { border-color: var(--line-strong); }
.pb-ghost:hover { background: var(--inset); }
.pb-sage { background: var(--sage); color: var(--ink); }
.pb-sage:hover { background: var(--sage-press); }
.pb-ink { background: var(--ink); color: var(--paper); }
.pb-terra { background: var(--terra); color: #fff; }
.pb-terra:hover { background: var(--terra-press); }
.pb-danger { border-color: var(--terra-press); color: var(--terra-press); }
.pb-danger:hover { background: var(--red-dim); }
.pb-link { color: var(--sage-press); padding: 6px 4px; }
.pb-lg { font-size: 13px; border-radius: 12px; padding: 9px 16px; }
.pb-xl { font-size: 14px; border-radius: 14px; padding: 13px 18px; }
.pb-hard { box-shadow: 0 2px 0 var(--terra-press); }
.pb-hard:active { box-shadow: none; transform: translateY(2px); }
.pb:disabled { opacity: 0.5; cursor: default; }

/* cards / insets / rows */
.p-card { background: var(--card); border: 1.5px solid var(--line); border-radius: 18px; padding: 18px; box-sizing: border-box; }
.p-card-t { font-family: var(--anton); font-size: 16px; letter-spacing: 0.5px; font-weight: 400; }
.p-card-t.lg { font-size: 17px; }
.p-inset { background: var(--inset); border-radius: 14px; padding: 12px 16px; box-sizing: border-box; }
.p-row {
  background: var(--card); border: 1.5px solid var(--line); border-radius: 14px;
  padding: 12px 18px; display: flex; align-items: center; gap: 14px; box-sizing: border-box;
}
.p-row.click { cursor: pointer; }
.p-row.click:hover { border-color: var(--muted); }
.p-row.hot { border-color: var(--line-strong); }
.p-rows { display: flex; flex-direction: column; gap: 9px; }

/* avatar circles */
.p-av {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-family: var(--anton); flex: none; position: relative;
  background: var(--sage); color: var(--ink); overflow: hidden;
}
.p-av img { width: 100%; height: 100%; object-fit: cover; }
.p-av.s28 { width: 28px; height: 28px; font-size: 11px; }
.p-av.s32 { width: 32px; height: 32px; font-size: 12px; }
.p-av.s38 { width: 38px; height: 38px; font-size: 14px; }
.p-av.s40 { width: 40px; height: 40px; font-size: 15px; }
.p-av.s52 { width: 52px; height: 52px; font-size: 20px; }
.p-av.s64 { width: 64px; height: 64px; font-size: 24px; }
.p-av.ink { background: var(--ink); color: var(--paper); }
.p-av.terra { background: var(--terra); color: #fff; }
.p-av.paper { background: var(--inset); color: var(--muted); }
.p-av .livedot {
  position: absolute; bottom: -1px; right: -1px; width: 10px; height: 10px; border-radius: 5px;
  background: var(--sage); border: 2px solid var(--card); animation: mb-blink 1s infinite;
}

/* escalation / alert banner */
.p-banner {
  background: var(--terra); border-radius: 16px; padding: 14px 18px;
  display: flex; align-items: center; gap: 14px; cursor: pointer; color: #fff;
}
.p-banner .n { font-family: var(--anton); font-size: 22px; color: #fff; flex: none; }
.p-banner .t { flex: 1; font-size: 13.5px; color: #fff; line-height: 1.45; }
.p-banner .act { font-size: 13px; font-weight: 700; color: var(--terra); background: #fff; border-radius: 12px; padding: 8px 14px; flex: none; }

/* search input */
.p-search {
  flex: 1; font-size: 13px; color: var(--ink); background: var(--card);
  border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 16px; font-family: var(--karla);
  min-width: 120px;
}
.p-search::placeholder { color: var(--faint); }
.p-search:focus { outline: none; border-color: var(--muted); }

/* memory indicator */
.p-memind { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; border-radius: 9px; padding: 5px 11px; white-space: nowrap; }
.p-memind.on { color: var(--ink); background: var(--inset); }
.p-memind.off { color: var(--muted); border: 1.5px solid var(--line-strong); }

/* type chips for Review queue */
.p-qtype { font: 700 8px var(--mono); background: var(--card); border-radius: 6px; padding: 2px 6px; letter-spacing: 0.5px; color: var(--ink); flex: none; }
.p-qtype.bot { background: var(--ink); color: var(--paper); }

/* toggle switch */
.p-toggle { width: 34px; height: 20px; border-radius: 10px; background: var(--line-strong); position: relative; cursor: pointer; flex: none; transition: background 0.15s; border: none; padding: 0; }
.p-toggle::after { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 8px; background: #fff; transition: left 0.15s; }
.p-toggle.on { background: var(--sage); }
.p-toggle.on::after { left: 16px; }

/* checkbox */
.p-check { width: 16px; height: 16px; border: 2px solid var(--line-strong); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; background: transparent; color: transparent; font: 700 11px var(--mono); padding: 0; }
.p-check.on { background: var(--sage); border-color: var(--sage); color: var(--ink); }

/* ===== chat bubbles + composer (ASK + BE thread) ===== */
.p-bubble { max-width: 66%; padding: 12px 16px; font-size: 13.5px; line-height: 1.55; border-radius: 16px; box-sizing: border-box; overflow-wrap: break-word; }
.p-bubble .who { display: block; font: 700 9px var(--mono); color: var(--muted); margin-bottom: 3px; letter-spacing: 0.5px; }
.p-bubble.you { align-self: flex-end; background: var(--inset); border-radius: 16px 16px 4px 16px; }
.p-bubble.bot { align-self: flex-start; background: var(--card); border: 1.5px solid var(--line-strong); border-radius: 16px 16px 16px 4px; }
.p-bubble.direct { align-self: flex-end; background: var(--terra); color: #fff; border-radius: 16px 16px 4px 16px; }
.p-bubble.direct .who { color: rgba(255, 255, 255, 0.75); }
.p-cite { font: 700 10px var(--mono); background: var(--inset); border-radius: 6px; padding: 1px 6px; cursor: pointer; white-space: nowrap; }
.p-srcline { font: 10px var(--mono); color: var(--faint); display: block; margin-top: 6px; }
.p-srcline b, .p-srcline .lnk { color: var(--sage-press); font-weight: 700; cursor: pointer; }

.p-composer {
  display: flex; gap: 10px; align-items: center;
  background: var(--card); border: 1.5px solid var(--line-strong); border-radius: 18px;
  padding: 8px 8px 8px 18px; box-sizing: border-box;
}
.p-composer textarea, .p-composer input[type="text"] {
  flex: 1; background: transparent; border: none; resize: none; font-size: 13.5px;
  font-family: var(--karla); color: var(--ink); padding: 6px 0; max-height: 120px; min-width: 0;
}
.p-composer textarea:focus, .p-composer input:focus { outline: none; }
.p-composer textarea::placeholder, .p-composer input::placeholder { color: var(--faint); }
.p-composer .voice { font: 700 10px var(--mono); color: var(--body-c); border: 1.5px solid var(--line-strong); border-radius: 12px; padding: 7px 11px; cursor: pointer; background: none; white-space: nowrap; }
.p-composer .voice.rec { background: var(--terra); border-color: var(--terra); color: #fff; }
.p-composer .send {
  width: 36px; height: 36px; border-radius: 18px; background: var(--ink); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 16px var(--mono); cursor: pointer; border: none; flex: none;
}
.p-composer .send.terra { background: var(--terra); color: #fff; }
.p-composer .scope-btn { font: 700 11px var(--mono); color: var(--ink); background: var(--inset); border-radius: 10px; padding: 6px 10px; cursor: pointer; border: none; white-space: nowrap; }

/* scope popover */
.p-pop {
  position: absolute; bottom: calc(100% + 10px); left: 0; width: 340px;
  background: var(--card); border: 1.5px solid var(--ink); border-radius: 16px; padding: 14px 16px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
  display: flex; flex-direction: column; gap: 10px; z-index: 60; animation: p-pop 0.12s ease;
}
.p-pop.hidden { display: none; } /* .hidden alone loses the cascade to .p-pop's display:flex */
.p-pop label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }

/* ===== TELL overlay ===== */
.tell-overlay {
  position: fixed; inset: 0; background: rgba(35, 24, 15, 0.45);
  display: flex; align-items: center; justify-content: center; z-index: 9000;
}
.tell-overlay.hidden { display: none; }
.tell-card {
  width: 520px; max-width: calc(100vw - 40px); background: var(--terra); border-radius: 26px; padding: 28px;
  display: flex; flex-direction: column; gap: 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  box-sizing: border-box; animation: p-pop 0.14s ease;
}
.tell-head { display: flex; align-items: center; gap: 10px; }
.tell-dot { width: 12px; height: 12px; border-radius: 6px; background: #fff; animation: mb-blink 1s infinite; }
.tell-dot.idle { animation: none; opacity: 0.45; }
.tell-rec { font: 700 13px var(--mono); color: #fff; letter-spacing: 3px; }
.tell-typebtn { margin-left: auto; font: 700 10px var(--mono); color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.5); border-radius: 12px; padding: 5px 10px; cursor: pointer; background: none; }
.tell-x { font: 700 12px var(--mono); color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.5); border-radius: 14px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: none; }
.tell-wave { display: flex; align-items: center; gap: 5px; height: 56px; justify-content: center; }
.tell-wave span { width: 6px; border-radius: 3px; background: #fff; height: 44px; transform-origin: center; animation: mb-wave 0.7s infinite alternate ease-in-out; }
.tell-wave.idle span { animation: none; transform: scaleY(0.14); opacity: 0.55; }
.tell-live { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.95); text-align: center; font-style: italic; min-height: 24px; }
.tell-cats { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; align-items: center; }
.tell-cat { font-size: 12px; font-weight: 700; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.5); border-radius: 10px; padding: 5px 12px; cursor: pointer; background: none; font-family: var(--karla); }
.tell-cat.on { background: #fff; color: var(--terra); border-color: #fff; }
.tell-cats .note { font: 10px var(--mono); color: rgba(255, 255, 255, 0.7); padding: 6px 0; }
.tell-foot { font: 700 11px var(--mono); color: #fff; text-align: center; letter-spacing: 1px; }
.tell-text {
  width: 100%; min-height: 96px; background: rgba(255, 255, 255, 0.95); border: none; border-radius: 16px;
  padding: 14px 16px; font-size: 14px; line-height: 1.6; font-family: var(--karla); color: var(--ink);
  box-sizing: border-box; resize: vertical;
}
.tell-text:focus { outline: none; }
.tell-text.hidden, .tell-tags.hidden { display: none; }
.tell-tags {
  width: 100%; background: rgba(255,255,255,0.18); border: 1.5px solid rgba(255,255,255,0.4); border-radius: 12px;
  padding: 9px 12px; font-size: 12.5px; color: #fff; font-family: var(--karla); box-sizing: border-box;
}
.tell-tags::placeholder { color: rgba(255, 255, 255, 0.65); }
.tell-tags:focus { outline: none; border-color: rgba(255,255,255,0.8); }

/* ===== BE / conversation rows ===== */
.be-mode-pill { display: inline-flex; gap: 6px; align-items: center; }
.be-mode-pill .m { font-size: 12px; font-weight: 700; color: var(--body-c); border: 1.5px solid var(--line-strong); border-radius: 10px; padding: 5px 12px; cursor: pointer; user-select: none; }
.be-mode-pill .m.on { background: var(--sage); color: var(--ink); border-color: var(--sage); }
.be-mode-pill .m.on.paused { background: var(--terra-press); color: #fff; border-color: var(--terra-press); }

/* ===== Train me ===== */
.train-stage { background: var(--sage); border-radius: 20px; padding: 26px 28px; display: flex; flex-direction: column; color: var(--ink); min-height: 380px; }
.train-q { margin: 26px 0 0; font-family: var(--anton); font-size: 32px; line-height: 1.2; max-width: 560px; font-weight: 400; }
.train-answer { background: rgba(255, 255, 255, 0.55); border-radius: 16px; padding: 14px 16px; font-size: 14px; line-height: 1.6; min-height: 56px; border: none; width: 100%; font-family: var(--karla); color: var(--ink); box-sizing: border-box; resize: vertical; }
.train-answer:focus { outline: none; background: rgba(255, 255, 255, 0.75); }
.train-side-card { background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 13px 15px; }
.train-side-card .tag { font: 700 9px var(--mono); color: var(--sage-press); }
.train-side-card .tag.warn { color: var(--terra-press); }
.train-side-card p { margin: 5px 0 0; font-size: 13px; line-height: 1.5; color: var(--body-c); }

/* ===== dark in-call surface ===== */
.call-shell { position: fixed; inset: 0; background: var(--ink); z-index: 800; display: flex; flex-direction: column; color: var(--paper); }
.call-stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 40%, var(--dark-raised), var(--ink)); overflow: hidden; }
.call-bar { flex: 0 0 84px; display: flex; align-items: center; justify-content: center; gap: 12px; border-top: 1.5px solid rgba(244, 237, 225, 0.15); }
.call-btn { width: 48px; height: 48px; border-radius: 24px; border: 1.5px solid rgba(244, 237, 225, 0.35); background: transparent; color: var(--paper); display: inline-flex; align-items: center; justify-content: center; font: 700 16px var(--mono); cursor: pointer; position: relative; }
.call-btn.lit { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.call-btn .flag { position: absolute; bottom: -4px; right: -4px; font: 700 8px var(--mono); background: var(--terra-press); color: #fff; border-radius: 6px; padding: 1px 4px; }
.call-btn .flag.on { background: var(--sage); color: var(--ink); }
.call-end { height: 48px; border-radius: 24px; background: var(--terra); color: #fff; border: none; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; padding: 0 26px; cursor: pointer; font-family: var(--karla); }
.call-caption { position: absolute; bottom: 18px; left: 22px; max-width: 420px; background: rgba(35, 24, 15, 0.75); border-radius: 14px; padding: 10px 14px; font-size: 13.5px; line-height: 1.55; }
.call-topleft { position: absolute; top: 18px; left: 22px; font: 700 11px var(--mono); color: var(--sage); }
.call-topright { position: absolute; top: 16px; right: 22px; display: flex; gap: 8px; align-items: center; }

/* ===== settings grid ===== */
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.set-row { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.set-row.inset { background: var(--inset); border-color: var(--inset); }
.set-row.danger { border-color: var(--terra-press); }
.set-row .t { font-size: 13px; font-weight: 700; flex: 1; }
.set-row.danger .t { color: var(--terra-press); }
.set-row .d { font-size: 12px; color: var(--muted); }
.set-seg { flex: 1; text-align: center; border: 1.5px solid var(--line-strong); border-radius: 12px; padding: 12px 0; font-size: 13px; font-weight: 700; cursor: pointer; user-select: none; background: none; font-family: var(--karla); color: var(--ink); }
.set-seg.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.set-stat { flex: 1; background: var(--inset); border-radius: 12px; padding: 12px 14px; }
.set-stat .n { font-family: var(--anton); font-size: 22px; }
.set-stat .l { font-size: 12px; color: var(--muted); }

/* ===== admin phone card (PH.7, feat/admin-phone-card-search) =====
   The user's assigned Twilio number as the headline of the admin user
   popup, with a type-to-find combo box over the spare pool (Change / empty
   state) and an in-card buy step — no dropdown, no separate user picker. */
.ph-card { border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.ph-top { display: flex; align-items: center; gap: 10px; }
.ph-top .t { font-size: 13px; font-weight: 700; flex: 1; }
.ph-body { display: flex; align-items: center; gap: 12px; }
.ph-body .meta { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ph-body .meta .num { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: 0.2px; }
.ph-body .meta .line { font-size: 12px; color: var(--muted); }
.ph-label-row { display: flex; align-items: center; gap: 8px; flex: none; }
.ph-dot { width: 8px; height: 8px; border-radius: 4px; background: var(--sage); display: inline-block; flex: none; }
.ph-dot.off { background: var(--line-strong); }
.ph-combo { display: flex; flex-direction: column; }
.ph-search-row { display: flex; align-items: center; gap: 8px; }
.ph-search-row .sp { flex: 1; }
.ph-search-row .p-search { flex: 1; }
.ph-ic { width: 16px; height: 16px; flex: none; stroke: var(--muted); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.p-combo-menu { background: var(--card); border: 1.5px solid var(--line-strong); border-radius: 12px; margin-top: 6px; overflow: hidden; box-shadow: 0 10px 30px rgba(35, 24, 15, 0.18); }
.p-combo-menu .opt { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.p-combo-menu .opt:last-child { border-bottom: none; }
.p-combo-menu .opt:hover { background: var(--inset); }
.p-combo-menu .opt.hi { background: var(--inset); }
.p-combo-menu .opt .n { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--ink); flex: none; }
.p-combo-menu .opt .n b { background: rgba(148, 164, 101, 0.35); border-radius: 3px; padding: 0 1px; font-weight: 700; font-style: normal; }
.p-combo-menu .opt .l { font-size: 12px; color: var(--muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-combo-menu .opt .r { font: 11px var(--mono); color: var(--faint); flex: none; }
.p-combo-menu .foot { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--inset); font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.p-combo-menu .foot .sp { flex: 1; }
.ph-list { border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.ph-list .row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.ph-list .row:last-child { border-bottom: none; }
.ph-list .row .n { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--ink); width: 150px; flex: none; }
.ph-list .row .l { font-size: 12px; color: var(--muted); flex: 1; min-width: 0; }

/* ===== persona ===== */
.pers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.pers-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--card); overflow: hidden; display: block; }
.pers-bar > span { display: block; height: 100%; background: var(--ink); border-radius: 4px; }
.pers-tag { font-size: 12px; background: var(--inset); border-radius: 8px; padding: 4px 10px; display: inline-block; }

/* ===== modals (PAPER) ===== */
.p-modal-overlay { position: fixed; inset: 0; background: rgba(35, 24, 15, 0.45); display: flex; align-items: center; justify-content: center; z-index: 8000; padding: 20px; }
.p-modal-overlay.hidden { display: none; }
.p-modal { background: var(--paper); border-radius: 24px; padding: 26px 28px; box-sizing: border-box; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; gap: 14px; width: 560px; max-width: 100%; max-height: 90vh; overflow-y: auto; animation: p-pop 0.14s ease; }
.p-modal-t { font-family: var(--anton); font-size: 22px; letter-spacing: 0.5px; font-weight: 400; }
.p-modal-x { font: 700 14px var(--mono); color: var(--muted); cursor: pointer; background: none; border: none; padding: 0 4px; }
.p-field-in { width: 100%; background: var(--card); border: 1.5px solid var(--line-strong); border-radius: 12px; padding: 11px 14px; font-size: 13px; line-height: 1.6; color: var(--body-c); font-family: var(--karla); box-sizing: border-box; }
.p-field-in:focus { outline: none; border-color: var(--muted); }
.p-field-in.auto { width: auto; flex: none; }

/* Generic data table (2026-09-04). Until now every table in the app was a bare
   <table> with inline-styled cells; this is the house one. Plain <th>/<td>,
   td.mono for numbers and phones, td.dim for empty cells, tr.click for rows
   that open something. */
.p-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.p-table th { text-align: left; font: 700 10px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--faint); padding: 10px 12px; border-bottom: 1.5px solid var(--line); white-space: nowrap; }
.p-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.p-table tr:last-child td { border-bottom: none; }
.p-table tr.click { cursor: pointer; }
.p-table tr.click:hover td { background: var(--inset); }
.p-table td.mono { font-family: var(--mono); font-size: 12px; }
.p-table td.dim, .p-table .dim { color: var(--faint); }

/* ===== legacy primitive overrides (repaint everything untouched) ===== */
.btn {
  padding: 6px 12px; background: transparent; border: 1.5px solid var(--line-strong);
  border-radius: 10px; color: var(--body-c); font-size: 12px; font-weight: 700; cursor: pointer;
  transition: background 0.12s; font-family: var(--karla);
}
.btn:hover { background: var(--inset); border-color: var(--line-strong); }
.btn-primary { background: var(--sage); border-color: var(--sage); color: var(--ink); }
.btn-primary:hover { background: var(--sage-press); border-color: var(--sage-press); }
.card { background: var(--card); border: 1.5px solid var(--line); border-radius: 18px; }
.page-header h1 { font-family: var(--anton); font-size: 40px; letter-spacing: 0.5px; font-weight: 400; }
.page-header .sub { font: 11px var(--mono); color: var(--faint); }
.modal { background: var(--paper); border: none; border-radius: 24px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45); }
.modal h3 { font-family: var(--anton); font-size: 20px; letter-spacing: 0.5px; font-weight: 400; }
.modal-overlay { background: rgba(35, 24, 15, 0.45); }
.toast { background: var(--ink); color: var(--paper); border: none; border-radius: 12px; font-weight: 700; font-family: var(--karla); box-shadow: 0 10px 30px rgba(35, 24, 15, 0.35); }
.toast.error { background: var(--terra-press); color: #fff; }
.toast.success { background: var(--sage); color: var(--ink); }
.conn-badge { background: var(--inset); color: var(--muted); border: 1.5px solid var(--line-strong); font: 700 9px var(--mono); letter-spacing: 1px; border-radius: 10px; }
.conn-badge.live { background: var(--sage); color: var(--ink); border-color: var(--sage); }
.conn-badge.demo { background: var(--terra); color: #fff; border-color: var(--terra); }
.filter-btn { background: transparent; border: 1.5px solid var(--line-strong); border-radius: 10px; color: var(--body-c); font-size: 12px; font-weight: 700; font-family: var(--karla); }
.filter-btn:hover { background: var(--inset); }
.filter-btn.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.login-overlay { background: var(--paper); }
.login-box { background: var(--card); border: 1.5px solid var(--line); border-radius: 24px; box-shadow: 0 18px 44px rgba(35, 24, 15, 0.18); }
.login-btn { background: var(--terra); color: #fff; border: none; border-radius: 14px; font-weight: 700; box-shadow: 0 2px 0 var(--terra-press); }
.login-btn:active { box-shadow: none; transform: translateY(2px); }
.login-input { background: var(--card); border: 1.5px solid var(--line-strong); border-radius: 12px; color: var(--ink); }
.spinner { border-color: var(--line); border-top-color: var(--terra); }
input[type="text"], input[type="email"], input[type="number"], input[type="url"], textarea, select {
  font-family: var(--karla);
}
.memory-item { background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; }
.memory-item:hover { border-color: var(--muted); background: var(--card); }
.memory-tag { background: var(--inset); color: var(--muted); border-radius: 8px; }
.expand-toggle { color: var(--sage-press); font-weight: 700; }
.stat-card { background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; }
.detail-panel { background: var(--paper); border-left: 1.5px solid var(--line); }
.mb-drawer { background: var(--paper); border-left: 1.5px solid var(--ink); }

/* legacy nav classes still referenced by badges inside new sidebar */
.nav-live-dot { width: 8px; height: 8px; border-radius: 4px; background: var(--sage); animation: mb-blink 1s infinite; display: inline-block; }
.nav-badge { font: 700 10px var(--mono); border-radius: 10px; padding: 1px 6px; }
.nb-green { background: var(--green-dim); color: var(--sage-press); }
.nb-orange { background: var(--terra); color: #fff; }
.nb-blue { background: var(--blue-dim); color: var(--muted); }

/* ===== library ===== */
.lib-icon { font: 400 17px var(--mono); color: var(--muted); flex: none; width: 22px; text-align: center; }
.lib-kind { font: 700 9px var(--mono); color: var(--sage-press); }

/* speaker bars (library detail) */
.spk-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.spk-row .nm { flex: 0 0 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spk-row .bar { flex: 1; height: 8px; border-radius: 4px; background: var(--inset); overflow: hidden; }
.spk-row .bar > span { display: block; height: 100%; border-radius: 4px; background: var(--ink); }
.spk-row .bar > span.me { background: var(--sage); }
.spk-row .pct { font: 700 10px var(--mono); color: var(--faint); }
.spk-guess { font: 700 8px var(--mono); color: var(--terra-press); }

/* ===== mobile ===== */
.m-home { display: none; }
.m-topbar { display: none; }
@media (max-width: 760px) {
  body:not(.m-page-open) .sidebar { display: none; }
  body.m-page-open .sidebar { display: none; }
  .main { margin-left: 0 !important; padding: 14px; padding-bottom: 76px; }
  body.m-home-open .main > .page.active { display: none; }
  .m-home {
    display: flex; flex-direction: column; gap: 12px;
    position: fixed; inset: 0; background: var(--paper); z-index: 700;
    padding: 18px 14px calc(18px + env(safe-area-inset-bottom));
    box-sizing: border-box;
  }
  .m-home.hidden { display: none; }
  .m-brand { display: flex; align-items: center; justify-content: space-between; padding: 0 6px; }
  .m-brand .l { display: inline-flex; align-items: center; gap: 8px; font: 700 10px var(--mono); color: var(--muted); letter-spacing: 2px; }
  .m-brand .dot { width: 12px; height: 12px; border-radius: 6px; background: var(--terra); }
  .m-vt { font: 700 10px var(--mono); color: var(--body-c); letter-spacing: 1px; border: 1.5px solid var(--line-strong); border-radius: 14px; padding: 6px 12px; cursor: pointer; background: none; }
  .m-card { border: none; border-radius: 26px; display: flex; cursor: pointer; position: relative; text-align: left; font-family: var(--karla); box-sizing: border-box; width: 100%; }
  .m-card:active { box-shadow: none !important; transform: translateY(3px); }
  .m-tell { flex: 1; background: var(--terra); color: #fff; padding: 18px 22px; flex-direction: column; justify-content: flex-end; box-shadow: 0 3px 0 var(--terra-press); }
  /* sized for the 7-char CAPTURE label (was 30vw for 4-char TELL) */
  .m-tell .big { font-family: var(--anton); font-size: min(88px, 21vw); line-height: 0.85; letter-spacing: -1px; color: #fff; }
  .m-tell .hint { font: 700 12px var(--mono); letter-spacing: 0.5px; margin-top: 12px; color: #fff; }
  .m-ask { flex: 0 0 150px; background: var(--ink); color: var(--paper); border-radius: 26px; padding: 18px 22px; flex-direction: column; justify-content: space-between; box-shadow: 0 3px 0 #000; }
  .m-ask .big { font-family: var(--anton); font-size: 76px; line-height: 0.9; letter-spacing: -1px; }
  .m-ask .hint { font-size: 12px; color: rgba(244, 237, 225, 0.65); align-self: flex-end; }
  /* SEND — the outbound verb gets its own card (IA redesign); terra accent on
     the border/text only — a neutral shadow so it sits with the other cards. */
  .m-send { flex: 0 0 62px; background: var(--card); border: 1.5px solid var(--terra); border-radius: 22px; padding: 0 20px; align-items: center; gap: 12px; box-shadow: 0 3px 0 var(--line-strong); }
  .m-send .big { font-family: var(--anton); font-size: 26px; line-height: 1; color: var(--terra-press); }
  .m-send .sub { margin-left: auto; font-size: 12px; color: var(--muted); text-align: right; }
  .m-be { flex: 0 0 96px; background: var(--card); border: 1.5px solid var(--line-strong); border-radius: 26px; padding: 0 20px; align-items: center; gap: 12px; box-shadow: 0 3px 0 var(--line-strong); }
  .m-be .big { font-family: var(--anton); font-size: 34px; line-height: 1; }
  .m-be .p-badge { min-width: 32px; height: 32px; border-radius: 16px; font-size: 14px; padding: 0 8px; }
  .m-be .sub { margin-left: auto; font-size: 12px; line-height: 1.45; color: var(--muted); text-align: right; }
  .m-me { flex: 0 0 54px; background: var(--inset); border-radius: 20px; padding: 0 18px; align-items: center; gap: 10px; }
  .m-me:active { background: var(--inset-press); }
  .m-me .big { font-family: var(--anton); font-size: 20px; }
  .m-me .sub { flex: 1; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-corner { position: absolute; top: 16px; right: 18px; font: 700 10px var(--mono); border: 1.5px solid rgba(255, 255, 255, 0.5); border-radius: 12px; padding: 5px 10px; color: #fff; }
  .m-ask .m-corner { border-color: rgba(244, 237, 225, 0.4); color: var(--paper); }
  .m-topbar {
    display: flex; position: sticky; top: 0; z-index: 60; background: var(--paper);
    align-items: center; gap: 10px; padding: 8px 2px 10px; border-bottom: 1.5px solid var(--line); margin-bottom: 12px;
  }
  .m-topbar .back { font: 700 16px var(--mono); background: none; border: none; color: var(--ink); cursor: pointer; padding: 4px 8px; }
  .m-topbar .t { font-family: var(--anton); font-size: 18px; letter-spacing: 0.5px; flex: 1; }
  .m-topbar .p-badge { margin-left: auto; }
  .m-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 750; background: var(--paper);
    border-radius: 22px 22px 0 0; box-shadow: 0 -18px 44px rgba(35, 24, 15, 0.3);
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 4px;
    animation: p-pop 0.16s ease;
  }
  .m-sheet.hidden { display: none; }
  /* The sheet grew account actions (Switch account / Sign out), so cap it and
     let it scroll rather than run off a short phone. */
  .m-sheet { max-height: 82dvh; overflow-y: auto; }
  .p-h1 { font-size: 30px; }
  .set-grid, .pers-grid { grid-template-columns: 1fr; }
  .tell-card { border-radius: 22px; padding: 20px; }
  .p-bubble { max-width: 88%; }
}
@media (min-width: 761px) {
  .m-home { display: none !important; }
  .m-sheet { display: none !important; }
}

/* ============================================================================
   Wave 2 — PAPER overrides for feature-module-rendered internals.
   These repaint markup that mebots.js / chat.js / app.js render with legacy
   classes, without touching their JS logic.
   ========================================================================== */

/* ---- mebots / BE internals ---- */
.mb-tabs { margin-bottom: 2px; }
.p-chip .mb-tab-badge { margin-left: 2px; }
.mb-btn-mini {
  font-size: 12px; font-weight: 700; color: var(--body-c); background: transparent;
  border: 1.5px solid var(--line-strong); border-radius: 10px; padding: 6px 12px; cursor: pointer;
  font-family: var(--karla);
}
.mb-btn-mini:hover { background: var(--inset); }
.mb-btn-mini.mb-btn-primary, .mb-btn-primary { background: var(--sage); border-color: var(--sage); color: var(--ink); }
.mb-btn-grant { box-shadow: none; }
.mb-inbox-row, .mb-req-item {
  background: var(--card); border: 1.5px solid var(--line); border-radius: 14px;
}
.mb-inbox-row:hover, .mb-req-item:hover { border-color: var(--muted); background: var(--card); }
.mb-av, .mb-req-av, .mb-grant-av, .mb-fav-av, .mb-mebot-av, .mb-drawer-grantee-av {
  font-family: var(--anton) !important; font-weight: 400 !important; color: #fff;
}
.mb-section-hdr h3 { font-family: var(--anton); font-size: 15px; letter-spacing: 0.5px; font-weight: 400; }
.mb-section-sub { font: 700 10px var(--mono); color: var(--faint); }
.mb-summary-card { background: var(--inset); border: none; border-radius: 14px; }
.mb-summary-value { font-family: var(--anton); font-weight: 400; color: var(--ink); }
.mb-summary-label { font: 700 10px var(--mono); color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
.mb-grants-table-wrap, .mb-grants-table { background: var(--card); border-color: var(--line); border-radius: 16px; }
.mb-grants-table-head { color: var(--faint); font: 700 10px var(--mono); letter-spacing: 1px; text-transform: uppercase; }
.mb-grant-row { border-color: var(--line); }
.mb-grant-row:hover { background: var(--bg-card-hover); }
/* Sharing & Access hit targets (owner ask 2026-07-28: "setting icons too small
   and delete too small"). The ⚙ Edit-limits and ⊘ Revoke buttons were 28px
   squares sharing a hard 80px grid track — and public-link rows render a third
   (🔗 Copy) button, so that track already overflowed. Desktop goes to 32px in a
   116px track; the ≤760px block takes them to 44px, the iOS minimum. */
.mb-icon-btn { width: 32px; height: 32px; border-radius: 9px; font-size: 15px; }
.mb-grants-table-head, .mb-grant-row { grid-template-columns: 2fr 1.2fr 1.2fr 1fr 0.9fr 116px; }
.mb-grant-cell-actions { gap: 6px; }
/* Bare ✕ dismiss on a .p-row (Rules tab). Was an inline style on the button,
   which no media query could override — now a class so the phone block can. */
.pb-x { color: var(--faint); font-size: 14px; }
.mb-pill-btn {
  font-size: 12px; font-weight: 700; border: 1.5px solid var(--line-strong); border-radius: 9px;
  background: transparent; color: var(--body-c); padding: 4px 11px; cursor: pointer; font-family: var(--karla);
}
.mb-pill-btn.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.mb-empty, .mb-empty-state { color: var(--faint); }
.mb-empty-title { font-family: var(--anton); font-weight: 400; letter-spacing: 0.5px; color: var(--ink); }
.mb-drawer { box-shadow: -18px 0 44px rgba(35, 24, 15, 0.18); }
.mb-drawer-label { font: 700 10px var(--mono); color: var(--faint); letter-spacing: 1px; text-transform: uppercase; }
.mb-modal { background: var(--paper); border: none; border-radius: 24px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45); }
.mb-modal-input, .mb-drawer input[type="text"], .mb-drawer input[type="email"], .mb-drawer input[type="number"], .mb-drawer select, .mb-modal select, .mb-modal input {
  background: var(--card); border: 1.5px solid var(--line-strong); border-radius: 12px; color: var(--ink);
}
.mb-status { font: 700 9px var(--mono); }
.mb-tab-badge-hot { background: var(--terra); color: #fff; }
.mb-req-item.selected { border-color: var(--ink); }
.mb-live-dot { background: var(--sage); }

/* ---- chat / ASK messages ---- */
.chat-container { background: transparent; border: none; display: flex; flex-direction: column; height: calc(100vh - 150px); }
.chat-msgs { background: transparent; border: none; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 14px 4px; }
.msg { display: flex; gap: 10px; align-items: flex-end; max-width: 72%; align-self: flex-start; }
.msg.user { align-self: flex-end; flex-direction: row-reverse; }
.msg-av {
  width: 30px; height: 30px; border-radius: 15px; background: var(--sage) !important; color: var(--ink);
  display: flex; align-items: center; justify-content: center; font-family: var(--anton); font-size: 12px; flex: none; overflow: hidden;
}
.msg-bubble {
  background: var(--card); border: 1.5px solid var(--line-strong);
  border-radius: 16px 16px 16px 4px; padding: 12px 16px; font-size: 13.5px; line-height: 1.6; color: var(--ink);
}
.msg.user .msg-bubble { background: var(--inset); border: none; border-radius: 16px 16px 4px 16px; }
.msg-sender { font: 700 9px var(--mono) !important; color: var(--muted) !important; letter-spacing: 0.5px; }
.msg-src { font: 10px var(--mono); color: var(--faint); margin-top: 5px; }
.msg-rate button { color: var(--faint); }
.typing-dots span { background: var(--faint); }
.ask-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 2px 0 14px; border-bottom: 1.5px solid var(--line); margin-bottom: 4px;
}
.ask-head .p-chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
#chat-profile-picker select {
  background: transparent; border: 1.5px solid var(--line-strong); border-radius: 10px;
  color: var(--body-c); font-size: 12px; font-weight: 700; padding: 6px 10px; font-family: var(--karla); cursor: pointer;
  /* Its own rule, because this ID selector outranks the shared
     `select.p-field-in` one below — without it the ASK header's MODE dropdown
     keeps the grey native arrow while everything beside it is themed. */
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
#chat-profile-picker label { font: 700 10px var(--mono); color: var(--faint); letter-spacing: 1px; text-transform: uppercase; }
#chat-save-close-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.p-chip:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---- tasks rows ---- */
.task-row { background: var(--card); border: 1.5px solid var(--line) !important; border-radius: 14px; margin-bottom: 9px; padding: 12px 18px !important; }
.task-row:hover { border-color: var(--muted) !important; }
#tasks-list { border: none; background: transparent; }

/* ---- transcripts / documents rows (cards rendered by the modules) ---- */
#transcripts-list .card, #documents-list .card { border-radius: 14px; }
.tx-filter-chip { font-family: var(--karla); }

/* ---- people ---- */
.people-az-rail { color: var(--faint); }
.people-letter-badge { background: var(--ink); color: var(--paper); font-family: var(--anton); }
.contact-card { background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; }
.contact-card:hover { border-color: var(--muted); }
.contact-av { font-family: var(--anton); font-weight: 400; }

/* ---- memories: legacy cs-* scope rows + mem tabs as chips ---- */
.mem-tab {
  font-size: 12.5px; font-weight: 700; color: var(--body-c);
  border: 1.5px solid var(--line-strong); border-radius: 10px; padding: 7px 14px;
  background: transparent; cursor: pointer; font-family: var(--karla);
}
.mem-tab.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.mem-tab .badge { background: var(--terra); color: #fff; font: 700 10px var(--mono); border-radius: 9px; padding: 1px 6px; }
.mem-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.mem-controls { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.search-wrapper { position: relative; }
.search-box {
  width: 100%; font-size: 13px; color: var(--ink); background: var(--card);
  border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 16px 11px 36px; font-family: var(--karla);
}
.search-box::placeholder { color: var(--faint); }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--faint); }
.mem-sort {
  background: var(--card); border: 1.5px solid var(--line-strong); border-radius: 10px;
  color: var(--body-c); font-size: 12px; font-weight: 700; padding: 8px 10px; font-family: var(--karla); cursor: pointer;
}
.mem-bulk-bar { background: var(--inset); border: none; border-radius: 12px; }
.cs-row { background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; }
.cs-cat { font: 700 10px var(--mono); color: var(--sage-press); }
.cs-meta { font: 10px var(--mono); color: var(--faint); }
.cs-scope-btn { border-radius: 10px; font-weight: 700; }
.filter-bar { gap: 6px; }
.filter-count { color: var(--faint); }

/* ---- meetings pane (BE tab) ---- */
#be-meetings-pane .card { margin-top: 4px; }
#be-meetings-pane h2 { font-family: var(--anton); font-size: 17px; font-weight: 400; letter-spacing: 0.5px; }
#be-meetings-pane .sec-hdr h3 { font-family: var(--anton); font-size: 15px; font-weight: 400; letter-spacing: 0.5px; }

/* ---- persona page inherited bits ---- */
.persona-tab .card h2, .prompt-tab .card h2 { font-family: var(--anton); font-weight: 400; letter-spacing: 0.5px; font-size: 17px; }
.profile-label { font: 700 10px var(--mono); color: var(--faint); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
.completeness-ring text { fill: var(--ink); }

/* ---- misc legacy surfaces ---- */
.sec-hdr h3 { font-family: var(--anton); font-weight: 400; letter-spacing: 0.5px; font-size: 15px; }
.sec-link { color: var(--sage-press); font-weight: 700; }
.badge { background: var(--inset); color: var(--muted); border-radius: 8px; font-weight: 700; }
.upload-zone { background: var(--card); border: 1.5px dashed var(--line-strong); border-radius: 16px; }
.upload-zone:hover { border-color: var(--muted); }
.help-toc-item.active { color: var(--terra); }
pre { background: var(--inset) !important; border-color: var(--line) !important; color: var(--body-deep) !important; }

/* Legacy .fin fade-in freezes at opacity<1 when elements render while hidden
   (BE tab panes). PAPER uses its own entrance animation — disable .fin. */
.fin { animation: none !important; opacity: 1 !important; }

/* Rail: action buttons compress to single letters (design 8b/9a) */
.ps-act .m { display: none; }
body.rail .ps-act .w { display: none; }
body.rail .ps-act .m { display: inline; }

/* ===== State 3 — floating widget strip (design 9b) ===== */
body.widget .sidebar { display: none; }
body.widget .main { margin-left: 0; }
.p-widget {
  position: fixed; right: 18px; bottom: 18px; z-index: 850;
  width: 92px; background: var(--paper); border-radius: 20px; padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}
.p-widget.hidden { display: none; }
.pw-btn {
  height: 56px; border-radius: 14px; border: none; cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--anton); font-size: 17px; letter-spacing: 0.5px; position: relative;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.pw-tell { background: var(--terra); color: #fff; box-shadow: 0 2px 0 var(--terra-press); }
.pw-tell .s { font: 700 7px var(--mono); opacity: 0.75; }
.pw-ask { background: var(--ink); color: var(--paper); box-shadow: 0 2px 0 #000; }
.pw-be { background: var(--card); border: 1.5px solid var(--line-strong); color: var(--ink); box-sizing: border-box; }
.pw-be .p-badge { position: absolute; top: -6px; right: -6px; }
.pw-me { height: 34px; border-radius: 12px; background: var(--inset); color: var(--ink); font-size: 13px; }
.pw-me:active { background: var(--inset-press); }
.pw-btn:active { box-shadow: none; transform: translateY(2px); }
/* Rail foot gains the widget-mode button */
.ps-widgetbtn { font: 700 11px var(--mono); color: var(--muted); background: none; border: none; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.ps-widgetbtn:hover { background: var(--inset); }

/* ===== Mobile bottom pill — persistent back/home on phones ===== */
.m-navbar { display: none; }
@media (max-width: 760px) {
  .m-navbar {
    display: flex; position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 720;
    background: var(--card); border: 1.5px solid var(--line-strong);
    border-radius: 18px; box-shadow: 0 2px 0 var(--line-strong), 0 10px 30px rgba(35, 24, 15, 0.18);
    overflow: hidden;
  }
  body.m-home-open .m-navbar { display: none; }
  .m-navbar .seg {
    border: none; background: none; cursor: pointer; padding: 11px 16px;
    font: 700 14px var(--mono); color: var(--body-c); display: inline-flex; align-items: center;
  }
  .m-navbar .seg + .seg { border-left: 1.5px solid var(--line); }
  .m-navbar .seg.home { font-family: var(--anton); font-size: 14px; letter-spacing: 0.5px; color: var(--ink); }
  .m-navbar .seg.back { font-size: 18px; padding: 8px 16px 12px; }
  .m-navbar .seg.sheet { font-size: 11px; color: var(--muted); }
  .m-navbar .seg:active { background: var(--inset); }
  /* keep content clear of the pill */
  .main { padding-bottom: 88px; }

  /* The pill rides ABOVE full-screen overlays (SEND compose sheet 8000, TELL
     type card 9000) so there's always a visible way home on the phone —
     openMobileHome() closes those overlays (owner ask 2026-07-27). While the
     compose is open from the home screen, body.ss-open forces it visible. */
  .m-navbar { z-index: 9500; }
  body.ss-open .m-navbar { display: flex !important; }

  /* ASK on the phone: pin the composer inside the viewport — no scrolling to
     reach the input (owner ask 2026-07-27). The page becomes a fixed-height
     column; messages scroll internally, the header chips scroll sideways. */
  #page-ask.active { display: flex; flex-direction: column; height: calc(100dvh - 102px); }
  /* The head used to be a nowrap horizontal scroller. Nothing signalled that
     it scrolled, so video / history / "End & save to memory" were simply
     invisible on a phone (mobile audit 2026-09-02). It wraps now; the long
     strap-line goes, because the title + chips are what have to fit and
     "remembering" already says the session is being saved. */
  #page-ask .ask-head { flex-wrap: wrap; overflow-x: visible; padding-bottom: 8px; row-gap: 6px; }
  #page-ask .ask-head > * { flex-shrink: 0; }
  #page-ask .ask-head > span:first-child { flex: 0 0 auto !important; min-width: 0 !important; }
  #page-ask .ask-head .p-sub { display: none; }
  #page-ask .chat-container { height: auto; flex: 1; min-height: 0; }
  /* bigger tap target + 16px font (stops iOS auto-zoom on focus); min-width:0
     lets the input shrink so the mic + send buttons stay on-screen */
  .p-composer .chat-input { font-size: 16px; padding: 10px 6px; min-width: 0; flex: 1; }
  .p-composer .scope-btn { padding: 6px 8px; }

  /* SEND sheet: make the close affordance unmissable */
  .ss-sheet-x { width: 38px; height: 38px; border-radius: 19px; font-size: 15px; }

  /* ---- SHARING & ACCESS on the phone (owner ask 2026-07-28) ----
     The grants table is a six-column desktop grid with no mobile treatment at
     all, so at 375px the ⚙/⊘ buttons ended up as slivers in a squeezed 80px
     track. Stack each grant into a card and give every action a 44px target.
     The column head is meaningless once stacked, so it goes — and its labels
     come back per-cell, otherwise the two token meters read as an unexplained
     pair. Cell order is grantee / daily / monthly / granted / expires / actions;
     revoked rows use a different cell layout, hence the :not(). */
  .mb-grants-table-head { display: none; }
  .mb-grant-row { grid-template-columns: 1fr; gap: 8px; padding: 14px; }
  .mb-grant-row:not(.revoked) > div:nth-child(2)::before { content: 'DAILY'; }
  .mb-grant-row:not(.revoked) > div:nth-child(3)::before { content: 'MONTHLY'; }
  .mb-grant-row:not(.revoked) > div:nth-child(4)::before { content: 'GRANTED'; }
  .mb-grant-row:not(.revoked) > div:nth-child(5)::before { content: 'EXPIRES'; }
  .mb-grant-row:not(.revoked) > div:nth-child(n+2):nth-child(-n+5)::before {
    display: block; font: 700 9px var(--mono); letter-spacing: 1px;
    color: var(--faint); margin-bottom: 1px;
  }
  .mb-grant-cell-actions { justify-content: flex-start; gap: 10px; margin-top: 2px; }
  .mb-icon-btn { width: 44px; height: 44px; border-radius: 12px; font-size: 18px; }

  /* Public links + Rules tabs use text buttons on a .p-row rather than icon
     squares — same 44px floor, and let the row wrap instead of crushing them. */
  #page-sharing .p-row { flex-wrap: wrap; row-gap: 8px; }
  #page-sharing .p-row .pb { min-height: 44px; min-width: 44px; padding-left: 14px; padding-right: 14px; }
  #page-sharing .p-row .pb-x { font-size: 18px; }

  /* Mebot cards (My access · Discover) use .mb-btn-mini text buttons, which
     #137 never covered — they rendered 29px tall on a 375px screen, under the
     same iOS minimum that PR's whole point was. Same 44px floor. */
  #page-sharing .mb-mebot-card .mb-btn-mini,
  #page-sharing .mb-mebot-card .mb-fav-btn { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  #page-sharing .mb-mebot-card-foot { flex-wrap: wrap; row-gap: 8px; }

  /* ---- Mini pop-out window (body.mini, openWidgetWindow) ----
     CAPTURE + ASK only — two big voice-first buttons, nothing else (owner ask
     2026-07-27). Voice or text on both; HOME is the only way back. */
  body.mini .m-send, body.mini .m-be, body.mini .m-me { display: none !important; }
  body.mini .m-ask { flex: 1; }
  body.mini .m-sheet { display: none !important; }
  body.mini .m-navbar .seg.back, body.mini .m-navbar .seg.sheet { display: none; }
  /* ASK inside the mini window: talk or type, then back — hide everything else */
  body.mini #chat-profile-picker, body.mini #chat-style-picker,
  body.mini #ask-web-chip, body.mini #chat-video-btn,
  body.mini #chat-past-sessions-btn, body.mini #ask-scope-btn { display: none !important; }
}

/* ===== Capture default (VOICE / TEXT) — the setting above TELL/ASK/BE ===== */
.ps-capmode {
  display: flex; gap: 3px; background: var(--inset); border-radius: 10px;
  padding: 3px; margin-bottom: 2px;
}
.cm-seg {
  flex: 1; border: none; background: transparent; cursor: pointer;
  font: 700 9px var(--mono); letter-spacing: 0.5px; color: var(--muted);
  padding: 5px 0; border-radius: 8px; text-align: center;
}
.cm-seg.active { background: var(--card); color: var(--ink); box-shadow: 0 1px 0 var(--line-strong); }
body.rail .ps-capmode { display: none; }

/* ===== TELL click-to-record era ===== */
.tell-stopbtn {
  width: 100%; border: none; cursor: pointer;
  background: #fff; color: var(--terra);
  font-family: var(--anton); font-size: 20px; letter-spacing: 0.5px;
  border-radius: 16px; padding: 15px 0;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.tell-stopbtn:active { box-shadow: none; transform: translateY(3px); }
/* Recording is visible ON the CAPTURE buttons themselves (no popup in voice
   mode, owner ask 2026-07-27): they turn red with a clearly-visible pulsing
   ring; the label swaps to ■ RECORDING via tell.js#paintRecButtons. Click
   again stops + saves. NOTE: no !important here — CSS animations lose to
   !important declarations, which is exactly how the first cut of this pulse
   ended up invisible. Specificity (body.tell-rec …) already wins. */
@keyframes tell-rec-pulse {
  0%   { box-shadow: 0 3px 0 #7A140E, 0 0 0 0 rgba(179, 38, 30, 0.55); }
  70%  { box-shadow: 0 3px 0 #7A140E, 0 0 0 16px rgba(179, 38, 30, 0); }
  100% { box-shadow: 0 3px 0 #7A140E, 0 0 0 0 rgba(179, 38, 30, 0); }
}
@keyframes tell-rec-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
body.tell-rec .ps-act-tell, body.tell-rec .m-tell, body.tell-rec .pw-tell {
  background: #B3261E; color: #fff; border-color: #7A140E;
  animation: tell-rec-pulse 1.15s infinite ease-out;
}
body.tell-rec .ps-act-tell .w, body.tell-rec .m-tell .big {
  animation: tell-rec-blink 1.15s infinite ease-in-out;
}
body.tell-rec .m-tell .big, body.tell-rec .m-tell .hint { color: #fff; }

/* ============================================================================
   SEND SELF — compose dialog / sent state / entry points (design 16a-16e).
   Rendered by public/features/send.js (window.SendSelf). All class names are
   ss-* (plus the two entry-point hooks .pw-send / .ps-act-send) — none collide
   with existing rules, so this section is purely additive.
   ========================================================================== */

/* ---- entry-point hooks ---- */
.pw-send { height: 34px; border-radius: 12px; background: var(--inset); color: var(--ink); font-size: 12px; }
.pw-send:active { background: var(--inset-press); }
.ps-act-send { background: var(--inset); color: var(--ink); box-shadow: 0 2px 0 var(--line-strong); font-size: 15px; padding: 9px 14px; }

/* ---- compose scaffold ---- */
.ss-modal { gap: 14px; }
.ss-head { display: flex; align-items: baseline; justify-content: space-between; }
.ss-block { display: flex; flex-direction: column; }
.ss-label { font: 700 10px var(--mono); color: var(--faint); letter-spacing: 1px; display: block; margin-bottom: 6px; }
.ss-labelrow { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.ss-actions { display: flex; gap: 8px; }

/* ---- TO field ---- */
.ss-chipbox {
  background: var(--card); border: 1.5px solid var(--ink); border-radius: 12px;
  padding: 9px 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  cursor: text; box-sizing: border-box;
}
.ss-chipbox.mob { border-radius: 16px; padding: 11px 14px; }
.ss-chip {
  display: inline-flex; align-items: center; gap: 7px; background: var(--inset);
  border-radius: 9px; padding: 5px 10px; font-size: 13px; font-weight: 700; color: var(--ink);
}
.ss-chip .av {
  width: 20px; height: 20px; border-radius: 10px; background: var(--sage); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; font: 400 9px var(--anton); flex: none;
}
.ss-chip .tag { font: 700 8px var(--mono); color: var(--muted); }
.ss-chip .ss-chip-edit { cursor: pointer; color: var(--terra, var(--accent, #F97316)); text-decoration: underline; }
.ss-introrep { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ss-introrep-num {
  width: 56px; padding: 5px 8px; border: 1px solid var(--line, var(--border));
  border-radius: 7px; background: var(--paper, var(--bg-card)); color: var(--ink);
  font: 700 13px var(--mono); text-align: center;
}
.ss-chip .x { color: var(--muted); cursor: pointer; font: 700 11px var(--mono); }
.ss-to-input {
  flex: 1; min-width: 90px; border: none; background: transparent; padding: 2px 0;
  font: 13.5px var(--karla); color: var(--ink);
}
.ss-to-input:focus { outline: none; }
.ss-to-input::placeholder { color: var(--faint); }
.ss-emailmini {
  border: 1.5px dashed var(--line-strong); border-radius: 8px; padding: 4px 8px;
  font-size: 12px; background: var(--card); color: var(--ink); min-width: 150px; font-family: var(--karla);
}
.ss-emailmini:focus { outline: none; border-color: var(--muted); }

/* ---- autocomplete dropdown (attached below the field) ---- */
.ss-ac {
  background: var(--card); border: 1.5px solid var(--line); border-top: none;
  border-radius: 0 0 12px 12px; margin: -2px 8px 0; padding: 6px 10px;
  display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto;
}
.ss-ac.hidden { display: none; }
.ss-ac-row { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.ss-ac-row:hover { background: var(--inset); }
.ss-ac-row .av {
  width: 26px; height: 26px; border-radius: 13px; background: var(--ink); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center; font: 400 10px var(--anton); flex: none;
}
.ss-ac-row .av.new { background: transparent; border: 1.5px dashed var(--muted); color: var(--muted); font: 700 13px var(--mono); }
.ss-ac-row .nm { font-size: 13px; font-weight: 700; white-space: nowrap; }
.ss-ac-row .sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- message ---- */
.ss-message {
  width: 100%; background: var(--card); border: 1.5px solid var(--line-strong); border-radius: 12px;
  padding: 12px 14px; font: 13.5px/1.6 var(--karla); color: var(--body-deep);
  min-height: 74px; box-sizing: border-box; resize: vertical;
}
.ss-message:focus { outline: none; border-color: var(--muted); }
.ss-templates-btn { font-size: 12px; font-weight: 700; color: var(--sage-press); cursor: pointer; }
.ss-tpop {
  position: absolute; top: 26px; right: 0; z-index: 20; min-width: 200px; max-height: 240px; overflow-y: auto;
  background: var(--card); border: 1.5px solid var(--ink); border-radius: 12px; padding: 6px;
  box-shadow: 0 14px 34px rgba(35, 24, 15, 0.25); display: flex; flex-direction: column; gap: 2px;
}
.ss-tpop.hidden { display: none; }
.ss-tpop button {
  text-align: left; width: 100%; padding: 7px 10px; border-radius: 8px; border: none; background: none;
  font-size: 12.5px; font-weight: 700; color: var(--body-c); cursor: pointer; font-family: var(--karla);
}
.ss-tpop button:hover { background: var(--inset); }
.ss-tpop-empty { padding: 8px 10px; color: var(--faint); font-size: 12px; }
.ss-tchips { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; align-items: center; }
.ss-tchips.scroll { flex-wrap: wrap; }
.ss-tchip {
  font-size: 11.5px; font-weight: 700; border: 1.5px solid var(--line-strong); border-radius: 8px;
  padding: 4px 10px; cursor: pointer; background: none; color: var(--body-c); white-space: nowrap; font-family: var(--karla);
}
.ss-tchip.on { background: var(--inset); border-color: transparent; }
.ss-tsave { font-size: 11.5px; font-weight: 700; color: var(--sage-press); cursor: pointer; padding: 4px 6px; white-space: nowrap; }

/* ---- delivery ---- */
.ss-delivery { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
/* Phone: the six channel pills stack over the hint and the grant summary
   instead of sharing one row — six pills do not fit on 390px, and squeezing
   them is what cost mobile its Call / SMS / WhatsApp options. */
.ss-delivery.mob { gap: 6px; flex-direction: column; align-items: stretch; }
.ss-pills.mob { display: flex; flex-wrap: wrap; gap: 5px; }
.ss-delivery.mob .ss-grant-mini { flex: none; }
.ss-mono { font: 700 10px var(--mono); color: var(--faint); }
.ss-pills { display: inline-flex; gap: 5px; }
.ss-pill {
  font-size: 12px; font-weight: 700; border: 1.5px solid var(--line-strong); border-radius: 9px;
  padding: 5px 11px; cursor: pointer; background: none; color: var(--body-c); font-family: var(--karla);
}
.ss-pill.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ss-hint { font-size: 11.5px; color: var(--muted); }

/* ---- auto-grant summary + expander ---- */
.ss-grant { background: var(--inset); border-radius: 12px; padding: 10px 14px; }
.ss-grant-row { display: flex; align-items: center; gap: 10px; }
.ss-mono2 { font: 700 9px var(--mono); color: var(--muted); }
.ss-grant-summary { flex: 1; font-size: 12.5px; color: var(--body-c); }
.ss-grant-mini { flex: 1; font-size: 11px; color: var(--muted); text-align: right; }
.ss-change { font-size: 12px; font-weight: 700; color: var(--sage-press); cursor: pointer; white-space: nowrap; }
.ss-grant-expander {
  margin-top: 12px; border-top: 1.5px solid var(--line-strong); padding-top: 12px;
  display: flex; flex-direction: column; gap: 12px;
}
.ss-grant-expander.hidden { display: none; }
.ss-exp-field { display: flex; flex-direction: column; gap: 6px; }
.ss-sub { font: 700 9px var(--mono); color: var(--faint); letter-spacing: 0.5px; display: flex; align-items: baseline; gap: 8px; }
.ss-exp-val { font: 700 11px var(--karla); color: var(--body-c); letter-spacing: 0; }
.ss-range { width: 100%; accent-color: var(--terra); }
.ss-segrow { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ss-seg {
  font-size: 11.5px; font-weight: 700; border: 1.5px solid var(--line-strong); border-radius: 9px;
  padding: 5px 12px; cursor: pointer; background: none; color: var(--body-c); font-family: var(--karla);
}
.ss-seg.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ss-select {
  background: var(--card); border: 1.5px solid var(--line-strong); border-radius: 10px;
  padding: 8px 10px; font-size: 12.5px; font-weight: 700; color: var(--body-c);
  font-family: var(--karla); cursor: pointer; max-width: 100%;
}
.ss-remember { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; color: var(--body-c); }

/* ---- sent state (16b) ---- */
.ss-sent-head { display: flex; align-items: center; gap: 10px; }
.ss-sent-check {
  width: 44px; height: 44px; border-radius: 22px; background: var(--sage); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; font: 700 20px var(--mono); flex: none;
}
.ss-sent-titles { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ss-sent-for { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.ss-linkrow {
  background: var(--card); border: 1.5px solid var(--line-strong); border-radius: 12px;
  padding: 11px 14px; display: flex; align-items: center; gap: 10px;
}
.ss-url { flex: 1; min-width: 0; font: 12.5px var(--mono); color: var(--body-c); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-copy {
  font-size: 12px; font-weight: 700; color: var(--ink); background: var(--inset); border: none;
  border-radius: 9px; padding: 6px 12px; cursor: pointer; font-family: var(--karla); flex: none;
}
.ss-sharerow { display: flex; gap: 7px; flex-wrap: wrap; }
.ss-note { background: var(--inset); border-radius: 12px; padding: 10px 14px; font-size: 12.5px; line-height: 1.55; color: var(--body-c); }
.ss-another { display: block; text-align: center; font-size: 12px; font-weight: 700; color: var(--sage-press); cursor: pointer; }

/* ---- mobile full-height sheet (16c) ---- */
.ss-sheet {
  position: fixed; inset: 0; background: var(--paper); box-sizing: border-box;
  display: flex; flex-direction: column; gap: 10px; overflow-y: auto;
  padding: 60px 14px calc(16px + env(safe-area-inset-bottom));
}
.ss-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 2px; }
.ss-sheet-title { font: 400 26px var(--anton); }
.ss-sheet-title .dim { color: var(--faint); }
.ss-sheet-x {
  font: 700 13px var(--mono); color: var(--body-c); background: none; cursor: pointer;
  border: 1.5px solid var(--line-strong); border-radius: 15px; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
}
.ss-message.mob { flex: 1 1 auto; min-height: 120px; border-radius: 16px; font-size: 14px; }
.ss-mobile-cta {
  margin-top: 4px; width: 100%; border: none; cursor: pointer; background: var(--terra); color: #fff;
  border-radius: 20px; padding: 17px; text-align: center; font: 400 22px var(--anton); letter-spacing: 1px;
  box-shadow: 0 3px 0 var(--terra-press);
}
.ss-mobile-cta:active { box-shadow: none; transform: translateY(3px); }
.ss-mobile-cta:disabled { opacity: 0.6; }
.ss-mobile-foot { font-size: 11.5px; color: var(--faint); text-align: center; padding: 8px 0 0; }

/* ============================================================================
   Themed <select> chrome
   ---------------------------------------------------------------------------
   Every field class here paints a background, a border and a radius — but none
   of them stopped the browser drawing its own dropdown on top, so a select
   rendered as a grey OS control sitting next to its themed neighbours (owner
   report 2026-09-02: "they look like default HTML form elements"). Opt out of
   the native chrome and draw our own chevron.

   Deliberately scoped to the field classes rather than bare `select`: the
   in-call device pickers and the older admin panels set `background` inline as
   a shorthand, which would wipe this chevron out and leave a select with no
   arrow at all.
   ========================================================================== */
select.p-field-in, select.login-input, select.ss-select, select.mb-modal-input,
.mb-modal select, .mb-drawer select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 12px center;
  /* !important because several admin panels set `padding` inline as a
     shorthand; without it the chevron sits on top of the option text. */
  padding-right: 30px !important;
}

/* ===== calendar (K-CAL page — features/calendar.js) ===== */
.cal-card { background: var(--card); border: 1.5px solid var(--line); border-radius: 18px; padding: 18px; box-sizing: border-box; }
.cal-dayhdr { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 0 10px 0; }
.cal-dayhdr .dow { font: 700 10px var(--mono); letter-spacing: 1px; color: var(--faint); }
.cal-dayhdr .num { font-size: 16px; font-weight: 800; color: var(--ink); line-height: 26px; }
.cal-dayhdr.wknd .num { color: var(--muted); }
.cal-dayhdr.today .dow { color: var(--terra); }
.cal-dayhdr.today .num { color: #fff; background: var(--terra); border-radius: 13px; width: 26px; height: 26px; text-align: center; }
.cal-gutter { width: 56px; flex: none; display: flex; flex-direction: column; }
.cal-gutter .h { height: 52px; font: 10px var(--mono); color: var(--faint); padding-top: 2px; }
.cal-gutter .allday { font: 700 9px var(--mono); letter-spacing: 1px; color: var(--faint); }
.cal-lane { border-top: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line); }
.cal-allday-grid { flex: 1; display: grid; grid-auto-rows: 30px; gap: 0; background-image: linear-gradient(to right, transparent calc(100% - 1.5px), var(--line) calc(100% - 1.5px)); }
.cal-grid { flex: 1; display: grid; gap: 0; position: relative; background-image: linear-gradient(to right, transparent calc(100% - 1.5px), var(--line) calc(100% - 1.5px)), linear-gradient(to bottom, var(--line) 1.5px, transparent 1.5px); }
.cal-ev { margin: 2px 5px 0 4px; background: var(--card); border: 1.5px solid var(--line-strong); border-radius: 10px; padding: 4px 8px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; z-index: 1; box-sizing: border-box; cursor: pointer; }
.cal-ev:hover { border-color: var(--muted); }
.cal-ev .t { font-size: 12px; font-weight: 700; color: var(--ink); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev .d { font: 10px var(--mono); color: var(--muted); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev.short { flex-direction: row; align-items: center; gap: 6px; padding: 0 8px; }
.cal-ev.link { border-color: var(--sage-press); }
.cal-ev .mk { align-self: flex-start; font: 700 9px var(--mono); letter-spacing: 0.5px; color: var(--ink); background: var(--sage); border-radius: 8px; padding: 2px 6px; line-height: 1.2; }
.cal-allday-ev { margin: 4px 6px; background: var(--inset); border-radius: 8px; padding: 0 10px; display: flex; align-items: center; font-size: 12px; font-weight: 700; color: var(--body-c); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }