/* ======================================================================
   MichiganChat authoritative phone application shell — 2026-09-06
   Desktop/tablet layout remains controlled by chat-center.css.
   At <=760px the center workspace fills the phone and the permanent
   directory / control panel become off-canvas drawers.
   ====================================================================== */

.mc-mobile-app-actions,
.mc-mobile-drawer-backdrop{display:none}

@media (max-width:760px){
  html{width:100%;height:100%;overflow:hidden}
  body.mc-chat-app-page{
    width:100%;height:100dvh;min-height:100dvh;margin:0;overflow:hidden;
    background:#07131d;
  }

  /* Compact application header: brand + Directory + Menu. */
  body.mc-chat-app-page .mc-compact-app-header{
    height:62px!important;min-height:62px!important;margin:0!important;
    position:relative!important;z-index:1000!important;
  }
  body.mc-chat-app-page .mc-compact-app-header .broadcast-header-inner{
    width:100%!important;max-width:none!important;height:62px!important;min-height:62px!important;
    padding:0 8px 0 10px!important;gap:7px!important;display:flex!important;align-items:center!important;
  }
  body.mc-chat-app-page .mc-compact-app-header .broadcast-brand{
    flex:1 1 auto!important;min-width:0!important;margin:0!important;
  }
  body.mc-chat-app-page .mc-compact-app-header .broadcast-brand-main{
    font-size:1.05rem!important;white-space:nowrap!important;
  }
  body.mc-chat-app-page .mc-compact-app-header .broadcast-brand small{
    display:none!important;
  }
  body.mc-chat-app-page .mc-compact-app-header .mc-header-michigan,
  body.mc-chat-app-page .mc-compact-app-header .header-account-actions{
    display:none!important;
  }
  body.mc-chat-app-page .mc-mobile-app-actions{
    display:flex!important;flex:0 0 auto!important;align-items:center!important;gap:5px!important;
  }
  body.mc-chat-app-page .mc-mobile-drawer-button{
    min-height:36px!important;padding:7px 9px!important;border:1px solid #315267!important;
    border-radius:8px!important;background:#142b3a!important;color:#fff!important;
    font:inherit!important;font-size:.72rem!important;font-weight:900!important;line-height:1!important;
    cursor:pointer!important;box-shadow:none!important;
  }
  body.mc-chat-app-page .mc-mobile-drawer-button[aria-expanded="true"]{
    background:#0e77ae!important;border-color:#2aaee8!important;
  }

  /* The page below the 62px header is the application viewport. */
  body.mc-chat-app-page > #main-content{
    display:block!important;width:100%!important;height:calc(100dvh - 62px)!important;
    min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;
  }
  body.mc-chat-app-page .mc-chat-shell,
  body.mc-chat-app-page .mc-chat-shell.is-content-view,
  body.mc-chat-app-page .mc-chat-shell.is-media-view,
  body.mc-chat-app-page .mc-chat-shell:not(.is-media-view){
    position:relative!important;display:block!important;width:100%!important;height:100%!important;
    min-height:0!important;max-height:100%!important;margin:0!important;border:0!important;
    border-radius:0!important;overflow:hidden!important;grid-template-columns:none!important;
    background:#0b1219!important;
  }

  /* CENTER: always occupies the whole phone workspace. */
  body.mc-chat-app-page .mc-chat-conversation{
    position:absolute!important;inset:0!important;z-index:1!important;width:100%!important;height:100%!important;
    min-width:0!important;min-height:0!important;max-width:none!important;margin:0!important;
    display:grid!important;overflow:hidden!important;border:0!important;
  }
  body.mc-chat-app-page .mc-chat-conversation-head{
    min-height:58px!important;padding:7px 9px!important;gap:8px!important;
  }
  body.mc-chat-app-page .mc-chat-selected{min-width:0!important;gap:8px!important}
  body.mc-chat-app-page .mc-chat-selected .mc-chat-avatar-large{width:38px!important;height:38px!important;flex-basis:38px!important}
  body.mc-chat-app-page .mc-chat-selected>div{min-width:0!important}
  body.mc-chat-app-page .mc-chat-selected h2,
  body.mc-chat-app-page .mc-chat-selected p{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  body.mc-chat-app-page .mc-chat-selected h2{font-size:.92rem!important}
  body.mc-chat-app-page .mc-chat-selected p{font-size:.68rem!important}
  body.mc-chat-app-page .mc-chat-head-actions{gap:5px!important}
  body.mc-chat-app-page .mc-chat-head-actions .mc-chat-mobile-video{
    min-height:36px!important;padding:7px 9px!important;font-size:.69rem!important;border-radius:8px!important;
  }
  body.mc-chat-app-page .mc-chat-messages{
    min-height:0!important;padding:12px 9px!important;overflow-y:auto!important;overflow-x:hidden!important;
    overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;
  }
  body.mc-chat-app-page .mc-chat-bubble{max-width:88%!important}
  body.mc-chat-app-page .mc-chat-compose{padding:7px!important;gap:6px!important}
  body.mc-chat-app-page .mc-chat-compose textarea,
  body.mc-chat-app-page .mc-chat-compose input{font-size:16px!important}
  body.mc-chat-app-page .mc-chat-compose button{min-width:58px!important;padding:0 10px!important}

  /* LEFT: full directory drawer. This overrides all legacy 96px phone rail rules. */
  body.mc-chat-app-page .mc-chat-sidebar{
    display:flex!important;position:absolute!important;z-index:40!important;top:0!important;bottom:0!important;left:0!important;
    width:min(90vw,360px)!important;max-width:360px!important;height:100%!important;min-width:0!important;min-height:0!important;
    transform:translate3d(-103%,0,0)!important;transition:transform .2s ease!important;
    overflow:hidden!important;background:#101a23!important;border-right:1px solid #334858!important;
    box-shadow:18px 0 38px rgba(0,0,0,.46)!important;
  }
  body.mc-chat-app-page.mc-mobile-left-open .mc-chat-sidebar{transform:translate3d(0,0,0)!important}
  body.mc-chat-app-page .mc-chat-sidebar-head{
    display:flex!important;flex:0 0 auto!important;align-items:center!important;justify-content:space-between!important;
    padding:12px 13px 8px!important;
  }
  body.mc-chat-app-page .mc-chat-sidebar-head h1{display:block!important;font-size:1.35rem!important}
  body.mc-chat-app-page .mc-chat-sidebar-head .mc-chat-kicker{display:block!important}
  body.mc-chat-app-page .mc-chat-search{display:block!important;flex:0 0 auto!important;padding:7px 10px!important}
  body.mc-chat-app-page .mc-chat-search input{height:42px!important;font-size:16px!important}
  body.mc-chat-app-page .mc-chat-request-alert{display:block!important;flex:0 0 auto!important;margin:0 10px 7px!important}
  body.mc-chat-app-page .mc-chat-type-filter{
    display:flex!important;flex:0 0 auto!important;flex-wrap:nowrap!important;gap:5px!important;
    padding:4px 10px 7px!important;overflow-x:auto!important;overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;scrollbar-width:thin!important;
  }
  body.mc-chat-app-page .mc-chat-type-filter button,
  body.mc-chat-app-page .mc-chat-type-filter a{display:inline-flex!important;flex:0 0 auto!important;white-space:nowrap!important}
  body.mc-chat-app-page .mc-chat-tabs{
    display:flex!important;flex:0 0 auto!important;flex-wrap:nowrap!important;gap:5px!important;padding:3px 10px 8px!important;
  }
  body.mc-chat-app-page .mc-chat-person-copy{display:block!important;min-width:0!important}
  body.mc-chat-app-page .mc-chat-unread:not([hidden]){display:grid!important}
  body.mc-chat-app-page .mc-chat-member-list{
    display:block!important;flex:1 1 0!important;height:0!important;min-height:0!important;padding:0 6px 8px!important;
    overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;
  }
  body.mc-chat-app-page .mc-chat-person{
    display:grid!important;grid-template-columns:46px minmax(0,1fr) auto!important;gap:10px!important;
    justify-items:stretch!important;padding:9px 8px!important;min-height:64px!important;
  }
  body.mc-chat-app-page .mc-chat-person-copy strong,
  body.mc-chat-app-page .mc-chat-person-copy small{display:block!important}
  body.mc-chat-app-page .mc-chat-sidebar-foot{
    display:flex!important;flex:0 0 auto!important;padding:9px 11px!important;
  }
  body.mc-chat-app-page .mc-chat-sidebar-foot span{display:block!important;font-size:.66rem!important}

  /* RIGHT: contextual profile / fixed menu / media drawer. */
  body.mc-chat-app-page .mc-chat-info{
    display:block!important;position:absolute!important;z-index:40!important;top:0!important;bottom:0!important;right:0!important;left:auto!important;
    width:min(90vw,350px)!important;max-width:350px!important;height:100%!important;min-width:0!important;min-height:0!important;
    padding:12px!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;
    transform:translate3d(103%,0,0)!important;transition:transform .2s ease!important;
    background:#0f1922!important;border-left:1px solid #334858!important;box-shadow:-18px 0 38px rgba(0,0,0,.46)!important;
  }
  body.mc-chat-app-page.mc-mobile-right-open .mc-chat-info{transform:translate3d(0,0,0)!important}
  body.mc-chat-app-page .mc-chat-info .mc-right-panel:not([hidden]){display:block!important}
  body.mc-chat-app-page .mc-chat-info-card{margin:0!important}
  body.mc-chat-app-page .mc-chat-info-avatar{width:72px!important;height:72px!important;margin:3px auto 8px!important}
  body.mc-chat-app-page .mc-chat-info h2{font-size:1.05rem!important}
  body.mc-chat-app-page .mc-profile-actions{margin:10px 0!important;gap:7px!important}
  body.mc-chat-app-page .mc-chat-info-button,
  body.mc-chat-app-page .mc-right-menu-link{min-height:42px!important;margin-top:7px!important}
  body.mc-chat-app-page .mc-right-menu-group button,
  body.mc-chat-app-page .mc-right-media-list button{min-height:42px!important;font-size:.76rem!important}

  /* Drawer backdrop. */
  body.mc-chat-app-page .mc-mobile-drawer-backdrop{
    display:block!important;position:absolute!important;inset:0!important;z-index:30!important;margin:0!important;padding:0!important;
    border:0!important;border-radius:0!important;background:rgba(0,0,0,.60)!important;
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:opacity .2s ease,visibility .2s ease!important;
  }
  body.mc-chat-app-page.mc-mobile-left-open .mc-mobile-drawer-backdrop,
  body.mc-chat-app-page.mc-mobile-right-open .mc-mobile-drawer-backdrop{
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;
  }

  /* Unified center iframe/native workspaces. */
  body.mc-chat-app-page .mc-center-page,
  body.mc-chat-app-page .mc-center-submit,
  body.mc-chat-app-page .mc-center-about,
  body.mc-chat-app-page .mc-center-contact,
  body.mc-chat-app-page .mc-center-guidelines,
  body.mc-chat-app-page .mc-center-advertise,
  body.mc-chat-app-page .mc-center-membership,
  body.mc-chat-app-page .mc-center-live,
  body.mc-chat-app-page .mc-center-recorded,
  body.mc-chat-app-page .mc-center-events,
  body.mc-chat-app-page .mc-center-dashboard,
  body.mc-chat-app-page .mc-center-my-profile{
    width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;overflow:hidden!important;
  }
  body.mc-chat-app-page .mc-center-page-shell,
  body.mc-chat-app-page .mc-center-submit-shell,
  body.mc-chat-app-page .mc-center-about-shell,
  body.mc-chat-app-page .mc-center-contact-shell,
  body.mc-chat-app-page .mc-center-guidelines-shell{
    width:100%!important;max-width:none!important;height:100%!important;min-height:0!important;padding:7px!important;margin:0!important;
  }
  body.mc-chat-app-page .mc-center-page-toolbar,
  body.mc-chat-app-page .mc-center-submit-toolbar,
  body.mc-chat-app-page .mc-center-about-toolbar,
  body.mc-chat-app-page .mc-center-contact-toolbar,
  body.mc-chat-app-page .mc-center-guidelines-toolbar{
    min-height:38px!important;margin-bottom:5px!important;padding:0 2px!important;
  }
  body.mc-chat-app-page .mc-center-page-toolbar strong,
  body.mc-chat-app-page .mc-center-submit-toolbar strong{font-size:.9rem!important}
  body.mc-chat-app-page .mc-center-page-frame,
  body.mc-chat-app-page .mc-center-admin-frame,
  body.mc-chat-app-page .mc-center-submit-frame,
  body.mc-chat-app-page iframe{
    max-width:100%!important;min-width:0!important;min-height:0!important;
  }
  body.mc-chat-app-page .mc-center-page-frame,
  body.mc-chat-app-page .mc-center-admin-frame,
  body.mc-chat-app-page .mc-center-submit-frame{
    width:100%!important;flex:1 1 0!important;height:0!important;border-radius:8px!important;
  }

  /* Admin workspace nav becomes a horizontal tool strip instead of a giant wrapped block. */
  body.mc-chat-app-page .mc-admin-center-nav{
    display:flex!important;flex:0 0 auto!important;flex-wrap:nowrap!important;gap:5px!important;
    padding:6px!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important;
  }
  body.mc-chat-app-page .mc-admin-center-nav button{
    flex:0 0 auto!important;min-height:36px!important;padding:7px 9px!important;font-size:.72rem!important;white-space:nowrap!important;
  }

  /* Store / dashboard / profile native layouts when routed directly into center. */
  body.mc-chat-app-page .mc-store-product-grid,
  body.mc-chat-app-page .mc-store-product-detail,
  body.mc-chat-app-page .mc-cart-wrap,
  body.mc-chat-app-page .mc-member-dashboard-content .af-control-grid,
  body.mc-chat-app-page .mc-member-profile-content .mp-social-grid{
    grid-template-columns:1fr!important;
  }
  body.mc-chat-app-page .mc-member-dashboard-content .af-control-grid .af-control-profile{grid-column:auto!important}

  /* Media/video workspace. Keep controls reachable and video inside the viewport. */
  body.mc-chat-app-page .mc-chat-video-pane,
  body.mc-chat-app-page .mc-chat-video-window,
  body.mc-chat-app-page .mc-video-body,
  body.mc-chat-app-page .mc-video-stage,
  body.mc-chat-app-page .rtc-stage{
    width:100%!important;max-width:none!important;min-width:0!important;
  }
  body.mc-chat-app-page .mc-chat-conversation .mc-chat-video-pane > .mc-chat-video-window{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;margin:0!important;
  }
  body.mc-chat-app-page .mc-chat-conversation .mc-chat-video-pane > .mc-chat-video-window > .mc-video-header{
    left:0!important;right:0!important;top:0!important;height:66px!important;min-height:66px!important;max-height:66px!important;padding:5px 8px!important;
  }
  body.mc-chat-app-page .mc-chat-conversation .mc-chat-video-pane > .mc-chat-video-window > .mc-video-body{
    left:0!important;right:0!important;top:66px!important;bottom:60px!important;height:auto!important;min-height:0!important;
  }
  body.mc-chat-app-page .mc-chat-conversation .mc-chat-video-pane > .mc-chat-video-window > footer.mc-video-controls{
    position:absolute!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;height:60px!important;
    min-height:60px!important;max-height:60px!important;padding:5px 6px!important;gap:5px!important;
    display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important;
  }
  body.mc-chat-app-page .mc-chat-conversation .mc-chat-video-pane > .mc-chat-video-window > footer.mc-video-controls .mc-call-control:not([hidden]){
    flex:0 0 auto!important;min-width:58px!important;height:48px!important;min-height:48px!important;font-size:.65rem!important;
  }
  body.mc-chat-app-page .mc-video-stage video,
  body.mc-chat-app-page .rtc-stage video,
  body.mc-chat-app-page #rtc-remote-video{
    width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;
  }
  body.mc-chat-app-page .mc-chat-self-preview{width:100%!important;max-width:100%!important}

  /* No horizontal page drift. */
  body.mc-chat-app-page #mc-chat-app,
  body.mc-chat-app-page #mc-chat-app *{box-sizing:border-box;max-width:100%}
}

