/* ═══════════════════════════════════════════════════════════════════════════
   Grata Meet — Telehealth Video Call Styles
   Dark theme with green accent (#22C55E) matching provider-portal
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Reset & Base ───────────────────────────────────────────────────────── */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg: #0c0e14;
    --bg-gradient: linear-gradient(145deg, #0c0e14 0%, #111520 40%, #0d1218 100%);
    --surface: rgba(22, 25, 35, 0.85);
    --surface-solid: #161923;
    --surface-2: rgba(32, 36, 50, 0.8);
    --surface-glass: rgba(22, 25, 35, 0.65);
    --border: rgba(55, 60, 80, 0.5);
    --border-glow: rgba(34, 197, 94, 0.15);
    --text: #f0f0f5;
    --text-muted: #8b8fa3;
    --primary: #22C55E;
    --primary-hover: #16A34A;
    --primary-glow: rgba(34, 197, 94, 0.25);
    --danger: #ef4444;
    --danger-hover: #dc2626;
    --success: #10b981;
    --warning: #eab308;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45);
    --shadow-glow: 0 0 20px rgba(34, 197, 94, 0.15);
}

body {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    background-image: var(--bg-gradient);
    color: var(--text);
    min-height: 100vh;
    /* Fix mobile Safari 100vh issue — --vh is set by JS */
    min-height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Safe area insets for notched phones */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.hidden { display: none !important; }

/* ── 2. Buttons & Inputs ──────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    font-family: inherit;
    line-height: 1;
}

.btn:disabled {
    opacity: 0.5;
    cursor: default;
}

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

.btn-primary {
    background: linear-gradient(180deg, #2bd06b 0%, #22C55E 100%);
    color: #062b15;
    font-weight: 600;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 -1px 0 rgba(0, 0, 0, 0.18) inset,
        0 6px 16px -4px rgba(34, 197, 94, 0.45);
}
.btn-primary:hover:not(:disabled) {
    background: linear-gradient(180deg, #36dc78 0%, #25cf65 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 -1px 0 rgba(0, 0, 0, 0.18) inset,
        0 10px 28px -6px rgba(34, 197, 94, 0.55);
    transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow:
        0 1px 1px rgba(0, 0, 0, 0.25) inset,
        0 4px 10px -4px rgba(34, 197, 94, 0.4);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    transform: translateY(-1px);
}
.btn-secondary:active:not(:disabled) {
    transform: translateY(0);
    background: rgba(255, 255, 255, 0.05);
}

.btn-danger {
    background: var(--danger);
    color: #fff;
}
.btn-danger:hover:not(:disabled) {
    background: var(--danger-hover);
}

.btn-text {
    background: transparent;
    color: var(--primary);
    border: none;
}
.btn-text:hover:not(:disabled) {
    background: rgba(34, 197, 94, 0.1);
}
.btn-text:disabled {
    color: var(--text-muted);
}

.btn-icon {
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.btn-icon:hover {
    color: var(--text);
    background: var(--surface-2);
}

.btn-lg {
    padding: 14px 28px;
    font-size: 15px;
    border-radius: var(--radius);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.input-field {
    background: rgba(10, 12, 18, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.input-field:hover:not(:focus) {
    border-color: rgba(255, 255, 255, 0.14);
}
.input-field:focus {
    border-color: var(--primary);
    background: rgba(10, 12, 18, 0.8);
    box-shadow:
        0 0 0 4px rgba(34, 197, 94, 0.12),
        0 0 24px -8px rgba(34, 197, 94, 0.45);
}
.input-field::placeholder {
    color: rgba(255, 255, 255, 0.28);
    letter-spacing: 0.02em;
}

/* Native date/time inputs: brighten the picker indicator and force dark
   color-scheme so the in-browser popup renders in dark mode where supported. */
.input-field[type="date"],
.input-field[type="time"],
.input-field[type="datetime-local"] {
    color-scheme: dark;
}
.input-field[type="date"]::-webkit-calendar-picker-indicator,
.input-field[type="time"]::-webkit-calendar-picker-indicator,
.input-field[type="datetime-local"]::-webkit-calendar-picker-indicator {
    /* brightness(0) invert(1) maps the UA's dark glyph to pure white,
       legible against the dark surface. */
    filter: brightness(0) invert(1);
    opacity: 0.85;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.input-field[type="date"]::-webkit-calendar-picker-indicator:hover,
.input-field[type="time"]::-webkit-calendar-picker-indicator:hover,
.input-field[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.device-select {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s ease;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8fa3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}
.device-select:focus {
    border-color: var(--primary);
}

/* ── 3. Landing Page ──────────────────────────────────────────────────────── */

.landing-body {
    overflow: auto;
    background: var(--bg);
    position: relative;
}

/* Atmospheric layered background — grid texture + dual radial glows */
.landing-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.landing-bg-grid {
    position: absolute;
    inset: -1px;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 0%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 0%, transparent 80%);
}
.landing-bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    will-change: transform;
}
.landing-bg-glow-a {
    width: 540px;
    height: 540px;
    left: -120px;
    top: -120px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.18) 0%, transparent 65%);
    animation: landing-drift-a 22s ease-in-out infinite alternate;
}
.landing-bg-glow-b {
    width: 620px;
    height: 620px;
    right: -180px;
    bottom: -160px;
    background: radial-gradient(circle, rgba(64, 124, 255, 0.10) 0%, transparent 70%);
    animation: landing-drift-b 28s ease-in-out infinite alternate;
}
@keyframes landing-drift-a {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(40px, 30px) scale(1.08); }
}
@keyframes landing-drift-b {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(-30px, -50px) scale(1.05); }
}

.landing-container {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px;
    gap: 88px;
    max-width: 1180px;
    margin: 0 auto;
}

.landing-left {
    flex: 1;
    max-width: 520px;
    animation: landing-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Eyebrow pill — small live indicator above the title */
.landing-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 10px;
    margin-bottom: 28px;
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.18);
    border-radius: 999px;
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: landing-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s both;
}
.landing-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
    animation: landing-pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes landing-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

/* Title — Fraunces, large, optical-size aware */
.landing-title {
    font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
    font-weight: 360;
    font-size: clamp(56px, 7vw, 88px);
    line-height: 0.96;
    letter-spacing: -0.035em;
    margin: 0 0 20px;
    color: rgba(255, 255, 255, 0.96);
    animation: landing-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both;
}
.landing-title-word {
    display: inline-block;
}
.landing-title-word + .landing-title-word {
    margin-left: 0.18em;
}
.landing-title-word-accent {
    /* Brand green gradient. Typography deliberately matches "Grata" — no
       italic, no WONK — so "Meet" doesn't read as a different word in a
       different mood; it's the same wordmark continuing in a brand color. */
    background: linear-gradient(135deg, #d6ffe0 0%, #4ade80 38%, #22C55E 78%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.landing-subtitle {
    font-family: 'Manrope', sans-serif;
    color: rgba(255, 255, 255, 0.55);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.55;
    max-width: 36ch;
    margin: 0 0 36px;
    animation: landing-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.18s both;
}

/* Glassmorphic action card */
.landing-card {
    position: relative;
    padding: 24px;
    background: linear-gradient(180deg, rgba(28, 32, 44, 0.55) 0%, rgba(20, 23, 32, 0.65) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 24px 48px -16px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(22px) saturate(1.2);
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
    animation: landing-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.26s both;
}
/* Soft top edge highlight — subtle depth */
.landing-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(34, 197, 94, 0.08) 0%, transparent 60%);
    opacity: 0.9;
}

.landing-actions {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.landing-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.landing-divider::before,
.landing-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
}

.join-form {
    display: flex;
    gap: 8px;
}
.join-form .input-field {
    flex: 1;
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    letter-spacing: 0.04em;
    font-size: 14px;
}

/* Right column — illustration with parallax-feeling halo */
.landing-right {
    flex: 1;
    max-width: 480px;
    animation: landing-rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s both;
}
.landing-illustration {
    position: relative;
}
.landing-illustration-halo {
    position: absolute;
    inset: -60px -40px -40px -40px;
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(34, 197, 94, 0.10) 0%, transparent 70%);
    filter: blur(24px);
    pointer-events: none;
    animation: landing-halo 8s ease-in-out infinite alternate;
}
@keyframes landing-halo {
    from { transform: scale(1); opacity: 0.85; }
    to   { transform: scale(1.06); opacity: 1; }
}
.landing-illustration-svg {
    position: relative;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.45));
    transform-origin: center;
    animation: landing-float 9s ease-in-out infinite alternate;
}
@keyframes landing-float {
    from { transform: translateY(0) rotate(-0.4deg); }
    to   { transform: translateY(-10px) rotate(0.4deg); }
}

@keyframes landing-rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Footer — small, calm */
.landing-foot {
    position: fixed;
    bottom: 24px;
    left: 0;
    right: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.32);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    pointer-events: none;
    animation: landing-rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.55s both;
}
.landing-foot-mark {
    color: var(--primary);
}
.landing-foot-sep {
    color: rgba(255, 255, 255, 0.14);
}

