/* =====================================================================
   ai-chat.css — AI Health Assistant chat UI
   Design language: matches existing luxury-medical aesthetic
   ===================================================================== */

#screen-ai-chat {
  background: linear-gradient(180deg, #0a1428 0%, #0d1b36 60%, #0a1428 100%);
  color: #e8eef6;
}

/* ─── Hero ─── */
.ai-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 6px;
}
.ai-hero-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3a7bd5, #00d4ff);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  box-shadow: 0 4px 18px rgba(0, 212, 255, 0.3);
  flex-shrink: 0;
}
.ai-hero-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
}
.ai-hero-desc {
  font-size: 0.78rem;
  color: rgba(232, 238, 246, 0.72);
  margin-top: 3px;
  line-height: 1.45;
}

/* ─── Disclaimer pill ─── */
.ai-disclaimer-pill {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 6px 14px 10px;
  padding: 8px 14px;
  background: rgba(255, 178, 44, 0.1);
  border: 1px solid rgba(255, 178, 44, 0.3);
  border-radius: 22px;
  font-size: 0.72rem;
  color: #ffd08a;
}
.ai-disclaimer-pill b { color: #ffe1b0; }

/* ─── Monthly budget banner (quota reached — friendly, not alarming) ─── */
.ai-budget-banner {
  margin: 0 14px 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(58, 123, 213, 0.18), rgba(127, 212, 255, 0.1));
  border: 1px solid rgba(127, 212, 255, 0.35);
  border-radius: 12px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.ai-bb-icon { font-size: 1.6rem; line-height: 1; }
.ai-bb-body { flex: 1; }
.ai-bb-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  margin-bottom: 4px;
}
.ai-bb-desc {
  font-size: 0.78rem;
  color: rgba(232, 238, 246, 0.85);
  line-height: 1.45;
}

/* ─── Emergency banner ─── */
.ai-emergency-banner {
  margin: 0 14px 12px;
  padding: 14px;
  background: linear-gradient(135deg, #c21f2c, #8a1620);
  border: 2px solid #ff5566;
  border-radius: 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  animation: ai-pulse-red 1.6s ease-in-out infinite;
  box-shadow: 0 0 24px rgba(255, 85, 102, 0.45);
}
@keyframes ai-pulse-red {
  0%, 100% { box-shadow: 0 0 24px rgba(255, 85, 102, 0.45); }
  50%      { box-shadow: 0 0 32px rgba(255, 85, 102, 0.75); }
}
.ai-eb-icon { font-size: 2rem; line-height: 1; }
.ai-eb-body { flex: 1; }
.ai-eb-title {
  font-weight: 800;
  font-size: 1rem;
  color: #fff;
  margin-bottom: 4px;
}
.ai-eb-desc {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.92);
  line-height: 1.45;
  margin-bottom: 10px;
}
.ai-eb-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-eb-btn {
  display: inline-flex; align-items: center;
  padding: 8px 14px;
  background: rgba(255,255,255,0.14);
  color: #fff !important;
  font-weight: 700;
  font-size: 0.82rem;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.3);
}
.ai-eb-btn.danger {
  background: #fff;
  color: #b51423 !important;
  border-color: #fff;
}

/* ─── Chat body ─── */
.ai-chat-body {
  padding: 8px 12px 90px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ─── Welcome state ─── */
.ai-welcome {
  text-align: center;
  padding: 20px 12px;
}
.ai-welcome-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
}
.ai-welcome-desc {
  font-size: 0.82rem;
  color: rgba(232,238,246,0.7);
  margin: 6px 0 14px;
}
.ai-suggest-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 520px;
  margin: 0 auto 16px;
}
.ai-suggest-chip {
  background: rgba(58, 123, 213, 0.12);
  border: 1px solid rgba(58, 123, 213, 0.35);
  color: #cfe2ff;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.ai-suggest-chip:hover {
  background: rgba(58, 123, 213, 0.22);
  transform: translateX(2px);
}
.ai-welcome-rules {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 0.72rem;
  color: rgba(232,238,246,0.55);
}
.ai-welcome-rules > div {
  padding: 6px 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
}

