*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Global: kill browser focus rings on all inputs (covers autoFocus on page load) */
input,
input:focus,
input:focus-visible,
input:focus-within {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

body {                                                                                                                                                      
  background: #080808;                                                                                                                               
  min-height: 100vh;                                                                                                                                 
  font-family: 'Lato', sans-serif;                                                                                                                   
  color: #f5f0e8;                                                                                                                                    
}       

/* Ensure page content sits above grain layer */
body > * {
  position: relative;
  z-index: 1;
}

/* @keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

.shimmer {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 6em;
  letter-spacing: normal;
  text-align: center;
  display: inline-block;
  background: linear-gradient(90deg, #f5f0e8 0%, #f0a0b0 100%);
  background-size: 100% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: brightness(2);
  animation: shimmer 7s linear infinite;
}

/* Pearl text — landing & input page titles */
.pearl-text {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 6em;
  letter-spacing: normal;
  text-align: center;
  display: inline-block;
  background: linear-gradient(90deg, #fde8c8 0%, #b86870 100%);
  background-size: 100% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pearl-text-wrapper {
  animation: pearl-fadein 2.5s ease 0s both;
}

@keyframes pearl-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pearl-text-fadein {
  from { filter: brightness(2) opacity(0); }
  to   { filter: brightness(2) opacity(1); }
}

@keyframes dot-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%            { transform: translateY(-5px); }
}

/* ─── Layout Helpers ────────────────────────────────────────────── */

.page-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  gap: 2rem;
}

.chat-page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 1.5rem 2rem;
  position: relative;
}

.chat-page-wrapper > * {
  position: relative;
  z-index: 1;
}

/* ─── Landing Page ──────────────────────────────────────────────── */

.landing-page {
  position: relative;
  overflow: hidden;
  padding-bottom: 15vh;
}

/* wave drift variant — uncomment to use */

/* @keyframes ken-burns {
  0%   { transform: scale(1.08) translate(6%, 0.5%); }
  25%  { transform: scale(1.10) translate(0%, -0.5%); }
  50%  { transform: scale(1.08) translate(-6%, 0.5%); }
  75%  { transform: scale(1.10) translate(0%, -0.5%); }
  100% { transform: scale(1.08) translate(6%, 0.5%); }
} */

@keyframes ken-burns {
  0%   { transform: scale(1.0) translate(2%, 1%); }
  50%  { transform: scale(1.15) translate(-2%, -1%); }
  100% { transform: scale(1.0) translate(2%, 1%); }
}

.landing-page::before {
  content: '';
  position: absolute;
  /* inset: -10%;                                                                                                                                      
  background-image: url('/assets/black_sand.png');    */
  /* inset: 0;
  background-image: url('/assets/black_waves.gif'); */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* animation: ken-burns 14s ease-in-out infinite;                                                                                                     */
  z-index: 0;
}

.landing-page > * {
  position: relative;
  z-index: 1;
}

.landing-description {
  max-width: 620px;
  font-family: 'Lato', sans-serif;
  font-size: 1.25em;
  font-weight: 300;
  font-style: italic;
  line-height: 1.75;
  opacity: 0.88;
  color: #fde8c8;
  animation: pearl-fadein 2.5s ease 0.25s both;
}

.enter-btn {
  display: inline-block;
  padding: 0.6em 2.2em;
  border: 2px solid #d4b1aa;
  color: #fde8c8;
  font-family: 'Lato', sans-serif;
  font-size: 1.25em;
  font-weight: 300;
  font-style: italic;
  letter-spacing: normal;
  text-decoration: none;
  transition: border-color 0.25s ease, background 0.25s ease;
  animation: pearl-fadein 2.5s ease 0.5s both;
}

.enter-btn:hover {
  border-color: #d4b1aa;
  background: rgba(245, 232, 212, 0.08);
  color: #f5f0e8;
  text-decoration: none;
}

.lang-switcher {
  font-family: 'Lato', sans-serif;
  font-size: 1em;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.12em;
  animation: pearl-fadein 2.5s ease 0.75s both;
}

