/* ───────────────────────────────────────────────────────────────────── Sirius Status — light theme, high-contrast. Design rules: - Body text is always near-black on white. Greys are reserved for borders / surfaces / chrome — never for readable text. - Visual hierarchy comes from size + weight, not colour. - State is signalled by (a) coloured left bar on the card, and (b) a pill with a tinted background + dark text (high WCAG ratio). The pill stays readable even for colour-blind users. - The hero banner is the most prominent thing on the page so the overall answer ("is anything wrong?") lands immediately. ───────────────────────────────────────────────────────────────────── */ :root { /* surfaces */ --bg: #ffffff; --bg-soft: #f6f8fa; --bg-code: #eef1f4; /* text — only ever black or near-black */ --text: #1a1a1a; --text-strong: #0a0a0a; --muted: #57606a; /* chrome (borders / dividers / icons that aren't text) */ --border: #d8dde2; --border-strong: #b7bdc4; --link: #0860c8; /* state colours — used for left bar (saturated) and pill background (very pale tint). Pill text uses the saturated colour so the pill reads as black-ish on a pale ground (WCAG AAA on white). */ --ok-strong: #1f883d; --ok-soft: #dafbe1; --ok-text: #0e5424; --warn-strong: #bc8c10; --warn-soft: #fff4cc; --warn-text: #7a5a00; --crit-strong: #cf222e; --crit-soft: #ffe4e3; --crit-text: #82071e; --idle-strong: #8c96a0; /* no_traffic — neutral, not loud */ --idle-soft: #e9ecef; --idle-text: #3a3f45; --unknown-strong: #6e7681; --unknown-soft: #e1e4e8; --unknown-text: #2e3338; color-scheme: light; } /* Dark theme. Two ways to activate: - `data-theme="dark"` on (user-chosen via toggle, persisted) - prefers-color-scheme system fallback when the user hasn't picked yet Background tones land near GitHub Dark; state pill tints rebalanced so saturated text still passes WCAG AA on dark surface. */ html[data-theme="dark"] { --bg: #0d1117; --bg-soft: #161b22; --bg-code: #22272e; --text: #e6edf3; --text-strong: #f0f6fc; --muted: #8b949e; --border: #30363d; --border-strong: #444c56; --link: #58a6ff; --ok-strong: #3fb950; --ok-soft: #122a1e; --ok-text: #7ee787; --warn-strong: #d29922; --warn-soft: #2d2410; --warn-text: #f0c674; --crit-strong: #f85149; --crit-soft: #2d1416; --crit-text: #ff8c8c; --idle-strong: #6e7681; --idle-soft: #21262d; --idle-text: #c9d1d9; --unknown-strong: #8b949e; --unknown-soft: #1c2128; --unknown-text: #c9d1d9; color-scheme: dark; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --bg: #0d1117; --bg-soft: #161b22; --bg-code: #22272e; --text: #e6edf3; --text-strong: #f0f6fc; --muted: #8b949e; --border: #30363d; --border-strong: #444c56; --link: #58a6ff; --ok-strong: #3fb950; --ok-soft: #122a1e; --ok-text: #7ee787; --warn-strong: #d29922; --warn-soft: #2d2410; --warn-text: #f0c674; --crit-strong: #f85149; --crit-soft: #2d1416; --crit-text: #ff8c8c; --idle-strong: #6e7681; --idle-soft: #21262d; --idle-text: #c9d1d9; --unknown-strong: #8b949e; --unknown-soft: #1c2128; --unknown-text: #c9d1d9; color-scheme: dark; } } * { box-sizing: border-box; } html, body { background: var(--bg-soft); color: var(--text); } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } /* Defensive: anything textual inherits --text, no UA fallback to grey */ h1, h2, h3, h4, h5, h6, p, span, div, ul, ol, li, input, select, textarea, button, option, label, a { color: inherit; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } select, input, textarea { background-color: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 5px 9px; font-family: inherit; font-size: 14px; } /* ─── Site header ──────────────────────────────────────────────────── */ .site-header { background: var(--bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; } .site-header-inner { max-width: 1320px; margin: 0 auto; padding: 16px 28px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .brand { flex: 1 1 auto; } .brand h1 { margin: 0; font-size: 22px; font-weight: 700; } .brand-sub { margin: 2px 0 0; font-size: 13px; font-weight: 400; } .site-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .env-tag { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 600; padding: 4px 9px; border: 1px solid var(--border-strong); background: var(--bg-soft); border-radius: 5px; text-transform: uppercase; letter-spacing: 0.05em; } .updated-tag { font-size: 13px; font-variant-numeric: tabular-nums; } /* Live indicator — pulsing dot + updated-tag. The dot's pulse is the user-perceptible signal that the page IS auto-refreshing, so the user stops feeling like they need to keep hitting the refresh button. */ .live-indicator { display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px; border: 1px solid var(--border); background: var(--bg-soft); border-radius: 999px; font-size: 12.5px; } .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok-strong); box-shadow: 0 0 0 0 rgba(31,136,61,0.6); animation: live-pulse 2.4s ease-out infinite; } @keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(31,136,61,0.55); } 70% { box-shadow: 0 0 0 7px rgba(31,136,61,0); } 100% { box-shadow: 0 0 0 0 rgba(31,136,61,0); } } /* During a fetch the dot turns blue (signals "fresh data just arrived"). */ .live-indicator.fetching .live-dot { background: var(--link); animation-duration: 1s; } .icon-btn { padding: 6px 10px; font-size: 15px; line-height: 1; } .theme-icon { display: inline-block; transition: transform 200ms ease; } html[data-theme="dark"] .theme-icon { transform: rotate(180deg); } .btn { background: var(--bg); border: 1px solid var(--border-strong); border-radius: 6px; color: var(--text); padding: 6px 14px; cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; line-height: 1; } .btn:hover { background: var(--bg-soft); } .btn-primary { background: #1a1a1a; color: #ffffff; border-color: #1a1a1a; } .btn-primary:hover { background: #000000; } /* ─── Hero banner — 가장 큰 시각 신호 ───────────────────────────────── */ .hero { max-width: 1320px; margin: 24px auto 0; padding: 0 28px; } .hero-inner { display: flex; align-items: center; gap: 20px; padding: 22px 28px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; border-left-width: 8px; border-left-style: solid; border-left-color: var(--idle-strong); } .hero-icon { font-size: 36px; line-height: 1; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--idle-soft); color: var(--idle-text); flex-shrink: 0; } .hero-text { flex: 1 1 auto; min-width: 0; } .hero-title { margin: 0; font-size: 20px; font-weight: 700; } .hero-subtitle { margin: 4px 0 0; font-size: 14px; } /* Incident-led hero detail — only rendered when overall is non-OK. */ .hero-incident { max-width: 1320px; margin: 12px auto 0; padding: 14px 18px 16px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; border-left-width: 6px; border-left-style: solid; } .hero-incident.state-critical { border-left-color: var(--crit-strong); background: var(--crit-soft); } .hero-incident.state-warning { border-left-color: var(--warn-strong); background: var(--warn-soft); } .hero-incident.state-unknown { border-left-color: var(--unknown-strong); background: var(--unknown-soft); } .hero-incident-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .hero-incident-label { font-size: 16px; font-weight: 700; flex: 1 1 auto; min-width: 0; } .hero-incident-diag { font-size: 13.5px; line-height: 1.5; margin-bottom: 10px; } .hero-incident-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .hero-incident-ts { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted, #57606a); } /* When the hero's "go to this card" button is clicked, briefly pulse the destination card so the user's eye lands on it. */ @keyframes incident-flash { 0% { box-shadow: 0 0 0 0 rgba(207,34,46,0.55), 0 0 0 0 rgba(207,34,46,0.45); } 50% { box-shadow: 0 0 0 6px rgba(207,34,46,0.0), 0 1px 3px rgba(0,0,0,0.06); } 100% { box-shadow: 0 0 0 0 rgba(207,34,46,0.0), 0 0 0 0 rgba(0,0,0,0); } } .card.incident-flash { animation: incident-flash 1.4s ease; border-color: var(--crit-strong); } .hero-counts { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 28px 0; } .count-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--border); padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; } .count-chip .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } /* hero state variants (driven by JS) */ .hero-inner.hero-ok { border-left-color: var(--ok-strong); } .hero-inner.hero-ok .hero-icon { background: var(--ok-soft); color: var(--ok-text); } .hero-inner.hero-warning { border-left-color: var(--warn-strong); } .hero-inner.hero-warning .hero-icon { background: var(--warn-soft); color: var(--warn-text); } .hero-inner.hero-critical { border-left-color: var(--crit-strong); } .hero-inner.hero-critical .hero-icon { background: var(--crit-soft); color: var(--crit-text); } .hero-inner.hero-unknown { border-left-color: var(--unknown-strong); } .hero-inner.hero-unknown .hero-icon { background: var(--unknown-soft); color: var(--unknown-text); } /* ─── Help modal ──────────────────────────────────────────────────── */ .modal { position: fixed; inset: 0; z-index: 100; } .modal[hidden] { display: none; } .modal-backdrop { position: absolute; inset: 0; background: rgba(15, 20, 28, 0.55); } .modal-dialog { position: relative; max-width: 880px; width: calc(100% - 32px); max-height: calc(100vh - 64px); margin: 32px auto; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.25); display: flex; flex-direction: column; overflow: hidden; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-bottom: 1px solid var(--border); background: var(--surface, #fafbfc); } .modal-header h2 { margin: 0; font-size: 17px; font-weight: 700; } .modal-close { background: transparent; border: 1px solid transparent; border-radius: 6px; width: 32px; height: 32px; cursor: pointer; font-size: 14px; color: var(--text); transition: background 120ms ease, border-color 120ms ease; } .modal-close:hover { background: var(--surface-strong, #f0f1f4); border-color: var(--border); } .modal-body { padding: 18px 24px 22px; overflow-y: auto; } body.modal-open { overflow: hidden; } .help-section { margin-bottom: 18px; } .help-section:last-child { margin-bottom: 0; } .help-section h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #57606a); } .help-section p { margin: 0 0 4px; font-size: 13.5px; line-height: 1.5; } .legend { list-style: none; padding: 0; margin: 0; } .legend li { margin-bottom: 8px; font-size: 13.5px; line-height: 1.5; } .legend.plain li { padding-left: 0; } .legend li b { font-weight: 700; } .legend li code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: var(--surface-strong, #f0f1f4); padding: 1px 5px; border-radius: 4px; } .legend .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; border: 1px solid rgba(0,0,0,0.1); } /* ─── Controls (filter / sort) ─────────────────────────────────────── */ .controls { max-width: 1320px; margin: 20px auto 0; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .filter-group { display: inline-flex; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 3px; gap: 2px; } .chip { background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text); font-family: inherit; } .chip:hover { background: var(--bg-soft); } .chip-active { background: #1a1a1a; color: #ffffff; } .chip-active:hover { background: #000000; } .sort-control { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; } .sort-control select { font-size: 13px; font-weight: 500; } /* ─── Sections ────────────────────────────────────────────────────── */ main { max-width: 1320px; margin: 0 auto; padding: 24px 28px 64px; } .signal-section { margin-bottom: 36px; } .section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; } .section-header h2 { margin: 0; font-size: 18px; font-weight: 700; } .section-count { font-size: 13px; font-weight: 600; } .section-desc { margin: 0 0 14px; font-size: 14px; max-width: 800px; } /* ─── Card grid ───────────────────────────────────────────────────── */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; } .card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px 12px 18px; position: relative; cursor: pointer; transition: box-shadow 0.12s ease, border-color 0.12s ease; } .card::before { /* The state bar — chunky, on the left edge */ content: ""; position: absolute; top: -1px; left: -1px; bottom: -1px; width: 6px; border-top-left-radius: 8px; border-bottom-left-radius: 8px; background: var(--idle-strong); } .card:hover { border-color: var(--border-strong); box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04); } .card.kbd-focus { outline: 2px solid var(--link); outline-offset: 2px; } .card-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; } .card-title { flex: 1 1 auto; font-size: 15px; font-weight: 700; line-height: 1.35; } .card-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; font-weight: 500; word-break: break-all; margin: 0 0 8px; } .card-summary { font-size: 13.5px; line-height: 1.5; margin: 0 0 10px; } .card-summary code { background: var(--bg-code); padding: 1px 5px; border-radius: 3px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; font-weight: 600; } .card-foot { display: flex; align-items: center; justify-content: space-between; font-size: 12px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border); } .card-foot .measured { font-variant-numeric: tabular-nums; } .expand-hint { font-size: 12.5px; font-weight: 700; color: var(--link); } /* state pill — pale background, strong dark text */ .state-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; text-transform: none; border: 1px solid transparent; flex-shrink: 0; } .state-pill::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; } .state-pill.state-ok { background: var(--ok-soft); color: var(--ok-text); border-color: rgba(31,136,61,0.25); } .state-pill.state-ok::before { background: var(--ok-strong); } .state-pill.state-warning { background: var(--warn-soft); color: var(--warn-text); border-color: rgba(188,140,16,0.30); } .state-pill.state-warning::before { background: var(--warn-strong); } .state-pill.state-critical { background: var(--crit-soft); color: var(--crit-text); border-color: rgba(207,34,46,0.30); } .state-pill.state-critical::before { background: var(--crit-strong); } .state-pill.state-no_traffic { background: var(--idle-soft); color: var(--idle-text); border-color: rgba(140,150,160,0.25); } .state-pill.state-no_traffic::before { background: var(--idle-strong); } .state-pill.state-unknown { background: var(--unknown-soft); color: var(--unknown-text); border-color: rgba(110,118,129,0.30); } .state-pill.state-unknown::before { background: var(--unknown-strong); } /* card pills wrapper — keeps state pill and cost badge inline */ .card-pills { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; } /* cost badge — quieter than state pill, distinguished by hue tier */ .cost-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; border: 1px solid transparent; } .cost-badge.cost-zero { background: rgba(31,136,61,0.10); color: var(--ok-text); border-color: rgba(31,136,61,0.20); } .cost-badge.cost-low { background: rgba(33,121,191,0.10); color: #1d5a90; border-color: rgba(33,121,191,0.25); } .cost-badge.cost-medium { background: rgba(188,140,16,0.10); color: var(--warn-text); border-color: rgba(188,140,16,0.25); } .cost-badge.cost-high { background: rgba(207,34,46,0.10); color: var(--crit-text); border-color: rgba(207,34,46,0.25); } /* manual probe button — sits in card foot next to "자세히" */ .probe-btn { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 4px 10px; border-radius: 6px; font-size: 11.5px; font-weight: 600; cursor: pointer; transition: background 120ms ease, border-color 120ms ease; margin-right: 8px; } .probe-btn:hover:not(:disabled) { background: var(--surface-strong, #f4f5f8); border-color: var(--link); } .probe-btn:disabled { opacity: 0.45; cursor: not-allowed; } /* probe toast — inline result strip pinned to card bottom */ .probe-toast { margin-top: 6px; padding: 6px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--idle-soft); color: var(--idle-text); transition: opacity 600ms ease; } .probe-toast-ok { background: var(--ok-soft); color: var(--ok-text); } .probe-toast-fail { background: var(--crit-soft); color: var(--crit-text); } .probe-toast-fade { opacity: 0; } /* ─── Forensic drill-down ─────────────────────────────────────────── */ .forensic-slot { font-size: 12.5px; color: var(--muted, #57606a); } .forensic-block { margin-top: 10px; } .forensic-block h5 { margin: 0 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #57606a); } .forensic-empty { margin: 0; font-size: 12.5px; color: var(--muted, #57606a); } .forensic-table { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: auto; } .forensic-table th, .forensic-table td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--border); vertical-align: top; } .forensic-table th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted, #57606a); } .forensic-table code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; background: var(--surface-strong, #f0f1f4); padding: 1px 4px; border-radius: 3px; } .forensic-table .status-ok { color: var(--ok-text); font-weight: 700; } .forensic-table .status-fail { color: var(--crit-text); font-weight: 700; } .forensic-row-fail { cursor: pointer; } .forensic-row-fail:hover { background: var(--surface-strong, #f4f5f8); } .forensic-table .forensic-row { color: var(--link); cursor: pointer; margin-right: 6px; text-decoration: underline; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .forensic-ctx { list-style: none; padding: 0; margin: 0; max-height: 320px; overflow-y: auto; } .forensic-ctx li { padding: 4px 0; border-bottom: 1px dashed var(--border); font-size: 12px; } .forensic-ctx-time { display: inline-block; width: 80px; color: var(--muted, #57606a); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; } /* ─── Per-signal detail page (hash route #/signal/{id}) ──────────── */ .signal-view { max-width: 1080px; margin: 16px auto 32px; padding: 0 28px; } .signal-view-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .signal-view-inner { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 24px 26px 26px; } .signal-view-head { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 4px 12px; align-items: center; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .signal-view-head h2 { grid-row: 1; grid-column: 1; margin: 0; font-size: 22px; font-weight: 700; } .signal-view-head .state-pill { grid-row: 1; grid-column: 2; font-size: 12.5px; padding: 4px 11px; } .signal-view-sub { grid-row: 2; grid-column: 1 / -1; font-size: 12.5px; color: var(--muted, #57606a); font-variant-numeric: tabular-nums; } .signal-view-sub code { background: var(--bg-code); padding: 1px 6px; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; } .signal-view-diag { padding: 10px 14px; border-radius: 8px; font-size: 14px; line-height: 1.5; font-weight: 600; margin-bottom: 18px; border-left: 4px solid var(--idle-strong); background: var(--idle-soft); color: var(--idle-text); } .signal-view-diag.state-warning { border-left-color: var(--warn-strong); background: var(--warn-soft); color: var(--warn-text); } .signal-view-diag.state-critical { border-left-color: var(--crit-strong); background: var(--crit-soft); color: var(--crit-text); } .signal-view-diag.state-unknown { border-left-color: var(--unknown-strong); background: var(--unknown-soft); color: var(--unknown-text); } .signal-view-strip-block { margin-bottom: 20px; } .signal-view-strip-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 12px; flex-wrap: wrap; } .signal-view-strip-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #57606a); } .signal-view-strip-tabs { display: inline-flex; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; padding: 3px; gap: 2px; } .signal-view-strip { height: 26px; border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; background: var(--bg-soft); } .signal-view-strip .uptime-strip-svg { width: 100%; height: 18px; } .signal-view-details { display: block; margin-top: 0; padding-top: 0; border-top: 0; } .signal-view-details .detail-section { margin-bottom: 18px; } /* ─── Forensic page (hash route #/forensic/{id}) ──────────────────── */ .forensic-view { max-width: 1320px; margin: 16px auto 32px; padding: 0 28px; } .forensic-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .forensic-layout { display: grid; grid-template-columns: 320px 1fr; gap: 24px; } @media (max-width: 920px) { .forensic-layout { grid-template-columns: 1fr; } } .forensic-side { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 20px; align-self: flex-start; position: sticky; top: 16px; } .forensic-side h2 { margin: 0 0 4px; font-size: 18px; font-weight: 700; } .forensic-side-id { margin: 0 0 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--muted, #57606a); } .forensic-side-pills { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; } .forensic-side-diagnosis { margin: 0 0 14px; padding: 8px 12px; border-radius: 6px; font-size: 13px; font-weight: 600; border-left: 3px solid var(--idle-strong); background: var(--idle-soft); color: var(--idle-text); } .forensic-side-diagnosis.state-warning { border-left-color: var(--warn-strong); background: var(--warn-soft); color: var(--warn-text); } .forensic-side-diagnosis.state-critical { border-left-color: var(--crit-strong); background: var(--crit-soft); color: var(--crit-text); } .forensic-side-diagnosis.state-unknown { border-left-color: var(--unknown-strong); background: var(--unknown-soft); color: var(--unknown-text); } .forensic-side-block { margin-top: 14px; } .forensic-side-block h4 { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted, #57606a); } .forensic-side-block p, .forensic-side-block ul { margin: 0; font-size: 13px; line-height: 1.5; } .forensic-side-block ul { padding-left: 18px; } .forensic-side-raw { margin-top: 16px; } .forensic-side-raw summary { cursor: pointer; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted, #57606a); } .forensic-side-raw pre { margin: 8px 0 0; padding: 8px; background: var(--surface-strong, #f4f5f8); border-radius: 6px; font-size: 11.5px; white-space: pre-wrap; word-break: break-all; max-height: 200px; overflow-y: auto; } .forensic-main { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 20px; min-width: 0; } .forensic-main .forensic-block { margin-top: 0; margin-bottom: 24px; } .forensic-main .forensic-block:last-child { margin-bottom: 0; } .forensic-main .forensic-block h5 { font-size: 13px; margin-bottom: 10px; } .forensic-main .forensic-table { font-size: 13px; } /* In-card forensic launcher (single button to open the dedicated page) */ .forensic-launcher { display: flex; flex-direction: column; gap: 4px; } .forensic-launcher .open-forensic { width: max-content; } .forensic-launcher-note { margin: 0; font-size: 12px; color: var(--muted, #57606a); } /* ─── Uptime strip ────────────────────────────────────────────────── */ .uptime-strip-label { font-size: 10.5px; font-weight: 700; color: var(--muted, #57606a); margin-top: 10px; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.05em; } .uptime-strip { height: 14px; margin-bottom: 6px; line-height: 0; } .uptime-strip-svg { display: block; width: 100%; height: 14px; } /* When the API answered 503 (history reader unconfigured) or fetch errored, hide the strip completely — it's noise, not signal. */ .uptime-strip.strip-disabled, .uptime-strip.strip-error { display: none; } .uptime-strip.strip-disabled + .uptime-strip-label, .uptime-strip-label:has(+ .uptime-strip.strip-disabled), .uptime-strip-label:has(+ .uptime-strip.strip-error) { display: none; } .strip-rect { transition: opacity 80ms ease; } .strip-rect:hover { opacity: 0.7; cursor: help; } .strip-rect.state-ok { fill: var(--ok-strong); } .strip-rect.state-warning { fill: var(--warn-strong); } .strip-rect.state-critical { fill: var(--crit-strong); } .strip-rect.state-no_traffic { fill: var(--idle-strong); } .strip-rect.state-unknown { fill: var(--unknown-strong); } .strip-rect.state-no_data { fill: var(--border); opacity: 0.5; } /* One-line diagnosis line inside each non-OK card */ .card-diagnosis { margin-top: 8px; padding: 6px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 600; border-left: 3px solid var(--idle-strong); background: var(--idle-soft); color: var(--idle-text); } .card-diagnosis.state-warning { border-left-color: var(--warn-strong); background: var(--warn-soft); color: var(--warn-text); } .card-diagnosis.state-critical { border-left-color: var(--crit-strong); background: var(--crit-soft); color: var(--crit-text); } .card-diagnosis.state-unknown { border-left-color: var(--unknown-strong); background: var(--unknown-soft); color: var(--unknown-text); } /* External failure list — used inside the forensic page for ext.* signals */ .forensic-ext-entries { list-style: none; padding: 0; margin: 0; } .forensic-ext-entry { border: 1px solid var(--border); border-radius: 6px; margin-bottom: 10px; padding: 8px 12px; background: var(--surface, #fafbfc); } .forensic-ext-head { display: flex; gap: 12px; align-items: center; font-size: 11.5px; color: var(--muted, #57606a); margin-bottom: 4px; } .forensic-ext-sev { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .forensic-ext-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .forensic-ext-body { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; white-space: pre-wrap; word-break: break-word; color: var(--text); } /* card left bar driven by state */ .card.state-ok::before { background: var(--ok-strong); } .card.state-warning::before { background: var(--warn-strong); } .card.state-critical::before { background: var(--crit-strong); } .card.state-no_traffic::before { background: var(--idle-strong); } .card.state-unknown::before { background: var(--unknown-strong); } /* ─── Expanded card ───────────────────────────────────────────────── */ .card-details { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); display: none; } .card.expanded .card-details { display: block; } /* Card click is now a hash-route navigation to #/signal/{id} — the expand-hint stays as a directional cue but no longer toggles in place. */ .detail-section { margin-bottom: 16px; } .detail-section:last-child { margin-bottom: 0; } .detail-section h4 { margin: 0 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .detail-section p { margin: 0; font-size: 13.5px; line-height: 1.55; } .detail-section ul { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.55; } .detail-section li { margin-bottom: 4px; } .detail-section code { background: var(--bg-code); padding: 1px 5px; border-radius: 3px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; } .state-callout { padding: 10px 12px; background: var(--bg-soft); border: 1px solid var(--border); border-left: 4px solid var(--idle-strong); border-radius: 6px; font-size: 14px; line-height: 1.5; } .state-callout.state-ok { border-left-color: var(--ok-strong); } .state-callout.state-warning { border-left-color: var(--warn-strong); } .state-callout.state-critical { border-left-color: var(--crit-strong); } .state-callout.state-no_traffic { border-left-color: var(--idle-strong); } .state-callout.state-unknown { border-left-color: var(--unknown-strong); } .detail-links { display: flex; flex-wrap: wrap; gap: 8px; } .detail-links a { display: inline-block; padding: 5px 10px; border: 1px solid var(--border-strong); border-radius: 6px; font-size: 12.5px; font-weight: 600; background: var(--bg); } .detail-links a:hover { background: var(--bg-soft); text-decoration: none; } .raw-toggle { font-size: 12.5px; font-weight: 600; color: var(--link); cursor: pointer; user-select: none; margin-bottom: 6px; display: inline-block; } .raw-toggle::before { content: "▸ "; } .raw-toggle.open::before { content: "▾ "; } .raw-block { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-all; max-height: 240px; overflow-y: auto; margin: 0; display: none; } .card-meta-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0 0 10px; font-size: 12.5px; } .card-meta-dl dt { font-weight: 700; color: var(--muted, #57606a); } .card-meta-dl dd { margin: 0; } .card-meta-dl code { background: var(--bg-code); padding: 1px 5px; border-radius: 3px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; } .raw-toggle.open + .raw-block { display: block; } /* ─── Empty / error ───────────────────────────────────────────────── */ .empty-grid { font-size: 13.5px; padding: 16px; background: var(--bg); border: 1px dashed var(--border-strong); border-radius: 8px; grid-column: 1 / -1; text-align: center; } .error { margin: 20px auto; max-width: 1320px; padding: 14px 20px; background: var(--crit-soft); border: 1px solid var(--crit-strong); border-radius: 8px; color: var(--crit-text); font-weight: 600; } .signal-section.hidden { display: none; } /* ─── Mobile / narrow viewport ───────────────────────────────────────── */ @media (max-width: 640px) { .site-header-inner { padding: 12px 16px; gap: 8px; } .brand h1 { font-size: 18px; } .brand-sub { display: none; } .site-actions { gap: 6px; } /* Hide explanatory chips when there's no room — env tag stays as the non-negotiable "which environment am I looking at" anchor. */ .live-indicator .updated-tag { display: none; } .live-indicator { padding: 4px 7px; } .icon-btn { padding: 6px 8px; } /* Refresh button collapses to "↻" to save horizontal space on mobile. */ #refresh { font-size: 0; padding: 6px 10px; } #refresh::before { content: "↻"; font-size: 16px; line-height: 1; } #toggle-help { font-size: 0; padding: 6px 10px; } #toggle-help::before { content: "?"; font-size: 16px; line-height: 1; font-weight: 700; } .hero-inner { padding: 16px 18px; gap: 12px; } .hero-title { font-size: 17px; } .hero-subtitle { font-size: 13px; } .hero-counts { padding: 10px 18px 0; } main { padding: 18px 16px 56px; } .controls { padding: 0 16px; } } /* ─── Incident timeline footer ───────────────────────────────────────── */ .incident-timeline { margin: 36px 0 0; padding-top: 20px; border-top: 1px solid var(--border); } .incident-timeline-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 12px; flex-wrap: wrap; } .incident-timeline-head h2 { margin: 0; font-size: 18px; font-weight: 700; } .incident-range-group { display: inline-flex; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 3px; gap: 2px; } .incident-timeline-empty { margin: 0; padding: 18px; background: var(--bg); border: 1px dashed var(--border-strong); border-radius: 8px; text-align: center; font-size: 13.5px; color: var(--muted, #57606a); } .incident-timeline-table { width: 100%; border-collapse: collapse; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; font-size: 13px; } .incident-timeline-table th { text-align: left; background: var(--bg-soft); padding: 8px 12px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted, #57606a); border-bottom: 1px solid var(--border); } .incident-timeline-table th.num, .incident-timeline-table td.num { text-align: right; font-variant-numeric: tabular-nums; } .incident-timeline-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; } .incident-timeline-table tbody tr:last-child td { border-bottom: 0; } .incident-timeline-table tbody tr { cursor: pointer; transition: background 80ms ease; } .incident-timeline-table tbody tr:hover { background: var(--bg-soft); } .incident-signal-cell { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 600; } .incident-cat-cell { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted, #57606a); } .incident-timeline-table .strong-critical { color: var(--crit-text); font-weight: 700; } .incident-timeline-table .strong-warning { color: var(--warn-text); font-weight: 700; } .incident-when-cell { color: var(--muted, #57606a); font-variant-numeric: tabular-nums; } /* ───────────────────────────────────────────────────────────────────── Partner Usage ("Pulse") — single new accent token, everything else reuses the existing palette. The engagement-blue lifts numeric KPIs without competing with the ok/warn/crit semantics on the status page; both views can coexist visually because engagement is a *gauge* (high = good engagement) while ok/warn/crit is an *alert*. ───────────────────────────────────────────────────────────────────── */ :root { --engaged-strong: #0a84ff; --engaged-soft: #e6f1ff; --engaged-text: #0353c4; } html[data-theme="dark"] { --engaged-strong: #58a6ff; --engaged-soft: #102137; --engaged-text: #79b8ff; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --engaged-strong: #58a6ff; --engaged-soft: #102137; --engaged-text: #79b8ff; } } /* Page nav (between brand and site-actions). Keeps the two views discoverable without taking visual weight from the live indicator. */ .page-nav { display: flex; gap: 4px; align-items: center; margin-left: 12px; padding: 2px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; } .page-nav-link { font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; padding: 6px 12px; border-radius: 6px; transition: background 120ms ease, color 120ms ease; } .page-nav-link:hover { color: var(--text-strong); } .page-nav-link.active { background: var(--bg); color: var(--text-strong); box-shadow: 0 1px 2px rgba(0,0,0,0.06); } /* Partner view container */ .partner-view { max-width: 1320px; margin: 0 auto; padding: 24px; display: flex; flex-direction: column; gap: 20px; } /* `display: flex` above wins over the `hidden` attribute on its own, which would leak the partner UI into the grid route. Re-instate the default `display: none` for the hidden state explicitly. */ .partner-view[hidden] { display: none; } .partner-toolbar { display: flex; align-items: center; gap: 8px; } .partner-toolbar-spacer { flex: 1; } /* Reveal toggle — pressed state lights the dot up. */ .reveal-toggle { display: inline-flex; align-items: center; gap: 8px; } .reveal-toggle .reveal-icon { font-size: 9px; color: var(--muted); transition: color 150ms ease; } .reveal-toggle[aria-pressed="true"] { border-color: var(--engaged-strong); color: var(--engaged-text); } .reveal-toggle[aria-pressed="true"] .reveal-icon { color: var(--engaged-strong); } /* Pulse hero — single 24h area chart + counts. Mirrors .hero shape (left border + padding) so the page reads as the same product. */ .pulse-hero { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(360px, 2fr); gap: 24px; align-items: center; padding: 26px 28px; background: var(--bg); border: 1px solid var(--border); border-left: 8px solid var(--engaged-strong); border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .pulse-hero-eyebrow { margin: 0 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--engaged-text); } .pulse-hero-title { margin: 0; font-size: 22px; font-weight: 700; color: var(--text-strong); } .pulse-hero-subtitle { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); } .pulse-hero-sparkline { width: 100%; height: 120px; display: block; } .pulse-hero-sparkline .area { fill: var(--engaged-soft); stroke: none; } .pulse-hero-sparkline .line { fill: none; stroke: var(--engaged-strong); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Engagement tiles — 4-up. Same card vocabulary as the status grid (left state-bar via ::before, padding 16–18px) but uses the engagement palette so the dashboard reads as a different mode. */ .engagement-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } @media (max-width: 960px) { .engagement-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pulse-hero { grid-template-columns: 1fr; } } .engagement-tile { position: relative; padding: 18px 18px 16px 22px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); overflow: hidden; } .engagement-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--engaged-strong); } .engagement-tile-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .engagement-tile-value { margin-top: 6px; font-size: 30px; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; line-height: 1.1; } .engagement-tile-sub { margin-top: 6px; font-size: 12px; color: var(--muted); } .engagement-tile-spark { margin-top: 8px; width: 100%; height: 28px; display: block; } .engagement-tile-spark .line { fill: none; stroke: var(--engaged-strong); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* Body split: screens (main) + live stream (right rail) */ .partner-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 20px; } @media (max-width: 1024px) { .partner-body { grid-template-columns: 1fr; } } .partner-section { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 20px 22px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); } .partner-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; } .partner-section-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-strong); } .partner-section-sub { font-size: 11.5px; color: var(--muted); } /* Screen list — table-like but no for flexibility */ .partner-screens { display: flex; flex-direction: column; gap: 8px; } .partner-screen-row { display: grid; grid-template-columns: minmax(140px, 1.4fr) minmax(120px, 1fr) minmax(80px, auto); align-items: center; gap: 12px; padding: 10px 12px; border-radius: 6px; transition: background 120ms ease; } .partner-screen-row:hover { background: var(--bg-soft); } .partner-screen-label { font-size: 14px; font-weight: 600; color: var(--text-strong); } .partner-screen-endpoint { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--muted); } .partner-screen-visits { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--engaged-text); text-align: right; } .partner-screen-bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--bg-soft); overflow: hidden; } .partner-screen-bar > span { display: block; height: 100%; background: var(--engaged-strong); border-radius: inherit; } /* Live activity stream — sidebar list with subtle slide-in */ .partner-stream { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 18px 18px 12px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); display: flex; flex-direction: column; gap: 12px; max-height: 560px; } .partner-stream-head { display: flex; align-items: baseline; justify-content: space-between; } .partner-stream-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-strong); } .partner-stream-sub { font-size: 11px; color: var(--muted); } .partner-stream-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; } .partner-stream-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 8px; padding: 8px 8px 8px 12px; border-left: 3px solid transparent; border-radius: 4px; transition: background 120ms ease, border-color 120ms ease; animation: stream-slide-in 220ms cubic-bezier(0.2, 0.7, 0.2, 1); } .partner-stream-row:hover { background: var(--bg-soft); border-left-color: var(--engaged-strong); } .partner-stream-row-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; font-weight: 600; color: var(--engaged-text); } .partner-stream-row-text { font-size: 13px; color: var(--text); margin-top: 2px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .partner-stream-row-time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } @keyframes stream-slide-in { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } } .partner-empty { padding: 24px; text-align: center; font-size: 13px; color: var(--muted); } /* ───────────────────────────────────────────────────────────────────── Partner Usage — Conversations sub-view. Layout: sub-tab strip in toolbar → search header → left user list + right bubble pane (iMessage-style — owner question on the right in engagement blue, bot answer on the left in neutral surface). ───────────────────────────────────────────────────────────────────── */ .partner-subtabs { display: inline-flex; gap: 2px; align-items: center; margin-left: 12px; padding: 2px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; } .partner-subtab { font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; padding: 5px 12px; border-radius: 6px; transition: background 120ms ease, color 120ms ease; } .partner-subtab:hover { color: var(--text-strong); } .partner-subtab.active { background: var(--bg); color: var(--text-strong); box-shadow: 0 1px 2px rgba(0,0,0,0.06); } .partner-subview[hidden] { display: none; } .conv-head { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 18px 20px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); } .conv-head-text { display: flex; flex-direction: column; gap: 4px; } .conv-head-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--text-strong); } .conv-head-sub { margin: 0; font-size: 12px; color: var(--muted); } .conv-search { width: 280px; font-size: 13px; padding: 8px 12px; background: var(--bg-soft); color: var(--text); border: 1px solid var(--border); border-radius: 6px; outline: none; transition: border-color 120ms ease, box-shadow 120ms ease; } .conv-search:focus { border-color: var(--engaged-strong); box-shadow: 0 0 0 3px var(--engaged-soft); } .conv-layout { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: 16px; margin-top: 16px; min-height: 520px; } @media (max-width: 1024px) { .conv-layout { grid-template-columns: 1fr; } } .conv-list { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; /* Grow to fill the viewport so big monitors show more users at once; min-height keeps short viewports readable. ~280px reserves room for the page header, partner toolbar, sub-tab strip, and search header above the layout. */ min-height: 480px; max-height: calc(100vh - 280px); overflow-y: auto; } .conv-list-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border); background: transparent; border: none; border-bottom: 1px solid var(--border); text-align: left; cursor: pointer; transition: background 120ms ease; width: 100%; font: inherit; color: inherit; } .conv-list-row:last-child { border-bottom: none; } .conv-list-row:hover { background: var(--bg-soft); } .conv-list-row.active { background: var(--engaged-soft); } .conv-list-row.active::before { content: ""; position: absolute; } .conv-list-row.active .conv-list-name { color: var(--engaged-text); } .conv-list-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--engaged-soft); color: var(--engaged-text); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; letter-spacing: 0; } .conv-list-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .conv-list-name { font-size: 13px; font-weight: 600; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conv-list-preview { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conv-list-time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .conv-stream-pane { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 18px; overflow-y: auto; /* Match .conv-list so the two panels line up. */ min-height: 480px; max-height: calc(100vh - 280px); display: flex; flex-direction: column; gap: 10px; } /* Bubble — owner question right-aligned in engagement-blue, bot answer left-aligned in neutral. token_count + timestamp under each in small caption. */ .conv-bubble-group { display: flex; flex-direction: column; gap: 6px; padding-bottom: 6px; border-bottom: 1px dashed var(--border); } .conv-bubble-group:last-child { border-bottom: none; } .conv-bubble { max-width: 70%; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .conv-bubble-user { align-self: flex-end; background: var(--engaged-strong); color: white; border-bottom-right-radius: 4px; } .conv-bubble-bot { align-self: flex-start; background: var(--bg-soft); color: var(--text); border: 1px solid var(--border); border-bottom-left-radius: 4px; } .conv-bubble-meta { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; padding: 0 4px; } .conv-bubble-meta-user { align-self: flex-end; } .conv-bubble-meta-bot { align-self: flex-start; } /* ───────────────────────────────────────────────────────────────────── Partner Usage — User Forensic sub-view. Layout: header (owner / pet / event count) → left vertical timeline + right event detail panel with the full question/answer of the selected row. Reuses forensic-view's left-side/main split idiom but styled in the engagement palette to stay inside Partner Usage. ───────────────────────────────────────────────────────────────────── */ .user-forensic-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px; background: var(--bg); border: 1px solid var(--border); border-left: 8px solid var(--engaged-strong); border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .user-forensic-eyebrow { margin: 0 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--engaged-text); } .user-forensic-title { margin: 0; font-size: 22px; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; } .user-forensic-sub { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); } .user-forensic-layout { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: 16px; margin-top: 16px; min-height: 520px; } @media (max-width: 1024px) { .user-forensic-layout { grid-template-columns: 1fr; } } .user-timeline { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 8px 0; overflow-y: auto; /* Same viewport-based height as the conversations panels. */ min-height: 480px; max-height: calc(100vh - 280px); display: flex; flex-direction: column; } .user-timeline-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 10px 14px; border-left: 3px solid transparent; background: transparent; border-top: none; border-right: none; border-bottom: none; cursor: pointer; transition: background 120ms ease, border-color 120ms ease; width: 100%; text-align: left; font: inherit; color: inherit; } .user-timeline-row:hover { background: var(--bg-soft); } .user-timeline-row.active { background: var(--engaged-soft); border-left-color: var(--engaged-strong); } .user-timeline-time { font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; } .user-timeline-row.active .user-timeline-time { color: var(--engaged-text); } .user-timeline-text { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-event-detail { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 20px 22px; overflow-y: auto; min-height: 480px; max-height: calc(100vh - 280px); display: flex; flex-direction: column; gap: 14px; } .user-event-detail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .user-event-detail-time { font-size: 13px; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; } .user-event-detail-meta { font-size: 12px; color: var(--muted); } .user-event-block { display: flex; flex-direction: column; gap: 6px; } .user-event-block-label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .user-event-block-text { font-size: 14px; line-height: 1.55; color: var(--text); background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; white-space: pre-wrap; word-break: break-word; } .user-event-block-text.user-event-block-text-question { background: var(--engaged-soft); border-color: transparent; color: var(--engaged-text); } /* Subtle "→ 자세히" hint on Live Stream rows so users discover that the row is clickable and lands on the user forensic timeline. */ .partner-stream-row { cursor: pointer; } .partner-stream-row::after { content: "→"; margin-left: 6px; font-size: 11px; color: transparent; transition: color 120ms ease; } .partner-stream-row:hover::after { color: var(--engaged-strong); } /* ── Devices / Usage view ─────────────────────────────────────────── */ .devices-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 16px; align-items: start; } @media (max-width: 1100px) { .devices-layout { grid-template-columns: minmax(0, 1fr); } } .devices-table-panel, .devices-hourly-panel { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; } .devices-table { margin-top: 8px; font-size: 13px; } .devices-row { display: grid; grid-template-columns: 92px 116px minmax(60px, 1fr) minmax(56px, 0.8fr) minmax(60px, 1fr) 64px 88px; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 7px; border-bottom: 1px solid var(--border); } .devices-row-head { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border-strong); } .devices-row[data-pet-id] { cursor: pointer; } .devices-row[data-pet-id]:hover { background: var(--bg); } .devices-row.selected { background: var(--bg-code); outline: 1px solid var(--link); } .devices-state { display: inline-flex; align-items: center; gap: 6px; } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: 0 0 auto; } .status-dot.online { background: var(--ok-strong); box-shadow: 0 0 0 2px var(--ok-soft); } .status-dot.offline { background: var(--muted); } .devices-wid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--text-strong); } .devices-batt { text-align: right; font-variant-numeric: tabular-nums; } .devices-batt.low { color: var(--crit-strong); font-weight: 600; } .devices-seen { color: var(--muted); font-variant-numeric: tabular-nums; } .devices-unreg { color: var(--muted); font-style: italic; } .devices-metric-tabs { display: flex; gap: 6px; margin: 8px 0 12px; } .devices-metric-btn.active { background: var(--link); color: #fff; border-color: var(--link); } .devices-hourly-chart { width: 100%; height: 200px; display: block; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; } .devices-hourly-bar { fill: var(--link); } .devices-hourly-label { fill: var(--muted); font-size: 9px; } /* ── Devices: broker health tiles + live MQTT log ─────────────────── */ .devices-broker { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } .devices-broker-tile { flex: 1 1 120px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; } .devices-broker-val { font-size: 20px; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; } .devices-broker-label { font-size: 11px; color: var(--muted); } .devices-broker-tile.ok .devices-broker-val { color: var(--ok-strong); } .devices-broker-tile.crit .devices-broker-val { color: var(--crit-strong); } .devices-log-panel { margin-top: 16px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; } .devices-log { list-style: none; margin: 8px 0 0; padding: 0; max-height: 360px; overflow-y: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; } .devices-log-row { display: grid; grid-template-columns: 84px minmax(140px, 280px) 1fr; gap: 10px; padding: 3px 6px; border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; } .devices-log-row:hover { background: var(--bg); } .devices-log-time { color: var(--muted); font-variant-numeric: tabular-nums; } .devices-log-topic { color: var(--link); text-overflow: ellipsis; overflow: hidden; } .devices-log-payload { color: var(--text); text-overflow: ellipsis; overflow: hidden; }