/* Layout: a headquarters console — ventures rail on the right (RTL), the selected venture's floor plan of teams in the main area, a side drawer for any agent or task. */
:root{
  --bg:#EDF1F0; --surface:#FFFFFF; --surface-2:#F5F8F7; --line:#D3DCDA; --ink:#13201E; --muted:#5A6A67;
  --accent:#0D6A5B; --accent-ink:#FFFFFF; --accent-soft:#DAEEE9; --brass:#8F621A; --brass-soft:#F4E8D0;
  --ok:#1C7A3B; --ok-soft:#DDF1E3; --warn:#9A5800; --warn-soft:#FBEBD2; --bad:#B3261E; --bad-soft:#F9DEDB; --info:#2C5BA6; --info-soft:#DEE7F7;
  --team-l:36%; --team-s:48%; --team-bg-l:93%;
  --shadow:0 1px 2px rgba(19,32,30,.06),0 8px 24px rgba(19,32,30,.06);
  --f-display:"Reem Kufi","Vazirmatn",Tahoma,sans-serif;
  --f-body:"Vazirmatn",Tahoma,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --r:10px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0D1413; --surface:#141E1C; --surface-2:#192522; --line:#283633; --ink:#E2EBE8; --muted:#91A39F;
  --accent:#4BC2A8; --accent-ink:#06211B; --accent-soft:#15342E; --brass:#D9A84E; --brass-soft:#382C16;
  --ok:#5CC27E; --ok-soft:#173222; --warn:#E3A43C; --warn-soft:#3A2B12; --bad:#F07167; --bad-soft:#3D1C1A; --info:#82A9F0; --info-soft:#1A2741;
  --team-l:70%; --team-s:45%; --team-bg-l:18%;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0D1413; --surface:#141E1C; --surface-2:#192522; --line:#283633; --ink:#E2EBE8; --muted:#91A39F;
  --accent:#4BC2A8; --accent-ink:#06211B; --accent-soft:#15342E; --brass:#D9A84E; --brass-soft:#382C16;
  --ok:#5CC27E; --ok-soft:#173222; --warn:#E3A43C; --warn-soft:#3A2B12; --bad:#F07167; --bad-soft:#3D1C1A; --info:#82A9F0; --info-soft:#1A2741;
  --team-l:70%; --team-s:45%; --team-bg-l:18%;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:14.5px;line-height:1.75}
#app{direction:rtl;display:grid;grid-template-columns:270px minmax(0,1fr);min-height:100vh}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--f-display);font-weight:700;text-wrap:balance;margin:0;line-height:1.35}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

/* Rail */
.rail{background:var(--surface);border-inline-start:1px solid var(--line);padding:20px 16px;display:flex;flex-direction:column;gap:18px;position:sticky;top:env(safe-area-inset-top,0px);height:100vh;overflow:auto}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:38px;height:38px;border-radius:9px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--f-display);font-size:20px}
.brand h1{font-size:19px}
.brand small{display:block;color:var(--muted);font-size:12px;font-family:var(--f-body);font-weight:400}
.rail-label{font-size:12px;color:var(--muted);letter-spacing:.02em}
.vlist{display:flex;flex-direction:column;gap:6px}
.vitem{display:flex;flex-direction:column;align-items:flex-start;text-align:start;gap:2px;padding:10px 12px;border-radius:9px;border:1px solid transparent;background:transparent;width:100%}
.vitem:hover{background:var(--surface-2)}
.vitem[aria-current="true"]{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.vitem b{font-weight:700;font-size:14px}
.vitem span{font-size:12px;color:var(--muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px 14px;font-weight:500;font-size:13.5px;white-space:nowrap}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.brass{background:var(--brass);color:var(--surface);border-color:var(--brass)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.danger{color:var(--bad)}
.btn.sm{padding:4px 10px;font-size:12.5px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* Main */
.main{padding-block:22px 60px;padding-inline:28px;min-width:0;display:flex;flex-direction:column;gap:20px}
.banner{border:1px solid var(--warn);background:var(--warn-soft);color:var(--ink);border-radius:var(--r);padding:10px 14px;font-size:13.5px}
.vhead{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between}
.vhead h2{font-size:30px}
.vhead p{margin:4px 0 0;color:var(--muted);max-width:70ch}
.vmeta{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;border-radius:999px;padding:2px 10px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted)}

/* Stage track */
.stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;counter-reset:st}
.stage{position:relative;padding:8px 10px 8px;border-top:4px solid var(--line);font-size:12.5px;color:var(--muted);background:none;border-inline:0;border-bottom:0;text-align:start}
.stage b{display:block;font-size:13.5px;color:var(--ink);font-weight:500}
.stage.done{border-top-color:var(--accent)}
.stage.on{border-top-color:var(--brass)}
.stage.on b{color:var(--brass)}

.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.kpi .v{font-family:var(--f-display);font-size:26px;line-height:1.2}
.kpi .l{font-size:12.5px;color:var(--muted)}
.kpi.attn{border-color:var(--brass);background:var(--brass-soft)}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto}
.tab{background:none;border:0;border-bottom:2px solid transparent;padding:8px 14px;font-weight:500;color:var(--muted);white-space:nowrap}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.badge{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--brass);color:var(--surface);font-size:11px;font-weight:700;margin-inline-start:4px}