/* Tablet — stack vertically but keep the device mockup visible. The
   illustration is the page's hero asset; hiding it at 768 was throwing
   away the entire right-column story on iPad portrait. */
@media (max-width: 900px) {
    .landing-container {
        flex-direction: column;
        gap: 40px;
        padding: max(56px, calc(env(safe-area-inset-top, 0px) + 32px)) 24px 88px;
    }
    .landing-left,
    .landing-right {
        max-width: 100%;
        width: 100%;
    }
    .landing-title {
        font-size: clamp(48px, 9vw, 64px);
    }
    .landing-illustration {
        max-width: 380px;
        margin: 0 auto;
    }
    .landing-foot {
        position: static;
        margin-top: 32px;
        flex-wrap: wrap;
        padding: 0 16px calc(env(safe-area-inset-bottom, 0px) + 8px);
    }
}

/* Phone — drop the mockup, give title room to breathe, stack CTAs.
   16px input font is the iOS focus-zoom threshold; landing-card glass
   blur becomes expensive enough on mid-tier Android to be worth dropping. */
@media (max-width: 600px) {
    .landing-container {
        gap: 28px;
        padding: max(44px, calc(env(safe-area-inset-top, 0px) + 24px)) 18px 72px;
    }
    .landing-right { display: none; }
    .landing-eyebrow { margin-bottom: 20px; }
    .landing-title { font-size: clamp(40px, 11vw, 56px); }
    .landing-subtitle { font-size: 15px; margin-bottom: 28px; }
    .landing-card {
        padding: 20px;
        border-radius: 18px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    .landing-btn-row { flex-direction: column; }
    .landing-btn-row .btn { width: 100%; }
    .input-field { font-size: 16px; }
    .auth-bar {
        top: max(12px, env(safe-area-inset-top, 0px));
        right: max(12px, env(safe-area-inset-right, 0px));
    }
}

.new-room-info {
    margin-top: 24px;
    padding: 20px;
    background: var(--surface-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    animation: fadeInUp 0.3s ease-out;
}
.new-room-info p {
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 8px;
}

.link-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.meeting-link {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 13px;
    color: var(--primary);
    word-break: break-all;
}

.landing-btn-row {
    display: flex;
    gap: 12px;
}

.new-room-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

/* ── 3a. Chip Input ──────────────────────────────────────────────────────── */

.chip-input-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: text;
    min-height: 44px;
    align-items: center;
    transition: border-color 0.15s ease;
}
.chip-input-container:focus-within {
    border-color: var(--primary);
}

.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 16px;
    font-size: 13px;
    color: var(--text);
    animation: chip-in 0.15s ease;
}

.chip-icon {
    font-size: 12px;
    color: var(--text-muted);
}

.chip-text {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
    border-radius: 50%;
    transition: color 0.15s ease;
}
.chip-remove:hover {
    color: var(--danger);
}

.chip-input {
    border: none;
    background: none;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    flex: 1;
    min-width: 140px;
    padding: 2px 0;
}
.chip-input::placeholder {
    color: var(--text-muted);
}

.chip-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

@keyframes chip-in {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

/* ── 3b. Inline Invite Form ──────────────────────────────────────────────── */

.invite-form-inline {
    margin-top: 20px;
    padding: 20px;
    background: var(--surface-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    animation: fadeInUp 0.3s ease-out;
}

.invite-form-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
}

.invite-form-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.invite-status {
    margin-top: 12px;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
}

.invite-status-success {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.invite-status-partial {
    background: rgba(234, 179, 8, 0.15);
    color: var(--warning);
}

/* ── 3c. Schedule Modal ──────────────────────────────────────────────────── */

.schedule-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}
.schedule-modal.hidden {
    display: none;
}

.schedule-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 7, 12, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.schedule-modal-content {
    position: relative;
    background: linear-gradient(180deg, rgba(28, 32, 44, 0.92) 0%, rgba(20, 23, 32, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    max-width: 540px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 1;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 32px 64px -16px rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    animation: modalIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.schedule-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 26px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.schedule-modal-body {
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.schedule-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 26px 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label {
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.form-row {
    display: flex;
    gap: 12px;
}

.form-group-half {
    flex: 1;
}

.btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* Schedule success */
.schedule-success {
    padding: 36px 26px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.schedule-success h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: "opsz" 96, "SOFT" 50;
    font-weight: 380;
    font-size: 26px;
    letter-spacing: -0.018em;
    color: rgba(255, 255, 255, 0.96);
    margin: 0;
}
.schedule-success-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

/* ── 3d. Invite Page ─────────────────────────────────────────────────────── */

.invite-container {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px 20px;
}

.invite-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    max-width: 480px;
    width: 100%;
    padding: 44px 40px;
    background: linear-gradient(180deg, rgba(28, 32, 44, 0.55) 0%, rgba(20, 23, 32, 0.65) 100%);
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 28px 56px -16px rgba(0, 0, 0, 0.6);
    animation: landing-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    position: relative;
}
.invite-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(ellipse 90% 80% at 50% 0%, rgba(34, 197, 94, 0.07) 0%, transparent 60%);
}

.invite-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.06));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6cf594;
    border: 1px solid rgba(34, 197, 94, 0.18);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 0 36px -8px rgba(34, 197, 94, 0.4);
}
.invite-icon-wrapper.invite-icon-error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(239, 68, 68, 0.06));
    color: #ff7b7b;
    border-color: rgba(239, 68, 68, 0.2);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 0 36px -8px rgba(239, 68, 68, 0.4);
}

.invite-title {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: "opsz" 96, "SOFT" 50, "WONK" 0;
    font-weight: 360;
    font-size: 32px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.96);
    margin: 0;
}

.invite-subtitle {
    color: rgba(255, 255, 255, 0.55);
    font-size: 15px;
    line-height: 1.55;
    max-width: 32ch;
    margin: 0;
}

.invite-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 14px 18px;
    background: rgba(10, 12, 18, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
}

.invite-meta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    text-align: left;
}
.invite-meta-row svg {
    color: rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}

.invite-countdown {
    padding: 18px 24px;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 14px;
    width: 100%;
}

.invite-countdown-label {
    font-family: 'Manrope', sans-serif;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
}

.invite-countdown-timer {
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    font-size: 26px;
    font-weight: 500;
    color: #6cf594;
    letter-spacing: 0.04em;
}

.invite-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.invite-join-btn {
    width: 100%;
    padding: 16px;
    font-size: 16px;
}

.invite-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.invite-loading-text {
    color: var(--text-muted);
    font-size: 14px;
}

/* ── 4. Pre-join Lobby ────────────────────────────────────────────────────── */

/* Atmospheric background that piggybacks on .landing-bg-* keyframes */
.room-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.lobby-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.lobby-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    max-width: 560px;
    width: 100%;
    padding: 36px 40px 40px;
    background: linear-gradient(180deg, rgba(28, 32, 44, 0.5) 0%, rgba(20, 23, 32, 0.62) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 28px 56px -16px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(22px) saturate(1.2);
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
    animation: landing-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.lobby-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(ellipse 90% 80% at 50% 0%, rgba(34, 197, 94, 0.07) 0%, transparent 60%);
}

.lobby-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 10px;
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.18);
    border-radius: 999px;
    font-family: 'Manrope', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}

.lobby-title {
    font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
    font-weight: 360;
    font-size: 40px;
    line-height: 1;
    letter-spacing: -0.025em;
    margin: 4px 0 -8px;
    color: rgba(255, 255, 255, 0.96);
}

.lobby-subtitle {
    color: rgba(255, 255, 255, 0.4);
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 0;
}

.preview-container {
    width: 100%;
    max-width: 460px;
    aspect-ratio: 16 / 9;
    background: rgba(10, 12, 18, 0.55);
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 12px 24px -10px rgba(0, 0, 0, 0.5);
}

.preview-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
}

.preview-container .avatar-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-circle {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(55, 60, 80, 0.4));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 600;
    color: var(--text);
    border: 2px solid var(--border);
}

.lobby-controls {
    display: flex;
    gap: 12px;
    align-items: center;
}
.lobby-controls .control-btn {
    width: 44px;
    height: 44px;
}

.lobby-join-area {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    width: 100%;
    max-width: 320px;
}
.lobby-join-area .input-field {
    width: 100%;
    text-align: center;
    font-size: 16px;
}

.lobby-device-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
    min-height: 18px;
    margin-top: 4px;
}
.lobby-device-status.ready {
    color: var(--success);
}
.lobby-device-status.error {
    color: #ef4444;
}

#joinCallBtn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    animation: none !important;
}

/* ── 5. Waiting Room ──────────────────────────────────────────────────────── */

.waiting-room-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.waiting-room-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 40px 48px;
    max-width: 460px;
    background: linear-gradient(180deg, rgba(28, 32, 44, 0.5) 0%, rgba(20, 23, 32, 0.62) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 28px 56px -16px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(22px) saturate(1.2);
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
    animation: landing-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.waiting-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 10px;
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.18);
    border-radius: 999px;
    font-family: 'Manrope', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}

.waiting-title {
    font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 0;
    font-weight: 350;
    font-size: 44px;
    line-height: 1;
    letter-spacing: -0.025em;
    margin: 4px 0 8px;
    color: rgba(255, 255, 255, 0.96);
    font-style: italic;
}

