/* ============================================================
   Beylood — Ask AI live chat UI
   ------------------------------------------------------------
   Standalone stylesheet for the AI assistant page. Uses CSS
   variables from style.css for brand consistency:
     --navy-900 (#0F3F7E), --green-300 (#3BA935),
     --gray-50..900, --gray-100 .. surface tokens.
   Works in light & dark mode without changing any other page.
   ============================================================ */

/* ---------- Section frame ---------- */
.ai-chat-section { padding-top: 56px; padding-bottom: 80px; }
.ai-chat-container { max-width: 880px; }

/* ---------- Header ---------- */
.ai-chat-header { text-align: center; margin-bottom: 28px; }

.ai-chat-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(59,169,53,.12);
  color: #2E7B26;
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
}
.ai-chat-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #3BA935;
  box-shadow: 0 0 0 0 rgba(59,169,53,.5);
  animation: aiChatPulse 1.8s infinite;
}
@keyframes aiChatPulse {
  0%   { box-shadow: 0 0 0 0 rgba(59,169,53,.5); }
  70%  { box-shadow: 0 0 0 10px rgba(59,169,53,0); }
  100% { box-shadow: 0 0 0 0 rgba(59,169,53,0); }
}

.ai-chat-title {
  font-size: clamp(28px, 4.5vw, 42px);
  font-weight: 800; letter-spacing: -.02em;
  margin: 14px 0 10px;
  color: var(--navy-900, #0F3F7E);
}
.ai-chat-sub {
  max-width: 620px; margin: 0 auto;
  color: var(--gray-600, #4B5563); font-size: 16px; line-height: 1.7;
}

/* ---------- Toolbar (sign-in chip, history, new chat) ---------- */
.ai-chat-toolbar {
  display: flex; flex-wrap: wrap;
  gap: 10px; align-items: center; justify-content: center;
  margin-top: 18px;
}
.ai-tool-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--gray-300, #D1D5DB);
  background: #fff; color: var(--navy-900, #0F3F7E);
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .15s ease;
}
.ai-tool-btn:hover { background: var(--navy-900, #0F3F7E); color: #fff; border-color: var(--navy-900, #0F3F7E); }
.ai-tool-btn-primary {
  background: linear-gradient(135deg, #0F3F7E 0%, #3BA935 100%);
  color: #fff; border-color: transparent;
}
.ai-tool-btn-primary:hover { opacity: .92; transform: translateY(-1px); }

.ai-auth-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--gray-500, #6B7280);
  padding: 6px 10px; border-radius: 999px; background: var(--gray-50, #F9FAFB);
}
.ai-auth-status::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gray-400, #9CA3AF);
}
.ai-auth-status.is-signed-in { color: #2E7B26; background: rgba(59,169,53,.10); }
.ai-auth-status.is-signed-in::before { background: #3BA935; }

/* ---------- History side panel ---------- */
.ai-history-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(380px, 92vw); z-index: 80;
  background: #fff; border-left: 1px solid var(--gray-200, #E5E7EB);
  box-shadow: -10px 0 40px -20px rgba(0,0,0,.18);
  display: flex; flex-direction: column;
  transform: translateX(0); animation: aiHistorySlide .25s ease;
}
@keyframes aiHistorySlide { from { transform: translateX(100%); } to { transform: translateX(0); } }
.ai-history-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--gray-200, #E5E7EB);
}
.ai-history-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--navy-900, #0F3F7E); }
.ai-history-close {
  background: transparent; border: 0; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--gray-500, #6B7280);
  width: 32px; height: 32px; border-radius: 8px;
}
.ai-history-close:hover { background: var(--gray-100, #F3F4F6); }
.ai-history-list {
  list-style: none; margin: 0; padding: 8px;
  overflow-y: auto; flex: 1;
}
.ai-history-item {
  padding: 12px 14px; border-radius: 10px; cursor: pointer;
  font-size: 14px; color: var(--gray-800, #1F2937);
  transition: background .12s ease;
}
.ai-history-item:hover { background: var(--gray-50, #F9FAFB); }
.ai-history-item small { display: block; margin-top: 4px; color: var(--gray-500, #6B7280); font-size: 12px; }
.ai-history-empty { text-align: center; padding: 30px 20px; color: var(--gray-500, #6B7280); font-size: 14px; }

/* ---------- Chat shell ---------- */
.ai-chat {
  background: #fff;
  border: 1px solid var(--gray-200, #E5E7EB);
  border-radius: 20px;
  box-shadow: 0 20px 60px -30px rgba(15, 63, 126, .25);
  overflow: hidden;
  display: flex; flex-direction: column;
}

.ai-chat-window {
  padding: 24px; min-height: 320px; max-height: 540px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
  scroll-behavior: smooth;
}

/* ---------- Messages ---------- */
.ai-msg { display: flex; gap: 12px; max-width: 100%; align-items: flex-start; }
.ai-msg-avatar {
  flex: 0 0 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.ai-msg-bot .ai-msg-avatar {
  background: linear-gradient(135deg, #0F3F7E 0%, #3BA935 100%);
  color: #fff;
}
.ai-msg-user { flex-direction: row-reverse; }
.ai-msg-user .ai-msg-avatar { background: var(--gray-100, #F3F4F6); }

.ai-msg-body {
  position: relative;
  background: var(--gray-50, #F9FAFB);
  border: 1px solid var(--gray-200, #E5E7EB);
  border-radius: 16px;
  padding: 12px 16px;
  font-size: 15px; line-height: 1.6;
  color: var(--gray-900, #111827);
  max-width: calc(100% - 50px);
  word-wrap: break-word;
}
.ai-msg-user .ai-msg-body {
  background: linear-gradient(135deg, #0F3F7E 0%, #1E5BB0 100%);
  color: #fff; border-color: transparent;
}
.ai-msg-body p { margin: 0 0 8px; }
.ai-msg-body p:last-child { margin: 0; }
.ai-msg-body ul, .ai-msg-body ol { margin: 6px 0 6px 18px; padding: 0; }
.ai-msg-body li { margin-bottom: 4px; }
.ai-msg-body code {
  background: rgba(15, 63, 126, .08);
  padding: 1px 6px; border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}
.ai-msg-body a { color: #1E5BB0; text-decoration: underline; }
.ai-msg-body a:hover { color: #0F3F7E; }

/* ---------- Copy button ---------- */
.ai-msg-copy {
  position: absolute; top: 8px; right: 8px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 8px;
  font-size: 11px; font-weight: 600;
  background: rgba(15, 63, 126, .06);
  color: var(--navy-900, #0F3F7E);
  border: 0; cursor: pointer; opacity: 0;
  transition: opacity .15s ease, background .15s ease;
}
.ai-msg-bot:hover .ai-msg-copy,
.ai-msg-bot:focus-within .ai-msg-copy { opacity: 1; }
.ai-msg-copy:hover { background: rgba(15, 63, 126, .12); }
.ai-msg-copy.is-copied { background: rgba(59, 169, 53, .15); color: #2E7B26; }

/* ---------- Suggested chips ---------- */
.ai-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ai-chip {
  background: #fff; border: 1px solid var(--gray-300, #D1D5DB);
  border-radius: 999px; padding: 6px 12px;
  font-size: 13px; font-weight: 500; color: var(--navy-900, #0F3F7E);
  cursor: pointer; transition: all .15s ease;
}
.ai-chip:hover { background: var(--navy-900, #0F3F7E); color: #fff; border-color: var(--navy-900, #0F3F7E); }

/* ---------- Typing indicator ---------- */
.ai-typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.ai-typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gray-400, #9CA3AF);
  animation: aiTypingDot 1.4s infinite ease-in-out;
}
.ai-typing span:nth-child(2) { animation-delay: .15s; }
.ai-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes aiTypingDot {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

/* ---------- Input form ---------- */
.ai-chat-form {
  display: flex; align-items: flex-end; gap: 10px;
  padding: 14px; border-top: 1px solid var(--gray-200, #E5E7EB);
  background: #fff;
}
.ai-chat-form textarea {
  flex: 1;
  border: 1px solid var(--gray-300, #D1D5DB);
  border-radius: 12px;
  padding: 10px 14px;
  font: inherit; font-size: 15px; line-height: 1.5;
  resize: none;
  min-height: 44px; max-height: 160px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ai-chat-form textarea:focus {
  border-color: var(--navy-900, #0F3F7E);
  box-shadow: 0 0 0 3px rgba(15, 63, 126, .12);
}
.ai-chat-send {
  width: 44px; height: 44px; border: 0; border-radius: 12px;
  background: linear-gradient(135deg, #0F3F7E 0%, #3BA935 100%);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .15s ease, transform .15s ease;
}
.ai-chat-send:hover:not(:disabled) { transform: translateY(-1px); }
.ai-chat-send:disabled { opacity: .55; cursor: not-allowed; }

.ai-chat-disclaimer {
  margin: 14px 4px 0;
  font-size: 12px; color: var(--gray-500, #6B7280);
  text-align: center; line-height: 1.5;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Dark mode ---------- */
html[data-theme="dark"] .ai-chat { background: #1F2937; border-color: #374151; }
html[data-theme="dark"] .ai-msg-body { background: #374151; border-color: #4B5563; color: #F3F4F6; }
html[data-theme="dark"] .ai-msg-user .ai-msg-body { background: linear-gradient(135deg, #0F3F7E 0%, #1E5BB0 100%); }
html[data-theme="dark"] .ai-chat-form { background: #1F2937; border-top-color: #374151; }
html[data-theme="dark"] .ai-chat-form textarea { background: #374151; border-color: #4B5563; color: #F3F4F6; }
html[data-theme="dark"] .ai-chip { background: #374151; color: #fff; border-color: #4B5563; }
html[data-theme="dark"] .ai-tool-btn { background: #374151; color: #fff; border-color: #4B5563; }
html[data-theme="dark"] .ai-history-panel { background: #1F2937; border-left-color: #374151; }
html[data-theme="dark"] .ai-history-head { border-bottom-color: #374151; }
html[data-theme="dark"] .ai-history-head h3 { color: #fff; }
html[data-theme="dark"] .ai-history-item { color: #F3F4F6; }
html[data-theme="dark"] .ai-history-item:hover { background: #374151; }
html[data-theme="dark"] .ai-msg-copy { background: rgba(255,255,255,.08); color: #F3F4F6; }
html[data-theme="dark"] .ai-msg-copy:hover { background: rgba(255,255,255,.18); }

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  .ai-chat-window { padding: 16px; min-height: 280px; max-height: 60vh; }
  .ai-msg-body { font-size: 14px; padding: 10px 14px; }
  .ai-msg-copy { opacity: 1; } /* always visible on touch */
  .ai-chat-toolbar .ai-tool-btn { font-size: 12px; padding: 7px 11px; }
  .ai-history-panel { width: 100vw; }
}

/* ---------- Action toolbar on bot replies ---------- */
.ai-msg-actions {
  position: absolute; top: 8px; right: 8px;
  display: inline-flex; gap: 6px;
  opacity: 0;
  transition: opacity .15s ease;
}
.ai-msg-bot:hover .ai-msg-actions,
.ai-msg-bot:focus-within .ai-msg-actions { opacity: 1; }

/* Override the standalone .ai-msg-copy positioning when inside .ai-msg-actions */
.ai-msg-actions .ai-msg-copy {
  position: static;
  opacity: 1;
}

/* WhatsApp share button */
.ai-msg-whatsapp {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 8px;
  font-size: 11px; font-weight: 600;
  background: rgba(37, 211, 102, .12);
  color: #1FA354;
  text-decoration: none;
  border: 0;
  transition: background .15s ease, color .15s ease;
}
.ai-msg-whatsapp:hover {
  background: #25D366;
  color: #fff;
}

/* Dark mode */
html[data-theme="dark"] .ai-msg-whatsapp {
  background: rgba(37, 211, 102, .18);
  color: #4ADE80;
}
html[data-theme="dark"] .ai-msg-whatsapp:hover {
  background: #25D366;
  color: #fff;
}

/* Mobile — always visible on touch */
@media (max-width: 600px) {
  .ai-msg-actions { opacity: 1; }
}

/* ---------- Typewriter streaming ---------- */
.ai-stream {
  white-space: pre-wrap;
  color: var(--gray-900, #111827);
  line-height: 1.55;
}
.ai-stream.is-streaming::after {
  content: '';
  display: inline-block;
  width: 7px; height: 1.05em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--green-300, #3BA935);
  border-radius: 1px;
  animation: aiCaretBlink 1s steps(1) infinite;
}
@keyframes aiCaretBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
html[data-theme="dark"] .ai-stream { color: #F3F4F6; }

/* ---------- Follow-up suggestion chips ---------- */
.ai-followups {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--gray-200, #E5E7EB);
}
.ai-followup {
  font: inherit; font-size: 13px;
  cursor: pointer;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--green-300, #3BA935);
  background: rgba(59, 169, 53, .08);
  color: #2E7B26;
  transition: background .15s ease, color .15s ease;
}
.ai-followup::before { content: '↪ '; opacity: .7; }
.ai-followup:hover { background: var(--green-300, #3BA935); color: #fff; }
html[data-theme="dark"] .ai-followups { border-top-color: #374151; }
html[data-theme="dark"] .ai-followup {
  background: rgba(59, 169, 53, .14); color: #6EE7B7; border-color: #3BA935;
}
html[data-theme="dark"] .ai-followup:hover { background: #3BA935; color: #fff; }