html,body{margin:0;background:#0e1220;color:#e9ecff;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
#app{max-width:480px;margin:28px auto;padding:16px;display:flex;flex-direction:column;align-items:center;gap:14px}
#headerRow{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px}
#usageBadge{background:#12162a;border:1px solid #2a3569;padding:6px 10px;border-radius:12px;font-weight:700}
#moodTabs{display:flex;gap:6px;flex-wrap:wrap}
.moodTab{padding:8px 10px;border-radius:12px;border:1px solid #2a3569;background:#11162a;color:#cfd6ff;font-weight:700;cursor:pointer}
.moodTab[aria-selected="true"]{outline:2px solid #4052ff}
#openWhenPanel{width:100%;background:#0f1426;border:1px solid #2a3569;border-radius:14px;padding:10px 12px}
#openWhenTitle{font-weight:800;margin-bottom:8px;color:#dbe1ff}
#openWhenBtns{display:flex;gap:8px;flex-wrap:wrap}
.owBtn{padding:8px 10px;border-radius:12px;border:1px solid #2a3569;background:#101638;color:#dee3ff;font-weight:700;cursor:pointer}
#avatarWrap{width:260px;height:260px;display:grid;place-items:center;background:#12162a;border-radius:18px;box-shadow:0 12px 30px rgba(0,0,0,.35)}
#avatar{max-width:220px;max-height:220px;user-select:none}
#tap{padding:10px 16px;border:0;border-radius:12px;background:#2431a8;color:#fff;font-weight:800;cursor:pointer}
#bubble{min-height:80px;width:100%;background:#11162a;border:1px solid #2a3569;border-radius:14px;padding:12px 14px;line-height:1.35}
#controlsRow{display:flex;gap:8px}
#mute,#replay{background:transparent;border:1px solid #2a3569;color:#bfc7ff;border-radius:12px;padding:8px 12px;cursor:pointer}
#replay[disabled]{opacity:.5;cursor:not-allowed}