/* Mail views share the same control metrics as the mailbox. Native commands,
 * iframe content and plugin window geometry remain owned by their plugins. */
/* Elastic paints two focus edges when the always-visible checkbox column is
 * present without its native withselection class. Keep cell widths stable. */
html:not(.touch) body.task-mail.action-none #messagelist.listing.focus tbody tr.focused>td:first-child,
html:not(.touch) body.task-mail.action-none #messagelist.listing.focus:not(.withselection) tbody tr.focused>td.selection+td {
  border-left-color:transparent;
}
/* A pointer click needs no focus stripe; keyboard navigation retains a clear
 * indicator around the complete row instead of its narrow checkbox cell. */
body.task-mail.action-none.mailserver-keyboard-navigation #messagelist.listing.focus tbody tr.focused {
  outline:2px solid var(--ms-focus,#ad7d00);
  outline-offset:-2px;
}
.mailserver-live-search,
.cloud-files-manager,
.attachment-preview-panel,
.ui-dialog:has(.mailserver-migration),
.ui-dialog:has(.cloud-files-manager),
.ui-dialog:has(.attachment-preview-panel) {
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ms-text,#202124);
}
.ui-dialog:has(.mailserver-migration) .ui-dialog-title,
.ui-dialog:has(.cloud-files-manager) .ui-dialog-title,
.ui-dialog:has(.attachment-preview-panel) .ui-dialog-title {
  font-size:16px; line-height:24px; font-weight:600;
}
.ui-dialog:has(.mailserver-migration) .ui-dialog-buttonpane button,
.ui-dialog:has(.cloud-files-manager) button,
.ui-dialog:has(.attachment-preview-panel) .ui-dialog-buttonpane button {
  min-height:36px; border-radius:8px; font:14px/20px Arial,Helvetica,sans-serif;
  white-space:normal;
}
.cloud-files-manager p { font-size:13px; line-height:20px; color:var(--ms-muted,#6d7480); }
.cloud-files-manager li strong { font-size:14px; line-height:20px; font-weight:600; }
.cloud-files-manager li small { font-size:12px; line-height:18px; color:var(--ms-muted,#6d7480); }
.cloud-files-manager li button { flex:0 0 auto; }
.attachment-preview-panel > p { font:13px/20px Arial,Helvetica,sans-serif; }
.mailserver-migration-form label { font-size:13px; }
.mailserver-migration-form input,
.mailserver-migration-form select { font-family:Arial,Helvetica,sans-serif; }

/* The full-page reader and authenticated preview previously retained Elastic's
 * 24px bold heading and 64px photo while the inline reader used smaller ones. */
body.task-mail:is(.action-show,.action-preview) #message-header > .subject {
  margin:0 0 16px; font-size:22px; line-height:1.35; font-weight:500;
  white-space:normal; overflow-wrap:anywhere;
}
body.task-mail:is(.action-show,.action-preview) #message-header > .header {
  gap:12px; padding:0; border:0;
}
body.task-mail:is(.action-show,.action-preview) #message-header img.contactphoto {
  flex:0 0 40px; width:40px; height:40px; margin:0; border-radius:50%;
}
body.task-mail:is(.action-show,.action-preview) #message-header .header-content {
  min-width:0; min-height:40px; font-size:13px; line-height:20px;
}
body.task-mail:is(.action-show,.action-preview) #message-header .header-summary {
  margin-top:0; overflow-wrap:anywhere;
}
body.task-mail:is(.action-show,.action-preview) #message-header .header-links {
  display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:4px;
}
body.task-mail:is(.action-show,.action-preview) #message-header .header-links a {
  font-size:12px; line-height:20px; margin:0;
}
body.task-mail:is(.action-show,.action-preview) #message-header .header-headers {
  max-width:100%; overflow-wrap:anywhere;
}
/* Only attachment chrome is restyled; sender HTML and document/PDF frames are
 * intentionally untouched. Native filename/download/preview nodes stay intact. */
