/* =========================================================
   AVA MODAL — global, flat deep-navy. Neutral hairlines,
   brick-red close button.
   ========================================================= */

.ava-modal-overlay {
    position: fixed;
    inset: 0;
    /* Above every app layer, incl. the mobile chat sidebar (100000) and the
       MainLayout mobile drawer (1000002) — a modal is always top-most. */
    z-index: 1000100;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(var(--ava-rgb-overlay),0.66);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.ava-modal {
    width: min(560px, 94vw);
    max-width: 100%;
    border-radius: 18px;
    background: var(--ava-card);
    border: 1px solid var(--ava-line);
    box-shadow: var(--shadow-modal);
    color: var(--ava-text-1);
    margin: 0 !important;
    max-height: calc(100vh - 36px);
    overflow: auto;
}

.ava-modal-header,
.ava-modal-footer {
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.ava-modal-header { border-bottom: 1px solid var(--ava-line); }
.ava-modal-footer { border-top: 1px solid var(--ava-line); justify-content: flex-end; gap: 10px; }

.ava-modal-title {
    margin: 0;
    font-weight: 700;
    font-size: 16px;
    color: var(--ava-text-1);
}

/* Close button — solid brick red square */
.ava-modal-close {
    margin-left: auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--r-xs);
    border: none;
    background: var(--ava-danger-solid);
    color: var(--ava-white);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: filter var(--ava-dur-1);
}
.ava-modal-close:hover { filter: brightness(1.08); }
.ava-modal-close:disabled { opacity: .5; cursor: not-allowed; }

/* Lets the connector login banner be dismissed instead of waiting for the next attempt. */
.ava-connector-error-dismiss {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--ava-danger-text);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    opacity: .75;
    transition: opacity .15s, background .15s;
}

.ava-connector-error-dismiss:hover {
    opacity: 1;
    background: rgba(var(--ava-rgb-brick), 0.2);
}

.ava-modal-body {
    padding: 18px;
    color: var(--ava-text-1);
    line-height: 1.5;
}

@media (max-height: 700px) {
    .ava-modal { max-height: calc(100vh - 36px); overflow: auto; }
}

.ava-modal .settings-input {
    color: var(--ava-text-1) !important;
    caret-color: var(--ava-text-1) !important;
    background: var(--ava-navy) !important;
    border-color: var(--ava-line) !important;
}
.ava-modal .settings-input::placeholder { color: var(--ava-text-3) !important; }
.ava-modal .settings-input:focus {
    border-color: var(--ava-focus) !important;
    box-shadow: 0 0 0 3px var(--ava-focus-r) !important;
    background: var(--ava-navy) !important;
}
.ava-modal .settings-input:disabled { opacity: 0.70; }
.ava-modal .settings-input:-webkit-autofill,
.ava-modal .settings-input:-webkit-autofill:hover,
.ava-modal .settings-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ava-text-1) !important;
    box-shadow: 0 0 0 1000px var(--ava-navy) inset !important;
    transition: background-color 9999s ease-out 0s;
}

/* Centered backdrop variant */
.ava-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    padding: 18px !important;
    z-index: 9999 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
}

.ava-modal-wide { width: min(1100px, 95vw); max-height: 85vh; }

/* Shared field styling for modal textareas / variable inputs */
.ava-modal-textarea,
.ava-var-input,
.ava-var-textarea {
    width: 100%;
    box-sizing: border-box;
    border-radius: var(--r-sm);
    border: 1px solid var(--ava-line);
    background: var(--ava-navy);
    color: var(--ava-text-1);
    outline: none;
    box-shadow: none;
}
.ava-modal-textarea::placeholder,
.ava-var-input::placeholder,
.ava-var-textarea::placeholder { color: var(--ava-text-3); }
.ava-modal-textarea:focus,
.ava-var-input:focus,
.ava-var-textarea:focus {
    border-color: var(--ava-focus);
    box-shadow: 0 0 0 3px var(--ava-focus-r);
    background: var(--ava-navy);
}

