@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --bg-0: #08090d;
  --bg-1: #0e1016;
  --bg-2: #12141c;
  --bg-3: #171a24;
  --bg-4: #1d2130;
  --glass: rgba(255, 255, 255, 0.045);
  --glass-strong: rgba(255, 255, 255, 0.075);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text-0: #eef0f6;
  --text-1: #c3c7d4;
  --text-2: #8a90a3;
  --text-3: #5c6275;
  --accent: #7c6bff;
  --accent-2: #c084fc;
  --accent-hover: #8f80ff;
  --accent-grad: linear-gradient(135deg, #7c6bff, #c084fc);
  --accent-soft: rgba(124, 107, 255, 0.16);
  --accent-glow: 0 8px 26px -6px rgba(124, 107, 255, 0.55);
  --green: #3ddc97;
  --red: #f0495e;
  --amber: #f5b642;
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --shadow: 0 10px 34px -8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 26px 70px -12px rgba(0, 0, 0, 0.65);
  font-size: 16px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(124, 107, 255, 0.16), transparent 55%),
    radial-gradient(700px 500px at 85% 110%, rgba(192, 132, 252, 0.1), transparent 55%),
    var(--bg-0);
  color: var(--text-0);
  font-family: "Plus Jakarta Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); background-clip: content-box; }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }

button {
  font-family: inherit;
}

.hidden {
  display: none !important;
}

.screen {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------------- Auth screen ---------------- */
.auth-card {
  width: 380px;
  max-width: 92vw;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 36px 32px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(20px);
  animation: authCardIn .5s cubic-bezier(.22,.8,.24,1) both;
}

@keyframes authCardIn {
  from { transform: translateY(18px) scale(.98); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}

.brand-dot {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--accent-grad);
  box-shadow: var(--accent-glow);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
}

.brand-name {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.field {
  margin-bottom: 14px;
}

.field label {
  display: block;
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.field input {
  width: 100%;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--text-0);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.field input:focus {
  border-color: var(--accent);
  background: var(--bg-2);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.btn {
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform 0.08s ease, background 0.15s ease, opacity 0.15s ease, filter .15s ease, box-shadow .2s ease;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--accent-grad);
  color: white;
  width: 100%;
  box-shadow: 0 6px 20px -6px rgba(0,0,0,.45);
}

.btn-primary:hover {
  filter: brightness(1.08);
}

.btn-ghost {
  background: var(--glass);
  color: var(--text-1);
  border: 1px solid var(--border);
}

.btn-ghost:hover {
  background: var(--glass-strong);
  color: var(--text-0);
  border-color: var(--border-strong);
}

.auth-switch {
  margin-top: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-2);
}

.auth-switch a {
  color: var(--accent-hover);
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
}

.error-msg {
  background: rgba(239, 83, 100, 0.12);
  color: #ff8b96;
  border: 1px solid rgba(239, 83, 100, 0.35);
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 14px;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-grad);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-badge-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.avatar-status-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg-3);
  border: 2px solid var(--bg-1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-0);
}

.avatar-status-badge.hidden {
  display: none;
}

.avatar-status-badge.muted,
.avatar-status-badge.deafened {
  color: var(--red);
}

.avatar-status-badge svg {
  width: 9px;
  height: 9px;
}

.tile-avatar-fallback .avatar-status-badge {
  width: 22px;
  height: 22px;
  border-width: 3px;
}

.tile-avatar-fallback .avatar-status-badge svg {
  width: 12px;
  height: 12px;
}

.user-info-modal-head .avatar-status-badge {
  width: 18px;
  height: 18px;
}

.clickable {
  cursor: pointer;
}

/* ---------------- Profile modal ---------------- */
.profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.profile-avatar-edit {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

.profile-avatar-edit .avatar {
  width: 72px;
  height: 72px;
  font-size: 26px;
  cursor: pointer;
}

.profile-avatar-edit .avatar-edit-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border: 2px solid var(--bg-0, #1a1a1e);
  pointer-events: none;
}

.profile-avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-username {
  font-weight: 700;
  font-size: 16px;
}

.profile-joined {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 2px;
}

.profile-bio-wrap textarea {
  width: 100%;
  resize: vertical;
  min-height: 70px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-1);
  color: var(--text-0);
  font: inherit;
}

.profile-bio-count {
  text-align: right;
  font-size: 11px;
  color: var(--text-2);
  margin-top: 4px;
}

