/* ============================================================================
 * 배때지 V2 · 실시간 쇼핑 «채팅» (역할별 분리 파일)
 *
 *   live-onair.css  = 페이지 골격 · 플레이어 · 상품 · 지난방송
 *   live-chat.css   = 채팅 패널만 (이 파일)
 *   live-studio.css = 관리자 방송센터 전용 (공개 페이지에서 로드하지 않는다)
 *
 *   레이아웃 원칙
 *     · 채팅은 «메시지 영역만» 스크롤한다. 페이지 전체가 밀리지 않는다.
 *     · PC 에서 채팅 높이는 플레이어 높이에 맞춘다(그리드 stretch).
 *     · 고정 높이를 하드코딩하지 않는다 — 높이는 그리드/플렉스가 정한다.
 *     · 가로 넘침 0: 모든 텍스트에 min-width:0 + overflow-wrap 을 건다.
 * ========================================================================== */

.v2ch {
    position: relative;            /* .v2ch-new(새 메시지 버튼)의 기준 */
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;                 /* ★ 없으면 flex 자식이 부모를 밀어 스크롤이 페이지로 샌다 */
    border: 1px solid var(--os-line, #e9e9ec);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}

/* ---------------------------------------------------------------- 헤더 */
.v2ch-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--os-line, #e9e9ec);
    background: #fff;
    flex: 0 0 auto;
}
.v2ch-head strong {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--os-ink, #111);
    letter-spacing: -.01em;
}
.v2ch-state {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--os-ink-3, #9a9aa2);
    white-space: nowrap;
}
.v2ch-state i {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #c7c7cf;
}
.v2ch.is-live .v2ch-state i    { background: #22a06b; }
.v2ch.is-retry .v2ch-state i   { background: #e0a326; }
.v2ch.is-down  .v2ch-state i   { background: #e0264a; }

/* ---------------------------------------------------------------- 고정 공지 */
.v2ch-notice {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--os-line, #e9e9ec);
    background: #faf7f0;
    font-size: 12.5px;
    line-height: 1.55;
    color: #4a3f28;
    flex: 0 0 auto;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.v2ch-notice[hidden] { display: none; }
.v2ch-notice b {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 800;
    color: #8a6d2f;
    letter-spacing: .04em;
}

/* ---------------------------------------------------------------- 메시지 */
.v2ch-list {
    flex: 1 1 auto;
    min-height: 0;                 /* ★ 스크롤이 이 영역 안에서만 일어나게 하는 핵심 */
    overflow-y: auto;
    overscroll-behavior: contain;  /* 끝에서 페이지가 따라 스크롤되지 않게 */
    -webkit-overflow-scrolling: touch;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    scrollbar-width: thin;
}

.v2ch-msg {
    display: flex;
    gap: 6px;
    font-size: 13px;
    line-height: 1.5;
    color: #23232a;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.v2ch-msg .n {
    flex: 0 0 auto;
    max-width: 40%;
    font-weight: 700;
    color: #6b6b73;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v2ch-msg .t { min-width: 0; }

/* 관리자 메시지 — 눈에 띄게 */
.v2ch-msg.is-admin {
    padding: 8px 10px;
    border-radius: 10px;
    background: #111;
    color: #fff;
}
.v2ch-msg.is-admin .n { color: var(--lv-point, #c9a96e); }
.v2ch-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 17px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--lv-point, #c9a96e);
    color: #1a1a1a;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
}

/* 시스템 메시지(상품 변경 안내 등) */
.v2ch-msg.is-system {
    justify-content: center;
    font-size: 12px;
    color: #7a7a84;
}
.v2ch-msg.is-system .t {
    padding: 5px 10px;
    border-radius: 999px;
    background: #f2f2f4;
    cursor: pointer;
}

/* 내 메시지 전송중/실패 */
.v2ch-msg.is-pending { opacity: .5; }
.v2ch-msg.is-failed .t { color: #e0264a; }
.v2ch-msg.is-failed .retry {
    margin-left: 6px;
    font-size: 11.5px;
    text-decoration: underline;
    cursor: pointer;
    color: #e0264a;
}

/* 빈 상태 */
.v2ch-empty {
    margin: auto;
    padding: 20px 10px;
    text-align: center;
    font-size: 12.5px;
    color: var(--os-ink-3, #9a9aa2);
    line-height: 1.6;
}

/* “새 메시지 N개” — 사용자가 위로 올려 읽는 중이면 강제 스크롤하지 않는다 */
.v2ch-new {
    position: absolute;
    left: 50%;
    bottom: 76px;
    transform: translateX(-50%);
    z-index: 3;
    height: 30px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 0;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
}
.v2ch-new[hidden] { display: none; }

/* ---------------------------------------------------------------- 입력 */
.v2ch-form {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 11px;
    border-top: 1px solid var(--os-line, #e9e9ec);
    background: #fff;
}
.v2ch-form input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--os-line, #e9e9ec);
    border-radius: 10px;
    background: #fff;
    font-size: 14px;              /* ★ 16px 미만이면 iOS 가 확대한다 → 14px 는 의도적으로 두고
                                       아래 모바일 블록에서 16px 로 올린다 */
    color: #111;
    -webkit-appearance: none;
    appearance: none;
}
.v2ch-form input:focus {
    outline: none;
    border-color: #111;
}
.v2ch-form input:disabled { background: #f7f7f8; color: #9a9aa2; }
.v2ch-send {
    flex: 0 0 auto;
    height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.v2ch-send:disabled { opacity: .45; cursor: default; }

.v2ch-login {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    font-size: 12.5px;
    color: var(--os-ink-3, #9a9aa2);
}
.v2ch-login a {
    flex: 0 0 auto;
    height: 34px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    border-radius: 9px;
    background: #111;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
}

.v2ch-err {
    flex: 0 0 auto;
    padding: 0 12px 9px;
    font-size: 12px;
    color: #e0264a;
    line-height: 1.5;
}
.v2ch-err[hidden] { display: none; }

.v2ch-count {
    flex: 0 0 auto;
    padding: 0 12px 8px;
    font-size: 11px;
    color: var(--os-ink-3, #9a9aa2);
    text-align: right;
}

/* 채팅 자체가 꺼졌을 때 */
.v2ch.is-off .v2ch-form,
.v2ch.is-off .v2ch-count { display: none; }
.v2ch-off {
    flex: 0 0 auto;
    padding: 12px;
    border-top: 1px solid var(--os-line, #e9e9ec);
    text-align: center;
    font-size: 12.5px;
    color: var(--os-ink-3, #9a9aa2);
}
.v2ch-off[hidden] { display: none; }

/* ---------------------------------------------------------------- 반응형 */

/* 모바일 — 탭 안에 들어간다. 높이를 과도하게 쓰지 않도록 상한을 둔다. */
@media (max-width: 767px) {
    .v2ch {
        border-radius: 14px;
        /* 화면 높이의 절반 정도. dvh 로 iOS 주소창 변화를 흡수하고,
           --os-kb(키보드가 가린 높이)만큼 더 줄여 입력창이 항상 보이게 한다. */
        height: min(52vh, 460px);
        height: min(calc(52dvh - var(--os-kb, 0px)), 460px);
        min-height: 240px;
    }
    .v2ch-form input[type="text"] { font-size: 16px; }   /* iOS 자동 확대 방지 */
    .v2ch-new { bottom: 70px; }
}

/* 태블릿 2열일 때는 플레이어 높이에 맞춘다(그리드가 stretch) */
@media (min-width: 768px) {
    .v2ch { height: 100%; }
}

/* 모션 최소화 선호 사용자 */
@media (prefers-reduced-motion: reduce) {
    .v2ch-list { scroll-behavior: auto; }
}