/* ─── Message bubbles ─── */
.ai-msg {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.ai-msg-user { justify-content: flex-end; }
.ai-msg-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  background: rgba(255,255,255,0.06);
  flex-shrink: 0;
  margin-top: 2px;
}
.ai-msg-user .ai-msg-avatar {
  background: linear-gradient(135deg, #d4a853, #a87f2e);
}
.ai-msg-ai .ai-msg-avatar {
  background: linear-gradient(135deg, #3a7bd5, #00d4ff);
}
.ai-msg-bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 0.9rem;
  line-height: 1.55;
  word-wrap: break-word;
}
.ai-msg-user .ai-msg-bubble {
  background: linear-gradient(135deg, #d4a853, #b58932);
  color: #1a0f00;
  border-bottom-right-radius: 4px;
  font-weight: 500;
}
.ai-msg-ai .ai-msg-bubble {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: #e8eef6;
  border-bottom-left-radius: 4px;
}
.ai-msg-ai .ai-msg-bubble h4 {
  font-size: 0.92rem;
  font-weight: 700;
  color: #7fd4ff;
  margin: 10px 0 4px;
}
.ai-msg-ai .ai-msg-bubble strong { color: #ffe1b0; }
.ai-msg-ai .ai-msg-bubble ul {
  margin: 4px 0 4px 18px;
  padding: 0;
}
.ai-msg-ai .ai-msg-bubble li { margin: 2px 0; }
.ai-msg-ai .ai-msg-bubble a {
  color: #7fd4ff;
  text-decoration: underline;
}
.ai-msg-ai .ai-msg-bubble a.ai-condition-link {
  color: #ffd08a;
  text-decoration: none;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(255, 208, 138, 0.1);
}
.ai-msg-ai .ai-msg-bubble a.ai-condition-link:hover {
  background: rgba(255, 208, 138, 0.22);
}
.ai-fallback-note {
  margin-top: 8px;
  font-size: 0.7rem;
  color: #ff9f8a;
  opacity: 0.85;
}

/* ─── Typing indicator ─── */
.ai-typing {
  display: inline-flex;
  gap: 4px;
  padding: 14px 18px;
}
.ai-typing span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(127, 212, 255, 0.8);
  animation: ai-bounce 1.2s infinite;
}
.ai-typing span:nth-child(2) { animation-delay: 0.18s; }
.ai-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes ai-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40%           { transform: translateY(-6px); opacity: 1; }
}

/* ─── Input form (fixed to bottom of screen) ─── */
.ai-chat-form {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--legal-footer-h, 48px) + 8px);
  margin: 0 12px;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  background: rgba(13, 27, 54, 0.94);
  backdrop-filter: blur(10px);
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  box-shadow: 0 -2px 18px rgba(0,0,0,0.35);
  z-index: 20;
}
.ai-chat-input {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  color: #fff;
  padding: 10px 12px;
  font-size: 0.95rem;
  font-family: inherit;
  resize: none;
  min-height: 40px;
  max-height: 160px;
  line-height: 1.4;
  outline: none;
}
.ai-chat-input:focus {
  border-color: rgba(127, 212, 255, 0.5);
  background: rgba(255,255,255,0.06);
}
.ai-chat-input:disabled { opacity: 0.45; cursor: not-allowed; }
.ai-chat-send {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3a7bd5, #00d4ff);
  color: #fff;
  font-size: 1.1rem;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 12px rgba(0, 212, 255, 0.35);
}
.ai-chat-send:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 4px 20px rgba(0, 212, 255, 0.55);
}
.ai-chat-send:disabled { opacity: 0.4; cursor: not-allowed; }

.ai-limit-msg {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(var(--legal-footer-h, 48px) + 76px);
  padding: 10px 14px;
  background: rgba(255, 178, 44, 0.12);
  border: 1px solid rgba(255, 178, 44, 0.35);
  color: #ffd08a;
  border-radius: 10px;
  font-size: 0.78rem;
  text-align: center;
  z-index: 19;
}

/* =====================================================================
   🏆 FLAGSHIP BANNER — "Powered by Claude Sonnet 4.5"
   Sits between the about section and the mode grid. Makes the AI
   presence UNMISSABLE for every visitor.
   ===================================================================== */
