/* ════════════════════════════════════════════════════════════════════
   BlissVerify — Support Assistant (assistant.css)
   Fully unified with BlissVerify dark/light theme tokens and design system.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --ai-bg:          var(--bg, #0a0a0f);
  --ai-card:        var(--card, #12121e);
  --ai-surface:     #161626;
  --ai-text:        var(--text, #f0f0ff);
  --ai-sub:         var(--sub, #8888aa);
  --ai-border:      var(--border, rgba(96,184,255,0.12));
  --ai-primary:     var(--primary, #60b8ff);
  --ai-accent:      var(--accent, #ff9ec8);
  --ai-bot-bubble:  #161626;
  --ai-user-bubble: linear-gradient(135deg, #1e3a8a, #2563eb);
  --ai-bot-avatar:  rgba(96, 184, 255, 0.15);
  --ai-user-avatar: rgba(255, 158, 200, 0.15);
  --ai-composer-bg: rgba(18, 18, 30, 0.95);
  --ai-input-bg:    #0f0f18;
  --ai-send-bg:     linear-gradient(135deg, var(--primary, #60b8ff), #818cf8);
  --ai-send-off:    rgba(255, 255, 255, 0.1);
  --ai-send-off-c:  rgba(255, 255, 255, 0.3);
  --ai-green:       #22c55e;
  --ai-col:         680px;
  --ai-pad:         clamp(14px, 4vw, 20px);
  --ai-ease:        0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="light"] {
  --ai-bg:          #f5f7fa;
  --ai-card:        #ffffff;
  --ai-surface:     #ffffff;
  --ai-text:        #0f172a;
  --ai-sub:         #64748b;
  --ai-border:      rgba(0, 0, 0, 0.08);
  --ai-primary:     #3b82f6;
  --ai-accent:      #ec4899;
  --ai-bot-bubble:  #ffffff;
  --ai-user-bubble: linear-gradient(135deg, #2563eb, #3b82f6);
  --ai-bot-avatar:  rgba(59, 130, 246, 0.12);
  --ai-user-avatar: rgba(236, 72, 153, 0.12);
  --ai-composer-bg: rgba(255, 255, 255, 0.96);
  --ai-input-bg:    #f1f5f9;
  --ai-send-bg:     linear-gradient(135deg, #3b82f6, #2563eb);
  --ai-send-off:    rgba(0, 0, 0, 0.08);
  --ai-send-off-c:  rgba(0, 0, 0, 0.3);
}

/* ── Reset & Base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img { display: block; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
textarea { font: inherit; color: inherit; }

.ai-body {
  /* Use the AI theme token directly so dark mode always paints a solid page
     background even if styles.css body rules are overridden or delayed. */
  background: var(--ai-bg);
  color: var(--ai-text);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  overscroll-behavior: none;
  min-height: 100vh;
  min-height: 100dvh;
  transition: background var(--ai-ease), color var(--ai-ease);
}

.ai-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  height: var(--vvh, 100dvh);
  max-width: 100%;
  position: relative;
  z-index: 10;
}

/* ── Topbar / Header ────────────────────────────────────────────────── */
.ai-header {
  flex-shrink: 0;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--ai-composer-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--ai-border);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.15);
  z-index: 20;
}

.ai-header-inner {
  max-width: var(--ai-col);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px var(--ai-pad);
}

.ai-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ai-logo {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--ai-card);
  border: 1px solid var(--ai-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
}

.ai-logo img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.ai-id { min-width: 0; }
.ai-name {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 0.96rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ai-text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ai-name .ai-tag {
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--ai-primary);
  background: rgba(96, 184, 255, 0.12);
  border: 1px solid rgba(96, 184, 255, 0.25);
  padding: 1px 6px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ai-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 0.72rem;
  color: var(--ai-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ai-green);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
  animation: ai-ping 2.4s ease-out infinite;
}

