/* ───── 공통 ───── */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { overflow: hidden; -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }
a { color: inherit; }
img { max-width: 100%; }
#app { display: flex; height: 100vh; height: 100dvh; width: 100%; }
#main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
#chat { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
#lobby { flex: 1; min-height: 0; overflow-y: auto; }
#log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#scrim { display: none; }
#toast { position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
#toast div { background: #222; color: #fff; padding: 8px 14px; border-radius: 8px; font-size: 14px; max-width: 90vw; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
#drop-hint { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; pointer-events: none;
  background: rgba(91,95,199,.12); border: 2px dashed var(--accent); color: var(--accent); font-size: 18px; }
#lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
#lightbox img { max-width: 94vw; max-height: 94vh; object-fit: contain; }
.hide-m { }
.sr { position: absolute; left: -9999px; }

/* 모달·팝오버 */
.modal-bg { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: var(--surface); color: var(--text); border-radius: var(--radius); width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto; padding: 20px; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.modal h2 { margin: 0 0 4px; font-size: 18px; }
.modal .sub { color: var(--dim); font-size: 13px; margin: 0 0 14px; }
.modal label { display: block; font-size: 13px; color: var(--dim); margin: 12px 0 4px; }
.modal input[type=text], .modal input[type=password], .modal select { width: 100%; padding: 9px 10px; border-radius: var(--radius-s); border: 1px solid var(--border); background: var(--input-bg); color: var(--text); outline: none; font-size: 16px; }
.modal input:focus, .modal select:focus { border-color: var(--accent); }
.modal .row { display: flex; align-items: center; gap: 8px; }
.modal .row.sp { justify-content: space-between; }
.modal .chk { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; color: var(--text); font-size: 14px; }
.modal .chk input { width: 18px; height: 18px; accent-color: var(--accent); }
.modal .err { color: var(--danger); font-size: 13px; min-height: 18px; margin-top: 8px; }
.modal .btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.modal hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0 4px; }
.modal h3 { margin: 16px 0 0; font-size: 14px; }
.btn { border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 8px 14px; border-radius: var(--radius-s); }
.btn:hover { background: var(--hover); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--danger); }
.btn.sm { padding: 4px 10px; font-size: 13px; }
.pop { position: fixed; z-index: 95; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0,0,0,.3); }
.emoji-pop { width: 320px; max-width: calc(100vw - 16px); }
.emoji-pop .tabs { display: flex; border-bottom: 1px solid var(--border); }
.emoji-pop .tabs button { flex: 1; background: none; border: 0; padding: 8px; color: var(--dim); border-bottom: 2px solid transparent; }
.emoji-pop .tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
.emoji-pop .grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 8px; max-height: 240px; overflow-y: auto; }
.emoji-pop .grid button { background: none; border: 0; font-size: 22px; padding: 4px; border-radius: 6px; line-height: 1.1; }
.emoji-pop .grid button:hover { background: var(--hover); }
.emoji-pop .grid img { width: 24px; height: 24px; object-fit: contain; vertical-align: middle; }
.emoji-pop .foot { border-top: 1px solid var(--border); padding: 6px 8px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--dim); }
.emoji-pop .foot button { background: none; border: 0; color: var(--accent); padding: 2px 4px; }
.suggest { min-width: 180px; max-height: 220px; overflow-y: auto; padding: 4px; }
.suggest button { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; color: var(--text); padding: 5px 8px; border-radius: 6px; text-align: left; }
.suggest button.on, .suggest button:hover { background: var(--hover); }
.suggest img { width: 22px; height: 22px; object-fit: contain; }

.emoji { width: 1.35em; height: 1.35em; vertical-align: -0.3em; object-fit: contain; }
.avatar { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; overflow: hidden; flex: none; object-fit: cover; user-select: none; }
.avatar.sq { border-radius: 6px; }
.code { font-family: ui-monospace, "SF Mono", Menlo, "D2Coding", monospace; background: var(--code-bg); padding: 1px 5px; border-radius: 4px; font-size: .92em; }
pre.code { padding: 8px 10px; overflow-x: auto; white-space: pre; margin: 4px 0; display: block; }
.mbody { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.mbody a { text-decoration: underline; }
.mention { background: var(--mention-bg); color: var(--mention-fg); border-radius: 4px; padding: 0 3px; }

/* 접힌 미디어 토글 */
.fold { background: none; border: 0; padding: 0; color: var(--link); text-align: left; }
.fold:hover { text-decoration: underline; }
.media { margin: 4px 0; }
.media img.photo { display: block; max-width: min(320px, 100%); max-height: 320px; border-radius: 8px; cursor: zoom-in; object-fit: contain; background: var(--hover); }
.media .file { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; text-decoration: none; background: var(--surface); }
.yt { position: relative; display: block; width: min(320px, 100%); aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: #000; cursor: pointer; border: 0; padding: 0; }
.yt img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.yt::after { content: "▶"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 36px; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.yt-frame { width: min(480px, 100%); aspect-ratio: 16/9; border: 0; border-radius: 8px; display: block; }
.reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.react { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; line-height: 20px; }
.react.mine { border-color: var(--accent); background: var(--accent-soft); }
.react .emoji { width: 16px; height: 16px; }
.exp { color: var(--warn); font-size: 12px; white-space: nowrap; }
.gone { color: var(--dim); font-style: italic; }
.quote { cursor: pointer; }
#typing { min-height: 18px; font-size: 12px; color: var(--dim); padding: 0 16px; }
#replybar { display: flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: 13px; color: var(--dim); border-top: 1px solid var(--border); background: var(--hover); }
#replybar span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#replybar button { background: none; border: 0; color: var(--dim); font-size: 16px; }
#staged { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--border); font-size: 13px; }
#staged img { max-height: 90px; max-width: 160px; border-radius: 6px; }
#staged button { background: none; border: 0; color: var(--dim); font-size: 18px; }
#composer textarea { flex: 1; min-width: 0; resize: none; border: 0; outline: none; background: transparent; color: var(--text); max-height: 160px; line-height: 1.4; font-size: 16px; padding: 6px 4px; }
#composer { display: flex; align-items: flex-end; gap: 4px; }
#composer button { background: none; border: 0; color: var(--dim); padding: 6px 8px; font-size: 18px; }
#composer button:hover { color: var(--accent); }
#members { display: none; }
body.members-open #members { display: flex; }
.mem { display: flex; align-items: center; gap: 10px; padding: 6px 12px; }
.mem .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dim); opacity: .5; flex: none; }
.mem.on .dot { background: var(--ok); opacity: 1; }
.mem .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem.off { opacity: .6; }

/* ═════════ 팀즈 모드 ═════════ */
body[data-mode="teams"] {
  --bg: #f5f5f5; --surface: #fff; --text: #242424; --dim: #616161; --border: #e0e0e0; --hover: #f0f0f0;
  --accent: #5b5fc7; --accent-fg: #fff; --accent-soft: #e8ebfa; --link: #5b5fc7; --danger: #c4314b; --ok: #13a10e; --warn: #bc4b09;
  --input-bg: #fff; --code-bg: #efefef; --mention-bg: #e8ebfa; --mention-fg: #4f52b2; --radius: 8px; --radius-s: 4px;
  --rail: #ebebeb; --own: #e8ebfa; --other: #fff;
  background: var(--bg); color: var(--text);
  font: 14px/1.45 "Segoe UI", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
body[data-mode="teams"] #prompt { display: none; }
body[data-mode="teams"] #rail { width: 68px; flex: none; background: var(--rail); display: flex; flex-direction: column; align-items: center; padding: 8px 0; gap: 4px; border-right: 1px solid var(--border); }
body[data-mode="teams"] #rail button { width: 60px; background: none; border: 0; padding: 8px 0 6px; border-radius: 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--dim); font-size: 11px; }
body[data-mode="teams"] #rail button .ic { font-size: 20px; line-height: 1; }
body[data-mode="teams"] #rail button:hover { background: #dedede; }
body[data-mode="teams"] #rail button.on { color: var(--accent); font-weight: 600; }
body[data-mode="teams"] #rail .grow { flex: 1; }
body[data-mode="teams"] #sidebar { width: 320px; flex: none; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
body[data-mode="teams"] #sb-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; }
body[data-mode="teams"] #sb-head b { font-size: 20px; font-weight: 700; }
body[data-mode="teams"] #sb-head button { background: none; border: 0; font-size: 18px; padding: 6px; border-radius: 6px; color: var(--accent); }
body[data-mode="teams"] #sb-head button:hover { background: var(--hover); }
body[data-mode="teams"] #sb-search { padding: 4px 12px 8px; }
body[data-mode="teams"] #room-filter { width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-bottom: 2px solid var(--border); border-radius: 4px; background: var(--bg); outline: none; font-size: 14px; }
body[data-mode="teams"] #room-filter:focus { border-bottom-color: var(--accent); background: #fff; }
body[data-mode="teams"] #rooms { list-style: none; margin: 0; padding: 0 6px; overflow-y: auto; flex: 1; }
body[data-mode="teams"] #rooms li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; position: relative; }
body[data-mode="teams"] #rooms li:hover { background: var(--hover); }
body[data-mode="teams"] #rooms li.cur { background: var(--accent-soft); }
body[data-mode="teams"] #rooms li.cur::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--accent); }
body[data-mode="teams"] #rooms .rinfo { flex: 1; min-width: 0; }
body[data-mode="teams"] #rooms .rname, body[data-mode="teams"] #rooms .rsub { display: block; }
body[data-mode="teams"] #rooms .rname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-mode="teams"] #rooms .rsub { font-size: 12px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-mode="teams"] #rooms .rbadge { font-size: 12px; color: var(--dim); }
body[data-mode="teams"] #sb-foot { padding: 10px 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--dim); }
body[data-mode="teams"] #topbar { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 56px; flex: none; background: var(--surface); border-bottom: 1px solid var(--border); }
body[data-mode="teams"] #topbar .ttl { flex: 1; min-width: 0; }
body[data-mode="teams"] #topbar .ttl b { display: block; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-mode="teams"] #topbar .ttl small { color: var(--dim); font-size: 12px; }
body[data-mode="teams"] #topbar button { background: none; border: 0; padding: 8px; border-radius: 6px; color: var(--dim); font-size: 18px; }
body[data-mode="teams"] #topbar button:hover { background: var(--hover); color: var(--text); }
body[data-mode="teams"] #topbar button.on { color: var(--accent); }
body[data-mode="teams"] #topbar .menu { display: none; }
body[data-mode="teams"] #log { padding: 12px 16px 4px; background: var(--bg); }
body[data-mode="teams"] .day { text-align: center; font-size: 12px; color: var(--dim); margin: 14px 0 8px; display: flex; align-items: center; gap: 10px; }
body[data-mode="teams"] .day::before, body[data-mode="teams"] .day::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
body[data-mode="teams"] .sysline { text-align: center; font-size: 12px; color: var(--dim); margin: 8px 0; }
body[data-mode="teams"] .msg { display: flex; gap: 10px; margin-top: 12px; position: relative; max-width: 100%; }
body[data-mode="teams"] .msg.cont { margin-top: 2px; }
body[data-mode="teams"] .msg.own { flex-direction: row-reverse; }
body[data-mode="teams"] .msg .av { width: 32px; flex: none; }
body[data-mode="teams"] .msg.cont .av { visibility: hidden; height: 0; }
body[data-mode="teams"] .msg .bubble { background: var(--other); border-radius: 6px; padding: 8px 12px; max-width: min(640px, 82%); box-shadow: 0 1px 2px rgba(0,0,0,.08); min-width: 0; }
body[data-mode="teams"] .msg.own .bubble { background: var(--own); }
body[data-mode="teams"] .mhead { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--dim); margin-bottom: 2px; flex-wrap: wrap; }
body[data-mode="teams"] .mhead b { color: var(--text); font-size: 13px; font-weight: 600; }
body[data-mode="teams"] .msg.cont .mhead.nm { display: none; }
body[data-mode="teams"] .quote { background: rgba(0,0,0,.05); border-left: 3px solid var(--accent); padding: 4px 8px; border-radius: 4px; margin-bottom: 4px; font-size: 12px; color: var(--dim); }
body[data-mode="teams"] .quote b { color: var(--text); }
body[data-mode="teams"] .quote div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }
body[data-mode="teams"] .actions { display: none; position: absolute; top: -14px; right: 40px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.12); padding: 2px; z-index: 5; }
body[data-mode="teams"] .msg.own .actions { right: auto; left: 40px; }
body[data-mode="teams"] .msg:hover .actions, body[data-mode="teams"] .msg.picked .actions { display: flex; }
body[data-mode="teams"] .actions button { background: none; border: 0; padding: 4px 8px; font-size: 14px; border-radius: 4px; color: var(--text); }
body[data-mode="teams"] .actions button:hover { background: var(--hover); }
body[data-mode="teams"] #composer { margin: 8px 16px 14px; padding: 4px 8px; background: var(--surface); border: 1px solid var(--border); border-bottom: 2px solid var(--border); border-radius: 6px; }
body[data-mode="teams"] #composer:focus-within { border-bottom-color: var(--accent); }
body[data-mode="teams"] #btn-send { color: var(--accent); }
body[data-mode="teams"] #members { width: 260px; flex: none; flex-direction: column; background: var(--surface); border-left: 1px solid var(--border); overflow-y: auto; }
body[data-mode="teams"] #members h4 { margin: 0; padding: 16px 14px 8px; font-size: 14px; }
body[data-mode="teams"] .lobby-wrap { padding: 32px; max-width: 880px; margin: 0 auto; }
body[data-mode="teams"] .lobby-wrap h1 { font-size: 24px; margin: 0 0 4px; }
body[data-mode="teams"] .lobby-wrap p { color: var(--dim); margin: 0 0 20px; }
body[data-mode="teams"] .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
body[data-mode="teams"] .card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px; cursor: pointer; display: flex; gap: 12px; align-items: center; text-align: left; color: var(--text); }
body[data-mode="teams"] .card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.12); border-color: var(--accent); }
body[data-mode="teams"] .card .cn { font-weight: 600; }
body[data-mode="teams"] .card small { color: var(--dim); display: block; }
body[data-mode="teams"] .card.new { border-style: dashed; color: var(--accent); justify-content: center; font-weight: 600; }
body[data-mode="teams"] .cli-only { display: none !important; }

