/* 대화창 — 오른쪽 아래에 접혀 있다가 펴진다. 색·글자는 mi-base.css 토큰만 쓴다. */
.chat-fab{position:fixed;right:18px;bottom:18px;z-index:60;height:38px;padding:0 15px;border:1px solid var(--line);
  border-radius:19px;background:#fff;color:var(--ink);font-size:var(--fs-title);font-weight:600;cursor:pointer;
  box-shadow:0 2px 10px rgba(17,19,24,.12)}
.chat-fab:hover{background:var(--hover)}
.chat-fab .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--pt);margin-right:7px;vertical-align:1px}

.chat{position:fixed;right:18px;bottom:18px;z-index:61;width:400px;max-width:calc(100vw - 36px);
  height:min(620px,calc(100vh - 36px));display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 8px 32px rgba(17,19,24,.18);overflow:hidden}
.chat-h{display:flex;align-items:center;gap:8px;padding:11px 12px;border-bottom:1px solid var(--line)}
.chat-h b{font-size:var(--fs-title)}
.chat-h .sp{flex:1}
.chat-h .src{font-size:var(--fs-cap);color:var(--ink-3)}
.chat-h button{border:0;background:none;color:var(--ink-3);font-size:14px;cursor:pointer;padding:2px 4px}
.chat-b{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:12px}
.chat-f{border-top:1px solid var(--line);padding:9px 10px;display:flex;gap:7px}
.chat-f input{flex:1;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;font-size:var(--fs-body)}
.chat-f input:focus{outline:0;border-color:var(--ink-3)}
.chat-f button{border:1px solid var(--line);border-radius:8px;background:#fff;padding:0 13px;font:inherit;
  font-size:var(--fs-body);font-weight:600;cursor:pointer}
.chat-f button:hover{background:var(--hover)}

.msg-me{align-self:flex-end;max-width:85%;background:#f4f5f7;border-radius:12px 12px 3px 12px;padding:8px 11px}
.msg-mi{display:flex;flex-direction:column;gap:8px}
/* 리드 → 갈래 → 쓸모 → 접힌 근거 → 한계. 먼저 읽을 것이 먼저 보이게. */
.msg-mi .lead{font-size:var(--fs-title);line-height:1.55}
.msg-mi .pt{font-size:var(--fs-body);padding:4px 0 4px 11px;border-left:2px solid var(--line);margin-left:2px}
.msg-mi .use{font-size:var(--fs-body);color:var(--ink-2);background:var(--hover);border-radius:8px;padding:8px 10px}
.msg-mi .limit{font-size:var(--fs-cap);color:var(--ink-3)}
.msg-mi .fold{border-top:1px solid var(--line-2);padding-top:7px}
.msg-mi .fold>summary{font-size:var(--fs-cap);color:var(--ink-3);cursor:pointer;list-style:none}
.msg-mi .fold>summary::-webkit-details-marker{display:none}
.msg-mi .fold>summary::before{content:"▸ ";}
.msg-mi .fold[open]>summary::before{content:"▾ ";}
.msg-mi .fold>summary:hover{color:var(--ink-2)}
.msg-mi .fold>*{margin-top:8px}

.q{border:1px solid var(--line);border-left:2px solid var(--pt);border-radius:0 8px 8px 0;padding:8px 10px}
.q .t{font-size:var(--fs-body);white-space:pre-wrap}
.q .m{margin-top:6px;font-size:var(--fs-cap);color:var(--ink-3)}
.q .m b{color:var(--ink-2);font-weight:600}
.q .go{color:var(--opp);cursor:pointer}

.docs{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.docs .r{display:flex;gap:8px;padding:7px 9px;border-top:1px solid var(--line-2);font-size:var(--fs-body)}
.docs .r:first-child{border-top:0}
.docs .r .nm{flex:1}
.docs .r .v{color:var(--ink-3);font-size:var(--fs-cap);white-space:nowrap;padding-top:2px}

.spread{display:flex;flex-wrap:wrap;gap:4px}
.spread span{font-size:var(--fs-cap);color:var(--ink-2);border:1px solid var(--line);border-radius:9px;padding:1px 7px}
.spread b{font-weight:600;color:var(--ink)}
@media (max-width:820px){.chat{width:calc(100vw - 24px);right:12px;bottom:12px}}