/* ───────────────────────────────────────────────────────────────────
   meeting.css — meeting-room overlay styles.
   Extracted from Meet Room.html with a few tweaks for the host page:
   - global `html, body { background, overflow:hidden }` reset is dropped
     (dev shell owns body styling); we scope appearance under #meeting-shell.
   - `* { margin:0 padding:0 }` is dropped to avoid clobbering dev UI.
   - meeting-active / debug-overlay classes wire the show/hide behavior.
   - the dev viewer iframe gets moved into .screenshare-frame at runtime;
     the rule below sizes it to fill the frame.
   ─────────────────────────────────────────────────────────────────── */

/* ── Keyframes ── */
@keyframes mr-spin     { to { transform: rotate(360deg); } }
@keyframes mr-pulse    { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@keyframes mr-modalIn  { from { opacity:0; transform:scale(0.93) translateY(8px); } to { opacity:1; transform:scale(1) translateY(0); } }
@keyframes mr-chatIn   { from { opacity:0; transform:translateX(-50%) translateY(10px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
@keyframes mr-ripple   { 0% { transform:scale(1); opacity:.55; } 100% { transform:scale(2.5); opacity:0; } }
@keyframes mr-barBounce { 0%,100% { transform:scaleY(0.25); } 50% { transform:scaleY(1); } }
@keyframes mr-fadeUp   { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@keyframes mr-tileIn   { from { opacity:0; transform:scale(0.94); } to { opacity:1; transform:scale(1); } }

/* ── Shell visibility ── */
#meeting-shell {
  position: fixed;
  inset: 0;
  background: #060810;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  z-index: 50;
  overflow: hidden;
  display: none;
}
body.meeting-active #meeting-shell { display: block; }
body.meeting-active #dev-shell     { display: none; }

/* Debug overlay — shows the dev shell on top of the meeting room mid-call. */
body.meeting-active.debug-overlay #meeting-shell { filter: brightness(0.35); pointer-events: none; }
body.meeting-active.debug-overlay #dev-shell {
  display: grid;
  position: fixed; inset: 0;
  z-index: 60;
  box-shadow: 0 0 0 2px var(--accent, #2f81f7);
}

/* ── Screens (scoped to meeting-shell so .screen never matches dev UI) ── */
#meeting-shell .mr-screen { position: absolute; inset: 0; display: flex; flex-direction: column; }
#meeting-shell .mr-screen.hidden { display: none; }

/* ═══════════════════════════════
   CONNECTING SCREEN
═══════════════════════════════ */
#mr-screen-connecting {
  align-items: center;
  justify-content: center;
  background: #060810;
}
.conn-glow {
  position: absolute;
  width: 640px; height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,.13) 0%, transparent 68%);
  top: 50%; left: 50%;
  transform: translate(-50%, -62%);
  pointer-events: none;
}
.conn-title {
  color: rgba(255,255,255,.35);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .05em;
  margin-bottom: 44px;
  animation: mr-fadeUp 400ms ease both;
}
.conn-orb-wrap {
  position: relative;
  width: 84px; height: 84px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 36px;
}
.ripple-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(99,102,241,.45);
  animation: mr-ripple 2s ease-out infinite;
}
.ripple-ring:nth-child(2) { animation-delay: .65s; border-color: rgba(99,102,241,.3); }
.ripple-ring:nth-child(3) { animation-delay: 1.3s; border-color: rgba(99,102,241,.18); }
.conn-orb {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(99,102,241,.12);
  border: 1px solid rgba(99,102,241,.28);
  display: flex; align-items: center; justify-content: center;
  gap: 3px;
}
.conn-bar { width: 3px; height: 18px; border-radius: 2px; transform-origin: center; }
.conn-bar:nth-child(1){ background:rgba(139,92,246,.65); animation: mr-barBounce 1.1s ease-in-out infinite 0.00s; }
.conn-bar:nth-child(2){ background:rgba(139,92,246,.72); animation: mr-barBounce 1.1s ease-in-out infinite 0.15s; }
.conn-bar:nth-child(3){ background:rgba(139,92,246,.80); animation: mr-barBounce 1.1s ease-in-out infinite 0.30s; }
.conn-bar:nth-child(4){ background:rgba(139,92,246,.88); animation: mr-barBounce 1.1s ease-in-out infinite 0.45s; }
.conn-bar:nth-child(5){ background:rgba(139,92,246,.95); animation: mr-barBounce 1.1s ease-in-out infinite 0.60s; }
.conn-step-text {
  color: rgba(255,255,255,.62);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  margin-bottom: 22px;
  animation: mr-fadeUp 260ms ease both;
}
.conn-dots { display: flex; gap: 6px; align-items: center; }
.conn-dot {
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  width: 6px; height: 6px;
  transition: all 300ms ease;
}
.conn-dot.active { background: rgba(99,102,241,.9); width: 8px; height: 8px; }

/* ═══════════════════════════════
   MEETING SCREEN
═══════════════════════════════ */
#mr-screen-meeting { background: #0b0d12; }

