/* inbox.css — rail anchor, redesigned for clarity. Namespaced .inbox-*. */

/* search */
:is(#ovx-root,.torus-inbox) .inbox-search { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 10px; border-radius: 100px; background: var(--glass-1); border: 1px solid var(--glass-border); }
:is(#ovx-root,.torus-inbox) .inbox-search:focus-within { border-color: var(--accent-cyan); }
:is(#ovx-root,.torus-inbox) .inbox-search svg { width: 14px; height: 14px; color: var(--text-dim); flex: 0 0 auto; }
:is(#ovx-root,.torus-inbox) .inbox-search input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: 12px; outline: none; }
:is(#ovx-root,.torus-inbox) .inbox-search input::placeholder { color: var(--text-dim); }

/* filter dropdown — one compact control instead of a chip row */
:is(#ovx-root,.torus-inbox) .inbox-filterwrap { position: relative; flex: 0 0 auto; }
:is(#ovx-root,.torus-inbox) .inbox-filterbtn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 100px;
  border: 1px solid var(--glass-border-2); background: var(--glass-2);
  color: var(--text-secondary); font: inherit; font-size: 12px; cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
:is(#ovx-root,.torus-inbox) .inbox-filterbtn:hover { border-color: var(--accent-cyan); }
:is(#ovx-root,.torus-inbox) .inbox-filterbtn > svg:first-child { width: 13px; height: 13px; color: var(--text-muted); flex: 0 0 auto; }
:is(#ovx-root,.torus-inbox) .inbox-filterbtn > span { font-weight: 600; }
:is(#ovx-root,.torus-inbox) .inbox-caret { color: var(--text-dim); transition: transform var(--t-base) var(--ease-out); }
:is(#ovx-root,.torus-inbox) .inbox-filterbtn[aria-expanded="true"] .inbox-caret { transform: rotate(180deg); }
:is(#ovx-root,.torus-inbox) .inbox-filtermenu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
  min-width: 170px; padding: 6px; border-radius: var(--r-md);
  background: var(--col-indigo); border: 1px solid var(--glass-border-2); box-shadow: var(--wg-elev-3);
  display: none; flex-direction: column; gap: 2px;
  /* never taller than the viewport — scroll inside if the options don't fit */
  max-height: min(58vh, 340px); overflow-y: auto;
}
:is(#ovx-root,.torus-inbox) .inbox-filtermenu.is-open { display: flex; animation: inbox-menu-in var(--t-base) var(--ease-out); }
@keyframes inbox-menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
:is(#ovx-root,.torus-inbox) .inbox-filteropt {
  display: block; width: 100%; text-align: left; padding: 8px 10px;
  border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--text-muted); font: inherit; font-size: 12px; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
:is(#ovx-root,.torus-inbox) .inbox-filteropt:hover { background: var(--glass-2); color: var(--text-primary); }
:is(#ovx-root,.torus-inbox) .inbox-filteropt.is-active { color: var(--accent-cyan); background: var(--glow-cyan); }

/* compact one-line toolbar */
:is(#ovx-root,.torus-inbox) .inbox-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--glass-border); }
@media (prefers-reduced-motion: reduce) { :is(#ovx-root,.torus-inbox) .inbox-filtermenu.is-open { animation: none; } }
:is(#ovx-root,.torus-inbox) .inbox-bulk { display: inline-flex; gap: 4px; }
:is(#ovx-root,.torus-inbox) .inbox-bulk button { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; padding: 5px 9px; border-radius: 100px; border: 1px solid var(--glass-border); background: transparent; color: var(--text-muted); cursor: pointer; transition: all var(--t-fast); }
:is(#ovx-root,.torus-inbox) .inbox-bulk button:hover { color: var(--accent-cyan); border-color: var(--accent-cyan); }
:is(#ovx-root,.torus-inbox) .inbox-bulk svg { width: 12px; height: 12px; }
:is(#ovx-root,.torus-inbox) .inbox-showing { font-size: 10px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 2px; }
:is(#ovx-root,.torus-inbox) .inbox-showing select { background: transparent; border: 0; color: var(--text-muted); font: inherit; font-size: 10px; cursor: pointer; outline: none; }

/* list */
:is(#ovx-root,.torus-inbox) .inbox-list { display: flex; flex-direction: column; gap: 1px; overflow-y: auto; min-height: 0; flex: 1 1 auto; margin: 0 -6px; padding: 0 6px; }

/* row — clean two-line layout */
:is(#ovx-root,.torus-inbox) .inbox-row {
  position: relative; display: grid;
  grid-template-columns: auto auto 1fr auto; align-items: center; gap: 10px;
  padding: 11px 10px 11px 12px; border-radius: var(--r-md);
  cursor: pointer; transition: background var(--t-fast);
}
:is(#ovx-root,.torus-inbox) .inbox-row:hover { background: var(--glass-2); }
:is(#ovx-root,.torus-inbox) .inbox-row:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: -2px; }

/* unread = a small cyan dot + bolder title (no heavy gradient) */
:is(#ovx-root,.torus-inbox) .inbox-dot { width: 7px; height: 7px; border-radius: 50%; background: transparent; flex: 0 0 auto; }
:is(#ovx-root,.torus-inbox) .inbox-row.is-unread .inbox-dot { background: var(--accent-cyan); box-shadow: 0 0 6px var(--glow-cyan); }
:is(#ovx-root,.torus-inbox) .inbox-row.is-unread .inbox-title { color: var(--text-primary); font-weight: 600; }

/* type badge — subtle, fixed slot */
:is(#ovx-root,.torus-inbox) .inbox-badge {
  flex: 0 0 auto; min-width: 30px; text-align: center;
  font-size: 8px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 7px; border-radius: 6px; background: var(--glass-2); color: var(--text-muted);
}
:is(#ovx-root,.torus-inbox) .inbox-badge.is-alert      { color: var(--accent-rose);    background: rgba(251,113,133,0.12); }
:is(#ovx-root,.torus-inbox) .inbox-badge.is-message    { color: var(--accent-cyan);    background: rgba(56,189,248,0.12); }
:is(#ovx-root,.torus-inbox) .inbox-badge.is-notice     { color: var(--accent-amber);   background: rgba(251,191,36,0.12); }
:is(#ovx-root,.torus-inbox) .inbox-badge.is-addback    { color: var(--accent-violet);  background: rgba(129,140,248,0.12); }
:is(#ovx-root,.torus-inbox) .inbox-badge.is-submission { color: var(--accent-emerald); background: rgba(52,211,153,0.12); }
/* per-kind badges — each system-type notice gets its own name + colour */
:is(#ovx-root,.torus-inbox) .inbox-badge.is-checkup    { color: var(--accent-teal);    background: color-mix(in srgb, var(--accent-teal) 15%, transparent); }
:is(#ovx-root,.torus-inbox) .inbox-badge.is-recap      { color: var(--accent-amber);   background: rgba(251,191,36,0.12); }
:is(#ovx-root,.torus-inbox) .inbox-badge.is-brief      { color: var(--accent-cyan);    background: rgba(56,189,248,0.12); }
:is(#ovx-root,.torus-inbox) .inbox-badge.is-fixed      { color: var(--accent-emerald); background: rgba(52,211,153,0.12); }
:is(#ovx-root,.torus-inbox) .inbox-badge.is-bug        { color: var(--accent-purple);  background: color-mix(in srgb, var(--accent-purple) 15%, transparent); }
:is(#ovx-root,.torus-inbox) .inbox-badge.is-revised    { color: var(--accent-amber);   background: color-mix(in srgb, var(--accent-amber) 16%, transparent); }
:is(#ovx-root,.torus-inbox) .inbox-badge.is-withdrawn  { color: var(--accent-rose);    background: color-mix(in srgb, var(--accent-rose) 15%, transparent); }

:is(#ovx-root,.torus-inbox) .inbox-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
:is(#ovx-root,.torus-inbox) .inbox-title { font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(#ovx-root,.torus-inbox) .inbox-sub { font-size: 10.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

:is(#ovx-root,.torus-inbox) .inbox-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
:is(#ovx-root,.torus-inbox) .inbox-age { font-size: 10px; color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
:is(#ovx-root,.torus-inbox) .inbox-star { width: 20px; height: 20px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--text-dim); cursor: pointer; opacity: 0; transition: opacity var(--t-fast), color var(--t-fast); }
:is(#ovx-root,.torus-inbox) .inbox-row:hover .inbox-star { opacity: 1; }
:is(#ovx-root,.torus-inbox) .inbox-star.is-on { opacity: 1; color: var(--accent-amber); }
:is(#ovx-root,.torus-inbox) .inbox-star svg { width: 13px; height: 13px; }

/* expanded detail */
:is(#ovx-root,.torus-inbox) .inbox-row-expand { padding: 0 10px 12px 56px; font-size: 11.5px; color: var(--text-muted); line-height: 1.6; }
:is(#ovx-root,.torus-inbox) .inbox-row-expand .wg-pill { margin-top: 6px; }

/* smooth insertion */
:is(#ovx-root,.torus-inbox) .inbox-row.wg-inserted { animation: inbox-in var(--t-slow) var(--ease-out); }
@keyframes inbox-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { :is(#ovx-root,.torus-inbox) .inbox-row.wg-inserted { animation: none; } }

/* ════════════════════════════════════════════════════════════════════════
   INTELLIGENCE LAYER (2026-07-08) — grouped badge · aging · lanes · needs
   attention · inline quick actions · inbox-zero. Namespaced, glass tokens.
   ════════════════════════════════════════════════════════════════════════ */

/* grouped "▦ N" chip inside the title (e.g. "No equipment check — 7 Rooms") */
:is(#ovx-root,.torus-inbox) .inbox-grouped { display: inline-flex; align-items: center; gap: 3px; margin-right: 6px; padding: 1px 6px 1px 5px; border-radius: 6px; font-size: 9.5px; font-weight: 700; vertical-align: 1px; color: var(--accent-cyan); background: rgba(56,189,248,0.14); }
:is(#ovx-root,.torus-inbox) .inbox-ic { flex: 0 0 auto; }
:is(#ovx-root,.torus-inbox) .inbox-needs-title { display: inline-flex; align-items: center; gap: 6px; }
:is(#ovx-root,.torus-inbox) .inbox-lane-label { display: inline-flex; align-items: center; gap: 5px; }

/* aging badge — "unresolved 3h" on open alerts */
:is(#ovx-root,.torus-inbox) .inbox-aging { font-size: 10px; font-weight: 600; color: var(--accent-amber); font-variant-numeric: tabular-nums; white-space: nowrap; }
:is(#ovx-root,.torus-inbox) .inbox-aging.is-crit { color: var(--accent-rose); }

/* pinned row accent */
:is(#ovx-root,.torus-inbox) .inbox-row.is-pinned { background: rgba(251,191,36,0.05); }
:is(#ovx-root,.torus-inbox) .inbox-row.is-pinned::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--accent-amber); }

/* inline quick actions — floating bar revealed on row hover (no height shift) */
:is(#ovx-root,.torus-inbox) .inbox-actions { position: absolute; right: 8px; top: 50%; transform: translateY(-50%) translateX(6px); display: inline-flex; gap: 3px; padding: 3px; border-radius: 9px; background: var(--glass-3); border: 1px solid var(--glass-border-2); box-shadow: 0 6px 18px rgba(0,0,0,0.35); opacity: 0; pointer-events: none; transition: opacity var(--t-fast), transform var(--t-fast); }
:is(#ovx-root,.torus-inbox) .inbox-row:hover .inbox-actions, :is(#ovx-root,.torus-inbox) .inbox-row:focus-within .inbox-actions { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
:is(#ovx-root,.torus-inbox) .inbox-qa { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--glass-border); border-radius: 7px; background: var(--glass-1); color: var(--text-muted); cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
:is(#ovx-root,.torus-inbox) .inbox-qa:hover { background: var(--glass-2); }
:is(#ovx-root,.torus-inbox) .inbox-qa-resolve:hover { color: var(--accent-emerald); border-color: var(--accent-emerald); }
:is(#ovx-root,.torus-inbox) .inbox-qa-snooze:hover  { color: var(--accent-cyan);    border-color: var(--accent-cyan); }
:is(#ovx-root,.torus-inbox) .inbox-qa-pin:hover     { color: var(--accent-amber);   border-color: var(--accent-amber); }
:is(#ovx-root,.torus-inbox) .inbox-qa-archive:hover { color: var(--accent-rose);    border-color: var(--accent-rose); }

/* priority lanes — NOW / TODAY / EARLIER collapsible section headers */
:is(#ovx-root,.torus-inbox) .inbox-lane-head { display: flex; align-items: center; gap: 7px; width: 100%; padding: 9px 10px 5px; margin-top: 4px; border: 0; background: transparent; cursor: pointer; color: var(--text-dim); font: inherit; font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; transition: color var(--t-fast); }
:is(#ovx-root,.torus-inbox) .inbox-lane-head:hover { color: var(--text-muted); }
:is(#ovx-root,.torus-inbox) .inbox-lane-caret { display: inline-flex; color: var(--text-dim); transition: transform var(--t-base) var(--ease-out); }
:is(#ovx-root,.torus-inbox) .inbox-lane-head.is-collapsed .inbox-lane-caret { transform: rotate(-90deg); }
:is(#ovx-root,.torus-inbox) .inbox-lane-count { margin-left: auto; padding: 1px 7px; border-radius: 100px; background: var(--glass-2); color: var(--text-muted); font-size: 9px; font-weight: 700; }
:is(#ovx-root,.torus-inbox) .inbox-lane-head.tone-now .inbox-lane-label { color: var(--accent-rose); }
:is(#ovx-root,.torus-inbox) .inbox-lane-head.tone-pin .inbox-lane-label { color: var(--accent-amber); }

/* Needs Your Attention strip */
:is(#ovx-root,.torus-inbox) .inbox-needs { margin: 2px 0 10px; padding: 8px; border-radius: var(--r-md); background: var(--glass-2); border: 1px solid var(--glass-border-2); border-left: 3px solid var(--accent-rose); animation: inbox-needs-in var(--t-slow) var(--ease-out); }
@keyframes inbox-needs-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
:is(#ovx-root,.torus-inbox) .inbox-needs-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 8px; }
:is(#ovx-root,.torus-inbox) .inbox-needs-title { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--accent-rose); }
:is(#ovx-root,.torus-inbox) .inbox-needs-count { margin-left: auto; padding: 1px 7px; border-radius: 100px; background: rgba(251,113,133,0.16); color: var(--accent-rose); font-size: 9.5px; font-weight: 700; }
:is(#ovx-root,.torus-inbox) .inbox-needs-row { position: relative; display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--r-sm); cursor: pointer; transition: background var(--t-fast); }
:is(#ovx-root,.torus-inbox) .inbox-needs-row:hover { background: var(--glass-3); }
:is(#ovx-root,.torus-inbox) .inbox-needs-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; background: var(--accent-amber); }
:is(#ovx-root,.torus-inbox) .inbox-needs-row.tone-crit .inbox-needs-dot { background: var(--accent-rose); box-shadow: 0 0 6px rgba(251,113,133,0.6); }
:is(#ovx-root,.torus-inbox) .inbox-needs-rowtitle { flex: 1 1 auto; min-width: 0; font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(#ovx-root,.torus-inbox) .inbox-needs-age { flex: 0 0 auto; font-size: 9.5px; font-weight: 600; color: var(--accent-rose); font-variant-numeric: tabular-nums; }
:is(#ovx-root,.torus-inbox) .inbox-needs-acts { flex: 0 0 auto; display: inline-flex; gap: 3px; opacity: 0; transition: opacity var(--t-fast); }
:is(#ovx-root,.torus-inbox) .inbox-needs-row:hover .inbox-needs-acts { opacity: 1; }

/* smart inbox-zero */
:is(#ovx-root,.torus-inbox) .inbox-zero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 34px 16px; }
:is(#ovx-root,.torus-inbox) .inbox-zero-check { color: var(--accent-emerald); animation: inbox-zero-pop var(--t-slow) var(--ease-spring, var(--ease-out)); }
@keyframes inbox-zero-pop { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }
:is(#ovx-root,.torus-inbox) .inbox-zero-title { font-size: 15px; font-weight: 700; color: var(--text-primary); font-family: var(--font-display, inherit); }
:is(#ovx-root,.torus-inbox) .inbox-zero-sub { font-size: 11.5px; color: var(--text-dim); max-width: 220px; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  :is(#ovx-root,.torus-inbox) .inbox-needs { animation: none; }
  :is(#ovx-root,.torus-inbox) .inbox-zero-check { animation: none; }
  :is(#ovx-root,.torus-inbox) .inbox-actions { transition: opacity var(--t-fast); }
}

/* ════════════════════════════════════════════════════════════════════════
   LIGHT THEME overrides (appended; dark appearance untouched).
   ════════════════════════════════════════════════════════════════════════ */
/* Filter popover is built from --col-indigo (a DARK surface token NOT inverted
   in light) → stays near-black on white. Map to the opaque glass tier + soft
   navy shadow so it reads as a light popover. */
html[data-theme="light"] :is(#ovx-root,.torus-inbox) .inbox-filtermenu {
  background: var(--glass-4);
  box-shadow: 0 18px 48px rgba(80,90,160,0.18);
}

/* ── MOBILE (2026-07-07 overhaul) — scoped, desktop untouched ── */

@media (pointer: coarse) {
  :is(#ovx-root,.torus-inbox) .inbox-star { opacity: 1; width: 32px; height: 32px; }
}
@media (max-width: 768px) {
  :is(#ovx-root,.torus-inbox) .inbox-search input, :is(#ovx-root,.torus-inbox) .inbox-showing select { font-size: 16px; }
}

/* No entrance-animation replay on a background sync (scroll is preserved in JS) */
:is(#ovx-root,.torus-inbox) .inbox-list.inbox-nofx *,
:is(#ovx-root,.torus-inbox) .inbox-list.inbox-nofx { animation: none !important; }

/* Hide / restore the "Needs Your Attention" strip */
:is(#ovx-root,.torus-inbox) .inbox-needs-head { display: flex; align-items: center; gap: 6px; }
:is(#ovx-root,.torus-inbox) .inbox-needs-hide { margin-left: auto; flex: 0 0 auto; display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: none; background: transparent; color: var(--text-dim); border-radius: 6px; cursor: pointer; opacity: 0.55; transition: opacity var(--t-fast), color var(--t-fast), background var(--t-fast); }
:is(#ovx-root,.torus-inbox) .inbox-needs-hide:hover { opacity: 1; color: var(--accent-rose); background: var(--glass-2); }
:is(#ovx-root,.torus-inbox) .inbox-needs-show { display: flex; align-items: center; gap: 7px; width: 100%; margin: 2px 0 10px; padding: 7px 10px; border: 1px dashed var(--glass-border-2); border-radius: var(--r-md); background: transparent; color: var(--text-muted); font-family: inherit; font-size: 11.5px; cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
:is(#ovx-root,.torus-inbox) .inbox-needs-show:hover { color: var(--text-primary); border-color: var(--accent-rose); background: var(--glass-1); }
:is(#ovx-root,.torus-inbox) .inbox-needs-show .inbox-ic, :is(#ovx-root,.torus-inbox) .inbox-needs-show svg { flex: 0 0 auto; }
:is(#ovx-root,.torus-inbox) .inbox-needs-show .inbox-needs-count { margin-left: auto; }