/* PHONE APP BRIDGE FALLBACK v4
   app.php owns the phone navigation. When it explicitly opens a drawer,
   force the off-canvas geometry even if the child iframe reports a wider
   CSS viewport than the outer phone shell. These rules are inert until the
   phone navigation sends an open command. */
body.mc-chat-app-page.mc-mobile-drawer-forced .mc-chat-shell,
body.mc-chat-app-page.mc-mobile-drawer-forced .mc-chat-shell.is-content-view,
body.mc-chat-app-page.mc-mobile-drawer-forced .mc-chat-shell.is-media-view,
body.mc-chat-app-page.mc-mobile-drawer-forced .mc-chat-shell:not(.is-media-view){
  position:relative!important;width:100%!important;max-width:none!important;height:100%!important;min-height:0!important;
  overflow:hidden!important;grid-template-columns:none!important;
}
body.mc-chat-app-page.mc-mobile-drawer-forced .mc-chat-sidebar{
  display:flex!important;position:absolute!important;z-index:400!important;top:0!important;bottom:0!important;left:0!important;
  width:min(90vw,360px)!important;max-width:360px!important;height:100%!important;min-width:0!important;min-height:0!important;
  transform:translate3d(-103%,0,0)!important;transition:transform .2s ease!important;
  overflow:hidden!important;background:#101a23!important;border-right:1px solid #334858!important;
  box-shadow:18px 0 38px rgba(0,0,0,.46)!important;pointer-events:auto!important;
}
body.mc-chat-app-page.mc-mobile-drawer-forced.mc-mobile-left-open .mc-chat-sidebar{
  transform:translate3d(0,0,0)!important;
}
body.mc-chat-app-page.mc-mobile-drawer-forced .mc-chat-info{
  display:block!important;position:absolute!important;z-index:400!important;top:0!important;bottom:0!important;right:0!important;left:auto!important;
  width:min(90vw,350px)!important;max-width:350px!important;height:100%!important;min-width:0!important;min-height:0!important;
  padding:12px!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;
  transform:translate3d(103%,0,0)!important;transition:transform .2s ease!important;
  background:#0f1922!important;border-left:1px solid #334858!important;box-shadow:-18px 0 38px rgba(0,0,0,.46)!important;pointer-events:auto!important;
}
body.mc-chat-app-page.mc-mobile-drawer-forced.mc-mobile-right-open .mc-chat-info{
  transform:translate3d(0,0,0)!important;
}
body.mc-chat-app-page.mc-mobile-drawer-forced .mc-mobile-drawer-backdrop{
  display:block!important;position:absolute!important;inset:0!important;z-index:300!important;margin:0!important;padding:0!important;
  border:0!important;border-radius:0!important;background:rgba(0,0,0,.60)!important;
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;
}
body.mc-chat-app-page.mc-mobile-drawer-forced.mc-mobile-left-open .mc-mobile-drawer-backdrop,
body.mc-chat-app-page.mc-mobile-drawer-forced.mc-mobile-right-open .mc-mobile-drawer-backdrop{
  opacity:1!important;visibility:visible!important;pointer-events:auto!important;
}
body.mc-chat-app-page.mc-mobile-drawer-forced .mc-chat-type-filter,
body.mc-chat-app-page.mc-mobile-drawer-forced .mc-chat-tabs{
  position:relative!important;z-index:401!important;pointer-events:auto!important;
}
body.mc-chat-app-page.mc-mobile-drawer-forced .mc-chat-type-filter button,
body.mc-chat-app-page.mc-mobile-drawer-forced .mc-chat-tabs button,
body.mc-chat-app-page.mc-mobile-drawer-forced .mc-chat-person{
  pointer-events:auto!important;touch-action:manipulation!important;
}