.profile-view-bio {
  font-size: 13.5px;
  color: var(--text-1);
  white-space: pre-wrap;
  word-break: break-word;
}

.profile-view-empty {
  font-size: 13px;
  color: var(--text-2);
  font-style: italic;
}

.profile-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

/* ---------------- Sidebar room list (left panel) ---------------- */
.sidebar-rooms {
  flex-shrink: 0;
  max-height: 42vh;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border);
}

.sidebar-rooms-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 12px 10px;
  flex-shrink: 0;
}

.brand-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-0);
}

.brand-dot-sm {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), #a78bfa);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}

.sidebar-rooms-header-actions {
  display: flex;
  gap: 6px;
}

.create-room-row {
  display: flex;
  gap: 6px;
  padding: 0 12px;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.create-room-row input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-0);
  font-size: 13px;
}

.create-room-row .btn-sm {
  width: 32px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.room-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 10px 12px;
  overflow-y: auto;
}

.room-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.room-row:hover {
  background: var(--glass-strong);
}

.room-row.active {
  background: var(--accent-soft);
  border-color: rgba(124, 107, 255, 0.35);
}

.room-row-name {
  font-weight: 600;
  font-size: 13px;
}

.room-row-count {
  font-size: 11px;
  color: var(--text-2);
  margin-top: 1px;
}

/* ---------------- Call screen ---------------- */
#callScreen {
  display: none;
  height: 100vh;
  width: 100vw;
  align-items: stretch;
}

#callScreen.active {
  display: flex;
}

/* Shown when logged in but no room has been joined yet — the control bar
   and chat panel are irrelevant without a room, so they're hidden. */
#callScreen.no-room .control-bar,
#callScreen.no-room .chat-panel {
  display: none;
}

.sidebar {
  width: 250px;
  flex-shrink: 0;
  background: var(--bg-1);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  backdrop-filter: blur(16px);
}

.sidebar-header {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sidebar-header .room-name {
  font-weight: 700;
  font-size: 15px;
}

.sidebar-header .room-sub {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 2px;
}

.user-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 8px;
  border-radius: var(--radius-sm);
  position: relative;
}

.user-row:hover {
  background: var(--bg-2);
}

.user-row.clickable {
  cursor: pointer;
}

.user-row:hover .admin-menu-btn {
  opacity: 1;
}

.user-row .avatar {
  width: 26px;
  height: 26px;
  font-size: 11px;
}

.user-row.speaking .avatar {
  box-shadow: 0 0 0 3px var(--green);
}

.user-row-name {
  flex: 1;
  font-size: 13.5px;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-row .badge {
  font-size: 9px;
  background: var(--accent-soft);
  color: #b7acfd;
  padding: 2px 6px;
  border-radius: 5px;
  font-weight: 700;
  margin-left: 4px;
}

/* Small dot next to a participant's name reflecting their live connection
   state. Hidden once connected — only draws attention while connecting
   or if something's actually wrong, since this is the only connection
   indicator for participants who don't have a camera tile up. */
.conn-icon {
  display: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-left: 6px;
  flex-shrink: 0;
  vertical-align: middle;
}

.conn-icon.connecting {
  display: inline-block;
  background: var(--amber);
  animation: tile-status-pulse 1.1s ease-in-out infinite;
}

.conn-icon.failed {
  display: inline-block;
  background: var(--red);
}

.user-row-icons {
  display: flex;
  gap: 5px;
  align-items: center;
}

.state-icon {
  width: 15px;
  height: 15px;
  opacity: 0.85;
}

.state-icon.muted {
  color: var(--red);
}

.state-icon.deafened {
  color: var(--red);
}

.admin-menu-btn {
  opacity: 0;
  background: none;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  padding: 4px;
  border-radius: 5px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.12s ease;
}

.admin-menu-btn svg {
  width: 17px;
  height: 17px;
}

.user-row:hover .admin-menu-btn {
  opacity: 1;
}

.admin-menu-btn:hover {
  color: var(--text-0);
  background: var(--bg-3);
}

/* Per-listener mute — available to everyone, for every other
   participant. Purely local: it changes what you hear, not their mic.
   Fine-grained volume adjustment lives in the full user info panel. */
.mute-for-me-btn {
  opacity: 0;
  background: none;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  padding: 4px;
  border-radius: 5px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.12s ease;
}

.user-row:hover .mute-for-me-btn {
  opacity: 1;
}

.mute-for-me-btn svg {
  width: 17px;
  height: 17px;
}

.mute-for-me-btn:hover {
  color: var(--text-0);
  background: var(--bg-3);
}

.mute-for-me-btn.active {
  opacity: 1;
  color: var(--red);
}

.volume-popover-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.volume-popover-label {
  font-size: 12px;
  color: var(--text-2);
}

.volume-popover-pct {
  font-size: 12px;
  color: var(--text-1);
  font-weight: 600;
}

.volume-slider {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
  margin-bottom: 10px;
}

.volume-mute-toggle {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--bg-4);
  border: 1px solid var(--border);
  color: var(--text-1);
  padding: 9px 10px;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
}

