/* Automations module — hub tabs, workflow cards, style-preset picker
   (same swatch-button idiom as mood.js's ACCENT map), approval queue. */

/* Width/centering now come from polish.css's shared .kb-page/.automations-page
   rule (--workspace-max) — this used to hardcode its own 1120px cap here,
   which drifted out of sync once .kb-page was promoted to the shared
   --workspace-max value and started rendering visibly wider. */
.automations-page { padding-bottom: var(--space-8); }

.automations-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.automations-tab { padding: var(--space-2) var(--space-3); border: none; background: none; font-weight: var(--font-medium); color: var(--color-fg-muted); cursor: pointer; border-bottom: 2px solid transparent; }
.automations-tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

.automations-list { display: grid; gap: var(--space-5); }

/* ── Workflow pipeline card — window-chrome header, a connected
   TRIGGER → CREATE → DELIVER pipeline, an inline message-preview snippet
   between steps 2 and 3. Mirrors the marketing site's own mockup; the
   full interactive chat/Slack/email preview stays in the edit modal only
   (auto-live-preview below), this is a lighter static summary. */
.ac-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xs); overflow: hidden; }
.ac-card--draft { opacity: .85; }

.ac-card__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); }
.ac-card__dots { display: flex; gap: 5px; flex-shrink: 0; }
.ac-card__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-border-strong); }
.ac-card__title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ac-card__title b { font-size: var(--text-base); color: var(--color-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-card__title small { color: var(--color-fg-muted); font-size: var(--text-xs); }
.ac-status { flex-shrink: 0; padding: 3px 11px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: .04em; }
.ac-status--active { background: var(--color-success-soft); color: var(--color-success); }
.ac-status--draft { background: var(--color-warning-soft); color: var(--color-warning); }

.ac-pipeline {
  position: relative;
  padding: var(--space-5);
  display: grid; gap: var(--space-3);
  background-color: var(--color-surface-2);
  background-image: radial-gradient(circle, var(--color-border) 1px, transparent 1px);
  background-size: 18px 18px;
}
.ac-pipeline::before { content: ''; position: absolute; left: calc(var(--space-5) + 15px); top: calc(var(--space-5) + var(--space-3) + 16px); bottom: calc(var(--space-5) + var(--space-3) + 16px); width: 2px; background: var(--color-border-strong); }

.ac-step { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); }
.ac-step__label { flex-shrink: 0; width: 76px; font-size: 10px; font-weight: var(--font-bold); letter-spacing: .04em; color: var(--color-fg-subtle); text-transform: uppercase; }
.ac-step__badge { flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--radius-md); display: grid; place-items: center; font-size: var(--text-sm); font-weight: var(--font-bold); }
.ac-step__badge--trigger { background: var(--color-primary-soft); font-size: 16px; }
.ac-step__badge--ai { background: color-mix(in srgb, #8b5cf6 16%, #fff); color: #7c3aed; }
.ac-step__badge--deliver { background: color-mix(in srgb, var(--badge-color, var(--color-primary)) 16%, #fff); color: var(--badge-color, var(--color-primary)); }
.ac-step__body { min-width: 0; }
.ac-step__body b { display: block; font-size: var(--text-sm); color: var(--color-fg); }
.ac-step__body small { display: block; color: var(--color-fg-muted); font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ac-preview { position: relative; z-index: 1; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); }
.ac-preview__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.ac-preview__head span { font-size: 10px; font-weight: var(--font-bold); letter-spacing: .06em; color: var(--color-fg-subtle); }
.ac-preview__edit { background: none; border: none; color: var(--color-primary); font-size: var(--text-xs); font-weight: var(--font-semibold); cursor: pointer; padding: 3px 8px; border-radius: var(--radius-sm); }
.ac-preview__edit:hover { background: var(--color-primary-soft); }
.ac-preview__body b { display: block; color: var(--color-fg); font-size: var(--text-sm); margin-bottom: 2px; }
.ac-preview__body p { color: var(--color-fg-muted); font-size: var(--text-sm); line-height: 1.5; margin: 0 0 var(--space-2); }
.ac-preview__body small { color: #7c3aed; font-weight: var(--font-medium); font-size: var(--text-xs); }

.ac-card__actions { display: flex; gap: var(--space-2); justify-content: flex-end; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border); background: var(--color-surface); }

/* Style-preset picker */
.auto-style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-3); }
.auto-style-opt {
  position: relative; display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-lg); border: 2px solid var(--color-border);
  background: var(--color-surface); cursor: pointer; text-align: left; transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.auto-style-opt:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.auto-style-opt.is-active { border-color: var(--auto-a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--auto-a) 20%, transparent); }
.auto-style-opt__swatch { height: 40px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--auto-a), var(--auto-b)); }
.auto-style-opt__label { font-size: var(--text-sm); font-weight: var(--font-medium); }

