/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ============================================================
   Design Tokens
   ============================================================ */
:root {
  /* --- Colors --- */
  --color-brand-blue:        #0047C2;
  --color-brand-blue-rgb:    0, 71, 194;

  --color-brand-blue-sec:    #1D6AE5;
  --color-brand-blue-sec-rgb: 29, 106, 229;

  --color-amber:             #E0A42E;
  --color-amber-rgb:         253, 186, 69;

  --color-bg:                #070809;
  --color-surface:           #0A0B0C;
  --color-surface-raised:    #111315;

  --color-brand-purple:      #7700CC;
  --color-brand-purple-rgb:  119, 0, 204;

  /* --- Text (dark mode) --- */
  --text-primary:   rgba(255, 255, 255, 0.92);
  --text-secondary: rgba(255, 255, 255, 0.65);
  --text-muted:     rgba(255, 255, 255, 0.40);
  --text-disabled:  rgba(255, 255, 255, 0.22);

  /* --- Borders --- */
  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.20);

  /* --- Typography scale --- */
  --text-display-xl:  4.5rem;   /* 72px */
  --text-display-l:   3.5rem;   /* 56px */
  --text-display-m:   2.5rem;   /* 40px */
  --text-mktg-1:      2rem;     /* 32px */
  --text-mktg-2:      1.5rem;   /* 24px */
  --text-mktg-3:      1.25rem;  /* 20px */
  --text-mktg-body:   1.125rem; /* 18px */
  --text-body:        0.9375rem;/* 15px */
  --text-caption:     0.8125rem;/* 13px */

  /* --- Font families --- */
  --font-sans:  'Inter', system-ui, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
}

/* Base font size bump */
html { font-size: 16px; }
body { font-size: 15px; background-color: var(--color-bg); }

/* Ambient glow animations */
@keyframes drift-blue {
  0%   { transform: translate(-40%, -40%) scale(1); }
  33%  { transform: translate(-30%, -50%) scale(1.1); }
  66%  { transform: translate(-50%, -35%) scale(0.95); }
  100% { transform: translate(-40%, -40%) scale(1); }
}
@keyframes drift-purple {
  0%   { transform: translate(40%, 40%) scale(1); }
  33%  { transform: translate(50%, 30%) scale(0.95); }
  66%  { transform: translate(35%, 50%) scale(1.1); }
  100% { transform: translate(40%, 40%) scale(1); }
}
.glow-blue   { animation: drift-blue   12s ease-in-out infinite; }
.glow-purple { animation: drift-purple 14s ease-in-out infinite; }

/* ============================================================
   Semantic field / button helpers
   ============================================================ */
.field-input {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 0.375rem;
  padding: 0.625rem 1rem;
  font-size: 0.9375rem;
  color: var(--text-primary);
  transition: border-color 0.2s;
}
.field-input:focus { outline: none; border-color: rgba(var(--color-brand-blue-rgb), 0.8); box-shadow: 0 0 0 3px rgba(var(--color-brand-blue-rgb), 0.18); }
.field-input::placeholder { color: var(--text-disabled); }
@media (max-width: 640px) { .field-input { font-size: 1rem; } }

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-brand-blue);
  color: #fff;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  padding: 0.625rem 1.5rem;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}
.btn-primary:hover { background-color: var(--color-brand-blue-sec); }
.btn-primary:disabled,
.btn-primary:disabled:hover {
  background-color: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.35);
  cursor: not-allowed;
  box-shadow: none;
}

/* Tooltip shown only while the wrapped submit is disabled (required fields unfilled). */
.cta-tooltip { position: relative; display: inline-block; }
.cta-tooltip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background-color: var(--color-surface-raised);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  padding: 0.4rem 0.7rem;
  border-radius: 0.375rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.cta-tooltip:has([type="submit"]:disabled):hover::after { opacity: 1; }

/* Scale up utility text sizes */
.text-xs  { font-size: 0.8125rem !important; }  /* 13px → was 12px */
.text-sm  { font-size: 0.9375rem !important; }  /* 15px → was 14px */
.text-base { font-size: 1.0625rem !important; } /* 17px → was 16px */
.text-lg  { font-size: 1.1875rem !important; }  /* 19px → was 18px */
.text-2xl { font-size: 1.625rem !important; }   /* 26px → was 24px */
.text-3xl { font-size: 2rem !important; }       /* 32px → was 30px */
.text-5xl { font-size: 3.25rem !important; }    /* 52px → was 48px */

/* ============================================================
   Beta login background: live chat stream
   ============================================================ */
.chat-stream {
  position: fixed;
  bottom: 0;
  right: 0;
  width: min(30rem, 32vw);
  height: 100vh;
  padding: 0 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
  /* Viewport-relative fade: calls are solid near the bottom and fade out as
     they rise, fully gone by ~halfway up the screen. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 45%, #000 85%);
          mask-image: linear-gradient(to bottom, transparent 45%, #000 85%);
}
@media (max-width: 1024px) { .chat-stream { display: none; } }

.chat-bubbles {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.6rem;
  min-height: 0;
  overflow: hidden;
}

/* Audio waveform that pulses under the thread while a message is posting */
.chat-audio {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 34px;
  margin-top: 0.85rem;
  opacity: 0.3;
  transition: opacity 0.4s ease;
}
.chat-audio.active { opacity: 0.9; }
.chat-audio .bar {
  width: 3px;
  height: var(--min, 12%);
  border-radius: 2px;
  background: rgba(var(--color-brand-blue-sec-rgb), 0.95);
  transition: height 0.5s ease;
}
.chat-audio.active .bar {
  animation-name: audio-wave;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transition: none;
}
/* alternate direction + per-bar --peak/--min gives an organic voice wave */
@keyframes audio-wave {
  from { height: var(--min, 12%); }
  to   { height: var(--peak, 80%); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-audio .bar { animation: none !important; }
}

.chat-bubble {
  max-width: 82%;
  border: 1px solid var(--border-default);
  border-radius: 0.75rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.015);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}
.chat-bubble.visible { opacity: 1; transform: translateY(0); }
.chat-bubble.agent  { align-self: flex-start; border-color: rgba(255, 255, 255, 0.10); }
.chat-bubble.caller {
  align-self: flex-end;
  border-color: rgba(var(--color-brand-blue-sec-rgb), 0.35);
  background: rgba(var(--color-brand-blue-rgb), 0.07);
}

.chat-typing { display: inline-flex; gap: 5px; align-items: center; padding: 0.15rem 0; }
.chat-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: 0.3;
  animation: chat-typing-blink 1.3s infinite ease-in-out;
}
.chat-typing span:nth-child(2) { animation-delay: 0.18s; }
.chat-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes chat-typing-blink {
  0%, 65%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 0.85; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .chat-bubble { transition: opacity 0.3s ease; transform: none; }
  .chat-typing span { animation: none; }
}

/* Invisible Turnstile: collapse the reserved space unless a real challenge
   iframe is injected (interaction-only fallback still shows when needed). */
.cf-turnstile:not(:has(iframe)) {
  height: 0;
  overflow: hidden;
  margin: 0;
}

/* Markdown / prose for .markdown-body: Tailwind @apply in app/assets/tailwind/application.css */