/* 2026-09-06 phone directory controls v6
   Use real anchors for category/activity filters so touch navigation still works
   even if a mobile browser drops a scripted click. JS normally prevents the
   navigation and filters in place. */
.mc-chat-tabs a{
  display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;
  background:#1b2835;color:#b8c6d1;padding:7px 12px;font-size:.75rem;font-weight:800;
  text-decoration:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.mc-chat-tabs a.is-active{background:#0e77ae;color:#fff}
@media(max-width:760px){
  body.mc-chat-app-page .mc-chat-type-filter a,
  body.mc-chat-app-page .mc-chat-tabs a{
    position:relative!important;z-index:450!important;pointer-events:auto!important;touch-action:manipulation!important;
    -webkit-user-select:none!important;user-select:none!important;
  }
  body.mc-chat-app-page .mc-chat-type-filter a{min-height:42px!important;padding:0 12px!important}
  body.mc-chat-app-page .mc-chat-tabs a{min-height:40px!important;padding:0 13px!important}
}


/* 2026-09-06 V9: phone directory filter controls remain directly tappable. */
@media (max-width:760px){
  body.mc-chat-app-page .mc-chat-type-filter a,
  body.mc-chat-app-page .mc-chat-tabs a{
    position:relative!important;
    z-index:450!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
    -webkit-tap-highlight-color:rgba(255,255,255,.08);
  }
  body.mc-chat-app-page .mc-chat-type-filter a{
    min-height:42px!important;
    padding:0 13px!important;
  }
}