@keyframes ai-ping {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
  70%  { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.ai-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ai-hdr-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 10px;
  font-family: 'Sora', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--ai-card);
  border: 1px solid var(--ai-border);
  color: var(--ai-text);
  text-decoration: none;
  transition: border-color var(--ai-ease), transform var(--ai-ease);
}
.ai-hdr-btn:hover {
  border-color: var(--ai-primary);
  transform: translateY(-1px);
}
.ai-hdr-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* ── Message Thread ────────────────────────────────────────────────── */
.ai-main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 16px var(--ai-pad) calc(100px + env(safe-area-inset-bottom, 0px));
  scroll-behavior: smooth;
}
.ai-main::-webkit-scrollbar { width: 5px; }
.ai-main::-webkit-scrollbar-thumb { background: var(--ai-border); border-radius: 3px; }

.ai-thread {
  max-width: var(--ai-col);
  margin: 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.ai-msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  animation: ai-rise 0.24s cubic-bezier(0.2, 0.8, 0.4, 1) both;
}
@keyframes ai-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ai-msg--bot  { align-self: flex-start; }
.ai-msg--user { align-self: flex-end; flex-direction: row-reverse; }

.ai-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.ai-avatar svg { width: 18px; height: 18px; }
.ai-avatar--bot  { background: var(--ai-bot-avatar); color: var(--ai-primary); border: 1px solid rgba(96, 184, 255, 0.2); }
.ai-avatar--user { background: var(--ai-user-avatar); color: var(--ai-accent); border: 1px solid rgba(255, 158, 200, 0.2); }

.ai-col { min-width: 0; max-width: min(85%, 580px); }

.ai-bubble {
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 0.88rem;
  line-height: 1.6;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-line;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
}

/* styles.css sets bare `p { color: var(--sub) }` which bleeds into
   formatted assistant replies and washes out dark-mode body copy. */
.ai-bubble p,
.ai-bubble li {
  color: inherit;
}

.ai-bubble a {
  color: var(--ai-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ai-bubble a:hover {
  text-decoration: none;
}

.ai-bubble--bot {
  background: var(--ai-bot-bubble);
  border: 1px solid var(--ai-border);
  border-top-left-radius: 4px;
  color: var(--ai-text);
}

.ai-bubble--user {
  background: var(--ai-user-bubble);
  color: #ffffff;
  border-top-right-radius: 4px;
}

.ai-time {
  display: block;
  margin: 4px 6px 0;
  font-size: 0.68rem;
  color: var(--ai-sub);
}
.ai-msg--user .ai-time { text-align: right; }

/* ── Typing Indicator ──────────────────────────────────────────────── */
.ai-dots { display: inline-flex; align-items: center; gap: 5px; padding: 4px 2px; }
.ai-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ai-primary);
  animation: ai-bounce 1.2s ease-in-out infinite;
}
.ai-dots i:nth-child(2) { animation-delay: 0.15s; }
.ai-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-bounce {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.35; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

/* ── Empty State ───────────────────────────────────────────────────── */
.ai-empty { margin: auto; text-align: center; padding: 24px 10px; max-width: 520px; }
.ai-empty[hidden] { display: none; }
.ai-empty-title {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: clamp(1.3rem, 5vw, 1.6rem);
  letter-spacing: -0.01em;
  color: var(--ai-text);
  margin-bottom: 8px;
}

.ai-empty-copy {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ai-sub);
  margin: 0 auto;
}

.ai-suggestions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
}