body.task-mail:is(.action-show,.action-preview) #message-content .attachmentslist {
  display:flex; flex-wrap:wrap; gap:8px; padding:0; border:0; background:transparent;
}
body.task-mail:is(.action-show,.action-preview) #message-content .attachmentslist li {
  box-sizing:border-box; display:grid; grid-template-columns:24px minmax(0,1fr) 26px;
  align-items:start; gap:2px 5px; width:300px; max-width:100%; min-width:0;
  margin:0; padding:8px; background:#f1f2f4; border:1px solid transparent; border-radius:10px;
}
body.task-mail:is(.action-show,.action-preview) #message-content .attachmentslist li::before {
  grid-column:1; grid-row:1; float:none; width:24px; height:24px;
  line-height:24px; margin:0; color:#727985;
}
body.task-mail:is(.action-show,.action-preview) #message-content .attachmentslist li > a.filename {
  grid-column:2; grid-row:1; min-width:0; height:auto; padding:0; line-height:24px;
  font-size:13px;
}
body.task-mail:is(.action-show,.action-preview) #message-content .attachmentslist li > a.dropdown {
  grid-column:3; grid-row:1; width:26px; height:26px; line-height:24px;
}
body.task-mail:is(.action-show,.action-preview) #message-content .attachmentslist .attachment-size {
  flex:0 0 auto; font-size:12px; color:var(--ms-muted,#6d7480);
}
body.task-mail:is(.action-show,.action-preview) #message-content .attachment-preview-button {
  grid-column:2 / 4; min-height:28px; width:max-content; max-width:100%;
  padding:3px 0; font:13px/20px Arial,Helvetica,sans-serif; color:#4a607d;
}
body.task-mail:is(.action-show,.action-preview) #message-content .attachmentslist li:focus-within {
  border-color:#c4a02b;
}

/* Native standalone compose is also reachable through Open in new window and
 * browser navigation; workspace/quick-reply retain their existing own layout. */
body.task-mail.action-compose:not(.mailserver-workspace-compose):not(.mailserver-quick-compose) #compose-headers {
  font:14px/1.5 Arial,Helvetica,sans-serif;
}
body.task-mail.action-compose:not(.mailserver-workspace-compose):not(.mailserver-quick-compose) #compose-headers .col-form-label {
  color:var(--ms-muted,#6d7480); font-size:13px; font-weight:400;
}
body.task-mail.action-compose:not(.mailserver-workspace-compose):not(.mailserver-quick-compose) #compose-headers .form-control {
  font:14px/1.5 Arial,Helvetica,sans-serif; border-radius:8px;
}
body.task-mail.action-compose:not(.mailserver-workspace-compose):not(.mailserver-quick-compose) .formbuttons button {
  min-height:40px; padding:9px 18px; border-radius:9px; font:14px/20px Arial,Helvetica,sans-serif;
}
@media(min-width:1025px) {
  /* Keep Elastic's compact-screen popup behavior; flatten only its desktop
   * standalone reader toolbar, including the post-init UL representation. */
  body.task-mail.action-show #layout-content > .header {
    height:auto; min-height:48px; flex-wrap:wrap; gap:4px; line-height:normal;
  }
  body.task-mail.action-show #layout-content > .header :is(#mailtoolbar,#toolbar-menu) {
    display:flex; position:static; flex:1 1 auto; flex-wrap:wrap; align-items:center;
    width:auto; min-width:0; height:auto; margin:0; padding:0; gap:2px;
    border:0; box-shadow:none; background:transparent; list-style:none;
  }
  body.task-mail.action-show #layout-content > .header #toolbar-menu > li {
    display:flex; float:none; height:auto; padding:0;
  }
  body.task-mail.action-show #layout-content > .header :is(#mailtoolbar,#toolbar-menu) a {
    display:inline-flex; float:none; align-items:center; gap:6px; width:auto;
    height:36px; min-width:32px; padding:6px 8px; border-radius:7px;
    font:13px/24px Arial,Helvetica,sans-serif; white-space:nowrap;
  }
  body.task-mail.action-show #layout-content > .header :is(#mailtoolbar,#toolbar-menu) a::before {
    float:none; margin:0; width:16px; height:24px; font-size:15px; line-height:24px;
  }
  body.task-mail.action-show #layout-content > .header :is(#mailtoolbar,#toolbar-menu) .inner {
    display:inline; max-width:none; font:inherit;
  }
  body.task-mail.action-show #layout-content > .header :is(#mailtoolbar,#toolbar-menu) .dropbutton {
    display:inline-flex; align-items:center;
  }
  body.task-mail.action-show #layout-content > .header :is(#mailtoolbar,#toolbar-menu) .dropdown {
    min-width:20px; padding-left:3px; padding-right:3px;
  }
  body.task-mail.action-show #layout-content > .header :is(#mailtoolbar,#toolbar-menu) .dropdown .inner {
    display:none;
  }
}
@media(max-width:600px) {
  body.task-mail:is(.action-show,.action-preview) #message-header > .subject { font-size:18px; }
  body.task-mail:is(.action-show,.action-preview) #message-header .header-links { gap:4px 10px; }
  .cloud-files-manager li { flex-wrap:wrap; }
  .cloud-files-manager li > div { flex-basis:calc(100% - 120px)!important; }
}

