/* PulseSight. IBM Carbon (Gray 100 dark theme) per EntryPulse DESIGN.md.
   Tokens: --cds-*. UI type 12/16, expressive display 300 weight. Weights 300/400/600.
   0px radius everywhere except tags/chips (pill) and the laser dot. Flat surfaces,
   depth via background layering; shadows only on floating elements. */

/* ---------- self-hosted IBM Plex ---------- */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans/ibm-plex-sans-latin-300-normal.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */

:root {
  --cds-background: #161616;
  --cds-layer-01: #262626;
  --cds-layer-02: #393939;
  --cds-layer-hover: #333333;
  --cds-layer-accent: #1c2a45;      /* blue-tinted zone, Carbon Blue-10 analog on dark */
  --cds-field: #262626;
  --cds-stage: #101319;             /* video surfaces: near-black tinted toward brand blue */
  --cds-text-primary: #f4f4f4;
  --cds-text-secondary: #c6c6c6;
  --cds-text-placeholder: #6f6f6f;
  --cds-border-subtle: #393939;
  --cds-border-strong: #6f6f6f;
  --cds-link-primary: #78a9ff;
  --cds-button-primary: #0f62fe;
  --cds-button-primary-hover: #0353e9;
  --cds-button-primary-active: #002d9c;
  --cds-button-secondary: #393939;
  --cds-button-secondary-hover: #4c4c4c;
  --cds-button-danger: #da1e28;
  --cds-button-danger-hover: #b81921;
  --cds-support-error: #fa4d56;
  --cds-support-success: #42be65;
  --cds-support-warning: #f1c21b;
  --cds-support-info: #4589ff;
  --cds-focus: #0f62fe;
  --cds-overlay: rgba(13, 16, 22, 0.72);
  --shadow-raised: 0 2px 6px rgba(0, 0, 0, 0.3);
  --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", Menlo, Consolas, monospace;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--cds-background);
  color: var(--cds-text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

a { color: var(--cds-link-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, .thumb:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}

h1 { font-size: 24px; font-weight: 400; line-height: 1.33; }

button, label.btn, select { touch-action: manipulation; }

/* Carbon caption: 12px + 0.32px tracking */
.caption, .chat-meta, .session-meta, .thumb-tag, .alt-urls, .stage-hint {
  font-size: 12px;
  letter-spacing: 0.32px;
}

/* inline SVG icons: one family, one stroke width */
.icon {
  width: 20px;
  height: 20px;
  flex: none;
  display: block;
}
.btn-sm .icon { width: 16px; height: 16px; }
.btn-lg .icon { width: 22px; height: 22px; }

/* ---------- layout primitives ---------- */

.wrap { max-width: 1056px; margin: 0 auto; padding: 0 32px var(--space-2xl); }
.wrap > section + section { margin-top: var(--space-md); }

.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  height: 48px;
  padding: 0 var(--space-md);
  background: var(--cds-background);
  border-bottom: 1px solid var(--cds-border-subtle);
  position: sticky;
  top: 0;
  z-index: 50;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 600;
  font-size: 16px;
  color: var(--cds-text-primary);
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 24px;
  height: 24px;
  background: var(--cds-button-primary);
  display: grid;
  place-items: center;
  color: #f6f8fc;
}
.brand-mark .icon { width: 15px; height: 15px; }
.brand small { color: var(--cds-text-secondary); font-weight: 400; font-size: 12px; letter-spacing: 0.32px; }

.spacer { flex: 1; }

.panel { background: var(--cds-layer-01); padding: var(--space-md); }

/* EntryPulse section label: 12px uppercase mono, wide tracking */
.panel h2, .kicker {
  margin: 0 0 var(--space-md);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cds-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* ---------- controls ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  border: 1px solid transparent;
  background: var(--cds-button-secondary);
  color: #f6f8fc;
  border-radius: 0;
  height: 40px;
  padding: 0 var(--space-md);
  font-size: 16px;
  font-weight: 400;
  font-family: var(--font-sans);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background 70ms;
}
.btn:hover { background: var(--cds-button-secondary-hover); text-decoration: none; }
.btn:active { background: #6f6f6f; }
.btn:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; box-shadow: inset 0 0 0 3px #f6f8fc; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--cds-button-primary); }
.btn-primary:hover { background: var(--cds-button-primary-hover); }
.btn-primary:active { background: var(--cds-button-primary-active); }
.btn-danger { background: var(--cds-button-danger); }
.btn-danger:hover { background: var(--cds-button-danger-hover); }
.btn-ghost { background: transparent; color: var(--cds-link-primary); }
.btn-ghost:hover { background: var(--cds-layer-hover); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 12px; letter-spacing: 0.32px; }
.btn-lg { height: 48px; padding: 0 var(--space-lg); }
.btn.active { outline: 2px solid var(--cds-focus); outline-offset: -2px; }

/* Carbon input: filled field, bottom-border only */
input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="tel"], select, textarea {
  background: var(--cds-field);
  border: none;
  border-bottom: 1px solid var(--cds-border-strong);
  border-radius: 0;
  color: var(--cds-text-primary);
  height: 40px;
  padding: 0 var(--space-md);
  font-size: 16px;
  font-family: var(--font-sans);
  outline: none;
}
input::placeholder { color: var(--cds-text-placeholder); }
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="tel"]:focus, textarea:focus {
  border-bottom: 2px solid var(--cds-focus);
  padding-bottom: 0;
}
select { cursor: pointer; }
textarea { height: auto; min-height: 84px; padding: 12px 16px; resize: vertical; line-height: 1.5; }
.job-fields { display: flex; flex-direction: column; gap: var(--space-sm); }
.job-fields .btn { align-self: flex-start; }

/* password rule checklist: gray until met, green when satisfied */
.pw-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pw-rules li {
  font-size: 12px;
  letter-spacing: 0.32px;
  color: var(--cds-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.pw-rules li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cds-border-strong);
  flex: none;
}
.pw-rules li.ok { color: var(--cds-support-success); }
.pw-rules li.ok::before { background: var(--cds-support-success); }

/* Tag/chip: the pill exception (24px radius) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 24px;
  font-size: 12px;
  letter-spacing: 0.32px;
  font-weight: 400;
  color: var(--cds-text-secondary);
  background: rgba(141, 141, 141, 0.16);
}
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cds-text-secondary); flex: none; }
.chip-ok { color: var(--cds-support-success); background: rgba(66, 190, 101, 0.14); }
.chip-ok::before { background: var(--cds-support-success); }
.chip-wait { color: var(--cds-support-warning); background: rgba(241, 194, 27, 0.12); }
.chip-wait::before { background: var(--cds-support-warning); animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: 0.3; } }

.code-big {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: 3px;
  color: var(--cds-link-primary);
}

/* ---------- toasts (floating, flat surface + status dot) ---------- */

#toasts {
  position: fixed;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  z-index: 1000;
  align-items: center;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cds-layer-02);
  border: 1px solid var(--cds-border-subtle);
  padding: 12px var(--space-md);
  font-size: 12px;
  letter-spacing: 0.32px;
  box-shadow: var(--shadow-raised);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
  max-width: 90vw;
}
.toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cds-support-info); flex: none; }
.toast.show { opacity: 1; transform: none; }
.toast-error::before { background: var(--cds-support-error); }
.toast-warn::before { background: var(--cds-support-warning); }

