:root {
    --bg: #0f0f1a;
    --bg-soft: #1a1a2e;
    --card: #22223a;
    --text: #eaeaf2;
    --text-dim: #9a9ab5;
    --accent: #e58fc7;
    --user-bubble: #5b5bd6;
    --bot-bubble: #2a2a45;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

.view { display: none; height: 100vh; height: 100dvh; flex-direction: column; }
.view.active { display: flex; }
#view-chat { position: relative; }
.scroll-fab {
    position: absolute;
    right: 16px;
    bottom: 80px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #e58fc7;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 5;
}
.scroll-fab.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ---------- Onboarding (first-run) ---------- */
.onboarding {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: radial-gradient(1200px 800px at 50% -10%, #2b2b4a 0%, #1a1a2e 55%, #141428 100%);
}
.onboarding.hidden { display: none; }
.onboarding-card { text-align: center; max-width: 340px; }
.onboard-logo { font-size: 56px; line-height: 1; }
.onboard-title {
    font-size: 30px;
    font-weight: 700;
    margin: 8px 0 4px;
    background: linear-gradient(135deg, #fbc2eb, #a6c1ee);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.onboard-tagline { font-size: 15px; color: #e8a9d4; margin: 0 0 14px; }
.onboard-desc { font-size: 14px; line-height: 1.55; color: #b9b9cf; margin: 0 0 22px; }
.onboard-start {
    width: 100%;
    padding: 13px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #e58fc7, #a6c1ee);
    color: #1a1a2e;
    cursor: pointer;
}
.onboard-start:active { transform: scale(0.98); }

/* ---------- Header (select) ---------- */
.app-header {
    padding: 24px 20px 16px;
    text-align: center;
}
.app-header h1 {
    font-size: 28px;
    background: linear-gradient(90deg, #e58fc7, #a6c1ee, #f0a04b);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.subtitle { color: var(--text-dim); margin-top: 4px; font-size: 14px; }

/* ---------- Character grid ---------- */
.character-grid {
    flex: 1;
    overflow-y: auto;
    padding: 8px 16px 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-content: start;
}
.character-card {
    border-radius: 20px;
    padding: 20px 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: transform .15s, box-shadow .15s;
    min-height: 220px;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,.35);
    text-align: center;
}
.character-card:active { transform: scale(.96); }
.character-card .avatar {
    font-size: 52px;
    line-height: 1;
}
.character-card .name {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 2px 10px rgba(0,0,0,.35);
}
.character-card .tagline {
    font-size: 12px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 1px 6px rgba(0,0,0,.4);
}
.character-card .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    margin-top: 4px;
}
.character-card .tag {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(0,0,0,.32);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* ---------- Chat header ---------- */
.chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-soft);
    border-bottom: 1px solid rgba(255,255,255,.06);
    position: sticky;
    top: 0;
}
.back-btn {
    background: none;
    border: none;
    color: var(--text);
    font-size: 28px;
    cursor: pointer;
    padding: 0 6px;
    line-height: 1;
}
.chat-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    background: var(--card);
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
}
.chat-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.chat-avatar .avatar-emoji { font-size: 20px; }
.chat-title { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.chat-title-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.chat-title #chat-name { font-weight: 700; font-size: 16px; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-status { font-size: 11px; color: #6ddb8f; }

/* ---------- Chat messages ---------- */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.msg {
    max-width: 78%;
    padding: 10px 14px;
    border-radius: 18px;
    line-height: 1.45;
    font-size: 15px;
    word-wrap: break-word;
    white-space: pre-wrap;
    animation: fadeIn .2s ease;
}
.msg.user {
    align-self: flex-end;
    background: var(--user-bubble);
    border-bottom-right-radius: 4px;
}
.msg.bot {
    align-self: flex-start;
    background: var(--bot-bubble);
    border-bottom-left-radius: 4px;
}
.msg.typing { opacity: .6; font-style: italic; }
.msg.bot.streaming::after {
    content: '▍';
    margin-left: 1px;
    opacity: .7;
    animation: blink 0.9s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }
.day-divider {
    align-self: center;
    font-size: 12px;
    color: var(--muted, #8a8a9e);
    background: rgba(255,255,255,0.06);
    padding: 3px 12px;
    border-radius: 999px;
    margin: 6px 0 2px;
    user-select: none;
}
.regen-btn {
    align-self: flex-start;
    background: none;
    border: 1px solid var(--muted, #8a8a9e);
    color: var(--muted, #8a8a9e);
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 999px;
    cursor: pointer;
    margin: -2px 0 4px;
    opacity: .75;
}
.regen-btn:hover { opacity: 1; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Input bar ---------- */
.chat-input-bar {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-soft);
    border-top: 1px solid rgba(255,255,255,.06);
    position: sticky;
    bottom: 0;
}
#chat-input {
    flex: 1;
    background: var(--card);
    border: none;
    border-radius: 18px;
    padding: 12px 16px;
    color: var(--text);
    font-size: 15px;
    font-family: inherit;
    line-height: 1.4;
    outline: none;
    resize: none;
    min-height: 44px;
    max-height: 132px;
    overflow-y: auto;
}
.send-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
}
.send-btn:disabled { opacity: .5; }

/* ---------- Character card image ---------- */
.card-img-wrap {
    width: 72px; height: 72px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.3);
    border: 2px solid rgba(255,255,255,.5);
    background: rgba(255,255,255,.12);
}
.card-img-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.card-img-wrap .avatar-emoji {
    font-size: 36px;
    display: flex; align-items: center; justify-content: center;
    height: 100%;
}

/* ---------- Reset button ---------- */
.reset-btn {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 20px;
    cursor: pointer;
    padding: 6px 8px;
    line-height: 1;
}
.reset-btn:active { color: var(--text); }

/* ---------- Gallery modal ---------- */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.7);
    z-index: 50;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal.active { display: flex; }
.modal-panel {
    background: var(--bg-soft);
    border-radius: 20px;
    width: 100%;
    max-width: 460px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    font-weight: 700;
}
.modal-close {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
}
.gallery-tabs {
    display: flex;
    gap: 8px;
    padding: 12px 16px 0;
}
.gallery-tab {
    flex: 1;
    background: var(--card);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 12px;
    cursor: pointer;
}
.gallery-tab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 16px;
    overflow-y: auto;
}
.gallery-item {
    position: relative;
    aspect-ratio: 1 / 1;
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
    cursor: pointer;
    transition: transform .12s;
    display: block;
}
.gallery-item img:active { transform: scale(.96); }
.gallery-item.locked img {
    filter: blur(9px) brightness(.55);
    cursor: default;
    transform: none;
}
.gallery-lock {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.gallery-lock .ico { width: 16px; height: 16px; }

/* ---------- Lightbox ---------- */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.92);
    z-index: 60;
    align-items: center;
    justify-content: center;
}
.lightbox.active { display: flex; }
.lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.lightbox-close {
    position: absolute;
    top: 14px; right: 16px;
    background: none;
    border: none;
    color: #fff;
    font-size: 26px;
    cursor: pointer;
}
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.12);
    border: none;
    color: #fff;
    font-size: 34px;
    width: 48px; height: 48px;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
}
.lightbox-nav.prev { left: 12px; }
.lightbox-nav.next { right: 12px; }