.ai-suggestion {
  width: 100%;
  max-width: 440px;
  padding: 12px 18px;
  border: 1px solid var(--ai-border);
  border-radius: 14px;
  background: var(--ai-card);
  color: var(--ai-text);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: border-color var(--ai-ease), transform var(--ai-ease), box-shadow var(--ai-ease);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ai-suggestion::after {
  content: "›";
  font-size: 1.15rem;
  color: var(--ai-sub);
  flex-shrink: 0;
}
.ai-suggestion:hover {
  border-color: var(--ai-primary);
  transform: translateX(2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.ai-suggestion:active { transform: scale(0.99); }

/* ── Composer / Input Bar: Fixed, Stable & Floating Glass Dock ─────── */
.ai-composer-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  padding: 12px var(--ai-pad) calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(10, 10, 15, 0) 0%, rgba(10, 10, 15, 0.85) 28%, var(--ai-bg) 100%);
  pointer-events: none; /* Let empty side areas click through to scroll */
}

[data-theme="light"] .ai-composer-bar {
  background: linear-gradient(180deg, rgba(245, 247, 250, 0) 0%, rgba(245, 247, 250, 0.85) 28%, var(--ai-bg) 100%);
}

.ai-composer {
  pointer-events: auto;
  max-width: var(--ai-col);
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: var(--card, #12121e);
  border: 1px solid var(--border, rgba(96, 184, 255, 0.16));
  border-radius: 20px;
  padding: 8px 8px 8px 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: border-color var(--ai-ease), box-shadow var(--ai-ease), transform var(--ai-ease);
}

[data-theme="light"] .ai-composer {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.03);
}

.ai-composer:focus-within {
  border-color: var(--primary, #60b8ff);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(96, 184, 255, 0.2);
}

[data-theme="light"] .ai-composer:focus-within {
  border-color: var(--primary, #3b82f6);
  box-shadow: 0 12px 36px rgba(59, 130, 246, 0.16), 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* iOS auto-zoom guard: 16px font-size prevents Safari zooming */
.ai-input {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  line-height: 1.5;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ai-text);
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  padding: 6px 0 6px 0;
  min-height: 24px;
  max-height: 140px;
  overflow-y: auto;
}
.ai-input::placeholder { color: var(--ai-sub); opacity: 0.8; }

.ai-send {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary, #60b8ff), #818cf8);
  color: #fff;
  box-shadow: 0 4px 14px rgba(96, 184, 255, 0.35);
  transition: transform var(--ai-ease), opacity var(--ai-ease), background var(--ai-ease), box-shadow var(--ai-ease);
  -webkit-tap-highlight-color: transparent;
  margin-bottom: 1px;
}
.ai-send svg { width: 18px; height: 18px; }
.ai-send:hover:not(:disabled) { transform: translateY(-1px) scale(1.04); }
.ai-send:active:not(:disabled) { transform: scale(0.94); }
.ai-send:disabled {
  background: var(--ai-send-off);
  color: var(--ai-send-off-c);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.6;
}

/* ── Focus ─────────────────────────────────────────────────────────── */
.ai-logo:focus-visible,
.ai-suggestion:focus-visible,
.ai-send:focus-visible {
  outline: 2px solid var(--ai-primary);
  outline-offset: 2px;
}

/* ── Responsive & Motion ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .ai-col { max-width: 90%; }
  .ai-header-inner { padding: 10px 14px; }
  .ai-composer-bar { padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .ai-msg { animation: none; }
  .ai-dot { animation: none; }
  .ai-dots i { animation: none; opacity: 0.6; }
  .ai-main { scroll-behavior: auto; }
  .ai-suggestion, .ai-send { transition: none; }
}

/* ── Rich Action Buttons inside AI Messages ── */
.ai-actions-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.ai-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  font-family: 'Sora', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--ai-ease), box-shadow var(--ai-ease), background var(--ai-ease);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  -webkit-tap-highlight-color: transparent;
}

.ai-action-btn--wa {
  background: #25D366;
  color: #ffffff;
}
.ai-action-btn--wa:hover {
  background: #20ba59;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}
.ai-action-btn--wa:active {
  transform: scale(0.97);
}

.ai-btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #25D366;
  color: #fff !important;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 6px 14px;
  border-radius: 8px;
  text-decoration: none !important;
  margin: 4px 2px;
  vertical-align: middle;
  transition: transform var(--ai-ease);
}
.ai-btn-wa:hover {
  transform: translateY(-1px);
  background: #20ba59;
}

.ai-btn-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(96, 184, 255, 0.15);
  border: 1px solid rgba(96, 184, 255, 0.3);
  color: var(--ai-primary) !important;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 4px 10px;
  border-radius: 8px;
  text-decoration: none !important;
  margin: 2px;
  transition: border-color var(--ai-ease);
}
.ai-btn-link:hover {
  border-color: var(--ai-primary);
}

