/* app.css */
:root{
  --navy:#000033;
  --navy-2:#08084a;
  --burgundy:#8b0000;
  --gold:#d4af89;
  --bg:#f6f7fb;
  --panel:#ffffff;
  --panel-2:#f9fafc;
  --line:#e5e7ef;
  --line-strong:#d7d9e4;
  --text:#171725;
  --muted:#686879;
  --soft:#8d8da0;
  --danger:#b42318;
  --success:#067647;
  --shadow:0 10px 34px rgba(15,23,42,.10);
  --shadow-lg:0 22px 60px rgba(15,23,42,.16);
  --topbar-h:68px;
  --sidebar-w:252px;
  --rail-w:58px;
  --radius:16px;
  --radius-sm:10px;
  --ease:180ms ease;
}

*{box-sizing:border-box}
html{min-width:0;background:var(--bg);-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-width:0;
  color:var(--text);
  background:var(--bg);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:14px;
  line-height:1.45;
  overflow-x:hidden;
}
button,input,select,textarea{font:inherit}
button,a{touch-action:manipulation}
button{color:inherit}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.hidden{display:none!important}
.wide{width:100%}
body.overlay-open{overflow:hidden}

/* ---------- Shared controls ---------- */
.icon-button,
.apps-button,
.toolbar-left button,
.toolbar-right button,
.message-star button,
.star,
.trash-button,
.settings-head button,
.ws-settings-head button{
  border:0;
  background:transparent;
  min-width:40px;
  min-height:40px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background var(--ease),transform var(--ease);
}
.icon-button:hover,
.apps-button:hover,
.toolbar-left button:hover,
.toolbar-right button:hover,
.message-star button:hover,
.star:hover,
.trash-button:hover,
.ws-settings-head button:hover{
  background:#eef0f6;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:3px solid rgba(0,0,51,.18);
  outline-offset:2px;
}
.primary-btn,
.send-button{
  border:0;
  border-radius:999px;
  background:var(--navy);
  color:#fff;
  min-height:42px;
  padding:0 20px;
  font-weight:700;
  cursor:pointer;
}
.primary-btn:hover,.send-button:hover{background:var(--navy-2)}
.secondary-btn{
  border:1px solid var(--line-strong);
  border-radius:999px;
  background:#fff;
  min-height:42px;
  padding:0 18px;
  font-weight:650;
  cursor:pointer;
}
.secondary-btn:hover{background:#f5f6fa}

/* ---------- Authentication ---------- */
.auth-page{
  min-height:100dvh;
  background:
    radial-gradient(circle at 12% 18%,rgba(212,175,137,.16),transparent 26rem),
    linear-gradient(135deg,var(--navy),#07073f 48%,#11112f);
  color:#fff;
}
.auth-shell{min-height:100dvh;display:flex;flex-direction:column}
.auth-stage{
  width:min(1120px,calc(100% - 48px));
  margin:auto;
  padding:40px 0;
}
.auth-card{
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(330px,.9fr) minmax(420px,1.1fr);
  min-height:560px;
  background:#fff;
  color:var(--text);
  border:1px solid rgba(255,255,255,.16);
  border-radius:26px;
  box-shadow:0 34px 90px rgba(0,0,0,.26);
}
.auth-brand-panel{
  background:
    linear-gradient(165deg,rgba(255,255,255,.05),transparent 52%),
    var(--navy);
  color:#fff;
  padding:42px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-width:0;
}
.auth-brand-top{display:flex;flex-direction:column;gap:26px}
.auth-brand-logo img{width:min(220px,72%);max-height:88px;object-fit:contain;object-position:left center}
.auth-brand-copy{max-width:34rem}
.auth-tagline{
  margin-top:auto;
  padding-top:28px;
  color:var(--gold);
  font-size:13px;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.auth-form-panel{
  padding:60px clamp(34px,6vw,80px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}
.auth-form-panel form{width:100%}
.auth-subtitle{color:var(--muted);font-size:16px;margin:0 0 28px}
.auth-field{margin:0 0 16px}
.auth-field input{
  width:100%;
  height:54px;
  border:1px solid var(--line-strong);
  border-radius:12px;
  padding:0 16px;
  color:var(--text);
  background:#fff;
}
.auth-field input:focus{border-color:var(--navy)}
.auth-link{color:var(--navy);font-weight:650}
.auth-actions{
  margin-top:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.selected-account{
  margin:0 0 18px;
  padding:11px 14px;
  border:1px solid var(--line);
  background:var(--panel-2);
  border-radius:999px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.auth-error{
  margin:0 0 18px;
  padding:12px 14px;
  border-radius:10px;
  color:var(--danger);
  background:#fff1f0;
  border:1px solid #ffd7d4;
}
.auth-security{margin-top:26px;color:var(--soft);font-size:12px}
.auth-footer{
  width:min(1120px,calc(100% - 48px));
  margin:0 auto 24px;
  display:flex;
  justify-content:flex-end;
  gap:22px;
  font-size:12px;
  color:rgba(255,255,255,.72);
}

/* Prevent legacy login-only overlays from appearing as detached UI */
.auth-page .search-panel,
.auth-page .settings-sheet{display:none!important}

/* ---------- Main workspace ---------- */
.ws-body{
  min-height:100dvh;
  background:var(--bg);
  overflow:hidden;
}
.topbar{
  position:sticky;
  top:0;
  z-index:60;
  height:var(--topbar-h);
  display:grid;
  grid-template-columns:var(--sidebar-w) minmax(280px,760px) minmax(160px,1fr);
  gap:18px;
  align-items:center;
  padding:0 18px 0 10px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
}
.brand-lockup{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.logo-chip{
  width:36px;
  height:36px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:var(--navy);
  overflow:hidden;
  flex:0 0 auto;
}
.logo-chip img{width:26px;height:26px;object-fit:contain}
.brand-word{
  font-size:18px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--navy);
  white-space:nowrap;
}
.search-wrap{
  position:relative;
  min-width:0;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  height:48px;
  border:1px solid transparent;
  border-radius:14px;
  background:#f0f2f7;
  transition:border-color var(--ease),background var(--ease),box-shadow var(--ease);
}
.search-wrap:focus-within{
  background:#fff;
  border-color:#d9dce7;
  box-shadow:0 5px 18px rgba(15,23,42,.08);
}
.search-icon{display:grid;place-items:center;color:var(--muted);font-size:19px}
.search-wrap input{
  min-width:0;
  width:100%;
  height:46px;
  border:0;
  outline:0;
  background:transparent;
  padding:0 6px;
  color:var(--text);
}
.search-options{
  height:36px;
  margin-right:6px;
  padding:0 13px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-weight:650;
}
.search-options:hover{background:#e5e8f0;color:var(--text)}
.top-actions{
  min-width:0;
  justify-self:end;
  display:flex;
  align-items:center;
  gap:2px;
}
.apps-button{
  display:grid;
  grid-template-columns:repeat(3,3px);
  grid-auto-rows:3px;
  gap:3px;
}
.apps-button span{width:3px;height:3px;background:currentColor;border-radius:50%}
.avatar{
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:var(--burgundy);
  color:#fff;
  font-weight:800;
  cursor:pointer;
}
.account-menu{position:relative;margin-left:4px}
.account-dropdown{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  width:min(300px,calc(100vw - 24px));
  padding:18px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:var(--shadow-lg);
  display:none;
  z-index:120;
}
.account-menu:focus-within .account-dropdown,
.account-menu:hover .account-dropdown{display:grid;gap:14px}
.account-dropdown strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.account-dropdown a{color:var(--navy);font-weight:700}

.workspace{
  height:calc(100dvh - var(--topbar-h));
  display:grid;
  grid-template-columns:var(--sidebar-w) minmax(0,1fr) var(--rail-w);
  min-width:0;
}
.sidebar{
  min-width:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:14px 10px 22px;
  background:#fff;
  border-right:1px solid var(--line);
}
.compose{
  width:auto;
  min-width:150px;
  height:52px;
  margin:2px 6px 14px;
  padding:0 20px;
  border:0;
  border-radius:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--navy);
  color:#fff;
  font-weight:800;
  box-shadow:0 8px 22px rgba(0,0,51,.18);
  cursor:pointer;
}
.compose:hover{background:var(--navy-2)}
.compose-plus{font-size:23px;font-weight:400;line-height:1}
.mail-nav{display:grid;gap:2px}
.nav-item,
.ws-label-row{
  min-height:42px;
  display:grid;
  grid-template-columns:28px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  border-radius:0 999px 999px 0;
  padding:0 12px 0 14px;
  color:#414153;
}
.nav-item:hover,.ws-label-row:hover{background:#f1f2f6}
.nav-item.active{background:#ececf6;color:var(--navy);font-weight:800}
.nav-item strong,.ws-label-row .count{font-size:12px}
.labels-head,
.ws-sidebar-section{
  margin:18px 12px 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.labels-head button,.ws-sidebar-section button{
  border:0;background:transparent;cursor:pointer;font-size:18px;
}
.tagline{
  margin:22px 12px 4px;
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  color:#9999a8;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.tagline i{font-style:normal;color:var(--gold)}
.folder-icon{color:var(--soft)}

.mail-main{
  min-width:0;
  height:100%;
  overflow:auto;
  background:#fff;
}
.mail-toolbar{
  position:sticky;
  top:0;
  z-index:25;
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:6px 12px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:3px;min-width:0}
.toolbar-left label{padding:0 8px}
.toolbar-right span{
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
}
.toolbar-link{
  width:40px;
  height:40px;
  border-radius:999px;
  display:grid;
  place-items:center;
}
.toolbar-link:hover{background:#eef0f6}

.toast{
  position:sticky;
  top:8px;
  z-index:70;
  width:min(680px,calc(100% - 24px));
  margin:10px auto;
  padding:12px 16px;
  border-radius:12px;
  box-shadow:var(--shadow);
}
.toast.success{background:#ecfdf3;color:var(--success);border:1px solid #abefc6}
.toast.error{background:#fef3f2;color:var(--danger);border:1px solid #fecdca}

/* Categories */
.ws-category-tabs{
  min-width:0;
  display:flex;
  overflow-x:auto;
  scrollbar-width:thin;
  border-bottom:1px solid var(--line);
  background:#fff;
}
.ws-category-tab{
  flex:1 0 150px;
  min-width:150px;
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 14px;
  color:var(--muted);
  border-bottom:3px solid transparent;
  white-space:nowrap;
}
.ws-category-tab:hover{background:#fafafd}
.ws-category-tab.active{color:var(--navy);border-bottom-color:var(--navy);font-weight:800}
.ws-cat-icon{
  width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
  background:#f1f2f6;font-size:11px;font-weight:800;
}
.ws-category-note{
  padding:2px 6px;border-radius:999px;background:#f0f1f5;color:#838394;font-size:9px;
}

/* Mail rows */
.message-list{min-width:0}
.message{
  min-width:0;
  min-height:48px;
  display:grid;
  grid-template-columns:34px minmax(150px,220px) minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:4px 14px 4px 10px;
  border-bottom:1px solid #eceef3;
  cursor:pointer;
  transition:box-shadow var(--ease),background var(--ease);
}
.message:hover{
  position:relative;
  z-index:2;
  background:#fff;
  box-shadow:0 2px 8px rgba(15,23,42,.12);
}
.message.unread{background:#fff;font-weight:700}
.message.read{background:#f8f9fb;color:#555565}
.message .sender,
.message .subject{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.message .subject strong{font-weight:inherit}
.star{
  min-width:32px;min-height:32px;
  color:#9a9aa8;
}
.ws-row-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:2px;
  min-width:0;
}
.ws-row-actions button{
  min-width:32px;min-height:32px;border:0;border-radius:999px;background:transparent;cursor:pointer;
}
.ws-row-actions button:hover{background:#eceef4}
.real-empty{
  min-height:260px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  text-align:center;
  color:var(--muted);
  padding:32px;
}
.real-empty strong{font-size:17px;color:var(--text)}

/* Message reading */
.message-view{
  width:min(100%,1100px);
  margin:0 auto;
  padding:30px clamp(18px,4vw,52px) 64px;
}
.message-view > h1,
.message-view > h2{
  margin:0 0 22px;
  font-size:clamp(22px,3vw,30px);
  line-height:1.22;
  letter-spacing:-.02em;
}
.message-meta{
  min-width:0;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:12px;
  align-items:start;
  margin-bottom:22px;
}
.avatar.small{
  width:38px;height:38px;display:grid;place-items:center;
}
.message-meta > div{min-width:0}
.message-meta strong{
  display:block;
  overflow-wrap:anywhere;
}
.message-meta > div > div{color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.message-star{margin:0}
.message-body{
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:normal;
  line-height:1.62;
}
.message-body table{max-width:100%!important}
.message-body img{max-width:100%!important;height:auto!important}
.message-body pre{max-width:100%;overflow:auto;white-space:pre-wrap}
.message-body iframe{max-width:100%}
.reply-actions{
  margin-top:34px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* Right app rail */
.side-apps.right-rail{
  background:#fff;
  border-left:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding-top:14px;
}
.side-apps.right-rail button{
  width:40px;height:40px;border:0;border-radius:50%;background:transparent;cursor:pointer;
}
.side-apps.right-rail button:hover{background:#eef0f6}

/* Compose */
.compose-window{
  position:fixed;
  z-index:150;
  right:24px;
  bottom:0;
  width:min(580px,calc(100vw - 32px));
  height:min(620px,calc(100dvh - 94px));
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px 16px 0 0;
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.compose-window form{
  height:100%;
  display:grid;
  grid-template-rows:48px auto auto minmax(0,1fr) 58px;
}
.compose-head{
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--navy);
  color:#fff;
  font-weight:750;
}
.compose-head button{
  width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:#fff;font-size:20px;cursor:pointer;
}
.compose-head button:hover{background:rgba(255,255,255,.12)}
.compose-field{border-bottom:1px solid var(--line)}
.compose-field input{
  width:100%;
  height:46px;
  border:0;
  outline:0;
  padding:0 14px;
}
.compose-body{
  width:100%;
  min-width:0;
  min-height:0;
  resize:none;
  border:0;
  outline:0;
  padding:16px;
  line-height:1.55;
}
.compose-footer{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-top:1px solid var(--line);
}
.compose-tools{
  flex:1;
  min-width:0;
  color:var(--muted);
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/* Launcher */
.app-launcher{
  position:fixed;
  z-index:145;
  top:62px;
  right:16px;
  width:min(360px,calc(100vw - 24px));
  max-height:calc(100dvh - 78px);
  overflow:auto;
  padding:18px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
  box-shadow:var(--shadow-lg);
}
.launcher-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
  padding:10px 8px 14px;
  border-bottom:1px solid var(--line);
  color:var(--navy);
  font-weight:800;
}
.launcher-brand img{
  width:40px;height:40px;object-fit:contain;background:var(--navy);border-radius:11px;padding:6px;
}
.app-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.app-grid button{
  min-height:84px;
  border:0;
  border-radius:14px;
  background:transparent;
  display:grid;
  place-items:center;
  align-content:center;
  gap:6px;
  cursor:pointer;
}
.app-grid button:hover{background:#f2f3f7}
.app-grid b{font-size:20px;color:var(--navy)}
.app-grid span{font-size:12px}
.launcher-tagline{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  text-align:center;color:var(--soft);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
}

/* Search/settings overlays */
.ws-advanced-search{
  position:fixed;
  z-index:140;
  top:62px;
  left:50%;
  transform:translateX(-50%);
  width:min(680px,calc(100vw - 24px));
  display:none;
  grid-template-columns:1fr 1fr;
  gap:12px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow-lg);
}
.ws-advanced-search.open{display:grid}
.ws-advanced-search input,
.ws-advanced-search select{
  min-width:0;
  height:44px;
  border:1px solid var(--line-strong);
  border-radius:10px;
  padding:0 12px;
  background:#fff;
}
.ws-advanced-search .wide,
.ws-advanced-search .actions{grid-column:1/-1}
.ws-advanced-search .actions{display:flex;justify-content:flex-end;gap:10px}

.ws-settings{
  position:fixed;
  z-index:150;
  inset:0 0 0 auto;
  width:min(880px,94vw);
  background:#fff;
  box-shadow:-18px 0 60px rgba(15,23,42,.16);
  transform:translateX(102%);
  transition:transform 220ms ease;
  display:grid;
  grid-template-rows:64px minmax(0,1fr);
  grid-template-columns:220px minmax(0,1fr);
}
.ws-settings.open{transform:translateX(0)}
.ws-settings-head{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  border-bottom:1px solid var(--line);
}
.ws-settings-tabs{
  min-width:0;
  overflow:auto;
  padding:12px;
  border-right:1px solid var(--line);
  background:#fafafd;
}
.ws-settings-tabs button{
  width:100%;
  min-height:40px;
  border:0;
  border-radius:9px;
  background:transparent;
  text-align:left;
  padding:8px 10px;
  cursor:pointer;
  color:var(--muted);
}
.ws-settings-tabs button:hover{background:#eef0f5}
.ws-settings-tabs button.active{background:#eaeaF3;color:var(--navy);font-weight:800}
.ws-settings-content{min-width:0;overflow:auto;padding:28px}
.ws-setting-section{display:none}
.ws-setting-section.active{display:block}
.ws-setting-section h2{margin:0 0 22px}
.ws-setting-row{padding:18px 0;border-bottom:1px solid var(--line)}
.ws-setting-row h4{margin:0 0 6px}
.ws-setting-row p{margin:0;color:var(--muted)}
.ws-live-badge,.ws-placeholder-badge{
  display:inline-block;padding:2px 7px;border-radius:999px;font-size:10px;font-weight:750;
}
.ws-live-badge{background:#ecfdf3;color:var(--success)}
.ws-placeholder-badge{background:#f2f3f7;color:#71717f}

.mobile-backdrop{
  position:fixed;
  z-index:79;
  inset:var(--topbar-h) 0 0;
  background:rgba(15,23,42,.36);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--ease);
}
body.sidebar-open .mobile-backdrop{opacity:1;pointer-events:auto}

/* ---------- Large screens ---------- */
@media (min-width:1440px){
  :root{--sidebar-w:270px;--rail-w:64px}
  .topbar{padding-right:24px}
  .message{grid-template-columns:38px minmax(180px,240px) minmax(0,1fr) auto}
}

/* ---------- Laptop / tablet landscape ---------- */
@media (max-width:1180px){
  :root{--rail-w:0px}
  .workspace{grid-template-columns:var(--sidebar-w) minmax(0,1fr)}
  .side-apps.right-rail{display:none}
  .topbar{grid-template-columns:var(--sidebar-w) minmax(260px,1fr) auto}
  .message{grid-template-columns:34px minmax(130px,190px) minmax(0,1fr) auto}
}

/* ---------- Tablet and mobile navigation ---------- */
@media (max-width:900px){
  :root{--sidebar-w:280px}
  .topbar{
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:10px;
    padding:0 10px;
  }
  .brand{width:auto}
  .brand-word{display:none}
  .workspace{grid-template-columns:minmax(0,1fr)}
  .sidebar{
    position:fixed;
    z-index:80;
    top:var(--topbar-h);
    left:0;
    bottom:0;
    width:min(var(--sidebar-w),88vw);
    transform:translateX(-104%);
    transition:transform 220ms ease;
    box-shadow:var(--shadow-lg);
  }
  body.sidebar-open .sidebar{transform:translateX(0)}
  .compose{width:calc(100% - 12px)}
  .message{
    grid-template-columns:34px minmax(120px,170px) minmax(0,1fr);
    padding-right:10px;
  }
  .ws-row-actions{display:none}
  .ws-settings{width:min(760px,96vw)}
}

/* ---------- Phone ---------- */
@media (max-width:640px){
  :root{--topbar-h:60px}
  .topbar{
    height:var(--topbar-h);
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:5px;
    padding:0 6px;
  }
  .logo-chip{display:none}
  .search-wrap{
    height:42px;
    grid-template-columns:34px minmax(0,1fr) auto;
    border-radius:12px;
  }
  .search-wrap input{height:40px}
  .search-options{
    width:38px;
    overflow:hidden;
    text-indent:-9999px;
    position:relative;
    padding:0;
    margin-right:2px;
  }
  .search-options::after{
    content:"⌕";
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    text-indent:0;
    font-size:17px;
  }
  .top-actions > .icon-button[title="Help"]{display:none}
  .top-actions{gap:0}
  .top-actions .icon-button,
  .top-actions .apps-button{min-width:36px;min-height:36px}
  .avatar{width:34px;height:34px}
  .account-menu{margin-left:0}

  .mail-toolbar{min-height:48px;padding:4px 6px}
  .toolbar-left button,.toolbar-right button,.toolbar-link{min-width:36px;width:36px;min-height:36px;height:36px}
  .toolbar-right span{max-width:130px;overflow:hidden;text-overflow:ellipsis}

  .ws-category-tab{
    flex:0 0 auto;
    min-width:128px;
    min-height:50px;
    font-size:12px;
  }
  .ws-category-note{display:none}

  .message{
    position:relative;
    min-height:68px;
    grid-template-columns:30px minmax(0,1fr) auto;
    grid-template-areas:
      "star sender sender"
      "star subject subject";
    gap:0 8px;
    padding:7px 10px 7px 7px;
  }
  .message form{grid-area:star;align-self:center}
  .message .sender{
    grid-area:sender;
    align-self:end;
    font-size:13px;
  }
  .message .subject{
    grid-area:subject;
    align-self:start;
    color:var(--muted);
    font-size:12px;
  }
  .message.unread .subject{color:var(--text)}
  .message:hover{box-shadow:none;background:#fafafd}

  .message-view{padding:20px 14px 50px}
  .message-view > h1,.message-view > h2{font-size:22px}
  .message-meta{grid-template-columns:36px minmax(0,1fr) auto;gap:9px}
  .avatar.small{width:34px;height:34px}
  .reply-actions .secondary-btn{flex:1 1 120px}

  .compose-window{
    inset:0;
    width:100vw;
    height:100dvh;
    border:0;
    border-radius:0;
  }
  .compose-window form{grid-template-rows:54px auto auto minmax(0,1fr) 62px}
  .compose-head{padding:0 12px}
  .compose-footer{padding:max(8px,env(safe-area-inset-bottom)) 10px}
  .compose-tools{font-size:12px}
  .send-button{min-width:82px}

  .app-launcher{
    top:56px;
    right:6px;
    width:calc(100vw - 12px);
    max-height:calc(100dvh - 64px);
    border-radius:16px;
  }

  .ws-advanced-search{
    top:60px;
    width:100vw;
    max-height:calc(100dvh - 60px);
    overflow:auto;
    border-radius:0;
    border-left:0;
    border-right:0;
    grid-template-columns:1fr;
  }
  .ws-advanced-search .wide,
  .ws-advanced-search .actions{grid-column:1}

  .ws-settings{
    width:100vw;
    grid-template-columns:1fr;
    grid-template-rows:58px auto minmax(0,1fr);
  }
  .ws-settings-head{grid-column:1}
  .ws-settings-tabs{
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:8px;
    display:flex;
    gap:6px;
    overflow-x:auto;
  }
  .ws-settings-tabs button{
    width:auto;
    flex:0 0 auto;
    white-space:nowrap;
  }
  .ws-settings-content{padding:20px 16px}

  .auth-stage{
    width:100%;
    padding:0;
    margin:0;
  }
  .auth-card{
    min-height:100dvh;
    border-radius:0;
    border:0;
    box-shadow:none;
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0,1fr);
  }
  .auth-brand-panel{
    min-height:160px;
    padding:24px 22px;
  }
  .auth-brand-logo img{width:150px;max-height:58px}
  .auth-brand-copy{display:none}
  .auth-tagline{padding-top:16px;margin:0;font-size:10px}
  .auth-form-panel{
    padding:36px 22px max(36px,env(safe-area-inset-bottom));
    justify-content:flex-start;
  }
  .auth-field input{height:52px}
  .auth-footer{display:none}
}

/* ---------- Very narrow phones ---------- */
@media (max-width:400px){
  .top-actions .icon-button#wsSettingsButton{display:none}
  .search-wrap{grid-template-columns:32px minmax(0,1fr) 34px}
  .ws-category-tab{min-width:116px}
  .compose-footer{gap:6px}
  .compose-tools{display:none}
  .auth-form-panel{padding-left:18px;padding-right:18px}
}

/* ---------- Landscape phone ---------- */
@media (max-height:520px) and (orientation:landscape){
  .compose-window{inset:0;width:100vw;height:100dvh;border-radius:0}
  .auth-card{min-height:100dvh}
  .auth-brand-panel{display:none}
  .auth-card{grid-template-rows:1fr}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

/* ============================================================
   DSDILLON MAIL MOBILE END STATE — LOGIN / SHELL V1
   ============================================================ */

@media (max-width:720px) {

    html,
    body {
        width:100% !important;
        max-width:100% !important;

        min-width:0 !important;

        overflow-x:hidden !important;

        -webkit-text-size-adjust:100%;
    }

    *,
    *::before,
    *::after {
        box-sizing:border-box;
    }

    body > *,
    main,
    section,
    article,
    form,
    fieldset {
        min-width:0;
        max-width:100%;
    }

    form {
        max-width:100%;
    }

    input,
    select,
    textarea {
        max-width:100%;

        font-size:16px;
    }

    button,
    [role="button"],
    input[type="submit"] {
        touch-action:manipulation;
    }


    /*
     * Authentication page containment.
     * Works without depending on a new asset or new wrapper.
     */

    body form {
        max-width:
            calc(
                100vw
                - 24px
            );
    }

    body input[type="email"],
    body input[type="password"],
    body input[type="text"],
    body input[type="tel"],
    body input[type="search"] {
        width:100%;
        max-width:100%;
    }

    body button,
    body input[type="submit"] {
        max-width:100%;
    }


    /*
     * Main Mail shell.
     */

    .app-shell,
    .mail-shell,
    .workspace-shell,
    .main-shell,
    .mail-app,
    .app-layout {
        width:100% !important;
        max-width:100% !important;

        min-width:0 !important;

        overflow-x:hidden !important;
    }

    .sidebar,
    .mail-sidebar {
        max-width:100vw;
    }

    .mail-main,
    .main-content,
    .mail-content {
        min-width:0 !important;
        max-width:100% !important;
    }
}

/* DSDILLON MAIL MOBILE END STATE — LOGIN / SHELL V1 */


/* ============================================================
   DSDILLON INDIVIDUAL USER SETTINGS V1
   ============================================================ */

.avatar {
    overflow:hidden;
}

.account-avatar-photo {
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:inherit;
}

.dsd-personal-settings-entry {
    border:
        1px solid
        rgba(0,0,51,.10);

    border-radius:12px;

    padding:14px;

    background:#fff;
}

@media (max-width:720px) {

    .dsd-personal-settings-entry {
        width:100%;
        max-width:100%;

        box-sizing:border-box;
    }
}

/* DSDILLON INDIVIDUAL USER SETTINGS V1 */


/*
 * DSDILLON MESSAGE ACTIONS / SHOW ORIGINAL UI V1
 */

.message-command-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:12px 0 16px;
    padding:0;
    position:relative;
    z-index:8;
}

.message-command-primary{
    display:flex;
    align-items:center;
    gap:8px;
}

.message-command-btn,
.message-more-toggle{
    min-height:38px;
    border:1px solid rgba(20,28,45,.14);
    border-radius:9px;
    background:#fff;
    color:#20242d;
    padding:8px 13px;
    font:inherit;
    font-size:13px;
    cursor:pointer;
}

.message-command-btn:hover,
.message-more-toggle:hover{
    background:#f5f6f9;
}

.message-more-toggle{
    width:40px;
    min-width:40px;
    padding:0;
    font-size:22px;
    line-height:1;
}

.message-more-wrap{
    position:relative;
}

.message-more-menu{
    position:absolute;
    top:calc(100% + 6px);
    right:0;
    z-index:10020;
    width:250px;
    max-height:min(
        560px,
        calc(100dvh - 120px)
    );
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:6px;
    border:1px solid rgba(20,28,45,.12);
    border-radius:11px;
    background:#fff;
    box-shadow:
        0 14px 38px
        rgba(18,28,45,.18);
}

.message-more-menu[hidden]{
    display:none !important;
}

.message-more-menu form{
    margin:0;
}

.message-more-menu a,
.message-more-menu button{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    min-height:39px;
    margin:0;
    padding:8px 10px;
    border:0;
    border-radius:7px;
    background:transparent;
    color:#222733;
    text-align:left;
    text-decoration:none;
    font:inherit;
    font-size:13px;
    cursor:pointer;
}

.message-more-menu a:hover,
.message-more-menu button:hover,
.message-more-menu a:focus-visible,
.message-more-menu button:focus-visible{
    background:#f1f3f7;
    outline:none;
}

.message-more-menu a span,
.message-more-menu button span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:20px;
    min-width:20px;
    color:#606776;
}

.message-menu-separator{
    height:1px;
    margin:5px 4px;
    background:#e7e9ee;
}

@media(max-width:720px){
    .message-command-row{
        position:sticky;
        top:
            calc(
                env(safe-area-inset-top)
                + 52px
            );
        z-index:50;
        margin:8px -4px 14px;
        padding:7px 4px;
        background:
            rgba(255,255,255,.96);
        backdrop-filter:blur(10px);
    }

    .message-command-primary{
        min-width:0;
    }

    .message-command-btn{
        min-height:42px;
        padding:8px 12px;
    }

    .message-more-toggle{
        min-height:42px;
        width:44px;
        min-width:44px;
    }

    .message-more-menu{
        position:fixed;
        left:8px;
        right:8px;
        top:auto;
        bottom:
            calc(
                8px
                + env(safe-area-inset-bottom)
            );
        width:auto;
        max-height:
            min(
                72dvh,
                620px
            );
        padding:8px;
        border-radius:14px;
    }

    .message-more-menu a,
    .message-more-menu button{
        min-height:46px;
        padding:10px 12px;
        font-size:14px;
    }
}

@media print{
    .topbar,
    .sidebar,
    .mail-toolbar,
    .message-command-row,
    .reply-actions,
    .compose-window{
        display:none !important;
    }

    body,
    .mail-main,
    .message-view{
        background:#fff !important;
        color:#000 !important;
    }

    .message-view{
        width:100% !important;
        max-width:none !important;
        box-shadow:none !important;
    }
}

/*
 * DSDILLON MESSAGE SECURITY PANEL V1
 */

.message-danger-action{
    color:#9f2020 !important;
}

.dsd-security-panel{
    margin:16px 0;
    border:1px solid rgba(25,32,48,.13);
    border-radius:12px;
    background:#fff;
    overflow:hidden;
    box-shadow:
        0 7px 22px
        rgba(19,31,53,.07);
}

.dsd-security-panel[hidden]{
    display:none !important;
}

.dsd-security-panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px;
    border-bottom:1px solid #e8eaf0;
}

.dsd-security-panel-head strong{
    display:block;
    font-size:15px;
}

.dsd-security-panel-head span{
    display:block;
    margin-top:2px;
    color:#727985;
    font-size:12px;
}

.dsd-security-panel-head button{
    width:38px;
    height:38px;
    border:0;
    border-radius:8px;
    background:#f3f4f7;
    font-size:21px;
    cursor:pointer;
}

.dsd-security-panel-body{
    padding:16px;
}

.dsd-security-summary{
    display:grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap:10px;
}

.dsd-security-item{
    padding:11px 12px;
    border:1px solid #e8eaf0;
    border-radius:9px;
    background:#fafbfc;
    min-width:0;
}

.dsd-security-item strong{
    display:block;
    margin-bottom:5px;
    color:#707784;
    font-size:10px;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.dsd-security-item span{
    display:block;
    overflow-wrap:anywhere;
    font-size:13px;
}

.dsd-security-evidence{
    display:grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap:0;
    margin-top:14px;
    border:1px solid #e8eaf0;
    border-radius:9px;
    overflow:hidden;
}

.dsd-security-evidence > div{
    padding:11px 13px;
    border-right:1px solid #e8eaf0;
    border-bottom:1px solid #e8eaf0;
    min-width:0;
}

.dsd-security-evidence strong{
    display:block;
    margin-bottom:4px;
    color:#727985;
    font-size:11px;
}

.dsd-security-evidence span{
    overflow-wrap:anywhere;
    font-size:12px;
}

.dsd-security-trust-note{
    margin-top:14px;
    padding:11px 13px;
    border-left:3px solid #000033;
    background:#f5f6fb;
    color:#525966;
    font-size:12px;
    line-height:1.5;
}

.dsd-security-auth-details{
    margin-top:14px;
}

.dsd-security-auth-details summary{
    cursor:pointer;
    font-size:13px;
    font-weight:600;
}

.dsd-security-auth-details pre{
    margin:9px 0 0;
    padding:11px;
    overflow:auto;
    border-radius:8px;
    background:#11131a;
    color:#e8edf4;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    font-size:11px;
    line-height:1.5;
}

.dsd-security-links{
    display:flex;
    gap:8px;
    margin-top:14px;
}

.dsd-security-links a{
    display:inline-flex;
    align-items:center;
    min-height:38px;
    padding:8px 12px;
    border:1px solid #dfe2e8;
    border-radius:8px;
    color:#20242d;
    text-decoration:none;
    font-size:12px;
}

.dsd-security-loading,
.dsd-security-error,
.dsd-security-empty{
    padding:14px;
    border-radius:8px;
    background:#f5f6f8;
    font-size:13px;
}

@media(max-width:720px){

    .dsd-security-panel{
        margin:12px 0;
    }

    .dsd-security-summary{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .dsd-security-evidence{
        grid-template-columns:1fr;
    }

    .dsd-security-evidence > div{
        border-right:0;
    }

    .dsd-security-links{
        flex-direction:column;
    }

    .dsd-security-links a{
        justify-content:center;
        min-height:44px;
    }
}


/*
 * DSDILLON MESSAGE PRODUCTIVITY UI V4
 */

.dsd-productivity-modal{
    position:fixed;
    inset:0;
    z-index:20050;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:
        max(16px,env(safe-area-inset-top))
        16px
        max(16px,env(safe-area-inset-bottom));

    background:rgba(10,15,30,.48);

    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
}

.dsd-productivity-modal[hidden]{
    display:none !important;
}

.dsd-productivity-card{
    width:min(430px,100%);

    max-height:calc(100vh - 32px);
    max-height:calc(100dvh - 32px);

    overflow-y:auto;
    -webkit-overflow-scrolling:touch;

    box-sizing:border-box;

    padding:16px;

    border:1px solid rgba(20,28,45,.13);
    border-radius:14px;

    background:#fff;

    box-shadow:
        0 22px 60px
        rgba(10,18,35,.25);
}

.dsd-productivity-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;
    margin-bottom:14px;
}

.dsd-productivity-head button{
    width:40px;
    height:40px;

    border:0;
    border-radius:8px;

    background:#f2f3f6;

    font-size:21px;
    cursor:pointer;
}

.dsd-productivity-card form{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.dsd-productivity-choice{
    width:100%;
    min-height:50px;

    padding:10px 13px;

    border:1px solid #e1e4ea;
    border-radius:9px;

    background:#fff;
    color:#222733;

    text-align:left;
    font:inherit;

    cursor:pointer;
}

.dsd-productivity-field{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.dsd-productivity-field span{
    color:#626a78;

    font-size:12px;
    font-weight:600;
}

.dsd-productivity-field input{
    width:100%;
    min-height:46px;

    box-sizing:border-box;

    padding:9px 10px;

    border:1px solid #dce0e7;
    border-radius:8px;

    background:#fff;
    font:inherit;
}

@media(max-width:720px){

    .dsd-productivity-modal{
        align-items:flex-end;

        padding:
            8px
            8px
            calc(
                8px
                + env(safe-area-inset-bottom)
            );
    }

    .dsd-productivity-card{
        width:100%;

        border-radius:
            16px
            16px
            12px
            12px;
    }

    .dsd-productivity-choice{
        min-height:52px;
    }
}

/* ============================================================
   DSDILLON MAIL — PROFILE AVATAR CONTAINMENT V2
   Prevent intrinsic profile-photo dimensions from expanding
   the mailbox header on mobile/WebKit.
   ============================================================ */

.top-actions .account-menu {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

.top-actions .account-menu > .avatar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;

    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

    aspect-ratio: 1 / 1 !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;

    overflow: hidden !important;
    flex: 0 0 38px !important;

    line-height: 1 !important;
}

.top-actions .account-menu > .avatar > .account-avatar-photo {
    display: block !important;

    box-sizing: border-box !important;

    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;

    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

    aspect-ratio: 1 / 1 !important;

    object-fit: cover !important;
    object-position: center center !important;

    border: 0 !important;
    border-radius: 50% !important;

    margin: 0 !important;
    padding: 0 !important;

    flex: none !important;
}

@media (max-width: 720px) {
    .top-actions .account-menu > .avatar {
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;

        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;

        flex-basis: 34px !important;
    }

    .top-actions .account-menu > .avatar > .account-avatar-photo {
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;

        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
    }
}


/* ==========================================================
   DSDILLON_CANONICAL_CONVERSATION_CSS_V1
   ========================================================== */

.dsd-conversation-shell{
    width:100%;
    min-width:0;
}

.dsd-conversation-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:14px 18px 6px;
    padding:11px 14px;
    border:1px solid var(--border,#e2e4ec);
    border-radius:12px;
    background:var(--panel,#fff);
}

.dsd-conversation-head > div{
    display:flex;
    align-items:baseline;
    gap:8px;
    min-width:0;
}

.dsd-conversation-head strong{
    font-size:13px;
    color:var(--text,#202124);
}

.dsd-conversation-eyebrow{
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--muted,#737582);
}

.dsd-conversation-status{
    flex:0 0 auto;
    font-size:10px;
    font-weight:700;
    color:var(--muted,#737582);
}

.dsd-conversation-stack{
    display:grid;
    gap:7px;
    margin:8px 18px;
    min-width:0;
}

.dsd-thread-message{
    display:block;
    min-width:0;
    overflow:hidden;
    border:1px solid var(--border,#e2e4ec);
    border-radius:12px;
    background:var(--panel,#fff);
}

.dsd-thread-message[open]{
    box-shadow:
        0 1px 4px rgba(0,0,40,.06);
}

.dsd-thread-message-summary{
    display:grid;
    grid-template-columns:
        34px
        minmax(0,1fr)
        auto
        18px;
    align-items:center;
    gap:10px;
    min-height:58px;
    padding:9px 12px;
    cursor:pointer;
    list-style:none;
    user-select:none;
}

.dsd-thread-message-summary::-webkit-details-marker{
    display:none;
}

.dsd-thread-message-summary:hover{
    background:rgba(0,0,40,.025);
}

.dsd-thread-avatar{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    max-width:32px!important;
    min-height:32px!important;
    max-height:32px!important;
}

.dsd-thread-summary-main{
    display:grid;
    gap:2px;
    min-width:0;
}

.dsd-thread-summary-main strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
    color:var(--text,#202124);
}

.dsd-thread-summary-main span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:11px;
    color:var(--muted,#737582);
}

.dsd-thread-message-summary time{
    font-size:11px;
    color:var(--muted,#737582);
    white-space:nowrap;
}

.dsd-thread-chevron{
    display:grid;
    place-items:center;
    font-size:20px;
    line-height:1;
    color:var(--muted,#737582);
    transition:transform .16s ease;
}

.dsd-thread-message[open]
.dsd-thread-chevron{
    transform:rotate(90deg);
}

.dsd-thread-message-content{
    padding:2px 16px 14px 56px;
    min-width:0;
}

.dsd-thread-text{
    padding-top:8px;
    border-top:1px solid var(--border,#eceef3);
    color:var(--text,#262633);
    font-size:14px;
    line-height:1.55;
    overflow-wrap:anywhere;
    white-space:normal;
}

.dsd-thread-empty{
    padding-top:9px;
    border-top:1px solid var(--border,#eceef3);
    color:var(--muted,#737582);
    font-size:12px;
}

.dsd-thread-card-actions{
    display:flex;
    justify-content:flex-start;
    margin-top:13px;
}

.dsd-thread-card-actions .secondary-btn{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:7px 12px;
    text-decoration:none;
}

.dsd-conversation-shell > .message-view{
    margin-top:8px;
}

@media (max-width:720px){

    .dsd-conversation-head{
        margin:
            8px
            10px
            5px;
        padding:9px 11px;
    }

    .dsd-conversation-status{
        display:none;
    }

    .dsd-conversation-stack{
        margin:
            7px
            10px;
    }

    .dsd-thread-message-summary{
        grid-template-columns:
            32px
            minmax(0,1fr)
            auto
            16px;
        gap:8px;
        min-height:54px;
        padding:8px 9px;
    }

    .dsd-thread-message-summary time{
        max-width:88px;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .dsd-thread-message-content{
        padding:
            0
            11px
            12px
            49px;
    }

    .dsd-thread-text{
        font-size:13px;
        line-height:1.5;
    }
}

@media (max-width:480px){

    .dsd-conversation-eyebrow{
        display:none;
    }

    .dsd-thread-message-summary{
        grid-template-columns:
            30px
            minmax(0,1fr)
            16px;
    }

    .dsd-thread-message-summary time{
        grid-column:2;
        grid-row:2;
        max-width:none;
    }

    .dsd-thread-chevron{
        grid-column:3;
        grid-row:1 / span 2;
    }

    .dsd-thread-message-content{
        padding:
            0
            10px
            11px;
    }
}


/* ==========================================================
   DSDILLON_MOBILE_SIDEBAR_FINAL_V1
   Premium dark mobile navigation containment
   ========================================================== */

.ws-sidebar-section.v32-label-head{
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    min-width:0;
    background:transparent;
    border:0;
    color:inherit;
}

.ws-sidebar-section.v32-label-head > span:first-child{
    display:block;
    min-width:0;
}

.ws-sidebar-section.v32-label-head > span:last-child{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex:0 0 auto;
    min-width:0;
}

.ws-sidebar-section.v32-label-head button{
    appearance:none;
    -webkit-appearance:none;
    box-sizing:border-box;
    border:0;
    background:transparent;
    color:inherit;
    box-shadow:none;
    font:inherit;
}

@media (max-width:720px){

    /*
     * Sidebar itself
     */
    .sidebar{
        box-sizing:border-box;
        overflow-x:hidden;
    }

    /*
     * LABELS heading
     */
    .ws-sidebar-section.v32-label-head{
        margin:18px 18px 8px;
        padding:0 4px;
        width:auto;
        min-height:30px;
        background:transparent !important;
        border:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;
        color:rgba(255,255,255,.72);
    }

    .ws-sidebar-section.v32-label-head > span:first-child{
        font-size:12px;
        line-height:1;
        font-weight:700;
        letter-spacing:.12em;
        text-transform:uppercase;
        white-space:nowrap;
        color:rgba(255,255,255,.62);
    }

    .ws-sidebar-section.v32-label-head > span:last-child{
        gap:3px;
    }

    /*
     * Create-label button
     */
    .ws-sidebar-section.v32-label-head #v32AddLabel{
        width:30px;
        height:30px;
        min-width:30px;
        min-height:30px;
        padding:0;
        margin:0;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        border-radius:9px;
        background:transparent !important;
        color:rgba(255,255,255,.88) !important;
        font-size:20px;
        font-weight:400;
        line-height:1;
    }

    /*
     * More button
     */
    .ws-sidebar-section.v32-label-head #toggleLabels{
        width:auto;
        min-width:48px;
        height:30px;
        min-height:30px;
        padding:0 8px;
        margin:0;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        border-radius:9px;
        background:transparent !important;
        color:rgba(255,255,255,.88) !important;
        font-size:12px;
        font-weight:700;
        line-height:1;
    }

    .ws-sidebar-section.v32-label-head #v32AddLabel:hover,
    .ws-sidebar-section.v32-label-head #v32AddLabel:focus-visible,
    .ws-sidebar-section.v32-label-head #toggleLabels:hover,
    .ws-sidebar-section.v32-label-head #toggleLabels:focus-visible{
        background:rgba(255,255,255,.08) !important;
        outline:none;
    }

    /*
     * User label rows
     */
    .canonical-label-list{
        box-sizing:border-box;
        width:100%;
        min-width:0;
        padding:0 14px 18px;
    }

    .canonical-label-list .ws-label-row{
        box-sizing:border-box;
        display:grid;
        grid-template-columns:22px minmax(0,1fr) auto;
        align-items:center;
        column-gap:10px;
        width:100%;
        min-width:0;
        min-height:42px;
        margin:0;
        padding:7px 12px;
        border-radius:12px;
        overflow:hidden;
        text-decoration:none;
    }

    .canonical-label-list .ws-label-row .folder-icon{
        width:22px;
        min-width:22px;
        text-align:center;
        opacity:.7;
    }

    .canonical-label-list .ws-label-row .name{
        display:block;
        min-width:0;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:normal;
        overflow-wrap:anywhere;
        line-height:1.32;
    }

    .canonical-label-list .ws-label-row .count{
        justify-self:end;
        min-width:28px;
        padding-left:6px;
        text-align:right;
        white-space:nowrap;
        font-variant-numeric:tabular-nums;
    }

    /*
     * Main nav rows remain aligned even with 4-digit counts.
     */
    .mail-nav .nav-item{
        box-sizing:border-box;
        display:grid;
        grid-template-columns:34px minmax(0,1fr) auto;
        align-items:center;
        width:100%;
        min-width:0;
    }

    .mail-nav .nav-item > span:nth-child(2){
        min-width:0;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .mail-nav .nav-item > strong{
        min-width:42px;
        padding-left:8px;
        text-align:right;
        white-space:nowrap;
        font-variant-numeric:tabular-nums;
    }

    /*
     * Prevent horizontal sidebar bleed.
     */
    .sidebar,
    .mail-nav,
    .canonical-label-list,
    .ws-sidebar-section.v32-label-head{
        max-width:100%;
    }
}
/*
 * DSDILLON_PROFILE_AVATAR_POLISH_V3_REMOVED
 *
 * Removed because the generic profile-photo selector leaked
 * into My Settings and reduced the large profile preview.
 * Account-menu avatar styling is handled by the scoped
 * certified rules below.
 */

/* ============================================================
   DSDILLON_ACCOUNT_AVATAR_CERTIFIED_FINAL_V1

   The button defines the avatar circle.
   The photograph fills that exact circle edge-to-edge.
   This overrides the older V3 image border and 6px image margin.
   ============================================================ */

.top-actions .account-menu {
    margin-left: 7px !important;
}

.top-actions .account-menu > button.avatar {
    position: relative !important;

    display: block !important;

    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;

    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

    aspect-ratio: 1 / 1 !important;

    box-sizing: border-box !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    outline: 0 !important;

    border-radius: 50% !important;
    overflow: hidden !important;

    background: var(--burgundy) !important;
    box-shadow: none !important;

    line-height: 0 !important;

    flex: 0 0 38px !important;
}

.top-actions .account-menu > button.avatar >
.account-avatar-photo {

    position: absolute !important;
    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;

    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;

    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    outline: 0 !important;

    border-radius: 50% !important;

    object-fit: cover !important;
    object-position: center center !important;

    background: transparent !important;
    box-shadow: none !important;

    transform: none !important;

    flex: none !important;
}

@media (max-width: 720px) {

    .top-actions .account-menu {
        margin-left: 7px !important;
    }

    .top-actions .account-menu >
    button.avatar {

        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;

        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;

        flex: 0 0 36px !important;
    }

    .top-actions .account-menu >
    button.avatar >
    .account-avatar-photo {

        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;

        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;

        margin: 0 !important;

        border: 0 !important;
    }
}

/* Contained Smart Insert feedback */

.dsd-v7-inline-notice {
    box-sizing: border-box;

    width: 100%;

    margin: 0 0 12px;
    padding: 10px 12px;

    border: 1px solid rgba(15,23,42,.12);
    border-radius: 10px;

    background: rgba(15,23,42,.045);

    color: #0f172a;

    font-size: 13px;
    line-height: 1.4;
}

.dsd-v7-inline-notice-error {
    border-color: rgba(127,29,29,.2);
    background: rgba(127,29,29,.06);
    color: #7f1d1d;
}
.auth-commercial-entry{display:flex;justify-content:center;gap:8px;margin-top:12px;font-size:12px}.auth-commercial-entry a{font-weight:800;color:inherit}

@media (max-width:900px){
  .account-menu:hover .account-dropdown,
  .account-menu:focus-within .account-dropdown{display:none}
  .account-menu.open .account-dropdown{display:grid;gap:14px}
}


@media (max-width:900px){
  .account-menu:hover .account-dropdown,
  .account-menu:focus-within .account-dropdown{display:none}
  .account-menu.open .account-dropdown{display:grid;gap:14px}
}


.account-menu.account-closed .account-dropdown{display:none!important}
.account-menu.open .account-dropdown{display:grid!important;gap:14px}


/* DSDILLON AVATAR FIRST PAINT V1
   A real profile photo must never expose the burgundy initials fallback
   while the image resource is still loading. */
.top-actions .account-menu > button.avatar.has-photo{
  background:transparent !important;
}
.top-actions .account-menu > button.avatar.has-initial{
  background:var(--burgundy) !important;
}


/* DSDILLON INLINE AVATAR FIRST PAINT V2
   The signed-in header avatar is embedded in the initial HTML response.
   No secondary profile image request is required. */
.top-actions .account-menu > button.avatar.has-inline-avatar{
  background-color:transparent !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

/* DSD_MAIL_MESSAGE_VIEWPORT_V1 */
.message-view{min-width:0;max-width:100%;}
.message-body{box-sizing:border-box;width:100%;min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;}
.message-body > *{max-width:100%;}
.message-body img,.message-body video,.message-body svg,.message-body canvas{max-width:100%!important;height:auto;}
.message-body table{max-width:100%!important;}

/* DSDILLON_QUARANTINE_REVIEW_UI_V1 */
.dsd-quarantine-review{margin:16px 0;padding:18px;border:1px solid rgba(139,0,0,.28);border-radius:14px;background:rgba(139,0,0,.055)}
.dsd-quarantine-review>strong{display:block;font-size:1.05rem;color:#8b0000;margin-bottom:6px}
.dsd-quarantine-review p{margin:0 0 14px;line-height:1.55;max-width:780px}
.dsd-quarantine-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.dsd-quarantine-actions form{margin:0}
@media(max-width:640px){.dsd-quarantine-actions{display:grid;grid-template-columns:1fr}.dsd-quarantine-actions form,.dsd-quarantine-actions button{width:100%}}

.quarantine-mode .message-command-row{display:none!important}

/* DSDILLON_LABELS_COLLAPSE_V1 */
.labels-collapse-toggle{display:inline-flex!important;align-items:center;justify-content:center;min-width:28px!important;width:28px!important;height:28px!important;padding:0!important;font-size:15px!important;line-height:1!important}
.canonical-label-list.labels-collapsed{display:none!important}
@media(max-width:900px){.ws-sidebar-section.v32-label-head{position:sticky;top:0;z-index:3}}

/* canonical-ui-2.1.css */
/* Canonical Mail UI 2.0 */
.mail-toolbar-title{font-size:14px;font-weight:800;color:#303044}.toolbar-link.disabled{opacity:.3;pointer-events:none}.message-snippet{font-weight:400;color:#787889}.sync-banner{margin:12px 16px;padding:12px 15px;border:1px solid #d8dcea;background:#f8f9fd;border-radius:12px;display:flex;gap:8px;flex-wrap:wrap;color:#5e6072}.sync-banner strong{color:#000033}.category-count{margin-left:5px;padding:1px 7px;border-radius:999px;background:#f0f1f5;font-size:10px;color:#6f7080}.canonical-label-list{display:grid;gap:2px}.ws-label-row.active{background:#ececf6;color:#000033;font-weight:800}.ws-sidebar-section button{font-size:11px;color:#000033;font-weight:800}.message{grid-template-columns:38px minmax(180px,240px) minmax(0,1fr) auto auto}.message time{font-size:12px;color:#777889;white-space:nowrap}.mail-toolbar form{display:flex;gap:2px}.mail-toolbar form button{min-width:38px;min-height:38px;border:0;border-radius:999px;background:transparent;cursor:pointer}.mail-toolbar form button:hover{background:#eef0f6}.sidebar{scrollbar-width:thin}.workspace{min-width:0}.mail-main{min-width:0}.search-options{min-width:62px}.real-empty{min-height:360px}.ws-settings{z-index:170}.ws-advanced-search{z-index:175}.compose-window{z-index:180}
@media(max-width:1180px){.message{grid-template-columns:36px minmax(150px,210px) minmax(0,1fr) auto}.message .ws-row-actions{display:none}}
@media(max-width:900px){.message{grid-template-columns:34px minmax(150px,1fr) auto;grid-template-areas:'star sender time' 'star subject subject';min-height:66px;padding:8px 10px}.message>form{grid-area:star}.message .sender{grid-area:sender}.message .subject{grid-area:subject}.message time{grid-area:time;align-self:center}.message .ws-row-actions{display:none}.sync-banner{margin:8px 10px}.canonical-label-list{padding-bottom:8px}}
@media(max-width:640px){.brand-word{display:none}.search-options{min-width:40px;width:40px;font-size:0}.search-options:after{content:'☷';font-size:18px}.message{grid-template-columns:30px minmax(0,1fr) auto;min-height:72px}.message .sender{font-size:13px}.message .subject{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.message-snippet{display:none}.message time{font-size:11px}.ws-category-tab{min-width:118px}.ws-sidebar-section{position:sticky;top:0;background:#fff;z-index:2}.tagline{padding-bottom:24px}.mail-toolbar-title{max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
/* Canonical row isolation hotfix 2.1.
   These classes deliberately do not inherit the legacy .message row system. */
.canonical-message-list{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  height:auto!important;
  min-height:1px!important;
  visibility:visible!important;
  opacity:1!important;
  position:relative!important;
  z-index:1;
}
.canonical-message-row{
  display:grid!important;
  grid-template-columns:38px minmax(180px,240px) minmax(0,1fr) auto auto!important;
  align-items:center!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
  min-height:54px!important;
  height:auto!important;
  padding:5px 16px 5px 12px!important;
  margin:0!important;
  border:0!important;
  border-bottom:1px solid #eceef3!important;
  background:#fff!important;
  color:#171725!important;
  visibility:visible!important;
  opacity:1!important;
  overflow:visible!important;
  position:relative!important;
  cursor:pointer;
}
.canonical-message-row.read{background:#fafbfc!important;color:#555565!important;font-weight:400}
.canonical-message-row.unread{background:#fff!important;color:#171725!important;font-weight:700}
.canonical-message-row:hover{z-index:2;box-shadow:0 2px 10px rgba(15,23,42,.10)}
.canonical-star-form{margin:0!important;display:block!important}
.canonical-star{
  width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;
  border:0!important;border-radius:999px!important;background:transparent!important;
  color:#8d8da0!important;font-size:17px!important;cursor:pointer!important;
}
.canonical-star:hover{background:#eef0f6!important}
.canonical-sender,.canonical-subject{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.canonical-sender{font-size:14px!important}
.canonical-subject{font-size:13px!important;line-height:1.4!important}
.canonical-subject strong{font-weight:inherit!important}
.canonical-snippet{font-weight:400!important;color:#787889!important}
.canonical-time{
  color:#777889!important;font-size:12px!important;white-space:nowrap!important;
}
.canonical-row-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important}
.canonical-row-actions form{display:flex!important;gap:2px!important;margin:0!important}
.canonical-row-actions button{
  width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;
  border:0!important;border-radius:999px!important;background:transparent!important;cursor:pointer!important;
}
.canonical-row-actions button:hover{background:#eef0f6!important}

/* The top search says "Search all mail", so searches are globally scoped. */
.search-wrap{isolation:isolate}

/* Gmail-style Inbox means Primary category, while the sidebar count remains unread Inbox. */
.ws-category-tabs{position:relative;z-index:3}

@media(max-width:1180px){
  .canonical-message-row{
    grid-template-columns:36px minmax(150px,210px) minmax(0,1fr) auto!important;
  }
  .canonical-row-actions{display:none!important}
}
@media(max-width:900px){
  .canonical-message-row{
    grid-template-columns:34px minmax(0,1fr) auto!important;
    grid-template-areas:"star sender time" "star subject subject"!important;
    min-height:66px!important;
    padding:8px 10px!important;
  }
  .canonical-star-form{grid-area:star!important;align-self:center!important}
  .canonical-sender{grid-area:sender!important}
  .canonical-subject{grid-area:subject!important}
  .canonical-time{grid-area:time!important;align-self:center!important}
  .canonical-row-actions{display:none!important}
}
@media(max-width:640px){
  .canonical-message-row{
    grid-template-columns:30px minmax(0,1fr) auto!important;
    min-height:72px!important;
  }
  .canonical-sender{font-size:13px!important}
  .canonical-subject{font-size:12px!important}
  .canonical-snippet{display:none!important}
  .canonical-time{font-size:11px!important}
}

/* DSDILLON-MIME-ATTACHMENTS-V1 */
.message-attachments{
    margin:24px 0 6px;
    padding-top:18px;
    border-top:1px solid rgba(0,0,0,.10);
}
.message-attachments-title{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:12px;
    font-weight:700;
}
.message-attachments-title span{
    min-width:22px;
    padding:2px 7px;
    border-radius:999px;
    background:rgba(0,0,0,.07);
    text-align:center;
    font-size:12px;
}
.message-attachment-grid{
    display:grid;
    gap:10px;
}
.message-attachment-card{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border:1px solid rgba(0,0,0,.12);
    border-radius:12px;
    background:#fff;
}
.message-attachment-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    flex:0 0 38px;
    border-radius:10px;
    background:rgba(0,0,51,.07);
    font-size:18px;
}
.message-attachment-info{
    min-width:0;
    flex:1;
}
.message-attachment-info strong,
.message-attachment-info span{
    display:block;
}
.message-attachment-info strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.message-attachment-info span{
    margin-top:3px;
    font-size:12px;
    opacity:.66;
}
.message-attachment-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.message-attachment-actions a{
    text-decoration:none;
    font-weight:600;
    font-size:13px;
}
.message-body img{
    max-width:100%;
    height:auto;
}
@media(max-width:700px){
    .message-attachment-card{
        align-items:flex-start;
        flex-wrap:wrap;
    }
    .message-attachment-actions{
        width:100%;
        padding-left:50px;
    }
}

/* DSD_MAIL_KEYBOARD_FOCUS_V1 */
.canonical-message-row:focus-visible{
  outline:2px solid rgba(0,0,51,.55);
  outline-offset:-2px;
}

/* DSD_MAIL_CONTENT_SECURITY_UI_V1 */
.dsd-security-banner{margin:0 0 18px;padding:14px 16px;border:1px solid rgba(180,120,0,.35);border-radius:12px;background:rgba(255,247,220,.96);line-height:1.45}
.dsd-security-banner-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:6px}
.dsd-security-banner-title span{font-size:.82rem;font-weight:600;white-space:nowrap}
.dsd-security-high,.dsd-security-quarantine{border-color:rgba(150,20,20,.38);background:rgba(255,235,235,.98)}
.dsd-security-quarantine{box-shadow:inset 4px 0 0 rgba(140,0,0,.8)}
.dsd-security-banner-body{font-size:.94rem}
.dsd-security-reasons{margin:8px 0 0 20px;padding:0;font-size:.9rem}
@media (max-width:700px){.dsd-security-banner-title{align-items:flex-start;flex-direction:column;gap:4px}}

/* DSD_MAIL_ACCOUNT_SWITCHER_V1 */
.dsd-mailbox-switcher{display:flex;flex-direction:column;gap:6px;padding:10px 0 12px;border-top:1px solid rgba(127,127,127,.18);border-bottom:1px solid rgba(127,127,127,.18);margin:8px 0}
.dsd-mailbox-switcher label{font-size:.75rem;font-weight:700;letter-spacing:.02em}
.dsd-mailbox-switcher select{width:100%;min-height:38px;border:1px solid rgba(127,127,127,.28);border-radius:8px;padding:7px 9px;background:inherit;color:inherit}
.dsd-viewing-mailbox{display:inline-block;font-size:.72rem;font-weight:700;margin-top:2px}
.dsd-auth-principal{display:block;opacity:.72;margin-top:2px}

/* DSD_MAIL_ACCOUNT_SWITCHER_MOBILE_FIX_V2 */
.dsd-mailbox-switch-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
}
.dsd-mailbox-switch-button{
  min-height:38px;
  padding:7px 12px;
  border:0;
  border-radius:8px;
  cursor:pointer;
  font-weight:700;
}
@media (max-width:700px){
  .dsd-mailbox-switch-row{
    grid-template-columns:1fr;
  }
  .dsd-mailbox-switch-button{
    width:100%;
  }
}

/* composer-v2.css */
/*
 * DSDillon Mail
 * Composer V4 Executive
 */

.compose-window.composer-v2.hidden{
    display:none !important;
}

.compose-window.composer-v2{
    position:fixed !important;

    right:22px !important;
    bottom:18px !important;

    width:min(
        590px,
        calc(100vw - 36px)
    ) !important;

    max-width:590px !important;
    max-height:min(
        610px,
        calc(100vh - 44px)
    ) !important;

    overflow:hidden !important;

    border:
        1px solid
        rgba(18,28,48,.11) !important;

    border-radius:
        18px !important;

    background:
        #fbfcff !important;

    box-shadow:
        0 30px 90px
            rgba(15,23,42,.22),
        0 9px 26px
            rgba(0,0,51,.08) !important;

    z-index:9999 !important;

    animation:
        dsdComposeV4
        .18s
        cubic-bezier(.2,.75,.25,1) !important;

    transition:
        width .18s ease,
        height .18s ease,
        transform .18s ease !important;
}

@keyframes dsdComposeV4{
    from{
        opacity:0;
        transform:
            translateY(8px)
            scale(.99);
    }

    to{
        opacity:1;
        transform:
            translateY(0)
            scale(1);
    }
}

.compose-window.composer-v2 form{
    display:flex !important;
    flex-direction:column !important;

    width:100% !important;

    max-height:min(
        610px,
        calc(100vh - 44px)
    ) !important;
}

/* ======================================================
   EXPANDED / MINIMIZED
   ====================================================== */

.compose-window.composer-v2.is-expanded{
    width:min(
        920px,
        calc(100vw - 54px)
    ) !important;

    max-width:920px !important;

    max-height:
        calc(100vh - 54px) !important;
}

.compose-window.composer-v2.is-expanded form{
    max-height:
        calc(100vh - 54px) !important;
}

.compose-window.composer-v2.is-expanded .compose-editor{
    min-height:360px !important;
    max-height:520px !important;
}

.compose-window.composer-v2.is-minimized{
    width:350px !important;
}

.compose-window.composer-v2.is-minimized
form > *:not(.compose-head){
    display:none !important;
}

/* ======================================================
   HEADER
   ====================================================== */

.composer-v2 .compose-head{
    display:grid !important;

    grid-template-columns:
        34px 1fr auto !important;

    align-items:center !important;

    gap:10px !important;

    min-height:56px !important;

    padding:
        8px 10px !important;

    background:
        radial-gradient(
            circle at 86% -20%,
            rgba(212,175,137,.20),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #000033 0%,
            #081252 58%,
            #15237e 100%
        ) !important;

    color:#fff !important;
}

.composer-v2 .compose-head::before{
    content:"" !important;

    width:32px !important;
    height:32px !important;

    border-radius:
        9px !important;

    background:
        rgba(255,255,255,.10)
        url("/assets/brand/dsdillon-brand-mark-white.png")
        center / 20px 20px
        no-repeat !important;

    border:
        1px solid
        rgba(255,255,255,.13) !important;
}

.composer-v2 .compose-head span{
    font-size:.91rem !important;
    font-weight:760 !important;
}

.composer-v2 .compose-head span::after{
    content:
        "Secure business message" !important;

    display:block !important;

    margin-top:1px !important;

    color:
        rgba(255,255,255,.56) !important;

    font-size:.61rem !important;
    font-weight:500 !important;

    letter-spacing:.025em !important;
}

.compose-window-actions{
    display:flex !important;
    align-items:center !important;

    gap:4px !important;
}

.compose-window-actions button{
    width:31px !important;
    height:31px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:0 !important;

    border:
        1px solid
        rgba(255,255,255,.11) !important;

    border-radius:
        8px !important;

    background:
        rgba(255,255,255,.07) !important;

    color:#fff !important;

    font-size:.98rem !important;

    cursor:pointer !important;

    transition:
        background .13s ease !important;
}

.compose-window-actions button:hover{
    background:
        rgba(255,255,255,.15) !important;
}

/* ======================================================
   FROM / RECIPIENTS
   ====================================================== */

.composer-v2 .compose-from-row{
    display:grid !important;

    grid-template-columns:
        42px 1fr auto !important;

    align-items:center !important;

    gap:7px !important;

    min-height:44px !important;

    padding:
        5px 11px !important;

    border-bottom:
        1px solid #edf0f5 !important;

    background:#fff !important;
}

.composer-v2 .compose-from-row label{
    color:#707987 !important;

    font-size:.72rem !important;
    font-weight:700 !important;
}

.composer-v2 .compose-from-row select{
    height:34px !important;

    width:100% !important;

    padding:
        0 9px !important;

    border:
        1px solid #e4e8f0 !important;

    border-radius:
        9px !important;

    background:
        #f8f9fc !important;

    color:#182033 !important;

    outline:none !important;

    font:
        600 .8rem/1
        "Segoe UI",
        system-ui,
        sans-serif !important;
}

.compose-recipient-actions{
    display:flex !important;

    gap:2px !important;
}

.compose-recipient-actions button{
    height:30px !important;

    padding:
        0 7px !important;

    border:0 !important;

    border-radius:
        7px !important;

    background:
        transparent !important;

    color:#667080 !important;

    font-size:.68rem !important;
    font-weight:700 !important;

    cursor:pointer !important;
}

.compose-recipient-actions button:hover{
    background:
        #eef1f7 !important;

    color:#000033 !important;
}

.composer-v2 .compose-field{
    min-height:42px !important;

    display:flex !important;
    align-items:center !important;

    gap:8px !important;

    padding:
        0 12px !important;

    border-bottom:
        1px solid #edf0f5 !important;

    background:#fff !important;
}

.composer-v2 .compose-field.hidden{
    display:none !important;
}

.composer-v2 .compose-field input[type="text"]{
    flex:1 1 auto !important;

    min-width:0 !important;

    width:100% !important;
    height:41px !important;

    padding:0 !important;

    border:0 !important;

    background:
        transparent !important;

    outline:none !important;

    box-shadow:none !important;

    color:#182033 !important;

    font:
        500 .86rem/1.2
        "Segoe UI",
        system-ui,
        sans-serif !important;
}

.composer-v2 .compose-field input::placeholder{
    color:#969daa !important;
}

.compose-subject-field
#composePriority{
    width:auto !important;
    height:28px !important;

    padding:
        0 7px !important;

    border:
        1px solid
        #e4e7ee !important;

    border-radius:
        8px !important;

    background:
        #f8f9fc !important;

    color:#697281 !important;

    outline:none !important;

    font:
        600 .65rem/1
        "Segoe UI",
        system-ui,
        sans-serif !important;
}

/* ======================================================
   TOOLBAR
   ====================================================== */

.composer-v2 .compose-toolbar{
    position:relative !important;

    display:flex !important;

    align-items:center !important;

    gap:1px !important;

    min-height:40px !important;

    padding:
        4px 9px !important;

    overflow-x:auto !important;

    border:0 !important;

    border-bottom:
        1px solid #edf0f5 !important;

    background:
        #fafbfe !important;

    scrollbar-width:none !important;
}

.composer-v2 .compose-toolbar::-webkit-scrollbar{
    display:none !important;
}

.composer-v2 .compose-toolbar button{
    min-width:30px !important;
    height:30px !important;

    padding:
        0 7px !important;

    border:
        1px solid
        transparent !important;

    border-radius:
        7px !important;

    background:
        transparent !important;

    color:#505a69 !important;

    box-shadow:none !important;

    font-size:.69rem !important;
    font-weight:700 !important;

    cursor:pointer !important;
}

.composer-v2 .compose-toolbar button:hover{
    background:
        #eceff5 !important;

    color:#000033 !important;
}

.composer-v2 .compose-toolbar button.is-active{
    background:
        #000033 !important;

    color:#fff !important;
}

.compose-toolbar-separator{
    width:1px !important;
    height:17px !important;

    margin:
        0 3px !important;

    background:
        #dfe3eb !important;

    flex:
        0 0 1px !important;
}

/* ======================================================
   EDITOR
   ====================================================== */

.compose-editor-wrap{
    position:relative !important;

    flex:
        1 1 auto !important;

    background:#fff !important;
}

.composer-v2 .compose-editor{
    min-height:170px !important;
    max-height:240px !important;

    overflow-y:auto !important;

    margin:0 !important;

    padding:
        15px 14px !important;

    border:0 !important;

    outline:none !important;

    background:#fff !important;

    color:#151d2b !important;

    box-shadow:none !important;

    font:
        400 .89rem/1.58
        "Segoe UI",
        system-ui,
        sans-serif !important;
}

.composer-v2 .compose-editor:empty::before{
    content:
        "Write your message…" !important;

    color:#a0a6b0 !important;
}

.compose-drop-overlay{
    position:absolute !important;

    inset:8px !important;

    z-index:20 !important;

    display:none !important;

    align-items:center !important;
    justify-content:center !important;

    border:
        2px dashed #182a86 !important;

    border-radius:
        12px !important;

    background:
        rgba(241,245,255,.95) !important;

    color:#000033 !important;

    font-size:.8rem !important;
    font-weight:750 !important;

    pointer-events:none !important;
}

.compose-editor-wrap.is-dragging
.compose-drop-overlay{
    display:flex !important;
}

/* ======================================================
   SIGNATURE
   ====================================================== */

.compose-signature-shell{
    margin:
        0 10px 6px !important;

    padding:
        6px 8px !important;

    border:
        1px solid #e7eaf0 !important;

    border-radius:
        9px !important;

    background:
        #f8f9fc !important;

    transition:
        opacity .15s ease,
        filter .15s ease !important;
}

.compose-signature-shell.is-disabled{
    opacity:.45 !important;

    filter:
        grayscale(.7) !important;
}

.compose-signature-meta{
    display:flex !important;

    align-items:center !important;
    justify-content:space-between !important;

    gap:8px !important;

    color:#77808f !important;

    font-size:.57rem !important;
    font-weight:750 !important;

    text-transform:
        uppercase !important;

    letter-spacing:.045em !important;
}

.compose-signature-actions button{
    padding:
        2px 5px !important;

    border:0 !important;

    border-radius:
        5px !important;

    background:
        transparent !important;

    color:#35446c !important;

    font-size:.57rem !important;
    font-weight:750 !important;

    cursor:pointer !important;
}

.compose-signature-actions button:hover{
    background:
        #eceff7 !important;
}

.compose-signature-preview{
    max-height:54px !important;

    margin-top:4px !important;

    overflow:auto !important;

    color:#283142 !important;

    font-size:.66rem !important;
}

/* ======================================================
   ATTACHMENTS
   ====================================================== */

#composeAttachments{
    position:absolute !important;

    width:1px !important;
    height:1px !important;

    opacity:0 !important;

    overflow:hidden !important;

    pointer-events:none !important;
}

.compose-attachment-list{
    display:flex !important;
    flex-wrap:wrap !important;

    gap:4px !important;

    padding:
        0 10px 6px !important;
}

.compose-attachment-list:empty{
    display:none !important;
}

.compose-attachment-chip{
    display:inline-flex !important;

    align-items:center !important;

    gap:5px !important;

    max-width:220px !important;

    min-height:27px !important;

    padding:
        2px 4px 2px 8px !important;

    border:
        1px solid #e0e4ec !important;

    border-radius:
        8px !important;

    background:
        #f5f7fa !important;

    font-size:.63rem !important;
}

.compose-attachment-name{
    overflow:hidden !important;

    white-space:nowrap !important;

    text-overflow:
        ellipsis !important;

    font-weight:650 !important;
}

.compose-attachment-size{
    color:#818896 !important;
}

.compose-attachment-remove{
    width:20px !important;
    height:20px !important;

    padding:0 !important;

    border:0 !important;

    border-radius:
        6px !important;

    background:
        transparent !important;

    color:#727b88 !important;

    cursor:pointer !important;
}

.compose-attachment-remove:hover{
    background:
        #f4e8e8 !important;

    color:#8b0000 !important;
}

/* ======================================================
   POPOVERS
   ====================================================== */

.compose-popover{
    position:fixed !important;

    z-index:12000 !important;

    display:none !important;

    width:250px !important;

    padding:9px !important;

    border:
        1px solid #dfe3eb !important;

    border-radius:
        12px !important;

    background:
        rgba(255,255,255,.99) !important;

    box-shadow:
        0 18px 48px
        rgba(15,23,42,.18) !important;
}

.compose-popover.open{
    display:block !important;
}

.compose-popover-title{
    margin:
        1px 2px 8px !important;

    color:#616b7b !important;

    font-size:.6rem !important;
    font-weight:800 !important;

    text-transform:
        uppercase !important;

    letter-spacing:.055em !important;
}

.compose-format-row{
    margin-bottom:8px !important;
}

.compose-format-row label{
    display:flex !important;

    align-items:center !important;
    justify-content:space-between !important;

    gap:10px !important;

    color:#596272 !important;

    font-size:.68rem !important;
    font-weight:650 !important;
}

.compose-format-row select{
    height:28px !important;

    border:
        1px solid #e0e4ec !important;

    border-radius:
        7px !important;

    background:#f8f9fc !important;

    font-size:.67rem !important;
}

.compose-format-label{
    margin:
        8px 2px 5px !important;

    color:#838b98 !important;

    font-size:.58rem !important;
    font-weight:750 !important;
}

.compose-color-grid{
    display:flex !important;
    flex-wrap:wrap !important;

    gap:5px !important;
}

.compose-color-swatch{
    width:23px !important;
    height:23px !important;

    padding:0 !important;

    border:
        2px solid #fff !important;

    border-radius:
        7px !important;

    background:
        var(--swatch) !important;

    box-shadow:
        0 0 0 1px
        #d8dce5 !important;

    cursor:pointer !important;
}

.compose-format-actions{
    display:grid !important;

    grid-template-columns:
        repeat(2,1fr) !important;

    gap:4px !important;

    margin-top:9px !important;
}

.compose-format-actions button{
    height:29px !important;

    border:
        1px solid #e2e5ec !important;

    border-radius:
        7px !important;

    background:
        #f8f9fc !important;

    color:#4e5867 !important;

    font-size:.63rem !important;
    font-weight:700 !important;

    cursor:pointer !important;
}

.compose-format-actions button:hover{
    background:
        #eef1f6 !important;
}

/* Emoji */

.compose-emoji-panel{
    width:286px !important;
}

#composeEmojiSearch{
    width:100% !important;
    height:31px !important;

    margin-bottom:7px !important;

    padding:
        0 9px !important;

    border:
        1px solid #e0e4eb !important;

    border-radius:
        8px !important;

    outline:none !important;

    background:
        #f8f9fc !important;

    font-size:.69rem !important;
}

.compose-emoji-grid{
    display:grid !important;

    grid-template-columns:
        repeat(8,1fr) !important;

    gap:2px !important;

    max-height:190px !important;

    overflow:auto !important;
}

.compose-emoji-grid button{
    width:31px !important;
    height:31px !important;

    padding:0 !important;

    border:0 !important;

    border-radius:
        7px !important;

    background:
        transparent !important;

    font-size:1rem !important;

    cursor:pointer !important;
}

.compose-emoji-grid button:hover{
    background:
        #eef1f6 !important;
}

.compose-emoji-grid button.filtered{
    display:none !important;
}

/* More */

.compose-more-panel{
    width:230px !important;
}

.compose-option-toggle,
.compose-option-action{
    width:100% !important;

    display:flex !important;

    align-items:center !important;
    justify-content:space-between !important;

    min-height:36px !important;

    padding:
        0 8px !important;

    border:0 !important;

    border-radius:
        8px !important;

    background:
        transparent !important;

    color:#354052 !important;

    font-size:.68rem !important;
    font-weight:650 !important;

    cursor:pointer !important;
}

.compose-option-toggle:hover,
.compose-option-action:hover{
    background:
        #f1f3f7 !important;
}

.compose-option-toggle strong,
.compose-option-action strong{
    color:#737d8c !important;

    font-size:.61rem !important;
}

/* ======================================================
   FOOTER
   ====================================================== */

.compose-footer{
    min-height:52px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:space-between !important;

    padding:
        6px 10px 8px !important;

    border-top:
        1px solid #eceff4 !important;

    background:
        #fafbfe !important;
}

.compose-footer-left,
.compose-footer-right{
    display:flex !important;

    align-items:center !important;

    gap:7px !important;
}

.composer-v2 .send-button{
    min-width:82px !important;
    height:36px !important;

    padding:
        0 15px !important;

    border:0 !important;

    border-radius:
        9px !important;

    background:
        linear-gradient(
            135deg,
            #000033,
            #14247d
        ) !important;

    color:#fff !important;

    box-shadow:
        0 8px 18px
        rgba(0,0,51,.17) !important;

    font-size:.76rem !important;
    font-weight:780 !important;

    cursor:pointer !important;
}

.compose-hint,
.compose-security-state{
    color:#9299a5 !important;

    font-size:.57rem !important;
    font-weight:600 !important;
}

.compose-security-state::before{
    content:"●" !important;

    margin-right:4px !important;

    color:#20815c !important;

    font-size:.52rem !important;
}

.trash-button{
    width:34px !important;
    height:34px !important;

    padding:0 !important;

    border:
        1px solid #e3e6ed !important;

    border-radius:
        8px !important;

    background:#fff !important;

    color:#68717f !important;

    cursor:pointer !important;
}

.trash-button:hover{
    color:#8b0000 !important;

    background:#fff7f7 !important;
}

/* ======================================================
   RESPONSIVE
   ====================================================== */

@media(max-width:650px){

    .compose-window.composer-v2{
        inset:
            auto 8px 8px 8px !important;

        width:auto !important;

        max-width:none !important;

        max-height:
            calc(100vh - 16px) !important;
    }

    .compose-window.composer-v2 form{
        max-height:
            calc(100vh - 16px) !important;
    }

    .composer-v2 .compose-from-row{
        grid-template-columns:
            36px 1fr auto !important;
    }

    .composer-v2 .compose-editor{
        min-height:160px !important;
        max-height:220px !important;
    }
}

/* ==========================================================
   DSDILLON MOBILE COMPOSER FINAL V2
   ========================================================== */

@media (max-width:720px) {

    body:has(.compose-window:not(.hidden)) {
        overflow:hidden !important;
    }

    .compose-window.composer-v2 {
        position:fixed !important;
        inset:0 !important;

        width:100% !important;
        max-width:none !important;

        height:100dvh !important;
        max-height:100dvh !important;

        margin:0 !important;

        border:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;

        z-index:10000 !important;

        display:flex;
        flex-direction:column;

        overflow:hidden !important;

        padding-top:env(safe-area-inset-top);
        padding-bottom:env(safe-area-inset-bottom);

        background:#fff;
    }

    .compose-window.composer-v2 form {
        width:100% !important;
        height:100% !important;

        display:flex !important;
        flex-direction:column !important;

        min-height:0 !important;
        overflow:hidden !important;
    }

    .composer-v2 .compose-head {
        flex:0 0 auto !important;
        min-height:52px !important;
        padding:6px 10px !important;
        border-radius:0 !important;
    }

    .composer-v2 input,
    .composer-v2 textarea,
    .composer-v2 select {
        font-size:16px !important;
    }

    .composer-v2 button {
        min-height:40px;
        touch-action:manipulation;
    }

    .composer-v2 .compose-editor-wrap,
    .composer-v2 .compose-body-wrap {
        flex:1 1 auto !important;

        min-height:0 !important;

        display:flex !important;
        flex-direction:column !important;

        overflow:hidden !important;
    }

    .composer-v2 #composeEditor,
    .composer-v2 .compose-editor {
        flex:1 1 auto !important;

        min-height:160px !important;
        max-height:none !important;

        overflow-y:auto !important;
        -webkit-overflow-scrolling:touch;

        padding:12px !important;

        font-size:16px !important;
        line-height:1.45 !important;
    }

    .composer-v2 .compose-toolbar {
        width:100% !important;

        display:flex !important;
        flex-wrap:nowrap !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;

        gap:3px !important;
        padding:4px 6px !important;
    }

    .composer-v2 .compose-toolbar::-webkit-scrollbar {
        display:none;
    }

    .composer-v2 .compose-toolbar > * {
        flex:0 0 auto !important;
    }

    .composer-v2 .compose-footer {
        flex:0 0 auto !important;

        width:100% !important;

        padding:7px 8px !important;

        background:#fff;
        border-top:1px solid #e5e7eb;
    }

    .composer-v2 .compose-popover,
    .composer-v2 #composeMorePanel,
    .composer-v2 #composeFormatPanel {
        max-width:calc(100vw - 16px) !important;
        max-height:60dvh !important;
        overflow-y:auto !important;
    }

    .composer-v2 #composeEmojiPanel {
        position:fixed !important;

        left:8px !important;
        right:8px !important;
        bottom:calc(60px + env(safe-area-inset-bottom)) !important;

        width:auto !important;
        max-width:none !important;
        max-height:42dvh !important;

        overflow-y:auto !important;

        z-index:10030 !important;
    }
}

/* DSDILLON MOBILE COMPOSER FINAL V2 */


/* ============================================================
   DSDILLON MOBILE MORE ACTION SHEET V1
   ============================================================ */

@media (max-width:720px) {

    .composer-v2 #composeMorePanel {
        position:fixed !important;

        top:
            calc(
                env(safe-area-inset-top)
                + 58px
            ) !important;

        left:8px !important;
        right:8px !important;

        bottom:
            calc(
                env(safe-area-inset-bottom)
                + 8px
            ) !important;

        width:auto !important;
        min-width:0 !important;
        max-width:none !important;

        height:auto !important;
        max-height:none !important;

        margin:0 !important;

        overflow-x:hidden !important;
        overflow-y:auto !important;

        overscroll-behavior:contain;

        -webkit-overflow-scrolling:touch;

        border-radius:16px !important;

        z-index:10060 !important;

        padding-bottom:
            calc(
                18px
                + env(safe-area-inset-bottom)
            ) !important;
    }

    .composer-v2
    #composeMorePanel
    .compose-productivity-priority {
        order:-100 !important;

        margin-top:0 !important;

        padding-top:4px !important;
    }

    .composer-v2 #composeMorePanel button,
    .composer-v2 #composeMorePanel [role="button"] {
        min-height:44px !important;
        touch-action:manipulation;
    }
}

/* DSDILLON MOBILE MORE ACTION SHEET V1 */


/* ============================================================
   DSDILLON COMPOSE PRODUCTIVITY V4
   ============================================================ */

@media (max-width:720px) {

    #composeMorePanel
    .dsd-productivity-visible {
        scroll-margin-top:8px;
    }

    #composeMorePanel
    .dsd-productivity-visible:first-child {
        margin-top:0 !important;
    }
}

/* DSDILLON COMPOSE PRODUCTIVITY V4 */


/* ============================================================
   DSDILLON COMPOSER FORMAT SHEET MOBILE V1
   ============================================================ */

@media (max-width:720px) {

    /*
     * Formatting A opens a dedicated scrollable surface.
     * It is independent of the compose editor scroll position.
     */

    .composer-v2
    #composeFormatPanel {
        position:fixed !important;

        left:8px !important;
        right:8px !important;

        top:
            calc(
                env(safe-area-inset-top)
                + 58px
            ) !important;

        bottom:
            calc(
                env(safe-area-inset-bottom)
                + 64px
            ) !important;

        width:auto !important;

        height:auto !important;

        max-width:none !important;
        max-height:none !important;

        margin:0 !important;

        overflow-x:hidden !important;
        overflow-y:auto !important;

        -webkit-overflow-scrolling:touch !important;

        overscroll-behavior:contain !important;

        touch-action:pan-y !important;

        z-index:10060 !important;
    }

    .composer-v2
    #composeFormatPanel > * {
        max-width:100% !important;
    }

    .composer-v2
    #composeFormatPanel
    button,
    .composer-v2
    #composeFormatPanel
    select,
    .composer-v2
    #composeFormatPanel
    input {
        min-height:42px;

        touch-action:manipulation;
    }

    /*
     * Prevent underlying editor from stealing vertical swipes
     * while the formatting panel itself is being scrolled.
     */
    .composer-v2
    #composeFormatPanel:not(.hidden) {
        pointer-events:auto !important;
    }
}

/* DSDILLON COMPOSER FORMAT SHEET MOBILE V1 */


/* DSDILLON_OWNER_ENGAGEMENT_V1 */
.compose-owner-tracking-note{display:block;padding:0 14px 10px;color:#77798a;font-size:10px;line-height:1.45}
#composeEngagementToggle.active strong{color:#166534}

/* more-options-v7.css */
/*
 * DSDillon Mail
 * More Options V7
 */

.compose-more-panel{
    width:360px !important;
    max-height:min(500px,calc(100vh - 32px)) !important;

    overflow-y:auto !important;

    padding:10px !important;
}

#composePriority{
    display:none !important;
}

.dsd-v7-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:8px;
}

.dsd-v7-head strong{
    color:#263146;

    font-size:.72rem;
}

.dsd-v7-head small{
    color:#8a929e;

    font-size:.55rem;
}

.dsd-v7-section{
    margin-top:8px;

    padding-top:8px;

    border-top:
        1px solid #edf0f5;
}

.dsd-v7-section:first-of-type{
    margin-top:0;
    padding-top:0;
    border-top:0;
}

.dsd-v7-label{
    margin:
        0 1px 6px;

    color:#737c8b;

    font-size:.55rem;
    font-weight:850;

    letter-spacing:.055em;
    text-transform:uppercase;
}

.dsd-v7-row{
    display:flex;

    align-items:center;
    flex-wrap:wrap;

    gap:5px;
}

.dsd-v7-grid{
    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:5px;
}

.dsd-v7-control,
.dsd-v7-select{
    min-height:31px;

    border:
        1px solid #e0e4eb;

    border-radius:8px;

    background:#f9fafc;

    color:#465163;

    font-size:.62rem;
    font-weight:700;
}

.dsd-v7-control{
    padding:0 8px;

    cursor:pointer;
}

.dsd-v7-control:hover{
    border-color:
        #ccd2dd;

    background:
        #f1f3f7;
}

.dsd-v7-select{
    height:31px;

    padding:0 7px;
}

.dsd-v7-wide{
    width:100%;
}

.dsd-v7-swatch{
    width:25px;
    height:25px;

    padding:0;

    border:
        2px solid #fff;

    border-radius:7px;

    background:
        var(--swatch);

    box-shadow:
        0 0 0 1px #d7dce5;

    cursor:pointer;
}

.dsd-v7-toggle{
    display:flex;

    align-items:center;
    justify-content:space-between;

    width:100%;
    min-height:33px;

    padding:
        0 8px;

    border:
        1px solid transparent;

    border-radius:8px;

    background:transparent;

    color:#465163;

    font-size:.62rem;
    font-weight:700;

    cursor:pointer;
}

.dsd-v7-toggle:hover{
    background:#f2f4f8;
}

.dsd-v7-toggle strong{
    color:#7a8290;

    font-size:.57rem;
}

.dsd-v7-subview{
    display:none;
}

.dsd-v7-subview.open{
    display:block;
}

.dsd-v7-back{
    height:27px;

    padding:0 8px;

    border:
        1px solid #e0e4eb;

    border-radius:7px;

    background:#f8f9fc;

    color:#535d6e;

    font-size:.59rem;
    font-weight:700;

    cursor:pointer;
}

.dsd-v7-field{
    display:block;

    margin-bottom:7px;
}

.dsd-v7-field span{
    display:block;

    margin-bottom:3px;

    color:#737c8b;

    font-size:.55rem;
    font-weight:800;

    text-transform:uppercase;
}

.dsd-v7-field input,
.dsd-v7-field select,
.dsd-v7-field textarea{
    width:100%;
    min-height:32px;

    padding:6px 8px;

    border:
        1px solid #dfe3ea;

    border-radius:8px;

    background:#fafbfe;

    color:#202a3c;

    outline:none;

    font-size:.67rem;
}

.dsd-v7-field textarea{
    min-height:62px;

    resize:vertical;
}

.dsd-v7-actions{
    display:flex;

    justify-content:flex-end;

    gap:6px;

    margin-top:8px;
}

.dsd-v7-primary,
.dsd-v7-secondary{
    height:31px;

    padding:0 10px;

    border-radius:8px;

    font-size:.62rem;
    font-weight:750;

    cursor:pointer;
}

.dsd-v7-primary{
    border:0;

    background:#000033;

    color:#fff;
}

.dsd-v7-secondary{
    border:
        1px solid #e0e4eb;

    background:#fff;

    color:#515b6b;
}

.dsd-v7-preview{
    display:none;

    align-items:center;
    justify-content:center;

    min-height:150px;

    margin:8px 0;

    border:
        1px solid #e2e6ed;

    border-radius:10px;

    background:#fff;
}

.dsd-v7-preview.open{
    display:flex;
}

.dsd-v7-preview img{
    width:136px;
    height:136px;

    object-fit:contain;
}

.dsd-v7-card{
    display:inline-block;

    padding:10px 12px;

    margin:8px 0;

    border:
        1px solid #e0e4eb;

    border-radius:9px;

    background:#f8f9fc;
}

.dsd-v7-state-on{
    color:#21845c !important;
}

.dsd-v7-state-off{
    color:#8a929e !important;
}

@media(max-width:580px){

    .compose-more-panel{
        width:
            min(
                350px,
                calc(100vw - 20px)
            ) !important;
    }
}
/* ============================================================
   DSDILLON_MORE_OPTIONS_MOBILE_DRAWER_FINAL_V1

   Mobile More Options / Smart Insert is a bounded application
   drawer, not an extension of the document page.
   ============================================================ */

@media (max-width:580px) {

    .compose-more-panel {
        position: fixed !important;

        left: 8px !important;
        right: 8px !important;
        bottom:
            max(
                8px,
                env(safe-area-inset-bottom)
            ) !important;

        top: auto !important;

        box-sizing: border-box !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        height: auto !important;

        max-height:
            min(
                76dvh,
                620px
            ) !important;

        margin: 0 !important;

        padding:
            10px
            10px
            max(
                12px,
                env(safe-area-inset-bottom)
            ) !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        overscroll-behavior:
            contain !important;

        -webkit-overflow-scrolling:
            touch;

        touch-action:
            pan-y;

        scrollbar-gutter:
            stable;

        border-radius:
            16px !important;

        z-index:
            10050 !important;

        contain:
            layout paint;

        isolation:
            isolate;
    }

    /*
     * Keep the Smart Insert heading visible while the tool
     * collection scrolls beneath it.
     */
    .compose-more-panel
    .dsd-v7-head {
        position:
            sticky !important;

        top:
            -10px !important;

        z-index:
            4 !important;

        margin:
            -10px
            -10px
            8px !important;

        padding:
            11px
            10px
            9px !important;

        background:
            #fff !important;

        border-bottom:
            1px solid #edf0f5;
    }

    /*
     * A subview Back control stays available without forcing
     * the user to scroll to recover navigation.
     */
    .compose-more-panel
    .dsd-v7-back {
        position:
            sticky !important;

        top:
            38px !important;

        z-index:
            3 !important;
    }

    .compose-more-panel
    .dsd-v7-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;
    }

    .compose-more-panel
    .dsd-v7-control,
    .compose-more-panel
    .dsd-v7-select {
        min-width:
            0 !important;

        max-width:
            100% !important;
    }

    /*
     * Inputs remain inside the drawer width even while the
     * Android keyboard changes the visual viewport.
     */
    .compose-more-panel
    .dsd-v7-field input,
    .compose-more-panel
    .dsd-v7-field select,
    .compose-more-panel
    .dsd-v7-field textarea {
        box-sizing:
            border-box !important;

        max-width:
            100% !important;
    }
}

/*
 * Narrow handsets receive a single-column tool grid rather
 * than compressed controls.
 */
@media (max-width:360px) {

    .compose-more-panel
    .dsd-v7-grid {
        grid-template-columns:
            1fr !important;
    }
}

/* composer-layout-v6.css */
/*
 * DSDillon Mail
 * Compact Composer V6
 */

.compose-window.composer-v2:not(.is-expanded){
    right:14px !important;
    bottom:12px !important;

    width:min(
        500px,
        calc(100vw - 24px)
    ) !important;

    max-width:500px !important;

    height:min(
        460px,
        calc(100vh - 24px)
    ) !important;

    max-height:min(
        460px,
        calc(100vh - 24px)
    ) !important;

    overflow:hidden !important;
}

.compose-window.composer-v2:not(.is-expanded) form{
    display:flex !important;
    flex-direction:column !important;

    height:100% !important;
    max-height:none !important;

    overflow:hidden !important;
}

/* Header */

.compose-window.composer-v2:not(.is-expanded)
.compose-head{
    min-height:48px !important;
    height:48px !important;

    flex:0 0 48px !important;

    padding:5px 8px !important;
}

/* From */

.compose-window.composer-v2:not(.is-expanded)
.compose-from-row{
    min-height:38px !important;

    flex:0 0 auto !important;

    padding:2px 8px !important;
}

.compose-window.composer-v2:not(.is-expanded)
.compose-from-row select{
    height:32px !important;
}

/* Recipient / subject rows */

.compose-window.composer-v2:not(.is-expanded)
.compose-field{
    min-height:36px !important;

    flex:0 0 auto !important;

    padding:0 9px !important;
}

.compose-window.composer-v2:not(.is-expanded)
.compose-field input[type="text"]{
    height:35px !important;
}

/* Priority */

.compose-window.composer-v2:not(.is-expanded)
#composePriority{
    height:27px !important;
}

/* Recipient Intelligence */

.compose-window.composer-v2:not(.is-expanded)
.dsd-ri-strip{
    min-height:27px !important;

    flex:0 0 auto !important;

    padding:2px 7px !important;
}

.compose-window.composer-v2:not(.is-expanded)
.dsd-ri-chip{
    height:22px !important;
}

.compose-window.composer-v2:not(.is-expanded)
.dsd-ri-refresh{
    height:22px !important;
}

/* Toolbar */

.compose-window.composer-v2:not(.is-expanded)
.compose-toolbar{
    min-height:34px !important;
    height:34px !important;

    flex:0 0 34px !important;

    padding:2px 6px !important;
}

.compose-window.composer-v2:not(.is-expanded)
.compose-toolbar button{
    min-width:27px !important;
    height:27px !important;

    padding:0 6px !important;
}

/* Editor gets all remaining space */

.compose-window.composer-v2
.compose-editor-wrap{
    position:relative !important;

    flex:1 1 auto !important;

    min-height:0 !important;

    overflow:hidden !important;

    background:#fff !important;
}

.compose-window.composer-v2:not(.is-expanded)
.compose-editor{
    width:100% !important;
    height:100% !important;

    min-height:105px !important;
    max-height:none !important;

    overflow-y:auto !important;

    padding:11px 12px !important;
}

/* Signature becomes one compact status bar */

.compose-window.composer-v2
.compose-signature-shell.dsd-v6-collapsed{
    flex:0 0 auto !important;

    min-height:27px !important;

    margin:0 7px 4px !important;
    padding:4px 7px !important;

    overflow:hidden !important;
}

.compose-window.composer-v2
.compose-signature-shell.dsd-v6-collapsed
.compose-signature-preview{
    display:none !important;
}

.compose-window.composer-v2
.compose-signature-shell
.compose-signature-meta{
    margin:0 !important;
}

.dsd-v6-signature-toggle{
    border:0 !important;

    background:transparent !important;

    color:#35446c !important;

    cursor:pointer !important;

    font-size:.56rem !important;
    font-weight:750 !important;
}

/* Attachments */

.compose-window.composer-v2
.compose-attachment-list{
    flex:0 0 auto !important;

    max-height:52px !important;

    overflow-y:auto !important;
}

/* Send footer always visible */

.compose-window.composer-v2
.compose-footer{
    position:relative !important;

    bottom:auto !important;

    z-index:50 !important;

    flex:0 0 44px !important;

    min-height:44px !important;
    height:44px !important;

    margin-top:auto !important;

    padding:4px 8px 5px !important;

    background:
        rgba(250,251,254,.995) !important;

    border-top:
        1px solid #e7eaf0 !important;

    box-shadow:
        0 -6px 18px
        rgba(15,23,42,.035) !important;
}

.compose-window.composer-v2
.send-button{
    height:34px !important;

    min-width:78px !important;

    padding:0 14px !important;
}

/* Expanded mode still keeps Send accessible */

.compose-window.composer-v2.is-expanded
.compose-editor-wrap{
    flex:1 1 auto !important;
    min-height:0 !important;
}

.compose-window.composer-v2.is-expanded
.compose-editor{
    height:100% !important;
    max-height:none !important;
}

/* Mobile */

@media(max-width:540px){

    .compose-window.composer-v2:not(.is-expanded){
        inset:auto 6px 6px 6px !important;

        width:auto !important;
        max-width:none !important;

        height:min(
            480px,
            calc(100vh - 12px)
        ) !important;

        max-height:calc(100vh - 12px) !important;
    }
}
/* ============================================================
   DSDILLON_MOBILE_COMPOSE_STABILITY_FINAL_V1

   Mobile composer viewport, recipient-row and editor stability.
   Scoped exclusively to the DSDillon V2 composer.
   ============================================================ */

@media (max-width:580px) {

    /*
     * Keep the composer bounded by the current mobile viewport.
     * dvh follows Android/iOS browser chrome more accurately
     * than legacy vh while the keyboard is appearing.
     */
    .compose-window.composer-v2 {
        box-sizing:
            border-box !important;

        max-width:
            calc(100vw - 8px) !important;

        max-height:
            calc(100dvh - 8px) !important;

        overflow:
            hidden !important;

        overscroll-behavior:
            contain !important;
    }

    .compose-window.composer-v2 form {
        display:
            flex !important;

        flex-direction:
            column !important;

        min-width:
            0 !important;

        min-height:
            0 !important;

        overflow:
            hidden !important;
    }

    /*
     * Recipient and subject rows must be allowed to shrink.
     * Without min-width:0, flex children can force the entire
     * composer wider than the handset.
     */
    .compose-window.composer-v2
    .compose-field {
        box-sizing:
            border-box !important;

        width:
            100% !important;

        min-width:
            0 !important;

        max-width:
            100% !important;

        flex-wrap:
            wrap !important;

        overflow-x:
            hidden !important;
    }

    .compose-window.composer-v2
    .compose-field > * {
        min-width:
            0;
    }

    .compose-window.composer-v2
    .compose-field input,
    .compose-window.composer-v2
    .compose-field textarea,
    .compose-window.composer-v2
    .compose-field select {
        box-sizing:
            border-box !important;

        min-width:
            0 !important;

        max-width:
            100% !important;
    }

    /*
     * Common recipient-chip implementations are constrained
     * without depending on one vendor-specific class name.
     */
    .compose-window.composer-v2
    :where(
        .recipient-chip,
        .recipient-token,
        .recipient-pill,
        .compose-recipient-chip,
        .compose-recipient-token,
        [data-recipient-chip]
    ) {
        box-sizing:
            border-box !important;

        max-width:
            100% !important;

        overflow:
            hidden !important;

        text-overflow:
            ellipsis !important;

        white-space:
            nowrap !important;

        flex:
            0 1 auto !important;
    }

    /*
     * The editor region owns its own vertical scrolling.
     * Keyboard appearance therefore reduces the available
     * editor space rather than moving the entire document.
     */
    .compose-window.composer-v2
    .compose-editor-wrap {
        flex:
            1 1 auto !important;

        width:
            100% !important;

        min-width:
            0 !important;

        min-height:
            0 !important;

        overflow:
            hidden !important;

        overscroll-behavior:
            contain !important;
    }

    .compose-window.composer-v2
    .compose-editor {
        box-sizing:
            border-box !important;

        width:
            100% !important;

        min-width:
            0 !important;

        max-width:
            100% !important;

        min-height:
            96px !important;

        overflow-x:
            hidden !important;

        overflow-y:
            auto !important;

        overscroll-behavior:
            contain !important;

        -webkit-overflow-scrolling:
            touch;

        overflow-wrap:
            anywhere;

        word-break:
            break-word;
    }

    /*
     * Focused controls get a predictable browser scroll target
     * rather than causing aggressive viewport jumps.
     */
    .compose-window.composer-v2
    :where(
        input,
        textarea,
        select,
        [contenteditable="true"]
    ) {
        scroll-margin-top:
            56px;

        scroll-margin-bottom:
            64px;
    }

    /*
     * Footer remains part of the bounded composer instead of
     * participating in page-level scrolling.
     */
    .compose-window.composer-v2
    .compose-footer {
        flex:
            0 0 auto !important;

        min-width:
            0 !important;

        max-width:
            100% !important;

        z-index:
            3 !important;
    }

    /*
     * Prevent horizontal toolbars/actions from expanding the
     * compose surface beyond the screen.
     */
    .compose-window.composer-v2
    :where(
        .compose-toolbar,
        .compose-footer,
        .compose-from-row,
        .compose-attachment-list
    ) {
        box-sizing:
            border-box !important;

        min-width:
            0 !important;

        max-width:
            100% !important;
    }
}

/*
 * Extra protection for very narrow phones.
 */
@media (max-width:360px) {

    .compose-window.composer-v2
    .compose-editor {
        min-height:
            84px !important;
    }
}

/* recipient-intelligence.css */
.dsd-ri-strip{
    display:none;
    align-items:center;
    gap:5px;

    min-height:30px;

    padding:4px 9px;

    overflow-x:auto;

    border-bottom:1px solid #edf0f5;

    background:#fafbfe;

    scrollbar-width:none;
}

.dsd-ri-strip::-webkit-scrollbar{
    display:none;
}

.dsd-ri-strip.has-results{
    display:flex;
}

.dsd-ri-chip{
    flex:0 0 auto;

    display:inline-flex;
    align-items:center;
    gap:5px;

    height:24px;

    padding:0 7px;

    border:1px solid #dfe4eb;
    border-radius:999px;

    background:#fff;

    color:#55606f;

    font-size:.58rem;
    font-weight:700;

    cursor:default;
}

.dsd-ri-chip::before{
    content:"•";

    font-size:.76rem;
}

.dsd-ri-chip.is-checking::before{
    content:"◌";
    color:#687386;
}

.dsd-ri-chip.is-likely{
    border-color:#cfe8dc;
    background:#f7fcf9;
    color:#286247;
}

.dsd-ri-chip.is-likely::before{
    content:"✓";
    color:#21845c;
}

.dsd-ri-chip.is-caution{
    border-color:#eadfbf;
    background:#fffaf0;
    color:#755c20;
}

.dsd-ri-chip.is-caution::before{
    content:"!";
    color:#a57711;
}

.dsd-ri-chip.is-invalid{
    border-color:#edcccc;
    background:#fff7f7;
    color:#7e3030;
}

.dsd-ri-chip.is-invalid::before{
    content:"×";
    color:#a12d2d;
}

.dsd-ri-refresh{
    flex:0 0 auto;

    height:24px;

    padding:0 7px;

    border:1px solid #e0e4eb;
    border-radius:7px;

    background:#fff;

    color:#5d6674;

    font-size:.56rem;
    font-weight:750;

    cursor:pointer;
}

.dsd-ri-refresh:hover{
    background:#f0f2f7;
}

.dsd-ri-input-invalid{
    color:#8b0000 !important;
}

.dsd-ri-summary{
    flex:0 0 auto;

    color:#858d99;

    font-size:.54rem;
    font-weight:650;
}
/* ============================================================
   DSDILLON_RECIPIENT_INTELLIGENCE_MOBILE_FINAL_V1

   Mobile-safe recipient verification surface.
   ============================================================ */

.dsd-ri-strip{
    box-sizing:border-box;
    width:100%;
    max-width:100%;
}

.dsd-ri-chip{
    box-sizing:border-box;
    max-width:min(320px,70vw);
}

.dsd-ri-chip{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.dsd-ri-summary{
    min-width:0;
}

@media (max-width:580px){

    /*
     * Verification belongs to the composer, not to a horizontal
     * pseudo-carousel. Allow statuses to wrap naturally.
     */
    .dsd-ri-strip{
        flex-wrap:wrap;
        align-items:center;

        width:100%;
        max-width:100%;

        min-height:0;

        gap:5px;

        padding:
            6px
            8px;

        overflow-x:hidden;
        overflow-y:visible;

        overscroll-behavior:contain;
    }

    .dsd-ri-strip.has-results{
        display:flex;
    }

    .dsd-ri-chip{
        flex:
            0
            1
            auto;

        min-width:0;

        max-width:
            calc(100% - 8px);

        height:26px;

        padding:
            0
            8px;

        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    /*
     * Verify remains directly usable even when several recipient
     * chips occupy preceding rows.
     */
    .dsd-ri-refresh{
        flex:
            0
            0
            auto;

        height:28px;

        padding:
            0
            9px;

        touch-action:
            manipulation;
    }

    .dsd-ri-summary{
        flex:
            1
            1
            120px;

        min-width:
            80px;

        max-width:
            100%;

        line-height:
            1.25;

        white-space:
            normal;
    }

    /*
     * Invalid state remains visible without changing input width.
     */
    .dsd-ri-input-invalid{
        box-shadow:
            inset 3px 0 0 #8b0000;
    }
}

@media (max-width:360px){

    .dsd-ri-chip{
        max-width:
            100%;
    }

    .dsd-ri-summary{
        flex-basis:
            100%;
    }
}

/* recipient-autocomplete.css */
/*
 * DSDILLON_RECIPIENT_AUTOCOMPLETE_CSS_V1
 */

.dsd-recipient-autocomplete-host{
    position:relative;
    min-width:0;
}

.dsd-recipient-suggestions{
    position:absolute;
    z-index:10080;

    left:8px;
    right:8px;
    top:calc(100% - 1px);

    box-sizing:border-box;

    max-height:280px;

    overflow-x:hidden;
    overflow-y:auto;

    border:1px solid #dfe4eb;
    border-radius:0 0 12px 12px;

    background:#fff;

    box-shadow:
        0 14px 34px
        rgba(15,25,45,.16);

    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}

.dsd-recipient-suggestions[hidden]{
    display:none !important;
}

.dsd-recipient-suggestion{
    appearance:none;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    width:100%;

    min-width:0;

    padding:9px 11px;

    border:0;
    border-bottom:1px solid #edf0f5;

    background:#fff;

    color:#202735;

    text-align:left;

    cursor:pointer;
}

.dsd-recipient-suggestion:last-child{
    border-bottom:0;
}

.dsd-recipient-suggestion:hover,
.dsd-recipient-suggestion.is-active{
    background:#f3f6fb;
}

.dsd-recipient-suggestion-main{
    display:flex;
    flex-direction:column;

    min-width:0;

    gap:2px;
}

.dsd-recipient-suggestion-main strong{
    overflow:hidden;

    color:#1f2937;

    font-size:.75rem;
    font-weight:750;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.dsd-recipient-suggestion-main > span{
    overflow:hidden;

    color:#505a69;

    font-size:.69rem;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.dsd-recipient-suggestion small{
    flex:0 0 auto;

    max-width:42%;

    overflow:hidden;

    color:#8a93a0;

    font-size:.58rem;
    font-weight:650;

    text-overflow:ellipsis;
    white-space:nowrap;
}


@media (max-width:580px){

    .dsd-recipient-autocomplete-host{
        /*
         * Allows the results panel to sit cleanly under each
         * recipient field while remaining inside the bounded
         * composer introduced by the mobile stability layer.
         */
        overflow:visible !important;
    }

    .dsd-recipient-suggestions{
        left:4px;
        right:4px;

        max-height:min(280px,38dvh);

        border-radius:0 0 14px 14px;

        box-shadow:
            0 12px 30px
            rgba(15,25,45,.18);

        touch-action:pan-y;
    }

    .dsd-recipient-suggestion{
        min-height:48px;

        padding:
            8px
            10px;

        touch-action:manipulation;
    }

    .dsd-recipient-suggestion-main strong{
        font-size:.78rem;
    }

    .dsd-recipient-suggestion-main > span{
        font-size:.7rem;
    }

    .dsd-recipient-suggestion small{
        max-width:36%;
    }
}


@media (max-width:360px){

    .dsd-recipient-suggestion{
        align-items:flex-start;
        flex-direction:column;

        gap:4px;
    }

    .dsd-recipient-suggestion small{
        max-width:100%;
    }
}