/* ══════════════════════════════════════════════════════════════
   v167 — ES 업무용 채팅 (시안 chat.css 원본을 #chatv 로 스코프)
   원본: 사용자 제공 chat.html + chat.css (밀리터리 스킨)
   ══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   ES 업무용 채팅 — chat.css (밀리터리 스킨: 올리브 · 직각 · 단색 아이콘)
   tokens.css, workspace.css 와 같은 폴더에서 사용
   ══════════════════════════════════════════════════════════════ */
#chatv .ct-app { height:100%; display:flex; background:var(--bg, #eef0e6); overflow:hidden; font-size:14px; }
#chatv .ct-app button { font-family:inherit; }

/* ── ① 좌측 레일: 채팅 · 안읽음 모아보기 · 내 멘션 · 저장한 메시지 · 전체 메뉴 · 방해금지 ── */
#chatv .ct-rail { width:56px; flex:none; background:#2a3020; display:flex; flex-direction:column; align-items:center; padding:11px 0; gap:5px; }
#chatv .ct-rail__logo { width:32px; height:32px; background:#4d5434; color:#f2eeda; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; margin-bottom:6px; }
#chatv .ct-rail__btn { position:relative; width:38px; height:38px; border:0; background:none; color:#8e937c; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
#chatv .ct-rail__btn:hover, #chatv .ct-rail__btn.is-on { background:#3f4a2b; color:#f2eeda; }
#chatv .ct-rail__badge { position:absolute; top:2px; right:1px; background:#d97706; color:#fff; font-size:9.5px; font-weight:800; padding:0 4px; line-height:14px; }
#chatv .ct-rail__me { position:relative; width:30px; height:30px; background:#ecead7; color:#4d5434; font-size:11.5px; font-weight:800; display:flex; align-items:center; justify-content:center; }
#chatv .ct-rail__medot { position:absolute; right:-2px; bottom:-2px; width:8px; height:8px; border:2px solid #2a3020; background:#16a34a; }
#chatv .ct-rail__spacer { margin-top:auto; }

/* ── ② 방 목록 패널: 채팅/멤버 탭 · 필터 칩 · 방 검색 · 새 1:1 ── */
#chatv .ct-list { width:292px; flex:none; background:#fff; border-right:1px solid var(--line, #dcd8c0); display:flex; flex-direction:column; min-height:0; }
#chatv .ct-list__head { padding:13px 15px 0; display:flex; align-items:flex-start; gap:2px; }
#chatv .ct-list__tab { padding:2px 8px 9px; border:0; background:none; font-size:14.5px; font-weight:800; letter-spacing:-.3px; cursor:pointer; color:#98a2b3; box-shadow:inset 0 -2px 0 0 transparent; }
#chatv .ct-list__tab.is-on { color:#1c2430; box-shadow:inset 0 -2px 0 0 #5a6636; }
#chatv .ct-list__tools { margin-left:auto; display:flex; gap:3px; }
#chatv .ct-icon { width:28px; height:28px; border:1px solid var(--line, #dcd8c0); background:#fff; font-size:13px; color:#475467; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
#chatv .ct-icon:hover { background:#f6f5ec; }
#chatv .ct-chips { display:flex; gap:4px; padding:9px 13px; flex-wrap:wrap; }
#chatv .ct-chip { padding:4px 10px; border:1px solid var(--line, #dcd8c0); background:#fff; color:#6b7686; font-size:11.5px; font-weight:700; cursor:pointer; }
#chatv .ct-chip.is-on { background:#ecead7; color:#4d5434; border-color:#c9c5a1; }
#chatv .ct-list__search { margin:0 13px 9px; }
#chatv .ct-list__search input { width:100%; border:1px solid #c9c5a1; background:#fff; font:inherit; font-size:12px; padding:6px 9px; outline:none; color:#1c2430; box-sizing:border-box; }
#chatv .ct-rooms { flex:1; overflow-y:auto; min-height:0; padding-bottom:10px; border-top:1px solid #edebdb; }
#chatv .ct-room { display:flex; gap:10px; width:100%; text-align:left; padding:10px 13px; border:0; border-bottom:1px solid #f2f1e4; border-left:3px solid transparent; background:#fff; cursor:pointer; color:#1c2430; }
#chatv .ct-room:hover { background:#f6f5ec; }
#chatv .ct-room.is-on { background:#f5f4e7; border-left-color:#5a6636; }
#chatv .ct-room__av { width:36px; height:36px; flex:none; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; }
#chatv .ct-room__name { font-size:12.5px; font-weight:700; letter-spacing:-.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#chatv .ct-room__meta { font-size:11px; color:#98a2b3; }
#chatv .ct-room__prev { flex:1; min-width:0; font-size:11.5px; color:#6b7686; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#chatv .ct-room__unread { flex:none; background:#5a6636; color:#fff; font-size:10.5px; font-weight:800; padding:1px 6px; font-variant-numeric:tabular-nums; }
/* 멤버 디렉터리 (카카오톡식 모아보기): 내 프로필 / 팀원 / 게스트 / 시스템 그룹 */
#chatv .ct-mem__group { padding:7px 15px 4px; font-size:10.5px; font-weight:800; color:#98a2b3; }
#chatv .ct-mem { display:flex; gap:10px; width:100%; text-align:left; padding:8px 15px; border:0; background:#fff; cursor:pointer; color:#1c2430; align-items:center; }
#chatv .ct-mem:hover { background:#f6f5ec; }
#chatv .ct-mem__av { position:relative; width:36px; height:36px; flex:none; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; }
#chatv .ct-mem__dot { position:absolute; right:-2px; bottom:-2px; width:9px; height:9px; border:2px solid #fff; }

