:root {
  color-scheme: dark;
  --background: #090B12;
  --foreground: #F4F5FF;
  --card: #151925;
  --card-foreground: #F4F5FF;
  --popover: #151925;
  --primary: #9CA8FF;
  --primary-foreground: #090B12;
  --secondary: #23283a;
  --secondary-foreground: #F4F5FF;
  --muted-surface: #1c2030;
  --muted-foreground: #C9CEDD;
  --accent-surface: #2c2945;
  --accent-foreground: #BC86FF;
  --destructive: #f09aa8;
  --input: #3a4055;
  --border: #34394b;
  --ring: #9CA8FF;
  --sidebar: #090B12;
  --sidebar-foreground: #F4F5FF;
  --sidebar-border: #2a2e40;
  --sidebar-accent: #23283a;
  --sidebar-accent-foreground: #F4F5FF;
  --sidebar-ring: #9CA8FF;
  --success: #9CA8FF;
  --warning: #BC86FF;
  --bg: var(--background);
  --sidebar-bg: var(--sidebar);
  --sidebar-text: var(--sidebar-foreground);
  --accent: var(--primary);
  --accent-soft: var(--accent-surface);
  --text: var(--foreground);
  --muted: var(--muted-foreground);
  --bubble-user: var(--secondary);
  --bubble-assistant: var(--card);
}

body { font-family: "Manrope", system-ui, sans-serif; background: var(--background); color: var(--foreground); }
a { color: var(--primary); }

/* Shared approved identity */
.brand-logo { display: block; height: auto; max-width: 100%; }
.logo-mark { width: 42px; height: 42px; padding: 0; border: 0; border-radius: 0; background: transparent; transform: none; object-fit: contain; }
.brand-text, .login-wordmark, .login-url, .hero-wordmark, .hero-url { display: none; }
.brand { gap: 10px; }
.public-brand .logo-mark { width: 42px; height: 42px; }

/* Living Core presence motion — interactive app shell only. The approved
 * artwork inside `.living-core` is never recolored, distorted, or replaced;
 * every state below is motion (scale, opacity, glow, rings) layered *around*
 * the unaltered image. The public marketing brand mark (`.public-brand`)
 * deliberately stays static — no added effects there. */
.living-core {
  position: relative;
  display: inline-grid;
  place-items: center;
  isolation: isolate;
}

.living-core::before,
.living-core::after {
  content: "";
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
}

.living-core[data-state="idle"] {
  animation: living-core-breathe 4.5s ease-in-out infinite;
}
.living-core[data-state="idle"]::before {
  opacity: 0.32;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 32%, transparent), transparent 70%);
  animation: living-core-glow 4.5s ease-in-out infinite;
}

.living-core[data-state="listening"] {
  animation: living-core-breathe 1.8s ease-in-out infinite;
}
.living-core[data-state="listening"]::before,
.living-core[data-state="listening"]::after {
  border: 1.5px solid color-mix(in srgb, var(--primary) 55%, transparent);
  animation: living-core-ripple 1.8s ease-out infinite;
}
.living-core[data-state="listening"]::after { animation-delay: 0.9s; }

.living-core[data-state="thinking"]::before {
  opacity: 0.5;
  background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--primary) 65%, transparent), transparent 62%);
  animation: living-core-orbit 2.2s linear infinite;
}

.living-core[data-state="speaking"] {
  animation: living-core-speak 0.85s ease-in-out infinite;
}
.living-core[data-state="speaking"]::before {
  opacity: 0.48;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 45%, transparent), transparent 70%);
  animation: living-core-glow 0.85s ease-in-out infinite;
}

@keyframes living-core-breathe {
  50% { transform: scale(1.035); }
}
@keyframes living-core-glow {
  50% { opacity: 0.75; transform: scale(1.12); }
}
@keyframes living-core-ripple {
  0% { transform: scale(0.75); opacity: 0.65; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes living-core-orbit {
  to { transform: rotate(360deg); }
}
@keyframes living-core-speak {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.05); }
  55% { transform: scale(0.985); }
  80% { transform: scale(1.03); }
}

