/* Keep the workspace, list and reader within the available viewport. */
.mail-workspace {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.mail-workspace > .topbar, .mail-workspace > .mail-toolbar { flex: 0 0 auto; }
.mail-workspace .mail-main {
  flex: 1 1 0;
  min-height: 0;
  grid-template-columns: clamp(132px, 13vw, 172px) clamp(250px, 28vw, 420px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.mail-workspace .mail-main.mail-list-mode {
  grid-template-columns: clamp(132px, 13vw, 172px) minmax(0, 1fr);
}
.mail-workspace .mail-list-pane {
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}
.mail-list-pane:not(:has(#inboxFilters:not([hidden]))) {
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.mail-list-pane > header { min-height: 38px; padding-block: 6px; }
.mail-list-pane #inboxFilters { min-height: 0; padding-block: 5px; }
.mail-workspace #mailList, .mail-workspace #mailDetail, .mail-main .folders {
  min-height: 0;
  overflow-y: auto;
}
.mail-main .folder [data-count][hidden] { display: none; }
.mail-toolbar .mail-tools { position: relative; flex: 0 0 auto; }
.mail-toolbar .mail-tools summary { color: #29466e; cursor: pointer; padding: 6px 8px; white-space: nowrap; }
.mail-toolbar .mail-tools-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 5;
  display: grid;
  gap: 8px;
  min-width: 145px;
  padding: 10px;
  border: 1px solid #d6e1f1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px #20385a20;
}
.mail-tools-panel .mail-sync { margin: 0; padding: 0; }
@media (max-width: 760px) {
  .mail-workspace .mail-main,
  .mail-workspace .mail-main.mail-list-mode { grid-template-columns: minmax(0, 1fr); }
  .mail-workspace .mail-main { grid-template-rows: auto minmax(0, 2fr) minmax(0, 3fr); }
  .mail-workspace .mail-main.mail-list-mode { grid-template-rows: auto minmax(0, 1fr); }
  .mail-tools-panel .mail-sync { display: grid; }
}

.sender-card .sender-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  line-height: 1;
  color: #174a9d;
}
.mail-body.safe-html { white-space: normal; }
.mail-body .blocked-mail-image {
  display: inline-block;
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid #dce5f0;
  border-radius: 5px;
  background: #f5f8fc;
  color: #526783;
  font-size: .8em;
  overflow-wrap: anywhere;
}

.mail-body .mail-original-image {
  display: inline-block;
  margin-inline-start: 6px;
  font: inherit;
  font-size: .8em;
}

.mail-body .remote-mail-image {
  display: inline-block;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
.detail-head { flex-wrap: wrap; }
.detail-head > div:first-child { min-width: 0; flex: 1 1 240px; }
.detail-actions button { white-space: nowrap; }

#mailDetail .detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
#mailDetail .detail-head h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
#mailDetail .detail-head .detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#mailDetail .detail-actions button {
  min-width: 0;
  min-height: 28px;
  height: auto;
  padding: 3px 8px;
  font-size: 12px;
  line-height: 1.4;
}

#mailDetail .mail-body {
  padding-block: 8px;
  font-size: 14px;
  line-height: 1.55;
}
#mailDetail .mail-body.safe-html p { margin-block: 6px; }
#mailDetail .mail-body.safe-html .remote-mail-image {
  width: auto;
  max-height: 360px;
  object-fit: contain;
  object-position: left top;
}
#mailDetail .mail-body.safe-html > .remote-mail-image:first-child {
  display: block;
  max-height: 72px;
  margin-block-end: 6px;
}

#mailDetail .mail-translation-controls:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}
#mailDetail .mail-translation-controls :is(button,select) {
  border: 1px solid #d6e1f1;
  border-radius: 6px;
  background: #fff;
  padding: 4px 8px;
  color: #29466e;
  font: inherit;
}
#mailDetail .mail-translation-result { white-space: pre-wrap; }
#mailDetail .mail-translation-result strong { display: block; margin-bottom: 8px; }
#mailDetail .mail-body[hidden] { display: none; }

