/*
 * 1:1 translation of DesignTokens.swift (BYM enum)
 * and all SwiftUI view modifiers to CSS
 */

:root {
  /* BYM.accent = Color(red: 0.0, green: 0.651, blue: 0.318) → #00A651 */
  --accent: #00A651;
  /* BYM.carbonDark = Color(red: 0.090, green: 0.102, blue: 0.125) → #171A20 */
  --carbon-dark: #171A20;
  /* BYM.graphite = Color(red: 0.224, green: 0.235, blue: 0.255) → #393C41 */
  --graphite: #393C41;
  /* BYM.pewter = Color(red: 0.361, green: 0.369, blue: 0.384) → #5C5E62 */
  --pewter: #5C5E62;
  /* BYM.silverFog = Color(red: 0.557, green: 0.557, blue: 0.557) → #8E8E8E */
  --silver-fog: #8E8E8E;
  /* BYM.cloudGray = Color(red: 0.933, green: 0.933, blue: 0.933) → #EEEEEE */
  --cloud-gray: #EEEEEE;
  /* BYM.lightAsh = Color(red: 0.957, green: 0.957, blue: 0.957) → #F4F4F4 */
  --light-ash: #F4F4F4;
  /* BYM.white = Color.white */
  --white: #FFFFFF;
  /* BYM.radiusSmall = 4 */
  --radius-sm: 4px;
  /* BYM.radiusMedium = 8 */
  --radius-md: 8px;
  /* BYM.radiusLarge = 12 */
  --radius-lg: 12px;
  /* BYM.transitionDuration = 0.33 */
  --transition: 0.33s ease-in-out;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  /* .system(design: .default) → system font */
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--white);
  color: var(--graphite);
  overflow: hidden;
}

/* ===== Screen shell ===== */
.screen { display: none; height: 100%; flex-direction: column; }
.screen.active { display: flex; }

/* ===== Onboarding (OnboardingView.swift) ===== */

#onboarding {
  justify-content: center;
  align-items: center;
  padding: 32px; /* space32 */
  position: relative;
  background: var(--white);
}

/* displayFont(40, .medium) */
.onboard-title {
  font-size: 40px;
  font-weight: 500;
  color: var(--carbon-dark);
  margin-bottom: 8px; /* space8 */
}

/* textFont(14) .foregroundColor(pewter) */
.onboard-subtitle {
  font-size: 14px;
  font-weight: 400;
  color: var(--pewter);
  margin-bottom: 32px; /* space32 */
}

.input-group {
  width: 100%;
  max-width: 360px;
  margin-bottom: 12px;
}

/* .font(textFont(14)) .padding(.horizontal, 16) .frame(height: 48) .background(lightAsh) .cornerRadius(radiusSmall) */
#onboarding input[type="text"] {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 400;
  font-family: inherit;
  background: var(--light-ash);
  border: none;
  border-radius: var(--radius-sm);
  outline: none;
  color: var(--carbon-dark);
}
#onboarding input[type="text"]::placeholder { color: var(--silver-fog); }

/* textFont(13) .foregroundColor(.red) .padding(.horizontal, space4) */
.onboard-error {
  font-size: 13px;
  color: #E53935;
  margin-top: 8px;
  padding: 0 4px;
  min-height: 20px;
}

/* textFont(14, .medium) .frame(maxWidth: .infinity) .frame(height: 48) .foregroundColor(.white) .background(accent / accent.opacity(0.4)) .cornerRadius(radiusSmall) */
.btn-continue {
  width: 100%;
  max-width: 360px;
  height: 48px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background-color var(--transition);
}
.btn-continue:disabled { cursor: not-allowed; }
.btn-continue .spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Image("BYMLogo") .frame(height: 48) .padding(.bottom, space24) — onboarding footer */
.footer-logo {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  height: 40px;
  opacity: 1;
  pointer-events: none;
}

/* ===== Door Transition Overlay ===== */
/*
 * The overlay sits fixed on top of the chat screen.
 * The door-frame is a transparent window; box-shadow creates the black surround.
 * The chat screen is visible through the doorway opening.
 * Door panel swings open (hinged left, opens inward).
 * Then the frame scales up until the doorway fills the viewport.
 */

#transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
#transition-overlay.active {
  display: flex;
}

/* Perspective container for 3D door effect */
.door-perspective {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1200px;
}

/* The doorway opening — transparent center, massive box-shadow = black surround */
.door-frame {
  width: 120px;
  height: 220px;
  position: relative;
  transform-style: preserve-3d;
  box-shadow: 0 0 0 200vmax #000;
  will-change: transform;
}

/* Subtle door jamb edges for depth */
.door-jamb-left,
.door-jamb-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #222;
  z-index: 2;
}
.door-jamb-left { left: -3px; }
.door-jamb-right { right: -3px; }

