/* Lyche UI kit — "Pulso" design system for the Customer Panel and Super Admin.
 *
 * Palette: LYCHE Pulso (approved 2026-10-10). Burgundy is the signature and
 * always pairs with lavender; lime is the attention spark and is used only for
 * live/attention signals; navy carries text and structure; ivory is the room
 * the interface breathes in; violet is the digital accent (links, focus, data).
 *
 * Structure and interaction patterns are inspired by Arc Library
 * (MIT, © 2026 Elia Kuratli — https://github.com/kuratlielia/arc-library):
 * semantic tokens, calm physical motion, reduced-motion paths. No Arc source
 * is copied here; these are original vanilla CSS/JS implementations.
 */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,650;12..96,800&family=Instrument+Sans:wght@400;500;600;700&display=swap");

:root {
  /* brand */
  --burgundy: #92003F;
  --burgundy-ink: #6E002F;
  --lavender: #CFACFC;
  --lavender-soft: #EEE2FE;
  --lime: #C6EB36;
  --navy: #0F324E;
  --ivory: #F7EDE6;
  --violet: #663BE8;
  --brand-ink: var(--burgundy); /* brand-coloured text: burgundy in light, lavender in dark */

  /* semantic */
  --background: var(--ivory);
  --surface: #FFFDFB;
  --surface-sunk: #F1E4DA;
  --ink: var(--navy);
  --ink-soft: #4A6276;
  --ink-faint: #536B7D;
  --line: rgba(15, 50, 78, .12);
  --line-strong: rgba(15, 50, 78, .22);
  --accent: var(--burgundy);
  --accent-ink: #FFFFFF;
  --link: var(--violet);
  --focus: var(--violet);
  --spark: var(--lime);
  --good: #1D7A4F;
  --good-bg: #E3F4EA;
  --warn: #8A5A00;
  --warn-bg: #FFF1CC;
  --bad: #B3261E;
  --bad-bg: #FCE4E2;

  /* type */
  --font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --font-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --step--1: .8125rem;
  --step-0: .9375rem;
  --step-1: 1.125rem;
  --step-2: 1.5rem;
  --step-3: 2.125rem;
  --step-4: 3.25rem;

  /* shape & space — radius follows hierarchy: shells are soft, controls are crisp */
  --r-shell: 28px;
  --r-card: 20px;
  --r-control: 12px;
  --r-pill: 999px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --shadow-lift: 0 1px 0 rgba(15,50,78,.04), 0 12px 32px -18px rgba(15,50,78,.35);

  /* motion: calm and physical */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --dur-1: 140ms; --dur-2: 240ms; --dur-3: 420ms;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --background: #081C2C;
  --surface: #0F2A40;
  --surface-sunk: #0B2234;
  --ink: #F4E9E1;
  --ink-soft: #B9C6D2;
  --ink-faint: #A2B3C2;
  --line: rgba(244, 233, 225, .12);
  --line-strong: rgba(244, 233, 225, .24);
  --accent: #C2185B;
  --link: #A98BFF;
  --focus: #A98BFF;
  --lavender-soft: #2B2350;
  --brand-ink: var(--lavender);
  --good-bg: #123B2A; --warn-bg: #3A2E0E; --bad-bg: #42171A;
  --good: #7FDCA8; --warn: #F2C35B; --bad: #FF8F86;
  color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --background: #081C2C;
  --surface: #0F2A40;
  --surface-sunk: #0B2234;
  --ink: #F4E9E1;
  --ink-soft: #B9C6D2;
  --ink-faint: #A2B3C2;
  --line: rgba(244, 233, 225, .12);
  --line-strong: rgba(244, 233, 225, .24);
  --accent: #C2185B;
  --link: #A98BFF;
  --focus: #A98BFF;
  --lavender-soft: #2B2350;
  --brand-ink: var(--lavender);
  --good-bg: #123B2A; --warn-bg: #3A2E0E; --bad-bg: #42171A;
  --good: #7FDCA8; --warn: #F2C35B; --bad: #FF8F86;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font: 400 var(--step-0)/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 650; letter-spacing: -.02em; margin: 0; line-height: 1.12; }
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--link); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
[tabindex="-1"]:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -48px; background: var(--ink); color: var(--background); padding: 10px 14px; border-radius: var(--r-control); z-index: 100; text-decoration: none; }
.skip-link:focus { top: 12px; }
.icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-lg { width: 26px; height: 26px; }

