/* ═══════════════════════════════════════════════════════════════════════
   sabz-assistant.css — ظاهر ویجت

   قواعد غیرقابل‌مذاکره (بند ۱۰ طرح و استاندارد PWA):
     · فقط logical properties — هیچ left/right فیزیکی
     · 100dvh نه 100vh، به‌علاوه‌ی env(safe-area-inset-*)
     · هیچ ورودی زیر 16px (وگرنه iOS هنگام فوکوس zoom می‌کند)
     · هدف لمسی حداقل 44px
     · بدون اسکرول افقی در عرض ۳۶۰px
     · لبه‌های صفحه هرگز touch handler نمی‌گیرند

   رنگ‌ها از متغیر می‌آیند تا اپ میزبان بتواند بدون دست‌زدن به این فایل،
   پوسته‌اش را تحمیل کند.
   ═══════════════════════════════════════════════════════════════════════ */

.sabz-a {
  --sa-bg: #ffffff;
  --sa-fg: #16261c;
  --sa-muted: #5c6b62;
  --sa-line: #dfe6e1;
  --sa-accent: #1f7a4d;
  --sa-accent-fg: #ffffff;
  --sa-bubble-u: #eef5f0;
  --sa-bubble-a: #f7f9f8;
  --sa-warn: #a15c00;
  --sa-danger: #a12525;
  --sa-radius: 14px;
  --sa-shadow: 0 8px 30px rgba(10, 30, 20, .18);
  --sa-safe-b: env(safe-area-inset-bottom, 0px);
  --sa-safe-t: env(safe-area-inset-top, 0px);
  --sa-kb: var(--sabz-keyboard, 0px);
}

@media (prefers-color-scheme: dark) {
  .sabz-a {
    --sa-bg: #121a15; --sa-fg: #e7efe9; --sa-muted: #9db0a4; --sa-line: #26332b;
    --sa-bubble-u: #1b2b21; --sa-bubble-a: #171f1a; --sa-shadow: 0 8px 30px rgba(0,0,0,.5);
  }
}

/* ── دکمه‌ی شناور ─────────────────────────────────────────────────────── */
.sa-fab {
  position: fixed;
  inset-inline-end: 16px;
  /* بالای نوار پایین اپ می‌نشیند و از ناحیه‌ی امن فاصله می‌گیرد. */
  inset-block-end: calc(var(--sa-safe-b) + 16px);
  z-index: 1100;
  display: inline-flex; align-items: center; gap: 8px;
  min-block-size: 48px; padding-inline: 16px;
  border: 0; border-radius: 999px;
  background: var(--sa-accent); color: var(--sa-accent-fg);
  font: inherit; font-size: 15px; font-weight: 600;
  box-shadow: var(--sa-shadow); cursor: pointer;
}
.sa-fab svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sa-fab[hidden] { display: none; }
/* با کیبورد باز روی صفحه‌ی کوچک، دکمه جای ورودی را می‌گیرد. */
html.sabz-keyboard-open .sa-fab { display: none; }
@media (max-width: 380px) { .sa-fab span { display: none; } .sa-fab { padding-inline: 0; inline-size: 52px; justify-content: center; } }

/* ── پوشش و کشو ───────────────────────────────────────────────────────── */
.sa-ov {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(8, 20, 14, .55);
  display: none; align-items: stretch; justify-content: center;
}
.sa-ov.on { display: flex; }

.sa-panel {
  background: var(--sa-bg); color: var(--sa-fg);
  inline-size: 100%; max-inline-size: 720px;
  display: flex; flex-direction: column;
  /* روی گوشی از پایین می‌آید و تمام‌قد است. */
  block-size: 100dvh;
  border-start-start-radius: 0; border-start-end-radius: 0;
  font-size: 15px; line-height: 1.75;
}
@media (min-width: 900px) {
  .sa-ov { justify-content: flex-start; }
  .sa-panel { max-inline-size: 460px; box-shadow: var(--sa-shadow); }
}

.sa-hd {
  display: flex; align-items: center; gap: 8px;
  padding: calc(var(--sa-safe-t) + 10px) 14px 10px;
  border-block-end: 1px solid var(--sa-line);
}
.sa-hd h2 { margin: 0; font-size: 16px; font-weight: 700; flex: 1; }
.sa-x {
  /* در RTL این سمت راستِ صفحه است — قاعده‌ی بند ۵٫۵ استاندارد. */
  order: -1;
  min-inline-size: 44px; min-block-size: 44px;
  border: 0; background: transparent; color: var(--sa-muted);
  font-size: 20px; cursor: pointer; border-radius: 10px;
}
.sa-x:hover { background: var(--sa-bubble-a); }

