/*
 * m0 Design System — Panels: Onboarding (CANONICAL)
 * The pre-auth canned chat experience. Visual vocabulary mirrors the
 * Home panel: theme-token-only colors, accent-tinted surfaces, restrained
 * typography rhythm. Renders correctly under Dark / Light / High Contrast
 * and any tenant or NFT theme.
 *
 * Watermark and ambient glow stay — they're the one place we go bigger
 * than Home. They use --anviz-accent-secondary (gold family) and
 * --anviz-accent-primary (blue/brand) directly so they repaint with the
 * theme rather than baking in a single palette.
 *
 * Panel-scoped, prefixed (onboarding-*). Token-driven, no literal
 * px/hex/rgba. The 5 @keyframes blocks (onboarding chat animations)
 * live here.
 */

.onboarding-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            var(--dark-bg) 0%,
            color-mix(in srgb, var(--anviz-accent-secondary) 8%, var(--dark-bg)) 100%
        );
    padding: 0;
    gap: 0;
}

/* Ambient glow overlay — derives from the active theme accents. */
.onboarding-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse 120% 80% at 50% 60%,
            color-mix(in srgb, var(--anviz-accent-secondary) 10%, transparent) 0%,
            transparent 60%
        ),
        radial-gradient(
            circle at 20% 20%,
            color-mix(in srgb, var(--anviz-accent-primary) 8%, transparent) 0%,
            transparent 50%
        ),
        radial-gradient(
            circle at 80% 80%,
            color-mix(in srgb, var(--anviz-accent-secondary) 6%, transparent) 0%,
            transparent 50%
        );
    pointer-events: none;
    z-index: 1;
}

/* Floating M watermark — the one place we deliberately go louder
   than Home. Glow color tracks the active theme via
   --anviz-accent-secondary. Animation respects prefers-reduced-motion. */
.onboarding-panel::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    transform: translate(-50%, -42%);
    background: url('/static/m0-logo.jpg') center center no-repeat;
    background-size: contain;
    opacity: 0.045;
    pointer-events: none;
    z-index: 0;
    filter:
        drop-shadow(0 0 5rem color-mix(in srgb, var(--anviz-accent-secondary) 25%, transparent))
        drop-shadow(0 0 10rem color-mix(in srgb, var(--anviz-accent-primary) 12%, transparent))
        contrast(1.2)
        brightness(0.85);
    animation:
        onboarding-watermark-float 25s ease-in-out infinite,
        onboarding-watermark-glow 10s ease-in-out infinite;
}

@keyframes onboarding-watermark-float {
    0%, 100% {
        transform: translate(-50%, -42%) scale(1);
    }
    50% {
        transform: translate(-50%, -44%) scale(1.02);
    }
}

@keyframes onboarding-watermark-glow {
    0%, 100% {
        filter:
            drop-shadow(0 0 5rem color-mix(in srgb, var(--anviz-accent-secondary) 25%, transparent))
            drop-shadow(0 0 10rem color-mix(in srgb, var(--anviz-accent-primary) 12%, transparent))
            contrast(1.2)
            brightness(0.85);
        opacity: 0.045;
    }
    50% {
        filter:
            drop-shadow(0 0 6.25rem color-mix(in srgb, var(--anviz-accent-secondary) 35%, transparent))
            drop-shadow(0 0 12.5rem color-mix(in srgb, var(--anviz-accent-primary) 18%, transparent))
            contrast(1.25)
            brightness(0.95);
        opacity: 0.06;
    }
}

@media (prefers-reduced-motion: reduce) {
    .onboarding-panel::after {
        animation: none;
    }
}

/* ----- Header (mirrors home-panel-header rhythm + an oversized mark) ----- */

.onboarding-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md);
    border-bottom: 1px solid color-mix(in srgb, var(--anviz-accent-secondary) 25%, transparent);
}

/* The header mark and the chat agent avatar both render the m0
   brushed-metal M (/static/m0-logo.jpg) — the same artwork that
   sits behind the panel as the watermark. We crop in on the M
   itself via background-size: 175% + background-position so the
   surrounding dark canvas of the source image stays out of frame;
   an accent-tinted ring + soft glow sits on top to anchor the
   avatar against any theme background. The "M" character is set as
   a fallback below the image (only visible if the asset fails to
   load) and provides the accessible name via aria-label. */

.onboarding-mark {
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    background-color: var(--dark-bg);
    background-image: url('/static/m0-logo.jpg');
    background-size: 175%;
    background-position: center 38%;
    background-repeat: no-repeat;
    border: 1px solid color-mix(in srgb, var(--anviz-accent-secondary) 45%, transparent);
    box-shadow:
        0 0.5rem 2rem color-mix(in srgb, var(--anviz-accent-secondary) 25%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--patriot-white) 12%, transparent);
}

.onboarding-mark-letter {
    /* Visually hidden — only painted if the background image fails
       to load (then the text shows through the transparent layer). */
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', monospace;
    font-size: 1.85rem;
    font-weight: 900;
    color: transparent;
}

.onboarding-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.onboarding-headline {
    margin: 0;
    font-family: 'Orbitron', monospace;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--patriot-white);
    line-height: 1.2;
}

/* ----- Browser-compat warning banner ----- */

.onboarding-warning {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin: 0 var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--status-warning) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--status-warning) 35%, transparent);
    animation: onboarding-warning-in var(--duration-normal) ease;
}

