/* ==========================================================================
   ClawDeck · ui.css
   Standardized UI components for deck.medkronos.com.
   Built on the tokens in global.css (AME-style system).

   Contents
   1. Buttons            5. Badges, chips & tags    9. Tabs
   2. Form fields        6. Alerts                  10. Popups & modals
   3. Checkbox/Radio/    7. Cards                   11. Toast stack &
      Switch             8. Login                   12. Breakout boxes
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-xs);
  padding: 0.6em 1.2em;
  font-size: var(--font-md);
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  color: var(--text-primary);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), box-shadow var(--transition-fast),
              transform var(--transition-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); border-color: var(--border-strong); text-decoration: none; }
.btn:active { transform: translateY(0) scale(0.98); }

.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }

.btn-danger {
  background: transparent;
  border-color: var(--color-danger);
  color: var(--color-danger);
}
.btn-danger:hover { background: var(--color-danger); color: #fff; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-tertiary); color: var(--text-primary); }

.btn-sm { padding: 0.4em 0.85em; font-size: var(--font-sm); border-radius: var(--radius-sm); }
.btn-lg { padding: 0.8em 1.6em; font-size: var(--font-lg); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.5; pointer-events: none; }

.iconbtn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1em; height: 2.1em;
  padding: 0;
  font-size: var(--font-md);
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.iconbtn:hover { background: var(--bg-tertiary); color: var(--text-primary); }

/* joined half-buttons — [ theme | settings ] united control */
.btn-joined {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
}
.joined-half {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2em; height: 2em;
  background: var(--bg-tertiary);
  border: 0;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.joined-half + .joined-half { border-left: 1px solid var(--border); }
.joined-half:hover { background: var(--color-primary-dark); color: #fff; }
[data-theme="light"] .joined-half:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }

.badge {
  position: absolute; top: -2px; right: -4px;
  min-width: 1.15em; padding: 0 0.3em;
  font-size: 0.62rem; font-weight: 700; line-height: 1.5;
  text-align: center;
  color: #fff;
  background: var(--color-danger);
  border-radius: var(--radius-full);
}


/* --------------------------------------------------------------------------
   2. Form fields
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--space-2xs); margin-bottom: var(--space-md); }
.field > span {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-secondary);
}
.field .hint { font-size: var(--font-xs); color: var(--text-muted); }

input[type="text"], input[type="password"], input[type="search"],
input[type="number"], input[type="email"], textarea, select {
  width: 100%;
  padding: 0.55em 0.8em;
  font-size: var(--font-md);
  color: var(--text-primary);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
}
textarea { resize: vertical; min-height: 6em; line-height: 1.5; font-family: var(--font-mono); font-size: var(--font-sm); }

.field.invalid input { border-color: var(--color-danger); }


/* --------------------------------------------------------------------------
   3. Checkbox · radio · switch  (custom, circle-in-circle homage to AME)
   -------------------------------------------------------------------------- */
.check {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  cursor: pointer; user-select: none;
  font-size: var(--font-sm);
  color: var(--text-secondary);
}
.check input { position: absolute; opacity: 0; width: 0; height: 0; }

.check .box, .check .dot {
  flex: 0 0 auto;
  width: 1.15em; height: 1.15em;
  border: 2px solid var(--border-strong);
  background: var(--bg-inset);
  transition: border-color var(--transition-fast), background var(--transition-fast),
              box-shadow var(--transition-fast);
}
.check .box { border-radius: var(--radius-sm); }
.check .dot { border-radius: 50%; }

.check input:checked + .box {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.check input:checked + .box::after {
  content: "✓"; display: grid; place-items: center;
  height: 100%; color: #fff; font-size: 0.8em; font-weight: 800;
}
.check input:checked + .dot {
  border-color: var(--color-primary);
  background:
    radial-gradient(circle, var(--color-primary) 0 38%, transparent 42%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.check input:focus-visible + .box,
.check input:focus-visible + .dot {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.check:hover .box, .check:hover .dot { border-color: var(--color-primary-muted); }

/* switch */
.switch { position: relative; display: inline-flex; align-items: center; gap: var(--space-xs); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 2.4em; height: 1.3em;
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  transition: background var(--transition-fast);
  position: relative;
}
.switch .track::after {
  content: "";
  position: absolute; top: 50%; left: 2px;
  width: 0.95em; height: 0.95em;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--text-muted);
  transition: left var(--transition-med) var(--ease-out), background var(--transition-fast);
}
.switch input:checked + .track { background: var(--color-secondary-dark); border-color: var(--color-secondary-dark); }
.switch input:checked + .track::after { left: calc(100% - 1.05em); background: #fff; }


/* --------------------------------------------------------------------------
   4-5. Badges, chips & tags
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.25em 0.75em;
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.chip-model { color: var(--color-primary-bright); }
.chip-think { color: var(--color-accent-bright); }

.tag {
  display: inline-block;
  padding: 0.1em 0.55em;
  font-size: var(--font-xs);
  font-weight: 600;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}
.tag-success { background: var(--color-success-light); color: var(--color-success-dark); }
.tag-warning { background: var(--color-warning-light); color: var(--color-warning-dark); }
.tag-danger  { background: var(--color-danger-light);  color: var(--color-danger-dark); }


/* --------------------------------------------------------------------------
   6. Alerts
   -------------------------------------------------------------------------- */
.alert {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid;
  font-size: var(--font-sm);
  margin-bottom: var(--space-md);
}
.alert-info    { background: var(--color-info-light);    border-color: var(--color-info);    color: var(--color-info-dark); }
.alert-success { background: var(--color-success-light); border-color: var(--color-success); color: var(--color-success-dark); }
.alert-warning { background: var(--color-warning-light); border-color: var(--color-warning); color: var(--color-warning-dark); }
.alert-danger  { background: var(--color-danger-light);  border-color: var(--color-danger);  color: var(--color-danger-dark); }


/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border);
  font-weight: 650;
}
.card-body { padding: var(--space-md); }


/* --------------------------------------------------------------------------
   8. Login
   -------------------------------------------------------------------------- */
.login-body {
  display: grid; place-items: center;
  min-height: 100dvh;
  background:
    radial-gradient(1200px 500px at 80% -10%, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent),
    radial-gradient(900px 420px at 10% 110%, color-mix(in srgb, var(--color-secondary) 10%, transparent), transparent),
    var(--bg-app);
  padding: var(--space-md);
}
.login-card {
  width: min(94vw, 380px);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
}
.login-logo { font-size: 3rem; line-height: 1; margin-bottom: var(--space-xs); }
.login-card h1 { margin-bottom: var(--space-2xs); }
.login-card p { margin-bottom: var(--space-lg); }
.login-card form { text-align: left; }


/* --------------------------------------------------------------------------
   9. Tabs
   -------------------------------------------------------------------------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: var(--space-md); }
.tab {
  padding: 0.5em 1em;
  font-size: var(--font-sm); font-weight: 600;
  color: var(--text-muted);
  background: transparent; border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.tab:hover { color: var(--text-primary); }
.tab.active { color: var(--color-primary-bright); border-bottom-color: var(--color-primary); }

/* Info popup (top-bar ⓘ / "?") — shortcuts, How-Tos, setup */
.info-tabs { margin-bottom: var(--space-sm); }
.info-pane { max-height: 52vh; overflow-y: auto; padding-right: var(--space-2xs); }
.info-group { margin-bottom: var(--space-md); }
.info-grouphead {
  font-size: var(--font-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-muted);
  margin: var(--space-sm) 0 var(--space-2xs);
}
.info-row {
  display: flex; align-items: baseline; gap: var(--space-sm);
  padding: 0.22em 0;
}
.info-keys { flex: 0 0 auto; min-width: 9.5em; display: inline-flex; flex-wrap: wrap; gap: 3px; }
.info-desc { color: var(--text-secondary); font-size: var(--font-sm); }
.info-howto { margin-bottom: var(--space-md); }
.info-howtobody { margin: var(--space-2xs) 0 0; color: var(--text-secondary); font-size: var(--font-sm); line-height: 1.5; }
.kbd {
  display: inline-block; padding: 0.05em 0.45em;
  font-family: var(--font-mono); font-size: 0.78em; line-height: 1.5;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm, 4px);
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   10. Popups & modals
   -------------------------------------------------------------------------- */
.popup-backdrop {
  position: fixed; inset: 0;
  background: var(--overlay);
  backdrop-filter: blur(3px);
  z-index: var(--z-popup);
  animation: fade-in var(--transition-med) var(--ease-out);
}
.popup {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(94vw, 560px);
  max-height: 84dvh;
  display: flex; flex-direction: column;
  background: var(--bg-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: calc(var(--z-popup) + 1);
  animation: pop-in var(--transition-med) var(--ease-out);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.popup-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border);
}
.popup-title { font-weight: 700; }
.popup-body { padding: var(--space-md); overflow-y: auto; }
.popup-foot {
  display: flex; justify-content: flex-end; gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--border);
}
.popup-foot:empty { display: none; }


/* --------------------------------------------------------------------------
   10b. Search overlay (AME-style quick search: bar on top, results beneath)
   -------------------------------------------------------------------------- */
.search-overlay {
  position: fixed; inset: 0;
  z-index: var(--z-popup);
  background: var(--overlay);
  backdrop-filter: blur(3px);
  display: flex; justify-content: center; align-items: flex-start;
  padding: 9vh var(--space-md) var(--space-md);
  animation: fade-in var(--transition-med) var(--ease-out);
}
.search-box {
  width: min(94vw, 620px);
  max-height: 78dvh;
  display: flex; flex-direction: column;
  background: var(--bg-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.search-inputrow {
  display: flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border);
}
.search-inputrow input {
  flex: 1; min-width: 0;
  border: 0; background: transparent;
  font-size: var(--font-md);
  outline: none;
  box-shadow: none;
}
.search-results { overflow-y: auto; padding: var(--space-xs) var(--space-md); }
.search-hint { padding: var(--space-md) 0; }
.search-group {
  font-size: var(--font-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-muted);
  margin: var(--space-sm) 0 var(--space-2xs);
}
.search-item {
  display: block; width: 100%; text-align: left;
  padding: 0.5em 0.65em;
  border: 0; border-radius: var(--radius-md);
  background: none; cursor: pointer;
  color: var(--text-primary);
}
.search-item:hover { background: var(--bg-tertiary); }
.search-item .si-title { display: block; font-size: var(--font-sm); font-weight: 600; }
.search-item .si-sub { display: block; font-size: var(--font-xs); color: var(--text-muted); }
.search-foot {
  display: flex; justify-content: center;
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--border);
}

/* --------------------------------------------------------------------------
   10c. Durable chat search
   -------------------------------------------------------------------------- */
#popup:has(.chat-search) { width: min(94vw, 760px); }
.chat-search { display: grid; gap: var(--space-md); }
.chat-search-query {
  display: flex; align-items: center; gap: var(--space-xs);
  padding: 0 var(--space-sm); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); color: var(--text-muted); background: var(--bg-secondary);
}
.chat-search-query input { flex: 1; min-width: 0; border: 0; box-shadow: none; background: transparent; padding-left: 0; }
.chat-search-query input:focus { outline: none; border-color: transparent; }
.chat-search-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.chat-search-filter { display: grid; gap: var(--space-2xs); min-width: 0; }
.chat-search-label { font-size: var(--font-xs); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.chat-search-filter input[type="date"] { min-width: 0; width: 100%; padding: .45em .55em; font-size: var(--font-sm); }
.chat-search-scope { display: flex; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); }
.chat-search-scope button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: .42em .3em; border: 0; border-right: 1px solid var(--border); color: var(--text-secondary); background: var(--bg-secondary); cursor: pointer; font-size: var(--font-xs); }
.chat-search-scope button:last-child { border-right: 0; }
.chat-search-scope button:hover { background: var(--bg-tertiary); }
.chat-search-scope button.active { background: var(--color-primary); color: #fff; }
.chat-search-model-filter { grid-column: 1 / -1; }
.chat-search-hintrow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
.chat-search-global { border: 0; background: none; padding: 0; color: var(--color-primary); cursor: pointer; font-size: var(--font-xs); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.chat-search-global:hover { opacity: .8; }
.chat-search-model-actions { display: flex; gap: var(--space-xs); }
.chat-search-models { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); max-height: 7.5rem; overflow-y: auto; padding: var(--space-xs); border: 1px solid var(--border); border-radius: var(--radius-md); }
.chat-search-models .check { font-size: var(--font-xs); }
.chat-search-status { min-height: 1.2em; }
.chat-search-results { display: grid; gap: var(--space-2xs); min-height: 3.5rem; }
.chat-search-result { display: grid; gap: 2px; width: 100%; padding: var(--space-sm); text-align: left; color: var(--text-primary); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; }
.chat-search-result:hover { background: var(--bg-tertiary); border-color: var(--border-strong); }
.chat-search-result-title { font-size: var(--font-sm); font-weight: 700; }
.chat-search-result-snippet { font-size: var(--font-sm); color: var(--text-secondary); }
.chat-search-result-meta { font-size: var(--font-xs); color: var(--text-muted); }
.chat-search-result mark { padding: 0 .08em; color: inherit; background: var(--color-accent-light); border-radius: 2px; }
.chat-search-pager { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-sm); }
.chat-search-pager [data-page-info] { margin-right: auto; }
@media (max-width: 560px) {
  .chat-search-filters { grid-template-columns: 1fr 1fr; }
  .chat-search-filters > :first-child { grid-column: 1 / -1; }
}


/* --------------------------------------------------------------------------
   11. Toast stack & toasts (stacked notifications: log/warn/error/confirm)
   -------------------------------------------------------------------------- */
