/* WWCFAM Mail 11.17 — final responsive containment layer */

html,body{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:hidden;
}
*,*::before,*::after{box-sizing:border-box}
.app-shell,.layout,.workspace,.view,.page,.mail-view,.mail-list-pane,.reader,.card,.modal,.compose-window{
  min-width:0;
  max-width:100%;
}
img,video,audio,canvas,iframe{max-width:100%}

/* Header */
.topbar{
  width:100%;
  max-width:100vw;
  min-width:0;
  gap:10px;
  overflow:visible;
}
.brand{
  flex:0 1 245px;
  min-width:150px;
  max-width:245px;
  gap:10px!important;
}
.brand-copy{
  min-width:0;
  gap:5px!important;
}
.brand-title,.brand-sub{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.brand-sub{margin-top:1px!important}
.top-quick-nav{flex:0 1 auto;min-width:0;overflow:hidden}
.top-search{flex:1 1 320px;min-width:160px!important;max-width:none!important}
.account-wrap{flex:0 0 auto}

/* Main layout */
.layout{
  width:100%;
  max-width:100vw;
  grid-template-columns:clamp(220px,17vw,280px) minmax(0,1fr)!important;
}
.sidebar{min-width:0;overflow-x:hidden}
.workspace,.view,.page{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

/* Inbox */
.mail-view.active{
  grid-template-columns:minmax(300px,min(46%,620px)) minmax(0,1fr)!important;
}
.mail-list-pane,.reader{min-width:0!important}
.mail-row,.sender,.subject,.preview,.date{min-width:0}
.message-reader,.message-body,.message-meta{
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
}

/* Grids and toolbars */
.settings-grid,.account-grid,.people-grid,.file-grid{min-width:0;max-width:100%}
.people-tabs,.drive-toolbar,.social-summary,.head-actions,.identity-actions,.security-links{max-width:100%}
.people-tabs,.drive-toolbar,.social-summary{
  overflow-x:auto;
  overscroll-behavior-inline:contain;
}
input,textarea,select,button{min-width:0;max-width:100%}
.account-email,.contact-email,.file-name,.profile-username,.card p,.card h2,.page-head h1,.page-head p{
  overflow-wrap:anywhere;
}

/* Compose: flex layout so nothing gets clipped */
.compose-window,.compose-window.open{
  position:fixed!important;
  z-index:360!important;
  inset:auto 16px 16px auto!important;
  width:min(520px,calc(100vw - 32px))!important;
  height:min(560px,calc(100dvh - 92px))!important;
  max-width:520px!important;
  max-height:calc(100dvh - 92px)!important;
  display:none!important;
  flex-direction:column!important;
  overflow:hidden!important;
  border-radius:18px!important;
}
.compose-window.open{display:flex!important}
.compose-head{
  flex:0 0 48px!important;
  min-height:48px!important;
  height:48px!important;
  padding:6px 9px 6px 12px!important;
  gap:6px!important;
  overflow:hidden;
}
.compose-head #composeTitle{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.compose-mode-pill{
  min-width:0!important;
  max-width:145px!important;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.compose-head .icon-btn{
  flex:0 0 38px;
  width:38px!important;
  min-width:38px!important;
  height:38px!important;
  min-height:38px!important;
}
.compose-line{
  flex:0 0 44px!important;
  min-height:44px!important;
  height:44px!important;
  width:100%;
  overflow:hidden;
}
.compose-line label{
  flex:0 0 58px!important;
  width:58px!important;
  padding-left:11px!important;
}
.compose-line input{
  flex:1 1 auto!important;
  width:auto!important;
  min-width:0!important;
  height:43px!important;
  padding:8px 10px!important;
}
.recipient-capability{
  flex:0 0 auto;
  min-height:0!important;
  max-height:42px!important;
  overflow:auto!important;
  padding:5px 10px!important;
}
.wwcfam-plus-panel{
  flex:0 0 auto;
  max-height:105px!important;
  overflow:auto!important;
}
#composeBody{
  flex:1 1 auto!important;
  width:100%!important;
  min-width:0!important;
  min-height:100px!important;
  height:auto!important;
  overflow:auto!important;
  resize:none!important;
  padding:12px!important;
}
.compose-foot{
  flex:0 0 auto!important;
  width:100%;
  min-width:0;
  min-height:54px!important;
  padding:6px 8px!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  gap:6px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
}
.compose-foot .send-btn{
  flex:0 0 auto;
  min-height:40px!important;
  height:40px!important;
  padding:0 16px!important;
}
.compose-foot .icon-btn{
  flex:0 0 38px!important;
  width:38px!important;
  min-width:38px!important;
  height:38px!important;
  min-height:38px!important;
}
.compose-files{
  flex:1 1 auto;
  min-width:0;
  max-width:none!important;
  max-height:40px!important;
  overflow:auto!important;
}

/* Modals */
.modal-backdrop{max-width:100vw;overflow:hidden}
.modal{
  width:min(620px,calc(100vw - 24px))!important;
  max-width:calc(100vw - 24px)!important;
  max-height:calc(100dvh - 24px)!important;
  overflow:auto!important;
}

@media(max-width:1240px){
  .top-quick-nav{display:none!important}
  .brand{flex-basis:225px;max-width:225px}
  .mail-view.active{grid-template-columns:minmax(300px,46%) minmax(0,1fr)!important}
}
@media(max-width:980px){
  .layout{grid-template-columns:88px minmax(0,1fr)!important}
  .brand-sub{display:none!important}
  .brand{flex-basis:180px;max-width:180px}
  .mail-view.active{grid-template-columns:minmax(0,1fr)!important}
}
@media(max-width:760px){
  html,body{overflow-x:hidden!important}
  .topbar{
    min-height:60px!important;
    height:60px!important;
    padding:6px 8px!important;
    gap:6px!important;
    flex-wrap:nowrap!important;
  }
  .hamburger{
    flex:0 0 42px;
    width:42px!important;
    min-width:42px!important;
    height:42px!important;
  }
  .brand{
    flex:0 1 min(46vw,190px);
    min-width:0;
    max-width:min(46vw,190px)!important;
    margin-right:auto!important;
  }
  .brand-logo{flex:0 0 36px;width:36px!important;height:36px!important}
  .brand-copy{min-width:0;max-width:130px}
  .brand-title{font-size:.86rem!important}
  .brand-sub{display:none!important}
  .desktop-search{
    flex:0 0 42px;
    width:42px!important;
    min-width:42px!important;
    height:42px!important;
  }
  .install-brand-btn{display:none!important}
  .avatar{width:38px!important;min-width:38px!important;height:38px!important}
  .layout{display:block!important;width:100vw!important;max-width:100vw!important}
  .workspace,.view,.page{width:100%!important;max-width:100vw!important}
  .mail-view.active{grid-template-columns:minmax(0,1fr)!important}
  .pane-toolbar{width:100%;min-width:0;padding:7px 9px!important}
  .pane-title{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .reader{max-width:100vw!important}
  .page{padding-left:11px!important;padding-right:11px!important}
  .settings-grid,.account-grid,.people-grid,.file-grid{grid-template-columns:minmax(0,1fr)!important}
  .card{width:100%;max-width:100%}

  .compose-window,.compose-window.open{
    inset:60px 0 calc(62px + env(safe-area-inset-bottom)) 0!important;
    width:100vw!important;
    height:auto!important;
    max-width:100vw!important;
    max-height:none!important;
    border-radius:0!important;
    border-left:0!important;
    border-right:0!important;
  }
  .compose-head{flex-basis:46px!important;min-height:46px!important;height:46px!important}
  .compose-mode-pill{max-width:104px!important}
  .compose-line{flex-basis:44px!important}
  .compose-line label{flex-basis:50px!important;width:50px!important;padding-left:9px!important}
  .compose-line input,#composeBody{font-size:16px!important}
  .recipient-capability{max-height:38px!important;padding:4px 9px!important}
  .wwcfam-plus-panel{max-height:92px!important}
  #composeBody{min-height:90px!important;padding:10px!important}
  .compose-foot{min-height:52px!important;padding:5px 7px max(5px,env(safe-area-inset-bottom))!important}
  .modal{
    width:calc(100vw - 16px)!important;
    max-width:calc(100vw - 16px)!important;
    max-height:calc(100dvh - 16px)!important;
  }
}
@media(max-width:420px){
  .brand-copy{max-width:110px}
  .brand-title{font-size:.82rem!important}
  .compose-mode-pill{display:none!important}
  .compose-foot{gap:4px!important}
}
@media(max-width:340px){
  .brand-copy{display:none!important}
  .brand{flex:0 0 38px!important;max-width:38px!important}
}


/* ==========================================================
   WWCFAM Mail 11.18 — Inbox containment / cutoff correction
   ========================================================== */

/*
 * The top site header already occupies normal document space.
 * The Inbox pane must not add --header a second time.
 */
.mail-list-pane{
  position:relative!important;
  height:calc(100dvh - var(--header))!important;
  min-height:calc(100dvh - var(--header))!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:auto!important;
  overflow-x:hidden!important;
}

.pane-toolbar{
  position:sticky!important;
  top:0!important;
  z-index:35!important;
  flex:0 0 auto!important;
  width:100%!important;
  min-height:58px!important;
  margin:0!important;
}

.mail-list{
  flex:0 0 auto!important;
  width:100%!important;
  min-width:0!important;
}

/* Empty Inbox state sits fully below the toolbar and never gets clipped. */
#mailEmpty.empty-card{
  flex:0 0 auto!important;
  width:calc(100% - 28px)!important;
  max-width:620px!important;
  min-height:108px!important;
  margin:24px auto!important;
  padding:22px 18px!important;
  display:grid;
  place-items:center;
  line-height:1.45!important;
  overflow:visible!important;
}

/* When hidden, preserve native hidden behavior. */
#mailEmpty[hidden]{
  display:none!important;
}

/*
 * Reader is already inside the layout below the top header.
 * Do not offset it by --header a second time.
 */
.reader{
  position:relative!important;
  top:auto!important;
  height:calc(100dvh - var(--header))!important;
  max-height:calc(100dvh - var(--header))!important;
  overflow:auto!important;
  overflow-x:hidden!important;
}

.reader-empty{
  min-height:100%!important;
  width:100%!important;
  padding:24px!important;
}

/* General page containment. */
.workspace{
  min-height:calc(100dvh - var(--header))!important;
}

.view{
  min-height:calc(100dvh - var(--header))!important;
}

.mail-view.active{
  min-height:calc(100dvh - var(--header))!important;
  align-items:stretch!important;
}

/* Ensure no app content can slip beneath viewport edges. */
.mail-row,
.empty-card,
.reader-empty,
.message-reader,
.page,
.card,
.contact-row,
.file-card,
.person-card{
  max-width:100%!important;
}

/* Desktop: both mail columns stay inside the available workspace. */
@media(min-width:981px){
  .mail-view.active{
    grid-template-columns:minmax(340px,min(47%,650px)) minmax(0,1fr)!important;
  }
}

/* Tablet: single Inbox pane; reader opens separately through existing behavior. */
@media(max-width:980px){
  .mail-list-pane{
    width:100%!important;
    height:calc(100dvh - var(--header))!important;
  }
}

/* Phone: no double header offset and no horizontal clipping. */
@media(max-width:760px){
  .mail-list-pane{
    height:calc(100dvh - 60px - 62px - env(safe-area-inset-bottom))!important;
    min-height:calc(100dvh - 60px - 62px - env(safe-area-inset-bottom))!important;
  }

  .pane-toolbar{
    top:0!important;
    min-height:54px!important;
  }

  #mailEmpty.empty-card{
    width:calc(100% - 20px)!important;
    margin:16px 10px!important;
    min-height:96px!important;
    padding:18px 14px!important;
  }

  .reader{
    height:calc(100dvh - 60px - 62px - env(safe-area-inset-bottom))!important;
    max-height:calc(100dvh - 60px - 62px - env(safe-area-inset-bottom))!important;
  }
}


/* ==========================================================
   WWCFAM Mail 11.19 — readable mail rows, reply, avatars
   ========================================================== */

.mail-row{
  padding:0!important;
  min-height:0!important;
}

.mail-row-open{
  appearance:none;
  width:100%;
  min-width:0;
  min-height:76px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.055);
  border-radius:0;
  background:transparent;
  color:inherit;
  display:grid;
  grid-template-columns:42px minmax(130px,.7fr) minmax(180px,1.6fr) auto;
  gap:10px;
  align-items:center;
  padding:9px 14px;
  text-align:left;
  cursor:pointer;
}

.mail-row.unread .mail-row-open{
  background:rgba(51,255,141,.065);
}

.mail-row-open:hover,
.mail-row-open:focus-visible{
  background:rgba(51,255,141,.075);
  outline:2px solid rgba(51,255,141,.45);
  outline-offset:-2px;
}

.row-avatar,
.person-avatar,
.profile-avatar-big,
.avatar{
  overflow:hidden;
}

.row-avatar img,
.person-avatar img,
.profile-avatar-big img,
.avatar img,
.avatar-preview img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.message-reader-toolbar{
  position:sticky;
  top:0;
  z-index:40;
  min-height:54px;
  margin:-34px -34px 24px;
  padding:7px 10px;
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(6,11,8,.97);
  border-bottom:1px solid rgba(51,255,141,.12);
}

.message-reader-toolbar .pane-title{
  margin-right:auto;
}

.mail-partial-note{
  margin:18px 0 0;
  padding:10px 12px;
  border:1px solid rgba(255,210,90,.3);
  border-radius:12px;
  color:#e8d69a;
  font-size:.8rem;
}

.avatar-editor{
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  gap:14px;
  align-items:start;
  margin:12px 0 18px;
  padding:14px;
  border:1px solid rgba(51,255,141,.18);
  border-radius:16px;
  background:rgba(8,20,13,.7);
}

.avatar-preview{
  width:88px!important;
  height:88px!important;
  border-radius:22px!important;
}

.avatar-editor h3{
  margin:0 0 6px;
}

.avatar-editor input[type="file"]{
  width:100%;
  margin-top:8px;
}

.avatar-editor-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}

@media(max-width:760px){
  .mail-row-open{
    min-height:82px;
    grid-template-columns:42px minmax(0,1fr) auto;
    grid-template-areas:
      "av sender date"
      "av subj subj";
    gap:4px 10px;
    padding:11px 12px;
  }

  .mail-row-open .row-avatar{grid-area:av}
  .mail-row-open .sender{grid-area:sender}
  .mail-row-open .subject-wrap{grid-area:subj}
  .mail-row-open .date{grid-area:date}

  .message-reader-toolbar{
    margin:-18px -14px 18px;
  }

  .avatar-editor{
    grid-template-columns:72px minmax(0,1fr);
    gap:10px;
  }

  .avatar-preview{
    width:72px!important;
    height:72px!important;
  }
}

@media(max-width:420px){
  .avatar-editor{
    grid-template-columns:1fr;
  }

  .avatar-preview{
    width:76px!important;
    height:76px!important;
  }

  .avatar-editor-actions>*{
    flex:1 1 100%;
  }
}


/* ==========================================================
   WWCFAM Mail 11.20 — real mail features + universal layout
   ========================================================== */

:root{
  --safe-bottom:max(0px,env(safe-area-inset-bottom));
}

/* Every screen fills the available device width without escaping it. */
html,body,.app-shell,.layout,.workspace,.view,.page{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}
body{overflow-x:hidden!important}
.page{
  margin:0!important;
  padding-inline:clamp(12px,2.4vw,32px)!important;
}
.workspace,.view,.page,.sent-layout,.mail-list-pane,.reader,.sent-reader{
  overflow-x:hidden!important;
}
.card,.contact-card,.sent-row,.file-card,.person-card,.modal,.compose-window,.record-panel{
  min-width:0!important;
  max-width:100%!important;
}
*{min-width:0}
button,input,select,textarea{font:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--green)!important;
  outline-offset:2px!important;
}

/* Sidebar folders */
.mail-folder-nav{
  display:grid;
  gap:4px;
}
.nav-create-folder{
  opacity:.92;
}
.custom-mail-folder .label{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Inbox rows now have a separate favorite control. */
.mail-row{
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr)!important;
  align-items:stretch!important;
  min-height:74px!important;
  padding:0!important;
}
.mail-star-btn{
  border:0;
  border-right:1px solid rgba(255,255,255,.045);
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-size:1.15rem;
  display:grid;
  place-items:center;
}
.mail-star-btn:hover,.mail-star-btn.active{
  color:#ffd75e;
  background:rgba(255,215,94,.08);
}
.mail-row-open{
  width:100%!important;
  min-height:74px!important;
  display:grid!important;
  grid-template-columns:42px minmax(120px,.7fr) minmax(160px,1.6fr) auto!important;
  gap:10px!important;
  align-items:center!important;
  border:0!important;
  background:transparent!important;
  color:inherit!important;
  text-align:left!important;
  padding:9px 14px!important;
  cursor:pointer;
}
.mail-row-open:hover,.mail-row-open:focus-visible{
  background:rgba(51,255,141,.055)!important;
}
.subject-wrap,.sender,.subject,.preview{
  min-width:0!important;
  max-width:100%!important;
}
.message-reader-toolbar{
  position:sticky!important;
  top:0!important;
  z-index:18!important;
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  flex-wrap:wrap!important;
  width:100%!important;
  padding:9px 10px!important;
  margin:-18px -18px 18px!important;
  width:calc(100% + 36px)!important;
  background:rgba(7,16,12,.97)!important;
  border-bottom:1px solid var(--line)!important;
}
.message-reader-toolbar .pane-title{
  flex:1 1 110px!important;
}
.reader-move-select{
  min-height:40px!important;
  max-width:180px!important;
  border:1px solid var(--line)!important;
  border-radius:12px!important;
  background:#08120d!important;
  color:var(--text)!important;
  padding:7px 9px!important;
}
.reader-star-btn.active,.sent-reader-star.active,.sent-star-btn.active{
  color:#ffd75e!important;
}

/* Sent: real two-pane reader. */
.sent-page{
  min-height:calc(100dvh - var(--header))!important;
  display:flex!important;
  flex-direction:column!important;
}
.mail-tool-row,.contact-filter-row{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  width:100%!important;
  margin-bottom:12px!important;
}
.sent-layout{
  flex:1 1 auto!important;
  display:grid!important;
  grid-template-columns:minmax(300px,46%) minmax(0,1fr)!important;
  min-height:0!important;
  border:1px solid var(--line)!important;
  border-radius:18px!important;
  overflow:hidden!important;
}
.sent-list{
  min-height:0!important;
  max-height:calc(100dvh - 240px)!important;
  overflow:auto!important;
  padding:8px!important;
  border-right:1px solid var(--line)!important;
}
.sent-reader{
  min-height:0!important;
  max-height:calc(100dvh - 240px)!important;
  overflow:auto!important;
  background:rgba(7,12,9,.68)!important;
}
.sent-reader .reader-empty{
  min-height:100%!important;
}
.sent-row{
  grid-template-columns:42px minmax(0,1fr)!important;
  padding:0!important;
  overflow:hidden!important;
}
.sent-star-btn{
  border:0!important;
  background:transparent!important;
  color:var(--muted)!important;
  cursor:pointer!important;
  font-size:1.08rem!important;
}
.sent-open-btn{
  width:100%!important;
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr) auto!important;
  gap:10px!important;
  align-items:center!important;
  text-align:left!important;
  color:inherit!important;
  border:0!important;
  background:transparent!important;
  padding:12px!important;
  cursor:pointer!important;
}
.sent-open-btn:hover,.sent-open-btn:focus-visible{
  background:rgba(51,255,141,.05)!important;
}
.sent-row-copy{
  min-width:0!important;
  display:block!important;
}
.sent-row-copy strong,.sent-row-copy .contact-email{
  display:block!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Contacts / family / folders */
.contact-filter-row{
  overflow:visible!important;
}
.contact-group-tabs{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
}
.contact-card{
  grid-template-columns:44px minmax(0,1fr) auto!important;
  align-items:center!important;
}
.contact-main{
  min-width:0!important;
}
.contact-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
  flex-wrap:wrap!important;
  max-width:100%!important;
}
.contact-groups{
  color:var(--green2);
  font-size:.74rem;
  margin-top:4px;
  overflow-wrap:anywhere;
}
.contact-fav.active{
  color:#ffd75e!important;
}
.alias-list{
  display:grid!important;
  gap:7px!important;
  margin-top:12px!important;
}
.alias-row{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  padding:9px 10px!important;
  border:1px solid var(--line)!important;
  border-radius:12px!important;
  overflow-wrap:anywhere!important;
}
.identity-profile-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}

/* Compose: From + To + Subject + body always fit. */
.compose-window,.compose-window.open{
  width:min(560px,calc(100vw - 28px))!important;
  height:min(620px,calc(100dvh - 86px))!important;
  max-width:560px!important;
  max-height:calc(100dvh - 86px)!important;
}
.compose-from-line select{
  flex:1 1 auto!important;
  width:auto!important;
  height:43px!important;
  border:0!important;
  background:transparent!important;
  color:var(--text)!important;
  padding:8px 10px!important;
  outline:0!important;
}
.compose-line label{
  white-space:nowrap!important;
}
#composeBody{
  min-height:130px!important;
}

/* Recording */
.record-panel{
  width:min(460px,calc(100vw - 24px))!important;
  max-height:calc(100dvh - 24px)!important;
  overflow:auto!important;
}
.record-live{
  justify-content:space-between!important;
}
.record-actions{
  display:flex!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  margin-top:12px!important;
}
.record-fallback-label{
  display:grid!important;
  place-items:center!important;
  margin-top:10px!important;
  text-align:center!important;
  cursor:pointer!important;
}

/* Admin deliverability */
.deliverability-status{
  display:grid!important;
  gap:8px!important;
  margin-top:12px!important;
}
.deliverability-item{
  display:grid!important;
  gap:3px!important;
  padding:10px!important;
  border:1px solid var(--line)!important;
  border-radius:12px!important;
  overflow-wrap:anywhere!important;
}
.deliverability-item.ok{border-color:rgba(51,255,141,.35)!important}
.deliverability-item.warn{border-color:rgba(255,184,77,.42)!important}
.deliverability-item span{
  font-size:.72rem!important;
  color:var(--muted)!important;
  overflow-wrap:anywhere!important;
}

