/* Agentics PWA — house style (canonical = pks-agent-share / coach):
   near-black canvas, Agentic Orange, mono chrome, soft corner glow.
   Copy this :root token block + .glow + topbar/lockup chrome verbatim; build
   your app chrome below it. */

: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;

  /* Geist Mono FIRST (design-system canon; the one place we override Share-wins).
     Self-host GeistVF.woff + GeistMonoVF.woff; do NOT hit Google Fonts at runtime. */
  --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;
}

/* soft warm corner glow — the brand world, earned orange at low alpha */
.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); }
/* the amber block cursor — the "I" of the hidden AI; always #f87f2e, never recolored */
.brand-dot { color: var(--orange); animation: brandBlink 1.1s step-end infinite; }
.status { font-family: var(--mono); font-size: 11px; color: var(--faint); }

@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.primary, .btn-primary { background: var(--orange); color: var(--on-orange); border-color: transparent; }
.btn.ghost, .btn-ghost { background: transparent; }
.btn-block { display: block; width: 100%; }

/* ============================================================== *
 *  Agent Inbox — app chrome (lists, rows, tabbar, sheet, toggle) *
 * ============================================================== */

/* brand lockup idiom: agent·inbox with an earned orange middot */
.brand-mid { color: var(--orange); }

.view { flex: 1; padding-top: 16px; }
.view[hidden] { display: none; }

.view-head { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 14px; }
.view-title { font-family: var(--mono); font-size: 15px; color: var(--fg); margin: 0; }
.view-sub { font-family: var(--mono); font-size: 11px; color: var(--faint); }

.backlink {
  font-family: var(--mono); font-size: 12px; color: var(--orange);
  background: none; border: 0; padding: 0 0 12px; cursor: pointer;
}

/* owner group header */
.owner-group { margin-bottom: 18px; }
.owner-label {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--faint); margin: 0 0 8px;
}

/* tappable rows (inbox + email) */
.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);
  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-title.unread { color: var(--fg); }
.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; }
.badge {
  font-family: var(--mono); font-size: 11px; color: var(--on-orange);
  background: var(--orange); border-radius: 999px; padding: 1px 8px; min-width: 20px; text-align: center;
}
.badge.zero { color: var(--faint); background: var(--orange-12); }

.empty { font-family: var(--mono); font-size: 12px; color: var(--faint); padding: 24px 4px; text-align: center; }

.flash { animation: rowFlash 1.4s ease; }
@keyframes rowFlash { 0%,20% { border-color: var(--orange); background: var(--orange-12); } 100% { } }

/* email detail (third view) */
.mail-head { border-bottom: 1px solid var(--hairline); padding-bottom: 12px; margin-bottom: 12px; }
.mail-subject { font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.mail-meta { font-family: var(--mono); font-size: 11px; color: var(--muted); line-height: 1.5; }
.mail-body { white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.55; color: var(--fg); }
.mail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.chip {
  font-family: var(--mono); font-size: 12px; color: var(--fg); text-decoration: none;
  background: var(--panel-2); border: 1px solid var(--hairline); border-radius: 999px; padding: 6px 12px;
}
.chip:hover { border-color: var(--orange-35); }
.chip.danger { color: var(--error); border-color: color-mix(in srgb, var(--error) 35%, var(--hairline)); cursor: pointer; }
.chip.danger:hover { border-color: var(--error); background: color-mix(in srgb, var(--error) 12%, var(--panel-2)); }

/* profile / settings */
.card { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.card h3 { font-family: var(--mono); font-size: 13px; margin: 0 0 6px; color: var(--fg); }
.card p { font-size: 13px; color: var(--muted); margin: 0 0 4px; line-height: 1.5; }

.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.switch {
  width: 46px; height: 28px; border-radius: 999px; border: 1px solid var(--hairline);
  background: var(--panel-2); position: relative; cursor: pointer; flex: 0 0 auto; transition: background .15s ease;
}
.switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--faint); transition: transform .15s ease, background .15s ease;
}
.switch[aria-checked="true"] { background: var(--orange); border-color: transparent; }
.switch[aria-checked="true"]::after { transform: translateX(18px); background: var(--on-orange); }

.hint { font-size: 12px; color: var(--faint); line-height: 1.5; }
.hint b { color: var(--muted); font-weight: 600; }

/* ---- 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; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: none; border: 0; color: var(--faint); font-family: var(--mono); font-size: 10px; cursor: pointer;
}
.tab .ic { font-size: 18px; line-height: 1; }
.tab[aria-selected="true"] { 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.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- domains (self-service claim) ---- */
.input {
  font: inherit; width: 100%; color: var(--fg); background: var(--panel-2);
  border: 1px solid var(--hairline); border-radius: var(--radius); padding: 10px 12px;
}
.input:focus { outline: none; border-color: var(--orange-35); }
.domain-add { display: flex; gap: 8px; margin: 12px 0 4px; }
.domain-add .input { flex: 1; }
.domain-add .btn { flex: 0 0 auto; }

.domain-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.domain-item { border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--panel-2); padding: 12px 14px; }
.domain-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.domain-name { font-family: var(--mono); font-size: 14px; color: var(--fg); word-break: break-all; }
.dstatus { font-family: var(--mono); font-size: 11px; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.dstatus.ok { color: var(--on-orange); background: var(--success); }
.dstatus.pending { color: var(--faint); background: var(--orange-12); }
.domain-body { margin-top: 8px; }

/* the PIN — big, mono, tappable to copy */
.pin {
  font-family: var(--mono); font-size: 28px; letter-spacing: .22em; text-align: center;
  color: var(--orange); background: var(--bg); border: 1px dashed var(--orange-35);
  border-radius: var(--radius); padding: 12px; margin: 10px 0 2px; cursor: pointer; user-select: all;
}

.domain-adv { margin-top: 12px; }
.domain-adv summary { font-family: var(--mono); font-size: 12px; color: var(--orange); cursor: pointer; }
.dns-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.dns-label { font-family: var(--mono); font-size: 11px; color: var(--faint); flex: 0 0 46px; }
.dns-val { font-family: var(--mono); font-size: 11px; color: var(--fg); background: var(--bg);
  border: 1px solid var(--hairline); border-radius: 6px; padding: 5px 8px; flex: 1; word-break: break-all; }
.copy-btn { flex: 0 0 auto; background: var(--panel); border: 1px solid var(--hairline); color: var(--muted);
  border-radius: 6px; padding: 5px 9px; cursor: pointer; font-size: 13px; }
.copy-btn:hover { border-color: var(--orange-35); color: var(--fg); }

.domain-actions { display: flex; gap: 8px; margin-top: 12px; }
.btn.sm { padding: 6px 12px; font-size: 12px; }

/* ---- 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);
  padding: 5px 12px; border-radius: 999px; font-size: 12px; }
/* 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); }