/**
 * AmiCove layout shell — unified cream/beige brand background
 * Removes abrupt white blocks across auth, passcode, and gate overlays.
 */

:root {
  --layout-cream: #F7F5F2;
  --layout-cream-deep: #F0EBE3;
  --layout-cream-surface: #EDE6DC;
  --layout-cream-glass: rgba(245, 239, 230, 0.92);
}

html,
body,
html.light-mode body.ambient-bg,
.ambient-bg {
  background: var(--layout-cream) !important;
}

/* Age gate removed — keep selector for cached HTML; never display */
#age-gate-overlay {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Root UI layers — default hidden until switchUIState() (JS uses setProperty + important) */
#login-screen,
#onboarding-flow,
#chat-ui {
  display: none !important;
}

/* Auth overlay visibility is controlled by switchUIState on #login-screen. */
html[data-startup-gate="auth"] #login-screen {
  display: flex !important;
  visibility: visible !important;
}

/* Login screen — fixed full-bleed, mutually exclusive with chat/onboarding */
#login-screen {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  overflow-y: auto;
  background: linear-gradient(
    180deg,
    var(--layout-cream) 0%,
    var(--layout-cream-deep) 48%,
    var(--layout-cream-surface) 100%
  );
}

#login-screen #auth-overlay {
  position: relative;
  inset: auto;
  flex: 1;
  min-height: 100%;
  z-index: auto;
}

/* Chat shell — shown only in STATE_CHAT */
#chat-ui {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100dvh;
}

#chat-ui #app-phone-frame {
  flex: 1;
  width: 100%;
}

/* Softer ambient layers — less white hotspot in the middle */
.ambient-bg::before {
  background:
    radial-gradient(ellipse 100% 65% at 50% 12%, rgba(196, 164, 132, 0.2) 0%, transparent 58%),
    radial-gradient(ellipse 80% 50% at 82% 88%, rgba(196, 164, 132, 0.12) 0%, transparent 52%),
    linear-gradient(180deg, var(--layout-cream) 0%, var(--layout-cream-deep) 55%, var(--layout-cream-surface) 100%) !important;
}

.ambient-bg::after {
  opacity: 0.18 !important;
  background:
    radial-gradient(circle at 24% 28%, rgba(196, 164, 132, 0.14) 0%, transparent 30%),
    radial-gradient(circle at 76% 72%, rgba(196, 164, 132, 0.1) 0%, transparent 32%) !important;
}

/* Auth gate — full-bleed cream, glass card instead of white slab */
html[data-theme="light"] #auth-overlay,
html.light-mode #auth-overlay,
#auth-overlay {
  background: linear-gradient(
    180deg,
    var(--layout-cream) 0%,
    var(--layout-cream-deep) 48%,
    var(--layout-cream-surface) 100%
  ) !important;
}

html[data-theme="light"] #auth-overlay .auth-card,
html.light-mode #auth-overlay .auth-card,
#auth-overlay .auth-card {
  background: var(--layout-cream-glass) !important;
  border-color: rgba(92, 75, 64, 0.14) !important;
  box-shadow: 0 10px 36px rgba(92, 75, 64, 0.07) !important;
}

/* Passcode unlock — unified cream canvas, white circular numpad buttons */
.lock-overlay-screen,
#lock-overlay.lock-overlay-screen {
  background: var(--layout-cream) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#lock-overlay .lock-phone-frame__shell,
#lock-overlay .lock-phone-frame__screen {
  background: linear-gradient(
    180deg,
    var(--layout-cream) 0%,
    var(--layout-cream-deep) 55%,
    var(--layout-cream-surface) 100%
  ) !important;
}

#lock-overlay .lock-card,
html[data-theme="light"] #lock-overlay .lock-card,
html.light-mode #lock-overlay .lock-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#lock-overlay .numpad-key,
.lock-numpad .numpad-key {
  background: #ffffff !important;
  border: 1px solid rgba(92, 75, 64, 0.08) !important;
  color: var(--ami-primary, #5C4B40) !important;
  box-shadow:
    0 2px 8px rgba(92, 75, 64, 0.08),
    0 1px 2px rgba(92, 75, 64, 0.05) !important;
}

#lock-overlay .numpad-key:active,
#lock-overlay .numpad-key.is-pressed,
.lock-numpad .numpad-key:active,
.lock-numpad .numpad-key.is-pressed {
  background: #ffffff !important;
  box-shadow: inset 0 2px 5px rgba(92, 75, 64, 0.14) !important;
}

#lock-overlay .numpad-key--del,
.lock-numpad .numpad-key--del {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme="light"] #lock-overlay .numpad-key,
html.light-mode #lock-overlay .numpad-key {
  background: #ffffff !important;
  border-color: rgba(92, 75, 64, 0.08) !important;
  color: var(--ami-primary) !important;
}

