/* --- extracted from dev-lab.html block #1 --- */
*{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#020607;--bg2:#00080d;--bg3:#001208;
--green:var(--accent);--cyan:var(--info);--purple:#b47aff;--gold:var(--warning);--red:var(--danger);
--orange:#fb923c;--indigo:#6366f1;--pink:#f43f5e;--teal:#22c55e;
--border:var(--border-hover);--border2:rgba(58,201,255,.18);
--text:rgba(232,255,246,.92);--muted:rgba(200,255,240,.42);
--sidebar-w:220px;
}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:"Roboto Mono",Consolas,monospace;font-size:12px;overflow:hidden}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.04) 2px,rgba(0,0,0,.04) 4px)}
/* ── Embed mode (added 2026-04-30, PR1) ──
* When dev-lab.html is iframed via ?embed=1&surface= (e.g. by
* engineering-department.html), strip the chrome so the iframe shows just
* the requested surface. The dl-embed class is set on + by
* the matching JS hook in dev-lab-inline.js. */
html.dl-embed,body.dl-embed{overflow:auto}
html.dl-embed body::before,body.dl-embed::before{display:none}
body.dl-embed #dl-shell{grid-template-rows:1fr;grid-template-columns:1fr;height:100dvh}
body.dl-embed #dl-header,body.dl-embed #dl-sidebar{display:none !important}
body.dl-embed #dl-main{grid-column:1/-1;grid-row:1/-1}
body.dl-embed .surface{padding:10px}
/* ── Shell ── */
#dl-shell{display:grid;grid-template-rows:52px 1fr;grid-template-columns:var(--sidebar-w) 1fr;height:100dvh;position:relative;z-index:1}
#dl-header{grid-column:1/-1;display:flex;align-items:center;padding:0 16px;gap:10px;
background:var(--bg-surface);border-bottom:1px solid var(--border);
position:relative;z-index:50}
#dl-header::after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,var(--info),rgba(180,122,255,.8),var(--info),transparent);
animation:hdr-glow 4s ease-in-out infinite}
@keyframes hdr-glow{0%,100%{opacity:.5}50%{opacity:1}}
.hdr-icon{font-size:22px;animation:hdr-bob 2.6s ease-in-out infinite}
@keyframes hdr-bob{0%,100%{filter:drop-shadow(0 0 6px var(--info))}50%{filter:drop-shadow(0 0 18px var(--info))}}
.hdr-brand{flex:1}
.hdr-title{font-family:"Orbitron",monospace;font-size:13px;font-weight:900;letter-spacing:.2em;
background:linear-gradient(90deg,var(--info),#b47aff,var(--accent),var(--info));background-size:300% auto;
-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 5s linear infinite}
@keyframes shimmer{to{background-position:300% center}}
.hdr-sub{font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:1px}
.hdr-badge{font-size:7px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
padding:2px 8px;border-radius:4px;background:rgba(var(--warning), .1);border:1px solid var(--warning);color:var(--gold)}
.hdr-dot{width:7px;height:7px;border-radius:50%;background:var(--green);
box-shadow:0 0 8px var(--accent);animation:dp 2s ease-in-out infinite alternate;flex-shrink:0}
@keyframes dp{from{opacity:.5;transform:scale(.8)}to{opacity:1;transform:scale(1.2)}}
.hdr-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.hdr-time{font-size:9px;color:var(--info);letter-spacing:.1em;font-family:"Orbitron",monospace}
/* ── Sidebar ── */
#dl-sidebar{background:var(--bg-surface);border-right:1px solid var(--border);
display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}
#dl-sidebar::-webkit-scrollbar{width:3px}
#dl-sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.sb-group{margin:10px 0 4px;padding:0 12px;font-size:7.5px;font-weight:900;
letter-spacing:.18em;text-transform:uppercase;color:var(--info)}
.sb-item{display:flex;align-items:center;gap:8px;padding:7px 12px;cursor:pointer;
font-size:10px;font-weight:700;color:var(--muted);border-left:2px solid transparent;
transition:all .15s;position:relative;border-radius:0 6px 6px 0;margin:1px 4px 1px 0}
.sb-item:hover{color:var(--text);background:var(--accent-dim)}
.sb-item.active{color:var(--info);border-left-color:var(--info);background:var(--accent-dim)}
.sb-item .sb-icon{font-size:14px;line-height:1;flex-shrink:0}
.sb-item .sb-badge{margin-left:auto;font-size:7px;font-weight:900;padding:1px 5px;
border-radius:3px;background:rgba(var(--danger), .15);border:1px solid rgba(var(--danger), .3);color:var(--red)}
.sb-item .sb-badge.gold{background:rgba(var(--warning), .12);border-color:rgba(var(--warning), .3);color:var(--gold)}
.sb-footer{margin-top:auto;padding:10px 12px;border-top:1px solid var(--border)}
.sb-user{font-size:9px;color:var(--muted);letter-spacing:.04em}
/* ── Main ── */
#dl-main{overflow:hidden;display:flex;flex-direction:column;background:var(--bg)}
.surface{display:none;flex:1;overflow-y:auto;padding:16px;flex-direction:column;gap:14px}
.surface.active{display:flex}
.surface::-webkit-scrollbar{width:4px}
.surface::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
/* ── Surface headers ── */
.sf-header{display:flex;align-items:center;gap:10px;margin-bottom:2px;flex-shrink:0}
.sf-title{font-family:"Orbitron",monospace;font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--info)}
.sf-sub{font-size:9px;color:var(--muted);margin-left:4px}
.sf-actions{margin-left:auto;display:flex;gap:6px}
/* ── Stat cards ── */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;flex-shrink:0}
.stat-card{padding:12px 14px;border-radius:10px;border:1px solid var(--border);
background:linear-gradient(160deg,rgba(0,10,7,.97),rgba(0,5,3,.95));
position:relative;overflow:hidden;cursor:default}
.stat-card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,var(--accent-col),transparent)}
.stat-card .sc-val{font-family:"Orbitron",monospace;font-size:24px;font-weight:900;color:var(--accent-col);
text-shadow:0 0 16px var(--accent-col);line-height:1;margin-bottom:4px}
.stat-card .sc-label{font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.stat-card .sc-sub{font-size:8px;color:var(--muted);margin-top:2px}
/* ── Cards ── */
.card{background:linear-gradient(160deg,rgba(0,10,7,.97),rgba(0,5,3,.95));
border:1px solid var(--border);border-radius:12px;padding:14px;
position:relative;overflow:hidden}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,var(--info),transparent)}
.card-title{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.14em;color:var(--info);margin-bottom:10px;
display:flex;align-items:center;gap:6px}
/* ── Activity feed ── */
.feed-item{padding:8px 10px;border-radius:8px;border:1px solid var(--border);
background:var(--bg-card);margin-bottom:6px;transition:border-color .15s;cursor:pointer}
.feed-item:hover{border-color:var(--border)}
.feed-item.needs-human{border-color:rgba(var(--warning), .25);background:rgba(var(--warning), .04)}
.fi-row{display:flex;align-items:center;gap:7px;margin-bottom:3px}
.fi-emoji{font-size:14px;flex-shrink:0}
.fi-author{font-size:10px;font-weight:800;color:var(--text)}
.fi-cat{font-size:7px;font-weight:700;padding:1px 5px;border-radius:3px;
background:var(--accent-dim);border:1px solid var(--border);color:var(--info)}
.fi-ch{font-size:7px;color:var(--muted);margin-left:auto}
.fi-ts{font-size:7px;color:var(--muted)}
.fi-text{font-size:10px;color:var(--text);line-height:1.55;
overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.needs-human-flag{font-size:7px;font-weight:900;padding:1px 6px;border-radius:3px;
background:rgba(var(--warning), .12);border:1px solid rgba(var(--warning), .3);color:var(--gold);margin-left:4px}
/* ── War Room ── */
#wr-shell{display:grid;grid-template-columns:180px 1fr;height:calc(100dvh - 52px);overflow:hidden}
#wr-channels{background:var(--bg-surface);border-right:1px solid var(--border);
display:flex;flex-direction:column;overflow-y:auto}
#wr-channels::-webkit-scrollbar{width:3px}
#wr-channels::-webkit-scrollbar-thumb{background:var(--border)}
.wr-ch-group{padding:8px 10px 2px;font-size:7px;font-weight:900;letter-spacing:.18em;
text-transform:uppercase;color:var(--info)}
.wr-ch-item{display:flex;align-items:center;gap:7px;padding:6px 10px;cursor:pointer;
font-size:10px;font-weight:700;color:var(--muted);border-left:2px solid transparent;
transition:all .12s}
.wr-ch-item:hover{color:var(--text);background:var(--accent-dim)}
.wr-ch-item.active{color:var(--info);border-left-color:var(--info);background:var(--accent-dim)}
.wr-ch-name{font-size:9px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wr-ch-unread{font-size:7px;font-weight:900;padding:1px 5px;border-radius:999px;
background:rgba(var(--danger), .15);border:1px solid rgba(var(--danger), .3);color:var(--red)}
#wr-pane{display:flex;flex-direction:column;overflow:hidden}
#wr-topic{padding:8px 14px;border-bottom:1px solid var(--border);
background:var(--bg-surface);display:flex;align-items:center;gap:8px;flex-shrink:0}
.wr-topic-name{font-family:"Orbitron",monospace;font-size:10px;font-weight:900;color:var(--info)}
.wr-topic-desc{font-size:8px;color:var(--muted)}
#wr-messages{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
#wr-messages::-webkit-scrollbar{width:4px}
#wr-messages::-webkit-scrollbar-thumb{background:var(--border)}
.wr-msg{border-radius:10px;padding:10px 12px;border:1px solid var(--border);
background:var(--bg-card);animation:msg-in .2s ease}
@keyframes msg-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.wr-msg.agent{border-color:var(--border);background:var(--accent-dim)}
.wr-msg.human{border-color:var(--border-color, var(--accent-glow));background:var(--accent-dim)}
.wr-msg.needs-human{border-color:rgba(var(--warning), .3) !important;background:rgba(var(--warning), .05) !important;
box-shadow:0 0 12px rgba(var(--warning), .08)}
.wr-msg-header{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.wr-msg-emoji{font-size:15px;flex-shrink:0}
.wr-msg-author{font-size:10px;font-weight:900;color:var(--text)}
.wr-msg-type{font-size:7px;font-weight:700;padding:1px 5px;border-radius:3px;
background:var(--accent-dim);border:1px solid var(--border);color:var(--info)}
.wr-msg-type.human{background:var(--accent-dim);border-color:var(--border-hover);color:var(--green)}
.wr-msg-ts{font-size:7px;color:var(--muted);margin-left:auto}
.wr-msg-text{font-size:11px;color:rgba(220,255,245,.8);line-height:1.65;white-space:pre-wrap;word-break:break-word}
.wr-msg-meta{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.wr-meta-badge{font-size:7px;font-weight:800;padding:2px 6px;border-radius:4px;
background:var(--bg-card);border:1px solid var(--border);color:var(--muted)}
.wr-meta-badge.branch{background:rgba(99,102,241,.1);border-color:rgba(99,102,241,.25);color:#818cf8}
.wr-meta-badge.preview{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.25);color:#4ade80;cursor:pointer}
.wr-meta-badge.task{background:var(--accent-dim);border-color:var(--info);color:var(--info)}
.wr-msg-actions{display:flex;gap:4px;margin-top:7px}
#wr-compose{padding:10px 14px;border-top:1px solid var(--border);
background:var(--bg-surface);flex-shrink:0}
.wr-compose-row{display:flex;gap:8px;align-items:flex-end}
#wr-input{flex:1;background:var(--bg-surface);border:1px solid var(--border);
border-radius:10px;padding:9px 12px;color:var(--text);font-family:inherit;font-size:11px;
resize:none;min-height:40px;max-height:100px;outline:none;line-height:1.55;
-webkit-user-select:text;user-select:text}
#wr-input:focus{border-color:var(--info);box-shadow:0 0 12px var(--accent-dim)}
#wr-input::placeholder{color:var(--muted)}
.wr-ch-sel{background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;
padding:5px 8px;color:var(--text);font-family:inherit;font-size:9px;outline:none;cursor:pointer}
/* ── Approval Gate ── */
.apr-card{border-radius:12px;padding:14px;margin-bottom:10px;
border:1px solid var(--border);background:var(--bg-card);
position:relative;transition:border-color .15s}
.apr-card.risk-high{border-color:rgba(var(--danger), .3) !important}
.apr-card.risk-medium{border-color:rgba(var(--warning), .25) !important}
.apr-card.risk-low{border-color:var(--border) !important}
.apr-card.resolved{opacity:.5}
.apr-header{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
.apr-risk{font-size:7px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:4px;flex-shrink:0}
.apr-risk.high{background:rgba(var(--danger), .15);border:1px solid rgba(var(--danger), .3);color:var(--red)}
.apr-risk.medium{background:rgba(var(--warning), .12);border:1px solid rgba(var(--warning), .25);color:var(--gold)}
.apr-risk.low{background:var(--accent-dim);border:1px solid var(--border);color:var(--info)}
.apr-title{font-size:11px;font-weight:800;color:var(--text);flex:1;line-height:1.4}
.apr-meta{font-size:8px;color:var(--muted);margin-bottom:8px;line-height:1.6}
.apr-detail{font-size:10px;color:var(--text);line-height:1.6;margin-bottom:10px;
max-height:80px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
-webkit-line-clamp:3;-webkit-box-orient:vertical}
.apr-actions{display:flex;gap:6px;flex-wrap:wrap}
.apr-source{font-size:7px;font-weight:700;padding:1px 5px;border-radius:3px;
background:var(--accent-dim);border:1px solid var(--border);color:var(--purple)}
.apr-empty{text-align:center;padding:40px;color:var(--muted);font-size:11px;line-height:2}
/* ── Agent Registry ── */
.ar-dept{margin-bottom:20px}
.ar-dept-header{display:flex;align-items:center;gap:8px;margin-bottom:8px;
padding-bottom:5px;border-bottom:1px solid var(--border)}
.ar-dept-label{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.14em}
.ar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.ar-card{border-radius:10px;padding:10px 12px;cursor:pointer;position:relative;
border:1px solid var(--border);background:var(--bg-surface);
transition:all .15s;overflow:hidden}
.ar-card:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(0,0,0,.4)}
.ar-card::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(
to bottom,rgba(255,255,255,.012),rgba(255,255,255,.012) 1px,transparent 1px,transparent 3px);pointer-events:none}
.ar-top{display:flex;align-items:flex-start;gap:7px;margin-bottom:5px}
.ar-emoji{font-size:18px;line-height:1;flex-shrink:0}
.ar-info{flex:1;min-width:0}
.ar-name{font-size:9.5px;font-weight:900;color:var(--text);margin-bottom:2px}
.ar-cat{font-size:7px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:1px 5px;border-radius:3px}
.ar-desc{font-size:8.5px;color:var(--muted);line-height:1.5;margin-bottom:6px;
overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ar-tools{display:flex;flex-wrap:wrap;gap:2px;margin-bottom:6px}
.ar-tool{font-size:6.5px;padding:1px 5px;border-radius:3px;font-weight:700;
background:rgba(0,200,150,.07);border:1px solid rgba(0,200,150,.2);color:rgba(140,255,220,.65)}
.ar-footer{display:flex;gap:4px}
/* ── Coming soon surface ── */
.cs-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;
flex:1;text-align:center;gap:16px;padding:40px}
.cs-icon{font-size:56px;opacity:.5;animation:cs-pulse 3s ease-in-out infinite}
@keyframes cs-pulse{0%,100%{filter:drop-shadow(0 0 8px var(--info))}50%{filter:drop-shadow(0 0 24px var(--info))}}
.cs-title{font-family:"Orbitron",monospace;font-size:14px;font-weight:900;letter-spacing:.2em;color:var(--info);text-transform:uppercase}
.cs-desc{font-size:11px;color:var(--muted);max-width:420px;line-height:1.8}
.cs-phase{font-size:8px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
padding:3px 10px;border-radius:4px;background:var(--accent-dim);border:1px solid var(--border);color:var(--purple)}
/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:7px;
border:1px solid;cursor:pointer;font-size:9px;font-weight:800;text-transform:uppercase;
letter-spacing:.07em;font-family:inherit;background:none;transition:all .15s}
.btn:hover{filter:brightness(1.3)}
.btn-green{border-color:var(--border-focus);color:var(--green);background:var(--accent-dim)}
.btn-cyan{border-color:var(--info);color:var(--info);background:var(--accent-dim)}
.btn-red{border-color:var(--danger);color:var(--red);background:rgba(var(--danger), .08)}
.btn-gold{border-color:var(--warning);color:var(--gold);background:rgba(var(--warning), .08)}
.btn-purple{border-color:var(--border);color:var(--purple);background:var(--accent-dim)}
.btn-sm{padding:3px 8px;font-size:7.5px}
.btn-dim{border-color:rgba(255,255,255,.12);color:var(--muted)}
/* ── Toast ── */
#dl-toast{position:fixed;bottom:20px;right:20px;padding:8px 16px;border-radius:8px;
font-size:10px;font-weight:700;z-index:9999;opacity:0;transition:opacity .3s;pointer-events:none}
#dl-toast.show{opacity:1}
#dl-toast.ok{background:rgba(0,255,140,.12);border:1px solid var(--border-focus);color:var(--green)}
#dl-toast.err{background:rgba(var(--danger), .12);border:1px solid var(--danger);color:var(--red)}
/* ── Loading ── */
.spin{animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.08),rgba(255,255,255,.04));
background-size:200%;animation:skel 1.4s ease infinite;border-radius:4px}
@keyframes skel{to{background-position:-200%}}
/* ── Kanban ── */
.po-col{display:flex;flex-direction:column;overflow:hidden;background:var(--bg-card);border:1px solid var(--border);border-radius:10px}
.po-col-header{padding:8px 10px;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.14em;color:var(--col-color,var(--info));border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px;flex-shrink:0}
.po-col-cnt{font-size:7px;padding:1px 5px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--muted)}
.po-col-cards{flex:1;overflow-y:auto;padding:6px;display:flex;flex-direction:column;gap:5px}
.po-col-cards::-webkit-scrollbar{width:3px}
.po-task{background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;padding:8px 10px;cursor:pointer;transition:all .15s}
.po-task:hover{border-color:var(--info);background:var(--accent-dim)}
.po-task-title{font-size:10px;font-weight:700;color:var(--text);margin-bottom:4px;line-height:1.4}
.po-task-meta{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.po-task-badge{font-size:6.5px;font-weight:800;padding:1px 5px;border-radius:3px;text-transform:uppercase;letter-spacing:.06em}
.po-task-move{display:flex;gap:3px;margin-top:6px}
.po-task-move button{font-size:7px;padding:2px 6px;border-radius:4px;border:1px solid var(--border);background:var(--bg-card);color:var(--muted);cursor:pointer;font-family:inherit;transition:all .12s}
.po-task-move button:hover{color:var(--text);border-color:var(--info)}
/* ── Build Studio file tree ── */
.bs-file-item{display:flex;align-items:center;gap:6px;padding:4px 10px;cursor:pointer;transition:background .12s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bs-file-item:hover{background:var(--accent-dim)}
.bs-file-item.active{background:var(--accent-dim);color:var(--info)}
.bs-dir-item{display:flex;align-items:center;gap:5px;padding:5px 8px;cursor:pointer;font-size:9px;font-weight:700;color:var(--info);text-transform:uppercase;letter-spacing:.1em}
.bs-dir-item:hover{color:var(--info)}
/* ── Preview Lab ── */
.pl-screenshot-card{border-radius:10px;overflow:hidden;border:1px solid var(--border);background:var(--bg-card)}
.pl-screenshot-card img{width:100%;display:block;border-radius:4px}
.pl-score{font-size:28px;font-weight:900;font-family:"Orbitron",monospace}
.pl-issue-item{padding:5px 8px;border-radius:6px;border:1px solid var(--border);background:var(--bg-card);font-size:9px;color:var(--text);margin-bottom:4px}
/* ── Delta strip ── */
.delta-strip{display:flex;gap:12px;padding:7px 14px;border-radius:8px;background:var(--bg-card);border:1px solid var(--border);flex-shrink:0;align-items:center;flex-wrap:wrap}
.delta-pill{font-size:9px;font-weight:800;padding:2px 8px;border-radius:4px;letter-spacing:.04em}
.delta-pill.new{background:var(--accent-dim);border:1px solid var(--info);color:var(--info)}
.delta-pill.esc{background:rgba(var(--warning), .1);border:1px solid rgba(var(--warning), .25);color:var(--gold)}
.delta-pill.res{background:var(--accent-dim);border:1px solid var(--border-hover);color:var(--green)}
.delta-pill.none{opacity:.4;color:var(--muted);background:none;border-color:transparent}
/* ── Mobile responsive ── */
@media(max-width:768px){
#dl-shell{grid-template-columns:1fr!important;grid-template-rows:52px 1fr!important}
#dl-sidebar{display:none}
#wr-shell{grid-template-columns:1fr!important}
#wr-channels{display:none}
.stat-row{grid-template-columns:repeat(2,1fr)!important}
.stat-card .sc-val{font-size:18px!important}
.surface{padding:10px!important}
.sf-header{flex-direction:column;gap:6px;align-items:flex-start!important}
.ar-grid{grid-template-columns:1fr!important}
.hdr-right{display:none}
.hdr-title{font-size:10px!important}
#wr-compose{padding:8px 10px!important}
#wr-input{min-height:36px!important;font-size:12px!important}
.wr-msg-text{font-size:10px!important}
}
@media(max-width:640px){
:root{--sidebar-w:0px}
#dl-sidebar{display:none}
#dl-shell{grid-template-columns:1fr}
#wr-shell{grid-template-columns:1fr}
#wr-channels{display:none}
.stat-row{grid-template-columns:repeat(2,1fr)}
}
/* Safe area for notched devices */
body{padding-top:env(safe-area-inset-top,0px)}
.page,.layout,.main{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
/* Touch-friendly targets */
button,a.btn,input[type=submit],input[type=button],.hdr-btn{min-height:44px}
/* ── PTT: Plan-to-Terminal ── */
#ptt-workspace{display:grid;grid-template-columns:1fr 320px;overflow:hidden;flex:1}
#ptt-terminal{display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--border)}
#ptt-steps-pane{display:flex;flex-direction:column;overflow:hidden;background:var(--bg-surface)}
#ptt-log::-webkit-scrollbar,#ptt-steps-list::-webkit-scrollbar{width:4px}
#ptt-log::-webkit-scrollbar-thumb,#ptt-steps-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.ptt-log-line{padding:1px 0;animation:msg-in .15s ease;line-height:1.65}
.ptt-step{padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:rgba(0,0,0,.35);margin-bottom:5px;transition:border-color .15s}
.ptt-step.current{border-color:var(--warning)!important;background:rgba(var(--warning), .04)}
.ptt-step.done{border-color:var(--border-hover);background:var(--accent-dim)}
.ptt-step.failed{border-color:rgba(var(--danger), .3);background:rgba(var(--danger), .04)}
.ptt-step.skipped{opacity:.45}
.ptt-step.running{border-color:var(--warning);background:rgba(var(--warning), .06);animation:ptt-pulse .9s ease-in-out infinite alternate}
@keyframes ptt-pulse{from{box-shadow:none}to{box-shadow:0 0 14px rgba(var(--warning), .18)}}
.ptt-step-header{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.ptt-step-num{font-size:13px;flex-shrink:0;width:18px;text-align:center}
.ptt-step-title{font-size:9.5px;font-weight:800;color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ptt-step-risk{font-size:7px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;flex-shrink:0;padding:1px 5px;border-radius:3px}
.ptt-step-cmd{font-size:8.5px;color:var(--info);font-family:"Roboto Mono",monospace;background:var(--bg-card);padding:3px 8px;border-radius:4px;margin:3px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;transition:color .12s,background .12s}
.ptt-step-cmd:hover{color:var(--info);background:var(--accent-dim)}
.ptt-step-output{font-size:8px;color:rgba(140,255,220,.5);font-family:"Roboto Mono",monospace;margin-top:4px;background:var(--bg-card);padding:4px 8px;border-radius:4px;max-height:52px;overflow:hidden;white-space:pre-wrap;word-break:break-all;line-height:1.5}
.ptt-step-actions{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.ptt-mode-btn{border-color:rgba(255,255,255,.12)!important;color:var(--muted)!important;background:none!important}
.ptt-mode-btn.active[data-mode="manual"]{border-color:var(--info)!important;color:var(--info)!important;background:var(--accent-dim)!important}
.ptt-mode-btn.active[data-mode="guided"]{border-color:var(--warning)!important;color:var(--warning)!important;background:rgba(var(--warning), .1)!important}
.ptt-mode-btn.active[data-mode="auto_safe"]{border-color:var(--border-focus)!important;color:var(--accent)!important;background:var(--accent-dim)!important}
.ptt-mode-btn.active[data-mode="full_operator"]{border-color:var(--danger)!important;color:var(--danger)!important;background:rgba(var(--danger), .08)!important}
.ptt-history-item{padding:7px 9px;border-radius:7px;border:1px solid var(--border);background:var(--bg-card);margin-bottom:4px;cursor:pointer;transition:border-color .12s}
.ptt-history-item:hover{border-color:var(--border)}
@media(max-width:768px){#ptt-workspace{grid-template-columns:1fr!important}#ptt-steps-pane{display:none!important}}
/* ── Dev Team Chat (Sites Studio, 2026-04-30 v1) ─────────────────────────
* Three-pane shell: roster | thread+composer | tools+sites. Replaces the
* earlier single-line monospace log so chat reads like a real squad room
* instead of a JSON dump.
* The surface itself MUST clip overflow (the base `.surface` rule sets
* `overflow-y:auto`, which would otherwise let the chat shell push past
* the viewport and bury the composer below the fold on desktop). */
/* The base `.surface` rule already declares `flex:1` inside the column-flex
* `#dl-main`, which is enough to fill the remaining viewport. We must NOT add
* `height:100%` here — doing so combines with the `.sf-header` row above the
* grid and pushes the composer below the fold. We just need to clip the
* surface so the shell can manage its own internal scroll regions. */
/* Lift the composer off the bottom of the viewport. The trailing
* `dev-lab v1.2` footer pill + Chrome's bottom chrome were eating the last
* ~70px and clipping the textarea — a generous bottom pad keeps the Send
* row well above the fold on every desktop size. */
#surface-dev-team-chat-new{padding:14px 14px 90px;gap:12px;overflow:hidden!important;min-height:0}
/* Same lesson for the grid: `flex:1 1 0` is enough; an explicit `height:100%`
* here ignores the header row and overflows the surface. */
.dtc-shell{flex:1 1 0;min-height:0;display:grid;grid-template-columns:240px 1fr 260px;gap:12px;overflow:hidden}
/* Override the global 44px touch-target floor inside the chat — it
* over-inflates the composer Send button on desktop and helps push the
* composer below the viewport on tight layouts. The composer itself
* remains a comfortable click target via .dtc-input min-height. */
#surface-dev-team-chat-new .dtc-send-btn{min-height:42px}
#surface-dev-team-chat-new .sf-actions .btn{min-height:30px}
.dtc-roster,.dtc-rail{background:linear-gradient(160deg,rgba(0,10,7,.97),rgba(0,5,3,.95));border:1px solid var(--border);border-radius:12px;padding:12px;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.dtc-rail-title{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.16em;color:var(--info);margin-bottom:8px;display:flex;align-items:center;gap:6px;flex-shrink:0}
.dtc-rail-foot{font-size:8px;color:var(--muted);margin-top:8px;line-height:1.5;flex-shrink:0}
.dtc-rail-foot code{background:rgba(0,200,255,.08);padding:1px 4px;border-radius:3px;color:var(--info);font-size:8px}
/* Roster */
.dtc-roster-search-wrap{flex-shrink:0;margin-bottom:8px}
.dtc-roster-search{width:100%;padding:6px 9px;border-radius:7px;border:1px solid var(--border);background:var(--bg-card);color:var(--text);font-family:inherit;font-size:11px;outline:none}
.dtc-roster-search:focus{border-color:var(--info)}
.dtc-roster-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding-right:4px}
.dtc-roster-body::-webkit-scrollbar{width:4px}
.dtc-roster-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.dtc-lane{font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:6px 0 2px;padding-left:4px}
.dtc-lane:first-child{margin-top:0}
.dtc-member{display:flex;align-items:flex-start;gap:8px;padding:7px 8px;border-radius:8px;border:1px solid var(--border);background:rgba(0,0,0,.35);cursor:pointer;transition:border-color .15s,background .15s}
.dtc-member:hover{border-color:var(--info);background:var(--accent-dim)}
.dtc-member.targeted{border-color:var(--warning);background:var(--accent-dim)}
.dtc-member-icon{font-size:18px;flex-shrink:0;line-height:1.1;width:22px;text-align:center}
.dtc-member-body{flex:1;min-width:0}
.dtc-member-name{font-size:11px;font-weight:800;color:var(--text);line-height:1.25;display:flex;align-items:baseline;gap:6px}
.dtc-member-tag{font-size:8px;color:var(--info);font-weight:700;letter-spacing:.04em;font-family:'Roboto Mono',monospace}
.dtc-member-spec{font-size:9.5px;color:var(--muted);margin-top:2px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dtc-member-bubble{font-size:9px;color:var(--purple);margin-top:3px;font-style:italic;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dtc-member-empty{font-size:10px;color:var(--muted);padding:8px;text-align:center;font-style:italic}
/* Center pane */
.dtc-center{display:flex;flex-direction:column;background:linear-gradient(160deg,rgba(0,10,7,.97),rgba(0,5,3,.95));border:1px solid var(--border);border-radius:12px;overflow:hidden;min-height:0}
.dtc-target-bar{padding:9px 12px;border-bottom:1px solid var(--border);background:var(--bg-surface);display:flex;align-items:center;gap:10px;flex-shrink:0;flex-wrap:wrap}
.dtc-target-left{display:flex;align-items:center;gap:8px;flex:1;min-width:200px}
.dtc-target-label{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.dtc-target-select{padding:5px 8px;border-radius:6px;border:1px solid var(--border);background:var(--bg-surface);color:var(--text);font-family:inherit;font-size:11px;outline:none;cursor:pointer;min-width:140px}
.dtc-target-select:focus{border-color:var(--info)}
.dtc-target-domain{font-size:9.5px;color:var(--info);font-family:'Roboto Mono',monospace}
.dtc-target-domain a{color:var(--info);text-decoration:none}
.dtc-target-domain a:hover{text-decoration:underline}
.dtc-target-right{font-size:10px;color:var(--gold)}
.dtc-target-right .dtc-mention-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;background:rgba(250,208,21,.1);border:1px solid var(--border);color:var(--gold);font-size:10px;font-weight:700}
.dtc-target-right .dtc-mention-pill button{background:none;border:none;color:var(--gold);cursor:pointer;font-size:13px;line-height:1;padding:0 2px}
/* Thread + bubbles */
.dtc-thread{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px;min-height:0;background:rgba(0,2,1,.6)}
.dtc-thread::-webkit-scrollbar{width:4px}
.dtc-thread::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.dtc-msg{border-radius:12px;padding:11px 14px;border:1px solid var(--border);background:var(--bg-surface);max-width:88%;animation:msg-in .2s ease;line-height:1.55;font-size:12px;color:rgba(220,255,245,.92)}
.dtc-msg.user{align-self:flex-end;background:rgba(0,200,255,.12);border-color:rgba(0,200,255,.3)}
.dtc-msg.dispatcher{background:var(--accent-dim);border-color:var(--border)}
.dtc-msg.specialist{background:linear-gradient(160deg,rgba(0,12,8,.95),rgba(0,8,5,.95));border-color:var(--member-color,var(--info));box-shadow:0 0 18px rgba(0,200,255,.06)}
.dtc-msg.system{background:var(--bg-card);border-color:rgba(255,255,255,.12);color:var(--muted);font-size:11px}
.dtc-msg.error{background:var(--accent-dim);border-color:var(--border)}
.dtc-msg-head{display:flex;align-items:center;gap:8px;margin-bottom:5px;flex-wrap:wrap}
.dtc-msg-icon{font-size:16px;line-height:1;flex-shrink:0}
.dtc-msg-author{font-size:11px;font-weight:900;color:var(--text);letter-spacing:.02em}
.dtc-msg-spec{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:1px 7px;border-radius:4px;background:var(--accent-dim);border:1px solid var(--border);color:var(--info)}
.dtc-msg-spec.gold{background:rgba(250,208,21,.1);border-color:var(--border);color:var(--gold)}
.dtc-msg-ts{font-size:9px;color:var(--muted);margin-left:auto;font-family:'Roboto Mono',monospace}
.dtc-msg-body{font-size:12px;line-height:1.6;white-space:pre-wrap;word-break:break-word;color:rgba(220,255,245,.92)}
.dtc-msg-body code{background:rgba(0,200,255,.1);color:var(--info);padding:1px 5px;border-radius:3px;font-size:11px}
.dtc-msg-body pre{background:rgba(0,0,0,.55);padding:8px 10px;border-radius:6px;font-size:10.5px;line-height:1.55;overflow:auto;margin:6px 0;border:1px solid var(--border)}
.dtc-msg-body i{color:var(--muted)}
.dtc-msg-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.dtc-msg-action{font-size:10px;font-weight:700;padding:4px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(0,200,255,.08);color:var(--info);cursor:pointer;font-family:inherit;transition:border-color .12s,background .12s}
.dtc-msg-action:hover{border-color:var(--info);background:rgba(0,200,255,.16)}
.dtc-msg-action.gold{border-color:var(--border);color:var(--gold);background:var(--accent-dim)}
.dtc-msg-action.gold:hover{background:rgba(250,208,21,.16)}
/* Composer */
.dtc-composer{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;background:var(--bg-surface);border-top:1px solid var(--border);flex-shrink:0}
.dtc-input{flex:1;min-height:42px;max-height:150px;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg-surface);color:var(--text);font-family:inherit;font-size:12px;line-height:1.55;resize:none;outline:none}
.dtc-input:focus{border-color:var(--info);box-shadow:0 0 14px var(--accent-dim)}
.dtc-input::placeholder{color:var(--muted)}
.dtc-send-btn{flex-shrink:0;align-self:stretch;padding:0 16px;font-weight:800}
/* Right rail */
.dtc-tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;flex-shrink:0}
.dtc-tool-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 6px;border-radius:9px;border:1px solid var(--border);background:rgba(0,0,0,.35);color:var(--text);cursor:pointer;font-family:inherit;text-align:center;transition:all .15s}
.dtc-tool-chip:hover{border-color:var(--info);background:var(--accent-dim);transform:translateY(-1px)}
.dtc-tool-chip-icon{font-size:18px;line-height:1}
.dtc-tool-chip-label{font-size:9.5px;font-weight:800;color:var(--text);letter-spacing:.04em;line-height:1.25}
.dtc-tool-chip-sub{font-size:8px;color:var(--muted);line-height:1.2}
.dtc-site-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding-right:4px;min-height:0}
.dtc-site-list::-webkit-scrollbar{width:4px}
.dtc-site-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.dtc-site-card{padding:9px 10px;border-radius:9px;border:1px solid var(--border);background:var(--bg-card);cursor:pointer;transition:border-color .15s,background .15s}
.dtc-site-card:hover{border-color:var(--info);background:var(--accent-dim)}
.dtc-site-card.pinned{border-color:var(--warning);background:var(--accent-dim)}
.dtc-site-card-name{font-size:11px;font-weight:800;color:var(--text);line-height:1.25}
.dtc-site-card-domain{font-size:9.5px;color:var(--info);font-family:'Roboto Mono',monospace;margin-top:2px;word-break:break-all}
.dtc-site-card-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}
.dtc-site-card-pill{font-size:8px;font-weight:700;padding:1px 6px;border-radius:3px;background:var(--bg-card);border:1px solid var(--border);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.dtc-site-card-pill.live{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.3);color:#4ade80}
.dtc-site-card-pill.staging{background:var(--accent-dim);border-color:var(--border);color:var(--gold)}
@media(max-width:1100px){
.dtc-shell{grid-template-columns:200px 1fr 220px}
}
@media(max-width:880px){
.dtc-shell{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}
.dtc-roster,.dtc-rail{max-height:180px}
.dtc-roster-body,.dtc-site-list{max-height:120px}
.dtc-tool-grid{grid-template-columns:repeat(4,1fr)}
}
/* Tight-vertical fallback: if the viewport is short (notebooks, split-screen)
* shrink the rail font/icon sizes a touch so the 3-pane grid still fits in
* one screen without scrolling the surface. */
@media(max-height:780px){
#surface-dev-team-chat-new{padding:10px;gap:8px}
.dtc-roster,.dtc-rail{padding:10px}
.dtc-tool-chip{padding:8px 4px}
.dtc-tool-chip-icon{font-size:16px}
.dtc-thread{padding:10px 12px}
.dtc-composer{padding:8px 10px}
.dtc-input{min-height:38px}
}