.toast-stack {
  position: fixed;
  right: var(--space-md); bottom: var(--space-md);
  display: flex; flex-direction: column-reverse; gap: var(--space-xs);
  width: min(92vw, 360px);
  z-index: var(--z-toast);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; gap: var(--space-sm); align-items: flex-start;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--color-info);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: var(--font-sm);
  animation: toast-in var(--transition-med) var(--ease-out);
}
.toast.leaving { animation: toast-out var(--transition-med) var(--ease-out) forwards; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(8px) scale(0.97); }
}
.toast-icon { font-size: 1.1em; line-height: 1.3; }
.toast-msg { flex: 1; color: var(--text-primary); }
.toast-msg .toast-title { font-weight: 700; display: block; }
.toast-msg .toast-sub { color: var(--text-muted); font-size: var(--font-xs); }
.toast-x {
  background: none; border: 0; cursor: pointer;
  color: var(--text-muted); font-size: 0.9em; padding: 0.2em;
}
.toast-x:hover { color: var(--text-primary); }

.toast-info    { border-left-color: var(--color-info); }
.toast-success { border-left-color: var(--color-success); }
.toast-warning { border-left-color: var(--color-warning); }
.toast-error   { border-left-color: var(--color-danger); }
.toast-confirm { border-left-color: var(--color-accent); }
.toast-confirm .toast-actions { display: flex; gap: var(--space-xs); margin-top: var(--space-xs); }


/* --------------------------------------------------------------------------
   12. Breakout boxes (AME-style callouts)
   -------------------------------------------------------------------------- */
.breakout {
  border: 1px solid var(--border);
  border-left: 4px solid var(--color-info);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-info) 7%, var(--bg-primary));
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-md) 0;
}
.breakout-title {
  font-size: var(--font-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-info);
  margin-bottom: var(--space-2xs);
}
.breakout-success { border-left-color: var(--color-success); background: color-mix(in srgb, var(--color-success) 7%, var(--bg-primary)); }
.breakout-success .breakout-title { color: var(--color-success); }
.breakout-warning { border-left-color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 8%, var(--bg-primary)); }
.breakout-warning .breakout-title { color: var(--color-warning); }
.breakout-danger { border-left-color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 7%, var(--bg-primary)); }
.breakout-danger .breakout-title { color: var(--color-danger); }


/* --------------------------------------------------------------------------
   13. Chats (P1) — shell, bubbles, step trails, composer, chat list, palette
   -------------------------------------------------------------------------- */
.chatshell {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0;
}
.chat-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-sm);
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-xs);
  border-bottom: 1px solid var(--border);
}
.chat-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-header-actions { display: flex; gap: 2px; flex-shrink: 0; }

.chat-view-wrap {
  position: relative;
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
}

.chat-view {
  flex: 1; min-height: 0;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-sm);
  padding: var(--space-xs) var(--space-2xs);
}

/* "new updates" badge — appears bottom-right of the chat view whenever
   updates arrive while the reader is scrolled up (v0.9.0) */
.new-updates {
  position: absolute; right: 14px; bottom: 12px; z-index: 40;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 7px;
  border: 1px solid var(--color-primary-dark);
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: var(--font-sm);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
  transition: background 0.15s ease, transform 0.1s ease;
}
.new-updates:hover { background: var(--color-primary-hover); transform: translateY(-1px); }
.new-updates .nu-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px;
  background: #fff;
  color: var(--color-primary-dark);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
}

.turn { display: flex; flex-direction: column; gap: var(--space-2xs); }

.bubble {
  max-width: 92%;
  padding: 0.6em 0.9em;
  border-radius: var(--radius-lg);
  font-size: var(--font-md);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* markdown-rendered bubbles: blocks handle their own spacing */
.bubble-md { white-space: normal; }
.bubble-md .md-content > :first-child { margin-top: 0; }
.bubble-md .md-content > :last-child { margin-bottom: 0; }
.md-content p { margin: 0.35em 0; }
.md-content .md-h { font-weight: 700; margin: 0.55em 0 0.25em; line-height: 1.3; }
.md-content .md-h1 { font-size: 1.25em; }
.md-content .md-h2 { font-size: 1.15em; }
.md-content .md-h3 { font-size: 1.05em; }
.md-content .md-h4, .md-content .md-h5, .md-content .md-h6 { font-size: 1em; color: var(--text-secondary); }
.md-content .md-ul, .md-content .md-ol { margin: 0.35em 0; padding-left: 1.4em; }
.md-content .md-ul { list-style: disc; }
.md-content .md-ol { list-style: decimal; }
.md-content li { margin: 0.15em 0; }
.md-content li.md-task { list-style: none; margin-left: -1.2em; }
.md-content li.md-task input { margin-right: 0.4em; }
.md-content .md-quote {
  margin: 0.45em 0; padding: 0.15em 0.8em;
  border-left: 3px solid var(--border-strong);
  color: var(--text-secondary);
}
.md-content .md-hr { border: 0; border-top: 1px solid var(--border-strong); margin: 0.6em 0; opacity: 0.7; }
.md-content .md-code {
  font-family: var(--font-mono); font-size: 0.88em;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.05em 0.35em;
}
.md-content .md-pre {
  margin: 0.45em 0; padding: 0.6em 0.8em;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow-x: auto;
}
.md-content .md-pre code {
  font-family: var(--font-mono); font-size: 0.86em;
  background: none; border: 0; padding: 0;
  white-space: pre;
}
.md-content .md-img {
  display: block; max-width: 100%; max-height: 260px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  margin: 0.4em 0;
  cursor: pointer;
}
.md-content a { color: var(--color-primary-bright); text-decoration: underline; text-underline-offset: 2px; }
.md-content del { opacity: 0.75; }
.bubble.user {
  align-self: flex-end;
  background: var(--color-primary-dark);
  color: #fff;
  border-bottom-right-radius: var(--radius-sm);
}
[data-theme="light"] .bubble.user { background: var(--color-primary-light); color: var(--color-primary-dark); }
/* slash commands (/stop, /model …) — centered divider row, warning hue sets
   them apart from chat bubbles; lines fade out toward the bubble column edges */
.cmdbubble {
  align-self: center;
  display: flex; align-items: center; gap: var(--space-sm);
  max-width: 92%; margin: 2px 0;
  color: var(--color-warning);
  font-size: var(--font-sm);
}
.cmdbubble .cmdline { flex: 1 1 2.5em; min-width: 2.5em; height: 1px; background: color-mix(in srgb, var(--color-warning) 55%, transparent); }
.cmdbubble .cmdtext {
  font-family: var(--font-mono); font-weight: 700; white-space: nowrap;
  padding: 0.12em 0.7em;
  border: 1px solid color-mix(in srgb, var(--color-warning) 55%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
}
.cmdbubble .cmdargs {
  font-family: var(--font-mono); font-size: var(--font-xs); color: var(--text-secondary);
  max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmdbubble.is-archive { opacity: 0.85; }
.bubble.assistant {
  align-self: flex-start;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-bottom-left-radius: var(--radius-sm);
}
.bubble.pending {
  align-self: flex-end;
  max-width: 86%;
  border: 1px dashed var(--color-warning);
  border-radius: var(--radius-lg);
  padding: 0.5em 0.85em;
  font-size: var(--font-sm);
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--color-warning) 8%, transparent);
}
.bubble.live::after {
  content: "▍";
  animation: live-caret 1s steps(2) infinite;
  color: var(--color-secondary);
}
@keyframes live-caret { 50% { opacity: 0; } }

#pendingQueue { display: flex; flex-direction: column; gap: var(--space-2xs); align-items: flex-end; }

/* step trail */
.steps { align-self: stretch; margin: 0 var(--space-2xs); }
.steps summary {
  display: flex; align-items: center; gap: 0.3em;
  cursor: pointer;
  font-size: var(--font-xs);
  color: var(--text-muted);
  padding: 0.2em 0.4em;
  border-radius: var(--radius-sm);
  user-select: none;
  /* kill the browser's native disclosure triangle — the stroke chevron is
     the ONLY marker (caret ban, ASSETS.md §3.2) */
  list-style: none;
}
.steps summary::marker { display: none; }
.steps summary::-webkit-details-marker { display: none; }
.steps summary:hover { color: var(--text-primary); background: var(--bg-tertiary); }
/* trail disclosure chevron — rotates when the steps open (carets are banned;
   ASSETS.md §3). */
.steps summary svg { flex-shrink: 0; transition: transform var(--transition-fast); }
.steps[open] > summary svg { transform: rotate(90deg); }
.steps-list {
  display: flex; flex-direction: column;
  border-left: 2px solid var(--border);
  margin-left: 0.6em;
  padding-left: var(--space-sm);
}
.step-row {
  display: flex; align-items: baseline; gap: var(--space-xs);
  padding: 0.18em 0.2em;
  font-size: var(--font-xs);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.step-row:hover { background: var(--bg-tertiary); }
.step-icon { flex-shrink: 0; }
.step-name { font-family: var(--font-mono); font-weight: 600; color: var(--text-primary); flex-shrink: 0; }
.step-arg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.step-state { flex-shrink: 0; color: var(--color-success); }
.step-state.step-error { color: var(--color-danger); }
.step-thinking .step-name { color: var(--text-muted); font-style: italic; }

/* composer — tools row (＋ ⌘ ⚙ + badges + model/think chips) over a single
   input box with the send icon inside */
.composer {
  display: flex; flex-direction: column; gap: var(--space-sm);
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);   /* symmetric gap above & below the box */
  border-top: 1px solid var(--border);
  margin-top: var(--space-xs);
}
.composer-tools { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.composer-badges { display: inline-flex; gap: var(--space-2xs); flex-wrap: wrap; margin-left: var(--space-2xs); }
.composer-chips { display: inline-flex; align-items: center; gap: var(--space-2xs); flex-wrap: wrap; margin-left: auto; }
.opt-badge {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-size: var(--font-xs); font-weight: 600;
  padding: 0.15em 0.55em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-secondary) 16%, transparent);
  color: var(--text-primary);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 45%, transparent);
}
.opt-badge-x {
  border: none; background: none; cursor: pointer;
  color: var(--text-muted); font-size: var(--font-xs);
  padding: 0 0.1em; line-height: 1;
}
.opt-badge-x:hover { color: var(--color-danger); }
.composer-box {
  display: flex; align-items: flex-end; gap: var(--space-2xs);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.composer-box:focus-within {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-secondary) 22%, transparent);
}
.composer-box textarea,
.composer-box .composer-input {
  flex: 1;
  border: none; background: transparent;
  resize: none;
  min-height: 1.7em;
  max-height: 33em; /* ~15 lines; JS caps it too */
  font-family: var(--font-sans);
  font-size: var(--font-sm);
  line-height: 1.5;
  color: var(--text-primary);
  padding: 0.2em 0;
}
.composer-editwrap { flex: 1; min-width: 0; display: flex; position: relative; }
.composer-input {
  width: 100%;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  scrollbar-width: thin;
}
.composer-input:focus, .composer-input:focus-visible {
  outline: none; box-shadow: none;   /* .composer-box:focus-within is the focus cue */
}
.composer-input.locked { opacity: 0.6; }
.composer-input.is-empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  opacity: .7;
  pointer-events: none;
  position: absolute;
  top: 0.2em; left: 0; right: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.composer-box textarea:focus,
.composer-box textarea:focus-visible {
  outline: none;
  box-shadow: none;   /* the big green bar (.composer-box:focus-within) is the only focus cue */
}
.composer-box textarea:disabled { opacity: 0.6; }

/* ------------------------------------------------------ skill pills ---- */
.skill-pill {
  display: inline-flex; align-items: center; gap: 4px;
  vertical-align: baseline;
  background: color-mix(in srgb, var(--color-secondary) 16%, var(--bg-tertiary));
  border: 1px solid color-mix(in srgb, var(--color-secondary) 45%, transparent);
  border-radius: 6px;               /* less round than chips, per spec */
  padding: 0 6px;
  margin: 0 1px;
  font-size: .82em; line-height: 1.5;
  color: var(--text-primary);
  white-space: nowrap;
}
.skill-pill-ico { color: var(--color-secondary); flex-shrink: 0; }
.skill-pill-name { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; }
.skill-pill-x {
  border: none; background: none; padding: 0 0 0 2px;
  color: var(--text-muted); cursor: pointer; font-size: .9em; line-height: 1;
}
.skill-pill-x:hover { color: var(--text-primary); }
.skill-pill-view { cursor: default; }
.msg-skillpills { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }

/* anchored-file pills — same recipe as skill pills, amber to tell them apart */
.file-pill {
  display: inline-flex; align-items: center; gap: 4px;
  vertical-align: baseline;
  background: color-mix(in srgb, var(--color-accent) 16%, var(--bg-tertiary));
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  border-radius: 6px;
  padding: 0 6px;
  margin: 0 1px;
  font-size: .82em; line-height: 1.5;
  color: var(--text-primary);
  white-space: nowrap;
}
.file-pill-ico { color: var(--color-accent); flex-shrink: 0; }
.file-pill-name { max-width: 26ch; overflow: hidden; text-overflow: ellipsis; }
.file-pill-x {
  border: none; background: none; padding: 0 0 0 2px;
  color: var(--text-muted); cursor: pointer; font-size: .9em; line-height: 1;
}
.file-pill-x:hover { color: var(--text-primary); }
.file-pill-view { cursor: default; }

/* note pills — third mention-family member: PRIMARY tint (blue = my content;
   teal = skills, amber = files). Same recipe as skill/file pills (§8.4). */
.note-pill {
  display: inline-flex; align-items: center; gap: 4px;
  vertical-align: baseline;
  background: color-mix(in srgb, var(--color-primary) 16%, var(--bg-tertiary));
  border: 1px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
  border-radius: 6px;
  padding: 0 6px;
  margin: 0 1px;
  font-size: .82em; line-height: 1.5;
  color: var(--text-primary);
  white-space: nowrap;
}
.note-pill-ico { color: var(--color-primary-bright); flex-shrink: 0; }
.note-pill-name { max-width: 26ch; overflow: hidden; text-overflow: ellipsis; }
.note-pill-x {
  border: none; background: none; padding: 0 0 0 2px;
  color: var(--text-muted); cursor: pointer; font-size: .9em; line-height: 1;
}
.note-pill-x:hover { color: var(--text-primary); }
.note-pill-view { cursor: default; }

