/* Wonda AI — auth v2: split-screen login/register.
   Left: animated chatbot showcase.
   Right: the login or register form.
   Loaded only for pages that request layout=split. */

body.wonda-body--authv2 { background: #ffffff; }

.wonda-authv2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    min-height: 100dvh;
}

/* ---------- Left: showcase ---------- */
.wonda-authv2__showcase {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
    background:
        radial-gradient(900px 500px at 20% 15%, rgba(255, 0, 126, .10), transparent 60%),
        radial-gradient(700px 400px at 85% 85%, rgba(28, 28, 60, .08), transparent 55%),
        linear-gradient(155deg, #1c1c3c 0%, #0f1029 100%);
    color: #e2e8f0;
    overflow: visible;
    isolation: isolate;
}
.wonda-authv2__showcase::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 0);
    background-size: 24px 24px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    opacity: .35;
    pointer-events: none;
    z-index: 0;
}

.wonda-showcase {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
}

.wonda-showcase__stage {
    width: 100%;
    aspect-ratio: 4 / 5;
    max-height: min(72vh, 640px);
    transform-origin: center center;
    transition: transform 900ms cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

.wonda-showcase__window {
    width: 100%;
    height: 100%;
    background: #0f172a;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow:
        0 30px 60px -30px rgba(0,0,0,.6),
        0 12px 30px -12px rgba(0,0,0,.4),
        inset 0 1px 0 rgba(255,255,255,.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.wonda-showcase__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #1e293b;
    border-bottom: 1px solid rgba(255,255,255,.06);
    flex-shrink: 0;
}
.wonda-showcase__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF007E 0%, #c8005f 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.wonda-showcase__avatar svg { width: 16px; height: 16px; display: block; }
.wonda-showcase__headtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wonda-showcase__headtext strong {
    font-size: 14px;
    font-weight: 600;
    color: #f1f5f9;
    line-height: 1.15;
}
.wonda-showcase__headtext span {
    font-size: 11px;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1.15;
}
.wonda-showcase__headtext span::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, .2);
}

.wonda-showcase__messages {
    flex: 1;
    min-height: 0;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #0b1220;
    scrollbar-width: none;
}
.wonda-showcase__messages::-webkit-scrollbar { display: none; }

.wonda-showcase__msg {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 88%;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 320ms ease, transform 320ms ease;
}
.wonda-showcase__msg.is-in { opacity: 1; transform: translateY(0); }
.wonda-showcase__msg--user { align-self: flex-end; flex-direction: row-reverse; }
.wonda-showcase__msg--bot  { align-self: flex-start; }

.wonda-showcase__msg-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.wonda-showcase__msg--bot .wonda-showcase__msg-avatar {
    background: linear-gradient(135deg, #FF007E 0%, #c8005f 100%);
    color: #fff;
}
.wonda-showcase__msg--user .wonda-showcase__msg-avatar {
    background: #334155;
    color: #cbd5e1;
}
.wonda-showcase__msg-avatar svg { width: 14px; height: 14px; display: block; }

.wonda-showcase__bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 13.5px;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
}
.wonda-showcase__msg--bot .wonda-showcase__bubble {
    background: #1e293b;
    color: #e2e8f0;
    border-bottom-left-radius: 4px;
}
.wonda-showcase__msg--user .wonda-showcase__bubble {
    background: linear-gradient(135deg, #FF007E 0%, #c8005f 100%);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.wonda-showcase__typing {
    display: inline-flex;
    gap: 4px;
    padding: 4px 2px;
    align-items: center;
}
.wonda-showcase__typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #94a3b8;
    animation: wonda-show-typing 1.2s infinite;
}
.wonda-showcase__typing span:nth-child(2) { animation-delay: .15s; }
.wonda-showcase__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes wonda-show-typing {
    0%, 60%, 100% { transform: translateY(0); opacity: .5; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

.wonda-showcase__cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: currentColor;
    vertical-align: -2px;
    margin-left: 2px;
    animation: wonda-show-cursor 1s steps(1) infinite;
}
@keyframes wonda-show-cursor { 50% { opacity: 0; } }

/* ---------- Rich cards (product + location) ---------- */
.wonda-showcase__card {
    margin-top: 10px;
    border-radius: 12px;
    overflow: hidden;
    background: #0f172a;
    border: 1px solid rgba(255,255,255,.08);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 400ms ease, transform 400ms ease;
}
.wonda-showcase__card.is-in { opacity: 1; transform: translateY(0); }

.wonda-showcase__card-media {
    width: 100%;
    aspect-ratio: 16 / 10;
    display: block;
    background: #111827;
    overflow: hidden;
}
.wonda-showcase__card-media svg { width: 100%; height: 100%; display: block; }
.wonda-showcase__card--location .wonda-showcase__card-media { aspect-ratio: 16 / 9; }

.wonda-showcase__card-body { padding: 10px 12px 12px; }

.wonda-showcase__card-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #f1f5f9;
    line-height: 1.3;
    margin: 0 0 3px;
}
.wonda-showcase__card-meta {
    font-size: 11.5px;
    color: #94a3b8;
    margin: 0 0 8px;
    line-height: 1.35;
}
.wonda-showcase__card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.wonda-showcase__card-price {
    font-size: 14px;
    font-weight: 700;
    color: #f1f5f9;
    white-space: nowrap;
}
.wonda-showcase__card-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    background: linear-gradient(135deg, #FF007E 0%, #c8005f 100%);
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}
.wonda-showcase__card-cta svg { width: 11px; height: 11px; }

.wonda-showcase__card--location .wonda-showcase__card-cta {
    background: transparent;
    color: #f1f5f9;
    border: 1px solid rgba(255,255,255,.14);
    padding: 6px 12px;
}

.wonda-showcase__caption {
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .02em;
    color: rgba(226,232,240,.55);
    min-height: 18px;
    transition: opacity 260ms ease;
}

/* ---------- Right: form ---------- */
.wonda-authv2__form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 48px;
    background: #ffffff;
    overflow-y: auto;
}

.wonda-authv2__inner { width: 100%; max-width: 400px; }

