/* Custom Scrollbar for a cleaner modern look */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: #4b5563; /* Tailwind gray-600 */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #6b7280; /* Tailwind gray-500 */
}

/* Placeholder text for the contenteditable compose body */
#composeMailBody:empty:before {
    content: attr(data-placeholder);
    color: #9ca3af; /* Tailwind gray-400 */
    pointer-events: none;
}

/* The Tailwind build loaded via CDN (tailwindcss@2.2.19/dist/tailwind.min.css) is a precompiled,
   non-JIT stylesheet — it does not understand arbitrary-value bracket classes like "min-h-[10rem]"
   or "max-h-[90vh]" at all (that syntax requires the JIT compiler). Those classes silently do
   nothing, so every size below that used to rely on one is set here instead as real CSS. */
#composeMailBody {
    min-height: 10rem;
}
#selMoveSelectedMessages {
    max-width: 8rem;
}
#folderMenu {
    width: 14rem;
    max-height: 18rem;
}
#iframeReadingCanvas {
    min-height: 12rem;
}
#modalComposeWindow,
#modalSettingsVault,
#modalContactsBook,
#modalFiltersManager {
    max-height: 90vh;
}
.text-2xs {
    font-size: 11px;
    line-height: 1rem;
}
.max-w-recipient-chip {
    max-width: 180px;
}
.max-w-attachment-chip {
    max-width: 140px;
}
.min-w-recipient-input {
    min-width: 120px;
}
.max-w-recipient-popover {
    max-width: 90vw;
}

/* Recipient chips can be dragged between the To / Cc / Bcc boxes. The grab cursor is the only hint
   the gesture exists, so it is on the chip itself rather than only on the drag handle-less label. */
.recipientChip {
    cursor: grab;
}
.recipientChip:active {
    cursor: grabbing;
}
.recipientChipDragging {
    opacity: 0.45;
}
/* The box a chip is currently hovering over during a drag. Dashed rather than a solid ring so it
   reads as "drop here" and not as the focus ring the box already grows when it is being typed in. */
.recipientDropTarget {
    border-style: dashed;
    border-color: #9333ea; /* purple-600 */
    background-color: #faf5ff; /* purple-50 */
}

/* Hides an action that only applies inside certain folders (Not junk, Delete forever). Toggling
   Tailwind's own "hidden" wouldn't work on these: they also carry a responsive class like
   md:inline-flex, which is declared later in the cascade and would show them again on desktop
   regardless of which folder is open. */
.action-scope-hidden {
    display: none !important;
}

/* Draggable resizer bars between the sidebar / message-list / reading-pane columns */
.paneResizer {
    position: relative;
    width: 6px;
    flex-shrink: 0;
    background: #e5e7eb; /* gray-200 */
    cursor: col-resize;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: background-color 0.15s ease;
}
.paneResizer:hover,
.paneResizer.is-dragging {
    background: #a78bfa; /* purple-400 */
}
.paneCollapseToggleBtn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid #d1d5db; /* gray-300 */
    border-radius: 9999px;
    color: #6b7280; /* gray-500 */
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.paneCollapseToggleBtn:hover {
    color: #7c3aed; /* purple-600 */
    border-color: #7c3aed;
}
.paneCollapseToggleBtn svg {
    transition: transform 0.15s ease;
}
.paneResizer.collapsed .paneCollapseToggleBtn svg {
    transform: rotate(180deg);
}

/* When the middle message-list pane is collapsed the two resizer bars sit flush against each
   other, so their round toggle buttons would land on the exact same spot and the one behind
   becomes unclickable. Staggering them vertically keeps each button on its own hit target no
   matter how the panes are arranged. */
#resizerSidebarInbox .paneCollapseToggleBtn {
    top: calc(50% - 18px);
}
#resizerInboxReading .paneCollapseToggleBtn {
    top: calc(50% + 18px);
}

/* Applied to whichever pane a collapse toggle hides; min-width:0 overrides the flex-item default
   (min-width:auto) that would otherwise refuse to shrink past the pane's content width. */
.pane-collapsed {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-width: 0 !important;
    overflow: hidden !important;
}
.pane-collapsed > * {
    display: none !important;
}

/* ---------------- MOBILE SINGLE-PANE NAVIGATION ---------------- */
/* Below the md breakpoint the sidebar, message list, and reading pane used to stack vertically and
   compete for the same limited screen height — the sidebar and list's own content height pushed the
   reading pane below the fold entirely, so opening an email looked like it did nothing. This makes
   mobile behave like a typical inbox app instead: the sidebar becomes an off-canvas drawer, and the
   message list / reading pane trade full-screen visibility via a class on #workspaceContainer. */
