*{box-sizing:border-box;padding:0;margin:0}body,html{max-width:100vw;overflow-x:hidden;height:100vh}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2)}.chat-container{display:flex;flex-direction:column;height:100vh;max-width:800px;margin:0 auto;background:#fff;box-shadow:0 0 40px rgba(0,0,0,.3)}.chat-header{display:flex;align-items:center;padding:20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.1)}.header-text{flex:1 1}.chat-header h1{font-size:1.5rem;margin:0 0 5px;color:#fff}.status-text{font-size:.9rem;opacity:.9;margin:0;color:#fff;text-align:left}.avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0;margin-right:12px}.bot-avatar{background:linear-gradient(135deg,#667eea,#764ba2)}.user-avatar{background:linear-gradient(135deg,#f093fb,#f5576c);margin-right:0;margin-left:12px}.messages-container{flex:1 1;overflow-y:auto;padding:20px;background:#f5f7fa;scroll-behavior:smooth}.message-wrapper{display:flex;margin-bottom:20px;animation:fadeIn .3s ease-in}.message-wrapper.user{flex-direction:row-reverse}.message-wrapper.system{justify-content:center}.message-wrapper.system .message-bubble{background:rgba(0,0,0,.05);color:#666;font-size:.9rem;max-width:80%}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message-bubble{max-width:70%;padding:12px 16px;border-radius:18px;position:relative;word-wrap:break-word}.message-bubble.bot{background:#fff;color:#333;border-bottom-left-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.1)}.message-bubble.user{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-bottom-right-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.1)}.message-bubble.system{background:rgba(0,0,0,.05);color:#666}.message-text p{margin:0;line-height:1.4;font-size:.95rem}.message-text p+p{margin-top:8px}.message-text strong{font-weight:600}.message-time{display:block;font-size:.7rem;opacity:.6;margin-top:4px;text-align:right}.audio-message{display:flex;flex-direction:column;gap:8px}.audio-label{font-size:.9rem;opacity:.9}.audio-message audio{width:250px;height:32px;border-radius:16px}.input-container{display:flex;align-items:center;justify-content:center;padding:20px;background:#fff;border-top:1px solid #e0e0e0;position:relative;min-height:90px}.recording-indicator{position:absolute;top:10px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;font-size:.9rem;color:#f5576c;font-weight:600}.pulse-dot{width:10px;height:10px;border-radius:50%;background:#f5576c;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}.recording-time{font-feature-settings:"tnum";font-variant-numeric:tabular-nums;min-width:45px}.mic-button{width:60px;height:60px;border-radius:50%;border:none;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:1.8rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px rgba(102,126,234,.4);-moz-user-select:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.mic-button:hover:not(:disabled){transform:scale(1.05);box-shadow:0 6px 20px rgba(102,126,234,.5)}.mic-button:active:not(:disabled){transform:scale(.95)}.mic-button.recording{background:linear-gradient(135deg,#f093fb,#f5576c);animation:recordingPulse 1.5s ease-in-out infinite;box-shadow:0 4px 20px rgba(245,87,108,.6)}@keyframes recordingPulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.mic-button:disabled{opacity:.4;cursor:not-allowed}.hint-text{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);font-size:.75rem;color:#999;white-space:nowrap}.messages-container::-webkit-scrollbar{width:6px}.messages-container::-webkit-scrollbar-track{background:transparent}.messages-container::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}.messages-container::-webkit-scrollbar-thumb:hover{background:#aaa}@media (max-width:768px){.chat-container{max-width:100%}.message-bubble{max-width:85%}.audio-message audio{width:200px}}