/* RaceWeek AI by Visterra Runs — widget styles.
   Línea gráfica: Barlow Condensed / Barlow, naranja #ff4d1f, teal #38d7c4, negro #0a0e1a */

/* ── LAUNCHER — igual al botón "Reserve My Spot" ──────────────────────── */
.rai-launcher {
  position: fixed;
  right: 22px;
  bottom: 94px;
  z-index: 61;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 22px 0 18px;
  border: none;
  border-radius: 6px;
  background: var(--accent, #ff4d1f);
  color: #fff;
  font-family: var(--font-display, 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif);
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 16px 44px var(--accent-glow, rgba(255, 77, 31, 0.35));
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rai-launcher:hover { transform: translateY(-2px); box-shadow: 0 20px 50px var(--accent-glow, rgba(255,77,31,0.45)); }
.rai-launcher:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.rai-launcher svg { width: 20px; height: 20px; flex: none; }
.rai-launcher-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.rai-launcher-sub { font-size: 10px; font-weight: 600; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.08em; }
.rai-launcher.is-hidden { display: none; }

@media (max-width: 720px) {
  .rai-launcher { bottom: 158px; right: 16px; height: 48px; padding: 0 18px 0 14px; font-size: 13px; }
  .rai-launcher-sub { display: none; }
}

/* ── PANEL SHELL ───────────────────────────────────────────────────────── */
.rai-panel {
  background: var(--bg-surface, #141a2a);
  border: 1px solid var(--border-strong, #3d4866);
  border-top: 3px solid var(--cozumel, #38d7c4);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-body, 'Barlow', sans-serif);
  color: var(--text-primary, #fff);
  min-height: 0;
}
.rai-panel[hidden] { display: none; }

.rai-panel--floating {
  position: fixed;
  right: 22px;
  bottom: 94px;
  z-index: 70;
  width: min(400px, calc(100vw - 32px));
  height: min(640px, calc(100vh - 120px));
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}

.rai-panel--embedded {
  position: static;
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  border: none;
  border-top: 3px solid var(--cozumel, #38d7c4);
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 720px) {
  .rai-panel--floating {
    right: 0; left: 0; bottom: 0; top: 0;
    width: 100%; height: 100%;
    border-radius: 0;
  }
}

/* ── HEADER ────────────────────────────────────────────────────────────── */
.rai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 13px;
  background: var(--bg-primary, #0a0e1a);
  border-bottom: 1px solid var(--border-subtle, #2a3349);
  flex: none;
}

/* Badge: oculto — el nombre y subtítulo llevan la identidad */
.rai-badge { display: none; }

/* Identity block */
.rai-header-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.rai-header-title strong {
  font-family: var(--font-display, 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.05;
  color: #fff;
}

.rai-header-sub {
  font-family: var(--font-body, 'Barlow', sans-serif);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary, #a8b0c4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.rai-header-actions { display: flex; align-items: center; gap: 4px; flex: none; }

.rai-icon-btn {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: none; border-radius: 4px;
  background: transparent;
  color: var(--text-muted, #6b7388);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.rai-icon-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.rai-icon-btn:focus-visible { outline: 2px solid var(--cozumel, #38d7c4); outline-offset: 1px; }

.rai-lang-btn {
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-strong, #3d4866);
  background: transparent;
  color: var(--text-muted, #6b7388);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.rai-lang-btn:hover { color: var(--cozumel, #38d7c4); border-color: var(--cozumel, #38d7c4); }

/* Floating compact */
.rai-panel--floating .rai-header { padding: 12px 14px 11px; }
.rai-panel--floating .rai-header-title strong { font-size: 17px; }

/* ── BODY / MESSAGES ───────────────────────────────────────────────────── */
.rai-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-elevated, #1c2336);
}

.rai-msg {
  max-width: 88%;
  padding: 11px 15px;
  border-radius: 4px;
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-wrap;
}
.rai-msg-assistant {
  align-self: flex-start;
  background: var(--bg-surface, #141a2a);
  border: 1px solid var(--border-subtle, #2a3349);
  border-left: 2px solid var(--cozumel, #38d7c4);
}
.rai-msg-user {
  align-self: flex-end;
  background: var(--accent, #ff4d1f);
  color: #fff;
  border-radius: 4px 4px 1px 4px;
}
.rai-msg-system {
  align-self: center;
  font-size: 12px;
  color: var(--text-muted, #6b7388);
  text-align: center;
  max-width: 100%;
}

.rai-sources { margin-top: 8px; font-size: 13px; color: var(--text-muted, #6b7388); }
.rai-sources a { color: var(--cozumel, #38d7c4); }
.rai-may-change { display: block; margin-top: 6px; font-size: 13px; color: var(--gold, #d4a85f); }

/* ── CHIPS / QUICK REPLIES ─────────────────────────────────────────────── */
.rai-quick-replies { display: flex; flex-wrap: wrap; gap: 8px; }

.rai-chip {
  border: 1px solid var(--border-strong, #3d4866);
  background: transparent;
  color: var(--text-primary, #fff);
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 4px;
  cursor: pointer;
  min-height: 44px;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.rai-chip:hover { border-color: var(--accent, #ff4d1f); color: var(--accent, #ff4d1f); }
.rai-chip:focus-visible { outline: 2px solid var(--accent, #ff4d1f); outline-offset: 1px; }

.rai-multi-select { align-items: flex-start; }
.rai-multi-select .rai-chip.is-selected {
  border-color: var(--accent, #ff4d1f);
  background: rgba(255, 77, 31, 0.12);
  color: var(--accent, #ff4d1f);
}

.rai-other-input {
  flex: 1 1 100%;
  min-height: 44px;
  background: var(--bg-surface, #141a2a);
  border: 1px solid var(--border-strong, #3d4866);
  border-radius: 4px;
  color: var(--text-primary, #fff);
  font-family: var(--font-body, 'Barlow', sans-serif);
  font-size: 15px;
  padding: 11px 14px;
  transition: border-color 0.18s;
}
.rai-other-input:focus-visible { outline: none; border-color: var(--accent, #ff4d1f); }

.rai-multi-continue {
  min-height: 44px;
  padding: 10px 22px;
  border: none;
  border-radius: 4px;
  background: var(--accent, #ff4d1f);
  color: #fff;
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.15s;
}
.rai-multi-continue:hover { background: var(--accent-hover, #e63e15); }
.rai-multi-continue:disabled { opacity: 0.4; cursor: not-allowed; }
.rai-multi-continue:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rai-multi-error { flex: 1 1 100%; color: var(--gold, #d4a85f); font-size: 13px; font-weight: 600; }

/* ── CONSENT ───────────────────────────────────────────────────────────── */
.rai-consent-notice {
  align-self: flex-start;
  max-width: 88%;
  margin: -4px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted, #6b7388);
}

/* ── PLAN CARD ─────────────────────────────────────────────────────────── */
.rai-plan-card {
  background: var(--bg-surface, #141a2a);
  border: 1px solid var(--border-strong, #3d4866);
  border-radius: 4px;
  padding: 16px;
  font-size: 15px;
  line-height: 1.6;
}
.rai-plan-card h4 {
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cozumel, #38d7c4);
  margin: 12px 0 4px;
}
.rai-plan-card h4:first-child { margin-top: 0; }
.rai-plan-card ul { margin: 0; padding-left: 18px; }
.rai-plan-card li { margin-bottom: 6px; }
.rai-plan-note { margin-top: 12px; font-size: 13px; color: var(--text-muted, #6b7388); }

/* ── CTA ───────────────────────────────────────────────────────────────── */
.rai-cta-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 12px; width: 100%;
  padding: 13px 16px;
  border-radius: 4px;
  background: var(--whatsapp, #25d366);
  color: #06210f;
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: background 0.15s;
}
.rai-cta-wa:hover { background: var(--whatsapp-hover, #1da851); }

.rai-plan-ctas { display: flex; flex-direction: column; }
.rai-cta-secondary {
  display: block;
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted, #6b7388);
  text-decoration: none;
}
.rai-cta-secondary:hover { color: var(--text-secondary, #a8b0c4); text-decoration: underline; }

/* ── TYPING INDICATOR ──────────────────────────────────────────────────── */
.rai-typing { display: inline-flex; gap: 4px; align-items: center; padding: 10px 13px; }
.rai-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--cozumel, #38d7c4); animation: rai-blink 1.2s infinite ease-in-out; }
.rai-typing span:nth-child(2) { animation-delay: 0.2s; }
.rai-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes rai-blink { 0%, 80%, 100% { opacity: 0.2; } 40% { opacity: 1; } }

/* ── FOOTER / INPUT ────────────────────────────────────────────────────── */
.rai-footer {
  flex: none;
  border-top: 1px solid var(--border-subtle, #2a3349);
  padding: 12px 14px 10px;
  background: var(--bg-primary, #0a0e1a);
}

.rai-input-row { display: flex; gap: 8px; align-items: center; }

.rai-textarea {
  flex: 1;
  resize: none;
  max-height: 96px;
  min-height: 42px;
  background: var(--bg-surface, #141a2a);
  border: 1px solid var(--border-strong, #3d4866);
  border-radius: 4px;
  color: var(--text-primary, #fff);
  font-family: var(--font-body, 'Barlow', sans-serif);
  font-size: 15px;
  padding: 10px 14px;
  line-height: 1.45;
  transition: border-color 0.18s;
}
.rai-textarea::placeholder { color: var(--text-muted, #6b7388); }
.rai-textarea:focus-visible {
  outline: none;
  border-color: var(--accent, #ff4d1f);
}

.rai-send-btn {
  flex: none;
  width: 42px; height: 42px;
  border: none;
  border-radius: 4px;
  background: var(--accent, #ff4d1f);
  color: #fff;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.15s, transform 0.12s;
  flex-shrink: 0;
}
.rai-send-btn:hover { background: var(--accent-hover, #e63e15); transform: scale(1.05); }
.rai-send-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }
.rai-send-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Footer links: una sola línea centrada */
.rai-footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted, #6b7388);
}
.rai-footer-links a {
  color: var(--text-muted, #6b7388);
  text-decoration: none;
  transition: color 0.15s;
}
.rai-footer-links a:hover { color: var(--cozumel, #38d7c4); }
.rai-footer-links span[data-action="restart"] {
  color: var(--text-muted, #6b7388);
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--border-subtle, #2a3349);
  cursor: pointer;
}
.rai-footer-links span[data-action="restart"]:hover { color: var(--text-secondary, #a8b0c4); text-decoration: underline; }

.rai-disclosure {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted, #6b7388);
  padding: 7px 14px 10px;
  opacity: 0.65;
}

/* ── RESTORE PILL ──────────────────────────────────────────────────────── */
.rai-restore-pill {
  position: fixed; right: 22px; bottom: 94px; z-index: 61;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 4px;
  background: var(--bg-elevated, #1c2336);
  border: 1px solid var(--border-strong, #3d4866);
  color: var(--text-primary, #fff);
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  cursor: pointer;
  transition: border-color 0.15s;
}
.rai-restore-pill:hover { border-color: var(--accent, #ff4d1f); }
.rai-restore-pill[hidden] { display: none; }

/* ── MOBILE TOUCH TARGETS ──────────────────────────────────────────────── */
@media (max-width: 720px) {
  .rai-panel--floating .rai-icon-btn,
  .rai-icon-btn { width: 44px; height: 44px; }
  .rai-send-btn { width: 46px; height: 46px; }
  .rai-lang-btn { min-height: 40px; padding: 7px 10px; }
  .rai-header { padding: 11px 10px 10px; }
  .rai-header-title strong { font-size: 16px; }
  .rai-header-sub { display: none; }
}

/* ── STANDALONE PAGE ───────────────────────────────────────────────────── */
.rai-page-hero { padding: var(--space-8, 64px) 0 var(--space-6, 32px); text-align: center; }
.rai-page-hero h1 { font-family: var(--font-display, sans-serif); font-size: clamp(32px, 5vw, 52px); font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; }
.rai-page-hero p { color: var(--text-secondary, #a8b0c4); max-width: 640px; margin: 12px auto 0; font-size: 17px; }
.rai-page-embed {
  max-width: 720px;
  margin: 0 auto var(--space-8, 64px);
  background: var(--bg-elevated, #1c2336);
  border: 1px solid var(--border-strong, #3d4866);
  border-top: 3px solid var(--cozumel, #38d7c4);
  border-radius: 6px;
  overflow: hidden;
  height: 620px;
  display: flex;
  flex-direction: column;
}
@media (max-width: 720px) {
  .rai-page-embed { height: 76vh; }
}