.topbar{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-4);background:var(--bg-primary);border-bottom:1px solid var(--border);flex-shrink:0;gap:var(--space-4)}.topbar-left{display:flex;align-items:center;gap:var(--space-2)}.topbar-logo-icon{color:var(--accent-blue)}.topbar-title{font-family:var(--font-mono);font-size:var(--font-sm);font-weight:600;color:var(--text-primary);letter-spacing:-.02em}.topbar-center{display:flex;align-items:center;gap:var(--space-2);color:var(--text-dim);font-family:var(--font-mono);font-size:var(--font-xs)}.topbar-plug-icon{color:var(--text-dim)}.topbar-right{display:flex;align-items:center;gap:var(--space-4)}.topbar-live-badge{display:flex;align-items:center;gap:6px;background:#4a8cff1a;border:1px solid rgba(74,140,255,.3);border-radius:var(--radius-sm);padding:2px 8px;font-family:var(--font-mono);font-size:10px;font-weight:600;color:var(--accent-blue);letter-spacing:.08em}.live-dot{width:6px;height:6px;border-radius:50%;background:var(--accent-blue);animation:pulse-live 2s ease-in-out infinite}.topbar-stat{display:flex;align-items:baseline;gap:4px;font-family:var(--font-mono)}.topbar-stat-value{font-size:var(--font-sm);font-weight:600;color:var(--text-primary)}.topbar-stat-label{font-size:var(--font-xs);color:var(--text-dim)}.topbar-alert .topbar-stat-value{color:var(--accent-red)}.topbar-connection{display:flex;align-items:center;gap:6px}.pulse{animation:pulse-error 1.5s ease-in-out infinite}.topbar-status-label{font-family:var(--font-mono);font-size:var(--font-xs);color:var(--text-secondary)}.session-panel{width:240px;flex-shrink:0;background:var(--bg-primary);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto}.session-search-wrapper{position:relative;padding:var(--space-3) var(--space-3);border-bottom:1px solid var(--border)}.session-search-icon{position:absolute;left:calc(var(--space-3) + 8px);top:50%;transform:translateY(-50%);color:var(--text-dim);pointer-events:none}.session-search-input{width:100%;padding:6px 8px 6px 28px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-mono);font-size:var(--font-xs);outline:none;transition:border-color var(--transition-fast)}.session-search-input::placeholder{color:var(--text-dim)}.session-search-input:focus{border-color:var(--accent-blue)}.session-group{border-bottom:1px solid var(--border)}.session-group-header{width:100%;display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:none;border:none;color:var(--text-secondary);font-family:var(--font-mono);font-size:var(--font-xs);font-weight:500;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;transition:color var(--transition-fast)}.session-group-header:hover{color:var(--text-primary)}.chevron{color:var(--text-dim);transition:transform var(--transition-fast)}.chevron.open{transform:rotate(90deg)}.session-group-count{margin-left:auto;background:var(--bg-surface);border-radius:var(--radius-sm);padding:0 5px;font-size:10px;color:var(--text-dim)}.session-group-list{padding:var(--space-1) var(--space-2) var(--space-2)}.session-card{padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast);margin-top:var(--space-1)}.session-card:hover{background:var(--bg-hover)}.session-card--active{background:var(--bg-hover);border-color:var(--accent-blue)}.session-card-header{display:flex;align-items:center;gap:var(--space-2);margin-bottom:4px}.session-card-name{font-family:var(--font-mono);font-size:var(--font-xs);font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.session-card-meta{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text-dim);font-family:var(--font-mono)}.dot{color:var(--text-dim)}.session-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:4px}.session-card-time{font-size:10px;color:var(--text-dim);font-family:var(--font-mono)}.session-card-alert-badge{display:flex;align-items:center;gap:3px;background:#e05c5c26;color:var(--accent-red);border-radius:var(--radius-sm);padding:1px 5px;font-size:10px;font-family:var(--font-mono);font-weight:600}.session-panel-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:var(--space-8);text-align:center;gap:var(--space-3)}.empty-icon{color:var(--text-dim)}.empty-title{font-family:var(--font-mono);font-size:var(--font-sm);font-weight:600;color:var(--text-secondary)}.empty-subtitle{font-size:var(--font-xs);color:var(--text-dim);line-height:1.4}.topology-graph{flex:3;background:var(--bg-deep);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.graph-svg{width:100%;height:100%}.node-group{cursor:pointer;transition:transform var(--transition-fast)}.node-group:hover circle:first-child{transform:scale(1.1)}.node-label{pointer-events:none;-webkit-user-select:none;user-select:none}.edge-normal{transition:stroke var(--transition-fast)}.edge-anomaly{animation:pulse-error 2s ease-in-out infinite}.graph-controls{position:absolute;bottom:var(--space-4);right:var(--space-4);display:flex;flex-direction:column;gap:var(--space-1)}.graph-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:opacity var(--transition-fast),color var(--transition-fast)}.graph-btn:hover{color:var(--text-primary);opacity:1}.graph-btn--alert{color:var(--accent-red);border-color:#e05c5c4d;animation:pulse-error 2s ease-in-out infinite}.graph-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);color:var(--text-dim)}.graph-empty-title{font-family:var(--font-mono);font-size:var(--font-sm);font-weight:600;color:var(--text-secondary)}.graph-empty-subtitle{font-size:var(--font-xs);color:var(--text-dim)}.graph-svg:active{cursor:grabbing}.message-log{display:flex;flex-direction:column;height:100%;overflow:hidden}.message-log-filters{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border);background:var(--bg-surface);gap:var(--space-2);display:flex;flex-direction:column}.filter-search{position:relative}.filter-search-icon{position:absolute;left:8px;top:50%;transform:translateY(-50%);color:var(--text-dim);pointer-events:none}.filter-search-input{width:100%;padding:5px 8px 5px 26px;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-mono);font-size:var(--font-xs);outline:none}.filter-search-input:focus{border-color:var(--accent-blue)}.filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}.filter-label{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;margin-right:2px}.filter-group{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.filter-chip{padding:2px 7px;background:var(--bg-hover);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);font-family:var(--font-mono);font-size:10px;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast);text-transform:capitalize}.filter-chip:hover{background:var(--bg-surface);color:var(--text-primary)}.filter-chip--active{background:color-mix(in srgb,var(--chip-color, var(--accent-blue)) 15%; border-color: color-mix(in srgb,var(--chip-color, var(--accent-blue)) 50%; color: var(--chip-color, var(--accent-blue)); } .filter-clear-btn {display: flex; align-items: center; gap: 3px; padding: 2px 7px; background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-dim); font-family: var(--font-mono); font-size: 10px; cursor: pointer; transition: color var(--transition-fast); margin-left: auto;} .filter-clear-btn:hover {color: var(--accent-red); border-color: var(--accent-red);} .message-log-list {flex: 1; overflow-y: auto; padding: var(--space-1) 0;} .message-entry {display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-left: 3px solid transparent; cursor: pointer; transition: background var(--transition-fast); font-family: var(--font-mono); font-size: 11px; flex-wrap: nowrap; overflow: hidden;} .message-entry:hover {background: var(--bg-hover);} .message-entry--selected {background: rgba(74,140,255,.08); border-left-color: var(--accent-blue);} .message-entry--error {border-left-color: var(--accent-red);} .message-index {color: var(--text-dim); min-width: 36px; text-align: right;} .message-time {color: var(--text-dim); min-width: 64px;} .message-type-badge {padding: 1px 6px; border-radius: var(--radius-sm); font-size: 10px; font-weight: 600; min-width: 64px; text-align: center;} .message-agent {color: var(--text-secondary); max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .message-arrow {color: var(--text-dim); flex-shrink: 0;} .message-preview {color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;} .message-error-text {color: var(--accent-red); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .message-log-empty {display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-dim); font-family: var(--font-mono); font-size: var(--font-xs);} .message-log-load-more {text-align: center; padding: var(--space-3); color: var(--accent-blue); font-family: var(--font-mono); font-size: var(--font-xs); cursor: pointer; transition: opacity var(--transition-fast);} .message-log-load-more:hover {opacity: .7;} .agent-grid {display: grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: var(--space-3); padding: var(--space-4);} .agent-card {display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast);} .agent-card:hover {background: var(--bg-hover); border-color: var(--accent-blue); transform: translateY(-1px);} .agent-card--anomaly {border-color: rgba(224,92,92,.4); animation: pulse-error 2s ease-in-out infinite;} .agent-card-avatar {width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--bg-deep); flex-shrink: 0;} .agent-card-info {display: flex; flex-direction: column; gap: 2px; min-width: 0;} .agent-card-name {font-family: var(--font-mono); font-size: var(--font-xs); font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .agent-card-msgs {font-size: 10px; color: var(--text-dim); font-family: var(--font-mono);} .agent-tabs-empty {display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-dim); font-family: var(--font-mono); font-size: var(--font-xs);} .agent-detail {padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); max-height: 100%; overflow-y: auto;} .agent-detail-back {background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--font-xs); cursor: pointer; align-self: flex-start; transition: color var(--transition-fast),border-color var(--transition-fast);} .agent-detail-back:hover {color: var(--text-primary); border-color: var(--accent-blue);} .agent-detail-card {display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md);} .agent-detail-avatar {width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--bg-deep); flex-shrink: 0;} .agent-detail-name {font-size: var(--font-md); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-2);} .agent-detail-stats {display: flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: var(--font-xs); color: var(--text-secondary); margin-bottom: 4px;} .dot {color: var(--text-dim);} .agent-detail-time {font-size: var(--font-xs); color: var(--text-dim); font-family: var(--font-mono);} .agent-detail-section {background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2);} .agent-detail-section-title {font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim);} .agent-detail-errors {display: flex; flex-direction: column; gap: var(--space-2);} .agent-error-entry {display: flex; align-items: baseline; gap: var(--space-2); font-family: var(--font-mono); font-size: 10px; color: var(--accent-red); padding: var(--space-2); background: rgba(224,92,92,.08); border-radius: var(--radius-sm);} .agent-detail-tools {display: flex; flex-wrap: wrap; gap: var(--space-1);} .tool-chip {background: rgba(155,125,255,.15); color: var(--accent-purple); border-radius: var(--radius-sm); padding: 2px 8px; font-family: var(--font-mono); font-size: 10px;} .agent-anomaly-entry {display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 10px; color: var(--accent-amber);} .anomaly-badge {padding: 1px 6px; border-radius: var(--radius-sm); font-size: 10px; font-weight: 600; text-transform: capitalize;} .anomaly-badge.critical {background: rgba(224,92,92,.2); color: var(--accent-red);} .anomaly-badge.warning {background: rgba(240,160,32,.2); color: var(--accent-amber);} .replay-scrubber {padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3);} .replay-controls {display: flex; align-items: center; gap: var(--space-3);} .replay-btn {width: 32px; height: 32px; border-radius: 50%; background: var(--accent-blue); color: var(--bg-deep); font-size: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity var(--transition-fast); border: none;} .replay-btn:hover {opacity: .85;} .replay-speeds {display: flex; gap: 2px;} .replay-speed {padding: 3px 8px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-dim); font-family: var(--font-mono); font-size: 10px; cursor: pointer; transition: background var(--transition-fast),color var(--transition-fast);} .replay-speed.active {background: rgba(74,140,255,.2); color: var(--accent-blue); border-color: rgba(74,140,255,.4);} .replay-time-label {margin-left: auto; font-family: var(--font-mono); font-size: var(--font-xs); color: var(--text-secondary); font-variant-numeric: tabular-nums;} .replay-track-wrapper {padding: 4px 0;} .replay-track {height: 8px; background: var(--bg-surface); border-radius: 4px; position: relative; cursor: crosshair; border: 1px solid var(--border);} .replay-track-fill {position: absolute; left: 0; top: 0; height: 100%; background: linear-gradient(90deg,rgba(0,212,255,.3),rgba(0,212,255,.15)); border-radius: 4px; pointer-events: none;} .replay-anomaly-marker {position: absolute; top: -2px; width: 8px; height: 12px; background: var(--red); transform: translateX(-4px); clip-path: polygon(0 0,100% 0,100% 70%,50% 100%,0 70%); cursor: pointer; z-index: 2; border: none; border-radius: 0; outline: none; padding: 0;} .replay-playhead {position: absolute; top: -4px; width: 12px; height: 16px; background: var(--accent-blue); border-radius: 2px; transform: translateX(calc(0% - 6px)); cursor: grab; z-index: 3; box-shadow: 0 0 4px rgba(74,140,255,.5);} .replay-playhead:active {cursor: grabbing;} .replay-tick-labels {display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--text-dim);} .replay-scrubber-empty {display: flex; align-items: center; justify-content: center; padding: var(--space-8); color: var(--text-dim); font-family: var(--font-mono); font-size: var(--font-xs);} .detail-panel {flex: 2; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-primary); border-left: 1px solid var(--border); min-width: 280px;} .detail-tabs-bar {display: flex; align-items: center; padding: 0 var(--space-4); border-bottom: 1px solid var(--border); background: var(--bg-surface); gap: 0; flex-shrink: 0; height: 40px;} .detail-tab {display: flex; align-items: center; gap: 6px; padding: 0 var(--space-4); height: 40px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); font-family: var(--font-mono); font-size: var(--font-xs); font-weight: 500; cursor: pointer; transition: color var(--transition-fast),border-color var(--transition-fast); margin-bottom: -1px;} .detail-tab:hover {color: var(--text-secondary);} .detail-tab--active {color: var(--accent-blue); border-bottom-color: var(--accent-blue);} .detail-tab-badge {background: rgba(224,92,92,.2); color: var(--accent-red); border-radius: 10px; padding: 0 5px; font-size: 10px; font-weight: 700; min-width: 16px; text-align: center;} .detail-panel-content {flex: 1; overflow: hidden; display: flex; flex-direction: column;} .status-bar {height: 32px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-4); background: var(--bg-primary); border-top: 1px solid var(--border); flex-shrink: 0; font-family: var(--font-mono); font-size: 11px;} .status-bar-left,.status-bar-center,.status-bar-right {display: flex; align-items: center; gap: var(--space-2);} .status-bar-left {flex: 1;} .status-bar-center {flex: 1; justify-content: center;} .status-bar-right {flex: 1; justify-content: flex-end;} .status-bar-stat {color: var(--text-dim);} .status-bar-stat strong {color: var(--text-secondary); font-weight: 600;} .status-bar-sep {color: var(--text-dim);} .status-bar-alert {display: flex; align-items: center; gap: 4px; color: var(--accent-red); font-weight: 600; background: rgba(224,92,92,.1); border-radius: var(--radius-sm); padding: 1px 6px;} .status-bar-time {color: var(--text-dim); font-variant-numeric: tabular-nums;} .anomaly-toast-stack {position: fixed; top: 64px ; right: 16px; z-index: 1000; display: flex; flex-direction: column; gap: var(--space-2); max-width: 320px;} .anomaly-toast {display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid; border-left-width: 3px; background: var(--bg-surface); animation: slide-in-right .25s ease-out;} .anomaly-toast--critical {border-color: var(--accent-red); border-left-color: var(--accent-red);} .anomaly-toast--warning {border-color: var(--accent-amber); border-left-color: var(--accent-amber);} .anomaly-toast-icon {flex-shrink: 0; margin-top: 2px;} .anomaly-toast--critical .anomaly-toast-icon {color: var(--accent-red);} .anomaly-toast--warning .anomaly-toast-icon {color: var(--accent-amber);} .anomaly-toast-content {flex: 1; min-width: 0;} .anomaly-toast-title {font-family: var(--font-mono); font-size: var(--font-xs); font-weight: 700; color: var(--text-primary); margin-bottom: 3px;} .anomaly-toast-desc {font-size: 12px; color: var(--text-secondary); margin-bottom: 3px; line-height: 1.3;} .anomaly-toast-agents {font-family: var(--font-mono); font-size: 10px; color: var(--text-dim);} .anomaly-toast-dismiss {flex-shrink: 0; padding: 4px; border-radius: var(--radius-sm); color: var(--text-dim); transition: color var(--transition-fast),background var(--transition-fast); cursor: pointer;} .anomaly-toast-dismiss:hover {color: var(--text-primary); background: var(--bg-hover);} .anomaly-toast-older {padding: var(--space-2) var(--space-3); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); text-align: center;} @keyframes fade-shrink {from {opacity: 1; transform: scale(1);} to {opacity: 0; transform: scale(.95);}} :root { --bg-deep: #0d0f14; --bg-primary: #13161e; --bg-surface: #1a1e2a; --bg-hover: #21263a; --border: #2a3050; --text-primary: #e8eaf0; --text-secondary: #8b90a8; --text-dim: #555a75; --accent-blue: #4a8cff; --accent-green: #3dba7e; --accent-amber: #f0a020; --accent-red: #e05c5c; --accent-purple: #9b7dff; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --font-xs: 11px; --font-sm: 13px; --font-md: 15px; --font-lg: 20px; --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; --transition-fast: .15s ease-out; --transition-normal: .25s ease-out; } *,*::before,*::after {box-sizing: border-box; margin: 0; padding: 0;} html,body,#root {height: 100%; width: 100%; overflow: hidden;} body {background-color: var(--bg-deep); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--font-sm); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} h1,h2,h3,.mono {font-family: var(--font-mono);} a {color: var(--accent-blue); text-decoration: none;} a:hover {text-decoration: underline;} button {font-family: inherit; cursor: pointer; border: none; background: none;} ::-webkit-scrollbar {width: 6px; height: 6px;} ::-webkit-scrollbar-track {background: var(--bg-primary);} ::-webkit-scrollbar-thumb {background: var(--border); border-radius: 3px;} ::-webkit-scrollbar-thumb:hover {background: var(--text-dim);} :focus-visible {outline: 2px solid var(--accent-blue); outline-offset: 2px;} button,[role="button"] {cursor: pointer;} @keyframes pulse-error {0%,100% {opacity: 1;} 50% {opacity: .5;}} @keyframes pulse-live {0%,100% {opacity: 1; transform: scale(1);} 50% {opacity: .6; transform: scale(.95);}} @keyframes slide-in-right {from {transform: translateX(110%); opacity: 0;} to {transform: translateX(0); opacity: 1;}} @keyframes fade-out {from {opacity: 1; transform: scale(1);} to {opacity: 0; transform: scale(.95);}} @keyframes scale-in {from {transform: scale(0); opacity: 0;} to {transform: scale(1); opacity: 1;}} @keyframes shimmer {0% {background-position: -200% 0;} 100% {background-position: 200% 0;}} @media (prefers-reduced-motion: reduce) {*,*::before,*::after {animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;}} @media (max-width: 1199px) {body::before {content: "Multi-Agent Debugger is optimized for desktop screens (1200px+)."; position: fixed; inset: 0; background: var(--bg-deep); color: var(--text-secondary); font-family: var(--font-mono); display: flex; align-items: center; justify-content: center; padding: var(--space-8); text-align: center; z-index: 9999; font-size: var(--font-md);}} .text-dim {color: var(--text-dim);} .text-secondary {color: var(--text-secondary);} .text-green {color: var(--accent-green);} .text-amber {color: var(--accent-amber);} .text-red {color: var(--accent-red);} .text-blue {color: var(--accent-blue);} .text-purple {color: var(--accent-purple);} .app {display: flex; flex-direction: column; height: 100vh; width: 100vw; overflow: hidden; background: var(--bg-deep);} .app-body {flex: 1; display: flex; overflow: hidden;} .app-main {flex: 1; display: flex; overflow: hidden; min-width: 0;}))}