:root {
  color-scheme: light;
  --am-bg: #f7f7f8;
  --am-surface: #ffffff;
  --am-surface-2: #f1f1f3;
  --am-text: #17171b;
  --am-muted: #66656d;
  --am-faint: #91909a;
  --am-border: #e6e5e9;
  --am-hover: #f3f3f5;
  --am-selected: #eeeeef;
  --am-accent: #6001d2;
  --am-accent-rgb: 96, 1, 210;
  --am-accent-soft: #f1e8ff;
  --am-row-height: 48px;
  --am-radius: 16px;
  --am-shadow: 0 1px 3px rgba(20, 20, 28, .05);
  --am-font: Arial, Helvetica, sans-serif;
}

html.dark-mode {
  color-scheme: dark;
  --am-bg: #111115;
  --am-surface: #19191f;
  --am-surface-2: #222229;
  --am-text: #f6f5f8;
  --am-muted: #b2afb9;
  --am-faint: #8a8791;
  --am-border: #303039;
  --am-hover: #222229;
  --am-selected: #2a2930;
  --am-accent-soft: #2a1747;
  --am-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

html[data-arpymail-accent="blue"] { --am-accent:#0f69ff; --am-accent-rgb:15,105,255; --am-accent-soft:#e8f0ff; }
html[data-arpymail-accent="teal"] { --am-accent:#008f95; --am-accent-rgb:0,143,149; --am-accent-soft:#e4f7f7; }
html[data-arpymail-accent="green"] { --am-accent:#0a8754; --am-accent-rgb:10,135,84; --am-accent-soft:#e8f6ef; }
html[data-arpymail-accent="orange"] { --am-accent:#d85b00; --am-accent-rgb:216,91,0; --am-accent-soft:#fff0e5; }
html[data-arpymail-accent="rose"] { --am-accent:#c51d68; --am-accent-rgb:197,29,104; --am-accent-soft:#fdeaf2; }
html[data-arpymail-accent="graphite"] { --am-accent:#4a5568; --am-accent-rgb:74,85,104; --am-accent-soft:#edf0f4; }
html.dark-mode[data-arpymail-accent="blue"] { --am-accent-soft:#142746; }
html.dark-mode[data-arpymail-accent="teal"] { --am-accent-soft:#123235; }
html.dark-mode[data-arpymail-accent="green"] { --am-accent-soft:#143126; }
html.dark-mode[data-arpymail-accent="orange"] { --am-accent-soft:#382415; }
html.dark-mode[data-arpymail-accent="rose"] { --am-accent-soft:#3b1b29; }
html.dark-mode[data-arpymail-accent="graphite"] { --am-accent-soft:#292d34; }

html[data-arpymail-density="compact"] { --am-row-height: 40px; }
html[data-arpymail-density="comfortable"] { --am-row-height: 48px; }
html[data-arpymail-density="relaxed"] { --am-row-height: 56px; }

html, body {
  font-family: var(--am-font) !important;
  background: var(--am-bg) !important;
  color: var(--am-text) !important;
}

a { color: var(--am-accent); }
#layout, #layout-sidebar, #layout-list, #layout-content { border-color: var(--am-border) !important; }

/* ------------------------------------------------------------
   Global desktop chrome. Core Roundcube elements are not moved.
   ------------------------------------------------------------ */
#arpymail-chrome {
  display: none;
}

@media screen and (min-width: 769px) {
  #arpymail-chrome {
    position: fixed;
    z-index: 1200;
    inset: 0 0 auto 0;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px 0 26px;
    background: var(--am-bg);
    color: var(--am-text);
  }

  .arpymail-brand {
    width: 126px;
    flex: 0 0 126px;
    white-space: nowrap;
    font-size: 23px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -1.1px;
    user-select: none;
  }
  .arpymail-brand span,
  .arpymail-brand b { color: var(--am-accent); }
  .arpymail-brand b { font-style: italic; padding: 0 1px; }
  .arpymail-brand strong { color: var(--am-text); font-weight: 700; }
  .arpymail-chrome-spacer { flex: 1; min-width: 20px; }

  .arpymail-chrome-icon {
    width: 36px;
    height: 36px;
    border: 1px solid var(--am-border);
    border-radius: 50%;
    background: var(--am-surface);
    color: var(--am-text);
    font-weight: 700;
    cursor: pointer;
  }
  .arpymail-chrome-icon:hover { color: var(--am-accent); border-color: rgba(var(--am-accent-rgb), .35); }

  .arpymail-account-wrap { position: relative; }
  .arpymail-account-button {
    height: 42px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 0;
    border-radius: 22px;
    padding: 3px 3px 3px 10px;
    background: transparent;
    color: var(--am-muted);
    cursor: pointer;
  }
  .arpymail-account-button:hover { background: var(--am-hover); }
  .arpymail-account-name {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
  }
  .arpymail-user-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--am-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
  }
  .arpymail-user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .arpymail-account-menu {
    position: absolute;
    top: 48px;
    right: 0;
    width: 260px;
    padding: 8px;
    border: 1px solid var(--am-border);
    border-radius: 16px;
    background: var(--am-surface);
    box-shadow: 0 12px 34px rgba(20, 20, 28, .16);
  }
  .arpymail-account-menu[hidden] { display: none !important; }
  .arpymail-account-card {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 8px 8px 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--am-border);
  }
  .arpymail-account-card > div { min-width: 0; }
  .arpymail-account-card strong,
  .arpymail-account-card span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .arpymail-account-card span { color: var(--am-muted); font-size: 11px; margin-top: 2px; }
  .arpymail-account-menu > button {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 11px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--am-text);
    text-align: left;
    cursor: pointer;
  }
  .arpymail-account-menu > button:hover { background: var(--am-hover); }
  .arpymail-account-menu > button.logout { color: #c62828; }

  body #layout {
    top: 64px !important;
    height: calc(100% - 64px) !important;
    background: var(--am-bg) !important;
  }

  /* Search stays in Roundcube's own DOM; only its visual position changes. */
  body.task-mail:not(.action-show):not(.action-compose) #mailsearchform {
    position: fixed !important;
    z-index: 1202 !important;
    top: 13px !important;
    left: 154px !important;
    width: min(650px, 45vw) !important;
    height: 40px !important;
    margin: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 22px !important;
    background: #ececee !important;
    box-shadow: none !important;
  }
  html.dark-mode body.task-mail:not(.action-show):not(.action-compose) #mailsearchform { background: #25252c !important; }
  body.task-mail:not(.action-show):not(.action-compose) #mailsearchform:focus-within {
    background: var(--am-surface) !important;
    border-color: rgba(var(--am-accent-rgb), .3) !important;
    box-shadow: 0 0 0 2px rgba(var(--am-accent-rgb), .07) !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #mailsearchform input {
    height: 38px !important;
    background: transparent !important;
    color: var(--am-text) !important;
    font-size: 13px !important;
  }

  /* Yahoo-style desktop inbox: use folders as the main left rail. */
  html[data-arpymail-mail-layout="yahoo"] body.task-mail:not(.action-show):not(.action-compose) #layout-menu {
    display: none !important;
  }
  html[data-arpymail-mail-layout="yahoo"] body.task-mail:not(.action-show):not(.action-compose) #layout-sidebar {
    flex: 0 0 96px !important;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    position: relative !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }
  html[data-arpymail-mail-layout="yahoo"] body.task-mail:not(.action-show):not(.action-compose) #layout-sidebar > .header,
  html[data-arpymail-mail-layout="yahoo"] body.task-mail:not(.action-show):not(.action-compose) #layout-sidebar > .footer {
    display: none !important;
  }

  #arpymail-compose-shortcut {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin: 6px auto 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--am-accent);
    color: #fff;
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
  }
  #arpymail-compose-shortcut:hover { filter: brightness(.96); }

  html[data-arpymail-mail-layout="yahoo"] body.task-mail:not(.action-show):not(.action-compose) #folderlist-content {
    position: absolute !important;
    top: 70px !important;
    right: 0 !important;
    bottom: 110px !important;
    left: 0 !important;
    padding: 0 6px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  html[data-arpymail-mail-layout="yahoo"] body.task-mail:not(.action-show):not(.action-compose) #mailboxlist {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  html[data-arpymail-mail-layout="yahoo"] body.task-mail:not(.action-show):not(.action-compose) #mailboxlist li {
    width: 100% !important;
    margin: 0 !important;
  }
  html[data-arpymail-mail-layout="yahoo"] body.task-mail:not(.action-show):not(.action-compose) #mailboxlist a {
    min-height: 56px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 5px 3px !important;
    border-radius: 10px !important;
    color: var(--am-muted) !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }
  html[data-arpymail-mail-layout="yahoo"] body.task-mail:not(.action-show):not(.action-compose) #mailboxlist li.selected > a,
  html[data-arpymail-mail-layout="yahoo"] body.task-mail:not(.action-show):not(.action-compose) #mailboxlist a:hover {
    background: var(--am-selected) !important;
    color: var(--am-text) !important;
  }
  html[data-arpymail-mail-layout="yahoo"] body.task-mail:not(.action-show):not(.action-compose) #mailboxlist a:before {
    margin: 0 !important;
    font-size: 20px !important;
  }
  html[data-arpymail-mail-layout="yahoo"] body.task-mail:not(.action-show):not(.action-compose) #mailboxlist .unreadcount {
    position: absolute;
    transform: translate(22px, -15px);
    min-width: 17px;
    padding: 1px 4px;
    border-radius: 9px;
    background: var(--am-accent);
    color: #fff;
    font-size: 9px;
    line-height: 14px;
  }

  #arpymail-sidebar-shortcuts {
    position: absolute;
    left: 7px;
    right: 7px;
    bottom: 8px;
    display: grid;
    gap: 2px;
  }
  .arpymail-side-shortcut {
    min-height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 10px;
    color: var(--am-muted) !important;
    font-size: 9px;
    text-decoration: none !important;
  }
  .arpymail-side-shortcut .icon { font-size: 17px; line-height: 1; }
  .arpymail-side-shortcut:hover { background: var(--am-hover); color: var(--am-text) !important; }

  html[data-arpymail-mail-layout="yahoo"] body.task-mail:not(.action-show):not(.action-compose) #layout-list {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 8px 14px 10px 7px !important;
    border: 1px solid var(--am-border) !important;
    border-radius: var(--am-radius) !important;
    background: var(--am-surface) !important;
    box-shadow: var(--am-shadow) !important;
    overflow: hidden !important;
  }
  html[data-arpymail-mail-layout="yahoo"] body.task-mail:not(.action-show):not(.action-compose) #layout-content {
    display: none !important;
  }

  /* Inbox toolbar */
  body.task-mail:not(.action-show):not(.action-compose) #messagelist-header {
    height: 48px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 14px !important;
    border-bottom: 1px solid var(--am-border) !important;
    background: var(--am-surface) !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist-header .header-title { display: none !important; }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist-header .toolbar.menu {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    flex: 0 0 auto !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist-header a,
  body.task-mail:not(.action-show):not(.action-compose) #messagelist-header .button {
    border-radius: 9px !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist-header .refresh { margin-left: auto !important; }

  /* Message rows: avatar | sender | subject · cached preview | time */
  body.task-mail:not(.action-show):not(.action-compose) #messagelist {
    background: var(--am-surface) !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist thead { display: none !important; }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist tbody tr {
    height: var(--am-row-height) !important;
    min-height: var(--am-row-height) !important;
    border-bottom: 1px solid var(--am-border) !important;
    background: var(--am-surface) !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist tbody tr:hover { background: var(--am-hover) !important; }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist tbody tr.selected { background: var(--am-selected) !important; }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist td { border: 0 !important; }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist td.subject {
    min-width: 0 !important;
    height: var(--am-row-height) !important;
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 0 12px 0 5px !important;
    overflow: hidden !important;
  }
  .arpymail-sender-avatar {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--am-avatar, var(--am-accent));
    color: #fff;
    font-size: 10px;
    font-weight: 700;
  }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist td.subject > span.fromto {
    flex: 0 0 clamp(145px, 17vw, 245px) !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--am-text) !important;
    font-size: 12px !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist td.subject > span.subject {
    order: 3 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--am-text) !important;
    font-size: 12px !important;
  }
  .arpymail-preview-snippet { color: var(--am-muted) !important; font-weight: 400 !important; }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist td.subject > span.date {
    order: 4 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 72px !important;
    margin-left: auto !important;
    text-align: right !important;
    white-space: nowrap !important;
    color: var(--am-muted) !important;
    font-size: 11px !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist td.subject > span.status {
    order: 2 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 -5px 0 -3px !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist tr.unread td.subject > span.fromto,
  body.task-mail:not(.action-show):not(.action-compose) #messagelist tr.unread td.subject > span.subject { font-weight: 700 !important; }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist td.threads { width: 28px !important; padding-left: 10px !important; }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist td.flags { width: 64px !important; padding-right: 10px !important; }

  /* Pager centered, no first/last clutter. */
  body.task-mail:not(.action-show):not(.action-compose) .pagenav {
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-top: 1px solid var(--am-border) !important;
    background: var(--am-surface) !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) .pagenav .firstpage,
  body.task-mail:not(.action-show):not(.action-compose) .pagenav .lastpage,
  body.task-mail:not(.action-show):not(.action-compose) .pagenav input { display: none !important; }
  body.task-mail:not(.action-show):not(.action-compose) .pagenav .pagenav-text {
    min-width: 190px;
    text-align: center;
    color: var(--am-muted) !important;
    font-size: 10px !important;
  }

  /* Native full message view, restyled only. */
  body.task-mail.action-show #layout-menu {
    flex: 0 0 88px !important;
    width: 88px !important;
    min-width: 88px !important;
    background: var(--am-bg) !important;
    border: 0 !important;
  }
  body.task-mail.action-show #taskmenu a {
    min-height: 58px !important;
    border-radius: 10px !important;
    color: var(--am-muted) !important;
  }
  body.task-mail.action-show #taskmenu a.selected,
  body.task-mail.action-show #taskmenu a:hover { background: var(--am-selected) !important; color: var(--am-text) !important; }
  body.task-mail.action-show #layout-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 8px 14px 12px 5px !important;
    border: 1px solid var(--am-border) !important;
    border-radius: var(--am-radius) !important;
    background: var(--am-surface) !important;
    box-shadow: var(--am-shadow) !important;
    overflow: hidden !important;
  }
  body.task-mail.action-show #layout-content > .header {
    min-height: 50px !important;
    padding: 0 14px !important;
    border-bottom: 1px solid var(--am-border) !important;
    background: var(--am-surface) !important;
  }
  body.task-mail.action-show #mailtoolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
  }
  body.task-mail.action-show #mailtoolbar a { border-radius: 9px !important; }
  body.task-mail.action-show #layout-content .content.frame-content {
    margin: 0 !important;
    padding: 22px 26px 40px !important;
    background: var(--am-surface) !important;
  }
  body.task-mail.action-show #message-header {
    max-width: 1120px;
    margin: 0 auto 24px !important;
  }
  body.task-mail.action-show #message-header h2.subject {
    margin: 0 0 24px !important;
    color: var(--am-text) !important;
    font-size: clamp(22px, 2.2vw, 34px) !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }
  body.task-mail.action-show #message-header > .header {
    border: 0 !important;
    background: transparent !important;
  }
  body.task-mail.action-show #message-content {
    max-width: 1120px;
    margin: 0 auto !important;
  }
  body.task-mail.action-show #message-content .rightcol { min-width: 0 !important; }
  body.task-mail.action-show #messagebody { color: var(--am-text) !important; }

  #arpymail-message-tabs {
    min-height: 45px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    overflow-x: auto;
    border-bottom: 1px solid var(--am-border);
    background: var(--am-bg);
  }
  .arpymail-message-pill {
    height: 30px;
    max-width: 270px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    padding: 0 5px 0 10px;
    border: 1px solid var(--am-border);
    border-radius: 16px;
    background: var(--am-surface);
  }
  .arpymail-message-pill.active { border-color: var(--am-accent); box-shadow: inset 0 0 0 1px var(--am-accent); }
  .arpymail-message-pill a {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--am-text) !important;
    font-size: 11px;
    text-decoration: none !important;
  }
  .arpymail-message-pill button {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--am-muted);
    cursor: pointer;
  }
  .arpymail-message-pill button:hover { background: var(--am-hover); color: var(--am-text); }

  /* Settings/addressbook/compose retain Elastic mechanics, receive only chrome spacing. */
  body.task-settings #layout,
  body.task-addressbook #layout,
  body.task-mail.action-compose #layout { top: 64px !important; height: calc(100% - 64px) !important; }
}

