/* Self-hosted so the interface never depends on fonts.googleapis.com being
   reachable, and so no third-party request is made from the mail client.
   Subsetted to the icons this skin uses (~54 KB). */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('../fonts/material-symbols-outlined-v6.woff2') format('woff2');
}

/* ==========================================================================
   Feza Logistics Mail — Gmail interface for Roundcube Elastic
   Loaded after styles.css; every rule here intentionally wins over the skin.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --g-blue:          #0b57d0;
  --g-blue-strong:   #0842a0;
  --g-chip:          #c2e7ff;
  --g-chip-text:     #001d35;
  --g-selected:      #d3e3fd;
  --g-red:           #d93025;
  --g-yellow:        #f9ab00;

  --g-text:          #1f1f1f;
  --g-text-soft:     #444746;
  --g-text-mute:     #5f6368;

  --g-surface:       #f8fafd;
  --g-card:          #ffffff;
  --g-hover:         #e9eef6;
  --g-hover-soft:    #f0f4f9;
  --g-read-row:      #f2f6fc;
  --g-line:          rgba(100,121,143,.16);
  --g-line-strong:   #dadce0;

  --g-shadow-row:    0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --g-shadow-pop:    0 1px 3px 0 rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15);
  --g-shadow-fab:    0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);

  --g-font:          'Google Sans', 'Product Sans', 'Roboto', 'Segoe UI', Arial, sans-serif;
  --g-body-font:     'Roboto', 'Segoe UI', Arial, sans-serif;

  --g-topbar:        64px;
  --g-nav:           256px;
  --g-nav-mini:      72px;
  --g-row:           40px;
}

html.dark-mode {
  --g-blue:          #a8c7fa;
  --g-blue-strong:   #d3e3fd;
  --g-chip:          #004a77;
  --g-chip-text:     #c2e7ff;
  --g-selected:      #004a77;
  --g-text:          #e3e3e3;
  --g-text-soft:     #c4c7c5;
  --g-text-mute:     #9aa0a6;
  --g-surface:       #1b1b1b;
  --g-card:          #1e1f20;
  --g-hover:         #2d2e30;
  --g-hover-soft:    #232427;
  --g-read-row:      #1a1a1a;
  --g-line:          rgba(232,234,237,.14);
  --g-line-strong:   #3c4043;
}

/* Material Symbols helper (icons injected from JS use this) */
.gms {
  font-family: 'Material Symbols Outlined';
  font-feature-settings: 'liga';
  font-weight: normal; font-style: normal;
  font-size: 20px; line-height: 1;
  letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; word-wrap: normal;
  direction: ltr; -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  user-select: none;
}
.gms.fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; }
.gms-14 { font-size: 14px } .gms-16 { font-size: 16px }
.gms-18 { font-size: 18px } .gms-20 { font-size: 20px } .gms-22 { font-size: 22px } .gms-24 { font-size: 24px }
.gms-40 { font-size: 40px }

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
body.task-mail, body.task-settings, body.task-addressbook {
  font-family: var(--g-body-font);
  color: var(--g-text);
  background: var(--g-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: rgba(100,121,143,.32);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(100,121,143,.55); }
::-webkit-scrollbar-corner { background: transparent; }

/* Elastic's own task rail is replaced by the top bar + navigation drawer */
body.task-mail #layout-menu,
body.task-settings #layout-menu,
body.task-addressbook #layout-menu { display: none !important; }

/* --------------------------------------------------------------------------
   3. Top bar
   -------------------------------------------------------------------------- */
#feza-topbar {
  position: fixed; inset: 0 0 auto 0;
  height: var(--g-topbar);
  display: flex; align-items: center;
  gap: 4px; padding: 0 16px;
  background: var(--g-surface);
  z-index: 1200;
}
#feza-topbar.scrolled { box-shadow: inset 0 -1px 0 var(--g-line); }

.feza-iconbtn {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--g-text-soft);
  cursor: pointer; padding: 0;
  transition: background-color .12s ease;
}
.feza-iconbtn:hover { background: rgba(60,64,67,.08); color: var(--g-text); }
html.dark-mode .feza-iconbtn:hover { background: rgba(232,234,237,.1); }
.feza-iconbtn:active { background: rgba(60,64,67,.16); }
.feza-iconbtn[aria-expanded="true"] { background: rgba(60,64,67,.12); }

#feza-brand {
  display: flex; align-items: center; gap: 8px;
  min-width: 0; margin-right: 8px;
  text-decoration: none; color: inherit;
}
#feza-brand img { height: 34px; width: auto; display: block; }
#feza-brand span {
  font-family: var(--g-font);
  font-size: 22px; color: var(--g-text-mute); letter-spacing: -.2px;
  white-space: nowrap;
}

#feza-search {
  position: relative;
  flex: 1 1 auto; max-width: 720px;
  height: 48px; margin: 0 8px;
  display: flex; align-items: center;
  background: #e9eef6; border-radius: 8px;
  transition: background-color .1s ease, box-shadow .1s ease, border-radius .1s ease;
}
html.dark-mode #feza-search { background: #2f3033; }
#feza-search.focused {
  background: var(--g-card);
  box-shadow: 0 1px 1px 0 rgba(65,69,73,.3), 0 1px 3px 1px rgba(65,69,73,.15);
}
#feza-search .feza-iconbtn { width: 48px; height: 48px; }
#feza-search input {
  flex: 1 1 auto; min-width: 0;
  height: 46px; border: 0; outline: 0; background: transparent;
  font-family: var(--g-body-font); font-size: 16px; color: var(--g-text);
  padding: 0 8px;
}
#feza-search input::placeholder { color: var(--g-text-mute); }

#feza-topbar .feza-spacer { flex: 1 1 auto; }

#feza-avatar {
  width: 32px; height: 32px; margin-left: 8px;
  border-radius: 50%; border: 0; cursor: pointer;
  color: #fff; font-family: var(--g-font); font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 4px transparent;
  transition: box-shadow .12s ease;
}
#feza-avatar:hover { box-shadow: 0 0 0 6px rgba(60,64,67,.08); }

/* Search filter sheet ---------------------------------------------------- */
#feza-searchpanel {
  position: absolute; top: 52px; left: 0; right: 0;
  background: var(--g-card);
  border-radius: 8px;
  box-shadow: var(--g-shadow-pop);
  padding: 16px 24px 20px;
  display: none; z-index: 20;
}
#feza-searchpanel.open { display: block; }
#feza-searchpanel .row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
#feza-searchpanel label { flex: 0 0 96px; text-align: right; font-size: 13px; color: var(--g-text-soft); }
#feza-searchpanel input, #feza-searchpanel select {
  flex: 1 1 auto; height: 32px; padding: 0 8px;
  border: 0; border-bottom: 1px solid var(--g-line-strong);
  background: transparent; color: var(--g-text); font-size: 14px; outline: 0;
}
#feza-searchpanel input:focus { border-bottom-color: var(--g-blue); }
#feza-searchpanel .actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 16px; }

.feza-btn {
  height: 36px; padding: 0 24px;
  border: 0; border-radius: 18px; cursor: pointer;
  font-family: var(--g-font); font-size: 14px; font-weight: 500;
  background: var(--g-blue); color: #fff;
}
html.dark-mode .feza-btn { color: #062e6f; }
.feza-btn:hover { background: var(--g-blue-strong); }
.feza-btn.ghost { background: transparent; color: var(--g-blue); }
.feza-btn.ghost:hover { background: rgba(11,87,208,.08); }

/* Popovers --------------------------------------------------------------- */
.feza-pop {
  position: fixed; z-index: 1400;
  min-width: 220px; padding: 8px 0;
  background: var(--g-card);
  border-radius: 8px; box-shadow: var(--g-shadow-pop);
  display: none;
}
.feza-pop.open { display: block; }
.feza-pop .head { padding: 12px 20px 16px; text-align: center; border-bottom: 1px solid var(--g-line); }
.feza-pop .head .big {
  width: 72px; height: 72px; margin: 0 auto 10px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--g-font); font-size: 30px;
}
.feza-pop .head .name { font-size: 14px; font-weight: 500; }
.feza-pop .head .mail { font-size: 13px; color: var(--g-text-mute); }
.feza-pop button.item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  height: 40px; padding: 0 20px; border: 0; background: transparent;
  font-family: var(--g-body-font); font-size: 14px; color: var(--g-text);
  cursor: pointer; text-align: left;
}
.feza-pop button.item:hover { background: var(--g-hover-soft); }
.feza-pop button.item .gms { color: var(--g-text-soft); }