.mail-workspace .mail-main .folders .folder {
  font-size: 14px;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  column-gap: 5px;
  text-align: left;
}
.mail-workspace .mail-main .folders .folder:not(.active) {
  color: #334a68;
}
.mail-workspace .mail-main .folders #composeButton {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 35px;
  margin-bottom: 8px;
  font-size: 14px;
}
.mail-workspace .mail-main .folders :is(.mail-unread, .mail-nav-more summary) {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #334a68;
  text-align: left;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.mail-nav-more summary::-webkit-details-marker { display: none; }
.mail-nav-more summary::after { content: "›"; }
.mail-nav-more[open] summary::after { transform: rotate(90deg); }
.mail-nav-more { margin-top: 5px; }
.mail-unread b { font-size: 10px; }
.mail-unread[aria-pressed="true"] { background: #e8efff !important; color: #2166f3 !important; font-weight: 700 !important; }
.mail-workspace:has(.mail-unread[aria-pressed="true"]) .folder[data-folder="inbox"] { background: transparent; color: #334a68; font-weight: 400; }
@media (max-width: 760px) {
  .mail-workspace .mail-main .folders #composeButton,
  .mail-workspace .mail-main .folders .mail-unread { width: auto; flex: 0 0 auto; white-space: nowrap; margin: 0; }
  .mail-nav-more { flex: 0 0 auto; margin: 0; }
}

.mail-compose-preview:not([hidden]) {
  padding: 10px 12px;
  border: 1px solid #d6e1f1;
  border-radius: 7px;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.mail-compose-preview dl { display: grid; grid-template-columns: max-content minmax(0,1fr); gap: 4px 10px; margin: 0 0 8px; }
.mail-compose-preview dt { font-weight: 600; }
.mail-compose-preview dd { margin: 0; }
.mail-compose-preview-body { white-space: pre-wrap; padding-top: 7px; border-top: 1px solid #d6e1f1; }
#composeDialog {
  width: min(860px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  border: 1px solid #d6e1f1;
  border-radius: 12px;
  padding: 0;
  overflow: auto;
}
#composeForm { display: flex; flex-direction: column; gap: 10px; padding: 0 18px 12px; }
#composeForm .compose-heading {
  display: flex; align-items: flex-start; justify-content: space-between;
  border-bottom: 1px solid #e3ebf5; padding: 14px 0 10px; margin: 0;
}
#composeTitle { font-size: 17px; margin: 0; }
#composeForm .compose-heading p { font-size: 12px; margin: 3px 0 0; color: #5b6e88; }
#composeForm .compose-fields { border: 1px solid #dde6f2; border-radius: 8px; }
#composeForm .compose-field {
  display: grid; grid-template-columns: 72px minmax(0,1fr);
  align-items: center; gap: 8px; min-height: 37px; padding: 2px 10px;
  border-bottom: 1px solid #e6edf6; font-size: 13px;
}
#composeForm .compose-field[hidden] { display: none; }
#composeForm .compose-field:last-child { border: 0; }
#composeForm .compose-to { grid-template-columns: 72px minmax(0,1fr) auto; }
#composeForm .compose-field input { width: 100%; min-width: 0; border: 0; background: transparent; padding: 5px 0; font-size: 13px; }
#composeForm .compose-field strong { overflow-wrap: anywhere; color: #27415f; font-weight: 600; }
#composeForm .compose-editor { border: 1px solid #dde6f2; border-radius: 8px; overflow: hidden; }
#composeForm .compose-editor-tools {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 10px; background: #f5f8fc; border-bottom: 1px solid #dde6f2;
  font-size: 12px; color: #425974;
}
#composeForm .compose-editor-tools select { font: inherit; padding: 3px 5px; max-width: 100%; }
#composeLength { margin-left: auto; }
#composeBody { box-sizing: border-box; display: block; width: 100%; border: 0; border-radius: 0; resize: vertical; min-height: clamp(130px, 29vh, 290px); padding: 10px; font-size: 14px; line-height: 1.6; }
#composeForm .attachment-input {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px 10px;
  padding: 6px 0; font-size: 12px;
}
#composeForm .attachment-input input { max-width: 100%; }
#composeForm .attachment-input small { color: #5b6e88; }
#composeForm footer {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
  position: sticky; bottom: 0; z-index: 1; margin: 0; padding: 8px 0 0;
  background: #fff; border-top: 1px solid #e3ebf5;
}
@media(max-width: 480px){
  #composeForm { padding-inline: 10px; }
  #composeForm .compose-field { grid-template-columns: 50px minmax(0,1fr); }
  #composeForm .compose-to { grid-template-columns: 50px minmax(0,1fr) auto; }
}