/* ------------------------------------------------------------
   New-mail in-page toast. Native OS/browser notification remains native.
   ------------------------------------------------------------ */
#arpymail-newmail-toast {
  position: fixed;
  z-index: 9999;
  right: 20px;
  bottom: 20px;
  width: min(360px, calc(100vw - 32px));
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 13px 15px;
  border: 1px solid var(--am-border);
  border-radius: 14px;
  background: var(--am-surface);
  color: var(--am-text);
  box-shadow: 0 14px 34px rgba(20, 20, 28, .18);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
#arpymail-newmail-toast.visible { opacity: 1; transform: translateY(0); }
.arpymail-toast-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--am-accent-soft);
  color: var(--am-accent);
}
#arpymail-newmail-toast strong,
#arpymail-newmail-toast span { display: block; }
#arpymail-newmail-toast > div > span { margin-top: 2px; color: var(--am-muted); font-size: 12px; }

/* Markdown button: do not alter its command; only make the generated control visible. */
.markdown-editor-start-button.arpymail-markdown-visible {
  min-width: 34px !important;
  width: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
}
.markdown-editor-start-button.arpymail-markdown-visible:after {
  content: "M↓";
  display: inline-block;
  padding: 0 4px;
  color: currentColor;
  font-size: 12px;
  font-weight: 800;
  line-height: 24px;
}
.markdown-editor-start-button.arpymail-markdown-visible svg { display: none !important; }

