:root {
    color-scheme: dark;
    --cyan: #00deff;
    --cyan-soft: rgba(0, 222, 255, .12);
    --cyan-glow: rgba(0, 222, 255, .35);
    --accent-green: #30e78b;
    --panel: rgba(6, 32, 61, .72);
    --panel-hover: rgba(10, 42, 78, .82);
    --border: rgba(61, 210, 255, .18);
    --border-hover: rgba(61, 210, 255, .38);
    --muted: #91a9bf;
    --text: #eefaff;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --shadow-card: 0 8px 32px rgba(0, 0, 0, .25), 0 0 0 1px var(--border);
    --shadow-card-hover: 0 16px 48px rgba(0, 0, 0, .35), 0 0 0 1px var(--border-hover);
    --transition-base: .28s cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

body {
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    font-family: "Microsoft YaHei", system-ui, -apple-system, sans-serif;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 160, 220, .15), transparent),
        radial-gradient(ellipse 60% 40% at 85% 90%, rgba(0, 100, 200, .08), transparent),
        linear-gradient(160deg, #021020, #062b50 40%, #041a32 70%, #020c18);
    background-attachment: fixed;
}

/* ─── Subtle animated background shimmer ─── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle 320px at 20% 30%, rgba(0, 222, 255, .04), transparent),
        radial-gradient(circle 280px at 80% 70%, rgba(48, 231, 139, .03), transparent);
    animation: bgShimmer 12s ease-in-out infinite alternate;
}
@keyframes bgShimmer {
    0%   { opacity: .6; }
    100% { opacity: 1; }
}

/* ─── Header ─── */
.meeting-header {
    position: relative;
    z-index: 2;
    min-height: 80px;
    padding: 14px 40px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    border-bottom: 1px solid var(--border);
    background: rgba(2, 18, 35, .65);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
}
.meeting-header h1 {
    margin: 0;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 6px;
    background: linear-gradient(135deg, #eefaff 30%, var(--cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.meeting-header p {
    margin: 4px 0 0;
    color: var(--muted);
    text-align: center;
    font-size: 12px;
    letter-spacing: 2px;
}
.back-link {
    color: #9beeff;
    text-decoration: none;
    font-size: 14px;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    transition: background var(--transition-base), color var(--transition-base);
}
.back-link:hover {
    background: rgba(0, 222, 255, .08);
    color: var(--cyan);
}
.system-badge {
    justify-self: end;
    padding: 5px 14px;
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--cyan);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: rgba(0, 222, 255, .05);
}

/* ─── Shell ─── */
.meeting-shell {
    position: relative;
    z-index: 1;
    width: min(1200px, calc(100% - 48px));
    margin: 32px auto 48px;
}

/* ─── Hero panel ─── */
.hero-panel {
    min-height: 180px;
    padding: 36px 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background:
        linear-gradient(135deg, rgba(6, 32, 61, .8), rgba(4, 24, 48, .72)),
        radial-gradient(ellipse 70% 100% at 10% 50%, rgba(0, 222, 255, .06), transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-card);
    animation: fadeSlideUp .5s ease both;
}
.eyebrow {
    display: inline-block;
    color: var(--cyan);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 5px;
    padding: 4px 10px;
    border-radius: 4px;
    background: rgba(0, 222, 255, .08);
}
.hero-copy h2 {
    margin: 14px 0 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 2px;
}
.hero-copy p {
    max-width: 670px;
    margin: 0;
    color: var(--muted);
    line-height: 1.9;
}
.service-state {
    min-width: 230px;
    margin-left: 36px;
    padding: 18px 22px;
    display: flex;
    gap: 14px;
    align-items: center;
    border-radius: var(--radius-md);
    background: rgba(0, 222, 255, .06);
    border: 1px solid rgba(0, 222, 255, .12);
    transition: border-color var(--transition-base), background var(--transition-base);
}
.service-state:hover {
    border-color: rgba(0, 222, 255, .25);
    background: rgba(0, 222, 255, .09);
}
.service-state strong, .service-state small { display: block; }
.service-state strong { font-size: 14px; }
.service-state small { margin-top: 4px; color: var(--muted); font-size: 12px; }
.state-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent-green);
    box-shadow: 0 0 10px var(--accent-green), 0 0 24px rgba(48, 231, 139, .3);
    animation: dotPulse 2.4s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes dotPulse {
    0%, 100% { box-shadow: 0 0 10px var(--accent-green), 0 0 24px rgba(48, 231, 139, .3); }
    50%      { box-shadow: 0 0 6px var(--accent-green), 0 0 14px rgba(48, 231, 139, .15); }
}