/* Accessibility / high contrast */
@media(prefers-contrast:more){
  .card,.contact-row,.file-card,.person-card,.sent-layout,.modal,.compose-window{
    border-width:2px!important;
  }
  .mini,.contact-email,.preview{color:#d9f7e4!important}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

/* Tablet */
@media(max-width:980px){
  .sent-layout{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .sent-list{
    border-right:0!important;
    max-height:none!important;
  }
  .sent-reader{
    position:fixed!important;
    inset:var(--header) 0 0 0!important;
    z-index:90!important;
    width:100vw!important;
    height:calc(100dvh - var(--header))!important;
    max-height:none!important;
    transform:translateX(105%)!important;
    transition:transform .18s ease!important;
  }
  .sent-reader.open{
    transform:none!important;
  }
}

/* Phone */
@media(max-width:760px){
  .page{
    padding:12px 10px calc(78px + var(--safe-bottom))!important;
  }
  .page-head{
    width:100%!important;
  }
  .page-head h1{
    font-size:clamp(1.35rem,7vw,1.8rem)!important;
    line-height:1.15!important;
  }
  .page-head p{
    font-size:.84rem!important;
    line-height:1.45!important;
  }

  .mail-row{
    grid-template-columns:38px minmax(0,1fr)!important;
  }
  .mail-row-open{
    grid-template-columns:38px minmax(0,1fr) auto!important;
    grid-template-areas:
      "av sender date"
      "av subj subj"!important;
    gap:4px 8px!important;
    padding:10px!important;
  }
  .mail-row-open .row-avatar{grid-area:av!important}
  .mail-row-open .sender{grid-area:sender!important}
  .mail-row-open .subject-wrap{grid-area:subj!important}
  .mail-row-open .date{grid-area:date!important}

  .message-reader{
    padding:12px!important;
    width:100%!important;
  }
  .message-reader-toolbar{
    margin:-12px -12px 14px!important;
    width:calc(100% + 24px)!important;
    padding:7px!important;
  }
  .reader-move-select{
    flex:1 1 135px!important;
    max-width:none!important;
  }

  .contact-card{
    grid-template-columns:40px minmax(0,1fr)!important;
    align-items:start!important;
  }
  .contact-actions{
    grid-column:1/-1!important;
    justify-content:stretch!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .contact-actions>*{
    width:100%!important;
  }
  .contact-filter-row,.contact-group-tabs{
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    padding-bottom:4px!important;
  }
  .contact-filter-row>.pill,.contact-group-tabs>.pill{
    flex:0 0 auto!important;
  }

  .identity-profile-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }

  .compose-window,.compose-window.open{
    inset:60px 0 calc(62px + var(--safe-bottom)) 0!important;
    width:100vw!important;
    height:auto!important;
    max-width:100vw!important;
    max-height:none!important;
    border-radius:0!important;
  }
  .compose-from-line select,
  .compose-line input,
  #composeBody{
    font-size:16px!important;
  }
  .compose-foot{
    padding-bottom:max(7px,var(--safe-bottom))!important;
  }

  .record-panel{
    inset:64px 8px calc(70px + var(--safe-bottom)) 8px!important;
    width:auto!important;
    max-height:calc(100dvh - 142px - var(--safe-bottom))!important;
  }

  .sent-reader{
    inset:60px 0 calc(62px + var(--safe-bottom)) 0!important;
    height:auto!important;
  }
  .sent-open-btn{
    grid-template-columns:38px minmax(0,1fr)!important;
  }
  .sent-open-btn>.mini{
    grid-column:2!important;
  }

  .alias-row{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
}

@media(max-width:390px){
  .contact-actions{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .message-reader-toolbar .secondary-btn,
  .message-reader-toolbar .primary-btn{
    min-height:38px!important;
    padding:7px 9px!important;
    font-size:.76rem!important;
  }
}


/* ==========================================================
   v11.20 refinement — no-overflow action bars / contact state
   ========================================================== */
.message-reader-toolbar{
  max-width:none!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  overscroll-behavior-inline:contain!important;
  scrollbar-width:thin!important;
}
.message-reader-toolbar>*{
  flex-shrink:0!important;
}
.message-reader-toolbar .pane-title{
  flex:1 1 110px!important;
  min-width:88px!important;
}
.contact-family.active{
  border-color:rgba(255,96,156,.55)!important;
  color:#ffb5d1!important;
}
.sent-move-select{
  min-width:130px!important;
}
.message-body{
  width:100%!important;
  max-width:100%!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}
.message-body pre,
.message-body code{
  max-width:100%!important;
  white-space:pre-wrap!important;
  overflow-wrap:anywhere!important;
}
@media(max-width:760px){
  .message-reader-toolbar{
    flex-wrap:nowrap!important;
    width:calc(100% + 24px)!important;
  }
  .message-reader-toolbar .pane-title{
    flex:0 0 auto!important;
  }
  .reader-move-select,
  .sent-move-select{
    flex:0 0 145px!important;
    width:145px!important;
    max-width:145px!important;
  }
}


/* ==========================================================
   WWCFAM Mail 11.21 — precise favorites + cleaner email UI
   ========================================================== */

/* The star is the ONLY favorite hit target. It no longer fills the row height. */
.mail-row,
.sent-row{
  align-items:center!important;
}

.mail-star-btn,
.sent-star-btn{
  width:36px!important;
  min-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  max-width:36px!important;
  max-height:36px!important;

  align-self:center!important;
  justify-self:center!important;

  display:inline-grid!important;
  place-items:center!important;

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

  border:1px solid transparent!important;
  border-radius:999px!important;
  background:transparent!important;

  color:var(--muted)!important;
  cursor:pointer!important;

  line-height:1!important;
  touch-action:manipulation;
}

.mail-star-btn .star-glyph,
.sent-star-btn .star-glyph{
  display:block;
  font-size:1.16rem!important;
  line-height:1!important;
  pointer-events:none!important;
}

.mail-star-btn:hover,
.mail-star-btn:focus-visible,
.mail-star-btn.active,
.sent-star-btn:hover,
.sent-star-btn:focus-visible,
.sent-star-btn.active{
  color:#ffd75e!important;
  border-color:rgba(255,215,94,.28)!important;
  background:rgba(255,215,94,.08)!important;
}

.mail-star-btn:disabled,
.sent-star-btn:disabled{
  opacity:.7!important;
  cursor:wait!important;
}

/* Email row itself remains an independent click target. */
.mail-row-open,
.sent-open-btn{
  position:relative!important;
  z-index:1!important;
}

.mail-star-btn,
.sent-star-btn{
  position:relative!important;
  z-index:3!important;
}

/* Sent rows no longer use the odd diagonal arrow. */
.sent-row-avatar{
  font-weight:900!important;
  font-size:.78rem!important;
  letter-spacing:.04em;
}

/* Reader favorite control stays a simple star. */
.message-reader-toolbar .reader-star-btn,
.message-reader-toolbar .sent-reader-star{
  flex:0 0 36px!important;
}

/* Gmail-style collapsed quoted history instead of > / >> / >>> clutter. */
.mail-quoted-history{
  margin-top:18px;
  padding-top:12px;
  border-top:1px solid var(--line);
  color:var(--muted);
}

.mail-quoted-history summary{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  cursor:pointer;
  color:var(--text);
  font-size:.78rem;
  font-weight:800;
}

.mail-quoted-history blockquote{
  margin:12px 0 0;
  padding:10px 12px;
  border-left:3px solid rgba(51,255,141,.32);
  background:rgba(255,255,255,.025);
  border-radius:0 10px 10px 0;
  overflow-wrap:anywhere;
}

/* Name & identity editor is obvious and contained. */
.name-identity-card form{
  display:grid;
  gap:12px;
}

.name-identity-card .identity-profile-grid{
  margin:0!important;
}

#identityNameStatus{
  min-height:1.2em;
  margin:0;
}

@media(max-width:760px){
  .mail-row,
  .sent-row{
    grid-template-columns:44px minmax(0,1fr)!important;
  }

  .mail-star-btn,
  .sent-star-btn{
    width:34px!important;
    min-width:34px!important;
    height:34px!important;
    min-height:34px!important;
  }

  .message-reader-toolbar .reader-star-btn,
  .message-reader-toolbar .sent-reader-star{
    flex-basis:34px!important;
  }

  .name-identity-card .identity-profile-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
}

/* v12.02.03 repair overrides: keep every create/edit screen reachable. */
.modal-backdrop{
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  place-items:start center!important;
  align-items:flex-start!important;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))!important;
}
.modal-backdrop.open{display:grid!important}
.modal-backdrop>.modal{
  width:min(700px,100%)!important;
  max-width:100%!important;
  max-height:calc(100dvh - 30px)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
  margin:auto 0!important;
  padding-bottom:max(24px,env(safe-area-inset-bottom))!important;
}
.modal-backdrop>.wide-modal{width:min(860px,100%)!important}
#familyRelationSelect{min-height:190px;max-height:32dvh}
@media(max-width:760px){
  .modal-backdrop{padding:6px!important}
  .modal-backdrop>.modal{width:100%!important;max-width:100%!important;max-height:calc(100dvh - 12px)!important;border-radius:16px!important}
  #familyRelationSelect{max-height:26dvh}
}

/* ================================================================
   WWCFAM Mail 12.0.3 — Phase 3 Organizer + fast sharing
   ================================================================ */
.organizer-page{display:grid;gap:18px;min-width:0}
.organizer-location{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#07140d}
.organizer-breadcrumb{border:0;background:transparent;color:var(--green);font:inherit;font-weight:900;cursor:pointer;padding:4px 0}
.organizer-breadcrumb:hover,.organizer-breadcrumb:focus-visible{text-decoration:underline}
.organizer-folder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;min-width:0}
.organizer-folder-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:stretch;min-width:0;padding:8px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,#07170f,#06110b);box-shadow:0 10px 30px rgba(0,0,0,.15)}
.organizer-folder-open{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-areas:"icon name" "icon meta";gap:2px 10px;align-items:center;min-width:0;border:0;background:transparent;color:var(--text);text-align:left;padding:9px;border-radius:11px;cursor:pointer}
.organizer-folder-open:hover,.organizer-folder-open:focus-visible{background:#0d2517;outline:none}
.organizer-folder-open>span{grid-area:icon;font-size:1.55rem;text-align:center}
.organizer-folder-open>strong{grid-area:name;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.organizer-folder-open>small{grid-area:meta;color:var(--muted);overflow-wrap:anywhere}
.organizer-folder-actions{display:flex;flex-direction:column;gap:5px;justify-content:center}
.organizer-folder-actions .icon-btn{width:34px;min-width:34px;height:34px;min-height:34px}
.organizer-items{display:grid;gap:10px;min-width:0}
.organizer-item-card{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;min-width:0;padding:13px;border:1px solid var(--line);border-radius:15px;background:#07140d}
.organizer-item-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:13px;background:#10271a;font-size:1.3rem}
.organizer-item-main{display:grid;gap:4px;min-width:0}
.organizer-item-main strong{overflow-wrap:anywhere}
.organizer-item-main span,.organizer-item-main small{color:var(--muted);overflow-wrap:anywhere}
.organizer-item-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap;min-width:0}

.quick-share-targets{display:grid;gap:8px;max-height:42dvh;overflow:auto;overscroll-behavior:contain;padding:2px}
.quick-share-target{width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:14px;background:#07150d;color:var(--text);text-align:left;padding:10px;cursor:pointer}
.quick-share-target:hover,.quick-share-target:focus-visible{border-color:var(--green);background:#0b2114;outline:none}
.quick-share-target>span:nth-child(2){display:grid;gap:2px;min-width:0}
.quick-share-target strong,.quick-share-target small{overflow-wrap:anywhere}
.quick-share-target small{color:var(--muted)}
.quick-share-avatar{width:42px;height:42px;min-width:42px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:#10271a;font-weight:900}
.quick-share-avatar img{width:100%;height:100%;object-fit:cover}
.quick-share-manual{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.quick-share-manual .setting-row{margin:0!important}

.compose-delivery-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 13px;border-top:1px solid var(--line);background:#06120b}
.compose-delivery-row>label{display:flex;align-items:center;gap:8px;min-width:min(100%,420px);font-size:.78rem;font-weight:900}
.compose-delivery-row select{min-width:260px;max-width:100%;flex:1 1 280px}
.compose-delivery-row .mini{flex:1 1 260px;overflow-wrap:anywhere}

.link-card .file-url{font-size:.76rem;color:var(--muted);overflow-wrap:anywhere;margin-top:4px}
.link-type-badge{display:inline-flex;align-items:center;padding:2px 7px;border:1px solid var(--line);border-radius:999px;color:var(--green);font-weight:900;text-transform:capitalize}
.link-stream-player{width:100%;display:grid;gap:7px;place-items:center;padding:10px}
.link-stream-player audio{width:100%;max-width:100%}
.link-card .file-preview img,.link-card .file-preview video{max-width:100%;max-height:240px;object-fit:contain;border-radius:10px}

@media(max-width:760px){
  .organizer-folder-grid{grid-template-columns:minmax(0,1fr)}
  .organizer-item-card{grid-template-columns:42px minmax(0,1fr)}
  .organizer-item-icon{width:40px;height:40px}
  .organizer-item-actions{grid-column:1/-1;justify-content:stretch}
  .organizer-item-actions>*{flex:1 1 130px}
  .organizer-folder-actions{flex-direction:row;grid-column:1/-1;justify-content:flex-end}
  .quick-share-target{grid-template-columns:42px minmax(0,1fr)}
  .quick-share-target>span:last-child{grid-column:1/-1;text-align:right;color:var(--green);font-size:.75rem;font-weight:900}
  .quick-share-manual{grid-template-columns:minmax(0,1fr)}
  .compose-delivery-row{align-items:stretch}
  .compose-delivery-row>label{display:grid;grid-template-columns:minmax(0,1fr)}
  .compose-delivery-row select{width:100%;min-width:0}
}

/* ================================================================
   WWCFAM Mail 12.0.3.2 — upload/media + mobile repair
   ================================================================ */

/* Recording result actions are a real post-recording workflow, not one button. */
.record-result-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:12px;
  padding:12px;
  border:1px solid rgba(51,255,141,.2);
  border-radius:15px;
  background:rgba(51,255,141,.045);
}
.record-result-actions[hidden]{display:none!important}
.record-result-actions>*{width:100%;min-width:0}
.record-cancel-actions{margin-top:8px}
.record-fallback-label{margin-top:10px;width:100%;text-align:center}

/* Make every large action toolbar wrap cleanly before it can clip the viewport. */
.page-head,.head-actions,.file-actions,.contact-actions,.message-reader-toolbar,.compose-foot,.drive-toolbar{
  min-width:0!important;
  max-width:100%!important;
}
.head-actions,.file-actions,.contact-actions,.drive-toolbar,.message-reader-toolbar{
  flex-wrap:wrap!important;
}

/* Create/edit dialogs must never be cropped on short screens. */
.modal-backdrop{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
}
.modal-backdrop>.modal{
  max-height:calc(100dvh - 24px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  scroll-padding-bottom:96px;
}
.modal .modal-close{
  position:sticky!important;
  top:0!important;
  float:right;
  z-index:4;
  background:#0b1911!important;
  border-color:var(--line)!important;
}
.modal input,.modal select,.modal textarea,.modal button{
  max-width:100%!important;
}

/* Phone layout: reserve horizontal space only for controls that matter. */
@media(max-width:760px){
  :root{--header:58px!important}
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))!important}

  .topbar{
    height:var(--header)!important;
    min-height:var(--header)!important;
    width:100%!important;
    padding:5px 7px!important;
    gap:4px!important;
    flex-wrap:nowrap!important;
    overflow:visible!important;
  }
  .top-quick-nav{display:none!important}
  .hamburger,.desktop-search,.notification-btn{
    width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;
    flex:0 0 40px!important;
    border-radius:12px!important;
  }
  .brand{
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:none!important;
    margin-right:0!important;
    gap:6px!important;
  }
  .brand-logo{width:34px!important;height:34px!important;min-width:34px!important;flex:0 0 34px!important}
  .brand-copy{min-width:0!important;max-width:112px!important;overflow:hidden!important}
  .brand-title{font-size:.8rem!important;line-height:1.05!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .brand-sub{display:none!important}
  .install-brand-btn{display:none!important}
  .notification-wrap{flex:0 0 40px!important;margin:0!important}
  .account-wrap{flex:0 0 36px!important}
  .avatar{width:36px!important;min-width:36px!important;height:36px!important}

  .top-search{
    position:fixed!important;
    left:6px!important;right:6px!important;top:calc(var(--header) + 5px)!important;
    z-index:125!important;
    width:auto!important;max-width:none!important;min-width:0!important;
    margin:0!important;
    display:none!important;
  }
  .top-search.open{display:block!important}
  .top-search input{height:46px!important;font-size:16px!important}

  .layout,.workspace,.view,.page,.mail-view,.mail-list-pane,.reader{
    width:100%!important;max-width:100vw!important;min-width:0!important;
  }
  .page{padding:12px 9px calc(82px + env(safe-area-inset-bottom))!important}
  .page-head{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important;align-items:start!important}
  .page-head>div{min-width:0!important}
  .page-head h1{font-size:1.38rem!important;overflow-wrap:anywhere!important}
  .page-head p{font-size:.84rem!important;overflow-wrap:anywhere!important}
  .head-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;gap:7px!important}
  .head-actions>*{width:100%!important;min-width:0!important;margin:0!important}

  .drive-location-bar{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important}
  .drive-toolbar{display:flex!important;overflow-x:auto!important;flex-wrap:nowrap!important;padding-bottom:4px!important;scrollbar-width:thin}
  .drive-toolbar>*{flex:0 0 auto!important}
  .file-grid,.people-grid,.settings-grid,.account-grid{grid-template-columns:minmax(0,1fr)!important}
  .file-card,.contact-card,.person-card,.card{min-width:0!important;max-width:100%!important}
  .file-actions,.contact-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;gap:6px!important}
  .file-actions>*,.contact-actions>*{min-width:0!important;width:100%!important;white-space:normal!important;height:auto!important;min-height:42px!important}

  .message-reader{padding:12px 10px calc(86px + env(safe-area-inset-bottom))!important}
  .message-reader-toolbar{
    position:sticky!important;top:0!important;
    margin:-12px -10px 14px!important;
    padding:6px 7px!important;
    display:flex!important;
    flex-wrap:wrap!important;
    gap:5px!important;
    max-height:42dvh!important;
    overflow-y:auto!important;
  }
  .message-reader-toolbar .pane-title{flex:1 1 80px!important;margin-right:0!important}
  .message-reader-toolbar .secondary-btn,.message-reader-toolbar .primary-btn{
    min-height:38px!important;padding:6px 9px!important;font-size:.76rem!important;flex:1 1 auto!important;
  }
  .message-reader-toolbar select{min-height:38px!important;flex:1 1 130px!important;min-width:0!important}

  .modal-backdrop{padding:0!important;place-items:stretch!important;align-items:stretch!important}
  .modal-backdrop>.modal{
    width:100vw!important;max-width:100vw!important;
    min-height:100dvh!important;max-height:100dvh!important;
    margin:0!important;border-radius:0!important;
    padding:14px 12px calc(30px + env(safe-area-inset-bottom))!important;
  }
  .modal-backdrop>.modal h2{padding-right:48px!important}
  .modal .identity-profile-grid,.modal .contact-editor-grid,.modal .admin-assignment-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
  #familyRelationSelect{min-height:160px!important;max-height:34dvh!important}

  .compose-window,.compose-window.open{
    inset:var(--header) 0 calc(62px + env(safe-area-inset-bottom)) 0!important;
    width:100vw!important;max-width:100vw!important;height:auto!important;max-height:none!important;
    border-radius:0!important;border-left:0!important;border-right:0!important;
  }
  .compose-head{min-height:44px!important;padding:7px 9px!important}
  .compose-line input,#composeBody{font-size:16px!important}
  .compose-foot{display:flex!important;flex-wrap:wrap!important;gap:5px!important;padding:6px!important}
  .compose-files{flex:1 1 100%!important;max-height:86px!important;overflow:auto!important}
  .compose-delivery-row{font-size:.78rem!important;padding:7px 8px!important}

  .record-panel{
    inset:var(--header) 0 calc(62px + env(safe-area-inset-bottom)) 0!important;
    width:100vw!important;max-width:100vw!important;
    height:auto!important;max-height:none!important;
    overflow-y:auto!important;overflow-x:hidden!important;
    border-radius:0!important;border-left:0!important;border-right:0!important;
    padding:12px 10px calc(20px + env(safe-area-inset-bottom))!important;
  }
  .record-device-grid{grid-template-columns:minmax(0,1fr)!important}
  .record-stage{min-height:130px!important}
  .record-preview,.audio-waveform{max-height:38dvh!important}
  .record-result-actions{grid-template-columns:minmax(0,1fr)!important;padding:8px!important}
  .record-actions>*{flex:1 1 100%!important}

  .notification-panel{
    position:fixed!important;left:6px!important;right:6px!important;top:calc(var(--header) + 5px)!important;
    width:auto!important;max-width:none!important;max-height:calc(100dvh - var(--header) - 74px)!important;
  }
  .notification-list{max-height:calc(100dvh - var(--header) - 140px)!important}
  .notification-item{grid-template-columns:minmax(0,1fr) 34px!important}
  .notification-open{min-width:0!important}
  .notification-open>span:last-child{min-width:0!important;overflow-wrap:anywhere!important;word-break:normal!important}

  .mobile-dock{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    min-height:62px!important;
  }
}

@media(max-width:430px){
  .brand-copy{max-width:88px!important}
  .brand-title{font-size:.75rem!important}
  .topbar .account-wrap{display:none!important}
  .head-actions,.file-actions,.contact-actions{grid-template-columns:minmax(0,1fr)!important}
  .notification-wrap{margin-left:0!important}
}

@media(max-width:350px){
  .brand-copy{display:none!important}
  .brand{flex:1 1 34px!important}
}

/* === WWCFAM Mail 12.0.3.3 — smart composer attachments + PWA diagnostics === */
.compose-attachment-tray{
  flex:none!important;
  width:100%!important;
  max-width:none!important;
  max-height:240px!important;
  overflow:auto!important;
  padding:10px!important;
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))!important;
  gap:10px!important;
  border-top:1px solid var(--line)!important;
  border-bottom:1px solid var(--line)!important;
  background:linear-gradient(180deg,rgba(51,255,141,.025),rgba(0,0,0,.12))!important;
}
.compose-attachment-tray.drag-over{outline:2px solid var(--green)!important;outline-offset:-4px!important;background:rgba(51,255,141,.09)!important}
.compose-attachment-empty{grid-column:1/-1;min-height:58px;display:grid;place-items:center;text-align:center;padding:10px;border:1px dashed rgba(51,255,141,.28);border-radius:14px;color:var(--muted);font-size:.8rem}
.compose-attachment-card{min-width:0;border:1px solid var(--line);border-radius:16px;background:#07120c;overflow:hidden;display:grid;grid-template-rows:minmax(84px,auto) auto auto}
.compose-attachment-card.uploading{border-color:rgba(54,232,255,.38)}
.compose-attachment-card.failed{border-color:rgba(255,102,125,.5)}
.compose-attachment-card.canceling{opacity:.75}
.compose-attachment-preview{display:grid;place-items:center;min-height:92px;background:#020604;overflow:hidden}
.compose-preview-open{display:block;width:100%;border:0;padding:0;background:transparent;cursor:zoom-in}
.compose-attachment-image{display:block;width:100%;height:150px;object-fit:contain;background:#020403}
.compose-attachment-media{display:block;width:100%;max-width:100%;background:#020403}
video.compose-attachment-media{height:150px;object-fit:contain}
audio.compose-attachment-media{min-height:54px;padding:8px}
.compose-document-preview{min-height:92px;width:100%;display:grid;place-items:center;align-content:center;gap:5px;padding:12px;color:var(--green2);text-align:center}
.compose-document-preview>span{font-size:2rem}.compose-document-preview strong{font-size:.78rem;color:var(--muted)}
.compose-attachment-info{display:grid;gap:4px;padding:10px 11px;min-width:0}
.compose-attachment-info strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.82rem}.compose-attachment-info>span{font-size:.69rem;color:var(--muted);overflow-wrap:anywhere}
.compose-upload-progress{height:5px;border-radius:999px;background:#102219;overflow:hidden;margin-top:3px}.compose-upload-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--green),#36e8ff);border-radius:inherit;transition:width .18s linear}
.compose-attachment-actions{display:flex;gap:6px;flex-wrap:wrap;padding:0 10px 10px}.compose-attachment-actions .secondary-btn{min-height:34px;padding:0 10px;font-size:.72rem}.compose-attachment-actions a{text-decoration:none;display:inline-grid;place-items:center}
.compose-preview-btn{min-height:40px!important}
.compose-email-preview-modal{width:min(900px,100%)!important}.compose-preview-body{margin:15px 0;padding:15px;border:1px solid var(--line);border-radius:15px;background:#050b07;line-height:1.55;max-height:34dvh;overflow:auto}.compose-preview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px}

.pwa-diagnostic-modal{width:min(760px,100%)!important}.pwa-diagnostic-list{display:grid;gap:8px;margin:16px 0}.pwa-diagnostic-row{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;align-items:start;padding:11px 12px;border:1px solid var(--line);border-radius:14px;background:#08120d}.pwa-diagnostic-row.ok{border-color:rgba(51,255,141,.28)}.pwa-diagnostic-row.warn{border-color:rgba(255,195,92,.34)}.pwa-diagnostic-icon{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:950;background:#11271a;color:var(--green)}.pwa-diagnostic-row.warn .pwa-diagnostic-icon{background:#2a2009;color:#ffd56b}.pwa-diagnostic-row span:last-child{display:grid;gap:3px;min-width:0}.pwa-diagnostic-row small{color:var(--muted);overflow-wrap:anywhere}.pwa-guidance{display:grid;gap:5px;padding:13px 14px;border-radius:15px;background:#081913;border:1px solid rgba(54,232,255,.2);line-height:1.45}.pwa-guidance.success{border-color:rgba(51,255,141,.32)}.pwa-guidance.error{border-color:rgba(255,102,125,.42);background:#1c0b0f}.pwa-diagnostic-note{padding:9px 11px;border-left:3px solid rgba(54,232,255,.38);color:var(--muted);font-size:.78rem}

.attachment-pdf-frame,.attachment-text-frame{width:100%;height:220px;border:0;background:#fff;color:#111}.attachment-generic-meta{display:grid;place-items:center;align-content:center;gap:5px;min-height:100px;text-align:center;padding:12px}.attachment-generic-meta .attachment-icon{font-size:2.4rem}

@media(max-width:760px){
  .compose-attachment-tray{grid-template-columns:minmax(0,1fr)!important;max-height:32dvh!important;padding:7px!important;gap:7px!important}
  .compose-attachment-card{grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto;min-height:96px}
  .compose-attachment-preview{grid-row:1/3;min-height:96px}.compose-attachment-image,video.compose-attachment-media{height:96px}.compose-attachment-media{min-width:0}
  audio.compose-attachment-media{width:96px;padding:3px}.compose-document-preview{min-height:96px;padding:6px}.compose-attachment-info{padding:9px}.compose-attachment-actions{padding:0 8px 8px}.compose-attachment-actions .secondary-btn{flex:1 1 auto}
  .compose-preview-btn{flex:1 1 auto!important}
  .pwa-diagnostic-modal{width:100%!important;max-height:calc(100dvh - 18px)!important;padding:16px 12px!important}.pwa-diagnostic-row{grid-template-columns:28px minmax(0,1fr);padding:9px}.pwa-diagnostic-modal .modal-actions{display:grid!important;grid-template-columns:1fr!important}.pwa-diagnostic-modal .modal-actions>*{width:100%!important}
  .attachment-pdf-frame,.attachment-text-frame{height:48dvh}
}

/* 12.0.3.3 install + upload diagnostics */
.system-diagnostics{display:grid;gap:10px;margin-top:12px}.system-diagnostics h3{margin:10px 0 0;font-size:.92rem;color:var(--muted,#9bcab0);text-transform:uppercase;letter-spacing:.06em}.system-diagnostic-row{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;padding:11px 12px;border:1px solid rgba(54,255,142,.16);border-radius:14px;background:rgba(4,20,12,.56)}.system-diagnostic-row>span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-weight:900}.system-diagnostic-row.ok>span{background:rgba(54,255,142,.15);color:#63ffa3}.system-diagnostic-row.warn>span{background:rgba(255,190,65,.15);color:#ffd072}.system-diagnostic-row strong,.system-diagnostic-row small{display:block;overflow-wrap:anywhere}.system-diagnostic-row small{margin-top:3px;color:var(--muted,#9bcab0);line-height:1.35}

/* 12.0.3.4 — Drive links / radio-player repair */
.drive-link-modal{max-width:760px}
.drive-link-destination{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 12px;margin:8px 0 14px;border:1px solid rgba(57,255,141,.25);border-radius:12px;background:rgba(31,255,128,.06)}
.drive-link-destination span{color:#b9ffd8;overflow-wrap:anywhere}
.drive-link-modal textarea{width:100%;resize:vertical;min-height:72px}
.drive-link-preview{margin:12px 0;padding:12px;border:1px solid rgba(89,255,159,.22);border-radius:14px;background:rgba(4,18,11,.72);min-height:88px;overflow:hidden}
.drive-link-preview-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.drive-link-preview-media{display:grid;place-items:center;min-height:58px;overflow:hidden}
.drive-link-preview-media img,.drive-link-preview-media video{max-width:100%;max-height:240px;border-radius:10px}
.drive-link-preview-error{color:#ff9f9f;font-weight:700}
.link-stream-player{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:9px;width:100%}
.link-stream-player audio{width:100%;min-width:0}
.link-stream-player small{grid-column:1/-1;color:var(--muted,#9eb8a8);line-height:1.35}
.link-player-icon,.big-link-icon{font-size:32px;line-height:1}
.player-url{opacity:.82}
.link-card .file-url{overflow-wrap:anywhere;word-break:break-word}
@media(max-width:640px){
  .drive-link-modal{width:100%;max-width:none;height:100dvh;max-height:100dvh;border-radius:0;padding:18px 14px 28px;overflow-y:auto}
  .drive-link-preview-head{align-items:flex-start;flex-direction:column}
  .link-stream-player{grid-template-columns:1fr;text-align:center}
  .link-stream-player audio{width:100%}
}

/* v12.0.3.6 administrator support / account power tools */
.admin-impersonation-banner{position:sticky;top:0;z-index:9999;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 16px;background:#102615;border-bottom:1px solid rgba(51,255,141,.55);box-shadow:0 10px 30px rgba(0,0,0,.35);color:#eafff1}
.admin-impersonation-banner>div{display:grid;gap:2px;min-width:0}.admin-impersonation-banner strong{color:#59ff9d}.admin-impersonation-banner span{font-size:.86rem;color:#b9d9c4;overflow-wrap:anywhere}.admin-impersonation-banner .primary-btn{white-space:nowrap}
.admin-merge-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:10px;align-items:end}.admin-merge-grid label{display:grid;gap:6px}.admin-merge-grid select{width:100%;min-width:0}
.admin-primary-badge{display:inline-flex;margin-left:8px;vertical-align:middle;padding:3px 8px;border-radius:999px;background:rgba(51,255,141,.13);border:1px solid rgba(51,255,141,.38);color:#65ffac;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.admin-user-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.admin-user-actions .field{min-width:110px}
@media(max-width:760px){.admin-impersonation-banner{position:sticky;flex-direction:column;align-items:stretch;padding:10px 12px}.admin-impersonation-banner .primary-btn{width:100%}.admin-merge-grid{grid-template-columns:1fr}.admin-user-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.admin-user-actions .field,.admin-user-actions button{width:100%;min-width:0}.admin-primary-badge{display:inline-flex;margin:5px 0 0}}

/* v12.0.3.7 administrator bulk console */
.admin-bulk-console,.admin-alias-bulk-card,.admin-bulk-mail-card{margin-bottom:16px}
.admin-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.admin-section-head h2{margin-bottom:4px}.admin-section-head p{margin:0}
.admin-bulk-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 10px}.admin-bulk-actions strong{margin-left:auto;color:var(--green)}
.admin-bulk-action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px}.admin-bulk-action-grid>*{width:100%}
.admin-bulk-result{display:grid;gap:8px;margin-top:12px}.admin-result-list{display:grid;gap:5px;max-height:220px;overflow:auto;padding:9px;border:1px solid var(--line);border-radius:12px;background:#050b07}.admin-result-list span{font-size:.78rem;overflow-wrap:anywhere}.admin-result-list .ok{color:#8dffb8}.admin-result-list .bad{color:#ff9ea9}
.admin-current-aliases{margin:14px 0;display:grid;gap:8px}.admin-current-aliases h3{margin:0}.admin-alias-choice{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;padding:10px 11px;border:1px solid var(--line);border-radius:12px;background:#07120c}.admin-alias-choice input{margin-top:3px}.admin-alias-choice span{display:grid;gap:2px;min-width:0}.admin-alias-choice strong,.admin-alias-choice small{overflow-wrap:anywhere}.admin-alias-choice small{color:var(--muted)}
.admin-user-count{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.admin-user-row{grid-template-columns:28px 48px minmax(0,1fr) auto!important}.admin-user-check-wrap{display:grid;place-items:center;align-self:stretch;min-height:44px}.admin-user-check{width:18px;height:18px;accent-color:var(--green);cursor:pointer}.admin-user-check:disabled{opacity:.35;cursor:not-allowed}
.admin-bulk-mail-card textarea,.admin-alias-bulk-card textarea{width:100%;resize:vertical}
@media(max-width:900px){.admin-user-row{grid-template-columns:28px 44px minmax(0,1fr)!important}.admin-user-row .admin-user-actions{grid-column:1/-1!important}.admin-bulk-actions strong{margin-left:0;width:100%}}
@media(max-width:760px){.admin-bulk-action-grid{grid-template-columns:1fr}.admin-bulk-actions{display:grid;grid-template-columns:1fr 1fr}.admin-bulk-actions strong{grid-column:1/-1}.admin-user-row{grid-template-columns:28px 42px minmax(0,1fr)!important;padding:10px}.admin-user-check-wrap{grid-row:1}.admin-user-row .row-avatar{grid-row:1}.admin-user-row .contact-main{grid-row:1}.admin-user-row .admin-user-actions{grid-column:1/-1!important;grid-template-columns:1fr!important}.admin-user-count{width:100%;justify-content:space-between}}

.admin-unused-cleanup-note{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:14px 0;padding:12px 14px;border:1px solid rgba(51,255,141,.3);border-radius:14px;background:rgba(51,255,141,.055)}.admin-unused-cleanup-note>div{display:grid;gap:4px;min-width:0}.admin-unused-cleanup-note strong{color:#8dffb8}.admin-unused-cleanup-note span{font-size:.78rem;color:var(--muted);line-height:1.45}.admin-unused-cleanup-note button{flex:0 0 auto}@media(max-width:760px){.admin-unused-cleanup-note{align-items:stretch;flex-direction:column}.admin-unused-cleanup-note button{width:100%}}

/* ========================================================================== */
/* WWCFAM Mail 12.0.4 — Site Management Command Center                  */
/* ========================================================================== */
.admin-command-page{display:grid;gap:16px;min-width:0;padding-bottom:max(28px,env(safe-area-inset-bottom))}
.admin-command-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:20px;border:1px solid rgba(51,255,141,.28);border-radius:22px;background:linear-gradient(145deg,rgba(51,255,141,.08),rgba(0,0,0,.05));box-shadow:0 18px 50px rgba(0,0,0,.18);min-width:0}
.admin-command-hero>div:first-child{min-width:0}.admin-command-hero h1{margin:4px 0 5px;font-size:clamp(1.9rem,4vw,3rem);line-height:1.02}.admin-command-hero p{margin:0;color:var(--muted);max-width:780px;line-height:1.5}.admin-command-kicker{display:inline-flex;padding:5px 9px;border:1px solid rgba(51,255,141,.35);border-radius:999px;color:#76ffb3;font-size:.68rem;font-weight:900;letter-spacing:.08em}.admin-command-hero-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.admin-command-tabs{position:sticky;top:0;z-index:70;display:flex;gap:8px;overflow-x:auto;padding:8px;border:1px solid var(--line);border-radius:16px;background:rgba(3,10,6,.95);backdrop-filter:blur(18px);scrollbar-width:none}.admin-command-tabs::-webkit-scrollbar{display:none}.admin-command-tab{flex:0 0 auto;min-height:42px;padding:8px 14px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--muted);font:inherit;font-weight:850;cursor:pointer;white-space:nowrap}.admin-command-tab:hover,.admin-command-tab:focus-visible{border-color:var(--line);color:var(--text)}.admin-command-tab.active{background:var(--green);color:#031007;border-color:var(--green);box-shadow:0 0 22px rgba(51,255,141,.18)}
.admin-command-panel{display:none;min-width:0}.admin-command-panel.active{display:grid;gap:16px;min-width:0}
.admin-stat-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.admin-stat-card{display:flex;align-items:center;gap:11px;min-width:0;padding:15px;border:1px solid var(--line);border-radius:17px;background:#06110b}.admin-stat-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:13px;background:rgba(51,255,141,.09);font-size:1.2rem}.admin-stat-card div{display:grid;min-width:0}.admin-stat-card strong{font-size:1.45rem;color:#f4fff7}.admin-stat-card span:not(.admin-stat-icon){font-weight:850}.admin-stat-card small{color:var(--muted);overflow-wrap:anywhere;line-height:1.35}.admin-loading-card{grid-column:1/-1;padding:24px;border:1px dashed var(--line);border-radius:16px;color:var(--muted)}
.admin-command-two-col{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);gap:16px;min-width:0}.admin-health-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.admin-health-row{display:grid;grid-template-columns:28px minmax(0,1fr);gap:9px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:13px;background:#07120c;min-width:0}.admin-health-row>span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-weight:900}.admin-health-row.ok>span{background:rgba(51,255,141,.12);color:#63ffab}.admin-health-row.bad>span{background:rgba(255,91,108,.12);color:#ff8d99}.admin-health-row div{display:grid;min-width:0}.admin-health-row small{color:var(--muted);overflow-wrap:anywhere}.admin-health-pill{display:inline-flex;align-items:center;min-height:34px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.74rem;font-weight:850}.admin-health-pill.ok{border-color:rgba(51,255,141,.35);color:#72ffb1;background:rgba(51,255,141,.07)}.admin-health-pill.warn{border-color:rgba(255,190,58,.35);color:#ffd77a;background:rgba(255,190,58,.07)}
.admin-cleanup-preview{display:grid;gap:8px}.admin-cleanup-list{display:grid;gap:7px;max-height:270px;overflow:auto}.admin-cleanup-list>div{display:grid;gap:2px;padding:10px;border:1px solid var(--line);border-radius:12px;background:#07110b}.admin-cleanup-list span,.admin-cleanup-list small{overflow-wrap:anywhere}.admin-cleanup-list small{color:var(--muted)}.admin-empty-good{padding:13px;border:1px solid rgba(51,255,141,.22);border-radius:12px;color:#94ffc0;background:rgba(51,255,141,.04)}
.admin-activity-list{display:grid;gap:7px;min-width:0}.admin-activity-row{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line);min-width:0}.admin-activity-row:last-child{border-bottom:0}.admin-activity-dot{width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--green);box-shadow:0 0 12px rgba(51,255,141,.45)}.admin-activity-row>div{display:grid;gap:2px;min-width:0}.admin-activity-row strong{text-transform:capitalize}.admin-activity-row span,.admin-activity-row small{overflow-wrap:anywhere}.admin-activity-row span{color:#bbd9c6}.admin-activity-row small{color:var(--muted);line-height:1.4}.admin-activity-row time{font-size:.72rem;color:var(--muted);white-space:nowrap}
.admin-quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.admin-quick-card{display:grid;gap:6px;text-align:left;padding:15px;min-height:108px;border:1px solid var(--line);border-radius:16px;background:#06110b;color:var(--text);font:inherit;cursor:pointer}.admin-quick-card:hover,.admin-quick-card:focus-visible{border-color:rgba(51,255,141,.5);transform:translateY(-1px)}.admin-quick-card strong{font-size:1rem}.admin-quick-card span{color:var(--muted);font-size:.8rem;line-height:1.4}
.admin-users-shell{min-width:0}.admin-users-shell #adminUsers{margin-top:12px;min-width:0}
.admin-mail-layout{display:grid;grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr);gap:14px;min-width:0}.admin-mail-recipient-pane,.admin-mail-compose-pane{min-width:0;padding:12px;border:1px solid var(--line);border-radius:15px;background:#06110b}.admin-mail-select-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:8px 0}.admin-mail-select-actions strong{margin-left:auto;color:var(--green)}.admin-mail-recipient-list{display:grid;gap:6px;max-height:520px;overflow:auto;padding-right:2px}.admin-mail-recipient{display:grid;grid-template-columns:24px 38px minmax(0,1fr);gap:8px;align-items:center;padding:9px;border:1px solid var(--line);border-radius:12px;background:#08150e;cursor:pointer;min-width:0}.admin-mail-recipient:hover{border-color:rgba(51,255,141,.35)}.admin-mail-recipient input{width:18px;height:18px;accent-color:var(--green)}.admin-mail-recipient .row-avatar{width:36px;height:36px}.admin-mail-recipient>span:last-child{display:grid;min-width:0}.admin-mail-recipient small{color:var(--muted);overflow-wrap:anywhere}.admin-mail-compose-pane{display:grid;align-content:start;gap:8px}.admin-mail-attachments{display:grid;gap:8px;padding:11px;border:1px dashed var(--line);border-radius:12px}.admin-mail-file-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:250px;overflow:auto}.admin-mail-file-choice{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;align-items:start;padding:8px;border:1px solid var(--line);border-radius:10px;background:#08150e;min-width:0}.admin-mail-file-choice input{margin-top:2px;accent-color:var(--green)}.admin-mail-file-choice span{display:grid;min-width:0}.admin-mail-file-choice strong,.admin-mail-file-choice small{overflow-wrap:anywhere}.admin-mail-file-choice small{color:var(--muted)}.admin-mail-sendbar{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px;background:linear-gradient(to top,#06110b 70%,transparent)}
.admin-filter-bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,260px);gap:8px;margin:10px 0}.admin-filter-bar input,.admin-filter-bar select{width:100%;min-width:0}.admin-file-list{display:grid;gap:7px;min-width:0}.admin-file-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px;border:1px solid var(--line);border-radius:13px;background:#06110b;min-width:0}.admin-file-type{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(51,255,141,.07)}.admin-file-main{display:grid;gap:2px;min-width:0}.admin-file-main strong,.admin-file-main span,.admin-file-main small{overflow-wrap:anywhere}.admin-file-main span,.admin-file-main small{color:var(--muted)}.admin-privacy-badge{display:inline-flex;padding:5px 8px;border:1px solid rgba(90,195,255,.25);border-radius:999px;color:#9bd8ff;font-size:.68rem;font-weight:800;white-space:nowrap}.admin-pager{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px}
.admin-session-list{display:grid;gap:7px;margin-top:10px}.admin-session-card{display:grid;gap:2px;padding:10px;border:1px solid var(--line);border-radius:12px;background:#07120c}.admin-session-card span,.admin-session-card small{color:var(--muted);overflow-wrap:anywhere}.admin-diagnostic-pre{max-height:360px;overflow:auto;padding:10px;border:1px solid var(--line);border-radius:12px;background:#020704;color:#b9f6d0;font-size:.72rem;white-space:pre-wrap;overflow-wrap:anywhere}.admin-system-grid{align-items:start}

@media(max-width:1250px){.admin-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.admin-command-two-col,.admin-mail-layout{grid-template-columns:1fr}.admin-health-grid{grid-template-columns:1fr 1fr}.admin-mail-recipient-list{max-height:300px}.admin-mail-file-picker{grid-template-columns:1fr}}
@media(max-width:760px){
  .admin-command-page{gap:12px;padding:10px 10px calc(88px + env(safe-area-inset-bottom))!important;overflow-x:hidden}
  .admin-command-hero{align-items:stretch;flex-direction:column;padding:14px;border-radius:17px}.admin-command-hero h1{font-size:1.85rem}.admin-command-hero-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.admin-command-hero-actions>*{width:100%;min-width:0}
  .admin-command-tabs{top:0;margin:0 -2px;padding:6px;border-radius:13px}.admin-command-tab{min-height:40px;padding:7px 11px}
  .admin-stat-grid{grid-template-columns:1fr 1fr}.admin-stat-card{padding:11px;align-items:flex-start}.admin-stat-icon{width:36px;height:36px;flex-basis:36px}.admin-stat-card strong{font-size:1.2rem}.admin-stat-card small{font-size:.68rem}
  .admin-command-two-col,.admin-health-grid,.admin-quick-grid,.admin-mail-layout,.admin-filter-bar{grid-template-columns:1fr}
  .admin-section-head{align-items:stretch}.admin-section-head>button,.admin-section-head>.admin-health-pill{width:100%}
  .admin-activity-row{grid-template-columns:10px minmax(0,1fr)}.admin-activity-row time{grid-column:2;white-space:normal}
  .admin-mail-recipient-pane,.admin-mail-compose-pane{padding:10px;border-radius:13px}.admin-mail-select-actions{display:grid;grid-template-columns:1fr 1fr}.admin-mail-select-actions strong{grid-column:1/-1;margin-left:0}.admin-mail-sendbar{flex-direction:column;align-items:stretch;padding-bottom:max(8px,env(safe-area-inset-bottom))}.admin-mail-sendbar .primary-btn{width:100%}
  .admin-file-card{grid-template-columns:38px minmax(0,1fr)}.admin-file-type{width:36px;height:36px}.admin-privacy-badge{grid-column:1/-1;justify-self:start}
  .admin-pager{display:grid;grid-template-columns:1fr auto 1fr}.admin-pager button{width:100%;min-width:0}
  .admin-command-panel .card{padding:12px!important;min-width:0;overflow:hidden}
  .admin-command-panel input,.admin-command-panel select,.admin-command-panel textarea,.admin-command-panel button{max-width:100%;min-width:0}
  .admin-command-panel textarea{resize:vertical}
  .admin-command-panel .admin-user-row{width:100%;overflow:hidden}
  #adminUserSecurityModal .modal{width:100%!important;height:100dvh!important;max-width:none!important;max-height:none!important;border-radius:0!important;padding:16px 14px calc(20px + env(safe-area-inset-bottom))!important;overflow-y:auto!important}
}
@media(max-width:390px){.admin-stat-grid{grid-template-columns:1fr}.admin-command-hero-actions{grid-template-columns:1fr}.admin-mail-select-actions{grid-template-columns:1fr}.admin-mail-select-actions strong{grid-column:auto}.admin-pager{grid-template-columns:1fr 1fr}.admin-pager span{grid-column:1/-1;grid-row:1;text-align:center}}
/* Keep the actual user directory visible first; bulk power tools follow it. */
#adminUsers{display:flex;flex-direction:column;gap:14px;min-width:0}
#adminUsers>.admin-user-directory{order:-20}
#adminUsers>.admin-bulk-console{order:-10}

/* 12.0.4 — authoritative Admin Users screen + resilient mobile controls */
.admin-soft-warning{display:grid;gap:4px;padding:11px 13px;border:1px solid rgba(255,193,74,.34);border-radius:13px;background:rgba(255,193,74,.065);color:#ffe1a1}.admin-soft-warning span{color:var(--muted);font-size:.78rem;line-height:1.4;overflow-wrap:anywhere}
.admin-user-directory-primary{display:grid;gap:12px;min-width:0;padding:14px;border:1px solid var(--line);border-radius:17px;background:#06110b}
.admin-user-selection-bar{position:sticky;top:58px;z-index:55;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 11px;border:1px solid rgba(51,255,141,.25);border-radius:14px;background:rgba(4,15,9,.96);backdrop-filter:blur(14px);min-width:0}.admin-user-selection-bar>div:first-child{display:grid;gap:2px;min-width:0}.admin-user-selection-bar strong{color:var(--green)}.admin-user-selection-actions{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end}
.admin-user-rows{display:grid;gap:8px;min-width:0}.admin-user-title-line{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}.admin-user-title-line strong{min-width:0;overflow-wrap:anywhere}
.admin-tool-details{padding:0!important;overflow:hidden}.admin-tool-details>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;padding:14px 16px;list-style:none;background:#06110b}.admin-tool-details>summary::-webkit-details-marker{display:none}.admin-tool-details>summary::after{content:'＋';font-size:1.1rem;color:var(--green);flex:0 0 auto}.admin-tool-details[open]>summary::after{content:'−'}.admin-tool-details>summary span{color:var(--muted);font-size:.76rem;text-align:right;max-width:55%;line-height:1.35}.admin-tool-details-body{display:grid;gap:12px;padding:14px 16px 16px;border-top:1px solid var(--line);min-width:0}.admin-account-tools-grid{grid-template-columns:1fr 1fr}.admin-account-tools-grid>div{min-width:0}.admin-account-tools-grid h3{margin:0 0 8px}
.admin-recipient-help{padding:12px;border:1px dashed rgba(51,255,141,.28);border-radius:12px;color:var(--muted);line-height:1.45;background:rgba(51,255,141,.025)}
.admin-user-count{display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important}.admin-user-count span{color:var(--muted);font-size:.76rem}.admin-user-count button{margin-left:auto}
@media(max-width:900px){.admin-account-tools-grid{grid-template-columns:1fr}.admin-user-selection-bar{position:static;align-items:stretch;flex-direction:column}.admin-user-selection-actions{display:grid;grid-template-columns:1fr 1fr}.admin-user-selection-actions>*{width:100%;min-width:0}.admin-tool-details>summary{align-items:flex-start}.admin-tool-details>summary span{max-width:none;text-align:left}}
@media(max-width:760px){
  .admin-user-directory-primary{padding:10px;border-radius:13px}
  .admin-user-tools{grid-template-columns:1fr!important}.admin-user-count{display:grid!important;grid-template-columns:1fr auto!important}.admin-user-count strong,.admin-user-count span{grid-column:1}.admin-user-count button{grid-column:2;grid-row:1/3;width:auto!important;margin:0!important}
  .admin-user-selection-actions{grid-template-columns:1fr 1fr}.admin-user-selection-actions .primary-btn{grid-column:1/-1}
  .admin-tool-details>summary{display:grid;grid-template-columns:minmax(0,1fr) auto;padding:13px}.admin-tool-details>summary span{grid-column:1;font-size:.72rem}.admin-tool-details>summary::after{grid-column:2;grid-row:1/3;align-self:center}.admin-tool-details-body{padding:12px}
  .admin-user-row{grid-template-columns:26px 40px minmax(0,1fr)!important;gap:8px!important;padding:10px!important}.admin-user-row .admin-user-actions{grid-column:1/-1!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}.admin-user-row .admin-user-actions .field,.admin-user-row .admin-user-actions button{width:100%!important;min-width:0!important;white-space:normal!important;min-height:42px}
  .admin-mail-recipient-list{max-height:38dvh}.admin-mail-recipient{grid-template-columns:24px 36px minmax(0,1fr);padding:8px}.admin-recipient-help{font-size:.78rem}
}
@media(max-width:390px){.admin-user-selection-actions,.admin-user-row .admin-user-actions{grid-template-columns:1fr!important}.admin-user-selection-actions .primary-btn{grid-column:auto}.admin-user-count{grid-template-columns:1fr!important}.admin-user-count button{grid-column:1!important;grid-row:auto!important;width:100%!important}.admin-tool-details>summary span{font-size:.69rem}}

/* ===== v12.0.5 Smart Advanced Mail ===== */
.smart-mail-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.16rem .48rem;border:1px solid rgba(64,255,148,.38);border-radius:999px;background:rgba(31,255,129,.1);color:#8dffba;font-size:.72rem;font-weight:800;vertical-align:middle}.smart-mail-chip.important{border-color:rgba(255,207,73,.45);background:rgba(255,196,0,.1);color:#ffe28a}.smart-mail-chip.muted{opacity:.66}.smart-mail-modal{width:min(1080px,calc(100vw - 32px));max-height:min(88vh,900px);overflow:auto}.smart-mail-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}.smart-mail-panel{min-height:260px}.smart-mail-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin:.5rem 0 1rem}.smart-mail-section-head h3,.smart-editor-form h3{margin:.1rem 0 .35rem}.smart-mail-list{display:grid;gap:.7rem}.smart-mail-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center;padding:1rem;border:1px solid rgba(76,255,154,.2);border-radius:16px;background:rgba(4,20,12,.74)}.smart-mail-row>div:first-child{min-width:0}.smart-mail-row strong,.smart-mail-row span,.smart-mail-row p{overflow-wrap:anywhere}.smart-mail-row span{display:block;color:var(--muted,#9ac6aa);font-size:.84rem;margin-top:.2rem}.smart-mail-row p{margin:.4rem 0 0;color:var(--muted,#9ac6aa);font-size:.84rem}.smart-mail-row.failed{border-color:rgba(255,88,88,.38)}.smart-mail-row.sent{opacity:.76}.smart-mail-row-actions{display:flex;gap:.45rem;flex-wrap:wrap;justify-content:flex-end}.smart-editor-form{display:grid;gap:.75rem;padding:1rem;margin-bottom:1rem;border:1px solid rgba(71,255,148,.25);border-radius:16px;background:rgba(1,16,8,.72)}.smart-editor-form label{display:grid;gap:.35rem;font-weight:700}.smart-editor-form input,.smart-editor-form textarea,.smart-editor-form select{width:100%;min-width:0}.smart-rule-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.smart-rule-actions{display:flex;gap:1rem;flex-wrap:wrap}.smart-rule-actions label,.check-row{display:flex!important;align-items:center;gap:.45rem}.smart-time-presets{display:flex;gap:.5rem;flex-wrap:wrap;margin:.8rem 0}.compose-foot{flex-wrap:wrap}.compose-foot .secondary-btn{white-space:nowrap}
@media(max-width:720px){.smart-mail-modal{width:100vw;max-width:none;height:100dvh;max-height:100dvh;border-radius:0;padding-bottom:calc(1rem + env(safe-area-inset-bottom));overflow:auto}.smart-mail-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.3rem;scrollbar-width:thin}.smart-mail-tabs .pill{flex:0 0 auto}.smart-mail-row{grid-template-columns:1fr}.smart-mail-row-actions{justify-content:stretch}.smart-mail-row-actions>*{flex:1 1 auto}.smart-rule-grid{grid-template-columns:1fr}.smart-mail-section-head{flex-direction:column}.smart-mail-section-head .primary-btn{width:100%}.compose-foot{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:.45rem}.compose-foot .send-btn{grid-column:span 2}.compose-foot .secondary-btn{min-width:0;padding:.7rem .55rem;white-space:normal}.compose-foot label.icon-btn,.compose-foot button.icon-btn{width:100%;min-width:0}.compose-preview-btn{grid-column:span 2}}
@media(max-width:390px){.compose-foot{grid-template-columns:repeat(3,minmax(0,1fr))}.compose-foot .send-btn{grid-column:span 2}.compose-preview-btn{grid-column:span 3}.smart-mail-row{padding:.8rem}}

/* =========================================================
   v12.0.6 — Smart Advanced Social Network + Communities
   ========================================================= */
.social-feed-page,.communities-page{max-width:1180px;margin:0 auto}.social-post-composer{display:grid;gap:14px;margin:0 0 18px;padding:18px}.social-post-composer textarea{width:100%;min-height:92px;resize:vertical}.social-post-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.social-post-options label{display:grid;gap:6px;font-size:.78rem;color:var(--muted)}.social-post-compose-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.social-feed-tabs{margin-bottom:16px}.social-feed-list{display:grid;gap:16px;max-width:820px}.social-post-card{position:relative;border:1px solid rgba(78,255,150,.2);border-radius:22px;background:linear-gradient(180deg,rgba(8,31,21,.96),rgba(3,17,12,.98));overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.18)}.social-post-card>header{display:flex;align-items:center;gap:10px;padding:15px 16px;border-bottom:1px solid rgba(78,255,150,.1)}.social-author-btn{min-width:0;flex:1;display:flex;align-items:center;gap:11px;border:0;background:none;color:inherit;text-align:left;padding:0;cursor:pointer}.social-author-btn>span:last-child{display:grid;min-width:0}.social-author-btn strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.social-author-btn small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.social-avatar{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#0a2a1d;border:1px solid rgba(61,255,139,.24);font-weight:900;overflow:hidden;flex:0 0 auto}.social-avatar img,.comment-avatar img{width:100%;height:100%;object-fit:cover}.social-visibility-badge{font-size:.7rem;padding:5px 8px;border-radius:999px;border:1px solid rgba(120,255,176,.2);color:#9cccb1;white-space:nowrap}.social-post-body{padding:16px 18px;font-size:1rem;line-height:1.62;overflow-wrap:anywhere}.social-media{background:#010805}.social-media img,.social-media video,.social-linked-image{display:block;width:100%;max-height:620px;object-fit:contain;background:#000}.social-media audio,.social-radio-card audio,.social-audio audio{width:100%}.social-audio{padding:16px;background:linear-gradient(135deg,rgba(44,255,132,.08),rgba(0,0,0,.2))}.social-audio-title{font-weight:800;margin-bottom:10px}.social-file-card,.social-link-card,.social-radio-card{margin:0 16px 16px;border:1px solid rgba(87,255,157,.18);border-radius:16px;background:rgba(6,28,18,.8);padding:14px}.social-file-card{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}.social-file-card span{color:var(--muted);font-size:.78rem}.social-link-card{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;overflow:hidden}.social-link-card>span:nth-child(2){display:grid;min-width:0;flex:1}.social-link-card strong,.social-link-card small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.social-link-card small{color:var(--muted)}.social-radio-card>div:first-child{display:flex;align-items:center;gap:12px;margin-bottom:12px}.social-radio-card>div:first-child>span{font-size:1.5rem}.social-radio-card>div:first-child>div{display:grid}.social-radio-card small{color:var(--muted)}.social-link-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.social-post-card>footer{padding:10px 14px 14px}.social-reaction-bar{display:flex;gap:5px;flex-wrap:wrap;padding:2px 0 9px}.social-reaction-btn{border:1px solid transparent;background:transparent;color:#d6f7e1;border-radius:999px;min-width:38px;height:34px;padding:0 8px;display:inline-flex;gap:4px;align-items:center;justify-content:center;cursor:pointer}.social-reaction-btn:hover,.social-reaction-btn.active{border-color:rgba(75,255,148,.36);background:rgba(55,255,137,.1)}.social-reaction-btn span{font-size:.7rem;color:#96c8aa}.social-post-footer-actions{display:flex;gap:8px;flex-wrap:wrap}.social-comments{border-top:1px solid rgba(78,255,150,.12);padding:14px 16px 16px;background:rgba(1,13,8,.42)}.social-comment-list{display:grid;gap:10px;margin-bottom:12px}.social-comment{display:grid;grid-template-columns:36px minmax(0,1fr);gap:9px}.social-comment.reply{margin-left:34px;margin-top:8px}.comment-avatar{width:36px;height:36px;border-radius:12px;background:#0d2b20;display:grid;place-items:center;overflow:hidden;font-weight:800}.social-comment-bubble{background:#092218;border:1px solid rgba(70,255,145,.11);border-radius:14px;padding:9px 11px}.social-comment-bubble p{margin:4px 0;overflow-wrap:anywhere}.social-comment-bubble small{color:var(--muted)}.social-comment-actions{display:flex;gap:12px;padding:3px 4px}.social-comment-actions button{border:0;background:none;color:#91bea3;font-size:.72rem;padding:3px;cursor:pointer}.social-comment-form{display:grid;grid-template-columns:1fr auto;gap:8px}.social-comment-form input{min-width:0}.profile-social-posts{margin-top:18px;border-top:1px solid rgba(74,255,148,.12);padding-top:16px}.profile-social-posts .social-feed-list{gap:12px}.profile-social-posts .social-post-card{box-shadow:none}.profile-social-posts .social-post-card>header,.profile-social-posts .social-post-card>footer{padding-left:12px;padding-right:12px}

.community-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;margin-top:18px}.community-card{--community-accent:#33ff8d;display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;padding:18px;border-radius:20px;border:1px solid color-mix(in srgb,var(--community-accent) 30%,transparent);background:linear-gradient(150deg,color-mix(in srgb,var(--community-accent) 8%,#07130d),#04100b);box-shadow:inset 0 1px rgba(255,255,255,.02)}.community-icon{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:1.7rem;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08)}.community-card-main{min-width:0}.community-card h3{margin:2px 0 7px;font-size:1.08rem}.community-card p{margin:0;color:#a4cdb2;line-height:1.4;min-height:38px}.community-category{font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--community-accent)}.community-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;color:#80ad92;font-size:.72rem}.community-card-actions{grid-column:1/-1;display:flex;gap:8px}.community-workspace-head{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:start;margin-bottom:18px}.community-title-row{display:flex;gap:14px;align-items:flex-start}.community-title-row h2{margin:1px 0 5px;font-size:1.55rem}.community-title-row p{margin:0;color:var(--muted);max-width:680px}.community-layout{display:grid;grid-template-columns:220px minmax(0,1fr) 220px;gap:16px;align-items:start}.community-sidebar,.community-members-pane{position:sticky;top:18px;border:1px solid rgba(74,255,148,.14);border-radius:18px;background:rgba(4,22,14,.82);padding:13px;max-height:calc(100vh - 210px);overflow:auto}.community-sidebar h3,.community-members-pane h3{margin:3px 5px 11px}.community-channel{width:100%;border:0;background:transparent;color:#a7cbb4;border-radius:12px;display:flex;gap:8px;align-items:center;text-align:left;padding:9px 10px;cursor:pointer}.community-channel:hover,.community-channel.active{background:rgba(54,255,135,.1);color:#f2fff6}.community-sidebar>.secondary-btn{width:100%;margin-top:12px}.community-main{min-width:0}.community-main .social-feed-list{max-width:none}.community-member{width:100%;display:flex;gap:8px;align-items:center;text-align:left;border:0;background:transparent;color:inherit;padding:7px;border-radius:10px;cursor:pointer}.community-member:hover{background:rgba(50,255,132,.08)}.community-member>span:last-child{display:grid;min-width:0}.community-member strong,.community-member small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.community-member small{color:var(--muted);font-size:.68rem}.community-manage-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.community-manage-member{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid rgba(75,255,148,.12);border-radius:14px;padding:11px;margin:8px 0}.community-manage-member>div:first-child{display:flex;gap:9px;align-items:center;min-width:0}.community-manage-member>div:first-child>span{display:grid;min-width:0}.community-manage-member small{color:var(--muted)}.community-role-editor,.member-request-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.permission-toggle-grid{display:grid;gap:8px;margin:14px 0}.dynamic-permission-modal{z-index:760}

@media (max-width:1000px){.community-layout{grid-template-columns:190px minmax(0,1fr)}.community-members-pane{grid-column:1/-1;position:static;max-height:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:5px}.community-members-pane h3{grid-column:1/-1}}
@media (max-width:760px){.social-feed-page,.communities-page{padding-left:12px!important;padding-right:12px!important}.social-post-options{grid-template-columns:1fr}.social-post-compose-actions{align-items:stretch;flex-direction:column}.social-post-compose-actions .primary-btn{width:100%}.social-post-card{border-radius:16px}.social-post-card>header{align-items:flex-start;padding:12px}.social-visibility-badge{display:none}.social-media img,.social-media video,.social-linked-image{max-height:70vh}.social-file-card{grid-template-columns:1fr}.social-comment.reply{margin-left:18px}.social-comment-form{grid-template-columns:1fr}.community-grid{grid-template-columns:1fr}.community-workspace-head{grid-template-columns:1fr}.community-workspace-head>.secondary-btn{justify-self:start}.community-layout{display:block}.community-sidebar{position:static;max-height:none;margin-bottom:12px}.community-sidebar #communityChannelList{display:flex;overflow-x:auto;gap:6px;padding-bottom:4px}.community-channel{width:auto;flex:0 0 auto;white-space:nowrap;border:1px solid rgba(80,255,150,.1)}.community-members-pane{display:none}.community-manage-grid{grid-template-columns:1fr}.community-manage-member{align-items:stretch;flex-direction:column}.community-role-editor,.member-request-actions{display:grid;grid-template-columns:1fr 1fr}.community-role-editor select{grid-column:1/-1}.social-post-footer-actions>*{flex:1}.profile-social-posts .social-post-card{margin-left:-4px;margin-right:-4px}}
@media (max-width:420px){.social-reaction-bar{gap:2px}.social-reaction-btn{min-width:33px;padding:0 5px}.social-post-card>footer{padding:8px 10px 12px}.community-card{grid-template-columns:1fr}.community-icon{width:48px;height:48px}.community-card-actions{grid-column:1}.community-card-actions>*{flex:1}.social-author-btn small{max-width:190px}}

/* ===== WWCFAM 12.0.7 — Smart Advanced Mail + Modern Worldwide Feed ===== */
:root{
  --wwc-black:#000000;
  --wwc-deep:#00170d;
  --wwc-panel:#032416;
  --wwc-panel-2:#062f1d;
  --wwc-green:#35ff8a;
  --wwc-lime:#82ff73;
  --wwc-mint:#caffdf;
  --wwc-cyan:#36e8ff;
  --wwc-purple:#bf6bff;
  --wwc-pink:#ff5edb;
  --wwc-gold:#ffd84d;
  --wwc-red:#ff5c73;
  --muted:#9ed8b3;
  --panel:#03170e;
  --panel2:#052318;
  --panel3:#08321f;
}
body{background:radial-gradient(circle at 12% 4%,rgba(53,255,138,.13),transparent 32%),radial-gradient(circle at 90% 0,rgba(54,232,255,.08),transparent 28%),#000;color:#f8fff9}
input,textarea,select{background:#02140c!important;color:#fff!important;border-color:rgba(53,255,138,.24)!important}
input::placeholder,textarea::placeholder{color:#80be98!important;opacity:1}
input:focus,textarea:focus,select:focus{border-color:var(--wwc-green)!important;box-shadow:0 0 0 3px rgba(53,255,138,.1),0 0 24px rgba(53,255,138,.08)!important;outline:none}
.card,.modal,.notification-panel,.account-menu,.search-results{background:linear-gradient(160deg,#041b11,#001008)!important;border-color:rgba(53,255,138,.2)!important}
.secondary-btn,.pill{background:#031c11!important;border-color:rgba(53,255,138,.22)!important;color:#d9ffe6!important}
.secondary-btn:hover,.pill:hover{background:#07301d!important;border-color:rgba(53,255,138,.48)!important;box-shadow:0 0 18px rgba(53,255,138,.1)}
.primary-btn{background:linear-gradient(135deg,var(--wwc-green),var(--wwc-lime))!important;color:#00170a!important;border-color:transparent!important;box-shadow:0 0 22px rgba(53,255,138,.18)}
.primary-btn:hover{box-shadow:0 0 34px rgba(53,255,138,.3)!important}
.mini,.preview,.date,.sync-state,.file-meta,.contact-email{color:#9ed8b3!important}
.empty-card{background:linear-gradient(145deg,rgba(3,37,22,.76),rgba(0,12,7,.92));border:1px dashed rgba(53,255,138,.36)!important;color:#b8ebc9!important;box-shadow:inset 0 1px rgba(130,255,115,.04)}

/* Mail labels */
.label-create-form{grid-template-columns:minmax(0,1fr) auto auto!important;align-items:end}.label-color-field{display:grid;gap:5px;color:#bff4cf;font-size:.78rem}.label-color-field input{width:54px!important;height:44px!important;padding:4px!important;cursor:pointer}.category-badge{--label-color:#35ff8a;border:1px solid color-mix(in srgb,var(--label-color) 58%,transparent)!important;background:color-mix(in srgb,var(--label-color) 13%,#001108)!important;color:color-mix(in srgb,var(--label-color) 72%,white)!important;box-shadow:0 0 15px color-mix(in srgb,var(--label-color) 12%,transparent)}.category-manager-row{background:#02170e!important;border-color:rgba(53,255,138,.15)!important}

/* Undo Send */
.undo-send-bar{position:fixed;z-index:990;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(560px,calc(100vw - 24px));display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 14px 13px 18px;border-radius:18px;background:linear-gradient(135deg,#052b1a,#00140c);border:1px solid rgba(53,255,138,.56);box-shadow:0 18px 60px #000,0 0 38px rgba(53,255,138,.2);animation:wwcUndoIn .2s ease-out}.undo-send-bar>div{display:grid;gap:2px}.undo-send-status{color:#b7eec9;font-size:.78rem}@keyframes wwcUndoIn{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}}
.mail-density-compact .mail-row{min-height:58px;padding-block:5px}.mail-density-compact .preview{margin-top:2px;font-size:.76rem}
.smart-settings-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:18px}.smart-sender-policy{border:1px solid rgba(53,255,138,.18);border-radius:18px;padding:16px;background:#02160d}.sender-policy-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.sender-policy-columns>div{padding:12px;border-radius:14px;background:#031f13;border:1px solid rgba(53,255,138,.12)}.sender-policy-chip{display:block;width:100%;text-align:left;margin:6px 0;padding:8px 10px;border-radius:12px;border:1px solid rgba(53,255,138,.22);background:#052b1a;color:#caffdf;cursor:pointer;overflow-wrap:anywhere}.smart-rule-actions{gap:12px!important;flex-wrap:wrap!important}.smart-rule-actions label{background:#031f13;border:1px solid rgba(53,255,138,.14);border-radius:999px;padding:8px 11px}

/* Productivity */
.productivity-page{max-width:1320px}.productivity-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:18px}.productivity-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.productivity-head h2{margin:0}.productivity-list{display:grid;gap:10px;margin-top:14px}.productivity-item{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:14px;border:1px solid rgba(53,255,138,.14);background:linear-gradient(145deg,#042518,#00130b);border-radius:16px}.productivity-item>div:first-child{display:grid;gap:4px;min-width:0}.productivity-item span,.productivity-item small{color:#9ed8b3;font-size:.78rem}.productivity-item p{margin:3px 0;color:#c6eed3}.productivity-item.completed{opacity:.62}.productivity-item.completed strong{text-decoration:line-through}.productivity-actions{display:flex;gap:7px;flex:0 0 auto}.task-check{display:flex;gap:10px;align-items:flex-start;min-width:0}.task-check>span{display:grid;gap:4px}.task-check input{width:20px!important;height:20px!important;min-height:0!important;accent-color:var(--wwc-green)}

/* Worldwide Feed — premium black/neon design, no dull neutral surfaces */
.social-feed-page{max-width:1160px!important}.social-feed-page>.page-head{max-width:860px}.social-post-composer{max-width:860px!important;padding:18px!important;background:radial-gradient(circle at 12% 0,rgba(53,255,138,.12),transparent 36%),linear-gradient(145deg,#042c1a,#001008)!important;border:1px solid rgba(53,255,138,.4)!important;box-shadow:0 22px 70px rgba(0,0,0,.55),0 0 35px rgba(53,255,138,.08)!important}.social-post-composer textarea{min-height:110px!important;background:#001108!important;border:1px solid rgba(53,255,138,.2)!important;border-radius:17px!important;padding:16px!important;font-size:1.03rem!important}.social-post-options{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.social-post-options label{background:#02180f;border:1px solid rgba(53,255,138,.13);border-radius:14px;padding:9px;color:#aee8c2!important}.social-post-options select{margin-top:6px}.social-feed-tabs{max-width:860px;display:flex;gap:7px;overflow-x:auto;scrollbar-width:thin}.social-feed-list{max-width:860px!important;gap:20px!important}.social-post-card{--post-accent:#35ff8a;border:1px solid color-mix(in srgb,var(--post-accent) 38%,transparent)!important;border-radius:24px!important;background:radial-gradient(circle at 90% -10%,color-mix(in srgb,var(--post-accent) 10%,transparent),transparent 35%),linear-gradient(160deg,#031d12,#000b06 70%)!important;box-shadow:0 22px 70px rgba(0,0,0,.58),0 0 28px color-mix(in srgb,var(--post-accent) 8%,transparent)!important;overflow:hidden}.social-post-card.style-neon{--post-accent:#35ff8a}.social-post-card.style-worldwide{--post-accent:#82ff73;background:radial-gradient(circle at 16% -15%,rgba(54,232,255,.16),transparent 36%),radial-gradient(circle at 88% 0,rgba(53,255,138,.15),transparent 35%),linear-gradient(150deg,#03261a,#000b07)!important}.social-post-card.style-purple{--post-accent:#bf6bff}.social-post-card.style-cyan{--post-accent:#36e8ff}.social-post-card.style-gold{--post-accent:#ffd84d}.social-post-card>header{padding:16px 18px!important;background:linear-gradient(90deg,color-mix(in srgb,var(--post-accent) 6%,#001008),#000b06)!important;border-color:color-mix(in srgb,var(--post-accent) 14%,transparent)!important}.social-avatar{width:50px!important;height:50px!important;border-radius:16px!important;border:1px solid color-mix(in srgb,var(--post-accent) 55%,transparent)!important;background:#04291a!important;box-shadow:0 0 18px color-mix(in srgb,var(--post-accent) 12%,transparent)}.social-author-btn strong{font-size:1rem;color:#fff}.social-author-btn small{color:#9ed8b3!important;margin-top:2px}.social-visibility-badge{color:color-mix(in srgb,var(--post-accent) 68%,white)!important;border-color:color-mix(in srgb,var(--post-accent) 30%,transparent)!important;background:color-mix(in srgb,var(--post-accent) 8%,#001008)!important}.social-post-body{padding:20px!important;font-size:1.06rem!important;color:#f9fffb;line-height:1.66!important}.social-media{background:#000!important;border-top:1px solid color-mix(in srgb,var(--post-accent) 10%,transparent);border-bottom:1px solid color-mix(in srgb,var(--post-accent) 10%,transparent)}.social-media img,.social-media video,.social-linked-image{background:#000!important}.social-file-card,.social-link-card,.social-radio-card{background:linear-gradient(145deg,#042619,#00140c)!important;border-color:color-mix(in srgb,var(--post-accent) 25%,transparent)!important;box-shadow:inset 0 1px rgba(130,255,115,.04)}.social-radio-card{position:relative;overflow:hidden}.social-radio-card:before{content:'';position:absolute;inset:-50% auto auto -20%;width:75%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--post-accent) 14%,transparent),transparent 68%);pointer-events:none}.social-post-card>footer{padding:12px 16px 16px!important;background:#001008}.social-reaction-bar{padding-bottom:11px!important}.social-reaction-btn{color:#e7ffef!important;background:#02170e!important;border:1px solid rgba(53,255,138,.08)!important}.social-reaction-btn:hover,.social-reaction-btn.active{background:color-mix(in srgb,var(--post-accent) 13%,#001008)!important;border-color:color-mix(in srgb,var(--post-accent) 48%,transparent)!important;transform:translateY(-1px)}.social-reaction-btn span{color:#9ed8b3!important}.social-post-footer-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px!important}.social-post-footer-actions .secondary-btn{width:100%;justify-content:center}.social-save-post.active{color:#00140b!important;background:var(--wwc-green)!important;border-color:var(--wwc-green)!important}.social-comments{background:linear-gradient(180deg,#031b11,#000d07)!important;border-color:rgba(53,255,138,.15)!important}.social-comment-bubble{background:#042619!important;border-color:rgba(53,255,138,.17)!important}.social-comment-actions button{color:#9ed8b3!important}.social-comment-form input{background:#001109!important}.community-card,.community-sidebar,.community-members-pane{background:linear-gradient(145deg,#042619,#001109)!important}.community-card p,.community-stats,.community-channel,.community-manage-member small{color:#9ed8b3!important}

@media(max-width:760px){.smart-settings-grid,.productivity-grid{grid-template-columns:1fr}.sender-policy-columns{grid-template-columns:1fr}.label-create-form{grid-template-columns:1fr!important}.label-color-field{grid-template-columns:auto 1fr;align-items:center}.social-post-options{grid-template-columns:1fr!important}.social-feed-page{padding-inline:10px!important}.social-post-card{border-radius:18px!important}.social-post-body{padding:16px!important}.social-post-footer-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important}.productivity-item{flex-direction:column}.productivity-actions{width:100%}.productivity-actions>*{flex:1}.undo-send-bar{bottom:calc(74px + env(safe-area-inset-bottom));}}
@media(max-width:420px){.social-post-footer-actions{grid-template-columns:1fr!important}.social-reaction-btn{min-width:38px!important}.undo-send-bar{align-items:stretch;flex-direction:column}.undo-send-bar .primary-btn{width:100%}}
.mail-quick-search{width:min(390px,42vw);margin-left:auto}.mail-quick-search input{width:100%;height:40px;min-height:40px!important;border-radius:999px!important;padding-inline:14px!important}.pane-toolbar .sync-state+.mail-quick-search{margin-left:auto}@media(max-width:760px){.mail-quick-search{width:min(58vw,320px)}.mail-quick-search input{font-size:.78rem}.pane-toolbar{flex-wrap:wrap}.pane-toolbar .mail-quick-search{order:3;width:100%;margin-left:0}}

/* =========================================================
   Phase 2.1 - Social, Communities, and professional Compose
   Keeps the original mail tabs, removes dead world-builder surface,
   and makes Compose impossible to stretch outside its own panel.
   ========================================================= */
.topbar{min-width:0;overflow:hidden}.brand,.top-search,.top-quick-nav,.account-wrap{min-width:0}.top-quick-nav{display:flex;align-items:center;gap:7px;max-width:min(760px,46vw);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}.top-quick-nav button{flex:0 0 auto;white-space:nowrap}
.account-center-hero,.account-center-hero>*{min-width:0}.account-center-hero h2,#accountCenterEmail{overflow-wrap:anywhere;word-break:break-word}.account-center-actions{min-width:0;flex-wrap:wrap}.account-center-actions>*{min-width:0}
.compose-window,.compose-window *{box-sizing:border-box;min-width:0;max-width:100%}.compose-window,.compose-window.open{right:14px!important;bottom:14px!important;display:flex!important;flex-direction:column!important;width:min(720px,calc(100vw - 28px))!important;height:min(760px,calc(100dvh - 96px))!important;max-height:calc(100dvh - 96px)!important;overflow:hidden!important;border-radius:22px!important;background:radial-gradient(circle at 8% 0,rgba(53,255,138,.12),transparent 34%),linear-gradient(160deg,#052818,#000b06 70%)!important;box-shadow:0 30px 110px rgba(0,0,0,.82),0 0 42px rgba(53,255,138,.14)!important}
.compose-head{flex:0 0 auto!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto auto auto!important;gap:7px!important;align-items:center!important;min-height:58px!important;padding:10px 12px!important}.compose-head #composeTitle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.compose-mode-pill{justify-self:center;max-width:180px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.compose-line{flex:0 0 auto!important;display:grid!important;grid-template-columns:72px minmax(0,1fr)!important;align-items:center!important;min-height:48px!important}.compose-line label{width:auto!important;flex-basis:auto!important;padding-left:12px!important}.compose-line input,.compose-line select{width:100%!important;min-width:0!important}
.recipient-capability{flex:0 0 auto!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:normal!important;padding:7px 12px!important}
.wwcfam-plus-panel{flex:0 0 auto!important;max-height:170px!important;overflow:auto!important}.wwcfam-plus-options{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))!important}
#composeBody{flex:1 1 auto!important;display:block!important;width:100%!important;min-height:140px!important;max-height:none!important;overflow:auto!important;padding:15px!important;background:#001108!important;border-top:1px solid rgba(53,255,138,.1)!important;border-bottom:1px solid rgba(53,255,138,.1)!important}
.compose-foot{flex:0 0 auto!important;display:grid!important;grid-template-columns:repeat(auto-fit,minmax(86px,1fr))!important;gap:7px!important;width:100%!important;max-width:100%!important;overflow:visible!important;padding:9px!important;border-top:1px solid rgba(53,255,138,.16)!important;background:#03170e!important}.compose-foot>*{width:100%!important;min-width:0!important;max-width:100%!important;white-space:normal!important}.compose-foot .send-btn{grid-column:span 1!important}.compose-foot .icon-btn{width:100%!important;min-width:0!important;padding-inline:6px!important}.compose-preview-btn{grid-column:span 2!important}
.compose-attachment-tray,.compose-files{flex:0 0 auto!important;display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))!important;gap:8px!important;width:100%!important;max-height:150px!important;overflow:auto!important;padding:9px!important;border-top:1px solid rgba(53,255,138,.1)!important;background:#001108!important}.compose-attachment-empty{grid-column:1/-1!important;overflow-wrap:anywhere!important}.compose-attachment-card{min-width:0!important}.compose-attachment-info strong{white-space:normal!important;overflow-wrap:anywhere!important}
.compose-delivery-row{flex:0 0 auto!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:6px!important;width:100%!important;overflow:hidden!important;padding:9px 12px!important}.compose-delivery-row>label{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;gap:8px!important;width:100%!important;min-width:0!important}.compose-delivery-row select{width:100%!important;min-width:0!important;max-width:100%!important}.compose-delivery-row .mini{width:100%!important;min-width:0!important;overflow-wrap:anywhere!important}
.social-feed-page,.communities-page{width:100%;max-width:1180px!important;overflow-x:hidden}.social-post-composer,.social-post-card,.community-card,.community-workspace,.community-main,.community-sidebar,.community-members-pane{min-width:0;max-width:100%;overflow-wrap:anywhere}.social-post-card *,.community-card *{min-width:0}.community-card{position:relative;overflow:hidden!important}.community-card:after{content:'';position:absolute;inset:auto 0 0 0;height:2px;background:linear-gradient(90deg,var(--community-accent),transparent);opacity:.75}.community-card-actions{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(105px,1fr))!important;gap:8px!important}.community-stats span{border:1px solid color-mix(in srgb,var(--community-accent) 24%,transparent);border-radius:999px;padding:4px 7px;background:color-mix(in srgb,var(--community-accent) 7%,#001008)}
.community-manage-grid{align-items:start}.community-danger-actions{display:grid;gap:8px}.danger-soft{border-color:rgba(255,92,115,.42)!important;color:#ff9bad!important;background:rgba(255,92,115,.075)!important}
@media(max-width:900px){.top-quick-nav{display:none}.compose-window,.compose-window.open{inset:var(--header) 0 0 0!important;width:100vw!important;height:auto!important;max-height:none!important;border-radius:0!important;border-left:0!important;border-right:0!important;border-bottom:0!important}.compose-head{grid-template-columns:minmax(0,1fr) auto auto!important}.compose-mode-pill{display:none!important}.compose-foot{grid-template-columns:repeat(4,minmax(0,1fr))!important}.compose-preview-btn{grid-column:span 2!important}.compose-attachment-tray,.compose-files{max-height:22dvh!important}.compose-delivery-row>label{grid-template-columns:1fr!important}}
@media(max-width:520px){.compose-line{grid-template-columns:54px minmax(0,1fr)!important}.compose-line label{padding-left:9px!important;font-size:.76rem!important}.compose-foot{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important;padding:7px!important}.compose-foot .send-btn{grid-column:span 1!important}.compose-preview-btn{grid-column:span 2!important}.compose-delivery-row{font-size:.74rem!important}.community-card{grid-template-columns:1fr!important}.community-icon{width:48px!important;height:48px!important}.community-workspace-head{gap:10px!important}.community-role-editor,.member-request-actions{grid-template-columns:1fr!important}}

/* Phase 2.1 Drive management: owner-only archive delete, mobile-safe controls */
.drive-danger-zone{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;margin-top:14px!important;padding:14px!important;border:1px solid rgba(255,92,115,.34)!important;border-radius:18px!important;background:linear-gradient(135deg,rgba(255,92,115,.10),rgba(0,0,0,.28))!important}.drive-danger-zone>div{display:grid!important;gap:4px!important;min-width:0!important}.drive-danger-zone strong{color:#ffd8df!important}.drive-danger-zone p{margin:0!important;overflow-wrap:anywhere!important}.drive-danger-zone button{flex:0 0 auto!important}@media(max-width:640px){.drive-danger-zone{align-items:stretch!important;flex-direction:column!important}.drive-danger-zone button{width:100%!important}}

/* =========================================================
   Phase 4 — Super Network fixes: Drive, Compose, Header, Mobile
   ========================================================= */
.topbar{
  overflow:hidden!important;
  min-width:0!important;
}
.topbar>*{min-width:0!important}
.top-quick-nav{
  flex:1 1 auto!important;
  max-width:none!important;
  min-width:0!important;
  overflow:hidden!important;
  scrollbar-width:none!important;
  gap:6px!important;
}
.top-quick-nav::-webkit-scrollbar{display:none!important}
.top-quick-nav button{
  flex:0 1 auto!important;
  min-width:0!important;
  max-width:140px!important;
  padding-inline:clamp(8px,.7vw,13px)!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  font-size:clamp(.82rem,.92vw,1rem)!important;
}
.top-search{
  flex:0 1 clamp(260px,27vw,470px)!important;
  min-width:220px!important;
  margin-inline:8px!important;
}
.install-brand-btn{flex:0 0 auto!important}

.compose-window:not(.open){
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.compose-window.open{
  display:flex!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
.compose-window{
  max-width:min(640px,calc(100vw - 28px))!important;
}
.compose-head .icon-btn{
  position:relative!important;
  z-index:3!important;
  pointer-events:auto!important;
}
.compose-foot{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(116px,1fr))!important;
  gap:8px!important;
  overflow:visible!important;
  align-items:stretch!important;
}
.compose-foot>*{
  min-height:44px!important;
  width:100%!important;
}
.compose-foot .icon-btn{
  border-color:rgba(53,255,138,.22)!important;
  background:#031c11!important;
  border-radius:14px!important;
  font-size:1rem!important;
}
.compose-preview-btn{grid-column:auto!important}
.compose-delivery-row select{
  white-space:normal!important;
  text-overflow:ellipsis!important;
}

.super-network-card{
  position:relative;
  overflow:hidden;
  background:radial-gradient(circle at 0 0,rgba(53,255,138,.17),transparent 34%),linear-gradient(145deg,#04281a,#000b06)!important;
}
.super-network-card:before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent,rgba(54,232,255,.06),transparent);
  pointer-events:none;
}
.super-network-card>*{position:relative}
.super-stat-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin:14px 0;
}
.super-stat-grid span{
  display:grid;
  gap:2px;
  padding:10px;
  border:1px solid rgba(53,255,138,.18);
  border-radius:14px;
  background:#02170e;
  text-align:center;
}
.super-stat-grid strong{color:#68ffa6;font-size:1.25rem}
.super-stat-grid small{color:#9ed8b3;font-size:.72rem}
.super-network-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.super-toggle-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:12px;
  margin:16px 0;
}
.super-toggle-grid section{
  border:1px solid rgba(53,255,138,.17);
  border-radius:18px;
  padding:12px;
  background:linear-gradient(145deg,#031f13,#000d07);
}
.super-toggle-grid h3{margin:0 0 10px;color:#92ffbd}
.super-toggle{
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  gap:10px;
  align-items:start;
  padding:10px;
  margin:7px 0;
  border:1px solid rgba(53,255,138,.12);
  border-radius:14px;
  background:#02150d;
}
.super-toggle input,.super-inline-sync input{
  width:20px!important;
  height:20px!important;
  min-height:0!important;
  accent-color:#35ff8a;
}
.super-toggle span{display:grid;gap:2px;min-width:0}
.super-toggle strong,.super-toggle small{overflow-wrap:anywhere}
.super-toggle small{color:#9ed8b3;font-size:.72rem}
.super-inline-sync{
  display:inline-grid;
  grid-template-columns:20px auto;
  gap:7px;
  align-items:center;
  margin-left:auto;
  padding:8px 10px;
  border:1px solid rgba(53,255,138,.18);
  border-radius:999px;
  background:#02170e;
  color:#caffdf;
  font-size:.78rem;
  font-weight:850;
  white-space:nowrap;
}
.super-inline-sync.disabled{opacity:.55}
.social-sync-badges{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  padding:0 18px 14px;
}
.social-sync-badges span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 9px;
  border:1px solid rgba(53,255,138,.28);
  border-radius:999px;
  background:#02170e;
  color:#bfffd3;
  font-size:.72rem;
  font-weight:850;
}
.social-sync-drive.active{
  color:#00170a!important;
  background:linear-gradient(135deg,#35ff8a,#82ff73)!important;
  border-color:transparent!important;
}
.super-activity-list{
  display:grid;
  gap:8px;
  max-height:min(65dvh,620px);
  overflow:auto;
  margin-top:14px;
}
.super-activity-row{
  display:grid;
  grid-template-columns:12px minmax(0,1fr);
  gap:10px;
  padding:11px;
  border:1px solid rgba(53,255,138,.14);
  border-radius:14px;
  background:#03190f;
}
.super-activity-row>span{
  width:9px;
  height:9px;
  margin-top:5px;
  border-radius:50%;
  background:#35ff8a;
  box-shadow:0 0 14px rgba(53,255,138,.5);
}
.super-activity-row div{display:grid;gap:3px;min-width:0}
.super-activity-row strong,.super-activity-row small,.super-activity-row em{overflow-wrap:anywhere}
.super-activity-row small{color:#b9e7c8}
.super-activity-row em{color:#9ed8b3;font-size:.72rem;font-style:normal}

@media(max-width:1360px){
  .top-quick-nav{display:none!important}
  .top-search{flex:1 1 auto!important;max-width:none!important}
}
@media(max-width:760px){
  .topbar{overflow:visible!important}
  .top-search{min-width:0!important;margin-inline:0!important}
  .compose-window.open{
    inset:60px 0 calc(62px + env(safe-area-inset-bottom)) 0!important;
    width:100vw!important;
    max-width:100vw!important;
    height:auto!important;
    max-height:none!important;
    border-radius:0!important;
  }
  .compose-foot{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    padding:8px!important;
  }
  .compose-foot .send-btn{grid-column:1/-1!important}
  .compose-attachment-tray,.compose-files{max-height:24dvh!important}
  .super-stat-grid,.super-network-actions{grid-template-columns:1fr 1fr}
  .super-network-actions .primary-btn{grid-column:1/-1}
  .social-post-footer-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .super-inline-sync{margin-left:0;width:max-content;max-width:100%}
}
@media(max-width:420px){
  .compose-foot,.social-post-footer-actions,.super-stat-grid,.super-network-actions{grid-template-columns:1fr!important}
}

/* =========================================================
   Phase 4.1 — Smart full-name header navigation
   The top menu must never show cut-off words like In... / Dr...
   ========================================================= */
@media(min-width:1201px){
  .topbar{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    height:var(--header)!important;
    min-height:var(--header)!important;
    gap:10px!important;
    overflow:hidden!important;
  }
  .brand{
    flex:0 0 clamp(245px,16vw,315px)!important;
    max-width:clamp(245px,16vw,315px)!important;
  }
  .top-quick-nav{
    display:flex!important;
    flex:0 0 auto!important;
    align-items:center!important;
    width:auto!important;
    max-width:none!important;
    min-width:max-content!important;
    gap:5px!important;
    overflow:visible!important;
    padding:0!important;
  }
  .top-quick-nav button{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:max-content!important;
    max-width:none!important;
    padding:0 clamp(9px,.62vw,13px)!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
    font-size:clamp(.84rem,.82vw,.98rem)!important;
    letter-spacing:-.015em!important;
  }
  .top-search{
    flex:1 1 clamp(280px,26vw,560px)!important;
    min-width:260px!important;
    max-width:560px!important;
    margin-inline:6px!important;
  }
}

@media(min-width:901px) and (max-width:1200px){
  .topbar{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    height:auto!important;
    min-height:var(--header)!important;
    gap:8px!important;
    overflow:visible!important;
    padding-bottom:8px!important;
  }
  .brand{
    flex:0 1 260px!important;
    max-width:260px!important;
  }
  .top-search{
    order:2!important;
    flex:1 1 360px!important;
    min-width:260px!important;
    max-width:none!important;
    margin-left:auto!important;
  }
  .top-quick-nav{
    order:10!important;
    display:flex!important;
    flex:1 0 100%!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    gap:7px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:6px 0 2px!important;
    scrollbar-width:thin!important;
  }
  .top-quick-nav button{
    flex:0 0 auto!important;
    min-width:max-content!important;
    max-width:none!important;
    padding:0 13px!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
    font-size:.95rem!important;
  }
}

@media(max-width:900px){
  .top-quick-nav{
    display:none!important;
  }
  .sidebar .nav-btn .label{
    display:inline!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
}

/* =========================================================
   Phase 4.1.1 — Header range fix, smart notifications, install hiding
   ========================================================= */
body.wwcfam-app-installed .install-brand-btn,
body.wwcfam-app-installed #sidebarInstallBtn,
body.wwcfam-app-installed #installBtn2,
.installed-hidden{
  display:none!important;
}

@media(min-width:901px) and (max-width:1440px){
  .topbar{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    height:auto!important;
    min-height:var(--header)!important;
    gap:8px!important;
    overflow:visible!important;
    padding-bottom:8px!important;
  }
  .brand{
    flex:0 0 clamp(230px,24vw,300px)!important;
    max-width:clamp(230px,24vw,300px)!important;
  }
  .top-quick-nav{
    order:10!important;
    display:flex!important;
    flex:1 0 100%!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    gap:7px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:6px 2px 2px!important;
    scrollbar-width:thin!important;
  }
  .top-quick-nav button{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:max-content!important;
    max-width:none!important;
    padding:0 13px!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
    font-size:.95rem!important;
  }
  .top-search{
    order:2!important;
    flex:1 1 360px!important;
    min-width:260px!important;
    max-width:none!important;
    margin-left:auto!important;
  }
}

@media(min-width:1441px){
  .topbar{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    overflow:hidden!important;
  }
  .top-quick-nav{
    display:flex!important;
    flex:0 0 auto!important;
    width:auto!important;
    max-width:none!important;
    min-width:max-content!important;
    overflow:visible!important;
  }
  .top-quick-nav button{
    flex:0 0 auto!important;
    min-width:max-content!important;
    max-width:none!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
}

.notification-wrap{
  position:relative!important;
  z-index:12050!important;
  overflow:visible!important;
  flex:0 0 auto!important;
}
.notification-btn{
  position:relative!important;
  z-index:12060!important;
}
.notification-panel{
  position:fixed!important;
  top:calc(var(--header) + 12px)!important;
  right:16px!important;
  left:auto!important;
  width:min(468px,calc(100vw - 24px))!important;
  max-width:none!important;
  max-height:min(720px,calc(100dvh - var(--header) - 24px))!important;
  overflow:hidden!important;
  z-index:12040!important;
  border:1px solid rgba(85,255,160,.48)!important;
  border-radius:22px!important;
  background:
    radial-gradient(circle at 10% 0,rgba(53,255,138,.18),transparent 38%),
    linear-gradient(160deg,rgba(4,30,18,.98),rgba(0,10,6,.98))!important;
  box-shadow:0 32px 120px rgba(0,0,0,.9),0 0 52px rgba(53,255,138,.2)!important;
  backdrop-filter:blur(22px)!important;
}
.notification-panel[hidden]{
  display:none!important;
}
.notification-head{
  position:sticky!important;
  top:0!important;
  z-index:2!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  padding:13px 14px!important;
  background:linear-gradient(135deg,rgba(10,58,33,.98),rgba(0,16,9,.98))!important;
  border-bottom:1px solid rgba(85,255,160,.22)!important;
}
.notification-list{
  display:grid!important;
  gap:8px!important;
  max-height:calc(min(720px,100dvh - var(--header) - 24px) - 64px)!important;
  overflow:auto!important;
  padding:10px!important;
  overscroll-behavior:contain!important;
}
.notification-smart-summary{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:10px!important;
  align-items:center!important;
  padding:12px!important;
  border:1px solid rgba(85,255,160,.18)!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,rgba(53,255,138,.12),rgba(4,20,13,.88))!important;
}
.notification-smart-summary strong,
.notification-smart-summary small{
  display:block!important;
}
.notification-smart-summary small{
  color:#a9ddba!important;
  margin-top:2px!important;
  line-height:1.35!important;
}
.notification-smart-summary>div:last-child{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
  gap:5px!important;
}
.notification-smart-summary span,
.notification-smart-chip,
.notification-new-dot{
  display:inline-flex!important;
  align-items:center!important;
  min-height:24px!important;
  padding:3px 8px!important;
  border-radius:999px!important;
  border:1px solid rgba(85,255,160,.2)!important;
  background:#03190f!important;
  color:#caffdf!important;
  font-size:.68rem!important;
  font-weight:900!important;
  white-space:nowrap!important;
}
.notification-new-dot{
  border-color:transparent!important;
  background:linear-gradient(135deg,#35ff8a,#82ff73)!important;
  color:#00170a!important;
}
.notification-item.smart-notification{
  grid-template-columns:minmax(0,1fr) 36px!important;
  gap:8px!important;
  padding:9px!important;
  border:1px solid color-mix(in srgb,var(--notification-accent,#35ff8a) 38%,transparent)!important;
  border-left-width:4px!important;
  border-radius:18px!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--notification-accent,#35ff8a) 9%,#03160d),#000d07)!important;
}
.notification-item.smart-notification.unread{
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--notification-accent,#35ff8a) 20%,transparent),0 0 32px rgba(53,255,138,.1)!important;
}
.notification-open{
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr)!important;
  gap:10px!important;
  align-items:start!important;
  width:100%!important;
  text-align:left!important;
}
.notification-avatar,
.notification-icon{
  width:36px!important;
  height:36px!important;
  border-radius:14px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  background:#051f13!important;
  border:1px solid color-mix(in srgb,var(--notification-accent,#35ff8a) 42%,transparent)!important;
}
.notification-avatar img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
.notification-copy{
  min-width:0!important;
  display:grid!important;
  gap:4px!important;
}
.notification-meta-row{
  display:flex!important;
  gap:6px!important;
  flex-wrap:wrap!important;
}
.notification-copy strong,
.notification-copy small{
  overflow-wrap:anywhere!important;
}
.notification-copy small{
  color:#9ed8b3!important;
}
.notification-dismiss{
  min-width:34px!important;
  min-height:34px!important;
  align-self:start!important;
}
.notification-empty{
  padding:18px!important;
  border:1px dashed rgba(85,255,160,.25)!important;
  border-radius:18px!important;
  text-align:center!important;
}

@media(max-width:760px){
  .notification-panel{
    top:calc(var(--header) + 8px)!important;
    left:8px!important;
    right:8px!important;
    width:auto!important;
    max-height:calc(100dvh - var(--header) - 18px)!important;
    border-radius:18px!important;
  }
  .notification-list{
    max-height:calc(100dvh - var(--header) - 92px)!important;
    padding:8px!important;
  }
  .notification-smart-summary{
    grid-template-columns:1fr!important;
  }
  .notification-smart-summary>div:last-child{
    justify-content:flex-start!important;
  }
}


/* ==========================================================
   WWCFAM Mail Phase 4.4 — right reader action menu repair
   ========================================================== */

.reader{
  overflow-x:hidden!important;
  scrollbar-gutter:stable!important;
}

.message-reader{
  max-width:980px!important;
  margin:0 auto!important;
}

.message-reader-toolbar.smart-reader-toolbar{
  position:sticky!important;
  top:0!important;
  z-index:90!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:10px!important;
  width:auto!important;
  max-width:none!important;
  max-height:none!important;
  margin:-34px -34px 24px!important;
  padding:12px!important;
  overflow:visible!important;
  border-bottom:1px solid rgba(93,255,168,.28)!important;
  background:
    radial-gradient(circle at 12% 0,rgba(53,255,138,.22),transparent 34%),
    linear-gradient(135deg,rgba(5,48,27,.98),rgba(0,13,8,.98) 56%,rgba(2,21,13,.98))!important;
  box-shadow:0 20px 60px rgba(0,0,0,.42),0 0 36px rgba(53,255,138,.08)!important;
  backdrop-filter:blur(20px)!important;
}

.message-reader-toolbar.smart-reader-toolbar>*{
  min-width:0!important;
  flex:initial!important;
  flex-shrink:1!important;
}

.reader-toolbar-topline,
.reader-toolbar-main,
.reader-toolbar-secondary{
  min-width:0!important;
  width:100%!important;
}

.reader-toolbar-topline{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}

.reader-toolbar-topline .pane-title{
  flex:1 1 auto!important;
  min-width:0!important;
  margin:0!important;
  font-size:1.02rem!important;
  letter-spacing:.01em!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

.reader-toolbar-main,
.reader-toolbar-secondary{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
}

.reader-toolbar-main{
  padding:10px!important;
  border:1px solid rgba(85,255,160,.16)!important;
  border-radius:20px!important;
  background:linear-gradient(135deg,rgba(2,24,14,.78),rgba(0,8,5,.5))!important;
}

.reader-toolbar-secondary{
  padding:10px!important;
  border:1px solid rgba(85,255,160,.12)!important;
  border-radius:18px!important;
  background:rgba(0,10,6,.42)!important;
}

.reader-folder-control{
  flex:1 1 260px!important;
  min-width:220px!important;
  display:grid!important;
  grid-template-columns:auto minmax(150px,1fr)!important;
  align-items:center!important;
  gap:8px!important;
  min-height:42px!important;
  padding:5px 6px 5px 12px!important;
  border:1px solid rgba(85,255,160,.2)!important;
  border-radius:16px!important;
  background:#02150c!important;
}

.reader-folder-control span{
  color:#a9ddba!important;
  font-size:.74rem!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  letter-spacing:.055em!important;
  white-space:nowrap!important;
}

.reader-folder-control select,
.smart-reader-toolbar .reader-move-select,
.smart-reader-toolbar .sent-move-select{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:36px!important;
}

.smart-reader-toolbar button,
.smart-reader-toolbar select{
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

.smart-reader-toolbar .secondary-btn,
.smart-reader-toolbar .primary-btn,
.smart-reader-toolbar .mail-star-btn{
  min-height:42px!important;
  border-radius:15px!important;
  flex:0 0 auto!important;
  box-shadow:none!important;
}

.smart-reader-toolbar .mail-star-btn{
  width:46px!important;
  min-width:46px!important;
  padding:0!important;
  display:inline-grid!important;
  place-items:center!important;
}

.smart-reader-toolbar .primary-btn{
  margin-left:auto!important;
  min-width:106px!important;
  justify-content:center!important;
}

.reader-toolbar-secondary .secondary-btn{
  border-color:rgba(116,255,186,.2)!important;
  background:rgba(0,28,16,.7)!important;
}

.reader-toolbar-secondary .danger-soft{
  border-color:rgba(255,137,154,.45)!important;
  background:rgba(60,10,20,.58)!important;
}

.message-reader>h1{
  max-width:860px!important;
  overflow-wrap:anywhere!important;
}

.message-meta{
  max-width:860px!important;
}

.message-body{
  max-width:860px!important;
  line-height:1.72!important;
}

@media(max-width:1280px){
  .message-reader-toolbar.smart-reader-toolbar{
    margin:-24px -24px 22px!important;
    padding:10px!important;
  }
  .reader-folder-control{
    flex-basis:220px!important;
  }
  .smart-reader-toolbar .secondary-btn,
  .smart-reader-toolbar .primary-btn{
    padding-inline:13px!important;
  }
}

@media(max-width:1050px){
  .reader.open{
    display:block!important;
  }
  .message-reader-toolbar.smart-reader-toolbar{
    max-height:calc(100dvh - var(--header) - 24px)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }
  .reader-toolbar-main,
  .reader-toolbar-secondary{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-items:stretch!important;
  }
  .reader-folder-control{
    grid-column:1/-1!important;
    min-width:0!important;
    width:100%!important;
  }
  .smart-reader-toolbar .secondary-btn,
  .smart-reader-toolbar .primary-btn{
    width:100%!important;
    min-width:0!important;
    justify-content:center!important;
    white-space:normal!important;
    text-align:center!important;
    line-height:1.12!important;
  }
  .smart-reader-toolbar .primary-btn{
    grid-column:1/-1!important;
    margin-left:0!important;
  }
}

@media(max-width:760px){
  .message-reader-toolbar.smart-reader-toolbar{
    margin:-12px -10px 16px!important;
    padding:8px!important;
    gap:8px!important;
    border-radius:0 0 18px 18px!important;
  }
  .reader-toolbar-topline{
    gap:6px!important;
  }
  .reader-toolbar-topline .pane-title{
    font-size:.96rem!important;
  }
  .reader-toolbar-main,
  .reader-toolbar-secondary{
    padding:8px!important;
    gap:7px!important;
  }
  .reader-folder-control{
    grid-template-columns:1fr!important;
    gap:5px!important;
  }
  .smart-reader-toolbar .secondary-btn,
  .smart-reader-toolbar .primary-btn,
  .smart-reader-toolbar .mail-star-btn{
    min-height:40px!important;
    border-radius:14px!important;
  }
}

@media(max-width:480px){
  .reader-toolbar-main,
  .reader-toolbar-secondary{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .reader-toolbar-topline{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr) auto!important;
  }
  .reader-toolbar-topline .wwc-inline-badge{
    grid-column:1/-1!important;
    justify-self:start!important;
  }
}


/* ==========================================================
   WWCFAM Mail — contained Inbox + notifications + people UI
   ========================================================== */

/* Treat the Mail workspace as two fixed application bars plus one contained workspace.
   The message list itself scrolls; its toolbar never shares the scrolling layer. */
body[data-wwcfam-page="mail"].wwcfam-global-header-ready .layout{
  height:calc(100dvh - var(--wwcfam-global-header-height,0px) - var(--header))!important;
  min-height:0!important;
  overflow:hidden!important;
}
body[data-wwcfam-page="mail"].wwcfam-global-header-ready .workspace,
body[data-wwcfam-page="mail"].wwcfam-global-header-ready .view,
body[data-wwcfam-page="mail"].wwcfam-global-header-ready .mail-view.active{
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  overflow:hidden!important;
}
body[data-wwcfam-page="mail"].wwcfam-global-header-ready .mail-view.active{
  align-items:stretch!important;
}
body[data-wwcfam-page="mail"].wwcfam-global-header-ready .mail-list-pane{
  position:relative!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  overflow:hidden!important;
  border-right:1px solid rgba(51,255,141,.11)!important;
  isolation:isolate!important;
}
body[data-wwcfam-page="mail"].wwcfam-global-header-ready .pane-toolbar{
  position:relative!important;
  inset:auto!important;
  grid-row:1!important;
  z-index:4!important;
  width:100%!important;
  min-width:0!important;
  min-height:62px!important;
  margin:0!important;
  padding:9px 12px!important;
  overflow:hidden!important;
  border-bottom:1px solid rgba(51,255,141,.16)!important;
  background:linear-gradient(180deg,rgba(5,23,14,.99),rgba(3,15,9,.98))!important;
  box-shadow:0 8px 22px rgba(0,0,0,.18)!important;
}
body[data-wwcfam-page="mail"].wwcfam-global-header-ready .pane-toolbar .pane-title{
  flex:0 0 auto!important;
  margin:0!important;
  max-width:32%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
body[data-wwcfam-page="mail"].wwcfam-global-header-ready .pane-toolbar .mail-quick-search{
  flex:1 1 230px!important;
  width:auto!important;
  min-width:120px!important;
  max-width:420px!important;
  margin-left:auto!important;
}
body[data-wwcfam-page="mail"].wwcfam-global-header-ready .pane-toolbar .mail-quick-search input{
  width:100%!important;
  min-width:0!important;
}
body[data-wwcfam-page="mail"].wwcfam-global-header-ready #mailList{
  grid-row:2!important;
  min-height:0!important;
  height:100%!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable!important;
}
body[data-wwcfam-page="mail"].wwcfam-global-header-ready #mailEmpty.empty-card{
  grid-row:2!important;
  align-self:start!important;
  justify-self:center!important;
  position:relative!important;
  z-index:1!important;
  width:calc(100% - 28px)!important;
  margin:22px 14px!important;
  min-height:112px!important;
  max-height:none!important;
  overflow:visible!important;
}
body[data-wwcfam-page="mail"].wwcfam-global-header-ready .reader{
  position:relative!important;
  inset:auto!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}

/* Notification center starts below both WWCFAM navigation bars and remains in the viewport. */
body[data-wwcfam-page="mail"].wwcfam-global-header-ready .notification-panel{
  position:fixed!important;
  top:calc(var(--wwcfam-global-header-height,0px) + var(--header) + 8px)!important;
  right:12px!important;
  left:auto!important;
  width:min(440px,calc(100vw - 24px))!important;
  max-width:440px!important;
  max-height:calc(100dvh - var(--wwcfam-global-header-height,0px) - var(--header) - 18px)!important;
  overflow:hidden!important;
  z-index:2147483200!important;
  border-radius:20px!important;
}
body[data-wwcfam-page="mail"].wwcfam-global-header-ready .notification-head{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:8px!important;
  align-items:center!important;
  min-width:0!important;
}
body[data-wwcfam-page="mail"].wwcfam-global-header-ready .notification-head strong{
  min-width:0!important;
  overflow-wrap:anywhere!important;
}
body[data-wwcfam-page="mail"].wwcfam-global-header-ready .notification-head .secondary-btn{
  width:auto!important;
  min-width:0!important;
  max-width:150px!important;
  white-space:normal!important;
  line-height:1.12!important;
}
body[data-wwcfam-page="mail"].wwcfam-global-header-ready .notification-list{
  max-height:calc(100dvh - var(--wwcfam-global-header-height,0px) - var(--header) - 84px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
.notification-item.smart-notification{
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr) 34px!important;
  gap:8px!important;
  align-items:start!important;
  min-width:0!important;
  max-width:100%!important;
}
.notification-person{
  width:40px!important;
  min-width:40px!important;
  height:40px!important;
  border-radius:14px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  text-decoration:none!important;
  background:#051f13!important;
  border:1px solid color-mix(in srgb,var(--notification-accent,#35ff8a) 42%,transparent)!important;
}
.notification-person img{width:100%!important;height:100%!important;object-fit:cover!important}
.notification-person .notification-icon{width:100%!important;height:100%!important;border:0!important;border-radius:0!important}
.notification-open{
  grid-column:2!important;
  display:block!important;
  min-width:0!important;
  width:100%!important;
  padding:0!important;
}
.notification-copy{display:grid!important;gap:4px!important;min-width:0!important}
.notification-actor-row{display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:wrap!important;min-width:0!important}
.notification-actor-link{
  color:#9dffbe!important;
  font-weight:900!important;
  font-size:.78rem!important;
  text-decoration:none!important;
  overflow-wrap:anywhere!important;
}
.notification-actor-link:hover,.notification-actor-link:focus-visible{text-decoration:underline!important}
.notification-profile-actions{
  width:30px!important;min-width:30px!important;height:30px!important;min-height:30px!important;
  padding:0!important;border-radius:10px!important;align-self:start!important;
}
.notification-dismiss{grid-column:3!important;grid-row:1!important}
.notification-smart-summary{grid-column:1/-1!important;max-width:100%!important;min-width:0!important}

/* Profile/action popup is a compact action sheet, never an overlay that captures application controls. */
.wwcfam-profile-action-pop{
  max-height:min(360px,calc(100dvh - 24px))!important;
  overflow:auto!important;
}

@media(max-width:980px){
  body[data-wwcfam-page="mail"].wwcfam-global-header-ready .mail-view.active{
    grid-template-columns:minmax(0,1fr)!important;
  }
  body[data-wwcfam-page="mail"].wwcfam-global-header-ready .mail-list-pane{border-right:0!important}
}
@media(max-width:760px){
  body[data-wwcfam-page="mail"].wwcfam-global-header-ready .layout{
    height:calc(100dvh - var(--wwcfam-global-header-height,0px) - var(--header) - 62px - env(safe-area-inset-bottom))!important;
  }
  body[data-wwcfam-page="mail"].wwcfam-global-header-ready .pane-toolbar{
    min-height:58px!important;
    padding:7px 8px!important;
    gap:6px!important;
  }
  body[data-wwcfam-page="mail"].wwcfam-global-header-ready .pane-toolbar .pane-title{max-width:30%!important;font-size:.9rem!important}
  body[data-wwcfam-page="mail"].wwcfam-global-header-ready .pane-toolbar .mail-quick-search{flex:1 1 auto!important;min-width:0!important}
  body[data-wwcfam-page="mail"].wwcfam-global-header-ready #mailEmpty.empty-card{width:calc(100% - 16px)!important;margin:12px 8px!important}
  body[data-wwcfam-page="mail"].wwcfam-global-header-ready .notification-panel{
    top:calc(var(--wwcfam-global-header-height,0px) + var(--header) + 4px)!important;
    left:6px!important;
    right:6px!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(100dvh - var(--wwcfam-global-header-height,0px) - var(--header) - 72px - env(safe-area-inset-bottom))!important;
    border-radius:16px!important;
  }
  body[data-wwcfam-page="mail"].wwcfam-global-header-ready .notification-list{
    max-height:calc(100dvh - var(--wwcfam-global-header-height,0px) - var(--header) - 136px - env(safe-area-inset-bottom))!important;
  }
  .notification-item.smart-notification{grid-template-columns:38px minmax(0,1fr) 32px!important;padding:8px!important}
  .notification-person{width:36px!important;min-width:36px!important;height:36px!important}
}
@media(max-width:430px){
  body[data-wwcfam-page="mail"].wwcfam-global-header-ready .pane-toolbar .sync-state{display:none!important}
  body[data-wwcfam-page="mail"].wwcfam-global-header-ready .pane-toolbar .pane-title{max-width:25%!important}
  .notification-head{grid-template-columns:1fr!important}
  .notification-head .secondary-btn{max-width:none!important;width:100%!important}
}


/* ==========================================================
   WWCFAM Mail — stable notification cards + media/avatar display
   ========================================================== */
body[data-wwcfam-page="mail"].wwcfam-global-header-ready .notification-panel{
  width:min(430px,calc(100vw - 24px))!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
body[data-wwcfam-page="mail"].wwcfam-global-header-ready .notification-list{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
.notification-smart-summary{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  width:100%!important;
  min-width:0!important;
  gap:8px!important;
  box-sizing:border-box!important;
}
.notification-smart-summary>div,
.notification-smart-summary>div:last-child{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  justify-content:flex-start!important;
}
.notification-smart-summary strong,
.notification-smart-summary small{
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
}
.notification-item.smart-notification{
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr) 34px!important;
  grid-template-rows:auto!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  gap:10px!important;
  align-items:start!important;
}
.notification-main{
  grid-column:2!important;
  grid-row:1!important;
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
}
.notification-open{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:5px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  padding:0!important;
  margin:0!important;
  text-align:left!important;
  white-space:normal!important;
  overflow:visible!important;
}
.notification-open strong,
.notification-open small,
.notification-actor-link{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
  hyphens:none!important;
}
.notification-meta-row,
.notification-actor-row{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:6px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
.notification-actor-link{
  flex:1 1 140px!important;
  width:auto!important;
}
.notification-profile-actions{
  flex:0 0 30px!important;
}
.notification-dismiss{
  grid-column:3!important;
  grid-row:1!important;
  width:32px!important;
  min-width:32px!important;
  height:32px!important;
  min-height:32px!important;
}
.notification-person{
  grid-column:1!important;
  grid-row:1!important;
  width:40px!important;
  min-width:40px!important;
  height:40px!important;
  min-height:40px!important;
  position:relative!important;
}
.notification-person img,
.notification-person .wwcfam-avatar-fallback{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:inherit!important;
}
.notification-person .wwcfam-avatar-fallback{
  display:grid!important;
  place-items:center!important;
  font-weight:900!important;
  color:#d8ffe6!important;
}
.notification-person .wwcfam-avatar-fallback[hidden],
.wwcfam-avatar-fallback[hidden]{display:none!important}
.row-avatar .wwcfam-avatar-fallback,
.person-avatar .wwcfam-avatar-fallback,
.profile-avatar-big .wwcfam-avatar-fallback,
.avatar .wwcfam-avatar-fallback,
.comment-avatar .wwcfam-avatar-fallback,
.social-avatar .wwcfam-avatar-fallback{
  width:100%!important;
  height:100%!important;
  place-items:center!important;
  font-weight:900!important;
}
.notification-media-preview{
  display:block!important;
  width:min(100%,320px)!important;
  max-width:100%!important;
  max-height:180px!important;
  object-fit:cover!important;
  border-radius:12px!important;
  border:1px solid rgba(85,255,160,.2)!important;
  margin-top:4px!important;
}
@media(max-width:760px){
  body[data-wwcfam-page="mail"].wwcfam-global-header-ready .notification-panel{
    left:8px!important;
    right:8px!important;
    width:auto!important;
    max-width:none!important;
  }
  .notification-item.smart-notification{
    grid-template-columns:38px minmax(0,1fr) 32px!important;
    gap:8px!important;
  }
  .notification-person{width:36px!important;min-width:36px!important;height:36px!important;min-height:36px!important}
}
@media(max-width:430px){
  .notification-smart-summary>div:last-child{display:flex!important;overflow-x:auto!important;flex-wrap:nowrap!important;padding-bottom:2px!important}
  .notification-smart-chip,.notification-new-dot{flex:0 0 auto!important}
  .notification-item.smart-notification{padding:8px!important}
}


/* WWCFAM message composer: Send stays reachable on every screen. */
.compose-head-send{
  min-height:38px!important;
  padding:7px 14px!important;
  border:0!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,#35ff8a,#69f6ff)!important;
  color:#00180d!important;
  font-weight:950!important;
  cursor:pointer!important;
  white-space:nowrap!important;
  box-shadow:0 0 18px rgba(53,255,138,.16)!important;
}
.compose-head-send:active{transform:translateY(1px)}
.compose-window.open #composeBody{
  flex:1 1 140px!important;
  min-height:96px!important;
  overflow:auto!important;
}
.compose-window.open .compose-foot{
  position:sticky!important;
  bottom:0!important;
  z-index:8!important;
  flex:0 0 auto!important;
}
@media(max-width:900px){
  .compose-window.open{
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }
  .compose-head{
    position:sticky!important;
    top:0!important;
    z-index:12!important;
    background:#07170f!important;
  }
  .compose-head-send{
    min-width:72px!important;
    min-height:40px!important;
  }
  .compose-window.open .compose-foot{
    bottom:0!important;
    background:#03170e!important;
    box-shadow:0 -12px 28px rgba(0,0,0,.32)!important;
  }
}
@media(max-width:520px){
  .compose-head{
    grid-template-columns:minmax(0,1fr) auto auto auto!important;
    gap:5px!important;
  }
  .compose-head-send{
    padding-inline:10px!important;
    min-width:62px!important;
    font-size:.82rem!important;
  }
  .compose-head .icon-btn{
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
  }
  .compose-window.open .compose-foot .send-btn{
    display:block!important;
    grid-column:1/-1!important;
    min-height:50px!important;
    font-size:1rem!important;
  }
}


/* ======================================================================
   WWCFAM Mail 12.09.0 — compose / reply / notifications containment fix
   Final override layer. Keeps every control readable on phone + desktop.
   ====================================================================== */
:root{--wwcfam-mail-mobile-dock:62px}

/* No text or control inside Mail may make the viewport wider. */
body[data-wwcfam-page="mail"] .workspace,
body[data-wwcfam-page="mail"] .view,
body[data-wwcfam-page="mail"] .page,
body[data-wwcfam-page="mail"] .card,
body[data-wwcfam-page="mail"] .message-reader,
body[data-wwcfam-page="mail"] .notification-panel,
body[data-wwcfam-page="mail"] .compose-window,
body[data-wwcfam-page="mail"] .modal{min-width:0!important;max-width:100%!important}
body[data-wwcfam-page="mail"] .page h1,
body[data-wwcfam-page="mail"] .page h2,
body[data-wwcfam-page="mail"] .page h3,
body[data-wwcfam-page="mail"] .page p,
body[data-wwcfam-page="mail"] .card,
body[data-wwcfam-page="mail"] .message-reader,
body[data-wwcfam-page="mail"] .contact-email,
body[data-wwcfam-page="mail"] .file-name{overflow-wrap:anywhere!important;word-break:normal!important}
body[data-wwcfam-page="mail"] .page .primary-btn,
body[data-wwcfam-page="mail"] .page .secondary-btn,
body[data-wwcfam-page="mail"] .modal .primary-btn,
body[data-wwcfam-page="mail"] .modal .secondary-btn{white-space:normal!important;line-height:1.18!important;height:auto!important;min-height:40px!important}

/* Desktop header labels scroll instead of being cut in half. */
body[data-wwcfam-page="mail"] .top-quick-nav{overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;overscroll-behavior-inline:contain!important}
body[data-wwcfam-page="mail"] .top-quick-nav::-webkit-scrollbar{display:none!important}
body[data-wwcfam-page="mail"] .top-quick-nav button{flex:0 0 auto!important;white-space:nowrap!important}

/* Composer is a real contained editor. The same component is used for compose + reply. */
body[data-wwcfam-page="mail"] .compose-window.open{
  display:flex!important;
  flex-direction:column!important;
  width:min(680px,calc(100vw - 28px))!important;
  max-width:680px!important;
  height:min(720px,calc(100dvh - var(--wwcfam-global-header-height,0px) - var(--header,60px) - 30px))!important;
  max-height:calc(100dvh - var(--wwcfam-global-header-height,0px) - var(--header,60px) - 30px)!important;
  inset:auto 14px 14px auto!important;
  overflow:hidden!important;
}
body[data-wwcfam-page="mail"] .compose-head{
  flex:0 0 auto!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
}
body[data-wwcfam-page="mail"] #composeTitle{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
body[data-wwcfam-page="mail"] .compose-line{flex:0 0 auto!important;min-width:0!important;width:100%!important}
body[data-wwcfam-page="mail"] .compose-from-line select,
body[data-wwcfam-page="mail"] .compose-line input{min-width:0!important;max-width:100%!important;width:100%!important}

/* The Standard Internet Email explanation must never be clipped. */
body[data-wwcfam-page="mail"] .recipient-capability{
  flex:0 0 auto!important;
  display:grid!important;
  grid-template-columns:10px minmax(0,1fr)!important;
  align-items:start!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  padding:8px 11px!important;
  line-height:1.38!important;
}
body[data-wwcfam-page="mail"] .recipient-capability .cap-dot{margin-top:.38em!important}
body[data-wwcfam-page="mail"] .recipient-capability-copy{display:grid!important;gap:3px!important;min-width:0!important;max-width:100%!important}
body[data-wwcfam-page="mail"] .recipient-capability-title{display:flex!important;align-items:baseline!important;flex-wrap:wrap!important;gap:2px 6px!important;min-width:0!important;max-width:100%!important}
body[data-wwcfam-page="mail"] .recipient-capability-address,
body[data-wwcfam-page="mail"] .recipient-capability-note{display:block!important;min-width:0!important;max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important}
body[data-wwcfam-page="mail"] .recipient-capability-note{color:var(--muted)!important;font-size:.76rem!important}

body[data-wwcfam-page="mail"] .compose-body-label{
  flex:0 0 auto!important;
  display:block!important;
  padding:7px 12px 5px!important;
  color:#b8e9c9!important;
  font-size:.76rem!important;
  font-weight:900!important;
  letter-spacing:.02em!important;
  border-top:1px solid rgba(53,255,138,.10)!important;
  background:#03140c!important;
}
body[data-wwcfam-page="mail"] #composeBody{
  flex:1 1 180px!important;
  min-height:120px!important;
  width:100%!important;
  max-width:100%!important;
  padding:12px!important;
  resize:none!important;
  overflow:auto!important;
}

/* Visible attachment actions: device files, Drive, audio and video recording. */
body[data-wwcfam-page="mail"] .compose-foot{
  flex:0 0 auto!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:6px!important;
  width:100%!important;
  max-width:100%!important;
  padding:8px!important;
  overflow:visible!important;
  background:#03170e!important;
  border-top:1px solid rgba(53,255,138,.16)!important;
}
body[data-wwcfam-page="mail"] .compose-foot>*{min-width:0!important;width:100%!important;max-width:100%!important;margin:0!important}
body[data-wwcfam-page="mail"] .compose-tool-btn{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  cursor:pointer!important;
  min-height:42px!important;
  padding:7px 8px!important;
  white-space:normal!important;
  text-align:center!important;
}
body[data-wwcfam-page="mail"] .compose-tool-btn span:last-child{overflow:hidden!important;text-overflow:ellipsis!important}
body[data-wwcfam-page="mail"] .compose-preview-btn{grid-column:auto!important}
body[data-wwcfam-page="mail"] .compose-attachment-tray{
  flex:0 0 auto!important;
  width:100%!important;
  min-width:0!important;
  max-height:150px!important;
  overflow:auto!important;
}
body[data-wwcfam-page="mail"] .compose-attachment-empty{width:100%!important;min-width:0!important;overflow-wrap:anywhere!important;line-height:1.4!important}
body[data-wwcfam-page="mail"] .compose-delivery-row{
  flex:0 0 auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:6px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:visible!important;
  padding:9px 11px!important;
}
body[data-wwcfam-page="mail"] .compose-delivery-row>label{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:center!important;gap:8px!important;min-width:0!important;width:100%!important}
body[data-wwcfam-page="mail"] .compose-delivery-row select{min-width:0!important;width:100%!important;max-width:100%!important;white-space:normal!important}
body[data-wwcfam-page="mail"] .compose-delivery-row .mini{display:block!important;min-width:0!important;width:100%!important;max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;line-height:1.35!important}

/* Drive attachment picker is also phone-safe. */
body[data-wwcfam-page="mail"] #composeDrivePickerModal .modal{width:min(680px,calc(100vw - 20px))!important;max-width:calc(100vw - 20px)!important}
body[data-wwcfam-page="mail"] .drive-picker-list{min-width:0!important;max-width:100%!important;overflow-x:hidden!important}
body[data-wwcfam-page="mail"] .drive-picker-row{grid-template-columns:40px minmax(0,1fr) auto!important;min-width:0!important;max-width:100%!important}
body[data-wwcfam-page="mail"] .drive-picker-row strong{white-space:normal!important;overflow-wrap:anywhere!important;text-overflow:clip!important}

/* Notification center: fully contained on desktop and phone, never off-screen. */
body[data-wwcfam-page="mail"] .notification-panel,
body[data-wwcfam-page="mail"].wwcfam-global-header-ready .notification-panel{
  position:fixed!important;
  top:calc(var(--wwcfam-global-header-height,0px) + var(--header,60px) + 8px)!important;
  right:10px!important;
  bottom:10px!important;
  left:auto!important;
  display:flex!important;
  flex-direction:column!important;
  width:min(480px,calc(100vw - 20px))!important;
  max-width:480px!important;
  min-width:0!important;
  max-height:none!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
body[data-wwcfam-page="mail"] .notification-panel[hidden]{display:none!important}
body[data-wwcfam-page="mail"] .notification-head{
  position:sticky!important;
  top:0!important;
  z-index:3!important;
  flex:0 0 auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
  padding:10px!important;
  background:#07100c!important;
}
body[data-wwcfam-page="mail"] .notification-head strong{min-width:0!important;white-space:normal!important;overflow-wrap:anywhere!important}
body[data-wwcfam-page="mail"] .notification-head .secondary-btn{width:auto!important;max-width:170px!important;min-width:0!important;white-space:normal!important;height:auto!important;line-height:1.15!important}
body[data-wwcfam-page="mail"] .notification-list{
  flex:1 1 auto!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:7px!important;
}
body[data-wwcfam-page="mail"] .notification-smart-summary,
body[data-wwcfam-page="mail"] .notification-smart-summary>div,
body[data-wwcfam-page="mail"] .notification-smart-summary>div:last-child{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  display:flex!important;
  flex-wrap:wrap!important;
  overflow:visible!important;
  gap:6px!important;
}
body[data-wwcfam-page="mail"] .notification-item.smart-notification{
  display:grid!important;
  grid-template-columns:40px minmax(0,1fr) 34px!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  padding:9px!important;
}
body[data-wwcfam-page="mail"] .notification-main,
body[data-wwcfam-page="mail"] .notification-open,
body[data-wwcfam-page="mail"] .notification-copy,
body[data-wwcfam-page="mail"] .notification-meta-row,
body[data-wwcfam-page="mail"] .notification-actor-row{min-width:0!important;max-width:100%!important;width:100%!important}
body[data-wwcfam-page="mail"] .notification-open strong,
body[data-wwcfam-page="mail"] .notification-open small,
body[data-wwcfam-page="mail"] .notification-actor-link{
  min-width:0!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
body[data-wwcfam-page="mail"] .notification-media-preview{width:100%!important;max-width:100%!important;height:auto!important;max-height:220px!important;object-fit:cover!important}

@media(max-width:900px){
  body[data-wwcfam-page="mail"] .compose-window.open{
    top:calc(var(--wwcfam-global-header-height,0px) + var(--header,60px))!important;
    right:0!important;
    bottom:calc(var(--wwcfam-mail-mobile-dock) + env(safe-area-inset-bottom))!important;
    left:0!important;
    width:100vw!important;
    max-width:100vw!important;
    height:auto!important;
    max-height:none!important;
    border-radius:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
  }
  body[data-wwcfam-page="mail"] .compose-head{position:sticky!important;top:0!important;z-index:20!important}
  body[data-wwcfam-page="mail"] .recipient-capability{padding:7px 9px!important}
  body[data-wwcfam-page="mail"] #composeBody{flex:1 0 140px!important;min-height:140px!important;font-size:16px!important}
  body[data-wwcfam-page="mail"] .compose-foot{grid-template-columns:repeat(3,minmax(0,1fr))!important;position:relative!important;bottom:auto!important}
  body[data-wwcfam-page="mail"] .compose-attachment-tray{max-height:30dvh!important}
  body[data-wwcfam-page="mail"] .compose-delivery-row>label{grid-template-columns:minmax(0,1fr)!important}
  body[data-wwcfam-page="mail"] #composeDrivePickerModal .identity-profile-grid{grid-template-columns:minmax(0,1fr)!important}
}

@media(max-width:520px){
  body[data-wwcfam-page="mail"] .compose-head{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto auto!important;align-items:center!important;gap:4px!important;padding:6px!important}
  body[data-wwcfam-page="mail"] .compose-mode-pill{display:none!important}
  body[data-wwcfam-page="mail"] .compose-head-send{min-width:58px!important;padding-inline:8px!important}
  body[data-wwcfam-page="mail"] .compose-line{display:grid!important;grid-template-columns:52px minmax(0,1fr)!important}
  body[data-wwcfam-page="mail"] .compose-line label{width:auto!important;min-width:0!important;flex:none!important;padding-left:8px!important;font-size:.75rem!important}
  body[data-wwcfam-page="mail"] .recipient-capability{font-size:.76rem!important}
  body[data-wwcfam-page="mail"] .recipient-capability-note{font-size:.72rem!important}
  body[data-wwcfam-page="mail"] .compose-foot{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important;padding:6px!important}
  body[data-wwcfam-page="mail"] .compose-foot .send-btn{grid-column:1/-1!important;min-height:48px!important;font-size:1rem!important}
  body[data-wwcfam-page="mail"] .compose-tool-btn{min-height:44px!important}
  body[data-wwcfam-page="mail"] .compose-preview-btn{grid-column:1/-1!important}
  body[data-wwcfam-page="mail"] .compose-delivery-row{padding:8px!important}

  body[data-wwcfam-page="mail"] .notification-panel,
  body[data-wwcfam-page="mail"].wwcfam-global-header-ready .notification-panel{
    top:calc(var(--wwcfam-global-header-height,0px) + var(--header,60px) + 4px)!important;
    right:6px!important;
    bottom:calc(var(--wwcfam-mail-mobile-dock) + env(safe-area-inset-bottom) + 4px)!important;
    left:6px!important;
    width:auto!important;
    max-width:none!important;
    border-radius:15px!important;
  }
  body[data-wwcfam-page="mail"] .notification-head{grid-template-columns:minmax(0,1fr)!important;align-items:stretch!important}
  body[data-wwcfam-page="mail"] .notification-head .secondary-btn{width:100%!important;max-width:none!important}
  body[data-wwcfam-page="mail"] .notification-item.smart-notification{grid-template-columns:36px minmax(0,1fr) 30px!important;padding:8px!important;gap:7px!important}
  body[data-wwcfam-page="mail"] .notification-person{width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important}
  body[data-wwcfam-page="mail"] .notification-dismiss{width:30px!important;min-width:30px!important;height:30px!important;min-height:30px!important}
}

/* === 12.09.2 — Visual restore + non-destructive smart media previews ===
   Keep the established WWCFAM Mail layout exactly as before the media-preview
   update. These rules only make attachment media fit its existing card and
   provide an expanded viewer; they do not redefine the composer/card grid. */
body[data-wwcfam-page="mail"] .compose-attachment-card,
body[data-wwcfam-page="mail"] .compose-attachment-preview,
body[data-wwcfam-page="mail"] .compose-attachment-info,
body[data-wwcfam-page="mail"] .compose-attachment-actions{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
body[data-wwcfam-page="mail"] .compose-preview-open,
body[data-wwcfam-page="mail"] .compose-video-preview,
body[data-wwcfam-page="mail"] .compose-audio-preview{
  max-width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
body[data-wwcfam-page="mail"] .compose-attachment-image,
body[data-wwcfam-page="mail"] video.compose-attachment-media{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#020403!important;
}
body[data-wwcfam-page="mail"] audio.compose-attachment-media{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}
body[data-wwcfam-page="mail"] .compose-attachment-info strong,
body[data-wwcfam-page="mail"] .compose-attachment-info>span{
  max-width:100%!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}

/* Expanded preview is intentionally isolated from the Mail layout. */
body.compose-media-preview-open{overflow:hidden!important}
.compose-media-lightbox[hidden]{display:none!important}
.compose-media-lightbox{
  position:fixed;
  inset:0;
  z-index:2147483200;
  display:grid;
  place-items:center;
  padding:clamp(8px,2vw,20px);
  background:rgba(0,5,9,.88);
  backdrop-filter:blur(12px);
  box-sizing:border-box;
}
.compose-media-lightbox-dialog{
  width:min(1100px,100%);
  max-width:100%;
  height:min(860px,100%);
  max-height:100%;
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  overflow:hidden;
  border:1px solid rgba(86,255,170,.34);
  border-radius:18px;
  background:#03100b;
  box-shadow:0 24px 80px rgba(0,0,0,.55),0 0 34px rgba(56,255,150,.11);
}
.compose-media-lightbox-head,
.compose-media-lightbox-actions{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-width:0;
  padding:10px 12px;
  box-sizing:border-box;
  background:#061710;
}
.compose-media-lightbox-head{justify-content:space-between;border-bottom:1px solid rgba(86,255,170,.18)}
.compose-media-lightbox-head strong{min-width:0;overflow-wrap:anywhere;line-height:1.3}
.compose-media-lightbox-actions{justify-content:flex-end;flex-wrap:wrap;border-top:1px solid rgba(86,255,170,.18)}
.compose-media-lightbox-stage{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  overflow:auto;
  padding:10px;
  box-sizing:border-box;
  background:#010604;
}
.compose-media-lightbox-image,
.compose-media-lightbox-video{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
}
.compose-media-lightbox-video{width:100%;height:100%}
.compose-media-lightbox-audio,
.compose-media-lightbox-generic{
  width:min(680px,100%);
  min-width:0;
  display:grid;
  gap:14px;
  place-items:center;
  text-align:center;
  padding:24px;
  box-sizing:border-box;
  border:1px solid rgba(86,255,170,.18);
  border-radius:16px;
  background:#07140e;
}
.compose-media-lightbox-audio strong,
.compose-media-lightbox-generic strong{max-width:100%;overflow-wrap:anywhere}
.compose-media-lightbox-audio audio{width:100%;max-width:100%}
.compose-media-lightbox-document{
  width:100%;
  height:100%;
  min-height:320px;
  border:0;
  border-radius:10px;
  background:#fff;
}
@media(max-width:600px){
  .compose-media-lightbox{padding:0!important}
  .compose-media-lightbox-dialog{width:100%!important;height:100%!important;max-height:100%!important;border-radius:0!important;border-left:0!important;border-right:0!important}
  .compose-media-lightbox-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;padding-bottom:calc(10px + env(safe-area-inset-bottom))!important}
  .compose-media-lightbox-actions>*{width:100%!important}
  .compose-media-lightbox-stage{padding:6px!important}
  .compose-media-lightbox-document{min-height:55dvh}
}
@media(max-width:390px){
  .compose-media-lightbox-actions{grid-template-columns:minmax(0,1fr)!important}
}

/* ======================================================================
   WWCFAM MAIL 12.09.1 — MOBILE HOME / INBOX VISIBILITY FIX
   Keeps the Inbox visible under the two headers, restores the Mail dock,
   and makes the message reader an overlay only when a message is opened.
   ====================================================================== */
@media(max-width:760px){
  body[data-wwcfam-page="mail"].wwcfam-global-header-ready .app-shell{
    display:block!important;
    width:100%!important;
    max-width:100vw!important;
    min-width:0!important;
    min-height:calc(100dvh - var(--wwcfam-global-header-height,64px))!important;
    overflow:hidden!important;
  }

  body[data-wwcfam-page="mail"].wwcfam-global-header-ready .layout{
    display:block!important;
    position:relative!important;
    width:100%!important;
    max-width:100vw!important;
    min-width:0!important;
    height:calc(100dvh - var(--wwcfam-global-header-height,64px) - var(--header,56px) - var(--wwcfam-mail-mobile-dock,62px) - env(safe-area-inset-bottom))!important;
    min-height:260px!important;
    overflow:hidden!important;
  }

  body[data-wwcfam-page="mail"].wwcfam-global-header-ready .workspace{
    display:block!important;
    position:relative!important;
    width:100%!important;
    max-width:100vw!important;
    min-width:0!important;
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
    visibility:visible!important;
    opacity:1!important;
  }

  body[data-wwcfam-page="mail"].wwcfam-global-header-ready #view-inbox.view.active,
  body[data-wwcfam-page="mail"].wwcfam-global-header-ready .mail-view.active{
    display:block!important;
    position:relative!important;
    width:100%!important;
    max-width:100vw!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    overflow:hidden!important;
    visibility:visible!important;
    opacity:1!important;
  }

  body[data-wwcfam-page="mail"].wwcfam-global-header-ready .mail-list-pane{
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    max-width:100vw!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    overflow:hidden!important;
    visibility:visible!important;
    opacity:1!important;
    background:linear-gradient(180deg,rgba(2,10,6,.98),rgba(2,7,5,.99))!important;
  }

  body[data-wwcfam-page="mail"].wwcfam-global-header-ready .pane-toolbar{
    display:flex!important;
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    grid-row:1!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:58px!important;
    visibility:visible!important;
    opacity:1!important;
  }

  body[data-wwcfam-page="mail"].wwcfam-global-header-ready #mailList{
    display:block!important;
    grid-row:2!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:100%!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    visibility:visible!important;
    opacity:1!important;
    -webkit-overflow-scrolling:touch!important;
  }

  body[data-wwcfam-page="mail"].wwcfam-global-header-ready #mailEmpty.empty-card:not([hidden]){
    display:grid!important;
    grid-row:2!important;
    position:absolute!important;
    left:8px!important;
    right:8px!important;
    top:70px!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    z-index:3!important;
    visibility:visible!important;
    opacity:1!important;
  }

  /* On phones the reader must not occupy the Inbox column until opened. */
  body[data-wwcfam-page="mail"].wwcfam-global-header-ready .reader{
    position:fixed!important;
    top:calc(var(--wwcfam-global-header-height,64px) + var(--header,56px))!important;
    right:0!important;
    bottom:calc(var(--wwcfam-mail-mobile-dock,62px) + env(safe-area-inset-bottom))!important;
    left:0!important;
    width:100vw!important;
    max-width:100vw!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    transform:translateX(105%)!important;
    transition:transform .22s ease!important;
    z-index:92!important;
    background:#07100c!important;
    visibility:visible!important;
    opacity:1!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body[data-wwcfam-page="mail"].wwcfam-global-header-ready .reader.open{
    transform:translateX(0)!important;
  }

  /* Mail's own bottom navigation stays visible and clickable. */
  body[data-wwcfam-page="mail"].wwcfam-global-header-ready .mobile-dock{
    display:grid!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    max-width:100vw!important;
    z-index:110!important;
    visibility:visible!important;
    opacity:1!important;
  }

  /* The Mail drawer remains off-canvas until the hamburger is pressed. */
  body[data-wwcfam-page="mail"].wwcfam-global-header-ready .sidebar{
    top:calc(var(--wwcfam-global-header-height,64px) + var(--header,56px))!important;
    bottom:calc(var(--wwcfam-mail-mobile-dock,62px) + env(safe-area-inset-bottom))!important;
    height:auto!important;
    max-height:none!important;
    overflow-y:auto!important;
  }
}

/* ======================================================================
   WWCFAM MAIL 12.09.2 — NOTIFICATION CENTER PORTAL / CLIPPING FIX
   The notification drawer is mounted directly under <body> so the sticky
   Mail header/backdrop-filter/overflow rules can never clip or disable it.
   ====================================================================== */
body>.notification-panel[data-wwcfam-notification-portal="1"]{
  position:fixed!important;
  top:var(--wwcfam-notify-top,128px)!important;
  right:var(--wwcfam-notify-right,10px)!important;
  bottom:10px!important;
  left:auto!important;
  z-index:2147483600!important;
  display:flex!important;
  flex-direction:column!important;
  width:min(480px,calc(100vw - 20px))!important;
  max-width:480px!important;
  min-width:0!important;
  height:auto!important;
  max-height:none!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  pointer-events:auto!important;
  isolation:isolate!important;
  contain:layout paint!important;
  border:1px solid rgba(85,255,160,.48)!important;
  border-radius:20px!important;
  background:radial-gradient(circle at 10% 0,rgba(53,255,138,.16),transparent 38%),linear-gradient(160deg,#06170f,#020b07 72%)!important;
  box-shadow:0 28px 100px rgba(0,0,0,.86),0 0 45px rgba(53,255,138,.15)!important;
}
body>.notification-panel[data-wwcfam-notification-portal="1"][hidden]{display:none!important}
body>.notification-panel[data-wwcfam-notification-portal="1"] .notification-head{
  position:relative!important;
  inset:auto!important;
  flex:0 0 auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
  padding:11px!important;
  background:linear-gradient(135deg,rgba(10,58,33,.98),rgba(0,16,9,.98))!important;
}
body>.notification-panel[data-wwcfam-notification-portal="1"] .notification-head strong{
  min-width:0!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
body>.notification-panel[data-wwcfam-notification-portal="1"] .notification-head .secondary-btn{
  width:auto!important;
  max-width:170px!important;
  min-width:0!important;
  min-height:38px!important;
  height:auto!important;
  white-space:normal!important;
  line-height:1.15!important;
}
body>.notification-panel[data-wwcfam-notification-portal="1"] .notification-list{
  flex:1 1 auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
  padding:8px!important;
  gap:8px!important;
}
body>.notification-panel[data-wwcfam-notification-portal="1"] .notification-smart-summary{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  padding:10px!important;
  overflow:hidden!important;
}
body>.notification-panel[data-wwcfam-notification-portal="1"] .notification-smart-summary>div{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-start!important;
  gap:5px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
body>.notification-panel[data-wwcfam-notification-portal="1"] .notification-smart-summary>div:first-child{
  display:grid!important;
  gap:3px!important;
}
body>.notification-panel[data-wwcfam-notification-portal="1"] .notification-summary-chip{
  display:inline-flex!important;
  flex:0 1 auto!important;
  align-items:center!important;
  min-width:0!important;
  min-height:24px!important;
  padding:3px 8px!important;
  border-radius:999px!important;
  border:1px solid rgba(85,255,160,.2)!important;
  background:#03190f!important;
  color:#caffdf!important;
  font-size:.68rem!important;
  font-weight:900!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
body>.notification-panel[data-wwcfam-notification-portal="1"] .notification-item.smart-notification{
  flex:0 0 auto!important;
  display:grid!important;
  grid-template-columns:40px minmax(0,1fr) 34px!important;
  grid-template-rows:auto!important;
  align-items:start!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  padding:9px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
body>.notification-panel[data-wwcfam-notification-portal="1"] .notification-person{
  grid-column:1!important;
  grid-row:1!important;
  width:38px!important;
  min-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  max-width:38px!important;
  overflow:hidden!important;
}
body>.notification-panel[data-wwcfam-notification-portal="1"] .notification-main{
  grid-column:2!important;
  grid-row:1!important;
  display:flex!important;
  flex-direction:column!important;
  gap:5px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:visible!important;
}
body>.notification-panel[data-wwcfam-notification-portal="1"] .notification-open{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:5px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  text-align:left!important;
  white-space:normal!important;
  overflow:visible!important;
  cursor:pointer!important;
}
body>.notification-panel[data-wwcfam-notification-portal="1"] .notification-open strong,
body>.notification-panel[data-wwcfam-notification-portal="1"] .notification-open small,
body>.notification-panel[data-wwcfam-notification-portal="1"] .notification-actor-link{
  display:block!important;
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}
body>.notification-panel[data-wwcfam-notification-portal="1"] .notification-meta-row,
body>.notification-panel[data-wwcfam-notification-portal="1"] .notification-actor-row{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:5px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
body>.notification-panel[data-wwcfam-notification-portal="1"] .notification-actor-link{flex:1 1 120px!important}
body>.notification-panel[data-wwcfam-notification-portal="1"] .notification-profile-actions{
  flex:0 0 30px!important;
  width:30px!important;
  min-width:30px!important;
  height:30px!important;
  min-height:30px!important;
  padding:0!important;
}
body>.notification-panel[data-wwcfam-notification-portal="1"] .notification-dismiss{
  grid-column:3!important;
  grid-row:1!important;
  width:32px!important;
  min-width:32px!important;
  max-width:32px!important;
  height:32px!important;
  min-height:32px!important;
  padding:0!important;
}
body>.notification-panel[data-wwcfam-notification-portal="1"] .notification-media-preview{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  max-height:220px!important;
  object-fit:cover!important;
  border-radius:12px!important;
}
body>.notification-panel[data-wwcfam-notification-portal="1"] .notification-loading,
body>.notification-panel[data-wwcfam-notification-portal="1"] .notification-empty{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  padding:18px 12px!important;
  overflow-wrap:anywhere!important;
}
body>.notification-panel[data-wwcfam-notification-portal="1"] .notification-error-state{
  display:grid!important;
  gap:9px!important;
  justify-items:start!important;
  text-align:left!important;
}

@media(max-width:520px){
  body>.notification-panel[data-wwcfam-notification-portal="1"]{
    top:var(--wwcfam-notify-top,124px)!important;
    right:6px!important;
    bottom:calc(var(--wwcfam-mail-mobile-dock,62px) + env(safe-area-inset-bottom) + 5px)!important;
    left:6px!important;
    width:auto!important;
    max-width:none!important;
    border-radius:15px!important;
  }
  body>.notification-panel[data-wwcfam-notification-portal="1"] .notification-head{
    grid-template-columns:minmax(0,1fr)!important;
    align-items:stretch!important;
  }
  body>.notification-panel[data-wwcfam-notification-portal="1"] .notification-head .secondary-btn{
    width:100%!important;
    max-width:none!important;
  }
  body>.notification-panel[data-wwcfam-notification-portal="1"] .notification-item.smart-notification{
    grid-template-columns:34px minmax(0,1fr) 30px!important;
    gap:7px!important;
    padding:8px!important;
  }
  body>.notification-panel[data-wwcfam-notification-portal="1"] .notification-person{
    width:34px!important;
    min-width:34px!important;
    max-width:34px!important;
    height:34px!important;
    min-height:34px!important;
  }
  body>.notification-panel[data-wwcfam-notification-portal="1"] .notification-dismiss{
    width:30px!important;
    min-width:30px!important;
    max-width:30px!important;
    height:30px!important;
    min-height:30px!important;
  }
}

/* ======================================================================
   WWCFAM Mail 12.09.3 — People / Friends / Family view repair
   The Inbox uses a fixed contained app workspace. People is a long content
   screen, so it must own its vertical scroll instead of inheriting the
   Inbox-only overflow lock. This is intentionally scoped to #view-people.
   ====================================================================== */
body[data-wwcfam-page="mail"].wwcfam-global-header-ready #view-people.view.active{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-y:contain!important;
  scrollbar-gutter:stable!important;
}
body[data-wwcfam-page="mail"].wwcfam-global-header-ready #view-people>.social-page{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;
  margin:0!important;
  overflow:visible!important;
}
body[data-wwcfam-page="mail"] #view-people .page-head,
body[data-wwcfam-page="mail"] #view-people .social-summary,
body[data-wwcfam-page="mail"] #view-people .people-tabs,
body[data-wwcfam-page="mail"] #view-people .people-grid,
body[data-wwcfam-page="mail"] #view-people .person-card,
body[data-wwcfam-page="mail"] #view-people .person-profile-open,
body[data-wwcfam-page="mail"] #view-people .person-identity,
body[data-wwcfam-page="mail"] #view-people .person-actions{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
body[data-wwcfam-page="mail"] #view-people .page-head{
  width:100%!important;
}
body[data-wwcfam-page="mail"] #view-people .page-head>div{
  min-width:0!important;
  max-width:100%!important;
}
body[data-wwcfam-page="mail"] #view-people .page-head h1,
body[data-wwcfam-page="mail"] #view-people .page-head p,
body[data-wwcfam-page="mail"] #view-people .person-identity strong,
body[data-wwcfam-page="mail"] #view-people .person-identity small,
body[data-wwcfam-page="mail"] #view-people .person-status,
body[data-wwcfam-page="mail"] #view-people .mutual-friends,
body[data-wwcfam-page="mail"] #view-people .family-request-note{
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
body[data-wwcfam-page="mail"] #view-people #peopleSearchInput{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:46px!important;
}
body[data-wwcfam-page="mail"] #view-people .social-summary,
body[data-wwcfam-page="mail"] #view-people .people-tabs{
  width:100%!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-inline:contain!important;
  scrollbar-width:thin!important;
}
body[data-wwcfam-page="mail"] #view-people .social-summary{
  grid-template-columns:repeat(7,minmax(105px,1fr))!important;
}
body[data-wwcfam-page="mail"] #view-people .social-summary button,
body[data-wwcfam-page="mail"] #view-people .people-tabs .pill{
  min-width:0!important;
  max-width:none!important;
}
body[data-wwcfam-page="mail"] #view-people .people-tabs .pill{
  flex:0 0 auto!important;
  white-space:nowrap!important;
}
body[data-wwcfam-page="mail"] #view-people .people-grid{
  width:100%!important;
  align-items:start!important;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))!important;
}
body[data-wwcfam-page="mail"] #view-people .people-grid>.empty-card{
  grid-column:1/-1!important;
  width:min(620px,100%)!important;
}
body[data-wwcfam-page="mail"] #view-people .person-card{
  width:100%!important;
  overflow:hidden!important;
}
body[data-wwcfam-page="mail"] #view-people .person-profile-open{
  display:grid!important;
  grid-template-columns:54px minmax(0,1fr)!important;
  width:100%!important;
  text-decoration:none!important;
}
body[data-wwcfam-page="mail"] #view-people .person-avatar{
  width:54px!important;
  min-width:54px!important;
  max-width:54px!important;
  height:54px!important;
  min-height:54px!important;
  overflow:hidden!important;
}
body[data-wwcfam-page="mail"] #view-people .person-avatar img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
body[data-wwcfam-page="mail"] #view-people .person-stats{
  width:100%!important;
  min-width:0!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
body[data-wwcfam-page="mail"] #view-people .person-stats span{
  min-width:0!important;
  overflow:hidden!important;
}
body[data-wwcfam-page="mail"] #view-people .person-actions{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;
}
body[data-wwcfam-page="mail"] #view-people .person-actions>*{
  min-width:0!important;
  max-width:100%!important;
}
body[data-wwcfam-page="mail"] #view-people .person-actions button,
body[data-wwcfam-page="mail"] #view-people .inline-privacy{
  width:100%!important;
  height:auto!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
body[data-wwcfam-page="mail"] #view-people .inline-privacy{
  display:grid!important;
  gap:6px!important;
  align-content:start!important;
}
body[data-wwcfam-page="mail"] #view-people .inline-privacy select{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
body[data-wwcfam-page="mail"] #view-people .family-request-note,
body[data-wwcfam-page="mail"] #view-people .family-relation-badge{
  grid-column:1/-1!important;
}

@media(max-width:760px){
  body[data-wwcfam-page="mail"].wwcfam-global-header-ready #view-people.view.active{
    height:100%!important;
    max-height:100%!important;
    padding:0!important;
  }
  body[data-wwcfam-page="mail"].wwcfam-global-header-ready #view-people>.social-page{
    min-height:100%!important;
    padding:12px 10px calc(28px + env(safe-area-inset-bottom))!important;
  }
  body[data-wwcfam-page="mail"] #view-people .page-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-items:stretch!important;
    gap:10px!important;
  }
  body[data-wwcfam-page="mail"] #view-people .page-head #editMyProfileBtn{
    width:100%!important;
  }
  body[data-wwcfam-page="mail"] #view-people .social-summary{
    grid-template-columns:repeat(7,94px)!important;
    gap:7px!important;
    padding-bottom:7px!important;
  }
  body[data-wwcfam-page="mail"] #view-people .people-tabs{
    gap:7px!important;
    padding-bottom:9px!important;
  }
  body[data-wwcfam-page="mail"] #view-people .people-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
  }
  body[data-wwcfam-page="mail"] #view-people .person-card{
    padding:12px!important;
    border-radius:18px!important;
  }
  body[data-wwcfam-page="mail"] #view-people .person-actions{
    grid-template-columns:minmax(0,1fr)!important;
  }
  body[data-wwcfam-page="mail"] #view-people .person-actions button,
  body[data-wwcfam-page="mail"] #view-people .inline-privacy{
    grid-column:1/-1!important;
  }
}

@media(max-width:390px){
  body[data-wwcfam-page="mail"] #view-people .person-profile-open{
    grid-template-columns:46px minmax(0,1fr)!important;
    gap:9px!important;
  }
  body[data-wwcfam-page="mail"] #view-people .person-avatar{
    width:46px!important;
    min-width:46px!important;
    max-width:46px!important;
    height:46px!important;
    min-height:46px!important;
  }
  body[data-wwcfam-page="mail"] #view-people .person-stats{
    gap:4px!important;
  }
}


/* ======================================================================
   WWCFAM Mail 12.09.4 — stable People / Friends / Family page
   Keeps #people independent from the Inbox reader/list containment rules.
   The body already carries data-wwcfam-page="mail", so these rules work
   immediately instead of waiting for the shared header JavaScript.
   ====================================================================== */
body[data-wwcfam-page="mail"][data-mail-view="people"] .workspace{
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
}
body[data-wwcfam-page="mail"] #view-people.view.active{
  display:block!important;
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:auto!important;
  min-height:calc(100dvh - var(--header,56px))!important;
  max-height:none!important;
  overflow:visible!important;
  visibility:visible!important;
  opacity:1!important;
}
body[data-wwcfam-page="mail"].wwcfam-global-header-ready #view-people.view.active{
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior-y:contain!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-gutter:stable both-edges!important;
}
body[data-wwcfam-page="mail"] #view-people>.social-page{
  display:block!important;
  width:min(1500px,100%)!important;
  min-width:0!important;
  max-width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0 auto!important;
  padding:clamp(16px,2vw,28px)!important;
  padding-bottom:clamp(44px,6vw,84px)!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
body[data-wwcfam-page="mail"] #view-people .page-head{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:start!important;
  gap:14px!important;
  width:100%!important;
  min-width:0!important;
}
body[data-wwcfam-page="mail"] #view-people .page-head>div,
body[data-wwcfam-page="mail"] #view-people .page-head h1,
body[data-wwcfam-page="mail"] #view-people .page-head p{
  min-width:0!important;
  max-width:100%!important;
}
body[data-wwcfam-page="mail"] #view-people #editMyProfileBtn{
  width:auto!important;
  min-width:150px!important;
  max-width:100%!important;
}
body[data-wwcfam-page="mail"] #view-people .social-summary{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(118px,1fr))!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:visible!important;
  margin:0 0 14px!important;
}
body[data-wwcfam-page="mail"] #view-people .social-summary button{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:72px!important;
  overflow:hidden!important;
}
body[data-wwcfam-page="mail"] #view-people .social-summary span,
body[data-wwcfam-page="mail"] #view-people .social-summary strong{
  min-width:0!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
body[data-wwcfam-page="mail"] #view-people #peopleSearchInput{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0 0 12px!important;
  box-sizing:border-box!important;
}
body[data-wwcfam-page="mail"] #view-people .people-tabs{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:visible!important;
  padding:0 0 12px!important;
}
body[data-wwcfam-page="mail"] #view-people .people-tabs .pill{
  flex:0 0 auto!important;
  min-width:0!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
body[data-wwcfam-page="mail"] #view-people .people-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))!important;
  align-items:start!important;
  gap:12px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:visible!important;
}
body[data-wwcfam-page="mail"] #view-people .people-grid>.empty-card{
  grid-column:1/-1!important;
  width:min(680px,100%)!important;
  max-width:100%!important;
  margin:20px auto!important;
}
body[data-wwcfam-page="mail"] #view-people .people-error{
  display:grid!important;
  gap:8px!important;
  justify-items:center!important;
}
body[data-wwcfam-page="mail"] #view-people .people-error>*{
  max-width:100%!important;
  overflow-wrap:anywhere!important;
}
body[data-wwcfam-page="mail"] #view-people .person-card{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:auto!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
body[data-wwcfam-page="mail"] #view-people .person-profile-open{
  display:grid!important;
  grid-template-columns:54px minmax(0,1fr)!important;
  gap:12px!important;
  align-items:center!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
}
body[data-wwcfam-page="mail"] #view-people .person-identity,
body[data-wwcfam-page="mail"] #view-people .person-identity>*{
  min-width:0!important;
  max-width:100%!important;
}
body[data-wwcfam-page="mail"] #view-people .person-identity strong,
body[data-wwcfam-page="mail"] #view-people .person-identity small,
body[data-wwcfam-page="mail"] #view-people .person-status,
body[data-wwcfam-page="mail"] #view-people .mutual-friends,
body[data-wwcfam-page="mail"] #view-people .family-request-note{
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}
body[data-wwcfam-page="mail"] #view-people .person-stats{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:6px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
body[data-wwcfam-page="mail"] #view-people .person-stats span{
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
}
body[data-wwcfam-page="mail"] #view-people .person-actions{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
body[data-wwcfam-page="mail"] #view-people .person-actions>*,
body[data-wwcfam-page="mail"] #view-people .person-actions button,
body[data-wwcfam-page="mail"] #view-people .inline-privacy{
  min-width:0!important;
  max-width:100%!important;
  width:100%!important;
  height:auto!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  box-sizing:border-box!important;
}
body[data-wwcfam-page="mail"] #view-people .inline-privacy{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:6px!important;
  align-content:start!important;
}
body[data-wwcfam-page="mail"] #view-people .inline-privacy select{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
body[data-wwcfam-page="mail"] #view-people .family-request-note,
body[data-wwcfam-page="mail"] #view-people .family-relation-badge{
  grid-column:1/-1!important;
}

@media(max-width:760px){
  body[data-wwcfam-page="mail"].wwcfam-global-header-ready #view-people.view.active{
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:0!important;
  }
  body[data-wwcfam-page="mail"] #view-people>.social-page{
    width:100%!important;
    margin:0!important;
    padding:12px 10px calc(24px + env(safe-area-inset-bottom))!important;
  }
  body[data-wwcfam-page="mail"] #view-people .page-head{
    grid-template-columns:minmax(0,1fr)!important;
    align-items:stretch!important;
    gap:10px!important;
  }
  body[data-wwcfam-page="mail"] #view-people #editMyProfileBtn{
    width:100%!important;
    min-width:0!important;
  }
  body[data-wwcfam-page="mail"] #view-people .social-summary{
    display:grid!important;
    grid-template-columns:repeat(7,94px)!important;
    gap:7px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:0 0 7px!important;
    scrollbar-width:thin!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body[data-wwcfam-page="mail"] #view-people .social-summary button{
    min-height:66px!important;
  }
  body[data-wwcfam-page="mail"] #view-people .people-tabs{
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:0 0 9px!important;
    scrollbar-width:thin!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body[data-wwcfam-page="mail"] #view-people .people-tabs .pill{
    flex:0 0 auto!important;
    max-width:none!important;
    white-space:nowrap!important;
  }
  body[data-wwcfam-page="mail"] #view-people .people-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
  }
  body[data-wwcfam-page="mail"] #view-people .person-card{
    padding:12px!important;
    border-radius:18px!important;
  }
  body[data-wwcfam-page="mail"] #view-people .person-actions{
    grid-template-columns:minmax(0,1fr)!important;
  }
  body[data-wwcfam-page="mail"] #view-people .person-actions>*{
    grid-column:1/-1!important;
  }
}