.waiting-room-overlay .spinner {
    width: 36px;
    height: 36px;
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.9s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    margin-top: 4px;
}

.waiting-room-overlay p {
    color: rgba(255, 255, 255, 0.55);
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
    max-width: 32ch;
    margin: 0;
}

.waiting-room-overlay .btn {
    margin-top: 8px;
}

/* ── 6. Room Layout ───────────────────────────────────────────────────────── */

.room-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    width: 100vw;
}

/* ── 7. Top Bar ───────────────────────────────────────────────────────────── */

.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: rgba(14, 17, 24, 0.6);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    height: 56px;
    flex-shrink: 0;
    z-index: 10;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.room-title {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: "opsz" 24, "SOFT" 30, "WONK" 0;
    font-weight: 380;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.92);
}

.room-code {
    color: rgba(255, 255, 255, 0.4);
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
}

.lock-indicator {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    font-size: 14px;
}
.lock-indicator svg {
    width: 14px;
    height: 14px;
}

.recording-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--danger);
    font-size: 12px;
    font-weight: 600;
    max-width: 280px;
}

.recording-indicator .recording-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.caption-flag {
    color: rgba(255, 255, 255, 0.55);
    font-style: italic;
    margin-left: 4px;
}

.recording-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger);
    animation: pulse 1.5s ease-in-out infinite;
    display: inline-block;
}

.call-timer {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
}

.participant-count {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    font-weight: 500;
}
.participant-count svg {
    color: rgba(255, 255, 255, 0.45);
}

/* ── 8. Video Grid ────────────────────────────────────────────────────────── */

.main-area {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    position: relative;
}

.video-grid {
    flex: 1;
    display: grid;
    gap: 10px;
    padding: 10px;
    align-content: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* FIX: Single participant should fill the available space, not cap at 960px */
.video-grid[data-count="0"],
.video-grid[data-count="1"] {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    align-content: stretch;
    justify-content: stretch;
}

.video-grid[data-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
}

.video-grid[data-count="3"],
.video-grid[data-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.video-grid[data-count="5"],
.video-grid[data-count="6"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

/* Speaker view */
.video-grid.speaker-view {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
}

.video-grid.speaker-view > .video-tile:first-child {
    grid-column: 1 / -1;
    min-height: 0;
}

.video-grid.speaker-view > .video-tile:not(:first-child) {
    max-height: 140px;
}

/* Video tile */
.video-tile {
    position: relative;
    background: var(--surface-2);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    border: 1px solid var(--border);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.video-tile:hover {
    border-color: rgba(55, 60, 80, 0.7);
}

.video-tile.speaking {
    border-color: var(--primary);
    box-shadow: 0 0 16px var(--primary-glow), inset 0 0 0 1px rgba(34, 197, 94, 0.1);
}

.video-tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.video-tile.local video {
    transform: scaleX(-1);
}

.video-tile.spotlight {
    grid-column: span 2;
    grid-row: span 2;
}

.tile-label {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.96);
    padding: 5px 11px;
    border-radius: 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.005em;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 2;
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.4);
}

.tile-label .muted-icon {
    opacity: 0.7;
}

.force-mute-recording-overlay {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    background: rgba(180, 30, 30, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
    z-index: 3;
    pointer-events: none;
}

.video-tile .avatar-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-tile .avatar-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(55, 60, 80, 0.4));
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 600;
    color: var(--text);
}

.hand-raised-indicator {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 16px;
    padding: 4px 8px;
    font-size: 18px;
    z-index: 2;
    line-height: 1;
}

.network-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 4px;
}
.network-dot.good { background: var(--success); }
.network-dot.fair { background: var(--warning); }
.network-dot.poor { background: var(--danger); }

/* ── 9. Control Bar ───────────────────────────────────────────────────────── */

/* FIX: Prevent overflow/wrapping that caused buttons to stack vertically */
.control-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px 16px;
    background: rgba(14, 17, 24, 0.7);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 10;
    /* Subtle top edge highlight */
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.03) inset;
}

/* Hide scrollbar but keep scrollability */
.control-bar::-webkit-scrollbar {
    display: none;
}
.control-bar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.control-btn {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.18s ease,
                border-color 0.18s ease,
                box-shadow 0.18s ease,
                color 0.18s ease;
    position: relative;
    flex-shrink: 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.control-btn:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 8px 16px -6px rgba(0, 0, 0, 0.5);
}
.control-btn:active {
    transform: translateY(0) scale(0.96);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) inset;
}

/* Toggled-off mic / cam — refined danger gradient */
.control-btn.muted {
    background: linear-gradient(180deg, #f25555 0%, #d83b3b 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 -1px 0 rgba(0, 0, 0, 0.18) inset,
        0 6px 16px -4px rgba(239, 68, 68, 0.45);
}
.control-btn.muted:hover {
    background: linear-gradient(180deg, #f86464 0%, #de4444 100%);
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 -1px 0 rgba(0, 0, 0, 0.18) inset,
        0 10px 22px -6px rgba(239, 68, 68, 0.55);
}

/* Brand-accent active state — captions, hand-raise, etc. */
.control-btn.active {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.32);
    color: #6cf594;
    box-shadow:
        0 0 0 1px rgba(34, 197, 94, 0.18) inset,
        0 0 18px -4px rgba(34, 197, 94, 0.35);
}
.control-btn.active:hover {
    background: rgba(34, 197, 94, 0.18);
    border-color: rgba(34, 197, 94, 0.45);
}

/* Screen-share active — saturated primary fill */
.control-btn.screen-active {
    background: linear-gradient(180deg, #2bd06b 0%, #22C55E 100%);
    color: #062b15;
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 -1px 0 rgba(0, 0, 0, 0.2) inset,
        0 8px 22px -4px rgba(34, 197, 94, 0.5);
}
.control-btn.screen-active:hover {
    background: linear-gradient(180deg, #36dc78 0%, #25cf65 100%);
}

/* End call — refined danger gradient pill, slightly larger */
.control-btn.end-call {
    background: linear-gradient(180deg, #f25555 0%, #c52d2d 100%);
    color: #fff;
    width: 64px;
    min-width: 64px;
    border-radius: 24px;
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 -1px 0 rgba(0, 0, 0, 0.22) inset,
        0 8px 22px -4px rgba(239, 68, 68, 0.5);
}
.control-btn.end-call:hover {
    background: linear-gradient(180deg, #ff6363 0%, #d23434 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 -1px 0 rgba(0, 0, 0, 0.22) inset,
        0 12px 28px -4px rgba(239, 68, 68, 0.6);
    transform: translateY(-2px);
}
.control-btn.end-call:active {
    transform: translateY(0) scale(0.97);
}

.control-btn .badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--primary);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.control-separator {
    width: 1px;
    height: 22px;
    background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
    margin: 0 4px;
    flex-shrink: 0;
}

/* ── 10. Chat Sidebar ─────────────────────────────────────────────────────── */

.chat-sidebar {
    width: 340px;
    background: rgba(14, 17, 24, 0.7);
    backdrop-filter: blur(22px) saturate(1.2);
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    overflow: hidden;
    box-shadow: -1px 0 0 rgba(255, 255, 255, 0.03) inset;
}
.chat-sidebar.closed {
    width: 0;
    overflow: hidden;
    opacity: 0;
}

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: "opsz" 24, "SOFT" 30;
    font-weight: 380;
    font-size: 16px;
    letter-spacing: -0.005em;
    color: rgba(255, 255, 255, 0.92);
    flex-shrink: 0;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}
.chat-messages::-webkit-scrollbar {
    width: 6px;
}
.chat-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}
.chat-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.16);
}

.chat-msg {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.chat-msg .msg-name {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: -0.005em;
}
.chat-msg .msg-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.5;
    word-wrap: break-word;
}
.chat-msg .msg-time {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.32);
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    letter-spacing: 0.04em;
}
.chat-msg:hover .msg-time {
    color: rgba(255, 255, 255, 0.5);
}
.chat-msg.system .msg-text {
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
    font-size: 12px;
}

.chat-input-area {
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 14px 18px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}
.chat-input-area .input-field {
    flex: 1;
    min-width: 0;
    font-size: 13px;
}
.chat-input-area .btn-primary {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 10px;
    flex-shrink: 0;
}

/* ── 11. Participant Panel ────────────────────────────────────────────────── */

.participant-panel {
    width: 320px;
    background: rgba(14, 17, 24, 0.7);
    backdrop-filter: blur(22px) saturate(1.2);
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    overflow: hidden;
    box-shadow: -1px 0 0 rgba(255, 255, 255, 0.03) inset;
}
.participant-panel.closed {
    width: 0;
    overflow: hidden;
    opacity: 0;
}

/* FIX: Match actual HTML class name */
.participant-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: "opsz" 24, "SOFT" 30;
    font-weight: 380;
    font-size: 16px;
    letter-spacing: -0.005em;
    color: rgba(255, 255, 255, 0.92);
    flex-shrink: 0;
}

.participant-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.participant-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease;
}
.participant-item:hover {
    background: var(--surface-2);
}

