/* Asyncly Meet (meet.html, docs/asyncly-meet.md): the home page, joining, the call and after the
   call. One quiet dark look on every device, independent of the app theme, over a night view of
   Keynote Island (.meet-backdrop, collaboration/meet/meet-backdrop.js). The meeting card
   (.meet-invite-card) takes its composition from the team invitation card
   (styles/workspace-invitation.css): a mark on a soft halo, a hairline of the brand colour and one
   slow pass of light when it appears. Phones get the same screens stacked. */
.meet-body {
  --meet-ink: #eef3f5;
  --meet-muted: rgba(238, 243, 245, 0.68);
  --meet-faint: rgba(238, 243, 245, 0.46);
  --meet-line: rgba(238, 243, 245, 0.1);
  --meet-line-strong: rgba(238, 243, 245, 0.18);
  --meet-accent: #6be7df;
  --meet-accent-strong: #45cfc4;
  --meet-accent-ink: #04211f;
  --meet-accent-soft: rgba(107, 231, 223, 0.12);
  --meet-brand-ink: #a9f1ec;
  --meet-danger: #ff5f57;
  --meet-danger-soft: rgba(255, 95, 87, 0.16);
  --meet-surface: #0b141b;
  --meet-card: rgba(12, 21, 29, 0.92);
  --meet-glass-strong: rgba(9, 16, 22, 0.96);
  --meet-panel: #0b141b;
  --meet-field: rgba(2, 6, 10, 0.5);
  --meet-tile: #0e1a22;
  --meet-night: #04070c;
  --meet-radius: 16px;
  --meet-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --meet-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color-scheme: dark;
  background: var(--meet-night);
  color: var(--meet-ink);
  font: 15px/1.5 var(--meet-font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
.meet-body *, .meet-body *::before, .meet-body *::after { box-sizing: border-box; }
.meet-root [hidden] { display: none !important; }
.meet-root { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; }
.meet-root button, .meet-root input, .meet-root select { font: inherit; color: inherit; }
.meet-root a { color: inherit; }
.meet-root svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.meet-root :focus-visible { outline: 2px solid var(--meet-accent); outline-offset: 2px; }
.meet-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.meet-noscript { max-width: 520px; margin: 18vh auto 0; padding: 0 24px; text-align: center; color: var(--meet-muted); }

/* ---- The night behind the page ----
   Two stills of Keynote Island from the desktop's 3D engine: the island from the water, and a
   closer view that takes its place on the page's last screen (--meet-near, --meet-arrive). While
   someone reads, a shade lets the world recede (--meet-depth). meet-backdrop.js sets the variables
   and paints the glints. */
.meet-backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--meet-night); }
.meet-backdrop[data-mode="off"] { display: none; }
/* The pictures and the lights painted on them ease toward the island and back, as one, about the
   island itself (meet-backdrop.js sets the origin): slow enough to feel rather than watch. */
.meet-backdrop-stage { position: absolute; inset: 0; animation: meet-ease 48s ease-in-out infinite alternate; }
@keyframes meet-ease { from { transform: scale(1); } to { transform: scale(1.045); } }
.meet-backdrop[data-mode="quiet"] .meet-backdrop-stage { animation: none; }
.meet-backdrop-world {
  position: absolute; left: -4%; top: -4%; width: 108%; height: 108%; max-width: none; object-fit: cover; opacity: 0;
  transform: translate3d(calc(var(--meet-px, 0) * -10px), calc(var(--meet-shift, 0px) + var(--meet-py, 0) * -6px), 0);
  transition: opacity 1600ms ease;
}
.meet-backdrop-world[data-ready="true"] { opacity: 1; }
/* The closer view follows the scroll itself, so it has no transition of its own; it settles as it arrives. */
.meet-backdrop-world[data-view="near"] {
  transition: none;
  transform: translate3d(calc(var(--meet-px, 0) * -10px), calc(var(--meet-py, 0) * -6px), 0) scale(calc(1.05 - var(--meet-arrive, 0) * 0.05));
}
.meet-backdrop-world[data-view="near"][data-ready="true"] { opacity: var(--meet-near, 0); }
.meet-backdrop-life { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Darker where the words sit (the top, and behind the headline), clear along the horizon. */
.meet-backdrop-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 6, 11, 0.74) 0%, rgba(3, 6, 11, 0.4) 22%, rgba(3, 6, 11, 0.14) 52%, rgba(3, 6, 11, 0) 70%, rgba(3, 6, 11, 0.16) 90%, rgba(3, 6, 11, 0.5) 100%),
    radial-gradient(64% 58% at 20% 44%, rgba(3, 6, 11, 0.5), transparent 72%);
}
.meet-backdrop-shade { position: absolute; inset: 0; background: var(--meet-night); opacity: calc(var(--meet-depth, 0) * 0.8); }

/* ---- Buttons and fields ---- */
.meet-button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px;
  border-radius: 12px; border: 1px solid transparent; font-weight: 600; font-size: 15px; letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap; transition: background 140ms ease, transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.meet-button svg { width: 18px; height: 18px; }