#mailAccountPicker { width: min(420px,calc(100vw - 28px)); }
#mailAccountPicker h2 { margin: 0 0 6px; font-size: 17px; }
#mailAccountPicker label { font-size: 13px; color: #425974; }
#mailAccountPicker select { width: 100%; padding: 7px; border: 1px solid #d6e1f1; border-radius: 7px; }

#signaturePanel:not([hidden]) { display: grid; gap: 7px; padding: 10px; border-bottom: 1px solid #dde6f2; font-size: 13px; }
#signaturePanel textarea { box-sizing: border-box; width: 100%; min-height: 76px; }
.mail-signature-actions { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
#signaturePanel small, #signatureStatus { color: #425974; }

#composeDialog { width: min(1160px, calc(100vw - 32px)); }
#composeForm { padding-inline: clamp(12px,2vw,24px); }
#composeForm .compose-heading {
  position: sticky; top: 0; z-index: 2; background: #fff;
  align-items: center; flex-wrap: wrap; gap: 10px;
}
#composeForm footer.compose-top-actions {
  position: static; padding: 0; border: 0; justify-content: flex-start;
}
#composeForm .compose-top-actions button { border-radius: 16px; white-space: nowrap; }
#composeForm #closeCompose { width: auto; height: auto; padding: 5px 12px; font-size: 13px; }
#composeForm .compose-fields { border: 0; border-radius: 0; }
#composeForm .compose-field { min-height: 40px; }
#composeForm .compose-field:last-child { border-bottom: 1px solid #e6edf6; }
#composeForm .compose-to { grid-template-columns: 72px minmax(0,1fr) auto auto; }
#composeCcToggle, #composeBccToggle { color: #225bba; border: 0; background: transparent; white-space: nowrap; }
#composeBody { min-height: clamp(180px,39dvh,440px); }
#composeForm .compose-resource-bar {
  display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: center;
  padding: 7px 10px; background: #f5f8fc; border-top: 1px solid #dde6f2; font-size: 12px;
}
#composeForm .compose-resource-bar .attachment-input { margin: 0; padding: 0; }
#composeForm .compose-resource-bar select { font: inherit; max-width: 100%; }
#signaturePanel:not([hidden]) { border-bottom: 0; border-top: 1px solid #dde6f2; }
@media(max-width: 480px) {
  #composeForm .compose-to { grid-template-columns: 50px minmax(0,1fr) auto auto; gap: 3px; }
  #composeCcToggle, #composeBccToggle { padding-inline: 3px; }
}

#composeForm .compose-editor-tools button, #composeLinkPanel button {
  font: inherit; color: #334b69; background: #fff; border: 1px solid #d6e1f1; border-radius: 5px; padding: 4px 8px;
}
#composeBold { font-weight: 700 !important; }
#composeItalic { font-style: italic !important; }
#composeUnderline { text-decoration: underline; }
#composeForm .compose-recipient-count { margin: 3px 0 1px; padding-inline-start: 90px; color: #526985; font-size: 12px; }
#composeLinkPanel:not([hidden]) { display:flex; flex-wrap:wrap; align-items:center; gap:7px; padding:7px 10px; font-size:12px; }
#composeLinkUrl { flex:1; min-width: 150px; font:inherit; padding:5px 7px; border:1px solid #d6e1f1; border-radius:5px; }
#composeBytes { white-space: nowrap; color: #526985; }