/* voice notes — composer tag + history chip (teal hue sets them apart from
   note pills and the warning-hue command divider). States via data-status:
   recording → uploading → processing → done | error. */
.voice-pill {
  display: inline-flex; align-items: center; gap: 5px;
  vertical-align: baseline;
  background: color-mix(in srgb, var(--color-secondary) 14%, var(--bg-tertiary));
  border: 1px solid color-mix(in srgb, var(--color-secondary) 45%, transparent);
  border-radius: 6px;
  padding: 1px 6px;
  margin: 0 1px;
  font-size: .82em; line-height: 1.5;
  color: var(--text-primary);
  white-space: nowrap;
}
.voice-pill-ic { color: var(--color-secondary-bright); flex-shrink: 0; display: inline-flex; }
.voice-pill-dur { font-family: var(--font-mono); font-size: .92em; color: var(--text-secondary); }
.voice-pill-state { color: var(--text-muted); font-style: italic; }
.voice-pill button {
  border: none; background: none; padding: 0 1px;
  color: var(--text-muted); cursor: pointer; font-size: .95em; line-height: 1;
}
.voice-pill button:hover { color: var(--text-primary); }
.voice-pill-view { cursor: default; }
/* recording: waveform of vertical lines breathing small→big across the tag */
.voice-pill-wave { display: none; align-items: center; gap: 2px; height: 12px; }
.voice-pill-wave i {
  width: 2px; height: 4px; border-radius: 1px;
  background: var(--color-secondary-bright);
  animation: voicewave 0.9s ease-in-out infinite;
}
.voice-pill-wave i:nth-child(2) { animation-delay: .15s; }
.voice-pill-wave i:nth-child(3) { animation-delay: .3s; }
.voice-pill-wave i:nth-child(4) { animation-delay: .45s; }
.voice-pill-wave i:nth-child(5) { animation-delay: .6s; }
@keyframes voicewave { 0%, 100% { height: 4px; } 50% { height: 12px; } }
.voice-pill[data-status="recording"] { border-color: color-mix(in srgb, var(--color-danger) 55%, transparent); }
.voice-pill[data-status="recording"] .voice-pill-wave { display: inline-flex; }
.voice-pill[data-status="recording"] .voice-pill-ic { color: var(--color-danger); }
.voice-pill[data-status="recording"] .voice-pill-play,
.voice-pill[data-status="uploading"] .voice-pill-play,
.voice-pill[data-status="processing"] .voice-pill-play,
.voice-pill[data-status="error"] .voice-pill-play { display: none; }
.voice-pill[data-status="recording"] .voice-pill-exp,
.voice-pill[data-status="uploading"] .voice-pill-exp,
.voice-pill[data-status="processing"] .voice-pill-exp,
.voice-pill[data-status="error"] .voice-pill-exp { display: none; }
.voice-pill:not([data-status="recording"]) .voice-pill-wave { display: none; }
.voice-pill .voice-pill-retry { display: none; }
.voice-pill[data-status="error"] { border-color: color-mix(in srgb, var(--color-danger) 55%, transparent); }
.voice-pill[data-status="error"] .voice-pill-retry { display: inline-block; }
.voice-pill[data-status="error"] .voice-pill-state { color: var(--color-danger); }
.voice-pill[data-status="uploading"] .voice-pill-state::after { content: 'uploading…'; }
.voice-pill[data-status="processing"] .voice-pill-state::after { content: 'transcribing…'; animation: voicepulse 1.4s ease-in-out infinite; }
.voice-pill[data-status="done"] .voice-pill-state { display: none; }

@keyframes voicepulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.voice-pill.voice-pill-notranscript .voice-pill-exp { display: none; }
/* transcript expansion (view mode only toggles the utility, but keep a block
   slot for future inline use) */
.voice-pill-transcript {
  display: block; white-space: pre-wrap; max-width: 60ch;
  margin-top: 3px; padding-top: 3px;
  border-top: 1px dashed color-mix(in srgb, var(--color-secondary) 40%, transparent);
  color: var(--text-secondary); font-size: .95em;
}
/* mic button while recording = stop */
#voiceBtn.recording { color: var(--color-danger); animation: voicepulse 1.2s ease-in-out infinite; }
/* hovering utility with the full transcript */
#voiceUtility {
  position: fixed; z-index: 95;
  max-width: min(480px, 90vw);
  background: var(--bg-secondary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-sm);
}
#voiceUtility .vu-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-sm); margin-bottom: var(--space-2xs);
  font-size: var(--font-xs); font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em;
}
#voiceUtility .vu-actions { display: inline-flex; gap: 2px; }
#voiceUtility .vu-text {
  white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 38vh; overflow-y: auto;
  font-size: var(--font-sm); color: var(--text-primary);
}
/* queue tags — visual only, raw token text stays editable */
.q-dir { opacity: .55; font-size: .9em; }
.q-token { border-radius: 4px; padding: 0 3px; }
.q-token-voice { background: color-mix(in srgb, var(--color-secondary) 16%, transparent); color: var(--color-secondary-bright); }
.q-tag-skill { background: color-mix(in srgb, var(--color-primary) 14%, transparent); }
.q-tag-file { background: color-mix(in srgb, var(--color-accent) 16%, transparent); }
.q-tag-note { background: color-mix(in srgb, var(--color-primary) 10%, transparent); }

/* note card — collapsible snapshot badge in chat bubbles / DM threads.
   Collapsed: icon + title + trace + chevron; open: md body, inner scroll. */
.note-card {
  display: block; margin: var(--space-2xs) 0;
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-primary) 6%, var(--bg-secondary));
  max-width: 100%; overflow: hidden;
}
.note-card-head {
  display: flex; align-items: center; gap: .45em;
  width: 100%; box-sizing: border-box; text-align: left;
  background: none; border: 0; cursor: pointer;
  padding: .45em .7em;
  color: var(--text-primary); font-size: var(--font-sm);
}
.note-card-head:hover { background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.note-card-ico { flex: none; color: var(--color-primary-bright); }
.note-card-title { flex: none; max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.note-card-trace {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--font-xs); color: var(--text-muted);
}
.note-card-state { flex: none; font-size: var(--font-xs); }
.note-card-state .tag { vertical-align: middle; }
.note-card-caret { flex: none; color: var(--text-muted); transition: transform var(--transition-fast); }
.note-card.open .note-card-caret { transform: rotate(90deg); }
/* share revoked / note gone — the card is history only: no expand, no
   View-latest; the head is a disabled clone (listener dropped in JS). */
.note-card-dead { opacity: .72; }
.note-card-dead .note-card-caret { display: none; }
.note-card-head-dead { cursor: default; }
.note-card-head-dead:hover { background: none; }
.note-card-body {
  border-top: 1px solid var(--border);
  padding: var(--space-sm) .8em;
  max-height: 40vh; overflow-y: auto;
  font-size: var(--font-sm);
  background: var(--bg-primary);
}
.note-card-broken {
  display: inline-block; padding: .3em .6em;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
  color: var(--text-muted); font-size: var(--font-sm);
}

/* ------------------------------------------------------ skill bar ------ */
.skillbar { /* reuses .commandbar base */ }
.filebar { /* reuses .commandbar base — same hover-screen recipe as skills */ }
.notebar { /* reuses .commandbar base — notes attach palette (button-only) */ }
.note-sec { cursor: pointer; }
.note-sec .note-sec-caret { transition: transform var(--transition-fast); flex: none; }
.note-sec.open .note-sec-caret { transform: rotate(90deg); }
.note-sec .pal-title { display: inline-flex; align-items: center; gap: 5px; }
.note-item { cursor: pointer; }
.note-item .pal-title svg { vertical-align: -1px; }
.note-item .note-pill-ico { color: var(--color-primary-bright); }
.file-item { cursor: pointer; }
.file-item .pal-title svg { vertical-align: -1px; }
.file-item .pal-title .file-pill-ico { color: var(--color-accent); }
.skill-sec-title {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); padding: 8px 10px 2px;
}
.skill-item { cursor: pointer; }
.skill-item.skill-off { opacity: .45; cursor: not-allowed; }
.skill-item.picked .pal-title::after { content: ''; }
.skill-item.sel { border-color: var(--border-strong); background: var(--bg-tertiary); }
.skill-check {
  flex-shrink: 0; width: 1.4em; text-align: center;
  color: var(--color-secondary); font-weight: 700;
}
.skill-hint { margin: 6px 2px 0; }

/* queue row with empty text (image-only message) stays clickable/editable */
.queue-msg { min-width: 3em; min-height: 1.2em; }
.queue-msg:empty::before {
  content: '(media only)';
  color: var(--text-muted);
  opacity: .55;
  font-style: italic;
}
.composer-send { color: var(--color-secondary); font-size: 1.1em; flex-shrink: 0; }
.composer-send:hover:not(:disabled) { color: var(--color-primary); }
.composer-side { flex-shrink: 0; color: var(--text-muted); }
.composer-side:hover:not(:disabled) { color: var(--text-primary); }
#queueBtn { font-size: 1.05em; }

/* attach staging — strip of files about to be sent; lives INSIDE .composer,
   under the divider. The author display:flex would override the UA [hidden]
   rule, so keep the empty state truly space-free. */