.meet-button:disabled { cursor: default; opacity: 0.6; }
.meet-button-primary {
  overflow: hidden; background: linear-gradient(135deg, #93f1ea, var(--meet-accent-strong)); color: var(--meet-accent-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 12px 30px -10px rgba(69, 207, 196, 0.55);
}
.meet-button-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 16px 36px -10px rgba(69, 207, 196, 0.7); }
.meet-button-primary:active:not(:disabled) { transform: translateY(0); }
.meet-button-quiet { background: rgba(238, 243, 245, 0.06); border-color: var(--meet-line-strong); color: var(--meet-ink); }
.meet-button-quiet:hover:not(:disabled) { background: rgba(238, 243, 245, 0.11); border-color: rgba(238, 243, 245, 0.28); }
.meet-button-ghost { height: 36px; padding: 0 14px; border-radius: 10px; background: transparent; border-color: var(--meet-line-strong); color: var(--meet-ink); font-weight: 560; font-size: 14px; }
.meet-button-ghost:hover { background: rgba(238, 243, 245, 0.08); }
.meet-button-plain { height: 38px; padding: 0 14px; border-radius: 10px; background: transparent; color: var(--meet-accent); }
.meet-button-plain:hover { background: var(--meet-accent-soft); }
.meet-button-large { height: 52px; padding: 0 22px; border-radius: 14px; font-size: 16px; }
.meet-button-large svg { width: 20px; height: 20px; }
.meet-button-small { height: 34px; padding: 0 12px; border-radius: 10px; font-size: 13.5px; gap: 6px; }
.meet-button-small svg { width: 16px; height: 16px; }
.meet-text-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; color: var(--meet-muted);
  font-size: 14px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--meet-line-strong); cursor: pointer;
}
.meet-text-link:hover { color: var(--meet-ink); }
.meet-form-error { margin: 12px 0 0; color: #ffb4ad; font-size: 14px; }
.meet-muted { color: var(--meet-muted); margin: 0; }
.meet-avatar-mini {
  display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: linear-gradient(140deg, #2f6f78, #1c3d55); color: var(--meet-ink); font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
}
.meet-spinner { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2.5px solid rgba(107, 231, 223, 0.22); border-top-color: var(--meet-accent); animation: meet-spin 900ms linear infinite; }
@keyframes meet-spin { to { transform: rotate(360deg); } }
.meet-card { padding: 30px; border-radius: 20px; background: var(--meet-card); border: 1px solid var(--meet-line); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6); }
.meet-card h1 { margin: 0 0 10px; font: 700 28px/1.15 var(--meet-display); letter-spacing: -0.025em; }
.meet-lead { margin: 0 0 20px; color: var(--meet-muted); font-size: 16px; }
.meet-root label { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--meet-ink); }
.meet-root input:not([type="checkbox"]), .meet-root select {
  width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--meet-line-strong); background: var(--meet-field);
  font-size: 16px; outline: none; transition: border-color 140ms ease, box-shadow 140ms ease;
}
.meet-root input:focus, .meet-root select:focus { border-color: rgba(107, 231, 223, 0.7); box-shadow: 0 0 0 4px rgba(107, 231, 223, 0.12); }
.meet-root input::placeholder { color: var(--meet-faint); }

