/**
 * Gmail-like look for Roundcube, layered on top of the Elastic skin.
 *
 * Only overrides Elastic's compiled styles.css, so Elastic can be upgraded
 * without touching this file.
 */

:root {
    --gm-bg: #f6f8fc;
    --gm-surface: #fff;
    --gm-text: #1f1f1f;
    --gm-text-secondary: #444746;
    --gm-text-muted: #5f6368;
    --gm-border: #e0e3e7;
    --gm-row-border: rgba(100, 121, 143, .12);
    --gm-row-read: #f2f6fc;
    --gm-row-selected: #c2dbff;
    --gm-hover: rgba(68, 71, 70, .08);
    --gm-nav-hover: #eaebef;
    --gm-nav-selected: #d3e3fd;
    --gm-nav-selected-text: #001d35;
    --gm-compose: #c2e7ff;
    --gm-compose-text: #001d35;
    --gm-primary: #0b57d0;
    --gm-primary-hover: #0842a0;
    --gm-search: #e9eef6;
    --gm-star: #f4b400;
    --gm-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
    --gm-topbar-height: 64px;
    --gm-sidebar-width: 256px;
}

/*** Base ***/

/* Inter (SIL Open Font License, see fonts/Inter-LICENSE.txt), self-hosted */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --gm-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body,
button,
input,
optgroup,
select,
textarea,
.popover,
.ui-dialog,
div.tox,
div.tox :not(.svg) {
    font-family: var(--gm-font);
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    color: var(--gm-text);
}

html:not(.iframe) body {
    background-color: var(--gm-bg);
}

a {
    color: var(--gm-primary);
}

a:hover {
    color: var(--gm-primary-hover);
}

/*** Buttons and form controls ***/

.btn {
    border-radius: 20px;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    font-weight: 500;
}

.btn-primary,
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--gm-primary);
    border-color: var(--gm-primary);
    color: #fff;
}

.btn-primary:not(:disabled):not(.disabled):hover,
.btn-primary:not(:disabled):not(.disabled):focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--gm-primary-hover);
    border-color: var(--gm-primary-hover);
    box-shadow: var(--gm-shadow);
}

.btn-secondary {
    background-color: transparent;
    border-color: #747775;
    color: var(--gm-primary);
}

.btn-secondary:not(:disabled):not(.disabled):hover {
    background-color: rgba(11, 87, 208, .08);
    border-color: #747775;
    color: var(--gm-primary);
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--gm-primary);
    box-shadow: 0 0 0 1px var(--gm-primary);
}

input[type="checkbox"].custom-control-input:checked ~ .custom-control-label:before,
.custom-switch .custom-control-input:checked ~ .custom-control-label:before {
    background-color: var(--gm-primary);
    border-color: var(--gm-primary);
}

/*** Popups and dialogs ***/

.popover {
    border: 0;
    border-radius: 8px;
    box-shadow: 0 4px 8px 3px rgba(60, 64, 67, .15), 0 1px 3px rgba(60, 64, 67, .3);
    overflow: hidden;
}

.popover .arrow {
    display: none;
}

.ui-dialog.ui-widget-content {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 4px 8px 3px rgba(60, 64, 67, .15), 0 1px 3px rgba(60, 64, 67, .3);
}

.ui-dialog .ui-dialog-titlebar {
    border-radius: 16px 16px 0 0;
}

/*** Panes ***/

#layout > div > .header {
    background-color: var(--gm-surface);
    border-bottom: 1px solid var(--gm-row-border);
    color: var(--gm-text);
}

#layout > div > .footer {
    background-color: transparent;
    border-top: 0;
}

#layout-sidebar,
#layout-list,
#layout-content {
    border: 0;
}

#layout-list,
#layout-content {
    background-color: var(--gm-surface);
}

.menu a:not(.disabled):hover,
.menu a:not(.disabled):focus,
.menu.toolbar .dropbutton:not(.disabled):hover {
    background-color: var(--gm-hover);
}

.menu.toolbar a {
    color: var(--gm-text-secondary);
    border-radius: 8px;
}

/*** Sidebar navigation (folders, address books, settings sections) ***/

#layout-sidebar {
    background-color: transparent;
}

#layout > #layout-sidebar > .header {
    background-color: transparent;
    border-bottom: 0;
    font-weight: normal;
    color: var(--gm-text-secondary);
}

#layout-sidebar .listing li {
    border-bottom: 0;
    background-color: transparent;
}

#layout-sidebar .listing li > a {
    height: 32px;
    line-height: 32px;
    border-radius: 0 16px 16px 0;
    color: var(--gm-text);
    font-size: 14px;
}

