/* Alwaysbooked — navy glass comparison build
   Register: product. Navy field is the neutral; blue accent reserved for
   actions, selection, and data. Semantic colors match the classic app
   (emerald booking, amber voicemail, rose negative) for fair comparison. */

:root{
  --bg-grad: linear-gradient(168deg, oklch(0.30 0.055 258) 0%, oklch(0.22 0.042 252) 52%, oklch(0.33 0.062 248) 100%);
  --panel: rgba(173,200,242,.055);
  --panel-2: rgba(173,200,242,.10);
  --stroke: rgba(173,200,242,.14);
  --stroke-strong: rgba(173,200,242,.28);
  --ink: oklch(0.95 0.012 252);
  --dim: oklch(0.75 0.035 252);
  --faint: oklch(0.63 0.03 252);
  --accent: oklch(0.74 0.13 252);
  --accent-ink: oklch(0.84 0.085 252);
  --accent-tint: rgba(96,165,250,.14);
  --accent-ring: rgba(96,165,250,.50);
  --good: oklch(0.80 0.13 162);
  --good-tint: rgba(52,211,153,.12);
  --warn: oklch(0.82 0.12 80);
  --warn-tint: rgba(245,180,60,.12);
  --bad: oklch(0.74 0.15 18);
  --r-lg: 16px; --r-md: 12px; --r-sm: 8px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --dur-press: 120ms; --dur-fast: 160ms; --dur-enter: 350ms;
  --gap: clamp(13px, 1.1vw, 20px);
  --sans: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ color-scheme: dark; background:#16243d; }
body{
  font-family: var(--sans);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* The gradient lives on its own fixed layer: background-attachment:fixed
   forces slow repaints and smears hover transitions on Windows — this doesn't. */
body::before{
  content:''; position:fixed; inset:0; z-index:-1;
  background: var(--bg-grad);
}

:focus-visible{ outline: 2px solid var(--accent-ring); outline-offset: 2px; border-radius: 4px; }
::selection{ background: var(--accent-tint); }

.num{ font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.025em; }

/* ── Sidebar shell ─────────────────────────────────────────────── */
.side{
  width: 248px; flex: none;
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  padding: 24px 18px;
  border-right: 1px solid var(--stroke);
  background: rgba(13,23,41,.45);
}
.side .logo{ display:flex; align-items:center; gap:10px; padding:0 8px; }
.side .logo .mark{
  width:26px; height:26px; border-radius:7px; flex:none;
  background: var(--accent-tint); border:1px solid var(--stroke-strong);
  display:flex; align-items:center; justify-content:center; color:var(--accent-ink);
}
.side .logo span{ font-weight:600; letter-spacing:.2px; font-size:14.5px; }

.side .client{
  display:flex; align-items:center; gap:11px;
  margin:26px 0 22px; padding:11px 10px;
  border:1px solid var(--stroke); border-radius:var(--r-md);
  background:var(--panel);
}
.side .client .avatar{
  width:34px; height:34px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; color:var(--accent-ink);
  background:var(--accent-tint); border:1px solid var(--stroke-strong);
}
.side .client .who{ min-width:0; }
.side .client .who b{ display:block; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.side .client .who small{ display:block; font-size:11px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.side nav{ display:flex; flex-direction:column; gap:2px; }
.side nav a{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:var(--r-sm);
  color:var(--dim); text-decoration:none; font-weight:500; font-size:13.5px;
  transition: background .15s var(--ease), color .15s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .side nav a:hover{ color:var(--ink); background:var(--panel); }
}
.side nav a.here{ color:var(--ink); background:var(--panel-2); }
.side nav a svg{ width:15px; height:15px; flex:none; opacity:.8; }

.side .foot{
  margin-top:auto; padding:0 8px;
  font-size:11px; color:var(--faint);
}
.side .foot a{ color:var(--dim); text-decoration:none; }
@media (hover:hover) and (pointer:fine){
  .side .foot a:hover{ color:var(--ink); text-decoration:underline; }
}

/* ── Mobile bar ────────────────────────────────────────────────── */
.mbar{ display:none; }
@media (max-width: 880px){
  .side{ display:none; }
  body{ flex-direction:column; }
  .mbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px; border-bottom:1px solid var(--stroke);
    background:rgba(13,23,41,.55); backdrop-filter:blur(14px);
    position:sticky; top:0; z-index:10;
  }
  .mbar .logo{ font-weight:600; font-size:14px; }
  .mbar nav{ display:flex; gap:14px; font-size:13px; }
  .mbar nav a{ color:var(--dim); text-decoration:none; }
  .mbar nav a.here{ color:var(--ink); }
  .mbar .msignout{ color:var(--faint); display:inline-flex; padding:4px; }
}

/* ── Main column ───────────────────────────────────────────────── */
.main{
  flex:1; min-width:0; width:100%; margin-inline:auto;
  max-width:1840px;
  padding: clamp(26px,2.5vw,40px) clamp(28px,3.4vw,56px) clamp(48px,4vw,72px);
}
@media (max-width: 880px){ .main{ padding:22px 16px 40px; } }

.pagehead{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:26px; }
.pagehead .kicker{ font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.pagehead h1{ font-size:23px; font-weight:600; letter-spacing:-.015em; margin-top:4px; }
.pagehead .sub{ font-size:12.5px; color:var(--dim); margin-top:3px; }

/* ── Cards / panels ────────────────────────────────────────────── */
.card{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:var(--r-lg);
  transition: border-color .15s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .card:hover{ border-color:var(--stroke-strong); }
}
.card.pad{ padding:18px 20px; }
.card h2{ font-size:13.5px; font-weight:600; }
.card .hint{ font-size:12px; color:var(--faint); }

/* ── KPI row ───────────────────────────────────────────────────── */
.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); margin-bottom:var(--gap); }
@media (max-width:1020px){ .kpis{ grid-template-columns:repeat(2,1fr); } }
.kpi{ padding:15px 17px; }
.kpi .label{ font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.12em; color:var(--faint); }
.kpi .value{ font-size:25px; font-weight:600; margin-top:7px; min-height:34px; }
.kpi .sub{ font-size:11.5px; color:var(--dim); margin-top:3px; }
.kpi .sub b{ color:var(--accent-ink); font-weight:600; }

/* ── Range pills / segmented control ───────────────────────────── */
.pills{
  display:inline-flex; gap:3px; padding:3px;
  border:1px solid var(--stroke); border-radius:999px; background:var(--panel);
}
.pills button{
  font:inherit; font-size:12px; font-weight:500; color:var(--dim);
  background:none; border:none; border-radius:999px; cursor:pointer;
  padding:5px 12px;
  transition: background .15s var(--ease), color .15s var(--ease), transform var(--dur-press) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .pills button:hover{ color:var(--ink); }
}
.pills button.on{ background:var(--accent-tint); color:var(--accent-ink); }

/* ── Buttons & inputs ──────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:7px;
  font:inherit; font-size:12.5px; font-weight:500;
  color:var(--ink); background:var(--panel-2);
  border:1px solid var(--stroke); border-radius:var(--r-sm);
  padding:7px 13px; cursor:pointer; text-decoration:none;
  transition: background .15s var(--ease), border-color .15s var(--ease), transform var(--dur-press) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .btn:hover{ background:var(--accent-tint); border-color:var(--stroke-strong); }
}

.input{
  font:inherit; font-size:13px; color:var(--ink);
  background:var(--panel); border:1px solid var(--stroke);
  border-radius:var(--r-sm); padding:7px 12px;
  transition: border-color .15s var(--ease);
}
.input::placeholder{ color:var(--faint); }
@media (hover:hover) and (pointer:fine){
  .input:hover{ border-color:var(--stroke-strong); }
}
.input:focus{ border-color:var(--accent-ring); outline:none; }
select.input{ appearance:none; padding-right:28px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238fa6c8' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; }
select.input option{ background:#16243d; color:var(--ink); }

/* ── Badges & sentiment ────────────────────────────────────────── */
.badge{
  display:inline-flex; align-items:center;
  font-size:11px; font-weight:500; padding:3px 10px; border-radius:999px;
  border:1px solid transparent; white-space:nowrap;
}
.b-book{ background:var(--good-tint); color:var(--good); border-color:rgba(52,211,153,.3); }
.b-vm{   background:var(--warn-tint); color:var(--warn); border-color:rgba(245,180,60,.3); }
.b-inq{  background:var(--accent-tint); color:var(--accent-ink); border-color:rgba(96,165,250,.3); }
.b-spam{ background:var(--panel-2); color:var(--faint); border-color:var(--stroke); }
.b-emg{  background:rgba(244,114,114,.12); color:var(--bad); border-color:rgba(244,114,114,.3); }

.sent{ display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--dim); }
.sent i{ width:6px; height:6px; border-radius:50%; flex:none; background:var(--faint); }
.sent.pos i{ background:var(--good); }
.sent.neg i{ background:var(--bad); }

/* ── Table ─────────────────────────────────────────────────────── */
.tablewrap{ overflow-x:auto; }
table.calls{ width:100%; border-collapse:collapse; }
table.calls th{
  text-align:left; font-size:11px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint);
  padding:11px 14px; border-bottom:1px solid var(--stroke);
}
table.calls td{
  font-size:13px; padding:11px 14px;
  border-bottom:1px solid var(--stroke);
}
table.calls tbody tr{ cursor:pointer; transition: background .12s var(--ease); }
@media (hover:hover) and (pointer:fine){
  table.calls tbody tr:hover{ background:var(--panel-2); }
}
table.calls tbody tr:last-child td{ border-bottom:none; }
.td-right{ text-align:right; }