.participant-item .participant-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-right: 10px;
    flex-shrink: 0;
}

.participant-item .participant-name {
    flex: 1;
    font-size: 14px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.participant-item .host-badge {
    background: var(--primary);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 6px;
    flex-shrink: 0;
    line-height: 1.3;
}

.participant-item .participant-status {
    display: flex;
    flex-direction: row;
    gap: 6px;
    color: var(--text-muted);
    margin-left: 8px;
    flex-shrink: 0;
}
.participant-item .participant-status svg {
    width: 16px;
    height: 16px;
}

.participant-item .participant-actions {
    display: none;
    flex-direction: row;
    gap: 4px;
    margin-left: 4px;
    flex-shrink: 0;
}
.participant-item:hover .participant-actions {
    display: flex;
}
.participant-item .participant-actions button {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.participant-item .participant-actions button:hover {
    background: var(--surface-2);
    color: var(--text);
}

/* FIX: Match actual HTML class name (was .panel-footer) */
.participant-panel-bottom {
    padding: 12px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

/* ── 11b. Participant entries (rendered by JS — must match createParticipantEntry classes) ── */

.participant-section + .participant-section {
    margin-top: 12px;
}
.participant-section-header {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 4px 12px 6px;
}
.participant-entry {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease;
}
.participant-entry:hover {
    background: var(--surface-2);
}
.participant-entry .participant-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset, 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.participant-name-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.participant-name {
    font-size: 14px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.participant-badge {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.participant-badge.host-badge {
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    line-height: 1.4;
}
.participant-status-icons {
    display: flex;
    flex-direction: row;
    gap: 6px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.participant-status-icons .status-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
}
.participant-status-icons .status-icon.mic-off { color: #ef4444; }
.participant-status-icons .status-icon.cam-off { color: #ef4444; }
.participant-status-icons .status-icon.hand-raised { color: #f59e0b; }

.participant-host-actions {
    display: none;
    flex-direction: row;
    gap: 4px;
    flex-shrink: 0;
}
.participant-entry:hover .participant-host-actions {
    display: flex;
}
.participant-host-actions button {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background 0.15s ease, color 0.15s ease;
}
.participant-host-actions button:hover {
    background: var(--surface-2);
    color: var(--text);
}
.participant-host-actions button.btn-danger:hover {
    color: #ef4444;
}

/* ── 11c. Layout modes: PiP (2-up) and Spotlight (pinned/screen/speaker) ── */

/* Pin button on tiles */
.tile-pin-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.15s ease, transform 0.15s ease;
}
.video-tile:hover .tile-pin-btn,
.tile-pin-btn.is-pinned {
    display: inline-flex;
}
.tile-pin-btn:hover {
    background: rgba(0, 0, 0, 0.75);
    transform: scale(1.05);
}
.tile-pin-btn.is-pinned {
    background: var(--primary);
}

/* PiP mode (2-person call): remote fills, local floats bottom-right */
.video-grid.pip-mode {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    position: relative;
}
.video-grid.pip-mode > .video-tile.spotlight {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 100%;
}
.video-grid.pip-mode > .video-tile.thumb {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: clamp(140px, 22%, 220px);
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    z-index: 4;
    margin: 0;
}

/* Spotlight mode (pinned, screen-sharing, or active-speaker): main + horizontal strip */
.video-grid.spotlight-mode {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    position: relative;
}
.video-grid.spotlight-mode > .video-tile.spotlight {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
}
.video-grid.spotlight-mode > .video-tile.thumb {
    grid-column: 1;
    grid-row: 2;
    width: clamp(140px, 16vw, 200px);
    aspect-ratio: 16 / 9;
    margin-right: 8px;
    flex-shrink: 0;
}
/* Wrap the thumb strip into a flex row */
.video-grid.spotlight-mode {
    display: grid;
}
.video-grid.spotlight-mode::after {
    content: none;
}
.video-grid.spotlight-mode > .video-tile.thumb {
    /* fall back to inline strip via flex container — see thumb-strip below if many */
}

/* ── 11d. Chat message grouping ─────────────────────────────────────────── */

.chat-msg {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 12px;
    border-radius: 8px;
    transition: background 0.12s ease;
}
.chat-msg:hover {
    background: rgba(255, 255, 255, 0.025);
}
.chat-msg .msg-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
}
.chat-msg .msg-name {
    font-weight: 600;
    color: var(--text);
    font-size: 12px;
}
.chat-msg .msg-time {
    font-size: 10px;
    color: var(--text-muted);
}
.chat-msg .msg-text {
    font-size: 13px;
    color: var(--text);
    line-height: 1.4;
    word-wrap: break-word;
}
.chat-msg.continued {
    padding-top: 1px;
    padding-bottom: 1px;
}
.chat-msg.system {
    font-style: italic;
    color: var(--text-muted);
    font-size: 12px;
    padding: 4px 12px;
    text-align: center;
}

/* ── 11e. Layout selector menu, hide-self, sidebar mode, volume meter ── */

.control-btn-wrap { position: relative; display: inline-block; }

.layout-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: var(--surface-solid);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 4px;
    min-width: 140px;
    z-index: 60;
}
.layout-menu-item {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: var(--text);
    text-align: left;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}
.layout-menu-item:hover { background: var(--surface-2); }
.layout-menu-item.active {
    background: rgba(34, 197, 94, 0.12);
    color: var(--primary);
}

#hideSelfBtn.active { color: var(--primary); }

.video-tile.local.self-hidden { display: none !important; }

.video-grid.sidebar-mode {
    grid-template-columns: 1fr clamp(160px, 22%, 240px);
    grid-template-rows: 1fr;
    gap: 8px;
}
.video-grid.sidebar-mode > .video-tile.spotlight {
    grid-column: 1;
    grid-row: 1;
}
.video-grid.sidebar-mode > .video-tile.thumb {
    grid-column: 2;
    aspect-ratio: 16 / 9;
}

.video-grid.spotlight-mode { gap: 8px; }
.video-grid.spotlight-mode > .video-tile.spotlight + .video-tile.spotlight {
    grid-column: 2;
}

.volume-meter {
    position: absolute;
    left: 8px;
    bottom: 8px;
    width: 4px;
    height: 28px;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 2px;
    overflow: hidden;
    z-index: 2;
    pointer-events: none;
}
.volume-meter-fill {
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #22C55E, #4ade80);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.08s linear;
}

/* ── 12. Reaction Overlay ─────────────────────────────────────────────────── */

.reaction-overlay {
    position: fixed;
    bottom: 80px;
    right: 24px;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    pointer-events: none;
    z-index: 50;
}

.reaction-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface-2);
    border-radius: 20px;
    padding: 6px 12px;
    animation: reaction-in 0.3s ease forwards;
    pointer-events: none;
}
.reaction-pill .reaction-emoji-text {
    font-size: 20px;
    line-height: 1;
}
.reaction-pill .reaction-name {
    font-size: 12px;
    color: var(--text-muted);
}
.reaction-pill.fading {
    animation: reaction-out 0.3s ease forwards;
}

/* ── 13. Reaction Picker ──────────────────────────────────────────────────── */

/* Picker uses position: fixed so it isn't clipped by the control-bar's overflow.
   JS sets `left` and `bottom` from the reaction button's bounding rect on toggle. */
.reaction-picker {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 23, 32, 0.78);
    backdrop-filter: blur(28px) saturate(1.3);
    -webkit-backdrop-filter: blur(28px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 8px;
    display: flex;
    flex-direction: row;
    gap: 4px;
    z-index: 1000;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 16px 36px -12px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    animation: modalIn 0.2s ease-out;
}

/* FIX: Scope picker button styles to avoid conflict with control-btn */
.reaction-picker .reaction-emoji {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: none;
    background: none;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.15s ease;
    padding: 0;
}
.reaction-picker .reaction-emoji:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: scale(1.12);
}

.reaction-picker.hidden {
    display: none !important;
}

/* ── 14. Caption Overlay ──────────────────────────────────────────────────── */

.caption-overlay {
    position: fixed;
    bottom: 96px;
    left: 50%;
    transform: translateX(-50%);
    max-width: min(900px, 86%);
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border-radius: 14px;
    padding: 14px 22px;
    z-index: 40;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 12px 28px -8px rgba(0, 0, 0, 0.55);
}
.caption-overlay.hidden {
    display: none;
}

.caption-line {
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.96);
    line-height: 1.55;
    letter-spacing: -0.005em;
}
.caption-line .caption-speaker {
    font-weight: 600;
    color: #6cf594;
    margin-right: 8px;
    letter-spacing: -0.005em;
}
.caption-line.interim {
    opacity: 0.6;
    font-style: italic;
}

/* ── 15. Device Settings Modal ────────────────────────────────────────────── */

.device-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}
.device-modal.hidden {
    display: none;
}