.flagship-banner {
  position: relative;
  margin: 10px 14px 18px;
  padding: 20px 18px 18px;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(10, 22, 42, 0.92), rgba(20, 40, 80, 0.88)),
    radial-gradient(circle at 10% 10%, rgba(127, 212, 255, 0.2), transparent 50%),
    radial-gradient(circle at 90% 90%, rgba(255, 77, 109, 0.15), transparent 50%);
  border: 1.5px solid rgba(127, 212, 255, 0.5);
  box-shadow:
    0 10px 40px rgba(0, 30, 80, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
  isolation: isolate;
}
.fb-glow-bg {
  position: absolute;
  inset: -2px;
  z-index: 0;
  border-radius: 20px;
  background: conic-gradient(from 0deg,
    #00d4ff, #ffd08a, #ff4d6d, #a855f7, #00d4ff);
  filter: blur(22px);
  opacity: 0.38;
  animation: fb-glow-spin 8s linear infinite;
}
@keyframes fb-glow-spin {
  to { transform: rotate(360deg); }
}
.fb-stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.fb-stars span {
  position: absolute;
  font-size: 0.8rem;
  opacity: 0.6;
  animation: fb-star-twinkle 3s ease-in-out infinite;
}
.fb-stars span:nth-child(1)  { top: 8%;  left: 6%;  animation-delay: 0s; }
.fb-stars span:nth-child(2)  { top: 22%; left: 88%; animation-delay: 0.4s; }
.fb-stars span:nth-child(3)  { top: 68%; left: 12%; animation-delay: 0.8s; }
.fb-stars span:nth-child(4)  { top: 82%; left: 76%; animation-delay: 1.2s; font-size: 0.7rem; }
.fb-stars span:nth-child(5)  { top: 34%; left: 50%; animation-delay: 1.6s; font-size: 0.6rem; }
.fb-stars span:nth-child(6)  { top: 58%; left: 92%; animation-delay: 2.0s; font-size: 0.7rem; }
.fb-stars span:nth-child(7)  { top: 14%; left: 70%; animation-delay: 2.4s; }
.fb-stars span:nth-child(8)  { top: 88%; left: 28%; animation-delay: 2.8s; font-size: 0.6rem; }
.fb-stars span:nth-child(9)  { top: 46%; left: 4%;  animation-delay: 1.0s; font-size: 0.7rem; }
.fb-stars span:nth-child(10) { top: 72%; left: 52%; animation-delay: 0.2s; font-size: 0.6rem; }
@keyframes fb-star-twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.8) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1.3) rotate(180deg); }
}
.fb-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.fb-trophy {
  font-size: 3rem;
  line-height: 1;
  filter: drop-shadow(0 0 12px rgba(255, 208, 138, 0.7));
  animation: fb-trophy-bounce 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes fb-trophy-bounce {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-4px) rotate(5deg); }
}
.fb-text-wrap { flex: 1; min-width: 0; }
.fb-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  color: #ffd08a;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 4px;
  text-shadow: 0 0 8px rgba(255, 208, 138, 0.4);
}
.fb-title {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.1;
  background: linear-gradient(90deg,
    #ffffff 0%, #7fd4ff 25%, #ffd08a 50%, #ff8aa3 75%, #ffffff 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fb-title-shimmer 5s linear infinite;
  margin-bottom: 8px;
  text-shadow: 0 0 30px rgba(127, 212, 255, 0.3);
}
@keyframes fb-title-shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 300% center; }
}
.fb-sub {
  font-size: 0.78rem;
  color: rgba(232, 238, 246, 0.85);
  line-height: 1.5;
  margin-bottom: 12px;
}
.fb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fb-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(127, 212, 255, 0.3);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(232, 238, 246, 0.92);
  backdrop-filter: blur(4px);
  letter-spacing: 0.2px;
}
.fb-chip-hot {
  background: linear-gradient(135deg, rgba(255, 77, 109, 0.22), rgba(255, 140, 50, 0.18));
  border-color: rgba(255, 140, 50, 0.5);
  color: #ffb78a;
  animation: fb-chip-hot-pulse 2s ease-in-out infinite;
}
@keyframes fb-chip-hot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 109, 0.4); }
  50%      { box-shadow: 0 0 0 4px rgba(255, 77, 109, 0); }
}

@media (max-width: 420px) {
  .flagship-banner { padding: 16px 14px 14px; margin: 8px 10px 14px; }
  .fb-trophy { font-size: 2.4rem; }
  .fb-title { font-size: 1.25rem; }
  .fb-sub { font-size: 0.72rem; }
}

/* =====================================================================
   💎 PREMIUM AI CARD — flagship mode-card with animations
   ===================================================================== */
