/* ─── Generator Modal overrides ─── */
#generatorModal .red-header-modal {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 40px);
    /* State 1 (the form) is a 2-column grid — 800px is roomy without swallowing
       the viewport. State 2 (generated output) needs more room; widened below. */
    max-width: min(800px, 94vw) !important;
}
/* State 2 — the generated agenda/output view gets a much wider canvas. */
#generatorModal:has(#generatorOutputView:not(.hidden)) .red-header-modal {
    max-width: min(1200px, 94vw) !important;
}
#generatorModal .red-header-modal-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--bg-page-alt, #FFFBF8);
}

/* ─── Generator Form ─── */
#generatorFormView {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
#generatorFormView.hidden,
#generatorOutputView.hidden,
#generatorLoadingView.hidden,
#generatorErrorView.hidden {
    display: none;
}
.generator-form { padding: 4px 0; }
.generator-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.generator-form__field--full { grid-column: 1 / -1; }
.generator-form__label {
    display: block;
    font-size: var(--text-small);
    font-weight: var(--font-semibold);
    color: var(--color-ink-text, #2C2416);
    margin-bottom: 7px;
}
.generator-form__req { color: var(--planner-primary, #E54D4D); }
.generator-form__input,
.generator-form__select {
    width: 100%;
    padding: 11px 13px;
    border: 1.5px solid var(--planner-border, rgba(44,36,22,0.12));
    border-radius: var(--radius-lg, 8px);
    font-size: var(--text-ui);
    font-family: var(--font-body);
    color: var(--color-ink-text, #2C2416);
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.generator-form__input:focus,
.generator-form__select:focus {
    outline: none;
    border-color: var(--planner-primary, #E54D4D);
    box-shadow: 0 0 0 3px rgba(229, 77, 77, 0.1);
}
.generator-form__input::placeholder { color: var(--color-ink-muted, #78716C); }
/* Keep autofilled fields on-theme — browsers otherwise force a pale blue fill
   that clashes with the red focus ring. */
.generator-form__input:-webkit-autofill,
.generator-form__input:-webkit-autofill:hover,
.generator-form__select:-webkit-autofill {
    -webkit-text-fill-color: var(--color-ink-text, #2C2416);
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    box-shadow: 0 0 0 1000px #fff inset;
    caret-color: var(--color-ink-text, #2C2416);
}
.generator-form__input:-webkit-autofill:focus,
.generator-form__select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset, 0 0 0 3px rgba(229, 77, 77, 0.1);
    box-shadow: 0 0 0 1000px #fff inset, 0 0 0 3px rgba(229, 77, 77, 0.1);
}

/* Field width tuning */
#generatorContext {
    resize: vertical;
}
.generator-form__helper {
    display: block;
    font-size: var(--text-meta);
    color: var(--color-ink-muted, #78716C);
    margin-top: 6px;
}
.generator-form__toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-small);
    font-weight: var(--font-semibold);
    color: var(--color-ink-secondary, #5C5242);
    cursor: pointer;
    padding: 16px 0 8px;
    border: none;
    background: none;
    font-family: inherit;
}
.generator-form__toggle:hover { color: var(--planner-primary, #E54D4D); }
.generator-form__toggle .material-symbols-rounded,
.generator-form__toggle .icon {
    width: 18px;
    height: 18px;
    font-size: var(--text-h4, 18px);
    transition: transform 0.2s;
}
.generator-form__toggle.expanded .material-symbols-rounded,
.generator-form__toggle.expanded .icon {
    transform: rotate(180deg);
}
.generator-form__optional {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--planner-border, rgba(44,36,22,0.10));
    border-radius: var(--radius-xl, 12px);
    padding: 18px;
    margin-top: 4px;
}

/* ─── Output View ─── */
#generatorOutputView {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.generator-output {
    display: grid;
    grid-template-columns: 1fr 340px;
    flex: 1;
    min-height: 0;
    border-top: 1px solid var(--planner-border, rgba(44,36,22,0.12));
    margin: 0 -24px;
}
/* Stack the agenda + rationale rail on narrow screens so neither is cramped. */
@media (max-width: 820px) {
    .generator-output { grid-template-columns: 1fr; }
}
.generator-agenda {
    padding: 20px 24px;
    overflow-y: auto;
    background-color: var(--planner-gray-50, #FAFAF9);
    background-image: radial-gradient(circle, var(--planner-gray-300, #D6D3D1) 1px, transparent 1px);
    background-size: 16px 16px;
}
.generator-agenda__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 8px;
}
.generator-agenda__header h3 {
    font-size: var(--text-h3);
    font-weight: var(--font-bold);
    color: var(--color-ink-text, #2C2416);
}
.generator-agenda__total {
    font-size: var(--text-small);
    font-weight: var(--font-semibold);
    color: var(--planner-primary, #E54D4D);
    background: var(--planner-very-light, #FEE2E2);
    padding: 4px 10px;
    border-radius: var(--radius-full, 999px);
}

/* Agenda item rows are now rendered by AgendaRenderer from design-system
   components (ws-card / ws-activity-badge / ws-badge). Their layout lives in
   css/planner/components/_agenda-generative.css. The old bespoke
   `.generator-item*` styles were removed in v2.8.7. */

/* Rationale panel */
.generator-rationale {
    padding: 20px;
    background: #F0EBE3;
    border-left: 1px solid var(--planner-border, rgba(44,36,22,0.12));
    overflow-y: auto;
}
.generator-rationale h3 {
    font-size: var(--text-h3);
    font-weight: var(--font-bold);
    color: var(--color-ink-text, #2C2416);
    margin-bottom: 4px;
}
.generator-rationale__subtitle {
    font-size: var(--text-small);
    color: var(--color-ink-muted, #78716C);
    margin-bottom: 16px;
}
/* Per-item rationale + swap suggestions are now rendered by AgendaRenderer
   from ws-card / ws-suggestion-card; the old `.generator-rationale__card` and
   `.generator-swap` styles were removed in v2.8.7. */

/* Refine strip */
.generator-refine {
    display: flex;
    align-items: center;      /* vertical centering of icon / field / button */
    gap: 10px;
    background: var(--planner-very-light, #FEE2E2);
    border: 1px solid rgba(229, 77, 77, 0.22);
    border-radius: 10px;
    padding: 9px 12px;
    margin-bottom: 16px;
    flex-shrink: 0;
}
.generator-refine__icon {
    width: 20px;
    height: 20px;
    color: var(--planner-dark, #C73E3E);
    flex-shrink: 0;
}
/* ws_input wrapper flexes to fill the strip; the .ws-input inside carries the
   design-system field styling (white surface, border, red focus ring). The
   #generatorModal scope (specificity 1,1,0) beats the bridge's
   `.modal-overlay .ws-field` form-stacking margin, which would otherwise offset
   the field's vertical centering in the strip. */
#generatorModal .generator-refine__field {
    flex: 1;         /* fill the space so icon+field sit left, Refine button right */
    min-width: 0;
    margin: 0;
}
.generator-refine__field .ws-input { padding: 9px 14px; }

/* Loading */
.generator-loading {
    text-align: center;
    padding: 44px 20px;
}
.generator-loading__indicator {
    position: relative;
    width: 44px;
    height: 44px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
}
.generator-loading__spinner {
    position: absolute;
    inset: 0;
    border: 3px solid rgba(229, 77, 77, 0.15);
    border-top-color: var(--planner-primary, #E54D4D);
    border-radius: 50%;
    animation: generatorSpin 0.8s linear infinite;
}
.generator-loading__sparkle {
    display: inline-flex;
    color: var(--planner-primary, #E54D4D);
    animation: generatorPulse 1.2s ease-in-out infinite;
}
.generator-loading__sparkle .icon {
    width: 20px;
    height: 20px;
}
@keyframes generatorSpin { to { transform: rotate(360deg); } }
@keyframes generatorPulse {
    0%, 100% { opacity: 0.45; transform: scale(0.82); }
    50%      { opacity: 1;    transform: scale(1.08); }
}
.generator-loading__title {
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    font-weight: var(--font-semibold);
    color: var(--color-ink-text, #2C2416);
    margin-bottom: 4px;
}
.generator-loading__subtitle {
    font-size: var(--text-small);
    color: var(--color-ink-muted, #78716C);
}

/* Error */
.generator-error {
    text-align: center;
    padding: 40px 20px;
}
.generator-error__icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-error-very-light, #FEE2E2);
    color: var(--color-error, #EF4444);
}
.generator-error__icon .icon,
.generator-error .material-symbols-rounded {
    width: 22px;
    height: 22px;
    font-size: var(--text-h2, 22px);
    color: var(--color-error, #EF4444);
}
.generator-error h3 {
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    font-weight: var(--font-semibold);
    color: var(--color-ink-text, #2C2416);
    margin-bottom: 4px;
}
.generator-error p {
    font-size: var(--text-small);
    color: var(--color-ink-muted, #78716C);
    margin-bottom: 16px;
}

/* Footer variants */
.generator-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.generator-footer.hidden {
    display: none;
}

/* Form footer holds a single auto-width submit button — keep it right-aligned */
#generatorFormFooter {
    justify-content: flex-end;
}
.generator-footer__legend {
    display: flex;
    gap: 12px;
}
.generator-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-ui);
    color: var(--color-ink-secondary, #5C5242);
}
.generator-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.generator-legend-dot--exercise { background: var(--planner-exercise-color, #2563EB); }
.generator-legend-dot--icebreaker { background: var(--planner-icebreaker-color, #22C55E); }
.generator-legend-dot--break { background: var(--planner-break-color, #A8A29E); }
.generator-legend-dot--custom { background: var(--planner-custom-color, #9333EA); }
.generator-footer__actions {
    display: flex;
    gap: 8px;
}

/* Cream background on footer area */
#generatorModal .red-header-modal-footer {
    background: transparent;
}