/* ── ③ 대화 영역: 방 헤더 · 공지 · 음성배너 · 대화검색 · 메시지 · 입력기 ── */
#chatv .ct-main { flex:1 1 470px; min-width:440px; display:flex; flex-direction:column; background:#fff; border-right:1px solid var(--line, #dcd8c0); min-height:0; }
#chatv .ct-head { display:flex; align-items:center; gap:10px; padding:10px 15px; border-bottom:1px solid var(--line, #dcd8c0); flex:none; }
#chatv .ct-head__av { width:32px; height:32px; background:#ecead7; color:#4d5434; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; flex:none; }
#chatv .ct-head__members { display:inline-flex; align-items:center; gap:4px; border:1px solid var(--line, #dcd8c0); background:#fff; color:#6b7686; font-size:10.5px; font-weight:800; padding:2px 7px; cursor:pointer; flex:none; }
#chatv .ct-head__members:hover { background:#f6f5ec; color:#1c2430; }
#chatv .ct-head__acts { margin-left:auto; display:flex; gap:3px; flex:none; }
#chatv .ct-head__acts .ct-icon { width:30px; height:30px; }
#chatv .ct-notice { display:flex; align-items:center; gap:9px; padding:7px 15px; background:#fef3e2; border-bottom:1px solid #f2d3ae; flex:none; font-size:11.5px; color:#b4530a; }
#chatv .ct-callbar { display:flex; align-items:center; gap:9px; padding:7px 15px; background:#2a3020; color:#f2eeda; font-size:11.5px; font-weight:700; flex:none; }
#chatv .ct-thsearch { display:flex; align-items:center; gap:8px; padding:7px 15px; background:#f5f4e7; border-bottom:1px solid var(--line, #dcd8c0); flex:none; }
#chatv .ct-thsearch input { flex:1; min-width:0; border:1px solid #c9c5a1; background:#fff; font:inherit; font-size:12px; padding:5px 9px; outline:none; }
#chatv .ct-thread { flex:1; overflow-y:auto; min-height:0; padding:15px 15px 8px; display:flex; flex-direction:column; gap:13px; background:#fbfaf2; }
#chatv .ct-day { display:flex; align-items:center; gap:10px; }
#chatv .ct-day::before, #chatv .ct-day::after { content:''; height:1px; flex:1; background:#e8e5d1; }
#chatv .ct-day span { font-size:11px; color:#98a2b3; font-weight:700; }
#chatv .ct-msg { display:flex; gap:9px; align-items:flex-start; transition:background .5s; }
#chatv .ct-msg.is-mine { flex-direction:row-reverse; }
#chatv .ct-msg.is-hl { background:#eae8d5; }
#chatv .ct-msg__av { width:32px; height:32px; flex:none; font-size:11.5px; font-weight:800; display:flex; align-items:center; justify-content:center; }
#chatv .ct-msg__body { min-width:0; max-width:620px; display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
#chatv .ct-msg.is-mine .ct-msg__body { align-items:flex-end; }
#chatv .ct-msg__who { font-size:12px; font-weight:700; }
#chatv .ct-msg__who small { font-size:10.5px; color:#98a2b3; font-weight:500; }
#chatv .ct-msg__row { display:flex; align-items:flex-end; gap:7px; }
#chatv .ct-msg.is-mine .ct-msg__row { flex-direction:row-reverse; }
#chatv .ct-bubble { background:#fff; color:#1c2430; border:1px solid var(--line, #dcd8c0); padding:8px 12px; font-size:13px; line-height:1.6; text-wrap:pretty; }
#chatv .ct-msg.is-mine .ct-bubble { background:#4d5434; color:#f2eeda; border-color:#4d5434; }
#chatv .ct-msg__at { font-size:10.5px; color:#98a2b3; white-space:nowrap; flex:none; }
#chatv .ct-sys { font-size:11px; color:#6b7686; background:#f0efe2; border:1px solid #e8e5d1; padding:5px 12px; text-align:center; text-wrap:pretty; margin:0 auto; }
/* 상품코드 칩 — hover 요약 팝업 · 클릭 상세 */
#chatv .ct-codechip { display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border:1px solid #c9c5a1; background:#ecead7; font-size:12px; font-weight:800; color:#4d5434; cursor:pointer; }
#chatv .ct-codechip:hover { background:#e2dfc4; border-color:#5a6636; }
/* 첨부 카드 · 시스템 연동 카드 · 요청 카드 */
#chatv .ct-card { width:340px; max-width:100%; border:1px solid var(--line, #dcd8c0); background:#fff; }
#chatv .ct-card__acts { display:flex; border-top:1px solid #edebdb; }
#chatv .ct-card__act { flex:1; padding:8px 6px; border:0; border-right:1px solid #edebdb; background:#fff; font-size:11.5px; font-weight:700; color:#4d5434; cursor:pointer; }
#chatv .ct-card__act:hover { background:#f5f4e7; }
#chatv .ct-stock { width:400px; max-width:100%; border:1px solid #c9c5a1; background:#f5f4e7; }
#chatv .ct-req { width:410px; max-width:100%; border:1px solid #c9c5a1; background:#fff; }
#chatv .ct-req__head { display:flex; align-items:center; gap:8px; padding:9px 12px; background:#f5f4e7; border-bottom:1px solid #c9c5a1; font-size:12px; font-weight:800; color:#4d5434; }
#chatv .ct-req__tag { margin-left:auto; font-size:10px; font-weight:800; padding:2px 7px; background:#fef3e2; color:#b4530a; white-space:nowrap; }
#chatv .ct-req__tag.is-done { background:#e7f6ec; color:#15803d; }
#chatv .ct-req__row { display:flex; align-items:center; gap:8px; font-size:11.5px; padding:0 12px; }
#chatv .ct-req__row b { flex:none; width:84px; color:#98a2b3; font-weight:700; white-space:nowrap; }
#chatv .ct-reacts button { padding:2px 8px; border:1px solid #c9c5a1; background:#ecead7; font-size:11.5px; font-weight:700; color:#4d5434; cursor:pointer; }
/* 입력기: 자동완성 · 코드/송장 미리보기 · 슬래시 명령 · 첨부 대기 */
#chatv .ct-composer { flex:none; padding:9px 15px 13px; background:#fff; border-top:1px solid var(--line, #dcd8c0); }
#chatv .ct-composer__box { border:1.5px solid var(--line, #dcd8c0); background:#fff; padding:8px 11px; }
#chatv .ct-composer__box.is-focus { border-color:#5a6636; }
#chatv .ct-composer__box input { width:100%; border:0; outline:none; font:inherit; font-size:13px; padding:3px 1px; background:none; }
#chatv .ct-composer__acts { display:flex; align-items:center; gap:3px; margin-top:6px; flex-wrap:wrap; }
#chatv .ct-composer__acts .ct-icon { width:30px; height:30px; border-color:#e8e5d1; color:#6b7686; font-size:14px; }
#chatv .ct-send { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; padding:7px 15px; border:1px solid var(--line, #dcd8c0); background:#f6f5ec; color:#98a2b3; font-size:12.5px; font-weight:800; cursor:default; }
#chatv .ct-send.is-ready { border-color:#4d5434; background:#5a6636; color:#f2eeda; cursor:pointer; }
#chatv .ct-preview { border:1px solid #c9c5a1; background:#f5f4e7; margin-bottom:8px; }
#chatv .ct-preview__head { display:flex; align-items:center; gap:7px; padding:7px 11px; border-bottom:1px solid var(--line, #dcd8c0); font-size:11.5px; font-weight:800; color:#4d5434; }
#chatv .ct-preview__body { display:flex; align-items:center; gap:10px; padding:9px 11px; background:#fff; }
#chatv .ct-preview.is-wb { border-color:#efd4a5; background:#fef3e2; }
#chatv .ct-preview.is-wb .ct-preview__head { border-bottom-color:#efd4a5; color:#b4530a; }
#chatv .ct-suggest { border:1px solid var(--line, #dcd8c0); background:#fff; margin-bottom:8px; box-shadow:0 14px 34px rgba(16,24,40,.13); }
#chatv .ct-suggest__row { display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:8px 11px; border:0; border-bottom:1px solid #f2f1e4; background:#fff; cursor:pointer; color:#1c2430; }
#chatv .ct-suggest__row:hover { background:#f5f4e7; }
#chatv .ct-slash { margin-top:8px; border:1px solid var(--line, #dcd8c0); background:#fff; box-shadow:0 14px 34px rgba(16,24,40,.14); padding:5px; }
#chatv .ct-slash__row { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:8px 10px; border:0; background:none; cursor:pointer; color:#1c2430; }
#chatv .ct-slash__row:hover { background:#f5f4e7; }