.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.toolbar .grow{flex:1}

/* Overview */
.ov{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.teams{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.team{--h:170;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.team-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.team-h h3{font-size:15.5px;color:hsl(var(--h) var(--team-s) var(--team-l))}
.team-h .tag{font-size:11px;color:var(--muted)}
.team .bar{height:5px;border-radius:9px;background:var(--surface-2);overflow:hidden}
.team .bar i{display:block;height:100%;background:hsl(var(--h) var(--team-s) var(--team-l))}
.agents{display:flex;flex-direction:column;gap:4px}
.agent{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:8px;background:none;border:0;text-align:start;width:100%}
.agent:hover{background:var(--surface-2)}
.av{--h:170;flex:none;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-weight:700;font-size:13px;background:hsl(var(--h) 40% var(--team-bg-l));color:hsl(var(--h) var(--team-s) var(--team-l))}
.agent .who{min-width:0;flex:1}
.agent .who b{display:block;font-size:13.5px;font-weight:500}
.agent .who span{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--line)}
.dot.working{background:var(--info);box-shadow:0 0 0 3px var(--info-soft);animation:pulse 1.4s infinite}
.dot.review{background:var(--warn)}
.dot.idle{background:var(--ok)}
.dot.waiting{background:var(--line)}
@keyframes pulse{50%{opacity:.4}}
@media (prefers-reduced-motion:reduce){.dot.working{animation:none}}
.hire-more{font-size:12.5px}
.empty-team{font-size:12.5px;color:var(--muted)}

.feed{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:10px;max-height:640px;overflow:auto}
.feed h3{font-size:15px}
.fi{font-size:12.5px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;padding-bottom:8px;border-bottom:1px dashed var(--line)}
.fi:last-child{border-bottom:0}
.fi time{color:var(--muted);font-size:11.5px;display:block}

/* Board */
.board{display:grid;grid-template-columns:repeat(5,minmax(220px,1fr));gap:12px;overflow-x:auto;padding-bottom:8px}
.col{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.col h3{font-size:14px;display:flex;justify-content:space-between;font-family:var(--f-body);font-weight:700}
.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:6px;text-align:start;width:100%}
.card:hover{border-color:var(--accent)}
.card b{font-weight:500;font-size:13.5px;line-height:1.55}
.card .row{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;font-size:11.5px;padding:1px 8px;border-radius:999px;font-weight:500}
.p-high{background:var(--bad-soft);color:var(--bad)}
.p-medium{background:var(--warn-soft);color:var(--warn)}
.p-low{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.s-todo{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.s-doing{background:var(--info-soft);color:var(--info)}
.s-review{background:var(--warn-soft);color:var(--warn)}
.s-rework{background:var(--bad-soft);color:var(--bad)}
.s-done{background:var(--ok-soft);color:var(--ok)}
.s-blocked{background:var(--surface-2);color:var(--muted);border:1px dashed var(--line)}

/* Inbox */
.inbox{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;align-items:start}
.q{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:8px}
.q.answered{opacity:.75}
.q .from{font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.q p{margin:0;font-weight:500}
.q .why{font-size:12.5px;color:var(--muted);font-weight:400}
textarea,input[type=text],input[type=number],select{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
textarea{resize:vertical;min-height:70px}
.stack{display:flex;flex-direction:column;gap:12px}
.ht{display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.ht input{margin-top:6px;width:18px;height:18px;accent-color:var(--accent)}
.ht.done b{text-decoration:line-through;color:var(--muted)}
.ht b{font-weight:500}
.ht p{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.section-h{font-size:17px;margin-bottom:4px}

/* Chat */
.chat{display:flex;flex-direction:column;gap:12px;max-width:860px}
.msgs{display:flex;flex-direction:column;gap:12px}
.msg{border-radius:var(--r);padding:12px 14px;border:1px solid var(--line);background:var(--surface);min-width:0}
.msg.me{background:var(--accent-soft);border-color:transparent;align-self:flex-start;max-width:85%}
.msg .by{font-size:12px;color:var(--muted);margin-bottom:4px}
.actions-box{border:1px dashed var(--brass);background:var(--brass-soft);border-radius:8px;padding:10px;margin-top:8px;display:flex;flex-direction:column;gap:6px;font-size:13px}
.composer{display:flex;gap:8px;align-items:flex-end;position:sticky;bottom:env(safe-area-inset-bottom,0px);background:var(--bg);padding-block:8px}
.composer textarea{min-height:52px}
.presets{display:flex;flex-wrap:wrap;gap:6px}

/* Docs */
.docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.doc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.doc pre{margin:0;font-size:12px;max-height:120px;overflow:hidden;white-space:pre-wrap;color:var(--muted);font-family:var(--f-body)}

/* Markdown */
.md{overflow-wrap:anywhere}
.md h1,.md h2,.md h3,.md h4{font-family:var(--f-display);margin:14px 0 6px}
.md h1{font-size:20px}.md h2{font-size:18px}.md h3{font-size:16px}.md h4{font-size:15px}
.md p{margin:6px 0}
.md ul,.md ol{margin:6px 0;padding-inline-start:22px}
.md table{border-collapse:collapse;font-size:13px;display:block;overflow-x:auto;max-width:100%}
.md th,.md td{border:1px solid var(--line);padding:5px 8px;text-align:start}
.md th{background:var(--surface-2)}
.md pre{direction:ltr;text-align:left;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:10px;overflow-x:auto;font-family:var(--f-mono);font-size:12.5px;line-height:1.55;margin:6px 0 0}
.md code{font-family:var(--f-mono);font-size:.92em}
.md blockquote{margin:8px 0;padding:4px 12px;border-inline-start:3px solid var(--brass);color:var(--muted)}
.codebar{display:flex;gap:6px;justify-content:flex-end;margin-top:4px}

/* Drawer & modal */
.scrim{position:fixed;inset:0;background:rgba(8,14,13,.45);z-index:20}
.drawer{position:fixed;top:0;bottom:0;left:0;width:min(640px,100%);background:var(--surface);z-index:21;box-shadow:var(--shadow);display:flex;flex-direction:column;direction:rtl;border-inline-start:1px solid var(--line)}
.drawer-h{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;padding:16px 20px;padding-top:calc(16px + env(safe-area-inset-top,0px));border-bottom:1px solid var(--line)}
.drawer-b{padding:16px 20px;padding-bottom:calc(30px + env(safe-area-inset-bottom,0px));overflow:auto;display:flex;flex-direction:column;gap:14px;min-height:0;flex:1}
.modal{position:fixed;z-index:21;inset:0;display:grid;place-items:center;padding:16px;direction:rtl;pointer-events:none}
.modal-card{pointer-events:auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);width:min(640px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:20px;display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:12.5px;color:var(--muted);font-weight:500}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.note{font-size:12.5px;color:var(--muted)}
.box{border:1px solid var(--line);border-radius:var(--r);padding:12px;background:var(--surface-2)}
.box.bad{border-color:var(--bad);background:var(--bad-soft)}
.box.ok{border-color:var(--ok);background:var(--ok-soft)}
.skills{display:flex;flex-wrap:wrap;gap:5px}
.progress{font-size:13px;display:flex;flex-direction:column;gap:4px}
.progress .line{display:flex;gap:8px;align-items:center}
iframe.preview{width:100%;height:60vh;border:1px solid var(--line);border-radius:8px;background:#fff}

/* Empty */
.hero{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:28px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:center}
.hero h2{font-size:32px}
.hero p{color:var(--muted);max-width:60ch}
.orgmap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;font-size:12px}
.orgmap .ceo{grid-column:1/-1;text-align:center;background:var(--accent);color:var(--accent-ink);border-radius:8px;padding:8px;font-family:var(--f-display);font-size:15px}
.orgmap span{--h:170;border-radius:7px;padding:6px 8px;background:hsl(var(--h) 40% var(--team-bg-l));color:hsl(var(--h) var(--team-s) var(--team-l));font-weight:500;text-align:center}
.examples{display:flex;flex-wrap:wrap;gap:6px}

.toast{position:fixed;bottom:calc(18px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:8px 16px;border-radius:9px;z-index:40;font-size:13.5px;direction:rtl;max-width:calc(100% - 32px)}

@media (max-width:1100px){.ov{grid-template-columns:minmax(0,1fr)}.inbox{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){
  #app{grid-template-columns:minmax(0,1fr)}
  .rail{position:static;height:auto;border-inline-start:0;border-bottom:1px solid var(--line)}
  .vlist{flex-direction:row;overflow-x:auto}
  .vitem{min-width:180px}
  .main{padding-inline:16px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stages{grid-template-columns:repeat(5,minmax(90px,1fr));overflow-x:auto}
  .hero{grid-template-columns:minmax(0,1fr);padding:20px}
  .grid2{grid-template-columns:minmax(0,1fr)}
  .vhead h2{font-size:24px}
}

/* Server edition additions */
.usage{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted);margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.usage .meter{height:6px;border-radius:9px;background:var(--surface-2);overflow:hidden}
.usage .meter i{display:block;height:100%;background:var(--accent)}
.usage .meter i.hot{background:var(--warn)}
.autopilot{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:5px 12px;background:var(--surface);font-weight:500;font-size:13px}
.autopilot.on{border-color:var(--ok);background:var(--ok-soft);color:var(--ok)}
.autopilot .sw{width:30px;height:17px;border-radius:999px;background:var(--line);position:relative;transition:background .2s}
.autopilot .sw::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:13px;height:13px;border-radius:50%;background:var(--surface);transition:inset-inline-start .2s}
.autopilot.on .sw{background:var(--ok)}
.autopilot.on .sw::after{inset-inline-start:15px}
.conn{font-size:11.5px;color:var(--muted)}
.conn.off{color:var(--bad)}
.login{min-height:100vh;display:grid;place-items:center;padding:16px;direction:rtl}
.login form{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:28px;width:min(380px,100%);display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow)}
.login .err{color:var(--bad);font-size:13px;min-height:1.2em}