/* =============================================
   Digiwhiff RCS Activity — UI STYLES v6
   Premium enterprise SaaS redesign
   (Visual-only — all selectors/IDs/classes preserved)
   ============================================= */

:root {
    /* ── Brand / accent ─────────────────────────── */
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-mid: #1e40af;
    --primary-bg: #eff6ff;
    --primary-bg-2: #dbeafe;
    --primary-border: #bfdbfe;
    --primary-glow: rgba(37, 99, 235, .16);

    /* ── Success ────────────────────────────────── */
    --green: #22c55e;
    --green-dark: #16a34a;
    --green-mid: #15803d;
    --green-bg: #f0fdf4;
    --green-border: #bbf7d0;

    /* ── Error ──────────────────────────────────── */
    --red: #ef4444;
    --red-bg: #fef2f2;
    --red-border: #fecaca;
    --red-ink: #b91c1c;

    /* ── Amber (static mode) ────────────────────── */
    --amber: #f59e0b;
    --amber-strong: #d97706;
    --amber-bg: #fffbeb;
    --amber-bg-2: #fff7ed;
    --amber-border: #fde68a;
    --amber-border-2: #fed7aa;
    --amber-ink: #92400e;

    /* ── Text hierarchy ─────────────────────────── */
    --ink: #0f172a;
    --ink-2: #334155;
    --ink-3: #475569;
    --ink-4: #94a3b8;
    --ink-5: #cbd5e1;
    --text-muted: var(--ink-4);

    /* ── Surfaces & lines ───────────────────────── */
    --line: #e2e8f0;
    --line-soft: #f1f5f9;
    --line-softer: #f8fafc;
    --bg-page: #f5f7fb;
    --bg-card: #ffffff;

    /* legacy aliases (kept so any stray refs still resolve) */
    --blue: #2563eb;
    --blue-bg: #eff6ff;
    --blue-border: #bfdbfe;
    --blue-ink: #1e40af;

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono: 'SF Mono', 'JetBrains Mono', 'Courier New', 'Monaco', 'Lucida Console', monospace;

    /* ── 8px spacing rhythm ─────────────────────── */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;

    /* ── Radii ──────────────────────────────────── */
    --r3: 4px;
    --r6: 8px;
    --r8: 10px;
    --r10: 12px;
    --r12: 16px;
    --r-pill: 999px;

    /* ── Shadows (soft, layered) ────────────────── */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .05);
    --shadow-md: 0 6px 16px rgba(15, 23, 42, .07), 0 2px 6px rgba(15, 23, 42, .05);
    --shadow-lg: 0 16px 32px rgba(15, 23, 42, .10), 0 4px 12px rgba(15, 23, 42, .05);
    --shadow-focus: 0 0 0 4px var(--primary-glow);

    /* ── Motion ─────────────────────────────────── */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --t-fast: .16s var(--ease);
    --t-med: .24s var(--ease-out);
}

/* ── Dark mode token overrides ───────────────────
   The activity is embedded in Journey Builder, which can run
   in either theme — repaint surfaces/text/borders, keep hue
   relationships (primary/green/red/amber) intact for recognizability. */
