/* Vchat 0.62.23-alpha — Inbox responsive reflow hardening
   Final exact-scope layer for the two mobile/tablet zones that were still
   being expanded by legacy high-specificity rules: conversation header and
   composer utility rail. No IDs, DOM order, handlers or business logic change. */

@media (max-width: 900px), (max-width: 1024px) and (orientation: portrait) {
  /* -----------------------------------------------------------------------
     Conversation header: one useful row, full channel label, no dead band.
     The #app + [data-mobile-view] selector intentionally outranks legacy
     html.vchat-mobile-portrait rules that still carried !important.
     ----------------------------------------------------------------------- */
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-chat-head {
    position:relative!important;
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr) auto!important;
    grid-template-areas:"back person actions"!important;
    align-items:center!important;
    column-gap:10px!important;
    row-gap:0!important;
    width:100%!important;
    min-height:66px!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:9px 12px!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-open-conversations {
    grid-area:back!important;
    align-self:center!important;
    justify-self:start!important;
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    margin:0!important;
    padding:0!important;
    border:1px solid #ddd9f5!important;
    border-radius:13px!important;
    background:#fff!important;
    color:#6253d6!important;
    box-sizing:border-box!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-chat-person {
    grid-area:person!important;
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr)!important;
    align-items:center!important;
    gap:9px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-chat-person .vchat-avatar {
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    border-radius:14px!important;
    font-size:16px!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-chat-person > div {
    display:block!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] #vchat-active-name {
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    color:#11182c!important;
    font-size:16px!important;
    font-weight:850!important;
    line-height:1.15!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-chat-person-meta {
    display:flex!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:5px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:5px 0 0!important;
    overflow:hidden!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-chat-person-meta > * {
    flex:0 1 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] #vchat-active-channel-pill {
    display:inline-flex!important;
    align-items:center!important;
    gap:5px!important;
    width:fit-content!important;
    max-width:100%!important;
    padding:3px 9px 3px 4px!important;
    border-radius:999px!important;
    line-height:1!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] #vchat-active-channel-pill #vchat-active-channel {
    display:block!important;
    width:auto!important;
    max-width:none!important;
    color:inherit!important;
    font-size:11px!important;
    font-weight:800!important;
    line-height:1!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] #vchat-active-channel-icon {
    display:grid!important;
    place-items:center!important;
    min-width:29px!important;
    height:29px!important;
    margin:0!important;
    padding:0 7px!important;
    border-radius:999px!important;
    font-size:10px!important;
    line-height:1!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-active-department {
    display:none!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;
    position:static!important;
    inset:auto!important;
    transform:none!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:7px!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    min-height:42px!important;
    height:42px!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] #vchat-open-contact,
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] #vchat-resolve {
    display:none!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] #vchat-claim {
    position:static!important;
    flex:0 0 auto!important;
    width:auto!important;
    min-width:82px!important;
    max-width:104px!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    margin:0!important;
    padding:0 13px!important;
    border:1px solid #6554d8!important;
    border-radius:13px!important;
    background:#6554d8!important;
    color:#fff!important;
    font-size:0!important;
    font-weight:850!important;
    box-shadow:0 6px 14px rgba(86,70,199,.12)!important;
    white-space:nowrap!important;
    pointer-events:auto!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] #vchat-claim::after {
    content:'Humano'!important;
    display:block!important;
    color:#fff!important;
    font-size:11px!important;
    font-weight:850!important;
    line-height:1!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] #vchat-claim[data-current-mode="human"]::after {
    content:'AI'!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] #vchat-more {
    position:static!important;
    flex:0 0 42px!important;
    display:grid!important;
    place-items:center!important;
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    margin:0!important;
    padding:0!important;
    border:1px solid #ddd9f5!important;
    border-radius:13px!important;
    background:#fff!important;
    color:#5f52cf!important;
    font-size:0!important;
    box-shadow:none!important;
    pointer-events:auto!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] #vchat-more::before {
    content:'•••'!important;
    display:block!important;
    color:#5f52cf!important;
    font-size:14px!important;
    font-weight:900!important;
    letter-spacing:1px!important;
    line-height:1!important;
  }

  /* -----------------------------------------------------------------------
     Composer utilities: fill the available row instead of five legacy fixed
     boxes. Direct-ID selectors intentionally beat release-164 !important.
     ----------------------------------------------------------------------- */
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools {
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    gap:5px!important;
    width:100%!important;
    min-width:0!important;
    min-height:50px!important;
    height:50px!important;
    margin:0 0 7px!important;
    padding:0!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools > span:empty {
    display:none!important;
    width:0!important;
    min-width:0!important;
    flex:0 0 0!important;
    margin:0!important;
    padding:0!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools #vchat-attach,
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools #vchat-record-audio,
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools #vchat-emoji,
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools #vchat-schedule-message,
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools #vchat-saved-reply {
    position:relative!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    transform:none!important;
    display:flex!important;
    flex:0 1 auto!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:50px!important;
    min-height:50px!important;
    max-height:50px!important;
    margin:0!important;
    padding:4px 2px!important;
    border:1px solid #ebe7f7!important;
    border-radius:12px!important;
    background:#fbfaff!important;
    color:#6556cf!important;
    font-size:9.5px!important;
    font-weight:780!important;
    line-height:1!important;
    text-align:center!important;
    text-indent:0!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    box-shadow:none!important;
    box-sizing:border-box!important;
    pointer-events:auto!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools #vchat-attach::before,
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools #vchat-emoji::before,
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools #vchat-schedule-message::before,
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools #vchat-saved-reply::before {
    position:static!important;
    inset:auto!important;
    transform:none!important;
    display:grid!important;
    place-items:center!important;
    flex:0 0 auto!important;
    width:18px!important;
    min-width:18px!important;
    max-width:18px!important;
    height:18px!important;
    min-height:18px!important;
    max-height:18px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#6556cf!important;
    font-size:17px!important;
    font-weight:850!important;
    line-height:18px!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools #vchat-attach::before { content:'＋'!important; }
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools #vchat-emoji::before { content:'☺'!important; }
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools #vchat-schedule-message::before { content:'◷'!important; }
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools #vchat-saved-reply::before { content:'/'!important; font-size:18px!important; }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools #vchat-record-audio {
    font-size:0!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools #vchat-record-audio::after {
    content:'Audio'!important;
    display:block!important;
    color:#6556cf!important;
    font-size:9.5px!important;
    font-weight:780!important;
    line-height:1!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools #vchat-record-audio .vchat-mic-icon {
    display:block!important;
    flex:0 0 18px!important;
    width:18px!important;
    min-width:18px!important;
    max-width:18px!important;
    height:18px!important;
    min-height:18px!important;
    max-height:18px!important;
    margin:0!important;
    color:#6556cf!important;
  }

  /* Saved reply is the only original label too long for the compact rail. */
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools #vchat-saved-reply {
    font-size:0!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools #vchat-saved-reply::after {
    content:'Respuestas'!important;
    display:block!important;
    max-width:100%!important;
    color:#6556cf!important;
    font-size:9.5px!important;
    font-weight:780!important;
    line-height:1!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools #vchat-saved-reply {
    margin-left:0!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools button:hover,
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools button:focus-visible {
    border-color:#d6cff7!important;
    background:#f4f1ff!important;
    color:#5748c4!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) auto!important;
    column-gap:8px!important;
    min-height:62px!important;
    padding:8px 9px!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-open-conversations {
    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-chat-person {
    grid-template-columns:40px minmax(0,1fr)!important;
    gap:7px!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-chat-person .vchat-avatar {
    width:40px!important;
    min-width:40px!important;
    max-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
    border-radius:13px!important;
    font-size:14px!important;
  }

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

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] #vchat-active-channel-pill {
    max-width:128px!important;
    padding-right:7px!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] #vchat-active-channel-pill #vchat-active-channel {
    max-width:86px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] #vchat-claim {
    min-width:72px!important;
    max-width:82px!important;
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
    padding:0 9px!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 {
    flex-basis:40px!important;
    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-composer-tools {
    gap:4px!important;
    min-height:48px!important;
    height:48px!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools #vchat-attach,
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools #vchat-record-audio,
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools #vchat-emoji,
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools #vchat-schedule-message,
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools #vchat-saved-reply {
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
    padding-inline:1px!important;
    font-size:9px!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools #vchat-record-audio::after,
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools #vchat-saved-reply::after {
    font-size:9px!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) auto!important;
    column-gap:6px!important;
    padding-inline:7px!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-chat-person {
    grid-template-columns:36px minmax(0,1fr)!important;
    gap:6px!important;
  }

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

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

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] #vchat-active-channel-pill {
    max-width:108px!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] #vchat-active-channel-pill #vchat-active-channel {
    max-width:68px!important;
    font-size:10px!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] #vchat-claim {
    min-width:64px!important;
    max-width:70px!important;
    padding-inline:7px!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;
    flex-basis:38px!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools #vchat-attach,
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools #vchat-record-audio,
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools #vchat-emoji,
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools #vchat-schedule-message,
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools #vchat-saved-reply {
    font-size:8.5px!important;
  }

  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools #vchat-record-audio::after,
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-shell[data-mobile-view="chat"] .vchat-composer-tools #vchat-saved-reply::after {
    font-size:8.5px!important;
  }
}