.attach-stage[hidden] { display: none; }
.attach-stage {
  display: flex; gap: var(--space-2xs); overflow-x: auto;
  padding: 0 0 var(--space-2xs);
  scrollbar-width: thin;
}
.stage-item {
  position: relative; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 92px;
  padding: var(--space-2xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}
.stage-item img { width: 100%; height: 56px; object-fit: cover; border-radius: var(--radius-sm); }
.stage-docicon { font-size: 1.6em; line-height: 56px; }
.stage-item.uploading { opacity: 0.85; }
.stage-item.uploading > img,
.stage-item.uploading > .stage-docicon { opacity: 0.45; }
.stage-item.failed { border-color: var(--color-danger); }
/* upload progress ring — same two-circle dashoffset gauge as the ctx chip,
   centered over the thumb until staging completes */
.stage-ring {
  position: absolute;
  top: var(--space-2xs); left: var(--space-2xs); right: var(--space-2xs);
  height: 56px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.stage-ring-svg { transform: rotate(-90deg); flex-shrink: 0; }
.stage-ring-svg .sr-track {
  fill: none;
  stroke: color-mix(in srgb, var(--text-primary) 30%, transparent);
  stroke-width: 2;
}
.stage-ring-svg .sr-arc {
  fill: none;
  stroke: var(--color-secondary);
  stroke-width: 2;
  stroke-linecap: round;
}
.stage-size { line-height: 1; }
/* staged image/video thumbs open in the media popup pre-send */
.stage-item img.stage-preview,
.stage-item .stage-docicon.stage-preview { cursor: zoom-in; }
.stage-name {
  font-size: var(--font-xs); color: var(--text-secondary);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stage-x {
  position: absolute; top: 2px; right: 2px;
  border: 0; background: var(--bg-primary); color: var(--text-muted);
  border-radius: 50%; width: 18px; height: 18px; line-height: 1;
  cursor: pointer; font-size: 0.7em;
}
.stage-x:hover { color: var(--color-danger); }

/* options drop-up (⚙) — anchored above the composer */
.options-dropup {
  position: absolute;
  bottom: calc(100% + 6px); right: 0;
  min-width: 280px; max-width: 92%;
  background: var(--bg-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-sm);
  z-index: 61;
  animation: rise-in var(--transition-med) var(--ease-out);
}
.dropup-title {
  font-size: var(--font-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-muted);
  margin-bottom: var(--space-xs);
}
.switch-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-2xs) 0;
  cursor: pointer;
}
.switch-row-text { display: flex; flex-direction: column; gap: 1px; font-size: var(--font-sm); }
.switch-row .switch { flex-shrink: 0; }

/* chat list (context sidebar) */
.chatlayer-title {
  font-size: var(--font-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-muted);
  margin: var(--space-sm) 0 var(--space-2xs);
}
.chatlayer-title:first-child { margin-top: 0; }
/* Section divider: transparent full-width line above every section but the
   first (also lands above the section that follows a Load-more button). */
.chatlayer-title:not(:first-child) {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.chatitem {
  /* Row 1: title + ⋮ menu (far right). Row 2: status tags left, date right. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-2xs);
  row-gap: 2px;
  padding: 0.45em 0.6em;
  border-radius: var(--radius-md);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition-fast);
}
.chatitem:hover { background: var(--bg-tertiary); }
.chatitem.active { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.chatitem.active .chatitem-name { color: #fff; }
[data-theme="light"] .chatitem.active { background: var(--color-primary-light); }
[data-theme="light"] .chatitem.active .chatitem-name { color: var(--color-primary-dark); }
.chatitem-name {
  grid-column: 1; grid-row: 1; min-width: 0;
  font-size: var(--font-sm); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chatitem-meta { display: flex; align-items: center; gap: var(--space-2xs); flex-wrap: wrap; grid-column: 1 / -1; grid-row: 2; }
/* Per-chat divider: fainter than the section line, inset left/right so it
   reads as a light hairline between rows. Between consecutive chats (any
   nesting level) and after an expanded subagent/continuation tree — never
   right under a section title or a toggle. */
.chatitem { position: relative; }
.chatitem + .chatitem::before,
.subagent-kids + .chatitem::before,
.folder-kids + .chatitem::before {
  content: '';
  position: absolute; top: 0; left: var(--space-md); right: var(--space-md);
  height: 1px; pointer-events: none;
  background: color-mix(in srgb, var(--border) 38%, transparent);
}
.loadmore { width: 100%; margin: var(--space-2xs) 0; }

/* live pill — running chat indicator (rounded pill + pulsing green dot) */
.livepill {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.08em 0.6em;
  border-radius: var(--radius-full);
  font-size: var(--font-xs); font-weight: 700; letter-spacing: 0.02em;
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-success) 42%, transparent);
}
.livepill-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-success);
  animation: livepulse 1.5s ease-out infinite;
}
/* queue pill — pending queued prompts; same rounded shape as the live pill */
.queuepill {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.08em 0.6em;
  border-radius: var(--radius-full);
  font-size: var(--font-xs); font-weight: 700; letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-warning) 45%, transparent);
}
@keyframes livepulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success) 45%, transparent); }
  70%  { box-shadow: 0 0 0 5px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* subagent runs — nested under their parent chat with a guide line */
.subagent-toggle {
  display: flex; align-items: center; gap: var(--space-xs);
  width: 100%;
  margin: 1px 0;
  padding: 0.28em 0.6em 0.28em 0.75em;
  background: none; border: 0;
  color: var(--text-muted);
  font-size: var(--font-xs); font-weight: 600;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.subagent-toggle:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.subagent-caret { display: inline-block; transition: transform var(--transition-fast); }
.subagent-caret svg { display: block; }
.subagent-toggle.open .subagent-caret { transform: rotate(90deg); }
.subagent-toggle .bot-svg { color: var(--color-secondary-bright); }
.subagent-kids {
  display: none;
  margin-left: 0.3em;
  border-left: 2px solid color-mix(in srgb, var(--color-secondary) 55%, transparent);
  padding-left: 0.25em;
}
.subagent-kids.open { display: flex; flex-direction: column; }
.chatitem.subchat { display: flex; flex-direction: row; align-items: center; gap: var(--space-xs); padding-left: 0.45em; }
.chatitem.subchat .bot-svg { color: var(--color-secondary-bright); flex-shrink: 0; }
.chatitem.subchat .chatitem-name { flex: 1; font-size: var(--font-xs); }
.chatitem.subchat .chatitem-meta { margin-left: auto; flex-shrink: 0; }
.chatitem.subchat .chatitem-more { order: 9; margin-left: var(--space-2xs); }  /* ⋮ stays farthest right */
.bot-svg { vertical-align: -1px; }

/* saved folders — folders are PARENTS in the Saved section; saved chats
   expand under them as children, mirroring the subagent nest pattern */
.folder-toggle {
  display: flex; align-items: center; gap: var(--space-xs);
  width: 100%;
  margin: 1px 0;
  padding: 0.28em 0.6em 0.28em 0.75em;
  background: none; border: 0;
  color: var(--text-muted);
  font-size: var(--font-xs); font-weight: 700; letter-spacing: 0.02em;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.folder-toggle:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.folder-toggle .folder-name { min-width: 0; }
.folder-more {
  margin-left: auto;   /* ⋮ hugs the right end of the folder row */
  border: 0; background: none;
  color: var(--text-muted);
  font-size: 1em; line-height: 1;
  padding: 0 0.15em;
  cursor: pointer;
  border-radius: var(--radius-sm);
  opacity: 0.55;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}
.folder-toggle:hover .folder-more { opacity: 1; }
.folder-more:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.folder-caret { display: inline-block; transition: transform var(--transition-fast); }
.folder-caret svg { display: block; }
.folder-toggle.open .folder-caret { transform: rotate(90deg); }
.folder-toggle .folder-svg { color: var(--color-accent); flex-shrink: 0; }
.folder-toggle .folder-svg svg { display: block; }
.folder-toggle .folder-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-kids {
  display: none;
  margin-left: 0.3em;
  border-left: 2px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  padding-left: 0.25em;
}
.folder-kids.open { display: flex; flex-direction: column; }

/* message footer: [meta bits] + [copy | download] — tucked under the bubble */
.bubble-foot {
  display: flex; align-items: center; justify-content: flex-start; gap: var(--space-sm);
  font-size: var(--font-xs); color: var(--text-muted);
  margin: -2px 4px 6px;
  opacity: 0.85;
}
.bubble-foot.user { align-self: flex-end; justify-content: flex-end; }
.bubble-foot.cmd { align-self: center; justify-content: center; }
.bubble-foot .bf-bits { display: inline-flex; align-items: center; gap: 0.45em; }
.bubble-foot .bf-dot { opacity: 0.6; }
.bubble-foot .bf-sender { font-weight: 600; opacity: 0.95; }   /* who sent it */

/* ------------------------------------------- v0.31.0 export popup ---- */
#popup:has(.exp-conv) { width: min(94vw, 640px); }
.dl-radio { display: flex; align-items: flex-start; gap: var(--space-xs);
  padding: var(--space-2xs) 2px; cursor: pointer; }
.dl-radio input { margin-top: 3px; flex: none; }
.dl-radio-ic { flex: none; width: 22px; text-align: center; margin-top: 1px; color: var(--text-muted); }
.dl-radio:hover .dl-radio-ic { color: var(--text-primary); }
.dl-picker { margin-top: var(--space-xs); }
.dl-picker[hidden] { display: none; }
.exp-toolbar { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap;
  padding-bottom: var(--space-xs); border-bottom: 1px solid var(--border); }
.exp-tg { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-sm); cursor: pointer; }
.exp-selrow { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; }
.exp-sel { width: 1.7em; height: 1.7em; padding: 0; background: transparent; border: 0;
  color: var(--text-muted); border-radius: var(--radius-sm); }
.exp-sel:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-muted) 14%, transparent); }
.exp-count { margin-left: 6px; }
.exp-conv { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column;
  gap: 6px; padding: var(--space-xs) 2px; position: relative; }
.exp-loadmore { align-self: center; }
.exp-row { display: flex; align-items: flex-start; gap: 8px; cursor: pointer;
  padding: 2px 0; }
.exp-row input[type="checkbox"] { margin-top: 4px; flex: none; }
.exp-row.exp-user { flex-direction: row-reverse; }   /* user right, agent left — like the chat */
.exp-row.exp-user .exp-col { align-items: flex-end; }
.exp-col { min-width: 0; max-width: 82%; display: flex; flex-direction: column; gap: 2px; }
.exp-row.exp-user .exp-bub { text-align: right; }
.exp-bub { min-width: 0; display: inline-block;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 6px 10px; }
.exp-row.exp-user .exp-bub { background: color-mix(in srgb, var(--color-secondary) 10%, var(--bg-secondary)); }
.exp-row.exp-target .exp-bub { border-color: var(--color-primary-muted); }   /* the clicked message */
/* v0.33.0: who · time-elapsed UNDER the bubble (was .exp-meta inside it) */
.exp-under { display: block; font-size: var(--font-xs); color: var(--text-muted); padding: 0 4px; }
.exp-daysep { align-self: center; font-size: var(--font-xs); color: var(--text-muted);
  opacity: .85; letter-spacing: .3px; padding: 4px 0 1px; user-select: none; }
.exp-body { font-size: var(--font-sm);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.exp-badges { display: block; font-size: var(--font-xs); color: var(--text-muted); margin-top: 2px; }
.exp-hint { margin: var(--space-xs) 0 0; }
.msg-actions { display: inline-flex; align-items: center; gap: 0.45em; }
.msg-act {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; padding: 0;
  color: var(--text-muted);
  cursor: pointer; flex-shrink: 0;
  transition: color var(--transition-fast);
}
.msg-act:hover { color: var(--color-primary-bright); }
.msg-act.ok { color: var(--color-success); }

/* time separators (>2h silence) */
.time-sep {
  display: flex; align-items: center; gap: var(--space-sm);
  margin: var(--space-md) 0;
  color: var(--text-muted);
  opacity: 0.62;
  font-size: var(--font-xs); letter-spacing: 0.03em;
}
.time-sep::before, .time-sep::after {
  content: ''; flex: 1; height: 1px;
  background: var(--border-strong);
  opacity: 0.55;
}
.time-sep span { white-space: nowrap; }

/* model-change separator — sibling of time-sep; marks provider/model
   switches in the transcript */
.model-sep {
  display: flex; align-items: center; gap: var(--space-sm);
  margin: var(--space-md) 0;
  color: var(--text-muted);
  opacity: 0.8;
  font-size: var(--font-xs); letter-spacing: 0.03em;
}
.model-sep::before, .model-sep::after {
  content: ''; flex: 1; height: 1px;
  background: var(--border-strong);
  opacity: 0.55;
}
.model-sep span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 82%; }
.model-sep em { font-style: normal; color: var(--color-secondary); }

/* history pagination */
.loadmore-bar { display: flex; justify-content: center; padding: var(--space-2xs) 0; }

/* history archive (loop 3) — recovered pre-reset history renders above
   the live branch, muted, under a boundary marker */
.archive-sep {
  display: flex; align-items: center; gap: var(--space-sm);
  margin: var(--space-md) 0;
  color: var(--color-secondary);
  opacity: 0.75;
  font-size: var(--font-xs); letter-spacing: 0.03em;
}
.archive-sep::before, .archive-sep::after {
  content: ''; flex: 1; height: 1px;
  background: var(--color-secondary);
  opacity: 0.4;
}
.archive-sep span { white-space: nowrap; }
.bubble.is-archive { opacity: 0.85; }
.archive-badge {
  font-size: 0.9em; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-secondary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0 0.35em;
}
.archive-stub {
  align-self: flex-start;
  font-size: var(--font-sm); font-style: italic;
  color: var(--text-muted); opacity: 0.8;
  padding: 0.1em 0.2em;
}
.archive-media {
  align-self: flex-end;
  font-size: var(--font-sm);
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.25em 0.7em;
  max-width: 92%;
}

/* media inside messages */
.media-row {
  display: flex; gap: var(--space-2xs); flex-wrap: wrap;
  margin: var(--space-2xs) 0;
}
.media-carousel {
  display: flex; align-items: center; gap: var(--space-2xs);
  margin: var(--space-2xs) 0;
}
/* sender-side media: user uploads hug the right edge like user bubbles,
   assistant media hugs the left — media sits on the sender's side */
.media-row.media-user, .media-carousel.media-user {
  align-self: flex-end; justify-content: flex-end;
  max-width: 92%;
}
.media-row.media-assistant, .media-carousel.media-assistant {
  align-self: flex-start;
  max-width: 92%;
}
.media-track {
  display: flex; gap: var(--space-2xs);
  overflow-x: auto; scroll-behavior: smooth;
  flex: 1; min-width: 0;
  scrollbar-width: thin;
  padding: 2px;
}
.media-nav {
  flex-shrink: 0;
  border: 1px solid var(--border); background: var(--bg-secondary);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  width: 26px; height: 40px; cursor: pointer;
  transition: background var(--transition-fast);
}
.media-nav:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.media-card {
  position: relative;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.media-card:hover { border-color: var(--border-strong); }
/* direct download overlay (carousels, rows, md images) */
.media-dl {
  position: absolute; bottom: 5px; right: 5px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
  color: var(--text-secondary);
  cursor: pointer;
  opacity: 0.8;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}
.media-card:hover .media-dl, .md-imgwrap:hover .media-dl { opacity: 1; }
.media-dl:hover { color: var(--color-primary-bright); }
.md-imgwrap { position: relative; display: inline-block; max-width: 100%; margin: 0.4em 0; }
.md-imgwrap .md-img { margin: 0; }
.media-card img { display: block; max-height: 180px; max-width: 240px; object-fit: cover; }

/* doc card — svg icon · title · size · in-box download (no preview) */
.media-doc {
  display: flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  max-width: 300px; min-width: 190px;
  text-align: left;
}
.doc-icon {
  flex-shrink: 0; color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.doc-icon.big svg { width: 42px; height: 42px; }
.media-docname {
  flex: 1; min-width: 0;
  font-size: var(--font-xs); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.media-docsize { flex-shrink: 0; }
.doc-dl {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.doc-dl:hover { color: var(--color-primary-bright); border-color: var(--color-primary-bright); }

/* audio card — box message: big play/pause left; row 1 time · speed · dl;
   row 2 seek bar */
.media-audio {
  display: flex; align-items: center; gap: var(--space-xs);
  width: min(430px, 100%);
  padding: var(--space-xs) var(--space-sm);
}
.media-audio audio { display: none; }
.aud-play {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--color-secondary) 14%, transparent);
  color: var(--text-primary);
  font-size: 1.05em;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--transition-fast);
}
.aud-play:hover { background: color-mix(in srgb, var(--color-secondary) 26%, transparent); }
.aud-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.aud-row { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--font-xs); }
.aud-time { font-family: var(--font-mono); color: var(--text-secondary); white-space: nowrap; }
.aud-speed {
  border: 1px solid var(--border); background: var(--bg-primary);
  color: var(--text-secondary); border-radius: var(--radius-sm);
  font-size: var(--font-xs); padding: 1px 3px; cursor: pointer;
}
.aud-dl {
  margin-left: auto;
  border: none; background: none; padding: 2px;
  color: var(--text-muted); cursor: pointer;
  display: inline-flex; align-items: center;
}
.aud-dl:hover { color: var(--color-primary-bright); }
.aud-seek, .vid-seek {
  width: 100%; height: 16px; margin: 0;
  accent-color: var(--color-secondary);
  cursor: pointer;
}

/* video card — picture with a bottom control bar: ▶ · seek · ⬇ */
.media-video { display: flex; flex-direction: column; }
.media-video video {
  display: block; width: 100%;
  max-height: 240px; max-width: 340px;
  object-fit: contain; background: #000;
  cursor: pointer;
}
.vid-bar {
  display: flex; align-items: center; gap: var(--space-xs);
  padding: 4px var(--space-xs);
}
.vid-play {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-primary);
  font-size: 0.8em;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.vid-play:hover { background: var(--bg-tertiary); }
.vid-seek { flex: 1; min-width: 60px; }
.vid-dl {
  flex-shrink: 0;
  border: none; background: none; padding: 2px;
  color: var(--text-muted); cursor: pointer;
  display: inline-flex; align-items: center;
}
.vid-dl:hover { color: var(--color-primary-bright); }

