/* ═══════════════════════════════════════════════════════════════════════
   WatchKRD — room.css  (ژووری تایبەت — Private Room)  v66
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Root vars ── */
:root {
  --accent:  #5eb0ee;
  --accent2: #8ecaf5;
  --glow:    rgba(94,176,238,.45);
  --panel:   rgba(10,11,20,.93);
  --stroke:  rgba(255,255,255,.1);
  --blur:    blur(32px) saturate(180%);
  --r:       16px;
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body {
  width:100%; background:#000000; color:#f0f1f8;
  font-family:'Noto Kufi Arabic','Noto Naskh Arabic','Noto Sans Arabic',system-ui,sans-serif;
  direction:ltr; -webkit-font-smoothing:antialiased;
  /* no overflow:hidden — body must scroll freely for the lobby on iOS */
}
a { color:inherit; text-decoration:none; }
button { font-family:inherit; }

/* ══════════════════════════════════════════════════════════════════════
   LOBBY
   ══════════════════════════════════════════════════════════════════════ */
.room-lobby {
  /* SIMPLE natural-scroll layout — the only approach that works on every
     iOS Safari version. No position:fixed, no overflow tricks.
     #roomView is position:fixed so it covers this when a room is entered. */
  display: block;
  min-height: 100vh;
  padding: 20px 20px 60px 20px; /* 60px bottom = clear iPhone toolbar */
  background:
    radial-gradient(55% 50% at 50% 20%, rgba(94,176,238,.12) 0%, transparent 60%),
    radial-gradient(45% 40% at 50% 100%, rgba(160,90,242,.08) 0%, transparent 60%),
    #000000;
}

.lobby-card {
  width: min(440px, 100%);
  background: rgba(8,8,12,.92);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--stroke); border-radius: 28px;
  padding: 24px; text-align: center;
  margin: 0 auto 20px auto; /* horizontally centred, never auto vertically */
  box-shadow: 0 40px 80px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.1);
}

.lobby-logo {
  font-size:1.4rem; font-weight:900; direction:ltr;
  display:inline-flex; align-items:center; gap:3px; margin-bottom:4px;
}
.lobby-logo .wm {
  display:inline-flex; align-items:center; justify-content:center;
  width:1.5em; height:1.5em; border-radius:11px;
  background:linear-gradient(145deg,#2a2a2e,#050506);
  box-shadow:0 6px 16px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.24),inset 0 -3px 6px rgba(0,0,0,.5);
  font-size:.8em; color:#fff;
}
.lobby-logo b { background:linear-gradient(135deg,#5eb0ee,#8ecaf5); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.lobby-subtitle { font-size:.84rem; color:rgba(240,241,248,.4); margin-bottom:22px; }

/* Floating house */
.room-eye-wrap { display:flex; align-items:center; justify-content:center; width:92px; height:92px; margin:0 auto 10px; }
.room-eye {
  width:92px; height:92px; object-fit:contain; border-radius:50%;
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 24px rgba(94,176,238,.35));
  animation:eyePulse 6s ease-in-out infinite;
  user-select:none; -webkit-user-drag:none;
}
@keyframes eyePulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
@keyframes houseFloat { 0%,100%{transform:rotateX(8deg) rotateY(-8deg) translateY(0)} 50%{transform:rotateX(8deg) rotateY(-8deg) translateY(-6px)} }
.lobby-section-title { font-size:1.25rem; font-weight:900; margin-bottom:12px; }

/* Tabs */
.room-tabs { display:flex; gap:5px; background:rgba(255,255,255,.05); border-radius:14px; padding:4px; margin-bottom:14px; }
.room-tab { flex:1; padding:9px; border-radius:10px; border:none; font-family:inherit; font-size:.88rem; font-weight:700; cursor:pointer; transition:all .2s; color:rgba(240,241,248,.5); background:transparent; touch-action:manipulation; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none; }
.room-tab.active { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; box-shadow:0 4px 14px var(--glow); }

/* Inputs */
.room-input {
  width:100%; background:rgba(255,255,255,.06); border:1px solid var(--stroke);
  border-radius:11px; padding:9px 13px; color:#fff; font-family:inherit; font-size:.88rem;
  outline:none; transition:border-color .2s,background .2s;
}
.room-input:focus { border-color:rgba(94,176,238,.6); background:rgba(255,255,255,.09); }
.room-input::placeholder { color:rgba(240,241,248,.3); }
.room-label { font-size:.74rem; font-weight:700; color:rgba(240,241,248,.5); margin-bottom:3px; text-align:right; display:block; }
.room-field { margin-bottom:9px; text-align:right; }

/* Custom code input row */
.custom-code-wrap { display:flex; gap:6px; align-items:center; }
.custom-code-wrap .room-input { flex:1; }
.gen-code-btn {
  flex-shrink:0; width:38px; height:40px; border-radius:10px;
  border:1px solid var(--stroke); background:rgba(255,255,255,.06);
  color:rgba(240,241,248,.5); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .2s;
}
.gen-code-btn:hover { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.2); }

/* Avatar grid (SVG icon avatars) */
.avatar-grid { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-start; margin-bottom:8px; }
.avatar-btn {
  width:42px; height:42px; border-radius:50%; border:2px solid transparent;
  cursor:pointer; transition:all .2s; padding:9px;
  display:flex; align-items:center; justify-content:center;
}
.avatar-btn:hover  { transform:scale(1.1); filter:brightness(1.15); }
.avatar-btn.sel    { border-color:#fff; box-shadow:0 0 0 3px var(--glow); transform:scale(1.12); }
.avatar-btn svg    { width:100%; height:100%; display:block; }
.avatar-upload-wrap { display:inline-flex; gap:6px; align-items:center; }
.avatar-upload-btn  {
  width:42px; height:42px; border-radius:50%; border:1.5px dashed var(--stroke);
  background:rgba(255,255,255,.05); cursor:pointer; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:1px; color:rgba(240,241,248,.45); font-family:inherit; transition:all .2s;
}
.avatar-upload-btn:hover { border-color:var(--accent); color:var(--accent); }
input[type=file] { display:none; }
.avatar-upload-preview { width:42px; height:42px; border-radius:50%; object-fit:cover; border:2px solid var(--accent); display:none; }

/* Buttons */
.btn-room-primary {
  width:100%; padding:14px; border-radius:14px; border:none;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff; font-size:.97rem; font-weight:800; cursor:pointer;
  box-shadow:0 10px 28px var(--glow), inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .18s,box-shadow .18s;
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:4px;
}
.btn-room-primary:hover  { transform:translateY(-2px); box-shadow:0 16px 36px var(--glow),inset 0 1px 0 rgba(255,255,255,.35); }
.btn-room-primary:active { transform:scale(.97); }

.btn-room-secondary {
  width:100%; padding:12px; border-radius:14px;
  border:1px solid var(--stroke); background:rgba(255,255,255,.05);
  color:#fff; font-size:.92rem; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:10px;
  transition:background .2s,transform .15s;
}
.btn-room-secondary:hover { background:rgba(255,255,255,.09); transform:translateY(-1px); }

/* Error / success */
.room-error   { background:rgba(255,69,58,.12); border:1px solid rgba(255,69,58,.3); color:#ff9d94; border-radius:10px; padding:10px 13px; font-size:.86rem; margin-bottom:12px; display:none; text-align:right; }
.room-success { background:rgba(48,209,88,.1);   border:1px solid rgba(48,209,88,.28);  color:#5be584; border-radius:10px; padding:10px 13px; font-size:.86rem; margin-bottom:12px; display:none; text-align:right; }

/* Invite code display */
.invite-code-box   { background:rgba(255,255,255,.04); border:1.5px dashed rgba(255,255,255,.18); border-radius:14px; padding:20px; margin:16px 0; }
.invite-code       { font-size:1.9rem; font-weight:900; letter-spacing:6px; color:#fff; direction:ltr; font-family:'Courier New',monospace; display:block; margin-bottom:6px; }
.invite-code-label { font-size:.77rem; color:rgba(240,241,248,.4); }
.copy-code-btn     { margin-top:8px; padding:9px 20px; border-radius:10px; border:1px solid var(--stroke); background:rgba(255,255,255,.07); color:#fff; font-family:inherit; font-size:.84rem; font-weight:700; cursor:pointer; transition:all .2s; display:inline-flex; align-items:center; gap:6px; }
.copy-code-btn:hover { background:rgba(255,255,255,.13); }

/* ══════════════════════════════════════════════════════════════════════
   IN-ROOM LAYOUT
   ══════════════════════════════════════════════════════════════════════ */
#roomView {
  display:none; position:fixed; inset:0;
  flex-direction:column; background:#07080e;
}

/* ── Top bar ── */
.room-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 14px; background:rgba(8,9,18,.95); border-bottom:1px solid var(--stroke);
  flex-shrink:0; gap:8px; min-height:52px;
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
}
/* In an installed PWA, leave room for the status-bar brand strip so the top bar
   never slides under the camera / Dynamic Island. */
html.pwa-mode .room-topbar { padding-top: calc(9px + var(--pwa-safe-top, 0px)); }
.room-topbar-left   { display:flex; align-items:center; gap:10px; min-width:0; flex:1; }
.room-topbar-title  { font-size:.93rem; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.room-topbar-actions { display:flex; gap:5px; align-items:center; flex-shrink:0; }

/* Members bar */
.room-members-bar { display:flex; align-items:center; }
.member-pip {
  width:30px; height:30px; border-radius:50%;
  border:2px solid rgba(0,0,0,.9);
  display:flex; align-items:center; justify-content:center;
  margin-inline-start:-7px; overflow:hidden; flex-shrink:0; padding:5px;
  box-shadow:0 2px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.25);
  position:relative; transition:transform .2s;
}
.member-pip:hover { transform:translateY(-3px) scale(1.08); z-index:5; }
.member-pip:first-child { margin-inline-start:0; }
.member-pip img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.member-pip svg { width:100%; height:100%; }
.member-more { background:rgba(255,255,255,.12); font-size:.6rem; font-weight:800; color:rgba(240,241,248,.7); padding:0; }

/* Leader badge */
.leader-badge {
  display:inline-flex; align-items:center; gap:4px;
  background:linear-gradient(135deg,rgba(94,176,238,.2),rgba(142,202,245,.2));
  border:1px solid rgba(94,176,238,.35); color:#a8d8f8;
  border-radius:999px; padding:4px 10px; font-size:.72rem; font-weight:700;
  white-space:nowrap;
}

/* Buttons */
.btn-sm {
  padding:6px 12px; border-radius:999px; border:1px solid var(--stroke);
  background:rgba(255,255,255,.07); color:#fff; font-size:.76rem; font-weight:700;
  cursor:pointer; transition:all .2s; white-space:nowrap;
  display:inline-flex; align-items:center; gap:5px;
}
.btn-sm:hover      { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); }
.btn-sm.danger     { border-color:rgba(255,69,58,.35); color:#ff9d94; }
.btn-sm.danger:hover { background:rgba(94,176,238,.12); }

/* ── Main content ── */
.room-content { display:flex; flex:1; overflow:hidden; direction:ltr; }

/* Movie panel */
.room-movie-panel {
  flex:1; position:relative; background:#000; overflow:hidden;
  display:flex; flex-direction:column;
}
.room-movie-frame { flex:1; border:none; width:100%; height:100%; display:block; }
.room-no-movie {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; color:rgba(240,241,248,.45); text-align:center; padding:24px;
  font-family:'Noto Naskh Arabic',system-ui,sans-serif; direction:rtl;
}
.room-no-movie h3 {
  font-size:clamp(1.05rem, 2.4vw, 1.45rem); font-weight:800;
  color:rgba(240,241,248,.72); letter-spacing:.2px; margin:0;
}
.room-no-movie p  { font-size:.86rem; }
/* Idle glyph — a soft, lit film frame instead of a flat grey icon */
.no-movie-glyph {
  width:120px; height:120px; border-radius:34px;
  display:flex; align-items:center; justify-content:center;
  color:rgba(174,214,247,.85);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(94,176,238,.20), rgba(94,176,238,0) 62%),
    linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    0 26px 60px rgba(0,0,0,.55),
    0 0 60px rgba(94,176,238,.14),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -18px 34px rgba(0,0,0,.34);
  backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%);
}

/* Sync notice */
.sync-notice {
  position:absolute; bottom:80px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.8); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.15); border-radius:999px;
  padding:8px 20px; font-size:.8rem; color:rgba(255,255,255,.85);
  opacity:0; pointer-events:none; transition:opacity .3s;
  white-space:nowrap; z-index:100;
}
.sync-notice.visible { opacity:1; }
.fs-indicator { display:none; }