@media(max-width:390px){
  body[data-wwcfam-page="mail"] #view-people .person-profile-open{
    grid-template-columns:46px minmax(0,1fr)!important;
    gap:9px!important;
  }
  body[data-wwcfam-page="mail"] #view-people .person-avatar{
    width:46px!important;
    min-width:46px!important;
    max-width:46px!important;
    height:46px!important;
    min-height:46px!important;
  }
}


/* ======================================================================
   WWCFAM Mail 12.09.9 — VERIFIED MOBILE TOOLBAR FLOW + PEOPLE INTRO FIX

   Root cause (verified in Chromium): on mobile .app-shell is overflow:hidden,
   which makes Mail's sticky .topbar use the app shell as its sticky scroll
   container. The global-header rule top:64px then shifts the toolbar DOWN an
   extra 64px while its original 56px layout slot stays behind. #view-people
   begins in that original slot, so only the People badge/title are covered.

   Keep the mobile Mail toolbar in normal document flow. The Mail workspace is
   already a contained viewport with its own scroll surfaces, so the toolbar
   does not need sticky positioning on phones.
   ====================================================================== */
@media (max-width:760px){
  html body[data-wwcfam-page="mail"].wwcfam-global-header-ready .app-shell > .topbar{
    position:relative!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    inset:auto!important;
    transform:none!important;
  }

  /* People now starts naturally below the toolbar. No fake 84px spacer,
     transform, window scrolling, or async scroll-reset logic is required. */
  html body[data-wwcfam-page="mail"] #view-people.view.active{
    scroll-padding-top:0!important;
    overflow-anchor:auto!important;
  }
  html body[data-wwcfam-page="mail"] #view-people > .social-page{
    padding-top:12px!important;
    margin-top:0!important;
    transform:none!important;
  }
  html body[data-wwcfam-page="mail"] #view-people .page-head{
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    margin-top:0!important;
    transform:none!important;
    visibility:visible!important;
    opacity:1!important;
  }
}

