/* SalesBot — White Glass (formal): frosted-glass layers from the AI Monitor look, on a white/neutral tone.
   Light only — this is used in official settings. Loaded last, overrides tokens + materials of index.html;
   layout, copy and JS untouched: delete the <link> to go back.
   Background photo: Unsplash photo-1600210492486 (free licence), desaturated under a white veil. */

:root {
  --page: #f4f5f7;
  --bg: transparent;
  --glass: rgba(255, 255, 255, .62); --tile: rgba(255, 255, 255, .9); --solid: #ffffff; --plane: rgba(255, 255, 255, .72);
  --card: var(--glass); --surface: var(--tile);
  --line: rgba(255, 255, 255, .85); --line2: rgba(31, 38, 48, .09);
  --ink: #1d222a; --ink2: #333a45; --muted: #4c5562; --faint: #59626f;
  --accent: #1f252e; --accent-h: #343c48; --on-accent: #ffffff; --accent-ink: #1f3f66;
  --hover: rgba(255, 255, 255, .7); --pressed: rgba(31, 38, 48, .08); --chip: rgba(31, 38, 48, .07);
  --ok: #1f5a36; --ok-bg: rgba(46, 125, 80, .13);
  --warn: #6e3c00; --warn-mark: #d18a2c; --warn-bg: rgba(209, 138, 44, .16);
  --bad: #8a1f17; --bad-mark: #cc4436; --bad-bg: rgba(204, 68, 54, .12);
  --sheen: rgba(255, 255, 255, .55);
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(31, 38, 48, .05),
            0 1px 2px rgba(20, 28, 40, .05), 0 14px 32px -14px rgba(20, 28, 40, .16), 0 40px 80px -40px rgba(20, 28, 40, .2);
  --lift: inset 0 1px 0 #fff, 0 1px 1px rgba(20, 28, 40, .04), 0 8px 18px -10px rgba(20, 28, 40, .16);
  --pop-shadow: 0 18px 48px rgba(20, 28, 40, .18);
  --glass-blur: blur(24px) saturate(120%);
  --photo-veil: linear-gradient(180deg, rgba(255, 255, 255, .64), rgba(246, 247, 249, .78));
  --hero: linear-gradient(160deg, #2b323c, #1a1f26); --hero-ink: #ffffff; --hero-ink-2: #dfe4ea;
  --hero-chip: rgba(255, 255, 255, .12); --hero-line: rgba(255, 255, 255, .22);
  color-scheme: light;
}

/* ---------- layer 0: blurred room photo, nearly white ---------- */
html { background: var(--page); }
body { background: transparent; font-family: "Anuphan", "Inter", -apple-system, "Segoe UI", sans-serif; }
body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; }
body::before { inset: -28px; background: url(/static/bg.jpg) center / cover no-repeat; filter: blur(10px) saturate(.25); }
body::after { inset: 0; background: var(--photo-veil); }
::selection { background: rgba(31, 63, 102, .18); color: var(--ink); }
* { scrollbar-color: rgba(31, 38, 48, .25) transparent; }

/* ---------- layer 1: frosted glass with a top sheen ---------- */
.sidebar, .card, .stat, .bell, .hamburger, .topbar > div:first-child {
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  background: linear-gradient(180deg, var(--sheen), transparent 120px), var(--glass);
  border-color: var(--line); box-shadow: var(--shadow);
}
.sidebar { border-right: 1px solid var(--line); margin: 14px 0 14px 14px; border-radius: 22px; border: 1px solid var(--line); }
.card { border-radius: 20px; }
.stat { border-radius: 18px; }
.card .card { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
/* page title never sits straight on the photo */
.topbar > div:first-child { padding: 10px 18px; border-radius: 18px; border: 1px solid var(--line); }
.topbar .hamburger { box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--tile); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: #f3e7d6; }
}

/* ---------- layer 2: opaque cream pieces inside glass ---------- */
.card { --surface: var(--tile); }
.stat-sm, .sched-info, .sched-remind, .sched-vis-card, .msg .bubble, .chip, #draftBody {
  background: var(--tile); border-color: transparent; box-shadow: var(--lift);
}
.msg.user .bubble { background: var(--accent); color: var(--on-accent); box-shadow: var(--lift); }
.msg .ic, .who .av, .nicon, .sched-info-ico, .sched-vis-card .vc-icon { background: var(--chip); color: var(--ink2); }
.msg.user .ic { background: var(--accent); color: var(--on-accent); }