/* popup media */
.media-popbody { display: flex; flex-direction: column; gap: var(--space-sm); min-width: min(420px, 80vw); }
.media-popwrap { position: relative; }
.media-popstage { display: flex; align-items: center; justify-content: center; min-height: 120px; }
.media-popimg { max-width: 100%; max-height: 62vh; border-radius: var(--radius-md); display: block; margin: 0 auto; }
.media-popvid {
  display: block; margin: 0 auto;
  max-width: 100%; max-height: 62vh;
  border-radius: var(--radius-md); background: #000;
}
.media-popframe {
  width: min(860px, 88vw); height: 72vh;
  border: none; border-radius: var(--radius-md); background: #fff;
}
.media-popaud-wrap { padding: var(--space-sm) var(--space-xs); min-width: min(360px, 72vw); }
.media-popaud { width: 100%; }

/* pattern backdrop for non-visual stages (audio / docs) — decorative
   "image" the controls sit on */
.media-poppattern {
  border-radius: var(--radius-md);
  background:
    repeating-linear-gradient(45deg, rgba(127,127,127,.10) 0 12px, transparent 12px 24px),
    repeating-linear-gradient(-45deg, rgba(127,127,127,.07) 0 12px, transparent 12px 24px),
    var(--bg-tertiary);
}
.popaud { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); padding: var(--space-lg); width: min(430px, 76vw); }
.popaud-play {
  width: 62px; height: 62px; border-radius: 50%;
  border: none; cursor: pointer; font-size: 1.5rem; line-height: 1;
  background: var(--bg-secondary); color: var(--text-primary);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.popaud-play:hover { background: var(--bg-tertiary); }
.popaud-name { font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.popaud-row { display: flex; justify-content: center; }
.popaud-time { color: var(--text-muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.popaud-seek { width: 100%; }
.popdoc { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); padding: var(--space-xl); text-align: center; width: min(430px, 76vw); }
.popdoc-play {
  width: 62px; height: 62px; border-radius: 50%;
  border: none; cursor: pointer; font-size: 1.5rem; line-height: 1;
  background: var(--bg-secondary); color: var(--text-primary);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.popdoc-play:hover { background: var(--bg-tertiary); }
.popdoc-title { font-weight: 600; overflow-wrap: anywhere; }

/* gallery nav arrows over the stage */
.media-popnav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 44px; border: none; border-radius: var(--radius-sm);
  background: rgba(0,0,0,.45); color: #fff; font-size: .9rem;
  cursor: pointer; z-index: 2;
}
.media-popnav:hover { background: rgba(0,0,0,.7); }
.media-popnav.prev { left: 6px; }
.media-popnav.next { right: 6px; }

/* gallery thumb strip */
.media-popstrip {
  display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 2px;
  scrollbar-width: thin;
}
.media-popthumb {
  position: relative; flex: 0 0 auto;
  width: 56px; height: 56px; padding: 0;
  border: 2px solid transparent; border-radius: var(--radius-sm);
  background: var(--bg-tertiary); cursor: pointer; overflow: hidden;
  opacity: .65;
}
.media-popthumb img, .media-popthumb video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.media-popthumb.active { border-color: var(--color-primary-bright); opacity: 1; }
.media-popthumb:hover { opacity: 1; }
.popthumb-badge {
  position: absolute; inset: auto 2px 2px auto;
  background: rgba(0,0,0,.6); color: #fff;
  font-size: .6rem; border-radius: 3px; padding: 1px 3px;
}
.popthumb-chip {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; font-size: .6rem; padding: 2px;
  color: var(--text-primary); text-align: center; overflow-wrap: anywhere;
}
.media-popthumb.kind-audio, .media-popthumb.kind-file { width: auto; min-width: 74px; max-width: 130px; }

/* legacy emoji doc icon (kept for older references) */
.media-docicon { font-size: 1.8em; }
.media-docicon.big { font-size: 2.6em; }
.media-popdoc { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); }

/* links & preview cards */
.msg-link { color: var(--color-primary-bright); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.linkcards { display: flex; flex-direction: column; gap: var(--space-2xs); margin: var(--space-2xs) 0; }
.link-card {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--border);
  border-left: 3px solid var(--color-secondary);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  text-decoration: none; color: inherit;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.link-card:hover { border-color: var(--border-strong); background: var(--bg-tertiary); text-decoration: none; }
.lc-icon {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: var(--radius-sm); object-fit: cover;
}
.lc-icon-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-tertiary); font-size: 0.9em;
}
.lc-text { display: flex; flex-direction: column; min-width: 0; }
.lc-title { font-weight: 650; font-size: var(--font-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-desc {
  font-size: var(--font-xs); color: var(--text-secondary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lc-url { opacity: 0.8; }

/* message queue */
#queueBox { display: flex; flex-direction: column; gap: var(--space-2xs); }
.queue-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2xs) var(--space-2xs) 0;
}
.queue-headright { display: inline-flex; align-items: center; gap: var(--space-xs); }
.q-collapse { color: var(--text-muted); }
.q-collapse:hover { color: var(--text-primary); }
.queue-title { display: inline-flex; align-items: center; gap: 0.25em; font-size: var(--font-xs); font-weight: 700; color: var(--text-secondary); }
.queue-title svg { flex-shrink: 0; }
/* queue strip collapse: only the message rows hide — the head bar stays.
   Stroke chevron rotates 90° when open (caret ban, ASSETS.md §3). */
.queue-toggle {
  display: inline-flex; align-items: center; gap: 0.3em;
  background: none; border: 0; padding: 0.15em 0.4em; margin-left: -0.4em;
  cursor: pointer; color: inherit; border-radius: var(--radius-sm);
}
.queue-toggle:hover { background: var(--bg-tertiary); }
.queue-toggle svg { flex-shrink: 0; transition: transform var(--transition-fast); }
#queueBox:not(.collapsed) .queue-toggle svg.q-caret { transform: rotate(90deg); }
.queue-items { display: flex; flex-direction: column; gap: var(--space-2xs); }
.queue-items[hidden] { display: none; }
.queue-autosend { display: inline-flex; align-items: center; gap: var(--space-2xs); cursor: pointer; }
.queue-item {
  display: flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-sm);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg-secondary) 60%, transparent);
}
.queue-item.sending { opacity: 0.65; border-style: solid; }
.queue-msg {
  flex: 1; min-width: 0;
  font-size: var(--font-sm);
  /* pre-wrap so queued newlines stay visible — a collapsed "messages in
     one" item reads as separate paragraphs, not a run-on blob. Capped +
     scrollable so book-sized messages don't swallow the panel. */
  white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 7.5em; overflow-y: auto;
  border-radius: var(--radius-sm);
  padding: 0 0.25em;
  outline: none;
}
.queue-msg[contenteditable="true"] { cursor: text; }
.queue-msg[contenteditable="true"]:hover { background: var(--bg-tertiary); }
.queue-msg[contenteditable="true"]:focus {
  background: var(--bg-primary);
  box-shadow: inset 0 -1px 0 var(--color-secondary);
}
/* queued-prompt delete confirmation: preview of what's about to vanish */
.q-del-preview {
  font-family: var(--font-mono); font-size: var(--font-xs);
  color: var(--text-muted);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  max-height: 6em; overflow-y: auto;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.q-web { flex-shrink: 0; opacity: 0.4; font-size: 0.9em; }
.q-web.on { opacity: 1; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--color-secondary) 70%, transparent)); }
.q-thumbs { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
.q-thumbs img {
  width: 22px; height: 22px; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  cursor: zoom-in;   /* click → media popup */
}
.q-more, .q-docs { font-size: var(--font-xs); color: var(--text-muted); }

/* composer: force-web-search globe + toggle */
.websearch-ctl {
  display: inline-flex; align-items: center; gap: 0.35em;
  cursor: pointer; user-select: none;
  padding: 0 0.2em;
}
.websearch-ctl .ws-icon { font-size: 0.95em; opacity: 0.75; }
.websearch-ctl:has(input:checked) .ws-icon { opacity: 1; }
.q-auto-wrap { flex-shrink: 0; }
.q-send, .q-del { flex-shrink: 0; }

/* context-usage pill — ring gauge + %, same chip design as model/think */
.chip-ctx { gap: 0.35em; cursor: default; }
.ctx-ring { transform: rotate(-90deg); flex-shrink: 0; }
.ctx-ring .ctx-track {
  fill: none;
  stroke: color-mix(in srgb, var(--text-primary) 26%, transparent);
  stroke-width: 3;
}
.ctx-ring .ctx-arc {
  fill: none;
  stroke: var(--color-secondary);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--transition-med) var(--ease-out), stroke var(--transition-fast);
}
.chip-ctx.warn .ctx-arc { stroke: #d9a441; }
.chip-ctx.crit .ctx-arc { stroke: var(--color-danger); }
.ctx-pct { font-variant-numeric: tabular-nums; }

/* inline title rename */
.title-edit {
  font: inherit; font-weight: 650;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--color-secondary);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.4em;
  max-width: min(420px, 52vw);
}
.title-edit:focus { outline: none; }
.title-save { color: var(--color-success); }

/* chat item ⋮ menu */
.chatitem-more {
  grid-column: 2; grid-row: 1;
  justify-self: end; align-self: center;
  flex-shrink: 0;
  border: 0; background: none;
  color: var(--text-muted);
  font-size: 1em; line-height: 1;
  padding: 0 0.15em;
  cursor: pointer;
  border-radius: var(--radius-sm);
  opacity: 0.55;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}
.chatitem:hover .chatitem-more { opacity: 1; }
.chatitem-more:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.item-menu { position: fixed; z-index: 90; min-width: 190px; }

/* tool palette */
.palette { display: flex; flex-direction: column; gap: var(--space-xs); }
.pal-item {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.pal-item:hover { border-color: var(--border-strong); background: var(--bg-tertiary); }
.pal-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pal-title {
  font-size: var(--font-sm); font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pal-desc {
  font-size: var(--font-xs); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* command bar — rises from under the composer, over the chat context */
.commandbar-wrap { position: relative; }
.commandbar {
  position: absolute;
  bottom: calc(100% + 6px); left: 0; right: 0;
  max-height: 42vh;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-2xs);
  background: var(--bg-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xs);
  z-index: 60;
  animation: rise-in var(--transition-med) var(--ease-out);
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.websearch-icon { font-size: var(--font-sm); opacity: 0.85; flex-shrink: 0; }
.pal-go { flex-shrink: 0; }

/* version tag beside the gateway status (flex row in the sidebar footer) */
.versiontag {
  font-size: var(--font-xs);
  color: var(--text-muted);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* agent picker — dropdown row at the top of the chats context sidebar */
.ctx-agentrow {
  position: relative;
  padding: 0 var(--space-2xs) var(--space-xs);
  margin-bottom: var(--space-xs);
  border-bottom: 1px solid var(--border);
}
.ctx-agentrow .agent-picker { display: flex; width: 100%; }

/* command-bar-style picker palettes (agent / model / thinking) */
.pick-dd {
  position: absolute; z-index: 60;
  max-height: 42vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-2xs);
  background: var(--bg-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xs);
  animation: rise-in var(--transition-med) var(--ease-out);
}
.pick-dd.up   { bottom: calc(100% + 6px); left: 0; right: 0; }
.pick-dd.down { top: calc(100% + 4px); left: var(--space-2xs); right: var(--space-2xs); }
.pick-dd .pal-item { flex-shrink: 0; }
.pick-dd .pal-item.selected { border-color: var(--color-secondary); }
.pick-dd .pal-sel { color: var(--color-success); flex-shrink: 0; }
/* provider-grouped model picker: group head + seek button */
.pal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-xs) var(--space-2xs) 0;
  font-size: var(--font-xs); font-weight: 700; letter-spacing: 0.04em;
  color: var(--text-muted);
}
.pal-head:not(:first-child) { margin-top: var(--space-2xs); border-top: 1px solid var(--border); }
.pal-headtitle { display: inline-flex; align-items: baseline; gap: 0.4em; }
/* default/fallback reference badges beside model names in the picker */
.pal-badge {
  display: inline-block; vertical-align: middle; margin-left: 0.35em;
  padding: 0.05em 0.45em; border-radius: var(--radius-pill, 999px);
  font-size: 0.72em; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4;
}
.pal-badge.b-default {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-success) 55%, transparent);
}
.pal-badge.b-fallback {
  color: #8fa7c4;
  background: color-mix(in srgb, #8fa7c4 14%, transparent);
  border: 1px solid color-mix(in srgb, #8fa7c4 45%, transparent);
}
.pal-seek { color: var(--text-muted); }
.pal-seek:hover { color: var(--text-primary); }
.pal-seek:disabled { opacity: 0.6; cursor: wait; }
.pal-seek.spinning svg { animation: pal-spin 0.9s linear infinite; }
@keyframes pal-spin { to { transform: rotate(360deg); } }

/* notifications dropdown (topbar bell) — v0.30.1: wider, labeled section
   bands, Deck-notifications controls ride the section title row */
.dd-menu-notif { width: 348px; max-height: min(78vh, 660px); overflow: hidden auto; }
.notif-switchrow { padding: var(--space-xs) var(--space-md); margin: 0; }
.dd-menu-notif .dd-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-sm);
  min-height: 34px;
  padding: 4px var(--space-md);
  font-size: var(--font-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted);
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
}
.dd-menu-notif .ann-block .dd-head { border-top: 0; }
.deck-head-tools { display: flex; align-items: center; gap: var(--space-xs); }
.deck-testbtn { width: 24px; height: 24px; padding: 0; color: var(--text-muted); }
.deck-testbtn:hover { color: var(--text-primary); }

