: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;
  }
}

/* ------------------------------------------------------------------
   Universal webcam tile support
   Responsive across phones, tablets, foldables, laptops, desktops,
   touch devices, split-screen windows, portrait and landscape modes.
   ------------------------------------------------------------------ */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

.camGrid{
  width:100%;
  min-width:0;
  max-width:100%;
  padding-left:max(8px, env(safe-area-inset-left));
  padding-right:max(8px, env(safe-area-inset-right));
  padding-bottom:max(12px, env(safe-area-inset-bottom));
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y pinch-zoom;
}

.videoBox,
.camGrid > .videoBox,
#remoteVideos .videoBox{
  min-width:0;
  max-width:100%;
  isolation:isolate;
  contain:layout paint;
}

.videoBox video{
  min-width:0;
  min-height:0;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
}

@supports (height: 100dvh){
  .camGrid{max-height:calc(100dvh - 128px);}
  @media (max-width:700px){
    .camGrid{max-height:calc(100dvh - 170px);}
  }
}

/* Phones and narrow split-screen windows use a clean single-column layout
   whenever a chosen tile size cannot fit beside another tile. */
@media (max-width:560px){
  body:not(.joinMode) #callCard .topbar{
    padding-left:max(10px, env(safe-area-inset-left));
    padding-right:max(10px, env(safe-area-inset-right));
  }
  body:not(.joinMode) .camGrid{
    gap:7px;
    padding-top:7px;
  }
  .videoBox{
    border-radius:16px;
    padding:4px;
  }
  .videoBox video,
  .cover{
    border-radius:12px;
  }
  .cover{inset:4px;}
  .tag{top:8px;left:8px;}
  .kickBtn{top:8px;right:8px;}
}

/* Very small phones, embedded WebViews and foldable cover displays. */
@media (max-width:360px){
  .camGrid > .videoBox,
  #remoteVideos .videoBox{
    width:100%;
    flex-basis:100%;
  }
}

/* Short landscape phone screens keep the webcam area usable without hiding
   the top controls. */
@media (orientation:landscape) and (max-height:520px){
  .camGrid{
    max-height:calc(100dvh - 104px);
    align-content:flex-start;
  }
  body:not(.joinMode) #callCard .topbar{padding-top:7px;padding-bottom:7px;}
  body:not(.joinMode) #callStatusLine{margin-top:4px;margin-bottom:4px;}
}

/* Touch targets remain easy to use on phones, tablets and touch laptops. */
@media (pointer:coarse){
  .kickBtn{min-width:34px;min-height:34px;}
  .ssIcon{min-width:38px;min-height:38px;}
}

/* Large monitors and conference-room displays can use more vertical space. */
@media (min-width:1600px) and (min-height:900px){
  .camGrid{max-height:calc(100dvh - 120px);}
}


/* ---------- Meetings full-page prompt ---------- */
body.conferenceMeetingsOpen{
  overflow:hidden !important;
}
.conferenceMeetingsOverlay{
  position:fixed;
  inset:0;
  z-index:500;
  background:rgba(12,17,34,0.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.conferenceMeetingsPanel{
  position:absolute;
  inset:50px;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  overflow:hidden;
  border:1px solid rgba(82,255,255,0.30);
  border-radius:22px;
  background:
    radial-gradient(850px 420px at 10% 0%, rgba(82,255,255,0.14), transparent 58%),
    linear-gradient(180deg, rgba(57,63,91,0.98), rgba(35,39,58,0.98));
  box-shadow:
    0 30px 90px rgba(0,0,0,0.70),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 0 0 1px rgba(255,255,255,0.04);
}
.conferenceMeetingsHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 20px;
  border-bottom:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.035);
}
.conferenceMeetingsHeader h2{
  margin:2px 0 0;
  font-size:clamp(23px, 3vw, 38px);
  line-height:1.05;
  color:#fff;
}
.conferenceMeetingsEyebrow{
  color:var(--accentA);
  font-size:12px;
  font-weight:800;
  letter-spacing:0.13em;
  text-transform:uppercase;
}
.conferenceMeetingsCloseBtn{
  flex:0 0 auto !important;
  min-width:96px;
}
.conferenceMeetingsBody{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:20px;
  scrollbar-width:thin;
}
.conferenceMeetingsList{
  min-height:100%;
  display:grid;
  align-content:start;
  gap:12px;
}
.conferenceMeetingsEmpty{
  grid-column:1 / -1;
  min-height:220px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:28px;
  border:1px dashed rgba(82,255,255,0.30);
  border-radius:18px;
  background:rgba(255,255,255,0.035);
}
.conferenceMeetingsEmptyTitle{
  font-size:clamp(20px, 2.4vw, 30px);
  font-weight:800;
  color:#fff;
}
.conferenceMeetingsEmptyText{
  max-width:620px;
  margin-top:8px;
  color:var(--muted);
  line-height:1.5;
}
@media (max-width:600px){
  .conferenceMeetingsPanel{
    inset:14px;
    border-radius:18px;
  }
  .conferenceMeetingsHeader{
    padding:14px;
  }
  .conferenceMeetingsHeader h2{
    font-size:23px;
  }
  .conferenceMeetingsCloseBtn{
    min-width:78px;
    padding:10px 12px;
  }
  .conferenceMeetingsBody{
    padding:14px;
  }
}

