/* PTT Command Center console — Javelle app styles.

   Situation board: flat surfaces, hairline rules and squared corners rather than
   raised cards. Colour is reserved for meaning — amber is the active route, green is
   live, and everything else stays grey. The previous look spent amber on decoration
   as well as state, so "selected" and "live" competed for the same signal. Labels and
   figures are uppercase mono so the board reads from across a room. */

:root {
  --bg: #060a0f;
  --bg-raise: #0b1017;
  --bg-card: #0b1017;
  --line: #24354a;
  --line-soft: #16202c;
  --rule: #101923;
  --ink: #e8eef6;
  --ink-dim: #9db0c6;
  --ink-faint: #7c8ba1;
  --accent: #ffb302;
  --accent-ink: #10151d;
  --live: #2fd07a;
  --warn: #ff8a3d;
  --danger: #ff4d5e;
  --radius: 4px;
  --radius-sm: 3px;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --label: 700 11px/1.2 var(--mono);
  /* One focus ring for the whole board. This console is driven from a keyboard during
     an incident, and every surface here is dark, so the ring is a light halo outside
     the control plus a dark inner line to hold it off a light-filled button. */
  --focus-ring: #ffffff;
  --focus-ring-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring);
}

* { box-sizing: border-box; }

/* --- keyboard focus --------------------------------------------------------
   Nothing here declared a focus style, so a keyboard operator navigating the tab rail,
   a table's row actions or a dialog's buttons had only the user-agent ring, which the
   dark surfaces below all but erase. :focus-visible keeps it off pointer clicks. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* Controls that sit flush against a pane edge or fill their own frame cannot show an
   outline outside themselves, so they take the same ring as a shadow instead. */
.cc-tab:focus-visible,
.cc-item:focus-visible,
.cc-net-role__option:focus-visible,
.cc-net-assignment__toggle:focus-visible,
.cc-drawer__link:focus-visible,
j-input:focus-within,
j-textarea:focus-within,
j-select:focus-within {
  outline: none;
  box-shadow: var(--focus-ring-shadow);
}
/* Windows high-contrast mode drops colour entirely; keep a system-coloured ring. */
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid Highlight; }
}

/* Text that names a control for assistive technology without taking room on screen. */
.cc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Javelle controls set their own display, which beats the user-agent rule for the
   hidden attribute. Without this the LIVE badge and the Stop/Request buttons stay on
   screen while idle. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  /* text-fonts.css sets --cc-font-sans and swaps it to Noto Kufi Arabic for ar/rtl. */
  font-family: var(--cc-font-sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  min-height: 100vh;
}

/* Arabic sits taller than Latin at the same size; give the uppercase micro-labels a
   little more room so they do not clip. */
