/* _content/Meeting.Web/Components/Meeting/ChatComposer.razor.rz.scp.css */
/* ChatComposer — scoped styles */

.chat-composer[b-w96vnnc5hm] {
    padding: 8px;
    border-top: 1px solid #30363d; /* --border */
    flex-shrink: 0;
}

.chat-composer__input[b-w96vnnc5hm] {
    width: 100%;
}

/* _content/Meeting.Web/Components/Meeting/ChatMessageItem.razor.rz.scp.css */
/* ChatMessageItem — scoped styles */

.chat-msg[b-bdt0uo7p9m] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-msg__sender[b-bdt0uo7p9m] {
    font-size: 12px;
    font-weight: 600;
    color: #00d4ff; /* --accent */
}

.chat-msg__time[b-bdt0uo7p9m] {
    font-size: 10px;
    color: #8b949e; /* --text-muted */
}

.chat-msg__body[b-bdt0uo7p9m] {
    margin: 0;
    font-size: 13px;
    color: #f0f6fc; /* --text */
    word-break: break-word;
}
/* _content/Meeting.Web/Components/Meeting/ChatMessageList.razor.rz.scp.css */
/* ChatMessageList — scoped styles */

.chat-list[b-bf2sspznyq] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* _content/Meeting.Web/Components/Meeting/ChatPanel.razor.rz.scp.css */
/* ChatPanel — scoped styles */

.chat-panel[b-f4hz5zyz52] {
    display: flex;
    flex-direction: column;
    background: #161b22; /* --surface */
    border-left: 1px solid #30363d; /* --border */
    width: 48px;
    flex-shrink: 0;
    transition: width 0.2s ease;
    overflow: hidden;
}

.chat-panel--expanded[b-f4hz5zyz52] {
    width: 300px;
}

.chat-panel__toggle[b-f4hz5zyz52] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 8px;
    background: transparent;
    border: none;
    color: #f0f6fc; /* --text */
    cursor: pointer;
    font-size: 11px;
    width: 100%;
    flex-shrink: 0;
    border-bottom: 1px solid #30363d; /* --border */
}

.chat-panel__toggle:hover[b-f4hz5zyz52] {
    background: #21262d; /* --surface-2 */
}

.chat-panel__body[b-f4hz5zyz52] {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}
/* _content/Meeting.Web/Components/Meeting/MediaControls.razor.rz.scp.css */
/* MediaControls — scoped styles */

.media-controls[b-v4ahfkx181] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 24px;
    background: #161b22; /* --surface */
    border-top: 1px solid #30363d; /* --border */
    flex-shrink: 0;
    height: 72px;
}

.ctrl-btn[b-v4ahfkx181] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border: 1px solid #30363d; /* --border */
    border-radius: 8px;
    background: #21262d; /* --surface-2 */
    color: #f0f6fc; /* --text */
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 11px;
    transition: background 0.15s, border-color 0.15s;
    min-width: 72px;
}

.ctrl-btn:hover[b-v4ahfkx181] {
    background: #30363d; /* --border */
}