.lang-option {
  color: rgba(253, 232, 200, 0.45);
  cursor: pointer;
  transition: color 0.2s ease;
}

.lang-option:hover {
  color: #d4b1aa;
}

.lang-sep {
  color: rgba(253, 232, 200, 0.2);
}

.info-container {
  position: absolute;
  bottom: 2rem;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 0.5rem;
  animation: pearl-fadein 2.5s ease 1s both;
}

.info-icon {
  color: rgba(253, 232, 200, 0.3);
  font-size: 0.85em;
  cursor: pointer;
  transition: color 0.2s ease;
  user-select: none;
}

.info-icon:hover {
  color: rgba(253, 232, 200, 0.7);
}

.info-panel {
  font-family: 'Lato', sans-serif;
  font-size: 0.78em;
  font-weight: 300;
  font-style: italic;
  color: rgba(253, 232, 200, 0.45);
  text-align: center;
  max-width: 420px;
  line-height: 1.6;
}

/* ─── Input Page ────────────────────────────────────────────────── */

.query-page {
  padding-bottom: 26.25vh;
}

.query-input-wrapper {
  width: 100%;
  max-width: 680px;
  animation: pearl-fadein 2.5s ease 0.25s both;
}

/* Border lives on the div — never affected by browser focus ring */
.query-input-box {
  width: 100%;
  border: 2px solid #d4b1aa;
  border-radius: 12px;
  display: flex;
  align-items: center;
}

.query-input {
  width: 100%;
  background: transparent;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0;
  color: #fde8c8;
  font-family: 'Lato', sans-serif;
  font-size: 1.25em;
  font-weight: 300;
  line-height: 1.5;
  text-align: center;
  padding: 0.75em 0.5em;
  height: auto !important;
  -webkit-appearance: none;
  appearance: none;
}

.query-input::placeholder,
.query-input::-webkit-input-placeholder,
.query-input::-moz-placeholder {
  color: rgba(245, 240, 232, 0.38) !important;
  font-style: italic !important;
}

.query-input:focus,
.query-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}


/* ─── Chat Page ─────────────────────────────────────────────────── */

.chat-top-bar {
  display: flex;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(253, 232, 200, 0.1);
  flex-shrink: 0;
}

