.chat-container{display:flex;flex-direction:column;height:100%;max-height:600px;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,.1);background-color:#fff;overflow:hidden}.chat-header{padding:15px;background-color:#2c3e50;color:#fff;display:flex;justify-content:space-between;align-items:center}.chat-header h2{margin:0;font-size:1.2rem}.agent-badge{display:flex;align-items:center;font-size:.8rem;background-color:rgba(255,255,255,.2);padding:4px 8px;border-radius:12px}.agent-indicator{width:8px;height:8px;background-color:#2ecc71;border-radius:50%;margin-right:5px;-webkit-animation:pulse 2s infinite;animation:pulse 2s infinite}@-webkit-keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}@keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.messages-container{flex:1;padding:15px;overflow-y:auto;display:flex;flex-direction:column}.message{margin-bottom:15px;max-width:80%}.message.visitor{align-self:flex-end}.message.ai,.message.agent,.message.system{align-self:flex-start}.message-wrapper{display:flex;align-items:flex-start}.avatar{width:32px;height:32px;border-radius:50%;margin-right:10px;display:flex;align-items:center;justify-content:center}.message-bubble{padding:10px 15px;border-radius:18px;position:relative}.message.visitor .message-bubble{background-color:#3498db;color:#fff;border-bottom-right-radius:4px}.message.ai .message-bubble{background-color:#f2f2f2;color:#333;border-bottom-left-radius:4px}.message.agent .message-bubble{background-color:#27ae60;color:#fff;border-bottom-left-radius:4px}.message.system .message-bubble{background-color:#f39c12;color:#fff;border-bottom-left-radius:4px}.sender-name{font-size:.7rem;opacity:.7;margin-bottom:3px}.message-content{word-break:break-word}.message-content a{color:inherit;text-decoration:underline}.message-content ul{list-style-type:disc;margin-left:20px}.message-content p+p{margin-top:10px}.message-time{font-size:.7rem;opacity:.7;text-align:right;margin-top:5px}.typing-indicator{display:flex;align-items:center;justify-content:flex-start;height:20px}.typing-indicator span{width:8px;height:8px;background-color:#aaa;border-radius:50%;display:inline-block;margin:0 2px;-webkit-animation:bounce 1.5s infinite;animation:bounce 1.5s infinite}.typing-indicator span:nth-child(2){-webkit-animation-delay:.2s;animation-delay:.2s}.typing-indicator span:nth-child(3){-webkit-animation-delay:.4s;animation-delay:.4s}@-webkit-keyframes bounce{0%,60%,to{-webkit-transform:translateY(0);transform:translateY(0)}30%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}}@keyframes bounce{0%,60%,to{-webkit-transform:translateY(0);transform:translateY(0)}30%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}}.visitor-form{padding:15px;border-top:1px solid #e0e0e0}.visitor-form h3{margin-top:0;font-size:1rem;color:#333}.form-group{margin-bottom:10px}.form-group label{display:block;margin-bottom:5px;font-size:.8rem;color:#555}.form-group input{width:100%;padding:8px;border:1px solid #ddd;border-radius:4px;font-size:.9rem}.visitor-form button{background-color:#3498db;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.9rem}.visitor-form button:disabled{background-color:#ccc;cursor:not-allowed}.chat-input{display:flex;padding:15px;border-top:1px solid #e0e0e0}.chat-input textarea{flex:1;padding:10px;border:1px solid #ddd;border-radius:20px;resize:none;height:44px;line-height:20px;max-height:120px;overflow-y:auto}.chat-input button{width:44px;height:44px;border-radius:50%;background-color:#3498db;color:#fff;border:none;margin-left:10px;cursor:pointer;display:flex;align-items:center;justify-content:center}.chat-input button:disabled{background-color:#ccc;cursor:not-allowed}.chat-input button svg{width:20px;height:20px}.rich-editor{flex:1;display:flex;flex-direction:column;border:1px solid #ddd;border-radius:20px;overflow:hidden}.toolbar{display:flex;padding:5px;border-bottom:1px solid #eee;background-color:#f8f8f8}.toolbar-btn{background:transparent;border:none;padding:5px 10px;font-size:14px;cursor:pointer;border-radius:4px}.toolbar-btn:hover{background-color:#eee}.editor-content{flex:1;padding:10px;min-height:44px;max-height:120px;overflow-y:auto;outline:none}.editor-content[placeholder]:empty:before{content:attr(placeholder);color:#aaa}.emoji-picker{position:absolute;bottom:80px;right:80px;background:#fff;border:1px solid #ddd;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);padding:10px;z-index:10}.emoji-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.emoji-btn{background:transparent;border:none;font-size:20px;cursor:pointer;padding:5px;border-radius:4px}.emoji-btn:hover{background-color:#f0f0f0}.loading-spinner-container{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,.8);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:10}.loading-spinner{display:flex;flex-direction:column;align-items:center;justify-content:center}.spinner-circle{border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;width:40px;height:40px;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;margin-bottom:10px}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.spinner-text{font-size:.9rem;color:#333;margin-top:8px}