/* ==========================================================================
   AI Assistant — customer-facing surfaces
   --------------------------------------------------------------------------
   Covers the sparkle inline-rewrite affordance + popover, and the A/B subject
   generator card.

   Colour comes exclusively from the --color-ai-* tokens already defined in
   variables.css (light at :286-295, dark at :689-698), routed through one
   accent pair so the five-hue palette is actually switchable. No new hex
   literals — that is the F2.6-S5 invariant the chatbox catalog documents.
   ========================================================================== */

:root {
    --ai-accent-bg: var(--color-ai-violet-bg);
    --ai-accent-fg: var(--color-ai-violet-fg);
    /* Above side-panel (360) and modal (500) because sparkle-annotated fields
       render inside McSidePanel/McPopup content; below toast (2000) so error
       notifications still win. */
    --z-ai-popover: 1200;
}

[data-ai-hue="teal"]   { --ai-accent-bg: var(--color-ai-teal-bg);   --ai-accent-fg: var(--color-ai-teal-fg); }
[data-ai-hue="orange"] { --ai-accent-bg: var(--color-ai-orange-bg); --ai-accent-fg: var(--color-ai-orange-fg); }
[data-ai-hue="green"]  { --ai-accent-bg: var(--color-ai-green-bg);  --ai-accent-fg: var(--color-ai-green-fg); }
[data-ai-hue="indigo"] { --ai-accent-bg: var(--color-ai-indigo-bg); --ai-accent-fg: var(--color-ai-indigo-fg); }

/* --------------------------------------------------------------------------
   Field wrapper + sparkle trigger
   -------------------------------------------------------------------------- */

.mc-ai-field {
    position: relative;
    display: block;
}

/* Reserve room so long values never slide under the trigger. */
.mc-ai-field .mc-ai-field-input {
    padding-right: 38px;
}

.mc-ai-sparkle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    /* Quiet chrome, but never fully invisible — a hover-only reveal is
       undiscoverable on touch. */
    opacity: 0.55;
    transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.mc-ai-field:hover .mc-ai-sparkle,
.mc-ai-field:focus-within .mc-ai-sparkle,
.mc-ai-sparkle:focus-visible,
.mc-ai-sparkle.is-open {
    opacity: 1;
    background: var(--ai-accent-bg);
    color: var(--ai-accent-fg);
}

.mc-ai-sparkle:focus-visible {
    outline: 2px solid var(--ai-accent-fg);
    outline-offset: 1px;
}

.mc-ai-sparkle .material-symbols-rounded { font-size: 18px; line-height: 1; }

.mc-ai-sparkle.is-busy { animation: mc-ai-pulse 1.4s ease-in-out infinite; }

@keyframes mc-ai-pulse {
    0%, 100% { opacity: 1;    transform: translateY(-50%) scale(1); }
    50%      { opacity: 0.55; transform: translateY(-50%) scale(0.92); }
}

/* Textareas: pin bottom-right so the trigger never covers the first line. */
.mc-ai-field--textarea .mc-ai-sparkle {
    top: auto;
    bottom: 10px;
    transform: none;
}

.mc-ai-field--textarea .mc-ai-sparkle.is-busy { animation: mc-ai-pulse-flat 1.4s ease-in-out infinite; }

@keyframes mc-ai-pulse-flat {
    0%, 100% { opacity: 1;    transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(0.92); }
}

/* The preheader input lives in a flex row whose child carries flex:1
   (wizard.css). Wrapping the input steals that, so hand it to the wrapper. */
.mc-wizard-preheader-row .mc-ai-field { flex: 1; min-width: 0; }
.mc-wizard-preheader-row .mc-ai-field .mc-form-input { width: 100%; }

/* --------------------------------------------------------------------------
   Popover
   -------------------------------------------------------------------------- */

.mc-ai-pop {
    position: fixed;
    z-index: var(--z-ai-popover);
    width: 380px;
    max-width: calc(100vw - 16px);
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card, 10px);
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.16));
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.mc-ai-pop.is-open { display: flex; }

.mc-ai-pop-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.mc-ai-pop-icon {
    width: 28px; height: 28px;
    flex: 0 0 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm, 6px);
    background: var(--ai-accent-bg);
    color: var(--ai-accent-fg);
}
.mc-ai-pop-icon .material-symbols-rounded { font-size: 18px; }

