/* ═══ AIDocAdvise Medical Chat Widget ═══ */
/* Self-contained floating chat — medical Q&A + symptom triage */

/* ── Bubble ── */
.cw-bubble {
  position: fixed; bottom: 24px; right: 24px; z-index: 9990;
  width: 56px; height: 56px; border-radius: 50%;
  background: transparent; color: #1a1a1a; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: none;
  transition: transform 0.2s, box-shadow 0.2s;
  font-size: 22px;
}
.cw-bubble .cw-icon-open img { filter: brightness(0); }
.cw-bubble:hover { transform: scale(1.08); }
.cw-bubble .cw-icon-open, .cw-bubble .cw-icon-close { position: absolute; transition: opacity 0.2s, transform 0.2s; }
.cw-bubble .cw-icon-close { opacity: 0; transform: rotate(-90deg); }
.cw-bubble.open .cw-icon-open { opacity: 0; transform: rotate(90deg); }
.cw-bubble.open .cw-icon-close { opacity: 1; transform: rotate(0); }

/* ── Backdrop ── */
.cw-backdrop {
  position: fixed; inset: 0; z-index: 9988;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.cw-backdrop.show { opacity: 1; pointer-events: auto; }

/* ── Panel ── */
.cw-panel {
  position: fixed; bottom: 92px; right: 24px; z-index: 9989;
  width: 400px; height: 540px;
  background: #fff; border: 1px solid #e5dfd4; border-radius: 16px;
  display: none; flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  overflow: hidden; transition: all 0.3s ease;
}
.cw-panel.open { display: flex; animation: cwSlideUp 0.3s ease-out; }
@keyframes cwSlideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* Maximized */
.cw-panel.maximized {
  width: 680px; height: 80vh; max-height: 800px;
  bottom: 50%; right: 50%; transform: translate(50%, 50%);
  border-radius: 20px;
}

/* ── Header ── */
.cw-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid #e5dfd4;
  background: #fafaf5; flex-shrink: 0;
}
.cw-header-logo { height: 18px; }
.cw-header-title { flex: 1; font-size: 0.85rem; font-weight: 600; color: #1a1a1a; }
.cw-header-dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; flex-shrink: 0; }
.cw-header button {
  background: none; border: none; cursor: pointer; color: #999; font-size: 16px; padding: 2px 4px;
}
.cw-header button:hover { color: #1a1a1a; }

/* ── Language menu ── */
.cw-lang-menu {
  display: none; position: absolute; top: 100%; right: 0; margin-top: 6px;
  background: #fff; border: 1px solid #e5dfd4; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 10; min-width: 150px;
  overflow: hidden;
}
.cw-lang-menu.open { display: block; animation: cwSlideUp 0.2s ease-out; }
.cw-lang-menu button {
  display: block; width: 100%; padding: 9px 14px; border: none; background: none;
  text-align: left; font-size: 0.82rem; cursor: pointer; color: #1a1a1a;
  transition: background 0.1s;
}
.cw-lang-menu button:hover { background: #f5f5f0; }
.cw-lang-menu button.active { background: #f5f5f0; font-weight: 600; }

/* ── Messages ── */
.cw-messages {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  scroll-behavior: smooth;
}

.cw-msg {
  padding: 12px 16px; border-radius: 12px; font-size: 0.87rem;
  line-height: 1.65; word-break: break-word; max-width: 90%;
  animation: cwMsgIn 0.25s ease-out;
}
@keyframes cwMsgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.cw-msg.user {
  background: #1a1a1a; color: #fff; align-self: flex-end;
  border-radius: 12px 12px 4px 12px; max-width: 75%;
}
.cw-msg.assistant {
  background: #f5f5f0; align-self: flex-start; max-width: 92%;
  border-radius: 12px 12px 12px 4px;
}
.cw-msg.system {
  background: #f5f5f0; color: #7a7a7a; align-self: center;
  text-align: center; max-width: 90%; font-size: 0.8rem;
  padding: 8px 14px; border-radius: 20px;
}

/* Markdown in assistant */
.cw-msg.assistant h1, .cw-msg.assistant h2, .cw-msg.assistant h3 { margin: 12px 0 6px; font-weight: 700; color: #1a1a1a; }
.cw-msg.assistant h1 { font-size: 1.05rem; border-bottom: 1px solid #e5dfd4; padding-bottom: 4px; }
.cw-msg.assistant h2 { font-size: 0.95rem; }
.cw-msg.assistant h3 { font-size: 0.88rem; }
.cw-msg.assistant p { margin: 6px 0; }
.cw-msg.assistant ul, .cw-msg.assistant ol { margin: 6px 0; padding-left: 18px; }
.cw-msg.assistant li { margin: 3px 0; }
.cw-msg.assistant strong { font-weight: 700; color: #1a1a1a; }
.cw-msg.assistant hr { border: none; border-top: 1px solid #e5dfd4; margin: 14px 0; }
.cw-msg.assistant code { background: rgba(0,0,0,0.05); padding: 1px 5px; border-radius: 3px; font-size: 0.83em; }
.cw-msg.assistant .cw-table-wrap { overflow-x: auto; margin: 8px 0; border-radius: 6px; border: 1px solid #e5dfd4; }
.cw-msg.assistant table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.cw-msg.assistant th { background: rgba(0,0,0,0.03); font-weight: 600; padding: 6px 10px; border-bottom: 1px solid #e5dfd4; }
.cw-msg.assistant td { padding: 5px 10px; border-bottom: 1px solid #f0ebe0; }
.cw-msg.assistant blockquote { border-left: 3px solid #d97706; margin: 10px 0; padding: 8px 12px; background: rgba(217,119,6,0.04); border-radius: 0 6px 6px 0; font-size: 0.85rem; }
.cw-msg.assistant > *:first-child { margin-top: 0; }
.cw-msg.assistant > *:last-child { margin-bottom: 0; }

/* ── Badges ── */
.cw-expert-badge { display: inline-block; background: #fef3c7; border: 1px solid #fde68a; border-radius: 16px; padding: 2px 10px; font-size: 0.7rem; margin: 2px; color: #92400e; font-weight: 500; }
.cw-juris-badge { display: inline-block; background: #e8f5e9; border: 1px solid #c8e6c9; border-radius: 16px; padding: 2px 10px; font-size: 0.7rem; margin: 2px; color: #2e7d32; font-weight: 500; }

/* ── Pipeline steps ── */
.cw-pipeline { display: flex; flex-direction: column; gap: 4px; align-self: center; width: 90%; max-width: 340px; }
.cw-step {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  background: #f5f5f0; border-radius: 8px; font-size: 0.78rem; color: #7a7a7a;
  animation: cwStepIn 0.3s ease-out;
}
@keyframes cwStepIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
.cw-step.active { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.cw-step.done { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.cw-step-icon { width: 16px; text-align: center; flex-shrink: 0; }
.cw-step.active .cw-step-icon { animation: cwPulse 1.2s ease-in-out infinite; }
@keyframes cwPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── Typing indicator ── */
.cw-typing { display: none; padding: 8px 16px; gap: 4px; align-items: center; }
.cw-typing.show { display: flex; }
.cw-typing span { width: 5px; height: 5px; border-radius: 50%; background: #999; animation: cwBounce 0.6s infinite alternate; }
.cw-typing span:nth-child(2) { animation-delay: 0.15s; }
.cw-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes cwBounce { to { opacity: 0.3; transform: translateY(-3px); } }

/* ── Input area ── */
.cw-input-area {
  display: flex; gap: 6px; padding: 12px; border-top: 1px solid #e5dfd4;
  background: #fafaf5; flex-shrink: 0;
}
.cw-input {
  flex: 1; border: 1px solid #e5dfd4; border-radius: 10px;
  padding: 8px 12px; font-size: 0.88rem; resize: none; font-family: inherit;
  background: #fff; min-height: 36px; max-height: 80px;
}
.cw-input:focus { outline: none; border-color: #1a1a1a; }
.cw-send {
  padding: 8px 18px; border: none; background: #1a1a1a; color: #fff;
  border-radius: 10px; font-weight: 600; cursor: pointer; white-space: nowrap;
  font-size: 0.85rem; transition: transform 0.1s;
}
.cw-send:hover:not(:disabled) { transform: translateY(-1px); }
.cw-send:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Quick replies ── */
.cw-quick-replies { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px 0; }
.cw-quick-btn {
  border: 1px solid #e5dfd4; background: #fff; color: #1a1a1a;
  border-radius: 16px; padding: 5px 12px; font-size: 0.75rem; font-weight: 500;
  cursor: pointer; transition: all 0.15s;
}
.cw-quick-btn:hover { background: #1a1a1a; color: #fff; }

/* ── Share bar ── */
.cw-share-bar { display: flex; gap: 6px; align-self: center; animation: cwMsgIn 0.25s ease-out; }
.cw-share-bar button {
  display: flex; align-items: center; gap: 4px; padding: 6px 14px;
  border: 1px solid #e5dfd4; border-radius: 16px; background: #fff;
  color: #1a1a1a; font-size: 0.75rem; font-weight: 500; cursor: pointer;
}
.cw-share-bar button:hover { background: #f5f5f0; }

/* ── Share modal ── */
.cw-share-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center;
  animation: cwFadeIn 0.2s;
}
@keyframes cwFadeIn { from { opacity: 0; } to { opacity: 1; } }
.cw-share-modal {
  background: #fff; border-radius: 14px; padding: 24px; max-width: 400px; width: 90%;
  box-shadow: 0 16px 48px rgba(0,0,0,0.15); animation: cwSlideUp 0.25s ease-out;
}
.cw-share-modal h3 { font-size: 1rem; font-weight: 700; margin: 0 0 4px; }
.cw-share-modal .subtitle { font-size: 0.78rem; color: #7a7a7a; margin-bottom: 14px; }
.cw-share-modal label { font-size: 0.75rem; font-weight: 600; color: #7a7a7a; display: block; margin-bottom: 4px; }
.cw-share-modal input { width: 100%; padding: 8px 12px; border: 1px solid #e5dfd4; border-radius: 8px; font-size: 0.85rem; margin-bottom: 10px; box-sizing: border-box; }
.cw-share-modal input:focus { outline: none; border-color: #1a1a1a; }
.cw-share-actions { display: flex; gap: 6px; margin-top: 4px; }
.cw-btn-share { flex: 1; padding: 9px; border: none; background: #1a1a1a; color: #fff; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 0.85rem; }
.cw-btn-cancel { padding: 9px 14px; border: 1px solid #e5dfd4; background: #fff; border-radius: 8px; cursor: pointer; font-size: 0.85rem; color: #7a7a7a; }

/* ── Payment modal ── */
.cw-pay-overlay {
  position: fixed; inset: 0; z-index: 10001;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  animation: cwFadeIn 0.2s;
}
.cw-pay-modal {
  background: #fff; border-radius: 16px; padding: 28px; max-width: 400px; width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2); animation: cwSlideUp 0.25s ease-out;
}
.cw-pay-modal h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 4px; }
.cw-pay-modal .pay-amount { font-size: 1.6rem; font-weight: 800; margin: 12px 0; }
.cw-pay-modal .pay-credits { font-size: 0.82rem; color: #7a7a7a; }
.cw-pay-modal label { font-size: 0.78rem; font-weight: 600; color: #7a7a7a; display: block; margin: 12px 0 6px; }
.cw-pay-modal input { width: 100%; padding: 9px 12px; border: 1px solid #e5dfd4; border-radius: 8px; font-size: 0.88rem; box-sizing: border-box; }
#cw-card-element {
  padding: 10px 12px; border: 1px solid #e5dfd4; border-radius: 8px;
  background: #fff; min-height: 40px;
}
#cw-card-element.StripeElement--focus { border-color: #1a1a1a; box-shadow: 0 0 0 2px rgba(26,26,26,0.08); }
#cw-card-element.StripeElement--invalid { border-color: #dc2626; }
.cw-pay-error { color: #dc2626; font-size: 0.8rem; margin-top: 6px; min-height: 20px; }
.cw-pay-actions { display: flex; gap: 8px; margin-top: 16px; }
.cw-pay-btn {
  flex: 1; padding: 11px; border: none; background: #1a1a1a; color: #fff;
  border-radius: 10px; font-weight: 700; cursor: pointer; font-size: 0.92rem;
  transition: opacity 0.15s;
}
.cw-pay-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cw-pay-btn:hover:not(:disabled) { background: #333; }
.cw-pay-cancel { padding: 11px 16px; border: 1px solid #e5dfd4; background: #fff; border-radius: 10px; cursor: pointer; font-size: 0.88rem; color: #7a7a7a; }
.cw-pay-secure { text-align: center; margin-top: 12px; font-size: 0.72rem; color: #999; }

.cw-pay-success { text-align: center; padding: 20px 0; }
.cw-pay-success .pay-check { font-size: 3rem; color: #16a34a; margin-bottom: 8px; }

/* ── Mobile ── */
@media (max-width: 640px) {
  .cw-panel.open { width: 100vw; right: 0; bottom: 0; height: 80vh; border-radius: 16px 16px 0 0; }
  .cw-panel.maximized { width: 100vw; height: 100vh; bottom: 0; right: 0; border-radius: 0; transform: none; }
  .cw-bubble { bottom: 16px; right: 16px; width: 50px; height: 50px; z-index: 9990; }
  .cw-bubble.open { display: none !important; }
  .cw-input-area { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}