.volume-mute-toggle:hover {
  background: var(--bg-2);
  color: var(--text-0);
}

.volume-mute-toggle.active {
  border-color: var(--red);
  color: #ff8b96;
}

/* Admin-only quick action, always visible (not tucked in a menu) so
   moderators can mute a loud mic in one click. */
.quick-mute-btn {
  opacity: 0;
  background: none;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  padding: 4px;
  border-radius: 5px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.12s ease;
}

.user-row:hover .quick-mute-btn {
  opacity: 1;
}

.quick-mute-btn svg {
  width: 17px;
  height: 17px;
}

.quick-mute-btn:hover {
  color: var(--text-0);
  background: var(--bg-3);
}

.quick-mute-btn.active {
  opacity: 1;
  color: var(--red);
}

/* ---------------- User info modal ---------------- */
.user-info-modal {
  width: 380px;
}

.user-info-modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-info-modal-name {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text-0);
}

.user-info-modal-sub {
  margin-top: 3px;
}

.ui-section {
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
}

.ui-section:last-child {
  border-bottom: none;
  padding-bottom: 4px;
}

.ui-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-2);
  margin-bottom: 10px;
}

.settings-select {
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-0);
  font-size: 13px;
}

.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 13.5px;
  color: var(--text-0);
  cursor: pointer;
}

.settings-toggle-row input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
  cursor: pointer;
}

.ui-status-grid {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ui-status-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--text-1);
}

.ui-status-icon {
  width: 17px;
  height: 17px;
  color: var(--text-2);
  display: flex;
}

.ui-status-icon svg {
  width: 17px;
  height: 17px;
}

.ui-status-name {
  flex: 1;
}

.ui-status-value {
  font-weight: 600;
  color: var(--text-1);
}

.ui-status-value.muted {
  color: var(--red);
}

.ui-mod-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sidebar-footer {
  padding: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-footer .me-name {
  flex: 1;
  overflow: hidden;
}

.sidebar-footer .me-name .name {
  font-size: 13.5px;
  font-weight: 600;
}

.sidebar-footer .me-name .sub {
  font-size: 11px;
  color: var(--text-2);
}

.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--glass-strong);
  color: var(--text-1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, color 0.12s ease, transform .12s ease;
}

.icon-btn:hover {
  background: var(--bg-4);
  color: var(--text-0);
}

.icon-btn:active {
  transform: scale(.92);
}

.icon-btn svg {
  width: 16px;
  height: 16px;
}

/* Main area */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-1);
}

.topbar-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
}

.center-area {
  flex: 1;
  display: flex;
  min-height: 0;
}

.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-0);
}

.video-grid {
  position: relative; /* anchors freely-resized tiles (see .tile-custom-size) */
  flex: 1;
  display: grid;
  gap: 12px;
  padding: 16px;
  overflow-y: auto;
  align-content: center;
  justify-content: center;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(var(--grid-cols, 1), minmax(0, 1fr));
}

/* Shown instead of the grid when nobody has their camera or screen on. */
.video-grid.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.video-grid-empty-msg {
  display: none;
  color: var(--text-2);
  font-size: 14px;
  max-width: 320px;
  line-height: 1.5;
}

.video-grid.is-empty .video-grid-empty-msg {
  display: block;
}

.screen-tile-wrap {
  position: relative;
  min-width: 0;
  min-height: 0;
}

/* -------- per-tile resize (cycled via the resize button) -------- */
/* "Small": shrink the tile within its own grid cell, anchored to a
   corner, rather than fighting the auto-computed column count. */
.video-grid > .tile-size-sm {
  align-self: end;
  justify-self: end;
  width: 62%;
  height: 62%;
}

/* "Large": claim extra cells from the grid so it visibly stands out
   from the rest — the grid's own auto-placement flows everything else
   around it. */