/* ======================================================================
   WWCFAM Mail 12.09.9 — NOTIFICATION PORTAL POSITION / CONTAINMENT FIX

   The notification panel is portaled to <body>. global-header.css loads after
   Mail CSS and has a more specific fixed top/right rule, which can override
   the bell-based coordinates. Use a deliberately higher-specificity selector
   so the panel always opens BELOW the real bell, not over the Mail toolbar.
   ====================================================================== */
html body[data-wwcfam-page="mail"].wwcfam-global-header-ready > .notification-panel[data-wwcfam-notification-portal="1"]{
  position:fixed!important;
  top:var(--wwcfam-notify-top,calc(var(--wwcfam-global-header-height,72px) + var(--header,56px) + 8px))!important;
  right:var(--wwcfam-notify-right,10px)!important;
  bottom:auto!important;
  left:auto!important;
  width:min(440px,calc(100vw - 20px))!important;
  max-width:440px!important;
  height:auto!important;
  max-height:var(--wwcfam-notify-max-height,min(640px,calc(100dvh - 150px)))!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
html body[data-wwcfam-page="mail"].wwcfam-global-header-ready > .notification-panel[data-wwcfam-notification-portal="1"] .notification-list{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
}

@media (max-width:520px){
  html body[data-wwcfam-page="mail"].wwcfam-global-header-ready > .notification-panel[data-wwcfam-notification-portal="1"]{
    top:var(--wwcfam-notify-top,calc(var(--wwcfam-global-header-height,64px) + var(--header,56px) + 8px))!important;
    right:6px!important;
    left:6px!important;
    bottom:auto!important;
    width:auto!important;
    max-width:none!important;
    max-height:var(--wwcfam-notify-max-height,calc(100dvh - 200px))!important;
    border-radius:15px!important;
  }
}

/* ======================================================================
   WWCFAM Mail v12.09.10 — notification top-content stability
   The notification list is a flex column. The summary was the only top
   child still allowed to flex-shrink, so a full notification list could
   compress that summary down to a clipped strip. The list should scroll;
   its top summary and rows should never shrink.
   ====================================================================== */
html body[data-wwcfam-page="mail"].wwcfam-global-header-ready > .notification-panel[data-wwcfam-notification-portal="1"] .notification-list > .notification-smart-summary,
html body[data-wwcfam-page="mail"].wwcfam-global-header-ready > .notification-panel[data-wwcfam-notification-portal="1"] .notification-list > .notification-item,
html body[data-wwcfam-page="mail"].wwcfam-global-header-ready > .notification-panel[data-wwcfam-notification-portal="1"] .notification-list > .notification-loading,
html body[data-wwcfam-page="mail"].wwcfam-global-header-ready > .notification-panel[data-wwcfam-notification-portal="1"] .notification-list > .notification-empty{
  flex:0 0 auto!important;
}
html body[data-wwcfam-page="mail"].wwcfam-global-header-ready > .notification-panel[data-wwcfam-notification-portal="1"] .notification-smart-summary{
  height:auto!important;
  max-height:none!important;
}


/* ======================================================================
   WWCFAM Mail 12.09.11 — ONLY People mobile top + notification top repair
   Scope is intentionally limited to #view-people and the body-level
   notification portal. No other Create/Mail view styling is changed.
   ====================================================================== */

/* PEOPLE: the People view is the real vertical scroller on mobile. Disable
   browser scroll anchoring here so async summary/card content cannot move the
   intro above the viewport, and keep the intro as normal first-flow content. */
@media (max-width:760px){
  html body[data-wwcfam-page="mail"] #view-people.view.active,
  html body[data-wwcfam-page="mail"] #view-people.view.active > .social-page{
    overflow-anchor:none!important;
  }
  html body[data-wwcfam-page="mail"] #view-people.view.active{
    scroll-padding-top:0!important;
  }
  html body[data-wwcfam-page="mail"] #view-people.view.active > .social-page{
    padding-top:12px!important;
    margin-top:0!important;
    transform:none!important;
  }
  html body[data-wwcfam-page="mail"] #view-people.view.active .page-head{
    position:relative!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    inset:auto!important;
    margin-top:0!important;
    transform:none!important;
    flex:0 0 auto!important;
    visibility:visible!important;
    opacity:1!important;
  }
}

