.vaia-widget {
    background: var(--ts-1, #fff);
    border: 1px solid var(--ts-3, #e5e7eb);
    border-radius: 12px;
    padding: 18px;
    font-family: inherit;
}
.vaia-widget .vaia-heading {
    margin: 0 0 12px;
    font-size: 1.05rem;
    font-weight: 600;
}
.vaia-widget .vaia-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    /* Force full container width so the row is a stable reference for the input/button
       percentage widths. Without this, content-alignment's `align-items: flex-start` on
       the column flex container shrinks the row to its intrinsic size, and 70%/30% then
       resolves against ~0 and the controls collapse. */
    width: 100%;
}
.vaia-widget .vaia-url {
    flex: 1 1 240px;
    min-width: 200px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--ts-3, #d1d5db);
    border-radius: 8px;
    font-size: 0.95rem;
    background: var(--ts-1, #fff);
    color: var(--ts-9, #111);
}
.vaia-widget .vaia-post-type {
    height: 42px;
    padding: 0 10px;
    border: 1px solid var(--ts-3, #d1d5db);
    border-radius: 8px;
    background: var(--ts-1, #fff);
    color: var(--ts-9, #111);
}
.vaia-widget .vaia-submit {
    height: 42px;
    padding: 0 18px;
    border-radius: 8px;
    border: 0;
    background: var(--vx-accent, #2563eb);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
.vaia-widget .vaia-submit:disabled {
    opacity: 0.6;
    cursor: progress;
}
.vaia-widget .vaia-status {
    margin-top: 12px;
    font-size: 0.9rem;
    min-height: 1.2em;
    width: 100%;
    color: var(--ts-7, #4b5563);
    /* Center the spinner+text pair horizontally. Using flex+justify-content
       instead of text-align so the spinner stays attached to the text. */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.vaia-widget .vaia-status:empty {
    /* Collapse layout when there's no message */
    margin-top: 0;
    min-height: 0;
}
.vaia-widget .vaia-status .vaia-status-spinner {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border-radius: 50%;
    border: 2px solid var(--ts-3, #e5e7eb);
    border-top-color: var(--vx-accent, #2563eb);
    animation: vaia-status-spin .9s linear infinite;
}
@keyframes vaia-status-spin { to { transform: rotate(360deg); } }
.vaia-widget .vaia-status.is-success .vaia-status-spinner,
.vaia-widget .vaia-status.is-error .vaia-status-spinner {
    display: none;
}
.vaia-widget .vaia-heading {
    /* Same reason as .vaia-row — keep full-width inside the column flex container. */
    width: 100%;
}
.vaia-widget .vaia-status.is-error { color: #b91c1c; }
.vaia-widget .vaia-status.is-success { color: #15803d; }
.vaia-widget.vaia-loggedout {
    text-align: center;
    color: var(--ts-7, #6b7280);
}

/* ─── Attach button (paperclip) ───────────────────────────────────────── */
.vaia-widget .vaia-attach {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    border: 1px solid var(--ts-3, #d1d5db);
    background: var(--ts-1, #fff);
    color: var(--ts-7, #4b5563);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s, color 0.15s;
}
.vaia-widget .vaia-attach:hover {
    background: var(--ts-2, #f3f4f6);
    color: var(--vx-accent, #2563eb);
}
.vaia-widget .vaia-attach:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Selected-file chip */
.vaia-widget .vaia-file-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--ts-2, #f3f4f6);
    border: 1px solid var(--ts-3, #e5e7eb);
    font-size: 0.875rem;
    color: var(--ts-8, #374151);
    max-width: 100%;
}
.vaia-widget .vaia-file-chip .vaia-file-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vaia-widget .vaia-file-chip .vaia-file-size {
    color: var(--ts-6, #9ca3af);
    font-size: 0.8rem;
}
.vaia-widget .vaia-file-chip .vaia-file-remove {
    margin-left: auto;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 0;
    background: var(--ts-3, #e5e7eb);
    color: var(--ts-8, #374151);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.vaia-widget .vaia-file-chip .vaia-file-remove:hover {
    background: #fee2e2;
    color: #b91c1c;
}

/* Drag-drop hint + over state */
.vaia-widget .vaia-drop-hint {
    margin-top: 8px;
    text-align: center;
    font-size: 0.78rem;
    color: var(--ts-6, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.vaia-widget.vaia-drag-over {
    outline: 2px dashed var(--vx-accent, #2563eb);
    outline-offset: 4px;
    background: rgba(37, 99, 235, 0.04);
}
.vaia-widget.vaia-drag-over .vaia-drop-hint {
    color: var(--vx-accent, #2563eb);
    font-weight: 600;
}

/* ─── Listing-card mock (visual preview of how the listing will look) ──── */
.vaia-widget .vaia-card-mock {
    width: 100%;
    border: 1px solid var(--ts-3, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    background: var(--ts-1, #fff);
    margin-bottom: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.vaia-widget .vaia-card-mock-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-color: var(--ts-2, #f3f4f6);
}
.vaia-widget .vaia-card-mock-image-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ts-6, #9ca3af);
    font-size: 0.85rem;
    background-image: linear-gradient(135deg, var(--ts-2, #f3f4f6) 25%, transparent 25%, transparent 50%, var(--ts-2, #f3f4f6) 50%, var(--ts-2, #f3f4f6) 75%, transparent 75%);
    background-size: 16px 16px;
}
.vaia-widget .vaia-card-mock-body {
    padding: 16px 18px;
}
.vaia-widget .vaia-card-mock-meta {
    font-size: 0.7rem;
    color: var(--ts-6, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.vaia-widget .vaia-card-mock-title {
    margin: 0 0 4px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ts-9, #111);
    line-height: 1.25;
}
.vaia-widget .vaia-card-mock-slogan {
    margin: 0 0 12px;
    font-size: 0.95rem;
    color: var(--ts-7, #4b5563);
    font-style: italic;
    line-height: 1.4;
}
.vaia-widget .vaia-card-mock-contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
    color: var(--ts-7, #4b5563);
}
.vaia-widget .vaia-card-mock-contact li {
    position: relative;
    padding-left: 22px;
    line-height: 1.4;
}
.vaia-widget .vaia-card-mock-contact li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    opacity: 0.75;
}
.vaia-widget .vaia-card-mock-event-date {
    /* Emphasize: events live or die by their date. Slightly bolder + accent color. */
    color: var(--vx-accent, #2563eb);
    font-weight: 600;
}
.vaia-widget .vaia-card-mock-event-date::before {
    opacity: 1;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M7 2v3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-3V2h-2v3H9V2H7zm-3 8h16v10H4V10z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M7 2v3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-3V2h-2v3H9V2H7zm-3 8h16v10H4V10z'/></svg>");
}
.vaia-widget .vaia-card-mock-address::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M12 2a7 7 0 0 1 7 7c0 4.5-7 13-7 13S5 13.5 5 9a7 7 0 0 1 7-7zm0 9.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M12 2a7 7 0 0 1 7 7c0 4.5-7 13-7 13S5 13.5 5 9a7 7 0 0 1 7-7zm0 9.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/></svg>");
}
.vaia-widget .vaia-card-mock-phone::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.3 1.2.4 2.5.6 3.8.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A18 18 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.4.2 2.6.6 3.8.1.4 0 .8-.3 1.1l-2.2 1.9z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.3 1.2.4 2.5.6 3.8.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A18 18 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.4.2 2.6.6 3.8.1.4 0 .8-.3 1.1l-2.2 1.9z'/></svg>");
}
.vaia-widget .vaia-card-mock-website::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm6.9 6h-2.8a15.6 15.6 0 0 0-1.4-3.6A8 8 0 0 1 18.9 8zM12 4c.8 1 1.6 2.4 2.1 4H9.9c.5-1.6 1.3-3 2.1-4zM4.3 14a8 8 0 0 1 0-4h3.2a16.5 16.5 0 0 0 0 4H4.3zm.8 2h2.8c.3 1.3.8 2.5 1.4 3.6A8 8 0 0 1 5.1 16zm2.8-8H5.1A8 8 0 0 1 9.3 4.4 15.6 15.6 0 0 0 7.9 8zM12 20c-.8-1-1.6-2.4-2.1-4h4.2c-.5 1.6-1.3 3-2.1 4zm2.6-6H9.4a14 14 0 0 1 0-4h5.2a14 14 0 0 1 0 4zm.3 5.6c.6-1.1 1.1-2.3 1.4-3.6h2.8a8 8 0 0 1-4.2 3.6zm1.6-5.6a16.5 16.5 0 0 0 0-4h3.2a8 8 0 0 1 0 4h-3.2z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm6.9 6h-2.8a15.6 15.6 0 0 0-1.4-3.6A8 8 0 0 1 18.9 8zM12 4c.8 1 1.6 2.4 2.1 4H9.9c.5-1.6 1.3-3 2.1-4zM4.3 14a8 8 0 0 1 0-4h3.2a16.5 16.5 0 0 0 0 4H4.3zm.8 2h2.8c.3 1.3.8 2.5 1.4 3.6A8 8 0 0 1 5.1 16zm2.8-8H5.1A8 8 0 0 1 9.3 4.4 15.6 15.6 0 0 0 7.9 8zM12 20c-.8-1-1.6-2.4-2.1-4h4.2c-.5 1.6-1.3 3-2.1 4zm2.6-6H9.4a14 14 0 0 1 0-4h5.2a14 14 0 0 1 0 4zm.3 5.6c.6-1.1 1.1-2.3 1.4-3.6h2.8a8 8 0 0 1-4.2 3.6zm1.6-5.6a16.5 16.5 0 0 0 0-4h3.2a8 8 0 0 1 0 4h-3.2z'/></svg>");
}


/* ─── Per-field opt-out checklist (preview) ─────────────────────────────── */
.vaia-widget .vaia-preview-fields {
    margin-top: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fafafa;
    padding: 10px 12px;
    font-size: 0.85rem;
}
.vaia-widget .vaia-preview-fields summary {
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    color: #374151;
    padding: 4px 0;
    list-style: none;
}
.vaia-widget .vaia-preview-fields summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.15s;
    color: #6b7280;
}
.vaia-widget .vaia-preview-fields[open] summary::before {
    transform: rotate(90deg);
}
.vaia-widget .vaia-pf-group-title {
    margin: 12px 0 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
}
.vaia-widget .vaia-pf-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
/* Each field is its own row spanning the full width of the panel —
   one row, one column, even in grouped mode. */
.vaia-widget .vaia-pf-row {
    display: block;
    padding: 4px 0;
    width: 100%;
}
.vaia-widget .vaia-pf-row label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: #374151;
    width: 100%;
    box-sizing: border-box;
}
.vaia-widget .vaia-pf-cb {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0;
}
.vaia-widget .vaia-pf-label {
    font-weight: 500;
    color: #1f2937;
    flex: 0 0 auto;
}
/* Summary value pushes to the right edge of the row so each line reads
   "✓ Field name ────────── short value". Wraps under the label on narrow
   screens (under ~400px container width). */
.vaia-widget .vaia-pf-summary {
    color: #6b7280;
    font-size: 0.82rem;
    word-break: break-word;
    margin-left: auto;
    text-align: right;
    flex: 0 1 auto;
    max-width: 60%;
}
/* Inline-editable fields: the value sits in a subtle input that fills the
   row's remaining width. Editable rows wrap so a long textarea drops below
   the label rather than squashing it. */
.vaia-widget .vaia-pf-row.is-editable label {
    flex-wrap: wrap;
    align-items: center;
}
.vaia-widget .vaia-pf-edit {
    flex: 1 1 100%;
    margin-top: 4px;
    margin-left: 26px; /* align under the label, past the checkbox */
    width: auto;
    box-sizing: border-box;
    font: inherit;
    font-size: 0.85rem;
    color: #1f2937;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 6px 9px;
    line-height: 1.4;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.vaia-widget .vaia-pf-edit:focus {
    outline: none;
    border-color: var(--vx-accent, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.vaia-widget textarea.vaia-pf-edit {
    resize: vertical;
    min-height: 60px;
}
.vaia-widget .vaia-preview-fields.is-compact .vaia-pf-row label {
    /* Compact mode: no summary value — just the label, hugged to the left. */
    gap: 10px;
}
.vaia-widget .vaia-preview-fields.is-compact .vaia-pf-label {
    flex: 1 1 auto;
    min-width: 0;
}
/* "Double-check" badge on low-confidence fields */
.vaia-widget .vaia-pf-flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: help;
}
.vaia-widget .vaia-pf-flag::before {
    content: '!';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #d97706;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
}
.vaia-widget .vaia-pf-row.is-low-confidence .vaia-pf-label {
    color: #92400e;
}
.vaia-widget .vaia-pf-bulk {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}
.vaia-widget .vaia-pf-all,
.vaia-widget .vaia-pf-none {
    background: transparent;
    border: 1px solid #d1d5db;
    color: #374151;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.12s;
}
.vaia-widget .vaia-pf-all:hover,
.vaia-widget .vaia-pf-none:hover {
    background: #f3f4f6;
}

/* ─── Google Places autocomplete dropdown ───────────────────────────────── */
.vaia-widget .vaia-input-wrap {
    /* Anchors the dropdown so it floats directly under the input, not the
       whole row (which would otherwise put the dropdown under the submit
       button on wider layouts). Keeps the input full-width within the flex
       row by inheriting flex-grow: 1 from .vaia-url's parent context. */
    position: relative;
    flex: 1 1 auto;
    min-width: 0; /* avoid flex overflow on narrow containers */
}
.vaia-widget .vaia-input-wrap .vaia-url {
    width: 100%;
}
.vaia-widget .vaia-ac-list {
    /* Floats below the input edge-to-edge so suggestions feel like a native
       OS autocomplete. z-index 50 keeps it above subsequent widget rows
       (consent checkbox, badge) without leaking over Voxel form fields. */
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    list-style: none;
    margin: 0;
    padding: 4px 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    max-height: 260px;
    overflow-y: auto;
    font-size: 0.88rem;
}
.vaia-widget .vaia-ac-item {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 2px;
    transition: background 0.08s;
}
/* Force left alignment on the inner spans too — some themes set
   text-align: center on lists/buttons and inherit into our items. */
.vaia-widget .vaia-ac-item .vaia-ac-main,
.vaia-widget .vaia-ac-item .vaia-ac-sub {
    text-align: left;
    width: 100%;
}
.vaia-widget .vaia-ac-item:hover,
.vaia-widget .vaia-ac-item.is-active {
    background: #eef2ff;
}
.vaia-widget .vaia-ac-main {
    color: #1f2937;
    font-weight: 600;
    line-height: 1.3;
}
.vaia-widget .vaia-ac-sub {
    color: #6b7280;
    font-size: 0.78rem;
    line-height: 1.3;
}

/* ─── Live input-type badge ─────────────────────────────────────────────── */
.vaia-widget .vaia-kind-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 2px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.5;
    align-self: flex-start;
    /* The badge uses ::before for a colored dot so users can identify the
       kind at a glance even when color contrast is poor. */
}
.vaia-widget .vaia-kind-badge::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.vaia-widget .vaia-kind-badge.is-website     { background: #eef2ff; color: #3730a3; }
.vaia-widget .vaia-kind-badge.is-maps        { background: #dcfce7; color: #166534; }
.vaia-widget .vaia-kind-badge.is-aggregator  { background: #fef3c7; color: #78350f; }
.vaia-widget .vaia-kind-badge.is-place_id    { background: #dcfce7; color: #166534; }
.vaia-widget .vaia-kind-badge.is-text        { background: #f0f9ff; color: #075985; }
.vaia-widget .vaia-kind-badge.is-invalid     { background: #fee2e2; color: #991b1b; }

/* ─── Image-rights consent checkbox ─────────────────────────────────────── */
.vaia-widget .vaia-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 0 4px;
    font-size: 0.85rem;
    line-height: 1.45;
    color: #4b5563;
    cursor: pointer;
}
.vaia-widget .vaia-consent input[type="checkbox"] {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    cursor: pointer;
}
.vaia-widget .vaia-consent.is-error {
    color: #b91c1c;
}
.vaia-widget .vaia-consent.is-error input[type="checkbox"] {
    outline: 2px solid #fca5a5;
    outline-offset: 2px;
}

/* ─── Duplicate-listing warning ─────────────────────────────────────────── */
.vaia-widget .vaia-duplicate-warn {
    grid-column: 1 / -1;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 10px;
    padding: 12px 14px;
    color: #78350f;
    font-size: 0.9rem;
    margin-bottom: 4px;
}
.vaia-widget .vaia-duplicate-heading {
    font-weight: 600;
    margin-bottom: 6px;
}
.vaia-widget .vaia-duplicate-list {
    margin: 0 0 8px;
    padding: 0 0 0 18px;
    list-style: disc;
}
.vaia-widget .vaia-duplicate-list li {
    margin-bottom: 2px;
    line-height: 1.4;
}
.vaia-widget .vaia-duplicate-list a {
    color: #92400e;
    font-weight: 600;
    text-decoration: underline;
}
.vaia-widget .vaia-duplicate-reasons {
    color: #b45309;
    font-size: 0.85rem;
}
.vaia-widget .vaia-duplicate-hint {
    font-size: 0.85rem;
    color: #92400e;
}

/* ─── Preview wrapper — 3 stacked rows on wider screens ────────────────
   Row 1: card on the left, "Here's what we found" content on the right
   Row 2: field-toggle panel spanning the full width
   Row 3: action buttons spanning the full width
   On phones the columns collapse into a single column stack.            */
.vaia-widget .vaia-preview {
    width: 100%;
    margin-top: 4px;
    text-align: left;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "card content"
        "fields fields"
        "actions actions";
    align-items: start;
}
.vaia-widget .vaia-preview > .vaia-card-mock        { grid-area: card; margin-bottom: 0; }
.vaia-widget .vaia-preview > .vaia-preview-content  { grid-area: content; }
.vaia-widget .vaia-preview > .vaia-preview-fields   { grid-area: fields; }
.vaia-widget .vaia-preview > .vaia-preview-actions  { grid-area: actions; }

@media (max-width: 680px) {
    .vaia-widget .vaia-preview {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "card"
            "content"
            "fields"
            "actions";
        gap: 18px;
    }
}
.vaia-widget .vaia-preview-title {
    margin: 0 0 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ts-7, #4b5563);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.vaia-widget .vaia-preview-meta {
    font-size: 0.8rem;
    color: var(--ts-7, #6b7280);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.vaia-widget .vaia-preview-desc {
    margin: 0 0 14px;
    color: var(--ts-8, #374151);
    font-size: 0.95rem;
    line-height: 1.5;
}
.vaia-widget .vaia-preview-list {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    display: grid;
    /* One item per row — fills more vertical space so the right column's
       height matches the (taller) card on the left, and each item gets to
       wrap on its own line if the text is long. */
    grid-template-columns: 1fr;
    gap: 10px;
}
.vaia-widget .vaia-preview-list li {
    position: relative;
    padding-left: 22px;
    font-size: 0.9rem;
    color: var(--ts-8, #374151);
    line-height: 1.4;
}
.vaia-widget .vaia-preview-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #16a34a;
    /* Inline checkmark using SVG mask */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='white' d='M6.5 11L3 7.5l1-1L6.5 9 12 3.5l1 1z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='white' d='M6.5 11L3 7.5l1-1L6.5 9 12 3.5l1 1z'/></svg>");
    -webkit-mask-size: contain;
            mask-size: contain;
    background: linear-gradient(135deg, #16a34a, #22c55e);
}
.vaia-widget .vaia-preview-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
/* Mobile: stack vertically with Continue on top. column-reverse renders the
   LAST child first, and the JS appends Cancel then Continue — so reversed,
   Continue is on top, Cancel below it. Both stretch to full width and center. */
@media (max-width: 680px) {
    .vaia-widget .vaia-preview-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        justify-content: center;
    }
    .vaia-widget .vaia-preview-cancel,
    .vaia-widget .vaia-preview-continue {
        width: 100%;
        text-align: center;
    }
}
.vaia-widget .vaia-preview-cancel,
.vaia-widget .vaia-preview-continue {
    height: 38px;
    padding: 0 16px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    border: 0;
    font-size: 0.9rem;
}
.vaia-widget .vaia-preview-cancel {
    background: transparent;
    color: var(--ts-8, #374151);
    border: 1px solid var(--ts-3, #d1d5db);
}
.vaia-widget .vaia-preview-cancel:hover {
    background: var(--ts-2, #f3f4f6);
}
.vaia-widget .vaia-preview-continue {
    background: var(--vx-accent, #2563eb);
    color: #fff;
}
.vaia-widget .vaia-preview-continue:hover {
    filter: brightness(1.05);
}
.vaia-widget .vaia-preview-cancel:disabled,
.vaia-widget .vaia-preview-continue:disabled {
    opacity: 0.6;
    cursor: progress;
}