/* ═══════════════════════════════════════════════════════════════════════════
   شکاف زمان — نسخهٔ ۷.۰ | کشوی گفت‌وگو (SPEC v7.0 §۵)
   مالکیت: web/js/talk.js + بلوک markup انتهای index.html. این فایل هیچ قاعدهٔ
   موجودی را بازنویسی نمی‌کند و فقط پیشوند `tk-`/`talk-` را می‌سازد.

   قیدهایی که این فایل زیر آن‌هاست:
     · هویت نسخهٔ ۶ «مینیاتور و تذهیب» — کاغذ، لاجورد، شنگرف، امیری برای تیتر،
       آیکون خطی (نه ایموجی)، گوشهٔ ۳px (var(--r))، و **هیچ سایه‌ای بیرون از مودال**
       (ج‌۱۶ نسخهٔ ۶). تنها استثناها: زنگ تماس و روپوش ضبط که مودال‌اند.
     · هیچ رنگ سخت‌کدی — همه از توکن‌های :root در style.css.
     · متن زیر ۱۳px = ۰ (کف .82rem) · تودهٔ پیام ≥ ۱۵px (.95rem) · کنتراست ≥ ۴٫۵:۱.
     · هیچ انیمیشن دائمی در حالت خوانده‌شدن: نقطهٔ ضبط تنها انیمیشن است و فقط
       هنگام ضبط روی صفحه می‌آید.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────── ۱) دکمهٔ گفت‌وگو در dock دکمه‌های شناور ─────────
   خانهٔ ۲۳۰px: موسیقی ۱۴ · گوینده ۶۶ · «؟» ۱۲۶ · خوانا ۱۷۸ · گفت‌وگو ۲۳۰.
   جای دکمه در حاشیهٔ رزروشدهٔ #app است (--dock-x/--dock-b) پس هرگز روی متن پنل
   نمی‌افتد، و --dock-h آن را بالای زرادخانه و بنر اپ نگه می‌دارد. */
.talk-btn {
  inset-inline-start: var(--dock-x, 10px);
  width: var(--dock-b, 44px); height: var(--dock-b, 44px);
  bottom: calc(230px + env(safe-area-inset-bottom) + var(--dock-h, 0px));
  /* .music-btn ضربان دائمی دارد؛ اینجا خاموش است تا شمارندهٔ «انیمیشن دائمی» بالا نرود */
  animation: none;
  box-shadow: none;
  display: grid; place-items: center;
}
.talk-btn .tk-btn-ico { display: grid; place-items: center; line-height: 0; }
.talk-btn .ic { width: 1.25em; height: 1.25em; }
.talk-btn[aria-expanded="true"] { background: var(--tint-lapis); border-color: var(--lapis); color: var(--lapis-dp); }

/* نشانگر پیام خوانده‌نشده — شنگرف روی کاغذ، بدون تپش */
.tk-badge {
  position: absolute; top: -4px; inset-inline-end: -4px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--vermilion); color: var(--paper-3);
  border: 1px solid var(--paper-3); border-radius: 2px;
  font-size: .82rem; font-weight: 700; line-height: 1;
  animation: none;
}

/* ───────── ۲) خودِ کشو ─────────
   روی بازی سوار می‌شود، نه صفحهٔ جدا: نه پس‌زمینه را تار می‌کند و نه صفحه را
   می‌پوشاند. ستون dock کنارش باز می‌ماند تا خودِ دکمهٔ گفت‌وگو زیر کشو گم نشود. */
.tk-drawer {
  position: fixed; z-index: 70;
  inset-inline-start: calc(var(--dock-x, 10px) + var(--dock-b, 44px) + 8px);
  inset-inline-end: 8px;
  max-width: 430px;
  /* لنگر پایین همان لنگر dock است: بالای زرادخانه و بنر اپ می‌نشیند. */
  --tk-bot: calc(10px + env(safe-area-inset-bottom) + var(--dock-h, 0px));
  bottom: var(--tk-bot);
  height: min(70vh, 560px);
  /* وقتی زرادخانه باز است --dock-h تا ~۳۹۰px بالا می‌رود؛ بی این سقف، سرصفحهٔ کشو
     از بالای صفحه بیرون می‌زد (سنجیده شد: top = -1px روی ۴۱۲×۹۱۵). ۷۶px برای
     نوار بالای بازی کنار گذاشته می‌شود تا کد اتاق و شاخص‌ها هم دیده بمانند. */
  max-height: calc(100vh - var(--tk-bot) - 76px);
  min-height: 200px;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper-3);
  border: 1.5px solid var(--rule);
  border-radius: var(--r);
  box-shadow: none;               /* ج‌۱۶ — کاغذ سایه نمی‌اندازد */
  color: var(--ink);
}
/* قاب دوخطی — همان امضای پنل‌های نسخهٔ ۶ */
.tk-drawer::before {
  content: ''; position: absolute; inset: 3px; pointer-events: none; z-index: 2;
  border: 1px solid var(--rule-soft); border-radius: 1px;
}
.tk-drawer.hidden { display: none; }