.ava-modal-textarea {
    padding: 12px 14px;
    line-height: 1.5;
    resize: vertical;
    min-height: 220px;
    font-family: var(--font-sans);
}
.ava-modal-textarea:disabled { opacity: 0.75; cursor: not-allowed; }

.ava-var-form { display: grid; grid-template-columns: 1fr; gap: 10px; }
.ava-var-label { font-size: 12px; font-weight: 600; color: var(--ava-text-2); margin-top: 2px; }
.ava-var-input { padding: 10px 12px; }
.ava-var-textarea { padding: 12px 14px; line-height: 1.5; resize: vertical; min-height: 240px; font-family: var(--font-sans); }

.ava-modal .settings-help { margin-top: 4px; }
.ava-modal .res-error { margin-top: 4px; }

/* =========================================================
   dc.html modal polish — applies to EVERY .ava-modal:
   Knowledge-red close-X, aqua / Knowledge-red / secondary buttons,
   soft pop-in. (Shell already matches: #04293c card, r18, dark overlay.)
   ========================================================= */
.ava-modal { animation: avaModalPop .16s ease; }
@keyframes avaModalPop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

.ava-modal-close,
.ava-modal-close.ava-btn-danger {
    background: rgba(var(--ava-rgb-red),0.12) !important;
    color: var(--ava-coral-soft) !important;
    border: 1px solid rgba(var(--ava-rgb-red),0.32) !important;
    border-radius: 9px !important;
    padding: 0 !important;
}
.ava-modal-close:hover { background: rgba(var(--ava-rgb-red),0.20) !important; }

/* neutral/secondary + bare .ava-btn inside a modal */
.ava-modal .ava-btn:not(.ava-btn-ok):not(.ava-btn-danger),
.ava-modal .ava-btn-secondary {
    border: 1px solid rgba(var(--ava-rgb-slate),0.16);
    border-radius: 10px;
    background: var(--ava-btn-2);
    color: var(--ava-slate-100);
    font: 600 13px Inter;
    padding: 10px 18px;
    cursor: pointer;
    box-shadow: none;
    transition: background .15s, color .15s;
}
.ava-modal .ava-btn:not(.ava-btn-ok):not(.ava-btn-danger):hover,
.ava-modal .ava-btn-secondary:hover { background: var(--ava-btn-2-hover); color: var(--ava-slate-100); }

/* primary (aqua) */
.ava-modal .ava-btn-ok {
    border: none;
    border-radius: 10px;
    background: var(--ava-aqua);
    color: var(--ava-navy);
    font: 700 13px Inter;
    padding: 10px 24px;
    cursor: pointer;
    transition: filter .15s, transform .05s;
}
.ava-modal .ava-btn-ok:hover { filter: brightness(1.06); }
.ava-modal .ava-btn-ok:active { transform: translateY(1px); }

/* destructive = Knowledge red ghost (never the close-X, which stays a square) */
.ava-modal .ava-btn-danger:not(.ava-modal-close) {
    border: 1px solid rgba(var(--ava-rgb-red),0.4);
    border-radius: 10px;
    background: transparent;
    color: var(--ava-coral-soft);
    font: 700 13px Inter;
    padding: 10px 18px;
    cursor: pointer;
    transition: background .15s;
}
.ava-modal .ava-btn-danger:not(.ava-modal-close):hover { background: rgba(var(--ava-rgb-red),0.10); }

.ava-modal .ava-btn:disabled,
.ava-modal .ava-btn-ok:disabled,
.ava-modal .ava-btn-danger:disabled,
.ava-modal .ava-btn-secondary:disabled { opacity: .55; cursor: not-allowed; }

/* dc.html look for the connector login/logout forms (DynamicComponent) and any
   legacy form markup still living inside a modal — fields + selects + ghost button. */
.ava-modal .ava-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* ava-connector.css gives these fields a 12-column span; inside a modal's own
   two-column track list that span leaks into implicit tracks and overflows, so the
   fields are pinned to plain cells (half = one cell, full = the whole row). */
.ava-modal .ava-form-field-half { grid-column: auto; }
.ava-modal .ava-form-field-full { grid-column: 1 / -1; }

