/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.error-message {
    color: red;
    padding: 5px 10px;
    border: 2px solid red;
    margin-top: 10px;
    text-align: center;
}

/* Shared dark-theme surface color used across the recording-controls box,
   the meeting window, and the Q&A sidebar, so the whole area around the
   video reads as one consistent dark panel instead of a mix of light grey
   boxes sitting on a dark video. */
:root {
    --webinar-dark-bg: #1c2125;
    --webinar-dark-bg-raised: #2a2f34;
    --webinar-dark-border: #383e44;
    --webinar-dark-text: #f1f3f4;
    --webinar-muted-text: #9aa0a6;
}

.webinar-host-controls {
    padding: 8px 10px;
    border: 1px solid var(--webinar-dark-border);
    border-radius: 4px;
    background: var(--webinar-dark-bg);
    color: var(--webinar-dark-text);
}

.webinar-muted {
    color: var(--webinar-muted-text) !important;
}

/* Docked meeting window: video + Q&A sidebar side by side, so the chat
   reads as part of the webinar window rather than a separate section
   underneath it. Jitsi's own IFrame can't be extended with custom UI
   inside it, so this sits alongside it instead, styled to match. */
.webinar-meeting-window {
    display: flex;
    height: 600px;
    width: 100%;
    border: 1px solid var(--webinar-dark-border);
    border-radius: 6px;
    overflow: hidden;
    background: #000;
}

.webinar-video-pane {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    background: #000;
}

.webinar-video-pane #webinar {
    height: 100%;
    width: 100%;
}

.webinar-qa-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.webinar-qa-toggle--active {
    background: #4c8dff;
}

.webinar-qa-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 0.65rem;
}

.webinar-qa-sidebar {
    flex: 0 0 300px;
    max-width: 300px;
    height: 100%;
    background: var(--webinar-dark-bg);
    color: var(--webinar-dark-text);
    border-left: 1px solid var(--webinar-dark-border);
    display: flex;
    flex-direction: column;
}

.webinar-qa-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--webinar-dark-bg-raised);
    color: var(--webinar-dark-text);
    border-bottom: 1px solid var(--webinar-dark-border);
}

.webinar-qa-thread {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 8px;
}

.webinar-qa-message {
    padding: 4px 8px;
    margin-bottom: 4px;
    border-radius: 6px;
    background: var(--webinar-dark-bg-raised);
    border: 1px solid var(--webinar-dark-border);
    color: var(--webinar-dark-text);
    font-size: 0.9rem;
}

.webinar-qa-message--mine {
    background: #24466f;
    border-color: #34588a;
}

.webinar-qa-sender {
    font-weight: 600;
    margin-right: 4px;
    color: var(--webinar-dark-text);
}

.webinar-qa-text {
    color: var(--webinar-dark-text);
}

.webinar-qa-sidebar-footer {
    padding: 8px;
    border-top: 1px solid var(--webinar-dark-border);
}

.webinar-qa-sidebar .form-control {
    background: var(--webinar-dark-bg-raised);
    border-color: var(--webinar-dark-border);
    color: var(--webinar-dark-text);
}

.webinar-qa-sidebar .form-control::placeholder {
    color: var(--webinar-muted-text);
}

.webinar-qa-sidebar .form-control:focus {
    background: var(--webinar-dark-bg-raised);
    color: var(--webinar-dark-text);
    border-color: #4c8dff;
    box-shadow: 0 0 0 0.2rem rgba(76, 141, 255, 0.25);
}

.webinar-qa-sidebar .btn-link {
    color: #7bb0ff;
}

.webinar-qa-sidebar .btn-link:hover {
    color: #a9cbff;
}

.webinar-qa-sidebar .text-danger {
    color: #ff8a8a !important;
}

@media (max-width: 700px) {
    .webinar-meeting-window {
        flex-direction: column;
        height: auto;
    }
    .webinar-video-pane {
        height: 350px;
    }
    .webinar-qa-sidebar {
        flex: 1 1 auto;
        max-width: 100%;
        height: 320px;
        border-left: none;
        border-top: 1px solid var(--webinar-dark-border);
    }
}