/* NOTIFICATIONS: give the portal an explicit two-row layout. The header never
   participates in shrinking; only the list scrolls. Opening code separately
   resets the list to scrollTop=0 after async notification HTML is rendered. */
html body[data-wwcfam-page="mail"] > .notification-panel[data-wwcfam-notification-portal="1"]{
  display:grid!important;
  grid-template-rows:max-content minmax(0,1fr)!important;
  height:var(--wwcfam-notify-max-height,min(640px,calc(100dvh - 150px)))!important;
  max-height:var(--wwcfam-notify-max-height,min(640px,calc(100dvh - 150px)))!important;
  min-height:180px!important;
  overflow:hidden!important;
}
html body[data-wwcfam-page="mail"] > .notification-panel[data-wwcfam-notification-portal="1"] .notification-head{
  position:relative!important;
  top:auto!important;
  flex:none!important;
  min-height:max-content!important;
  overflow:visible!important;
}
html body[data-wwcfam-page="mail"] > .notification-panel[data-wwcfam-notification-portal="1"] .notification-list{
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overflow-anchor:none!important;
  scroll-behavior:auto!important;
}
html body[data-wwcfam-page="mail"] > .notification-panel[data-wwcfam-notification-portal="1"] .notification-smart-summary,
html body[data-wwcfam-page="mail"] > .notification-panel[data-wwcfam-notification-portal="1"] .notification-item.smart-notification{
  flex:0 0 auto!important;
  height:auto!important;
  min-height:max-content!important;
  max-height:none!important;
}
html body[data-wwcfam-page="mail"] > .notification-panel[data-wwcfam-notification-portal="1"] .notification-smart-summary{
  overflow:visible!important;
}

