:root { --v3-ink:var(--text-primary); --v3-sage:var(--brand-primary); --v3-paper:var(--background-base); --v3-muted:var(--text-muted); --v3-line:var(--border-soft); --v3-panel:var(--background-muted); }
body { background:var(--v3-paper); }
#app-container { background:var(--v3-paper); }
.glass-header { background:color-mix(in srgb,var(--v3-paper) 93%,transparent); border-color:var(--v3-line); box-shadow:none; padding-left:4%; padding-right:4%; }
#chat-window { padding:26px 4% 32px; }
.v3-home { max-width:1320px; margin:auto; color:var(--v3-ink); }
.v3-home-topline { display:flex; justify-content:space-between; gap:20px; font-size:0.625rem; letter-spacing:.15em; text-transform:uppercase; color:var(--v3-muted); padding:0 0 30px; }
.v3-home-topline>span:last-child { letter-spacing:.02em; text-transform:none; display:flex; align-items:center; gap:8px; }
.v3-live-dot { width:6px; height:6px; background:var(--v3-sage); border-radius:50%; box-shadow:0 0 0 4px color-mix(in srgb,var(--v3-sage) 4%,transparent); animation:v3-breathe 3s ease-in-out infinite; }
.v3-hero { display:grid; grid-template-columns:1.22fr 1fr; gap:7%; align-items:center; }
.v3-eyebrow { font-size:0.625rem; font-weight:500; text-transform:uppercase; letter-spacing:.2em; color:var(--v3-sage); margin:0 0 20px; }
.v3-hero h1 {  font-size:clamp(36px,4vw,63px); font-weight:400; line-height:1.13; letter-spacing:-.045em; margin:0 0 22px; animation:v3-rise 800ms both; }
.v3-hero h1 em { font-weight:400; color:var(--v3-sage); }
.v3-intro { font-size:0.875rem; line-height:1.8; color:var(--v3-muted); max-width:440px; margin-bottom:26px; animation:v3-rise 800ms 100ms both; }
.v3-composer { border:1px solid var(--v3-line); background:var(--surface-base); padding:19px 20px 12px; border-radius:17px; box-shadow:0 6px 30px #304c3a05,0 1px 3px #304c3a05; animation:v3-rise 800ms 180ms both; transition:border-color .3s,box-shadow .3s; }
.v3-composer:focus-within { border-color:var(--v3-sage); box-shadow:0 0 0 4px color-mix(in srgb,var(--v3-sage) 6%,transparent),0 10px 30px #304c3a08; }
.v3-composer label { display:block; font-size:0.8125rem; font-weight:500; margin-bottom:10px; }
.v3-composer textarea { resize:vertical; width:100%; min-height:64px; max-height:160px; border:0; outline:none; background:transparent; color:var(--v3-ink); font-size:0.9375rem; line-height:1.6; padding:0; }
.v3-composer textarea::placeholder { color:var(--v3-muted); -webkit-text-fill-color:var(--v3-muted); }
.v3-composer-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:10px; border-top:1px solid var(--v3-line); }
.v3-composer-bottom>span { font-size:0.625rem; color:var(--v3-muted); }
.v3-composer-bottom button { background:var(--v3-ink); color:white; border-radius:9px; padding:10px 16px; font-size:0.75rem; display:flex; align-items:center; gap:15px; transition:background .2s,transform .2s; }
.v3-composer-bottom button:hover { background:var(--v3-sage); transform:translateY(-2px); }
.v3-input-hint { font-size:0.625rem; color:var(--v3-muted); margin:10px 0 18px; }
.v3-starters { display:flex; flex-wrap:wrap; gap:7px; animation:v3-rise 800ms 300ms both; }
.v3-starters button { font-size:0.6875rem; border:1px solid var(--v3-line); padding:8px 12px; border-radius:8px; color:var(--v3-muted); background:transparent; text-align:left; transition:transform .2s,background .2s,border-color .2s; }
.v3-starters button:hover { background:white; border-color:var(--v3-sage); transform:translateY(-2px); }
.v3-starters button span { display:inline-block; margin-left:7px; }
.v3-secondary-actions { display:flex; flex-wrap:wrap; gap:20px; margin-top:22px; }
.v3-secondary-actions button { color:var(--v3-ink); font-size:0.75rem; text-align:left; border:0; border-bottom:1px solid var(--v3-line); padding:0 0 5px; background:transparent; transition:color .2s; }
.v3-secondary-actions button:hover { color:var(--v3-sage); }
.v3-optional { display:block; font-size:0.5625rem; color:var(--v3-muted); margin-top:3px; }
.v3-hero-art { position:relative; min-height:560px; border-radius:130px 130px 18px 18px; overflow:hidden; background:radial-gradient(ellipse at 70% 20%,#f0e6d6,transparent 60%),linear-gradient(145deg,#e2e7da,#e7e9df 60%,#e1d8cb); animation:v3-reveal 1.2s 100ms both; padding:34px 30px 20px; display:flex; flex-direction:column; }
.v3-art-caption { display:flex; justify-content:space-between; font-size:0.5625rem; letter-spacing:.12em; text-transform:uppercase; color:var(--v3-muted); margin-top:20px; padding:0 12px; }
.v3-art-caption>span:last-child { font-size:1.125rem; }
.v3-face-art { position:relative; width:100%; max-width:380px; margin:0 auto; flex:1; display:flex; align-items:center; }
.v3-face-art svg { width:100%; color:var(--v3-sage); filter:drop-shadow(0 12px 20px #585c3f0a); animation:v3-float 9s ease-in-out infinite; }
.v3-face-point { animation:v3-breathe 4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.v3-face-point:nth-last-child(2) { animation-delay:1s; }
.v3-scan-line { position:absolute; width:80%; left:10%; top:35%; height:1px; background:linear-gradient(90deg,transparent,#96af91,transparent); box-shadow:0 4px 15px #7c9b7766; animation:v3-scan 8s ease-in-out infinite; }
.v3-floating-note { position:absolute; left:17px; top:58%; border:1px solid #ffffff80; background:#ffffffb5; backdrop-filter:blur(10px); border-radius:9px; padding:12px 15px; font-size:0.625rem; color:var(--v3-ink); box-shadow:0 8px 30px #5563480b; animation:v3-float 7s 1s ease-in-out infinite; }
.v3-floating-note>span { margin-right:8px; color:var(--v3-sage); }
.v3-art-bottom { display:flex; align-items:center; gap:13px; background:#ffffff70; border:1px solid #ffffff70; padding:15px; border-radius:12px; backdrop-filter:blur(10px); position:relative; }
.v3-art-bottom strong { font-size:0.75rem; font-weight:500; }
.v3-art-bottom p { font-size:0.625rem; color:var(--v3-muted); margin:4px 0 0; }
.v3-orb { width:44px; height:44px; flex-shrink:0; position:relative; display:grid; place-items:center; isolation:isolate; }
.v3-orb span { position:absolute; inset:2px; background:linear-gradient(135deg,#b9cbb2aa,#d8c9a9aa); border:1px solid #ffffffa0; border-radius:43% 57% 64% 36% / 40% 46% 54% 60%; animation:v3-orbit 13s linear infinite; }
.v3-orb span:nth-child(2) { transform:rotate(70deg); animation-direction:reverse; opacity:.7; }
.v3-orb span:nth-child(3) { inset:6px; animation-duration:9s; background:#d9e4d8aa; }
.v3-orb b { position:relative; z-index:1; font-size:1.375rem; color:var(--v3-sage); font-weight:400; }
.v3-capabilities { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; border-top:1px solid var(--v3-line); padding-top:25px; margin-top:45px; }
.v3-capabilities article { display:flex; gap:15px; animation:v3-rise 1s 350ms both; }
.v3-cap-number { font-family:Georgia,serif; font-size:0.75rem; color:var(--v3-muted); padding-top:3px; }
.v3-capabilities h2 { font-size:0.875rem!important; font-weight:500; margin:0 0 6px; }
.v3-capabilities p { color:var(--v3-muted); line-height:1.7; font-size:0.6875rem; margin:0; }
.v3-home-footer { display:flex; justify-content:space-between; gap:20px; margin:26px 0; font-size:0.5625rem; color:var(--v3-muted); }
.v3-home-footer>span:last-child { letter-spacing:.14em; }
.v3-care-canvas { display:none; }
.v3-chat-header { display:flex; align-items:center; gap:12px; padding:12px 4%; border-bottom:1px solid var(--v3-line); background:var(--v3-paper); flex-shrink:0; }
.v3-chat-header>button { font-size:1.25rem; color:var(--v3-sage); width:30px; flex-shrink:0; }
.v3-chat-header .v3-orb { width:36px; height:36px; }
.v3-chat-header strong { font-size:0.75rem; font-weight:500; color:var(--v3-ink); }
.v3-chat-header p { font-size:0.625rem; color:var(--v3-muted); margin:4px 0 0; }
.v3-chat-header .v3-chat-products { margin-left:auto; width:auto; font-size:0.6875rem; border:1px solid var(--v3-line); border-radius:8px; padding:8px 12px; }
body[data-v3-view="chat"] .v3-care-canvas { display:block; position:absolute; right:0; top:88px; bottom:0; width:320px; overflow-y:auto; border-left:1px solid var(--v3-line); padding:28px 25px; background:var(--v3-panel); color:var(--v3-ink); animation:v3-reveal .7s both; }
body[data-v3-view="chat"]:has(#v3-care-canvas) #bottom-panel { padding-left:4%; background:var(--v3-paper); }
.v3-canvas-heading { display:flex; justify-content:space-between; align-items:center; }
.v3-canvas-heading .v3-eyebrow { margin:0; }
.v3-canvas-intro {  font-size:1.625rem; line-height:1.4; letter-spacing:-.03em; margin:20px 0; }
.v3-canvas-presence { display:flex; align-items:center; gap:12px; padding:15px 0 23px; border-bottom:1px solid var(--v3-line); font-size:0.6875rem; color:var(--v3-muted); }
.v3-context { padding:22px 0; border-bottom:1px solid var(--v3-line); }
.v3-context h2,.v3-routine h2 { font-size:0.6875rem!important; font-weight:500; margin-bottom:12px; }
.v3-context p { font-size:0.75rem; line-height:1.8; color:var(--v3-muted); overflow-wrap:anywhere; max-height:160px; overflow:auto; }
.v3-routine { padding-top:24px; }
.v3-periods { display:flex; gap:5px; margin-bottom:15px; }
.v3-periods button { border:1px solid var(--v3-line); padding:5px 8px; border-radius:6px; font-size:0.625rem; }
.v3-periods button[aria-pressed="true"] { background:var(--v3-ink); color:white; border-color:var(--v3-ink); }
.v3-routine ol { list-style:none; margin:0; padding:0; }
.v3-routine li { display:flex; gap:12px; padding:16px 0; border-bottom:1px solid var(--v3-line); animation:v3-rise .6s both; animation-delay:calc(var(--v3-order,0) * 90ms); }
.v3-step-num { font-family:Georgia,serif; color:var(--v3-muted); font-size:0.75rem; }
.v3-routine li strong { font-size:0.75rem; font-weight:500; }
.v3-routine li p { font-size:0.6875rem; color:var(--v3-muted); line-height:1.7; margin:7px 0; }
.v3-routine li button { color:var(--v3-sage); font-size:0.625rem; text-decoration:underline; text-underline-offset:3px; }
.v3-empty-routine { border:1px dashed var(--v3-line); border-radius:10px; padding:22px 16px; color:var(--v3-muted); font-size:0.6875rem; line-height:1.7; }
.v3-save { width:100%; border:1px solid var(--v3-line); border-radius:8px; padding:10px; font-size:0.6875rem; margin-top:18px; transition:background .2s; }
.v3-save:hover { background:var(--v3-panel); }
.v3-canvas-disclaimer { font-size:0.5625rem; line-height:1.6; color:var(--v3-muted); padding-top:28px; }
body[data-v3-view="chat"] .ai-bubble { background:var(--surface-base); border:1px solid var(--v3-line); border-radius:0 18px 18px 18px; box-shadow:0 4px 18px #304c3a03; }
body[data-v3-view="chat"] .human-bubble { background:var(--v3-panel); border-color:var(--v3-line); color:var(--v3-ink); border-radius:18px 18px 0 18px; }
body[data-v3-view="chat"] #input-wrapper { border-color:var(--v3-line); background:var(--surface-base); border-radius:16px; }
body[data-v3-view="chat"] #chat-input { color:var(--v3-ink); }
.v3-preview-note { padding:10px 14px; border:1px solid #d4d7bf; border-radius:8px; background:#f0f1e4; color:#616848; font-size:0.625rem; margin-bottom:18px; }
.v3-preview-note p { margin:4px 0 0; line-height:1.6; }
button:focus-visible,a:focus-visible { outline:2px solid var(--v3-sage); outline-offset:4px; }
@keyframes v3-rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes v3-reveal { from { opacity:0; transform:translateX(14px); } to { opacity:1; transform:translateX(0); } }
@keyframes v3-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@keyframes v3-orbit { to { transform:rotate(360deg); } }
@keyframes v3-breathe { 0%,100% { opacity:.6; } 50% { opacity:1; } }
@keyframes v3-scan { 0%,100% { top:32%; opacity:0; } 15%,85% { opacity:.65; } 50% { top:69%; } }
html.dark { --v3-sage:color-mix(in srgb,var(--brand-primary) 50%,var(--text-primary)); }
@media(min-width:1600px) { .v3-hero-art { min-height:620px; } }
@media(max-width:1050px) {
  .v3-hero { gap:5%; grid-template-columns:1.2fr 1fr; }
  .v3-hero-art { min-height:510px; padding:25px 18px 18px; border-radius:100px 100px 16px 16px; }
  body[data-v3-view="chat"] .v3-care-canvas { width:270px; padding:25px 18px; }
  .v3-home-topline { padding-bottom:25px; }
}
@media(max-width:760px) {
  #chat-window { padding:20px 6% 24px; }
  .v3-home-topline { font-size:0.5rem; gap:10px; padding-bottom:26px; }
  .v3-home-topline>span:first-child { max-width:58%; }
  .v3-hero { grid-template-columns:1fr; gap:32px; }
  .v3-hero-copy { max-width:550px; margin:auto; width:100%; }
  .v3-hero h1 { font-size:clamp(34px,8.7vw,56px); }
  .v3-eyebrow { font-size:0.5625rem; margin-bottom:15px; }
  .v3-intro { font-size:0.8125rem; margin-bottom:22px; }
  .v3-composer { padding:16px 16px 12px; }
  .v3-composer textarea { font-size:1.0rem; }
  .v3-hero-art { min-height:0; max-width:550px; width:100%; margin:auto; border-radius:90px 90px 14px 14px; padding:25px 24px 18px; }
  .v3-face-art { height:280px; max-width:280px; flex:none; }
  .v3-face-art svg { height:310px; }
  .v3-art-caption { margin-top:10px; }
  .v3-floating-note { top:50%; left:20px; }
  .v3-capabilities { grid-template-columns:1fr; gap:22px; margin-top:30px; padding-top:25px; }
  .v3-capabilities h2 { font-size:0.875rem!important; }
  .v3-capabilities p { font-size:0.75rem; }
  .v3-home-footer { flex-direction:column; gap:8px; }
  body[data-v3-view="chat"]:has(#v3-care-canvas) #chat-window { padding:22px 5%; }
  body[data-v3-view="chat"]:has(#v3-care-canvas) #bottom-panel { padding-right:5%; padding-left:5%; padding-bottom:max(12px,env(safe-area-inset-bottom)); }
  body[data-v3-view="chat"] .v3-care-canvas { position:relative; top:auto; bottom:auto; width:100%; max-height:32dvh; flex-shrink:0; border-left:0; border-top:1px solid var(--v3-line); padding:15px 5%; order:6; }
  body[data-v3-view="chat"] .v3-care-canvas:not(:has(.v3-routine li)) { display:none; }
  .v3-care-canvas .v3-canvas-intro,.v3-care-canvas .v3-canvas-presence,.v3-care-canvas .v3-context,.v3-care-canvas .v3-canvas-disclaimer { display:none; }
  .v3-routine { padding-top:12px; }
  .v3-routine li { padding:10px 0; }
  .v3-secondary-actions { gap:20px; }
  .v3-chat-header { padding:10px 5%; gap:8px; }
  .v3-chat-header .v3-chat-products { max-width:75px; font-size:0.625rem; padding:7px; }
  .v3-chat-header p { font-size:0.5rem; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

html[data-beauty-preview] [data-workspace-logo]{height:28px!important;width:auto!important;max-width:170px!important;}

/* V3's conversation, companion and evolving care controls. */
.v3-hero-copy,.v3-home,.v3-hero,.v3-care-canvas { min-width:0; }
.v3-hero-copy { overflow-wrap:anywhere; }
.v3-hero h1 { font-family:inherit; }
.v3-hero-art { background:radial-gradient(ellipse at 70% 20%,var(--brand-primary-light),transparent 60%),linear-gradient(145deg,var(--background-muted),var(--background-base)); }
.v3-face-point { fill:var(--v3-sage); }
.v3-orb span { background:color-mix(in srgb,var(--v3-sage) 28%,var(--v3-panel)); }
.v3-orb span:nth-child(3) { background:var(--brand-primary-light); }
body[data-v3-layout="focused"] .v3-hero,body[data-v3-visual="none"] .v3-hero { grid-template-columns:minmax(0,1fr); }
body[data-v3-layout="focused"] .v3-hero-copy,body[data-v3-visual="none"] .v3-hero-copy { max-width:680px;width:100%;margin:auto; }
body[data-v3-layout="focused"] .v3-hero-art { min-height:240px;max-width:680px;width:100%;margin:auto;border-radius:24px; }
body[data-v3-layout="focused"] .v3-face-art { max-height:220px; }
body[data-v3-visual="ambient"] .v3-face-art { justify-content:center; }
body[data-v3-visual="ambient"] .v3-face-art>svg,body[data-v3-visual="ambient"] .v3-scan-line { display:none; }
.v3-ambient-orb { width:210px;height:210px; }
.v3-ambient-orb b { font-size:64px; }
body[data-v3-spacing="compact"] #chat-window { padding-top:16px; }
body[data-v3-spacing="compact"] .v3-hero { gap:24px; }
body[data-v3-spacing="compact"] .v3-hero-art { min-height:400px; }
body[data-v3-spacing="compact"] .v3-capabilities { margin-top:24px; }
body[data-v3-spacing="spacious"] #chat-window { padding-top:40px; }
body[data-v3-spacing="spacious"] .v3-capabilities { margin-top:64px; }
body[data-v3-canvas="routine-only"] .v3-care-canvas :is(.v3-canvas-intro,.v3-canvas-presence,.v3-context,.v3-canvas-disclaimer) { display:none; }
body[data-v3-routine="cards"] .v3-routine li { border:1px solid var(--v3-line);border-radius:14px;padding:14px;margin:10px 0;background:var(--surface-base); }
.v3-chat-header .v3-chat-photo { width:auto;flex-shrink:1;margin-left:auto;font-size:.65rem;border:1px solid var(--v3-line);border-radius:8px;padding:8px;max-width:110px; }
.v3-chat-photo+.v3-chat-products { margin-left:0; }
body[data-v3-motion="subtle"] :is(.v3-face-art svg,.v3-face-point,.v3-scan-line,.v3-orb span,.v3-floating-note,.v3-live-dot) { animation:none; }
body[data-v3-motion="off"] *,body[data-v3-motion="off"] *::before,body[data-v3-motion="off"] *::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; }
.v3-photo-backdrop { position:fixed;inset:0;background:#0008;z-index:80;display:flex;align-items:center;justify-content:center;padding:16px; }
.v3-photo-dialog { width:min(100%,540px);max-height:90dvh;overflow:auto;border:1px solid var(--v3-line);border-radius:22px;background:var(--v3-paper);color:var(--v3-ink);padding:24px;box-shadow:0 20px 70px #0003; }
.v3-photo-top { display:flex;justify-content:space-between;gap:16px;align-items:start; }
.v3-photo-top button { min-width:32px;min-height:32px;font-size:1.5rem; }
.v3-photo-dialog h2 { font-size:1.4rem!important;line-height:1.3; }
.v3-photo-dialog p { font-size:.8rem;line-height:1.7;margin:14px 0;color:var(--v3-muted); }
.v3-photo-image,.v3-photo-dialog video { display:block;width:100%;height:220px;object-fit:contain;border-radius:12px;background:var(--v3-panel);margin:12px 0; }
.v3-photo-actions { display:flex;flex-wrap:wrap;gap:8px;margin:16px 0; }
.v3-photo-button { display:inline-flex;gap:8px;align-items:center;border:1px solid var(--v3-sage);color:var(--text-inverse);background:var(--v3-sage);padding:10px 14px;border-radius:10px;font-size:.8rem;cursor:pointer; }
.v3-photo-button input { width:100%;max-width:190px;font-size:.7rem; }
.v3-photo-button:disabled { opacity:.5;cursor:default; }
.v3-photo-consent,.v3-photo-concern { display:flex;align-items:start;gap:10px;font-size:.8rem;line-height:1.6;margin:10px 0; }
.v3-photo-consent input,.v3-photo-concern input { margin-top:5px;accent-color:var(--v3-sage); }
.v3-photo-field { display:block;font-size:.8rem;margin:14px 0; }
.v3-photo-field select { display:block;width:100%;margin-top:6px;border:1px solid var(--v3-line);border-radius:10px;padding:10px;background:var(--surface-base);color:var(--v3-ink); }
.v3-photo-back { display:block;margin-top:16px;font-size:.8rem;text-decoration:underline;text-underline-offset:4px; }
#v3-photo-error { color:var(--text-primary); }
@media(max-width:760px) {
 .v3-chat-header .v3-chat-photo { max-width:74px;padding:6px;font-size:.55rem; }
 body[data-v3-spacing="compact"] .v3-hero-art { min-height:0; }
 body[data-v3-layout="focused"] .v3-hero-art { min-height:0; }
 .v3-photo-dialog { padding:18px; }
}
/* Reserve actual layout width so the composer cannot cover canvas actions. */
body[data-v3-view="chat"]:has(#v3-care-canvas) :is(.v3-chat-header,#chat-window,#bottom-panel) { width:calc(100% - 320px);padding-right:4%; }
@media(min-width:761px) and (max-width:1050px) { body[data-v3-view="chat"]:has(#v3-care-canvas) :is(.v3-chat-header,#chat-window,#bottom-panel) { width:calc(100% - 270px);padding-right:3%; } }
@media(max-width:760px) { body[data-v3-view="chat"]:has(#v3-care-canvas) :is(.v3-chat-header,#chat-window,#bottom-panel) { width:100%;padding-right:5%; } }