@media (prefers-color-scheme: dark) {
    :root {
        --primary: #60a5fa;
        --primary-dark: #3b82f6;
        --primary-mid: #93c5fd;
        --primary-bg: #172554;
        --primary-bg-2: #1e3a8a;
        --primary-border: #2c4a8a;
        --primary-glow: rgba(96, 165, 250, .22);

        --green: #34d399;
        --green-dark: #10b981;
        --green-mid: #6ee7b7;
        --green-bg: #062e22;
        --green-border: #0f5138;

        --red: #f87171;
        --red-bg: #3a1414;
        --red-border: #6b1f1f;
        --red-ink: #fca5a5;

        --amber: #fbbf24;
        --amber-strong: #f59e0b;
        --amber-bg: #3a2a0d;
        --amber-bg-2: #402c0a;
        --amber-border: #6b4b12;
        --amber-border-2: #6b4b12;
        --amber-ink: #fcd34d;

        --ink: #f1f5f9;
        --ink-2: #cbd5e1;
        --ink-3: #94a3b8;
        --ink-4: #64748b;
        --ink-5: #475569;
        --text-muted: var(--ink-4);

        --line: #263043;
        --line-soft: #1c2434;
        --line-softer: #171e2b;
        --bg-page: #0b101a;
        --bg-card: #111827;

        --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, .38), 0 1px 2px rgba(0, 0, 0, .28);
        --shadow-md: 0 6px 16px rgba(0, 0, 0, .38), 0 2px 6px rgba(0, 0, 0, .28);
        --shadow-lg: 0 16px 32px rgba(0, 0, 0, .45), 0 4px 12px rgba(0, 0, 0, .3);
        --shadow-focus: 0 0 0 4px var(--primary-glow);
    }
}

/* ── Base ────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

body {
    font-family: var(--font);
    background:
        radial-gradient(1100px 520px at 50% -180px, var(--primary-bg) 0%, rgba(238, 244, 255, 0) 70%),
        var(--bg-page);
    background-attachment: fixed;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 12.5px;
    line-height: 1.5;
    letter-spacing: -0.06px;
    overflow: hidden;
    /* the parent card owns the scroll, not the window */
}

code {
    font-family: var(--mono);
    background: var(--primary-bg);
    color: var(--primary-mid);
    padding: 2px 6px;
    border-radius: var(--r3);
    border: 1px solid var(--primary-border);
    font-size: .86em;
    font-weight: 500;
    letter-spacing: 0;
    word-break: break-all;
}

/* ── Focus-visible (keyboard) ─────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--r3);
}

/* ── Step shell ──────────────────────────────── */
.step {
    display: none;
}

/* ── Master parent card ──────────────────────── */
#step1 {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 980px;
    height: 100vh;
    /* fixed to the available JB panel height */
    max-height: 100vh;
    margin: 0 auto;
    padding: 12px 0;
    /* breathing room outside the card */
    overflow: hidden;
}

/* The card chrome lives on an inner wrapper so the header
   can stay pinned while the body scrolls underneath it. */
#step1::before {
    content: none;
}

/* ── Sticky header (pinned inside the parent card) ── */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 13px var(--sp-5);
    background: linear-gradient(180deg, var(--bg-card), var(--line-softer));
    border: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-top-left-radius: var(--r12);
    border-top-right-radius: var(--r12);
    box-shadow: 0 1px 0 var(--line), var(--shadow-sm);
    position: relative;
    z-index: 20;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 11px;
}

.header-logo {
    width: 38px;
    height: 38px;
    border-radius: var(--r6);
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--line);
    background: var(--bg-card);
    box-shadow: var(--shadow-xs);
}

.header-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.header-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.3px;
}

.header-sub {
    font-size: 11.5px;
    color: var(--ink-4);
    margin-top: 1px;
    font-weight: 450;
}

.header-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--green-mid);
    background: var(--green-bg);
    border: 1px solid var(--green-border);
    padding: 5px 11px;
    border-radius: var(--r-pill);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
    letter-spacing: .1px;
    flex-shrink: 0;
}

@media (prefers-color-scheme: dark) {
    .header-status {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    }
}

.status-pulse {
    width: 7px;
    height: 7px;
    background: var(--green);
    border-radius: 50%;
    display: inline-block;
    position: relative;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, .5);
    animation: pulse-ring 2.2s ease-out infinite;
}

@keyframes pulse-ring {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, .5);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

@keyframes blink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .35
    }
}

