:root {
  --bg: #eef2f7;
  --card: #ffffff;
  --text: #122033;
  --muted: #65758b;
  --border: #d9e1ec;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --danger: #dc2626;
  --success: #16a34a;
  --warning: #f59e0b;
  --shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
}

* { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; overflow-x: hidden; overscroll-behavior-x: none; }
body { margin: 0; min-height: 100vh; font-family: Inter, Segoe UI, Arial, sans-serif; color: var(--text); background: radial-gradient(circle at top left, #dbeafe, transparent 35%), radial-gradient(circle at bottom right, #e0e7ff, transparent 35%), var(--bg); }
button, input { font: inherit; }
body.in-call { overscroll-behavior-y: contain; }
body.video-fullscreen-active { overflow: hidden; touch-action: none; }
button { cursor: pointer; border: 0; transition: transform .12s ease, opacity .12s ease, background .12s ease; }
button:active { transform: scale(.98); }
button:disabled { cursor: not-allowed; opacity: .45; }
.app-shell { width: min(1040px, 100%); min-height: 100vh; margin: 0 auto; padding: 20px; display: grid; place-items: center; }
.card { width: 100%; background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(255,255,255,.75); border-radius: 28px; box-shadow: var(--shadow); backdrop-filter: blur(14px); }
.login-card { max-width: 520px; padding: 28px; }
.brand, .topbar, .section-head, .login-row, .call-actions, .top-actions, .controls { display: flex; gap: 14px; align-items: center; }
.brand-icon, .call-avatar { width: 58px; height: 58px; border-radius: 20px; display: grid; place-items: center; color: white; background: linear-gradient(135deg, var(--primary), #7c3aed); font-size: 28px; font-weight: 900; flex: none; user-select: none; }
h1, h2, p { margin: 0; }
h1 { font-size: 28px; line-height: 1.1; }
h2 { font-size: 20px; }
p, .hint { color: var(--muted); }
label { display: block; margin: 26px 0 8px; font-weight: 700; }
input { width: 100%; border: 1px solid var(--border); background: white; border-radius: 16px; padding: 14px 16px; outline: none; }
input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(37,99,235,.12); }
.login-row input { flex: 1; }
button { padding: 14px 18px; border-radius: 16px; font-weight: 800; color: white; background: var(--primary); }
button:hover:not(:disabled) { background: var(--primary-dark); }
button.secondary { background: #475569; }
button.danger { background: var(--danger); }
button.primary { background: var(--success); }
.error { color: var(--danger); min-height: 24px; margin-top: 10px; }
.hidden { display: none !important; }
.app-card { max-width: 900px; padding: 22px; }
.topbar { justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.top-actions { justify-content: flex-end; min-width: 0; }
.me-pill { padding: 10px 14px; background: #eff6ff; color: #1e40af; border-radius: 999px; font-weight: 800; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logout-btn { padding: 10px 13px; background: #e2e8f0; color: #334155; }
.logout-btn:hover { background: #cbd5e1 !important; }
.video-stage { position: relative; height: min(54vh, 520px); margin: 18px 0; overflow: hidden; border-radius: 26px; background: #020617; border: 1px solid rgba(148,163,184,.35); }
.video-stage.fullscreen-mode { position: fixed; inset: 0; z-index: 9999; width: 100vw; max-width: 100vw; height: 100dvh; margin: 0; border-radius: 0; border: 0; overflow: hidden; overscroll-behavior: contain; touch-action: none; }
.video-stage video { background: #020617; }
#remoteVideoMain { width: 100%; height: 100%; object-fit: contain; display: block; }
#localVideoPreview { position: absolute; top: 14px; right: 14px; width: min(30%, 190px); aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; border: 2px solid rgba(255,255,255,.75); box-shadow: 0 10px 30px rgba(0,0,0,.35); background: #111827; touch-action: none; cursor: grab; }
#localVideoPreview.dragging { cursor: grabbing; opacity: .92; }
.fullscreen-link { position: absolute; right: 14px; bottom: 12px; z-index: 4; color: #fff; background: rgba(15,23,42,.62); border: 1px solid rgba(255,255,255,.28); padding: 8px 11px; border-radius: 999px; font-size: 13px; font-weight: 800; text-decoration: none; backdrop-filter: blur(8px); }
.fullscreen-link:active { transform: scale(.98); }
.video-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: #dbeafe; font-size: clamp(24px, 6vw, 52px); font-weight: 900; letter-spacing: -.04em; background: radial-gradient(circle at center, #1e3a8a, #020617 70%); }
.video-stage.voice-only #localVideoPreview { display: none; }
.call-panel { margin: 18px 0; padding: 18px; border: 1px solid var(--border); border-radius: 24px; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; background: #f8fafc; }
.call-info { min-width: 0; }
.timer { margin-top: 6px; color: var(--success); font-weight: 900; letter-spacing: .04em; }
.participants { margin-top: 6px; font-size: 13px; overflow-wrap: anywhere; }
.controls { flex-wrap: wrap; margin: -4px 0 14px; padding: 14px; border: 1px solid var(--border); border-radius: 20px; background: rgba(248,250,252,.72); }
.control-btn { background: #0f766e; }
.icon-btn { width: 54px; height: 54px; min-width: 54px; padding: 0; display: inline-grid; place-items: center; line-height: 1; border-radius: 999px; }
.icon-btn svg { width: 25px; height: 25px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.control-btn.off { background: #64748b; }
.users-section { margin-top: 10px; }
.section-head { justify-content: space-between; margin-bottom: 12px; }
.search { margin-bottom: 12px; }
.users-list { max-height: 315px; overflow-y: auto; border: 1px solid var(--border); border-radius: 20px; background: white; }
.user-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--border); }
.user-row:last-child { border-bottom: 0; }
.user-main { display: flex; align-items: center; gap: 11px; min-width: 0; }
.user-avatar { width: 38px; height: 38px; border-radius: 14px; display: grid; place-items: center; background: #eef2ff; color: #3730a3; font-weight: 900; flex: none; }
.user-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.user-sub { color: var(--success); font-size: 12px; margin-top: 2px; }
.user-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.user-row button { padding: 10px 13px; border-radius: 14px; }
.empty { padding: 22px; color: var(--muted); text-align: center; }
.ringing { animation: pulse 1s infinite; }
.status-warn { color: var(--warning); }
.status-ok { color: var(--success); }
@keyframes pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37,99,235,.35); } 50% { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(37,99,235,0); } }
@media (prefers-color-scheme: dark) { :root { --bg: #0f172a; --card: #111827; --text: #e5e7eb; --muted: #94a3b8; --border: #334155; --shadow: 0 24px 70px rgba(0,0,0,.35); } body { background: radial-gradient(circle at top left, #1e3a8a, transparent 35%), radial-gradient(circle at bottom right, #312e81, transparent 35%), var(--bg); } .card { background: rgba(15, 23, 42, .92); border-color: rgba(148, 163, 184, .18); } input, .users-list { background: #0f172a; color: var(--text); } .call-panel, .controls { background: rgba(15, 23, 42, .7); } .me-pill { background: #172554; color: #bfdbfe; } .logout-btn { background: #334155; color: #e2e8f0; } .logout-btn:hover { background: #475569 !important; } .user-avatar { background: #1e1b4b; color: #c4b5fd; } }
@media (max-width: 700px) { .app-shell { padding: 10px; place-items: stretch; } .card { border-radius: 22px; } .login-card, .app-card { padding: 16px; } h1 { font-size: 24px; } .login-row { flex-direction: column; align-items: stretch; } .topbar { align-items: flex-start; gap: 10px; } .top-actions { flex-direction: column; align-items: flex-end; gap: 8px; } .me-pill { max-width: 150px; } .logout-btn { padding: 9px 12px; } .video-stage { height: 45vh; border-radius: 22px; width: 100%; max-width: 100%; } .video-stage.fullscreen-mode { height: 100dvh; border-radius: 0; } #localVideoPreview { width: 34%; top: 10px; right: 10px; border-radius: 14px; } .call-panel { grid-template-columns: 1fr; text-align: center; justify-items: center; } .call-actions { width: 100%; justify-content: center; flex-wrap: wrap; } .call-actions button { flex: 1; min-width: 118px; } .controls { justify-content: center; } .controls .icon-btn { flex: 0 0 52px; min-width: 52px; width: 52px; height: 52px; } .users-list { max-height: 260px; } .user-row { align-items: flex-start; } .user-actions { max-width: 160px; } }


/* Mobile/tablet call usability fixes */
html, body {
  min-height: 100%;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
.app-shell {
  min-height: 100dvh;
  height: auto;
  align-items: start;
}
body.in-call .app-card {
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
body.in-call .controls {
  position: sticky;
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 20;
  box-shadow: 0 14px 40px rgba(15, 23, 42, .22);
  backdrop-filter: blur(10px);
}
.remote-videos-grid {
  position: absolute;
  inset: 0;
  display: grid;
  gap: 6px;
  padding: 6px;
  background: #020617;
}
.remote-videos-grid.grid-one { grid-template-columns: 1fr; }
.remote-videos-grid.grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.remote-videos-grid.grid-many { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.remote-video-wrap {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #0f172a;
}
.remote-video-tile {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #020617;
}
.remote-video-wrap.audio-only-wrap::before {
  content: attr(data-peer);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #dbeafe;
  font-size: clamp(20px, 5vw, 44px);
  font-weight: 900;
  background: radial-gradient(circle at center, #1e3a8a, #020617 70%);
}
.remote-video-tile.audio-only { opacity: 0; }
.remote-video-label {
  position: absolute;
  left: 10px;
  bottom: 9px;
  z-index: 2;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  background: rgba(15,23,42,.62);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
}
.video-placeholder { z-index: 1; }
#localVideoPreview { z-index: 3; }
.fullscreen-link { z-index: 5; }
#remoteVideoMain.hidden { display: none !important; }
.video-stage.fullscreen-mode .remote-videos-grid { padding: 8px; }
.video-stage.fullscreen-mode + .call-panel,
.video-stage.fullscreen-mode ~ .controls,
.video-stage.fullscreen-mode ~ .users-section { display: none !important; }
@media (max-width: 900px) {
  .video-stage { height: 42dvh; min-height: 260px; }
  body.in-call .controls { justify-content: center; }
}
@media (max-width: 700px) {
  .app-shell { display: block; overflow-y: auto; }
  .video-stage { height: 38dvh; min-height: 230px; }
  .remote-videos-grid.grid-two,
  .remote-videos-grid.grid-many { grid-template-columns: 1fr 1fr; }
  .controls { gap: 10px; }
  .user-actions { max-width: 190px; }
}
@media (max-width: 480px) {
  .video-stage { height: 34dvh; min-height: 210px; }
  .remote-videos-grid { gap: 4px; padding: 4px; }
  .remote-video-wrap { border-radius: 14px; }
  #localVideoPreview { width: 38%; }
}

/* PC fullscreen video layout fix */
body.video-fullscreen-active,
body.video-fullscreen-active html {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
}
body.video-fullscreen-active .app-shell,
body.video-fullscreen-active .card,
body.video-fullscreen-active .app-card {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
}
body.video-fullscreen-active .topbar,
body.video-fullscreen-active .call-panel,
body.video-fullscreen-active .controls,
body.video-fullscreen-active .users-section {
  display: none !important;
}
body.video-fullscreen-active .video-stage.fullscreen-mode {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  inset: 0 !important;
  width: 100dvw !important;
  max-width: 100dvw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  transform: none !important;
}
body.video-fullscreen-active .video-stage.fullscreen-mode .fullscreen-link {
  position: fixed !important;
  right: max(16px, env(safe-area-inset-right)) !important;
  bottom: max(16px, env(safe-area-inset-bottom)) !important;
  z-index: 10001 !important;
  max-width: calc(100dvw - 32px) !important;
  white-space: nowrap !important;
}
body.video-fullscreen-active .video-stage.fullscreen-mode #localVideoPreview {
  z-index: 10000 !important;
}


/* Professional mobile active-users panel fixes */
body.in-call .users-section {
  position: sticky;
  bottom: calc(86px + env(safe-area-inset-bottom));
  z-index: 18;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 14px 38px rgba(15, 23, 42, .16);
  backdrop-filter: blur(12px);
}
body.in-call .users-section .section-head { margin-bottom: 8px; }
body.in-call .users-section h2::after { content: ' / Add people'; font-weight: 700; color: var(--muted); font-size: 14px; }
body.in-call .users-list {
  max-height: min(34dvh, 290px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.in-call .user-row {
  gap: 10px;
  align-items: center;
}
body.in-call .user-main { flex: 1 1 auto; min-width: 0; }
body.in-call .user-actions {
  flex: 0 0 auto;
  max-width: none;
  justify-content: flex-end;
}
body.in-call .user-actions button {
  min-width: 72px;
  padding: 10px 12px;
}
@media (prefers-color-scheme: dark) {
  body.in-call .users-section { background: rgba(15, 23, 42, .94); }
}
@media (max-width: 700px) {
  body.in-call .app-card { padding-bottom: calc(128px + env(safe-area-inset-bottom)); }
  body.in-call .users-section {
    bottom: calc(78px + env(safe-area-inset-bottom));
    padding: 10px;
    border-radius: 20px;
  }
  body.in-call .users-list { max-height: min(32dvh, 260px); }
  body.in-call .user-row { padding: 11px 10px; }
  body.in-call .user-actions button { min-width: 68px; padding: 9px 10px; }
}
@media (max-width: 420px) {
  body.in-call .user-row { align-items: stretch; flex-direction: column; }
  body.in-call .user-actions { width: 100%; }
  body.in-call .user-actions button { flex: 1; }
}


/* Android/native mobile calling refinements */
@media (max-width: 700px) {
  .users-section {
    position: relative;
    z-index: 10;
    margin-top: 12px;
    border-radius: 18px;
  }
  .users-list {
    max-height: 42dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .call-panel,
  .controls,
  .users-section { flex-shrink: 0; }
  .app-card { max-height: none; overflow: visible; }
  .remote-video-tile,
  #remoteVideoMain { object-fit: contain !important; }
}

/* Keep the add-user list reachable during mobile fullscreen calls. */
@media (max-width: 700px) {
  body.video-fullscreen-active .video-stage.fullscreen-mode ~ .users-section {
    display: block !important;
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 62px;
    max-height: 34dvh;
    overflow: auto;
    z-index: 10001;
    background: rgba(15, 23, 42, .92);
    border: 1px solid rgba(148, 163, 184, .45);
    backdrop-filter: blur(10px);
  }
  body.video-fullscreen-active .video-stage.fullscreen-mode ~ .users-section .users-list {
    max-height: 24dvh;
  }
}


/* 4.0.3: mobile in-call users drawer. Minimized by default; swipe up or tap header to open. */
@media (max-width: 700px) {
  body.in-call .users-section {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 10020 !important;
    max-height: 70dvh;
    margin: 0 !important;
    padding: 10px 12px 12px !important;
    border-radius: 22px 22px 0 0 !important;
    transform: translateY(calc(100% - 54px));
    transition: transform .22s ease, box-shadow .22s ease;
    touch-action: pan-y;
  }
  body.in-call .users-section.drawer-open { transform: translateY(0); }
  body.in-call .users-section::before {
    content: '';
    display: block;
    width: 46px;
    height: 5px;
    border-radius: 999px;
    background: rgba(100,116,139,.75);
    margin: 0 auto 8px;
  }
  body.in-call .users-section .section-head {
    cursor: pointer;
    min-height: 34px;
  }
  body.in-call .users-section h2::after {
    content: ' / Swipe up to add people';
    font-weight: 700;
    color: var(--muted);
    font-size: 13px;
  }
  body.in-call .users-section.drawer-open h2::after { content: ' / Swipe down to hide'; }
  body.in-call .users-section:not(.drawer-open) .search,
  body.in-call .users-section:not(.drawer-open) .users-list { display: none; }
  body.in-call .users-section.drawer-open .users-list {
    display: block;
    max-height: 48dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.in-call .controls {
    bottom: calc(58px + env(safe-area-inset-bottom)) !important;
  }
  body.video-fullscreen-active .video-stage.fullscreen-mode ~ .users-section {
    left: 10px !important;
    right: 10px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    max-height: 70dvh !important;
    overflow: visible !important;
  }
}


/* 4.0.4: Android/mobile voice speaker + fullscreen drawer refinements */
.remote-video-tile,
#remoteVideoMain {
  object-fit: contain !important;
}
.native-speaker-btn {
  width: 54px;
  height: 54px;
  min-width: 54px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  line-height: 1;
  border-radius: 999px;
  background: #475569;
  color: #fff;
  font-size: 22px;
}
.native-speaker-btn.speaker-on {
  background: #2563eb;
}
body.video-fullscreen-active .video-stage.fullscreen-mode .fullscreen-link {
  position: fixed !important;
  left: max(12px, env(safe-area-inset-left)) !important;
  right: auto !important;
  bottom: max(12px, env(safe-area-inset-bottom)) !important;
  z-index: 2147483647 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  max-width: calc(100dvw - 28px) !important;
  pointer-events: auto !important;
}
@media (max-width: 700px) {
  body.in-call .users-section {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 10020 !important;
    max-height: min(68dvh, 520px) !important;
    margin: 0 !important;
    padding: 10px 12px 12px !important;
    border-radius: 22px 22px 0 0 !important;
    transform: translateY(calc(100% - 52px)) !important;
    transition: transform .22s ease, box-shadow .22s ease !important;
    overflow: hidden !important;
    touch-action: pan-y !important;
  }
  body.in-call .users-section.drawer-open {
    transform: translateY(0) !important;
    overflow: visible !important;
    box-shadow: 0 -18px 44px rgba(15, 23, 42, .28) !important;
  }
  body.in-call .users-section:not(.drawer-open) .search,
  body.in-call .users-section:not(.drawer-open) .users-list {
    display: none !important;
  }
  body.in-call .users-section.drawer-open .users-list {
    display: block !important;
    max-height: min(46dvh, 360px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.video-fullscreen-active .video-stage.fullscreen-mode ~ .users-section {
    display: block !important;
    bottom: calc(56px + env(safe-area-inset-bottom)) !important;
    z-index: 10020 !important;
  }
  body.video-fullscreen-active .video-stage.fullscreen-mode ~ .users-section:not(.drawer-open) {
    transform: translateY(calc(100% - 44px)) !important;
  }
  body.video-fullscreen-active .video-stage.fullscreen-mode .fullscreen-link {
    left: max(12px, env(safe-area-inset-left)) !important;
    right: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    z-index: 2147483647 !important;
  }
}

/* 4.1.0 call waiting, tablet, fullscreen, and phone-call UX */
.busy-call-popup {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2, 6, 23, .62);
  backdrop-filter: blur(10px);
}
.busy-call-card {
  width: min(420px, 100%);
  border-radius: 30px;
  padding: 24px;
  background: var(--card, #fff);
  color: var(--text, #0f172a);
  box-shadow: 0 28px 90px rgba(0,0,0,.38);
  text-align: center;
  border: 1px solid rgba(148,163,184,.28);
}
.busy-avatar {
  width: 84px;
  height: 84px;
  margin: 0 auto 12px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #2563eb, #14b8a6);
  color: white;
  font-weight: 900;
  font-size: 30px;
}
.busy-title { font-size: 22px; font-weight: 900; margin-bottom: 6px; }
.busy-subtitle { color: var(--muted, #64748b); line-height: 1.45; margin-bottom: 16px; }
.busy-action { width: 100%; margin-top: 10px; border-radius: 18px; padding: 13px 14px; }
.busy-action.primary { background: #2563eb; }
.busy-action.danger { background: #dc2626; }
.busy-action.muted { background: #64748b; }
body.video-fullscreen-active .users-section { display: none !important; }
body.video-fullscreen-active .video-stage.fullscreen-mode .fullscreen-link {
  left: max(12px, env(safe-area-inset-left)) !important;
  right: auto !important;
  bottom: max(12px, env(safe-area-inset-bottom)) !important;
  z-index: 2147483647 !important;
}
@media (min-width: 701px) and (max-width: 1180px) {
  .app-card { max-width: 100%; }
  .users-section { max-width: 100%; }
  .users-list { max-height: 38dvh; overflow-y: auto; }
  body.in-call .users-section {
    position: sticky;
    bottom: max(10px, env(safe-area-inset-bottom));
    transform: none !important;
    max-height: 44dvh;
    overflow: hidden;
  }
  body.in-call .users-section .users-list { max-height: 30dvh; overflow-y: auto; }
  .remote-videos-grid.grid-many { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  body.video-fullscreen-active .users-section { display: none !important; }
  body.in-call .users-section.drawer-open .users-list,
  body.in-call .users-section.android-drawer-open .users-list { max-height: min(50dvh, 420px) !important; }
}


/* 4.1.1: Android app uses + Add popup instead of user drawer during calls */
body.in-call .users-section { display: none !important; }
body.video-fullscreen-active .users-section { display: none !important; }
body.video-fullscreen-active .video-stage.fullscreen-mode .fullscreen-link { left: max(12px, env(safe-area-inset-left)) !important; right: auto !important; bottom: max(12px, env(safe-area-inset-bottom)) !important; z-index: 2147483647 !important; }
.remote-video-tile, #remoteVideoMain { object-fit: contain !important; }


/* 4.1.2 professional call UI and hold/fullscreen fixes */
.call-on-hold .call-panel { outline: 3px solid rgba(245,158,11,.45); background: linear-gradient(135deg,#fffbeb,#f8fafc)!important; }
.call-on-hold .call-panel::after { content:'Call on hold'; display:inline-flex; align-items:center; justify-content:center; padding:7px 12px; border-radius:999px; background:#f59e0b; color:#111827; font-weight:900; grid-column:1/-1; }
.call-actions button, #acceptVoiceBtn, #acceptVideoBtn, #rejectBtn, #hangupBtn { min-height:52px; border-radius:999px!important; font-weight:900!important; box-shadow:0 10px 28px rgba(15,23,42,.16); }
#acceptVoiceBtn { background:#16a34a!important; color:white!important; }
#acceptVideoBtn { background:#2563eb!important; color:white!important; }
#rejectBtn, #hangupBtn { background:#dc2626!important; color:white!important; }
body.video-fullscreen-active #addPeopleBtn, body.video-fullscreen-active .add-people-overlay { display:none!important; }
body.video-fullscreen-active .fullscreen-link { left:max(14px,env(safe-area-inset-left))!important; right:auto!important; bottom:max(14px,env(safe-area-inset-bottom))!important; z-index:2147483647!important; }
@media (min-width: 768px) and (pointer: coarse) { .add-people-card { width:min(86vw,760px)!important; max-height:78dvh!important; } .users-list,.add-people-list{max-height:58dvh!important;} }


/* 4.1.2b professional WhatsApp-style call buttons */
.wa-call-btn {
  min-height: 54px;
  border-radius: 999px !important;
  padding: 9px 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 28px rgba(15,23,42,.18);
}
.wa-call-btn .wa-ico { font-size: 20px; line-height: 1; }
.wa-call-btn .wa-label { font-size: 15px; }
.wa-call-btn.voice { background: #16a34a !important; color: white !important; }
.wa-call-btn.video { background: #2563eb !important; color: white !important; }
.wa-call-btn.add { background: #0f766e !important; color: white !important; min-width: 54px !important; width: 54px !important; padding: 0 !important; font-size: 30px !important; }
@media (max-width:700px){ .wa-call-btn{min-width:92px;} .wa-call-btn.add{min-width:54px;} }

/* 4.1.3b professional call controls */
.wa-call-btn{border:0;border-radius:999px;min-height:50px;padding:9px 15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:900;font-size:15px;line-height:1;box-shadow:0 10px 24px rgba(15,23,42,.18)}
.wa-call-btn.voice{background:#16a34a;color:#fff}
.wa-call-btn.video{background:#2563eb;color:#fff}
.wa-call-btn.accept{background:#16a34a;color:#fff}
.wa-call-btn.reject,.wa-call-btn.hangup{background:#dc2626;color:#fff}
#acceptVoiceBtn{background:#16a34a!important;color:#fff!important;border-radius:999px!important}
#acceptVideoBtn{background:#2563eb!important;color:#fff!important;border-radius:999px!important}
#rejectBtn,#hangupBtn{background:#dc2626!important;color:#fff!important;border-radius:999px!important}

/* 4.1.4 professional call button update */
.wa-call-btn {
  border: 0 !important; border-radius: 999px !important; min-height: 54px !important;
  padding: 10px 16px !important; display: inline-flex !important; align-items: center !important;
  justify-content: center !important; gap: 9px !important; font-weight: 900 !important;
  font-size: 15px !important; line-height: 1 !important; color: #fff !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.18) !important; white-space: nowrap !important;
}
.wa-call-btn .wa-ico { width: 24px; height: 24px; display: inline-grid; place-items: center; }
.wa-call-btn .wa-ico svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 2.35; stroke-linecap: round; stroke-linejoin: round; }
.wa-call-btn.voice, .wa-call-btn.accept { background: linear-gradient(135deg,#22c55e,#16a34a) !important; }
.wa-call-btn.video { background: linear-gradient(135deg,#3b82f6,#2563eb) !important; }
.wa-call-btn.reject, .wa-call-btn.hangup { background: linear-gradient(135deg,#ef4444,#dc2626) !important; }
.wa-call-btn.add { min-width: 54px !important; width: 54px !important; padding: 0 !important; background: linear-gradient(135deg,#6366f1,#4f46e5) !important; }
.user-row .wa-call-btn { min-width: 104px !important; }
.call-actions .wa-call-btn { min-width: 132px !important; }
@media (max-width:700px){ .user-row .wa-call-btn { min-width: 96px !important; padding: 9px 13px !important; } .wa-call-btn .wa-label { font-size: 14px; } }


/* 4.2.0 clean professional UI reset - keep this block last */
:root{
  --pc-bg:#f6f8fb;--pc-card:#ffffff;--pc-text:#111827;--pc-muted:#64748b;--pc-border:#dbe4ef;
  --pc-green:#16a34a;--pc-blue:#2563eb;--pc-red:#dc2626;--pc-dark:#111827;--pc-gray:#475569;
}
.app-shell{background:linear-gradient(135deg,#f8fbff,#eef4fb)!important;}
.card{box-shadow:0 20px 55px rgba(15,23,42,.08)!important;border:1px solid rgba(148,163,184,.28)!important;}
.call-panel{display:grid!important;grid-template-columns:auto 1fr!important;align-items:center!important;gap:16px!important;text-align:left!important;min-height:94px!important;padding:18px!important;position:relative!important;overflow:hidden!important;}
.call-panel .call-text{min-width:0!important;}
.call-title{font-size:22px!important;line-height:1.15!important;white-space:normal!important;overflow-wrap:anywhere!important;}
.call-subtitle{font-size:15px!important;line-height:1.35!important;color:var(--pc-muted)!important;max-width:100%!important;}
.call-actions{grid-column:1/-1!important;display:none!important;justify-content:center!important;gap:14px!important;flex-wrap:wrap!important;margin-top:14px!important;}
body.pc-incoming .call-actions{display:flex!important;}
body:not(.pc-incoming) #acceptVoiceBtn,body:not(.pc-incoming) #acceptVideoBtn,body:not(.pc-incoming) #rejectBtn{display:none!important;}
body:not(.in-call) #hangupBtn{display:none!important;}
.user-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:14px!important;padding:14px!important;}
.user-main{min-width:0!important;}
.user-actions{display:flex!important;gap:10px!important;justify-content:flex-end!important;align-items:center!important;max-width:none!important;}
.pc-call-btn,.wa-call-btn,.user-actions button,#acceptVoiceBtn,#acceptVideoBtn,#rejectBtn,#hangupBtn{border:0!important;border-radius:999px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;font-weight:900!important;letter-spacing:.01em!important;min-height:46px!important;padding:10px 16px!important;box-shadow:0 10px 22px rgba(15,23,42,.16)!important;transition:transform .12s ease,filter .12s ease,box-shadow .12s ease!important;white-space:nowrap!important;}
.pc-call-btn:hover,.wa-call-btn:hover,.user-actions button:hover,#acceptVoiceBtn:hover,#acceptVideoBtn:hover,#rejectBtn:hover,#hangupBtn:hover{filter:brightness(.98)!important;transform:translateY(-1px)!important;}
.pc-call-btn svg,.wa-call-btn svg,.user-actions button svg,#acceptVoiceBtn svg,#acceptVideoBtn svg,#rejectBtn svg,#hangupBtn svg{width:20px!important;height:20px!important;stroke:currentColor!important;stroke-width:2.4!important;fill:none!important;stroke-linecap:round!important;stroke-linejoin:round!important;}
.pc-call-btn.audio,.wa-call-btn.voice,.wa-call-btn.accept,#acceptVoiceBtn{background:var(--pc-green)!important;color:#fff!important;}
.pc-call-btn.video,.wa-call-btn.video,#acceptVideoBtn{background:var(--pc-blue)!important;color:#fff!important;}
.pc-call-btn.reject,.wa-call-btn.reject,#rejectBtn,.pc-call-btn.end,.wa-call-btn.hangup,#hangupBtn{background:var(--pc-red)!important;color:#fff!important;}
.pc-call-btn.add,.wa-call-btn.add,#addPeopleBtn{background:#0f766e!important;color:#fff!important;min-width:52px!important;}
.user-actions .pc-call-btn{min-width:56px!important;padding:10px 14px!important;}
.controls{position:relative!important;display:flex!important;justify-content:center!important;gap:12px!important;flex-wrap:wrap!important;}
.controls.hidden{display:none!important;}
.controls .icon-btn,#micBtn,#cameraBtn,#nativeSpeakerBtn,#addPeopleBtn{width:54px!important;height:54px!important;min-width:54px!important;min-height:54px!important;border-radius:999px!important;background:#1f2937!important;color:#fff!important;border:0!important;box-shadow:0 10px 24px rgba(15,23,42,.2)!important;}
#hangupBtn{min-width:74px!important;}
#micBtn.off,#cameraBtn.off{background:#64748b!important;}
#nativeSpeakerBtn.on{background:#0f766e!important;}
#videoStage,#remoteVideoMain,.remote-video-tile{object-fit:contain!important;}
.video-stage.fullscreen-mode{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:100vw!important;max-height:100dvh!important;margin:0!important;border-radius:0!important;transform:none!important;z-index:2147483000!important;background:#000!important;}
body.video-fullscreen-active{overflow:hidden!important;position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;}
body.video-fullscreen-active .fullscreen-link{position:fixed!important;left:max(14px,env(safe-area-inset-left))!important;right:auto!important;bottom:max(14px,env(safe-area-inset-bottom))!important;z-index:2147483647!important;display:inline-flex!important;pointer-events:auto!important;background:rgba(15,23,42,.88)!important;color:#fff!important;}
body.video-fullscreen-active .users-section,body.video-fullscreen-active #addPeopleBtn,body.video-fullscreen-active .add-people-overlay{display:none!important;}
.call-on-hold .call-panel{outline:3px solid rgba(245,158,11,.45)!important;background:linear-gradient(135deg,#fff7ed,#ffffff)!important;}
.call-on-hold .call-panel::after{content:'Call on hold';display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border-radius:999px;background:#f59e0b;color:#111827;font-weight:900;grid-column:1/-1;}
.add-people-overlay{position:fixed!important;inset:0!important;z-index:2147482000!important;background:rgba(15,23,42,.48)!important;display:grid!important;place-items:center!important;padding:18px!important;}
.add-people-card{width:min(94vw,560px)!important;max-height:min(78dvh,680px)!important;overflow:auto!important;background:#fff!important;border-radius:24px!important;padding:18px!important;box-shadow:0 30px 80px rgba(15,23,42,.35)!important;}
@media (max-width:700px){
  .app-shell{padding:8px!important;}
  .login-card,.app-card{padding:16px!important;border-radius:22px!important;}
  .call-panel{grid-template-columns:auto minmax(0,1fr)!important;gap:12px!important;padding:14px!important;}
  .call-title{font-size:19px!important;}
  .call-actions{display:none!important;flex-direction:column!important;align-items:stretch!important;}
  body.pc-incoming .call-actions{display:flex!important;}
  .call-actions button{width:100%!important;justify-content:center!important;}
  .user-row{grid-template-columns:1fr!important;align-items:stretch!important;}
  .user-actions{justify-content:stretch!important;}
  .user-actions .pc-call-btn,.user-actions .wa-call-btn{flex:1 1 0!important;}
  .controls{position:sticky!important;bottom:0!important;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.96))!important;padding:10px 0 calc(10px + env(safe-area-inset-bottom))!important;backdrop-filter:blur(10px)!important;z-index:60!important;}
}
@media (min-width:768px) and (pointer:coarse){.users-list{max-height:52dvh!important;overflow:auto!important}.add-people-card{width:min(88vw,760px)!important}.video-stage{height:min(58dvh,620px)!important}}