@media (max-width: 767px) {
    #paneSidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 30;
        width: 82vw;
        max-width: 320px;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }
    #paneSidebar.mobile-sidebar-open {
        transform: translateX(0);
        box-shadow: 8px 0 24px rgba(0, 0, 0, 0.15);
    }

    /* With the sidebar taken out of normal flow above, the message list is the sole flex child of
       #workspaceContainer by default and needs an explicit grow to fill the space below the header
       (its fixed md:w-96 width covers this on desktop, where flex-row layout stretches it instead). */
    #paneInboxList {
        flex: 1 1 auto;
    }
    #paneReadingCanvas {
        display: none;
    }
    #workspaceContainer.mobile-view-reading #paneInboxList {
        display: none;
    }
    #workspaceContainer.mobile-view-reading #paneReadingCanvas {
        display: flex;
    }

    /* The reading pane's scroller and the white card it holds each carry p-6 — 96px of a 360px
       phone screen, a quarter of the width, gone before the email body gets any. Emails routinely
       ask for ~350px (Google's security-alert template sets min-width:348px on its outer table),
       so hand that width back on small screens rather than making every such email reflow or
       shrink to fit. Desktop keeps the roomier padding. */
    #readingPaneScrollArea {
        padding: 0.5rem;
    }
    #pristineWhiteIframeContainer {
        padding: 0.75rem;
    }
}

/* Compose window is opened non-modally (dialog.show(), no page-blocking backdrop) so mail behind it
   stays clickable, and it's dragged around by its title bar. Positioned via fixed left/top in JS. */
#modalComposeWindow[open] {
    position: fixed;
    margin: 0;
    z-index: 40; /* above the app chrome; still below toasts (z-50) and top-layer modal dialogs */
}
/* Stops touchscreens from scrolling the page while dragging the title bar, so the drag doesn't
   fight a native scroll gesture. */
#composeDragHandle {
    touch-action: none;
}

/* Sidebar drag-to-reorder: a purple insertion line shows where the dragged account will land.
   Filter rules reorder the same way, and order is load-bearing there — the first matching rule is
   the only one that acts — so they share the marker. */
#mailboxContainerList .drop-above,
#filtersListPane .drop-above {
    box-shadow: inset 0 3px 0 -1px #7c3aed; /* purple-600 */
}
#mailboxContainerList .drop-below,
#filtersListPane .drop-below {
    box-shadow: inset 0 -3px 0 -1px #7c3aed;
}
.mailboxDragGrip:active,
.filterRuleGrip:active {
    cursor: grabbing;
}

/* Toast notifications (replaces blocking alert() popups) */
.swiftbox-toast {
    animation: toastIn 0.2s ease-out;
}
.swiftbox-toast-leaving {
    animation: toastOut 0.18s ease-in forwards;
}
@keyframes toastIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(10px); }
}

/* Print Utilities */
@media print {
    body { background: white !important; }
    .no-print { display: none !important; }

    /* Release the fixed-height app shell so the full email can flow onto the page */
    #workspaceContainer, #paneReadingCanvas, #paneReadingCanvas > div {
        height: auto !important;
        overflow: visible !important;
        display: block !important;
    }

    #pristineWhiteIframeContainer {
        height: auto !important;
        max-width: 100% !important;
        width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
    }

    /* The reading iframe is atomic for print pagination (its content can't flow across pages),
       so it's hidden in favor of #printableEmailContent, a plain-DOM copy that paginates normally. */
    #iframeReadingCanvas, #attachmentDisplayTray {
        display: none !important;
    }

    #printableEmailContent {
        display: block !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        font-size: 15px;
        line-height: 1.6;
    }

    /* This content sits in the main page, which loads Tailwind — whose Preflight reset zeroes the
       default margin every browser puts on <p>/<blockquote>/headings. A message with no CSS of its
       own (a plain-text reply, an Outlook quote block) then prints as a dense, single-spaced wall of
       text with no paragraph breaks at all — same fix, and same margin value, as the reading iframe's
       own injected style in wrapEmailHtmlForResponsiveRendering, so print matches what's on screen.
       A message that sets its own spacing still wins, since this is a plain rule with no !important. */
    #printableEmailContent p, #printableEmailContent blockquote,
    #printableEmailContent ul, #printableEmailContent ol,
    #printableEmailContent h1, #printableEmailContent h2, #printableEmailContent h3,
    #printableEmailContent h4, #printableEmailContent h5, #printableEmailContent h6 {
        margin: 0 0 1.2em;
    }
}