*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0f1117;--bg2:#1a1d27;--bg3:#252836;--accent:#7c6aff;--accent2:#a78bfa;--text:#e8e8f0;--text2:#9098b1;--radius:16px}html,body,#app{height:100%}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:-apple-system,PingFang TC,Noto Sans TC,sans-serif;font-size:15px}.app{flex-direction:column;max-width:680px;height:100%;margin:0 auto;display:flex}header{background:var(--bg2);border-bottom:1px solid #ffffff0f;flex-shrink:0;justify-content:space-between;align-items:center;padding:14px 18px;display:flex}.header-title{align-items:center;gap:12px;display:flex}header .avatar{background:linear-gradient(135deg, var(--accent), var(--accent2));border-radius:12px;justify-content:center;align-items:center;width:42px;height:42px;font-size:22px;display:flex}.name{font-size:16px;font-weight:600}.sub{color:var(--text2);font-size:12px}.clear-btn{color:var(--text2);cursor:pointer;background:0 0;border:1px solid #ffffff1a;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;font-size:14px;transition:all .15s;display:flex}.clear-btn:hover{color:var(--text);background:#ffffff0f}.messages{flex-direction:column;flex:1;gap:12px;padding:20px 16px;display:flex;overflow-y:auto}.empty{color:var(--text2);text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;padding:40px;display:flex}.empty-icon{opacity:.3;font-size:40px}.bubble-wrap{align-items:flex-end;gap:8px;display:flex}.bubble-wrap.user{flex-direction:row-reverse}.avatar-sm{background:linear-gradient(135deg, var(--accent), var(--accent2));border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;font-size:14px;display:flex}.bubble{border-radius:var(--radius);word-break:break-word;max-width:72%;padding:10px 14px;line-height:1.6}.bubble.user{background:linear-gradient(135deg, var(--accent), var(--accent2));color:#fff;border-bottom-right-radius:4px}.bubble.assistant{background:var(--bg3);color:var(--text);border-bottom-left-radius:4px}.bubble.image{padding:6px}.bubble.image img{border-radius:10px;max-width:100%;display:block}.typing{align-items:center;gap:5px;min-width:60px;padding:14px 16px;display:flex}.dot{background:var(--text2);border-radius:50%;width:7px;height:7px;animation:1.2s infinite bounce}.dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s}@keyframes bounce{0%,80%,to{opacity:.4;transform:translateY(0)}40%{opacity:1;transform:translateY(-6px)}}footer{background:var(--bg2);border-top:1px solid #ffffff0f;flex-shrink:0;align-items:flex-end;gap:10px;padding:12px 16px;display:flex}textarea{background:var(--bg3);color:var(--text);resize:none;field-sizing:content;border:1px solid #ffffff14;border-radius:12px;outline:none;flex:1;max-height:120px;padding:10px 14px;font-family:inherit;font-size:15px;line-height:1.5;transition:border-color .15s;overflow-y:auto}textarea:focus{border-color:var(--accent)}textarea::placeholder{color:var(--text2)}textarea:disabled{opacity:.5}.send-btn{background:linear-gradient(135deg, var(--accent), var(--accent2));color:#fff;cursor:pointer;border:none;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;transition:opacity .15s,transform .1s;display:flex}.send-btn:hover:not(:disabled){opacity:.85}.send-btn:active:not(:disabled){transform:scale(.95)}.send-btn:disabled{opacity:.35;cursor:not-allowed}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:2px}