/* ------------------------------------------------------------
   Mobile: preserve Elastic's native navigation and interaction model.
   ArpyMail only themes it; desktop structural overrides are disabled.
   ------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  #arpymail-chrome,
  #arpymail-compose-shortcut,
  #arpymail-sidebar-shortcuts,
  #arpymail-message-tabs { display: none !important; }

  body #layout,
  body.task-settings #layout,
  body.task-addressbook #layout,
  body.task-mail.action-compose #layout {
    top: 0 !important;
    height: 100% !important;
  }

  #layout-menu { background: var(--am-surface) !important; }
  #layout-sidebar,
  #layout-list,
  #layout-content {
    background: var(--am-surface) !important;
    color: var(--am-text) !important;
    border-color: var(--am-border) !important;
  }

  body.task-mail #mailsearchform {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: .5rem !important;
    border-radius: 20px !important;
    background: var(--am-surface-2) !important;
  }

  body.task-mail #messagelist tbody tr { min-height: 52px !important; }
  body.task-mail #messagelist td.subject { min-width: 0 !important; }
  body.task-mail #messagelist td.subject .arpymail-sender-avatar { display: none !important; }
  body.task-mail #messagelist td.subject > span.fromto,
  body.task-mail #messagelist td.subject > span.subject,
  body.task-mail #messagelist td.subject > span.date {
    width: auto !important;
    max-width: 100% !important;
  }
  .arpymail-preview-snippet { display: none !important; }

  body.task-mail.action-show #layout-content .content.frame-content { padding: 14px !important; }
  body.task-mail.action-show #message-header h2.subject { font-size: 22px !important; }

  #arpymail-newmail-toast { right: 12px; bottom: 12px; }
}


/* ============================================================
   ArpyMail 1.5.0 — isolation/stability + Yahoo-style refinements
   All visual rules live in this skin. Elastic is never modified.
   ============================================================ */

