/* ========== Undo/Redo Buttons ========== */

.undo-redo-group {
    display: flex;
    align-items: center;
    gap: 2px;
}

.undo-redo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-md, 6px);
    background: transparent;
    color: var(--color-ink-muted, #78716C);
    cursor: pointer;
    transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1),
                color 180ms cubic-bezier(0.22, 1, 0.36, 1),
                opacity 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.undo-redo-btn:hover:not(:disabled) {
    background: rgba(44, 36, 22, 0.06);
    color: var(--color-ink, #2C2416);
}

.undo-redo-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.undo-redo-btn .icon {
    width: 18px;
    height: 18px;
}

.toolbar-divider {
    width: 1px;
    height: 20px;
    background: var(--gray-200, #E7E5E4);
    margin: 0 6px;
}

/* ============================================================
   SHARED SLIDE-OUT PANEL SYSTEM
   Applies to Version History, AI Recommendations (suggestions),
   Clean Up Agenda (cleanup), and Schedule. Each panel adds its
   own body content; chrome (container, header, title, subtitle,
   close button, motion, scrollbar) is shared so they read as
   one family. Loaded after planner-v2.css and wins via cascade.
   ============================================================ */

/* Panel Backdrop Overlay (scrim) for dismissing slide-out panels */
.panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(44, 36, 22, 0.15); /* Warm tone matching workshopr brand */
    backdrop-filter: blur(2px); /* Beautiful premium subtle blur */
    z-index: 999; /* Just below the slide-out panels (1000) */
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1),
                visibility 300ms cubic-bezier(0.22, 1, 0.36, 1);
    cursor: pointer;
}

.panel-backdrop:not(.hidden) {
    opacity: 1;
    visibility: visible;
}

