:root { --inbox-bg: #1a0b2e; --inbox-panel: #2d1b4e; --inbox-purple: #6d28d9; --inbox-violet: #a78bfa; --inbox-lime: #b7f34b; }
* { box-sizing: border-box; }
.inbox-page { min-height: 100vh; margin: 0; background: radial-gradient(circle at 12% 8%, rgba(167,139,250,.24), transparent 22rem), linear-gradient(135deg,#1a0b2e 0%,#2d1b4e 100%) fixed; color: #fff; font-family: "Trebuchet MS", "Segoe UI", sans-serif; }
.inbox-page::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .12; background-image: radial-gradient(rgba(255,255,255,.3) .6px,transparent .6px); background-size: 5px 5px; }
.inbox-shell { position: relative; width: min(100% - 40px, 920px); min-height: 100vh; margin: 0 auto; padding: max(36px, env(safe-area-inset-top)) 0 160px; }
.inbox-heading { min-height: 102px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.inbox-kicker { margin: 0 0 5px; color: var(--inbox-violet); font-size: .7rem; font-weight: 900; letter-spacing: .16em; }
.inbox-heading h1 { margin: 0; font-size: clamp(2.8rem, 8vw, 5.4rem); letter-spacing: -.07em; line-height: .98; }
.inbox-unread { padding: 10px 17px; border-radius: 100px; background: var(--inbox-purple); font-size: 1rem; font-weight: 900; white-space: nowrap; box-shadow: 0 8px 28px rgba(109,40,217,.24); }
.inbox-god-card { display: flex; align-items: center; gap: 15px; margin: 10px 0 22px; padding: 15px 18px; border: 1px solid rgba(183,243,75,.34); border-radius: 18px; background: linear-gradient(110deg,#15111d,#09080d); box-shadow: 0 12px 28px rgba(0,0,0,.24); }
.god-mark { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 14px; color: #e9d4ff; background: rgba(167,139,250,.22); font-size: 1.7rem; }
.god-copy { min-width: 0; flex: 1; display: grid; gap: 3px; }
.god-copy strong { font-size: 1rem; }
.god-copy small { color: rgba(255,255,255,.69); font-size: .79rem; }
.god-cta { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; padding: 0 18px; border-radius: 12px; background: var(--inbox-lime); color: #28124b; text-decoration: none; font-size: .83rem; font-weight: 950; white-space: nowrap; }
.god-cta.is-active { background: rgba(183,243,75,.16); color: var(--inbox-lime); border: 1px solid rgba(183,243,75,.4); cursor: default; }
.inbox-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 0 0 18px; padding: 8px; border-radius: 19px; background: rgba(231,223,250,.86); }
.inbox-tab { position: relative; min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 4px; border: 0; border-radius: 14px; background: transparent; color: #655b7a; font: inherit; font-size: clamp(.84rem,2vw,1rem); font-weight: 850; cursor: pointer; }
.inbox-tab.active { background: #fff; color: var(--inbox-purple); box-shadow: inset 0 -4px var(--inbox-purple); }
.inbox-tab-dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 5px rgba(74,222,128,.35); }
.inbox-tab-dot.has-unread { background: #ef4444; box-shadow: 0 0 7px rgba(239,68,68,.6); animation: inbox-unread-heartbeat 1.2s ease-in-out infinite; }
@keyframes inbox-unread-heartbeat { 0%,100% { transform: scale(1); } 14% { transform: scale(1.28); } 28% { transform: scale(1); } 42% { transform: scale(1.18); } 56% { transform: scale(1); } }
.inbox-free-reveal { display: block; width: 100%; height: 30px; margin: -10px 0 16px; padding: 0; overflow: hidden; border: 1px solid rgba(255,215,0,.22); border-radius: 9px; background: rgba(255,215,0,.055); color: #ffe69a; text-align: left; cursor: pointer; }
.inbox-free-reveal[hidden] { display: none; }
.inbox-free-reveal:disabled { opacity: 1; cursor: default; }
.inbox-free-reveal:focus-visible { outline: 2px solid var(--inbox-lime); outline-offset: 2px; }
.inbox-free-reveal-viewport { display: flex; align-items: center; width: 100%; height: 100%; overflow: hidden; }
.inbox-free-reveal-track { display: inline-flex; align-items: center; gap: 3rem; width: max-content; white-space: nowrap; animation: inbox-free-reveal-scroll 20s linear infinite; }
.inbox-free-reveal-track span { flex: 0 0 auto; font-size: .68rem; font-weight: 850; letter-spacing: .07em; }
.inbox-free-reveal:hover .inbox-free-reveal-track { animation-play-state: paused; }
.inbox-streak-ticker { cursor: default; }
@keyframes inbox-free-reveal-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.inbox-status { padding: 24px; text-align: center; color: #e5d4f2; }
.inbox-list { display: grid; gap: 14px; }
.inbox-message-section { display: grid; gap: 12px; }
.inbox-load-more { width: 100%; min-height: 46px; border: 1px solid rgba(255,255,255,.35); border-radius: 14px; background: transparent; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.inbox-load-more:disabled { opacity: .65; cursor: wait; }
.inbox-section-heading { margin: 12px 2px 0; color: #fff; font-size: 1.05rem; }
.opened-section { margin-top: 12px; }
.message-folder { overflow: hidden; border: 1px solid rgba(195,159,236,.2); border-radius: 18px; background: rgba(255,255,255,.06); }
.message-folder > summary { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; color: #fff; cursor: pointer; list-style: none; }
.message-folder > summary::-webkit-details-marker { display: none; }
.message-folder > summary::after { content: "+"; color: var(--inbox-lime); font-size: 1.25rem; font-weight: 900; }
.message-folder[open] > summary::after { content: "−"; }
.message-folder > summary span { margin-left: auto; color: rgba(255,255,255,.65); font-size: .78rem; }
.message-folder > summary:focus-visible { outline: 3px solid var(--inbox-lime); outline-offset: -3px; }
.message-folder-items { display: grid; gap: 12px; padding: 0 12px 12px; }
.message-card { position: relative; min-height: 136px; padding: 20px 22px; overflow: hidden; border: 1px solid rgba(201,167,241,.13); border-radius: 23px; background: linear-gradient(120deg,rgba(54,35,88,.97),rgba(42,28,70,.98)); box-shadow: 0 13px 32px rgba(6,1,18,.2); }
.message-card.is-new::after { position: absolute; top: 21px; right: 20px; width: 9px; height: 9px; border-radius: 50%; background: var(--inbox-purple); content: ""; box-shadow: 0 0 15px rgba(109,40,217,.7); }
.message-type { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 13px; padding: 6px 12px; border-radius: 20px; background: rgba(220,160,255,.18); color: #edc7ff; font-size: .74rem; font-weight: 900; text-transform: uppercase; letter-spacing: .035em; }
.message-copy h2 { margin: 0; font-size: clamp(1.12rem,3.2vw,1.5rem); letter-spacing: -.03em; }
.message-copy p,.message-card > p { margin: 6px 0 0; color: rgba(255,255,255,.74); line-height: 1.45; }
.message-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; color: #c1acd8; }
.message-footer time { font-size: .85rem; }
.message-time { display: block; margin-top: 14px; color: #c1acd8; font-size: .85rem; }
.message-action { min-height: 44px; padding: 0 24px; border: 0; border-radius: 13px; background: var(--inbox-purple); color: white; font: inherit; font-weight: 900; cursor: pointer; }
.message-action.secondary { min-width: 126px; font-size: 1.02rem; }
.message-action:disabled { opacity: .62; cursor: wait; }
.message-card.is-locked { min-height: 0; display: grid; justify-items: stretch; align-content: start; gap: 14px; text-align: left; border: 1px solid rgba(255,255,255,.8); background: linear-gradient(135deg,#684b8d,#493365); }
.message-card.is-unlocked { border: 1px solid rgba(255,255,255,.96); background: linear-gradient(135deg,#fff,#f2eff8); color: #241536; }
.message-card.is-unlocked .message-copy h2 { color: #241536; }
.message-card.is-unlocked .message-copy p { color: #574b66; }
.message-card.is-unlocked .message-time { color: #756a83; }
.message-card.is-unlocked .message-type { background: #eee7f8; color: #57358c; }
.locked-title { color: rgba(255,255,255,.96); font-size: 1.12rem; line-height: 1.25; }
.message-card.is-locked .message-copy p { margin-top: 7px; font-size: .9rem; }
.message-card.is-locked .reveal-action { justify-self: start; background: #36166c; box-shadow: inset 0 0 0 1px rgba(193,148,255,.35); }
.inbox-empty { min-height: 300px; display: grid; align-content: center; justify-items: center; padding: 30px; border: 1px solid rgba(195,159,236,.2); border-radius: 24px; background: linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.035)); text-align: center; }
.empty-icon { font-size: 3.2rem; }
.inbox-empty h2 { margin: 12px 0 5px; font-size: 1.7rem; }
.inbox-empty p { max-width: 36ch; margin: 0; color: rgba(255,255,255,.67); line-height: 1.5; }
.bottom-nav { position: fixed; z-index: 5; left: 50%; bottom: max(10px,env(safe-area-inset-bottom)); width: min(680px,calc(100% - 28px)); min-height: 76px; transform: translateX(-50%); display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-items: center; padding: 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 25px; background: rgba(31,17,55,.95); box-shadow: 0 14px 38px rgba(5,0,15,.4); backdrop-filter: blur(14px); }
.bottom-nav-item { min-width: 0; min-height: 58px; display: grid; align-content: center; justify-items: center; gap: 3px; border-radius: 15px; color: #b7a5c9; font-size: .75rem; font-weight: 700; text-decoration: none; }
.bottom-nav-item.active { color: var(--inbox-lime); background: rgba(109,40,217,.24); }
.bottom-nav-item.placeholder { opacity: .58; cursor: default; }
.bottom-nav-icon { min-height: 27px; display: grid; place-items: center; font-size: 1.55rem; line-height: 1; }
.polls-nav-icon { letter-spacing: -5px; padding-right: 5px; }
.chat-nav-icon { width: 27px; height: 23px; border: 2px solid currentColor; border-radius: 50%; font-size: .56rem; letter-spacing: 1px; }
.profile-nav-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.inbox-tab:focus-visible,.message-action:focus-visible,.god-cta:focus-visible,.bottom-nav-item:focus-visible { outline: 3px solid var(--inbox-lime); outline-offset: 3px; }
@media (min-width: 900px) { .inbox-shell { width: min(calc(100% - 64px),1080px); padding-top: max(45px,env(safe-area-inset-top)); } .inbox-list { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; } .message-card { min-height: 160px; } .message-card.is-locked { min-height: 204px; } }
@media (max-width: 580px) { .inbox-shell { width: calc(100% - 28px); padding-top: max(22px,env(safe-area-inset-top)); padding-bottom: 160px; } .inbox-heading { min-height: 84px; } .inbox-god-card { flex-wrap: nowrap; gap: 10px; padding: 12px; } .god-mark { width: 38px; height: 38px; } .god-copy strong { font-size: .9rem; } .god-copy small { font-size: .7rem; } .inbox-god-card .god-cta { width: auto; min-height: 36px; flex: 0 0 auto; padding: 0 9px; font-size: .66rem; } .inbox-tabs { gap: 4px; padding: 5px; } .inbox-tab { min-height: 50px; padding: 0 3px; font-size: clamp(.66rem,2.7vw,.78rem); } .inbox-tab-dot { top: 6px; right: 7px; } .inbox-tab span { display: inline; } .message-card { padding: 16px; border-radius: 19px; } .message-copy h2 { padding-right: 12px; } .message-footer { align-items: flex-end; } .message-action.secondary { min-width: 104px; } .bottom-nav { min-height: 76px; } }
@media (min-width: 581px) and (max-width: 899px) { .inbox-shell { width: min(calc(100% - 48px),760px); padding-top: max(32px,env(safe-area-inset-top)); } .inbox-list { width: min(100%,700px); margin-inline: auto; } .inbox-heading { min-height: 92px; } }
@media (prefers-reduced-motion: no-preference) { .message-card,.inbox-empty { animation: inbox-arrive .28s ease-out both; } @keyframes inbox-arrive { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } } }
@media (prefers-reduced-motion: reduce) { .inbox-free-reveal-track { animation: none; } }
@media (prefers-reduced-motion: reduce) { .inbox-tab-dot.has-unread { animation: none; } }

/* Match the profile Home navigation and clarify the inbox heading. */
.inbox-heading .inbox-kicker,
.inbox-heading h1 { color: #fff; }
.welcome-back-banner { display:grid; gap:7px; margin:0 0 16px; padding:15px 17px; border:1px solid rgba(185,245,83,.35); border-radius:18px; background:linear-gradient(125deg,rgba(185,245,83,.15),rgba(109,40,217,.18)); color:#fff; }
.welcome-back-banner p { margin:0; font-weight:850; line-height:1.4; }
.welcome-back-banner>strong { color:#d5ff91; font-size:.9rem; }
.welcome-recovery-code-card { display:grid; gap:7px; margin-top:6px; padding-top:10px; border-top:1px solid #ffffff24; }
.welcome-recovery-code-card small { color:#d0c4dc; font-size:.72rem; }
.welcome-recovery-code-card code { color:#fff1b8; font-size:.9rem; font-weight:850; letter-spacing:.08em; }
.welcome-recovery-code-card button { justify-self:start; min-height:36px; padding:7px 11px; border:1px solid #ffffff36; border-radius:10px; background:#ffffff12; color:white; font:inherit; font-size:.72rem; font-weight:800; }
.inbox-page .bottom-nav {
  border-color: rgba(48, 25, 85, .08);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 12px 36px rgba(12, 4, 28, .28);
}
.inbox-page .bottom-nav-item { color: #756d83; }
.inbox-page .bottom-nav-item.active {
  color: #4c19a5;
  background: transparent;
  font-weight: 900;
}
.boost-inbox-section{display:grid;gap:12px;margin:0 0 16px}.boost-inbox-card{padding:16px;border:1px solid #e3be5b;border-radius:20px;background:linear-gradient(145deg,#4d3870,#302043);box-shadow:0 12px 30px #0003;color:white}.boost-inbox-heading{display:flex;align-items:center;gap:11px}.boost-inbox-avatar{width:48px;height:48px;display:grid;place-items:center;flex:none;border:2px solid #e8c859;border-radius:50%;background:#ffffff13;color:white;font-weight:900}.boost-inbox-heading>div{display:grid;gap:4px}.boost-inbox-heading strong{font-size:.8rem;color:#ffe48a}.boost-inbox-heading small{font-size:.7rem;color:#e1d5ed}.boost-inbox-card>p{font-size:.78rem;line-height:1.45;color:#e6dbef}.boost-inbox-actions{display:flex;gap:7px;flex-wrap:wrap}.boost-inbox-actions button,.boost-vibe-link{padding:9px 11px;border:1px solid #ffffff26;border-radius:11px;background:#ffffff12;color:white;text-decoration:none;font:inherit;font-size:.68rem;font-weight:850}.boost-inbox-actions button:disabled{opacity:.55}.boost-inbox-actions .boost-thank-copy{flex-basis:100%;margin:0;color:#ddf7b5;font-size:.76rem}.boost-vibe-link{background:#b9f553;color:#263614;border-color:transparent}.boost-action-error{flex-basis:100%;color:#ffd0d5;font-size:.7rem}
.boost-inbox-card.is-expired{border-color:#4b4b53;background:#25252d;box-shadow:none;color:#a9a9b2}.boost-inbox-card.is-expired .boost-inbox-heading strong,.boost-inbox-card.is-expired .boost-inbox-heading small,.boost-inbox-card.is-expired>p{color:#a9a9b2}.boost-action-muted{background:#45454d!important;border-color:#5c5c64!important;color:#d1d1d6!important;cursor:default!important}
.boost-inbox-card.is-expired .boost-inbox-actions button:not(:disabled){background:#45454d;border-color:#5c5c64;color:#eee}

.inbox-heading-actions{display:flex;align-items:center;gap:8px}.inbox-heading-actions #push-enable{padding:8px 10px;border:1px solid #ffffff27;border-radius:11px;background:#ffffff12;color:#fff;font:inherit;font-size:.62rem;font-weight:850}.inbox-heading-actions #push-enable[hidden]{display:none}
.message-card.is-unlocked .message-copy{padding-bottom:26px}.hype-streak-ended{display:block;margin-top:5px;color:#aaa0b8;font-size:.76rem}.ended-streaks-section{margin-top:14px;padding-top:8px;border-top:1px solid #ffffff12}
.message-card>.notification-menu{position:absolute;top:10px;right:10px;z-index:2;width:38px;height:38px;display:grid;place-items:center;border:1px solid #3B2A66;border-radius:12px;background:#150A2E;color:#e9def5;font:inherit;font-size:1.1rem;font-weight:900;cursor:pointer}.notification-menu:hover,.notification-menu:focus-visible{border-color:#b9f553;outline:none}
.message-card.is-unlocked{padding-right:48px}.message-card.is-unlocked .message-copy{padding-bottom:0}
.flame-swipe-wrap{position:relative;overflow:hidden;border-radius:23px;touch-action:pan-y}.flame-hide-tray{position:absolute;inset:0 0 0 auto;width:94px;display:flex;align-items:center;justify-content:flex-end;padding-right:12px;background:#8e1b34}.flame-hide-tray button{min-width:68px;min-height:44px;border:0;border-radius:13px;background:#d72d4e;color:#fff;font:inherit;font-size:.84rem;font-weight:850;cursor:pointer}.flame-swipe-card{position:relative;z-index:1;transition:transform .22s ease,opacity .22s ease,height .22s ease;touch-action:pan-y}.flame-swipe-card.is-swipe-open{transform:translateX(-94px)}.flame-swipe-card.is-hiding{transform:translateX(-110%);opacity:0}.hide-notification-sheet{position:fixed;inset:auto 0 0;margin:0 auto;width:min(100%,520px);max-width:none;max-height:80dvh;padding:0;border:1px solid #3B2A66;border-bottom:0;border-radius:24px 24px 0 0;background:#1E1038;color:#fff;box-shadow:0 -20px 70px #0008;overflow:auto}.hide-notification-sheet::backdrop{background:#080314aa;backdrop-filter:blur(3px)}.hide-notification-sheet>div{display:grid;gap:12px;padding:12px 22px calc(24px + env(safe-area-inset-bottom))}.hide-sheet-handle{justify-self:center;width:42px;height:4px;margin:0 0 7px;border-radius:9px;background:#76658f}.hide-notification-sheet h2{margin:0;font-size:1.15rem;font-weight:900}.hide-notification-sheet p{margin:0;color:#d2c6df;font-size:.85rem;line-height:1.45}.hide-sheet-primary,.hide-sheet-option,.hide-sheet-keep{min-height:50px;padding:12px 14px;border:1px solid #3B2A66;border-radius:14px;background:#2a1945;color:#f4eaff;text-align:left;font:inherit;font-size:.88rem;font-weight:800;cursor:pointer}.hide-sheet-primary{border-color:#d72d4e;background:#35152e;color:#ff8298}.hide-sheet-keep{background:#b9f553;color:#263312;text-align:center}.hide-sheet-primary:disabled,.hide-sheet-option:disabled{opacity:.5}.hidden-toast{position:fixed;z-index:30;left:50%;bottom:calc(88px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:14px;transform:translateX(-50%);padding:11px 15px;border:1px solid #3B2A66;border-radius:14px;background:#1E1038;color:#fff;box-shadow:0 10px 30px #0008;font-size:.82rem;font-weight:800;white-space:nowrap}.hidden-toast[hidden]{display:none}.hidden-toast button{border:0;background:transparent;color:#b9f553;font:inherit;font-size:.82rem;font-weight:900;cursor:pointer}.message-card.is-hiding{transition:transform .24s ease,opacity .24s ease;transform:translateX(-110%);opacity:0}
@media(prefers-reduced-motion:reduce){.flame-swipe-card,.message-card.is-hiding{transition:none}}
.hide-notification-sheet,.mute-hype-sheet{position:fixed;inset:50% auto auto 50%;width:min(calc(100% - 32px),440px);max-width:none;max-height:82dvh;margin:0;padding:0;transform:translate(-50%,-50%);border:1px solid #3B2A66;border-radius:24px;background:#1E1038;color:#fff;box-shadow:0 18px 70px #070212aa;overflow:auto}
.hide-notification-sheet::backdrop,.mute-hype-sheet::backdrop{background:#080314aa;backdrop-filter:blur(4px)}
.hide-notification-sheet>div,.mute-hype-content{display:grid;gap:12px;padding:22px;text-align:center}
.mute-hype-content h2,.mute-hype-content p{margin:0}.mute-hype-content h2{font-size:1.12rem}.mute-hype-content p{color:#d2c6df;font-size:.86rem;line-height:1.45}
.mute-hype-content button{min-height:48px;padding:12px;border:1px solid #3B2A66;border-radius:14px;background:#3b172f;color:#ff91a5;font:inherit;font-weight:850;cursor:pointer}.mute-hype-content #mute-hype-cancel{background:#b9f553;color:#263312}
.hide-notification-sheet .hide-sheet-primary,.hide-notification-sheet .hide-sheet-option{text-align:center}

/* Reveal and checkout sheets stay over the Inbox so the locked message remains in view. */
.inbox-god-card .god-copy .inbox-kicker { color: #f5cc67; }
.inbox-god-card .god-cta { min-height: 36px; padding: 0 12px; border: 1px solid #e3bd55; background: transparent; color: #ffe28a; font-size: .72rem; }
.inbox-god-card .god-cta.is-active { border-color: #ffffff40; color: #d6f89a; }
.inbox-god-card.is-active { border-color: #FFD700; background: #FFD700; color: #17120a; box-shadow: 0 12px 30px rgba(255,215,0,.2); }
.inbox-god-card.is-active .god-mark { background: rgba(23,18,10,.08); color: #17120a; }
.inbox-god-card.is-active .god-copy .inbox-kicker { color: #3b2a00; }
.inbox-god-card.is-active .god-copy strong { color: #17120a; }
.inbox-god-card.is-active .god-copy small { color: #3b2a00; }
.inbox-god-card .god-detail[hidden], .inbox-god-card .god-cta[hidden] { display: none !important; }
.unlock-sheet { position: fixed; inset: 50% auto auto 50%; width: min(calc(100% - 32px), 520px); max-width: none; max-height: 88dvh; margin: 0; padding: 28px 22px max(24px, env(safe-area-inset-bottom)); overflow-y: auto; border: 1px solid #6b4e89; border-radius: 26px; background: #150a2e; color: #fff; box-shadow: 0 18px 70px #070212aa; transform: translate(-50%, -50%); }
.unlock-sheet::backdrop { background: #090313a8; backdrop-filter: blur(8px); }
.unlock-close { position: sticky; z-index: 1; top: 0; float: right; width: 36px; height: 36px; margin: -12px -7px 0 0; border: 1px solid #ffffff30; border-radius: 50%; background: #ffffff12; color: #fff; font-size: 1.4rem; cursor: pointer; }
.unlock-state { clear: both; display: grid; justify-items: stretch; gap: 10px; text-align: center; }
.unlock-state[hidden] { display: none; }
.unlock-state h2 { margin: 0; font-size: clamp(1.55rem, 6vw, 2rem); line-height: 1.1; }
.unlock-eyebrow { margin: 0; color: #c4b5fd; font-size: .7rem; font-weight: 900; letter-spacing: .16em; }
.unlock-copy { margin: 0 auto; max-width: 36ch; color: #d8cbea; line-height: 1.45; }
.unlock-avatar-wrap { display: grid; justify-items: center; gap: 6px; margin: 6px 0 3px; }
.unlock-avatar { display: grid; width: 82px; height: 82px; place-items: center; border: 3px solid #ffd700; border-radius: 50%; background: linear-gradient(145deg,#573e70,#24143f); color: #fff; font-size: 2.5rem; font-weight: 900; filter: blur(.15px); animation: unlock-ring 2s ease-in-out infinite; }
.unlock-avatar-wrap p { margin: 0; color: #e6d8f1; font-size: .84rem; }
.unlock-balance { margin: 5px 0 0; color: #e9ddf6; font-size: .86rem; }
.unlock-balance strong { color: #a3e635; }
.unlock-progress { height: 10px; overflow: hidden; border-radius: 99px; background: #ffffff20; }
.unlock-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: #a3e635; transition: width .25s ease; }
.unlock-primary,.unlock-secondary,.unlock-tertiary { min-height: 52px; width: 100%; padding: 12px 16px; border: 0; border-radius: 15px; font: inherit; font-weight: 950; cursor: pointer; }
.unlock-primary { margin-top: 4px; background: #a3e635; color: #17150e; box-shadow: 0 8px 28px #a3e63525; }
.unlock-state-short #unlock-buy-coins { animation: unlock-button-pulse 2.4s ease-in-out infinite; }
.unlock-secondary { border: 1px solid #ffffff58; background: #ffffff0b; color: #fff; }
#unlock-earn-coins { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.unlock-tertiary { min-height: 43px; border: 1px solid #ffd700; background: transparent; color: #ffe381; }
.unlock-support-copy { display: block; color: #c4b5fd; font-size: .78rem; line-height: 1.35; }
.unlock-support-copy.mpesa-support-copy { color: #9CA3AF; font-size: 12px; font-weight: 400; white-space: pre-line; }
.unlock-later,.unlock-link { justify-self: center; padding: 8px; border: 0; background: transparent; color: #c4b5fd; font: inherit; font-size: .83rem; cursor: pointer; }
.unlock-link { color: #e2d0ff; text-decoration: underline; }
.unlock-phone-label { display: grid; gap: 7px; text-align: left; color: #e6d9f2; font-size: .84rem; font-weight: 800; }
.unlock-phone-label input { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid #806a9c; border-radius: 13px; background: #24143d; color: #fff; font: inherit; }
.unlock-phone-label input:focus { outline: 2px solid #a3e635; }
.unlock-benefits { margin: 0; padding: 12px 18px 12px 34px; border-radius: 14px; background: #ffffff0b; color: #e8def4; text-align: left; line-height: 1.8; }
.unlock-countdown { margin: 5px 0; color: #ffd700; font-size: 2.2rem; font-weight: 950; }
.revealed-sender-avatar,.unlock-revealed-avatar { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 8px; border: 2px solid #a78bfa; border-radius: 50%; background: linear-gradient(145deg,#55397c,#281543); font-size: 1.8rem; }
.unlock-revealed-avatar { width: 82px; height: 82px; border-color: #ffd700; font-size: 2.6rem; }
#unlock-state-revealed { position: relative; overflow: hidden; }
#unlock-state-revealed > :not(.reveal-confetti) { position: relative; z-index: 2; }
.reveal-confetti { position: absolute; z-index: 1; top: -14px; left: var(--piece-x); width: 8px; height: 13px; border-radius: 2px; background: hsl(var(--piece-hue) 90% 62%); pointer-events: none; animation: reveal-confetti-fall 1.25s ease-out var(--piece-delay) both; }
@keyframes reveal-confetti-fall { to { transform: translateY(330px) rotate(520deg); opacity: 0; } }
.unlock-state button:disabled { opacity: .55; cursor: wait; }
/* Streak Duo progress and in-app Hype Chat */
.duo-streak-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:12px;padding:15px;border:1px solid #533b73;border-radius:20px;background:linear-gradient(145deg,#20113a,#150b28);box-shadow:0 10px 28px #08031355}
.duo-streak-card .hype-avatar{grid-row:1;grid-column:1;width:46px;height:46px}
.duo-streak-content{grid-column:2;min-width:0;display:grid;gap:7px}
.duo-streak-title{color:#ffd979;font-size:.83rem;letter-spacing:.035em}
.duo-streak-sub{margin:0;color:#f3eafa;font-size:.86rem;line-height:1.4}
.duo-streak-progress{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-top:3px}
.duo-streak-progress span{height:8px;border-radius:9px;background:#ffffff20}
.duo-streak-progress span.is-filled{background:linear-gradient(90deg,#ffce32,#ff7b24);box-shadow:0 0 10px #ffb72b45}
.duo-streak-progress-copy,.duo-streak-countdown{color:#d4c5e4;font-size:.71rem;line-height:1.4}
.duo-streak-countdown{color:#ffe18a}
.duo-chat-teaser{padding:10px;border:1px solid #ffffff18;border-radius:12px;background:#ffffff08;color:#aaa0b8;font-size:.72rem;line-height:1.4;filter:blur(.15px)}
.duo-chat-teaser.is-unlocked{border-color:#f4d57365;background:#ffd70010;color:#ffdf84;filter:none;cursor:pointer}
.duo-streak-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.duo-streak-actions .hype-send-action,.duo-chat-open,.duo-chat-whale{min-height:42px;padding:10px 13px;border:1px solid #a3e635;border-radius:12px;background:#a3e635;color:#18210c;font:inherit;font-size:.78rem;font-weight:900;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.duo-streak-actions .hype-send-action.is-muted{border-color:#ffffff23;background:#ffffff0b;color:#bfb3ca}
.duo-chat-open{border-color:#71528d;background:#2c1a42;color:#f5e9ff}
.duo-chat-open.is-free{border-color:#ffd700;background:#ffd700;color:#201606}
.duo-chat-whale{border-color:#e0bb5a;background:#ffd45c;color:#211608}
.duo-chat-lock-copy{flex-basis:100%;color:#a99bb7;font-size:.72rem}
.hype-chat-reply-card{border-color:#a78bfa65;background:linear-gradient(110deg,#241239,#1a0d2b)}
.duo-chat-sheet{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;min-height:100vh;max-width:none;max-height:none;margin:0;padding:calc(10px + env(safe-area-inset-top)) 14px calc(10px + env(safe-area-inset-bottom));transform:none;overflow:hidden;border:0;border-radius:0;background:#150a2e;color:#fff;box-shadow:none}
.duo-chat-sheet[open]{display:grid;grid-template-rows:auto minmax(0,1fr) minmax(90px,35dvh) auto;gap:8px}
.duo-chat-sheet::backdrop{background:#080314}
.duo-chat-header{position:relative;display:grid;gap:4px;padding:2px 48px 10px 2px;border-bottom:1px solid #ffffff18}
.duo-chat-header .unlock-close{position:absolute;top:0;right:0;float:none;margin:0}
.duo-chat-sheet h2{margin:2px 0;font-size:1.3rem;line-height:1.15}
.duo-chat-subtitle{margin:0;color:#c7b8d6;font-size:.78rem;line-height:1.4}
.duo-chat-unlock-note{color:#b8a8c9;font-size:.69rem;line-height:1.35}
.duo-chat-messages{min-height:0;display:flex;flex-direction:column;gap:8px;overflow-y:auto;overscroll-behavior:contain;padding:10px 2px}
.duo-chat-actions{min-height:0;display:grid;grid-template-columns:1fr;align-content:start;gap:8px;overflow-y:auto;overscroll-behavior:contain;padding:2px}
.duo-chat-message{margin:0;padding:10px 12px;border:1px solid #ffffff18;border-radius:13px;background:#ffffff08;color:#ece1f5;font-size:.82rem;line-height:1.4;overflow-wrap:anywhere}
.duo-chat-message.duo-chat-turn-label,.duo-chat-turn-label{padding:0;border:0;background:none;color:#b9f553;font-size:.69rem;font-weight:850}
.duo-chat-message.duo-chat-bubble{width:fit-content;max-width:88%;background:#29163f}
.duo-chat-message.is-sent{justify-self:end;border-color:#6b4b8c;background:#2e1c47}
.duo-chat-message.is-reply{justify-self:start;border-color:#ffffff20;background:#211333}
.duo-chat-option,.duo-chat-mode-switch{min-height:43px;padding:10px 12px;border:1px solid #684b84;border-radius:12px;background:#241439;color:#f4eafa;text-align:left;font:inherit;font-size:.8rem;font-weight:800;cursor:pointer}
.duo-chat-option:disabled{opacity:.5}
.duo-chat-mode-switch{display:inline-flex;justify-content:center;text-decoration:none;color:#ffe184;border-color:#9b7c3d}
.duo-chat-option.is-send{background:#a3e635;color:#18210c;border-color:#a3e635;text-align:center}
.duo-chat-header{padding-right:78px}
.duo-chat-back-hype{justify-self:start;color:#cbb9dc;font-size:.72rem;text-decoration:none;margin-bottom:3px}
.duo-chat-back-hype[hidden],.duo-chat-menu[hidden]{display:none}
.duo-chat-menu{position:absolute;right:42px;top:0;z-index:4;color:#cbb9dc}
.duo-chat-menu summary{list-style:none;cursor:pointer;font-size:1.1rem;line-height:30px;padding:0 7px}
.duo-chat-menu summary::-webkit-details-marker{display:none}
.duo-chat-menu-popover{position:absolute;right:0;top:30px;min-width:112px;display:grid;padding:5px;border:1px solid #ffffff25;border-radius:12px;background:#251438;box-shadow:0 8px 24px #0008}
.duo-chat-menu-popover a,.duo-chat-menu-popover button{padding:8px;border:0;background:none;color:#eee;text-align:left;text-decoration:none;font:inherit;font-size:.75rem;cursor:pointer}
.duo-chat-progress{display:inline-flex;width:max-content;max-width:100%;margin:2px 0 0;padding:5px 9px;border:1px solid #d2aa39;border-radius:999px;color:#ffe28a;font-size:.68rem;white-space:normal}
.free-chat-welcome{width:min(100%,460px);margin:auto;padding:22px 18px;border-radius:20px;background:linear-gradient(145deg,#fff,#f4ecff);color:#21152d;text-align:center;box-shadow:0 14px 36px #0004}
.free-chat-welcome h3{margin:0 0 8px;font-size:1.1rem}.free-chat-welcome p{margin:5px 0;color:#51445e;font-size:.82rem;line-height:1.4}
.free-chat-starters{display:grid;gap:8px;margin-top:15px}
.free-chat-starter{padding:9px 12px;border:1px solid #ddd0ec;border-radius:999px;background:#f2eafa;color:#2a1d38;font:inherit;font-size:.76rem;cursor:pointer}
.free-chat-message-row{display:flex;flex-direction:column;gap:2px;max-width:88%;align-self:flex-start}.free-chat-message-row.is-sent{align-self:flex-end;align-items:flex-end}
.duo-chat-message.duo-chat-bubble.is-sent{border-color:#a3e635;background:#a3e635;color:#14200a}.duo-chat-message.duo-chat-bubble.is-reply{border-color:#fff;background:#fff;color:#21152d}
.free-chat-time{padding:0 5px;color:#aa9ab8;font-size:.61rem}
.free-chat-count{color:#a3e635;font-size:.72rem;font-weight:750}.free-chat-count.is-low{color:#ffb35b}.free-chat-count.is-done{color:#b8a9c6}
.duo-chat-actions textarea{min-height:64px;max-height:120px;resize:none;border-radius:18px;background:#211333}
.free-chat-char-count{justify-self:end;color:#aaa0b5;font-size:.65rem}.free-chat-char-count.is-over-90{color:#ff626b}
.free-chat-inline-error{color:#ff9ba1;font-size:.72rem}.free-chat-done{color:#c8f68a;text-align:center;font-size:.74rem}.free-chat-footer{color:#aaa0b5;text-align:center;font-size:11px}
.free-chat-send{border-radius:999px!important;font-weight:850!important}.free-chat-send:disabled{background:#625b69!important;border-color:#625b69!important;color:#c5bfcb!important;opacity:1}
.duo-chat-sheet.is-free-chat[open]{grid-template-rows:auto minmax(0,1fr) auto auto}
.duo-chat-sheet.is-free-chat .duo-chat-actions{overflow:visible;padding-bottom:4px}
.duo-chat-actions textarea{width:100%;min-height:76px;resize:vertical;padding:11px;border:1px solid #684b84;border-radius:12px;background:#211333;color:#fff;font:inherit;font-size:.85rem}
.duo-chat-status{min-height:1.2em;margin:10px 0 0;color:#ffcd7b;font-size:.76rem;line-height:1.4}
.duo-chat-celebration{max-width:440px;text-align:center}
.duo-chat-celebration[open]{inset:50% auto auto 50%;width:min(calc(100% - 32px),440px);height:auto;min-height:0;max-height:82dvh;padding:26px 20px;transform:translate(-50%,-50%);overflow:auto;border:1px solid #60477b;border-radius:24px;background:#150a2e;box-shadow:0 18px 70px #070212aa;grid-template-rows:auto auto auto auto;align-content:center}
.duo-chat-celebration h2{margin:8px 24px 12px}
.duo-chat-celebration .duo-chat-subtitle{margin:0 auto 16px}
.duo-chat-celebration .unlock-primary{max-width:100%}
@media(max-width:520px){.duo-streak-card{gap:9px;padding:12px}.duo-streak-actions{display:grid;grid-template-columns:1fr}.duo-streak-actions>*{width:100%}.duo-chat-sheet{padding-inline:12px}.duo-chat-actions{grid-template-columns:1fr}.duo-chat-header{padding-right:45px}}
@keyframes unlock-ring { 50% { box-shadow: 0 0 0 9px #ffd70018,0 0 25px #ffd70080; } }
@keyframes unlock-button-pulse { 50% { box-shadow: 0 8px 34px #a3e63566; } }
@media (prefers-reduced-motion: reduce) { .unlock-avatar,.unlock-state-short #unlock-buy-coins { animation: none; } }