/* ════════════════════════════════════════
   All-line Office — 채팅 보강 서식 — public/css/office-chat2.css (2026-10-04)
   office.css 가 300줄에 닿아 새 파일로 나눔(파일 300줄 규칙). office.css 다음에 불러온다.
   · 이름 옆 「부서 · 직급」(가는 회색 글씨) · 시작 화면 · 채팅 검색 / 대화 검색 · 전달 창 「함께 보낼 내용」
   색: CI Denim #2F557F · Ming #3E8391 · Campfire #E36520
════════════════════════════════════════ */

/* ── 이름 옆 부서·직급 ── */
.oc-sub { font-weight: 300; color: #8a95a3; font-size: 11.5px; margin-left: 5px; white-space: nowrap; }
.oc-chat-title .oc-sub { font-size: 12.5px; }
.oc-room-name .oc-sub { margin-left: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; flex-shrink: 2; }
.oc-room-nm { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.oc-room-name .oc-type { flex-shrink: 0; }
.oc-room-name mark, .oc-room-name .oc-sub mark { background: #FFE1B0; color: inherit; padding: 0 1px; border-radius: 2px; }

/* ── 방을 열지 않은 상태: 참여자 칸 숨김 ── */
.oc-layout.oc-no-room .oc-members { display: none; }
.oc-layout.oc-no-room .oc-chat-head:empty { display: none; }

/* ── 시작 화면 ── */
.oc-start { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px 16px; box-sizing: border-box; }
.oc-start-art svg { display: block; max-width: 100%; height: auto; }
.oc-start-title { margin: 14px 0 6px; font-size: 20px; font-weight: 700; color: #1f2a37; }
.oc-start-text { margin: 0; color: #6b7684; font-size: 13px; line-height: 1.7; }
.oc-start-btns { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; justify-content: center; }
.oc-start-chips { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; justify-content: center; align-items: center; max-width: 560px; }
.oc-start-chips-t { font-size: 12px; font-weight: 700; color: #5b6776; width: 100%; }
.oc-start-chip { border: 1px solid #dfe5ec; background: #fff; border-radius: 18px; padding: 6px 12px; font-size: 12.5px; color: #1f2a37; cursor: pointer; font-family: inherit; display: inline-flex; gap: 6px; align-items: center; }
.oc-start-chip:hover { background: #eef3f8; }
.oc-start-chip b { color: #E36520; }

/* ── 채팅 검색칸 + 대화 검색 단추 ── */
.oc-search { display: flex; gap: 6px; align-items: stretch; }
.oc-search .oc-search-input { flex: 1; min-width: 0; }
.oc-msg-search-btn { border: 1px solid #cfd7e1; background: #fff; border-radius: 8px; padding: 0 10px; font-size: 12px; color: #2F557F; font-weight: 700; white-space: nowrap; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 4px; }
.oc-msg-search-btn:hover { background: #eef3f8; }

/* ── 대화 검색(가운데 넓은 화면) ── */
.oc-msg-search-icon { color: #2F557F; font-size: 16px; }
.oc-msg-search-form { position: sticky; top: -12px; z-index: 2; background: #fff; display: flex; gap: 6px; align-items: center; padding: 12px 0 10px; margin-top: -12px; border-bottom: 1px solid #edf2f7; }
.oc-msg-search-q { flex: 1; min-width: 0; max-width: 460px; }
.oc-msg-search-hint { font-size: 12.5px; color: #6b7684; padding: 18px 4px; }
.oc-msg-results .oc-search-item { border: 1px solid #dfe5ec; border-radius: 10px; padding: 9px 12px; margin-bottom: 8px; background: #fff; }
.oc-msg-results .oc-search-item:hover { background: #f3f7fb; }
.oc-msg-results .oc-search-body { white-space: normal; line-height: 1.55; font-size: 13px; }
.oc-msg-results .oc-search-head { margin: 12px 2px 8px; }

/* ── 전달 창: 함께 보낼 내용 ── */
.oc-fwd-note { width: 100%; resize: vertical; box-sizing: border-box; min-height: 76px; line-height: 1.6; }   /* main.css .form-textarea 기본 220px 은 창에 너무 크다 */
.oc-fwd-note-count { text-align: right; font-size: 11px; color: #9aa5b1; margin-top: 2px; }

/* ── 「채팅」 탭 안 읽은 메시지 원숫자(2026-10-04) — 한 자리는 동그라미, 두 자리 이상은 좌우로 늘어난다 ── */
.office-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; box-sizing: border-box; font-size: 11px; line-height: 1; }
.office-tab.is-on .office-tab-count { box-shadow: 0 0 0 1.5px #fff; }

/* ── 첨부 + 설명 글을 한 상자로(2026-10-05) — 말풍선과 같은 색·모서리. 파일 카드·사진은 상자 안에 ── */
.oc-files.oc-file-pack { background: #f1f4f8; border-radius: 4px 14px 14px 14px; padding: 6px; }
.oc-msg.is-me .oc-files.oc-file-pack { background: #2F557F; border-radius: 14px 4px 14px 14px; align-items: stretch; }
.oc-file-pack .oc-file-caption { max-width: 260px; padding: 2px 6px 3px; font-size: 13.5px; line-height: 1.55; color: #1f2a37; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.oc-msg.is-me .oc-file-pack .oc-file-caption { color: #fff; }
.oc-msg.oc-flash .oc-file-pack { outline: 3px solid #FFA92D; }
.oc-msg.is-mentioned .oc-file-pack { box-shadow: inset 0 0 0 2px #FFA92D; }

/* 사진 여러 장 — 3장씩 정사각 격자, 설명 글은 위(2026-10-20 사무장 지시) */
.oc-img-grid { display: grid; grid-template-columns: repeat(3, 84px); gap: 4px; }
.oc-img-grid .oc-file-img img { width: 84px; height: 84px; max-width: none; max-height: none; object-fit: cover; border-radius: 6px; }
.oc-file-img { cursor: zoom-in; }

/* 사진 넘겨보기(office-image-viewer.js) */
.oc-iv { position: fixed; inset: 0; z-index: 3000; background: rgba(10, 16, 24, .88); display: flex; align-items: center; justify-content: center; }
.oc-iv-img { max-width: 88vw; max-height: 82vh; object-fit: contain; border-radius: 4px; background: #fff; }
.oc-iv-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: #fff; font-size: 14px; }
.oc-iv-count { font-weight: 700; white-space: nowrap; }
.oc-iv-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
.oc-iv-btn { background: rgba(255, 255, 255, .14); color: #fff; border: 0; border-radius: 6px; padding: 6px 12px; font-size: 13px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.oc-iv-btn:hover { background: rgba(255, 255, 255, .28); }
.oc-iv-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 40px; line-height: 1; cursor: pointer; }
.oc-iv-nav:hover { background: rgba(255, 255, 255, .28); }
.oc-iv-prev { left: 14px; }
.oc-iv-next { right: 14px; }
@media (max-width: 600px) {
  .oc-img-grid { grid-template-columns: repeat(3, 72px); }
  .oc-img-grid .oc-file-img img { width: 72px; height: 72px; }
  .oc-iv-nav { width: 36px; height: 52px; font-size: 30px; }
  .oc-iv-prev { left: 4px; }
  .oc-iv-next { right: 4px; }
}

/* 방 목록 칸 접기·펴기(office-rooms-toggle.js, 2026-10-21) — 접으면 단추만 있는 좁은 띠. 휴대폰(700px 이하)은 원래 한 칸씩이라 쓰지 않는다 */
.oc-rooms-toggle { flex-shrink: 0; width: 32px; border: 1px solid #dfe5ec; background: #fff; color: #5b6776; border-radius: 8px; cursor: pointer; font-size: 12px; }
.oc-rooms-toggle:hover { background: #eef3f8; color: #2F557F; }
@media (min-width: 701px) {
  .oc-layout.oc-rooms-min .oc-rooms { width: 52px; }
  .oc-layout.oc-rooms-min .oc-room-list,
  .oc-layout.oc-rooms-min .oc-search-input,
  .oc-layout.oc-rooms-min .oc-msg-search-btn { display: none; }
  .oc-layout.oc-rooms-min .oc-search { padding: 8px 9px 0; }
  .oc-layout.oc-rooms-min .oc-rooms-toggle { height: 32px; }
  .oc-layout.oc-rooms-min .oc-rooms-toggle i { transform: rotate(180deg); }
}
@media (max-width: 700px) { .oc-rooms-toggle { display: none; } }