*{box-sizing:border-box}body{margin:0;background:#f2f4f8;font-family:Inter,system-ui,sans-serif}.chat-wrapper{width:820px;height:620px;background:#fff;margin:40px auto;border-radius:16px;display:flex;flex-direction:column;box-shadow:0 12px 35px #0000001f;overflow:hidden}.chat-header{padding:14px 16px 16px;background:#2563eb;color:#fff;position:relative}.chat-header h3{margin:0;text-align:center;font-size:15px;font-weight:600}.header-actions{display:flex;gap:8px;margin-top:10px;justify-content:center}.search-input{width:220px;padding:7px 10px;border-radius:8px;border:none;outline:none;font-size:13px}.search-input::-moz-placeholder{color:#6b7280}.search-input::placeholder{color:#6b7280}.search-input:focus{outline:2px solid rgba(255,255,255,.6)}.export-btn{background:#1e40af;color:#fff;border:none;border-radius:8px;padding:7px 12px;cursor:pointer;font-size:13px}.export-btn:hover{background:#1e3a8a}.theme-toggle{position:absolute;right:14px;top:12px;background:transparent;border:none;font-size:18px;cursor:pointer;color:#fff}.chat-body{flex:1;padding:16px;overflow-y:auto;background:#f8fafc;-webkit-overflow-scrolling:touch}.msg{display:flex;margin-bottom:12px}.msg.user{justify-content:flex-end}.msg.bot{justify-content:flex-start}.bubble{max-width:78%;padding:12px 16px;border-radius:16px;font-size:14px;line-height:1.5;white-space:pre-wrap;animation:fadeIn .2s ease-in}.msg.user .bubble{background:#2563eb;color:#fff;border-bottom-right-radius:6px}.msg.bot .bubble{background:#e5e7eb;color:#111827;border-bottom-left-radius:6px}.time{display:block;margin-top:6px;font-size:11px;opacity:.6;text-align:right}.msg.bot .time{text-align:left}.reactions{display:flex;gap:6px;margin-top:6px}.reactions span{cursor:pointer;font-size:15px;opacity:.6}.reactions span:hover{opacity:1}.chat-input{display:flex;gap:10px;padding:14px;border-top:1px solid #e5e7eb;background:#fff}.chat-input input{flex:1;padding:11px;border-radius:10px;border:1px solid #d1d5db;outline:none;font-size:14px}.chat-input input:focus{border-color:#2563eb}.chat-input button{padding:11px 18px;border:none;border-radius:10px;background:#2563eb;color:#fff;font-weight:500;cursor:pointer}.chat-input button:hover{background:#1e40af}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}body.dark{background:#0f172a}body.dark .chat-wrapper{background:#020617}body.dark .chat-header{background:#1e40af}body.dark .chat-body{background:#020617}body.dark .msg.bot .bubble{background:#1f2933;color:#e5e7eb}body.dark .chat-input{background:#020617;border-top:1px solid #1f2933}body.dark .chat-input input{background:#020617;border:1px solid #374151;color:#e5e7eb}body.dark .search-input{background:#020617;color:#e5e7eb}body.dark .search-input::-moz-placeholder{color:#9ca3af}body.dark .search-input::placeholder{color:#9ca3af}body.dark .time{color:#9ca3af}@media(max-width:640px){.chat-wrapper{width:100%;height:100vh;margin:0;border-radius:0}.bubble{max-width:90%;font-size:13.5px}.header-actions{flex-direction:column;align-items:stretch}.search-input,.export-btn{width:100%}}@media(max-width:480px){.chat-wrapper{height:100dvh}.chat-body{padding-bottom:90px}.chat-input{position:fixed;bottom:0;left:0;width:100%;z-index:10;border-radius:0}}