/* 질문 챗봇 — styles.css 의 팔레트 변수를 그대로 쓴다 */
.chat-fab,.chat{--ease:cubic-bezier(.16,1,.3,1);--shadow:0 14px 40px -12px rgba(51,38,61,.38),0 2px 6px rgba(51,38,61,.08)}

/* ── 플로팅 버튼 ── */
.chat-fab{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));z-index:20;width:56px;height:56px;padding:0;border:0;border-radius:50%;background:var(--ink);color:var(--base);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow);transition:transform .35s var(--ease),opacity .2s}
.chat-fab svg{width:26px;height:26px}
.chat-fab:hover{transform:translateY(-2px)}
.chat-fab:active{transform:scale(.94)}
.chat-fab.away{opacity:0;transform:scale(.6);pointer-events:none}

/* ── 패널 ── */
.chat{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));z-index:30;display:flex;flex-direction:column;width:392px;height:min(640px,calc(100dvh - 36px));background:var(--card);border-radius:24px;box-shadow:var(--shadow),0 0 0 1px var(--line);overflow:hidden;transform-origin:100% 100%;transition:transform .4s var(--ease),opacity .22s,visibility 0s}
.chat:not(.open){opacity:0;visibility:hidden;pointer-events:none;transform:translateY(14px) scale(.96);transition:transform .25s ease-in,opacity .18s,visibility 0s .25s}

/* 머리 */
.chat-head{flex:none;display:flex;align-items:center;gap:10px;padding:14px 12px 12px 18px;border-bottom:1px solid var(--line)}
.chat-mark{flex:none;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--ink);display:grid;place-items:center}
.chat-mark svg{width:18px;height:18px}
.chat-title{flex:1;min-width:0;line-height:1.25}
.chat-title b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-title span{display:block;font-size:12.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-actions{flex:none;display:flex;gap:2px}
.chat-icon{width:38px;height:38px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .2s,transform .2s var(--ease)}
.chat-icon svg{width:20px;height:20px}
.chat-icon:hover{background:var(--soft)}
.chat-icon:active{transform:scale(.92)}
.chat-icon[aria-pressed="true"]{background:var(--ink);color:var(--base)}

/* 본문 */
.chat-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 18px 8px;display:flex;flex-direction:column;gap:14px;background:var(--base)}

.msg{max-width:88%;font-size:15px;line-height:1.62;overflow-wrap:anywhere;animation:chat-in .35s var(--ease) both}
.msg.user{align-self:flex-end;padding:9px 14px;background:var(--accent);color:var(--ink);border-radius:18px 18px 4px 18px;white-space:pre-wrap}
.msg.assistant{align-self:flex-start;padding:11px 15px;background:var(--card);border-radius:4px 18px 18px 18px;box-shadow:0 1px 0 var(--line)}
.msg.assistant p{margin:0 0 8px}
.msg.assistant p:last-child,.msg.assistant ul:last-child{margin-bottom:0}
.msg.assistant ul{margin:0 0 8px;padding-left:18px}
.msg.assistant li{margin:3px 0}
.msg.assistant a{color:inherit;text-decoration-color:var(--accent);text-decoration-thickness:2px}
.msg.error{align-self:flex-start;padding:10px 14px;background:var(--soft);border-left:3px solid var(--stop);border-radius:4px 14px 14px 4px}
@keyframes chat-in{from{opacity:0;transform:translateY(6px)}}

/* 답을 기다리는 동안 */
.chat-wait{display:flex;align-items:center;gap:8px;color:var(--mute);font-size:13.5px}
.chat-dots{display:flex;gap:4px}
.chat-dots i{width:6px;height:6px;border-radius:50%;background:var(--mute);animation:chat-dot 1.2s ease-in-out infinite}
.chat-dots i:nth-child(2){animation-delay:.15s}
.chat-dots i:nth-child(3){animation-delay:.3s}
@keyframes chat-dot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* 빈 화면 */
.chat-empty{margin-top:auto;padding-bottom:6px}
.chat-empty h3{margin:0 0 4px;font-size:21px;line-height:1.3;font-weight:800;letter-spacing:-.02em}
.chat-empty p{margin:0 0 16px;color:var(--mute);font-size:14px}
.chat-suggest{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.chat-suggest li{animation:chat-in .45s var(--ease) both;animation-delay:calc(var(--i) * 60ms)}
.chat-suggest button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:13px 2px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);font:500 14.5px/1.4 var(--sans);text-align:left;cursor:pointer;transition:padding .3s var(--ease)}
.chat-suggest svg{flex:none;width:16px;height:16px;color:var(--mute);transition:transform .3s var(--ease)}
.chat-suggest button:hover{padding-left:8px}
.chat-suggest button:hover svg{transform:translateX(3px);color:var(--ink)}

/* 대화 목록 */
.chat-list{list-style:none;margin:-6px 0 0;padding:0}
.chat-list li{display:flex;align-items:center;gap:4px;border-bottom:1px solid var(--line);animation:chat-in .4s var(--ease) both;animation-delay:calc(var(--i) * 40ms)}
.chat-list .open{flex:1;min-width:0;padding:13px 0 13px 12px;border:0;border-left:3px solid transparent;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:padding .3s var(--ease)}
.chat-list li.on .open{border-left-color:var(--accent)}
.chat-list .open:hover{padding-left:16px}
.chat-list .open b{display:block;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-list .open small{color:var(--mute);font-size:12.5px}
.chat-list .chat-icon{flex:none;color:var(--mute)}
.chat-list .chat-icon:hover{color:var(--stop)}
.chat-note{margin:auto 0;color:var(--mute);font-size:14px;text-align:center}
.chat-note .chat-wait{justify-content:center}
.chat-foot{margin:14px 0 6px;color:var(--mute);font-size:12.5px}

/* 입력 */
.chat-form{flex:none;padding:10px 14px calc(14px + env(safe-area-inset-bottom));background:var(--base)}
.chat-form[hidden]{display:none}
.chat-box{display:flex;align-items:flex-end;gap:6px;padding:6px 6px 6px 16px;background:var(--card);border-radius:26px;box-shadow:0 0 0 1px var(--line);transition:box-shadow .2s}
.chat-box:focus-within{box-shadow:0 0 0 2px var(--ink)}
.chat-box textarea{flex:1;min-width:0;min-height:40px;max-height:120px;padding:9px 0;border:0;outline:0;background:transparent;color:var(--ink);font:16px/1.4 var(--sans);resize:none;overflow-y:hidden}
.chat-box textarea::placeholder{color:var(--mute)}
.chat-send{flex:none;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--ink);color:var(--base);display:grid;place-items:center;cursor:pointer;transition:transform .2s var(--ease),opacity .2s,background .2s}
.chat-send svg{width:20px;height:20px}
.chat-send:active{transform:scale(.9)}
.chat-send:disabled{opacity:.28;cursor:default}
.chat-send.stop{background:var(--stop);color:#fff}

/* 폰: 전체 화면 */
@media(max-width:560px){
  .chat{top:0;right:0;bottom:auto;left:0;width:auto;height:100dvh;border-radius:0;box-shadow:none;transform-origin:50% 100%}
  .chat:not(.open){transform:translateY(24px)}
  .chat-head{padding-top:calc(14px + env(safe-area-inset-top))}
  .chat-body{-webkit-overflow-scrolling:touch}
}
@media(prefers-reduced-motion:reduce){
  .chat,.chat-fab,.msg,.chat-suggest li,.chat-list li{animation:none;transition:none}
  .chat-dots i{animation:none;opacity:.6}
}