.video-grid > .tile-size-lg {
  grid-column: span 2;
  grid-row: span 2;
}

/* -------- freeform resize (drag any edge/corner of a tile) --------
   Dragging a handle lifts the tile out of the grid's auto-flow onto an
   absolutely-positioned box (still inside #videoGrid) sized/placed in
   px, so it can be any size in any spot instead of one of the three
   preset sizes above. The resize button (cycleTileSize) clears this
   and drops the tile back into the normal grid flow. */
.video-grid > .tile-custom-size {
  position: absolute;
  z-index: 5; /* baseline — raised per-tile on interaction, see bringTileToFront() */
}

.video-grid > .tile-custom-size.resizing {
  transition: none; /* no width/height easing while actively dragging or moving */
}

/* -------- focus mode (click a tile's focus button to spotlight it) --------
   One tile takes the main stage at the top; everyone else shrinks into a
   scrollable filmstrip row underneath. Clicking the focus button again
   (on the spotlighted tile) returns to the normal grid. Implemented by
   reparenting tiles into a #focusFilmstrip wrapper (see applyFocusMode()
   in the script) rather than pure CSS, so the filmstrip can scroll on its
   own without affecting the main tile's size. */
.video-grid.grid-focus-mode {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.video-grid.grid-focus-mode > .tile-focused,
.video-grid.grid-focus-mode > .screen-tile-wrap.tile-focused {
  flex: 1 1 auto;
  min-height: 0;
}

.focus-filmstrip {
  flex: none;
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding-bottom: 2px;
  overflow-x: auto;
  overflow-y: hidden;
}

.focus-filmstrip > .tile,
.focus-filmstrip > .screen-tile-wrap {
  flex: none;
}

/* Neutralize freeform drag-resize positioning while focus mode is active —
   every tile's size/position here is dictated by this layout instead. */
.video-grid.grid-focus-mode .tile,
.video-grid.grid-focus-mode .screen-tile-wrap {
  position: relative !important;
  left: auto !important;
  top: auto !important;
}

.video-grid.grid-focus-mode > .tile-focused,
.video-grid.grid-focus-mode > .screen-tile-wrap.tile-focused {
  width: 100% !important;
  height: 100% !important;
}

.focus-filmstrip > .tile,
.focus-filmstrip > .screen-tile-wrap {
  width: 168px !important;
  height: 100px !important;
}

.video-grid.grid-focus-mode .tile-resize-handle,
.video-grid.grid-focus-mode .tile-move-handle,
.video-grid.grid-focus-mode .tile-resize-btn {
  display: none !important;
}

.tile-focus-btn.active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent-hover);
}

@media (max-width: 720px) {
  .focus-filmstrip > .tile,
  .focus-filmstrip > .screen-tile-wrap {
    width: 120px !important;
    height: 78px !important;
  }
}

.tile-resize-handle {
  position: absolute;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease;
  touch-action: none;
}

.tile:hover .tile-resize-handle,
.screen-tile-wrap:hover .tile-resize-handle {
  opacity: 1;
}

.tile-resize-handle:hover,
.tile-resize-handle.dragging {
  background: var(--accent);
}

.tile-resize-handle.n { top: 0; left: 14px; right: 14px; height: 7px; cursor: ns-resize; }
.tile-resize-handle.s { bottom: 0; left: 14px; right: 14px; height: 7px; cursor: ns-resize; }
.tile-resize-handle.e { right: 0; top: 14px; bottom: 14px; width: 7px; cursor: ew-resize; }
.tile-resize-handle.w { left: 0; top: 14px; bottom: 14px; width: 7px; cursor: ew-resize; }

.tile-resize-handle.ne,
.tile-resize-handle.nw,
.tile-resize-handle.se,
.tile-resize-handle.sw {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.16);
}

.tile-resize-handle.ne { top: 0; right: 0; cursor: nesw-resize; }
.tile-resize-handle.nw { top: 0; left: 0; cursor: nwse-resize; }
.tile-resize-handle.se { bottom: 0; right: 0; cursor: nwse-resize; }
.tile-resize-handle.sw { bottom: 0; left: 0; cursor: nesw-resize; }

/* Bigger hit targets on touch devices, where a 7-13px sliver is hard to
   grab precisely — visual size stays the same, hitbox grows via a
   transparent border acting as padding. */
