/* 0.53.1-alpha — Hard mobile vertical inbox layout rebuild. Desktop untouched. */
@media (max-width: 820px){
  html,body{overflow-x:hidden!important;}
  .vchat-frontend-app[data-section="inbox"],
  .vchat-frontend-app .vchat-inbox-section,
  .vchat-frontend-app .vchat-inbox-shell,
  .vchat-frontend-app .vchat-chat-panel{
    width:100%!important;
    max-width:100vw!important;
    min-width:0!important;
    overflow-x:hidden!important;
  }

  .vchat-frontend-app .vchat-chat-panel{
    grid-template-rows:auto auto auto minmax(0,1fr) auto!important;
  }

  /* Mobile header: compact real layout, no desktop leftovers. */
  .vchat-frontend-app .vchat-chat-head{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    display:grid!important;
    grid-template-columns:46px minmax(0,1fr)!important;
    grid-template-areas:
      "back person"
      "actions actions"!important;
    align-items:center!important;
    gap:8px 10px!important;
    padding:10px 12px 9px!important;
    margin:0!important;
    border-bottom:1px solid rgba(101,84,184,.13)!important;
    background:#fff!important;
    overflow:hidden!important;
  }
  .vchat-frontend-app .vchat-open-conversations{
    grid-area:back!important;
    display:grid!important;
    place-items:center!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    padding:0!important;
    border-radius:15px!important;
    flex:none!important;
  }
  .vchat-frontend-app .vchat-open-conversations b{display:none!important;}
  .vchat-frontend-app .vchat-open-conversations span{font-size:24px!important;line-height:1!important;}

  .vchat-frontend-app .vchat-chat-person{
    grid-area:person!important;
    display:grid!important;
    grid-template-columns:48px minmax(0,1fr)!important;
    align-items:center!important;
    gap:10px!important;
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
  }
  .vchat-frontend-app .vchat-chat-person .vchat-avatar,
  .vchat-frontend-app #vchat-active-avatar{
    display:grid!important;
    place-items:center!important;
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    max-width:48px!important;
    flex-basis:48px!important;
    border-radius:17px!important;
    font-size:16px!important;
    line-height:1!important;
  }
  .vchat-frontend-app .vchat-chat-person .vchat-avatar i,
  .vchat-frontend-app #vchat-active-avatar i{
    right:1px!important;
    bottom:4px!important;
    width:10px!important;
    height:10px!important;
  }
  .vchat-frontend-app .vchat-chat-person>div{
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
  }
  .vchat-frontend-app .vchat-chat-person strong,
  .vchat-frontend-app #vchat-active-name{
    display:block!important;
    max-width:100%!important;
    margin:0!important;
    font-size:22px!important;
    line-height:1.05!important;
    font-weight:860!important;
    letter-spacing:-.04em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .vchat-frontend-app .vchat-chat-person-meta{
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    margin-top:7px!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    white-space:nowrap!important;
  }
  .vchat-frontend-app .vchat-chat-person-meta #vchat-active-presence,
  .vchat-frontend-app .vchat-chat-person-meta .vchat-live-indicator{
    display:none!important;
  }
  .vchat-frontend-app .vchat-channel-pill{
    flex:0 0 auto!important;
    height:26px!important;
    padding:4px 10px 4px 4px!important;
    gap:7px!important;
    border-radius:999px!important;
  }
  .vchat-frontend-app .vchat-channel-pill i{
    min-width:28px!important;
    height:22px!important;
    border-radius:9px!important;
    font-size:9px!important;
  }
  .vchat-frontend-app .vchat-channel-pill b{
    display:inline!important;
    font-size:13px!important;
    font-weight:850!important;
  }

  /* Header actions: compact, below identity, full use of width. */
  .vchat-frontend-app .vchat-chat-actions,
  .vchat-frontend-app .vchat-chat-actions-0518{
    grid-area:actions!important;
    display:grid!important;
    grid-template-columns:58px minmax(86px,1fr) 78px 58px!important;
    align-items:center!important;
    gap:7px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:2px 0 0!important;
    padding:0!important;
    overflow:visible!important;
    transform:none!important;
    position:relative!important;
    inset:auto!important;
  }
  .vchat-frontend-app .vchat-chat-actions button,
  .vchat-frontend-app .vchat-chat-actions-0518 button{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:38px!important;
    min-height:38px!important;
    max-height:38px!important;
    margin:0!important;
    padding:0 7px!important;
    border-radius:16px!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
    font-size:0!important;
    line-height:1!important;
    letter-spacing:0!important;
  }
  /* Kill every inherited pseudo/child icon that created duplicated info circles. */
  .vchat-frontend-app .vchat-chat-actions button > *,
  .vchat-frontend-app .vchat-chat-actions-0518 button > *,
  .vchat-frontend-app #vchat-open-contact span,
  .vchat-frontend-app #vchat-open-contact b,
  .vchat-frontend-app #vchat-open-contact .vchat-ui-icon{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
  }
  .vchat-frontend-app .vchat-chat-actions button::before,
  .vchat-frontend-app .vchat-chat-actions-0518 button::before,
  .vchat-frontend-app #vchat-open-contact::before,
  .vchat-frontend-app #vchat-open-contact span::before,
  .vchat-frontend-app #vchat-open-contact span::after{
    content:none!important;
    display:none!important;
  }
  .vchat-frontend-app .vchat-chat-actions button::after,
  .vchat-frontend-app .vchat-chat-actions-0518 button::after{
    display:block!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    color:inherit!important;
    font-size:12px!important;
    font-weight:820!important;
    line-height:1!important;
  }
  .vchat-frontend-app #vchat-open-contact::after{content:'Info'!important;}
  .vchat-frontend-app #vchat-claim::after{content:'Atender'!important;}
  .vchat-frontend-app #vchat-resolve::after{content:'Resolver'!important;}
  .vchat-frontend-app #vchat-more::after{content:'Más'!important;}
  .vchat-frontend-app #vchat-claim{
    background:#6651c8!important;
    border-color:#6651c8!important;
    color:#fff!important;
    box-shadow:0 10px 22px rgba(101,84,184,.18)!important;
  }

  /* Reply + quick actions: no empty bubbles; use a mobile grid. */
  .vchat-frontend-app .vchat-chat-toolbar,
  .vchat-frontend-app .vchat-chat-toolbar-0518{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:10px 12px 9px!important;
    width:100%!important;
    max-width:100vw!important;
    border-bottom:1px solid rgba(101,84,184,.13)!important;
    overflow:hidden!important;
    background:#fff!important;
  }
  .vchat-frontend-app .vchat-reply-mode{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:4px!important;
    width:100%!important;
    min-width:0!important;
    height:42px!important;
    padding:4px!important;
    border-radius:18px!important;
  }
  .vchat-frontend-app .vchat-reply-mode button{
    height:34px!important;
    min-height:34px!important;
    padding:0 8px!important;
    border-radius:14px!important;
    font-size:13px!important;
    line-height:1!important;
  }
  .vchat-frontend-app .vchat-chat-quick-actions,
  .vchat-frontend-app .vchat-chat-quick-actions-0518{
    display:grid!important;
    grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,.95fr)!important;
    gap:7px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    white-space:normal!important;
  }
  .vchat-frontend-app .vchat-chat-quick-actions button,
  .vchat-frontend-app .vchat-chat-quick-actions-0518 button{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:37px!important;
    min-height:37px!important;
    margin:0!important;
    padding:0 8px!important;
    border-radius:16px!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
    font-size:0!important;
    line-height:1!important;
  }
  .vchat-frontend-app .vchat-chat-quick-actions button > *,
  .vchat-frontend-app .vchat-chat-quick-actions-0518 button > *{
    display:none!important;
  }
  .vchat-frontend-app .vchat-chat-quick-actions button::before,
  .vchat-frontend-app .vchat-chat-quick-actions-0518 button::before{
    content:none!important;
    display:none!important;
  }
  .vchat-frontend-app .vchat-chat-quick-actions button::after,
  .vchat-frontend-app .vchat-chat-quick-actions-0518 button::after{
    display:block!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    color:inherit!important;
    font-size:12px!important;
    font-weight:820!important;
    line-height:1!important;
  }
  .vchat-frontend-app #vchat-pipeline-from-chat::after{content:'Etapa'!important;}
  .vchat-frontend-app #vchat-pipeline-from-chat b#vchat-chat-pipeline-label{display:none!important;}
  .vchat-frontend-app #vchat-task-from-chat::after{content:'Tarea'!important;}
  .vchat-frontend-app #vchat-booking-from-chat::after{content:'Reserva'!important;}
  .vchat-frontend-app #vchat-summary::after{content:'Resumen'!important;}
  .vchat-frontend-app .vchat-chat-quick-actions button:empty,
  .vchat-frontend-app .vchat-chat-quick-actions-0518 button:empty{display:flex!important;}

  .vchat-frontend-app .vchat-sla-bar{
    padding:8px 12px!important;
    gap:7px!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
  }
  .vchat-frontend-app .vchat-sla-item{
    flex:0 0 auto!important;
    height:32px!important;
    padding:5px 9px!important;
    border-radius:14px!important;
  }
  .vchat-frontend-app .vchat-sla-item small{font-size:8px!important;}
  .vchat-frontend-app .vchat-sla-item strong{font-size:10px!important;}
}

