/* Optimized Chatbot CSS - With Dynamic Button Support and Document Upload */

#chatbot-container .message-bubble a { color:blue; text-decoration:underline;}
.agent-name { font-weight:bold; font-size:16px; text-align:left;}

/* Global viewport safety rules */
*{box-sizing:border-box}
body{margin:0;padding:0;overflow-x:hidden;font-family:".sources-modal-contentMulish",sans-serif}
#chatbot-container,.popup-content,.disclaimer-modal-content{max-width:100vw;box-sizing:border-box}

/* Main Chatbot Container */
#chatbot-container{
  position:fixed;bottom:90px;right:20px;width:400px;max-width:90vw;
  background:#fff;border:1px solid #eee;box-shadow:0 0 10px rgba(0,0,0,0.1);
  border-radius:12px;overflow:hidden;z-index:999;animation:bounceIn 0.3s; letter-spacing: normal;
  font-family:"Mulish",sans-serif;display:flex;flex-direction:column;text-transform: none;
  height:85vh;box-sizing:border-box
}
.followup-question-text {
    text-transform: none;
}
/* Responsive classes */
#chatbot-container.chatbot-mobile{width:92vw!important;right:4vw!important;left:4vw!important;bottom:75px!important}
#chatbot-container.chatbot-tiny{width:98vw!important;right:1vw!important;left:1vw!important;bottom:60px!important}
#chatbot-container.chatbot-small{max-height:85vh!important;min-height:200px!important}

/* Fullscreen Mode */
#chatbot-container.fullscreen{
  position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;
  width:100vw!important;height:100vh!important;max-width:100vw!important;max-height:100vh!important;
  min-height:100vh!important;border-radius:0!important;border:none!important;z-index:9999!important;
  animation:fullscreenExpand 0.3s ease-out;display:flex!important;flex-direction:column!important;
  overflow:hidden!important;box-sizing:border-box!important
}
#chatbot-container.fullscreen #chat-messages{max-height:calc(100vh - 160px)!important;height:auto!important}
#chatbot-container.fullscreen #fullscreen-icon{display:none}
#chatbot-container.fullscreen #minimize-icon{display:block!important}
#chatbot-container.fullscreen.chatbot-mobile,#chatbot-container.fullscreen.chatbot-tiny,#chatbot-container.fullscreen.chatbot-small{
  width:100vw!important;height:100vh!important;max-height:100vh!important;min-height:100vh!important;
  top:0!important;left:0!important;right:0!important;bottom:0!important;border-radius:0!important
}
#chatbot-container.fullscreen #chat-messages{flex:1!important;max-height:none!important;min-height:auto!important;height:auto!important;overflow-y:auto!important}
#chatbot-container.fullscreen .chat-input-area,#chatbot-container.fullscreen .powered-by-container{flex-shrink:0!important;position:relative!important;z-index:1!important}
#chatbot-container.fullscreen ~ #chat-button{display:none}

body.chatbot-open{overflow:hidden;position:fixed;width:100%}
body.loader-active #chat-button,body.loader-active #chatbot-container,body.loader-active #chat-popup{display:none!important}

