/* ==========================================================================
   Arena — Agent Mode (arena.ai/agent) — بازسازی ۱:۱
   اندازه‌ها از DOM واقعی: ریل ۵۰px، ورودی 660×158، ردیف کانکتور، دکمهٔ ارسال
   ========================================================================== */

@font-face{font-family:'Vazirmatn';src:url('../fonts/Vazirmatn-Thin.woff2') format('woff2');font-weight:100;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('../fonts/Vazirmatn-ExtraLight.woff2') format('woff2');font-weight:200;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('../fonts/Vazirmatn-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('../fonts/Vazirmatn-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('../fonts/Vazirmatn-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('../fonts/Vazirmatn-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('../fonts/Vazirmatn-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('../fonts/Vazirmatn-ExtraBold.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('../fonts/Vazirmatn-Black.woff2') format('woff2');font-weight:900;font-display:swap}

:root{
  --surface-primary: hsl(36 45% 98%);
  --surface-white:   #fff;
  --surface-tertiary:hsl(33 31% 94%);
  --surface-raised:  hsl(33 28% 92%);
  --text-primary:    hsl(24 6% 17%);
  --text-heading:    hsl(60 3% 14%);
  --text-secondary:  hsl(30 7% 24%);
  --text-tertiary:   hsl(35 6% 38%);
  --text-muted:      hsl(37 5% 52%);
  --text-placeholder:hsl(30 7% 24% / .32);
  --border-faint:    hsl(30 5% 93%);
  --border-medium:   hsl(30 9% 87%);
  --border-strong:   hsl(30 9% 83%);
  --interactive-cta: hsl(60 3% 14%);
  --interactive-on-cta: hsl(36 45% 98%);
  --highlight:       #f4c406;
  --font-ui:'Vazirmatn', ui-sans-serif, system-ui, sans-serif;
  --font-display:'Vazirmatn', serif;
  --ease:cubic-bezier(.4,0,.2,1);
  --col: 672px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  margin:0;font-family:var(--font-ui);font-size:16px;line-height:1.7;direction:rtl;text-align:right;
  color:var(--text-primary);background:var(--surface-primary);
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
svg{display:block;flex:none}
::selection{background:var(--highlight);color:var(--text-primary)}

/* ===================== چیدمان: ریل ۵۰px + صحنه ===================== */
.app{display:flex;height:100vh;height:100dvh;overflow:hidden;direction:rtl}
.rail{order:2}
.stage{order:1}

.rail{
  width:50px;flex:none;padding:12px 8px 8px;
  display:flex;flex-direction:column;align-items:flex-start;
}
.rail-btn{
  width:26px;height:26px;display:grid;place-items:center;border-radius:6px;
  color:var(--text-primary);transition:background .15s var(--ease);
}
.rail-btn:hover{background:var(--surface-raised)}
.rail-btn svg{width:18px;height:18px}

.stage{flex:1;position:relative;min-width:0;display:flex;flex-direction:column}

.ws-toggle{
  position:absolute;inset-block-start:10px;inset-inline-start:10px;z-index:5;
  width:32px;height:32px;display:grid;place-items:center;border-radius:4px;
  color:var(--text-tertiary);transition:background .15s var(--ease);
}
.ws-toggle:hover{background:var(--surface-raised)}
.ws-toggle svg{width:16px;height:16px}

/* ===================== مرکز صفحه ===================== */
.center{
  flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:0 24px 76px;overflow-y:auto;
}
.stack{width:100%;max-width:var(--col);display:flex;flex-direction:column;margin-top:0}

.wordmark{display:flex;justify-content:center;color:var(--text-primary);margin-bottom:16px}
.wordmark svg{height:28px;width:auto}

h1.title{
  margin:0 0 40px;text-align:center;
  font-family:var(--font-display);
  font-size:38px;line-height:1.5;font-weight:800;letter-spacing:-.8px;
  color:var(--text-tertiary);
}
h1.title .hl{display:inline-block;background:var(--highlight);color:var(--text-primary);padding:0 10px;border-radius:4px;line-height:1.35}

/* ---------- ورودی Agent: 660×158، r14 ---------- */
.composer{
  position:relative;width:100%;height:138px;
  background:var(--surface-white);
  border:1px solid var(--border-medium);
  border-radius:14px;
  display:flex;flex-direction:column;
}
.composer:focus-within{border-color:var(--border-medium)}
.composer, .bar, .connectors{direction:rtl}
.composer textarea{
  flex:none;height:40px;width:100%;padding:12px;
  border:0;outline:none;resize:none;background:transparent;
  font-family:var(--font-ui);font-size:16px;line-height:1.5;color:var(--text-primary);
  border-radius:14px 14px 0 0;
  overflow-y:auto;
}
.composer textarea::placeholder{color:var(--text-placeholder);opacity:1}

.bar{display:flex;align-items:center;gap:8px;padding:0 8px 9px;margin-top:auto;direction:rtl}
.ibtn{
  width:32px;height:32px;display:grid;place-items:center;border-radius:6px;
  color:var(--text-secondary);transition:background .15s var(--ease);
}
.ibtn:hover{background:var(--surface-raised)}
.ibtn svg{width:16px;height:16px}
.ibtn .sm{width:12px;height:12px}

.mode-btn{
  height:32px;padding:0 8px;display:inline-flex;align-items:center;gap:6px;
  border-radius:6px;font-size:14px;line-height:20px;font-weight:500;color:var(--text-primary);
  transition:background .15s var(--ease);
}
.mode-btn:hover{background:var(--surface-raised)}
#modeLabel{font-weight:400}
.mode-btn .mi{width:20px;height:20px;display:grid;place-items:center}
.mode-btn .chev{width:12px;height:12px;color:var(--text-primary)}
.mode-btn .chev svg{width:12px;height:12px;flex:none}

.spacer{flex:1}

/* دکمهٔ ارسال: ۳۲×۳۲ با بوردر و شعاع ۴ (متفاوت با صفحهٔ اصلی) */
.send{
  width:32px;height:32px;display:grid;place-items:center;border-radius:4px;
  border:1px solid var(--border-medium);color:var(--text-primary);
  transition:background .15s var(--ease),border-color .15s var(--ease);
}
.send:hover{background:var(--surface-raised);border-color:var(--border-strong)}
.send svg{width:16px;height:16px}

/* ---------- ردیف کانکتورها ---------- */
.connectors{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;
  padding-bottom:12px;margin-top:12px;
}
.conn{
  height:32px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--border-medium);border-radius:8px;
  background:var(--surface-primary);color:var(--text-primary);
  font-size:14px;line-height:20px;
  transition:background .15s var(--ease);
}
.conn:hover{background:var(--surface-tertiary)}
.conn svg{width:16px;height:16px}

/* ===================== منوها ===================== */
.menu{
  position:absolute;z-index:60;min-width:236px;padding:4px;
  background:var(--surface-white);border:1px solid var(--border-medium);border-radius:10px;
  box-shadow:0 10px 32px -10px rgba(23,20,15,.25), 0 2px 6px rgba(23,20,15,.06);
  animation:menuIn .12s var(--ease);
}
@keyframes menuIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.menu[hidden]{display:none}
.menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px;border-radius:6px;
  font-size:13px;line-height:16px;color:var(--text-primary);text-align:start}
.menu-item:hover{background:var(--surface-tertiary)}
.menu-item .sub{display:block;font-size:11px;line-height:14px;color:var(--text-tertiary);margin-top:2px}
.menu-item .check{margin-inline-start:auto;opacity:0;color:var(--text-primary)}
.menu-item[aria-checked="true"] .check{opacity:1}
.menu-head{padding:6px 8px 4px;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-muted)}
.menu-sep{height:1px;background:var(--border-faint);margin:4px 2px}

/* ===================== مودال ورود ===================== */
.scrim{position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  background:rgba(28,26,22,.42);backdrop-filter:blur(2px);animation:fadeIn .16s var(--ease)}
.scrim[hidden]{display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{width:min(400px,calc(100vw - 32px));background:var(--surface-white);border-radius:14px;
  padding:24px;box-shadow:0 24px 60px -20px rgba(23,20,15,.4);animation:pop .18s var(--ease);position:relative}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
.modal h2{margin:0 0 6px;font-family:var(--font-display);font-size:22px;font-weight:500;letter-spacing:-.3px;color:var(--text-heading)}
.modal p.sub{margin:0 0 18px;font-size:13px;line-height:18px;color:var(--text-tertiary)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.field label{font-size:12px;font-weight:500;color:var(--text-secondary)}
.field input{height:40px;padding:0 12px;border:1px solid var(--border-medium);border-radius:6px;
  font:inherit;font-size:14px;background:var(--surface-white);outline:none;color:var(--text-primary)}
.field input:focus{border-color:hsl(208 87% 53%);box-shadow:0 0 0 3px hsl(208 87% 53% / .14)}
.modal .submit{width:100%;height:40px;display:flex;align-items:center;justify-content:center;
  background:var(--interactive-cta);color:var(--interactive-on-cta);border-radius:6px;font-size:14px;font-weight:500}
.modal .submit:hover{background:hsl(24 6% 23%)}
.modal .x{position:absolute;inset-block-start:10px;inset-inline-end:10px;width:28px;height:28px;
  display:grid;place-items:center;border-radius:6px;color:var(--text-tertiary);font-size:13px}
.modal .x:hover{background:var(--surface-tertiary)}

.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}

/* ===================== واکنش‌گرا ===================== */
@media (max-width: 900px){
  .rail{width:44px;padding:10px 6px}
  .ws-toggle{display:none}
}
@media (max-width: 720px){
  .center{justify-content:flex-start;padding:24px 16px 40px}
  :root{--col:100%}
  h1.title{font-size:32px;letter-spacing:-.8px;margin-bottom:22px}
  .wordmark svg{height:22px}
  .composer{height:auto}
  .composer, .bar, .connectors{direction:rtl}
.composer textarea{height:64px}
  .connectors{gap:6px}
  .conn{padding:0 10px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.mode-btn .mi svg{width:16px;height:16px;flex:none}

/* ---- اصلاح جهت: آیکون افزودن در راست، ارسال در چپ ---- */
.connectors{direction:rtl}
.conn svg{order:1}
.conn span{order:2}