/* Node portal design system.
   No build step and no CDN (the portal's CSP is default-src 'self'), so this is a single
   token-driven sheet in the spirit of a utility framework: one scale for colour, space,
   radius, shadow and motion, then thin components on top. Colour states are derived with
   color-mix() and the whole surface has a light, a dim and a dark skin. */

@font-face{font-family:IRANSans;src:url('/fonts/IRANSansWeb_Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:IRANSans;src:url('/fonts/IRANSansWeb.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:IRANSans;src:url('/fonts/IRANSansWeb_Medium.woff2') format('woff2');font-weight:500 650;font-style:normal;font-display:swap}
@font-face{font-family:IRANSans;src:url('/fonts/IRANSansWeb_Bold.woff2') format('woff2');font-weight:700 900;font-style:normal;font-display:swap}

/* ------------------------------------------------------------------ tokens */
:root{
  /* brand ramp */
  --brand-50:#eef6f1; --brand-100:#d9ebe0; --brand-200:#b3d7c3; --brand-300:#7ebb9c;
  --brand-400:#4d9b78; --brand-500:#2c7a5b; --brand-600:#1f5c43; --brand-700:#164634;
  --brand-800:#0f3327; --brand-900:#0a241c;
  --gold:#c9a961; --gold-soft:#f0e3bd;
  --danger:#c0574c; --danger-soft:#f7e6e4;
  --warning:#b5842a; --warning-soft:#fbf1dc;
  --success:#2f7d57; --success-soft:#e4f2ea;

  /* type scale */
  --text-2xs:10.5px; --text-xs:11.5px; --text-sm:12.5px; --text-md:14px; --text-lg:17px; --text-xl:23px; --text-2xl:29px;
  --leading:1.95; --leading-tight:1.6;
  /* space scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:22px; --s6:30px; --s7:44px; --s8:64px;
  /* shape */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:26px; --r-pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1); --fast:.16s; --slow:.34s;
}

/* Default skin: "dim" — dark chrome around light working surfaces. */
:root,[data-theme="dim"]{
  --chrome:var(--brand-900); --chrome-ink:#eaf2ec; --chrome-muted:#9db3a7; --chrome-line:#1c3a2e;
  --canvas:#f1f5f1; --canvas-2:#e8efe8;
  --surface:#ffffff; --surface-2:#fafcfa; --surface-sunken:#f4f8f4;
  --ink:#16261f; --ink-soft:#3f564a; --muted:#78897f;
  --line:#e2eae3; --line-soft:#edf2ed;
  --accent:var(--brand-600); --accent-ink:#ffffff; --accent-soft:var(--brand-50);
  --shadow-1:0 1px 2px rgba(10,36,28,.05),0 2px 8px rgba(10,36,28,.04);
  --shadow-2:0 4px 14px rgba(10,36,28,.07),0 18px 44px rgba(10,36,28,.08);
  --shadow-3:0 10px 30px rgba(10,36,28,.12),0 44px 90px rgba(10,36,28,.14);
  color-scheme:light;
}
[data-theme="light"]{
  --chrome:#ffffff; --chrome-ink:#16261f; --chrome-muted:#78897f; --chrome-line:#e2eae3;
  --canvas:#f6f9f5; --canvas-2:#eef4ee;
}
[data-theme="dark"]{
  --chrome:#07170f; --chrome-ink:#e8f1ea; --chrome-muted:#8ca396; --chrome-line:#173226;
  --canvas:#0b1c15; --canvas-2:#0f251b;
  --surface:#122a20; --surface-2:#163427; --surface-sunken:#0f2419;
  --ink:#e9f2ec; --ink-soft:#bcd0c3; --muted:#8ba395;
  --line:#1d3b2d; --line-soft:#183327;
  --accent:var(--brand-300); --accent-ink:#06180f; --accent-soft:#12302322;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 6px 20px rgba(0,0,0,.45); --shadow-3:0 20px 60px rgba(0,0,0,.55);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    --chrome:#07170f; --chrome-ink:#e8f1ea; --chrome-muted:#8ca396; --chrome-line:#173226;
    --canvas:#0b1c15; --canvas-2:#0f251b;
    --surface:#122a20; --surface-2:#163427; --surface-sunken:#0f2419;
    --ink:#e9f2ec; --ink-soft:#bcd0c3; --muted:#8ba395;
    --line:#1d3b2d; --line-soft:#183327;
    --accent:var(--brand-300); --accent-ink:#06180f; --accent-soft:#1230231f;
    --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 6px 20px rgba(0,0,0,.45); --shadow-3:0 20px 60px rgba(0,0,0,.55);
    color-scheme:dark;
  }
}

