/* ─────────────────────────────────────────────────────────────────────────────
 * OAM Platform — shared app shell
 *  Provides: tokens, sidebar, top-bar, cards, buttons, forms, badges,
 *            tabs, modal, drawer, toast, table, mobile drawer.
 *  Every page imports this once, then adds page-specific tweaks if needed.
 * ──────────────────────────────────────────────────────────────────────────── */

/* Smooth cross-document navigation (Chrome 126+, Safari 18+). The browser
   crossfades old → new page automatically so clicking a sidebar link feels
   like a soft swap instead of a hard reload. Falls back to normal navigation
   on older browsers (no error). The persistent UI (sidebar/topbar/install
   banner) is marked separately so it stays put while only the content area
   crossfades. */
@view-transition { navigation: auto; }
/* Old page: fade out fast.  New page: no fade-in animation — it appears
   immediately once the snapshot is taken.  The pagereveal handler in shell.js
   strips the loading splash before the snapshot so the new-page capture shows
   real content, not a dark overlay.  Making the new page instant (no opacity
   ramp from 0) means there's never a dark frame between the two pages. */
::view-transition-old(root) { animation: fadeOut .12s ease-out forwards; }
::view-transition-new(root) { animation: none; }
@keyframes fadeOut { from { opacity: 1 } to { opacity: 0 } }
/* Keep the chrome (sidebar, topbar, banner) anchored across navigations so
   only the inner content fades. The browser pairs same-named transition
   targets between pages and animates them, but identical positions = no
   visual movement = "didn't jump". */
#shell-sidebar { view-transition-name: shell-sidebar; }
.top-bar       { view-transition-name: top-bar; }
#topnav        { view-transition-name: topnav; }   /* two-tier nav: anchor it too, or it flashes through black */
#push-prompt   { view-transition-name: push-prompt; }
/* Solid base canvas in BOTH themes so a transient empty content area (page JS
   renders async) never shows the browser's pure-black/white canvas through a
   transparent html/body — that was the "pages go black on switch" flash. The
   root crossfade now lands on the theme background, not black. */
html, body { background: var(--bg); }

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design tokens ─────────────────────────────────────────────────────────── */
:root,
:root[data-theme="dark"] {
  --bg:          #0d0d0f;
  --surface:     #17171b;
  --surface2:    #1e1e24;
  --surface3:    #26262e;
  --surface4:    #2f2f3a;
  --border:      #2a2a34;
  --border2:     #3a3a48;
  --text:        #e8e8f0;
  --text2:       #9898b0;
  --text3:       #5a5a70;

  --accent:      #00AFF0;
  --accent2:     #0095D0;
  --accent-bg:   #0a1f2a;
  --red:         #e85555;
  --red-bg:      #2a1515;
  --orange:      #e88c30;
  --orange-bg:   #2a1e0e;
  --yellow:      #d4b800;
  --yellow-bg:   #22200a;
  --blue:        #4a9eff;
  --blue-bg:     #0e1e2a;
  --grey:        #7a7a90;
  --grey-bg:     #1a1a22;
  --green:       #42c97a;
  --green-bg:    #0e2a1a;

  --radius:      10px;
  --radius-sm:   6px;
  --radius-lg:   14px;

  --sidebar-w:        252px;
  --sidebar-collapsed:64px;
  --topbar-h:         52px;

  --shadow-lg: 0 12px 36px rgba(0,0,0,0.5);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
}

:root[data-theme="light"] {
  --bg:          #f5f6fa;
  --surface:     #ffffff;
  --surface2:    #f0f2f7;
  --surface3:    #e3e7ee;
  --surface4:    #d5dae3;
  --border:      #dde2eb;
  --border2:     #c5ccd9;
  --text:        #14171e;
  --text2:       #4a5160;
  --text3:       #8089a0;
  --accent-bg:   #e5f6ff;
  --red-bg:      #fde8e8;
  --orange-bg:   #fdf0e0;
  --yellow-bg:   #fdf5d0;
  --blue-bg:     #e2efff;
  --grey-bg:     #eef0f5;
  --green-bg:    #e0f5ea;
  --shadow-lg: 0 12px 36px rgba(0,0,0,0.08);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  /* Side + bottom safe-area only — top is handled by .top-bar */
  padding-left:   env(safe-area-inset-left, 0);
  padding-right:  env(safe-area-inset-right, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; }
a { color: inherit; text-decoration: none; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--surface4); }

/* ── Shell layout ──────────────────────────────────────────────────────────── */
#shell { display: flex; height: 100vh; width: 100%; }
#shell-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: width 0.2s ease;
  overflow: hidden;
}
#shell-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
/* ── Nav mode ──────────────────────────────────────────────────────────────
   The two-tier top nav (#topnav) is the navigation on ALL screen sizes now —
   on desktop AND mobile. The sidebar (and its old mobile ☰ drawer) is retired;
   the tab system replaces it everywhere. */
#shell-sidebar { display: none !important; }
#shell-main,
#shell.sb-collapsed #shell-main { margin-left: 0 !important; }
.tb-mobile-toggle { display: none !important; }
#shell-content {
  flex: 1;
  overflow: auto;
  padding: 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
}

/* ── Sidebar ───────────────────────────────────────────────────────────────── */
.sb-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--topbar-h);
  flex-shrink: 0;
}
.sb-logo {
  width: 32px; height: 32px;
  border-radius: 9px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 0 14px rgba(0,175,240,0.6);
}
.sb-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sb-brand-wrap { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sb-brand { font-weight: 700; font-size: 14px; letter-spacing: 0.3px; }
.sb-uktime { font-size: 11px; color: var(--text2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sb-collapse-btn {
  margin-left: auto;
  width: 26px; height: 26px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text2);
  font-size: 14px;
}
.sb-collapse-btn:hover { background: var(--surface2); color: var(--text); }

/* Sidebar page search — sits just under the header, filters NAV inline. */
.sb-searchbtn {
  display: flex; align-items: center; gap: 9px;
  margin: 9px 10px 4px; width: calc(100% - 20px);
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 9px; padding: 7px 10px;
  font-size: 12px; color: var(--text3); font-weight: 600;
  cursor: pointer; font-family: inherit; flex-shrink: 0;
}
.sb-searchbtn:hover { background: var(--surface3, var(--surface2)); color: var(--text2); border-color: var(--accent); }
.sb-searchbtn .sb-smg { font-size: 13px; }
.sb-searchbtn .sb-slabel { flex: 1; text-align: left; }
.sb-searchbtn kbd { margin-left: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 5px; font-size: 9.5px; padding: 1px 5px; color: var(--text3); font-weight: 700; }
#shell.sb-collapsed .sb-searchbtn { display: none; }

.sb-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sb-group { margin-bottom: 2px; }
.sb-group-head {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  user-select: none;
  position: relative;
}
.sb-group-head:hover { background: var(--surface2); }
.sb-group-head.active { background: var(--surface2); color: var(--text); }
/* When the parent group is active (e.g. you're on /inspo.html, which lives under
   Models), keep the head highlighted and tint the icon in OF blue so the user
   sees which section they're in even when on a sub-page. */
.sb-group.active > .sb-group-head { background: var(--surface2); color: var(--text); }
.sb-group.active > .sb-group-head .sb-group-icon { color: var(--accent); }
.sb-group.active > .sb-group-head .sb-group-label { font-weight: 600; }
.sb-group-icon { font-size: 15px; width: 18px; text-align: center; }
.sb-group-label { flex: 1; font-weight: 500; }
/* Expand/collapse arrows removed from the sidebar (groups still toggle on click). */
.sb-group-arrow { display: none !important; }
.sb-badge {
  font-size: 10px; font-weight: 700;
  background: var(--accent); color: #fff;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
}
.sb-badge.muted { background: var(--surface3); color: var(--text2); }
.sb-lock { font-size: 11px; color: var(--text3); }

.sb-subnav {
  margin: 2px 0 6px 8px;
  padding-left: 16px;
  border-left: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .15s ease, opacity .12s ease;
}
.sb-group.open .sb-subnav { max-height: 640px; opacity: 1; }
.sb-subnav a {
  padding: 6px 10px;
  font-size: 12.5px;
  color: var(--text2);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sb-subnav a:hover { background: var(--surface2); color: var(--text); }
.sb-subnav a.active {
  background: var(--accent-bg);
  color: var(--accent);
}
.sb-subnav a .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text3); flex-shrink: 0; }
.sb-subnav a.active .dot { background: var(--accent); }
.sb-subnav a .lbl { flex: 1; }
/* Small section heading inside a nav group (e.g. OnlyFans / Socials). */
.sb-subhead { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text3); padding: 7px 8px 2px; margin-top: 2px; }
.sb-subhead:first-child { margin-top: 0; }

/* Sub-sub tabs — render the active sub-area's tabs as a nested list directly
   under its sub-link. Mounted dynamically by _refreshSidebarActive. */
.sb-subtabs {
  display: flex; flex-direction: column;
  padding-left: 12px; margin: 2px 0 6px;
  border-left: 2px solid var(--border);
  margin-left: 14px;
}
.sb-subtabs a {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; font-size: 12px;
  color: var(--text3); text-decoration: none;
  border-radius: 5px;
}
.sb-subtabs a:hover  { background: var(--surface2); color: var(--text); }
.sb-subtabs a.active { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.sb-subtabs a .dot   { width: 4px; height: 4px; border-radius: 50%; background: var(--text3); flex-shrink: 0; }
.sb-subtabs a.active .dot { background: var(--accent); }

.sb-section-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px 12px 4px;
}