/* ---- The meeting card (shared by the home page, the join screen and the call) ---- */
.meet-invite-card {
  position: relative; isolation: isolate; overflow: hidden; padding: 28px;
  border: 1px solid rgba(107, 231, 223, 0.26); border-radius: 20px;
  background:
    radial-gradient(320px 220px at 62px 60px, rgba(107, 231, 223, 0.2), transparent 72%),
    radial-gradient(60% 110% at 100% 100%, rgba(110, 132, 255, 0.07), transparent 70%),
    var(--meet-card);
  box-shadow: 0 34px 80px -34px rgba(69, 207, 196, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* A hairline of the brand colour along the top edge. */
.meet-invite-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none; opacity: 0.75;
  background: linear-gradient(90deg, transparent, var(--meet-accent) 30%, #c9f7f3 55%, transparent);
}
/* One slow pass of light when the card appears. */
.meet-invite-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(107, 231, 223, 0.1) 48%, rgba(255, 255, 255, 0.05) 50%, transparent 62%) 0 0 / 250% 100% no-repeat;
  animation: meet-sheen 2.4s cubic-bezier(0.4, 0, 0.2, 1) 0.25s both;
}
@keyframes meet-sheen { from { background-position: 120% 0; } to { background-position: -40% 0; } }
.meet-mark { position: relative; display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 20px; }
.meet-mark::before {
  content: ""; position: absolute; inset: -18px; z-index: -1; border-radius: 50%; filter: blur(6px);
  background: radial-gradient(closest-side, rgba(107, 231, 223, 0.42), transparent);
  animation: meet-halo 5.5s ease-in-out infinite;
}
@keyframes meet-halo { 0%, 100% { opacity: 0.7; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1.04); } }
.meet-mark-tile {
  display: grid; place-items: center; width: 68px; height: 68px; border-radius: 19px; color: #fff; font: 650 25px/1 var(--meet-display); letter-spacing: 0.01em;
  background: linear-gradient(150deg, #58dcd2, #1b7f8b 70%, #175f78); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 18px 38px rgba(2, 8, 12, 0.5), 0 0 0 1px rgba(107, 231, 223, 0.5), 0 0 0 6px rgba(107, 231, 223, 0.1);
}
.meet-mark-tile svg { width: 30px; height: 30px; stroke-width: 2.2; }
/* A hosting team's logo fills the tile, on the team's own colour. */
.meet-mark-logo { overflow: hidden; background: #0d1820; }
.meet-mark-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.meet-invite-org { margin: 6px 0 0; color: var(--meet-muted); font-size: 14.5px; }
.meet-invite-headline { margin: 0; font: 620 25px/1.24 var(--meet-display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.meet-invite-name { color: var(--meet-brand-ink); }
.meet-invite-when { margin: 8px 0 0; color: var(--meet-ink); font-size: 16px; }
.meet-invite-body { margin: 10px 0 18px; color: var(--meet-muted); font-size: 15px; }
.meet-invite-body b { color: var(--meet-ink); font-weight: 600; }
.meet-invite-fine { margin: 12px 0 0; color: var(--meet-faint); font-size: 13.5px; }
.meet-invite-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 16px 0 0; font-size: 14px; }
.meet-invite-links a { color: var(--meet-accent); font-weight: 600; text-decoration: none; padding: 4px 0; }
.meet-invite-links a:hover { text-decoration: underline; }
/* Whether the host is there: a status light, so it stays a dot. */
.meet-presence { display: flex; align-items: center; gap: 9px; margin: 10px 0 0; color: var(--meet-muted); font-size: 15px; }
.meet-presence i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #f0c389; box-shadow: 0 0 0 4px rgba(240, 195, 137, 0.14); }
.meet-presence[data-state="live"] i { background: #4ade80; box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.16); animation: meet-presence 2s ease-in-out infinite; }
@keyframes meet-presence { 50% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0.04); } }
/* The link and its Copy button. */
.meet-link-row { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 6px 6px 6px 14px; border-radius: 12px; background: var(--meet-field); border: 1px solid var(--meet-line); }
.meet-link-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15.5px; font-weight: 600; color: var(--meet-brand-ink); letter-spacing: 0.01em; }
.meet-calendar-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.meet-share-title { margin: 18px 0 0; font-weight: 600; font-size: 14.5px; }
.meet-share .meet-link-row { margin-top: 10px; }
/* Asking to join, as the invitation's joining track. */
.meet-steps { list-style: none; display: grid; gap: 11px; margin: 20px 0 16px; padding: 0; }
.meet-steps li { display: flex; align-items: center; gap: 11px; color: var(--meet-faint); font-size: 15px; }
.meet-step-mark { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; border: 1.5px solid var(--meet-line-strong); }
.meet-step-mark svg { width: 12px; height: 12px; stroke-width: 2.6; opacity: 0; }
.meet-steps li[data-state="done"] { color: var(--meet-muted); }
.meet-steps li[data-state="done"] .meet-step-mark { background: var(--meet-accent); border-color: var(--meet-accent); color: var(--meet-accent-ink); }
.meet-steps li[data-state="done"] .meet-step-mark svg { opacity: 1; }
.meet-steps li[data-state="active"] { color: var(--meet-ink); font-weight: 600; }
.meet-steps li[data-state="active"] .meet-step-mark { border-color: rgba(107, 231, 223, 0.25); border-top-color: var(--meet-accent); animation: meet-spin 900ms linear infinite; }
.meet-waiting-line { margin: 0 0 10px; color: var(--meet-muted); font-size: 14.5px; }
.meet-waiting-line strong { color: var(--meet-ink); font-weight: 600; }

/* ---- Page frame ---- */
.meet-page-shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: clip; }
.meet-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: max(16px, env(safe-area-inset-top)) max(32px, env(safe-area-inset-right)) 16px max(32px, env(safe-area-inset-left));
}
/* The home page is long: its bar stays, turns to glass over the page, and keeps New meeting in reach. */
.meet-root[data-screen="home"] .meet-top { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid transparent; transition: background-color 240ms ease, border-color 240ms ease; }
html[data-meet-scrolled] .meet-root[data-screen="home"] .meet-top {
  background: rgba(4, 8, 13, 0.62); border-bottom-color: var(--meet-line); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
}
.meet-top-new {
  max-width: 0; padding-inline: 0; margin-left: -18px; opacity: 0; visibility: hidden;
  transition: max-width 260ms ease, padding 260ms ease, margin 260ms ease, opacity 200ms ease, visibility 0s linear 260ms;
}
html[data-meet-scrolled="deep"] .meet-top-new { max-width: 170px; padding-inline: 12px; margin-left: 0; opacity: 1; visibility: visible; transition-delay: 0s; }
.meet-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font: 620 17px/1 var(--meet-display); letter-spacing: -0.01em; }
.meet-brand img { border-radius: 7px; margin-right: 2px; }
.meet-brand-product { color: var(--meet-muted); font-weight: 450; }
.meet-top-actions { display: flex; align-items: center; gap: 18px; }
.meet-root .meet-top-link { color: var(--meet-muted); font-size: 14px; font-weight: 520; text-decoration: none; }
.meet-root .meet-top-link:hover { color: var(--meet-ink); }
.meet-account { display: inline-flex; align-items: center; gap: 8px; color: var(--meet-muted); font-size: 14px; }
.meet-main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 8px max(32px, env(safe-area-inset-right)) 40px max(32px, env(safe-area-inset-left)); }
.meet-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; width: 100%; max-width: 1180px; margin: 0 auto;
  padding: 22px 32px max(26px, env(safe-area-inset-bottom)); color: var(--meet-faint); font-size: 13px; border-top: 1px solid var(--meet-line);
}
.meet-foot nav { display: flex; gap: 18px; }
/* On the home page the foot sits over the island: a shade behind it keeps the small print readable. */
.meet-root[data-screen="home"] .meet-foot { position: relative; border-top-color: transparent; }
.meet-root[data-screen="home"] .meet-foot::before {
  content: ""; position: absolute; z-index: -1; bottom: 0; left: 50%; width: 100vw; height: 150px; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 6, 11, 0), rgba(3, 6, 11, 0.66));
}
.meet-foot > span { max-width: 46em; }
.meet-foot a { text-decoration: none; }
.meet-foot span a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--meet-line-strong); }
.meet-foot a:hover { color: var(--meet-ink); }
.meet-loading { min-height: 60vh; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--meet-muted); }
/* Joining, waiting, errors and after the call sit in the middle of the window when there's room. */
.meet-root:is([data-screen="prejoin"], [data-screen="waiting"], [data-screen="left"], [data-screen="error"]) .meet-main { display: flex; flex-direction: column; }
.meet-root:is([data-screen="prejoin"], [data-screen="waiting"]) .meet-prejoin { margin-block: auto; width: 100%; }
.meet-root[data-screen="left"] .meet-left, .meet-root[data-screen="error"] .meet-error-card { margin: auto; width: 100%; }

/* ---- Home ----
   The first screen keeps its upper part for the two actions and the guest's card, and leaves the
   horizon below them clear: the island sits under the card. */
.meet-home {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 72px; align-items: center;
  min-height: calc(100vh - 69px); min-height: calc(100svh - 69px);
  padding: clamp(8px, 3vh, 36px) 0 clamp(120px, 25vh, 310px);
}
.meet-home-title { margin: 0 0 20px; font: 720 clamp(40px, 5.2vw, 66px)/1.02 var(--meet-display); letter-spacing: -0.04em; text-shadow: 0 2px 30px rgba(3, 6, 11, 0.5); }
.meet-home-lead { margin: 0 0 34px; max-width: 29em; color: rgba(238, 243, 245, 0.78); font-size: 18px; line-height: 1.55; text-shadow: 0 1px 14px rgba(3, 6, 11, 0.7); }
.meet-home-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.meet-home .meet-button-quiet, .meet-home .meet-join-code { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.meet-join-code {
  position: relative; display: flex; align-items: center; gap: 6px; height: 52px; padding: 0 7px 0 44px; max-width: 420px;
  border-radius: 14px; border: 1px solid var(--meet-line-strong); background: var(--meet-field);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.meet-join-code:focus-within { border-color: rgba(107, 231, 223, 0.7); box-shadow: 0 0 0 4px rgba(107, 231, 223, 0.12); }
.meet-join-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--meet-faint); display: flex; }
.meet-root .meet-join-code input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.meet-home-note { margin: 16px 0 0; color: rgba(238, 243, 245, 0.66); font-size: 14px; text-shadow: 0 1px 10px rgba(3, 6, 11, 0.9); }
.meet-error-card { max-width: 560px; }
.meet-error-card .meet-join-code { margin: 4px 0 18px; max-width: none; }
/* Over the night the card is glass: the sky's light comes through it. */
.meet-home .meet-invite-card { --meet-card: rgba(9, 16, 24, 0.7); backdrop-filter: blur(24px) saturate(1.25); -webkit-backdrop-filter: blur(24px) saturate(1.25); }