@keyframes onboarding-warning-in {
    from { opacity: 0; transform: translateY(-0.375rem); }
    to   { opacity: 1; transform: translateY(0); }
}

.onboarding-warning-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.onboarding-warning-title {
    font-family: 'Orbitron', monospace;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.04em;
}

.onboarding-warning-text {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* ----- Chat thread -----
   Vertically centered when content is small (the welcome state, ~1
   message) so the composition reads as a hero, not a top-anchored
   chat. As more turns arrive, content grows and naturally flows
   downward; once it overflows the viewport the scroll container
   takes over. min-height: 100% on the inner + justify-content:
   safe center — safe keeps overflowing content accessible. */

.onboarding-thread {
    position: relative;
    z-index: 1;
    flex: 1;
    min-height: 0;
    padding: 0 var(--spacing-lg);
}

.onboarding-thread-inner {
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    gap: var(--spacing-md);
    width: 100%;
    max-width: 45rem;
    margin: 0 auto;
    padding: var(--spacing-md) 0 var(--spacing-xl);
    min-height: 100%;
    box-sizing: border-box;
}

.onboarding-message {
    display: flex;
    gap: var(--spacing-md);
    animation: onboarding-message-in var(--duration-normal) ease;
}

@keyframes onboarding-message-in {
    from { opacity: 0; transform: translateY(0.5rem); }
    to   { opacity: 1; transform: translateY(0); }
}

.onboarding-message.from-user {
    flex-direction: row-reverse;
}

.onboarding-message-avatar {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    background-color: var(--dark-bg);
    background-image: url('/static/m0-logo.jpg');
    background-size: 175%;
    background-position: center 38%;
    background-repeat: no-repeat;
    border: 1px solid color-mix(in srgb, var(--anviz-accent-secondary) 40%, transparent);
    box-shadow:
        0 0.25rem 0.75rem color-mix(in srgb, var(--anviz-accent-secondary) 20%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--patriot-white) 12%, transparent);
}

.onboarding-message-avatar-letter {
    /* Same fallback strategy as .onboarding-mark-letter — the
       letter sits underneath the background image and only shows
       through if the image fails. Accessible name lives on the
       parent via aria-label. */
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: transparent;
}

.onboarding-message-body {
    flex: 1;
    min-width: 0;
    max-width: 35rem;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.onboarding-message-text {
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-lg);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-primary);
}

.from-m .onboarding-message-text {
    background: color-mix(in srgb, var(--anviz-bg-panel) 100%, transparent);
    border: 1px solid color-mix(in srgb, var(--anviz-accent-secondary) 25%, transparent);
    border-top-left-radius: var(--radius-sm);
    backdrop-filter: blur(0.5rem);
}

.from-user .onboarding-message-text {
    background: color-mix(in srgb, var(--anviz-accent-secondary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--anviz-accent-secondary) 45%, transparent);
    border-top-right-radius: var(--radius-sm);
    backdrop-filter: blur(0.5rem);
}

.onboarding-message-text code {
    padding: 1px 0.375rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--anviz-bg-panel) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--anviz-accent-secondary) 20%, transparent);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.82rem;
    color: var(--text-accent);
}

.onboarding-message-text strong {
    color: var(--patriot-white);
    font-weight: 700;
}

.onboarding-message-text p {
    margin: 0 0 var(--spacing-sm) 0;
}

.onboarding-message-text p:last-child {
    margin-bottom: 0;
}

.onboarding-message-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding-left: var(--spacing-xs);
}

/* The pending-entity-invite list reuses the message-actions row but
   sits outside a chat bubble — give it breathing room so the buttons
   read as a group, not afterthoughts. */
.onboarding-entity-choice {
    margin-top: var(--spacing-sm);
}

/* ----- Email input row ----- */

.onboarding-email-row {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--anviz-bg-panel) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--anviz-accent-secondary) 25%, transparent);
    backdrop-filter: blur(0.5rem);
    animation: onboarding-message-in var(--duration-normal) ease;
}

.onboarding-email-input {
    flex: 1;
    min-width: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    background: color-mix(in srgb, var(--dark-bg) 60%, transparent);
    border: 1px solid color-mix(in srgb, var(--anviz-accent-secondary) 30%, transparent);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.95rem;
    outline: none;
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.onboarding-email-input::placeholder {
    color: var(--text-muted);
}

.onboarding-email-input:focus {
    border-color: var(--anviz-accent-primary);
    box-shadow: 0 0 0 0.125rem color-mix(in srgb, var(--anviz-accent-primary) 25%, transparent);
}

/* ----- Typing indicator ----- */

.onboarding-typing {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--anviz-bg-panel) 100%, transparent);
    border: 1px solid color-mix(in srgb, var(--anviz-accent-secondary) 25%, transparent);
    border-top-left-radius: var(--radius-sm);
    width: max-content;
}

.onboarding-typing-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--anviz-accent-primary);
    animation: onboarding-typing-bounce 1.4s infinite;
}

.onboarding-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.onboarding-typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes onboarding-typing-bounce {
    0%, 60%, 100% { transform: translateY(0);    opacity: 0.4; }
    30%           { transform: translateY(-0.375rem); opacity: 1;   }
}

/* ----- Footer (mirrors home-footer vocabulary) ----- */

.onboarding-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-top: 1px solid color-mix(in srgb, var(--anviz-accent-secondary) 20%, transparent);
}

.onboarding-footer-icon {
    font-size: 0.88rem;
    line-height: 1;
}

.onboarding-footer-text {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    color: var(--text-secondary);
}