/* ═══════════════════════════════════════════════════════════════
   메신저 위젯 토스 스킨 — chat-widget.css 뒤에 로드되는 오버레이 (2026-08-10)
   ⚠️ 구조·버튼·아이콘·동작 변경 금지 (docs/messenger-ui-decisions.md — R-1 등).
   색·표면·라운드만 renewal-tokens 별칭으로 재정의한다. 리터럴 hex 금지(그림자 알파 제외).
   ═══════════════════════════════════════════════════════════════ */
@import url("/css/renewal-tokens.css?v=20260902d");

/* ─ 패널 셸 ─ */
.cw-panel {
  background: var(--rn-card-bg);
  border-left: 1px solid var(--rn-border-soft);
  box-shadow: -8px 0 28px rgba(34, 30, 28, .10);
}

/* ─ 헤더: 진홍 솔리드 → 라이트 표면 ─ */
.cw-header {
  background: var(--rn-card-bg);
  color: var(--rn-text);
  border-bottom: 1px solid var(--rn-border-soft);
}
.cw-title { font-weight: 800; letter-spacing: -.01em; }
.cw-icon-btn { color: var(--rn-text-sub); }
.cw-icon-btn:hover { background: var(--rn-grey); color: var(--rn-text); }

/* ─ 탭 ─ */
.cw-tabs { border-bottom-color: var(--rn-border-soft); }
.cw-tab { color: var(--rn-text-dim); font-weight: 600; }
.cw-tab-active { color: var(--rn-brand); border-bottom-color: var(--rn-brand); font-weight: 800; }

/* ─ 직원·채팅방 목록 ─ */
.cw-item { border-bottom-color: var(--rn-border-faint); }
.cw-item:hover { background: var(--rn-bg-hover); }
.cw-avatar { background: var(--rn-brand-soft); color: var(--rn-brand); font-weight: 800; }
.cw-item-name { color: var(--rn-text); font-weight: 700; }
.cw-item-sub { color: var(--rn-text-dim); }
.cw-item-perm-chip {
  color: var(--rn-brand);
  background: var(--rn-brand-faint);
  border-color: var(--rn-brand-border);
}
.cw-empty { color: var(--rn-text-faint); }

/* ─ 대화 영역 ─ */
.cw-messages { background: var(--rn-bg); }
.cw-msg-meta { color: var(--rn-text-dim); }
.cw-msg-row.cw-other .cw-msg { background: var(--rn-card-bg); border-color: var(--rn-border); }
.cw-msg-row.cw-mine .cw-msg { background: var(--rn-brand); }
.cw-msg-time { color: var(--rn-text-faint); }

/* ─ 입력바 ─ */
.cw-input-bar { border-top-color: var(--rn-border-soft); }
.cw-input { border-color: var(--rn-input-border); border-radius: 12px; }
.cw-input:focus { border-color: var(--rn-brand); box-shadow: 0 0 0 3px rgba(129, 43, 39, .08); }
.cw-send { background: var(--rn-brand); border-radius: 12px; }
.cw-send:hover { background: var(--rn-brand-hover); }
.cw-attach { background: var(--rn-grey); color: var(--rn-grey-text); border-radius: 12px; }
.cw-attach:hover { background: var(--rn-grey-hover); }
.cw-attach:disabled { color: var(--rn-text-faint); }

/* ─ FAB — 브랜드 유지, 호버만 토큰 정렬 ─ */
/* color 재선언 필수: renewal-skin.css bare button:hover 가 아이콘을 --rn-grey-text 로 바꿔
   진홍 배경 위에서 소실됐다 (2026-09-02 재검수 R2) */
