/*
 * ============================================================
 * style_participants.css — Participant Card & Notification Styles
 * ============================================================
 *
 * STATUS: ENTIRELY NEW FILE — did not exist before Phase 2.
 *
 * CONTENTS (four sections):
 *   1. .video-slot            — wrapper div replacing bare <video> elements
 *                               in the thumbnail strip
 *   2. .participant-card      — thumbnail card shown when camera is off
 *      .card-speaking-ring    — animated green border on speech detection
 *      .card-avatar           — gradient circle with initial letter
 *      .card-name             — nickname label
 *      .card-timer            — HH:MM:SS live counter (monospace)
 *      .peer-mute-btn         — local-mute icon button (remote peers only)
 *   3. .main-participant-card — full-size card in the main viewing area,
 *                               replaces #main-video when camera is off
 *      .main-card-ring        — larger speaking ring for the main card
 *      .main-card-avatar      — larger avatar (90 px vs 40 px)
 *      .main-card-name        — larger nickname label
 *      .main-card-timer       — larger timer
 *      .main-card-controls    — mute button row
 *   4. .notification-container — fixed top-right toast stack
 *      .notification-toast     — individual slide-in/out toast
 *
 * DESIGN LANGUAGE (matches existing app aesthetic):
 *   Background  : near-black with 85–92 % opacity
 *   Border      : 1 px solid rgba(0, 255, 255, 0.22) — subtle cyan
 *   Accent      : #00ffff / rgba(0,255,255) for timers and active states
 *   Speaking    : rgba(0, 255, 120, 0.78) green glow for audio ring
 *   Avatar      : linear-gradient(135deg, #00b4d8, #0077b6) — app blues
 *   Glass effect: backdrop-filter: blur(8–12px) — glassmorphism
 *
 * CSS VARIABLE DEPENDENCY:
 *   --layout-margin  : defined in style_common.css (loaded first)
 *   --corner-radius  : defined in style_common.css (loaded first)
 *   Fallbacks (8px, 5px) are provided for safety in case variables
 *   are not yet defined when this file is parsed.
 *
 * CRITICAL LAYOUT NOTE — .video-slot replaces .video-stream in the strip:
 *   BEFORE Phase 2: <video.video-stream> was sized by rules in
 *     style_desktop.css (width: 20%) and style_mobile.css (width: 50%).
 *   AFTER Phase 2:  <div.video-slot> carries those exact same percentage
 *     dimensions.  The nested <video.video-stream> is then overridden to
 *     width:100%; height:100% via the .video-slot .video-stream rule,
 *     so the visual result is identical for users who have their cameras on.
 *
 * HOW TO REVERT:
 *   1. Delete this file entirely.
 *   2. In index.hbs, remove:
 *        <link rel="stylesheet" href="css/style_participants.css">
 *   Removing the CSS file alone will not break layout for users with cameras
 *   ON (their <video> fills the slot naturally), but will leave unstyled
 *   card elements visible if participant_card.js is still loaded.
 *   For a full revert, remove all Phase 2 JS files and DOM elements too.
 *
 * NEW — added as part of participant awareness feature (Phase 2)
 * ============================================================
 */

/* ─────────────────────────────────────────────────────────────
 * 1. VIDEO SLOT
 * The .video-slot div replaces bare <video class="video-stream">
 * elements in the thumbnail strip.  It carries the same flex and
 * sizing properties as .video-stream so the layout is identical to
 * the pre-existing strip; only the internal structure changes.
 *
 * When video is ON  : the slot shows <video.video-stream>
 * When video is OFF : the slot shows <div.participant-card>
 * ───────────────────────────────────────────────────────────── */

/* Shared base (applies at all breakpoints) */
.video-slot {
    flex-shrink: 0;          /* Prevent compression, same as pre-existing .video-stream */
    float: left;
    position: relative;      /* Needed for the speaking-ring absolute overlay */
    border-radius: var(--corner-radius, 8px);
    background-color: black;
    cursor: pointer;
    scroll-snap-align: start;
}

/* Desktop: 20 % width, matching the pre-existing .video-stream rule in style_desktop.css */
@media (min-width: 600px) {
    .video-slot {
        height: calc(100%);
        width: calc(20% - var(--layout-margin, 5px));
        margin-left:  calc(0.5 * var(--layout-margin, 5px));
        margin-right: calc(0.5 * var(--layout-margin, 5px));
    }
}

/* Mobile: 50 % width, matching the pre-existing .video-stream rule in style_mobile.css */
@media (max-width: 599px) {
    .video-slot {
        height: calc(100%);
        width: calc(50% - var(--layout-margin, 5px));
        margin-left:  calc(0.5 * var(--layout-margin, 5px));
        margin-right: calc(0.5 * var(--layout-margin, 5px));
    }
}

/*
 * When a <video.video-stream> lives inside a .video-slot, override
 * the standalone width/height rules from style_desktop.css and
 * style_mobile.css so the video fills its slot completely.
 * The higher specificity (.video-slot .video-stream vs .video-stream)
 * ensures this rule wins without !important.
 */
