/* Mobile presentation only: class follows the TOP viewport, not preview width.
 * Includes touch landscape <=960x480. Elastic owns commands, views and editor.
 * Received message descendants are intentionally never targeted. */
html.ay-mobile body:not(.task-login) { font-family: var(--ay-font); color: var(--ay-text); }
html.ay-mobile:not(.iframe), html.ay-mobile:not(.iframe) body { height: 100%; height: var(--ay-viewport-height, 100dvh); }
html.ay-mobile:not(.iframe) #layout { min-width: 0; width: 100%; }
html.ay-mobile:not(.iframe) #layout > div { min-width: 0; max-width: 100%; }
html.ay-mobile:not(.iframe) #layout-menu { display: none; }
html.ay-mobile.ay-drawer-open #layout-menu {
  display: flex; position: fixed; inset: 0 auto 0 0; z-index: 1300;
  width: min(340px, calc(100vw - 40px)); max-width: none;
  flex-direction: column; background: var(--ay-surface); border: 0; height: var(--ay-viewport-height, 100dvh);
  box-shadow: var(--ay-shadow); overflow: hidden;
}
html.ay-mobile .ay-drawer-overlay { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1299; border: 0; padding: 0; background: rgb(21 45 53 / 40%); }
html.ay-mobile #layout-menu .popover-header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; min-height: 56px; height: auto; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; background: var(--ay-surface); border-bottom: 1px solid var(--ay-border); }
html.ay-mobile #layout-menu #logo { width: 36px; height: 36px; padding: 0; margin: 0; }
html.ay-mobile #layout-menu .popover-header::after { content: 'AYTTECH Mail'; color: var(--ay-text); font: 650 16px var(--ay-font); margin-right: auto; margin-left: 10px; order: 1; }
html.ay-mobile #layout-menu .popover-header a { order: 2; color: var(--ay-muted); width: 44px; height: 44px; line-height: 44px; display: block; }
html.ay-mobile #taskmenu { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
html.ay-mobile #taskmenu .action-buttons { display: block; padding-bottom: 8px; }
html.ay-mobile #taskmenu > a, html.ay-mobile #taskmenu .action-buttons > a, html.ay-mobile #taskmenu .special-buttons > a { display: flex; align-items: center; width: auto; min-height: 44px; height: auto; padding: 8px 12px; margin: 0; border-radius: 8px; color: var(--ay-muted); text-align: left; line-height: 28px; }
html.ay-mobile #taskmenu a::before { margin: 0 12px 0 0; float: none; }
html.ay-mobile #taskmenu a .inner { display: inline; font-size: 14px; width: auto; padding: 0; }
html.ay-mobile #taskmenu a.compose { background: var(--ay-primary); color: #fff; justify-content: center; font-weight: 650; }
html.ay-mobile #taskmenu .special-buttons { position: static; display: block; width: auto; background: transparent; border-top: 1px solid var(--ay-border); margin-top: 8px; padding-top: 8px; }
html.ay-mobile #taskmenu #folderlist-content { flex: none; overflow: visible; padding: 4px 0 8px; border-bottom: 1px solid var(--ay-border); }
html.ay-mobile #mailboxlist li { border: 0; }
html.ay-mobile #mailboxlist li > a { min-height: 44px; line-height: 28px; padding-top: 8px; padding-bottom: 8px; border-radius: 8px; color: var(--ay-muted); font-size: 14px; }
html.ay-mobile #mailboxlist li.selected > a { color: var(--ay-primary); background: #dfeeea; font-weight: 650; }
html.ay-mobile #mailboxlist li.unread > a { font-weight: 650; }
html.ay-mobile #mailboxlist .unreadcount { border-radius: 6px; padding: 0 7px; background: #e0eeeb; color: var(--ay-primary); }
html.ay-mobile #layout-list, html.ay-mobile #layout-content { flex: 1 1 0; width: 100%; max-width: 100%; }
/* Landscape Elastic's normal mode would otherwise keep list AND content. */
html.ay-mobile:not(.iframe):not(.ay-reading) #layout-list:not(.hidden) ~ #layout-content { display: none; }
html.ay-mobile.ay-reading #layout-list { display: none; }
html.ay-mobile.ay-reading #layout-content { display: flex; }
html.ay-mobile #layout > div > .header { flex-shrink: 0; min-height: 52px; height: auto; padding-top: env(safe-area-inset-top); background: var(--ay-surface); border-color: var(--ay-border); }
html.ay-mobile #layout .header a.button { min-width: 44px; width: 44px; height: 52px; line-height: 52px; color: var(--ay-muted); }
html.ay-mobile #layout .header .task-menu-button { display: block; }
html.ay-mobile #layout .header .header-title { display: block; flex: 1; min-width: 0; font-size: 15px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0 !important; padding: 0 4px !important; }
html.ay-mobile #messagelist-header .header-title::before { content: 'AYTTECH Mail'; display: block; font-size: 10px; font-weight: 500; line-height: 14px; padding-top: 6px; color: var(--ay-muted); }
html.ay-mobile #messagelist-header .header-title { line-height: 22px; }
html.ay-mobile.ay-reading #layout-content > .header .back-list-button { display: block !important; }
html.ay-mobile #layout-list .searchbar { margin: 8px 12px; width: auto; min-height: 44px; height: 44px; border: 1px solid var(--ay-border); border-radius: 10px; background: var(--ay-background); }
html.ay-mobile .searchbar input { min-width: 0; font-size: 16px; background: transparent; }
html.ay-mobile .searchbar a { min-width: 40px; height: 42px; line-height: 42px; color: var(--ay-muted); }
html.ay-mobile .searchbar:focus-within { outline: 2px solid var(--ay-focus); outline-offset: 1px; }
html.ay-mobile #messagelist { width: 100%; table-layout: fixed; }
html.ay-mobile #messagelist tbody td { border-bottom-color: #e9eef2; padding-top: 10px; padding-bottom: 10px; color: var(--ay-text); }
html.ay-mobile #messagelist td.subject { flex: 1; min-width: 0; gap: 2px 8px; padding-right: 10px; }
html.ay-mobile #messagelist td.subject span.fromto { order: 1; min-width: 0; max-width: calc(100% - 75px); padding-left: 0; font-size: 14px; color: var(--ay-text); }
html.ay-mobile #messagelist td.subject span.date { order: 2; max-width: 72px; font-size: 11px; color: var(--ay-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ay-mobile #messagelist td.subject span.subject { order: 3; min-width: 0; padding-right: 24px; font-size: 13px; line-height: 22px; }
html.ay-mobile #messagelist td.subject span.subject a { color: var(--ay-muted); }
html.ay-mobile #messagelist tr.unread td { background: #f5faf9; }
html.ay-mobile #messagelist tr.unread span.fromto, html.ay-mobile #messagelist tr.unread span.subject a { font-weight: 650; color: var(--ay-text); }
html.ay-mobile #messagelist tr.selected td { background: #dfeeea; }
html.ay-mobile #messagelist td.flags { background: transparent; top: auto; bottom: 10px; padding-top: 0; padding-bottom: 0; }
html.ay-mobile #messagelist td.flags .flag { visibility: visible; }
html.ay-mobile #messagelist td.flags span.flag { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: -12px; }
html.ay-mobile #messagelist tr.flagged span.flagged { color: var(--ay-warning); }
html.ay-mobile #messagelist tr:hover span.date { display: inline; }
html.ay-mobile #messagelist tr:hover span.size { display: none; }
html.ay-mobile #layout .footer { background: var(--ay-surface); border-color: var(--ay-border); padding-bottom: env(safe-area-inset-bottom); flex-shrink: 0; }
html.ay-mobile .content-frame-navigation { min-height: 56px; }
html.ay-mobile .content-frame-navigation .buttons { display: flex; justify-content: center; align-items: center; }
html.ay-mobile .content-frame-navigation a.button { min-width: 44px; min-height: 44px; color: var(--ay-primary); }
html.ay-mobile #layout-content > .content.frame-content { padding: 16px 12px; }
html.ay-mobile #message-header { margin-bottom: 16px; padding-bottom: 16px; }
html.ay-mobile #message-header > .subject { font-size: 21px; line-height: 1.35; }
html.ay-mobile #message-header .header { align-items: flex-start; }
html.ay-mobile #message-header .header-summary { font-size: 13px; }
html.ay-mobile #message-header .header-links { display: flex; flex-wrap: wrap; gap: 4px 12px; }
html.ay-mobile #message-header .header-links a { min-height: 32px; line-height: 32px; }
html.ay-mobile #messagebody { width: 100%; max-width: 100%; overflow-x: auto; }
html.ay-mobile #attachment-list li { width: 100%; padding: 6px 8px; overflow-wrap: anywhere; }
html.ay-mobile #attachment-list li a.filename { min-width: 0; white-space: normal; }
html.ay-mobile #attachment-list li .attachmentmenu { min-width: 44px; min-height: 44px; }
html.ay-mobile .popover:not(.select-menu) { max-width: calc(100vw - 16px); }
html.ay-mobile .popover .popover-header { background: var(--ay-primary); }
html.ay-mobile .popover .listing li a { min-height: 44px; overflow-wrap: anywhere; }
html.ay-mobile .select-menu { max-width: calc(100vw - 16px); }
html.ay-mobile .ui-dialog { max-width: 100vw; max-height: var(--ay-viewport-height, 100dvh); border-color: var(--ay-border); }
html.ay-mobile .ui-dialog .ui-dialog-titlebar { background: var(--ay-background); }
html.ay-mobile .ui-dialog .ui-dialog-content { min-width: 0; overflow: auto; }
html.ay-mobile #messagestack { top: calc(58px + env(safe-area-inset-top)); left: 8px; right: 8px; width: auto; max-width: calc(100vw - 16px); }
html.ay-mobile #messagestack .alert { border-radius: 10px; max-width: 100%; overflow-wrap: anywhere; box-shadow: var(--ay-shadow); }
html.ay-mobile a:focus-visible, html.ay-mobile button:focus-visible { outline: 2px solid var(--ay-focus); outline-offset: -2px; }
html.ay-mobile .form-control:focus { border-color: var(--ay-focus); box-shadow: 0 0 0 2px rgb(40 126 170 / 20%); }
/* Composition: a scrollable native form between header and native action footer.
 * These two important declarations override Elastic's own !important rules. */
