/* Agentics PWA — house style (canonical = pks-agent-share / inbox / coach):
   near-black canvas, Agentic Orange, mono chrome, soft corner glow.
   The :root token block, .glow and the topbar/tabbar/toast chrome are copied
   verbatim from the family; everything under "softphone" is this app's own. */

/* Self-hosted, because a phone that reaches Google Fonts at runtime shows the
   wrong typeface on the exact networks this product is used on. The files sit
   beside this one and are //go:embed-ed into the binary. */
@font-face {
  font-family: "Geist";
  src: url("GeistVF.woff") format("woff-variations"), url("GeistVF.woff") format("woff");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("GeistMono-400.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("GeistMono-700.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg: #0a0a0a;            /* icon tile + manifest bg/theme + <meta theme-color> — all identical */
  --panel: #141418;
  --panel-2: #1c1c20;
  --fg: #ededef;
  --muted: #a1a1aa;
  --faint: #71717a;
  --hairline: #27272a;

  --orange: #f87f2e;       /* Agentic Orange — NEVER raw tailwind orange ("turkey color") */
  --brand-orange: #f87f2e; /* alias */
  --ember: #ffa85e;        /* hover / Ember Glow */
  --forge: #d66a1f;        /* pressed / Forge */
  --orange-12: rgba(248, 127, 46, 0.12);
  --orange-22: rgba(248, 127, 46, 0.22);
  --orange-35: rgba(248, 127, 46, 0.35);
  --on-orange: #1a0f06;    /* text on an orange surface — a token, not a magic literal */

  --success: #34d399;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;

  --mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", monospace;
  --sans: "Geist", -apple-system, system-ui, "Segoe UI", Roboto, "Inter", sans-serif;

  --radius: 8px;
  --tabbar-h: 64px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  overscroll-behavior-y: contain;
}

.glow {
  position: fixed;
  top: -220px; left: -220px;
  width: 620px; height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--orange-12) 0%, rgba(248,127,46,0) 70%);
  pointer-events: none;
  z-index: 0;
}

#app {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 540px;
  margin: 0 auto;
  padding: max(env(safe-area-inset-top), 16px) 20px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px);
}

/* ---- top bar + lockup ---- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0 14px;
  border-bottom: 1px solid var(--hairline);
}
.brand { font-family: var(--mono); font-size: 14px; letter-spacing: .02em; color: var(--fg); }
.brand-word { color: var(--orange); }
/* the amber block cursor — the "I" of the hidden AI; always #f87f2e */
.brand-dot { color: var(--orange); animation: brandBlink 1.1s step-end infinite; }
.status { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.status.bad { color: var(--error); }
.status.live { color: var(--success); }

@keyframes brandBlink { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .brand-dot { animation: none; opacity: 1; } }

/* ---- buttons (orange is earned: primary/active/focus only) ---- */
.btn {
  font: inherit; border: 1px solid var(--hairline); background: var(--panel-2); color: var(--fg);
  border-radius: var(--radius); padding: 10px 14px; cursor: pointer;
}
.btn:hover { border-color: var(--orange-35); }
.btn[disabled] { opacity: .5; cursor: default; }
.btn[disabled]:hover { border-color: var(--hairline); }
.btn-primary { background: var(--orange); color: var(--on-orange); border-color: transparent; }
.btn-primary:hover { background: var(--ember); border-color: transparent; }
.btn-ghost { background: transparent; }
.btn-block { display: block; width: 100%; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-danger { color: var(--error); border-color: color-mix(in srgb, var(--error) 35%, var(--hairline)); background: transparent; }
.btn-danger:hover { border-color: var(--error); background: color-mix(in srgb, var(--error) 12%, var(--panel-2)); }
/* /auth/login is a full page navigation, not fetch(), so that button is a link */
a.btn { text-decoration: none; text-align: center; }

/* ---- login gate ---- */
/* #app is display:flex, which beats the hidden attribute's default — without
   this rule the gate would draw on top of a still-visible phone. */
#app[hidden] { display: none; }
.gate {
  position: relative; z-index: 1;
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: max(env(safe-area-inset-top), 24px) 20px calc(env(safe-area-inset-bottom) + 24px);
}
.gate[hidden] { display: none; }
.gate-inner { width: 100%; max-width: 380px; text-align: center; }
.gate-inner .h1 { margin: 20px 0 10px; }
.gate-inner p { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0 0 16px; }
/* the OIDC subject: long, unmemorable, and the exact string an admin has to
   type — so it gets its own selectable block rather than a line of prose */
#gate-sub {
  font-size: 12px; color: var(--fg); word-break: break-all; user-select: all;
  background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 10px 12px; margin: 0 0 16px;
}
#gate-logout { margin-top: 10px; }

/* ---- shared view chrome ---- */
.view { flex: 1; padding-top: 16px; }
.view[hidden] { display: none; }
.view-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 14px; }
.h1 { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--fg); margin: 0 0 14px; }
.view-head .h1 { margin: 0; }
.section-label {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--faint); font-weight: 400; margin: 22px 0 8px;
}
.back { font-family: var(--mono); font-size: 12px; color: var(--orange); background: none; border: 0; padding: 0 0 12px; cursor: pointer; }
.mono { font-family: var(--mono); }
.faint { color: var(--faint); }
.empty { font-family: var(--mono); font-size: 12px; color: var(--faint); padding: 24px 4px; text-align: center; line-height: 1.6; }

