/* Prototype-only chrome: icon rail, zone switcher, breadcrumb. Matches the warm-beige system. */
:root{
  --nav-active-bg:#fff;
  --nav-active-shadow:0 1px 2px rgba(20,20,30,.05), 0 4px 12px rgba(20,20,30,.06);
}
html,body{height:100%;margin:0;background:var(--bg);}
#app-root{height:100%;}
/* sidebar host width/flex is set inline by the router (per zone + collapse state) */
#sidebar-host{flex:0 0 240px;}

/* Brand logo mark: white background with the logo in its real colors (everywhere) */
.S-brand-mark{background:#fff !important;border:1px solid var(--b);box-shadow:0 1px 2px rgba(20,20,30,.06) !important;}
.S-brand-mark img{filter:none !important;}

/* The platform's .page-section entrance fade strands content at opacity:0 when the
   environment prefers reduced motion. Make the visible end-state the base. */
.page-section{opacity:1 !important;animation:none !important;}
/* same reduced-motion strand affects the workroom entrance animations */
.wm-page-enter,.wm-msg-enter,.wm-fade-up,.wm-panel-enter,.wm-phase-enter,.wm-drop-enter,.wm-count-enter{animation:none !important;opacity:1 !important;}
.mp-hero{animation:none !important;opacity:1 !important;}
.ag-card{animation:none !important;opacity:1 !important;}
.mcp-card{animation:none !important;opacity:1 !important;}
/* chat messages: reduced-motion strands msg-ai entrance at opacity:0 — base is visible */
.workroom-chat-v2 .msg-ai,.workroom-chat-v2 .msg-user{opacity:1 !important;animation:none !important;}

/* breadcrumb in topbar */
.tb-crumb{font-family:var(--sans);font-size:12.5px;display:flex;align-items:center;white-space:nowrap;}
/* the platform .TB relies on per-item spacing; ensure a consistent gap so chrome never collides */
.TB{gap:8px;}
.TB .tb-crumb{margin-right:4px;}

/* ── collapsed icon rail ── */
.rail{width:56px;flex-shrink:0;background:var(--beige);border-right:1px solid var(--b);display:flex;flex-direction:column;align-items:center;padding:10px 0;gap:2px;}
.rail-brand{cursor:pointer;margin-bottom:8px;}
.rail-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;}
.rail-body::-webkit-scrollbar{width:0;}
.rail-it{width:38px;height:38px;border-radius:8px;border:none;background:none;color:var(--t3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .12s;}
.rail-it:hover{background:var(--sh);color:var(--t);}
.rail-it.on{background:#fff;color:var(--brand);box-shadow:var(--nav-active-shadow);}
.rail-it.on svg{color:var(--brand);}

/* ── zone switcher panel ── */
.zsw-scrim{position:fixed;inset:0;z-index:100000;background:transparent;}
.zsw-panel{position:fixed;top:54px;left:10px;z-index:100001;width:300px;background:var(--s);border:1px solid var(--b);border-radius:14px;
  box-shadow:0 12px 40px rgba(20,20,30,.16),0 2px 6px rgba(20,20,30,.08);padding:6px;animation:dd-in .15s var(--ease-out);}
.zsw-head{font-family:var(--mono);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--t4);padding:8px 10px 6px;}
.zsw-row{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border:none;background:none;border-radius:9px;cursor:pointer;transition:background .12s;}
.zsw-row:hover{background:var(--sh);}
.zsw-row.on{background:var(--brandGhost);}
.zsw-ic{width:32px;height:32px;border-radius:8px;background:var(--beige-pill);border:1px solid var(--b);display:flex;align-items:center;justify-content:center;color:var(--t2);flex-shrink:0;}
.zsw-row.on .zsw-ic{background:var(--brand);color:#fff;border-color:var(--brand);}
.zsw-t{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--t);display:flex;align-items:center;gap:7px;}
.zsw-cur{font-family:var(--mono);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--brand);background:var(--brandL);padding:1px 5px;border-radius:4px;}
.zsw-s{font-size:11.5px;color:var(--t3);margin-top:1px;}
.zsw-kbd{font-family:var(--mono);font-size:10px;color:var(--t4);background:var(--beige-pill);border:1px solid var(--bl2);padding:2px 6px;border-radius:5px;flex-shrink:0;}