.sb-footer {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sb-user {
  display: flex; align-items: center; gap: 10px;
  flex: 1;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}
.sb-user:hover { background: var(--surface2); }
.sb-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--surface3);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12px; color: var(--text);
  flex-shrink: 0;
}
.sb-user-meta { display: flex; flex-direction: column; min-width: 0; }
.sb-user-name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-role { font-size: 11px; color: var(--text3); white-space: nowrap; }
.sb-clock { font-size: 10px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; margin-bottom: 1px; }
.sb-clock.on  { color: var(--green, #42c97a); }
.sb-clock.off { color: var(--text3); }
.sb-logout {
  width: 28px; height: 28px;
  border-radius: 6px;
  color: var(--text3);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.sb-logout:hover { background: var(--red-bg); color: var(--red); }

/* Collapsed sidebar — a 64px rail that OVERLAYS content (no reflow) and expands
   to full width on hover (.sb-hover). Content reserves the rail width via
   #shell-main margin so the page never shifts when the rail expands. */
#shell.sb-collapsed #shell-sidebar {
  width: var(--sidebar-collapsed);
  position: absolute; left: 0; top: 0; bottom: 0; height: 100%;
  z-index: 60;
}
#shell.sb-collapsed #shell-main { margin-left: var(--sidebar-collapsed); }
/* PURELY mouse-position driven via CSS :hover — the rail expands while the
   cursor is over it and collapses the instant it leaves, independent of clicks
   or navigation. */
#shell.sb-collapsed #shell-sidebar:hover {
  width: var(--sidebar-w);
  box-shadow: 6px 0 28px rgba(0,0,0,0.42);
}
/* The rail (collapsed, NOT hovered) hides labels + centres icons. On hover these
   selectors stop matching, so everything renders normally → the panel "opens". */
#shell.sb-collapsed #shell-sidebar:not(:hover) .sb-brand,
#shell.sb-collapsed #shell-sidebar:not(:hover) .sb-uktime,
#shell.sb-collapsed #shell-sidebar:not(:hover) .sb-group-label,
#shell.sb-collapsed #shell-sidebar:not(:hover) .sb-group-arrow,
#shell.sb-collapsed #shell-sidebar:not(:hover) .sb-section-label,
#shell.sb-collapsed #shell-sidebar:not(:hover) .sb-divider,
#shell.sb-collapsed #shell-sidebar:not(:hover) .sb-subnav,
#shell.sb-collapsed #shell-sidebar:not(:hover) .sb-searchbtn,
#shell.sb-collapsed #shell-sidebar:not(:hover) .sb-user-meta,
#shell.sb-collapsed #shell-sidebar:not(:hover) .sb-badge { display: none; }
/* Sidebar nav notification/update badges removed — they cluttered the rail
   (esp. when collapsed). Notifications live in the top-bar 🔔 bell instead. */
.sb-badge, .sb-upd { display: none !important; }
/* Board multi-select highlight (kanban / list cards) */
.kb-selected { outline: 2px solid var(--accent) !important; outline-offset: 1px; box-shadow: 0 0 0 4px rgba(0,175,240,0.18) !important; }
#shell.sb-collapsed #shell-sidebar:not(:hover) .sb-group-head { justify-content: center; }
#shell.sb-collapsed #shell-sidebar:not(:hover) .sb-footer { justify-content: center; }
/* On mobile the sidebar is an off-canvas drawer, not a rail — never overlay it. */
@media (max-width: 760px) {
  #shell.sb-collapsed #shell-sidebar { position: fixed; }
  #shell.sb-collapsed #shell-main { margin-left: 0; }
}

/* ── Top bar ───────────────────────────────────────────────────────────────── */
.top-bar {
  /* Desktop: normal height */
  height: var(--topbar-h);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  padding: 0 12px 0 20px;
  gap: 8px;
  flex-shrink: 0;
}
.sb-header { padding-top: 0; }
/* Mobile only: add safe-area padding for iPhone notch / Dynamic Island.
 * Just a thin gap (12px) above the topbar content — the previous 60px bump
 * left ~1 inch of dead space above the title. The safe-area inset itself
 * already covers the status bar height. */
@media (max-width: 760px) {
  .top-bar {
    height: calc(var(--topbar-h) + env(safe-area-inset-top, 0) + 12px);
    padding: calc(env(safe-area-inset-top, 0) + 12px) 20px 14px;
  }
  /* Lower the divider on mobile so it doesn't slice through the logo / UK
     clock — was a fixed 52px content area + 12px bottom pad with a 2-line
     brand wrap, so the border ended up grazing the time row. */
  .sb-header { padding: calc(12px + env(safe-area-inset-top, 0)) 16px 14px; height: auto; min-height: var(--topbar-h); }
}
.tb-theme-btn {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text2); font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.15s;
  flex-shrink: 0;
}
.tb-theme-btn:hover { background: var(--surface3); color: var(--text); }
/* Active state — e.g. the 📊 KPI button while you're on the KPI side. Keeps the
   same icon (never swaps to a home glyph); just lights it up so it reads as
   "you're here · click to exit". */
.tb-theme-btn.tb-active {
  background: var(--accent); color: #fff; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.tb-theme-btn.tb-active:hover { background: var(--accent); color: #fff; }
/* AI robot "alive" sway — gentle = it could help, aggressive = dying to comment. */
@keyframes oa-sway-gentle { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-8deg)} 75%{transform:rotate(8deg)} }
@keyframes oa-sway-aggressive { 0%,100%{transform:rotate(0)} 15%{transform:rotate(-17deg)} 45%{transform:rotate(15deg)} 70%{transform:rotate(-10deg)} }
/* AI button no longer shakes/sways — it was distracting. A subtle glow stays as the cue. */
#tb-ai.sway-gentle, #tb-ai.sway-aggressive { box-shadow:0 0 0 2px var(--accent), 0 0 14px var(--accent); }
#tb-ai .oa-ai-bubble { position:absolute; top:-6px; right:-6px; min-width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); }
.tb-mobile-toggle {
  display: none;
  width: 32px; height: 32px;
  border-radius: 6px;
  background: var(--surface2);
  color: var(--text);
  font-size: 16px;
  align-items: center; justify-content: center;
}
.tb-title-area {
  display: flex; flex-direction: column;
  min-width: 0;
}
.tb-page-title { font-size: 15px; font-weight: 600; line-height: 1.2; }
.tb-page-sub { font-size: 12px; color: var(--text3); line-height: 1.2; }
.tb-spacer { flex: 1; }
/* Header search box — opens the ⌘K command palette. Mirrors the OA Chat
   search field so both headers read the same. */
.tb-searchbtn {
  flex: 0 1 460px; min-width: 0; height: 36px;
  display: flex; align-items: center; gap: 8px;
  margin-left: 6px; padding: 0 12px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 11px; color: var(--text3);
  font-size: 13px; font-family: inherit; cursor: text;
  transition: border-color .15s, color .15s; overflow: hidden;
}
.tb-searchbtn:hover { border-color: var(--accent); color: var(--text2); }
.tb-searchbtn .tb-searchbtn-mg { font-size: 13px; opacity: .65; flex-shrink: 0; }
.tb-searchbtn .tb-searchbtn-lbl { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-searchbtn kbd { flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 5px; font-size: 9.5px; padding: 1px 5px; color: var(--text3); font-weight: 700; }
.tb-search {
  position: relative; max-width: 280px; width: 100%;
}
.tb-search input {
  width: 100%; padding: 7px 10px 7px 32px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text);
  font-size: 13px;
}
.tb-search input:focus { outline: none; border-color: var(--accent); }
.tb-search::before {
  content: '🔎';
  position: absolute; left: 9px; top: 6px;
  font-size: 12px;
  opacity: 0.6;
}
.tb-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tb-action-btn {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  display: flex; align-items: center; gap: 6px;
}
.tb-action-btn:hover { border-color: var(--accent); color: var(--accent); }
.tb-action-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.tb-action-btn.primary:hover { background: var(--accent2); }

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.card-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.card-title { font-size: 14px; font-weight: 600; }
.card-sub { font-size: 12px; color: var(--text3); margin-top: 2px; }
.card-spacer { flex: 1; }

/* ── KPI tiles ─────────────────────────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.kpi-label { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; }
.kpi-value { font-size: 24px; font-weight: 700; margin-top: 4px; line-height: 1.2; }
.kpi-trend { font-size: 11px; color: var(--text2); margin-top: 4px; }
.kpi-trend.up   { color: var(--green); }
.kpi-trend.down { color: var(--red); }

/* ── AI summary card ───────────────────────────────────────────────────────── */
.ai-summary-card {
  background: linear-gradient(135deg, var(--accent-bg) 0%, var(--surface) 100%);
  border: 1px solid #1a4a6a;
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 16px;
}
.ai-summary-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ai-summary-title { font-size: 12px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.8px; }
.ai-summary-spacer { flex: 1; }
.ai-summary-meta { font-size: 11px; color: var(--text3); }
.ai-summary-refresh {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  border: 1px solid #1a4a6a;
  color: var(--text2);
}
.ai-summary-refresh:hover { border-color: var(--accent); color: var(--accent); }
.ai-summary-text { font-size: 14px; line-height: 1.7; color: var(--text); }
.ai-summary-text.loading { color: var(--text3); font-style: italic; }

/* ── Markdown rendering for AI output ──────────────────────────────────────── */
.ai-md { font-size: 14px; line-height: 1.7; color: var(--text); }
.ai-md .ai-p { margin: 0 0 10px; }
.ai-md .ai-p:last-child { margin-bottom: 0; }
.ai-md .ai-h2 { font-size: 16px; font-weight: 700; margin: 14px 0 8px; color: var(--text); }
.ai-md .ai-h3 { font-size: 14px; font-weight: 700; margin: 12px 0 6px; color: var(--text); text-transform: none; letter-spacing: 0; }
.ai-md .ai-h4 { font-size: 13px; font-weight: 700; margin: 10px 0 5px; color: var(--text); }
.ai-md .ai-h5 { font-size: 12px; font-weight: 700; margin: 8px 0 4px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.6px; }
.ai-md .ai-hr { border: 0; border-top: 1px solid var(--border); margin: 12px 0; }
.ai-md .ai-ul, .ai-md .ai-ol {
  margin: 6px 0 12px;
  padding-left: 22px;
}
.ai-md .ai-ul li, .ai-md .ai-ol li {
  margin-bottom: 6px;
  padding-left: 4px;
}
.ai-md .ai-ul li::marker { color: var(--accent); }
.ai-md .ai-ol li::marker { color: var(--accent); font-weight: 600; }
.ai-md .ai-ul li:last-child, .ai-md .ai-ol li:last-child { margin-bottom: 0; }
.ai-md strong { color: var(--text); font-weight: 700; }
.ai-md em { color: var(--text); font-style: italic; }
.ai-md .ai-code {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 12px;
  background: var(--surface2);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--accent);
  border: 1px solid var(--border);
}
.ai-md .ai-link { color: var(--accent); text-decoration: underline; }
.ai-md .ai-link:hover { color: var(--accent2); }
.ai-md .ai-loading { color: var(--text3); font-style: italic; }
/* Callout / blockquote — '> ' lines. A tinted box with an accent left bar. */
.ai-md .ai-callout {
  margin: 10px 0;
  padding: 10px 14px;
  background: var(--accent-bg, rgba(0,175,240,0.06));
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  color: var(--text2);
  font-size: 13px;
  line-height: 1.6;
}
.ai-md .ai-callout:first-child { margin-top: 0; }
.ai-md .ai-callout:last-child { margin-bottom: 0; }
.ai-md > *:first-child { margin-top: 0; }
.ai-md > *:last-child { margin-bottom: 0; }