@media (max-width: 430px){
  .vchat-frontend-app .vchat-chat-person strong,
  .vchat-frontend-app #vchat-active-name{font-size:20px!important;}
  .vchat-frontend-app .vchat-chat-actions,
  .vchat-frontend-app .vchat-chat-actions-0518{
    grid-template-columns:50px minmax(68px,1fr) 70px 52px!important;
    gap:6px!important;
  }
  .vchat-frontend-app .vchat-chat-actions button,
  .vchat-frontend-app .vchat-chat-actions-0518 button{height:36px!important;border-radius:15px!important;padding:0 4px!important;}
  .vchat-frontend-app .vchat-chat-actions button::after,
  .vchat-frontend-app .vchat-chat-actions-0518 button::after{font-size:11px!important;}
  .vchat-frontend-app .vchat-chat-quick-actions,
  .vchat-frontend-app .vchat-chat-quick-actions-0518{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .vchat-frontend-app .vchat-chat-quick-actions button,
  .vchat-frontend-app .vchat-chat-quick-actions-0518 button{height:36px!important;padding:0 5px!important;}
  .vchat-frontend-app .vchat-chat-quick-actions button::after,
  .vchat-frontend-app .vchat-chat-quick-actions-0518 button::after{font-size:11px!important;}
}

@media (max-width: 360px){
  .vchat-frontend-app .vchat-chat-person strong,
  .vchat-frontend-app #vchat-active-name{font-size:18px!important;}
  .vchat-frontend-app .vchat-channel-pill b{display:none!important;}
  .vchat-frontend-app .vchat-chat-actions,
  .vchat-frontend-app .vchat-chat-actions-0518{grid-template-columns:46px minmax(58px,1fr) 60px 48px!important;}
  .vchat-frontend-app #vchat-resolve::after{content:'OK'!important;}
}