/* ---------- Credit elements (inline in headers) ---------- */
.app-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.credit-inline { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.credit-count {
    background: var(--bg-soft);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    padding: 6px 12px;
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    white-space: nowrap;
}
.credit-count.low { color: #ff8f8f; }
.credit-pill { padding: 5px 10px; font-size: 13px; }
.upgrade-btn {
    background: linear-gradient(90deg, #f6d365, #fda085);
    border: none;
    color: #3a2a00;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}

/* chat header: title takes remaining space, pushes credit/moments/reset right */
.chat-title { flex: 1; min-width: 0; }
.moments-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 20px;
    cursor: pointer;
    padding: 6px 8px;
    line-height: 1;
    flex-shrink: 0;
}
.moments-btn:hover { color: var(--text); }
.moments-btn:active { color: var(--text); }
.reset-btn { margin-left: 0; }

/* ---------- Store / paywall ---------- */
.store-panel { max-width: 420px; }
.store-body {
    padding: 16px 18px 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.store-text { color: var(--text-dim); font-size: 14px; }
.store-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-top: 4px;
}
.store-btn {
    width: 100%;
    border: none;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    background: var(--card);
    color: var(--text);
    text-align: left;
}
.pack-list { display: flex; flex-direction: column; gap: 8px; }
.pack-btn { display: flex; justify-content: space-between; align-items: center; }
.pack-price { color: #f6d365; font-weight: 700; }
.premium-btn {
    background: linear-gradient(90deg, #f6d365, #fda085);
    color: #3a2a00;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.store-sub { font-size: 12px; opacity: .8; font-weight: 500; }
.premium-btn.owned {
    background: var(--card);
    color: var(--text-dim);
    cursor: default;
}
.owned-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: #7fd7a3;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(127, 215, 163, .12);
    border: 1px solid rgba(127, 215, 163, .35);
}
.owned-badge .ico { width: 13px; height: 13px; }
.refill-btn { background: #2f6b4f; color: #eafff2; text-align: center; }
.streak-info { text-align: center; font-size: 13px; color: var(--text-dim); }
.store-btn:disabled { opacity: .55; cursor: default; }
.redeem-row { display: flex; gap: 8px; }
#redeem-input {
    flex: 1;
    background: var(--card);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    padding: 11px 14px;
    color: var(--text);
    font-size: 14px;
    outline: none;
}
.redeem-btn { width: auto; flex-shrink: 0; }
.store-msg { font-size: 13px; color: #6ddb8f; min-height: 18px; }

/* ---------- Moments ---------- */
.moments-list {
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.moment-card {
    background: var(--card);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.moment-title { font-weight: 700; font-size: 16px; }
.moment-teaser { color: var(--text-dim); font-size: 13px; line-height: 1.4; }
.unlock-btn { background: rgba(246,211,101,.15); color: #f6d365; text-align: center; }
.unlock-btn.loading { opacity: .6; pointer-events: none; }
.unlock-btn.loading::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(246,211,101,.3);
    border-top-color: #f6d365;
    border-radius: 50%;
    margin-left: 8px;
    vertical-align: -2px;
    animation: tts-spin .8s linear infinite;
}
.read-btn { background: var(--accent); color: #fff; text-align: center; }
.moment-content {
    color: var(--text);
    font-size: 15px;
    line-height: 1.7;
    white-space: pre-wrap;
}
.moment-read-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.moment-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    background: var(--card);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    color: var(--text);
    cursor: pointer;
}
.moment-back:hover { background: var(--bg-soft); }
.moment-back .ico { width: 18px; height: 18px; display: block; }
.moment-read-title { font-weight: 700; font-size: 16px; }
.moment-speak {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    background: var(--card);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    color: var(--text);
    cursor: pointer;
}
.moment-speak:hover { background: var(--bg-soft); }
.moment-speak .ico { width: 16px; height: 16px; display: block; }
.moment-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 14px;
    margin: 14px 0;
    cursor: pointer;
}

/* ---------- Settings ---------- */
.settings-btn {
    background: var(--bg-soft);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    width: 30px; height: 30px;
    color: var(--text);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
}
.settings-body {
    padding: 16px 18px 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.settings-section { display: flex; flex-direction: column; gap: 8px; }
.settings-label { font-size: 13px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; }
.segmented { display: flex; flex-wrap: wrap; gap: 6px; }
.seg-btn {
    border: 1px solid rgba(255,255,255,.14);
    background: var(--card);
    color: var(--text);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.seg-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.settings-hint { font-size: 12px; color: var(--text-dim); line-height: 1.4; }

/* Notification permission toggle */
.push-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.push-toggle-row .settings-hint { flex: 1; margin: 0; }
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute; cursor: pointer; inset: 0;
    background: #8a8a9a; border-radius: 26px; transition: .2s;
}
.slider:before {
    content: ""; position: absolute; height: 20px; width: 20px;
    left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .2s;
}
.switch input:checked + .slider { background: #e58fc7; }
.switch input:checked + .slider:before { transform: translateX(20px); }

/* Account section */
.account-input { width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: var(--card); color: var(--text); font-size: 14px; font-family: inherit; margin-bottom: 8px; }
.account-input:focus { outline: none; border-color: var(--accent); }
.account-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.account-msg.ok { color: #7fef9f; }
.account-msg.err { color: #ff8a8a; }
.account-field { position: relative; margin-bottom: 8px; }
.account-field .account-input { margin-bottom: 0; padding-right: 44px; }
.pw-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-dim); padding: 4px; display: flex; align-items: center; justify-content: center; line-height: 0; }
.pw-eye:hover { color: var(--text); }
.pw-eye svg { width: 18px; height: 18px; }
.credit-breakdown { font-size: 12px; color: var(--text-dim); margin: -4px 0 8px; min-height: 16px; }

/* ---------- Demo banner ---------- */
.demo-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 16px 4px;
    padding: 10px 14px;
    background: linear-gradient(90deg, rgba(246,211,101,.14), rgba(253,160,133,.14));
    border: 1px solid rgba(246,211,101,.3);
    border-radius: 12px;
    font-size: 13px;
    color: var(--text);
    flex-wrap: wrap;
}
.demo-banner.hidden { display: none; }
.demo-text { display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.demo-code {
    background: rgba(0,0,0,.3);
    border-radius: 6px;
    padding: 2px 8px;
    font-family: ui-monospace, monospace;
    font-size: 12px;
    color: #f6d365;
    font-weight: 700;
}
.demo-redeem-btn {
    background: linear-gradient(90deg, #f6d365, #fda085);
    border: none;
    color: #3a2a00;
    font-weight: 700;
    font-size: 12px;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.demo-dismiss {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
    padding: 2px;
}

/* ---------- skeleton loading ---------- */
.character-card.skeleton {
    pointer-events: none;
    background: var(--card-bg, #1a1a2e) !important;
    align-items: center;
}
.sk-img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #2a2a3e;
    margin-bottom: 10px;
}
.sk-line {
    height: 12px;
    border-radius: 6px;
    background: #2a2a3e;
    margin: 4px 0;
}
.sk-line.w60 { width: 60%; }
.sk-line.w40 { width: 40%; }
.skeleton .sk-img,
.skeleton .sk-line {
    background: linear-gradient(90deg, #232336 25%, #32324a 50%, #232336 75%);
    background-size: 200% 100%;
    animation: shimmer 1.3s infinite;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- inline SVG icons (emoji replacement) ---------- */
.ico {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    flex-shrink: 0;
}
.credit-count .ico { vertical-align: -0.18em; }
.credit-count .credit-num { margin-left: 5px; }
.settings-btn .ico { width: 16px; height: 16px; display: block; margin: 0 auto; }
.moments-btn .ico { width: 20px; height: 20px; display: block; }
#paywall-title { display: inline-flex; align-items: center; gap: 7px; }
#paywall-title .ico { width: 18px; height: 18px; }
.credit-breakdown { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.credit-breakdown .ico { width: 13px; height: 13px; opacity: .8; }
.unlock-btn { display: flex; align-items: center; justify-content: center; gap: 6px; }
.unlock-btn .ico { width: 15px; height: 15px; }
.unlock-btn .ico:first-child { opacity: .85; }
.unlock-cost { font-weight: 800; color: #f6d365; }
.store-msg { display: flex; align-items: center; gap: 6px; }
.store-msg .ico { width: 14px; height: 14px; }
.store-msg[data-state="err"] { color: #ff8a8a; }
.store-msg[data-state="info"] { color: #9a9ab5; }
.streak-info { display: flex; align-items: center; justify-content: center; gap: 5px; }
.streak-info .ico { width: 14px; height: 14px; color: #f6a35c; }
.account-msg { display: flex; align-items: center; gap: 6px; min-height: 16px; }
.account-msg .ico { width: 14px; height: 14px; }
.premium-title { display: inline-flex; align-items: center; gap: 5px; }
.premium-title .ico { width: 16px; height: 16px; }

/* ---------- brand logo ---------- */
.onboard-logo img {
    width: 76px;
    height: 76px;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(229, 143, 199, 0.35);
    display: inline-block;
}
.header-logo {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    vertical-align: -5px;
    margin-right: 7px;
    box-shadow: 0 2px 8px rgba(229, 143, 199, 0.35);
}

/* ---------- voice / TTS button (premium) ---------- */
.tts-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-dim, #9a9ab5);
    cursor: pointer;
    transition: color .15s, background .15s, border-color .15s;
}
.tts-btn .ico { width: 14px; height: 14px; }
.tts-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.tts-btn.playing { color: #e58fc7; border-color: #e58fc7; }
.tts-btn.loading { opacity: .5; pointer-events: none; }
.tts-btn.loading .ico { display: none; }
.tts-btn.loading::after {
    content: "";
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tts-spin .8s linear infinite;
}
@keyframes tts-spin { to { transform: rotate(360deg); } }
.tts-btn.error { color: #ff8a8a; }
.tts-btn:disabled { opacity: .5; cursor: default; }

/* ---------- photo share ---------- */
.photo-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-dim, #9a9ab5);
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, background .15s;
}
.photo-btn .ico { width: 20px; height: 20px; }
.photo-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.14); }
.photo-btn:disabled { opacity: .5; cursor: default; }
.photo-btn.loading { opacity: .5; pointer-events: none; }
.msg.msg-photo {
    padding: 8px;
    background: transparent;
    max-width: 68%;
}
.msg.msg-photo img {
    display: block;
    width: 100%;
    border-radius: 14px;
    cursor: zoom-in;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.photo-caption {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text);
    background: var(--bot-bubble);
    padding: 8px 12px;
    border-radius: 12px;
    border-bottom-left-radius: 4px;
}
.photo-msg {
    position: absolute;
    font-size: 12px;
    color: #ff8a8a;
    white-space: nowrap;
    right: 14px;
    bottom: 4px;
    pointer-events: none;
}

/* ---------- affection ---------- */
.affection-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
    color: #f6a8d0;
    background: rgba(229, 143, 199, 0.14);
    border: 1px solid rgba(229, 143, 199, 0.3);
    padding: 5px 10px;
    border-radius: 999px;
    cursor: pointer;
}
.affection-badge:hover { background: rgba(229, 143, 199, 0.24); }
.affection-badge .ico { width: 13px; height: 13px; }
.affection-badge[hidden] { display: none; }
.mood-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 4px 8px;
    border-radius: 999px;
    cursor: pointer;
}
.mood-badge[hidden] { display: none; }
.custom-section {
    margin-top: 16px;
    padding: 14px 18px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.custom-label {
    font-size: 13px;
    color: var(--text-dim);
    margin-top: 4px;
}
.custom-section input,
.custom-section select {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-soft);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
}
.custom-section select { appearance: none; }
.custom-lock-hint {
    font-size: 12px;
    color: var(--text-dim);
    margin: 2px 0 0;
    line-height: 1.4;
}
.custom-lock-hint[hidden] { display: none; }
.custom-section input:disabled,
.custom-section select:disabled,
.custom-section select option:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.custom-section .store-btn { margin-top: 4px; }
.character-card { position: relative; }
.card-affection {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(15, 15, 26, 0.72);
    color: #f6a8d0;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}
.card-affection .ico { width: 11px; height: 11px; }

/* ---------- affection modal ---------- */
.affection-body {
    padding: 16px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    max-height: 70vh;
}
.affection-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.affection-lvl {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 700;
    color: #f6a8d0;
    background: rgba(229, 143, 199, 0.14);
    border: 1px solid rgba(229, 143, 199, 0.3);
    padding: 3px 10px;
    border-radius: 999px;
}
.affection-lvl .ico { width: 13px; height: 13px; }
.affection-name { font-size: 17px; font-weight: 700; }
.affection-progress { display: flex; flex-direction: column; gap: 6px; }
.affection-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--card);
    overflow: hidden;
}
.affection-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #e58fc7, #f6a8d0);
    transition: width .3s ease;
}
.affection-progress-label { font-size: 12px; color: var(--text-dim); }
.affection-earn { font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.affection-ladder {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.affection-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 12px;
    background: var(--card);
}
.affection-row.reached { background: rgba(229, 143, 199, 0.08); }
.affection-row.current {
    background: rgba(229, 143, 199, 0.16);
    border: 1px solid rgba(229, 143, 199, 0.35);
}
.affection-row-icon { color: #f6a8d0; display: inline-flex; flex-shrink: 0; }
.affection-row-icon .ico { width: 16px; height: 16px; display: block; }
.affection-row:not(.reached):not(.current) .affection-row-icon { color: var(--text-dim); opacity: .45; }
.affection-row-info { flex: 1; min-width: 0; }
.affection-row-name { font-size: 13px; font-weight: 600; }
.affection-row-req { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.affection-row-status { font-size: 11px; font-weight: 600; flex-shrink: 0; }
.affection-row.reached .affection-row-status { color: #6ddb8f; }
.affection-row.current .affection-row-status { color: #f6a8d0; }
.affection-row:not(.reached):not(.current) .affection-row-status { color: var(--text-dim); }

/* ---------- mood modal ---------- */
.mood-body {
    padding: 16px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    max-height: 70vh;
}
.mood-reason {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #f6a8d0;
    line-height: 1.5;
    padding: 10px 12px;
    background: rgba(229, 143, 199, 0.10);
    border: 1px solid rgba(229, 143, 199, 0.28);
    border-radius: 12px;
}
.mood-reason:empty { display: none; }
.mood-hint {
    margin: 0;
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.5;
}
.mood-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mood-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 12px;
    background: var(--card);
}
.mood-row.active {
    background: rgba(229, 143, 199, 0.16);
    border: 1px solid rgba(229, 143, 199, 0.35);
}
.mood-emoji {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
}
.mood-info { flex: 1; min-width: 0; }
.mood-label { font-size: 13px; font-weight: 600; }
.mood-desc { font-size: 11px; color: var(--text-dim); margin-top: 1px; }

/* ---------- diary (premium) ---------- */
.diary-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    max-height: 70vh;
}
.diary-new-btn { align-self: flex-start; }
.diary-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.diary-entry {
    background: var(--card, #22223a);
    border-radius: 14px;
    padding: 12px 14px;
}
.diary-date {
    font-size: 11px;
    color: var(--text-dim, #9a9ab5);
    margin-bottom: 5px;
}
.diary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}
.diary-head .diary-date { margin-bottom: 0; }
.diary-tts { margin-top: 0; flex-shrink: 0; }
.diary-text {
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
}
.diary-empty {
    color: var(--text-dim, #9a9ab5);
    text-align: center;
    padding: 20px 0;
}