/* ============================================================================
   NIGHTHAWK TALON — design system
   ----------------------------------------------------------------------------
   Identity: dusk. A warm near-black ground with an ember accent, rather than
   the cool cyan-on-navy of the marketing site. This is a tool someone stares
   at all day, so the ground is quiet and colour is spent only where it carries
   meaning: priority, state, and the AI's confidence in itself.
   Light and dark are both first-class; the app follows the OS and can be
   overridden with the toggle.
   ========================================================================== */

:root {
  /* Dark is the default identity. */
  --bg:            #15120f;
  --surface:       #1c1815;
  --raised:        #24201b;
  --raised-hover:  #2c2721;
  --line:          rgba(255, 214, 170, 0.10);
  --line-strong:   rgba(255, 214, 170, 0.20);

  --text:          #f2ece3;
  --text-soft:     #c3b8a9;
  --muted:         #8d8478;

  --ember:         #ff7a45;
  --ember-soft:    rgba(255, 122, 69, 0.13);
  --ember-line:    rgba(255, 122, 69, 0.32);

  --p1:            #ff4d4d;
  --p2:            #f5b942;
  --p3:            #5ea8ff;
  --p4:            #8a8175;
  --ok:            #4fcf9a;

  --shadow:        0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
  --radius:        12px;
  --radius-sm:     8px;

  --sans: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --sidebar-w: 232px;
  --topbar-h: 56px;
  color-scheme: dark;
}

/* Light tokens live in one place and are applied by two selectors: the OS
   preference (unless the user has explicitly chosen dark) and the explicit
   toggle. Without the media query the app could never follow the OS, which
   is what the toggle assumes. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
  --bg:            #faf7f2;
  --surface:       #ffffff;
  --raised:        #f4efe7;
  --raised-hover:  #ece5da;
  --line:          rgba(60, 45, 30, 0.12);
  --line-strong:   rgba(60, 45, 30, 0.22);

  --text:          #1e1913;
  --text-soft:     #5a5145;
  --muted:         #8a8073;

  --ember:         #d1541c;
  --ember-soft:    rgba(209, 84, 28, 0.10);
  --ember-line:    rgba(209, 84, 28, 0.30);

  --p1:            #d92d20;
  --p2:            #b25e02;
  --p3:            #175cd3;
  --p4:            #8a8073;
  --ok:            #027a48;

  --shadow: 0 1px 2px rgba(60,45,30,.06), 0 8px 24px rgba(60,45,30,.08);
  color-scheme: light;
  }
}

:root[data-theme='light'] {
  --bg:            #faf7f2;
  --surface:       #ffffff;
  --raised:        #f4efe7;
  --raised-hover:  #ece5da;
  --line:          rgba(60, 45, 30, 0.12);
  --line-strong:   rgba(60, 45, 30, 0.22);

  --text:          #1e1913;
  --text-soft:     #5a5145;
  --muted:         #8a8073;

  --ember:         #d1541c;
  --ember-soft:    rgba(209, 84, 28, 0.10);
  --ember-line:    rgba(209, 84, 28, 0.30);

  --p1:            #d92d20;
  --p2:            #b25e02;
  --p3:            #175cd3;
  --p4:            #8a8073;
  --ok:            #027a48;

  --shadow: 0 1px 2px rgba(60,45,30,.06), 0 8px 24px rgba(60,45,30,.08);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; border-radius: 4px; }

/* ── Layout ───────────────────────────────────────────────────────────────── */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: fixed; inset: 0 auto 0 0;
  z-index: 40;
  transition: transform .22s ease;
}

