/**
 * SeekQuarry/Yioop --
 * Open Source Pure PHP Search Engine, Crawler, and Indexer
 *
 * Copyright (C) 2009 - 2026  Chris Pollett chris@pollett.org
 *
 * LICENSE:
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 *
 * END LICENSE
 *
 * Styles for the user-mail feature: inbox listing, message view,
 * compose form, account-edit form, and the mobile-specific layout
 * tweaks. Loaded via the INCLUDE_STYLES mechanism in
 * SocialComponent::userMailBaseData. Kept separate from search.css
 * because the rules are exclusively for the mail feature and would
 * otherwise inflate the global stylesheet.
 *
 * @author Chris Pollett chris@pollett.org
 * @license https://www.gnu.org/licenses/ GPL3
 * @link https://www.seekquarry.com/
 * @copyright 2009 - 2026
 * @filesource
 */

.mail-inbox-heading
{
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-bottom: 0;
    padding-right: 6px;
}
.mail-inbox-heading-title
{
    flex: 0 1 auto;
    align-items: center;
    display: inline-flex;
    gap: 0.3em;
    min-width: 0;
}
.mail-inbox-heading-count
{
    color: var(--gray-53);
    font-weight: normal;
}
.mail-inbox-empty-text
{
    margin: 0.5em 0;
}
.mail-filter-wrap
{
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin-left: auto;
}
.mail-filter-icon
{
    color: var(--gray-53);
    left: 8px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.mail-filter-input
{
    border: 1px solid var(--gray-80);
    border-radius: 1em;
    padding: 4px 28px 4px 28px;
    width: 200px;
    font-size: inherit;
    font-family: inherit;
}
.mail-filter-clear
{
    color: var(--gray-53);
    cursor: pointer;
    font-size: 1.2em;
    line-height: 1;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}
.mail-filter-clear:hover
{
    color: var(--gray-20);
}
/* #small-margin-help is position: absolute with no top set, so it
   normally sits at its static-flow position. On the mail page that
   flow position falls below the tall mail-container (the inbox
   layout) or below the tall full-width edit/clone screen, dropping
   the help panel to the bottom of the page; anchoring its top just
   below the nav bar keeps it beside the content it explains. The
   sibling combinators scope this to the mail page, where
   #small-margin-help follows either .mail-container (inbox) or
   .mail-current-activity (the Add/Edit Account and Clone screens),
   leaving every other activity's help panel untouched. */
.mail-container ~ #small-margin-help,
.mail-current-activity ~ #small-margin-help
{
    top: 90px;
}
.mail-inbox-pane
{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.mail-inbox-form
{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    box-sizing: border-box;
}
.mail-inbox-scroll
{
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--gray-93);
    margin-top: 0.6rem;
}
.mail-inbox-table
{
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.6rem;
    table-layout: fixed;
}
.mail-inbox-scroll .mail-inbox-table
{
    margin-top: 0;
}
.mail-inbox-table th,
.mail-inbox-table td
{
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--gray-93);
    vertical-align: top;
    overflow-wrap: break-word;
    word-wrap: break-word;
    user-select: none;
}
#mail-col-from
{
    width: 20%;
}
#mail-col-star
{
    width: 44px;
}
#mail-col-date
{
    width: 6em;
}
.mail-col-star-cell
{
    text-align: center;
    padding: 0;
}
.mail-col-star-header
{
    display: inline-block;
    padding: 4px 6px;
    color: var(--gray-53);
    text-decoration: none;
    font-size: 20px;
    line-height: 1;
}
.mail-col-star-header:hover
{
    color: var(--gray-33);
}
.mail-col-star-header-active
{
    color: #e8b40b;
}
.mail-col-star-header-active:hover
{
    color: #c89708;
}
.mail-inbox-star
{
    color: var(--gray-73);
    text-decoration: none;
    font-size: 20px;
    line-height: 1;
    display: inline-block;
    padding: 4px 6px;
}
.mail-inbox-star:hover
{
    color: var(--gray-53);
}
.mail-inbox-star-filled
{
    color: #e8b40b;
}
.mail-inbox-star-filled:hover
{
    color: #c89708;
}
.mail-inbox-bulk-bar
{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    margin-top: 6px;
    background-color: #e6f0fb;
    border: 1px solid #b8d4ee;
    border-radius: 4px;
    font-size: 13px;
    flex-wrap: wrap;
}
.mail-inbox-bulk-selection-required,
.mail-inbox-bulk-mode-required
{
    display: none;
}
.mail-inbox-bulk-bar.has-selection
    .mail-inbox-bulk-selection-required,