/* ── Chat panel ── */
.room-chat-panel {
  flex: 0 0 clamp(300px, 42%, 560px); display:flex; flex-direction:column;
  background:rgba(9,10,20,.97); border-inline-start:1px solid var(--stroke);
  direction:rtl; overflow:hidden;
  transition:flex-basis .3s, width .3s;
}
.room-chat-panel.collapsed { flex-basis:0; width:0; overflow:hidden; border:none; }
.chat-reopen-btn {
  position:absolute; bottom:18px; inset-inline-end:18px; z-index:60;
  width:52px; height:52px; border-radius:50%; border:none; cursor:pointer;
  display:none; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 8px 24px var(--glow), inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .2s;
}
.chat-reopen-btn:hover { transform:translateY(-3px) scale(1.06); }

/* Chat header */
.chat-header {
  padding:11px 13px; border-bottom:1px solid var(--stroke);
  display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
  background:rgba(8,9,18,.6);
}
.chat-header-title  { font-size:.88rem; font-weight:800; color:rgba(240,241,248,.85); display:flex; align-items:center; }
.chat-toggle-btn    { background:none; border:none; color:rgba(240,241,248,.4); cursor:pointer; padding:4px; border-radius:8px; display:flex; transition:all .15s; }
.chat-toggle-btn:hover { color:#fff; background:rgba(255,255,255,.07); }

/* Messages */
.chat-messages {
  flex:1; overflow-y:auto; padding:10px 9px;
  display:flex; flex-direction:column; gap:6px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.08) transparent;
}
.chat-messages::-webkit-scrollbar       { width:3px; }
.chat-messages::-webkit-scrollbar-thumb { background:rgba(255,255,255,.09); border-radius:4px; }

/* Message rows */
@keyframes msgIn { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} }

.msg-row { display:flex; gap:7px; align-items:flex-end; animation:msgIn .18s ease both; direction:ltr; }
.msg-me    { flex-direction:row-reverse; }
.msg-other { flex-direction:row; }

.msg-avatar {
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);
  border:2px solid rgba(255,255,255,.14);
  background-clip:padding-box;
}
/* Photos fill the whole circle — no inner padding so the face is clear */
.msg-avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; image-rendering:auto; }
/* Built-in SVG avatars keep a little breathing room */
.msg-avatar svg { width:78%; height:78%; }

.msg-body   { display:flex; flex-direction:column; align-items:flex-start; max-width:80%; direction:rtl; }
.msg-me .msg-body { align-items:flex-end; }
/* Keep the sender name pinned to the avatar side so it never drifts with the
   width of the bubble. The body is RTL, so inside it flex-start = right edge,
   flex-end = left edge. "Other" messages have the avatar on the LEFT, so the
   name must sit at the body's left edge (flex-end). "Me" messages have the
   avatar on the right, so the name sits at the right edge (flex-start). */
.msg-name   { font-size:.66rem; color:rgba(240,241,248,.38); margin-bottom:3px; font-weight:700; padding:0 4px; white-space:nowrap; }
.msg-other .msg-name { align-self:flex-end; }
.msg-me    .msg-name { align-self:flex-start; }

.msg-bubble {
  padding:7px 11px; border-radius:14px;
  font-size:.855rem; line-height:1.55; word-break:break-word;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.07);
  color:#e8eaf5;
}
.msg-me .msg-bubble {
  background:rgba(94,176,238,.2); border-color:rgba(94,176,238,.22);
  border-radius:14px 14px 14px 4px;
}
.msg-other .msg-bubble { border-radius:14px 14px 14px 4px; }