/* --------------------------------------------------------------------------
   4. Application frame
   -------------------------------------------------------------------------- */
body.task-mail #layout,
body.task-settings #layout,
body.task-addressbook #layout {
  padding-top: var(--g-topbar);
  background: var(--g-surface);
  gap: 0;
}

/* Navigation drawer ------------------------------------------------------- */
body.task-mail #layout-sidebar:not(.sidebar-right),
body.task-settings #layout-sidebar:not(.sidebar-right),
body.task-addressbook #layout-sidebar:not(.sidebar-right) {
  flex: 0 0 var(--g-nav);
  width: var(--g-nav); min-width: var(--g-nav); max-width: var(--g-nav);
  background: transparent; border: 0;
  padding: 8px 0 0;
}
body.feza-nav-mini #layout-sidebar:not(.sidebar-right) {
  flex-basis: var(--g-nav-mini); width: var(--g-nav-mini);
  min-width: var(--g-nav-mini); max-width: var(--g-nav-mini);
}

/* The skin's cramped sidebar header is replaced by the compose button */
#layout-sidebar:not(.sidebar-right) > .header { display: none !important; }

#feza-compose {
  display: flex; align-items: center; gap: 12px;
  height: 56px; margin: 8px 8px 16px 8px; padding: 0 24px 0 16px;
  border: 0; border-radius: 16px; cursor: pointer;
  background: var(--g-chip); color: var(--g-chip-text);
  font-family: var(--g-font); font-size: 14px; font-weight: 500;
  box-shadow: var(--g-shadow-fab);
  transition: box-shadow .15s ease, background-color .15s ease;
  white-space: nowrap;
}
#feza-compose:hover { box-shadow: var(--g-shadow-pop); background: #b3ddff; }
html.dark-mode #feza-compose:hover { background: #005b91; }
body.feza-nav-mini #feza-compose { padding: 0; width: 56px; justify-content: center; }
body.feza-nav-mini #feza-compose .label { display: none; }

#layout-sidebar:not(.sidebar-right) #folderlist-content { padding: 0 8px 0 0; }

body.task-mail #mailboxlist,
body.task-mail #mailboxlist li { background: transparent; border: 0; }

body.task-mail #mailboxlist li > a {
  display: flex; align-items: center;
  height: 32px; padding: 0 12px 0 26px;
  border-radius: 0 16px 16px 0;
  font-family: var(--g-body-font); font-size: 14px; font-weight: 400;
  color: var(--g-text); text-decoration: none;
  line-height: 32px;
}
body.task-mail #mailboxlist li > a:hover { background: var(--g-hover); }
body.task-mail #mailboxlist li.selected > a,
body.task-mail #mailboxlist li > a.selected {
  background: var(--g-selected); color: var(--g-chip-text); font-weight: 700;
}
html.dark-mode body.task-mail #mailboxlist li.selected > a { color: var(--g-chip-text); }

body.task-mail #mailboxlist li > a::before {
  font-family: 'Material Symbols Outlined';
  font-size: 20px; font-weight: normal;
  width: 20px; margin-right: 18px; flex: 0 0 20px;
  color: var(--g-text-soft);
  font-variation-settings: 'FILL' 0;
}
body.task-mail #mailboxlist li.selected > a::before { color: var(--g-chip-text); font-variation-settings: 'FILL' 1; }
html.dark-mode body.task-mail #mailboxlist li.selected > a::before { color: var(--g-chip-text); }

body.task-mail #mailboxlist li.inbox    > a::before { content: 'inbox'; }
body.task-mail #mailboxlist li.drafts   > a::before { content: 'draft'; }
body.task-mail #mailboxlist li.sent     > a::before { content: 'send'; }
body.task-mail #mailboxlist li.trash    > a::before { content: 'delete'; }
body.task-mail #mailboxlist li.junk     > a::before { content: 'report'; }
body.task-mail #mailboxlist li.archive  > a::before { content: 'archive'; }
body.task-mail #mailboxlist li > a::before { content: 'folder'; }

body.task-mail #mailboxlist li > a .name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body.task-mail #mailboxlist li > a .unreadcount {
  flex: 0 0 auto; margin-left: 8px;
  font-size: 12px; font-weight: 700; color: var(--g-text);
  background: transparent; padding: 0; min-width: 0;
}
body.task-mail #mailboxlist li.unread > a { font-weight: 700; }
body.feza-nav-mini #mailboxlist li > a { padding-left: 18px; }
body.feza-nav-mini #mailboxlist li > a .name,
body.feza-nav-mini #mailboxlist li > a .unreadcount { display: none; }

#layout-sidebar:not(.sidebar-right) .footer.small {
  border: 0; background: transparent;
  padding: 8px 26px 12px; font-size: 12px; color: var(--g-text-mute);
}
#layout-sidebar:not(.sidebar-right) .footer.small .quota-widget { justify-content: flex-start; }

/* --------------------------------------------------------------------------
   5. Message list panel
   -------------------------------------------------------------------------- */
body.task-mail #layout-list {
  flex: 1 1 auto; width: auto; max-width: none;
  background: var(--g-card);
  border: 0; border-radius: 16px 0 0 0;
  overflow: hidden;
  min-width: 0;
}


/* list toolbar */
body.task-mail #messagelist-header {
  height: 48px; min-height: 48px;
  border: 0; background: transparent;
  padding: 0 4px 0 12px;
  display: flex; align-items: center; gap: 2px;
}
body.task-mail #messagelist-header .header-title,
body.task-mail #messagelist-header .task-menu-button,
body.task-mail #messagelist-header .back-sidebar-button,
body.task-mail #messagelist-header .toolbar-menu-button { display: none !important; }

body.task-mail #messagelist-header ul.menu.toolbar,
body.task-mail #messagelist-header .toolbar.menu {
  display: flex; align-items: center; gap: 2px;
  background: transparent; border: 0; padding: 0; margin: 0; list-style: none;
}
body.task-mail #messagelist-header a.toolbar-list-button,
body.task-mail #messagelist-header a.toolbar-menu-button { display: none !important; }

/* select-all checkbox injected before the toolbar */
#feza-selectall {
  flex: 0 0 auto; width: 20px; height: 20px; margin: 0 12px 0 8px;
  accent-color: var(--g-blue); cursor: pointer;
}

#feza-listnav {
  margin-left: auto; display: flex; align-items: center; gap: 2px;
  padding-right: 8px; font-size: 12px; color: var(--g-text-mute);
  white-space: nowrap;
}
#feza-listnav .count { margin-right: 8px; }
#feza-listnav .feza-iconbtn[disabled] { opacity: .3; pointer-events: none; }

/* the skin's own pagination footer is superseded by the header controls */
body.task-mail #layout-list > .pagenav.footer { display: none !important; }

/* search bar inside the list panel is replaced by the top bar search */
body.task-mail #layout-list > .searchbar,
body.task-mail #layout-list #mailsearchform { display: none !important; }

/* rows -------------------------------------------------------------------- */
body.task-mail #messagelist-content { background: var(--g-card); }
body.task-mail table#messagelist { background: var(--g-card); border: 0; }
body.task-mail table#messagelist thead { display: none; }
body.task-mail table#messagelist,
body.task-mail table#messagelist tbody { display: block; width: 100%; }

body.task-mail table#messagelist { border-collapse: collapse; border-spacing: 0; }
body.task-mail #messagelist tbody tr.message {
  display: flex; align-items: center;
  width: 100%; height: var(--g-row); min-height: var(--g-row); max-height: var(--g-row);
  margin: 0; padding: 0 16px 0 0;
  border: 0; box-shadow: inset 0 -1px 0 var(--g-line);
  background: var(--g-read-row);
  cursor: pointer;
  position: relative;
}
body.task-mail #messagelist tbody tr.message.unread { background: var(--g-card); }
body.task-mail #messagelist tbody tr.message:hover {
  box-shadow: inset 1px 0 0 var(--g-line-strong), inset -1px 0 0 var(--g-line-strong), var(--g-shadow-row);
  z-index: 2;
}
body.task-mail #messagelist tbody tr.message.selected,
body.task-mail #messagelist tbody tr.message.focused { background: var(--g-selected); }
html.dark-mode body.task-mail #messagelist tbody tr.message.selected,
html.dark-mode body.task-mail #messagelist tbody tr.message.focused { background: #263b57; }
html.dark-mode body.task-mail #messagelist tbody tr.message:hover {
  box-shadow: inset 1px 0 0 var(--g-line-strong), inset -1px 0 0 var(--g-line-strong), 0 1px 2px 0 rgba(0,0,0,.6);
}

