/**
 * @file index-v2.css
 * @filepath public/css/pages/index-v2.css
 * @description Page-specific refinements for public/index.v2.html: distinct tenant/owner/COEUS chat identities and the replacement CTA section.
 * @updated 2026-05-28
 */

body[data-page="index-v2"] {
    --index-v2-tenant-bg: rgba(31, 80, 119, 0.32);
    --index-v2-tenant-border: rgba(100, 177, 232, 0.46);
    --index-v2-tenant-avatar-bg: rgba(47, 105, 151, 0.28);
    --index-v2-tenant-avatar-text: #e5f4ff;
    --index-v2-owner-bg: var(--accent-soft);
    --index-v2-owner-border: var(--accent-line);
    --index-v2-cta-bg: rgba(255, 255, 255, 0.035);
    --index-v2-cta-border: var(--border-2);
    --index-v2-cta-glow: rgba(255, 77, 0, 0.14);
}

html[data-theme="light"] body[data-page="index-v2"],
html[data-theme="lightmodern"] body[data-page="index-v2"] {
    --index-v2-tenant-bg: rgba(0, 122, 255, 0.12);
    --index-v2-tenant-border: rgba(0, 122, 255, 0.28);
    --index-v2-tenant-avatar-bg: rgba(0, 122, 255, 0.16);
    --index-v2-tenant-avatar-text: var(--text-primary, #2c3e50);
    --index-v2-cta-bg: rgba(255, 255, 255, 0.72);
    --index-v2-cta-border: rgba(44, 62, 80, 0.12);
    --index-v2-cta-glow: rgba(255, 149, 0, 0.14);
}

html[data-theme="darkmodern"] body[data-page="index-v2"] {
    --index-v2-tenant-bg: rgba(14, 116, 144, 0.24);
    --index-v2-tenant-border: rgba(103, 232, 249, 0.34);
    --index-v2-tenant-avatar-bg: rgba(8, 145, 178, 0.24);
    --index-v2-tenant-avatar-text: #ecfeff;
    --index-v2-cta-bg: rgba(248, 250, 252, 0.04);
    --index-v2-cta-border: rgba(248, 250, 252, 0.12);
    --index-v2-cta-glow: rgba(255, 149, 0, 0.16);
}

body[data-page="index-v2"] .bubble .who.ai,
body[data-page="index-v2"] .bubble .who.user.tenant {
    width: auto;
    min-width: 4.8em;
    height: 3.2em;
    padding: 0 0.8em;
    border-radius: 999em;
    font-size: 0.72em;
    letter-spacing: 0;
}

body[data-page="index-v2"] .bubble .who.user.owner {
    width: auto;
    min-width: 3.2em;
    padding: 0 0.6em;
    letter-spacing: 0;
}

body[data-page="index-v2"] .bubble .who.user.tenant {
    background: var(--index-v2-tenant-avatar-bg);
    border-color: var(--index-v2-tenant-border);
    color: var(--index-v2-tenant-avatar-text);
}

body[data-page="index-v2"] .bubble.user.tenant .msg {
    background: var(--index-v2-tenant-bg);
    border-color: var(--index-v2-tenant-border);
    color: var(--text-main);
}

body[data-page="index-v2"] .bubble.user.owner .msg {
    background: var(--index-v2-owner-bg);
    border-color: var(--index-v2-owner-border);
}

body[data-page="index-v2"] .landing-cta {
    position: relative;
    z-index: 2;
    padding: 6.25em 3em 7.5em;
    border-top: 1px solid var(--border);
    background:
        radial-gradient(circle at 50% 0%, var(--index-v2-cta-glow), transparent 34em),
        var(--bg-dark);
}

body[data-page="index-v2"] .landing-cta__wrap {
    max-width: 56em;
    margin: 0 auto;
    padding: 3.5em;
    border: 1px solid var(--index-v2-cta-border);
    background: var(--index-v2-cta-bg);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    text-align: center;
    box-shadow: 0 2em 5em rgba(0, 0, 0, 0.38);
}

body[data-page="index-v2"] .landing-cta__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72em;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1.25em;
}

body[data-page="index-v2"] .landing-cta__title {
    font-size: 3.4em;
    line-height: 1;
    color: var(--text-main);
    margin-bottom: 0.35em;
}

body[data-page="index-v2"] .landing-cta__text {
    max-width: 42em;
    margin: 0 auto 2em;
    color: var(--text-muted);
    font-size: 1em;
    line-height: 1.7;
}

body[data-page="index-v2"] .landing-cta__actions {
    display: flex;
    justify-content: center;
    gap: 0.85em;
    flex-wrap: wrap;
}

@media (max-width: 48em) {
    body[data-page="index-v2"] .landing-cta {
        padding: 4em 1em 5em;
    }

    body[data-page="index-v2"] .landing-cta__wrap {
        padding: 2em 1.25em;
    }

    body[data-page="index-v2"] .landing-cta__title {
        font-size: 2.35em;
    }

    body[data-page="index-v2"] .landing-cta__actions {
        flex-direction: column;
        align-items: stretch;
    }
}