/* Onboarding + splash chrome. Sits in front of Eva's own UI. Injected by boot.js.
   Poppins is already loaded by the host page's <link> (apps/web/index.html);
   a duplicate @import here would render-block this stylesheet on a second
   round-trip to fonts.googleapis.com. */

:root {
  --nbf-bg:         #FAF8FF;
  --nbf-fg:         #1D142A;
  --nbf-muted:      #6E6578;
  --nbf-border:     rgba(29,20,42,0.12);
  --nbf-field-bg:   #FFFFFF;
  --nbf-hover-bg:   rgba(124,58,237,0.07);
  --nbf-hover-border: rgba(124,58,237,0.20);
  --nbf-accent:     #7C3AED;
  --nbf-accent-fg:  #FFFFFF;
  --nbf-error:      #B4237A;
  --nbf-gradient:   linear-gradient(90deg, #8A38F5 0%, #FB75FC 100%);
  --nbf-radius-field: 14px;
  --nbf-radius-pill:  9999px;
}

html.dark body {
  background: #0A0517 !important;
}

html.dark {
  --nbf-bg:         #0A0517;
  --nbf-fg:         #F5F5F5;
  --nbf-muted:      #9a9a9a;
  --nbf-border:     rgba(255,255,255,0.10);
  --nbf-field-bg:   #110125;
  --nbf-hover-bg:   rgba(255,255,255,0.07);
  --nbf-hover-border: rgba(255,255,255,0.18);
  --nbf-accent:     #8A38F5;
  --nbf-accent-fg:  #ffffff;
  --nbf-error:      #fb75fc;
}

.nbf-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nbf-bg);
  padding: 24px;
  overflow: auto;
  z-index: 9999;
  font-family: 'Poppins', system-ui, sans-serif;
}

.nbf-theme-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--nbf-radius-pill);
  background: transparent;
  color: var(--nbf-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

html[dir="rtl"] .nbf-theme-toggle {
  right: auto;
  left: 16px;
}

.nbf-theme-toggle:hover {
  background: var(--nbf-hover-bg);
  color: var(--nbf-fg);
}

.nbf-theme-toggle:focus-visible {
  outline: 2px solid var(--nbf-accent);
  outline-offset: 2px;
}

.nbf-lang-switch {
  position: absolute;
  top: 16px;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
}

.nbf-lang-switch-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: none;
  border-radius: var(--nbf-radius-pill);
  background: transparent;
  color: var(--nbf-muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.nbf-lang-switch-trigger:hover,
.nbf-lang-switch-trigger[aria-expanded="true"] {
  background: var(--nbf-hover-bg);
  color: var(--nbf-fg);
}

.nbf-lang-switch-trigger:focus-visible {
  outline: 2px solid var(--nbf-accent);
  outline-offset: 2px;
}

.nbf-lang-switch-label {
  max-width: 7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nbf-lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  min-width: 10rem;
  transform: translateX(-50%);
  padding: 6px;
  border: 1px solid var(--nbf-border);
  border-radius: 18px;
  background: var(--nbf-field-bg);
  box-shadow: 0 18px 55px rgba(15, 23, 42, 0.12);
}

html.dark .nbf-lang-menu {
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.45);
}

.nbf-lang-menu-label {
  padding: 6px 10px 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--nbf-muted);
}

.nbf-lang-option {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 8px 10px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--nbf-fg);
  font: inherit;
  font-size: 13px;
  text-align: start;
  cursor: pointer;
  transition: background 0.15s ease;
}

.nbf-lang-option:hover,
.nbf-lang-option.is-active {
  background: var(--nbf-hover-bg);
}

.nbf-lang-option-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--nbf-muted);
}

