/* ============================================================
   chatp.css — 업무용 채팅 패널 (v92, 설계 「19 업무용 채팅」 src/chat.css 포팅)
   FAB(#v2fab) → 380×620 패널. 목록(팀원/팀 채널/커뮤니티) → 방 → 대화
   #chatp 범위로 한정해 기존 화면과 충돌하지 않게 함
   ============================================================ */

#chatp {
  /* 디자인 토큰 (tokens.css) */
  --panel: #ffffff; --panel-sub: #fbfaf2; --panel-alt: #f6f5ec;
  --dark: #101828; --dark-sub: #2f3524; --dark-line: #454c2f;
  --line: #dcd8c0; --line-soft: #e8e5d1; --line-faint: #edebdb;
  --text: #1c2430; --text-mid: #3a4030; --sub: #6b7160; --muted: #98a08a;
  --faint: #c6c8b4; --slate: #4f5644;
  --accent: #5a6636; --accent-hover: #4d5434; --accent-fg: #4d5434;
  --accent-bg: #ecead7; --accent-bg-2: #f5f4e7; --accent-line: #c9c5a1;
  --ok: #4d7c2f; --ok-fg: #3f6626; --ok-bg: #e9f0e0; --ok-line: #cbdcb6;
  --warn: #b8860b; --warn-fg: #8f6708; --warn-bg: #faf1dc; --warn-line: #e6d3a3;
  --danger: #a8442a; --danger-fg: #8c3721; --danger-bg: #f7e7e1; --danger-line: #e3c2b6;
  --neutral-bg: #eceade; --r-pill: 99px;
  font-family: inherit; color: var(--text);
}

/* 고객사 계정용 단독 FAB (v2 셸 없이도 표시) */
#v2fab.chatp-solo {
  display: flex; position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 56px; height: 56px; border: 0; border-radius: 99px;
  background: #5a6636; color: #fff; font-size: 22px; cursor: pointer;
  align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(90,102,54, .4);
}
#v2fab.chatp-solo:hover { background: #4d5434; }
#v2fab.chatp-solo .badge {
  position: absolute; top: -4px; right: -4px; background: #a8442a; color: #fff;
  font-size: 11.5px; font-weight: 800; border-radius: 99px; padding: 2px 7px; border: 2px solid #fff;
}

/* 패널 셸 */
#chatp .chat { position: fixed; right: 20px; bottom: 88px; z-index: 95; /* 모달(100)·토스트(300) 아래, FAB(90) 위 */
        width: 380px; height: 620px; max-height: calc(100vh - 120px);
        display: flex; flex-direction: column; background: var(--panel);
        border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
        box-shadow: 0 24px 60px rgba(16, 24, 40, .26); }
#chatp .chat__head { flex: none; display: flex; align-items: center; gap: 9px;
              padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
#chatp .chat__body { flex: 1; min-height: 0; overflow-y: auto; }

/* 패널 내부 버튼 (디자인 .btn) */
#chatp .cbtn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  font: inherit; font-size: 11.5px; font-weight: 600; color: var(--text); cursor: pointer; }
#chatp .cbtn:hover { background: var(--panel-alt); }
#chatp .cbtn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
#chatp .cbtn--primary:hover { background: var(--accent-hover); }
#chatp .cbtn--ico { width: 28px; height: 28px; padding: 0; justify-content: center; }

/* 목록 탭 */
#chatp .chat-tabs { display: flex; gap: 2px; padding: 0 13px; border-bottom: 1px solid var(--line);
             position: sticky; top: 0; background: var(--panel); z-index: 3; }
#chatp .chat-tabs__item { display: inline-flex; align-items: center; gap: 5px;
                   padding: 10px 11px 9px; border: 0; background: none; font: inherit;
                   font-size: 12.5px; font-weight: 600; color: var(--sub); cursor: pointer;
                   white-space: nowrap; box-shadow: inset 0 -2px 0 0 transparent; }
#chatp .chat-tabs__item.is-on { color: var(--text); font-weight: 700; box-shadow: inset 0 -2px 0 0 var(--accent); }
#chatp .chat-tabs__n { font-size: 10.5px; font-weight: 800; border-radius: 5px; padding: 1px 6px;
                background: var(--line-faint); color: var(--muted); }

/* 섹션 헤더 */
#chatp .chat-sec { display: flex; align-items: center; gap: 7px; padding: 10px 13px 6px; }
#chatp .chat-sec__label { font-size: 11.5px; font-weight: 800;  }

/* 방 행 */
#chatp .chat-room { display: flex; gap: 10px; width: 100%; text-align: left; padding: 10px 13px;
             border: 0; border-left: 3px solid transparent; background: var(--panel);
             font: inherit; cursor: grab; color: var(--text); }