.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--line);
}
.brand-mark {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(145deg, var(--ember), #c2410c);
  display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(255,122,69,.30);
}
.brand-mark svg { width: 17px; height: 17px; color: #fff; }
.brand-name { font-weight: 650; letter-spacing: -.01em; font-size: .95rem; }
.brand-sub  { font-size: .68rem; color: var(--muted); letter-spacing: .09em; text-transform: uppercase; }

.nav { padding: 14px 10px; display: flex; flex-direction: column; gap: 1px; flex: 1; overflow-y: auto; }
.nav-label {
  font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); padding: 14px 10px 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--text-soft); font-weight: 500; font-size: .875rem;
  transition: background .14s, color .14s;
}
.nav-item:hover { background: var(--raised); color: var(--text); }
.nav-item.active { background: var(--ember-soft); color: var(--ember); font-weight: 600; }
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.nav-count {
  margin-left: auto; font-size: .7rem; font-weight: 600;
  background: var(--raised); color: var(--text-soft);
  padding: 1px 7px; border-radius: 20px; min-width: 20px; text-align: center;
}
.nav-item.active .nav-count { background: var(--ember); color: #fff; }

.sidebar-foot { padding: 12px; border-top: 1px solid var(--line); }
.who { display: flex; align-items: center; gap: 10px; padding: 4px 6px; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--ember-soft); border: 1px solid var(--ember-line);
  color: var(--ember); display: grid; place-items: center;
  font-size: .72rem; font-weight: 700;
}
.who-name { font-size: .82rem; font-weight: 600; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-role { font-size: .7rem; color: var(--muted); text-transform: capitalize; }

.main { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-width: 0; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--topbar-h); padding: 0 24px;
  display: flex; align-items: center; gap: 14px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar h1 { font-size: .98rem; font-weight: 650; letter-spacing: -.01em; }
.topbar .spacer { flex: 1; }

.content { padding: 24px; flex: 1; max-width: 1180px; width: 100%; }
.content.wide { max-width: none; }

/* ── Type ─────────────────────────────────────────────────────────────────── */

.page-title { font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; }
.page-sub { color: var(--muted); font-size: .875rem; margin-top: 2px; }

/* Who asked. The most-consulted fact on a ticket after the subject, so it gets
   its own line rather than another crumb in .page-sub. */
.requester {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 6px; font-size: .875rem;
}
.requester-label {
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted);
}
.requester-name { color: var(--text); font-weight: 500; }
.requester-mail {
  color: var(--text-soft); text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}
.requester-mail:hover { color: var(--ember); border-bottom-color: var(--ember-line); }
.requester-none { color: var(--muted); font-style: italic; }

/* A second line inside a table cell — the contact under the client. */
.cell-sub { font-size: .78rem; color: var(--muted); margin-top: 2px; }

/* ── Slide-over panel ──────────────────────────────────────────────────────
   Opens from the right over the current page. Used for the contact card, so
   you can see who someone is without losing your place on the ticket. */
.slideover-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0, 0, 0, .38);
  opacity: 0; transition: opacity .18s ease;
}
.slideover-scrim.open { opacity: 1; }

.slideover {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(420px, 100vw);
  display: flex; flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: -12px 0 32px rgba(0, 0, 0, .22);
  transform: translateX(100%);
  transition: transform .2s ease;
}
.slideover.open { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .slideover, .slideover-scrim { transition: none; }
}

.slideover-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 16px 16px 12px; border-bottom: 1px solid var(--line);
}
.slideover-head .grow { flex: 1; min-width: 0; }
.slideover-title { font-size: 1.05rem; font-weight: 600; color: var(--text); }
.slideover-sub { font-size: .82rem; color: var(--muted); margin-top: 2px; }
.slideover-body { padding: 16px; overflow-y: auto; flex: 1; }

.slideover-section { margin-bottom: 18px; }
.slideover-section:last-child { margin-bottom: 0; }
.slideover-label {
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}

