/*
 * 2bpencil Owncast customization
 *
 * 이 파일을 저장한 뒤 live.2bpencil.online을 새로고침하면 적용됩니다.
 * Owncast 재시작, 재빌드, Nginx reload는 필요하지 않습니다.
 */

/* ============================================================
 * 1. 자주 변경하는 값
 * ============================================================ */
:root {
    /* Owncast Custom Appearance */
    --theme-color-action: #fffb80 !important;
    --theme-color-action-hover: #5dfd68 !important;
    --theme-color-background-header: transparent !important;
    --theme-color-background-main: #d1d1d1 !important;
    --theme-color-components-chat-background: #0b4db0 !important;
    --theme-color-components-chat-text: #000000 !important;
    --theme-color-components-content-background: #ff6c0a !important;
    --theme-color-components-primary-button-border: #5dfd68 !important;
    --theme-color-components-primary-button-text: #ff9500 !important;
    --theme-color-components-text-on-dark: #00b30c !important;
    --theme-color-components-text-on-light: #c70000 !important;
    --theme-color-components-video-status-bar-background: #d1d1d1 !important;
    --theme-color-components-video-status-bar-foreground: #df2a2a !important;
    --theme-color-users-0: #ff7979 !important;
    --theme-color-users-1: #ffb872 !important;
    --theme-color-users-2: #ffea83 !important;
    --theme-color-users-3: #d3f97a !important;
    --theme-color-users-4: #90a3ff !important;
    --theme-color-users-5: #da80fb !important;
    --theme-color-users-6: #d2d2d2 !important;
    --theme-color-users-7: #6effd6 !important;
    --theme-rounded-corners: 0px !important;

    /* Chat */
    --bp-chat-header-height: 40px;
    --bp-chat-gutter: 5px;
    --bp-chat-header-padding-x: var(--bp-chat-gutter);
    --bp-chat-message-size: 15px;
    --bp-chat-mobile-input-size: 16px;
    --bp-chat-other-message-text: #fdff9d;
    --bp-chat-own-message-text: #fdff9d;;
    /* readonly 랜덤 메시지: 사용자 색조를 유지하며 이 명암비 이상으로 배경 자동 생성 */
    --bp-readonly-random-min-contrast: 2.5;
    --bp-readonly-random-background-saturation-scale: 1.2;
    --bp-readonly-random-message-border-radius: 0px;
    --bp-readonly-notice-message-border-radius: 0px;
    --bp-chat-action-background:  #0b4db0;
    --bp-chat-action-text: #ffe84f;
    --bp-emoji-panel-background-rgb: 145, 144, 135;
    --bp-popup-screen-gap: 10px;
    --bp-emoji-popup-max-height: 350px;
    --bp-emoji-popup-reserved-height: 80px;
    --bp-emoji-popup-min-height: 180px;
    --bp-change-name-background: #d1d1d1;
    --bp-change-name-text: #000000;
    --bp-change-name-font-size: 13px;
    --bp-change-name-padding-y: 4px;
    --bp-change-name-padding-x: 8px;
    --bp-change-name-modal-width: 320px;
    --bp-change-name-header-height: 30px;
    --bp-change-name-header-text: #000000;
    --bp-change-name-modal-padding: 14px;
    --bp-change-name-color-size: 28px;
    --bp-change-name-color-gap: 8px;
    --bp-change-name-submit-padding-y: 0;
    --bp-change-name-submit-padding-x: 6px;
    --bp-change-name-mobile-screen-gap: 10px;

    /* Video */
    --bp-video-status-height: 32px;

    /* Offline screen */
    --bp-offline-background: #0b4db0;
    --bp-offline-text: #ffe84f;
    --bp-offline-bottom-space: 60px;

    /* Owncast 기본 헤더 계산에서도 같은 높이를 사용합니다. */
    --header-height: var(--bp-chat-header-height);
}
[class*="ChatJoinMessage_joinMessage"],
[class*="ChatPartMessage_partMessage"] {
    color: #ffe84f !important;
}
/* ============================================================
 * 2. 방송 시작·종료 안내
 * ============================================================ */
[class*="ChatActionMessage_chatAction"] {
    color: var(--bp-chat-action-text) !important;
    background-color: var(--bp-chat-action-background) !important;
}

/* ============================================================
 * 3. 채팅 메시지
 * ============================================================ */
#chat-container {
    --chat-message-text-size: var(--bp-chat-message-size);
}

[class*="ChatUserMessage_background__"] {
    border-radius: 0 !important;
}

[class*="ChatUserMessage_root__"] {
    display: flex !important;
    align-items: baseline !important;
    border-left: none !important;
    border-right: none !important;
}

[class*="ChatUserMessage_user__"],
[class*="ChatUserMessage_repeatUser__"] {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: baseline !important;
    margin-right: 4px !important;
}