/* ── Page body → the single internal scroll region ── */
.page-body {
    flex: 1 1 auto;
    min-height: 0;
    /* allow the flex child to actually shrink + scroll */
    padding: 0;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-top: 0;
    border-bottom-left-radius: var(--r12);
    border-bottom-right-radius: var(--r12);
    box-shadow: var(--shadow-md);
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* ── Form page (sections stacked inside the scroll area) ── */
.form-page {
    background: transparent;
    border-radius: 0;
    overflow: visible;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Form section → compact panel divided by hairlines ── */
.form-section {
    position: relative;
    padding: var(--sp-4) var(--sp-5);
    background: var(--bg-card);
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
    box-shadow: none;
    transition: background var(--t-fast);
}

.form-section:last-child {
    border-bottom: 0;
}

/* Slim accent rail */
.form-section::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 3px;
    border-radius: 0 var(--r-pill) var(--r-pill) 0;
    background: linear-gradient(180deg, var(--primary), #60a5fa);
    opacity: .85;
}

.form-section.dynamic-section::before {
    background: linear-gradient(180deg, #8b5cf6, #a78bfa);
}

.api-description.form-section::before {
    display: none;
}

.api-description.form-section {
    border-bottom: 3;
}

.form-section-head {
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--line-soft);
}

.form-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.25px;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

/* Decorative icon chip before each section title */
.form-section-title::before {
    content: "\f0a0";
    /* generic data icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 11px;
    width: 26px;
    height: 26px;
    border-radius: var(--r6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-bg);
    color: var(--primary);
    border: 1px solid var(--primary-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
    flex-shrink: 0;
}

@media (prefers-color-scheme: dark) {
    .form-section-title::before {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    }
}

/* th-large */
#templateTypeSection .form-section-title::before {
    content: "\f00a";
}

/* sliders — dynamically generated config sections */
.dynamic-section .form-section-title::before {
    content: "\f1de";
    background: #f5f3ff;
    color: #7c3aed;
    border-color: #ddd6fe;
}

@media (prefers-color-scheme: dark) {
    .dynamic-section .form-section-title::before {
        background: #2e1f57;
        color: #c4b5fd;
        border-color: #4c3a86;
    }
}

.form-section-sub {
    font-size: 11.5px;
    color: var(--ink-4);
    margin-top: 3px;
    margin-left: 34px;
    font-weight: 450;
}

/* ── Field block ─────────────────────────────── */
.field-block {
    margin-bottom: var(--sp-3);
}

.field-block:last-child {
    margin-bottom: 0;
}

.f-label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    margin-bottom: 6px;
    letter-spacing: -.1px;
}

.f-required {
    color: var(--red);
}

.f-tag {
    font-size: 9.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    text-transform: uppercase;
    letter-spacing: .6px;
    line-height: 1.2;
}

.f-tag.editable {
    background: var(--primary-bg);
    color: var(--primary-mid);
    border: 1px solid var(--primary-border);
}

.f-tag.readonly {
    background: var(--line-soft);
    color: var(--ink-3);
    border: 1px solid var(--line);
}

/* ── Text input ──────────────────────────────── */
.f-input,
.form-control {
    display: block;
    width: 100%;
    height: 36px;
    padding: 8px 12px;
    font-size: 12.5px;
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--r6);
    outline: none;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

.f-input::placeholder,
.form-control::placeholder {
    color: var(--ink-4);
}

.f-input:hover,
.form-control:hover {
    border-color: var(--ink-5);
}

.f-input:focus,
.form-control:focus {
    border-color: var(--primary);
    box-shadow: var(--shadow-focus);
    background: var(--bg-card);
}

.f-input:disabled,
.form-control:disabled {
    background: var(--line-soft);
    color: var(--ink-4);
    cursor: not-allowed;
}

/* Hero input — the Data Extension Key */
#inputDataExtensionKey {
    height: 40px;
    padding: 10px 13px;
    font-size: 12.5px;
    font-family: var(--mono);
    letter-spacing: .2px;
    background:
        linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
        linear-gradient(180deg, var(--bg-card), var(--line-softer)) border-box;
    box-shadow: var(--shadow-sm);
}

