body{margin:0;padding:0;font-family:system-ui,sans-serif;background:#f6fdfb;color:#0a3d3d}.hidden{display:none!important}.container{max-width:520px;margin:auto;padding:20px}.welcome-screen{text-align:center;padding:50px 20px;max-width:420px;margin:0 auto}.welcome-avatar{width:110px;height:110px;border-radius:50%;margin-bottom:15px}.welcome-title{font-size:1.9rem;font-weight:700;color:#0d8f8f}.welcome-subtitle{color:#166;margin-bottom:25px;font-size:1rem;line-height:1.5}#welcome-screen input{width:100%;padding:14px;border-radius:10px;border:1px solid #bcdcdc;margin-bottom:12px;box-sizing:border-box}#welcome-screen button{width:100%;padding:14px;font-size:1rem;border-radius:10px;border:none;background:#14a1a1;color:#fff;cursor:pointer;margin-bottom:12px;box-sizing:border-box}#login-btn:hover{background:#0e7f7f}.google-btn{width:100%;padding:12px;margin-top:12px;border:1px solid #ccc;border-radius:8px;background:#fff;font-size:1rem;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer}.google-btn:hover{background:#f1f1f1}.google-icon svg{display:block}.divider{margin:20px 0;font-size:.9rem;color:#888}.header{position:relative;background:#f0fdfa;padding:25px 15px;text-align:center;border-bottom:1px solid #dceeee}.header-content{display:inline-flex;flex-direction:column;align-items:center}.avatar{width:60px;height:60px;border-radius:50%;background-image:url(/icons/nani-avatar.png);background-size:cover;margin-bottom:10px}.title{font-size:1.8rem;font-weight:700;color:#0d8f8f}.subtitle{color:#166;margin-top:3px}.account-btn{position:absolute;right:15px;top:20px;padding:8px 14px;border-radius:8px;background:#14a1a1;color:#fff;font-size:.9rem;border:none;cursor:pointer}#nani-chat-box{height:420px;overflow-y:auto;background:#fff;border-radius:14px;border:1px solid #c7e7e7;padding:14px;margin-bottom:20px}.typing-indicator{display:flex;align-items:center;background:#f0f5f0;padding:10px 14px;border-radius:12px;width:fit-content;margin:8px 0;box-shadow:0 1px 3px #0000001a;font-size:14px}.typing-dots{display:flex;gap:4px}.typing-dots div{width:8px;height:8px;background:#6dbb75;border-radius:50%;animation:typing 1s infinite ease-in-out}.typing-dots div:nth-child(2){animation-delay:.2s}.typing-dots div:nth-child(3){animation-delay:.4s}@keyframes typing{0%{opacity:.2;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}to{opacity:.2;transform:translateY(0)}}.msg-user .bubble,.msg-nani .bubble{padding:12px;margin-bottom:10px;border-radius:10px;white-space:pre-wrap}.msg-user .bubble{background:#d4f7e2;color:#0a3d3d}.msg-nani .bubble{background:#e3f8f8;color:#0a3d3d}.input-row{display:flex;gap:8px}#nani-input{flex:1;padding:12px;font-size:1rem;border-radius:10px;border:1px solid #bcdcdc}#nani-send-btn{padding:12px 16px;background:#14a1a1;color:#fff;border-radius:10px;border:none;cursor:pointer}.expired-box{background:#fff4d9;border:1px solid #ffe6b3;padding:15px;border-radius:12px;text-align:center}.expired-box h3{margin:0 0 10px;color:#c07a00}.account-panel{position:fixed;top:0;left:0;width:100%;height:100%;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0006;display:flex;justify-content:center;align-items:center}.panel-content{background:#fff;width:90%;max-width:380px;border-radius:14px;padding:20px;color:#0a3d3d}.subscribe-btn,.close-btn{width:100%;padding:12px;margin-top:15px;border-radius:10px;border:none}.subscribe-btn{background:#14a1a1;color:#fff;font-size:1rem;border:none;cursor:pointer}.subscribe-btn:hover{background:#0f8080}.close-btn{background:#ddd;color:#333}.upgrade-banner{background:#e4faf5;border:1px solid #b6e3d9;padding:12px 14px;border-radius:10px;margin-bottom:18px;text-align:center;color:#0c6b6b;font-size:.95rem}.upgrade-banner span{font-weight:700;cursor:pointer;color:#0d8f8f;text-decoration:underline}.upgrade-banner span:hover{color:#0a5353}@media (prefers-color-scheme: dark){body{background:#0f1b26;color:#e7f5f5}.header{background:#14212e}#nani-chat-box{background:#13222e;border-color:#204458}.msg-user .bubble{background:#1e3a4a;color:#dceff0}.msg-nani .bubble{background:#26485d;color:#e8fbfb}#nani-input{background:#10202c;color:#e8fbfb}#nani-send-btn{background:#158b8b}.typing-indicator{background:#203544;box-shadow:none}.typing-dots div{background:#9cebbf}}