.nbf-card {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.nbf-logo {
  font-size: 40px;
  line-height: 1;
  display: flex;
  justify-content: center;
}

.nbf-logo img {
  width: 56px;
  height: 56px;
  display: block;
}

.nbf-title {
  margin: 4px 0 0;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  color: var(--nbf-fg);
}

.nbf-sub {
  margin: 0 0 6px;
  font-size: 13.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--nbf-muted);
}

.nbf-sub-typewriter {
  min-height: 2.25em;
}

.nbf-typewriter-cursor {
  display: inline-block;
  margin-inline-start: 1px;
  color: var(--nbf-accent);
  font-weight: 500;
  animation: nbf-cursor-blink 1s step-end infinite;
}

@keyframes nbf-cursor-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nbf-typewriter-cursor {
    animation: none;
  }
}

.nbf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nbf-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--nbf-fg);
}

.nbf-hint {
  font-size: 11.5px;
  color: var(--nbf-muted);
}

.nbf-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 16px;
  font-size: 14.5px;
  color: var(--nbf-fg);
  background: var(--nbf-field-bg);
  border: 1px solid var(--nbf-border);
  border-radius: var(--nbf-radius-field);
  outline: none;
  transition: border-color 0.15s ease;
  font-family: inherit;
}

.nbf-input:focus {
  border-color: var(--nbf-accent);
}

/* The onboarding and sign-in shells render before the React app's stylesheet
   loads, so they need their own 16px floor — below that iOS Safari zooms in on
   focus and does not zoom back out. The controls here are also the first thing
   anyone touches, so they get the same 44px minimum the app uses. */
@media (max-width: 1023px) {
  .nbf-input {
    font-size: 16px;
  }

  .nbf-theme-toggle {
    width: 44px;
    height: 44px;
  }

  .nbf-lang-switch-trigger {
    height: 44px;
    padding: 0 14px;
  }

  .nbf-chip {
    min-height: 44px;
    padding: 10px 16px;
  }
}

.nbf-textarea {
  resize: vertical;
  min-height: 64px;
}

.nbf-providers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nbf-chip {
  padding: 7px 13px;
  font-size: 13px;
  border: 1px solid var(--nbf-border);
  background: var(--nbf-field-bg);
  color: var(--nbf-fg);
  border-radius: var(--nbf-radius-pill);
  cursor: pointer;
  transition: all 0.15s ease;
}

.nbf-chip.is-active {
  background: var(--nbf-accent);
  color: var(--nbf-accent-fg);
  border-color: var(--nbf-accent);
}

.nbf-submit {
  margin-top: 4px;
  min-height: 44px;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Poppins', system-ui, sans-serif;
  color: var(--nbf-accent-fg);
  background: var(--nbf-gradient);
  border: none;
  border-radius: var(--nbf-radius-pill);
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(138, 56, 245, 0.28);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.nbf-submit:hover {
  opacity: 0.88;
}

.nbf-link {
  background: none;
  border: none;
  color: var(--nbf-muted);
  font-size: 12.5px;
  cursor: pointer;
  text-decoration: underline;
  padding: 2px;
}

.nbf-more-btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--nbf-muted);
  font-size: 12px;
  font-weight: 400;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-align: center;
}

.nbf-more-btn:hover {
  color: var(--nbf-fg);
}

.nbf-more-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.nbf-error {
  min-height: 16px;
  font-size: 12.5px;
  color: var(--nbf-error);
  text-align: center;
}

.nbf-splash {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--nbf-bg);
  color: var(--nbf-muted);
  font-size: 14px;
  font-family: 'Poppins', system-ui, sans-serif;
  z-index: 9999;
}

.nbf-splash-dot {
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  background: currentColor;
  animation: nbf-pulse 1s ease-in-out infinite;
}

@keyframes nbf-pulse {
  0%, 100% { transform: scale(0.85); opacity: 0.45; }
  50% { transform: scale(1); opacity: 0.9; }
}

/* Clip Eva's inner bottom toolbar to the chat card's border-radius. */
.rounded-2xl.bg-card { overflow: hidden; }