/* Signed-out landing */
.landing-page { min-height: 100dvh; background: #090B12; overflow-x: hidden; }
.landing-hero {
  min-height: 100dvh;
  background: #090B12 url("brand/04-desktop-hero-backdrop.png") center center / cover no-repeat;
}
.landing-shell { min-height: 100dvh; display: flex; flex-direction: column; padding: clamp(24px, 4vw, 56px); }
.landing-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.landing-brand { display: flex; width: clamp(190px, 20vw, 270px); flex-direction: column; align-items: flex-start; color: #F4F5FF; text-decoration: none; }
.landing-brand img { display: block; width: 100%; height: auto; }
.landing-brand span { margin: 4px 0 0 clamp(51px, 4vw, 65px); color: #F4F5FF; font-size: clamp(12px, 1vw, 14px); font-weight: 600; letter-spacing: .02em; line-height: 1.35; text-shadow: 0 1px 14px rgba(9, 11, 18, .96); white-space: nowrap; }
.landing-nav { display: flex; align-items: center; gap: 24px; padding-top: 10px; }
.landing-nav a { color: #C9CEDD; font-size: 14px; font-weight: 600; text-decoration: none; }
.landing-nav a:hover, .landing-nav a:focus-visible { color: #F4F5FF; }
.landing-content { width: min(510px, 100%); margin: auto 0; padding: 64px 0 44px; }
.landing-content h1 { max-width: 470px; margin: 0; color: #F4F5FF; font-size: clamp(34px, 4.3vw, 60px); font-weight: 500; letter-spacing: -.045em; line-height: 1.08; }
.landing-content p { max-width: 470px; margin: 20px 0 0; color: #C9CEDD; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.65; }
.landing-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.brand-button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; border: 1px solid transparent; border-radius: 8px; padding: 11px 18px; font-size: 14px; font-weight: 700; text-decoration: none; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
.brand-button-primary { background: #9CA8FF; color: #090B12; }
.brand-button-primary:hover, .brand-button-primary:focus-visible { background: #BC86FF; color: #090B12; }
.brand-button-secondary { border-color: #555d79; background: rgba(9, 11, 18, .35); color: #F4F5FF; }
.brand-button-secondary:hover, .brand-button-secondary:focus-visible { border-color: #9CA8FF; background: #151925; }

/* Signed-out landing: approved scroll story */
.landing-story {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  padding: clamp(48px, 7vw, 104px);
  background-color: #090B12;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.landing-story::before {
  position: absolute;
  z-index: -1;
  inset: -1px 0 auto;
  height: clamp(90px, 15vw, 220px);
  background: linear-gradient(to bottom, #090B12 0%, rgba(9, 11, 18, .72) 28%, transparent 100%);
  content: "";
  pointer-events: none;
}
.landing-companionship {
  display: flex;
  align-items: center;
  background-image:
    linear-gradient(90deg, rgba(9, 11, 18, .91) 0%, rgba(9, 11, 18, .7) 31%, rgba(9, 11, 18, .08) 58%),
    url("brand/07-everyday-companionship.png");
}
.landing-story-panel {
  width: min(520px, 45vw);
  margin-top: 7vh;
  padding: clamp(24px, 3vw, 42px);
  border: 1px solid rgba(156, 168, 255, .18);
  border-radius: 18px;
  background: rgba(9, 11, 18, .56);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
  backdrop-filter: blur(12px);
}
.landing-eyebrow { margin: 0 0 16px; color: #9CA8FF; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.landing-story h2 { max-width: 650px; margin: 0; color: #F4F5FF; font-size: clamp(36px, 4.4vw, 66px); font-weight: 500; letter-spacing: -.045em; line-height: 1.06; }
.landing-story p:not(.landing-eyebrow, .landing-conversation-modes) { margin: 22px 0 0; color: #C9CEDD; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.7; }
.landing-story .landing-emphasis { color: #F4F5FF; font-weight: 700; }
.landing-intelligence {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-image:
    linear-gradient(180deg, rgba(9, 11, 18, .72) 0%, transparent 24%, transparent 72%, rgba(9, 11, 18, .84) 100%),
    url("brand/08-conversation-intelligence.png");
}
.landing-intelligence-copy { width: min(540px, 44vw); }
.landing-intelligence-copy p:not(.landing-eyebrow) { text-shadow: 0 2px 18px #090B12; }
.landing-conversation-modes { display: flex; align-self: flex-end; gap: clamp(24px, 5vw, 80px); margin: 0; color: #F4F5FF; font-size: clamp(32px, 5vw, 72px); font-weight: 500; letter-spacing: -.045em; line-height: 1; text-shadow: 0 2px 24px #090B12; }
.landing-conversation-modes span:not(:first-child)::before { margin-right: clamp(24px, 5vw, 80px); color: #9CA8FF; content: "·"; }

/* Public, account, and authenticated shells */
body.public-page { min-height: 100dvh; background: #090B12; }
.public-wrap { max-width: 900px; min-height: 100dvh; padding: 30px 24px 40px; }
.public-header, .public-footer { border-color: var(--border); }
.public-nav a, .public-footer, .public-footer a, .disclosure { color: #C9CEDD; }
.public-nav a:hover, .public-footer a:hover, .public-main a { color: #9CA8FF; }
.public-main { color: #C9CEDD; }
.public-main h1, .public-main h2 { color: #F4F5FF; font-weight: 600; }
.public-hero { padding: 32px 0 12px; }
.public-hero img { width: 104px; height: 104px; object-fit: contain; }

.login-wrap { background: #090B12; }
.login-card { background: #151925; border-color: #34394b; border-radius: 12px; box-shadow: 0 18px 48px rgba(0,0,0,.24); }
.login-logo img { width: 190px; height: auto; margin: 0 auto 16px; }
.login-card p, .login-field label, .login-hint, .login-disclosure, .login-links, .login-links a { color: #C9CEDD; }
.login-card input { background: #090B12; color: #F4F5FF; border-color: #3a4055; }
.login-card input:focus { border-color: #9CA8FF; box-shadow: 0 0 0 2px rgba(156,168,255,.18); }
.login-card button { background: #9CA8FF; color: #090B12; font-weight: 700; }
.login-card .login-linkbtn, .login-disclosure a, .login-consent a { color: #9CA8FF; background: transparent; }
.login-card .login-password-row .login-reveal { background: #151925; color: #C9CEDD; border-color: #3a4055; }

#app { min-height: 100dvh; height: 100dvh; }
#sidebar { background: #090B12; border-right: 1px solid #2a2e40; }
#chat-header, #composer { background: #151925; border-color: #34394b; }
#messages { background: #090B12; }
.msg.assistant .bubble, .sources, .message-actions { background: #151925; border-color: #34394b; }
.msg.user .bubble { background: #23283a; color: #F4F5FF; }
#message-input, #reasoning-select, #conversation-style-select, #model-select, #attach-btn, #mobile-menu-btn, .toolbar-btn, #mic-btn, #voice-mode-btn { background: #090B12; color: #F4F5FF; border-color: #3a4055; }
#send-btn, #new-chat-btn { background: #9CA8FF; color: #090B12; font-weight: 700; }
.settings-panel, .companion-setup-dialog { background: #151925; border-color: #34394b; }

@media (max-width: 700px) {
  .landing-hero { background-image: url("brand/05-mobile-hero-backdrop.png"); background-position: center center; }
  .landing-shell { padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
  .landing-header { align-items: flex-start; }
  .landing-brand { width: 170px; }
  .landing-brand span { margin-left: 42px; font-size: 11px; }
  .landing-nav { gap: 13px; padding-top: 5px; }
  .landing-nav a { font-size: 12px; }
  .landing-content { margin-top: auto; padding: 0 0 12px; }
  .landing-content h1 { max-width: 320px; font-size: clamp(32px, 10vw, 44px); }
  .landing-content p { max-width: 330px; font-size: 15px; line-height: 1.55; }
  .landing-actions { margin-top: 24px; }
  .brand-button { flex: 1 1 140px; }
  .landing-story { min-height: 100svh; padding: 52px 18px 40px; background-position: center; }
  .landing-companionship { align-items: flex-end; background-position: 52% center; background-image: linear-gradient(180deg, rgba(9, 11, 18, .12) 0%, rgba(9, 11, 18, .12) 36%, rgba(9, 11, 18, .94) 76%, #090B12 100%), url("brand/07-everyday-companionship.png"); }
  .landing-story-panel { width: 100%; margin: 0; padding: 22px; border-radius: 14px; background: rgba(9, 11, 18, .72); backdrop-filter: blur(8px); }
  .landing-story h2 { font-size: clamp(34px, 10vw, 46px); }
  .landing-story p:not(.landing-eyebrow, .landing-conversation-modes) { margin-top: 15px; font-size: 14px; line-height: 1.55; }
  .landing-intelligence { justify-content: space-between; background-position: center; }
  .landing-intelligence-copy { width: 100%; padding: 18px; border-radius: 14px; background: rgba(9, 11, 18, .58); backdrop-filter: blur(8px); }
  .landing-conversation-modes { align-self: stretch; justify-content: space-between; gap: 0; padding: 18px 4px; font-size: clamp(28px, 9vw, 42px); }
  .landing-conversation-modes span:not(:first-child)::before { margin-right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-button { transition: none; }
}