#layout-sidebar > .scroller > .listing,
#layout-sidebar > .scroller > .treelist {
    padding-right: 16px;
}

#mailboxlist > li > a {
    padding-left: 26px;
}

#layout-sidebar .listing li > a:hover {
    background-color: var(--gm-nav-hover);
}

#layout-sidebar .listing li.selected,
#layout-sidebar .listing li.selected > a,
#layout-sidebar ul.treelist li.selected > a {
    color: var(--gm-nav-selected-text);
    background-color: transparent;
}

#layout-sidebar .listing li.selected > a,
#layout-sidebar ul.treelist li.selected > a {
    background-color: var(--gm-nav-selected);
    font-weight: bold;
}

#layout-sidebar .listing li > a:before {
    color: var(--gm-text-secondary);
    margin-right: 18px;
}

#layout-sidebar .listing li.selected > a:before {
    color: var(--gm-nav-selected-text);
}

.folderlist li.mailbox.unread > a {
    font-weight: bold;
}

.folderlist li.mailbox .unreadcount,
.folderlist li.mailbox.recent > a > .unreadcount {
    background: transparent;
    color: inherit;
    font-size: 12px;
    font-weight: bold;
    line-height: 32px;
    margin: 0 12px 0 0;
    padding: 0;
    min-width: 0;
}

.folderlist li.mailbox.recent > a {
    color: var(--gm-text);
}

.quota-widget .bar {
    border-radius: 2px;
}

/*** Message list ***/

.messagelist tbody td,
.messagelist tbody td a {
    color: var(--gm-text);
}

.messagelist tbody td {
    border-bottom: 1px solid var(--gm-row-border);
    background-color: var(--gm-row-read);
}

.messagelist tbody tr.unread td {
    background-color: var(--gm-surface);
}

html:not(.touch) .messagelist tbody tr:hover {
    position: relative;
    z-index: 1;
    box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, var(--gm-shadow);
}

.listing tr.selected td,
.messagelist tbody tr.selected td,
.messagelist tbody tr.unread.selected td {
    color: var(--gm-text);
    background-color: var(--gm-row-selected);
}

html:not(.touch) .listing.focus tbody tr.focused > td:first-child,
html:not(.touch) .listing.focus:not(.withselection) tbody tr.focused > td.selection + td {
    border-left-color: var(--gm-primary);
}

.messagelist td.subject span.fromto {
    font-size: 14px;
    color: var(--gm-text);
}

.messagelist td.subject span.date,
.messagelist td.subject span.size {
    font-size: 12px;
    color: var(--gm-text-muted);
}

.messagelist td.subject span.subject,
.messagelist td.subject span.subject a {
    color: var(--gm-text-muted);
}

.messagelist tr.unread td.subject span.fromto,
.messagelist tr.unread td.subject span.date,
.messagelist tr.unread td.subject span.subject,
.messagelist tr.unread td.subject span.subject a {
    font-weight: bold;
    color: var(--gm-text);
}

.messagelist td.subject span.msgicon.status.unread:before {
    color: var(--gm-primary);
}

/* Gmail uses a star instead of a red flag and doesn't recolor flagged rows */
.messagelist tr.flagged td,
.messagelist tr.flagged td.subject span.subject a,
.messagelist tr.flagged td.subject span.fromto {
    color: var(--gm-text);
}

.messagelist tr.flagged td.subject span.date {
    color: var(--gm-text-muted);
}

.messagelist span.flagged:before {
    content: "\f005";
    font-weight: 900;
    color: var(--gm-star);
}

.messagelist tr:hover span.unflagged:before,
.messagelist tr.flaggedroot:not(:hover) span.unflagged:before {
    content: "\f005";
    font-weight: 400;
    color: var(--gm-text-muted);
}

.messagelist span.attachment span {
    color: var(--gm-text-muted);
}

/* Floating compose button on phones */
.floating-action-buttons a.button {
    border-radius: 16px;
    background: var(--gm-compose);
    color: var(--gm-compose-text);
    box-shadow: var(--gm-shadow);
}

/* Compose screen: options/attachments sidebar sits on the right */
#layout-sidebar.sidebar-right > .header {
    background-color: transparent;
}

/*** Search bar ***/

.searchbar {
    background-color: var(--gm-surface);
    border-bottom: 1px solid var(--gm-row-border);
}

.searchbar a.selected {
    color: var(--gm-primary);
}

/*** List paging footer ***/

.menu.pagenav .pagenav-text {
    color: var(--gm-text-muted);
}

/*** Message view ***/

#message-header h2.subject {
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--gm-text);
}

