:root{
  /* Cohesive single-accent palette (cyan) */
  /* 10% brighter theme */
  --bg0:#3c4373;
  --bg1:#383e69;
  --card: rgba(39,44,62,0.58);
  --panel: rgba(39,44,62,0.90);
  --cardSolid:#383e61;
  --text:#ffffff;
  --muted:#dbe2fd;
  --danger:#ff5555;
  --ok:#3affc7;
  --warn:#ffe055;

  --border:rgba(255,255,255,0.16);
  --borderStrong:rgba(255,255,255,0.22);

  /* Single accent (cyan) */
  --accentA: rgba(82,255,255,0.92);
  --accentB: rgba(82,255,255,0.72);
  --accentC: rgba(82,255,255,0.50);
  --accentW: rgba(82,255,255,0.36);

  --shadow0: 0 14px 34px rgba(0,0,0,0.45);
  --shadow1: 0 20px 52px rgba(0,0,0,0.58);
  --glowA: 0 0 0 1px rgba(82,255,255,0.16), 0 0 28px rgba(82,255,255,0.12);
  --glowB: 0 0 0 1px rgba(82,255,255,0.12), 0 0 22px rgba(82,255,255,0.10);

  --tile-w: 300px;
  --tile-h: 250px;
}
*{box-sizing:border-box;}
[hidden]{display:none !important;}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 3D depth: layered light sources and a subtle vignette */
  background:
    radial-gradient(1200px 720px at 20% -18%, rgba(82,255,255,0.42), transparent 60%),
    radial-gradient(980px 560px at 72% -22%, rgba(255,255,255,0.16), transparent 64%),
    radial-gradient(900px 560px at 50% 120%, rgba(0,0,0,0.55), transparent 62%),
    linear-gradient(180deg, #4860b9 0%, var(--bg0) 56%, #272839 100%);
  background-attachment: fixed;
}

.wrap{max-width:1500px;margin:0 auto;padding:16px;}
.header h1{margin:0 0 4px 0;font-size:24px;}
.header p{margin:0 0 12px 0;color:var(--muted);}
.card{
  position:relative;
  background: var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:12px;
  margin-bottom:12px;
  /* 3D lift: stronger outer shadow + subtle inner bevel */
  box-shadow:
    0 18px 48px rgba(0,0,0,0.60),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -2px 10px rgba(0,0,0,0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}


/* subtle inner rim for a more “premium” card (robust: no mask tricks) */
.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  pointer-events:none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    inset 0 0 26px rgba(255,255,255,0.03);
  opacity:0.95;
}

#callCard{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  border-radius:0;
}
.row{display:flex;gap:8px;flex-wrap:wrap;}
input{
  flex:1;
  min-width:160px;
  padding:11px;
  border-radius:12px;
  border:1px solid var(--borderStrong);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.28));
  color:var(--text);
  outline:none;
  font:inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 10px 22px rgba(0,0,0,0.20);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
input:hover{border-color: rgba(255,255,255,0.32);}
input:focus{
  border-color: rgba(82,255,255,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 0 3px rgba(82,255,255,0.14), 0 12px 26px rgba(0,0,0,0.26);
}
#roomInput{text-transform:uppercase;}
#nameInput{text-transform:none;}

/* Ensure datetime-local text renders correctly on dark panels (Safari/WebKit). */
input[type="datetime-local"]{
  color:var(--text);
  -webkit-text-fill-color:var(--text);
  color-scheme: dark;
}
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
input[type="datetime-local"]::-webkit-datetime-edit-text,
input[type="datetime-local"]::-webkit-datetime-edit-month-field,
input[type="datetime-local"]::-webkit-datetime-edit-day-field,
input[type="datetime-local"]::-webkit-datetime-edit-year-field,
input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
input[type="datetime-local"]::-webkit-datetime-edit-minute-field{
  color:var(--text);
}

/* Join page: keep the username box compact.
   IMPORTANT: The join stack is a column flex container. If the input has flex
   growth or a flex-basis, it will grow vertically (making it look like a large
   textarea). Force it to size to content and use an explicit one-line height. */
/* Join page username input: single-line sizing and width aligned with the
   button row. The join stack is inline-flex, so it shrink-wraps to the widest
   child (typically the button row). The input then fills that width. */
#joinCard #nameInput{
  flex: 0 0 auto !important;
  /* Width is set to match the actions row via a small JS measurement.
     Keep a sensible fallback for very small screens. */
  width: min(92vw, 460px);
  min-width: 0;
  /* Slightly larger single-line input for easier typing. */
  height: 40px;
  min-height: 40px;
  padding: 7px 12px;
  line-height: 24px;
  font-size: 16px; /* prevents iOS zoom */
  /* Center the input within the column stack (it has an explicit width). */
  align-self: center;
  margin-left: auto;
  margin-right: auto;
}