/* Inline Disclaimer */
.inline-disclaimer{
  position:absolute;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;
  background:rgba(0,0,0,0.4);z-index:1001;border-radius:12px;backdrop-filter:blur(2px)
}
#chatbot-container.fullscreen .inline-disclaimer{border-radius:0;position:fixed;z-index:10001}
.disclaimer-modal-content{
  background:linear-gradient(135deg,#ffffff 0%,#f8f9fa 100%);border:2px solid #e0c441;
  border-radius:16px;padding:25px;font-family:"Mulish",sans-serif;min-width:280px;max-width:340px;
  width:90%;box-shadow:0 20px 40px rgba(0,0,0,0.25);animation:disclaimerFadeIn 0.4s ease-out;position:relative
}
.inline-disclaimer[style*="display: none"]{display:none!important}
.inline-disclaimer .disclaimer-content{display:flex;flex-direction:column;gap:20px;align-items:center;text-align:center}
.disclaimer-icon-small{
  display:flex;justify-content:center;align-items:center;width:50px;height:50px;
  background:linear-gradient(135deg,#fff3cd,#ffeaa7);border-radius:50%;margin-bottom:5px
}
.disclaimer-icon-small svg{width:24px;height:24px}
.disclaimer-text-content{max-width:280px}
.disclaimer-main-text{margin:0;font-size:14px;color:#2c3e50;line-height:1.6;font-weight:500}
.disclaimer-main-text strong{color:#856404;font-weight:700}
.disclaimer-actions-small{display:flex;gap:15px;justify-content:center;width:100%}
.disclaimer-btn-small{
  flex:1;max-width:140px;padding:12px 15px;border:none;border-radius:10px;font-size:13px;
  font-weight:600;cursor:pointer;transition:all 0.3s ease;font-family:"Mulish",sans-serif;
  box-shadow:0 2px 8px rgba(0,0,0,0.1)
}
.disclaimer-btn-small.disclaimer-accept{background:linear-gradient(135deg,#0e1a2f,#1a2d4f);color:white;border:2px solid transparent}
.disclaimer-btn-small.disclaimer-accept:hover{background:linear-gradient(135deg,#1a2d4f,#2a3d5f);transform:translateY(-2px);box-shadow:0 4px 12px rgba(14,26,47,0.3)}
.disclaimer-btn-small.disclaimer-decline{background:#ffffff;color:#666;border:2px solid #dee2e6}
.disclaimer-btn-small.disclaimer-decline:hover{background:#f8f9fa;color:#495057;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.chatbot-input-disabled #chat-input,.chatbot-input-disabled #dynamic-action-btn{pointer-events:none;opacity:0.5}

/* Chat Header */
.chat-header{
  display:flex;align-items:center;justify-content:space-between;padding:15px;background:#fff;
  border-bottom:1px solid #f0f0f0;position:relative;flex-shrink:0;box-sizing:border-box;min-height:60px
}
.header-left{display:flex;align-items:center;flex:1}
.header-right{display:flex;align-items:center;gap:10px}
.avatar{
  width:40px;height:40px;background:#E4E4E4;border-radius:50%;display:flex;
  justify-content:center;align-items:center;margin-right:10px;flex-shrink:0
}
.chat-header-info{margin-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;text-transform: none;color: #000;}
.agent-name{font-weight:bold;font-size:16px}
.status{display:flex;align-items:center;margin-top:0px}
.status-dot{width:8px;height:8px;background:#4CAF50;border-radius:50%;margin-right:5px}
.status-text{font-size:12px;color:#666}
.header-buttons-container{display:flex;align-items:center}
.header-button{
  cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:6px;background:transparent;transition:all 0.2s ease;position:relative;color:#000;
}
.header-button:hover{background:#f5f5f5;transform:translateY(-1px)}
.header-button:active{transform:translateY(0)}
#fullscreen-toggle:hover svg path{stroke:#0e1a2f}
#chat-close:hover svg path{stroke:#dc3545}
.message-text ol {
    margin: 0.5em 0;
    list-style-type: disc;
}
/* Language Selector */
.language-selector{display:flex;align-items:center;margin-left:auto;margin-right:10px;z-index:10}
#chatbot-container.fullscreen .language-selector{margin-right:5px}
#language-select{
  padding:6px 28px 6px 10px;border-radius:6px;border:1px solid #e0e0e0;background:#ffffff;
  font-family:"Mulish",sans-serif;font-size:13px;color:#333;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23131313%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat;background-position:right 10px top 50%;background-size:10px auto;
  box-shadow:0 1px 3px rgba(0,0,0,0.08);transition:all 0.2s ease
}
#language-select:hover{border-color:#0e1a2f}
#language-select:focus{outline:none;border-color:#0e1a2f;box-shadow:0 0 0 2px rgba(14,26,47,0.2)}

/* Language Notification */
.language-notification{
  display:flex;justify-content:space-between;align-items:center;padding:12px 15px;
  background:#f0f7ff;border-bottom:1px solid #e0e8f5;font-family:"Mulish",sans-serif;
  font-size:13px;color:#333;flex-shrink:0;min-height:40px;box-sizing:border-box;overflow:hidden
}
.language-notification[style*="display: none"]{display:none!important;height:0!important;min-height:0!important;padding:0!important;margin:0!important;border:none!important}
.language-notification[style*="height: 0px"]{height:0!important;min-height:0!important;padding:0!important;margin:0!important;border:none!important;overflow:hidden!important}
.notification-content{flex:1}
.notification-content p{margin:0;color:#0e1a2f;font-weight:500;text-transform: none;}
.notification-close{
  cursor:pointer;display:flex;justify-content:center;align-items:center;width:22px;height:22px;
  border-radius:50%;background:rgba(0,0,0,0.05);margin-left:10px;transition:background 0.2s ease
}
.notification-close:hover{background:rgba(0,0,0,0.1)}

/* Chat Messages Area */
#chat-messages{
  flex:1;overflow-y:auto;overflow-x:hidden;padding:15px;background:#f9f9f9;
  font-family:"Mulish",sans-serif;font-size:14px;color:#333;display:flex;flex-direction:column;
  max-height:calc(80vh - 130px)!important;height:auto;min-height:200px;-webkit-overflow-scrolling:touch;text-transform: none;
  box-sizing:border-box;transition:max-height 0.3s ease
}
#chatbot-container.fullscreen #chat-messages{flex:1;max-height:none;min-height:auto;height:auto}
#chatbot-container.chatbot-mobile #chat-messages{padding:10px;font-size:13px}
#chatbot-container.chatbot-tiny #chat-messages{padding:6px;font-size:11px}
#chat-messages::-webkit-scrollbar{width:6px}
#chat-messages::-webkit-scrollbar-track{background:#f1f1f1}
#chat-messages::-webkit-scrollbar-thumb{background:#ddd;border-radius:3px}
#chat-messages::-webkit-scrollbar-thumb:hover{background:#ccc}
#chat-messages > div{margin-bottom:15px;width:100%}
#user-message-template{display:flex;flex-direction:row-reverse}
#bot-message-template,.contact-form-container{display:flex;flex-direction:row}

/* Message Bubbles */
.message-bubble{
  padding:10px 15px;border-radius:18px;max-width:85%;box-shadow:0 1px 2px rgba(0,0,0,0.1);
  word-wrap:break-word;overflow-wrap:break-word;word-break:break-word;hyphens:auto;border-radius: 15px 15px 15px 2px;
}
#chatbot-container.fullscreen .message-bubble{max-width:75%}
.message-bubble.user{background:#0e1a2f;color:white;margin-left:10px;border-radius: 15px 15px 2px 15px;}
.message-bubble.bot{background:#fff}
.message-text{
  margin:0;font-size:14px;line-height:1.4;font-family:Mulish,sans-serif;text-transform: none; text-align: left; letter-spacing: normal;
  overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;white-space:pre-wrap
}
.message-text ul{margin:0.5em 0;list-style-type:disc;padding-inline-start: 40px;}
.message-text li{margin:0.2em 18px;padding:0;line-height:1.3}
.message-text ul ul{margin:0.2em 0}

/* Contact Form */
.form-container{background:#fff;padding:15px;border-radius:10px;max-width:85%;box-shadow:0 1px 2px rgba(0,0,0,0.1)}
#chatbot-container.fullscreen .form-container{max-width:75%}
.form-title{margin-top:0;margin-bottom:5px;font-size:15px;font-weight:500}
.form-subtitle{margin-top:0;margin-bottom:14px;font-size:14px;word-wrap:break-word}
.form-group{margin-bottom:10px;position:relative}
.chat-contact-form input,.chat-contact-form textarea{
  width:100%;padding:10px;border:1px solid #e0e0e0;border-radius:6px;font-size:14px;box-sizing:border-box
}
.chat-contact-form textarea{resize:none}
.required{color:red;position:absolute;top:10px;right:10px}
.validation-message{color:#d9534f;font-size:12px;margin-top:4px;display:none}
.chat-contact-form button{
  width:100%;padding:12px;background:#0e1a2f;color:white;border:none;border-radius:6px;
  font-size:14px;font-weight:500;cursor:pointer
}
.chat-contact-form button:hover{background:#1a2d4f}
.chat-contact-form input:focus,.chat-contact-form textarea:focus{outline:none;border-color:#0e1a2f}

/* Chat Input Area */
.chat-input-area {
  padding: 15px;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  display: flex;
  gap: 8px; /* Consistent gap between all elements */
  flex-shrink: 0;
  box-sizing: border-box;
  align-items: center;
  text-transform: none;
}
#chat-input {
  flex: 1;
  padding: 10px 10px 10px 10px;
  border: 1px solid #e0e0e0;
  border-radius: 0.875rem;
  outline: none;
  font-size: 14px;
  font-family: "Mulish", sans-serif;
}

#chat-input {
  order: 1; /* Ensures input comes first */
}

/* Document Upload Button */
.document-upload-btn {
  border: none;
  border-radius: 0.875rem;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  background: #f8f9fa;
  color: #666;
  margin-right: 4px; /* Small gap before send button */
  margin-left: 0;
  order: 2; /* Ensures it comes after input but before send button */
}

.document-upload-btn:hover {
  background: #e9ecef;
  color: #495057;
  transform: scale(1.05);
}

.document-upload-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(14, 26, 47, 0.2);
}

.document-upload-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Dynamic Action Button - NEW STYLES FOR SINGLE BUTTON */
#dynamic-action-btn {
  border: none;
  border-radius: 0.875rem;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: grid;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  order: 3; /* Ensures it comes last */
}

/* Voice mode styling */
#dynamic-action-btn.voice-mode{
  background:black;color:#333;padding-top: 3px;
}
#dynamic-action-btn.voice-mode:hover{
  background:black;transform:scale(1.05);
}

/* Send mode styling */
#dynamic-action-btn.send-mode{
  background:black;color:white;padding-top: 3px;
}
#dynamic-action-btn.send-mode:hover{
  background:black;transform:scale(1.05);
}

/* Recording mode styling */
#dynamic-action-btn.recording{
  background:#dc3545;color:white;animation:pulse 2s infinite;
}
#dynamic-action-btn.recording:hover{
  background:#c82333;
}

/* Processing mode styling */
#dynamic-action-btn.processing{
  background:black;color:#333;cursor:not-allowed;
}
#dynamic-action-btn.processing svg{
  animation:spin 1s linear infinite;color:white
}

/* Icon positioning */
#dynamic-action-btn svg{
  position:relative;bottom:-8px;transition:all 0.2s ease;
}

/* Focus styles for accessibility */
#dynamic-action-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(14, 26, 47, 0.2);
}

/* File Upload Styles */
.file-upload-container {
  display: flex;
  flex-direction: row-reverse;
  margin-bottom: 15px;
  align-items: flex-start;
}

.file-preview {
  background: #0e1a2f !important;
  color: white !important;
  margin-left: 10px;
  border-radius: 15px 15px 2px 15px !important;
  padding: 12px 16px;
  max-width: 85%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.file-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.file-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.file-details {
  flex: 1;
  min-width: 0;
}

.file-name {
  font-weight: 500;
  font-size: 14px;
  word-break: break-word;
  margin-bottom: 2px;
}

.file-meta {
  font-size: 12px;
  opacity: 0.8;
}

.upload-progress {
  margin-top: 8px;
}

.progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  width: 0%;
  height: 100%;
  background: #4CAF50;
  transition: width 0.3s ease;
  border-radius: 2px;
}

.upload-status {
  font-size: 12px;
  margin-top: 4px;
  opacity: 0.9;
}

/* Powered by container */
.powered-by-container{
  text-align:center;padding:12px 15px;font-size:12px;color:#666;border-top:1px solid #f0f0f0;
  font-family:'Mulish',sans-serif;display:flex;justify-content:center;align-items:center;text-transform: none;
  background-color:#fcfcfc;flex-shrink:0
}
.powered-by-container p{margin:0;display:flex;align-items:center;gap:4px}
.powered-by-container img{padding-bottom:2px;padding-right:2px}
.powered-by-container a{color:#0e1a2f !important;font-weight:600;text-decoration:none;transition:all 0.2s ease}
.powered-by-container a:hover{text-decoration:underline}

/* Chat Button */
#chat-button{
  position:fixed;bottom:20px;right:20px;width:60px;height:60px;background:#f1f1f1;
  border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;
  box-shadow:0 4px 8px rgba(0,0,0,0.2);z-index:999
}

/* Chat Popup */
#chat-popup{
  position:fixed;bottom:95px;right:20px;z-index:1000;animation:popupSlideIn 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
  font-family:"Mulish",sans-serif;filter:drop-shadow(0 8px 24px rgba(0,0,0,0.12))
}
.popup-content{
  background:linear-gradient(135deg,#ffffff 0%,#fafbfc 100%);border:1px solid rgba(255,255,255,0.2);
  border-radius:16px;padding:18px 20px 16px 20px;box-shadow:0 8px 32px rgba(0,0,0,0.08),0 4px 16px rgba(0,0,0,0.04),inset 0 1px 0 rgba(255,255,255,0.8);
  max-width:240px;position:relative;backdrop-filter:blur(10px);border-left:3px solid #0e1a2f
}
.popup-content::before{
  content:'';position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;
  background:linear-gradient(135deg,rgba(255,255,255,0.4) 0%,rgba(255,255,255,0.1) 100%);
  border-radius:16px;z-index:-1
}
.popup-close{
  position:absolute;top:10px;right:10px;cursor:pointer;display:flex;justify-content:center;
  align-items:center;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,0.04);
  transition:all 0.2s cubic-bezier(0.4,0,0.2,1);backdrop-filter:blur(10px)
}
.popup-close:hover{background:rgba(0,0,0,0.08);transform:scale(1.1)}
.popup-close:active{transform:scale(0.95)}
.popup-close svg{transition:all 0.2s ease}
.popup-close:hover svg{stroke:#0e1a2f}
.popup-text{
  margin:0;padding-right:28px;font-size:14px;color:#2c3e50;line-height:1.5;
  font-weight:500;letter-spacing:-0.01em
}
.popup-text::before{content:'👋';margin-right:8px;font-size:16px;display:inline-block;animation:wave 1s ease-in-out infinite alternate}
.popup-arrow{
  position:absolute;bottom:-10px;right:28px;width:0;height:0;border-left:10px solid transparent;
  border-right:10px solid transparent;border-top:10px solid #ffffff;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.1))
}
.popup-arrow::before{
  content:'';position:absolute;bottom:1px;left:-11px;width:0;height:0;border-left:11px solid transparent;
  border-right:11px solid transparent;border-top:11px solid rgba(255,255,255,0.2)
}

/* Audio Recording Styles */
.audio-recording-indicator{
  position:absolute;bottom:100%;left:15px;right:15px;background:#dc3545;color:white;
  padding:10px 15px;border-radius:8px 8px 0 0;display:flex;align-items:center;
  gap:10px;font-size:13px;font-weight:500;z-index:1000
}
.recording-wave{display:flex;gap:2px;align-items:center}
.recording-wave span{
  width:3px;height:12px;background:white;border-radius:2px;animation:wave 1.2s infinite ease-in-out
}
.recording-wave span:nth-child(1){animation-delay:-1.2s}
.recording-wave span:nth-child(2){animation-delay:-1.1s}
.recording-wave span:nth-child(3){animation-delay:-1.0s}
.recording-wave span:nth-child(4){animation-delay:-0.9s}
.recording-wave span:nth-child(5){animation-delay:-0.8s}
.recording-text{flex:1}
.audio-message{
  display:flex;align-items:center;gap:10px;padding:10px;background:#f8f9fa;
  border-radius:12px;border:1px solid #e9ecef
}
.audio-message.user{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2)}
.audio-controls{display:flex;align-items:center;gap:8px}
.audio-play-btn{
  background:#0e1a2f;color:white;border:none;border-radius:50%;width:32px;height:32px;
  display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all 0.2s ease
}
.audio-play-btn:hover{background:#1a2d4f;transform:scale(1.05)}
.audio-play-btn.playing{background:#dc3545}
.audio-waveform{display:flex;align-items:center;gap:2px;height:20px;flex:1;min-width:100px}
.audio-waveform span{width:2px;background:#6c757d;border-radius:1px;transition:all 0.2s ease}
.audio-message.user .audio-waveform span{background:rgba(255,255,255,0.6)}
.audio-duration{font-size:12px;color:#6c757d;font-weight:500;min-width:35px;text-align:center}
.audio-message.user .audio-duration{color:rgba(255,255,255,0.8)}

/* Error and Permission Messages */
.error-message{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb;border-radius:8px;padding:8px 12px;font-size:13px;margin-top:5px}
.permission-request{
  background:#d1ecf1;color:#0c5460;border:1px solid #bee5eb;border-radius:8px;
  padding:12px;text-align:center;font-size:13px;margin:10px 0
}
.permission-request button{background:#17a2b8;color:white;border:none;border-radius:4px;padding:6px 12px;font-size:12px;cursor:pointer;margin-top:8px}
.permission-request button:hover{background:#138496}

/* Animations */
@keyframes disclaimerFadeIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}
@keyframes bounceIn{0%{transform:scale(0.8);opacity:0}60%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}
@keyframes fullscreenExpand{0%{transform:scale(0.95);opacity:0.8}100%{transform:scale(1);opacity:1}}
@keyframes popupSlideIn{0%{opacity:0;transform:translateY(20px) scale(0.8);filter:blur(4px)}50%{opacity:0.8;transform:translateY(-5px) scale(1.02);filter:blur(2px)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes popupSlideOut{0%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}100%{opacity:0;transform:translateY(15px) scale(0.9);filter:blur(2px)}}
@keyframes wave{0%{transform:rotate(0deg)}100%{transform:rotate(20deg)}}
@keyframes pulseGlow{0%,100%{box-shadow:0 8px 32px rgba(0,0,0,0.08),0 4px 16px rgba(0,0,0,0.04),inset 0 1px 0 rgba(255,255,255,0.8)}50%{box-shadow:0 8px 32px rgba(0,0,0,0.12),0 4px 16px rgba(0,0,0,0.06),inset 0 1px 0 rgba(255,255,255,0.8),0 0 20px rgba(14,26,47,0.1)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(220,53,69,0.7)}70%{box-shadow:0 0 0 10px rgba(220,53,69,0)}100%{box-shadow:0 0 0 0 rgba(220,53,69,0)}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* Quick Actions Styles */
.quick-actions-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 20px 0;
  padding: 20px;
  border-radius: 16px;
  animation: fadeInUp 0.5s ease-out;
  font-family: "Mulish", sans-serif;
}
#dynamic-action-btn #stop-icon
  {
    bottom: -4px;
  }

.quick-actions-header {
  text-align: center;
  margin-bottom: 5px;
}

.quick-actions-header h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
  color: black;
  letter-spacing: -0.01em;
}

.quick-actions-header p {
  margin: 0;
  font-size: 15px;
  color: black;
  font-weight: 400;
  line-height: 1.4;
}

.quick-actions-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quick-action-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: #ffffff;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: "Mulish", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #495057;
  text-align: left;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.quick-action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(14, 26, 47, 0.05), transparent);
  transition: left 0.5s ease;
}

.quick-action-btn:hover::before {
  left: 100%;
}

.quick-action-btn:hover {
  border-color: #0e1a2f;
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(14, 26, 47, 0.15);
  color: #0e1a2f;
}

.quick-action-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(14, 26, 47, 0.1);
}

.quick-action-icon {
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.quick-action-text {
  flex: 1;
  line-height: 1.4;
  font-weight: 500;
  text-transform: none;
}

/* Voice Button Styles for bot messages */
.message-content {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

.voice-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transition: all 0.2s ease;
  color: #6c757d;
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  opacity: 0.7;
}

.voice-btn:hover {
  background: rgba(108, 117, 125, 0.1);
  color: #495057;
  opacity: 1;
  transform: scale(1.1);
}

.voice-btn:active {
  transform: scale(0.95);
}

.voice-btn.speaking {
  background: #dc3545;
  color: white;
  opacity: 1;
  animation: voicePulse 1.5s infinite;
}

.voice-btn.speaking:hover {
  background: #c82333;
}

.voice-btn svg {
  width: 14px;
  height: 14px;
  transition: all 0.2s ease;
}

@keyframes voicePulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(220, 53, 69, 0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Responsive Design - Mobile First Approach */
@media (max-width:1024px) and (min-width:769px){
  #chatbot-container:not(.chatbot-mobile):not(.chatbot-tiny):not(.fullscreen){width:360px;right:15px;bottom:80px;max-height:85vh}
  #chat-messages{max-height:calc(78vh - 120px);padding:12px}
  .language-selector{margin-right:5px}
  #language-select{font-size:12px;padding:5px 25px 5px 8px}
  .popup-content{max-width:220px}
  .document-upload-btn{width:36px;height:36px}
  .file-preview{max-width:80%;padding:10px 14px}
  .file-name{font-size:13px}
  .file-meta{font-size:11px}
}

@media (max-width:768px) and (min-width:481px){
  #chatbot-container:not(.chatbot-mobile):not(.chatbot-tiny):not(.fullscreen){width:85vw;right:7.5vw;bottom:75px;height:80vh;max-height:85vh}
  #chat-messages{max-height:calc(75vh - 115px);padding:12px}
  #language-select{font-size:12px;padding:5px 22px 5px 8px;background-size:8px auto;background-position:right 8px top 50%}
  .language-notification{padding:10px 12px;font-size:12px}
  .notification-content p{font-size:12px}
  .chat-header{padding:12px}
  .chat-header-info{max-width:180px}
  .agent-name{font-size:15px}
  .avatar{width:36px;height:36px}
  .message-bubble{max-width:80%;padding:8px 12px}
  .message-text{font-size:13px}
  .chat-input-area{padding:12px; gap:6px}
  .document-upload-btn svg {
    width: 16px;
    height: 16px;
  }
  #chat-input{padding:8px 10px;font-size:13px}
  #dynamic-action-btn{width:38px;height:38px}
  .document-upload-btn{width:36px;height:36px;margin-right:3px}
  .file-preview{max-width:75%;padding:10px 12px}
  .file-icon{font-size:20px}
  .file-name{font-size:13px}
  .file-meta{font-size:11px}
  #chat-popup{right:7.5vw;bottom:80px}
  .popup-content{max-width:200px;padding:16px 18px 14px 18px}
  .popup-text{font-size:13px;padding-right:28px}
  .disclaimer-modal-content{min-width:260px;max-width:85%;padding:22px}
  .disclaimer-main-text{font-size:13px}
  .disclaimer-btn-small{font-size:12px;padding:11px 15px}
  .quick-actions-container {
    margin: 15px 0;
    padding: 16px;
    gap: 12px;
  }
  .quick-actions-header h3 {
    font-size: 18px;
  }
  .quick-actions-header p {
    font-size: 14px;
  }
  .quick-action-btn {
    padding: 14px 16px;
    gap: 10px;
    font-size: 13px;
  }
  .quick-action-icon {
    font-size: 16px;
    width: 20px;
    height: 20px;
  }
  .voice-btn {
    width: 24px;
    height: 24px;
    margin-top: 1px;
  }
  .voice-btn svg {
    width: 12px;
    height: 12px;
  }
  .message-content {
    gap: 6px !important;
  }
}

@media (max-width:480px){
  #chatbot-container.chatbot-mobile:not(.fullscreen){height:75vh;max-height:80vh}
  #chatbot-container.chatbot-mobile #chat-messages{max-height:calc(70vh - 110px);padding:10px;font-size:13px}
  #language-select{font-size:11px;padding:4px 20px 4px 6px;background-size:7px auto;background-position:right 6px top 50%}
  .language-notification{padding:8px 10px;font-size:11px;min-height:35px}
  .notification-content p{font-size:11px;line-height:1.3}
  .notification-close{width:20px;height:20px;margin-left:8px}
  .chat-header{padding:10px}
  .chat-header-info{max-width:140px}
  .agent-name{font-size:14px}
  .status-text{font-size:11px}
  .avatar{width:32px;height:32px;margin-right:8px}
  .message-bubble{max-width:85%;padding:8px 11px}
  .message-text{font-size:12px;line-height:1.35}
  .chat-input-area{padding:10px;gap:4px}
  #chat-input{padding:8px;font-size:12px}
  #dynamic-action-btn{width:36px;height:36px}
  .document-upload-btn{width:32px;height:32px;margin-right:2px}
  .document-upload-btn svg{width:14px;height:14px}
  .file-preview{max-width:90%;padding:8px 10px}
  .file-icon{font-size:18px}
  .file-name{font-size:12px}
  .file-meta{font-size:10px}
  .progress-bar{height:3px}
  .upload-status{font-size:11px}
  #dynamic-action-btn svg{width:16px;height:16px}
  #chat-button{width:55px;height:55px;bottom:15px;right:15px}
  #chat-button img{width:24px;height:24px}
  #chat-popup{right:4vw;bottom:75px}
  .popup-content{max-width:180px;padding:14px 16px 12px 16px}
  .popup-text{font-size:12px;padding-right:26px;line-height:1.4}
  .popup-close{width:22px;height:22px;top:8px;right:8px}
  .popup-arrow{right:20px;bottom:-9px;border-left-width:9px;border-right-width:9px;border-top-width:9px}
  .form-container{padding:12px;max-width:90%}
  .form-title{font-size:14px}
  .form-subtitle{font-size:12px;margin-bottom:12px}
  .chat-contact-form input,.chat-contact-form textarea{padding:8px;font-size:12px}
  .chat-contact-form button{padding:10px;font-size:12px}
  .disclaimer-modal-content{min-width:240px;max-width:88%;padding:18px}
  .disclaimer-icon-small{width:40px;height:40px;margin-bottom:3px}
  .disclaimer-icon-small svg{width:18px;height:18px}
  .disclaimer-main-text{font-size:12px;line-height:1.4}
  .disclaimer-actions-small{flex-direction:column;gap:10px}
  .disclaimer-btn-small{max-width:none;font-size:11px;padding:12px 15px}
  .header-button{width:28px;height:28px}
  .header-button svg{width:16px;height:16px}
  .audio-recording-indicator{font-size:12px;padding:8px 12px}
  .recording-wave span{width:2px;height:10px}
  .audio-play-btn{width:28px;height:28px}
  .audio-duration{font-size:11px;min-width:30px}
  .quick-actions-container {
    margin: 12px 0;
    padding: 14px;
    gap: 10px;
    border-radius: 12px;
  }
  .quick-actions-header h3 {
    font-size: 16px;
    margin-bottom: 6px;
  }
  .quick-actions-header p {
    font-size: 13px;
  }
  .quick-action-btn {
    padding: 12px 14px;
    gap: 8px;
    font-size: 12px;
    border-radius: 10px;
  }
  .quick-action-icon {
    font-size: 14px;
    width: 18px;
    height: 18px;
  }
  .quick-actions-buttons {
    gap: 8px;
  }
  .voice-btn {
    width: 22px;
    height: 22px;
    margin-top: 1px;
  }
  .voice-btn svg {
    width: 11px;
    height: 11px;
  }
  .message-content {
    gap: 5px !important;
  }
}

@media (max-width:300px){
  #chatbot-container.chatbot-tiny:not(.fullscreen){height:75vh;max-height:80vh;min-width:280px;box-sizing:border-box}
  #chatbot-container.chatbot-tiny #chat-messages{max-height:calc(70vh - 100px);padding:6px;font-size:11px}
  #language-select{font-size:9px;padding:2px 16px 2px 4px;background-size:5px auto;background-position:right 4px top 50%}
  .language-notification{padding:4px 6px;font-size:9px;min-height:28px}
  .chat-header{padding:6px}
  .agent-name{font-size:12px}
  .status-text{font-size:9px}
  .avatar{width:24px;height:24px;margin-right:4px}
  .message-bubble{padding:4px 6px;max-width:90%}
  .message-text{font-size:10px}
  .chat-input-area{padding:6px;gap:4px}
  #chat-input{padding:4px;font-size:10px}
  #dynamic-action-btn{width:28px;height:28px}
  .document-upload-btn{width:26px;height:26px;margin-right:1px}
  .document-upload-btn svg{width:12px;height:12px}
  .file-preview{max-width:95%;padding:6px 8px}
  .file-icon{font-size:16px}
  .file-name{font-size:10px}
  .file-meta{font-size:9px}
  .progress-bar{height:2px}
  .upload-status{font-size:9px}
  #dynamic-action-btn svg{width:12px;height:12px}
  .disclaimer-modal-content{min-width:200px;max-width:94%;padding:12px}
  .disclaimer-main-text{font-size:10px}
  .disclaimer-btn-small{font-size:9px;padding:8px 12px}
  .header-button{width:24px;height:24px;margin-left:5px}
  .header-button svg{width:14px;height:14px}
  .audio-recording-indicator{font-size:11px;padding:6px 10px}
  .audio-play-btn{width:24px;height:24px}
  .quick-actions-container {
    margin: 10px 0;
    padding: 12px;
    gap: 8px;
  }
  .quick-actions-header h3 {
    font-size: 14px;
    margin-bottom: 4px;
  }
  .quick-actions-header p {
    font-size: 12px;
  }
  .quick-action-btn {
    padding: 10px 12px;
    gap: 6px;
    font-size: 11px;
    border-radius: 8px;
  }
  .quick-action-icon {
    font-size: 12px;
    width: 16px;
    height: 16px;
  }
  .quick-actions-buttons {
    gap: 6px;
  }
  .voice-btn {
    width: 20px;
    height: 20px;
    margin-top: 0px;
  }
  .voice-btn svg {
    width: 10px;
    height: 10px;
  }
  .message-content {
    gap: 4px !important;
  }
}

@media (max-height:500px){
  #chatbot-container.chatbot-small:not(.fullscreen){max-height:85vh!important;min-height:200px!important;bottom:60px!important}
  #chatbot-container.chatbot-small #chat-messages{min-height:120px!important;padding:8px!important}
  #chatbot-container.chatbot-small .chat-header{padding:8px 12px!important}
  #chatbot-container.chatbot-small .chat-input-area{padding:8px 12px!important}
}

@media (orientation:landscape) and (max-height:500px){
  #chatbot-container:not(.fullscreen){height:85vh;max-height:85vh;bottom:60px}
  #chat-messages{max-height:calc(80vh - 100px);padding:8px}
  .chat-header{padding:8px 12px}
  .language-notification{padding:6px 10px;min-height:30px}
  .chat-input-area{padding:8px 12px}
  #chat-button{bottom:10px;right:10px}
}

/* Fullscreen adjustments */
#chatbot-container.fullscreen .quick-actions-container {
  max-width: 600px;
  margin: 20px auto;
}

#chatbot-container.fullscreen .quick-action-btn {
  padding: 18px 20px;
  font-size: 15px;
}

#chatbot-container.fullscreen .quick-actions-header h3 {
  font-size: 22px;
}

#chatbot-container.fullscreen .quick-actions-header p {
  font-size: 16px;
}

#chatbot-container.fullscreen .voice-btn {
  width: 30px;
  height: 30px;
}

#chatbot-container.fullscreen .voice-btn svg {
  width: 15px;
  height: 15px;
}

#chatbot-container.fullscreen #dynamic-action-btn{
  width:42px;height:42px;
}
#chatbot-container.fullscreen #dynamic-action-btn svg{
  width:22px;height:22px;
}