.ava-modal .ava-label {
    display: block; font: 600 12px Inter; color: var(--ava-slate-500); margin-bottom: 6px;
}
.ava-modal .ava-input {
    width: 100%; background: var(--ava-navy); border: 1px solid rgba(var(--ava-rgb-slate),0.16);
    border-radius: 10px; color: var(--ava-slate-100); font: 400 14px Inter; padding: 11px 13px;
    outline: none; transition: border-color .15s, box-shadow .15s;
}
.ava-modal .ava-input:focus { border-color: rgba(var(--ava-rgb-aqua),0.55); box-shadow: 0 0 0 3px rgba(var(--ava-rgb-aqua),0.12); }
.ava-modal .ava-input::placeholder { color: var(--ava-slate-700); }

/* Checkbox line inside a form grid: the label carries the box and its caption. */
.ava-modal .ava-check {
    display: flex;
    align-items: center;
    gap: 9px;
    font: 500 13px Inter;
    color: var(--ava-slate-100);
    cursor: pointer;
}

.ava-modal .ava-check input[type=checkbox] {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    accent-color: var(--ava-aqua);
    cursor: pointer;
}

.ava-modal .ava-select-wrap { position: relative; }
.ava-modal .ava-select {
    width: 100%; appearance: none; -webkit-appearance: none;
    background: var(--ava-navy); border: 1px solid rgba(var(--ava-rgb-slate),0.16);
    border-radius: 10px; color: var(--ava-slate-100); font: 400 13.5px Inter;
    padding: 11px 36px 11px 13px; outline: none; cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.ava-modal .ava-select:focus { border-color: rgba(var(--ava-rgb-aqua),0.55); box-shadow: 0 0 0 3px rgba(var(--ava-rgb-aqua),0.12); }
.ava-modal .ava-select option { background: var(--ava-navy-deep); color: var(--ava-slate-100); }
.ava-modal .ava-select-icon { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ava-slate-700); font-size: 10px; }

.ava-modal .ava-btn-ghost {
    border: 1px solid rgba(var(--ava-rgb-slate),0.16); border-radius: 10px; background: var(--ava-btn-2);
    color: var(--ava-slate-100); font: 600 13px Inter; padding: 10px 18px; cursor: pointer;
    transition: background .15s, color .15s; box-shadow: none;
}
.ava-modal .ava-btn-ghost:hover { background: var(--ava-btn-2-hover); color: var(--ava-slate-100); }
.ava-modal .ava-btn-ghost:disabled { opacity: .55; cursor: not-allowed; }

/* dc.html action/confirm modals are a single borderless card with a solid-red confirm.
   (The connector modal keeps its own divider via an inline border.) */
.ava-modal { width: min(460px, 94vw); }
.ava-modal-wide { width: min(1100px, 95vw); }
.ava-modal-header { border-bottom: 0 !important; padding-bottom: 4px !important; }
.ava-modal-footer { border-top: 0 !important; padding-top: 10px !important; }
.ava-modal-body { padding-top: 8px !important; padding-bottom: 8px !important; }

.ava-modal .ava-btn-danger:not(.ava-modal-close) {
    background: var(--ava-coral) !important;
    color: var(--ava-on-coral) !important;
    border: none !important;
}
.ava-modal .ava-btn-danger:not(.ava-modal-close):hover { filter: brightness(1.06); background: var(--ava-coral) !important; }

/* Phones: in-modal forms (connector login/logout via DynamicComponent) collapse
   their two-up field grid to a single column so nothing overflows a narrow screen. */
@media (max-width: 560px) {
    .ava-modal .ava-form-grid { grid-template-columns: 1fr; }
    .ava-modal .ava-form-field-half { grid-column: 1 / -1; }

    /* Phone sizing: bind the dialog hard to the viewport width (minus the overlay
       padding) so it can never exceed the screen. Higher specificity + !important
       beats the base `.ava-modal { width: 880px }` declared later in ava-base.css. */
    .ava-modal-overlay { padding: 12px; }
    .ava-modal-overlay > .ava-modal {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100dvh - 24px);
    }
    .ava-modal-footer { flex-wrap: wrap; }
    .ava-modal-footer .ava-btn { flex: 1 1 auto; }
}