/* 10-28 Vito 대화 입구 — 타이틀 아래 한 줄. 기업 홈페이지 톤: 얇은 선, 유리 질감, 색은 비토 빛(청록)만. */
.vito-talk{pointer-events:auto;display:flex;align-items:center;gap:6px;width:min(430px,100%);margin-top:28px;padding:5px 6px 5px 5px;border:1px solid rgba(190,214,240,.16);border-radius:999px;background:rgba(8,14,26,.55);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 30px rgba(0,0,0,.25);transition:border-color .3s,box-shadow .3s;font-family:"Inter","IBM Plex Sans KR",sans-serif}
.vito-talk:focus-within{border-color:rgba(159,243,255,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 4px rgba(111,216,255,.08)}
.vito-talk .vito-q{flex:1;min-width:0;border:0;background:none;color:#eef5ff;font:inherit;font-size:14.5px;padding:9px 6px;outline:0}
.vito-talk .vito-q::placeholder{color:#8c9db5}
.vito-talk button{flex:none;width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#b9c9de;cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.vito-talk button svg{width:18px;height:18px}
.vito-talk .vito-mic{position:relative}
.vito-talk .vito-mic:hover,.vito-talk .vito-go:hover{background:rgba(159,243,255,.1);color:#dffbff}
.vito-talk .vito-go{background:rgba(159,243,255,.12);color:#dffbff}
.vito-talk[data-state=listening] .vito-mic{color:#0a1a22;background:#9ff3ff;box-shadow:0 0 0 0 rgba(159,243,255,.5);animation:vito-listen 1.6s ease-out infinite}
.vito-talk[data-state=thinking] .vito-go{color:#6f8aa8;animation:vito-think 1s linear infinite}
.vito-talk[data-state=speaking]{border-color:rgba(159,243,255,.38)}
@keyframes vito-listen{0%{box-shadow:0 0 0 0 rgba(159,243,255,.5)}100%{box-shadow:0 0 0 14px rgba(159,243,255,0)}}
@keyframes vito-think{to{transform:rotate(360deg)}}
.vito-reply{pointer-events:auto;margin:16px 0 0;max-width:430px;font-size:15px;line-height:1.65;color:#cfe3ff;min-height:1.6em;font-family:"Inter","IBM Plex Sans KR",sans-serif;text-wrap:pretty}
.vito-reply:empty{display:none}
.vito-reply::before{content:"Vito";display:block;margin-bottom:4px;font:500 11px/1 "Fragment Mono","IBM Plex Mono",monospace;letter-spacing:.18em;color:#8fe9ff;text-transform:uppercase}
.vito-reply.error{color:#c9a8a8}.vito-reply.error::before{color:#c9a8a8}
@media(max-width:650px){.vito-talk{margin-top:20px}.vito-reply{font-size:14px}}
@media(prefers-reduced-motion:reduce){.vito-talk[data-state=listening] .vito-mic,.vito-talk[data-state=thinking] .vito-go{animation:none}}
/* 10-29 Vito 2 — 계획서 카드 */
.vito-plan{margin-top:14px;max-width:560px;max-height:46vh;overflow:auto;padding:14px 16px;border-radius:14px;background:rgba(14,12,32,.42);border:1px solid rgba(108,243,163,.35);color:#e9e4f2;font-size:13px;line-height:1.5;pointer-events:auto;word-break:keep-all}
.vito-plan h4{margin:0 0 4px;font-size:15px;color:#fff}.vito-plan h4 small{color:#8f86a3;font-weight:400;margin-left:6px}
.vito-plan h5{margin:12px 0 4px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6cf3a3}
.vito-plan ul{margin:0;padding-left:16px}.vito-plan li{margin:3px 0}.vito-plan i{color:#a99fbd;font-style:normal;font-size:12px}
.vito-plan ol{margin:2px 0 6px;padding-left:18px;color:#c9c1d8;font-size:12px}
.vito-plan-act{display:flex;gap:8px;margin-top:12px;position:sticky;bottom:-14px;padding:8px 0;background:linear-gradient(to bottom,rgba(14,12,32,0),rgba(14,12,32,.55) 40%)}
.vito-plan-act button{padding:8px 14px;border-radius:999px;border:1px solid rgba(108,243,163,.5);background:rgba(108,243,163,.15);color:#fff;font:inherit;cursor:pointer}
.vito-plan-act button[data-a="no"]{background:transparent;border-color:rgba(255,255,255,.25)}
.vito-open{display:inline-block;margin-left:10px;color:#6cf3a3;text-decoration:underline}
/* 계획서는 본문 아래가 아니라 오른쪽에 떠 있는 판 — 길어도 화면 밖으로 밀리거나 장 메뉴에 가리지 않게 */
.vito-plan{position:fixed;z-index:60;right:24px;top:132px;width:min(460px,calc(100vw - 32px));max-height:calc(100vh - 220px);margin:0;box-shadow:0 18px 50px rgba(0,0,0,.35);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)} /* 10-31 사장님 «반투명하게» */
@media(max-width:740px){.vito-plan{left:16px;right:16px;top:auto;bottom:calc(16px + env(safe-area-inset-bottom));width:auto;max-height:62vh}}
.vito-mail{white-space:pre-wrap;margin:8px 0;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.05);font:13px/1.55 "Inter","IBM Plex Sans KR",sans-serif;color:#efeaf7;max-height:30vh;overflow:auto}

/* 10-31 이전 대화 — 입력줄 위 작은 단추, 누르면 지난 대화가 펼쳐진다 */
.vito-hist{pointer-events:auto;width:min(430px,100%);margin-top:22px}
.vito-hist[hidden]{display:none}
.vito-hist+.vito-talk{margin-top:10px}
.vito-hist-btn{border:1px solid rgba(190,214,240,.16);background:rgba(255,255,255,.03);color:#9fb3cc;font:500 12px/1 "Inter","IBM Plex Sans KR",sans-serif;padding:7px 12px;border-radius:999px;cursor:pointer}
.vito-hist-btn:hover,.vito-hist-btn[aria-expanded=true]{color:#dffbff;border-color:rgba(159,243,255,.4)}
.vito-hist-list{margin-top:10px;max-height:min(46vh,420px);overflow:auto;padding:4px 12px 4px 2px;display:flex;flex-direction:column;gap:14px;scrollbar-width:thin}
.vh-item small{display:block;font:11px/1 "Fragment Mono","IBM Plex Mono",monospace;color:#6f819a;margin-bottom:6px}
.vh-q{margin:0 0 6px auto;max-width:85%;width:fit-content;padding:8px 12px;border-radius:14px 14px 4px 14px;background:rgba(159,243,255,.1);color:#e7f6ff;font-size:14px;line-height:1.5}
.vh-a{margin:0;max-width:92%;color:#cfe3ff;font-size:14px;line-height:1.6;white-space:pre-wrap}

/* 10-31 계획서 판 닫기 · 휴대폰에서는 아래 메뉴 위에 낮게 */
.vito-x{position:sticky;top:-14px;float:right;margin:-6px -8px 0 8px;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(10,14,28,.6);color:#dfe9f7;font-size:18px;line-height:1;cursor:pointer;z-index:2}
@media(max-width:760px){.vito-plan{bottom:calc(84px + env(safe-area-inset-bottom));max-height:52vh}}
/* 10-31 비토가 «…할까요?» 하면 누르기만 하는 대답 두 개 */
.vito-quick{pointer-events:auto;display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.vito-quick[hidden]{display:none}
.vito-quick button{border:1px solid rgba(190,214,240,.2);background:rgba(10,14,28,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#dfe9f7;font:500 14px/1 "Inter","IBM Plex Sans KR",sans-serif;padding:10px 16px;border-radius:999px;cursor:pointer;transition:border-color .2s,background .2s}
.vito-quick .vq-yes{border-color:rgba(108,243,163,.55);background:rgba(108,243,163,.14);color:#c9ffe0}
.vito-quick button:hover{border-color:rgba(159,243,255,.6)}
.vito-quick button:focus-visible{outline:2px solid #8fe9ff;outline-offset:2px}