.auto-ai-warning { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-warning) 12%, transparent); color: var(--color-warning); font-size: var(--text-sm); margin: var(--space-2) 0; }

.automation-queue-list { display: grid; gap: var(--space-3); }
.automation-queue-item { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-xs); display: grid; gap: var(--space-3); }
.automation-queue-item__head { display: flex; align-items: center; gap: var(--space-3); }
.automation-queue-item__avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); font-weight: var(--font-bold); font-size: var(--text-xs); flex-shrink: 0; }
.automation-queue-item__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.automation-queue-item__who b { font-size: var(--text-sm); }
.automation-queue-item__who small { color: var(--color-fg-muted); font-size: var(--text-xs); }
.automation-queue-item__label { font-size: var(--text-xs); color: var(--color-fg-muted); font-weight: var(--font-medium); }
.automation-queue-item__text { width: 100%; min-height: 90px; border-radius: var(--radius-md); border: 1px solid var(--color-border); padding: var(--space-3); font-size: var(--text-sm); line-height: 1.5; resize: vertical; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.automation-queue-item__text:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.automation-queue-item__actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
.automation-queue-item__actions .btn svg { margin-right: 4px; }

.automation-status { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-medium); }
.automation-status--pending_approval { background: color-mix(in srgb, var(--color-warning) 15%, transparent); color: var(--color-warning); }
.automation-status--sent { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
.automation-status--rejected, .automation-status--failed { background: color-mix(in srgb, var(--color-danger) 15%, transparent); color: var(--color-danger); }

.automations-oauth-note { padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-bg-subtle, var(--color-border)); color: var(--color-fg-muted); font-size: var(--text-sm); margin-top: var(--space-3); }

/* Workflow editor: form + live preview, same grid idiom as
   settings-career-site.js's .cs-editor/.cs-live-preview. */
.automation-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); align-items: start; gap: var(--space-5); }
.automation-editor__main { min-width: 0; }
/* Plain <h3> section dividers, restyled to match workflow-modal's premium
   treatment now that the modal shell itself uses it — a bare browser-default
   heading would clash with the upgraded inputs/actions bar around it. */
