/* ── AI Agents tab ────────────────────────────────────────────────────── */
  .agents-layout { padding:24px; }
  /* Mobile: keep the table itself layout-stable but allow it to scroll
     horizontally inside its container. The Edit/Delete cell otherwise gets
     clipped at ~400 px wide. */
  .agents-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .agents-table { min-width:560px; }
  .agents-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
  .agents-toolbar h2 { font-size:15px; font-weight:600; }
  /* White-on-indigo-600 measures ~7.8:1, well above the 4.5:1 normal-text
     floor. Was white-on-blue-500 (4.04:1) — flagged by the QA audit. */
  .btn-primary { background:var(--primary-bg); color:var(--text-inverted); border:none; padding:8px 16px;
    border-radius:8px; font-size:13px; font-weight:600; cursor:pointer;
    display:flex; align-items:center; gap:6px; }
  .btn-primary:hover { background:var(--primary-bg-hover); }
  .btn-primary:focus-visible { outline:2px solid var(--text-inverted); outline-offset:2px; }
  .btn-primary:disabled,
  .btn-primary[aria-disabled="true"] { background:var(--neutral); color:var(--text-label);
    cursor:not-allowed; opacity:0.55; }
  .btn-primary:disabled:hover { background:var(--neutral); }
  /* Slightly darkened red (red-600) keeps white text ~5.4:1 contrast. */
  .btn-danger  { background:var(--danger); color:var(--text-inverted); border:none; padding:5px 10px;
    border-radius:6px; font-size:11px; font-weight:600; cursor:pointer; }
  .btn-danger:hover  { background:var(--danger); opacity:0.85; }
  .btn-danger:disabled,
  .btn-danger[aria-disabled="true"] { background:var(--neutral); color:var(--text-label);
    cursor:not-allowed; opacity:0.55; }
  .btn-danger:disabled:hover { background:var(--neutral); opacity:1; }
  .btn-secondary:disabled,
  .btn-secondary[aria-disabled="true"] { color:var(--muted); border-color:var(--border-strong);
    cursor:not-allowed; opacity:0.55; }
  .btn-edit    { background:var(--info-bg-tint); color:var(--accent); border:1px solid var(--info-border);
    padding:5px 10px; border-radius:6px; font-size:11px; font-weight:600; cursor:pointer; }
  .btn-edit:hover { background:var(--info-border); }
  .agents-table-wrap { background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
  .agents-table { width:100%; border-collapse:collapse; font-size:13px; }
  .agents-table th { padding:10px 16px; text-align:left; font-size:11px; font-weight:600;
    color:var(--muted); text-transform:uppercase; letter-spacing:0.05em;
    border-bottom:1px solid var(--border); background:var(--border-subtle); }
  .agents-table td { padding:12px 16px; border-bottom:1px solid var(--border); vertical-align:middle; }
  .agents-table tr:last-child td { border-bottom:none; }
  .agents-table tr:hover td { background:var(--border-subtle); }
  .agent-name-cell { font-weight:600; }
  /* The operator-chosen Agent ID, shown in its own list column. Monospace
     (var(--font)) for legibility; var(--label) keeps it ~9.5:1 contrast. */
  .agent-id-cell { font-size:12px; color:var(--label); font-family:var(--font); font-weight:500; }
  /* Was color:var(--purple) #8b5cf6 → 4.19:1 against the tinted bg over
     slate-900 (audit-flagged at 10 px). purple-300 #c4b5fd lifts it to
     ~8:1 and matches the lang/trunk badge treatment below. Bg fill also
     bumped from 0.15 to 0.20 alpha for an extra ~0.5 lift. */
  .agent-type-badge { font-size:10px; padding:3px 8px; border-radius:20px; font-weight:600;
    background:var(--info-bg-tint); color:var(--disp-voicemail); }
  .agent-trunk-badge { font-size:11px; font-family:var(--font); padding:3px 8px; border-radius:6px;
    background:var(--success-bg-tint); color:var(--success); }
  .agent-lang-badge { font-size:10px; padding:3px 8px; border-radius:20px; font-weight:600;
    background:var(--warning-bg-tint); color:var(--warning); }
  .agent-actions { display:flex; gap:6px; }
  /* Soft warning for rows whose agent_name collides with another row's
     name. Duplicate names are allowed — the agent id is the unique key —
     so this badge is advisory only, not a blocker. Amber for "heads-up,
     not broken." Tap = open Edit (delegated via .js-edit-agent). */
  .agent-dup-badge {
    display:inline-flex; align-items:center; gap:4px; margin-top:6px;
    padding:3px 9px; border-radius:6px; cursor:pointer;
    background:var(--warning-bg-tint); color:var(--warning); border:1px solid var(--warning-border);
    font:600 11px/1.2 var(--sans);
  }
  .agent-dup-badge:hover, .agent-dup-badge:focus-visible {
    background:var(--warning-border); outline:2px solid var(--accent); outline-offset:1px;
  }
  .agent-row-dup td { background:var(--warning-bg-tint); }
  .agents-empty { padding:48px; text-align:center; color:var(--muted); }
  .agents-empty .empty-icon { font-size:32px; margin-bottom:12px; }

  /* "(soon)" badge — marks UI controls that are persisted to the DB but
     not yet honoured by the agent runtime. Source of truth for which
     controls qualify: docs/livekit-current-state.md § 15 Persisted-only
     fields. When a control's runtime wiring lands, remove the badge from
     the matching span/label and update the § 15 row.

     Muted-amber via existing --warning tokens (4.5:1+ on both light and
     dark themes). The hover tooltip ("saved but runtime not yet wired")
     is set via the title attribute on the element, not in CSS, so screen
     readers also surface it. */
  .badge-soon {
    display:inline-flex; align-items:center;
    padding:1px 6px; border-radius:8px;
    margin-left:4px; vertical-align:middle;
    background:var(--warning-bg-tint); color:var(--warning); border:1px solid var(--warning-border);
    font:600 10px/1.4 var(--sans); font-style:normal;
    cursor:help;
  }
  /* Larger variant for modal titles where the surrounding type runs ~14 px. */
  .badge-soon-lg {
    padding:2px 8px; font-size:12px;
  }

  /* Modal */
  .modal-overlay { display:none; position:fixed; inset:0; background:var(--bg-overlay);
    z-index:3000; align-items:center; justify-content:center; }
  .modal-overlay.open { display:flex; }
  .modal { background:var(--surface); border:1px solid var(--border); border-radius:14px;
    width:600px; max-width:95vw; max-height:90vh; overflow-y:auto; }
  .modal-header { padding:18px 22px; border-bottom:1px solid var(--border);
    display:flex; justify-content:space-between; align-items:center; position:sticky; top:0;
    background:var(--surface); z-index:1; }
  .modal-title { font-size:14px; font-weight:600; }
  .modal-close { background:none; border:none; color:var(--muted); font-size:20px;
    cursor:pointer; padding:0 4px; }
  .modal-close:hover { color:var(--text); }
  .modal-body { padding:22px; }
  .modal-footer { padding:16px 22px; border-top:1px solid var(--border);
    display:flex; justify-content:flex-end; gap:10px; }

  /* M-5: Agent Edit View (three-column inline layout) */
  .aev-shell { display:flex; flex-direction:column; }
  .aev-header { display:flex; justify-content:space-between; align-items:center;
    padding:14px 18px; border-bottom:1px solid var(--border);
    background:var(--surface); border-radius:12px 12px 0 0; gap:14px; }
  .aev-header-left  { display:flex; align-items:center; gap:12px; min-width:0; }
  .aev-header-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
  .aev-header-title { font-size:14px; font-weight:600; }
  .aev-header-meta  { font-size:11px; color:var(--muted);
    font-family:var(--font-mono,ui-monospace,Menlo,monospace); }
  .aev-back-btn { background:none; border:1px solid var(--border); color:var(--text);
    padding:6px 12px; border-radius:8px; cursor:pointer; font-size:12px;
    font-family:inherit; }
  .aev-back-btn:hover { background:var(--border-subtle); border-color:var(--accent); }
  .aev-status { margin:10px 18px 0 18px; }
  .aev-status:empty { display:none; }
  .aev-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:14px; padding:18px; }
  /* Variant set by layout.js when the right Test column is hidden — keeps
     the file ready for a future 3-col rehydration without forking the CSS. */
  .aev-grid-2col { grid-template-columns:2fr 1fr; }
  /* 3-col: left prompt (2fr), middle settings + right Test Audio (1fr each). */
  .aev-grid-3col { grid-template-columns:2fr 1fr 1fr; }
  .aev-col { background:var(--surface); border:1px solid var(--border); border-radius:12px;
    padding:16px; min-height:300px; min-width:0; }
  .aev-col h4 { font-size:11px; font-weight:600; color:var(--muted);
    text-transform:uppercase; letter-spacing:.06em; margin:0 0 10px 0; }
  .aev-acc { border:1px solid var(--border); border-radius:8px; margin-bottom:8px;
    background:var(--bg); }
  .aev-acc summary { padding:10px 12px; font-size:13px; font-weight:600; cursor:pointer;
    list-style:none; display:flex; justify-content:space-between; align-items:center;
    user-select:none; }
  .aev-acc summary::-webkit-details-marker { display:none; }
  .aev-acc summary::after { content:'▾'; color:var(--muted); font-size:11px; }
  .aev-acc[open] summary::after { content:'▴'; }
  .aev-acc-body { padding:12px; border-top:1px solid var(--border); }
  .aev-placeholder-card { text-align:center; padding:30px 16px; color:var(--muted);
    border:1px dashed var(--border); border-radius:10px; }
  .aev-placeholder-icon  { font-size:32px; margin-bottom:10px; }
  .aev-placeholder-title { font-size:14px; font-weight:600; color:var(--text);
    margin-bottom:6px; }
  .aev-placeholder-body  { font-size:11px; line-height:1.6; }
  @media (max-width:1100px) {
    .aev-grid { grid-template-columns:1fr; }
  }

  /* ── Test Audio column (M-5 right column) ─────────────────────────────── */
  .aev-test-panel { display:flex; flex-direction:column; gap:12px; }
  .aev-test-title { font-size:11px; font-weight:600; color:var(--muted);
    text-transform:uppercase; letter-spacing:.06em; }
  .aev-test-sub  { font-size:12px; line-height:1.5; color:var(--text); }
  .aev-test-sub strong { font-weight:600; }
  .aev-test-note { font-size:11px; line-height:1.5; color:var(--warning);
    background:var(--warning-bg-tint); border:1px solid var(--warning-border);
    border-radius:8px; padding:8px 10px; }
  .aev-test-note code { font-family:var(--font-mono,ui-monospace,Menlo,monospace); }
  .aev-test-empty { font-size:12px; line-height:1.6; color:var(--muted);
    text-align:center; padding:24px 12px; border:1px dashed var(--border);
    border-radius:10px; }
  .aev-test-disabled .aev-test-title { opacity:.7; }

  .aev-test-controls { display:flex; gap:8px; }
  .aev-test-btn { flex:1; padding:9px 14px; border-radius:8px; cursor:pointer;
    font-size:13px; font-weight:600; font-family:inherit; border:1px solid transparent; }
  .aev-test-btn:disabled { opacity:.55; cursor:not-allowed; }
  .aev-test-btn-run { background:var(--green); color:var(--text-inverted); }
  .aev-test-btn-run:hover:not(:disabled) { filter:brightness(1.08); }
  .aev-test-btn-end { background:transparent; color:var(--red);
    border-color:var(--red); }
  .aev-test-btn-end:hover:not(:disabled) { background:var(--danger-bg-tint); }

  .aev-test-status { display:flex; align-items:center; gap:8px; font-size:12px;
    color:var(--muted); }
  .aev-test-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0;
    background:var(--muted); }
  .aev-test-status[data-state="connecting"] .aev-test-dot { background:var(--warning);
    animation:aev-test-pulse 1.1s ease-in-out infinite; }
  .aev-test-status[data-state="live"] .aev-test-dot { background:var(--green);
    animation:aev-test-pulse 1.4s ease-in-out infinite; }
  .aev-test-status[data-state="error"] .aev-test-dot { background:var(--red); }
  .aev-test-status[data-state="error"] { color:var(--red); }
  @keyframes aev-test-pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%     { opacity:.4; transform:scale(.78); }
  }

  .aev-test-transcript { display:flex; flex-direction:column; gap:8px;
    min-height:180px; max-height:420px; overflow-y:auto; padding:10px;
    background:var(--bg); border:1px solid var(--border); border-radius:10px; }
  .aev-test-transcript-empty { margin:auto; font-size:11px; color:var(--muted);
    text-align:center; }
  .aev-test-msg { display:flex; flex-direction:column; gap:3px; max-width:92%; }
  .aev-test-msg-agent { align-self:flex-start; }
  .aev-test-msg-you   { align-self:flex-end; }
  .aev-test-msg-role  { font-size:10px; font-weight:700; text-transform:uppercase;
    letter-spacing:.05em; color:var(--muted); }
  .aev-test-msg-you .aev-test-msg-role { text-align:right; }
  .aev-test-msg-text { font-size:12px; line-height:1.5; padding:7px 10px;
    border-radius:9px; white-space:pre-wrap; word-break:break-word; }
  .aev-test-msg-agent .aev-test-msg-text { background:var(--surface);
    border:1px solid var(--border); color:var(--text); }
  .aev-test-msg-you .aev-test-msg-text { background:var(--accent); color:var(--text-inverted); }
  .aev-test-msg-interim .aev-test-msg-text { opacity:.6; font-style:italic; }

  /* Tap-to-enable-sound button — shown only when the browser blocks audio
     autoplay. Amber so it reads as "action needed". */
  .aev-test-btn-sound { width:100%; background:var(--warning); color:var(--text-inverted); }
  .aev-test-btn-sound:hover:not(:disabled) { filter:brightness(1.08); }

  /* Agent audio sink — LiveKit-created <audio> elements appended to <body>.
     Kept in the render tree (not display:none) but visually hidden so audio
     playback is never deprioritised. */
  .aev-test-audio-sink { position:absolute; width:0; height:0; opacity:0;
    pointer-events:none; }

  /* Diagnostics log — collapsible event trace for debugging a session. */
  .aev-test-diag-wrap { font-size:11px; }
  .aev-test-diag-wrap summary { cursor:pointer; color:var(--muted);
    font-weight:600; }
  .aev-test-diag { margin-top:6px; max-height:200px; overflow-y:auto;
    background:var(--bg); border:1px solid var(--border); border-radius:8px;
    padding:8px; font-family:var(--font-mono,ui-monospace,Menlo,monospace);
    font-size:10px; line-height:1.5; color:var(--muted);
    white-space:pre-wrap; word-break:break-word; }