.mode-card.premium-ai {
  position: relative !important;
  overflow: hidden !important;
  background:
    linear-gradient(135deg, rgba(10, 20, 45, 0.96), rgba(30, 50, 100, 0.94)) !important;
  border: 1.5px solid rgba(127, 212, 255, 0.55) !important;
  padding: 20px 18px !important;
  gap: 16px !important;
  box-shadow:
    0 10px 34px rgba(0, 30, 80, 0.35),
    0 0 0 0 rgba(0, 212, 255, 0.4) !important;
  animation: premium-ai-glow 3s ease-in-out infinite;
  min-height: 150px;
}
@keyframes premium-ai-glow {
  0%, 100% { box-shadow: 0 10px 34px rgba(0, 30, 80, 0.35), 0 0 0 0 rgba(0, 212, 255, 0.4); }
  50%      { box-shadow: 0 10px 34px rgba(0, 30, 80, 0.35), 0 0 0 8px rgba(0, 212, 255, 0); }
}
.mode-card.premium-ai::after {
  content: "✨ NEW";
  position: absolute !important;
  /* Moved firmly INSIDE the card (top: 16px) and padded to avoid the
     rounded corner (right: 16px). Parent has overflow:hidden for the
     shimmer animation, so any protrusion gets clipped. Fully visible now. */
  top: 16px !important;
  right: 16px !important;
  left: auto !important;
  bottom: auto !important;
  background: linear-gradient(135deg, #ff4d6d, #c9184a) !important;
  color: #fff !important;
  font-size: 0.66rem !important;
  font-weight: 800 !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  letter-spacing: 1px !important;
  box-shadow: 0 3px 12px rgba(255, 77, 109, 0.55) !important;
  line-height: 1 !important;
  z-index: 10 !important;
  pointer-events: none;
}
/* Override the base mode-card ::before (was gradient overlay) */
.mode-card.premium-ai::before {
  content: '';
  position: absolute;
  inset: -100%;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(0, 212, 255, 0.3) 20deg, transparent 60deg,
    transparent 180deg, rgba(255, 77, 109, 0.25) 200deg, transparent 240deg,
    transparent 360deg);
  animation: pai-border-spin 6s linear infinite;
  pointer-events: none;
  z-index: 0;
  opacity: 1 !important;
}
@keyframes pai-border-spin {
  to { transform: rotate(360deg); }
}

.pai-bg-gradient {
  position: absolute;
  inset: 1px;
  background:
    radial-gradient(circle at 20% 20%, rgba(127, 212, 255, 0.25), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(168, 85, 247, 0.2), transparent 50%),
    linear-gradient(135deg, rgba(10, 20, 45, 0.95), rgba(30, 50, 100, 0.93));
  border-radius: 17px;
  z-index: 1;
  pointer-events: none;
}

.pai-shimmer {
  position: absolute;
  top: 0; left: -50%;
  width: 60%;
  height: 100%;
  background: linear-gradient(115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 40%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.08) 60%,
    transparent 100%);
  animation: pai-shimmer-sweep 4s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}
@keyframes pai-shimmer-sweep {
  0%   { left: -60%; }
  60%  { left: 120%; }
  100% { left: 120%; }
}

.pai-sparkles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.pai-sparkles span {
  position: absolute;
  font-size: 0.7rem;
  opacity: 0.8;
  animation: pai-sparkle-float 4s ease-in-out infinite;
}
.pai-sparkles span:nth-child(1) { top: 12%;  left: 35%; animation-delay: 0s; }
.pai-sparkles span:nth-child(2) { top: 30%;  left: 85%; animation-delay: 0.5s; font-size: 0.6rem; }
.pai-sparkles span:nth-child(3) { top: 68%;  left: 28%; animation-delay: 1.0s; font-size: 0.55rem; }
.pai-sparkles span:nth-child(4) { top: 82%;  left: 70%; animation-delay: 1.5s; font-size: 0.65rem; }
.pai-sparkles span:nth-child(5) { top: 48%;  left: 92%; animation-delay: 2.0s; font-size: 0.5rem; }
.pai-sparkles span:nth-child(6) { top: 22%;  left: 18%; animation-delay: 2.5s; font-size: 0.6rem; }
@keyframes pai-sparkle-float {
  0%, 100% { opacity: 0; transform: scale(0.6) translateY(0); }
  20%      { opacity: 1; transform: scale(1) translateY(-3px); }
  60%      { opacity: 0.6; transform: scale(1.2) translateY(-6px); }
}