.device-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 7, 12, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.device-modal-content {
    position: relative;
    background: linear-gradient(180deg, rgba(28, 32, 44, 0.92) 0%, rgba(20, 23, 32, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    padding: 26px;
    max-width: 460px;
    width: 90%;
    z-index: 1;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 32px 64px -16px rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    animation: modalIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.device-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}
.device-modal-header h2,
.schedule-modal-header h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: "opsz" 48, "SOFT" 50, "WONK" 0;
    font-weight: 380;
    font-size: 22px;
    letter-spacing: -0.015em;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
}

/* FIX: Match actual HTML class name (was .device-group label) */
.device-modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.device-label {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* FIX: Match actual HTML class name (was .device-group) */
.device-section {
    margin-top: 4px;
}

/* FIX: Match actual HTML class names (was .toggle-row) */
.toggle-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.toggle-label:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}
.toggle-label span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}
/* Scope this 16x16 sizing to plain checkboxes only — without the
   :not(.toggle-switch) guard, this rule's higher specificity overrides
   the .toggle-switch pill and leaves a 16x16 parent with a 18x18 thumb
   spilling outside it (renders as two disconnected circles when toggled). */
.toggle-label input[type="checkbox"]:not(.toggle-switch) {
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* When a toggle row sits inside the schedule modal it should read as a
   distinct settings option rather than flush against the participant
   chip input above it. */
.schedule-modal-body > .toggle-label {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 6px;
    padding-top: 14px;
}

/* Library tabs (Meetings / Recordings / Transcripts) on the landing page */
.recent-tabs {
    display: flex;
    gap: 4px;
    margin: 12px 0 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.recent-tab {
    background: none;
    border: none;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.recent-tab:hover {
    color: rgba(255, 255, 255, 0.8);
}
.recent-tab.active {
    color: rgba(255, 255, 255, 0.95);
    border-bottom-color: #22C55E;
}

/* Signed-out helper line under the title (only visible when no Firebase
   user is present — toggled from the auth-state callback). */
.landing-signed-out-hint {
    font-family: 'Manrope', sans-serif;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    margin: 0 0 24px;
    animation: landing-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.18s both;
}

/* ── 16. Background Options ───────────────────────────────────────────────── */

.bg-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 8px;
}

.bg-option {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.03);
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
    padding: 4px;
    text-align: center;
    line-height: 1.2;
}
.bg-option.active {
    border-color: rgba(34, 197, 94, 0.5);
    background: rgba(34, 197, 94, 0.1);
    color: #6cf594;
    box-shadow:
        0 0 0 1px rgba(34, 197, 94, 0.25) inset,
        0 0 16px -4px rgba(34, 197, 94, 0.4);
}
.bg-option:hover {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    transform: translateY(-1px);
}

/* ── 17. Recording Consent Dialog ─────────────────────────────────────────── */

/* FIX: Match actual HTML class name (record consent reuses device-modal) */
.dialog-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 16px;
}

/* ── 18. Toast ────────────────────────────────────────────────────────────── */

.copy-toast {
    position: fixed;
    bottom: 96px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: rgba(20, 23, 32, 0.85);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    color: rgba(255, 255, 255, 0.95);
    padding: 11px 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 13px;
    font-weight: 500;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 16px 36px -12px rgba(0, 0, 0, 0.6);
    z-index: 200;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}
.copy-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── 19. Animations ───────────────────────────────────────────────────────── */

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

@keyframes reaction-in {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes reaction-out {
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 2px 12px var(--primary-glow); }
    50% { box-shadow: 0 4px 24px var(--primary-glow), 0 0 40px rgba(34, 197, 94, 0.1); }
}

/* ── 20. Toggle Switch ────────────────────────────────────────────────────── */

.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--surface-2);
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
    flex-shrink: 0;
    outline: none;
}

.toggle-switch:checked {
    background: var(--primary);
}

.toggle-switch::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.toggle-switch:checked::before {
    transform: translateX(20px);
}

/* ── 21. Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    /* Landing chrome is handled by the dedicated 900px / 600px ladder
       in section 3. This block only owns landing-adjacent type tweaks. */
    .landing-divider { font-size: 11px; }
    .landing-signed-out-hint {
        font-size: 13px;
        margin-bottom: 18px;
    }

    /* Inputs hit the iOS auto-zoom threshold at < 16px font on focus. */
    .input-field { font-size: 16px; }

    /* Schedule/Invite */
    .schedule-modal-content {
        width: 95%;
        max-height: 85vh;
    }
    .form-row {
        flex-direction: column;
    }
    .invite-card {
        padding: 32px 24px;
    }
    .invite-title {
        font-size: 22px;
    }
    .invite-countdown-timer {
        font-size: 22px;
    }
    .chip-input {
        font-size: 16px; /* Prevent iOS zoom */
    }

    /* Chat sidebar */
    .chat-sidebar {
        width: 100%;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 20;
    }
    .chat-sidebar.closed {
        width: 0;
    }

    /* Participant panel */
    .participant-panel {
        width: 100%;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 20;
    }
    .participant-panel.closed {
        width: 0;
    }

    /* Video grid */
    .video-grid[data-count="2"] {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
    }

    /* Control buttons — maintain 44px min touch target (WCAG) */
    .control-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }
    .control-btn.end-call {
        width: 56px;
        min-width: 56px;
    }
    .control-btn:hover {
        transform: none;
    }

    .control-separator {
        display: none;
    }

    .control-bar {
        gap: 5px;
        padding: 10px 12px;
        /* Account for bottom safe area (notched phones) */
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }

    /* Top bar safe area */
    .top-bar {
        padding-top: env(safe-area-inset-top, 0px);
    }

    /* Reaction picker */
    .reaction-picker {
        left: auto;
        right: 0;
        transform: none;
    }

    /* Caption overlay */
    .caption-overlay {
        max-width: 95%;
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }

    /* Reaction overlay */
    .reaction-overlay {
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }

    /* Lobby — adjust for mobile keyboards */
    .lobby-card {
        padding: 24px 16px;
    }
    .lobby-join-area .input-field {
        /* Prevent iOS zoom on focus (requires 16px min) */
        font-size: 16px;
    }

    /* Chat input — prevent iOS zoom */
    .chat-input-area .input-field {
        font-size: 16px;
    }

    /* Name input — prevent iOS zoom */
    #nameInput {
        font-size: 16px;
    }
}

/* Very small screens (iPhone SE, etc.) */
@media (max-width: 375px) {
    .control-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }
    .control-btn.end-call {
        width: 48px;
        min-width: 48px;
    }
    .control-bar {
        gap: 2px;
        padding: 6px 8px;
        padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    }
}

/* Landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .video-grid {
        gap: 4px;
        padding: 4px;
    }
    .top-bar {
        height: 36px;
        padding: 0 12px;
    }
    .room-title { font-size: 13px; }
    .control-bar {
        padding: 4px 12px;
    }
    .control-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }
    .control-btn.end-call {
        width: 44px;
        min-width: 44px;
    }
}

/* ── 19. Alignment polish ─────────────────────────────────────────────────── */

/* Top bar: normalize line-height so Fraunces title and Manrope/JetBrains pills
   share a baseline despite different optical metrics. */
.top-bar-left,
.top-bar-right {
    line-height: 1;
}
.room-title {
    line-height: 1;
    display: inline-flex;
    align-items: center;
}
.room-code,
.call-timer {
    line-height: 1;
    display: inline-flex;
    align-items: center;
    height: 22px;
}
.participant-count {
    line-height: 1;
    height: 22px;
}

/* Tile label: keep mute/hand icons vertically centered with text and prevent
   the label from shrinking when extra glyphs are present. */
.tile-label {
    line-height: 1;
    white-space: nowrap;
    min-height: 22px;
}
.tile-label .muted-icon,
.tile-label .hand-indicator {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.tile-label .muted-icon svg,
.tile-label .hand-indicator svg {
    display: block;
}

/* Network dot: position consistently relative to the tile label. */
.video-tile > .network-dot {
    position: absolute;
    bottom: 18px;
    right: 12px;
    z-index: 2;
    margin-left: 0;
}

/* Chat messages: header baseline, system messages truly centered. */
.chat-msg .msg-header {
    line-height: 1.2;
}
.chat-msg.system {
    align-self: center;
    width: auto;
    max-width: 90%;
}

/* Participant entries: host-badge sits on the same baseline as name. */
.participant-badge.host-badge {
    line-height: 1;
    display: inline-flex;
    align-items: center;
    height: 18px;
}
.participant-status-icons,
.participant-host-actions {
    align-items: center;
}

/* Settings modal: even rhythm between label/select pairs. */
.device-modal-body .device-label {
    margin-bottom: 0;
}
.device-modal-body .device-label + .device-select {
    margin-top: -8px;
}

/* Schedule modal: native date/time inputs render slightly taller than
   text inputs because of picker chrome — equalize via fixed height. */
.schedule-modal-body .input-field {
    height: 42px;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: normal;
}

/* Reaction picker: emoji buttons square + glyph optically centered. */
.reaction-picker .reaction-emoji {
    line-height: 1;
    padding: 0;
    aspect-ratio: 1;
}

/* Lobby: keep mic/cam buttons centered horizontally under the preview. */
.lobby-controls {
    justify-content: center;
}

/* Waiting room: tighten vertical rhythm so eyebrow → title → spinner → message → button feels intentional. */
.waiting-room-card .spinner {
    margin-top: 0;
}

/* ── 20. Freeze detection overlay ─────────────────────────────────────────── */

.video-tile.frozen video {
    filter: brightness(0.85) saturate(0.7);
}

.frozen-pill {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background: rgba(20, 23, 32, 0.72);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.88);
    z-index: 3;
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    animation: modalIn 0.2s ease-out;
}
.frozen-pill .frozen-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--warning, #f59e0b);
    animation: pulse 1.5s ease-in-out infinite;
}