@media (pointer: coarse) {
  .tile-resize-handle.n, .tile-resize-handle.s { height: 16px; margin-top: -4px; }
  .tile-resize-handle.e, .tile-resize-handle.w { width: 16px; margin-left: -4px; }
  .tile-resize-handle.ne, .tile-resize-handle.nw,
  .tile-resize-handle.se, .tile-resize-handle.sw { width: 22px; height: 22px; }
}

/* -------- move handle (drag to reposition, once a tile is a custom size) -------- */
.tile-move-handle {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 26px;
  height: 26px;
  display: none; /* only meaningful once floated — see rule below */
  align-items: center;
  justify-content: center;
  background: rgba(10, 11, 16, 0.55);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  color: var(--text-1);
  cursor: grab;
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease;
  touch-action: none;
}

.tile-move-handle svg { width: 14px; height: 14px; }

.video-grid > .tile-custom-size .tile-move-handle {
  display: flex;
}

.video-grid > .tile-custom-size:hover .tile-move-handle {
  opacity: 1;
}

.tile-move-handle:hover {
  background: rgba(10, 11, 16, 0.8);
  color: var(--text-0);
}

.tile-move-handle.dragging {
  cursor: grabbing;
  background: var(--accent);
  color: white;
  opacity: 1;
}

/* -------- live "512 × 288" readout while actively resizing -------- */
.tile-resize-badge {
  position: absolute;
  z-index: 10;
  transform: translate(-50%, 0);
  background: rgba(10, 11, 16, 0.8);
  backdrop-filter: blur(4px);
  color: var(--text-0);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: none;
  white-space: nowrap;
}

/* Set while any handle/move-grip is being dragged, so text doesn't get
   selected and the resize cursor stays put even if the pointer slips off
   the handle for a frame. */
body.tile-resize-active {
  cursor: nwse-resize;
  user-select: none;
}

body.tile-move-active {
  cursor: grabbing;
  user-select: none;
}

.tile {
  position: relative;
  background: var(--bg-2);
  border-radius: var(--radius);
  overflow: hidden;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  transition: border-color 0.12s ease, width 0.15s ease, height 0.15s ease;
}

.tile.speaking {
  border-color: var(--green);
}

.tile.clickable {
  cursor: pointer;
}

.tile.screen-tile {
  width: 100%;
  height: 100%;
}

.tile video {
  width: 100%;
  height: 100%;
  object-fit: contain; /* never crop — always show the full camera/screen frame */
  background: var(--bg-3);
}

.tile.screen-tile video {
  object-fit: contain;
  background: #05060a;
}

/* -------- "stop watching" state, shared by screen shares and cameras -------- */
.tile.screen-tile.hidden-by-viewer video,
.tile.cam-hidden-by-viewer video {
  visibility: hidden;
}

.tile-hidden-overlay {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--bg-3);
  color: var(--text-2);
  text-align: center;
  padding: 0 24px;
}

.tile.screen-tile.hidden-by-viewer .tile-hidden-overlay,
.tile.cam-hidden-by-viewer .tile-hidden-overlay {
  display: flex;
}

.tile-hidden-overlay svg {
  width: 26px;
  height: 26px;
  opacity: 0.6;
}

.tile-hidden-text {
  font-size: 13px;
  font-weight: 600;
}

.tile-hidden-sub {
  font-size: 12px;
  color: var(--text-2);
  opacity: 0.8;
}

/* -------- floating action buttons (resize / hide / mute / focus) -------- */
.tile-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  left: 10px; /* constrains the row to the tile's width so it wraps instead of overflowing past the edge and getting clipped */
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.tile:hover .tile-actions,
.tile.screen-tile.hidden-by-viewer .tile-actions,
.tile.cam-hidden-by-viewer .tile-actions {
  opacity: 1;
}

.tile-icon-btn {
  flex: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 11, 16, 0.55);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  color: var(--text-1);
  cursor: pointer;
}

.tile-icon-btn svg {
  width: 15px;
  height: 15px;
}

.tile-icon-btn:hover {
  background: rgba(10, 11, 16, 0.8);
  color: var(--text-0);
}

.tile-icon-btn.active {
  color: #ff8b96;
  border-color: rgba(239, 83, 100, 0.4);
}

/* The main card's screen-audio-mute button only makes sense while that
   card is actually showing a screen share (tile-screen-mode) — camera or
   avatar mode has no screen audio to mute. The dedicated screen card
   (ensureSecondScreenTile, class .screen-tile) always shows a screen, so
   its own copy of this button is left alone (default visible). */