@media (max-width:520px){
  html body[data-wwcfam-page="mail"] > .notification-panel[data-wwcfam-notification-portal="1"]{
    height:var(--wwcfam-notify-max-height,calc(100dvh - 200px))!important;
    max-height:var(--wwcfam-notify-max-height,calc(100dvh - 200px))!important;
  }
}

/* ======================================================================
   WWCFAM Mail 12.09.12 — notification bell close-toggle fix
   A later, higher-specificity portal layout rule sets display:grid!important.
   That rule was overriding the earlier [hidden]{display:none!important}, so
   JavaScript correctly set panel.hidden=true but the drawer stayed visible.
   Keep this rule AFTER all portal layout rules so hidden always wins.
   ====================================================================== */
html body[data-wwcfam-page="mail"] > .notification-panel[data-wwcfam-notification-portal="1"][hidden],
html body[data-wwcfam-page="mail"].wwcfam-global-header-ready > .notification-panel[data-wwcfam-notification-portal="1"][hidden]{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* ======================================================================
   WWCFAM Mail 12.09.13 — UNIVERSAL NO-CUTOFF VIEWPORT ARCHITECTURE
   2026-09-16

   Systemic repair for Sent / Drive / Inbox / People / Contacts / Feed /
   Communities / Security / Settings / Calendar / Organizer / Recordings.

   One element owns the viewport: authenticated <body>. The real global
   header and Mail toolbar stay in normal flow; .app-shell receives the
   remaining height. Views that are page-like scroll themselves. Split-pane
   views keep only their intended inner panes scrollable.
   ====================================================================== */

html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"]{
  width:100%!important;
  height:100vh!important;
  height:100dvh!important;
  min-height:100vh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}