#chatp .chat-room:hover { background: var(--panel-alt); }
#chatp .chat-room--com { border-left-color: var(--ok-line); background: #fcfdfc; }
#chatp .chat-room__av { width: 36px; height: 36px; flex: none; border-radius: 12px;
                 font-size: 12.5px; font-weight: 800;
                 display: flex; align-items: center; justify-content: center; }
#chatp .chat-room__av--com { border-radius: var(--r-pill); }
#chatp .chat-room__name { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chatp .chat-room__preview { flex: 1; min-width: 0; font-size: 12.5px; color: var(--sub);
                      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chatp .chat-room__meta { display: block; font-size: 10.5px; color: var(--muted); margin-top: 3px;
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chatp .chat-room__n { flex: none; color: #fff; font-size: 11.5px; font-weight: 800;
                border-radius: var(--r-pill); padding: 1px 7px; font-variant-numeric: tabular-nums; }

/* 팀원 행 */
#chatp .chat-member { display: flex; align-items: center; gap: 8px; padding: 6px 7px;
               border-radius: 9px; background: var(--panel); min-width: 0; }
#chatp .chat-member:hover { background: var(--panel-alt); }
#chatp .chat-member__av { width: 26px; height: 26px; border-radius: 9px; font-size: 11.5px; font-weight: 800;
                   display: flex; align-items: center; justify-content: center; }
#chatp .chat-member__dot { position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px;
                    border-radius: var(--r-pill); border: 2px solid var(--panel); }

/* 커뮤니티 방 상단 밴드 */
#chatp .chat-band { flex: none; padding: 10px 13px; border-bottom: 1px solid var(--line-soft); }
#chatp .chat-band__notice { display: flex; align-items: center; gap: 7px; margin-top: 8px;
                     padding: 7px 10px; border-radius: 9px; background: var(--panel); }

/* 말풍선 */
#chatp .chat-msg { display: flex; gap: 9px; align-items: flex-start; }
#chatp .chat-msg--mine { flex-direction: row-reverse; }
#chatp .chat-msg__av { width: 28px; height: 28px; flex: none; border-radius: 10px;
                font-size: 11.5px; font-weight: 800;
                display: flex; align-items: center; justify-content: center; }
#chatp .chat-bubble { max-width: 250px; padding: 9px 12px; border-radius: 12px;
               font-size: 12.5px; line-height: 1.6; word-break: break-word; white-space: pre-wrap; }
#chatp .chat-bubble--other { background: var(--panel); border: 1px solid var(--line); }
#chatp .chat-bubble--mine  { background: var(--accent); color: #fff; }
#chatp .chat-bubble--sys   { background: var(--dark); color: #e6eaf2; }
#chatp .chat-bubble a { color: inherit; }
#chatp .chat-bubble img.att { max-width: 200px; border-radius: 8px; display: block; cursor: pointer; }

/* 상품코드 카드 */
#chatp .chat-card { display: flex; align-items: center; gap: 9px; margin-top: 7px;
             padding: 9px 10px; border: 1px solid var(--accent-line);
             border-radius: 10px; background: var(--accent-bg-2); min-width: 0;
             cursor: pointer; color: var(--text); white-space: normal; }

/* 봇 카드 */
#chatp .bot-card { display: flex; align-items: center; gap: 9px; padding: 9px 11px;
            border: 1.5px solid var(--line-soft); border-radius: 10px;
            background: var(--panel); font: inherit; cursor: pointer;
            text-align: left; color: var(--text); min-width: 0; width: 100%; }
#chatp .bot-card:hover { border-color: var(--accent); background: var(--accent-bg-2); }
#chatp .bot-card__ico { width: 30px; height: 30px; flex: none; border-radius: 9px; font-size: 13.5px;
                 display: flex; align-items: center; justify-content: center; }

/* 입력창 */
#chatp .chat-input { flex: none; padding: 10px 12px 12px; border-top: 1px solid var(--line-soft);
              display: flex; gap: 7px; align-items: center; }
#chatp .chat-input input[type=text] { flex: 1; min-width: 0; padding: 8px 11px; border: 1.5px solid var(--line);
                    border-radius: 9px; outline: none; font: inherit; font-size: 12.5px; background: var(--panel); color: var(--text); }
#chatp .chat-input input[type=text]:focus { border-color: var(--accent); }
#chatp .chat-input input[type=text]::placeholder { color: var(--faint); }

/* CS 화면 등에서 FAB가 올라가 있으면 패널도 함께 */
body.cs-on #chatp .chat { bottom: 124px; }
@media (max-width: 480px) {
  #chatp .chat { right: 8px; left: 8px; width: auto; }
}