/* =========================================================================
   Phase 8 — production-grade video call surface
   ========================================================================= */

/* The whole video tab gets a dark canvas so the controls + tiles read like
   a real meeting room. .vc replaces the previous off-white card. */
.vc {
    --vc-bg: #0E1A2E;
    --vc-panel: #1B2840;
    --vc-panel-2: #243352;
    --vc-fg: #E8EDF7;
    --vc-fg-2: #98A3BA;
    --vc-accent: #FFC627;
    --vc-danger: #EF4444;
    background: var(--vc-bg);
    color: var(--vc-fg);
    min-height: 70vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* ----- IDLE ----- */
.vc-idle { display: flex; align-items: center; justify-content: center; padding: 64px 24px; min-height: 60vh; }
.vc-idle__card { background: var(--vc-panel); border-radius: 12px; padding: 40px; max-width: 480px; text-align: center; }
.vc-idle__icon { font-size: 48px; margin-bottom: 12px; }
.vc-idle__card h2 { color: var(--vc-fg); margin: 8px 0; }
.vc-idle__card p { color: var(--vc-fg-2); margin: 12px 0 24px; }
.vc-idle__note { color: var(--vc-danger); font-size: 14px; min-height: 1.2em; }
.btn-lg { padding: 12px 32px; font-size: 16px; }

/* ----- PRE-JOIN ----- */
.vc-prejoin { display: flex; align-items: center; justify-content: center; padding: 32px 16px; min-height: 60vh; }
.vc-prejoin__card { background: var(--vc-panel); border-radius: 12px; padding: 32px; max-width: 640px; width: 100%; }
.vc-prejoin__card h2 { color: var(--vc-fg); margin: 0 0 4px; }
.vc-prejoin__hint { color: var(--vc-fg-2); margin: 0 0 16px; }
.vc-prejoin__preview {
    position: relative;
    background: #000;
    border-radius: 8px;
    aspect-ratio: 16/9;
    overflow: hidden;
    margin-bottom: 16px;
}
.vc-prejoin__preview video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.vc-prejoin__overlay {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.6); color: var(--vc-fg-2); font-size: 14px;
}
.vc-prejoin__controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.vc-prejoin__controls label { display: flex; flex-direction: column; gap: 4px; color: var(--vc-fg-2); font-size: 13px; }
.vc-prejoin__controls select {
    background: var(--vc-panel-2); color: var(--vc-fg); border: 1px solid var(--vc-panel-2);
    border-radius: 6px; padding: 8px; font-size: 14px;
}
.vc-prejoin__toggles { display: flex; gap: 8px; margin-bottom: 20px; }
.vc-tog {
    flex: 1; background: var(--vc-panel-2); color: var(--vc-fg); border: none;
    padding: 10px; border-radius: 8px; cursor: pointer; font-size: 14px;
}
.vc-tog--off { background: var(--vc-danger); color: #fff; }
.vc-prejoin__actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ----- IN-CALL ----- */
.vc-call { display: flex; flex-direction: column; min-height: 70vh; }

.vc-banner {
    display: flex; gap: 16px; align-items: center; justify-content: center;
    background: rgba(239, 68, 68, 0.15);
    color: var(--vc-fg);
    padding: 8px 16px;
    font-size: 13px;
    border-bottom: 1px solid rgba(239, 68, 68, 0.4);
}
.vc-rec-dot { display: inline-flex; align-items: center; gap: 6px; }
.vc-rec-dot::before { content: ""; width: 8px; height: 8px; background: var(--vc-danger); border-radius: 50%; animation: vc-pulse 1.5s ease-in-out infinite; }
@keyframes vc-pulse { 50% { opacity: 0.3; } }

.vc-stage { flex: 1; display: flex; gap: 0; min-height: 0; }
.vc-grid {
    flex: 1; padding: 16px; display: grid; gap: 12px; min-height: 320px;
    grid-template-columns: 1fr;
    align-content: center;
}
.vc-grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.vc-grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; }
.vc-grid[data-count="4"] { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; }

.vc-tile {
    position: relative;
    background: #000;
    border-radius: 10px;
    aspect-ratio: 16/9;
    overflow: hidden;
    transition: box-shadow 0.15s;
}
.vc-tile--speaking { box-shadow: 0 0 0 3px var(--vc-accent); }
.vc-tile__media { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.vc-tile__media video { width: 100%; height: 100%; object-fit: cover; }
.vc-tile--local .vc-tile__media video { transform: scaleX(-1); }
.vc-tile__hand {
    position: absolute; top: 8px; left: 8px;
    background: rgba(255, 198, 39, 0.95); color: #1B2840;
    padding: 4px 8px; border-radius: 6px; font-size: 16px;
}
.vc-tile__bottom {
    position: absolute; bottom: 8px; left: 8px; right: 8px;
    display: flex; align-items: center; gap: 6px;
    color: #fff; font-size: 13px;
    background: rgba(0,0,0,0.55);
    padding: 4px 10px;
    border-radius: 6px;
    backdrop-filter: blur(4px);
}
.vc-tile__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Side panel (participants / host / breakouts) */
.vc-side {
    width: 320px;
    background: var(--vc-panel);
    border-left: 1px solid var(--vc-panel-2);
    display: flex; flex-direction: column;
}
.vc-side__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px; border-bottom: 1px solid var(--vc-panel-2);
    color: var(--vc-fg);
}
.vc-side__body { flex: 1; padding: 12px; overflow-y: auto; }
.vc-side-row {
    display: flex; align-items: center; gap: 8px; padding: 8px 4px;
    border-bottom: 1px solid var(--vc-panel-2); color: var(--vc-fg);
    font-size: 14px;
}
.vc-side-row > span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-iconbtn { background: transparent; color: var(--vc-fg-2); border: none; cursor: pointer; font-size: 18px; }
.vc-iconbtn:hover { color: var(--vc-fg); }