.sa-tabs { display: flex; gap: 4px; padding: 8px 10px 0; border-block-end: 1px solid var(--sa-line); }
.sa-tabs button {
  min-block-size: 44px; padding-inline: 14px;
  border: 0; border-block-end: 2px solid transparent; background: transparent;
  color: var(--sa-muted); font: inherit; font-size: 14px; cursor: pointer;
}
.sa-tabs button[aria-selected="true"] { color: var(--sa-accent); border-block-end-color: var(--sa-accent); font-weight: 700; }
.sa-tabs button[disabled] { opacity: .45; cursor: default; }

.sa-body { flex: 1; display: flex; flex-direction: column; min-block-size: 0; }
.sa-log { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px; overscroll-behavior: contain; }

/* ── پیام‌ها ──────────────────────────────────────────────────────────── */
.sa-m { margin-block-end: 14px; display: flex; }
.sa-m.u { justify-content: flex-start; }
.sa-bub { max-inline-size: 92%; padding: 10px 13px; border-radius: var(--sa-radius); }
.sa-m.u .sa-bub { background: var(--sa-bubble-u); }
.sa-m.a .sa-bub { background: var(--sa-bubble-a); inline-size: 100%; max-inline-size: 100%; }
.sa-bub > :first-child { margin-block-start: 0; }
.sa-bub > :last-child { margin-block-end: 0; }
.sa-bub p { margin-block: 0 .7em; }
.sa-bub ul, .sa-bub ol { margin-block: 0 .7em; padding-inline-start: 1.4em; }
.sa-bub h4 { margin-block: .3em .4em; font-size: 15px; }
.sa-bub code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 5px; font-size: .92em; }
.sa-empty { color: var(--sa-muted); padding: 24px 8px; text-align: center; }