/* keep the topbar search kbd compact (it's plain in markup) */
.TB-search kbd{font-family:var(--mono);font-size:10px;background:var(--sh);padding:1px 5px;border-radius:4px;border:1px solid var(--bl2);color:var(--t4);}

/* ── Workroom sidebar extras ── */
.wr-new{width:100%;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;border:1px solid var(--brand-tint-border);background:var(--brandL);color:var(--brand);cursor:pointer;transition:filter .12s;}
.wr-new:hover{filter:brightness(.99);}
.wr-kbd{font-size:10px;font-family:var(--mono);background:var(--s);color:var(--t3);border:1px solid var(--beige-b);padding:1px 5px;border-radius:4px;flex-shrink:0;}
.wr-search{display:flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid var(--beige-b);border-radius:8px;background:var(--s);}
.wr-search input{flex:1;border:0;outline:none;background:transparent;font-family:var(--sans);font-size:12.5px;color:var(--t);min-width:0;}
.wr-search kbd{font-family:var(--mono);font-size:10px;color:var(--t4);background:var(--beige-pill);border:1px solid var(--bl2);padding:1px 5px;border-radius:4px;}
.wr-grp{padding:10px 10px 4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--t4);font-family:var(--mono);}
.wr-chat{display:flex;align-items:center;width:100%;padding:7px 10px;border-radius:7px;border:none;background:none;cursor:pointer;font-family:var(--sans);font-size:12.5px;color:var(--t2);text-align:left;}
.wr-chat:hover{background:var(--sh);}
.wr-chat.on{background:#fff;color:var(--t);font-weight:600;box-shadow:var(--nav-active-shadow);}
.wr-foot{border-top:1px solid var(--b);}
.wr-foot-zones{display:flex;flex-direction:column;gap:1px;padding:6px;}
.wr-zbtn{display:flex;align-items:center;gap:9px;width:100%;padding:6px 10px;border-radius:7px;border:none;background:none;cursor:pointer;font-family:var(--sans);font-size:12.5px;font-weight:500;color:var(--t3);text-align:left;}
.wr-zbtn svg{color:var(--t4);width:14px;height:14px;}
.wr-zbtn:hover{background:var(--sh);color:var(--t2);}
.wr-zbtn.on{color:var(--brand);font-weight:600;}
.wr-zbtn.on svg{color:var(--brand);}

/* ── Workroom content ── */
.wr-ava{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:700;font-family:var(--mono);flex-shrink:0;}
.wr-sugg{font-size:12.5px;color:var(--t2);background:var(--s);border:1px solid var(--beige-b);border-radius:9px;padding:8px 12px;cursor:pointer;text-align:left;transition:border-color .12s,background .12s;}
.wr-sugg:hover{border-color:var(--brand-tint-border);background:var(--brandL);color:var(--brand);}
.wr-sec-h{font-family:var(--mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--t4);}
.wr-recent{text-align:left;background:var(--s);border:1px solid var(--beige-b);border-radius:13px;padding:14px;cursor:pointer;transition:border-color .15s,box-shadow .15s;}
.wr-recent:hover{border-color:var(--bd);box-shadow:0 4px 16px rgba(20,20,30,.05);}
.wr-agentcard{display:flex;align-items:center;gap:11px;text-align:left;background:var(--s);border:1px solid var(--beige-b);border-radius:11px;padding:11px 13px;cursor:pointer;transition:border-color .15s;}
.wr-agentcard:hover{border-color:var(--bd);}
.wr-agent-tile{display:block;text-align:left;background:var(--s);border:1px solid var(--beige-b);border-radius:14px;padding:16px;cursor:pointer;transition:border-color .15s,box-shadow .15s;}
.wr-agent-tile:hover{border-color:var(--bd);box-shadow:0 4px 16px rgba(20,20,30,.05);}
.wr-chat-head{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;border-bottom:1px solid var(--beige-rule);background:var(--s);}
.wr-msg-actions{display:flex;gap:2px;margin-top:8px;opacity:.7;}
.wr-act{width:28px;height:28px;border-radius:6px;border:none;background:none;color:var(--t4);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.wr-act:hover{background:var(--sh);color:var(--t2);}

/* ── Studio extras ── */
.st-row{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--bl2);cursor:pointer;transition:background .12s;}
.st-row:last-child{border-bottom:none;}
.st-row:hover{background:var(--beige-pg);}
.st-table{width:100%;border-collapse:collapse;font-family:var(--sans);}
.st-table th{text-align:left;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--t4);font-family:var(--mono);padding:11px 16px;border-bottom:1px solid var(--b);background:var(--beige-pg);}
.st-table td{font-size:13px;color:var(--t2);padding:12px 16px;border-bottom:1px solid var(--bl2);}
.st-table tr:last-child td{border-bottom:none;}
.st-table tbody tr{transition:background .12s;}
.st-table tbody tr:hover{background:var(--beige-pg);}
.ps-lib-item{display:flex;align-items:center;gap:8px;width:100%;padding:10px 11px;border-radius:9px;border:none;background:none;cursor:pointer;text-align:left;margin-bottom:2px;transition:background .12s;}
.ps-lib-item:hover{background:var(--sh);}
.ps-lib-item.on{background:#fff;box-shadow:var(--nav-active-shadow);}
.ps-col{display:flex;flex-direction:column;min-height:0;background:var(--beige-pg);}
/* Studio shared subnav (Profiler / Optimizer / Flywheel etc.) */
.st-subnav-it{background:none;border:none;border-bottom:2px solid transparent;padding:8px 14px;margin-bottom:-1px;font:500 13px var(--sans);color:var(--t3);cursor:pointer;transition:color .12s;}
.st-subnav-it:hover{color:var(--t);}
.st-subnav-it.on{color:var(--brand);border-bottom-color:var(--brand);font-weight:600;}
/* App Studio row table */
.apps-row{display:grid;grid-template-columns:36px 2.4fr 0.9fr 1fr 1fr 1.2fr 0.9fr 0.9fr;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--bl2);cursor:pointer;transition:background .12s;}
.apps-row:last-child{border-bottom:none;}
.apps-row:not(.apps-hdr):hover{background:var(--beige-pg);}
.apps-hdr{cursor:default;background:var(--beige-pg);font:600 9.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--t4);padding-top:9px;padding-bottom:9px;}
.apps-hdr:hover{background:var(--beige-pg);}
.apps-c-app{display:flex;align-items:flex-start;gap:11px;min-width:0;}
.apps-fw-badge{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font:700 12px var(--mono);flex-shrink:0;}
.apps-fw-badge.sm{width:24px;height:24px;font-size:10px;}
.apps-name{font:600 13.5px var(--sans);color:var(--t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.apps-url{display:flex;align-items:center;gap:5px;font:400 11px var(--mono);color:var(--t3);margin-top:2px;}
.apps-sub{display:flex;align-items:center;gap:6px;font:400 11px var(--sans);color:var(--t4);margin-top:4px;}
.apps-tag{font:600 9px var(--mono);text-transform:uppercase;letter-spacing:.04em;padding:1px 6px;border-radius:4px;background:var(--beige-pill);color:var(--t3);}
.apps-code{font:500 11px var(--mono);background:var(--beige-pill);padding:1px 5px;border-radius:4px;color:var(--t2);}
.apps-pill{display:inline-flex;align-items:center;gap:6px;font:600 11px var(--mono);padding:3px 9px;border-radius:999px;}
.apps-c-fw{display:flex;align-items:center;gap:8px;}
.apps-fw-label{font:500 12px var(--sans);color:var(--t2);}
.apps-c-traffic,.apps-c-deploy,.apps-c-res{min-width:0;}
.apps-c-act{display:flex;align-items:center;gap:6px;justify-content:flex-end;}

/* ── Developer Hub ── */
.dh-brand-code{font:500 12px var(--mono);background:var(--brandL);color:var(--brand);padding:1px 5px;border-radius:4px;}
.dh-env-chip{font:500 11px var(--mono);padding:4px 10px;border-radius:6px;}
.dh-tab-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px;}
.dh-h2{font:600 17px var(--sans);color:var(--t);}
.dh-h3{font:600 14px var(--sans);color:var(--t);display:flex;align-items:center;gap:8px;}
.dh-sub{font-size:12.5px;color:var(--t3);margin-top:3px;}
.dh-tag{font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.03em;padding:2px 7px;border-radius:4px;border:1px solid;display:inline-flex;align-items:center;gap:4px;}
.dh-key-card{border:1px solid var(--beige-b);border-radius:12px;background:var(--s);padding:14px 16px;}
.dh-key-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;}
.dh-key-name{font:600 14px var(--sans);color:var(--t);display:flex;align-items:center;gap:8px;}
.dh-key-code{font:500 12px var(--mono);color:var(--t3);display:block;margin-top:4px;}
.dh-key-stat-v{font:600 15px var(--mono);color:var(--t);}
.dh-key-stat-l{font:500 9.5px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--t4);}
.dh-key-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--bl2);}
.dh-key-rate{font:400 11px var(--mono);color:var(--t4);flex-shrink:0;}
.dh-copy,.dh-code-copy{width:30px;height:30px;border-radius:7px;border:1px solid var(--beige-b);background:var(--s);color:var(--t3);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.dh-copy:hover,.dh-code-copy:hover{background:var(--sh);color:var(--t);}
.dh-search{display:flex;align-items:center;gap:7px;padding:6px 11px;border:1px solid var(--beige-b);border-radius:8px;background:var(--s);}
.dh-search input{border:0;outline:none;background:transparent;font:400 13px var(--sans);color:var(--t);flex:1;min-width:0;}
.dh-ref-group{margin-bottom:18px;}
.dh-ref-group-hd{display:flex;align-items:center;gap:8px;font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--t2);margin-bottom:8px;}
.dh-ref-dot{width:8px;height:8px;border-radius:50%;}
.dh-ref-ct{font:500 11px var(--mono);color:var(--t4);background:var(--beige-pill);padding:1px 7px;border-radius:999px;}
.dh-ep{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--beige-b);border-radius:9px;background:var(--s);cursor:pointer;margin-bottom:6px;transition:border-color .12s;}
.dh-ep:hover{border-color:var(--bd);}
.dh-ep-method{font:700 10px var(--mono);padding:3px 8px;border-radius:5px;width:54px;text-align:center;flex-shrink:0;}
.dh-ep-path{font:500 12.5px var(--mono);color:var(--t);flex-shrink:0;}
.dh-ep-summary{flex:1;font-size:12px;color:var(--t3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dh-ep svg{color:var(--t4);transition:transform .15s;}
.dh-ep.open svg{transform:rotate(180deg);}
.dh-langseg{display:flex;gap:4px;background:var(--beige-pill);border-radius:9px;padding:3px;width:fit-content;margin-bottom:16px;}
.dh-langbtn{border:none;background:none;padding:6px 14px;border-radius:7px;font:500 12.5px var(--sans);color:var(--t3);cursor:pointer;}
.dh-langbtn.on{background:var(--s);color:var(--t);box-shadow:0 1px 2px rgba(20,20,30,.06);font-weight:600;}
.dh-step{margin-bottom:16px;}
.dh-step-hd{display:flex;align-items:center;gap:9px;font:600 13px var(--sans);color:var(--t);margin-bottom:8px;}
.dh-step-n{width:20px;height:20px;border-radius:50%;background:var(--brandL);color:var(--brand);font:600 11px var(--mono);display:flex;align-items:center;justify-content:center;}
.dh-code{position:relative;background:#1E1B16;border-radius:10px;padding:14px 16px;overflow:auto;}
.dh-code pre{font:400 12px/1.65 var(--mono);color:#E8E4DA;margin:0;white-space:pre;}
.dh-code-copy{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.08);border-color:transparent;color:#9A938A;}
.dh-mcp-url{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--beige-b);border-radius:10px;background:var(--s);}
.dh-mcp-url-l{font:500 10px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--t4);}
.dh-mcp-url code{font:600 13px var(--mono);color:var(--brand);flex:1;}
.dh-tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;}
.dh-tool{display:flex;align-items:center;gap:6px;font:500 11.5px var(--mono);color:var(--t2);background:var(--s);border:1px solid var(--beige-b);border-radius:7px;padding:7px 10px;}
.dh-empty{text-align:center;padding:40px 24px;border:1px dashed var(--beige-b);border-radius:14px;background:var(--beige-pg);}
.dh-empty-ic{color:var(--brand);margin-bottom:10px;display:flex;justify-content:center;}
/* Prompt Studio responsive 3-pane — container-query driven so side panes
   yield before the editor drops below a readable width */
.ps-wrap{flex:1;display:flex;min-height:0;container-type:inline-size;}
.ps-side-lib{flex:0 0 260px;}
.ps-editor{flex:1 1 auto;min-width:320px;display:flex;flex-direction:column;}
.ps-inspector{flex:0 0 268px;border-left:1px solid var(--bl2);padding:16px;overflow-y:auto;}
@container (max-width:900px){.ps-inspector{display:none;}}
@container (max-width:640px){.ps-side-lib{display:none;}}