/* ── Skeleton & states ─────────────────────────────────────────── */
.skel{
  color:transparent !important; background:var(--panel-2) !important;
  border-radius:6px; position:relative; overflow:hidden;
  user-select:none; pointer-events:none;
  /* Invisible for the first 150ms: fast loads never flash a skeleton. */
  animation: skelin .2s .15s both;
}
@keyframes skelin{ from{ opacity:0; } }
.skel *{ visibility:hidden; }
.skel::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(173,200,242,.10) 50%, transparent 70%);
  transform:translateX(-100%);
  animation:shimmer 1.6s linear infinite;
}
@keyframes shimmer{ to{ transform:translateX(100%); } }

.unskel{ animation: reveal 240ms var(--ease-out); }
@keyframes reveal{ from{ opacity:.3; filter:blur(3px); } }

.empty{ text-align:center; padding:42px 20px; color:var(--dim); }
.empty .t{ font-weight:600; color:var(--ink); margin-bottom:4px; font-size:13.5px; }
.empty .d{ font-size:12.5px; }
.empty .btn{ margin-top:14px; }

/* ── Transcript ────────────────────────────────────────────────── */
.turn{ display:flex; gap:13px; padding:13px 4px; border-bottom:1px solid var(--stroke); }
.turn:last-child{ border-bottom:none; }
.turn .t{ font-family:var(--mono); font-size:11px; color:var(--faint); padding-top:3px; flex:none; width:42px; }
.turn .pill{
  flex:none; font-size:10.5px; font-weight:600; padding:2px 9px; border-radius:999px;
  align-self:flex-start; margin-top:1px;
}
.turn .pill.ai{ background:var(--accent-tint); color:var(--accent-ink); }
.turn .pill.hu{ background:var(--panel-2); color:var(--dim); }
.turn p{ font-size:13.5px; line-height:1.55; max-width:68ch; }
.turn.ai p{ color:var(--ink); }
.turn.hu p{ color:var(--dim); }