html.ay-mobile body.action-compose #compose-content { display: flex; flex: 1 1 0; min-height: 0; overflow-y: hidden !important; }
html.ay-mobile body.action-compose #compose-content > form { flex: 1 1 0; min-height: 0; overflow-x: hidden; overflow-y: auto !important; padding: 12px; }
html.ay-mobile body.action-compose .compose-headers .col-2 { flex: 0 0 48px; max-width: 48px; padding-left: 0; font-size: 13px; color: var(--ay-muted); }
html.ay-mobile body.action-compose .compose-headers .col-10 { flex: 1 1 0; max-width: calc(100% - 48px); min-width: 0; padding: 0; }
html.ay-mobile body.action-compose .compose-headers .input-group { min-width: 0; flex-wrap: nowrap; }
html.ay-mobile body.action-compose .compose-headers .input-group-append { min-width: 36px; }
html.ay-mobile body.action-compose .compose-headers .input-group-text { min-width: 36px; min-height: 44px; justify-content: center; background: var(--ay-background); border-color: var(--ay-border); }
html.ay-mobile body.action-compose .form-control { min-width: 0; min-height: 44px; font-size: 16px; border-color: var(--ay-border); border-radius: 8px; }
html.ay-mobile body.action-compose .recipient-input { min-width: 0; max-width: 100%; border-radius: 8px; padding: 4px; }
html.ay-mobile body.action-compose .recipient-input li.recipient { max-width: 100%; min-width: 0; display: flex; align-items: center; min-height: 36px; }
html.ay-mobile body.action-compose .recipient-input .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ay-mobile body.action-compose .recipient-input li input { min-width: 0; max-width: 100%; font-size: 16px; }
html.ay-mobile body.action-compose .recipient-input .remove { flex-shrink: 0; min-width: 36px; min-height: 36px; }
html.ay-mobile body.action-compose #composebodycontainer { padding-top: 8px; min-width: 0; }
html.ay-mobile body.action-compose #composebody { width: 100%; min-height: 220px; height: max(220px, calc(100dvh - 320px)); font: 16px/1.6 var(--ay-font); border: 1px solid var(--ay-border); border-radius: 8px; padding: 12px; resize: vertical; }
html.ay-mobile body.action-compose .tox-tinymce { max-width: 100%; }
html.ay-mobile body.action-compose .content-frame-navigation a.primary { background: var(--ay-primary); color: #fff; border-radius: 9px; padding: 0 16px; margin: 6px 12px; line-height: 44px; height: 44px; width: auto; max-width: none; min-width: 112px; }
html.ay-mobile body.action-compose .content-frame-navigation a.primary::before { display: none; }
html.ay-mobile body.action-compose .content-frame-navigation a.primary .inner { display: inline; font-size: 14px; font-weight: 650; width: auto; max-width: none; }
html.ay-mobile body.action-compose .content-frame-navigation a.save { color: var(--ay-muted); }
html.ay-mobile body.action-compose .ay-compose-back { display: block; }
body.action-compose .ay-compose-back { display: none; }
html.ay-mobile body.action-compose #layout-content > .header .task-menu-button { display: none; }
html.ay-mobile body.action-compose #compose-attachments .btn { min-height: 44px; }
html.ay-mobile .floating-action-buttons a.button { background: var(--ay-primary); box-shadow: var(--ay-shadow); }
html.ay-mobile #messagelist span.unflagged::before { content: '\f024'; font-family: 'Icons'; font-weight: 900; opacity: .4; color: var(--ay-muted); }
html.ay-mobile body.action-compose #composebodycontainer.html-editor:not(.ishtml) #composebody { padding-top: 48px; }
/* The tree lives inside the native toolbar on mobile, so cancel toolbar rules
 * for this subtree only. No tree nodes or handlers are replaced. */
html.ay-mobile #taskmenu #mailboxlist, html.ay-mobile #taskmenu #mailboxlist ul { display: block; width: 100%; margin: 0; padding: 0; border: 0; }
html.ay-mobile #taskmenu #mailboxlist li { display: block; float: none; width: auto; height: auto; margin: 0; }
html.ay-mobile #taskmenu #mailboxlist li > a { display: block; float: none; width: auto; height: auto; padding: 8px 12px; text-align: left; }
html.ay-mobile #taskmenu #mailboxlist li ul { padding-left: 16px; }
html.ay-mobile #taskmenu #mailboxlist li > a::before { float: left; line-height: 28px; font-size: 16px; }
html.ay-mobile #taskmenu #mailboxlist .unreadcount { float: right; }
html.ay-mobile body.task-mail:not(.action-compose) #messagelist-header .back-sidebar-button.folders { display: none; }
html.ay-mobile #messagestack { pointer-events: none; }
html.ay-mobile #messagestack .alert { pointer-events: auto; }
html.ay-mobile #layout-content > .content-frame-navigation { display: flex !important; align-items: center; justify-content: center; }
html.ay-mobile body.action-compose #compose-content .formbuttons { display: none; }
html.ay-mobile .btn-primary { background: var(--ay-primary); border-color: var(--ay-primary); border-radius: 8px; }
html.ay-mobile .btn-primary:hover { background: var(--ay-hover); border-color: var(--ay-hover); }
/* Elastic explicitly hides this footer with !important above 768px. Touch
 * landscape needs the same native controls as portrait. */
html.ay-mobile body.action-compose #layout-sidebar { display: none; }
html.ay-mobile.ay-compose-options body.action-compose #layout-sidebar { display: flex; flex: 1 1 0; width: 100%; }
html.ay-mobile.ay-compose-options body.action-compose #layout-content { display: none; }
html.ay-mobile #layout-content > .header > #toolbar-menu { display: none; }
html.ay-mobile #layout-content > .header > .toolbar-menu-button { display: block; }
html.ay-mobile body.action-compose #layout-sidebar .back-content-button { display: block !important; }


html.ay-mobile:not(.iframe):not(.ay-reading) body:not(.action-compose) #layout-sidebar:not(.hidden) ~ #layout-content { display: none; }
html.ay-mobile.ay-reading #layout-sidebar { display: none; }
html.ay-mobile #layout-list > .header > .toolbar-menu-button { display: block; }

/* Popper positions normal-mode menus for a tall desktop. In touch landscape,
 * contain its native popover in the viewport and scroll the menu internally. */
html.ay-mobile.layout-normal .popover:not(.select-menu):not(#layout-menu) { position: fixed; top: 8px !important; bottom: 8px; right: 8px; left: auto !important; transform: none !important; width: min(340px, calc(100vw - 16px)); max-height: calc(var(--ay-viewport-height, 100dvh) - 16px); display: flex; flex-direction: column; }
html.ay-mobile.layout-normal .popover:not(#layout-menu) .popover-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

html.ay-mobile body.action-compose #toolbar-menu li.ay-options-entry { display: block !important; }