/* ── App shell ─────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
body { overflow-x: hidden; }
.rail {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-5) var(--space-4); border-right: 1px solid var(--line); background: var(--background);
}
.wordmark { display: flex; align-items: center; gap: 10px; padding: 4px 8px; text-decoration: none; color: var(--ink); }
.wordmark .mark { width: 34px; height: 34px; border-radius: 10px; background: var(--burgundy); color: var(--lavender); display: grid; place-items: center; font: 800 18px/1 var(--font-display); }
.wordmark strong { font: 800 1.25rem/1 var(--font-display); letter-spacing: -.03em; }
.wordmark small { display: block; color: var(--ink-faint); font-size: var(--step--1); margin-top: 3px; }
.nav { display: grid; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r-control);
  color: var(--ink-soft); text-decoration: none; font-weight: 600; position: relative;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.nav a:hover { background: var(--surface-sunk); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--lavender-soft); color: var(--brand-ink); }
:root[data-theme="dark"] .nav a[aria-current="page"] { color: var(--lavender); }
.nav a[aria-current="page"]::before { content: ""; position: absolute; left: -16px; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--burgundy); }
.nav .count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--r-pill); background: var(--burgundy); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.nav-group { display: grid; gap: 2px; }
.nav-group > span { padding: 0 12px 6px; color: var(--ink-faint); font-size: var(--step--1); font-weight: 600; }
.rail-foot { margin-top: auto; display: grid; gap: var(--space-3); }

.main { min-width: 0; padding: var(--space-5) var(--space-6) var(--space-7); }
.topbar { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.topbar .grow { flex: 1; min-width: 0; }
.search-trigger {
  display: flex; align-items: center; gap: 10px; width: min(380px, 100%); height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--ink-faint); cursor: pointer; text-align: left;
}
.search-trigger > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.search-trigger kbd { flex: none; white-space: nowrap; margin-left: auto; font: 600 11px/1 var(--font-ui); padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line); color: var(--ink-soft); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.page-head p { color: var(--ink-soft); margin-top: 6px; max-width: 60ch; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px;
  border-radius: var(--r-control); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font-weight: 650; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out), box-shadow var(--dur-1);
}
.btn:hover { background: var(--surface-sunk); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--burgundy); border-color: var(--burgundy); color: #fff; }
.btn-primary:hover { background: var(--burgundy-ink); }
.btn-quiet { border-color: transparent; background: transparent; }
.btn-sm { height: 34px; padding: 0 12px; font-size: var(--step--1); border-radius: 10px; }
.icon-btn { width: 44px; height: 44px; padding: 0; position: relative; }
.icon-btn .dot { position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--burgundy); box-shadow: 0 0 0 2px var(--surface); }

/* hold-to-confirm (Arc pattern): the fill grows while pressed */
.btn-hold { position: relative; overflow: hidden; }
.btn-hold .fill { position: absolute; inset: 0; background: var(--burgundy); transform-origin: left; transform: scaleX(0); opacity: .18; }
.btn-hold.holding .fill { transform: scaleX(1); transition: transform 900ms linear; }