/* ---------- entrance motion: one staggered page reveal ---------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.reveal > * { animation: rise 0.5s var(--ease-out) both; }
.reveal > *:nth-child(2) { animation-delay: 60ms; }
.reveal > *:nth-child(3) { animation-delay: 120ms; }
.reveal > *:nth-child(4) { animation-delay: 180ms; }

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

/* ---------- dashboard ---------- */

.hero { padding: var(--space-2xl) 0 var(--space-lg); }
.hero .kicker { margin-bottom: var(--space-sm); }
.hero h1 {
  margin: 0 0 var(--space-sm);
  font-size: clamp(28px, 4.5vw, 42px);
  font-weight: 300;
  line-height: 1.19;
  letter-spacing: 0;
}
.hero p { margin: 0; color: var(--cds-text-secondary); max-width: 62ch; }

.create-row { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.create-row input { flex: 1; min-width: 220px; }

.new-session {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-lg);
  align-items: center;
  background: var(--cds-layer-accent);
  border: 1px solid #2b3a5c;
}
.new-session img { width: 184px; height: 184px; background: #f6f8fc; padding: var(--space-sm); }
.new-session h2 { color: var(--cds-link-primary); }
.new-session .code-big { font-size: 24px; }
.join-url {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.32px;
  color: var(--cds-text-secondary);
  word-break: break-all;
  margin: var(--space-sm) 0 var(--space-md);
}
.alt-urls { margin: 12px 0 0; padding: 0 0 0 var(--space-md); color: var(--cds-text-secondary); }
.alt-urls li { font-family: var(--font-mono); }
.alt-urls li.note { font-family: var(--font-sans); }

.stack { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-md); }

