/* =====================================================================
   ShotGram v106 — Majlis voice room.
   ===================================================================== */
body.majlis-open { overflow: hidden; }
.majlis {
  position: fixed; inset: 0; z-index: 1400; color: #fff;
  display: grid; grid-template-rows: auto 1fr auto auto;
  background: var(--mj-bg, #0a0b16);
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.majlis.hidden { display: none; }

/* header: clan tag (with its logo + colours) and room */
.mj-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.mj-icon, .mj-icon-spacer { width: 40px; height: 40px; flex: none; }
.mj-icon { border: 0; border-radius: 50%; color: #fff; background: rgba(0, 0, 0, .3); display: grid; place-items: center; }
.mj-icon svg { width: 20px; height: 20px; }
.mj-title { flex: 1; display: grid; justify-items: center; gap: 3px; text-align: center; min-width: 0; }
.mj-title b { font-size: 17px; }
.mj-sub { font-size: 12px; color: rgba(255, 255, 255, .7); }

/* seats */
.mj-stage { overflow-y: auto; padding: 8px 14px 4px; display: grid; align-content: start; gap: 14px; }
.mj-host { display: grid; justify-items: center; }
.mj-seats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; }
.mj-seat { display: grid; justify-items: center; gap: 5px; border: 0; background: none; color: #fff; padding: 0; cursor: pointer; min-width: 0; }
.mj-ring {
  position: relative; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .08); border: 2px solid rgba(255, 255, 255, .18);
  transition: box-shadow .12s ease, border-color .12s ease;
}
.mj-seat.host .mj-ring { width: 78px; height: 78px; border-color: #fbbf24; }
.mj-seat.empty .mj-ring b { font-size: 24px; font-weight: 400; color: rgba(255, 255, 255, .75); }
.mj-seat.locked .mj-ring { background: rgba(0, 0, 0, .35); }
.mj-seat.locked .mj-ring svg { width: 20px; height: 20px; opacity: .7; }
.mj-seat.taken .mj-ring .avatar { width: 100%; height: 100%; }
.mj-seat.me .mj-ring { border-color: var(--violet, #8b5cff); }
/* speaking glow (clan-voice.js toggles .speaking on [data-speaker]) */
.mj-ring.speaking { border-color: #22d3ee; box-shadow: 0 0 0 4px rgba(34, 211, 238, .35), 0 0 22px rgba(34, 211, 238, .55); }
.mj-name { font-size: 11.5px; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255, 255, 255, .9); }
.mj-mute { position: absolute; bottom: -2px; inset-inline-end: -2px; width: 20px; height: 20px; border-radius: 50%;
  background: #ef4444; display: grid; place-items: center; }
.mj-mute svg { width: 12px; height: 12px; }
.mj-crown { position: absolute; top: -8px; inset-inline-start: -4px; font-size: 14px; }

/* raised hands + listeners */
.mj-hands, .mj-listeners { display: grid; gap: 8px; padding: 10px; border-radius: 16px; background: rgba(0, 0, 0, .25); }
.mj-hands > span, .mj-listeners > span { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .75); }
.mj-hand { display: flex; align-items: center; gap: 8px; border: 0; background: rgba(255, 255, 255, .06); color: #fff; padding: 6px 10px; border-radius: 12px; }
.mj-hand span { flex: 1; text-align: start; }
.mj-hand b { font-size: 12px; color: #a78bfa; }
.mj-listen-row { display: flex; flex-wrap: wrap; gap: 6px; }
.mj-listener { border: 0; background: none; padding: 0; }

/* chat under the screen, like LIVE chat */
.mj-chat { padding: 0 12px; display: grid; gap: 6px; }
.mj-msgs { max-height: 24vh; overflow-y: auto; display: grid; gap: 4px; align-content: end;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%); mask-image: linear-gradient(to bottom, transparent, #000 30%); }
.mj-msg { font-size: 13.5px; line-height: 1.35; padding: 5px 10px; border-radius: 12px; background: rgba(0, 0, 0, .32); width: fit-content; max-width: 100%; }
.mj-msg b { color: #c4b5fd; margin-inline-end: 4px; }
.mj-send .input { width: 100%; font-size: 16px; border-radius: 999px; background: rgba(0, 0, 0, .35); border-color: rgba(255, 255, 255, .15); color: #fff; }

/* control bar */
.mj-bar { display: flex; gap: 8px; padding: 10px 12px 12px; }
.mj-btn { flex: 1; display: grid; justify-items: center; gap: 3px; padding: 9px 4px; border-radius: 16px; border: 0; color: #fff;
  background: rgba(255, 255, 255, .1); font-size: 12px; font-weight: 700; }
.mj-btn svg { width: 22px; height: 22px; }
.mj-btn.on { background: rgba(var(--violet-rgb, 139, 92, 255), .45); }
.mj-btn.off { background: rgba(239, 68, 68, .35); }
.mj-btn.danger { background: #ef4444; }

/* room settings sheet */
.mj-set { display: grid; gap: 12px; }
.mj-set label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; }
.mj-set select { padding: 10px; border-radius: 12px; font-size: 15px; background: var(--surface, #151726); color: inherit; border: 1px solid var(--line, rgba(255,255,255,.12)); }
.mj-set .mj-set-row { display: flex; align-items: center; justify-content: space-between; }

/* voice dock: back to the Majlis */
.mj-open-btn { padding: 6px 12px; border-radius: 999px; font-size: 12.5px; }

@media (min-width: 700px) { .mj-seats { grid-template-columns: repeat(6, 1fr); } }