#chatbot-container.fullscreen .document-upload-btn{
  width:42px;height:42px;margin-right:6px;
}
#chatbot-container.fullscreen .document-upload-btn svg{
  width:20px;height:20px;
}

#chatbot-container.fullscreen .file-preview{
  max-width:70%;padding:14px 18px;
}

#chatbot-container.fullscreen .file-icon{
  font-size:28px;
}

#chatbot-container.fullscreen .file-name{
  font-size:16px;
}

#chatbot-container.fullscreen .file-meta{
  font-size:14px;
}

.chat-header,.chat-input-area,.powered-by-container,.language-notification{flex-shrink:0;box-sizing:border-box}

@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){
  .message-text{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
}

/* Accessibility improvements */
.quick-action-btn:focus {
  outline: none;
  border-color: #0e1a2f;
  box-shadow: 0 0 0 3px rgba(14, 26, 47, 0.2);
}

.voice-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(14, 26, 47, 0.2);
  background: rgba(108, 117, 125, 0.1);
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
  .quick-actions-container {
    animation: none;
  }
  .quick-action-btn {
    transition: none;
  }
  .quick-action-btn::before {
    display: none;
  }
  .voice-btn {
    transition: none;
  }
  .voice-btn.speaking {
    animation: none;
  }
  #dynamic-action-btn {
    transition: none;
  }
  #dynamic-action-btn.recording {
    animation: none;
  }
  #dynamic-action-btn.processing svg {
    animation: none;
  }
  @keyframes voicePulse {
    0%, 100% {
      box-shadow: none;
    }
  }
}