/* ------------------------------------------------------------------ base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100dvh;display:flex;flex-direction:column;
  font-family:IRANSans,Vazirmatn,Tahoma,system-ui,sans-serif;font-size:var(--text-md);line-height:var(--leading);
  color:var(--ink);direction:rtl;text-align:right;background:var(--canvas);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1200px 560px at 88% -10%,var(--canvas-2) 0%,transparent 60%),
    radial-gradient(900px 460px at 2% 4%,var(--canvas-2) 0%,transparent 55%);
}
h1,h2,h3,p{margin:0}
h1{font-size:var(--text-xl);font-weight:800;letter-spacing:-.2px;line-height:var(--leading-tight)}
h2{font-size:var(--text-lg);font-weight:800;letter-spacing:-.1px}
h3{font-size:var(--text-md);font-weight:600}
small{color:var(--muted);font-size:var(--text-xs)}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm)}
::selection{background:color-mix(in srgb,var(--accent) 28%,transparent);color:inherit}
h1,h2,h3,p,li,td,th,small,summary,textarea,input{unicode-bidi:plaintext}
bdi{unicode-bidi:isolate}
.ltr{direction:ltr;unicode-bidi:isolate;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--text-sm);letter-spacing:.2px}
.sep{unicode-bidi:isolate}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------------------------------------------ chrome */
.topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding:0 clamp(var(--s4),4vw,var(--s6));min-height:66px;
  background:color-mix(in srgb,var(--chrome) 92%,transparent);backdrop-filter:saturate(1.5) blur(16px);
  border-bottom:1px solid var(--chrome-line);color:var(--chrome-ink);
}
.brand{display:flex;align-items:center;gap:var(--s3);font-weight:800;font-size:15px;letter-spacing:-.1px}
.brand img{width:30px;height:30px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--chrome-ink) 12%,transparent);padding:4px}
.tabs{display:flex;align-items:center;gap:var(--s1)}
.tabs button{
  padding:var(--s2) var(--s4);border:0;border-radius:var(--r-pill);background:transparent;color:var(--chrome-muted);
  font-size:var(--text-sm);font-weight:600;transition:color var(--fast) var(--ease),background var(--fast) var(--ease);
}
.tabs button:hover{background:color-mix(in srgb,var(--chrome-ink) 10%,transparent);color:var(--chrome-ink)}
.tabs button.active{background:var(--brand-400);color:#06180f;box-shadow:0 6px 18px color-mix(in srgb,var(--brand-400) 40%,transparent)}
.tabs .ghost{margin-inline-start:var(--s2);border:1px solid var(--chrome-line);color:var(--chrome-muted);background:transparent;min-height:36px;padding:0 var(--s4)}
.tabs .ghost:hover{color:var(--chrome-ink);border-color:color-mix(in srgb,var(--chrome-ink) 30%,transparent);background:transparent}
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;
  border:1px solid var(--chrome-line);border-radius:var(--r-pill);background:transparent;color:var(--chrome-muted);font-size:15px;
  transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease)
}
.theme-toggle:hover{color:var(--chrome-ink);border-color:color-mix(in srgb,var(--chrome-ink) 30%,transparent)}

#app{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:clamp(var(--s4),3.4vw,var(--s6)) clamp(var(--s3),4vw,var(--s5)) var(--s8);display:flex;flex-direction:column;gap:var(--s4)}
.loading{margin:22vh auto;color:var(--muted);text-align:center;font-size:var(--text-sm)}
.foot{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s1) var(--s3);padding:0 clamp(var(--s4),4vw,var(--s6)) var(--s5);color:var(--muted);font-size:var(--text-xs);text-align:center}
.foot span{direction:ltr;unicode-bidi:isolate}
.foot-mark{font-weight:600;letter-spacing:.2px}