.ai-li {
  margin: 4px 0;
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════════════
   Support brain UI
   The knowledge base in support.js is intentionally usable without an
   API key. These components make its guides, topic browser and actions
   visible instead of reducing every unknown question to a stub sentence.
   ════════════════════════════════════════════════════════════════════ */

.ai-mode {
  color: var(--ai-green);
  font-weight: 700;
}

.ai-hdr-btn--icon {
  min-width: 38px;
  justify-content: center;
  padding-left: 9px;
  padding-right: 9px;
  font-size: 1rem;
}

.ai-hdr-btn--whatsapp svg { color: #25d366; }

/* The support script owns the inner message stream, so the page itself
   stays fixed while only the conversation scrolls. */
.ai-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  padding-top: 14px;
  padding-bottom: 104px;
}

.ai-notice,
.ai-quick-wrap,
.ai-chat-stream {
  width: 100%;
  max-width: var(--ai-col);
  margin-left: auto;
  margin-right: auto;
}

.ai-notice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid rgba(96, 184, 255, 0.18);
  border-radius: 12px;
  background: rgba(96, 184, 255, 0.07);
  color: var(--ai-sub);
  font-size: 0.75rem;
  line-height: 1.45;
  flex-shrink: 0;
}
.ai-notice strong { color: var(--ai-text); }
.ai-notice-icon { color: var(--ai-primary); font-size: 1rem; line-height: 1.1; }
.ai-notice button {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0 3px;
  color: var(--ai-sub);
  font-size: 1.1rem;
  line-height: 1;
}
.ai-notice button:hover { color: var(--ai-text); }
.ai-notice[hidden] { display: none; }