/* Summary card layout */
.ai-summary-card { padding: 16px 20px; }
.ai-summary-text.ai-md { margin-top: 2px; }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.btn:hover { border-color: var(--border2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn.primary:hover { background: var(--accent2); border-color: var(--accent2); }
.btn.danger { color: var(--red); }
.btn.danger:hover { border-color: var(--red); background: var(--red-bg); }
.btn.success { color: var(--green); }
.btn.success:hover { border-color: var(--green); background: var(--green-bg); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text2); }
.btn.ghost:hover { background: var(--surface2); color: var(--text); }
.btn.sm { padding: 4px 10px; font-size: 12px; }
.btn.icon { padding: 6px 8px; }

/* ── Forms ─────────────────────────────────────────────────────────────────── */
.form-row {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px;
}
.form-row.inline { flex-direction: row; align-items: center; }
.form-row label { font-size: 12px; color: var(--text2); font-weight: 500; }
.input, .select, .textarea {
  padding: 8px 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  width: 100%;
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); }
.textarea { min-height: 80px; resize: vertical; }
.input[disabled], .select[disabled], .textarea[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ── Badges ────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}
.badge.muted { background: var(--surface2); color: var(--text2); border: 1px solid var(--border); }
.badge.accent { background: var(--accent-bg); color: var(--accent); border: 1px solid #1a4a6a; }
.badge.red    { background: var(--red-bg); color: var(--red); }
.badge.orange { background: var(--orange-bg); color: var(--orange); }
.badge.yellow { background: var(--yellow-bg); color: var(--yellow); }
.badge.blue   { background: var(--blue-bg); color: var(--blue); }
.badge.green  { background: var(--green-bg); color: var(--green); }
.badge.grey   { background: var(--grey-bg); color: var(--grey); }

/* ── Tabs — shared glider segmented bar (site-wide) ───────────────────────────
   Rendered by OAM.tabs() and by any page adopting the .tabs/.tab markup. A
   frosted pill bar with a sliding ".glider" that animates beneath the active
   tab. Fully theme-aware via the design tokens above (works in light + dark).
   Supports optional per-tab icons (.ti) and count badges (.tab-badge). */
.tabs {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px;
  margin-bottom: 18px;
  width: fit-content;
  max-width: 100%;
  border-radius: 15px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: var(--surface2);                                  /* solid fallback */
  background: color-mix(in srgb, var(--surface) 68%, transparent);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm), inset 0 1px 0 color-mix(in srgb, var(--surface) 85%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
}
.tabs::-webkit-scrollbar { display: none; }

/* The sliding pill — positioned by OAM.tabs() (left/width track the active tab). */
.tabs > .glider {
  position: absolute;
  top: 5px;
  height: calc(100% - 10px);
  border-radius: 11px;
  background: var(--surface);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--border);
  transition: left .32s cubic-bezier(.4,1.2,.4,1),
              width .32s cubic-bezier(.4,1.2,.4,1),
              opacity .2s ease;
  z-index: 0;
  pointer-events: none;
}

.tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  flex: 0 0 auto;
  padding: 9px 15px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text2);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: color .2s ease;
}
.tab .ti { font-size: 14px; line-height: 1; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); font-weight: 750; }
.tab[href]:hover { color: var(--accent); }

/* Per-tab count / attention badges. Pass tab.badge = "7" or ["7","bad"]. */
.tab .tab-badge {
  font-size: 10px;
  font-weight: 800;
  line-height: 1.55;
  min-width: 17px;
  text-align: center;
  border-radius: 20px;
  padding: 0 6px;
  background: var(--accent);
  color: #fff;
}
.tab .tab-badge.soft  { background: var(--surface3); color: var(--text2); }
.tab .tab-badge.warn  { background: var(--orange); color: #fff; }
.tab .tab-badge.bad   { background: var(--red);    color: #fff; }
.tab .tab-badge.green { background: var(--green);  color: #fff; }
.tab.active .tab-badge.soft { background: var(--accent-bg); color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .tabs > .glider { transition: opacity .2s ease; }
}

/* ── Two-tier top nav (sections + current section's sub-pages) ─────────────────
   Sits in the fixed header below the top-bar. Row 1 = all site sections (solid
   pills, active = accent). Row 2 = the current section's sub-pages as a glider
   tab bar. ←/→ walks between sub-pages (wired in shell.js). */
#topnav {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px 20px 8px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
#topnav .topnav-sections {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#topnav .topnav-sections::-webkit-scrollbar { display: none; }
.secbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 6px 13px;
  border-radius: 11px;
  font-size: 12.5px;
  font-weight: 650;
  white-space: nowrap;
  color: var(--text2);
  background: var(--surface2);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.secbtn:hover { color: var(--text); border-color: var(--border2); }
.secbtn.on {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent);
}
.secbtn .ti { font-size: 14px; line-height: 1; }
/* Row 2 — reuse the shared .tabs glider bar, flush to the section row. */
#topnav .topnav-subbar { margin-bottom: 0; }
#topnav .topnav-subbar .tab { font-size: 12.5px; }
.topnav-more{position:relative;flex:0 0 auto}.topnav-more summary{list-style:none;cursor:pointer}.topnav-more summary::-webkit-details-marker{display:none}.topnav-more-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:9000;min-width:220px;padding:6px;border:1px solid var(--border2);border-radius:11px;background:var(--surface);box-shadow:var(--shadow-lg);display:grid;gap:2px}.topnav-more-menu a{padding:7px 9px;border-radius:7px;color:var(--text2);font-size:12px;text-decoration:none;white-space:nowrap}.topnav-more-menu a:hover,.topnav-more-menu a.active{background:var(--accent-bg);color:var(--accent)}
@media (max-width: 760px) {
  #topnav { padding: 8px 14px 7px; }
}

/* ── Tables ────────────────────────────────────────────────────────────────── */
.tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.tbl thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
}
.tbl tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.tbl tbody tr:hover { background: var(--surface2); }
.tbl tbody tr.clickable { cursor: pointer; }
/* Wrap a wide table in .tbl-wrap so it stays responsive and scrolls
   horizontally on narrow viewports instead of squishing/clipping columns. */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl-wrap > .tbl { min-width: 680px; }

/* ── Empty state ───────────────────────────────────────────────────────────── */
.empty-state {
  padding: 40px 20px;
  text-align: center;
  color: var(--text3);
  font-size: 13px;
}
.empty-state-icon { font-size: 32px; opacity: 0.4; margin-bottom: 10px; }
.empty-state-title { font-size: 15px; color: var(--text2); margin-bottom: 4px; }
.empty-state-sub { font-size: 12px; }
/* Standard loading state — one consistent animated spinner everywhere. */
.oam-load { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 30px 20px; color: var(--text3); font-size: 13px; }
.oam-spin { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: oam-spin 0.7s linear infinite; flex-shrink: 0; }
@keyframes oam-spin { to { transform: rotate(360deg); } }
/* Any "Loading…" empty-state gets the spinner automatically (loading-flagged). */
.empty-state.is-loading::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: oam-spin 0.7s linear infinite; }

/* ── Modal ─────────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  /* Above the OA Chat overlay (850) so chat modals are clickable. Fallback
     only — OAM.modal/OAM.drawer assign an inline z-index in open order
     (1610, 1620, …) so a modal opened from a drawer lands on top of it.
     See the overlay-stacking block in shell.js. */
  z-index: 1500;
  display: none;
  align-items: center; justify-content: center;
  padding: 16px;
}
.modal-overlay.open { display: flex; }
/* Glassmorphic variant (opts.className:'oam-glass') — matches the ⌘K palette:
   frosted blurred scrim, rounded translucent panel, top-aligned pop-in. */
.modal-overlay.oam-glass {
  background: rgba(18,21,30,.38);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  align-items: flex-start;
  padding: 7vh 16px 16px;
}
.modal-overlay.oam-glass .modal {
  border-radius: 18px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 28px 80px rgba(0,0,0,.26), 0 3px 10px rgba(0,0,0,.10);
  transform-origin: top center;
  animation: oam-pal-pop .16s cubic-bezier(.4,0,.2,1);
}
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 22px 24px;
  box-shadow: var(--shadow-lg);
}
.modal h3 { font-size: 16px; font-weight: 600; margin-bottom: 14px; }
.modal-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }

/* ── Shift-report form ───────────────────────────────────────────────────── */
.sr-form { display: flex; flex-direction: column; gap: 12px; }
.sr-form label, .sr-block { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text2); }
.sr-form input, .sr-form textarea { padding: 8px 10px; background: var(--surface2, var(--bg)); border: 1px solid var(--border); border-radius: var(--radius-sm, 6px); color: var(--text); font-size: 13px; font-weight: 400; outline: none; }
.sr-form input:focus, .sr-form textarea:focus { border-color: var(--accent); }
.sr-form textarea { resize: vertical; }
.sr-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sr-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text3); margin-top: 2px; }
.sr-model-row { display: grid; grid-template-columns: 1fr 110px auto auto; gap: 8px; align-items: center; margin-bottom: 6px; }
.sr-m-gross { display: flex; align-items: center; gap: 4px; }
.sr-m-gross span { color: var(--text3); font-size: 13px; }
.sr-m-gross input { width: 100%; }
.sr-m-net { font-size: 11px; color: var(--text3); white-space: nowrap; }
.sr-m-rm { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: 4px; }
.sr-m-rm:hover { color: var(--danger, #e85555); background: rgba(232,85,85,0.12); }
.sr-totals { display: flex; gap: 18px; padding: 8px 0; border-top: 1px solid var(--border); margin-top: 4px; }
.sr-totals div { display: flex; flex-direction: column; }
.sr-totals span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text3); }
.sr-totals b { font-size: 15px; color: var(--text); }
.sr-sop-card { background: var(--surface2, rgba(0,175,240,0.06)); border: 1px solid var(--accent); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; font-size: 13px; }
.sr-sop-body { margin-top: 8px; font-size: 13px; line-height: 1.5; max-height: 220px; overflow-y: auto; }
.sr-sop-body h1, .sr-sop-body h2, .sr-sop-body h3 { font-size: 14px; margin: 6px 0 3px; }
.sr-sop-body ul { margin: 4px 0 4px 18px; }
.sr-hint { font-size: 12px; color: var(--text3); margin: -4px 0 8px; }
.sr-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sr-metrics label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; color: var(--text2); }
.sr-metrics input { padding: 7px 9px; background: var(--surface2, var(--bg)); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 13px; }

/* ── Drawer (side panel) ──────────────────────────────────────────────────── */
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  /* Above the OA Chat overlay (850) — backdrop-filter on chat children can
     create stacking quirks at lower values. Fallback only: OAM.drawer sets an
     inline z-index from the shared overlay stack, so a modal opened from this
     drawer sits above it instead of behind it. */
  z-index: 1600;
  display: none;
  align-items: flex-start;
  justify-content: flex-end;
}
.drawer-overlay.open { display: flex; }
.drawer {
  width: 480px; max-width: 100vw;
  height: 100vh;
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  animation: slideIn 0.2s ease;
}
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.drawer-header {
  padding: 14px 18px;
  padding-top: max(14px, env(safe-area-inset-top, 14px));
  padding-right: max(18px, env(safe-area-inset-right, 18px));
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.drawer-title { font-size: 14px; font-weight: 600; flex: 1; }
.drawer-close {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  color: var(--text2);
}
.drawer-close:hover { color: var(--text); background: var(--surface3); }
.drawer-body {
  flex: 1; overflow-y: auto;
  padding: 18px;
  padding-right: max(18px, env(safe-area-inset-right, 18px));
  padding-bottom: max(18px, calc(env(safe-area-inset-bottom, 0px) + 18px));
}

/* ── AI Upgrade panel ──────────────────────────────────────────────────────── */
.ai-panel {
  background: linear-gradient(135deg, var(--accent-bg) 0%, var(--surface2) 100%);
  border: 1px solid #1a4a6a;
  border-radius: var(--radius);
  overflow: hidden;
}
.ai-panel-header {
  padding: 12px 16px;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid #1a4a6a;
}
.ai-panel-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--accent);
}
.ai-panel-spacer { flex: 1; }
.ai-panel-model-pill {
  font-size: 10px; color: var(--text3);
  background: var(--surface);
  padding: 2px 6px;
  border-radius: 4px;
}
.ai-msgs {
  padding: 14px 16px;
  max-height: 360px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.ai-msg {
  font-size: 13px;
  line-height: 1.65;
}
.ai-msg-label {
  font-size: 10px; font-weight: 700; color: var(--text3);
  text-transform: uppercase; letter-spacing: 0.6px;
  margin-bottom: 3px;
}
.ai-msg.user { color: var(--text); }
.ai-msg.assistant { color: var(--text2); }
.ai-input-row {
  display: flex; gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid #1a4a6a;
}
.ai-input-row .input { background: var(--bg); }
.ai-quick-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid #1a4a6a;
  background: var(--surface);
}
.ai-quick {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text2);
}
.ai-quick:hover { border-color: var(--accent); color: var(--accent); }