.cw-fab:hover { background: var(--rn-brand-hover); color: #fff; }

/* ─ 그룹 만들기 ─ */
.cw-group-title:focus { border-color: var(--rn-brand); }
.cw-group-hint { color: var(--rn-text-dim); }
.cw-check-row:hover { background: var(--rn-bg-hover); }
.cw-check-row input { accent-color: var(--rn-brand); }
.cw-group-create { background: var(--rn-brand); border-radius: 12px; }
.cw-group-create:hover:not(:disabled) { background: var(--rn-brand-hover); }

/* ─ 헤더 ⋮ 메뉴 ─ */
.cw-menu { border: 1px solid var(--rn-border-soft); box-shadow: 0 8px 24px rgba(34, 30, 28, .12); border-radius: 12px; }
.cw-menu-item { color: var(--rn-text); }
.cw-menu-item:hover { background: var(--rn-bg-hover); }

/* ─ 모달 ─ */
.cw-modal { border-radius: 16px; box-shadow: 0 12px 40px rgba(34, 30, 28, .16); }
.cw-modal-title { color: var(--rn-text); font-weight: 800; }
.cw-modal-subtitle, .cw-modal-text { color: var(--rn-text-sub); }
.cw-modal-input, .cw-modal-textarea { border-color: var(--rn-input-border); border-radius: 10px; }
.cw-modal-input:focus, .cw-modal-textarea:focus { border-color: var(--rn-brand); }
.cw-modal-row-name { color: var(--rn-text); }
.cw-modal-row-sub { color: var(--rn-text-dim); }
.cw-modal-row-action { color: var(--rn-grey-text); border-color: var(--rn-border-strong); border-radius: 9px; }
.cw-modal-row-action:hover { background: var(--rn-brand-faint); border-color: var(--rn-brand-border); color: var(--rn-brand); }
.cw-modal-row-action-primary { background: var(--rn-brand); border-color: var(--rn-brand); }
.cw-modal-row-action-primary:hover { background: var(--rn-brand-hover); }
.cw-modal-cancel { color: var(--rn-grey-text); border-color: var(--rn-border-strong); border-radius: 10px; }
.cw-modal-cancel:hover { background: var(--rn-grey); }
.cw-modal-save { background: var(--rn-brand); border-color: var(--rn-brand); border-radius: 10px; }
.cw-modal-save:hover:not(:disabled) { background: var(--rn-brand-hover); }
.cw-modal-secondary { color: var(--rn-brand); border-color: var(--rn-brand-border); border-radius: 10px; }
.cw-modal-secondary:hover { background: var(--rn-brand-faint); }

/* ─ 컨펌 탭 ─ */
.cw-confirms-new { background: var(--rn-brand); border-radius: 10px; }
.cw-confirms-new:hover { background: var(--rn-brand-hover); }
.cw-confirm-section-head:hover { background: var(--rn-bg-hover); }
.cw-confirm-row { border-color: var(--rn-border-soft); border-radius: 12px; }
.cw-confirm-toggle-on { background: var(--rn-brand); }
.cw-confirm-act-approve { background: var(--rn-brand); }
.cw-confirm-act-approve:hover { background: var(--rn-brand-hover); }

/* ─ 공지 배너 — 토큰 대기 톤으로 정렬 ─ */
.cw-announce { background: var(--rn-st-wait-soft); color: var(--rn-st-wait); }
.cw-announce-text { color: var(--rn-text-sub); }
.cw-announce-more { color: var(--rn-st-wait); }

/* ═══ 2026-09-02 5차 F4·5Y-1·5Y-4 — chat-widget.css Material·리터럴 잔존 커버 ═══ */
/* 컨펌 승인 버튼: skin 이 background 만 덮어 초록 보더(#2e7d32)가 링으로 노출됐다 */
.cw-confirm-act-approve { border-color: var(--rn-brand); }
.cw-confirm-act-approve:hover { border-color: var(--rn-brand-hover); }
.cw-confirm-act-reject { background: var(--rn-danger-faint); color: var(--rn-st-unmatched); border-color: var(--rn-danger-border); }
.cw-confirm-act-reject:hover { background: var(--rn-st-unmatched); color: #fff; border-color: var(--rn-st-unmatched); }
.cw-confirm-act-cancel { background: var(--rn-grey); color: var(--rn-grey-text); }
/* 상태 칩 4종: Material 팔레트 → rn 상태 토큰 */
.cw-confirm-status-pending { background: var(--rn-st-wait-soft); color: var(--rn-st-wait); }
.cw-confirm-status-approved { background: var(--rn-st-done-soft); color: var(--rn-st-done); }
.cw-confirm-status-rejected { background: var(--rn-st-unmatched-soft); color: var(--rn-st-unmatched); }
.cw-confirm-status-cancelled { background: var(--rn-grey); color: var(--rn-text-dim); }
.cw-confirm-row-name { color: var(--rn-text); }
.cw-timeline-approved { border-left-color: var(--rn-st-done); }
.cw-timeline-rejected { border-left-color: var(--rn-st-unmatched); }
/* 컨펌 버블: 상대 amber 의도 유지(wait 토큰) · mine 보더 브랜드 오기(#a23b36) 정정 */
.cw-confirm-bubble { border-color: var(--rn-st-wait-border); background: var(--rn-st-wait-soft); }
.cw-msg-row.cw-mine .cw-confirm-bubble { border-color: var(--rn-brand); }
/* 커버리지 갭 묶음(5Y-1): 파일 버블·입력·모달 구분선 */
.cw-file-bubble { border-color: var(--rn-border); color: var(--rn-text); }
.cw-file-bubble:hover { border-color: var(--rn-brand); }
.cw-input, #cw-panel textarea { border-color: var(--rn-input-border); }
.cw-modal-section { border-top-color: var(--rn-border-soft); }
.cw-modal-list { border-color: var(--rn-border-soft); }
/* 모달 베일: rgba(0,0,0,.35) → 웜 백드롭 토큰 (5Y-4) */
.cw-modal-backdrop { background: var(--rn-backdrop); }