body.task-mail #messagelist tbody tr.message > td {
  border: 0; padding: 0; background: transparent; height: auto;
  display: block; overflow: visible;
}

body.task-mail #messagelist tbody tr td.selection {
  flex: 0 0 40px; width: 40px; order: 0;
  display: flex !important; align-items: center; justify-content: center;
}
body.task-mail #messagelist tbody tr td.selection input {
  width: 18px; height: 18px; margin: 0; accent-color: var(--g-blue); cursor: pointer;
}

/* star */
body.task-mail #messagelist tbody tr td.flags {
  flex: 0 0 32px; width: 32px; order: 1;
  display: flex !important; align-items: center; justify-content: center;
}
body.task-mail #messagelist tbody tr td.flags .flag { display: block; width: 20px; height: 20px; }
body.task-mail #messagelist tbody tr td.flags .flag > span {
  display: block; width: 20px; height: 20px;
  font-size: 0; cursor: pointer; background: none;
}
body.task-mail #messagelist tbody tr td.flags .flag > span::before {
  font-family: 'Material Symbols Outlined'; font-feature-settings: 'liga';
  font-size: 18px; line-height: 20px;
  content: 'star'; color: #b8b8b8;
  font-variation-settings: 'FILL' 0;
}
body.task-mail #messagelist tbody tr td.flags .flag > span.flagged::before {
  content: 'star'; color: var(--g-yellow); font-variation-settings: 'FILL' 1;
}
body.task-mail #messagelist tbody tr td.flags .flag > span:hover::before { color: var(--g-text-soft); }

body.task-mail #messagelist tbody tr td.subject {
  flex: 1 1 auto; min-width: 0; order: 2;
  display: flex !important; align-items: center; gap: 0;
  flex-wrap: nowrap !important;
  overflow: hidden;
}

body.task-mail #messagelist tbody tr span.fromto {
  flex: 0 0 176px; width: 176px; order: 0;
  padding-right: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; color: var(--g-text-soft);
}
body.task-mail #messagelist tbody tr.unread span.fromto { color: var(--g-text); font-weight: 700; }

body.task-mail #messagelist tbody tr span.subject {
  flex: 1 1 auto; min-width: 0; order: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; color: var(--g-text-soft);
  padding-right: 12px;
}
body.task-mail #messagelist tbody tr.unread span.subject { color: var(--g-text); font-weight: 700; }
body.task-mail #messagelist tbody tr span.subject a { color: inherit; text-decoration: none; font-weight: inherit; }
body.task-mail #messagelist tbody tr span.subject .msgicon.status { display: none; }

/* conversation size badge injected by JS: "Sender (4)" */
body.task-mail #messagelist tbody tr .feza-thread-count {
  color: var(--g-text-mute); font-weight: 400; font-size: 13px; margin-left: 4px;
}

/* snippet injected by JS */
body.task-mail #messagelist tbody tr .feza-snippet {
  color: var(--g-text-mute); font-weight: 400;
}
body.task-mail #messagelist tbody tr .feza-snippet::before { content: ' - '; }

body.task-mail #messagelist tbody tr span.size { display: none !important; }

body.task-mail #messagelist tbody tr td.flags .attachment,
body.task-mail #messagelist tbody tr span.attachment {
  flex: 0 0 auto; order: 2;
  width: 20px; height: 20px; font-size: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none;
}
body.task-mail #messagelist tbody tr span.attachment > * { display: none; }
body.task-mail #messagelist tbody tr span.attachment::before {
  font-family: 'Material Symbols Outlined'; font-feature-settings: 'liga';
  font-size: 16px; content: '';
  color: var(--g-text-mute);
}
body.task-mail #messagelist tbody tr.feza-has-attachment span.attachment::before { content: 'attach_file'; }

body.task-mail #messagelist tbody tr span.date {
  flex: 0 0 76px; width: 76px; order: 3;
  text-align: right; font-size: 12px; color: var(--g-text-soft);
  overflow: hidden; white-space: nowrap;
}
body.task-mail #messagelist tbody tr.unread span.date { color: var(--g-text); font-weight: 700; }

/* hover actions replace the date, as in Gmail */
body.task-mail #messagelist tbody tr .feza-rowactions {
  display: none; flex: 0 0 auto; order: 4;
  align-items: center; gap: 2px;
}
body.task-mail #messagelist tbody tr:hover .feza-rowactions { display: flex; }
body.task-mail #messagelist tbody tr:hover span.date { display: none; }
body.task-mail #messagelist tbody tr .feza-rowactions button {
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: transparent; color: var(--g-text-soft); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
body.task-mail #messagelist tbody tr .feza-rowactions button:hover { background: rgba(60,64,67,.12); color: var(--g-text); }

/* empty list */
body.task-mail #messagelist td.empty-list {
  display: block; padding: 64px 0; text-align: center;
  color: var(--g-text-mute); font-size: 14px;
}

/* --------------------------------------------------------------------------
   6. Reading pane
   -------------------------------------------------------------------------- */
body.task-mail #layout { position: relative; }
body.task-mail #layout-content {
  background: var(--g-card);
  border: 0; border-radius: 16px 0 0 0;
  min-width: 0;
}
/* On the list page the reading pane covers the list, Gmail-style. It is never
   display:none, because Roundcube only loads a message into the preview frame
   while that frame is visible. */
body.task-mail.feza-has-list #layout-content {
  position: absolute;
  top: var(--g-topbar); left: var(--g-nav); right: 0; bottom: 0;
  width: auto !important; max-width: none !important; min-width: 0 !important;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none; z-index: 0;
  transition: opacity .1s ease;
}
body.task-mail.feza-has-list.feza-nav-mini #layout-content { left: var(--g-nav-mini); }
body.task-mail.feza-has-list.feza-reading #layout-content { opacity: 1; pointer-events: auto; z-index: 5; }

body.task-mail #layout-content > .header {
  height: 48px; min-height: 48px; border: 0;
  padding: 0 8px; display: flex; align-items: center; gap: 2px;
  justify-content: flex-start;
  background: transparent;
}
body.task-mail #layout-content > .header .header-title { display: none; }
body.task-mail #layout-content > .header .back-list-button {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  color: var(--g-text-soft); font-size: 0; flex: 0 0 auto;
}
body.task-mail #layout-content > .header .back-list-button:hover { background: rgba(60,64,67,.08); }
body.task-mail #layout-content > .header .back-list-button::before {
  font-family: 'Material Symbols Outlined'; font-feature-settings: 'liga';
  font-size: 20px; line-height: 1; content: 'arrow_back';
  margin: 0; width: auto; height: auto;
}
body.task-mail #layout-content > .header .back-list-button .inner { display: none; }

/* Toolbars — Elastic rebuilds every `.toolbar.menu` into `ul.menu.toolbar > li > a`
   at runtime, so both the list header and the reading pane are covered here. */
body.task-mail .header ul.menu.toolbar {
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0;
  background: transparent; border: 0;
}
body.task-mail .header ul.menu.toolbar > li { display: block; margin: 0; padding: 0; border: 0; background: none; }
body.task-mail .header ul.menu.toolbar > li.spacer { width: 8px; }
body.task-mail .header ul.menu.toolbar > li > a,
body.task-mail .header ul.menu.toolbar > li > .dropbutton > a,
body.task-mail #messagelist-header a.toolbar-button {
  width: 40px; height: 40px; padding: 0; margin: 0;
  display: inline-flex !important; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--g-text-soft); background: transparent;
  font-size: 0; border: 0; text-indent: 0;
}
body.task-mail .header ul.menu.toolbar > li > a:hover,
body.task-mail .header ul.menu.toolbar > li > .dropbutton > a:hover,
body.task-mail #messagelist-header a.toolbar-button:hover { background: rgba(60,64,67,.08); color: var(--g-text); }
html.dark-mode body.task-mail .header ul.menu.toolbar > li > a:hover { background: rgba(232,234,237,.1); }

