/* Single chat presentation layer; no home/discovery selectors or storage behavior. */
body.chat-active {overflow:hidden}
body.chat-active #notice:not([hidden]) {position:fixed;top:56px;left:10px;right:10px;z-index:90;margin:0;max-height:25vh;overflow:auto}
.chat-room {position:fixed;inset:0;z-index:70;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:56px minmax(0,1fr);align-items:stretch;gap:0;margin:0;background:var(--bg);width:100%;height:100dvh}
.chat-head {display:flex;align-items:center;gap:8px;padding:0 10px;border-bottom:1px solid var(--line);min-width:0}
.chat-head button {flex:none;background:transparent;width:36px;height:40px;font-size:26px;color:var(--muted)}
.chat-avatar,.chat-avatar .portrait {width:32px;height:36px;min-height:0;flex:none;border-radius:8px}
.chat-avatar .portrait:after {display:none}
.chat-info {flex:1;min-width:0}
.chat-who,.chat-context {display:flex;gap:8px;min-width:0;line-height:1.4}
.chat-who strong {font-size:14px;white-space:nowrap}
.chat-relation {font-size:11px;color:var(--muted);white-space:nowrap}
.chat-context span {font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:65%}
.chat-context .chat-scene {max-width:40%}
.chat-room .reader-paper {display:flex;flex-direction:column;min-height:0;width:min(760px,100%);max-width:none;margin:0 auto;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;overflow:hidden}
.chat-transcript {flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:14px 12px;scrollbar-gutter:stable;overflow-wrap:anywhere}
.chat-transcript .scene-text {font:inherit;font-size:14px;line-height:1.65;margin:0 0 14px;color:var(--muted)}
.chat-transcript .speech {font-size:14px;line-height:1.6;margin:0 0 12px;padding:10px 12px;background:var(--panel)}
.chat-transcript .turn-divider {font-size:11px;margin:12px 0}
.chat-room .composer {flex:none;position:relative;padding:8px 10px calc(8px + env(safe-area-inset-bottom));margin:0;border:0;border-top:1px solid var(--line);border-radius:0;background:var(--bg)}
.chat-room .composer label {display:flex;justify-content:space-between;margin:0 0 4px;font-size:11px;color:var(--muted)}
.chat-room #draft {display:block;min-height:44px;max-height:114px;height:44px;padding:9px 10px;resize:none;font-size:16px;line-height:1.45;overflow-y:auto}
.chat-room .composer-bottom {display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:6px;margin-top:6px}
.chat-room .chat-mode {width:auto;max-width:100px;height:40px;padding:5px;font-size:12px;background:transparent}
.chat-room #btnSay {width:auto;flex:1;min-width:74px;min-height:42px;padding:6px 12px;font-size:14px}
.chat-room #voiceBtn,.chat-room #mindBtn {width:auto;min-height:36px;font-size:11px;padding:6px;background:transparent;color:var(--muted)}
.chat-room .composer-bottom #draftStatus {order:5;flex:0 0 100%;font-size:10px;line-height:1.3;min-height:13px;margin:0;color:var(--muted)}
.chat-room .chat-legal {margin:4px 0 0!important;font-size:10px;line-height:1.35;color:var(--muted)}
.chat-room #suggestBox {display:flex;flex-direction:row;gap:5px;flex-wrap:wrap;margin:0 0 6px;padding:0;border:0;background:transparent}
.chat-room #suggestBox:empty {display:none}
.chat-room.chat-drafting #suggestBox {display:none}
.chat-room .suggest-head {width:100%;font-size:10px;margin:0;line-height:1.2}
.chat-room .suggest-chip {flex:1;min-width:0;max-width:calc(50% - 3px);margin:0;padding:6px 8px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:11px;min-height:32px}
.chat-room .suggest-toggle {font-size:10px}
.chat-room .talk-flow {gap:7px;margin:0;padding:0;border:0;min-width:0}
.chat-room .talk-char,.chat-room .talk-guest {max-width:88%;min-width:0;overflow-wrap:anywhere}
.chat-room .talk-char {padding:8px 10px;border-radius:12px 12px 12px 3px;background:var(--panel)}
.chat-room .talk-char strong {font-size:11px;margin-bottom:2px}
.chat-room .talk-char p,.chat-room .talk-guest p {font-size:14px;line-height:1.55;overflow-wrap:anywhere}
.chat-room .talk-guest p {padding:8px 10px;border-radius:12px 12px 3px 12px}
.chat-room .talk-act {font-family:inherit;font-size:12px;line-height:1.45;max-width:90%;margin:0;color:var(--muted);overflow-wrap:anywhere}
/* ★속마음·장면 지문 — ★겉말과 ★눈으로 갈라 보이게 한다 (2026-09-24)
   ★style.css 231줄에 ★이미 기울임·serif·가운데가 있었는데
   ★이 줄이 font-family:inherit 로 ★덮어 ★손님에겐 ★한 번도 안 보였다.
   ★.talk-act 는 <em> 이라 ★본래 기울임이다 — ★그래서 ★따로 뗐다. */
