/* Techlabs modifications to MiroTalk SFU. SPDX-License-Identifier: AGPL-3.0-only */
/* Scope to the new default so explicitly selected custom/dark themes still work. */
:root[data-meet-theme='light'] {
    color-scheme: light;
    --meet-ink: #173d36;
    --meet-muted: #647771;
    --meet-green: #1c7160;
    --meet-line: #dce6df;
    --body-bg: #f4f7f3 !important;
    --border: 1px solid var(--meet-line) !important;
    --msger-bg: #ffffff !important;
    --wb-bg: #ffffff !important;
    --select-bg: #f4f7f3 !important;
    --left-msg-bg: #eff4f0 !important;
    --right-msg-bg: #dceee4 !important;
    --private-msg-bg: #fff3d5 !important;
    --settings-bg: #ffffff !important;
    --trx-bg: #ffffff !important;
    --tab-btn-active: #dceee4 !important;
    --btns-bg-color: #ffffff !important;
    --dd-color: #173d36 !important;
    --box-shadow: 0 12px 40px #244e3d14 !important;
    --btns-hover-scale: scale(1.03);
}

html[data-meet-theme='light'] {
    /* The original theme uses fixed white text and inline backgrounds. */
    body {
        color: var(--meet-ink);
        background: radial-gradient(ellipse at 6% 65%, #dfece5 0, transparent 52%), #f4f7f3 !important;
        font-family: Inter, Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
    }
    :where(div, p, span, label, h1, h2, h3, h4, h5, h6, input, select, textarea, button, a, table, pre) {
        font-family: inherit;
    }
    /* Preserve the existing icon font used by media controls. */
    :where(.fas, .fa-solid, .far, .fa-regular) { font-family: 'Font Awesome 6 Free'; }
    :where(.fab, .fa-brands) { font-family: 'Font Awesome 6 Brands'; }
    :where(p, button, label, h1, h2, h3, h4, .title, .inline-check-box, .settingsTable, #shortcutsTable,
        .file-table, #qrText, .lobby-header, #lobbyUsers, .whiteboard-header,
        .emojiPickerHeader, #sendFileDiv, #receiveFileDiv, .avatarsVideoAI,
        .poll-h1, .poll-h2, .poll-h3, .poll ul li, .options label,
        .chat .chat-header .chat-about, .people-list .chat-list li .name,
        .chat .chat-history .message, .left-msg-transcription .msg-transcription-bubble,
        .swal2-title, .swal2-content, .swal2-html-container, .swal2-input-label,
        #mySettings i, #about a, .editor, .ql-picker-options) {
        color: var(--meet-ink) !important;
    }
    :where(.mod-title, .people-list .status) {
        color: var(--meet-muted);
    }
    .chat .chat-history .message-data-time { color: #111111; }
    .chat .chat-history ul li { margin-bottom: 16px; }
    .chat .chat-history ul li:last-child { margin-bottom: 0; }
    .chat .chat-history .message-data { margin-bottom: 10px; }
    .chat .chat-history .message { padding: 8px 12px; }
    .chat .chat-history .message > .text-start > :last-child { margin-bottom: 0; }
    .chat .chat-history .message > hr { margin: 6px 0; }
    .chat .chat-history .message > .about-buttons {
        display: flex; align-items: center; gap: 6px; margin-top: 0;
    }
    .chat .chat-history .message > .about-buttons button {
        min-width: 32px; min-height: 32px; padding: 3px 6px; margin: 0;
    }
    :where(a, .chat a) { color: var(--meet-green); }
    :where(input:not([type='checkbox']):not([type='range']):not([type='color']), select, textarea) {
        background-color: #fcfdfb !important;
        color: var(--meet-ink) !important;
        border: 1px solid #c8d9cf !important;
        border-radius: 9px;
        box-shadow: none !important;
    }
    :where(input, textarea)::placeholder { color: #71877b; opacity: 1; }
    :where(button, a, input, select, textarea, [tabindex]):focus-visible {
        outline: 3px solid #dab84c !important;
        outline-offset: 3px;
    }
    :where(button, input, select, textarea) { accent-color: var(--meet-green); }
    .form-check-input:checked { background-color: var(--meet-green); border-color: var(--meet-green); }
    :where(button:disabled, [aria-disabled='true']) { opacity: .5; }
    * { scrollbar-width: thin; scrollbar-color: #afc5b8 transparent; }
    ::-webkit-scrollbar { width: 5px; height: 5px; }
    ::-webkit-scrollbar-thumb { background: #afc5b8; border-radius: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }

    /* Pre-join and all confirmation / settings dialogs. */
    .swal2-container.swal2-backdrop-show { background: #173d360d; }
    .swal2-popup {
        background: #fff !important;
        border: 1px solid var(--meet-line);
        border-radius: 22px;
        padding: 28px;
        color: var(--meet-ink);
    }
    .swal2-title { font-size: 26px; font-weight: 700; letter-spacing: -.8px; }
    .swal2-html-container { font-size: 15px; line-height: 1.7; }
    .swal2-input { text-align: left; min-height: 48px; }
    .swal2-input-label { font-size: 14px; margin-bottom: 0; }
    .swal2-validation-message { background: #fff1ec !important; color: #a63520 !important; border-radius: 8px; }
    .swal2-actions { gap: 8px; }
    .swal2-styled { border-radius: 10px; padding: 12px 24px; box-shadow: none !important; }
    .swal2-styled.swal2-confirm { background: var(--meet-green) !important; color: #fff !important; }
    .swal2-styled.swal2-cancel { background: #eef4ef !important; color: var(--meet-ink) !important; }
    .swal2-styled.swal2-deny { background: #a63520 !important; color: #fff !important; }
    .swal2-timer-progress-bar { background-color: var(--meet-green) !important; }
    .swal2-close { color: var(--meet-muted) !important; }
    .init-modal-size { width: min(980px, calc(100vw - 32px)) !important; }
    .init-modal-size::before {
        content: 'TECHLABS MEET';
        display: block;
        margin: 6px 0 4px;
        color: var(--meet-green);
        font-size: 12px;
        font-weight: 750;
        letter-spacing: 2px;
    }
    .init-modal-size .swal2-html-container { margin: 24px 0 12px; }
    .init-user { gap: 24px; align-items: center; padding: 0; }
    .init-video-container { padding: 0; }
    .init-video-container video { width: 100%; border-radius: 14px; background: #e2ebe4; object-fit: cover; }
    .initComands { padding: 0 6px; }
    .init-user select { margin-top: 12px; height: 46px; font-size: 14px; }
    .init-user button {
        border-radius: 10px;
        border: 1px solid var(--meet-line);
        background: #f2f7f3;
        color: var(--meet-ink) !important;
        margin: 4px 2px 8px;
        width: 42px;
        height: 42px;
        font-size: 16px;
    }
    .init-user button:hover { background: #e2eee5; }
    :where(.init-user, #bottomButtons) :where(.fa-microphone-slash, .fa-video-slash, .fa-eye-slash),
    :where(#bottomButtons, #control) button:has(:where(.fa-microphone-slash, .fa-video-slash)) {
        background: #fff0ea !important;
        color: #a63520 !important;
    }
    #loadingDiv { background: #fff; color: var(--meet-ink); border: var(--border); box-shadow: var(--box-shadow); }
    #loadingDiv h1 { font-family: inherit; font-size: 32px; letter-spacing: -1px; }
    #loadingDiv pre { font-family: inherit; font-size: 14px; line-height: 1.8; white-space: pre-wrap; }

    /* Meeting controls and tool panels. Video pixels and whiteboard drawings are untouched. */
    :where(#control, #bottomButtons) button {
        color: var(--meet-ink) !important;
        box-shadow: 0 3px 12px #244e3d12;
        border: 1px solid var(--meet-line) !important;
    }
    :where(#control, #bottomButtons) button:hover { background: #dceee4 !important; }
    :where(#exitButton, #hangupButton, #sendAbortBtn, #receiveAbortBtn, .del-btn) {
        background: #fff0ea !important;
        color: #a63520 !important;
    }
    :where(#mySettings, .chat-container, .pls-container, .editor-container,
        #transcription, #lobby, #sendFileDiv, #receiveFileDiv, .imageUrlModal) {
        border-radius: 16px;
        border: var(--border);
        background: #fff;
    }
    :where(.tab button, .dropdown-menu, .dropdown-menu button, .videoMenuBar,
        .videoAvatarMenuBar, .videoMenuBarShare, .expand-video-content, .ql-toolbar,
        .people-list .chat-list li:hover, .people-list .chat-list li.active) {
        background: #eff5f0 !important;
        color: var(--meet-ink) !important;
    }
    .tab button.active { background: #dceee4 !important; color: #155446 !important; }
    :where(.ql-toolbar .ql-picker, .ql-picker-options) { color: var(--meet-ink); }
    .ql-snow .ql-stroke { stroke: var(--meet-ink); }
    .ql-snow .ql-fill { fill: var(--meet-ink); }
    .videoMenuBar button, .expand-video-content .peer-name { color: var(--meet-ink); }
    .videoMenuBarClose { color: var(--meet-ink); }
    /* Names drawn over camera feeds need their own contrasting surface. */
    .username { background: #173d36d9; border-radius: 7px; padding: 4px 9px; }
    .username, .username p, .username span { color: #fff !important; }
    .red { color: #a63520 !important; }
    @media (max-width: 700px) {
        .swal2-popup { padding: 22px 18px; border-radius: 17px; }
        .swal2-title { font-size: 22px; padding: 12px 0 0; }
        .init-user { display: block; }
        .init-video-container video { height: 180px; }
        .initComands { padding: 10px 0 0; }
        .init-user button { width: 38px; height: 38px; }
        .swal2-input { margin: 14px 0 0; width: 100%; }
        .swal2-html-container { margin-left: 0; margin-right: 0; }
        .swal2-input-label { font-size: 13px; }
        .swal2-actions { margin-top: 18px; }
    }
}

.meet-loading-indicator { width: 52px; height: 52px; margin: 24px auto; border: 4px solid #dce6df; border-top-color: #1c7160; border-right-color: #f5d672; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) {
    .meet-loading-indicator { animation: meet-loading-turn 1s linear infinite; }
}
@keyframes meet-loading-turn { to { transform: rotate(360deg); } }

/* Creation options stay inside the preparation card and never appear for guests. */
.meet-room-protection { margin-top: 16px; padding: 14px; border: var(--border); border-radius: 12px; text-align: left; }
.meet-protection-heading { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 650; }
#initRoomPasswordFields { margin-top: 14px; }
#initRoomPasswordFields label { display: block; font-size: 13px; margin-bottom: 7px; }
#initRoomPassword { width: 100%; padding: 11px 12px; font-size: 14px; }
#initRoomPasswordHint { margin: 9px 0 0; font-size: 12px; line-height: 1.6; }
.meet-room-protection[hidden], #initRoomPasswordFields[hidden] { display: none !important; }

.meet-authenticated-name { margin-top: 20px; text-align: center; }
.meet-authenticated-name span { display: block; font-size: 13px; margin-bottom: 8px; }
.meet-authenticated-name strong { display: block; font-size: 17px; overflow-wrap: anywhere; }
.meet-authenticated-name[hidden] { display: none !important; }