.automation-editor__main h3 { margin: 0; padding-top: var(--space-5); border-top: 1px solid var(--color-border); font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--color-fg); }
.automation-editor__main h3:first-child { padding-top: 0; border-top: none; }
.automation-editor__aside { position: sticky; top: var(--space-2); }
@media (max-width: 720px) { .automation-editor { grid-template-columns: 1fr; } .automation-editor__aside { position: static; } }
@media (max-width: 480px) {
  .automations-tabs { gap: 0; overflow-x: auto; scrollbar-width: none; }
  .automations-tab { flex: 0 0 auto; }
  .ac-card__head { flex-wrap: wrap; row-gap: var(--space-2); padding: var(--space-4); }
  .ac-pipeline { padding: var(--space-3); }
  .ac-pipeline::before { left: calc(var(--space-3) + 15px); top: calc(var(--space-3) + var(--space-3) + 16px); bottom: calc(var(--space-3) + var(--space-3) + 16px); }
  .ac-step { align-items: flex-start; padding: var(--space-3); }
  .ac-step__label { width: 52px; padding-top: 9px; font-size: 8px; }
  .ac-card__actions { padding: var(--space-3) var(--space-4); }
  .ac-card__actions .btn { flex: 1; }
  .auto-style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .automation-queue-item__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.auto-live-preview { padding: var(--space-4); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
.auto-live-preview__head { margin-bottom: var(--space-3); font-size: var(--text-sm); font-weight: var(--font-bold); }
.auto-live-preview__window { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); }
.auto-live-preview__chatbar { display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-bottom: 1px solid var(--color-border); background: var(--color-surface-2); }
.auto-live-preview__chatbar i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-border-strong); }
.auto-live-preview__chatbar span { margin-left: 5px; color: var(--color-fg-subtle); font-size: 10px; font-weight: var(--font-medium); }
.auto-live-preview__canvas { padding: var(--space-3); }

/* ── Google Chat card mock — matches the actual Card v2 shape delivered
   (white card, avatar+title+subtitle header, icon+label chip row, divider,
   plain body, CTA button). Chat renders no custom CSS/gradients at all, so
   this deliberately has none either — richness comes from real widgets
   (decoratedText/divider/buttonList), not color. */