/* Label/value rows inside the panel. */
.kv { display: grid; grid-template-columns: 82px 1fr; gap: 4px 10px; font-size: .875rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.kv a { color: var(--text-soft); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.kv a:hover { color: var(--ember); border-bottom-color: var(--ember-line); }

/* Their other tickets. */
.mini-ticket {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-top: 1px solid var(--line);
  padding: 9px 2px; color: inherit; font: inherit;
}
.mini-ticket:first-of-type { border-top: 0; }
.mini-ticket:hover { background: var(--raised); }
.mini-ticket .mt-subject {
  font-size: .84rem; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mini-ticket .mt-meta { font-size: .74rem; color: var(--muted); margin-top: 3px; }
.mini-ticket.current .mt-subject { color: var(--muted); }

/* ── Finishing a ticket ────────────────────────────────────────────────────
   Two ways to end a ticket that differ in whether the client hears about it,
   so they sit together and each says which it is. */
.finish-card {
  margin-top: 14px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.finish-copy { flex: 1; min-width: 200px; }
.finish-title {
  font-weight: 600; color: var(--text); font-size: .95rem;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.finish-sub { font-size: .82rem; color: var(--muted); margin-top: 3px; }
.finish-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* A qualifier beside a field label — "optional", "what Talon triaged it as". */
.hint-inline {
  font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--muted); font-size: .74rem; margin-left: 6px;
}

/* The contact name in the header, which opens the panel. */
.requester-name.linked {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 500;
  color: var(--text); cursor: pointer;
  border-bottom: 1px solid var(--line-strong);
}
.requester-name.linked:hover { color: var(--ember); border-bottom-color: var(--ember-line); }
.requester-company { color: var(--text-soft); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.requester-company:hover { color: var(--ember); border-bottom-color: var(--ember-line); }


.section-head {
  display: flex; align-items: baseline; gap: 10px;
  margin: 28px 0 12px;
}
.section-head h2 { font-size: .95rem; font-weight: 650; letter-spacing: -.01em; }
.section-head .hint { font-size: .8rem; color: var(--muted); }
.mono { font-family: var(--mono); font-size: .82em; }

/* ── Cards ────────────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}
.card + .card { margin-top: 14px; }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.card-head h3 { font-size: .9rem; font-weight: 650; }
.card-head .spacer { flex: 1; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; }
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px;
}
.stat-label {
  font-size: .68rem; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
.stat-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; margin-top: 6px; line-height: 1; }
.stat-note { font-size: .76rem; color: var(--muted); margin-top: 5px; }
.stat.alert .stat-value { color: var(--p1); }
.stat.warn  .stat-value { color: var(--p2); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: var(--raised); color: var(--text);
  font-size: .84rem; font-weight: 550; cursor: pointer;
  transition: background .14s, border-color .14s, opacity .14s;
  white-space: nowrap;
}
.btn:hover { background: var(--raised-hover); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg { width: 15px; height: 15px; }

.btn-primary { background: var(--ember); color: #fff; font-weight: 600; }
.btn-primary:hover { background: color-mix(in srgb, var(--ember) 88%, #000); }
.btn-ghost { background: transparent; border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--raised); }
.btn-ok   { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok);
            border-color: color-mix(in srgb, var(--ok) 34%, transparent); }
.btn-ok:hover { background: color-mix(in srgb, var(--ok) 26%, transparent); }
.btn-warn { background: color-mix(in srgb, var(--p2) 16%, transparent); color: var(--p2);
            border-color: color-mix(in srgb, var(--p2) 34%, transparent); }
.btn-warn:hover { background: color-mix(in srgb, var(--p2) 26%, transparent); }
.btn-sm { padding: 5px 10px; font-size: .78rem; }
.btn-icon { padding: 7px; }

/* ── Forms ────────────────────────────────────────────────────────────────── */

.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: .78rem; font-weight: 600;
  color: var(--text-soft); margin-bottom: 5px;
}
.input, .select, .textarea {
  width: 100%; padding: 9px 12px;
  background: var(--bg); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); font-size: .875rem;
  transition: border-color .14s, box-shadow .14s; outline: none;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--ember);
  box-shadow: 0 0 0 3px var(--ember-soft);
}
.input::placeholder, .textarea::placeholder { color: var(--muted); }
.textarea { resize: vertical; min-height: 92px; line-height: 1.6; }
.select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238d8478' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 15px;
  padding-right: 32px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 130px; }

/* ── Badges & priority ────────────────────────────────────────────────────── */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 20px;
  font-size: .69rem; font-weight: 650; letter-spacing: .03em;
  border: 1px solid transparent; white-space: nowrap;
}
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge.plain::before { display: none; }

.badge-p1 { color: var(--p1); background: color-mix(in srgb, var(--p1) 13%, transparent); border-color: color-mix(in srgb, var(--p1) 28%, transparent); }
.badge-p2 { color: var(--p2); background: color-mix(in srgb, var(--p2) 13%, transparent); border-color: color-mix(in srgb, var(--p2) 28%, transparent); }
.badge-p3 { color: var(--p3); background: color-mix(in srgb, var(--p3) 13%, transparent); border-color: color-mix(in srgb, var(--p3) 28%, transparent); }
.badge-p4 { color: var(--p4); background: color-mix(in srgb, var(--p4) 15%, transparent); border-color: color-mix(in srgb, var(--p4) 30%, transparent); }
.badge-ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); border-color: color-mix(in srgb, var(--ok) 28%, transparent); }
.badge-ember { color: var(--ember); background: var(--ember-soft); border-color: var(--ember-line); }
.badge-mute { color: var(--muted); background: var(--raised); border-color: var(--line-strong); }

