/* apps/collab_editor/static/css/collab.css — 레이아웃: 폰(컴팩트) 베이스 + 데스크탑 채팅 추가(§14.5) */
:root { --chat-frac: 0.4; }
html,body { height:100%; margin:0; font-family: system-ui, sans-serif; }
.collab-root { display:flex; height:100vh; }
/* 폰/컴팩트 베이스: 채팅 패널·드래그바 없이 에디터 전체폭. 데스크탑은 body.with-chat 으로 채팅을 더한다(JS가 폭/?layout 보고 토글). */
.collab-chat { display:none; flex-direction:column; border-right:1px solid #2a2a2a; min-width:200px; }
.collab-divider { display:none; flex:0 0 6px; cursor:col-resize; background:#1c1c1c; }
.collab-divider:hover { background:#0ff6; }
body.with-chat .collab-chat { display:flex; flex:0 0 calc(var(--chat-frac) * 100%); }
body.with-chat .collab-divider { display:block; }
.collab-chat-log { flex:1; overflow:auto; padding:8px; }
.collab-chat-input { padding:6px; }
.collab-chat-input textarea { width:100%; box-sizing:border-box; }
.collab-editor-pane { flex:1; display:flex; flex-direction:column; min-width:0; }
.collab-editor-bar { padding:4px 8px; font-size:12px; display:flex; align-items:center; gap:8px; }
.collab-editor-bar [data-doc-title] { font-weight:600; opacity:.85; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.collab-editor-bar [data-doc-status] { margin-left:auto; opacity:.8; white-space:nowrap; }
.collab-editor-bar [data-send-agent] { flex:none; padding:5px 12px; font-size:13px; background:#2a7d46; color:#fff; border:none; border-radius:6px; cursor:pointer; }
.collab-editor-bar [data-send-agent]:active { background:#1f5e34; }
.collab-editor-host { flex:1; overflow:auto; }
.collab-editor-host .cm-editor { height:100%; }

/* M2.3: 형광펜 데코레이션 (placeholder 색 — 시각 미려화는 소넷 의뢰) */
.hl { transition: background-color 1.2s ease; border-radius:2px; }
.hl-human { background: #fff17688; }   /* 준규님 노랑 */
.hl-cla   { background: #ff9ec788; }   /* 클라 분홍 */
.hl-mosy  { background: #9ec7ff88; }   /* 모시 파랑 */
.hl-other { background: #cccccc66; }
/* clearHighlight로 데코 제거되면 배경 사라짐(transition으로 fade) */

/* LP-A.3: 라이브 프리뷰 렌더 스타일 (설계 §15). 형광펜(.hl-*)은 배경이라 공존. */
.cm-lp-h1 { font-size: 1.8em; font-weight: 700; line-height: 1.3; }
.cm-lp-h2 { font-size: 1.5em; font-weight: 700; line-height: 1.3; }
.cm-lp-h3 { font-size: 1.3em; font-weight: 700; }
.cm-lp-h4 { font-size: 1.15em; font-weight: 600; }
.cm-lp-h5 { font-size: 1.05em; font-weight: 600; }
.cm-lp-h6 { font-size: 1em; font-weight: 600; opacity: .85; }
.cm-lp-strong { font-weight: 700; }
.cm-lp-em { font-style: italic; }
.cm-lp-code { font-family: monospace; background: #2a2a2a; padding: 0 3px; border-radius: 3px; }
.cm-lp-quote { border-left: 3px solid #555; padding-left: 8px; opacity: .85; }
.cm-lp-link { color: #4ea1ff; text-decoration: underline; cursor: pointer; }