@import url('https://fonts.googleapis.com/css2?family=Reem+Kufi:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:#16211c; --ink-dim:#54634f;
  --paper:#eef1ec; --surface:#ffffff; --surface-2:#e3e8de; --line:#cfd6c7;
  --brass:#a1651c; --brass-strong:#7a4c12; --brass-tint:#f3e6d2;
  --good:#2f7d52; --good-tint:#dcefe2;
  --warn:#a8791b; --warn-tint:#f4ecd6;
  --crit:#b6432f; --crit-tint:#f6ded8;
  --shadow:0 1px 2px rgba(22,33,28,.06), 0 10px 28px -14px rgba(22,33,28,.22);
  --shadow-lift:0 4px 10px rgba(22,33,28,.08), 0 18px 40px -16px rgba(22,33,28,.28);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#eaeee6; --ink-dim:#a3ad9b;
    --paper:#121712; --surface:#1a201a; --surface-2:#222920; --line:#333e30;
    --brass:#dc9c4d; --brass-strong:#f2bd80; --brass-tint:#2c2214;
    --good:#66bd8b; --good-tint:#173325;
    --warn:#dbaa4c; --warn-tint:#332a13;
    --crit:#e18470; --crit-tint:#3a2019;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.55);
    --shadow-lift:0 4px 10px rgba(0,0,0,.35), 0 18px 40px -16px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --ink:#eaeee6; --ink-dim:#a3ad9b;
  --paper:#121712; --surface:#1a201a; --surface-2:#222920; --line:#333e30;
  --brass:#dc9c4d; --brass-strong:#f2bd80; --brass-tint:#2c2214;
  --good:#66bd8b; --good-tint:#173325;
  --warn:#dbaa4c; --warn-tint:#332a13;
  --crit:#e18470; --crit-tint:#3a2019;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.55);
  --shadow-lift:0 4px 10px rgba(0,0,0,.35), 0 18px 40px -16px rgba(0,0,0,.6);
}

*{box-sizing:border-box; min-width:0;}
html{color-scheme:light dark;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:"IBM Plex Sans Arabic","Segoe UI",sans-serif; direction:rtl; font-size:14px; line-height:1.55;}
h1,h2,h3,.brand-word,.plate-name,.dept-title{font-family:"Reem Kufi","IBM Plex Sans Arabic",sans-serif; font-weight:600; text-wrap:balance;}
.mono,.ts,.count,.kpi-num{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate;}
button{font-family:inherit; font-size:inherit; color:inherit;}
a{color:var(--brass);}
::selection{background:var(--brass-tint);}
:focus-visible{outline:2px solid var(--brass); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }

@keyframes fadeUp{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }
@keyframes shimmer{ from{background-position:200% 0;} to{background-position:-200% 0;} }

.app{display:grid; grid-template-columns:300px 1fr; min-height:100vh;}