.wonda-authv2__brand {
    display: inline-flex;
    align-items: flex-end;
    gap: 8px;
    text-decoration: none;
    color: var(--primary, #1c1c3c);
    margin-bottom: 36px;
}
.wonda-authv2__brand-logo {
    max-height: 44px; width: auto; max-width: 200px;
    object-fit: contain; display: block;
}
.wonda-authv2__brand-text {
    font-size: 20px; font-weight: 700;
    letter-spacing: .3px; color: var(--primary, #1c1c3c); line-height: 1;
}
.wonda-authv2__brand-version {
    font-size: 10px; font-weight: 500; color: var(--muted, #64748b);
    line-height: 1; margin-left: 2px; margin-bottom: 1px;
}

.wonda-authv2__title {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--primary, #1c1c3c);
    line-height: 1.2;
}
.wonda-authv2__lead {
    margin: 0 0 28px;
    font-size: 14.5px;
    color: var(--muted, #64748b);
    line-height: 1.55;
}

.wonda-authv2__body > .wonda-notice {
    margin: 0 0 20px;
    font-size: 13.5px;
    border-radius: 10px;
}

.wonda-authv2__body .wonda-field { margin-bottom: 16px; }
.wonda-authv2__body .wonda-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text, #0f172a);
    margin-bottom: 6px;
}
.wonda-authv2__body .wonda-field input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    font-family: inherit;
    font-size: 14.5px;
    background: #fbfcfe;
    color: var(--text, #0f172a);
    transition: border-color .15s, background .15s, box-shadow .15s;
    -webkit-appearance: none;
    appearance: none;
}
.wonda-authv2__body .wonda-field input:hover { border-color: #cbd5e1; }
.wonda-authv2__body .wonda-field input:focus {
    outline: none;
    border-color: var(--accent, #FF007E);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(255, 0, 126, .10);
}
.wonda-authv2__body .wonda-field small {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--muted, #64748b);
}

.wonda-authv2__body .wonda-auth__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 4px 0 20px;
    font-size: 13px;
    color: var(--muted, #64748b);
}
.wonda-authv2__body .wonda-auth__row label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: var(--text, #0f172a);
}
.wonda-authv2__body .wonda-auth__row a {
    color: var(--accent, #FF007E);
    font-weight: 600;
    text-decoration: none;
}
.wonda-authv2__body .wonda-auth__row a:hover { text-decoration: underline; }

.wonda-authv2__body button[type="submit"],
.wonda-authv2__body .wonda-btn--accent {
    display: block;
    width: 100%;
    padding: 13px 20px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #FF2A92 0%, #E60072 100%) !important;
    color: #fff !important;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .15s ease;
    box-shadow:
        0 10px 22px -10px rgba(255, 0, 126, .45),
        inset 0 1px 0 rgba(255, 255, 255, .14);
    font-family: inherit;
    margin-top: 6px;
}
.wonda-authv2__body button[type="submit"]:hover:not([disabled]),
.wonda-authv2__body .wonda-btn--accent:hover:not([disabled]) {
    transform: translateY(-1px);
    box-shadow:
        0 14px 28px -10px rgba(255, 0, 126, .55),
        inset 0 1px 0 rgba(255, 255, 255, .16);
}
.wonda-authv2__body button[type="submit"]:disabled {
    opacity: .65;
    cursor: not-allowed;
}

.wonda-authv2__foot {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--border, #e5e7eb);
    text-align: center;
    font-size: 13.5px;
    color: var(--muted, #64748b);
}
.wonda-authv2__foot a {
    font-weight: 600;
    color: var(--accent, #FF007E);
    text-decoration: none;
}
.wonda-authv2__foot a:hover { text-decoration: underline; }

.wonda-authv2__credit {
    margin-top: 32px;
    text-align: center;
    font-size: 12px;
    color: var(--muted, #64748b);
}
.wonda-authv2__credit a { color: var(--muted, #64748b); text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .wonda-authv2__showcase { padding: 32px 24px; }
    .wonda-authv2__form { padding: 32px; }
    .wonda-showcase__stage { max-height: min(62vh, 520px); }
}

@media (max-width: 860px) {
    .wonda-authv2 { grid-template-columns: 1fr; min-height: 0; }
    .wonda-authv2__showcase {
        padding: 28px 20px 24px;
        order: -1;
    }
    .wonda-showcase { max-width: 380px; gap: 16px; }
    .wonda-showcase__stage { aspect-ratio: 4 / 3; max-height: 340px; }
    .wonda-showcase__head { padding: 10px 12px; }
    .wonda-showcase__messages { padding: 14px 12px; gap: 10px; }
    .wonda-showcase__bubble { font-size: 12.5px; padding: 9px 12px; }
    .wonda-authv2__form {
        padding: 32px 22px 40px;
        justify-content: flex-start;
    }
    .wonda-authv2__brand { margin-bottom: 24px; }
    .wonda-authv2__title { font-size: 22px; }
    .wonda-authv2__lead { margin-bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .wonda-showcase__stage { transition: none !important; transform: none !important; }
    .wonda-showcase__msg,
    .wonda-showcase__card { transition: none !important; opacity: 1 !important; transform: none !important; }
    .wonda-showcase__cursor { animation: none !important; opacity: 0; }
}

/* ============================================================
   FIX: the grid belongs on <body>, since the aside and section
   are direct children of body with no inner wrapper.
   ============================================================ */

body.wonda-body--authv2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
}

/* The old .wonda-body--auth gradient must not show through. */
body.wonda-body--authv2.wonda-body--auth {
    background: #ffffff !important;
}

body.wonda-body--authv2 > .wonda-authv2__showcase,
body.wonda-body--authv2 > .wonda-authv2__form {
    min-width: 0;
    min-height: 0;
}

@media (max-width: 860px) {
    body.wonda-body--authv2 {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
    }
}

/* ============================================================
   WONDA_SHOWCASE_V2 — composer, cards, themes
   Mirrors the production widget: header, message canvas, composer.
   Scoped to .wonda-showcase so nothing leaks to the widget.
   ============================================================ */

.wonda-showcase {
    --sc-accent:  #FF007E;
    --sc-accent-2:#c8005f;
    --sc-surface:        #0f172a;
    --sc-surface-2:      #0b1220;
    --sc-bubble-bg:      #1e293b;
    --sc-bubble-border:  rgba(255,255,255,.08);
    --sc-text:           #e2e8f0;
    --sc-text-muted:     #94a3b8;
    --sc-input-bg:       #1e293b;
    --sc-input-border:   rgba(255,255,255,.08);
    --sc-on-accent:      #ffffff;
}

/* ---------- Window shell (mirrors #wonda-root .wonda-window) --------- */
.wonda-showcase__window {
    width: 100%;
    height: 100%;
    background: var(--sc-surface);
    border-radius: 20px;
    border: 1px solid var(--sc-bubble-border);
    box-shadow:
        0 30px 60px -30px rgba(0,0,0,.6),
        0 12px 30px -12px rgba(0,0,0,.4),
        inset 0 1px 0 rgba(255,255,255,.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow .5s ease;
}

/* ---------- Header (mirrors .wonda-window__header) ------------------- */
.wonda-showcase__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    min-height: 56px;
    background: var(--sc-accent);
    background: linear-gradient(135deg, var(--sc-accent) 0%, var(--sc-accent-2) 100%);
    color: var(--sc-on-accent);
    flex-shrink: 0;
    transition: background .5s ease;
}
.wonda-showcase__brand {
    display: inline-flex;
    align-items: flex-end;
    gap: 6px;
    min-width: 0;
    max-width: 70%;
}
.wonda-showcase__brand strong {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--sc-on-accent);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wonda-showcase__brand-logo {
    height: 20px;
    width: auto;
    max-width: 110px;
    object-fit: contain;
    display: block;
}
.wonda-showcase__version {
    font-size: 10px;
    font-weight: 500;
    opacity: .72;
    color: inherit;
    line-height: 1;
    margin-bottom: 1px;
    white-space: nowrap;
    pointer-events: none;
}
.wonda-showcase__header-spacer { flex: 1; }
.wonda-showcase__header-btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255,255,255,.12);
    color: var(--sc-on-accent);
    flex-shrink: 0;
}
.wonda-showcase__header-btn svg {
    width: 15px;
    height: 15px;
    display: block;
    color: inherit;
    fill: currentColor;
}

/* ---------- Message canvas (mirrors .wonda-messages) ---------------- */
.wonda-showcase__messages {
    flex: 1;
    min-height: 0;
    padding: 18px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--sc-surface-2);
    scrollbar-width: none;
    scroll-behavior: smooth;
}
.wonda-showcase__messages::-webkit-scrollbar { display: none; }

/* ---------- Message row (mirrors .wonda-message) -------------------- */
.wonda-showcase__msg {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 90%;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 320ms ease, transform 320ms ease;
}
.wonda-showcase__msg.is-in { opacity: 1; transform: translateY(0); }
.wonda-showcase__msg--user { align-self: flex-end; flex-direction: row-reverse; }
.wonda-showcase__msg--bot  { align-self: flex-start; }

.wonda-showcase__msg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
}
.wonda-showcase__msg-avatar--bot {
    background: var(--sc-accent);
    background: linear-gradient(135deg, var(--sc-accent) 0%, var(--sc-accent-2) 100%);
    color: var(--sc-on-accent);
    transition: background .5s ease;
}
.wonda-showcase__msg-avatar--user {
    background: rgba(255,255,255,.06);
    border: 1px solid var(--sc-bubble-border);
    color: var(--sc-text-muted);
}
.wonda-showcase__msg-avatar svg {
    width: 15px;
    height: 15px;
    display: block;
    color: inherit;
    fill: currentColor;
}

/* ---------- Bubble (mirrors .wonda-bubble) -------------------------- */
.wonda-showcase__bubble {
    min-width: 0;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 13.5px;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.wonda-showcase__msg--bot .wonda-showcase__bubble {
    background: var(--sc-bubble-bg);
    color: var(--sc-text);
    border: 1px solid var(--sc-bubble-border);
    border-bottom-left-radius: 6px;
}
.wonda-showcase__msg--user .wonda-showcase__bubble {
    background: var(--sc-accent);
    background: linear-gradient(135deg, var(--sc-accent) 0%, var(--sc-accent-2) 100%);
    color: var(--sc-on-accent);
    border: 0;
    border-bottom-right-radius: 6px;
    transition: background .5s ease;
}
.wonda-showcase__body { display: inline; }

/* ---------- Typing indicator (mirrors .wonda-typing) --------------- */
.wonda-showcase__typing-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}
.wonda-showcase__typing-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--sc-text-muted);
    line-height: 1;
}
.wonda-showcase__typing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.wonda-showcase__typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sc-text-muted);
    display: inline-block;
    animation: wonda-show-typing 1.2s infinite;
}
.wonda-showcase__typing span:nth-child(2) { animation-delay: .15s; }
.wonda-showcase__typing span:nth-child(3) { animation-delay: .30s; }
@keyframes wonda-show-typing {
    0%, 60%, 100% { transform: translateY(0);   opacity: .45; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

/* ---------- Composer (mirrors .wonda-composer) ---------------------- */
.wonda-showcase__composer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 14px 14px;
    background: var(--sc-surface);
    border-top: 1px solid var(--sc-bubble-border);
    flex-shrink: 0;
}
.wonda-showcase__input {
    flex: 1;
    min-width: 0;
    min-height: 40px;
    max-height: 96px;
    padding: 10px 14px;
    border: 1px solid var(--sc-input-border);
    border-radius: 20px;
    background: var(--sc-input-bg);
    color: var(--sc-text);
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.4;
    resize: none;
    overflow-y: auto;
    scrollbar-width: none;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.wonda-showcase__input::-webkit-scrollbar { display: none; }
.wonda-showcase__input::placeholder { color: var(--sc-text-muted); }
.wonda-showcase__input:focus {
    outline: none;
    border-color: var(--sc-accent);
    box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}
/* Show a caret cursor while the showcase is typing */
.wonda-showcase__input.is-typing { caret-color: var(--sc-accent); }

.wonda-showcase__send {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 14px;
    background: var(--sc-accent);
    background: linear-gradient(135deg, var(--sc-accent) 0%, var(--sc-accent-2) 100%);
    color: var(--sc-on-accent);
    cursor: default;
    padding: 0;
    transition:
        transform 120ms ease,
        filter 120ms ease,
        box-shadow 200ms ease,
        background .5s ease;
    box-shadow:
        0 6px 16px -6px rgba(0,0,0,.5),
        inset 0 1px 0 rgba(255,255,255,.15);
    pointer-events: none; /* showcase is not interactive */
}
.wonda-showcase__send svg {
    width: 17px;
    height: 17px;
    display: block;
    color: inherit;
    fill: currentColor;
}
.wonda-showcase__send.is-pressing {
    transform: scale(.9);
    filter: brightness(.85);
    box-shadow:
        0 2px 6px -2px rgba(0,0,0,.5),
        inset 0 1px 0 rgba(255,255,255,.08);
}

/* ---------- Footer (mirrors .wonda-footer) -------------------------- */
.wonda-showcase__footer {
    padding: 6px 0 8px;
    text-align: center;
    font-size: 10.5px;
    color: var(--sc-text-muted);
    background: var(--sc-surface);
    border-top: 1px solid var(--sc-bubble-border);
    flex-shrink: 0;
}
.wonda-showcase__footer a {
    color: var(--sc-text-muted);
    text-decoration: none;
}
.wonda-showcase__footer a:hover { text-decoration: underline; }

/* ---------- Cards --------------------------------------------------- */
.wonda-showcase__card {
    margin-top: 10px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--sc-surface);
    border: 1px solid var(--sc-bubble-border);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 400ms ease, transform 400ms ease;
}
.wonda-showcase__card.is-in { opacity: 1; transform: translateY(0); }

.wonda-showcase__card-media {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #0b1220;
    overflow: hidden;
    position: relative;
    display: block;
}
.wonda-showcase__card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.wonda-showcase__card-media--map { aspect-ratio: 16 / 9; }
.wonda-showcase__card-media--map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    filter: saturate(.9);
}

.wonda-showcase__card-body { padding: 10px 12px 12px; }

.wonda-showcase__card-title {
    font-size: 13px;
    font-weight: 600;
    color: #f1f5f9;
    line-height: 1.3;
    margin: 0 0 3px;
}
.wonda-showcase__card-meta {
    font-size: 11.5px;
    color: var(--sc-text-muted);
    line-height: 1.35;
    margin: 0 0 8px;
}
.wonda-showcase__card-address {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #e2e8f0;
    line-height: 1.4;
    margin: 0 0 8px;
}
.wonda-showcase__card-pin {
    display: inline-flex;
    align-items: center;
    color: var(--sc-accent);
    flex-shrink: 0;
}
.wonda-showcase__card-pin svg { width: 12px; height: 12px; fill: currentColor; }

.wonda-showcase__card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.wonda-showcase__card-price {
    font-size: 14px;
    font-weight: 700;
    color: #f1f5f9;
    white-space: nowrap;
}
.wonda-showcase__card-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 9px;
    background: var(--sc-accent);
    background: linear-gradient(135deg, var(--sc-accent) 0%, var(--sc-accent-2) 100%);
    color: var(--sc-on-accent);
    text-decoration: none;
    white-space: nowrap;
    transition: background .5s ease;
}
.wonda-showcase__card-cta svg {
    width: 11px;
    height: 11px;
    fill: currentColor;
}
.wonda-showcase__card--location .wonda-showcase__card-cta {
    background: transparent;
    color: #e2e8f0;
    border: 1px solid rgba(255,255,255,.14);
}

/* ---------- Zoom stage --------------------------------------------- */
.wonda-showcase__stage {
    transform-origin: center center;
    transition: transform 900ms cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

/* ---------- Caption ------------------------------------------------- */
.wonda-showcase__caption {
    margin: 0;
    text-align: center;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .01em;
    color: rgba(226,232,240,.6);
    min-height: 18px;
    transition: opacity 260ms ease;
}

/* ---------- Reduced motion ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .wonda-showcase__stage    { transition: none !important; }
    .wonda-showcase__msg,
    .wonda-showcase__card     { transition: none !important; opacity: 1 !important; transform: none !important; }
    .wonda-showcase__typing span { animation: none !important; opacity: .6; }
}

/* ============================================================
   WONDA_SHOWCASE_SIZE
   Narrow, tall chat panel. Matches the real widget's proportion
   (approximately 1 : 1.7) so the viewer sees more of the
   conversation at once. Zoom stays subtle so the layout reads
   like a real phone-shaped chat window.
   ============================================================ */

.wonda-showcase__stage {
    width: 100% !important;
    max-width: 340px !important;
    aspect-ratio: 9 / 16 !important;
    max-height: min(82vh, 720px) !important;
    margin: 0 auto !important;
    transform-origin: center center;
    transition: transform 900ms cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

/* Give the showcase a touch more vertical room in the panel */
.wonda-showcase {
    gap: 14px;
    max-width: 380px;
}

/* Tighter message bubbles for the narrower window */
.wonda-showcase__messages {
    padding: 14px 13px 12px;
    gap: 10px;
}
.wonda-showcase__msg { max-width: 88%; }
.wonda-showcase__bubble {
    padding: 9px 12px;
    font-size: 13px;
    line-height: 1.48;
}
.wonda-showcase__msg-avatar {
    width: 26px;
    height: 26px;
}
.wonda-showcase__msg-avatar svg { width: 13px; height: 13px; }

/* Slimmer composer to match */
.wonda-showcase__composer {
    padding: 10px 12px 12px;
    gap: 6px;
}
.wonda-showcase__input {
    min-height: 38px;
    padding: 9px 13px;
    font-size: 13px;
}
.wonda-showcase__send {
    width: 38px;
    height: 38px;
    border-radius: 12px;
}
.wonda-showcase__send svg { width: 16px; height: 16px; }

/* Header a hair shorter */
.wonda-showcase__header {
    padding: 10px 12px;
    min-height: 50px;
}
.wonda-showcase__brand strong { font-size: 14px; }
.wonda-showcase__header-btn { width: 28px; height: 28px; }
.wonda-showcase__header-btn svg { width: 14px; height: 14px; }

/* Caption below the window — kept clean and small */
.wonda-showcase__caption {
    display: block !important;
    margin: 0;
    text-align: center;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .01em;
    color: rgba(226,232,240,.6);
    min-height: 18px;
    transition: opacity 260ms ease;
}

/* Responsive — narrow but not cramped on small screens */
@media (max-width: 1024px) {
    .wonda-showcase__stage {
        max-width: 320px !important;
        max-height: min(78vh, 640px) !important;
    }
}
@media (max-width: 860px) {
    .wonda-showcase__stage {
        max-width: 280px !important;
        aspect-ratio: 9 / 16 !important;
        max-height: min(70vh, 500px) !important;
    }
    .wonda-showcase { max-width: 320px; }
}
@media (max-width: 480px) {
    .wonda-showcase__stage {
        max-width: 260px !important;
        max-height: min(68vh, 460px) !important;
    }
}

/* ============================================================
   WONDA_SHOWCASE_CHROME + NON-INTERACTIVE
   Header extras (WhatsApp, theme toggle), pointer-events lock,
   text-selection lock, mobile white surface.
   ============================================================ */

/* ---------- Fully non-interactive: no clicks, no selection -------- */
.wonda-showcase,
.wonda-showcase * {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    -webkit-touch-callout: none !important;
}
.wonda-authv2__showcase,
.wonda-authv2__showcase * {
    pointer-events: none !important;
    cursor: default !important;
}
/* Prevent focus outlines on the readonly textarea */
.wonda-showcase__input:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--sc-input-border) !important;
}
.wonda-showcase__input {
    pointer-events: none !important;
    caret-color: transparent !important;
}

/* ---------- Header extras ---------------------------------------- */
.wonda-showcase__header-wa svg {
    width: 15px !important;
    height: 15px !important;
}
/* Theme toggle shows the sun in dark mode (to hint "click for light")
   and the moon in light mode. Showcase is dark, so show the sun. */
.wonda-showcase__header-theme .wonda-showcase__icon-moon { display: none; }
.wonda-showcase__header-theme .wonda-showcase__icon-sun  { display: block; }

/* ---------- Bot avatar: strong accent background ---------------- */
.wonda-showcase__msg-avatar--bot {
    background: var(--sc-accent) !important;
    background: linear-gradient(135deg,
        var(--sc-accent) 0%,
        var(--sc-accent-2) 100%) !important;
    color: #ffffff !important;
    box-shadow:
        0 4px 10px -4px color-mix(in srgb, var(--sc-accent) 55%, transparent),
        inset 0 1px 0 rgba(255,255,255,.18);
    transition: background .5s ease, box-shadow .5s ease;
}
.wonda-showcase__msg-avatar--bot svg {
    color: #ffffff !important;
    fill: currentColor !important;
}

/* The header avatar must be replaced by the standard bot avatar.
   The showcase header uses .wonda-showcase__avatar only on the
   very first version — remove that reference so it uses the same
   gradient as bubbles. */
.wonda-showcase__avatar {
    background: var(--sc-accent) !important;
    background: linear-gradient(135deg,
        var(--sc-accent) 0%,
        var(--sc-accent-2) 100%) !important;
    color: #ffffff !important;
    transition: background .5s ease;
}

/* ============================================================
   MOBILE — white card on the auth background
   ============================================================ */
@media (max-width: 860px) {
    .wonda-authv2__showcase {
        background: #f8fafc !important;
        background-image: none !important;
        padding: 32px 20px 28px !important;
    }
    .wonda-authv2__showcase::before {
        display: none !important;   /* hide the dot grid */
    }
    /* Showcase window: white card with subtle elevation */
    .wonda-showcase__window {
        background: #ffffff !important;
        border: 1px solid rgba(28, 28, 60, .08) !important;
        box-shadow:
            0 1px 2px rgba(15, 23, 42, .04),
            0 20px 40px -24px rgba(15, 23, 42, .18),
            0 6px 16px -8px rgba(15, 23, 42, .08) !important;
        border-radius: 22px !important;
    }
    /* Header — pink gradient still, but no dark chrome */
    .wonda-showcase__header {
        border-bottom: 0 !important;
    }
    /* Message canvas on white */
    .wonda-showcase__messages {
        background: #ffffff !important;
    }
    .wonda-showcase__msg--bot .wonda-showcase__bubble {
        background: #f1f5f9 !important;
        color: #0f172a !important;
        border: 1px solid rgba(28, 28, 60, .06) !important;
    }
    .wonda-showcase__msg-avatar--user {
        background: #e2e8f0 !important;
        color: #475569 !important;
        border: 1px solid rgba(28, 28, 60, .08) !important;
    }
    /* Composer on white */
    .wonda-showcase__composer {
        background: #ffffff !important;
        border-top: 1px solid rgba(28, 28, 60, .06) !important;
    }
    .wonda-showcase__input {
        background: #f8fafc !important;
        border-color: rgba(28, 28, 60, .10) !important;
        color: #0f172a !important;
    }
    .wonda-showcase__input::placeholder { color: #94a3b8 !important; }
    /* Footer on white */
    .wonda-showcase__footer {
        background: #ffffff !important;
        color: #94a3b8 !important;
        border-top: 1px solid rgba(28, 28, 60, .06) !important;
    }
    .wonda-showcase__footer a { color: #64748b !important; }
    /* Card surfaces */
    .wonda-showcase__card {
        background: #ffffff !important;
        border-color: rgba(28, 28, 60, .08) !important;
    }
    .wonda-showcase__card-title { color: #0f172a !important; }
    .wonda-showcase__card-meta  { color: #64748b !important; }
    .wonda-showcase__card-price { color: #0f172a !important; }
    .wonda-showcase__card-address { color: #0f172a !important; }
    .wonda-showcase__card--location .wonda-showcase__card-cta {
        color: #0f172a !important;
        border-color: rgba(28, 28, 60, .12) !important;
    }
    /* Typing label on white */
    .wonda-showcase__typing-label { color: #64748b !important; }
    .wonda-showcase__typing span  { background: #94a3b8 !important; }
    /* Caption below the card */
    .wonda-showcase__caption { color: #64748b !important; }
}

/* ============================================================
   WONDA_SHOWCASE_MAP — Leaflet + OSM
   Overrides Leaflet's light defaults for a dark surface, styles
   the accent marker, and provides a text fallback if Leaflet or
   tiles fail to load.
   ============================================================ */

.wonda-showcase__map {
    width: 100%;
    height: 100%;
    background: #111827;
    position: relative;
    overflow: hidden;
}

/* Leaflet container needs an explicit height inside the aspect box */
.wonda-showcase__map .leaflet-container {
    width: 100%;
    height: 100%;
    background: #0f172a;
    font-family: inherit;
    font-size: 11px;
}

/* Attribution control — keep, but make it less shouty */
.wonda-showcase__map .leaflet-control-attribution {
    background: rgba(15, 23, 42, .78) !important;
    color: rgba(226, 232, 240, .75) !important;
    font-size: 9.5px !important;
    padding: 1px 5px !important;
    border-radius: 4px 0 0 0 !important;
    backdrop-filter: blur(4px);
}
.wonda-showcase__map .leaflet-control-attribution a {
    color: rgba(226, 232, 240, .92) !important;
    text-decoration: none !important;
}
.wonda-showcase__map .leaflet-control-attribution a:hover {
    text-decoration: underline !important;
}

/* Kill the Leaflet focus outline — this card is decorative */
.wonda-showcase__map .leaflet-container:focus,
.wonda-showcase__map .leaflet-container:focus-visible {
    outline: none !important;
}
.wonda-showcase__map .leaflet-interactive { pointer-events: none !important; }

/* Marker has no default Leaflet chrome */
.wonda-showcase__map-marker,
.wonda-showcase__map-marker.leaflet-div-icon {
    background: transparent !important;
    border: 0 !important;
}

@keyframes wonda-map-pulse {
    0%   { transform: scale(.8); opacity: .45; }
    70%  { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* Fallback card if Leaflet fails to load */
.wonda-showcase__map-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background:
        linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #e2e8f0;
    font-size: 12.5px;
    padding: 16px;
    text-align: center;
}
.wonda-showcase__map-fallback svg {
    width: 22px;
    height: 22px;
    fill: var(--sc-accent, #FF007E);
    opacity: .9;
}

/* ============================================================
   WONDA_SHOWCASE_WHITE — light panel on every viewport
   Matches the mobile treatment so the whole auth page reads
   as one clean white surface.
   ============================================================ */
.wonda-authv2__showcase {
    background: #ffffff !important;
    background-image: none !important;
    color: #0f172a !important;
    overflow: hidden !important;
}
.wonda-authv2__showcase::before { display: none !important; }

.wonda-showcase {
    overflow: hidden !important;
}

.wonda-showcase__window {
    background: #ffffff !important;
    border: 1px solid rgba(28, 28, 60, .08) !important;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .04),
        0 24px 48px -28px rgba(15, 23, 42, .20),
        0 6px 16px -8px rgba(15, 23, 42, .08) !important;
}
.wonda-showcase__messages { background: #ffffff !important; }

.wonda-showcase__msg--bot .wonda-showcase__bubble {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border: 1px solid rgba(28, 28, 60, .06) !important;
}
.wonda-showcase__msg-avatar--user {
    background: #e2e8f0 !important;
    color: #475569 !important;
    border: 1px solid rgba(28, 28, 60, .08) !important;
}

.wonda-showcase__composer {
    background: #ffffff !important;
    border-top: 1px solid rgba(28, 28, 60, .06) !important;
}
.wonda-showcase__input {
    background: #f8fafc !important;
    border-color: rgba(28, 28, 60, .10) !important;
    color: #0f172a !important;
}
.wonda-showcase__input::placeholder { color: #94a3b8 !important; }

.wonda-showcase__footer {
    background: #ffffff !important;
    color: #94a3b8 !important;
    border-top: 1px solid rgba(28, 28, 60, .06) !important;
}
.wonda-showcase__footer a { color: #64748b !important; }

.wonda-showcase__caption { color: #64748b !important; }

.wonda-showcase__card {
    background: #ffffff !important;
    border-color: rgba(28, 28, 60, .08) !important;
}
.wonda-showcase__card-title { color: #0f172a !important; }
.wonda-showcase__card-meta  { color: #64748b !important; }
.wonda-showcase__card-price { color: #0f172a !important; }
.wonda-showcase__card-address { color: #0f172a !important; }
.wonda-showcase__card--location .wonda-showcase__card-cta {
    color: #0f172a !important;
    border-color: rgba(28, 28, 60, .12) !important;
}

.wonda-showcase__typing-label { color: #64748b !important; }
.wonda-showcase__typing span  { background: #94a3b8 !important; }

/* ============================================================
   WONDA_SHOWCASE_SCENE_SLIDE — crossfade between scenarios
   Old scene slides out to the left, new one slides in from the
   right. Applied via inline styles in auth-showcase.js.
   ============================================================ */
.wonda-showcase__window {
    will-change: transform, opacity;
}

/* ============================================================
   WONDA_SHOWCASE_TYPING_ZOOM_V2
   The composer is temporarily detached from the layout via
   position: fixed and animated with FLIP so it can grow to fill
   the showcase without being clipped by any ancestor. Header
   and messages blur behind it while the visitor types.
   ============================================================ */

/* Stage allows the window to slide beyond it, aside clips at its edge. */
.wonda-showcase__stage { overflow: visible !important; position: relative; }
.wonda-authv2__showcase { overflow: hidden !important; }

/* Blur behind the lifted composer */
.wonda-showcase__header,
.wonda-showcase__messages,
.wonda-showcase__footer {
    transition: filter 520ms ease, opacity 520ms ease;
}
.wonda-showcase__stage.is-typing .wonda-showcase__header,
.wonda-showcase__stage.is-typing .wonda-showcase__messages,
.wonda-showcase__stage.is-typing .wonda-showcase__footer {
    filter: blur(8px) brightness(.9);
    opacity: .22;
}

/* Composer when lifted — internal metrics only. Position/size
   are set inline by JS via FLIP. */
/* NOTE: no `transition: none !important` here.
   The JS sets inline transition properties per-property during the
   FLIP animation, and CSS !important would override them, causing
   the composer to snap instead of lift. */
.wonda-showcase__composer.is-lifted {
    padding: 24px 28px 26px !important;
    border-radius: 30px !important;
    background: #ffffff !important;
    border: 1px solid rgba(28, 28, 60, .10) !important;
    box-shadow:
        0 30px 70px -20px rgba(15, 23, 42, .35),
        0 8px 24px -12px rgba(15, 23, 42, .18) !important;
    gap: 16px !important;
}
.wonda-showcase__composer.is-lifted textarea {
    font-size: 20px !important;
    line-height: 1.4 !important;
    min-height: 68px !important;
    padding: 20px 26px !important;
    border-radius: 28px !important;
}
.wonda-showcase__composer.is-lifted textarea::placeholder {
    font-size: 20px !important;
}
.wonda-showcase__composer.is-lifted button.wonda-showcase__send {
    width: 68px !important;
    height: 68px !important;
    border-radius: 22px !important;
}
.wonda-showcase__composer.is-lifted button.wonda-showcase__send svg {
    width: 30px !important;
    height: 30px !important;
}

@media (prefers-reduced-motion: reduce) {
    .wonda-showcase__stage.is-typing .wonda-showcase__header,
    .wonda-showcase__stage.is-typing .wonda-showcase__messages,
    .wonda-showcase__stage.is-typing .wonda-showcase__footer {
        filter: none !important;
        opacity: 1 !important;
    }
}

@media (max-width: 480px) {
    /* Composer keeps its normal mobile metrics when lifted. */
    .wonda-showcase__composer.is-lifted {
        padding: 10px 12px 12px !important;
        border-radius: 18px !important;
    }
}

/* ============================================================
   WONDA_SHOWCASE_WIDE_MOBILE
   On phones the window fills the showcase, leaving exactly 15px
   of margin on the left and right. The old 9/16 aspect-ratio lock
   is removed — otherwise widening the box also made it taller
   than the viewport.
   ============================================================ */

@media (max-width: 860px) {
    .wonda-authv2__showcase {
        padding: 26px 15px 22px !important;
    }
    .wonda-showcase {
        max-width: none !important;
        width: 100% !important;
        gap: 12px !important;
    }
    .wonda-showcase__stage {
        width: 100% !important;
        max-width: none !important;
        aspect-ratio: auto !important;
        height: min(68vh, 560px) !important;
        max-height: none !important;
    }
}

@media (max-width: 480px) {
    .wonda-authv2__showcase {
        padding: 22px 15px 20px !important;
    }
    .wonda-showcase__stage {
        width: 100% !important;
        max-width: none !important;
        aspect-ratio: auto !important;
        height: min(66vh, 520px) !important;
        max-height: none !important;
    }
}

/* ============================================================
   WONDA_SHOWCASE_MOBILE_LIFT_FIX
   On mobile the lifted composer must NOT change any layout
   property of the container OR its children. The desktop
   `.is-lifted textarea { font-size:20px }` and 68px button rules
   have `!important` and no media query, so they leak into mobile.
   This block is at the end of the file and wins.
   ============================================================ */
@media (max-width: 860px) {
    /* Container keeps its natural mobile padding / gap / radius.
       Only a shadow to signal "this is floating". */
    .wonda-showcase__composer.is-lifted {
        padding: 10px 12px 12px !important;
        gap: 6px !important;
        border-radius: 20px !important;
        box-shadow:
            0 24px 50px -16px rgba(15, 23, 42, .32),
            0 6px 18px -10px rgba(15, 23, 42, .18) !important;
    }
    /* Children reset to their natural mobile size. */
    .wonda-showcase__composer.is-lifted textarea,
    .wonda-showcase__composer.is-lifted textarea::placeholder {
        font-size: 13px !important;
        line-height: 1.4 !important;
        min-height: 38px !important;
        max-height: 96px !important;
        padding: 9px 13px !important;
        border-radius: 20px !important;
    }
    .wonda-showcase__composer.is-lifted button.wonda-showcase__send {
        width: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;
    }
    .wonda-showcase__composer.is-lifted button.wonda-showcase__send svg {
        width: 16px !important;
        height: 16px !important;
    }
}

/* ============================================================
   WONDA_SHOWCASE_SOFT
   Final overrides. Lighter blur behind the lifted composer,
   softer transition curves, and a slightly longer feel overall.
   Loaded last so it wins.
   ============================================================ */

/* Desktop blur — was 8px + 22% opacity, too heavy. */
.wonda-showcase__stage.is-typing .wonda-showcase__header,
.wonda-showcase__stage.is-typing .wonda-showcase__messages,
.wonda-showcase__stage.is-typing .wonda-showcase__footer {
    filter: blur(4px) brightness(.97);
    opacity: .48;
    transition: filter 700ms cubic-bezier(.16,1,.3,1),
                opacity 700ms cubic-bezier(.16,1,.3,1);
}

/* Soft release on un-blur too. */
.wonda-showcase__header,
.wonda-showcase__messages,
.wonda-showcase__footer {
    transition: filter 700ms cubic-bezier(.16,1,.3,1),
                opacity 700ms cubic-bezier(.16,1,.3,1);
}

/* Mobile blur — was 4px + 28%, still a touch strong. */
@media (max-width: 860px) {
    .wonda-showcase__stage.is-typing .wonda-showcase__header,
    .wonda-showcase__stage.is-typing .wonda-showcase__messages,
    .wonda-showcase__stage.is-typing .wonda-showcase__footer {
        filter: blur(2px) brightness(.98);
        opacity: .55;
    }
}

/* Every direct composer metric transition gets the soft curve. */
.wonda-showcase__composer,
.wonda-showcase__composer textarea,
.wonda-showcase__composer button.wonda-showcase__send {
    transition-timing-function: cubic-bezier(.16,1,.3,1) !important;
    transition-duration: 700ms !important;
}

/* ============================================================
   WONDA_SHOWCASE_FINAL_DESKTOP
   Two layout facts the previous patches got wrong:
     1. .wonda-showcase had overflow: hidden — it clipped the
        slide-in long before the window could reach the half-
        screen edge. Only the aside should clip.
     2. The window had will-change: transform, which makes it a
        containing block for fixed-position descendants. That's
        why the composer couldn't expand past the chat width.
   ============================================================ */

/* Window slides freely; only the aside clips at the half-screen edge. */
.wonda-showcase { overflow: visible !important; }
.wonda-showcase__stage { overflow: visible !important; }
.wonda-authv2__showcase { overflow: hidden !important; }

/* Composer while lifted — position, size, padding all set inline
   by JS so no ancestor can hijack them. */
.wonda-showcase__composer.is-lifted {
    z-index: 50 !important;
    box-shadow:
        0 30px 70px -20px rgba(15, 23, 42, .35),
        0 8px 24px -12px rgba(15, 23, 42, .18) !important;
}

/* ============================================================
   WONDA_SHOWCASE_TRIM
   1. Lifted textarea has a FIXED height (not min-height) and
      box-sizing: border-box, so the composer's total height is
      exactly padding-top + 68 + padding-bottom = 118px. No blank
      space above or below the text.
   2. Composer stretch-aligns so the textarea never floats in a
      taller box.
   3. Header explicitly right-aligns its button cluster.
   4. Buttons keep the accent gradient even after the composer is
      moved out of .wonda-showcase (the CSS var lives on the
      composer itself now).
   ============================================================ */

/* ── Lifted composer layout on desktop ── */
@media (min-width: 861px) {
    .wonda-showcase__composer.is-lifted {
        align-items: stretch !important;
        height: auto !important;
    }
    .wonda-showcase__composer.is-lifted textarea {
        height: 68px !important;
        min-height: 0 !important;
        max-height: 68px !important;
        box-sizing: border-box !important;
        font-size: 20px !important;
        line-height: 1.4 !important;
        padding: 12px 24px !important;
        border-radius: 28px !important;
    }
    .wonda-showcase__composer.is-lifted button.wonda-showcase__send {
        width: 68px !important;
        height: 68px !important;
        border-radius: 22px !important;
        align-self: stretch;
    }
}

/* Mobile keeps natural sizing — just a fixed height for consistency. */
@media (max-width: 860px) {
    .wonda-showcase__composer.is-lifted {
        align-items: stretch !important;
        height: auto !important;
    }
    .wonda-showcase__composer.is-lifted textarea {
        box-sizing: border-box !important;
        height: 38px !important;
        min-height: 0 !important;
        max-height: 38px !important;
    }
}

/* ── Send button keeps its accent when the composer is a child of
       the showcase instead of .wonda-showcase — re-declare the var
       locally as a safety net. ── */
.wonda-showcase__composer.is-lifted button.wonda-showcase__send {
    background: var(--sc-accent, #FF007E) !important;
    background: linear-gradient(135deg,
        var(--sc-accent, #FF007E) 0%,
        var(--sc-accent-2, #c8005f) 100%) !important;
    color: #ffffff !important;
}
.wonda-showcase__composer.is-lifted button.wonda-showcase__send svg {
    fill: currentColor !important;
    color: inherit !important;
}

/* ── Header: brand left, spacer flexes, buttons cluster right ── */
.wonda-showcase__header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
}
.wonda-showcase__brand {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin-right: 0 !important;
}
.wonda-showcase__header-spacer {
    flex: 1 1 auto !important;
    min-width: 8px !important;
}
.wonda-showcase__header-btn {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

/* ============================================================
   WONDA_SHOWCASE_HEADER_RIGHT_V3
   Spacing restored. No aggressive margin overrides that fought
   the header's `gap`. Buttons get their own gap and a small
   right offset so the last one isn't flush against the edge.
   ============================================================ */

.wonda-showcase__header {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    padding: 12px 14px !important;
    /* NO gap here — apply spacing per-element so we control it */
    gap: 0 !important;
}

.wonda-showcase__brand {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 55% !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Spacer grows to eat all free space, pushing buttons to the right */
.wonda-showcase__header-spacer {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 4px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Every header button — fixed 30px circle, 8px gap between them */
.wonda-showcase__header > .wonda-showcase__header-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    margin: 0 0 0 6px !important;   /* left margin = gap to previous button */
    visibility: visible !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
}

/* First button after the spacer sits at the far right, no leading gap */
.wonda-showcase__header-spacer + .wonda-showcase__header-btn {
    margin-left: 4px !important;
}

/* Last button gets a small right nudge so it isn't flush to the edge */
.wonda-showcase__header > .wonda-showcase__header-btn:last-child {
    margin-right: 2px !important;
}

/* Icons inside the buttons stay centred and consistently sized */
.wonda-showcase__header-btn svg,
.wonda-showcase__header-btn img,
.wonda-showcase__header-btn > span {
    display: block !important;
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
}

/* ============================================================
   WONDA_SHOWCASE_THEME_ICON_FIX
   The theme button contains two SVGs (sun + moon). The earlier
   `svg { display: block !important }` rule from the header
   alignment patch was overriding the original `display: none`
   on the moon, so both icons rendered side by side.
   Show only the moon — the showcase is on a light background,
   so the moon hints "click for dark mode".
   ============================================================ */

/* Reset icon sizing inside the theme button so it doesn't fight
   the visibility rules below. */
.wonda-showcase__header-theme svg {
    display: none !important;
    width: 15px !important;
    height: 15px !important;
}

/* Only the moon is visible. */
.wonda-showcase__header-theme .wonda-showcase__icon-moon {
    display: block !important;
}

/* Belt and braces: sun stays hidden even if another rule targets it. */
.wonda-showcase__header-theme .wonda-showcase__icon-sun {
    display: none !important;
}

/* ============================================================
   WONDA_SHOWCASE_STATIC_TILES_CSS
   The showcase location card uses a 2x2 grid of static OSM tiles
   instead of an iframe embed. The iframe's own chrome (Contribute,
   copyright, zoom buttons) covered most of the small card.
   ============================================================ */

.wonda-showcase__card-media--map {
    position: relative;
    overflow: hidden;
    background: #e5e7eb;
}

.wonda-showcase__map-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.wonda-showcase__map-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

.wonda-showcase__map-pin {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--sc-accent, #FF007E);
    border: 3px solid #ffffff;
    transform: translate(-50%, -50%);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, .35),
        0 0 0 3px rgba(255, 255, 255, .35);
    pointer-events: none;
    z-index: 2;
}
.wonda-showcase__map-pin::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--sc-accent, #FF007E);
    transform: translate(-50%, -50%);
    animation: wonda-map-pin-pulse 2.2s ease-out infinite;
    pointer-events: none;
}
@keyframes wonda-map-pin-pulse {
    0%   { transform: translate(-50%, -50%) scale(.7); opacity: .55; }
    70%  { transform: translate(-50%, -50%) scale(2);  opacity: 0;   }
    100% { transform: translate(-50%, -50%) scale(2);  opacity: 0;   }
}

.wonda-showcase__map-attr {
    position: absolute;
    right: 3px;
    bottom: 2px;
    font-size: 8px;
    line-height: 1;
    color: rgba(255, 255, 255, .9);
    background: rgba(15, 23, 42, .55);
    padding: 2px 4px;
    border-radius: 3px;
    pointer-events: none;
    z-index: 3;
}
.wonda-showcase__map-attr a {
    color: inherit;
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    .wonda-showcase__map-pin::after { animation: none; opacity: 0; }
}

/* ==== END WONDA_SHOWCASE_STATIC_TILES_CSS ==== */