.ai-quick-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 30px;
  flex-shrink: 0;
}
.ai-quick-label {
  color: var(--ai-sub);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ai-quick {
  display: flex;
  gap: 7px;
  min-width: 0;
  overflow-x: auto;
  padding: 2px 2px 5px;
  scrollbar-width: none;
}
.ai-quick::-webkit-scrollbar { display: none; }
.ai-quick[hidden] { display: none; }

.ai-chat-stream {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 20px;
  scrollbar-width: thin;
}
.ai-chat-stream::-webkit-scrollbar { width: 5px; }
.ai-chat-stream::-webkit-scrollbar-thumb { background: var(--ai-border); border-radius: 3px; }

/* support.js uses from-bot/from-user; keep the same bubble language as
   the original assistant shell while allowing multi-part replies. */
.ai-chat-stream .ai-msg {
  width: min(100%, 600px);
  max-width: 100%;
  margin-top: 14px;
  gap: 0;
}
.ai-chat-stream .ai-msg.from-bot {
  align-self: flex-start;
  align-items: flex-start;
  flex-direction: column;
}
.ai-chat-stream .ai-msg.from-user {
  align-self: flex-end;
  align-items: flex-end;
  flex-direction: column;
}
.ai-chat-stream .from-bot .ai-bubble {
  background: var(--ai-bot-bubble);
  border: 1px solid var(--ai-border);
  border-top-left-radius: 4px;
  color: var(--ai-text);
}
.ai-chat-stream .from-user .ai-bubble {
  background: var(--ai-user-bubble);
  border-top-right-radius: 4px;
  color: #fff;
}
/* Override styles.css `p { color: var(--sub) }` so dark-mode bubbles keep
   full-contrast body text instead of muted gray on dark surfaces. */
.ai-chat-stream .ai-bubble p,
.ai-chat-stream .ai-bubble li,
.ai-chat-stream .ai-bubble {
  color: inherit;
}
.ai-chat-stream .from-bot .ai-bubble p,
.ai-chat-stream .from-bot .ai-bubble li {
  color: var(--ai-text);
}
.ai-chat-stream .from-user .ai-bubble p,
.ai-chat-stream .from-user .ai-bubble li {
  color: #fff;
}
.ai-chat-stream .ai-bubble p { margin: 0; }
.ai-chat-stream .ai-bubble p + p { margin-top: 10px; }
.ai-chat-stream .ai-bubble strong { color: inherit; font-weight: 750; }
.ai-chat-stream .ai-bubble code {
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(96, 184, 255, 0.12);
  color: var(--ai-primary);
  font-size: 0.88em;
}
.ai-chat-stream .ai-bubble ol,
.ai-chat-stream .ai-bubble ul {
  margin: 0;
  padding-left: 1.35em;
  color: inherit;
}
.ai-chat-stream .ai-bubble li + li { margin-top: 5px; }
.ai-chat-stream .ai-bubble a {
  color: var(--ai-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ai-chat-stream .ai-bubble a:hover { text-decoration: none; }

.ai-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 4px 6px 0;
  color: var(--ai-sub);
  font-size: 0.67rem;
}
.from-user .ai-meta { align-self: flex-end; }
.ai-copy {
  color: var(--ai-primary);
  font-size: 0.67rem;
  opacity: 0.85;
}
.ai-copy:hover { opacity: 1; text-decoration: underline; }

.ai-anim { animation: ai-rise 0.24s cubic-bezier(0.2, 0.8, 0.4, 1) both; }
.ai-typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 12px 15px;
  border: 1px solid var(--ai-border);
  border-radius: 16px 16px 16px 4px;
  background: var(--ai-bot-bubble);
}
.ai-typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ai-primary);
  animation: ai-bounce 1.2s ease-in-out infinite;
}
.ai-typing i:nth-child(2) { animation-delay: .15s; }
.ai-typing i:nth-child(3) { animation-delay: .3s; }

/* Starter cards and quick chips */
.ai-starters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 3px 0 3px;
}
.ai-starters[hidden] { display: none; }
.ai-starter {
  min-width: 0;
  padding: 12px 10px;
  border: 1px solid var(--ai-border);
  border-radius: 13px;
  background: var(--ai-card);
  text-align: left;
  transition: border-color var(--ai-ease), transform var(--ai-ease), box-shadow var(--ai-ease);
}
.ai-starter:hover { border-color: var(--ai-primary); transform: translateY(-2px); box-shadow: 0 7px 18px rgba(0,0,0,.18); }
.ai-starter:active { transform: scale(.98); }
.ai-starter-emoji { font-size: 1.2rem; margin-bottom: 6px; }
.ai-starter-title { color: var(--ai-text); font-size: .76rem; font-weight: 750; line-height: 1.25; }
.ai-starter-sub { margin-top: 4px; color: var(--ai-sub); font-size: .68rem; line-height: 1.35; }

