/* 실시간 채팅 공통 화면. */
.pb-chat {
    position: relative;
    width: 100%;
    font-family: Pretendard, "Nanum Gothic", sans-serif;
    color: #263746
}

.pb-chat * {
    box-sizing: border-box
}

.pb-chat button,
.pb-chat textarea,
.pb-chat input {
    font: inherit
}

.pb-chat-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 600px;
    overflow: hidden;
    border: 1px solid #cad8e3;
    border-radius: 12px;
    background: #fff
}

.pb-chat-head {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    background: linear-gradient(90deg, #9823f5 0%, #c66cff 100%);
    color: #fff
}

.pb-chat-brand {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0
}

.pb-chat-brand strong {
    font-size: 13px
}

.pb-chat-connect {
    padding: 3px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .2);
    font-size: 11px
}

.pb-chat-stats {
    display: flex;
    justify-content: center;
    gap: 16px;
    min-height: 29px;
    padding: 6px 10px;
    border-bottom: 1px solid #e3edf2;
    background: linear-gradient(90deg, #fffaf3, #f2fcfd);
    font-size: 12px
}

.pb-chat-stats span:last-child {
    color: #4e2ce7
}

.pb-chat-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    min-height: 34px;
    border-bottom: 1px solid #d8e2e9;
    background: #f3f7f9
}

.pb-chat-tabs.has-admin {
    grid-template-columns: repeat(3, 1fr)
}

.pb-chat-tabs button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 0;
    background: transparent;
    color: #72818c;
    cursor: pointer
}

.pb-chat-tabs button.is-active {
    margin: 4px 7px;
    border-radius: 13px;
    background: #27394c;
    color: #fff
}

.pb-chat-tabs span {
    font-size: 11px
}

.pb-chat-view {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column
}

.pb-chat-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 31px;
    padding: 0 12px;
    border-bottom: 1px solid #efd8c5;
    background: #f8e696;
    color: #1f1f1f
}

.pb-chat-notice strong {
    font-size: 13px;
    font-weight: 500
}

.pb-chat-notice button,
.pb-chat-subhead button {
    border: 0;
    background: transparent;
    cursor: pointer
}

.pb-chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 10px 12px;
    scrollbar-width: thin
}

.pb-chat-message {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 7px;
    margin: 0 0 10px
}

/* 회원아이콘 배경과 원본 크기 유지. */
.pb-chat-avatar {
    display: inline-flex;
    flex: 0 0 22px;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    overflow: hidden;
}

.pb-chat-avatar img {
    display: block;
    width: 22px;
    height: 22px;
    max-width: 22px;
    max-height: 22px;
    object-fit: contain;
    border-radius: 4px;
}

.pb-chat-message-head {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 17px;
    font-size: 12px
}

.pb-chat-message-head strong {
    font-weight: 400
}

.pb-chat-message-head time {
    color: #798a96
}

.pb-chat-user-menu {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: #9aa8b2;
    cursor: pointer
}

.pb-chat-ai-badge {
    padding: 1px 5px;
    border-radius: 8px;
    background: #e8f6f7;
    color: #30858e;
    font-size: 10px
}

.pb-chat-message-text {
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word
}

.pb-chat-message.is-bold .pb-chat-message-text {
    font-weight: 700
}

.pb-chat-message.is-underline .pb-chat-message-text {
    text-decoration: underline
}

.pb-chat-message.is-italic .pb-chat-message-text {
    font-style: italic
}

.pb-chat-tools {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 36px;
    padding: 4px 9px;
    border-top: 1px solid #dce6ec;
    background: #fbfdfe
}

.pb-chat-tools button {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #7f8d97;
    cursor: pointer
}

.pb-chat-tools button.is-active {
    background: #e8f1f6;
    color: #26394c
}

.pb-chat-emoji-panel {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 3px;
    padding: 7px;
    border-top: 1px solid #dce6ec;
    background: #fff
}

.pb-chat-emoji-panel button {
    height: 30px;
    border: 0;
    background: transparent;
    cursor: pointer
}

.pb-chat-form {
    display: grid;
    grid-template-columns: 31px 1fr 38px;
    gap: 5px;
    padding: 5px;
    border-top: 1px solid #dce6ec
}

.pb-chat-form button {
    border: 1px solid #dae5eb;
    background: #fff;
    color: #8fa0aa;
    cursor: pointer
}

.pb-chat-plus {
    border-radius: 8px
}

.pb-chat-form textarea {
    height: 32px;
    max-height: 80px;
    resize: none;
    padding: 7px 10px;
    border: 1px solid #d7e2e9;
    border-radius: 10px;
    outline: none;
    font-size: 12px
}

.pb-chat-send {
    border-radius: 9px !important;
    background: #a7dfe3 !important;
    color: #fff !important
}