.vc-host-panel { display: flex; flex-direction: column; gap: 8px; }
.vc-breakout-panel { display: flex; flex-direction: column; gap: 12px; color: var(--vc-fg); }
.vc-breakout-panel label { display: flex; align-items: center; gap: 8px; color: var(--vc-fg-2); font-size: 13px; }
.vc-breakout-panel select { background: var(--vc-panel-2); color: var(--vc-fg); border: 1px solid var(--vc-panel-2); border-radius: 6px; padding: 6px; }
.vc-bo-card {
    background: var(--vc-panel-2); padding: 10px; border-radius: 8px;
    display: flex; flex-direction: column; gap: 4px; color: var(--vc-fg);
}
.vc-bo-card small { color: var(--vc-fg-2); font-size: 12px; }
.vc-bo-empty { color: var(--vc-fg-2); font-size: 13px; margin: 4px 0; }

/* Toolbar */
.vc-toolbar {
    display: flex; gap: 6px; justify-content: center; align-items: center;
    padding: 12px;
    background: var(--vc-panel);
    border-top: 1px solid var(--vc-panel-2);
    flex-wrap: wrap;
}
.vc-toolbar__sep { width: 1px; height: 32px; background: var(--vc-panel-2); margin: 0 4px; }
.vc-btn {
    position: relative;
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--vc-panel-2); color: var(--vc-fg); border: none;
    padding: 10px 14px; border-radius: 24px; cursor: pointer;
    font-size: 13px;
    transition: background 0.1s;
}
.vc-btn:hover { background: #2F4170; }
.vc-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.vc-btn[data-on="false"] { background: var(--vc-danger); color: #fff; }
.vc-btn--host { background: #1F3458; color: #FFC627; }
.vc-btn--danger { background: var(--vc-danger); color: #fff; }
.vc-btn--danger:hover { background: #DC2626; }
.vc-btn__lbl { display: inline; }
.vc-btn__badge {
    background: var(--vc-accent); color: #1B2840;
    border-radius: 10px; padding: 1px 6px;
    font-size: 11px; font-weight: 600; margin-left: 4px;
}

/* Reactions menu */
.vc-react-wrap { position: relative; display: inline-block; }
.vc-react-menu {
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: var(--vc-panel); padding: 8px; border-radius: 10px;
    display: flex; gap: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 10;
}
.vc-react-menu button {
    background: transparent; border: none; cursor: pointer; font-size: 22px;
    padding: 6px; border-radius: 6px;
}
.vc-react-menu button:hover { background: var(--vc-panel-2); }

/* Floating reactions layer */
.vc-reactions {
    position: absolute; pointer-events: none; left: 0; right: 0;
    bottom: 80px; height: 50vh;
}
.vc-reaction-fly {
    position: absolute; bottom: 0; font-size: 32px;
    animation: vc-fly 3s ease-out forwards;
}
@keyframes vc-fly {
    0%   { transform: translateY(0) scale(0.5); opacity: 0; }
    20%  { opacity: 1; transform: translateY(-40px) scale(1.1); }
    100% { transform: translateY(-50vh) scale(1); opacity: 0; }
}

/* Breakout prompt */
.vc-bo-prompt {
    position: absolute; top: 24px; right: 24px;
    background: var(--vc-accent); color: #1B2840;
    padding: 14px 18px; border-radius: 12px;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    z-index: 20;
}
.vc-bo-prompt strong { margin-right: 6px; }

/* Past recordings extras card */
.vc-extras { padding: 16px; background: var(--vc-bg); }
.vc-recordings-card { background: var(--vc-panel); color: var(--vc-fg); border-radius: 10px; padding: 16px; }
.vc-recordings-card summary { cursor: pointer; font-weight: 600; }
.vc-recordings__empty { color: var(--vc-fg-2); font-size: 13px; margin: 8px 0 0; }
.vc-recordings__list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.vc-recordings__list li {
    display: grid; grid-template-columns: 1fr auto auto; gap: 12px;
    padding: 10px; background: var(--vc-panel-2); border-radius: 8px;
    font-size: 13px; color: var(--vc-fg);
}
.vc-recordings__list a { color: var(--vc-accent); }

/* Phone breakpoint — toolbar collapses to icons + side panel becomes overlay */
@media (max-width: 720px) {
    .vc-btn__lbl { display: none; }
    .vc-side { position: absolute; right: 0; top: 0; bottom: 0; width: min(85vw, 360px); z-index: 30; }
    .vc-prejoin__controls { grid-template-columns: 1fr; }
    .vc-grid { padding: 8px; gap: 8px; }
}