[class*="ChatUserMessage_user__"]::after,
[class*="ChatUserMessage_repeatUser__"]::after {
    content: ":" !important;
    margin-left: 2px !important;
}

[class*="ChatUserMessage_message__"] {
    display: inline !important;
    overflow-wrap: anywhere !important;
}

[class*="ChatUserMessage_message__"] p {
    display: inline !important;
    margin: 0 !important;
}

[class*="ChatUserMessage_root"]:not([class*="ChatUserMessage_ownMessage"])
[class*="ChatUserMessage_message"],
[class*="ChatUserMessage_root"]:not([class*="ChatUserMessage_ownMessage"])
[class*="ChatUserMessage_message"] p {
    color: var(--bp-chat-other-message-text) !important;
}

[class*="ChatUserMessage_root"][class*="ChatUserMessage_ownMessage"]
[class*="ChatUserMessage_message"],
[class*="ChatUserMessage_root"][class*="ChatUserMessage_ownMessage"]
[class*="ChatUserMessage_message"] p {
    color: var(--bp-chat-own-message-text) !important;
}


[class*="ChatUserMessage_ownMessage"]
[class*="ChatUserMessage_background"] {
    background-color: #8d8d8d !important;
    opacity: 0.3 !important;
}

#random-chat-overlay
.random-chat-message:not(.random-chat-notice) {
    background-color: transparent !important;
    border-radius: var(--bp-readonly-random-message-border-radius) !important;
}

#random-chat-overlay
.random-chat-notice {
    border-radius: var(--bp-readonly-notice-message-border-radius) !important;
}

/* ============================================================
 * 4. 채팅 레이아웃
 * ============================================================ */
html,
body,
#__next {
    height: 100% !important;
    overflow: hidden !important;
}

#__next > div {
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Header */
[class*="Header_header"] {
    position: relative !important;
    height: var(--bp-chat-header-height) !important;
    padding: 0 var(--bp-chat-header-padding-x) !important;
    flex-shrink: 0 !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Readwrite에서는 생성되지 않으며 Owncast 메인 페이지에 적용됩니다. */
#header-logo,
#global-header-text {
    display: none !important;
}

[class*="UserDropdown_root"] {
    margin-left: auto !important;
}

[class*="UserDropdown_changeNameButton"] {
    color: var(--bp-change-name-text) !important;
    background-color: var(--bp-change-name-background) !important;
    font-size: var(--bp-change-name-font-size) !important;
    padding: var(--bp-change-name-padding-y) var(--bp-change-name-padding-x) !important;
    border: 2px outset #d2cece !important;
    border-radius: 1px !important;
}

/* Change name: all visual values can be tuned from the variables above. */
.ant-modal:has(#bp-change-name-modal) .ant-modal-content,
.ant-modal:has(#bp-change-name-modal) .ant-modal-header {
    background-color: var(--bp-change-name-background) !important;
}

.ant-modal:has(#bp-change-name-modal) .ant-modal-header {
    height: var(--bp-change-name-header-height) !important;
    min-height: var(--bp-change-name-header-height) !important;
    padding: 0 var(--bp-change-name-modal-padding) !important;
}

.ant-modal:has(#bp-change-name-modal) .ant-modal-title {
    color: var(--bp-change-name-header-text) !important;
    font-size: var(--bp-change-name-font-size) !important;
    line-height: var(--bp-change-name-header-height) !important;
}

.ant-modal:has(#bp-change-name-modal) .ant-modal-close,
.ant-modal:has(#bp-change-name-modal) .ant-modal-close-x {
    width: var(--bp-change-name-header-height) !important;
    height: var(--bp-change-name-header-height) !important;
    line-height: var(--bp-change-name-header-height) !important;
}

.ant-modal:has(#bp-change-name-modal) .ant-modal-close {
    top: 0 !important;
    right: 4px !important;
}

.ant-modal:has(#bp-change-name-modal) .ant-modal-body {
    min-height: 0 !important;
    height: auto !important;
}

.ant-modal:has(#bp-change-name-modal) [class*="Modal_content"] {
    height: auto !important;
    padding: var(--bp-change-name-modal-padding) !important;
}

#bp-change-name-modal [class*="NameChangeModal_colorOptions"] {
    gap: var(--bp-change-name-color-gap) !important;
}

#bp-change-name-modal [class*="NameChangeModal_colorButton"] {
    width: var(--bp-change-name-color-size) !important;
    height: var(--bp-change-name-color-size) !important;
}

#bp-change-name-modal #name-change-submit {
    padding: var(--bp-change-name-submit-padding-y) var(--bp-change-name-submit-padding-x) !important;
}

