/* Settings Page Styles */

/* Type roles.
   Anchored to wp-admin's own scale, which is contextual rather than flat: core runs
   13px in <body> and 14px inside .form-table. The plugin's in-card prose was 13px
   sitting directly beside core's 14px form text, so it read as a different role for
   the same job. Two body tokens keep each block matched to the context it lives in,
   instead of flattening both and fighting core in one direction.
   Fifteen ad-hoc sizes collapse to five roles here. */
.aifi-settings-page {
    --aifi-heading: 16px;         /* section heading */
    --aifi-subheading: 14px;      /* sidebar card heading, core postbox weight */
    --aifi-body: 14px;            /* prose inside the settings card */
    --aifi-body-compact: 13px;    /* sidebar prose, matches wp-admin body */
    --aifi-meta: 12px;            /* badges and counters */

    --aifi-lh-heading: 1.35;
    --aifi-lh-body: 1.6;          /* these lines run long; leading compensates */

    /* Craft floor wants 65-75ch. Section intros and the capability notice were
       running ~110ch across the full card width. */
    --aifi-measure: 70ch;
    /* Tinted full-bleed blocks get a wider measure. Capping them at 70ch left ~31%
       of the bar empty, and on a coloured background that gap is visible in a way it
       never is on white. 90ch trades a little reading comfort for a block that looks
       deliberate, and is still far short of the ~110ch these ran at before. */
    --aifi-measure-wide: 90ch;
}

.aifi-settings-page { max-width: 1400px; }

/* Tab Navigation.
   Core .nav-tab-wrapper / .nav-tab own the look, the colours, the active state and
   the focus ring. The custom strip this replaced failed WCAG AA on all three states
   (3.21:1 active, 4.24:1 idle, 3.05:1 hover) and its flex layout would not wrap, so
   five tabs dragged the whole page ~207px past a phone viewport. Core tabs are
   inline-block and wrap on their own. */
.aifi-tabs-nav {
    margin-bottom: 24px;
}
.aifi-tab .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    vertical-align: text-bottom;
    margin-right: 4px;
}
.aifi-pro-badge-tab {
    background: linear-gradient(135deg, #f0ad4e 0%, #ec971f 100%);
    color: #1a1a2e;
    font-size: var(--aifi-meta);
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
}

/* Header */
.aifi-pro-pill {
    display: inline-block;
    vertical-align: text-bottom;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 10px;
    background: #ec971f;
    color: #1a1a2e;
    font-size: var(--aifi-meta);
    font-weight: 600;
}

/* Layout */
.aifi-settings-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    align-items: start;
}

/* Grid items default to min-width:auto, so a wide child (the capability notice,
   the custom-styles table) stops the 1fr column shrinking and pushes the page
   sideways at mid widths. Letting them shrink is what makes 1fr behave. */
.aifi-settings-main,
.aifi-settings-sidebar {
    min-width: 0;
}

/* Main Settings Card */
.aifi-settings-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
}
.aifi-settings-form {
    padding: 0;
}
.aifi-settings-form .form-table {
    margin: 0;
}
.aifi-settings-form .form-table th {
    padding: 20px 20px 20px 30px;
    width: 220px;
    font-weight: 500;
}
.aifi-settings-form .form-table td {
    padding: 20px 30px 20px 10px;
}
.aifi-settings-form .form-table tr {
    border-bottom: 1px solid #f3f4f6;
}
.aifi-settings-form .form-table tr:last-child {
    border-bottom: none;
}
.aifi-settings-form h2 {
    background: #f8f9fa;
    margin: 0;
    padding: 20px 30px;
    font-size: var(--aifi-heading);
    line-height: var(--aifi-lh-heading);
    font-weight: 600;
    border-bottom: 1px solid #e5e7eb;
}
.aifi-settings-submit {
    background: #f8f9fa;
    padding: 20px 30px;
    border-top: 1px solid #e5e7eb;
}
.aifi-settings-submit .button-primary {
    padding: 8px 24px;
    height: auto;
    font-size: 14px;
}

/* Sidebar */
.aifi-settings-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.aifi-sidebar-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
}
.aifi-sidebar-card h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: var(--aifi-subheading);
    line-height: var(--aifi-lh-heading);
    font-weight: 600;
}
.aifi-sidebar-card h3 .dashicons {
    color: var(--wp-admin-theme-color, #2271b1);
    font-size: 18px;
    width: 18px;
    height: 18px;
}
.aifi-sidebar-card p {
    margin: 0 0 14px;
    font-size: var(--aifi-body-compact);
    color: #6b7280;
    line-height: var(--aifi-lh-body);
}
.aifi-sidebar-card-highlight {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-color: #7dd3fc;
}

/* Tips List */
.aifi-tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.aifi-tips-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    font-size: var(--aifi-body-compact);
    color: #4b5563;
    line-height: var(--aifi-lh-body);
}
.aifi-tips-list li:last-child { margin-bottom: 0; }
.aifi-tips-list .dashicons {
    color: #10b981;
    font-size: 16px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}