/* --------------------------------------------------------------- docs -- */
.docs-view {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: var(--space-sm);
}
.md { font-size: var(--font-sm); line-height: 1.6; max-width: 860px; }
.md h1 { font-size: 1.5em; margin: 0.8em 0 0.4em; }
.md h2 { font-size: 1.25em; margin: 0.9em 0 0.4em; border-bottom: 1px solid var(--border); padding-bottom: 0.2em; }
.md h3 { font-size: 1.1em; margin: 0.8em 0 0.3em; }
.md h4 { font-size: 1em; margin: 0.7em 0 0.3em; }
.md p { margin: 0.5em 0; }
.md ul, .md ol { margin: 0.5em 0; padding-left: 1.4em; }
.md li { margin: 0.2em 0; }
.md code {
  font-family: var(--font-mono); font-size: 0.9em;
  background: var(--bg-tertiary);
  padding: 0.1em 0.35em; border-radius: var(--radius-sm);
}
.md pre {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-sm); overflow-x: auto;
  margin: 0.6em 0;
}
.md pre code { background: none; padding: 0; }
.md blockquote {
  border-left: 3px solid var(--color-secondary);
  margin: 0.6em 0; padding: 0.2em 0.9em;
  color: var(--text-secondary);
}
.md hr { border: none; border-top: 1px solid var(--border); margin: 1em 0; }
.md table { border-collapse: collapse; margin: 0.6em 0; width: 100%; }
.md td, .md th {
  border: 1px solid var(--border);
  padding: 0.3em 0.6em; font-size: var(--font-xs);
  text-align: left;
}
.md a { color: var(--color-secondary); }

/* docs tree — folder depth = inheritance; one rail line per level */
.doc-tree-dir { display: flex; flex-direction: column; }
.doc-dir-label {
  display: flex; align-items: center; gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-2xs) 0;
}
.doc-dir-name {
  font-size: var(--font-xs); font-weight: 700;
  color: var(--text-muted); letter-spacing: 0.02em;
}
.doc-tree-children {
  display: flex; flex-direction: column; gap: 1px;
  margin-left: 0.35em;
  padding-left: 0.3em;
  border-left: 1px solid var(--border-strong);   /* the inheritance rail */
}
.doc-tree-children .doc-tree-children { border-left-color: var(--border); }
.doc-item { font-size: var(--font-sm); }
.doc-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   Timeline (Docs section) — VERSIONS.md behind, ROADMAP.md ahead, NOW between.
   Spec: docs/L3-implementation/timeline.md
   ========================================================================== */
.docs-side-extra {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--border-strong);
}
.timeline-entry {
  width: 100%; text-align: left; font: inherit;
  background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; gap: var(--space-sm);
}

.timeline-view { display: flex; flex-direction: column; gap: var(--space-sm); height: 100%; }
.tl-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-sm); flex-wrap: wrap;
}
.tl-jumps { display: inline-flex; gap: 2px; }
.tl-nowbtn { color: var(--color-secondary); font-weight: 700; }
.tl-range { font-family: var(--font-mono); }

.tl-scroll {
  flex: 1;
  min-height: 200px;   /* guard for very short viewports; .docs-view scrolls if needed */
  overflow-x: auto; overflow-y: hidden;
  outline: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--color-secondary) 6%, transparent), transparent 60%);
}
.tl-scroll:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 40%, transparent); }
.tl-strip {
  position: relative;
  display: flex; align-items: stretch;
  min-width: max-content;
  height: 100%;
  padding: 0 70px;
}
.tl-strip::before {           /* the axis */
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; margin-top: -1px;
  background: linear-gradient(90deg,
    var(--border-strong) 0%,
    var(--color-primary-muted) 30%,
    var(--color-secondary) 50%,
    var(--color-accent-muted) 72%,
    var(--border-strong) 100%);
  opacity: 0.7;
}

.tl-node {
  flex: 0 0 auto; width: 232px;
  position: relative; cursor: pointer;
  opacity: 0; transform: translateY(14px) scale(0.95);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.tl-node.tl-down { transform: translateY(-14px) scale(0.95); }
.tl-node.tl-formed { opacity: 1; transform: none; }
.tl-node.tl-now, .tl-node.tl-idea { width: 120px; }
.tl-node.tl-idea { width: 200px; }

.tl-dot {
  position: absolute; left: 50%; top: 50%;
  width: 12px; height: 12px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.tl-future .tl-dot {
  background: var(--bg-primary);
  border: 2px solid var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}
.tl-idea .tl-dot {
  width: 8px; height: 8px;
  background: var(--text-muted); box-shadow: none;
}

.tl-stem {
  position: absolute; left: 50%; width: 2px; height: 18px;
  margin-left: -1px; background: var(--border-strong);
}
.tl-up .tl-stem { bottom: 50%; margin-bottom: 7px; }
.tl-down .tl-stem { top: 50%; margin-top: 7px; }

.tl-card {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 212px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm, 0 1px 3px rgb(0 0 0 / 0.12));
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.tl-node:hover .tl-card { border-color: var(--border-strong); background: var(--bg-tertiary); }
.tl-up .tl-card { bottom: calc(50% + 26px); }
.tl-down .tl-card { top: calc(50% + 26px); }

.tl-badge {
  font-size: var(--font-xs); font-weight: 700;
  padding: 1px 7px; border-radius: 99px;
}
.tl-badge-past { background: var(--color-primary-dark); color: #fff; }
[data-theme="light"] .tl-badge-past { background: var(--color-primary-light); color: var(--color-primary-dark); }
.tl-badge-future {
  background: transparent;
  border: 1px solid var(--color-accent); color: var(--color-accent-dark);
}
.tl-badge-future.h-now { border-color: var(--color-secondary); color: var(--color-secondary-dark); }
.tl-badge-future.h-later { border-color: var(--color-primary-muted); color: var(--color-primary-muted); }
.tl-date { font-size: var(--font-xs); color: var(--text-muted); }
.tl-title {
  font-size: var(--font-sm); color: var(--text-primary); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tl-idea .tl-title { -webkit-line-clamp: 4; color: var(--text-secondary); }
.tl-horizon { font-size: var(--font-xs); color: var(--text-muted); }
.tl-status { font-size: var(--font-xs); color: var(--color-secondary); font-style: italic; }

/* NOW marker */
.tl-nowline {
  position: absolute; left: 50%; top: 8%; bottom: 8%;
  width: 3px; margin-left: -1.5px; border-radius: 3px;
  background: linear-gradient(180deg, transparent, var(--color-secondary) 30%, var(--color-secondary) 70%, transparent);
  animation: tl-pulse 2.2s ease-in-out infinite;
}
@keyframes tl-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-secondary) 70%, transparent)); }
}
.tl-nowcol {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(50% + 14px); text-align: center; white-space: nowrap;
}
.tl-nowlabel { font-weight: 800; letter-spacing: 0.12em; color: var(--color-secondary); font-size: var(--font-sm); }
.tl-nowdate { font-size: var(--font-xs); color: var(--text-muted); }

.tl-meta { margin-bottom: var(--space-sm); font-size: var(--font-sm); }
.tl-meta td { padding: 2px 10px 2px 0; vertical-align: top; }

/* ==========================================================================
   Context-sidebar tab strips (Agents: agents/chips · Users: convo/admin)
   ========================================================================== */
.ctx-tabs {
  display: flex; gap: 2px;
  padding: 2px;
  margin-bottom: var(--space-xs);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
}
.ctx-tab {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 5px 4px;
  font: inherit; font-size: var(--font-xs); font-weight: 600;
  color: var(--text-secondary);
  background: none; border: 0; border-radius: calc(var(--radius-md) - 2px);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.ctx-tab:hover { color: var(--text-primary); }
.ctx-tab.active {
  background: var(--bg-primary);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 0.2));
}
.ctx-tab svg { flex-shrink: 0; }

/* ==========================================================================
   Agents tab — sidebar rows, chips, detail cards, prompt blocks
   ========================================================================== */
.ag-list { display: flex; flex-direction: column; gap: 2px; }
.ag-row {
  width: 100%; text-align: left; font: inherit;
  display: flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs);
}
.ag-row .tag { margin-left: auto; flex-shrink: 0; }
.ag-rowicon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--color-secondary);
}
.ag-rowtext { display: flex; flex-direction: column; min-width: 0; }
.ag-rowname {
  font-size: var(--font-sm); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ag-rowsub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-warn { background: var(--color-warning-light); color: var(--color-warning-dark); }
.tag-muted { background: var(--bg-tertiary); color: var(--text-muted); }

/* specialized chips — disabled until their feature wires them up */
.ag-chip.disabled { opacity: 0.62; }
.ag-chip.disabled .ag-rowicon { color: var(--text-muted); }

/* v0.34.0 — Gateway defaults row above the specialized chips */
.ag-gateway .chatitem-name { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.ag-gateway .chatitem-name svg { color: var(--color-primary); flex: none; }
.ag-chip-general .chatitem-name { font-weight: 600; }

/* v0.34.0 — blue ▶ setup button on each specialized chip row */
.ag-item { position: relative; }
.ag-setupbtn {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary); color: #fff; border: none; cursor: pointer;
  opacity: 0.9; transition: background .12s ease, opacity .12s ease;
}
.ag-setupbtn svg { margin-left: 1px; }
.ag-setupbtn:hover { background: var(--color-primary-dark); opacity: 1; }
.ag-item:has(.ag-setupbtn) .chatitem-meta { padding-right: 24px; }
/* in-card variant (chip detail view) */
.ag-setupbtn-lg {
  position: static; transform: none; width: auto; height: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--radius-sm, 6px);
  margin-top: var(--space-sm); font-size: var(--font-sm);
}
.ag-setupbtn-lg svg { margin-left: 0; }

/* --- detail view --- */
.agents-view { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-sm); }
.agent-detail-head {
  display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
.agent-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-secondary) 14%, transparent);
  color: var(--color-secondary);
}
.agent-detail-name { font-size: var(--font-lg); font-weight: 700; }
.agent-detail-desc { flex-basis: 100%; }

.agent-card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  max-width: 780px;
}
.agent-card-head {
  display: flex; align-items: baseline; gap: var(--space-xs); flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}
/* v0.32.0 — retention & privacy card (Agents screen) */
.ret-body { display: grid; gap: var(--space-2xs); margin-top: var(--space-xs); transition: opacity var(--transition-fast); }
.ret-body.ret-off { opacity: .5; }
.ret-age { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-2xs) 0; flex-wrap: wrap; }
.ret-age[hidden] { display: none; }
.ret-num { width: 5.5em; min-width: 0; }   /* min-width:0 — .set-input's 220px floor would win */
.ret-unit { width: auto; min-width: 0; }
.ret-deep { margin-top: var(--space-2xs); }
.ret-note { margin: var(--space-xs) 0 0; }
.set-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-2xs) 0;
}
.set-label { display: flex; flex-direction: column; font-size: var(--font-sm); }
.set-hint { font-weight: 400; }
.set-select, .set-input {
  font: inherit; font-size: var(--font-sm);
  color: var(--text-primary);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  min-width: 220px; max-width: 60%;
}
.set-select:focus, .set-input:focus {
  outline: none; border-color: var(--color-primary-muted);
}
/* v0.33.1 — MOBILE: the 220px control floor + side-by-side rows overflowed
   phone viewports (controls clipped off the right edge). Stack set-rows
   (label above, full-width control below) and let the age row wrap. MUST sit AFTER the .set-row/.set-select base rules above (they win on
   equal specificity when later in the file — bit me once already). */
@media (max-width: 640px) {
  .set-row { flex-direction: column; align-items: stretch; gap: var(--space-2xs); }
  .set-select, .set-input { min-width: 0; max-width: none; width: 100%; }
  .ret-age { gap: var(--space-2xs); }
  .ret-age .ret-num { width: 5.5em; flex: none; }
  .ret-age .ret-unit { flex: 1 1 8em; }
  .ret-age .muted { flex-basis: 100%; }   /* hint drops to its own line */
}
.ag-effective { margin: var(--space-xs) 0 0; }

/* --- system prompt blocks --- */
.prompt-block {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-sm) var(--space-sm);
  margin-top: var(--space-sm);
}
.prompt-block-head {
  display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap;
  margin-bottom: var(--space-xs);
}
.prompt-dir { font-size: var(--font-sm); font-weight: 700; color: var(--color-secondary); }
.prompt-mode { margin-left: auto; }
.switch-text { font-size: var(--font-xs); color: var(--text-secondary); }
.prompt-text {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: var(--font-sm);
  color: var(--text-primary);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  resize: vertical;
}
.prompt-text:focus { outline: none; border-color: var(--color-primary-muted); }

/* ==========================================================================
   Chat: pre/post prompt wrap box — transparent darker box AROUND the user
   bubble; prompt notes sit outside the message, above/below it.
   ========================================================================== */
.prompt-wrap {
  align-self: flex-end;
  max-width: 100%;
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  padding: 6px 7px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-primary) 12%, transparent);
}
.prompt-wrap .bubble.user { align-self: flex-end; }
.prompt-note {
  font-size: var(--font-xs); line-height: 1.45;
  color: var(--text-secondary);
  opacity: 0.72;
  white-space: pre-wrap; word-break: break-word;
}
.prompt-note-tag {
  font-weight: 700; letter-spacing: 0.03em;
  color: var(--color-secondary);
  opacity: 0.9;
}

/* ==========================================================================
   Users tab — sidebar rows, presence dots, DM pane
   ========================================================================== */