.session-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "code label actions" "code meta actions";
  gap: 2px var(--space-md);
  align-items: center;
  background: var(--cds-layer-01);
  padding: var(--space-md);
}
.session-card:hover { background: var(--cds-layer-hover); }
.session-code { grid-area: code; font-size: 16px; }
.session-label { grid-area: label; font-weight: 600; }
.session-meta { grid-area: meta; color: var(--cds-text-secondary); font-variant-numeric: tabular-nums; }
.session-actions { grid-area: actions; display: flex; gap: var(--space-sm); }

/* empty states teach, not just report */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  color: var(--cds-text-secondary);
  text-align: center;
  padding: var(--space-xl) var(--space-md);
}
.empty .icon { width: 24px; height: 24px; color: var(--cds-text-placeholder); margin-bottom: var(--space-xs); }
.empty strong { font-size: 16px; font-weight: 400; color: var(--cds-text-primary); }
.empty span { font-size: 12px; letter-spacing: 0.32px; max-width: 40ch; }

/* ---------- login ---------- */

.login-screen {
  min-height: calc(100dvh - 48px);
  display: grid;
  place-items: center;
  padding: var(--space-md);
}
.login-card { width: 360px; max-width: 94vw; display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-lg); }
.login-card label { display: block; font-size: 12px; letter-spacing: 0.32px; color: var(--cds-text-secondary); margin-bottom: var(--space-sm); }
.login-card input { width: 100%; }

/* ---------- console (specialist) ---------- */

.console-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: var(--space-md);
  padding: var(--space-md) 32px var(--space-xl);
  max-width: 1584px;
  margin: 0 auto;
}

.stage {
  position: relative;
  background: var(--cds-stage);
  border: 1px solid var(--cds-border-subtle);
  min-height: 62vh;
  overflow: hidden;
}
.stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.stage-msg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--cds-text-secondary);
  text-align: center;
  padding: var(--space-lg);
  z-index: 2;
}
.live-badge {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--cds-button-danger);
  color: #fdf3f4;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.32px;
  padding: 4px 8px;
  z-index: 3;
}
.live-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fdf3f4; animation: blink 1.2s infinite; }
.stage-hint {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  color: var(--cds-text-secondary);
  background: rgba(16, 19, 25, 0.72);
  padding: 4px 8px;
  z-index: 3;
}

