/* =========================================================================
   Mailbox page — mobile makeover.
   Scoped to #mailbox, fires under 768px. Same pattern as Bookings /
   User Management: title hidden, fixed search + funnel bar at top,
   filter drawer holds Mailbox/Folder/Status, Compose as purple FAB,
   emails list already renders as cards (keep tuned), View Email +
   Compose + Scheduled + Settings modals full-viewport.
   ========================================================================= */

/* Mobile-only chrome hidden by default. */
#mbMobileHeader { display: none; }

/* ---------------------------------------------------------------------
   Filter drawer (right slide-in) — same shape as User Management.
   Defined outside the media query so the sliding animation still plays
   at the breakpoint boundary.
   --------------------------------------------------------------------- */
.mb-drawer-wrap {
    position: fixed; inset: 0; z-index: 10000;
}
.mb-drawer-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.2s;
}
.mb-drawer-wrap.is-open .mb-drawer-backdrop { background: rgba(0, 0, 0, 0.35); }
.mb-drawer {
    position: absolute; right: 0; top: 0; bottom: 0;
    width: 88%; max-width: 380px;
    background: #fff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.22s ease-out;
    display: flex; flex-direction: column;
}
.mb-drawer-wrap.is-open .mb-drawer { transform: translateX(0); }
.mb-drawer-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 700; font-size: 1.05rem;
    color: #111827;
}
.mb-drawer-close {
    border: none; background: transparent; font-size: 1.5rem;
    color: #6b7280; cursor: pointer; line-height: 1;
}
.mb-drawer-body {
    padding: 1rem 1.15rem;
    overflow-y: auto; flex: 1;
    display: flex; flex-direction: column;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.mb-drawer-body > .form-group {
    display: block !important;
    width: 100% !important;
    margin: 0 0 14px 0 !important;
}
.mb-drawer-body > .form-group > label {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin-bottom: 6px !important;
    display: block !important;
}
.mb-drawer-body select {
    width: 100% !important;
    min-height: 42px !important;
    padding: 8px 12px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    background: #fff !important;
    font-size: 0.95rem !important;
}
.mb-drawer-body .folder-tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
}
.mb-drawer-body .folder-tab {
    padding: 10px !important;
    border: 1px solid #e5e7eb !important;
    background: #fff !important;
    color: #374151 !important;
    border-radius: 999px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-align: center !important;
}
.mb-drawer-body .folder-tab.active {
    background: #eef2ff !important;
    color: #4338ca !important;
    border-color: #6366f1 !important;
}