.tile:not(.screen-tile):not(.tile-screen-mode) .tile-mute-screen-btn {
  display: none;
}

.tile-avatar-fallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
}

/* A card with neither camera nor screen live shows just the avatar —
   the (empty) video element underneath stays hidden so it can't flash a
   black frame while a stream is still connecting. */
.tile.tile-avatar-mode .tile-avatar-fallback {
  display: flex;
}

.tile.tile-avatar-mode .tile-main-video {
  visibility: hidden;
}

/* A card currently showing someone's screen instead of their camera
   (they're sharing but their camera's off) gets the same letterboxed
   treatment as a dedicated screen-share card. */
.tile.tile-screen-mode .tile-main-video {
  object-fit: contain;
  background: #05060a;
}

.tile-avatar-fallback .avatar {
  width: 64px;
  height: 64px;
  font-size: 24px;
}

.tile-label {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: rgba(10, 11, 16, 0.65);
  backdrop-filter: blur(4px);
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tile-label .state-icon {
  width: 13px;
  height: 13px;
}

.tile-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--accent);
  color: white;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.3px;
}

.tile-status {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.2px;
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 1;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 2;
}

.tile-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tile-status.connecting {
  background: rgba(240, 180, 41, 0.18);
  color: var(--amber);
  border: 1px solid rgba(240, 180, 41, 0.35);
}

.tile-status.connecting::before {
  background: var(--amber);
  animation: tile-status-pulse 1.1s ease-in-out infinite;
}

.tile-status.connected {
  background: rgba(61, 220, 151, 0.16);
  color: var(--green);
  border: 1px solid rgba(61, 220, 151, 0.35);
}

.tile-status.connected::before {
  background: var(--green);
}

.tile-status.failed {
  background: rgba(239, 83, 100, 0.16);
  color: #ff8b96;
  border: 1px solid rgba(239, 83, 100, 0.4);
}

.tile-status.failed::before {
  background: var(--red);
}

.tile-status.hidden {
  opacity: 0;
}

@keyframes tile-status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Chat panel */
.chat-panel {
  width: 320px;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  background: var(--bg-1);
  display: flex;
  flex-direction: column;
}

.chat-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text-1);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-msg .chat-msg-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
}

.chat-msg .chat-user {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-0);
}

.chat-msg .chat-time {
  font-size: 10.5px;
  color: var(--text-2);
}

.chat-msg .chat-text {
  font-size: 13.5px;
  color: var(--text-1);
  line-height: 1.45;
  word-break: break-word;
}

.chat-msg.system .chat-text {
  color: var(--text-2);
  font-style: italic;
}

.chat-input-row {
  padding: 12px;
  border-top: 1px solid var(--border);
}

.chat-input-row input {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-0);
  font-size: 13.5px;
  outline: none;
}

.chat-input-row input:focus {
  border-color: var(--accent);
}

/* Control bar */
.control-bar {
  height: 76px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--bg-1);
  border-top: 1px solid var(--border);
}

.control-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--bg-3);
  color: var(--text-0);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, color 0.12s ease, transform 0.08s ease;
  position: relative;
}

.control-btn:hover {
  background: var(--bg-4);
}

.control-btn:active {
  transform: scale(0.94);
}

.control-btn svg {
  width: 20px;
  height: 20px;
}

.control-btn.active {
  background: var(--accent);
}

.control-btn.off {
  background: var(--red);
  color: white;
}

.control-btn.leave {
  background: var(--red);
  color: white;
  width: auto;
  padding: 0 20px;
  border-radius: 24px;
  gap: 8px;
  font-weight: 700;
  font-size: 13px;
}

.control-btn.leave svg {
  width: 18px;
  height: 18px;
}

.toast {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-3);
  border: 1px solid var(--border);
  padding: 10px 18px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 500;
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(4px);
}

.toast.error {
  border-color: rgba(239, 83, 100, 0.5);
  color: #ff8b96;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: var(--bg-4);
  border-radius: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------------- Connection banner ---------------- */
.conn-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  text-align: center;
  background: var(--amber);
  color: #2a1e00;
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 10px;
}

.field-hint {
  font-size: 11px;
  color: var(--text-2);
  margin-top: 4px;
}

/* ---------------- Buttons: small / danger variants ---------------- */
.btn-sm {
  padding: 6px 10px !important;
  font-size: 12px !important;
  width: auto !important;
}

