/* 0.53.4-alpha — Mobile conversation header: true single-row actions. Desktop untouched. */
@media (max-width: 820px){
  html.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-head,
  body.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-head{
    position:relative!important;
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr)!important;
    grid-template-areas:"back person"!important;
    align-items:center!important;
    gap:8px!important;
    min-height:70px!important;
    height:auto!important;
    max-height:78px!important;
    padding:8px 10px!important;
    overflow:hidden!important;
    border-bottom:1px solid #ebe6f6!important;
    background:#fff!important;
  }

  html.vchat-mobile-portrait .vchat-frontend-app .vchat-open-conversations,
  body.vchat-mobile-portrait .vchat-frontend-app .vchat-open-conversations{
    grid-area:back!important;
    align-self:center!important;
    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    max-height:38px!important;
    margin:0!important;
    padding:0!important;
    border-radius:14px!important;
  }
  html.vchat-mobile-portrait .vchat-frontend-app .vchat-open-conversations span,
  body.vchat-mobile-portrait .vchat-frontend-app .vchat-open-conversations span{font-size:22px!important;}

  html.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-person,
  body.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-person{
    grid-area:person!important;
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr)!important;
    align-items:center!important;
    gap:8px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    padding-right:174px!important;
    overflow:hidden!important;
  }
  html.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-person .vchat-avatar,
  html.vchat-mobile-portrait .vchat-frontend-app #vchat-active-avatar,
  body.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-person .vchat-avatar,
  body.vchat-mobile-portrait .vchat-frontend-app #vchat-active-avatar{
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    border-radius:15px!important;
    font-size:16px!important;
  }
  html.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-person strong,
  html.vchat-mobile-portrait .vchat-frontend-app #vchat-active-name,
  body.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-person strong,
  body.vchat-mobile-portrait .vchat-frontend-app #vchat-active-name{
    max-width:100%!important;
    font-size:19px!important;
    line-height:1.05!important;
    letter-spacing:-.035em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  html.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-person-meta,
  body.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-person-meta{
    margin-top:3px!important;
    gap:5px!important;
    overflow:hidden!important;
  }
  html.vchat-mobile-portrait .vchat-frontend-app .vchat-channel-pill,
  body.vchat-mobile-portrait .vchat-frontend-app .vchat-channel-pill{
    height:24px!important;
    min-height:24px!important;
    padding:0 7px!important;
    border-radius:12px!important;
    font-size:11px!important;
  }
  html.vchat-mobile-portrait .vchat-frontend-app .vchat-channel-pill i,
  body.vchat-mobile-portrait .vchat-frontend-app .vchat-channel-pill i{
    height:20px!important;
    min-width:28px!important;
    border-radius:9px!important;
    font-size:9px!important;
  }

  /* Move actions to the right of the name/channel, not below. */
  html.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-actions,
  html.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-actions-0518,
  body.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-actions,
  body.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-actions-0518{
    grid-area:unset!important;
    position:absolute!important;
    right:10px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:5px!important;
    width:auto!important;
    max-width:170px!important;
    min-width:0!important;
    height:30px!important;
    min-height:30px!important;
    max-height:30px!important;
    padding:0!important;
    margin:0!important;
    overflow:visible!important;
    z-index:4!important;
  }
  html.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-actions button,
  html.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-actions-0518 button,
  body.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-actions button,
  body.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-actions-0518 button{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
    height:30px!important;
    min-height:30px!important;
    max-height:30px!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    border:1px solid #ded6ef!important;
    border-radius:14px!important;
    background:#fff!important;
    color:#6651c8!important;
    box-shadow:none!important;
    font-size:0!important;
    line-height:1!important;
    letter-spacing:0!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:clip!important;
  }
  html.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-actions button > *,
  html.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-actions-0518 button > *,
  body.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-actions button > *,
  body.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-actions-0518 button > *{display:none!important;}
  html.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-actions button::before,
  html.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-actions-0518 button::before,
  body.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-actions button::before,
  body.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-actions-0518 button::before{content:none!important;display:none!important;}
  html.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-actions button::after,
  html.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-actions-0518 button::after,
  body.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-actions button::after,
  body.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-actions-0518 button::after{
    display:block!important;
    font-size:11px!important;
    font-weight:850!important;
    line-height:1!important;
    letter-spacing:-.01em!important;
    white-space:nowrap!important;
  }
  html.vchat-mobile-portrait .vchat-frontend-app #vchat-open-contact,
  body.vchat-mobile-portrait .vchat-frontend-app #vchat-open-contact{width:38px!important;min-width:38px!important;max-width:38px!important;}
  html.vchat-mobile-portrait .vchat-frontend-app #vchat-open-contact::after,
  body.vchat-mobile-portrait .vchat-frontend-app #vchat-open-contact::after{content:'Info'!important;}
  html.vchat-mobile-portrait .vchat-frontend-app #vchat-resolve,
  body.vchat-mobile-portrait .vchat-frontend-app #vchat-resolve{width:64px!important;min-width:64px!important;max-width:64px!important;}
  html.vchat-mobile-portrait .vchat-frontend-app #vchat-resolve::after,
  body.vchat-mobile-portrait .vchat-frontend-app #vchat-resolve::after{content:'Resolver'!important;}
  html.vchat-mobile-portrait .vchat-frontend-app #vchat-more,
  body.vchat-mobile-portrait .vchat-frontend-app #vchat-more{width:42px!important;min-width:42px!important;max-width:42px!important;}
  html.vchat-mobile-portrait .vchat-frontend-app #vchat-more::after,
  body.vchat-mobile-portrait .vchat-frontend-app #vchat-more::after{content:'Más'!important;}
  html.vchat-mobile-portrait .vchat-frontend-app #vchat-claim,
  body.vchat-mobile-portrait .vchat-frontend-app #vchat-claim{
    width:58px!important;min-width:58px!important;max-width:58px!important;
    background:#6651c8!important;border-color:#6651c8!important;color:#fff!important;
  }
  html.vchat-mobile-portrait .vchat-frontend-app #vchat-claim::after,
  body.vchat-mobile-portrait .vchat-frontend-app #vchat-claim::after{content:'Atender'!important;}

  /* If four buttons are present, use ultra-compact labels so they still fit. */
  html.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-actions:has(#vchat-claim),
  body.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-actions:has(#vchat-claim){max-width:205px!important;}
  html.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-actions:has(#vchat-claim) + *,
  body.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-actions:has(#vchat-claim) + *{min-width:0!important;}

  /* Make the human attention strip compact instead of a big card. */
  html.vchat-mobile-portrait .vchat-frontend-app .vchat-conversation-context,
  html.vchat-mobile-portrait .vchat-frontend-app .vchat-conversation-context-dock,
  body.vchat-mobile-portrait .vchat-frontend-app .vchat-conversation-context,
  body.vchat-mobile-portrait .vchat-frontend-app .vchat-conversation-context-dock{
    padding:5px 10px!important;
  }
  html.vchat-mobile-portrait .vchat-frontend-app .vchat-conversation-context-grid,
  body.vchat-mobile-portrait .vchat-frontend-app .vchat-conversation-context-grid{
    display:block!important;
  }
  html.vchat-mobile-portrait .vchat-frontend-app .vchat-conversation-context-grid article[data-context-kind="handoff"],
  body.vchat-mobile-portrait .vchat-frontend-app .vchat-conversation-context-grid article[data-context-kind="handoff"]{
    display:grid!important;
    grid-template-columns:28px minmax(0,1fr)!important;
    align-items:center!important;
    gap:8px!important;
    min-height:34px!important;
    height:34px!important;
    padding:4px 10px!important;
    border-radius:14px!important;
    overflow:hidden!important;
  }
  html.vchat-mobile-portrait .vchat-frontend-app .vchat-conversation-context-grid article[data-context-kind="handoff"] > span,
  body.vchat-mobile-portrait .vchat-frontend-app .vchat-conversation-context-grid article[data-context-kind="handoff"] > span{
    width:28px!important;height:28px!important;min-width:28px!important;border-radius:10px!important;font-size:15px!important;
  }
  html.vchat-mobile-portrait .vchat-frontend-app .vchat-conversation-context-grid article[data-context-kind="handoff"] small,
  body.vchat-mobile-portrait .vchat-frontend-app .vchat-conversation-context-grid article[data-context-kind="handoff"] small{display:none!important;}
  html.vchat-mobile-portrait .vchat-frontend-app #vchat-context-handoff-title,
  body.vchat-mobile-portrait .vchat-frontend-app #vchat-context-handoff-title{
    display:block!important;
    font-size:12px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  html.vchat-mobile-portrait .vchat-frontend-app #vchat-context-handoff-title::before,
  body.vchat-mobile-portrait .vchat-frontend-app #vchat-context-handoff-title::before{
    content:'Humano · '!important;
    font-weight:800!important;
  }
  html.vchat-mobile-portrait .vchat-frontend-app #vchat-context-handoff-meta,
  body.vchat-mobile-portrait .vchat-frontend-app #vchat-context-handoff-meta{display:none!important;}

  /* Reduce next toolbars so the chat area gets priority. */
  html.vchat-mobile-portrait .vchat-frontend-app .vchat-reply-tabs,
  body.vchat-mobile-portrait .vchat-frontend-app .vchat-reply-tabs{padding:6px 10px!important;}
  html.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-actions-row,
  html.vchat-mobile-portrait .vchat-frontend-app .vchat-conversation-command-bar,
  body.vchat-mobile-portrait .vchat-frontend-app .vchat-chat-actions-row,
  body.vchat-mobile-portrait .vchat-frontend-app .vchat-conversation-command-bar{padding:5px 10px!important;}
}