body.task-mail .header ul.menu.toolbar a .inner,
body.task-mail #messagelist-header a.toolbar-button .inner { display: none !important; }

body.task-mail .header ul.menu.toolbar a::before,
body.task-mail #messagelist-header a.toolbar-button::before {
  font-family: 'Material Symbols Outlined' !important;
  font-feature-settings: 'liga'; font-size: 20px; font-weight: normal;
  color: inherit; margin: 0 !important; width: auto; height: auto; line-height: 1;
  text-indent: 0; opacity: 1;
}

body.task-mail .header ul.menu.toolbar a.select::before      { content: 'arrow_drop_down'; }
body.task-mail .header ul.menu.toolbar a.threads::before     { content: 'forum'; }
body.task-mail .header ul.menu.toolbar a.options::before     { content: 'more_vert'; }
body.task-mail .header ul.menu.toolbar a.reply::before       { content: 'reply'; }
body.task-mail .header ul.menu.toolbar a.reply-all::before   { content: 'reply_all'; }
body.task-mail .header ul.menu.toolbar a.forward::before     { content: 'forward'; }
body.task-mail .header ul.menu.toolbar a.delete::before      { content: 'delete'; }
body.task-mail .header ul.menu.toolbar a.print::before       { content: 'print'; }
body.task-mail .header ul.menu.toolbar a.markmessage::before { content: 'label'; }
body.task-mail .header ul.menu.toolbar a.more::before        { content: 'more_vert'; }
body.task-mail .header ul.menu.toolbar a.prev::before        { content: 'chevron_left'; }
body.task-mail .header ul.menu.toolbar a.next::before        { content: 'chevron_right'; }
body.task-mail .header ul.menu.toolbar a.archive::before     { content: 'archive'; }
body.task-mail .header ul.menu.toolbar a.junk::before        { content: 'report'; }
body.task-mail .header ul.menu.toolbar a.dropdown::before    { content: 'expand_more'; font-size: 16px; }
body.task-mail #messagelist-header a.refresh::before         { content: 'refresh'; }

body.task-mail .header ul.menu.toolbar .dropbutton { display: inline-flex; align-items: center; }
body.task-mail .header ul.menu.toolbar .dropbutton > a.dropdown { width: 22px; }
body.task-mail .header ul.menu.toolbar a.disabled { opacity: .3; pointer-events: none; }
body.task-mail .header ul.menu.toolbar li > a.hidden,
body.task-mail .header ul.menu.toolbar li > a.hidden-large,
body.task-mail .header ul.menu.toolbar li > a.hidden-big,
body.task-mail .header ul.menu.toolbar li > a.hidden-phone,
body.task-mail .header ul.menu.toolbar li:has(> a.hidden-large) { display: none !important; }

@media screen and (max-width: 1200px) {
  body.task-mail .header ul.menu.toolbar li > a.hidden-large,
  body.task-mail .header ul.menu.toolbar li:has(> a.hidden-large) { display: block !important; }
  body.task-mail .header ul.menu.toolbar li > a.hidden-large { display: inline-flex !important; }
}

body.task-mail #layout-content .iframe-wrapper { border: 0; background: var(--g-card); }
body.task-mail #layout-content iframe { background: var(--g-card); }

/* --------------------------------------------------------------------------
   7. Message view (rendered inside the reading frame)
   -------------------------------------------------------------------------- */
body.task-mail.action-show,
body.task-mail.action-preview { background: var(--g-card); }

body.task-mail.action-show #layout-content,
body.task-mail.action-preview #layout-content { background: var(--g-card); display: flex; }

body.task-mail.action-show .content.frame-content,
body.task-mail.action-preview .content.frame-content {
  padding: 0 0 64px; background: var(--g-card);
}

#message-header {
  padding: 20px 56px 0 24px; border: 0; background: transparent;
}
#message-header h2.subject {
  font-family: var(--g-font);
  font-size: 22px; font-weight: 400; line-height: 1.4;
  color: var(--g-text); margin: 0 0 18px; padding: 0;
  display: block; white-space: normal; overflow: visible;
}
#message-header h2.subject .extwin { display: none; }

#message-header > .header { display: block; border: 0; padding: 0; }

/* Gmail sender row */
.feza-msg-head { display: flex; align-items: center; gap: 16px; }
.feza-msg-head .who { flex: 1 1 auto; min-width: 0; }
.feza-msg-head .who .line { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.feza-msg-head .who .n { font-size: 14px; font-weight: 700; color: var(--g-text); }
.feza-msg-head .who .e { font-size: 12px; color: var(--g-text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feza-msg-head .who .to {
  display: inline-flex; align-items: center; gap: 2px;
  border: 0; background: transparent; cursor: pointer;
  padding: 0; margin-top: 1px;
  font-family: var(--g-body-font); font-size: 12px; color: var(--g-text-mute);
}
.feza-msg-head .who .to:hover { color: var(--g-text); }
.feza-msg-head .right { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
.feza-msg-head .right .when { font-size: 12px; color: var(--g-text-mute); margin-right: 8px; white-space: nowrap; }

/* Roundcube's own summary line is superseded by the row above */
body.feza-head-ready #message-header .contactphoto,
body.feza-head-ready #message-header .header-summary { display: none !important; }
body.feza-head-ready #message-header .header-content { margin-left: 56px; }
#message-header .contactphoto {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
  overflow: hidden; background: #c2c7cc;
}
#message-header .contactphoto img { width: 40px; height: 40px; object-fit: cover; }
#message-header .header-content { flex: 1 1 auto; min-width: 0; }

#message-header .header-summary,
#message-header .header-headers { font-size: 14px; color: var(--g-text); }
#message-header .header-headers td.header-title,
#message-header .header-headers .header-title { color: var(--g-text-mute); font-weight: 400; }
#message-header .header-links { margin-top: 4px; font-size: 12px; }
#message-header .header-links a { margin-right: 12px; }
#message-header .header-links a { color: var(--g-text-mute); text-decoration: none; }
#message-header .header-links a:hover { text-decoration: underline; }

#message-content { padding: 0; display: block; }
#message-content .leftcol, #message-content .rightcol { display: block; width: auto; float: none; padding: 0; }

#messagebody {
  padding: 16px 56px 8px 80px;
  font-family: var(--g-body-font); font-size: 14px; line-height: 1.5; color: var(--g-text);
  border: 0;
}
#messagebody .message-part, #messagebody .message-htmlpart { border: 0; padding: 0; }
#messagebody blockquote {
  border-left: 2px solid #ccc; margin: 0 0 0 .8ex; padding-left: 1ex; color: #5f6368;
}
#messagebody img { max-width: 100%; height: auto; }
#messagebody table { max-width: 100%; }

/* the skin's plain attachment list is replaced by Gmail-style cards, but only
   once those cards actually rendered -- if the conversation lookup fails the
   native list must stay visible */
body.feza-conv-ready #message-content .leftcol #attachment-list { display: none; }

/* --------------------------------------------------------------------------
   8. Conversation UI
   -------------------------------------------------------------------------- */
.feza-conv { padding: 0 56px 0 24px; }

.feza-conv-title {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 6px;
}
.feza-conv-count {
  font-size: 13px; color: var(--g-text-mute);
  padding: 1px 6px; border-radius: 10px; background: var(--g-hover-soft);
}

/* collapsed member row */
.feza-conv-row {
  display: flex; align-items: center; gap: 12px;
  height: 40px; padding: 0 8px 0 0;
  border-bottom: 1px solid var(--g-line);
  cursor: pointer; font-size: 14px; color: var(--g-text-soft);
}
.feza-conv-row:hover { background: var(--g-hover-soft); }
.feza-conv-row .who { flex: 0 0 auto; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--g-text); font-weight: 500; }
.feza-conv-row.unread .who { font-weight: 700; }
.feza-conv-row .snip { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--g-text-mute); }
.feza-conv-row .meta { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; color: var(--g-text-mute); font-size: 12px; }
.feza-conv-row .meta .gms { font-size: 16px; }
.feza-conv-row .avatar { flex: 0 0 32px; }

