:root {
  /* Taste redesign — refined cold-ink palette: off-black neutral base, one blue accent, tinted depth */
  --bg: #090d17;
  --bg2: #0d1322;
  --card: #111726;
  --card2: #161d30;
  --line: #222b41;
  --line-soft: #1a2133;
  --text: #eef1f8;
  --muted: #8893ad;
  --accent: #4d8dff;
  --accent-soft: rgba(77,141,255,0.13);
  --accent-line: rgba(77,141,255,0.42);
  --up: #34d399;
  --degraded: #fbbf24;
  --down: #fb6f86;
  /* type system (frontend-design + typography skills): display=Space Grotesk, body=Inter, mono=JetBrains */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk", "Inter", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease-out: cubic-bezier(.22,.68,.28,1);
  --radius: 12px;
  --radius-sm: 9px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 30px -16px rgba(6,10,24,.8);
  --shadow-lg: 0 16px 48px -20px rgba(6,10,24,.9);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body[data-theme="dim"] { --bg:#0f141f; --bg2:#151b2a; --card:#181f31; --card2:#202840; --line:#2a3450; --line-soft:#202840; }
body[data-theme="light"] {
  --bg:#f5f7fb; --bg2:#ffffff; --card:#ffffff; --card2:#f0f3fa; --line:#e2e8f3; --line-soft:#eef2f8;
  --text:#141b2e; --muted:#5c6a86;
  --accent-soft:rgba(77,141,255,0.10); --accent-line:rgba(77,141,255,0.5);
  --shadow:0 1px 2px rgba(20,30,60,.06), 0 12px 30px -18px rgba(40,60,110,.25); --shadow-lg:0 18px 44px -22px rgba(40,60,110,.35);
}
body {
  background: radial-gradient(1200px 600px at 80% -10%, #16224d 0%, var(--bg) 55%) fixed;
  color: var(--text);
  font: 15px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}
body[data-theme="light"] { background: radial-gradient(1200px 600px at 80% -10%, #e8eefb 0%, var(--bg) 55%) fixed; }
.muted { color: var(--muted); }
.reduce-motion *, .reduce-motion .panel-enter { animation: none !important; transition: none !important; }

/* topbar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 4px; position: sticky; top: 0; z-index: 5;
  background: linear-gradient(var(--bg), rgba(11,16,32,0.6) 80%, transparent);
  backdrop-filter: blur(6px);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand h1 { font-size: 18px; font-weight: 650; letter-spacing: -0.01em; }
.topbar-right { display: flex; align-items: center; gap: 16px; }
.logout { color: var(--muted); text-decoration: none; font-size: 13px; border: 1px solid var(--line); padding: 6px 12px; border-radius: 8px; }
.logout:hover { color: var(--text); border-color: var(--accent); }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 4px rgba(255,255,255,0.04); }
.dot.up { background: var(--up); box-shadow: 0 0 12px var(--up); }
.dot.degraded { background: var(--degraded); box-shadow: 0 0 12px var(--degraded); }
.dot.down { background: var(--down); box-shadow: 0 0 12px var(--down); }

/* summary tiles */
.summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 8px 0 18px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.tile .n { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.tile .l { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }
.tile.up .n { color: var(--up); } .tile.degraded .n { color: var(--degraded); } .tile.down .n { color: var(--down); }

/* system bars */
.sys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 26px; }
.gauge { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.gauge .head { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.gauge .val { color: var(--text); font-weight: 600; }
.bar { height: 8px; background: #0a1330; border-radius: 6px; overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), #5aa0ff); transition: width .5s; }
.bar.warn > span { background: linear-gradient(90deg, var(--degraded), #ffcf7a); }
.bar.crit > span { background: linear-gradient(90deg, var(--down), #ff8aa0); }

.section-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 6px 4px 12px; }

/* project grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.proj { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; transition: border-color .2s, transform .2s; }
.proj:hover { border-color: #34427a; transform: translateY(-2px); }
.proj .row { display: flex; align-items: center; gap: 10px; }
.proj h3 { font-size: 16px; font-weight: 640; flex: 1; letter-spacing: -0.01em; }
.tag { font-size: 11px; color: var(--muted); border: 1px solid var(--line); padding: 2px 8px; border-radius: 999px; }
.proj .desc { color: var(--muted); font-size: 13px; margin: 10px 0 14px; }
.signals { display: flex; flex-direction: column; gap: 7px; }
.sig { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.sig .k { color: var(--muted); width: 74px; flex-shrink: 0; text-transform: capitalize; }
.sig .name { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sig .meta { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }
.pill { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; }
.pill.up { color: var(--up); background: rgba(43,213,118,0.12); }
.pill.degraded { color: var(--degraded); background: rgba(245,177,61,0.12); }
.pill.down { color: var(--down); background: rgba(255,84,112,0.12); }
.pill.unknown { color: var(--muted); background: rgba(139,151,189,0.12); }

.foot { margin-top: 28px; text-align: center; font-size: 12px; }

/* login */
.login-body { display: flex; align-items: center; justify-content: center; }
.login-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 32px; width: 100%; max-width: 360px; margin-top: 18vh; }
.login-card .brand { margin-bottom: 6px; }
.login-card p.muted { margin-bottom: 22px; font-size: 13px; }
.login-card label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.login-card input { width: 100%; background: var(--bg2); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 12px 14px; font-size: 15px; }
.login-card input:focus { outline: none; border-color: var(--accent); }
.login-card button { width: 100%; margin-top: 16px; background: var(--accent); color: #fff; border: 0; border-radius: 10px; padding: 12px; font-size: 15px; font-weight: 600; cursor: pointer; }
.login-card button:hover { background: #2569e0; }
.error { color: var(--down); font-size: 13px; margin-top: 12px; }

@media (max-width: 720px) {
  body { padding: 0 12px 40px; }
  .summary { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sys { grid-template-columns: 1fr; }
  .grid { grid-template-columns: 1fr; }
  .topbar { padding: 14px 2px; }
  .topbar h1 { font-size: 15px; }
  .tile .n { font-size: 26px; }
  .topbar-right { gap: 10px; }
  .topbar-right .muted { font-size: 12px; }
}

/* ===== command center ===== */
.brand-os { color: var(--accent); }
.tabs { display:flex; gap:4px; overflow-x:auto; padding:0 2px 10px; position:sticky; top:58px; background:linear-gradient(var(--bg),rgba(11,16,32,.6) 80%,transparent); z-index:4; }
.tabs button { background:transparent; border:0; color:var(--muted); font:inherit; font-size:14px; font-weight:500; padding:8px 14px; border-radius:8px; cursor:pointer; white-space:nowrap; }
.tabs button:hover { color:var(--text); }
.tabs button.active { background:var(--card2); color:var(--text); }
.card-section { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-bottom:14px; }
.card-section h2 { font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:12px; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.actions-row { display:flex; flex-wrap:wrap; gap:10px; }
.actions-row.tight { margin-top:12px; }
.btn { background:var(--accent); color:#fff; border:0; border-radius:9px; padding:10px 16px; font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.btn:hover { background:#2569e0; }
.btn:disabled { opacity:.6; cursor:default; }
.btn.sm { padding:6px 12px; font-size:13px; }
.btn.ghost { background:transparent; border:1px solid var(--line); color:var(--text); }
.activity { list-style:none; display:flex; flex-direction:column; gap:7px; font-size:13px; }
.activity li { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.leaderboard { list-style:none; display:flex; flex-direction:column; gap:8px; }
.leaderboard li { display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:8px; background:var(--bg2); }
.leaderboard .rank { width:22px; text-align:center; font-weight:700; color:var(--muted); }
.leaderboard .name { flex:1; }
.leaderboard .score { font-weight:700; font-variant-numeric:tabular-nums; }
.namelist { list-style:none; display:flex; flex-direction:column; gap:6px; }
.namelist li { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--line); }
.feed h3 { font-size:14px; margin:16px 0 6px; }
.feed li { margin-left:18px; font-size:14px; color:var(--muted); }
.feed p { font-size:14px; color:var(--muted); margin:2px 0; }
.feed b { color:var(--text); }
.stack { display:flex; flex-direction:column; gap:10px; }
.stack input, .stack textarea { background:var(--bg2); border:1px solid var(--line); color:var(--text); border-radius:9px; padding:11px 13px; font:inherit; font-size:16px; }
.stack input:focus, .stack textarea:focus { outline:none; border-color:var(--accent); }
.sm { font-size:12px; }
code { background:var(--bg2); padding:1px 5px; border-radius:4px; font-size:12px; }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); padding:12px 18px; border-radius:10px; font-size:14px; font-weight:600; z-index:20; box-shadow:0 8px 24px rgba(0,0,0,.35); }
.toast.ok { background:var(--up); color:#04210f; }
.toast.err { background:var(--down); color:#2b0410; }
@media (max-width:720px){ .two-col{ grid-template-columns:1fr; } .tabs{ top:52px; } }
.connect-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.connect-head h2 { margin:0; font-size:16px; text-transform:none; letter-spacing:0; color:var(--text); }
.card-section h2.sub { margin-top:16px; }
.minibars { display:flex; align-items:flex-end; gap:4px; height:90px; }
.minibars .mb { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:4px; }
.minibars .mb-fill { width:100%; min-height:2px; background:var(--accent); border-radius:3px 3px 0 0; }
.minibars .mb span { font-size:9px; color:var(--muted); }
/* read-only + email intelligence + whatsapp theme */
.readonly-badge-row { margin-bottom:12px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.sync-state { font-size:12px; color:var(--muted); }
.linkbtn { background:transparent; border:0; color:var(--accent); font:inherit; font-size:12px; cursor:pointer; padding:0; text-decoration:underline; }
.readonly-badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:var(--up); background:rgba(43,213,118,.12); padding:3px 10px; border-radius:999px; }
.accent-section { border-color: rgba(47,123,255,.45); }
.awaiting { list-style:none; display:flex; flex-direction:column; gap:8px; }
.awaiting li { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:8px; background:var(--bg2); }
.aw-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.aw-sub { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aw-days { font-size:12px; font-weight:600; color:var(--muted); white-space:nowrap; }
.aw-days.late { color:var(--down); }
.senti { display:flex; height:10px; border-radius:5px; overflow:hidden; background:var(--bg2); margin-bottom:8px; }
.senti span { min-width:2px; }
.senti .s-pos{ background:var(--up); } .senti .s-neu{ background:var(--line); } .senti .s-neg{ background:var(--down); }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { background:var(--bg2); border:1px solid var(--line); border-radius:999px; padding:3px 10px; font-size:12px; }
.chip b { color:var(--accent); }
.wa-theme .summary.wa-accent .tile .n { color:#25D366; }
.wa-card { border-color: rgba(37,211,102,.22); }
.wa-card h2 { color:#25D366; }
.wa-bubbles { display:flex; flex-direction:column; gap:8px; max-height:440px; overflow-y:auto; }
.wa-msg { max-width:82%; padding:8px 11px; border-radius:10px; font-size:13px; line-height:1.4; word-break:break-word; white-space:pre-wrap; }
.wa-msg .wa-meta { font-size:10px; opacity:.75; margin-bottom:3px; }
.wa-in { align-self:flex-start; background:var(--card2); border-top-left-radius:2px; }
.wa-out { align-self:flex-end; background:#075E54; color:#eaffe8; border-top-right-radius:2px; }
.aw-item { background:var(--bg2); border-radius:8px; margin-bottom:8px; }
.aw-item summary { display:flex; align-items:center; gap:10px; padding:9px 11px; cursor:pointer; list-style:none; }
.aw-item summary::-webkit-details-marker { display:none; }
.aw-snip { padding:0 12px 11px 12px; font-size:13px; color:var(--text); white-space:pre-wrap; }
.aw-reason { font-size:11.5px; color:#b07bff; font-style:italic; }
.pri-badge { font-size:10px; font-weight:700; padding:1px 6px; border-radius:6px; }
.pri-badge.high { color:var(--down); background:rgba(255,84,112,.14); }
.pri-badge.low { color:var(--muted); background:var(--card2); }
.aw-item.pri-hi { border-left:3px solid var(--down); }
.loadbar { height:6px; border-radius:4px; background:var(--bg2); overflow:hidden; margin:10px 0; }
.loadbar > span { display:block; height:100%; width:40%; border-radius:4px; background:linear-gradient(90deg,var(--accent),#5aa0ff); animation:load 1.2s ease-in-out infinite; }
@keyframes load { 0%{ margin-left:-40%; } 100%{ margin-left:100%; } }
/* hamburger + mobile module drawer */
.menu-btn { display:none; background:transparent; border:0; color:var(--text); font-size:24px; cursor:pointer; padding:0 10px 0 0; line-height:1; }
.drawer { position:fixed; top:0; left:0; height:100%; width:268px; background:var(--bg2); border-right:1px solid var(--line); transform:translateX(-100%); transition:transform .25s ease; z-index:30; padding:20px 12px; overflow-y:auto; box-shadow:0 0 40px rgba(0,0,0,.4); }
.drawer.open { transform:translateX(0); }
.drawer-head { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); padding:0 10px 12px; }
.drawer #drawerList button[data-tab], .drawer button[data-tab] { display:block; width:100%; text-align:left; background:transparent; border:0; color:var(--text); font:inherit; font-size:15px; font-weight:500; padding:13px 12px; border-radius:9px; cursor:pointer; margin-bottom:2px; }
.drawer button[data-tab]:hover, .drawer button[data-tab].active { background:var(--card2); color:#fff; }
.overlay { position:fixed; inset:0; background:rgba(4,8,20,.55); z-index:25; backdrop-filter:blur(2px); }
@media (max-width:720px){ .menu-btn{ display:block; } .tabs{ display:none; } }
@media (min-width:721px){ .drawer, .overlay{ display:none !important; } }
.aw-body { padding:0 12px 12px 12px; }
.aw-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; }
.ai-rec { margin:8px 0 6px; }
.ai-draft { width:100%; background:var(--bg); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:10px; font:inherit; font-size:13px; resize:vertical; margin-top:6px; }
/* mobile app shell: bottom nav, transitions, PWA polish */
.bottomnav { display:none; }
.panel-enter { animation: panelEnter .22s ease; }
@keyframes panelEnter { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
a.btn { text-decoration:none; display:inline-flex; align-items:center; gap:4px; }
@media (display-mode: standalone){ .topbar{ padding-top:calc(18px + env(safe-area-inset-top)); } }
@media (max-width:720px){
  .bottomnav { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:22; background:rgba(14,21,48,.97); backdrop-filter:blur(12px); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); }
  .bottomnav button { position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; background:transparent; border:0; color:var(--muted); font:inherit; font-size:10px; font-weight:600; padding:10px 2px 7px; cursor:pointer; }
  .bottomnav button svg { width:23px; height:23px; }
  .bottomnav button.active { color:var(--accent); }
  .bottomnav button.active::before { content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:26px; height:3px; border-radius:0 0 4px 4px; background:var(--accent); }
  .shortcut-bar { position:sticky; top:0; z-index:5; }
  body { padding-bottom:78px; }
  .foot { display:none; }
}
.modbar { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.segrow { display:inline-flex; background:var(--card); border:1px solid var(--line); border-radius:9px; padding:3px; gap:2px; flex-wrap:wrap; }
.seg { background:transparent; border:0; color:var(--muted); font:inherit; font-size:13px; font-weight:500; padding:6px 12px; border-radius:7px; cursor:pointer; }
.seg.active { background:var(--accent); color:#fff; }
.seg:hover:not(.active) { color:var(--text); }
/* calendar agenda */
.agenda { list-style:none; display:flex; flex-direction:column; gap:8px; }
.agenda li { display:flex; align-items:baseline; gap:12px; padding:8px 10px; border-radius:8px; background:var(--bg2); }
.agenda .ag-time { width:58px; flex-shrink:0; font-variant-numeric:tabular-nums; font-weight:600; color:var(--accent); }
.agenda .ag-title { flex:1; }
/* ===== UI elevation pass ===== */
.tile, .gauge, .card-section, .proj { box-shadow: 0 2px 10px rgba(2,6,20,.25); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.tile { position:relative; overflow:hidden; }
.tile::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:transparent; }
.tile.up::before{ background:var(--up);} .tile.down::before{ background:var(--down);} .tile.degraded::before,.tile.warn::before{ background:var(--degraded);} .tile.accent::before{ background:var(--accent);}
.tile:hover, .card-section:hover { box-shadow: 0 6px 22px rgba(2,6,20,.4); }
.topbar { border-bottom:1px solid var(--line); }
.brand h1 { background:linear-gradient(90deg,#fff,#cdd9ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.brand .brand-os { -webkit-text-fill-color:var(--accent); }
.card-section h2 { display:flex; align-items:center; gap:8px; }
.summary .tile .n { letter-spacing:-0.03em; }
.pill { letter-spacing:.02em; }
.email-full { margin-top:8px; padding:14px 16px; background:var(--bg); border:1px solid var(--line); border-radius:8px; font-size:14px; line-height:1.65; max-height:340px; overflow-y:auto; white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; }
/* email inbox client */
.em-filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px; }
.em-filters .conv-search { flex:1; min-width:180px; }
.em-sel { background:var(--card2); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:7px 10px; font:inherit; font-size:13px; }
.emrow { align-items:flex-start; }
.emrow .conv-name { font-size:14px; }
.emrow-snip { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.emrow.unreadrow .conv-name { font-weight:700; }
.emrow.unreadrow { background:rgba(47,123,255,.05); }
.em-pager { display:flex; justify-content:space-between; padding:8px; border-top:1px solid var(--line); }
.email-head { padding:14px 16px; border-bottom:1px solid var(--line); }
.email-subj { font-size:16px; font-weight:650; margin-bottom:4px; }
.email-actions { display:flex; gap:8px; flex-wrap:wrap; padding:10px 16px; border-bottom:1px solid var(--line); }
#emRead .email-full { margin:14px 18px; max-height:none; border:0; padding:0; background:transparent; font-size:15px; line-height:1.7; max-width:680px; }
.email-att { margin-top:12px; padding:10px; background:var(--card2); border-radius:8px; font-size:12.5px; }
.aw-item .aw-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.aw-item { padding:11px 12px; }
/* Needs-reply CEO action board */
.need-hero { display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin-bottom:16px; }
.need-hero-l { text-align:center; }
.need-hero-n { font-size:34px; font-weight:800; line-height:1; letter-spacing:-.03em; }
.need-hero-badge { font-size:13px; font-weight:700; padding:8px 14px; border-radius:999px; }
.need-hero-badge.hi { color:var(--down); background:rgba(255,84,112,.12); }
.need-hero-badge.ok { color:var(--up); background:rgba(43,213,118,.12); }
.need-hero-r { margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.need-grp { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700; margin:18px 2px 8px; }
.need-list { display:flex; flex-direction:column; gap:8px; }
.need-card { background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; transition:border-color .15s; }
.need-card.hi { border-left:3px solid var(--down); }
.need-card:hover { border-color:#34427a; }
.need-card summary { display:flex; align-items:center; gap:13px; padding:13px 15px; cursor:pointer; list-style:none; }
.need-card summary::-webkit-details-marker { display:none; }
.need-av { flex-shrink:0; width:42px; height:42px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--accent),#5aa0ff); }
.need-card.hi .need-av { background:linear-gradient(135deg,var(--down),#ff8aa0); }
.need-main { flex:1; min-width:0; }
.need-top { display:flex; align-items:center; gap:8px; }
.need-from { font-weight:650; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.need-chip { font-size:10px; font-weight:700; padding:1px 7px; border-radius:999px; flex-shrink:0; }
.need-chip.business { color:var(--accent); background:rgba(47,123,255,.12); }
.need-chip.personal { color:var(--up); background:rgba(43,213,118,.12); }
.need-time { margin-left:auto; font-size:12px; color:var(--muted); flex-shrink:0; }
.need-time.late { color:var(--down); font-weight:700; }
.need-subj { font-size:13.5px; margin:2px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.need-reason { font-size:12px; color:#b07bff; font-style:italic; }
.need-caret { flex-shrink:0; color:var(--muted); font-size:20px; transition:transform .2s; }
.need-card[open] .need-caret { transform:rotate(90deg); }
.need-body { padding:0 15px 15px; }
.need-body .email-full { margin:0 0 12px; max-height:300px; }
.need-actions { display:flex; flex-wrap:wrap; gap:8px; }
.n-not { position:relative; display:inline-block; }
.n-not-menu { position:absolute; bottom:calc(100% + 4px); right:0; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.35); z-index:5; min-width:170px; }
.n-not-menu button { background:none; border:none; color:var(--text); text-align:left; padding:9px 13px; font:inherit; font-size:13px; cursor:pointer; white-space:nowrap; }
.n-not-menu button:hover { background:var(--bg); }
.n-result:not(:empty) { margin-top:10px; }
.n-result .ai-draft { width:100%; background:var(--bg); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:10px; font:inherit; font-size:13px; resize:vertical; margin:6px 0; }
@media (max-width:720px){ .need-hero-r { margin-left:0; align-items:flex-start; } .need-subj { white-space:normal; } }

/* ============ LinkedIn feed ============ */
.li-feedwrap { display:grid; grid-template-columns:1fr 320px; gap:16px; align-items:start; }
.li-feedside { position:sticky; top:12px; }
.li-feedside .ana-sum { font-size:13.5px; line-height:1.55; }
.li-av { width:30px; height:30px; border-radius:50%; object-fit:cover; }
.cal-day { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:10px; }
.cal-day-h { font-weight:700; font-size:13.5px; margin-bottom:6px; }
.ag-cal { font-size:10px; font-weight:700; padding:1px 7px; border-radius:6px; background:var(--card2); color:var(--muted); flex-shrink:0; }
.ag-cal.iph { background:rgba(176,123,255,.16); color:#b07bff; }
.agenda li.ag-iph { background:rgba(176,123,255,.07); border-radius:7px; }
.agenda li { gap:8px; flex-wrap:wrap; }
.cal-next { background:linear-gradient(135deg,var(--accent),#7b5aff); color:#fff; border-radius:14px; padding:14px 18px; margin-bottom:14px; }
.cal-next-l { font-size:10px; font-weight:800; letter-spacing:.12em; opacity:.85; }
.cal-next-t { font-size:19px; font-weight:800; margin:3px 0; }
.cal-next-w { font-size:13px; opacity:.92; }
.cal-conns { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.cal-conn { font-size:12px; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:5px 12px; color:var(--muted); }
.cal-conn b { color:var(--accent); }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.cal-dow { text-align:center; font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; padding-bottom:4px; }
.cal-cell { min-height:64px; border:1px solid var(--line); border-radius:8px; padding:5px; background:var(--bg2); display:flex; flex-direction:column; gap:3px; overflow:hidden; }
.cal-cell.empty { background:transparent; border:0; }
.cal-cell.today { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.cal-cell.has { background:var(--card); }
.cal-n { font-size:12px; font-weight:700; color:var(--muted); }
.cal-cell.today .cal-n { color:var(--accent); }
.cal-evs { display:flex; flex-direction:column; gap:2px; }
.cal-ev { font-size:9.5px; line-height:1.25; background:rgba(47,123,255,.14); color:var(--accent); border-radius:4px; padding:1px 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-more { font-size:9px; color:var(--muted); }
@media (max-width:720px){ .cal-cell { min-height:48px; } .cal-ev { display:none; } .cal-cell.has::after { content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); } }
.trk-card { display:block; width:100%; text-align:left; cursor:pointer; }
.trk-card:hover { border-color:var(--accent); }
.trk-last { font-size:13.5px; line-height:1.5; color:var(--text); }
.trk-grp { font-size:10px; font-weight:700; color:var(--muted); background:var(--card2); padding:1px 7px; border-radius:5px; }
.trk-cat { font-size:10px; font-weight:700; color:var(--accent); background:rgba(47,123,255,.12); padding:1px 7px; border-radius:5px; }
.trk-card .li-score { min-width:30px; text-align:center; }
.trr-list { display:flex; flex-direction:column; gap:2px; margin-top:10px; max-height:60vh; overflow-y:auto; }
.trr-row { display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:8px; cursor:pointer; font-size:14px; }
.trr-row:hover { background:var(--bg2); }
.trr-name { flex:1; }
.trr-1 { font-size:10px; font-weight:700; color:var(--muted); background:var(--card2); padding:1px 7px; border-radius:5px; }
.li-meta { margin-left:auto; display:inline-flex; align-items:center; gap:8px; }
.li-score { font-weight:800; font-size:14px; padding:2px 9px; border-radius:999px; }
.li-score small { font-weight:600; font-size:9px; opacity:.7; }
.li-score.hi { color:var(--up); background:rgba(43,213,118,.14); }
.li-score.mid { color:var(--accent); background:rgba(47,123,255,.12); }
.li-score.lo { color:var(--muted); background:var(--card2); }
.li-why { font-size:12px; color:#b07bff; font-style:italic; margin:0 0 6px; }
.li-reply:not(:empty) { margin-top:10px; }
.li-reply-text { width:100%; background:var(--bg); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:10px; font:inherit; font-size:13.5px; resize:vertical; margin-bottom:8px; }
@media (max-width:900px){ .li-feedwrap { grid-template-columns:1fr; } .li-feedside { position:static; } }

/* ============ My Context ============ */
.ctx-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.ctx-hero { display:flex; gap:24px; align-items:center; flex-wrap:wrap; background:linear-gradient(135deg,var(--card),rgba(176,123,255,.06)); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin-bottom:16px; }
.ctx-circle { display:flex; flex-direction:column; align-items:center; gap:12px; flex-shrink:0; }
.ctx-donut { width:190px; height:190px; }
.ctx-c1 { font-size:32px; font-weight:800; fill:var(--text); }
.ctx-c2 { font-size:11px; fill:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.ctx-legend { display:flex; flex-wrap:wrap; gap:6px 12px; justify-content:center; max-width:210px; }
.ctx-leg { font-size:12px; color:var(--muted); display:inline-flex; align-items:center; gap:5px; }
.ctx-leg i { width:10px; height:10px; border-radius:3px; display:inline-block; }
.ctx-leg b { color:var(--text); }
.ctx-hero-main { flex:1; min-width:260px; }
.ctx-headline { font-size:21px; font-weight:800; letter-spacing:-.02em; margin-bottom:8px; }
.ctx-state { font-size:14.5px; line-height:1.6; color:var(--text); margin:0 0 14px; }
.ctx-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.ctx-stats .tile { padding:11px 8px; }
.md-nav { display:flex; align-items:center; gap:8px; } .md-date { font-weight:600; font-size:14px; min-width:96px; text-align:center; }
@media (max-width:760px){ .ctx-hero { flex-direction:column; } .ctx-stats { grid-template-columns:repeat(2,1fr); } }

/* ============ Insights tab ============ */
.ins-hero { display:flex; align-items:center; gap:20px; flex-wrap:wrap; background:linear-gradient(135deg,var(--card),rgba(47,123,255,.06)); border:1px solid var(--line); border-radius:var(--radius); padding:18px 22px; margin-bottom:14px; }
.ins-hero-main { display:flex; align-items:center; gap:16px; flex:1; min-width:240px; }
.ins-big { font-size:48px; font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--down); }
.ins-big.clear { color:var(--up); }
.ins-hero-t { font-size:15px; font-weight:600; margin-bottom:8px; }
.ins-hi { color:var(--down); font-weight:800; }
.ins-chips { display:flex; gap:8px; flex-wrap:wrap; }
.ins-chip { font-size:12.5px; font-weight:600; padding:5px 12px; border-radius:999px; background:var(--bg2); border:1px solid var(--line); }
.ins-biz { margin-left:auto; text-align:right; line-height:1.5; max-width:260px; }
.ins-biz-note { opacity:.7; font-size:11px; }
.ins-pulse { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:16px; }
.ins-pulse .tile { padding:12px 10px; }
.ins-grp { font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:700; margin:14px 2px 8px; }
.ins-grp:first-child { margin-top:0; }
.needs-why { display:block; font-size:11.5px; color:#b07bff; font-style:italic; margin-top:2px; }
.mt-count { display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; padding:0 7px; border-radius:999px; background:var(--accent); color:#fff; font-size:13px; font-weight:700; vertical-align:middle; }
.fu-list li { display:flex; align-items:center; gap:10px; }
.fu-list .needs-todo { flex-shrink:0; }
@media (max-width:860px){ .ins-pulse { grid-template-columns:repeat(3,1fr); } .ins-biz { margin-left:0; text-align:left; } }
@media (max-width:560px){ .ins-pulse { grid-template-columns:repeat(2,1fr); } }

/* ============ Learning tab ============ */
.lrn-hero { display:flex; gap:22px; align-items:center; background:linear-gradient(135deg,var(--card),rgba(47,123,255,.06)); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; }
.lrn-ring { flex-shrink:0; width:118px; height:118px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.lrn-ring-in { width:90px; height:90px; border-radius:50%; background:var(--card); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.lrn-score { font-size:34px; font-weight:800; line-height:1; letter-spacing:-.03em; }
.lrn-hero-main { flex:1; min-width:0; }
.lrn-bd { display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; margin:4px 0 12px; }
.lrn-bd-bar { height:6px; background:var(--line); border-radius:999px; overflow:hidden; margin-bottom:3px; }
.lrn-bd-bar span { display:block; height:100%; background:var(--accent); border-radius:999px; }
.lrn-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.lrn-ch { display:flex; flex-wrap:wrap; gap:10px; }
.lrn-ch-i { background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px 16px; text-align:center; min-width:96px; }
.lrn-ch-n { font-size:22px; font-weight:700; }
.lrn-portrait .lrn-summary { font-size:15px; line-height:1.55; margin:2px 0 14px; }
.lrn-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.lrn-lbl { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700; margin-bottom:7px; }
.lrn-txt { font-size:13.5px; line-height:1.5; margin:0; color:var(--text); }
.lrn-chip { display:inline-block; font-size:12.5px; padding:4px 11px; border-radius:999px; margin:0 6px 6px 0; background:var(--bg); border:1px solid var(--line); }
.lrn-chip.tone { color:var(--accent); border-color:rgba(47,123,255,.35); background:rgba(47,123,255,.08); }
.lrn-list { list-style:none; padding:0; margin:0; }
.lrn-list li { padding:6px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.lrn-list li:last-child { border-bottom:none; }
.lrn-profile .lrn-para { background:var(--bg); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:10px; padding:14px 16px; font-size:14px; line-height:1.6; font-style:italic; margin:10px 0 14px; }
.lrn-samples { list-style:none; padding:0; margin:0; }
.lrn-samples li { padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; color:var(--muted); }
.lrn-samples li:last-child { border-bottom:none; }
.lrn-ch-tag, .lrn-samples .lrn-ch-tag { display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); background:rgba(47,123,255,.1); padding:1px 7px; border-radius:6px; margin-right:8px; }
@media (max-width:720px){ .lrn-hero { flex-direction:column; text-align:center; } .lrn-bd, .lrn-grid2 { grid-template-columns:1fr; } .lrn-actions { justify-content:center; } }

/* ============ To-do archive + Reporting ============ */
.todo-expire { margin:-6px 0 14px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.exp-inp { width:52px; background:var(--bg2); border:1px solid var(--line); color:var(--text); border-radius:7px; padding:4px 7px; font:inherit; text-align:center; }
.todo-deleg { background:transparent; border:1px solid var(--line); color:var(--muted); border-radius:7px; padding:3px 8px; font-size:13px; cursor:pointer; }
.todo-deleg:hover { color:var(--accent); border-color:var(--accent); }
.deleg-sel { background:var(--bg2); border:1px solid var(--accent); color:var(--text); border-radius:7px; padding:4px 7px; font:inherit; font-size:12px; }
.todolist li.expiring { background:rgba(255,84,112,.06); border:1px solid rgba(255,84,112,.25); border-radius:8px; }
.todo-age { font-size:11.5px; margin-top:5px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.todo-age.expiring { color:var(--down); }
.todo-age.snoozed, .todo-age.kept { color:var(--muted); }
.age-acts { display:inline-flex; gap:6px; flex-wrap:wrap; }
.age-btn { font:inherit; font-size:11px; font-weight:600; border:1px solid var(--line); background:var(--card); color:var(--text); border-radius:7px; padding:3px 9px; cursor:pointer; }
.age-btn.keep:hover { border-color:var(--up); color:var(--up); }
.age-btn.later:hover { border-color:var(--accent); color:var(--accent); }
.age-btn.ignore:hover { border-color:var(--down); color:var(--down); }
.dc-row { display:flex; align-items:center; justify-content:space-between; padding:9px 4px; border-bottom:1px solid var(--line); font-size:14px; }
.dc-row:last-child { border-bottom:0; }
.deleg-compose { margin-top:10px; background:var(--bg); border:1px solid var(--accent); border-radius:10px; padding:12px; }
.dc-to { font-size:12px; color:var(--muted); margin-bottom:8px; }
.dc-from-l { display:block; font-size:12px; color:var(--muted); margin-bottom:8px; }
.dc-from { background:var(--bg2); border:1px solid var(--line); color:var(--text); border-radius:7px; padding:6px 9px; font:inherit; font-size:12.5px; margin-left:6px; max-width:100%; }
.dc-subj, .dc-body { width:100%; background:var(--bg2); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:9px 11px; font:inherit; font-size:13.5px; margin-bottom:8px; }
.dc-body { resize:vertical; line-height:1.5; }
.tm-row { display:inline-flex; gap:6px; flex-wrap:wrap; }
.tm-tag { background:transparent; border:1px solid var(--line); color:var(--muted); border-radius:999px; padding:3px 10px; font:inherit; font-size:11.5px; font-weight:600; cursor:pointer; white-space:nowrap; }
.tm-tag.keep:hover { color:var(--up); border-color:var(--up); background:rgba(43,213,118,.1); }
.tm-tag.later:hover { color:var(--accent); border-color:var(--accent); background:rgba(47,123,255,.1); }
.tm-tag.ignore:hover { color:var(--down); border-color:var(--down); background:rgba(255,84,112,.1); }
.todo-archive { margin-top:8px; }
.todo-archive > summary { cursor:pointer; font-size:12px; color:var(--muted); padding:6px 4px; list-style:none; }
.todo-archive > summary::-webkit-details-marker { display:none; }
.todo-archive[open] > summary { color:var(--text); }
.rep-card .rep-top { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.rep-name { flex:1; background:transparent; border:0; border-bottom:1px solid var(--line); color:var(--text); font:inherit; font-size:16px; font-weight:700; padding:4px 0; }
.rep-name:focus { outline:none; border-bottom-color:var(--accent); }
.rep-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:12px; }
.rep-grid label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); }
.rep-grid input, .rep-grid select { background:var(--bg2); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:9px 11px; font:inherit; font-size:14px; }
.rep-days { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.rep-day { display:inline-flex; align-items:center; gap:5px; font-size:12px; background:var(--bg2); border:1px solid var(--line); padding:5px 9px; border-radius:8px; cursor:pointer; }
.rep-secs { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:12px; font-size:13.5px; }
.rep-secs label { display:inline-flex; align-items:center; gap:7px; cursor:pointer; }
.rep-when { margin-left:auto; }
.rep-preview:not(:empty) { margin-top:12px; }
.rep-frame { background:#fff; border-radius:10px; padding:6px; max-height:480px; overflow-y:auto; }
@media (max-width:720px){ .rep-grid { grid-template-columns:1fr; } }

/* ============ Notifications bell ============ */
.bell-btn { position:relative; background:transparent; border:0; color:var(--text); cursor:pointer; padding:6px; display:inline-flex; align-items:center; border-radius:8px; }
.bell-btn:hover { background:var(--card2); }
.bell-badge { position:absolute; top:-2px; right:-2px; min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:var(--accent); color:#fff; font-size:10px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.bell-badge.hi { background:var(--down); }
.notif-panel { position:fixed; top:60px; right:16px; width:340px; max-width:calc(100vw - 24px); max-height:70vh; overflow-y:auto; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:0 16px 50px rgba(0,0,0,.5); z-index:210; padding:8px; }
.notif-head { font-weight:700; font-size:13px; padding:8px 10px; display:flex; align-items:center; gap:8px; }
.notif-hi { color:var(--down); font-size:11px; font-weight:800; background:rgba(255,84,112,.12); padding:2px 8px; border-radius:999px; }
.notif-item { display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:0; color:var(--text); padding:10px; border-radius:9px; cursor:pointer; font:inherit; font-size:13px; }
.notif-item:hover { background:var(--bg2); }
.notif-ic { flex-shrink:0; }
.notif-empty { padding:18px; text-align:center; color:var(--muted); font-size:13px; }
/* ============ Shortcuts bar ============ */
.shortcut-bar { display:flex; align-items:center; gap:8px; padding:8px 24px; border-bottom:1px solid var(--line); overflow-x:auto; -webkit-overflow-scrolling:touch; background:var(--bg); }
.sc-label { font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:700; flex-shrink:0; }
.sc-chip { display:inline-flex; align-items:center; gap:6px; background:var(--card); border:1px solid var(--line); color:var(--text); border-radius:999px; padding:6px 13px; font:inherit; font-size:13px; cursor:pointer; white-space:nowrap; flex-shrink:0; }
.sc-chip:hover { border-color:var(--accent); color:var(--accent); }
.sc-chip svg { width:15px; height:15px; }
.sc-edit { background:none; border:0; color:var(--muted); cursor:pointer; font:inherit; font-size:12px; flex-shrink:0; margin-left:auto; }
.sc-edit:hover { color:var(--accent); }
.sc-modal { height:auto; max-height:80vh; }
.sc-pick { padding:14px 18px; overflow-y:auto; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.sc-opt { display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:9px; cursor:pointer; font-size:14px; }
.sc-opt:hover { background:var(--bg2); }
.sc-opt svg { width:17px; height:17px; }
@media (max-width:720px){ .shortcut-bar { padding:8px 12px; } .sc-pick { grid-template-columns:1fr; } .notif-panel { top:54px; right:8px; left:8px; width:auto; } }

/* ============ Ask Analytica chatbot ============ */
.ask-btn { background:linear-gradient(135deg,var(--accent),#7b5aff); color:#fff; border:0; border-radius:999px; font:inherit; font-size:13px; font-weight:700; padding:8px 16px; cursor:pointer; white-space:nowrap; box-shadow:0 2px 10px rgba(47,123,255,.35); }
.ask-btn:hover { filter:brightness(1.08); }
.ask-overlay { position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.5); backdrop-filter:blur(3px); display:flex; align-items:flex-start; justify-content:center; padding:7vh 16px 16px; }
.ask-overlay[hidden] { display:none !important; }
.ask-modal { width:100%; max-width:680px; height:min(76vh,720px); background:var(--card); border:1px solid var(--line); border-radius:20px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 80px rgba(0,0,0,.5); animation:sheetUp .22s ease; }
.ask-head { display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line); }
.ask-title { font-weight:800; font-size:16px; background:linear-gradient(135deg,var(--accent),#7b5aff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.ask-sub { flex:1; }
.ask-close { background:transparent; border:0; color:var(--muted); font-size:18px; cursor:pointer; }
.ask-log { flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:14px; }
.ask-welcome { margin:auto; text-align:center; max-width:440px; color:var(--muted); }
.ask-orb { width:56px; height:56px; margin:0 auto 14px; border-radius:50%; background:linear-gradient(135deg,var(--accent),#7b5aff); display:flex; align-items:center; justify-content:center; font-size:26px; color:#fff; box-shadow:0 6px 24px rgba(47,123,255,.45); }
.ask-chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:16px; }
.ask-chip { background:var(--bg2); border:1px solid var(--line); color:var(--text); border-radius:999px; padding:8px 14px; font:inherit; font-size:13px; cursor:pointer; }
.ask-chip:hover { border-color:var(--accent); color:var(--accent); }
.ask-msg { display:flex; }
.ask-msg.me { justify-content:flex-end; }
.ask-bubble { max-width:84%; padding:11px 14px; border-radius:16px; font-size:14px; line-height:1.55; }
.ask-msg.me .ask-bubble { background:linear-gradient(135deg,var(--accent),#5aa0ff); color:#fff; border-bottom-right-radius:5px; }
.ask-msg.ai .ask-bubble { background:var(--bg2); border:1px solid var(--line); border-bottom-left-radius:5px; }
.ask-msg.ai .ask-bubble p { margin:0 0 7px; } .ask-msg.ai .ask-bubble p:last-child { margin:0; }
.ask-msg.ai .ask-bubble ul { margin:4px 0; padding-left:18px; } .ask-msg.ai .ask-bubble li { margin:2px 0; }
.ask-typing { display:inline-flex; gap:4px; } .ask-typing i { width:7px; height:7px; border-radius:50%; background:var(--muted); animation:askb 1s infinite; } .ask-typing i:nth-child(2){animation-delay:.15s} .ask-typing i:nth-child(3){animation-delay:.3s}
@keyframes askb { 0%,60%,100%{opacity:.3;transform:translateY(0)} 30%{opacity:1;transform:translateY(-4px)} }
.ask-form { display:flex; gap:10px; padding:14px 16px; border-top:1px solid var(--line); }
.ask-form input { flex:1; background:var(--bg2); border:1px solid var(--line); color:var(--text); border-radius:12px; padding:12px 15px; font:inherit; font-size:15px; }
.ask-form input:focus { outline:none; border-color:var(--accent); }
@media (max-width:720px){ .ask-modal { height:88vh; max-width:none; border-radius:16px; } .ask-overlay { padding:6vh 8px 8px; } .ask-btn { padding:7px 12px; font-size:12px; } .ask-sub { display:none; } }

/* ============ Users & Access ============ */
.u-invite { display:flex; flex-wrap:wrap; gap:10px; margin:10px 0; }
.u-invite input, .u-invite select { background:var(--bg2); border:1px solid var(--line); color:var(--text); border-radius:9px; padding:10px 13px; font:inherit; }
.u-invite input { flex:1; min-width:160px; }
.u-table { width:100%; border-collapse:collapse; }
.u-table th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--line); }
.u-table td { padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
.u-table tr.u-off { opacity:.5; }
.u-role { background:var(--bg2); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:6px 9px; font:inherit; font-size:13px; }
.u-badge { font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; }
.u-badge.ok { color:var(--up); background:rgba(43,213,118,.12); }
.u-badge.off { color:var(--muted); background:var(--card2); }
.u-badge.admin { color:var(--accent); background:rgba(47,123,255,.12); }
.btn.xs { padding:5px 10px; font-size:12px; }
.u-roles { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:12px 0 16px; }
.u-tab { display:flex; align-items:center; gap:8px; padding:7px 0; font-size:14px; cursor:pointer; }
.todo-done-h { margin:16px 0 6px; }
@media (max-width:720px){ .u-roles { grid-template-columns:1fr; } .u-invite input, .u-invite select { width:100%; flex:none; } }

/* ============ shell layout (sidebar + subtabs) ============ */
.topbar { padding: 16px 24px; gap:16px; }
.crumb { flex:1; font-size:13px; color:var(--muted); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shell { display:flex; align-items:flex-start; }
.sidebar { position:sticky; top:65px; flex:0 0 232px; height:calc(100vh - 65px); padding:18px 14px; overflow-y:auto; border-right:1px solid var(--line); }
.sidebar-nav { display:flex; flex-direction:column; gap:3px; }
/* collapsible nav groups */
.nav-plain { display:flex; flex-direction:column; gap:3px; }
.nav-group { display:flex; flex-direction:column; }
.nav-group-h { display:flex; align-items:center; justify-content:space-between; width:100%; background:transparent; border:0; cursor:pointer; color:var(--muted); font:inherit; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; padding:12px 13px 5px; }
.nav-group-h:hover { color:var(--text); }
.nav-group-h .nav-chev { width:13px; height:13px; opacity:.6; transition:transform .18s ease; }
.nav-group.collapsed .nav-chev { transform:rotate(-90deg); }
.nav-group-items { display:flex; flex-direction:column; gap:3px; }
.nav-group.collapsed .nav-group-items { display:none; }
/* icon-only rail (721–980px): drop headers, keep sections visible with a divider */
@media (max-width:980px){
  .nav-group-h span, .nav-group-h .nav-chev { display:none; }
  .nav-group-h { padding:6px 0 0; }
  .nav-group { border-top:1px solid var(--line-soft); margin-top:4px; padding-top:2px; }
  .nav-group.collapsed .nav-group-items { display:flex; }
}
.navitem { display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:transparent; border:0; color:var(--muted); font:inherit; font-size:14.5px; font-weight:550; padding:11px 13px; border-radius:10px; cursor:pointer; transition:background .15s, color .15s; }
.navitem svg { flex:0 0 20px; opacity:.85; }
.navitem:hover { color:var(--text); background:var(--card); }
.navitem.active { color:#fff; background:linear-gradient(90deg, var(--accent), #4f8dff); box-shadow:0 4px 14px rgba(47,123,255,.3); }
body[data-theme="light"] .navitem.active { color:#fff; }
.content { flex:1; min-width:0; padding:18px 24px 48px; }
.subtabs { display:flex; gap:6px; overflow-x:auto; margin-bottom:18px; border-bottom:1px solid var(--line); padding-bottom:0; position:sticky; top:65px; background:var(--bg); z-index:3; }
body[data-theme="light"] .subtabs { background:var(--bg); }
.subtab { display:inline-flex; align-items:center; gap:7px; background:transparent; border:0; border-bottom:2px solid transparent; color:var(--muted); font:inherit; font-size:14px; font-weight:550; padding:10px 14px; cursor:pointer; white-space:nowrap; transition:color .15s, border-color .15s; }
.subtab svg { width:17px; height:17px; opacity:.8; }
.subtab:hover { color:var(--text); }
.subtab.active { color:var(--accent); border-bottom-color:var(--accent); }
#main { min-height:50vh; }

/* data tables */
.dtable { width:100%; border-collapse:collapse; font-size:13.5px; margin-top:4px; }
.dtable th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; padding:8px 10px; border-bottom:1px solid var(--line); }
.dtable td { padding:10px; border-bottom:1px solid var(--line); }
.dtable tbody tr { transition:background .12s; }
.dtable tbody tr:hover { background:var(--bg2); }
.dtable tr:last-child td { border-bottom:0; }

/* settings */
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); }
.setting-row:last-child { border-bottom:0; }
.switch { position:relative; display:inline-block; width:44px; height:24px; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; inset:0; background:var(--card2); border:1px solid var(--line); border-radius:999px; cursor:pointer; transition:.2s; }
.slider::before { content:""; position:absolute; height:16px; width:16px; left:3px; top:3px; background:var(--muted); border-radius:50%; transition:.2s; }
.switch input:checked + .slider { background:var(--accent); border-color:var(--accent); }
.switch input:checked + .slider::before { transform:translateX(20px); background:#fff; }

/* instagram + linkedin themes */
.ig-theme .summary.wa-accent .tile .n { color:#E1306C; }
.ig-theme .wa-card { border-color:rgba(225,48,108,.22); }
.ig-theme .wa-card h2 { color:#E1306C; }
.ig-theme .wa-out { background:#C13584; color:#fff; }
/* Instagram account + posts grid */
.ig-profile { display:flex; align-items:center; gap:18px; }
.ig-pic { width:84px; height:84px; border-radius:50%; object-fit:cover; border:3px solid #E1306C; flex-shrink:0; }
.ig-meta { min-width:0; }
.ig-counts { display:flex; gap:16px; font-size:13px; color:var(--muted); margin:6px 0; flex-wrap:wrap; }
.ig-counts b { color:var(--text); }
.ig-bio { font-size:13px; white-space:pre-wrap; margin-top:4px; }
.ig-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px; }
.ig-post { position:relative; aspect-ratio:1; background:var(--card2); border-radius:8px; overflow:hidden; display:block; }
.ig-post img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s; }
.ig-post:hover img { transform:scale(1.06); }
.ig-post.noimg::after { content:"📷"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:28px; opacity:.4; }
.ig-multi { position:absolute; top:6px; right:8px; color:#fff; font-size:14px; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.ig-stats { position:absolute; left:0; right:0; bottom:0; padding:14px 8px 6px; font-size:12px; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.65)); opacity:0; transition:opacity .2s; }
.ig-post:hover .ig-stats { opacity:1; }
@media (max-width:720px){ .ig-grid { grid-template-columns:repeat(3,1fr); } .ig-stats { opacity:1; font-size:10px; } .ig-pic { width:64px; height:64px; } }
.li-theme .wa-out { background:#0a66c2; color:#fff; }
.li-profile { display:flex; align-items:center; gap:16px; }
.li-pic { width:64px; height:64px; border-radius:50%; object-fit:cover; border:2px solid var(--line); }
.wa-who { color:var(--accent); font-weight:650; }
.li-theme .wa-who { color:#4f9dff; }

/* drawer groups (mobile) */
.drawer-group { margin-bottom:6px; }
.drawer-plain { margin-bottom:6px; }
.drawer-group-h { display:flex; align-items:center; justify-content:space-between; width:100%; background:transparent; border:0; cursor:pointer; font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); padding:10px 12px 5px; }
.drawer-group-h:hover { color:var(--text); }
.drawer-group-h .nav-chev { width:14px; height:14px; opacity:.6; transition:transform .18s ease; }
.drawer-group.collapsed .nav-chev { transform:rotate(-90deg); }
.drawer-group.collapsed .drawer-group-items { display:none; }
.drawer button[data-tab] { display:flex; align-items:center; gap:10px; }
.drawer button[data-tab] svg { width:18px; height:18px; opacity:.8; }

/* responsive */
@media (max-width:980px){ .sidebar { flex-basis:64px; padding:18px 8px; } .navitem span { display:none; } .navitem { justify-content:center; padding:12px 0; } }
@media (max-width:720px){
  .topbar { padding:14px 14px; }
  .crumb { display:none; }
  .sidebar { display:none; }
  .content { padding:14px 14px 40px; }
  .subtabs { top:56px; }
  body { padding-bottom:78px; }
}
@media (min-width:721px){ .menu-btn { display:none; } }

/* ============ chat interface ============ */
.chatwrap { display:grid; grid-template-columns:320px 1fr; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; min-height:540px; background:var(--card); }
.convlist { border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; background:var(--bg2); }
.convhead { padding:10px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:8px; }
.kind-chip { align-self:flex-start; font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; }
.kind-chip.personal { color:var(--up); background:rgba(43,213,118,.12); }
.kind-chip.business { color:var(--accent); background:rgba(47,123,255,.12); }
.conv-search { width:100%; background:var(--card2); border:1px solid var(--line); color:var(--text); border-radius:9px; padding:9px 13px; font:inherit; font-size:13.5px; }
.conv-search::placeholder { color:var(--muted); opacity:.95; }
.conv-search:focus { outline:none; border-color:var(--accent); background:var(--card); box-shadow:0 0 0 3px rgba(47,123,255,.16); }
body[data-theme="dark"] .conv-search, body[data-theme="dim"] .conv-search { background:#1c2748; color:#eef2ff; }
.conv-search:focus { outline:none; border-color:var(--accent); }
.convscroll { overflow-y:auto; max-height:560px; }
.conv { display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:transparent; border:0; border-bottom:1px solid var(--line); padding:11px 13px; cursor:pointer; transition:background .12s; }
.conv:hover { background:var(--card); }
.conv.active { background:var(--card2); }
.conv-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.conv-name { font-weight:600; font-size:14px; display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-last { font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-side { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.conv-time { font-size:11px; color:var(--muted); }
.unread-badge { background:var(--accent); color:#fff; font-size:10px; font-weight:700; min-width:18px; height:18px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; padding:0 5px; }
.avatar { width:42px; height:42px; border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--card2); }
.avatar.lg { width:48px; height:48px; }
.avatar.fallback { display:inline-flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--accent),#5aa0ff); }
.tagdot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.tagdot.business { background:var(--accent); } .tagdot.personal { background:var(--up); }
.threadpane { display:flex; flex-direction:column; min-width:0; }
.thread-empty { flex:1; display:flex; align-items:center; justify-content:center; }
.thread-head { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--card); z-index:2; }
.thread-back { display:none; background:transparent; border:0; color:var(--text); font-size:26px; line-height:1; cursor:pointer; padding:0 4px 0 0; }
.thread-name { font-weight:650; font-size:15px; flex:1; }
.thread-msgs { flex:1; overflow-y:auto; max-height:420px; padding:16px; display:flex; flex-direction:column; gap:8px; }
.thread-msgs .wa-msg { max-width:74%; }
.wa-msg .wa-who { font-size:11px; font-weight:700; color:var(--accent); margin-bottom:3px; }
.wa-msg .wa-time { font-size:10px; opacity:.6; margin-top:3px; text-align:right; }
.wa-wrap { display:flex; flex-direction:column; max-width:74%; }
.wa-wrap.out { align-self:flex-end; align-items:flex-end; }
.wa-wrap.in { align-self:flex-start; align-items:flex-start; }
.wa-wrap .wa-msg { max-width:100%; }
.wa-msg { position:relative; }
.wa-wrap:has(.msg-rx) { margin-bottom:12px; }
.msg-rx { position:absolute; bottom:-11px; right:6px; display:inline-flex; align-items:center; gap:1px; background:var(--card2); border:1px solid var(--line); border-radius:12px; padding:1px 6px; font-size:13px; line-height:1.5; box-shadow:0 1px 4px rgba(0,0,0,.28); cursor:pointer; z-index:2; }
.wa-wrap.in .msg-rx { left:6px; right:auto; }
.msg-rx b { font-size:11px; font-weight:600; opacity:.7; }
.msg-rx:hover { border-color:var(--accent); }
.wa-theme .msg-rx { background:#fff; border-color:#e0e0e0; color:#111b21; }
body[data-theme="dark"] .wa-theme .msg-rx, body[data-theme="dim"] .wa-theme .msg-rx { background:#2a3942; border-color:#222d34; color:#e9edef; }
.rx-pop { position:fixed; z-index:60; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:8px 10px; box-shadow:0 8px 28px rgba(0,0,0,.45); max-width:260px; font-size:13px; }
.rx-pop-h { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:5px; }
.rx-pop-row { padding:3px 0; white-space:pre-wrap; }
.wa-quote { display:flex; flex-direction:column; gap:1px; border-left:3px solid var(--accent); background:rgba(0,0,0,.06); border-radius:5px; padding:5px 9px; margin-bottom:5px; font-size:12.5px; line-height:1.35; max-width:100%; overflow:hidden; }
.wa-quote b { color:var(--accent); font-size:12px; }
.wa-quote span { color:inherit; opacity:.75; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wa-theme .wa-quote { border-left-color:#06cf9c; background:rgba(0,0,0,.05); }
body[data-theme="dark"] .wa-theme .wa-quote, body[data-theme="dim"] .wa-theme .wa-quote { background:rgba(255,255,255,.08); }
.wa-theme .wa-quote b { color:#06cf9c; }
.msg-img { max-width:220px; max-height:260px; border-radius:8px; display:block; margin-bottom:4px; cursor:pointer; }
.msg-audio { height:36px; max-width:240px; margin-bottom:4px; display:block; }
.msg-tx { background:transparent; border:1px solid var(--line); color:var(--accent); border-radius:8px; font:inherit; font-size:11px; padding:3px 8px; cursor:pointer; margin-top:2px; }
.msg-tx:hover { border-color:var(--accent); }
.tx-out:not(:empty) { margin-top:5px; font-size:12.5px; font-style:italic; opacity:.9; }
/* heat map */
.heatmap { display:grid; grid-template-columns:repeat(24,1fr); gap:3px; }
.heat-cell { aspect-ratio:1; border-radius:3px; background:var(--card2); position:relative; min-height:18px; }
.heat-1 { background:rgba(47,123,255,.30); } .heat-2 { background:rgba(47,123,255,.52); } .heat-3 { background:rgba(47,123,255,.74); } .heat-4 { background:var(--accent); }
.heat-lbl { position:absolute; bottom:-15px; left:0; font-size:9px; color:var(--muted); }
.heatmap { margin-bottom:18px; }
/* My Day — hourly bar chart + date nav */
.myday-nav { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.myday-date { flex:1; text-align:center; font-size:15px; }
.mdchart { display:grid; grid-template-columns:repeat(24,1fr); gap:3px; align-items:end; height:130px; padding-top:6px; }
.mdbar { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:3px; }
.mdbar-stack { width:100%; max-width:16px; flex:1; display:flex; flex-direction:column; justify-content:flex-end; border-radius:4px 4px 0 0; overflow:hidden; background:var(--card2); }
.mdbar-sent { width:100%; background:var(--accent); }
.mdbar-recv { width:100%; background:#5a6b9e; }
.mdbar.peak .mdbar-sent { background:var(--up); }
.mdbar.peak .mdbar-stack { box-shadow:0 0 0 2px var(--up); }
.mdbar-lbl { font-size:9px; color:var(--muted); }
.mdlegend { display:flex; gap:16px; margin-top:12px; font-size:12px; color:var(--muted); }
.mdlegend .sw { display:inline-block; width:11px; height:11px; border-radius:3px; vertical-align:-1px; margin-right:4px; }
.mdlegend .sw.sent { background:var(--accent); } .mdlegend .sw.recv { background:#5a6b9e; }
.msg-file { font-size:12px; opacity:.85; text-decoration:none; color:inherit; }
.draftbox { border-top:1px solid var(--line); padding:10px 12px; background:var(--bg2); }
.draftbox textarea { width:100%; background:var(--bg); border:1px solid var(--line); color:var(--text); border-radius:9px; padding:9px 11px; font:inherit; font-size:14px; resize:vertical; }
.draft-actions { display:flex; gap:8px; margin-top:8px; align-items:center; }
.cfg-icon { flex-shrink:0; width:34px; height:34px; border-radius:9px; background:transparent; border:1px solid var(--line); color:var(--muted); font-size:16px; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.cfg-icon:hover { color:var(--accent); border-color:var(--accent); }
.cfg-icon.on { color:var(--accent); border-color:var(--accent); background:var(--card2); }
.draft-actions .readonly-badge.sm { margin-left:auto; font-size:11px; opacity:.7; }
.ai-badge { font-size:11px; font-weight:700; color:#b07bff; }
/* mobile master-detail: show list OR thread, full height, single scroll each */
@media (max-width:860px){
  .chatwrap { grid-template-columns:1fr; min-height:auto; height:calc(100dvh - 150px); position:relative; }
  .convlist { border-right:0; }
  .convscroll { max-height:none; flex:1; -webkit-overflow-scrolling:touch; }
  .threadpane { display:none; }
  .chatwrap.thread-open .convlist { display:none; }
  .chatwrap.thread-open .threadpane { display:flex; height:100%; }
  .thread-msgs { max-height:none; flex:1; -webkit-overflow-scrolling:touch; }
  .thread-back { display:block; }
}

/* LinkedIn pages + posts */
.pagegrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
.pagecard { border:1px solid var(--line); border-radius:10px; }
.pagecard.active { border-color:var(--accent); }
.postcard { border:1px solid var(--line); border-radius:10px; padding:14px; margin-bottom:10px; }
.post-text { font-size:14px; line-height:1.5; white-space:pre-wrap; }
.post-stats { display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; font-size:12.5px; color:var(--muted); align-items:center; }
.post-stats a { color:var(--accent); text-decoration:none; }

/* notepad + todo */
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; }
textarea.mono, .notepad { width:100%; background:var(--bg2); border:1px solid var(--line); color:var(--text); border-radius:10px; padding:14px; resize:vertical; line-height:1.6; }
.todo-add input { width:100%; background:var(--bg2); border:1px solid var(--line); color:var(--text); border-radius:9px; padding:11px 13px; font:inherit; font-size:15px; margin-bottom:12px; }
.todolist { list-style:none; display:flex; flex-direction:column; gap:2px; }
.todolist li { display:flex; align-items:center; gap:11px; padding:10px 8px; border-radius:8px; }
.todolist li:hover { background:var(--bg2); }
.todolist li.done .todo-text { text-decoration:line-through; color:var(--muted); }
.todo-text { flex:1; }
.check { position:relative; width:20px; height:20px; cursor:pointer; }
.check input { opacity:0; position:absolute; }
.check span { position:absolute; inset:0; border:2px solid var(--line); border-radius:6px; }
.check input:checked + span { background:var(--up); border-color:var(--up); }
.check input:checked + span::after { content:"✓"; color:#04210f; font-size:13px; font-weight:800; position:absolute; left:3px; top:-2px; }
.todo-del { background:transparent; border:0; color:var(--muted); cursor:pointer; font-size:14px; opacity:0; }
.todolist li:hover .todo-del { opacity:1; }
.todolist li { align-items:flex-start; }
.todo-body { flex:1; display:flex; flex-direction:column; gap:4px; }
.todo-src { font-size:10px; color:var(--muted); background:var(--bg2); padding:1px 6px; border-radius:5px; align-self:flex-start; }
.todo-foot { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.todo-assign { background:var(--bg2); border:1px solid var(--line); color:var(--text); border-radius:6px; font-size:11px; padding:2px 5px; max-width:130px; }
.assign-badge { font-size:11px; font-weight:600; color:var(--accent); }
/* needs-row with separate open + to-do button */
.needs-row { display:flex; align-items:stretch; gap:6px; }
.needs-open { flex:1; display:flex; align-items:center; gap:11px; text-align:left; background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:10px 12px; cursor:pointer; transition:border-color .12s; }
.needs-open:hover { border-color:var(--accent); }
.needs-todo { flex-shrink:0; background:transparent; border:1px solid var(--line); color:var(--accent); border-radius:10px; font:inherit; font-size:11px; font-weight:600; padding:0 10px; cursor:pointer; white-space:nowrap; }
.needs-todo:hover { border-color:var(--accent); background:rgba(47,123,255,.08); }
.needs-todo:disabled { opacity:.7; }

/* watch list */
.watchlist { display:flex; flex-direction:column; gap:8px; }
.watch-item { display:flex; align-items:center; gap:12px; padding:11px; border-radius:9px; background:var(--bg2); }
.watch-item.watched { opacity:.55; }
.watch-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.watch-main a { color:var(--accent); text-decoration:none; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.watch-actions { display:flex; gap:6px; }

/* knowledge hub */
.kb-list { display:flex; flex-direction:column; gap:6px; }
.kb-item { display:flex; align-items:center; gap:10px; padding:9px 11px; background:var(--bg2); border-radius:8px; }
.kb-item .name { flex:1; }

/* llm badge + ai indicators */
.llm-badge { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:4px 11px; border-radius:999px; border:1px solid var(--line); }
.llm-badge.on { color:var(--up); background:rgba(43,213,118,.1); border-color:rgba(43,213,118,.3); }
.llm-badge.off { color:var(--muted); }
.llm-dot { width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }
.llm-badge.on .llm-dot { animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

/* dashboard stats */
.spark { width:100%; height:48px; display:block; }
.chan-rows { display:flex; flex-direction:column; gap:10px; }
.chan-row { display:flex; align-items:center; gap:14px; }
.chan-meta { width:96px; flex-shrink:0; display:flex; flex-direction:column; }
.chan-name { font-size:13px; color:var(--muted); }
.chan-n { font-size:20px; font-weight:700; letter-spacing:-.02em; }
.chan-row .spark { flex:1; }
.donut-wrap { display:flex; align-items:center; gap:18px; }
.donut-legend { list-style:none; display:flex; flex-direction:column; gap:5px; font-size:13px; }
.donut-legend li { display:flex; align-items:center; gap:8px; }
.donut-legend b { margin-left:auto; font-variant-numeric:tabular-nums; }
.ldot { width:10px; height:10px; border-radius:3px; }
.mini-list { display:flex; flex-direction:column; gap:6px; }
.mini-aw { display:flex; align-items:center; gap:10px; padding:8px 10px; background:var(--bg2); border-radius:8px; font-size:13px; }
.mini-aw .name { font-weight:600; white-space:nowrap; }
.mini-aw .aw-sub { flex:1; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-aw a { color:var(--accent); text-decoration:none; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.infra-mini .sys { margin-bottom:0; }

/* per-chat AI setup */
.draft-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.chat-cfg { background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:11px; margin-bottom:8px; display:flex; flex-direction:column; gap:8px; }
.chat-cfg input, .chat-cfg textarea, .chat-cfg select { background:var(--bg2); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:8px 10px; font:inherit; font-size:13px; }
.cfg-row { display:flex; align-items:center; gap:10px; }
.cfg-row label { font-size:13px; color:var(--muted); min-width:70px; }
.cfg-inline { font-size:13px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.cfg-inline input { background:var(--bg2); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:6px 8px; font:inherit; }

/* notebook */
.notebook { display:grid; grid-template-columns:280px 1fr; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; min-height:560px; background:var(--card); }
.note-side { border-right:1px solid var(--line); background:var(--bg2); display:flex; flex-direction:column; }
.note-side-head { display:flex; gap:8px; padding:10px; border-bottom:1px solid var(--line); }
.note-side-head input { flex:1; background:var(--bg); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:8px 10px; font:inherit; font-size:13px; }
.note-list { flex:1; overflow-y:auto; max-height:520px; }
.note-group-h { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding:10px 12px 4px; }
.note-item { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; text-align:left; background:transparent; border:0; border-radius:8px; padding:9px 12px; cursor:pointer; }
.note-item:hover { background:var(--card); }
.note-item.active { background:var(--card2); }
.note-title { font-size:14px; font-weight:550; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.note-date { font-size:11px; color:var(--muted); flex-shrink:0; }
.note-foot { padding:10px 12px; }
.note-editor { display:flex; flex-direction:column; padding:16px; min-width:0; }
.note-meta { display:flex; gap:10px; margin-bottom:10px; }
.note-title-input { flex:2; background:transparent; border:0; border-bottom:1px solid var(--line); color:var(--text); font:inherit; font-size:20px; font-weight:650; padding:6px 2px; }
.note-proj-input { flex:1; background:var(--bg2); border:1px solid var(--line); color:var(--muted); border-radius:8px; padding:6px 10px; font:inherit; font-size:13px; }
.note-title-input:focus, .note-proj-input:focus { outline:none; border-color:var(--accent); }
.note-editor .notepad { flex:1; min-height:380px; }
@media (max-width:820px){ .notebook { grid-template-columns:1fr; } .note-list { max-height:240px; } }

/* todo boards */
.todo-auto-bar { display:flex; align-items:center; gap:14px; background:linear-gradient(135deg,var(--card),rgba(47,123,255,.07)); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin-bottom:14px; }
.todo-auto-bar .tab-l { flex:1; display:flex; flex-direction:column; gap:3px; }
.todo-auto-bar .tab-l span { font-size:12.5px; }
.toggle { display:inline-flex; align-items:center; gap:8px; cursor:pointer; flex-shrink:0; }
.toggle input { display:none; }
.toggle-track { width:42px; height:24px; border-radius:999px; background:var(--line); position:relative; transition:background .2s; }
.toggle-track::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .2s; }
.toggle input:checked + .toggle-track { background:var(--up); }
.toggle input:checked + .toggle-track::after { transform:translateX(18px); }
.toggle-lbl { font-size:12px; font-weight:700; color:var(--muted); min-width:20px; }
.board-col-auto { border-color:rgba(47,123,255,.4); box-shadow:inset 0 0 0 1px rgba(47,123,255,.12); }
.auto-tag { display:inline-block; font-size:9px; font-weight:800; letter-spacing:.05em; color:var(--accent); background:rgba(47,123,255,.14); padding:1px 6px; border-radius:5px; margin-left:7px; vertical-align:middle; }
.todolist li.auto-done .todo-text { color:var(--muted); }
.todo-src.auto-ok { color:var(--up); background:rgba(43,213,118,.12); }
.todo-newlist { display:flex; gap:8px; margin-bottom:14px; }
.todo-newlist input { flex:1; background:var(--bg2); border:1px solid var(--line); color:var(--text); border-radius:9px; padding:10px 13px; font:inherit; }
.board { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; align-items:start; }
.board-col { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:12px; }
.board-col-h { display:flex; align-items:center; gap:8px; font-weight:650; margin-bottom:10px; }
.board-col-h span:first-child { flex:1; }
.board-del { background:transparent; border:0; color:var(--muted); cursor:pointer; }
.board .todo-add input { width:100%; background:var(--bg2); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:8px 10px; font:inherit; font-size:13px; margin-bottom:8px; }

/* watch previews */
.watch-item.important { border-left:3px solid var(--accent); }
.w-flag { font-size:11px; font-weight:700; color:var(--accent); }
.w-title { font-size:14px; font-weight:600; color:var(--text); }
.w-desc { font-size:12.5px; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* content planner */
.plan-list { display:flex; flex-direction:column; gap:10px; }

/* LLM management */
.llm-prov { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; border:1px solid var(--line); border-radius:10px; margin-bottom:8px; }
.llm-prov.active { border-color:var(--accent); background:rgba(47,123,255,.07); }
.rep-form { display:flex; flex-direction:column; gap:8px; }
.rep-row { display:flex; gap:8px; flex-wrap:wrap; }
.rep-row input, .rep-row select { flex:1; min-width:140px; }
.rep-cat-h { font-size:14px; font-weight:700; margin:18px 0 6px; }
.rep-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; margin-top:6px; }
.rep-card { border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--card); }
.rep-card.answered { border-left:3px solid #34c97a; }
.rep-card.sent, .rep-card.pending { border-left:3px solid #ff9f43; }
.rep-card.failed, .rep-card.blocked { border-left:3px solid #ff3b4e; }
.rep-head { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.rep-badge { font-size:10px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--line); color:var(--muted); white-space:nowrap; }
.rep-badge.answered { background:rgba(40,190,120,.18); color:#34c97a; }
.rep-badge.sent, .rep-badge.pending { background:rgba(255,159,67,.18); color:#ff9f43; }
.rep-result { margin-top:8px; font-size:14px; line-height:1.55; }
.rep-log { display:flex; gap:6px; margin-top:8px; }
.rep-log input { flex:1; font-size:12px; padding:5px 8px; }
.rep-raw { margin-top:8px; font-size:12px; color:var(--muted); }
.rep-raw summary { cursor:pointer; }
.rep-raw div { margin-top:6px; max-height:240px; overflow:auto; }
.rep-acts { display:flex; gap:6px; justify-content:flex-end; margin-top:8px; }
.conn-key { display:flex; gap:6px; margin-top:8px; }
.conn-key input { flex:1; min-width:120px; font-size:12px; padding:5px 8px; }
.conn-key .btn { white-space:nowrap; }
.lead-add { display:flex; gap:8px; flex-wrap:wrap; }
.lead-add input { flex:1; min-width:120px; }
.lead-board { display:flex; gap:10px; overflow-x:auto; padding:4px 0 10px; }
.lead-col { flex:0 0 220px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px; }
.lead-col-h { font-weight:700; font-size:13px; margin-bottom:8px; text-transform:uppercase; letter-spacing:.03em; }
.lead-card { background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:9px 10px; margin-bottom:8px; cursor:pointer; }
.lead-card:hover { border-color:var(--accent); }
.lead-card.cold { border-left:3px solid #ff9f43; }
.lc-top { display:flex; justify-content:space-between; align-items:center; gap:6px; font-size:14px; }
.lc-next { font-size:12px; color:var(--accent); margin-top:4px; }
.lc-acts { margin-top:6px; }
.lc-acts .mini, .lead-card .mini { font-size:11px; padding:3px 8px; border-radius:6px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; }
.pill.cold { background:rgba(255,159,67,.18); color:#ff9f43; }
.lead-drawer { position:fixed; top:0; right:0; width:min(420px,92vw); height:100%; background:var(--card); border-left:1px solid var(--line); box-shadow:-8px 0 30px rgba(0,0,0,.3); z-index:60; overflow-y:auto; }
.lead-drawer-in { padding:18px; display:flex; flex-direction:column; gap:8px; }
.ld-h { display:flex; justify-content:space-between; align-items:center; font-size:16px; }
.ld-h .x { background:none; border:0; color:var(--muted); font-size:18px; cursor:pointer; }
.lead-drawer-in input, .lead-drawer-in select, .lead-drawer-in textarea { width:100%; }
.ld-draft { background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:13px; line-height:1.55; margin-top:8px; white-space:normal; }
.brain-ladder { display:flex; flex-direction:column; gap:8px; margin:10px 0; }
.bl-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.bl-tier { font-size:11px; font-weight:700; color:var(--muted); min-width:96px; text-transform:uppercase; letter-spacing:.04em; }
.brain-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600; border:1px solid var(--line); background:var(--card); }
.brain-badge i { font-style:normal; font-size:10px; font-weight:800; opacity:.6; }
.brain-badge.t1 { border-color:#5b6472; color:#9aa3b2; }
.brain-badge.t2 { border-color:#2f7bff66; color:#6ea0ff; background:rgba(47,123,255,.08); }
.brain-badge.t3 { border-color:#c08cff66; color:#c08cff; background:rgba(160,90,255,.10); }
.pill { display:inline-block; font-size:10px; font-weight:700; padding:1px 7px; border-radius:999px; background:var(--line); color:var(--muted); vertical-align:middle; }
.pill.ok { background:rgba(40,190,120,.18); color:#34c97a; }
.route-tbl { width:100%; border-collapse:collapse; font-size:13px; }
.route-tbl th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:6px 8px; border-bottom:1px solid var(--line); }
.route-tbl td { padding:7px 8px; border-bottom:1px solid var(--line); }
.cmp-models { display:flex; flex-wrap:wrap; gap:10px 16px; }
.cmp-models .chk { font-size:13px; display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.cmp-out { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.cmp-card { border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--card); }
.cmp-h { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; gap:8px; }
.cmp-body { font-size:13px; line-height:1.55; white-space:normal; max-height:340px; overflow:auto; }
@media (max-width:720px){ .cmp-out { grid-template-columns:1fr; } .bl-tier { min-width:auto; } }
.lim-inp { width:160px; background:var(--card2); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:7px 10px; font:inherit; }
.lim-inp:focus { outline:none; border-color:var(--accent); }

/* connection health */
.health-list { display:flex; flex-direction:column; gap:8px; }
.health-row { display:flex; align-items:center; gap:12px; padding:11px 12px; background:var(--bg2); border:1px solid var(--line); border-radius:10px; }
.health-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }

/* inbox / needs-me */
.needs-list { display:flex; flex-direction:column; gap:6px; }
.needs-row { display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:10px 12px; cursor:pointer; transition:border-color .12s, transform .1s; }
.needs-row:hover { border-color:var(--accent); transform:translateY(-1px); }
.ch-tag { width:26px; height:26px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; border-radius:7px; background:var(--card2); font-size:13px; font-weight:700; }
.needs-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.needs-last { font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.digest-sum { font-size:15px; line-height:1.6; margin-bottom:6px; }

/* AI answers */
.ans-summary { cursor:pointer; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; }
.ans-item { background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:11px 12px; margin-bottom:8px; }
.ans-head { display:flex; align-items:center; gap:11px; }
.ans-actions { display:flex; gap:8px; margin-top:9px; }
.ans-out:not(:empty) { margin-top:9px; }
.ans-out .ai-draft { width:100%; background:var(--bg); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:10px; font:inherit; font-size:13px; resize:vertical; margin-top:6px; }
.autopilot-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.auto-key { font-size:11px; font-weight:600; color:var(--degraded); }
.ans-auto-key { color:var(--degraded); }
.wa-auto { opacity:.82; border:1px dashed var(--line); }
.wa-auto .wa-time { color:var(--degraded); opacity:.9; }

/* theme switcher button */
.theme-btn { background:transparent; border:1px solid var(--line); color:var(--text); border-radius:8px; min-width:32px; height:30px; cursor:pointer; font-size:15px; line-height:1; }
.theme-btn:hover { border-color:var(--accent); }

/* authentic WhatsApp chat look */
.wa-theme .thread-msgs { background:#efeae2; }
body[data-theme="dark"] .wa-theme .thread-msgs, body[data-theme="dim"] .wa-theme .thread-msgs { background:#0b141a; }
.wa-theme .thread-head { background:#f0f2f5; }
body[data-theme="dark"] .wa-theme .thread-head, body[data-theme="dim"] .wa-theme .thread-head { background:#202c33; }
.wa-theme .wa-in { background:#ffffff; color:#111b21; box-shadow:0 1px .5px rgba(11,20,26,.13); }
.wa-theme .wa-out { background:#d9fdd3; color:#111b21; box-shadow:0 1px .5px rgba(11,20,26,.13); }
body[data-theme="dark"] .wa-theme .wa-in, body[data-theme="dim"] .wa-theme .wa-in { background:#202c33; color:#e9edef; box-shadow:none; }
body[data-theme="dark"] .wa-theme .wa-out, body[data-theme="dim"] .wa-theme .wa-out { background:#005c4b; color:#e9edef; box-shadow:none; }
.wa-theme .wa-msg .wa-time { color:rgba(0,0,0,.45); }
body[data-theme="dark"] .wa-theme .wa-time, body[data-theme="dim"] .wa-theme .wa-time { color:rgba(233,237,239,.55); }
.wa-theme .wa-msg .wa-who { color:#06cf9c; }

/* ============ full WhatsApp skin (scoped to .wa-theme) ============ */
.wa-theme { --wa-green:#00a884; --wa-green-d:#008069; --wa-badge:#25d366; --wa-list:#ffffff; --wa-hover:#f5f6f6; --wa-bd:#e9edef; --wa-txt:#111b21; --wa-sec:#667781; --wa-panel:#f0f2f5; }
body[data-theme="dark"] .wa-theme, body[data-theme="dim"] .wa-theme { --wa-list:#111b21; --wa-hover:#202c33; --wa-bd:#222d34; --wa-txt:#e9edef; --wa-sec:#8696a0; --wa-panel:#202c33; }
.wa-theme .chatwrap { background:var(--wa-list); border-color:var(--wa-bd); }
.wa-theme .convlist { background:var(--wa-list); border-right-color:var(--wa-bd); }
.wa-theme .convhead { background:var(--wa-panel); border-bottom-color:var(--wa-bd); }
.wa-theme .conv-search { background:var(--wa-list); border:1px solid var(--wa-bd); color:var(--wa-txt); border-radius:18px; padding:8px 14px; }
body[data-theme="dark"] .wa-theme .conv-search, body[data-theme="dim"] .wa-theme .conv-search { background:#202c33; color:#e9edef; }
.wa-theme .conv-search::placeholder { color:var(--wa-sec); }
.wa-theme .conv { border-bottom-color:var(--wa-bd); }
.wa-theme .conv:hover, .wa-theme .conv.active { background:var(--wa-hover); }
.wa-theme .conv-name { color:var(--wa-txt); }
.wa-theme .conv-last, .wa-theme .conv-time { color:var(--wa-sec); }
.wa-theme .unread-badge { background:var(--wa-badge); color:#fff; }
.wa-theme .avatar.fallback { background:linear-gradient(135deg,#00a884,#25d366); color:#fff; }
.wa-theme .seg.active { background:var(--wa-green); color:#fff; }
.wa-theme .seg { color:var(--wa-sec); }
.wa-theme .seg:hover:not(.active) { color:var(--wa-txt); }
.wa-theme .segrow { background:var(--wa-panel); border-color:var(--wa-bd); }
.wa-theme .btn { background:var(--wa-green); }
.wa-theme .btn:hover { background:var(--wa-green-d); }
.wa-theme .btn.ghost { background:transparent; color:var(--wa-txt); border-color:var(--wa-bd); }
.wa-theme .readonly-badge { color:var(--wa-green-d); background:rgba(0,168,132,.14); }
.wa-theme .kind-chip.personal, .wa-theme .kind-chip.business { color:var(--wa-green-d); background:rgba(0,168,132,.14); }
.wa-theme .thread-name { color:var(--wa-txt); }
.wa-theme .thread-back { color:var(--wa-txt); }
.wa-theme .draftbox { background:var(--wa-panel); border-top-color:var(--wa-bd); }
.wa-theme .draftbox textarea { background:var(--wa-list); border-color:var(--wa-bd); color:var(--wa-txt); border-radius:20px; }
.wa-theme .analysispane { background:var(--wa-list); border-left-color:var(--wa-bd); }
.wa-theme .analysispane .ana-sum, .wa-theme .analysispane .ana-v { color:var(--wa-txt); }
.wa-theme .tile { background:var(--wa-list); border-color:var(--wa-bd); }
.wa-theme .tile .n { color:var(--wa-txt); }
.wa-theme .summary.wa-accent .tile .n { color:var(--wa-green); }
.wa-theme .wa-card { background:var(--wa-list); border-color:var(--wa-bd); }
.wa-theme .wa-card h2 { color:var(--wa-green-d); }
.wa-theme .sync-state, .wa-theme .linkbtn { color:var(--wa-green-d); }
.wa-theme .convscroll::-webkit-scrollbar, .wa-theme .thread-msgs::-webkit-scrollbar { width:6px; }
.wa-theme .convscroll::-webkit-scrollbar-thumb, .wa-theme .thread-msgs::-webkit-scrollbar-thumb { background:rgba(0,0,0,.15); border-radius:3px; }

/* AI analysis side panel — collapsed by default; revealed with the ✦ AI toggle */
.chatwrap.has-analysis { grid-template-columns:300px 1fr; }
.chatwrap.has-analysis.show-ai { grid-template-columns:300px 1fr 300px; }
.analysispane { display:none; border-left:1px solid var(--line); background:var(--bg2); padding:14px; overflow-y:auto; }
.chatwrap.show-ai .analysispane { display:block; }
/* WhatsApp: analysis panel pinned open on the right (desktop only — mobile keeps it behind the ✦ AI icon). */
@media (min-width:861px){ .chatwrap.wa-ai.has-analysis { grid-template-columns:300px 1fr 300px; } .chatwrap.wa-ai .analysispane { display:block; } .chatwrap.wa-ai .thread-ai { display:none; } }
.ana-head { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); margin-bottom:12px; }
.ana-head span { flex:1; font-weight:600; }
.ana-flag { font-size:12px; font-weight:700; padding:7px 10px; border-radius:8px; margin-bottom:11px; }
.ana-flag.imp { color:var(--down); background:rgba(255,84,112,.12); }
.ana-flag.ok { color:var(--muted); background:var(--card2); }
.ana-sum { font-size:13.5px; line-height:1.55; margin-bottom:12px; }
.ana-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
.ana-k { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.ana-v { font-weight:600; font-size:13px; text-transform:capitalize; }
.sent-positive { color:var(--up); } .sent-negative { color:var(--down); } .sent-neutral { color:var(--muted); }
.ana-action { margin-top:10px; padding:10px; background:var(--card2); border-radius:8px; }
.ana-action p { font-size:13px; margin-top:4px; }
.ana-tabs { display:flex; gap:6px; margin-bottom:12px; }
.ana-tab { flex:1; background:var(--card2); border:1px solid var(--line); color:var(--muted); border-radius:8px; padding:7px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; }
.ana-tab.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.imp-sec { margin-bottom:14px; }
.imp-row { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--line); font-size:13px; }
.imp-row:last-child { border-bottom:0; }
.imp-row span:first-child { flex:1; }
.imp-row a { color:var(--accent); text-decoration:none; flex:1; word-break:break-all; }
.imp-todo { flex-shrink:0; width:24px; height:24px; border-radius:6px; border:1px solid var(--line); background:var(--card2); color:var(--accent); font-size:15px; font-weight:700; cursor:pointer; line-height:1; }
.imp-todo:hover { border-color:var(--accent); }
.ana-reply { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.ana-suggest-text { width:100%; background:var(--bg); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:9px 11px; font:inherit; font-size:13px; resize:vertical; }
.ana-tag-note { margin:6px 0 8px; font-style:italic; }
.ana-reply-actions { display:flex; gap:8px; }
.ana-reply-actions .ana-send { background:var(--up); }
.ana-reply-actions .ana-send:hover { background:#22b463; }
@media (max-width:1100px){ .chatwrap.has-analysis.show-ai { grid-template-columns:300px 1fr; } .chatwrap.show-ai .analysispane { grid-column:1 / -1; border-left:0; border-top:1px solid var(--line); } }
@media (max-width:860px){ .chatwrap.has-analysis, .chatwrap.has-analysis.show-ai { grid-template-columns:1fr; } }

/* ===== mobile WhatsApp app polish — bigger touch targets, cleaner, faster feel ===== */
@media (max-width:720px){
  .chatwrap { border:0; border-radius:0; }
  .convhead { position:sticky; top:0; z-index:3; }
  .conv { padding:12px 14px; gap:13px; }
  .conv .avatar { width:50px; height:50px; }
  .conv-name { font-size:15.5px; }
  .conv-last { font-size:13.5px; }
  .chatwrap.thread-open .threadpane { animation:slideIn .2s ease; }
  .thread-head { padding:14px; }
  .thread-msgs { padding:14px 12px; }
  .wa-msg { max-width:86%; font-size:14.5px; }
  .draftbox { position:sticky; bottom:0; }
  .draftbox textarea { font-size:16px; }
  .thread-back { font-size:30px; padding-right:8px; }
}
@keyframes slideIn { from { transform:translateX(26px); opacity:.5; } to { transform:none; opacity:1; } }
/* AI insights button (mobile) + slide-up sheet for the analysis pane */
.thread-compose { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:34px; height:34px; background:transparent; border:1px solid var(--line); color:var(--muted); border-radius:9px; font-size:15px; cursor:pointer; }
.thread-compose:hover { color:var(--accent); border-color:var(--accent); }
.thread-compose.on { color:var(--accent); border-color:var(--accent); background:var(--card2); }
.thread-ai { display:inline-flex; align-items:center; flex-shrink:0; background:linear-gradient(135deg,var(--accent),#5aa0ff); color:#fff; border:0; border-radius:999px; font:inherit; font-size:12px; font-weight:700; padding:6px 13px; cursor:pointer; opacity:.85; }
.thread-ai:hover { opacity:1; }
.thread-ai.on { background:var(--card2); color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); opacity:1; }
.ana-close { display:none; }
@media (max-width:860px){
  .thread-ai { display:inline-flex; align-items:center; }
  .analysispane { display:none; }
  .chatwrap.show-ai .analysispane { display:block; position:fixed; left:0; right:0; bottom:0; top:10vh; z-index:60; overflow-y:auto; border-radius:18px 18px 0 0; box-shadow:0 -8px 40px rgba(0,0,0,.5); animation:sheetUp .25s ease; padding:0 14px 24px; }
  .chatwrap.show-ai::after { content:""; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:59; }
  .ana-close { display:block; position:sticky; top:0; width:100%; background:var(--card); border:0; border-bottom:1px solid var(--line); color:var(--accent); font:inherit; font-size:14px; font-weight:700; padding:14px; cursor:pointer; text-align:right; margin:0 -14px 8px; width:calc(100% + 28px); border-radius:18px 18px 0 0; }
}
@keyframes sheetUp { from { transform:translateY(40px); opacity:.6; } to { transform:none; opacity:1; } }

/* learn */
.learn-track { border:1px solid var(--line); border-radius:10px; margin-bottom:8px; padding:0; }
.learn-track summary { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; cursor:pointer; list-style:none; }
.learn-track summary::-webkit-details-marker { display:none; }
.lt-name { font-weight:600; }
.lt-desc { padding:0 14px; }
.learn-items { list-style:none; padding:6px 14px 12px; display:flex; flex-direction:column; gap:6px; }
.learn-items li { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--line); font-size:14px; }
.learn-items li:last-child { border-bottom:0; }
.li-type { flex-shrink:0; }
.li-title { flex:1; }
.li-title a { color:var(--accent); text-decoration:none; }

/* ============================================================
   MOBILE HARDENING — applies across every module/page
   ============================================================ */
@media (max-width:720px){
  /* never let the page scroll sideways */
  html, body { max-width:100%; overflow-x:hidden; }
  .content, main, .panel, .card-section { max-width:100%; min-width:0; }
  /* media & code never overflow the frame */
  img, video, svg, canvas, iframe, table, pre { max-width:100%; }
  pre, code { white-space:pre-wrap; word-break:break-word; }
  /* long unbroken strings (emails, URLs, ids, names) wrap instead of pushing out of frame */
  .card-section, .postcard, .needs-row, .needs-main, .ask-bubble, .lrn-list li, .lrn-txt, .ana-sum,
  .notif-item, .trk-card, .trk-last, .cal-conn, .ins-chip, .lrn-chip, .sc-chip, .todo-text, .todo-src,
  .conv-last, .conv-name, .post-text, .email-full, .rep-frame, .li-why, .needs-last, .name, .ctx-state,
  .ctx-headline, .u-table td, .agenda li, .ag-title { overflow-wrap:anywhere; word-break:break-word; }
  /* flex children must be allowed to shrink (a top cause of overflow) */
  .li-feedmain, .li-feedside, .ctx-hero-main, .lrn-hero-main, .need-main, .conv-main, .needs-main,
  .ins-hero-main, .ana-sum, .tab-l, .rep-card, .todo-body { min-width:0; }
  /* horizontal toolbars scroll instead of overflowing */
  .modbar, .segrow, .ana-tabs, .ctx-head, .cal-conns, .ins-chips, .draft-actions, .need-actions,
  .lrn-actions, .rep-grid, .ig-tabs, .li-feedmain .connect-head { max-width:100%; }
  .modbar { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .segrow { flex-wrap:wrap; }
  /* collapse remaining multi-column grids */
  .sys, .summary, .two-col, .lrn-grid2, .rep-grid, .u-roles, .notebook { grid-template-columns:1fr !important; }
  .summary { grid-template-columns:repeat(2,1fr) !important; }
  /* tables become horizontally scrollable */
  .u-table { display:block; overflow-x:auto; white-space:nowrap; }
  /* tighter cards on phone */
  .card-section { padding:14px; }
  .ctx-donut { width:160px; height:160px; }
  .ctx-hero, .lrn-hero, .ins-hero { padding:16px; }
  /* WhatsApp / messaging: full-height, easy vertical scroll */
  .chatwrap { height:auto; min-height:auto; }
  .chatwrap:not(.thread-open) .convlist { display:block; max-height:none; }
  .convscroll { max-height:none; }
  .chatwrap.thread-open .threadpane { display:flex; flex-direction:column; height:calc(100dvh - 120px); }
  .thread-msgs { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  /* tracker / feed cards stack and scroll naturally */
  .li-feedwrap { display:block; }
  .li-feedside { margin-top:14px; }
  /* calendar month grid stays inside the frame */
  .cal-grid { gap:3px; }
  .cal-cell { min-height:44px; padding:3px; }
}
@media (max-width:420px){
  .summary, .ins-pulse, .ctx-stats { grid-template-columns:repeat(2,1fr) !important; }
  .ctx-donut { width:140px; height:140px; }
}

/* ---------- Content Generation (Image Studio) ---------- */
.ig-wrap{max-width:1100px}
.ig-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.ig-head h2{margin:0 0 4px}
.ig-grid{display:grid;grid-template-columns:minmax(280px,1fr) minmax(320px,1.2fr);gap:20px}
.ig-form{display:flex;flex-direction:column;gap:12px}
.ig-l{font-size:12px;font-weight:600;color:var(--muted,#8a93a6);display:block;margin-bottom:5px}
.ig-ta{width:100%;box-sizing:border-box;background:var(--card2,#11151f);border:1px solid var(--line,#222a3a);border-radius:12px;color:inherit;padding:11px 13px;font:inherit;resize:vertical}
.ig-row{display:flex;gap:14px}.ig-row>div{flex:1}
.ig-sel,.ig-range{width:100%;box-sizing:border-box}
.ig-sel{background:var(--card2,#11151f);border:1px solid var(--line,#222a3a);border-radius:10px;color:inherit;padding:9px 11px;font:inherit}
.ig-range{accent-color:#2f7bff;margin-top:8px}
.ig-adv summary{cursor:pointer;font-size:13px;color:var(--muted,#8a93a6);padding:4px 0}
.ig-msg{font-size:12px;color:var(--muted,#8a93a6);min-height:16px}
.ig-out{display:flex;flex-direction:column;gap:14px}
.ig-stage{background:var(--card2,#11151f);border:1px solid var(--line,#222a3a);border-radius:14px;min-height:340px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:10px}
.ig-empty{color:var(--muted,#8a93a6);font-size:13px;text-align:center;padding:30px}
.ig-result{max-width:100%;max-height:520px;border-radius:10px;display:block}
.ig-result-bar{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:10px;padding:0 4px}
.ig-loading{display:flex;flex-direction:column;align-items:center;gap:14px}
.ig-spin{width:40px;height:40px;border:3px solid var(--line,#222a3a);border-top-color:#2f7bff;border-radius:50%;animation:igspin 1s linear infinite}
@keyframes igspin{to{transform:rotate(360deg)}}
.ig-gallery{display:flex;flex-wrap:wrap;gap:8px}
.ig-gallery img{width:64px;height:64px;object-fit:cover;border-radius:8px;cursor:pointer;border:1px solid var(--line,#222a3a)}
.ig-gallery img:hover{border-color:#2f7bff}
.ig-video{margin-top:22px}
@media (max-width:720px){.ig-grid{grid-template-columns:1fr}.ig-head{flex-direction:column}}
.ig-check{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--muted,#8a93a6);line-height:1.45;cursor:pointer;background:var(--card2,#11151f);border:1px solid var(--line,#222a3a);border-radius:11px;padding:10px 12px}
.ig-check input{margin-top:2px;accent-color:#2f7bff;flex-shrink:0}
.ig-check b{color:inherit;font-weight:700}
.ig-timer{font-size:30px;font-weight:700;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.ig-prog{width:200px;max-width:80%;height:6px;background:var(--line,#222a3a);border-radius:99px;overflow:hidden;margin-top:6px}
.ig-prog span{display:block;height:100%;background:linear-gradient(90deg,#2f7bff,#56b3ff);border-radius:99px;transition:width .5s linear}
.ig-meta{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 16px}
.ig-chip{font-size:12px;color:var(--muted,#8a93a6);background:var(--card2,#11151f);border:1px solid var(--line,#222a3a);border-radius:99px;padding:5px 11px}
.ig-chip b{color:inherit}
.ig-actions{display:flex;gap:8px}
.ig-wa{margin-top:10px;width:100%;background:var(--card2,#11151f);border:1px solid var(--line,#222a3a);border-radius:12px;padding:12px}
.ig-wa-h{font-weight:600;font-size:13px;margin-bottom:8px}
.ig-wa-list{max-height:200px;overflow:auto;margin-top:8px;display:flex;flex-direction:column;gap:4px}
.ig-wa-c{text-align:left;background:transparent;border:1px solid var(--line,#222a3a);border-radius:9px;color:inherit;padding:8px 11px;font:inherit;cursor:pointer}
.ig-wa-c:hover{border-color:#2f7bff;background:rgba(47,123,255,.08)}
.ig-gallery-wrap{margin-top:22px}
.ig-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.ig-card{position:relative;margin:0;background:var(--card2,#11151f);border:1px solid var(--line,#222a3a);border-radius:12px;overflow:hidden}
.ig-card img{width:100%;aspect-ratio:1;object-fit:cover;display:block;cursor:pointer}
.ig-card figcaption{font-size:11px;color:var(--muted,#8a93a6);padding:7px 9px;line-height:1.35;max-height:46px;overflow:hidden}
.ig-del{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;border:none;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;font-size:13px;line-height:1;opacity:0;transition:opacity .15s}
.ig-card:hover .ig-del{opacity:1}
.ig-wa-c{display:flex;align-items:center;gap:7px}
.ig-wa-num{margin-left:auto;font-size:11px;color:var(--muted,#8a93a6)}
.ig-card.ig-new{outline:2px solid #2f7bff;outline-offset:1px;animation:igflash 1.2s ease-in-out 2}
@keyframes igflash{0%,100%{box-shadow:0 0 0 0 rgba(47,123,255,0)}50%{box-shadow:0 0 0 5px rgba(47,123,255,.35)}}
.ig-li-row{display:flex;gap:8px;margin-top:8px}
.ig-li-row .btn{flex:1}
/* Ask Analytica — source citations */
.ask-sources{margin:6px 0 2px 0;display:flex;flex-direction:column;gap:5px;max-width:90%}
.ask-src-h{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted,#8a93a6);margin:2px 0}
.ask-src{display:flex;align-items:center;gap:8px;text-align:left;background:var(--card2,#11151f);border:1px solid var(--line,#222a3a);border-radius:10px;padding:7px 10px;color:inherit;font:inherit;cursor:pointer;width:100%}
.ask-src:hover{border-color:#2f7bff;background:rgba(47,123,255,.08)}
.ask-src-ic{flex-shrink:0;font-size:13px;width:18px;text-align:center}
.ask-src-nm{font-weight:600;font-size:12.5px;flex-shrink:0;max-width:32%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ask-src-sn{font-size:12px;color:var(--muted,#8a93a6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.ask-src-tm{font-size:11px;color:var(--muted,#8a93a6);flex-shrink:0;margin-left:auto}
.pc-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
/* Acting agent — confirm-first action cards */
.ag-actions{margin:8px 0 2px;display:flex;flex-direction:column;gap:8px;max-width:92%}
.ag-act{background:var(--card2,#11151f);border:1px solid var(--line,#222a3a);border-radius:12px;padding:11px 13px}
.ag-act-h{font-weight:700;font-size:13px;margin-bottom:6px}
.ag-act-prev{white-space:pre-wrap;word-break:break-word;font:inherit;font-size:12.5px;color:var(--muted,#8a93a6);background:rgba(127,127,127,.06);border-radius:8px;padding:8px 10px;margin:0 0 8px;max-height:160px;overflow:auto}
.ag-act-btns{display:flex;gap:8px}
.ag-act-done{font-weight:600;color:#27c093;font-size:13px}
/* Activity & Audit */
.act-list{display:flex;flex-direction:column;gap:10px;max-height:520px;overflow:auto}
.act-turn{border:1px solid var(--line,#222a3a);border-radius:12px;padding:11px 13px;background:var(--card2,#11151f)}
.act-when{font-size:11px;color:var(--muted,#8a93a6);margin-bottom:4px}
.act-q{font-weight:600;font-size:13.5px;margin-bottom:4px}
.act-a{font-size:13px;color:var(--muted,#8a93a6);white-space:pre-wrap;line-height:1.45}
.act-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.act-chip{font-size:11px;background:rgba(47,123,255,.12);color:#56b3ff;border-radius:99px;padding:3px 9px}
.act-audit{display:flex;flex-direction:column;max-height:420px;overflow:auto}
.act-row{display:flex;align-items:center;gap:10px;padding:7px 4px;border-bottom:1px solid var(--line,#222a3a);font-size:12.5px}
.act-row .act-when{margin:0;min-width:96px;flex-shrink:0}
.act-act{font-weight:600;min-width:120px;flex-shrink:0}
.act-det{flex:1;color:var(--muted,#8a93a6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-ok{flex-shrink:0;font-weight:700}.act-ok.yes{color:#27c093}.act-ok.no{color:#e5484d}
/* Trust & Safety */
.trust-status{border-left:4px solid var(--line,#222a3a)}
.trust-status.ok{border-left-color:#27c093}.trust-status.stop{border-left-color:#e5484d}
.trust-rules{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:10px}
.trust-rule{font-size:12.5px;color:var(--muted,#8a93a6)}.trust-rule b{color:var(--text,#e7ecf3)}
.trust-stats{display:flex;flex-wrap:wrap;gap:18px;margin-top:6px}
.trust-stat{display:flex;flex-direction:column;align-items:flex-start}
.trust-stat .ts-n{font-family:var(--font-mono,monospace);font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
.trust-stat .ts-n.ok{color:#27c093}.trust-stat .ts-n.warn{color:#f5a623}.trust-stat .ts-n.bad{color:#e5484d}
.trust-stat .ts-l{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted,#8a93a6)}
.act-row.trust-blocked{background:rgba(229,72,77,.08)}
/* 2FA authenticator setup */
.tfa-setup{border:1px solid var(--line,#222a3a);border-radius:10px;padding:12px 14px;background:var(--panel2,rgba(255,255,255,.02))}
.tfa-key{display:flex;align-items:center;gap:10px;margin:6px 0}
.tfa-key code{font-family:var(--font-mono,monospace);font-size:16px;letter-spacing:2px;background:var(--panel,#0e1526);border:1px solid var(--line,#222a3a);border-radius:8px;padding:8px 12px;user-select:all}
.tfa-confirm{display:flex;align-items:center;gap:10px;margin-top:6px}
.tfa-confirm input{font-family:var(--font-mono,monospace);font-size:16px;letter-spacing:3px;background:var(--panel,#0e1526);border:1px solid var(--line,#222a3a);border-radius:8px;padding:8px 10px;color:var(--text,#e7ecf3)}
/* Suggest bar */
.sg-btn{font-size:15px;line-height:1}
.sg-head{font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted,#8a93a6);padding:10px 12px 6px}
.sg-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:transparent;border:0;border-top:1px solid var(--line,#222a3a);padding:10px 12px;color:inherit;font:inherit;cursor:pointer}
.sg-item:hover{background:rgba(47,123,255,.08)}
.sg-ic{flex-shrink:0;font-size:15px;width:20px;text-align:center}
.sg-tx{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-go{flex-shrink:0;font-size:11.5px;font-weight:600;color:#2f7bff}
#suggestPanel{max-width:380px}
/* Inline action chips */
.ag-chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;background:rgba(47,123,255,.1);color:#2f7bff;border:1px solid rgba(47,123,255,.25);border-radius:99px;padding:5px 11px;cursor:pointer;white-space:nowrap}
.ag-chip:hover{background:rgba(47,123,255,.2)}
.needs-row{flex-wrap:wrap}
.needs-actions{display:flex;gap:6px;flex-wrap:wrap;width:100%;margin-top:7px;align-items:center}
.needs-actions .needs-todo{margin-left:auto}
.sg-item{display:flex;align-items:center;gap:4px;border-top:1px solid var(--line,#222a3a)}
.sg-item .sg-ic{padding-left:12px}
.sg-go{flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px;background:transparent;border:0;padding:10px 6px 10px 8px;color:inherit;font:inherit;cursor:pointer;text-align:left}
.sg-go:hover{background:rgba(47,123,255,.08)}
.sg-do{flex-shrink:0;font-size:11.5px;font-weight:600;color:#2f7bff}
.sg-x{flex-shrink:0;background:transparent;border:0;color:var(--muted,#8a93a6);cursor:pointer;font-size:12px;padding:0 12px;opacity:.6}
.sg-x:hover{opacity:1;color:#e5484d}
.ask-routines{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:6px 0 14px}
.sg-routines{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px 12px}
/* Live connection strip */
.conn-strip{margin:0 0 14px;padding:11px 13px;border:1px solid var(--line,#222a3a);border-radius:12px;background:var(--card2,#11151f)}
.conn-strip.warn{border-color:rgba(229,72,77,.4)}
.conn-strip.down{color:#e5484d}
.conn-strip-h{font-size:12.5px;font-weight:700;display:block;margin-bottom:8px}
.conn-chips{display:flex;flex-wrap:wrap;gap:6px}
.conn-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;background:rgba(127,127,127,.08);border:1px solid var(--line,#222a3a);border-radius:99px;padding:4px 9px}
.conn-chip.bad{border-color:rgba(229,72,77,.5);color:#e5484d}
.conn-chip .dot{width:7px;height:7px;border-radius:50%}
.conn-chip .dot.up{background:#27c093}.conn-chip .dot.down{background:#e5484d}
/* Guardian verdict on action cards */
.ag-guard{font-size:11.5px;border-radius:8px;padding:6px 9px;margin:6px 0;display:flex;flex-direction:column;gap:2px}
.ag-guard.pass{color:#27c093;background:rgba(39,192,147,.08)}
.ag-guard.warn{color:#e8a33d;background:rgba(232,163,61,.1)}
.ag-guard.block{color:#e5484d;background:rgba(229,72,77,.12);font-weight:600}
.ag-guard.rev{color:#56b3ff;background:rgba(47,123,255,.08)}
.ag-act.g-block{border-color:rgba(229,72,77,.45)}
.ag-act.g-warn{border-color:rgba(232,163,61,.4)}
/* Importance tiers + feedback */
.tier-b{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border-radius:5px;padding:2px 5px;margin-right:5px;vertical-align:middle}
.tier-b.crit{background:rgba(229,72,77,.15);color:#e5484d}
.tier-b.imp{background:rgba(232,163,61,.15);color:#e8a33d}
.tier-b.low{background:rgba(127,127,127,.15);color:var(--muted,#8a93a6)}
.tier-b.unr{background:rgba(47,123,255,.12);color:#56b3ff}
.needs-dismiss{background:transparent;border:0;color:var(--muted,#8a93a6);font-size:11.5px;cursor:pointer;opacity:.7;padding:4px 6px}
.needs-dismiss:hover{opacity:1;color:#e5484d}
/* Agent control center */
.ac-l{display:block;font-size:12px;font-weight:600;color:var(--muted,#8a93a6);margin:0 0 6px}
.ac-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--line,#222a3a)}
.ac-row:first-of-type{border-top:0}
.ac-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ac-mchip{display:inline-flex;align-items:center;gap:5px;font-size:12px;background:rgba(127,127,127,.1);border:1px solid var(--line,#222a3a);border-radius:99px;padding:3px 6px 3px 10px}
.ac-unmute{background:transparent;border:0;color:var(--muted,#8a93a6);cursor:pointer;font-size:11px;padding:0 2px}
.ac-unmute:hover{color:#e5484d}
.conn-slim{font-size:11.5px;color:var(--muted,#8a93a6);margin:-4px 0 12px;opacity:.75}
/* Folders / data center */
.fold-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:14px}
.fold-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 12px;background:var(--card2,#11151f);border:1px solid var(--line,#222a3a);border-radius:14px;cursor:pointer;color:inherit;font:inherit}
.fold-card:hover{border-color:#2f7bff;background:rgba(47,123,255,.06)}
.fold-ic{font-size:30px}
.fold-nm{font-weight:600;font-size:13.5px;text-align:center}
.fold-files{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.fold-file{display:flex;align-items:center;gap:11px;padding:10px 12px;background:var(--card2,#11151f);border:1px solid var(--line,#222a3a);border-radius:11px}
.ff-ic{font-size:20px;flex-shrink:0}
.ff-main{flex:1;display:flex;flex-direction:column;min-width:0}
.ff-nm{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ff-del{color:var(--muted,#8a93a6)}.ff-del:hover{color:#e5484d}
/* System self-check */
.st-list{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.st-row{display:flex;align-items:center;gap:9px;font-size:13px;padding:4px 0}
.st-ic{font-weight:800;width:16px}.st-ic.ok{color:#27c093}.st-ic.no{color:#e5484d}
.st-nm{font-weight:600;min-width:150px}
/* Generated images in chat */
.ask-imgs{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.ask-img{max-width:260px;max-height:260px;border-radius:12px;border:1px solid var(--line,#222a3a);cursor:pointer}
.ag-act-img{max-width:200px;max-height:200px;border-radius:10px;margin:6px 0;display:block}
.needs-done{background:transparent;border:0;color:#27c093;font-size:11.5px;font-weight:600;cursor:pointer;opacity:.85;padding:4px 6px}
.needs-done:hover{opacity:1}
.ac-tune{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.ac-tunerow{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:13px}
.ac-tunerow input[type=range]{flex:0 0 160px}
/* Meeting intelligence card */
.meet-card{background:var(--card2,#11151f);border:1px solid var(--line,#222a3a);border-left:3px solid #2f7bff;border-radius:12px;padding:13px 15px;margin:0 0 14px}
.meet-h{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted,#8a93a6);font-weight:700}
.meet-title{font-size:16px;font-weight:700;margin:3px 0 6px}
.meet-who{font-size:13px;margin:0 0 4px}
.meet-sec{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#2f7bff;font-weight:700;margin:10px 0 2px}
/* Per-company lens */
.co-bar{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 12px}
.co-chip{font-size:12.5px;font-weight:600;background:var(--card2,#11151f);border:1px solid var(--line,#222a3a);border-radius:99px;padding:6px 13px;cursor:pointer;color:inherit}
.co-chip.active{background:#2f7bff;border-color:#2f7bff;color:#fff}
/* Briefings / decisions */
.br-co{font-size:13px;padding:3px 0}
.dec-row{display:flex;align-items:baseline;gap:9px;padding:8px 10px;border-bottom:1px solid var(--line,#222a3a);font-size:13px}
.dec-topic{flex-shrink:0;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:#2f7bff;font-weight:700;min-width:80px}
.dec-what{flex:1}
/* ===================== GOD MODE ===================== */
.emg-btn{background:#2a0e12;border:1px solid #ff3b4e66;color:#ff6b78;font-weight:800;letter-spacing:.04em;font-size:12px;padding:6px 12px;border-radius:8px;cursor:pointer;white-space:nowrap}
.emg-btn:hover{background:#3a1118;border-color:#ff3b4e}
.emg-btn.on{background:#ff2435;border-color:#ff2435;color:#fff;box-shadow:0 0 16px #ff2435aa;animation:emgpulse 1.4s ease-in-out infinite}
@keyframes emgpulse{0%,100%{box-shadow:0 0 10px #ff2435aa}50%{box-shadow:0 0 22px #ff2435ee}}
.emg-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;background:linear-gradient(90deg,#c0101f,#e01b2c);color:#fff;font-size:14px;font-weight:600;padding:10px 18px;box-shadow:0 2px 14px rgba(224,27,44,.5)}
.emg-banner b{font-weight:800}
.emg-resume{background:#fff;color:#c0101f;border:0;border-radius:999px;font:inherit;font-weight:800;font-size:13px;padding:6px 16px;cursor:pointer;white-space:nowrap}
.emg-resume:hover{filter:brightness(.95)}
@media (max-width:720px){.emg-btn{font-size:0;padding:6px 9px}.emg-btn::before{content:"🛑";font-size:15px}.emg-banner{font-size:12px;padding:9px 12px}}
.god-btn{background:linear-gradient(90deg,#00e5ff22,#2f7bff22);border:1px solid #00e5ff66;color:#00e5ff;font-weight:800;letter-spacing:.06em;font-size:12px;padding:6px 12px;border-radius:8px;cursor:pointer;text-shadow:0 0 8px #00e5ff88}
.god-btn:hover{background:linear-gradient(90deg,#00e5ff33,#2f7bff33);box-shadow:0 0 16px #00e5ff55}
body.god-on{overflow:hidden}
.godmode{position:fixed;inset:0;z-index:9999;background:radial-gradient(ellipse at 50% 38%,#04122a 0%,#020814 60%,#01040a 100%);color:#cfeefe;font-family:ui-monospace,"SF Mono",Menlo,monospace;animation:godfade .5s ease}
@keyframes godfade{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:none}}
#godCanvas{position:absolute;inset:0}
.god-grid{position:absolute;inset:0;background-image:linear-gradient(#00e5ff0d 1px,transparent 1px),linear-gradient(90deg,#00e5ff0d 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 50% 42%,#000 40%,transparent 85%);pointer-events:none}
.god-scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,#ffffff05 0,#ffffff05 1px,transparent 2px,transparent 4px);pointer-events:none;animation:godscan 8s linear infinite}
@keyframes godscan{to{background-position:0 200px}}
.god-hud{position:absolute;inset:0;pointer-events:none}
.god-hud>*{pointer-events:auto}
.god-top{position:absolute;top:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;font-size:13px}
.god-title{font-weight:900;letter-spacing:.22em;color:#00e5ff;text-shadow:0 0 14px #00e5ff}
.god-sub{color:#7fd0e8;letter-spacing:.12em;font-size:11px}
.god-exit{background:transparent;border:1px solid #00e5ff66;color:#00e5ff;border-radius:6px;padding:4px 10px;cursor:pointer;font-family:inherit;letter-spacing:.1em}
.god-exit:hover{background:#00e5ff22}
.god-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}
.god-bignum{font-size:64px;font-weight:900;color:#fff;text-shadow:0 0 30px #00e5ffcc;line-height:1}
.god-biglbl{letter-spacing:.34em;font-size:11px;color:#7fd0e8;margin-top:6px;text-transform:uppercase}
.god-card{position:absolute;width:270px;max-width:32vw;background:rgba(4,18,40,.55);border:1px solid #00e5ff33;border-radius:12px;padding:12px 14px;backdrop-filter:blur(6px);box-shadow:0 0 30px #00132b88,inset 0 0 20px #00e5ff0a}
.god-card.tl{top:74px;left:24px}.god-card.tr{top:74px;right:24px}.god-card.bl{bottom:84px;left:24px}.god-card.br{bottom:84px;right:24px}
.gc-h{font-size:11px;letter-spacing:.18em;color:#00e5ff;margin-bottom:10px;text-shadow:0 0 8px #00e5ff66}
.gc-body{font-size:12.5px}
.grow{display:flex;align-items:center;gap:8px;margin:6px 0}
.grow span{flex:0 0 88px;color:#9fd6ea}
.grow.sm span{flex:1;color:#8fc4dd;font-size:11px}
.grow b{margin-left:auto;color:#fff;font-weight:700}
.grow b.ok{color:#27f0a8}.grow b.warn{color:#ff6;}
.grow i{color:#00e5ff;font-style:normal;font-size:11px}
.gbar{flex:1;height:6px;border-radius:4px;background:#0a2540;overflow:hidden}
.gbar>span{display:block;height:100%;border-radius:4px;box-shadow:0 0 8px currentColor}
.god-ticker{position:absolute;bottom:26px;left:0;right:0;overflow:hidden;white-space:nowrap;border-top:1px solid #00e5ff22;border-bottom:1px solid #00e5ff22;padding:8px 0;background:#02101f88}
.gt-track{display:inline-block;animation:gtick 34s linear infinite}
.gt-track span{margin:0 28px;color:#7fd0e8;font-size:12px;letter-spacing:.08em}
@keyframes gtick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
:root{--god-cyan:#00e5ff}
@media (max-width:700px){.god-card{width:44vw;max-width:44vw;padding:9px}.god-bignum{font-size:42px}.god-card.bl,.god-card.br{bottom:74px}}
/* God Mode v2 — headline, foresight, live feed */
.god-headline{position:absolute;top:46px;left:50%;transform:translateX(-50%);max-width:70vw;text-align:center;color:#7fe9ff;font-size:13px;letter-spacing:.06em;text-shadow:0 0 12px #00e5ff66;animation:godpulse 3s ease-in-out infinite}
@keyframes godpulse{0%,100%{opacity:.7}50%{opacity:1}}
.god-minirow{display:flex;gap:22px;justify-content:center;margin-top:14px;font-size:11px;color:#9fd6ea;letter-spacing:.08em}
.god-minirow b{color:#fff;font-size:15px;text-shadow:0 0 10px #00e5ff88}
.god-fore{position:absolute;left:50%;transform:translateX(-50%);bottom:150px;width:420px;max-width:60vw;background:rgba(4,18,40,.5);border:1px solid #00e5ff33;border-radius:12px;padding:11px 14px;backdrop-filter:blur(6px);box-shadow:0 0 26px #00132b88}
.god-fore .grow.sm{align-items:flex-start}
.god-fore i{flex:0 0 78px;color:#00e5ff;font-style:normal;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em}
.god-fore span{color:#cfeefe}
.god-live{position:absolute;right:24px;top:50%;transform:translateY(-50%);width:300px;max-width:32vw;max-height:46vh;overflow:hidden;background:rgba(4,18,40,.45);border:1px solid #00e5ff2a;border-radius:12px;padding:10px 12px;backdrop-filter:blur(5px)}
.gl-feed{display:flex;flex-direction:column;gap:3px;overflow:hidden}
.gl-row{display:flex;align-items:center;gap:7px;font-size:11px;padding:3px 0;border-bottom:1px solid #ffffff08;animation:glin .5s ease}
@keyframes glin{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.gl-ic{flex:0 0 16px;text-align:center}
.gl-who{flex:0 0 84px;color:#7fd0e8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gl-tx{flex:1;color:#bfe6f5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gl-t{flex:0 0 auto;color:#5a8aa0;font-size:10px}
@media (max-width:760px){.god-live{display:none}.god-fore{bottom:120px;width:84vw}}
/* ===================== MOBILE POLISH (consolidated) ===================== */
/* Recall results */
.rc-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.rc-row{display:flex;gap:9px;padding:9px 11px;background:var(--card2,#11151f);border:1px solid var(--line,#222a3a);border-radius:10px}
.rc-ic{flex-shrink:0;font-size:16px}
.rc-main{display:flex;flex-direction:column;min-width:0}
.rc-ref{font-weight:600;font-size:12.5px}
.rc-tx{font-size:12px;color:var(--muted,#8a93a6);line-height:1.4}
@media (max-width:760px){
  /* Top bar: keep it from overflowing — trim verbose bits, keep tappable icons */
  #updated, .llm-badge { display:none !important; }
  .ask-btn{font-size:0;padding:8px 10px}            /* show just the ✦ glyph */
  .ask-btn::before{content:"✦";font-size:15px}
  .god-btn{font-size:0;padding:7px 9px;border-radius:8px}
  .god-btn::before{content:"◉";font-size:15px}
  .logout{font-size:0;padding:4px}
  .logout::before{content:"⎋";font-size:16px}
  .topbar-right{gap:6px}
  .topbar h1{font-size:16px}
  /* Cards & actions breathe + wrap */
  .card-section{padding:13px}
  .needs-actions{gap:5px}
  .ag-chip,.needs-done,.needs-dismiss,.needs-todo{padding:7px 10px;font-size:12px}  /* bigger tap targets */
  .co-bar{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .co-chip{flex:0 0 auto}
  .ig-ta{font-size:14px}                              /* avoid iOS zoom-on-focus */
  input,select,textarea{font-size:16px}               /* iOS: prevents auto-zoom */
  /* Briefings two-col → stack */
  .two-col{grid-template-columns:1fr}
  /* meeting + connection cards full width */
  .meet-card,.conn-strip{margin-left:0;margin-right:0}
}
@media (max-width:420px){
  .ins-pulse{grid-template-columns:repeat(2,1fr)}
  .fold-grid{grid-template-columns:repeat(2,1fr)}
  .god-minirow{flex-wrap:wrap;gap:10px 16px}
}

/* Health (WHOOP) */
.h-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:14px}
.h-tile{background:var(--card,#11192b);border:1px solid var(--line,#222a3a);border-radius:14px;padding:14px 16px}
.h-tile-l{font-size:.8rem;color:var(--muted,#8b95a7);text-transform:uppercase;letter-spacing:.04em}
.h-tile-v{font-size:1.5rem;font-weight:700;margin:4px 0 2px}
.btn.ghost{background:transparent}
.h-charts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.h-chart{background:var(--card,#11192b);border:1px solid var(--line,#222a3a);border-radius:14px;padding:12px 14px}
.h-chart-h{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;font-size:.9rem}
.h-chart-now{font-size:1.1rem;font-weight:700}
.h-chart-svg{width:100%;height:120px;display:block;margin:6px 0}
.h-chart-x{display:flex;justify-content:space-between}
.h-stages{display:flex;height:22px;border-radius:7px;overflow:hidden;background:#222a3a}
.h-stages>div{height:100%}
.h-stages-leg{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;font-size:.82rem;color:var(--muted,#8b95a7)}
.h-stages-leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:middle}
.h-zonebar{display:flex;height:24px;border-radius:7px;overflow:hidden;background:#222a3a}
.h-wo{width:100%;border-collapse:collapse;font-size:.9rem}
.h-wo th{text-align:left;color:var(--muted,#8b95a7);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line,#222a3a)}
.h-wo td{padding:7px 8px;border-bottom:1px solid var(--line,#1b2334)}
.h-coef{display:flex;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid var(--line,#1b2334)}
.h-coef:last-child{border-bottom:0}
.h-coef-l{flex:0 0 34%;font-weight:600;font-size:.9rem}
.h-coef-l .muted{font-weight:400;display:block;margin-top:2px}
.h-coef-bar{position:relative;flex:1;height:12px;background:#222a3a;border-radius:6px}
.h-coef-mid{position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:#586174}
.h-coef-fill{position:absolute;top:0;height:100%;border-radius:6px}
.h-coef-v{flex:0 0 84px;text-align:right;font-weight:700;font-size:.9rem}
.h-coef-v .muted{font-weight:400;font-size:.75rem;display:block}
.h-week-row{display:flex;gap:12px;padding:7px 0;border-bottom:1px solid var(--line,#1b2334);font-size:.9rem}
.h-week-row:last-child{border-bottom:0}
.h-week-day{flex:0 0 52px;font-weight:700;color:var(--muted,#8b95a7)}
.pl-pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:6px}
.pl-pillar-h{display:flex;justify-content:space-between;font-size:.85rem;font-weight:600;margin-bottom:4px}
.pl-bar{height:8px;background:#222a3a;border-radius:5px;overflow:hidden}
.pl-bar>div{height:100%;border-radius:5px}

/* ===================== TASTE REDESIGN LAYER (2026-07-01) ===================== */
/* Refined cold-ink system: off-black neutral base, one blue accent, tinted depth, locked radius, subtle motion. */
:root { --ease: cubic-bezier(.4,0,.2,1); }
body { letter-spacing: -0.005em; background: radial-gradient(1000px 640px at 90% -15%, #131d39 0%, var(--bg) 46%) fixed; }
body[data-theme="light"] { background: radial-gradient(1000px 640px at 90% -15%, #e9eefb 0%, var(--bg) 50%) fixed; }
a, button, .btn, .tile, .card-section, .gauge, .navitem, input, select, textarea, .pill, .seg, .llm-prov, .lead-card, .rep-card, .note-item {
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-soft); }

/* typography polish — tabular figures for data, tighter display numbers */
.tile .n, .gauge .val, table td, table th { font-variant-numeric: tabular-nums; }
.tile .n { letter-spacing: -0.03em; font-weight: 680; }
h2 { letter-spacing: -0.012em; }
.section-title, .tile .l { letter-spacing: 0.07em; }

/* elevation — cards & tiles get tinted depth + a locked radius */
.card-section { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.tile, .gauge { border-radius: var(--radius); box-shadow: var(--shadow); }
.tile:hover { transform: translateY(-2px); border-color: var(--accent-line); box-shadow: var(--shadow-lg); }

/* progress bars — single accent, no rainbow gradients */
.bar { background: var(--line-soft); height: 7px; border-radius: 999px; }
.bar > span { background: var(--accent); }
.bar.warn > span { background: var(--degraded); }
.bar.crit > span { background: var(--down); }

/* buttons — one consistent system (filled accent / hairline ghost) */
.btn { background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: var(--radius-sm); font-weight: 600; padding: 8px 15px; cursor: pointer; }
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--accent-line); background: var(--accent-soft); filter: none; }
.btn.sm { padding: 5px 11px; font-size: 12px; border-radius: 7px; }

/* sidebar nav — clear, single-accent active state */
#sidebarNav .navitem, #sidebarNav button, #bottomNav button { border-radius: var(--radius-sm); color: var(--muted); border: 1px solid transparent; }
#sidebarNav .navitem:hover, #sidebarNav button:hover { color: var(--text); background: var(--line-soft); }
#sidebarNav .navitem.active, #sidebarNav button.active, #bottomNav button.active { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }

/* form fields — consistent, with a soft accent focus ring */
input, select, textarea { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); padding: 8px 11px; font: inherit; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .75; }

/* hairline separation over heavy boxes */
table th { color: var(--muted); border-bottom: 1px solid var(--line); }
table td { border-bottom: 1px solid var(--line-soft); }
.llm-prov { border-radius: var(--radius); }
.llm-prov.active { border-color: var(--accent-line); background: var(--accent-soft); }
.pill { border-radius: 999px; }

/* topbar — cleaner */
.brand h1 { letter-spacing: -0.02em; }
.logout:hover, .emg-btn:hover { border-color: var(--accent-line); }

/* ============ typographic system (multi-skill: frontend-design + aesthetic + typography-selector) ============ */
/* Display face carries personality — headings, brand, section labels, nav. */
.brand h1, h1, h2, h3, .section-title, .card-section h2, .connect-head h2, .drawer-head, .nav-group-h, .tabs button, .subtab, .navitem, .bottomnav button, .drawer-group-h {
  font-family: var(--font-display);
}
.brand h1 { letter-spacing: -0.03em; font-weight: 700; }
h1, h2 { letter-spacing: -0.02em; }
.section-title, .card-section h2 { letter-spacing: 0.07em; } /* small caps labels breathe */
/* Metrics in mono with tabular figures — a real command-center read. */
.tile .n, .dossier-stats b, .br-days, .leaderboard .score, .gauge .val, .agenda .ag-time, .pl-pillar-h span:last-child, .u-badge, .aw-days {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
/* Motion: entry ease-out, ~180ms (aesthetic skill: 150-300ms). */
.tile, .gauge, .card-section, .proj, .navitem, .br-chip, .btn, .lead-card, .rep-card, .note-item { transition-timing-function: var(--ease-out); }
.panel-enter { animation: panelEnter .2s var(--ease-out); }

/* brain / situation view */
.br-list, .br-await, .br-mem { list-style:none; display:flex; flex-direction:column; gap:7px; margin:0; padding:0; }
.br-list li, .br-mem li { font-size:14px; line-height:1.5; }
.br-await li.br-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 11px; border-radius:9px; background:var(--bg2); font-size:14px; }
.br-days { white-space:nowrap; font-weight:600; font-variant-numeric:tabular-nums; }
.br-chips { display:flex; flex-wrap:wrap; gap:8px; }
.br-chip { display:inline-flex; align-items:center; gap:6px; font-size:13px; padding:6px 11px; border:1px solid var(--line); border-radius:999px; background:var(--card2); }
.br-mem li { padding-left:2px; }
.br-kind { display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line); padding:1px 7px; border-radius:999px; margin-right:6px; vertical-align:middle; }
.br-click { cursor:pointer; transition:border-color .15s, background .15s; }
.br-chip.br-click:hover { border-color:var(--accent-line); background:var(--accent-soft); }
.br-await li.br-click:hover { background:var(--accent-soft); }
/* person dossier modal */
.dossier-ov { position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.5); backdrop-filter:blur(3px); display:flex; align-items:flex-start; justify-content:center; padding:8vh 16px 16px; }
.dossier-ov[hidden] { display:none; }
.dossier-card { position:relative; width:100%; max-width:520px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:22px; max-height:80vh; overflow-y:auto; }
.dossier-x { position:absolute; top:12px; right:12px; background:transparent; border:0; color:var(--muted); font-size:18px; cursor:pointer; line-height:1; }
.dossier-x:hover { color:var(--text); }
.dossier-flag { font-size:13px; font-weight:600; color:var(--degraded); background:rgba(245,177,61,.12); border:1px solid rgba(245,177,61,.3); border-radius:9px; padding:8px 11px; margin-bottom:12px; }
.dossier-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:6px; }
.dossier-stats > div { background:var(--bg2); border-radius:9px; padding:10px 8px; text-align:center; }
.dossier-stats b { display:block; font-size:16px; font-variant-numeric:tabular-nums; }
.dossier-stats span { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
@media (max-width:520px){ .dossier-stats { grid-template-columns:repeat(2,1fr); } }

/* refined scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--accent-line); background-clip: padding-box; }

/* ============ mobile & PWA safe-area (iPhone notch) — authoritative, load-order wins ============ */
/* Home-screen app renders full-screen under the status bar/notch (black-translucent + viewport-fit=cover).
   env(safe-area-inset-*) resolves to 0 on devices without a notch, so every rule below is safe everywhere. */

/* top bar drops below the notch and stays tappable */
.topbar {
  padding-top: calc(16px + env(safe-area-inset-top));
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}
/* sticky elements anchored under the top bar shift down by the same inset so nothing hides behind it */
.subtabs, .sidebar { top: calc(65px + env(safe-area-inset-top)); }
.sidebar { height: calc(100vh - 65px - env(safe-area-inset-top)); }
.tabs { top: calc(58px + env(safe-area-inset-top)); }
/* slide-in menu + floating panels clear the notch too */
.drawer { padding-top: calc(20px + env(safe-area-inset-top)); }
.lead-drawer { padding-top: env(safe-area-inset-top); }
.notif-panel { top: calc(60px + env(safe-area-inset-top)); }
.shortcut-bar { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }

@media (max-width:720px){
  .topbar {
    padding-top: calc(14px + env(safe-area-inset-top));
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  .subtabs { top: calc(56px + env(safe-area-inset-top)); }
  .content { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .notif-panel { top: calc(54px + env(safe-area-inset-top)); }
  /* bottom nav clears the home indicator */
  .bottomnav {
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); overflow-x: hidden; }

  /* stop iOS auto-zoom on focus: all form fields ≥16px */
  input, select, textarea, .conv-search, .stack input, .stack textarea, .ai-draft, .u-role, .em-sel { font-size: 16px; }
  /* finger-friendly tap targets */
  .btn, .seg, .tabs button, .bottomnav button, .navitem, .drawer button[data-tab] { min-height: 42px; }
  .logout, .ask-btn, .god-btn, .menu-btn { min-height: 38px; min-width: 38px; }
  /* wide admin table scrolls horizontally instead of stretching the page */
  .u-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}