From fb145d642509b38ada162e29f7a2eba43fd8a40b Mon Sep 17 00:00:00 2001 From: OoO Date: Tue, 12 May 2026 23:02:02 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B0=8D=E9=BD=8A=20AI=20=E8=A7=80=E6=B8=AC?= =?UTF-8?q?=E5=8F=B0=20V3=20=E8=A6=96=E8=A6=BA=E8=A6=8F=E7=AF=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- static/css/observability-system.css | 454 ++++++++++++++++++++++++ web/static/css/observability-system.css | 454 ++++++++++++++++++++++++ 2 files changed, 908 insertions(+) diff --git a/static/css/observability-system.css b/static/css/observability-system.css index a83b4aa..969409f 100644 --- a/static/css/observability-system.css +++ b/static/css/observability-system.css @@ -1306,3 +1306,457 @@ padding: 0.78rem !important; } } + +/* v3.2 strict alignment: keep all AI observability pages on the production + * design spec even when older inline template CSS appears later in the DOM. + */ +.momo-observability-mode { + --obs-ink: var(--momo-text-primary, #2a2520); + --obs-muted: var(--momo-text-secondary, #6b6155); + --obs-paper: var(--momo-bg-surface, #faf6ec); + --obs-card: var(--momo-bg-elevated, #fdfaf2); + --obs-accent: var(--momo-page-accent, var(--momo-warm-saffron, #b8792f)); + --obs-accent-soft: var(--momo-page-accent-soft, rgba(184, 121, 47, 0.13)); + --obs-line: var(--momo-border, rgba(42, 37, 32, 0.16)); + --obs-green: var(--momo-success, #5a7a3f); + --obs-amber: var(--momo-warning, #b8792f); + --obs-red: var(--momo-danger, #a84428); + --obs-blue: var(--momo-info, #4a6b85); + --obs-radius-lg: 8px; + --obs-radius-md: 8px; + --obs-shadow: var(--momo-shadow-soft, 0 2px 6px rgba(42, 37, 32, 0.06)); + --obs-title-size: 1.8rem; + --obs-value-size: 1.85rem; + --obs-surface-warm: var(--momo-bg-paper, #f5efe2); + --obs-surface-glass: var(--momo-bg-elevated, #fdfaf2); +} + +.momo-observability-mode .momo-content { + background-color: var(--momo-bg-body, #f0ebe1) !important; + background-image: var(--obs-dot) !important; + background-size: 18px 18px !important; + color: var(--obs-ink); + font-family: var(--momo-font-family, "Inter", "Noto Sans TC", system-ui, sans-serif) !important; + overflow-x: clip; +} + +.momo-observability-mode .momo-content::before, +.momo-observability-mode .obs-hero::after, +.momo-observability-mode .agent-hero::after, +.momo-observability-mode .biz-command::after, +.momo-observability-mode .runtime-hero::after, +.momo-observability-mode .calls-hero::after, +.momo-observability-mode .gov-hero::after, +.momo-observability-mode .gate-hero::after, +.momo-observability-mode .rag-hero::after, +.momo-observability-mode .qa-hero::after, +.momo-observability-mode .quality-hero::after, +.momo-observability-mode .ppt-hero::after, +.momo-observability-mode .obs-panel::after, +.momo-observability-mode .agent-panel::after, +.momo-observability-mode .biz-panel::after, +.momo-observability-mode .runtime-panel::after, +.momo-observability-mode .calls-panel::after, +.momo-observability-mode .gov-panel::after, +.momo-observability-mode .gate-panel::after, +.momo-observability-mode .rag-panel::after, +.momo-observability-mode .qa-panel::after, +.momo-observability-mode .quality-panel::after, +.momo-observability-mode .ppt-panel::after { + display: none !important; +} + +.momo-observability-mode .container-fluid > h2:first-child, +.momo-observability-mode .obs-hero, +.momo-observability-mode .agent-hero, +.momo-observability-mode .biz-command, +.momo-observability-mode .runtime-hero, +.momo-observability-mode .calls-hero, +.momo-observability-mode .gov-hero, +.momo-observability-mode .gate-hero, +.momo-observability-mode .rag-hero, +.momo-observability-mode .qa-hero, +.momo-observability-mode .quality-hero, +.momo-observability-mode .ppt-hero { + border: 1px solid var(--obs-line) !important; + border-radius: 8px !important; + background-color: var(--momo-bg-surface, #faf6ec) !important; + background-image: var(--obs-dot) !important; + background-size: 16px 16px !important; + box-shadow: var(--obs-shadow) !important; + color: var(--obs-ink) !important; + padding: 1rem 1.2rem !important; +} + +.momo-observability-mode .card, +.momo-observability-mode .obs-signal, +.momo-observability-mode .agent-signal, +.momo-observability-mode .biz-signal, +.momo-observability-mode .runtime-signal, +.momo-observability-mode .calls-signal, +.momo-observability-mode .gov-signal, +.momo-observability-mode .gate-signal, +.momo-observability-mode .rag-signal, +.momo-observability-mode .qa-signal, +.momo-observability-mode .quality-signal, +.momo-observability-mode .ppt-signal, +.momo-observability-mode .obs-panel, +.momo-observability-mode .agent-panel, +.momo-observability-mode .biz-panel, +.momo-observability-mode .runtime-panel, +.momo-observability-mode .calls-panel, +.momo-observability-mode .gov-panel, +.momo-observability-mode .gate-panel, +.momo-observability-mode .rag-panel, +.momo-observability-mode .qa-panel, +.momo-observability-mode .quality-panel, +.momo-observability-mode .ppt-panel, +.momo-observability-mode .obs-table-shell, +.momo-observability-mode .agent-table-shell, +.momo-observability-mode .biz-table-shell, +.momo-observability-mode .runtime-table-shell, +.momo-observability-mode .calls-table-shell, +.momo-observability-mode .gov-table-shell, +.momo-observability-mode .gate-table-shell, +.momo-observability-mode .rag-table-shell, +.momo-observability-mode .qa-table-shell, +.momo-observability-mode .quality-table-shell, +.momo-observability-mode .ppt-table-shell, +.momo-observability-mode .agent-card, +.momo-observability-mode .caller-card, +.momo-observability-mode .rec-card, +.momo-observability-mode .fix-card, +.momo-observability-mode .root-card, +.momo-observability-mode .episode-card, +.momo-observability-mode .biz-decision-card, +.momo-observability-mode .obs-route-card, +.momo-observability-mode [class$="-mini"], +.momo-observability-mode .strategy-card, +.momo-observability-mode .episode-text, +.momo-observability-mode .similar-box, +.momo-observability-mode .host-lane, +.momo-observability-mode .list-group-item, +.momo-observability-mode .dropdown-menu, +.momo-observability-mode .modal-content, +.momo-observability-mode .alert, +.momo-observability-mode .obs-chart-frame, +.momo-observability-mode .chart-frame, +.momo-observability-mode .chart-container, +.momo-observability-mode .obs-modal-preview, +.momo-observability-mode .table-responsive { + border-color: var(--obs-line) !important; + border-radius: 8px !important; + background-color: var(--obs-card) !important; + background-image: none !important; + box-shadow: var(--obs-shadow) !important; + backdrop-filter: none !important; +} + +.momo-observability-mode .obs-table-shell, +.momo-observability-mode .agent-table-shell, +.momo-observability-mode .biz-table-shell, +.momo-observability-mode .runtime-table-shell, +.momo-observability-mode .calls-table-shell, +.momo-observability-mode .gov-table-shell, +.momo-observability-mode .gate-table-shell, +.momo-observability-mode .rag-table-shell, +.momo-observability-mode .qa-table-shell, +.momo-observability-mode .quality-table-shell, +.momo-observability-mode .ppt-table-shell, +.momo-observability-mode .obs-chart-frame, +.momo-observability-mode .chart-frame, +.momo-observability-mode .chart-container, +.momo-observability-mode .obs-modal-preview { + background-color: var(--momo-bg-surface, #faf6ec) !important; + background-image: var(--obs-dot) !important; + background-size: 14px 14px !important; +} + +.momo-observability-mode h1, +.momo-observability-mode h2, +.momo-observability-mode h3, +.momo-observability-mode h4, +.momo-observability-mode h5, +.momo-observability-mode h6, +.momo-observability-mode .obs-title, +.momo-observability-mode .agent-title, +.momo-observability-mode .biz-command h1, +.momo-observability-mode .runtime-title, +.momo-observability-mode .calls-title, +.momo-observability-mode .gov-title, +.momo-observability-mode .gate-title, +.momo-observability-mode .rag-title, +.momo-observability-mode .qa-title, +.momo-observability-mode .quality-title, +.momo-observability-mode .ppt-title { + color: var(--obs-ink) !important; + font-family: var(--momo-font-display, "Inter", "Noto Sans TC", system-ui, sans-serif) !important; + letter-spacing: 0 !important; + text-wrap: pretty; +} + +.momo-observability-mode .obs-title, +.momo-observability-mode .agent-title, +.momo-observability-mode .biz-command h1, +.momo-observability-mode .runtime-title, +.momo-observability-mode .calls-title, +.momo-observability-mode .gov-title, +.momo-observability-mode .gate-title, +.momo-observability-mode .rag-title, +.momo-observability-mode .qa-title, +.momo-observability-mode .quality-title, +.momo-observability-mode .ppt-title { + font-size: var(--obs-title-size) !important; + font-weight: 800 !important; + line-height: 1.2 !important; + max-width: 820px; +} + +.momo-observability-mode .obs-signal-value, +.momo-observability-mode .obs-value, +.momo-observability-mode .agent-value, +.momo-observability-mode .biz-value, +.momo-observability-mode .biz-signal .value, +.momo-observability-mode .runtime-value, +.momo-observability-mode .calls-value, +.momo-observability-mode .gov-value, +.momo-observability-mode .gate-value, +.momo-observability-mode .rag-value, +.momo-observability-mode .qa-value, +.momo-observability-mode .quality-value, +.momo-observability-mode .ppt-value, +.momo-observability-mode .display-4, +.momo-observability-mode .display-5, +.momo-observability-mode .h1, +.momo-observability-mode [class$="-mini"] strong { + font-family: var(--momo-font-mono, "JetBrains Mono", ui-monospace, monospace) !important; + font-size: var(--obs-value-size) !important; + font-weight: 800 !important; + letter-spacing: 0 !important; + line-height: 1.12 !important; + font-variant-numeric: tabular-nums; +} + +.momo-observability-mode .obs-kicker, +.momo-observability-mode .agent-kicker, +.momo-observability-mode .biz-kicker, +.momo-observability-mode .runtime-kicker, +.momo-observability-mode .calls-kicker, +.momo-observability-mode .gov-kicker, +.momo-observability-mode .gate-kicker, +.momo-observability-mode .rag-kicker, +.momo-observability-mode .qa-kicker, +.momo-observability-mode .quality-kicker, +.momo-observability-mode .ppt-kicker, +.momo-observability-mode [class$="-label"], +.momo-observability-mode .obs-signal-label, +.momo-observability-mode .obs-section-eyebrow, +.momo-observability-mode .obs-route-code { + color: color-mix(in srgb, var(--obs-accent) 72%, var(--obs-muted)) !important; + font-family: var(--momo-font-family, "Inter", "Noto Sans TC", system-ui, sans-serif) !important; + font-size: 0.78rem !important; + font-weight: 700 !important; + letter-spacing: 0.06em !important; + text-transform: uppercase; +} + +.momo-observability-mode .obs-subtitle, +.momo-observability-mode .agent-subtitle, +.momo-observability-mode .biz-command p, +.momo-observability-mode .runtime-subtitle, +.momo-observability-mode .calls-subtitle, +.momo-observability-mode .gov-subtitle, +.momo-observability-mode .gate-subtitle, +.momo-observability-mode .rag-subtitle, +.momo-observability-mode .qa-subtitle, +.momo-observability-mode .quality-subtitle, +.momo-observability-mode .ppt-subtitle, +.momo-observability-mode .obs-signal-note, +.momo-observability-mode .qa-note, +.momo-observability-mode .text-muted { + color: var(--obs-muted) !important; + font-size: 0.92rem !important; + line-height: 1.55 !important; + letter-spacing: 0 !important; +} + +.momo-observability-mode .obs-panel-title, +.momo-observability-mode .agent-panel-title, +.momo-observability-mode .biz-panel-title, +.momo-observability-mode .biz-panel-head h3, +.momo-observability-mode .runtime-panel-title, +.momo-observability-mode .calls-panel-title, +.momo-observability-mode .gov-panel-title, +.momo-observability-mode .gate-panel-title, +.momo-observability-mode .rag-panel-title, +.momo-observability-mode .qa-panel-title, +.momo-observability-mode .quality-panel-title, +.momo-observability-mode .ppt-panel-title, +.momo-observability-mode [class$="-table-title"] h3, +.momo-observability-mode .card-title { + font-size: 1rem !important; + font-weight: 700 !important; + letter-spacing: 0 !important; + line-height: 1.4 !important; +} + +.momo-observability-mode .obs-command-strip, +.momo-observability-mode .agent-command, +.momo-observability-mode .biz-signal-grid, +.momo-observability-mode .runtime-command, +.momo-observability-mode .calls-command, +.momo-observability-mode .gov-command, +.momo-observability-mode .gate-command, +.momo-observability-mode .rag-command, +.momo-observability-mode .qa-command, +.momo-observability-mode .quality-command, +.momo-observability-mode .ppt-command { + display: grid !important; + grid-template-columns: repeat(4, minmax(0, 1fr)) !important; + gap: 0.75rem !important; +} + +.momo-observability-mode .obs-grid, +.momo-observability-mode .agent-grid, +.momo-observability-mode .biz-layout, +.momo-observability-mode .runtime-grid, +.momo-observability-mode .runtime-main, +.momo-observability-mode .calls-grid, +.momo-observability-mode .gov-grid, +.momo-observability-mode .gate-grid, +.momo-observability-mode .rag-grid, +.momo-observability-mode .qa-grid, +.momo-observability-mode .quality-grid, +.momo-observability-mode .ppt-grid { + display: grid !important; + gap: 1rem !important; +} + +.momo-observability-mode .btn, +.momo-observability-mode .form-control, +.momo-observability-mode .form-select { + border-radius: 8px !important; + font-family: var(--momo-font-family, "Inter", "Noto Sans TC", system-ui, sans-serif) !important; + letter-spacing: 0 !important; +} + +.momo-observability-mode .btn-primary, +.momo-observability-mode .btn-warning, +.momo-observability-mode .btn-danger, +.momo-observability-mode .btn-success, +.momo-observability-mode .progress-bar, +.momo-observability-mode .agent-meter span, +.momo-observability-mode .caller-meter span { + background-color: var(--obs-accent) !important; + background-image: none !important; + color: var(--momo-page-inverse, #fff8ef) !important; +} + +.momo-observability-mode .btn-outline-primary, +.momo-observability-mode .btn-outline-secondary, +.momo-observability-mode .btn-outline-info, +.momo-observability-mode .btn-outline-warning, +.momo-observability-mode .btn-outline-danger, +.momo-observability-mode .btn-outline-success { + background-color: var(--momo-bg-surface, #faf6ec) !important; + background-image: none !important; + border-color: var(--obs-line) !important; + color: var(--obs-ink) !important; +} + +.momo-observability-mode .table thead th, +.momo-observability-mode table thead th { + background-color: var(--momo-bg-paper, #f5efe2) !important; + color: var(--obs-muted) !important; + font-family: var(--momo-font-mono, "JetBrains Mono", ui-monospace, monospace) !important; + font-size: 0.82rem !important; + font-weight: 700 !important; + letter-spacing: 0.05em !important; +} + +.momo-observability-mode .table tbody td, +.momo-observability-mode table tbody td { + background-color: var(--momo-bg-elevated, #fdfaf2) !important; + color: var(--obs-ink) !important; +} + +.momo-observability-mode .table tbody tr:hover td, +.momo-observability-mode table tbody tr:hover td { + background-color: color-mix(in srgb, var(--obs-accent) 7%, var(--momo-bg-elevated, #fdfaf2)) !important; +} + +@media (max-width: 1180px) { + .momo-observability-mode .obs-command-strip, + .momo-observability-mode .agent-command, + .momo-observability-mode .biz-signal-grid, + .momo-observability-mode .runtime-command, + .momo-observability-mode .calls-command, + .momo-observability-mode .gov-command, + .momo-observability-mode .gate-command, + .momo-observability-mode .rag-command, + .momo-observability-mode .qa-command, + .momo-observability-mode .quality-command, + .momo-observability-mode .ppt-command, + .momo-observability-mode [class$="-mini-grid"] { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + } + + .momo-observability-mode .obs-grid, + .momo-observability-mode .agent-grid, + .momo-observability-mode .biz-layout, + .momo-observability-mode .biz-hero, + .momo-observability-mode .runtime-grid, + .momo-observability-mode .runtime-main, + .momo-observability-mode .calls-grid, + .momo-observability-mode .gov-grid, + .momo-observability-mode .gate-grid, + .momo-observability-mode .rag-grid, + .momo-observability-mode .qa-grid, + .momo-observability-mode .quality-grid, + .momo-observability-mode .ppt-grid { + grid-template-columns: 1fr !important; + } +} + +@media (max-width: 560px) { + .momo-observability-mode { + --obs-title-size: 1.55rem; + --obs-value-size: 1.35rem; + } + + .momo-observability-mode .container-fluid, + .momo-observability-mode .momo-content { + padding-left: 0.75rem !important; + padding-right: 0.75rem !important; + } + + .momo-observability-mode .container-fluid > h2:first-child, + .momo-observability-mode .obs-hero, + .momo-observability-mode .agent-hero, + .momo-observability-mode .biz-command, + .momo-observability-mode .runtime-hero, + .momo-observability-mode .calls-hero, + .momo-observability-mode .gov-hero, + .momo-observability-mode .gate-hero, + .momo-observability-mode .rag-hero, + .momo-observability-mode .qa-hero, + .momo-observability-mode .quality-hero, + .momo-observability-mode .ppt-hero { + padding: 0.9rem !important; + } + + .momo-observability-mode .obs-command-strip, + .momo-observability-mode .agent-command, + .momo-observability-mode .biz-signal-grid, + .momo-observability-mode .runtime-command, + .momo-observability-mode .calls-command, + .momo-observability-mode .gov-command, + .momo-observability-mode .gate-command, + .momo-observability-mode .rag-command, + .momo-observability-mode .qa-command, + .momo-observability-mode .quality-command, + .momo-observability-mode .ppt-command, + .momo-observability-mode [class$="-mini-grid"] { + grid-template-columns: 1fr !important; + } +} diff --git a/web/static/css/observability-system.css b/web/static/css/observability-system.css index a83b4aa..969409f 100644 --- a/web/static/css/observability-system.css +++ b/web/static/css/observability-system.css @@ -1306,3 +1306,457 @@ padding: 0.78rem !important; } } + +/* v3.2 strict alignment: keep all AI observability pages on the production + * design spec even when older inline template CSS appears later in the DOM. + */ +.momo-observability-mode { + --obs-ink: var(--momo-text-primary, #2a2520); + --obs-muted: var(--momo-text-secondary, #6b6155); + --obs-paper: var(--momo-bg-surface, #faf6ec); + --obs-card: var(--momo-bg-elevated, #fdfaf2); + --obs-accent: var(--momo-page-accent, var(--momo-warm-saffron, #b8792f)); + --obs-accent-soft: var(--momo-page-accent-soft, rgba(184, 121, 47, 0.13)); + --obs-line: var(--momo-border, rgba(42, 37, 32, 0.16)); + --obs-green: var(--momo-success, #5a7a3f); + --obs-amber: var(--momo-warning, #b8792f); + --obs-red: var(--momo-danger, #a84428); + --obs-blue: var(--momo-info, #4a6b85); + --obs-radius-lg: 8px; + --obs-radius-md: 8px; + --obs-shadow: var(--momo-shadow-soft, 0 2px 6px rgba(42, 37, 32, 0.06)); + --obs-title-size: 1.8rem; + --obs-value-size: 1.85rem; + --obs-surface-warm: var(--momo-bg-paper, #f5efe2); + --obs-surface-glass: var(--momo-bg-elevated, #fdfaf2); +} + +.momo-observability-mode .momo-content { + background-color: var(--momo-bg-body, #f0ebe1) !important; + background-image: var(--obs-dot) !important; + background-size: 18px 18px !important; + color: var(--obs-ink); + font-family: var(--momo-font-family, "Inter", "Noto Sans TC", system-ui, sans-serif) !important; + overflow-x: clip; +} + +.momo-observability-mode .momo-content::before, +.momo-observability-mode .obs-hero::after, +.momo-observability-mode .agent-hero::after, +.momo-observability-mode .biz-command::after, +.momo-observability-mode .runtime-hero::after, +.momo-observability-mode .calls-hero::after, +.momo-observability-mode .gov-hero::after, +.momo-observability-mode .gate-hero::after, +.momo-observability-mode .rag-hero::after, +.momo-observability-mode .qa-hero::after, +.momo-observability-mode .quality-hero::after, +.momo-observability-mode .ppt-hero::after, +.momo-observability-mode .obs-panel::after, +.momo-observability-mode .agent-panel::after, +.momo-observability-mode .biz-panel::after, +.momo-observability-mode .runtime-panel::after, +.momo-observability-mode .calls-panel::after, +.momo-observability-mode .gov-panel::after, +.momo-observability-mode .gate-panel::after, +.momo-observability-mode .rag-panel::after, +.momo-observability-mode .qa-panel::after, +.momo-observability-mode .quality-panel::after, +.momo-observability-mode .ppt-panel::after { + display: none !important; +} + +.momo-observability-mode .container-fluid > h2:first-child, +.momo-observability-mode .obs-hero, +.momo-observability-mode .agent-hero, +.momo-observability-mode .biz-command, +.momo-observability-mode .runtime-hero, +.momo-observability-mode .calls-hero, +.momo-observability-mode .gov-hero, +.momo-observability-mode .gate-hero, +.momo-observability-mode .rag-hero, +.momo-observability-mode .qa-hero, +.momo-observability-mode .quality-hero, +.momo-observability-mode .ppt-hero { + border: 1px solid var(--obs-line) !important; + border-radius: 8px !important; + background-color: var(--momo-bg-surface, #faf6ec) !important; + background-image: var(--obs-dot) !important; + background-size: 16px 16px !important; + box-shadow: var(--obs-shadow) !important; + color: var(--obs-ink) !important; + padding: 1rem 1.2rem !important; +} + +.momo-observability-mode .card, +.momo-observability-mode .obs-signal, +.momo-observability-mode .agent-signal, +.momo-observability-mode .biz-signal, +.momo-observability-mode .runtime-signal, +.momo-observability-mode .calls-signal, +.momo-observability-mode .gov-signal, +.momo-observability-mode .gate-signal, +.momo-observability-mode .rag-signal, +.momo-observability-mode .qa-signal, +.momo-observability-mode .quality-signal, +.momo-observability-mode .ppt-signal, +.momo-observability-mode .obs-panel, +.momo-observability-mode .agent-panel, +.momo-observability-mode .biz-panel, +.momo-observability-mode .runtime-panel, +.momo-observability-mode .calls-panel, +.momo-observability-mode .gov-panel, +.momo-observability-mode .gate-panel, +.momo-observability-mode .rag-panel, +.momo-observability-mode .qa-panel, +.momo-observability-mode .quality-panel, +.momo-observability-mode .ppt-panel, +.momo-observability-mode .obs-table-shell, +.momo-observability-mode .agent-table-shell, +.momo-observability-mode .biz-table-shell, +.momo-observability-mode .runtime-table-shell, +.momo-observability-mode .calls-table-shell, +.momo-observability-mode .gov-table-shell, +.momo-observability-mode .gate-table-shell, +.momo-observability-mode .rag-table-shell, +.momo-observability-mode .qa-table-shell, +.momo-observability-mode .quality-table-shell, +.momo-observability-mode .ppt-table-shell, +.momo-observability-mode .agent-card, +.momo-observability-mode .caller-card, +.momo-observability-mode .rec-card, +.momo-observability-mode .fix-card, +.momo-observability-mode .root-card, +.momo-observability-mode .episode-card, +.momo-observability-mode .biz-decision-card, +.momo-observability-mode .obs-route-card, +.momo-observability-mode [class$="-mini"], +.momo-observability-mode .strategy-card, +.momo-observability-mode .episode-text, +.momo-observability-mode .similar-box, +.momo-observability-mode .host-lane, +.momo-observability-mode .list-group-item, +.momo-observability-mode .dropdown-menu, +.momo-observability-mode .modal-content, +.momo-observability-mode .alert, +.momo-observability-mode .obs-chart-frame, +.momo-observability-mode .chart-frame, +.momo-observability-mode .chart-container, +.momo-observability-mode .obs-modal-preview, +.momo-observability-mode .table-responsive { + border-color: var(--obs-line) !important; + border-radius: 8px !important; + background-color: var(--obs-card) !important; + background-image: none !important; + box-shadow: var(--obs-shadow) !important; + backdrop-filter: none !important; +} + +.momo-observability-mode .obs-table-shell, +.momo-observability-mode .agent-table-shell, +.momo-observability-mode .biz-table-shell, +.momo-observability-mode .runtime-table-shell, +.momo-observability-mode .calls-table-shell, +.momo-observability-mode .gov-table-shell, +.momo-observability-mode .gate-table-shell, +.momo-observability-mode .rag-table-shell, +.momo-observability-mode .qa-table-shell, +.momo-observability-mode .quality-table-shell, +.momo-observability-mode .ppt-table-shell, +.momo-observability-mode .obs-chart-frame, +.momo-observability-mode .chart-frame, +.momo-observability-mode .chart-container, +.momo-observability-mode .obs-modal-preview { + background-color: var(--momo-bg-surface, #faf6ec) !important; + background-image: var(--obs-dot) !important; + background-size: 14px 14px !important; +} + +.momo-observability-mode h1, +.momo-observability-mode h2, +.momo-observability-mode h3, +.momo-observability-mode h4, +.momo-observability-mode h5, +.momo-observability-mode h6, +.momo-observability-mode .obs-title, +.momo-observability-mode .agent-title, +.momo-observability-mode .biz-command h1, +.momo-observability-mode .runtime-title, +.momo-observability-mode .calls-title, +.momo-observability-mode .gov-title, +.momo-observability-mode .gate-title, +.momo-observability-mode .rag-title, +.momo-observability-mode .qa-title, +.momo-observability-mode .quality-title, +.momo-observability-mode .ppt-title { + color: var(--obs-ink) !important; + font-family: var(--momo-font-display, "Inter", "Noto Sans TC", system-ui, sans-serif) !important; + letter-spacing: 0 !important; + text-wrap: pretty; +} + +.momo-observability-mode .obs-title, +.momo-observability-mode .agent-title, +.momo-observability-mode .biz-command h1, +.momo-observability-mode .runtime-title, +.momo-observability-mode .calls-title, +.momo-observability-mode .gov-title, +.momo-observability-mode .gate-title, +.momo-observability-mode .rag-title, +.momo-observability-mode .qa-title, +.momo-observability-mode .quality-title, +.momo-observability-mode .ppt-title { + font-size: var(--obs-title-size) !important; + font-weight: 800 !important; + line-height: 1.2 !important; + max-width: 820px; +} + +.momo-observability-mode .obs-signal-value, +.momo-observability-mode .obs-value, +.momo-observability-mode .agent-value, +.momo-observability-mode .biz-value, +.momo-observability-mode .biz-signal .value, +.momo-observability-mode .runtime-value, +.momo-observability-mode .calls-value, +.momo-observability-mode .gov-value, +.momo-observability-mode .gate-value, +.momo-observability-mode .rag-value, +.momo-observability-mode .qa-value, +.momo-observability-mode .quality-value, +.momo-observability-mode .ppt-value, +.momo-observability-mode .display-4, +.momo-observability-mode .display-5, +.momo-observability-mode .h1, +.momo-observability-mode [class$="-mini"] strong { + font-family: var(--momo-font-mono, "JetBrains Mono", ui-monospace, monospace) !important; + font-size: var(--obs-value-size) !important; + font-weight: 800 !important; + letter-spacing: 0 !important; + line-height: 1.12 !important; + font-variant-numeric: tabular-nums; +} + +.momo-observability-mode .obs-kicker, +.momo-observability-mode .agent-kicker, +.momo-observability-mode .biz-kicker, +.momo-observability-mode .runtime-kicker, +.momo-observability-mode .calls-kicker, +.momo-observability-mode .gov-kicker, +.momo-observability-mode .gate-kicker, +.momo-observability-mode .rag-kicker, +.momo-observability-mode .qa-kicker, +.momo-observability-mode .quality-kicker, +.momo-observability-mode .ppt-kicker, +.momo-observability-mode [class$="-label"], +.momo-observability-mode .obs-signal-label, +.momo-observability-mode .obs-section-eyebrow, +.momo-observability-mode .obs-route-code { + color: color-mix(in srgb, var(--obs-accent) 72%, var(--obs-muted)) !important; + font-family: var(--momo-font-family, "Inter", "Noto Sans TC", system-ui, sans-serif) !important; + font-size: 0.78rem !important; + font-weight: 700 !important; + letter-spacing: 0.06em !important; + text-transform: uppercase; +} + +.momo-observability-mode .obs-subtitle, +.momo-observability-mode .agent-subtitle, +.momo-observability-mode .biz-command p, +.momo-observability-mode .runtime-subtitle, +.momo-observability-mode .calls-subtitle, +.momo-observability-mode .gov-subtitle, +.momo-observability-mode .gate-subtitle, +.momo-observability-mode .rag-subtitle, +.momo-observability-mode .qa-subtitle, +.momo-observability-mode .quality-subtitle, +.momo-observability-mode .ppt-subtitle, +.momo-observability-mode .obs-signal-note, +.momo-observability-mode .qa-note, +.momo-observability-mode .text-muted { + color: var(--obs-muted) !important; + font-size: 0.92rem !important; + line-height: 1.55 !important; + letter-spacing: 0 !important; +} + +.momo-observability-mode .obs-panel-title, +.momo-observability-mode .agent-panel-title, +.momo-observability-mode .biz-panel-title, +.momo-observability-mode .biz-panel-head h3, +.momo-observability-mode .runtime-panel-title, +.momo-observability-mode .calls-panel-title, +.momo-observability-mode .gov-panel-title, +.momo-observability-mode .gate-panel-title, +.momo-observability-mode .rag-panel-title, +.momo-observability-mode .qa-panel-title, +.momo-observability-mode .quality-panel-title, +.momo-observability-mode .ppt-panel-title, +.momo-observability-mode [class$="-table-title"] h3, +.momo-observability-mode .card-title { + font-size: 1rem !important; + font-weight: 700 !important; + letter-spacing: 0 !important; + line-height: 1.4 !important; +} + +.momo-observability-mode .obs-command-strip, +.momo-observability-mode .agent-command, +.momo-observability-mode .biz-signal-grid, +.momo-observability-mode .runtime-command, +.momo-observability-mode .calls-command, +.momo-observability-mode .gov-command, +.momo-observability-mode .gate-command, +.momo-observability-mode .rag-command, +.momo-observability-mode .qa-command, +.momo-observability-mode .quality-command, +.momo-observability-mode .ppt-command { + display: grid !important; + grid-template-columns: repeat(4, minmax(0, 1fr)) !important; + gap: 0.75rem !important; +} + +.momo-observability-mode .obs-grid, +.momo-observability-mode .agent-grid, +.momo-observability-mode .biz-layout, +.momo-observability-mode .runtime-grid, +.momo-observability-mode .runtime-main, +.momo-observability-mode .calls-grid, +.momo-observability-mode .gov-grid, +.momo-observability-mode .gate-grid, +.momo-observability-mode .rag-grid, +.momo-observability-mode .qa-grid, +.momo-observability-mode .quality-grid, +.momo-observability-mode .ppt-grid { + display: grid !important; + gap: 1rem !important; +} + +.momo-observability-mode .btn, +.momo-observability-mode .form-control, +.momo-observability-mode .form-select { + border-radius: 8px !important; + font-family: var(--momo-font-family, "Inter", "Noto Sans TC", system-ui, sans-serif) !important; + letter-spacing: 0 !important; +} + +.momo-observability-mode .btn-primary, +.momo-observability-mode .btn-warning, +.momo-observability-mode .btn-danger, +.momo-observability-mode .btn-success, +.momo-observability-mode .progress-bar, +.momo-observability-mode .agent-meter span, +.momo-observability-mode .caller-meter span { + background-color: var(--obs-accent) !important; + background-image: none !important; + color: var(--momo-page-inverse, #fff8ef) !important; +} + +.momo-observability-mode .btn-outline-primary, +.momo-observability-mode .btn-outline-secondary, +.momo-observability-mode .btn-outline-info, +.momo-observability-mode .btn-outline-warning, +.momo-observability-mode .btn-outline-danger, +.momo-observability-mode .btn-outline-success { + background-color: var(--momo-bg-surface, #faf6ec) !important; + background-image: none !important; + border-color: var(--obs-line) !important; + color: var(--obs-ink) !important; +} + +.momo-observability-mode .table thead th, +.momo-observability-mode table thead th { + background-color: var(--momo-bg-paper, #f5efe2) !important; + color: var(--obs-muted) !important; + font-family: var(--momo-font-mono, "JetBrains Mono", ui-monospace, monospace) !important; + font-size: 0.82rem !important; + font-weight: 700 !important; + letter-spacing: 0.05em !important; +} + +.momo-observability-mode .table tbody td, +.momo-observability-mode table tbody td { + background-color: var(--momo-bg-elevated, #fdfaf2) !important; + color: var(--obs-ink) !important; +} + +.momo-observability-mode .table tbody tr:hover td, +.momo-observability-mode table tbody tr:hover td { + background-color: color-mix(in srgb, var(--obs-accent) 7%, var(--momo-bg-elevated, #fdfaf2)) !important; +} + +@media (max-width: 1180px) { + .momo-observability-mode .obs-command-strip, + .momo-observability-mode .agent-command, + .momo-observability-mode .biz-signal-grid, + .momo-observability-mode .runtime-command, + .momo-observability-mode .calls-command, + .momo-observability-mode .gov-command, + .momo-observability-mode .gate-command, + .momo-observability-mode .rag-command, + .momo-observability-mode .qa-command, + .momo-observability-mode .quality-command, + .momo-observability-mode .ppt-command, + .momo-observability-mode [class$="-mini-grid"] { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + } + + .momo-observability-mode .obs-grid, + .momo-observability-mode .agent-grid, + .momo-observability-mode .biz-layout, + .momo-observability-mode .biz-hero, + .momo-observability-mode .runtime-grid, + .momo-observability-mode .runtime-main, + .momo-observability-mode .calls-grid, + .momo-observability-mode .gov-grid, + .momo-observability-mode .gate-grid, + .momo-observability-mode .rag-grid, + .momo-observability-mode .qa-grid, + .momo-observability-mode .quality-grid, + .momo-observability-mode .ppt-grid { + grid-template-columns: 1fr !important; + } +} + +@media (max-width: 560px) { + .momo-observability-mode { + --obs-title-size: 1.55rem; + --obs-value-size: 1.35rem; + } + + .momo-observability-mode .container-fluid, + .momo-observability-mode .momo-content { + padding-left: 0.75rem !important; + padding-right: 0.75rem !important; + } + + .momo-observability-mode .container-fluid > h2:first-child, + .momo-observability-mode .obs-hero, + .momo-observability-mode .agent-hero, + .momo-observability-mode .biz-command, + .momo-observability-mode .runtime-hero, + .momo-observability-mode .calls-hero, + .momo-observability-mode .gov-hero, + .momo-observability-mode .gate-hero, + .momo-observability-mode .rag-hero, + .momo-observability-mode .qa-hero, + .momo-observability-mode .quality-hero, + .momo-observability-mode .ppt-hero { + padding: 0.9rem !important; + } + + .momo-observability-mode .obs-command-strip, + .momo-observability-mode .agent-command, + .momo-observability-mode .biz-signal-grid, + .momo-observability-mode .runtime-command, + .momo-observability-mode .calls-command, + .momo-observability-mode .gov-command, + .momo-observability-mode .gate-command, + .momo-observability-mode .rag-command, + .momo-observability-mode .qa-command, + .momo-observability-mode .quality-command, + .momo-observability-mode .ppt-command, + .momo-observability-mode [class$="-mini-grid"] { + grid-template-columns: 1fr !important; + } +}