/* Sources UI Component Styles */

/* Sources Container */
.sources-container {
    margin-top: 12px;
    border-top: 1px solid #e9ecef;
    padding-top: 10px;
}

.sources-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 8px 12px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    font-size: 13px;
    color: #6c757d;
    transition: all 0.2s ease;
    font-family: "Mulish", sans-serif;
    font-weight: 500;
}

.sources-toggle:hover {
    background: #e9ecef;
    border-color: #dee2e6;
    color: #495057;
}

.sources-toggle:focus {
    outline: none;
    border-color: #0e1a2f;
    box-shadow: 0 0 0 2px rgba(14, 26, 47, 0.2);
}

.sources-toggle-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sources-icon {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

.sources-count {
    background: #6c757d;
    color: white;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    min-width: 16px;
    text-align: center;
}

.sources-arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.sources-toggle.expanded .sources-arrow {
    transform: rotate(180deg);
}

/* Sources Modal/Popup */
.sources-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    backdrop-filter: blur(2px);
    animation: modalFadeIn 0.3s ease-out;
}

.sources-modal.show {
    display: flex;
}

.sources-modal-content {
    background: white;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.sources-modal-header {
    padding: 20px 20px 0 20px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
}

.sources-modal-title {
    margin: 0 0 15px 0;
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sources-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #6c757d;
    transition: all 0.2s ease;
}

.sources-modal-close:hover {
    background: #f8f9fa;
    color: #495057;
}

.sources-modal-close:focus {
    outline: none;
    background: #f8f9fa;
    box-shadow: 0 0 0 2px rgba(14, 26, 47, 0.2);
}

.sources-modal-body {
    padding: 0 20px 20px 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.sources-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.source-item {
    margin-bottom: 12px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 3px solid #0e1a2f;
    transition: all 0.2s ease;
}

.source-item:hover {
    background: #e9ecef;
    transform: translateX(2px);
}

.source-link {
    color: #0e1a2f;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    display: block;
    word-break: break-all;
}

.source-link:hover {
    text-decoration: underline;
}

.source-link:focus {
    outline: none;
    text-decoration: underline;
    background: rgba(14, 26, 47, 0.1);
    border-radius: 4px;
    padding: 2px 4px;
    margin: -2px -4px;
}

.source-domain {
    font-size: 11px;
    color: #6c757d;
    margin-top: 4px;
    font-weight: 400;
}

/* Animations for sources */
@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Scrollbar styling for sources modal */
.sources-modal-body::-webkit-scrollbar {
    width: 6px;
}

.sources-modal-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.sources-modal-body::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.sources-modal-body::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Fullscreen chatbot adjustments for sources */
#chatbot-container.fullscreen .sources-modal {
    position: absolute;
    z-index: 10001;
}

#chatbot-container.fullscreen .sources-modal-content {
    max-width: 600px;
    max-height: 85vh;
}