.pai-icon-wrap {
  position: relative;
  z-index: 3;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pai-orbit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: pai-orbit-rotate 8s linear infinite;
}
@keyframes pai-orbit-rotate {
  to { transform: rotate(360deg); }
}
.pai-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3a7bd5, #00d4ff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow:
    0 0 20px rgba(0, 212, 255, 0.5),
    inset 0 -2px 8px rgba(0, 0, 0, 0.2);
  animation: pai-icon-float 2.4s ease-in-out infinite;
  position: relative;
  z-index: 2;
}
@keyframes pai-icon-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-2px) rotate(3deg); }
}

.pai-body {
  position: relative;
  z-index: 3;
  flex: 1;
  min-width: 0;
}
.pai-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  margin: 22px 0 6px 0;       /* top-margin clears the NEW badge (top:16px + ~20px height) */
  max-width: calc(100% - 4px);
  background: linear-gradient(135deg, #ffd08a, #ffb040);
  color: #4a2a00;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 1.2px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(255, 176, 64, 0.5);
}
.pai-title {
  font-size: 1.02rem;
  font-weight: 800;
  color: #ffffff !important;
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin-bottom: 6px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.pai-model {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin-bottom: 8px;
  background: rgba(127, 212, 255, 0.15);
  border: 1px solid rgba(127, 212, 255, 0.45);
  border-radius: 999px;
}
.pai-model-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(232, 238, 246, 0.7);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.pai-model-name {
  font-size: 0.78rem;
  font-weight: 800;
  background: linear-gradient(90deg, #ffffff, #7fd4ff, #ffd08a, #ffffff);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: pai-model-shimmer 4s linear infinite;
  letter-spacing: -0.005em;
}
@keyframes pai-model-shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
.pai-desc {
  font-size: 0.78rem;
  color: rgba(232, 238, 246, 0.85) !important;
  line-height: 1.5;
  margin-bottom: 12px;
}

/* Trust chips inside the premium AI card — absorbed from the old
   flagship-banner so the two cards can merge into one. */
.pai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.pai-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(127, 212, 255, 0.3);
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 600;
  color: rgba(232, 238, 246, 0.92);
  backdrop-filter: blur(4px);
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.pai-chip-hot {
  background: linear-gradient(135deg, rgba(255, 77, 109, 0.22), rgba(255, 140, 50, 0.18));
  border-color: rgba(255, 140, 50, 0.5);
  color: #ffb78a;
  animation: pai-chip-hot-pulse 2s ease-in-out infinite;
}
@keyframes pai-chip-hot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 109, 0.4); }
  50%      { box-shadow: 0 0 0 4px rgba(255, 77, 109, 0); }
}