.video-slot .video-stream {
    width: 100%;
    height: 100%;
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────
 * 2. PARTICIPANT CARD (thumbnail)
 * Fills the full slot and mirrors the dimensions of .video-stream.
 * ───────────────────────────────────────────────────────────── */

.participant-card {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.93);
    border: 1px solid rgba(0, 255, 255, 0.22);
    border-radius: var(--corner-radius, 8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 6px;
    color: #ffffff;
    /* backdrop-filter removed — it forces a GPU compositing layer per card,
       creating severe performance degradation with multiple participants.
       Compensated by raising background opacity from 0.88 → 0.93. */
    box-shadow: inset 0 0 18px rgba(0, 255, 255, 0.04);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    text-align: center;
}

/*
 * Speaking ring — an absolutely positioned border that glows green
 * while the Web Audio API detects sound from this participant.
 * The 'speaking' class is toggled by start_speaking_indicator()
 * in participant_card.js at each animation frame.
 */
.card-speaking-ring {
    position: absolute;
    inset: 0;                /* top:0; right:0; bottom:0; left:0 */
    border-radius: var(--corner-radius, 8px);
    border: 2px solid transparent;
    pointer-events: none;    /* never intercepts clicks */
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
    z-index: 10;
}

.card-speaking-ring.speaking {
    border-color: rgba(0, 255, 120, 0.78);
    box-shadow: 0 0 10px rgba(0, 255, 120, 0.32);
}

/* Avatar circle with blue gradient */
.card-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00b4d8, #0077b6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 6px;
    box-shadow: 0 0 10px rgba(0, 180, 216, 0.45);
    flex-shrink: 0;
}

/* Nickname label */
.card-name {
    font-size: 10px;
    font-weight: 600;
    color: #e0f7fa;
    text-transform: capitalize;
    line-height: 1.25;
    margin-bottom: 3px;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Live connection timer (monospace for stable width) */
.card-timer {
    font-size: 9px;
    color: rgba(0, 255, 255, 0.68);
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

/* Mute button — circular icon button matching app icon style */
.card-controls {
    display: flex;
    align-items: center;
    justify-content: center;
}

.peer-mute-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.10);
    /* Uses the existing mic.svg already present in the project */
    background-image: url('./assets/icons/svg/mic.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px 13px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Muted state: red tint, uses pre-existing mic_close.svg */
.peer-mute-btn.muted {
    background-color: rgba(255, 55, 55, 0.24);
    background-image: url('./assets/icons/svg/mic_close.svg');
    border-color: rgba(255, 55, 55, 0.40);
}

/* ─────────────────────────────────────────────────────────────
 * 3. MAIN PARTICIPANT CARD
 * Positioned in the same space as #main-video.  Both elements
 * are shown/hidden exclusively — never simultaneously.
 * Dimensions match .main-video exactly (style_common.css).
 * ───────────────────────────────────────────────────────────── */

.main-participant-card {
    /* Mirror the exact sizing of .main-video from style_common.css */
    height: calc(80% - (1.5 * var(--layout-margin, 5px)));
    width:  calc(100% - (2  * var(--layout-margin, 5px)));
    margin-left:   var(--layout-margin, 5px);
    margin-right:  var(--layout-margin, 5px);
    margin-top:    var(--layout-margin, 5px);
    margin-bottom: calc(0.5 * var(--layout-margin, 5px));

    border-radius: var(--corner-radius, 8px);
    background: rgba(0, 0, 0, 0.92);
    border: 1px solid rgba(0, 255, 255, 0.18);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    position: relative;
    overflow: hidden;
    cursor: pointer;          /* clicking toggles fullscreen, same as <video> */
    box-shadow: inset 0 0 40px rgba(0, 255, 255, 0.03);
}

/* Speaking ring for the main card — larger glow than thumbnail */
.main-card-ring {
    position: absolute;
    inset: 0;
    border-radius: var(--corner-radius, 8px);
    border: 3px solid transparent;
    pointer-events: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
    z-index: 10;
}

.main-card-ring.speaking {
    border-color: rgba(0, 255, 120, 0.72);
    box-shadow: 0 0 28px rgba(0, 255, 120, 0.20);
}

/* Large avatar for the main card */
.main-card-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00b4d8, #0077b6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 18px;
    box-shadow: 0 0 28px rgba(0, 180, 216, 0.42);
}

/* Large nickname label */
.main-card-name {
    font-size: 26px;
    font-weight: 600;
    color: #e0f7fa;
    text-transform: capitalize;
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}

/* Large timer */
.main-card-timer {
    font-size: 15px;
    color: rgba(0, 255, 255, 0.62);
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

/* Controls row for the large card */
.main-card-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* Larger mute button for the main card */
.main-card-controls .peer-mute-btn {
    width: 44px;
    height: 44px;
    background-size: 22px 22px;
}

/* ─────────────────────────────────────────────────────────────
 * 4. TOAST NOTIFICATIONS
 * Stack in the top-right corner, slide in from the right,
 * auto-dismiss with a slide-out transition.
 * ───────────────────────────────────────────────────────────── */

/* Fixed container; pointer-events: none so it never blocks clicks */
.notification-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

/* Individual toast: starts off-screen (translateX > 100%) */
.notification-toast {
    background: rgba(8, 8, 12, 0.96);
    border: 1px solid rgba(0, 255, 255, 0.26);
    border-radius: 10px;
    padding: 11px 16px;
    color: #ffffff;
    font-size: 13px;
    font-family: inherit;
    /* backdrop-filter removed — creates a compositing layer for every toast.
       Background raised to rgba(8,8,12,0.96) for equivalent visual legibility. */
    will-change: transform; /* promotes to own layer ONLY for the slide animation */
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 210px;
    max-width: 320px;

    /* Initial state: fully off-screen to the right */
    transform: translateX(140%);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Adding the 'visible' class triggers the slide-in */
.notification-toast.visible {
    transform: translateX(0);
}

/* Icon colours */
.notification-join  .notif-icon { color: #00ff78; font-size: 14px; }
.notification-leave .notif-icon { color: #ff4d4d; font-size: 14px; }

.notif-msg {
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ensure correct layout on mobile (still top-right, slightly smaller) */
@media (max-width: 599px) {
    .notification-container {
        top: 10px;
        right: 10px;
    }

    .notification-toast {
        min-width: 170px;
        font-size: 12px;
        padding: 9px 12px;
    }
}