:root[dir="rtl"] { --label: 700 11.5px/1.5 var(--cc-font-sans); }
:root[dir="rtl"] .cc-tab,
:root[dir="rtl"] .btn { letter-spacing: 0; }

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: 22px; }
h2 {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.muted { color: var(--ink-dim); }
.small { font-size: 13px; }
.error { color: var(--danger); font-size: 13px; margin: 4px 0 0; }

/* --- sign-in gate ---------------------------------------------------------
   A cosmos field behind the gate: three parallax star layers, a slow nebula drift and
   a periodic shooting star. Built from gradients rather than a canvas loop or bitmaps,
   so it costs no JavaScript, no requests, and nothing at all once signed in — the gate
   is the only route that renders it. */
.cc-view--gate {
  position: fixed;
  inset: 0;
  z-index: 30;
  /* The cosmos layers deliberately overflow this box; clipping them here is what stops
     the page growing a scrollbar around a full-screen background. */
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 8%, #0d1524 0%, #070a10 55%, #04060a 100%);
}

/* is-active is what the router toggles; the fixed layer must obey it. */
.cc-view--gate:not(.is-active) { display: none; }

/* Nebula: two wide, low-opacity clouds drifting against each other. */
.cc-view--gate::before {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(38% 30% at 22% 30%, rgba(255, 179, 2, 0.13), transparent 70%),
    radial-gradient(34% 28% at 78% 62%, rgba(255, 90, 31, 0.11), transparent 70%),
    radial-gradient(30% 26% at 60% 18%, rgba(64, 132, 255, 0.10), transparent 70%);
  filter: blur(14px);
  animation: ccNebula 42s ease-in-out infinite alternate;
}

/* Stars: three layers at different sizes and speeds for parallax depth. */
.cc-view--gate::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 74% 12%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 41% 76%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 88% 58%, #ffe9b8, transparent),
    radial-gradient(1.5px 1.5px at 26% 54%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 63% 88%, #cfe3ff, transparent),
    radial-gradient(1px 1px at 6% 72%, #fff, transparent),
    radial-gradient(1px 1px at 52% 32%, #fff, transparent),
    radial-gradient(0.9px 0.9px at 33% 8%, #fff, transparent),
    radial-gradient(0.9px 0.9px at 92% 84%, #fff, transparent),
    radial-gradient(0.8px 0.8px at 18% 92%, #cfe3ff, transparent),
    radial-gradient(0.8px 0.8px at 70% 44%, #fff, transparent);
  background-repeat: repeat;
  background-size: 620px 620px, 620px 620px, 620px 620px, 620px 620px,
                   430px 430px, 430px 430px, 430px 430px, 430px 430px,
                   280px 280px, 280px 280px, 280px 280px, 280px 280px;
  opacity: 0.75;
  animation: ccDrift 150s linear infinite, ccTwinkle 6s ease-in-out infinite alternate;
}

/* One shooting star, crossing occasionally rather than on a loop you notice. */
.cc-comet {
  position: absolute;
  top: 12%;
  left: -12%;
  width: 190px;
  height: 1.5px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.55));
  transform: rotate(14deg);
  opacity: 0;
  animation: ccComet 17s ease-in infinite;
}
.cc-comet--2 { top: 46%; width: 130px; animation-duration: 23s; animation-delay: 9s; }

@keyframes ccNebula {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 1.5%, 0) scale(1.06); }
}
@keyframes ccDrift {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 620px 310px, 620px 310px, 620px 310px, 620px 310px,
                              430px 215px, 430px 215px, 430px 215px, 430px 215px,
                              280px 140px, 280px 140px, 280px 140px, 280px 140px; }
}
@keyframes ccTwinkle {
  from { opacity: 0.55; }
  to   { opacity: 0.9; }
}
@keyframes ccComet {
  0%, 88%  { opacity: 0; transform: translate3d(0, 0, 0) rotate(14deg); }
  90%      { opacity: 1; }
  100%     { opacity: 0; transform: translate3d(135vw, 34vh, 0) rotate(14deg); }
}

/* A moving starfield behind a password field is decoration, not information. */
@media (prefers-reduced-motion: reduce) {
  .cc-view--gate::before,
  .cc-view--gate::after { animation: none; }
  .cc-comet { display: none; }
}


/* The card is centred on both axes and reads as one column: mark, title, form, note.
   The amber top edge ties it to the board chrome behind it. */
.cc-gate {
  position: relative;
  z-index: 1;
  width: min(392px, 100%);
  /* On a short viewport the card scrolls, never the page behind it. */
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  display: grid;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 40px 90px rgb(0 0 0 / 62%), 0 0 0 1px rgb(0 0 0 / 30%);
  backdrop-filter: blur(10px);
}

.cc-gate__head {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 30px 26px 22px;
  text-align: center;
}

/* A soft amber bloom behind the mark, so the card has a light source of its own. */
.cc-gate__halo {
  position: absolute;
  top: -34px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 179, 2, 0.20), transparent 68%);
  pointer-events: none;
}

.cc-gate__mark {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 17px;
  box-shadow: 0 10px 28px rgb(255 179 2 / 26%);
}