/* ── Misc ──────────────────────────────────────────────────────── */
a.plain{ color:var(--accent-ink); text-decoration:none; font-size:12.5px; }
@media (hover:hover) and (pointer:fine){
  a.plain:hover{ text-decoration:underline; }
}
.hair{ border:none; border-top:1px solid var(--stroke); }

/* ── Motion ────────────────────────────────────────────────────── */
/* One-time page-load entrance: pagehead → cards cascade. */
@keyframes enter{ from{ opacity:0; transform:translateY(8px); } }
.main > *{ animation: enter var(--dur-enter) var(--ease-out) backwards; }
.main > :nth-child(2){ animation-delay:60ms; }
.main > :nth-child(3){ animation-delay:120ms; }
.main > :nth-child(4){ animation-delay:180ms; }
.main > :nth-child(5){ animation-delay:240ms; }
/* KPI rows: the container stays put, its cards cascade individually. */
.kpis, .statgrid{ animation:none; }
.kpis > .kpi, .statgrid > .kpi{ animation: enter var(--dur-enter) var(--ease-out) backwards; }
.kpis > :nth-child(1), .statgrid > :nth-child(1){ animation-delay:60ms; }
.kpis > :nth-child(2), .statgrid > :nth-child(2){ animation-delay:105ms; }
.kpis > :nth-child(3), .statgrid > :nth-child(3){ animation-delay:150ms; }
.kpis > :nth-child(4), .statgrid > :nth-child(4){ animation-delay:195ms; }