.mail-compose-preview-body table { border-collapse: collapse; margin-block: 6px; }
.mail-compose-preview-body th, .mail-compose-preview-body td { border: 1px solid #d6e1f1; padding: 5px 8px; }
.mail-compose-preview-body th { background: #f5f8fc; text-align: left; }

.mail-compose-inline-preview { display:block; max-width:100%; max-height:320px; object-fit:contain; margin-block:8px; }

.mail-workflow-panel { display:grid; gap:.65rem; padding:1.15rem; }
.mail-workflow-panel header { display:flex; align-items:center; justify-content:space-between; }
.mail-workflow-panel li { display:flex; gap:.45rem; align-items:center; flex-wrap:wrap; padding:.35rem; }
.mail-workflow-panel pre { white-space:pre-wrap; overflow-wrap:anywhere; }

#composeCloudPanel:not([hidden]) { display:grid; gap:.45rem; padding:.75rem; border:1px solid #dce5f0; border-radius:.55rem; }
.compose-cloud-search { display:flex; flex-wrap:wrap; gap:.4rem; }
.compose-cloud-search input { flex:1; min-width:12rem; }
#composeCloudStatus { margin:0; color:#526481; }
#composeCloudList { display:grid; gap:.35rem; max-height:12rem; overflow:auto; }
#composeCloudList button { text-align:left; overflow-wrap:anywhere; }

.mail-compose-icon { flex: 0 0 16px; vertical-align: middle; }

.mail-workspace .mail-main .folders #mailWorkflowOpen {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 36px;
  padding: 5px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #334a68;
  text-align: left;
  font-family: inherit; font-weight: 500; line-height: 1.3;
  font-size: 13px;
  cursor: pointer;
}
.mail-workspace .mail-main .folders #mailWorkflowOpen:hover { background: #e9f0fc; color: #175acc; }
.mail-workspace .mail-main .folders #mailWorkflowOpen span { min-width: 0; }

#composeDialog { width: min(1080px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); }
#composeForm { gap: 8px; padding-block-end: 14px; }
#composeForm .compose-heading {
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 0 8px;
}
#composeForm .compose-heading p { display: none; }
#composeForm #composeTitle { color: #25364f; font-size: 15px; font-weight: 650; }
#composeForm footer.compose-top-actions { order: -1; gap: 6px; align-items: center; }
#composeForm footer.compose-top-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: auto;
  min-width: 0;
  min-height: 32px;
  height: 32px;
  padding: 0 11px;
  border: 1px solid #d6e1ef;
  border-radius: 16px;
  background: #fff;
  color: #354963;
  font: 500 13px/1.2 system-ui, sans-serif;
}
#composeForm footer.compose-top-actions #sendSynthetic {
  background: #2065e8;
  border-color: #2065e8;
  color: #fff;
  font-weight: 650;
}
#composeForm footer.compose-top-actions button:hover { border-color: #96b4e2; background: #f3f7ff; }
#composeForm footer.compose-top-actions #sendSynthetic:hover { background: #1557d0; }
#composeForm footer.compose-top-actions button:disabled { opacity: .58; cursor: not-allowed; }

#composeForm .compose-field { min-height: 36px; padding-block: 0; }
#composeForm .compose-recipient-count { margin-block: 2px; font-size: 11px; }
#composeForm .compose-editor-tools,
#composeForm .compose-resource-bar { gap: 4px 6px; padding: 4px 8px; background: #f7f9fc; }
#composeForm .compose-editor-tools button,
#composeForm .compose-resource-bar button,
#composeForm .compose-resource-bar .attachment-input {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 28px;
  margin: 0;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #3e516d;
  font: 500 12px/1.2 system-ui, sans-serif;
  cursor: pointer;
}
#composeForm .compose-editor-tools button:hover,
#composeForm .compose-resource-bar button:hover,
#composeForm .compose-resource-bar .attachment-input:hover {
  border-color: #d7e4f7;
  background: #eaf1fc;
  color: #155ccf;
}
#composeForm .compose-editor-tools button[aria-expanded="true"],
#composeForm .compose-resource-bar button[aria-expanded="true"] { background: #e8f0ff; color: #145ace; }
#composeForm :is(.compose-editor-tools,.compose-resource-bar) select {
  height: 28px;
  min-width: 0;
  padding: 0 5px;
  border: 1px solid #dbe5f1;
  border-radius: 5px;
  background: #fff;
  color: #364b65;
  font: 500 12px/1.2 system-ui, sans-serif;
}
#composeForm #composeBody { min-height: clamp(160px,35dvh,360px); padding: 12px; }
#composeForm .attachment-input small,
#composeForm .attachment-input input[type="file"] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
#composeForm .attachment-input:focus-within,
#composeForm :is(button,select):focus-visible,
#mailWorkflowOpen:focus-visible { outline: 2px solid #4785e9; outline-offset: 1px; }
#composeForm #composeLength,
#composeForm #composeBytes { color: #526581; white-space: nowrap; }
#composeForm #composeBytes { margin-inline-start: 3px; }

