/* ========================================================================
   SLMDialog.css — Consolidated dialog styling ("The Ribbon Edge")
   ======================================================================== */

/* ------------------------------------------------------------------------
   Backdrop
   ------------------------------------------------------------------------ */

.slm-dlg-backdrop {
    position: fixed;
    inset: 0;
    background: var(--slm-dialog-backdrop, rgba(0, 0, 0, 0.32));
    backdrop-filter: blur(var(--slm-dialog-backdrop-blur, 2px));
    -webkit-backdrop-filter: blur(var(--slm-dialog-backdrop-blur, 2px));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: slm-dlg-backdrop-enter 120ms ease-out both;
}

.slm-dlg-backdrop--exit {
    animation: slm-dlg-backdrop-exit 120ms ease-in both;
}

@keyframes slm-dlg-backdrop-enter {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slm-dlg-backdrop-exit {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* ------------------------------------------------------------------------
   Dialog surface
   ------------------------------------------------------------------------ */

.slm-dlg {
    position: relative;
    display: flex;
    flex-direction: row;
    width: min(520px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    overflow: hidden;

    background: var(--slm-dialog-surface, #fafbfc);
    border: 1px solid var(--slm-dialog-border, #d1d5db);
    border-radius: var(--slm-dialog-radius, 12px);
    box-shadow: var(--slm-dialog-shadow,
        0 2px 8px rgba(0,0,0,0.08),
        0 8px 24px rgba(0,0,0,0.12),
        0 24px 48px rgba(0,0,0,0.06));

    font-family: var(--slm-font-family, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    animation: slm-dlg-enter 180ms ease-out both;
}

.slm-dlg--exit {
    animation: slm-dlg-exit 120ms ease-in both;
}

@keyframes slm-dlg-enter {
    from { opacity: 0; transform: scale(0.98) translateY(4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes slm-dlg-exit {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* ------------------------------------------------------------------------
   Ribbon (left-edge accent)
   ------------------------------------------------------------------------ */

.slm-dlg__ribbon {
    flex: 0 0 5px;
    min-height: 100%;
    border-radius: var(--slm-dialog-radius, 12px) 0 0 var(--slm-dialog-radius, 12px);
    /* Inner highlight — 1px lighter stripe on the right edge for depth */
    background: linear-gradient(
        to right,
        var(--slm-dlg-ribbon-color) 0%,
        var(--slm-dlg-ribbon-color) 80%,
        color-mix(in srgb, var(--slm-dlg-ribbon-color) 70%, white 30%) 100%
    );
}

/* Intent-based ribbon colors */
.slm-dlg--info    { --slm-dlg-ribbon-color: var(--slm-dialog-ribbon-info, #1e3a5f); }
.slm-dlg--confirm { --slm-dlg-ribbon-color: var(--slm-dialog-ribbon-confirm, #b45309); }
.slm-dlg--warn    { --slm-dlg-ribbon-color: var(--slm-dialog-ribbon-warn, #7a1b1b); }
.slm-dlg--success { --slm-dlg-ribbon-color: var(--slm-dialog-ribbon-success, #166534); }
.slm-dlg--input   { --slm-dlg-ribbon-color: var(--slm-dialog-ribbon-input, var(--slm-color-accent, #0067c5)); }

/* ------------------------------------------------------------------------
   Content column (header + body + footer)
   ------------------------------------------------------------------------ */

.slm-dlg__content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: auto;
}

/* ── Header ── */

.slm-dlg__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--slm-dialog-border, #d1d5db) 60%, transparent);
}

.slm-dlg__header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.slm-dlg__icon {
    font-size: 1.25rem;
    color: var(--slm-dlg-ribbon-color);
    flex-shrink: 0;
}

.slm-dlg__title {
    font-size: var(--slm-dialog-title-size, 1.1rem);
    font-weight: 700;
    color: var(--slm-color-text-primary, #111);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slm-dlg__close {
    appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 1.1rem;
    color: var(--slm-color-text-muted, #666);
    transition: background 120ms ease, color 120ms ease;
    flex-shrink: 0;
}

.slm-dlg__close:hover {
    background: rgba(0,0,0,0.06);
    color: var(--slm-color-text-primary, #111);
}

.slm-dlg__close:focus-visible {
    outline: 2px solid var(--slm-color-accent, #0067c5);
    outline-offset: 1px;
}

/* ── Body ── */

.slm-dlg__body {
    padding: 20px 24px;
    font-size: var(--slm-dialog-body-size, 0.95rem);
    line-height: var(--slm-dialog-body-line-height, 1.6);
    color: var(--slm-color-text-primary, #111);
    flex: 1 1 auto;
    overflow: auto;
}

.slm-dlg__body p {
    margin: 0 0 0.75em;
}

.slm-dlg__body p:last-child {
    margin-bottom: 0;
}

.slm-dlg__help {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--slm-dialog-border, #d1d5db) 50%, transparent);
    font-size: 0.88rem;
    color: var(--slm-color-text-muted, #666);
    line-height: 1.5;
}

/* ── Prompt input ── */

.slm-dlg__input {
    display: block;
    width: 100%;
    padding: 8px 12px;
    font-size: 0.95rem;
    font-family: inherit;
    border: 1px solid var(--slm-dialog-border, #d1d5db);
    border-radius: 6px;
    background: var(--slm-color-bg, #fff);
    color: var(--slm-color-text-primary, #111);
    transition: border-color 120ms ease;
}

.slm-dlg__input:focus {
    outline: none;
    border-color: var(--slm-color-accent, #0067c5);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--slm-color-accent, #0067c5) 25%, transparent);
}

/* ── Footer ── */

.slm-dlg__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 20px 16px;
    border-top: 1px solid color-mix(in srgb, var(--slm-dialog-border, #d1d5db) 60%, transparent);
}

/* ── Buttons ── */

.slm-dlg__btn {
    appearance: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 9px 20px;
    border-radius: 8px;
    min-height: 40px;
    transition: background 120ms ease, box-shadow 120ms ease;
}

.slm-dlg__btn:focus-visible {
    outline: 2px solid var(--slm-button-focus-border, #ffbf00);
    outline-offset: 2px;
}

/* Secondary button: ghost / outlined */
.slm-dlg__btn--secondary {
    background: transparent;
    border: 1px solid var(--slm-dialog-border, #d1d5db);
    color: var(--slm-color-text-primary, #111);
}

.slm-dlg__btn--secondary:hover {
    background: rgba(0,0,0,0.04);
}

/* Primary button variants */
.slm-dlg__btn--primary.slm-dlg__btn--primary {
    background: var(--slm-button-primary-container-bg, #0b5ed7);
    color: var(--slm-button-primary-text, #fff);
    border: 1px solid var(--slm-button-primary-container-border, #0b5ed7);
}

.slm-dlg__btn--primary.slm-dlg__btn--primary:hover {
    background: var(--slm-button-primary-hover-bg, #0a58ca);
}

/* Danger variant (for warn/delete dialogs) */
.slm-dlg__btn--primary.slm-dlg__btn--danger {
    background: var(--slm-button-danger-container-bg, #b00020);
    color: var(--slm-button-danger-text, #fff);
    border: 1px solid var(--slm-button-danger-container-border, #b00020);
}

.slm-dlg__btn--primary.slm-dlg__btn--danger:hover {
    background: var(--slm-button-danger-hover-bg, #c21f34);
}