/* [app.css 분할 3/10 · rooms.css] 사내 대화 컬럼 · 미니창 · 팝아웃 · 방 서랍
   2026-08-23 리팩터 — 옛 app.css 를 원본 순서 그대로 10조각으로 나눴다.
   캐스케이드가 곧 계약이라 로드 순서를 바꾸면 안 된다:
   app.css → studio.css → rooms.css → orgwork.css → overlays.css → winmodes.css → plus.css → chrome.css → msgx.css → profile.css
   로드 지점: web/index.html, tests/harness/*.html */
/* ── 사내 대화 고정컬럼 (듀얼 모드) ──────────────────────────
   보스 모션 원칙: "쓸데없이 사치스러워야 사람들이 사용한다" — 자동문 이징 */
/* ── 클립 슬라이드 + FLIP(§4.2) ── 바깥(#coCol)은 overflow:hidden + 즉시 폭 변경
   (width/min-width 는 트랜지션을 아예 선언하지 않는다 — 리플로우 1회, 델타 없음).
   coOpen()의 flipRun()이 mutate() 전후로 #chat rect 를 동기 측정해 보정하므로
   폭은 반드시 클래스 토글과 같은 프레임에 순간적으로 바뀌어야 한다(지연 금지).
   안쪽(.co-inner)은 고정폭(var(--co-w))이라 내부 리플로우 없이 transform 만으로
   미끄러진다 — 열릴 때는 바깥이 먼저 트여 안쪽이 밀고 들어오는 문이 보이고,
   닫힐 때는 바깥이 즉시 접혀 안쪽 트랜지션은 보이지 않지만(overflow:hidden 이라
   0폭에서 클립됨) #chat FLIP 보정이 그 자리의 시각 연속성을 만든다. */
#coCol{--co-w:360px;width:var(--co-w);min-width:var(--co-w);display:flex;position:relative;overflow:hidden;
  background:#fbfaff;border-left:1px solid var(--line);   /* 불투명 — 뷰 전환 시 움직이는 표면 (§1.5) */
  transition:opacity var(--motion-dur-pop) var(--motion-ease-out)}   /* 뷰 전환 스테이징(§4.4) */
#coCol.closed{width:0;min-width:0;border-left:0}
#coDrag{position:absolute;left:-3px;top:0;bottom:0;width:7px;cursor:col-resize;z-index:5}
#coDrag:hover{background:linear-gradient(90deg,#0000,rgba(var(--accent-rgb),.18),#0000)}
.co-inner{width:var(--co-w);flex:none;display:flex;flex-direction:column;min-width:0;
  transform:translate3d(0,0,0);visibility:visible;
  transition:transform var(--motion-dur-panel) var(--motion-ease-out),visibility 0s}
/* 닫혀도 visibility 유지 — 열기 첫 프레임 전체 재페인트 멈춤 방지 (gw.css 참조) */
#coCol.closed .co-inner{transform:translate3d(100%,0,0);
  transition:transform var(--motion-dur-exit-panel) var(--motion-ease-in)}