/* Rail */
.rail{background:var(--surface); border-inline-start:1px solid var(--line); display:flex; flex-direction:column; min-height:100vh; position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto;}
.rail-brand{padding:20px 18px 14px; border-bottom:1px solid var(--line);}
.brand-mark{display:flex; align-items:center; gap:10px;}
.brand-badge{width:34px; height:34px; border-radius:9px; border:1.5px solid var(--brass); display:flex; align-items:center; justify-content:center; font-family:"Reem Kufi",sans-serif; font-weight:700; font-size:16px; color:var(--brass); flex:none;}
.brand-word{font-size:19px; letter-spacing:.02em;}
.company-row{margin-top:10px; display:flex; align-items:center; gap:8px;}
.company-name{font-size:13px; color:var(--ink-dim); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.company-name input{width:100%; background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:4px 8px; color:var(--ink); font-family:inherit; font-size:13px;}
.rename-btn{background:none; border:none; font-size:11px; color:var(--brass); cursor:pointer; padding:2px 0; text-decoration:underline; text-underline-offset:2px; flex:none;}

.rail-status{padding:8px 18px; font-size:11px; color:var(--ink-dim); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:6px;}
.dot{width:6px; height:6px; border-radius:50%; background:var(--ink-dim); flex:none;}
.dot.live{background:var(--good); animation:pulse 2s ease-in-out infinite;}
.dot.off{background:var(--crit);}

.nav-group{padding:10px 10px;}
.nav-label{font-size:10.5px; color:var(--ink-dim); letter-spacing:.08em; padding:8px 10px 4px;}
.nav-item{display:flex; align-items:center; gap:10px; width:100%; text-align:right; background:none; border:none; padding:9px 10px; border-radius:8px; cursor:pointer; color:var(--ink); font-size:13.5px; transition:background .12s ease;}
.nav-item:hover{background:var(--surface-2);}
.nav-item.active{background:var(--brass-tint); color:var(--brass-strong); font-weight:600;}
.nav-icon{width:18px; height:18px; flex:none; display:flex; align-items:center; justify-content:center;}
.nav-item .badge{margin-inline-start:auto;}

.plate{display:flex; align-items:center; gap:10px; width:100%; text-align:right; background:none; border:none; padding:9px 10px; border-radius:8px; cursor:pointer; color:var(--ink); transition:background .12s ease;}
.plate:hover{background:var(--surface-2);}
.plate.active{background:var(--brass-tint);}
.mono-badge{flex:none; width:32px; height:32px; border-radius:50%; border:1.5px solid var(--brass); display:flex; align-items:center; justify-content:center; font-family:"Reem Kufi",sans-serif; font-size:12px; color:var(--brass); background:var(--surface);}
.plate-col{flex:1; overflow:hidden; display:flex; flex-direction:column; gap:1px;}
.plate-name{display:block; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.plate-tag{display:block; font-size:11px; color:var(--ink-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.badge{flex:none; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--surface-2); color:var(--ink-dim); font-size:10.5px; display:flex; align-items:center; justify-content:center;}
.badge.warn{background:var(--warn-tint); color:var(--warn);}
.rail-foot{margin-top:auto; padding:14px 18px; border-top:1px solid var(--line);}
.rail-toggle{display:none;}

/* Main */
.main{min-width:0; display:flex; flex-direction:column;}
.topbar{display:flex; align-items:center; gap:12px; padding:16px 26px; border-bottom:1px solid var(--line); background:var(--paper); position:sticky; top:0; z-index:5;}
.topbar h2{margin:0; font-size:18px;}
.topbar .sub{color:var(--ink-dim); font-size:12.5px; margin-top:2px;}
.topbar-spacer{flex:1;}
.btn{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:9px 14px; cursor:pointer; font-size:13px; color:var(--ink); display:inline-flex; align-items:center; gap:6px; transition:border-color .12s ease, transform .08s ease, background .12s ease;}
.btn:hover{border-color:var(--brass); color:var(--brass-strong);}
.btn:active{transform:scale(.97);}
.btn.primary{background:var(--brass); border-color:var(--brass); color:#fff9f0; font-weight:600;}
.btn.primary:hover{background:var(--brass-strong); border-color:var(--brass-strong); color:#fff9f0;}
.btn:disabled{opacity:.5; cursor:default; transform:none;}
.btn.small{padding:6px 10px; font-size:12px;}
.btn.ghost{background:none;}

.view{padding:24px 26px 60px; max-width:1180px; animation:fadeUp .25s ease;}

.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:22px;}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px; box-shadow:var(--shadow); border-inline-start:3px solid var(--line); transition:box-shadow .15s ease, transform .15s ease;}
.kpi:hover{box-shadow:var(--shadow-lift); transform:translateY(-1px);}
.kpi.k-new{border-inline-start-color:var(--brass);}
.kpi.k-active{border-inline-start-color:var(--warn);}
.kpi.k-done{border-inline-start-color:var(--good);}
.kpi-num{font-size:26px; font-weight:600;}
.kpi-label{font-size:12px; color:var(--ink-dim); margin-top:2px;}

h3.section-title{font-size:14px; margin:26px 0 10px; display:flex; align-items:center; gap:8px;}
h3.section-title .cnt{color:var(--ink-dim); font-weight:400; font-size:12px;}

.team-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px;}
.team-card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px; cursor:pointer; box-shadow:var(--shadow); display:flex; gap:10px; text-align:right; transition:box-shadow .15s ease, transform .15s ease, border-color .15s ease;}
.team-card:hover{border-color:var(--brass); box-shadow:var(--shadow-lift); transform:translateY(-2px);}
.team-card .info{flex:1; min-width:0;}
.team-card .plate-name{font-size:14px;}
.team-card .plate-tag{white-space:normal; margin-top:2px;}
.team-card .load{margin-top:8px; font-size:11px; color:var(--ink-dim);}

.feed-list{display:flex; flex-direction:column;}
.feed-row{display:flex; gap:10px; padding:10px 4px; border-bottom:1px solid var(--line); align-items:flex-start; animation:fadeUp .3s ease;}
.feed-row:last-child{border-bottom:none;}
.feed-row.coord{background:linear-gradient(to left, transparent, var(--brass-tint) 1200%);}
.feed-text{flex:1; font-size:13px;}
.feed-text b{font-weight:600;}
.feed-time{color:var(--ink-dim); font-size:11px; flex:none;}
.empty-note{color:var(--ink-dim); font-size:13px; padding:14px 4px;}

.dept-head{display:flex; align-items:center; gap:12px; margin-bottom:18px;}
.dept-head .mono-badge{width:44px; height:44px; font-size:16px;}
.dept-title{font-size:19px;}
.dept-tag{color:var(--ink-dim); font-size:12.5px; margin-top:2px;}

.dept-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:18px; align-items:start;}
@media (max-width:980px){ .dept-grid{grid-template-columns:1fr;} }