/* ── Global down-phone alert (persistent reminder) ─────────────────────────── */
.global-phone-alert {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #2a1515 0%, #1f0f0f 100%);
  border: 1px solid var(--red);
  border-radius: 999px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text);
  z-index: 800;
  box-shadow: 0 4px 24px rgba(232, 85, 85, 0.3);
  animation: pulseGlobalPhone 2s ease-in-out infinite;
  max-width: calc(100vw - 40px);
}
@keyframes pulseGlobalPhone {
  0%, 100% { box-shadow: 0 4px 24px rgba(232, 85, 85, 0.3); }
  50%      { box-shadow: 0 4px 24px rgba(232, 85, 85, 0.6), 0 0 0 6px rgba(232, 85, 85, 0.1); }
}
.global-phone-alert strong { color: var(--red); }
.global-phone-alert .btn { white-space: nowrap; }
@media (max-width: 760px) {
  .global-phone-alert { left: 10px; right: 10px; transform: none; font-size: 12px; padding: 8px 12px; border-radius: var(--radius); }
}

/* ── Impersonation banner ──────────────────────────────────────────────────── */
.imp-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2100;
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  /* Clear the phone notch/status bar so the "Exit to my account" button sits
     BELOW it and is tappable. min-height reserves the notch inset PLUS a 44px
     (iOS tap-target) row; padding-top uses max() so there's breathing room even
     on devices that report no inset. */
  min-height: calc(44px + env(safe-area-inset-top, 0px));
  padding: max(env(safe-area-inset-top, 0px), 8px) calc(16px + env(safe-area-inset-right, 0px)) 8px calc(16px + env(safe-area-inset-left, 0px));
  background: linear-gradient(90deg, #b45309, #d97706);
  color: #fff; font-size: 13px; font-weight: 600;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.imp-banner .btn { background: rgba(255,255,255,0.9); color: #7c3a00; border: none; }
.imp-banner .btn:hover { background: #fff; }
body.has-imp-banner #shell { margin-top: calc(44px + env(safe-area-inset-top, 0px)); }
/* When viewing-as, push the AI helper panel + notification preview below the banner
   so the banner (z-index 2100) doesn't cover their headers while testing. */
body.has-imp-banner #oa-aihelp { top: calc(44px + env(safe-area-inset-top, 0px)); height: calc(100dvh - 44px - env(safe-area-inset-top, 0px)); max-height: none; }

/* ── Apple emoji images (global) ────────────────────────────────────────────── */
img.ae { width: 1.15em; height: 1.15em; vertical-align: -0.2em; margin: 0 0.02em; display: inline-block; }

/* ── Push-enable prompt ─────────────────────────────────────────────────────── */
#push-prompt {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2000;
  display: flex; flex-direction: column;
  padding: calc(10px + env(safe-area-inset-top, 0)) calc(16px + env(safe-area-inset-right, 0)) 12px calc(16px + env(safe-area-inset-left, 0));
  background: linear-gradient(135deg, #0958d9, #0072c6, #00AFF0); color: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
}
#push-prompt .btn { border: 1px solid rgba(255,255,255,0.4); border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer; background: rgba(255,255,255,0.15); color: #fff; }
#push-prompt .btn.primary { background: #fff; color: #0958d9; border-color: #fff; }
/* Reserve exactly the banner's real height (set by JS as --pp-h) and shrink the
 * shell to fit so nothing overflows the bottom. Falls back to 52px pre-measure. */
body.has-push-prompt #shell {
  margin-top: var(--pp-h, 52px);
  height: calc(100vh - var(--pp-h, 52px));
  height: calc(100dvh - var(--pp-h, 52px));
}
/* When impersonating, HIDE the "enable notifications" prompt entirely — it was
 * covering the "Exit to my account" button, and the impersonator (viewing as
 * someone else) has no business enabling push on this device anyway. The exit
 * bar then owns the top of the screen on its own. */
body.has-imp-banner #push-prompt { display: none !important; }
/* push-prompt is hidden during impersonation, so don't reserve its height —
 * just clear the exit bar (overrides the generic has-push-prompt shell rule). */
body.has-imp-banner.has-push-prompt #shell {
  margin-top: calc(44px + env(safe-area-inset-top, 0px));
  height: calc(100vh - 44px - env(safe-area-inset-top, 0px));
  height: calc(100dvh - 44px - env(safe-area-inset-top, 0px));
}

/* ── Hourly reminder banner ─────────────────────────────────────────────────── */
#oa-reminder {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 1300; display: flex; align-items: center; gap: 12px;
  max-width: 620px; padding: 12px 16px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--accent);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4); font-size: 13px; color: var(--text);
}
.oa-rem-msg { flex: 1; line-height: 1.4; }
#oa-reminder button { border: none; border-radius: 8px; padding: 7px 12px; font-weight: 700; font-size: 12px; cursor: pointer; white-space: nowrap; }
.oa-rem-ai { background: var(--surface2, #0003); color: var(--text); }
.oa-rem-tick { background: var(--green, #42c97a); color: #fff; }
@media (max-width: 620px) { #oa-reminder { left: 10px; right: 10px; transform: none; max-width: none; flex-wrap: wrap; } }

/* ── AI helper modal ────────────────────────────────────────────────────────── */
.modal-input { width: 100%; padding: 9px 11px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 14px; font-family: inherit; resize: vertical; }
.aih-ans { margin-top: 12px; white-space: pre-wrap; font-size: 14px; line-height: 1.5; max-height: 320px; overflow-y: auto; }

/* ── AI helper panel ───────────────────────────────────────────────────────── */
#oa-aihelp { position: fixed; top: 0; right: 0; width: 420px; max-width: 100vw; height: 100vh; height: 100dvh; z-index: 1700; background: var(--surface); border-left: 1px solid var(--border); box-shadow: -8px 0 40px rgba(0,0,0,0.32); display: flex; flex-direction: column; overflow: hidden; }
#oa-aihelp.drag { outline: 2px dashed var(--accent); outline-offset: -6px; }

/* header */
.aih-p-head { padding: calc(env(safe-area-inset-top,0) + 14px) 14px 12px; background: var(--surface); border-bottom: 1px solid var(--border); }
.aih-head-top { display: flex; align-items: center; gap: 9px; }
.aih-bot-badge { width: 34px; height: 34px; border-radius: 11px; flex: none; background: linear-gradient(135deg,#00AFF0,#0e8ed8); display: grid; place-items: center; color: #fff; font-size: 17px; box-shadow: 0 4px 12px -2px rgba(0,175,240,.3); }
.aih-bot-id { flex: 1; min-width: 0; }
.aih-bot-name { font-size: 14px; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: 7px; }
.aih-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(66,201,122,.2); flex: none; }
.aih-bot-sub { font-size: 11.5px; color: var(--text3); margin-top: 1px; }
.aih-icon-btn { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text2); display: grid; place-items: center; cursor: pointer; transition: .16s; font-size: 14px; flex: none; line-height: 1; }
.aih-icon-btn:hover { background: var(--surface2); color: var(--text); border-color: var(--border2); }
.aih-head-controls { display: flex; gap: 8px; margin-top: 12px; }
.aih-seg { flex: 1; display: flex; align-items: center; gap: 6px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px; font-size: 12.5px; font-weight: 600; color: var(--text2); min-width: 0; overflow: hidden; }
.aih-seg select { border: 0; background: transparent; outline: none; font-size: 12.5px; font-weight: 700; color: var(--text); font-family: inherit; flex: 1; min-width: 0; cursor: pointer; }
.aih-seg .aih-chev { margin-left: auto; color: var(--text3); font-size: 10px; pointer-events: none; flex: none; }

/* model strip */
.aih-model-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 14px; border-bottom: 1px solid var(--border); background: var(--surface2); }
.aih-model-wrap { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-bg); border-radius: 999px; padding: 0 10px 0 11px; }
.aih-model-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.aih-model-select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font-family: inherit; font-size: 11.5px; font-weight: 700; color: var(--accent); padding: 5px 18px 5px 0; cursor: pointer; outline: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5L5 6.5L8 3.5' stroke='%2300AFF0' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; }
/* toggle switch */
.aih-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; color: var(--text2); cursor: pointer; user-select: none; position: relative; }
.aih-sw { width: 32px; height: 18px; border-radius: 999px; background: var(--surface3); position: relative; transition: .18s; flex: none; }
.aih-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: .18s; }
.aih-toggle:has(input:checked) .aih-sw { background: var(--accent); }
.aih-toggle:has(input:checked) .aih-sw::after { left: 16px; }
.aih-toggle:has(input:checked) { color: var(--text); }
.aih-strip-spacer { flex: 1; }
.aih-stars { font-size: 10px; color: var(--text3); letter-spacing: .5px; }

/* message log */
.aih-p-log { flex: 1; overflow-y: auto; padding: 12px 12px 6px; display: flex; flex-direction: column; gap: 0; min-height: 0; min-width: 0; overflow-x: hidden; }
.aih-p-log > *, .aih-p-log * { overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }
.aih-p-log pre, .aih-p-log code { white-space: pre-wrap; }
.aih-p-log::-webkit-scrollbar { width: 6px; }
.aih-p-log::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 6px; }

/* day separator */
.aih-day-sep { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; color: var(--text3); font-size: 11px; font-weight: 700; }
.aih-day-sep::before, .aih-day-sep::after { content: ""; height: 1px; flex: 1; background: var(--border); }