.meet-sample { margin: 0; }
.meet-sample figcaption { margin: 0 0 12px 4px; color: rgba(238, 243, 245, 0.6); font-size: 13.5px; }
.meet-sample-field { margin-top: 20px; }
.meet-sample-field span { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.meet-sample-field div { display: flex; align-items: center; height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--meet-line-strong); background: var(--meet-field); font-size: 16px; }
.meet-sample-button { width: 100%; height: 50px; margin-top: 14px; }
.meet-sample .meet-invite-fine { margin-top: 12px; }

/* Down to the rest of the page, from the foot of the first screen. */
.meet-scroll-cue {
  position: absolute; left: 0; bottom: clamp(24px, 6vh, 64px); display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px 0 18px;
  border-radius: 999px; border: 1px solid var(--meet-line-strong); background: rgba(4, 8, 13, 0.46); color: var(--meet-ink);
  font-size: 14.5px; font-weight: 560; cursor: pointer; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: background-color 160ms ease, border-color 160ms ease;
}
.meet-scroll-cue:hover { background: rgba(4, 8, 13, 0.7); border-color: rgba(238, 243, 245, 0.3); }
.meet-scroll-cue svg { width: 16px; height: 16px; color: var(--meet-accent); animation: meet-cue 2.4s ease-in-out infinite; }
@keyframes meet-cue { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

/* The home page rises into place once (meet-app.js markEntrance keeps a repaint from replaying it). */
.meet-root[data-enter] .meet-rise { animation: meet-rise-in 820ms cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--meet-enter-at, 0ms) + var(--meet-rise, 0) * 85ms + 60ms); }
.meet-rise-1 { --meet-rise: 1; } .meet-rise-2 { --meet-rise: 2; } .meet-rise-3 { --meet-rise: 3; } .meet-rise-4 { --meet-rise: 4; } .meet-rise-5 { --meet-rise: 6; }
@keyframes meet-rise-in { from { opacity: 0; transform: translateY(18px); } }

/* ---- Home: about Asyncly ----
   The story is the main column. How a meeting works and what is planned are side pieces
   (.meet-flow, .meet-next): small glass panels beside it, never sections of their own. */