/* ═════════ CLI 모드 (Claude Code 터미널 느낌) ═════════ */
body[data-mode="cli"] {
  --bg: #1e1e1e; --surface: #262626; --text: #e6e6e6; --dim: #8a8a8a; --border: #3a3a3a; --hover: #2e2e2e;
  --accent: #d97757; --accent-fg: #1e1e1e; --accent-soft: #3a2a24; --link: #61afef; --danger: #e06c75; --ok: #98c379; --warn: #e5c07b;
  --input-bg: #1e1e1e; --code-bg: #333; --mention-bg: #3a2a24; --mention-fg: #d97757; --radius: 2px; --radius-s: 2px;
  --band: #373737; --yellow: #e5c07b;
  background: var(--bg); color: var(--text);
  font: 14px/1.5 "SF Mono", Menlo, "D2Coding", "Apple SD Gothic Neo", monospace;
}
body[data-mode="cli"] #rail, body[data-mode="cli"] .teams-only { display: none !important; }
body[data-mode="cli"] #sidebar { width: 250px; flex: none; display: flex; flex-direction: column; border-right: 1px solid var(--border); background: var(--bg); }
body[data-mode="cli"] #sb-head { padding: 6px 10px; color: var(--dim); display: flex; justify-content: space-between; align-items: center; }
body[data-mode="cli"] #sb-head b { color: var(--accent); font-weight: normal; }
body[data-mode="cli"] #sb-head button { background: none; border: 0; color: var(--dim); padding: 0 4px; }
body[data-mode="cli"] #sb-head button:hover { color: var(--text); }
body[data-mode="cli"] #sb-search { border-top: 1px solid var(--border); }
body[data-mode="cli"] #room-filter { width: 100%; background: var(--surface); color: var(--text); border: 0; padding: 5px 10px; outline: none; }
body[data-mode="cli"] #rooms { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
body[data-mode="cli"] #rooms li { padding: 1px 10px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-mode="cli"] #rooms li:hover { background: var(--surface); }
body[data-mode="cli"] #rooms li.cur { color: var(--accent); }
body[data-mode="cli"] #rooms .rsub { color: var(--dim); margin-left: 6px; }
body[data-mode="cli"] #rooms .av, body[data-mode="cli"] #rooms .rinfo + .rbadge { display: none; }
body[data-mode="cli"] #rooms .rinfo { display: inline; }
body[data-mode="cli"] #rooms .rname { display: inline; }
body[data-mode="cli"] #sb-foot { padding: 6px 10px; border-top: 1px solid var(--border); color: var(--dim); font-size: 12px; }
body[data-mode="cli"] #topbar { display: flex; align-items: center; gap: 6px; padding: 4px 12px; border-bottom: 1px solid var(--border); color: var(--dim); flex: none; }
body[data-mode="cli"] #topbar .ttl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-mode="cli"] #topbar .ttl b { color: var(--accent); font-weight: normal; }
body[data-mode="cli"] #topbar small { color: var(--dim); }
body[data-mode="cli"] #topbar button { background: none; border: 0; color: var(--dim); padding: 2px 6px; }
body[data-mode="cli"] #topbar button:hover, body[data-mode="cli"] #topbar button.on { color: var(--accent); }
body[data-mode="cli"] #topbar .menu { display: none; }
body[data-mode="cli"] #log { padding: 8px 14px; }
body[data-mode="cli"] .welcome { display: flex; gap: 18px; align-items: center; margin: 4px 0 14px; border: 1px solid var(--accent); border-radius: 6px; padding: 10px 14px; max-width: 560px; }
body[data-mode="cli"] .welcome .mascot { color: var(--accent); white-space: pre; line-height: 1.05; font-size: 13px; }
body[data-mode="cli"] .welcome b { color: var(--text); }
body[data-mode="cli"] .welcome .dim, body[data-mode="cli"] .dim { color: var(--dim); }
body[data-mode="cli"] .line { padding: 0 6px; border-radius: 2px; position: relative; white-space: pre-wrap; word-break: break-word; }
body[data-mode="cli"] .line.gap { margin-top: 10px; }
body[data-mode="cli"] .line.own { background: var(--band); }
body[data-mode="cli"] .line:hover, body[data-mode="cli"] .line.picked { outline: 1px solid var(--border); }
body[data-mode="cli"] .line .mark { color: var(--dim); margin-right: 8px; }
body[data-mode="cli"] .line.own .mark { color: var(--text); }
body[data-mode="cli"] .line.other .mark { color: var(--accent); }
body[data-mode="cli"] .line .nick { font-weight: bold; margin-right: 8px; }
body[data-mode="cli"] .line .meta { color: var(--dim); margin-left: 10px; font-size: 12px; }
body[data-mode="cli"] .line .edited { color: var(--dim); margin-left: 6px; font-size: 12px; }
body[data-mode="cli"] .line .sub { color: var(--dim); padding-left: 18px; }
body[data-mode="cli"] .line .sub.err { color: var(--danger); }
body[data-mode="cli"] .line .quote { color: var(--dim); border-left: 2px solid var(--border); padding-left: 8px; margin: 2px 0 2px 18px; }
body[data-mode="cli"] .line .quote:hover { color: var(--accent); }
body[data-mode="cli"] .line .mbody { display: inline; }
body[data-mode="cli"] .line .media, body[data-mode="cli"] .line .reacts { margin-left: 18px; }
body[data-mode="cli"] .media img.photo { border-radius: 4px; }
body[data-mode="cli"] .line .avatar { margin-right: 6px; vertical-align: -4px; }
body[data-mode="cli"] .actions { display: none; padding-left: 18px; color: var(--dim); }
body[data-mode="cli"] .line.picked .actions { display: block; }
body[data-mode="cli"] .actions button { background: none; border: 0; color: var(--link); padding: 0 8px 0 0; text-decoration: underline; }
body[data-mode="cli"] .day, body[data-mode="cli"] .sysline { color: var(--dim); text-align: center; margin: 12px 0 4px; }
body[data-mode="cli"] .tool { color: var(--dim); padding-left: 16px; white-space: pre-wrap; }
body[data-mode="cli"] .tool.err { color: var(--danger); }
body[data-mode="cli"] .react { border-radius: 3px; background: transparent; }
body[data-mode="cli"] #composer { margin: 6px 12px 12px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); align-items: flex-start; }
body[data-mode="cli"] #composer:focus-within { border-color: var(--accent); }
body[data-mode="cli"] #prompt { color: var(--accent); padding-top: 6px; }
body[data-mode="cli"] #composer textarea { font-family: inherit; }
body[data-mode="cli"] #composer button { font-size: 14px; padding: 6px 4px; }
body[data-mode="cli"] #btn-send { display: none; }
body[data-mode="cli"] #members { width: 220px; flex: none; flex-direction: column; border-left: 1px solid var(--border); overflow-y: auto; background: var(--bg); }
body[data-mode="cli"] #members h4 { margin: 0; padding: 8px 12px; font-weight: normal; color: var(--dim); }
body[data-mode="cli"] .mem { padding: 1px 12px; gap: 6px; }
body[data-mode="cli"] .lobby-wrap { padding: 14px; max-width: 760px; }
body[data-mode="cli"] .lobby-wrap h1 { font-size: 14px; font-weight: normal; color: var(--accent); margin: 0 0 4px; }
body[data-mode="cli"] .lobby-wrap p { color: var(--dim); margin: 0 0 12px; }
body[data-mode="cli"] .cards { display: flex; flex-direction: column; }
body[data-mode="cli"] .card { background: none; border: 0; color: var(--text); text-align: left; padding: 2px 6px; display: block; }
body[data-mode="cli"] .card:hover { background: var(--surface); color: var(--accent); }
body[data-mode="cli"] .card .cn::before { content: "❯ "; color: var(--dim); }
body[data-mode="cli"] .card small { color: var(--dim); margin-left: 8px; }
body[data-mode="cli"] .card .av { display: none; }
body[data-mode="cli"] .card.new { color: var(--ok); margin-top: 8px; }
body[data-mode="cli"] .card.new .cn::before { content: "+ "; }
body[data-mode="cli"] .modal { border: 1px solid var(--border); }
body[data-mode="cli"] .btn.primary { color: #1e1e1e; }
body[data-mode="cli"] #toast div { background: var(--surface); border: 1px solid var(--border); }
body[data-mode="cli"] .modal-bg { background: rgba(0,0,0,.6); }
body[data-mode="cli"] #drop-hint { background: rgba(217,119,87,.12); }

/* ═════════ 모바일 ═════════ */
@media (max-width: 820px) {
  body[data-mode] #rail { display: none !important; }
  body[data-mode] #sidebar { position: fixed; z-index: 60; top: 0; bottom: 0; left: 0; width: min(86vw, 340px); transform: translateX(-102%); transition: transform .2s; box-shadow: none; padding-top: env(safe-area-inset-top); }
  body.sidebar-open #sidebar { transform: none; box-shadow: 6px 0 24px rgba(0,0,0,.35); }
  body.sidebar-open #scrim, body.members-open #scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.4); }
  body[data-mode] #members { position: fixed; z-index: 60; top: 0; bottom: 0; right: 0; width: min(80vw, 300px); box-shadow: -6px 0 24px rgba(0,0,0,.35); padding-top: env(safe-area-inset-top); background: var(--surface); }
  body[data-mode="cli"] #members { background: var(--bg); }
  body[data-mode] #topbar .menu { display: inline-block; }
  body[data-mode="teams"] #topbar { padding-top: env(safe-area-inset-top); height: calc(52px + env(safe-area-inset-top)); }
  body[data-mode="teams"] #log { padding: 8px 10px 4px; }
  body[data-mode="teams"] .msg .bubble { max-width: 86%; }
  body[data-mode="teams"] .msg .av { width: 28px; }
  body[data-mode="teams"] .actions { top: -16px; right: 8px; }
  body[data-mode="teams"] .msg.own .actions { left: 8px; right: auto; }
  body[data-mode="teams"] #composer { margin: 6px 8px calc(8px + env(safe-area-inset-bottom)); }
  body[data-mode="teams"] .lobby-wrap { padding: 16px; }
  body[data-mode="cli"] #topbar { padding-top: calc(4px + env(safe-area-inset-top)); }
  body[data-mode="cli"] #composer { margin: 6px 8px calc(8px + env(safe-area-inset-bottom)); }
  body[data-mode="cli"] #log { padding: 6px 8px; }
  body[data-mode="cli"] .welcome { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hide-m { display: none !important; }
  .modal-bg { align-items: flex-end; padding: 0; }
  .modal { max-width: none; border-radius: 14px 14px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .emoji-pop { left: 8px !important; right: 8px; width: auto; }
  .btn, #composer button, #topbar button { min-height: 36px; }
  .actions button { min-height: 32px; }
}

/* ═════════ 테마 (data-theme = light | dark, JS 가 시스템 설정을 풀어서 넣는다) ═════════ */
body[data-mode="teams"][data-theme="dark"] {
  --bg: #1f1f1f; --surface: #292929; --text: #f0f0f0; --dim: #adadad; --border: #3d3d3d; --hover: #333;
  --accent: #7f85f5; --accent-fg: #101010; --accent-soft: #35375e; --link: #9ea3ff; --danger: #f1707b; --ok: #6ccb5f; --warn: #f4a261;
  --input-bg: #1f1f1f; --code-bg: #3a3a3a; --mention-bg: #35375e; --mention-fg: #c4c7ff;
  --rail: #141414; --own: #3b3d73; --other: #2e2e2e;
}
body[data-mode="teams"][data-theme="dark"] #rail button:hover { background: #2a2a2a; }
body[data-mode="teams"][data-theme="dark"] #room-filter:focus { background: var(--surface); }
body[data-mode="teams"][data-theme="dark"] .quote { background: rgba(255,255,255,.06); }
body[data-mode="cli"][data-theme="light"] {
  --bg: #faf9f5; --surface: #f0eee6; --text: #29261b; --dim: #7a766a; --border: #d8d4c6; --hover: #ebe8de;
  --accent: #c15f3c; --accent-fg: #fff; --accent-soft: #f6e3da; --link: #2563a8; --danger: #b3261e; --ok: #3a7d2c; --warn: #9a6a00;
  --input-bg: #fff; --code-bg: #e9e6da; --mention-bg: #f6e3da; --mention-fg: #c15f3c; --band: #ebe8de; --yellow: #9a6a00;
}

/* ═════════ 공통 추가 ═════════ */
.seg { display: flex; border: 1px solid var(--border); border-radius: var(--radius-s); overflow: hidden; }
.seg button { flex: 1; background: none; border: 0; padding: 7px 8px; color: var(--dim); border-right: 1px solid var(--border); }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--accent); color: var(--accent-fg); }
.modal .tabs2 { display: flex; gap: 0; margin: 4px 0 4px; border-bottom: 1px solid var(--border); }
.modal .tabs2 button { flex: 1; background: none; border: 0; padding: 9px 4px; color: var(--dim); border-bottom: 2px solid transparent; }
.modal .tabs2 button.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.cf .seg { margin: 4px 0 8px; }
.cf input + input { margin-top: 6px; }
.cf .cf-hint { font-size: 12px; color: var(--dim); margin-top: 4px; min-height: 16px; }
.pad { position: relative; width: 220px; height: 220px; margin: 6px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); touch-action: none; user-select: none; -webkit-user-select: none; border: 1px solid var(--border); border-radius: 12px; background: var(--input-bg); }
.pad-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pad-line { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: .6; }
.pad-dot { display: flex; align-items: center; justify-content: center; position: relative; }
.pad-dot::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--dim); transition: transform .1s, background .1s; }
.pad-dot.on::before { background: var(--accent); transform: scale(1.5); }
.pad.bad .pad-dot.on::before { background: var(--danger); }
.pad.bad .pad-line { stroke: var(--danger); }
.pad.ok .pad-dot.on::before { background: var(--ok); }
.pad.ok .pad-line { stroke: var(--ok); }
.dim { color: var(--dim); }
.mw.flash > * { animation: flashmw 1.5s ease-out; }
@keyframes flashmw { 0%, 40% { background: var(--accent-soft); } 100% { background: transparent; } }
.rbadge2 { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 9px; background: var(--accent); color: var(--accent-fg); font-size: 11px; line-height: 18px; text-align: center; font-weight: 700; margin-left: 6px; }
.rbadge2.direct { background: var(--danger); color: #fff; }
.mention.me { background: var(--warn); color: #111; }
.thread-link { display: inline-block; margin-top: 4px; font-size: 13px; }
.meet { border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 8px; background: var(--surface); padding: 10px 12px; margin: 4px 0; max-width: 360px; }
.meet b { display: block; }
.meet small { color: var(--dim); display: block; margin: 2px 0 8px; }
.meet a.btn { display: inline-block; text-decoration: none; }
body[data-mode="cli"] .line .meet { margin-left: 18px; }
body[data-mode="teams"] .msg.mention-me .bubble { box-shadow: 0 0 0 2px var(--warn); }
body[data-mode="cli"] .line.mention-me { outline: 1px solid var(--warn); }
body.thread-open #thread { display: flex; }
#thread { display: none; width: 360px; flex: none; flex-direction: column; background: var(--surface); border-left: 1px solid var(--border); min-height: 0; }
#thread-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 600; }
#thread-head button { background: none; border: 0; color: var(--dim); font-size: 18px; }
#thread-log { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 10px; background: var(--bg); }
#thread-form { display: flex; align-items: flex-end; gap: 4px; padding: 8px 10px; border-top: 1px solid var(--border); }
#thread-form textarea { flex: 1; min-width: 0; resize: none; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--input-bg); color: var(--text); padding: 7px 8px; font-size: 16px; outline: none; max-height: 120px; }
#thread-form textarea:focus { border-color: var(--accent); }
#thread-form button { background: none; border: 0; color: var(--accent); font-size: 18px; padding: 6px 8px; }
body[data-mode="teams"] #thread-log .msg .bubble { max-width: 92%; }
body[data-mode="teams"] #thread-log .msg { margin-top: 10px; }
.thread-sep { text-align: center; color: var(--dim); font-size: 12px; margin: 10px 0 2px; }
@media (max-width: 820px) {
  #thread { position: fixed; inset: 0; width: auto; z-index: 70; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .pad { width: min(240px, 70vw); height: min(240px, 70vw); }
}

/* 우클릭 메뉴 */
.ctxmenu { min-width: 210px; padding: 4px; z-index: 120; }
.ctxmenu button { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; color: var(--text); padding: 7px 10px; border-radius: var(--radius-s); text-align: left; font-size: 14px; }
.ctxmenu button:hover, .ctxmenu button:focus-visible { background: var(--hover); outline: none; }
.ctxmenu button.danger { color: var(--danger); }
.ctxmenu hr { border: 0; border-top: 1px solid var(--border); margin: 4px 2px; }
.ctxmenu .qr { display: flex; justify-content: space-between; padding: 2px 2px 4px; }
.ctxmenu .qr button { width: auto; font-size: 20px; padding: 4px 7px; border-radius: 50%; }

.emoji-pop .search { display: block; width: calc(100% - 16px); margin: 8px 8px 0; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--input-bg); color: var(--text); outline: none; font-size: 16px; }
.emoji-pop .search:focus { border-color: var(--accent); }
.emoji-pop .grid img { width: 24px; height: 24px; object-fit: contain; }

/* 링크 미리보기 카드 */
.lp { display: block; margin: 4px 0; }
.lp-card { display: flex; flex-direction: column; max-width: 360px; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 8px; overflow: hidden; background: var(--surface); text-decoration: none !important; color: var(--text); }
.lp-card:hover { border-color: var(--accent); }
.lp-card img { display: block; width: 100%; max-height: 190px; object-fit: cover; background: var(--hover); }
.lp-body { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; min-width: 0; }
.lp-body small { color: var(--dim); font-size: 12px; }
.lp-body b { font-size: 14px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lp-body span { color: var(--dim); font-size: 13px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
body[data-mode="cli"] .line .lp { margin-left: 18px; }

video.vid { display: block; max-width: min(480px, 100%); max-height: 360px; border-radius: 8px; background: #000; }

.vid-err { padding: 10px 12px; border: 1px dashed var(--danger); border-radius: 8px; color: var(--dim); font-size: 13px; max-width: 360px; }
.vid-err a { color: var(--link); }

.seg button small { color: inherit; opacity: .75; font-size: 11px; }

.modal input[type=number] { padding: 9px 10px; border-radius: var(--radius-s); border: 1px solid var(--border); background: var(--input-bg); color: var(--text); outline: none; font-size: 16px; }
.modal input[type=number]:focus { border-color: var(--accent); }

/* 사이드바 토글 버튼은 데스크톱에서도 보인다 */
body[data-mode] #topbar .menu { display: inline-block; }
@media (min-width: 821px) {
  body.sidebar-collapsed #sidebar { display: none; }
}

/* 스크립트가 켜지기 전 첫 화면 깜빡임 방지 + 문서 바닥 색 */
html { background: #f5f5f5; }
@media (prefers-color-scheme: dark) { html { background: #1f1f1f; } }

/* ───── 마크다운·서식 ───── */
body { --c-red: #d13438; --c-orange: #c4570c; --c-yellow: #8a6a00; --c-green: #107c10; --c-blue: #0f6cbd; --c-purple: #7a3fb8; --c-pink: #c239b3; --c-gray: #6b6b6b; --c-cyan: #0a7b83; }
body[data-theme="dark"] { --c-red: #ff6b6b; --c-orange: #ff9f43; --c-yellow: #f5d90a; --c-green: #5fd068; --c-blue: #6cb6ff; --c-purple: #c39bff; --c-pink: #ff7ac8; --c-gray: #a0a0a0; --c-cyan: #4dd4de; }
.c-red { color: var(--c-red); } .c-orange { color: var(--c-orange); } .c-yellow { color: var(--c-yellow); } .c-green { color: var(--c-green); }
.c-blue { color: var(--c-blue); } .c-purple { color: var(--c-purple); } .c-pink { color: var(--c-pink); } .c-gray { color: var(--c-gray); } .c-cyan { color: var(--c-cyan); }
.mbody mark { background: rgba(255, 213, 0, .45); color: inherit; border-radius: 3px; padding: 0 2px; }
.md-b { white-space: normal; }
.md-h { font-weight: 700; margin: 6px 0 2px; line-height: 1.3; }
.md-h1 { font-size: 1.5em; } .md-h2 { font-size: 1.28em; } .md-h3 { font-size: 1.12em; }
.md-list { margin: 4px 0; padding-left: 22px; }
.md-list li { margin: 1px 0; }
.md-quote { border-left: 3px solid var(--border); padding: 2px 10px; margin: 4px 0; color: var(--dim); }
.md-hr { border: 0; border-top: 1px solid var(--border); margin: 8px 0; }
.md-table-wrap { overflow-x: auto; margin: 6px 0; max-width: 100%; }
.md-table { border-collapse: collapse; font-size: .95em; }
.md-table th, .md-table td { border: 1px solid var(--border); padding: 4px 10px; }
.md-table th { background: var(--hover); }
.codeblock { margin: 6px 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--code-bg); max-width: 100%; }
.codeblock .cb-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 8px; font-size: 11px; color: var(--dim); border-bottom: 1px solid var(--border); text-transform: lowercase; }
.codeblock .cb-head button { background: none; border: 0; color: var(--link); font-size: 11px; padding: 2px 4px; }
.codeblock pre.code { margin: 0; padding: 8px 10px; background: transparent; white-space: pre; overflow-x: auto; display: block; border-radius: 0; }
body[data-mode="cli"] .line .mbody:has(> .md-b) { display: block; margin-left: 18px; }
/* 이모지만 보내면 크게 */
.jumbo { display: inline-block; line-height: 1.15; }
.jumbo.j1 { font-size: 2.8em; } .jumbo.j2 { font-size: 2.3em; } .jumbo.j3 { font-size: 1.9em; }
.jumbo img.emoji { width: 1em; height: 1em; vertical-align: -0.12em; }
/* 서식 팝오버 */
.fmt-pop { padding: 6px; width: 290px; max-width: calc(100vw - 16px); }
.fmt-pop .fp-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; align-items: center; }
.fmt-pop .fp-row button { background: none; border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-s); padding: 5px 9px; font-size: 13px; }
.fmt-pop .fp-row button:hover { background: var(--hover); }
.fmt-pop .fp-colors button { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); }
.fmt-pop .fp-help { font-size: 11px; color: var(--dim); padding: 4px 2px 0; line-height: 1.6; }
.fmt-pop code { background: var(--code-bg); padding: 0 4px; border-radius: 3px; }

/* 화면 전환 버튼은 눈에 띄지 않게 */
#topbar [data-act="mode"] { opacity: .45; }
#topbar [data-act="mode"]:hover { opacity: .9; }
body[data-mode="teams"] #rail [data-act="mode"] { opacity: .4; }
body[data-mode="teams"] #rail [data-act="mode"]:hover { opacity: .9; }

/* 화면 잠금 */
body.locked #app { visibility: hidden; }
#lockscreen { position: fixed; inset: 0; z-index: 300; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 16px; }
#lockscreen .lockbox { max-width: 360px; text-align: center; }
#lockscreen .lock-ic { font-size: 40px; line-height: 1; margin-bottom: 6px; }
#lockscreen .lockbox .sub { margin-bottom: 8px; }
#lockscreen .lockbox .cf, #lockscreen .lockbox .err { text-align: left; }
@media (max-width: 820px) { #lockscreen { align-items: center; } #lockscreen .modal { border-radius: var(--radius); } }

/* 입력창·대화 영역의 가로 스크롤 제거 */
#composer textarea, #thread-form textarea { overflow-x: hidden; scrollbar-width: none; overflow-wrap: anywhere; }
#composer textarea::-webkit-scrollbar, #thread-form textarea::-webkit-scrollbar { display: none; }
#log, #thread-log { overflow-x: hidden; }
/* 공지 */
#announce { display: flex; align-items: flex-start; gap: 8px; padding: 6px 12px; background: var(--accent-soft); border-bottom: 1px solid var(--border); flex: none; }
#announce[hidden] { display: none; }
#announce .ann-ic { flex: none; }
#announce .ann-body { flex: 1; min-width: 0; cursor: pointer; font-size: 13px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-word; }
#announce button { background: none; border: 0; color: var(--dim); font-size: 14px; padding: 0 4px; }
#announce button:hover { color: var(--text); }
body[data-mode="cli"] #announce { background: var(--surface); border-bottom: 1px dashed var(--accent); }
/* 영구 */
.pinned { color: var(--accent); font-size: 12px; white-space: nowrap; }
.pin-row { border-bottom: 1px solid var(--border); padding: 8px 0; }
.pin-row .pin-text { margin-top: 2px; word-break: break-word; }
/* 투표 */
.poll { display: flex; flex-direction: column; gap: 4px; min-width: 240px; max-width: 360px; }
.poll small { display: block; margin-bottom: 2px; }
.poll-opt { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 8px; overflow: hidden; text-align: left; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 7px 10px; }
.poll-opt:not([disabled]):hover { border-color: var(--accent); }
.poll-opt.mine { border-color: var(--accent); }
.poll-opt[disabled] { cursor: default; opacity: .9; }
.poll-opt .po-bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent-soft); z-index: 0; transition: width .25s; }
.poll-opt .po-text, .poll-opt .po-n { position: relative; z-index: 1; }
.poll-opt .po-text { flex: 1; min-width: 0; word-break: break-word; }
.poll-opt .po-n { font-size: 12px; color: var(--dim); white-space: nowrap; }
body[data-mode="cli"] .line .poll { margin-left: 18px; }

/* 사이드바 토글: 화면 맨 왼쪽 위 모서리에 고정 */
#sb-toggle { position: fixed; left: 10px; top: 9px; z-index: 80; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; padding: 0; background: none; border: 0; border-radius: 8px; color: var(--dim); }
#sb-toggle:hover { background: var(--hover); color: var(--text); }
#sb-toggle svg { width: 22px; height: 22px; }
body.locked #sb-toggle { display: none; }
body[data-mode="teams"] #sb-toggle { left: 15px; }
body[data-mode="teams"] #rail { padding-top: 56px; }
body[data-mode="cli"] #sb-head { padding-left: 52px; }
body[data-mode="cli"].sidebar-collapsed #topbar { padding-left: 54px; }
@media (max-width: 820px) {
  #sb-toggle { top: calc(9px + env(safe-area-inset-top)); left: 10px; }
  body[data-mode="teams"] #sb-toggle { left: 10px; }
  body[data-mode] #topbar { padding-left: 54px; }
  body[data-mode] #sb-head { padding-left: 54px; }
  body.thread-open #sb-toggle { display: none; }
}
/* CLI 는 상단 줄이 얇아서 토글도 작게 */
body[data-mode="cli"] #sb-toggle { width: 30px; height: 30px; top: 2px; left: 12px; }
body[data-mode="cli"] #sb-toggle svg { width: 18px; height: 18px; }
body[data-mode="cli"] #sb-head { padding-left: 48px; }
body[data-mode="cli"].sidebar-collapsed #topbar { padding-left: 50px; }
@media (max-width: 820px) { body[data-mode="cli"] #sb-toggle { top: calc(2px + env(safe-area-inset-top)); } }

/* 입력창 미리보기 */
#preview { flex: none; margin: 0 16px 2px; padding: 6px 10px; border: 1px dashed var(--border); border-radius: 8px; background: var(--surface); max-height: 34vh; overflow: auto; }
#preview[hidden] { display: none; }
#preview::before { content: "미리보기"; display: block; font-size: 11px; color: var(--dim); margin-bottom: 2px; }
#preview .mbody { display: block; margin: 0; }
#preview .fold, #preview .yt, #preview button { pointer-events: none; }
body[data-mode="cli"] #preview { margin: 0 12px 2px; }
@media (max-width: 820px) { #preview { margin: 0 8px 2px; max-height: 28vh; } body[data-mode="cli"] #preview { margin: 0 8px 2px; } }
/* 사이드바를 접으면 팀즈의 왼쪽 레일(채팅·설정)도 함께 숨긴다. 토글 버튼은 좌상단에 그대로 */
@media (min-width: 821px) {
  body.sidebar-collapsed #rail { display: none; }
  body[data-mode="teams"].sidebar-collapsed #topbar { padding-left: 62px; }
}
/* 팀즈·CLI 상단바 높이를 같게: 전환 버튼이 같은 자리에 있어서 연속으로 눌러도 딸깍딸깍 전환된다 */
body[data-mode] #topbar { height: 44px; min-height: 44px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; padding-right: 10px; align-items: center; }
body[data-mode] #topbar [data-act="mode"] { flex: none; width: 40px; height: 36px; min-height: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
body[data-mode="teams"] #topbar .ttl b { font-size: 15px; line-height: 1.25; }
body[data-mode="teams"] #topbar .ttl small { font-size: 11.5px; line-height: 1.2; }
body[data-mode] #sb-toggle { width: 36px; height: 36px; top: 4px; left: 10px; }
body[data-mode="teams"] #sb-toggle { left: 16px; }
body[data-mode] #sb-toggle svg { width: 20px; height: 20px; }
body[data-mode="teams"] #rail { padding-top: 48px; }
@media (max-width: 820px) {
  body[data-mode] #topbar { height: calc(44px + env(safe-area-inset-top)); min-height: calc(44px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  body[data-mode] #sb-toggle, body[data-mode="teams"] #sb-toggle, body[data-mode="cli"] #sb-toggle { top: calc(4px + env(safe-area-inset-top)); left: 10px; }
}

/* 나중에 읽기 (사이드바) */
#saved-box { flex: none; max-height: 38%; display: flex; flex-direction: column; border-top: 1px solid var(--border); min-height: 0; }
#saved-box[hidden] { display: none; }
#saved-box .sv-head { padding: 8px 12px 4px; font-size: 12px; font-weight: 600; color: var(--dim); }
#saved-box .sv-list { overflow-y: auto; padding: 0 6px 6px; }
#saved-box .sv-item { display: flex; align-items: flex-start; gap: 4px; padding: 5px 6px; border-radius: 6px; cursor: pointer; }
#saved-box .sv-item:hover { background: var(--hover); }
#saved-box .sv-main { flex: 1; min-width: 0; font-size: 12px; }
#saved-box .sv-text { margin-top: 1px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; color: var(--text); }
#saved-box .sv-item button { background: none; border: 0; color: var(--dim); padding: 0 4px; font-size: 12px; opacity: 0; }
#saved-box .sv-item:hover button { opacity: 1; }
#saved-box .sv-empty { padding: 6px 10px; font-size: 12px; }
@media (hover: none) { #saved-box .sv-item button { opacity: 1; } }
body[data-mode="cli"] #saved-box .sv-head { font-weight: normal; }

/* 버튼 설명 말풍선 */
#tip { position: fixed; z-index: 400; max-width: 260px; padding: 5px 9px; border-radius: 6px; background: #2b2b2b; color: #fff; font-size: 12px; line-height: 1.4; white-space: pre-line; pointer-events: none; box-shadow: 0 4px 14px rgba(0,0,0,.35); font-family: inherit; }
#tip[hidden] { display: none; }
body[data-theme="dark"] #tip { background: #f0f0f0; color: #111; }

/* 메시지 툴바는 글이 있는 말풍선 위에서만 뜬다 (줄 전체 폭이 아니라) */
body[data-mode="teams"] .msg .bubble { position: relative; }
body[data-mode="teams"] .msg .actions, body[data-mode="teams"] .msg.own .actions { top: -16px; right: 8px; left: auto; }
body[data-mode="teams"] .msg:hover .actions { display: none; }
body[data-mode="teams"] .msg .bubble:hover .actions, body[data-mode="teams"] .msg.picked .actions { display: flex; }
/* CLI: 줄 전체가 아니라 글 위에서만 반응 */
body[data-mode="cli"] .line:hover:not(.picked) { outline: none; }
body[data-mode="cli"] .line .mbody:hover { background: rgba(127,127,127,.12); border-radius: 3px; }

/* 나중에 읽기 탭 (채팅·설정과 같은 단계) */
#savedview { flex: 1; min-height: 0; overflow-y: auto; }
#savedview[hidden] { display: none; }
body[data-mode="teams"] #rail button { position: relative; }
body[data-mode="teams"] #rail button.small { font-size: 10px; }
#rail .rbadge2 { position: absolute; top: 2px; right: 4px; margin: 0; min-width: 16px; padding: 0 4px; line-height: 16px; font-size: 10px; }
#sb-tabs { display: none; gap: 4px; padding: 2px 10px 6px; }
body[data-mode="cli"] #sb-tabs { display: flex; }
@media (max-width: 820px) { body[data-mode] #sb-tabs { display: flex; } }
#sb-tabs button { flex: 1; background: none; border: 1px solid var(--border); color: var(--dim); border-radius: var(--radius-s); padding: 4px 4px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sb-tabs button.on { color: var(--accent); border-color: var(--accent); }
.sv-group h3 { margin: 18px 0 6px; font-size: 14px; }
.sv-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; background: var(--surface); cursor: pointer; }
.sv-row:hover { border-color: var(--accent); }
.sv-row .sv-main { flex: 1; min-width: 0; }
.sv-row .sv-meta { font-size: 12px; }
.sv-row .sv-text { margin-top: 2px; word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.sv-row .sv-btns { display: flex; gap: 4px; flex: none; }
body[data-mode="cli"] .sv-row { border: 0; border-radius: 0; background: none; padding: 2px 6px; margin: 0; }
body[data-mode="cli"] .sv-row:hover { background: var(--surface); }

/* 입장 단계 표시 */
.steps { display: flex; align-items: center; gap: 6px; margin: 2px 0 10px; }
.steps span { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--dim); }
.steps span.on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.steps span.done { border-color: var(--accent); color: var(--accent); }
.steps i { flex: 0 0 26px; height: 2px; background: var(--border); }
.steps i.on { background: var(--accent); }

/* 입장 창은 크기를 고정: 제목·버튼은 그대로, 가운데만 스크롤 (탭·단계가 바뀌어도 위치가 변하지 않게) */
.modal.fixed { height: min(660px, calc(100dvh - 32px)); display: flex; flex-direction: column; overflow: hidden; }
.modal.fixed .mhead2 { flex: none; }
.modal.fixed .mscroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 2px 4px; }
.modal.fixed .btns { flex: none; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
@media (max-width: 820px) { .modal.fixed { height: min(88dvh, 680px); } }
/* 자체 확인 창 */
.confirm-bg { z-index: 350; }
.confirm-box { max-width: 360px; }
.confirm-box h2 { font-size: 17px; }
.confirm-msg { margin: 8px 0 0; line-height: 1.55; color: var(--text); }
.btn.danger-fill { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger-fill:hover { filter: brightness(1.08); }
@media (max-width: 820px) { .confirm-bg { align-items: center; padding: 16px; } .confirm-box { border-radius: var(--radius); padding-bottom: 20px; } }
/* 모바일 위아래 여백: 화면 전체를 배경색으로 채운다 */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--bg); }
html { min-height: 100lvh; }

/* 방 목록 편집 (순서 바꾸기·삭제) */
#sb-head > span { display: flex; align-items: center; gap: 2px; }
#sb-head button.on { color: var(--accent); font-weight: 600; }
#rooms li .redit { display: flex; gap: 2px; margin-left: auto; flex: none; }
#rooms li .redit button { background: none; border: 1px solid var(--border); color: var(--dim); border-radius: var(--radius-s); padding: 2px 6px; font-size: 11px; line-height: 1.4; }
#rooms li .redit button:hover { color: var(--text); border-color: var(--accent); }
#rooms li .redit [data-del]:hover { color: var(--danger); border-color: var(--danger); }
#rooms li.editing { cursor: grab; }
#rooms li.dragging { opacity: .4; }
body[data-mode="cli"] #rooms li .rbadge2 { display: none; }
body[data-mode="cli"] #rooms li.editing .redit { display: inline-flex; margin-left: 8px; }

/* 방 전환 단축키 표시 */
#rooms li .rkey { margin-left: auto; flex: none; font-size: 10px; color: var(--dim); opacity: .6; padding-left: 6px; }
#rooms li:hover .rkey { opacity: 1; }
@media (hover: none) { #rooms li .rkey { display: none; } }
body[data-mode="cli"] #rooms li .rkey { margin-left: 8px; }

html, body { overscroll-behavior: none; }

/* 참여자·스레드 패널은 상단바 아래에서 열린다 (상단바와 버튼은 항상 전체 폭으로 고정) */
#content { flex: 1; min-height: 0; display: flex; }
#views { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; }
@media (max-width: 820px) {
  body[data-mode] #members { top: calc(44px + env(safe-area-inset-top)); padding-top: 0; }
}

/* ⋯ 더보기 버튼: 우클릭을 몰라도 추가 동작이 있다는 걸 알 수 있게 */
.actions button[data-act="msgmore"] { font-weight: 700; letter-spacing: 1px; }
body[data-mode="teams"] .actions button[data-act="msgmore"] { font-size: 16px; line-height: 1; padding-bottom: 6px; }
#rooms li .rmore { flex: none; background: none; border: 0; color: var(--dim); font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 6px; opacity: 0; }
#rooms li:hover .rmore, #rooms li .rmore:focus-visible { opacity: 1; }
#rooms li .rmore:hover { background: var(--hover); color: var(--text); }
@media (hover: none) { #rooms li .rmore { opacity: .7; } }
body[data-mode="cli"] #rooms li .rmore { font-size: 13px; padding: 0 4px; }

/* ⋯ 더보기는 가만히 있어도 은은하게 보이게 (우클릭을 몰라도 알 수 있도록) */
#rooms li .rmore, .card .rmore, .mem .rmore { flex: none; background: none; border: 0; color: var(--dim); font-size: 17px; line-height: 1; padding: 2px 7px; border-radius: 6px; opacity: .55; }
.card .rmore { margin-left: auto; }
.mem .rmore { margin-left: auto; opacity: .45; }
#rooms li:hover .rmore, .card:hover .rmore, .mem:hover .rmore, .rmore:focus-visible { opacity: 1; }
.rmore:hover { background: var(--hover); color: var(--text); }
@media (hover: none) { #rooms li .rmore, .card .rmore, .mem .rmore { opacity: .75; } }
div.card { cursor: pointer; }
div.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* 글자 크기 · 화면 배율(PC) */
body[data-mode] { font-size: var(--fs, 14px); }
@media (min-width: 821px) {
  #app { zoom: var(--z, 1); width: calc(100% / var(--z, 1)); height: calc(100vh / var(--z, 1)); height: calc(100dvh / var(--z, 1)); }
  #preview { max-height: calc(34vh / var(--z, 1)); }
}
/* 색상 꾸미기 */
.cl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 13px; color: var(--text); margin: 0; }
.cl-row input[type="color"] { width: 44px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; }
.modal.fixed .tabs2 { margin: 6px 0 0; }
.modal.fixed .tabs2 button { padding: 8px 2px; font-size: 13px; }
input[type="range"] { accent-color: var(--accent); }

/* 마우스가 있는 PC: 메시지 툴바는 마우스가 올라간 메시지 하나에만 (선택 상태로 남아 여러 개 뜨지 않게) */
@media (hover: hover) {
  body[data-mode="teams"] .msg.picked .actions { display: none; }
  body[data-mode="teams"] .msg .bubble:hover .actions { display: flex; }
}

/* ═════════ CLI 모드 채팅 줄 개선: 시간 | 표시 | 내용 (3열) ═════════ */
body[data-mode="cli"] .line { display: grid; grid-template-columns: 42px 14px minmax(0, 1fr); column-gap: 8px; align-items: start; white-space: normal; padding: 1px 8px 1px 4px; margin: 0; border-radius: 3px; position: relative; }
body[data-mode="cli"] .line.gap { margin-top: 9px; }
body[data-mode="cli"] .line.own { background: var(--band); }
body[data-mode="cli"] .line .ts { color: var(--dim); font-size: 11px; line-height: 1.75; text-align: right; user-select: none; font-variant-numeric: tabular-nums; }
body[data-mode="cli"] .line .mark { margin: 0; text-align: center; user-select: none; }
body[data-mode="cli"] .line .lbody { min-width: 0; }
body[data-mode="cli"] .line .lmain { white-space: normal; word-break: break-word; overflow-wrap: anywhere; }
body[data-mode="cli"] .line .nick { font-weight: 700; margin-right: 8px; }
body[data-mode="cli"] .line .mbody { display: inline; white-space: pre-wrap; margin: 0; margin-left: 0; }
body[data-mode="cli"] .line .mbody:has(> .md-b) { display: block; margin: 2px 0 0; }
body[data-mode="cli"] .line .lmain > .media, body[data-mode="cli"] .line .lmain > .poll, body[data-mode="cli"] .line .lmain > .meet, body[data-mode="cli"] .line .lmain > div { margin: 3px 0 2px; }
body[data-mode="cli"] .line .badge, body[data-mode="cli"] .line .exp, body[data-mode="cli"] .line .edited { margin-left: 8px; font-size: 11px; color: var(--dim); white-space: nowrap; }
body[data-mode="cli"] .line .exp { color: var(--warn); }
body[data-mode="cli"] .line .badge.pin { color: var(--accent); }
body[data-mode="cli"] .line .quote { margin: 0 0 1px; padding: 0 0 0 8px; border-left: 2px solid var(--border); color: var(--dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-mode="cli"] .line .quote::before { content: "↩ "; }
body[data-mode="cli"] .line .quote > div { display: inline; margin-left: 6px; overflow: visible; max-width: none; }
body[data-mode="cli"] .line .reacts { margin: 2px 0 0; }
body[data-mode="cli"] .line .media, body[data-mode="cli"] .line .reacts { margin-left: 0; }
body[data-mode="cli"] .line .actions { display: none; margin: 3px 0 0; padding: 0; gap: 12px; flex-wrap: wrap; }
body[data-mode="cli"] .line.picked .actions { display: flex; }
body[data-mode="cli"] .line .thread-link { margin-top: 2px; }
body[data-mode="cli"] .line .gone { font-style: italic; }
body[data-mode="cli"] .day { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; font-size: 12px; color: var(--dim); text-align: center; }
body[data-mode="cli"] .day::before, body[data-mode="cli"] .day::after { content: ""; flex: 1; border-top: 1px dashed var(--border); }
@media (max-width: 820px) {
  body[data-mode="cli"] .line { grid-template-columns: 34px 12px minmax(0, 1fr); column-gap: 6px; padding-left: 2px; }
  body[data-mode="cli"] .line .ts { font-size: 10px; }
}

/* 방 비밀번호 재확인 중에는 방 화면을 가린다 */
body.gated #app { visibility: hidden; }
.acc .chk { margin-top: 6px; }
.acc select, .acc input[type=number] { padding: 6px 8px; font-size: 14px; }

/* 입력창 ⋯ 더보기 버튼 (전송 버튼 옆) */
#btn-more { font-weight: 700; letter-spacing: 1px; }
.ctxmenu small.dim { margin-left: 4px; }

/* 명령어 자동완성·도움말 */
.suggest { min-width: 280px; max-width: min(520px, calc(100vw - 16px)); }
.suggest button { flex-wrap: wrap; row-gap: 0; }
.cmd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cmd-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.cmd-table td:first-child { white-space: nowrap; width: 1%; }

/* 채팅 좌우 여백 (팀즈·CLI 공통) */
body[data-mode="teams"] #log { padding-left: calc(16px + var(--ind-l, 0px)); padding-right: calc(16px + var(--ind-r, 0px)); }
body[data-mode="cli"] #log { padding-left: calc(14px + var(--ind-l, 0px)); padding-right: calc(14px + var(--ind-r, 0px)); }
@media (max-width: 820px) {
  body[data-mode="teams"] #log { padding-left: calc(10px + var(--ind-l, 0px)); padding-right: calc(10px + var(--ind-r, 0px)); }
  body[data-mode="cli"] #log { padding-left: calc(8px + var(--ind-l, 0px)); padding-right: calc(8px + var(--ind-r, 0px)); }
}
/* CLI 글 정렬: 오른쪽 / 내 글만 오른쪽 (시간·표시를 오른쪽 끝으로, 내용은 오른쪽 맞춤) */
body[data-mode="cli"][data-align="right"] .line,
body[data-mode="cli"][data-align="mine"] .line.own { grid-template-columns: minmax(0, 1fr) 14px 42px; }
body[data-mode="cli"][data-align="right"] .line .ts,
body[data-mode="cli"][data-align="mine"] .line.own .ts { order: 3; text-align: left; }
body[data-mode="cli"][data-align="right"] .line .mark,
body[data-mode="cli"][data-align="mine"] .line.own .mark { order: 2; }
body[data-mode="cli"][data-align="right"] .line .lbody,
body[data-mode="cli"][data-align="mine"] .line.own .lbody { order: 1; text-align: right; }
body[data-mode="cli"][data-align="right"] .line .quote,
body[data-mode="cli"][data-align="mine"] .line.own .quote { border-left: 0; border-right: 2px solid var(--border); padding: 0 8px 0 0; }
body[data-mode="cli"][data-align="right"] .line .reacts,
body[data-mode="cli"][data-align="mine"] .line.own .reacts { justify-content: flex-end; }
body[data-mode="cli"][data-align="right"] .line .actions,
body[data-mode="cli"][data-align="mine"] .line.own .actions { justify-content: flex-end; }
body[data-mode="cli"][data-align="right"] .line .thread-link,
body[data-mode="cli"][data-align="mine"] .line.own .thread-link { justify-content: flex-end; }
body[data-mode="cli"][data-align="right"] .line .lmain > .media,
body[data-mode="cli"][data-align="mine"] .line.own .lmain > .media { margin-left: auto; }
body[data-mode="cli"][data-align="right"] .line .lmain > .poll,
body[data-mode="cli"][data-align="mine"] .line.own .lmain > .poll { margin-left: auto; }
body[data-mode="cli"][data-align="right"] .line .lmain > .meet,
body[data-mode="cli"][data-align="mine"] .line.own .lmain > .meet { margin-left: auto; }
body[data-mode="cli"][data-align="right"] .line .lmain > div,
body[data-mode="cli"][data-align="mine"] .line.own .lmain > div { margin-left: auto; }
body[data-mode="cli"][data-align="right"] .line .lmain .md-b,
body[data-mode="cli"][data-align="mine"] .line.own .lmain .md-b { margin-left: auto; }
body[data-mode="cli"][data-align="right"] .line .lmain .codeblock,
body[data-mode="cli"][data-align="mine"] .line.own .lmain .codeblock { margin-left: auto; }
body[data-mode="cli"][data-align="right"] .line .media img.photo,
body[data-mode="cli"][data-align="mine"] .line.own .media img.photo { margin-left: auto; }
@media (max-width: 820px) {
body[data-mode="cli"][data-align="right"] .line,
body[data-mode="cli"][data-align="mine"] .line.own { grid-template-columns: minmax(0, 1fr) 12px 34px; }
}

/* 채팅 좌우 여백은 아무리 커도 채팅 영역 폭의 45%까지만 (화면이 좁아도 글이 찌그러지지 않게) */
body[data-mode="teams"] #log { padding-left: calc(16px + min(var(--ind-l, 0px), 45%)); padding-right: calc(16px + min(var(--ind-r, 0px), 45%)); }
body[data-mode="cli"] #log { padding-left: calc(14px + min(var(--ind-l, 0px), 45%)); padding-right: calc(14px + min(var(--ind-r, 0px), 45%)); }
@media (max-width: 820px) {
  body[data-mode="teams"] #log { padding-left: calc(10px + min(var(--ind-l, 0px), 45%)); padding-right: calc(10px + min(var(--ind-r, 0px), 45%)); }
  body[data-mode="cli"] #log { padding-left: calc(8px + min(var(--ind-l, 0px), 45%)); padding-right: calc(8px + min(var(--ind-r, 0px), 45%)); }
}
.mw[hidden]{display:none}

/* 맨 아래로 버튼 · 새 메시지 표시 */
#jump-bottom { position: absolute; left: 50%; transform: translateX(-50%); z-index: 20; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 6px 14px; font-size: 13px; box-shadow: 0 2px 10px rgba(0,0,0,.25); cursor: pointer; font-family: inherit; }
#jump-bottom[hidden] { display: none; }
#jump-bottom.has-new { background: var(--accent); color: #fff; border-color: transparent; font-weight: 600; animation: jb-pop .25s ease-out; }
@keyframes jb-pop { from { transform: translateX(-50%) scale(.9); } to { transform: translateX(-50%) scale(1); } }

/* 입력 중 표시도 채팅 좌우 여백을 따라간다 (#log 와 같은 값) */
body[data-mode="teams"] #typing { padding-left: calc(16px + min(var(--ind-l, 0px), 45%)); padding-right: calc(16px + min(var(--ind-r, 0px), 45%)); }
body[data-mode="cli"] #typing { padding-left: calc(14px + min(var(--ind-l, 0px), 45%)); padding-right: calc(14px + min(var(--ind-r, 0px), 45%)); }
@media (max-width: 760px) {
  body[data-mode="teams"] #typing { padding-left: calc(10px + min(var(--ind-l, 0px), 45%)); padding-right: calc(10px + min(var(--ind-r, 0px), 45%)); }
  body[data-mode="cli"] #typing { padding-left: calc(8px + min(var(--ind-l, 0px), 45%)); padding-right: calc(8px + min(var(--ind-r, 0px), 45%)); }
}
body[data-align="right"] #typing { text-align: right; }

/* 내 메시지 시간 표시: 이름·아바타 없이, 같은 묶음 맨 위에 시간만 오른쪽 정렬로 */
.own-time { display: none; }
body[data-mode="teams"] .own-time { display: block; text-align: right; font-size: 12px; color: var(--dim); margin: 12px 4px -6px 0; }
body[data-mode="teams"] .msg.own .av { display: none; }
body[data-mode="teams"] .msg.own .mhead b, body[data-mode="teams"] .msg.own .mhead time { display: none; }
body[data-mode="teams"] .msg.own .mhead:not(:has(.pinned, .edited, .exp)) { display: none; }
body[data-mode="teams"] .msg.own .mhead { justify-content: flex-end; }
body[data-mode="teams"] .own-time + .msg.own { margin-top: 0; }

/* PC: 메시지 도구 모음은 말풍선 옆(바깥)에 띄워 글을 가리지 않는다 */
@media (min-width: 821px) {
  body[data-mode="teams"] .msg .bubble { position: relative; }
  body[data-mode="teams"] .msg .actions { top: 0; bottom: auto; left: 100%; right: auto; margin-left: 4px; }
  body[data-mode="teams"] .msg.own .actions { left: auto; right: 100%; margin-left: 0; margin-right: 4px; }
  body[data-mode="teams"] .msg .actions::before { content: ""; position: absolute; top: 0; bottom: 0; left: -6px; width: 6px; }
  body[data-mode="teams"] .msg.own .actions::before { left: auto; right: -6px; }
}

/* 보내기 옆 휘발 스위치 */
#composer #btn-eph { flex: none; border: 1px solid var(--border); background: transparent; color: var(--dim); border-radius: 999px; padding: 0 10px; min-height: 32px; font-size: 13px; cursor: pointer; white-space: nowrap; font-family: inherit; }
#composer #btn-eph[hidden] { display: none; }
#composer #btn-eph.on { background: var(--accent, #4f6bed); color: #fff; border-color: transparent; font-weight: 600; }

/* 첨부를 접었을 때·폈을 때 말풍선 폭을 같게 (토글 버튼이 제자리에 있도록) */
body[data-mode="teams"] .msg.att-img.att-open .bubble { width: min(344px, 82%); box-sizing: border-box; }
body[data-mode="teams"] .msg.att-vid.att-open .bubble { width: min(504px, 82%); box-sizing: border-box; }
.media .fold { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 내 글 시간 표시와 말풍선(제한시간 줄)이 겹치지 않게 */
body[data-mode="teams"] .own-time { margin: 12px 4px 3px 0; line-height: 1.3; }

/* 입력 중 표시: 점이 통통 튀고 이름은 강조 */
#typing.active { color: var(--text); font-weight: 500; }
#typing b { color: var(--accent); font-weight: 600; margin-right: 1px; }
.typing-dots { display: inline-flex; gap: 3px; align-items: center; margin-right: 6px; vertical-align: middle; }
.typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); display: block; animation: td-bounce 1.1s infinite ease-in-out; }
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes td-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }

/* '나중에' 탭에서 건너온 뒤 돌아가기 */
#back-saved { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 25; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 6px 14px; font-size: 13px; box-shadow: 0 2px 10px rgba(0,0,0,.25); cursor: pointer; font-family: inherit; white-space: nowrap; }
#back-saved[hidden] { display: none; }

/* 상대 메시지: 이름·시간은 말풍선 바깥(위)에, 말풍선에는 내용만 */
body[data-mode="teams"] .mcol { min-width: 0; max-width: min(640px, 82%); display: flex; flex-direction: column; }
body[data-mode="teams"] .mcol .bubble { max-width: 100%; width: auto; align-self: flex-start; }
body[data-mode="teams"] .mcol .mhead.out { margin: 0 0 3px 2px; }
body[data-mode="teams"] .msg.other.att-img.att-open .mcol { width: min(344px, 82%); }
body[data-mode="teams"] .msg.other.att-vid.att-open .mcol { width: min(504px, 82%); }
body[data-mode="teams"] .msg.other.att-open .bubble { width: 100%; }
body[data-mode="teams"] .mcol .mhead.out.nm { display: none; }

/* 좌우 여백 설정을 입력창·미리보기·답장/첨부 줄에도 똑같이 적용 (#log 와 같은 값) */
body[data-mode="teams"] #composer, body[data-mode="teams"] #preview { margin-left: calc(16px + min(var(--ind-l, 0px), 45%)); margin-right: calc(16px + min(var(--ind-r, 0px), 45%)); }
body[data-mode="cli"] #composer, body[data-mode="cli"] #preview { margin-left: calc(12px + min(var(--ind-l, 0px), 45%)); margin-right: calc(12px + min(var(--ind-r, 0px), 45%)); }
body[data-mode="teams"] #replybar, body[data-mode="teams"] #staged { padding-left: calc(16px + min(var(--ind-l, 0px), 45%)); padding-right: calc(16px + min(var(--ind-r, 0px), 45%)); }
body[data-mode="cli"] #replybar, body[data-mode="cli"] #staged { padding-left: calc(14px + min(var(--ind-l, 0px), 45%)); padding-right: calc(14px + min(var(--ind-r, 0px), 45%)); }
@media (max-width: 820px) {
  body[data-mode] #composer, body[data-mode] #preview { margin-left: calc(8px + min(var(--ind-l, 0px), 45%)); margin-right: calc(8px + min(var(--ind-r, 0px), 45%)); }
  body[data-mode] #replybar, body[data-mode] #staged { padding-left: calc(10px + min(var(--ind-l, 0px), 45%)); padding-right: calc(10px + min(var(--ind-r, 0px), 45%)); }
}

/* 휘발 버튼은 켜짐/꺼짐 상관없이 같은 크기의 원형 아이콘 */
#composer #btn-eph { width: 32px; height: 32px; min-height: 32px; padding: 0; font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex: none; opacity: .55; }
#composer #btn-eph.on { opacity: 1; font-weight: 400; }

/* 내 메시지의 이미지·영상 접기/펴기 글자는 오른쪽 정렬 */
body[data-mode="teams"] .msg.own .media .fold { width: 100%; text-align: right; }

/* 내 말풍선은 안의 글자도 오른쪽 정렬 (코드·표·목록·투표·일정은 읽기 좋게 왼쪽 유지) */
body[data-mode="teams"] .msg.own .bubble { text-align: right; }
body[data-mode="teams"] .msg.own .bubble .mhead { justify-content: flex-end; }
body[data-mode="teams"] .msg.own .bubble :is(.codeblock, .md-list, .md-table, .md-quote, .poll, .meet, .quote, .reacts) { text-align: left; }
body[data-mode="teams"] .msg.own .bubble .reacts { justify-content: flex-start; }

/* 수정: 글자를 통째로 오른쪽 정렬하지 않는다. 짧은 글은 말풍선 오른쪽에 붙고, 여러 줄이면 왼쪽부터 읽히게 */
body[data-mode="teams"] .msg.own .bubble { text-align: left; display: flex; flex-direction: column; align-items: flex-end; }
body[data-mode="teams"] .msg.own .bubble > .mhead { align-self: stretch; justify-content: flex-end; }
body[data-mode="teams"] .msg.own .bubble > :is(.media, .codeblock, .poll, .meet, .quote, .reacts, .md-list, .md-table, .actions) { align-self: stretch; }
body[data-mode="teams"] .msg.own .bubble > .actions { align-self: auto; }
body[data-mode="teams"] .msg.own .bubble > .mbody { align-self: flex-end; max-width: 100%; }

/* 팀즈 반응: 말풍선 아래 가장자리에 걸치는 작은 칩 (1명이면 숫자 없이 이모지만) */
body[data-mode="teams"] .msg .bubble { position: relative; }
body[data-mode="teams"] .msg.has-react { margin-bottom: 14px; }
body[data-mode="teams"] .msg .bubble > .reacts { position: absolute; left: 8px; bottom: -13px; margin: 0; z-index: 2; }
body[data-mode="teams"] .msg.own .bubble > .reacts { left: auto; right: 8px; justify-content: flex-end; }
body[data-mode="teams"] .msg .bubble > .reacts .react { padding: 0 7px; min-height: 24px; border-radius: 999px; box-shadow: 0 1px 3px rgba(0,0,0,.35); font-size: 14px; }
body[data-mode="teams"] .msg .bubble > .reacts .react.mine { border-color: var(--accent); }

/* 제한시간(⏳)은 말풍선 안이 아니라 보낸 시간 옆에 */
body[data-mode="teams"] .own-time .exp { margin-left: 6px; }
body[data-mode="teams"] .mcol .mhead.out.nm { display: flex; }
body[data-mode="teams"] .mcol .mhead.out.nm:not(:has(.exp)) { display: none; }
body[data-mode="teams"] .mcol .mhead.out.nm :is(b, time) { display: none; }

/* 접힌 첨부는 글자 폭만큼만 — 내 글은 오른쪽, 상대 글은 왼쪽 끝이 고정이라 토글 글자는 제자리 */
body[data-mode="teams"] .msg.own .media .fold { width: auto; }
body[data-mode="teams"] .msg.own:not(.att-open) .bubble > .media { align-self: flex-end; }

/* 내 글의 첨부(접힘·펼침 모두)는 말풍선 오른쪽 끝에 붙인다 */
body[data-mode="teams"] .msg.own .bubble > .media { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; max-width: 100%; }
body[data-mode="teams"] .msg.own .bubble > .media .fold { width: auto; text-align: right; }
body[data-mode="teams"] .msg.own .bubble > .media :is(img.photo, video.vid) { margin-left: auto; }

/* 펼친 이미지·영상도 말풍선 폭을 고정하지 않는다 — 내용 크기만큼만 (작은 이미지에 왼쪽 빈 공간이 생기지 않게) */
body[data-mode="teams"] .msg.att-img.att-open .bubble,
body[data-mode="teams"] .msg.att-vid.att-open .bubble { width: auto; }
body[data-mode="teams"] .msg.other.att-img.att-open .mcol,
body[data-mode="teams"] .msg.other.att-vid.att-open .mcol { width: auto; }
body[data-mode="teams"] .msg.other.att-open .bubble { width: auto; }

/* 이모지 선택기: 카테고리 바 + 구역 제목 */
.emoji-pop .cats { display: flex; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.emoji-pop .cats[hidden] { display: none; }
.emoji-pop .cats button { flex: none; background: none; border: 0; font-size: 18px; padding: 3px 7px; border-radius: 6px; opacity: .75; cursor: pointer; }
.emoji-pop .cats button:hover { background: var(--hover); opacity: 1; }
.emoji-pop .grid { position: relative; }
.emoji-pop .grid .cat-h { grid-column: 1 / -1; font-size: 12px; color: var(--dim); padding: 6px 4px 2px; position: sticky; top: -8px; background: var(--surface); z-index: 1; }

/* 모바일 상단바: 제목·부제는 한 줄(…으로 줄임), 버튼은 촘촘하게 — 글자가 잘리거나 두 줄로 밀리지 않게 */
body[data-mode="teams"] #topbar .ttl small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-mode="teams"] #topbar .ttl { overflow: hidden; }
@media (max-width: 820px) {
  body[data-mode="teams"] #topbar { gap: 0; padding-left: 52px; padding-right: 6px; align-items: center; }
  body[data-mode="teams"] #topbar button { padding: 6px 5px; font-size: 16px; min-width: 30px; }
  body[data-mode="teams"] #topbar .ttl b { font-size: 15px; }
  body[data-mode="cli"] #topbar { padding-left: 46px; }
  body[data-mode="cli"] #topbar button { padding: 2px 3px; font-size: 12px; }
  body[data-mode] #topbar .ttl { padding-right: 4px; }
}
/* 모바일 하단: 앱은 보이는 영역(dvh)까지만 쓰지만, 문서 바탕은 툴바 밑까지(lvh) 테마 색으로 칠한다 */
@supports (height: 100lvh) {
  html, body { height: 100lvh; min-height: 100lvh; }
}
html { background-attachment: fixed; }

/* 검색 달력 */
.cal { margin-top: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 8px; }
.cal-h { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.cal-h b { min-width: 92px; text-align: center; font-size: 14px; }
.cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-w { font-size: 11px; color: var(--dim); padding: 2px 0; }
.cal-w.sun { color: #e5534b; }
.cal-d { position: relative; background: none; border: 1px solid transparent; border-radius: 8px; color: var(--text); font-size: 13px; padding: 5px 0; min-height: 40px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.cal-d.none { color: var(--dim); opacity: .5; }
.cal-d.has { font-weight: 700; background: var(--accent-soft); }
.cal-d small { font-size: 10px; font-weight: 600; color: var(--accent); margin-top: 1px; }
.cal-d:hover:not(:disabled) { border-color: var(--accent); }
.cal-d.today { border-color: var(--dim); }
.cal-d.sel { background: var(--accent); color: #fff; border-color: var(--accent); opacity: 1; }
.cal-d.sel small { color: #fff; }
.cal-d:disabled { opacity: .25; cursor: default; }

/* 상대 메시지의 액션 도구 모음: 말풍선 오른쪽 위 모서리 위로 고정 (팀즈처럼 이름 줄 쪽에 떠서 글을 가리지 않는다) */
@media (min-width: 821px) {
  body[data-mode="teams"] .msg.other .actions { top: -34px; bottom: auto; left: auto; right: 0; margin: 0; }
  body[data-mode="teams"] .msg.other.cont .actions { top: -16px; }
  body[data-mode="teams"] .msg.other .actions::before { top: auto; bottom: -8px; left: 0; right: 0; width: auto; height: 8px; } /* 말풍선↔도구 모음 사이로 마우스가 지나가도 안 사라지게 */
}