@import url('https://cdn.jsdelivr.net/npm/@fontsource-variable/vazirmatn/index.css');

/* makeweb — warm-dark technical console.
   Aesthetic: refined terminal/IDE. Warm charcoal, single amber accent,
   mono for code & ids, real Persian type. RTL-first. */
:root {
  --bg:#15120d;
  --bg-2:#1b1812;
  --panel:#201c15;
  --panel-2:#262118;
  --border:#322c22;
  --border-2:#403828;
  --fg:#ece4d4;
  --muted:#9b9281;
  --faint:#6f685a;
  --accent:#e89a4c;
  --accent-soft:#e89a4c1a;
  --accent-line:#e89a4c66;
  --user:#2b2419;
  --ok:#7fb069;
  --err:#e3705f;
  --mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --radius:12px;
  --shadow:0 8px 30px #0007;
}
* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0;
  font-family:'Vazirmatn Variable', Vazirmatn, system-ui, 'Segoe UI', Tahoma, sans-serif;
  background:var(--bg);
  background-image:
    radial-gradient(1100px 600px at 100% -10%, #e89a4c10, transparent 60%),
    radial-gradient(900px 500px at -10% 110%, #e89a4c0a, transparent 55%);
  color:var(--fg);
  height:100dvh;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
::selection { background:var(--accent-soft); }

/* scrollbars */
* { scrollbar-width:thin; scrollbar-color:var(--border-2) transparent; }
*::-webkit-scrollbar { width:9px; height:9px; }
*::-webkit-scrollbar-thumb { background:var(--border-2); border-radius:10px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover { background:var(--faint); }

.center { display:flex; align-items:center; justify-content:center; min-height:100dvh; padding:20px; }
.muted { color:var(--muted); }
.err { color:var(--err); min-height:1.2em; font-size:.88em; }

/* controls */
input, button, select, textarea {
  font-family:inherit; font-size:14px; color:var(--fg);
  border-radius:9px; border:1px solid var(--border-2);
  background:var(--bg-2); padding:10px 12px; transition:border-color .15s, background .15s, box-shadow .15s;
}
input:focus, textarea:focus { outline:none; border-color:var(--accent-line); box-shadow:0 0 0 3px var(--accent-soft); }
input::placeholder, textarea::placeholder { color:var(--faint); }
button {
  background:var(--accent); border-color:transparent; color:#1a140c; font-weight:600;
  cursor:pointer; transition:filter .15s, transform .05s;
}
button:hover { filter:brightness(1.07); }
button:active { transform:translateY(1px); }
button.ghost { background:transparent; color:var(--fg); border-color:var(--border-2); font-weight:500; }
button.ghost:hover { border-color:var(--accent-line); color:var(--accent); filter:none; }
label { font-size:11.5px; color:var(--muted); letter-spacing:.02em; text-transform:uppercase; }

.brand { font-family:var(--mono); font-weight:700; letter-spacing:-.02em; font-size:16px; }
.brand b { color:var(--accent); }

/* ---------- login ---------- */
.login {
  width:min(360px, 100%); display:flex; flex-direction:column; gap:14px; text-align:center;
  padding:30px 26px; background:linear-gradient(180deg, var(--panel), var(--bg-2));
  border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow);
  animation:rise .5s cubic-bezier(.2,.7,.2,1) both;
}
.login h1 { margin:0; font-family:var(--mono); font-size:26px; letter-spacing:-.03em; }
.login h1 .dot { color:var(--accent); }
.login p { margin:0 0 4px; }
.login input { text-align:start; }
.login button { padding:11px; font-size:15px; margin-top:2px; }
@keyframes rise { from { opacity:0; transform:translateY(14px); } }

/* ---------- app shell ---------- */
.app { display:grid; grid-template-columns:312px 1fr; height:100dvh; overflow:hidden; }
.side {
  background:linear-gradient(180deg, var(--panel), var(--bg-2));
  border-inline-end:1px solid var(--border); display:flex; flex-direction:column; min-height:0;
}
.side header {
  padding:14px 16px; border-bottom:1px solid var(--border);
  display:flex; gap:8px; align-items:center; justify-content:space-between;
}
.side header .links { display:flex; gap:6px; align-items:center; }
.side header a { color:var(--muted); text-decoration:none; font-size:12.5px; padding:4px 7px; border-radius:7px; transition:.15s; }
.side header a:hover { color:var(--accent); background:var(--accent-soft); }
.side .scroll { overflow:auto; padding:14px; flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; }
.side .scroll > label { margin-top:4px; }

.row { display:flex; gap:8px; }
.list { display:flex; flex-direction:column; gap:5px; }
.list .item {
  padding:9px 11px; border:1px solid var(--border); border-radius:9px; cursor:pointer;
  font-size:12.5px; background:var(--bg-2); color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:.14s;
}
.list .item:hover { border-color:var(--border-2); color:var(--fg); background:var(--panel-2); }
.list .item.active { border-color:var(--accent-line); color:var(--fg); background:var(--accent-soft); }
#cwd { width:100%; flex:1; background:var(--bg); font-family:var(--mono); font-size:12px; color:var(--accent); }
#runs .item { color:var(--ok); border-color:#3a4a2e; }

/* ---------- main / tabs ---------- */
/* min-width:0 lets the column shrink below xterm's intrinsic width (no h-scroll) */
.main { display:flex; flex-direction:column; min-height:0; min-width:0; background:var(--bg); }
.tabs {
  display:flex; gap:6px; padding:10px 14px; border-bottom:1px solid var(--border);
  background:#1b1812cc; backdrop-filter:blur(8px); align-items:center; position:sticky; top:0; z-index:5;
}
.tabs a { color:var(--muted); text-decoration:none; padding:7px 13px; border-radius:8px; font-size:13px; transition:.15s; }
.tabs a:hover { color:var(--fg); background:var(--panel-2); }
.tabs a.active { color:var(--accent); background:var(--accent-soft); font-weight:600; }
.grow { flex:1; }
.chip { font-size:12px; color:var(--muted); font-family:var(--mono); }
.spin { font-size:12px; color:var(--accent); display:inline-flex; align-items:center; gap:7px; }
.spin:not(:empty)::before {
  content:''; width:8px; height:8px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 var(--accent-line); animation:pulse 1.2s infinite;
}
@keyframes pulse { 0%{box-shadow:0 0 0 0 var(--accent-soft);} 70%{box-shadow:0 0 0 7px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }

/* ---------- chat ---------- */
.msgs { flex:1; overflow:auto; min-width:0; padding:22px; display:flex; flex-direction:column; gap:14px; scroll-behavior:smooth; }
.msg {
  max-width:min(760px, 92%); padding:12px 16px; border-radius:14px; border:1px solid var(--border);
  line-height:1.85; font-size:14.5px; animation:msgin .25s ease both; word-break:break-word;
}
@keyframes msgin { from { opacity:0; transform:translateY(6px); } }
.msg.user { align-self:flex-end; background:var(--user); border-color:var(--border-2); border-end-end-radius:4px; }
.msg.assistant { align-self:flex-start; background:var(--panel); border-end-start-radius:4px; }
.msg.tool {
  align-self:flex-start; background:#181d14; border-color:#2c3a22; color:#b7c8a6;
  font-family:var(--mono); font-size:12px; white-space:pre-wrap; padding:9px 13px; border-radius:9px;
}
.msg.think {
  align-self:flex-start; background:transparent; border:1px dashed var(--border-2);
  color:var(--muted); font-size:12.5px; font-style:italic; white-space:pre-wrap;
  padding:9px 13px; border-radius:9px; opacity:.85;
}
.msg p { margin:0 0 .6em; } .msg p:last-child { margin:0; }
.msg pre { background:#0d0b07; padding:13px; border-radius:10px; overflow:auto; direction:ltr; text-align:left; border:1px solid var(--border); }
.msg code { font-family:var(--mono); font-size:.9em; }
.msg :not(pre) > code { background:#0d0b07; padding:1px 6px; border-radius:5px; color:var(--accent); }
.msg a { color:var(--accent); }

.composer { border-top:1px solid var(--border); padding:12px 14px; display:flex; flex-direction:column; gap:9px; background:var(--bg-2); }
.composer textarea { width:100%; resize:none; min-height:52px; max-height:35dvh; line-height:1.7; }
.composer .bar { display:flex; gap:8px; align-items:center; }
.composer .bar button { padding:9px 16px; }

/* ---------- terminal ---------- */
.term-wrap { flex:1; padding:10px; background:#0c0a07; min-height:0; min-width:0; overflow:hidden; }
#term { height:100%; width:100%; }
/* bidi: let each text run order itself (RTL for Persian/Arabic) so terminal
   output in Persian reads correctly; latin/box-drawing stay LTR */
.xterm .xterm-rows span { unicode-bidi: plaintext; }
#newterm { width:100%; }

/* ---------- mobile drawer ---------- */
.menu-btn { display:none; background:transparent; border:1px solid var(--border-2); color:var(--fg); padding:7px 12px; font-size:17px; line-height:1; border-radius:9px; font-weight:400; }
.backdrop { display:none; }

@media (max-width:820px) {
  .app { grid-template-columns:1fr; }
  .menu-btn { display:inline-flex; align-items:center; }
  .side {
    position:fixed; inset-block:0; right:0; /* RTL: drawer lives on the right */
    width:86%; max-width:340px; z-index:50;
    transform:translateX(100%); transition:transform .26s cubic-bezier(.2,.7,.2,1);
    border-inline-end:none; border-inline-start:1px solid var(--border); box-shadow:-12px 0 40px #000a;
  }
  .app.open .side { transform:translateX(0); }
  .app.open .backdrop { display:block; position:fixed; inset:0; background:#0008; backdrop-filter:blur(2px); z-index:40; animation:fade .2s; }
  @keyframes fade { from { opacity:0; } }
  .main { grid-column:1; }
  .msg { max-width:90%; }
  input, button, select, textarea { font-size:16px; } /* stop iOS zoom */
  .list .item { padding:11px 12px; font-size:13px; }
  .msgs { padding:14px; }
  .composer { padding:10px; padding-bottom:max(10px, env(safe-area-inset-bottom)); }
  .tabs { padding:9px 12px; }
}