@media (max-width: 760px) {
  .mail-workspace .mail-main .folders #mailWorkflowOpen { width: auto; flex: 0 0 auto; white-space: nowrap; }
}
@media (max-width: 480px) {
  #composeForm .compose-heading { justify-content: flex-start; }
  #composeForm .compose-heading > :first-child { flex-basis: 100%; order: -2; }
  #composeForm footer.compose-top-actions button { padding-inline: 8px; }
  #composeForm #composeLength { margin-inline-start: 0; }
}

#mailWorkflow {
  box-sizing: border-box;
  width: min(620px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 1px solid #d6e1f1;
  border-radius: 12px;
  color: #25364f;
}
#mailWorkflow .mail-workflow-panel { font: 400 13px/1.5 system-ui, sans-serif; }
#mailWorkflow h2, #mailWorkflow h3 { margin: 0; font-size: 15px; }
#mailWorkflow :is(button,select,input[type="datetime-local"]) {
  box-sizing: border-box;
  min-height: 32px;
  padding: 4px 9px;
  border: 1px solid #d6e1ef;
  border-radius: 6px;
  background: #fff;
  color: inherit;
  font: inherit;
}
#mailWorkflow button { cursor: pointer; }
#mailWorkflow #workflowSubmit { background: #2065e8; border-color: #2065e8; color: #fff; }
#mailWorkflow button:disabled { opacity: .58; cursor: not-allowed; }

#composeForm .compose-tool-group { display:inline-flex; align-items:center; gap:3px; padding-right:6px; border-right:1px solid #dce5f0; }
#composeForm .compose-editor-tools button:disabled { opacity:.38; cursor:default; background:transparent; border-color:transparent; }
#composeForm #composeEmojiPanel:not([hidden]) { display:flex; gap:5px; flex-wrap:wrap; padding:6px 8px; border-bottom:1px solid #e3e9f2; }
#composeForm #composeEmojiPanel button { padding:2px 6px; border:1px solid #dde7f3; background:#fff; border-radius:5px; cursor:pointer; }
#composeForm .compose-options-row { display:flex; gap:8px; flex-wrap:wrap; padding:6px 8px; border-top:1px solid #dde7f3; background:#fff; }
#composeForm .compose-options-row button { display:inline-flex; gap:5px; align-items:center; min-height:28px; border:1px solid #dbe5f1; border-radius:5px; padding:0 8px; background:#fff; color:#354963; font:500 12px/1.2 system-ui,sans-serif; cursor:pointer; }
#composeForm .compose-options-row button:hover { background:#edf3fd; color:#155ccf; }

#composeForm #composeBrush[aria-pressed="true"] { background:#e8f0ff; color:#145ace; border-color:#c8dbfb; }

#composeForm .compose-mail-flag { display:inline-flex; gap:5px; align-items:center; font-size:12px; color:#354963; }
#composeForm #composeNotePanel:not([hidden]) { display:grid; gap:5px; padding:8px; color:#354963; font-size:12px; }
#composeForm #composeNote { box-sizing:border-box; width:100%; min-height:48px; border:1px solid #dbe5f1; border-radius:6px; padding:6px 8px; font:inherit; }

#composeProductPanel:not([hidden]) { display:grid; gap:.45rem; padding:.75rem; border:1px solid #dce5f0; border-radius:.55rem; }
#composeProductStatus { margin:0; color:#526481; }
#composeProductList { display:grid; gap:.35rem; max-height:12rem; overflow:auto; }
#composeProductList button { text-align:left; overflow-wrap:anywhere; }

#composeForm #composeAiToggle { color:#603bcc; font-weight:650; }
#composeAiPanel:not([hidden]) { display:grid; gap:6px; padding:10px; background:#faf8ff; color:#334565; font-size:12px; }
#composeAiPanel p, #composeAiPanel ul { margin:0; }
#composeAiPanel :is(textarea,select,button) { min-width:0; padding:6px; border:1px solid #d7deee; border-radius:6px; font:inherit; }
#composeAiPanel button { justify-self:start; color:#5436b7; background:#fff; }
#composeAiPanel button:disabled { opacity:.5; }