.aifi-tips-list .aifi-tip-pro .dashicons {
    color: #f0ad4e;
}
.aifi-tips-list .aifi-tip-pro {
    color: #6b7280;
}

/* Sidebar Buttons */
.aifi-sidebar-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.aifi-sidebar-buttons .button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
}
.aifi-sidebar-buttons .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Links List */
.aifi-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.aifi-links-list li { margin-bottom: 10px; }
.aifi-links-list li:last-child { margin-bottom: 0; }
.aifi-links-list a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4b5563;
    text-decoration: none;
    font-size: var(--aifi-body-compact);
}
.aifi-links-list a:hover { color: var(--wp-admin-theme-color, #2271b1); }
.aifi-links-list .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    color: #9ca3af;
}

/* Upgrade Card */
/* Upgrade card: the plugin's own look (white card, gold Pro badge, blue button). */
.aifi-sidebar-upgrade h3 .aifi-pro-badge {
    margin: 0;
}
.aifi-sidebar-upgrade p {
    color: #4b5563;
}
/* Custom Styles table */
.aifi-custom-styles-wrap { max-width: 700px; }
.aifi-custom-styles-table { border-collapse: collapse; margin-bottom: 8px; }
.aifi-custom-styles-table th,
.aifi-custom-styles-table td { padding: 6px 8px; }
.aifi-custom-styles-table th { font-weight: 600; background: #f9fafb; }
.aifi-custom-styles-table tbody tr:nth-child(even) { background: #f9fafb; }
.aifi-remove-custom-style {
    padding: 4px 6px !important;
    min-height: unset !important;
    color: #dc2626 !important;
    border-color: #dc2626 !important;
    background: transparent !important;
    line-height: 1 !important;
}
.aifi-remove-custom-style:hover {
    background: #fef2f2 !important;
}
.aifi-remove-custom-style .dashicons { font-size: 16px; width: 16px; height: 16px; vertical-align: middle; }

/* Brand Kit color swatches */
.aifi-brand-colors {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}
.aifi-settings-form .aifi-brand-colors input[type="text"] {
    min-width: 0;
    width: auto;
}

/* Brand Kit media pickers */
.aifi-media-picker {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.aifi-media-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    background: #f9fafb;
    overflow: hidden;
}
.aifi-media-preview img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    height: auto;
}
.aifi-media-remove {
    color: #dc2626 !important;
    border-color: #dc2626 !important;
    background: transparent !important;
}
.aifi-media-remove:hover {
    background: #fef2f2 !important;
}

/* Brand Kit logo placement: controls left, live preview right. The settings
   column is only ~470px wide on a laptop, so the split is driven by the
   container, not the viewport: below 640px the preview moves on top, full width. */
.aifi-logo-placement-wrap {
    container-type: inline-size;
}
.aifi-logo-placement {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(240px, 360px);
    gap: 24px 32px;
    align-items: start;
}
@container (max-width: 640px) {
    .aifi-logo-placement {
        grid-template-columns: 1fr;
    }
    .aifi-logo-placement-preview {
        order: -1;
        max-width: 420px;
    }
}
.aifi-placement-row + .aifi-placement-row {
    margin-top: 16px;
}
.aifi-placement-row > label {
    display: block;
    font-weight: 500;
    margin-bottom: 6px;
}
.aifi-slider-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}
.aifi-slider-controls input[type="range"] {
    flex: 1 1 auto;
    min-width: 120px;
    margin: 0;
}
.aifi-settings-form .aifi-slider-controls input[type="number"] {
    width: 72px;
    min-width: 0;
}
.aifi-slider-unit {
    /* Same width for "%" and "px", so the number boxes line up. */
    min-width: 1.75em;
    color: #6b7280;
    font-size: var(--aifi-meta);
}
.aifi-slider-reset {
    font-size: var(--aifi-meta);
}
/* Keep the hidden Reset link's space so the slider does not jump when it appears.
   visibility: hidden also keeps it out of the Tab order and the accessibility tree. */
.aifi-slider-reset[hidden] {
    display: inline-block;
    visibility: hidden;
}
.aifi-slider-row .description {
    margin-top: 4px;
    font-size: var(--aifi-body-compact);
}
.aifi-logo-preview {
    position: relative;
    /* Matches the 1792x1024 image the preview math in settings.js lays the logo out on. */
    aspect-ratio: 1792 / 1024;
    width: 100%;
    background: #e5e7eb;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    overflow: hidden;
    touch-action: none;
}
.aifi-logo-preview.is-empty {
    border-style: dashed;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
    color: #6b7280;
    font-size: var(--aifi-body-compact);
}
.aifi-logo-preview:not(.is-empty) .aifi-logo-preview-empty {
    display: none;
}
.aifi-logo-preview-logo {
    position: absolute;
    display: block;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
    transition: left 150ms ease, top 150ms ease;
}
.aifi-logo-preview.is-dragging .aifi-logo-preview-logo {
    cursor: grabbing;
    transition: none;
}
.aifi-logo-placement-preview .description {
    margin-top: 8px;
}
@media (max-width: 782px) {
    .aifi-logo-placement {
        grid-template-columns: 1fr;
    }
    .aifi-logo-placement-preview {
        order: -1;
        max-width: none;
    }
}

/* Disabled Pro options in dropdowns */
.aifi-settings-form select option:disabled {
    color: #9ca3af;
    font-style: italic;
}

/* Field enhancements */
.aifi-settings-form select,
.aifi-settings-form input[type="text"],
.aifi-settings-form input[type="password"] {
    min-width: 300px;
}
.aifi-settings-form .description {
    margin-top: 8px;
    color: #6b7280;
    line-height: var(--aifi-lh-body);
}

/* Test Connection Button */
.aifi-test-key-btn {
    margin-left: 8px;
    vertical-align: middle;
}
.aifi-test-key-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
    margin-right: 2px;
}
.aifi-test-key-result {
    font-size: 13px;
    font-weight: 500;
    vertical-align: middle;
}

