/* لسان — هوية «صدى»: وضوح مطلق، لون زمردي واحد، حواف شبه حادة، تايبوغرافي يقود.
   كل القيم من tokens.css (المولّد من design/tokens.json) — صفر hardcode هنا. */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body {
  background: var(--bg); color: var(--text); font-family: var(--font);
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  padding: var(--space-6) var(--space-4);
}
header { text-align: center; margin-bottom: var(--space-6); }
header h1 { font-size: 30px; font-weight: var(--weight-strong); letter-spacing: -0.5px;
  display: inline-flex; align-items: center; gap: var(--space-2); }
header h1 a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2); }
header h1 .wm { white-space: nowrap; }
header h1 .ac { color: var(--accent); }

/* العلامة — الأيقونة المتحرّكة (البصمة الصوتية، مطابقة للبوابة). حركة وظيفية تتوقّف مع reduce. */
.lisan-mark { flex: none; }
.lisan-mark .accent { fill: var(--accent); }
.lisan-mark.anim rect { transform-box: fill-box; transform-origin: center;
  animation: lisan-wave 1.4s ease-in-out infinite; }
.lisan-mark.anim rect:nth-of-type(2) { animation-delay: -0.18s; }
.lisan-mark.anim rect:nth-of-type(3) { animation-delay: -0.36s; }
.lisan-mark.anim rect:nth-of-type(4) { animation-delay: -0.54s; }
.lisan-mark.anim rect:nth-of-type(5) { animation-delay: -0.72s; }
@keyframes lisan-wave { 0%, 100% { transform: scaleY(0.88); } 50% { transform: scaleY(1.1); } }
@media (prefers-reduced-motion: reduce) { .lisan-mark.anim rect { animation: none; } }
header p { color: var(--muted); font-size: 13px; margin-top: var(--space-1); font-weight: var(--weight-body); }
.hdr-controls { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2); }
.uilang {
  background: var(--bg); color: var(--muted);
  border: var(--border-thin) solid var(--border); border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2); font-family: inherit; font-size: 12px;
}
.themebtn {
  display: inline-grid; place-items: center; width: 32px; height: 30px;
  padding: 0; cursor: pointer; color: var(--muted);
}
.themebtn:hover { color: var(--text); }
main { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: var(--space-4); }

.panel {
  background: var(--surface); border: var(--border-thin) solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-5);
}

.btn {
  display: block; width: 100%; text-align: center; text-decoration: none;
  background: var(--accent); color: var(--on-accent); border: none; cursor: pointer;
  border-radius: var(--radius-md); padding: var(--space-4); font-family: inherit;
  font-size: 16px; font-weight: var(--weight-medium); transition: opacity var(--motion-fast), transform var(--motion-fast);
}
.btn:hover { opacity: 0.92; }
.btn:active { transform: scale(0.985); }
.btn.danger { background: var(--bg); color: var(--danger); border: var(--border-bold) solid var(--danger); }
.btn.ghost { background: var(--bg); color: var(--text); border: var(--border-bold) solid var(--emphasis); }
.btn:disabled { opacity: 0.45; cursor: wait; }
.btn .sub { display: block; font-size: 12px; font-weight: var(--weight-body); opacity: 0.8; margin-top: var(--space-1); }

.statusbar { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; font-size: 13px; color: var(--muted); }
.dot { width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--muted); display: inline-block; margin-inline-end: var(--space-2); }
.dot.on { background: var(--live); animation: pulse var(--motion-pulse) infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }
/* سبينر «جارٍ الاتصال» — حالة تحميل (فتح جلسة الترجمة + انتظار أول صوت) */
@keyframes spin { to { transform: rotate(360deg); } }
.dot.loading { background: transparent; border: 2px solid var(--muted); border-top-color: var(--live); box-sizing: border-box; animation: spin 0.8s linear infinite; }
.lang-grid button.loading { position: relative; pointer-events: none; opacity: 0.75; }
.lang-grid button.loading::after { content: ""; position: absolute; inset-inline-end: var(--space-3); top: 50%; width: 14px; height: 14px; margin-top: -7px; border: 2px solid var(--muted); border-top-color: var(--live); border-radius: var(--radius-full); box-sizing: border-box; animation: spin 0.8s linear infinite; }
.metric b { color: var(--text); font-weight: var(--weight-strong); direction: ltr; display: inline-block; }
.error { color: var(--danger); font-size: 13px; font-weight: var(--weight-body); }