.mc-ai-pop-heading { flex: 1; min-width: 0; }
.mc-ai-pop-title    { font-weight: 600; font-size: var(--text-sm, 13px); }
.mc-ai-pop-subtitle {
    font-size: var(--text-xs, 12px);
    color: var(--color-text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mc-ai-pop-scope-chip {
    font-size: var(--text-xs, 12px);
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--ai-accent-bg);
    color: var(--ai-accent-fg);
    white-space: nowrap;
}

.mc-ai-pop-close {
    border: 0; background: transparent; cursor: pointer;
    color: var(--color-text-muted);
    display: inline-flex; align-items: center; padding: 2px;
    border-radius: var(--radius-sm, 6px);
}
.mc-ai-pop-close:hover { color: var(--color-text); }

.mc-ai-pop-body {
    padding: var(--space-3) var(--space-4);
    max-height: 52vh;
    overflow-y: auto;
}

.mc-ai-pop-section-label {
    font-size: var(--text-xs, 12px);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-2);
}

.mc-ai-pop-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.mc-ai-pop-action {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: var(--space-2) 4px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    color: var(--color-text);
    font-size: var(--text-xs, 12px);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}
.mc-ai-pop-action .material-symbols-rounded { font-size: 18px; color: var(--color-text-muted); }
.mc-ai-pop-action:hover { border-color: var(--ai-accent-fg); }
.mc-ai-pop-action.is-active {
    border-color: var(--ai-accent-fg);
    background: var(--ai-accent-bg);
    color: var(--ai-accent-fg);
}
.mc-ai-pop-action.is-active .material-symbols-rounded { color: var(--ai-accent-fg); }
.mc-ai-pop-action.is-disabled { opacity: 0.45; cursor: not-allowed; }

.mc-ai-pop-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.mc-ai-pop-controls > div { min-width: 0; }
.mc-ai-pop-controls label {
    display: block;
    font-size: var(--text-xs, 12px);
    color: var(--color-text-muted);
    margin-bottom: 2px;
}

.mc-ai-pop-custom { margin-bottom: var(--space-3); }

.mc-ai-pop-brandvoice-hint {
    font-size: var(--text-xs, 12px);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}
.mc-ai-pop-brandvoice-hint a { color: var(--ai-accent-fg); }

/* Loading */
.mc-ai-pop-skeleton { display: none; }
.mc-ai-pop-skeleton.is-visible { display: block; }
.mc-ai-pop-skeleton-line {
    height: 10px;
    border-radius: 5px;
    margin-bottom: 8px;
    background: linear-gradient(90deg,
        var(--color-border) 25%,
        var(--ai-accent-bg) 50%,
        var(--color-border) 75%);
    background-size: 200% 100%;
    animation: mc-ai-shimmer 1.2s linear infinite;
}
.mc-ai-pop-skeleton-line:nth-child(2) { width: 82%; }
.mc-ai-pop-skeleton-line:nth-child(3) { width: 64%; }

@keyframes mc-ai-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* Result */
.mc-ai-pop-result { display: none; }
.mc-ai-pop-result.is-visible { display: block; }

.mc-ai-pop-variant-nav {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    font-size: var(--text-xs, 12px);
    color: var(--color-text-muted);
}
.mc-ai-pop-variant-nav button {
    border: 1px solid var(--color-border);
    background: transparent;
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    padding: 0 8px; line-height: 22px;
    color: var(--color-text);
}
.mc-ai-pop-variant-nav button:disabled { opacity: 0.4; cursor: default; }

.mc-ai-pop-original { margin-bottom: var(--space-2); }
.mc-ai-pop-original summary {
    cursor: pointer;
    font-size: var(--text-xs, 12px);
    color: var(--color-text-muted);
}
.mc-ai-pop-original-text {
    margin-top: 4px;
    font-size: var(--text-xs, 12px);
    color: var(--color-text-muted);
    white-space: pre-wrap;
    word-break: break-word;
}

.mc-ai-pop-output { width: 100%; min-height: 84px; resize: vertical; }

.mc-ai-pop-meta {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-2);
    margin-top: 4px;
    font-size: var(--text-xs, 12px);
    color: var(--color-text-muted);
}
.mc-ai-pop-chars.is-over { color: var(--color-error); font-weight: 600; }
.mc-ai-pop-engine-pill {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--ai-accent-bg);
    color: var(--ai-accent-fg);
}

.mc-ai-pop-tag-warning {
    display: none;
    margin-top: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--color-warning, #d97706);
    font-size: var(--text-xs, 12px);
}
.mc-ai-pop-tag-warning.is-visible { display: block; }
.mc-ai-pop-tag-warning code { font-family: var(--font-mono, monospace); }

.mc-ai-pop-error {
    display: none;
    padding: var(--space-2);
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--color-error);
    color: var(--color-error);
    font-size: var(--text-xs, 12px);
}
.mc-ai-pop-error.is-visible { display: block; }

/* "Connect an AI provider" — the one error state that is a prompt rather than
   a failure, so it drops the red error framing entirely. Painting a setup step
   the customer has simply not done yet as an error is what makes a first run
   feel broken. */
