/* ════════════════════════════════════════════════════════════════════
   FORTCALL — Kaya Skin Clinic UAE care desk

   Built from Kaya's own stylesheet: --indigo #422A82, --purple #4C2550,
   --purple-dark #5C1C3F, the #6B3171 → #471A4B gradient, --purple-light
   #B498B7 and the #EAE1EB wash. Kaya's mark is never used; the console is
   FORTCALL.

   The canvas is aubergine crushed toward black rather than neutral black, so
   the room the operator sits in already belongs to the brand. Colour is then
   rationed to three places — the clearance rail, the live-call pulse, and the
   primary action — and everything else is plum-grey and hairline. The live
   call should be the only colour in the room.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* canvas — Kaya's purple taken down to a console black */
  --void:      #120A14;
  --panel:     #1B0F1E;
  --panel-2:   #241429;
  --raised:    #2C1932;
  --line:      #33203A;
  --line-soft: #271730;

  /* ink */
  --ink:       #EFE7F0;
  --ink-dim:   #A08FA6;
  --ink-faint: #6E5C74;

  /* the rationed colour — Kaya's own, lifted for a dark canvas */
  --violet:     #7B44C7;
  --violet-lo:  #422A82;
  --plum:       #6B3171;
  --plum-deep:  #471A4B;
  --plum-light: #B498B7;
  --grad:       linear-gradient(98deg, #6B3171 26.09%, #471A4B 90.12%);
  --grad-lit:   linear-gradient(98deg, #8E4E96 20%, #5B2A8F 95%);

  /* states — halt stays inside the plum family so it reads "stop", not "fire";
     alarm is reserved for one thing only, a clinical escalation */
  --halt:      #E0567A;
  --halt-deep: #7A2340;
  --alarm:     #FF4D4D;
  --go:        #4FD1A5;
  --amber:     #E8A33D;

  --display: 'Playfair Display', Georgia, serif;
  --sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --micro: .6875rem;
  --sm:    .8125rem;
  --base:  .9375rem;
  --lg:    1.0625rem;

  --r: 3px;
  --pad: 18px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--base);
  font-weight: 300;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
  border-radius: var(--r);
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 9px; }
::-webkit-scrollbar-thumb:hover { background: var(--raised); }


/* ─────────────────────────────── controls ─────────────────────────── */

.btn {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink);
  padding: 9px 18px;
  border-radius: var(--r);
  font-size: var(--sm);
  font-weight: 400;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .16s, border-color .16s, opacity .16s;
}
.btn:hover:not(:disabled) { background: var(--raised); border-color: var(--plum); }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn--sm { padding: 5px 11px; font-size: var(--micro); }
.btn--wide { width: 100%; }

.btn--primary {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
  font-weight: 400;
}
.btn--primary:hover:not(:disabled) { background: var(--grad-lit); border-color: transparent; }

.btn--halt {
  background: transparent;
  border-color: var(--halt-deep);
  color: var(--halt);
}
.btn--halt:hover:not(:disabled) { background: rgba(224, 86, 122, .12); border-color: var(--halt); }

.btn--ghost { background: transparent; }