.cc-gate h1 {
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.cc-gate__lede {
  margin: 0;
  max-width: 30ch;
  color: var(--ink-faint);
  font-size: 12.5px;
  line-height: 1.5;
}

.cc-gate__body { padding: 4px 26px 22px; }
.cc-gate .cc-form { gap: 14px; }
.cc-gate .cc-form label { gap: 7px; }
.cc-gate__submit { width: 100%; padding: 11px 14px; font-size: 12px; }

.cc-gate__note {
  padding: 16px 26px 20px;
  background: color-mix(in srgb, #000 22%, transparent);
}
.cc-gate__note p {
  margin: 0;
  color: var(--ink-faint);
  font-size: 11.5px;
  line-height: 1.55;
}
.cc-gate__note-rule {
  display: block;
  width: 26px;
  height: 2px;
  margin-bottom: 11px;
  background: var(--accent);
  opacity: 0.65;
}
/* The real brand mark, not a CSS approximation of it. */
.cc-gate__mark, .cc-brand__mark {
  border-radius: 11px;
  display: block;
  flex: none;
}
.cc-gate__mark { width: 56px; height: 56px; border-radius: 15px; }

.cc-gate h1 { margin-top: 6px; }
.cc-gate p { margin: 0 0 6px; }

label { display: grid; gap: 6px; font: var(--label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
/* A select generates its native control inside its own host, so an outer <label> never
   names it and the label is handed to the control instead. The label the control then
   renders gets the same micro-label treatment as the hand-written ones above. */
j-select .j-field__label {
  font: var(--label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
label.cc-check { display: flex; align-items: center; gap: 8px; }
label.cc-check input { width: auto; }
label.cc-inline { display: flex; align-items: center; gap: 8px; }
label.cc-inline select { width: auto; }

.btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  border-radius: var(--radius-sm);
  padding: 8px 13px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
}
.btn:hover { border-color: var(--accent); color: var(--ink); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { color: var(--accent-ink); }
.btn--primary:hover { filter: brightness(1.06); }
.btn--quiet { background: transparent; }
.btn--danger { color: var(--danger); }
.btn--file { display: inline-flex; align-items: center; }
.btn--sm { padding: 5px 10px; font-size: 13px; }

/* --- shell --------------------------------------------------------------- */
.cc-top {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 11px 18px;
  /* The amber rule is the board's masthead: one strong horizontal, no card edges. */
  border-bottom: 2px solid var(--accent);
  box-shadow: 0 1px 0 var(--line-soft);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(10px);
  flex-wrap: wrap;
}
.cc-brand { display: flex; align-items: center; gap: 11px; }
.cc-brand strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.cc-brand__link { display: flex; align-items: center; gap: 6px; font: var(--label); color: var(--live); }
.cc-top__right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.cc-who { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); }

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); display: inline-block; }
.dot.is-live { background: var(--live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 22%, transparent); }
.dot.is-down { background: var(--danger); }

.cc-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.cc-tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-faint);
  padding: 8px 11px;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cc-tab:hover { color: var(--ink); }
.cc-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }

.cc-views { padding: 20px; }
.cc-view { display: none; }
.cc-view.is-active { display: block; }

.cc-split { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 16px; align-items: start; }
.cc-split--wide { grid-template-columns: minmax(280px, 340px) 1fr; }
@media (max-width: 900px) { .cc-split, .cc-split--wide { grid-template-columns: 1fr; } }

.cc-pane {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 15px;
}
.cc-pane__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.cc-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Search boxes in a pane head are wrapped in a label that names them off screen; the
   label is the flex child now, so it has to lay out the way the control used to. */
.cc-row > label { display: flex; align-items: center; }
.cc-form { display: grid; gap: 12px; }

/* --- lists --------------------------------------------------------------- */
.cc-list { display: grid; gap: 8px; margin-top: 10px; }
/* A status bar on the leading edge instead of a bordered card: a live operator is
   scannable down the column without reading a single pill. */
.cc-item {
  display: grid;
  gap: 3px;
  padding: 9px 0 9px 11px;
  border: 0;
  border-left: 2px solid var(--line);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}
.cc-item:hover { border-left-color: var(--ink-faint); background: color-mix(in srgb, var(--accent) 4%, transparent); }
.cc-loop-item { display: contents; }
.cc-item.is-active { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.cc-item:has(.tag--live) { border-left-color: var(--live); }
.cc-item--static { cursor: default; }
.cc-item__top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.cc-item__title { font-weight: 650; font-size: 13.5px; }
.cc-item__meta { font-size: 12px; color: var(--ink-dim); font-family: var(--mono); }
.cc-item__actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

.tag {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid var(--line); color: var(--ink-faint);
}
.tag--live { border-color: var(--live); color: var(--live); }
.tag--warn { border-color: var(--warn); color: var(--warn); }
.tag--danger { border-color: var(--danger); color: var(--danger); }
.tag--key { border-color: var(--accent); color: var(--accent); }

.cc-detail { display: grid; gap: 14px; }
.cc-detail__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.cc-stat { background: var(--bg-raise); border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px; }
.cc-stat span { display: block; font-size: 12px; color: var(--ink-dim); }
.cc-stat strong { font-size: 16px; }

.cc-callout {
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--ink-dim);
  margin-bottom: 12px;
}
.cc-callout strong { color: var(--ink); display: block; }

/* --- map ------------------------------------------------------------------- */
.cc-map {
  position: relative;
  flex: 1;
  min-height: 240px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-raise);
  /* The j-map component sizes itself from these; the flex row above only sets
     a floor, so without a declared height the Maps canvas collapses to zero. */
  --jv-map-height: clamp(240px, 46vh, 560px);
  --jv-map-radius: 10px;
  --jv-map-surface: var(--bg-raise);
  display: block;
}
.cc-map__empty {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  text-align: center;
  padding: 24px;
  background: var(--bg-raise);
}
.cc-map__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.cc-map__who { font-size: 13px; color: var(--ink-dim); font-family: var(--mono); }

