/* ============================================================================ IPL SUPPORT TOOLS — REFRESHED VISUAL SYSTEM Single source of truth. Port this whole file into the `css` const in web/main.go (or serve it as a static /ipl.css). Everything is driven by the CSS custom properties in :root — change the theme in one place. Dark is primary; a light theme would override the same tokens under [data-theme="light"]. ============================================================================ */ :root{ /* — Backgrounds (navy-slate, deepened & de-muddied vs. the as-built theme) — */ --bg:#14141e; --bg-sunken:#0e0e16; --bg-header:#101019; --surface:#1d1d2b; --surface-2:#25253a; --surface-3:#2e2e46; /* — Borders — */ --border:#2a2a3e; --border-strong:#37374f; --border-subtle:#202030; /* — Text (all steps verified AA ≥4.5:1 on --bg) — */ --text:#e7e7f1; --text-heading:#f2f2fa; --text-muted:#a8a8c2; --text-dim:#8a8aa6; --text-label:#9696b4; /* — Accent / primary — */ --accent:#5b91f0; --accent-hover:#74a4f5; --accent-quiet:rgba(91,145,240,.15); --accent-border:rgba(91,145,240,.42); --link:#82b1ff; /* — Semantic text — */ --ok:#54cf8e; --warn:#e8a93c; --err:#f0727d; --info:#5b91f0; --neutral:#9aa0be; --purple:#a78bfa; /* — Semantic tints (bg + border) — */ --ok-bg:rgba(84,207,142,.13); --ok-border:rgba(84,207,142,.34); --warn-bg:rgba(232,169,60,.14); --warn-border:rgba(232,169,60,.36); --err-bg:rgba(240,114,125,.14); --err-border:rgba(240,114,125,.36); --info-bg:rgba(91,145,240,.14); --info-border:rgba(91,145,240,.36); --neutral-bg:rgba(154,160,190,.12); --neutral-border:rgba(154,160,190,.3); --purple-bg:rgba(167,139,250,.14); --purple-border:rgba(167,139,250,.36); /* — SIP participant colors (sequence diagram lifelines) — */ --p-cloud:#6c8cff; --p-iplsbc:#a78bfa; --p-ivr:#45d6b5; --p-fmcc:#f5a623; --p-twilio:#8b8fa8; /* — Map markers (preserved meaning) — */ --map-ok:#2ecc71; --map-err:#e74c3c; /* — Type — */ --font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,system-ui,sans-serif; --font-mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,'Cascadia Code',monospace; /* — Radius — */ --r-sm:5px; --r-md:8px; --r-lg:11px; --r-xl:14px; --r-pill:999px; /* — Spacing scale (4px base) — */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; /* — Elevation — */ --shadow-card:0 1px 2px rgba(0,0,0,.3); --shadow-pop:0 12px 34px rgba(0,0,0,.55); --glow:0 0 0 1px var(--accent-border),0 10px 26px rgba(91,145,240,.13); --focus:0 0 0 3px rgba(91,145,240,.35); } /* ============================================================================ LIGHT THEME — additive override. Set . Same token names, light values; every component adapts automatically. ============================================================================ */ [data-theme="light"]{ /* Backgrounds & surfaces (cool slate, navy-tinted) */ --bg:#f3f4f9; --bg-sunken:#e8eaf2; --bg-header:#ffffff; --surface:#ffffff; --surface-2:#f3f5fa; --surface-3:#e9ebf4; /* Borders */ --border:#dde0ec; --border-strong:#c5c9da; --border-subtle:#eaecf4; /* Text (AA-verified on --bg) */ --text:#1b1e2c; --text-heading:#0e1220; --text-muted:#454b61; --text-dim:#646a82; --text-label:#5e6480; /* Accent / primary (deepened for contrast on white) */ --accent:#2f6fe0; --accent-hover:#2862cf; --accent-quiet:rgba(47,111,224,.1); --accent-border:rgba(47,111,224,.34); --link:#2563d6; /* Semantic text (darkened so it reads on light tints) */ --ok:#1d8a4d; --warn:#9a6a12; --err:#d23b46; --info:#2f6fe0; --neutral:#5e6480; --purple:#6a4cd0; /* Semantic tints */ --ok-bg:rgba(31,138,78,.12); --ok-border:rgba(31,138,78,.3); --warn-bg:rgba(176,120,15,.14); --warn-border:rgba(176,120,15,.32); --err-bg:rgba(210,59,70,.1); --err-border:rgba(210,59,70,.3); --info-bg:rgba(47,111,224,.1); --info-border:rgba(47,111,224,.3); --neutral-bg:rgba(94,100,128,.1); --neutral-border:rgba(94,100,128,.28); --purple-bg:rgba(106,76,208,.1); --purple-border:rgba(106,76,208,.3); /* Elevation (real soft shadows on light) */ --shadow-card:0 1px 2px rgba(20,24,40,.06); --shadow-pop:0 12px 30px rgba(20,24,40,.16); --glow:0 0 0 1px var(--accent-border),0 8px 22px rgba(47,111,224,.12); --focus:0 0 0 3px rgba(47,111,224,.25); } /* Component fixups where dark literals were baked in */ [data-theme="light"] .flow-step .ico svg{stroke:#fff} /* Light mode: JSON/raw-data blocks become a light panel with dark text to match the page (.s/.n tokens inherit the now-dark --ok/--warn; .k darkened below). */ [data-theme="light"] .code-block{background:#f4f6fb;border-color:#dde0ec;color:#1f2333} [data-theme="light"] .code-block .k{color:#2563d6} [data-theme="light"] .mini-map{background: repeating-linear-gradient(0deg,transparent 0 23px,rgba(47,111,224,.08) 23px 24px), repeating-linear-gradient(90deg,transparent 0 23px,rgba(47,111,224,.08) 23px 24px), radial-gradient(120% 120% at 60% 40%,#eef2fb,#dfe5f2)} [data-theme="light"] .mini-map .coords,[data-theme="light"] .mini-map .place{background:rgba(255,255,255,.86);color:var(--text);border-color:var(--border)} /* ── Theme toggle (injected by ipl.js into the header, beside the user chip) ── */ .theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;width:32px;height:32px;background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text-muted);border-radius:var(--r-sm);cursor:pointer;transition:.12s;flex-shrink:0} .theme-toggle:hover{color:var(--text-heading);background:var(--surface-3)} .theme-toggle svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* Instant, flicker-free theme swap: suppress transitions during the flip */ html.theme-switching *,html.theme-switching *::before,html.theme-switching *::after{transition:none !important} *{box-sizing:border-box} html{scrollbar-color:var(--surface-3) var(--bg-sunken)} body{margin:0;font-family:var(--font-sans);background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased} a{color:var(--link);text-decoration:none} a:hover{text-decoration:underline} .mono{font-family:var(--font-mono)} .muted{color:var(--text-dim)} ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:var(--bg-sunken)} ::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:6px;border:2px solid var(--bg-sunken)} ::-webkit-scrollbar-thumb:hover{background:var(--border-strong)} /* ── App header ────────────────────────────────────────────────────────── */ .app-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:1.25rem;height:54px;padding:0 1.5rem;background:var(--bg-header);border-bottom:1px solid var(--border)} .brand{display:flex;align-items:center;gap:.6rem} .brand .mark{width:18px;height:18px;background:linear-gradient(135deg,var(--accent),#7c5cf0);transform:rotate(45deg);border-radius:4px;flex-shrink:0} .brand .name{font-weight:700;letter-spacing:1.4px;font-size:.92rem;color:var(--text-heading)} .brand .sub{color:var(--text-dim);font-weight:400;font-size:.84rem;border-left:1px solid var(--border-strong);padding-left:.65rem;margin-left:.1rem} .header-spacer{flex:1} .region-global{display:flex;align-items:center;gap:.55rem} .region-global .lbl{font-size:.64rem;letter-spacing:.9px;text-transform:uppercase;color:var(--text-label);font-weight:600} .user-chip{display:flex;align-items:center;gap:.5rem;color:var(--text-muted);font-size:.8rem} .user-chip .avatar{width:27px;height:27px;border-radius:50%;background:var(--surface-3);border:1px solid var(--border-strong);display:grid;place-items:center;font-size:.68rem;font-weight:600;color:var(--text-heading)} .build-tag{position:fixed;right:.6rem;bottom:.4rem;z-index:40;color:var(--text-dim);font-size:.72rem;letter-spacing:.04em;white-space:nowrap;pointer-events:none;opacity:.75} /* ── Layout ────────────────────────────────────────────────────────────── */ .main{padding:1.5rem 2rem 5rem;max-width:1520px;margin:0 auto} /* Table-heavy pages (e.g. CDR) benefit from using the full viewport width rather than the shared readability cap, which exists for text/form pages. */ .main.wide{max-width:none} .crumbs{font-size:.8rem;color:var(--text-dim);margin-bottom:.45rem} .crumbs a{color:var(--link)} .crumbs .sep{margin:0 .45rem;color:var(--border-strong)} .page-title{font-size:1.3rem;font-weight:500;color:var(--text-heading);letter-spacing:-.2px;margin:.1rem 0 .2rem;display:flex;align-items:center;gap:.1rem} .page-sub{color:var(--text-dim);font-size:.85rem;margin:0 0 1.3rem;max-width:720px;line-height:1.55} .region-tag{font-family:var(--font-mono);font-size:.66rem;color:var(--accent);background:var(--accent-quiet);border:1px solid var(--accent-border);padding:.06rem .42rem;border-radius:4px;margin-left:.55rem;letter-spacing:.5px;position:relative;top:-2px} /* ── Sections ──────────────────────────────────────────────────────────── */ .section{margin-bottom:2.1rem} .section-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.95rem;padding-bottom:.45rem;border-bottom:1px solid var(--border)} .section-title{font-size:.7rem;text-transform:uppercase;letter-spacing:1.4px;color:var(--text-label);font-weight:700} .section-note{font-size:.76rem;color:var(--text-dim)} .group-label{font-size:.66rem;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-label);font-weight:700;margin:1.3rem 0 .7rem} .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.1rem 1.25rem} /* ── Dashboard nav cards ───────────────────────────────────────────────── */ .nav-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(265px,1fr));gap:.85rem} .nav-card{display:flex;gap:.9rem;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.05rem 1.15rem;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s} .nav-card:hover{border-color:var(--accent-border);box-shadow:var(--glow);background:var(--surface-2);text-decoration:none} .nav-ic{flex-shrink:0;width:38px;height:38px;border-radius:9px;background:var(--surface-2);border:1px solid var(--border-strong);display:grid;place-items:center;color:var(--accent);transition:background .15s,border-color .15s} .nav-card:hover .nav-ic{background:var(--accent-quiet);border-color:var(--accent-border)} .nav-ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .nav-tt{display:block;font-size:.95rem;font-weight:600;color:var(--text-heading);margin-bottom:.18rem} .nav-dd{display:block;font-size:.8rem;color:var(--text-dim);line-height:1.45} /* ── Buttons ───────────────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;gap:.42rem;font:inherit;font-size:.82rem;font-weight:500;padding:.42rem .85rem;border-radius:var(--r-sm);cursor:pointer;border:1px solid transparent;transition:.12s;line-height:1.2;white-space:nowrap} .btn:hover{text-decoration:none} .btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)} .btn-primary:hover{background:var(--accent-hover)} .btn-ghost{background:var(--surface);color:var(--text-muted);border-color:var(--border-strong)} .btn-ghost:hover{background:var(--surface-2);color:var(--text-heading)} .btn-export{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-border)} .btn-export:hover{background:rgba(84,207,142,.2)} .btn-danger{background:var(--err-bg);color:var(--err);border-color:var(--err-border)} .btn-danger:hover{background:rgba(240,114,125,.2)} .btn-purple{background:var(--purple-bg);color:var(--purple);border-color:var(--purple-border)} .btn-purple:hover{background:rgba(167,139,250,.22)} .btn-sm{padding:.28rem .6rem;font-size:.76rem} .btn-icon{padding:.4rem;width:30px;height:30px;justify-content:center} /* ── Segmented control ─────────────────────────────────────────────────── */ .seg{display:inline-flex;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:2px;gap:2px} .seg-btn{appearance:none;border:none;background:none;color:var(--text-muted);font:inherit;font-size:.8rem;padding:.28rem .72rem;border-radius:4px;cursor:pointer;line-height:1.4;transition:.12s} .seg-btn:hover{color:var(--text-heading)} .seg-btn.active{background:var(--accent);color:#fff} /* ── Chips ─────────────────────────────────────────────────────────────── */ .chip-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap} .chip{appearance:none;font:inherit;font-size:.78rem;color:var(--text-muted);background:var(--surface);border:1px solid var(--border-strong);padding:.32rem .72rem;border-radius:var(--r-pill);cursor:pointer;transition:.12s} .chip:hover{color:var(--text-heading);border-color:var(--text-dim)} .chip.active{background:var(--accent-quiet);color:var(--accent);border-color:var(--accent-border)} .chip.active.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-border)} /* ── Inputs ────────────────────────────────────────────────────────────── */ .input{font:inherit;font-size:.82rem;background:var(--bg-sunken);color:var(--text);border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:.4rem .65rem} .input:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus)} .input::placeholder{color:var(--text-dim)} .input.mono{font-size:.78rem} select.input{cursor:pointer} .search{position:relative;display:inline-flex;align-items:center} .search svg{position:absolute;left:.58rem;width:15px;height:15px;stroke:var(--text-dim);fill:none;stroke-width:1.8;pointer-events:none} .search .input{padding-left:1.95rem;width:230px} .fld-label{font-size:.64rem;text-transform:uppercase;letter-spacing:.85px;color:var(--text-label);font-weight:700} /* ── Dropdown ──────────────────────────────────────────────────────────── */ .dd{position:relative} .dd-btn{display:inline-flex;align-items:center;gap:.45rem;font:inherit;font-size:.8rem;font-weight:500;background:var(--surface);color:var(--text-muted);border:1px solid var(--border-strong);padding:.4rem .7rem;border-radius:var(--r-sm);cursor:pointer;transition:.12s} .dd-btn:hover{background:var(--surface-2);color:var(--text-heading)} .dd-btn svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2} .dd.open .dd-btn{border-color:var(--accent-border);color:var(--text-heading)} .dd-menu{display:none;position:absolute;top:calc(100% + 5px);left:0;min-width:185px;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--r-md);box-shadow:var(--shadow-pop);padding:.3rem;z-index:40} .dd.open .dd-menu{display:block} .dd-item{display:flex;align-items:center;gap:.55rem;padding:.42rem .55rem;border-radius:5px;font-size:.8rem;color:var(--text-muted);cursor:pointer} .dd-item:hover{background:var(--surface-3);color:var(--text-heading)} /* ── Badges (UNIFIED: SIP outcome · job status · call result · gw status) ─ */ .badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:600;line-height:1.4;padding:.16rem .52rem;border-radius:var(--r-pill);border:1px solid transparent;white-space:nowrap} .badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0} .badge .code{font-family:var(--font-mono);font-weight:700;font-size:.7rem} .badge-ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-border)} .badge-warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-border)} .badge-err{background:var(--err-bg);color:var(--err);border-color:var(--err-border)} .badge-info{background:var(--info-bg);color:var(--info);border-color:var(--info-border)} .badge-neutral{background:var(--neutral-bg);color:var(--neutral);border-color:var(--neutral-border)} .badge-purple{background:var(--purple-bg);color:var(--purple);border-color:var(--purple-border)} .tag{font-family:var(--font-mono);font-size:.7rem;color:var(--text-muted);background:var(--surface-2);border:1px solid var(--border-strong);padding:.08rem .42rem;border-radius:4px;white-space:nowrap} .mini-prog{display:inline-block;width:52px;height:5px;border-radius:3px;background:var(--surface-3);overflow:hidden;vertical-align:middle} .mini-prog>i{display:block;height:100%;background:var(--accent)} /* ── Long-ID treatment (mono + truncate + copy) ────────────────────────── */ .idcell{display:inline-flex;align-items:center;gap:.35rem;max-width:178px} .idcell.wide{max-width:330px} .idcell .id{font-family:var(--font-mono);font-size:.76rem;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .copy-btn{appearance:none;border:none;background:none;color:var(--text-dim);cursor:pointer;padding:2px;border-radius:4px;display:inline-flex;flex-shrink:0} .copy-btn:hover{color:var(--accent);background:var(--surface-2)} .copy-btn.copied{color:var(--ok)} .copy-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} /* ── Filter bar ────────────────────────────────────────────────────────── */ .filterbar{display:flex;flex-direction:column;gap:.7rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:.85rem 1rem;margin-bottom:1rem} .filter-row{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap} .filter-row .grow{flex:1} .vrule{width:1px;align-self:stretch;background:var(--border);margin:0 .2rem} /* ── Tables ────────────────────────────────────────────────────────────── */ .table-wrap{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)} .table-scroll{overflow-x:auto} table.data{border-collapse:collapse;width:100%;font-size:.82rem} table.data thead th{position:sticky;top:0;background:var(--bg-sunken);color:var(--text-label);font-size:.64rem;text-transform:uppercase;letter-spacing:.7px;font-weight:700;text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--border);white-space:nowrap;z-index:1} table.data td{padding:.55rem .8rem;border-bottom:1px solid var(--border-subtle);color:var(--text);vertical-align:middle;white-space:nowrap} table.data tbody tr:last-child td{border-bottom:none} table.data tbody tr:hover td{background:var(--surface-2)} table.data .num{text-align:right;font-family:var(--font-mono);font-size:.78rem;color:var(--text-muted)} table.data th.num{text-align:right} table.data .blank{color:var(--border-strong)} table.data td.mono,table.data .tmono{font-family:var(--font-mono);font-size:.78rem;color:var(--text-muted)} table.data .strong{color:var(--text-heading)} table.data.dense td{padding:.32rem .8rem} table.data.dense thead th{padding:.4rem .8rem} tr.clickable{cursor:pointer} tr.clickable:hover td{background:var(--surface-2)} .row-caret{display:inline-block;width:0;height:0;border-left:5px solid var(--text-dim);border-top:4px solid transparent;border-bottom:4px solid transparent;margin-right:.5rem;transition:transform .18s} tr.open .row-caret{transform:rotate(90deg)} /* ── Result meta + notices ─────────────────────────────────────────────── */ .result-meta{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;font-size:.8rem;color:var(--text-dim);margin:.1rem 0 .8rem} .notice{display:inline-flex;align-items:center;gap:.45rem;font-size:.76rem;font-weight:500;padding:.3rem .6rem;border-radius:var(--r-sm)} .notice svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8} .notice-warn{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-border)} .notice-info{background:var(--info-bg);color:var(--info);border:1px solid var(--info-border)} /* ── Pagination ────────────────────────────────────────────────────────── */ .pager{display:flex;align-items:center;justify-content:center;gap:.3rem;margin-top:1.1rem} .pg{min-width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0 .5rem;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--border-strong);color:var(--text-muted);font-size:.8rem;cursor:pointer} .pg:hover{background:var(--surface-2);color:var(--text-heading);text-decoration:none} .pg.active{background:var(--accent);color:#fff;border-color:var(--accent)} .pg.gap{border:none;background:none;cursor:default} /* ── Stat cards (KPI) ──────────────────────────────────────────────────── */ .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.85rem} .stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1rem 1.15rem} .stat .v{font-size:1.75rem;font-weight:600;color:var(--text-heading);font-variant-numeric:tabular-nums;letter-spacing:-.5px;line-height:1.1} .stat .v .u{font-size:.95rem;color:var(--text-dim);font-weight:500;margin-left:.12rem} .stat .k{font-size:.64rem;text-transform:uppercase;letter-spacing:.85px;color:var(--text-label);font-weight:700;margin-top:.3rem} .stat .sub{font-size:.74rem;color:var(--text-dim);margin-top:.2rem} /* ── States (empty / loading / error) ──────────────────────────────────── */ .state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:3rem 1.5rem;background:var(--surface);border:1px dashed var(--border-strong);border-radius:var(--r-lg);gap:.7rem} .state .ic{width:48px;height:48px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border-strong);display:grid;place-items:center;color:var(--text-dim)} .state .ic svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .state-title{font-size:.98rem;color:var(--text-heading);font-weight:500} .state-desc{font-size:.82rem;color:var(--text-dim);max-width:400px;line-height:1.55} .state.err .ic{color:var(--err);background:var(--err-bg);border-color:var(--err-border)} .state.empty .ic{color:var(--accent);background:var(--accent-quiet);border-color:var(--accent-border)} .geo-pending{display:inline-flex;align-items:center;gap:.45rem;color:var(--text-dim);font-size:.78rem} .spinner{width:15px;height:15px;border-radius:50%;border:2px solid var(--border-strong);border-top-color:var(--accent);animation:spin .7s linear infinite;flex-shrink:0} @keyframes spin{to{transform:rotate(360deg)}} .skeleton{background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 37%,var(--surface) 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:5px} @keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}} .sk-row{height:13px;margin:.85rem 0} /* ── Collapsible ───────────────────────────────────────────────────────── */ .collapse{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;margin-bottom:.6rem;background:var(--surface)} .collapse-head{display:flex;align-items:center;gap:.5rem;padding:.6rem .85rem;cursor:pointer;user-select:none;font-size:.85rem;font-weight:600;color:var(--text-heading)} .collapse-head:hover{background:var(--surface-2)} .collapse-head .chev{width:0;height:0;border-left:5px solid var(--text-dim);border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .18s} .collapse.open .collapse-head .chev{transform:rotate(90deg)} .collapse-body{display:none;padding:.2rem .85rem 1rem;border-top:1px solid var(--border-subtle)} .collapse.open .collapse-body{display:block} .code-block{margin:0;padding:.9rem 1rem;background:var(--bg-sunken);border:1px solid var(--border);border-radius:var(--r-md);color:#c8d0e6;font-family:var(--font-mono);font-size:.76rem;line-height:1.6;overflow-x:auto;max-height:340px;overflow-y:auto;white-space:pre;tab-size:2} .code-block .k{color:var(--p-cloud)} .code-block .s{color:var(--ok)} .code-block .n{color:var(--warn)} /* ── Info grid (key/value cards) ───────────────────────────────────────── */ .info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1rem .9rem} .info-grid>*{min-width:0}/* let cells shrink so a long mono value can't overflow into the next column */ .info-grid .k{font-size:.62rem;text-transform:uppercase;letter-spacing:.8px;color:var(--text-label);font-weight:700;margin-bottom:.2rem} .info-grid .v{font-size:.85rem;color:var(--text);font-family:var(--font-mono);overflow-wrap:anywhere} .info-grid .v.sans{font-family:var(--font-sans)} /* ── Summary bar (SIP Flow) ────────────────────────────────────────────── */ .summary-bar{display:flex;gap:0;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin-bottom:1rem} .summary-bar .cell{padding:.7rem 1.1rem;border-right:1px solid var(--border)} .summary-bar .cell:last-child{border-right:none} .summary-bar .k{font-size:.62rem;text-transform:uppercase;letter-spacing:.8px;color:var(--text-label);font-weight:700} .summary-bar .v{font-size:.95rem;color:var(--text-heading);font-family:var(--font-mono);margin-top:.15rem} /* ── Call-flow analysis rows ───────────────────────────────────────────── */ .flow-list{display:flex;flex-direction:column;gap:.5rem} .flow-step{display:flex;align-items:center;gap:.7rem;padding:.65rem .9rem;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface-2)} .flow-step .ico{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex-shrink:0} .flow-step .ico svg{width:13px;height:13px;stroke:#0e0e16;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .flow-step .lab{font-weight:600;color:var(--text-heading);font-size:.86rem} .flow-step .lab small{font-weight:400;color:var(--text-dim);margin-left:.35rem} .flow-step .desc{color:var(--text-muted);font-size:.84rem} .flow-step.ok{border-color:var(--ok-border);background:var(--ok-bg)} .flow-step.ok .ico{background:var(--ok)} .flow-step.warn{border-color:var(--warn-border);background:var(--warn-bg)} .flow-step.warn .ico{background:var(--warn)} .flow-step.err{border-color:var(--err-border);background:var(--err-bg)} .flow-step.err .ico{background:var(--err)} .flow-step.neutral .ico{background:var(--neutral)} /* ── Mini-map ──────────────────────────────────────────────────────────── */ .mini-map{position:relative;border-radius:var(--r-md);border:1px solid var(--border);overflow:hidden;background: repeating-linear-gradient(0deg,transparent 0 23px,rgba(91,145,240,.07) 23px 24px), repeating-linear-gradient(90deg,transparent 0 23px,rgba(91,145,240,.07) 23px 24px), radial-gradient(120% 120% at 60% 40%,#1a2236,#11151f)} .mini-map .pin{position:absolute;width:14px;height:14px;border-radius:50% 50% 50% 0;background:var(--map-ok);transform:translate(-50%,-100%) rotate(-45deg);box-shadow:0 0 0 4px rgba(46,204,113,.2)} .mini-map .pin.err{background:var(--map-err);box-shadow:0 0 0 4px rgba(231,76,60,.2)} .mini-map .coords{position:absolute;left:.5rem;bottom:.5rem;font-family:var(--font-mono);font-size:.66rem;color:var(--text-muted);background:rgba(14,14,22,.78);border:1px solid var(--border);padding:.12rem .42rem;border-radius:4px} .mini-map .place{position:absolute;left:.5rem;top:.5rem;font-size:.72rem;color:var(--text);background:rgba(14,14,22,.78);border:1px solid var(--border);padding:.12rem .45rem;border-radius:4px} /* ── SIP sequence diagram ──────────────────────────────────────────────── */ .sip-toolbar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.7rem} .sip-legend{display:flex;gap:1rem;flex-wrap:wrap;align-items:center} .sip-legend .item{display:inline-flex;align-items:center;gap:.4rem;font-size:.74rem;color:var(--text-muted)} .sip-legend .swatch{width:11px;height:11px;border-radius:3px;flex-shrink:0} .sip-diagram-outer{position:relative;border-radius:var(--r-lg);border:1px solid var(--border);background:var(--bg-sunken);overflow:hidden} .sip-scroll-hint{position:absolute;right:10px;top:8px;z-index:11;font-size:.66rem;color:var(--text-dim);background:rgba(14,14,22,.8);border:1px solid var(--border);padding:.12rem .45rem;border-radius:var(--r-pill);pointer-events:none} .sip-header-sticky{position:sticky;top:0;z-index:10;background:var(--bg-header);border-bottom:1px solid var(--border);height:46px} .sip-header-box{position:absolute;top:7px;height:32px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--border-strong);color:var(--text-heading);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;white-space:nowrap;padding:0 12px;transform:translateX(-50%);border-top:2px solid var(--ln,#888)} .sip-canvas{position:relative;overflow-x:auto} .sip-msg-time{position:absolute;left:0;font-family:var(--font-mono);font-size:10px;color:var(--text-dim)} .sip-arrow{position:absolute;height:0;border-top:2px solid var(--ar,#5b91f0)} .sip-arrow .lbl{position:absolute;left:50%;top:-15px;transform:translateX(-50%);font-size:11px;color:var(--ar,#5b91f0);white-space:nowrap;background:var(--bg-sunken);padding:0 4px} .sip-arrow .head{position:absolute;top:-4px;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent} .sip-arrow.r .head{right:-1px;border-left:8px solid var(--ar,#5b91f0)} .sip-arrow.l .head{left:-1px;border-right:8px solid var(--ar,#5b91f0)} .sip-lifeline{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed var(--border-strong)} /* ── RTP / MOS quality scorecard (Incident Report) ─────────────────────── */ .scorecard{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.7rem;margin:.6rem 0} .qual{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:.7rem .85rem} .qual .dir{display:flex;align-items:center;justify-content:space-between;font-size:.74rem;color:var(--text-muted);font-weight:600;margin-bottom:.5rem} .qual .dir .pill{font-family:var(--font-mono);font-size:.68rem;color:var(--text-dim)} .mos{display:flex;align-items:baseline;gap:.4rem} .mos .val{font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1} .mos .val.good{color:var(--ok)} .mos .val.fair{color:var(--warn)} .mos .val.poor{color:var(--err)} .mos .scale{font-size:.72rem;color:var(--text-dim)} .gauge{height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden;margin:.55rem 0 .5rem} .gauge>i{display:block;height:100%} .gauge>i.good{background:var(--ok)} .gauge>i.fair{background:var(--warn)} .gauge>i.poor{background:var(--err)} .qual .meta{display:flex;gap:.9rem;flex-wrap:wrap;font-size:.72rem;color:var(--text-dim);font-family:var(--font-mono)} .asym{display:flex;align-items:center;gap:.45rem;margin-top:.5rem;font-size:.74rem;color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn-border);border-radius:var(--r-sm);padding:.32rem .55rem} .asym svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.9;flex-shrink:0} /* ── Telemetry timeline ────────────────────────────────────────────────── */ .tl-table{width:100%;border-collapse:collapse;font-size:.8rem} .tl-table th{text-align:left;padding:.45rem .7rem;background:var(--bg-sunken);color:var(--text-label);font-size:.62rem;text-transform:uppercase;letter-spacing:.7px;font-weight:700;border-bottom:1px solid var(--border)} .tl-table td{padding:.32rem .7rem;border-bottom:1px solid var(--border-subtle);vertical-align:top} .tl-table tr:hover td{background:var(--surface-2)} .tl-time{font-family:var(--font-mono);font-size:.72rem;color:var(--text-dim);white-space:nowrap} .tl-code{font-family:var(--font-mono);font-size:.72rem;color:var(--accent);white-space:nowrap} .tl-depth{font-family:var(--font-mono);font-size:.72rem;color:var(--text-dim);text-align:right;white-space:nowrap} .tl-desc{color:var(--text);font-family:var(--font-mono);font-size:.76rem} .tl-desc .fn{color:var(--purple)} .tl-table tr.err td{background:var(--err-bg)} .tl-table tr.err .tl-desc{color:var(--err)} .tl-indent{display:inline-block;border-left:1px solid var(--border-strong);height:1em;vertical-align:middle;margin-right:.5rem} /* ── Downloads file browser ────────────────────────────────────────────── */ .file-row{display:grid;grid-template-columns:1fr auto auto;gap:1rem;align-items:center;padding:.5rem .85rem;border-bottom:1px solid var(--border-subtle)} .file-row:last-child{border-bottom:none} .file-row:hover{background:var(--surface-2)} .file-name{display:flex;align-items:center;gap:.6rem;min-width:0} .file-ic{flex-shrink:0;width:26px;height:26px;border-radius:6px;display:grid;place-items:center;font-family:var(--font-mono);font-size:.56rem;font-weight:700;letter-spacing:.3px} .file-ic.html{background:var(--info-bg);color:var(--info);border:1px solid var(--info-border)} .file-ic.pcap{background:var(--purple-bg);color:var(--purple);border:1px solid var(--purple-border)} .file-ic.mp3{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-border)} .file-label{min-width:0} .file-label .fn{font-family:var(--font-mono);font-size:.78rem;color:var(--link);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:46ch} .file-label .meta{font-size:.7rem;color:var(--text-dim);margin-top:.1rem} .file-row .size{font-family:var(--font-mono);font-size:.74rem;color:var(--text-muted);text-align:right;white-space:nowrap} .file-row .when{font-family:var(--font-mono);font-size:.72rem;color:var(--text-dim);white-space:nowrap} /* ── Recording player ──────────────────────────────────────────────────── */ .player{display:flex;align-items:center;gap:.85rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:.75rem 1.1rem;margin-bottom:.85rem} .play-btn{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;border:none;cursor:pointer;display:grid;place-items:center;transition:.12s} .play-btn:hover{background:var(--accent-hover)} .play-btn svg{width:16px;height:16px;fill:currentColor} .player .time{font-family:var(--font-mono);font-size:.78rem;color:var(--text-muted);white-space:nowrap} .scrub{flex:1;height:6px;border-radius:3px;background:var(--surface-3);position:relative;cursor:pointer} .scrub>i{position:absolute;left:0;top:0;bottom:0;background:var(--accent);border-radius:3px} .scrub .knob{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(0,0,0,.5)} .speed-sel{flex-shrink:0;background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text-muted);border-radius:var(--r-sm);padding:.25rem .5rem;font-size:.78rem;cursor:pointer} .ch-toggles{display:inline-flex;gap:.4rem} .ch-toggle{font-family:var(--font-mono);font-size:.72rem;padding:.25rem .6rem;border-radius:var(--r-sm);border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text-dim);cursor:pointer} .ch-toggle.active{background:var(--accent-quiet);color:var(--accent);border-color:var(--accent-border)} .waveform{display:flex;align-items:center;gap:2px;height:54px;padding:0 .4rem;overflow:hidden} .waveform .bar{flex:1;min-width:2px;background:var(--surface-3);border-radius:1px} .waveform .bar.on{background:var(--accent)} /* AI assessment */ .ai-panel{background:var(--surface);border:1px solid var(--purple-border);border-radius:var(--r-lg);overflow:hidden;margin-bottom:1rem} .ai-head{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;background:var(--purple-bg);border-bottom:1px solid var(--purple-border)} .ai-head .ttl{font-size:.66rem;text-transform:uppercase;letter-spacing:1px;font-weight:700;color:var(--purple)} .ai-body{padding:.9rem 1.1rem} .ai-summary{font-size:.86rem;line-height:1.6;color:var(--text);margin-bottom:.8rem} .ai-concern{display:flex;gap:.55rem;align-items:flex-start;font-size:.82rem;color:var(--text-muted);padding:.25rem 0} .ai-concern .b{width:6px;height:6px;border-radius:50%;background:var(--warn);margin-top:.45rem;flex-shrink:0} .ai-disclaimer{display:flex;align-items:center;gap:.45rem;font-size:.72rem;color:var(--text-dim);margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--border-subtle)} .ai-disclaimer svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8} /* Transcript */ .lang-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.16rem .55rem;border-radius:var(--r-pill);background:var(--ok-bg);border:1px solid var(--ok-border);color:var(--ok);font-size:.68rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase} .transcript{display:grid;grid-template-columns:1fr 1fr;gap:.85rem} .tx-col{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column} .tx-col-hd{display:flex;align-items:center;gap:.5rem;padding:.5rem .85rem;background:var(--surface-2);border-bottom:1px solid var(--border);font-size:.76rem;font-weight:600;color:var(--text-heading)} .tx-col-hd .who{font-family:var(--font-mono);font-size:.68rem;color:var(--text-dim)} .tx-lines{padding:.6rem .85rem;display:flex;flex-direction:column;gap:.5rem;max-height:360px;overflow-y:auto} .tx-line{font-size:.84rem;line-height:1.55;color:var(--text-muted);padding:.3rem .5rem;border-radius:var(--r-sm)} .tx-line .t{font-family:var(--font-mono);font-size:.66rem;color:var(--text-dim);margin-right:.5rem} .tx-line.active{background:var(--accent-quiet);color:var(--text-heading)} /* ── Trace job trigger form ────────────────────────────────────────────── */ .trigger-form{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:.85rem 1rem;margin-bottom:1rem} .refresh-line{display:flex;align-items:center;gap:.5rem;font-size:.76rem;color:var(--text-dim);margin-bottom:.7rem} .refresh-btn{width:28px;height:28px;border-radius:var(--r-sm);border:1px solid var(--border-strong);background:var(--surface);color:var(--text-muted);cursor:pointer;display:grid;place-items:center} .refresh-btn:hover{background:var(--surface-2);color:var(--text-heading)} .refresh-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8} /* ── Detail card (transaction expand) ──────────────────────────────────── */ .detail-card{background:var(--bg-sunken);border:1px solid var(--border);border-radius:var(--r-md);margin:.2rem .4rem .6rem;padding:1rem 1.1rem} .detail-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.7rem} .detail-head .ttl{font-size:.85rem;font-weight:600;color:var(--text-heading)} .detail-grid{display:grid;grid-template-columns:1fr 240px;gap:1rem;align-items:start} @media(max-width:820px){.detail-grid{grid-template-columns:1fr}} /* ── Auth ──────────────────────────────────────────────────────────────── */ .auth-wrap{min-height:calc(100vh - 54px);display:grid;place-items:center;padding:2rem} .auth-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:2rem 1.8rem} .auth-card h2{font-size:1.1rem;font-weight:600;color:var(--text-heading);margin:.2rem 0 .4rem;text-align:center} .auth-card p{font-size:.84rem;color:var(--text-dim);text-align:center;margin:0 0 1.3rem} .input-group{display:flex;margin-bottom:.9rem;border-radius:var(--r-sm)} .input-group:focus-within{box-shadow:var(--focus)} .input-group .input{flex:1;border-radius:var(--r-sm) 0 0 var(--r-sm);border-right:none} .input-group .input:focus{box-shadow:none;border-color:var(--accent)} .input-group:focus-within .input-suffix{border-color:var(--accent)} .input-suffix{padding:.4rem .7rem;background:var(--surface-2);border:1px solid var(--border-strong);border-left:none;border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--text-dim);font-size:.82rem;display:flex;align-items:center} .otp-box{font-family:var(--font-mono);font-size:1.5rem;font-weight:700;letter-spacing:.3em;text-align:center;color:var(--text-heading);background:var(--bg-sunken);border:2px solid var(--accent);border-radius:var(--r-md);padding:.7rem .5rem;width:100%;margin-bottom:1rem;text-transform:uppercase} .otp-box:focus{outline:none;box-shadow:var(--focus)} .otp-box::placeholder{color:var(--border-strong);letter-spacing:.3em} .auth-hint{font-size:.74rem;color:var(--text-dim);text-align:center;margin:.7rem 0 0} .auth-success,.auth-error{font-size:.8rem;line-height:1.5;padding:.55rem .75rem;border-radius:var(--r-sm);text-align:center} .auth-success{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-border)} .auth-error{background:var(--err-bg);color:var(--err);border:1px solid var(--err-border)} /* ── Utilities ─────────────────────────────────────────────────────────── */ .row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap} .between{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap} .grow{flex:1} .two-col{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem} @media(max-width:900px){.two-col{grid-template-columns:1fr}.transcript{grid-template-columns:1fr}} .mt0{margin-top:0}.mb0{margin-bottom:0} /* CDR: clickable rows open the SIP flow */ .cdr-table tbody tr{cursor:pointer}