.btn-ghost.danger {
  color: #ff8b96;
  border-color: rgba(239, 83, 100, 0.4);
}

.btn-ghost.danger:hover {
  background: rgba(239, 83, 100, 0.12);
}

/* ---------------- Badges ---------------- */
.badge {
  font-size: 9px;
  background: var(--accent-soft);
  color: #b7acfd;
  padding: 2px 6px;
  border-radius: 5px;
  font-weight: 700;
  margin-left: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.badge.online {
  background: rgba(61, 220, 151, 0.16);
  color: var(--green);
}

.badge.banned {
  background: rgba(239, 83, 100, 0.16);
  color: #ff8b96;
}

.state-icon.locked {
  color: var(--amber);
  margin-left: 2px;
}

/* ---------------- Admin modal ---------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 7, 11, 0.65);
  backdrop-filter: blur(6px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal {
  width: 560px;
  max-width: 100%;
  max-height: 82vh;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 10px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.modal-tabs {
  display: flex;
  gap: 4px;
}

.modal-tab {
  background: none;
  border: none;
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.modal-tab:hover {
  color: var(--text-0);
  background: var(--bg-2);
}

.modal-tab.active {
  color: #fff;
  background: var(--accent-grad);
}

.modal-body {
  padding: 12px;
  overflow-y: auto;
}

.admin-loading {
  color: var(--text-2);
  font-size: 13px;
  padding: 10px 4px;
}

.admin-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.admin-row-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.admin-row-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-0);
}

.admin-row-sub {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 2px;
}

.admin-row-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* ---------------- Mobile-only controls (hidden on desktop) ---------------- */
.only-mobile {
  display: none;
}

.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 90;
}

.sidebar-scrim.show {
  display: block;
}

@media (max-width: 860px) {
  .only-mobile {
    display: flex;
  }

  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 260px;
    max-width: 82vw;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .chat-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 320px;
    max-width: 88vw;
    z-index: 100;
    transform: translateX(100%);
    transition: transform 0.2s ease;
    display: flex;
  }

  .chat-panel.open {
    transform: translateX(0);
  }

  .control-bar {
    gap: 8px;
  }

  .control-btn {
    width: 44px;
    height: 44px;
  }

  .video-grid {
    gap: 8px;
    padding: 10px;
  }
}

@media (max-width: 480px) {
  .modal {
    max-height: 90vh;
  }

  .admin-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-row-actions {
    width: 100%;
  }

  .admin-row-actions .btn {
    flex: 1;
  }
}

/* ---------------- Right-click user context menu (Discord-style) ---------------- */
.context-menu {
  position: fixed;
  z-index: 2000;
  min-width: 230px;
  max-width: 280px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(20px);
  padding: 6px;
  user-select: none;
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--text-1);
  position: relative;
  white-space: nowrap;
}

.context-menu-item:hover,
.context-menu-item-submenu.open {
  background: var(--bg-3);
  color: var(--text-0);
}

.context-menu-item.disabled {
  opacity: 0.45;
  cursor: default;
}

.context-menu-item.danger {
  color: var(--red);
}

.context-menu-item.danger:hover {
  background: rgba(239, 83, 100, 0.14);
  color: var(--red);
}

.context-menu-item-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.context-menu-item-icon svg {
  width: 16px;
  height: 16px;
}

.context-menu-item-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.context-menu-item-check {
  width: 14px;
  height: 14px;
  color: var(--green);
  flex-shrink: 0;
}

.context-menu-item-check svg {
  width: 14px;
  height: 14px;
}

.context-menu-item-chevron {
  width: 14px;
  height: 14px;
  color: var(--text-2);
  flex-shrink: 0;
}

.context-menu-item-chevron svg {
  width: 14px;
  height: 14px;
}

.context-menu-sep {
  height: 1px;
  background: var(--border);
  margin: 5px 6px;
}

.context-menu-item-submenu {
  position: relative;
}

.context-submenu {
  display: none;
  position: absolute;
  left: calc(100% + 6px);
  top: -6px;
  width: 210px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 10px 12px;
  cursor: default;
}

.context-menu-item-submenu:hover > .context-submenu,
.context-menu-item-submenu.open > .context-submenu {
  display: block;
}

@media (max-width: 640px) {
  .context-submenu {
    left: auto;
    right: 0;
    top: 100%;
    margin-top: 4px;
  }
}