/* ============================================================
   Health Guide — Chatbot premium skin v2
   Overrides legacy inline <style> in chatbot/index.html.
   Loaded AFTER the inline block so it wins the cascade.
   Uses canonical tokens from css/design-system.css (hg-*)
   ============================================================ */

/* ---------- Page frame ---------- */
html, body { height: 100%; }

body {
  font-family: 'Cairo', 'Tajawal', system-ui, sans-serif !important;
  background:
    radial-gradient(1000px 420px at 85% -80px, rgba(37,99,235,.12), transparent 60%),
    radial-gradient(900px 380px at 8% 0%, rgba(13,148,136,.12), transparent 60%),
    linear-gradient(180deg, #f4f8fc 0%, #f8fbfe 100%) !important;
  color: #0f172a !important;
  height: 100dvh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ---------- Header polish (unified floating header in site.css) ---------- */
header {
  height: 72px !important;
  border-bottom: 1px solid rgba(226,232,240,.9) !important;
}
.logo-container h1 {
  background: linear-gradient(135deg, #2563eb, #0d9488);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.01em;
}

/* ---------- Main chat shell: FULL SCREEN ---------- */
.container {
  flex: 1 !important;
  height: calc(100dvh - 72px) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 72px 0 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  min-height: 0 !important;
}

.chat-container {
  flex: 1 !important;
  min-height: 0 !important;
  height: 100% !important;
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(14px);
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* ---------- Chat header: doctor bar ---------- */
.chat-header {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 45%, #0d9488 100%) !important;
  padding: .9rem 1.25rem !important;
  min-height: 74px !important;
  gap: 1rem;
  position: relative;
  overflow: hidden;
}
.chat-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(320px 160px at 15% 0%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(280px 160px at 90% 100%, rgba(255,255,255,.14), transparent 60%);
  pointer-events: none;
}
.chat-header::after {
  /* doctor identity (RTL: right side) */
  content: '🩺';
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.45);
  border-radius: 16px;
  backdrop-filter: blur(6px);
}
/* push content away from avatar in RTL */
.chat-header > div:first-child { margin-right: 60px; }

.status-indicator {
  flex-direction: row-reverse;
  gap: .6rem !important;
  font-weight: 700;
}
#statusText {
  font-size: .95rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
#statusText::before {
  content: 'الطبيب الافتراضي الذكي';
  font-weight: 800;
  font-size: 1.05rem;
}
.status-dot {
  width: 11px !important;
  height: 11px !important;
  border: 2px solid #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,.25) !important;
}

/* AI thinking pill */
.ai-thinking {
  background: rgba(255,255,255,.16) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: .45rem .95rem !important;
  font-size: .85rem !important;
  backdrop-filter: blur(8px);
  margin: 0 !important;
}
.ai-thinking i { animation: hg-spin 1.6s linear infinite; }
@keyframes hg-spin { to { transform: rotate(360deg); } }

/* ---------- Messages area ---------- */
.chat-messages {
  background:
    radial-gradient(600px 220px at 50% 0%, rgba(37,99,235,.06), transparent 65%),
    radial-gradient(500px 240px at 90% 100%, rgba(13,148,136,.06), transparent 65%),
    #f7fafd !important;
  padding: 1.5rem 1.4rem !important;
  gap: .9rem !important;
  scroll-behavior: smooth;
}

.message {
  max-width: 78% !important;
  padding: .95rem 1.15rem !important;
  border-radius: 18px !important;
  font-size: .97rem !important;
  line-height: 1.85 !important;
  box-shadow: 0 4px 14px rgba(15,23,42,.06) !important;
  animation: hg-msg-in .35s cubic-bezier(.22,1,.36,1) both !important;
}
@keyframes hg-msg-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: none; }
}