.mail-workspace .mail-main .folders #mailDeliveryOpen {
  display:flex; align-items:center; gap:7px; width:100%; min-height:36px; padding:5px 8px;
  border:0; border-radius:7px; background:transparent; color:#334a68; text-align:left; font:500 13px/1.3 system-ui,sans-serif; cursor:pointer;
}
.mail-workspace .mail-main .folders #mailDeliveryOpen:hover { background:#e9f0fc; color:#175acc; }
#mailDeliveryDialog { width:min(650px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); box-sizing:border-box; border:1px solid #d6e1f1; border-radius:12px; padding:14px; color:#25364f; font:400 13px/1.5 system-ui,sans-serif; }
#mailDeliveryDialog :is(header,footer,.delivery-toolbar) { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#mailDeliveryDialog header { justify-content:space-between; }
#mailDeliveryDialog h2 { margin:0; font-size:16px; }
#mailDeliveryDialog :is(button,select) { min-height:30px; border:1px solid #d6e1ef; border-radius:6px; padding:4px 8px; background:#fff; color:inherit; font:inherit; }
#mailDeliveryDialog button { cursor:pointer; }
#mailDeliveryDialog button:disabled { opacity:.5; cursor:default; }
#mailDeliveryRows { list-style:none; padding:0; margin:8px 0; }
#mailDeliveryRows li { display:grid; grid-template-columns:1fr auto; gap:4px 8px; padding:8px 0; border-top:1px solid #e5edf7; overflow-wrap:anywhere; }
#mailDeliveryRows small { grid-column:1/-1; color:#526581; }
#mailDeliveryRows [data-delivery-state] { color:#405a77; }
#mailDeliveryRows [data-delivery-state="confirmed"] { color:#167153; }
#mailDeliveryRows [data-delivery-state="failed"] { color:#a12b36; }
#mailDeliveryRows [data-delivery-state="unknown"] { color:#8e5b00; }
@media(max-width:760px) { .mail-workspace .mail-main .folders #mailDeliveryOpen { width:auto; flex:0 0 auto; white-space:nowrap; } }

#composeForm .compose-commerce-panel:not([hidden]) { display:grid; gap:6px; padding:10px; border:1px solid #dce5f0; border-radius:6px; background:#f8faff; color:#354963; font:400 12px/1.45 system-ui,sans-serif; }
#composeForm .compose-commerce-panel p { margin:0; overflow-wrap:anywhere; }
#composeForm .compose-commerce-panel input:not([hidden]) { box-sizing:border-box; min-width:0; width:100%; border:1px solid #d7e2f1; border-radius:5px; padding:6px; font:inherit; }
#composeForm .compose-commerce-actions { display:flex; gap:6px; flex-wrap:wrap; }
#composeForm .compose-commerce-actions button { padding:5px 8px; border:1px solid #d7e2f1; border-radius:5px; background:#fff; color:#29568c; cursor:pointer; font:inherit; }
#composeForm .compose-commerce-actions button:disabled { opacity:.45; cursor:default; }

#composeDialog { width:min(1260px,calc(100vw - 24px)); background:#f5f6f7; border-color:#e0e2e6; }
#composeForm .compose-heading { background:#f5f6f7; border-color:transparent; }
#composeForm #composeTitle { font-weight:500; color:#657180; }
#composeForm .compose-field { border-color:#e2e4e8; color:#515862; }
#composeForm #composeSender {
  justify-self:start; max-width:100%; padding:4px 8px; border-radius:5px;
  background:#ebedf0; color:#303641; font-weight:500;
}
#composeForm .compose-editor { border-color:#e3e6eb; border-radius:8px; }
#composeForm .compose-editor-tools {
  flex-wrap:nowrap; gap:0; min-height:36px; overflow-x:auto; scrollbar-width:thin;
  background:#fff; border-color:#eaecf0; padding:3px 5px;
}
#composeForm .okki-tool-group {
  display:inline-flex; align-items:center; flex:0 0 auto; gap:1px;
  padding:0 5px; border-right:1px solid #e0e2e6;
}
#composeForm .okki-tool-group:last-of-type { border-right:0; }
#composeForm .compose-editor-tools .okki-tool-group button { padding:0 6px; color:#34373c; }
#composeForm .compose-editor-tools .okki-tool-group button:hover { background:#edf0f4; }
#composeForm .compose-editor-tools select {
  border-color:transparent; padding:0 6px; font-weight:500; color:#303641;
}
#composeForm .compose-editor-tools select[hidden] { display:none; }
#composeForm .compose-resource-bar { background:#eff0f2; border-color:#e4e5e8; gap:5px 0; }
#composeForm .compose-resource-bar select { border-color:transparent; background:transparent; }
#composeForm .compose-options-row { background:#f5f6f7; border-color:#e4e5e8; gap:7px 12px; }
#composeForm .compose-options-row .compose-mail-flag { flex:0 0 auto; white-space:nowrap; gap:5px; }
#composeForm .compose-options-row .compose-mail-flag input { flex:0 0 auto; width:14px; height:14px; margin:0; }
#composeForm .compose-options-row button { white-space:nowrap; border-color:#e0e4eb; background:#fff; }
#composeForm .okki-popover {
  position:fixed; inset:auto; margin:0; padding:0; overflow:auto; max-height:calc(100dvh - 90px);
  border:1px solid #e4e8ef; border-radius:7px; background:#fff; color:#293448;
  box-shadow:0 8px 24px #26365326; font:13px/1.45 system-ui,sans-serif;
}
#composeForm .okki-swatches:popover-open { display:grid; grid-template-columns:repeat(5,34px); }
#composeForm .okki-swatches :is(button,input) { width:34px; height:30px; min-height:0; margin:0; border:0; padding:0; border-radius:0; cursor:pointer; }
#composeForm .okki-swatches button:hover { outline:2px solid #1119; outline-offset:-2px; }
#composeForm .okki-options:popover-open,
#composeForm .okki-table:popover-open { display:grid; min-width:120px; gap:4px; padding:7px; }
#composeForm .okki-options button,
#composeForm .okki-table button { border:0; border-radius:4px; background:#fff; padding:5px 8px; color:inherit; text-align:left; cursor:pointer; }
#composeForm .okki-options button:hover,
#composeForm .okki-table button:hover { background:#edf3ff; }
#composeForm .okki-table label { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#composeForm .okki-table input { width:54px; padding:3px; }
#composeForm #composeEmojiPanel:not([hidden]) { display:grid; gap:8px; padding:12px; border-bottom:1px solid #e5e8ed; background:white; }
#composeEmojiPanel header { display:flex; justify-content:space-between; align-items:center; }
.okki-emoji-layout { display:grid; grid-template-columns:130px minmax(0,1fr); gap:10px; }
#okki-emoji-categories { display:flex; flex-direction:column; gap:3px; }
#composeForm #okki-emoji-categories button { text-align:left; background:transparent; border:0; padding:4px 6px; font:inherit; }
#composeForm #okki-emoji-categories button[aria-pressed="true"] { color:#175fc0; background:#eaf2ff; }
#okki-emoji-search { box-sizing:border-box; width:100%; margin:3px 0 5px; padding:5px 7px; }
#okki-emoji-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(31px,1fr)); gap:4px; max-height:180px; overflow:auto; }
#composeForm #okki-emoji-grid button { border:0; font-size:18px; }
#composeForm #okki-emoji-grid button:hover { background:#eaf2ff; }
@media(max-width:550px){ .okki-emoji-layout { grid-template-columns:100px minmax(0,1fr); } }
#composeForm .okki-table-actions { display:grid; border-top:1px solid #e6ebf2; padding-top:3px; }
#composeForm .okki-table-actions button:disabled { opacity:.4; cursor:default; }