.ai-chip {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--ai-border);
  border-radius: 999px;
  background: var(--ai-card);
  color: var(--ai-text);
  font-size: .72rem;
  line-height: 1.2;
  text-align: left;
  transition: border-color var(--ai-ease), background var(--ai-ease), transform var(--ai-ease);
}
.ai-chip:hover { border-color: var(--ai-primary); background: rgba(96,184,255,.09); transform: translateY(-1px); }
.ai-chip.chip-wa { border-color: rgba(37,211,102,.35); color: #25d366; }
.ai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  width: 100%;
  margin-top: 9px;
}
.ai-actions {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: min(100%, 480px);
  margin-top: 9px;
}
.ai-action {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid rgba(96,184,255,.22);
  border-radius: 10px;
  background: rgba(96,184,255,.08);
  color: var(--ai-primary);
  font-size: .76rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color var(--ai-ease), background var(--ai-ease), transform var(--ai-ease);
}
.ai-action:hover { border-color: var(--ai-primary); background: rgba(96,184,255,.14); transform: translateX(2px); }
.ai-action .a-arrow { margin-left: auto; font-size: 1.1rem; }
.ai-action.action-wa { border-color: rgba(37,211,102,.4); background: rgba(37,211,102,.1); color: #25d366; }
.ai-action.action-wa:hover { border-color: #25d366; background: rgba(37,211,102,.16); }

.ai-feedback {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  width: 100%;
  margin-top: 10px;
  color: var(--ai-sub);
  font-size: .7rem;
}
.ai-feedback button {
  padding: 6px 9px;
  border: 1px solid var(--ai-border);
  border-radius: 8px;
  color: var(--ai-sub);
  font-size: .7rem;
}
.ai-feedback button:hover,
.ai-feedback button.picked-yes { border-color: var(--ai-green); color: var(--ai-green); }
.ai-feedback button.picked-no { border-color: var(--ai-accent); color: var(--ai-accent); }
.ai-feedback button:disabled { opacity: .6; cursor: default; }

/* Step-by-step guide card */
.ai-guide {
  width: min(100%, 560px);
  padding: 14px;
  border: 1px solid rgba(96,184,255,.22);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(96,184,255,.1), var(--ai-card));
  box-shadow: 0 5px 18px rgba(0,0,0,.14);
}
.ai-guide-head { display: flex; align-items: center; gap: 8px; }
.ai-guide-emoji { font-size: 1.15rem; }
.ai-guide-title { color: var(--ai-text); font-size: .8rem; font-weight: 800; }
.ai-guide-count { margin-left: auto; color: var(--ai-sub); font-size: .7rem; font-weight: 700; }
.ai-guide-bar { height: 5px; margin: 11px 0 14px; overflow: hidden; border-radius: 99px; background: rgba(96,184,255,.12); }
.ai-guide-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ai-primary), #818cf8); transition: width .25s ease; }
.ai-guide-step-title { color: var(--ai-text); font-family: 'Sora', sans-serif; font-size: .85rem; font-weight: 750; }
.ai-guide-step-body { margin-top: 7px; color: var(--ai-sub); font-size: .8rem; line-height: 1.6; }
/* Keep guide copy readable under styles.css bare `p { color: var(--sub) }`,
   and bump dark-mode step text slightly so it is not washed out on cards. */
.ai-guide-step-body p,
.ai-guide-step-body li { color: inherit; }
.ai-guide-step-body p + p { margin-top: 8px; }
[data-theme="dark"] .ai-guide-step-body { color: color-mix(in srgb, var(--ai-text) 72%, var(--ai-sub)); }
.ai-guide-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }

