:root {
--bg: #ffffff;
--bg-soft: #f8f5f0;
--panel: rgba(255, 255, 255, 0.97);
--panel-2: rgba(248, 244, 238, 0.97);
--ink: #1a1a1a;
--muted: #6b6b6b;
--line: #e5ddd4;
--line-strong: #d1c5b8;
--brand: #e8740c;
--brand-strong: #c55d00;
--accent: #ff8f2e;
--ok: #39a36f;
--warn: #cf5e5e;
--critical: #ef6b8b;
--shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.06);
--shadow-strong: 0 16px 38px rgba(0, 0, 0, 0.08);
--top-bar-h: 56px;
--context-max-h: 55vh;
--ease-spring: cubic-bezier(0.2, 0.9, 0.3, 1.0);
--dur-spring: 0.4s;
--dot-grid-bg: #faf7f2;
--dot-grid-image:
radial-gradient(circle, rgba(232, 116, 12, 0.18) 1.15px, transparent 1.15px),
radial-gradient(circle, rgba(255, 143, 46, 0.10) 1.15px, transparent 1.15px);
--dot-grid-size: 24px 24px;
--dot-grid-position-a: 0 0;
--dot-grid-position-b: 12px 12px;
}
* {
box-sizing: border-box;
}
html {
font-size: 17.5px;
}
html,
body {
height: 100%;
margin: 0;
}
body {
font-family: 'Nunito', "Space Grotesk", "Avenir Next", "Segoe UI", sans-serif;
color: var(--ink);
}
.product-body {
height: 100vh;
min-height: 100dvh;
overflow: hidden;
background:
radial-gradient(circle at 12% 8%, rgba(232, 116, 12, 0.06), transparent 34%),
radial-gradient(circle at 92% 88%, rgba(255, 143, 46, 0.04), transparent 30%),
linear-gradient(165deg, #fffcf8 0%, #faf7f2 46%, #ffffff 100%);
}
.product-shell {
max-width: 1720px;
height: 100%;
min-height: 100%;
margin: 0 auto;
padding: 0.88rem;
padding-bottom: 0;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto minmax(0, 1fr);
gap: 0;
animation: shellFadeIn 500ms ease-out;
}
/* ── Top bar (minimal: logo centered) ── */
.top-bar {
grid-row: 1; grid-column: 1;
display: flex; align-items: center; justify-content: center;
position: relative;
height: var(--top-bar-h);
padding: 0 16px;
background: rgba(255,255,255,0.82);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: none;
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
z-index: 20;
transition: border-radius var(--dur-spring) var(--ease-spring), box-shadow 0.2s, opacity 0.3s, transform 0.3s;
opacity: 0;
transform: translateY(-100%);
pointer-events: none;
}
/* Show top bar only when panel is open */
.top-bar.panel-connected {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
box-shadow: none;
}
.top-bar-brand {
display: flex; align-items: center; gap: 10px;
}
.top-bar-kirby {
width: 28px; height: 28px;
animation: kirbyBreathe 3s ease-in-out infinite;
}
.top-bar-kirby .kirby-eye-right {
transform-origin: center;
animation: kirbyWink 7s ease-in-out infinite;
}
.top-bar-title {
font-size: 1.05rem; font-weight: 700; color: var(--ink);
}
.top-bar-end {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
display: flex; align-items: center; gap: 8px;
}
.top-bar-icon-btn {
width: 36px; height: 36px;
border: 1px solid var(--line);
border-radius: 999px;
background: transparent;
color: var(--muted);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
}
.top-bar-icon-btn:hover {
border-color: var(--brand);
color: var(--ink);
}
/* ── Main area + chat home ── */
.main-area {
grid-row: 2; grid-column: 1;
display: flex; flex-direction: column;
min-height: 0; height: 100%;
overflow: hidden;
transition: margin-top var(--dur-spring) var(--ease-spring);
}
/* Panel-active: fuse navbar and panel with no gap */
.product-shell:has(.panel-active) .main-area {
padding-top: 0;
margin-top: 0;
}
.product-shell:has(.panel-active) .status {
display: none;
}
.chat-home {
flex: 1;
display: flex; flex-direction: column;
min-height: 0;
position: relative;
}
/* Note: .chat-log-home and .chat-composer-home overrides live after their base rules below */
/* ── Welcome state ── */
.welcome-state {
flex: 1 1 0;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 16px; padding: 40px 24px;
min-height: 0;
animation: welcomeFadeIn 0.6s var(--ease-spring) both;
transition: opacity 0.3s;
}
.welcome-state.is-hidden {
display: none;
}
/* When welcome is visible, collapse the chat log behind it */
.chat-home > .welcome-state:not(.is-hidden) ~ .chat-log {
flex: 0 0 0;
min-height: 0;
padding: 0;
overflow: hidden;
}
.welcome-kirby {
width: 110px; height: 110px;
animation: kirbyFloat 3s ease-in-out infinite;
filter: drop-shadow(0 8px 20px rgba(232, 116, 12, 0.25));
transition: filter 0.3s;
}
.welcome-kirby:hover {
filter: drop-shadow(0 10px 28px rgba(232, 116, 12, 0.4));
animation-play-state: paused;
}
.welcome-kirby .kirby-eye {
transform-origin: center;
animation: kirbyBlinkBoth 4s ease-in-out infinite;
}
.welcome-kirby .kirby-eye-right {
animation-delay: 0.08s;
}
.welcome-heading { margin: 0; font-size: 28px; font-weight: 700; color: var(--ink); text-align: center; }
.welcome-sub { margin: 0; font-size: 13px; color: var(--muted); text-align: center; max-width: 480px; border: none; background: none; padding: 0; }
.welcome-pills {
display: flex; flex-wrap: wrap; gap: 8px;
justify-content: center; max-width: 500px;
margin-top: 8px;
}
.welcome-pill {
height: 36px; padding: 0 16px;
border: 1px solid var(--line);
border-radius: 18px;
background: var(--bg);
color: var(--muted);
font: inherit; font-size: 14px; font-weight: 500;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.welcome-pill:hover {
background: rgba(255,255,255,0.6);
backdrop-filter: blur(8px);
border-color: var(--brand);
color: var(--ink);
transform: translateY(-1px);
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
@keyframes welcomeFadeIn {
from { opacity: 0; transform: translateY(16px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* ── Category bar + segmented control ── */
.category-bar {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
padding: 4px 16px 0;
}
.category-track {
display: inline-flex; align-items: center;
position: relative;
height: 32px; padding: 2px;
background: rgba(255,255,255,0.5);
backdrop-filter: blur(12px) saturate(150%);
-webkit-backdrop-filter: blur(12px) saturate(150%);
border: 1px solid rgba(255,255,255,0.3);
border-radius: 16px;
}
.category-indicator {
position: absolute; top: 2px; left: 2px;
height: calc(100% - 4px);
width: calc(25% - 1px);
background: #fff;
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
transition: transform var(--dur-spring) var(--ease-spring), opacity 0.2s;
opacity: 0;
pointer-events: none;
}
.category-indicator.is-active { opacity: 1; }
.category-pill {
position: relative; z-index: 1;
height: 28px; min-width: 60px;
padding: 0 12px;
border: none; background: transparent;
color: var(--muted);
font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 600;
cursor: pointer;
border-radius: 14px;
transition: color 0.2s, background 0.2s, transform 0.15s;
}
.category-pill:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
.category-pill:hover {
color: var(--ink);
background: rgba(255,255,255,0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
transform: translateY(-1px);
}
.category-pill.is-active {
color: var(--ink); font-weight: 600;
}
.category-pill.is-active:hover {
background: transparent;
transform: none;
}
/* ── Context panel (replaces chat, drops down from navbar) ── */
.context-panel {
flex: 0 0 0;
display: flex;
flex-direction: column;
overflow: hidden;
background: rgba(255,255,255,0.82);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: none;
border-radius: 0 0 16px 16px;
box-shadow: none;
opacity: 0;
}
.context-panel.is-open {
flex: 1 1 0;
opacity: 1;
}
.context-panel-body {
flex: 1 1 0;
min-height: 0;
overflow-y: auto;
}
/* Disable parent scrolling when graph views are active */
.context-panel-body:has(> .live-view),
.context-panel-body:has(> .topology-view) {
overflow: hidden;
}
.context-panel-body > .view-panel {
min-height: 100%;
height: 100%;
overflow: auto;
padding: 0.5rem;
}
.context-panel-body > .live-view,
.context-panel-body > .topology-view {
overflow: hidden;
overscroll-behavior: contain;
box-sizing: border-box;
}
/* ── Panel footer (sub-tabs centered) ── */
.context-panel-foot {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
padding: 6px 12px;
border-top: none;
min-height: 38px;
background: transparent;
gap: 8px;
}
.context-close-btn {
width: 28px; height: 28px;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(255,255,255,0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--muted);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background 0.15s, color 0.15s, transform 0.15s;
flex-shrink: 0;
}
.context-close-btn:hover {
background: rgba(0,0,0,0.06);
color: var(--ink);
transform: scale(1.08);
}
.context-sub-tabs {
display: inline-flex;
align-items: center;
background: rgba(255,255,255,0.82);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
height: 32px;
border-radius: 16px;
padding: 2px;
gap: 0;
}
.context-sub-tab {
position: relative; z-index: 1;
height: 28px; min-width: 60px;
padding: 0 12px;
border: none;
border-radius: 14px;
background: transparent;
color: var(--muted);
font: inherit; font-size: 13px; font-weight: 500;
cursor: pointer;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
}
.context-sub-tab:hover {
color: var(--ink);
}
.context-sub-tab.is-active {
background: linear-gradient(140deg, #ff8f2e, #e8740c);
color: #fff;
font-weight: 600;
box-shadow: 0 1px 3px rgba(232,116,12,0.3);
}
/* ── Hide chat when panel is open ── */
.chat-home.panel-active > .welcome-state,
.chat-home.panel-active > .chat-log {
display: none;
}
/* ── Hidden panel storage ── */
.panel-storage { display: none; }
/* ── Status banner ── */
.status {
margin-top: 0.38rem;
border: 1px solid #e8a04a;
border-radius: 999px;
background: rgba(232, 116, 12, 0.08);
color: #8a5500;
padding: 0.56rem 0.82rem;
font-size: 0.82rem;
}
.status.error {
border-color: #8a3f3f;
background: rgba(207, 94, 94, 0.06);
color: #a63030;
}
.status.ok {
border-color: #3a7d5f;
background: rgba(57, 163, 111, 0.08);
color: #1d6b45;
}
/* ── View panels (inside context panel or storage) ── */
.view-panel {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
width: 100%;
height: 100%;
min-height: 0;
overflow: auto;
align-content: stretch;
padding: 0.75rem;
}
.panel {
background: rgba(255, 255, 255, 0.82);
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
padding: 1.25rem;
display: flex;
flex-direction: column;
min-height: 0;
height: 100%;
overflow: hidden;
}
.panel-title {
margin: 0;
font-size: 1.12rem;
font-weight: 650;
color: #1a1a1a;
}
.panel-sub {
margin: 0.42rem 0 0;
font-size: 0.82rem;
color: var(--muted);
}
.panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.55rem;
}
.connect-block {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-areas:
"label label label"
"input input button"
"poll poll poll";
gap: 0.45rem;
align-items: center;
}
.connect-block label {
grid-area: label;
font-size: 0.66rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #8a7a6a;
font-weight: 700;
}
.connect-block input {
grid-area: input;
height: 2.3rem;
border: 1px solid var(--line);
border-radius: 999px;
background: #f5f1ec;
color: #1a1a1a;
padding: 0 0.82rem;
font: inherit;
font-size: 0.88rem;
outline: none;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.connect-block input::placeholder {
color: #a09080;
}
.connect-block input:focus {
border-color: #ff8f2e;
box-shadow: 0 0 0 3px rgba(232, 116, 12, 0.15);
}
.connect-block button {
grid-area: button;
height: 2.3rem;
border: 1px solid #c55d00;
border-radius: 999px;
background: linear-gradient(145deg, var(--brand), var(--brand-strong));
color: #fff;
padding: 0 0.82rem;
font: inherit;
font-size: 0.82rem;
font-weight: 700;
cursor: pointer;
transition: transform 120ms ease;
}
.connect-block button:hover {
transform: translateY(-1px);
}
.connect-block button:active {
transform: translateY(0);
}
.poll-pill {
grid-area: poll;
display: inline-flex;
align-items: center;
gap: 0.4rem;
border: 1px solid var(--line);
border-radius: 999px;
background: #f5f1ec;
padding: 0.2rem 0.52rem;
font-size: 0.74rem;
color: #6b6b6b;
}
.poll-dot {
width: 9px;
height: 9px;
border-radius: 999px;
background: #c4b8a8;
}
.poll-dot.live {
background: var(--ok);
animation: pulse 1.15s ease-in-out infinite;
}
.poll-dot.error {
background: var(--warn);
}
.source-badge {
border: 1px solid #d1c5b8;
border-radius: 999px;
padding: 0.16rem 0.48rem;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: lowercase;
background: #f5f1ec;
color: #6b6b6b;
}
.source-badge.source-openclaw {
border-color: #448466;
background: rgba(57, 163, 111, 0.10);
color: #1d6b45;
}
.source-badge.source-mock {
border-color: #e8a04a;
background: rgba(232, 116, 12, 0.10);
color: #c55d00;
}
.source-badge.source-manual,
.source-badge.source-unknown {
border-color: #d1c5b8;
background: #f5f1ec;
color: #6b6b6b;
}
.source-hint {
margin: 0.48rem 0 0;
border: 1px solid #e8a04a;
background: rgba(232, 116, 12, 0.08);
color: #8a5500;
border-radius: 999px;
padding: 0.32rem 0.62rem;
font-size: 0.72rem;
}
.source-hint.mock {
border-color: #e8a04a;
background: rgba(232, 116, 12, 0.10);
color: #c55d00;
}
.kv-grid {
margin-top: 0.5rem;
display: grid;
gap: 0.42rem;
}
.kv-row {
display: grid;
grid-template-columns: 76px minmax(0, 1fr);
align-items: center;
gap: 0.42rem;
border: 1px solid #e5ddd4;
border-radius: 999px;
background: #faf7f2;
padding: 0.32rem 0.56rem;
transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.kv-row:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.kv-row dt {
font-size: 0.58rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #8a7a6a;
font-weight: 700;
}
.kv-row dd {
margin: 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.68rem;
color: #1a1a1a;
font-weight: 600;
}
.kv-hint {
font-size: 0.56rem;
font-weight: 500;
color: var(--muted);
margin-left: 4px;
}
/* ── Network Pulse inline strip ── */
.pulse-strip {
display: flex;
align-items: center;
gap: 0;
border: 1px solid var(--line);
border-radius: 10px;
background: #faf7f2;
padding: 0;
overflow: hidden;
}
.pulse-label {
flex: 0 0 auto;
padding: 0.32rem 0.5rem;
font-size: 0.52rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #8a7a6a;
background: rgba(0,0,0,0.03);
border-right: 1px solid var(--line);
}
.pulse-stat {
flex: 1 1 0;
display: flex;
align-items: center;
gap: 0.28rem;
padding: 0.3rem 0.44rem;
border-right: 1px solid var(--line);
}
.pulse-stat:last-child {
border-right: none;
}
.pulse-key {
font-size: 0.48rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #8a7a6a;
}
.pulse-val {
font-size: 0.76rem;
font-weight: 700;
color: var(--ink);
}
/* ── MCP Connection thin bar ── */
.mcp-bar {
display: flex;
align-items: center;
gap: 0;
border: 1px solid var(--line);
border-radius: 10px;
background: #faf7f2;
overflow: hidden;
}
.mcp-bar-label {
flex: 0 0 auto;
padding: 0.3rem 0.5rem;
font-size: 0.52rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #8a7a6a;
background: rgba(0,0,0,0.03);
border-right: 1px solid var(--line);
white-space: nowrap;
}
.mcp-bar-snippet {
flex: 1 1 0;
margin: 0;
padding: 0.3rem 0.5rem;
border: none;
border-radius: 0;
background: transparent;
font-size: 0.58rem;
line-height: 1.3;
color: var(--ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.live-view {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: minmax(0, 1fr);
gap: 0;
min-height: 0;
height: 100%;
overflow: hidden;
align-content: stretch;
}
.live-view .tree-panel {
display: flex;
flex-direction: column;
min-height: 0;
height: 100%;
overflow: hidden;
}
.topology-view {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: minmax(0, 1fr);
gap: 0;
height: 100%;
min-height: 0;
overflow: hidden;
}
.topology-canvas-panel {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: stretch;
position: relative;
}
.topology-map {
margin: 0;
flex: 1;
min-height: 0;
min-height: 100%;
height: 100%;
max-height: none;
width: 100%;
position: relative;
border: 1px solid #e5ddd4;
border-radius: 10px;
background-color: #1a1613;
display: flex;
overflow: hidden;
overscroll-behavior: contain;
}
.topology-map canvas,
.action-tree-canvas canvas {
display: block;
border-radius: inherit;
}
.topology-map > .empty-row,
.topology-map > div.empty-row {
flex: 1;
width: 100%;
min-height: 100%;
border: 0;
border-radius: 0;
background: transparent;
}
.topology-map.is-dragging {
cursor: grabbing;
}
.topology-svg {
display: block;
width: max(100%, 1020px);
min-width: 1020px;
min-height: 100%;
height: auto;
}
.topology-node {
fill: rgba(255, 255, 255, 0.97);
stroke: #c4b8a8;
stroke-width: 1.6;
}
.topology-node.target {
stroke: #5488b0;
}
.topology-node.maple {
stroke: #e8740c;
}
.topology-node.contact,
.topology-node.surface {
stroke: #c4b8a8;
fill: rgba(255, 255, 255, 0.98);
}
.topology-node.blocked {
stroke: #cf5e5e;
fill: rgba(207, 94, 94, 0.08);
}
.topology-node.contact.live,
.topology-node.surface.live {
animation: nodePulse 1200ms ease-in-out infinite;
transform-box: fill-box;
transform-origin: center;
}
.topology-node.surface.allowed {
stroke: rgba(57, 163, 111, 0.74);
fill: rgba(57, 163, 111, 0.08);
}
.topology-node.surface.observed {
stroke: rgba(180, 165, 150, 0.56);
fill: rgba(255, 255, 255, 0.96);
}
.topology-node-title {
fill: #1a1a1a;
font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 0.86rem;
font-weight: 700;
}
.topology-node-sub {
fill: #6b6b6b;
font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 0.72rem;
}
.topology-empty-copy {
fill: #8a7a6a;
font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 0.77rem;
}
.topology-edge {
fill: none;
stroke: rgba(150, 135, 120, 0.5);
stroke-width: 2.2;
}
.topology-edge.active {
stroke: rgba(57, 163, 111, 0.72);
}
.topology-edge.blocked {
stroke: rgba(207, 94, 94, 0.86);
stroke-dasharray: 1 9;
stroke-linecap: round;
}
.topology-edge.contact {
stroke: rgba(180, 165, 150, 0.5);
stroke-dasharray: 6 7;
animation: linkFlow 1460ms linear infinite;
}
.topology-edge.contact.active,
.topology-edge.surface.allowed {
stroke: rgba(232, 116, 12, 0.5);
}
.topology-edge.contact.blocked,
.topology-edge.surface.blocked {
stroke: rgba(207, 94, 94, 0.92);
stroke-dasharray: 1 9;
stroke-linecap: round;
}
.topology-edge.contact.is-new,
.topology-edge.surface.is-new {
animation:
topologyBlockIn 720ms cubic-bezier(0.16, 0.76, 0.33, 1),
linkFlow 1460ms linear infinite;
}
.topology-edge.surface {
stroke: rgba(180, 165, 150, 0.5);
stroke-dasharray: 6 7;
animation: linkFlow 1460ms linear infinite;
}
.topology-edge-label {
fill: #6b6b6b;
font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 0.68rem;
font-weight: 700;
}
.topology-edge-label.blocked {
fill: #cf5e5e;
}
.topology-tappable {
cursor: pointer;
transition: filter 140ms ease, stroke 140ms ease, fill 140ms ease;
}
.topology-tappable:hover {
filter: brightness(0.95);
}
.topology-endpoint-popup {
position: absolute;
z-index: 20;
width: min(300px, calc(100% - 24px));
border: 1px solid #e0d7cc;
border-radius: 12px;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
backdrop-filter: blur(6px);
padding: 0.6rem 0.68rem;
}
.topology-endpoint-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.45rem;
}
.topology-endpoint-head h3 {
margin: 0;
font-size: 0.78rem;
color: #1a1a1a;
}
.topology-endpoint-close {
border: 1px solid #e0d7cc;
border-radius: 999px;
background: #f5f1ec;
color: #333;
height: 1.8rem;
padding: 0 0.56rem;
font: inherit;
font-size: 0.66rem;
font-weight: 700;
cursor: pointer;
}
.topology-endpoint-sub {
margin: 0.48rem 0 0;
color: #8a7a6a;
font-size: 0.63rem;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
}
.topology-endpoint-host {
margin-top: 0.28rem;
border: 1px solid #e5ddd4;
border-radius: 999px;
background: rgba(248, 244, 238, 0.9);
color: #1a1a1a;
font-size: 0.72rem;
padding: 0.42rem 0.7rem;
overflow-wrap: anywhere;
}
.topology-endpoint-row {
margin-top: 0.52rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.4rem;
}
.topology-endpoint-label {
color: #8a7a6a;
font-size: 0.64rem;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
}
.topology-endpoint-status {
display: inline-flex;
align-items: center;
border: 1px solid #d1c5b8;
border-radius: 999px;
padding: 0.14rem 0.46rem;
font-size: 0.62rem;
font-weight: 700;
text-transform: lowercase;
background: #f5f1ec;
color: #6b6b6b;
}
.topology-endpoint-status.allowed {
border-color: #3f8f68;
background: rgba(57, 163, 111, 0.10);
color: #1d6b45;
}
.topology-endpoint-status.blocked {
border-color: #aa5d5d;
background: rgba(207, 94, 94, 0.08);
color: #a63030;
}
.topology-endpoint-status.observed {
border-color: #c4b8a8;
background: rgba(200, 185, 170, 0.15);
color: #6b6b6b;
}
.topology-endpoint-actions {
margin-top: 0.56rem;
}
.topology-endpoint-approve {
width: 100%;
border: 1px solid #3f8f68;
border-radius: 999px;
background: rgba(57, 163, 111, 0.10);
color: #1d6b45;
height: 2rem;
font: inherit;
font-size: 0.68rem;
font-weight: 700;
cursor: pointer;
}
.topology-endpoint-approve:hover {
background: rgba(57, 163, 111, 0.18);
}
.topology-block-link {
stroke: rgba(207, 94, 94, 0.9);
stroke-width: 2.4;
stroke-dasharray: 8 7;
animation: linkFlow 1280ms linear infinite;
}
.topology-block-link.is-new {
animation:
topologyBlockIn 720ms cubic-bezier(0.16, 0.76, 0.33, 1),
linkFlow 1280ms linear infinite;
}
.topology-block-node.is-new {
animation: topologyNodeFlash 900ms ease-out;
}
.topology-touch-panel {
min-height: 0;
display: flex;
flex-direction: column;
}
.topology-touch-panel .table-wrap {
margin-top: 0.46rem;
}
.context-panel-body > .control-view {
height: 100%;
min-height: 0;
overflow: hidden;
}
.control-view {
display: flex;
flex-direction: column;
gap: 0;
align-content: start;
}
.control-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.62rem;
flex: 1;
min-height: 0;
}
.control-left,
.control-right {
display: flex;
flex-direction: column;
gap: 0.62rem;
min-height: 0;
overflow: hidden;
}
.control-left .inventory-panel {
flex: 1 1 0;
min-height: 0;
overflow: hidden;
}
.control-left .inventory-panel .trace-list {
flex: 1;
min-height: 0;
overflow-y: auto;
}
/* ── Session + Inventory side-by-side compact row ── */
.session-inventory-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
.session-compact,
.inventory-compact {
padding: 0.75rem;
}
.session-compact .panel-title,
.inventory-compact .panel-title {
font-size: 0.88rem;
}
.session-compact .source-hint {
font-size: 0.62rem;
padding: 0.3rem 0.4rem;
margin-top: 0.3rem;
}
.kv-grid-inline {
margin-top: 0.3rem;
gap: 0.28rem;
}
.kv-grid-inline .kv-row {
padding: 0.22rem 0.5rem;
}
.kv-grid-inline .kv-row dt {
font-size: 0.52rem;
}
.kv-grid-inline .kv-row dd {
font-size: 0.6rem;
}
.inventory-search {
width: 100%;
height: 2rem;
margin-top: 0.4rem;
border: 1px solid #e5ddd4;
border-radius: 999px;
background: #f5f1ec;
color: #333;
padding: 0 0.7rem;
font: inherit;
font-size: 0.72rem;
outline: none;
}
.inventory-search:focus {
border-color: #ff8f2e;
box-shadow: 0 0 0 3px rgba(232, 116, 12, 0.15);
}
.inventory-search::placeholder {
color: #a09080;
}
.inventory-filter-row {
display: flex;
gap: 0.3rem;
margin-top: 0.36rem;
}
.inventory-filter-row select {
flex: 1;
height: 2rem;
border: 1px solid #e5ddd4;
border-radius: 999px;
background: #f5f1ec;
color: #333;
padding: 0 0.6rem;
font: inherit;
font-size: 0.68rem;
outline: none;
}
.inventory-filter-row select:focus {
border-color: #ff8f2e;
box-shadow: 0 0 0 3px rgba(232, 116, 12, 0.15);
}
.control-connection {
border-bottom: 1px solid #e5ddd4;
padding-bottom: 0.62rem;
}
.control-connection .connect-block {
margin-top: 0.5rem;
max-width: 780px;
}
.demo-controls {
margin-top: 0.5rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.4rem;
align-items: end;
}
.demo-controls .demo-btn.primary {
grid-column: 1 / -1;
}
.demo-field {
display: grid;
gap: 0.24rem;
}
.demo-field label {
font-size: 0.56rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #8a7a6a;
font-weight: 700;
}
.demo-field input,
.demo-field select {
height: 2rem;
border: 1px solid #e5ddd4;
border-radius: 999px;
background: #f5f1ec;
color: #333;
padding: 0 0.7rem;
font: inherit;
font-size: 0.72rem;
outline: none;
}
.demo-field input:focus,
.demo-field select:focus {
border-color: #ff8f2e;
box-shadow: 0 0 0 3px rgba(232, 116, 12, 0.15);
}
.demo-btn {
height: 2rem;
border: 1px solid #e0d7cc;
border-radius: 999px;
background: #f5f1ec;
color: #333;
font: inherit;
font-size: 0.67rem;
font-weight: 700;
cursor: pointer;
transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}
.demo-btn:hover {
transform: translateY(-1px);
border-color: #e8a04a;
background: #faf7f2;
}
.demo-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.demo-btn.primary {
border-color: #c55d00;
background: linear-gradient(145deg, var(--brand), var(--brand-strong));
color: #fff;
}
.demo-result {
margin: 0.48rem 0 0;
border: 1px solid #e8a04a;
border-radius: 999px;
background: rgba(232, 116, 12, 0.06);
color: #8a5500;
padding: 0.4rem 0.62rem;
font-size: 0.68rem;
min-height: 2.05rem;
}
.demo-result.ok {
border-color: #3a7d5f;
background: rgba(57, 163, 111, 0.08);
color: #1d6b45;
}
.demo-result.error {
border-color: #8a3f3f;
background: rgba(207, 94, 94, 0.06);
color: #a63030;
}
/* ── Chat log container ── */
.chat-log {
margin-top: 0.48rem;
border: 0;
background: #f5f1ec;
border-radius: 14px;
min-height: 220px;
max-height: 320px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
padding: 12px 16px;
display: flex;
flex-direction: column;
gap: 2px;
}
/* Override base .chat-log when used as the full-height home chat */
.chat-log.chat-log-home {
flex: 1 1 0;
min-height: 0;
max-height: none;
margin-top: 0;
padding: 16px 24px;
background: transparent;
border: 0;
border-radius: 14px;
}
/* ── Bubble base ── */
.chat-bubble {
max-width: 75%;
padding: 9px 14px;
border-radius: 20px;
font-size: 0.88rem;
line-height: 1.4;
word-wrap: break-word;
word-break: break-word;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
border: none;
position: relative;
}
/* ── User bubbles (right-aligned, orange) ── */
.chat-bubble.user {
align-self: flex-end;
background: linear-gradient(135deg, #e8740c, #c55d00);
color: #ffffff;
border-radius: 20px 20px 4px 20px;
animation: bubbleInRight 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
/* ── Assistant bubbles (left-aligned, warm gray) ── */
.chat-bubble.assistant {
align-self: flex-start;
background: #f0ebe5;
color: #1a1a1a;
border-radius: 20px 20px 20px 4px;
animation: bubbleInLeft 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
/* ── Error bubbles ── */
.chat-bubble.error {
background: rgba(207, 94, 94, 0.1);
color: #a63030;
border: 1px solid rgba(207, 94, 94, 0.25);
}
/* ── Timestamp dividers ── */
.chat-timestamp {
font-size: 0.65rem;
color: #8a7a6a;
text-align: center;
padding: 8px 0;
align-self: center;
user-select: none;
}
/* ── Typing indicator ── */
.typing-dots {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 2px;
height: 20px;
}
.typing-dots .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #8a7a6a;
animation: typingDot 1.4s ease-in-out infinite;
}
.typing-dots .dot:nth-child(2) {
animation-delay: 0.2s;
}
.typing-dots .dot:nth-child(3) {
animation-delay: 0.4s;
}
/* ── Streaming state ── */
.chat-bubble.streaming {
min-height: 1.5em;
}
/* ── Streaming cursor ── */
.streaming-cursor {
display: inline-block;
width: 4px;
height: 1em;
background: #e8740c;
margin-left: 2px;
vertical-align: text-bottom;
border-radius: 2px;
animation: cursorBlink 0.8s step-end infinite;
}
@keyframes cursorBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* ── Input bar (frosted glass) ── */
.chat-composer {
margin-top: 0.5rem;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
background: rgba(248, 244, 238, 0.9);
border-top: 0.5px solid rgba(0, 0, 0, 0.08);
padding: 8px 0 0;
}
/* Override base .chat-composer when used as the home composer */
.chat-composer.chat-composer-home {
flex: 0 0 auto;
margin-top: 4px;
padding: 10px 0 28px;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-top: none;
border-radius: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* Pyramid: input wider than the category track above (base of pyramid) */
.chat-composer-home .chat-input-row {
width: min(480px, 90%);
}
.chat-input-row {
position: relative;
display: flex;
align-items: center;
}
.chat-input-wrap {
position: relative;
flex: 1;
}
.chat-input-wrap input {
width: 100%;
height: 2.8rem;
border: 0.5px solid rgba(0, 0, 0, 0.12);
border-radius: 24px;
background: #fff;
color: #1a1a1a;
padding: 12px 44px 12px 18px;
font: inherit;
font-size: 0.92rem;
outline: none;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.chat-input-wrap input::placeholder {
color: transparent;
}
.chat-input-wrap input:focus {
border-color: #ff8f2e;
box-shadow: 0 0 0 3px rgba(232, 116, 12, 0.15);
}
/* ── Rotating placeholder suggestions ── */
.rotating-placeholder {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
color: #a09080;
font-size: 0.92rem;
font-family: inherit;
pointer-events: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: calc(100% - 56px);
transition: opacity 0.3s;
}
.rotating-placeholder.is-hidden {
opacity: 0;
}
.rotating-placeholder .placeholder-text {
display: inline-block;
animation: placeholderFadeIn 0.4s ease-out;
}
@keyframes placeholderFadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Send button (inside input wrap, right side) ── */
.chat-send-btn {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 30px;
height: 30px;
min-width: 30px;
border: none;
border-radius: 50%;
background: linear-gradient(145deg, var(--brand), var(--brand-strong));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
transition: opacity 120ms ease;
}
.chat-send-btn:hover {
opacity: 0.85;
}
.chat-send-btn:disabled {
background: #c4b8a8;
opacity: 0.5;
cursor: not-allowed;
}
.chat-send-btn svg {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ── Bubble entrance animations ── */
@keyframes bubbleInRight {
from { opacity: 0; transform: translateX(16px) scale(0.95); }
to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes bubbleInLeft {
from { opacity: 0; transform: translateX(-16px) scale(0.95); }
to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes typingDot {
0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
30% { transform: translateY(-4px); opacity: 1; }
}
/* Chat mode badge */
.chat-mode-badge {
display: inline-block;
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 2px 8px;
border-radius: 6px;
margin-left: 8px;
vertical-align: middle;
}
.chat-mode-badge.ai {
background: rgba(52, 199, 89, 0.15);
color: #2d8a4e;
}
.chat-mode-badge.rules {
background: rgba(142, 142, 147, 0.15);
color: #6e6e73;
}
.evidence-view {
display: grid;
gap: 0.62rem;
grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
}
.growth-view {
display: grid;
gap: 0.62rem;
grid-template-columns: 1fr;
}
/* ── Fork + Growth combined layout ── */
/* ── Govern → Guardrails ── */
.context-panel-body > .guard-view {
height: 100%;
min-height: 0;
overflow: hidden;
}
.guard-view {
display: flex;
flex-direction: column;
gap: 0;
}
.guard-view .guard-panel {
flex: 1 1 0;
min-height: 0;
overflow: hidden;
}
.guard-view .panel {
padding: 0.75rem;
}
.guard-view .panel-title {
font-size: 0.82rem;
}
.guard-view .panel-sub {
font-size: 0.68rem;
margin-top: 0.25rem;
}
/* ── Govern → Insights (fork) ── */
.context-panel-body > .fork-view {
height: 100%;
min-height: 0;
overflow: hidden;
}
.fork-view {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* Compact panels inside fork view */
.fork-view .panel {
padding: 0.75rem;
}
.fork-view .panel-title {
font-size: 0.82rem;
}
/* Top stat bars row */
.insights-bars {
flex: 0 0 auto;
display: flex;
gap: 0.5rem;
}
.insights-bars .pulse-strip,
.insights-bars .mcp-bar {
flex: 1 1 0;
}
/* Two-column grid */
.fork-growth-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
flex: 1;
min-height: 0;
}
.fg-left,
.fg-right {
display: flex;
flex-direction: column;
gap: 0.5rem;
min-height: 0;
overflow-y: auto;
}
/* Left: Fork panel fills the column */
.fg-left .fork-panel {
flex: 1 1 0;
min-height: 0;
height: auto;
overflow: hidden;
}
.fg-left .fork-panel .table-wrap {
flex: 1;
min-height: 0;
overflow-y: auto;
}
/* Right: Brief takes most space, Community stays mid-size */
.fg-right .brief-panel {
flex: 2 1 0;
min-height: 0;
height: auto;
overflow: hidden;
}
.fg-right .brief-panel .json-panel {
flex: 1;
min-height: 0;
max-height: none;
overflow-y: auto;
}
.fg-right .community-panel {
flex: 1 1 0;
min-height: 0;
height: auto;
overflow: hidden;
}
.fg-right .community-panel .table-wrap {
flex: 1;
min-height: 0;
overflow-y: auto;
}
/* Diff + community tables: fit within panel columns */
.diff-table,
.community-table {
min-width: 240px;
}
.tree-shell {
margin-top: 0;
border: 1px solid #e5ddd4;
border-radius: 10px;
background-color: var(--dot-grid-bg);
background-image: var(--dot-grid-image);
background-size: var(--dot-grid-size), var(--dot-grid-size);
background-position: var(--dot-grid-position-a), var(--dot-grid-position-b);
display: flex;
flex-direction: column;
min-height: 0;
flex: 1;
height: 100%;
overflow: hidden;
}
.tree-legend {
display: flex;
gap: 0.62rem;
flex-wrap: wrap;
border-bottom: 1px solid #e5ddd4;
padding: 0.38rem 0.5rem;
color: #8a7a6a;
font-size: 0.65rem;
font-weight: 600;
}
.tree-legend span {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.legend-dot {
width: 9px;
height: 9px;
border-radius: 999px;
display: inline-block;
}
.legend-main {
background: #e8740c;
}
.legend-fork {
background: #ff8f2e;
}
.legend-block {
background: #ef6b8b;
}
.action-tree-wrap {
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 0;
flex: 1;
height: 100%;
background: transparent;
}
.action-tree-canvas {
min-height: 100%;
height: 100%;
flex: 1;
padding: 0;
background: #1a1613;
user-select: none;
overflow: hidden;
border-radius: 10px;
}
.action-tree-empty {
color: #8a7a6a;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
min-height: 200px;
font-size: 0.82rem;
margin: 0;
}
.action-tree-svg {
display: block;
width: 100%;
min-width: 900px;
height: auto;
background: transparent;
font-family: 'Nunito', "Space Grotesk", "Avenir Next", "Segoe UI", sans-serif;
}
.tree-link-glow {
fill: none;
stroke: rgba(232, 116, 12, 0.1);
stroke-width: 8px;
stroke-linecap: round;
pointer-events: none;
}
.tree-link-glow.fork {
stroke: rgba(255, 143, 46, 0.08);
}
.tree-link {
fill: none;
stroke: rgba(232, 116, 12, 0.55);
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 8 14;
animation: linkFlow 2.2s linear infinite;
}
.tree-link.fork {
stroke: rgba(255, 143, 46, 0.65);
stroke-dasharray: 6 10;
}
.tree-node {
stroke-width: 2px;
}
.tree-node.risk-low {
fill: rgba(57, 163, 111, 0.12);
stroke: rgba(57, 163, 111, 0.78);
}
.tree-node.risk-medium {
fill: rgba(224, 159, 85, 0.14);
stroke: rgba(224, 159, 85, 0.86);
}
.tree-node.risk-high {
fill: rgba(214, 118, 149, 0.14);
stroke: rgba(214, 118, 149, 0.88);
}
.tree-node.risk-critical {
fill: rgba(239, 107, 139, 0.16);
stroke: rgba(239, 107, 139, 0.95);
}
.tree-node.blocked {
fill: rgba(239, 107, 139, 0.2);
stroke: #ff7ea1;
stroke-width: 2.4px;
}
.tree-node.latest {
transform-box: fill-box;
transform-origin: center;
animation: nodePulse 1200ms ease-in-out infinite;
}
.tree-label {
fill: rgba(255, 255, 255, 0.97);
stroke: rgba(200, 185, 170, 0.5);
stroke-width: 1;
}
.tree-label.fork {
fill: rgba(255, 248, 240, 0.97);
stroke: rgba(255, 143, 46, 0.4);
}
.tree-index {
font-size: 0.74rem;
fill: #1a1a1a;
font-weight: 700;
text-anchor: middle;
dominant-baseline: middle;
}
.tree-label-title {
font-size: 0.79rem;
fill: #1a1a1a;
font-weight: 700;
}
.tree-label-sub {
font-size: 0.72rem;
fill: #6b6b6b;
}
.tree-fo-wrap {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 6px 12px;
box-sizing: border-box;
font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
overflow: hidden;
pointer-events: none;
}
.tree-fo-title {
font-size: 0.79rem;
font-weight: 700;
color: #1a1a1a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
}
.tree-fo-sub {
font-size: 0.72rem;
color: #6b6b6b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
}
.tree-step-group {
cursor: pointer;
}
.tree-step-group:hover .tree-label {
stroke: rgba(232, 116, 12, 0.6);
}
.tree-label.selected {
stroke: rgba(232, 116, 12, 0.9);
stroke-width: 1.4;
}
.tree-node.selected {
stroke: #e8740c;
stroke-width: 3;
}
.tree-branch-tag {
font-size: 0.71rem;
fill: #c55d00;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.table-wrap {
margin-top: 0.48rem;
overflow: auto;
border: 0;
border-radius: 0;
background: transparent;
min-height: 0;
flex: 1;
}
.timeline-table {
width: 100%;
border-collapse: collapse;
min-width: 780px;
}
.timeline-table th,
.timeline-table td {
padding: 0.5rem 0.52rem;
border-bottom: 1px solid #ece6dc;
text-align: left;
vertical-align: top;
font-size: 0.66rem;
color: #333;
}
.timeline-table th {
background: #f5f1ec;
color: #8a5500;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
}
.timeline-table tr:last-child td {
border-bottom: 0;
}
.timeline-table tr.is-medium {
background: rgba(224, 159, 85, 0.08);
}
.timeline-table tr.is-high {
background: rgba(214, 118, 149, 0.08);
}
.timeline-table tr.is-critical {
background: rgba(239, 107, 139, 0.10);
}
.timeline-table tr.is-blocked {
outline: 2px solid rgba(239, 107, 139, 0.5);
outline-offset: -2px;
}
.step-signal {
margin-top: 0.18rem;
display: inline-flex;
border-radius: 999px;
border: 1px solid #d1c5b8;
background: #f5f1ec;
font-size: 0.57rem;
padding: 0.1rem 0.28rem;
color: #6b6b6b;
}
.risk-badge {
display: inline-flex;
align-items: center;
border-radius: 999px;
padding: 0.16rem 0.42rem;
border: 1px solid transparent;
font-size: 0.62rem;
font-weight: 700;
text-transform: lowercase;
}
.risk-low {
color: #1d6b45;
background: rgba(57, 163, 111, 0.10);
border-color: rgba(57, 163, 111, 0.25);
}
.risk-medium {
color: #8a5500;
background: rgba(224, 159, 85, 0.10);
border-color: rgba(224, 159, 85, 0.28);
}
.risk-high {
color: #a63030;
background: rgba(214, 118, 149, 0.10);
border-color: rgba(214, 118, 149, 0.30);
}
.risk-critical {
color: #a63030;
background: rgba(239, 107, 139, 0.12);
border-color: rgba(239, 107, 139, 0.35);
}
.filters {
margin-top: 0.48rem;
display: grid;
gap: 0.42rem;
}
.filters input,
.filters select {
height: 2rem;
border: 1px solid #e5ddd4;
border-radius: 999px;
background: #f5f1ec;
color: #333;
padding: 0 0.7rem;
font: inherit;
font-size: 0.72rem;
outline: none;
}
.filters input::placeholder {
color: #a09080;
}
.filters input:focus,
.filters select:focus {
border-color: #ff8f2e;
box-shadow: 0 0 0 3px rgba(232, 116, 12, 0.15);
}
.trace-list {
margin-top: 0.48rem;
overflow-y: auto;
border: 1px solid var(--line);
border-radius: 10px;
background: #faf7f2;
min-height: 120px;
flex: 1;
}
.trace-item {
width: 100%;
border: 0;
border-bottom: 1px solid #ece6dc;
background: transparent;
text-align: left;
padding: 0.48rem 0.52rem;
cursor: pointer;
display: grid;
gap: 0.16rem;
transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.trace-item:last-child {
border-bottom: 0;
}
.trace-item:hover {
background: #f5f1ec;
}
.trace-item.is-active {
background: rgba(232, 116, 12, 0.12);
}
.trace-item-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.4rem;
}
.trace-item-title {
font-size: 0.69rem;
font-weight: 700;
color: #1a1a1a;
}
.trace-item-meta {
font-size: 0.6rem;
color: #8a7a6a;
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.chip {
display: inline-flex;
align-items: center;
border-radius: 999px;
border: 1px solid #d1c5b8;
background: #f5f1ec;
color: #6b6b6b;
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.03em;
padding: 0.14rem 0.36rem;
}
/* ── Trace Detail split layout ── */
.detail-split {
display: grid;
grid-template-columns: minmax(180px, 0.4fr) minmax(0, 1fr);
gap: 0.5rem;
margin-top: 0.4rem;
flex: 1;
min-height: 0;
}
.detail-steps {
display: flex;
flex-direction: column;
min-height: 0;
border: 1px solid var(--line);
border-radius: 10px;
background: #faf7f2;
overflow: hidden;
}
.detail-steps-head {
padding: 0.36rem 0.5rem;
font-size: 0.52rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #8a7a6a;
border-bottom: 1px solid var(--line);
background: rgba(0,0,0,0.02);
}
.detail-inspect {
display: flex;
flex-direction: column;
gap: 0.4rem;
min-height: 0;
overflow-y: auto;
}
.detail-inspect-title {
margin: 0;
font-size: 0.75rem;
font-weight: 700;
color: #1a1a1a;
}
.step-list {
margin-top: 0;
border: 0;
border-radius: 0;
background: transparent;
overflow-y: auto;
min-height: 0;
max-height: none;
flex: 1;
}
.step-item {
width: 100%;
border: 0;
border-bottom: 1px solid #ece6dc;
background: transparent;
text-align: left;
padding: 0.36rem 0.5rem;
display: grid;
gap: 0.12rem;
cursor: pointer;
transition: background 150ms ease;
}
.step-item:last-child {
border-bottom: 0;
}
.step-item:hover {
background: rgba(232, 116, 12, 0.06);
}
.step-item.is-active {
background: rgba(232, 116, 12, 0.12);
}
.step-item-head {
display: flex;
justify-content: space-between;
gap: 0.3rem;
font-size: 0.6rem;
font-weight: 700;
color: #1a1a1a;
}
.step-item-sub {
font-size: 0.54rem;
color: #8a7a6a;
}
.json-panel,
.code {
margin: 0;
border: 1px solid #e5ddd4;
border-radius: 10px;
background: #f5f1ec;
color: #333;
padding: 0.56rem;
overflow: auto;
font-size: 0.63rem;
line-height: 1.42;
}
.evidence-drawer {
margin-top: 0.5rem;
border: 1px solid #e5ddd4;
border-radius: 10px;
background: #faf7f2;
}
.evidence-drawer > summary {
cursor: pointer;
padding: 0.46rem 0.54rem;
font-size: 0.68rem;
font-weight: 700;
color: #1a1a1a;
}
.evidence-drawer[open] > summary {
border-bottom: 1px solid #e5ddd4;
}
.evidence-drawer .json-panel {
border: 0;
border-radius: 0 0 10px 10px;
max-height: 300px;
}
.guard-log {
margin-top: 0.46rem;
display: flex;
flex-direction: column;
gap: 0.42rem;
overflow: auto;
min-height: 0;
flex: 1;
}
.guard-log > div.empty-row {
flex: 1;
border: 0;
border-radius: 0;
background: transparent;
}
.guard-item {
border: 1px solid #e5ddd4;
border-radius: 14px;
background: #faf7f2;
padding: 0.42rem 0.62rem;
display: grid;
gap: 0.18rem;
font-size: 0.68rem;
color: #333;
transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.guard-item.block {
border-color: #e0a0a0;
background: rgba(207, 94, 94, 0.06);
}
.guard-item.allow {
border-color: #8fd4aa;
background: rgba(57, 163, 111, 0.06);
}
.guard-row {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
align-items: center;
font-size: 0.62rem;
}
.guard-pill {
display: inline-flex;
border-radius: 999px;
border: 1px solid #d1c5b8;
background: #f5f1ec;
color: #6b6b6b;
font-size: 0.6rem;
padding: 0.1rem 0.28rem;
text-transform: lowercase;
}
.guard-pill.block {
border-color: rgba(207, 94, 94, 0.35);
background: rgba(207, 94, 94, 0.10);
color: #a63030;
}
.guard-pill.allow {
border-color: rgba(57, 163, 111, 0.35);
background: rgba(57, 163, 111, 0.10);
color: #1d6b45;
}
.guard-step,
.guard-time {
color: #8a7a6a;
}
.quarantine-banner {
margin-top: 0.46rem;
border: 1px solid #e0a0a0;
border-radius: 999px;
background: rgba(207, 94, 94, 0.08);
color: #a63030;
padding: 0.4rem 0.62rem;
font-size: 0.68rem;
font-weight: 700;
}
.fork-meta {
margin-top: 0.46rem;
border: 1px solid #e8a04a;
border-radius: 999px;
background: rgba(232, 116, 12, 0.06);
color: #8a5500;
padding: 0.42rem 0.62rem;
font-size: 0.68rem;
}
.fork-strip {
margin-top: 0.45rem;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.4rem;
}
.fork-label {
font-size: 0.56rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #8a7a6a;
font-weight: 700;
}
.fork-id,
.fork-step {
margin-top: 0.18rem;
border: 1px solid #e5ddd4;
border-radius: 999px;
background: #faf7f2;
color: #1a1a1a;
padding: 0.28rem 0.5rem;
min-height: 1.58rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.6rem;
}
.fork-step {
font-weight: 700;
}
.diff-table td.changed {
background: rgba(232, 116, 12, 0.12);
font-weight: 700;
}
.focus-row {
display: flex;
gap: 0.28rem;
flex-wrap: wrap;
}
.focus-btn {
height: 24px;
border: 1px solid #d1c5b8;
border-radius: 999px;
background: #f5f1ec;
color: #6b6b6b;
font-size: 0.58rem;
font-weight: 700;
padding: 0 0.5rem;
cursor: pointer;
}
.focus-btn.is-active {
border-color: #e8740c;
background: linear-gradient(140deg, #ff8f2e, #e8740c);
color: #fff;
}
.summary {
margin: 0.42rem 0;
font-size: 0.7rem;
color: #333;
font-weight: 700;
}
.code-label {
margin: 0.44rem 0 0.2rem;
font-size: 0.56rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #8a7a6a;
font-weight: 700;
}
.steps {
margin: 0.46rem 0 0;
padding-left: 0.92rem;
display: grid;
gap: 0.28rem;
color: #6b6b6b;
font-size: 0.68rem;
}
.steps code {
border: 1px solid #e8a04a;
background: rgba(232, 116, 12, 0.08);
color: #c55d00;
border-radius: 6px;
padding: 0.02rem 0.16rem;
}
.empty-row {
color: #8a7a6a;
text-align: center;
padding: 2rem 0.68rem;
font-size: 0.72rem;
}
div.empty-row {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2.5rem 1rem;
gap: 0.5rem;
background: #ffffff;
border: 1px solid var(--line);
border-radius: 12px;
min-height: 200px;
}
.hidden {
display: none;
}
.modal {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 90;
width: min(460px, calc(100vw - 24px));
max-height: calc(100dvh - 28px);
pointer-events: none;
display: block;
padding: 0;
}
.modal.hidden {
display: none;
}
.modal-backdrop {
display: none;
}
.modal-card {
position: relative;
width: 100%;
max-height: 100%;
overflow: auto;
pointer-events: auto;
border: 1px solid rgba(232, 116, 12, 0.3);
border-radius: 16px;
background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(250, 247, 242, 0.98));
box-shadow:
0 16px 46px rgba(0, 0, 0, 0.08),
0 1px 0 rgba(255, 255, 255, 0.6) inset;
backdrop-filter: blur(14px) saturate(110%);
padding: 0.74rem;
}
.modal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
}
.modal-head h2 {
margin: 0;
font-size: 1rem;
color: #1a1a1a;
}
.modal-close-btn {
height: 2rem;
border: 1px solid #e0d7cc;
border-radius: 999px;
background: #f5f1ec;
color: #333;
font: inherit;
font-size: 0.66rem;
font-weight: 700;
padding: 0 0.68rem;
cursor: pointer;
}
.modal-close-btn:hover {
border-color: #e8740c;
}
.modal-sub {
margin: 0.38rem 0 0;
font-size: 0.72rem;
color: #6b6b6b;
}
.modal-meta {
margin: 0.5rem 0 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.38rem;
}
.modal-meta div {
border: 1px solid #e5ddd4;
border-radius: 10px;
background: #faf7f2;
padding: 0.36rem 0.42rem;
}
.modal-meta dt {
font-size: 0.56rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #8a7a6a;
font-weight: 700;
}
.modal-meta dd {
margin: 0.16rem 0 0;
font-size: 0.67rem;
color: #1a1a1a;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.modal-tabs {
margin-top: 0.55rem;
display: flex;
gap: 0.34rem;
flex-wrap: wrap;
}
.modal-tab {
height: 1.9rem;
border: 1px solid #e0d7cc;
border-radius: 999px;
background: #f5f1ec;
color: #333;
font: inherit;
font-size: 0.64rem;
font-weight: 700;
padding: 0 0.5rem;
cursor: pointer;
}
.modal-tab.is-active {
border-color: #e8740c;
background: linear-gradient(145deg, #ff8f2e, #e8740c);
color: #fff;
}
.modal-panels {
margin-top: 0.55rem;
display: grid;
grid-template-columns: 1fr;
gap: 0.44rem;
}
.action-group {
border: 1px solid #e5ddd4;
border-radius: 11px;
background: rgba(250, 247, 242, 0.94);
}
.action-group > summary {
cursor: pointer;
padding: 0.52rem 0.58rem;
font-size: 0.72rem;
font-weight: 700;
color: #1a1a1a;
}
.action-group[open] > summary {
border-bottom: 1px solid #e5ddd4;
}
.modal-panel {
border: 0;
border-radius: 0;
background: transparent;
padding: 0.56rem;
display: grid;
gap: 0.4rem;
}
.modal-action-desc {
margin: 0;
font-size: 0.69rem;
color: #6b6b6b;
}
.quick-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.42rem;
}
.quick-grid.two {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.quick-grid.three {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.action-btn {
height: 2.15rem;
border: 1px solid #e0d7cc;
border-radius: 999px;
background: linear-gradient(180deg, #ffffff, #f5f1ec);
color: #333;
font: inherit;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.01em;
cursor: pointer;
transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.action-btn:hover {
transform: translateY(-1px);
border-color: #e8740c;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}
.action-btn:disabled {
opacity: 0.65;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.action-btn.primary {
border-color: #c55d00;
background: linear-gradient(145deg, var(--brand), var(--brand-strong));
color: #fff;
}
.action-btn.success {
border-color: #3d7a60;
background: linear-gradient(180deg, rgba(57, 163, 111, 0.12), rgba(57, 163, 111, 0.18));
color: #1d6b45;
}
.action-btn.danger {
border-color: #cf5e5e;
background: linear-gradient(180deg, rgba(207, 94, 94, 0.08), rgba(207, 94, 94, 0.14));
color: #a63030;
}
.action-btn.muted {
border-color: #d1c5b8;
background: linear-gradient(180deg, #faf7f2, #f5f1ec);
color: #6b6b6b;
}
.action-btn.wide {
width: 100%;
}
.modal-inline {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.36rem;
align-items: end;
}
.advanced-wrap {
border: 1px solid #e5ddd4;
border-radius: 10px;
background: #faf7f2;
}
.advanced-wrap > summary {
cursor: pointer;
padding: 0.44rem 0.54rem;
font-size: 0.63rem;
font-weight: 700;
color: #333;
}
.advanced-wrap[open] > summary {
border-bottom: 1px solid #e5ddd4;
}
.advanced-wrap > .modal-field,
.advanced-wrap > .modal-inline {
padding: 0.48rem;
}
.modal-output {
max-height: 220px;
}
.modal-output-wrap {
border: 1px solid #e5ddd4;
border-radius: 11px;
background: rgba(250, 247, 242, 0.95);
}
.modal-output-wrap > summary {
cursor: pointer;
padding: 0.5rem 0.58rem;
font-size: 0.68rem;
font-weight: 700;
color: #1a1a1a;
}
.modal-output-wrap[open] > summary {
border-bottom: 1px solid #e5ddd4;
}
.modal-output-wrap .modal-output {
margin: 0;
border: 0;
border-radius: 0 0 11px 11px;
}
.modal-field {
display: grid;
gap: 0.2rem;
}
.modal-toggle {
display: grid;
}
.toggle-label {
display: inline-flex;
align-items: center;
gap: 0.42rem;
font-size: 0.67rem;
color: #333;
font-weight: 600;
}
.toggle-label input[type="checkbox"] {
accent-color: #ff8f2e;
}
.modal-field label {
font-size: 0.56rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #8a7a6a;
font-weight: 700;
}
.modal-field input,
.modal-field select,
.modal-field textarea {
border: 1px solid #e5ddd4;
border-radius: 999px;
background: #f5f1ec;
color: #333;
padding: 0.45rem 0.7rem;
font: inherit;
font-size: 0.68rem;
outline: none;
}
.modal-field input:focus,
.modal-field select:focus,
.modal-field textarea:focus {
border-color: #ff8f2e;
box-shadow: 0 0 0 3px rgba(232, 116, 12, 0.15);
}
.modal-status {
margin: 0.52rem 0 0;
border: 1px solid #e8a04a;
border-radius: 999px;
background: rgba(232, 116, 12, 0.06);
color: #8a5500;
padding: 0.42rem 0.5rem;
font-size: 0.68rem;
}
.modal-status.ok {
border-color: #3a7d5f;
background: rgba(57, 163, 111, 0.08);
color: #1d6b45;
}
.modal-status.error {
border-color: #8a3f3f;
background: rgba(207, 94, 94, 0.06);
color: #a63030;
}
/* View transition */
.view-panel.view-entering {
animation: viewFadeIn 280ms ease-out forwards;
}
/* Kirby mascot */
.kirby-mascot { display: inline-block; }
.kirby-mascot.brand-kirby { width: 52px; height: 52px; animation: kirbyBreathe 3s ease-in-out infinite; }
.kirby-mascot.brand-kirby .kirby-eye-right { transform-origin: center; animation: kirbyWink 7s ease-in-out infinite; }
.kirby-mascot.hero-kirby { width: min(230px, 62%); animation: kirbyBounce 2.4s ease-in-out infinite; }
.kirby-mascot.hero-kirby .kirby-eye { transform-origin: center; animation: kirbyBlink 4s ease-in-out infinite; }
.kirby-mascot.loading-kirby { width: 80px; height: 80px; animation: kirbyLoad 1s ease-in-out infinite; filter: drop-shadow(0 6px 16px rgba(232, 116, 12, 0.35)); }
@keyframes kirbyFloat {
0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
25% { transform: translateY(-8px) rotate(-2deg) scale(1.03); }
50% { transform: translateY(-12px) rotate(0deg) scale(1.05); }
75% { transform: translateY(-8px) rotate(2deg) scale(1.03); }
}
@keyframes kirbyBlinkBoth {
0%, 88%, 94%, 100% { transform: scaleY(1); }
91% { transform: scaleY(0.08); }
}
@keyframes kirbyBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes kirbyBlink { 0%,92%,100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes kirbyWink { 0%,90%,94%,100% { transform: scaleY(1); } 92% { transform: scaleY(0.1); } }
@keyframes kirbyBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes kirbyLoad { 0%,100% { transform: translateY(0) scaleX(1) scaleY(1); } 30% { transform: translateY(-18px) scaleX(0.92) scaleY(1.1); } 50% { transform: translateY(0) scaleX(1.08) scaleY(0.9); } }
@keyframes viewFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shellFadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse {
0%,
100% {
transform: scale(1);
opacity: 0.7;
}
50% {
transform: scale(1.26);
opacity: 1;
}
}
@keyframes linkFlow {
to {
stroke-dashoffset: -44;
}
}
@keyframes topologyBlockIn {
0% {
opacity: 0;
stroke-dashoffset: 68;
}
100% {
opacity: 1;
stroke-dashoffset: 0;
}
}
@keyframes topologyNodeFlash {
0% {
fill: rgba(207, 94, 94, 0.44);
stroke-width: 2.8;
}
100% {
fill: rgba(207, 94, 94, 0.08);
stroke-width: 1.6;
}
}
@keyframes nodePulse {
0%,
100% {
opacity: 1;
stroke-width: 2;
transform: scale(1);
}
50% {
opacity: 0.85;
stroke-width: 3;
transform: scale(1.08);
}
}
/* ── Responsive ── */
@media (max-width: 1440px) {
.evidence-view {
grid-template-columns: 1fr;
}
}
@media (max-width: 980px) {
.control-split,
.fork-growth-split,
.session-inventory-row,
.detail-split {
grid-template-columns: 1fr;
}
.pulse-strip {
flex-wrap: wrap;
}
.pulse-stat {
flex: 1 1 40%;
}
.insights-bars {
flex-direction: column;
}
.view-panel {
padding: 0.5rem;
gap: 0.5rem;
}
.panel {
padding: 1rem;
border-radius: 12px;
}
.product-shell {
padding: 0.5rem;
}
.top-bar {
border-radius: 12px;
}
.context-panel.is-open {
--context-max-h: 60vh;
}
.chat-composer.chat-composer-home {
padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.connect-block {
grid-template-columns: 1fr;
grid-template-areas:
"label"
"input"
"button"
"poll";
}
.connect-block button {
width: 100%;
}
.demo-controls {
grid-template-columns: 1fr;
}
.demo-controls .demo-btn.primary {
grid-column: auto;
}
.chat-bubble {
max-width: 85%;
}
.chat-send-btn {
width: 32px;
height: 32px;
min-width: 32px;
}
.fork-strip {
grid-template-columns: 1fr;
}
.modal {
right: 10px;
bottom: 10px;
width: calc(100vw - 20px);
max-height: calc(100dvh - 20px);
}
.modal-meta {
grid-template-columns: 1fr;
}
.modal-inline {
grid-template-columns: 1fr;
}
.quick-grid.two,
.quick-grid.three {
grid-template-columns: 1fr;
}
.timeline-table {
min-width: 660px;
}
.kv-row {
grid-template-columns: 1fr;
gap: 0.2rem;
}
}
@media (max-width: 600px) {
.view-panel {
padding: 0.38rem;
gap: 0.38rem;
}
.panel {
padding: 0.75rem;
border-radius: 10px;
}
.product-shell {
padding: 0.38rem;
}
.top-bar {
border-radius: 10px;
height: 48px;
padding: 0 12px;
}
.top-bar-title {
font-size: 0.92rem;
}
.welcome-heading {
font-size: 20px;
}
.category-pill {
min-width: 64px; padding: 0 12px; font-size: 13px;
}
.chat-log.chat-log-home {
padding: 12px 14px;
}
.chat-composer.chat-composer-home {
padding: 6px 14px max(12px, env(safe-area-inset-bottom));
}
.chat-bubble {
max-width: 85%;
}
.chat-send-btn {
width: 32px;
height: 32px;
min-width: 32px;
}
.topology-svg {
min-width: 100%;
width: 100%;
}
.modal {
right: 6px;
bottom: 6px;
width: calc(100vw - 12px);
}
}
/* ── Marketplace panel ── */
.marketplace-view .marketplace-panel {
overflow-y: auto;
}
.marketplace-controls {
display: flex;
align-items: flex-end;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.marketplace-field {
display: flex;
flex-direction: column;
gap: 3px;
}
.marketplace-field label {
font-size: 0.68rem;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.marketplace-field input,
.marketplace-field select {
height: 32px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--bg);
color: var(--ink);
font: inherit;
font-size: 0.78rem;
padding: 0 8px;
}
.marketplace-field-grow {
flex: 1 1 0;
min-width: 120px;
}
.marketplace-section {
margin-top: 12px;
}
.marketplace-section-title {
font-size: 0.82rem;
font-weight: 650;
color: var(--ink);
margin: 0 0 6px;
}
.marketplace-results-table,
.marketplace-connected-table,
.marketplace-tools-table {
font-size: 0.74rem;
}
.dispatch-result {
margin-top: 8px;
max-height: 200px;
}
/* ── Policy panel ── */
.policy-view .policy-panel {
overflow-y: auto;
}
.policy-controls {
display: flex;
align-items: flex-end;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.policy-actions {
display: flex;
gap: 8px;
margin: 8px 0;
}
.policy-result {
margin-top: 8px;
max-height: 300px;
}
/* ── Settings panel ── */
.settings-view .settings-panel {
overflow-y: auto;
}
.settings-section {
margin-top: 16px;
}
.settings-section:first-of-type {
margin-top: 8px;
}
.settings-actions {
display: flex;
gap: 8px;
margin-bottom: 8px;
}
.demo-btn.danger {
border-color: var(--warn);
color: var(--warn);
}
.demo-btn.danger:hover {
background: rgba(207, 94, 94, 0.08);
}