/* Invite-link username modal: match compact one-line sizing. */
#usernameOverlay #usernameModalInput{
  height: 38px;
  min-height: 38px;
  padding: 6px 10px;
  line-height: 24px;
  font-size: 16px; /* prevents iOS zoom */
}

/* Join page: stack username above buttons and center the card on the page. */
body.joinMode .wrap{
  max-width:none;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
body.joinMode #joinCard{
  width:min(520px, 92vw);
  margin:0;
  text-align:center;
}
#joinCard .joinStack{
  display:inline-flex;
  flex-direction:column;
  /* Center children (input + buttons) within the join card. */
  align-items:center;
  gap:10px;
}
#joinCard .joinActions{
  display:inline-flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  align-self:center;
}

/* Join page brand header (RosellaStream) */
#joinCard .brandTitle{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  margin: 2px 0 10px 0;
  font-size: clamp(40px, 7.2vw, 64px);
  /* Match the RosellaStream wordmark look: slimmer weight + slightly condensed feel. */
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Use a slimmer weight consistently for both 'Rosella' and 'Stream'. */
  font-weight: 600;
  /* Slight tracking to match the reference wordmark */
  letter-spacing: 0.2px;
  font-stretch: condensed;
  line-height: 1;
  user-select: none;
}
#joinCard .brandRosella{
  font-weight: 600;
  color: #ffffff;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.26),
    0 10px 22px rgba(0,0,0,0.28);
}
#joinCard .brandStream{
  margin-left: 2px;
  background: linear-gradient(90deg,
    rgba(97,250,255,1) 0%,
    rgba(56,216,255,1) 60%,
    rgba(56,188,255,1) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 14px rgba(97,250,255,0.55),
    0 0 22px rgba(56,216,255,0.24);
}
#joinCard .hint, #joinCard .status{ text-align:center; }
a.linkBtn, button{
  padding:11px 13px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  color:var(--text);
  cursor:pointer;
  font:inherit;
  line-height:1.1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  box-shadow: 0 10px 24px rgba(0,0,0,0.30);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


/*
  "Enabled" state styling for stream controls.
  The user requested that all enabled buttons match the Lock Conference enabled look.
*/
button.isOn,
#lockBtn.locked{
  border-color: rgba(255,85,85,0.60) !important;
  background: rgba(255,85,85,0.18) !important;
}
button.isOn:hover,
#lockBtn.locked:hover{
  background: rgba(255,85,85,0.26) !important;
}

a.linkBtn:hover, button:hover{background:linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05));}
a.linkBtn:active, button:active{transform:translateY(1px);}
button:disabled{opacity:0.6;cursor:default;transform:none;}
button.danger{border-color:rgba(255,85,85,0.45);background:rgba(255,85,85,0.15);}
button.danger:hover{background:rgba(255,85,85,0.25);}
.btnError{
  border-color: rgba(255,85,85,0.75) !important;
  background: rgba(255,85,85,0.18) !important;
}
.hint{margin-top:8px;color:var(--muted);font-size:12px;}
.error{margin-top:10px;color:#ffe5e5;background:rgba(255,85,85,0.15);border:1px solid rgba(255,85,85,0.25);padding:10px;border-radius:10px;white-space:pre-wrap;}
.topbar{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.label{color:var(--muted);font-size:12px;}
.value{font-weight:600;}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
.controls{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin-left:auto;           /* keep the menu button on the far right */
  justify-content:flex-end;   /* right-align when controls wrap to their own line */
  flex:0 0 auto;
}
.recordTimer{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(0,0,0,0.25);
  user-select:none;
}
#recordBtn.recording{
  border-color: rgba(255,85,85,0.75);
  background: rgba(255,85,85,0.18);
}
#recordBtn.recording:hover{background: rgba(255,85,85,0.26);}
.status{margin-top:10px;color:var(--muted);font-size:12px;}

/* Call status line: make it more readable/prominent. */
#callStatusLine{
  font-size: clamp(14px, 2.2vw, 18px);
}