.ctrl-btn svg[b-v4ahfkx181] {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.ctrl-btn--active[b-v4ahfkx181] {
    border-color: #00d4ff; /* --accent */
    color: #00d4ff;
    background: rgba(0, 212, 255, 0.08);
}

.ctrl-btn--muted[b-v4ahfkx181] {
    border-color: #f85149; /* --danger */
    color: #f85149;
    background: rgba(248, 81, 73, 0.08);
}

.ctrl-btn--leave[b-v4ahfkx181] {
    border-color: #f85149; /* --danger */
    color: #f85149;
    background: rgba(248, 81, 73, 0.08);
}

.ctrl-btn--leave:hover[b-v4ahfkx181] {
    background: rgba(248, 81, 73, 0.22);
}

@media (min-width: 768px) {
    .media-controls[b-v4ahfkx181] {
        padding: 12px 40px;
    }
}
/* _content/Meeting.Web/Components/Meeting/ParticipantGrid.razor.rz.scp.css */
/* ParticipantGrid — scoped styles */

.participant-grid[b-ly571wf5wb] {
    flex: 1;
    display: grid;
    gap: 8px;
    padding: 12px;
    overflow: hidden;
    align-content: start;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

/* 1 participant: full width */
.participant-grid:has(> :only-child)[b-ly571wf5wb] {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

/* 2–3 participants: single column pair */
.participant-grid:has(> :nth-child(2)):not(:has(> :nth-child(4)))[b-ly571wf5wb] {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
}

/* 5–6 participants: 3×2 grid */
.participant-grid--6[b-ly571wf5wb] {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

@media (min-width: 768px) {
    .participant-grid[b-ly571wf5wb] {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        flex: 1;
    }

    .participant-grid--6[b-ly571wf5wb] {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
}
/* _content/Meeting.Web/Components/Meeting/ParticipantTile.razor.rz.scp.css */
/* ParticipantTile — scoped styles */

.participant-tile[b-i7sqx143ct] {
    position: relative;
    background: #21262d; /* --surface-2 */
    border: 1px solid #30363d; /* --border */
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.participant-tile--self[b-i7sqx143ct] {
    border-color: #00d4ff; /* --accent */
}

.participant-tile__video[b-i7sqx143ct] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.participant-tile--self .participant-tile__video[b-i7sqx143ct] {
    transform: scaleX(-1);
}

.participant-tile__video-placeholder[b-i7sqx143ct] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.participant-tile__avatar[b-i7sqx143ct] {
    width: 72px;
    height: 72px;
    border-radius: 9999px;
    background: #161b22; /* --surface */
    border: 2px solid #30363d; /* --border */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: #00d4ff; /* --accent */
    letter-spacing: -0.5px;
}

.participant-tile__footer[b-i7sqx143ct] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px 10px;
    background: linear-gradient(transparent, rgba(0,0,0,0.72));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.participant-tile__name[b-i7sqx143ct] {
    font-size: 12px;
    font-weight: 500;
    color: #f0f6fc; /* --text */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.participant-tile__name--self[b-i7sqx143ct]::after {
    content: " (You)";
    color: #8b949e; /* --text-muted */
    font-weight: 400;
}

.mic-indicator[b-i7sqx143ct] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 9999px;
    background: rgba(248, 81, 73, 0.85); /* --danger */
    flex-shrink: 0;
}

.mic-indicator svg[b-i7sqx143ct] {
    width: 12px;
    height: 12px;
    fill: #fff;
}
/* _content/Meeting.Web/Components/Meeting/PresenceList.razor.rz.scp.css */
/* PresenceList — scoped styles */

.presence-list[b-jjbhfu68k9] {
    width: 220px;
    flex-shrink: 0;
    background: #161b22; /* --surface */
    border-left: 1px solid #30363d; /* --border */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.presence-list__header[b-jjbhfu68k9] {
    padding: 12px 16px 8px;
    font-size: 11px;
    font-family: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8b949e; /* --text-muted */
    border-bottom: 1px solid #21262d; /* --border-subtle */
    flex-shrink: 0;
}

.presence-list__items[b-jjbhfu68k9] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.presence-list__items[b-jjbhfu68k9]::-webkit-scrollbar {
    width: 4px;
}

.presence-list__items[b-jjbhfu68k9]::-webkit-scrollbar-track {
    background: transparent;
}

.presence-list__items[b-jjbhfu68k9]::-webkit-scrollbar-thumb {
    background: #30363d; /* --border */
    border-radius: 2px;
}

.presence-list__item[b-jjbhfu68k9] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px;
    cursor: default;
}

.presence-list__item:hover[b-jjbhfu68k9] {
    background: #21262d; /* --surface-2 */
}

.presence-list__online-dot[b-jjbhfu68k9] {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: #3fb950; /* online green */
    flex-shrink: 0;
}

.presence-list__user-name[b-jjbhfu68k9] {
    font-size: 13px;
    color: #f0f6fc; /* --text */
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.presence-list__badge[b-jjbhfu68k9] {
    font-size: 10px;
    font-family: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;
    color: #00d4ff; /* --accent */
    background: rgba(0, 212, 255, 0.12);
    padding: 2px 6px;
    border-radius: 9999px;
    border: 1px solid rgba(0, 212, 255, 0.3);
}

.presence-list__muted-icon[b-jjbhfu68k9] {
    display: flex;
    align-items: center;
}

.presence-list__muted-icon svg[b-jjbhfu68k9] {
    width: 12px;
    height: 12px;
    fill: #f85149; /* --danger */
}
/* _content/Meeting.Web/Components/Meeting/PresenterStage.razor.rz.scp.css */
/* PresenterStage — scoped styles */

.presenter-stage[b-qp2avlub5u] {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px;
    aspect-ratio: 16 / 9;
}

.presenter-stage__video[b-qp2avlub5u] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.presenter-stage__label[b-qp2avlub5u] {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.6);
    color: #f0f6fc;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
}
/* _content/Meeting.Web/Components/Meeting/RoomCodeBanner.razor.rz.scp.css */
/* RoomCodeBanner — scoped styles */

.room-code-banner[b-u4juipmpr3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(0, 212, 255, 0.06);
    border: 1px solid rgba(0, 212, 255, 0.25);
    border-radius: 8px;
    margin: 16px;
}

.room-code-banner__label[b-u4juipmpr3] {
    color: #8b949e; /* --text-muted */
    font-size: 12px;
}

.room-code-banner__code[b-u4juipmpr3] {
    color: #00d4ff; /* --accent */
    font-family: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.12em;
    flex: 1;
}
/* _content/Meeting.Web/Components/Pages/Meeting/Room.razor.rz.scp.css */
/* Room page — scoped styles (in-call dark shell) */

.room-shell[b-idkvkhxama] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: #0d1117; /* --bg */
    color: #f0f6fc; /* --text */
}

/* ── Loading / Error states ── */
.room-shell__loading[b-idkvkhxama],
.room-shell__error[b-idkvkhxama] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #f0f6fc;
}

/* ── Top bar ── */
.room-shell__top-bar[b-idkvkhxama] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px;
    background: #161b22; /* --surface */
    border-bottom: 1px solid #30363d; /* --border */
    height: 48px;
    flex-shrink: 0;
}

.room-shell__top-bar-left[b-idkvkhxama] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.room-shell__live-dot[b-idkvkhxama] {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: #3fb950; /* online green */
    display: inline-block;
}

.room-shell__room-name[b-idkvkhxama] {
    font-weight: 600;
    color: #f0f6fc; /* --text */
}

/* ── Main area ── */
.room-shell__main[b-idkvkhxama] {
    display: flex;
    flex: 1;
    overflow: hidden;
    flex-direction: row;
}

/* Content area (grid + presence list) — fills remaining space next to chat */
.room-shell__content[b-idkvkhxama] {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

@media (max-width: 767px) {
    .room-shell__main[b-idkvkhxama] {
        flex-direction: column;
    }
}