/* 메신저: 대화방 목록 | 대화 (휴대폰 폭에서는 한 쪽씩) */
.chat{display:grid;grid-template-columns:300px minmax(0,1fr);margin-top:18px;height:calc(100vh - 150px);min-height:460px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-ctl);overflow:hidden}
.ch-list{display:flex;flex-direction:column;border-right:1px solid var(--line);min-width:0;min-height:0}
.ch-lh{padding:10px;border-bottom:1px solid var(--line)}
.ch-rooms{overflow-y:auto;flex:1;min-height:0}
.ch-room{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;border:0;background:none;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.ch-room:hover{background:var(--surface-2)}
.ch-room.on{background:var(--accent-soft)}
.ch-rm{display:grid;gap:1px;min-width:0}
.ch-rm b{font-size:var(--fs-md);font-weight:600;display:flex;gap:4px;align-items:baseline;min-width:0}
.ch-rm b>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-rm small{color:var(--muted);font-weight:500;font-family:var(--f-mono);font-size:var(--fs-xs)}
.ch-kind{font-size:var(--fs-xs);font-weight:700;padding:0 6px;border-radius:var(--r-xs);background:var(--accent-soft);color:var(--accent)}
.ch-pv{font-size:var(--fs-sm);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-pv mark{background:var(--warn-soft);color:var(--warn);border-radius:var(--r-xs)}
.ch-rs{display:grid;justify-items:end;gap:3px}
.ch-tm{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.ch-un{font-style:normal;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--badge);color:var(--on-solid);font-size:var(--fs-xs);font-weight:700;display:inline-grid;place-items:center}
.ch-av{width:36px;height:36px;border-radius:var(--r-card);background:var(--surface-2);color:var(--muted);display:grid;place-items:center;font-size:var(--fs-sm);font-weight:700;flex:none;letter-spacing:-.02em}
.ch-av.dept{background:var(--accent-soft);color:var(--accent)}
.ch-av.bot{background:var(--warn-soft);font-size:var(--fs-lg)}
.ch-av.sp{visibility:hidden;height:0}

.ch-conv{display:flex;flex-direction:column;min-width:0;min-height:0}
.ch-conv>.empty{margin:auto}
.ch-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.ch-ht{display:grid;min-width:0;flex:1}
.ch-ht b{font-size:var(--fs-lg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-ht span{font-size:var(--fs-xs);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-back{display:none}
.ch-msgs{flex:1;min-height:0;overflow-y:auto;padding:12px 16px 16px;display:flex;flex-direction:column;gap:6px;background:var(--bg)}
.ch-more{align-self:center;margin-bottom:6px}
.ch-day{display:flex;justify-content:center;margin:10px 0 4px}
.ch-day span{font-size:var(--fs-xs);color:var(--muted);background:var(--surface-2);padding:2px 12px;border-radius:var(--r-pill)}
.ch-sys{align-self:center;font-size:var(--fs-xs);color:var(--muted);text-align:center;max-width:80%}
.ch-msg{display:flex;gap:8px;align-items:flex-start;max-width:min(78%,640px)}
.ch-msg.cont{margin-top:-2px}
.ch-msg.mine{align-self:flex-end;flex-direction:row-reverse}
.ch-col{display:grid;gap:3px;min-width:0}
.ch-name{font-size:var(--fs-xs);color:var(--muted);font-weight:600}
.ch-line{display:flex;align-items:flex-end;gap:6px;min-width:0}
.ch-msg.mine .ch-line{flex-direction:row-reverse}
.ch-stack{display:grid;gap:4px;min-width:0}
.ch-msg.mine .ch-stack{justify-items:end}
.ch-bub{padding:8px 12px;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line);font-size:var(--fs-md);line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}
.ch-msg:not(.mine):not(.cont) .ch-bub{border-top-left-radius:4px}
.ch-msg.mine .ch-bub{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.ch-msg.mine:not(.cont) .ch-bub{border-top-right-radius:4px}
.ch-bub a{color:inherit;text-decoration:underline}
.ch-bub.del{color:var(--muted);font-style:italic;background:var(--surface-2)}
.ch-msg.mine .ch-bub.del{background:var(--surface-2);border-color:var(--line);color:var(--muted)}
.ch-men{font-weight:700;color:var(--accent);display:inline-block}
.ch-msg.mine .ch-men{color:inherit;text-decoration:underline}
.ch-men.me{background:var(--warn-soft);color:var(--warn);border-radius:var(--r-xs);padding:0 3px}
.ch-imgs{display:flex;flex-wrap:wrap;gap:4px}
.ch-imgs img{display:block;max-width:240px;max-height:240px;border-radius:var(--r-ctl);border:1px solid var(--line);object-fit:cover}
.ch-stack .files{min-width:240px}
.ch-meta{display:grid;justify-items:start;font-size:var(--fs-xs);color:var(--muted);white-space:nowrap;line-height:1.3}
.ch-msg.mine .ch-meta{justify-items:end}
.ch-cnt{color:var(--star);font-weight:700;font-size:var(--fs-xs)}
.ch-del{border:0;background:none;color:var(--muted);font-size:var(--fs-xs);padding:2px 4px;border-radius:var(--r-xs);opacity:0;white-space:nowrap}
.ch-msg:hover .ch-del,.ch-del:focus-visible,.ch-del.armed{opacity:1}
.ch-del.armed{color:var(--danger);font-weight:700}
.ch-del:hover{background:var(--surface-2)}
.ch-bub.bot{display:grid;gap:2px;text-align:left;white-space:normal;cursor:pointer;background:var(--surface)}
.ch-bub.bot.new{border-color:var(--warn)}
.ch-bub.bot b{font-weight:600}
.ch-bub.bot span{font-size:var(--fs-sm);color:var(--muted)}
.ch-bub.bot small{font-size:var(--fs-xs);color:var(--accent);font-weight:600}
.ch-bub.bot:hover{background:var(--surface-2)}

.ch-comp{border-top:1px solid var(--line);padding:10px 12px;display:grid;gap:6px;background:var(--surface)}
.ch-comp.over{background:var(--accent-soft)}
.ch-row{display:flex;gap:8px;align-items:flex-end}
.ch-ta{flex:1;min-width:0;resize:none;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--bg);line-height:1.5;max-height:160px}
.ch-ta:focus{border-color:var(--accent);outline:none}
.ch-att{font-size:var(--fs-xl);line-height:1;padding:8px 12px}
.ch-pend{display:flex;flex-wrap:wrap;gap:6px}
.ch-pend:empty{display:none}
.ch-pf{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-sm);padding:3px 4px 3px 10px;border-radius:var(--r-pill);background:var(--surface-2)}
.ch-pf.up{color:var(--muted);padding-right:10px}
.ch-pf button{border:0;background:none;color:var(--muted);padding:0 6px;font-size:var(--fs-md)}
.ch-grp{display:grid;gap:14px}

@media (max-width:760px){
  /* 상단 바(56px)·제목줄 아래 남은 화면에 딱 맞춰 입력창이 잘리지 않게. 설명 문구는 숨겨 자리를 아낀다 */
  #view-chat .page-head p{display:none}
  #view-chat .page-head{padding-bottom:0}
  .chat{grid-template-columns:1fr;margin-top:12px;height:calc(100dvh - 56px - 20px - 52px - 12px - 16px - env(safe-area-inset-top,0px));min-height:360px}
  .ch-msgs{overflow-x:hidden}
  .ch-stack .files{min-width:min(200px,52vw);max-width:100%}
  /* 좁은 화면에서는 파일 크기를 빼고 '받기' 버튼을 줄여 파일 이름이 보이게 */
  .ch-stack .file{grid-template-columns:auto minmax(0,1fr) auto;gap:8px}
  .ch-stack .file .fs{display:none}
  .ch-stack .file .btn.sm{padding:4px 8px;font-size:var(--fs-xs)}
  .chat .ch-conv{display:none}
  .chat.conv .ch-list{display:none}
  .chat.conv .ch-conv{display:flex}
  .ch-list{border-right:0}
  .ch-back{display:inline-block}
  .ch-msg{max-width:88%}
  .ch-imgs img{max-width:180px;max-height:180px}
  .ch-del{opacity:1}
}