/* ─── Action grid ─── */
.action-grid {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.card-heading { display: flex; gap: 16px; align-items: flex-start; }
.card-heading h3 { margin-top: 2px; }
.card-heading p { min-height: 0; }

/* ─── Action cards ─── */
.action-card {
    position: relative;
    min-height: 240px;
    padding: 28px 30px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background:
        linear-gradient(145deg, rgba(6, 32, 61, .68), rgba(4, 20, 42, .64));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
    animation: fadeSlideUp .5s ease both;
    overflow: hidden;
}
/* Staggered entrance */
.action-card:nth-child(1) { animation-delay: .08s; }
.action-card:nth-child(2) { animation-delay: .15s; }
.action-card:nth-child(3) { animation-delay: .22s; }
.action-card:nth-child(4) { animation-delay: .29s; }

.action-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(0, 222, 255, .05), transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-base);
    pointer-events: none;
}
.action-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-hover);
    box-shadow: var(--shadow-card-hover);
}
.action-card:hover::before { opacity: 1; }

.primary-card {
    border-color: var(--cyan-glow);
    background:
        linear-gradient(145deg, rgba(6, 32, 61, .72), rgba(4, 24, 50, .68)),
        radial-gradient(ellipse 80% 60% at 80% 100%, rgba(0, 222, 255, .06), transparent);
}
.primary-card:hover {
    border-color: rgba(0, 222, 255, .55);
}

.card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    color: var(--cyan);
    font-size: 24px;
    background: rgba(0, 222, 255, .08);
    border: 1px solid rgba(0, 222, 255, .15);
    transition: background var(--transition-base), border-color var(--transition-base);
}
.action-card:hover .card-icon {
    background: rgba(0, 222, 255, .13);
    border-color: rgba(0, 222, 255, .3);
}

.action-card h3 {
    margin: 16px 0 8px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
}
.action-card p {
    min-height: 44px;
    color: var(--muted);
    line-height: 1.75;
    font-size: 13px;
    margin: 0;
}

/* ─── Card buttons ─── */
.action-card button, .empty-state {
    width: 100%;
    margin-top: 18px;
    padding: 11px 16px;
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: 14px;
}
.action-card button {
    position: relative;
    border: 1px solid rgba(0, 222, 255, .3);
    color: #bff7ff;
    background: rgba(0, 222, 255, .08);
    cursor: pointer;
    font-weight: 500;
    letter-spacing: .5px;
    transition: background var(--transition-base), border-color var(--transition-base), transform .15s ease, box-shadow var(--transition-base);
    overflow: hidden;
}
.action-card button::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 222, 255, .06), transparent 60%);
    opacity: 0;
    transition: opacity var(--transition-base);
}
.action-card button:hover {
    background: rgba(0, 222, 255, .15);
    border-color: rgba(0, 222, 255, .45);
    box-shadow: 0 4px 16px rgba(0, 222, 255, .12);
}
.action-card button:hover::after { opacity: 1; }
.action-card button:active { transform: scale(.98); }
.action-card button:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.empty-state {
    color: #6f8ca3;
    background: rgba(0, 0, 0, .16);
    border: 1px dashed rgba(61, 210, 255, .12);
    font-size: 13px;
    border-radius: var(--radius-sm);
}