.stage-toolbar {
  position: absolute;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  /* Without an explicit width this shrink-to-fits against the distance from
     left:50% to the stage's right edge, so it was capped at half the stage and
     wrapped into three ragged rows well before it ran out of room.
     max-content sizes it to the unwrapped row instead. */
  width: max-content;
  max-width: calc(100% - var(--space-lg));
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--cds-layer-01);
  border: 1px solid var(--cds-border-subtle);
  padding: var(--space-sm);
  z-index: 4;
  flex-wrap: wrap;
  justify-content: center;
}

/* A dense overlay toolbar, not body content: 14px keeps ten controls on one row
   at desktop widths and reads as chrome rather than competing with the stage. */
.stage-toolbar .btn,
.stage-toolbar select {
  font-size: 14px;
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
}

/* Related controls sit flush so they read as one unit; unrelated groups are
   separated by whitespace and a hairline. */
.tool-group {
  display: flex;
  align-items: center;
  gap: 1px;
}

.tool-group + .tool-group {
  position: relative;
}

.tool-group + .tool-group::before {
  content: '';
  position: absolute;
  left: calc(var(--space-md) / -2);
  top: 15%;
  bottom: 15%;
  width: 1px;
  background: var(--cds-border-subtle);
}

.laser-dot {
  position: absolute;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: rgba(250, 77, 86, 0.9);
  box-shadow: 0 0 0 4px rgba(250, 77, 86, 0.35), 0 0 18px rgba(250, 77, 86, 0.9);
  pointer-events: none;
  animation: laser 0.9s ease-out infinite;
  z-index: 5;
}
@keyframes laser {
  0% { transform: scale(0.7); }
  50% { transform: scale(1.15); }
  100% { transform: scale(0.7); }
}

.side { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; }

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  max-height: 300px;
  overflow-y: auto;
}
.thumb {
  position: relative;
  border: none;
  padding: 0;
  background: var(--cds-stage);
  cursor: pointer;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb:hover { outline: 2px solid var(--cds-focus); outline-offset: -2px; z-index: 1; }
.thumb-tag {
  position: absolute;
  bottom: var(--space-xs);
  left: var(--space-xs);
  font-family: var(--font-mono);
  padding: 2px 6px;
  background: rgba(16, 19, 25, 0.82);
  color: var(--cds-support-success);
}
.tag-specialist { color: var(--cds-support-info); }

/* ---------- chat ---------- */

.chat-panel { display: flex; flex-direction: column; min-height: 260px; flex: 1; }
.chat-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--space-xs) 2px;
  min-height: 140px;
  max-height: 340px;
}
.chat-row { display: flex; flex-direction: column; max-width: 85%; }
.chat-row.mine { align-self: flex-end; align-items: flex-end; }
.chat-row.theirs { align-self: flex-start; align-items: flex-start; }
.chat-bubble {
  padding: var(--space-sm) 12px;
  background: var(--cds-layer-02);
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-row.mine .chat-bubble { background: var(--cds-button-primary-active); }
.chat-meta { color: var(--cds-text-secondary); margin-top: var(--space-xs); font-family: var(--font-mono); }
.chat-compose { display: flex; gap: var(--space-sm); margin-top: 12px; }
.chat-compose input { flex: 1; min-width: 0; }

/* ---------- annotator modal (overlay: scrim + shadow allowed) ---------- */

.modal {
  position: fixed;
  inset: 0;
  background: var(--cds-overlay);
  display: grid;
  place-items: center;
  z-index: 200;
  padding: var(--space-md);
}
.modal-body {
  background: var(--cds-layer-01);
  padding: var(--space-md);
  max-width: min(1100px, 96vw);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-raised);
  animation: rise 0.25s var(--ease-out) both;
}
.ann-toolbar { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; }
.ann-canvas-wrap { overflow: auto; display: grid; place-items: center; background: var(--cds-stage); }
/* Both drawing surfaces, not just the console's. #techCanvas had no rule at
   all, so on a phone it rendered at its intrinsic 1600px inside a 350px
   wrapper: the wrapper scrolled, every drag panned the picture instead of
   drawing on it, and a finger crossing the visible area laid down a stroke a
   fifth of its apparent length. touch-action is what stops the pan; the size
   caps are what make a mark land where the finger is. */
