: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;
}