/* ═══════════════════════════════════════════════════════════════════════
   Chat modals — one visual language for every dialog on /chat/

   Loaded AFTER chat.css so the plain-selector rules here win on a tie.
   Two older rules were most of why the dialogs read as stock Bootstrap:
   `.modal-dialog{width:1200px}` blew a two-field form up to 1152px, and
   `.modal{top:-15px}` pulled every dialog off the top of the window.

   Selectors are scoped `.modal .modal-*` on purpose. dark-theme.css
   paints the same parts through `.dark-theme .modal-*`, so a bare class
   here would lose to it; where dark-theme.css goes further still and
   uses `.dark-theme #someModal .modal-*`, the declaration is marked
   !important — noted at each spot.

   Everything else is built on the --chat-* tokens that chat.css and
   dark-theme.css define, so light and dark need no separate rules.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Backdrop ───────────────────────────────────────────────────────── */
/* Blur rather than a flat wash: the chat stays readable behind the
   dialog, which is what makes a modal read as a layer over the page. */
.modal-backdrop {
    background: #05070d;
    backdrop-filter: blur(7px) saturate(115%);
    -webkit-backdrop-filter: blur(7px) saturate(115%);
}
.modal-backdrop.show { opacity: 0.62; }

/* ── Placement and width ────────────────────────────────────────────── */
.modal { top: 0 !important; }

/* A dialog is sized by its content, not by the window. Bootstrap's own
   size classes step it up where a modal really needs the room. */
.modal-dialog {
    width: auto;
    max-width: 520px;
    max-height: none;
    min-height: 0;
    margin: 1.75rem auto;
}
.modal-dialog.modal-lg { max-width: 720px; }
.modal-dialog.modal-xl { max-width: 1060px; }

/* ── Surface ────────────────────────────────────────────────────────── */
.modal .modal-content {
    /* !important throughout this block: `.dark-theme #settingsModal
       .modal-content` and its #advChatsModal / #diffModal siblings each
       set their own panel colour. */
    background-color: var(--chat-input-bg) !important;
    /* Light falls from above: a sheen along the top edge lifts the panel
       off the backdrop without drawing a highlight line. */
    background-image: linear-gradient(180deg,
        rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 160px) !important;
    border: 1px solid var(--chat-border) !important;
    border-radius: 18px;
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.45),
        0 4px 14px rgba(0, 0, 0, 0.18);
    color: var(--chat-text);
    max-height: min(88vh, 920px);
    overflow: hidden;              /* keeps content off the rounded corners */
}

/* ── Header ─────────────────────────────────────────────────────────── */
/* No filled bar and no rule beneath it. The title sits in the same plane
   as the body, and spacing does the separating. */
.modal .modal-header {
    /* !important: `.dark-theme #settingsModal .modal-header` fills it, and
       `.dark-theme #advChatsModal .modal-header` puts a gradient there. */
    background: none !important;
    border-bottom: 0 !important;
    color: var(--chat-text) !important;
    padding: 20px 22px 8px;
    align-items: flex-start;
    gap: 12px;
}
.modal .modal-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.06rem;
    font-weight: 650;
    letter-spacing: -0.015em;
    line-height: 1.35;
    color: var(--chat-text);
}
/* Whatever icon a header carries becomes the one spot of colour in the
   chrome. The templates ship `me-2` on these, hence the margin reset. */
.modal .modal-title > i,
.modal .modal-title > .fa-solid,
.modal .modal-title > .fas,
.modal .modal-title > .fa-regular {
    color: var(--chat-accent);
    font-size: 0.92em;
    margin: 0 !important;
}

/* Close: a round ghost button with a real hit area, not a 12px glyph. */
.modal .modal-header .btn-close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    margin: -4px -6px 0 0;
    padding: 0;
    border-radius: 50%;
    background-color: transparent;
    background-size: 11px;
    opacity: 0.5;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}
.modal .modal-header .btn-close:hover,
.modal .modal-header .btn-close:focus-visible {
    opacity: 1;
    background-color: var(--chat-surface);
    box-shadow: none;
}
/* Bootstrap's X is a dark SVG. Swap the glyph for a light one rather than
   filtering the element: `filter` also inverts the hover background, which
   turned the whole button into a white disc over the X. */
.dark-theme .modal .modal-header .btn-close {
    filter: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e4e8f0'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
}
/* var(--chat-surface) is almost the panel colour in dark; a white film at
   low alpha is the only hover that reads there. */
.dark-theme .modal .modal-header .btn-close:hover,
.dark-theme .modal .modal-header .btn-close:focus-visible {
    background-color: rgba(255, 255, 255, 0.09);
}

/* ── Body ───────────────────────────────────────────────────────────── */
.modal .modal-body {
    background: transparent !important;   /* dark-theme.css darkens it */
    padding: 14px 22px 20px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--chat-text);
    /* Same slim scrollbar as the sidebar lists and the model menu. */
    scrollbar-width: thin;
    scrollbar-color: rgb(0 0 0 / 0.14) transparent;
}
.modal .modal-body > :last-child { margin-bottom: 0; }
.dark-theme .modal .modal-body { scrollbar-color: rgba(255, 255, 255, 0.12) transparent; }
.modal .modal-body::-webkit-scrollbar { width: 5px; }
.modal .modal-body::-webkit-scrollbar-track { background: transparent; }
.modal .modal-body::-webkit-scrollbar-thumb { background: rgb(0 0 0 / 0.14); border-radius: 4px; }
.dark-theme .modal .modal-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); }

