/* Chatbot styles - Somtel 2025 */
:root {
  --chat-primary:#222e5e; /* deep blue */
  --somtel-blue-2: #222e5e; /* Added based on previous primary color */
  --chat-accent:#fed700; /* gold */
  --chat-bg:#ffffff;
  --chat-surface:#f5f7fb;
  --chat-border:rgba(34,46,94,.14);
  --chat-radius:20px;
  --chat-shadow:0 8px 32px -4px rgba(34,46,94,.25),0 4px 12px -2px rgba(0,0,0,.08);
  --chat-transition:.35s cubic-bezier(.4,.12,.2,1);
}

.chatbot-launcher {
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:1100;
  width:68px;
  height:68px;
  border:none;
  background:linear-gradient(145deg,var(--chat-accent),#fff2a8);
  color:var(--chat-primary);
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 24px -6px rgba(34,46,94,.4),0 4px 10px -2px rgba(0,0,0,.12);
  transition:var(--chat-transition);
  isolation:isolate;
  overflow:hidden;
}
.chatbot-launcher .launcher-bg {position:absolute;inset:0;opacity:.4;mix-blend-mode:screen;}
.chatbot-launcher:hover {transform:translateY(-4px);box-shadow:0 14px 32px -8px rgba(34,46,94,.55),0 6px 16px -4px rgba(0,0,0,.18);}
.chatbot-launcher:active {transform:translateY(0);}
.chatbot-launcher svg {filter:drop-shadow(0 2px 4px rgba(0,0,0,.15));}

.chatbot-panel {position:fixed;bottom:24px;right:24px;width:380px;max-width:calc(100vw - 32px);height:560px;max-height:75vh;z-index:1200;pointer-events:none;opacity:0;transform:translateY(24px) scale(.92);transition:var(--chat-transition);display:flex;flex-direction:column;}
.chatbot-panel.open {pointer-events:auto;opacity:1;transform:translateY(0) scale(1);} 
.chatbot-card {background:var(--chat-bg);border-radius:28px;display:flex;flex-direction:column;flex:1;box-shadow:var(--chat-shadow);overflow:hidden;position:relative;border:1px solid var(--chat-border);} 
.chatbot-header {background:linear-gradient(45deg, #ffd700, #fff1a4);color:#fff;padding:18px 18px 14px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;position:relative;} 
.chatbot-header:before {content:"";position:absolute;inset:0;pointer-events:none;} 
.chatbot-brand {display:flex;align-items:center;gap:12px;} 
.chatbot-logo {width:44px;height:44px;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 4px 10px -2px rgba(0,0,0,.25);} /* ensure circular */
.chatbot-title-group {display:flex;flex-direction:column;} 
.chatbot-title {font-size:16px;font-weight:600;letter-spacing:.3px;color:var(--somtel-blue-2);} 
.chatbot-subtitle {font-size:12px;opacity:.85;color:var(--somtel-blue-2)} 
.chatbot-header-actions {display:flex;gap:6px;} 
.chatbot-header-actions button {width:34px;height:34px;border-radius:12px;border:1px solid var(--somtel-blue-2);background:rgba(255,255,255,.15);backdrop-filter:blur(4px);cursor:pointer;display:grid;place-items:center;color:#fff;transition:var(--chat-transition);}  
.chatbot-header-actions button:hover {background:rgba(255,255,255,.28);}  
.chatbot-header-actions button span {width:16px;height:16px;display:block;position:relative;}  
.chatbot-header-actions #chatbotMinimize span:before {content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:var(--somtel-blue-2);border-radius:2px;transform:translate(-50%,-50%);}  
.chatbot-header-actions #chatbotClose span:before, .chatbot-header-actions #chatbotClose span:after {content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;background:var(--somtel-blue-2);border-radius:2px;}  
.chatbot-header-actions #chatbotClose span:before {transform:translate(-50%,-50%) rotate(45deg);} .chatbot-header-actions #chatbotClose span:after {transform:translate(-50%,-50%) rotate(-45deg);}  

/* Footer bottom actions (mobile reachability) */
.chatbot-footer-actions {display:none;margin-top:8px;justify-content:flex-end;gap:8px;}
.chatbot-footer-actions button {width:36px;height:36px;border-radius:12px;border:1px solid var(--chat-border);background:#f3f6fb;color:var(--chat-primary);display:grid;place-items:center;cursor:pointer;transition:var(--chat-transition);} 
.chatbot-footer-actions button:hover {background:#e9eef7;}
.chatbot-footer-actions .chatbot-close span:before, 
.chatbot-footer-actions .chatbot-close span:after {content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;background:currentColor;border-radius:2px;}
.chatbot-footer-actions .chatbot-close span {position:relative;display:block;width:16px;height:16px;}
.chatbot-footer-actions .chatbot-close span:before {transform:translate(-50%,-50%) rotate(45deg);} 
.chatbot-footer-actions .chatbot-close span:after {transform:translate(-50%,-50%) rotate(-45deg);} 
.chatbot-footer-actions .chatbot-minimize span {position:relative;display:block;width:16px;height:16px;}
.chatbot-footer-actions .chatbot-minimize span:before {content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:currentColor;border-radius:2px;transform:translate(-50%,-50%);} 

.chatbot-view { display: flex; flex-direction: column; flex: 1; overflow: hidden; }

.chatbot-pre-chat-body { padding:10px 20px; font-size: 14px; line-height: 1.5; color: #334; overflow-y: auto; }
.chatbot-pre-chat-body p { margin-bottom: 20px; }
#preChatForm .form-group { margin-bottom: 5px; }
#preChatForm label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 13px; }
#preChatForm input { width: 100%; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--chat-border); background: var(--chat-surface); transition: var(--chat-transition); }
#preChatForm input:focus { outline: none; border-color: var(--chat-primary); background: #fff; box-shadow: 0 0 0 3px rgba(34,46,94,.15); }
#preChatForm input.invalid { border-color: #d93025; }
.error-message { color: #d93025; font-size: 12px; margin-top: 4px; min-height: 16px; }
.pre-chat-submit { width: 100%; padding: 12px; border: none; border-radius: 16px; background: var(--chat-primary); color: #fff; font-weight: 600; font-size: 15px; cursor: pointer; transition: var(--chat-transition); }
.pre-chat-submit:hover { background: #2d3b73; }

.chatbot-body {flex:1;overflow:hidden;display:flex;flex-direction:column;}  
.chatbot-messages {flex:1;overflow-y:auto;padding:18px 18px 12px;scroll-behavior:smooth;display:flex;flex-direction:column;gap:12px;background:white}  
.chatbot-messages::-webkit-scrollbar {width:10px;} .chatbot-messages::-webkit-scrollbar-track {background:transparent;} .chatbot-messages::-webkit-scrollbar-thumb {background:#d4dae6;border-radius:20px;border:2px solid #f0f3f8;} .chatbot-messages::-webkit-scrollbar-thumb:hover {background:#c2c9d6;}  
.message {display:flex;align-items:flex-end;gap:10px;max-width:85%;animation:fadeIn .5s ease;}  
.message.bot {align-self:flex-start;} .message.user {align-self:flex-end;flex-direction:row-reverse;max-width:90%;}
.avatar {width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:0 4px 12px -3px rgba(0,0,0,.25);display:grid;place-items:center;overflow:hidden;flex:0 0 40px;} /* circular avatar always */
.message.user .avatar {display:none;} /* user has no avatar */
.avatar img {width:100%;height:100%;object-fit:cover;}
.bubble {background:white;border-radius:20px;padding:12px 14px;border:1px solid lightgrey;position:relative;}  
.message.user .bubble {background:#fff8d4;color:var(--somtel-blue-2);border:1px solid #ffeb7d;}  
.bubble-text {font-size:14px;line-height:1.4;}  
.message.pending .bubble {background:linear-gradient(90deg,#e3e8f3 0%,#f2f5fa 50%,#e3e8f3 100%);background-size:200% 100%;animation:loadingPulse 1.5s linear infinite;}  
.typing-indicator {display:flex;gap:6px;align-items:center;}  
.typing-indicator span {width:8px;height:8px;background:var(--chat-primary);border-radius:50%;display:inline-block;animation:typingBounce 1s infinite ease-in-out;}  
.typing-indicator span:nth-child(2){animation-delay:.15s;} .typing-indicator span:nth-child(3){animation-delay:.3s;}  

.chatbot-footer {padding:12px 14px;background:#fff;border-top:1px solid var(--chat-border);}  
#chatbotForm {display:flex;gap:10px;align-items:center;}  
.chatbot-input {flex:1;border:1px solid var(--chat-border);border-radius:16px;padding:12px 16px;font-size:14px;background:#f9fbfe;transition:var(--chat-transition);}  
.chatbot-input:focus {outline:none;border-color:var(--chat-primary);background:#fff;box-shadow:0 0 0 3px rgba(34,46,94,.15);}  
.chatbot-send {width:54px;height:46px;border:none;border-radius:16px;background:var(--chat-primary);color:#fff;cursor:pointer;display:grid;place-items:center;font-weight:600;box-shadow:0 6px 16px -4px rgba(34,46,94,.45);transition:var(--chat-transition);}  
.chatbot-send[disabled] {opacity:.45;cursor:not-allowed;box-shadow:none;}  
.chatbot-send:hover:not([disabled]) {background:#2d3b73;transform:translateY(-2px);}  
.chatbot-send:active:not([disabled]) {transform:translateY(0);}  

@keyframes fadeIn {from {opacity:0;transform:translateY(6px);} to {opacity:1;transform:translateY(0);} } 
@keyframes loadingPulse {0% {background-position:0 0;} 100% {background-position:200% 0;} } 
@keyframes typingBounce {0%,80%,100% {transform:translateY(0);} 40% {transform:translateY(-6px);} } 

/* Minimized state */  
.chatbot-panel.minimized {height:0;opacity:0;transform:translateY(24px) scale(.9);pointer-events:none;}  

/* Responsive */  
@media (max-width:600px){
  /* Float panel with edge space and 65% height */
  .chatbot-panel {left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));top:auto;width:auto;height:80dvh;max-height:80dvh;}
  .chatbot-card {border-radius:20px;}
  .chatbot-header {padding:16px 16px 12px;}
  .chatbot-messages {padding:14px 14px 10px;}
  .chatbot-footer {padding:10px 12px; padding-bottom:10px;}

  /* Show bottom actions, hide header actions for reachability */
  .chatbot-header-actions {display:none;}
  .chatbot-footer-actions {display:flex;}

  .chatbot-launcher {bottom:calc(12px + env(safe-area-inset-bottom));right:12px;width:62px;height:62px;}
}