.tk-head {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--rule-soft);
  background: var(--paper-2);
}
.tk-title {
  font-family: 'Amiri', 'Vazirmatn', serif;
  font-size: 1.15rem; font-weight: 700; color: var(--vermilion-tx, #8a2318);
  display: inline-flex; align-items: center; gap: 6px;
}
.tk-title .ic { color: var(--vermilion); }
.tk-x {
  margin-inline-start: auto; flex: none;
  width: 32px; height: 32px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--rule-soft); border-radius: 2px;
  color: var(--ink-2); cursor: pointer;
}
.tk-x:hover { border-color: var(--rule); color: var(--vermilion); }

/* ── تب‌های گروه · خصوصی · تماس ── */
.tk-tabs { flex: none; display: flex; gap: 0; border-bottom: 1px solid var(--rule-soft); background: var(--paper-2); }
.tk-tab {
  flex: 1; padding: 9px 4px; cursor: pointer;
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  font-family: inherit; font-size: .9rem; font-weight: 500; color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
.tk-tab:hover { color: var(--ink); }
.tk-tab.on { color: var(--lapis-dp); border-bottom-color: var(--lapis); background: var(--paper-3); font-weight: 700; }
.tk-tab .tk-n {
  min-width: 18px; padding: 0 4px; border-radius: 2px;
  background: var(--vermilion); color: var(--paper-3);
  font-size: .82rem; font-weight: 700; line-height: 1.5;
}

.tk-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px; }
/* ۱۲px تا متن از قاب دوخطی (inset 3px) فاصله بگیرد و به لبه نچسبد */
.tk-foot { flex: none; border-top: 1px solid var(--rule-soft); padding: 9px 12px 11px; background: var(--paper-2); }
.tk-foot:empty { display: none; }

/* ───────── ۳) پیام‌ها ───────── */
.tk-msg {
  border: 1px solid var(--rule-soft); border-radius: var(--r);
  background: var(--paper); padding: 8px 10px; margin-bottom: 8px;
  max-width: 92%; box-shadow: none;
}
.tk-msg.mine { background: var(--tint-lapis); border-color: var(--lapis); margin-inline-start: auto; }
.tk-msg-top { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.tk-msg-who { font-size: .82rem; font-weight: 700; color: var(--lapis-dp); }
.tk-msg.mine .tk-msg-who { color: var(--lapis-dp); }
.tk-msg-av { font-size: .95rem; line-height: 1; }
.tk-msg-at { margin-inline-start: auto; font-size: .82rem; color: var(--ink-dim); }
/* تودهٔ متن — کف ۱۵px، و شکستن واژهٔ بلند تا از کارت بیرون نزند */
.tk-msg-text { font-size: .95rem; line-height: 1.9; color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; }

/* پیام صوتی */
.tk-clip { display: flex; align-items: center; gap: 8px; }
.tk-clip-play {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--paper-3); border: 1px solid var(--lapis); border-radius: 2px;
  color: var(--lapis-dp); cursor: pointer;
}
.tk-clip-play:hover { background: var(--tint-lapis); }
.tk-clip-play[disabled] { opacity: .45; cursor: not-allowed; border-color: var(--rule-soft); color: var(--ink-dim); }
.tk-clip-bar { flex: 1 1 auto; height: 3px; background: var(--rule-soft); border-radius: 0; overflow: hidden; }
.tk-clip-bar i { display: block; height: 100%; width: 0; background: var(--lapis); }
.tk-clip-sec { flex: none; font-size: .82rem; color: var(--ink-dim); }
/* م‌۱۳ — «سکوت ممنوع»: اگر قالب روی این مرورگر پخش نمی‌شود، همین‌جا نوشته می‌شود */
.tk-clip-warn {
  margin-top: 5px; font-size: .82rem; line-height: 1.8; color: var(--vermilion);
  border-inline-start: 2px solid var(--vermilion); padding-inline-start: 7px;
}