/* Time greeting styles */
.quick-actions-header .time-greeting {
  margin: 8px 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: black;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #0e1a2f 0%, #1a2d4f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Responsive adjustments for time greeting */
@media (max-width: 768px) {
  .quick-actions-header .time-greeting {
    font-size: 15px;
    margin: 6px 0 10px 0;
  }
}

@media (max-width: 480px) {
  .quick-actions-header .time-greeting {
    font-size: 14px;
    margin: 5px 0 8px 0;
  }
}

@media (max-width: 300px) {
  .quick-actions-header .time-greeting {
    font-size: 13px;
    margin: 4px 0 6px 0;
  }
}

/* Loading animation for startup questions */
@keyframes pulse {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* Error state styling for quick actions */
.quick-actions-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  color: #666;
  font-size: 14px;
  text-align: center;
}

.quick-actions-error .error-icon {
  font-size: 24px;
  margin-bottom: 8px;
  opacity: 0.6;
}

.quick-actions-retry-btn {
  margin-top: 12px;
  padding: 8px 16px;
  background: #0e1a2f;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.2s ease;
}

.quick-actions-retry-btn:hover {
  background: #1a2d4f;
}

/* Loading dots container */
.loading-dots {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.loading-dot {
  width: 8px;
  height: 8px;
  background: #0e1a2f;
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}

.loading-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.loading-dot:nth-child(3) {
  animation-delay: 0.4s;
}

/* Enhanced quick actions container for better loading states */
.quick-actions-container.loading {
  opacity: 0.8;
}

.quick-actions-container.error {
  border: 1px solid #ffebee;
  background: #fafafa;
}

/* Translation-related styles - Add these to your existing styles.css */

/* Translation Loading Indicator */
.translation-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  background: #f0f7ff;
  border-radius: 8px;
  margin: 10px 0;
  font-size: 14px;
  color: #0e1a2f;
  font-family: "Mulish", sans-serif;
  animation: translateFadeIn 0.3s ease-out;
}

.translation-loading .loading-dots {
  display: flex;
  gap: 4px;
  margin-right: 10px;
}

.translation-loading .loading-dots div {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0e1a2f;
  animation: pulse 1.5s ease-in-out infinite;
}

.translation-loading .loading-dots div:nth-child(2) {
  animation-delay: 0.2s;
}

.translation-loading .loading-dots div:nth-child(3) {
  animation-delay: 0.4s;
}

/* Translation Error */
.translation-error {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  background: #ffebee;
  border-radius: 8px;
  margin: 10px 0;
  font-size: 14px;
  color: #d32f2f;
  font-family: "Mulish", sans-serif;
  animation: translateFadeIn 0.3s ease-out;
}

/* Translation Indicator for Messages */
.translation-indicator {
  font-size: 11px;
  color: #666;
  margin-top: 4px;
  opacity: 0.7;
  font-style: italic;
  font-family: "Mulish", sans-serif;
  display: flex;
  align-items: center;
  gap: 4px;
}

.translation-indicator::before {
  /* content: "🌐"; */
  font-size: 10px;
}

/* Language Selector Enhancements */
#language-select {
  transition: all 0.3s ease;
}