.meeting-header {
  height: 48px;
  background: rgba(10,12,18,.95);
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px;
  flex-shrink: 0;
  z-index: 2;
}
.header-rec { display: flex; align-items: center; gap: 7px; }
.rec-dot { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; animation: mr-pulse 2s ease-in-out infinite; }
.header-rec span { font-size: 11.5px; color: rgba(255,255,255,.5); }
.header-title { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.45); letter-spacing:.01em; }
.header-timer { font-size: 13.5px; color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; letter-spacing:.02em; }

.meeting-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Tiles strip */
.tiles-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 28px 0;
  gap: 14px;
  flex-wrap: wrap;
  transition: all 520ms cubic-bezier(0.4,0,0.2,1);
}
.tiles-wrap.layout-intro { flex: 1; padding-bottom: 100px; }
.tiles-wrap.layout-live  { flex: 0 0 auto; flex-wrap: nowrap; }

.mr-tile {
  position: relative;
  background: #1a1e2a;
  border-radius: 16px;
  overflow: hidden;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  transition: all 520ms cubic-bezier(0.4,0,0.2,1);
}
.mr-tile.speaking { box-shadow: 0 0 0 2px rgba(74,222,128,.65); }

.tile-avatar {
  border-radius: 50%;
  flex-shrink: 0;
  display: block;
  transition: all 520ms cubic-bezier(0.4,0,0.2,1);
}
.tile-mute-badge {
  position: absolute;
  background: rgba(239,68,68,.88);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all 520ms cubic-bezier(0.4,0,0.2,1);
}
.tile-name-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex; flex-direction: column;
  align-items: flex-start;
  padding: 0 10px 10px;
  transition: all 520ms cubic-bezier(0.4,0,0.2,1);
}
.tile-name-badge {
  background: rgba(0,0,0,.42);
  border-radius: 7px;
  padding: 3px 9px;
  font-size: 12px; font-weight: 500; color: #fff;
}

