/* MEDDICARE — popup.css v4 */

/* ── SUPPORT FAB (Chat + Callback merged) ─────────── */
.support-fab { position:fixed; bottom:24px; right:96px; z-index:900; }

.support-fab-trigger {
  width:58px; height:58px; border-radius:50%;
  background:linear-gradient(135deg,#6366f1,#4f46e5);
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(99,102,241,.45);
  transition:transform .25s, box-shadow .25s;
  position:relative;
}
.support-fab-trigger:hover { transform:scale(1.08); box-shadow:0 6px 28px rgba(99,102,241,.55); }
.support-fab-trigger svg { width:26px; height:26px; }
.support-fab.open .support-fab-trigger { transform:scale(1.05); }

/* Notification badge */
.support-fab-badge {
  position:absolute; top:-4px; right:-4px;
  background:#ef4444; color:#fff;
  width:18px; height:18px; border-radius:50%;
  font-size:.62rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  border:2px solid #fff; pointer-events:none;
}

/* Popup card */
.support-fab-popup {
  position:absolute; bottom:70px; right:0;
  background:#fff; border-radius:18px;
  box-shadow:0 12px 48px rgba(0,0,0,.13),0 2px 8px rgba(0,0,0,.06);
  min-width:280px; overflow:hidden;
  opacity:0; transform:translateY(12px) scale(.94);
  pointer-events:none;
  transition:opacity .22s ease, transform .22s cubic-bezier(.4,0,.2,1);
  transform-origin:bottom right;
}
.support-fab.open .support-fab-popup {
  opacity:1; transform:translateY(0) scale(1); pointer-events:all;
}

/* Header shared by both views */
.support-popup-header {
  background:linear-gradient(135deg,#4f46e5,#7c3aed);
  padding:14px 16px; display:flex; align-items:center; gap:10px;
}
.support-popup-avatar {
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.support-popup-avatar svg { width:20px; height:20px; }
.support-popup-title { font-family:'Syne',sans-serif; font-weight:700; color:#fff; font-size:.9rem; }
.support-popup-sub { font-size:.72rem; color:rgba(255,255,255,.8); margin-top:2px; }
.support-popup-close {
  margin-left:auto; background:rgba(255,255,255,.2); border:none; color:#fff;
  width:26px; height:26px; border-radius:50%; cursor:pointer; font-size:.8rem;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:background .2s;
}
.support-popup-close:hover { background:rgba(255,255,255,.35); }
.support-back-btn {
  background:none; border:none; color:rgba(255,255,255,.85);
  font-size:.78rem; cursor:pointer; padding:0 4px; flex-shrink:0;
  transition:color .2s;
}
.support-back-btn:hover { color:#fff; }

/* Menu option buttons */
.support-popup-options { padding:12px; display:flex; flex-direction:column; gap:8px; }
.support-option {
  display:flex; align-items:center; gap:12px;
  padding:11px 12px; border-radius:12px;
  background:none; border:1px solid #e5e7eb;
  cursor:pointer; width:100%; text-align:left;
  transition:background .18s, border-color .18s;
}
.support-option:hover { background:#f5f3ff; border-color:#a5b4fc; }
.support-opt-icon {
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.support-opt-text { flex:1; }
.support-opt-label { display:block; font-family:'Syne',sans-serif; font-weight:700; color:#111827; font-size:.85rem; }
.support-opt-sub { display:block; font-size:.72rem; color:#4b5563; margin-top:2px; }
.support-opt-arrow { color:#9ca3af; font-size:1.1rem; flex-shrink:0; }

/* Callback form inside popup */
.support-cb-form { padding:14px; }
.support-cb-form > p { color:#4b5563; font-size:.8rem; margin-bottom:12px; line-height:1.5; }
.support-cb-input {
  display:block; width:100%;
  background:#f8fafc; border:1px solid #dde6ee;
  color:#111827; padding:9px 13px; border-radius:9px;
  font-size:.85rem; outline:none;
  font-family:'DM Sans',sans-serif; margin-bottom:9px;
  transition:border-color .2s;
}
.support-cb-input:focus { border-color:rgba(13,148,136,.5); box-shadow:0 0 0 3px rgba(13,148,136,.07); }
.support-cb-input::placeholder { color:#9ca3af; }
.support-cb-submit {
  width:100%; background:linear-gradient(135deg,#f97316,#ea580c);
  color:#fff; border:none; padding:11px; border-radius:9px;
  font-family:'Syne',sans-serif; font-weight:700; font-size:.88rem;
  cursor:pointer; transition:all .2s;
}
.support-cb-submit:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(249,115,22,.4); }
.support-cb-submit:disabled { opacity:.6; cursor:not-allowed; transform:none; box-shadow:none; }

/* ── CHAT POPUP (full panel, still separate) ──────── */
.chat-popup {
  position:fixed; bottom:96px; right:28px; z-index:901;
  width:320px; max-width:calc(100vw - 40px);
  background:#0d1f35; border:1px solid rgba(61,214,200,.2);
  border-radius:20px; overflow:hidden;
  box-shadow:0 16px 48px rgba(0,0,0,.5);
  display:none; flex-direction:column; max-height:500px;
}
.chat-popup.open { display:flex; animation:slideUp .35s cubic-bezier(.4,0,.2,1); }
@keyframes slideUp { from{opacity:0;transform:translateY(20px) scale(.95)} to{opacity:1;transform:none} }

.cp-header { background:linear-gradient(135deg,#0a2535,#0d3040); padding:14px 18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(61,214,200,.1); }
.cp-title { display:flex; align-items:center; gap:10px; }
.cp-avatar-small { width:32px; height:32px; border-radius:50%; background:rgba(61,214,200,.15); display:flex; align-items:center; justify-content:center; }
.cp-avatar-small svg { width:26px; height:26px; }
.cp-title strong { display:block; color:#fff; font-family:'Syne',sans-serif; font-size:.88rem; }
.cp-online { color:#81c784; font-size:.7rem; }
.cp-close { background:none; border:none; color:#8aacb8; cursor:pointer; font-size:.95rem; padding:4px; border-radius:50%; width:26px; height:26px; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.cp-close:hover { background:rgba(255,255,255,.05); color:#fff; }

.cp-body { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:8px; background:#071120; scrollbar-width:thin; scrollbar-color:rgba(61,214,200,.2) transparent; }
.cp-msg { display:flex; }
.cp-msg.bot { justify-content:flex-start; }
.cp-msg.user { justify-content:flex-end; }
.cp-msg-text { max-width:82%; padding:9px 13px; border-radius:14px; font-size:.83rem; line-height:1.5; }
.cp-msg.bot .cp-msg-text { background:#0d1f35; color:#e8f4f3; border-bottom-left-radius:4px; border:1px solid rgba(61,214,200,.1); }
.cp-msg.user .cp-msg-text { background:linear-gradient(135deg,#3dd6c8,#26b5a8); color:#071120; font-weight:500; border-bottom-right-radius:4px; }
.cp-quick-btns { display:flex; flex-wrap:wrap; gap:6px; padding:2px 0; }
.cp-quick { background:rgba(61,214,200,.08); border:1px solid rgba(61,214,200,.2); color:#3dd6c8; padding:6px 11px; border-radius:50px; font-size:.75rem; cursor:pointer; transition:all .2s; }
.cp-quick:hover { background:rgba(61,214,200,.15); }

.chat-collect-form { display:flex; flex-direction:column; gap:8px; padding:4px 0; }
.chat-collect-form input { background:#0d1f35; border:1px solid rgba(61,214,200,.2); color:#e8f4f3; padding:9px 12px; border-radius:9px; font-size:.83rem; outline:none; font-family:'DM Sans',sans-serif; transition:border-color .2s; }
.chat-collect-form input:focus { border-color:rgba(61,214,200,.45); }
.chat-collect-form input::placeholder { color:#8aacb8; }
.chat-collect-form button { background:linear-gradient(135deg,#3dd6c8,#26b5a8); color:#071120; border:none; padding:9px; border-radius:9px; font-family:'Syne',sans-serif; font-weight:700; font-size:.85rem; cursor:pointer; transition:all .2s; }
.chat-collect-form button:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(61,214,200,.3); }

.cp-footer { padding:10px 14px; background:#0d1f35; border-top:1px solid rgba(61,214,200,.1); display:flex; gap:8px; align-items:center; }
#chatInput { flex:1; background:#071120; border:1px solid rgba(61,214,200,.15); color:#e8f4f3; padding:9px 13px; border-radius:50px; font-family:'DM Sans',sans-serif; font-size:.83rem; outline:none; transition:border-color .2s; }
#chatInput:focus { border-color:rgba(61,214,200,.4); }
#chatInput::placeholder { color:#8aacb8; }
#chatSend { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#3dd6c8,#26b5a8); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .2s; }
#chatSend:hover { transform:scale(1.05); }
#chatSend svg { width:14px; height:14px; stroke:#071120; }

/* ── Responsive ───────────────────────────────────── */
@media (max-width:768px) {
  .support-fab { right:90px; bottom:16px; }
  .chat-popup { bottom:80px; right:16px; }
}
@media (max-width:480px) {
  .support-fab-popup { min-width:250px; right:-4px; }
}