/*
 * Rewrite status: done — see REWRITE_STATUS.md (extend, don't rewrite).
 * Link-based call room (views/call_room.php + public/assets/js/call-room.js).
 * Same visual language as the private call screen (ui-chat-calls.css):
 * dark stage, round controls, participants panel on the side.
 * call-room.js toggles: .voice-mode/.video-mode on #linkCallLayout,
 * .has-video on #linkCallStage, .link-call-stage-empty on #linkCallStageBody,
 * .active / .d-none on controls.
 */
.link-call-wrap { max-width: none; margin: 0; }
.link-call-card { border-radius: 16px; }

.room {
  --room-bg: #0b0f1a;
  --room-ink: #f8fafc;
  --room-muted: rgba(226, 232, 240, .72);
  --room-accent: var(--ds-accent, #6366f1);
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px;
  min-height: calc(100dvh - 12rem);
}
.room-stage {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  min-height: 460px; border-radius: 24px; color: var(--room-ink);
  background:
    radial-gradient(60% 50% at 50% 35%, color-mix(in srgb, var(--room-accent) 40%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, #111827 0%, var(--room-bg) 100%);
}
.room-top { display: flex; align-items: center; gap: 12px; padding: 16px 20px 6px; }
.room-top__meta { flex: 1; min-width: 0; }
.room-title { font-weight: 700; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-state { font-size: .8rem; color: var(--room-muted); }
.room-count { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: .8rem; font-weight: 600; }

.room-body { position: relative; flex: 1; min-height: 0; margin: 6px 12px 0; border-radius: 18px; overflow: hidden; display: grid; place-items: center; }
.room-hero { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--room-muted); text-align: center; }
.room-hero__icon { width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; font-size: 2.6rem; color: var(--room-ink); background: rgba(255, 255, 255, .08); position: relative; }
.room-hero__icon::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--room-accent) 70%, #fff); animation: room-ring 2s ease-out infinite; }
@keyframes room-ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }
.room-body:not(.link-call-stage-empty) .room-hero { display: none; }

.link-call-videos { position: absolute; inset: 0; display: grid; gap: 6px; padding: 6px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-auto-rows: minmax(160px, 1fr); }
.link-call-video-tile { position: relative; overflow: hidden; border-radius: 16px; background: #000; min-height: 84px; }
.link-call-video-tile video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.link-call-video-actions { position: absolute; top: 8px; right: 8px; display: inline-flex; gap: 4px; z-index: 4; }
.link-call-video-actions .btn { --bs-btn-font-size: .62rem; --bs-btn-padding-y: .2rem; --bs-btn-padding-x: .4rem; line-height: 1; border-color: rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .55); color: #fff; border-radius: 8px; }
.link-call-video-actions .btn:hover { background: rgba(0, 0, 0, .8); color: #fff; }
.link-call-video-label { position: absolute; left: 10px; bottom: 10px; font-size: .72rem; padding: 3px 8px; border-radius: 8px; background: rgba(0, 0, 0, .5); color: #fff; }
.link-call-local-video {
  position: absolute; z-index: 4; right: 12px; bottom: 12px; width: min(200px, 30%); min-width: 120px; aspect-ratio: 16 / 9;
  object-fit: cover; border-radius: 14px; background: #000; box-shadow: 0 10px 26px rgba(0, 0, 0, .45); cursor: zoom-in; transform: scaleX(-1);
}

.room-checks { padding: 6px 20px 0; font-size: .74rem; color: #fcd34d; text-align: center; min-height: 0; }
.room-checks:empty { display: none; }
.room-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding: 14px 16px 20px; }

/* round controls (same as the private call screen) */
.room .call-ctl { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 56px; padding: 0; border: 0; background: transparent; color: var(--room-ink); font-size: .72rem; cursor: pointer; }
.room .call-ctl .bi { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 1.25rem; background: rgba(255, 255, 255, .12); transition: background .15s ease, transform .12s ease; }
.room .call-ctl:hover .bi { background: rgba(255, 255, 255, .2); }
.room .call-ctl:active .bi { transform: scale(.94); }
.room .call-ctl:disabled { opacity: .45; cursor: default; }
.room .call-ctl span { color: var(--room-muted); white-space: nowrap; }
.room .call-ctl.active .bi { background: #f8fafc; color: #0f172a; }
.room .call-ctl.d-none { display: none !important; }
.room .call-ctl--hangup .bi { background: #ef4444; color: #fff; }
.room .call-ctl--hangup:hover .bi { background: #dc2626; }

/* participants */
.room-side { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 24px; background: var(--ds-surface, var(--bs-body-bg)); border: 1px solid var(--ds-line, rgba(0, 0, 0, .08)); }
.room-side__head { font-weight: 700; }
.link-call-members { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow: auto; }
.room-member { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 12px; }
.room-member__ava { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .9rem; color: #fff; background: color-mix(in srgb, var(--room-accent) 70%, #0f172a); position: relative; }
.room-member.is-in .room-member__ava::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #22c55e; border: 2px solid var(--ds-surface, #fff); }
.room-member__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9rem; }
.room-member__state { font-size: .72rem; color: var(--bs-secondary-color); }
.room-member:not(.is-in) { opacity: .6; }
.room-side__hint { margin: auto 0 0; font-size: .76rem; color: var(--bs-secondary-color); }
.room-side__actions { display: flex; flex-direction: column; gap: 6px; }

/* fullscreen: the stage fills the screen */
.room-stage:fullscreen { border-radius: 0; }

@media (max-width: 991.98px) {
  .room { grid-template-columns: 1fr; min-height: auto; }
  .room-stage { min-height: min(72dvh, 620px); }
  .link-call-videos { grid-template-columns: 1fr; }
  .room .call-ctl .bi { width: 48px; height: 48px; }
  .room-controls { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .room-hero__icon::after { animation: none; }
}