/* Real flow children consume only their real rendered height. */
html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"] > #wwcfam-global-header,
html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"] > .admin-impersonation-banner{
  flex:0 0 auto!important;
}

/* The application fills whatever height is actually left. */
html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"] > .app-shell{
  flex:1 1 auto!important;
  display:grid!important;
  grid-template-rows:max-content minmax(0,1fr)!important;
  width:100%!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:none!important;
  overflow:hidden!important;
}

/* Mail toolbar remains in normal flow. Never offset it by an assumed
   global-header height. */
html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"] .app-shell > .topbar{
  position:relative!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  inset:auto!important;
  transform:none!important;
  width:100%!important;
  height:var(--header,56px)!important;
  min-height:var(--header,56px)!important;
  max-height:none!important;
  flex:none!important;
}

/* No viewport subtraction here. The app-shell grid already knows exactly how
   much room is left below the real headers. */
html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"] .app-shell > .layout{
  position:relative!important;
  width:100%!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:none!important;
  overflow:hidden!important;
}

html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"] .workspace{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:none!important;
  padding-bottom:0!important;
  overflow:hidden!important;
}

/* Desktop/tablet sidebar fills the real layout row and owns its own vertical
   scroll. This replaces sticky + 100dvh/header arithmetic. */
@media (min-width:761px){
  html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"] .sidebar{
    position:relative!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    inset:auto!important;
    width:auto!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
}