.message.user {
  background: linear-gradient(135deg, #2563eb 0%, #0d9488 100%) !important;
  border-end-end-radius: 6px !important;
  box-shadow: 0 12px 26px rgba(37,99,235,.28) !important;
}
.message.bot {
  background: #fff !important;
  border: 1px solid #e6eef7 !important;
  border-start-start-radius: 6px !important;
  color: #1e293b !important;
  position: relative;
}
.message.bot::before {
  content: '🤖';
  position: absolute;
  top: -13px;
  right: 12px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #2563eb, #0d9488);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  border: 2px solid #fff;
  box-shadow: 0 4px 10px rgba(37,99,235,.3);
}

.message-timestamp {
  font-size: .7rem !important;
  opacity: .65;
  margin-top: .4rem !important;
}

/* Bot rich content */
.message.bot h1, .message.bot h2, .message.bot h3 {
  color: #0b2a4a !important;
  font-size: 1.05rem !important;
  margin: .9rem 0 .5rem !important;
  padding-bottom: .35rem;
  border-bottom: 2px solid #e8f1fd;
}
.message.bot ul, .message.bot ol { margin: .6rem 0 !important; }
.message.bot li { margin-bottom: .3rem; }
.message.bot li::marker { color: #2563eb; }
.message.bot table { border-radius: 12px; overflow: hidden; border: 1px solid #e2e8f0; font-size: .88rem; }
.message.bot th { background: linear-gradient(135deg, #2563eb, #0d9488) !important; color: #fff !important; }
.message.bot blockquote {
  background: #f1f6fd;
  border-right: 4px solid #2563eb !important;
  border-radius: 0 12px 12px 0;
  padding: .7rem 1rem !important;
}
.message.bot code {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: .1rem .45rem;
  border-radius: 7px;
  font-size: .85em;
  direction: ltr;
  display: inline-block;
}

/* Alert cards inside bot bubbles */
.condition-explanation, .home-care-tips, .qa-learned, .disease-not-found {
  border-radius: 14px !important;
  padding: .95rem 1rem !important;
  margin: .9rem 0 .3rem !important;
  font-size: .92rem !important;
  border: 1px solid !important;
}
.condition-explanation {
  background: linear-gradient(180deg, #eff6ff, #f8fbff) !important;
  border-color: #bfdbfe !important;
  border-right: 4px solid #2563eb !important;
}
.home-care-tips {
  background: linear-gradient(180deg, #ecfdf5, #f8fefb) !important;
  border-color: #a7f3d0 !important;
  border-right: 4px solid #10b981 !important;
}
.home-care-tips h4, .condition-explanation h4, .qa-learned h4 { font-size: .95rem !important; margin-bottom: .5rem !important; }
.home-care-tips ul { list-style: none !important; padding: 0 !important; margin: .3rem 0 0 !important; }
.home-care-tips li { background: rgba(255,255,255,.7); border-radius: 10px; padding: .45rem .7rem !important; margin-bottom: .4rem !important; }
.qa-learned {
  background: linear-gradient(180deg, #f0fdfa, #f8fffd) !important;
  border-color: #99f6e4 !important;
  border-right: 4px solid #0d9488 !important;
}
.disease-not-found {
  background: #fffbeb !important;
  border-color: #fde68a !important;
  border-right: 4px solid #f59e0b !important;
}
.explanation-links { gap: .45rem !important; margin-top: .7rem !important; }
.explanation-link {
  background: #fff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: .45rem .7rem !important;
  font-size: .85rem !important;
  font-weight: 600;
}
.explanation-link:hover { background: #2563eb; color: #fff !important; text-decoration: none !important; }

/* ---------- Suggestions ---------- */
.suggestions {
  gap: .55rem !important;
  margin: .4rem auto .2rem !important;
  max-width: 100%;
}
.suggestion {
  background: #fff !important;
  color: #1d4ed8 !important;
  border: 1.5px solid #bfdbfe !important;
  padding: .55rem 1.05rem !important;
  border-radius: 999px !important;
  font-size: .87rem !important;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(37,99,235,.08) !important;
}
.suggestion:hover {
  background: linear-gradient(135deg, #2563eb, #0d9488) !important;
  color: #fff !important;
  border-color: transparent !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 22px rgba(37,99,235,.28) !important;
}

/* ---------- Typing indicator ---------- */
.typing-indicator {
  background: #fff !important;
  border: 1px solid #e6eef7 !important;
  border-radius: 999px !important;
  padding: .6rem 1.1rem !important;
  margin: 0 1.4rem .8rem !important;
  font-size: .87rem !important;
  box-shadow: 0 4px 14px rgba(15,23,42,.06) !important;
}
.typing-dots span {
  background: linear-gradient(135deg, #2563eb, #0d9488) !important;
  width: 7px !important;
  height: 7px !important;
}

/* ---------- Input bar ---------- */
.chat-input-form {
  background: rgba(255,255,255,.9) !important;
  backdrop-filter: blur(12px);
  border-top: 1px solid #e6eef7 !important;
  padding: .95rem 1.15rem !important;
  gap: .7rem !important;
  align-items: center !important;
}
.chat-input-form input {
  background: #f1f5f9 !important;
  border: 1.5px solid transparent !important;
  border-radius: 999px !important;
  padding: .95rem 1.3rem !important;
  font-size: .97rem !important;
}
.chat-input-form input:focus {
  background: #fff !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.13) !important;
}
.chat-input-form input::placeholder { color: #94a3b8 !important; }
.chat-input-form button {
  width: 52px !important;
  height: 52px !important;
  flex-shrink: 0;
  background: linear-gradient(135deg, #2563eb, #0d9488) !important;
  box-shadow: 0 12px 26px rgba(37,99,235,.32) !important;
  font-size: 1.05rem;
}
.chat-input-form button:hover { transform: translateY(-2px) scale(1.04) !important; }
.chat-input-form button:active { transform: scale(.96) !important; }
.chat-input-form button i { transform: scaleX(-1); } /* RTL send direction */

/* ---------- Actions row ---------- */
.chat-actions {
  padding: .55rem 1.15rem !important;
  background: #fff !important;
  border-top: 1px dashed #e2e8f0 !important;
}
.action-btn {
  font-weight: 600 !important;
  font-size: .84rem !important;
  border-radius: 999px !important;
  padding: .45rem .9rem !important;
}
.action-btn:hover { background: #eff6ff !important; }

/* ---------- Footer ---------- */
footer {
  display: none !important;
}
.disclaimer {
  max-width: 1020px !important;
  background: rgba(255,255,255,.75);
  border: 1px solid #e6eef7;
  border-radius: 14px;
  padding: .55rem 1rem !important;
  font-size: .8rem !important;
  backdrop-filter: blur(8px);
}
.disclaimer p { margin-bottom: .3rem !important; font-size: .8rem !important; }

/* ---------- Modals ---------- */
.modal { background: rgba(11,42,74,.55) !important; backdrop-filter: blur(10px); }
.modal-content {
  border-radius: 24px !important;
  border: 1px solid #e6eef7 !important;
  padding: 2rem !important;
  max-width: 520px !important;
  box-shadow: 0 30px 70px rgba(11,42,74,.3) !important;
  overflow: hidden;
  text-align: center;
}
.modal-content::before {
  content: '';
  display: block;
  height: 6px;
  margin: -2rem -2rem 1.5rem;
  background: linear-gradient(90deg, #2563eb, #0d9488);
}
#welcomeModal .modal-content::before { height: 0; margin: 0; }
#welcomeModal .modal-content {
  padding-top: 0 !important;
  overflow: hidden;
}
.warning-note {
  background: linear-gradient(180deg, #fffbeb, #fefce8) !important;
  border: 1.5px solid #fde68a !important;
  border-radius: 16px !important;
  padding: 1.1rem 1.2rem !important;
  margin: 0 0 1.4rem !important;
}
.warning-note h4 { color: #92400e !important; font-size: 1.05rem !important; }
.warning-note p { color: #78350f !important; font-size: .95rem !important; }
.modal-actions { margin-top: 1.2rem !important; }
.modal-btn {
  border-radius: 999px !important;
  padding: .95rem 1.6rem !important;
  font-family: 'Cairo', sans-serif !important;
  font-weight: 700 !important;
}
.modal-btn.primary {
  background: linear-gradient(135deg, #2563eb, #0d9488) !important;
  box-shadow: 0 12px 26px rgba(37,99,235,.32) !important;
}
.modal-btn.secondary { border: 1.5px solid #e2e8f0 !important; background: #f8fafc !important; }

/* ---------- QA section ---------- */
.qa-section {
  top: 72px !important;
  background:
    radial-gradient(800px 300px at 50% 0%, rgba(37,99,235,.07), transparent 65%),
    #f7fafd !important;
  padding: 2rem clamp(1rem, 4vw, 3rem) 4rem !important;
}
.qa-header h2 { font-size: 1.5rem !important; }
.search-input {
  border-radius: 999px !important;
  padding: 1rem 1.4rem !important;
  box-shadow: 0 4px 14px rgba(15,23,42,.06) !important;
  border: 1.5px solid #e2e8f0 !important;
}
.filter-btn {
  border-radius: 999px !important;
  padding: .55rem 1.1rem !important;
  font-weight: 600 !important;
  background: #fff !important;
}
.filter-btn.active {
  background: linear-gradient(135deg, #2563eb, #0d9488) !important;
  box-shadow: 0 8px 20px rgba(37,99,235,.3) !important;
}
.qa-category {
  border-radius: 20px !important;
  border: 1px solid #e6eef7 !important;
  padding: 1.4rem !important;
}
.category-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2563eb, #0d9488);
  color: #fff !important;
  border-radius: 14px;
  font-size: 1.3rem !important;
}
.category-header h3 { color: #0b2a4a !important; }
.qa-item {
  border-radius: 14px !important;
  border: 1px solid #edf2f7 !important;
  background: #f8fafc !important;
}
.qa-item:hover, .qa-item.active {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
}
.ask-question-btn {
  background: linear-gradient(135deg, #2563eb, #0d9488) !important;
  border-radius: 999px !important;
  max-width: 560px;
  margin-inline: auto;
  box-shadow: 0 12px 26px rgba(37,99,235,.3) !important;
}

/* ---------- Scrollbars ---------- */
.chat-messages::-webkit-scrollbar, .qa-section::-webkit-scrollbar { width: 8px; }
.chat-messages::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #2563eb, #0d9488) !important;
  border-radius: 999px;
  border: 2px solid #f1f5f9;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .container { margin: 60px 0 60px 0 !important; padding: 0 !important; height: calc(100dvh - 60px - 60px) !important; }
  .chat-container { border-radius: 0 !important; border: none !important; height: 100% !important; box-shadow: none !important; }
  .chat-header::after { width: 40px; height: 40px; font-size: 1.2rem; border-radius: 13px; }
  .message { max-width: 88% !important; font-size: .93rem !important; }
  #statusText::before { font-size: .95rem; }
  .ai-thinking { display: none !important; } /* keep header compact on mobile */
  .chat-messages { padding: 1rem .9rem !important; }
  .chat-input-form { padding: .75rem .8rem !important; }
  .chat-input-form button { width: 48px !important; height: 48px !important; }
  footer { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .message, .suggestion, .chat-input-form button { animation: none !important; transition: none !important; }
}

/* ---------- Phase 2: AI source badge + status + image attach ---------- */
.ai-source {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  margin-bottom: 0.6rem;
}
.ai-source.ai {
  background: linear-gradient(135deg, #2563eb, #0d9488);
  color: #fff;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}
.status-dot.offline { background-color: var(--danger-color, #ef4444); }
#statusText { cursor: default; }

#attachBtn {
  background: #fff !important;
  color: #2563eb !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: none !important;
  flex-shrink: 0;
}
#attachBtn:hover { background: #dbeafe !important; transform: scale(1.05); }
.image-preview {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.25rem;
  background: #fff;
  border-top: 1px solid #e5e7eb;
}
.image-preview img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid #2563eb;
}
#imageRemoveBtn {
  background: #fee2e2;
  color: #dc2626;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.message.user .user-image {
  display: block;
  max-width: 220px;
  border-radius: 12px;
  margin-bottom: 0.5rem;
  border: 2px solid rgba(255, 255, 255, 0.5);
}
.file-chip, .message.user .user-file {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message.user .user-file {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  margin-bottom: 0.5rem;
}