/* Child/iframe preferences pages never inherit the desktop topbar offset. */
@media screen and (min-width: 769px) {
  html.iframe body #layout,
  html.iframe body.task-settings #layout,
  html.iframe body.task-addressbook #layout,
  html.iframe body.task-mail #layout {
    top: 0 !important;
    height: 100% !important;
  }

  .arpymail-chrome-icon {
    display: grid;
    place-items: center;
    text-decoration: none !important;
  }

  /* Wide Yahoo inbox: Elastic's default max-width:30% was the reason the
     message list stayed in a narrow column even with the preview hidden. */
  html[data-arpymail-mail-layout="yahoo"] body.task-mail:not(.action-show):not(.action-compose) #layout-list {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  /* Left rail spacing now reserves room for Contacts, Settings and ... */
  html[data-arpymail-mail-layout="yahoo"] body.task-mail:not(.action-compose) #folderlist-content {
    bottom: 174px !important;
  }

  #arpymail-sidebar-shortcuts {
    bottom: 8px !important;
    gap: 1px !important;
  }

  #arpymail-sidebar-shortcuts .arpymail-side-shortcut {
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  #arpymail-sidebar-shortcuts .arpymail-side-shortcut.more .dots {
    font-size: 16px;
    letter-spacing: 2px;
    transform: translateX(1px);
  }

  .arpymail-sidebar-more-menu {
    position: absolute;
    z-index: 1600;
    left: 84px;
    bottom: 2px;
    width: 210px;
    padding: 7px;
    border: 1px solid var(--am-border);
    border-radius: 14px;
    background: var(--am-surface);
    box-shadow: 0 14px 34px rgba(20,20,28,.18);
  }
  .arpymail-sidebar-more-menu[hidden] { display: none !important; }
  .arpymail-sidebar-more-menu a,
  .arpymail-sidebar-more-menu button {
    width: 100%;
    min-height: 38px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--am-text) !important;
    font: inherit;
    text-align: left;
    text-decoration: none !important;
    cursor: pointer;
  }
  .arpymail-sidebar-more-menu a:hover,
  .arpymail-sidebar-more-menu button:hover { background: var(--am-hover); }

  /* ----------------------------------------------------------
     Full message view: keep exactly the same folder rail as Inbox.
     The native task menu remains in the DOM (for native commands) but is
     visually hidden on desktop. Mobile continues to use Elastic navigation.
     ---------------------------------------------------------- */
  body.task-mail.action-show #layout-menu { display: none !important; }
  body.task-mail.action-show #layout-sidebar {
    display: flex !important;
    flex: 0 0 96px !important;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    position: relative !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }
  body.task-mail.action-show #layout-sidebar > .header,
  body.task-mail.action-show #layout-sidebar > .footer { display: none !important; }
  body.task-mail.action-show #folderlist-content {
    position: absolute !important;
    top: 70px !important;
    right: 0 !important;
    bottom: 174px !important;
    left: 0 !important;
    padding: 0 6px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  body.task-mail.action-show #mailboxlist {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  body.task-mail.action-show #mailboxlist li { width: 100% !important; margin: 0 !important; }
  body.task-mail.action-show #mailboxlist a {
    min-height: 56px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 5px 3px !important;
    border-radius: 10px !important;
    color: var(--am-muted) !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }
  body.task-mail.action-show #mailboxlist li.selected > a,
  body.task-mail.action-show #mailboxlist a:hover {
    background: var(--am-selected) !important;
    color: var(--am-text) !important;
  }
  body.task-mail.action-show #mailboxlist a:before {
    margin: 0 !important;
    font-size: 20px !important;
  }
  body.task-mail.action-show #mailboxlist .unreadcount {
    position: absolute;
    transform: translate(22px, -15px);
    min-width: 17px;
    padding: 1px 4px;
    border-radius: 9px;
    background: var(--am-accent);
    color: #fff;
    font-size: 9px;
    line-height: 14px;
  }

  body.task-mail.action-show #layout-content {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 8px 14px 12px 7px !important;
  }

  body.task-mail.action-show #layout-content > .header.arpymail-message-toolbar {
    min-height: 54px !important;
    height: 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 0 14px !important;
    overflow: visible !important;
  }

  body.task-mail.action-show .arpymail-back-mail {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 78px;
    height: 36px;
    padding: 0 12px !important;
    border-radius: 10px !important;
    background: var(--am-hover) !important;
    color: var(--am-text) !important;
    text-decoration: none !important;
  }
  body.task-mail.action-show .arpymail-back-mail:before { margin-right: 6px !important; }
  body.task-mail.action-show .arpymail-back-mail .inner {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: nowrap !important;
  }

  body.task-mail.action-show #mailtoolbar {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    overflow: visible !important;
  }
  body.task-mail.action-show #mailtoolbar > a,
  body.task-mail.action-show #mailtoolbar > span.dropbutton,
  body.task-mail.action-show #mailtoolbar > span.spacer,
  body.task-mail.action-show #mailtoolbar > .button {
    display: inline-flex !important;
  }
  body.task-mail.action-show #mailtoolbar a {
    min-width: 38px !important;
    height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    color: var(--am-muted) !important;
  }
  body.task-mail.action-show #mailtoolbar a:hover { background: var(--am-hover) !important; color: var(--am-text) !important; }
  body.task-mail.action-show #mailtoolbar a.disabled { opacity: .42 !important; }
  body.task-mail.action-show #mailtoolbar .inner { white-space: nowrap; }

  #arpymail-message-tabs {
    padding-left: 14px !important;
    background: var(--am-surface-2) !important;
  }

  /* ----------------------------------------------------------
     Settings: same ArpyMail surfaces instead of the stock Elastic columns.
     ---------------------------------------------------------- */
  html:not(.iframe) body.task-settings #layout-menu { display: none !important; }
  html:not(.iframe) body.task-settings #layout {
    top: 64px !important;
    height: calc(100% - 64px) !important;
    padding: 8px 14px 12px !important;
    gap: 10px;
    background: var(--am-bg) !important;
  }
  html:not(.iframe) body.task-settings #layout-sidebar {
    flex: 0 0 220px !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    border: 1px solid var(--am-border) !important;
    border-radius: var(--am-radius) !important;
    background: var(--am-surface) !important;
    box-shadow: var(--am-shadow) !important;
    overflow: hidden !important;
  }
  html:not(.iframe) body.task-settings #layout-list {
    flex: 0 0 290px !important;
    width: 290px !important;
    min-width: 290px !important;
    max-width: 290px !important;
    border: 1px solid var(--am-border) !important;
    border-radius: var(--am-radius) !important;
    background: var(--am-surface) !important;
    box-shadow: var(--am-shadow) !important;
    overflow: hidden !important;
  }
  html:not(.iframe) body.task-settings #layout-content {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    border: 1px solid var(--am-border) !important;
    border-radius: var(--am-radius) !important;
    background: var(--am-surface) !important;
    box-shadow: var(--am-shadow) !important;
    overflow: hidden !important;
  }
  html:not(.iframe) body.task-settings #layout > div > .header {
    min-height: 52px !important;
    height: 52px !important;
    line-height: 52px !important;
    background: var(--am-surface) !important;
    border-bottom: 1px solid var(--am-border) !important;
  }
  html:not(.iframe) body.task-settings .listing li,
  html:not(.iframe) body.task-settings .listing tr { border-color: var(--am-border) !important; }
  html:not(.iframe) body.task-settings .listing a,
  html:not(.iframe) body.task-settings .listing td {
    color: var(--am-text) !important;
  }
  html:not(.iframe) body.task-settings .listing li.selected,
  html:not(.iframe) body.task-settings .listing tr.selected,
  html:not(.iframe) body.task-settings .listing li:hover,
  html:not(.iframe) body.task-settings .listing tr:hover { background: var(--am-selected) !important; }
  html:not(.iframe) body.task-settings #preferences-frame { background: var(--am-surface) !important; }

  /* Address book gets the same card treatment without changing mechanics. */
  html:not(.iframe) body.task-addressbook #layout {
    padding: 8px 14px 12px !important;
    gap: 10px;
    background: var(--am-bg) !important;
  }
}

/* ------------------------------------------------------------
   Login — Yahoo-inspired, no app topbar and no Roundcube logo block.
   ------------------------------------------------------------ */
body.task-login {
  min-width: 0 !important;
  overflow: auto !important;
  background: var(--am-bg) !important;
}
body.task-login #arpymail-chrome { display: none !important; }
#arpymail-login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr);
  background: var(--am-bg);
}
.arpymail-login-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 34px 7vw 70px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 15%, rgba(var(--am-accent-rgb), .12), transparent 32%),
    radial-gradient(circle at 72% 70%, rgba(var(--am-accent-rgb), .10), transparent 30%),
    var(--am-bg);
}
.arpymail-login-hero:after {
  content: "";
  position: absolute;
  width: 440px;
  height: 440px;
  left: 22%;
  bottom: -210px;
  border: 70px solid rgba(var(--am-accent-rgb), .08);
  border-radius: 50%;
}
.arpymail-login-brand {
  display: inline-flex;
  align-items: baseline;
  width: max-content;
  color: var(--am-text);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1.4px;
  text-decoration: none;
}
.arpymail-login-brand span,
.arpymail-login-brand b { color: var(--am-accent); }
.arpymail-login-brand b { font-style: italic; padding: 0 1px; }
.arpymail-login-brand strong { color: var(--am-text); }
.arpymail-login-brand.mobile { display: none; }
.arpymail-login-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: auto 0;
}
.arpymail-login-hero-copy h2 {
  margin: 0;
  color: var(--am-text);
  font-size: clamp(46px, 5.2vw, 76px);
  line-height: .98;
  letter-spacing: -3px;
  font-weight: 800;
}
.arpymail-login-hero-copy p {
  margin: 24px 0 0;
  color: var(--am-muted);
  font-size: 18px;
}
.arpymail-login-panel {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 30px;
  background: var(--am-surface);
}
.arpymail-login-card {
  width: min(390px, 100%);
  padding: 34px 30px;
}
.arpymail-login-card h2 {
  margin: 0;
  color: var(--am-text);
  font-size: 30px;
  line-height: 1.1;
  font-weight: 750;
  letter-spacing: -.7px;
}
.arpymail-login-subtitle {
  margin: 10px 0 26px;
  color: var(--am-muted);
  font-size: 14px;
}
.arpymail-login-form .form-group { margin-bottom: 13px !important; }
.arpymail-login-form input[type="text"],
.arpymail-login-form input[type="email"],
.arpymail-login-form input[type="password"] {
  width: 100% !important;
  height: 50px !important;
  border: 1px solid var(--am-border) !important;
  border-radius: 11px !important;
  padding: 0 14px !important;
  background: var(--am-surface) !important;
  color: var(--am-text) !important;
  box-shadow: none !important;
}
.arpymail-login-form input:focus {
  border-color: var(--am-accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--am-accent-rgb), .10) !important;
}
.arpymail-login-form button[type="submit"],
.arpymail-login-form input[type="submit"] {
  width: 100% !important;
  min-height: 48px !important;
  margin-top: 5px !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: var(--am-accent) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.arpymail-login-form button[type="submit"]:hover,
.arpymail-login-form input[type="submit"]:hover { filter: brightness(.96); }
#arpymail-login-shell #login-footer {
  margin-top: 22px !important;
  color: var(--am-faint) !important;
  font-size: 11px !important;
  text-align: center !important;
}