.tk-empty { color: var(--ink-dim); font-size: .95rem; line-height: 2; text-align: center; padding: 22px 10px; }
.tk-note {
  font-size: .82rem; line-height: 1.9; color: var(--ink-2);
  background: var(--tint-gold); border: 1px solid var(--rule-soft); border-radius: var(--r);
  padding: 7px 9px; margin-bottom: 9px;
}
.tk-note.warn { background: var(--tint-red); border-color: var(--vermilion); color: var(--ink); }

/* ───────── ۴) نویسنده (متن + ضبط) ───────── */
.tk-compose { display: flex; align-items: flex-end; gap: 6px; }
.tk-input {
  flex: 1 1 auto; min-width: 0; resize: none;
  padding: 9px 11px; border-radius: var(--r);
  background: var(--paper-3); border: 1px solid var(--rule-soft); color: var(--ink);
  font-family: inherit; font-size: .95rem; line-height: 1.9; max-height: 92px;
}
.tk-input:focus { border-color: var(--lapis); outline: 2px solid rgba(30, 95, 140, .3); outline-offset: -1px; }
.tk-input[disabled] { opacity: .55; }
.tk-send, .tk-mic {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--r); cursor: pointer; font-family: inherit;
  background: var(--lapis); border: 1px solid var(--lapis-dp); color: var(--paper-3);
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.tk-send:hover, .tk-mic:hover { background: var(--lapis-dp); }
.tk-mic { background: var(--paper-3); border-color: var(--rule); color: var(--vermilion); }
.tk-mic:hover { background: var(--tint-gold); }
.tk-mic.on { background: var(--vermilion); border-color: var(--vermilion); color: var(--paper-3); }
.tk-send[disabled], .tk-mic[disabled] {
  opacity: .45; cursor: not-allowed;
  background: var(--paper-3); border-color: var(--rule-soft); color: var(--ink-dim);
}
/* نویسنده روی --paper-2 می‌نشیند که تیره‌ترین سطح پالت است: --ink-dim آنجا ۴٫۴۰
   می‌دهد و سنجهٔ ۴٫۵ را رد می‌کند (اندازه‌گیری شد). پس یک پله تیره‌تر: --ink-2. */
.tk-hint { font-size: .82rem; line-height: 1.9; color: var(--ink-2); margin-top: 5px; }
.tk-hint.bad { color: var(--vermilion); }

/* ───────── ۵) فهرست بازیکنان (خصوصی) ───────── */
.tk-peer {
  width: 100%; display: flex; align-items: center; gap: 9px; text-align: start;
  padding: 9px 10px; margin-bottom: 7px; cursor: pointer;
  background: var(--paper); border: 1px solid var(--rule-soft); border-radius: var(--r);
  font-family: inherit; color: var(--ink); box-shadow: none;
}
.tk-peer:hover { border-color: var(--lapis); background: var(--tint-lapis); }
.tk-peer-av { font-size: 1.25rem; line-height: 1; flex: none; }
.tk-peer-name { font-size: .95rem; font-weight: 700; }
.tk-peer-sub { font-size: .82rem; color: var(--ink-dim); }
.tk-peer-n {
  margin-inline-start: auto; min-width: 20px; padding: 1px 5px; border-radius: 2px;
  background: var(--vermilion); color: var(--paper-3); font-size: .82rem; font-weight: 700;
}
.tk-peer.off { opacity: .62; }
.tk-back {
  display: inline-flex; align-items: center; gap: 5px; margin-bottom: 9px;
  padding: 4px 9px; cursor: pointer;
  background: transparent; border: 1px solid var(--rule-soft); border-radius: 2px;
  font-family: inherit; font-size: .82rem; color: var(--ink-2);
}
.tk-back:hover { border-color: var(--rule); color: var(--vermilion); }
.tk-thread-head {
  font-size: .95rem; font-weight: 700; color: var(--lapis-dp); margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
/* م‌۱۴ — زنگ تماس خصوصی از دل همان رشتهٔ گفت‌وگو زده می‌شود */
.tk-ringbtn {
  margin-inline-start: auto; flex: none; padding: 4px 10px; cursor: pointer;
  background: var(--paper-3); border: 1px solid var(--lapis); border-radius: 2px;
  font-family: inherit; font-size: .82rem; font-weight: 700; color: var(--lapis-dp);
}
.tk-ringbtn:hover { background: var(--tint-lapis); }

/* ───────── ۶) تماس زنده ───────── */
.tk-call-peer {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin-bottom: 7px;
  background: var(--paper); border: 1px solid var(--rule-soft); border-radius: var(--r);
  font-size: .95rem;
}
.tk-call-peer.talking { border-color: var(--ok); background: var(--tint-green); }
.tk-vu { flex: none; width: 26px; height: 8px; display: flex; gap: 2px; align-items: flex-end; }
.tk-vu i { flex: 1; height: 2px; background: var(--rule-soft); }
.tk-call-peer.talking .tk-vu i { background: var(--ok); }
.tk-call-peer.talking .tk-vu i:nth-child(2) { height: 8px; }
.tk-call-peer.talking .tk-vu i:nth-child(1),
.tk-call-peer.talking .tk-vu i:nth-child(3) { height: 5px; }
.tk-call-tag { margin-inline-start: auto; font-size: .82rem; color: var(--ink-dim); }
.tk-call-row { display: flex; gap: 7px; }
.tk-call-row .btn { flex: 1; padding: 9px 12px; font-size: .95rem; border-radius: var(--r); }

/* ───────── ۷) روپوش ضبط (مودال — سایه مجاز) ───────── */
.tk-rec {
  position: fixed; inset: 0; z-index: 96;
  display: grid; place-items: center; padding: 18px;
  background: rgba(42, 33, 24, .34);
}
.tk-rec.hidden { display: none; }
.tk-rec-card {
  display: flex; align-items: center; gap: 10px;
  width: min(340px, 92vw); padding: 14px 16px;
  background: var(--paper-3); border: 1.5px solid var(--vermilion); border-radius: var(--r);
  box-shadow: var(--shadow-float);
}
.tk-rec-dot {
  flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--vermilion);
  animation: tk-rec-beat 1.1s ease-in-out infinite;
}
@keyframes tk-rec-beat { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }
.tk-rec-time { font-size: 1.05rem; font-weight: 700; color: var(--vermilion); font-variant-numeric: tabular-nums; }
.tk-rec-hint { font-size: .82rem; line-height: 1.8; color: var(--ink-2); }
.tk-rec-cancel {
  position: relative; margin-inline-start: auto; flex: none; padding: 6px 12px; cursor: pointer;
  background: var(--paper); border: 1px solid var(--vermilion); border-radius: var(--r);
  font-family: inherit; font-size: .95rem; color: var(--vermilion);
}
.tk-rec-cancel.armed { background: var(--vermilion); color: var(--paper-3); }