/* Optimistic (instant) send states */
.msg-pending { opacity:.62; }
.msg-pending .msg-bubble { position:relative; }
.msg-failed  .msg-bubble { border-color:rgba(94,176,238,.6) !important; }
.msg-failed  .msg-bubble::after { content:'!'; position:absolute; inset-inline-end:-16px; bottom:0; color:#ff6b6b; font-weight:900; font-size:.8rem; }

.msg-media-bubble  { background:none !important; border:none !important; padding:0 !important; }
.msg-media-img     { max-width:160px; max-height:140px; border-radius:12px; display:block; object-fit:cover; }

.msg-system        { text-align:center; padding:3px 8px; }
.msg-system span   { font-size:.72rem; color:rgba(240,241,248,.32); font-style:italic; }

/* Chat input */
.chat-input-area { padding:8px 9px 10px; border-top:1px solid var(--stroke); flex-shrink:0; }
.chat-input-row  { display:flex; gap:5px; align-items:flex-end; }
.chat-textarea {
  flex:1; background:rgba(255,255,255,.06); border:1px solid var(--stroke);
  border-radius:12px; padding:8px 11px; color:#fff; font-family:inherit; font-size:.86rem;
  resize:none; max-height:80px; min-height:34px; outline:none;
  transition:border-color .2s; scrollbar-width:none; direction:rtl;
}
.chat-textarea:focus { border-color:rgba(94,176,238,.4); }
.chat-textarea::placeholder { color:rgba(240,241,248,.28); }
/* The send button is gone on every device — Enter / the keyboard's return key
   sends. Any stray instance stays hidden so nothing can reintroduce it. */
.chat-send-btn { display:none !important; }
.chat-mic-btn {
  flex-shrink:0; width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:rgba(255,255,255,.1); transition:all .2s;
}
.chat-mic-btn:hover { background:rgba(255,255,255,.18); }
.chat-mic-btn.recording { background:linear-gradient(135deg,#5eb0ee,#8ecaf5); animation:micPulse 1s ease-in-out infinite; }
@keyframes micPulse { 0%,100%{box-shadow:0 0 0 0 rgba(94,176,238,.5)} 50%{box-shadow:0 0 0 8px rgba(94,176,238,0)} }
.msg-voice { height:34px; max-width:200px; }

.chat-extra-btns { display:flex; gap:4px; margin-bottom:5px; }
.chat-extra-btn {
  width:28px; height:28px; border-radius:8px; border:none;
  background:rgba(255,255,255,.06); color:rgba(240,241,248,.5); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.chat-extra-btn:hover  { background:rgba(255,255,255,.11); color:#fff; }
.chat-extra-btn.active { background:rgba(94,176,238,.18); color:var(--accent); }

/* ── Media panel (stickers + GIFs) ── */
.media-panel {
  display:none; flex-direction:column;
  background:rgba(8,9,18,.98); border:1px solid var(--stroke);
  border-radius:14px; margin-bottom:7px; overflow:hidden;
  max-height:230px;
}
.media-panel.open { display:flex; }

.media-tabs { display:flex; border-bottom:1px solid var(--stroke); }
.media-tab-btn {
  flex:1; padding:8px 6px; background:none; border:none;
  color:rgba(240,241,248,.45); font-family:inherit; font-size:.76rem; font-weight:700;
  cursor:pointer; transition:all .2s; display:flex; align-items:center; justify-content:center; gap:4px;
}
.media-tab-btn.active { color:var(--accent); border-bottom:2px solid var(--accent); background:rgba(94,176,238,.06); }
.media-tab-btn:hover:not(.active) { color:rgba(240,241,248,.75); background:rgba(255,255,255,.04); }

.media-content { flex:1; overflow-y:auto; padding:7px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.08) transparent; }
.media-content::-webkit-scrollbar { width:3px; }
.media-content::-webkit-scrollbar-thumb { background:rgba(255,255,255,.09); border-radius:4px; }

/* Sticker categories */
.sticker-categories { display:flex; gap:4px; flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; margin-bottom:6px; scrollbar-width:none; }
.sticker-categories::-webkit-scrollbar { display:none; }
.sticker-cat-btn {
  padding:4px 10px; border-radius:999px; border:1px solid var(--stroke);
  background:rgba(255,255,255,.05); color:rgba(240,241,248,.5); font-family:inherit; font-size:.7rem; font-weight:700;
  cursor:pointer; white-space:nowrap; transition:all .15s; flex-shrink:0;
}
.sticker-cat-btn.active  { background:rgba(94,176,238,.18); border-color:rgba(94,176,238,.4); color:var(--accent); }
.sticker-cat-btn:hover:not(.active) { background:rgba(255,255,255,.09); color:#fff; }

/* Sticker grid */
.sticker-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:4px; }
.sticker-emoji {
  font-size:1.7rem; line-height:1; padding:7px 0; border:none; cursor:pointer;
  background:rgba(255,255,255,.05); border-radius:12px; transition:transform .12s, background .12s;
}
.sticker-emoji:hover { transform:scale(1.25); background:rgba(255,255,255,.12); z-index:2; position:relative; }
.msg-emoji-bubble { background:none !important; border:none !important; box-shadow:none !important; padding:2px 0 !important; font-size:2.4rem !important; line-height:1.1; }
.sticker-img-btn {
  border:none; cursor:pointer; padding:4px; border-radius:12px;
  background:rgba(255,255,255,.05); transition:transform .12s, background .12s;
  display:flex; align-items:center; justify-content:center; aspect-ratio:1;
  font-size:1.7rem; line-height:1;
}
.sticker-img-btn:hover { transform:scale(1.18); background:rgba(255,255,255,.12); z-index:2; position:relative; }
.sticker-img-btn .sticker-img { width:100%; height:100%; padding:0; background:none; }
.sticker-img-btn.sticker-fallback img { display:none; }
.sticker-img  {
  width:100%; aspect-ratio:1; border-radius:10px; object-fit:contain;
  cursor:pointer; background:rgba(255,255,255,.04); padding:2px;
  transition:transform .12s,background .12s;
}
.sticker-img:hover { transform:scale(1.18); background:rgba(255,255,255,.1); z-index:2; position:relative; }
/* Image stickers in the chat render a bit larger, like real stickers. */
.msg-media-bubble .msg-media-img[alt="sticker"] { max-width:130px; max-height:130px; }

/* GIF search + grid */
.gif-search {
  width:100%; background:rgba(255,255,255,.06); border:1px solid var(--stroke);
  border-radius:10px; padding:7px 11px; color:#fff; font-family:inherit; font-size:.82rem;
  outline:none; margin-bottom:6px; transition:border-color .2s;
}
.gif-search:focus    { border-color:rgba(94,176,238,.5); }
.gif-search::placeholder { color:rgba(240,241,248,.28); }
.gif-grid  { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.gif-thumb {
  width:100%; aspect-ratio:1; border-radius:8px; object-fit:cover;
  cursor:pointer; background:rgba(255,255,255,.04);
  transition:transform .12s,filter .12s;
}
.gif-thumb:hover { transform:scale(1.04); filter:brightness(1.1); z-index:2; position:relative; }

/* Loading spinner */
.media-loading  { display:flex; align-items:center; justify-content:center; padding:24px; grid-column:1/-1; }
.media-spinner  { width:28px; height:28px; border-radius:50%; border:2.5px solid rgba(94,176,238,.2); border-top-color:var(--accent); animation:mspin .8s linear infinite; }
@keyframes mspin { to{transform:rotate(360deg)} }

/* Movie results hint */
.movie-results-hint { padding:20px; text-align:center; color:rgba(240,241,248,.35); font-size:.86rem; font-family:'Noto Naskh Arabic',system-ui,sans-serif; }

/* ── Movie picker modal ── */
.room-modal-overlay {
  position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.72);
  backdrop-filter:blur(10px); display:none; align-items:center; justify-content:center; padding:14px;
}
.room-modal-overlay.open { display:flex; }
.room-modal {
  width:min(560px,100%); background:rgba(11,13,24,.97); border:1px solid var(--stroke);
  border-radius:24px; padding:26px; max-height:82vh; overflow-y:auto;
  box-shadow:0 40px 80px rgba(0,0,0,.65); direction:rtl;
}
.room-modal h3 { font-size:1.2rem; font-weight:900; margin-bottom:16px; }
.movie-search-input {
  width:100%; background:rgba(255,255,255,.07); border:1px solid var(--stroke);
  border-radius:12px; padding:11px 15px; color:#fff; font-family:inherit; font-size:.92rem;
  outline:none; margin-bottom:12px;
}
.movie-search-input:focus { border-color:var(--accent); }
.movie-search-input::placeholder { color:rgba(240,241,248,.28); }
.movie-results { display:flex; flex-direction:column; gap:6px; }
.movie-result-item {
  display:flex; gap:11px; padding:9px 11px; border-radius:12px;
  background:rgba(255,255,255,.04); border:1px solid var(--stroke);
  cursor:pointer; transition:background .15s; align-items:center;
}
.movie-result-item:hover { background:rgba(255,255,255,.09); }
.movie-result-poster { width:36px; height:52px; object-fit:cover; border-radius:6px; flex-shrink:0; background:#1a1d2c; }
.movie-result-info  { flex:1; min-width:0; }
.movie-result-title { font-size:.88rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.movie-result-meta  { font-size:.74rem; color:rgba(240,241,248,.42); margin-top:2px; }

/* ── Responsive ── */
@media (max-width:768px) {
  .room-content { flex-direction:column; }
  .room-chat-panel { width:100% !important; height:46vh; min-height:340px; border-inline-start:none; border-top:1px solid var(--stroke); }
  /* Bigger, longer chat input box on phones */
  .chat-input-area { padding:10px 11px 14px; }
  .chat-textarea { font-size:1rem; padding:12px 14px; min-height:46px; max-height:120px; border-radius:14px; }
  .chat-send-btn { width:44px; height:44px; border-radius:13px; }
  .lobby-card  { padding:24px 16px; }
  .invite-code { font-size:1.5rem; letter-spacing:4px; }
  .btn-sm span { display:none; }
  .sticker-grid { grid-template-columns:repeat(4,1fr); }
  /* Topbar wraps to two rows so members (who joined) are always visible */
  .room-topbar { flex-wrap:wrap; padding:8px 10px; min-height:auto; row-gap:6px; }
  .room-topbar-left { order:2; flex-basis:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .room-topbar-actions { order:1; flex-basis:100%; justify-content:flex-end; }
  .room-topbar-title { max-width:140px; }
  .room-members-bar { flex-wrap:nowrap; }
  .member-pip { width:28px; height:28px; }
}
@media (max-width:380px) {
  .lobby-card { padding:20px 14px; }
  .sticker-grid { grid-template-columns:repeat(3,1fr); }
}

/* ═══ Kick button on messages (host only) ═══ */
.msg-row { position:relative; }
.msg-kick-btn {
  display:none; position:absolute; top:4px; right:-28px;
  width:22px; height:22px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,69,58,.75); color:#fff; align-items:center; justify-content:center;
  transition:background .15s, transform .12s;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
  z-index:10;
}
.msg-row:hover .msg-kick-btn { display:flex; }
.msg-kick-btn:hover { background:rgba(255,69,58,1); transform:scale(1.12); }

/* LTR: kick button on left for "other" messages */
html[dir="ltr"] .msg-other .msg-kick-btn { right:auto; left:-28px; }
html[dir="rtl"] .msg-other .msg-kick-btn { right:-28px; left:auto; }

/* ═══ Host member action menu ═══ */
.member-menu {
  position:fixed; z-index:3000; min-width:170px;
  background:rgba(20,18,28,.78);
  backdrop-filter:blur(28px) saturate(180%); -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,.16); border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.22);
  padding:7px; overflow:hidden;
}
.member-menu-name { font-size:.72rem; font-weight:800; color:rgba(255,255,255,.5); padding:6px 12px 8px; }
.member-menu button {
  display:block; width:100%; text-align:right; border:none; cursor:pointer;
  background:transparent; color:#fff; font-family:inherit; font-weight:700; font-size:.86rem;
  padding:10px 12px; border-radius:12px; transition:background .15s;
}
.member-menu button:hover { background:rgba(255,255,255,.12); }
.member-menu button.danger { color:#ff9d94; }
.member-menu button.danger:hover { background:rgba(255,69,58,.18); }

/* ═══ iOS-26 liquid-glass chat ═══ */
.room-chat-panel {
  background:linear-gradient(180deg, rgba(18,16,26,.55), rgba(8,8,12,.65)) !important;
  backdrop-filter:blur(30px) saturate(180%); -webkit-backdrop-filter:blur(30px) saturate(180%);
  border-inline-start:1px solid rgba(255,255,255,.1) !important;
}
.msg-bubble {
  font-weight:600 !important; letter-spacing:.1px;
  background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.07)) !important;
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 6px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.22);
}
.msg-me .msg-bubble {
  background:linear-gradient(135deg, rgba(94,176,238,.55), rgba(160,90,242,.4)) !important;
  border:1px solid rgba(255,255,255,.18);
}
.msg-name { font-weight:800 !important; }
.chat-textarea {
  background:rgba(255,255,255,.08) !important;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.14) !important; font-weight:600;
}
/* bold, crisp fonts across the room */
.room-topbar-title, .lobby-section-title, .room-label, .invite-code, .msg-name {
  letter-spacing:.2px;
}

/* ══════════════════════════════════════════════════════════════════════
   IN-ROOM BROWSER PANEL  — Premium Streaming Browser
   ══════════════════════════════════════════════════════════════════════ */

.room-browser-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  display: flex; align-items: flex-end; justify-content: center;
  /* visibility:hidden is required on iOS Safari — backdrop-filter elements
     with only opacity:0/pointer-events:none still intercept ALL touches,
     making every button under this overlay untappable. */
  visibility: hidden;
  opacity: 0; pointer-events: none;
  transition: opacity .3s cubic-bezier(.22,.9,.22,1), visibility 0s linear .3s;
}
.room-browser-overlay.open {
  visibility: visible;
  opacity: 1; pointer-events: all;
  transition: opacity .3s cubic-bezier(.22,.9,.22,1), visibility 0s linear 0s;
}

/* ── Panel shell ─────────────────────────────────────────────────────── */
.room-browser-panel {
  position: relative;
  width: 100%; max-width: 760px;
  height: 90vh;
  background: rgba(8, 9, 18, 0.88);
  backdrop-filter: blur(50px) saturate(220%) brightness(1.08);
  -webkit-backdrop-filter: blur(50px) saturate(220%) brightness(1.08);
  border: 1px solid rgba(255,255,255,.12);
  border-bottom: none;
  border-radius: 32px 32px 0 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow:
    0 -12px 80px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 .5px rgba(255,255,255,.06);
  transform: translateY(100%);
  transition: transform .36s cubic-bezier(.18,.98,.2,1);
}
.room-browser-panel::after {
  content: ''; pointer-events: none; z-index: 1;
  position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(ellipse 70% 30% at 50% 0%, rgba(94,176,238,.07) 0%, transparent 70%);
}
.room-browser-overlay.open .room-browser-panel { transform: translateY(0); }

/* Drag handle */
.room-browser-drag-handle {
  width: 36px; height: 4px;
  background: rgba(255,255,255,.18);
  border-radius: 999px;
  margin: 12px auto 0;
  flex-shrink: 0;
}

