:root{--color-primary: #6bcbb0;--color-primary-light: #8ad7c1;--color-primary-dark: #59b49a;--color-bg-start: #e8f9f3;--color-bg-end: #d8f3ff;--color-bg-main: #dff6f0;--color-bg-header: #b3e8e5;--color-bg-card: #e0f3f1;--color-bg-canvas: #beeaf5;--color-text: #1f2d3d;--color-text-muted: #4a6b6a;--color-text-secondary: #61706a;--color-border: #b3e8e5;--color-border-light: #c2e7e3;--color-error-bg: #fde8e8;--color-error-border: #f5a5a5;--color-error-text: #8b2020;--color-success-bg: #e4f7e4;--color-success-border: #a5d6a5;--color-success-text: #2e5c2e;--color-plant-dark: #365a3e;--color-plant-progress-start: #66bb6a;--color-plant-progress-end: #43a047;--shadow-sm: 0 2px 8px rgba(31, 45, 61, .08);--shadow-md: 0 4px 12px rgba(31, 45, 61, .06);--shadow-lg: 0 8px 24px rgba(31, 45, 61, .35);--shadow-btn: 0 4px 12px rgba(138, 215, 193, .35);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 20px;--radius-full: 999px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 24px;--space-2xl: 48px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}.app{display:flex;flex-direction:column;background:linear-gradient(135deg,var(--color-bg-start) 0%,var(--color-bg-end) 100%);color:var(--color-text);height:100vh;margin:0;background-size:200% 200%;animation:softShift 10s ease-in-out infinite}.app-header{display:flex;align-items:center;justify-content:space-between;padding:10px var(--space-lg);border-bottom:1px solid var(--color-border-light);background:var(--color-bg-header);flex-wrap:wrap}.header-text{display:flex;flex-direction:column;gap:2px}.brand{font-weight:800;letter-spacing:.2px;color:var(--color-text)}.sub{color:var(--color-text);font-size:14px}.back-link{font-size:20px;text-decoration:none;color:var(--color-text);padding:var(--space-xs) var(--space-md) var(--space-xs) var(--space-xs);margin-right:var(--space-sm)}.back-link:hover{color:var(--color-plant-dark)}.profile-btn{margin-left:auto;background:linear-gradient(135deg,var(--color-primary-light),var(--color-primary));color:var(--color-text);border:none;padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-full);font-weight:600;letter-spacing:.2px;cursor:pointer;box-shadow:var(--shadow-btn);transition:transform .15s ease,box-shadow .15s ease}.profile-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px #6bcbb066}.profile-btn:active{transform:translateY(0);box-shadow:0 3px 10px #6bcbb052}.main{flex:1;display:grid;grid-template-columns:50% 50%;overflow:hidden;gap:var(--space-md);padding:var(--space-md);background:var(--color-bg-main)}.call-canvas{position:relative;width:100%;flex:3;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-bg-canvas);box-shadow:var(--shadow-sm)}.bot-tile{position:absolute;inset:0;z-index:1}.bot-video,.bot-fallback{width:100%;height:100%;object-fit:cover}.bot-fallback{display:grid;place-items:center;background:radial-gradient(1200px 800px at 20% 10%,#c4e7e2 0%,#a1d9e8 40%,var(--color-bg-canvas) 100%)}.bot-avatar{width:140px;height:140px;border-radius:var(--radius-full);border:3px solid rgba(31,45,61,.25);background:conic-gradient(from 180deg,var(--color-primary-light),var(--color-primary),#49f,var(--color-primary),var(--color-primary-light));filter:blur(.3px) saturate(1.1)}.bot-avatar-large{width:400px;height:auto;object-fit:contain;display:block;margin:0 auto}.pip-tile{position:absolute;right:14px;bottom:14px;width:260px;aspect-ratio:16/10;border-radius:var(--radius-lg);overflow:hidden;border:1px solid rgba(31,45,61,.18);box-shadow:var(--shadow-lg);z-index:2}@media (max-width: 480px){.pip-tile{width:180px}}.pip-video{width:100%;height:100%;object-fit:cover;background:var(--color-bg-canvas)}.caption{position:absolute;left:50%;transform:translate(-50%);min-width:40%;max-width:80%;background:#c6f3edbf;color:var(--color-text);padding:6px 10px;border-radius:var(--radius-md);font-size:16px;line-height:1.35;letter-spacing:.1px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);white-space:pre-wrap;word-wrap:break-word;z-index:3;transition:opacity .2s ease,transform .2s ease}.caption.user{display:none}.caption.bot{bottom:64px;animation:fadeIn .25s ease}.caption .cursor{margin-left:2px;opacity:.8}.caption .ghost{opacity:0}.thinking-indicator{position:absolute;bottom:80px;left:50%;transform:translate(-50%);display:flex;gap:6px;padding:var(--space-sm) var(--space-lg);background:#c6f3edbf;border-radius:var(--radius-md);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:3}.thinking-dot{width:8px;height:8px;border-radius:50%;background:var(--color-text-muted);animation:thinkingBounce 1.4s ease-in-out infinite}.thinking-dot:nth-child(2){animation-delay:.2s}.thinking-dot:nth-child(3){animation-delay:.4s}.controls{position:absolute;left:50%;transform:translate(-50%);bottom:14px;display:flex;gap:10px;z-index:4}.btn{background:var(--color-primary-light);color:var(--color-text);padding:10px 14px;border:1px solid var(--color-primary);border-radius:var(--radius-md);cursor:pointer;transition:background .3s ease,border-color .3s ease}.btn:hover,.btn.active{background:var(--color-primary);border-color:var(--color-primary-dark)}.profile-overlay{position:fixed;inset:0;background:#0c162b4d;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:100;padding:var(--space-xl)}.profile-panel{position:relative;width:min(480px,95vw);background:var(--color-bg-main);border-radius:var(--radius-2xl);padding:28px;box-shadow:0 20px 45px #1f2d3d29;display:flex;flex-direction:column;gap:var(--space-xl);color:var(--color-text)}.profile-close{position:absolute;top:var(--space-lg);right:var(--space-lg);width:32px;height:32px;border-radius:var(--radius-full);border:none;background:#c6f3ede6;color:var(--color-text);font-size:20px;cursor:pointer;display:grid;place-items:center}.profile-close:hover{background:#a8e8da}.profile-identity{display:flex;align-items:center;gap:18px}.profile-avatar{width:100px;height:100px;flex-shrink:0}.profile-meta{display:flex;flex-direction:column;gap:6px}.profile-name-input{font-size:22px;font-weight:700;border:none;background:transparent;border-bottom:2px solid rgba(138,215,193,.4);padding:var(--space-xs) 0;max-width:220px;color:var(--color-text)}.profile-name-input:focus{outline:none;border-bottom-color:var(--color-primary)}.profile-subtitle{color:var(--color-text-muted);font-size:14px;letter-spacing:.4px;text-transform:uppercase}.profile-progress{display:flex;flex-direction:column;gap:var(--space-lg)}.plant-wrapper{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm)}.plant-graphic{width:100%;max-width:260px}.plant-stage{font-weight:600;color:var(--color-plant-dark)}.plant-progress-bar{width:80%;max-width:280px;height:8px;border-radius:var(--radius-full);background:#d0f0e8;overflow:hidden}.plant-progress-fill{height:100%;border-radius:inherit;background:linear-gradient(135deg,var(--color-plant-progress-start),var(--color-plant-progress-end))}.progress-stats{display:flex;flex-direction:column;gap:var(--space-xs);text-align:center}.progress-primary{font-weight:600;font-size:18px;color:#223228}.progress-secondary{color:var(--color-text-secondary);font-size:14px}@media (max-width: 520px){.profile-panel{padding:22px}.profile-identity{flex-direction:column;align-items:center;text-align:center}.profile-name-input{max-width:100%;text-align:center}.profile-btn{margin-top:var(--space-sm)}}.story{display:flex;flex-direction:column;flex:1;border-radius:var(--radius-lg);background:var(--color-bg-main);border:1px solid var(--color-border);color:var(--color-text);overflow:hidden;overflow-y:auto}.story-header{font-weight:700;padding:var(--space-md) var(--space-md) var(--space-xs) var(--space-md);color:var(--color-text)}.story-sub{color:var(--color-text-muted);font-size:13px;padding:0 var(--space-md) var(--space-sm) var(--space-md);border-bottom:1px solid var(--color-border)}.story-list{list-style:none;margin:0;padding:var(--space-md);overflow:auto;display:grid;gap:10px}.story-card{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-sm);background:var(--color-bg-card);display:grid;grid-template-columns:72px 1fr;gap:10px;align-items:center;color:var(--color-text)}.story-image{width:72px;height:72px;border-radius:var(--radius-sm);background:#c9e7e2}.story-image.placeholder{background:repeating-linear-gradient(135deg,#d1eee7,#d1eee7 8px,#e3f6f1 8px 16px)}.story-text{font-size:14px;color:var(--color-text)}.story-empty{color:var(--color-text-muted);padding:var(--space-lg)}.error{position:absolute;top:var(--space-sm);right:var(--space-sm);background:#0009;color:#fff;padding:6px var(--space-sm);border-radius:var(--radius-sm);font-size:12px}.toast-container{position:fixed;bottom:var(--space-xl);right:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-sm);z-index:200;pointer-events:none}.toast{display:flex;align-items:center;gap:10px;padding:10px var(--space-lg);border-radius:var(--radius-md);font-size:14px;color:var(--color-text);box-shadow:0 4px 16px #1f2d3d26;pointer-events:auto;animation:toastSlideIn .3s ease}.toast-info{background:var(--color-bg-main);border:1px solid var(--color-border)}.toast-error{background:var(--color-error-bg);border:1px solid var(--color-error-border);color:var(--color-error-text)}.toast-success{background:var(--color-success-bg);border:1px solid var(--color-success-border);color:var(--color-success-text)}.toast-dismiss{background:none;border:none;font-size:18px;cursor:pointer;color:inherit;opacity:.6;padding:0 var(--space-xs)}.toast-dismiss:hover{opacity:1}.error-boundary{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;text-align:center;padding:var(--space-xl);background:linear-gradient(135deg,var(--color-bg-start) 0%,var(--color-bg-end) 100%);color:var(--color-text)}.error-boundary h2{margin:0 0 var(--space-md);font-size:24px}.error-boundary p{margin:0 0 var(--space-xl);color:var(--color-text-muted)}.error-boundary button{background:var(--color-primary-light);color:var(--color-text);border:1px solid var(--color-primary);padding:10px var(--space-xl);border-radius:var(--radius-md);font-size:16px;cursor:pointer;font-weight:600}.error-boundary button:hover{background:var(--color-primary)}.landing{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,var(--color-bg-start) 0%,var(--color-bg-end) 100%);color:var(--color-text);overflow-y:auto}.landing-header{padding:var(--space-lg) var(--space-xl);background:var(--color-bg-header);border-bottom:1px solid var(--color-border-light)}.landing-brand{font-weight:800;font-size:20px}.landing-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--space-2xl) var(--space-xl)}.landing-title{font-size:clamp(28px,5vw,48px);font-weight:800;margin:0 0 var(--space-lg);color:var(--color-text)}.landing-subtitle{font-size:clamp(16px,2.5vw,20px);max-width:540px;margin:0 0 32px;color:var(--color-text-muted);line-height:1.5}.landing-cta{display:inline-block;background:linear-gradient(135deg,var(--color-primary-light),var(--color-primary));color:var(--color-text);font-weight:700;font-size:18px;padding:14px 36px;border-radius:var(--radius-full);text-decoration:none;box-shadow:0 4px 16px #6bcbb059;transition:transform .15s ease,box-shadow .15s ease}.landing-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px #6bcbb073}.landing-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-xl);padding:var(--space-2xl) var(--space-xl);background:var(--color-bg-main)}.feature-card{background:#fff;border-radius:var(--radius-xl);padding:var(--space-xl);text-align:center;box-shadow:var(--shadow-md)}.feature-icon{font-size:36px;margin-bottom:var(--space-md)}.feature-card h3{margin:0 0 var(--space-sm);font-size:18px;color:var(--color-text)}.feature-card p{margin:0;font-size:14px;color:var(--color-text-muted);line-height:1.5}.landing-footer{padding:var(--space-xl);text-align:center;font-size:13px;color:var(--color-text-secondary);background:var(--color-bg-header)}.landing-footer p{margin:0}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes thinkingBounce{0%,80%,to{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}@keyframes toastSlideIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes softShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}:root{color-scheme:light}html,body,#root{height:100%;margin:0;font-family:Arial,sans-serif}