/* The door panel — hinged on left, opens inward (away from viewer) */
.door-panel {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #1a1a1a 0%, #252525 100%);
  transform-origin: left center;
  z-index: 3;
  will-change: transform;
  /* Subtle inner shadow for depth */
  box-shadow: inset -2px 0 8px rgba(0,0,0,0.4);
}

/* Door handle detail */
.door-handle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background: #444;
  border-radius: 2px;
}

/* --- Animation keyframes --- */

/* Phase 1: Door cracks open slightly (0–0.6s) */
@keyframes doorCrack {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(-8deg); }
}

/* Phase 2: Door swings fully open inward (0.6s–1.6s) */
@keyframes doorSwingOpen {
  0%   { transform: rotateY(-8deg); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: rotateY(-105deg); opacity: 0; }
}

/* Phase 3: Camera pushes through doorway (1.2s–3.8s) */
/* Scale is set dynamically via CSS variable --zoom-scale */
@keyframes zoomThrough {
  0%   { transform: scale(1); }
  100% { transform: scale(var(--zoom-scale, 12)); }
}

/* Phase 4: Overlay fade out at the end */
@keyframes overlayFadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* Animation assignments when .animating is added */
#transition-overlay.animating .door-panel {
  animation:
    doorCrack 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards,
    doorSwingOpen 1.0s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards;
}

#transition-overlay.animating .door-frame {
  animation:
    zoomThrough 5s cubic-bezier(0.22, 1, 0.36, 1) 1.2s forwards;
}

#transition-overlay.animating {
  animation:
    overlayFadeOut 0.4s ease-out 6.0s forwards;
}

/* ===== Chat (ChatView.swift body: VStack(spacing: 0)) ===== */

#chat { position: relative; background: var(--white); }

/* -- header: HStack(spacing: 12) .padding(.horizontal, 20) .padding(.vertical, 12) .background(carbonDark) -- */
.chat-header {
  display: flex;
  align-items: center;
  gap: 12px; /* spacing: space12 */
  padding: 12px 20px; /* .padding(.vertical, 12) .padding(.horizontal, 20) */
  padding-top: max(12px, env(safe-area-inset-top));
  background: var(--carbon-dark);
  flex-shrink: 0;
}

.header-text { flex: 1; min-width: 0; }
.header-logo { height: 28px; opacity: 0.9; filter: brightness(0) invert(1); }

/* .foregroundColor(.white.opacity(0.7)) — icon buttons */
.header-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* -- messagesArea: ScrollView -- */
.messages-area {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* LazyVStack(spacing: 12) .padding(16) */
.messages-list {
  padding: 16px; /* space16 */
  display: flex;
  flex-direction: column;
  gap: 12px; /* space12 */
  min-height: 100%;
}

/* -- emptyState: VStack(spacing: 12) -- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px; /* spacing: space12 */
  padding-top: 24px;
  padding-bottom: 16px;
  justify-content: flex-start;
}

/* Image(systemName: "bubble.left.and.bubble.right") .font(.system(size: 32)) .foregroundColor(silverFog) */
.empty-icon {
  color: var(--silver-fog);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* textFont(16, .semibold) .foregroundColor(graphite) */
.empty-prompt {
  font-size: 16px;
  font-weight: 600;
  color: var(--graphite);
}

/* Suggestions VStack(spacing: 8) .padding(.horizontal, 32) .padding(.top, 8) */
.suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 8px; /* space8 */
  padding: 8px 32px 0;
  width: 100%;
  max-width: 50vw;
}
@media (max-width: 768px) {
  .suggestions-list {
    max-width: 100%;
    padding: 8px 16px 0;
  }
}

/* textFont(13) .foregroundColor(graphite) .frame(maxWidth: .infinity, alignment: .leading) .padding(.horizontal, 14) .padding(.vertical, 10) .background(lightAsh) .cornerRadius(radiusMedium) .overlay(RoundedRectangle(radiusMedium).stroke(cloudGray, 1)) */
.suggestion-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 400;
  font-family: inherit;
  color: var(--graphite);
  background: var(--light-ash);
  border: 1px solid var(--cloud-gray);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition);
}
.suggestion-btn:active { background: var(--cloud-gray); }

.more-btn {
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: var(--accent);
  cursor: pointer;
  padding: 4px 0;
  align-self: flex-end;
  transition: color var(--transition);
}

/* -- MessageBubble.swift -- */
/* HStack { if isUser { Spacer(minLength: 60) } ... if !isUser { Spacer(minLength: 60) } } */
.message { display: flex; }
.message.user { justify-content: flex-end; }
.message.assistant { justify-content: flex-start; }