/* Confidence meter — how sure the model is, at a glance. */
.conf { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--muted); }
.conf-bar { width: 42px; height: 5px; border-radius: 3px; overflow: hidden;
  background: var(--line-strong); border: 1px solid var(--line); }
.conf-fill { height: 100%; border-radius: 2px; background: var(--ok); }
.conf-fill.mid { background: var(--p2); }
.conf-fill.low { background: var(--p1); }

/* ── Tables & lists ───────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; padding: 10px 14px;
  font-size: .68rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap;
}
tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: .86rem; color: var(--text-soft); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .12s; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--raised); }
td .subject { color: var(--text); font-weight: 550; }
td.num { font-family: var(--mono); font-size: .78rem; color: var(--muted); }

/* ── Triage cards — the review workbench ──────────────────────────────────── */

.triage-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .16s;
}
.triage-card + .triage-card { margin-top: 12px; }
.triage-card:hover { border-color: var(--line-strong); }
.triage-card.escalate { border-left: 3px solid var(--p1); }

.triage-top { padding: 14px 16px 12px; display: flex; gap: 12px; align-items: flex-start; }
.triage-meta { flex: 1; min-width: 0; }
.triage-subject { font-weight: 600; color: var(--text); font-size: .92rem; letter-spacing: -.01em; }
.triage-from { font-size: .78rem; color: var(--muted); margin-top: 3px; }
.triage-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.ai-read {
  padding: 12px 16px;
  background: var(--raised);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ai-read-label {
  display: flex; align-items: center; gap: 6px;
  font-size: .68rem; font-weight: 650; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ember); margin-bottom: 6px;
}
.ai-read-label svg { width: 13px; height: 13px; }
.ai-summary { font-size: .87rem; color: var(--text); }
.ai-reason { font-size: .8rem; color: var(--muted); margin-top: 5px; font-style: italic; }

.triage-actions { padding: 11px 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.triage-actions .spacer { flex: 1; }

.correct-panel {
  padding: 14px 16px; border-top: 1px solid var(--line); background: var(--bg);
  display: none;
}
.correct-panel.open { display: block; }

/* ── Conversation thread ──────────────────────────────────────────────────── */

.thread { display: flex; flex-direction: column; gap: 14px; }
.msg { display: flex; gap: 11px; }
.msg-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: .7rem; font-weight: 700;
  background: var(--raised); color: var(--text-soft); border: 1px solid var(--line);
}
.msg.outbound .msg-avatar { background: var(--ember-soft); color: var(--ember); border-color: var(--ember-line); }
.msg-body { flex: 1; min-width: 0; }
.msg-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; flex-wrap: wrap; }
.msg-author { font-weight: 600; font-size: .84rem; }
.msg-time { font-size: .74rem; color: var(--muted); }
.msg-text {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 11px 13px;
  font-size: .87rem; white-space: pre-wrap; word-break: break-word; line-height: 1.6;
}
.msg.internal .msg-text {
  background: color-mix(in srgb, var(--p2) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--p2) 26%, transparent);
}

/* ── Digest ───────────────────────────────────────────────────────────────── */

.digest-body { font-size: .9rem; line-height: 1.7; }
.digest-body h2 {
  font-size: .78rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ember); margin: 20px 0 8px; padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
}
.digest-body h2:first-child { margin-top: 0; }
.digest-body ul { margin: 0 0 10px; }
.digest-body li { padding-left: 15px; position: relative; margin: 4px 0; color: var(--text-soft); }
.digest-body li::before { content: '·'; position: absolute; left: 4px; color: var(--ember); font-weight: 700; }
.digest-body strong { color: var(--text); font-weight: 650; }
.digest-body p { margin: 6px 0; color: var(--text-soft); }
.digest-body code { font-family: var(--mono); font-size: .84em; background: var(--raised); padding: 1px 5px; border-radius: 4px; }

/* ── Misc ─────────────────────────────────────────────────────────────────── */

.empty { text-align: center; padding: 52px 20px; color: var(--muted); }
.empty svg { width: 34px; height: 34px; opacity: .35; margin-bottom: 12px; }
.empty p { font-size: .88rem; }
.empty .empty-title { color: var(--text-soft); font-weight: 600; margin-bottom: 4px; font-size: .92rem; }