/* Auxiliary actions inside the drawer (Sync / Scheduled / Settings) */
.mb-drawer-actions {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mb-drawer-actions .mb-drawer-action {
    display: flex; align-items: center; gap: 10px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 10px;
    color: #374151;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
}
.mb-drawer-actions .mb-drawer-action svg {
    width: 18px; height: 18px;
    color: #6366f1;
    flex-shrink: 0;
}
.mb-drawer-actions .mb-drawer-action:active {
    background: #f3f4f6;
}

@media (max-width: 767px) {

    /* -----------------------------------------------------------------
       Page shell — leave room for the fixed top bar + bottom nav.
       ----------------------------------------------------------------- */
    #mailbox {
        padding-top: 56px !important;
        padding-bottom: 90px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    /* Hide the whole header card (title + subtitle + Mailbox selector,
       Folder tabs, Status filter, Search, and the Sync/Compose/Scheduled/
       Settings button strip). Its interactive children get relocated
       into the drawer by mailbox-mobile.js when the funnel is tapped.
       Uses the class combination directly (no :first-of-type, because
       #mbMobileHeader is actually the first <div> child). */
    #mailbox > .modern-content-card.u-mb-4 {
        display: none !important;
    }

    /* -----------------------------------------------------------------
       Fixed mobile search + funnel bar — pinned below the 56px app
       header, matches Bookings/User Management pattern.
       ----------------------------------------------------------------- */
    #mbMobileHeader {
        display: flex !important;
        gap: 8px;
        position: fixed !important;
        top: 56px; left: 0; right: 0;
        z-index: 990;
        padding: 8px 12px;
        background: #fff;
        border-bottom: 1px solid #e5e7eb;
    }
    #mbMobileHeader #mbMobileSearch {
        flex: 1;
        height: 40px;
        padding: 8px 12px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font-size: 0.9rem;
        background: #fff;
        color: #111827;
        outline: none;
    }
    #mbMobileHeader #mbMobileSearch:focus {
        border-color: #6366f1;
    }
    #mbMobileHeader .mb-filter-btn {
        flex-shrink: 0;
        width: 40px; height: 40px;
        border-radius: 8px;
        border: 1px solid #d1d5db;
        background: #fff;
        color: #4b5563;
        display: inline-flex;
        align-items: center; justify-content: center;
        cursor: pointer;
        position: relative;
    }
    #mbMobileHeader .mb-filter-btn[data-has-filters="1"]::after {
        content: "";
        position: absolute; top: 6px; right: 6px;
        width: 8px; height: 8px;
        border-radius: 50%;
        background: #6366f1;
    }

    /* -----------------------------------------------------------------
       Stats grid — compact 2×2, same style as Partners/Invoices.
       ----------------------------------------------------------------- */
    #mailbox .stats-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin: 0 0 10px 0 !important;
    }
    /* Stat-card interior sizing/layout lives in shared css/stat-cards-mobile.css */

    /* -----------------------------------------------------------------
       Emails section — kill wrapper card. Section header compacted.
       ----------------------------------------------------------------- */
    #mailbox #emailsSection {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
    }
    #mailbox .modern-section-header {
        padding: 8px 4px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 8px !important;
        background: transparent !important;
        border: none !important;
    }
    #mailbox .modern-section-header > div {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    #mailbox #emailsSectionTitle {
        font-size: 1rem !important;
        font-weight: 700 !important;
        color: #111827 !important;
        margin: 0 !important;
    }
    #mailbox #lastSyncTime {
        display: none !important;   /* redundant on mobile */
    }
    /* Emails list — cards float free */
    #mailbox #emailsList {
        padding: 0 !important;
    }
    #mailbox .email-card {
        border-radius: 12px !important;
        margin-bottom: 8px !important;
        padding: 12px !important;
    }

    /* -----------------------------------------------------------------
       "No mailbox configured" state — compact.
       ----------------------------------------------------------------- */
    #mailbox #noMailboxState {
        padding: 32px 20px !important;
        margin: 0 !important;
        border-radius: 12px !important;
    }
    #mailbox #noMailboxState h3 {
        font-size: 1rem !important;
    }
    #mailbox #noMailboxState .btn {
        width: 100% !important;
        justify-content: center !important;
        height: 44px !important;
        border-radius: 10px !important;
    }

    /* -----------------------------------------------------------------
       Compose FAB — purple rounded square in the bottom-right corner.
       ----------------------------------------------------------------- */
    #mailbox .mb-fab {
        display: inline-flex !important;
        position: fixed !important;
        bottom: 90px !important;
        right: 16px !important;
        z-index: 900 !important;
        width: 56px !important;
        height: 56px !important;
        border-radius: 12px !important;
        background: linear-gradient(135deg, #667eea, #764ba2) !important;
        color: #fff !important;
        border: 2px solid rgba(255, 255, 255, 0.2) !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4) !important;
        cursor: pointer !important;
    }
    #mailbox .mb-fab svg {
        width: 22px; height: 22px;
    }
    #mailbox .mb-fab:active {
        transform: scale(0.95);
    }

    /* -----------------------------------------------------------------
       Bulk-actions compact button + menu — keep, just position better.
       ----------------------------------------------------------------- */
    #mailbox .bulk-actions-compact {
        position: relative !important;
    }
    #mailbox .bulk-actions-menu {
        right: 0 !important;
        left: auto !important;
        top: calc(100% + 8px) !important;
        min-width: 220px !important;
    }

    /* -----------------------------------------------------------------
       Pagination — stack.
       ----------------------------------------------------------------- */
    #mailbox .email-logs-pagination {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 12px !important;
        font-size: 0.8rem !important;
    }
    #mailbox .pagination-controls {
        justify-content: center !important;
    }

    /* -----------------------------------------------------------------
       View Email modal — full-viewport frame.
       ----------------------------------------------------------------- */
    #viewEmailModal.modal {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }
    #viewEmailModal .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        background: #fff !important;
    }
    #viewEmailModal .modal-header {
        padding: 14px 20px !important;
        background: #fff !important;
        color: #111827 !important;
        border-bottom: 1px solid #f3f4f6 !important;
        border-radius: 0 !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    #viewEmailModal .modal-header h2 {
        color: #111827 !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        margin: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        padding-right: 12px !important;
        flex: 1 !important;
    }
    #viewEmailModal .modal-close {
        background: #f3f4f6 !important;
        color: #6b7280 !important;
        border: none !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    #viewEmailModal .modal-body {
        padding: 12px !important;
        background: #f9fafb !important;
        overflow-y: auto !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }
    /* Email header info block (from/to/date) — force white so it
       stands out against the grey modal body. Stack the top row. */
    #viewEmailModal .modal-body > div[style*="background: #f9fafb"]:first-of-type {
        background: #fff !important;
        border: 1px solid #e5e7eb !important;
        padding: 12px 14px !important;
    }
    #viewEmailModal .modal-body > div[style*="background: #f9fafb"]:first-of-type > div[style*="justify-content: space-between"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    #viewEmailModal .modal-body > div[style*="background: #f9fafb"]:first-of-type > div[style*="justify-content: space-between"] > div[style*="text-align: right"] {
        text-align: left !important;
    }
    /* Email badges wrap left */
    #viewEmailModal #viewEmailBadges {
        justify-content: flex-start !important;
    }
    /* Subject — the header card is already forced white on mobile, so the
       old white-box-with-border made it look like a stray editable input.
       Render it as plain bold text, consistent with the "To:" row. */
    #viewEmailModal #viewEmailSubject {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
    }
    /* Attachments — stack as full-width tappable rows. On touch there's no
       hover, so the download arrow (opacity:0 on desktop) is forced visible,
       and the filename gets the full row width instead of a 200px clip. */
    #viewEmailModal #viewAttachments {
        flex-direction: column !important;
        gap: 8px !important;
    }
    #viewEmailModal .attachment-download-btn {
        display: flex !important;
        width: 100% !important;
        padding: 12px !important;
        border-radius: 10px !important;
        background: #fff !important;
        align-items: center !important;
        gap: 10px !important;
    }
    #viewEmailModal .attachment-download-btn .attachment-name {
        flex: 1 1 auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }
    #viewEmailModal .attachment-download-btn .download-icon {
        opacity: 1 !important;
        flex-shrink: 0 !important;
        width: 16px !important;
        height: 16px !important;
    }

    /* Body — keep white, cap height so it's scrollable without eating
       the whole screen */
    #viewEmailModal #viewEmailBody {
        background: #fff !important;
        border: 1px solid #e5e7eb !important;
        min-height: 0 !important;
        max-height: 320px !important;
    }
    /* Admin notes row — stack, textarea + full-width save button */
    #viewEmailModal .modal-body > .form-group > div[style*="align-items: flex-start"] {
        flex-direction: column !important;
        gap: 8px !important;
    }
    #viewEmailModal #emailAdminNotes {
        width: 100% !important;
        min-height: 60px !important;
    }
    #viewEmailModal #saveNotesBtn {
        width: 100% !important;
        height: 40px !important;
        border-radius: 8px !important;
        background: #f3f4f6 !important;
        color: #374151 !important;
        border: 1px solid #e5e7eb !important;
        font-weight: 600 !important;
    }

    /* Quick Actions row — sticky bottom bar, 7 icon-only 42px squares
       in a single row. Text labels hidden; missing SVGs injected via
       ::before + CSS mask so all 7 icons render consistently.
       Order: Responder | Reencaminhar | Marcar (Un)Lido | Estrela |
              Arquivar | Eliminar | Fechar
    */
    #viewEmailModal .modal-body > div[style*="flex-wrap: wrap"]:last-of-type {
        margin: auto -12px 0 !important;
        padding: 10px 10px calc(10px + env(safe-area-inset-bottom)) !important;
        position: sticky !important;
        bottom: 0 !important;
        background: #fff !important;
        border-top: 1px solid #f3f4f6 !important;
        display: grid !important;
        grid-template-columns: repeat(7, 1fr) !important;
        gap: 6px !important;
        z-index: 5 !important;
    }
    /* Nested Delete+Close wrapper — flatten into the parent grid */
    #viewEmailModal .modal-body > div[style*="flex-wrap: wrap"]:last-of-type > div[style*="margin-left: auto"] {
        display: contents !important;
        margin: 0 !important;
    }
    /* Every button: 42px square, icon centered, no text */
    #viewEmailModal .modal-body > div[style*="flex-wrap: wrap"]:last-of-type button {
        margin: 0 !important;
        width: 100% !important;
        height: 42px !important;
        min-width: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0 !important;   /* hide the text label */
        overflow: hidden !important;
    }
    #viewEmailModal .modal-body > div[style*="flex-wrap: wrap"]:last-of-type button span {
        display: none !important;
    }
    #viewEmailModal .modal-body > div[style*="flex-wrap: wrap"]:last-of-type button svg {
        width: 20px !important;
        height: 20px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
    /* Colour variants */
    #viewEmailModal .modal-body > div[style*="flex-wrap: wrap"]:last-of-type button.btn-primary {
        background: linear-gradient(135deg, #667eea, #764ba2) !important;
        color: #fff !important;
        border: none !important;
        box-shadow: none !important;
    }
    #viewEmailModal .modal-body > div[style*="flex-wrap: wrap"]:last-of-type button.btn-secondary {
        background: #f3f4f6 !important;
        color: #374151 !important;
        border: 1px solid #e5e7eb !important;
    }
    #viewEmailModal .modal-body > div[style*="flex-wrap: wrap"]:last-of-type button.btn-danger {
        background: #fee2e2 !important;
        color: #dc2626 !important;
        border: 1px solid #fecaca !important;
    }

    /* NOTE: previously we injected icons via ::before pseudo-elements for
       Mark Read/Unread, Archive, Delete, and Close — designed when those
       buttons shipped text-only. Every button now carries its own inline
       <svg>, so the ::before rules were doubling the icon and looking
       like duplicated buttons. Removed. The inline SVGs render correctly
       under the grid + font-size:0 rules further above. */

    /* On mobile we hid the button text with `font-size: 0` above, but the
       inline SVG needs to stay visible. Ensure the SVG is shown at 20px
       square, centred within its 42px button. */
    #viewEmailModal .modal-body > div[style*="flex-wrap: wrap"]:last-of-type button > svg {
        width: 20px !important;
        height: 20px !important;
        display: block !important;
    }

    /* -----------------------------------------------------------------
       Compose Email modal — full-viewport frame with sticky action row.
       ----------------------------------------------------------------- */
    #composeEmailModal.modal {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }
    #composeEmailModal .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background: #fff !important;
    }
    #composeEmailModal .modal-header {
        padding: 14px 20px !important;
        background: #fff !important;
        border-bottom: 1px solid #f3f4f6 !important;
        flex-shrink: 0 !important;
    }
    #composeEmailModal .modal-header h2 {
        color: #111827 !important;
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        margin: 0 !important;
    }
    #composeEmailModal .modal-close {
        background: #f3f4f6 !important;
        color: #6b7280 !important;
        border-radius: 50% !important;
        width: 32px !important;
        height: 32px !important;
    }
    #composeEmailModal .modal-body {
        padding: 14px !important;
        background: #f9fafb !important;
        overflow-y: auto !important;
    }
    /* From + To grid — stack */
    #composeEmailModal .modal-body > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    /* Normalise every input */
    #composeEmailModal .modal-body input:not([type="checkbox"]):not([type="radio"]),
    #composeEmailModal .modal-body select,
    #composeEmailModal .modal-body textarea {
        width: 100% !important;
        min-height: 42px !important;
        padding: 8px 12px !important;
        border: 1px solid #d1d5db !important;
        border-radius: 8px !important;
        font-size: 0.95rem !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }
    #composeEmailModal .modal-body input:focus,
    #composeEmailModal .modal-body select:focus,
    #composeEmailModal .modal-body textarea:focus {
        outline: none !important;
        border-color: #6366f1 !important;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
    }
    #composeEmailModal .form-group > label {
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        color: #374151 !important;
        display: block !important;
        margin-bottom: 4px !important;
    }

    /* To field — the "normalise every input" rule above forces width:100% on
       #composeTo, which fought the flex row and let the customer-picker button
       balloon off the right edge. Pin the input as the flexible element and the
       icon button to its natural size, and box the row to the modal width. */
    #composeEmailModal .modal-body div[style*="gap: 0.4rem"] {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    #composeEmailModal .modal-body #composeTo {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }
    #composeEmailModal .modal-body div[style*="gap: 0.4rem"] > button {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 44px !important;
    }

    /* Quoted-reply body — the previous email is quoted into the editor and is
       typically a 600px template. Let it scroll horizontally inside the editor
       (which is clipped by the modal) instead of being cut off, and cap images. */
    #composeEmailModal #composeBodyRich {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    #composeEmailModal #composeBodyRich img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Footer — [Agendar | Enviar] share the top row, Cancelar full-width below.
       (responsive.css applies column-reverse, so the send row lands on top.) */
    #composeEmailModal .modal-footer {
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) !important;
        background: #fff !important;
        border-top: 1px solid #f3f4f6 !important;
        gap: 8px !important;
    }
    #composeEmailModal .modal-footer > div {
        display: flex !important;
        width: 100% !important;
        gap: 8px !important;
    }
    #composeEmailModal .modal-footer > div > * {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
    #composeEmailModal .modal-footer #scheduleBtn,
    #composeEmailModal .modal-footer #sendEmailBtn,
    #composeEmailModal .modal-footer > .btn {
        width: 100% !important;
        min-height: 44px !important;
        border-radius: 10px !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    /* -----------------------------------------------------------------
       Mailbox Settings & Scheduled Emails modals — full-viewport frame.
       ----------------------------------------------------------------- */
    #mailboxSettingsModal.modal,
    #scheduledEmailsModal.modal {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }
    #mailboxSettingsModal .modal-content,
    #scheduledEmailsModal .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background: #fff !important;
    }
    #mailboxSettingsModal .modal-header,
    #scheduledEmailsModal .modal-header {
        padding: 14px 20px !important;
        background: #fff !important;
        border-bottom: 1px solid #f3f4f6 !important;
        flex-shrink: 0 !important;
    }
    #mailboxSettingsModal .modal-header h2,
    #scheduledEmailsModal .modal-header h2 {
        color: #111827 !important;
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        margin: 0 !important;
    }
    #mailboxSettingsModal .modal-close,
    #scheduledEmailsModal .modal-close {
        background: #f3f4f6 !important;
        color: #6b7280 !important;
        border-radius: 50% !important;
        width: 32px !important;
        height: 32px !important;
    }
    #mailboxSettingsModal .modal-body,
    #scheduledEmailsModal .modal-body {
        padding: 14px !important;
        background: #f9fafb !important;
        overflow-y: auto !important;
    }
    /* Normalise inputs */
    #mailboxSettingsModal .modal-body input:not([type="checkbox"]):not([type="radio"]),
    #mailboxSettingsModal .modal-body select,
    #mailboxSettingsModal .modal-body textarea {
        width: 100% !important;
        min-height: 42px !important;
        padding: 8px 12px !important;
        border: 1px solid #d1d5db !important;
        border-radius: 8px !important;
        font-size: 0.95rem !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }

    /* Flex-column content so the list scrolls and the footer sticks to the
       bottom — same shape as the config / quick-reply modals. */
    #mailboxSettingsModal .modal-content,
    #scheduledEmailsModal .modal-content {
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    #mailboxSettingsModal .modal-body,
    #scheduledEmailsModal .modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }
    /* Sticky footer with a full-width Close button */
    #mailboxSettingsModal .modal-footer,
    #scheduledEmailsModal .modal-footer {
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) !important;
        background: #fff !important;
        border-top: 1px solid #f3f4f6 !important;
        flex-shrink: 0 !important;
        display: flex !important;
    }
    #mailboxSettingsModal .modal-footer .btn,
    #scheduledEmailsModal .modal-footer .btn {
        width: 100% !important;
        min-height: 44px !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
    }

    /* Mailbox row — was #f9fafb, i.e. the same colour as the mobile modal
       body, so the card had no visible edge. Force white + border, and
       truncate a long address so Edit / Delete never get pushed off-row. */
    #mailboxSettingsModal .mailbox-item {
        background: #fff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 12px !important;
        gap: 10px !important;
    }
    #mailboxSettingsModal .mailbox-item-info,
    #mailboxSettingsModal .mailbox-item-details {
        min-width: 0 !important;
    }
    #mailboxSettingsModal .mailbox-item-icon {
        flex-shrink: 0 !important;
    }
    #mailboxSettingsModal .mailbox-item-details h4,
    #mailboxSettingsModal .mailbox-item-details p {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    #mailboxSettingsModal .mailbox-item-actions {
        flex-shrink: 0 !important;
    }
    #mailboxSettingsModal .mailbox-item-actions .btn {
        min-height: 38px !important;
    }

    /* Add Mailbox / Quick Reply Templates — stack full-width instead of
       relying on natural wrapping. */
    #mailboxSettingsModal .modal-body > div[style*="flex-wrap: wrap"] {
        flex-direction: column !important;
    }
    #mailboxSettingsModal .modal-body > div[style*="flex-wrap: wrap"] > .btn {
        width: 100% !important;
        min-height: 44px !important;
        border-radius: 10px !important;
        justify-content: center !important;
    }

    /* -----------------------------------------------------------------
       Mailbox Config modal (add / edit a mailbox — IMAP + SMTP form)
       + Quick Reply Manager modal — same full-viewport treatment as
       the settings modals above. Both open from inside a parent modal,
       so they need z-index 2001+ to stack on top.
       ----------------------------------------------------------------- */
    #mailboxConfigModal.modal,
    #quickReplyManagerModal.modal {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        z-index: 2001 !important;
    }
    #mailboxConfigModal .modal-content,
    #quickReplyManagerModal .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background: #fff !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    #mailboxConfigModal .modal-header,
    #quickReplyManagerModal .modal-header {
        padding: 14px 20px !important;
        background: #fff !important;
        border-bottom: 1px solid #f3f4f6 !important;
        border-radius: 0 !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    #mailboxConfigModal .modal-header h2,
    #quickReplyManagerModal .modal-header h2 {
        color: #111827 !important;
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        margin: 0 !important;
        flex: 1 !important;
        padding-right: 12px !important;
    }
    #mailboxConfigModal .modal-close,
    #quickReplyManagerModal .modal-close {
        background: #f3f4f6 !important;
        color: #6b7280 !important;
        border: none !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    #mailboxConfigModal .modal-body,
    #quickReplyManagerModal .modal-body {
        padding: 14px !important;
        background: #f9fafb !important;
        overflow-y: auto !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }
    /* Sticky footer with big-hit-area buttons. flex-wrap: nowrap +
       flex: 1 1 0 forces the two buttons (Adicionar / Fechar in the
       quick reply manager, Cancel / Save + Test in mailbox config) to
       sit side by side and share the row width evenly, never stacking. */
    #mailboxConfigModal .modal-footer,
    #quickReplyManagerModal .modal-footer {
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) !important;
        background: #fff !important;
        border-top: 1px solid #f3f4f6 !important;
        flex-shrink: 0 !important;
        display: flex !important;
        gap: 8px !important;
        /* Force a row: the global mobile rule in responsive.css sets
           `.modal-footer { flex-direction: column-reverse }`, which is what
           stacked (and flipped) these two buttons. Keep them side by side. */
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }
    #mailboxConfigModal .modal-footer > *,
    #quickReplyManagerModal .modal-footer > * {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
    #mailboxConfigModal .modal-footer .btn,
    #quickReplyManagerModal .modal-footer .btn {
        min-height: 44px !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
        width: 100% !important;
    }

    /* ---- Mailbox Config form specifics ---- */
    /* Kill the 2-col grid (Username | Password + IMAP | SMTP grids) — stack. */
    #mailboxConfigModal .modal-body > div[style*="grid-template-columns"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    #mailboxConfigModal .modal-body input:not([type="checkbox"]):not([type="radio"]),
    #mailboxConfigModal .modal-body select,
    #mailboxConfigModal .modal-body textarea {
        width: 100% !important;
        min-height: 42px !important;
        padding: 8px 12px !important;
        border: 1px solid #d1d5db !important;
        border-radius: 8px !important;
        font-size: 0.95rem !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }
    #mailboxConfigModal .modal-body label {
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        color: #374151 !important;
        display: block !important;
        margin-bottom: 4px !important;
    }
    #mailboxConfigModal .modal-body h4 {
        font-size: 0.75rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        color: #9ca3af !important;
        margin: 16px 0 8px !important;
        padding-top: 12px !important;
    }

    /* ---- Quick Reply Manager specifics ---- */
    /* Template row — bigger tap targets, no ellipsis truncation */
    #quickReplyManagerModal .quick-reply-row {
        padding: 12px !important;
        border-radius: 10px !important;
        gap: 10px !important;
        background: #fff !important;
    }
    #quickReplyManagerModal .quick-reply-row > div:first-child > div:nth-child(2) {
        white-space: normal !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    #quickReplyManagerModal .quick-reply-row .btn {
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 8px 10px !important;
    }
    /* Inline editor form — card look consistent with the row cards */
    #quickReplyManagerModal #quickReplyEditor {
        padding: 14px !important;
        border-radius: 12px !important;
    }
    #quickReplyManagerModal #quickReplyEditor input,
    #quickReplyManagerModal #quickReplyEditor textarea {
        width: 100% !important;
        min-height: 42px !important;
        padding: 8px 12px !important;
        border: 1px solid #d1d5db !important;
        border-radius: 8px !important;
        font-size: 0.95rem !important;
        box-sizing: border-box !important;
    }
    #quickReplyManagerModal #quickReplyEditor textarea {
        min-height: 120px !important;
    }
}