/* ── 20. Lobby health banner ──────────────────────────────────────────────── */

.lobby-health-banner {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: rgba(255, 240, 200, 0.95);
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}

/* ── 21. Orientation overlay ──────────────────────────────────────────────── */

.orientation-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 12, 18, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.orientation-overlay.hidden {
    display: none;
}
.orientation-overlay .orientation-message {
    max-width: 80%;
    padding: 16px 22px;
    border-radius: 14px;
    background: rgba(28, 32, 44, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.95);
    font-size: 15px;
    font-weight: 500;
    text-align: center;
}

/* ── Participant Panel Header Actions ──────────────────────────────────── */
.participant-panel-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── In-call Invite Form ───────────────────────────────────────────────── */
.participant-invite-form {
    padding: 14px 16px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.participant-invite-form.hidden {
    display: none;
}
.participant-invite-form .invite-form-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.participant-invite-form .chip-input-container {
    min-height: 44px;
}
.participant-invite-form .chip-hint {
    margin: 0;
    font-size: 11px;
    color: var(--text-muted);
}

/* ── 22. Cross-browser/accessibility hardening ────────────────────────────── */

/* Native form controls render in dark mode where supported. */
:root {
    color-scheme: dark;
}

/* Solid fallback when backdrop-filter is unsupported (Firefox <103, older
   Edge). Without this, glass surfaces become near-transparent and text
   loses contrast against the video grid. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .control-bar,
    .chat-sidebar,
    .participant-panel,
    .device-modal-content,
    .schedule-modal-content,
    .reaction-picker,
    .tile-label,
    .top-bar {
        background: rgba(14, 17, 24, 0.95) !important;
    }
}

/* Honor prefers-reduced-motion: pause non-essential motion. Critical
   transitions (color changes, hidden toggles) still fire because they're
   instant. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .control-btn:hover,
    .btn-primary:hover:not(:disabled),
    .btn-secondary:hover:not(:disabled) {
        transform: none !important;
    }
    .recording-dot,
    .frozen-dot,
    .hand-indicator {
        animation: none !important;
    }
}

/* Forced-colors (Windows High Contrast): keep critical indicators visible
   using system colors. */
@media (forced-colors: active) {
    .recording-indicator,
    .recording-dot {
        forced-color-adjust: none;
        background: Highlight !important;
        color: HighlightText !important;
    }
    .control-btn.muted,
    .control-btn.end-call {
        border: 2px solid ButtonText !important;
        color: ButtonText !important;
    }
    .control-btn.end-call {
        background: LinkText !important;
        color: HighlightText !important;
    }
    .frozen-pill,
    .frozen-dot {
        background: Highlight !important;
        color: HighlightText !important;
        border: 1px solid ButtonText !important;
    }
    .tile-label .muted-icon {
        color: LinkText !important;
    }
}

/* Bump faint text alphas when the user prefers more contrast. */
@media (prefers-contrast: more) {
    .chat-msg .msg-time,
    .chat-msg .msg-header {
        color: rgba(255, 255, 255, 0.75) !important;
    }
    .chat-msg.system .msg-text {
        color: rgba(255, 255, 255, 0.85) !important;
    }
    .input-field::placeholder {
        color: rgba(255, 255, 255, 0.55) !important;
    }
}

/* Touch / coarse-pointer devices: reveal hover-only affordances. */
@media (hover: none) and (pointer: coarse) {
    .tile-pin-btn {
        display: inline-flex;
        opacity: 0.7;
    }
    .tile-pin-btn.is-pinned {
        opacity: 1;
    }
}

/* Suppress iOS double-tap zoom on control buttons. */
.control-btn,
.lobby-controls .control-btn {
    touch-action: manipulation;
}

/* Foldable spanning: best-effort dual-pane (video left / sidebar right). */
@media (spanning: single-fold-vertical) {
    .main-area {
        display: grid;
        grid-template-columns: env(fold-left) env(fold-width) 1fr;
    }
    .chat-sidebar:not(.closed),
    .participant-panel:not(.closed) {
        position: static;
        width: auto;
    }
}

/* Top bar + end-call respect Dynamic Island / safe-area in landscape. */
.top-bar {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
}
.control-bar {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
}

/* Keyboard-shortcuts help styling. */
.shortcuts-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.shortcuts-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text);
}
.shortcuts-list kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    padding: 0 6px;
    border-radius: 6px;
    background: var(--surface-2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--text);
}

/* ── 23. Recovery affordances ──────────────────────────────────────────── */

.tap-to-start {
    position: absolute;
    inset: 0;
    margin: auto;
    width: max-content;
    height: max-content;
    padding: 14px 22px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    color: rgba(255, 255, 255, 0.95);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: 500 13px/1 "Manrope", system-ui, sans-serif;
    z-index: 5;
    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.6);
    transition: transform 0.15s ease, background 0.15s ease;
}
.tap-to-start:hover { background: rgba(0, 0, 0, 0.85); transform: scale(1.02); }
.tap-to-start svg { color: var(--primary, #22C55E); }

.tap-to-reconnect {
    position: fixed;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    padding: 11px 18px;
    border: 1px solid rgba(234, 179, 8, 0.35);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(60, 50, 12, 0.92), rgba(40, 32, 8, 0.95));
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    color: rgba(254, 240, 138, 0.98);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 600 13px/1 "Manrope", system-ui, sans-serif;
    z-index: 250;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 14px 32px -10px rgba(0, 0, 0, 0.6);
    animation: tapToReconnectIn 0.25s ease-out;
}
.tap-to-reconnect:hover { background: linear-gradient(180deg, rgba(78, 64, 16, 0.95), rgba(52, 42, 12, 0.98)); }
.tap-to-reconnect:disabled { opacity: 0.6; cursor: progress; }
.tap-to-reconnect svg { color: rgba(253, 224, 71, 0.95); }

@keyframes tapToReconnectIn {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .tap-to-reconnect { animation: none; }
}

/* ── Optional Sign in (landing page) and in-call avatar chip ─────────────── */
.auth-bar {
    position: absolute;
    top: 16px;
    right: 20px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 8px;
}
.auth-signin-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 13px;
}
.auth-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    border-radius: 999px;
    padding: 4px;
    transition: background 120ms ease;
}
.auth-chip:hover,
.auth-chip:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    outline: none;
}
.auth-chip-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22C55E 0%, #16a34a 100%);
    color: #0f1216;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
}
.auth-chip-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: #1a1d27;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    z-index: 40;
}
.auth-chip-email {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.72);
    word-break: break-all;
    margin-bottom: 8px;
}
.auth-chip-signout {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    color: #e0e0e5;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 13px;
    transition: background 120ms ease;
}
.auth-chip-signout:hover { background: rgba(255, 255, 255, 0.05); }

/* In-call variant: lives inside .top-bar-right, smaller chip */
.auth-chip-incall .auth-chip-avatar {
    width: 26px;
    height: 26px;
    font-size: 12px;
}
.auth-chip-incall .auth-chip-menu {
    top: calc(100% + 6px);
}

/* ── My recent meetings panel (landing) ─────────────────────────────────── */
.recent-meetings {
    margin-top: 20px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    max-width: 520px;
}
.recent-meetings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.recent-meetings-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}
.recent-meetings-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.recent-meetings-empty {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}
.recent-meeting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 8px;
    border-radius: 8px;
    transition: background 120ms ease;
}
.recent-meeting-row:hover { background: rgba(255, 255, 255, 0.03); }
.recent-meeting-info {
    min-width: 0;
    flex: 1;
}
.recent-meeting-title {
    font-size: 14px;
    color: #e0e0e5;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.recent-meeting-meta {
    margin-top: 3px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
}
.recent-meeting-role {
    color: #22C55E;
    font-weight: 600;
}
.recent-meeting-rejoin {
    flex-shrink: 0;
    font-size: 13px;
    padding: 6px 10px;
}

/* ── 28. Touch-action — kill iOS double-tap zoom on rapid taps ──────────── */

.reaction-picker .reaction-emoji,
.tile-pin-btn,
.kebab-menu button,
.host-controls-menu button,
.control-btn,
.btn-icon {
    touch-action: manipulation;
}

/* ── 29. RTL mirror — bidi-aware layout for ar/he/fa/ur/ps/ku locales ──── */
/* Strings stay in their original language; only chrome positions flip. */

[dir="rtl"] .reaction-picker {
    /* JS sets `left` from getBoundingClientRect — translate so it anchors right */
    transform: translateX(50%);
}

[dir="rtl"] .tile-pin-btn {
    right: auto;
    left: 8px;
}

[dir="rtl"] .tile-label {
    left: auto;
    right: 12px;
}

