/* The live call console. Palette tokens (--gold, --emerald, --indigo, --text,
   --bg-elev, ...) are defined once in site.css, which this is always loaded
   beside -- console.js reads --gold/--indigo off :root at runtime for the orb
   ring, and the D3 node styles below reference them directly, so those names
   are load-bearing and must not be renamed away. */

  @keyframes dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
  @keyframes node-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }

  /* Was a 20px-radius standalone card on a bare page; now it sits inside the
     marketing page and takes that page's card recipe so the seam disappears. */
  .console {
    border: 1px solid var(--border); background: var(--bg-elev); border-radius: 24px;
    overflow: hidden; box-shadow: var(--shadow-soft);
    display: flex; height: 640px;
  }

  .sidebar {
    width: 320px; flex: none; display: flex; flex-direction: column; gap: 14px;
    padding: 20px; border-right: 1px solid var(--border-soft); overflow-y: auto;
  }
  .orb-card { border: 1px solid var(--border); background: var(--bg-elev-2); border-radius: 16px; padding: 18px; }

  .orb-wrap { position: relative; width: 132px; height: 132px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; }
  .orb-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .orb {
    position: relative; width: 68px; height: 68px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-elev); box-shadow: none; transition: background .2s, box-shadow .2s;
  }
  .orb.live { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); box-shadow: 0 0 24px rgba(199,154,78,.55); }
  .orb.muted { background: var(--bg-elev); box-shadow: none; }
  .orb svg { stroke: var(--text-dim); }
  .orb.live svg { stroke: #1a1406; }

  .status-block { text-align: center; margin-bottom: 14px; }
  .status-line { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; }
  .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); }
  .status-dot.active { background: var(--emerald); animation: dot-pulse 1.6s ease-in-out infinite; }
  .status-dot.connecting { background: var(--gold); }
  .caller-line { font-size: 12px; color: var(--text-faint); margin-top: 3px; }

  .controls-row { display: flex; gap: 8px; margin-bottom: 12px; }
  .icon-btn {
    flex: none; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border);
    background: transparent; color: var(--text-dim); display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  .icon-btn.on { background: var(--gold); color: #1a1406; border-color: var(--gold); }
  .icon-btn:disabled { opacity: .4; cursor: not-allowed; }

  .lang-seg { flex: 1; display: flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; font-size: 12px; }
  .lang-seg label { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 4px; cursor: pointer; color: var(--text-dim); border-left: 1px solid var(--border); }
  .lang-seg label:first-child { border-left: none; }
  .lang-seg input { display: none; }
  .lang-seg input:checked + span { color: inherit; }
  .lang-seg label.checked { background: var(--gold); color: #1a1406; }
  .lang-seg label.disabled { pointer-events: none; opacity: .6; }

  .primary-btn, .secondary-btn {
    width: 100%; border-radius: 10px; padding: 11px; font-family: var(--font); font-weight: 700; font-size: 13.5px;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; border: none;
  }
  .primary-btn { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color: #1a1406; }
  .secondary-btn { background: transparent; border: 1px solid var(--border); color: var(--text); }

  .transcript-card {
    border: 1px solid var(--border); background: var(--bg-elev-2); border-radius: 16px;
    flex: 1; min-height: 0; display: flex; flex-direction: column;
  }
  .transcript-head {
    display: flex; align-items: center; justify-content: space-between; padding: 12px 16px;
    border-bottom: 1px solid var(--border-soft); flex: none;
  }
  .transcript-head span:first-child { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--text-dim); }
  .transcript-count { font-size: 11px; color: var(--text-faint); background: rgba(16,19,26,.05); border-radius: 999px; padding: 2px 8px; }
  .transcript-body { overflow-y: auto; padding: 8px 16px; flex: 1; }
  .transcript-line { padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
  .transcript-line-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .transcript-speaker { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
  .transcript-speaker.caller { color: var(--text); }
  .transcript-speaker.assistant { color: var(--gold-deep); }
  .transcript-speaker.system { color: var(--text-faint); }
  .transcript-time { font-family: var(--mono); font-size: 10px; color: var(--text-faint); }
  .transcript-text { font-size: 13px; line-height: 1.45; margin-top: 3px; }
  .transcript-empty { font-size: 12.5px; color: var(--text-faint); padding: 8px 0; }

  .main-panel { position: relative; flex: 1; min-height: 0; background: radial-gradient(circle at 30% 25%, rgba(199,154,78,.10) 0%, transparent 55%); }
  #graph { position: relative; display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }

  .zoom-controls { position: absolute; bottom: 16px; right: 16px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
  .zoom-btn {
    width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border);
    background: rgba(255,255,255,.92); color: var(--text-dim); font-size: 16px; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(16,19,26,.08);
  }
  .zoom-btn:hover { background: var(--bg-elev-2); }
  .zoom-reset { font-size: 13px; }

  .idle-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
  .idle-hint .box { text-align: center; max-width: min(460px, calc(100% - 24px)); max-height: 100%; overflow-y: auto; padding: 4px; }
  .idle-hint h2 { font-size: 19px; margin: 0 0 8px; }
  .idle-hint p { font-size: 13.5px; line-height: 1.55; color: var(--text-dim); margin: 0; }
  .idle-hint .sub { font-size: 12px; color: var(--text-faint); margin-top: 10px; }

  .demo-note { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); text-align: left; font-size: 11.5px; line-height: 1.5; color: var(--text-faint); pointer-events: auto; }
  .demo-note strong { color: var(--text-dim); }

  .sample-policies { margin-top: 14px; text-align: left; pointer-events: auto; }
  .sample-policies-title { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--text-faint); margin-bottom: 8px; text-align: center; }
  .sample-row { padding: 5px 2px; border-bottom: 1px solid var(--border-soft); }
  .sample-row:last-child { border-bottom: none; }
  .sample-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; }
  .sample-row-sub { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 2px; }
  .sample-pn { font-family: var(--mono); font-weight: 700; color: var(--text); white-space: nowrap; }
  .sample-name { color: var(--text-dim); }
  .sample-dob { font-family: var(--mono); color: var(--text-faint); font-size: 10.5px; white-space: nowrap; }
  .sample-meta { color: var(--text-faint); font-size: 11px; white-space: nowrap; }
  .sample-try { margin-top: 4px; font-size: 11px; font-style: italic; color: var(--gold-deep); }

  .detail-card {
    position: absolute; bottom: 16px; left: 16px; width: 320px; max-width: calc(100% - 32px);
    max-height: calc(100% - 32px); overflow-y: auto;
    padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px;
    background: rgba(255,255,255,.96); box-shadow: 0 8px 24px rgba(16,19,26,.10); display: none;
  }
  .detail-card.visible { display: block; }
  .detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
  .detail-type { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
  .detail-close { background: none; border: none; color: var(--text-faint); font-size: 16px; line-height: 1; cursor: pointer; padding: 0; }
  .detail-label { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
  .detail-status { font-size: 12.5px; color: var(--text-dim); }
  .detail-plain { line-height: 1.5; white-space: pre-wrap; }
  .detail-score-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; font-size: 12px; color: var(--text-dim); }
  .detail-score-row:first-child { margin-top: 0; }
  .detail-score-val { font-weight: 700; color: var(--text); }
  .detail-bar { height: 5px; border-radius: 3px; background: var(--border-soft); margin-top: 4px; overflow: hidden; }
  .detail-bar-fill { height: 100%; border-radius: 3px; }

  .legend {
    position: absolute; top: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px;
    padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px;
    background: rgba(255,255,255,.9); box-shadow: 0 8px 24px rgba(16,19,26,.08);
  }
  .legend-title { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--text-faint); margin-bottom: 2px; }
  .legend-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); }

  /* Below this, the fixed 320px-sidebar + flex-row layout no longer fits --
     stack instead of overlap, and let the page itself scroll rather than
     cramming everything into a fixed 640px box (that was a deliberate
     "fits in one screen" choice for desktop; on a phone there just isn't
     room for orb + controls + transcript + graph in a fixed small box
     without hiding something -- first pass at this hid the Start Call
     button and the whole transcript below an invisible internal scroll,
     caught by screenshot testing, not something to repeat). The page is
     also iframed onto the marketing site at /embed, so this has to hold up
     at any viewport, not just a full-width desktop tab. */
  @media (max-width: 860px) {
    .console { flex-direction: column; height: auto; }
    .sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border-soft); }
    .transcript-card { flex: none; height: 240px; }
    .main-panel { height: 460px; }
    .legend { top: 8px; right: 8px; padding: 8px 10px; gap: 5px; transform: scale(.82); transform-origin: top right; }
    .detail-card { left: 8px; bottom: 8px; width: calc(100% - 16px); }
    .zoom-controls { bottom: 8px; right: 8px; }
  }

  @media (max-width: 480px) {
    .legend { display: none; }
    .main-panel { height: 380px; }
    .transcript-card { height: 200px; }
    .sidebar { padding: 14px; }
  }

/* Turnstile mounts here only while a challenge is actually being solved:
   console.js dismisses the widget the moment it hands over a token, so the
   "Success!" box does not sit in the call card for the length of the call.
   :empty is what keeps it from reserving any space the rest of the time. */
#turnstileHost {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

#turnstileHost:empty {
  display: none;
}