.meet-about { --meet-bleed: clamp(0px, calc((100vw - 1244px) / 2), 120px); padding-top: clamp(64px, 12vh, 140px); scroll-margin-top: 76px; }
.meet-about-intro { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(300px, 0.78fr); gap: 72px; align-items: start; }
.meet-about-title { margin: 0; font: 720 clamp(34px, 4.4vw, 56px)/1.05 var(--meet-display); letter-spacing: -0.038em; text-wrap: balance; text-shadow: 0 2px 30px rgba(3, 6, 11, 0.55); }
.meet-about-lead { margin: 22px 0 0; max-width: 30em; color: rgba(238, 243, 245, 0.76); font-size: clamp(17px, 1.45vw, 20px); line-height: 1.55; text-shadow: 0 1px 18px rgba(3, 6, 11, 0.6); }
.meet-aside, .meet-next {
  padding: 20px 24px 10px; border-radius: 18px; border: 1px solid var(--meet-line); background: rgba(8, 14, 21, 0.56);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.meet-aside-title { margin: 0 0 6px; color: rgba(238, 243, 245, 0.6); font: 600 13.5px/1.3 var(--meet-font); letter-spacing: 0.01em; }
.meet-flow-list, .meet-next-list { list-style: none; margin: 0; padding: 0; }
.meet-flow-list { counter-reset: step; }
.meet-flow-list li { counter-increment: step; display: grid; grid-template-columns: 26px minmax(0, 1fr); padding: 12px 0; border-top: 1px solid var(--meet-line); }
.meet-flow-list li:first-child, .meet-next-list li:first-child { border-top: 0; }
.meet-flow-list li::before { content: counter(step); grid-row: span 2; padding-top: 1px; color: var(--meet-accent); font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.meet-flow-list h3, .meet-next-list h3 { margin: 0 0 2px; font-size: 15px; font-weight: 620; letter-spacing: -0.005em; }
.meet-flow-list p, .meet-next-list p { margin: 0; color: var(--meet-muted); font-size: 13.5px; line-height: 1.45; }
.meet-flow-list p { grid-column: 2; }

/* One part of the story: what Asyncly does, beside a capture of it doing that. */
.meet-chapter { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(32px, 5vw, 76px); align-items: center; margin-top: clamp(88px, 15vh, 170px); }
.meet-chapter:nth-of-type(even) { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
.meet-chapter:nth-of-type(even) .meet-chapter-copy { order: 2; }
.meet-chapter:nth-of-type(odd) .meet-shot { margin-right: calc(-1 * var(--meet-bleed)); }
.meet-chapter:nth-of-type(even) .meet-shot { margin-left: calc(-1 * var(--meet-bleed)); }
.meet-chapter-copy h3 { margin: 0 0 16px; font: 700 clamp(26px, 2.9vw, 38px)/1.1 var(--meet-display); letter-spacing: -0.03em; text-wrap: balance; }
.meet-chapter-copy p { margin: 0; max-width: 26em; color: var(--meet-muted); font-size: 17px; line-height: 1.6; }
.meet-shot {
  margin: 0; overflow: hidden; border-radius: 16px; border: 1px solid rgba(238, 243, 245, 0.14); background: #071018;
  box-shadow: 0 70px 130px -60px rgba(0, 0, 0, 0.95), 0 34px 80px -44px rgba(69, 207, 196, 0.3);
}
.meet-shot img { display: block; width: 100%; height: auto; }

/* The last screen: the closer view of the island returns on the right, so the words keep to the left. */
.meet-get { display: flex; flex-direction: column; gap: 44px; max-width: 540px; padding: clamp(150px, 26vh, 280px) 0 clamp(20px, 4vh, 72px); }
.meet-get-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; }
.meet-get-note { margin: 0; color: var(--meet-muted); font-size: 16px; }
.meet-get-note a { color: var(--meet-accent); font-weight: 600; text-decoration: none; }
.meet-next-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-bottom: 4px; }
.meet-next-head .meet-aside-title { margin: 0; }
.meet-next-head p { margin: 0; color: var(--meet-faint); font-size: 13.5px; }
.meet-next-list li { padding: 12px 0; border-top: 1px solid var(--meet-line); }
.meet-next-list h3 { color: rgba(238, 243, 245, 0.82); }
.meet-next-list p { color: rgba(238, 243, 245, 0.56); }

/* The story comes into view as it is scrolled to. Where the browser can't tie motion to the scroll,
   or motion is unwelcome, everything simply sits in place. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .meet-shot { animation: meet-shot-in linear both; animation-timeline: view(); animation-range: entry 0% cover 34%; transform-origin: 50% 100%; }
    .meet-chapter-copy, .meet-about-copy, .meet-flow { animation: meet-copy-in linear both; animation-timeline: view(); animation-range: entry 0% cover 26%; }
  }
}
@keyframes meet-shot-in { from { opacity: 0.15; transform: perspective(1400px) rotateX(9deg) translateY(56px) scale(0.95); } }
@keyframes meet-copy-in { from { opacity: 0; transform: translateY(26px); } }

/* ---- Joining ---- */
.meet-prejoin { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr); gap: 44px; align-items: center; padding: 4vh 0 24px; }
.meet-preview {
  position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: radial-gradient(120% 100% at 50% 0%, #15303a, #080f14);
  border: 1px solid var(--meet-line); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
}
.meet-preview-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); transition: opacity 200ms ease; }
.meet-preview[data-camera="off"] .meet-preview-video { opacity: 0; }
.meet-preview-avatar { position: absolute; inset: 0; display: grid; place-items: center; }
.meet-preview-avatar span { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(140deg, #2f6f78, #1c3d55); font: 700 34px/1 var(--meet-display); }
.meet-preview[data-camera="on"] .meet-preview-avatar { visibility: hidden; }
.meet-preview-state { position: absolute; left: 0; right: 0; top: 16px; margin: 0; padding: 0 20px; text-align: center; color: var(--meet-ink); font-size: 14px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.meet-preview-controls { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 14px; }
.meet-round {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(6, 12, 16, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; transition: background 140ms ease;
}
.meet-round svg { width: 22px; height: 22px; }
.meet-round:hover { background: rgba(6, 12, 16, 0.75); }
.meet-round[data-off="true"] { background: var(--meet-danger); border-color: transparent; color: #fff; }
/* While the browser is still starting the camera, nothing is "off" yet. */
.meet-preview[data-starting="true"] .meet-round[data-off="true"] { background: rgba(6, 12, 16, 0.55); border-color: rgba(255, 255, 255, 0.28); }
.meet-prejoin-card { min-width: 0; }
.meet-name-form { margin-top: 22px; }
.meet-join-button { width: 100%; height: 50px; margin-top: 16px; font-size: 16px; }
.meet-new-to { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--meet-line); color: var(--meet-faint); font-size: 14px; }
.meet-new-to a { color: var(--meet-accent); font-weight: 600; text-decoration: none; }
.meet-new-to a:hover { text-decoration: underline; }

/* ---- After the call ---- */
.meet-left { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; max-width: 940px; align-items: stretch; }
.meet-left-card { display: flex; flex-direction: column; justify-content: center; }
.meet-left-meeting { margin: 0; color: var(--meet-muted); }
.meet-left-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.meet-promo { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; border-color: rgba(107, 231, 223, 0.24); background: radial-gradient(300px 200px at 50px 50px, rgba(107, 231, 223, 0.16), transparent 72%), var(--meet-card); }
.meet-promo img { border-radius: 10px; margin-bottom: 10px; }
.meet-promo h2 { margin: 0; font: 680 21px/1.2 var(--meet-display); letter-spacing: -0.015em; }
.meet-promo p { margin: 0 0 12px; color: var(--meet-muted); }
.meet-promo .meet-button { margin-top: auto; }
.meet-promo-invite { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--meet-field); color: var(--meet-ink) !important; font-size: 14px; }
.meet-promo-invite svg { color: var(--meet-accent); margin-top: 1px; }

/* ---- Sheets: sign-in and scheduling ---- */
.meet-sheet-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(2, 5, 8, 0.66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.meet-sheet {
  position: fixed; z-index: 51; left: 50%; top: 50%; width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; transform: translate(-50%, -50%);
  padding: 30px 28px 26px; border-radius: 20px; background: var(--meet-glass-strong); border: 1px solid var(--meet-line-strong); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.65);
  animation: meet-sheet-in 200ms ease;
}
@keyframes meet-sheet-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); } }
.meet-sheet h2 { margin: 0 0 6px; font: 680 22px/1.2 var(--meet-display); letter-spacing: -0.02em; padding-right: 30px; }
.meet-sheet > .meet-muted { margin-bottom: 22px; font-size: 14.5px; }
.meet-sheet form .meet-button { width: 100%; margin-top: 16px; height: 50px; }
.meet-field-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 10px; margin-top: 14px; }
.meet-root .meet-field-row input, .meet-root .meet-field-row select { padding: 0 10px; font-size: 15px; }
.meet-sheet-close {
  position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: rgba(238, 243, 245, 0.08); color: var(--meet-muted); cursor: pointer;
}
.meet-sheet-close:hover { background: rgba(238, 243, 245, 0.16); color: var(--meet-ink); }
.meet-sheet-close svg { width: 17px; height: 17px; }