#language-select:focus {
  outline: none;
  border-color: #0e1a2f;
  box-shadow: 0 0 0 2px rgba(14, 26, 47, 0.2);
  transform: scale(1.02);
}

/* Language Dropdown Loading State */
#language-select.translating {
  pointer-events: none;
  opacity: 0.6;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22%23999%22%20d%3D%22M8%200a8%208%200%200%200-8%208%208%208%200%200%200%208%208%208%208%200%200%200%208-8%208%208%200%200%200-8-8zM7%2012V4h2v8H7z%22%2F%3E%3C%2Fsvg%3E");
  animation: spin 1s linear infinite;
}

/* Message Transition Effects for Translation */
.message-bubble {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.message-bubble.translating {
  opacity: 0.7;
  transform: scale(0.98);
}

.message-bubble.translated {
  animation: translateComplete 0.5s ease-out;
}

/* Translation Success Highlight */
@keyframes translateComplete {
  0% {
    background-color: rgba(14, 26, 47, 0.1);
    transform: scale(1.02);
  }
  100% {
    background-color: transparent;
    transform: scale(1);
  }
}

/* Translation Fade In Animation */
@keyframes translateFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Translation Progress Bar (if needed) */
.translation-progress {
  width: 100%;
  height: 3px;
  background: #e0e0e0;
  border-radius: 2px;
  overflow: hidden;
  margin: 8px 0;
}

.translation-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #0e1a2f, #1a2d4f);
  width: 0%;
  transition: width 0.3s ease;
  border-radius: 2px;
}