/* ------------------------------------------------------------
   Preference iframe + ArpyMail controls. These rules are part of the skin,
   not the plugin, so switching to Elastic restores Elastic untouched.
   ------------------------------------------------------------ */
html.iframe body.task-settings {
  overflow: auto !important;
  background: var(--am-surface) !important;
  color: var(--am-text) !important;
}
html.iframe body.task-settings #layout-content,
html.iframe body.task-settings .content,
html.iframe body.task-settings .formcontent {
  background: var(--am-surface) !important;
  color: var(--am-text) !important;
}
html.iframe body.task-settings .formcontent {
  max-width: 980px;
  margin: 0 auto;
  padding: 26px 28px 40px !important;
}
html.iframe body.task-settings fieldset,
html.iframe body.task-settings .propform {
  border-color: var(--am-border) !important;
}
html.iframe body.task-settings legend,
html.iframe body.task-settings h2,
html.iframe body.task-settings h3 { color: var(--am-text) !important; }

.arpymail-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--am-border);
  border-radius: 12px;
  background: var(--am-surface-2);
}
.arpymail-segment { margin: 0; cursor: pointer; }
.arpymail-segment input,
.arpymail-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.arpymail-segment span {
  display: block;
  min-width: 78px;
  padding: 7px 12px;
  text-align: center;
  border-radius: 9px;
  color: var(--am-muted);
  font-weight: 600;
}
.arpymail-segment input:checked + span {
  background: var(--am-surface);
  color: var(--am-accent);
  box-shadow: 0 1px 4px rgba(20,15,25,.12);
}
.arpymail-segment input:focus-visible + span { outline: 2px solid var(--am-accent); outline-offset: 2px; }
.arpymail-palette { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; padding: 4px 0; }
.arpymail-swatch {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 52px;
  margin: 0;
  cursor: pointer;
  color: var(--am-muted);
  font-size: 11px;
}
.arpymail-swatch-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.arpymail-swatch input:checked + .arpymail-swatch-dot { box-shadow: 0 0 0 3px var(--am-surface), 0 0 0 5px var(--swatch); }
.arpymail-swatch input:checked ~ .arpymail-swatch-name { color: var(--am-text); font-weight: 700; }

.arpymail-profile-editor {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  max-width: 720px;
  padding: 18px;
  border: 1px solid var(--am-border);
  border-radius: 16px;
  background: var(--am-surface-2);
}
.arpymail-profile-preview {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--am-accent);
  color: #fff;
  font-size: 36px;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.arpymail-profile-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arpymail-profile-copy { min-width: 0; }
