:root{font-family:IBM Plex Sans,Avenir Next,system-ui,sans-serif;color:#1d2838;background:#eef2f7}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{background:radial-gradient(circle at top left,rgba(222,235,255,.85),transparent 30%),linear-gradient(180deg,#f5f8fd,#e2eaf4)}.live-shell{display:grid;grid-template-rows:minmax(0,9fr) minmax(92px,1fr);height:100%;padding:16px;gap:14px}.graph-pane,.queue-pane{border:1px solid rgba(150,167,191,.28);border-radius:22px;background:#ffffffd1;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 18px 40px #24355214}.graph-pane{min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr);overflow:hidden}.pane-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px 20px 8px}.pane-header h1{margin:0;font-size:1.35rem}.pane-subtitle{margin:6px 0 0;color:#61728a;font-size:.93rem}.status-strip{display:flex;gap:8px;flex-wrap:wrap}.status-pill{border-radius:999px;padding:6px 10px;background:#edf2f8;color:#506178;font-size:.78rem;font-weight:700}.status-pill.active{background:#dff2e8;color:#177245}.status-pill.warning{background:#fff1dd;color:#9b5b0a}.graph-meta{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:0 20px 12px}.meta-card{border-radius:16px;border:1px solid #e0e7f1;background:#f8fafdeb;padding:12px 14px;min-width:0}.meta-card span{display:block;color:#6a7a8f;font-size:.78rem;margin-bottom:4px}.meta-card strong{display:block;color:#1f2e43;font-size:.92rem;word-break:break-word}.graph-stage{position:relative;min-height:0;overflow:hidden;border-top:1px solid rgba(217,225,236,.9);background:radial-gradient(circle at top center,rgba(202,220,246,.3),transparent 40%),linear-gradient(180deg,#f9fbfef2,#f1f5fbeb)}.graph-svg{width:100%;height:100%;display:block}.attachment-preview{position:absolute;pointer-events:none;z-index:3}.attachment-preview-shape{width:100%;height:100%;padding:12px 14px 18px;color:#1f3150;background:linear-gradient(180deg,#fffffffa,#edf4fffa);border:2px solid #9db6dc;clip-path:polygon(0 0,100% 0,100% 84%,60% 84%,52% 100%,46% 84%,0 84%);box-shadow:0 14px 28px #2c487829;animation:preview-fade 2s ease}.attachment-preview-text{display:-webkit-box;overflow:hidden;color:#1f3150;font-size:14px;line-height:1.18;font-weight:600;text-wrap:pretty;-webkit-line-clamp:4;-webkit-box-orient:vertical}.graph-edge{fill:none;stroke-width:3.5;stroke-linecap:round;opacity:.94}.graph-node{stroke:#fffffff5;stroke-width:4;filter:drop-shadow(0 8px 14px rgba(34,51,82,.16))}.flash-node{animation:node-flash .42s ease-in-out 2}.empty-state{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:20px;color:#607188;font-size:1rem;text-align:center}.topic-label,.root-label{position:absolute;left:20px;border-radius:999px;padding:6px 10px;background:#ffffffe0;box-shadow:0 10px 24px #2a3e6314;color:#55677f;font-size:.78rem;font-weight:700}.topic-label{bottom:18px}.root-label{top:18px}.queue-pane{min-height:120px;padding:10px 14px;overflow:hidden}.queue-track{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;height:100%}.queue-items{display:flex;align-items:flex-end;gap:12px;min-width:0;overflow:hidden;padding:0 4px}.queue-item{flex:0 0 auto;transition:transform .28s ease,opacity .28s ease}.queue-item-shape{width:150px;height:88px;padding:12px 14px 18px;color:#1f3150;background:linear-gradient(180deg,#fff,#edf4ff);border:2px solid #9db6dc;clip-path:polygon(0 0,100% 0,100% 84%,60% 84%,52% 100%,46% 84%,0 84%);display:flex;align-items:flex-start;box-shadow:0 8px 18px #2c487814}.queue-item-text{display:-webkit-box;overflow:hidden;color:#1f3150;font-size:14px;line-height:1.18;font-weight:600;text-wrap:pretty;-webkit-line-clamp:4;-webkit-box-orient:vertical}.queue-item.attaching .queue-item-shape,.queue-item.rejected .queue-item-shape{animation:queue-flash .42s ease-in-out 2}.queue-item.rejected .queue-item-shape{border-color:#e57a7a;background:linear-gradient(180deg,#fff8f8,#ffeaea)}.not-attached-box{width:128px;height:56px;border-radius:16px;border:2px solid #d3915a;background:linear-gradient(180deg,#fff5eb,#ffe7cf);color:#844616;display:grid;place-items:center;font-size:.8rem;font-weight:800;text-align:center;box-shadow:0 10px 20px #84461614}.flash-box{animation:queue-flash .42s ease-in-out 2}@keyframes queue-flash{0%,to{transform:scale(1);opacity:1;filter:brightness(1)}50%{transform:scale(1.06);opacity:.42;filter:brightness(1.18)}}@keyframes node-flash{0%,to{opacity:1;filter:drop-shadow(0 8px 14px rgba(34,51,82,.16))}50%{opacity:.35;filter:drop-shadow(0 0 16px rgba(43,111,242,.6))}}@keyframes preview-fade{0%,to{opacity:1;transform:translateY(0)}50%{opacity:.96;transform:translateY(-2px)}}@media (max-width: 900px){.live-shell{padding:10px;gap:10px}.graph-meta{grid-template-columns:repeat(2,minmax(0,1fr))}.pane-header{flex-direction:column}.queue-track{grid-template-columns:1fr;justify-items:stretch}.queue-items{min-height:98px}.not-attached-box{width:100%}}