#annCanvas, #techCanvas {
  max-width: 100%;
  max-height: 68vh;
  touch-action: none;
  cursor: crosshair;
  display: block;
}
.swatch {
  width: 32px;
  height: 32px;
  border: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
  padding: 0;
}
.swatch.active { border-color: #f6f8fc; }
.ann-actions { display: flex; gap: var(--space-sm); justify-content: flex-end; }

/* ---------- technician (mobile) ---------- */

.tech-page { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }

.tech-top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: var(--space-xs) var(--space-md);
  border-bottom: 1px solid var(--cds-border-subtle);
  background: var(--cds-background);
  z-index: 20;
  flex-wrap: wrap;
}

.tech-stage { position: relative; flex: 1; background: var(--cds-stage); overflow: hidden; }
.tech-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

.tech-bottom {
  display: flex;
  gap: 1px;
  padding: var(--space-sm) var(--space-sm) calc(var(--space-sm) + env(safe-area-inset-bottom));
  background: var(--cds-background);
  border-top: 1px solid var(--cds-border-subtle);
  justify-content: center;
  flex-wrap: wrap;
  z-index: 20;
}
/* 44px floor, not 56px. A phone with both a controllable flashlight and
   controllable focus shows seven buttons, and at 56px the seventh wrapped onto
   a row of its own. 44 is the smallest target worth shipping, the height stays
   48, and flex:1 means they only shrink toward the floor when the count
   demands it. Narrower handsets than 375px still wrap, which is the right
   outcome rather than a row of unhittable buttons. */
.tech-bottom .btn { flex: 1; min-width: 44px; max-width: 128px; height: 48px; padding: 0; }
.tech-bottom .icon { width: 22px; height: 22px; }
/* The video toggle is the one button here that carries words. Under the shared
   rule flex:1 shrank it to an equal share of the row while its label still
   needed about 115px, so "Start video" spilled out of the box and was clipped
   at the screen edge. It sizes to its own content instead and the icon-only
   buttons divide what is left. */
.tech-bottom .btn.has-label {
  flex: 0 0 auto;
  min-width: max-content;
  max-width: none;
  padding: 0 var(--space-md);
  gap: 8px;
}
/* On a phone those words cost 142px of a 375px row, which wrapped the bar onto
   a second row and would have been worse with the flashlight and focus buttons
   up as well. The icon carries it here, and the "camera off" banner carries the
   words along with the button that turns it on, which is the more findable
   place for it anyway. */
@media (max-width: 480px) {
  .tech-bottom .btn.has-label {
    flex: 1;
    min-width: 44px;
    max-width: 128px;
    padding: 0;
    gap: 0;
  }
  .tech-bottom .btn.has-label > span { display: none; }
}

.start-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  text-align: center;
  padding: var(--space-lg);
  z-index: 30;
  background: var(--cds-background);
}
.start-screen .brand-mark { width: 48px; height: 48px; }
.start-screen .brand-mark .icon { width: 28px; height: 28px; }
.start-screen h1 { margin: 0; font-weight: 300; font-size: 28px; line-height: 1.25; }
.start-screen p { margin: 0; color: var(--cds-text-secondary); max-width: 42ch; }

/* The stack owns the position; the banners inside it are in normal flow. Two
   banners can be up at once (the specialist asking for video while the camera
   is off, a photo request while uploads are queued) and as separate absolutely
   positioned boxes they landed on top of each other. */
.banner-stack {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 var(--space-sm);
  pointer-events: none;   /* the stage stays tappable beside a banner */
}