/* ── Cards ─────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--space-5); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.card-head p { color: var(--ink-soft); font-size: var(--step--1); margin-top: 2px; }
.card-head > div { min-width: 0; }
.card-head > .badge, .card-head > .btn, .card-head > a { flex: none; }
.grid { display: grid; gap: var(--space-4); }
.grid-home { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-content: start; }

/* ── The Pulse: the signature element ──────────────────────── */
.pulse {
  position: relative; overflow: hidden; border-radius: var(--r-shell); padding: var(--space-6);
  background: var(--burgundy); color: #FFF5F8; min-height: 300px; display: grid; gap: var(--space-5); align-content: space-between;
}
.pulse-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.live { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; }
.live i { width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 rgba(198,235,54,.6); animation: livebeat 2.4s var(--ease-out) infinite; }
.live.paused i { background: var(--lavender); animation: none; }
@keyframes livebeat { 0% { box-shadow: 0 0 0 0 rgba(198,235,54,.55); } 70% { box-shadow: 0 0 0 12px rgba(198,235,54,0); } 100% { box-shadow: 0 0 0 0 rgba(198,235,54,0); } }
.pulse h1 { font-size: clamp(2rem, 4vw, var(--step-4)); font-weight: 800; color: var(--lavender); letter-spacing: -.035em; max-width: 14ch; }
.pulse h1 + .rule { width: 132px; height: 6px; border-radius: 3px; background: var(--lime); margin-top: 14px; }
.pulse-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.pulse-stats div { border-top: 1px solid rgba(255,245,248,.24); padding-top: var(--space-3); }
.pulse-stats strong { display: block; font: 800 var(--step-3)/1 var(--font-display); letter-spacing: -.03em; color: #fff; }
.pulse-stats span { color: rgba(255,245,248,.78); font-size: var(--step--1); }
.pulse svg.wave { position: absolute; right: -10px; top: 78px; width: 36%; height: 130px; opacity: .95; pointer-events: none; }
.pulse > *:not(svg) { position: relative; }
.pulse svg.wave path { fill: none; stroke: var(--lime); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pulse svg.wave .trace { stroke-dasharray: 900; stroke-dashoffset: 900; animation: trace 1.8s var(--ease-out) .2s forwards; }
.pulse svg.wave .ghost { stroke: rgba(207,172,252,.35); stroke-width: 2; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.pulse .btn { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: #fff; }
.pulse .btn:hover { background: rgba(255,255,255,.2); }

/* ── Metric card ───────────────────────────────────────────── */
.metric { display: grid; gap: 6px; }
.metric .label { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-weight: 600; font-size: var(--step--1); }
.metric .value { font: 800 var(--step-3)/1.05 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.metric .delta { font-size: var(--step--1); font-weight: 650; }
.delta.up { color: var(--good); } .delta.down { color: var(--bad); }
.spark { width: 100%; height: 40px; }
.spark path { fill: none; stroke: var(--violet); stroke-width: 2; stroke-linecap: round; }
.spark .area { fill: rgba(102,59,232,.10); stroke: none; }

/* ── Lists, rows, badges, avatars ──────────────────────────── */
.list { display: grid; grid-template-columns: minmax(0, 1fr); }
.row { display: flex; align-items: center; gap: var(--space-3); padding: 12px 0; border-top: 1px solid var(--line); }
.row:first-child { border-top: 0; }
.row .grow { flex: 1; min-width: 0; }
.row .title { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .sub { color: var(--ink-soft); font-size: var(--step--1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 700; background: var(--lavender-soft); color: var(--brand-ink); position: relative; }
.avatar .ch { position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface); }
.avatar .ch svg { width: 12px; height: 12px; }
.badge { flex: none; width: max-content; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; background: var(--surface-sunk); color: var(--ink-soft); white-space: nowrap; }
.badge.good { background: var(--good-bg); color: var(--good); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.bad { background: var(--bad-bg); color: var(--bad); }
.badge.brand { background: var(--lavender-soft); color: var(--brand-ink); }
.badge.spark { background: var(--lime); color: var(--navy); }
.time { color: var(--ink-faint); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Segmented control & switch ────────────────────────────── */
.segmented { display: inline-flex; padding: 4px; gap: 4px; background: var(--surface-sunk); border-radius: var(--r-control); }
.segmented button { border: 0; background: transparent; height: 34px; padding: 0 14px; border-radius: 9px; font-weight: 650; color: var(--ink-soft); cursor: pointer; }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(15,50,78,.12); }
.switch { position: relative; width: 52px; height: 30px; border-radius: var(--r-pill); border: 0; background: var(--line-strong); cursor: pointer; flex: none; transition: background var(--dur-2) var(--ease-out); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform var(--dur-2) var(--ease-spring); }
.switch[aria-checked="true"] { background: var(--burgundy); }
.switch[aria-checked="true"]::after { transform: translateX(22px); }

/* ── Usage meter & progress ────────────────────────────────── */
.meter { height: 10px; border-radius: var(--r-pill); background: var(--surface-sunk); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--burgundy), var(--violet)); }

/* ── Inbox & chat thread ───────────────────────────────────── */
.inbox { display: grid; grid-template-columns: 340px minmax(0, 1fr) 300px; height: calc(100vh - 150px); min-height: 560px; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--surface); }
.inbox > * { min-height: 0; }
.inbox-list { border-right: 1px solid var(--line); overflow: auto; }
.inbox-list .filters { position: sticky; top: 0; background: var(--surface); padding: var(--space-3); border-bottom: 1px solid var(--line); display: flex; gap: 6px; flex-wrap: wrap; z-index: 1; }
.chip { height: 32px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: transparent; font-weight: 600; font-size: var(--step--1); cursor: pointer; color: var(--ink-soft); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.thread-item { display: flex; gap: 12px; width: 100%; padding: 14px var(--space-4); border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.thread-item:hover { background: var(--surface-sunk); }
.thread-item[aria-selected="true"] { background: var(--lavender-soft); }
.thread-item .grow { min-width: 0; flex: 1; }
.thread-item .needs { width: 8px; height: 8px; border-radius: 50%; background: var(--burgundy); margin-top: 6px; flex: none; }
.chat { display: flex; flex-direction: column; min-width: 0; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.mode-bar { display: flex; align-items: center; gap: 10px; padding: 10px var(--space-4); font-size: var(--step--1); font-weight: 600; background: var(--lavender-soft); color: var(--brand-ink); }
.mode-bar.human { background: #FFF1CC; color: #6A4500; }
.messages { flex: 1; overflow: auto; padding: var(--space-5) var(--space-4); display: flex; flex-direction: column; gap: 10px; background: var(--background); }
.bubble { max-width: min(78%, 520px); padding: 10px 14px; border-radius: 18px; line-height: 1.45; animation: bubbleIn var(--dur-3) var(--ease-spring); }
.bubble small { display: block; margin-top: 4px; font-size: 11px; opacity: .7; }
.bubble.customer { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.bubble.bot { align-self: flex-end; background: var(--burgundy); color: #fff; border-bottom-right-radius: 6px; }
.bubble.human { align-self: flex-end; background: var(--navy); color: #fff; border-bottom-right-radius: 6px; }
.bubble.note { align-self: center; background: transparent; color: var(--ink-faint); font-size: 12px; padding: 2px; }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.composer { display: flex; gap: 8px; padding: var(--space-3); border-top: 1px solid var(--line); background: var(--surface); }
.composer input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border-radius: var(--r-control); border: 1px solid var(--line-strong); background: var(--surface); }
.composer input:disabled { background: var(--surface-sunk); }
.profile { border-left: 1px solid var(--line); padding: var(--space-5) var(--space-4); overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-content: start; }
.chat-head .grow { min-width: 0; }
.chat-head .title, .chat-head .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.facts { display: grid; gap: 10px; }
.facts div { display: flex; justify-content: space-between; gap: 10px; font-size: var(--step--1); }
.facts dt { color: var(--ink-soft); }
.facts dd { margin: 0; font-weight: 650; text-align: right; }

/* ── Orders board ──────────────────────────────────────────── */
.board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: var(--space-4); overflow-x: auto; padding-bottom: 4px; }
.lane { background: var(--surface-sunk); border-radius: var(--r-card); padding: var(--space-3); display: grid; gap: var(--space-3); align-content: start; min-height: 320px; }
.lane-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px; font-weight: 700; }
.order { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: var(--space-4); display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; cursor: grab; }
.order .badge { justify-self: start; }
.order:active { cursor: grabbing; }
.order .money { font: 800 var(--step-1)/1 var(--font-display); font-variant-numeric: tabular-nums; }

/* ── Agenda ────────────────────────────────────────────────── */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.day { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 10px; min-height: 220px; display: grid; gap: 8px; align-content: start; }
.day.today { border-color: var(--burgundy); box-shadow: inset 0 0 0 1px var(--burgundy); }
.day h3 { font-size: var(--step-0); display: flex; justify-content: space-between; }
.slot { border-radius: 12px; padding: 8px 10px; font-size: var(--step--1); background: var(--lavender-soft); color: var(--brand-ink); border-left: 4px solid var(--burgundy); }
.slot b { display: block; color: var(--ink); }
.slot.virtual { background: rgba(102,59,232,.10); border-left-color: var(--violet); color: var(--violet); }

/* ── Channels ──────────────────────────────────────────────── */
.channel { display: grid; gap: var(--space-3); }
.channel .glyph { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--surface-sunk); }

/* ── Tables (sortable data table) ──────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
th, td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--ink-soft); font-weight: 650; background: var(--surface); position: sticky; top: 0; }
th button { all: unset; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
th button:focus-visible { outline: 3px solid var(--focus); border-radius: 4px; }
tbody tr:hover { background: var(--surface-sunk); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.filter-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: var(--space-3); }
.field { height: 40px; padding: 0 12px; border-radius: var(--r-control); border: 1px solid var(--line-strong); background: var(--surface); min-width: 220px; }

/* ── Timeline ──────────────────────────────────────────────── */
.timeline { display: grid; gap: 0; }
.tl { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding-bottom: var(--space-4); position: relative; }
.tl::before { content: ""; position: absolute; left: 10px; top: 20px; bottom: 0; width: 2px; background: var(--line); }
.tl:last-child::before { display: none; }
.tl .node { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); }
.tl.bad .node { border-color: var(--bad); background: var(--bad-bg); }
.tl.warn .node { border-color: var(--warn); background: var(--warn-bg); }
.tl.good .node { border-color: var(--good); background: var(--good-bg); }

/* ── Bar chart ─────────────────────────────────────────────── */
.bars { display: grid; gap: 10px; }
.bar { display: grid; grid-template-columns: 140px 1fr 80px; align-items: center; gap: 12px; font-size: var(--step--1); }
.bar .track { height: 12px; border-radius: 6px; background: var(--surface-sunk); overflow: hidden; }
.bar .track i { display: block; height: 100%; border-radius: inherit; background: var(--violet); transform-origin: left; animation: grow var(--dur-3) var(--ease-out) both; }
.bar.top .track i { background: var(--burgundy); }
@keyframes grow { from { transform: scaleX(0); } }

/* ── Overlays: command palette, drawer, toast ──────────────── */
.scrim { position: fixed; inset: 0; background: rgba(15,50,78,.38); backdrop-filter: blur(2px); display: none; z-index: 50; }
.scrim.open { display: block; animation: fade var(--dur-2) var(--ease-out); }
@keyframes fade { from { opacity: 0; } }
.palette { position: fixed; left: 50%; top: 12vh; transform: translateX(-50%); width: min(620px, calc(100vw - 32px)); background: var(--surface); border-radius: var(--r-card); box-shadow: 0 30px 80px -20px rgba(15,50,78,.55); z-index: 60; display: none; overflow: hidden; }
.palette.open { display: block; animation: pop var(--dur-2) var(--ease-spring); }
@keyframes pop { from { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(.98); } }
.palette input { width: 100%; height: 60px; border: 0; border-bottom: 1px solid var(--line); padding: 0 20px; font-size: var(--step-1); background: transparent; }
.palette input:focus { outline: none; }
.palette ul { list-style: none; margin: 0; padding: 8px; max-height: 50vh; overflow: auto; }
.palette li button { display: flex; width: 100%; align-items: center; gap: 12px; padding: 12px; border: 0; background: transparent; border-radius: var(--r-control); cursor: pointer; text-align: left; font-weight: 600; }
.palette li button[aria-selected="true"], .palette li button:hover { background: var(--lavender-soft); color: var(--brand-ink); }
.drawer { position: fixed; top: 0; right: 0; height: 100vh; width: min(420px, 100vw); background: var(--surface); z-index: 60; box-shadow: -20px 0 60px -30px rgba(15,50,78,.6); transform: translateX(105%); visibility: hidden; transition: transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3); padding: var(--space-5); overflow: auto; }
.drawer.open { transform: none; visibility: visible; transition: transform var(--dur-3) var(--ease-out); }
.toasts { position: fixed; right: 20px; bottom: 20px; display: grid; gap: 10px; z-index: 70; }
.toast { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--navy); color: #fff; box-shadow: var(--shadow-lift); font-weight: 600; animation: toastIn var(--dur-3) var(--ease-spring); }
.toast .icon { color: var(--lime); }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.96); } }

/* ── Empty state ───────────────────────────────────────────── */
.empty { text-align: center; padding: var(--space-7) var(--space-5); display: grid; gap: 10px; justify-items: center; color: var(--ink-soft); }
.empty .glyph { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--lavender-soft); color: var(--brand-ink); }

/* ── Mobile bottom bar ─────────────────────────────────────── */
.tabbar { display: none; }

@media (max-width: 1180px) {
  .inbox { grid-template-columns: 300px minmax(0, 1fr); }
  .profile { display: none; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; }
  .rail { display: none; }
  .main { padding: var(--space-4) var(--space-4) 96px; }
  .grid-home, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .app > * { min-width: 0; }
  .board { grid-template-columns: repeat(4, 260px); }
  .week { grid-template-columns: repeat(7, 160px); overflow-x: auto; }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--surface); border-top: 1px solid var(--line); padding: 6px 6px max(6px, env(safe-area-inset-bottom));
  }
  .tabbar a { display: grid; justify-items: center; gap: 3px; padding: 6px 0; color: var(--ink-faint); text-decoration: none; font-size: 11px; font-weight: 650; border-radius: 10px; }
  .tabbar a[aria-current="page"] { color: var(--brand-ink); background: var(--lavender-soft); }
  .inbox { grid-template-columns: 1fr; height: auto; }
  .inbox-list { max-height: 320px; border-right: 0; border-bottom: 1px solid var(--line); }
  .messages { min-height: 360px; }
  .pulse { padding: var(--space-5); }
  .pulse svg.wave { width: 90%; opacity: .35; }
  .search-trigger { width: auto; flex: 1; }
  .search-trigger span, .search-trigger > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.search-trigger kbd { flex: none; white-space: nowrap; display: none; }
}
@media (max-width: 560px) {
  .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .row .badge { display: none; }
  .pulse-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
  .pulse-top .btn span, .pulse-top .btn { font-size: 0; gap: 0; width: 40px; padding: 0; }
  .pulse-top .btn .icon { font-size: initial; }
  .pulse-stats strong { font-size: var(--step-2); }
  .bar { grid-template-columns: 96px 1fr 64px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .pulse svg.wave .trace { stroke-dashoffset: 0; }
}

/* Arc Library patterns — MIT, © 2026 Elia Kuratli.
 * https://github.com/kuratlielia/arc-library · notice: ARC-LICENSE.txt.
 * Original vanilla port, preserving Pulso semantics and server-owned actions. */
:root{--ease-enter:cubic-bezier(.16,1,.3,1);--ease-standard:cubic-bezier(.22,1,.36,1);--ease-exit:cubic-bezier(.7,0,.84,0);--ease-in-out:cubic-bezier(.65,0,.35,1);--ease-spring:linear(0,.026,.09,.176,.273,.372,.468,.557,.638,.708,.769,.82,.863,.898,.926,.948,.965,.978,.988,.995,.999,1.003,1.005,1.006,1.006,1.004,1.002,1);--d-fast:120ms;--d-control:160ms;--d-standard:240ms;--d-considered:480ms;--d-spring:580ms;--dur-1:var(--d-control);--dur-2:var(--d-standard);--dur-3:var(--d-considered)}
.btn{transition:background var(--d-control) var(--ease-standard),transform var(--d-control) var(--ease-standard)}.btn:active{transform:translateY(1px)}
.arc-alert{display:flex;align-items:flex-start;gap:12px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);min-width:0}.arc-alert>div{min-width:0;flex:1}.arc-alert strong{display:block;font-weight:650}.arc-alert p{margin:4px 0 0;color:var(--ink-soft);line-height:1.55;font-size:13px}.arc-alert[data-tone=bad]{background:var(--bad-bg)}.arc-alert[data-tone=warn]{background:var(--warn-bg)}.arc-tone-icon{flex:none;width:22px;height:22px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;font-weight:700;color:var(--bad)}.arc-alert[data-tone=info] .arc-tone-icon{color:var(--link)}.arc-alert[data-tone=warn] .arc-tone-icon{color:var(--warn)}.arc-alert .arc-alert-close{flex:none;width:32px;min-height:32px;padding:4px;border:0;background:transparent;color:var(--ink-soft);font-size:20px;cursor:pointer}
body .arc-list-loading.nx-loading{display:grid;gap:16px;align-content:start;text-align:left;padding:20px;min-width:0}body .arc-list-loading.nx-loading::before{display:none!important;background-image:none!important}.arc-bones{display:grid;gap:12px;width:100%}.arc-sk{display:block;width:100%;height:32px;border-radius:10px;background:color-mix(in srgb,var(--ink) 9%,var(--surface));animation:arcPulse 1.8s var(--ease-in-out) calc(var(--i,0)*90ms) 11 both}.arc-sk:nth-child(2n){width:76%}@keyframes arcPulse{0%,100%{opacity:.55}50%{opacity:1}}
.arc-toasts{position:fixed;right:16px;bottom:max(24px,env(safe-area-inset-bottom));width:min(400px,calc(100vw - 32px));height:0;display:block;z-index:2200}.arc-toasts .arc-toast{position:absolute;bottom:0;right:0;width:100%;min-height:64px;border:1px solid #ffffff30;background:var(--navy);color:var(--ivory);padding:14px 16px;display:flex;align-items:center;gap:10px;border-radius:16px;transform:translateY(calc(var(--n)*-10px)) scale(calc(1 - var(--n)*.04));opacity:calc(1 - var(--n)*.16);transform-origin:bottom center;transition:transform var(--d-spring) var(--ease-spring),opacity var(--d-standard) var(--ease-standard);animation:arcToastIn var(--d-considered) var(--ease-spring)}.arc-toast-message{flex:1;min-width:0;overflow-wrap:anywhere;font-size:13px}.arc-toast .arc-tone-icon{color:var(--lime)}.arc-toast[data-tone=bad] .arc-tone-icon{color:var(--lavender)}.arc-toasts .arc-toast button{flex:none;border:1px solid #ffffff30;background:transparent;color:var(--ivory);font:inherit;font-size:12px;padding:6px 8px;min-height:32px;border-radius:8px;cursor:pointer}.arc-toasts:hover .arc-toast,.arc-toasts:focus-within .arc-toast{transform:translateY(calc(-1*var(--toast-offset)));opacity:1}.arc-toast:not(:first-child)>*{opacity:0}.arc-toasts:hover .arc-toast>*,.arc-toasts:focus-within .arc-toast>*{opacity:1}@keyframes arcToastIn{from{opacity:0;translate:0 12px}}
.arc-meter-track{height:10px;background:var(--surface-sunk);border-radius:999px;overflow:hidden;margin:12px 0}.arc-meter-track>span{display:block;height:100%;background:var(--burgundy);border-radius:inherit}.arc-meter[data-state=warning] .arc-meter-track>span{background:var(--warn)}.arc-meter[data-state=overage] .arc-meter-track>span{background:repeating-linear-gradient(135deg,var(--burgundy) 0 5px,var(--lavender) 5px 8px)}.arc-meter-note{color:var(--warn);font-size:13px;line-height:1.55}
.arc-shimmer,.nxTestPending{background:linear-gradient(100deg,var(--ink-soft) 30%,var(--ink) 50%,var(--ink-soft) 70%);background-size:200% 100%;background-clip:text;-webkit-background-clip:text;color:transparent!important;animation:arcShimmer 2.4s var(--ease-in-out) 11 both}@keyframes arcShimmer{from{background-position:100% 0}to{background-position:-100% 0}}
.pulso-sheet[open]{animation:arcSheetIn var(--d-spring) var(--ease-spring)}@keyframes arcSheetIn{from{opacity:0;transform:translateY(20px)}}.pulso-customer-profile .profileColumn{position:relative!important;display:block!important;inset:auto!important;transform:none!important;width:100%!important;max-width:none!important;height:auto!important;border:0!important;box-shadow:none!important;background:var(--surface);padding:0!important}.pulso-customer-profile .profileDrawerClose{display:block!important;margin:0 0 12px auto}.arc-empty{display:grid;gap:12px;justify-items:start;padding:24px;border:1px dashed var(--line-strong);border-radius:16px;background:var(--surface);color:var(--ink-soft);line-height:1.6}.arc-empty .btn{margin-top:4px}
.pulso-customer-profile .profile{display:grid!important;gap:16px;padding:0;border:0;overflow:visible}.pulso-customer-profile input,.pulso-customer-profile textarea{width:100%;max-width:100%;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--ink);padding:12px;font:inherit}.pulso-customer-profile textarea{min-height:96px}.pulso-customer-profile button{min-height:40px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}.pulso-customer-profile .nameCard,.pulso-customer-profile .noteCard,.pulso-customer-profile .relationshipCard,.pulso-customer-profile .aiUnderstood{padding:16px 0;border-top:1px solid var(--line)}.pulso-customer-profile p{font-size:13px;color:var(--ink-soft);line-height:1.6;margin-top:8px}.pulso-customer-profile h4{margin:0 0 12px}.pulso-customer-profile .profileIdentity{display:grid;justify-items:start;gap:8px}
.pulso-customer-profile .profileDrawerClose{position:static!important;float:none!important;inset:auto!important}.pulso-customer-profile .profileIdentity .avatarChannelWrap{position:relative}.pulso-customer-profile .channelBadge.floating{position:absolute;right:-4px;bottom:-4px;width:18px;height:18px}.pulso-customer-profile .channelBadge svg{width:14px;height:14px}.pulso-customer-profile .relationshipCard strong,.pulso-customer-profile .aiUnderstood strong{display:block;margin-top:6px}.pulso-customer-profile .customerFacts>div{display:flex;justify-content:space-between;gap:12px;margin:10px 0}
:root{--brand-ink:var(--burgundy-ink)}.badge.brand,.rail-foot .badge.brand{color:var(--brand-ink)}:root[data-theme=dark]{--brand-ink:var(--lavender)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--brand-ink:var(--lavender)}}
@media(max-width:959px){.pulso-customer-profile{width:calc(100vw - 24px);margin:auto auto 12px;max-height:85vh}.arc-toasts{bottom:calc(90px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.arc-shimmer,.nxTestPending{background:none!important;color:var(--ink-soft)!important}.arc-sk{opacity:.7}.arc-toasts .arc-toast{translate:none}}