/* ----------------------------------------------------------------------
   NORMAL PAGE VIEWS
   Drive, Contacts, Feed, People, Communities, Security, Settings,
   Productivity, Organizer, Recordings, Account, Admin, etc. can naturally
   grow taller than one screen. The active view is their scroll container.
   ---------------------------------------------------------------------- */
html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"]
  .workspace > .view.active:not(#view-inbox):not(#view-sent){
  position:relative!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:contain!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-gutter:stable!important;
}

html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"]
  .workspace > .view.active:not(#view-inbox):not(#view-sent) > .page{
  width:100%!important;
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;
  overflow:visible!important;
}

/* Drive must never clip file rows/cards/buttons at the workspace boundary. */
html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"] #view-drive.view.active{
  overflow-x:hidden!important;
  overflow-y:auto!important;
}
html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"] #view-drive .file-grid{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}
html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"] #view-drive .file-card{
  min-height:0!important;
}

/* ----------------------------------------------------------------------
   SENT
   Remove the independent calc(100dvh - 240px) ceiling. Sent's page gets the
   exact workspace height, while the message list and reader independently
   scroll inside the remaining row.
   ---------------------------------------------------------------------- */
html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"] #view-sent.view.active{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:none!important;
  overflow:hidden!important;
}

html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"] #view-sent > .sent-page{
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:none!important;
  overflow:hidden!important;
}

html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"] #view-sent .page-head,
html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"] #view-sent .mail-tool-row,
html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"] #view-sent .contact-filter-row{
  flex:0 0 auto!important;
}

html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"] #view-sent .sent-layout{
  position:relative!important;
  flex:1 1 auto!important;
  width:100%!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:none!important;
  overflow:hidden!important;
}

html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"] #view-sent .sent-list,
html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"] #view-sent .sent-reader{
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:contain!important;
  -webkit-overflow-scrolling:touch!important;
}

/* ----------------------------------------------------------------------
   INBOX
   Preserve the intentional two-scroller mail client model without any
   viewport-based header subtraction.
   ---------------------------------------------------------------------- */
html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"] #view-inbox.mail-view.active{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:none!important;
  overflow:hidden!important;
  align-items:stretch!important;
}

html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"] #view-inbox .mail-list-pane{
  position:relative!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
}

html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"] #view-inbox #mailList{
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
}

html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"] #view-inbox .reader{
  position:relative!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  inset:auto!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
}

/* Tablet readers are contained by the application workspace instead of the
   browser viewport. Existing open/closed transforms are preserved. */
@media (max-width:1050px){
  html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"] #view-inbox.mail-view.active{
    display:block!important;
  }
  html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"] #view-inbox .reader{
    position:absolute!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:none!important;
    z-index:55!important;
  }
}

@media (max-width:980px){
  html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"] #view-sent .sent-layout{
    grid-template-columns:minmax(0,1fr)!important;
  }
  html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"] #view-sent .sent-reader{
    position:absolute!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:none!important;
    z-index:90!important;
  }
}

/* ----------------------------------------------------------------------
   MOBILE
   Reserve the fixed Mail dock once at app-shell level. Everything else uses
   the app's real remaining box. Sidebar/readers are absolute inside that box.
   ---------------------------------------------------------------------- */
@media (max-width:760px){
  html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"] > .app-shell{
    display:grid!important;
    grid-template-rows:max-content minmax(0,1fr)!important;
    min-height:0!important;
    padding-bottom:calc(var(--wwcfam-mail-mobile-dock,62px) + env(safe-area-inset-bottom))!important;
  }

  html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"] .app-shell > .layout{
    display:block!important;
    position:relative!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
  }

  html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"] .workspace{
    height:100%!important;
    min-height:0!important;
    padding-bottom:0!important;
  }

  html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"] .sidebar{
    position:absolute!important;
    top:0!important;
    right:auto!important;
    bottom:0!important;
    left:0!important;
    inset:0 auto 0 0!important;
    width:min(320px,88vw)!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }

  /* Search belongs to the Mail toolbar, not to a guessed viewport Y value. */
  html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"] .topbar .top-search{
    position:absolute!important;
    top:calc(100% + 6px)!important;
    right:8px!important;
    bottom:auto!important;
    left:8px!important;
    width:auto!important;
    max-width:none!important;
  }

  html body[data-wwcfam-page="mail"][data-auth="1"][data-pending="0"]
    .workspace > .view.active:not(#view-inbox):not(#view-sent){
    height:100%!important;
    min-height:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }
}