/* مربع تنبيه «صدى» — خطأ/معلومة في صندوق واضح (بدل سطر أحمر عارٍ)؛ يطابق بانر البوابة، كله توكنز.
   نبرتان: danger (خطأ) · info (حالة محايدة كقناة لا تبثّ). المعنى لا باللون وحده (§5): أيقونة لكل نبرة. */
.banner {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  border-inline-start: var(--border-heavy) solid var(--muted); background: var(--surface-2);
  font-size: 14px; line-height: 1.7;
}
.banner.danger { border-inline-start-color: var(--danger); }
.banner-ic { width: 20px; height: 20px; flex-shrink: 0; color: var(--muted); display: none; }
.banner.danger .banner-ic { color: var(--danger); }
.banner.danger .bic-danger { display: block; }
.banner.info .bic-info { display: block; }
.banner-body { flex: 1; min-width: 0; }

.code-big {
  font-size: 60px; font-weight: var(--weight-strong); letter-spacing: 12px; text-align: center;
  color: var(--text); direction: ltr; font-family: var(--font-mono);
  user-select: all;
}
#qr { display: flex; justify-content: center; }
#qr svg {
  /* الـQR أبيض دائماً (حتى بالداكن) — متطلب مسح، استثناء مقصود من التوكنز */
  background: #fff; padding: var(--space-3); border-radius: var(--radius-sm);
  border: var(--border-thin) solid var(--border); width: 200px; height: 200px;
}

.lang-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.lang-grid button {
  background: var(--bg); color: var(--text); border: var(--border-thin) solid var(--border);
  border-radius: var(--radius-sm); padding: var(--space-3) var(--space-1);
  font-family: inherit; font-size: 14px; font-weight: var(--weight-body); cursor: pointer;
  transition: border-color var(--motion-fast), background var(--motion-fast);
}
.lang-grid button:hover { border-color: var(--emphasis); }
.lang-grid button.active { background: var(--emphasis); border-color: var(--emphasis); color: var(--bg); font-weight: var(--weight-strong); }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chips span {
  background: var(--bg); border: var(--border-thin) solid var(--border); border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3); font-size: 13px; font-weight: var(--weight-body); color: var(--text);
}
.chips span b { color: var(--accent); margin-inline-start: var(--space-1); direction: ltr; }

.transcript {
  min-height: 160px; max-height: 320px; overflow-y: auto;
  font-size: 18px; line-height: 2.3; white-space: pre-wrap; word-break: break-word;
}
.transcript:empty::before { content: attr(data-empty); color: var(--muted); font-size: 13px; font-weight: var(--weight-body); }

label.field { display: block; font-size: 12px; font-weight: var(--weight-strong); letter-spacing: 0.5px; color: var(--muted); margin-bottom: var(--space-2); }
input.code-input {
  width: 100%; background: var(--bg); color: var(--text);
  border: var(--border-bold) solid var(--emphasis); border-radius: var(--radius-md);
  padding: var(--space-4); font-size: 24px; text-align: center; letter-spacing: 8px;
  direction: ltr; font-family: var(--font-mono); text-transform: uppercase;
}
input.code-input::placeholder { color: var(--muted); }
input.code-input:focus { outline: none; border-color: var(--accent); }

footer { margin-top: var(--space-5); color: var(--muted); font-size: 12px; text-align: center; line-height: 2; }
footer a { color: var(--accent); }
.hidden { display: none !important; }
h2.section { font-size: 12px; color: var(--muted); font-weight: var(--weight-strong); letter-spacing: 1px; margin-bottom: var(--space-3); }