/* ───────── ۸) زنگ تماس خصوصی (م‌۱۴ — مودال) ───────── */
.tk-ring {
  position: fixed; inset: 0; z-index: 97;
  display: grid; place-items: center; padding: 18px;
  background: rgba(42, 33, 24, .42);
}
.tk-ring.hidden { display: none; }
.tk-ring-card {
  width: min(360px, 92vw); padding: 20px 18px 16px;
  background: var(--paper-3); border: 1.5px solid var(--rule); border-radius: var(--r);
  box-shadow: var(--shadow-float);
}
/* قاب دوخطی — همان امضای مودال‌های نسخهٔ ۶ */
.tk-ring-card, .tk-rec-card { position: relative; }
.tk-ring-card::before, .tk-rec-card::before {
  content: ''; position: absolute; inset: 3px; pointer-events: none;
  border: 1px solid var(--rule-soft); border-radius: 1px;
}
.tk-ring-text { font-size: 1.05rem; line-height: 2; color: var(--ink); margin-bottom: 14px; position: relative; }
.tk-ring-nav { display: flex; gap: 9px; position: relative; }
.tk-ring-nav .btn { flex: 1; padding: 10px 14px; font-size: .95rem; border-radius: var(--r); }

/* ───────── ۹) صفحه‌های باریک ───────── */
@media (max-width: 520px) {
  .tk-drawer { max-width: none; height: min(72vh, 520px); }
}
/* دستگاه کوتاه (کیبورد باز روی موبایل): نوار بالا کوچک‌تر گرفته می‌شود تا نویسنده
   جا بماند؛ سقفِ ارتفاع همچنان از --tk-bot حساب می‌شود. */
@media (max-height: 560px) {
  .tk-drawer { max-height: calc(100vh - var(--tk-bot) - 12px); min-height: 160px; }
}

/* ───────── ۱۰) حالت خوانا و کم‌حرکت ───────── */
body.readable .tk-msg,
body.readable .tk-peer,
body.readable .tk-call-peer { background: var(--paper-3); }
body.readable .tk-msg.mine { background: var(--tint-lapis); }
body.readable .tk-msg-text,
body.readable .tk-input,
body.readable .tk-empty { font-size: 1.02rem; }
body.reduce-motion .tk-rec-dot { animation: none; }
@media (prefers-reduced-motion: reduce) { .tk-rec-dot { animation: none; } }