/* 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;
}
#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;
}

/* 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;
    }
}

/* 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. */
#mailboxContainerList .drop-above {
    box-shadow: inset 0 3px 0 -1px #7c3aed; /* purple-600 */
}
#mailboxContainerList .drop-below {
    box-shadow: inset 0 -3px 0 -1px #7c3aed;
}
.mailboxDragGrip: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;
    }
}