.usr-list { display: flex; flex-direction: column; gap: 2px; }
.usr-row {
  position: relative;
  display: flex; align-items: center; gap: var(--space-xs);
  width: 100%; text-align: left;
  padding: var(--space-xs);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.usr-row:hover { background: var(--bg-tertiary); }
.usr-row.active { background: var(--color-primary-dark); color: #fff; }
[data-theme="light"] .usr-row.active { background: var(--color-primary-light); color: var(--color-primary-dark); }
.usr-row.is-disabled { opacity: 0.55; }

.usr-avatar {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-primary-dark); color: #fff;
  font-size: var(--font-sm); font-weight: 700;
}
[data-theme="light"] .usr-avatar { background: var(--color-primary); }
.usr-avatar.sm { width: 24px; height: 24px; font-size: var(--font-xs); }
/* presence dot hovering the avatar's bottom-right corner */
.usr-status {
  position: absolute; right: -1px; bottom: -1px;
  width: 9px; height: 9px;
  border-radius: 4px;
  border: 2px solid var(--bg-primary);
  box-sizing: content-box;
}
.usr-status.st-active  { background: var(--color-success); }
.usr-status.st-away    { background: var(--color-accent); }
.usr-status.st-busy    { background: var(--color-warning); }
.usr-status.st-offline { background: var(--text-muted); }

.usr-lines { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.usr-line1 { display: flex; align-items: center; gap: 4px; min-width: 0; }
.usr-name {
  font-size: var(--font-sm); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.usr-line2 {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%;
}
.role-ic { flex-shrink: 0; }
.role-admin { color: var(--color-danger); }
.role-moderator { color: var(--color-accent); }
.role-user { color: var(--text-muted); }
.usr-dots {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: none; border: 0; border-radius: var(--radius-sm);
  color: var(--text-muted); cursor: pointer;
}
.usr-dots:hover { background: var(--bg-secondary); color: var(--text-primary); }
.usr-star { color: var(--color-accent); font-size: var(--font-xs); flex-shrink: 0; }
.usr-disabledtag { color: var(--color-danger); font-weight: 600; }

/* floating ⋮ menu (positioned by JS near the dots button) */
.dd-float {
  position: fixed; z-index: var(--z-popup);
  min-width: 170px;
}

/* --- DM pane (main area of the users tab) --- */
.users-view { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: var(--space-sm); }
.dm-pane {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.dm-header {
  display: flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border-bottom: 1px solid var(--border);
}
.dm-title { font-weight: 700; font-size: var(--font-md); }
.dm-presence { margin-left: auto; text-transform: capitalize; }
.dm-scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-xs);
  padding: var(--space-md);
}
.dm-empty { text-align: center; margin: auto; }
.dm-msg { display: flex; flex-direction: column; max-width: 78%; }
.dm-msg.sent { align-self: flex-end; align-items: flex-end; }
.dm-msg.recv { align-self: flex-start; align-items: flex-start; }
.dm-bubble {
  padding: 6px 10px;
  border-radius: var(--radius-md);
  font-size: var(--font-sm); line-height: 1.45;
  word-break: break-word; white-space: pre-wrap;
}
.dm-msg.sent .dm-bubble {
  background: var(--color-primary-dark); color: #fff;
  border-bottom-right-radius: var(--radius-sm);
}
[data-theme="light"] .dm-msg.sent .dm-bubble { background: var(--color-primary-light); color: var(--color-primary-dark); }
.dm-msg.recv .dm-bubble {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-bottom-left-radius: var(--radius-sm);
}
.dm-meta { margin-top: 2px; }
/* v0.29.0 DM history window: top Load-more control */
.dm-loadmore { display: block; margin: 0 auto var(--space-sm); }
.dm-composer {
  display: flex; align-items: flex-end; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-top: 1px solid var(--border);
}
.dm-input {
  flex: 1;
  position: relative;
  font: inherit; font-size: var(--font-sm);
  max-height: 120px; overflow-y: auto;
  white-space: pre-wrap; word-break: break-word;
  padding: 7px 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.dm-input:focus { outline: none; border-color: var(--color-primary-muted); }
.dm-input:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted); opacity: 0.7;
  pointer-events: none;
}

/* ==========================================================================
   v0.11.0 — comms rows, admin pane, scope panels, seg3, announcements
   ========================================================================== */

/* avatar sizes beyond the default 30px */
.usr-avatar.xs { width: 20px; height: 20px; font-size: 0.6rem; }
.usr-avatar.lg { width: 42px; height: 42px; font-size: var(--font-lg); }
.usr-avatar.xs .usr-status { width: 7px; height: 7px; border-width: 1.5px; }

/* flagged accounts glow red in the admin list */
.usr-row.is-flagged { box-shadow: inset 2px 0 0 var(--color-danger); }
.usr-flagtag { color: var(--color-danger); font-weight: 700; }

/* ─── v0.27.0 Requests inbox (Users → Admin tab, password-reset.md §4) ─── */
.req-head { display: flex; align-items: center; gap: 6px; }
.req-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--color-warning); color: #fff;
  font-size: 0.65rem; font-weight: 700;
}
.req-filter {
  margin-left: auto;
  background: var(--bg-secondary); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: 6px;
  font-size: var(--font-xs); padding: 1px 4px;
}
.req-empty { padding: 2px 4px; }
.req-row .req-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.req-line2 { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.req-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 1px 7px; border-radius: 8px;
}
.req-badge .req-dot { width: 6px; height: 6px; border-radius: 50%; }
.req-badge-pending { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 14%, transparent); }
.req-badge-pending .req-dot { background: var(--color-warning); }
.req-badge-done { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 14%, transparent); }
.req-badge-done .req-dot { background: var(--color-success); }
/* done requests stay listed but recede */
.req-row.req-done { opacity: 0.55; }
.req-row.req-done:hover { opacity: 0.85; }

/* ─── v0.27.0 avatar color swatches (Settings → Profile) ─── */
.avatar-color-row { flex-direction: column; align-items: stretch; gap: var(--space-sm); }
.avatar-swatch-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.avatar-swatch {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  color: #fff; font-size: 0.8rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.1s ease, border-color 0.1s ease;
}
.avatar-swatch:hover { transform: scale(1.12); }
.avatar-swatch.selected { border-color: var(--text-primary); box-shadow: 0 0 0 2px var(--bg-primary) inset; }

/* ─── v0.27.0 login reset link ─── */
.login-reset-line { margin-top: var(--space-md); text-align: center; font-size: var(--font-sm); }
.login-reset-line a { color: var(--color-primary); text-decoration: none; }
.login-reset-line a:hover { text-decoration: underline; }

/* comms rows in the chats sidebar (People/Groups) */
.comms-row { gap: 3px; }
.comms-rowline1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.comms-rowline1 .chatitem-name { flex: 0 1 auto; }
.comms-rowline1 .chatitem-more { margin-left: auto; }
.comms-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.comms-box { display: flex; flex-direction: column; }

/* --- triple segmented toggle (allow all | allow some | allow none) --- */
.seg3 {
  display: inline-flex;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 2px; gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
}
.seg3 button {
  font: inherit; font-size: var(--font-xs); font-weight: 600;
  color: var(--text-secondary);
  background: none; border: 0;
  padding: 2px 9px;
  border-radius: var(--radius-full);
  cursor: pointer; white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.seg3 button:hover { color: var(--text-primary); }
.seg3 button.on {
  background: var(--color-secondary-dark); color: #fff;
}
.seg3.locked { opacity: 0.55; }
.seg3.locked button { cursor: default; }
.set-num { max-width: 160px; }

/* --- scope panels (expandable, per screen) --- */
.scope-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2xs);
  overflow: hidden;
}
.scope-head {
  display: flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  user-select: none;
}
.scope-head:hover { background: var(--bg-tertiary); }
.scope-caret {
  font-size: var(--font-xs); color: var(--text-muted);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}
.scope-panel.open .scope-caret { transform: rotate(90deg); }
.scope-icon { flex-shrink: 0; }
.scope-name { font-size: var(--font-sm); font-weight: 600; }
.scope-body {
  display: none;
  padding: 0 var(--space-sm) var(--space-xs) calc(var(--space-sm) + 1em);
}
.scope-panel.open .scope-body { display: block; }
.scope-panel.locked .scope-head { cursor: default; }

