/* ══════════════════════════════════════════════════════════
   KME Patient Care — Premium Chatbot Panel Styles
   ══════════════════════════════════════════════════════════ */

/* ─── FAB Button ─── */
.chat-fab{position:fixed;bottom:2rem;right:2rem;z-index:200;background:var(--primary-gradient,linear-gradient(135deg,#1B6EC2,#3B8FE4));color:#fff;width:62px;height:62px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 32px rgba(27,110,194,0.4),0 0 0 0 rgba(27,110,194,0.3);transition:all 0.3s var(--ease,ease);animation:fabPulse 3s ease-in-out infinite}
@keyframes fabPulse{0%,100%{box-shadow:0 8px 32px rgba(27,110,194,0.4),0 0 0 0 rgba(27,110,194,0.3)}50%{box-shadow:0 8px 32px rgba(27,110,194,0.4),0 0 0 14px rgba(27,110,194,0)}}
.chat-fab:hover{transform:scale(1.1);box-shadow:0 12px 40px rgba(27,110,194,0.5);animation:none}
.chat-fab i{font-size:26px;transition:all 0.3s}
.chat-fab .badge{position:absolute;top:-4px;right:-4px;width:20px;height:20px;background:linear-gradient(135deg,#E24B4A,#ff6b6b);border-radius:50%;font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center;border:2.5px solid #fff;animation:badgeBounce 2s ease infinite}
@keyframes badgeBounce{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

/* ─── Panel ─── */
.chat-panel{position:fixed;bottom:6.5rem;right:2rem;z-index:200;width:400px;max-height:640px;background:var(--surface,#fff);border-radius:24px;box-shadow:0 25px 80px rgba(0,0,0,0.15),0 0 0 1px rgba(27,110,194,0.06);display:none;flex-direction:column;overflow:hidden;transform:translateY(20px) scale(0.95);opacity:0;transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1)}
.chat-panel.open{display:flex;transform:translateY(0) scale(1);opacity:1}

/* ─── Glassmorphism Header ─── */
.chat-head{background:linear-gradient(135deg,var(--primary-xdark,#0B3D6E) 0%,#0a4a6e 50%,var(--primary-dark,#145DA0) 100%);padding:1rem 1.25rem;display:flex;align-items:center;gap:10px;position:relative;overflow:hidden}
.chat-head::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(126,200,244,0.06),transparent);animation:headerShimmer 5s ease-in-out infinite}
@keyframes headerShimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.chat-avatar{width:38px;height:38px;background:rgba(59,143,228,0.3);border:1.5px solid rgba(255,255,255,0.15);backdrop-filter:blur(8px);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}
.chat-avatar i{font-size:18px;color:#fff}
.chat-avatar::after{content:'';position:absolute;bottom:0;right:0;width:10px;height:10px;background:#56d895;border-radius:50%;border:2px solid var(--primary-xdark,#0B3D6E)}
.chat-head-info{flex:1;min-width:0}
.chat-head-name{font-size:13px;font-weight:500;color:#fff;letter-spacing:0.02em}
.chat-head-status{font-size:10px;color:rgba(255,255,255,0.45);display:flex;align-items:center;gap:5px}
.status-dot{width:6px;height:6px;background:#56d895;border-radius:50%;animation:statusPulse 2s ease infinite}
@keyframes statusPulse{0%,100%{opacity:1}50%{opacity:0.4}}

/* ─── Header Actions ─── */
.chat-head-actions{display:flex;align-items:center;gap:4px}
.chat-head-btn{background:rgba(255,255,255,0.06);border:none;color:rgba(255,255,255,0.5);width:28px;height:28px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;font-size:13px}
.chat-head-btn:hover{background:rgba(255,255,255,0.15);color:#fff}
.chat-head-btn.active{background:rgba(59,143,228,0.35);color:#7EC8F4}
.chat-head-close{background:rgba(255,255,255,0.06);border:none;color:rgba(255,255,255,0.5);width:28px;height:28px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;font-size:13px}
.chat-head-close:hover{background:rgba(239,68,68,0.25);color:#ff8a8a}

/* ─── Quick Toolbar ─── */
.chat-quick-toolbar{display:flex;gap:4px;padding:8px 10px;background:var(--surface-alt,#F5F7FA);border-bottom:1px solid var(--border,rgba(27,110,194,0.08));overflow-x:auto;scrollbar-width:none}
.chat-quick-toolbar::-webkit-scrollbar{display:none}
.chat-quick-btn{display:flex;align-items:center;gap:4px;padding:5px 10px;border-radius:20px;border:1px solid var(--border,rgba(27,110,194,0.08));background:var(--surface,#fff);font-family:var(--sans);font-size:10px;font-weight:500;color:var(--primary-dark,#145DA0);cursor:pointer;transition:all 0.25s var(--ease,ease);white-space:nowrap;flex-shrink:0}
.chat-quick-btn:hover{background:var(--primary,#1B6EC2);color:#fff;border-color:var(--primary,#1B6EC2);transform:translateY(-1px);box-shadow:0 3px 10px rgba(27,110,194,0.2)}
.chat-quick-btn i{font-size:12px}
.chat-quick-btn.emergency{border-color:rgba(226,75,74,0.25);color:#E24B4A}
.chat-quick-btn.emergency:hover{background:#E24B4A;color:#fff;border-color:#E24B4A}

/* ─── Messages ─── */
.chat-messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:10px;min-height:260px;max-height:340px;scroll-behavior:smooth;background:var(--bg,#FAFBFD)}
.chat-messages::-webkit-scrollbar{width:3px}
.chat-messages::-webkit-scrollbar-thumb{background:rgba(27,110,194,0.12);border-radius:4px}

/* ─── Bubbles ─── */
.msg{display:flex;gap:6px;align-items:flex-end;animation:msgSlideIn 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;opacity:0}
@keyframes msgSlideIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.msg.user{flex-direction:row-reverse}
.msg-avatar{width:26px;height:26px;background:var(--primary-light,#E8F1FC);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.msg-avatar i{font-size:12px;color:var(--primary,#1B6EC2)}
.msg.user .msg-avatar{background:var(--primary,#1B6EC2)}
.msg.user .msg-avatar i{color:#fff}
.bubble{max-width:260px;padding:10px 14px;border-radius:16px;font-size:12.5px;line-height:1.65;position:relative;word-wrap:break-word}
.msg.bot .bubble{background:var(--surface,#fff);color:var(--text,#1F2937);border-bottom-left-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,0.04);border:1px solid var(--border,rgba(27,110,194,0.08))}
.msg.user .bubble{background:var(--primary-gradient,linear-gradient(135deg,#1B6EC2,#3B8FE4));color:#fff;border-bottom-right-radius:4px;box-shadow:0 3px 12px rgba(27,110,194,0.2)}
.msg-time{font-size:9px;color:var(--text-secondary,#6B7280);margin-top:3px;text-align:center}

/* ─── Reactions ─── */
.msg-reactions{display:flex;gap:3px;margin-top:4px}
.msg-reaction-btn{background:var(--surface-alt,#F5F7FA);border:1px solid var(--border,rgba(27,110,194,0.08));border-radius:12px;width:24px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:10px;transition:all 0.2s;color:var(--text-secondary,#6B7280)}
.msg-reaction-btn:hover{background:var(--primary-light,#E8F1FC);border-color:var(--primary-mid,#3B8FE4);transform:scale(1.15)}
.msg-reaction-btn.active{background:var(--primary,#1B6EC2);color:#fff;border-color:var(--primary,#1B6EC2)}
.msg.user .msg-reactions{flex-direction:row-reverse}

/* ─── Typing ─── */
.typing{display:flex;gap:5px;align-items:center;padding:10px 14px}
.typing-dot{width:7px;height:7px;background:var(--primary-mid,#3B8FE4);border-radius:50%;animation:typingBounce 1.4s ease infinite}
.typing-dot:nth-child(2){animation-delay:0.2s}
.typing-dot:nth-child(3){animation-delay:0.4s}
@keyframes typingBounce{0%,60%,100%{transform:translateY(0);opacity:0.4}30%{transform:translateY(-10px);opacity:1}}

/* ─── Suggestions ─── */
.chat-suggestions{padding:0 0.75rem 0.5rem;display:flex;gap:5px;flex-wrap:wrap;background:var(--bg,#FAFBFD)}
.sug-btn{background:var(--surface,#fff);border:1px solid var(--border,rgba(27,110,194,0.08));border-radius:20px;padding:5px 12px;font-family:var(--sans);font-size:10.5px;color:var(--primary-dark,#145DA0);cursor:pointer;transition:all 0.25s var(--ease,ease);font-weight:400}
.sug-btn:hover{background:var(--primary,#1B6EC2);color:#fff;border-color:var(--primary,#1B6EC2);transform:translateY(-1px);box-shadow:0 4px 12px rgba(27,110,194,0.15)}

/* ─── Input ─── */
.chat-input-row{display:flex;gap:6px;padding:0.75rem;border-top:1px solid var(--border,rgba(27,110,194,0.08));background:var(--surface,#fff);align-items:flex-end}
.chat-input{flex:1;border:1px solid var(--border,rgba(27,110,194,0.08));border-radius:14px;padding:10px 14px;font-family:var(--sans);font-size:13px;outline:none;transition:all 0.25s var(--ease,ease);background:var(--surface-alt,#F5F7FA);resize:none;min-height:38px;max-height:80px;overflow-y:auto;line-height:1.4;color:var(--text,#1F2937)}
.chat-input:focus{border-color:var(--primary-mid,#3B8FE4);background:var(--surface,#fff);box-shadow:0 0 0 3px rgba(27,110,194,0.06)}
.chat-voice-btn{background:transparent;border:1px solid var(--border,rgba(27,110,194,0.08));border-radius:10px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s;flex-shrink:0;color:var(--text-secondary,#6B7280)}
.chat-voice-btn:hover{background:var(--primary-light,#E8F1FC);color:var(--primary,#1B6EC2);border-color:var(--primary-mid,#3B8FE4)}
.chat-voice-btn.recording{background:rgba(226,75,74,0.08);border-color:rgba(226,75,74,0.35);color:#E24B4A;animation:voicePulse 1.5s ease infinite}
@keyframes voicePulse{0%,100%{box-shadow:0 0 0 0 rgba(226,75,74,0.3)}50%{box-shadow:0 0 0 8px rgba(226,75,74,0)}}
.chat-send{background:var(--primary-gradient,linear-gradient(135deg,#1B6EC2,#3B8FE4));border:none;border-radius:10px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.25s var(--ease,ease);flex-shrink:0}
.chat-send:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(27,110,194,0.3)}
.chat-send i{font-size:14px;color:#fff}
.chat-disclaimer{font-size:9px;color:var(--text-secondary,#6B7280);text-align:center;padding:0 1rem 0.6rem;opacity:0.6}

/* ─── Cards in Chat ─── */
.health-tip-card{background:linear-gradient(135deg,var(--primary-lighter,#F4F8FD),var(--primary-light,#E8F1FC));border:1px solid rgba(27,110,194,0.1);border-radius:14px;padding:12px;margin:4px 0;font-size:11.5px;line-height:1.5}
.health-tip-card .tip-header{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--primary-dark,#145DA0);margin-bottom:6px;font-size:11px}
.health-tip-card .tip-body{color:var(--text,#1F2937)}
.med-ref-card{background:var(--surface,#fff);border:1px solid var(--border,rgba(27,110,194,0.08));border-radius:14px;padding:12px;margin:4px 0;font-size:11.5px;box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,0.04))}
.med-ref-card .ref-header{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--primary-dark,#145DA0);margin-bottom:8px;font-size:11px;padding-bottom:6px;border-bottom:1px solid var(--border,rgba(27,110,194,0.08))}
.med-ref-card .ref-body{color:var(--text,#1F2937);line-height:1.55}
.med-ref-card .ref-warning{background:rgba(226,75,74,0.06);border:1px solid rgba(226,75,74,0.15);border-radius:8px;padding:6px 8px;font-size:10px;color:#a94442;margin-top:6px}
.symptom-card{background:var(--surface,#fff);border:1px solid var(--border,rgba(27,110,194,0.08));border-radius:14px;padding:12px;box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,0.04))}
.symptom-card .sc-header{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--primary-dark,#145DA0);font-size:11px;margin-bottom:10px}
.med-reminder-card{background:linear-gradient(135deg,var(--primary-lighter,#F4F8FD),var(--primary-light,#E8F1FC));border:1px solid rgba(27,110,194,0.12);border-radius:14px;padding:12px;font-size:11px}
.med-reminder-card .reminder-header{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--primary-dark,#145DA0);margin-bottom:8px;font-size:11px}
.med-reminder-card .reminder-row{display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid rgba(27,110,194,0.08);font-size:10.5px}
.med-reminder-card .reminder-copy-btn{background:var(--primary,#1B6EC2);color:#fff;border:none;border-radius:6px;padding:4px 10px;font-size:10px;cursor:pointer;margin-top:8px;font-weight:500}

/* ─── Alert & Escalation ─── */
.chat-alert-box{background:rgba(226,75,74,0.06);border:1px solid rgba(226,75,74,0.2);border-radius:14px;padding:12px;margin:8px 0;color:var(--text,#1F2937);font-size:12px;display:flex;flex-direction:column;gap:8px}
.chat-alert-title{color:#E24B4A;font-weight:600;display:flex;align-items:center;gap:6px}
.chat-alert-btn{background:#E24B4A;color:#fff;border:none;border-radius:8px;padding:7px 14px;font-size:11px;cursor:pointer;font-weight:500;align-self:flex-start;transition:background 0.2s}
.chat-alert-btn:hover{background:#c53030}
.chat-escalation-banner{background:linear-gradient(135deg,rgba(245,158,11,0.08),rgba(245,158,11,0.03));border:1px solid rgba(245,158,11,0.2);border-radius:14px;padding:12px;margin:6px 0;font-size:11px;color:var(--text,#1F2937)}
.chat-escalation-banner .esc-title{color:#D97706;font-weight:600;display:flex;align-items:center;gap:5px;margin-bottom:6px;font-size:11px}
.chat-escalation-banner .esc-actions{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}
.esc-action-btn{padding:5px 12px;border-radius:20px;border:1px solid rgba(245,158,11,0.3);background:rgba(245,158,11,0.06);font-family:var(--sans);font-size:10px;color:#D97706;cursor:pointer;transition:all 0.2s;font-weight:500}
.esc-action-btn:hover{background:#D97706;color:#fff}

/* ─── Language ─── */
.lang-toggle{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.1);border:0.5px solid rgba(255,255,255,0.2);border-radius:20px;padding:4px 8px;margin-left:auto}

/* ─── Dark Mode ─── */
.chat-panel.dark-mode{background:#111827}
.chat-panel.dark-mode .chat-messages{background:#111827}
.chat-panel.dark-mode .msg.bot .bubble{background:#1F2937;color:#E5E7EB;box-shadow:none;border-color:rgba(255,255,255,0.06)}
.chat-panel.dark-mode .chat-input-row{background:#111827;border-top-color:rgba(255,255,255,0.06)}
.chat-panel.dark-mode .chat-input{background:#1F2937;border-color:rgba(255,255,255,0.08);color:#E5E7EB}
.chat-panel.dark-mode .chat-input:focus{border-color:var(--primary-mid,#3B8FE4);box-shadow:0 0 0 3px rgba(59,143,228,0.12)}
.chat-panel.dark-mode .chat-input::placeholder{color:rgba(255,255,255,0.25)}
.chat-panel.dark-mode .chat-quick-toolbar{background:#0F172A;border-bottom-color:rgba(255,255,255,0.04)}
.chat-panel.dark-mode .chat-quick-btn{background:#1F2937;border-color:rgba(255,255,255,0.08);color:rgba(255,255,255,0.6)}
.chat-panel.dark-mode .chat-quick-btn:hover{background:var(--primary,#1B6EC2);color:#fff}
.chat-panel.dark-mode .sug-btn{background:#1F2937;border-color:rgba(255,255,255,0.08);color:rgba(255,255,255,0.6)}
.chat-panel.dark-mode .sug-btn:hover{background:var(--primary,#1B6EC2);color:#fff}
.chat-panel.dark-mode .chat-suggestions{background:#111827}
.chat-panel.dark-mode .chat-disclaimer{color:rgba(255,255,255,0.25)}
.chat-panel.dark-mode .chat-voice-btn{border-color:rgba(255,255,255,0.08);color:rgba(255,255,255,0.4)}
.chat-panel.dark-mode .msg-reaction-btn{background:#1F2937;border-color:rgba(255,255,255,0.08);color:rgba(255,255,255,0.35)}
.chat-panel.dark-mode .health-tip-card{background:linear-gradient(135deg,#1e293b,#1a2332);border-color:rgba(59,143,228,0.15)}
.chat-panel.dark-mode .health-tip-card .tip-body{color:#D1D5DB}
.chat-panel.dark-mode .med-ref-card{background:#1F2937;border-color:rgba(255,255,255,0.06)}
.chat-panel.dark-mode .symptom-card{background:#1F2937;border-color:rgba(255,255,255,0.06)}

/* ─── Responsive ─── */
@media(max-width:768px){
  .chat-panel{width:calc(100vw - 2rem);right:1rem}
}