#inputDataExtensionKey:focus {
    box-shadow: var(--shadow-focus), var(--shadow-sm);
}

/* DE-mapped input */
.de-input {
    font-family: var(--mono);
    font-size: 11.5px;
    background: var(--primary-bg);
    border-color: var(--primary-border);
    color: var(--primary-mid);
    letter-spacing: 0;
    font-weight: 500;
}

.de-input:hover {
    border-color: #93c5fd;
}

.de-input:focus {
    border-color: var(--primary);
    box-shadow: var(--shadow-focus);
    background: var(--bg-card);
    color: var(--ink);
}

/* ── Hint text ───────────────────────────────── */
.f-hint,
.field-hint,
.help-text,
.de-mapping-hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11px;
    color: var(--ink-4);
    margin-top: 6px;
    line-height: 1.45;
}

.f-hint i,
.field-hint i,
.help-text i,
.de-mapping-hint i {
    font-size: 11px;
    color: var(--primary);
    margin-top: 1.5px;
    flex-shrink: 0;
}

.de-mapping-hint {
    color: var(--primary-mid);
    opacity: .8;
}

/* ── Configuration section locked state ─────── */
#configurationSection.config-locked {
    opacity: 0.4;
    pointer-events: none;
    user-select: none;
    filter: saturate(.5);
}

.f-hint-error {
    color: var(--red-ink) !important;
    background: var(--red-bg);
    border: 1px solid var(--red-border);
    border-radius: var(--r6);
    padding: 8px 11px;
    margin-top: 8px;
}

.f-hint-error i {
    color: var(--red) !important;
}

.f-hint-error code {
    background: var(--bg-card);
    color: var(--red-ink);
    border-color: var(--red-border);
    border-radius: var(--r3);
    padding: 1px 5px;
    font-size: 10.5px;
}

.de-mapping-hint code {
    font-size: 10px;
}

/* ── Output DEs — elegant status rows ─────────── */
.output-de-block {
    border: 1px solid var(--line);
    border-radius: var(--r8);
    overflow: hidden;
    background: var(--bg-card);
    box-shadow: var(--shadow-xs);
}

.output-de-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    display: flex;
    align-items: center;
    gap: 7px;
}

.output-de-title::before {
    content: "\f1c0";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 11px;
    color: var(--ink-4);
}

.output-de-header {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    padding: 8px 13px;
    background: linear-gradient(180deg, var(--line-softer), var(--line-soft));
    border-bottom: 1px solid var(--line);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-2);
}

.output-de-list {
    display: flex;
    flex-direction: column;
}

.output-de-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 13px;
    font-size: 11.5px;
    border-bottom: 1px solid var(--line-soft);
    transition: background var(--t-fast);
}

.output-de-row:hover {
    background: var(--line-softer);
}

.output-de-row:last-child {
    border-bottom: none;
}

.de-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}

.de-dot.green {
    background: var(--green);
    box-shadow: 0 0 0 3px var(--green-bg);
}

.de-dot.red {
    background: var(--red);
    box-shadow: 0 0 0 3px var(--red-bg);
}

/* Status row label rendered as a badge */
.de-row-label {
    font-weight: 600;
    font-size: 10.5px;
    color: var(--ink-2);
    min-width: 92px;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    text-align: center;
}

.output-de-row:nth-child(1) .de-row-label {
    background: var(--green-bg);
    color: var(--green-mid);
    border: 1px solid var(--green-border);
}

.output-de-row:nth-child(2) .de-row-label {
    background: var(--red-bg);
    color: var(--red-ink);
    border: 1px solid var(--red-border);
}