.mail-inbox-bulk-bar.selection-mode
    .mail-inbox-bulk-mode-required
{
    display: inline-block;
}
.mail-inbox-bulk-count
{
    color: var(--gray-33);
}
.mail-inbox-bulk-action,
.mail-inbox-bulk-destination,
.mail-inbox-bulk-destination-account
{
    padding: 3px 6px;
    border: 1px solid var(--gray-80);
    border-radius: 3px;
    font-size: 13px;
}
/* On mobile the bulk bar wraps; give the two move destination
   selects the full row width so the account picker and the folder
   picker each sit on their own line instead of crowding the
   action select and the count text. */

.mail-inbox-bulk-mode-toggle,
.mail-inbox-bulk-select-toggle
{
    padding: 3px 12px;
    background-color: var(--gray-100);
    border: 1px solid var(--gray-80);
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
    color: var(--gray-33);
}
.mail-inbox-bulk-select-toggle
{
    margin-left: auto;
}
.mail-inbox-bulk-mode-toggle:hover,
.mail-inbox-bulk-select-toggle:hover
{
    background-color: var(--gray-94);
}
.mail-inbox-bulk-mode-toggle[aria-pressed="true"],
.mail-inbox-bulk-select-toggle[aria-pressed="true"]
{
    background-color: var(--gray-33);
    border-color: var(--gray-33);
    color: var(--gray-100);
}
.mail-inbox-bulk-mode-toggle[aria-pressed="true"]:hover,
.mail-inbox-bulk-select-toggle[aria-pressed="true"]:hover
{
    background-color: var(--gray-27);
    border-color: var(--gray-27);
}
.mail-inbox-table th
{
    background-color: var(--gray-94);
    font-weight: bold;
    font-size: var(--font-size-1);
    position: sticky;
    top: 0;
    z-index: 2;
}
.mail-col-resizer
{
    position: absolute;
    top: 0;
    right: 0;
    width: 7px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    border-right: 1px solid var(--gray-80);
}
.mail-container-resizer
{
    width: 100%;
    height: 6px;
    cursor: row-resize;
    user-select: none;
    background-color: var(--gray-94);
    border-bottom: 1px solid var(--gray-80);
}
.mail-container
{
    position: relative;
    /* reserve a gutter on the right the exact width of
       .mail-container-h-resizer so the resizer sits in its own
       lane instead of overlapping the content pane (and the close
       button that floats to the content pane's right edge); keep
       this padding and the resizer width in sync. border-box
       keeps the reserved gutter from widening the container past
       its 100% width. */
    box-sizing: border-box;
    padding-right: 6px;
}
.mail-container-h-resizer
{
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    background-color: var(--gray-94);
    border-left: 1px solid var(--gray-80);
}
.mail-inbox-table tr
{
    cursor: pointer;
}
.mail-inbox-table tr:hover td
{
    background-color: #f8f8ff;
}
.mail-inbox-table tr.mail-inbox-row-selected td
{
    background-color: #e0d8f5;
}
.mail-inbox-table tr.mail-inbox-row-selected:hover td
{
    background-color: #d6cce8;
}
.mail-inbox-table tr.mail-inbox-row-unread td
{
    font-weight: bold;
}
.mail-inbox-table tr.mail-inbox-row-placeholder td
{
    color: var(--gray-53);
    font-style: italic;
}
.mail-inbox-table tr.mail-inbox-row-placeholder
{
    cursor: default;
}
.mail-inbox-table a
{
    text-decoration: none;
}
.mail-inbox-table a:hover
{
    text-decoration: underline;
}
.mail-inbox-table td:last-child
{
    position: relative;
}
.mail-inbox-row-swipe-delete
{
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding: 0 18px;
    background-color: #b00020;
    color: var(--gray-100);
    border: none;
    border-radius: 0;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transform: translateX(100%);
    transition: transform 0.18s ease-out;
    z-index: 1;
}
.mail-inbox-table tr.mail-inbox-row-swipe-revealed
    .mail-inbox-row-swipe-delete
{
    transform: translateX(0);
}
.mail-col-sort-link
{
    color: inherit;
    cursor: pointer;
}
.mail-message-pane
{
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: 0 4px;
    box-sizing: border-box;
}
.mail-message-back
{
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: 8px;
    justify-content: space-between;
    padding: 2px 4px;
}
.mail-message-actions
{
    align-items: center;
    display: inline-flex;
    gap: 4px;
}
.mail-message-delete-form
{
    display: inline-flex;
    margin: 0;
    padding: 0;
}
.mail-message-move-form
{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
}
.mail-message-move-destination
{
    font-size: var(--font-size-6);
    padding: 6px 10px;
    max-width: 200px;
}