/* popups + dialogs: near-opaque so they read cleanly */
.bell-popup, .notif, .modal .box { background: var(--solid); border-color: var(--line); box-shadow: var(--pop-shadow); }
.modal { background: rgba(40, 26, 14, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ---------- controls ---------- */
.btn, .lnk, .chip-f, .pager button, select.flt { background: var(--tile); border-color: var(--line); color: var(--ink2); }
.btn:hover, .lnk:hover, .chip-f:hover, .bell:hover, .nav a:hover, .tabs button:hover, .bp-it:hover { background: var(--hover); }
.btn.primary, .chip-f.active, .pager button.active, .chat-input button { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-h); }
.nav a { color: var(--ink2); }
.nav a.active { background: var(--accent); color: var(--on-accent); box-shadow: 0 4px 14px rgba(48, 40, 33, .18); }
.nav a.active::before { display: none; }
.tabs button.active { background: var(--accent); color: var(--on-accent); }
.navcount, .chip-f .n { background: var(--chip); color: var(--ink2); }
.nav a.active .navcount, .chip-f.active .n { background: rgba(255, 255, 255, .2); color: var(--on-accent); }
.brand .mark { background: var(--accent); color: var(--on-accent); }
input, select, textarea, .search input, .chat-input input, .fld input, .fld select, .fu-add input, .sched-remind select {
  background-color: var(--plane); color: var(--ink); border-color: rgba(31, 38, 48, .18);
}
.modal .box input, .modal .box select, .modal .box textarea { background-color: #f7f8fa; }
input:focus, select:focus, textarea:focus { border-color: var(--ink2); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.who .sel { border-color: var(--line); background: var(--plane); }

/* dashboard pieces */
.drow:hover { background: var(--hover); }
.bar-track { background: var(--chip); box-shadow: inset 0 1px 2px rgba(20, 28, 40, .12); }
.bar-fill { background: var(--warn-mark); }
.bar-fill.hot { background: var(--bad-mark); }
.dash-side .card, .dash-grid > .card { --surface: var(--tile); }

/* tables: transparent head, thin rules */
th { background: transparent; color: var(--muted); }
tr.clickable:hover, tr.clickable:hover td { background: var(--hover); }

/* status: soft fill + thin edge, never a thick colored stripe */
.b-ok { background: var(--ok-bg); color: var(--ok); }
.b-warn { background: var(--warn-bg); color: var(--warn); }
.b-bad { background: var(--bad-bg); color: var(--bad); }
.b-mut { background: var(--chip); color: var(--muted); }
.dot-warn, .bp-dot.amber, .nrow .dot.amber { background: var(--warn-mark); }
.dot-bad, .bp-dot.red, .nrow .dot.red { background: var(--bad-mark); }
.bell .badge { background: #a8352b; color: #fff; }

/* schedule picker: espresso instead of indigo */
.sched-vis-card.selected { border-color: var(--accent); background: var(--tile); box-shadow: 0 0 0 3px var(--chip), var(--lift); }
.sched-vis-card.selected .radio-dot { border-color: var(--accent); background: var(--accent); }
.sched-vis-card.selected .radio-dot::after { background: var(--on-accent); }
.sched-vis-card.selected .vc-icon { background: var(--accent); color: var(--on-accent); }
.user-tag { background: var(--tile); border-color: var(--line); }
.user-tag:hover { border-color: var(--accent); color: var(--accent-ink); }
.user-tag.picked { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.sched-remind input[type=checkbox] { accent-color: var(--accent); }

/* ---------- the one emphasis: morning briefing is the espresso slab ---------- */
.brief {
  background: var(--hero); border-color: transparent; color: var(--hero-ink);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 4px rgba(40, 26, 14, .18), 0 18px 36px -12px rgba(40, 26, 14, .45);
}
.brief-icon { background: var(--hero-chip); }
.brief-icon .ico { stroke: var(--hero-ink) !important; }
.brief-body { color: var(--hero-ink-2); }
.brief-body .md-h, .brief-body strong { color: var(--hero-ink); }
.brief .lnk { color: var(--hero-ink); border-color: var(--hero-line); background: var(--hero-chip); }

@media (max-width: 820px) {
  .sidebar { margin: 0; border-radius: 0 22px 22px 0; background: var(--solid); }
  .topbar > div:first-child { padding: 8px 12px; }
}
@media (pointer: coarse) { .btn, .chip-f, .lnk { min-height: 44px; } }