.notice {
  padding: 11px 14px; border-radius: var(--radius-sm);
  font-size: .84rem; margin-bottom: 14px; border: 1px solid transparent;
}
.notice-error { background: color-mix(in srgb, var(--p1) 11%, transparent); border-color: color-mix(in srgb, var(--p1) 28%, transparent); color: var(--p1); }
.notice-ok    { background: color-mix(in srgb, var(--ok) 11%, transparent); border-color: color-mix(in srgb, var(--ok) 28%, transparent); color: var(--ok); }
.notice-info  { background: var(--ember-soft); border-color: var(--ember-line); color: var(--ember); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 5px 11px; border-radius: 20px; font-size: .78rem; font-weight: 550;
  background: var(--surface); border: 1px solid var(--line); color: var(--text-soft);
  cursor: pointer; transition: all .14s;
}
.chip:hover { border-color: var(--line-strong); color: var(--text); }
.chip.on { background: var(--ember-soft); border-color: var(--ember-line); color: var(--ember); font-weight: 600; }

.spin { display: inline-block; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton {
  background: linear-gradient(90deg, var(--raised) 25%, var(--raised-hover) 50%, var(--raised) 75%);
  background-size: 200% 100%; animation: shimmer 1.3s infinite;
  border-radius: var(--radius-sm); height: 62px; margin-bottom: 10px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

.modal-veil {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.55); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 20px;
}
.modal-veil[hidden] { display: none; }
.modal {
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: var(--shadow);
  width: 100%; max-width: 540px; max-height: 88vh; overflow-y: auto; padding: 22px;
}
.modal h2 { font-size: 1.05rem; font-weight: 680; margin-bottom: 16px; }
.modal-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }

/* ── Login ────────────────────────────────────────────────────────────────── */

.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(ellipse 70% 55% at 50% 0%, color-mix(in srgb, var(--ember) 9%, transparent), transparent 70%), var(--bg); }
.auth-card { width: 100%; max-width: 372px; }
.auth-brand { display: flex; align-items: center; gap: 11px; justify-content: center; margin-bottom: 26px; }
.auth-brand .brand-mark { width: 34px; height: 34px; border-radius: 9px; }
.auth-brand .brand-mark svg { width: 20px; height: 20px; }
.auth-title { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }
.auth-box { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.auth-foot { text-align: center; margin-top: 18px; font-size: .78rem; color: var(--muted); }

/* ── Responsive ───────────────────────────────────────────────────────────── */

.menu-btn { display: none; background: none; border: none; cursor: pointer; padding: 5px; color: var(--text-soft); }
.menu-btn svg { width: 19px; height: 19px; }
.veil { display: none; }

@media (max-width: 860px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow); }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .menu-btn { display: inline-flex; }
  .veil.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 35; }
  .content { padding: 16px; }
  .topbar { padding: 0 16px; }
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 5px;
  border: 2px solid var(--bg); background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; }

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

/* ── SSO divider ──────────────────────────────────────────────────────────── */
.sso-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0; color: var(--muted); font-size: .74rem;
  text-transform: uppercase; letter-spacing: .08em;
}
.sso-divider::before, .sso-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

/* ── Pinned documentation notes ───────────────────────────────────────────── */
.msg.pinned .msg-text {
  border-color: var(--ember-line);
  background: color-mix(in srgb, var(--ember) 6%, var(--surface));
}

/* An audit row that did not succeed. Tinted rather than shouted — most logs
   are read by scanning, and a wall of red stops being information. */
.audit-bad td { background: rgba(255, 77, 77, .06); }

/* ── Ask Talon ──────────────────────────────────────────────────────────────
   A conversation panel on the ticket. Kept visually quieter than the ticket
   itself: it is a second opinion, not the record. */
.assist { padding-bottom: 14px; }

.assist-thread {
  max-height: 460px; overflow-y: auto;
  margin-bottom: 12px; padding-right: 4px;
  display: flex; flex-direction: column; gap: 10px;
}

.assist-turn { font-size: .875rem; line-height: 1.55; }
.assist-turn.you {
  align-self: flex-end; max-width: 78%;
  background: var(--ember-soft); border: 1px solid var(--ember-line);
  border-radius: var(--radius) var(--radius) 4px var(--radius);
  padding: 8px 12px; color: var(--text);
}
.assist-turn.talon { align-self: stretch; color: var(--text-soft); }
.assist-turn.waiting { color: var(--muted); font-style: italic; }