/* ═══════ المستمع — تخطيط بلا سكرول، أزرار لغة كبيرة (M2) ═══════ */
body.listen-body {
  height: 100dvh; min-height: 0; padding: var(--space-3) var(--space-4);
  align-items: stretch; overflow: hidden;
}
body.listen-body header.lh {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-3); text-align: start;
}
body.listen-body header.lh h1 { font-size: 24px; }
body.listen-body main {
  flex: 1; min-height: 0; max-width: 560px; margin: 0 auto; width: 100%;
  display: flex; flex-direction: column; gap: 0;
}
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.view .section { margin: 0; }
.ch-head { text-align: center; }
.ch-name { font-size: 20px; font-weight: var(--weight-strong); }
.ch-status { font-size: 13px; color: var(--muted); margin-top: var(--space-1); display: inline-flex; align-items: center; gap: var(--space-2); }
.ch-status.live::before {
  content: ''; width: 9px; height: 9px; border-radius: var(--radius-full);
  background: var(--live); animation: pulse var(--motion-pulse) infinite;
}
.ch-status.live { color: var(--live); font-weight: var(--weight-medium); }

/* شبكة اللغات: عمودان، أزرار كبيرة، تمرير داخلي عند الكثرة */
.lang-grid { grid-template-columns: repeat(2, 1fr); flex: 1; min-height: 0; overflow-y: auto; align-content: start; }
.lang-grid button { padding: var(--space-4) var(--space-2); font-size: 16px; min-height: 58px; }
.grid-hint { grid-column: 1 / -1; color: var(--muted); font-size: 13px; text-align: center; padding: var(--space-6) var(--space-3); }

/* الاستماع: حالة علوية، نص ثانوي يملأ، أزرار سفلية ثابتة */
.live-top { display: flex; align-items: center; gap: var(--space-2); }
.live-top .metric { display: inline-flex; align-items: center; font-size: 15px; font-weight: var(--weight-medium); }
.listen-body .transcript { flex: 1; min-height: 0; max-height: none; }
.live-actions { display: flex; flex-direction: column; gap: var(--space-2); }
.live-actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.live-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: var(--space-3) var(--space-4); font-size: 14px; min-height: 44px; }
.live-actions .btn.warn { background: var(--bg); color: var(--warning); border: var(--border-bold) solid var(--warning); }
.live-actions .btn .ic { width: 18px; height: 18px; flex-shrink: 0; }

/* تسجيل البث: بطاقة ما بعد البث (المستمع) + هيستوري + صفحة /r المستقلة */
.rec-done { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-4); margin-bottom: var(--space-3); background: var(--bg); border: var(--border-bold) solid var(--accent); border-radius: var(--radius-md); text-align: center; }
.rec-done-ic { width: 32px; height: 32px; color: var(--accent); }
.rec-done-msg { font-size: 15px; font-weight: var(--weight-medium); color: var(--text); }
.rec-done .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.rec-done .btn .ic { width: 18px; height: 18px; flex-shrink: 0; }
.rec-history { margin-top: var(--space-5); }
.rec-hist-list { display: flex; flex-direction: column; gap: var(--space-2); }
.rec-hist-item { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--bg); border: var(--border-bold) solid var(--emphasis); border-radius: var(--radius-md); color: var(--text); text-decoration: none; font-size: 14px; }
.rec-hist-item:hover { border-color: var(--accent); }
.rec-hist-lang { color: var(--muted); font-size: 13px; }
.rec-page { display: flex; flex-direction: column; gap: var(--space-4); }
.rec-page-status { text-align: center; color: var(--muted); font-size: 14px; padding: var(--space-4); }
.rec-cards { display: flex; flex-direction: column; gap: var(--space-3); }
.rec-card { padding: var(--space-4); background: var(--bg); border: var(--border-bold) solid var(--emphasis); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-3); }
.rec-card-head { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-medium); color: var(--text); }
.rec-card-ic { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; }
.rec-card audio { width: 100%; }
.rec-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.rec-card-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: var(--space-3) var(--space-4); font-size: 14px; min-height: 44px; }
.rec-card-actions .btn .ic { width: 18px; height: 18px; flex-shrink: 0; }
.rec-card-pending { color: var(--warning); font-size: 13px; }
.rec-text { white-space: pre-wrap; font-size: 14px; line-height: 1.7; color: var(--text); max-height: 40vh; overflow-y: auto; }
#switchBack { margin-top: var(--space-2); }

/* وسم الجهة أثناء الاستماع */
.live-top { flex-direction: column; align-items: flex-start; gap: 2px; }
.live-org { font-size: 18px; font-weight: var(--weight-strong); }