/* ============================================================
 * corin2 사이드바 커뮤니티 채팅 위젯 스타일
 * 스코프: .cp-side-chat (#cp-side-chat 컨테이너에 JS가 부여)
 * 코린이 변수(--cp-ink/--cp-sub/--cp-line/--cp-panel/--cp-brand) 사용
 * ============================================================ */
.cp-side-chat{display:flex;flex-direction:column;gap:8px}

/* 메시지 목록 */
.cp-side-chat .csc-msgs{height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:5px;padding-right:2px}
.cp-side-chat .csc-msgs::-webkit-scrollbar{width:3px}
.cp-side-chat .csc-msgs::-webkit-scrollbar-thumb{background:var(--cp-line);border-radius:2px}
.cp-side-chat .csc-empty{font-size:12px;color:var(--cp-sub);padding:12px 4px;text-align:center}

/* 개별 메시지: 닉네임(굵게) + 본문 + 상대시각 */
.cp-side-chat .csc-msg{font-size:12px;line-height:1.5;word-break:break-word;color:var(--cp-ink)}
.cp-side-chat .csc-nick{font-weight:700;color:var(--cp-brand);margin-right:5px;font-size:12px}
.cp-side-chat .csc-body{font-size:12px}
.cp-side-chat .csc-time{margin-left:5px;font-size:10px;color:var(--cp-sub);white-space:nowrap}

/* 입력줄 */
.cp-side-chat .csc-bottom{display:flex;gap:6px;flex-shrink:0}
.cp-side-chat .csc-input{flex:1;min-width:0;background:var(--cp-panel);border:1px solid var(--cp-line);border-radius:7px;padding:7px 10px;color:var(--cp-ink);font-size:12px;font-family:inherit;outline:none}
.cp-side-chat .csc-input::placeholder{color:var(--cp-sub)}
.cp-side-chat .csc-input:focus{border-color:var(--cp-brand)}
.cp-side-chat .csc-send{background:var(--cp-brand);color:#fff;border:none;border-radius:7px;padding:0 12px;min-width:44px;height:32px;cursor:pointer;font-size:12px;font-weight:700;font-family:inherit;flex-shrink:0;transition:opacity .15s}
.cp-side-chat .csc-send:hover{opacity:.85}

/* 비로그인 안내 */
.cp-side-chat .csc-guest{width:100%;font-size:12px;color:var(--cp-sub);text-align:center;padding:8px 6px;border:1px dashed var(--cp-line);border-radius:7px}
.cp-side-chat .csc-guest a{color:var(--cp-brand);font-weight:700;text-decoration:none;margin-left:2px}
.cp-side-chat .csc-guest a:hover{text-decoration:underline}

/* 다크 모드 — 변수 기반이라 대부분 자동, 입력창 대비만 보강 */
html.dark .cp-side-chat .csc-input{background:rgba(255,255,255,.04)}
html.dark .cp-side-chat .csc-guest{border-color:var(--cp-line)}