.gchat-card-mock { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px; font-family: -apple-system, Roboto, sans-serif; color: #1f2937; }
.gchat-card-mock__header { display: flex; align-items: center; gap: 10px; }
.gchat-card-mock__avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #e0e7ff; color: #4338ca; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.gchat-card-mock__title { display: block; font-size: 14px; color: #1f2937; }
.gchat-card-mock__subtitle { display: block; font-size: 12px; color: #6b7280; }
.gchat-card-mock__divider { height: 1px; background: #eef0f2; margin: 10px 0; }
.gchat-card-mock__body { font-size: 13px; line-height: 1.5; color: #374151; white-space: normal; }
.gchat-card-mock__row { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: #374151; font-weight: 600; }
.gchat-card-mock__icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #fef3c7; color: #b45309; font-size: 11px; }
.gchat-card-mock__button { display: inline-block; padding: 6px 14px; border-radius: 6px; border: 1px solid #d1d5db; color: #1a73e8; font-size: 12px; font-weight: 600; }
.gchat-card-mock__button--filled { border: none; background: var(--btn-color, #1a73e8); color: #fff; }
.gchat-card-mock__banner { margin-top: 10px; padding: 20px 10px; border-radius: 6px; background: #f1f5f9; color: #94a3b8; font-size: 11px; text-align: center; border: 1px dashed #cbd5e1; }
.gchat-card-mock__columns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.gchat-card-mock__columns .gchat-card-mock__row { margin-top: 0; }
/* "Мінімалізм" skips the card entirely in the real delivery — matches that
   1:1 by rendering as a plain chat bubble, not a card. */
.gchat-card-mock--plain { background: #e8f0fe; border: none; border-radius: 14px; padding: 10px 14px; font-size: 13px; line-height: 1.5; color: #1f2937; max-width: 85%; }

/* ── Slack preview mock — mirrors src/automation-delivery.js's
   buildSlackBlocks 1:1: bot row (avatar/name/APP badge/time) plus a legacy
   attachment's colored sidebar bar, which is Slack's one real per-preset
   brand-color lever (richer than Chat's button-only color). "Мінімалізм"
   sends a bare message with no blocks/attachment at all, same "no card"
   philosophy as the Chat mock's --plain variant. */
.slack-msg-mock { display: flex; gap: 10px; font-family: -apple-system, Roboto, sans-serif; color: #1d1c1d; }
.slack-msg-mock__avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: #611f69; color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.slack-msg-mock__col { flex: 1; min-width: 0; }
.slack-msg-mock__head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.slack-msg-mock__head b { font-size: 13px; color: #1d1c1d; }
.slack-msg-mock__appbadge { padding: 1px 5px; border-radius: 3px; background: #e8e8e8; color: #616061; font-size: 9px; font-weight: 700; }
.slack-msg-mock__time { font-size: 11px; color: #979797; }
.slack-msg-mock__plain { font-size: 13px; line-height: 1.5; }
.slack-msg-mock__attachment { border-left: 4px solid var(--slack-color, #611f69); padding: 2px 0 2px 10px; font-size: 13px; line-height: 1.5; }
.slack-msg-mock__section { margin: 4px 0; }
.slack-msg-mock__quote { margin: 4px 0; padding-left: 10px; border-left: 3px solid #dfdfdf; color: #454245; }
.slack-msg-mock__context { font-size: 11px; color: #616061; font-weight: 700; margin: 4px 0; }
.slack-msg-mock__image { margin: 6px 0; padding: 18px 10px; border-radius: 4px; background: #f8f8f8; color: #979797; font-size: 11px; text-align: center; border: 1px dashed #dfdfdf; }
.slack-msg-mock__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0; font-size: 12px; }
.slack-msg-mock__divider { height: 1px; background: #dfdfdf; margin: 8px 0; }
.slack-msg-mock__button { display: inline-block; margin-top: 6px; padding: 5px 12px; border: 1px solid #dfdfdf; border-radius: 4px; font-size: 12px; font-weight: 600; color: #1d1c1d; background: #fff; }

/* ── Email design mocks — 8 genuinely different layouts, mirroring
   src/automation-delivery.js's builders 1:1 so the preview matches what
   actually gets sent. --a/--b come from the selected style preset. */
.auto-email-mock { font-family: -apple-system, Roboto, sans-serif; font-size: 13px; }
.auto-email-mock__logo-img { max-height: 22px; display: block; margin: 0 auto 10px; }
.auto-email-mock__logo-text { text-align: center; font-weight: 700; color: #334155; margin-bottom: 10px; }
.auto-email-mock__avatar-fallback { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.35); color: #fff; font-weight: 700; font-size: 13px; }
/* Solid-colored variant for whenever the avatar sits on a WHITE/light
   surface — the translucent-white default above only reads correctly
   directly on top of a colored background. Using the wrong one on white
   was the exact cause of the reported "invisible avatar" bug. */
.auto-email-mock__avatar-fallback--solid { background: var(--a); }
.auto-email-mock__name { text-align: center; font-weight: 800; color: #fff; font-size: 15px; margin-top: 8px; }
.auto-email-mock__position { text-align: center; color: rgba(255,255,255,.85); font-size: 11px; margin-bottom: 10px; }
.auto-email-mock__position--muted { color: #94a3b8; font-size: 11px; }
.auto-email-mock__text { font-size: 13px; line-height: 1.55; }
.auto-email-mock__text--dark { color: #334155; }
.auto-email-mock__name--dark { font-weight: 700; color: #0f172a; font-size: 13px; }
.auto-email-mock__footer { text-align: center; color: #94a3b8; font-size: 10px; margin-top: 12px; }
.auto-email-mock__chip-row { text-align: center; margin: 8px 0; }

.auto-chip { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.auto-chip--light { background: rgba(255,255,255,.25); color: #fff; }
.auto-chip--dark { background: color-mix(in srgb, var(--a) 16%, #fff); color: var(--a); }

.auto-cta { display: inline-block; margin-top: 12px; padding: 7px 16px; border-radius: 999px; font-size: 11px; font-weight: 700; text-decoration: none; background: linear-gradient(120deg, var(--a), var(--b)); color: #fff; }
.auto-cta--outline { background: none; border: 1.5px solid var(--a); color: var(--a); }

.auto-email-mock--gradient { text-align: center; }
.auto-email-mock--gradient .auto-email-mock__cover { height: 46px; border-radius: 14px 14px 0 0; background-image: linear-gradient(135deg, var(--a), var(--b)); }
.auto-email-mock--gradient .auto-email-mock__card { background: #fff; border-radius: 0 0 14px 14px; padding: 0 16px 18px; box-shadow: var(--shadow-sm); }
.auto-email-mock--gradient .auto-email-mock__avatar-fallback { display: block; margin: -26px auto 0; border: 3px solid #fff; box-shadow: var(--shadow-sm); }
.auto-email-mock--gradient .auto-email-mock__text { background: color-mix(in srgb, var(--a) 7%, #f8fafc); border-radius: 10px; padding: 10px 12px; color: #334155; margin-top: 8px; text-align: left; }

.auto-email-mock--clean { background: #fff; border: 1px solid #e2e8f0; border-top: 3px solid var(--a); border-radius: 10px; padding: 16px; box-shadow: var(--shadow-xs); }
.auto-email-mock--clean .auto-email-mock__identity { display: flex; align-items: center; gap: 10px; margin: 8px 0 10px; }
.auto-email-mock--clean .auto-email-mock__avatar-fallback { background: var(--a); border-radius: 9px; flex-shrink: 0; }

.auto-email-mock--banner { border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); }
.auto-email-mock__banner { background: linear-gradient(120deg, var(--a), var(--b)); padding: 12px; text-align: center; position: relative; }
.auto-email-mock__banner-emoji { position: absolute; right: 10px; top: 2px; font-size: 26px; opacity: .3; }
.auto-email-mock__banner-body { background: #fff; padding: 14px 18px 18px; text-align: center; margin-top: -8px; }
.auto-email-mock--banner .auto-email-mock__avatar-fallback { background: var(--a); display: block; margin: 0 auto 6px; }
.auto-email-mock__ticket { border-top: 2px dashed #e2e8f0; padding-top: 10px; margin-top: 6px; }

.auto-email-mock--minimal { background: #fff; border-top: 3px solid var(--a); padding: 14px 2px 4px; }
.auto-email-mock--minimal .auto-email-mock__identity { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.auto-email-mock--minimal .auto-email-mock__avatar-fallback { width: 26px; height: 26px; font-size: 10px; border-radius: 8px; background: var(--a); flex-shrink: 0; }
.auto-email-mock__eyebrow { text-transform: uppercase; letter-spacing: .07em; font-size: 9px; font-weight: 700; color: var(--a); margin-bottom: 8px; }
.auto-email-mock__minimal-link { margin-top: 10px; color: var(--a); font-size: 11px; font-weight: 700; }

/* "Люкс" — dark editorial premium theme. No gradient; restraint is the
   point. Serif display name, thin gold rule, outlined chip/CTA. */
.auto-email-mock--luxury { background: #15151f; border: 1px solid var(--a); border-radius: 6px; padding: 22px 18px; text-align: center; }
.auto-email-mock__logo-img--luxury { opacity: .9; margin: 0 auto 14px; }
.auto-email-mock__logo-text--luxury { color: #e5e7eb; letter-spacing: .12em; text-transform: uppercase; font-size: 10px; margin-bottom: 14px; }
.auto-email-mock__avatar-fallback--luxury { border: 2px solid var(--a); background: transparent; color: #f5f0e6; margin: 0 auto 12px; display: block; }
.auto-chip--luxury { border: 1px solid var(--a); color: var(--a); background: none; text-transform: uppercase; }
.auto-email-mock__name--luxury { font-family: Georgia, 'Times New Roman', serif; color: #f5f0e6; font-size: 18px; margin-top: 8px; }
.auto-email-mock__position--luxury { color: #8b8b9e; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; }
.auto-email-mock__luxury-rule { width: 30px; height: 1px; background: var(--a); margin: 0 auto 14px; }
.auto-email-mock__text--luxury { color: #d7d7e0; font-size: 13px; line-height: 1.7; text-align: left; }
.auto-cta--luxury { display: inline-block; margin-top: 16px; padding: 7px 18px; border: 1px solid var(--a); border-radius: 2px; color: var(--a); text-transform: uppercase; font-size: 10px; letter-spacing: .08em; background: none; }

/* "Скло" — vibrant gradient backdrop behind a bright translucent "glass"
   card (real backdrop-blur has ~no email-client support, so this fakes
   the effect with a bright card layered over a colorful background). */
.auto-email-mock--glass-wrap { background-image: linear-gradient(135deg, var(--a), var(--b)); border-radius: 16px; padding: 18px 14px; }
.auto-email-mock--glass { background: rgba(255,255,255,.95); border: 1px solid rgba(255,255,255,.6); border-radius: 16px; padding: 18px; text-align: center; box-shadow: var(--shadow-md); }
.auto-email-mock--glass .auto-email-mock__avatar-fallback--solid { display: block; margin: 0 auto 10px; }

/* "Неоновий пульс" — dark cyberpunk theme, the only design using BOTH
   accent colors as a real duotone gradient rule instead of a single tone
   (Luxury is deliberately monotone gold; this is the opposite choice). */
.auto-email-mock--neon-wrap { background: #05050a; border-radius: 20px; padding: 22px 16px; }
.auto-email-mock--neon { background: #0f0f18; border: 1px solid var(--a); border-radius: 16px; padding: 20px 16px; text-align: center; box-shadow: 0 0 20px color-mix(in srgb, var(--a) 40%, transparent); }
.auto-email-mock__avatar-fallback--neon { background: color-mix(in srgb, var(--a) 30%, #0f0f18); border: 2px solid var(--a); box-shadow: 0 0 10px color-mix(in srgb, var(--a) 60%, transparent); margin: 0 auto 10px; display: block; }
.auto-chip--neon { border: 1px solid var(--b); color: var(--b); background: none; text-transform: uppercase; }
.auto-email-mock__name--neon { color: #fff; font-weight: 800; font-size: 16px; margin-top: 6px; }
.auto-email-mock__position--neon { color: #9ca3af; font-size: 11px; margin-bottom: 10px; }
.auto-email-mock__neon-rule { height: 2px; background: linear-gradient(90deg, transparent, var(--a), var(--b), transparent); margin: 0 0 12px; }
.auto-email-mock__text--neon { color: #e5e7eb; font-size: 13px; line-height: 1.6; text-align: left; }
.auto-cta--neon { margin-top: 12px; background: linear-gradient(120deg, var(--a), var(--b)); color: #05050a; font-weight: 800; }

/* "Ретро квиток" — the only two-column email layout: main content on the
   left, a torn-stub-style colored strip (dashed edge, emoji, occasion
   label) on the right, like a literal event ticket. */
.auto-email-mock__ticket { display: flex; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-md); }
.auto-email-mock__ticket-main { flex: 1; background: #fff; padding: 16px 14px; text-align: center; min-width: 0; }
.auto-email-mock__ticket-stub { width: 68px; flex-shrink: 0; background: linear-gradient(160deg, var(--a), var(--b)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; border-left: 2px dashed rgba(255,255,255,.5); text-align: center; }
.auto-email-mock__ticket-stub span:first-child { font-size: 20px; }
.auto-email-mock__ticket-stub-label { color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }

/* AI key validity badges (Settings tab) */
.auto-key-status { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-medium); margin-left: var(--space-2); }
.auto-key-status--unset { background: var(--color-surface-2); color: var(--color-fg-muted); }
.auto-key-status--valid { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
.auto-key-status--invalid { background: color-mix(in srgb, var(--color-danger) 15%, transparent); color: var(--color-danger); }