.de-row-name {
    font-size: 11px;
    font-family: var(--mono);
    color: var(--ink-3);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.de-row-key {
    font-size: 10px;
    font-family: var(--mono);
    color: var(--ink-3);
    background: var(--line-soft);
    border: 1px solid var(--line);
    padding: 2px 7px;
    border-radius: var(--r3);
    flex-shrink: 0;
}

.btn-copy {
    width: 26px;
    height: 26px;
    border: 1px solid var(--line);
    background: var(--bg-card);
    border-radius: var(--r6);
    cursor: pointer;
    color: var(--ink-4);
    font-size: 10.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-xs);
    transition: all var(--t-fast);
}

.btn-copy:hover {
    color: var(--primary);
    border-color: var(--primary-border);
    background: var(--primary-bg);
    transform: translateY(-1px);
}

.btn-copy:active {
    transform: translateY(0);
}

.btn-copy.copied {
    color: var(--green-dark);
    border-color: var(--green-border);
    background: var(--green-bg);
}

/* ── Section locked ──────────────────────────── */
.section-locked .form-section-head,
.section-locked .type-pills {
    opacity: .4;
    pointer-events: none;
    user-select: none;
    filter: saturate(.4);
}

.section-lock-bar {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: var(--sp-3);
    background: linear-gradient(180deg, var(--amber-bg), var(--amber-bg-2));
    border: 1px solid var(--amber-border);
    border-radius: var(--r6);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--amber-ink);
    box-shadow: var(--shadow-xs);
}

.section-lock-bar i {
    font-size: 11px;
    color: var(--amber-strong);
}

.section-locked .section-lock-bar {
    display: flex;
}

/* ── Template type → compact selectable cards ── */
.type-pills {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--sp-2);
}

.type-pill {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border: 1.5px solid var(--line);
    border-radius: var(--r8);
    background: var(--bg-card);
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    margin: 0;
    box-shadow: var(--shadow-xs);
    transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast), background var(--t-fast);
    white-space: normal;
    overflow: hidden;
}

.type-pill::after {
    content: "\f111";
    /* circle (unselected) */
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    font-size: 12px;
    color: var(--ink-5);
    margin-left: auto;
    transition: all var(--t-fast);
}

.type-pill input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/* Icon chip */
.type-pill i {
    font-size: 12px;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r6);
    background: var(--line-soft);
    color: var(--ink-3);
    border: 1px solid var(--line);
    transition: all var(--t-fast);
}

.type-pill span {
    line-height: 1.25;
    letter-spacing: -.1px;
}

.type-pill:hover {
    border-color: var(--ink-5);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.type-pill:hover i {
    color: var(--primary);
    border-color: var(--primary-border);
    background: var(--primary-bg);
}

.type-pill.selected,
.type-pill:has(input:checked) {
    border-color: var(--primary);
    background: linear-gradient(180deg, var(--primary-bg), var(--bg-card));
    color: var(--primary-mid);
    box-shadow: 0 0 0 2px var(--primary-glow), var(--shadow-sm);
    transform: translateY(-1px);
}

.type-pill.selected i,
.type-pill:has(input:checked) i {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 4px 10px var(--primary-glow);
}

.type-pill.selected::after,
.type-pill:has(input:checked)::after {
    content: "\f058";
    /* check-circle */
    font-weight: 900;
    color: var(--primary);
}

.type-pill:focus-within {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ── Dynamic config sections ─────────────────── */
#configurationSection {
    display: none;
}

#configurationSection.active {
    display: flex;
    flex-direction: column;
    gap: 0;
    animation: section-in var(--t-med);
}

@keyframes section-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Form group (schemaManager output) ──────── */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--sp-3);
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label,
.field-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    letter-spacing: -.1px;
}

.field-required {
    color: var(--red);
    font-weight: 700;
}

/* ── Array fields → clean repeatable cards ────── */
.array-field-container {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
}

.array-items {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: var(--sp-2);
}

.array-items:empty {
    margin-bottom: 0;
}