/* ── Header row: title + close ──────────────────────────────────────── */
.room-browser-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 10px;
  flex-shrink: 0;
}
.room-browser-title {
  font-size: 1rem; font-weight: 800; color: #fff; letter-spacing: -.2px;
}
.room-browser-close {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.65); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.room-browser-close:hover { background: rgba(255,255,255,.18); color: #fff; }

/* ── Tabs ────────────────────────────────────────────────────────────── */
.room-browser-tabs {
  display: flex; align-items: center; gap: 6px;
  padding: 0 18px 12px;
  flex-shrink: 0;
  overflow-x: auto;
}
.room-browser-tabs::-webkit-scrollbar { display: none; }
.rbt {
  flex-shrink: 0;
  font-size: .8rem; font-weight: 700; letter-spacing: .1px;
  padding: 7px 18px; border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.45);
  cursor: pointer; transition: all .18s;
  font-family: inherit;
}
.rbt:hover { background: rgba(255,255,255,.11); color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.2); }
.rbt.active {
  background: linear-gradient(135deg, #5eb0ee, #8ecaf5);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 3px 16px rgba(94,176,238,.45);
}

/* ── Search bar ─────────────────────────────────────────────────────── */
.room-browser-search-wrap {
  display: flex; align-items: center; gap: 10px;
  margin: 0 14px 12px;
  padding: 11px 14px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  flex-shrink: 0;
  transition: border-color .18s, background .18s;
}
.room-browser-search-wrap:focus-within {
  background: rgba(255,255,255,.1);
  border-color: rgba(94,176,238,.45);
  box-shadow: 0 0 0 3px rgba(94,176,238,.12);
}
.room-browser-search-icon { color: rgba(255,255,255,.3); flex-shrink: 0; }
.room-browser-search-input {
  flex: 1; background: none; border: none; outline: none;
  color: #fff; font-size: .9rem; font-family: inherit;
}
.room-browser-search-input::placeholder { color: rgba(255,255,255,.28); }
.room-browser-search-clear {
  background: rgba(255,255,255,.12); border: none; color: rgba(255,255,255,.55);
  cursor: pointer; padding: 0; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.room-browser-search-clear:hover { background: rgba(255,255,255,.22); color: #fff; }

/* ── Poster grid ─────────────────────────────────────────────────────── */
.room-browser-grid {
  flex: 1; overflow-y: auto;
  padding: 4px 14px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 14px;
  align-content: start;
  scroll-behavior: smooth;
}
.room-browser-grid::-webkit-scrollbar { width: 4px; }
.room-browser-grid::-webkit-scrollbar-track { background: transparent; }
.room-browser-grid::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12); border-radius: 4px;
}
.room-browser-grid::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.25); }

/* Spinner */
.room-browser-loading {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center;
  padding: 60px 20px;
}
.rb-spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid rgba(94,176,238,.18);
  border-top-color: #5eb0ee;
  animation: rb-spin .8s linear infinite;
}
@keyframes rb-spin { to { transform: rotate(360deg); } }

/* Empty state */
.room-browser-empty {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center;
  padding: 60px 20px; gap: 10px;
  color: rgba(255,255,255,.25); font-size: .88rem; text-align: center;
}
.room-browser-empty::before {
  content: '🎬';
  font-size: 2.4rem; opacity: .5; display: block;
}

/* ── Poster card ─────────────────────────────────────────────────────── */
.rb-card {
  position: relative;
  border-radius: 14px; overflow: hidden;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.22,.9,.22,1), box-shadow .2s;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  /* Card height is driven by the poster below (no aspect-ratio on the card —
     that was collapsing cards and overlapping posters in the grid). */
}
.rb-card::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.3) 45%, transparent 70%);
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.rb-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 16px 40px rgba(0,0,0,.6), 0 0 0 2px rgba(94,176,238,.5);
}
.rb-card:hover::before { opacity: 1; }
.rb-card:active { transform: translateY(-2px) scale(1.0); }

.rb-card img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;     /* fixed poster shape — img drives the card height */
  height: auto;
  object-fit: cover;
  transition: transform .3s cubic-bezier(.22,.9,.22,1);
  background: rgba(255,255,255,.05);
}
/* Fallback for engines without aspect-ratio support: keep a sane min height */
@supports not (aspect-ratio: 1) {
  .rb-card img { height: 195px; }
}
.rb-card:hover img { transform: scale(1.06); }

/* Card text overlay — visible on hover */
.rb-card-info {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  padding: 10px 10px 10px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .2s, transform .2s;
}
.rb-card:hover .rb-card-info {
  opacity: 1; transform: translateY(0);
}
.rb-card-title {
  font-size: .78rem; font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #fff; line-height: 1.3;
  text-shadow: 0 1px 6px rgba(0,0,0,.8);
}
.rb-card-meta {
  font-size: .68rem; color: rgba(255,255,255,.55);
  margin-top: 3px;
  display: flex; align-items: center; gap: 5px;
}
.rb-card-rating {
  color: #ffd700; font-weight: 700;
}

/* Always-visible title strip (no hover needed on touch) */
.rb-card-static {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  background: linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.55) 55%, transparent 100%);
  padding: 26px 9px 9px;
  transition: opacity .2s;
}
.rb-card:hover .rb-card-static { opacity: 0; }
.rb-card-static-title {
  font-size: .76rem; font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #fff; line-height: 1.3; text-shadow: 0 1px 4px rgba(0,0,0,.9);
}
.rb-card-static-year {
  font-size: .66rem; color: rgba(255,255,255,.55); margin-top: 2px; font-weight: 600;
}

/* ── Member hint footer ──────────────────────────────────────────────── */
.room-browser-member-hint {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 16px;
  font-size: .8rem; font-weight: 600;
  color: rgba(255,255,255,.45);
  background: rgba(94,176,238,.07);
  border-top: 1px solid rgba(94,176,238,.14);
  flex-shrink: 0;
}

/* ── Leader crown ─────────────────────────────────────────────────────── */
.member-pip { position: relative; }
.member-crown {
  position: absolute; top: -8px; right: -6px;
  font-size: .85rem; line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.7));
  pointer-events: none;
}
.msg-crown {
  font-size: .9rem; margin-inline-end: 3px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}

/* ── Image messages ───────────────────────────────────────────────────── */
.msg-media-img {
  max-width: 220px; max-height: 220px;
  border-radius: 10px; display: block;
  cursor: pointer;
}
.msg-media-img:hover { opacity: .9; }

