/* Vchat 0.62.26-alpha — final Inbox spacing/alignment hardening.
 * Scope: desktop composer right gutter + mobile/tablet conversation action alignment.
 * CSS-only. Canonical controls, IDs, DOM order, handlers and API behavior remain untouched.
 */

/* -------------------------------------------------------------------------
   Desktop composer: reserve a real internal gutter around the send action.
   The button keeps its full label, but no longer visually kisses the right
   edge of the composer shell.
   ------------------------------------------------------------------------- */
@media (min-width:901px){
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell .vchat-composer{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 82px!important;
    align-items:end!important;
    gap:10px!important;
    width:100%!important;
    min-width:0!important;
    padding:9px 12px 9px 10px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell .vchat-composer textarea{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    box-sizing:border-box!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell #vchat-send-message{
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    justify-self:end!important;
    align-self:center!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:82px!important;
    min-width:82px!important;
    max-width:82px!important;
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
    margin:0!important;
    padding:0 13px!important;
    box-sizing:border-box!important;
    border-radius:14px!important;
    overflow:hidden!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell #vchat-send-message .vchat-send-label{
    display:block!important;
    width:auto!important;
    max-width:100%!important;
    margin:0!important;
    color:#fff!important;
    line-height:1!important;
    text-align:center!important;
    white-space:nowrap!important;
  }
}

/* -------------------------------------------------------------------------
   Mobile / portrait tablet conversation header.
   The action pair gets its own centered lane and both original buttons are
   centered geometrically instead of relying on inherited line-box behavior.
   ------------------------------------------------------------------------- */
@media (max-width:900px), (max-width:1024px) and (orientation:portrait){
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-chat-head{
    align-items:center!important;
    grid-template-columns:42px minmax(0,1fr) minmax(126px,auto)!important;
    column-gap:10px!important;
    padding:8px 12px!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-chat-actions,
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-chat-actions-0518{
    grid-area:actions!important;
    align-self:center!important;
    justify-self:end!important;
    display:grid!important;
    grid-template-columns:minmax(76px,auto) 42px!important;
    place-items:center!important;
    align-items:center!important;
    justify-content:end!important;
    gap:8px!important;
    width:auto!important;
    min-width:126px!important;
    max-width:154px!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] #vchat-claim,
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] #vchat-more{
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    align-self:center!important;
    justify-self:center!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0!important;
    box-sizing:border-box!important;
    vertical-align:middle!important;
    line-height:1!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] #vchat-claim{
    width:100%!important;
    min-width:76px!important;
    max-width:104px!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    padding:0 12px!important;
    overflow:hidden!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] #vchat-claim::after{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    display:block!important;
    width:max-content!important;
    max-width:calc(100% - 14px)!important;
    margin:0!important;
    padding:0!important;
    font-size:11px!important;
    font-weight:850!important;
    line-height:1!important;
    text-align:center!important;
    white-space:nowrap!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] #vchat-more{
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    padding:0!important;
    overflow:hidden!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] #vchat-more::before{
    content:'⋯'!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-56%)!important;
    display:block!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    color:#5f52cf!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:23px!important;
    font-weight:800!important;
    letter-spacing:0!important;
    line-height:1!important;
    text-align:center!important;
  }
}

@media (max-width:520px){
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-chat-head{
    grid-template-columns:40px minmax(0,1fr) 120px!important;
    column-gap:8px!important;
    padding-inline:9px!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-chat-actions,
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-chat-actions-0518{
    grid-template-columns:minmax(70px,1fr) 40px!important;
    min-width:118px!important;
    max-width:126px!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    gap:7px!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] #vchat-claim{
    min-width:70px!important;
    max-width:78px!important;
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
    padding-inline:9px!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] #vchat-claim::after{
    font-size:10.5px!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] #vchat-more{
    width:40px!important;
    min-width:40px!important;
    max-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] #vchat-more::before{
    font-size:22px!important;
  }
}

@media (max-width:380px){
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-chat-head{
    grid-template-columns:38px minmax(0,1fr) 110px!important;
    column-gap:6px!important;
    padding-inline:7px!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-chat-actions,
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-chat-actions-0518{
    grid-template-columns:minmax(64px,1fr) 38px!important;
    min-width:108px!important;
    max-width:112px!important;
    gap:6px!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] #vchat-claim{
    min-width:64px!important;
    max-width:68px!important;
    padding-inline:7px!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] #vchat-claim::after{
    font-size:10px!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] #vchat-more{
    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
  }
}