*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:#f0f4f8;min-height:100vh;display:flex;align-items:center;justify-content:center}#root{width:100%;max-width:420px}.chat-messages::-webkit-scrollbar{width:6px}.chat-messages::-webkit-scrollbar-track{background:transparent}.chat-messages::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.chat-messages::-webkit-scrollbar-thumb:hover{background:#94a3b8}.chat-card{position:relative;background:#fff;border-radius:12px;box-shadow:0 4px 24px #00000014;overflow:hidden;display:flex;flex-direction:column;min-height:520px;max-height:85vh}.chat-header{display:flex;align-items:center;gap:12px;padding:16px 20px;background:#fff;border-bottom:1px solid #e2e8f0}.chat-header-icon{width:40px;height:40px;border-radius:50%;background:#e0f2fe;display:flex;align-items:center;justify-content:center;font-size:1.2rem}.chat-header-text h1{margin:0;font-size:1.1rem;font-weight:600;color:#1e293b}.chat-header-text p{margin:2px 0 0;font-size:.8rem;color:#64748b}.btn-new-chat{margin-left:auto;padding:6px 12px;font-size:.75rem;color:#2563eb;background:transparent;border:1px solid #93c5fd;border-radius:6px;cursor:pointer}.btn-new-chat:hover{background:#eff6ff}.error-banner{margin:0 12px 8px;padding:8px 12px;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;font-size:.8rem;color:#b91c1c}.chat-messages-wrap{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}.chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}.message-row{display:flex;align-items:flex-end;gap:8px}.message-row.user{justify-content:flex-end}.message-row.ai{justify-content:flex-start}.bot-avatar{width:28px;height:28px;border-radius:6px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0}.bubble{max-width:85%;padding:10px 14px;border-radius:12px;word-break:break-word}.bubble.user{background:#2563eb;color:#fff;border-bottom-right-radius:4px}.bubble.ai{background:#f1f5f9;color:#1e293b;border-bottom-left-radius:4px}.bubble-text{font-size:.9rem;line-height:1.4}.bubble-time{font-size:.7rem;color:#94a3b8;margin-top:4px}.bubble.user .bubble-time{color:#ffffffd9}.bubble.typing{padding:12px 16px;display:flex;align-items:center;gap:6px}.bubble.typing .typing-label{font-size:.85rem;color:#64748b}.bubble.typing .dots{display:inline-flex;gap:4px;align-items:center}.bubble.typing .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#94a3b8;animation:bounce .6s ease-in-out infinite}.bubble.typing .dot:nth-child(1){animation-delay:0s}.bubble.typing .dot:nth-child(2){animation-delay:.1s}.bubble.typing .dot:nth-child(3){animation-delay:.2s}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.cursor{animation:blink .8s step-end infinite;margin-left:1px}@keyframes blink{50%{opacity:0}}.suggestion-pills{display:flex;flex-wrap:wrap;gap:8px;padding:10px 16px 12px;border-top:1px solid #e2e8f0;background:#f8fafc}.pill{padding:6px 12px;font-size:.78rem;color:#475569;background:#fff;border:1px solid #e2e8f0;border-radius:20px;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.pill:hover:not(:disabled){background:#eff6ff;border-color:#93c5fd;color:#2563eb}.pill:disabled{opacity:.6;cursor:not-allowed}.chat-input-row{display:flex;gap:8px;padding:12px 16px 16px;background:#fff;border-top:1px solid #e2e8f0}.chat-input{flex:1;padding:10px 14px;font-size:.9rem;border:1px solid #e2e8f0;border-radius:10px;outline:none;transition:border-color .15s}.chat-input:focus{border-color:#2563eb}.chat-input::placeholder{color:#94a3b8}.chat-input:disabled{background:#f1f5f9;cursor:not-allowed}.btn-send{width:44px;height:44px;border:none;border-radius:10px;background:#2563eb;color:#fff;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}.btn-send:hover:not(:disabled){background:#1d4ed8}.btn-send:disabled{background:#93c5fd;cursor:not-allowed}.scroll-to-bottom{position:absolute;right:12px;bottom:12px;width:36px;height:36px;border-radius:50%;border:1px solid #e2e8f0;background:#fff;box-shadow:0 2px 8px #00000014;cursor:pointer;font-size:1rem;color:#64748b;display:flex;align-items:center;justify-content:center;z-index:2}.scroll-to-bottom:hover{background:#f8fafc;color:#2563eb}