[dir="rtl"] .chat-sidebar {
    border-left: none;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

[dir="rtl"] .force-mute-recording-overlay {
    left: 12px;
    right: 12px;
}

/* ── 30. Light-mode override — editorial healthcare palette ──────────────── */
/* Warm cream background, deep-forest ink, sage-green accents. The dark SVG
   call-preview is intentionally kept dark — it functions as a "device on
   marketing page" mockup (Apple/Linear convention) and provides a focal
   anchor against the light chrome. Video tiles inside actual calls also
   stay dark for face-tracking contrast. */

@media (prefers-color-scheme: light) {
    :root {
        /* Warm off-white — has personality without being beige. Reads as
           clinical-but-human; pairs with brand green better than cool grey. */
        --bg: #faf8f2;
        --bg-gradient:
            radial-gradient(ellipse 90% 60% at 15% 0%, rgba(34, 197, 94, 0.06) 0%, transparent 55%),
            radial-gradient(ellipse 80% 60% at 100% 100%, rgba(64, 124, 255, 0.05) 0%, transparent 55%),
            linear-gradient(180deg, #faf8f2 0%, #f3efe4 100%);
        --surface: rgba(255, 254, 250, 0.88);
        --surface-solid: #ffffff;
        --surface-2: rgba(247, 243, 233, 0.9);
        --surface-glass: rgba(255, 254, 250, 0.7);
        --border: rgba(20, 48, 32, 0.1);
        --border-glow: rgba(34, 197, 94, 0.2);
        --text: #142a1d;
        --text-muted: rgba(20, 42, 29, 0.58);
        --primary-glow: rgba(34, 197, 94, 0.18);
        --shadow-sm: 0 1px 2px rgba(20, 42, 29, 0.05), 0 2px 6px rgba(20, 42, 29, 0.04);
        --shadow-md: 0 4px 12px rgba(20, 42, 29, 0.05), 0 12px 28px rgba(20, 42, 29, 0.06);
        --shadow-lg: 0 12px 32px rgba(20, 42, 29, 0.08), 0 24px 56px -12px rgba(20, 42, 29, 0.1);
    }

    body.landing-body,
    body:not(:has(.video-grid)) {
        color: var(--text);
    }

    /* Call UI is anchored dark — video tiles must stay dark for face
       tracking, the control bar reads as a "movie theater" surface, and
       the chat/caption chrome is built on dark glass. Restore the
       dark-mode CSS variables for any non-landing surface so all the
       text/border tokens inside the call read correctly on top of dark
       backgrounds. The landing/invite pages opt back into light by
       carrying .landing-body on <body>. */
    body:not(.landing-body) {
        --bg: #0c0e14;
        --bg-gradient: linear-gradient(145deg, #0c0e14 0%, #111520 40%, #0d1218 100%);
        --surface: rgba(22, 25, 35, 0.85);
        --surface-solid: #161923;
        --surface-2: rgba(32, 36, 50, 0.8);
        --surface-glass: rgba(22, 25, 35, 0.65);
        --border: rgba(55, 60, 80, 0.5);
        --text: #f0f0f5;
        --text-muted: #8b8fa3;
        --primary-glow: rgba(34, 197, 94, 0.25);
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
        --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45);
        background: var(--bg);
        background-image: var(--bg-gradient);
        color: var(--text);
        color-scheme: dark;
    }
    /* Native pickers inside the call: keep dark like the surrounding chrome. */
    body:not(.landing-body) input[type="date"],
    body:not(.landing-body) input[type="time"],
    body:not(.landing-body) input[type="datetime-local"],
    body:not(.landing-body) select,
    body:not(.landing-body) textarea {
        color-scheme: dark;
    }

    /* Subtle paper-grain overlay — adds editorial texture without weight.
       Inline SVG noise filter, baked into a data URL so it ships zero-net. */
    body.landing-body::after {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        opacity: 0.35;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.16  0 0 0 0 0.11  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
        mix-blend-mode: multiply;
    }

    /* Native pickers honor light scheme. */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    select,
    textarea {
        color-scheme: light;
    }

    /* ── Landing — atmospheric layers ─────────────────────────────────── */
    .landing-bg-grid {
        background-image:
            linear-gradient(rgba(20, 42, 29, 0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(20, 42, 29, 0.05) 1px, transparent 1px);
        mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, #000 0%, transparent 75%);
        -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, #000 0%, transparent 75%);
    }
    .landing-bg-glow-a {
        background: radial-gradient(circle, rgba(34, 197, 94, 0.28) 0%, transparent 65%);
        opacity: 0.5;
    }
    .landing-bg-glow-b {
        background: radial-gradient(circle, rgba(64, 124, 255, 0.18) 0%, transparent 70%);
        opacity: 0.42;
    }

    /* ── Landing — typography ─────────────────────────────────────────── */
    .landing-eyebrow {
        background: rgba(34, 197, 94, 0.1);
        border-color: rgba(34, 197, 94, 0.28);
        color: #0d3a22;
    }
    .landing-title {
        /* Deep forest ink — harmonizes with brand green, warmer than pure
           black against the cream bg. */
        color: #0f2e1c;
    }
    .landing-title-word-accent {
        background: linear-gradient(135deg, #16a34a 0%, #22C55E 45%, #15803d 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .landing-subtitle {
        color: rgba(15, 46, 28, 0.62);
    }
    .landing-signed-out-hint {
        color: rgba(15, 46, 28, 0.55);
    }

    /* ── Landing — glass card (light variant) ────────────────────────── */
    .landing-card {
        background: linear-gradient(180deg, rgba(255, 255, 254, 0.85) 0%, rgba(252, 250, 244, 0.92) 100%);
        border: 1px solid rgba(20, 42, 29, 0.08);
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.9) inset,
            0 1px 3px rgba(20, 42, 29, 0.04),
            0 24px 48px -20px rgba(20, 42, 29, 0.18),
            0 0 0 1px rgba(20, 42, 29, 0.025);
    }
    .landing-card::before {
        background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(34, 197, 94, 0.1) 0%, transparent 60%);
    }
    .landing-divider {
        color: rgba(15, 46, 28, 0.42);
    }
    .landing-divider::before,
    .landing-divider::after {
        background: linear-gradient(90deg, transparent 0%, rgba(20, 42, 29, 0.14) 50%, transparent 100%);
    }

    /* ── Landing — illustration ──────────────────────────────────────── */
    /* Soften the dark-on-light shadow so the device mockup floats
       gracefully instead of stamping. */
    .landing-illustration-svg {
        filter: drop-shadow(0 24px 48px rgba(20, 42, 29, 0.18)) drop-shadow(0 4px 12px rgba(20, 42, 29, 0.08));
    }
    .landing-illustration-halo {
        background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(34, 197, 94, 0.18) 0%, transparent 70%);
    }

    /* ── Landing — footer ────────────────────────────────────────────── */
    .landing-foot {
        color: rgba(15, 46, 28, 0.45);
    }
    .landing-foot-sep {
        color: rgba(15, 46, 28, 0.2);
    }

    /* ── Buttons ─────────────────────────────────────────────────────── */
    /* Scoped to .landing-body so the dark call surface (where these same
       selectors appear inside chat/lobby) keeps its dark chrome. Primary
       stays as the brand-green gradient — strong CTA in both modes. */
    body.landing-body .btn-secondary {
        background: rgba(255, 255, 254, 0.7);
        color: #142a1d;
        border: 1px solid rgba(20, 42, 29, 0.12);
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.8) inset,
            0 1px 2px rgba(20, 42, 29, 0.04);
    }
    body.landing-body .btn-secondary:hover:not(:disabled) {
        background: rgba(255, 255, 254, 0.95);
        border-color: rgba(20, 42, 29, 0.2);
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.9) inset,
            0 4px 12px -4px rgba(20, 42, 29, 0.12);
    }
    body.landing-body .btn-secondary:active:not(:disabled) {
        background: rgba(247, 243, 233, 0.9);
    }
    body.landing-body .btn-text:hover:not(:disabled) {
        background: rgba(34, 197, 94, 0.08);
    }
    body.landing-body .btn-text:disabled {
        color: rgba(20, 42, 29, 0.3);
    }
    body.landing-body .btn-icon {
        color: rgba(20, 42, 29, 0.55);
    }
    body.landing-body .btn-icon:hover {
        color: var(--text);
        background: rgba(20, 42, 29, 0.05);
    }

    /* ── Inputs ──────────────────────────────────────────────────────── */
    body.landing-body .input-field {
        background: rgba(255, 255, 254, 0.85);
        border: 1px solid rgba(20, 42, 29, 0.12);
        color: #142a1d;
        box-shadow: 0 1px 2px rgba(20, 42, 29, 0.03) inset;
    }
    body.landing-body .input-field:hover:not(:focus) {
        border-color: rgba(20, 42, 29, 0.2);
    }
    body.landing-body .input-field:focus {
        background: #ffffff;
        border-color: var(--primary);
        box-shadow:
            0 0 0 4px rgba(34, 197, 94, 0.14),
            0 0 24px -8px rgba(34, 197, 94, 0.32);
    }
    body.landing-body .input-field::placeholder {
        color: rgba(20, 42, 29, 0.32);
    }
    body.landing-body .input-field[type="date"],
    body.landing-body .input-field[type="time"],
    body.landing-body .input-field[type="datetime-local"] {
        color-scheme: light;
    }
    body.landing-body .input-field[type="date"]::-webkit-calendar-picker-indicator,
    body.landing-body .input-field[type="time"]::-webkit-calendar-picker-indicator,
    body.landing-body .input-field[type="datetime-local"]::-webkit-calendar-picker-indicator {
        filter: none;
        opacity: 0.55;
    }

    /* ── Auth chip + sign-in ─────────────────────────────────────────── */
    /* Auth chip lives in landing top-right and in the call top bar (as
       .auth-chip-incall). Only retone the landing variant — in-call chip
       must stay dark to match the call chrome. */
    body.landing-body .auth-chip:hover,
    body.landing-body .auth-chip:focus-visible {
        background: rgba(20, 42, 29, 0.06);
    }
    body.landing-body .auth-chip-menu {
        background: #ffffff;
        border: 1px solid rgba(20, 42, 29, 0.1);
        box-shadow: 0 12px 32px -8px rgba(20, 42, 29, 0.18), 0 4px 8px rgba(20, 42, 29, 0.06);
    }
    body.landing-body .auth-chip-email {
        color: rgba(20, 42, 29, 0.7);
    }
    body.landing-body .auth-chip-signout {
        border: 1px solid rgba(20, 42, 29, 0.12);
        color: #142a1d;
    }
    body.landing-body .auth-chip-signout:hover {
        background: rgba(20, 42, 29, 0.04);
    }

    /* ── Recent meetings panel ───────────────────────────────────────── */
    .recent-meetings {
        background: rgba(255, 255, 254, 0.6);
        border: 1px solid rgba(20, 42, 29, 0.08);
        box-shadow: 0 1px 2px rgba(20, 42, 29, 0.03);
    }
    .recent-meetings-title {
        color: rgba(15, 46, 28, 0.55);
    }
    .recent-meetings-empty {
        color: rgba(20, 42, 29, 0.5);
    }
    .recent-meeting-row:hover {
        background: rgba(20, 42, 29, 0.04);
    }
    .recent-meeting-title {
        color: #142a1d;
    }
    .recent-meeting-meta {
        color: rgba(20, 42, 29, 0.55);
    }
    .recent-tab {
        color: rgba(20, 42, 29, 0.55);
    }
    .recent-tab:hover {
        color: #142a1d;
    }
    .recent-tab.active {
        color: #0d3a22;
    }

    /* ── Card micro-interaction ──────────────────────────────────────── */
    /* Subtle lift on hover — earns its keep on a static landing where
       the card is the only interactive surface. Cubic ease keeps it
       calm; nothing punchy. */
    .landing-card {
        transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                    box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    @media (hover: hover) {
        .landing-card:hover {
            transform: translateY(-2px);
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.9) inset,
                0 1px 3px rgba(20, 42, 29, 0.05),
                0 32px 64px -22px rgba(20, 42, 29, 0.22),
                0 0 0 1px rgba(20, 42, 29, 0.03);
        }
    }

    /* ── Schedule modal — light variant ──────────────────────────────── */
    /* Without this, clicking "Schedule" surfaces a dark drawer over the
       cream landing — jarring tonal shift. Mirrors the landing-card
       glass treatment so the modal feels like a continuation of the
       page, not a portal to a different app. */
    .schedule-modal-backdrop {
        background: rgba(20, 42, 29, 0.28);
    }
    .schedule-modal-content {
        background: linear-gradient(180deg, #ffffff 0%, #fbfaf4 100%);
        border: 1px solid rgba(20, 42, 29, 0.08);
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.9) inset,
            0 32px 64px -16px rgba(20, 42, 29, 0.2),
            0 0 0 1px rgba(20, 42, 29, 0.03);
        color: var(--text);
    }
    .schedule-modal-header {
        border-bottom: 1px solid rgba(20, 42, 29, 0.08);
    }
    .schedule-modal-header h2 {
        color: #0f2e1c;
    }
    .schedule-modal-footer {
        border-top: 1px solid rgba(20, 42, 29, 0.08);
    }
    .form-label {
        color: rgba(15, 46, 28, 0.55);
    }
    body.landing-body .chip-hint {
        color: rgba(20, 42, 29, 0.5);
    }
    .invite-subtitle {
        color: rgba(20, 42, 29, 0.6);
    }
    .invite-icon-wrapper {
        color: var(--primary);
        background: rgba(34, 197, 94, 0.1);
    }
    .schedule-success h3 {
        color: #0f2e1c;
    }
    .toggle-label span {
        color: var(--text);
    }
    .meeting-link {
        color: #0d3a22;
    }
    .new-room-info p {
        color: rgba(20, 42, 29, 0.65);
    }

    /* ── Mobile-only perf + simplification in light mode ────────────── */
    /* Multiply blend + SVG noise are GPU-cheap on desktop but cumulative
       on phones, especially compounding with the bg-glow blurs. Drop
       the grain layer below 600px — the cream bg alone reads cleanly. */
    @media (max-width: 600px) {
        body.landing-body::after { display: none; }
        .landing-bg-glow {
            filter: blur(60px);
            opacity: 0.35;
        }
        .landing-card {
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.9) inset,
                0 8px 24px -8px rgba(20, 42, 29, 0.14);
        }
    }
}