.panel{background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);}
.panel-title{font-size:12.5px; font-weight:600; padding:12px 14px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px;}

.chat-box{display:flex; flex-direction:column; height:min(62vh,620px);}
.chat-scroll{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px;}
.bubble{max-width:82%; padding:9px 12px; border-radius:12px; font-size:13.5px; white-space:pre-wrap; animation:fadeUp .2s ease;}
.bubble.ceo{align-self:flex-start; background:var(--surface-2); border-bottom-left-radius:3px;}
.bubble.ai{align-self:flex-end; background:var(--brass-tint); border-bottom-right-radius:3px;}
.bubble .who{font-size:10.5px; color:var(--ink-dim); margin-bottom:3px; display:block;}
.bubble.thinking .dots span{animation:pulse 1.2s ease-in-out infinite; display:inline-block;}
.bubble.thinking .dots span:nth-child(2){animation-delay:.15s;}
.bubble.thinking .dots span:nth-child(3){animation-delay:.3s;}
.composer{border-top:1px solid var(--line); padding:10px; display:flex; gap:8px; align-items:flex-end;}
.composer textarea{flex:1; resize:none; border:1px solid var(--line); border-radius:8px; padding:9px 10px; background:var(--paper); color:var(--ink); font-family:inherit; font-size:13.5px; min-height:40px; max-height:120px;}
.attach-chip{display:inline-flex; align-items:center; gap:6px; background:var(--surface-2); border-radius:7px; padding:4px 8px; font-size:11.5px; margin:0 10px 8px;}
.attach-chip button{background:none; border:none; cursor:pointer; color:var(--crit); font-size:13px; line-height:1;}

.side-panel{display:flex; flex-direction:column; gap:16px;}
.task-mini{padding:10px 14px; border-bottom:1px solid var(--line);}
.task-mini:last-child{border-bottom:none;}
.task-mini .t-title{font-size:13px; font-weight:600;}
.task-mini .t-brief{font-size:12px; color:var(--ink-dim); margin-top:2px;}
.task-mini .t-row{display:flex; align-items:center; gap:8px; margin-top:8px;}