.feza-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--g-font); font-size: 14px; font-weight: 500;
  flex: 0 0 auto; user-select: none;
}
.feza-avatar.lg { width: 40px; height: 40px; font-size: 17px; }

/* expanded member */
.feza-conv-msg { border-bottom: 1px solid var(--g-line); padding: 16px 0 8px; }
.feza-conv-msg:last-child { border-bottom: 0; }
.feza-conv-msg .head { display: flex; align-items: flex-start; gap: 16px; }
.feza-conv-msg .head .who { flex: 1 1 auto; min-width: 0; }
.feza-conv-msg .head .who .n { font-size: 14px; font-weight: 700; color: var(--g-text); }
.feza-conv-msg .head .who .e { font-size: 12px; color: var(--g-text-mute); }
.feza-conv-msg .head .who .to { font-size: 12px; color: var(--g-text-mute); margin-top: 2px; }
.feza-conv-msg .head .when { flex: 0 0 auto; font-size: 12px; color: var(--g-text-mute); }
.feza-conv-msg .body { padding: 12px 0 0 56px; font-size: 14px; line-height: 1.5; }
.feza-conv-msg .body img { max-width: 100%; height: auto; }

/* attachment cards */
.feza-atts { padding: 12px 0 20px 56px; }
.feza-atts.wide { padding-left: 0; }
.feza-atts h3 {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--g-body-font); font-size: 13px; font-weight: 400;
  color: var(--g-text-mute); margin: 0 0 10px; padding: 12px 0 0;
  border-top: 1px solid var(--g-line);
}
.feza-atts.first h3 { border-top: 0; padding-top: 0; }
.feza-atts .grid { display: flex; flex-wrap: wrap; gap: 8px; }
.feza-atts.collapsed .grid { display: none; }
.feza-atts h3.toggle { cursor: pointer; user-select: none; }
.feza-atts h3.toggle:hover { color: var(--g-text); }
.feza-atts h3 .chev { transition: transform .12s ease; }
.feza-atts.collapsed h3 .chev { transform: rotate(-90deg); }

/* Gmail's attachment card: a preview panel with a name strip under it, and
   round actions that fade in over the preview on hover. */
.feza-att {
  display: flex; flex-direction: column;
  width: 178px; height: 132px;
  border: 1px solid var(--g-line-strong); border-radius: 6px;
  background: var(--g-card); color: inherit; text-decoration: none;
  overflow: hidden; position: relative;
}
.feza-att:hover { border-color: var(--g-text-mute); box-shadow: 0 1px 3px rgba(60,64,67,.24); }

.feza-att .thumb {
  flex: 1 1 auto; min-height: 0; position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.feza-att .thumb .watermark { display: flex; opacity: .55; }
.feza-att .thumb.has-thumb .watermark { display: none; }
.feza-att .thumb img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  display: block; background: #fff;
}
/* the PDF first page is drawn by the browser's own viewer, then shrunk in */
.feza-att .thumb iframe {
  position: absolute; top: 0; left: 0;
  width: 356px; height: 400px; transform: scale(.5); transform-origin: top left;
  border: 0; background: #fff; pointer-events: none;
}

.feza-att .foot {
  flex: 0 0 34px; display: flex; align-items: center; gap: 8px;
  padding: 0 8px; border-top: 1px solid var(--g-line);
  background: var(--g-card);
}
.feza-att .foot .ico {
  flex: 0 0 18px; width: 18px; height: 18px; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.feza-att .t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.feza-att .t > span { display: block; }
.feza-att .t .n { font-size: 12px; font-weight: 500; color: var(--g-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feza-att .t .s { font-size: 11px; color: var(--g-text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.feza-att .acts {
  position: absolute; top: 8px; right: 8px;
  display: flex; gap: 6px; opacity: 0; transition: opacity .1s ease;
}
.feza-att:hover .acts, .feza-att:focus-within .acts { opacity: 1; }
.feza-att .acts .act {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--g-card); color: var(--g-text-soft);
  box-shadow: 0 1px 3px rgba(60,64,67,.4); cursor: pointer;
}
.feza-att .acts .act:hover { background: var(--g-hover); color: var(--g-text); }

.feza-att-tools { display: flex; gap: 8px; margin-left: auto; }
.feza-att-tools button {
  border: 0; background: transparent; color: var(--g-blue);
  font-family: var(--g-font); font-size: 13px; cursor: pointer;
  padding: 4px 8px; border-radius: 4px;
}
.feza-att-tools button:hover { background: rgba(11,87,208,.08); }

/* reply / forward chips */
.feza-replybar { display: flex; gap: 12px; padding: 20px 0 24px 56px; }
.feza-replybar button {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 24px 0 16px;
  border: 1px solid var(--g-line-strong); border-radius: 18px;
  background: transparent; color: var(--g-text); cursor: pointer;
  font-family: var(--g-font); font-size: 14px;
}
.feza-replybar button:hover { background: var(--g-hover-soft); }

/* "N earlier messages" band */
.feza-conv-band {
  display: flex; align-items: center; gap: 12px;
  width: 100%; height: 40px; padding: 0 8px;
  border: 0; border-bottom: 1px solid var(--g-line);
  background: transparent; cursor: pointer;
  font-family: var(--g-body-font); font-size: 13px; color: var(--g-text-mute);
  text-align: left;
}
.feza-conv-band:hover { background: var(--g-hover-soft); color: var(--g-text); }
.feza-conv-band .dots {
  flex: 0 0 auto; width: 32px; height: 20px; border-radius: 10px;
  background: var(--g-hover); color: var(--g-text-soft);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; letter-spacing: 1px; line-height: 1;
}

.feza-conv-loading { padding: 12px 0; font-size: 13px; color: var(--g-text-mute); }
.feza-conv-error { padding: 8px 0; font-size: 13px; color: var(--g-red); }

/* --------------------------------------------------------------------------
   9. Compose
   -------------------------------------------------------------------------- */
body.task-mail.action-compose #layout-content { background: var(--g-card); border-radius: 16px 0 0 0; }
#compose-content { background: var(--g-card); }

#compose-content #messagetoolbar,
#composeview-bottom .formbuttons { background: transparent; border: 0; }

#compose-content .form-group.row { border-bottom: 1px solid var(--g-line); margin: 0; padding: 0; }
#compose-content .form-group.row > label { color: var(--g-text-mute); font-size: 14px; }
#compose-content input.form-control,
#compose-content .recipient-input { border: 0 !important; box-shadow: none !important; font-size: 14px; }

#composebody, .mce-content-body { font-family: var(--g-body-font); font-size: 14px; }

#compose-content .formbuttons .btn.btn-primary,
#composeview-bottom .btn.btn-primary {
  background: var(--g-blue); border: 0; border-radius: 18px;
  height: 36px; padding: 0 24px; font-family: var(--g-font); font-weight: 500;
}
#compose-content .formbuttons .btn.btn-primary:hover { background: var(--g-blue-strong); }

/* --------------------------------------------------------------------------
   10. Popup menus / dialogs
   -------------------------------------------------------------------------- */
.popupmenu, .ui-dialog {
  border: 0 !important; border-radius: 8px !important;
  box-shadow: var(--g-shadow-pop) !important;
  background: var(--g-card) !important;
}
.popupmenu ul.menu li > a {
  height: 40px; line-height: 40px; padding: 0 20px;
  font-family: var(--g-body-font); font-size: 14px; color: var(--g-text);
}
.popupmenu ul.menu li > a:hover { background: var(--g-hover-soft); }
.popupmenu ul.menu li > a.disabled { opacity: .38; }

#messagestack div.message {
  border-radius: 4px; background: #323232; color: #fff;
  font-family: var(--g-body-font); font-size: 14px;
  box-shadow: var(--g-shadow-pop); border: 0;
}

/* --------------------------------------------------------------------------
   11. Toast
   -------------------------------------------------------------------------- */
.feza-toast {
  position: fixed; left: 24px; bottom: 24px; z-index: 2000;
  display: flex; align-items: center; gap: 24px;
  min-height: 48px; padding: 0 16px;
  background: #323232; color: #fff; border-radius: 4px;
  font-size: 14px; box-shadow: var(--g-shadow-pop);
  animation: feza-toast-in .15s ease;
}
.feza-toast button {
  border: 0; background: transparent; color: #8ab4f8;
  font-family: var(--g-font); font-size: 14px; font-weight: 500; cursor: pointer;
  text-transform: uppercase;
}
@keyframes feza-toast-in { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

/* --------------------------------------------------------------------------
   12. Settings / Address book — light alignment only
   -------------------------------------------------------------------------- */
body.task-settings #layout-list,
body.task-addressbook #layout-list {
  background: var(--g-card); border: 0; border-radius: 16px 0 0 0;
  flex: 0 0 340px !important; width: 340px !important; max-width: 420px;
}
body.task-settings #layout-content,
body.task-addressbook #layout-content {
  background: var(--g-card); border: 0; border-left: 1px solid var(--g-line);
  flex: 1 1 auto !important; width: auto !important; max-width: none !important; min-width: 0;
}
body.task-settings .listing li > a,
body.task-addressbook .listing li > a { font-size: 14px; }

/* Section rail (Preferences / Folders / Identities / Responses) */
body.task-settings #layout-sidebar:not(.sidebar-right) .listing li > a,
body.task-addressbook #layout-sidebar:not(.sidebar-right) .listing li > a {
  display: flex; align-items: center; height: 32px; padding: 0 12px 0 26px;
  border-radius: 0 16px 16px 0; font-size: 14px; color: var(--g-text);
}
body.task-settings #layout-sidebar:not(.sidebar-right) .listing li.selected > a,
body.task-addressbook #layout-sidebar:not(.sidebar-right) .listing li.selected > a {
  background: var(--g-selected); color: var(--g-chip-text); font-weight: 700;
}