/* .padding(.horizontal, 14) .padding(.vertical, 10) .cornerRadius(radiusLarge) */
.bubble {
  max-width: calc(100% - 60px); /* Spacer(minLength: 60) */
  padding: 10px 14px;
  border-radius: var(--radius-lg); /* radiusLarge = 12 */
  font-size: 14px; /* textFont(14) */
  font-weight: 400;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

/* isUser: .background(graphite) .foregroundColor(.white) */
.message.user .bubble {
  background: var(--graphite);
  color: var(--white);
}

/* !isUser: .background(lightAsh) .foregroundColor(carbonDark) .overlay(RoundedRectangle(radiusLarge).stroke(cloudGray, 1)) */
.message.assistant .bubble {
  background: var(--light-ash);
  color: var(--carbon-dark);
  border: 1px solid var(--cloud-gray);
}

/* "Thinking..." .font(textFont(13)) .italic() .foregroundColor(silverFog) */
.bubble.thinking {
  font-style: italic;
  color: var(--silver-fog);
  font-size: 13px;
}

/* -- inputArea: HStack(alignment: .bottom, spacing: 8) -- */
/* .padding(.leading, 14) .padding(.trailing, 6) .padding(.vertical, 6) */
/* .background(lightAsh) .overlay(RoundedRectangle(radiusLarge).stroke(cloudGray, 1)) .cornerRadius(radiusLarge) */
/* .padding(.horizontal, 16) .padding(.top, 8) */
.input-area {
  display: flex;
  align-items: flex-end;
  gap: 8px; /* spacing: space8 */
  margin: 8px 0 16px;
  padding: 6px 6px 6px 14px; /* .padding(.leading, 14) .padding(.trailing, 6) .padding(.vertical, 6) */
  background: var(--light-ash);
  border: 1px solid var(--cloud-gray);
  border-radius: var(--radius-lg); /* radiusLarge = 12 */
  flex-shrink: 0;
  cursor: text;
  width: calc(50vw - 64px);
  align-self: center;
}
@media (max-width: 768px) {
  .input-area {
    width: auto;
    margin: 8px 16px 8px;
    min-height: 56px;
  }
}

/* TextField .font(textFont(15)) .lineLimit(3...5) */
.input-area textarea {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15px; /* textFont(15) */
  font-weight: 400;
  font-family: inherit;
  color: var(--carbon-dark);
  resize: none;
  outline: none;
  min-height: 24px;
  max-height: 100px; /* ~5 lines */
  line-height: 1.4;
  padding: 4px 0;
}
.input-area textarea::placeholder { color: var(--silver-fog); }

/* HStack(spacing: 4) */
.input-buttons {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

/* .frame(width: 30, height: 30) .clipShape(Circle()) */
.btn-icon {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: opacity var(--transition);
}

.btn-mic {
  background: var(--graphite); /* #393C41 */
  color: var(--white);
}

/* paperplane.fill: .foregroundColor(.white) .background(accent) */
.btn-send {
  background: var(--accent);
  color: var(--white);
}
/* .background(accent.opacity(0.4)) when disabled */
.btn-send:disabled { opacity: 0.4; cursor: not-allowed; }

.chat-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  flex-shrink: 0;
  max-height: 120px;
}
.chat-footer img {
  height: 40px;
  opacity: 0.35;
  pointer-events: none;
}

/* ===== Catalog (catalogSheet) ===== */
/* VStack(spacing: 0) .background(white) */
.catalog-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--white);
  z-index: 100;
  flex-direction: column;
}
.catalog-overlay.active { display: flex; }

/* HStack .padding(.horizontal, 20) .padding(.top, 16) .padding(.bottom, 12) */
.catalog-header {
  display: flex;
  align-items: center;
  padding: 16px 20px 12px;
  padding-top: max(16px, env(safe-area-inset-top));
}
/* displayFont(17, .medium) .foregroundColor(carbonDark) */
.catalog-title {
  flex: 1;
  font-size: 17px;
  font-weight: 500;
  color: var(--carbon-dark);
}
/* xmark: .font(.system(size: 14, weight: .medium)) .foregroundColor(pewter) .frame(28x28) .background(lightAsh) .clipShape(Circle()) */
.btn-close {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: var(--light-ash);
  color: var(--pewter);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Divider().foregroundColor(cloudGray) */
.catalog-divider { height: 1px; background: var(--cloud-gray); }

/* ScrollView .padding(.horizontal, 20) .padding(.vertical, 16) */
.catalog-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px;
}

/* VStack(alignment: .leading, spacing: 20) */
.catalog-category { margin-bottom: 20px; }

/* textFont(11, .medium) .foregroundColor(pewter) .tracking(0.5) .padding(.horizontal, space4) */
.cat-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--pewter);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 4px;
  margin-bottom: 8px;
}

/* Same style as suggestion pills: VStack(spacing: 6) */
.catalog-question {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 400;
  font-family: inherit;
  color: var(--graphite);
  background: var(--light-ash);
  border: 1px solid var(--cloud-gray);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition);
}
.catalog-question:active { background: var(--cloud-gray); }

/* ===== Safe area ===== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .input-area { margin-bottom: max(16px, env(safe-area-inset-bottom)); }
  #onboarding .footer-logo { bottom: max(34px, env(safe-area-inset-bottom)); }
}