.app-shell{display:grid;grid-template-columns:var(--rail-width) var(--sidebar-width) minmax(0,1fr);height:100dvh;min-width:1024px;overflow:hidden;border:2px solid var(--divider);background:var(--surface)}
.app-shell.no-sidebar{grid-template-columns:var(--rail-width) minmax(0,1fr)}

/* One rail for every workspace view. No view is allowed to recolor it. */
.rail{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:center;gap:8px;width:var(--rail-width);height:100%;padding:12px 0;background:var(--rail-bg);border-right:2px solid var(--border);color:var(--text);z-index:40}
.brand-mark{display:grid;place-items:center;width:48px;height:48px;margin-bottom:10px;border:2px solid var(--border);background:var(--brand);color:#fff;font-size:24px;font-weight:900;box-shadow:3px 3px 0 var(--border)}
.rail-btn{position:relative;display:grid;place-items:center;width:var(--rail-button);height:var(--rail-button);min-height:var(--rail-button);padding:0;border:2px solid transparent;background:transparent;color:var(--text)}
.rail-btn .icon{width:var(--rail-icon);height:var(--rail-icon);stroke-width:2}
.rail-btn:hover{border-color:var(--border);background:rgba(255,255,255,.55)}
.rail-btn.active{border-color:var(--border);background:#fff;color:var(--brand);box-shadow:3px 3px 0 var(--border)}
.rail-btn.rail-utility.active{background:#fff}
.rail-label{position:absolute;left:55px;display:none;white-space:nowrap;border:2px solid var(--border);background:#fff;padding:4px 8px;font-size:12px;font-weight:700;box-shadow:3px 3px 0 var(--border);z-index:120}
.rail-btn:hover .rail-label,.rail-btn:focus-visible .rail-label{display:block}
.rail-spacer{flex:1}

.sidebar{grid-column:2;grid-row:1;min-width:0;height:100%;overflow:auto;background:var(--brand-softer);border-right:2px solid var(--divider);scrollbar-width:thin;scrollbar-color:#C88A98 transparent}
.app-shell.no-sidebar .sidebar{display:none}
.workspace-head{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;height:var(--header-height);padding:0 16px;border-bottom:1px solid var(--divider);background:var(--brand-softer)}
.workspace-head strong{display:block;font-size:18px}.workspace-head span{color:var(--muted);font-size:12px}.workspace-head button,.section-add{display:grid;place-items:center;width:30px;height:30px;border:0;background:transparent;color:var(--brand)}
#sidebar-body{padding:14px 12px 26px}
.sidebar-shortcut{display:flex;align-items:center;gap:9px;width:100%;padding:8px;border:0;background:transparent;text-align:left}.sidebar-shortcut:hover{background:var(--brand-soft)}
.sidebar-section{margin:4px 0 12px}.section-title{display:flex;align-items:center;justify-content:space-between;height:32px;color:var(--muted)}
.section-toggle{display:flex;align-items:center;gap:5px;border:0;background:transparent;color:inherit}.section-toggle .icon{width:15px;height:15px}.chevron-collapsed{transform:rotate(-90deg)}
.section-title>span{display:flex;align-items:center;gap:3px}.section-title b{font-weight:500}.section-body{display:grid;gap:2px}.sidebar-hint{margin:4px 8px 10px;color:#9A9093;font-size:12px}
.row-wrap{position:relative;display:flex;align-items:center}.row-wrap.active{background:var(--brand-soft)}
.channel{display:flex;align-items:center;gap:8px;width:100%;min-width:0;height:36px;padding:0 9px;border:0;background:transparent;text-align:left;overflow:hidden}.channel:hover{background:var(--brand-soft)}.channel-icon{color:var(--muted)}
.dm-channel b,.channel{white-space:nowrap;text-overflow:ellipsis}.dm-channel em{display:none}.dm-avatar{display:grid;place-items:center;width:24px;height:24px;flex:0 0 auto;color:#fff;font-size:10px;font-style:normal}.dm-avatar img{width:100%;height:100%;object-fit:cover}
.agent-row{display:flex;align-items:center;gap:8px;width:100%;min-width:0;min-height:40px;padding:5px 8px}.agent-row:hover{background:var(--brand-soft)}
.agent-avatar{display:grid;place-items:center;width:28px;height:28px;flex:0 0 auto;color:#fff;font-size:11px;font-weight:800}.agent-avatar img{width:100%;height:100%;object-fit:cover}
.agent-copy{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:center;gap:7px;min-width:0;flex:1}.agent-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.agent-copy span,.agent-copy small{overflow:hidden;color:var(--muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.agent-status-label{display:none}.agent-row[data-status="running"] .agent-role-label{display:none}.agent-row[data-status="running"] .agent-status-label{display:block;color:var(--brand)}
.status-dot{width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:#78A28F}.agent-row[data-status="running"] .status-dot{background:var(--brand);animation:pulse 1.5s infinite}.agent-row[data-status="failed"] .status-dot,.agent-row[data-status="blocked"] .status-dot{background:#8A1830}
@keyframes pulse{50%{box-shadow:0 0 0 5px rgba(200,16,46,.14)}}
.row-actions{display:none;position:absolute;right:2px;background:var(--brand-softer)}.row-wrap:hover .row-actions,.row-actions-static{display:flex}.row-action{display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--divider);background:#fff}.row-danger{color:var(--danger)}

.main-pane{grid-column:3;grid-row:1;display:flex;flex-direction:column;min-width:0;min-height:0;height:100%;overflow:hidden;background:var(--surface)}
.app-shell.no-sidebar .main-pane{grid-column:2}
.channel-head{display:flex;align-items:center;gap:12px;height:var(--header-height);min-height:var(--header-height);padding:0 18px;border-bottom:2px solid var(--divider);background:#fff}
.channel-mark{display:grid;place-items:center;width:34px;height:34px;border:2px solid var(--border);background:var(--brand-soft);color:var(--brand)}
.channel-identity{min-width:0;flex:1}.channel-title-line{display:flex;align-items:center;gap:8px}.channel-title-line h1{margin:0;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.channel-identity p{margin:0;color:var(--muted);font-size:12px}
.head-actions{display:flex;align-items:center;gap:6px}.channel-icon-btn,.member-count-btn,.head-actions>#refresh{display:flex;align-items:center;justify-content:center;height:36px;min-width:36px;padding:0 9px;border:2px solid var(--divider);background:#fff}.channel-icon-btn:hover,.member-count-btn:hover{border-color:var(--border);box-shadow:2px 2px 0 var(--border)}.channel-icon-btn.is-active{background:var(--brand-soft);color:var(--brand)}
.connection-indicator{display:flex;align-items:center;gap:6px;color:var(--muted)}.live-dot{width:8px;height:8px;border-radius:50%;background:var(--brand)}
.run-banner{display:flex;align-items:center;gap:9px;min-height:42px;margin:12px 18px 0;padding:8px 12px;border:2px solid #E8CDD3;background:var(--brand-softer);color:var(--brand)}
.run-banner.running{border-color:#E6CA86;background:#FFF8E8;color:var(--warning)}.run-banner.failed{border-color:#D99CAB;background:#FFF0F3;color:var(--danger)}.run-banner.paused{background:#FFF5DC;color:#895E00}.run-banner #run-meta{margin-left:auto;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pane-tabs{display:flex;align-items:end;height:var(--tabs-height);min-height:var(--tabs-height);padding-left:18px;border-bottom:2px solid var(--divider)}
.pane-tab{display:flex;align-items:center;gap:7px;height:38px;padding:0 15px;border:2px solid transparent;border-bottom:0;background:transparent;color:var(--muted)}.pane-tab:hover{color:var(--brand)}.pane-tab.active{border-color:var(--divider);background:#fff;color:var(--brand);font-weight:800;transform:translateY(2px)}.pane-tab b{display:grid;place-items:center;min-width:22px;height:22px;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-size:11px}
.workspace-pane{min-height:0;flex:1;overflow:auto}
.composer{flex:0 0 auto;margin:0 18px 16px;border:2px solid var(--divider);background:#fff;box-shadow:var(--hard-shadow)}
.composer-inner{position:relative}.composer textarea{display:block;width:100%;min-height:62px;padding:12px;border:0;resize:none;outline:0;background:transparent}.composer-footer{display:flex;align-items:center;justify-content:space-between;padding:7px 9px}.composer-tools,.composer-actions{display:flex;align-items:center;gap:7px}.attach-btn{display:grid;place-items:center;width:34px;height:34px;border:2px solid var(--divider);background:#fff}.composer-capability{color:#9B9294;font-size:12px}.task-toggle{display:flex;align-items:center;gap:5px;color:var(--muted)}.composer .send{display:grid;place-items:center;width:40px;height:36px;padding:0}.attachment-tray{display:flex;gap:6px;flex-wrap:wrap;padding:0 10px 6px}.attachment-chip{border:1px solid var(--divider);padding:4px 6px;background:var(--brand-softer)}
.mention-menu{position:absolute;bottom:92px;left:8px;z-index:50;display:none;width:250px;padding:5px;border:2px solid var(--border);background:#fff;box-shadow:var(--hard-shadow)}.mention-option{padding:7px}.mention-option:hover{background:var(--brand-soft)}

.context-pane{position:fixed;top:2px;right:2px;bottom:2px;z-index:90;width:var(--drawer-width);transform:translateX(calc(100% + 12px));border-left:2px solid var(--border);background:var(--brand-softer);transition:transform .16s ease;box-shadow:-5px 0 0 rgba(17,17,17,.10)}
.context-pane.is-open{transform:translateX(0)}.context-head{display:flex;align-items:center;justify-content:space-between;height:var(--header-height);padding:0 16px;border-bottom:2px solid var(--divider);background:#fff;font-size:17px;font-weight:800}.context-head span{display:flex;align-items:center;gap:8px}.context-head button{display:grid;place-items:center;width:36px;height:36px;border:2px solid var(--border);background:#fff}.context-content{height:calc(100% - var(--header-height));overflow:auto;padding:16px}.drawer-scrim{position:fixed;inset:0;z-index:80;background:rgba(23,19,19,.12)}
.context-card{margin-bottom:12px;padding:14px;border:2px solid var(--divider);background:#fff}.context-card h2{margin:0 0 6px;font-size:19px}.context-card h3{margin:18px 0 6px;color:var(--muted);font-size:12px;text-transform:uppercase}.context-card label{display:grid;gap:5px;margin:10px 0}.context-card input,.context-card textarea,.context-card select{width:100%;border:2px solid var(--divider);padding:8px;background:#fff}.kv{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--divider)}.kv span{color:var(--muted)}.kv strong{text-align:right;overflow-wrap:anywhere}.tool-tag{display:inline-block;margin:3px 2px;padding:3px 6px;background:var(--brand-soft);color:var(--brand);font-size:11px}.context-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}.drawer-link{display:grid;gap:2px;width:100%;padding:10px 0;border:0;border-bottom:1px solid var(--divider);background:#fff;text-align:left}.drawer-link span{color:var(--muted);font-size:12px}.drawer-member{display:flex;align-items:center;gap:9px;width:100%;padding:8px;border:0;border-bottom:1px solid var(--divider);background:#fff;text-align:left}.drawer-member-avatar{display:grid;place-items:center;width:32px;height:32px;color:#fff}.drawer-member-avatar.owner{background:var(--brand)}.drawer-member>span:nth-child(2){display:grid;flex:1}.drawer-member small{color:var(--muted)}

.toast{position:fixed;right:20px;bottom:20px;z-index:200;display:none;max-width:360px;border:2px solid var(--border);background:var(--brand);color:#fff;padding:10px 14px;box-shadow:var(--hard-shadow)}.toast.show{display:block}
.workbench-dialog{width:min(570px,calc(100vw - 32px));max-height:88vh;padding:0;border:2px solid var(--border);background:#fff;color:var(--text);box-shadow:8px 8px 0 var(--border)}.workbench-dialog::backdrop{background:rgba(20,12,15,.38)}.workbench-dialog>form,.workbench-dialog.local-dialog{padding:20px}.dialog-head{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:2px solid var(--divider)}.dialog-head strong{display:block;font-size:19px}.dialog-head span{display:block;color:var(--muted);font-size:12px}.dialog-head button{display:grid;place-items:center;width:34px;height:34px;border:2px solid var(--border);background:#fff}.workbench-dialog form{display:grid;gap:12px}.workbench-dialog label{display:grid;gap:5px;font-weight:700}.workbench-dialog input,.workbench-dialog textarea,.workbench-dialog select{width:100%;border:2px solid var(--divider);padding:8px;background:#fff}.workbench-dialog fieldset{border:2px solid var(--divider)}.agent-options{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:190px;overflow:auto}.agent-options label{display:flex;align-items:center;gap:6px;padding:7px;background:var(--brand-softer);font-weight:500}.agent-options input{width:auto}.dialog-actions,.local-actions{display:flex;justify-content:flex-end;gap:8px}.kind-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px}.kind-card{display:grid;gap:8px;padding:16px;border:2px solid var(--divider);background:#fff;text-align:left}.kind-card:hover{border-color:var(--border);box-shadow:var(--hard-shadow)}
@media(max-width:1120px){:root{--sidebar-width:220px}.channel-identity p{display:none}.composer-capability{display:none}.head-actions{gap:3px}.channel-icon-btn,.member-count-btn{min-width:32px;height:32px}}

/* Sidebar item contract: channels and direct messages share one row model. */
.sidebar-item{min-width:0;min-height:38px;border-left:2px solid transparent}
.sidebar-item.active{border-left-color:var(--brand)}
.sidebar-item.is-dragging{opacity:.5}
.sidebar-item .channel{min-width:0;flex:1}
.sidebar-item .row-actions{z-index:2}
.sidebar-pref-action{color:var(--muted)}
.sidebar-pref-action.is-active{display:grid;color:var(--brand);background:var(--brand-soft)}
.sidebar-pref-action:hover{color:var(--brand);background:var(--brand-soft)}
.dm-profile-target{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;margin-left:6px;padding:0;border:0;background:transparent;cursor:pointer}
.dm-profile-target:hover{outline:2px solid var(--brand);outline-offset:1px}
.dm-channel{gap:7px;padding-left:7px}
.dm-copy{display:grid;grid-template-columns:minmax(0,auto);min-width:0;flex:1;line-height:1.15}
.dm-copy b,.dm-copy em,.dm-copy small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-copy em{display:block;color:var(--muted);font-size:10px;font-style:normal}
.dm-copy small{display:block;color:var(--brand);font-size:10px}
.dm-channel>.status-dot{margin-left:auto}
.dm-avatar,.agent-avatar{width:32px;height:32px;min-width:32px;min-height:32px;aspect-ratio:1;flex:0 0 32px;overflow:hidden;border-radius:4px}
.dm-avatar{display:grid;place-items:center;color:#fff;font-size:11px;font-weight:800}
.dm-avatar img,.agent-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.agent-row{min-height:38px}
.pinned-dropzone{min-height:42px;padding:5px;border:2px dashed var(--divider);background:rgba(255,255,255,.38)}
.pinned-dropzone.is-drag-over{border-color:var(--brand);background:var(--brand-soft);box-shadow:2px 2px 0 var(--border)}
.pinned-dropzone>.sidebar-hint{margin:5px 7px}