:root { --navy:#0f172a; --navy-2:#18243a; --ink:#0f172a; --muted:#64748b; --line:#e2e8f0; --ground:#f6f8fb; --panel:#fff; --blue:#0369a1; --blue-soft:#e0f2fe; --green:#047857; --green-soft:#d1fae5; --amber:#b45309; --amber-soft:#fef3c7; --red:#b91c1c; --red-soft:#fee2e2; --radius:16px; }
* { box-sizing:border-box; }
html { background:var(--ground); color:var(--ink); font-family:"Fira Sans","IBM Plex Sans",system-ui,sans-serif; }
body { margin:0; min-width:320px; }
button, input, select { font:inherit; }
button, select { cursor:pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline:3px solid #38bdf8; outline-offset:2px; }
.skip-link { position:fixed; top:8px; left:8px; transform:translateY(-140%); z-index:10; background:#fff; color:var(--navy); padding:8px 12px; border-radius:8px; font-weight:700; }
.skip-link:focus { transform:translateY(0); }
.topbar { min-height:76px; color:#fff; background:var(--navy); display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px clamp(20px,4vw,56px); box-shadow:0 5px 18px rgba(15,23,42,.14); }
.brand { display:flex; align-items:center; gap:12px; }.brand-mark { display:grid; place-items:center; width:38px; height:38px; border:1px solid #60a5fa; border-radius:11px; color:#dbeafe; font-family:"Fira Code",monospace; font-size:13px; font-weight:700; }.brand h1 { margin:0; font-size:18px; letter-spacing:-.01em; }.eyebrow { margin:0 0 5px; color:#64748b; font-family:"Fira Code",monospace; font-size:10px; font-weight:600; letter-spacing:.095em; }.brand .eyebrow { color:#93c5fd; font-size:9px; margin-bottom:2px; }.connection { display:inline-flex; align-items:center; gap:8px; color:#cbd5e1; font-size:13px; }.pulse { width:8px; height:8px; border-radius:50%; background:#34d399; box-shadow:0 0 0 4px rgba(52,211,153,.12); }
.shell { max-width:1540px; margin:0 auto; padding:clamp(24px,4vw,48px); }.overview { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:26px; }.overview h2 { margin:0; font-size:clamp(24px,3vw,34px); letter-spacing:-.035em; }.lede { max-width:670px; color:var(--muted); line-height:1.55; margin:10px 0 0; }.button { display:inline-flex; align-items:center; gap:8px; border:1px solid transparent; border-radius:10px; min-height:42px; padding:0 14px; font-weight:650; transition:background .2s, border-color .2s, transform .2s; }.button:hover { transform:translateY(-1px); }.button.secondary { background:#fff; color:var(--navy); border-color:#cbd5e1; }.button.secondary:hover { background:#f8fafc; border-color:#94a3b8; }.button.primary { background:var(--blue); color:#fff; text-decoration:none; }.button.primary:hover { background:#075985; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:22px; }.metric-card { position:relative; overflow:hidden; padding:18px 18px 17px; min-height:112px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 2px 8px rgba(15,23,42,.035); }.metric-card::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:#94a3b8; }.metric-card.success::before { background:#10b981; }.metric-card.warning::before { background:#f59e0b; }.metric-card.danger::before { background:#ef4444; }.metric-card span,.metric-card small { display:block; color:var(--muted); }.metric-card span { font-size:13px; }.metric-card strong { display:block; margin:4px 0; font-family:"Fira Code",monospace; font-size:29px; letter-spacing:-.05em; }.metric-card small { font-size:12px; }
.report-settings { margin-bottom:22px; padding:22px; background:var(--panel); border:1px solid #cbd5e1; border-radius:var(--radius); box-shadow:0 6px 16px rgba(15,23,42,.045); }.settings-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:16px; }.settings-heading h2 { margin:0; font-size:18px; }.settings-heading p:not(.eyebrow) { max-width:680px; margin:7px 0 0; color:var(--muted); font-size:13px; line-height:1.5; }.settings-fields { display:grid; grid-template-columns:minmax(220px,.38fr) minmax(0,.62fr); gap:13px; }.setting-field { display:grid; gap:7px; color:#334155; font-size:13px; font-weight:700; }.setting-field span { display:flex; gap:5px; align-items:baseline; }.setting-field small { color:var(--muted); font-size:11px; font-weight:500; }.setting-field input,.setting-field textarea { width:100%; border:1px solid #cbd5e1; border-radius:9px; background:#fff; color:var(--ink); padding:10px 11px; font:inherit; font-size:13px; line-height:1.45; }.setting-field textarea { min-height:92px; resize:vertical; }.setting-field input:focus,.setting-field textarea:focus { outline:3px solid rgba(56,189,248,.25); border-color:#38bdf8; }.settings-actions { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-top:12px; }.settings-actions .field-hint { max-width:760px; }.settings-actions .button { flex:0 0 auto; white-space:nowrap; }
.webhook-tester { margin-bottom:22px; padding:22px; background:var(--panel); border:1px solid #bfdbfe; border-radius:var(--radius); box-shadow:0 6px 16px rgba(15,23,42,.045); }.tester-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:16px; }.tester-heading h2 { margin:0; font-size:18px; }.tester-heading p:not(.eyebrow) { max-width:680px; margin:7px 0 0; color:var(--muted); font-size:13px; line-height:1.5; }.test-endpoint { padding:5px 8px; color:#075985; border:1px solid #bae6fd; border-radius:999px; background:#f0f9ff; font-family:"Fira Code",monospace; font-size:10px; font-weight:700; letter-spacing:.04em; white-space:nowrap; }.payload-label { display:block; margin-bottom:8px; color:#334155; font-size:13px; font-weight:700; }.webhook-tester textarea { display:block; width:100%; min-height:250px; resize:vertical; padding:13px 14px; color:#dbeafe; border:1px solid #334155; border-radius:10px; outline:0; background:#0b1220; font-family:"Fira Code",ui-monospace,monospace; font-size:12px; line-height:1.55; tab-size:2; }.webhook-tester textarea:focus { border-color:#38bdf8; box-shadow:0 0 0 3px rgba(56,189,248,.2); }.tester-footer { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-top:11px; }.field-hint { max-width:750px; margin:0; color:var(--muted); font-size:12px; line-height:1.5; }.field-hint code,.tester-heading code { padding:1px 4px; border-radius:4px; color:#075985; background:#e0f2fe; font-family:"Fira Code",monospace; font-size:.94em; }.tester-actions { display:flex; flex:0 0 auto; gap:9px; }.tester-actions .button { white-space:nowrap; }.webhook-tester .button.primary { border:0; }.webhook-tester .button:disabled { cursor:wait; opacity:.65; transform:none; }.test-feedback { margin:14px 0 0; padding:10px 12px; border:1px solid transparent; border-radius:9px; font-size:13px; line-height:1.45; }.test-feedback.loading { color:#075985; border-color:#bae6fd; background:#f0f9ff; }.test-feedback.success { color:#065f46; border-color:#a7f3d0; background:#ecfdf5; }.test-feedback.error { color:#991b1b; border-color:#fecaca; background:#fef2f2; }.test-response { max-height:260px; margin:10px 0 0; padding:12px; overflow:auto; color:#cbd5e1; border-radius:9px; background:#0b1220; font-family:"Fira Code",ui-monospace,monospace; font-size:11px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.workspace { display:grid; grid-template-columns:minmax(520px,1.05fr) minmax(440px,.95fr); gap:20px; align-items:start; }.event-panel,.detail-panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 6px 16px rgba(15,23,42,.045); }.event-panel { overflow:hidden; }.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:22px 22px 15px; }.panel-heading h2 { font-size:18px; margin:0; }.count-label { color:var(--muted); font-size:12px; white-space:nowrap; }.filters { display:flex; gap:10px; padding:0 22px 18px; }.search-control { flex:1; position:relative; display:flex; align-items:center; color:#94a3b8; }.search-control svg { position:absolute; left:11px; }.search-control input,.select-control select { width:100%; height:40px; border:1px solid #cbd5e1; background:#fff; border-radius:9px; color:var(--ink); }.search-control input { padding:0 12px 0 37px; }.select-control select { padding:0 28px 0 10px; }.table-wrap { overflow:auto; min-height:395px; border-top:1px solid var(--line); }table { border-collapse:collapse; width:100%; min-width:640px; }th { background:#f8fafc; color:#64748b; font-family:"Fira Code",monospace; font-size:10px; letter-spacing:.05em; text-align:left; text-transform:uppercase; }th,td { padding:12px 14px; border-bottom:1px solid #eef2f7; vertical-align:middle; }.event-row { width:100%; border:0; background:transparent; color:inherit; padding:0; text-align:left; }.event-row:hover td { background:#f8fbff; }.event-row.selected td { background:#eff6ff; }.event-primary { display:block; font-family:"Fira Code",monospace; font-size:12px; font-weight:650; }.event-secondary { display:block; margin-top:3px; color:var(--muted); font-size:12px; }.step-cell { color:#475569; font-size:12px; max-width:145px; }.status { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font-size:11px; font-weight:700; white-space:nowrap; }.status::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }.status.succeeded { color:var(--green); background:var(--green-soft); }.status.processing { color:var(--amber); background:var(--amber-soft); }.status.failed { color:var(--red); background:var(--red-soft); }.status.pending { color:#475569; background:#e2e8f0; }.empty-state { display:grid; justify-items:center; gap:7px; padding:70px 24px; color:#94a3b8; text-align:center; }.empty-state p { margin:0; color:#475569; font-weight:650; }.empty-state small { max-width:280px; line-height:1.45; }
.detail-panel { position:sticky; top:18px; max-height:calc(100vh - 36px); overflow:auto; }.detail-empty { display:grid; place-items:center; min-height:480px; padding:36px; color:#94a3b8; text-align:center; }.detail-empty svg { color:#64748b; }.detail-empty h2 { margin:13px 0 6px; color:#334155; font-size:18px; }.detail-empty p { max-width:260px; margin:0; font-size:14px; line-height:1.5; }.detail-header { padding:22px 22px 18px; border-bottom:1px solid var(--line); }.detail-header-top { display:flex; gap:12px; align-items:flex-start; justify-content:space-between; }.detail-header h2 { max-width:360px; overflow-wrap:anywhere; margin:0; font-family:"Fira Code",monospace; font-size:15px; }.detail-meta { display:flex; flex-wrap:wrap; gap:9px 14px; margin-top:9px; color:var(--muted); font-size:12px; }.detail-section { padding:18px 22px; border-bottom:1px solid var(--line); }.detail-section:last-child { border-bottom:0; }.section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 13px; color:#334155; font-size:14px; }.section-title .eyebrow { margin:0; }.timeline { list-style:none; margin:0; padding:0; }.timeline li { position:relative; display:grid; grid-template-columns:18px 1fr; column-gap:10px; padding-bottom:13px; }.timeline li:last-child { padding-bottom:0; }.timeline li:not(:last-child)::after { content:""; position:absolute; left:8px; top:18px; bottom:0; width:2px; background:#e2e8f0; }.timeline-dot { position:relative; z-index:1; width:17px; height:17px; margin-top:2px; border:2px solid #cbd5e1; border-radius:50%; background:#fff; }.timeline-dot.completed { border-color:#10b981; background:#d1fae5; }.timeline-dot.running { border-color:#f59e0b; background:#fef3c7; }.timeline-dot.failed { border-color:#ef4444; background:#fee2e2; }.timeline-copy { min-width:0; }.timeline-name { display:flex; justify-content:space-between; gap:8px; font-size:13px; font-weight:650; }.timeline-copy small { display:block; margin-top:3px; color:#64748b; font-size:12px; line-height:1.4; }.data-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.data-item { min-width:0; padding:10px; border:1px solid #e8edf3; border-radius:9px; background:#fbfdff; }.data-item span { display:block; color:#64748b; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }.data-item strong { display:block; margin-top:4px; overflow-wrap:anywhere; color:#1e293b; font-size:13px; line-height:1.35; font-weight:600; }.report-grid { display:grid; grid-template-columns:1fr; gap:7px; }.report-row { display:grid; grid-template-columns:148px minmax(0,1fr); gap:10px; padding:8px 0; border-bottom:1px solid #eef2f7; }.report-row:last-child { border-bottom:0; }.report-row span { color:#64748b; font-family:"Fira Code",monospace; font-size:11px; overflow-wrap:anywhere; }.report-row strong { color:#1e293b; font-size:13px; font-weight:500; line-height:1.42; overflow-wrap:anywhere; }.transcript { display:grid; gap:8px; }.utterance { padding:10px 12px; border-radius:10px; line-height:1.45; font-size:13px; }.utterance.bot { background:#eff6ff; border:1px solid #dbeafe; }.utterance.customer { background:#f8fafc; border:1px solid #e2e8f0; }.utterance header { display:flex; justify-content:space-between; gap:8px; margin-bottom:4px; color:#475569; font-family:"Fira Code",monospace; font-size:10px; font-weight:700; }.utterance p { margin:0; overflow-wrap:anywhere; }.log-list { margin:0; padding:0; list-style:none; background:#0b1220; border-radius:10px; overflow:hidden; }.log-list li { display:grid; grid-template-columns:72px 58px 1fr; gap:8px; padding:9px 10px; color:#cbd5e1; border-bottom:1px solid rgba(148,163,184,.13); font-family:"Fira Code",monospace; font-size:10px; line-height:1.4; }.log-list li:last-child { border-bottom:0; }.log-time { color:#64748b; }.log-step { color:#7dd3fc; overflow-wrap:anywhere; }.log-list li.error .log-step { color:#fca5a5; }.log-list li.success .log-step { color:#6ee7b7; }.error-box { padding:11px 12px; color:#991b1b; border:1px solid #fecaca; border-radius:10px; background:#fef2f2; font-size:13px; line-height:1.45; }.inline-link { color:var(--blue); font-size:12px; font-weight:650; text-decoration:none; }.inline-link:hover { text-decoration:underline; }.sr-only { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:1100px) { .workspace { grid-template-columns:1fr; }.detail-panel { position:static; max-height:none; }.metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { .topbar { padding:13px 18px; }.connection { font-size:11px; }.shell { padding:24px 16px; }.overview { align-items:flex-start; flex-direction:column; }.metrics { grid-template-columns:1fr 1fr; }.metric-card { min-height:100px; padding:14px; }.metric-card strong { font-size:24px; }.settings-heading,.settings-actions,.tester-heading,.tester-footer { flex-direction:column; }.report-settings,.webhook-tester { padding:18px 16px; }.settings-fields { grid-template-columns:1fr; }.settings-actions .button,.tester-actions { width:100%; }.tester-actions { flex-direction:column-reverse; }.tester-actions .button { width:100%; justify-content:center; }.filters { flex-direction:column; }.panel-heading,.filters,.detail-header,.detail-section { padding-left:16px; padding-right:16px; }.report-row { grid-template-columns:1fr; gap:3px; }.data-grid { grid-template-columns:1fr; }.log-list li { grid-template-columns:58px 48px 1fr; font-size:9px; }.button { width:100%; justify-content:center; }.table-wrap { margin:0; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
.event-row { cursor:pointer; }.event-row:focus-visible { outline:3px solid #38bdf8; outline-offset:-3px; }
/* Read-only prompt preview in Report Settings. */
.prompt-preview-field { margin-top:14px; }
.prompt-preview-field textarea { min-height:220px; color:#334155; background:#f8fafc; font-family:"Fira Code",ui-monospace,monospace; font-size:11px; line-height:1.5; resize:vertical; }
.prompt-preview-field textarea:read-only { cursor:text; }
.prompt-viewer { display:block; width:100%; min-height:260px; box-sizing:border-box; padding:12px; color:#cbd5e1; border:1px solid #334155; border-radius:9px; background:#0b1220; font-family:"Fira Code",ui-monospace,monospace; font-size:11px; line-height:1.5; resize:vertical; }
.phone-grid { margin-top:9px; }