:root{
  --bg:#f4f7f6;--card:#fff;--ink:#173238;--muted:#687b7f;
  --teal:#083f49;--teal2:#116a76;--gold:#c99a40;--line:#dbe5e3;
  --soft:#edf5f3;--danger:#a72c2c
}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Segoe UI,Arial,sans-serif}
button,input,select{font:inherit}button{cursor:pointer}
.language-screen{min-height:100vh;display:grid;place-items:center;background:linear-gradient(145deg,#083f49,#116a76);padding:20px}
.language-card{width:min(420px,92vw);background:white;border-radius:26px;padding:34px;display:grid;gap:13px;box-shadow:0 22px 60px #0003}
.splash-icon{width:92px;height:92px;margin:0 auto 8px;border-radius:22px}
.lang-choice{border:1px solid var(--line);background:#f8fbfa;color:var(--teal);padding:15px;border-radius:14px;font-weight:800;font-size:1.08rem}
.topbar{background:var(--teal);color:white;min-height:70px;display:flex;align-items:center;justify-content:space-between;padding:10px max(16px,calc((100vw - 980px)/2))}
.brand{display:flex;align-items:center;gap:10px}.brand img{width:42px;height:42px;border-radius:12px}.brand small{display:block;opacity:.72;margin-top:2px}
.header-btn{border:1px solid #ffffff35;background:#ffffff10;color:white;border-radius:10px;padding:8px 11px}
.shell{max-width:980px;margin:22px auto;padding:0 16px 50px}
.card{background:white;border:1px solid var(--line);border-radius:20px;padding:24px;margin-bottom:17px;box-shadow:0 16px 45px #11373e12}
.card.compact{padding:18px 22px}.muted{color:var(--muted);line-height:1.5}
.notice{padding:12px 14px;border-radius:12px;margin-bottom:12px;font-size:.9rem}.dev{background:#e9f3f1}.warn{background:#fff4d9}
label{display:block;margin-top:14px}label>span,.section-label{display:block;font-weight:700;font-size:.88rem;margin-bottom:6px}
input,select{width:100%;border:1px solid #cbd8d6;background:#fbfcfc;border-radius:11px;padding:12px;color:var(--ink)}
.row{display:flex;gap:7px}.row input{flex:1}.small{width:48px;border:1px solid var(--line);background:#f6f9f8;border-radius:11px}
.roles,.language-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.language-options{grid-template-columns:repeat(3,1fr)}
.role,.target{border:1px solid var(--line);background:#f9fbfa;border-radius:14px;padding:15px;color:var(--ink)}
.role{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;text-align:start}.role b{font-size:1.6rem;grid-row:1/3}.role small{color:var(--muted)}
.role.selected,.target.selected{border:2px solid var(--teal2);background:#eef7f5;padding:14px}
.listen-required{margin:6px 0 0;font-size:.84rem;color:#8a6316;background:#fff6df;border:1px solid #efd89c;border-radius:9px;padding:8px 10px}
.primary,.secondary,.danger{border-radius:11px;padding:11px 14px;font-weight:750;border:1px solid transparent}
.primary{background:var(--teal);color:white}.secondary{background:#edf4f3;color:var(--teal);border-color:#d4e2e0}.danger{background:#fff0f0;color:var(--danger);border-color:#efcaca}.wide{width:100%}
.error{margin-top:12px;background:#fff0f0;color:#902b2b;padding:11px;border:1px solid #efcccc;border-radius:10px}
.room-head{display:flex;align-items:center;justify-content:space-between}.room-head h2{margin:4px 0}.room-head small{color:var(--gold);font-weight:800}
.badge{background:#fff1d5;color:#795714;border-radius:999px;padding:7px 10px;font-size:.78rem;font-weight:800}.badge.online{background:#e6f5ea;color:#256b3e}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.stats>div{background:#f5f8f7;border:1px solid var(--line);padding:12px;border-radius:12px;text-align:center}.stats strong,.stats small{display:block}.stats small{color:var(--muted);margin-top:4px}
.panel{border:1px solid var(--line);background:#f8fbfa;border-radius:15px;padding:16px;margin-bottom:14px}.panel-title{display:flex;gap:13px;align-items:center}.round{width:50px;height:50px;border-radius:50%;background:#e5f0ee;display:grid;place-items:center;font-size:1.5rem}
.match-status{margin-top:14px;background:white;border:1px solid var(--line);border-radius:12px;padding:12px}.match-status>span{font-weight:700;font-size:.82rem;color:var(--muted)}#heardText{font-size:1.05rem;line-height:1.7;margin:7px 0}
.actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px}.actions button{flex:1}.bottom{margin-top:18px}
.current-listening{display:flex;justify-content:space-between;gap:12px;align-items:center;background:#eef6f4;border:1px solid #d5e6e2;padding:10px 12px;border-radius:11px;margin-bottom:12px}
.current-listening span{font-size:.84rem;color:var(--muted)}.current-listening strong{color:var(--teal)}
.current-segment{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:15px 0}.current-segment>div{border:1px solid var(--line);border-radius:14px;padding:14px;min-height:118px}.current-segment>div:first-child{border-inline-start:4px solid var(--teal2)}.current-segment>div:last-child{border-inline-start:4px solid var(--gold)}.current-segment small{color:var(--gold);font-weight:800}.current-segment p{font-size:1.08rem;line-height:1.75;margin:8px 0 0}
.sermon{border-top:1px solid var(--line);margin-top:18px;padding-top:16px}.sermon-head{display:flex;justify-content:space-between;gap:12px;align-items:end;margin-bottom:10px}.sermon-head small{color:var(--muted)}
.segment{display:grid;grid-template-columns:42px 1fr;gap:10px;border:1px solid var(--line);border-radius:12px;padding:11px 12px;margin-bottom:8px;background:#fbfcfc;transition:.2s}.segment .num{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#eaf2f1;font-weight:800;color:var(--teal)}.segment p{margin:0;line-height:1.65}.segment.active{border:2px solid var(--gold);background:#fff9ed;padding:10px 11px;box-shadow:0 0 0 3px rgba(201,154,64,.08)}.segment.active .num{background:var(--gold);color:white}
.participant-box{border-top:1px solid var(--line);margin-top:15px;padding-top:14px}#participantList{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}.person{background:#f2f6f5;border-radius:999px;padding:7px 10px;font-size:.85rem}
.micro-note{font-size:.82rem;color:var(--muted);margin-top:8px;line-height:1.45}.pipeline{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}.pipeline span{background:#f1f6f5;border:1px solid var(--line);padding:7px 9px;border-radius:8px}.pipeline b{color:var(--gold)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#173238;color:white;padding:10px 14px;border-radius:11px;z-index:20}
#audioMount{display:none}[hidden]{display:none!important}
html[dir=rtl] .role{text-align:right}
@media(max-width:700px){.roles,.current-segment{grid-template-columns:1fr}.language-options{grid-template-columns:1fr 1fr 1fr}.stats{grid-template-columns:1fr 1fr}.stats>div:last-child{grid-column:1/-1}.sermon-head{display:block}}
.session-state{display:flex;justify-content:space-between;align-items:center;background:#f7faf9;border:1px solid var(--line);padding:11px 14px;border-radius:12px;margin:16px 0 12px}.session-state strong.waiting{color:#9a6c13}.session-state strong.started{color:#147443}.session-state strong.paused{color:#a05d16}.session-state strong.stopped{color:#9a3030}.imam-controls{display:flex;gap:10px;margin:16px 0;flex-wrap:wrap}.imam-controls button{flex:1;min-width:130px}.start-big{border-radius:11px;padding:14px 22px;font-weight:800;border:1px solid transparent;background:#15804d;color:#fff;font-size:1.13rem}.start-big.active{background:#0d5f39}.waiting-box{background:#fff6df;border:1px solid #ecd599;border-radius:12px;padding:13px;margin-bottom:13px}.waiting-box.started{background:#eaf6ee;border-color:#c8e4d1}.waiting-box p{margin:5px 0 0;color:var(--muted)}.sermon-head small{display:block;margin-top:3px}


.room-share-top{
  margin:14px 0 10px;
}
.top-participants{
  border-top:0;
  margin-top:0;
  padding:13px 14px;
  background:#f8fbfa;
  border:1px solid var(--line);
  border-radius:12px;
}
.tracking-row{
  display:flex;
  justify-content:flex-start;
  margin-top:12px;
}
.tracking-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:#f1f4f3;
  border:1px solid var(--line);
  color:var(--muted);
  padding:7px 10px;
  border-radius:999px;
  font-size:.84rem;
  font-weight:700;
}
.tracking-chip.on{
  background:#e6f5ea;
  border-color:#c8e4d1;
  color:#17623a;
}
.tracking-chip.on::before{
  content:"●";
  color:#1c9a58;
}
.tracking-chip.off::before{
  content:"●";
  color:#9da9a6;
}
.app-footer{
  max-width:1040px;
  margin:0 auto;
  padding:0 16px 34px;
  text-align:center;
}
.install-desktop-btn{
  width:100%;
  border:1px solid #cddbd8;
  background:#fff;
  color:var(--teal);
  border-radius:13px;
  padding:13px 16px;
  font-weight:800;
  cursor:pointer;
}
.install-desktop-btn:hover{
  background:#eef6f4;
}
.app-footer small{
  display:block;
  color:var(--muted);
  margin-top:7px;
  line-height:1.45;
}
.install-dialog{
  border:0;
  border-radius:16px;
  max-width:440px;
  width:min(92vw,440px);
  padding:22px;
  box-shadow:0 20px 60px #0004;
  color:var(--ink);
}
.install-dialog::backdrop{background:#0007}


/* v2.2 - Share + Install action cards */
.feature-action{
  width:100%;
  display:grid;
  grid-template-columns:50px minmax(0,1fr) 24px;
  align-items:center;
  gap:12px;
  text-align:start;
  border:1px solid var(--line);
  border-radius:15px;
  padding:13px 14px;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
  box-shadow:0 7px 22px rgba(8,63,73,.055);
}
.feature-action:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 28px rgba(8,63,73,.095);
}
.feature-action:active{transform:translateY(0)}
.share-action{
  margin:10px 0 16px;
  background:linear-gradient(135deg,#f2f8f7,#e9f4f2);
  border-color:#cee1dd;
  color:var(--teal);
}
.share-action:hover{
  border-color:#a9ccc5;
  background:linear-gradient(135deg,#eff8f6,#e2f1ee);
}
.install-action{
  background:linear-gradient(135deg,#ffffff,#f2f7f6);
  border-color:#cfdedb;
  color:var(--teal);
}
.install-action:hover{
  border-color:#aecbc5;
  background:linear-gradient(135deg,#fbfdfc,#eaf4f2);
}
.feature-icon{
  width:46px;
  height:46px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid #d5e5e2;
  color:var(--teal2);
  box-shadow:0 5px 15px rgba(8,63,73,.07);
}
.feature-icon svg{width:24px;height:24px}
.install-action .feature-icon{
  background:#edf7f4;
  color:#0b7657;
  border-color:#cfe5dd;
}
.feature-copy{
  display:block;
  min-width:0;
}
.feature-copy strong{
  display:block;
  font-size:1rem;
  color:var(--ink);
  line-height:1.3;
}
.feature-copy small{
  display:block;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.45;
  margin-top:3px;
}
.feature-chevron{
  font-size:1.65rem;
  color:#8ba3a0;
  line-height:1;
}
html[dir="rtl"] .feature-chevron{transform:rotate(180deg)}
.app-footer{
  max-width:1040px;
  margin:0 auto;
  padding:0 16px 34px;
}
.top-participants{
  margin-bottom:0;
}


/* v2.3 loading screen */
.loading-screen{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#083f49,#116a76);
  padding:20px;
}
.loading-card{
  width:min(440px,92vw);
  background:#fff;
  border-radius:24px;
  padding:30px;
  text-align:center;
  box-shadow:0 22px 60px rgba(0,0,0,.25);
}
.loading-icon{
  width:84px;
  height:84px;
  border-radius:20px;
  margin-bottom:9px;
}
.loading-card>strong{
  display:block;
  color:var(--teal);
  font-size:1.25rem;
  margin-bottom:18px;
}
.loading-track{
  height:12px;
  background:#e6efed;
  border-radius:999px;
  overflow:hidden;
}
.loading-bar{
  width:0;
  height:100%;
  background:linear-gradient(90deg,#116a76,#c99a40);
  border-radius:999px;
  transition:width .2s ease;
}
.loading-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:9px;
  color:var(--muted);
  font-size:.84rem;
}

/* Listener-side optional content synchronization */
.sync-option{
  margin-top:14px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:11px 12px;
  border:1px solid #d5e5e2;
  border-radius:12px;
  background:#f3f8f7;
  cursor:pointer;
}
.sync-option input{
  width:18px;
  height:18px;
  flex:0 0 auto;
  margin:2px 0 0;
  accent-color:var(--teal2);
}
.sync-copy{min-width:0}
.sync-copy strong{
  display:block;
  color:var(--ink);
  font-size:.9rem;
  line-height:1.35;
}
.sync-copy small{
  display:block;
  color:var(--muted);
  font-size:.8rem;
  line-height:1.45;
  margin-top:2px;
}

.footer-version{
  text-align:center;
  color:var(--muted);
  font-size:.76rem;
  margin:0 0 7px;
  opacity:.82;
}


/* v2.5 install placement */
.pwa-explainer{
  display:flex;align-items:center;gap:8px;
  margin:-5px 0 16px;padding:0 4px;
  color:var(--muted);font-size:.8rem
}
.pwa-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:24px;padding:0 8px;border-radius:999px;
  background:#e8f3ef;border:1px solid #cae0d8;
  color:#12654b;font-weight:800;letter-spacing:.04em
}
.app-footer{display:none}

/* Language alert */
.language-alert-dialog{
  border:0;border-radius:22px;width:min(460px,92vw);
  padding:24px;color:var(--ink);text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.35)
}
.language-alert-dialog::backdrop{
  background:rgba(3,20,24,.62);backdrop-filter:blur(3px)
}
.alert-icon{
  width:58px;height:58px;margin:0 auto 10px;border-radius:18px;
  display:grid;place-items:center;font-size:1.65rem;
  background:#edf6f4;border:1px solid #d2e5e1
}
.language-alert-dialog h3{margin:4px 0 7px;color:var(--teal);font-size:1.2rem}
.language-alert-dialog p{margin:0 0 16px;color:var(--muted);line-height:1.55}
.alert-language-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:12px
}
.alert-language-btn{
  border:1px solid #cededb;background:#f7fbfa;color:var(--teal);
  border-radius:12px;padding:12px 8px;font-weight:800
}
.alert-language-btn:hover{background:#eaf5f2;border-color:#a9cbc4}

/* Wake Lock status */
.wake-state{
  display:flex;align-items:center;gap:7px;
  padding:7px 3px 0;color:var(--muted);font-size:.8rem
}
.wake-dot{
  width:9px;height:9px;border-radius:50%;
  background:#aeb9b7;box-shadow:0 0 0 3px rgba(174,185,183,.15)
}
.wake-dot.on{background:#20a561;box-shadow:0 0 0 3px rgba(32,165,97,.15)}
.wake-dot.unsupported{background:#c59a3b;box-shadow:0 0 0 3px rgba(197,154,59,.15)}
@media(max-width:520px){.alert-language-grid{grid-template-columns:1fr}}


/* v2.6 */
.header-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.header-install-btn{
  border:1px solid rgba(255,255,255,.36);
  background:#fff;
  color:var(--teal);
  border-radius:10px;
  padding:8px 14px;
  font-weight:850;
}
.header-install-btn:hover{background:#edf6f4}

.single-role{margin-top:18px}
.single-role select{
  background:#f8fbfa;
  border:1px solid #cbd8d6;
  font-weight:750;
}

.start-stop-toggle{
  width:100%;
  border:0;
  border-radius:13px;
  padding:14px 18px;
  font-size:1.08rem;
  font-weight:850;
  color:#fff;
  background:#16804e;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  box-shadow:0 8px 22px rgba(22,128,78,.18);
}
.start-stop-toggle.running{
  background:#a73535;
  box-shadow:0 8px 22px rgba(167,53,53,.18);
}

/* Listener view: no long sermon scrolling */
body.listener-mode #sermonBlock{
  display:none !important;
}
body.listener-mode .current-segment{
  margin-top:14px;
}
body.listener-mode .current-segment>div{
  min-height:150px;
}

/* Footer PWA install */
.app-footer{
  display:block !important;
  max-width:1040px;
  margin:0 auto;
  padding:0 16px 34px;
}
.footer-version{
  text-align:center;
  color:var(--muted);
  font-size:.76rem;
  margin-top:8px;
  opacity:.8;
}


/* v2.7 fixed role */
.fixed-role-card{
  margin-top:18px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 14px;
  background:#f7faf9;
  border:1px solid var(--line);
  border-radius:13px;
}
.fixed-role-card small{
  display:block;
  color:var(--muted);
  font-size:.78rem;
  margin-bottom:2px;
}
.fixed-role-card strong{
  display:block;
  color:var(--ink);
  font-size:.98rem;
}
.fixed-role-icon{
  width:42px;
  height:42px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#eaf3f1;
  font-size:1.3rem;
}

.room-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:10px 0 16px;
}
.room-actions .feature-action{
  margin:0;
}
.leave-room-action{
  background:linear-gradient(135deg,#fff7f7,#fff0f0);
  border-color:#ebcdcd;
  color:#8f3030;
}
.leave-room-action:hover{
  background:linear-gradient(135deg,#fff3f3,#ffe8e8);
  border-color:#dda9a9;
}
.leave-room-action .feature-icon{
  color:#a33b3b;
  background:#fff;
  border-color:#eccaca;
}
.leave-room-action .feature-copy strong{
  color:#8f3030;
}
@media(max-width:640px){
  .room-actions{grid-template-columns:1fr}
}


/* =========================================================
   v2.9 CLEAN ROOM UI
   ========================================================= */

body{
  background:#f4f7f6;
}

.shell{
  max-width:1180px;
  margin:18px auto;
  padding:0 14px 40px;
}

.room-page{
  display:block;
}

.room-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 16px;
  box-shadow:0 10px 28px rgba(8,63,73,.055);
  margin-bottom:10px;
}

.room-identity{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.room-identity h2{
  margin:2px 0 0;
  font-size:1.05rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.room-identity small{
  color:var(--gold);
  font-size:.74rem;
  font-weight:800;
}

.room-toolbar-actions{
  display:flex;
  gap:8px;
}

.toolbar-action{
  border:1px solid var(--line);
  border-radius:10px;
  background:#f7faf9;
  color:var(--teal);
  padding:8px 11px;
  display:flex;
  align-items:center;
  gap:7px;
  font-weight:750;
  font-size:.84rem;
}

.toolbar-action:hover{
  background:#eef6f4;
}

.leave-mini{
  color:#9b3434;
  background:#fff7f7;
  border-color:#ecd0d0;
}

.toolbar-icon{
  font-size:1rem;
  line-height:1;
}

.room-meta-row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-bottom:10px;
}

.meta-item{
  min-height:66px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
}

.meta-item span,
.meta-item small{
  color:var(--muted);
  font-size:.72rem;
}

.meta-item strong{
  font-size:.95rem;
  color:var(--ink);
}

.wake-meta{
  position:relative;
  padding-inline-end:32px;
}

.wake-meta .wake-dot{
  position:absolute;
  inset-inline-end:12px;
  top:13px;
}

.imam-console,
.listener-console{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  margin-bottom:10px;
  box-shadow:0 10px 26px rgba(8,63,73,.045);
}

.imam-console-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}

.imam-console-head>div{
  min-width:0;
}

.imam-console-head strong{
  display:block;
  font-size:.98rem;
}

.imam-console-head small{
  color:var(--muted);
  line-height:1.35;
}

.compact-toggle{
  width:auto;
  min-width:145px;
  padding:10px 17px;
  border-radius:10px;
  flex:0 0 auto;
}

.speech-match{
  border:1px solid var(--line);
  border-radius:12px;
  padding:11px 12px;
  background:#fafcfc;
}

.speech-label-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:var(--muted);
  font-size:.75rem;
  margin-bottom:7px;
}

#heardText{
  min-height:42px;
  font-size:1rem;
  line-height:1.65;
  margin:0;
}

.match-inline{
  white-space:nowrap;
}

.imam-tools{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
}

.imam-tool-buttons{
  display:flex;
  gap:7px;
}

.icon-tool{
  min-width:44px;
  height:38px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#f3f7f6;
  color:var(--teal);
  font-weight:800;
}

.text-tool{
  padding:0 12px;
}

.tracking-chip{
  margin:0;
  font-size:.76rem;
}

.content-stage{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:10px;
}

.content-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:0;
  overflow:hidden;
  min-height:190px;
  box-shadow:0 10px 28px rgba(8,63,73,.04);
}

.content-card header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  background:#f7faf9;
  border-bottom:1px solid var(--line);
}

.content-card header span{
  font-size:.78rem;
  color:var(--muted);
  font-weight:750;
}

.content-index{
  color:var(--gold);
  font-size:.78rem;
}

.content-card p{
  margin:0;
  padding:20px 18px 22px;
  font-size:1.08rem;
  line-height:1.85;
}

.arabic-card{
  border-inline-start:4px solid var(--teal2);
}

.translation-card{
  border-inline-start:4px solid var(--gold);
}

.listener-top{
  display:grid;
  grid-template-columns:auto minmax(220px,360px);
  align-items:end;
  gap:14px;
}

.listener-language-summary{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:7px 0;
}

.listener-language-summary span{
  color:var(--muted);
  font-size:.76rem;
}

.listener-language-select{
  margin:0;
}

.compact-sync{
  margin-top:10px;
}

.listener-audio-actions{
  display:flex;
  gap:8px;
  margin-top:10px;
}

.listener-audio-actions button{
  flex:1;
}

.listener-state-line{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  padding:8px 10px;
  border-radius:10px;
  background:#f7faf9;
  border:1px solid var(--line);
}

.listener-state-line strong{
  font-size:.82rem;
}

.listener-state-line span{
  color:var(--muted);
  font-size:.78rem;
}

.sermon-details{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  margin-bottom:10px;
  overflow:hidden;
}

.sermon-details summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  background:#fbfcfc;
}

.sermon-details summary::-webkit-details-marker{
  display:none;
}

.sermon-details summary strong{
  display:block;
  font-size:.9rem;
}

.sermon-details summary small,
.sermon-details summary>span{
  color:var(--muted);
  font-size:.73rem;
}

.sermon-list{
  padding:10px;
  max-height:430px;
  overflow:auto;
}

.sermon-list .segment{
  margin-bottom:6px;
}

.participants-strip{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
}

.participants-strip>strong{
  font-size:.8rem;
  color:var(--muted);
}

#participantList{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.person{
  padding:5px 9px;
  font-size:.76rem;
}

/* Listener: only current Arabic + translated panels are primary.
   Full sermon is completely hidden. */
body.listener-mode #sermonBlock{
  display:none !important;
}

/* Remove legacy visual inflation */
.room-page .stats,
.room-page .session-state,
.room-page .wake-state,
.room-page .panel-title,
.room-page .participant-box,
.room-page .actions.bottom{
  display:none !important;
}

@media(max-width:820px){
  .room-meta-row{
    grid-template-columns:1fr 1fr;
  }
  .content-stage{
    grid-template-columns:1fr;
  }
  .listener-top{
    grid-template-columns:1fr;
  }
}

@media(max-width:560px){
  .room-toolbar{
    align-items:flex-start;
  }
  .room-toolbar-actions{
    flex-direction:column;
  }
  .toolbar-action{
    justify-content:center;
  }
  .imam-console-head{
    align-items:stretch;
    flex-direction:column;
  }
  .compact-toggle{
    width:100%;
  }
  .imam-tools{
    align-items:stretch;
    flex-direction:column;
  }
  .imam-tool-buttons{
    display:grid;
    grid-template-columns:1fr 1fr 1.3fr;
  }
}


/* v2.15 — listener language selection */
.language-options .target{
  min-height:112px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.language-options .target strong{
  font-size:1.02rem;
}

.language-options .target small{
  color:var(--muted);
  font-size:.8rem;
}

.language-options .target:active{
  transform:scale(.98);
}

.language-options .target.selected{
  border:2px solid var(--teal);
  background:#eaf6f3;
  box-shadow:0 0 0 3px rgba(8,63,73,.08);
  padding:14px;
}

.language-options .target.selected strong{
  color:var(--teal);
}

/* Fine alert */
.fine-alert-dialog{
  border:0;
  padding:0;
  background:transparent;
  width:min(92vw,520px);
  max-width:520px;
}

.fine-alert-dialog::backdrop{
  background:rgba(8,35,40,.54);
  backdrop-filter:blur(2px);
}

.fine-alert-card{
  background:#fff;
  border-radius:22px;
  padding:24px 20px 18px;
  text-align:center;
  box-shadow:0 26px 80px rgba(0,0,0,.26);
}

.fine-alert-card .alert-icon{
  width:60px;
  height:60px;
  display:grid;
  place-items:center;
  border-radius:18px;
  margin:0 auto 12px;
  background:#eaf6f3;
  font-size:1.7rem;
}

.fine-alert-card h3{
  margin:0 0 7px;
}

.fine-alert-card p{
  margin:0 auto 18px;
  color:var(--muted);
  line-height:1.55;
}

.fine-alert-card .alert-language-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}

.fine-alert-card .alert-language-btn{
  min-height:86px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#f8fbfa;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  color:var(--ink);
  cursor:pointer;
  touch-action:manipulation;
}

.fine-alert-card .alert-language-btn small{
  color:var(--muted);
  font-size:.74rem;
}

.fine-alert-card .alert-language-btn:active{
  background:#eaf6f3;
  border-color:var(--teal);
}

.fine-alert-cancel{
  margin-top:12px;
}

@media(max-width:520px){
  .language-options{
    gap:8px;
  }
  .language-options .target{
    min-height:104px;
    padding:10px 7px;
  }
  .fine-alert-card{
    margin:0 8px;
  }
}


/* v2.17 — visible Ably protocol state */
.sync-status-bar{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  background:#f7faf9;
  border:1px solid var(--line);
  border-radius:10px;
  padding:7px 10px;
  margin:-2px 0 10px;
  font-size:.74rem;
}

.sync-status-bar strong{
  color:var(--ink);
}

.sync-status-bar small{
  color:var(--muted);
}

.sync-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#aaa;
}

.sync-dot.on{
  background:#20a36a;
  box-shadow:0 0 0 3px rgba(32,163,106,.12);
}


/* v2.18 */
.content-stage{position:relative;z-index:1}
.content-card{display:block !important}
.content-card p:empty::before{content:"—";color:var(--muted)}
body.listener-mode .content-stage{margin-top:10px}
body.listener-mode .content-card{min-height:180px}
body.listener-mode #sermonBlock{display:none !important}
.participants-strip{margin-top:10px}
.person{display:inline-flex;align-items:center;gap:4px}

/* v3.0 — presenter claim on the join card */
.lead-check{
  display:flex;align-items:center;gap:10px;margin:18px 0 4px;cursor:pointer;font-size:14px;
}
.lead-check input{width:auto;margin:0;flex:none}
#passcodeRow{margin-top:4px}

/* v3.2: Finish button next to Start/Stop; the console head wraps on narrow screens */
.imam-console-head{flex-wrap:wrap}
.finish-toggle{background:var(--teal);box-shadow:0 8px 22px rgba(8,63,73,.18)}
.read-loud-check{margin-top:10px}

/* v3.2.1: reader controls under the imam tools; Finish stands apart from Start/Stop */
.reader-options{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:10px}
.reader-options label{margin:0;display:flex;align-items:center;gap:8px}
.reader-options label>span{margin:0;font-size:.86rem;font-weight:700}
.reader-options select{width:auto;padding:8px 10px}
.imam-console-head .finish-toggle{background:#083f49;box-shadow:0 8px 22px rgba(8,63,73,.18)}

/* v3.2.3: update banner under the top bar */
.update-banner{position:sticky;top:0;z-index:60;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;background:#fff4d9;border-bottom:1px solid #ecd391;color:#5a3f0c;padding:10px 16px;font-size:.92rem;line-height:1.45}
.update-banner span{flex:1 1 320px}
.update-banner button{padding:8px 14px}

/* v3.2.5: anonymous listeners */
.hide-me-check{margin-top:12px}
.person-hidden{opacity:.7;font-style:italic}

/* v3.3: recited-verse note on the Arabic card */
.ayah-label{display:block;width:100%;color:var(--gold);font-weight:700;font-size:.8rem;margin-top:4px}

/* v3.3.2: verse segments are laid out on lines (introducer, verse, closing phrase) */
#currentArabic,#currentTranslation,.sermon-list .segment p{white-space:pre-line}

/* v3.4: khutba / lesson choice on the imam join card, content name in the room */
.language-options.content-options{grid-template-columns:1fr 1fr;margin:10px 0 6px}
.content-choice small{display:block;margin-top:4px;color:var(--muted);font-size:.82rem;line-height:1.35}
.content-title{display:block;color:var(--gold);font-weight:700;font-size:.85rem;margin-top:2px}