/* --- camera viewer ------------------------------------------------------- */
.cc-viewer { display: grid; gap: 8px; }
[data-cc-camera-canvas] {
  width: 100%; height: auto; background: #000;
  border: 1px solid var(--line-soft); border-radius: 10px; aspect-ratio: 4 / 3; object-fit: contain;
}
.cc-viewer__meta { font-family: var(--mono); font-size: 12px; color: var(--ink-dim); }

/* --- toast --------------------------------------------------------------- */
.cc-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 16px; font-size: 14px;
  box-shadow: 0 18px 44px rgb(0 0 0 / 50%); z-index: 50; max-width: min(560px, 92vw);
}
.cc-toast.is-bad { border-color: color-mix(in srgb, var(--danger) 55%, var(--line)); }

/* --- Javelle wiring ---------------------------------------------------------
   The templates ship every page; this decides which one is on screen and hides
   the whole console shell until an account is signed in. */
.cc[data-cc-auth="out"] .cc-top,
.cc[data-cc-auth="out"] .cc-view:not(.cc-view--gate) { display: none; }
.cc[data-cc-auth="in"] .cc-view--gate { display: none !important; }

j-card.cc-pane { display: block; }
j-card-section { display: block; }
j-tabs.cc-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
j-tab.cc-tab { cursor: pointer; user-select: none; }
j-button.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
j-input, j-select, j-textarea { display: block; width: 100%; }


/* --- dialogs ----------------------------------------------------------------
   Creating and archiving a net go through these rather than window.prompt and
   window.confirm, so they can carry real fields and match the console. */
.cc-dialog {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 22px;
  background: color-mix(in srgb, #000 68%, transparent);
  backdrop-filter: blur(4px);
}
.cc-dialog[hidden],
.cc-dialog.j-dialog--hidden { display: none !important; }

.cc-dialog__panel {
  display: block;
  width: min(440px, 100%);
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 30px 80px rgb(0 0 0 / 60%);
}
.cc-dialog__head { display: block; margin-bottom: 14px; }
.cc-dialog__head j-dialog-title,
.cc-dialog__head > *:first-child {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}
.cc-dialog__head p { margin: 4px 0 0; }
.cc-dialog__content { display: grid; gap: 12px; }
.cc-dialog__note {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-dim);
  padding: 9px 11px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.cc-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.cc-net-assignment-dialog__panel { width: min(620px, 100%); }
.cc-net-assignment-dialog__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cc-net-assignment-list {
  display: grid;
  gap: 8px;
  max-height: min(52vh, 480px);
  overflow-y: auto;
  padding: 2px;
}
.cc-net-assignment {
  width: 100%;
  display: grid;
  gap: 9px;
  padding: 10px;
  color: var(--ink);
  background: var(--bg-raise);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}
.cc-net-assignment:hover { border-color: var(--line); }
.cc-net-assignment.is-assigned {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-raise));
}
.cc-net-assignment__toggle {
  width: 100%;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 1px 2px;
  color: var(--ink);
  text-align: start;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.cc-net-assignment__box {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #151006;
  font-weight: 900;
}
.cc-net-assignment.is-assigned .cc-net-assignment__box {
  border-color: var(--accent);
  background: var(--accent);
}
.cc-net-assignment__copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.cc-net-assignment__copy strong,
.cc-net-assignment__copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-net-role {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
}
.cc-net-role__option {
  min-width: 0;
  padding: 7px 8px;
  color: var(--ink-dim);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}
.cc-net-role__option:hover { color: var(--ink); }
.cc-net-role__option.is-active {
  color: #171006;
  border-color: var(--accent);
  background: var(--accent);
}

@media (max-width: 620px) {
  .cc-net-assignment-dialog { align-items: end; padding: 0; }
  .cc-net-assignment-dialog__panel {
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    border-radius: 10px 10px 0 0;
  }
  .cc-net-role__option { padding-inline: 4px; font-size: 10px; }
}

/* ============================================================================
   Scrollbars
   The console is a dark instrument panel; the platform scrollbar is a bright slab
   through the middle of it. Thin, inset, and it only gains contrast on hover.
   ============================================================================ */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink-faint) 55%, transparent) transparent;
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink-faint) 45%, transparent);
  border-radius: 999px;
  /* Transparent border plus background-clip keeps the thumb visually thin while
     leaving a comfortable grab target. */
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 65%, transparent);
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:active {
  background: var(--accent);
  background-clip: content-box;
}

/* ============================================================================
   Route layout
   Instrument and table routes own the viewport. Their large content region scrolls
   internally, so the document never moves and the working surface reaches the
   bottom edge of the screen.
   ============================================================================ */
.cc { min-height: 100vh; display: flex; flex-direction: column; }

