/* FPC Wire v1.9.2a — responsive messages and right rail */

:root{
  --wire-left-rail:250px;
  --wire-right-rail:330px;
  --wire-shell-gap:16px;
}

/* Desktop shell must be allowed to shrink instead of clipping the center column. */
@media (min-width:1100px){
  .wire-app{
    display:grid!important;
    grid-template-columns:minmax(220px,var(--wire-left-rail)) minmax(0,1fr) minmax(280px,var(--wire-right-rail))!important;
    gap:var(--wire-shell-gap)!important;
    width:min(100%,1540px)!important;
    max-width:1540px!important;
    margin:0 auto!important;
    padding:12px 14px 24px!important;
    overflow:visible!important;
  }

  .left-rail,
  .content-column,
  .right-rail{
    min-width:0!important;
  }

  .content-column{
    width:auto!important;
    max-width:none!important;
    overflow:visible!important;
  }

  .right-rail{
    width:auto!important;
    max-width:none!important;
  }
}

@media (min-width:800px) and (max-width:1099px){
  .wire-app{
    display:grid!important;
    grid-template-columns:210px minmax(0,1fr)!important;
    gap:14px!important;
    width:100%!important;
    max-width:none!important;
    padding:10px 12px 22px!important;
  }

  .right-rail{display:none!important}
  .left-rail,.content-column{min-width:0!important}
}

/* Desktop messages: keep the composer and thread inside the available center column. */
@media (min-width:800px){
  .messages-shell{
    display:grid!important;
    grid-template-columns:minmax(230px,32%) minmax(0,1fr)!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }

  .conversation-sidebar,
  .message-thread-panel{
    min-width:0!important;
    width:auto!important;
    max-width:none!important;
  }

  .message-thread-panel{
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }

  .message-thread-header{
    flex:0 0 auto!important;
    min-width:0!important;
  }

  .message-thread-header > a{
    min-width:0!important;
    overflow:hidden!important;
  }

  .message-thread-actions{
    flex:0 0 auto!important;
    display:flex!important;
    gap:10px!important;
    align-items:center!important;
    white-space:nowrap!important;
  }

  .message-thread{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }

  .message-composer{
    position:sticky!important;
    left:auto!important;
    right:auto!important;
    bottom:0!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr) auto auto auto!important;
    gap:8px!important;
    align-items:center!important;
    padding:10px 12px!important;
    overflow:hidden!important;
  }

  .message-composer textarea{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
  }

  .message-composer .media-file-name{
    display:none!important;
  }

  .message-composer > *{
    min-width:0!important;
  }
}