/* Pro Notice (Inline Images tab) */

.aifi-pro-notice .dashicons {
    color: #f59e0b;
    font-size: 22px;
    width: 22px;
    height: 22px;
}
.aifi-pro-notice strong { display: block; margin-bottom: 4px; color: #92400e; }
.aifi-pro-notice p { margin: 0; color: #a16207; }
.aifi-pro-notice a { color: #92400e; font-weight: 500; }

/* Inline Images Upsell Panel */
.aifi-inline-upsell {
    text-align: center;
    padding: 40px 30px;
}
.aifi-inline-upsell-icon .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    color: var(--wp-admin-theme-color, #2271b1);
    background: #f5f3ff;
    border-radius: 50%;
    padding: 16px;
    margin-bottom: 16px;
}
.aifi-inline-upsell h3 {
    font-size: 20px;
    margin: 0 0 10px;
    color: #1f2937;
}
.aifi-inline-upsell > p {
    font-size: 14px;
    color: #6b7280;
    max-width: 500px;
    margin: 0 auto 24px;
}
.aifi-inline-upsell-features {
    list-style: none;
    padding: 0;
    margin: 0 auto 28px;
    max-width: 380px;
    text-align: left;
}
.aifi-inline-upsell-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 14px;
    color: #374151;
}
.aifi-inline-upsell-features .dashicons {
    color: #059669;
    font-size: 18px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
/* The upgrade CTA uses core .button-hero as-is, so it follows the user's admin
   colour scheme like every other primary button in wp-admin. */

/* Save confirmation notice */
/* Section description text alignment */
.aifi-settings-form h2 + p {
    margin: 0;
    padding: 12px 30px 16px;
    padding-right: max(30px, calc(100% - var(--aifi-measure-wide)));
    color: #6b7280;
    font-size: var(--aifi-body);
    line-height: var(--aifi-lh-body);
    background: #f8f9fa;
    border-bottom: 1px solid #e5e7eb;
}

/* Responsive */
@media (max-width: 1100px) {
    .aifi-settings-layout {
        grid-template-columns: 1fr;
    }
    .aifi-settings-sidebar {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 16px;
    }
}

@media (max-width: 782px) {
    .aifi-settings-form .form-table th,
    .aifi-settings-form .form-table td {
        display: block;
        width: 100%;
        /* These inherit content-box, so width:100% plus 20px of side padding
           rendered 40px wider than the card, which clipped the help text. */
        box-sizing: border-box;
        padding: 12px 20px;
    }
    .aifi-settings-form .form-table th {
        padding-bottom: 4px;
    }
    .aifi-settings-form select,
    .aifi-settings-form input[type="text"],
    .aifi-settings-form input[type="password"] {
        min-width: 100%;
        width: 100%;
    }
    .aifi-settings-form h2 + p {
        padding: 12px 20px 16px;
        /* The shorthand above resets padding-right, which dropped the measure cap
           and let intro copy run to ~83ch in the single-column layout. */
        padding-right: max(20px, calc(100% - var(--aifi-measure-wide)));
    }
    /* Field help sits in a full-width block here, so it needs the cap too. */
    .aifi-settings-form .description {
        max-width: var(--aifi-measure);
    }
}

/* Provider capabilities notice */
.aifi-capabilities-notice {
    /* Core .notice.notice-info.inline supplies the background, border and accent.
       Deliberately not flex: the provider name is a short <strong> followed by a long
       run of text, and making them siblings in a flex row squeezed the name onto two
       lines. Inline flow wraps the whole sentence naturally. */
    font-size: var(--aifi-body);
    line-height: var(--aifi-lh-body);
    padding-right: max(12px, calc(100% - var(--aifi-measure-wide)));
}
.aifi-capabilities-notice .dashicons {
    vertical-align: text-bottom;
    margin-right: 4px;
}

.aifi-capabilities-notice .dashicons {
    color: #2271b1;
    font-size: 16px;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    vertical-align: text-bottom;
}

/* Auto-optimization notice */
.aifi-auto-optimize-notice {
    /* Colours come from core .notice.notice-info.inline. */
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.aifi-auto-optimize-notice > .dashicons {
    color: #2271b1;
    font-size: 20px;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
}
.aifi-auto-optimize-notice strong {
    display: block;
    margin-bottom: 4px;
    color: #1d2327;
    font-size: 13px;
}
.aifi-auto-optimize-notice p {
    margin: 0;
    font-size: 13px;
    color: #4b5563;
    line-height: 1.5;
}

/* Review request notice (shared with admin.css) */
.aifi-review-notice {
    /* Core .notice.notice-info supplies the background, border and accent; this
       element already carries the .notice class, so the bespoke amber palette was
       overriding core for no reason. Only the icon/body layout is ours. */
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
}
.aifi-review-notice.aifi-review-hiding {
    opacity: 0;
    transition: opacity 250ms ease;
}
.aifi-review-notice-icon .dashicons {
    color: #f59e0b;
    font-size: 24px;
    width: 24px;
    height: 24px;
}
.aifi-review-notice-body { flex: 1; }
.aifi-review-notice-title {
    margin: 0 0 4px;
    font-size: 14px;
    color: #92400e;
}
.aifi-review-notice-text {
    margin: 0 0 10px;
    color: #78350f;
    font-size: 13px;
    line-height: 1.55;
    max-width: 720px;
}
.aifi-review-notice-actions {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.aifi-review-notice-actions .button .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    margin-right: 4px;
    vertical-align: text-bottom;
}
.aifi-review-notice-never {
    color: #78350f !important;
    text-decoration: underline;
    font-size: 12px;
}
.aifi-review-notice-never:hover {
    color: #92400e !important;
}

/* Reduced motion: no decorative transitions on the settings screen. */
@media (prefers-reduced-motion: reduce) {
    .aifi-settings-page *,
    .aifi-settings-page *::before,
    .aifi-settings-page *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* AI Assistants (MCP) tab */
.aifi-mcp-tab-panel {
    min-width: 0;
}
.aifi-mcp-content .aifi-settings-card {
    margin-bottom: 20px;
}
.aifi-mcp-content .aifi-settings-card:last-child {
    margin-bottom: 0;
}
/* Same grey header bar as the other tabs' sections; the icon colour follows the admin theme. */
.aifi-mcp-content .aifi-bulk-card-title .dashicons {
    color: var(--wp-admin-theme-color, #2271b1);
}
.aifi-mcp-card-body {
    padding: 24px 28px 28px;
}
.aifi-mcp-intro {
    margin: 0 0 22px;
    max-width: var(--aifi-measure);
    color: #374151;
    font-size: var(--aifi-body);
    line-height: var(--aifi-lh-body);
}

/* Stepper */
.aifi-mcp-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}
.aifi-mcp-step {
    position: relative;
    padding: 0 0 24px 44px;
    margin: 0;
}
.aifi-mcp-step::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 32px;
    bottom: 0;
    border-left: 2px solid #e5e7eb;
}
.aifi-mcp-step:last-child::before {
    display: none;
}
.aifi-mcp-step-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
}
.aifi-mcp-step-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}
.aifi-mcp-step-num {
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    background: #e5e7eb;
    color: #374151;
}
.aifi-mcp-step.is-active .aifi-mcp-step-num {
    background: var(--wp-admin-theme-color, #2271b1);
    color: #fff;
}
.aifi-mcp-step.is-done .aifi-mcp-step-num {
    background: #059669;
    color: #fff;
}
/* Locked steps show one line saying what opens them; the body waits until then. */
.aifi-mcp-step.is-locked .aifi-mcp-step-head h3 {
    color: #4b5563;
}
.aifi-mcp-step.is-locked .aifi-mcp-step-body,
.aifi-mcp-step.is-locked .aifi-mcp-step-summary {
    display: none;
}
.aifi-mcp-step-locked {
    display: none;
    margin: 0;
    font-size: var(--aifi-body-compact);
    line-height: var(--aifi-lh-body);
    color: #4b5563;
}
.aifi-mcp-step.is-locked .aifi-mcp-step-locked {
    display: block;
}
.aifi-mcp-apps-note {
    margin: -6px 0 18px;
    font-size: var(--aifi-body-compact);
    line-height: var(--aifi-lh-body);
    color: #4b5563;
    max-width: var(--aifi-measure-wide);
}
/* Finished steps: the number becomes a tick, the rail below fills green, and the
   step folds to a one-line summary until "Show details" opens it. */
.aifi-mcp-step::before {
    transition: border-color 400ms ease-out;
}
.aifi-mcp-step.is-done::before {
    border-left-color: #059669;
}
.aifi-mcp-step.is-done .aifi-mcp-step-num {
    font-size: 0;
}
.aifi-mcp-step.is-done .aifi-mcp-step-num::before {
    content: "\f147";
    font: normal 22px/1 dashicons;
    speak: never;
}
.aifi-mcp-step.is-done:not(.is-open) {
    padding-bottom: 20px;
}
.aifi-mcp-step.is-done:not(.is-open) .aifi-mcp-step-body {
    display: none;
}
.aifi-mcp-step-summary {
    display: none;
    margin: 0;
    font-size: var(--aifi-body-compact);
    line-height: var(--aifi-lh-body);
    color: #4b5563;
}
.aifi-mcp-step.is-done:not(.is-open) .aifi-mcp-step-summary {
    display: block;
}
.aifi-mcp-step-head {
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 2px;
}
.aifi-mcp-step-status,
.aifi-mcp-step-toggle {
    white-space: nowrap;
}
.aifi-mcp-step-toggle {
    display: none;
    margin-left: auto !important;
    font-size: var(--aifi-meta);
    text-decoration: none;
}
.aifi-mcp-step-toggle:hover,
.aifi-mcp-step-toggle:focus {
    text-decoration: underline;
}
.aifi-mcp-step.is-done .aifi-mcp-step-toggle {
    display: inline;
}
.aifi-mcp-step.is-just-done .aifi-mcp-step-num {
    animation: aifi-step-pop 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes aifi-step-pop {
    0%   { transform: scale(0.6); }
    60%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .aifi-mcp-step.is-just-done .aifi-mcp-step-num {
        animation: none;
    }
    .aifi-mcp-step::before {
        transition: none;
    }
}
.aifi-mcp-step-status {
    font-size: var(--aifi-meta);
    font-weight: 600;
    color: #047857;
}
.aifi-mcp-step-status .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
}
/* Step 3 live status: grey and listening, then green once the app calls in. */
.aifi-mcp-connect-check .aifi-mcp-conn {
    margin-top: 10px;
}
.aifi-mcp-conn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px 3px 9px;
    border-radius: 999px;
    font-size: var(--aifi-meta);
    font-weight: 600;
    line-height: 1.5;
    transition: background-color 300ms ease-out, color 300ms ease-out;
}
.aifi-mcp-conn[hidden] {
    display: none;
}
.aifi-mcp-conn-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}
.aifi-mcp-conn.is-waiting {
    background: #f3f4f6;
    color: #4b5563;
}
.aifi-mcp-conn.is-waiting .aifi-mcp-conn-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: currentColor;
    animation: aifi-conn-pulse 1.6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.aifi-mcp-conn.is-connected {
    background: #d1fae5;
    color: #065f46;
}
.aifi-mcp-conn.is-waiting .aifi-mcp-conn-done,
.aifi-mcp-conn.is-connected .aifi-mcp-conn-waiting {
    display: none;
}
@keyframes aifi-conn-pulse {
    0%   { transform: scale(1);   opacity: 0.6; }
    100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .aifi-mcp-conn.is-waiting .aifi-mcp-conn-dot::after {
        animation: none;
    }
    .aifi-mcp-conn {
        transition: none;
    }
}
.aifi-mcp-step-body {
    margin-top: 6px;
    max-width: var(--aifi-measure-wide);
}
.aifi-mcp-step-body p {
    margin: 0 0 12px;
    font-size: var(--aifi-body);
    line-height: var(--aifi-lh-body);
}
.aifi-mcp-step-body .spinner {
    float: none;
    margin: 0 0 0 6px;
    vertical-align: middle;
}
.aifi-mcp-status {
    margin-left: 8px;
    font-size: var(--aifi-body-compact);
    color: #6b7280;
}
.aifi-mcp-status.is-error { color: #b91c1c; }
.aifi-mcp-status.is-ok    { color: #059669; }

.aifi-mcp-key-box {
    margin-top: 8px;
    padding: 14px 16px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 8px;
}
.aifi-mcp-key-box label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}
.aifi-copy-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.aifi-copy-status {
    font-size: var(--aifi-meta);
    color: #059669;
}
.aifi-copy-status.is-error { color: #b91c1c; }
.aifi-mcp-key-box input.code {
    flex: 1 1 260px;
    min-width: 0;
    font-family: Menlo, Consolas, monospace;
}

/* App picker */
.aifi-mcp-apps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}
.aifi-mcp-app-pill {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #1f2937;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: var(--aifi-body-compact);
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
}
.aifi-mcp-app-pill:hover {
    border-color: var(--wp-admin-theme-color, #2271b1);
}
.aifi-mcp-app-pill:focus-visible,
.aifi-mcp-snippet pre:focus-visible {
    outline: 2px solid var(--wp-admin-theme-color, #2271b1);
    outline-offset: 2px;
}
.aifi-mcp-app-pill.is-active {
    background: var(--wp-admin-theme-color, #2271b1);
    border-color: var(--wp-admin-theme-color, #2271b1);
    color: #fff;
}
.aifi-mcp-app-steps {
    margin: 0 0 8px 20px;
    font-size: var(--aifi-body);
    line-height: var(--aifi-lh-body);
}
.aifi-mcp-app-steps > li {
    margin-bottom: 14px;
    padding-left: 2px;
}
.aifi-mcp-app-steps .description {
    margin: 6px 0 0;
}
/* File location, inside step 1 */
.aifi-mcp-files {
    margin-top: 8px;
}
/* Label, path, Copy: the path wraps inside its column so Copy always sits beside it. */
.aifi-mcp-file-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    max-width: 620px;
}
.aifi-mcp-file-row .aifi-copy-status:empty {
    display: none;
}
.aifi-mcp-file-row + .aifi-mcp-file-row {
    margin-top: 6px;
}
.aifi-mcp-file-os {
    flex: 0 0 64px;
    font-size: var(--aifi-body-compact);
    color: #4b5563;
}
.aifi-mcp-file-row code {
    justify-self: start;
    min-width: 0;
    padding: 3px 8px;
    font-size: 12px;
    background: #f6f7f7;
    border-radius: 4px;
    overflow-wrap: anywhere;
}
/* Text to paste, inside the step that says to paste it, with Copy beside it. */
.aifi-mcp-snippet {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    max-width: 760px;
}
.aifi-mcp-snippet pre {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 12px 14px;
    background: #1f2937;
    color: #f9fafb;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre;
}
.aifi-mcp-snippet .aifi-copy-btn {
    flex: 0 0 auto;
}
.aifi-mcp-snippet .aifi-copy-status:empty {
    display: none;
}
.aifi-mcp-node-note {
    margin: 0 0 10px;
    font-size: var(--aifi-body);
    line-height: var(--aifi-lh-body);
}
/* Step 3: pick what the config file looks like, get the matching snippet. */
.aifi-mcp-variants {
    margin: 10px 0 8px;
    padding: 0;
    border: 0;
}
.aifi-mcp-variants legend {
    margin-bottom: 6px;
    padding: 0;
    font-size: var(--aifi-body-compact);
    font-weight: 600;
    color: #1f2937;
}
.aifi-mcp-variants label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 18px 6px 0;
    font-size: var(--aifi-body-compact);
}
.aifi-mcp-variants input[type="radio"] {
    margin: 0;
}
.aifi-mcp-variant-how {
    margin: 4px 0 8px !important;
}
/* After a reload the snippets hold a placeholder, not the key. */
.aifi-mcp-key-missing {
    margin: 0 0 12px !important;
    padding: 10px 12px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    color: #78350f;
}
.aifi-mcp-still-waiting {
    margin-top: 12px;
    padding: 10px 14px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: var(--aifi-body-compact);
    line-height: var(--aifi-lh-body);
}
.aifi-mcp-still-waiting[hidden] {
    display: none;
}
.aifi-mcp-still-waiting p {
    margin: 0 0 4px !important;
}
.aifi-mcp-still-waiting ul {
    margin: 0 0 0 18px;
    list-style: disc;
}
.aifi-mcp-still-waiting li {
    margin-bottom: 2px;
}
.aifi-mcp-stay {
    margin-top: 14px;
    font-size: var(--aifi-body-compact);
    line-height: var(--aifi-lh-body);
}
.aifi-mcp-stay .aifi-mcp-stay-text {
    margin: 0 0 6px;
}
.aifi-mcp-stay .aifi-mcp-stay-text[hidden] {
    display: none;
}
.aifi-mcp-stay-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}
.aifi-mcp-stay-toggle input[type="checkbox"] {
    margin: 0;
}
.aifi-mcp-stay-status {
    margin-left: 8px;
    color: #4b5563;
}
.aifi-mcp-stay-status.is-error {
    color: #b32d2e;
}
.aifi-mcp-stay .description {
    margin: 4px 0 0 !important;
}
.aifi-mcp-connect-check {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e5e7eb;
}
.aifi-mcp-connect-check p {
    margin: 0 0 8px;
}

/* One request in a box, with Copy beside it (the connection check in step 3). */
.aifi-mcp-example {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 760px;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
    margin: 0;
}
.aifi-mcp-example q {
    flex: 1 1 auto;
    min-width: 0;
    quotes: none;
    font-size: var(--aifi-body);
    line-height: var(--aifi-lh-body);
    color: #1f2937;
}
.aifi-mcp-example .aifi-copy-btn {
    flex-shrink: 0;
}
.aifi-mcp-example .aifi-copy-status:empty {
    display: none;
}
.aifi-mcp-step-body .aifi-mcp-use {
    font-weight: 600;
    margin-bottom: 12px;
}
.aifi-mcp-sites-note {
    margin: 16px 0 0;
}
/* All example requests, folded until asked for. */
.aifi-mcp-prompts {
    margin-top: 12px;
    max-width: 720px;
}
.aifi-mcp-prompts summary {
    cursor: pointer;
    color: var(--wp-admin-theme-color, #2271b1);
    font-size: var(--aifi-body-compact);
    font-weight: 600;
}
.aifi-mcp-prompts summary:focus-visible {
    outline: 2px solid var(--wp-admin-theme-color, #2271b1);
    outline-offset: 2px;
}
.aifi-mcp-prompt-list {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
}
.aifi-mcp-prompt-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    margin: 0;
    border-top: 1px solid #e5e7eb;
    font-size: var(--aifi-body);
    line-height: var(--aifi-lh-body);
}
.aifi-mcp-prompt-list li:first-child {
    border-top: 0;
}
.aifi-mcp-prompt-list q {
    flex: 1 1 auto;
    min-width: 0;
    quotes: none;
    color: #1f2937;
}
.aifi-mcp-prompt-list .aifi-copy-btn {
    flex-shrink: 0;
}
.aifi-mcp-prompt-list .aifi-copy-status:empty {
    display: none;
}
/* How to use: live typing demo */
.aifi-mcp-demo {
    max-width: 720px;
    margin-bottom: 12px;
}
/* "On <site>": the one rule this step teaches, marked the same way in the rule and the demo. */
.aifi-mcp-site-chip,
.aifi-mcp-demo-site {
    font-weight: 600;
    color: var(--wp-admin-theme-color, #2271b1);
}
.aifi-mcp-site-chip {
    padding: 1px 7px;
    border-radius: 4px;
    background: #f0f6fc;
    white-space: nowrap;
}
.aifi-mcp-demo-screen {
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f9fafb;
}
.aifi-mcp-demo-input,
.aifi-mcp-demo-reply-stack {
    display: grid;
}
.aifi-mcp-demo-input > *,
.aifi-mcp-demo-reply-stack > * {
    grid-area: 1 / 1;
}
.aifi-mcp-demo-sizer {
    visibility: hidden;
}
.aifi-mcp-demo-input {
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #fff;
    font-size: 15px;
    line-height: 1.5;
    color: #1f2937;
    text-wrap: pretty;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
}
.aifi-mcp-demo-caret {
    display: inline-block;
    width: 2px;
    height: 1.15em;
    margin-left: 1px;
    vertical-align: text-bottom;
    background: var(--wp-admin-theme-color, #2271b1);
    animation: aifi-caret 1s steps(1) infinite;
}
.aifi-mcp-demo.is-paused .aifi-mcp-demo-caret {
    animation: none;
}
@keyframes aifi-caret {
    50% { opacity: 0; }
}
.aifi-mcp-demo-reply {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 12px;
    font-size: var(--aifi-body-compact);
    line-height: 1.5;
    color: #374151;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.aifi-mcp-demo-reply.is-visible {
    opacity: 1;
    transform: none;
}
.aifi-mcp-demo-reply .dashicons {
    flex-shrink: 0;
    color: #00a32a;
    font-size: 18px;
    width: 18px;
    height: 18px;
}
.aifi-mcp-demo-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}
.aifi-mcp-demo-actions .aifi-copy-status:empty {
    display: none;
}
.aifi-mcp-demo-toggle {
    font-size: var(--aifi-body-compact);
}
@media (prefers-reduced-motion: reduce) {
    .aifi-mcp-demo-caret {
        animation: none;
    }
    .aifi-mcp-demo-reply {
        transition: none;
    }
}
/* Free plan: what is included next to what Pro adds, split by a hairline, no nested cards. */
.aifi-mcp-plans {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: var(--aifi-measure-wide);
}
.aifi-mcp-plan {
    padding-right: 24px;
}
.aifi-mcp-plan.is-pro {
    padding: 0 0 0 24px;
    border-left: 1px solid #e5e7eb;
}
.aifi-mcp-plan-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: var(--aifi-subheading);
    line-height: var(--aifi-lh-heading);
    font-weight: 600;
    color: #1f2937;
}
.aifi-mcp-plan-title .aifi-pro-badge {
    margin: 0;
}
.aifi-mcp-plan .button {
    margin-top: 16px;
}
.aifi-mcp-plan-group {
    margin: 14px 0 6px;
    font-size: var(--aifi-body-compact);
    line-height: var(--aifi-lh-heading);
    font-weight: 600;
    color: #4b5563;
}
.aifi-mcp-plan-title + .aifi-mcp-plan-group {
    margin-top: 0;
}
.aifi-mcp-plan-list {
    margin: 0 0 4px;
    padding: 0;
    list-style: none;
    font-size: var(--aifi-body);
    line-height: var(--aifi-lh-body);
    color: #374151;
}
.aifi-mcp-plan-list strong {
    font-weight: 600;
    color: #111827;
}
.aifi-mcp-plan-list li {
    position: relative;
    margin-bottom: 4px;
    padding-left: 24px;
}
/* Dashicons glyphs as list markers: a tick for what Free has, a plus for what Pro adds. */
.aifi-mcp-plan-list li::before {
    position: absolute;
    left: 0;
    top: 2px;
    font: normal 18px/1 dashicons;
    speak: never;
}
.aifi-mcp-plan-list.is-free li::before {
    content: "\f147";
    color: #047857;
}
.aifi-mcp-plan-list.is-pro li::before {
    content: "\f132";
    color: #d97706;
}
.aifi-mcp-content .aifi-bulk-usage-banner {
    margin-bottom: 18px;
}
.aifi-mcp-content .aifi-bulk-progress-bar-wrap {
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    margin: 8px 0 10px;
}
.aifi-mcp-content .aifi-bulk-progress-bar {
    height: 100%;
    background: var(--wp-admin-theme-color, #2271b1);
    border-radius: 4px;
}

@media (max-width: 782px) {
    .aifi-mcp-plans {
        grid-template-columns: 1fr;
        row-gap: 16px;
    }
    .aifi-mcp-plan {
        padding-right: 0;
    }
    .aifi-mcp-plan.is-pro {
        padding: 16px 0 0;
        border-left: 0;
        border-top: 1px solid #e5e7eb;
    }
}
@media (max-width: 782px) {
    /* Phones: the OS label gets its own line so the path has room beside Copy. */
    .aifi-mcp-file-row {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 2px;
    }
    .aifi-mcp-file-os {
        grid-column: 1 / -1;
    }
}
@media (max-width: 782px) {
    .aifi-mcp-card-body {
        padding: 18px 20px 20px;
    }
    .aifi-mcp-step {
        padding-left: 40px;
    }
    .aifi-mcp-snippet {
        flex-wrap: wrap;
    }
    .aifi-mcp-snippet pre {
        flex-basis: 100%;
    }
    .aifi-mcp-example {
        flex-wrap: wrap;
    }
    .aifi-mcp-example q {
        flex-basis: 100%;
    }
    .aifi-mcp-prompt-list li {
        flex-wrap: wrap;
    }
    .aifi-mcp-prompt-list q {
        flex-basis: 100%;
    }
}

/* First run on General: three steps, Save right under the key, the rest folded. */
.aifi-first-run ol {
    margin: 4px 0 6px 20px;
}
.aifi-first-run li {
    margin-bottom: 2px;
}
.aifi-first-run-title {
    margin-bottom: 0 !important;
}
.aifi-settings-form .aifi-first-run-save td {
    padding-top: 0;
}
.aifi-more-settings {
    border-top: 1px solid #e5e7eb;
}
.aifi-more-settings > summary {
    padding: 16px 30px;
    cursor: pointer;
    font-weight: 600;
    color: var(--wp-admin-theme-color, #2271b1);
}
.aifi-first-image .button {
    margin-top: 2px;
}

/* Placeholder codes in help text ({title} and friends) need full-strength text on the grey chip. */
.aifi-settings-form .description code {
    color: #374151;
}

/* Free Brand & Styles: show the Brand Kit instead of describing it. */
.aifi-brand-preview {
    padding: 4px 30px 24px;
    text-align: left;
}
.aifi-brand-preview-lead {
    max-width: var(--aifi-measure);
    font-size: var(--aifi-body);
    line-height: var(--aifi-lh-body);
    color: #374151;
}
.aifi-brand-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 720px;
    margin: 16px 0 20px;
}
.aifi-brand-compare figure {
    margin: 0;
}
.aifi-brand-compare img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06), 0 4px 12px rgba(17, 24, 39, 0.08);
}
.aifi-brand-compare figcaption {
    margin-top: 8px;
    font-size: var(--aifi-body-compact);
    font-weight: 600;
    color: #374151;
}
.aifi-brand-peek {
    max-width: 420px;
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
}
.aifi-brand-peek-title {
    margin: 0 0 8px !important;
    font-weight: 600;
    color: #1f2937;
}
.aifi-brand-peek dl {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 6px 12px;
    margin: 0;
    font-size: var(--aifi-body-compact);
}
.aifi-brand-peek dt {
    color: #4b5563;
}
.aifi-brand-peek dd {
    margin: 0;
    color: #1f2937;
}
.aifi-swatch {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    border-radius: 4px;
    border: 1px solid rgba(17, 24, 39, 0.15);
    vertical-align: middle;
}
@media (max-width: 782px) {
    .aifi-brand-preview {
        padding: 4px 20px 20px;
    }
    .aifi-brand-compare {
        grid-template-columns: 1fr;
    }
}
.aifi-brand-preview p {
    margin-left: 0;
    margin-right: 0;
}
.aifi-brand-preview .aifi-brand-preview-lead {
    max-width: var(--aifi-measure);
}