/* نشان بالای پاسخ: برچسب و تازگی */
.sa-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: 8px; font-size: 12px; }
.sa-chip { padding: 2px 9px; border-radius: 999px; background: var(--sa-bubble-u); color: var(--sa-muted); }
.sa-chip.live { background: #e4f3ea; color: #1f6b45; }
.sa-chip.warn { background: #fdf1e0; color: var(--sa-warn); }
@media (prefers-color-scheme: dark) {
  .sa-chip.live { background: #14301f; color: #7fd0a4; }
  .sa-chip.warn { background: #33260f; color: #e0ae5e; }
}

/* تراشه‌ی استناد — هدف لمسی واقعی، نه یک عدد کوچک */
.sa-cite {
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: 32px; min-block-size: 32px; margin-inline: 2px;
  border: 1px solid var(--sa-line); border-radius: 8px;
  background: var(--sa-bg); color: var(--sa-accent);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  vertical-align: middle;
}
.sa-cite:hover { background: var(--sa-bubble-u); }
.sa-cite[disabled] { color: var(--sa-muted); cursor: default; text-decoration: line-through; }

.sa-srcs { margin-block-start: 10px; border-block-start: 1px dashed var(--sa-line); padding-block-start: 8px; }
.sa-srcs summary { cursor: pointer; color: var(--sa-muted); font-size: 13px; min-block-size: 32px; }
.sa-srcs ol { margin: 6px 0 0; padding-inline-start: 1.3em; font-size: 13px; color: var(--sa-muted); }
.sa-srcs li { margin-block-end: 4px; }
.sa-srcs button { border: 0; background: none; color: var(--sa-accent); font: inherit; cursor: pointer; padding: 4px 0; text-align: start; }

/* جدول: همیشه داخل ظرف اسکرول خودش */
.sa-tw { overflow-x: auto; margin-block: .5em; }
.sa-tw table { border-collapse: collapse; inline-size: 100%; font-size: 13px; }
.sa-tw th, .sa-tw td { border: 1px solid var(--sa-line); padding: 6px 8px; text-align: start; }
.sa-tw th { background: var(--sa-bubble-u); font-weight: 600; }

/* نشانگر مرحله */
.sa-wait { display: flex; align-items: center; gap: 8px; color: var(--sa-muted); font-size: 14px; }
.sa-dots i { display: inline-block; inline-size: 6px; block-size: 6px; margin-inline-end: 3px; border-radius: 50%; background: currentColor; animation: sa-b 1.2s infinite; }
.sa-dots i:nth-child(2) { animation-delay: .2s; }
.sa-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes sa-b { 0%, 60%, 100% { opacity: .25 } 30% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .sa-dots i { animation: none; opacity: .6 } }

/* ── کادر پیام ────────────────────────────────────────────────────────── */
.sa-foot {
  border-block-start: 1px solid var(--sa-line);
  padding: 10px 12px;
  /* ⚠️ کیبورد نرم‌افزاری: بدون این، دکمه‌ی ارسال روی iOS پشت کیبورد گم می‌شود. */
  padding-block-end: calc(var(--sa-safe-b) + var(--sa-kb) + 10px);
}
.sa-sugg { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: 8px; }
.sa-sugg button {
  min-block-size: 36px; padding: 6px 11px;
  border: 1px solid var(--sa-line); border-radius: 999px;
  background: var(--sa-bg); color: var(--sa-fg); font: inherit; font-size: 13px; cursor: pointer;
}
.sa-in { display: flex; gap: 8px; align-items: flex-end; }
.sa-in textarea {
  flex: 1; resize: none; max-block-size: 140px; min-block-size: 44px;
  padding: 11px 12px; border: 1px solid var(--sa-line); border-radius: 12px;
  background: var(--sa-bg); color: var(--sa-fg);
  font: inherit;
  font-size: 16px;            /* ⚠️ زیر ۱۶ نشود، وگرنه iOS zoom می‌کند */
  line-height: 1.6;
}
.sa-send {
  min-inline-size: 44px; min-block-size: 44px; padding-inline: 16px;
  border: 0; border-radius: 12px; background: var(--sa-accent); color: var(--sa-accent-fg);
  font: inherit; font-weight: 600; cursor: pointer;
}
.sa-send[disabled] { opacity: .5; cursor: default; }
.sa-note { margin: 8px 0 0; font-size: 12px; color: var(--sa-muted); line-height: 1.6; }
.sa-err { color: var(--sa-danger); font-size: 13px; margin-block-start: 6px; }

/* ── نوار کوچک «بازگشت به گفتگو» ───────────────────────────────────────
   عمداً هیچ ورودی history نمی‌سازد: فقط یک عنصر DOM است که با ژست بازگشت
   کاری ندارد. */
.sa-mini {
  position: fixed; inset-inline: 12px; z-index: 1090;
  inset-block-end: calc(var(--sa-safe-b) + 12px);
  display: flex; align-items: center; gap: 10px;
  min-block-size: 56px; padding: 8px 14px;
  background: var(--sa-bg); color: var(--sa-fg);
  border: 1px solid var(--sa-line); border-radius: 14px; box-shadow: var(--sa-shadow);
  font-size: 14px;
}
.sa-mini span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-mini button { min-block-size: 44px; padding-inline: 14px; border: 0; border-radius: 10px; background: var(--sa-accent); color: var(--sa-accent-fg); font: inherit; font-weight: 600; cursor: pointer; }

/* هاله‌ی عنصر مقصد پس از لمس استناد */
.sa-hl { animation: sa-hl 2s ease-out 1; border-radius: 8px; }
@keyframes sa-hl {
  0%, 70% { box-shadow: 0 0 0 3px rgba(31, 122, 77, .55); }
  100% { box-shadow: 0 0 0 3px rgba(31, 122, 77, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .sa-hl { animation: none; box-shadow: 0 0 0 3px rgba(31, 122, 77, .55); }
}

.sa-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media print { .sa-fab, .sa-ov, .sa-mini { display: none !important; } }

/* ═══════════════════════════════════════════════════════════════════════
   زبانه‌ی دستیار: کارت تأیید، نوار بازگرداندن، تغییرات اخیر
   ═══════════════════════════════════════════════════════════════════════ */

.sa-prop {
  border: 1px solid var(--sa-accent); border-radius: var(--sa-radius);
  padding: 12px; margin-block-end: 10px; background: var(--sa-bg);
}
.sa-prop.sa-warn2 { border-color: var(--sa-warn); }
.sa-ph { font-weight: 700; font-size: 14px; margin-block-end: 8px; color: var(--sa-accent); }
.sa-prop.sa-warn2 .sa-ph { color: var(--sa-warn); }
.sa-pit { border-block-start: 1px solid var(--sa-line); padding-block-start: 10px; margin-block-start: 10px; }
.sa-pit:first-of-type { border-block-start: 0; padding-block-start: 0; margin-block-start: 0; }
.sa-pt { font-weight: 600; font-size: 14px; }
.sa-pt2 { font-size: 12px; color: var(--sa-muted); margin-block: 8px 2px; }
.sa-pd { margin: 4px 0 8px; font-size: 13px; color: var(--sa-muted); }
.sa-pn { margin: 8px 0 0; font-size: 12px; color: var(--sa-muted); }
.sa-n { font-variant-numeric: tabular-nums; }
.sa-hi { font-weight: 700; color: var(--sa-accent); }
.sa-eff { margin-block-start: 6px; }

.sa-btns { display: flex; gap: 8px; justify-content: flex-end; margin-block-start: 12px; }
.sa-btn {
  min-block-size: 44px; padding-inline: 16px;
  border: 1px solid var(--sa-line); border-radius: 10px;
  background: var(--sa-bg); color: var(--sa-fg);
  font: inherit; font-weight: 600; cursor: pointer;
}
.sa-btn.sa-p { background: var(--sa-accent); color: var(--sa-accent-fg); border-color: var(--sa-accent); }
.sa-btn[disabled] { opacity: .5; cursor: default; }
.sa-btn.sa-sm { min-block-size: 36px; padding-inline: 12px; font-size: 13px; font-weight: 500; }

/* نوار بازگرداندن — شصت ثانیه، بعد از آن «تغییرات اخیر» جایش را می‌گیرد */
.sa-undo {
  position: fixed; inset-inline: 12px; z-index: 1300;
  inset-block-end: calc(var(--sa-safe-b) + 12px);
  display: flex; align-items: center; gap: 10px;
  min-block-size: 56px; padding: 8px 14px;
  background: var(--sa-fg); color: var(--sa-bg);
  border-radius: 14px; box-shadow: var(--sa-shadow); font-size: 14px;
}
.sa-undo span { flex: 1; }
.sa-undo button {
  min-block-size: 44px; padding-inline: 14px; border: 0; border-radius: 10px;
  background: var(--sa-accent); color: var(--sa-accent-fg); font: inherit; font-weight: 600; cursor: pointer;
}
.sa-undo .sa-x2, .sa-mini .sa-x2 { background: transparent; color: inherit; opacity: .7; min-inline-size: 44px; padding-inline: 0; }

/* تغییرات اخیر */
.sa-recent { margin-block-end: 8px; }
.sa-recent summary { cursor: pointer; min-block-size: 36px; font-size: 13px; color: var(--sa-muted); }
.sa-jl { max-block-size: 240px; overflow-y: auto; overscroll-behavior: contain; }
.sa-je {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 0; border-block-end: 1px solid var(--sa-line); font-size: 13px;
}
.sa-je.sa-done { opacity: .55; }
.sa-jt { flex: 1; min-inline-size: 140px; }
.sa-jm { font-size: 12px; color: var(--sa-muted); font-variant-numeric: tabular-nums; }

/* toast جایگزین وقتی اپ خودش toast ندارد */
.sa-toast {
  position: fixed; inset-inline: 16px; inset-block-end: calc(var(--sa-safe-b) + 76px);
  z-index: 1400; padding: 12px 16px; border-radius: 12px;
  background: var(--sa-fg); color: var(--sa-bg); font-size: 14px; box-shadow: var(--sa-shadow);
}

/* ═══════════════════════════════════════════════════════════════════════
   راهنمای درون‌متنی (فاز ۲)
   منطق چیدمان همان بقیه: فقط logical properties، هدف لمس دست‌کم ۴۴px،
   و هیچ اندازه‌ی متن ورودی زیر ۱۶px تا iOS صفحه را زوم نکند.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── دکمه‌ی i کنار عنوان‌ها ── */
.gi, .sa-gi {
  inline-size: 22px; block-size: 22px; margin-inline-start: 6px; padding: 0;
  border: 1px solid var(--sa-line); border-radius: 50%;
  background: transparent; color: var(--sa-muted);
  font: 600 12px/1 inherit; cursor: pointer; vertical-align: middle;
}
.gi:hover, .sa-gi:hover { color: var(--sa-accent); border-color: var(--sa-accent); }
/* ⚠️ خودِ دکمه ۲۲px است تا کنار عنوان بدقواره نشود، ولی ناحیه‌ی لمس با
   شبه‌عنصر به ۴۴px می‌رسد — بدون اینکه چیدمان را هل بدهد. */
.gi { position: relative; }
.gi::after {
  content: ''; position: absolute; inset-block: -11px; inset-inline: -11px;
}

/* ── کارت ── */
.sa-g-wrap {
  position: fixed; inset: 0; z-index: 1500;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; padding-block-end: calc(16px + var(--sa-safe-b));
  background: rgba(10, 25, 18, .45);
}
.sa-g-card {
  inline-size: min(560px, 100%); max-block-size: min(80dvh, 640px); overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px; border-radius: var(--sa-radius);
  background: var(--sa-bg); color: var(--sa-fg); box-shadow: var(--sa-shadow);
}
.sa-g-head { display: flex; align-items: flex-start; gap: 8px; }
.sa-g-head h3 { flex: 1; margin: 0 0 6px; font-size: 16px; }
/* دکمه‌ی بازگشت فقط وقتی هست که از راه «مرتبط» به این مدخل رسیده باشیم.
   در RTL پیکان «→» یعنی عقب، پس چرخشی لازم نیست. */
.sa-g-back {
  min-inline-size: 44px; min-block-size: 44px; margin-block-start: -10px; margin-inline-start: -8px;
  border: 0; background: transparent; color: var(--sa-accent); font-size: 20px; cursor: pointer;
}
.sa-g-x {
  min-inline-size: 44px; min-block-size: 44px; margin-block-start: -10px; margin-inline-end: -8px;
  border: 0; background: transparent; color: var(--sa-muted); font-size: 22px; cursor: pointer;
}
.sa-g-s { margin: 0 0 10px; font-weight: 600; }
.sa-g-d { margin: 0 0 10px; color: var(--sa-fg); line-height: 1.85; }
.sa-g-f, .sa-g-c {
  margin-block-end: 10px; padding: 10px 12px; border-radius: 10px;
  background: var(--sa-bubble-a); font-size: 13px; line-height: 1.9;
  overflow-x: auto;                     /* فرمول بلند، خودش اسکرول شود نه صفحه */
}
.sa-g-c { background: var(--sa-bubble-u); }
/* ── مبنا و ردیابی (لایه‌ی سوم کارت) ── */
.sa-g-b { margin-block-end: 10px; border: 1px solid var(--sa-line); border-radius: 10px; }
.sa-g-b > summary {
  min-block-size: 44px; display: flex; align-items: center; padding: 0 12px;
  font-size: 13px; font-weight: 600; color: var(--sa-accent); cursor: pointer;
}
/* جدول درون قاب `sa-tw` می‌نشیند و خودش اسکرول می‌شود، نه صفحه.
   ستون «سرچشمه» جمله است و باید بشکند؛ ستون «مقدار» عدد است و نباید. */
.sa-g-b .sa-tw { margin: 0; border-block-start: 1px solid var(--sa-line); }
.sa-g-b table { font-size: 12px; }
/* ⚠️ `white-space` را صریح بنویس. اپ میزبان ممکن است قاعده‌ی سراسری
   `td { white-space: nowrap }` داشته باشد (اپ البرز دارد) و چون بسته
   این خاصیت را تعیین نکرده بود، جمله‌ی «سرچشمه» نمی‌شکست و بریده می‌شد. */
.sa-g-b th, .sa-g-b td {
  border: 0; border-block-end: 1px solid var(--sa-line); vertical-align: top;
  line-height: 1.75; white-space: normal;
}
.sa-g-b th { background: transparent; color: var(--sa-muted); }
.sa-g-b td:nth-child(3) { min-inline-size: 15em; }
.sa-g-bv { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* روی گوشی، جدول سه‌ستونی به بلوک تبدیل می‌شود.
   چرا: ستون «سرچشمه» جمله است و در عرض کم بیرون می‌افتد — یعنی همان
   ستونی که کل این لایه برایش ساخته شده، پشت اسکرول افقی پنهان می‌شد. */
@media (max-width: 560px) {
  .sa-g-b thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .sa-g-b .sa-tw { overflow-x: visible; }
  /* ⚠️ خودِ `table` و `tbody` هم باید بلوک شوند. با چیدمان جدولی، مرورگر
     عرض کمینه را از بلندترین سلول می‌گیرد و جمله‌ی «سرچشمه» به‌جای شکستن
     از لبه بیرون می‌زند و بریده می‌شود — یعنی همان ستونی که این لایه
     برایش ساخته شده، ناخوانا می‌ماند. */
  .sa-g-b table, .sa-g-b tbody { display: block; inline-size: 100%; }
  .sa-g-b tr { display: block; padding: 8px 0; border-block-end: 1px solid var(--sa-line); }
  .sa-g-b td {
    display: block; border: 0; padding: 0 12px; min-inline-size: 0 !important;
    overflow-wrap: anywhere;
  }
  .sa-g-b td:nth-child(1) { font-weight: 600; }
  /* روی گوشی حتی «مقدار» هم باید بشکند؛ جای اسکرول افقی نیست. */
  .sa-g-b td:nth-child(2) { color: var(--sa-accent); font-size: 13px; white-space: normal; }
  .sa-g-b td:nth-child(3) { color: var(--sa-muted); font-size: 11.5px; margin-block-start: 2px; }
}
.sa-g-n {
  margin: 0; padding-inline-start: 10px; border-inline-start: 3px solid var(--sa-warn);
  color: var(--sa-muted); font-size: 13px;
}
.sa-g-origin { margin: 10px 0 0; font-size: 12px; color: var(--sa-muted); }
.sa-g-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-block-start: 14px; padding-block-start: 12px; border-block-start: 1px solid var(--sa-line);
}
.sa-g-foot button {
  min-block-size: 44px; padding-inline: 14px; border: 1px solid var(--sa-line); border-radius: 10px;
  background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.sa-g-do { border-color: var(--sa-accent) !important; color: var(--sa-accent) !important; }
.sa-g-rel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--sa-muted); }
.sa-g-jump { min-block-size: 36px !important; font-size: 12px !important; }

/* ── زبانه ── */
.sa-g-panel { display: flex; flex-direction: column; gap: 10px; }
.sa-g-page h3 { margin: 0 0 4px; font-size: 15px; }
.sa-g-page p { margin: 0; color: var(--sa-muted); font-size: 13px; line-height: 1.8; }
.sa-g-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.sa-g-tools button {
  min-block-size: 44px; padding-inline: 14px; border: 1px solid var(--sa-line); border-radius: 10px;
  background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.sa-g-tools button[aria-pressed="true"] {
  background: var(--sa-accent); color: var(--sa-accent-fg); border-color: var(--sa-accent);
}
.sa-g-search {
  inline-size: 100%; min-block-size: 44px; padding: 8px 12px;
  border: 1px solid var(--sa-line); border-radius: 10px;
  background: var(--sa-bg); color: inherit;
  font: inherit; font-size: 16px;       /* زیر ۱۶px، iOS صفحه را زوم می‌کند */
}
.sa-g-list { margin: 0; padding: 0; list-style: none; }
.sa-g-list li { border-block-end: 1px solid var(--sa-line); }
.sa-g-list button {
  inline-size: 100%; min-block-size: 44px; padding: 10px 0;
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: start;
  border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.sa-g-t { font-weight: 600; }
.sa-g-sub { font-size: 12px; color: var(--sa-muted); }

/* ── حالت راهنما ──
   ⚠️ لایه pointer-events نمی‌گیرد، وگرنه اسکرول صفحه می‌میرد و کاربر روی
   گوشی گیر می‌افتد و تنها راه خروجش بستن برنامه است. */
.sa-g-mode {
  position: fixed; inset: 0; z-index: 1200; pointer-events: none;
  background: rgba(10, 25, 18, .38);
}
.sa-g-target {
  position: relative; z-index: 1250;
  outline: 2px solid var(--sa-accent); outline-offset: 3px; border-radius: 6px;
  background: var(--sa-bg);
  cursor: help;
}
.sa-g-pulse { animation: sa-g-pulse 2.2s ease-out 1; }
@keyframes sa-g-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(31, 122, 77, 0); }
  15%      { box-shadow: 0 0 0 6px rgba(31, 122, 77, .35); }
  60%      { box-shadow: 0 0 0 3px rgba(31, 122, 77, .18); }
}
@media (prefers-reduced-motion: reduce) {
  .sa-g-pulse { animation: none; outline: 2px solid var(--sa-accent); outline-offset: 3px; }
}

/* فقط برای صفحه‌خوان */
.sa-sr {
  position: absolute; inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; overflow: hidden; white-space: nowrap;
  clip-path: inset(50%); border: 0;
}

/* ظرف زبانه‌ی سفارشی (راهنما): برخلاف چت، خودش اسکرول می‌شود و کادر ورودی
   ندارد، پس تمام ارتفاع بدنه را می‌گیرد. */
.sa-custom {
  flex: 1; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 16px calc(16px + var(--sa-safe-b));
}

/* ═══════════════════════════════════════════════════════════════════════
   پیوست (فاز ۳)
   ═══════════════════════════════════════════════════════════════════════ */

/* دکمه‌ی «+» کنار کادر پیام */
.sa-plus {
  flex: 0 0 auto; min-inline-size: 44px; min-block-size: 44px;
  border: 1px solid var(--sa-line); border-radius: 12px;
  background: transparent; color: var(--sa-muted);
  font: 400 22px/1 inherit; cursor: pointer;
}
.sa-plus:hover { color: var(--sa-accent); border-color: var(--sa-accent); }

/* منوی انتخاب نوع */
.sa-plus-menu {
  position: fixed; z-index: 1450; min-inline-size: 220px;
  padding: 6px; border-radius: 12px;
  background: var(--sa-bg); color: var(--sa-fg);
  border: 1px solid var(--sa-line); box-shadow: var(--sa-shadow);
}
.sa-plus-menu button {
  inline-size: 100%; min-block-size: 52px; padding: 8px 12px;
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: start;
  border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.sa-plus-menu button:hover { background: var(--sa-bubble-a); }
.sa-pm-t { font-weight: 600; }
.sa-pm-s { font-size: 12px; color: var(--sa-muted); }

/* نوار پیوست‌های در انتظار */
.sa-atbar { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: 8px; }
.sa-at {
  display: flex; align-items: center; gap: 6px;
  max-inline-size: 100%; padding: 6px 8px; border-radius: 10px;
  background: var(--sa-bubble-a); border: 1px solid var(--sa-line); font-size: 12px;
}
.sa-at-err { border-color: var(--sa-danger); }
.sa-at-n {
  max-inline-size: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600;
}
.sa-at-s { color: var(--sa-muted); }
.sa-at-w { color: var(--sa-warn); font-size: 14px; }
.sa-at-x {
  min-inline-size: 32px; min-block-size: 32px; margin-inline-start: 2px;
  border: 0; background: transparent; color: var(--sa-muted); font-size: 16px; cursor: pointer;
}

/* نشانگر ضبط */
.sa-rec { border-color: var(--sa-danger); }
.sa-dot {
  inline-size: 9px; block-size: 9px; border-radius: 50%;
  background: var(--sa-danger); animation: sa-blink 1.1s ease-in-out infinite;
}
@keyframes sa-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .sa-dot { animation: none; } }
.sa-stop {
  min-block-size: 32px; padding-inline: 10px; border: 0; border-radius: 8px;
  background: var(--sa-danger); color: #fff; font: inherit; font-size: 12px; cursor: pointer;
}

/* هشدار فایل مشکوک */
.sa-notice {
  margin: 8px 0; padding: 10px 12px; border-radius: 10px;
  border-inline-start: 3px solid var(--sa-warn);
  background: var(--sa-bubble-a); font-size: 13px;
}
.sa-notice b { display: block; margin-block-end: 4px; color: var(--sa-warn); }
.sa-notice p { margin: 0 0 6px; line-height: 1.8; }
.sa-nf { color: var(--sa-muted); font-size: 12px; }
.sa-notice pre {
  margin: 0; padding: 8px; border-radius: 8px; overflow-x: auto;
  background: var(--sa-bg); border: 1px solid var(--sa-line);
  font-size: 11px; white-space: pre-wrap; word-break: break-word;
  color: var(--sa-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   پشتیبانی (فاز ۴)
   ═══════════════════════════════════════════════════════════════════════ */

.sa-sup { display: flex; flex-direction: column; gap: 12px; }
.sa-sup-lead { margin: 0; color: var(--sa-muted); font-size: 13px; line-height: 1.85; }
.sa-sup-text {
  inline-size: 100%; min-block-size: 96px; padding: 10px 12px;
  border: 1px solid var(--sa-line); border-radius: 10px;
  background: var(--sa-bg); color: inherit; resize: vertical;
  font: inherit; font-size: 16px;      /* زیر ۱۶px، iOS صفحه را زوم می‌کند */
}

/* فهرست «چه چیزی فرستاده می‌شود» */
.sa-sup-ctx { border: 1px solid var(--sa-line); border-radius: 10px; padding: 8px 12px; }
.sa-sup-ctx summary { cursor: pointer; min-block-size: 36px; font-size: 13px; font-weight: 600; }
.sa-sup-ctx ul { margin: 8px 0 4px; padding: 0; list-style: none; }
.sa-sup-ctx li { border-block-end: 1px solid var(--sa-line); }
.sa-sup-ctx li:last-child { border-block-end: 0; }
.sa-sup-ctx label {
  display: flex; align-items: center; gap: 8px;
  min-block-size: 44px; cursor: pointer; font-size: 13px;
}
.sa-sup-ctx input { inline-size: 18px; block-size: 18px; flex: 0 0 auto; }
.sa-sup-cn { flex: 1; }
.sa-sup-cv { color: var(--sa-muted); font-size: 12px; }

.sa-sup-send {
  min-block-size: 48px; border: 0; border-radius: 12px;
  background: var(--sa-accent); color: var(--sa-accent-fg);
  font: inherit; font-weight: 600; cursor: pointer;
}
.sa-sup-send[disabled] { opacity: .6; cursor: default; }

.sa-sup-ans {
  padding: 12px; border-radius: 10px;
  background: var(--sa-bubble-a); border-inline-start: 3px solid var(--sa-accent);
}
.sa-sup-ans b { display: block; margin-block-end: 6px; }
.sa-sup-ans p { margin: 0 0 10px; line-height: 1.85; font-size: 13px; white-space: pre-wrap; }
.sa-sup-fb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sa-muted); }
.sa-sup-fb button {
  min-block-size: 40px; padding-inline: 14px; border: 1px solid var(--sa-line);
  border-radius: 8px; background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.sa-sup-ok {
  padding: 10px 12px; border-radius: 10px;
  background: var(--sa-bubble-u); font-size: 13px;
}
.sa-sup-ok code { font-family: inherit; font-weight: 600; }
.sa-sup-err { margin: 0; color: var(--sa-danger); font-size: 13px; }

/* گزارش‌های من */
.sa-sup-list summary { cursor: pointer; min-block-size: 36px; font-size: 13px; color: var(--sa-muted); }
.sa-sup-list ul { margin: 6px 0 0; padding: 0; list-style: none; }
.sa-sup-list li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 0; border-block-end: 1px solid var(--sa-line); font-size: 13px;
}
.sa-sup-st {
  padding: 2px 8px; border-radius: 999px; font-size: 11px;
  background: var(--sa-bubble-a); color: var(--sa-muted);
}
/* رنگ روشن پیش‌فرض؛ تیره در بلوک prefers-color-scheme پایین‌تر. */
.sa-st-done, .sa-st-answered, .sa-st-closed { background: #e7f3ec; color: #1f7a4d; }
.sa-st-rejected { background: #fbf0dd; color: #a15c00; }
@media (prefers-color-scheme: dark) {
  .sa-st-done, .sa-st-answered, .sa-st-closed { background: #14301f; color: #7fd0a4; }
  .sa-st-rejected { background: #33260f; color: #e0ae5e; }
}
.sa-sup-ti { flex: 1; min-inline-size: 140px; }
.sa-sup-nt { inline-size: 100%; color: var(--sa-muted); font-size: 12px; }

/* بنر «انجام شد» */
.sa-sup-banner {
  position: fixed; inset-inline: 16px; inset-block-end: calc(var(--sa-safe-b) + 76px);
  z-index: 1350; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--sa-bg); color: var(--sa-fg);
  border: 1px solid var(--sa-accent); box-shadow: var(--sa-shadow);
  font-size: 13px; line-height: 1.7;
}
.sa-sup-banner span { flex: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   گفتگوی صوتی (فاز ۵)
   ═══════════════════════════════════════════════════════════════════════ */

.sa-mic {
  flex: 0 0 auto; min-inline-size: 44px; min-block-size: 44px;
  border: 1px solid var(--sa-line); border-radius: 12px;
  background: transparent; font-size: 18px; line-height: 1; cursor: pointer;
}
.sa-mic:hover { border-color: var(--sa-accent); }

/* صفحه‌ی تمام‌قد */
.sa-voice {
  position: fixed; inset: 0; z-index: 1600;
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; padding: 16px;
  /* ⚠️ **ارتفاع صریح نمی‌دهیم.** `inset: 0` روی یک عنصر fixed خودش کل
     ارتفاع دید را می‌گیرد و با جمع‌شدن نوار آدرس گوشی هم درست می‌ماند —
     همان کاری که کشوی چت می‌کند و سال‌هاست جواب داده.

     `block-size: 100dvh` این‌جا بود و **صفحه را ۳۲ پیکسل کرد**: در محیطی که
     dvh صفر حساب می‌شود، اندازه‌ی صریح بر کشش inset مقدم می‌شود، ستون flex
     جمع می‌شود و گوی ۱۶۸ پیکسلی به ۳۱ پیکسل له می‌شود. اندازه‌ی صریح این‌جا
     چیزی اضافه نمی‌کرد جز همین راه شکست. */
  min-block-size: 0;
  padding-block-start: calc(16px + var(--sa-safe-t));
  padding-block-end: calc(16px + var(--sa-safe-b));
  background: var(--sa-bg); color: var(--sa-fg);
  overflow-y: auto; overscroll-behavior: contain;
}
.sa-v-top { inline-size: 100%; display: flex; justify-content: flex-start; }
.sa-v-x {
  min-inline-size: 44px; min-block-size: 44px;
  border: 0; background: transparent; color: var(--sa-muted);
  font-size: 26px; line-height: 1; cursor: pointer;
}

/* گوی */
.sa-v-orb {
  inline-size: 168px; block-size: 168px; margin-block: 12px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 2px solid var(--sa-line);
  font-size: 15px; font-weight: 600; color: var(--sa-muted);
  transition: border-color .25s, box-shadow .25s, color .25s;
}
.sa-v-listening {
  border-color: var(--sa-accent); color: var(--sa-accent);
  animation: sa-v-pulse 1.6s ease-in-out infinite;
}
.sa-v-thinking { border-color: var(--sa-warn); color: var(--sa-warn); }
.sa-v-speaking {
  border-color: var(--sa-accent); color: var(--sa-accent);
  box-shadow: 0 0 0 10px rgba(31, 122, 77, .12);
}
@keyframes sa-v-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(31, 122, 77, .18); }
  50%      { box-shadow: 0 0 0 16px rgba(31, 122, 77, .04); }
}
@media (prefers-reduced-motion: reduce) { .sa-v-listening { animation: none; } }

.sa-v-heard, .sa-v-answer {
  inline-size: min(560px, 100%); font-size: 15px; line-height: 1.9; text-align: center;
}
.sa-v-heard { color: var(--sa-muted); min-block-size: 24px; }
.sa-v-lbl { font-weight: 600; }
.sa-v-note { min-block-size: 20px; color: var(--sa-warn); font-size: 13px; text-align: center; }

/* کارت تأیید داخل صفحه‌ی صوتی */
.sa-v-prop {
  margin-block-start: 16px; padding: 14px; border-radius: 12px; text-align: start;
  background: var(--sa-bubble-a); border: 1px solid var(--sa-accent);
}
.sa-v-prop b { display: block; margin-block-end: 6px; }
.sa-v-prop p { margin: 0 0 12px; font-size: 14px; line-height: 1.85; }
.sa-v-pb { display: flex; gap: 8px; }
.sa-v-pb button {
  flex: 1; min-block-size: 48px; border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer;
}
/* ⚠️ «رد» اول می‌آید و «تأیید» هرگز فوکوس پیش‌فرض نمی‌گیرد. */
.sa-v-no { border: 1px solid var(--sa-line); background: transparent; color: inherit; }
.sa-v-yes { border: 0; background: var(--sa-accent); color: var(--sa-accent-fg); }

/* کنش‌ها */
.sa-v-actions {
  margin-block-start: auto; inline-size: min(560px, 100%);
  display: flex; flex-wrap: wrap; gap: 8px;
}
.sa-v-actions button {
  flex: 1; min-inline-size: 120px; min-block-size: 52px;
  border: 1px solid var(--sa-line); border-radius: 12px;
  background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.sa-v-ptt {
  border-color: var(--sa-accent) !important; color: var(--sa-accent) !important;
  font-weight: 600;
  touch-action: none;          /* نگه‌داشتن نباید صفحه را بکشد */
  user-select: none;
}
.sa-v-ptt:active { background: var(--sa-accent); color: var(--sa-accent-fg) !important; }