/* Folder and section navigation use one text line and one centered icon box.
 * Elastic's 1em/2em glyph boxes inherited a 32/35px line-height, lowering the
 * icons; its badge margins could also make unread rows taller than others. */
#layout-sidebar:not(.sidebar-right) { --ms-nav-row-height:32px; }
#layout-sidebar:not(.sidebar-right) :is(#mailboxlist,#settings-menu,#directorylist,#savedsearchlist) li {
  border-bottom:0;
}
#layout-sidebar:not(.sidebar-right) :is(#mailboxlist,#settings-menu,#directorylist,#savedsearchlist) li > a {
  display:flex; align-items:center; box-sizing:border-box; min-width:0;
  width:auto; min-height:var(--ms-nav-row-height); margin-block:1px;
  padding-block:6px; line-height:20px;
}
#layout-sidebar:not(.sidebar-right) :is(#mailboxlist,#settings-menu,#directorylist,#savedsearchlist) li > a::before {
  display:flex; align-items:center; justify-content:center; float:none;
  flex:0 0 18px; width:18px; height:20px; line-height:20px;
  margin-block:0; font-size:16px;
}
#layout-sidebar #mailboxlist li > a > .unreadcount {
  align-self:center; margin-block:0; line-height:20px;
}
#layout-sidebar #mailboxlist li.unread > a { padding-right:14px; }
#layout-sidebar:not(.sidebar-right) :is(#mailboxlist,#directorylist,#savedsearchlist) li ul {
  border-top:0;
}
#layout-sidebar:not(.sidebar-right) :is(#mailboxlist,#directorylist,#savedsearchlist) .treetoggle {
  display:flex; align-items:center; justify-content:center;
  top:1px; height:var(--ms-nav-row-height);
}
#layout-sidebar:not(.sidebar-right) :is(#mailboxlist,#directorylist,#savedsearchlist) .treetoggle::before {
  float:none; height:20px; line-height:20px; margin-block:0;
}
#layout-sidebar .mailserver-shortcuts > a,
#layout-sidebar #cloud-files-open,
#layout-sidebar .mailserver-migration-open {
  display:flex; align-items:center; box-sizing:border-box; min-height:var(--ms-nav-row-height,32px); height:var(--ms-nav-row-height,32px); line-height:20px;
  padding-block:6px!important;
}
#layout-sidebar .mailserver-migration-open { gap:10px; padding-block:6px; }
#layout-sidebar .mailserver-migration-open::before {
  flex:0 0 18px; width:18px; height:20px; margin:0;
  font-size:18px; line-height:20px;
}
#layout-sidebar #cloud-files-open::before { height:20px; line-height:20px; }
@media(min-width:1025px) {
  body.mailserver-compact-sidebar #layout-sidebar { --ms-nav-row-height:38px; }
  body.mailserver-compact-sidebar #layout-sidebar #mailboxlist .unreadcount { line-height:13px; }
}
@media(max-width:1024px) {
  #layout-sidebar:not(.sidebar-right) { --ms-nav-row-height:44px; }
}