.mail-message-actions-reply-group
{
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.mail-message-actions-trash-group
{
    display: inline-flex;
    align-items: center;
    padding-inline-start: 8px;
    margin-inline-start: 4px;
    border-inline-start: 1px solid var(--gray-80);
}
.mail-message-delete-button
{
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    line-height: 1;
}
.mail-message-headers
{
    flex-shrink: 0;
    margin: 4px 2px 6px 2px;
    padding: 8px 12px;
    background-color: var(--gray-100);
    border: 1px solid var(--gray-88);
    border-radius: 4px;
    position: relative;
    min-height: 28px;
}
[data-mail-pretty-only].none
{
    display: none;
}
.mail-message-toggle-raw
{
    position: absolute;
    top: 6px;
    right: 8px;
    padding: 3px 10px;
    background-color: var(--gray-100);
    border: 1px solid var(--gray-80);
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    color: var(--gray-33);
}
.mail-message-toggle-raw:hover
{
    background-color: var(--gray-94);
}
.mail-message-toggle-raw[aria-pressed="true"]
{
    background-color: var(--gray-88);
    color: var(--gray-13);
}
.mail-message-load-images
{
    flex-shrink: 0;
    margin: 0 2px 6px 2px;
    padding: 6px 10px;
    background-color: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 4px;
    font-size: 12px;
    color: var(--gray-33);
}
.mail-message-load-images-button
{
    padding: 3px 10px;
    background-color: var(--gray-100);
    border: 1px solid var(--gray-80);
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    color: var(--gray-33);
}
.mail-message-load-images-button:hover
{
    background-color: var(--gray-94);
}
.mail-message-notice
{
    margin: 6px 2px;
    padding: 6px 10px;
    background-color: var(--gray-100);
    border: 1px solid var(--gray-88);
    border-radius: 4px;
    font-size: 12px;
    color: var(--gray-33);
}
.mail-alias-list
{
    margin: 6px 0 6px 1em;
    max-height: 13.2rem;
    overflow-y: auto;
    border: 1px solid var(--gray-88);
    border-radius: 4px;
    padding: 4px 8px;
    background-color: var(--gray-100);
}
.mail-alias-table
{
    border-collapse: collapse;
    width: 100%;
}
.mail-alias-name
{
    padding-right: 1em;
}
.mail-alias-form
{
    display: flex;
    align-items: center;
    gap: 0.4em;
}
.mail-alias-form .mail-alias-input,
.mail-alias-form .mail-alias-domain
{
    height: 2.34rem;
    box-sizing: border-box;
    margin: 0;
    padding: 0 6px;
    border: 1px solid var(--gray-60);
    border-radius: 5px;
    font-size: var(--font-size-4);
    position: relative;
    top: 0;
    vertical-align: middle;
}
.mail-alias-at
{
    font-size: var(--font-size-4);
}
.mail-alias-form .mail-alias-add
{
    height: 2.34rem;
    box-sizing: border-box;
    margin: 0;
    padding: 0 1.08rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-7);
    line-height: 1;
    top: 0;
}
.mail-dkim-badge-wrap
{
    position: absolute;
    top: 4px;
    right: 64px;
}

.mail-dkim-icon
{
    padding: 2px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    line-height: 0;
    color: var(--gray-47);
}
.mail-dkim-icon.mail-dkim-pass
{
    color: #2e7d32;
}
.mail-dkim-icon.mail-dkim-fail
{
    color: #c62828;
}
.mail-dkim-icon.mail-dkim-no_key
{
    color: var(--gray-47);
}
.mail-dkim-detail
{
    position: absolute;
    top: 26px;
    right: 0;
    z-index: 5;
    width: 30em;
    max-width: 80vw;
    padding: 10px 12px;
    border: 1px solid var(--gray-80);
    border-radius: 4px;
    background-color: var(--gray-100);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    font-size: 13px;
    font-weight: normal;
    text-align: left;
}
.mail-dkim-detail-title
{
    font-weight: bold;
    margin-bottom: 6px;
}
/* On a phone the detail's right-edge anchor (it hangs off the
   badge, which itself sits 64px in from the header's right edge)
   pushes a 30em panel off the left of the screen, cutting off the
   labels. Lift it out of that anchor and pin it to the viewport as
   a full-width sheet at the bottom, scrolling within itself when
   it is taller than the screen. mail.css loads after search.css,
   so this more specific rule wins. */