#message-header .header-summary,
#message-header .header-headers {
    color: var(--gm-text-muted);
}

#message-header .header-summary a,
#message-header .header-headers a {
    color: var(--gm-text);
    font-weight: bold;
}

#message-header .contactphoto {
    border-radius: 50%;
}

.attachmentslist li {
    border-radius: 8px;
}

/*** Desktop layout: Gmail-style top bar, rounded content cards ***/

@media screen and (min-width: 769px) {
    html:not(.iframe) body:not(.task-login):not(.action-get) #layout {
        position: relative;
        padding-top: var(--gm-topbar-height);
    }

    #layout-menu {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: auto;
        height: var(--gm-topbar-height);
        display: flex;
        flex-direction: row;
        align-items: center;
        background-color: var(--gm-bg);
        border: 0;
        z-index: 10;
    }

    #layout-menu .popover-header {
        background-color: transparent !important;
        height: var(--gm-topbar-height);
        line-height: var(--gm-topbar-height);
        padding: 0 0 0 20px !important;
        text-align: left;
        flex-shrink: 0;
    }

    #layout-menu .popover-header img {
        max-height: 40px;
        max-width: 200px;
        padding: 0;
        vertical-align: middle;
    }

    #taskmenu {
        position: static;
        overflow: visible;
        display: flex;
        align-items: center;
        flex: 1;
        justify-content: flex-end;
        height: var(--gm-topbar-height);
        padding-right: 12px;
    }

    #taskmenu .special-buttons {
        position: static;
        display: flex;
        background-color: transparent;
    }

    #taskmenu a,
    #taskmenu a.selected {
        width: 40px;
        height: 40px;
        min-width: 40px;
        margin: 0 2px;
        padding: 0;
        border-radius: 50%;
        font-size: 1.25rem;
        color: var(--gm-text-secondary);
        background: transparent;
    }

    #taskmenu a:before {
        display: block;
        float: none !important;
        width: 40px !important;
        height: 40px !important;
        line-height: 40px;
        margin: 0 !important;
    }

    #taskmenu a .inner {
        display: none;
    }

    #taskmenu a:hover,
    #taskmenu a:focus,
    #taskmenu a.selected:hover {
        color: var(--gm-text);
        background: var(--gm-hover);
    }

    #taskmenu a.selected {
        color: var(--gm-primary);
        background: var(--gm-nav-selected);
    }

    #taskmenu a.logout,
    #taskmenu a.logout:hover {
        color: var(--gm-text-secondary) !important;
    }

    /* Compose: pastel blue rounded button */
    #taskmenu .action-buttons {
        order: -1;
        margin-right: auto;
        margin-left: 24px;
    }

    #taskmenu .action-buttons a.compose,
    #taskmenu .action-buttons a.compose.selected {
        display: inline-flex;
        align-items: center;
        width: auto;
        max-width: none;
        height: 48px;
        padding: 0 20px 0 16px;
        border-radius: 16px;
        font-size: 14px;
        font-weight: 500;
        color: var(--gm-compose-text);
        background: var(--gm-compose);
        transition: box-shadow .15s;
    }

    #taskmenu .action-buttons a.compose:before {
        content: "\f303"; /* pencil */
        font-weight: 900;
        width: auto !important;
        height: auto !important;
        line-height: 1;
        margin: 0 12px 0 0 !important;
        font-size: 1.15rem;
    }

    #taskmenu .action-buttons a.compose .inner {
        display: inline;
        padding: 0;
        font-size: 14px;
    }

    #taskmenu .action-buttons a.compose:hover,
    #taskmenu .action-buttons a.compose:focus {
        color: var(--gm-compose-text);
        background: var(--gm-compose);
        box-shadow: var(--gm-shadow);
    }

    #layout-list,
    #layout-content {
        margin-bottom: 16px;
        border-radius: 16px;
        overflow: hidden;
    }

    #layout-list {
        margin-right: 8px;
    }

    #layout-content {
        margin-right: 16px;
    }

    #layout-sidebar.hidden + #layout-list,
    #layout:not(:has(> #layout-sidebar:not(.hidden):not(.sidebar-right))):not(:has(> #layout-list:not(.hidden))) > #layout-content {
        margin-left: 16px;
    }
}