#composeForm .compose-editor-tools #compose-format-open { flex:0 0 auto; font-size:19px; padding-inline:9px; }
#composeForm .compose-more-menu:popover-open { display:grid; min-width:136px; gap:3px; padding:6px; }
#composeForm .compose-more-menu button,
#composeForm .compose-more-menu label {
  display:flex; align-items:center; gap:6px; min-height:29px; text-align:left; white-space:nowrap;
  background:#fff; color:#354963; border:0; border-radius:5px; padding:4px 8px; font:inherit; cursor:pointer;
}
#composeForm .compose-more-menu :is(button,label):hover { background:#eef4ff; }
#composeForm .compose-resource-bar #composeBytes { margin-inline-start:auto; }
#composeForm #compose-options-menu input { flex:0 0 auto; width:14px; height:14px; margin:0; }
.mail-workspace .mail-main #mailNavMore #mailWorkflowOpen { padding-inline-start:14px; }

.mail-workspace .mail-main:has(> #composeDialog[open]) {
  grid-template-columns:clamp(132px,13vw,172px) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
}
.mail-main:has(> #composeDialog[open]) > :is(.mail-list-pane,.mail-detail) { display:none; }
.mail-main > #composeDialog[open] {
  position:relative; inset:auto; width:100%; max-width:none; min-width:0; height:100%;
  max-height:none; margin:0; border:0; border-radius:0; box-sizing:border-box;
  overflow:auto; background:#f5f6f7;
}
.mail-main > #composeDialog[open] #composeBody { min-height:clamp(140px,calc(100dvh - 430px),440px); }
.mail-main .folders #mailTools { margin:8px 0 0; }
.mail-main .folders #mailTools > summary {
  display:flex; align-items:center; gap:7px; padding:7px 8px; border-radius:7px;
  color:#334a68; font:500 13px/1.35 system-ui,sans-serif; cursor:pointer; white-space:nowrap;
}
.mail-main .folders #mailTools > summary::-webkit-details-marker { display:none; }
.mail-main .folders #mailTools > summary:hover { background:#e9f0fc; color:#175acc; }
.mail-main .folders #mailTools > summary::after { content:"›"; margin-inline-start:auto; }
.mail-main .folders #mailTools[open] > summary::after { transform:rotate(90deg); }
.mail-main .folders #mailTools .mail-tools-panel {
  position:static; min-width:0; margin:2px 4px 6px; padding:7px;
  border:1px solid #dce6f2; border-radius:7px; background:#fff;
}
.mail-main .folders #mailTools:not([open]) .mail-tools-panel { display:none; }
.mail-main .folders #mailTools .mail-sync { padding:4px 0 0; font-size:11px; }
.mail-main .folders #mailTools button {
  border:1px solid #d6e1ef; border-radius:6px; padding:4px 6px; background:white;
  color:#334a68; font:inherit; cursor:pointer;
}
@media(max-width:760px){
 .mail-workspace .mail-main:has(> #composeDialog[open]) { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); }
 .mail-main .folders #mailTools { flex:0 0 auto; margin:0; }
 .mail-main .folders #mailTools .mail-sync { display:grid; }
}
.crm-ui-mail .mail-workspace > .topbar { gap:10px; }
.crm-ui-mail .mail-workspace > .topbar :is(.top-actions > button,.top-actions > a) {
  display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:36px;
  border:1px solid #d9e4f3; border-radius:8px; background:#fff; padding:0 9px;
  color:#364b69; font:600 13px/1.2 system-ui,sans-serif; white-space:nowrap; text-decoration:none;
}
.crm-ui-mail .mail-workspace > .topbar .top-actions > .ai-review-entry { color:#2166f3; }
.crm-ui-mail .mail-workspace > .topbar :is(.menu-button,.notification,.top-actions) svg {
  width:16px; height:16px; fill:none; stroke:currentColor; flex:0 0 auto;
}
.crm-ui-mail .mail-workspace > .topbar .notification { display:grid; place-items:center; padding:0; width:32px; height:34px; background:transparent; }
.crm-ui-mail .mail-workspace > .topbar .user-chip { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.crm-ui-mail .mail-workspace > .topbar .user-chip .avatar { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:#e4f2f9; color:#245e89; font-size:14px; }
.crm-ui-mail .mail-workspace > .topbar .user-chip .admin { font:600 13px/1.2 system-ui,sans-serif; white-space:nowrap; }
@media(max-width:820px){.crm-ui-mail .mail-workspace > .topbar .top-actions > .mail-top-link { display:none; }}
@media(min-width:821px){
  .crm-ui-mail .mail-workspace > .topbar { padding-inline:25px; gap:12px; }
}
.crm-ui-mail .mail-workspace > .topbar .global-search {
  box-sizing:border-box; height:36px; min-height:36px; padding:0 11px; gap:8px;
  border-radius:9px; background:#f8fafc;
}
.crm-ui-mail .mail-workspace > .topbar .global-search input { font-size:13px; }
.crm-ui-mail .mail-workspace > .topbar .top-actions { gap:7px; }
.crm-ui-mail .mail-workspace > .topbar :is(.top-actions > button,.top-actions > a) {
  box-sizing:border-box; height:34px; min-height:34px; padding:0 11px; gap:7px; font-size:12px; font-weight:650;
}
.crm-ui-mail .mail-workspace > .topbar .top-actions > .ai-review-entry { background:#f5f8ff; color:#3972df; }
.crm-ui-mail .mail-workspace > .topbar .user-chip .avatar { width:34px; height:34px; }