/* Right rail redesign: denser, cleaner, and easier to scan. */
@media (min-width:1100px){
  .right-rail{
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
    position:sticky!important;
    top:12px!important;
    max-height:calc(100vh - 24px)!important;
    overflow-y:auto!important;
    padding-right:2px!important;
    scrollbar-width:thin;
  }

  .right-rail .side-card,
  .right-rail .radio-card{
    margin:0!important;
    border-radius:15px!important;
    overflow:hidden!important;
    background:linear-gradient(180deg,#0d1622,#09111a)!important;
    border:1px solid #223247!important;
    box-shadow:0 12px 30px rgba(0,0,0,.18)!important;
  }

  .right-rail .side-card header{
    padding:14px 15px!important;
    border-bottom:1px solid rgba(133,158,188,.13)!important;
  }

  .right-rail .side-card header h2{
    font-size:.98rem!important;
    line-height:1.2!important;
  }

  .right-rail .trend-list{
    margin:0!important;
    padding:7px!important;
  }

  .right-rail .trend-list li{
    display:grid!important;
    grid-template-columns:24px minmax(0,1fr) auto!important;
    gap:8px!important;
    align-items:start!important;
    padding:10px 8px!important;
  }

  .right-rail .trend-list li > div{
    min-width:0!important;
  }

  .right-rail .trend-list strong,
  .right-rail .trend-list small{
    display:block!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  .right-rail .follow-list{
    padding:8px!important;
  }

  .right-rail .follow-row{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr) auto!important;
    gap:10px!important;
    align-items:center!important;
    min-width:0!important;
  }

  .right-rail .follow-row > span{
    min-width:0!important;
  }

  .right-rail .follow-row strong,
  .right-rail .follow-row small{
    display:block!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  .right-rail .radio-card{
    display:grid!important;
    grid-template-columns:145px minmax(0,1fr)!important;
    gap:12px!important;
    align-items:center!important;
    padding:12px!important;
  }

  .right-rail .radio-card > div:last-child{
    min-width:0!important;
  }

  .right-rail .radio-card h2{
    margin:0 0 6px!important;
    font-size:1rem!important;
  }

  .right-rail .radio-card p{
    margin:0 0 10px!important;
    color:#a9b8ca!important;
    line-height:1.42!important;
  }

  .right-rail .radio-card a{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:40px!important;
    border-radius:10px!important;
    text-decoration:none!important;
  }
}

/* Mobile shell: remove horizontal overflow and keep every control inside the viewport. */
@media (max-width:799px){
  html,body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  .wire-app,
  .content-column,
  .messages-shell,
  .conversation-sidebar,
  .message-thread-panel,
  .message-thread,
  .message-composer{
    min-width:0!important;
    max-width:100%!important;
  }

  .wire-app{
    display:block!important;
    width:100%!important;
    padding:0 0 calc(var(--wire-native-mobile-nav-height,76px) + env(safe-area-inset-bottom) + 14px)!important;
  }

  .content-column{
    width:100%!important;
    padding:0!important;
    overflow-x:hidden!important;
  }

  .right-rail{display:none!important}

  .page-header,
  .messages-page-header{
    margin:0!important;
    border-radius:0!important;
    border-left:0!important;
    border-right:0!important;
  }

  .messages-shell{
    display:block!important;
    width:100%!important;
    min-height:calc(100dvh - var(--wire-native-mobile-nav-height,76px))!important;
    border-radius:0!important;
    border-left:0!important;
    border-right:0!important;
    overflow:hidden!important;
  }

  .conversation-sidebar,
  .message-thread-panel{
    width:100%!important;
    max-width:100%!important;
    border:0!important;
    border-radius:0!important;
  }

  .messages-shell.has-active-thread .conversation-sidebar{
    display:none!important;
  }

  .messages-shell:not(.has-active-thread) .message-thread-panel{
    display:none!important;
  }

  .new-message-panel{
    padding:12px!important;
  }

  .conversation-list{
    padding:6px 8px 110px!important;
  }

  .conversation-row{
    grid-template-columns:auto minmax(0,1fr) auto!important;
    gap:9px!important;
    padding:10px!important;
  }

  .conversation-copy,
  .conversation-meta{
    min-width:0!important;
  }

  .conversation-copy strong,
  .conversation-copy small,
  .conversation-copy span{
    display:block!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  .message-thread-panel{
    display:flex!important;
    flex-direction:column!important;
    min-height:calc(100dvh - var(--wire-native-mobile-nav-height,76px))!important;
  }

  .message-thread-header{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr) auto!important;
    gap:8px!important;
    align-items:center!important;
    width:100%!important;
    min-height:60px!important;
    padding:8px 10px!important;
  }

  .message-thread-header > a{
    min-width:0!important;
    overflow:hidden!important;
  }

  .message-thread-header > a span{
    min-width:0!important;
  }

  .message-thread-header strong,
  .message-thread-header small{
    display:block!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  .message-thread-actions{
    display:none!important;
  }

  .message-thread{
    flex:1 1 auto!important;
    min-height:0!important;
    width:100%!important;
    padding:12px 10px calc(var(--wire-message-composer-height,84px) + 18px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }

  .direct-message{
    width:100%!important;
    max-width:100%!important;
  }

  .message-bubble{
    max-width:84%!important;
    overflow:hidden!important;
  }

  .message-bubble p,
  .message-bubble a{
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
  }

  .message-media,
  .message-media img{
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
  }

  .message-composer{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:calc(var(--wire-native-mobile-nav-height,76px) + env(safe-area-inset-bottom))!important;
    z-index:1300!important;
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr) auto!important;
    gap:7px!important;
    align-items:end!important;
    width:100%!important;
    padding:8px max(8px,env(safe-area-inset-right)) 8px max(8px,env(safe-area-inset-left))!important;
    overflow:hidden!important;
  }

  .message-composer textarea{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:42px!important;
    max-height:96px!important;
    padding:10px 11px!important;
    resize:none!important;
  }

  .message-composer .primary-button{
    min-width:64px!important;
    height:42px!important;
    padding:0 12px!important;
  }

  .message-composer .message-media-picker{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    display:grid!important;
    place-items:center!important;
  }

  .message-composer .media-file-name,
  .message-composer [data-klipy-trigger],
  .message-composer .gif-button{
    display:none!important;
  }
}