/* UMWE Control Center v9 — page rhythm + professional desktop messaging */
@media(min-width:901px){
  /* Consistent breathing room between the UMWE context line and page content. */
  .page .brand-footer-line{
    display:flex!important;
    align-items:center!important;
    margin:26px 0 16px!important;
    padding:0!important;
    min-height:18px!important;
    line-height:18px!important;
  }
  .page .brand-footer-line + .panel,
  .page .brand-footer-line + .table-wrap,
  .page .brand-footer-line + .access-list,
  .page .brand-footer-line + [class*='panel'],
  .page .brand-footer-line + [class*='list']{margin-top:0!important}

  /* Keep the application header above Messages so bell/profile popovers are usable. */
  .topbar{z-index:120!important}
  .topbar .popover,.topbar .profile-menu,.topbar .notifications,.popover.notifications{z-index:180!important}
  .umwe-messages-layer{
    z-index:45!important;
    padding:0!important;
    overflow:hidden!important;
  }

  /* Messages uses the full workspace beneath the top bar — no phantom top spacer. */
  .umwe-messages{
    height:100%!important;
    padding:18px 28px 22px!important;
    overflow:hidden!important;
  }
  .msg-page-head{
    display:flex!important;
    justify-content:flex-start!important;
    align-items:flex-start!important;
    min-height:0!important;
    margin:0 0 12px!important;
  }
  .msg-page-head>div{margin:0!important;text-align:left!important}
  .msg-page-head h1{font-size:28px!important;line-height:1.05!important;margin:0!important}
  .msg-page-head p{margin:5px 0 0!important}
  .msg-home-back{display:none!important}

  .msg-shell{
    flex:1 1 auto!important;
    height:auto!important;
    min-height:0!important;
    grid-template-columns:minmax(260px,300px) minmax(520px,1fr) minmax(210px,240px)!important;
    border-radius:16px!important;
    overflow:hidden!important;
  }
  .msg-list,.msg-chat,.msg-details{height:100%!important;min-height:0!important}
  .msg-chat{overflow:hidden!important}
  .msg-chat-head{height:68px!important;flex:0 0 68px!important;padding:0 20px!important}
  .msg-thread{
    flex:1 1 auto!important;
    min-height:0!important;
    padding:22px 24px 28px!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }
  .msg-bubble-row{margin:10px 0!important}
  .msg-message-stack{max-width:74%!important}
  .msg-bubble{
    width:fit-content!important;
    min-width:48px!important;
    max-width:100%!important;
    padding:10px 14px!important;
    border-radius:18px 18px 18px 6px!important;
    font-size:13px!important;
    line-height:1.4!important;
    box-sizing:border-box!important;
  }
  .msg-bubble-row.mine .msg-bubble{border-radius:18px 18px 6px 18px!important}
  .msg-time{margin:5px 7px 0!important;font-size:8.5px!important}
  .msg-compose{padding:12px 14px!important;gap:10px!important}
  .msg-compose input{min-height:44px!important;padding:10px 16px!important;font-size:14px!important}
  .msg-send{width:44px!important;height:44px!important;align-self:center!important}
  .msg-details{padding:18px 16px!important}

  /* Notification/profile dropdowns must render above the messaging workspace. */
  body.messages-open .topbar{position:fixed!important;z-index:160!important}
  body.messages-open .profile-menu,
  body.messages-open .popover,
  body.messages-open .notifications{z-index:220!important}
}

@media(min-width:901px) and (max-width:1180px){
  .msg-shell{grid-template-columns:260px minmax(420px,1fr)!important}
  .msg-details{display:none!important}
}