/* Wide screens: compose sits at the top of the sidebar and search in the top bar, like Gmail */
@media screen and (min-width: 1201px) {
    #layout-sidebar:not(.sidebar-right) {
        flex: 0 0 var(--gm-sidebar-width);
        width: var(--gm-sidebar-width) !important;
        max-width: none;
        min-width: 0;
    }

    #layout-sidebar:not(.sidebar-right) > .column-resizer {
        display: none;
    }

    #layout-list {
        flex: 4;
        max-width: 42%;
    }

    #layout:has(> #layout-sidebar:not(.hidden):not(.sidebar-right)) #layout-sidebar {
        padding-top: 72px;
    }

    #layout:has(> #layout-sidebar:not(.hidden):not(.sidebar-right)) #taskmenu .action-buttons {
        position: absolute;
        top: calc(var(--gm-topbar-height) + 8px);
        left: 8px;
        margin: 0;
    }

    #layout:has(> #layout-sidebar:not(.hidden):not(.sidebar-right)) #taskmenu .action-buttons a.compose {
        height: 56px;
        min-width: 140px;
    }

    #layout-menu .popover-header {
        width: var(--gm-sidebar-width);
    }

    body.task-mail #layout-list > .searchbar,
    body.task-addressbook #layout-list > .searchbar {
        position: fixed;
        top: 8px;
        left: var(--gm-sidebar-width);
        width: min(720px, calc(100vw - var(--gm-sidebar-width) - 320px));
        height: 48px;
        min-height: 48px;
        line-height: 48px;
        border: 0;
        border-radius: 24px;
        background-color: var(--gm-search);
        z-index: 11;
        transition: background-color .15s, box-shadow .15s;
    }

    body.task-mail #layout-list > .searchbar:focus-within,
    body.task-addressbook #layout-list > .searchbar:focus-within {
        background-color: var(--gm-surface);
        box-shadow: var(--gm-shadow);
    }

    body.task-mail #layout-list > .searchbar form:before,
    body.task-addressbook #layout-list > .searchbar form:before {
        height: 48px;
        line-height: 48px;
        margin-left: 18px;
        font-size: 1.1rem;
        color: var(--gm-text-secondary);
    }

    body.task-mail #layout-list > .searchbar input,
    body.task-addressbook #layout-list > .searchbar input {
        font-size: 16px;
        padding: .5rem 1rem;
    }

    body.task-mail #layout-list > .searchbar a:before,
    body.task-addressbook #layout-list > .searchbar a:before {
        height: 48px;
        line-height: 48px;
        width: 2.5rem;
    }
}

/*** Login page ***/

body.task-login {
    background-color: #f0f4f9;
}

body.task-login #layout-content {
    background-color: #f0f4f9;
    margin: 0 !important;
    border-radius: 0;
}

body.task-login #layout-content > #logo {
    display: block;
    top: 0;
    max-height: 56px;
    margin: 12vh auto 0;
}

body.task-login #login-form {
    top: 0;
    margin: 24px auto 0;
    max-width: 450px;
    padding: 36px 40px 28px;
    background-color: var(--gm-surface);
    border-radius: 28px;
}

body.task-login #login-form .input-group .form-control,
body.task-login #login-form .input-group-text {
    height: 48px;
}

body.task-login #login-form .formbuttons button {
    width: 100%;
    height: 44px;
    border-radius: 22px;
}

body.task-login #login-footer {
    color: var(--gm-text-muted);
}

/*** Compose: Gmail-style floating window (see gmail.js) ***/

/* Compose always opens in place, never in a separate browser window */
.formbuttons a.extwin,
#layout-content .header a.extwin {
    display: none !important;
}

#gm-compose-dock {
    position: fixed;
    right: 16px;
    bottom: 0;
    z-index: 900;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    gap: 16px;
    pointer-events: none;
}

#gm-compose-dock .gm-compose-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    pointer-events: auto;
}

#gm-compose-dock.has-maximized .gm-compose-backdrop {
    display: block;
}

.gm-compose-window {
    display: flex;
    flex-direction: column;
    width: 540px;
    height: min(600px, calc(100vh - 80px));
    background: var(--gm-surface);
    border-radius: 8px 8px 0 0;
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
    overflow: hidden;
    pointer-events: auto;
}

.gm-compose-window.minimized {
    width: 260px;
    height: 40px;
}

.gm-compose-window.maximized {
    position: fixed;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(1200px, calc(100vw - 160px));
    height: calc(100vh - 96px);
    border-radius: 8px;
}

/* Saving the draft on close: hide right away, removed once saved */
.gm-compose-window.closing {
    display: none;
}

.gm-compose-titlebar {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 40px;
    padding: 0 8px 0 16px;
    background: #f2f6fc;
    cursor: pointer;
    user-select: none;
}

.gm-compose-window.maximized .gm-compose-titlebar {
    cursor: default;
}

.gm-compose-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: 500;
    color: #041e49;
}