/* ------------------------------------------------------------------ surfaces */
.card{
  container-type:inline-size;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(var(--s4),2.6vw,var(--s5));box-shadow:var(--shadow-1);
  animation:rise var(--slow) var(--ease) both;
}
.card+.card{margin-top:var(--s4)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.card h2+p,.card h1+p{margin-top:var(--s2);color:var(--ink-soft)}
.mission{color:var(--ink-soft);line-height:2.1;max-width:72ch}

/* ------------------------------------------------------------------ sign in */
.login{
  /* an auto inline margin turns off flex stretch, so the width has to be definite for the container query */
  width:min(470px,100%);margin:clamp(var(--s5),9vh,86px) auto;padding:clamp(var(--s5),3.4vw,var(--s6));
  border-radius:var(--r-xl);box-shadow:var(--shadow-3);position:relative;overflow:hidden;
}
.login::before{content:'';position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--brand-600),var(--brand-400),var(--gold))}
.login-mark{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4);font-size:var(--text-sm);font-weight:600;color:var(--accent)}
.login-mark img{width:34px;height:34px;padding:5px;border-radius:var(--r-sm);background:var(--accent-soft)}
.login h1{margin-bottom:var(--s1)}
.login>p{color:var(--ink-soft);font-size:var(--text-sm)}
.login form{margin-top:var(--s4)}

label{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s4);font-size:var(--text-sm);font-weight:600;color:var(--ink-soft)}
input:not([type=file]),textarea,select{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);
  font-size:var(--text-md);transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease),background var(--fast) var(--ease);
}
input:not([type=file]):hover,textarea:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
input:not([type=file]):focus,textarea:focus,select:focus{outline:0;background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
input::placeholder,textarea::placeholder{color:var(--muted)}
/* the browser's autofill paints its own light background; keep the field on the current skin */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 1000px var(--surface-2) inset;caret-color:var(--ink)}

.primary,.ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:44px;padding:0 var(--s5);
  border-radius:var(--r-md);font-size:var(--text-sm);font-weight:600;border:1px solid transparent;
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease),background var(--fast) var(--ease),border-color var(--fast) var(--ease);
}
.primary{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 88%,#fff 12%),var(--accent));color:var(--accent-ink);box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 30%,transparent)}
.primary:hover{transform:translateY(-1px);box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 38%,transparent)}
.primary:active{transform:translateY(0)}
.primary[disabled]{opacity:.6;cursor:progress;transform:none}
.ghost{background:var(--surface);border-color:var(--line);color:var(--ink-soft)}
.ghost:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));color:var(--ink)}

.status{margin-top:var(--s3);font-size:var(--text-sm);color:var(--muted);min-height:1px}
.status.ok{color:var(--success)}
.status.error{color:var(--danger)}
.hint{color:var(--muted);font-size:var(--text-xs);line-height:1.9}
.hint.working{display:inline-flex;align-items:center;gap:var(--s2);color:var(--warning)}
.hint.working::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--warning);animation:pulse 1.5s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}
.empty{color:var(--muted);font-size:var(--text-sm);text-align:center;padding:var(--s5) var(--s2)}

/* Local preview notice: one quiet line in the page's own palette, not a warning slab. */
.local-preview{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  margin:var(--s4) 0 var(--s1);padding:var(--s3) var(--s4);border-radius:var(--r-md);
  border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));
  background:color-mix(in srgb,var(--accent) 8%,var(--surface));
}
.local-preview p{margin:0;font-size:var(--text-xs);color:var(--ink-soft);flex:1 1 200px}
.local-preview .hint{flex-basis:100%;color:var(--muted)}
.local-preview button{min-height:36px;padding:0 var(--s4);font-size:var(--text-sm)}

/* ------------------------------------------------------------------ data */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--s3);margin-top:var(--s4)}
.metric{padding:var(--s4);border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--surface-sunken)}
.metric b{display:block;font-size:var(--text-2xl);font-weight:800;letter-spacing:-.6px;color:var(--accent);line-height:1.45}
.metric small{display:block;color:var(--muted)}

.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s3) 2px;border-bottom:1px solid var(--line-soft)}
.row:last-child{border-bottom:0}
.row>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.row b{font-weight:600}
.row small{color:var(--muted)}