/* Slack-style message rows */
.aih-m { display: flex; gap: 10px; padding: 5px 6px; border-radius: 10px; position: relative; transition: background .14s; }
.aih-m:hover { background: var(--surface2); }
.aih-m-ava { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; align-self: flex-start; margin-top: 2px; }
.aih-m-ava.sys { background: linear-gradient(135deg,#7d8bff,#a98bff); }
.aih-m-ava.me { background: linear-gradient(135deg,#00AFF0,#33c6ff); }
.aih-m-body { flex: 1; min-width: 0; }
.aih-m-top { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
.aih-m-name { font-size: 13px; font-weight: 800; color: var(--text); }
.aih-m-tag { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #8b6cf0; background: rgba(139,108,240,.15); padding: 1px 6px; border-radius: 5px; }
.aih-m-tag.you { color: var(--accent); background: var(--accent-bg); }
.aih-m-time { font-size: 11px; color: var(--text3); }
.aih-m-text { font-size: 13px; color: var(--text); line-height: 1.5; }
.aih-m-text h1 { font-size: 16px; margin: 6px 0 2px; } .aih-m-text h2 { font-size: 14px; margin: 5px 0 2px; } .aih-m-text h3 { font-size: 13px; font-weight: 700; margin: 4px 0 2px; }
.aih-m-text ul { margin: 4px 0 4px 16px; } .aih-m-text li { margin: 2px 0; }
.aih-m-text code { background: rgba(128,128,128,.18); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.aih-m-text pre { background: var(--surface2); border: 1px solid var(--border); padding: 10px 12px; border-radius: 8px; margin: 6px 0; font-size: 12px; overflow-x: auto; }
.aih-m-text a { color: var(--accent); }
.aih-m-card { margin-top: 6px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface2); padding: 10px 13px; font-size: 12.5px; line-height: 1.55; color: var(--text2); }
.aih-m-card .h { font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.aih-thumb2 { max-width: 150px; max-height: 110px; border-radius: 8px; display: block; margin-top: 5px; }
.aih-genimg { max-width: 100%; border-radius: 10px; margin-top: 8px; display: block; }
/* Code-agent step-by-step commentary — collapsible, like Claude Code's tool log. */
.aih-code-steps { margin-top: 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); overflow: hidden; }
.aih-cs-hd { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-bottom: 1px solid var(--border); font-size: 11.5px; font-weight: 800; color: var(--text); }
.aih-cs-req { flex: 1; min-width: 0; font-weight: 500; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aih-cs-badge { font-size: 9.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; flex-shrink: 0; }
.aih-cs-badge.ok { color: var(--green, #16a34a); background: rgba(34,197,94,.14); }
.aih-cs-badge.err { color: var(--red, #ef4444); background: rgba(239,68,68,.14); }
.aih-cs-badge.run { color: var(--accent); background: rgba(0,175,240,.14); }
.aih-cs-row { padding: 4px 10px; font-size: 12.5px; }
.aih-cs-row + .aih-cs-row { border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.aih-cs-row summary { display: flex; gap: 7px; align-items: baseline; cursor: pointer; list-style: none; }
.aih-cs-row summary::-webkit-details-marker { display: none; }
.aih-cs-ico { font-size: 12.5px; width: 17px; text-align: center; flex-shrink: 0; }
.aih-cs-lab { flex: 1; min-width: 0; color: var(--text); font-weight: 600; word-break: break-word; }
.aih-cs-tog { color: var(--accent); font-size: 10px; flex-shrink: 0; }
.aih-cs-det { margin: 6px 0 3px 24px; padding: 8px 10px; background: var(--surface, #111); border: 1px solid var(--border); border-radius: 8px; font-size: 10.5px; line-height: 1.5; color: var(--text2); white-space: pre-wrap; overflow: auto; max-height: 240px; }
/* Approved-knowledge "Sources" footnote — subtle, collapsible, under the answer. */
.aih-sources { margin-top: 8px; }
.aih-sources > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--text3); user-select: none; }
.aih-sources > summary::-webkit-details-marker { display: none; }
.aih-sources > summary:hover { color: var(--text2); }
.aih-src-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.aih-src-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 240px; padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface2); font-size: 11px; color: var(--text2); text-decoration: none; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aih-src-chip:hover { border-color: var(--accent); color: var(--text); }
.aih-src-area { font-size: 10px; color: var(--text3); text-transform: capitalize; }
.aih-m-who { font-size: 10px; color: var(--text3); margin-top: 3px; }

/* hover action menu */
.aih-m-actions { position: absolute; top: -10px; right: 6px; display: flex; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 3px; box-shadow: 0 4px 14px -6px rgba(0,0,0,.4); opacity: 0; transform: translateY(4px); pointer-events: none; transition: .15s; z-index: 5; }
.aih-m:hover .aih-m-actions { opacity: 1; transform: none; pointer-events: auto; }
.aih-act { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; cursor: pointer; color: var(--text2); font-size: 12px; transition: .13s; }
.aih-act:hover { background: var(--surface2); color: var(--text); }

/* welcome / empty state */
.aih-empty { color: var(--text3); text-align: center; margin: auto; font-size: 13px; padding: 20px; }
.aih-welcome { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 20px; text-align: center; }
.aih-welcome-orb { width: 60px; height: 60px; border-radius: 18px; background: linear-gradient(135deg,#00AFF0,#0e8ed8); display: grid; place-items: center; color: #fff; font-size: 28px; margin-bottom: 16px; box-shadow: 0 10px 28px -8px rgba(0,175,240,.3); animation: aih-float 4s ease-in-out infinite; }
@keyframes aih-float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)} }
.aih-welcome h2 { font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.aih-welcome p { color: var(--text2); font-size: 13px; margin-top: 7px; max-width: 260px; line-height: 1.5; }
.aih-chips { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 18px; max-width: 310px; }
.aih-chip { font-size: 12px; font-weight: 600; color: var(--text2); background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; padding: 7px 12px; cursor: pointer; transition: .16s; }
.aih-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); transform: translateY(-1px); }
.aih-ghost-link { background: transparent; border: 0; color: var(--text3); font-size: 12px; font-weight: 700; cursor: pointer; transition: .15s; font-family: inherit; margin-top: 14px; }
.aih-ghost-link:hover { color: var(--accent); }

/* staged files */
.aih-p-staged { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px; }
.aih-p-staged span { font-size: 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; }
.aih-p-staged button { border: none; background: none; cursor: pointer; color: var(--text3); }

/* suggested channels */
.aih-p-channels { border-top: 1px solid var(--border); padding: 8px 12px calc(8px + env(safe-area-inset-bottom,0)); }
.aih-p-channels summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text); }
.aih-ch-search { display: flex; align-items: center; gap: 8px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin: 8px 0 10px; }
.aih-ch-search input { border: 0; background: transparent; outline: none; font-size: 13px; flex: 1; color: var(--text); font-family: inherit; }
.aih-ch { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-top: 8px; background: var(--surface); transition: border-color .12s, box-shadow .12s; }
.aih-ch:hover { border-color: var(--accent); box-shadow: 0 4px 12px -6px rgba(0,175,240,.2); }
.aih-ch-head { display: flex; align-items: center; gap: 7px; font-size: 13px; min-width: 0; }
.aih-ch-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.aih-ch-pin { flex-shrink: 0; font-size: 13px; line-height: 1; }
.aih-ch-open { margin-left: auto; flex-shrink: 0; font-size: 11.5px; font-weight: 700; color: var(--accent); background: var(--accent-bg); border: 0; border-radius: 8px; padding: 5px 10px; cursor: pointer; transition: .15s; white-space: nowrap; }
.aih-ch-open:hover { filter: brightness(1.1); }
.aih-ch-send { display: flex; gap: 7px; margin-top: 9px; }
.aih-ch-send input { flex: 1; min-width: 0; padding: 7px 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 12.5px; font-family: inherit; outline: none; }
.aih-ch-send input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,175,240,.1); }
.aih-ch-send button { font-size: 12px; font-weight: 700; border: none; background: var(--accent); color: #fff; border-radius: 8px; padding: 0 13px; cursor: pointer; flex-shrink: 0; }

/* composer */
.aih-composer { border-top: 1px solid var(--border); padding: 10px 12px calc(10px + env(safe-area-inset-bottom,0)); background: var(--surface); }
.aih-md-bar { display: flex; align-items: center; gap: 3px; margin-bottom: 8px; }
.aih-mdb { width: 28px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--text2); cursor: pointer; border: 1px solid transparent; background: none; transition: .13s; }
.aih-mdb:hover { background: var(--surface2); color: var(--text); }
.aih-mdb-div { width: 1px; height: 16px; background: var(--border); margin: 0 3px; }
.aih-input-row { display: flex; align-items: flex-end; gap: 8px; background: var(--surface2); border: 1.5px solid var(--border); border-radius: 14px; padding: 7px 7px 7px 12px; transition: .16s; }
.aih-input-row:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(0,175,240,.1); }
.aih-attach-group { display: flex; gap: 2px; align-self: center; }
.aih-attach-btn { width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent; color: var(--text2); display: grid; place-items: center; cursor: pointer; font-size: 15px; transition: .15s; }
.aih-attach-btn:hover { background: var(--surface3); color: var(--text); }
.aih-input-row textarea { flex: 1; border: 0; outline: none; resize: none; font-family: inherit; font-size: 14px; color: var(--text); line-height: 1.45; max-height: 120px; padding: 5px 0; background: transparent; }
.aih-input-row textarea::placeholder { color: var(--text3); }
.aih-send-btn { border: 0; background: var(--accent); color: #fff; font-weight: 800; font-size: 13px; border-radius: 11px; padding: 8px 14px; cursor: pointer; transition: .16s; display: flex; align-items: center; gap: 5px; flex: none; box-shadow: 0 4px 10px -4px rgba(0,175,240,.4); }
.aih-send-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.aih-send-btn:active { transform: none; }

@media (max-width: 760px) {
  #oa-aihelp { right: 0; bottom: 0; left: 0; top: 0; width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; border: none; }
  .aih-p-log { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
}

/* ── Updates widget ──────────────────────────────────────────────────────────── */
/* Sidebar unread pills — external to panel, used by sidebar */
.sb-upd { display: inline-flex; gap: 3px; margin-left: 4px; }
.sb-upd-pill { font-size: 9px; font-weight: 700; color: #fff; border-radius: 999px; min-width: 15px; height: 15px; line-height: 15px; text-align: center; padding: 0 4px; }
.sb-upd-pill.major { background: var(--red); }
.sb-upd-pill.minor { background: var(--text3); }
.upd-loading { color: var(--text3); font-size: 12px; padding: 16px; }
.upd-empty { color: var(--text3); font-size: 12px; }
/* Widget wrapper + card */
.upd-w { width: 100%; }
.upd-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color .15s; }
.upd-card.has-major { border-color: rgba(232,85,85,.28); box-shadow: 0 0 0 1px rgba(232,85,85,.05), 0 8px 28px -14px rgba(232,85,85,.3); }
/* Header */
.upd-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; user-select: none; transition: background .12s; }
.upd-head:hover { background: var(--surface2); }
.upd-title { font-size: 14px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.upd-chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.upd-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--text2); background: var(--surface2); }
.upd-chip-dot { width: 6px; height: 6px; border-radius: 50%; }
.upd-chip.major { color: var(--red); border-color: rgba(232,85,85,.3); background: var(--red-bg); }
.upd-chip.major .upd-chip-dot { background: var(--red); }
.upd-chip.minor .upd-chip-dot { background: var(--text3); }
.upd-unread { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.upd-unread-pip { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.upd-chev { color: var(--text3); transition: transform .22s ease; display: flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 8px; flex-shrink: 0; }
.upd-head:hover .upd-chev { color: var(--text); background: var(--surface3); }
/* Body collapse (CSS grid animation) */
.upd-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .24s ease; border-top: 1px solid transparent; }
.upd-inner { overflow: hidden; min-height: 0; }
.upd-w.open .upd-body { grid-template-rows: 1fr; border-top-color: var(--border); }
.upd-w.open .upd-chev { transform: rotate(180deg); }
/* Toolbar */
.upd-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 11px 18px; border-bottom: 1px solid var(--border); }
.upd-pill-f { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: transparent; color: var(--text2); padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; transition: .12s; }
.upd-pill-f:hover { border-color: var(--border2); color: var(--text); }
.upd-pill-f .upd-n { opacity: .55; font-weight: 700; }
.upd-pill-f.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.upd-pill-f.active .upd-n { opacity: .75; }
.upd-pill-fdot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.upd-pill-fdot.major { background: var(--red); }
.upd-pill-fdot.minor { background: var(--text3); }
.upd-pill-f.active .upd-pill-fdot { background: #fff; }
.upd-readall { margin-left: auto; background: none; border: none; color: var(--text3); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; padding: 5px 2px; }
.upd-readall:hover { color: var(--accent); }
/* Day group labels */
.upd-gl { padding: 12px 18px 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--text3); }
/* Feed */
.upd-feed { padding: 2px 8px 8px; }
.upd-item { display: flex; gap: 11px; padding: 10px; border-radius: 10px; position: relative; transition: background .11s; align-items: flex-start; }
.upd-item:hover { background: var(--surface2); }
.upd-item + .upd-item { border-top: 1px solid var(--border); }
.upd-item + .upd-item:hover, .upd-item:hover + .upd-item { border-top-color: transparent; }
.upd-item.major { background: var(--red-bg); }
.upd-item.major:hover { filter: brightness(1.06); }
.upd-item.major::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2.5px; border-radius: 3px; background: var(--red); }
.upd-sev { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.upd-sev.minor { background: var(--text3); }
.upd-sev.major { background: var(--red); box-shadow: 0 0 0 3px var(--red-bg); }
.upd-itb { flex: 1; min-width: 0; }
.upd-it-top { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; flex-wrap: wrap; }
.upd-it-em { font-size: 14px; line-height: 1; }
.upd-it-tag { font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--text3); background: var(--surface2); border: 1px solid var(--border); padding: 2px 6px; border-radius: 5px; }
.upd-it-tag.agent { color: var(--blue, #4a9eff); border-color: rgba(74,158,255,.28); background: var(--blue-bg, #0e1e2a); }
.upd-it-tag.major { color: var(--red); border-color: rgba(232,85,85,.3); background: var(--red-bg); }
.upd-it-time { color: var(--text3); font-size: 11px; font-weight: 500; margin-left: auto; white-space: nowrap; }
.upd-it-txt { font-size: 13px; color: var(--text2); line-height: 1.5; overflow-wrap: anywhere; }
.upd-it-txt.major { color: var(--text); }
.upd-it-acts { margin-top: 6px; display: flex; gap: 13px; }
.upd-it-acts a { color: var(--accent); font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer; }
.upd-it-acts a:hover { text-decoration: underline; }
.upd-it-acts a.muted { color: var(--text3); }
.upd-item-unread { position: absolute; right: 10px; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.upd-item.upd-hide { display: none; }
/* Earlier group — hidden until show-earlier */
.upd-earlier { display: none; }
.upd-w.show-earlier .upd-earlier { display: block; }
/* Foot */
.upd-foot { padding: 10px 18px; text-align: center; border-top: 1px solid var(--border); }
.upd-foot button { background: none; border: none; color: var(--text3); font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; padding: 3px 8px; border-radius: 6px; }
.upd-foot button:hover { color: var(--text); background: var(--surface2); }
.upd-less-btn { display: none; }
.upd-w.show-earlier .upd-more-btn { display: none; }
.upd-w.show-earlier .upd-less-btn { display: inline; }
/* Tasks section */
.upd-tasks { border-bottom: 1px solid var(--border); padding: 12px 18px; }
.upd-tasks-h { font-size: 12px; color: var(--text2); font-weight: 700; margin-bottom: 7px; }
.upd-tfilters { display: flex; gap: 6px; margin-bottom: 8px; }
.upd-tf { font-size: 11px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); background: none; color: var(--text2); cursor: pointer; font-family: inherit; }
.upd-tf.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.upd-tasklist { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.upd-pgroup { margin-bottom: 4px; }
.upd-task { display: flex; align-items: center; gap: 7px; font-size: 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; margin-bottom: 5px; white-space: nowrap; cursor: pointer; }
.upd-task.done .upd-task-t { text-decoration: line-through; color: var(--text3); }
.upd-task.done .upd-dot { color: var(--green); }
.upd-dot { color: var(--text3); flex-shrink: 0; }
.upd-task-t { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.upd-task-a { font-size: 10px; color: var(--text2); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; }
/* Compact home card */
.upd-card.compact .upd-head { padding: 11px 14px; }
.upd-card.compact .upd-title { font-size: 13px; }
.upd-card.compact .upd-gl { padding: 8px 14px 4px; }
.upd-card.compact .upd-feed { padding: 2px 4px 6px; }
.upd-card.compact .upd-item { padding: 7px 8px; gap: 9px; }
.upd-card.compact .upd-it-txt { font-size: 12px; }
.upd-summary-sm { font-size: 12px; color: var(--text2); padding: 4px 14px 6px; }

/* ── Toast ─────────────────────────────────────────────────────────────────── */
.toast-stack {
  position: fixed; bottom: 82px; right: 20px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 2000; pointer-events: none;
  max-width: 340px;
}
.toast {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  animation: toastIn 0.18s ease;
}
.toast.success { border-color: var(--green); }
.toast.error { border-color: var(--red); }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ── Auth gate ─────────────────────────────────────────────────────────────── */
#auth-gate {
  position: fixed; inset: 0;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  padding: 16px;
}
.auth-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  width: 100%; max-width: 360px;
  text-align: center;
}
.auth-logo {
  width: 48px; height: 48px;
  margin: 0 auto 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px; color: #fff;
}
.auth-mark {
  width: 72px; height: 72px;
  margin: 0 auto 16px;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 0 30px rgba(0,175,240,0.35);
}
.auth-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.auth-box h2 { font-size: 20px; margin-bottom: 4px; }
.auth-box p  { color: var(--text2); font-size: 13px; margin-bottom: 22px; }
.auth-box .input { margin-bottom: 10px; padding: 11px 13px; }
.auth-box .btn {
  display: block;
  width: 100%;
  margin: 8px auto 0;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 15px;
  border-radius: 9px;
}
.auth-error { color: var(--red); font-size: 12px; margin-top: 8px; min-height: 16px; }

/* ── Permission-denied page ────────────────────────────────────────────────── */
.no-access {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 80px 20px;
  text-align: center;
  color: var(--text2);
}
.no-access .icon { font-size: 36px; margin-bottom: 12px; opacity: 0.4; }
.no-access h3 { font-size: 16px; color: var(--text); margin-bottom: 6px; }

/* ── Mobile ────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body { overflow: auto; }
  #shell { display: block; height: auto; min-height: 100vh; }
  #shell-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    z-index: 400;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    width: 82vw; max-width: 320px;
    box-shadow: var(--shadow-lg);
    /* .sb-header already adds safe-area-inset-top padding (see line ~322);
       don't double it on the container. */
    overflow-y: auto;
  }
  #shell.sb-mobile-open #shell-sidebar { transform: translateX(0); }
  /* ── Mobile sidebar polish ─────────────────────────────────────────── */
  /* Comfortable header alignment with the logo + brand. */
  .sb-header { gap: 12px; }
  .sb-brand { font-size: 16px; }
  /* Tappable but compact nav (less padding). */
  .sb-nav { padding: 6px 8px calc(10px + env(safe-area-inset-bottom, 0)); gap: 1px; }
  .sb-group-head {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 14px;
    gap: 10px;
  }
  .sb-group-icon { font-size: 16px; width: 20px; }
  .sb-subnav { margin: 1px 0 4px 8px; padding-left: 12px; }
  .sb-subnav a {
    min-height: 32px;
    padding: 6px 9px;
    font-size: 13px;
  }
  /* Footer (user + logout) sticks to the bottom of the scrollable sidebar so
     it stays reachable no matter how far down the nav list you've scrolled. */
  .sb-footer {
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: var(--surface);
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0));
  }
  /* Phone: show ONLY the page name in the top bar. The subtitle line under long
   * headings (Pipeline Lab, KPI Dashboards…) is too bulky on a small screen. */
  .tb-page-sub { display: none !important; }
  .tb-page-title { font-size: 16px; line-height: 1.2; }
  /* real backdrop element (#sb-backdrop) handles dimming + tap-to-close */
  #shell-main { width: 100%; height: auto; }
  #shell-content { padding: 16px calc(16px + env(safe-area-inset-right, 0px)) 16px calc(16px + env(safe-area-inset-left, 0px)); }
  /* Keep the safe-area top inset (notch / Dynamic Island) — must restate it
     here because this later 760px block would otherwise clobber the earlier
     .top-bar padding rule and leave the header colliding with the status bar. */
  /* Sticky so the top-bar stays reachable no matter how far down you scroll. */
  .top-bar { padding: calc(env(safe-area-inset-top, 0) + 12px) 14px 14px; gap: 10px; position: sticky; top: 0; z-index: 100; }
  /* Hamburger hidden — sidebar is removed from mobile, topnav is used instead */
  .tb-mobile-toggle { display: none; }
  .tb-search { display: none; }
  /* Search on mobile: icon-only button that matches the other toolbar icons.
     The spacer AFTER the search button is collapsed to zero so all icon buttons
     (search, AI, chat, notif, theme) group flush on the right side of the bar.
     Layout becomes: [Page title] ←—flex space—→ [🔍][🤖][💬][🔔][☀️] */
  .tb-searchbtn {
    flex: 0 0 36px; width: 36px; height: 36px;
    justify-content: center; padding: 0; margin-left: 0;
    border-radius: 8px; background: var(--surface2); border: 1px solid var(--border);
  }
  .tb-searchbtn .tb-searchbtn-lbl, .tb-searchbtn kbd { display: none; }
  .tb-searchbtn .tb-searchbtn-mg { font-size: 16px; opacity: 1; }
  /* Remove the spacer after search entirely — a zero-flex item still consumes
     the container gap on both sides, creating a double-gap before the AI button */
  .tb-searchbtn + .tb-spacer { display: none; }
  .tb-action-btn { padding: 6px 10px; font-size: 12px; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-value { font-size: 20px; }
  .modal { padding: 18px; }
  .drawer { width: 100%; }
  .tbl thead th { padding: 6px 8px; font-size: 10px; }
  .tbl tbody td { padding: 8px; font-size: 12px; }
  .sb-collapse-btn { display: none; }
}

/* ─── Home grid + per-area jump-to-page cards ─────────────────────────────
   Used by /home.html and by the OAM.areaJumpGrid() helper that mounts a
   "Jump to page within X" card row at the top of every area dashboard. */
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.home-quick-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.home-quick-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.home-quick-icon  { font-size: 22px; line-height: 1; }
.home-quick-title { font-weight: 600; font-size: 14px; line-height: 1.2; }
.home-quick-sub   { font-size: 11px; color: var(--text3); line-height: 1.4; }

/* ── Area ticker (injected by _injectAreaUpdates) — native scroll, JS-driven
 *    auto-advance (no CSS transform; that locked up iOS over native scroll). ── */
.ticker { overflow-x: auto; overflow-y: hidden; white-space: nowrap; position: relative; -webkit-overflow-scrolling: touch; scrollbar-width: none; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; }
.ticker::-webkit-scrollbar { display: none; }
.ticker-track { display: inline-flex; gap: 22px; padding: 9px 14px; }
.ticker-item { font-size: 13px; color: var(--text2); }
.ticker-item b { color: var(--text); }
.ticker-item .tk-ic { margin-right: 5px; }
/* Static KPI row (replaces the scrolling ticker) — scannable tiles, no motion. */
.area-kpi-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin-bottom: 12px; }
.area-kpi-row .akpi { flex: 1 1 150px; min-width: 130px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.area-kpi-row .akpi-l { font-size: 11px; color: var(--text3); font-weight: 600; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.area-kpi-row .akpi-v { font-size: 17px; font-weight: 800; color: var(--text); display: flex; align-items: baseline; gap: 7px; }
.area-kpi-row .akpi-d { font-size: 11px; font-weight: 700; color: var(--text3); }
.area-kpi-row .akpi-d.up { color: #22C55E; } .area-kpi-row .akpi-d.down { color: #EF4444; }
.area-kpi-row .akpi-actions { display: flex; flex-direction: column; gap: 6px; justify-content: center; flex: 0 0 auto; }
.area-kpi-row .akpi-btn { font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text2); text-decoration: none; cursor: pointer; white-space: nowrap; text-align: center; }
.area-kpi-row .akpi-btn:hover { border-color: var(--accent); color: var(--text); }
.area-kpi-row .akpi-loading { font-size: 13px; color: var(--text3); padding: 8px 4px; }

/* Sidebar section dividers */
.sb-divider { display: flex; align-items: center; gap: 8px; padding: 14px 12px 5px; }
.sb-divider span { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); white-space: nowrap; }
.sb-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* Embed mode (?embed=1) — page is iframed inside another OA page. Hide the
   sidebar + topbar + two-tier top nav so only the content shows; content goes
   full-width. (Without hiding #topnav, an embedded page renders a second full
   nav — e.g. Staff › Timesheets/Punctuality showed a duplicate top nav.) */
.oam-embed #shell-sidebar { display: none !important; }
.oam-embed .top-bar { display: none !important; }
.oam-embed #topnav { display: none !important; }
.oam-embed #shell-main { margin-left: 0 !important; width: 100% !important; }
.oam-embed #shell-content { padding-top: 8px !important; }

/* AI helper: animated typing indicator (agency blue) while a response generates */
.aih-typing { display:inline-flex; gap:5px; align-items:center; padding:3px 0; }
.aih-typing i { width:7px; height:7px; border-radius:50%; background:#00AFF0; display:inline-block; animation:aih-bounce 1s infinite ease-in-out; }
.aih-typing i:nth-child(2) { animation-delay:.15s; }
.aih-typing i:nth-child(3) { animation-delay:.3s; }
@keyframes aih-bounce { 0%,80%,100% { transform:scale(.5); opacity:.4; } 40% { transform:scale(1); opacity:1; } }

/* ── Needs Attention widget ─────────────────────────────────────────────────── */
#oam-na {
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  padding: 14px 20px 12px;
}
.oam-na-hd {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text3);
  margin-bottom: 10px;
}
.oam-na-hd .oam-na-count {
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--red); color: #fff;
  font-size: 11px; font-weight: 800; display: inline-flex;
  align-items: center; justify-content: center; line-height: 1;
}
.oam-na-hd .oam-na-collapse {
  font-size: 13px; background: none; border: none; cursor: pointer;
  color: var(--text3); padding: 0 2px; line-height: 1; margin-right: 2px;
  transition: color .12s;
}
.oam-na-hd .oam-na-collapse:hover { color: var(--text); }
.oam-na-hd .oam-na-refresh {
  font-size: 14px; background: none; border: none; cursor: pointer;
  color: var(--text3); padding: 0 2px; margin-left: auto; line-height: 1;
  transition: color .15s, transform .2s;
}
.oam-na-hd .oam-na-refresh:hover { color: var(--text); transform: rotate(180deg); }
.oam-na-hd .oam-na-add,
.oam-na-hd .oam-na-timing {
  font-size: 11px; font-weight: 700;
  color: var(--text3); border: 1px solid var(--border);
  background: var(--surface); border-radius: 6px;
  padding: 3px 8px; cursor: pointer;
  text-transform: none; letter-spacing: 0; margin-left: 6px;
}
.oam-na-hd .oam-na-add:hover,
.oam-na-hd .oam-na-timing:hover { color: var(--text); border-color: var(--text3); }
/* ── Employee of the Week ─────────────────────────────────────────────────── */
#oam-eow {
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  padding: 12px 20px 14px;
}
.oam-eow-hd {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text3);
  margin-bottom: 10px;
}
.oam-eow-week { font-weight: 700; letter-spacing: .03em; opacity: .75; text-transform: none; }
.oam-eow-how {
  margin-left: auto; font-size: 11px; font-weight: 700;
  color: var(--text3); border: 1px solid var(--border);
  background: var(--surface); border-radius: 6px;
  padding: 3px 8px; cursor: pointer; text-transform: none; letter-spacing: 0;
}
.oam-eow-how:hover { color: var(--text); border-color: var(--text3); }
.oam-eow-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px;
}
.oam-eow-card {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--yellow, #c9a800);
  border-radius: 10px; padding: 10px 12px;
}
.oam-eow-card.empty { border-left-color: var(--border2); }
.oam-eow-label {
  font-size: 10px; font-weight: 800; letter-spacing: .08em;
  color: var(--text3); margin-bottom: 6px;
}
.oam-eow-who { display: flex; align-items: center; gap: 9px; }
.oam-eow-ava {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
  object-fit: cover; background: var(--surface3);
}
.oam-eow-ava-txt {
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: var(--text2);
}
.oam-eow-name { font-size: 13.5px; font-weight: 800; }
.oam-eow-role { font-size: 11px; color: var(--text3); text-transform: capitalize; }
.oam-eow-highlights { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.oam-eow-chip {
  font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px;
  background: var(--surface2); color: var(--text2); line-height: 1.5;
}
.oam-eow-none { font-size: 12px; color: var(--text3); padding: 6px 0; line-height: 1.5; }
@media (max-width: 700px) {
  #oam-eow { padding: 10px 14px 12px; }
  .oam-eow-grid { grid-template-columns: 1fr; }
}

/* States plainly that the board is a live window, so a quiet board reads as
   "nothing recent" rather than "the alerts stopped working". */
.oam-na-hd .oam-na-window {
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  color: var(--text3); opacity: .75; border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 7px; line-height: 1.6;
}
#oam-na.collapsed .oam-na-grid { display: none; }
#oam-na.collapsed { padding-bottom: 10px; }
.oam-na-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
}
.oam-na-item {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--border2);
  border-radius: 10px; padding: 10px 12px;
  position: relative;
}
.oam-na-item.red    { border-left-color: var(--red); }
.oam-na-item.amber  { border-left-color: var(--orange); }
.oam-na-item.yellow { border-left-color: var(--yellow, #c9a800); }
.oam-na-icon {
  width: 32px; height: 32px; border-radius: 8px; flex: 0 0 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; background: var(--surface2);
}
.oam-na-item.red    .oam-na-icon { background: rgba(226,59,59,.12); }
.oam-na-item.amber  .oam-na-icon { background: rgba(232,140,48,.12); }
.oam-na-item.yellow .oam-na-icon { background: rgba(201,168,0,.12); }
.oam-na-body { flex: 1; min-width: 0; }
.oam-na-title {
  font-size: 12.5px; font-weight: 700; display: flex;
  align-items: center; gap: 6px; flex-wrap: wrap;
}
.oam-na-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  padding: 1px 6px; border-radius: 999px;
  background: var(--surface3); color: var(--text3);
}
.oam-na-item.red    .oam-na-tag { background: rgba(226,59,59,.12); color: var(--red); }
.oam-na-item.amber  .oam-na-tag { background: rgba(232,140,48,.12); color: var(--orange); }
.oam-na-item.yellow .oam-na-tag { background: rgba(201,168,0,.12); color: var(--yellow,#c9a800); }
.oam-na-sub {
  font-size: 11px; color: var(--text2); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.oam-na-update-link {
  cursor: pointer;
  border-radius: 4px;
  transition: background .12s;
}
.oam-na-update-link:hover { background: rgba(255,255,255,.05); }
.oam-na-update {
  font-size: 10.5px; margin-top: 5px; padding: 4px 7px;
  background: rgba(0,175,240,.08); border-radius: 5px;
  color: var(--text2); line-height: 1.35;
}
.oam-na-update strong { color: var(--accent); font-weight: 700; }
.oam-na-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.oam-na-exec {
  font-size: 11px; font-weight: 700; border-radius: 7px;
  padding: 5px 10px; white-space: nowrap; cursor: pointer;
  border: none; line-height: 1;
}
.oam-na-item.red    .oam-na-exec { background: var(--red);    color: #fff; }
.oam-na-item.amber  .oam-na-exec { background: var(--orange); color: #fff; }
.oam-na-item.yellow .oam-na-exec { background: var(--surface3); color: var(--text); border: 1px solid var(--border2); }
.oam-na-assign, .oam-na-feedback {
  font-size: 13px; background: var(--surface2); border: 1px solid var(--border);
  cursor: pointer; color: var(--text2); padding: 4px 7px; line-height: 1;
  border-radius: 7px; transition: background .12s, border-color .12s, color .12s;
}
.oam-na-assign:hover, .oam-na-feedback:hover { color: var(--text); border-color: var(--border2); background: var(--surface3); }
.oam-na-dismiss {
  font-size: 12px; background: none; border: none; cursor: pointer;
  color: var(--text3); padding: 4px; line-height: 1; border-radius: 4px;
}
.oam-na-dismiss:hover { color: var(--text); }
.oam-na-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.oam-na-badge {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 3px; line-height: 1.4;
}
.oam-na-badge-asg { background: rgba(0,175,240,.12); color: var(--accent); }
.oam-na-badge-fb  { background: rgba(52,211,153,.14); color: var(--green); }
.oam-na-empty { font-size: 12.5px; color: var(--text3); padding: 6px 0; }
.oam-na-loading { font-size: 12.5px; color: var(--text3); display: flex; align-items: center; gap: 6px; }
@media (max-width: 700px) {
  .oam-na-grid { grid-template-columns: 1fr; }
  #oam-na { padding: 12px 14px 10px; }
  /* With four actions (execute / assign / feedback / dismiss) the row is too
     wide beside the text on phones — drop it onto its own full-width line. */
  .oam-na-item { flex-wrap: wrap; }
  .oam-na-actions { width: 100%; justify-content: flex-end; margin-top: 2px; }
}

/* ── Fix the [Area] section ──────────────────────────────────────────────── */
#oam-fix {
  margin: 0 0 22px;
  padding: 18px 20px 20px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.oam-fix-hd {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.oam-fix-bullet {
  width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0;
  background: var(--accent);
}
.oam-fix-title {
  font-size: 13px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text); flex: 1;
}
.oam-fix-regen {
  font-size: 11.5px; color: var(--text3); background: none; border: none;
  cursor: pointer; padding: 3px 7px; border-radius: 5px;
  transition: background .15s, color .15s;
}
.oam-fix-regen:hover { background: var(--surface3); color: var(--text); }
.oam-fix-regen.spinning { pointer-events: none; opacity: .5; }
.oam-fix-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.oam-fix-card {
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 13px 14px 13px 16px;
  border-left: 3px solid var(--accent);
  display: flex; flex-direction: column; gap: 5px;
  transition: transform .12s;
}
.oam-fix-card:hover { transform: translateY(-1px); }
.oam-fix-card.blue   { border-left-color: var(--accent,#5b9bd5); }
.oam-fix-card.green  { border-left-color: var(--green,#2eb87a); }
.oam-fix-card.purple { border-left-color: var(--purple,#9b6dff); }
.oam-fix-card.orange { border-left-color: var(--orange,#e8803a); }
.oam-fix-card.red    { border-left-color: var(--red,#e05252); }
.oam-fix-card.teal   { border-left-color: var(--teal,#2bbfb0); }
.oam-fix-card-icon { font-size: 18px; line-height: 1; }
.oam-fix-card-title { font-size: 12.5px; font-weight: 700; color: var(--text); line-height: 1.3; }
.oam-fix-card-desc { font-size: 11.5px; color: var(--text2); line-height: 1.5; }
/* The live figure a card was built from — small, muted, but always there, so a
   card can be traced back to the data without asking anyone. */
.oam-fix-card-src {
  font-size: 10.5px; color: var(--text3); line-height: 1.4;
  margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--border);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.oam-fix-src {
  font-size: 10.5px; font-weight: 600; color: var(--text3);
  text-transform: none; letter-spacing: 0; margin-left: 8px; opacity: .85;
}
/* Cards are actionable — they open the person's private channel with the
   message drafted, or hand the card to the AI helper. */
.oam-fix-card { cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; }
.oam-fix-card:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.10); }
.oam-fix-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.oam-fix-card-go {
  font-size: 10.5px; font-weight: 700; color: var(--accent);
  margin-top: 8px; opacity: 0; transition: opacity .12s;
}
.oam-fix-card:hover .oam-fix-card-go,
.oam-fix-card:focus-visible .oam-fix-card-go { opacity: 1; }
@media (hover: none) { .oam-fix-card-go { opacity: 1; } }
.oam-fix-loading { font-size: 12.5px; color: var(--text3); padding: 8px 0; display: flex; align-items: center; gap: 6px; }
.oam-fix-error { font-size: 12px; color: var(--red,#e05252); padding: 6px 0; }
@media (max-width: 900px) {
  .oam-fix-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .oam-fix-grid { grid-template-columns: 1fr; }
  #oam-fix { padding: 12px 14px 14px; }
}

/* ── Profile Photo Nag banner ───────────────────────────────────────────── */
#pfp-nag { margin: 0 0 14px; }
.pfp-nag-inner {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(120deg, var(--accent), #7c5cff);
  color: #fff; border-radius: 12px; padding: 11px 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.pfp-nag-icon { font-size: 22px; flex-shrink: 0; }
.pfp-nag-txt { flex: 1; font-size: 13px; line-height: 1.4; }
.pfp-nag-txt b { font-size: 13.5px; }
.pfp-nag-dismiss { background: none; border: none; color: rgba(255,255,255,.7); font-size: 14px; cursor: pointer; padding: 2px 4px; flex-shrink: 0; }
.pfp-nag-dismiss:hover { color: #fff; }

/* ── Profile Photo Studio modal ─────────────────────────────────────────── */
.pfp-studio-backdrop {
  position: fixed; inset: 0; z-index: 7000;
  background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.pfp-studio-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 24px 22px; width: 100%; max-width: 420px; max-height: 90vh;
  overflow-y: auto; position: relative;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.pfp-studio-close {
  position: absolute; top: 12px; right: 14px; background: none; border: none;
  color: var(--text3); font-size: 16px; cursor: pointer; padding: 4px;
}
.pfp-studio-close:hover { color: var(--text); }
.pfp-studio-icon { font-size: 28px; margin-bottom: 4px; }
.pfp-studio-card h2 { font-size: 18px; font-weight: 800; margin: 0 0 5px; }
.pfp-studio-card p { font-size: 13px; color: var(--text2); line-height: 1.55; margin: 0 0 14px; }
.pfp-upload-zone {
  border: 2px dashed var(--border2); border-radius: 10px; padding: 18px;
  text-align: center; transition: border-color .15s, background .15s;
}
.pfp-upload-zone.dv { border-color: var(--accent); background: rgba(91,155,213,.07); }
.pfp-section-label { font-size: 11.5px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.pfp-styles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.pfp-style-btn {
  background: var(--surface2); border: 1.5px solid var(--border); border-radius: 7px;
  padding: 7px 9px; font-size: 12px; color: var(--text2); cursor: pointer;
  text-align: left; transition: border-color .12s, background .12s;
}
.pfp-style-btn:hover { background: var(--surface3); color: var(--text); }
.pfp-style-btn.sel { border-color: var(--accent); background: rgba(91,155,213,.1); color: var(--text); font-weight: 600; }
@media (max-width: 500px) {
  .pfp-styles-grid { grid-template-columns: 1fr; }
  .pfp-studio-card { padding: 18px 14px; }
}

/* pfp result image */
.pfp-result-full {
  width: 220px; height: 220px; object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border2);
  display: block; margin: 0 auto;
  box-shadow: 0 4px 18px rgba(0,0,0,.2);
  cursor: zoom-in;
}

/* ── Command palette (⌘K) ────────────────────────────────────────────────── */
.oam-pal-scrim {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(18,21,30,.38);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: none; align-items: flex-start; justify-content: center;
  padding: 11vh 16px 16px;
}
.oam-pal-scrim.open { display: flex; animation: oam-pal-in .14s ease; }
@keyframes oam-pal-in { from { opacity: 0; } to { opacity: 1; } }
.oam-palette {
  width: 580px; max-width: 96vw;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 28px 80px rgba(0,0,0,.26), 0 3px 10px rgba(0,0,0,.10);
  overflow: hidden; transform-origin: top center;
  animation: oam-pal-pop .16s cubic-bezier(.4,0,.2,1);
}
@keyframes oam-pal-pop { from { opacity:0;transform:translateY(-8px) scale(.985); } to { opacity:1;transform:none; } }
.oam-pal-top {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 17px; border-bottom: 1px solid var(--border);
}
.oam-pal-top .mg { font-size: 18px; color: var(--text3); flex-shrink: 0; }
.oam-pal-top input {
  flex: 1; border: none; background: transparent;
  font-size: 16px; color: var(--text); outline: none;
  font-weight: 500; font-family: inherit;
}
.oam-pal-top input::placeholder { color: var(--text3); font-weight: 400; }
.oam-pal-esc {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 6px; font-size: 11px; font-weight: 700;
  color: var(--text3); padding: 3px 8px; cursor: pointer; font-family: inherit; flex-shrink: 0;
}
.oam-pal-esc:hover { color: var(--text2); }
.oam-pal-body { max-height: 56vh; overflow-y: auto; padding: 6px 6px 8px; }
.oam-pal-body::-webkit-scrollbar { width: 8px; }
.oam-pal-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.oam-pal-grp { display: flex; align-items: center; gap: 7px; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text3); font-weight: 800; padding: 10px 12px 4px; cursor: pointer; user-select: none; }
.oam-pal-grp:hover { color: var(--text2); }
.oam-pal-grp-caret { font-size: 9px; width: 9px; display: inline-block; text-align: center; }
.oam-pal-grp-label { flex: 1; }
.oam-pal-grp-count { font-weight: 700; color: var(--text3); background: var(--surface2); border-radius: 999px; padding: 1px 7px; letter-spacing: 0; }
.oam-pal-note { padding: 4px 14px 10px; color: var(--text3); font-size: 12px; }
.oam-pal-row { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.oam-pal-row:hover { background: var(--surface2); }
.oam-pal-row.pal-sel { background: rgba(0,175,240,.12); }
.oam-pal-row.pal-sel:hover { background: rgba(0,175,240,.18); }
.oam-pal-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex: 0 0 34px; font-weight: 800; overflow: hidden; }
.oam-pal-icon.ico-ch { background: var(--accent-bg, rgba(0,175,240,.12)); color: var(--accent); }
.oam-pal-icon.ico-pg { background: var(--surface2); }
.oam-pal-icon.ico-so { background: rgba(232,67,147,.1); }
.oam-pal-icon.ico-av { color: #fff; font-size: 12px; }
.oam-pal-icon img { width: 100%; height: 100%; object-fit: cover; }
.oam-pal-icon.round { border-radius: 50%; }
.oam-pal-meta { flex: 1 1 auto; min-width: 0; }
.oam-pal-name { font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oam-pal-name b { color: var(--accent); font-weight: 800; }
.oam-pal-desc { font-size: 11px; color: var(--text3); font-weight: 600; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oam-pal-badge { flex: 0 0 auto; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--text3); background: var(--surface2); border: 1px solid var(--border); border-radius: 5px; padding: 2px 7px; }
.oam-pal-ret { flex: 0 0 auto; font-size: 13px; color: var(--accent); opacity: 0; font-weight: 800; }
.oam-pal-row.pal-sel .oam-pal-ret { opacity: 1; }
.oam-pal-empty { padding: 32px 16px; text-align: center; color: var(--text3); font-size: 13px; }
.oam-pal-foot {
  display: flex; align-items: center; gap: 14px; padding: 9px 14px;
  border-top: 1px solid var(--border); background: var(--surface2);
  font-size: 11px; color: var(--text3); font-weight: 600;
}
.oam-pal-foot .ml { margin-left: auto; }
.oam-pal-foot kbd { background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; font-size: 10px; font-weight: 700; color: var(--text2); margin: 0 1px; }