.field { display: flex; flex-direction: column; gap: 5px; }
.field__label {
  font-family: var(--sans);
  font-size: var(--micro);
  font-weight: 400;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.field input, .field select {
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 8px 11px;
  font-size: var(--sm);
  font-weight: 300;
  transition: border-color .16s;
}
.field input:focus, .field select:focus { border-color: var(--plum); }
.field input::placeholder { color: var(--ink-faint); }
.field--inline { flex-direction: row; align-items: center; gap: 9px; }
.field--inline .field__label { white-space: nowrap; }
.field--inline input, .field--inline select { flex: 1; min-width: 0; }
.field--grow { flex: 1; min-width: 140px; }

.pill {
  display: inline-block;
  padding: 3px 11px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: var(--micro);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.pill.is-live { border-color: var(--plum); color: var(--plum-light); background: rgba(107, 49, 113, .18); }
.pill.is-halt { border-color: var(--halt-deep); color: var(--halt); background: rgba(224, 86, 122, .1); }
.pill.is-go   { border-color: rgba(79, 209, 165, .4); color: var(--go); }


/* ──────────────────────────── the wordmark ────────────────────────── */
/* A single lit bar — one channel, live. Matches the favicon exactly so the
   mark reads the same in the tab and in the header. The only place the full
   brand gradient appears outside the clearance rail. */

.wordmark { display: flex; align-items: center; gap: 11px; }
.wordmark__bars { display: flex; align-items: center; height: 20px; }
.wordmark__bars i {
  display: block;
  width: 4px; height: 20px;
  border-radius: 2px;
  background: linear-gradient(180deg, #A97BE8, var(--plum));
  box-shadow: 0 0 3px rgba(169, 123, 232, .85), 0 0 11px rgba(123, 68, 199, .55);
}
.wordmark__text {
  font-family: var(--sans);
  font-size: var(--base);
  font-weight: 500;
  letter-spacing: .26em;
}
.wordmark__text em {
  font-style: normal;
  font-weight: 200;
  color: var(--plum-light);
}
.wordmark--lg .wordmark__bars { height: 32px; }
.wordmark--lg .wordmark__bars i { width: 5px; height: 32px; border-radius: 2.5px; }
.wordmark--lg .wordmark__text { font-size: 1.45rem; }


/* ──────────────────────────────── sign in ─────────────────────────── */

.signin {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  padding: 24px;
  overflow: auto;
}
.signin__wash {
  position: absolute; inset: 0;
  background:
    radial-gradient(72ch 46ch at 22% 0%, rgba(107, 49, 113, .34), transparent 70%),
    radial-gradient(60ch 44ch at 88% 100%, rgba(66, 42, 130, .28), transparent 72%);
  pointer-events: none;
}
.signin__box {
  position: relative;
  width: min(400px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 38px 34px 34px;
}
.signin__form { display: flex; flex-direction: column; gap: 15px; margin-top: 34px; }
.signin__error {
  font-size: var(--sm);
  color: var(--halt);
  border-left: 2px solid var(--halt-deep);
  padding-left: 11px;
}


/* ─────────────────────────────── shell ────────────────────────────── */

.app { display: flex; flex-direction: column; height: 100vh; }

.topbar {
  display: flex; align-items: center; gap: 26px;
  padding: 0 20px;
  height: 56px;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: 15px; }
.topbar__who { font-size: var(--micro); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }

.tabs { display: flex; gap: 3px; }
.tab {
  border: 0; background: transparent;
  padding: 8px 15px;
  border-radius: var(--r);
  font-size: var(--sm);
  font-weight: 300;
  color: var(--ink-dim);
  cursor: pointer;
  position: relative;
  transition: color .16s;
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--ink); font-weight: 400; }
.tab.is-active::after {
  content: '';
  position: absolute; left: 15px; right: 15px; bottom: -1px;
  height: 2px;
  background: var(--grad-lit);
  border-radius: 2px;
}

.view { display: none; flex: 1; min-height: 0; }
.view.is-active { display: grid; }
#view-outbound.is-active, #view-inbound.is-active {
  grid-template-columns: 300px minmax(0, 1fr) 320px;
}
.view--single.is-active { display: block; overflow: auto; }


/* ─────────────────────────────── panes ────────────────────────────── */

.pane { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.pane--book { border-right: 1px solid var(--line); background: var(--panel); }
.pane--side { border-left: 1px solid var(--line); background: var(--panel); }
.pane--call { background: var(--void); }
.pane--wide { max-width: 1140px; margin: 0 auto; padding: 30px 24px 60px; overflow: visible; }

.pane__head {
  display: flex; align-items: baseline; gap: 12px;
  padding: 16px var(--pad) 10px;
  flex: 0 0 auto;
}
.pane--wide .pane__head { padding: 34px 0 12px; border-bottom: 1px solid var(--line-soft); margin-bottom: 18px; }
.pane--wide .pane__head:first-child { padding-top: 0; }
.pane__title {
  font-family: var(--display);
  font-size: var(--lg);
  font-weight: 400;
  letter-spacing: .005em;
}
.pane--wide .pane__title { font-size: 1.5rem; }
.pane__head .btn { margin-left: auto; }

.prose {
  font-size: var(--sm);
  font-weight: 300;
  color: var(--ink-dim);
  max-width: 74ch;
  margin-bottom: 18px;
}
.prose--warn {
  border-left: 2px solid var(--amber);
  padding-left: 13px;
  color: var(--ink-dim);
}


/* ────────────────────────────── stat grid ─────────────────────────── */

.statgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border-block: 1px solid var(--line-soft);
  flex: 0 0 auto;
}
.statgrid--wide { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); border: 1px solid var(--line-soft); }
.stat { background: var(--panel); padding: 11px var(--pad); }
.statgrid--wide .stat { padding: 15px 17px; }
.stat__k {
  font-size: var(--micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.stat__v {
  font-family: var(--mono);
  font-size: var(--lg);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.stat__v.is-halt { color: var(--halt); }
.stat__v.is-go { color: var(--go); }


/* ─────────────────────────────── the book ─────────────────────────── */

.book { overflow-y: auto; flex: 1; padding: 8px 0 20px; }

.rec {
  display: block; width: 100%; text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  padding: 12px var(--pad);
  cursor: pointer;
  transition: background .14s;
  position: relative;
}
.rec:hover { background: var(--panel-2); }
.rec.is-selected { background: var(--panel-2); }
.rec.is-selected::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--grad-lit);
}
.rec__name { font-size: var(--sm); font-weight: 400; }
.rec__meta { font-size: var(--micro); color: var(--ink-faint); margin-top: 2px; }
.rec__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.tag {
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink-dim);
}
.tag--halt { border-color: var(--halt-deep); color: var(--halt); }
.tag--amber { border-color: rgba(232, 163, 61, .42); color: var(--amber); }
.tag--alarm { border-color: rgba(255, 77, 77, .5); color: var(--alarm); }
.rec.is-suppressed { opacity: .5; }
.rec.is-suppressed:hover { background: transparent; cursor: not-allowed; }


/* ───────────────────────────── call header ───────────────────────── */

.callhead {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 18px var(--pad) 14px;
  border-bottom: 1px solid var(--line-soft);
  flex: 0 0 auto;
}
.callhead__name {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -.005em;
}
.callhead__meta { font-size: var(--sm); color: var(--ink-dim); margin-top: 3px; max-width: 70ch; }
.callhead__state { margin-left: auto; display: flex; align-items: center; gap: 13px; }
.callhead__timer { font-size: var(--lg); color: var(--ink-dim); }


/* ══════════════════════════════════════════════════════════════════════
   THE CLEARANCE RAIL — the signature

   Five stages. Each fills with Kaya's own gradient as it is reached, so the
   brand's colour is literally the thing being earned. When the medical screen
   returns a contraindication the rail stops dead: the screen node turns to the
   halt colour, the connector past it goes dashed, and the stages above it lock
   and strike through. Nothing above the block can ever light on that call.

   A clinical red flag overrides the whole rail, because on this desk safety
   outranks the gate and the console should say so louder than the gate does.
   ══════════════════════════════════════════════════════════════════════ */

.rail {
  flex: 0 0 auto;
  padding: 20px var(--pad) 16px;
  border-bottom: 1px solid var(--line-soft);
  background:
    linear-gradient(180deg, rgba(107, 49, 113, .07), transparent 82%);
}
.rail__track { display: flex; align-items: flex-start; }

.rail__stage { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.rail__mark {
  display: flex; align-items: center; gap: 0;
}
.rail__node {
  width: 13px; height: 13px;
  flex: 0 0 13px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 2px;
  position: relative;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.rail__link {
  flex: 1;
  height: 1px;
  background: var(--line);
  transition: background .3s;
}
.rail__stage:last-child .rail__link { background: transparent; }

.rail__label {
  font-size: var(--micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color .3s;
  padding-right: 10px;
}
.rail__sub {
  font-size: 10px;
  color: var(--ink-faint);
  opacity: 0;
  transition: opacity .3s;
  padding-right: 10px;
  min-height: 13px;
}
.rail__stage.is-done .rail__sub, .rail__stage.is-blocked .rail__sub { opacity: 1; }

/* reached */
.rail__stage.is-done .rail__node {
  background: var(--grad-lit);
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(123, 68, 199, .16);
}
.rail__stage.is-done .rail__link { background: var(--plum); }
.rail__stage.is-done .rail__label { color: var(--plum-light); }

/* the current stage, waiting */
.rail__stage.is-current .rail__node {
  border-color: var(--plum);
  animation: railpulse 1.9s ease-in-out infinite;
}
.rail__stage.is-current .rail__label { color: var(--ink); }
@keyframes railpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(123, 68, 199, .5); }
  50%      { box-shadow: 0 0 0 5px rgba(123, 68, 199, 0); }
}

/* the block */
.rail__stage.is-blocked .rail__node {
  background: var(--halt);
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(224, 86, 122, .18);
  animation: none;
}
.rail__stage.is-blocked .rail__label { color: var(--halt); }
.rail__stage.is-blocked .rail__sub { color: var(--halt); }
.rail__stage.is-blocked .rail__link {
  background: repeating-linear-gradient(90deg,
    var(--halt-deep) 0 4px, transparent 4px 8px);
}

/* everything above the block */
.rail__stage.is-locked .rail__node {
  background: repeating-linear-gradient(135deg,
    var(--line) 0 2px, transparent 2px 5px);
  border-color: var(--line);
  animation: none;
}
.rail__stage.is-locked .rail__label {
  color: var(--ink-faint);
  text-decoration: line-through;
  text-decoration-color: var(--halt-deep);
  text-decoration-thickness: 1px;
}
.rail__stage.is-locked .rail__link { background: var(--line-soft); }

.rail__note {
  margin-top: 14px;
  font-size: var(--sm);
  font-weight: 300;
  color: var(--ink-dim);
  display: flex; align-items: baseline; gap: 9px;
}
.rail__note b { font-weight: 400; color: var(--ink); }
.rail__note.is-halt {
  color: var(--halt);
  border-left: 2px solid var(--halt-deep);
  padding-left: 11px;
}
.rail__note.is-halt b { color: var(--halt); }

/* safety outranks the gate — and says so */
.rail__alarm {
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px solid var(--alarm);
  border-radius: var(--r);
  background: rgba(255, 77, 77, .1);
  color: #FFC9C9;
  font-size: var(--sm);
  display: flex; align-items: baseline; gap: 10px;
  animation: alarmbeat 1.4s ease-in-out infinite;
}
.rail__alarm b { color: var(--alarm); letter-spacing: .1em; text-transform: uppercase; font-size: var(--micro); font-weight: 500; }
@keyframes alarmbeat {
  0%, 100% { border-color: var(--alarm); }
  50%      { border-color: rgba(255, 77, 77, .35); }
}


/* ────────────────────────────── transcript ───────────────────────── */

.transcript {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 20px var(--pad) 26px;
}
.transcript__empty, .tools__empty {
  font-size: var(--sm);
  color: var(--ink-faint);
  font-weight: 300;
}
.line { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 14px; margin-bottom: 15px; }
.line__who {
  font-size: var(--micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 3px;
}
.line--agent .line__who { color: var(--plum-light); }
.line__text { font-size: var(--base); font-weight: 300; line-height: 1.62; }
.line--caller .line__text { color: var(--ink-dim); }


/* ──────────────────────────────── callbar ────────────────────────── */

.callbar {
  flex: 0 0 auto;
  border-top: 1px solid var(--line-soft);
  padding: 13px var(--pad);
  background: var(--panel);
  display: flex; flex-direction: column; gap: 10px;
}
.callbar__row { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.callbar__row .btn { margin-left: auto; }
.callbar__row .btn ~ .btn { margin-left: 0; }
.callbar__row:last-child .btn { margin-left: 0; }

.meter {
  width: 74px; height: 4px;
  background: var(--line-soft);
  border-radius: 4px;
  overflow: hidden;
  flex: 0 0 auto;
}
.meter__fill {
  display: block; height: 100%; width: 0%;
  background: var(--grad-lit);
  transition: width .09s linear;
}


/* ──────────────────────────── tools + usage ──────────────────────── */

.tools { flex: 1; min-height: 120px; overflow-y: auto; padding: 0 var(--pad) 16px; }
.tool {
  border-bottom: 1px solid var(--line-soft);
  padding: 10px 0;
}
.tool__head { display: flex; align-items: baseline; gap: 9px; }
.tool__name { font-family: var(--mono); font-size: var(--micro); }
.tool__state {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tool__state.is-ok { color: var(--go); }
.tool__state.is-halt { color: var(--halt); }
.tool__state.is-err { color: var(--amber); }
.tool__body {
  font-size: var(--micro);
  color: var(--ink-dim);
  margin-top: 5px;
  word-break: break-word;
}
.tool.is-blocked { border-left: 2px solid var(--halt-deep); padding-left: 10px; }

.usage { padding: 0 var(--pad) 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px; }
.usage__k { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.usage__v { font-family: var(--mono); font-size: var(--sm); }

.score { padding: 0 var(--pad) 22px; }
.score__band {
  border: 1px solid var(--halt-deep);
  background: rgba(224, 86, 122, .1);
  color: var(--halt);
  padding: 9px 12px;
  border-radius: var(--r);
  font-size: var(--micro);
  margin-bottom: 12px;
}
.score__row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.score__k { font-size: var(--micro); color: var(--ink-dim); width: 96px; flex: 0 0 96px; text-transform: capitalize; }
.score__bar { flex: 1; height: 4px; background: var(--line-soft); border-radius: 4px; overflow: hidden; }
.score__bar i { display: block; height: 100%; background: var(--grad-lit); }
.score__n { font-family: var(--mono); font-size: var(--micro); width: 28px; text-align: right; }
.score__text { font-size: var(--micro); color: var(--ink-dim); margin-top: 10px; line-height: 1.55; }
.score__text b { color: var(--ink); font-weight: 400; }


/* ──────────────────────────────── inbound ────────────────────────── */

.inbound__sim { padding: 0 var(--pad) 16px; display: flex; flex-direction: column; gap: 11px; }
.inbound__hint { font-size: var(--micro); color: var(--ink-faint); line-height: 1.5; }
.matchcard { padding: 0 var(--pad) 20px; overflow-y: auto; }
.matchcard__box {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 13px;
  background: var(--panel-2);
}
.matchcard__name { font-size: var(--sm); font-weight: 400; }
.matchcard__meta { font-size: var(--micro); color: var(--ink-faint); margin-top: 4px; }
.matchcard__none { font-size: var(--sm); color: var(--ink-faint); }


/* ─────────────────────────────── knowledge ───────────────────────── */

.kbsearch { display: flex; gap: 10px; margin-bottom: 22px; }
.kbsearch input {
  flex: 1; min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 11px 15px;
  font-size: var(--sm);
  font-weight: 300;
}
.kbsearch input:focus { border-color: var(--plum); }
.kbsearch input::placeholder { color: var(--ink-faint); }

.kbresults { display: flex; flex-direction: column; gap: 1px; background: var(--line-soft); }
.kbhit { background: var(--panel); padding: 15px 17px; }
.kbhit__head { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }
.kbhit__title { font-size: var(--sm); font-weight: 400; }
.kbhit__score { font-family: var(--mono); font-size: var(--micro); color: var(--plum-light); }
.kbhit__src { font-size: var(--micro); color: var(--ink-faint); margin-left: auto; word-break: break-all; }
.kbhit__text { font-size: var(--sm); font-weight: 300; color: var(--ink-dim); margin-top: 8px; line-height: 1.6; }


/* ─────────────────────────────── playbook ────────────────────────── */

.stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); margin-bottom: 12px; }
.stagecard { background: var(--panel); padding: 15px 16px; }
.stagecard__n { font-family: var(--mono); font-size: var(--micro); color: var(--plum-light); }
.stagecard__k { font-size: var(--sm); font-weight: 400; margin-top: 5px; }
.stagecard__d { font-size: var(--micro); color: var(--ink-dim); margin-top: 6px; line-height: 1.5; }

.rules { display: flex; flex-direction: column; gap: 1px; background: var(--line-soft); margin-bottom: 12px; }
.rule { background: var(--panel); padding: 13px 16px; border-left: 2px solid var(--halt-deep); }
.rules--open .rule { border-left-color: var(--go); }
.rule__k { font-size: var(--sm); font-weight: 400; }
.rule__d { font-size: var(--micro); color: var(--ink-dim); margin-top: 4px; line-height: 1.55; }
.rule__blocks { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); margin-top: 6px; letter-spacing: .05em; }
.rule--alarm { border-left-color: var(--alarm); }
.rule--urgent { border-left-color: var(--amber); }

.pricetable { display: flex; flex-direction: column; gap: 1px; background: var(--line-soft); }
.pricerow { background: var(--panel); padding: 11px 16px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.pricerow__k { font-size: var(--sm); text-transform: capitalize; min-width: 160px; }
.pricerow__v { font-family: var(--mono); font-size: var(--sm); color: var(--plum-light); }
.pricerow__d { font-size: var(--micro); color: var(--ink-faint); margin-left: auto; }


/* ─────────────────────────────────  desk  ────────────────────────── */

.calls { display: flex; flex-direction: column; gap: 1px; background: var(--line-soft); }
.callrow { background: var(--panel); padding: 13px 16px; display: grid; grid-template-columns: minmax(0,1.4fr) repeat(3, minmax(0,1fr)) auto; gap: 14px; align-items: center; }
.callrow__who { font-size: var(--sm); }
.callrow__sub { font-size: var(--micro); color: var(--ink-faint); margin-top: 2px; }
.callrow__k { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); }
.callrow__v { font-family: var(--mono); font-size: var(--sm); margin-top: 2px; }
.calls__empty { background: var(--panel); padding: 22px 16px; font-size: var(--sm); color: var(--ink-faint); }


/* ───────────────────────────── responsive ────────────────────────── */

@media (max-width: 1180px) {
  #view-outbound.is-active, #view-inbound.is-active { grid-template-columns: 260px minmax(0, 1fr) 280px; }
}

@media (max-width: 940px) {
  .app { height: auto; min-height: 100vh; }
  .topbar { height: auto; flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
  .tabs { order: 3; width: 100%; overflow-x: auto; }
  .topbar__right { margin-left: auto; }

  #view-outbound.is-active, #view-inbound.is-active {
    grid-template-columns: 1fr;
    grid-auto-rows: min-content;
  }
  .pane--book, .pane--side { border: 0; border-bottom: 1px solid var(--line); }
  .pane { overflow: visible; }
  .book { max-height: 320px; }
  .transcript { min-height: 300px; max-height: 60vh; }
  .tools { max-height: 260px; }
  .rail__label { font-size: 10px; letter-spacing: .06em; }
  .callbar__row .btn { margin-left: 0; }
  .callrow { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  :root { --pad: 14px; }
  .line { grid-template-columns: 1fr; gap: 3px; }
  .rail__track { flex-direction: column; gap: 10px; }
  .rail__stage { flex: none; }
  .rail__link { display: none; }
  .rail__mark { gap: 9px; }
  .rail__stage .rail__label { padding-right: 0; }
  .callhead { flex-direction: column; }
  .callhead__state { margin-left: 0; }
  .usage { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}