.gm-compose-buttons {
    display: flex;
    flex-shrink: 0;
}

.gm-compose-buttons a,
.gm-compose-actions a.gm-compose-discard {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    margin-left: 2px;
    border-radius: 50%;
    text-align: center;
    text-decoration: none;
    font-family: Icons;
    font-weight: 900;
    font-size: 13px;
    color: var(--gm-text-secondary);
}

.gm-compose-buttons a:hover,
.gm-compose-actions a.gm-compose-discard:hover {
    background: var(--gm-hover);
    color: var(--gm-text);
    text-decoration: none;
}

.gm-compose-minimize:before {
    content: "\f068"; /* minus */
}

.gm-compose-maximize:before {
    content: "\f065"; /* expand */
}

.gm-compose-window.maximized .gm-compose-maximize:before {
    content: "\f066"; /* compress */
}

.gm-compose-close:before {
    content: "\f00d"; /* times */
    font-size: 15px;
}

.gm-compose-frame {
    flex: 1;
    width: 100%;
    min-height: 0;
    border: 0;
    background: var(--gm-surface);
}

/*** Compose page inside the floating window ***/

html.gm-docked body {
    background: var(--gm-surface);
}

html.gm-docked #layout-content {
    display: flex !important;
    flex-direction: column;
    margin: 0 !important;
    border-radius: 0;
}

html.gm-docked #layout-content > .header .header-title,
html.gm-docked #layout-content > .header .task-menu-button,
html.gm-docked #layout-content > .header .back-list-button,
html.gm-docked #layout-content .formbuttons {
    display: none !important;
}

/* Fields and message body take the space, the action bar sits at the bottom */
html.gm-docked #compose-content {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto !important;
    padding: 0;
}

html.gm-docked #compose-content > form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    max-width: none;
    padding: 0 16px;
}

html.gm-docked #compose-headers .form-group.row {
    flex-wrap: nowrap;
    align-items: center;
    min-height: 40px;
    margin: 0;
    border-bottom: 1px solid #f1f1f1;
}

html.gm-docked #compose-headers .col-form-label {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    min-width: 48px;
    padding: 0 8px 0 0;
    font-size: 14px;
    font-weight: normal;
    color: var(--gm-text-muted);
}

html.gm-docked #compose-headers .col-10 {
    flex: 1;
    max-width: none;
    padding: 0;
}

html.gm-docked #compose-headers .form-control,
html.gm-docked #compose-headers .custom-select,
html.gm-docked #compose-headers .recipient-input,
html.gm-docked #compose-headers .recipient-input.focus,
html.gm-docked #compose-headers .input-group-text {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
    padding-left: 0;
    font-size: 14px;
}

html.gm-docked #compose-headers .input-group-text {
    padding: 0 6px;
    color: var(--gm-text-muted);
}

html.gm-docked #compose-headers .recipient-input li.recipient {
    border: 1px solid var(--gm-border);
    border-radius: 12px;
    background-color: var(--gm-surface);
    padding: 0 8px;
}

html.gm-docked #composebodycontainer {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 200px;
    padding: 8px 0;
}

html.gm-docked #composebodycontainer > textarea,
html.gm-docked #composebodycontainer .tox-tinymce {
    flex: 1;
    height: auto !important;
    min-height: 180px;
    border: 0;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
    font-size: 14px;
    resize: none;
}

/* Bottom action bar: [Send] save, attach, signature, ... [trash] */
html.gm-docked #layout-content > .header.gm-compose-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 56px;
    min-height: 56px;
    padding: 0 8px 0 16px;
    border: 0;
    border-top: 1px solid #f1f1f1;
    background-color: var(--gm-surface);
}

/* Elastic's own footer copies Send/Save on small screens: the action bar replaces it */
html.gm-docked #layout-content > .content-frame-navigation,
html.gm-docked #layout-content > .footer {
    display: none !important;
}

html.gm-docked .gm-compose-actions button.btn.send {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    height: 36px;
    margin: 0 12px 0 0;
    padding: 0 24px;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .25px;
}

html.gm-docked .gm-compose-actions button.btn.send:before {
    display: none !important;
}

html.gm-docked .gm-compose-actions #messagetoolbar {
    position: static;
    flex: 1;
    min-width: 0;
    height: 36px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: transparent;
}

html.gm-docked .gm-compose-actions #messagetoolbar .spacer,
html.gm-docked .gm-compose-actions #messagetoolbar a .inner,
html.gm-docked .gm-compose-actions #messagetoolbar a.dropdown {
    display: none !important;
}

html.gm-docked .gm-compose-actions #messagetoolbar .dropbutton {
    display: inline-flex;
    height: 36px;
}