/* --- admin pane (Users tab main area) --- */
.admin-pane {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
}
.admin-pane-scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  padding-right: 2px;
}
.admin-head {
  display: flex; align-items: center; gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.admin-headtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-name { font-size: var(--font-lg); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.admin-flag { flex-shrink: 0; }
.admin-actions { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-top: var(--space-sm); }

/* --- announcements in the bell dropdown --- */
.ann-block { border-bottom: 1px solid var(--border); }
.ann-head { display: flex; align-items: center; justify-content: space-between; }
.ann-compose { padding: 1px 8px; font-size: var(--font-xs); }
.ann-list { max-height: 220px; overflow-y: auto; }
.ann-empty { padding: var(--space-2xs) var(--space-md) var(--space-xs); margin: 0; }
.ann-item {
  padding: var(--space-xs) var(--space-md);
  border-top: 1px solid var(--border);
  cursor: pointer;
}
.ann-item:first-child { border-top: 0; }
.ann-item:hover { background: var(--bg-tertiary); }
.ann-item.unread { background: color-mix(in srgb, var(--color-secondary) 8%, transparent); }
.ann-item.unread .ann-item-head strong::before {
  content: "●"; color: var(--color-secondary); font-size: 0.7em; margin-right: 5px;
}
.ann-item-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-xs); }
.ann-item-head strong { font-size: var(--font-sm); }
.ann-body {
  font-size: var(--font-xs); color: var(--text-secondary);
  margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- group create / announcement pickers --- */
.ng-members {
  max-height: 200px; overflow-y: auto;
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  margin-top: var(--space-2xs);
}
.ng-member { margin: 0; padding: var(--space-2xs) var(--space-sm); }
.ng-member + .ng-member { border-top: 1px solid var(--border); }

/* group DM: sender label above received bubbles */
.dm-sender { margin-bottom: 1px; font-weight: 600; }

/* agents sidebar rows now use .chatitem; keep chip dimming */
.ag-item { cursor: pointer; }
.ag-chip.disabled { opacity: 0.62; }

/* ==========================================================================
   v0.12.0 — pending-changes bar, stats, emoji grid, DM composer tools
   ========================================================================== */

/* --- pending changes bottom bar (admin pane) --- */
.admin-pane { position: relative; }
.pending-bar {
  position: sticky; bottom: 0;
  display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap;
  padding: var(--space-xs) var(--space-md);
  background: var(--bg-primary);
  border-top: 2px solid var(--color-accent);
  box-shadow: 0 -4px 14px rgb(0 0 0 / 0.25);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  z-index: 5;
}
.pb-count { font-size: var(--font-sm); font-weight: 700; color: var(--color-accent); }
.pb-pass {
  margin-left: auto;
  font: inherit; font-size: var(--font-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  min-width: 200px;
  color: var(--text-primary);
}
.pb-pass:focus { outline: none; border-color: var(--color-accent); }

/* --- stats (v0.22.0 revamp: month picker + leaderboard table + chart) --- */
.stats-view { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-sm); }
.stats-topbar {
  display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}
.stats-monthsel {
  font: inherit; font-size: var(--font-sm); font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  cursor: pointer;
}
.stats-monthsel:focus { outline: none; border-color: var(--color-primary); }
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  max-width: 900px;
}
.stat-card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}
.stat-label { font-size: var(--font-xs); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.stat-value { font-size: var(--font-xl); font-weight: 800; margin: 2px 0; font-family: var(--font-mono); }

/* leaderboard table */
.stats-table-wrap { overflow-x: auto; }
.stats-table { width: 100%; border-collapse: collapse; }
.stats-table th {
  text-align: left;
  font-size: var(--font-xs); font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-muted);
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}
.stats-table td {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--border);
  font-size: var(--font-sm);
  vertical-align: middle;
}
.stats-table tbody tr:last-child td { border-bottom: 0; }
.stats-table tbody tr:hover td { background: var(--bg-secondary); }
.st-rank { width: 44px; color: var(--text-muted); font-weight: 700; font-family: var(--font-mono); }
th.st-rank { text-align: left; }
.st-usercell { display: inline-flex; align-items: center; gap: var(--space-xs); min-width: 150px; }
.st-name { font-weight: 600; white-space: nowrap; }
.st-num { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.st-num.strong { font-weight: 700; }

/* daily-usage bar chart (inline SVG built by stats.js) */
.stats-chart { position: relative; padding: var(--space-xs) 0 0; }
.stats-chart svg { width: 100%; height: auto; display: block; }
.sch-grid { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 2 5; opacity: 0.8; }
.sch-axis { stroke: var(--border-strong); stroke-width: 1.5; }
.sch-ylab { fill: var(--text-muted); font-size: 14px; font-family: var(--font-mono); }
.sch-xlab { fill: var(--text-muted); font-size: 14px; font-family: var(--font-mono); }
.sch-bar { fill: var(--color-primary-muted); transition: fill 0.15s ease; cursor: pointer; }
.sch-bar:hover, .sch-bar.on { fill: var(--color-primary); }
/* floating day-token badge over the chart's top-right corner (stats.js tip) */
.sch-tip {
  position: absolute; top: -10px; right: -4px; z-index: 6;
  display: inline-flex; align-items: baseline; gap: 0.45em;
  padding: 0.3em 0.7em;
  background: var(--bg-secondary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: 12px; white-space: nowrap;
  pointer-events: none;
}
.sch-tip-day { color: var(--text-muted); font-family: var(--font-mono); }
/* leaderboard quota ring — same two-circle dashoffset gauge as the ctx chip */
.st-quota { display: inline-flex; align-items: center; gap: 0.45em; }
.sq-ring { transform: rotate(-90deg); flex-shrink: 0; }
.sq-ring .sq-track {
  fill: none;
  stroke: color-mix(in srgb, var(--text-primary) 22%, transparent);
  stroke-width: 3;
}
.sq-ring .sq-arc { fill: none; stroke-width: 3; stroke-linecap: round; }
.sq-arc.sq-cyan   { stroke: #22b8cf; }
.sq-arc.sq-green  { stroke: var(--color-success); }
.sq-arc.sq-yellow { stroke: #d9a441; }
.sq-arc.sq-orange { stroke: var(--color-warning); }
.sq-arc.sq-red    { stroke: var(--color-danger); }
.sq-pct { font-family: var(--font-mono); font-size: 0.85em; white-space: nowrap; }
.sq-none { color: var(--text-muted); }
.st-allow { white-space: nowrap; }
.st-inf { color: var(--text-muted); vertical-align: middle; }
.quota-bar {
  flex: 1; max-width: 260px; height: 7px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.quota-bar span { display: block; height: 100%; background: var(--color-secondary); border-radius: var(--radius-full); }
.quota-bar.warn span { background: var(--color-accent); }
.quota-bar.over span { background: var(--color-danger); }

/* --- emoji grid popup --- */
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  max-width: 340px;
}
.emoji-cell {
  font-size: 1.25rem; line-height: 1;
  padding: 6px 0;
  background: none; border: 0; border-radius: var(--radius-sm);
  cursor: pointer;
}
.emoji-cell:hover { background: var(--bg-tertiary); }

/* --- DM composer tools (chats-composer parity) --- */
.dm-composer { align-items: flex-end; }
.dm-attach { flex-shrink: 0; margin-bottom: 4px; }
.dm-box {
  flex: 1;
  display: flex; align-items: flex-end; gap: 2px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 3px 4px;
  transition: border-color var(--transition-fast);
}
.dm-box:focus-within { border-color: var(--color-secondary); }
.dm-box .dm-input {
  border: 0; background: none; padding: 4px 2px;
  flex: 1;
}
.dm-box .dm-input:focus { border: 0; }

/* --- DM composer drop-up palettes (emoji + ＋ attach) — v0.21.0 ---------
   Same recipe as the Chats command/skill palettes: a .commandbar panel
   absolutely positioned OVER the conversation, above the composer. */
.dm-dropup-wrap { position: relative; }
.dm-dropup .emoji-grid { margin: 2px 4px 4px; }
.dm-dropup .pal-item { flex-shrink: 0; }
.dm-dropup .pal-ico { flex: none; display: inline-flex; color: var(--text-muted); }
.dm-dropup .note-pill-ico { color: var(--color-primary-bright); }

/* --- DM media & docs (v0.23.0, spec: L3 dm-media.md) --------------------
   Text bubbles get the SAME md parser as Chats (bubble-md); attachments
   split into carousel (images/videos) + doc list (audio/docs) below. */
.dm-bubble.bubble-md { white-space: normal; }
.dm-bubble-empty { display: none; }
.dm-bubble-rich { white-space: normal; }
.dm-segtext .md-content > :first-child { margin-top: 0; }
.dm-segtext .md-content > :last-child { margin-bottom: 0; }
.dm-msg.sent .msg-link { color: #a8cfff; }
[data-theme="light"] .dm-msg.sent .msg-link { color: var(--color-primary-dark); }

/* media rows/carousels inside a DM message column */
.dm-msg .media-row, .dm-msg .media-carousel { margin: var(--space-2xs) 0 0; max-width: 100%; }
.dm-msg .linkcards { max-width: 100%; }

/* composer staging strip (#dmStaged above the input row) */
.dm-staged {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: var(--space-xs) var(--space-sm) 0;
}
.dm-stagedchip {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 240px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  font-size: var(--font-xs);
}
.dm-stagedchip img {
  width: 30px; height: 30px; object-fit: cover;
  border-radius: var(--radius-sm); flex-shrink: 0;
}
.dm-stagedchip .dms-ico { font-size: 1.25em; flex-shrink: 0; }
.dm-stagedchip .dms-text {
  display: flex; flex-direction: column; min-width: 0; line-height: 1.25;
}
.dm-stagedchip .dms-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dm-stagedchip .dms-x {
  flex-shrink: 0; border: 0; background: none;
  color: var(--text-muted); cursor: pointer;
  font-size: 11px; padding: 2px 4px; border-radius: var(--radius-sm);
}
.dm-stagedchip .dms-x:hover { color: var(--color-danger); background: var(--bg-tertiary); }

/* doc/audio list pagination: >3 items show 3 per page with ‹ ••• › */
.dm-docpager { margin-top: var(--space-2xs); max-width: 100%; }
.dm-docpager .dm-doclist { margin: 0; }
.dm-pg-nav {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-xs); margin-top: 5px;
}
.dm-pg-arrow {
  border: 1px solid var(--border); background: var(--bg-secondary);
  color: var(--text-secondary);
  width: 22px; height: 22px; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 12px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.dm-pg-arrow:hover:not(:disabled) { background: var(--bg-tertiary); color: var(--text-primary); }
.dm-pg-arrow:disabled { opacity: 0.35; cursor: default; }
.dm-pg-dots { display: inline-flex; gap: 5px; padding: 0 2px; }
.dm-pg-dot {
  width: 7px; height: 7px; padding: 0;
  border-radius: 50%; border: 0;
  background: var(--border-strong);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.dm-pg-dot:hover { background: var(--text-muted); }
.dm-pg-dot.active { background: var(--color-primary-bright); transform: scale(1.25); }

/* explicit Open button on browser-openable doc cards (PDF) */
.doc-open {
  flex-shrink: 0;
  border: 1px solid var(--border-strong);
  background: transparent; color: var(--text-secondary);
  border-radius: var(--radius-sm);
  font-size: var(--font-xs); padding: 2px 8px;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.doc-open:hover { color: var(--color-primary-bright); border-color: var(--color-primary-bright); }

/* --- DM picker tabs: Emoji / GIFs / Notifications (v0.24.0) ------------ */
.dm-pick-tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--border);
  padding: 0 4px;
  position: sticky; top: 0;
  background: var(--bg-primary);
  z-index: 1;
}
.dm-pick-tab {
  border: 0; background: none;
  color: var(--text-secondary);
  font-size: var(--font-sm); font-weight: 600;
  padding: 7px 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.dm-pick-tab:hover { color: var(--text-primary); }
.dm-pick-tab.active { color: var(--color-primary-bright); border-bottom-color: var(--color-primary-bright); }
.dm-pick-body { overflow-y: auto; max-height: 34vh; }

/* categorized emoji chapters */
.emoji-cats { padding: 2px 4px 6px; }
.emoji-cat-head {
  padding: 6px 4px 2px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
}

/* Giphy tab */
.dm-gif-search {
  width: calc(100% - 8px);
  margin: 4px;
  padding: 7px 10px;
  font: inherit; font-size: var(--font-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
}
.dm-gif-search:focus { outline: none; border-color: var(--color-primary-muted); }
.dm-gif-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 4px;
  padding: 4px;
}
.dm-gif-cell {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  padding: 0; overflow: hidden;
  cursor: pointer;
  line-height: 0;
  transition: border-color var(--transition-fast);
}
.dm-gif-cell:hover { border-color: var(--color-primary-bright); }
.dm-gif-cell img { width: 100%; height: 90px; object-fit: cover; display: block; }
.dm-gif-cell { position: relative; }
.dm-gif-ad {
  position: absolute; top: 3px; right: 3px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  pointer-events: none;
}
.dm-gif-attr {
  text-align: center;
  padding: 4px 0 2px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.8;
}

/* Notifications tab (like feed) */
.dm-notif-list { display: flex; flex-direction: column; padding: 2px 0; }
.dm-notif-item {
  display: flex; flex-direction: column; gap: 1px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
}
.dm-notif-item:hover { background: var(--bg-secondary); }
.dm-notif-item.unread { background: color-mix(in srgb, var(--color-primary) 7%, transparent); }
.dm-notif-item svg { color: #e25563; vertical-align: -1px; }
.dmn-line1 { display: flex; align-items: center; gap: 5px; font-size: var(--font-sm); }
.dmn-snippet {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px;
}
.dm-notif-empty { padding: 10px; }

/* --- message actions row (like / edit / delete) ----------------------- */
.dm-dot { opacity: 0.6; margin: 0 3px; }
/* v0.28.0: "edited" in the meta row is a button into the edit history */
.dm-edited {
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.dm-edited:hover { color: var(--text-primary); }

/* v0.28.0 edit-history popup rows (oldest → newest, current highlighted) */
.dm-edit-hist { display: flex; flex-direction: column; gap: var(--space-sm); max-height: 55vh; overflow-y: auto; }
.dm-eh-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-secondary);
}
.dm-eh-row.dm-eh-current { border-color: var(--color-primary); }
.dm-eh-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); margin-bottom: 2px; }
.dm-eh-body { white-space: pre-wrap; word-break: break-word; font-size: var(--font-sm); }

/* v0.29.0: Stats user rows deep-link to the DM with that person */
.st-userrow { cursor: pointer; }
.st-userrow:hover td { background: color-mix(in srgb, var(--color-primary) 8%, transparent); }

.dm-actions { visibility: hidden; white-space: nowrap; }
.dm-msg.focused .dm-actions { visibility: visible; }
.dm-msg.liked .dm-actions .dm-act-heart { visibility: visible; }
.dm-act {
  border: 0; background: none; padding: 0 1px;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex; align-items: center;
  vertical-align: -1px;
  transition: color var(--transition-fast);
}
.dm-act:hover { color: var(--text-primary); }
.dm-act-heart.liked, .dm-act-heart.liked:hover { color: #e25563; }
.dm-reactchip {
  display: inline-flex; align-items: center; gap: 3px;
  border: 1px solid color-mix(in srgb, #e25563 45%, transparent);
  background: color-mix(in srgb, #e25563 12%, transparent);
  color: #e25563;
  border-radius: 999px;
  font-size: 0.7rem; font-weight: 600;
  padding: 0 6px; margin-left: 6px;
  cursor: pointer;
  vertical-align: -1px;
}
.dm-reactchip:hover { background: color-mix(in srgb, #e25563 22%, transparent); }
.dm-reactchip svg { display: block; }

/* GIF messages: bare animated image, no bubble chrome */
.dm-bubble-gif { padding: 0; background: none; border: 0; line-height: 0; }
.dm-msg.sent .dm-bubble-gif { background: none; }
[data-theme="light"] .dm-msg.sent .dm-bubble-gif { background: none; }
.dm-bubble-gif img {
  max-width: 240px; max-height: 220px;
  border-radius: var(--radius-md);
  cursor: pointer;
}

/* edit-message popup textarea */
.dm-edit-ta {
  width: 100%; min-height: 96px;
  font: inherit; font-size: var(--font-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  resize: vertical;
}
.dm-edit-ta:focus { outline: none; border-color: var(--color-primary-muted); }

/* bell dropdown: Reactions block */
.react-list { max-height: 200px; overflow-y: auto; }
/* v0.30.0: reaction rows mirror the Conversations block — conversation
   image · title + when · "who (like): message" on the second line */
.react-item {
  display: flex; align-items: flex-start; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
}
.react-item:hover { background: var(--bg-secondary); }
.react-item.unread { background: color-mix(in srgb, var(--color-primary) 7%, transparent); }
.react-heart { color: #e25563; flex-shrink: 0; }

/* Share-a-note picker popup (DM composer): mirrors the Notes-page sidebar
   tree (nt-* classes) with toggle-selectable rows (✓ = will be inserted). */
.dm-notepick { max-height: 52dvh; overflow-y: auto; padding-right: 2px; }
.dm-notepick .nt-note.picked {
  background: color-mix(in srgb, var(--color-primary) 9%, transparent);
  border-color: var(--color-primary-muted);
}
.dm-note-check { margin-left: auto; flex: none; color: var(--color-primary-bright); font-weight: 700; }

/* ==========================================================================
   v0.12.1 — usage badges, typing indicator, bell conversations
   ========================================================================== */

/* rolling-30d usage beside every user row */
.usr-tokens {
  font-family: var(--font-mono);
  color: var(--text-muted);
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  padding: 0 6px;
  line-height: 1.5;
  flex-shrink: 0;
}

/* "…is typing" indicator above the DM composer */
.dm-typing {
  padding: 2px var(--space-sm);
  font-size: var(--font-xs);
  color: var(--text-muted);
  font-style: italic;
  display: flex; align-items: center; gap: 6px;
}
.typing-dots { display: inline-flex; gap: 3px; }
.typing-dots i {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--text-muted);
  animation: typingblink 1.2s infinite;
}
.typing-dots i:nth-child(2) { animation-delay: 0.2s; }
.typing-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingblink {
  0%, 60%, 100% { opacity: 0.25; }
  30% { opacity: 1; }
}

/* conversations block in the bell dropdown */
.convo-block { border-bottom: 1px solid var(--border); }
.convo-list { max-height: 240px; overflow-y: auto; }
.convo-empty { padding: var(--space-2xs) var(--space-md) var(--space-xs); margin: 0; }
.convo-item {
  display: flex; align-items: flex-start; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border-top: 1px solid var(--border);
  cursor: pointer;
}
.convo-item:first-child { border-top: 0; }
.convo-item:hover { background: var(--bg-tertiary); }
.convo-icon {
  width: 24px; height: 24px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--font-xs); font-weight: 700;
  background: var(--bg-tertiary);
  border-radius: 50%;
}
.convo-icon.grp { border-radius: var(--radius-sm); }
.convo-text { min-width: 0; flex: 1; }
.convo-line1 { display: flex; align-items: center; gap: var(--space-xs); }
.convo-line1 strong { font-size: var(--font-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convo-line2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
/* global.css makes bare <svg> display:block (kills inline icons mid-line) —
   restore inline flow for icons riding the bell text rows */
.convo-line1 svg, .convo-line2 svg { display: inline-block; vertical-align: -1px; }
.convo-item.unread { background: color-mix(in srgb, var(--color-secondary) 8%, transparent); }
/* v0.30.0: right-hand cluster — unread chip + 1m/1h/1d ago */
.convo-meta { margin-left: auto; display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.convo-ago { white-space: nowrap; }
.convo-unread {
  font-size: 0.65rem; font-weight: 700;
  background: var(--color-secondary-dark); color: #fff;
  border-radius: var(--radius-full);
  padding: 0 6px;
}
/* announcements: received-ago on the title row */
.ann-ago { flex-shrink: 0; }
/* bell blocks page 5 at a time */
.dd-loadmore { display: block; margin: 4px auto 6px; }