.mail-dkim-detail-table
{
    width: 100%;
    border-collapse: collapse;
}
.mail-dkim-detail-table th
{
    text-align: left;
    vertical-align: top;
    padding: 2px 8px 2px 0;
    color: var(--gray-33);
    font-weight: normal;
    white-space: nowrap;
}
.mail-dkim-detail-table td
{
    vertical-align: top;
    padding: 2px 0;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    word-break: break-all;
}
.mail-dkim-detail-summary
{
    margin-top: 8px;
    color: var(--gray-20);
}
.mail-message-body-raw
{
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: var(--font-size-1);
    white-space: pre-wrap;
    margin: 0;
}
.mail-message-header-row
{
    display: flex;
    gap: 0.5em;
    align-items: baseline;
    padding: 2px 0;
    word-break: break-word;
}
.mail-message-header-label
{
    font-weight: bold;
    flex-shrink: 0;
    min-width: 4em;
}
.mail-message-header-value
{
    color: var(--gray-20);
}
.mail-attachment-list
{
    flex-shrink: 0;
    margin: 6px 2px 4px 2px;
    padding: 8px 12px;
    background-color: var(--gray-100);
    border: 1px solid var(--gray-88);
    border-radius: 4px;
}
.mail-attachment-heading
{
    margin: 0 0 8px 0;
    font-size: 1em;
}
.mail-attachment-list-header
{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5em;
    margin-bottom: 8px;
}
.mail-attachment-list-header .mail-attachment-heading
{
    margin: 0;
}
.mail-attachment-download-all
{
    font-size: 13px;
    color: #4a90e2;
    text-decoration: none;
}
.mail-attachment-download-all:hover
{
    text-decoration: underline;
}
.mail-attachment-grid
{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.mail-attachment-card
{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background-color: var(--gray-100);
    border: 1px solid var(--gray-82);
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
    min-width: 200px;
    max-width: 280px;
    box-sizing: border-box;
}
.mail-attachment-card:hover
{
    background-color: var(--gray-94);
    border-color: var(--gray-60);
}
.mail-attachment-thumb
{
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gray-94);
    border-radius: 3px;
    overflow: hidden;
}
.mail-attachment-thumb img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mail-attachment-ext-label
{
    font-size: 12px;
    font-weight: bold;
    color: var(--gray-47);
    letter-spacing: 0.5px;
}
.mail-attachment-info
{
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mail-attachment-filename
{
    font-weight: bold;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mail-attachment-meta
{
    font-size: 12px;
    color: var(--gray-47);
}
.mail-message-body
{
    flex: 1 1 auto;
    min-height: 0;
    margin: 0 2px;
    padding: 12px;
    background-color: var(--gray-100);
    border: 1px solid var(--gray-88);
    border-radius: 4px;
    overflow: auto;
    word-break: break-word;
}
.mail-message-body-text
{
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: var(--font-size-1);
    white-space: pre-wrap;
    margin: 0;
}
.mail-message-body-html
{
    font-size: var(--font-size-2);
    line-height: 1.4;
}
.mail-message-body-html img
{
    max-width: 100% !important;
    height: auto !important;
}
.mail-message-inline-image
{
    display: block;
    height: auto;
    margin: 0.4rem 0;
    max-width: 100%;
}
.mail-message-body-html table
{
    max-width: 100%;
}
/* The app's own narrow-screen p rule (search.css, in the 600px
   media block) sets a 300px minimum width for paragraphs, which is
   right for the chrome but leaks into a rendered message: in a
   two-column newsletter it forces each column past 300px, so the
   table cannot fit a phone and the whole body overflows. Reset the
   minimum for message content so its paragraphs and table cells
   shrink and wrap. This reset lives in mail.css's own 600px media
   block below, which loads after search.css. */
.mail-message-body-html p,
.mail-message-body-html td,
.mail-message-body-html th,
.mail-message-body-html table
{
    min-width: 0;
}
.mail-blocked-image
{
    display: none !important;
}
.mail-message-body-html a
{
    word-break: break-all;
}
.mail-compose-pane
{
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    padding: 4px 6px 4px 0;
    overflow: hidden;
}
.mail-compose-heading
{
    flex-shrink: 0;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 0.5em;
}
.mail-compose-form
{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 0.6rem;
}
.mail-compose-row
{
    flex-shrink: 0;
    margin-bottom: 0.9rem;
}
.mail-compose-field
{
    align-items: center;
    background-color: var(--gray-100);
    border: 1px solid var(--gray-80);
    border-radius: 3px;
    box-sizing: border-box;
    display: flex;
    gap: 4px;
    padding: 4px 6px;
    width: 100%;
    max-width: 100%;
}
.mail-compose-field-label
{
    color: var(--gray-33);
    flex-shrink: 0;
    padding: 0 4px;
}
.mail-compose-field-collapse
{
    background: none;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    transition: background-color 0.12s, box-shadow 0.12s;
}
.mail-compose-field-collapse:hover,
.mail-compose-field-collapse:focus
{
    background-color: var(--gray-94);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    color: var(--gray-0);
    outline: none;
}
.mail-compose-field .mail-compose-input
{
    background-color: transparent;
    border: 0;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
}
.mail-compose-field .mail-compose-input:focus
{
    outline: none;
}
.mail-compose-recipient-toggles
{
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    gap: 4px;
}
.mail-compose-recipient-toggle
{
    background: none;
    border: 0;
    border-radius: 12px;
    color: var(--gray-33);
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    padding: 2px 8px;
    transition: background-color 0.12s, box-shadow 0.12s;
}
.mail-compose-recipient-toggle:hover,
.mail-compose-recipient-toggle:focus
{
    background-color: var(--gray-94);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    color: var(--gray-0);
    outline: none;
}
.mail-compose-body-row
{
    flex: 1 1 auto;
    min-height: 80px;
    display: flex;
    flex-direction: column;
}
.mail-compose-body-row .mail-compose-body
{
    flex: 1 1 auto;
    min-height: 0;
    resize: none;
}
.mail-compose-attach-button
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    background-color: var(--gray-94);
    border: 1px solid var(--gray-80);
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: var(--gray-33);
}
.mail-compose-attach-button:hover
{
    background-color: var(--gray-88);
}
.mail-compose-form.dragover
{
    outline: 2px dashed #4a90e2;
    outline-offset: -2px;
    background-color: #f5faff;
}
.mail-compose-file-input
{
    /* visually hidden but kept in the accessibility tree
       so screen readers and keyboard users can still
       activate it via the paperclip label. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.mail-compose-attachments
{
    flex-shrink: 0;
    max-height: 25vh;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0;
}
.mail-compose-attachments:empty
{
    display: none;
}
.mail-compose-attachment-card
{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background-color: var(--gray-100);
    border: 1px solid var(--gray-82);
    border-radius: 4px;
    min-width: 180px;
    max-width: 260px;
    box-sizing: border-box;
    font-size: 13px;
}
.mail-compose-attachment-thumb
{
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gray-94);
    border-radius: 3px;
    overflow: hidden;
}
.mail-compose-attachment-thumb img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mail-compose-attachment-ext-label
{
    font-size: 11px;
    font-weight: bold;
    color: var(--gray-47);
    letter-spacing: 0.5px;
}
.mail-compose-attachment-info
{
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mail-compose-attachment-name
{
    font-weight: bold;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mail-compose-attachment-size
{
    font-size: 11px;
    color: var(--gray-47);
}
.mail-compose-attachment-remove
{
    flex-shrink: 0;
    padding: 2px 8px;
    background-color: var(--gray-100);
    border: 1px solid var(--gray-80);
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    color: var(--gray-33);
    line-height: 1;
}
.mail-compose-attachment-remove:hover
{
    background-color: var(--gray-94);
}
.mail-compose-from-row
{
    display: flex;
    align-items: baseline;
    gap: 0.4em;
    margin-bottom: 0.9rem;
}
.mail-compose-from-row .mail-compose-label
{
    display: inline;
    margin-bottom: 0;
}
.mail-compose-label
{
    display: block;
    font-weight: bold;
    margin-bottom: 0.3rem;
}
.mail-compose-from
{
    color: var(--gray-33);
}
.mail-compose-body
{
    border: 1px solid var(--gray-80);
    border-radius: 3px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: inherit;
    padding: 6px 8px;
    resize: vertical;
    width: 100%;
    max-width: 100%;
}
.mail-compose-buttons
{
    display: flex;
    gap: 0.5em;
    justify-content: center;
    margin-top: 1.2rem;
}
.mail-compose-button
{
    background-color: var(--gray-94);
    border: 1px solid var(--gray-80);
    border-radius: 3px;
    color: inherit;
    cursor: pointer;
    display: inline-block;
    font-size: inherit;
    padding: 6px 14px;
    text-decoration: none;
}
.mail-compose-button:hover
{
    background-color: var(--gray-88);
}
.mail-compose-send-split
{
    display: inline-flex;
    position: relative;
}
.mail-compose-send-split .mail-compose-button
{
    margin: 0;
}
.mail-compose-send-button
{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}
.mail-compose-schedule-toggle
{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 1px solid var(--gray-80);
    padding: 6px 10px;
}
.mail-compose-schedule-popover
{
    position: absolute;
    bottom: calc(100% + 4px);
    inset-inline-end: 0;
    min-width: 240px;
    background-color: var(--gray-100);
    border: 1px solid var(--gray-80);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 6px 0;
    z-index: 10;
    text-align: start;
}
.mail-compose-schedule-heading
{
    color: var(--gray-53);
    font-size: 0.75em;
    font-weight: bold;
    letter-spacing: 0.04em;
    padding: 6px 14px 4px;
    text-transform: uppercase;
}
.mail-compose-schedule-preset
{
    background: transparent;
    border: none;
    cursor: pointer;
    display: block;
    font: inherit;
    padding: 8px 14px;
    text-align: left;
    width: 100%;
}
.mail-compose-schedule-preset:hover
{
    background-color: var(--gray-94);
}
.mail-compose-schedule-choose
{
    border-top: 1px solid var(--gray-93);
}
.mail-compose-schedule-custom
{
    padding: 6px 14px 10px;
}
.mail-compose-schedule-input
{
    font: inherit;
    padding: 4px 6px;
    width: 100%;
    box-sizing: border-box;
}
.mail-compose-schedule-status
{
    align-self: center;
    color: var(--gray-33);
    font-size: 0.9em;
}
.mail-compose-schedule-clear
{
    background: transparent;
    border: none;
    color: var(--gray-53);
    cursor: pointer;
    font-size: 1em;
    padding: 0 4px;
}
.mail-compose-schedule-clear:hover
{
    color: var(--gray-20);
}
.mail-account-form .narrow-field
{
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
}
.mail-account-form .table-label
{
    max-width: 220px;
    white-space: normal;
}
.mail-form-label-scope
{
    display: block;
    font-weight: normal;
}
.mail-back-mobile
{
    display: none;
}

.mail-account-form .mail-form-actions
{
    display: flex;
    gap: 0.5em;
    flex-wrap: wrap;
    justify-content: center;
}
/* the "Incoming Mail (IMAP)" / "Outgoing Mail (SMTP)" section
   headers span both columns and should read left-to-right, not
   inherit the right-aligned .table-label used by field labels */
.html-ltr .mail-section-label,
.html-rtl .mail-section-label
{
    text-align: start;
    padding-top: 8px;
}
/* Save is a <button> (which carries UA padding) and Cancel is an
   <a>; without an explicit horizontal padding the anchor's text
   hugs its border and the two buttons look mismatched. Pin both
   to the same box. */
.mail-account-form .button-box
{
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* iOS Safari auto-zooms when a focused field's font-size is under
   16px, and that zoom is what forced the compose pane to scroll
   horizontally on focus. Pinning the compose fields to 16px keeps
   the page from zooming. */

/* On a narrow screen the alias list carried a left-only indent,
   which pushed it off-center, and the add-row's text field kept
   its intrinsic width, which shoved the + button past the pane
   border. Drop the asymmetric indent and let the alias field be
   the flexible part of the row so the domain menu and + button
   stay inside the pane. Logical properties keep this correct under
   an RTL locale. */

/* On a narrow screen the two-column account/clone form table
   stretches full width, which pushes a right-aligned label to one
   edge and its control to the other (most visible on the clone
   form's long "max most recent" row). Stacking each label above
   its control keeps the pair together. Using display:block on the
   cells (rather than a fixed text-align) keeps this correct in
   both portrait and landscape and under an RTL locale, where the
   label simply reads from the start edge. */

.user-accounts-folder-row
{
    display: flex;
    align-items: center;
    gap: 4px;
    user-select: none;
    flex-wrap: wrap;
}
.user-accounts-folder-row a
{
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}
.user-accounts-folder-label
{
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    padding: 4px 6px;
}
.user-accounts-folder-row.user-accounts-folder-noselect
{
    padding: 0;
}
.user-accounts-folder-disclosure
{
    flex: 0 0 12px;
    width: 12px;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    text-align: center;
    cursor: pointer;
    color: var(--gray-53);
    visibility: hidden;
    transition: transform 0.15s ease-out;
    transform-origin: 50% 50%;
    display: inline-block;
    overflow: visible;
}
.user-accounts-folder-has-children
    > .user-accounts-folder-disclosure
{
    visibility: visible;
}
.user-accounts-folder-row.expanded
    > .user-accounts-folder-disclosure
{
    transform: rotate(90deg);
}
.user-accounts-folder-children
{
    flex-basis: 100%;
    list-style: none;
    padding-left: 18px;
    margin: 0;
}
.user-accounts-folder-row:not(.expanded)
    > .user-accounts-folder-children
{
    display: none;
}
.user-accounts-folder-icon
{
    margin-right: 4px;
    flex-shrink: 0;
}
.user-accounts-folder-name
{
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-accounts-folder-unread
{
    color: var(--gray-53);
    flex-shrink: 0;
    font-feature-settings: "tnum";
    font-size: 0.9em;
    margin-left: 8px;
}
.user-accounts-folder-active .user-accounts-folder-unread
{
    color: inherit;
}
.user-accounts-name
{
    cursor: pointer;
    user-select: none;
}
/* Grip handle shown on the left of a reorderable account row;
   the only part that initiates a drag, so dragging does not fight
   the click-to-expand behavior of the account name. */
/* Grip handle for a reorderable account row. It floats to the
   inline-end (right in ltr, left in rtl via .float-opposite) and
   sits on the same visual row as the account name rather than
   above it, so reordering does not cost a row of vertical space
   per account. Only the handle starts a drag, so the account-name
   click-to-expand still works. The glyphs are rotated a quarter
   turn so the two vertical-ellipsis characters read as a compact
   horizontal grip. */
.user-accounts-drag-handle
{
    cursor: grab;
    user-select: none;
    color: var(--gray-60);
    margin-top: 2px;
    padding: 0 2px;
    font-size: 12px;
    line-height: 1;
    letter-spacing: -3px;
    transform: rotate(90deg);
}
.user-accounts-reorderable.user-accounts-dragging
{
    opacity: 0.4;
}
.user-accounts-reorderable.user-accounts-drag-over
{
    border-top: 2px solid #69c;
}
.user-accounts-reorderable.user-accounts-grabbed
{
    outline: 2px dashed #69c;
}
.user-accounts-name.user-accounts-name-editing
{
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.user-accounts-name.user-accounts-name-editing
    > .user-accounts-toggle
{
    flex: 1 1 auto;
    min-width: 0;
}
.user-accounts-name.user-accounts-name-editing
    > .user-accounts-edit-toolbar
{
    flex-basis: 100%;
    margin-top: 2px;
    margin-left: 0;
    justify-content: center;
}
.user-accounts-folder-row > .user-accounts-edit-toolbar
{
    flex-shrink: 0;
    margin-left: auto;
}
.user-accounts-folder-row-editing
{
    flex-wrap: nowrap;
}
.user-accounts-folder-row-editing
    > a > .user-accounts-folder-unread
{
    display: none;
}
.user-accounts-folder-row-editing
    > .user-accounts-folder-children
{
    display: none;
}
.user-accounts-new-folder-box
{
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
}
.user-accounts-new-folder-input
{
    flex: 1 1 auto;
    min-width: 0;
    padding: 2px 6px;
    border: 1px solid var(--gray-80);
    border-radius: 3px;
    font-size: var(--font-size-1);
}
.mail-empty-pane
{
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 60vh;
    padding: 12px;
    text-align: center;
}
.mail-empty-pane .user-mail-warning
{
    margin: 0 0 16px 0;
    padding: 20px 32px;
    font-size: var(--font-size-5);
    border-radius: 12px;
}
.mail-empty-pane .button-box
{
    height: auto;
    padding: 2px 12px;
}
.mail-empty-or
{
    margin: 0 0 16px 0;
    color: var(--gray-53);
    font-style: italic;
}
.mail-inbox-answered
{
    color: var(--gray-53);
    font-size: 0.9em;
}
.mail-scheduled-pane
{
    padding: 1.2rem;
}
.mail-scheduled-heading
{
    margin-top: 0;
}
.mail-scheduled-empty
{
    color: var(--gray-33);
    font-style: italic;
}
.mail-scheduled-table
{
    border-collapse: collapse;
    width: 100%;
}
.mail-scheduled-table th,
.mail-scheduled-table td
{
    border-bottom: 1px solid var(--gray-93);
    padding: 6px 10px;
    text-align: left;
    vertical-align: top;
}
.mail-scheduled-table th
{
    color: var(--gray-40);
    font-size: 0.85em;
    font-weight: bold;
    text-transform: uppercase;
}
.mail-scheduled-status-pending
{
    color: var(--gray-40);
}
.mail-scheduled-status-failed
{
    color: #c0392b;
    font-weight: bold;
}
.mail-scheduled-status-sending
{
    color: #2c80b4;
    font-style: italic;
}
.mail-scheduled-cancel-form
{
    margin: 0;
}
.mail-scheduled-cancel-button
{
    background: transparent;
    border: 1px solid var(--gray-80);
    border-radius: 3px;
    color: inherit;
    cursor: pointer;
    font: inherit;
    padding: 4px 10px;
}
.mail-scheduled-cancel-button:hover
{
    background-color: var(--gray-93);
}
.mail-loading
{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 16px;
    color: var(--gray-53);
}
.mail-loading-spinner
{
    width: 18px;
    height: 18px;
    border: 2px solid var(--gray-80);
    border-top-color: var(--gray-53);
    border-radius: 50%;
    animation: mail-spin 0.7s linear infinite;
}
@keyframes mail-spin
{
    to
    {
        transform: rotate(360deg);
    }
}
@media (prefers-reduced-motion: reduce)
{
    .mail-loading-spinner
    {
        animation: none;
    }
}

@media (max-width: 600px)
{
    .mail-inbox-bulk-destination, .mail-inbox-bulk-destination-account
    {
        flex-basis: 100%;
        max-width: 100%;
    }
    .mail-message-move-destination
    {
        font-size: var(--font-size-3);
        padding: 3px 6px;
        max-width: 140px;
    }
    .mail-message-toggle-raw, .mail-dkim-badge-wrap
    {
        position: static;
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 6px;
    }
    .mail-dkim-badge-wrap
    {
        margin-left: 6px;
    }
    .mail-dkim-detail
    {
        position: fixed;
        left: 8px;
        right: 8px;
        top: auto;
        bottom: 8px;
        width: auto;
        max-width: none;
        max-height: 70vh;
        overflow-y: auto;
    }
    .mail-back-mobile
    {
        display: inline-block;
    }
    .mail-inbox-table th, .mail-inbox-table td
    {
        padding: 4px 6px;
        font-size: var(--font-size-1);
    }
    .mail-filter-wrap
    {
        display: inline-flex;
        flex: 1 1 6em;
        min-width: 0;
        margin-inline-start: 0.3em;
    }
    .mail-inbox-heading
    {
        flex-wrap: nowrap;
    }
    .mail-inbox-heading-title
    {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
    }
    .mail-filter-input
    {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    .mail-current-activity .media-buttons-container,
    .mail-current-activity .float-opposite
    {
        margin-inline-end: 6px;
        margin-top: 10px;
        position: relative;
        z-index: 11;
    }
    .mail-compose-schedule-popover
    {
        inset-inline-start: auto;
        inset-inline-end: 4px;
        min-width: 0;
        width: max-content;
        max-width: 78vw;
    }
    .mail-compose-input, .mail-compose-body, .mail-filter-input
    {
        font-size: 16px;
    }
    .mail-alias-list
    {
        margin-inline-start: 0;
    }
    .mail-alias-form .mail-alias-input
    {
        flex: 1 1 auto;
        min-width: 0;
    }
    .mail-alias-form .mail-alias-domain
    {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 8em;
    }
    .mail-alias-form .mail-alias-add
    {
        flex: 0 0 auto;
    }
    #mail-col-from
    {
        width: 30%;
    }
    #mail-col-date
    {
        width: 5em;
    }
    .mail-account-form table, .mail-account-form tbody, .mail-account-form tr
    {
        display: block;
        width: 100%;
    }
    .mail-account-form th.table-label, .mail-account-form td
    {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: start;
        max-width: none;
    }
    .mail-container.no-selection .account-messages
    {
        display: none;
    }
    .mail-container.has-selection .user-accounts
    {
        display: none;
    }
    .user-accounts,
    .account-messages
    {
        width: 100%;
    }
}