html.gm-docked .gm-compose-actions #messagetoolbar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    min-width: 36px;
    max-width: none;
    height: 36px;
    margin: 0 2px 0 0;
    padding: 0;
    border-radius: 50%;
    line-height: 36px;
    font-size: 15px;
    color: var(--gm-text-secondary);
    background: transparent;
}

html.gm-docked .gm-compose-actions #messagetoolbar a:before {
    display: block;
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    line-height: 1;
    font-size: 17px;
}

html.gm-docked .gm-compose-actions #messagetoolbar a:not(.disabled):hover,
html.gm-docked .gm-compose-actions #messagetoolbar a:not(.disabled):focus {
    color: var(--gm-text);
    background: var(--gm-hover);
}

html.gm-docked .gm-compose-actions #messagetoolbar a.disabled {
    opacity: .4;
}

html.gm-docked .gm-compose-actions a.gm-compose-discard {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    line-height: 36px;
    margin: 0;
    font-size: 16px;
}

html.gm-docked .gm-compose-actions a.gm-compose-discard:before {
    content: "\f2ed"; /* trash */
    font-weight: 400;
}

/* "Options and attachments" opens over the message, with its own back button */
html.gm-docked #layout-sidebar.sidebar-right {
    border-left: 0;
}

/* Attachments under the message, Gmail-style: grey rows with name, size and remove */
html.gm-docked #compose-content > .attachmentslist.gm-attachments {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin: 0;
    padding: 0 16px 8px;
    border: 0;
    background: transparent;
}

html.gm-docked .gm-attachments:empty {
    display: none !important;
}

html.gm-docked .gm-attachments li {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 448px;
    height: 32px;
    line-height: 32px;
    margin: 0;
    padding: 0 4px 0 10px;
    border-radius: 4px;
    background: #f5f5f5;
}

html.gm-docked .gm-attachments li:before {
    flex-shrink: 0;
    height: 32px;
    line-height: 32px;
    margin: 0 8px 0 0;
    font-size: 15px;
    color: var(--gm-text-muted);
}

html.gm-docked .gm-attachments li a.filename {
    display: flex;
    flex: 1;
    min-width: 0;
    height: 32px;
    line-height: 32px;
    padding: 0;
}

html.gm-docked .gm-attachments li .attachment-name {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: 600;
    color: var(--gm-primary);
}

html.gm-docked .gm-attachments li .attachment-size {
    flex-shrink: 0;
    padding-left: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--gm-text-secondary);
}

html.gm-docked .gm-attachments li a.delete,
html.gm-docked .gm-attachments li a.cancelupload,
html.gm-docked .gm-attachments li a.dropdown {
    position: static;
    order: 2;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: 2px;
    border-radius: 50%;
    color: var(--gm-text-secondary);
    text-decoration: none;
}

html.gm-docked .gm-attachments li a .inner {
    display: none;
}

html.gm-docked .gm-attachments li a.delete:before,
html.gm-docked .gm-attachments li a.cancelupload:before {
    content: "\f00d"; /* times */
    float: none;
    width: auto;
    height: auto;
    line-height: 1;
    font-size: 14px;
}

html.gm-docked .gm-attachments li a.dropdown:before {
    float: none;
    width: auto;
    height: auto;
    line-height: 1;
    font-size: 12px;
}

html.gm-docked .gm-attachments li a.delete:hover,
html.gm-docked .gm-attachments li a.cancelupload:hover,
html.gm-docked .gm-attachments li a.dropdown:hover {
    background: rgba(0, 0, 0, .08);
    color: var(--gm-text);
}

/* Upload in progress: blue progress shading, like Gmail */
html.gm-docked .gm-attachments li.uploading .attachment-name,
html.gm-docked .gm-attachments li .uploading {
    color: var(--gm-text-secondary);
}

/* Dropping files on the window */
html.gm-docked #compose-content.gm-drop-hover {
    outline: 2px dashed var(--gm-primary);
    outline-offset: -6px;
    background-color: rgba(11, 87, 208, .04);
}

/*** Message view: attachments as cards below the message (see gmail.js) ***/

#message-content > .leftcol.gm-att-moved {
    display: none;
}

/* The cards show image thumbnails, Roundcube's full-size copies below the message are not needed */
#messagebody p.image-attachment,
#messagebody fieldset.image-attachment {
    display: none !important;
}

#message-content .gm-att-header {
    margin: 24px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--gm-border);
    font-size: 14px;
    font-weight: 600;
    color: var(--gm-text);
}

#message-content .attachmentslist.gm-att-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 12px 0 16px;
    padding: 0;
    border: 0;
    background: transparent;
}