/* ── ④ 우측 패널: 드래그 정렬 탭 (송장 · 코드 · 파일 · 참여 · 태스크) ── */
#chatv .ct-side { width:312px; flex:none; background:#fff; display:flex; flex-direction:column; min-height:0; }
#chatv .ct-side__tabs { display:flex; gap:2px; padding:9px 11px 0; border-bottom:1px solid var(--line, #dcd8c0); flex:none; }
#chatv .ct-side__tab { flex:1; padding:8px 2px 9px; border:0; background:none; font-size:11px; font-weight:800; cursor:grab; white-space:nowrap; color:#6b7686; box-shadow:inset 0 -2px 0 0 transparent; }
#chatv .ct-side__tab.is-on { color:#1c2430; box-shadow:inset 0 -2px 0 0 #5a6636; }
#chatv .ct-side__tab.is-over { box-shadow:inset 0 -2px 0 0 #d97706; }
#chatv .ct-side__tab.is-drag { opacity:.35; }
#chatv .ct-side__body { flex:1; overflow-y:auto; min-height:0; padding:13px 13px 20px; display:flex; flex-direction:column; gap:12px; }
#chatv .ct-side__hint { font-size:10.5px; color:#98a2b3; line-height:1.5; }
#chatv .ct-group__head { display:flex; align-items:center; gap:6px; margin-bottom:6px; padding:5px 8px; background:#f0efe2; border:1px solid #e8e5d1; font-size:11px; font-weight:700; color:#4d5434; }
#chatv .ct-item { display:flex; gap:9px; align-items:center; padding:8px 9px; border:1px solid #e8e5d1; background:#fff; }
#chatv .ct-item__jump { flex:1; min-width:0; display:flex; gap:9px; align-items:center; border:0; background:none; padding:0; cursor:pointer; text-align:left; color:#1c2430; font:inherit; }
#chatv .ct-item__thumb { width:34px; height:34px; flex:none; background:#f6f5ec; border:1px solid #e8e5d1; font-size:9.5px; color:#98a2b3; display:flex; align-items:center; justify-content:center; }
#chatv .ct-item__at { font-size:10px; color:#4d5434; font-weight:800; background:#ecead7; padding:1px 5px; }
#chatv .ct-item__info { flex:none; width:24px; height:24px; border:1px solid var(--line, #dcd8c0); background:#fff; color:#4d5434; font-size:11px; cursor:pointer; }
#chatv .ct-item__info:hover { background:#f5f4e7; }
/* 파일 탭: 규칙 기반 폴더 분류 + 전체(날짜순) 보기 */
#chatv .ct-folder { border:1px solid #e8e5d1; background:#fff; }
#chatv .ct-folder__head { display:flex; align-items:center; gap:2px; background:#f6f5ec; border-bottom:1px solid #e8e5d1; }
#chatv .ct-folder__toggle { flex:1; min-width:0; display:flex; align-items:center; gap:7px; border:0; background:none; padding:7px 9px; cursor:pointer; text-align:left; color:#1c2430; font:inherit; font-size:11.5px; font-weight:700; }
#chatv .ct-file { display:flex; gap:8px; align-items:center; width:100%; padding:7px 9px; border:0; border-bottom:1px solid #f2f1e4; background:#fff; cursor:pointer; text-align:left; color:#1c2430; font:inherit; }
#chatv .ct-file:hover { background:#f5f4e7; }
/* 태스크 탭: 등록 → 채팅 알림 · ▲▼ 우선순위 · 날짜 표시 */
#chatv .ct-task { display:flex; gap:9px; align-items:flex-start; padding:9px 10px; border:1px solid #e8e5d1; background:#fff; }
#chatv .ct-task__check { width:16px; height:16px; flex:none; margin-top:1px; border:1.5px solid #cbd5e1; background:#fff; color:#fff; font-size:10.5px; font-weight:900; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
#chatv .ct-task__check.is-on { border-color:#5a6636; background:#5a6636; }
#chatv .ct-task__mv { width:20px; height:18px; border:1px solid #e8e5d1; background:#fff; color:#475467; font-size:9px; cursor:pointer; padding:0; }
#chatv .ct-task__mv:disabled { color:#dcd8c0; cursor:default; }

