/* Type roles for the post-editor meta box.
   Declared here, not in settings.css: that stylesheet is never enqueued on
   post.php, so tokens defined there would resolve to nothing in this panel.
   The panel sits in the narrow editor sidebar, so the scale is one step tighter
   than the settings screen while keeping the same role names. */
.aifi-meta-box {
    --aifi-label: 13px;      /* field label */
    --aifi-body: 13px;       /* help text; was 12px, below wp-admin's own floor */
    --aifi-meta: 12px;       /* badges and hints */
    --aifi-lh-body: 1.55;
    --aifi-lh-tight: 1.3;
}

/* Generate Prompt from Content button */
.aifi-generate-prompt-wrap {
    display: flex;
    align-items: center;
    margin-top: 8px;
    gap: 6px;
}

/* Let the button wrap in the narrow sidebar instead of overflowing it.
   Two classes so it outranks core's `.wp-core-ui .button` nowrap/line-height. */
.aifi-generate-prompt-wrap .aifi-generate-prompt-btn {
    min-width: 0;
    max-width: 100%;
    height: auto;
    white-space: normal;
    line-height: 1.4;
    padding-top: 4px;
    padding-bottom: 4px;
}

/* The idle spinner still takes up room; hide it until it is active. */
.aifi-generate-prompt-wrap .spinner:not(.is-active) {
    display: none;
}

.aifi-generate-prompt-btn .dashicons {
    font-size: 15px;
    width: 15px;
    height: 15px;
    vertical-align: text-bottom;
    margin-right: 4px;
}

/* Main metabox container */
.aifi-meta-box {
    padding: 0;
    background: transparent;
    border: none;
}

/* Field group containers */
.aifi-field-group {
    margin-bottom: 20px;
}

.aifi-field-group:last-of-type {
    margin-bottom: 24px;
}

/* Label styling */
.aifi-field-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #1d2327;
    font-size: var(--aifi-label);
    line-height: var(--aifi-lh-tight);
}

/* Form input styling */
.aifi-field-group input[type="text"],
.aifi-field-group textarea,
.aifi-field-group select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #8c8f94;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.4;
    background: #fff;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Select dropdown arrow styling */
.aifi-field-group select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

.aifi-field-group input[type="text"]:focus,
.aifi-field-group textarea:focus,
.aifi-field-group select:focus {
    border-color: #0073aa;
    outline: none;
    box-shadow: 0 0 0 1px #0073aa;
}

.aifi-field-group select.widefat {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Description text */
.aifi-field-group .description {
    margin: 6px 0 0 0;
    color: #646970;
    font-size: var(--aifi-body);
    line-height: var(--aifi-lh-body);
    font-style: italic;
}

/* Actions container */
.aifi-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 24px 0 20px 0;
    padding: 0;
}

.aifi-actions .spinner {
    float: none;
    margin: 0 0 0 8px;
}

/* Button styling.
   Core .button-primary already carries the user's admin colour scheme, focus ring
   and hover state. The gradient + translateY this replaced made the plugin's primary
   button the only one on the screen that did not match every other WP button. */

/* Loading spinner */
.aifi-loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.aifi-loading-text {
    font-size: 12px;
    line-height: 1.4;
    color: #50575e;
}
/* What the next image uses and costs, right under the button that spends it. */
.aifi-cost-line {
    flex-basis: 100%;
    margin: 0;
    text-align: center;
    font-size: 12px;
    line-height: 1.4;
    color: #50575e;
}

.aifi-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--wp-admin-theme-color, #2271b1);
    border-radius: 50%;
    animation: aifi-spin 0.8s linear infinite;
}

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

/* Preview area */
.aifi-preview {
    margin: 20px 0 0 0;
    text-align: center;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    padding: 16px;
}

.aifi-preview img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Regenerate button */

/* Message styling */
.aifi-message {
    margin: 16px 0 0 0;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
}

.aifi-message.success {
    background-color: #dff0d8;
    border: 1px solid #d6e9c6;
    color: #3c763d;
}

.aifi-message.error {
    background-color: #f2dede;
    border: 1px solid #ebccd1;
    color: #a94442;
}

/* Error styling */
.aifi-error {
    color: #dc3232;
    font-weight: 600;
}

