/* ============================================================
   ROY 실시간 채팅 — 격리 스타일 (prefix: roy-chat-)
   기존 사이트 CSS와 충돌하지 않도록 모든 선택자에 prefix 사용
   ============================================================ */

/* 런처(우측하단 떠 있는 버튼) — 모달이 닫혀있을 때만 표시 */
.roy-chat-launcher{
    position: fixed; right: 24px; bottom: 24px;
    width: 60px; height: 60px; border-radius: 50%;
    background:#B97E54; color:#fff;
    display:none; align-items:center; justify-content:center;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    cursor:pointer; z-index: 99998;
    border:none;
}
.roy-chat-launcher svg{ width:28px; height:28px; }
.roy-chat-launcher .roy-chat-badge{
    position:absolute; top:-4px; right:-4px;
    background:#e74c3c; color:#fff; font-size:11px;
    min-width:20px; height:20px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    padding:0 6px; font-weight:bold;
}

/* 모달 본체 */
.roy-chat-modal{
    position: fixed; right: 24px; bottom: 24px;
    width: 360px; height: 520px;
    background:#fff; border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,.25);
    display:none; flex-direction:column;
    z-index: 99999; overflow:hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", sans-serif;
    font-size:14px; color:#222;
}
.roy-chat-modal.is-open{ display:flex; }

.roy-chat-header{
    background:#B97E54; color:#fff;
    padding: 14px 16px;
    display:flex; align-items:center; justify-content:space-between;
    flex-shrink:0;
}
.roy-chat-header h3{
    margin:0; padding:0; font-size:15px; font-weight:600; color:#fff;
    line-height:1.2;
}
.roy-chat-header .roy-chat-sub{
    font-size:11px; opacity:.8; display:block; margin-top:3px;
}
.roy-chat-close{
    background:transparent; border:none; color:#fff;
    font-size:22px; line-height:1; cursor:pointer; padding:0 4px;
}

/* 비로그인 이름 입력 폼 */
.roy-chat-name{
    padding: 30px 20px; flex:1;
    display:flex; flex-direction:column; justify-content:center;
}
.roy-chat-name p{ margin: 0 0 12px; color:#555; line-height:1.5; font-size:13px; }
.roy-chat-name input{
    width:100%; padding:10px 12px; border:1px solid #ccc;
    border-radius:6px; font-size:14px; box-sizing:border-box;
    margin-bottom:10px;
}
.roy-chat-name button{
    width:100%; padding:11px; background:#B97E54; color:#fff;
    border:none; border-radius:6px; font-size:14px; cursor:pointer;
}

/* 메시지 영역 */
.roy-chat-body{
    flex:1; overflow-y:auto; padding: 14px;
    background:#f5f7fb;
    display:flex; flex-direction:column; gap:8px;
}
.roy-chat-empty{
    text-align:center; color:#aaa; font-size:13px;
    padding: 40px 10px;
}
.roy-chat-msg{
    max-width: 78%; padding:8px 12px; border-radius:14px;
    word-break:break-word; white-space:pre-wrap; line-height:1.45;
    font-size:13.5px;
}
.roy-chat-msg.from-user{
    align-self:flex-end; background:#B97E54; color:#fff;
    border-bottom-right-radius:4px;
}
.roy-chat-msg.from-admin{
    align-self:flex-start; background:#fff; color:#222;
    border-bottom-left-radius:4px;
    box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.roy-chat-time{
    font-size:10px; color:#999; margin: 2px 6px;
}
.roy-chat-time.from-user{ align-self:flex-end; }
.roy-chat-time.from-admin{ align-self:flex-start; }

/* 입력 영역 */
.roy-chat-input{
    border-top:1px solid #eee; padding:10px;
    display:flex; gap:8px; background:#fff; flex-shrink:0;
}
.roy-chat-input textarea{
    flex:1; resize:none; border:1px solid #ddd; border-radius:8px;
    padding:8px 10px; font-size:13.5px; height:38px; line-height:1.4;
    font-family:inherit; box-sizing:border-box;
}
.roy-chat-input button{
    background:#B97E54; color:#fff; border:none; border-radius:8px;
    padding: 0 16px; cursor:pointer; font-size:13px; font-weight:600;
}
.roy-chat-input button:disabled{ background:#bbb; cursor:not-allowed; }

/* 모바일 대응 */
@media (max-width: 480px){
    .roy-chat-modal{
        right: 0; bottom: 0; width: 100%; height: 100%;
        border-radius: 0;
    }
    .roy-chat-launcher{ right:16px; bottom:16px; }
}