.pai-cta-row {
  display: flex;
  flex-direction: column;   /* Stack vertically so the CTA button can be full-width */
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.pai-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  /* Width + margin tuned so the button sits visually CENTERED within
     the whole card (not just within pai-body, which is offset right by
     the 72px icon column). Shifts ~20px left relative to full-width. */
  width: calc(100% - 8px);
  margin-right: 40px;
  margin-left: -32px;
  background: linear-gradient(135deg, #3a7bd5, #00d4ff, #3a7bd5);
  background-size: 200% auto;
  color: #ffffff !important;
  font-size: 0.95rem;       /* Larger text */
  font-weight: 800;
  letter-spacing: 0.3px;
  border-radius: 999px;
  box-shadow:
    0 4px 14px rgba(0, 212, 255, 0.5),
    0 0 0 0 rgba(0, 212, 255, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  /* Continuous gentle pulse + gradient shimmer so the button feels alive */
  animation: pai-cta-breathe 2.8s ease-in-out infinite,
             pai-cta-shimmer 4s linear infinite;
}
.pai-cta-btn::before {
  /* Moving highlight sweep across the button */
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 60%; height: 100%;
  background: linear-gradient(115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 40%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0.15) 60%,
    transparent 100%);
  transform: skewX(-15deg);
  animation: pai-cta-sweep 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pai-cta-breathe {
  0%, 100% {
    box-shadow: 0 4px 14px rgba(0, 212, 255, 0.5),
                0 0 0 0 rgba(0, 212, 255, 0.55);
  }
  50% {
    box-shadow: 0 6px 20px rgba(0, 212, 255, 0.7),
                0 0 0 8px rgba(0, 212, 255, 0);
  }
}
@keyframes pai-cta-shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@keyframes pai-cta-sweep {
  0%   { left: -75%; }
  45%  { left: 120%; }
  100% { left: 120%; }
}
.mode-card.premium-ai:hover .pai-cta-btn,
.mode-card.premium-ai:focus-visible .pai-cta-btn {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 8px 28px rgba(0, 212, 255, 0.8),
    0 0 0 4px rgba(0, 212, 255, 0.15);
}
.mode-card.premium-ai:active .pai-cta-btn {
  transform: translateY(0) scale(0.98);
}
.pai-cta-arrow {
  font-size: 1.3rem;
  transition: transform 0.2s ease;
  display: inline-block;
}
.mode-card.premium-ai:hover .pai-cta-arrow {
  transform: translateX(4px);
}
.pai-free-tag {
  align-self: center;       /* Center the "Free · 10/day" tag below the button */
}
.pai-free-tag {
  font-size: 0.7rem;
  font-weight: 700;
  color: #a7f5cf;
  padding: 4px 10px;
  background: rgba(0, 255, 136, 0.12);
  border: 1px solid rgba(0, 255, 136, 0.35);
  border-radius: 999px;
  letter-spacing: 0.3px;
}

/* Hover: lift + brighten */
.mode-card.premium-ai:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(127, 212, 255, 0.9) !important;
}

@media (max-width: 420px) {
  .mode-card.premium-ai { padding: 16px 14px !important; gap: 12px !important; min-height: 140px; }
  .pai-icon-wrap { width: 60px; height: 60px; }
  .pai-icon { width: 48px; height: 48px; font-size: 1.6rem; }
  .pai-title { font-size: 0.95rem; }
  .pai-desc { font-size: 0.74rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mode-card.premium-ai,
  .mode-card.premium-ai::before,
  .mode-card.premium-ai .pai-shimmer,
  .mode-card.premium-ai .pai-sparkles span,
  .mode-card.premium-ai .pai-orbit,
  .mode-card.premium-ai .pai-icon,
  .mode-card.premium-ai .pai-model-name,
  .mode-card.premium-ai .pai-chip-hot,
  .mode-card.premium-ai .pai-cta-btn,
  .mode-card.premium-ai .pai-cta-btn::before {
    animation: none !important;
  }
}

/* ─── Home tile — AI CTA ─── */
/* Note: the base .mode-card has its own ::before overlay (inset:0). We
   use ::after here instead, and explicitly position it so it does NOT
   inherit "inset:0" from anywhere. Without this, the NEW badge expanded
   to cover the entire card, hiding the text. */
.mode-card.ai-cta {
  background: linear-gradient(135deg, rgba(220, 238, 255, 0.95), rgba(200, 232, 255, 0.9)) !important;
  border: 1.5px solid rgba(58, 123, 213, 0.45) !important;
  box-shadow: 0 6px 22px rgba(58, 123, 213, 0.18), 0 0 0 1px rgba(127, 212, 255, 0.25) !important;
  position: relative;
  overflow: visible;  /* allow NEW badge to overflow slightly */
}
.mode-card.ai-cta::after {
  content: "✨ NEW";
  position: absolute;
  top: -8px; right: 14px;
  left: auto; bottom: auto;
  background: linear-gradient(135deg, #ff4d6d, #c9184a);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 12px;
  letter-spacing: 0.8px;
  box-shadow: 0 3px 10px rgba(255, 77, 109, 0.55);
  z-index: 3;
  pointer-events: none;
}
.mode-card.ai-cta .mode-icon {
  background: linear-gradient(135deg, #3a7bd5, #00d4ff) !important;
  color: #fff !important;
  border-color: rgba(58, 123, 213, 0.45) !important;
  animation: ai-icon-pulse 2.4s ease-in-out infinite;
}
.mode-card.ai-cta .mode-icon > span {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.mode-card.ai-cta .mode-name {
  color: #0d3880 !important;
}
.mode-card.ai-cta .mode-desc {
  color: #2a5080 !important;
}
@keyframes ai-icon-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.6); }
  50%      { box-shadow: 0 0 0 8px rgba(0, 212, 255, 0); }
}

/* ─── Responsive tightening ─── */
@media (max-width: 420px) {
  .ai-hero { padding: 14px 12px 4px; }
  .ai-hero-avatar { width: 48px; height: 48px; font-size: 1.7rem; }
  .ai-hero-title { font-size: 0.98rem; }
  .ai-msg-bubble { max-width: 82%; font-size: 0.88rem; }
}