/* Panel container — fixed right slide-out */
.version-history-panel,
.suggestions-panel,
.cleanup-panel,
.schedule-panel {
    position: fixed;
    top: 64px;
    right: 0;
    width: 420px;
    height: calc(100vh - 64px);
    background: var(--bg-page, #FEF7F1);
    box-shadow: -8px 0 32px -8px rgba(44, 36, 22, 0.18),
                -2px 0 8px -2px rgba(44, 36, 22, 0.08);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.version-history-panel.hidden,
.suggestions-panel.hidden,
.cleanup-panel.hidden,
.schedule-panel.hidden {
    transform: translateX(100%);
    opacity: 1;
    pointer-events: none;
}

/* Header — design-system blue gradient (--planner-topbar-bg), white
   text. Schedule panel uses a different internal layout
   (close → content → meta) but the visual chrome matches via the
   same selector. */
.version-panel__header,
.suggestions-panel__header,
.cleanup-panel__header,
.schedule-panel__header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--planner-topbar-bg, linear-gradient(135deg, #E54D4D 0%, #C73E3E 100%));
    color: #FFFFFF;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Schedule header has wrapping pills row beneath the title — give
   it a column flex so the meta row stacks below title + close. */
.schedule-panel__header {
    flex-wrap: wrap;
    row-gap: 12px;
}

/* Icon container (used by panels with a leading icon — VH, suggest, cleanup, schedule) */
.version-panel__icon,
.suggestions-panel__icon,
.cleanup-panel__icon,
.schedule-panel__icon {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-lg, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.version-panel__icon .icon,
.suggestions-panel__icon .icon,
.cleanup-panel__icon .icon,
.schedule-panel__icon .icon {
    width: 18px;
    height: 18px;
    color: #FFFFFF;
}

/* Title wrap — claims remaining horizontal space */
.version-panel__title-wrap,
.suggestions-panel__title-wrap,
.cleanup-panel__title-wrap,
.schedule-panel__title-wrap {
    flex: 1;
    min-width: 0;
}

/* Title — Fraunces 18px, semibold, white */
.version-panel__title,
.suggestions-panel__title,
.cleanup-panel__title,
.schedule-panel__title {
    font-family: var(--font-heading, 'Fraunces', Georgia, serif);
    font-size: var(--text-h4, 1.125rem);
    font-weight: 600;
    margin: 0;
    color: #FFFFFF;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

/* Subtitle — Inter 13px, faded white */
.version-panel__subtitle,
.suggestions-panel__subtitle,
.cleanup-panel__subtitle,
.schedule-panel__subtitle {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: var(--text-meta, 0.8125rem);
    font-weight: 400;
    margin: 3px 0 0 0;
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 0;
    line-height: 1.35;
}

/* Close button — Material icon on blue gradient, no big × glyph */
.version-panel__close,
.suggestions-panel__close,
.cleanup-panel__close,
.schedule-panel__close {
    width: 32px;
    height: 32px;
    padding: 0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-md, 6px);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0;
    transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1),
                color 180ms cubic-bezier(0.22, 1, 0.36, 1),
                border-color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.version-panel__close:hover,
.suggestions-panel__close:hover,
.cleanup-panel__close:hover,
.schedule-panel__close:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.32);
    color: #FFFFFF;
}

.version-panel__close .icon,
.suggestions-panel__close .icon,
.cleanup-panel__close .icon,
.schedule-panel__close .icon {
    width: 16px;
    height: 16px;
}

/* Scrollable body region — consistent padding and warm scrollbar */
.suggestions-panel__body,
.cleanup-panel__body,
.schedule-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.version-list::-webkit-scrollbar,
.suggestions-panel__body::-webkit-scrollbar,
.cleanup-panel__body::-webkit-scrollbar,
.schedule-panel__body::-webkit-scrollbar {
    width: 8px;
}

.version-list::-webkit-scrollbar-thumb,
.suggestions-panel__body::-webkit-scrollbar-thumb,
.cleanup-panel__body::-webkit-scrollbar-thumb,
.schedule-panel__body::-webkit-scrollbar-thumb {
    background: rgba(44, 36, 22, 0.12);
    border-radius: var(--radius-full, 9999px);
    border: 2px solid var(--bg-page, #FEF7F1);
}

.version-list::-webkit-scrollbar-thumb:hover,
.suggestions-panel__body::-webkit-scrollbar-thumb:hover,
.cleanup-panel__body::-webkit-scrollbar-thumb:hover,
.schedule-panel__body::-webkit-scrollbar-thumb:hover {
    background: rgba(44, 36, 22, 0.2);
}

.version-list::-webkit-scrollbar-track,
.suggestions-panel__body::-webkit-scrollbar-track,
.cleanup-panel__body::-webkit-scrollbar-track,
.schedule-panel__body::-webkit-scrollbar-track {
    background: transparent;
}

/* ============================================================
   PANEL-SPECIFIC CHROME OVERRIDES (kept minimal)
   Each panel can extend the shared chrome where its content
   demands a different rhythm.
   ============================================================ */

/* AI Recommendations: refresh action sits beneath the header,
   above the intro paragraph. */
.suggestions-panel__actions {
    display: flex;
    padding: 14px 16px 0;
    flex-shrink: 0;
}

.suggestions-panel__refresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--gray-200, #E7E5E4);
    border-radius: var(--radius-lg, 8px);
    background: var(--bg-page-alt, #FFFBF8);
    color: var(--color-ink-secondary, #5C5242);
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: var(--text-meta, 0.8125rem);
    font-weight: 600;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1),
                border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
                color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.suggestions-panel__refresh .icon {
    width: 14px;
    height: 14px;
}

.suggestions-panel__refresh:hover {
    background: var(--bg-surface, #FFFFFF);
    border-color: var(--gray-300, #D6D3D1);
    color: var(--color-ink, #2C2416);
}

.suggestions-panel__intro {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: var(--text-small, 0.875rem);
    color: var(--color-ink-muted, #78716C);
    line-height: 1.55;
    margin: 0;
    padding: 14px 16px 0;
    flex-shrink: 0;
}

/* Cleanup: primary action button in the footer slot */
.cleanup-panel__footer {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--gray-200, #E7E5E4);
    background: var(--bg-page-alt, #FFFBF8);
    flex-shrink: 0;
}

.cleanup-panel__action {
    width: 100%;
    background: var(--planner-primary, #E54D4D) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: var(--radius-lg, 8px) !important;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(229, 77, 77, 0.2);
    transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 150ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cleanup-panel__action .icon,
.cleanup-panel__action svg {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

.cleanup-panel__action:hover {
    background: var(--phase-learn-dark, #C73E3E) !important;
    box-shadow: 0 4px 12px -2px rgba(229, 77, 77, 0.35);
    transform: translateY(-1px);
}

.cleanup-panel__action:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(229, 77, 77, 0.2);
}

/* Schedule: meta pills row under title/close */
.schedule-panel__header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}

.schedule-panel__meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full, 9999px);
    color: #ffffff;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: var(--text-caption, 0.75rem);
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1;
}

.schedule-panel__meta-pill .icon {
    width: 13px;
    height: 13px;
    color: #ffffff;
}

/* ============================================================
   Responsive — full-width on mobile, no horizontal shadow
   ============================================================ */
@media (max-width: 768px) {
    .version-history-panel,
    .suggestions-panel,
    .cleanup-panel,
    .schedule-panel {
        width: 100%;
        box-shadow: none;
    }

    .version-panel__header,
    .suggestions-panel__header,
    .cleanup-panel__header,
    .schedule-panel__header {
        padding: 16px 18px;
    }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .version-history-panel,
    .suggestions-panel,
    .cleanup-panel,
    .schedule-panel,
    .version-panel__close,
    .suggestions-panel__close,
    .cleanup-panel__close,
    .schedule-panel__close,
    .version-item,
    .version-empty__cta,
    .version-delete-btn,
    .cleanup-panel__action,
    .suggestions-panel__refresh,
    .undo-redo-btn {
        transition: none;
    }

    .version-item:hover,
    .version-empty__cta:hover,
    .cleanup-panel__action:hover {
        transform: none;
    }
}

/* ============================================================
   VERSION HISTORY — specific list + empty + loading + items
   The chrome above already gave it warm-ink header, Fraunces
   title, cream body, etc. This section owns the version-item
   card pattern that's unique to this panel.
   ============================================================ */

.version-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.version-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    background: var(--bg-page-alt, #FFFBF8);
    border: 1px solid var(--gray-200, #E7E5E4);
    border-radius: var(--radius-xl, 12px);
    cursor: pointer;
    transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1),
                border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.version-item:hover {
    background: var(--bg-surface, #FFFFFF);
    border-color: var(--gray-300, #D6D3D1);
    box-shadow: 0 4px 16px -4px rgba(44, 36, 22, 0.1),
                0 1px 3px rgba(44, 36, 22, 0.05);
    transform: translateY(-1px);
}

.version-item:active {
    transform: translateY(0);
    transition-duration: 80ms;
}

.version-item__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.version-item__name {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: var(--text-ui, 0.9375rem);
    font-weight: 600;
    color: var(--color-ink, #2C2416);
    letter-spacing: -0.005em;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.version-item__right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.version-badge {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: var(--text-nano, 0.625rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 7px;
    border-radius: var(--radius-sm, 4px);
    flex-shrink: 0;
    line-height: 1;
}

.version-badge--auto {
    background: rgba(44, 36, 22, 0.06);
    color: var(--color-ink-secondary, #5C5242);
}

.version-badge--manual {
    background: rgba(229, 77, 77, 0.1);
    color: var(--planner-primary, #E54D4D);
}

.version-item__meta {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: var(--text-caption, 0.75rem);
    font-weight: 500;
    color: var(--color-ink-muted, #78716C);
    letter-spacing: 0.005em;
    line-height: 1.4;
}

.version-item__meta + .version-item__meta {
    color: var(--color-ink-secondary, #5C5242);
}

.version-item__meta + .version-item__meta::before {
    content: "·";
    margin: 0 6px 0 0;
    color: var(--gray-300, #D6D3D1);
}

.version-delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: var(--radius-md, 6px);
    background: transparent;
    color: var(--color-ink-faint, #A8A29E);
    cursor: pointer;
    opacity: 0;
    transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
                color 150ms cubic-bezier(0.22, 1, 0.36, 1),
                background 150ms cubic-bezier(0.22, 1, 0.36, 1);
}

.version-item:hover .version-delete-btn {
    opacity: 1;
}

.version-delete-btn:hover {
    color: var(--color-error, #EF4444);
    background: var(--color-error-very-light, #FEE2E2);
}

.version-delete-btn:focus-visible {
    opacity: 1;
}

.version-delete-btn .icon {
    width: 14px;
    height: 14px;
}

/* Empty state */
.version-empty {
    padding: 56px 24px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.version-empty__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bg-page-alt, #FFFBF8);
    border: 1.5px dashed var(--gray-300, #D6D3D1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    color: var(--color-ink-faint, #A8A29E);
}

.version-empty__icon .icon {
    width: 28px;
    height: 28px;
}

.version-empty__title {
    font-family: var(--font-heading, 'Fraunces', Georgia, serif);
    font-size: var(--text-h4, 1.125rem);
    font-weight: 600;
    color: var(--color-ink, #2C2416);
    margin: 0 0 6px;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.version-empty__desc {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: var(--text-small, 0.875rem);
    font-weight: 400;
    color: var(--color-ink-muted, #78716C);
    margin: 0 0 22px;
    line-height: 1.55;
    max-width: 260px;
}

.version-empty__features {
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: 100%;
    max-width: 240px;
    margin-bottom: 22px;
    padding: 14px 16px;
    background: var(--bg-page-alt, #FFFBF8);
    border: 1px solid var(--gray-200, #E7E5E4);
    border-radius: var(--radius-xl, 12px);
}

.version-empty__feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: var(--text-meta, 0.8125rem);
    font-weight: 500;
    color: var(--color-ink-secondary, #5C5242);
    text-align: left;
    line-height: 1.4;
}

.version-empty__feature-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--planner-primary, #E54D4D);
    flex-shrink: 0;
    opacity: 0.7;
}

.version-empty__cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: var(--text-small, 0.875rem);
    font-weight: 600;
    color: #FFFFFF;
    background: var(--planner-primary, #E54D4D);
    border: 1px solid var(--planner-primary, #E54D4D);
    border-radius: var(--radius-lg, 8px);
    cursor: pointer;
    letter-spacing: -0.005em;
    box-shadow: 0 1px 2px rgba(229, 77, 77, 0.2);
    transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1),
                border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 150ms cubic-bezier(0.22, 1, 0.36, 1);
}

.version-empty__cta:hover {
    background: #0270AB;
    border-color: #0270AB;
    box-shadow: 0 4px 12px -2px rgba(229, 77, 77, 0.35);
    transform: translateY(-1px);
}

.version-empty__cta:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(229, 77, 77, 0.2);
}

.version-empty__cta .icon {
    width: 16px;
    height: 16px;
}

.version-loading {
    padding: 56px 24px;
    text-align: center;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: var(--text-meta, 0.8125rem);
    color: var(--color-ink-muted, #78716C);
    letter-spacing: 0.01em;
}

/* Trigger button (preserved for legacy entrypoints) */
.version-history-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(229, 77, 77, 0.2);
    border-radius: var(--radius-md, 6px);
    background: var(--planner-very-light, #FEE2E2);
    color: var(--phase-plan-dark);
    cursor: pointer;
    transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1),
                border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
                color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.version-history-btn:hover {
    background: var(--planner-primary);
    border-color: var(--planner-primary);
    color: white;
}

.version-history-btn .icon {
    width: 16px;
    height: 16px;
}