/* ---------- Live Meetings ---------- */
#conferenceMeetingsBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
#conferenceMeetingsBtn.hasLiveMeetings{
  border-color:rgba(255,92,92,0.72);
  box-shadow:
    0 0 0 1px rgba(255,92,92,0.18),
    0 0 22px rgba(255,92,92,0.18),
    0 12px 26px rgba(0,0,0,0.28);
}
.conferenceMeetingsButtonCount{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:24px;
  padding:0 7px;
  border-radius:999px;
  color:#fff;
  background:#e94352;
  font-size:12px;
  font-weight:900;
  line-height:1;
  box-shadow:0 0 14px rgba(233,67,82,0.45);
}
.conferenceMeetingsLiveSummary{
  margin-top:7px;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
}
.conferenceMeetingsLiveSummary.isLive{
  color:#ff9da6;
}
.conferenceMeetingsList{
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap:9px;
}
.conferenceMeetingCard{
  min-width:0;
  padding:7px 9px;
  border:1px solid rgba(82,255,255,0.20);
  border-radius:11px;
  background:
    radial-gradient(440px 180px at 0% 0%, rgba(82,255,255,0.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025));
  box-shadow:
    0 15px 35px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
.conferenceMeetingCardTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
}
.conferenceMeetingLiveBadge,
.conferenceMeetingLockBadge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:18px;
  padding:2px 6px;
  border-radius:999px;
  font-size:8px;
  font-weight:900;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.conferenceMeetingLiveBadge{
  color:#ffd7db;
  border:1px solid rgba(255,86,102,0.42);
  background:rgba(214,44,61,0.18);
}
.conferenceMeetingLiveDot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#ff4e5d;
  box-shadow:0 0 0 0 rgba(255,78,93,0.55);
  animation:conferenceMeetingPulse 1.5s ease-out infinite;
}
@keyframes conferenceMeetingPulse{
  0%{box-shadow:0 0 0 0 rgba(255,78,93,0.58)}
  70%{box-shadow:0 0 0 9px rgba(255,78,93,0)}
  100%{box-shadow:0 0 0 0 rgba(255,78,93,0)}
}
.conferenceMeetingLockBadge{
  color:var(--muted);
  border:1px solid rgba(255,255,255,0.13);
  background:rgba(255,255,255,0.05);
}
.conferenceMeetingTitle{
  margin:5px 0 3px;
  color:#fff;
  font-size:clamp(14px, 1.2vw, 16px);
  line-height:1.08;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.conferenceMeetingMeta{
  display:flex;
  flex-wrap:nowrap;
  gap:3px 9px;
  min-width:0;
  color:#eef2ff;
  font-size:10px;
  line-height:1.1;
  font-weight:700;
  overflow:visible;
}
.conferenceMeetingMeta span{
  position:relative;
  min-width:0;
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
}
.conferenceMeetingMeta span + span::before{
  content:"•";
  position:absolute;
  left:-7px;
  color:var(--accentA);
}
.conferenceMeetingPrivacyNote{
  display:none;
}
@media (max-width:600px){
  .conferenceMeetingsList{
    grid-template-columns:1fr;
    gap:8px;
  }
  .conferenceMeetingCard{
    padding:7px 8px;
    border-radius:10px;
  }
  .conferenceMeetingCardTop{
    align-items:flex-start;
    gap:5px;
  }
  .conferenceMeetingLiveBadge,
  .conferenceMeetingLockBadge{
    padding:3px 6px;
    font-size:8px;
  }
  .conferenceMeetingMeta{
    flex-direction:row;
    gap:3px 8px;
    font-size:9px;
  }
  .conferenceMeetingMeta span + span::before{
    content:"•";
  }
  .conferenceMeetingPrivacyNote{
    display:none;
  }
}
@media (prefers-reduced-motion:reduce){
  .conferenceMeetingLiveDot{animation:none;}
}


/* Compact-height live room grid: keep each live room button/card shallow. */
.conferenceMeetingsList{grid-auto-rows:min-content;}
.conferenceMeetingCard{align-self:start;}


/* Wider compact live-room cards: keep every badge and detail visible. */
.conferenceMeetingsList{
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.conferenceMeetingCard{
  width:100%;
  min-width:0;
}
.conferenceMeetingMeta{
  flex-wrap:wrap;
  overflow:visible;
}
.conferenceMeetingMeta span{
  overflow:visible;
  text-overflow:clip;
}
@media (max-width:700px){
  .conferenceMeetingsList{grid-template-columns:1fr;}
}

/* Meeting Code management and live-room join prompts. */
.meetingCodeOverlay{z-index:620;}
.meetingCodeCard{
  width:min(560px, calc(100vw - 32px));
  padding:18px;
}
.meetingCodeSection{
  margin-top:14px;
  padding:12px;
  border:1px solid rgba(255,255,255,0.11);
  border-radius:14px;
  background:rgba(255,255,255,0.035);
}
.hostMeetingCodeSection{
  border-color:rgba(82,255,255,0.25);
  background:rgba(82,255,255,0.045);
}
.meetingCodeLabel{
  display:block;
  margin:0 0 6px;
  color:var(--muted);
  font-size:13px;
  font-weight:800;
}
.meetingCodeOptional{
  color:var(--muted);
  font-weight:600;
  opacity:0.86;
}
.meetingCodeHelp{
  margin:0 0 8px;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}
.conferenceMeetingJoinButton.isOpenAccess{
  border-color:rgba(58,255,199,0.34);
}
.conferenceMeetingJoinButton.isOpenAccess .conferenceMeetingPrivacyNote{
  color:rgba(190,255,237,0.94);
}
.meetingCodeInputRow{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto auto;
  gap:8px;
  align-items:stretch;
}
.meetingCodeInputRow input,
#meetingJoinCodeInput,
#meetingHostCodeInput{
  width:100%;
  min-width:0;
  height:44px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing:0.08em;
  font-weight:800;
}
.meetingCodeInputRow .miniBtn{
  min-width:88px;
  height:44px;
  padding:8px 12px;
}
.meetingCodeStatus{
  min-height:22px;
  margin-top:9px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}
.meetingCodeStatus.isError{color:#ff9da6;}
.conferenceMeetingJoinButton{
  cursor:pointer;
  transition:transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.conferenceMeetingJoinButton:hover{
  transform:translateY(-1px);
  border-color:rgba(82,255,255,0.48);
  box-shadow:0 18px 38px rgba(0,0,0,0.34), 0 0 0 2px rgba(82,255,255,0.08);
}
.conferenceMeetingJoinButton:active{transform:translateY(0);}
.conferenceMeetingJoinButton:focus-visible{
  outline:2px solid rgba(82,255,255,0.72);
  outline-offset:2px;
}
@media (max-width:620px){
  .meetingCodeCard{padding:14px;}
  .meetingCodeInputRow{grid-template-columns:1fr 1fr;}
  .meetingCodeInputRow input{grid-column:1 / -1;}
  .meetingCodeInputRow .miniBtn{width:100%;min-width:0;}
}

/* Locked LIVE NOW meetings stay visible, but cannot be opened or joined. */
.conferenceMeetingCard.isLockedMeeting{
  cursor:not-allowed !important;
  opacity:.74;
  filter:saturate(.72);
}
.conferenceMeetingCard.isLockedMeeting:hover,
.conferenceMeetingCard.isLockedMeeting:focus{
  transform:none !important;
  box-shadow:inherit;
}
.conferenceMeetingCard.isLockedMeeting .conferenceMeetingLockBadge{
  font-weight:800;
}

/* Balanced LIVE NOW grid cards: narrower without clipping meeting information. */
.conferenceMeetingsList{
  grid-template-columns:repeat(auto-fill, minmax(250px, 280px));
  justify-content:start;
  align-items:start;
}
.conferenceMeetingCard,
.conferenceMeetingJoinButton{
  width:100%;
  max-width:280px;
  min-width:0;
}
.conferenceMeetingCardTop{
  flex-wrap:wrap;
  align-items:center;
}
.conferenceMeetingTitle{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.conferenceMeetingMeta{
  flex-wrap:wrap;
  overflow:visible;
}
.conferenceMeetingMeta span{
  max-width:100%;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
}
@media (max-width:620px){
  .conferenceMeetingsList{
    grid-template-columns:1fr;
  }
  .conferenceMeetingCard,
  .conferenceMeetingJoinButton{
    max-width:none;
  }
}


/* Host or Join choice shown after selecting a LIVE NOW meeting. */
.meetingRoleOverlay{z-index:630;}
.meetingRoleCard{
  width:min(500px, calc(100vw - 32px));
  padding:20px;
  text-align:center;
}
.meetingRoleActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:16px;
}
.meetingRoleActions button{
  min-width:0;
  min-height:48px;
  white-space:normal;
}
.meetingRoleCloseActions{
  justify-content:center;
  margin-top:10px;
}
.meetingRoleCloseActions button{min-width:120px;}
.meetingRoleActions button:disabled{
  cursor:not-allowed;
  opacity:.48;
  filter:saturate(.55);
}
/* Locked cards remain selectable so the verified host can reconnect. */
.conferenceMeetingCard.isLockedMeeting.conferenceMeetingJoinButton{
  cursor:pointer !important;
}
.conferenceMeetingCard.isLockedMeeting.conferenceMeetingJoinButton:hover{
  transform:translateY(-1px) !important;
  border-color:rgba(82,255,255,0.38);
}
@media (max-width:520px){
  .meetingRoleCard{padding:16px;}
  .meetingRoleActions{grid-template-columns:1fr;}
}


/* Empty Meetings state: make the dotted area cover the full prompt-panel body. */
.conferenceMeetingsBody{
  display:flex;
  flex-direction:column;
}
.conferenceMeetingsList{
  flex:1 1 auto;
  width:100%;
}
.conferenceMeetingsList.isEmpty{
  min-height:100%;
  grid-template-columns:minmax(0, 1fr);
  grid-template-rows:minmax(0, 1fr);
  align-content:stretch;
}
.conferenceMeetingsList.isEmpty .conferenceMeetingsEmpty{
  width:100%;
  height:100%;
  min-height:0;
  align-self:stretch;
  justify-self:stretch;
}


/* Keep Conference expiry prompt. */
.keepConferenceOverlay{z-index:640;}
.keepConferenceCard{
  width:min(560px, calc(100vw - 32px));
  padding:20px;
}
.keepConferenceCard input[type="datetime-local"]{
  width:100%;
  min-width:0;
  height:46px;
  margin-top:2px;
  font-size:16px;
}
.keepConferenceCurrentExpiry{
  min-height:22px;
  margin-top:10px;
  padding:10px 12px;
  border:1px solid rgba(82,255,255,0.20);
  border-radius:12px;
  background:rgba(82,255,255,0.055);
  color:var(--muted);
  font-size:13px;
  font-weight:750;
  line-height:1.4;
}
.keepConferenceActions{
  display:grid;
  grid-template-columns:auto auto minmax(150px, 1fr);
  gap:8px;
}
.keepConferenceActions button{min-width:0;}
@media (max-width:620px){
  .keepConferenceCard{padding:15px;}
  .keepConferenceActions{grid-template-columns:1fr;}
  .keepConferenceActions button{width:100%;}
}


/* Expiry details displayed inside each live Meetings grid button. */
.conferenceMeetingExpiry{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:3px 7px;
  width:100%;
  min-width:0;
  margin-top:6px;
  padding:5px 7px;
  border:1px solid rgba(255,224,85,0.24);
  border-radius:8px;
  background:rgba(255,224,85,0.065);
  color:#fff4b8;
  font-size:9px;
  line-height:1.25;
  font-weight:800;
}
.conferenceMeetingExpiryTime{
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.conferenceMeetingExpiryCountdown{
  flex:0 0 auto;
  padding:2px 5px;
  border-radius:999px;
  background:rgba(255,224,85,0.12);
  color:#fff9d7;
  white-space:nowrap;
  font-size:8px;
  font-weight:900;
  letter-spacing:.02em;
}
@media (max-width:620px){
  .conferenceMeetingExpiry{
    align-items:flex-start;
    font-size:9px;
  }
}