.file-mini{display:flex; align-items:center; gap:8px; padding:9px 14px; border-bottom:1px solid var(--line); font-size:12.5px;}
.file-mini:last-child{border-bottom:none;}
.file-mini .fname{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.file-badge{flex:none; width:26px; height:26px; border-radius:6px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-size:9.5px; font-family:"IBM Plex Mono",monospace; color:var(--ink-dim);}

.pill{font-size:10.5px; padding:2px 8px; border-radius:20px; display:inline-block; transition:background .2s ease, color .2s ease;}
.pill.new{background:var(--surface-2); color:var(--ink-dim);}
.pill.active{background:var(--warn-tint); color:var(--warn);}
.pill.done{background:var(--good-tint); color:var(--good);}
.pill.error{background:var(--crit-tint); color:var(--crit);}

.board{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; align-items:start;}
@media (max-width:820px){ .board{grid-template-columns:1fr;} }
.col{background:var(--surface-2); border-radius:12px; padding:10px; min-height:120px;}
.col-head{display:flex; align-items:center; gap:8px; padding:4px 6px 10px; font-size:12.5px; font-weight:600;}
.col-head .stripe{width:8px; height:8px; border-radius:2px;}
.stripe.new{background:var(--brass);}
.stripe.active{background:var(--warn);}
.stripe.done{background:var(--good);}
.card{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px; margin-bottom:10px; box-shadow:var(--shadow); animation:fadeUp .25s ease; transition:box-shadow .15s ease, transform .15s ease;}
.card:hover{box-shadow:var(--shadow-lift); transform:translateY(-1px);}
.card .top-row{display:flex; align-items:center; gap:8px; justify-content:space-between;}
.card .c-title{font-size:13.5px; font-weight:600; margin-top:6px;}
.card .c-brief{font-size:12px; color:var(--ink-dim); margin-top:4px;}
.card .c-result{font-size:12.5px; margin-top:8px; padding-top:8px; border-top:1px solid var(--line); white-space:pre-wrap;}
.card .c-actions{margin-top:10px; display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.icon-x{background:none; border:none; color:var(--ink-dim); cursor:pointer; font-size:13px;}
.icon-x:hover{color:var(--crit);}

.file-table{width:100%; border-collapse:collapse; font-size:13px;}
.file-table th{text-align:right; font-size:11px; color:var(--ink-dim); font-weight:600; padding:8px 10px; border-bottom:1px solid var(--line);}
.file-table td{padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle;}
.file-table tr:last-child td{border-bottom:none;}

.overlay{position:fixed; inset:0; background:rgba(16,20,14,.42); display:flex; align-items:center; justify-content:center; z-index:40; padding:16px; animation:fadeUp .15s ease;}
.modal{background:var(--surface); border-radius:14px; width:min(480px,100%); box-shadow:var(--shadow-lift); border:1px solid var(--line);}
.modal-head{padding:16px 18px; border-bottom:1px solid var(--line); font-size:15px; font-weight:600; font-family:"Reem Kufi",sans-serif;}
.modal-body{padding:16px 18px; display:flex; flex-direction:column; gap:12px;}
.field label,.field>span{display:block; font-size:12px; color:var(--ink-dim); margin-bottom:5px;}
.field input,.field select,.field textarea{width:100%; background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:8px 10px; color:var(--ink); font-family:inherit; font-size:13.5px;}
.field textarea{resize:vertical; min-height:70px;}
.modal-foot{padding:14px 18px; border-top:1px solid var(--line); display:flex; justify-content:left; gap:8px;}

.stop-btn{background:none; border:1px solid var(--crit); color:var(--crit); border-radius:7px; padding:4px 9px; font-size:11.5px; cursor:pointer;}

.skel{background:linear-gradient(90deg, var(--surface-2) 25%, var(--surface) 37%, var(--surface-2) 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite; border-radius:8px;}

.toast-host{position:fixed; bottom:18px; left:18px; display:flex; flex-direction:column; gap:8px; z-index:60;}
.toast{background:var(--ink); color:var(--paper); padding:10px 14px; border-radius:9px; font-size:12.5px; box-shadow:var(--shadow-lift); animation:fadeUp .2s ease; max-width:320px;}
.toast.err{background:var(--crit);}

/* login */
.login-body{display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--paper);}
.login-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:26px; width:min(340px,90vw); box-shadow:var(--shadow-lift); display:flex; flex-direction:column; gap:14px;}
.login-sub{text-align:center; color:var(--ink-dim); font-size:12.5px; margin:0;}
.login-error{background:var(--crit-tint); color:var(--crit); border-radius:8px; padding:8px 10px; font-size:12.5px; text-align:center;}

/* installer */
.wrap{max-width:520px; margin:40px auto; padding:0 16px;}
.install-card{width:100%; text-align:right; align-items:stretch;}
.install-card p{margin:0; font-size:13px; color:var(--ink-dim);}
.tok{font-family:"IBM Plex Mono",monospace; font-size:11.5px; background:var(--surface-2); border-radius:8px; padding:8px 10px; word-break:break-all; direction:ltr; text-align:left; margin:0;}

@media (max-width:900px){
  .app{grid-template-columns:1fr;}
  .rail{position:fixed; inset-inline-end:0; top:0; height:100vh; width:280px; transform:translateX(100%); transition:transform .2s ease; z-index:50; box-shadow:var(--shadow-lift);}
  .rail.open{transform:translateX(0);}
  .rail-toggle{display:inline-flex;}
  .kpis{grid-template-columns:repeat(2,1fr);}
}