/* Slight emphasis for certain transient call statuses (e.g. waiting on host approval). */
.status.statusEmphasis{
  font-size: clamp(13px, 1.8vw, 16px);
  font-weight: 600;
}
.callStatus{margin-top:8px;margin-bottom:8px;}

.qLabel{color:var(--muted);font-size:12px;}

.videoBox{
  position:relative;
  box-sizing:border-box;
  padding:6px;
  /* Dark gray border for webcam tiles */
  border:1px solid #3f3f3f;
  border-radius:22px;
  overflow:hidden;
  /* Tile padding/backing around the webcam: light gray. */
  background: rgba(211,211,211,0.95);
  /* Remove drop shadow behind the webcam window; keep only a subtle inner edge. */
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Remove decorative multi-colour highlights from the webcam frame. */
.videoBox::before,
.videoBox::after{ content:""; display:none; }

.videoBox video{
  width:100%;
  height:100%;
  display:block;
  /* Black backing behind the webcam feed (covers load/letterbox cases). */
  background:#000;
  object-fit:cover;
  border-radius:18px;
  position:relative;
  z-index:2;
}

.tag{
  position:absolute;
  top:10px;
  left:10px;
  font-size:10px;
  padding:4px 8px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(0,0,0,0.50), rgba(0,0,0,0.32));
  border:1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  user-select:none;
  z-index:5;
}
.kickBtn{
  position:absolute;
  top:10px;
  right:10px;
  width:30px;
  height:30px;
  padding:0;
  border-radius:12px;
  border:1px solid rgba(255,85,85,0.55);
  background: linear-gradient(180deg, rgba(255,85,85,0.22), rgba(255,85,85,0.12));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color:var(--text);
  font-weight:700;
  font-size:12px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:6;
}
.kickBtn:hover{background:rgba(255,85,85,0.25);}
.kickBtn:active{transform:translateY(1px);}
.cover{position:absolute;inset:6px;background:#000 url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20200%20200%27%3E%0A%3Ccircle%20cx%3D%27100%27%20cy%3D%2778%27%20r%3D%2738%27%20fill%3D%27%236c6c6c%27/%3E%0A%3Cpath%20d%3D%27M35%20190c8-45%2036-70%2065-70s57%2025%2065%2070%27%20fill%3D%27%236c6c6c%27/%3E%0A%3C/svg%3E") center/40% no-repeat;display:none;z-index:4;border-radius:18px;}
.cover.show{display:block;}

/* Audio-only mode: keep placeholder panel but remove avatar icon */
/*
  In "audio only" screen share mode, we still want to display the standard
  "no webcam" placeholder artwork. The label below communicates that
  audio-only streaming is active.
*/
/* .videoBox.audioOnlyMode .cover{background-image:none;} */

/* Audio-only share label (shown inside the tile when a participant is sharing system/tab audio without video) */
.audioOnlyLabel{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  /* Ensure label sits above the placeholder icon panel. */
  z-index:5;
  pointer-events:none;
  color:#ffffff;
  font-weight:700;
  text-align:center;
  padding:12px;
  line-height:1.15;
  text-shadow:0 2px 8px rgba(0,0,0,.9);
}



.camGrid{
  /*
    Flex-wrap layout centers webcam tiles automatically.
    This also centers the *last row* (unlike grid tracks which can leave the
    final partial row visually left-aligned).
  */
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  /* Prevent flexbox "stretch" behavior from distorting tile heights on iOS/Safari. */
  align-items:flex-start;
  align-content:flex-start;
  max-height:min(82vh, 920px);
  overflow:auto;
  padding:2px;
}
/* Let remote videos participate in the grid without an extra wrapper (where supported). */
#remoteVideos{display:contents;}
/* Always fill the grid cell so tiles never overlap.
   - If #remoteVideos is `display: contents`, its children are grid items.
   - If a browser cannot apply `display: contents`, app.js moves remote tiles to be
     direct children of .camGrid.
*/
.camGrid > .videoBox, #remoteVideos .videoBox{
  /* Use the preferred tile width, but never exceed the container width.
     This makes the +/- tile buttons work consistently on phones, tablets, and desktop. */
  width: min(var(--tile-w), 100%);
  max-width: 100%;
  flex: 0 1 min(var(--tile-w), 100%);
  /* When the container is narrow, allow shrinking without breaking layout. */
  min-width: 120px;
  height: var(--tile-h-local, var(--tile-h));
}

