.toto-chat, .toto-chat * { box-sizing: border-box; }
.toto-chat { color: #f3f7f7; font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", sans-serif; }
.toto-chat [hidden] { display: none !important; }
.toto-chat button, .toto-chat textarea, .toto-chat input, .toto-chat a { font: inherit; }
.toto-chat button, .toto-chat a { min-width: 44px; min-height: 44px; cursor: pointer; }
.toto-chat :focus-visible { outline: 3px solid #7ed6df; outline-offset: 2px; }
.toto-launch { position: fixed; z-index: 190; inset-inline-end: 20px; bottom: 20px; width: 64px; height: 64px; padding: 2px; border: 3px solid #f7dc2f; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #1a6c80, #0c3543 80%); box-shadow: 0 5px 20px #1d535a66; }
.toto-launch-face { width: 100%; height: 100%; }
.toto-window { position: fixed; z-index: 200; inset-inline-end: 20px; bottom: 20px; width: clamp(380px, 34vw, 440px); height: 800px; max-width: calc(100vw - 40px); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; overflow: hidden; background: #090b0c; border: 1px solid #343b3d; border-radius: 20px; box-shadow: 0 12px 40px #0006; color-scheme: dark; }
/* 무대: 흰 원은 창에서 가장 강한 경계라 시선을 토토에게서 빼앗았음(사장님 10/31). 경계 없는 바다색 빛 위에 세워 토토 윤곽만 또렷하게 */
.toto-head { position: relative; flex: none; text-align: center; padding: 14px 52px 7px; background: radial-gradient(ellipse 62% 58% at 50% 42%, #145a6b 0%, #0e3f4c 52%, #090b0c 100%); }
.toto-hero { width: 164px; height: 164px; margin: 0 auto; transition: width .3s ease, height .3s ease, transform .3s ease; }
.toto-compact .toto-hero { width: 104px; height: 104px; }
.toto-hero[data-expression="think"] { transform: scale(1.12); }  /* 찾아보는 동작이 잘 보이게 잠깐 커짐 */
.toto-name { display: inline-block; margin-top: 4px; padding: 3px 12px; border-radius: 20px; background: #222729; font-weight: 600; }
.toto-close { position: absolute; inset-inline-end: 8px; top: 8px; border: 0; border-radius: 50%; background: transparent; color: #f3f7f7; font-size: 25px !important; }
.toto-language { max-width: 125px; min-height: 44px; border: 1px solid #4b5759; border-radius: 10px; background: #1b2022; color: #f3f7f7; font: inherit; }
.toto-toprow { position: absolute; inset-inline-start: 8px; top: 8px; }
.toto-log { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; scroll-behavior: smooth; }
.toto-message { align-self: flex-start; max-width: 92%; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 12px; padding: 10px 13px; border-radius: 16px 16px 16px 4px; background: #293236; color: #f6f9f9; }
.toto-message.toto-user { align-self: flex-end; margin-inline-start: auto; background: #176c7e; color: #fff; border-radius: 16px 16px 4px 16px; }
.toto-message a { display: inline-flex; align-items: center; color: #a9e7ed; }
.toto-message button, .toto-starters button { margin: 5px 5px 0 0; padding: 8px 12px; border: 1px solid #81c3cc; border-radius: 20px; color: #e5f7f8; background: #26373a; }
.toto-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; white-space: normal; }
.toto-actions a { padding: 8px 12px; border: 1px solid #81c3cc; border-radius: 20px; color: #e5f7f8; background: #26373a; text-decoration: none; }
.toto-actions button { margin: 0; }
.toto-card { display: grid; gap: 3px; margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: #fff; color: #173b40; white-space: normal; }
.toto-card-note { margin: 0 0 3px; font-size: 14px; color: #3f5b5f; }
.toto-card strong { font-size: 23px; line-height: 1.25; }
.toto-card span { font-size: 21px; font-weight: 600; line-height: 1.3; }
.toto-lookup { display: grid; gap: 8px; margin-top: 8px; }
.toto-lookup label { display: grid; gap: 4px; }
.toto-lookup input { width: 100%; min-height: 44px; border: 1px solid #81c3cc; border-radius: 9px; padding: 8px; background: #11191b; color: #fff; }
.toto-lookup button { justify-self: start; }
.toto-starters { max-height: min(35dvh, 220px); overflow-y: auto; margin: 0 0 10px; padding: 5px; border-radius: 14px; background: #1b2224; }
.toto-first { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 8px; }  /* 대화 전 첫인사 아래 처음 버튼 */
.toto-first.toto-folded { display: none; }
.toto-first button { padding: 8px 13px; border: 1px solid #81c3cc; border-radius: 20px; color: #e5f7f8; background: #26373a; }
.toto-more-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.toto-more-list button { margin: 0; }
.toto-compose { flex: none; padding: 8px 12px 6px; }
.toto-compose:last-child { padding-bottom: 14px; }
.toto-compose-row { display: flex; align-items: flex-end; border: 1px solid #536164; border-radius: 24px; background: #1b2022; }
.toto-topic-toggle { flex: none; border: 0; border-radius: 50%; background: transparent; color: #f3f7f7; font-size: 26px !important; }
.toto-choose-topic { flex: 1; min-width: 0; border: 0; background: transparent; color: #e1eded; text-align: start; }
.toto-form { display: flex; flex: 1; min-width: 0; align-items: flex-end; gap: 3px; padding: 2px; }
.toto-form textarea { flex: 1; width: 0; min-height: 46px; max-height: 110px; resize: vertical; border: 0; padding: 10px 4px; background: transparent; color: #f3f7f7; }
.toto-form textarea::placeholder { color: #bdc9ca; }
.toto-send { flex: none; width: 46px; height: 46px; border: 0; border-radius: 50%; background: #f7dc2f; color: #173b40; font-size: 25px !important; font-weight: 700 !important; }
.toto-notice { margin: 7px 2px 0; color: #d2e0e1; font-size: 16px; }
.toto-emergency { flex: none; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 12px; color: #c9d6d7; }
.toto-emergency a { display: inline-flex; align-items: center; justify-content: center; color: #f3f7f7; font-weight: 700; }
.toto-chat button:disabled { opacity: .6; cursor: default; }
@media (max-width: 600px) { .toto-window { inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; border: 0; border-radius: 0; padding-bottom: env(safe-area-inset-bottom); } .toto-launch { inset-inline-end: 16px; bottom: 16px; } }
@media (max-width: 600px) { .toto-hero { width: min(200px, 25dvh); height: min(200px, 25dvh); } }
@media (max-height: 560px) { .toto-hero { width: 104px; height: 104px; } }
@media (prefers-reduced-motion: reduce) { .toto-log { scroll-behavior: auto; } .toto-hero { transition: none; } .toto-hero[data-expression="think"] { transform: none; } }