/* Topic drawer */
.ai-scrim {
  position: fixed;
  inset: 0;
  z-index: 180;
  background: rgba(3, 5, 15, .58);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ai-ease);
  backdrop-filter: blur(2px);
}
.ai-scrim.open { opacity: 1; pointer-events: auto; }
.ai-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 190;
  width: min(390px, 92vw);
  overflow-y: auto;
  padding: calc(18px + env(safe-area-inset-top,0px)) 18px calc(24px + env(safe-area-inset-bottom,0px));
  background: var(--ai-card);
  border-left: 1px solid var(--ai-border);
  box-shadow: -14px 0 40px rgba(0,0,0,.3);
  transform: translateX(105%);
  transition: transform var(--ai-ease);
}
.ai-drawer.open { transform: translateX(0); }
.ai-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ai-drawer-kicker { color: var(--ai-primary); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ai-drawer h2 { margin-top: 3px; color: var(--ai-text); font-size: 1.25rem; }
.ai-drawer-close { width: 34px; height: 34px; border: 1px solid var(--ai-border); border-radius: 10px; color: var(--ai-sub); font-size: 1.3rem; }
.ai-drawer-close:hover { border-color: var(--ai-primary); color: var(--ai-text); }
.ai-search-label { display: block; margin: 23px 0 7px; color: var(--ai-sub); font-size: .7rem; font-weight: 700; }
.ai-search {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--ai-border);
  border-radius: 10px;
  outline: none;
  background: var(--ai-input-bg);
  color: var(--ai-text);
  font-size: 16px;
}
.ai-search:focus { border-color: var(--ai-primary); box-shadow: 0 0 0 3px rgba(96,184,255,.12); }
.ai-search::placeholder { color: var(--ai-sub); }
.ai-search-results { margin-top: 8px; }
.ai-drawer-section { margin-top: 22px; }
.ai-drawer-section h3 { margin-bottom: 8px; color: var(--ai-text); font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; }
.ai-topic-list, .ai-guide-list { display: grid; gap: 7px; }
.ai-topic, .ai-guide-link {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--ai-text);
  text-align: left;
  transition: border-color var(--ai-ease), background var(--ai-ease);
}
.ai-topic:hover, .ai-guide-link:hover { border-color: var(--ai-border); background: rgba(96,184,255,.07); }
.ai-topic-emoji, .g-emoji { width: 24px; flex: 0 0 24px; font-size: 1rem; text-align: center; }
.ai-topic-name { font-size: .75rem; font-weight: 750; }
.ai-topic-desc { color: var(--ai-sub); font-size: .66rem; }
.ai-guide-link { font-size: .75rem; }
.ai-guide-link .g-arrow { margin-left: auto; color: var(--ai-sub); font-size: 1.1rem; }

.ai-scroll-down {
  position: absolute;
  right: max(var(--ai-pad), calc((100% - var(--ai-col))/2));
  bottom: 20px;
  z-index: 4;
  padding: 8px 12px;
  border: 1px solid var(--ai-border);
  border-radius: 999px;
  background: var(--ai-card);
  color: var(--ai-primary);
  box-shadow: 0 5px 16px rgba(0,0,0,.22);
  font-size: .72rem;
  font-weight: 750;
  opacity: 0;
  pointer-events: none;
  transform: translateY(5px);
  transition: opacity var(--ai-ease), transform var(--ai-ease);
}
.ai-scroll-down.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.ai-scroll-down:hover { border-color: var(--ai-primary); }

.ai-toast {
  position: fixed;
  left: 50%;
  bottom: 88px;
  z-index: 220;
  padding: 9px 13px;
  border: 1px solid var(--toast-border, var(--ai-border));
  border-radius: 9px;
  background: var(--toast-bg, var(--ai-card));
  color: var(--ai-text);
  font-size: .75rem;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity var(--ai-ease), transform var(--ai-ease);
}
.ai-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 640px) {
  .ai-header-actions { gap: 5px; }
  .ai-hdr-btn { padding: 7px 9px; }
  .ai-hdr-btn--whatsapp { font-size: 0; gap: 0; }
  .ai-hdr-btn--whatsapp svg { width: 16px; height: 16px; }
  .ai-main { padding-left: 12px; padding-right: 12px; }
  .ai-starters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-notice { font-size: .72rem; }
  .ai-scroll-down { right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-anim, .ai-typing i { animation: none; }
  .ai-drawer, .ai-scrim, .ai-action, .ai-chip, .ai-starter { transition: none; }
}

.ai-drawer-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 38px;
  margin-top: 7px;
  padding: 8px 12px;
  border: 1px solid var(--ai-border);
  border-radius: 9px;
  background: rgba(96,184,255,.06);
  color: var(--ai-primary);
  font-size: .74rem;
  font-weight: 750;
  transition: border-color var(--ai-ease), background var(--ai-ease);
}
.ai-drawer-tool:hover { border-color: var(--ai-primary); background: rgba(96,184,255,.12); }