/* STXRP Messaging Elite v3
   Full-screen communications workspace inspired by enterprise collaboration apps,
   while retaining STXRP branding and server-rendered architecture. */

body:has(.message-layout-v2) .member-main{
  width:min(1680px,calc(100% - 28px))!important;
  max-width:none!important;
}

body:has(.message-layout-v2) .messaging-wide-shell{
  width:min(1680px,calc(100% - 28px))!important;
  max-width:none!important;
}

body:has(.message-layout-v2) .member-hero.messaging-hero{
  padding-top:20px!important;
  padding-bottom:20px!important;
}

body:has(.message-layout-v2) .member-hero.messaging-hero h1{
  font-size:2rem!important;
  margin-bottom:3px!important;
}

body:has(.message-layout-v2) .member-subnav{
  margin-top:10px!important;
  margin-bottom:10px!important;
}

/* Phase 14 Checkpoint J (CSS consolidation pass): the grid-template-columns/
   grid-template-rows/height/min-height/display declarations that used to
   live here for .message-layout-v2/.conversation-panel-v2/
   .message-sidebar-v2/.message-empty-panel-v2 (plus the matching mobile
   overrides further below) have been REMOVED -- they actively fought
   messaging-workspace-v2.css's canonical grid/breakpoint/dvh decisions
   (confirmed: this file loads AFTER the canonical stylesheet with
   !important, so it was winning). Cosmetic, non-layout-authority rules
   (border-radius, padding, message-bubble/avatar/composer-textarea sizing,
   the GIPHY/tapback styling below) are unaffected and remain exactly as
   they were -- this is layout-AUTHORITY consolidation, not a rewrite of
   this file's visual design. See messaging-workspace-v2.css for the
   single, authoritative grid/height/breakpoint ruleset. */

.message-empty-panel-v2,
.conversation-panel-v2{
  border-radius:10px!important;
}

.conversation-header-v2{
  padding:10px 16px!important;
  min-height:64px!important;
}

.conversation-header-person h2{
  font-size:1.2rem!important;
}

.conversation-panel-v2 .message-thread{
  padding:20px 22px!important;
  gap:8px!important;
}

.conversation-panel-v2 .message-row{
  max-width:72%!important;
}

.conversation-panel-v2 .message-bubble{
  padding:10px 12px!important;
  border-radius:12px!important;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}

.message-composer-shell{
  padding:10px 14px 12px!important;
}

.message-composer-shell .rich-field textarea,
.message-composer-shell .rich-editor{
  min-height:84px!important;
  max-height:210px!important;
}

.message-sidebar-heading{
  padding:3px 2px 8px!important;
}

.message-sidebar-search input{
  height:38px!important;
}

.conversation-item{
  grid-template-columns:46px minmax(0,1fr)!important;
  padding:10px!important;
  min-height:62px!important;
}

.conversation-title-line strong{
  font-size:.88rem!important;
}

.conversation-preview-line span{
  font-size:.76rem!important;
}

.message-avatar,
.global-user-avatar{
  background:#16385e;
}

/* Never display the browser's broken-image icon. */
.message-avatar[src=""],
.global-user-avatar[src=""]{
  display:none!important;
}

.elite-giphy-picker{
  width:min(620px,100%);
  margin-top:8px;
  padding:10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:#07182b;
  box-shadow:0 20px 45px rgba(0,0,0,.35);
}

.elite-giphy-picker header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}

.elite-giphy-picker header>div{
  display:grid;
  gap:1px;
}

.elite-giphy-picker header span,
.elite-giphy-picker footer{
  font-size:.68rem;
  opacity:.62;
}

.elite-giphy-picker header button{
  width:30px;
  height:30px;
  border:0;
  border-radius:6px;
  background:#173b65;
  color:#fff;
  cursor:pointer;
}

.elite-giphy-search{
  display:flex;
  gap:6px;
}

.elite-giphy-search input{
  flex:1;
  min-width:0;
  background:#0b223d;
  color:inherit;
  border:1px solid rgba(255,255,255,.14);
  border-radius:7px;
  padding:9px 10px;
}

.elite-giphy-search button,
.elite-giphy-more{
  border:0;
  border-radius:7px;
  background:#c7253e;
  color:#fff;
  padding:8px 12px;
  font-weight:700;
  cursor:pointer;
}

.elite-giphy-status{
  display:grid;
  gap:3px;
  padding:7px 1px;
  font-size:.74rem;
  opacity:.76;
}

.elite-giphy-status span{
  font-size:.68rem;
}

.elite-giphy-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
  max-height:390px;
  overflow:auto;
}

.elite-giphy-card{
  border:0;
  border-radius:7px;
  overflow:hidden;
  padding:0;
  aspect-ratio:1.15/1;
  background:#102d4e;
  cursor:pointer;
}

.elite-giphy-card:hover{
  outline:2px solid #c7253e;
}

.elite-giphy-card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.elite-giphy-selection{
  display:flex;
  align-items:center;
  gap:9px;
  background:#112d4f;
  border-radius:8px;
  padding:7px;
  margin:8px 0;
}

.elite-giphy-selection img{
  width:72px;
  height:54px;
  object-fit:cover;
  border-radius:6px;
}

.elite-giphy-selection span{
  display:grid;
  gap:2px;
  flex:1;
}

.elite-giphy-selection small{
  opacity:.65;
}

.elite-giphy-selection button{
  border:0;
  border-radius:6px;
  background:#173b65;
  color:#fff;
  padding:6px 8px;
  cursor:pointer;
}

.elite-giphy-more{
  width:100%;
  margin-top:7px;
  background:#173b65;
}

.elite-giphy-picker footer{
  text-align:right;
  margin-top:6px;
}

/* Phase 14 Checkpoint J (CSS consolidation pass): the @media(max-width:1100px)
   grid-template-columns override and the @media(max-width:800px)
   .message-layout-v2/.message-sidebar-v2/.conversation-panel-v2 height/
   display overrides that used to live here were REMOVED -- they introduced
   a THIRD, misaligned breakpoint (1100px/800px, alongside the canonical
   file's 1180px/1000px/760px) and, at 800px, forced display:block on the
   grid container entirely, breaking the canonical mobile drawer/right-panel
   overlay model. messaging-workspace-v2.css's own breakpoints are now the
   sole authority for this layout; only the still-relevant, non-conflicting
   .elite-giphy-grid column-count adjustment remains here. */
@media(max-width:800px){
  .elite-giphy-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}