/* Upgrade notice styling */
.aifi-upgrade-notice {
    margin-top: 12px !important;
    padding: 10px 14px;
    background: linear-gradient(135deg, #fff8e5 0%, #fff3cd 100%);
    border: 1px solid #ffc107;
    border-left: 4px solid #f0ad4e;
    border-radius: 4px;
    font-style: normal !important;
    color: #856404 !important;
}

.aifi-upgrade-notice .dashicons {
    vertical-align: middle;
    margin-right: 4px;
}

.aifi-upgrade-notice a {
    color: #0073aa;
    font-weight: 600;
    text-decoration: none;
}

.aifi-upgrade-notice a:hover {
    color: #005a87;
    text-decoration: underline;
}

/* Pro badge on Brand Kit, Stability tools and Retry with Sunburst.
   Same look as settings.css, which is not loaded on the post editor. */
.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;
}

/* Pro badge styling */
.aifi-pro-badge {
    display: inline-block;
    padding: 2px 6px;
    background: linear-gradient(135deg, #f0ad4e 0%, #ec971f 100%);
    color: #1a1a2e;
    font-size: var(--aifi-meta);
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
}

/* Retry with Sunburst (GPT Image 2.5, Pro) */
.aifi-retry-sunburst {
    text-align: center;
    margin: 12px 0 16px 0;
}
.aifi-retry-sunburst .button {
    max-width: 100%;
    height: auto;
    white-space: normal;
    line-height: 1.4;
    padding-top: 6px;
    padding-bottom: 6px;
}
.aifi-retry-sunburst .aifi-pro-badge-tab {
    display: inline-block;
    margin-top: 6px;
}
.aifi-retry-sunburst .description {
    margin-top: 6px;
}
.aifi-retry-sunburst-locked .button {
    opacity: 0.55;
    cursor: not-allowed !important;
}

/* Stability tools locked state (free users) */
.aifi-stability-tools-locked select,
.aifi-stability-tools-locked .button {
    opacity: 0.55;
    cursor: not-allowed !important;
}
.aifi-tools-upgrade-hint {
    font-size: var(--aifi-meta);
    color: #856404;
    margin: 4px 0 8px;
    line-height: var(--aifi-lh-body);
}
.aifi-tools-upgrade-hint a {
    color: #0073aa;
    font-weight: 600;
    text-decoration: none;
}
.aifi-tools-upgrade-hint a:hover {
    text-decoration: underline;
}

/* Settings page styles */
.aifi-settings-section {
    margin: 20px 0;
    padding: 20px;
    background: #fff;
    border: 1px solid #ccd0d4;
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
}

.aifi-settings-section h2 {
    margin-top: 0;
}

.aifi-settings-section .form-table th {
    width: 200px;
}

/* Responsive adjustments */
@media screen and (max-width: 782px) {
    .aifi-settings-section .form-table th {
        width: auto;
    }
}

/* Review request notice (shared with settings.css) */
.aifi-review-notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #fffbeb 0%, #fff8e5 100%);
    border: 1px solid #fcd34d;
    border-left: 4px solid #f59e0b;
    border-radius: 6px;
    margin: 16px 20px 5px 0;
}
.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;
}

/* Post-list AI Image column */
.column-aifi_image {
    width: 130px;
}
.aifi-col-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}
.aifi-list-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 2px;
    display: block;
    transition: opacity 0.2s;
}
.aifi-no-image {
    font-size: 12px;
    color: #646970;
}
.aifi-generate-link {
    font-size: 12px;
    white-space: nowrap;
    min-height: 24px;
}
/* Result of the last list action; stays until the next one. */
.aifi-list-result {
    display: block;
    max-width: 130px;
    font-size: 12px;
    line-height: 1.4;
    color: #1d6b38;
}
.aifi-list-result:empty {
    display: none;
}
.aifi-list-result.is-error {
    color: #b32d2e;
}
.aifi-list-dismiss {
    display: block;
    margin: 2px auto 0;
    font-size: 12px;
}
.aifi-list-webp-note {
    display: block;
    margin-top: 4px;
    padding: 2px 6px;
    background: #fff8e5;
    border: 1px solid #f0b849;
    border-radius: 3px;
    color: #674e00;
}
.aifi-list-spinner {
    float: none !important;
    margin: 0 !important;
    vertical-align: middle;
}

/* Users who ask for less motion still need to know something is happening, so the
   spinner stays visible and simply stops rotating. */
@media (prefers-reduced-motion: reduce) {
    .aifi-spinner {
        animation: none;
        border-top-color: var(--wp-admin-theme-color, #2271b1);
        opacity: 0.6;
    }
    .aifi-meta-box * {
        transition: none !important;
    }
}