/*
  NOTE: We intentionally avoid relying on CSS `aspect-ratio` for tile sizing.
  On some iOS/iPadOS Safari builds, flex-wrapped items can end up shrinking in
  width while keeping a fixed height, which looks like tiles only resize
  horizontally. app.js uses a ResizeObserver to keep height in sync with the
  *rendered* width so tiles scale evenly on phones, iPads, and desktop.
*/



.tileSizer{display:inline-flex;gap:6px;align-items:center;}
.miniBtn{padding:9px 12px;min-width:40px;line-height:1;font-size:16px;}
.miniBtn:disabled{opacity:0.55;cursor:not-allowed;}

@media (max-width: 950px){
  .camGrid{max-height:min(70vh, 600px);}
}


/* ---------- Screen sharing UI ---------- */
.videoBox.sharing{
  border-color: rgba(255,85,85,0.85);
  box-shadow: 0 0 0 2px rgba(255,85,85,0.55) inset;
}
.ssIcon{
  position:absolute;
  right:8px;
  bottom:8px;
  width:34px;
  height:34px;
  padding:0;
  border-radius:10px;
  border:1px solid var(--border);
  background:rgba(0,0,0,0.55);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  line-height:1;
  z-index:4;
  cursor:pointer;
  user-select:none;
}
.ssIcon:hover{background:rgba(0,0,0,0.70);}
.ssIcon:active{transform:translateY(1px);}

/* ---------- Share screen resolution menu ---------- */
.shareWrap{position:relative;display:inline-flex;align-items:center;}
.shareMenu{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  min-width:260px;
  /* 3D panel */
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  box-shadow:
    0 18px 48px rgba(0,0,0,0.62),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -2px 10px rgba(0,0,0,0.34);
  z-index:60;
}
.shareMenuRow{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;}
.shareMenuRow label{font-size:12px;color:var(--muted);}
.shareMenuActions{display:flex;gap:8px;justify-content:flex-end;margin-bottom:8px;}
.shareMenuActions #shareAllowAllBtn{margin-right:auto;}
.shareMenuHint{font-size:11px;color:var(--muted);line-height:1.2;}
select{
  padding:10px;
  border-radius:12px;
  border:1px solid var(--borderStrong);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.26));
  color:var(--text);
  outline:none;
  font:inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 10px 22px rgba(0,0,0,0.18);
}
select:hover{border-color: rgba(255,255,255,0.32);}
select:focus{border-color: rgba(82,255,255,0.55);}

/* Share Screen resolution dropdown: ensure readable text in the native option list */
#shareRes{
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.92));
  border:1px solid rgba(0,0,0,0.18);
  color:#000000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.90), 0 10px 22px rgba(0,0,0,0.18);
}
#shareRes option{color:#000000;}

/* Keyboard focus styling */
button:focus-visible, a.linkBtn:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid rgba(82,255,255,0.55);
  outline-offset:2px;
  box-shadow: 0 0 0 3px rgba(82,255,255,0.14);
}


@media (max-width: 700px){
  .wrap{padding:10px;}
  .topbar{gap:10px;}
  .controls{width:100%;}
  .row{gap:8px;}
  input{min-width:140px;flex:1 1 140px;}
  button, a.linkBtn{flex:1 1 140px;}
  .camGrid{max-height:calc(100vh - 180px);}
  /* Keep menus on-screen on small viewports */
  .shareMenu{right:0;left:auto;min-width:min(calc(100vw - 24px), 320px);}
}