/* Screenshare area */
.screenshare-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px 90px;
  transition: opacity 400ms ease 100ms, transform 420ms cubic-bezier(0.4,0,0.2,1) 100ms;
}
.screenshare-wrap.hidden-ss {
  opacity: 0;
  transform: scale(0.96) translateY(14px);
  pointer-events: none;
  flex: 0 0 0px;
  padding: 0;
}
.screenshare-frame {
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 280px);
  aspect-ratio: 16/9;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 28px 64px rgba(0,0,0,.55);
  border: 1px solid #e5e7eb;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
}
.screenshare-frame > #mr-screenshare-placeholder {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
}
.screenshare-frame span { color: #9ca3af; font-size: 16px; font-weight: 500; }
.screenshare-frame small { color: #d1d5db; font-size: 13px; }

/* When the dev viewer iframe is moved into the screenshare frame, fill it. */
.screenshare-frame > iframe {
  width: 100%; height: 100%;
  border: 0;
  display: block;
  border-radius: 16px;
}
.screenshare-frame.has-viewer > #mr-screenshare-placeholder { display: none; }

/* ═══════════════════════════════
   CONTROLS BAR
═══════════════════════════════ */
.controls-bar {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(14,17,25,.92);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.1);
  padding: 11px 20px;
  border-radius: 20px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 16px 48px rgba(0,0,0,.5);
  z-index: 10;
}
.ctrl-divider { width: 1px; height: 24px; background: rgba(255,255,255,.1); margin: 0 4px; }
.ctrl-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 150ms ease, opacity 150ms ease;
  outline: none;
  position: relative;
  font: inherit;
  padding: 0;
}
.ctrl-btn.active   { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.ctrl-btn.inactive { background: rgba(255,255,255,.22); color: rgba(255,255,255,.45); }
.ctrl-btn.active:hover   { background: rgba(255,255,255,.2); }
.ctrl-btn.inactive:hover { background: rgba(255,255,255,.3); }
.ctrl-btn.danger { background: #dc2626; color: #fff; }
.ctrl-btn.danger:hover { background: #ef4444; }
.ctrl-btn.chat-btn { background: rgba(34,197,94,.18); color: #4ade80; }
.ctrl-btn.chat-btn:hover { background: rgba(34,197,94,.28); }
.ctrl-btn.chat-btn.chat-open { box-shadow: inset 0 0 0 2px rgba(74,222,128,.55); }
.ctrl-btn.debug-btn { background: rgba(47,129,247,.22); color: #79c0ff; }
.ctrl-btn.debug-btn:hover { background: rgba(47,129,247,.36); }
.ctrl-btn.debug-btn.debug-on { box-shadow: inset 0 0 0 2px rgba(121,192,255,.55); }

/* More dropdown */
.more-dropdown.hidden { display: none; }
.more-dropdown {
  position: absolute;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%);
  background: #1e2330;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.6);
  min-width: 148px;
  z-index: 20;
  animation: mr-fadeUp 140ms ease both;
}
.more-dropdown button {
  width: 100%; border: none; background: transparent;
  display: flex; align-items: center; gap: 9px;
  padding: 13px 16px;
  font-size: 13.5px; color: #f87171;
  cursor: pointer; text-align: left;
  transition: background 120ms;
}
.more-dropdown button:hover { background: rgba(255,255,255,.06); }

/* ═══════════════════════════════
   CHAT PANEL
═══════════════════════════════ */
#mr-chat-panel {
  position: fixed;
  bottom: 84px;
  left: 50%;
  width: min(500px, 90vw);
  height: min(570px, 68vh);
  z-index: 55;
  pointer-events: auto;
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
  animation: mr-chatIn 160ms cubic-bezier(0.2,0,0,1) forwards;
  display: flex; flex-direction: column;
}
#mr-chat-panel.hidden { display: none; }
.chat-inner {
  display: flex; flex-direction: column;
  height: 100%;
  background: #1a1e27;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.7);
}
.chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.chat-header span { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.94); }
.chat-close {
  border: none; background: transparent; cursor: pointer;
  color: rgba(255,255,255,.38); padding: 4px;
  border-radius: 6px; display: flex;
  transition: color 150ms;
}
.chat-close:hover { color: rgba(255,255,255,.7); }
.chat-messages {
  flex: 1; overflow-y: auto;
  padding: 20px; display: flex; flex-direction: column; gap: 20px;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 2px; }
.chat-msg { display: flex; gap: 10px; }
.chat-msg.self { flex-direction: row-reverse; }
.chat-av {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: #fff; flex-shrink: 0;
}
.chat-bubble-wrap { display: flex; flex-direction: column; gap: 5px; max-width: 78%; }
.chat-msg.self .chat-bubble-wrap { align-items: flex-end; }
.chat-meta { font-size: 11.5px; color: rgba(255,255,255,.42); font-weight: 500; }
.chat-bubble {
  padding: 10px 15px;
  border-radius: 15px;
  font-size: 14px; line-height: 1.55;
  letter-spacing: .01em;
}
.chat-bubble.them { background: rgba(255,255,255,.1); color: rgba(255,255,255,.88); }
.chat-bubble.me   { background: #1a73e8; color: #fff; }
.chat-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.chat-input-row input {
  flex: 1;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 10px 15px;
  font-size: 14px; color: rgba(255,255,255,.92);
  outline: none;
  font-family: inherit;
  transition: border-color 150ms;
}
.chat-input-row input::placeholder { color: rgba(255,255,255,.38); }
.chat-input-row input:focus { border-color: rgba(255,255,255,.25); }
.chat-send {
  width: 38px; height: 38px; border-radius: 50%;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.4);
  flex-shrink: 0;
  transition: background 150ms, color 150ms, opacity 150ms;
}
.chat-send.ready { background: #1a73e8; color: #fff; }

/* ═══════════════════════════════
   LEAVE MODAL
═══════════════════════════════ */
#mr-leave-modal {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(5px);
}
#mr-leave-modal.hidden { display: none; }
.modal-card {
  background: #12151e;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  box-shadow: 0 32px 80px rgba(0,0,0,.7);
  padding: 28px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  width: 285px;
  animation: mr-modalIn 180ms ease both;
}
.modal-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(220,38,38,.18);
  display: flex; align-items: center; justify-content: center;
}
.modal-text { text-align: center; }
.modal-text p { font-size: 16px; font-weight: 600; color: #fff; margin: 0; }
.modal-text small { font-size: 12px; color: rgba(255,255,255,.38); margin-top: 4px; display: block; }
.modal-btns { display: flex; gap: 10px; width: 100%; margin-top: 4px; }
.modal-btns button {
  flex: 1; padding: 10px; border-radius: 12px;
  border: none; font-size: 14px; font-weight: 500;
  cursor: pointer; transition: background 150ms;
  font-family: inherit;
}
.btn-stay  { background: rgba(255,255,255,.1); color: #fff; }
.btn-stay:hover  { background: rgba(255,255,255,.18); }
.btn-leave { background: #dc2626; color: #fff; }
.btn-leave:hover { background: #ef4444; }

/* ═══════════════════════════════
   LEFT SCREEN
═══════════════════════════════ */
#mr-screen-left {
  align-items: center;
  justify-content: center;
  background: #060810;
  gap: 12px;
}
.left-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: #1a1e2a;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
}
#mr-screen-left h2 { font-size: 18px; font-weight: 600; margin: 0; }
#mr-screen-left p  { font-size: 13.5px; color: rgba(255,255,255,.38); margin: 0; }
.rejoin-btn {
  margin-top: 12px;
  padding: 10px 22px;
  border-radius: 24px;
  background: rgba(255,255,255,.1);
  border: none; color: #fff;
  font-size: 14px; cursor: pointer;
  font-family: inherit;
  transition: background 150ms;
}
.rejoin-btn:hover { background: rgba(255,255,255,.18); }