.so-shell { display:grid; grid-template-columns:13.5rem minmax(0,1fr); min-height:34rem; border:1px solid var(--cx-border); border-radius:var(--cx-radius-lg); overflow:hidden; background:var(--cx-surface-1); }
.so-nav { padding:var(--cx-s3); border-right:1px solid var(--cx-border); background:var(--cx-surface-2); display:flex; flex-direction:column; gap:2px; }
.so-nav__label { padding:var(--cx-s3) var(--cx-s2) var(--cx-s1); font-size:10px; font-weight:650; letter-spacing:.09em; text-transform:uppercase; color:var(--cx-text-muted); }
.so-nav button { width:100%; text-align:left; border:0; border-radius:var(--cx-radius-md); padding:7px 9px; background:transparent; color:var(--cx-ink-2); cursor:pointer; font:inherit; font-size:13px; }
.so-nav button:hover { background:var(--cx-surface-1); color:var(--cx-text); }
.so-nav button[aria-current="page"] { background:var(--cx-accent-wash); color:var(--cx-accent-quiet); font-weight:650; }
.so-main { min-width:0; padding:var(--cx-s5); }
.so-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--cx-s3); margin-bottom:var(--cx-s4); }
.so-head h2 { margin:0; font-size:20px; font-weight:650; }
.so-head p { margin:4px 0 0; color:var(--cx-text-muted); font-size:13px; max-width:48rem; }
.so-demo { white-space:nowrap; border:1px solid var(--cx-border); border-radius:999px; padding:3px 8px; font-size:10px; font-weight:650; color:var(--cx-text-muted); }
.so-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--cx-s3); margin-bottom:var(--cx-s4); }
.so-kpi { padding:var(--cx-s4); border:1px solid var(--cx-border); border-radius:var(--cx-radius-lg); background:var(--cx-panel); }
.so-kpi strong { display:block; font-size:26px; font-variant-numeric:tabular-nums; }
.so-kpi span { display:block; margin-top:2px; font-size:12px; color:var(--cx-text-muted); }
.so-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--cx-s3); }
.so-card { border:1px solid var(--cx-border); border-radius:var(--cx-radius-lg); overflow:hidden; min-width:0; }
.so-card h3 { margin:0; padding:var(--cx-s3) var(--cx-s4); border-bottom:1px solid var(--cx-border); font-size:13px; font-weight:650; }
.so-card__body { padding:var(--cx-s3) var(--cx-s4); }
.so-card--button { appearance:none; padding:0; text-align:left; color:inherit; background:transparent; cursor:pointer; font:inherit; }
.so-card--button:hover { border-color:var(--cx-accent); }
.so-attention { display:flex; align-items:baseline; gap:8px; padding:8px 0; border-bottom:1px solid var(--cx-border-soft); }
.so-attention:last-child { border-bottom:0; }
.so-attention strong { min-width:2ch; font-variant-numeric:tabular-nums; }
.so-attention span { color:var(--cx-text-2); font-size:13px; }
.so-channel { display:grid; grid-template-columns:1fr auto; gap:4px 12px; padding:8px 0; border-bottom:1px solid var(--cx-border-soft); }
.so-channel:last-child { border-bottom:0; }
.so-channel small { grid-column:1/-1; color:var(--cx-text-muted); }
.so-state { font-size:10px; font-weight:650; border:1px solid var(--cx-border); border-radius:999px; padding:2px 7px; text-transform:capitalize; }
.so-empty,.so-error,.so-loading { border:1px dashed var(--cx-border); border-radius:var(--cx-radius-lg); padding:2rem; color:var(--cx-text-muted); text-align:center; }
.so-error { border-color:color-mix(in srgb,var(--cx-error) 45%,var(--cx-border)); color:var(--cx-error); }
.so-note { margin-bottom:var(--cx-s4); padding:10px 12px; border-left:3px solid var(--cx-accent); background:var(--cx-accent-wash); color:var(--cx-text-2); font-size:12px; }
.so-filter,.so-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:var(--cx-s3); }
.so-filter input,.so-filter select,.so-form input,.so-form select,.so-card textarea { min-width:0; border:1px solid var(--cx-border); border-radius:var(--cx-radius-md); background:var(--cx-surface-1); color:var(--cx-text); padding:8px 9px; font:inherit; font-size:13px; }
.so-filter input { flex:1 1 14rem; }
.so-form label,.so-card label { display:grid; gap:5px; color:var(--cx-text-2); font-size:12px; }
.so-form textarea,.so-card textarea { width:100%; resize:vertical; }
.so-filter button,.so-actions button,.so-card button,.so-back { border:1px solid var(--cx-border); border-radius:var(--cx-radius-md); background:var(--cx-surface-2); color:var(--cx-text); padding:7px 10px; font:inherit; font-size:12px; cursor:pointer; }
.so-primary { background:var(--cx-accent)!important; color:white!important; border-color:var(--cx-accent)!important; }
.so-danger { border-color:color-mix(in srgb,var(--cx-error) 50%,var(--cx-border))!important; color:var(--cx-error)!important; }
.so-back { margin-bottom:var(--cx-s3); }
.so-list { border:1px solid var(--cx-border); border-radius:var(--cx-radius-lg); overflow:hidden; }
.so-list-row { appearance:none; width:100%; display:flex; justify-content:space-between; align-items:center; gap:var(--cx-s3); padding:12px 14px; border:0; border-bottom:1px solid var(--cx-border-soft); background:transparent; color:inherit; text-align:left; cursor:pointer; font:inherit; }
.so-list-row:last-child { border-bottom:0; }.so-list-row:hover { background:var(--cx-surface-2); }
.so-list-row>span { display:grid; gap:3px; }.so-list-row>span:last-child { justify-items:end; }.so-list-row small { color:var(--cx-text-muted); }
.so-detail-head { display:flex; justify-content:space-between; gap:var(--cx-s3); align-items:flex-start; margin-bottom:var(--cx-s3); }.so-detail-head h3 { margin:0 0 4px; }.so-detail-head p { margin:0; color:var(--cx-text-muted); }
.so-conversation { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(17rem,.8fr); gap:var(--cx-s3); }.so-side { display:grid; gap:var(--cx-s3); align-content:start; }
.so-thread { display:grid; gap:10px; }.so-message { max-width:85%; padding:10px 12px; border:1px solid var(--cx-border); border-radius:var(--cx-radius-lg); background:var(--cx-surface-2); }.so-message--outbound { margin-left:auto; background:var(--cx-accent-wash); }.so-message>div { display:flex; justify-content:space-between; gap:12px; font-size:10px; color:var(--cx-text-muted); }.so-message p { white-space:pre-wrap; overflow-wrap:anywhere; margin:7px 0; }.so-message small { color:var(--cx-text-muted); }
.so-help,.so-meta { color:var(--cx-text-muted); font-size:11px; }.so-meta { padding:7px 0; border-bottom:1px solid var(--cx-border-soft); }
.so-warning,.so-ok,.so-preview { margin:8px 0; border:1px solid var(--cx-border); border-radius:var(--cx-radius-md); padding:9px 10px; font-size:12px; }.so-warning { border-color:#c98b2f; background:color-mix(in srgb,#c98b2f 10%,transparent); }.so-ok { border-color:#4d9472; color:var(--cx-text-2); background:color-mix(in srgb,#4d9472 10%,transparent); }
.so-linkrow { width:100%; display:block; text-align:left; margin:4px 0; }.so-step { padding:8px 0; border-bottom:1px solid var(--cx-border-soft); }.so-step p { white-space:pre-wrap; overflow-wrap:anywhere; }.so-step small { color:var(--cx-text-muted); }
.so-card pre,.so-trace pre { max-height:15rem; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; padding:8px; border-radius:var(--cx-radius-md); background:var(--cx-surface-2); font-size:10px; }
.so-run { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--cx-s3); }.so-trace { display:grid; gap:8px; }.so-trace-row { border-left:3px solid var(--cx-border); padding:7px 9px; background:var(--cx-surface-2); }.so-trace-row--blocked,.so-trace-row--error { border-color:var(--cx-error); }.so-trace-row span { float:right; font-size:10px; text-transform:uppercase; }
.so-pipeline { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; align-items:start; overflow-x:auto; }.so-pipeline>section{min-height:180px;padding:10px;border:1px solid var(--cx-border);border-radius:var(--cx-radius-lg);background:var(--cx-surface-2)}.so-pipeline>section h3{margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.05em}.so-pipeline-card{width:100%;display:grid;gap:5px;text-align:left;margin:7px 0;padding:10px;border:1px solid var(--cx-border);border-radius:var(--cx-radius-md);background:var(--cx-surface-1);color:inherit}.so-pipeline-card small,.so-pipeline-card span{color:var(--cx-text-muted)}
.so-flow-layout{display:grid;grid-template-columns:220px minmax(0,1fr) 240px;gap:var(--cx-s3);align-items:start;margin-top:var(--cx-s3)}.so-flow-canvas{min-height:300px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:20px;border:1px dashed var(--cx-border);border-radius:var(--cx-radius-lg);background:var(--cx-surface-2)}.so-node{width:150px;display:grid;gap:6px;padding:10px;border:1px solid var(--cx-border);border-radius:var(--cx-radius-lg);background:var(--cx-surface-1)}.so-node--trace{outline:3px solid var(--cx-accent);outline-offset:3px}.so-node>span{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:var(--cx-accent-wash);color:var(--cx-accent);font-size:11px}.so-node textarea{width:100%;resize:vertical}.so-edge{color:var(--cx-accent);font-size:20px}.so-trace-link{display:inline-flex;margin-top:8px;font-weight:700}
.so-unavailable{display:grid;justify-items:start;gap:10px;max-width:38rem;padding:var(--cx-s5);border:1px dashed var(--cx-border);border-radius:var(--cx-radius-lg);background:var(--cx-surface-2)}.so-unavailable strong{font-size:15px}.so-unavailable p{margin:0;color:var(--cx-text-muted);font-size:13px}
@media(max-width:1000px){.so-shell{grid-template-columns:1fr}.so-nav{border-right:0;border-bottom:1px solid var(--cx-border);flex-direction:row;overflow:auto}.so-nav__label{display:none}.so-nav button{width:auto;white-space:nowrap}.so-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.so-conversation,.so-run,.so-flow-layout{grid-template-columns:1fr}.so-flow-canvas{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap}.so-node{min-width:170px}}
@media(max-width:620px){.so-main{padding:var(--cx-s3)}.so-kpis,.so-grid{grid-template-columns:1fr}.so-head,.so-detail-head{align-items:flex-start;flex-direction:column}.so-demo{white-space:normal}.so-list-row{align-items:flex-start}.so-list-row>span:last-child{justify-items:start}.so-message{max-width:100%}}