.meet-toast {
  position: fixed; z-index: 60; left: 50%; bottom: max(28px, env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: calc(100vw - 32px);
  padding: 11px 18px; border-radius: 12px; background: #eef3f5; color: #071316; font-weight: 600; font-size: 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  animation: meet-rise 220ms ease;
}
@keyframes meet-rise { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ---- The call ---- */
.meet-root[data-screen="call"] { height: 100vh; height: 100dvh; overflow: hidden; }
.meet-call {
  position: relative; height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; background: #04080b;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
.meet-call-top { grid-row: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; min-width: 0; }
.meet-call-title { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 620; }
.meet-call-title img { border-radius: 6px; flex: none; }
.meet-call-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meet-call-time { flex: none; color: var(--meet-faint); font-variant-numeric: tabular-nums; font-size: 14px; }
.meet-call-time { padding-left: 2px; }
.meet-call-actions { display: flex; gap: 8px; flex: none; }
.meet-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--meet-line-strong);
  background: rgba(238, 243, 245, 0.06); font-size: 14px; font-weight: 580; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.meet-chip:hover { background: rgba(238, 243, 245, 0.12); }
.meet-chip svg { width: 16px; height: 16px; }
.meet-chip-accent { border-color: rgba(107, 231, 223, 0.45); background: var(--meet-accent-soft); color: var(--meet-accent) !important; }
.meet-call-banner { grid-row: 2; margin: 0 18px 8px; padding: 9px 14px; border-radius: 12px; background: rgba(107, 231, 223, 0.12); border: 1px solid rgba(107, 231, 223, 0.3); font-size: 14px; text-align: center; }
.meet-call-banner[data-tone="error"] { background: var(--meet-danger-soft); border-color: rgba(255, 95, 87, 0.45); color: #ffd3cf; }
.meet-banner-action { margin-left: 8px; padding: 3px 12px; border-radius: 999px; border: 0; background: #ffd3cf; color: #3a0b08 !important; font-weight: 650; cursor: pointer; }
.meet-call-body { grid-row: 3; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr); min-height: 0; }
.meet-call-stage { position: relative; min-width: 0; min-height: 0; padding: 4px 18px 10px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.meet-tiles {
  --columns: 1; --rows: 1;
  display: grid; gap: 12px; min-height: 0; height: 100%;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
}
.meet-tiles[data-fit="ratio"] {
  display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: var(--gap, 12px);
  width: calc(var(--columns) * var(--tile-width) + (var(--columns) - 1) * var(--gap, 12px)); height: auto; max-width: 100%; align-self: center; justify-self: center;
}
.meet-tiles[data-fit="ratio"] .meet-tile { flex: none; width: var(--tile-width); height: var(--tile-height); }
.meet-tiles[data-fit="ratio"] .meet-tile[data-portrait="true"] video { object-fit: contain; background: #061416; }
.meet-tile {
  position: relative; min-width: 0; min-height: 0; border-radius: var(--meet-radius); overflow: hidden; background: var(--meet-tile);
  box-shadow: inset 0 0 0 1px rgba(238, 243, 245, 0.06); transition: box-shadow 160ms ease;
}
.meet-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.meet-tile[data-self="true"] video { transform: scaleX(-1); }
.meet-tile[data-camera="off"] video { visibility: hidden; }
.meet-tile-avatar { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(120% 100% at 50% 0%, #17403f, #0a1c1f); }
.meet-tile-avatar span {
  display: grid; place-items: center; width: clamp(56px, 22%, 120px); aspect-ratio: 1; border-radius: 50%;
  background: linear-gradient(140deg, #2f7a7c, #1b445a); font: 700 clamp(20px, 3vw, 40px)/1 var(--meet-display); transition: box-shadow 160ms ease;
}
.meet-tile-label {
  position: absolute; z-index: 2; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 20px);
  padding: 4px 10px; border-radius: 9px; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 13px; font-weight: 600;
}
.meet-tile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meet-tile-role { font-style: normal; font-weight: 600; font-size: 11.5px; color: var(--meet-accent); }
.meet-tile-role:empty { display: none; }
.meet-tile-mic { display: none; color: #ff8d86; }
.meet-tile-mic svg { width: 15px; height: 15px; }
.meet-tile[data-mic="off"] .meet-tile-mic { display: flex; }
.meet-tile[data-speaking="true"] { box-shadow: inset 0 0 0 3px var(--meet-accent), 0 0 30px rgba(107, 231, 223, 0.2); }
.meet-tile[data-speaking="true"] .meet-tile-avatar span { box-shadow: 0 0 0 6px rgba(107, 231, 223, 0.28), 0 0 0 12px rgba(107, 231, 223, 0.1); }

/* Presenting: the shared screen takes the stage; everyone else becomes a strip. */
.meet-presentation { position: relative; min-width: 0; min-height: 0; border-radius: var(--meet-radius); overflow: hidden; background: #000; }
.meet-presentation video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.meet-presenter {
  position: absolute; z-index: 2; left: 12px; top: 12px; margin: 0; padding: 5px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.6);
  color: var(--meet-accent); font-size: 13px; font-weight: 620; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.meet-call[data-mode="present"] .meet-call-stage { grid-template-columns: minmax(0, 1fr) 216px; gap: 12px; }
.meet-call[data-mode="present"] .meet-tiles { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; height: auto; max-height: 100%; }
.meet-call[data-mode="present"] .meet-tile { flex: none; aspect-ratio: 16 / 10; }
.meet-call[data-mode="present"] .meet-tile-avatar span { width: 52px; font-size: 18px; }

.meet-controls {
  grid-row: 4; display: flex; align-items: flex-start; justify-content: center; gap: 12px;
  padding: 10px 18px max(14px, env(safe-area-inset-bottom));
}
.meet-control {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 66px; padding: 0; border: 0; background: none;
  cursor: pointer; color: var(--meet-ink);
}
.meet-control::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 52px; height: 52px; transform: translateX(-50%); border-radius: 50%;
  background: rgba(238, 243, 245, 0.1); border: 1px solid rgba(238, 243, 245, 0.08); transition: background 140ms ease;
}
.meet-control svg { position: relative; width: 23px; height: 23px; margin: 14.5px 0 0; }
.meet-control-label { position: relative; margin-top: 12px; font-size: 12px; font-weight: 560; color: var(--meet-muted); white-space: nowrap; }
.meet-control:hover:not(:disabled)::before { background: rgba(238, 243, 245, 0.18); }
.meet-control:disabled { cursor: default; opacity: 0.5; }
.meet-control[data-off="true"]::before { background: var(--meet-danger); border-color: transparent; }
.meet-control[data-off="true"]:hover:not(:disabled)::before { background: #ff776f; }
.meet-control[data-off="true"] svg { color: #fff; }
.meet-control[data-active="true"]::before { background: var(--meet-accent); }
.meet-control[data-active="true"]:hover:not(:disabled)::before { background: #8af0e9; }
.meet-control[data-active="true"] svg { color: var(--meet-accent-ink); }
.meet-control[aria-pressed="true"][data-action="people"]::before { background: var(--meet-accent-soft); border-color: rgba(107, 231, 223, 0.5); }
.meet-control[aria-pressed="true"][data-action="people"]:hover:not(:disabled)::before { background: rgba(107, 231, 223, 0.24); }
.meet-control-leave::before { width: 68px; border-radius: 999px; background: var(--meet-danger); border-color: transparent; }
.meet-control-leave:hover:not(:disabled)::before { background: #ff776f; }
.meet-control-leave svg { color: #fff; }
.meet-badge {
  position: absolute; top: -4px; left: calc(50% + 12px); min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: grid; place-items: center; background: #d7ecea; color: #052422; font-size: 11.5px; font-weight: 750;
}
.meet-badge[data-alert="true"] { background: var(--meet-accent); box-shadow: 0 0 0 3px rgba(107, 231, 223, 0.3); animation: meet-pulse 1.4s ease-in-out infinite; }
@keyframes meet-pulse { 50% { box-shadow: 0 0 0 7px rgba(107, 231, 223, 0); } }
.meet-leave-wrap { position: relative; }
.meet-leave-menu {
  position: absolute; bottom: calc(100% + 10px); right: 50%; transform: translateX(50%); z-index: 20; display: grid; min-width: 240px; padding: 6px;
  border-radius: 16px; background: var(--meet-glass-strong); border: 1px solid var(--meet-line-strong); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.meet-leave-menu button { padding: 12px 14px; border: 0; border-radius: 11px; background: none; text-align: left; font-weight: 600; cursor: pointer; }
.meet-leave-menu button:hover { background: rgba(238, 243, 245, 0.08); }
.meet-leave-menu [data-action="end-all"] { color: #ff9b94; }

/* Over the stage: people asking to join, the host's share card, a guest's team invite. */
.meet-call-overlays { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.meet-call-overlays > * { pointer-events: auto; }
.meet-knock {
  position: absolute; right: 18px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 12px; width: min(360px, calc(100% - 36px));
  padding: 14px 16px; border-radius: 16px; background: var(--meet-panel); border: 1px solid rgba(107, 231, 223, 0.4); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  animation: meet-slide 240ms ease;
}
.meet-knock:nth-child(1) { top: 70px; } .meet-knock:nth-child(2) { top: 178px; } .meet-knock:nth-child(3) { top: 286px; }
.meet-knock p { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.meet-knock-actions { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; }
.meet-knock-more { position: absolute; right: 18px; top: 394px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--meet-line-strong); background: var(--meet-glass-strong); cursor: pointer; font-weight: 600; }
@keyframes meet-slide { from { opacity: 0; transform: translateX(16px); } }
/* Over live video the cards are opaque, so faces never show through the words. */
.meet-call .meet-invite-card { --meet-card: #0b141b; }
.meet-ready { position: absolute; left: 22px; bottom: 112px; width: min(400px, calc(100% - 44px)); padding: 24px 22px 20px; animation: meet-pop 260ms ease; }
.meet-ready .meet-invite-headline { font-size: 20px; padding-right: 36px; }
.meet-ready .meet-invite-fine { margin-top: 6px; }
.meet-invite { position: absolute; left: 50%; bottom: 112px; width: min(440px, calc(100% - 36px)); transform: translateX(-50%); animation: meet-invite-in 520ms cubic-bezier(0.2, 0.9, 0.25, 1.15); }
.meet-invite.meet-invite-card { box-shadow: 0 34px 90px rgba(0, 0, 0, 0.6), 0 0 70px -10px rgba(69, 207, 196, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.meet-invite .meet-button { min-width: 180px; }
@keyframes meet-invite-in { from { opacity: 0; transform: translate(-50%, 24px) scale(0.95); } }
@keyframes meet-pop { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
/* The meeting link, always one click from the clipboard. */
.meet-linkpill {
  display: inline-flex; align-items: center; height: 36px; padding: 0; border-radius: 10px; border: 1px solid var(--meet-line-strong);
  background: rgba(238, 243, 245, 0.05); font-size: 14px; cursor: pointer; white-space: nowrap; overflow: hidden; transition: background 140ms ease, border-color 140ms ease;
}
.meet-linkpill:hover { background: rgba(238, 243, 245, 0.1); border-color: rgba(238, 243, 245, 0.28); }
.meet-linkpill-text { padding: 0 12px; color: var(--meet-muted); max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.meet-linkpill-copy { display: inline-flex; align-items: center; gap: 7px; height: 100%; padding: 0 12px; border-left: 1px solid var(--meet-line-strong); font-weight: 560; }
.meet-linkpill-copy svg { width: 16px; height: 16px; }

/* People panel: a side column on a laptop, a sheet from the bottom on a phone. */
.meet-people {
  width: 340px; margin: 4px 18px 10px 0; padding: 18px 16px; border-radius: 20px; overflow-y: auto; min-height: 0;
  background: rgba(238, 243, 245, 0.05); border: 1px solid var(--meet-line);
}
.meet-people-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.meet-people-head h2 { margin: 0; font: 700 18px/1.2 var(--meet-display); }
.meet-people-head .meet-sheet-close { position: static; }
.meet-people-group { margin: 16px 0 6px; font-size: 12px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--meet-faint); }
.meet-people-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.meet-person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px 8px; border-radius: 12px; }
.meet-person:hover { background: rgba(238, 243, 245, 0.04); }
.meet-person-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 580; }
.meet-person-name em { margin-left: 8px; font-style: normal; font-size: 12px; color: var(--meet-accent); font-weight: 600; }
.meet-person-mic { display: flex; color: var(--meet-muted); }
.meet-person-mic[data-on="false"] { color: #ff8d86; }
.meet-person-mic svg { width: 17px; height: 17px; }
.meet-person-actions { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.meet-sent { display: inline-flex; align-items: center; gap: 5px; color: var(--meet-accent); font-size: 13.5px; font-weight: 600; }
.meet-sent svg { width: 16px; height: 16px; }
.meet-remove { font-size: 13px; }
.meet-invite-form { grid-column: 1 / -1; margin-top: 8px; padding: 14px; border-radius: 14px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(107, 231, 223, 0.25); }
.meet-invite-row { display: flex; gap: 8px; }
.meet-root .meet-invite-form input { height: 40px; font-size: 15px; border-radius: 10px; }
.meet-invite-form .meet-button { height: 40px; }
.meet-root .meet-invite-form label { font-size: 13.5px; }
.meet-person-note { grid-column: 2 / -1; margin: 0; font-size: 13px; }
.meet-people-tip { display: flex; gap: 10px; margin: 18px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--meet-accent-soft); color: var(--meet-muted); font-size: 13.5px; }
.meet-people-tip svg { color: var(--meet-accent); margin-top: 1px; }
.meet-people-tip b { color: var(--meet-ink); }
.meet-call .meet-toast { bottom: calc(110px + env(safe-area-inset-bottom)); }

/* A very wide, short window draws the island large: the first screen leaves it more room. */
@media (min-aspect-ratio: 2/1) and (min-width: 1041px) {
  .meet-home { padding-bottom: 35vh; }
}

/* ---- Narrower screens ---- */
@media (max-width: 1040px) {
  .meet-home { grid-template-columns: minmax(0, 1fr); gap: 44px; min-height: 0; padding: 28px 0 0; }
  .meet-home-side { max-width: 520px; }
  .meet-scroll-cue { position: static; justify-self: start; margin: 4px 0 0; }
  .meet-about { padding-top: 88px; }
  .meet-about-intro { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .meet-flow { max-width: 560px; }
  .meet-chapter, .meet-chapter:nth-of-type(even) { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 88px; }
  .meet-chapter:nth-of-type(even) .meet-chapter-copy { order: 0; }
  .meet-chapter:nth-of-type(odd) .meet-shot, .meet-chapter:nth-of-type(even) .meet-shot { margin-inline: 0; }
  .meet-chapter-copy p { max-width: 34em; }
  .meet-prejoin { grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 620px; margin-inline: auto; padding-top: 8px; }
}
@media (max-width: 760px) {
  .meet-top { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
  .meet-main { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); padding-bottom: 28px; }
  .meet-account-name { display: none; }
  .meet-home { padding-top: 16px; gap: 36px; }
  /* A phone's screen is mostly words: the night stays further back. */
  .meet-backdrop-veil { background: linear-gradient(180deg, rgba(3, 6, 11, 0.8) 0%, rgba(3, 6, 11, 0.56) 30%, rgba(3, 6, 11, 0.3) 62%, rgba(3, 6, 11, 0.12) 78%, rgba(3, 6, 11, 0.5) 100%); }
  .meet-about { padding-top: 72px; }
  .meet-chapter, .meet-chapter:nth-of-type(even) { margin-top: 72px; }
  .meet-chapter-copy p { font-size: 16px; }
  .meet-shot { border-radius: 12px; }
  .meet-aside, .meet-next { padding: 18px 18px 8px; }
  .meet-get { gap: 40px; padding: 110px 0 28px; }
  .meet-home-lead { font-size: 16.5px; margin-bottom: 26px; }
  .meet-home-actions { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .meet-home-actions .meet-button { padding: 0 12px; }
  .meet-join-code { max-width: none; }
  .meet-invite-card { padding: 22px 20px; }
  .meet-invite-headline { font-size: 22px; }
  .meet-mark, .meet-mark-tile { width: 58px; height: 58px; }
  .meet-mark { margin-bottom: 16px; }
  .meet-mark-tile { border-radius: 16px; font-size: 21px; }
  .meet-preview { aspect-ratio: 16 / 10; border-radius: 18px; }
  .meet-prejoin { gap: 16px; padding-top: 0; }
  .meet-round { width: 48px; height: 48px; }
  .meet-preview-controls { bottom: 12px; }
  .meet-name-form { margin-top: 18px; }
  .meet-calendar-row .meet-button { flex: 1 1 100%; }
  .meet-left { grid-template-columns: minmax(0, 1fr); }
  .meet-card { padding: 22px 20px; }
  .meet-sheet { top: auto; bottom: 0; left: 0; width: 100%; transform: none; border-radius: 20px 20px 0 0; padding-bottom: max(26px, env(safe-area-inset-bottom)); animation: meet-sheet-up 240ms ease; }
  .meet-field-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .meet-field-row > div:first-child { grid-column: 1 / -1; }
  .meet-foot { padding-left: 18px; padding-right: 18px; }

  .meet-call-top { padding: 10px 12px; }
  .meet-linkpill-text { display: none; }
  .meet-linkpill-copy { border-left: 0; }
  .meet-call-banner { margin: 0 12px 6px; }
  .meet-call-stage { padding: 2px 10px 6px; }
  .meet-tiles { gap: 8px; }
  .meet-tile { border-radius: 14px; }
  .meet-call[data-mode="present"] .meet-call-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .meet-call[data-mode="present"] .meet-tiles { flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .meet-call[data-mode="present"] .meet-tile { width: 128px; }
  .meet-call[data-mode="present"] .meet-tile-role { display: none; }
  .meet-controls { gap: 4px; padding: 8px 8px max(12px, env(safe-area-inset-bottom)); }
  .meet-control { min-width: 64px; }
  .meet-control-label { font-size: 11px; }
  .meet-people {
    position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; width: auto; max-height: 78dvh; margin: 0; padding: 18px 16px max(22px, env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0; background: var(--meet-glass-strong); border: 1px solid var(--meet-line-strong); box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.5);
    animation: meet-sheet-up 240ms ease;
  }
  .meet-knock { right: 12px; width: calc(100% - 24px); }
  .meet-knock:nth-child(1) { top: 12px; } .meet-knock:nth-child(2) { top: 118px; } .meet-knock:nth-child(3) { top: 224px; }
  .meet-knock-more { right: 12px; top: 330px; }
  .meet-ready { left: 12px; right: 12px; width: auto; bottom: 104px; }
  .meet-invite { bottom: 104px; }
  .meet-call .meet-toast { bottom: calc(100px + env(safe-area-inset-bottom)); }
}
@keyframes meet-sheet-up { from { transform: translateY(24px); opacity: 0; } }
@media (max-height: 520px) and (orientation: landscape) {
  .meet-call-top { padding-top: 6px; padding-bottom: 6px; }
  .meet-control-label { display: none; }
  .meet-controls { padding-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .meet-root *, .meet-root *::before, .meet-root *::after, .meet-backdrop * { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .meet-backdrop-stage { animation: none !important; }
}