/* What it went and looked at before answering. */
.assist-did {
  font-size: .72rem; color: var(--muted);
  text-transform: lowercase; letter-spacing: .02em; margin-bottom: 6px;
}
.assist-text > :first-child { margin-top: 0; }
.assist-text > :last-child { margin-bottom: 0; }
.assist-text p { margin: 0 0 8px; }
.assist-text code {
  background: var(--raised); padding: 1px 5px; border-radius: 4px;
  font-family: var(--mono); font-size: .86em;
}
.assist-text ul, .assist-text ol { margin: 0 0 8px; padding-left: 20px; }

/* A staged change. Always something you accept, never something that happened. */
.assist-proposal {
  margin-top: 10px; border: 1px solid var(--ember-line);
  border-radius: var(--radius-sm); overflow: hidden;
}
.assist-proposal-head {
  background: var(--ember-soft); padding: 6px 12px;
  font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-soft);
}
.assist-proposal-body {
  padding: 10px 12px; font-size: .86rem; color: var(--text);
  white-space: pre-wrap; max-height: 260px; overflow-y: auto;
}
.assist-proposal-actions {
  padding: 0 12px 10px; display: flex; gap: 8px;
}

.assist-suggest { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.assist-compose { display: flex; gap: 8px; align-items: flex-end; }
.assist-compose textarea { resize: vertical; min-height: 42px; }
.assist-compose .btn { flex-shrink: 0; }

@media (max-width: 640px) {
  .assist-turn.you { max-width: 92%; }
}

/* ── Ticket layout ──────────────────────────────────────────────────────────
   Conversation in the main column, the things you change in a rail beside it.
   The rail is sticky so status and priority stay reachable however long the
   thread gets — reaching them was the reason to move them. */
.ticket-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  gap: 20px;
  align-items: start;
  margin-top: 16px;
}
.ticket-main { min-width: 0; }

.ticket-rail {
  position: sticky;
  /* Below the sticky topbar, not under it — the topbar is 56px and paints
     over anything that sticks higher. */
  top: calc(var(--topbar-h) + 16px);
  display: flex; flex-direction: column; gap: 12px;
  /* Its own scroll if the rail ever outgrows the viewport, so the bottom card
     is never unreachable. */
  max-height: calc(100vh - var(--topbar-h) - 32px);
  overflow-y: auto;
}

.rail-card { padding: 14px; }
.rail-head {
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px;
}
.rail-card .field { margin-bottom: 12px; }
.rail-card .field label { font-size: .78rem; }
.rail-note { font-size: .72rem; color: var(--muted); margin-top: 4px; }
.rail-stat { font-size: .9rem; color: var(--text); margin-bottom: 10px; }

/* Confirmation that a rail change stuck. Deliberately quiet: it appears on
   every edit, and a change that saved is the expected outcome. */
.rail-saved {
  font-size: .74rem; color: var(--ok); text-align: right;
  animation: rail-fade .2s ease;
}
@keyframes rail-fade { from { opacity: 0 } to { opacity: 1 } }

/* At rail width, watcher chips read better stacked than wrapped. */
.rail-chips { flex-direction: column; align-items: stretch; }
.rail-chips .chip { justify-content: space-between; }

/* Every other icon site constrains its SVG; a heading did not, and an
   unsized SVG expands to fill whatever it is given. */
.section-head h2 svg { width: 15px; height: 15px; vertical-align: -2px; color: var(--ember); }
.section-head h2 { display: flex; align-items: center; gap: 7px; }

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.tab {
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .875rem; font-weight: 500;
  color: var(--muted);
  padding: 9px 14px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: flex; align-items: center; gap: 7px;
}
.tab:hover { color: var(--text-soft); }
.tab.on { color: var(--text); border-bottom-color: var(--ember); }
.tab-count {
  font-size: .72rem; font-weight: 500;
  background: var(--raised); color: var(--muted);
  padding: 1px 6px; border-radius: 999px;
}
.tab.on .tab-count { background: var(--ember-soft); color: var(--ember); }
.tab-count:empty { display: none; }

@media (max-width: 1080px) {
  /* One column. The rail goes above the conversation rather than below it:
     changing status is a two-second job and should not be behind a long
     thread. */
  .ticket-layout { grid-template-columns: minmax(0, 1fr); }
  .ticket-rail {
    position: static; max-height: none; order: -1;
    flex-direction: row; flex-wrap: wrap;
  }
  .ticket-rail .rail-card { flex: 1 1 260px; }
}