.gm-att-cards li {
    position: relative;
    display: block;
    width: 180px;
    height: 120px;
    margin: 0;
    padding: 0;
    border: 1px solid #dadce0;
    border-radius: 8px;
    background: #f8f9fa;
    overflow: hidden;
    line-height: normal;
    white-space: normal;
}

/* File type icon for files without a thumbnail */
.gm-att-cards li:before {
    position: absolute;
    top: 22px;
    left: 0;
    right: 0;
    width: auto;
    height: auto;
    margin: 0;
    float: none;
    font-size: 40px;
    line-height: 1;
    text-align: center;
    color: #5f6368;
}

.gm-att-cards li.pdf:before { color: #ea4335; }
.gm-att-cards li.doc:before, .gm-att-cards li.docx:before, .gm-att-cards li.msword:before, .gm-att-cards li.odt:before { color: #4285f4; }
.gm-att-cards li.xls:before, .gm-att-cards li.xlsx:before, .gm-att-cards li.msexcel:before, .gm-att-cards li.ods:before { color: #0f9d58; }
.gm-att-cards li.ppt:before, .gm-att-cards li.pptx:before, .gm-att-cards li.odp:before { color: #f4b400; }

.gm-att-cards li.gm-has-thumb:before {
    display: none;
}

.gm-att-cards .gm-att-thumb,
.gm-att-cards .gm-att-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The whole card opens the file; the name sits in a white strip at the bottom */
.gm-att-cards li a.filename {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: auto;
    padding: 0;
    line-height: normal;
    text-decoration: none;
    transition: background-color .15s;
}

.gm-att-cards li a.filename .attachment-name {
    display: block;
    height: 36px;
    line-height: 36px;
    padding: 0 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-top: 1px solid #dadce0;
    background: var(--gm-surface);
    font-size: 13px;
    font-weight: 500;
    color: var(--gm-text);
}

.gm-att-cards li a.filename .attachment-size {
    display: none;
    padding: 0 10px;
    font-size: 12px;
    color: #fff;
}

/* Hover: darken the card, show name, size and download, like Gmail */
.gm-att-cards li:hover a.filename,
.gm-att-cards li a.filename:focus {
    justify-content: flex-start;
    background: rgba(32, 33, 36, .65);
}

.gm-att-cards li:hover a.filename .attachment-name,
.gm-att-cards li a.filename:focus .attachment-name {
    height: auto;
    line-height: 1.4;
    padding: 12px 10px 2px;
    border: 0;
    background: transparent;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #fff;
}

.gm-att-cards li:hover a.filename .attachment-size,
.gm-att-cards li a.filename:focus .attachment-size {
    display: block;
}

.gm-att-cards li a.dropdown {
    display: none !important;
}

.gm-att-cards li a.gm-att-download {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 2;
    display: none;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    text-align: center;
    text-decoration: none;
    font-family: Icons;
    font-weight: 900;
    font-size: 14px;
    color: var(--gm-text);
}

.gm-att-cards li a.gm-att-download:before {
    content: "\f019"; /* download */
}

.gm-att-cards li:hover a.gm-att-download,
.gm-att-cards li a.filename:focus ~ a.gm-att-download {
    display: block;
}

.gm-att-cards li a.gm-att-download:hover {
    background: #fff;
    color: var(--gm-primary);
}

/*** Full-screen attachment viewer (see gmail.js) ***/

#gm-viewer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    flex-direction: column;
    background: rgba(0, 0, 0, .88);
    color: #fff;
    outline: 0;
}

#gm-viewer.open {
    display: flex;
}

body.gm-viewer-open {
    overflow: hidden;
}

#gm-viewer .gm-viewer-bar {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 64px;
    padding: 0 12px;
    background: linear-gradient(rgba(0, 0, 0, .6), transparent);
}

#gm-viewer .gm-viewer-name {
    flex: 1;
    min-width: 0;
    margin-left: 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 15px;
    font-weight: 500;
}

#gm-viewer .gm-viewer-count {
    margin: 0 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, .7);
}

#gm-viewer a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-decoration: none;
    font-family: Icons;
    font-weight: 900;
    font-size: 18px;
    color: #fff;
}

#gm-viewer a:hover {
    background: rgba(255, 255, 255, .15);
}

#gm-viewer .gm-viewer-close:before {
    content: "\f060"; /* arrow-left */
}

#gm-viewer .gm-viewer-download:before {
    content: "\f019"; /* download */
}

#gm-viewer .gm-viewer-body {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 72px 32px;
}

#gm-viewer .gm-viewer-body img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .5);
    background: #fff;
}

