*{box-sizing:border-box}html,body,#root{height:100%;margin:0;overflow:hidden}.app{display:flex;flex-direction:column;background:linear-gradient(135deg,#e8f9f3,#d8f3ff);color:#1f2d3d;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 16px;border-bottom:1px solid #c2e7e3;background:#b3e8e5;flex-wrap:wrap}.header-text{display:flex;flex-direction:column;gap:2px}.brand{font-weight:800;letter-spacing:.2px;color:#1f2d3d}.sub{color:#1f2d3d;font-size:14px}.profile-btn{margin-left:auto;background:linear-gradient(135deg,#8ad7c1,#6bcbb0);color:#1f2d3d;border:none;padding:8px 16px;border-radius:999px;font-weight:600;letter-spacing:.2px;cursor:pointer;box-shadow:0 4px 12px #8ad7c159;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:12px;padding:12px;background:#dff6f0}.call-canvas{position:relative;width:100%;flex:3;display:flex;align-items:center;justify-content:center;border-radius:12px;overflow:hidden;background:#beeaf5;box-shadow:0 2px 8px #1f2d3d14}.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,#a1d9e8 40%,#beeaf5)}.bot-avatar{width:140px;height:140px;border-radius:999px;border:3px solid rgba(31,45,61,.25);background:conic-gradient(from 180deg,#8ad7c1,#6bcbb0,#49f,#6bcbb0,#8ad7c1);filter:blur(.3px) saturate(1.1)}.pip-tile{position:absolute;right:14px;bottom:14px;width:260px;aspect-ratio:16/10;border-radius:12px;overflow:hidden;border:1px solid rgba(31,45,61,.18);box-shadow:0 8px 24px #1f2d3d59;z-index:2}@media (max-width: 480px){.pip-tile{width:180px}}.pip-video{width:100%;height:100%;object-fit:cover;background:#beeaf5}.caption{position:absolute;left:50%;transform:translate(-50%);min-width:40%;max-width:80%;background:#c6f3edbf;color:#1f2d3d;padding:6px 10px;border-radius:10px;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}.controls{position:absolute;left:50%;transform:translate(-50%);bottom:14px;display:flex;gap:10px;z-index:4}.btn{background:#8ad7c1;color:#1f2d3d;padding:10px 14px;border:1px solid #6bcbb0;border-radius:10px;cursor:pointer;transition:background .3s ease,border-color .3s ease}.btn:hover,.btn.active{background:#6bcbb0;border-color:#59b49a}.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:24px}.profile-panel{position:relative;width:min(480px,95vw);background:#dff6f0;border-radius:20px;padding:28px;box-shadow:0 20px 45px #1f2d3d29;display:flex;flex-direction:column;gap:24px;color:#1f2d3d}.profile-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:999px;border:none;background:#c6f3ede6;color:#1f2d3d;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:4px 0;max-width:220px;color:#1f2d3d}.profile-name-input:focus{outline:none;border-bottom-color:#6bcbb0}.profile-subtitle{color:#4a6b6a;font-size:14px;letter-spacing:.4px;text-transform:uppercase}.profile-progress{display:flex;flex-direction:column;gap:16px}.plant-wrapper{display:flex;flex-direction:column;align-items:center;gap:8px}.plant-graphic{width:100%;max-width:260px}.plant-stage{font-weight:600;color:#365a3e}.plant-progress-bar{width:80%;max-width:280px;height:8px;border-radius:999px;background:#d0f0e8;overflow:hidden}.plant-progress-fill{height:100%;border-radius:inherit;background:linear-gradient(135deg,#66bb6a,#43a047)}.progress-stats{display:flex;flex-direction:column;gap:4px;text-align:center}.progress-primary{font-weight:600;font-size:18px;color:#223228}.progress-secondary{color:#61706a;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:8px}}.story{display:flex;flex-direction:column;flex:1;border-radius:12px;background:#dff6f0;border:1px solid #b3e8e5;color:#1f2d3d;overflow:hidden;overflow-y:auto}.story-header{font-weight:700;padding:12px 12px 4px;color:#1f2d3d}.story-sub{color:#4a6b6a;font-size:13px;padding:0 12px 8px;border-bottom:1px solid #b3e8e5}.story-list{list-style:none;margin:0;padding:12px;overflow:auto;display:grid;gap:10px}.story-card{border:1px solid #b3e8e5;border-radius:10px;padding:8px;background:#e0f3f1;display:grid;grid-template-columns:72px 1fr;gap:10px;align-items:center;color:#1f2d3d}.story-image{width:72px;height:72px;border-radius:8px;background:#c9e7e2}.story-image.placeholder{background:repeating-linear-gradient(135deg,#d1eee7,#d1eee7 8px,#e3f6f1 8px 16px)}.story-text{font-size:14px;color:#1f2d3d}.story-empty{color:#4a6b6a;padding:16px}.error{position:absolute;top:8px;right:8px;background:#0009;color:#fff;padding:6px 8px;border-radius:6px;font-size:12px;@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}}.error .bot-avatar-large{width:400px;height:auto;object-fit:contain;display:block;margin:0 auto}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(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;background-color:#f9f9f9}#root{display:flex;flex-direction:column;min-height:100vh;padding:1rem;box-sizing:border-box}header{font-size:1.5rem;font-weight:700;margin-bottom:1rem;text-align:center}main{flex:1;display:flex;flex-direction:column;gap:1rem}.text-center{text-align:center}