.chat-room .talk-stage {font-family:Georgia,'Batang',serif;font-style:italic;font-size:14px;line-height:1.6;align-self:center;text-align:center;max-width:88%;margin:2px auto;color:#9a90ab;overflow-wrap:anywhere}
.chat-room .rebranch {display:block;margin:2px 0 0 auto;min-height:24px;font-size:10px;padding:1px 5px;color:var(--muted)}
.chat-room .talk-wait {font-size:12px;padding:7px 10px}
.chat-room .talk-warn {align-self:flex-end;max-width:88%;margin:8px 0 8px auto;padding:10px 12px;border:1px solid #b88b84;border-radius:12px 12px 3px 12px;background:var(--panel);font-size:12px;color:var(--text);overflow-wrap:anywhere}
.chat-room .talk-warn .waitmsg {display:inline-block;margin:6px 0;white-space:pre-wrap;font-size:14px}
.chat-room .talk-warn button {min-height:40px;font-size:12px}
.chat-room .sysnote {align-self:center;max-width:90%;margin:8px auto;padding:5px 10px;border:1px solid var(--line);border-radius:12px;background:var(--panel);text-align:center;font-size:12px;line-height:1.5;animation:chat-feedback-settle 3s ease-out both}
.chat-room .sysnote strong,.chat-room .sysnote em {font:inherit;color:var(--text)}
.chat-room .sysnote-tag {font-size:10px;color:var(--muted);margin-right:5px}
@keyframes chat-feedback-settle {from{border-color:var(--gold)}to{border-color:var(--line)}}
@media(prefers-reduced-motion:reduce){.chat-room .sysnote{animation:none}}
.chat-room .talk-char p.chat-long {max-height:160px;overflow:hidden}
.chat-room .chat-expand {display:block;margin-top:6px;padding:4px 0;background:transparent;color:var(--gold);font-size:12px}
.chat-room .chat-typing-indicator {display:flex;align-items:center;gap:8px;padding:8px 12px;background:transparent;border:0}
.chat-room .chat-typing-indicator .chat-avatar {margin:0}
.chat-room .chat-typing-indicator p {margin:0;font-size:13px;color:var(--muted);display:flex;align-items:center}
.chat-room .chat-typing-indicator .typing-dots {display:inline-block;width:1.2em;overflow:hidden;vertical-align:bottom;animation:chat-typing-dots 1.5s steps(4,end) infinite}
@keyframes chat-typing-dots {from{max-width:0}to{max-width:1.2em}}
@media(prefers-reduced-motion:reduce){.chat-room .chat-typing-indicator .typing-dots{animation:none}}
.chat-room .chat-latest {position:absolute;right:max(14px,calc((100% - 740px)/2));bottom:calc(var(--chat-composer-height,180px) + 10px);z-index:3;min-height:40px;padding:8px 12px;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:20px;font-size:12px;box-shadow:0 2px 8px #0006}
.chat-room .chat-backdrop {position:absolute;inset:0;z-index:10;background:#0008}
.chat-room .chat-tools {position:absolute;right:0;bottom:0;z-index:11;width:min(420px,100%);height:min(56%,500px);overflow:auto;overscroll-behavior:contain;padding:0 14px 20px;background:var(--panel);border:1px solid var(--line);border-radius:18px 18px 0 0}
.chat-tools-head {position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:12px 0;background:var(--panel);z-index:1}
.chat-tools-head h2 {margin:0;font-size:18px}
.chat-tools-head button {width:40px;height:40px;background:var(--soft);border-radius:50%;font-size:24px}
.chat-tool-section {padding:10px 0;border-top:1px solid var(--line)}
.chat-tool-section h3 {font-size:13px;color:var(--muted);margin:0 0 8px}
.chat-tool-section:has(>h3:only-child) {display:none}
.chat-tool-section>button {display:block;width:100%;margin:6px 0;text-align:left;font-size:13px}
.chat-tool-section .setting-details {margin:0}
.chat-room #mindPanel:not(:empty) {position:absolute;bottom:100%;left:8px;right:8px;z-index:5;max-height:45vh;overflow:auto;background:var(--panel);padding:10px;border:1px solid var(--line)}
@media(min-width:761px){.chat-room{grid-template-rows:60px minmax(0,1fr)}.chat-head{padding:0 max(20px,calc((100vw - 760px)/2))}.chat-room .chat-tools{height:100%;max-height:none;border-radius:0}.chat-room .chat-legal{font-size:11px}.chat-transcript{padding:20px}}

/* 후보 D — 총괄 · 2026-09-24
   대표 「다른 어플들은 흰색이 반짝반짝 하던데」
   ★A·B·C 는 ★본문 색을 ★하나도 안 건드렸다(셋 다 rgb(236,228,243) = 운영과 같음).
   ★D 는 ★거기를 건드린다 — ★흰색을 ★진짜로 올리고 ★바탕을 ★더 내려 ★차이를 벌린다. */
.chat-room{
  --bg:#08070d;          /* 바탕을 더 깊게 */
  --panel:#191722;
  --line:#ffffff26;
  --text:#ffffff;
  --muted:#b9b3c6;       /* 흐린 글씨도 한 단 올린다 */
  --gold:#f5d39d;
}
/* ★인물 말 — ★여기가 제일 오래 읽힌다 */
.chat-room .talk-char{background:#1e1b28;border:1px solid #ffffff14}
.chat-room .talk-char p{color:#ffffff;font-size:15px;line-height:1.62;font-weight:450;letter-spacing:-.003em}
.chat-room .talk-char strong{color:#f5d39d;font-size:12px;font-weight:600;letter-spacing:.01em}
/* ★손님 말풍선은 ★금빛 바탕이라 ★글씨를 밝히면 ★오히려 안 읽힌다 — ★크기만 맞춘다 */
.chat-room .talk-guest p{font-size:15px;line-height:1.62}
/* ★속마음은 ★겉말과 ★갈라 보여야 한다 — ★오늘 올린 것을 ★지키고 ★한 단만 밝힌다 */
.chat-room .talk-stage{color:#b3a9c6}
.chat-room .talk-act{color:#b9b3c6;font-size:12px}
.chat-room #draft{font-size:16px;color:#ffffff}
.chat-room .suggest-chip{color:#f4f1fa;border-color:#ffffff30}

/* 폰 자판이 떠 있는 동안(chat-kb, 터치 화면만): 입력칸과 단추만 남겨 대화 칸을 넓힌다 */
@media(max-width:767px){
  .chat-transcript{flex:0 1 auto}
  .chat-room.chat-kb #suggestBox,.chat-room.chat-kb .composer>label[for="draft"],.chat-room.chat-kb #draftStatus,.chat-room.chat-kb .chat-legal{display:none!important}

  /* 폰 추천칸 — nowrap 로 두면 .suggest-head(width:100%)가 34px 로 찌그러져
     글자가 세로로 선다(2026-09-26 미리보기에서 실측). 머리말은 제 줄에 두고
     칩만 접히게 한다. */
  .chat-room #suggestBox {
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: 4px;
    align-items: center;
    row-gap: 6px;
    column-gap: 6px;
  }
  .chat-room .suggest-head {
    flex: 1 0 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
  }
  .chat-room .suggest-chip {
    flex: 0 1 auto;
    max-width: 100%;
    font-size: 14px;
    min-height: 40px;
    padding: 8px 12px;
  }

  .chat-room .talk-char {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    background: transparent;
    border: none;
    padding: 0;
    max-width: 100%;
  }
  .chat-room .talk-char .portrait {
    display: block !important;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
  }
  .chat-room .talk-char .chat-char-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .chat-room .talk-char p {
    background: #1e1b28;
    border: 1px solid #ffffff14;
    padding: 8px 10px;
    border-radius: 12px 12px 12px 3px;
    font-size: 16px;
    line-height: 1.6;
    max-width: 85%;
    margin: 0;
  }
  .chat-room .talk-char strong {
    display: block;
    margin-bottom: 2px;
  }
  .chat-room .talk-stage,
  .chat-room .talk-guest.is-inner p,
  .chat-room .talk-guest.is-direct p {
    background: transparent;
    color: var(--muted);
    font-size: 14px;
    border: none;
    padding: 0;
  }
  .chat-room .talk-guest.is-inner,
  .chat-room .talk-guest.is-direct {
    background: transparent;
    border: none;
  }
}

@media (min-width: 768px) {
  .chat-room .talk-char .portrait {
    display: none !important;
  }
  .chat-room .talk-char .chat-char-content {
    display: contents;
  }
}