#gm-viewer .gm-viewer-body iframe {
    width: min(1000px, 100%);
    height: 100%;
    border: 0;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .5);
}

#gm-viewer .gm-viewer-prev,
#gm-viewer .gm-viewer-next {
    position: absolute;
    top: 50%;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    background: rgba(0, 0, 0, .4);
    font-size: 20px;
}

#gm-viewer .gm-viewer-prev {
    left: 16px;
}

#gm-viewer .gm-viewer-next {
    right: 16px;
}

#gm-viewer .gm-viewer-prev:before {
    content: "\f053"; /* chevron-left */
}

#gm-viewer .gm-viewer-next:before {
    content: "\f054"; /* chevron-right */
}

@media screen and (max-width: 768px) {
    #gm-viewer .gm-viewer-body {
        padding: 0 8px 8px;
    }

    #gm-viewer .gm-viewer-prev,
    #gm-viewer .gm-viewer-next {
        top: auto;
        bottom: 16px;
    }
}

/*** Message list: attachment chips below the subject (list_attachments plugin) ***/

.messagelist td.subject .list-attachments {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 2px;
    overflow: hidden;
    white-space: nowrap;
    line-height: normal;
}

.messagelist td.subject a.list-attachment {
    display: inline-flex;
    align-items: center;
    flex-shrink: 1;
    min-width: 0;
    max-width: 200px;
    height: 28px;
    padding: 0 12px 0 10px;
    border: 1px solid #dadce0;
    border-radius: 14px;
    background: var(--gm-surface);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--gm-text-secondary) !important;
}

.messagelist td.subject a.list-attachment:hover {
    background: #f1f3f4;
    border-color: #c4c7c5;
}

.messagelist td.subject a.list-attachment .name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.messagelist td.subject a.list-attachment:before {
    flex-shrink: 0;
    margin-right: 6px;
    font-family: Icons;
    font-weight: 400;
    font-size: 14px;
    content: "\f15b"; /* file */
    color: #5f6368;
}

.messagelist td.subject a.list-attachment.pdf:before { content: "\f1c1"; color: #ea4335; }
.messagelist td.subject a.list-attachment.image:before { content: "\f1c5"; color: #ea4335; }
.messagelist td.subject a.list-attachment.doc:before, .messagelist td.subject a.list-attachment.docx:before,
.messagelist td.subject a.list-attachment.msword:before, .messagelist td.subject a.list-attachment.odt:before { content: "\f1c2"; color: #4285f4; }
.messagelist td.subject a.list-attachment.xls:before, .messagelist td.subject a.list-attachment.xlsx:before,
.messagelist td.subject a.list-attachment.msexcel:before, .messagelist td.subject a.list-attachment.ods:before,
.messagelist td.subject a.list-attachment.csv:before { content: "\f1c3"; color: #0f9d58; }
.messagelist td.subject a.list-attachment.ppt:before, .messagelist td.subject a.list-attachment.pptx:before,
.messagelist td.subject a.list-attachment.odp:before { content: "\f1c4"; color: #f4b400; }
.messagelist td.subject a.list-attachment.zip:before, .messagelist td.subject a.list-attachment.rar:before,
.messagelist td.subject a.list-attachment.gz:before { content: "\f1c6"; }
.messagelist td.subject a.list-attachment.text:before, .messagelist td.subject a.list-attachment.txt:before { content: "\f15c"; }

.messagelist td.subject .list-attachment-more {
    flex-shrink: 0;
    padding: 0 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--gm-text-muted);
}

.messagelist tr.selected td.subject a.list-attachment {
    background: rgba(255, 255, 255, .7);
}

/*** Opening a message: show subject and sender right away while the message loads (see gmail.js) ***/

#gm-preview-placeholder {
    position: absolute;
    inset: 0;
    z-index: 5;
    padding: 24px 32px;
    background: var(--gm-surface);
    overflow: hidden;
}

#gm-preview-placeholder .gm-ph-subject {
    margin: 0 0 20px;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--gm-text);
    overflow-wrap: anywhere;
}

#gm-preview-placeholder .gm-ph-from {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    font-size: 14px;
    font-weight: 600;
    color: var(--gm-text);
}

#gm-preview-placeholder .gm-ph-from:before {
    content: "";
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e8eaed;
}

#gm-preview-placeholder .gm-ph-line {
    height: 12px;
    margin-bottom: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, #f1f3f4 25%, #e8eaed 50%, #f1f3f4 75%);
    background-size: 200% 100%;
    animation: gm-shimmer 1.2s linear infinite;
}

@keyframes gm-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}