/* Press feedback on every pressable. */
.btn:active, .pills button:active, .tabs button:active, .audio button:active{ transform:scale(.97); }
.row:active{ transform:scale(.99); }

/* Staggered list entrances — delay set inline by AB.stagger(). */
.row.in, .turn.in{ animation: enter 240ms var(--ease-out) backwards; }

/* Entrance cascade plays once per session — repeat navigations cut straight
   in and let the view-transition crossfade carry the motion. */
html.revisit .main > *,
html.revisit .kpis > .kpi,
html.revisit .statgrid > .kpi{ animation:none; }

/* Live badge on the nav. */
.navlive{
  display:inline-flex; align-items:center; gap:5px;
  margin-left:auto; padding:2px 8px; border-radius:999px;
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  background:var(--good-tint); color:var(--good);
  border:1px solid rgba(52,211,153,.3);
}
.navlive[hidden]{ display:none; }
.navlive i{
  width:6px; height:6px; border-radius:50%; background:var(--good);
  animation:livepulse 2s var(--ease) infinite;
}
@keyframes livepulse{
  0%{ box-shadow:0 0 0 0 rgba(52,211,153,.45); }
  70%{ box-shadow:0 0 0 6px rgba(52,211,153,0); }
  100%{ box-shadow:0 0 0 0 rgba(52,211,153,0); }
}
.mbar nav a .navlive{ margin-left:6px; }

/* Load-failure card; freezes the skeleton pretense while shown. */
.failcard{ margin-bottom:var(--gap); }
.failed .skel{ opacity:.45; }
.failed .skel::after{ animation:none; }

/* Admin "viewing as client" pill. */
.viewbar{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  display:flex; align-items:center; gap:11px;
  max-width:calc(100vw - 20px);
  padding:8px 10px 8px 15px; border-radius:999px;
  background:rgba(13,23,41,.85); backdrop-filter:blur(14px);
  border:1px solid var(--stroke-strong);
  font-size:12.5px; color:var(--dim); z-index:50; white-space:nowrap;
  box-shadow:0 12px 32px rgba(0,0,0,.35);
  /* Own keyframes: the generic `enter` would wipe out translateX(-50%)
     centering while it plays. */
  animation: viewbarin var(--dur-enter) var(--ease-out) backwards;
}
@keyframes viewbarin{
  from{ opacity:0; transform:translate(-50%, 8px); }
  to{ opacity:1; transform:translate(-50%, 0); }
}
.viewbar i{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; }
.viewbar span{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.viewbar .btn{ padding:5px 11px; font-size:12px; flex:none; }

/* Cross-page crossfade (Chrome/Edge; others hard-cut as before). */
@view-transition{ navigation: auto; }
::view-transition-old(root){ animation-duration:120ms; }
::view-transition-new(root){ animation-duration:180ms; }
/* Stable chrome gets its own snapshot group: identical on both sides of the
   transition, so the sidebar/bars hold perfectly still while content fades. */
.side{ view-transition-name: side; }
.mbar{ view-transition-name: mbar; }
.viewbar{ view-transition-name: viewbar; }
main.main{ view-transition-name: main; }
/* SPA swaps: quick content crossfade, nothing else moves. */
::view-transition-old(main){ animation-duration:90ms; }
::view-transition-new(main){ animation-duration:140ms; }

@media (prefers-reduced-motion: reduce){
  /* Keep the fades, kill the movement. */
  @keyframes enter{ from{ opacity:0; } }
  @keyframes reveal{ from{ opacity:.3; } }
  .skel::after{ animation:none; }
  .navlive i{ animation:none; }
  .perf .bar i{ transition-duration:1ms !important; }
  .btn:active, .pills button:active, .tabs button:active, .audio button:active, .row:active{ transform:none; }
  ::view-transition-old(root), ::view-transition-new(root){ animation:none !important; }
}