.cc[data-cc-route="map"] { height: 100vh; overflow: hidden; }
.cc[data-cc-route="map"] .cc-view.is-active {
  flex: 1;
  min-height: 0;
  display: flex;
  padding-bottom: 16px;
}
.cc[data-cc-route="map"] .cc-pane {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.cc[data-cc-route="map"] .cc-pane > j-card-section:last-child {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cc[data-cc-route="map"] .cc-list {
  flex: 0 1 auto;
  max-height: 26vh;
  overflow-y: auto;
  margin-top: 0;
  padding-right: 4px;
}

/* The camera view is a viewport-height instrument too: the uplink stage fills the
   pane, and the crew and history lists scroll inside it, so the page never scrolls. */
.cc[data-cc-route="camera"] { height: 100vh; overflow: hidden; }
.cc[data-cc-route="camera"] .cc-view.is-active {
  flex: 1;
  min-height: 0;
  display: flex;
  padding-bottom: 16px;
}
.cc[data-cc-route="camera"] .cc-split {
  flex: 1;
  min-height: 0;
  align-items: stretch;
}
.cc[data-cc-route="camera"] .cc-pane {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.cc[data-cc-route="camera"] .cc-pane > j-card-section:last-child {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cc[data-cc-route="camera"] .cc-viewer__stage {
  flex: 1;
  min-height: 0;
  aspect-ratio: auto;
}
.cc[data-cc-route="camera"] .cc-list {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

/* On compact command-centre screens, put the operational surface before the
   crew browser. The former two-row viewport grid was clipped by the route's
   overflow lock, which left Request camera and the live uplink below an
   unreachable fold. */
@media (max-width: 900px) {
  .cc[data-cc-route="camera"] {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-y: auto;
  }
  .cc[data-cc-route="camera"] .cc-view.is-active {
    display: block;
    overflow: visible;
  }
  .cc[data-cc-route="camera"] .cc-split {
    display: flex;
    flex-direction: column;
  }
  .cc[data-cc-route="camera"] .cc-camera__viewer { order: -1; }
  .cc[data-cc-route="camera"] .cc-camera__viewer .cc-pane__head {
    position: sticky;
    top: 0;
    z-index: 4;
    padding-block: 6px 10px;
    background: var(--bg-card);
    box-shadow: 0 1px 0 var(--line-soft);
  }
  .cc[data-cc-route="camera"] .cc-viewer__stage {
    min-height: clamp(240px, 52vh, 520px);
    aspect-ratio: 4 / 3;
  }
  .cc[data-cc-route="camera"] .cc-list {
    max-height: 42vh;
  }
}

/* Recordings and People are the console's table routes. The pane and its final
   section form one min-height:0 flex chain; without every link in that chain the
   table grows the document instead of becoming the sole scroll region. */
.cc[data-cc-route="recordings"],
.cc[data-cc-route="people"] {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.cc[data-cc-route="recordings"] .cc-view.is-active,
.cc[data-cc-route="people"] .cc-view.is-active {
  flex: 1;
  min-height: 0;
  display: flex;
  padding-bottom: 16px;
}
.cc[data-cc-route="recordings"] .cc-pane,
.cc[data-cc-route="people"] .cc-pane {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.cc[data-cc-route="recordings"] .cc-pane > j-card-section:last-child,
.cc[data-cc-route="people"] .cc-pane > j-card-section:last-child {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.cc[data-cc-route="recordings"] .cc-table-wrap,
.cc[data-cc-route="people"] .cc-table-wrap {
  flex: 1;
  min-height: 0;
  max-height: none;
}

/* ============================================================================
   Tables
   ============================================================================ */
.cc-table-wrap {
  margin-top: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  overflow: auto;
  max-height: 62vh;
}

j-table.cc-table {
  display: table;
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
j-table.cc-table j-thead { display: table-header-group; }
j-table.cc-table j-tbody { display: table-row-group; }
j-table.cc-table j-tr { display: table-row; }
j-table.cc-table j-th,
j-table.cc-table j-td {
  display: table-cell;
  padding: 9px 12px;
  text-align: start;
  vertical-align: middle;
  border-bottom: 1px solid var(--rule);
}

j-table.cc-table j-th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-card);
  color: var(--ink-faint);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 var(--line);
  border-bottom-color: var(--line);
}

j-table.cc-table j-tbody j-tr:last-child j-td { border-bottom: 0; }
/* Zebra banding beats hover-only feedback when someone is reading a long archive
   from a distance. */
j-table.cc-table j-tbody j-tr:nth-child(even) j-td { background: color-mix(in srgb, #fff 2%, transparent); }
j-table.cc-table j-tbody j-tr:hover j-td { background: color-mix(in srgb, var(--accent) 7%, transparent); }

j-table.cc-table .cc-strong { font-weight: 650; color: var(--ink); }
j-table.cc-table .cc-num { text-align: end; font-family: var(--mono); font-variant-numeric: tabular-nums; }
j-table.cc-table .cc-actions-col { text-align: end; white-space: nowrap; }
j-table.cc-table .cc-actions-col .cc-item__actions { justify-content: flex-end; margin-top: 0; }

.cc-empty {
  padding: 28px;
  text-align: center;
  color: var(--ink-dim);
  font-size: 13px;
}
/* A list that failed to load is not an empty list, and must not read like one. */
.cc-empty--error { color: var(--danger); }

.cc-field { display: grid; gap: 6px; margin-bottom: 12px; }
.cc-subhead {
  margin: 14px 0 2px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --- camera viewer ---------------------------------------------------------- */
.cc-viewer__stage {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line-soft);
  aspect-ratio: 4 / 3;
}
/* The stage shows the uplink's latest frame as an image; a canvas cannot be drawn into
   from Java-first code, so the element it holds is an <img> bound to that frame. */
.cc-viewer__stage [data-cc-camera-canvas] {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.cc-viewer__idle {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  padding: 24px;
  text-align: center;
  background: var(--bg-raise);
}
.cc-viewer__live {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--danger) 88%, #000);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.cc-viewer__live i {
  width: 6px; height: 6px; border-radius: 999px; background: #fff;
  animation: ccPulse 1.1s ease-in-out infinite;
}
@keyframes ccPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .cc-viewer__live i { animation: none; } }

.btn--danger { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }

/* Search boxes sit inline with the buttons in a pane head. */
.cc-pane__head j-input { width: auto; min-width: 220px; }
.cc-pane__head j-select { width: auto; }
@media (max-width: 720px) {
  .cc-pane__head { align-items: stretch; flex-direction: column; }
  .cc-pane__head j-input { min-width: 0; width: 100%; }
}

/* The language picker sits in the top bar and only needs to fit its longest label.
   Javelle keeps aria-label accessible as a field label; visually hide that duplicate
   because the selected language is already the control's visible text. */
.cc-lang { min-width: 108px; }
.cc-lang > .j-field__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

j-file { display: none; }

/* ============================================================================
   Small screens
   The tab rail is seven routes wide; below ~900px it wraps into two or three
   lines and eats the viewport. There it collapses into a drawer, which carries
   the same routes plus the identity and sign-out that live on the right of the
   bar on desktop.
   ============================================================================ */
.cc-menu {
  display: none;
  width: 38px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
}
.cc-menu__bars,
.cc-menu__bars::before,
.cc-menu__bars::after {
  content: "";
  display: block;
  width: 16px;
  height: 2px;
  background: var(--ink-dim);
}
.cc-menu__bars { position: relative; }
.cc-menu__bars::before { position: absolute; top: -5px; }
.cc-menu__bars::after { position: absolute; top: 5px; }
.cc-menu:hover { border-color: var(--accent); }
.cc-menu:hover .cc-menu__bars,
.cc-menu:hover .cc-menu__bars::before,
.cc-menu:hover .cc-menu__bars::after { background: var(--accent); }

.cc-drawer { position: fixed; inset: 0; z-index: 70; }
.cc-drawer__scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #000 66%, transparent);
  backdrop-filter: blur(3px);
}
.cc-drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(280px, 84vw);
  display: flex;
  flex-direction: column;
  background: var(--bg-raise);
  border-inline-end: 1px solid var(--line);
  box-shadow: 24px 0 60px rgb(0 0 0 / 55%);
  animation: ccDrawerIn 0.18s ease-out;
}
@keyframes ccDrawerIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
/* RTL opens from the other edge, so the slide has to follow. */
:root[dir="rtl"] .cc-drawer__panel { animation-name: ccDrawerInRtl; }
@keyframes ccDrawerInRtl {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) { .cc-drawer__panel { animation: none; } }

.cc-drawer__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-bottom: 2px solid var(--accent);
}
.cc-drawer__head strong {
  flex: 1;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cc-drawer__mark { border-radius: 8px; }
.cc-drawer__close {
  width: 30px;
  height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.cc-drawer__close:hover { color: var(--ink); }

.cc-drawer__nav { display: block; flex: 1; overflow-y: auto; padding: 8px 0; }
.cc-drawer__link {
  display: block;
  padding: 12px 16px;
  border-inline-start: 2px solid transparent;
  color: var(--ink-dim);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.cc-drawer__link:hover { color: var(--ink); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.cc-drawer__link.is-active {
  color: var(--accent);
  border-inline-start-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.cc-drawer__foot {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid var(--line-soft);
}

@media (max-width: 900px) {
  .cc-menu { display: grid; }
  .cc-tabs { display: none; }
  /* Identity and sign-out move into the drawer so the bar stays one line. */
  .cc-top__right { display: none; }
  .cc-top { gap: 12px; }
  .cc-view.is-active { padding: 14px; }
  .cc-split, .cc-split--wide { grid-template-columns: 1fr; }
  /* The map still owns the viewport, just with less chrome around it. */
  .cc[data-cc-route="map"] .cc-list { max-height: 30vh; }
}

@media (max-width: 560px) {
  .cc-pane { padding: 12px; }
  .cc-pane__head { align-items: stretch; flex-direction: column; gap: 8px; }
  .cc:not([data-cc-route="recordings"]):not([data-cc-route="people"]) .cc-table-wrap {
    max-height: 56vh;
  }
  .cc-gate__head { padding: 26px 20px 18px; }
  .cc-gate__body { padding: 4px 20px 20px; }
  .cc-gate__note { padding: 14px 20px 18px; }
}

/* Chrome and Safari repaint autofilled fields with their own near-white background,
   which turns a filled password box into a light slab on a dark form. There is no
   property to set directly: the trick is an inset shadow the size of the field. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
  box-shadow: 0 0 0 1000px var(--bg) inset;
  caret-color: var(--ink);
  transition: background-color 9999s ease-out 0s;
}

/* ----------------------------------------------------------------------------
   The sign-in gate, declared last on purpose.

   A generic `.cc-view.is-active { display: block }` lives earlier in this file. An
   equally specific gate rule loses to it on source order, and a more specific one wins
   in a browser but not in jsdom, which resolves the cascade by order alone. Declaring
   the gate last makes both agree and removes the duel entirely.
   ---------------------------------------------------------------------------- */
.cc .cc-view--gate.is-active,
.cc-view--gate.is-active {
  display: grid;
  place-items: center;
  padding: 24px;
}

/* --- comms ------------------------------------------------------------------
   A conversation view for the command center, only possible now that the server
   stores the messages rather than routing ciphertext past itself. */
.cc-comms { display: flex; flex-direction: column; max-height: calc(100vh - 130px); }
.cc-comms__thread {
  flex: 1;
  min-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 2px;
}
.cc-msg {
  align-self: flex-start;
  max-width: min(560px, 88%);
  padding: 9px 12px;
  border-inline-start: 2px solid var(--line);
  background: color-mix(in srgb, #fff 3%, transparent);
}
.cc-msg--mine {
  align-self: flex-end;
  border-inline-start: 0;
  border-inline-end: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.cc-msg__head {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}
.cc-msg__head strong { font-size: 12px; }
.cc-msg__head time { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); }
.cc-msg__body { margin: 0; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.cc-msg__image, .cc-msg__video {
  display: block;
  margin-top: 8px;
  max-width: 100%;
  max-height: 320px;
  border-radius: var(--radius-sm);
}
.cc-msg audio { display: block; margin-top: 8px; width: 100%; }
.cc-msg__file {
  display: inline-block;
  margin-top: 8px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-size: 12.5px;
  text-decoration: none;
}
.cc-msg__file:hover { border-color: var(--accent); }

.cc-comms__compose { border-top: 1px solid var(--line-soft); padding-top: 12px; }
.cc-comms__row { display: flex; gap: 8px; align-items: center; }
/* The composer's input is wrapped in a label that names it for a screen reader, so the
   label is now the flex child that has to grow. */
.cc-comms__row .cc-comms__field { display: flex; flex: 1; min-width: 0; }
.cc-comms__row j-input { flex: 1; }
.cc-comms__attach {
  width: 38px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  flex: none;
}
.cc-comms__pending {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  padding: 7px 11px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--ink-dim);
}

/* The Messenger attachment workflow is an operational surface, not a bare file
   input: choices are grouped by media family, upload state remains visible, and
   archived files return as downloadable message cards. */
.cc-attachment-dialog {
  background:
    radial-gradient(circle at 50% 0%, rgb(47 208 122 / 10%), transparent 34%),
    color-mix(in srgb, #000 76%, transparent);
  backdrop-filter: blur(10px) saturate(.75);
}
.cc-attachment-dialog__panel {
  position: relative;
  width: min(760px, 100%);
  overflow: hidden;
  padding: 0;
  border-top: 1px solid color-mix(in srgb, var(--live) 72%, var(--line));
  background:
    linear-gradient(145deg, rgb(47 208 122 / 6%), transparent 38%),
    var(--bg-card);
}
.cc-attachment-dialog__panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--live), transparent);
  opacity: .8;
}
.cc-attachment-dialog .cc-dialog__head {
  margin: 0;
  padding: 24px 26px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.cc-attachment-dialog__eyebrow {
  display: block;
  margin-bottom: 9px;
  color: var(--live);
  font: var(--label);
  letter-spacing: .12em;
}
.cc-attachment-dialog .cc-dialog__head j-dialog-title {
  display: block;
  color: var(--ink);
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 650;
  letter-spacing: -.025em;
  text-transform: none;
}
.cc-attachment-dialog .cc-dialog__subtitle {
  max-width: 620px;
  margin: 8px 0 0;
  color: var(--ink-dim);
  font-size: 13.5px;
  line-height: 1.55;
}
.cc-attachment-dialog .cc-dialog__content { padding: 22px 26px 4px; }
.attachment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.attachment-option {
  display: flex;
  min-width: 0;
  min-height: 190px;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(160deg, rgb(255 255 255 / 3%), transparent 65%);
  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}
.attachment-option:hover,
.attachment-option:focus-within {
  border-color: color-mix(in srgb, var(--accent) 65%, var(--line));
  background-color: rgb(255 179 2 / 4%);
  transform: translateY(-2px);
}
.attachment-option__head { display: grid; gap: 14px; }
.attachment-option__mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  font: 800 11px/1 var(--mono);
  letter-spacing: .08em;
}
.attachment-option--media .attachment-option__mark {
  border-color: color-mix(in srgb, var(--live) 52%, var(--line));
  background: color-mix(in srgb, var(--live) 8%, transparent);
  color: var(--live);
}
.attachment-option--document .attachment-option__mark {
  border-color: color-mix(in srgb, #79a8ff 52%, var(--line));
  background: rgb(121 168 255 / 8%);
  color: #9bbcff;
}
.attachment-option__copy { display: grid; gap: 3px; min-width: 0; }
.attachment-option__copy strong { color: var(--ink); font-size: 14px; }
.attachment-option__copy small { color: var(--ink-faint); font-size: 11.5px; }
.attachment-option j-component { display: block; margin-top: 18px; }
.cc-attachment-picker { display: grid; gap: 7px; }
.cc-attachment-picker .j-field__label,
.cc-attachment-picker > label {
  color: var(--ink-dim);
  font: var(--label);
  letter-spacing: .05em;
}
.cc-attachment-picker input[type="file"] {
  width: 100%;
  min-width: 0;
  color: var(--ink-faint);
  font: 11px/1.2 var(--mono);
}
.cc-attachment-picker input[type="file"]::file-selector-button {
  margin-inline-end: 9px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-raise);
  color: var(--ink);
  font: var(--label);
  cursor: pointer;
}
.cc-attachment-picker input[type="file"]::file-selector-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.cc-attachment-dialog__status {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: 11px 13px;
  border-inline-start: 2px solid var(--live);
  background: rgb(47 208 122 / 7%);
  color: var(--ink-dim);
  font-size: 12px;
}
.cc-attachment-dialog__status strong { color: var(--ink); }
.cc-attachment-dialog__status.is-error {
  border-color: var(--danger);
  background: rgb(255 77 94 / 7%);
  color: #ff9ca6;
}
.cc-attachment-dialog .cc-dialog__actions {
  margin: 18px 0 0;
  padding: 16px 26px 22px;
  border-top: 1px solid var(--line-soft);
}
.cc-comms__pending-mark {
  display: grid;
  width: 34px;
  height: 34px;
  flex: none;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--live) 52%, var(--line));
  border-radius: 4px;
  color: var(--live);
  font: 800 9px/1 var(--mono);
}
.cc-comms__pending-copy { display: grid; flex: 1; gap: 1px; min-width: 0; }
.cc-comms__pending-copy strong {
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-comms__pending-copy small { color: var(--ink-faint); }
.cc-msg__attachment {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg-raise);
}
.cc-msg__attachment-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 4px;
  background: rgb(121 168 255 / 10%);
  color: #9bbcff;
  font: 800 9px/1 var(--mono);
}
.cc-msg__attachment-copy { display: grid; min-width: 0; }
.cc-msg__attachment-copy strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-msg__attachment-copy span { color: var(--ink-faint); font: 10px/1.3 var(--mono); }

@media (max-width: 700px) {
  .cc-attachment-dialog { align-items: end; padding: 0; }
  .cc-attachment-dialog__panel { width: 100%; max-height: 92vh; overflow-y: auto; border-radius: 10px 10px 0 0; }
  .attachment-grid { grid-template-columns: 1fr; }
  .attachment-option { min-height: 0; }
  .attachment-option__head { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
}
.cc-recording-filters {
  max-width: min(54vw, 680px);
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 2px;
  scrollbar-width: thin;
}

.cc-recording-filters .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}