:root{--ink:#182434;--muted:#718095;--blue:#256be1;--line:#e4eaf1}*{box-sizing:border-box}body{margin:0;background:#edf3f9;color:var(--ink);font:15px/1.58 Inter,"Noto Sans SC",sans-serif}.app{max-width:720px;height:100svh;margin:auto;background:#fff;display:flex;flex-direction:column}header{height:58px;padding:0 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{font-weight:800;letter-spacing:.02em}.brand span{color:var(--blue)}header i{font-style:normal;color:var(--muted);font-size:12px}.messages{flex:1;overflow:auto;padding:18px 15px;scroll-behavior:smooth}.welcome{text-align:center;color:#69809a;margin-top:32vh}.welcome small{font-size:11px}.bubble{width:max-content;max-width:86%;padding:9px 12px;border-radius:8px;margin:9px 0;overflow-wrap:anywhere;letter-spacing:.015em;word-spacing:.05em}.bubble p{margin:.1em 0 .55em}.bubble p:last-child{margin-bottom:0}.bubble pre{max-width:100%;overflow:auto;background:#172231;color:#e8f0fa;padding:10px;border-radius:6px;white-space:pre-wrap}.bubble code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.9em}.user{margin-left:auto;background:#eaf2ff}.assistant{background:#f1f5f8}.thinking{display:inline-flex;gap:4px;align-items:center;padding:12px 14px}.thinking span{width:5px;height:5px;background:#7e8da0;border-radius:50%;animation:blink 1s infinite ease-in-out}.thinking span:nth-child(2){animation-delay:.15s}.thinking span:nth-child(3){animation-delay:.3s}@keyframes blink{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}.composer{display:flex;gap:8px;padding:10px 12px max(10px,env(safe-area-inset-bottom));border-top:1px solid var(--line)}.composer textarea{flex:1;resize:none;border:1px solid #d5dfe9;border-radius:8px;padding:10px;font:inherit;outline:0;min-height:42px}.composer button{border:0;border-radius:8px;background:var(--blue);color:#fff;padding:0 16px;font:inherit}@media(max-width:420px){.bubble{max-width:91%}.messages{padding:14px 11px}}.header-actions{display:flex;align-items:center;gap:10px}.voice-toggle{border:1px solid #d5dfe9;background:#fff;color:#5d6e82;border-radius:6px;padding:4px 8px;font-size:12px}.voice-toggle.on{color:#256be1;border-color:#256be1}.bubble-tools{display:flex;gap:10px;margin-top:8px;padding-top:6px;border-top:1px solid #dfe6ee}.bubble-tools button{border:0;background:transparent;color:#718095;font-size:11px;padding:0;cursor:pointer}.idle-face{position:relative;width:120px;height:120px;margin:0 auto 16px;border:11px solid #182434;border-right-color:transparent;border-radius:50%;transform:rotate(0deg);animation:idle-look 8s ease-in-out infinite}.eye{position:absolute;width:8px;height:22px;background:#182434;border-radius:6px;top:43px;transform:rotate(25deg);transition:all .2s}.eye-a{left:38px}.eye-b{left:62px}.idle-face:hover{animation-play-state:paused;transform:rotate(0deg) scale(1.03)}.idle-face:hover .eye{height:5px;top:52px;transform:rotate(0)}.assistant .bubble-tools{margin-top:10px}.welcome small{display:block}
100%{transform:rotate(360deg)}}@keyframes idle-look{0%,35%{transform:rotate(0deg)}45%,85%{transform:rotate(180deg)}100%{transform:rotate(180deg)}}.greeting{font-size:26px;font-weight:700;color:#182434;letter-spacing:.02em}.bubble-tools button{width:28px;height:26px;display:inline-grid;place-items:center}.bubble-tools svg,.voice-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.voice-toggle{width:38px;height:34px;padding:0;display:grid;place-items:center}.attach{width:38px;height:42px;display:grid;place-items:center;border:1px solid #d5dfe9;border-radius:8px;color:#5d6e82;cursor:pointer}.attach svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.attach input{display:none}
.image-preview{position:absolute;bottom:68px;left:12px;right:12px;background:#fff;border:1px solid #dbe4ed;border-radius:8px;padding:6px;display:flex;align-items:center;gap:8px}.image-preview[hidden]{display:none}.image-preview img{width:64px;height:64px;object-fit:cover;border-radius:5px}.image-preview button{margin-left:auto;border:0;background:transparent;font-size:22px;color:#718095}.composer{position:relative}