.banner {
  pointer-events: auto;
  background: var(--cds-support-warning);
  color: #1c1a10;
  font-weight: 600;
  padding: var(--space-sm) var(--space-md);
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;        /* the buttons drop below the text before it shreds */
  max-width: 100%;
  font-size: 12px;
  letter-spacing: 0.32px;
  animation: banner-rise 0.3s var(--ease-out) both;
}
@keyframes banner-rise {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.banner .icon { width: 16px; height: 16px; flex: none; }
.banner .btn { background: #1c1a10; color: #f1c21b; height: 32px; font-size: 12px; }
/* a hidden banner must take no room in the column, gap included */
.banner-stack .banner[hidden] { display: none; }
/* 32px is fine for a mouse. On a phone these are what a technician taps on a
   work site, possibly in gloves, and starting video now lives here, so they
   hold the same 44px floor the bottom bar does. */
@media (max-width: 480px) {
  .banner .btn { height: 44px; padding: 0 var(--space-md); }
}

.overlay-image {
  position: fixed;
  inset: 0;
  background: rgba(13, 16, 22, 0.92);
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-md);
}
.overlay-image img {
  max-width: 96vw;
  max-height: 78vh;
  border: 2px solid var(--cds-button-primary);
}
.overlay-image .label {
  color: var(--cds-link-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
}

.chat-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 30%;
  background: var(--cds-layer-01);
  border-top: 1px solid var(--cds-border-subtle);
  z-index: 250;
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  box-shadow: var(--shadow-raised);
  animation: sheet-up 0.3s var(--ease-out) both;
}
@keyframes sheet-up {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.chat-sheet .chat-list { max-height: none; }
.chat-sheet .chat-compose .btn { height: 48px; }
.sheet-head { display: flex; align-items: center; margin-bottom: var(--space-sm); }

.badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--cds-support-error);
  color: #fdf3f4;
  border-radius: 24px;
  font-size: 12px;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0 var(--space-xs);
}
.rel { position: relative; }

/* File inputs stay in the layout tree (1px, off-screen) so label taps reach
   them on iOS Safari. display:none breaks the forwarding there. */
.file-input-offscreen {
  position: fixed;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* ---------- checklist (specialist panel) ---------- */

.step-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--cds-border-subtle);
}
.step-row:last-child { border-bottom: none; }
.step-box {
  width: 24px;
  height: 24px;
  flex: none;
  background: var(--cds-field);
  border: 1px solid var(--cds-border-strong);
  color: var(--cds-support-success);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.step-row.done .step-box { border-color: var(--cds-support-success); }
.step-title { flex: 1; font-size: 12px; letter-spacing: 0.32px; }
.step-row.done .step-title { color: var(--cds-text-secondary); }
.step-thumb { width: 44px; height: 33px; object-fit: cover; cursor: pointer; flex: none; }

/* ---------- checklist (technician: docked below the camera, collapsible) ---------- */

.step-card {
  background: var(--cds-background);
  border-top: 1px solid var(--cds-border-subtle);
  z-index: 20;
  display: flex;
  flex-direction: column;
}
.step-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: 44px;
  padding: var(--space-sm) var(--space-md);
  background: none;
  border: none;
  color: var(--cds-text-primary);
  font-family: var(--font-sans);
  cursor: pointer;
  text-align: left;
}
.step-mini {
  flex: 1;
  min-width: 0;
  color: var(--cds-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.step-chev { transition: transform 0.2s var(--ease-out); flex: none; }
.step-card.collapsed .step-chev { transform: rotate(-90deg); }
.step-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: 0 var(--space-md) var(--space-md);
}
.step-card.collapsed .step-body { display: none; }
.step-card-title { font-size: 16px; font-weight: 600; }
.step-done { color: var(--cds-support-success); }
.step-actions { display: flex; gap: 1px; }
.step-actions .btn { height: 48px; }
.step-actions .btn-primary { flex: 1; }

/* ---------- recordings ---------- */

.rec-row {
  font-size: 12px;
  letter-spacing: 0.32px;
  font-family: var(--font-mono);
  padding: 6px 0;
  border-bottom: 1px solid var(--cds-border-subtle);
  color: var(--cds-text-secondary);
  word-break: break-all;
}
.rec-row:last-child { border-bottom: none; }

#recBtn.recording {
  background: var(--cds-button-danger);
  color: #fdf3f4;
}
#recBtn.recording .icon { animation: blink 1.2s infinite; }