html[data-theme="light"] #lock-overlay .numpad-key[data-key="del"],
html.light-mode #lock-overlay .numpad-key[data-key="del"] {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html.pwa-standalone #lock-overlay .lock-phone-frame,
html.pwa-standalone #lock-overlay .lock-phone-frame__shell,
html.pwa-standalone #lock-overlay .lock-phone-frame__screen {
  background: var(--layout-cream) !important;
}

/* Onboarding flow — full-screen, centered steps including passcode */
#onboarding-flow,
.onboarding-flow {
  position: fixed;
  inset: 0;
  z-index: 90;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0 20px;
  box-sizing: border-box;
  overflow-y: auto;
  background: linear-gradient(180deg, #F7F5F2 0%, #F0EBE3 55%, #EDE6DC 100%);
}

.onboarding-flow.hidden {
  display: none !important;
}

.onboarding-flow__card {
  width: min(100%, 380px);
  margin: 0 auto;
  padding: 28px 22px;
  border-radius: 24px;
  background: rgba(245, 239, 230, 0.94);
  border: 1px solid rgba(92, 75, 64, 0.14);
  box-shadow: 0 10px 36px rgba(92, 75, 64, 0.08);
}

.passcode-container,
[data-onboarding-step="passcode"] {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  text-align: center;
  background: transparent;
  border: none;
}

.passcode-container .onboarding-flow__input,
.passcode-container .onboarding-flow__input--pin {
  margin-left: auto;
  margin-right: auto;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(92, 75, 64, 0.16);
}

/* Lock passcode overlay — centered, unified cream (no color banding) */
#lock-overlay.lock-overlay-screen:not(.hidden) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--layout-cream) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#lock-overlay .lock-phone-frame {
  width: min(390px, 100%);
  margin: 0 auto;
}

#lock-overlay .passcode-container {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  text-align: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

@media (max-width: 768px) {
  #lock-overlay.lock-overlay-screen:not(.hidden) {
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  #lock-overlay .lock-phone-frame {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100dvh !important;
    margin: 0 auto !important;
  }

  #lock-overlay .lock-phone-frame__shell,
  #lock-overlay .lock-phone-frame__screen {
    width: 100% !important;
    background: var(--layout-cream) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  #lock-overlay .lock-phone-frame__screen {
    background: linear-gradient(
      180deg,
      var(--layout-cream) 0%,
      var(--layout-cream-deep) 55%,
      var(--layout-cream-surface) 100%
    ) !important;
  }
}

.onboarding-flow__eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(92, 75, 64, 0.55);
}

.onboarding-flow__title {
  margin: 0 0 12px;
  font-size: 1.25rem;
  font-weight: 500;
  color: #5C4B40;
}

.onboarding-flow__lead {
  margin: 0 0 16px;
  font-size: 0.92rem;
  color: rgba(92, 75, 64, 0.72);
  line-height: 1.45;
}

.onboarding-flow__label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85rem;
  color: rgba(92, 75, 64, 0.7);
}

.onboarding-flow__input {
  width: 100%;
  height: 44px;
  margin-bottom: 14px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(92, 75, 64, 0.16);
  background: rgba(255, 255, 255, 0.55);
  color: #5C4B40;
  font-size: 1rem;
}

.onboarding-flow__input--pin {
  letter-spacing: 0.35em;
  text-align: center;
  font-size: 1.25rem;
}

.onboarding-flow__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 16px;
  font-size: 0.9rem;
  color: #5C4B40;
}

.onboarding-flow__btn {
  width: 100%;
  height: 44px;
  border: none;
  border-radius: 12px;
  background: #5C4B40;
  color: #F7F5F2;
  font-size: 0.95rem;
  cursor: pointer;
}

.onboarding-flow__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.onboarding-flow__btn--ghost {
  background: transparent;
  border: 1px solid rgba(92, 75, 64, 0.22);
  color: #5C4B40;
  margin-bottom: 14px;
}

.onboarding-flow__recovery-key {
  margin: 0 auto 14px;
  padding: 14px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(92, 75, 64, 0.28);
  background: rgba(255, 255, 255, 0.45);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  line-height: 1.45;
  word-break: break-all;
  text-align: center;
  color: #5C4B40;
}

.onboarding-flow__error {
  margin: 0 0 12px;
  color: #a33;
  font-size: 0.85rem;
}

.onboarding-flow__error.hidden {
  display: none !important;
}

.onboarding-flow__step.hidden {
  display: none !important;
}