/* ============================================================
   플로팅 채팅 위젯
   디자인: 수완뉴스 커스텀 To Top 버튼(mu-plugins/suwan-settings-modal.php
   의 body.suwan-totop-custom .td-scroll-up)과 동일한 시각 언어 —
   흰 원형 42px + 은은한 그림자 + newspaper 아이콘 폰트 글리프.
   ============================================================ */
/* 1. 래퍼 */
#wprc-float-wrap {
    position: fixed !important;
    bottom: 18px !important;
    left: 18px !important;
    z-index: 999999 !important;
}

/* 2. 메인 버튼 (To Top 커스텀 버튼과 동일 규격) */
#wprc-float-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    color: #444 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s !important;
    cursor: pointer !important;
    display: block !important;
    position: relative !important;
    text-align: center !important;
    line-height: 42px !important;
    outline: none !important;
}

#wprc-float-btn:hover {
    background-color: #f8f8f8 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* 3. 내부 콘텐츠 영역 */
#wprc-float-btn .banner-content {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
}

/* 4. 채팅 아이콘 (테마 newspaper 폰트 — To Top 화살표와 같은 계열) */
#wprc-float-btn .wprc-float-ico {
    /* ⚠️ display 에 !important 를 붙이면 chat-float.js 의 인라인 display:none(모달 열림)이
       무시돼 채팅 글리프와 X 가 겹쳐 보인다. 반드시 non-important 로 둘 것. */
    display: block;
    width: 100% !important;
    height: 42px !important;
    line-height: 42px !important;
    color: #444 !important;
    font-size: 17px !important;
}
#wprc-float-btn .wprc-float-ico::before {
    font-family: 'newspaper' !important;
    content: '\e83b'; /* td-icon-comments */
    font-weight: normal !important;
    font-style: normal !important;
    speak: none;
    -webkit-font-smoothing: antialiased;
}

/* 5. 닫기(X) 아이콘 */
#wprc-float-btn #wprc-float-icon-close {
    width: 16px !important;
    height: 16px !important;
    fill: #444 !important;
    margin: 0 !important;
    background: transparent !important;
    padding: 0 !important;
}

/* 6. 텍스트 영역 (원형 버튼에서는 숨김) */
#wprc-float-btn .banner-text {
    display: none !important;
}

/* 7. 접속 상태 점 (우측 하단) */
#wprc-float-btn .online-status {
    display: none !important;
}

/* ⚠️ 이 요소는 class="online-status mobile-only-status" 라 위의
   `#wprc-float-btn .online-status{display:none}`(0,1,1) 에 눌린다.
   반드시 같은 id 스코프(0,1,1)로 뒤에서 다시 켤 것. */
#wprc-float-btn .mobile-only-status {
    display: none !important;
    position: absolute !important;
    bottom: 2px !important;
    right: 2px !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background-color: #00c853 !important;
    border: 2px solid #ffffff !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
}

/* 접속 중일 때만 초록 점 노출(비접속 시엔 아무 표시도 하지 않는다) */
#wprc-float-btn.wprc-float-online .mobile-only-status {
    display: block !important;
}

/* 8. 미읽 뱃지 */
#wprc-float-badge {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    min-width: 18px !important;
    height: 18px !important;
    box-sizing: border-box !important;
    background: #CB2957 !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 14px !important;
    text-align: center !important;
    padding: 0 4px !important;
    border: 2px solid #ffffff !important;
    z-index: 3 !important;
}


/* 모달 컨테이너 */
#wprc-float-modal {
    width: 380px;
    height: 620px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(0,0,0,0.22);
    background: #fff;
    animation: wprc-float-in 0.22s ease;
    /* 모달 내부가 모바일 UI를 쓰므로 flex 레이아웃 */
    display: flex;
    flex-direction: column;
}
#wprc-float-modal .wprc-is-mobile {
    width: 100% !important;
    height: 100% !important;
    min-height: 0;
}
#wprc-float-modal .wprc-mobile-wrapper {
    height: 100% !important;
    min-height: 0;
}
/* 모달 내부 채팅 메시지 영역 스크롤 보장 */
#wprc-float-modal .wprc-mob-messages-wrap {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

@keyframes wprc-float-in {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* 모바일: 모달이 전체화면 */
@media (max-width: 480px) {
    /* 버튼 위치는 To Top 커스텀 버튼과 동일하게 18px 고정(위 #wprc-float-wrap 규칙) */
    #wprc-float-modal {
        position: fixed;
        top: var(--top-banner-height, 0px);
        bottom: 0; right: 0; left: 0;
        width: 100%;
        height: calc(100dvh - var(--top-banner-height, 0px));
        height: calc(var(--wprc-vh, 100vh) - var(--top-banner-height, 0px));
        border-radius: 0;
    }
}

/* ── 탭 헤더 액션 버튼이 우측 상단 닫기(X)와 겹치는 문제 ──
   X(#wprc-float-close-inner)는 헤더에 position:absolute(right:15px)로 얹혀 있어
   탭 헤더 우측 끝의 액션 버튼 위에 그대로 올라탄다.
   실측(390px): X [350,375] vs 친구 추가 [329,370] → 친구 추가 중앙을 눌러도
   elementFromPoint 가 닫기 버튼을 반환(= 탭하면 창이 닫힘). 새 채팅방 pill 도 동일.
   → 탭 헤더 오른쪽에 X 자리를 비워 [액션 버튼][X] 순서로 나란히 놓는다.
      값은 오른쪽 기준(X 폭 25 + right 15 + 여유)이라 모달 폭이 달라져도 유지된다.
   ⚠️ 이 모달은 #wprc-chat-app 밖이라 chat.css 의 box-sizing:inherit 이 안 걸린다.
      border-box 를 같이 주지 않으면 width:100% + padding 이 넘쳐 버튼이 화면 밖으로 밀린다. */
#wprc-float-modal .wprc-mob-tab-header {
    box-sizing: border-box;
    padding-right: 34px;
}

/* ── 챗봇 답변처럼 긴 메시지가 가로로 좁게 눌려 보이던 문제 ──
   chat.css 의 .wprc-msg{max-width:80%} 는 넓은 풀페이지 [realtime_chat] 기준이라
   380px 모달에서는 과하게 좁다. 실측(380px 모달):
     컨테이너 380 −padding30 → 350 ×80% → 행 280
     −아바타40 −gap10 −시각46 −말풍선padding36 = 본문 폭 148px (줄당 11.2자, 112자가 10줄)
   모달 안에서만 폭을 넓힌다. 풀페이지 채팅(#wprc-chat-app)은 건드리지 않는다.
   적용 후 실측: 본문 222px, 줄당 16자, 7줄 / 우측 여백 24px / 가로 넘침 0 */
#wprc-float-modal .wprc-messages-mobile-container {
    padding: 20px 10px;
}
#wprc-float-modal .wprc-msg {
    max-width: 96%;
}
#wprc-float-modal .wprc-msg-bubble {
    padding: 12px 14px;
}