/* Each repeatable entry becomes a compact soft card */
.array-item,
.button-value-item {
    background: var(--line-softer);
    border: 1px solid var(--line);
    border-radius: var(--r6);
    padding: 9px 10px;
    margin: 0;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
    animation: row-in var(--t-fast);
}

.array-item:hover,
.button-value-item:hover {
    border-color: var(--ink-5);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

@keyframes row-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dynamic-field {
    /* functional marker only — visual handled by .array-item / .button-value-item */
}

.array-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.param-index-badge {
    width: 24px;
    height: 24px;
    background: linear-gradient(180deg, var(--primary-bg), var(--primary-bg-2));
    border: 1px solid var(--primary-border);
    border-radius: var(--r6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--primary-mid);
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}

@media (prefers-color-scheme: dark) {
    .param-index-badge {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    }
}

/* keep the param row input the same height as all other inputs */
.array-item-row .form-control {
    height: 34px;
}

.btn-remove-item {
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    background: var(--bg-card);
    border-radius: var(--r6);
    cursor: pointer;
    color: var(--ink-4);
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-xs);
    transition: all var(--t-fast);
}

.btn-remove-item:hover {
    border-color: var(--red-border);
    color: var(--red);
    background: var(--red-bg);
    transform: translateY(-1px);
}

/* ── Array field header (label + inline Add button) ── */
.field-array-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-2);
}

.field-array-header .field-label {
    margin: 0;
}

.btn-add-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--primary);
    background: var(--primary-bg);
    border: 1px solid var(--primary-border);
    border-radius: var(--r6);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: var(--shadow-xs);
    transition: all var(--t-fast);
}

.btn-add-inline:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn-add-inline:active {
    transform: translateY(0);
}

.btn-add-inline i {
    font-size: 9.5px;
}

/* ── Buttons ─────────────────────────────────── */
.btn-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--primary);
    background: var(--primary-bg);
    border: 1.5px dashed var(--primary-border);
    border-radius: var(--r8);
    cursor: pointer;
    transition: all var(--t-fast);
    margin: 0;
}

.btn-add:hover {
    background: var(--primary-bg-2);
    border-color: var(--primary);
    color: var(--primary-dark);
}

.btn-add:active {
    transform: scale(.99);
}

.btn-add i {
    font-size: 11px;
}

.btn-remove {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-card);
    color: var(--ink-3);
    border: 1px solid var(--line);
    padding: 7px 12px;
    border-radius: var(--r6);
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 600;
    flex-shrink: 0;
    box-shadow: var(--shadow-xs);
    transition: all var(--t-fast);
}

.btn-remove:hover {
    background: var(--red-bg);
    border-color: var(--red-border);
    color: var(--red);
}

/* ── Array item mode toggle (per-row) ───────────── */
.array-item-mode-toggle {
    margin-bottom: 8px;
}

.array-item-mode-toggle .field-mode-toggle {
    margin-bottom: 0;
}

/* ── Field mode toggle (DE / Static) — segmented control ──
   Fixed width + equal halves so EVERY toggle on the page
   (Recipient, Template ID, Image URL, Button URL, every
   parameter row) is identical in width, height and spacing.
   This also removes the empty gap to the right of "Static Value". */
.field-mode-toggle {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    width: 248px;
    max-width: 100%;
    height: 30px;
    background: var(--line-soft);
    border: 1px solid var(--line);
    border-radius: var(--r6);
    padding: 2px;
    gap: 2px;
    margin-bottom: 8px;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .05);
}

@media (prefers-color-scheme: dark) {
    .field-mode-toggle {
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
    }
}

.mode-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--r3);
    cursor: pointer;
    background: transparent;
    color: var(--ink-3);
    transition: all var(--t-fast);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mode-btn i {
    font-size: 10px;
    flex-shrink: 0;
}

.mode-btn:hover:not(.active) {
    background: rgba(255, 255, 255, .5);
    color: var(--ink-2);
}