/* ---------- admin: tenants + seats ---------- */

.tenant-card { background: var(--cds-layer-01); }
.tenant-head { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); flex-wrap: wrap; }
.tenant-title {
  flex: 1;
  min-width: 200px;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: var(--cds-text-primary);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-sans);
}
.tenant-name { font-size: 16px; font-weight: 600; }
.tenant-meta { color: var(--cds-text-secondary); font-variant-numeric: tabular-nums; }
.tenant-body {
  border-top: 1px solid var(--cds-border-subtle);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.seat-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--cds-border-subtle);
  flex-wrap: wrap;
}
.seat-row.inactive .seat-name { color: var(--cds-text-placeholder); }
.seat-info { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.seat-name { font-size: 16px; }
.seat-meta { color: var(--cds-text-secondary); }
.cl-block { display: flex; flex-direction: column; gap: var(--space-sm); border-top: 1px solid var(--cds-border-subtle); padding-top: var(--space-md); }
.cl-attach {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 12px;
  letter-spacing: 0.32px;
  cursor: pointer;
  color: var(--cds-text-primary);
}
.cl-attach input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--cds-button-primary); }
.cl-owned { cursor: default; }
.cl-block > .btn { align-self: flex-start; }
.step-edit-row { display: flex; gap: var(--space-sm); align-items: center; padding: var(--space-xs) 0; }
.step-edit-row input[type="text"] { flex: 1; min-width: 0; }

.cred-block {
  background: var(--cds-layer-02);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  font-size: 12px;
  letter-spacing: 0.32px;
}
.cred-block .code-big { font-size: 14px; letter-spacing: 1px; word-break: break-all; }

/* ---------- banner variants ---------- */

.banner-info { background: var(--cds-support-info); color: #f6f8fc; }
.banner-info .btn { background: #061c3f; color: #a6c8ff; }

/* ---------- responsive ---------- */

/* The console is an operating surface, not a document. Everything needed during
   a live call has to be reachable without scrolling the video off the screen.
   The stage asked for 62vh and the side column stacked four panels under a 48px
   topbar, which together overflowed the viewport and forced a scroll or a zoom
   out mid-session. The grid now fills exactly the height below the topbar, the
   stage takes what is left, and the side column scrolls inside itself on short
   screens instead of pushing the page taller.

   Desktop only: below 1056px the layout is a single column and normal page
   scrolling is the right behaviour. */
@media (min-width: 1057px) {
  .console-grid {
    height: calc(100dvh - 48px);
    align-items: stretch;
  }
  .stage { min-height: 0; }
  .side { overflow-y: auto; min-height: 0; overscroll-behavior: contain; }

  /* The panels keep their natural height. Without this the flex column shrinks
     them to fit, which squeezed the chat list to about a hundred pixels rather
     than letting the column scroll, and a chat you cannot read is worse than a
     scrollbar. Four panels genuinely do not fit most screens; scrolling one
     column is the right answer, scrolling the whole page away from the live
     video is not. */
  .side > * { flex: none; }
}

@media (max-width: 1056px) {
  .console-grid { grid-template-columns: 1fr; padding: var(--space-md); }
  .stage { min-height: 48vh; }
  .wrap { padding: 0 var(--space-md) var(--space-xl); }
  .hero { padding: var(--space-xl) 0 var(--space-lg); }
}
@media (max-width: 672px) {
  .new-session { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .session-card { grid-template-columns: 1fr; grid-template-areas: "code" "label" "meta" "actions"; }
}