/* ---- rows ---- */
.list { display: flex; flex-direction: column; gap: 8px; }
.row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  text-align: left; background: var(--panel); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 12px 14px; cursor: pointer; color: var(--fg);
  font: inherit; text-decoration: none;
  transition: border-color .12s ease, background .12s ease;
}
.row:hover, .row:active { border-color: var(--orange-35); background: var(--panel-2); }
.row-main { flex: 1; min-width: 0; }
.row-top { display: flex; align-items: baseline; gap: 8px; }
.row-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-sub { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-meta { font-family: var(--mono); font-size: 11px; color: var(--faint); white-space: nowrap; text-align: right; }
.row-chev { color: var(--faint); flex: 0 0 auto; }
.row-edit {
  flex: 0 0 auto; background: none; border: 0; color: var(--faint);
  font-family: var(--mono); font-size: 16px; line-height: 1; padding: 6px 4px; cursor: pointer;
}
.row-edit:hover { color: var(--orange); }
.link-row { margin-top: 14px; justify-content: space-between; color: var(--orange); }
.star { color: var(--orange); flex: 0 0 auto; font-size: 12px; }

/* a call row's outcome, carried in the row's own left edge */
.row.out-failed { border-left: 2px solid var(--error); }
.row.out-answered { border-left: 2px solid var(--success); }
.row.out-live { border-left: 2px solid var(--orange); }

/* ---- alerts (trunk state is a screen, not a toast) ---- */
.alert {
  font-family: var(--mono); font-size: 12px; line-height: 1.6;
  border: 1px solid var(--orange-35); background: var(--orange-12); color: var(--fg);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 16px;
}
.alert[hidden] { display: none; }
.alert-error { border-color: color-mix(in srgb, var(--error) 45%, var(--hairline)); background: color-mix(in srgb, var(--error) 12%, var(--panel)); }
.alert b { color: var(--orange); font-weight: 600; }
.alert-error b { color: var(--error); }
.alert .alert-sub { color: var(--muted); display: block; margin-top: 6px; }

/* ============================================================== *
 *  softphone                                                     *
 * ============================================================== */

/* ---- the dialer ---- */
.dialer { display: flex; flex-direction: column; gap: 12px; }
.dial-input {
  font: inherit; font-family: var(--mono); font-size: 22px; letter-spacing: .04em;
  width: 100%; color: var(--fg); background: var(--panel-2);
  border: 1px solid var(--hairline); border-radius: var(--radius); padding: 16px 14px;
}
.dial-input::placeholder { color: var(--faint); font-size: 15px; letter-spacing: 0; }
.dial-input:focus { outline: none; border-color: var(--orange-35); }

/* the one green button. Green rather than orange on purpose: this is the
   universal "call" affordance and a phone is not the place to be clever. */
.call-btn {
  background: var(--success); color: #04150d; border-color: transparent;
  font-size: 16px; font-weight: 600; padding: 16px; border-radius: 999px;
}
.call-btn:hover { background: color-mix(in srgb, var(--success) 84%, white); border-color: transparent; }
.call-btn[disabled] { background: var(--panel-2); color: var(--faint); }
.hangup-btn {
  background: var(--error); color: #fff; border-color: transparent;
  font-size: 16px; font-weight: 600; padding: 16px; border-radius: 999px;
  display: block; width: 100%; margin-top: 20px;
}
.hangup-btn:hover { background: color-mix(in srgb, var(--error) 84%, white); border-color: transparent; }

/* ---- the call screen ---- */
.call-card { text-align: center; padding-top: 12px; }
.call-leg { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.leg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: 0 0 auto; }
.leg-dot.dialing, .leg-dot.ringing { background: var(--orange); animation: legPulse 1.2s ease-in-out infinite; }
.leg-dot.answered { background: var(--success); }
.leg-dot.completed { background: var(--muted); }
.leg-dot.failed { background: var(--error); }
@keyframes legPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .leg-dot { animation: none !important; } }