/* Settings panes keep their own headers and footers (Create folder, Save …) */
body.task-settings #layout-list > .header,
body.task-settings #layout-list > .footer,
body.task-settings #layout-content > .header,
body.task-addressbook #layout-list > .header,
body.task-addressbook #layout-list > .footer,
body.task-addressbook #layout-content > .header {
  display: flex !important; align-items: center; min-height: 48px;
  background: transparent; border: 0; padding: 0 8px;
}
body.task-settings #layout-list > .footer,
body.task-addressbook #layout-list > .footer { border-top: 1px solid var(--g-line) !important; }
body.task-settings .header .header-title,
body.task-addressbook .header .header-title {
  display: block !important; font-family: var(--g-font); font-size: 15px; color: var(--g-text);
  flex: 1 1 auto; min-width: 0; padding: 0 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* "Create" action that Elastic injects into list headers (folders, identities,
   responses, contacts). It was being pushed off-screen by the title. */
body.task-settings .header a.create,
body.task-addressbook .header a.create {
  flex: 0 0 auto; display: inline-flex !important; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px; margin-right: 4px;
  border-radius: 16px; background: var(--g-chip); color: var(--g-chip-text);
  font-family: var(--g-font); font-size: 13px; font-weight: 500; text-decoration: none;
}
body.task-settings .header a.create:hover,
body.task-addressbook .header a.create:hover { background: #b3ddff; }
html.dark-mode body.task-settings .header a.create:hover { background: #005b91; }

body.task-settings #layout-list > .header,
body.task-addressbook #layout-list > .header { gap: 4px; }

/* Settings forms */
body.task-settings .formcontent .propform tr td.title,
body.task-settings .form-group.row > label { color: var(--g-text-soft); font-size: 14px; }
body.task-settings .formbuttons .btn.btn-primary,
body.task-addressbook .formbuttons .btn.btn-primary {
  background: var(--g-blue); border: 0; border-radius: 18px; height: 36px; padding: 0 24px;
  font-family: var(--g-font); font-size: 14px; font-weight: 500;
}

/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1200px) {
  #feza-brand span { display: none; }
}
@media screen and (max-width: 900px) {
  body.task-mail #messagelist tbody tr span.fromto { flex-basis: 130px; width: 130px; }
  .feza-conv, #messagebody { padding-left: 16px; padding-right: 16px; }
  .feza-conv-msg .body, .feza-atts, .feza-replybar { padding-left: 0; }
}
@media screen and (max-width: 768px) {
  :root { --g-topbar: 56px; }
  #feza-brand span { display: none; }
  body.task-mail #layout-sidebar:not(.sidebar-right) { position: fixed; top: var(--g-topbar); bottom: 0; left: 0; z-index: 1100; background: var(--g-card); box-shadow: var(--g-shadow-pop); }
  body:not(.feza-nav-open) #layout-sidebar:not(.sidebar-right) { display: none; }
  body.task-mail #layout-list, body.task-mail #layout-content { border-radius: 0; }
  body.task-mail #messagelist tbody tr td.selection { flex-basis: 32px; width: 32px; }
  #feza-search { max-width: none; }
}


/* --------------------------------------------------------------------------
   14. Compose view
   -------------------------------------------------------------------------- */
body.task-mail.action-compose #layout-content { background: var(--g-card); border-radius: 16px 0 0 0; }

/* Toolbar icons above the compose form */
body.task-mail .header ul.menu.toolbar a.save::before       { content: 'save'; }
body.task-mail .header ul.menu.toolbar a.attach::before     { content: 'attach_file'; }
body.task-mail .header ul.menu.toolbar a.signature::before  { content: 'draw'; }
body.task-mail .header ul.menu.toolbar a.responses::before  { content: 'quickreply'; }
body.task-mail .header ul.menu.toolbar a.spellcheck::before { content: 'spellcheck'; }
body.task-mail .header ul.menu.toolbar a.encrypt::before    { content: 'lock'; }
body.task-mail .header ul.menu.toolbar a.options::before    { content: 'more_vert'; }

/* Options / attachments panel on the right */
body.task-mail #layout-sidebar.sidebar-right {
  background: var(--g-card); border-left: 1px solid var(--g-line);
}
body.task-mail #layout-sidebar.sidebar-right > .header {
  height: 48px; min-height: 48px; border: 0; background: transparent;
}
body.task-mail #layout-sidebar.sidebar-right .header-title { font-family: var(--g-font); font-size: 14px; color: var(--g-text-soft); }

#compose-content .compose-headers .form-group.row { align-items: center; min-height: 40px; }
#compose-content .compose-headers label { font-size: 14px; color: var(--g-text-mute); }
#compose-content #composebodycontainer { border: 0; }

#compose-content .formbuttons { padding: 12px 16px; border-top: 1px solid var(--g-line); }
#compose-content .formbuttons .btn.send,
#compose-content .btn.btn-primary.send {
  background: var(--g-blue); border: 0; border-radius: 18px;
  height: 36px; min-width: 96px; padding: 0 24px;
  font-family: var(--g-font); font-size: 14px; font-weight: 500; color: #fff;
}
#compose-content .btn.btn-primary.send:hover { background: var(--g-blue-strong); }

/* --------------------------------------------------------------------------
   15. Message header links — Gmail keeps this row out of the way
   -------------------------------------------------------------------------- */
body.feza-head-ready #message-header .header-links .headers-summary,
body.feza-head-ready #message-header .header-links .headers-all { display: none; }
body.feza-head-ready #message-header .header-links { margin-top: 2px; }
body.feza-head-ready #message-header .header-links a { color: var(--g-text-mute); font-size: 12px; }


/* --------------------------------------------------------------------------
   16. Attachment preview (lightbox)
   -------------------------------------------------------------------------- */
.feza-att.can-preview { cursor: zoom-in; }

.feza-lightbox {
  position: fixed; inset: 0; z-index: 3000;
  display: none; align-items: center; justify-content: center;
  background: rgba(32, 33, 36, .94);
}
.feza-lightbox.open { display: flex; }