.co-head{display:flex;align-items:center;gap:6px;padding:12px 12px 8px;font-size:13.5px;font-weight:600;color:#3c4160}
.co-banner{margin:0 12px 8px;padding:7px 11px;border-radius:10px;background:#fff7dd;border:1px solid #f0e2b0;
  color:#8a7332;font-size:11px;line-height:1.5}
.co-body{flex:1;overflow-y:auto;padding:4px 10px 12px;display:flex;flex-direction:column}
/* width:100% 필수 — button 은 기본이 shrink-to-fit 이라 이게 없으면 행 폭이
   마지막 메시지 길이에 따라 제각각이 되고, 우측 시각(.r-side time)이 행마다
   다른 x 에 찍힌다(짧은 방 188px / 긴 방 537px, 컨테이너 360px 를 넘어 짤림 —
   2026-08-02 보스 리포트). 같은 규격인 .org-mem 은 처음부터 width:100% 였다. */
.co-room-it{display:flex;align-items:center;gap:10px;padding:9px 10px;border:0;border-radius:11px;
  width:100%;background:0 0;text-align:left;
  transition:background var(--motion-dur-micro) var(--motion-ease-out),
             transform var(--motion-dur-micro) var(--motion-ease-out)}
.co-room-it:hover{background:var(--hover);transform:translateY(-1px)}
.co-room-it .r-ava,.cm-head .r-ava,.co-dock-it .r-ava{width:34px;height:34px;border-radius:50%;background:linear-gradient(145deg,#222a49,#0c1127);
  color:#fff;font-size:11px;display:grid;place-items:center;flex:none}
.co-room-it .r-body{flex:1;min-width:0}
.co-room-it .r-name{font-size:13px;font-weight:600;color:#2f3450}
.co-room-it .r-name small{font-weight:400;color:#9298a8;margin-left:5px}
.co-room-it .r-last{font-size:11.5px;color:#9298a8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.co-room-it .r-side{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none;align-self:stretch;
  justify-content:center}
.co-room-it .r-side time{font-size:10px;color:#9298a8;line-height:1}
.co-room-it.has-un .r-last{color:#2f3450;font-weight:600}
.co-room-it.has-un .r-side time{color:var(--accent)}
.co-empty{color:#a2a5b1;text-align:center;margin-top:36px;font-size:12px;line-height:1.8}
.co-peers-head{padding:12px 8px 4px;font-size:11px;font-weight:600;letter-spacing:.06em;color:#7d8296}
/* overflow-x hidden: hover 액션 바(.co-acts)가 말풍선 옆에 뜨는데, 예약 폭 계산이
   어긋나는 예외 상황에서도 가로 스크롤바가 생기지 않게 하는 안전망(§5.5). */
.co-msgs{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:8px;padding:6px 4px}
/* max-width 92px 예약: 카톡처럼 말풍선 옆에 액션 버튼 3개(24px×3+간격)가 항상
   들어갈 자리 — 좁은 미니창(300px)에서도 버튼이 잘리지 않는다. */
.co-msg{max-width:min(82%,calc(100% - 92px));padding:8px 12px;border-radius:14px;font-size:13px;line-height:1.55;
  white-space:pre-wrap;word-break:break-word;animation:var(--motion-dur-panel) var(--motion-ease-out) both login-in}
.co-msg.me{align-self:flex-end;background:var(--accent-grad);color:#fff;border-bottom-right-radius:5px}
.co-msg.peer{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px}
.co-msg time{display:block;font-size:9.5px;opacity:.6;margin-top:3px}
/* hover 액션 바(카톡식): 답장 · 공감 · 아호비 전달 (2026-08-02 보스 지시)
   카톡처럼 말풍선 **옆**에 세로 중앙으로 뜬다(peer=오른쪽, me=왼쪽). 그 자리를
   항상 쓸 수 있게 말풍선 최대폭이 옆 공간(92px)을 예약한다(아래 .co-msg max-width).
   아이콘은 글자가 아니라 mask(.co-emo 와 같은 단일 출처 기법) — 웹뷰 폰트 폴백에
   기대지 않아 깨지지 않는다. '아호비 전달'은 .msg-ai-fwd class 유지(ctxmenu.js 재사용). */
.co-msg{position:relative}
.co-acts{position:absolute;top:50%;transform:translateY(-50%);display:none;gap:4px;z-index:2}
.co-msg.peer .co-acts{left:calc(100% + 6px)}
.co-msg.me .co-acts{right:calc(100% + 6px)}
.co-msg:hover .co-acts{display:inline-flex}
.co-acts .ma-btn{width:24px;height:24px;flex:none;border:1px solid var(--line);border-radius:50%;
  background:var(--card);color:#666b7e;padding:0;cursor:pointer;box-shadow:0 3px 8px #27225d1a;
  display:flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:700;line-height:1}
.co-acts .ma-btn:hover{background:var(--hover);color:var(--accent-deep)}
.co-acts .ma-reply{--reply-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5v6a4 4 0 0 0 4 4h9'/%3E%3Cpath d='m14 10.5 4.5 4.5-4.5 4.5'/%3E%3C/svg%3E")}
.co-acts .ma-reply::after{content:'';width:14px;height:14px;background:currentColor;
  -webkit-mask:var(--reply-ico) center/contain no-repeat;mask:var(--reply-ico) center/contain no-repeat}
.co-acts .ma-react{--emo-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.6 14.2c.85 1.25 2 1.9 3.4 1.9s2.55-.65 3.4-1.9M9 9.6v.1M15 9.6v.1'/%3E%3C/svg%3E")}
.co-acts .ma-react::after{content:'';width:15px;height:15px;background:currentColor;
  -webkit-mask:var(--emo-ico) center/contain no-repeat;mask:var(--emo-ico) center/contain no-repeat}
.co-input{display:grid;grid-template-columns:1fr 38px;gap:6px;padding:8px 2px 28px}
/* 하단 28px: co-body 하단 12px 와 합쳐 40px — 메인 입력란(패딩 18+힌트 22)과 바닥 정렬 */
/* min-width:0 — 그리드 1fr 칸의 input 은 기본 최소폭(min-content)이 있어 창을
   좁히면 자기가 안 줄고 전송 버튼을 밖으로 밀어낸다(2026-07-27 보스 리포트) */
.co-input input{border:1px solid var(--line);border-radius:12px;padding:9px 12px;font-size:13px;outline:0;background:#fff;min-width:0}
.co-input input:focus{border-color:rgba(var(--accent-rgb),.35)}
.co-input button{border:0;border-radius:11px;color:#fff;background:var(--accent-grad);font-size:14px}
.co-room-it.is-open .r-name::after{content:"열림";font-size:9.5px;font-weight:600;color:var(--accent);
  background:var(--accent-soft);border-radius:6px;padding:1px 5px;margin-left:6px;vertical-align:1px}

/* ── 카톡식 플로팅 미니창 — 방 하나 = 창 하나, 드래그·최소화 ── */
.co-mini{position:fixed;width:300px;height:380px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;box-shadow:0 18px 50px -12px #34306226,0 4px 14px -6px #34306222;
  display:flex;flex-direction:column;overflow:hidden;z-index:80;
  animation:var(--motion-dur-panel) var(--motion-ease-out) both login-in}
.co-mini.is-front{box-shadow:0 24px 60px -10px #34306240,0 0 0 2px var(--accent-soft)}
.cm-head{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line);
  background:#faf9fe;cursor:grab;user-select:none;touch-action:none}
.cm-head:active{cursor:grabbing}
.cm-head .r-ava{width:26px;height:26px;font-size:9.5px}
.cm-title{flex:1;min-width:0;font-size:13px;font-weight:700;color:#2f3450;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-title small{font-weight:400;color:#9298a8;margin-left:5px;font-size:11px}
.cm-msgs{padding:10px}
.co-input.cm-input{padding:8px;border-top:1px solid var(--line);background:#faf9fe}
/* 크기 조절 손잡이 — 오른쪽 변 · 아래 변 · 오른쪽 아래 꼭짓점 (카톡식) */
.cm-rs{position:absolute;z-index:3;touch-action:none}
.cm-rs-r{top:14px;right:-3px;width:8px;bottom:20px;cursor:ew-resize}
.cm-rs-b{left:14px;bottom:-3px;height:8px;right:20px;cursor:ns-resize}
.cm-rs-c{right:-3px;bottom:-3px;width:16px;height:16px;cursor:nwse-resize}

/* 최소화 독 — 하단 중앙의 말풍선 칩 줄 */
#coDock{position:fixed;left:16px;right:16px;bottom:12px;display:flex;gap:8px;justify-content:center;
  flex-wrap:wrap;pointer-events:none;z-index:78}
.co-dock-it{pointer-events:auto;display:flex;align-items:center;gap:7px;padding:6px 13px 6px 7px;
  border:1px solid var(--line);border-radius:999px;background:#fffffff2;   /* backdrop-filter 제거 — 등장 애니메이션과 공존 금지(§1.5) */
  box-shadow:0 8px 24px -8px #34306233;font-size:12.5px;font-weight:600;color:#2f3450;
  animation:var(--motion-dur-panel) var(--motion-ease-out) both login-in}
.co-dock-it:hover{background:var(--accent-soft);border-color:var(--accent)}
.co-dock-it .r-ava{width:22px;height:22px;font-size:8.5px}

/* 좁은 화면(폰): 창을 화면 폭에 맞춰 줄이고, 팝아웃(OS 창 분리)은 숨긴다(새 탭이 돼 불편) */
@media (width<=520px){.co-mini{width:min(300px,calc(100vw - 16px))}.cm-pop{display:none}}

/* ── 팝아웃(창 분리) 모드 — /?room=<rid> 창은 방 하나가 화면 전체 ── */
body.popout{overflow:hidden}
#popRoom{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--card)}
#popRoom .cm-head{cursor:default;flex:none}
#popMsgs{flex:1;overflow-y:auto;padding:12px}
#popRoom .co-input{flex:none;padding:8px;border-top:1px solid var(--line);background:#faf9fe}

/* ── 채팅방 메뉴 서랍 (카톡식 ☰, roommenu.js) — 미니창·팝아웃 공용.
   카톡식 창 옆 확장(2026-07-31 보스 지시, ARCHITECTURE_WINDOWS §4-e):
   딤으로 덮지 않고 방 창을 오른쪽으로 --pop-side-w 만큼 넓혀(rooms.js/popout.js)
   대화 옆 세로 띠에 붙인다. 방 창(.co-mini/#popRoom)에 .rm-side 를 걸어 오른쪽을
   비우고, .rm-panel 이 그 자리에 슬라이드로 들어온다. 대화는 제 폭 유지·안 가림. ── */
:root{--pop-side-w:300px}   /* 셸 shell.py POP_SIDE_W 와 동일해야 함(팝아웃 창 확장 폭) */
.co-mini.rm-side,#popRoom.rm-side{padding-right:var(--pop-side-w)}
.rm-side .cm-rs{display:none}   /* 확장 중엔 미니창 폭 리사이즈 손잡이 숨김(폭은 서랍이 관리) */
/* .aho-anim 계약(roommenu.js가 wrap·panel 을 함께 ahoShow/ahoHide로 여닫는다) —
   wrap 은 대화 클릭을 통과시키고(딤 없음), 실제 클릭 대상은 panel 뿐 */
.rm-wrap{position:absolute;inset:0;z-index:5;overflow:hidden;border-radius:inherit;pointer-events:none;
  --aho-dur:var(--motion-dur-pop);--aho-dur-exit:var(--motion-dur-exit-pop);--aho-rise:0px}
.rm-dim{display:none}   /* 카톡 서랍은 딤 없이 대화 옆에 붙는다 — 닫기는 ☰ 재클릭·Esc */
/* .aho-anim 계약(roommenu.js가 ahoShow/ahoHide로 여닫는다) — X축 슬라이드로 오버라이드 */
.rm-panel{position:absolute;top:0;right:0;bottom:0;width:var(--pop-side-w);pointer-events:auto;
  display:flex;flex-direction:column;background:var(--card);
  border-left:1px solid var(--line);box-shadow:-8px 0 22px #1f174a2e;
  --aho-dur:var(--motion-dur-pop);--aho-dur-exit:var(--motion-dur-exit-pop);--aho-rise:0px}
.rm-panel.aho-anim.aho-out{transform:translate3d(24px,0,0)}
.rm-head{padding:12px 14px 10px;border-bottom:1px solid var(--line)}
.rm-head b{display:block;font-size:13.5px;color:#2f3450;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm-head small{font-size:11px;color:#9298a8}
.rm-body{flex:1;min-height:0;overflow-y:auto;padding:6px}
.rm-it{display:flex;align-items:center;gap:10px;width:100%;border:0;background:0 0;
  border-radius:9px;padding:10px 9px;font-size:12.5px;color:#2f3450;text-align:left;cursor:pointer}
.rm-it:hover{background:var(--hover)}
.rm-it i{font-style:normal;width:18px;text-align:center;flex:none}
.rm-it.danger{color:#c94257}
.rm-it.danger:hover{background:#fdeef1}
.rm-sep{height:1px;background:var(--line);margin:5px 8px}
.rm-subhead{display:flex;align-items:center;gap:6px;padding:2px 2px 8px;font-size:12.5px;color:#2f3450}
.rm-back{border:0;background:0 0;font-size:17px;line-height:1;padding:2px 8px;border-radius:8px;
  color:#8c91a1;cursor:pointer}
.rm-back:hover{background:var(--hover)}
.rm-empty{padding:22px 8px;text-align:center;font-size:12px;color:#9298a8}
.rm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:2px}
.rm-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:7px;cursor:pointer;
  border:1px solid var(--line)}
.rm-sinp{width:100%;border:1px solid var(--line);border-radius:10px;padding:8px 11px;
  font-size:12.5px;outline:0;background:#fff;margin-bottom:6px}
.rm-sinp:focus{border-color:rgba(var(--accent-rgb),.35)}
.rm-res{display:flex;flex-direction:column;gap:2px}
.rm-hit{display:flex;align-items:center;gap:8px;width:100%;border:0;background:0 0;
  border-radius:9px;padding:8px 9px;font-size:12px;color:#2f3450;text-align:left;cursor:pointer}
.rm-hit:hover{background:var(--hover)}
.rm-hit span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm-hit time{flex:none;font-size:10.5px;color:#9298a8}
.rm-foot{display:flex;align-items:center;gap:4px;padding:8px 10px;border-top:1px solid var(--line);
  background:#faf9fe}
.rm-fbtn{border:0;background:0 0;font-size:15px;line-height:1;padding:6px 8px;border-radius:9px;cursor:pointer}
.rm-fbtn:hover{background:var(--hover)}
.rm-fbtn.danger:hover{background:#fdeef1}
.rm-fbtn.is-on{background:var(--accent-soft)}
/* 검색 점프 강조 — box-shadow 를 직접 키프레임하지 않고 ::after 링의 opacity 만
   원샷 애니메이션한다 (§4.5, .co-msg는 위에서 이미 position:relative) */
.co-msg.rm-flash::after{content:'';position:absolute;inset:-3px;border-radius:14px;pointer-events:none;
  box-shadow:0 0 0 3px #b9a6f2;animation:rm-flash-op 1.4s ease forwards}
@keyframes rm-flash-op{0%,55%{opacity:1}100%{opacity:0}}