/* ── 30b. Landscape phone — short + wide viewport ────────────────────────── */
/* Phones in landscape are 600-900px wide but only ~375-430px tall. The
   regular 900px ladder (which assumed portrait tablet) overpads the
   vertical rhythm, pushing the title and CTA below the fold. This rule
   collapses gaps + drops the device mockup so the join form is visible
   without scroll. */
@media (max-height: 500px) and (orientation: landscape) {
    .landing-container {
        flex-direction: row;
        gap: 32px;
        padding: 16px 24px;
        align-items: center;
    }
    .landing-eyebrow {
        margin-bottom: 12px;
        padding: 4px 10px 4px 8px;
        font-size: 10px;
    }
    .landing-title {
        font-size: clamp(32px, 5vw, 44px);
        margin-bottom: 12px;
    }
    .landing-subtitle {
        font-size: 13px;
        margin-bottom: 16px;
    }
    .landing-card {
        padding: 14px 16px;
        border-radius: 14px;
    }
    .landing-actions { gap: 10px; }
    .landing-divider { font-size: 10px; }
    .landing-right { display: none; }
    .landing-left { max-width: 100%; }
    .landing-foot { display: none; }
    .recent-meetings { display: none; }
}

/* ── 30c. prefers-contrast: more — AAA contrast for users who request it ── */
/* Healthcare audiences skew toward needing this. Bumps muted text to
   full opacity, strengthens hairlines and focus rings, removes the
   atmospheric paper-grain (which sands edges in a way HC users dislike),
   and intensifies the brand green so it carries semantic weight even
   for users with reduced color sensitivity. Cascades over both modes. */
@media (prefers-contrast: more) {
    :root {
        --text-muted: var(--text);
        --border: rgba(255, 255, 255, 0.4);
        --primary: #16a34a;
        --primary-glow: rgba(22, 163, 74, 0.4);
    }
    .landing-eyebrow {
        background: rgba(22, 163, 74, 0.15);
        border-color: rgba(22, 163, 74, 0.55);
        color: #ffffff;
    }
    .landing-subtitle,
    .landing-divider,
    .form-label,
    .chip-hint,
    .recent-meetings-title,
    .recent-meeting-meta {
        color: rgba(255, 255, 255, 0.95);
    }
    .landing-foot { color: rgba(255, 255, 255, 0.85); }
    .input-field {
        border-width: 2px;
        border-color: rgba(255, 255, 255, 0.55);
    }
    .input-field:focus {
        box-shadow: 0 0 0 3px var(--primary-glow);
    }
    .landing-card { border-width: 2px; }
    body.landing-body::after { display: none; }

    @media (prefers-color-scheme: light) {
        :root {
            --text: #06170d;
            --text-muted: #06170d;
            --border: rgba(6, 23, 13, 0.45);
            --primary: #15803d;
        }
        .landing-eyebrow {
            background: rgba(21, 128, 61, 0.18);
            border-color: rgba(21, 128, 61, 0.6);
            color: #06170d;
        }
        .landing-subtitle,
        .landing-divider,
        .form-label,
        .chip-hint,
        .recent-meetings-title,
        .recent-meeting-meta,
        .landing-foot {
            color: #06170d;
        }
        .input-field {
            border-color: rgba(6, 23, 13, 0.5);
        }
        .landing-title-word-accent {
            background: linear-gradient(135deg, #15803d 0%, #166534 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }
}

/* ── 31. Samsung Internet auto-translate guard ──────────────────────────── */
/* Samsung's translator can rewrite caption + chat strings, breaking the
   data-channel JSON shape it never sees but the DOM nodes it does see.
   The .notranslate class is honored by Google Translate, Samsung's
   translator, and Apple Live Text. */

.caption-overlay,
.caption-line,
.chat-message,
.chat-msg-text {
    -webkit-translate: no;
    translate: no;
}