/* ── Member cards (name + avatar in members bar) ──────────────────────── */
.room-members-bar {
  display: flex; align-items: flex-end; gap: 6px;
  flex-wrap: wrap; padding: 4px 0;
}
.member-card {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  cursor: default; transition: transform .18s;
  min-width: 40px;
}
.member-card:hover { transform: translateY(-3px); }
.member-card--leader .member-card-av {
  border-color: #ffd60a;
  box-shadow: 0 0 0 2px rgba(255,214,10,.25), 0 2px 10px rgba(0,0,0,.4);
}
.member-card-av {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.18);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  flex-shrink: 0;
}
.member-card-img { width: 100%; height: 100%; object-fit: cover; }
.member-card-emoji {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.member-card-emoji svg { width: 60%; height: 60%; }
.member-card-crown {
  position: absolute; bottom: -4px; right: -4px;
  font-size: .62rem; line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.7));
  pointer-events: none;
}
.member-card-name {
  font-size: .62rem; font-weight: 700;
  color: rgba(240,241,248,.55);
  max-width: 44px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
  text-align: center;
}
.member-card--leader .member-card-name { color: #ffd60a; }
@media (max-width: 600px) {
  .member-card-av { width: 30px; height: 30px; }
  .member-card-name { font-size: .58rem; max-width: 34px; }
}

/* ── Room voting / play-now countdown ───────────────────────────────────────── */
.wk-vote-overlay{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;background:rgba(4,5,9,.72);backdrop-filter:blur(6px)}
.wk-vote-card{background:linear-gradient(160deg,#13151d,#0b0d14);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:26px 24px;width:min(92vw,380px);text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.wk-vote-title{font-size:1.15rem;font-weight:800;color:#f0f1f8;margin-bottom:6px;direction:rtl}
.wk-vote-sub{font-size:.82rem;color:rgba(240,241,248,.55);margin-bottom:18px;direction:rtl}
.wk-vote-actions{display:flex;flex-direction:column;gap:10px}
.wk-vote-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03));color:#f0f1f8;font-size:.95rem;font-weight:800;cursor:pointer;transition:transform .12s cubic-bezier(.34,1.4,.5,1),box-shadow .12s,background .15s;direction:rtl;box-shadow:0 5px 0 rgba(0,0,0,.3),0 8px 16px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.22)}
.wk-vote-btn:hover{background:rgba(255,255,255,.13);transform:translateY(-2px);box-shadow:0 7px 0 rgba(0,0,0,.3),0 12px 22px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.28)}
.wk-vote-btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.18)}
.wk-vote-btn.primary{background:linear-gradient(180deg,#5eb0ee,#5eb0ee);border-color:transparent;color:#fff;box-shadow:0 5px 0 rgba(18,52,102,.55),0 9px 22px rgba(94,176,238,.4),inset 0 1px 0 rgba(255,255,255,.3)}
.wk-vote-btn.primary:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(18,52,102,.55),inset 0 1px 0 rgba(255,255,255,.2)}
.wk-vote-cancel{margin-top:14px;background:none;border:none;color:rgba(240,241,248,.4);font-size:.82rem;cursor:pointer}
.wk-vote-cancel:hover{color:rgba(240,241,248,.7)}

.wk-vote-bar{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:60;width:min(94%,440px)}
.wk-vote-ballot{background:rgba(13,15,22,.94);border:1px solid rgba(94,176,238,.3);border-radius:16px;padding:13px 15px;box-shadow:0 12px 32px rgba(0,0,0,.5);backdrop-filter:blur(10px)}
.wk-vote-ballot-head{display:flex;align-items:center;gap:8px;color:#8ecaf5;margin-bottom:9px;direction:rtl;flex-wrap:wrap}
.wk-vote-poster{width:34px;height:50px;border-radius:7px;object-fit:cover;flex-shrink:0;box-shadow:0 3px 10px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.14)}
.wk-vote-q{font-size:.9rem;color:#f0f1f8;font-weight:600}
.wk-vote-q b{color:#8ecaf5}
.wk-vote-meter{height:7px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden;margin-bottom:5px}
.wk-vote-meter-fill{height:100%;background:linear-gradient(90deg,#30d158,#7be08f);border-radius:6px;transition:width .35s}
.wk-vote-tally{display:flex;justify-content:space-between;font-size:.72rem;color:rgba(240,241,248,.55);margin-bottom:10px}
.wk-vote-btns{display:flex;gap:10px;perspective:600px}
.wk-vote-yes,.wk-vote-no{
  flex:1;padding:12px 9px;border-radius:13px;font-weight:800;font-size:.9rem;cursor:pointer;
  color:#f0f1f8;position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 5px 0 rgba(0,0,0,.32), 0 8px 16px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.28);
  transform:translateY(0);
  transition:transform .12s cubic-bezier(.34,1.4,.5,1), box-shadow .12s, background .18s, border-color .18s;
}
.wk-vote-yes:hover{background:linear-gradient(180deg,rgba(48,209,88,.34),rgba(48,209,88,.16));border-color:rgba(48,209,88,.7);color:#9bf3b8;transform:translateY(-2px);box-shadow:0 7px 0 rgba(20,90,45,.5),0 12px 22px rgba(48,209,88,.28),inset 0 1px 0 rgba(255,255,255,.35)}
.wk-vote-no:hover{background:linear-gradient(180deg,rgba(255,69,58,.32),rgba(255,69,58,.14));border-color:rgba(255,69,58,.7);color:#a8d8f8;transform:translateY(-2px);box-shadow:0 7px 0 rgba(18,52,102,.5),0 12px 22px rgba(255,69,58,.28),inset 0 1px 0 rgba(255,255,255,.35)}
.wk-vote-yes.sel{background:linear-gradient(180deg,#34d96b,#1fae53);border-color:rgba(48,209,88,.9);color:#fff;box-shadow:0 3px 0 rgba(20,90,45,.6),0 6px 14px rgba(48,209,88,.4),inset 0 1px 0 rgba(255,255,255,.4)}
.wk-vote-no.sel{background:linear-gradient(180deg,#8ecaf5,#e23b30);border-color:rgba(255,69,58,.9);color:#fff;box-shadow:0 3px 0 rgba(18,52,102,.6),0 6px 14px rgba(255,69,58,.4),inset 0 1px 0 rgba(255,255,255,.4)}
.wk-vote-yes:active,.wk-vote-no:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.2)}
.wk-vote-leader-row{display:flex;gap:8px;margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,.08)}
.wk-vote-close-pass,.wk-vote-close-cancel{flex:1;padding:9px;border-radius:11px;border:none;font-size:.76rem;font-weight:800;cursor:pointer;transition:transform .12s,box-shadow .12s}
.wk-vote-close-pass{background:linear-gradient(180deg,#5eb0ee,#5eb0ee);color:#fff;box-shadow:0 4px 0 rgba(18,52,102,.55),0 7px 14px rgba(94,176,238,.32),inset 0 1px 0 rgba(255,255,255,.3)}
.wk-vote-close-pass:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(18,52,102,.55),inset 0 1px 0 rgba(255,255,255,.2)}
.wk-vote-close-cancel{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));color:rgba(240,241,248,.7);box-shadow:0 4px 0 rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.2)}
.wk-vote-close-cancel:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.15)}

.wk-vote-count{display:flex;align-items:center;gap:14px;background:rgba(13,15,22,.94);border:1px solid rgba(94,176,238,.35);border-radius:16px;padding:13px 16px;box-shadow:0 12px 32px rgba(0,0,0,.5);backdrop-filter:blur(10px)}
.wk-vote-count-ring{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:900;color:#fff;flex-shrink:0;background:conic-gradient(#5eb0ee,#8ecaf5,#8ecaf5,#5eb0ee);box-shadow:0 0 0 0 rgba(94,176,238,.5);animation:wkVotePulse 1s infinite}
@keyframes wkVotePulse{0%{box-shadow:0 0 0 0 rgba(94,176,238,.5)}70%{box-shadow:0 0 0 12px rgba(94,176,238,0)}100%{box-shadow:0 0 0 0 rgba(94,176,238,0)}}
.wk-vote-count-title{font-size:.92rem;font-weight:800;color:#f0f1f8;direction:rtl}
.wk-vote-count-sub{font-size:.74rem;color:#8ecaf5;direction:rtl}

/* ── Member profile popup (click a member in the room) ──────────────────────── */
.mp-overlay{position:fixed;inset:0;z-index:9500;display:flex;align-items:center;justify-content:center;background:rgba(4,5,9,.7);backdrop-filter:blur(6px)}
.mp-card{position:relative;width:min(92vw,330px);background:linear-gradient(180deg,#13151d,#0b0d14);border:1px solid rgba(255,255,255,.1);border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.mp-banner{height:84px;background:var(--mp-banner-bg, linear-gradient(135deg,#5eb0ee,#8ecaf5,#8ecaf5))}
.mp-avatar{position:absolute;top:48px;left:20px;width:74px;height:74px;border-radius:50%;border:4px solid #0b0d14;overflow:visible;background:#1a1a2e;display:flex;align-items:center;justify-content:center}
.mp-avatar>img,.mp-avatar>.mp-emoji{width:100%;height:100%;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center}
.mp-avatar img{object-fit:cover;border-radius:50%}
.mp-avatar .mp-emoji svg{width:60%;height:60%}
.mp-online{position:absolute;bottom:2px;right:2px;width:16px;height:16px;border-radius:50%;background:#30d158;border:3px solid #0b0d14;box-shadow:0 0 7px rgba(48,209,88,.9);z-index:2}
.mp-body{padding:34px 20px 20px}
.mp-name{font-size:1.15rem;font-weight:800;color:#f0f1f8;direction:rtl;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mp-leader{background:linear-gradient(135deg,#ffd60a,#ff9500);color:#1a1200;font-size:.6rem;font-weight:900;padding:2px 7px;border-radius:6px;letter-spacing:.5px}
.mp-username{font-size:.86rem;color:rgba(240,241,248,.5);margin-top:2px}
.mp-username.mp-guest{color:rgba(240,241,248,.35);font-style:italic}
.mp-actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.mp-btn{flex:1;min-width:120px;text-align:center;padding:10px;border-radius:11px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#f0f1f8;font-weight:700;font-size:.85rem;cursor:pointer;text-decoration:none;transition:all .15s}
.mp-btn:hover{background:rgba(255,255,255,.1)}
.mp-btn.primary{background:linear-gradient(135deg,#5eb0ee,#8ecaf5);border-color:transparent;color:#fff}
.mp-close{position:absolute;top:10px;right:12px;width:30px;height:30px;border-radius:50%;border:none;background:rgba(0,0,0,.35);color:#fff;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.mp-close:hover{background:rgba(0,0,0,.6)}

/* ── Vote 10s timer / locked / waiting ──────────────────────────────────────── */
.wk-vote-timer{margin-inline-start:auto;background:linear-gradient(135deg,#5eb0ee,#8ecaf5);color:#fff;font-weight:900;font-size:.78rem;min-width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 0 0 rgba(94,176,238,.5);animation:wkVoteTick 1s infinite}
@keyframes wkVoteTick{0%{box-shadow:0 0 0 0 rgba(94,176,238,.5)}70%{box-shadow:0 0 0 8px rgba(94,176,238,0)}100%{box-shadow:0 0 0 0 rgba(94,176,238,0)}}
.wk-vote-ballot.locked{border-color:rgba(255,214,10,.4)}
.wk-vote-waiting{text-align:center;color:rgba(255,214,10,.85);font-size:.82rem;font-weight:700;padding:8px}


/* ═══════════════════════════════════════════════════════════════════════
   CHAT ENHANCEMENTS — typing indicator, reactions, reply, context menu,
   3D movie backdrop, sticky chat profile header
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 3D Blurry movie backdrop in room ── */
#roomMovieBg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden; border-radius: 0;
}
#roomMovieBg .rmb-img {
  position: absolute; inset: -6%; background-size: cover; background-position: center;
  filter: blur(28px) saturate(1.3) brightness(.35);
  transform: scale(1.12);
  animation: rmbDrift 30s ease-in-out infinite alternate;
  transition: background-image 1.2s ease;
}
#roomMovieBg .rmb-grad {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(94,176,238,.08) 0%, rgba(4,5,9,.7) 70%);
}
@keyframes rmbDrift {
  0%   { transform: scale(1.12) translate(0,0); }
  50%  { transform: scale(1.2) translate(-2%,-1.5%); }
  100% { transform: scale(1.14) translate(2%,1%); }
}

/* ── Sticky chat user profile header ── */
.chat-my-profile {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; border-bottom: 1px solid var(--stroke);
  flex-shrink: 0; background: rgba(8,9,18,.9);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  position: sticky; top: 0; z-index: 10;
}
.chat-my-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  overflow: hidden; border: 2px solid rgba(94,176,238,.4);
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.07);
  box-shadow: 0 0 0 3px rgba(94,176,238,.12);
}
.chat-my-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-my-avatar svg { width: 70%; height: 70%; }
.chat-my-name {
  font-size: .82rem; font-weight: 800; color: rgba(240,241,248,.9);
  font-family: 'Noto Kufi Arabic', 'Noto Naskh Arabic', sans-serif;
  direction: rtl;
}
.chat-my-status {
  font-size: .68rem; color: rgba(240,241,248,.35); margin-top: 1px;
}

/* ── Typing indicator ── */
#typingIndicator {
  min-height: 22px; padding: 2px 12px;
  font-size: .72rem; color: rgba(240,241,248,.38);
  font-style: italic; flex-shrink: 0; direction: rtl;
  display: none;
  font-family: 'Noto Kufi Arabic', 'Noto Naskh Arabic', sans-serif;
}
#typingIndicator.show { display: flex !important; align-items: center; gap: 6px; }
.typing-dots { display: inline-flex; gap: 3px; margin-inline-start: 4px; vertical-align: middle; }
.typing-dots span {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(240,241,248,.45);
  display: inline-block;
  animation: typingBounce .9s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: .15s; }
.typing-dots span:nth-child(3) { animation-delay: .30s; }
@keyframes typingBounce {
  0%,100% { transform: translateY(0); opacity: .45; }
  50% { transform: translateY(-4px); opacity: 1; }
}

/* ── Message context menu ── */
.msg-ctx-menu {
  position: fixed; z-index: 9900;
  background: rgba(14,15,26,.97); border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px; padding: 5px 0;
  box-shadow: 0 16px 48px rgba(0,0,0,.7), 0 4px 12px rgba(0,0,0,.4);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  min-width: 168px; animation: ctxIn .14s cubic-bezier(.22,.9,.22,1);
}
@keyframes ctxIn { from { opacity:0; transform:scale(.92) translateY(-4px); } }
.msg-ctx-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; font-size: .84rem; font-weight: 700;
  color: rgba(240,241,248,.85); cursor: pointer;
  transition: background .12s; direction: rtl;
  font-family: 'Noto Kufi Arabic', 'Noto Naskh Arabic', sans-serif;
}
.msg-ctx-item:hover { background: rgba(255,255,255,.08); }
.msg-ctx-item.danger { color: #ff9d94; }
.msg-ctx-item.danger:hover { background: rgba(94,176,238,.12); }
.msg-ctx-icon { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; }

/* ── Reaction strip ── */
.msg-reactions {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;
}
.msg-reaction-btn {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px; padding: 2px 8px;
  font-size: .8rem; font-weight: 700; cursor: pointer;
  transition: background .15s, transform .12s;
  color: rgba(240,241,248,.8);
}
.msg-reaction-btn:hover { background: rgba(94,176,238,.18); border-color: rgba(94,176,238,.35); transform: scale(1.08); }
.msg-reaction-btn.mine { background: rgba(94,176,238,.22); border-color: rgba(94,176,238,.45); }
.msg-reaction-count { font-size: .72rem; color: rgba(240,241,248,.5); }

/* ── Reaction picker ── */
.reaction-picker {
  display: flex; gap: 4px; padding: 6px 8px;
  background: rgba(14,15,26,.97); border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.6);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  position: fixed; z-index: 9950;
  animation: ctxIn .14s cubic-bezier(.22,.9,.22,1);
}
.reaction-picker-em {
  font-size: 1.25rem; cursor: pointer; padding: 2px 3px; border-radius: 8px;
  transition: transform .15s, background .12s;
}
.reaction-picker-em:hover { transform: scale(1.3); background: rgba(255,255,255,.1); }

/* ── Reply preview bar ── */
.reply-preview-bar {
  display: none; padding: 7px 12px; margin-bottom: 4px;
  background: rgba(94,176,238,.1); border-left: 3px solid var(--accent);
  border-radius: 10px 10px 0 0; direction: rtl;
  font-size: .78rem; color: rgba(240,241,248,.6);
  font-family: 'Noto Kufi Arabic', 'Noto Naskh Arabic', sans-serif;
}
.reply-preview-bar.show { display: flex; align-items: center; gap: 8px; }
.reply-preview-name { font-weight: 800; color: var(--accent); margin-inline-end: 4px; }
.reply-preview-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-preview-close {
  flex-shrink: 0; background: none; border: none; color: rgba(240,241,248,.4);
  cursor: pointer; font-size: 1rem; padding: 0 4px; line-height: 1;
  transition: color .15s;
}
.reply-preview-close:hover { color: rgba(240,241,248,.9); }

/* ── Reply quote inside bubble ── */
.msg-reply-quote {
  border-inline-start: 2px solid rgba(94,176,238,.5);
  padding: 3px 8px; margin-bottom: 5px; border-radius: 4px;
  background: rgba(255,255,255,.06);
  font-size: .75rem; color: rgba(240,241,248,.5);
  direction: rtl; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-reply-quote-name { font-weight: 800; color: rgba(94,176,238,.85); margin-bottom: 1px; }

/* ── Msg kick btn — keep aligned ── */
.msg-kick-btn {
  opacity: 0; flex-shrink: 0;
  background: none; border: none; color: rgba(94,176,238,.7);
  cursor: pointer; padding: 3px; border-radius: 6px; transition: opacity .15s;
}
.msg-row:hover .msg-kick-btn { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════
   NEW STYLES — Episode Picker, Suggestions, Typing, Ambient, Fixes
   ══════════════════════════════════════════════════════════════════ */

/* ── Typing indicator ──────────────────────────────────────────── */
.typing-indicator {
  height: 22px; padding: 0 14px; display: flex; align-items: center;
  gap: 6px; font-size: .78rem; color: rgba(240,241,248,.52);
  font-style: italic; direction: rtl;
  font-family: 'Noto Kufi Arabic', 'Noto Naskh Arabic', sans-serif;
  transition: opacity .2s;
}
.typing-indicator:empty { height: 0; }
.typing-dots { display: inline-flex; gap: 3px; align-items: center; }
.typing-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: .6; animation: tdot 1.2s infinite; }
.typing-dot:nth-child(2) { animation-delay: .2s; }
.typing-dot:nth-child(3) { animation-delay: .4s; }
@keyframes tdot { 0%,80%,100%{transform:scale(1);opacity:.6} 40%{transform:scale(1.4);opacity:1} }

/* ── Ambient background color from poster ──────────────────────── */
#roomMovieBg.has-ambient {
  --amb-r: 100; --amb-g: 80; --amb-b: 180;
  background-color: rgba(var(--amb-r,100), var(--amb-g,80), var(--amb-b,180), 0.1);
  box-shadow: inset 0 0 120px rgba(var(--amb-r,100), var(--amb-g,80), var(--amb-b,180), 0.15), 0 0 60px rgba(var(--amb-r,100), var(--amb-g,80), var(--amb-b,180), 0.1);
}

/* ── Episode/Season Picker modal ───────────────────────────────── */
.ep-modal-overlay {
  position: fixed; inset: 0; z-index: 10500; display: flex; align-items: center; justify-content: center;
  background: rgba(4,5,9,.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.ep-modal-overlay.open { opacity: 1; pointer-events: all; }
.ep-modal {
  width: min(96vw, 500px); max-height: 80vh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #16182a, #0d0f1c);
  border: 1px solid rgba(255,255,255,.12); border-radius: 20px;
  box-shadow: 0 32px 80px rgba(0,0,0,.7); overflow: hidden;
}
.ep-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.ep-modal-title { font-size: 1.05rem; font-weight: 800; color: #f0f1f8; direction: rtl; }
.ep-modal-close { background: none; border: none; color: rgba(240,241,248,.5); font-size: 1.5rem; cursor: pointer; padding: 2px 8px; border-radius: 8px; transition: color .15s; }
.ep-modal-close:hover { color: #f0f1f8; }
.ep-season-tabs { display: flex; gap: 6px; padding: 10px 14px; overflow-x: auto; flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.ep-s-tab { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); color: rgba(240,241,248,.6); font-family: inherit; font-size: .82rem; font-weight: 700; padding: 6px 14px; border-radius: 20px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.ep-s-tab.active { background: rgba(94,176,238,.25); border-color: rgba(94,176,238,.5); color: #f0f1f8; }
.ep-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.ep-item { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid rgba(255,255,255,.04); transition: background .12s; direction: rtl; }
.ep-item:hover { background: rgba(255,255,255,.05); }
.ep-item-num { width: 36px; font-size: .8rem; font-weight: 900; color: var(--accent); flex-shrink: 0; text-align: center; }
.ep-item-info { flex: 1; }
.ep-item-title { font-size: .9rem; font-weight: 700; color: #f0f1f8; }
.ep-item-date { font-size: .75rem; color: rgba(240,241,248,.4); margin-top: 2px; }
.ep-item-play { background: rgba(94,176,238,.2); border: 1px solid rgba(94,176,238,.4); color: var(--accent); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 1rem; flex-shrink: 0; transition: background .15s, transform .12s; }
.ep-item-play:hover { background: rgba(94,176,238,.35); transform: scale(1.1); }
.ep-loading, .ep-error { display: flex; align-items: center; justify-content: center; padding: 40px; color: rgba(240,241,248,.4); font-size: .9rem; }
.ep-spinner { width: 28px; height: 28px; border: 3px solid rgba(94,176,238,.2); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Movie-end Suggestions overlay ────────────────────────────── */
.sugg-overlay {
  position: absolute; inset: 0; z-index: 300; display: flex; align-items: flex-end;
  background: linear-gradient(to top, rgba(4,5,9,.96) 0%, rgba(4,5,9,.7) 60%, transparent 100%);
  opacity: 0; pointer-events: none; transition: opacity .35s;
}
.sugg-overlay.open { opacity: 1; pointer-events: all; }
.sugg-panel { width: 100%; padding: 20px; }
.sugg-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sugg-title { font-size: 1rem; font-weight: 800; color: #f0f1f8; direction: rtl; }
.sugg-close { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); color: #f0f1f8; font-size: 1.1rem; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; transition: background .15s; }
.sugg-close:hover { background: rgba(255,255,255,.2); }
.sugg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; max-height: 200px; overflow-y: auto; }
.sugg-card { border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); transition: transform .2s, border-color .15s; cursor: default; }
.sugg-card:hover { transform: translateY(-3px); border-color: rgba(94,176,238,.4); }
.sugg-card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; }
.sugg-card-info { padding: 5px 6px; }
.sugg-card-title { font-size: .74rem; font-weight: 700; color: #f0f1f8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; }
.sugg-card-year { font-size: .68rem; color: rgba(240,241,248,.4); }
.sugg-loading, .sugg-empty { grid-column: 1/-1; display: flex; align-items: center; justify-content: center; padding: 30px; color: rgba(240,241,248,.4); font-size: .88rem; }
.sugg-spinner { width: 24px; height: 24px; border: 3px solid rgba(94,176,238,.2); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }

/* ── Mobile chat visibility fix ────────────────────────────────── */
@media (max-width: 768px) {
  .room-chat-panel {
    flex-basis: auto !important; width: 100% !important;
    height: 42vh; min-height: 280px; max-height: 60vh;
    position: relative; display: flex !important;
    flex-direction: column;
  }
  .room-chat-panel.collapsed { height: 0 !important; min-height: 0 !important; overflow: hidden; }
  .chat-messages { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* ── Landscape phone — movie + chat side by side (chat stays visible) ──────
   Previously chat was hidden in landscape, which is why rotating the phone made
   it disappear. Now the video takes the larger left area and chat docks on the
   side as a usable column. It can still be collapsed with the chat toggle. */
@media (max-width: 950px) and (orientation: landscape) and (max-height: 540px) {
  .room-content { flex-direction: row !important; }
  .room-main-panel { flex: 1 1 64% !important; height: 100% !important; min-height: 0 !important; }
  #movieFrame { width: 100%; height: 100%; }
  .room-chat-panel {
    display: flex !important; flex-direction: column !important;
    width: 36% !important; max-width: 340px; min-width: 220px;
    height: 100% !important; min-height: 0 !important; max-height: none !important;
    flex: 0 0 36% !important;
    border-top: none !important; border-inline-start: 1px solid rgba(255,255,255,.1) !important;
  }
  .room-chat-panel.collapsed {
    width: 0 !important; min-width: 0 !important; flex-basis: 0 !important;
    overflow: hidden !important; border: none !important;
  }
  .chat-messages { flex: 1 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
  /* Keep the chat toggle reachable in landscape so it can be hidden if wanted. */
  .chat-toggle-btn, #chatToggleFloat { display: flex !important; }
}

/* ── rooms.php banner background fix ──────────────────────────── */
.mp-banner { background: var(--mp-banner-bg, linear-gradient(135deg,#5eb0ee,#8ecaf5,#8ecaf5)); }

/* ── Mobile chat visibility fix v2 ──────────────────────────────── */
@media (max-width: 768px) {
  .room-main-panel { min-height: 240px; flex-shrink: 0; }
  .room-chat-panel {
    display: flex !important; flex-direction: column !important;
    height: 48vh !important; min-height: 300px !important;
    max-height: 65vh; width: 100% !important;
    flex-shrink: 0 !important; flex-basis: auto !important;
    border-top: 1px solid rgba(255,255,255,.1) !important;
  }
  .room-chat-panel.collapsed { height: 0 !important; min-height: 0 !important; overflow: hidden !important; }
  .chat-messages { flex: 1 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
  .chat-textarea { font-size: 1rem !important; min-height: 48px !important; padding: 12px 14px !important; }
  .chat-input-area { padding: 10px 11px 16px !important; }
}

@keyframes slideUpFade { from { transform: translateY(60px); opacity:0; } to { transform:translateY(0); opacity:1; } }

/* ── Mobile browser grid — 2 columns, proper poster sizing ──────── */
@media (max-width: 600px) {
  .room-browser-panel {
    height: 92vh;
    border-radius: 24px 24px 0 0;
  }
  .room-browser-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    padding: 4px 10px 24px;
  }
  .rb-card img { aspect-ratio: 2 / 3; }
  .rb-card-static-title { font-size: .68rem; }
  .rb-card-static-year  { font-size: .6rem; }
  .rb-card-title { font-size: .72rem; }
  .rb-card-meta  { font-size: .64rem; }
  .room-browser-header { padding: 6px 12px 10px; }
  .room-browser-title { font-size: .95rem; }
  .room-browser-tabs { gap: 4px; padding: 0 10px 10px; }
  .room-browser-tab { font-size: .74rem; padding: 6px 12px; }
  .room-browser-search-wrap { margin: 0 10px 10px; }
}

/* Baby-blue theme: dark ink on solid light-accent fills */
.btn-room-primary, .room-tab.active, .chat-send-btn, .copy-code-btn { color: #062033; }
.chat-send-btn svg, .btn-room-primary svg { fill: #062033; }

/* ══════════════════════════════════════════════════════════════════════════
   PRESENCE BEAD — 3D online / watching indicator
   A layered sphere (rim light, core, inner shadow, cast glow) instead of a
   flat green circle, so it still reads as a physical bead on a 4K panel.
   ══════════════════════════════════════════════════════════════════════════ */
.wk-dot {
  position: absolute; bottom: 1px; inset-inline-end: 1px;
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 3; pointer-events: none;
  border: 2.5px solid #0b0d14;
  background:
    radial-gradient(circle at 32% 26%, #eaffe9 0%, #6df08d 34%, #30d158 62%, #12903b 100%);
  box-shadow:
    0 0 0 .5px rgba(0,0,0,.55),
    0 2px 5px rgba(0,0,0,.55),
    0 0 10px rgba(48,209,88,.75),
    inset 0 1px 1.5px rgba(255,255,255,.85),
    inset 0 -2px 3px rgba(0,0,0,.42);
}
/* Specular highlight — the small glint that sells the sphere */
.wk-dot::after {
  content: ""; position: absolute; top: 14%; left: 20%;
  width: 34%; height: 28%; border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,0));
  filter: blur(.3px);
}

/* Watching state — baby-blue bead carrying a play glyph */
.wk-dot--watching {
  width: 19px; height: 19px;
  background:
    radial-gradient(circle at 32% 26%, #f2faff 0%, #a8d8f8 30%, #5eb0ee 62%, #1c5f9c 100%);
  box-shadow:
    0 0 0 .5px rgba(0,0,0,.55),
    0 2px 6px rgba(0,0,0,.55),
    0 0 14px rgba(94,176,238,.85),
    inset 0 1px 1.5px rgba(255,255,255,.9),
    inset 0 -2px 4px rgba(0,0,0,.45);
  animation: wkDotBreathe 2.6s ease-in-out infinite;
}
.wk-dot-play {
  position: relative; z-index: 1;
  width: 62%; height: 62%; fill: #06263f;
  filter: drop-shadow(0 .5px 0 rgba(255,255,255,.55));
}
@keyframes wkDotBreathe {
  0%, 100% { box-shadow: 0 0 0 .5px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.55), 0 0 12px rgba(94,176,238,.7), inset 0 1px 1.5px rgba(255,255,255,.9), inset 0 -2px 4px rgba(0,0,0,.45); }
  50%      { box-shadow: 0 0 0 .5px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.55), 0 0 20px rgba(94,176,238,1),  inset 0 1px 1.5px rgba(255,255,255,.95), inset 0 -2px 4px rgba(0,0,0,.45); }
}
@media (prefers-reduced-motion: reduce) { .wk-dot--watching { animation: none; } }

/* Sizing per context */
.member-card-dot { width: 13px; height: 13px; border-width: 2px; bottom: -1px; inset-inline-end: -1px; }
.member-card-dot.wk-dot--watching { width: 15px; height: 15px; }
.mp-dot { width: 20px; height: 20px; border-width: 3.5px; bottom: 1px; inset-inline-end: 1px; }
.mp-dot.wk-dot--watching { width: 23px; height: 23px; }
/* The bead sits on the avatar, which must not clip it */
.member-card-av { overflow: visible; }
.member-card-av > img, .member-card-av > .member-card-emoji { border-radius: 50%; overflow: hidden; }
/* Legacy flat dot — superseded by .wk-dot */
.mp-online { display: none; }

/* ── Chat avatars are tappable (they open the profile card) ─────────────── */
.msg-avatar--tappable { cursor: pointer; transition: transform .16s cubic-bezier(.34,1.4,.5,1), box-shadow .16s; }
.msg-avatar--tappable:hover {
  transform: scale(1.09);
  box-shadow: 0 4px 16px rgba(0,0,0,.6), 0 0 0 2px rgba(94,176,238,.55), inset 0 1px 0 rgba(255,255,255,.2);
}
.msg-avatar--tappable:active { transform: scale(.96); }

/* ── Profile card: bio + live stats ─────────────────────────────────────── */
.mp-bio {
  margin-top: 8px; font-size: .82rem; line-height: 1.55;
  color: rgba(240,241,248,.62); direction: rtl;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.mp-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 7px; margin-top: 15px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.09); direction: rtl;
}
.mp-stat {
  padding: 9px 5px; border-radius: 12px; text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 4px 12px rgba(0,0,0,.28);
}
.mp-stat-num {
  font-size: 1.02rem; font-weight: 900; line-height: 1.25;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #cfe9ff, #5eb0ee);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #8ecaf5;
}
.mp-stat-num--sm { font-size: .78rem; line-height: 1.7; }
.mp-stat-lbl { font-size: .62rem; font-weight: 700; color: rgba(240,241,248,.42); margin-top: 2px; }
.mp-stats-loading { display: flex; gap: 5px; justify-content: center; grid-column: 1/-1; padding: 10px 0; }
.mp-stats-loading span {
  width: 6px; height: 6px; border-radius: 50%; background: rgba(94,176,238,.55);
  animation: mpDots 1.1s ease-in-out infinite;
}
.mp-stats-loading span:nth-child(2) { animation-delay: .15s; }
.mp-stats-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes mpDots { 0%,100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
/* Banner gets a soft floor so light images never fight the avatar ring */
.mp-banner { position: relative; }
.mp-banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(11,13,20,.72) 100%);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   CHAT IMAGE LIGHTBOX
   ══════════════════════════════════════════════════════════════════════════ */
.msg-media-img--zoom { cursor: zoom-in; transition: transform .16s, box-shadow .16s; }
.msg-media-img--zoom:hover { transform: scale(1.03); box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.chat-lightbox {
  position: fixed; inset: 0; z-index: 9800;
  display: flex; align-items: center; justify-content: center;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  background: rgba(3,4,8,.9);
  backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .22s ease, visibility 0s linear .22s;
}
.chat-lightbox.open {
  visibility: visible; opacity: 1; pointer-events: all;
  transition: opacity .22s ease, visibility 0s linear 0s;
}
.chat-lightbox-img {
  max-width: 100%; max-height: 100%;
  border-radius: 16px; object-fit: contain;
  box-shadow: 0 40px 90px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.09);
  transform: scale(.96); transition: transform .24s cubic-bezier(.2,.9,.3,1.15);
}
.chat-lightbox.open .chat-lightbox-img { transform: scale(1); }
.chat-lightbox-close {
  position: absolute; top: max(14px, env(safe-area-inset-top)); inset-inline-end: 14px;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer; z-index: 2;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: background .15s, transform .15s;
}
.chat-lightbox-close:hover { background: rgba(255,255,255,.2); transform: scale(1.06); }

/* ══════════════════════════════════════════════════════════════════════════
   BROWSE POLISH — deeper glass, crisper posters, play affordance
   ══════════════════════════════════════════════════════════════════════════ */
.room-browser-panel {
  box-shadow: 0 -30px 90px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.10);
}
.rb-card {
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 8px 22px rgba(0,0,0,.38);
}
.rb-card img {
  /* Keep posters sharp when the grid upscales them on large displays */
  image-rendering: -webkit-optimize-contrast;
  backface-visibility: hidden;
}
.rb-card:hover {
  border-color: rgba(94,176,238,.42);
  box-shadow: 0 20px 44px rgba(0,0,0,.6), 0 0 0 1px rgba(94,176,238,.28);
}
/* Play affordance that fades in with the hover overlay */
.rb-card-play {
  position: absolute; top: 50%; left: 50%;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #06263f; pointer-events: none; z-index: 2;
  background: radial-gradient(circle at 34% 28%, #ffffff, #a8d8f8 55%, #5eb0ee 100%);
  box-shadow: 0 8px 22px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -3px 6px rgba(0,0,0,.28);
  opacity: 0; transform: scale(.7);
  transition: opacity .2s ease, transform .22s cubic-bezier(.34,1.4,.5,1);
}
.rb-card-play svg { width: 55%; height: 55%; margin-inline-start: 3px; }
.rb-card:hover .rb-card-play { opacity: 1; transform: scale(1); }
.rb-card-rating { display: inline-flex; align-items: center; gap: 4px; }
.rb-star { width: 12px; height: 12px; color: #ffd54a; flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .rb-card-play { transition: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   KURDISTAN FLAG EMOJI
   Unicode has no Kurdistan flag, so it travels as the token :krd: and is drawn
   as the supplied PNG inline.

   The artwork is a tightly-cropped wide flag (347x182, ~1.91:1), so it is
   sized by HEIGHT with width:auto. Forcing it into a square box would
   letterbox it and make it read noticeably smaller than the emoji beside it.
   Height is in `em`, so it tracks the surrounding font size everywhere —
   bubbles, reactions, the picker — and its visual height lands level with
   neighbouring emoji, which is what "same size" means for a wide flag.
   ══════════════════════════════════════════════════════════════════════════ */
.wk-emoji {
  display: inline-block;
  height: 1.12em; width: auto;
  vertical-align: -.22em;
  margin: 0 .06em;
  user-select: none; -webkit-user-drag: none;
}
/* A message made only of flags renders them large, like a single-emoji message */
.msg-emoji-bubble .wk-emoji { height: 1.6em; vertical-align: -.3em; }

/* Toolbar button that inserts the flag, sitting next to the GIF button.
   The button widens to fit the flag's aspect rather than cropping it. */
.chat-extra-btn--krd { padding: 0 4px; width: auto; min-width: 34px; overflow: visible; }
.chat-extra-btn--krd img {
  height: 17px; width: auto; display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
  transition: transform .15s cubic-bezier(.34,1.4,.5,1);
}
.chat-extra-btn--krd:hover img  { transform: scale(1.12); }
.chat-extra-btn--krd:active img { transform: scale(.94); }

/* ── Reaction strip ────────────────────────────────────────────────────── */
.msg-reaction-btn {
  display: inline-flex; align-items: center; gap: 4px;
  line-height: 1; font-family: inherit;
}
.msg-reaction-btn .wk-emoji { height: 1.05em; width: auto; vertical-align: -.18em; margin: 0; }
.msg-reaction-btn.mine { box-shadow: inset 0 0 0 1px rgba(94,176,238,.4); }
.reaction-picker-em {
  display: inline-flex; align-items: center; justify-content: center;
}
.reaction-picker-em .wk-emoji { height: 1.15em; width: auto; vertical-align: middle; margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   LIVE MEMBER COUNT — how many people are in the room right now
   Fed by room_get_members(), which only returns members seen in the last 30s,
   and refreshed by the SSE state frame about once a second.
   ══════════════════════════════════════════════════════════════════════════ */
.room-topbar-titlerow {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.room-member-count {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px 3px 8px; border-radius: 999px;
  font-size: .74rem; font-weight: 800; line-height: 1.5;
  font-variant-numeric: tabular-nums;
  color: #cfe9ff;
  background: linear-gradient(180deg, rgba(94,176,238,.24), rgba(94,176,238,.10));
  border: 1px solid rgba(94,176,238,.34);
  box-shadow:
    0 3px 10px rgba(0,0,0,.34),
    0 0 14px rgba(94,176,238,.16),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -2px 4px rgba(0,0,0,.22);
  backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%);
  white-space: nowrap; flex-shrink: 0;
}
.room-member-count svg { width: 13px; height: 13px; opacity: .85; flex-shrink: 0; }

/* Pulse when someone joins or leaves so the change is noticeable */
@keyframes rmcPulse {
  0%   { transform: scale(1);    box-shadow: 0 3px 10px rgba(0,0,0,.34), 0 0 0 0 rgba(94,176,238,.55), inset 0 1px 0 rgba(255,255,255,.28); }
  45%  { transform: scale(1.09); box-shadow: 0 3px 10px rgba(0,0,0,.34), 0 0 0 7px rgba(94,176,238,0),  inset 0 1px 0 rgba(255,255,255,.28); }
  100% { transform: scale(1);    box-shadow: 0 3px 10px rgba(0,0,0,.34), 0 0 0 0 rgba(94,176,238,0),    inset 0 1px 0 rgba(255,255,255,.28); }
}
.room-member-count.rmc-pulse { animation: rmcPulse .55s cubic-bezier(.34,1.4,.5,1); }
@media (prefers-reduced-motion: reduce) { .room-member-count.rmc-pulse { animation: none; } }

@media (max-width: 600px) {
  .room-member-count { font-size: .68rem; padding: 2px 8px 2px 6px; }
  .room-member-count svg { width: 11px; height: 11px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PRESENCE BEAD v2 — a real sphere, not a glowing blur
   The previous version leaned on a wide outer glow, which read as a soft
   smudge at small sizes. This one keeps the glow tight and does the 3D work
   with geometry: a dark rim, a lit upper-left face, a shadowed lower-right
   face, a bounced light at the bottom edge, and one small hard specular.
   ══════════════════════════════════════════════════════════════════════════ */
.wk-dot {
  position: absolute; bottom: 0; inset-inline-end: 0;
  width: 15px; height: 15px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 3; pointer-events: none;
  border: 2px solid #0b0d14;
  background:
    /* bounced light along the bottom rim */
    radial-gradient(circle at 62% 92%, rgba(180,255,200,.75) 0%, rgba(180,255,200,0) 42%),
    /* core sphere: lit top-left → saturated middle → dark bottom-right */
    radial-gradient(circle at 34% 28%, #d8ffdc 0%, #7bf39a 22%, #34d85e 52%, #159c3e 78%, #0a6b29 100%);
  box-shadow:
    0 1px 3px rgba(0,0,0,.65),
    0 0 7px rgba(48,209,88,.55),
    inset 0 -2px 3px rgba(0,0,0,.38),
    inset 0 1px 1px rgba(255,255,255,.5);
}
/* Hard specular highlight — small, bright, offset. This is what makes the eye
   read "sphere" instead of "circle". */
.wk-dot::after {
  content: ""; position: absolute; top: 15%; left: 22%;
  width: 30%; height: 24%; border-radius: 50%;
  background: radial-gradient(ellipse at 40% 35%, #ffffff 0%, rgba(255,255,255,.9) 45%, rgba(255,255,255,0) 100%);
}
/* Contact shadow under the bead so it sits ON the avatar rather than beside it */
.wk-dot::before {
  content: ""; position: absolute; inset: -1px;
  border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.28);
}

.wk-dot--watching {
  width: 18px; height: 18px;
  background:
    radial-gradient(circle at 62% 92%, rgba(190,230,255,.7) 0%, rgba(190,230,255,0) 42%),
    radial-gradient(circle at 34% 28%, #eaf7ff 0%, #b6dcfa 20%, #5eb0ee 52%, #2272b5 78%, #12456f 100%);
  box-shadow:
    0 1px 3px rgba(0,0,0,.65),
    0 0 9px rgba(94,176,238,.6),
    inset 0 -2px 3px rgba(0,0,0,.38),
    inset 0 1px 1px rgba(255,255,255,.55);
  animation: wkDotBreathe 2.8s ease-in-out infinite;
}
.wk-dot-play {
  position: relative; z-index: 1;
  width: 58%; height: 58%; fill: #08304f;
  filter: drop-shadow(0 .5px 0 rgba(255,255,255,.6));
}
@keyframes wkDotBreathe {
  0%, 100% { box-shadow: 0 1px 3px rgba(0,0,0,.65), 0 0 8px  rgba(94,176,238,.5), inset 0 -2px 3px rgba(0,0,0,.38), inset 0 1px 1px rgba(255,255,255,.55); }
  50%      { box-shadow: 0 1px 3px rgba(0,0,0,.65), 0 0 15px rgba(94,176,238,.85), inset 0 -2px 3px rgba(0,0,0,.38), inset 0 1px 1px rgba(255,255,255,.55); }
}

.member-card-dot { width: 12px; height: 12px; border-width: 1.5px; bottom: -1px; inset-inline-end: -1px; }
.member-card-dot.wk-dot--watching { width: 14px; height: 14px; }
.mp-dot { width: 19px; height: 19px; border-width: 3px; }
.mp-dot.wk-dot--watching { width: 22px; height: 22px; }

/* ══════════════════════════════════════════════════════════════════════════
   REACTIONS — anchored so they can never shove the message sideways
   The strip used to sit in the body's flex flow, so three pills made the body
   wider than the bubble; the bubble stayed pinned to one edge and the name to
   the other, and the whole message appeared to slide right. Taking the strip
   out of flow means .msg-body is sized by the bubble alone, always. Its height
   is reserved with --rx-h, measured after paint in _renderReactionStrip().
   ══════════════════════════════════════════════════════════════════════════ */
.msg-body { position: relative; }
.msg-body.has-reactions { padding-block-end: calc(var(--rx-h, 22px) + 5px); }
.msg-reactions {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  display: flex; flex-wrap: wrap; gap: 4px;
  max-width: min(62vw, 240px);
  margin: 0;
}
.msg-me .msg-reactions { inset-inline-start: auto; inset-inline-end: 0; justify-content: flex-end; }
.msg-reaction-btn {
  padding: 2px 7px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: #e8eaf5; font-size: .78rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.14);
  transition: transform .13s cubic-bezier(.34,1.4,.5,1), background .15s, border-color .15s;
}
.msg-reaction-btn:hover  { transform: translateY(-1px) scale(1.06); }
.msg-reaction-btn:active { transform: scale(.94); }

/* ══════════════════════════════════════════════════════════════════════════
   TYPING INDICATOR — faces + correctly-conjugated Kurdish + soft entry
   ══════════════════════════════════════════════════════════════════════════ */
.typing-indicator-bar {
  align-items: center; gap: 7px;
  padding: 4px 12px 5px; direction: rtl;
  opacity: 0; transform: translateY(4px);
  transition: opacity .16s ease, transform .16s cubic-bezier(.34,1.4,.5,1);
  will-change: opacity, transform;
}
.typing-indicator-bar.show { opacity: 1; transform: none; }
.ty-faces { display: inline-flex; flex-direction: row-reverse; align-items: center; flex-shrink: 0; }
.ty-face {
  width: 19px; height: 19px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(12,14,22,.95);
  background: rgba(255,255,255,.12);
  font-size: .6rem; font-weight: 800; color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.2);
}
/* Overlap the faces slightly, like a stacked avatar group */
.ty-faces .ty-face + .ty-face { margin-inline-end: -7px; }
.ty-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ty-face svg { width: 68%; height: 68%; }
.ty-text {
  font-size: .74rem; font-weight: 700;
  color: rgba(240,241,248,.62);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.typing-indicator-bar .typing-dots { margin-inline-start: 0; flex-shrink: 0; }
.typing-indicator-bar .typing-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent, #5eb0ee); opacity: .6;
  animation: tdot 1.2s infinite;
}
@media (prefers-reduced-motion: reduce) {
  .typing-indicator-bar { transition: none; }
  .typing-indicator-bar .typing-dot { animation: none; }
}