@media (max-width: 600px) {
    .ant-modal-wrap:has(#bp-change-name-modal) {
        align-items: flex-start !important;
        overflow: hidden !important;
        padding-top: calc(var(--bp-visual-viewport-offset-top, 0px) + var(--bp-change-name-mobile-screen-gap)) !important;
    }

    .ant-modal:has(#bp-change-name-modal) {
        width: min(
            var(--bp-change-name-modal-width),
            calc(
                var(--bp-visual-viewport-width, 100vw) - var(--bp-change-name-mobile-screen-gap) -
                var(--bp-change-name-mobile-screen-gap)
            )
        ) !important;
        max-width: calc(
            var(--bp-visual-viewport-width, 100vw) - var(--bp-change-name-mobile-screen-gap) -
            var(--bp-change-name-mobile-screen-gap)
        ) !important;
        margin: 0 auto !important;
        padding-bottom: 0 !important;
    }

    .ant-modal:has(#bp-change-name-modal) .ant-modal-content {
        display: flex !important;
        max-height: calc(
            var(--bp-visual-viewport-height, 100dvh) - var(--bp-change-name-mobile-screen-gap) -
            var(--bp-change-name-mobile-screen-gap)
        ) !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .ant-modal:has(#bp-change-name-modal) .ant-modal-body {
        max-height: calc(
            var(--bp-visual-viewport-height, 100dvh) - var(--bp-change-name-header-height) -
            var(--bp-change-name-mobile-screen-gap) - var(--bp-change-name-mobile-screen-gap)
        ) !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #bp-change-name-modal .ant-input {
        font-size: 16px !important;
    }
}
/* Message list */
#chat-container,
[class*="ChatContainer_chatContainer"] {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

[class*="ChatContainer_virtuoso"] {
    flex: 1 1 auto !important;
    height: 100% !important;
}

/* Input */
[class*="ChatContainer_chatTextField"] {
    position: relative !important;
    z-index: 9999 !important;
    flex-shrink: 0 !important;
    border-top: none !important;
}

#chat-input {
    padding-right: var(--bp-chat-gutter) !important;
    padding-left: var(--bp-chat-gutter) !important;
}

@media (max-width: 600px) {
    #chat-container [role="textbox"] {
        font-size: var(--bp-chat-mobile-input-size) !important;
        -webkit-text-size-adjust: 100%;
    }
}
[class*="ChatTextField_inputWrap"] {
    color: #000000 !important;
    background-color: #d1d1d1 !important;
        border: none !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    
}

[class*="ChatTextField_inputWrap"]:focus-within {
    background-color:  #d1d1d1 !important;
        border: none !important;
    box-shadow: none !important;
    
}


#mobile-chat-composer,
#mobile-chat-input,
#mobile-chat-send-button {
    color: #000000 !important;
    background-color: #d1d1d1 !important;
    border: none !important;
    border-radius: 3px !important;
    outline: none !important;
}

#mobile-chat-actions {
    align-items: center !important;
    padding-left: 0 !important;
}

#mobile-chat-input {
    width: 100% !important;
}

#mobile-chat-send-button {
    flex: 0 0 auto !important;
}

/* Keep Emoji Mart's black panel and remove only Ant Design's white shell. */
.bp-emoji-picker-popover {
    max-width: calc(
        var(--bp-visual-viewport-width, 100vw) - var(--bp-popup-screen-gap) - var(--bp-popup-screen-gap)
    ) !important;
}

.bp-emoji-picker-popover [class*="ChatTextField_emojiPickerContainer"] {
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
}

.bp-emoji-picker-popover em-emoji-picker {
    --rgb-background: var(--bp-emoji-panel-background-rgb);

    width: auto;
    max-width: calc(
        var(--bp-visual-viewport-width, 100vw) - var(--bp-popup-screen-gap) - var(--bp-popup-screen-gap)
    );
    height: min(
        var(--bp-emoji-popup-max-height),
        max(
            var(--bp-emoji-popup-min-height),
            calc(var(--bp-visual-viewport-height, 100dvh) - var(--bp-emoji-popup-reserved-height))
        )
    );
}

.bp-emoji-picker-popover .ant-popover-content,
.bp-emoji-picker-popover .ant-popover-inner,
.bp-emoji-picker-popover .ant-popover-inner-content {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.bp-emoji-picker-popover .ant-popover-arrow {
    display: none !important;
}

/* ============================================================
 * 5. 채팅 비활성화 화면
 * ============================================================ */
body:has([placeholder*="Chat is disabled"])::after {
    content: "No Signal";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9000;
    width: 100%;
    height: calc(100% - var(--bp-offline-bottom-space));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bp-offline-text);
    background-color: var(--bp-offline-background) !important;
    font-family: monospace;
    font-size: 32px;
    font-weight: lighter;
    letter-spacing: 4px;
    pointer-events: none;
}

/* ============================================================
 * 6. 영상 임베드
 * ============================================================ */
div[class*="VideoEmbed_onlineContainer"] {
    --player-container-height: 100%;
}