.arpymail-profile-copy > strong { display: block; color: var(--am-text); font-size: 15px; }
.arpymail-profile-copy > p,
.arpymail-profile-identity p { margin: 5px 0 12px; color: var(--am-muted); font-size: 12px; line-height: 1.45; }
.arpymail-profile-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.arpymail-profile-actions .btn,
.arpymail-profile-identity .btn { border-radius: 10px !important; }
.arpymail-avatar-status { min-height: 18px; margin-top: 7px; color: var(--am-muted); font-size: 12px; }
.arpymail-avatar-status.error { color: #b42318; }
.arpymail-profile-identity { max-width: 720px; padding: 14px 16px; border: 1px solid var(--am-border); border-radius: 14px; background: var(--am-surface-2); }

@media screen and (max-width: 900px) {
  #arpymail-login-shell { grid-template-columns: 1fr; }
  .arpymail-login-hero { display: none; }
  .arpymail-login-panel { min-height: 100vh; padding: 22px; }
  .arpymail-login-card {
    padding: 30px 22px;
    border: 1px solid var(--am-border);
    border-radius: 18px;
    background: var(--am-surface);
    box-shadow: var(--am-shadow);
  }
  .arpymail-login-brand.mobile { display: inline-flex; margin-bottom: 34px; font-size: 24px; }
}

@media screen and (max-width: 768px) {
  /* The custom desktop folder rail on full-message view must not replace
     Elastic's proven phone navigation model. */
  body.task-mail.action-show #layout-sidebar { display: none !important; }
  body.task-mail.action-show #layout-menu { display: block !important; }
  body.task-mail.action-show #layout-content {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  body.task-mail.action-show .arpymail-back-mail { display: inline-flex !important; }

  .arpymail-profile-editor {
    grid-template-columns: 1fr;
    justify-items: start;
    padding: 14px;
  }
  .arpymail-profile-preview { width: 82px; height: 82px; }

  #arpymail-login-shell { min-height: 100dvh; }
  .arpymail-login-panel { min-height: 100dvh; }
}


/* ============================================================
   ArpyMail 1.5.1 — careful Yahoo-style inbox polish
   No Elastic files are modified; all rules are scoped to this skin.
   ============================================================ */

/* Roundcube text wordmark: Round = accent purple, cube = black/light text. */
.roundcube-wordmark {
  display: inline-flex !important;
  align-items: baseline !important;
  white-space: nowrap !important;
  font-weight: 800 !important;
  letter-spacing: -1.2px !important;
  text-decoration: none !important;
}
.roundcube-wordmark > span { color: var(--am-accent) !important; }
.roundcube-wordmark > strong { color: #17161c !important; font-weight: 800 !important; }
html.dark-mode .roundcube-wordmark > strong { color: #f4f2f7 !important; }

/* Bootstrap-5-like login input groups, using Roundcube's native markup. */
.arpymail-login-form .input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  margin: 0 0 14px !important;
}
.arpymail-login-form .input-group-prepend,
.arpymail-login-form .input-group-append {
  display: flex !important;
  margin: 0 !important;
}
.arpymail-login-form .input-group-text,
.arpymail-login-form .input-group .icon.input-group-text {
  min-width: 48px !important;
  width: 48px !important;
  min-height: 50px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 1px solid #ced4da !important;
  border-right: 0 !important;
  border-radius: .5rem 0 0 .5rem !important;
  background: #f8f9fa !important;
  color: #495057 !important;
  box-shadow: none !important;
}
html.dark-mode .arpymail-login-form .input-group-text,
html.dark-mode .arpymail-login-form .input-group .icon.input-group-text {
  border-color: #44414b !important;
  background: #25232b !important;
  color: #d7d2de !important;
}
.arpymail-login-form .input-group > input[type="text"],
.arpymail-login-form .input-group > input[type="email"],
.arpymail-login-form .input-group > input[type="password"] {
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
  height: 50px !important;
  margin: 0 !important;
  border: 1px solid #ced4da !important;
  border-radius: 0 .5rem .5rem 0 !important;
  padding: .75rem .9rem !important;
  background: var(--am-surface) !important;
  color: var(--am-text) !important;
  box-shadow: none !important;
}
.arpymail-login-form .input-group:focus-within .input-group-text {
  border-color: var(--am-accent) !important;
  box-shadow: -2px 0 0 2px rgba(var(--am-accent-rgb), .08) !important;
}
.arpymail-login-form .input-group:focus-within > input {
  border-color: var(--am-accent) !important;
  box-shadow: 2px 0 0 2px rgba(var(--am-accent-rgb), .08) !important;
}

@media screen and (min-width: 769px) {
  /* Keep folders visually clean: no inherited row separators or focus sliver. */
  html[data-arpymail-mail-layout="yahoo"] body.task-mail:not(.action-compose) #mailboxlist li,
  html[data-arpymail-mail-layout="yahoo"] body.task-mail:not(.action-compose) #mailboxlist li > a {
    border: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
  }
  html[data-arpymail-mail-layout="yahoo"] body.task-mail:not(.action-compose) #mailboxlist li > a:after {
    display: none !important;
    content: none !important;
  }

  /* Compose is a stable FAB above the folders, like Yahoo Mail. */
  #arpymail-compose-shortcut {
    position: absolute !important;
    z-index: 20 !important;
    top: 8px !important;
    left: 21px !important;
    margin: 0 !important;
    box-shadow: 0 4px 12px rgba(var(--am-accent-rgb), .16) !important;
  }

  /* Give the search/header some breathing room; list starts below it. */
  html[data-arpymail-mail-layout="yahoo"] body.task-mail:not(.action-show):not(.action-compose) #layout-list {
    margin-top: 28px !important;
  }

  /* Yahoo-like global search: roomy input, sliders button, dedicated search button. */
  body.task-mail:not(.action-show):not(.action-compose) #mailsearchform {
    width: min(690px, 48vw) !important;
    overflow: visible !important;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #mailsearchform input {
    padding-left: 20px !important;
    padding-right: 92px !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #mailsearchform:hover,
  body.task-mail:not(.action-show):not(.action-compose) #mailsearchform:focus-within {
    background: var(--am-surface) !important;
    border-color: rgba(var(--am-accent-rgb), .24) !important;
    box-shadow: 0 2px 10px rgba(20, 18, 26, .08) !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #mailsearchform .arpymail-search-options,
  body.task-mail:not(.action-show):not(.action-compose) #mailsearchform [data-popup="searchmenu"],
  body.task-mail:not(.action-show):not(.action-compose) #mailsearchform .options {
    position: absolute !important;
    z-index: 2 !important;
    right: 44px !important;
    top: 4px !important;
    width: 34px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    color: var(--am-muted) !important;
    cursor: pointer !important;
    text-decoration: none !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #mailsearchform .arpymail-search-options:hover,
  body.task-mail:not(.action-show):not(.action-compose) #mailsearchform [data-popup="searchmenu"]:hover,
  body.task-mail:not(.action-show):not(.action-compose) #mailsearchform .options:hover {
    background: var(--am-hover) !important;
    color: var(--am-text) !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #mailsearchform .arpymail-search-options .inner,
  body.task-mail:not(.action-show):not(.action-compose) #mailsearchform [data-popup="searchmenu"] .inner,
  body.task-mail:not(.action-show):not(.action-compose) #mailsearchform .options .inner {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #mailsearchform .arpymail-search-options:before,
  body.task-mail:not(.action-show):not(.action-compose) #mailsearchform [data-popup="searchmenu"]:before,
  body.task-mail:not(.action-show):not(.action-compose) #mailsearchform .options:before {
    content: "☷" !important;
    margin: 0 !important;
    font-family: Arial, sans-serif !important;
    font-size: 17px !important;
    line-height: 1 !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #mailsearchform button[type="submit"],
  body.task-mail:not(.action-show):not(.action-compose) #mailsearchform .search {
    position: absolute !important;
    right: 3px !important;
    top: 3px !important;
    width: 36px !important;
    height: 34px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: transparent !important;
    color: var(--am-text) !important;
    cursor: pointer !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #mailsearchform:hover button[type="submit"],
  body.task-mail:not(.action-show):not(.action-compose) #mailsearchform:focus-within button[type="submit"],
  body.task-mail:not(.action-show):not(.action-compose) #mailsearchform:hover .search,
  body.task-mail:not(.action-show):not(.action-compose) #mailsearchform:focus-within .search {
    background: var(--am-accent) !important;
    color: #fff !important;
  }

  /* Native Roundcube advanced search menu, presented as a modern popover. */
  body.task-mail #searchmenu.searchoptions {
    position: fixed !important;
    z-index: 1700 !important;
    top: 58px !important;
    left: 154px !important;
    width: min(650px, calc(100vw - 210px)) !important;
    max-height: min(560px, calc(100vh - 86px)) !important;
    padding: 10px !important;
    border: 1px solid var(--am-border) !important;
    border-radius: 16px !important;
    background: var(--am-surface) !important;
    color: var(--am-text) !important;
    box-shadow: 0 18px 42px rgba(20, 20, 28, .18) !important;
  }
  body.task-mail #searchmenu.searchoptions .formcontent { padding: 12px 14px !important; }
  body.task-mail #searchmenu.searchoptions .formbuttons {
    display: flex !important;
    justify-content: flex-end !important;
    padding: 10px 14px 12px !important;
  }
  body.task-mail #searchmenu.searchoptions .btn-primary {
    border-color: var(--am-accent) !important;
    background: var(--am-accent) !important;
    color: #fff !important;
    border-radius: 18px !important;
    padding-inline: 20px !important;
  }

  /* Inbox toolbar: native controls, Yahoo-style layout. */
  body.task-mail:not(.action-show):not(.action-compose) #messagelist-header {
    min-height: 52px !important;
    height: 52px !important;
    padding: 0 16px 0 18px !important;
    overflow: visible !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist-header > .toolbar.menu {
    flex: 1 1 auto !important;
    width: 100% !important;
    gap: 8px !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist-header > .toolbar.menu > .options,
  body.task-mail:not(.action-show):not(.action-compose) #messagelist-header > .toolbar.menu > a.options {
    display: inline-flex !important;
    margin-left: auto !important;
    min-width: 36px !important;
    height: 36px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 18px !important;
    color: var(--am-muted) !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist-header > .toolbar.menu > .options:hover,
  body.task-mail:not(.action-show):not(.action-compose) #messagelist-header > .toolbar.menu > a.options:hover {
    background: var(--am-hover) !important;
    color: var(--am-text) !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist-header > .refresh {
    margin-left: 6px !important;
  }

  #arpymail-selection-summary {
    min-width: 74px;
    color: var(--am-text);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
  }
  #arpymail-selection-summary[hidden] { display: none !important; }

  /* Move Roundcube's real message action toolbar into the inbox header.
     Only native commands remain: archive/spam plugins keep working. */
  body.task-mail:not(.action-show):not(.action-compose) #messagelist-header .arpymail-inbox-actions {
    flex: 0 0 auto !important;
    display: none !important;
    align-items: center !important;
    gap: 3px !important;
    margin-left: 8px !important;
    overflow: visible !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist-header.arpymail-has-selection .arpymail-inbox-actions {
    display: flex !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist-header.arpymail-has-selection > .toolbar.menu > .options,
  body.task-mail:not(.action-show):not(.action-compose) #messagelist-header.arpymail-has-selection > .refresh {
    display: none !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) .arpymail-inbox-actions .compose,
  body.task-mail:not(.action-show):not(.action-compose) .arpymail-inbox-actions .reply,
  body.task-mail:not(.action-show):not(.action-compose) .arpymail-inbox-actions .reply-all,
  body.task-mail:not(.action-show):not(.action-compose) .arpymail-inbox-actions .forward,
  body.task-mail:not(.action-show):not(.action-compose) .arpymail-inbox-actions .print,
  body.task-mail:not(.action-show):not(.action-compose) .arpymail-inbox-actions .prev,
  body.task-mail:not(.action-show):not(.action-compose) .arpymail-inbox-actions .next,
  body.task-mail:not(.action-show):not(.action-compose) .arpymail-inbox-actions > .spacer {
    display: none !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) .arpymail-inbox-actions a,
  body.task-mail:not(.action-show):not(.action-compose) .arpymail-inbox-actions .button {
    min-width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 18px !important;
    color: var(--am-muted) !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) .arpymail-inbox-actions a:hover {
    background: var(--am-hover) !important;
    color: var(--am-text) !important;
  }

  /* Checkbox cell and modern checkbox. */
  body.task-mail:not(.action-show):not(.action-compose) #messagelist td.selection {
    width: 48px !important;
    min-width: 48px !important;
    padding: 0 6px 0 18px !important;
    text-align: left !important;
    cursor: default !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist td.selection input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    border: 1.5px solid #7c7a82 !important;
    border-radius: 2px !important;
    background: var(--am-surface) !important;
    vertical-align: middle !important;
    cursor: default !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist td.selection input[type="checkbox"]:checked {
    border-color: var(--am-accent) !important;
    background-color: var(--am-accent) !important;
    background-image: linear-gradient(135deg, transparent 43%, #fff 43% 52%, transparent 52%),
                      linear-gradient(45deg, transparent 32%, #fff 32% 42%, transparent 42%) !important;
  }

  /* A mail row opens on click; only selection controls keep the arrow cursor. */
  body.task-mail:not(.action-show):not(.action-compose) #messagelist tr.message td:not(.selection),
  body.task-mail:not(.action-show):not(.action-compose) #messagelist tr.message td.subject,
  body.task-mail:not(.action-show):not(.action-compose) #messagelist tr.message td.subject * {
    cursor: pointer !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist tr.message td.selection,
  body.task-mail:not(.action-show):not(.action-compose) #messagelist tr.message td.selection * {
    cursor: default !important;
  }

  /* More separation between checkbox and sender avatar. */
  body.task-mail:not(.action-show):not(.action-compose) #messagelist td.subject {
    padding-left: 8px !important;
    gap: 13px !important;
  }

  /* Compact centered pager: previous / text / next. */
  body.task-mail:not(.action-show):not(.action-compose) .pagenav {
    gap: 3px !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) .pagenav .prevpage,
  body.task-mail:not(.action-show):not(.action-compose) .pagenav .nextpage {
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    margin: 0 !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) .pagenav .pagenav-text {
    flex: 0 0 auto !important;
    min-width: 158px !important;
    margin: 0 3px !important;
  }

  /* Account dropdown links and buttons share the same reliable full-row design. */
  .arpymail-account-menu > a,
  .arpymail-account-menu > button {
    width: 100% !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 11px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--am-text) !important;
    text-align: left !important;
    text-decoration: none !important;
    cursor: pointer !important;
  }
  .arpymail-account-menu > a:hover,
  .arpymail-account-menu > button:hover { background: var(--am-hover) !important; }
  .arpymail-account-menu > button.logout { color: #c62828 !important; }

  /* Message view: force the native Back button and native mail toolbar visible. */
  body.task-mail.action-show #layout-content > .header.arpymail-message-toolbar,
  body.task-mail.action-show #layout-content > .header {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  body.task-mail.action-show .back-list-button.arpymail-back-mail {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  body.task-mail.action-show #mailtoolbar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* ============================================================
   ArpyMail 1.5.2 — login alignment + inbox geometry + previews
   ============================================================ */

/* The Elastic login form carries generous spacing of its own. Keep the
   complete login cluster centered and remove that inherited vertical gap. */
body.task-login .arpymail-login-panel {
  align-items: center !important;
  justify-items: center !important;
}
body.task-login .arpymail-login-card {
  transform: translateY(-18px);
}
body.task-login #login-form,
body.task-login .arpymail-login-form {
  margin: 22px 0 0 !important;
  padding: 0 !important;
}
body.task-login #login-form .propform,
body.task-login #login-form table,
body.task-login #login-form tbody,
body.task-login #login-form .formcontent {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.task-login #login-form .form-group:first-child,
body.task-login #login-form .input-group:first-child {
  margin-top: 0 !important;
}