@media (prefers-color-scheme: dark) {
    .mode-btn:hover:not(.active) {
        background: rgba(255, 255, 255, .06);
    }
}

.mode-btn-de.active {
    background: var(--bg-card);
    color: var(--primary-mid);
    border-color: var(--primary-border);
    font-weight: 700;
    box-shadow: var(--shadow-xs);
}

.mode-btn-static.active {
    background: var(--bg-card);
    color: var(--amber-ink);
    border-color: var(--amber-border-2);
    font-weight: 700;
    box-shadow: var(--shadow-xs);
}

/* Static-mode input — plain surface, no monospace */
.field-input-static {
    font-family: var(--font) !important;
    font-size: 12.5px !important;
    background: var(--amber-bg) !important;
    border-color: var(--amber-border-2) !important;
    color: var(--ink) !important;
}

.field-input-static:focus {
    border-color: var(--amber-strong) !important;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, .16) !important;
    background: var(--bg-card) !important;
}

/* ── Field mode hints ─────────────────────────── */
.field-mode-hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11px;
    margin-top: 6px;
    line-height: 1.45;
}

.field-mode-hint-de {
    color: var(--primary-mid);
    opacity: .85;
}

.field-mode-hint-de i {
    font-size: 10px;
    color: var(--primary);
    margin-top: 2px;
    flex-shrink: 0;
}

.field-mode-hint-de code {
    font-size: 10px;
}

.field-mode-hint-static {
    color: var(--amber-ink);
    opacity: .9;
}

.field-mode-hint-static i {
    font-size: 10px;
    color: var(--amber-strong);
    margin-top: 2px;
    flex-shrink: 0;
}

.field-empty-hint {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--ink-3);
    background: var(--line-softer);
    border: 1px dashed var(--line);
    border-radius: var(--r6);
    padding: 9px 11px;
    margin: 0;
}

.field-empty-hint i {
    font-size: 11px;
    color: var(--primary);
    margin-top: 1.5px;
    flex-shrink: 0;
}

.field-empty-hint strong {
    color: var(--ink-2);
    font-weight: 700;
}

/* ── Button group ────────────────────────────── */
.button-group {
    background: var(--line-softer);
    border: 1px solid var(--line);
    border-radius: var(--r6);
    padding: 12px;
    margin-top: 8px;
    box-shadow: var(--shadow-xs);
}

.button-group>label {
    font-weight: 700;
    font-size: 12px;
    color: var(--ink);
    margin-bottom: 8px;
    display: block;
}

.button-param-item .form-control {
    box-shadow: none;
}

/* ── Validation alert ─────────────────────────── */
.alert-danger {
    border-radius: var(--r8);
    border: 1px solid var(--red-border);
    background: linear-gradient(180deg, var(--red-bg), var(--bg-card));
    color: var(--red-ink);
    padding: 14px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    box-shadow: var(--shadow-sm);
}

.alert-danger h5 {
    font-weight: 700;
    margin-bottom: 6px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.alert-danger h5::before {
    content: "\f06a";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--red);
}

.alert-danger ul {
    margin: 0;
    padding-left: 18px;
    font-size: 12.5px;
}

.alert-danger li {
    margin-top: 3px;
}

/* ── API description ─────────────────────────── */
.api-description {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, var(--primary-bg), var(--bg-card));
    border: 1px solid var(--primary-border);
    border-left: 3px solid var(--primary);
    border-radius: var(--r6);
    padding: 9px 13px;
    margin: var(--sp-3) var(--sp-5);
    box-shadow: var(--shadow-xs);
}