.pearl-static {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 2.2em;
  letter-spacing: normal;
  text-decoration: none;
  background: linear-gradient(90deg, #fde8c8 0%, #b86870 100%);
  background-size: 100% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pearl-static:hover {
  text-decoration: none;
  opacity: 0.8;
}

.chat-container {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 0;
  padding-bottom: 110px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 920px;
  width: 100%;
  align-self: center;
}

/* Chat bubble base */
.chat-bubble {
  max-width: 80%;
  padding: 0.85em 1.25em;
  border-radius: 8px;
  font-family: 'Lato', sans-serif;
  font-size: 1.05em;
  line-height: 1.7;
  word-wrap: break-word;
  animation: pearl-fadein 0.5s ease both;
}

/* User bubble — right-aligned */
.chat-bubble-user {
  align-self: flex-end;
  background: rgba(212, 177, 170, 0.18);
  color: #fde8c8;
  border-radius: 18px 18px 4px 18px;
}

/* Assistant response — plain text, no bubble */
.chat-bubble-assistant {
  align-self: flex-start;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0.25em 0;
  color: #fde8c8;
}

/* Thinking dots */
.chat-bubble-thinking {
  padding: 0.9em 1.25em;
  display: flex;
  align-items: center;
  gap: 5px;
}

.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #fde8c8;
  animation: dot-bounce 1.4s ease-in-out infinite;
}

.dot:nth-child(2) { animation-delay: 0.18s; }
.dot:nth-child(3) { animation-delay: 0.36s; }

/* Bottom input bar */
.chat-input-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem 2rem 1.75rem;
  background: linear-gradient(to top, #080808 60%, transparent);
  display: flex;
  justify-content: center;
}

/* Input bar border */
.chat-input-box {
  width: 100%;
  max-width: 920px;
  background: rgba(28, 28, 28, 0.85);
  border: 2px solid #d4b1aa;
  border-radius: 12px;
  display: flex;
  align-items: stretch;
}

.chat-input {
  width: 100%;
  background: transparent;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 12px;
  color: #fde8c8;
  font-family: 'Lato', sans-serif;
  font-size: 1.05em;
  font-weight: 300;
  padding: 0.9em 1.25em;
  height: auto !important;
}

.chat-input::placeholder {
  color: rgba(245, 240, 232, 0.35);
}

.chat-input:focus,
.chat-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.chat-input-box:focus-within {
  box-shadow: 0 0 18px rgba(245, 240, 232, 0.07);
}

/* ─── Markdown inside assistant bubbles ─────────────────────────── */

.chat-bubble-assistant p { margin: 0 0 0.6em; }
.chat-bubble-assistant p:last-child { margin-bottom: 0; }
.chat-bubble-assistant h1,
.chat-bubble-assistant h2,
.chat-bubble-assistant h3 { font-size: 1em; font-weight: 600; margin: 0.8em 0 0.3em; }
.chat-bubble-assistant ul,
.chat-bubble-assistant ol { padding-left: 1.2em; margin: 0.4em 0 0.6em; }
.chat-bubble-assistant li { margin-bottom: 0.25em; }
.chat-bubble-assistant strong { font-weight: 600; }
.chat-bubble-assistant em { font-style: italic; opacity: 0.85; }
.chat-bubble-assistant a { color: #fde8c8; text-decoration: underline; }
.chat-bubble-assistant code { font-family: monospace; font-size: 0.9em; opacity: 0.8; }
.chat-bubble-assistant hr { border: none; border-top: 1px solid rgba(253,232,200,0.15); margin: 0.8em 0; }

/* ─── Mobile (≤ 600px) ──────────────────────────────────────────── */

@media (max-width: 600px) {

  /* Landing — scale down title and description */
  .pearl-text { font-size: 3.8em; }
  .landing-description { font-size: 1.05em; padding: 0 1rem; }
  .enter-btn { font-size: 1.05em; padding: 0.55em 1.8em; }
  .page-center { gap: 1.5rem; }
  .landing-page { padding-bottom: 10vh; }
  .info-container { bottom: 1.25rem; }

  /* Input page */
  .query-page { padding-bottom: 20vh; }
  .query-input-wrapper { padding: 0 1rem; }
  .query-input { font-size: 1.05em; }

  /* Chat page wrapper — tighter horizontal padding */
  .chat-page-wrapper { padding: 1rem; }

  /* Top bar wordmark */
  .pearl-static { font-size: 1.7em; }

  /* Message area — more bottom clearance for keyboard + input bar */
  .chat-container {
    padding-bottom: 130px;
    gap: 0.75rem;
  }

  /* Bubbles — allow more width on small screens */
  .chat-bubble {
    max-width: 92%;
    font-size: 0.97em;
    padding: 0.75em 1em;
  }

  /* Input bar — tighter padding, account for iOS home indicator */
  .chat-input-bar {
    padding: 0.75rem 1rem 1.25rem;
    /* env() pushes bar above iOS home indicator when supported */
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }

  .chat-input { font-size: 1em; padding: 0.8em 1em; }

  /* Prevent iOS Safari from zooming in on input focus (font-size must be ≥ 16px) */
  .chat-input,
  .query-input { font-size: max(1em, 16px); }
}

/* ─── Small tablet (601px – 900px) ──────────────────────────────── */

@media (min-width: 601px) and (max-width: 900px) {
  .pearl-text { font-size: 4.5em; }
  .chat-page-wrapper { padding: 1.25rem 1.5rem; }
  .pearl-static { font-size: 1.9em; }
  .chat-container { padding-bottom: 120px; }
  .chat-bubble { max-width: 88%; }
  .chat-input-bar { padding: 0.85rem 1.5rem 1.5rem; }
}