/* ── ⑤ 모달: 코드 상세 / 송장 상세 / 이동등록 · 팝오버 · 토스트 ── */
#chatv .ct-overlay { position:fixed; inset:0; z-index:430; background:rgba(16,24,40,.45); display:flex; align-items:center; justify-content:center; padding:24px; }
#chatv .ct-modal { width:640px; max-width:100%; max-height:100%; overflow:auto; background:#fff; border:1px solid var(--line, #dcd8c0); box-shadow:0 18px 40px rgba(16,24,40,.28); }
#chatv .ct-modal__head { display:flex; align-items:center; gap:9px; padding:12px 15px; background:#2a3020; color:#f2eeda; }
#chatv .ct-modal__head .ct-icon { border-color:#4d5434; background:none; color:#b9bda6; }
#chatv .ct-modal__head .ct-icon:hover { background:#3f4a2b; color:#f2eeda; }
#chatv .ct-modal table { width:100%; border-collapse:collapse; }
#chatv .ct-modal th { text-align:left; font-size:10.5px; font-weight:800; color:#6b7686; background:#f6f5ec; border:1px solid #e8e5d1; padding:6px 8px; white-space:nowrap; }
#chatv .ct-modal td { font-size:11.5px; border:1px solid #edebdb; padding:6px 8px; color:#33415c; }
#chatv .ct-pop { position:fixed; z-index:428; border:1px solid var(--line, #dcd8c0); background:#fff; box-shadow:0 18px 40px rgba(16,24,40,.2); }
#chatv .ct-pop__head { font-size:10.5px; font-weight:800; color:#98a2b3; padding:8px 11px; border-bottom:1px solid #edebdb; }
#chatv .ct-pop__row { display:block; width:100%; text-align:left; padding:8px 11px; border:0; border-bottom:1px solid #f2f1e4; background:#fff; font:inherit; font-size:12px; font-weight:700; color:#33415c; cursor:pointer; }
#chatv .ct-pop__row:hover { background:#f5f4e7; }
#chatv .ct-toast { position:fixed; right:20px; bottom:20px; z-index:445; padding:11px 15px; background:#2a3020; color:#f2eeda; font-size:12.5px; font-weight:700; box-shadow:0 14px 34px rgba(16,24,40,.3); }
@keyframes ct-pop-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
#chatv .ct-anim { animation:ct-pop-in .12s ease-out; }