@media screen and (min-width: 769px) {
  /* Reserve an honest desktop header band. Search ends at 53px; the native
     Roundcube list starts below it instead of visually sliding underneath. */
  body.task-mail:not(.action-compose) #layout {
    top: 76px !important;
    height: calc(100% - 76px) !important;
  }

  /* Roundcube wordmark is wider than the old ArpyMail wordmark. */
  .arpymail-brand {
    width: 146px !important;
    flex-basis: 146px !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #mailsearchform {
    left: 176px !important;
    width: min(690px, 46vw) !important;
  }
  body.task-mail #searchmenu.searchoptions {
    left: 176px !important;
  }

  /* Do not add a second offset inside the already-lowered #layout. */
  html[data-arpymail-mail-layout="yahoo"] body.task-mail:not(.action-show):not(.action-compose) #layout-list {
    margin-top: 0 !important;
  }

  /* Compose must never disappear behind the folder scroller. Fixed placement
     keeps the native command visible independently of Elastic's sidebar flow. */
  #arpymail-compose-shortcut {
    position: fixed !important;
    z-index: 1500 !important;
    top: 84px !important;
    left: 21px !important;
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  html[data-arpymail-mail-layout="yahoo"] body.task-mail:not(.action-show):not(.action-compose) #folderlist-content {
    top: 72px !important;
  }

  /* Native list header sits inside its card, never in the search/header band. */
  body.task-mail:not(.action-show):not(.action-compose) #messagelist-header {
    position: relative !important;
    top: 0 !important;
    margin: 0 !important;
  }

  /* Server-supplied previews are available on the very first inbox render. */
  body.task-mail:not(.action-show):not(.action-compose) .arpymail-preview-snippet {
    display: inline !important;
    color: var(--am-muted) !important;
    font-weight: 400 !important;
  }
}

@media screen and (max-width: 768px) {
  body.task-login .arpymail-login-card { transform: none; }
}


/* ============================================================
   ArpyMail 1.5.3 — precise login/search/list/hover fixes
   ============================================================ */

/* Elastic sets #login-form { top:20vh }. In the custom login card this creates
   the large dead gap seen above the credentials. ArpyMail owns only this skin,
   so neutralize it here without touching Elastic. */
body.task-login #login-form {
  top: 0 !important;
  position: relative !important;
}
body.task-login .arpymail-login-card {
  transform: none !important;
}
body.task-login .arpymail-login-subtitle {
  margin-bottom: 18px !important;
}
body.task-login .arpymail-login-mark {
  width: 54px;
  height: 54px;
  object-fit: contain;
  display: block;
  margin: 0 0 14px;
}
@media screen and (min-width: 901px) {
  body.task-login .arpymail-login-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 520px;
  }
  body.task-login .arpymail-login-mark { display: none; }
}

