/* One application menu at the top; mail search belongs to the message list. */
.mail-view{grid-template-rows:34px 50px minmax(0,1fr)}
.mail-view>.app-menubar{grid-row:1}
.mail-view>.commandbar{grid-row:2}
#mailWorkspace,#calendarWorkspace{grid-row:3}
#tasksWorkspace,#contactsWorkspace{grid-row:2 / 4}
.app-menubar .top-actions{gap:4px;min-width:0}
.app-menubar .top-actions .icon-button{width:30px;height:30px;font-size:18px}
.app-menubar .account-button{height:30px;padding:2px 6px;font-size:12px}
.app-menubar .account-button>span:first-child{width:24px;height:24px}
.mail-view .list-pane{grid-template-rows:50px 58px minmax(0,1fr) auto}
.list-pane>.search-wrap{width:calc(100% - 16px);min-width:0;height:34px;margin:8px;flex:none;gap:5px;padding:0 7px}
.list-pane>.search-wrap select{flex:0 0 120px;min-width:120px;max-width:120px;padding-left:0}
.list-pane>.search-wrap input{min-width:0;font-size:13px}
@media(max-width:780px), (max-height:600px) and (pointer:coarse){
  .mail-view{grid-template-rows:44px 52px minmax(0,1fr) calc(58px + env(safe-area-inset-bottom,0px))}
  .mobile-module-switcher{grid-row:4}
  .app-menubar{padding:0 4px}
  .app-menubar .top-actions{gap:0}
  .app-menubar .top-actions .icon-button,.app-menubar .account-button{width:40px;min-width:40px;height:40px;padding:0}
  .app-menubar .account-button>span:first-child{width:26px;height:26px}
  .app-menubar .account-button>span:last-child{display:none}
  .mail-view .list-pane{grid-template-rows:52px 60px minmax(0,1fr) auto}
  .list-pane>.search-wrap{height:40px;margin:6px 8px}
  .list-pane>.search-wrap input{font-size:16px}
  .folder-pane,.calendar-sidebar{top:44px}
  .reading-pane.open{top:44px}
}

@media(max-width:360px){.app-menubar .app-menu-trigger{padding:0 6px;font-size:12px}}

/* Keep the clear action available even when the search field loses focus. */
#searchInput::-webkit-search-cancel-button{display:none}
#searchClear{flex:0 0 26px;width:26px;height:26px;padding:0;display:grid;place-items:center;border-radius:4px;color:var(--blue);font-size:21px;line-height:1}
#searchClear[hidden]{display:none}
#searchClear:hover{background:var(--selected)}
#searchClear:focus-visible{outline:2px solid var(--blue);outline-offset:1px}