/* ---------- Centered modal prompt (host approvals, etc.) ---------- */
.modalOverlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(0,0,0,0.55);
  z-index:200;
}
.modalCard{
  width:min(520px, 92vw);
  /* 3D panel */
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  box-shadow:
    0 22px 60px rgba(0,0,0,0.62),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -2px 12px rgba(0,0,0,0.34);
}

/* Compact modals: used for scheduling and join-wait prompts. */
.modalCard.compact{
  width:min(460px, 92vw);
  padding:12px;
  border-radius:16px;
}
.modalCard.compact .modalTitle{
  margin-bottom:6px;
  font-size:1.02rem;
}
.modalCard.compact .modalHint{
  margin-top:8px;
  font-size:0.88rem;
}
.modalCard.compact .waitLine{margin-top:6px;}
.modalCard.compact .waitLabel{min-width:80px;}
.modalCard.compact .modalInlineRow{margin-top:10px;}
.modalTitle{
  font-weight:700;
  margin-bottom:8px;
}
.modalBody{
  color:var(--text);
  line-height:1.35;
  white-space:pre-wrap;
}

.modalHint{
  margin-top:10px;
  font-size:0.92rem;
  color:var(--muted);
}

.waitLine{
  display:flex;
  gap:8px;
  align-items:baseline;
  margin-top:8px;
}
.waitLabel{
  color:var(--muted);
  min-width:92px;
}

.compactWait .waitLabel{min-width:76px;}
.waitIn{color:var(--muted);}

/* Small pill/bubble for short values (room codes etc.) */
.chip{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--borderStrong);
  background:rgba(255,255,255,0.10);
  box-shadow:0 8px 18px rgba(0,0,0,0.18);
}
.modalActions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  margin-top:12px;
}


/* Username prompt: input + Join + Leave inline */
.modalInlineRow{
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:12px;
}

/*
  Compact scheduling row (Invite schedule):
  `datetime-local` + two buttons can overflow horizontally on smaller viewports.
  Wrap so the modal "back panel" always fully covers the content.
*/
.modalCard.compact .modalInlineRow{
  flex-wrap:wrap;
  align-items:center;
}
.modalCard.compact .modalInlineLabel{
  flex:1 1 100%;
  margin-bottom:2px;
}
.modalCard.compact #inviteScheduleInput{
  flex:1 1 240px;
  min-width:220px;
}
.modalCard.compact #inviteScheduleOk,
.modalCard.compact #inviteScheduleCancel{
  flex:0 0 auto;
}

@media (max-width: 520px){
  .modalCard.compact #inviteScheduleOk,
  .modalCard.compact #inviteScheduleCancel{
    flex:1 1 140px;
  }
}

.modalInlineLabel{
  color:var(--muted);
  font-size:0.92rem;
  white-space:nowrap;
}
.modalInlineRow input{
  flex:1 1 220px;
  min-width:180px;
  user-select:text;
  -webkit-user-select:text;
  pointer-events:auto;
  touch-action:manipulation;
}
.modalInlineRow button{
  flex:0 0 auto;
  white-space:nowrap;
}

/* Ensure modal elements remain interactive across browsers/WebViews. */
.modalOverlay,
.modalCard{
  pointer-events:auto;
  touch-action:manipulation;
}
.modalCard input{
  user-select:text;
  -webkit-user-select:text;
  pointer-events:auto;
}

@media (max-width: 420px){
  .modalInlineRow{flex-wrap:wrap;}
  .modalInlineRow button{flex:1 1 120px;}
}

/* Hide scrollbars while keeping scroll functionality */
body{
  overflow-y:auto;
  scrollbar-width:none;          /* Firefox */
  -ms-overflow-style:none;       /* IE/Edge legacy */
}
body::-webkit-scrollbar{width:0;height:0;} /* Chrome/Safari */
html{scrollbar-width:none;-ms-overflow-style:none;}
html::-webkit-scrollbar{width:0;height:0;}
.wrap{scrollbar-width:none;-ms-overflow-style:none;}
.wrap::-webkit-scrollbar{width:0;height:0;}