.pb-chat-status {
    min-height: 18px;
    margin: 0;
    padding: 0 10px 5px;
    color: #9aa8b2;
    font-size: 10px
}

.pb-chat-subhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    padding: 0 12px;
    border-bottom: 1px solid #efd8c5;
    background: #fff9f1;
    color: #df7a48
}

.pb-chat-scroll-area,
.pb-chat-admin-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px
}

.pb-chat-setting-guide {
    font-size: 12px
}

.pb-chat-scroll-area h3 {
    margin: 14px 0 10px;
    font-size: 14px
}

.pb-chat-scroll-area label {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 9px 0;
    font-size: 12px;
    line-height: 1.55
}

.pb-chat-scroll-area hr {
    margin: 14px 0;
    border: 0;
    border-top: 1px solid #dce5eb
}

.pb-chat-block-guide {
    padding: 10px;
    background: #fffdb8;
    color: #765e19;
    font-size: 11px;
    line-height: 1.6
}

.pb-chat-block-list>div {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #e6edf1
}

.pb-chat-bottom-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid #dce5eb
}

.pb-chat-bottom-actions button {
    height: 36px;
    border: 0;
    background: #fff;
    cursor: pointer
}

.pb-chat-bottom-actions button:last-child {
    background: #59a6ea;
    color: #fff
}

.pb-chat-admin-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid #dce5eb
}

.pb-chat-admin-tabs button {
    height: 38px;
    border: 0;
    background: #f5f8fa;
    cursor: pointer
}

.pb-chat-admin-tabs button.is-active {
    background: #fff;
    font-weight: 700
}

.pb-chat-admin-toolbar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px
}

.pb-chat-admin-toolbar button,
.pb-chat-admin-form-actions button,
.pb-chat-auto-form>button {
    height: 32px;
    padding: 0 12px;
    border: 1px solid #d5e0e7;
    border-radius: 7px;
    background: #fff;
    cursor: pointer
}

.pb-chat-admin-list {
    display: grid;
    gap: 8px
}

.pb-chat-admin-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px;
    border: 1px solid #e0e7ec;
    border-radius: 8px
}

.pb-chat-admin-row small {
    display: block;
    color: #82909a;
    font-size: 11px
}

.pb-chat-admin-row button {
    margin-left: 4px;
    border: 0;
    background: transparent;
    color: #3e728f;
    cursor: pointer
}

.pb-chat-ai-form,
.pb-chat-auto-form {
    display: grid;
    gap: 9px;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid #dfe7ec;
    border-radius: 9px
}

.pb-chat-ai-form label,
.pb-chat-auto-form label {
    display: grid;
    gap: 5px;
    font-size: 12px
}

.pb-chat-ai-form input,
.pb-chat-ai-form textarea,
.pb-chat-auto-form input {
    width: 100%;
    padding: 8px;
    border: 1px solid #d4dfe6;
    border-radius: 7px
}

.pb-chat-inline-check {
    display: flex !important;
    align-items: center
}

.pb-chat-inline-check input {
    width: auto
}

.pb-chat-admin-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 7px
}

.pb-chat-auto-form small {
    color: #8b99a3
}

.pb-chat-admin-status {
    min-height: 26px;
    margin: 0;
    padding: 5px 10px;
    color: #c45454;
    font-size: 11px
}

/* 설정·관리자 화면은 채팅창 내부 오버레이로 표시. */
.pb-chat-panel {
    position: relative
}

.pb-chat-view[data-pb-chat-section="chat"] {
    position: relative;
    z-index: 1
}

.pb-chat-overlay {
    position: absolute;
    z-index: 20;
    top: 99px;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    min-height: 0;
    flex-direction: column;
    background: #fff
}

.pb-chat-overlay[hidden] {
    display: none
}

.pb-chat-settings-view,
.pb-chat-admin-view {
    border-radius: 0 0 11px 11px
}

/* 이모지 선택창은 입력 도구 위에 띄움. */
.pb-chat-emoji-panel {
    position: absolute;
    z-index: 15;
    right: 8px;
    bottom: 75px;
    left: 8px;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 4px;
    padding: 8px;
    border: 1px solid #dce6ec;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(30, 52, 68, .14)
}

.pb-chat-emoji-panel[hidden] {
    display: none
}

.pb-chat-emoji-panel button {
    height: 32px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer
}

.pb-chat-emoji-panel button:hover {
    background: #f1f6f8
}

/* 채팅 첨부 이미지. */
.pb-chat-image-link {
    display: block;
    width: 90px;
    height: 60px;
    margin-top: 6px;
    border-radius: 4px;
    overflow: hidden;
    background: #f3f3f3
}

.pb-chat-image {
    display: block;
    width: 90px;
    height: 60px;
    object-fit: contain;
    background: #f3f3f3
}