.mc-ai-pop-error.is-setup {
    border-color: var(--color-border);
    color: var(--color-text);
    background: var(--color-surface-muted, transparent);
}
.mc-ai-pop-error-title {
    display: block;
    font-size: var(--text-sm, 13px);
    font-weight: 600;
    margin-bottom: var(--space-1);
}
.mc-ai-pop-error-text { line-height: 1.5; }
.mc-ai-pop-error-cta {
    display: inline-flex;
    margin-top: var(--space-3);
    text-decoration: none;
}

.mc-ai-pop-footer {
    display: flex; align-items: center; justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
}

/* Undo affordance — McNotify has no action-button support, so the undo lives
   inline next to the field it changed. */
.mc-ai-undo,
.mc-ai-unsaved {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 6px;
    font-size: var(--text-xs, 12px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    color: var(--color-text-muted);
    padding: 2px 8px;
    cursor: pointer;
}
.mc-ai-undo .material-symbols-rounded { font-size: 14px; }
.mc-ai-unsaved { cursor: default; border-color: var(--color-warning, #d97706); color: var(--color-warning, #d97706); }

/* --------------------------------------------------------------------------
   A/B subject generator card
   -------------------------------------------------------------------------- */

.ab-ai-gen {
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card, 10px);
    box-shadow: var(--shadow-card, 0 1px 2px rgba(0, 0, 0, 0.06));
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}

.ab-ai-gen-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.ab-ai-gen-icon {
    width: 32px; height: 32px; flex: 0 0 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm, 6px);
    background: var(--ai-accent-bg); color: var(--ai-accent-fg);
}
.ab-ai-gen-title { font-weight: 600; }
.ab-ai-gen-hint  { font-size: var(--text-sm, 13px); color: var(--color-text-muted); margin-bottom: var(--space-4); }

.ab-ai-gen-note {
    display: none;
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--color-warning, #d97706);
    color: var(--color-warning, #d97706);
    font-size: var(--text-xs, 12px);
}
.ab-ai-gen-note.is-visible { display: block; }

.ab-ai-gen-form {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) 110px 150px auto;
    gap: var(--space-3);
    align-items: end;
}
.ab-ai-gen-form label {
    display: block;
    font-size: var(--text-xs, 12px);
    color: var(--color-text-muted);
    margin-bottom: 2px;
}

@media (max-width: 900px) {
    .ab-ai-gen-form { grid-template-columns: minmax(0, 1fr); }
}

.ab-ai-gen-loading { display: none; margin-top: var(--space-4); }
.ab-ai-gen-loading.is-visible { display: block; }
.ab-ai-gen-skeleton-row {
    height: 38px;
    border-radius: var(--radius-sm, 6px);
    margin-bottom: var(--space-2);
    background: linear-gradient(90deg,
        var(--color-border) 25%, var(--ai-accent-bg) 50%, var(--color-border) 75%);
    background-size: 200% 100%;
    animation: mc-ai-shimmer 1.2s linear infinite;
}

.ab-ai-gen-results { display: none; margin-top: var(--space-4); }
.ab-ai-gen-results.is-visible { display: block; }

.ab-ai-gen-results-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    font-size: var(--text-sm, 13px);
}

.ab-ai-gen-list { list-style: none; margin: 0; padding: 0; }

.ab-ai-gen-item {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 6px);
    margin-bottom: var(--space-2);
}
.ab-ai-gen-item.is-excluded { opacity: 0.5; }
.ab-ai-gen-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ab-ai-gen-name    { max-width: 180px; }
.ab-ai-gen-chars   { font-size: var(--text-xs, 12px); color: var(--color-text-muted); white-space: nowrap; }
.ab-ai-gen-chars.is-over { color: var(--color-error); font-weight: 600; }

.ab-ai-gen-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); }

.ab-ai-gen-error {
    display: none;
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--color-error);
    color: var(--color-error);
    font-size: var(--text-sm, 13px);
}
.ab-ai-gen-error.is-visible { display: block; }

/* Same reasoning as .mc-ai-pop-error.is-setup: a provider the customer has not
   connected yet is a setup step, not a failure, so it loses the red framing. */
.ab-ai-gen-error.is-setup {
    border-color: var(--color-border);
    color: var(--color-text);
}
.ab-ai-gen-error-cta {
    display: inline-flex;
    margin-top: var(--space-3);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Reduced motion — kill the shimmer and the pulse, keep opacity changes.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .mc-ai-sparkle.is-busy,
    .mc-ai-pop-skeleton-line,
    .ab-ai-gen-skeleton-row {
        animation: none;
    }
    .mc-ai-pop-skeleton-line,
    .ab-ai-gen-skeleton-row { background: var(--color-border); }
    .mc-ai-sparkle { transition: none; }
}