.call-who { font-size: 26px; font-weight: 600; margin: 12px 0 4px; word-break: break-word; }
.call-number { font-size: 14px; color: var(--muted); letter-spacing: .04em; }
.call-timer { font-size: 34px; color: var(--fg); margin-top: 18px; font-variant-numeric: tabular-nums; }
.call-card .alert { text-align: left; margin-top: 20px; }

/* the facts list — the record, in the order the operator reads it */
.facts {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 16px;
  text-align: left; margin: 22px 0 0; font-family: var(--mono); font-size: 12px;
}
.facts dt { color: var(--faint); }
.facts dd { margin: 0; color: var(--fg); word-break: break-word; }
.facts dd.bad { color: var(--error); }
.facts dd.good { color: var(--success); }

.audio-wrap { text-align: left; margin-top: 8px; }
.audio-wrap .section-label { margin-top: 22px; }
.audio-wrap audio { width: 100%; }

/* ---- forms ---- */
.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.field-hint { font-size: 12px; color: var(--faint); line-height: 1.5; margin: 2px 0 0; }
.field-error { font-family: var(--mono); font-size: 12px; color: var(--error); line-height: 1.5; margin: 0; }
.field-error[hidden] { display: none; }
.input {
  font: inherit; width: 100%; color: var(--fg); background: var(--panel-2);
  border: 1px solid var(--hairline); border-radius: var(--radius); padding: 12px;
}
.input:focus { outline: none; border-color: var(--orange-35); }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--fg); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--orange); }

/* ---- profile cards ---- */
.card { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.card-title { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin-bottom: 8px; }
.card .btn { margin-top: 12px; }
.card p { font-size: 13px; color: var(--muted); margin: 0 0 4px; line-height: 1.5; }
.card .field-hint { margin-top: 10px; }
.card .field-hint b { color: var(--muted); font-weight: 600; }

/* the trunk card's own state line — the one thing on this screen that decides
   whether the phone can dial at all */
.trunk-state { font-family: var(--mono); font-size: 13px; }
.trunk-state.ok { color: var(--success); }
.trunk-state.off { color: var(--warning); }
.trunk-state.locked { color: var(--error); }
.trunk-meta { font-family: var(--mono); font-size: 11px; color: var(--faint); line-height: 1.7; margin-top: 8px; }

/* the inbound half. It sits under the outbound state because they fail
   independently: a line can be perfectly able to ring out and still never ring. */
.trunk-reg {
  font-family: var(--mono); font-size: 12px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--hairline);
}
.trunk-reg.ok { color: var(--success); }
.trunk-reg.bad { color: var(--error); }
.trunk-reg.off { color: var(--faint); }
.trunk-reg-sub { display: block; font-size: 11px; color: var(--faint); line-height: 1.7; margin-top: 4px; }

#push-toggle[aria-checked="true"] { background: var(--orange); color: var(--on-orange); border-color: transparent; }

/* ---- tab bar ---- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex; background: rgba(10,10,10,.92); backdrop-filter: blur(12px);
  border-top: 1px solid var(--hairline); z-index: 5;
}
.tab {
  flex: 1; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--faint); font-family: var(--mono); font-size: 11px; cursor: pointer;
}
.tab.is-active { color: var(--orange); }

/* ---- toast ---- */
#toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 24px); transform: translateX(-50%) translateY(8px);
  background: var(--panel-2); border: 1px solid var(--hairline); color: var(--fg);
  font-family: var(--mono); font-size: 12px; padding: 10px 16px; border-radius: 999px;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 20;
  max-width: 86vw; text-align: center;
}
#toast[hidden] { display: none; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- update-available banner (a new deploy was detected) ---- */
/* the `hidden` attribute's UA display:none loses to this class rule, so guard it
   explicitly — otherwise the banner shows permanently regardless of [hidden]. */
.app-banner[hidden] { display: none; }
.app-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 9px) 16px 9px;
  background: var(--orange); color: var(--on-orange);
  font-family: var(--mono); font-size: 12px;
}
.app-banner .btn-sm { background: rgba(0,0,0,.18); border-color: transparent; color: var(--on-orange); border-radius: 999px; }
.app-banner .btn-sm:hover { border-color: transparent; background: rgba(0,0,0,.3); }
/* push the app down so the fixed banner never covers the top bar */
body.has-banner #app { padding-top: calc(env(safe-area-inset-top) + 52px); }