.translation-progress-bar.animating {
  animation: progressSlide 2s ease-in-out infinite;
}

@keyframes progressSlide {
  0% { width: 0%; }
  50% { width: 70%; }
  100% { width: 100%; }
}

/* Language Change Notification */
.language-change-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #4caf50;
  color: white;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-family: "Mulish", sans-serif;
  z-index: 10000;
  animation: slideInRight 0.3s ease-out;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.language-change-notification.error {
  background: #f44336;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Responsive adjustments for translation features */
@media (max-width: 768px) {
  .translation-loading,
  .translation-error {
    padding: 12px;
    font-size: 13px;
    margin: 8px 0;
  }

  .translation-indicator {
    font-size: 10px;
    margin-top: 3px;
  }

  .language-change-notification {
    top: 10px;
    right: 10px;
    left: 10px;
    font-size: 13px;
    padding: 10px 14px;
  }
}

@media (max-width: 480px) {
  .translation-loading,
  .translation-error {
    padding: 10px;
    font-size: 12px;
    margin: 6px 0;
  }

  .translation-indicator {
    font-size: 9px;
    margin-top: 2px;
  }

  .language-change-notification {
    top: 5px;
    right: 5px;
    left: 5px;
    font-size: 12px;
    padding: 8px 12px;
  }
}

/* Fullscreen mode adjustments */
#chatbot-container.fullscreen .translation-loading,
#chatbot-container.fullscreen .translation-error {
  max-width: 600px;
  margin: 15px auto;
}

#chatbot-container.fullscreen .translation-indicator {
  font-size: 12px;
}

/* Translation batch processing indicator */
.translation-batch-indicator {
  position: fixed;
  bottom: 100px;
  right: 20px;
  background: rgba(14, 26, 47, 0.9);
  color: white;
  padding: 10px 15px;
  border-radius: 20px;
  font-size: 12px;
  font-family: "Mulish", sans-serif;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: translateFadeIn 0.3s ease-out;
}

.translation-batch-indicator .spinner {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Smooth transitions for all translation states */
* {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Ensure translation indicators don't interfere with message layout */
.message-bubble {
  position: relative;
}

.message-bubble .translation-indicator {
  position: relative;
  z-index: 1;
}