/* ─── Mine directory ─── */
.directory-section { margin-top: 24px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 16px; }
.section-heading h2 { margin: 8px 0 0; font-size: 22px; letter-spacing: 2px; }
.wechat-state { padding: 7px 12px; border: 1px solid rgba(255, 190, 80, .24); border-radius: 999px; color: #ffd277; background: rgba(255, 190, 80, .06); font-size: 12px; }
.wechat-state.is-ready { color: var(--accent-green); border-color: rgba(48, 231, 139, .28); background: rgba(48, 231, 139, .07); }
.mine-directory { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.directory-loading { grid-column: 1 / -1; padding: 48px; border: 1px dashed var(--border); border-radius: var(--radius-md); text-align: center; color: var(--muted); }
.mine-card { padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-md); background: linear-gradient(145deg, rgba(6, 32, 61, .72), rgba(4, 20, 42, .68)); box-shadow: var(--shadow-card); transition: transform var(--transition-base), border-color var(--transition-base); }
.mine-card:hover { transform: translateY(-2px); border-color: var(--border-hover); }
.mine-card header { display: flex; justify-content: space-between; align-items: flex-start; }
.mine-card header strong, .mine-card header small { display: block; }
.mine-card header strong { font-size: 17px; }
.mine-card header small { margin-top: 5px; color: #5f7e95; font-size: 10px; }
.presence { padding: 4px 8px; border-radius: 999px; color: #8aa0b3; background: rgba(130, 150, 170, .09); font-size: 11px; }
.presence.is-online { color: var(--accent-green); background: rgba(48, 231, 139, .09); }
.presence.is-busy { color: #ffd277; background: rgba(255, 210, 119, .09); }
.terminal-call-button { width: 100%; margin-top: 18px; padding: 12px 13px; display: flex; justify-content: space-between; border: 1px solid rgba(0, 222, 255, .24); border-radius: var(--radius-sm); color: var(--text); background: rgba(0, 222, 255, .07); cursor: pointer; }
.terminal-call-button em { color: var(--cyan); font-style: normal; font-size: 12px; }
.terminal-call-button:disabled { opacity: .48; cursor: not-allowed; }
.mine-contacts { margin-top: 13px; display: grid; gap: 8px; }
.contact-summary { padding: 10px; display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; border-radius: 7px; background: rgba(0, 0, 0, .14); }
.contact-summary span { color: var(--muted); font-size: 11px; }
.contact-summary strong { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.contact-summary em { grid-row: 1; grid-column: 2; color: #6f8293; font-style: normal; font-size: 10px; }
.contact-summary em.is-bound { color: var(--accent-green); }

/* ─── Scheduled and mobile-only meetings ─── */
.schedule-section { margin-top: 32px; }
.schedule-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 20px; }
.schedule-form, .schedule-list-shell { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-md); background: linear-gradient(145deg, rgba(6,32,61,.72), rgba(4,20,42,.68)); box-shadow: var(--shadow-card); }
.schedule-form { display: grid; gap: 16px; }
.schedule-form label { display: grid; gap: 7px; color: #9fc5d9; font-size: 12px; }
.schedule-form input, .schedule-form select { width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); background: #082845; outline: none; }
.schedule-form input:focus, .schedule-form select:focus { border-color: var(--cyan-glow); box-shadow: 0 0 0 3px rgba(0,222,255,.08); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.schedule-form fieldset { margin: 0; padding: 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.schedule-form legend { padding: 0 6px; color: #9fc5d9; font-size: 12px; }
.participant-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 210px; overflow-y: auto; }
.participant-option { padding: 9px; display: flex !important; grid-template-columns: none !important; flex-direction: row; align-items: center; gap: 8px !important; border-radius: 6px; background: rgba(0,0,0,.12); }
.participant-option input { width: auto; }
.participant-option.is-unbound { opacity: .46; }
.notification-choice { display: flex !important; grid-template-columns: none !important; flex-direction: row; align-items: center; }
.notification-choice input { width: auto; }
.create-meeting-button { padding: 12px; border: 1px solid rgba(0,222,255,.35); border-radius: var(--radius-sm); color: #bff7ff; background: rgba(0,222,255,.11); cursor: pointer; font-weight: 600; }
.create-meeting-button:disabled { opacity: .5; cursor: wait; }
.form-status { min-height: 18px; margin: 0; color: var(--muted); font-size: 12px; }
.schedule-list-shell h3 { margin: 0 0 16px; font-size: 16px; }
.schedule-list { display: grid; gap: 10px; }
.schedule-item { padding: 14px; border: 1px solid rgba(61,210,255,.12); border-radius: 8px; background: rgba(0,0,0,.13); }
.schedule-item header { display: flex; justify-content: space-between; gap: 12px; }
.schedule-item header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-item header span { color: var(--cyan); font-size: 11px; white-space: nowrap; }
.schedule-item p { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.schedule-actions { display: flex; gap: 8px; margin-top: 10px; }
.schedule-item button { padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.schedule-item .join-session-button { border: 1px solid rgba(0,222,255,.4); color: #bff7ff; background: rgba(0,222,255,.1); }
.schedule-item .cancel-session-button { border: 1px solid rgba(199,72,82,.35); color: #ffadb3; background: rgba(199,72,82,.09); }
.generated-links { margin-top: 10px; display: grid; gap: 6px; }
.generated-links button { margin: 0; border-color: var(--border); color: #bff7ff; background: rgba(0,222,255,.06); }

/* ─── Boundary note (unused but kept for compat) ─── */
.boundary-note {
    margin-top: 24px;
    padding: 17px 22px;
    display: flex;
    gap: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--panel);
    color: var(--muted);
    font-size: 13px;
    box-shadow: var(--shadow-card);
}
.boundary-note strong { color: #ffd277; white-space: nowrap; }

/* ─── Call dialog backdrop ─── */
.call-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    background: rgba(0, 8, 18, .7);
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    animation: backdropIn .25s ease;
}
.call-dialog-backdrop[hidden] { display: none; }
@keyframes backdropIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.call-dialog {
    width: min(440px, calc(100% - 32px));
    padding: 40px 36px;
    border: 1px solid rgba(0, 222, 255, .35);
    border-radius: var(--radius-lg);
    text-align: center;
    background:
        linear-gradient(170deg, rgba(7, 36, 65, .95), rgba(4, 20, 40, .9));
    box-shadow:
        0 24px 80px rgba(0, 0, 0, .5),
        0 0 60px rgba(0, 222, 255, .06);
    animation: dialogSlideIn .3s cubic-bezier(.4, 0, .2, 1);
}
@keyframes dialogSlideIn {
    from { opacity: 0; transform: scale(.95) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.ring-pulse {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #061c2f;
    font-size: 28px;
    background: linear-gradient(135deg, var(--cyan), #00b8d4);
    box-shadow: 0 0 0 0 rgba(0, 222, 255, .5);
    animation: ringPulse 1.35s infinite;
}
.ring-pulse.is-static {
    animation: none;
    background: linear-gradient(135deg, var(--accent-green), #20c977);
    box-shadow: 0 0 20px rgba(48, 231, 139, .25);
}
.call-direction {
    color: var(--cyan);
    font-size: 12px;
    letter-spacing: 3px;
    font-weight: 500;
}
.call-dialog h2 { margin: 10px 0; font-size: 22px; letter-spacing: 1px; }
.call-dialog p { min-height: 24px; color: var(--muted); }
.call-actions { display: flex; gap: 14px; margin-top: 26px; }
.call-actions[hidden] { display: none; }
.call-actions button, .close-dialog-button {
    flex: 1;
    padding: 13px;
    border: 0;
    border-radius: var(--radius-sm);
    color: white;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .5px;
    transition: filter .2s ease, transform .15s ease;
}
.call-actions button:hover, .close-dialog-button:hover { filter: brightness(1.12); }
.call-actions button:active, .close-dialog-button:active { transform: scale(.97); }
.accept-button {
    background: linear-gradient(135deg, #14ad69, #10c972);
    box-shadow: 0 4px 16px rgba(20, 173, 105, .3);
}
.reject-button {
    background: linear-gradient(135deg, #c74852, #e0404d);
    box-shadow: 0 4px 16px rgba(199, 72, 82, .3);
}
.close-dialog-button {
    width: 100%;
    margin-top: 18px;
    background: rgba(49, 83, 111, .7);
    border: 1px solid rgba(100, 160, 200, .15);
}

/* ─── Meeting stage (full-screen overlay) ─── */
.meeting-stage {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: grid;
    grid-template-rows: 60px 1fr;
    background: #020b14;
}
.meeting-stage[hidden] { display: none; }
.meeting-stage-header {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    background: rgba(6, 27, 45, .9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.meeting-stage-header strong, .meeting-stage-header small { display: block; }
.meeting-stage-header strong { font-size: 15px; letter-spacing: .5px; }
.meeting-stage-header small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.meeting-stage-header button {
    min-width: 100px;
    padding: 9px 18px;
    border: 0;
    border-radius: var(--radius-sm);
    color: white;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: filter .2s ease, transform .15s ease;
}
.meeting-stage-header button:hover { filter: brightness(1.1); }
.meeting-stage-header button:active { transform: scale(.97); }
.meeting-stage-header button:last-child {
    background: linear-gradient(135deg, #c74852, #e0404d);
}
.meeting-stage-actions { display: flex; gap: 10px; }
.meeting-stage-header .invite-button {
    background: linear-gradient(135deg, #087fa1, #0a9bc4);
}
.meeting-video-shell {
    position: relative;
    min-height: 0;
    overflow: hidden;
    background: #020b14;
}
.meeting-invite-panel { position: absolute; top: 0; right: 0; z-index: 4; width: min(390px, 92vw); height: 100%; padding: 20px; overflow-y: auto; border-left: 1px solid var(--border); background: rgba(4, 22, 40, .96); box-shadow: -18px 0 50px rgba(0, 0, 0, .35); backdrop-filter: blur(14px); }
.meeting-invite-panel[hidden] { display: none; }
.invite-panel-heading { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.invite-panel-heading strong, .invite-panel-heading small { display: block; }
.invite-panel-heading small { margin-top: 6px; color: var(--muted); line-height: 1.5; }
.invite-panel-heading button { width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 50%; color: var(--text); background: rgba(255,255,255,.04); cursor: pointer; font-size: 20px; }
.invite-contact-list { margin-top: 16px; display: grid; gap: 8px; }
.invite-contact-row { padding: 11px 12px; display: flex; justify-content: space-between; align-items: center; border: 1px solid rgba(0, 222, 255, .16); border-radius: 8px; color: var(--text); text-align: left; background: rgba(0, 222, 255, .05); cursor: pointer; }
.invite-contact-row span strong, .invite-contact-row span small { display: block; }
.invite-contact-row span small { margin-top: 4px; color: var(--muted); }
.invite-contact-row em { color: var(--cyan); font-style: normal; font-size: 12px; }
.invite-contact-row:disabled { opacity: .45; cursor: not-allowed; }
.invite-delivery-list { margin-top: 22px; }
.invite-delivery-list h4 { margin: 0 0 9px; color: var(--muted); font-size: 12px; }
.delivery-row { padding: 9px 4px; display: flex; justify-content: space-between; border-bottom: 1px solid rgba(120, 200, 230, .08); font-size: 12px; }
.delivery-row em { color: var(--muted); font-style: normal; }
.delivery-row em.is-sent { color: var(--accent-green); }
.delivery-row em.is-failed { color: #ff7d86; }
.jitsi-container, .jitsi-container iframe { width: 100%; height: 100%; border: 0; }

.meeting-loading {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--text);
    background:
        radial-gradient(circle at center, rgba(10, 55, 83, .85), rgba(2, 11, 20, .95) 65%);
    opacity: 1;
    transition: opacity .4s ease;
}
.meeting-loading.is-ready { opacity: 0; pointer-events: none; }
.meeting-loading strong {
    margin-top: 10px;
    font-size: 18px;
    letter-spacing: 3px;
}
.meeting-loading span { color: var(--muted); font-size: 13px; }
.meeting-loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(0, 222, 255, .15);
    border-top-color: var(--cyan);
    border-radius: 50%;
    animation: meetingSpin .85s linear infinite;
}

/* ─── Animations ─── */
@keyframes meetingSpin { to { transform: rotate(360deg); } }
@keyframes ringPulse {
    70%  { box-shadow: 0 0 0 24px rgba(0, 222, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 222, 255, 0); }
}
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Responsive ─── */
@media (max-width: 820px) {
    .meeting-header {
        padding: 12px 18px;
        grid-template-columns: auto 1fr;
        min-height: auto;
    }
    .system-badge { display: none; }
    .meeting-header h1 { font-size: 19px; letter-spacing: 3px; }
    .hero-panel {
        padding: 26px 22px;
        display: block;
        min-height: auto;
    }
    .service-state { margin: 20px 0 0; }
    .action-grid { grid-template-columns: 1fr; }
    .mine-directory { grid-template-columns: 1fr; }
    .schedule-layout, .form-row { grid-template-columns: 1fr; }
    .participant-options { grid-template-columns: 1fr; }
    .section-heading { align-items: flex-start; gap: 14px; }
    .meeting-shell { width: calc(100% - 28px); margin: 20px auto 36px; }
    .boundary-note { display: block; }
    .boundary-note span { display: block; margin-top: 8px; line-height: 1.6; }
    .action-card { min-height: auto; padding: 22px; }
}