.badge{display:inline-flex;align-items:center;gap:var(--s1);padding:4px 11px;border-radius:var(--r-pill);font-size:var(--text-xs);font-weight:600;white-space:nowrap;border:1px solid transparent}
.badge.good{background:var(--success-soft);color:var(--success);border-color:color-mix(in srgb,var(--success) 22%,transparent)}
.badge.warn{background:var(--warning-soft);color:var(--warning);border-color:color-mix(in srgb,var(--warning) 22%,transparent)}
.badge.bad{background:var(--danger-soft);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 22%,transparent)}
.badge.neutral{background:var(--surface-sunken);color:var(--ink-soft);border-color:var(--line)}

/* ------------------------------------------------------------------ agents & chat */
.agent-row{cursor:pointer;border-radius:var(--r-md);padding-inline:var(--s3);margin-inline:calc(var(--s3) * -1);transition:background var(--fast) var(--ease),transform var(--fast) var(--ease)}
.agent-row:hover{background:var(--surface-sunken);transform:translateX(-3px)}
.agent-row::after{content:'گفتگو ‹';color:var(--accent);font-size:var(--text-xs);font-weight:600;opacity:0;transition:opacity var(--fast) var(--ease)}
.agent-row:hover::after{opacity:1}

.chat{margin-top:var(--s4)}
.chat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--line-soft);margin-bottom:var(--s3)}
.chat-log{
  display:flex;flex-direction:column;gap:var(--s3);max-height:54dvh;overflow:auto;padding:var(--s4);
  border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--surface-sunken);scroll-behavior:smooth;
}
.chat-log::-webkit-scrollbar{width:9px}
.chat-log::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 35%,transparent);border-radius:9px;border:2px solid transparent;background-clip:content-box}
.bubble{max-width:min(84%,580px);padding:11px 14px;border-radius:var(--r-lg);font-size:var(--text-md);line-height:2;box-shadow:var(--shadow-1);animation:rise .28s var(--ease) both}
.bubble p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.bubble small{display:block;margin-top:var(--s1);font-size:var(--text-2xs);color:var(--muted)}
.bubble.owner{align-self:flex-start;background:color-mix(in srgb,var(--accent) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));border-bottom-right-radius:var(--s1)}
.bubble.agent{align-self:flex-end;background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:var(--s1)}
.chat form{margin-top:var(--s3)}
.chat textarea{min-height:88px;resize:vertical;line-height:2}
.chat-actions{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s3);flex-wrap:wrap}
.chat-actions .hint{margin-inline-start:auto}

.files,.pending-files{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
.pending-files:empty{display:none}
.file{display:inline-flex;align-items:center;gap:var(--s2);padding:5px 11px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);font-size:var(--text-xs);color:var(--ink-soft)}
.file .drop{border:0;background:transparent;color:var(--danger);font-size:15px;line-height:1;padding:0 2px}
.file-pick{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s4);border:1px dashed color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:var(--r-md);background:var(--surface-2);font-size:var(--text-sm);font-weight:600;color:var(--ink-soft);margin:0;transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease),color var(--fast) var(--ease)}
.file-pick:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

#toast{
  position:fixed;inset-inline-start:var(--s5);bottom:var(--s5);z-index:60;max-width:min(92vw,420px);
  padding:13px 18px;border-radius:var(--r-md);background:var(--brand-800);color:#eaf2ec;
  font-size:var(--text-sm);box-shadow:var(--shadow-3);animation:rise .28s var(--ease) both;
}

/* ------------------------------------------------------------------ responsive */
@container (max-width:420px){
  .grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  body{font-size:13.5px}
  .topbar{min-height:auto;padding:var(--s2) var(--s3);flex-direction:column;align-items:stretch;gap:var(--s2)}
  .tabs{overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:0 0 auto}
  .tabs .ghost{margin-inline-start:0}
  #app{padding:var(--s4) var(--s3) var(--s7)}
  .login{margin:var(--s3) auto;border-radius:var(--r-lg)}
  .row{flex-direction:column;align-items:flex-start;gap:var(--s1)}
  .chat-log{max-height:60dvh;padding:var(--s3)}
  .bubble{max-width:94%}
  .chat-actions .hint{margin-inline-start:0;width:100%}
  #toast{inset-inline:var(--s3);bottom:var(--s3);text-align:center}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}