@media screen and (min-width: 769px) {
  /* The native Roundcube search form is physically moved by ArpyMail JS into
     #arpymail-chrome. Keep it in normal flex flow there — never on top of the
     message list. */
  #arpymail-chrome > #mailsearchform.arpymail-global-search {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    order: 2 !important;
    flex: 0 1 690px !important;
    width: min(690px, 48vw) !important;
    max-width: 690px !important;
    height: 42px !important;
    margin: 0 10px 0 8px !important;
  }
  #arpymail-chrome > .arpymail-chrome-spacer { order: 3 !important; }
  #arpymail-chrome > .arpymail-chrome-icon,
  #arpymail-chrome > .arpymail-account-wrap { order: 4 !important; }

  body.task-mail:not(.action-show):not(.action-compose) #layout {
    top: 64px !important;
    height: calc(100% - 64px) !important;
  }
  html[data-arpymail-mail-layout="yahoo"] body.task-mail:not(.action-show):not(.action-compose) #layout-list {
    margin-top: 28px !important;
  }

  /* The subject + snippet must always consume only the available center width. */
  body.task-mail:not(.action-show):not(.action-compose) #messagelist td.subject {
    position: relative !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist td.subject > span.subject {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist .arpymail-preview-snippet {
    display: inline !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Yahoo-like quick actions appear only on row hover/focus. Date yields the
     right-hand space while the controls are visible. */
  .arpymail-row-actions {
    position: absolute;
    z-index: 6;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px;
    border-radius: 9px;
    background: var(--am-hover);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .12s ease;
  }
  #messagelist tr.message:hover .arpymail-row-actions,
  #messagelist tr.message:focus-within .arpymail-row-actions {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  #messagelist tr.message:hover td.subject > span.date,
  #messagelist tr.message:focus-within td.subject > span.date {
    opacity: 0 !important;
  }
  #messagelist tr.message:hover td.subject > span.subject,
  #messagelist tr.message:focus-within td.subject > span.subject {
    padding-right: 170px !important;
  }
  .arpymail-row-actions button {
    width: 34px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--am-muted);
    font: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer !important;
  }
  .arpymail-row-actions button:hover {
    background: var(--am-surface) !important;
    color: var(--am-text) !important;
  }
}

@media screen and (max-width: 768px) {
  body.task-login #login-form { top: 0 !important; }
  body.task-login .arpymail-login-mark { display: block; }
}

/* ============================================================
   ArpyMail 1.5.4 — Yahoo typography + clean top chrome/list geometry
   ============================================================ */

:root {
  --am-font: "Yahoo Product Sans VF", "Yahoo Product Sans", "Helvetica Neue", Arial, sans-serif;
}

/* Use the supplied Roundcube mark in the top chrome instead of a text wordmark. */
@media screen and (min-width: 769px) {
  #arpymail-chrome .arpymail-brand {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 10px !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  #arpymail-chrome .arpymail-brand img {
    width: 40px !important;
    height: 40px !important;
    display: block !important;
    object-fit: contain !important;
  }

  /* Search is now moved as its complete native Roundcube shell, not just the
     inner form. This prevents the empty searchbar wrapper from occupying the
     top of #layout-list. */
  #arpymail-chrome > .arpymail-global-search-shell {
    position: relative !important;
    inset: auto !important;
    order: 2 !important;
    flex: 0 1 690px !important;
    width: min(690px, 48vw) !important;
    max-width: 690px !important;
    height: 42px !important;
    margin: 0 10px 0 4px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  #arpymail-chrome > .arpymail-global-search-shell#mailsearchform,
  #arpymail-chrome > .arpymail-global-search-shell #mailsearchform {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: 42px !important;
    margin: 0 !important;
  }
  #layout-list .arpymail-search-orphan,
  #layout-list > .searchbar:empty {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* The inbox card starts cleanly below the 64px app chrome. No search shell,
     no negative overlap, no toolbar climbing into the global search row. */
  body.task-mail:not(.action-show):not(.action-compose) #layout {
    top: 64px !important;
    height: calc(100% - 64px) !important;
    padding-top: 0 !important;
  }
  html[data-arpymail-mail-layout="yahoo"] body.task-mail:not(.action-show):not(.action-compose) #layout-list {
    margin: 8px 10px 8px 0 !important;
    min-width: 0 !important;
    height: calc(100% - 16px) !important;
    border: 1px solid var(--am-border) !important;
    border-radius: 16px !important;
    background: var(--am-surface) !important;
    overflow: hidden !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist-header {
    position: relative !important;
    z-index: 12 !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    flex: 0 0 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--am-border) !important;
    background: var(--am-surface) !important;
    overflow: visible !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist-content {
    margin: 0 !important;
    border: 0 !important;
    background: var(--am-surface) !important;
  }

  /* Sender typography requested by the user. */
  body.task-mail:not(.action-show):not(.action-compose) #messagelist td.subject > span.fromto {
    font-family: var(--am-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #626262 !important;
    line-height: 1.2 !important;
  }

  /* Subject + body preview share one constrained flex line. This fixes the
     previous inline-span ellipsis bug. */
  body.task-mail:not(.action-show):not(.action-compose) #messagelist td.subject > span.subject {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    font-family: var(--am-font) !important;
    font-size: 14px !important;
    font-weight: 450 !important;
    color: #626262 !important;
    line-height: 1.2 !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist .arpymail-subject-text {
    display: block !important;
    flex: 0 1 auto !important;
    min-width: 42px !important;
    max-width: 52% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #626262 !important;
    font-size: 14px !important;
    font-weight: 450 !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist .arpymail-preview-snippet {
    display: block !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #626262 !important;
    font-size: 14px !important;
    font-weight: 450 !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist td.subject > span.date {
    color: #626262 !important;
    font-family: var(--am-font) !important;
    font-size: 13px !important;
  }

  /* Unread remains visibly stronger but keeps the Yahoo-like sizing. */
  body.task-mail:not(.action-show):not(.action-compose) #messagelist tr.unread td.subject > span.fromto {
    font-weight: 700 !important;
  }
  body.task-mail:not(.action-show):not(.action-compose) #messagelist tr.unread .arpymail-subject-text {
    font-weight: 650 !important;
    color: var(--am-text) !important;
  }

  /* Row hover action tray: compact, neutral, Yahoo-like. */
  #messagelist tr.message:hover .arpymail-row-actions,
  #messagelist tr.message:focus-within .arpymail-row-actions {
    display: inline-flex !important;
  }
  .arpymail-row-actions {
    right: 12px !important;
    gap: 0 !important;
    padding: 2px 4px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--am-hover) !important;
    box-shadow: none !important;
  }
  .arpymail-row-actions button {
    width: 36px !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: 7px !important;
  }
  .arpymail-row-actions button svg {
    width: 19px !important;
    height: 19px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.6 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
  .arpymail-row-actions button[data-am-row-action="flag"] svg path,
  .arpymail-row-actions button[data-am-row-action="delete"] svg path {
    fill: none !important;
  }
  #messagelist tr.message:hover td.subject > span.subject,
  #messagelist tr.message:focus-within td.subject > span.subject {
    padding-right: 160px !important;
  }
}

html.dark-mode body.task-mail:not(.action-show):not(.action-compose) #messagelist td.subject > span.fromto,
html.dark-mode body.task-mail:not(.action-show):not(.action-compose) #messagelist .arpymail-subject-text,
html.dark-mode body.task-mail:not(.action-show):not(.action-compose) #messagelist .arpymail-preview-snippet,
html.dark-mode body.task-mail:not(.action-show):not(.action-compose) #messagelist td.subject > span.date {
  color: #c7c5cc !important;
}