/* 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;
}

.message-layout-v2{
  grid-template-columns:360px minmax(0,1fr)!important;
  gap:10px!important;
  min-height:calc(100vh - 330px)!important;
  height:calc(100vh - 330px)!important;
}

.message-sidebar-v2{
  min-height:0!important;
  height:100%!important;
  border-radius:10px!important;
}

.message-empty-panel-v2,
.conversation-panel-v2{
  min-height:0!important;
  height:100%!important;
  border-radius:10px!important;
}

.conversation-panel-v2{
  display:grid!important;
  grid-template-rows:64px minmax(0,1fr) auto!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;
}

@media(max-width:1100px){
  .message-layout-v2{
    grid-template-columns:300px minmax(0,1fr)!important;
  }
}

@media(max-width:800px){
  .message-layout-v2{
    display:block!important;
    height:auto!important;
    min-height:0!important;
  }
  .message-sidebar-v2{
    max-height:360px!important;
    margin-bottom:10px!important;
  }
  .conversation-panel-v2{
    height:72vh!important;
  }
  .elite-giphy-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}