.feza-lightbox .lb-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 64px;
  display: flex; align-items: center; gap: 16px; padding: 0 16px;
  color: #fff;
  background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0));
}
.feza-lightbox .lb-title { flex: 1 1 auto; min-width: 0; }
.feza-lightbox .lb-title .name {
  display: block; font-family: var(--g-font); font-size: 15px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.feza-lightbox .lb-title .meta { display: block; font-size: 12px; color: rgba(255,255,255,.7); }
.feza-lightbox .lb-tools { flex: 0 0 auto; display: flex; gap: 4px; }
.feza-lightbox .lb-tools .feza-iconbtn { color: #fff; }
.feza-lightbox .lb-tools .feza-iconbtn:hover { background: rgba(255,255,255,.14); color: #fff; }

.feza-lightbox .lb-stage {
  display: flex; align-items: center; justify-content: center;
  width: calc(100% - 160px); height: calc(100% - 120px);
  margin-top: 24px;
}
.feza-lightbox .lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; }
.feza-lightbox .lb-stage iframe { width: 100%; height: 100%; border: 0; background: #fff; border-radius: 4px; }

.feza-lightbox .lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.1); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.feza-lightbox .lb-nav:hover { background: rgba(255,255,255,.2); }
.feza-lightbox .lb-nav.prev { left: 16px; }
.feza-lightbox .lb-nav.next { right: 16px; }

/* --------------------------------------------------------------------------
   17. Docked composer
   -------------------------------------------------------------------------- */
.feza-dock {
  position: fixed; right: 24px; bottom: 0; z-index: 2500;
  width: 540px; height: 560px; max-width: calc(100vw - 32px); max-height: calc(100vh - 80px);
  display: flex; flex-direction: column;
  background: var(--g-card);
  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;
}
.feza-dock .dock-bar {
  flex: 0 0 auto; height: 40px;
  display: flex; align-items: center; gap: 8px; padding: 0 8px 0 16px;
  background: #404040; color: #fff; cursor: pointer;
}
html.dark-mode .feza-dock .dock-bar { background: #303030; }
.feza-dock .dock-bar .title {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--g-font); font-size: 14px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.feza-dock .dock-tools { flex: 0 0 auto; display: flex; }
.feza-dock .dock-tools .feza-iconbtn { width: 32px; height: 32px; color: #fff; }
.feza-dock .dock-tools .feza-iconbtn .gms { font-size: 18px; }
.feza-dock .dock-tools .feza-iconbtn:hover { background: rgba(255,255,255,.14); color: #fff; }
.feza-dock iframe { flex: 1 1 auto; width: 100%; border: 0; background: var(--g-card); }

.feza-dock.minimized { height: 40px; }
.feza-dock.minimized iframe { display: none; }

.feza-dock.full {
  right: 0; left: 0; top: 0; bottom: 0;
  width: auto; height: auto; max-width: none; max-height: none;
  margin: 24px auto; max-width: 1024px; border-radius: 8px;
}

@media screen and (max-width: 768px) {
  .feza-dock { right: 0; left: 0; width: auto; height: 100vh; max-height: 100vh; border-radius: 0; }
}

/* --------------------------------------------------------------------------
   18. Compose — Gmail window: footer bar, attachment chips, drag & drop
   -------------------------------------------------------------------------- */

/* Inside the dock the page is the message, not the whole application */
body.feza-docked #layout-menu,
body.feza-docked #layout-content > .header,
body.feza-docked #feza-topbar,
body.feza-docked #layout-content .formbuttons a.extwin { display: none !important; }

/* Gmail has no options rail: everything lives behind the footer's kebab */
body.feza-compose-ui #layout-sidebar.sidebar-right { display: none !important; }

/* ...and no toolbar above the form either. Attach, signature, options and now
   save-draft all live in the footer, so the bar was 48px of writing area spent
   on duplicates. slimComposeChrome() withholds the class when the account has
   text responses, whose button has no footer equivalent. */
body.feza-compose-ui.feza-slim-compose #layout-content > .header { display: none !important; }
/* one identity means the From row can only ever say one thing */
body.feza-compose-ui.feza-one-identity #compose-headers #compose_from { display: none !important; }

body.feza-docked #layout { padding: 0; }
body.feza-docked #layout-content { border-radius: 0; margin: 0; box-shadow: none; }
body.feza-docked #compose-content { padding: 0; }
body.feza-docked #compose-content .compose-headers .form-group.row { min-height: 40px; }

/* the options panel slides in only when the footer's kebab asks for it */
body.feza-compose-ui.feza-opts-open #layout-sidebar.sidebar-right {
  display: flex !important;
  position: absolute; right: 0; top: 0; bottom: 56px; width: 300px; z-index: 20;
  box-shadow: -2px 0 8px rgba(60,64,67,.2);
}

/* Footer ------------------------------------------------------------------ */
body.feza-compose-ui #compose-content { display: flex; flex-direction: column; }
/* a laptop screen has no 48px to spare above and below the composer; the dock
   keeps its own padding: 0, hence the :not() rather than a later override */
body.feza-compose-ui:not(.feza-docked) #compose-content {
  padding-top: 12px; padding-bottom: 12px;
}
body.feza-compose-ui #compose-content > form { flex: 1 1 auto; min-height: 0; }
body.feza-compose-ui #compose-content .formbuttons.feza-native-buttons { display: none !important; }
/* Elastic clones Save/Send into a narrow-screen action bar; ours replaces it */
body.feza-compose-ui #layout-content > .footer.content-frame-navigation { display: none !important; }
body.feza-compose-ui #rcmbtn111-clone { display: none !important; }

#feza-compose-foot {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 4px;
  padding: 8px 16px; border-top: 1px solid var(--g-line);
  background: var(--g-card);
}
#feza-compose-foot .feza-send {
  background: var(--g-blue); border: 0; border-radius: 18px;
  height: 36px; min-width: 88px; padding: 0 24px;
  font-family: var(--g-font); font-size: 14px; font-weight: 500; color: #fff;
  cursor: pointer;
}
#feza-compose-foot .feza-send:hover { background: var(--g-blue-strong); box-shadow: 0 1px 3px rgba(60,64,67,.3); }
#feza-compose-foot .tools { display: flex; align-items: center; gap: 2px; margin-left: 8px; }
#feza-compose-foot .right { display: flex; align-items: center; gap: 2px; margin-left: auto; }
#feza-compose-foot .feza-iconbtn.ct { width: 36px; height: 36px; color: var(--g-text-soft); }
#feza-compose-foot .feza-iconbtn.ct:hover { background: var(--g-hover); color: var(--g-text); }

/* Attachment chips under the body ----------------------------------------- */
/* The chips sit between the message and the send row, so every pixel they
   take is a pixel taken off the writing area. On a tall window they get their
   two rows; on a short one they collapse to a single scrollable row so the
   editor always keeps roughly 200px to type in. */
#feza-att-strip {
  flex: 0 0 auto;
  padding: 8px 16px; overflow-y: auto;
  max-height: 50px;   /* one row; 8 + 34 + 8 */
  border-top: 1px solid var(--g-line);
}
/* Inline images -- a reply quote's cid: pictures, the sender's signature
   logos, anything dropped in with the image button -- are part of the message
   body, not files the writer chose to send. Gmail never chips them, and here
   they filled the strip and squeezed the writing area away. Hide the chip, and
   the whole strip once nothing but inline images is left. */
#feza-att-strip li.feza-inline-att { display: none !important; }
#feza-att-strip:not(:has(li)) { display: none; }
#feza-att-strip:not(:has(li:not(.feza-inline-att))) { display: none; }
#feza-att-strip ul:empty { display: none; }

#feza-att-strip ul.attachmentslist {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
#feza-att-strip ul.attachmentslist li {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 8px;
  height: 34px; max-width: 300px; padding: 0 4px 0 8px;
  border: 1px solid var(--g-line-strong); border-radius: 4px;
  background: var(--g-card); font-size: 13px;
}
#feza-att-strip ul.attachmentslist li .chip-ico {
  flex: 0 0 18px; width: 18px; height: 18px; border-radius: 2px;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
#feza-att-strip ul.attachmentslist li a.filename {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  color: var(--g-text); text-decoration: none;
}
#feza-att-strip .attachment-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#feza-att-strip .attachment-size { color: var(--g-text-mute); flex: 0 0 auto; }

#feza-att-strip ul.attachmentslist li a.delete,
#feza-att-strip ul.attachmentslist li a.cancelupload {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--g-text-mute); text-decoration: none; font-size: 0;
}
#feza-att-strip ul.attachmentslist li a.delete::before,
#feza-att-strip ul.attachmentslist li a.cancelupload::before {
  font-family: 'Material Symbols Outlined'; content: 'close'; font-size: 16px;
}
#feza-att-strip ul.attachmentslist li a.delete:hover,
#feza-att-strip ul.attachmentslist li a.cancelupload:hover { background: var(--g-hover); color: var(--g-text); }
#feza-att-strip ul.attachmentslist li a.delete img,
#feza-att-strip ul.attachmentslist li img.uploading { display: none; }
/* Elastic's per-attachment "Options" menu and its own file icon are both
   superseded by the badge and the X */