/* Any scrollable panels: hide their scrollbars too (keep scroll). */
.camGrid,
.menuPanel,
.shareMenu{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.camGrid::-webkit-scrollbar,
.menuPanel::-webkit-scrollbar,
.shareMenu::-webkit-scrollbar{width:0;height:0;}

/* Dropdown menu for controls (all buttons are inside the menu) */
.menuWrap{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
}
.menuBtn{
  padding:9px 12px;
  border-radius:999px;
}
.menuPanel{
  position:absolute;
  top:calc(100% + 8px);
  /* Anchor to the right edge of the trigger so the panel opens leftwards
     (prevents going off-screen on phones/iPads/desktop). */
  right:0;
  left:auto;
  min-width:220px;
  max-width:min(calc(100vw - 24px), 320px);
  /* 3D panel */
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px;
  box-shadow:
    0 22px 60px rgba(0,0,0,0.62),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -2px 12px rgba(0,0,0,0.34);
  z-index:200;
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:visible;
  backdrop-filter: blur(8px);
}
.menuPanel > button,
.menuPanel .shareWrap > button{
  width:100%;
  justify-content:flex-start;
}
.menuPanel .shareWrap{
  width:100%;
  display:flex;
  align-items:stretch;
}

/* Ensure menu buttons stay compact on all viewports (override global mobile flex rules). */
.menuBtn{flex:0 0 auto;}
.menuPanel button,
.menuPanel a.linkBtn,
.menuPanel select{
  flex:0 0 auto;
}
.menuPanel .menuRow{flex:0 0 auto;}

.menuDivider{
  height:1px;
  background:var(--border);
  opacity:0.9;
  margin:2px 0;
}

.menuRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
}
.menuLabel{
  color:var(--muted);
  font-size:12px;
  user-select:none;
}

/* ------------------------------------------------------------------
   Call view layout polish
   - Remove the outer "card" backing behind webcam tiles.
   - Keep a single horizontal backing strip only for the top text + menu.
   - Eliminate the top gap so the strip sits flush to the top of the page.
   ------------------------------------------------------------------ */

/* Close the gap at the top in call mode (join mode keeps its centering/padding). */
body:not(.joinMode) .wrap{ padding:0; max-width:none; }

/* Make the call container itself transparent so the webcam grid sits on the page background. */
body:not(.joinMode) #callCard{
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  margin-bottom: 0;
}
body:not(.joinMode) #callCard::before{ display:none; }

/* Single horizontal backing strip for the top text + menu only. */
body:not(.joinMode) #callCard .topbar{
  margin: 0;
  padding: 12px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  /* Ensure dropdown menus render above the webcam tiles.
     `backdrop-filter` creates a stacking context, so we must explicitly
     raise the top bar above the grid.
  */
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow:
    0 18px 48px rgba(0,0,0,0.60),
    inset 0 1px 0 rgba(255,255,255,0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Keep the call status line readable without requiring a full-width card panel. */
body:not(.joinMode) #callStatusLine{ padding: 0 16px; }

/* Give the webcam grid a little breathing room now that the outer card padding is removed. */
body:not(.joinMode) .camGrid{ padding: 8px 10px 12px; }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important;}
}


/* --- Scheduled join modal: compact + neat layout --- */
#joinWaitOverlay .modalCard.compact{
  padding:12px 12px 10px;
}
#joinWaitOverlay .modalBody.compactWait{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:2px;
}
#joinWaitOverlay .waitLine{
  margin-top:0;
  display:grid;
  grid-template-columns: 92px 1fr auto;
  column-gap:10px;
  align-items:baseline;
}
#joinWaitOverlay .waitLabel{
  min-width:0;
  font-size:0.86rem;
  letter-spacing:0.02em;
  text-transform:uppercase;
  white-space:nowrap;
}
#joinWaitOverlay .waitIn{
  color:var(--muted);
  font-size:0.86rem;
  white-space:nowrap;
}
#joinWaitOverlay .chip{
  padding:2px 8px;
  font-size:0.92rem;
}
#joinWaitOverlay .modalInlineRow{
  margin-top:10px;
}

@media (max-width: 420px){
  #joinWaitOverlay .waitLine{
    grid-template-columns: 1fr;
    row-gap:2px;
  }
  #joinWaitOverlay .waitLabel{
    text-transform:none;
    letter-spacing:0;
  }
  #joinWaitOverlay .waitIn{
    justify-self:start;
  }
}