.api-description p {
    font-size: 12px;
    color: var(--ink-3);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.api-description i {
    color: var(--primary);
}

/* ── Loading spinner ─────────────────────────── */
.loading-spinner {
    display: none;
    text-align: center;
    padding: 32px 0;
    background: var(--bg-card);
}

.loading-spinner.active {
    display: block;
}

.spinner-ring {
    width: 34px;
    height: 34px;
    border: 3px solid var(--line);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin .7s linear infinite;
    margin: 0 auto 14px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loading-text {
    font-size: 12.5px;
    color: var(--ink-4);
    font-weight: 500;
    margin: 0;
}

/* ── Textarea ─────────────────────────────────── */
textarea.form-control {
    height: auto;
    font-family: var(--mono);
    font-size: 11.5px;
    line-height: 1.55;
    min-height: 68px;
    resize: vertical;
}

/* ── Scrollbar ───────────────────────────────── */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--ink-5);
    border-radius: var(--r-pill);
    border: 3px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ink-4);
    background-clip: content-box;
}

/* ── Bootstrap row overrides ─────────────────── */
.row {
    margin-left: -9px;
    margin-right: -9px;
    margin-bottom: 0;
}

.col-md-6 {
    padding-left: 9px;
    padding-right: 9px;
    margin-bottom: 0;
}

/* ── Responsive ──────────────────────────────── */
@media (max-width: 720px) {
    #step1 {
        padding: 6px 0;
    }

    .app-header {
        padding: 11px 14px;
    }

    .header-logo {
        width: 34px;
        height: 34px;
    }

    .header-title {
        font-size: 13.5px;
    }

    .header-sub {
        font-size: 11px;
    }

    .form-section {
        padding: 14px 14px;
    }

    .form-section-sub {
        margin-left: 0;
    }

    .api-description {
        margin-left: 14px;
        margin-right: 14px;
    }

    .header-status {
        display: none;
    }

    .type-pills {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .output-de-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .de-row-name {
        min-width: 100%;
        order: 3;
    }

    /* toggle keeps its fixed segmented look; just allow it
       to stretch full-width on very narrow panels */
    .field-mode-toggle {
        width: 100%;
    }
}

/* Very narrow JB panels — single column type cards */
@media (max-width: 440px) {
    .type-pills {
        grid-template-columns: 1fr;
    }
}

/* ── DE Token Widget (two-input stacked layout) ── */

/* Container */
.de-token-widget {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Row 1: read-only token preview */
.de-token-preview-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--primary-border);
    border-radius: var(--r6);
    background: var(--primary-bg);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

.de-token-lock {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 36px;
    background: var(--primary-bg-2);
    border-right: 1px solid var(--primary-border);
    color: var(--primary);
    font-size: 11px;
    flex-shrink: 0;
    cursor: default;
    user-select: none;
}

.de-token-preview {
    flex: 1 1 auto;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--primary-mid);
    padding: 0 10px;
    height: 36px;
    cursor: default;
    user-select: none;
    letter-spacing: 0;
    border-radius: 0 !important;
}

/* Helper text between preview and col input */
.de-token-helper {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--primary-mid);
    opacity: .8;
    margin: 0;
    line-height: 1.4;
}

.de-token-helper i {
    font-size: 10px;
    color: var(--primary);
    flex-shrink: 0;
}

/* Row 2: column-name label */
.de-col-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3);
    margin: 0;
    letter-spacing: -.05px;
}

/* Row 2: editable column-name input */
.de-col-input {
    font-family: var(--font) !important;
    font-size: 12.5px !important;
    height: 36px;
}

.de-col-input.de-col-input-error {
    border-color: var(--red) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .14) !important;
}

/* Validation error */
.de-col-error {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--red-ink);
    margin: 0;
    line-height: 1.4;
}

.de-col-error i {
    color: var(--red);
    font-size: 11px;
    flex-shrink: 0;
}

/* Array-item DE area layout */
.array-item-de-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.array-item-de-row .de-token-widget {
    flex: 1 1 auto;
    min-width: 0;
}

.array-item-de-row .param-index-badge {
    margin-top: 8px;
    flex-shrink: 0;
}

.array-item-de-row .btn-remove-item {
    margin-top: 4px;
    flex-shrink: 0;
}

/* ── Reduced motion ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}