/* ── 통합 셸 아래에 꽉 차게 ── */
#chatv { display:block; }
#chatv .ct-app { min-height:420px; }
#chatv .ct-msg__body { max-width:min(620px, 78%); }
#chatv .ct-bubble { white-space:pre-wrap; word-break:break-word; }
#chatv .ct-room__av, #chatv .ct-mem__av, #chatv .ct-msg__av, #chatv .ct-head__av { border-radius:0; }
#chatv .ct-save { border:0; background:none; cursor:pointer; font-size:11px; color:#c9c5a1; padding:0 2px; }
#chatv .ct-save.is-on { color:#d97706; }
#chatv .ct-msg:hover .ct-save { color:#98a2b3; }
#chatv .ct-msg:hover .ct-save.is-on { color:#d97706; }
@media (max-width: 1100px) { #chatv .ct-side { display:none; } }
@media (max-width: 860px) { #chatv .ct-list { width:230px; } #chatv .ct-main { min-width:320px; } }

/* ==================== v178 — 채팅 «보조창» 모드 (팝업 차단 시 폴백) ==================== */
#ctvBackdrop { position: fixed; inset: 0; background: rgba(16, 24, 40, .22); z-index: 88;
  pointer-events: none; }
#chatv.is-win {
  position: fixed; left: 50%; top: 54%; transform: translate(-50%, -50%);
  width: min(1240px, 95vw); height: min(800px, 86vh) !important;
  z-index: 89; display: flex; flex-direction: column;
  background: #fff; border: 1px solid #cfcbb0; border-radius: 13px; overflow: hidden;
  box-shadow: 0 28px 72px rgba(16, 24, 40, .30);
}
#chatv.is-win .ct-app { flex: 1; min-height: 0; height: auto !important; }
.ct-winbar { flex: none; display: flex; align-items: center; gap: 9px; padding: 8px 13px;
  border-bottom: 1px solid #e8e5d1; background: #fbfaf2; font-size: 12.5px; font-weight: 800; color: #3a4030; }
.ct-winbar__hint { font-size: 11px; font-weight: 500; color: #98a08a; }
.ct-winbtn { border: 1px solid #dcd8c0; background: #fff; border-radius: 8px; padding: 4px 10px;
  font: inherit; font-size: 11.5px; font-weight: 700; color: #4f5644; cursor: pointer; white-space: nowrap; }
.ct-winbtn:hover { border-color: #c9c5a1; background: #f6f5ec; }
@media (max-width: 900px) {
  #chatv.is-win { width: 100vw; height: 100% !important; left: 0; top: 0; transform: none; border-radius: 0; border: 0; }
}