/* Labels read as quiet captions over their field, not as bold headings. */
.modal .modal-body .form-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--chat-text-secondary);
    margin-bottom: 0.4rem;
}
.modal .modal-body .form-control,
.modal .modal-body .form-select,
.modal .modal-body textarea.form-control {
    background-color: var(--chat-bg);
    border: 1px solid var(--chat-input-border);
    border-radius: 10px;
    color: var(--chat-text);
    font-size: 0.88rem;
    padding: 0.6rem 0.75rem;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease,
                background-color 0.15s ease;
}
.modal .modal-body .form-control::placeholder {
    color: var(--chat-text-secondary);
    opacity: 0.65;
}
.modal .modal-body .form-control:focus,
.modal .modal-body .form-select:focus {
    background-color: var(--chat-input-bg);
    border-color: var(--chat-accent);
    box-shadow: 0 0 0 3px var(--chat-accent-subtle);
}
.modal .modal-body .form-text { color: var(--chat-text-secondary); font-size: 0.78rem; }
.modal .modal-body hr { border-color: var(--chat-border); opacity: 1; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.modal .modal-footer {
    background: transparent !important;    /* dark-theme.css fills it */
    border-top: 0 !important;
    padding: 6px 22px 20px;
    gap: 8px;
}
.modal .modal-footer > * { margin: 0; }   /* Bootstrap's .5rem doubles the gap */

/* ── Buttons ────────────────────────────────────────────────────────── */
/* Scoped to dialogs, so the rest of the chat keeps its own button styles. */
.modal .btn {
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    transition: background-color 0.15s ease, border-color 0.15s ease,
                transform 0.15s ease, box-shadow 0.15s ease;
}
.modal .btn:active { transform: translateY(1px); }
.modal .btn-primary {
    background: var(--chat-accent);
    border-color: var(--chat-accent);
    color: #fff;
    box-shadow: 0 2px 10px var(--chat-accent-subtle);
}
.modal .btn-primary:hover,
.modal .btn-primary:focus {
    background: var(--chat-accent-hover);
    border-color: var(--chat-accent-hover);
    color: #fff;
}
/* Outline variants join the same family: a hairline border on the panel,
   accent only where the button is the accent one. */
.modal .btn-outline-primary,
.dark-theme .modal .btn-outline-primary {
    background: transparent;
    border-color: var(--chat-accent);
    color: var(--chat-accent);
}
.modal .btn-outline-primary:hover,
.dark-theme .modal .btn-outline-primary:hover {
    background: var(--chat-accent-subtle);
    border-color: var(--chat-accent);
    color: var(--chat-accent);
}
.modal .btn-outline-secondary,
.dark-theme .modal .btn-outline-secondary {
    background: transparent;
    border-color: var(--chat-border);
    color: var(--chat-text-secondary);
}
.modal .btn-outline-secondary:hover,
.dark-theme .modal .btn-outline-secondary:hover {
    background: var(--chat-surface);
    border-color: var(--chat-input-border);
    color: var(--chat-text);
}

/* A cancel is a way out, not a second call to action: no fill. */
.modal .btn-secondary,
.dark-theme .modal .btn-secondary {
    background: transparent;
    border-color: var(--chat-border);
    color: var(--chat-text-secondary);
}
.modal .btn-secondary:hover,
.dark-theme .modal .btn-secondary:hover {
    background: var(--chat-surface);
    border-color: var(--chat-input-border);
    color: var(--chat-text);
}

/* ── Per-modal leftovers ────────────────────────────────────────────── */
/* chat.css gives a few dialogs their own id-scoped geometry, which outranks
   the system above and left them subtly out of step. Bring them back in
   line; #mcpModal keeps its own tighter padding, its two-pane body needs it. */
#settingsModal .modal-content { border-radius: 18px; }
#settingsModal .modal-header { padding: 20px 22px 8px; }
#settingsModal .modal-body { padding: 14px 22px 20px; }
#settingsModal .modal-title { font-size: 1.06rem; font-weight: 650; }
#advChatsModal .modal-content { border-radius: 18px; }
#advChatsModal .modal-header { padding: 20px 22px 8px; }
#advChatsModal .modal-title { letter-spacing: -0.015em; }
#diffModal .modal-content { border-radius: 18px; }

/* ── Motion ─────────────────────────────────────────────────────────── */
/* Rises and settles, rather than dropping in from the top. */
.modal.fade .modal-dialog {
    transform: translateY(12px) scale(0.985);
    opacity: 0;
    transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.22s ease;
}
.modal.show .modal-dialog { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog { transition: none; transform: none; }
}

/* ── Small screens ──────────────────────────────────────────────────── */
@media (max-width: 575px) {
    .modal-dialog,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        max-width: none;
        margin: 12px;
    }
    .modal .modal-content { max-height: calc(100vh - 24px); border-radius: 16px; }
    .modal .modal-header { padding: 16px 16px 6px; }
    .modal .modal-title { font-size: 1rem; }
    .modal .modal-body { padding: 12px 16px 16px; }
    .modal .modal-footer { padding: 6px 16px 16px; }
    /* Thumb-sized targets, and the pair fills the row so neither ends up a
       small hit area in a corner. */
    .modal .modal-footer .btn { flex: 1 1 0; min-height: 42px; }
}