#feza-att-strip ul.attachmentslist li a.drop,
#feza-att-strip ul.attachmentslist li button.drop,
#feza-att-strip ul.attachmentslist li a.dropdown { display: none !important; }
#feza-att-strip ul.attachmentslist li::before,
#feza-att-strip ul.attachmentslist li a.filename::before { display: none !important; content: none !important; }

/* upload in flight: Gmail runs a progress line under the chip */
#feza-att-strip ul.attachmentslist li.uploading::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 40%;
  background: var(--g-blue); animation: fezaUp 1.1s ease-in-out infinite;
}
@keyframes fezaUp { 0% { left: -40% } 100% { left: 100% } }

/* Two rows of chips once the window can spare them, so the strip never ends
   mid-chip: 455px is what the rest of the composer needs before the editor is
   down to its last ~200px. */
@media (min-height: 547px) {
  #feza-att-strip { max-height: 92px; }
}

/* Drag & drop overlay ------------------------------------------------------ */
#feza-drop {
  position: fixed; inset: 0; z-index: 2400; display: none;
  align-items: center; justify-content: center;
  background: rgba(232, 240, 254, .92);
  border: 2px dashed var(--g-blue); border-radius: 8px;
}
body.feza-dropping #feza-drop { display: flex; }
#feza-drop .inner { text-align: center; color: var(--g-blue); font-family: var(--g-font); }
#feza-drop .big { font-size: 20px; font-weight: 500; margin-top: 8px; }
#feza-drop .small { font-size: 13px; color: var(--g-text-mute); margin-top: 4px; }

/* --------------------------------------------------------------------------
   19. @mentions
   -------------------------------------------------------------------------- */
.feza-mentions {
  position: fixed; z-index: 3200; min-width: 300px; max-width: 380px;
  max-height: 288px; overflow-y: auto; padding: 6px 0;
  background: var(--g-card); border-radius: 8px; box-shadow: var(--g-shadow-pop);
}
.feza-mentions .mention {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 16px; cursor: pointer;
}
.feza-mentions .mention.on { background: var(--g-hover-soft); }
.feza-mentions .mention .txt { min-width: 0; display: flex; flex-direction: column; }
.feza-mentions .mention .n {
  font-family: var(--g-body-font); font-size: 14px; color: var(--g-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.feza-mentions .mention .e {
  font-size: 12px; color: var(--g-text-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* the chip left behind in the message body */
a.feza-mention {
  color: var(--g-blue); text-decoration: none;
  background: rgba(11,87,208,.08); border-radius: 3px; padding: 0 3px;
}
a.feza-mention:hover { background: rgba(11,87,208,.16); }

/* --------------------------------------------------------------------------
   20. Attachment viewer extras (zoom rail + filmstrip)
   -------------------------------------------------------------------------- */
.feza-lightbox .lb-zoom { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; color: #fff; }
.feza-lightbox .lb-zoom .feza-iconbtn { color: #fff; }
.feza-lightbox .lb-zoom .feza-iconbtn:hover { background: rgba(255,255,255,.14); color: #fff; }
.feza-lightbox .lb-zoom .lvl { font-size: 12px; min-width: 44px; text-align: center; color: rgba(255,255,255,.85); }

.feza-lightbox .lb-stage img { transition: transform .12s ease; }
.feza-lightbox .lb-stage img.zoomed { cursor: grab; }
.feza-lightbox .lb-stage.panning img { cursor: grabbing; transition: none; }

.feza-lightbox .lb-strip {
  position: absolute; left: 0; right: 0; bottom: 0; height: 88px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 16px; overflow-x: auto;
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.55));
}
.feza-lightbox .lb-thumb {
  flex: 0 0 auto; width: 56px; height: 56px; padding: 0;
  border: 2px solid transparent; border-radius: 4px;
  background: rgba(255,255,255,.12); cursor: pointer;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.feza-lightbox .lb-thumb.on { border-color: #fff; }
.feza-lightbox .lb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.feza-lightbox .lb-stage { margin-bottom: 40px; }

/* --------------------------------------------------------------------------
   21. Formatting bar — Gmail parks it under the message, above the send row
   -------------------------------------------------------------------------- */

/* The toolbar element is lifted out of the editor and parked above the send
   row, so it stays put while the message scrolls. */
/* The toolbar stays where TinyMCE put it — its event system is bound to the
   editor root, so moving the element elsewhere makes every button inert.
   Reversing the container's flex direction drops it to the bottom instead. */
body.feza-compose-ui #composebodycontainer .tox-editor-container {
  display: flex; flex-direction: column-reverse;
}
body.feza-compose-ui #composebodycontainer .tox-editor-header {
  position: static !important;
  border-top: 1px solid var(--g-line); border-bottom: 0; box-shadow: none;
  padding: 0 8px;
}
body:not(.feza-format-on) #composebodycontainer .tox-editor-header { display: none; }

/* the editor is a fixed box that scrolls its own content, so the toolbar and
   the send row below it never leave the window */
body.feza-compose-ui #compose-content > form {
  display: flex; flex-direction: column; overflow: hidden;
}
body.feza-compose-ui #compose-content #compose-headers { flex: 0 0 auto; }
/* flex-basis 0 + min-height 0 so the editor SHRINKS when the attachment strip
   appears. With min-height:180px it kept its size, overflowed the form (which
   is overflow:hidden) and the chips painted over the last lines of the message
   while the formatting bar was clipped out of the window entirely. */
body.feza-compose-ui #composebodycontainer {
  flex: 1 1 0; min-height: 0; height: auto;
}
body.feza-compose-ui #composebodycontainer .tox.tox-tinymce { height: 100% !important; }
body.feza-compose-ui #composebodycontainer textarea#composebody { height: 100%; }

body.feza-compose-ui #composebodycontainer .tox.tox-tinymce { border: 0; }
body.feza-compose-ui #composebodycontainer .tox .tox-toolbar,
body.feza-compose-ui #composebodycontainer .tox .tox-toolbar__primary,
body.feza-compose-ui #composebodycontainer .tox .tox-toolbar-overlord {
  background: var(--g-card);
}
body.feza-compose-ui #composebodycontainer .tox .tox-tbtn { color: var(--g-text-soft); }
body.feza-compose-ui #composebodycontainer .tox .tox-tbtn:hover { background: var(--g-hover); color: var(--g-text); }
body.feza-compose-ui #composebodycontainer .tox .tox-tbtn--enabled { background: var(--g-hover); color: var(--g-blue); }

/* the "A" button reads as pressed while the bar is open */
#feza-compose-foot .feza-iconbtn.ct.fmt { border-radius: 4px; }
body.feza-format-on #feza-compose-foot .feza-iconbtn.ct.fmt {
  background: var(--g-hover); color: var(--g-blue);
}

/* Elastic's own editor-mode link sits under the body; keep it out of the way */
body.feza-compose-ui #composebodycontainer .editor-toolbar { padding: 0 8px 4px; }

/* Tables typed into a message should look like tables while editing */
body.feza-compose-ui .mce-content-body table td,
body.feza-compose-ui .mce-content-body table th { border: 1px solid #dadce0; padding: 6px 8px; }

/* --------------------------------------------------------------------------
   22. Profile picture
   -------------------------------------------------------------------------- */
#feza-avatar.has-photo,
.feza-pop .head .big.has-photo { padding: 0; overflow: hidden; background: transparent !important; }

#feza-avatar img,
.feza-pop .head .big img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
}

/* mark-as-unread: in the reading toolbar and in the list header */
body.task-mail #layout-content > .header ul.menu.toolbar a.feza-unread {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  color: var(--g-text-soft); text-decoration: none;
}
body.task-mail #layout-content > .header ul.menu.toolbar a.feza-unread:hover {
  background: var(--g-hover); color: var(--g-text);
}
#messagelist-header .feza-iconbtn.feza-listunread { color: var(--g-text-soft); }