/* RBS Desk v1.8.11 — Sprint 14
   Mobile Premium Layout Contract
   Objetivo: nenhum botão, campo, badge, toolbar ou cabeçalho pode colidir,
   invadir outro componente ou provocar overflow horizontal em telas móveis. */

/* Guardrails globais: componentes sempre podem encolher dentro de flex/grid. */
:where(.page,.card,.section,.ow-page,.ow-main,.ow-workspace,.ow-center,.ow-inbox,.ow-context,
       .v186-portal-home,.v186-portal-ticket,.v186-customer360,.s14g-customers-page,
       .mg12-page,.omni-page,.i13-page,.r14-page,.kb-page,.v187-client-page) * {
  min-width:0;
}
img,video,canvas,svg{max-width:100%}

@media(max-width:760px){
  html,body,#app{width:100%;max-width:100%;overflow-x:hidden}
  body{min-width:0}

  /* Tipografia e conteúdo nunca estouram o card. */
  :where(h1,h2,h3,h4,p,strong,b,small,span,label,em,a,.ticket-title,.ow-page-title,.v186-customer-title,
         .v189-tree-title,.v189-tree-meta,.s14g-timeline-item,.mg12-card,.omni-connection-card,
         .i13-card,.r14-section,.kb-card){
    overflow-wrap:anywhere;
    word-break:normal;
  }

  /* Campos móveis: uma coluna real, 100% do container e alvo de toque confortável. */
  :where(input,textarea,select){max-width:100%;min-width:0}
  :where(.field input,.field textarea,.field select,.filter-row input,.filter-row select,
         .ow-filterbar input,.ow-filterbar select,.mg12-filter-grid input,.mg12-filter-grid select,
         .mg12-goal-grid input,.i13-form-grid input,.i13-form-grid select,.i13-form-grid textarea,
         .omni-form-grid input,.omni-form-grid select,.omni-form-grid textarea,
         .v189-param-search input,.v189-param-category-select select){
    width:100%!important;
    min-height:44px;
    box-sizing:border-box;
  }
  textarea{font-size:16px!important}
  select,input{font-size:max(16px,1em)}

  /* Botões: sem nowrap forçado, sem largura fantasma e sem colisão. */
  :where(.btn,.rbs-ui-btn){
    min-height:44px;
    max-width:100%;
    white-space:normal!important;
    line-height:1.2;
    text-align:center;
    overflow-wrap:anywhere;
  }
  :where(.iconbtn,.rbs-ui-icon-btn,.ow-top-actions>button,.cw-head-btn,.ow-mobile-chat-back button){
    white-space:nowrap!important;
    overflow-wrap:normal;
    flex:0 0 auto;
  }

  /* Cabeçalhos e heróis: texto primeiro, ações em faixa própria. */
  :where(.page-head,.section-head,.kb-page-head,.omni-page-head,.i13-head,.r14-head,.mg12-head,
         .ow-central-head,.ow-ticket-toolbar,.ow-customer-hero,.v155-profile-hero,.v187-param-hero,
         .v189-staff-head,.v189-conversation-head,.v189-reply-head,.portal-section-head){
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-items:start!important;
    gap:10px!important;
    width:100%;
  }
  :where(.page-head>*,.section-head>*,.kb-page-head>*,.omni-page-head>*,.i13-head>*,.r14-head>*,
         .mg12-head>*,.ow-central-head>*,.ow-ticket-toolbar>*,.ow-customer-hero>*,.v155-profile-hero>*,
         .v187-param-hero>*,.v189-staff-head>*,.v189-conversation-head>*,.v189-reply-head>*){max-width:100%}

  /* Ações: grade fluida premium; nunca mais uma fileira espremida. */
  :where(.toolbar,.topbar-actions,.actions,.comm-actions,.context-actions2,.composer-actions,
         .modal-actions,.mg12-head-actions,.mg12-export-actions,.omni-head-actions,.i13-actions,
         .i13-doc-actions,.s11-card-actions,.s11-run-actions,.s14-secondary-actions,.s14g-note-actions,
         .v155-profile-actions,.v186-hero-actions,.v187-param-hero-actions,.v188-tree-actions,
         .v189-param-head-actions,.v189-secondary-actions,.ws-ticket-actions,.portal-wizard-actions,
         .prod-quick-actions){
    width:100%;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px!important;
    align-items:stretch!important;
    justify-content:stretch!important;
  }
  :where(.toolbar,.topbar-actions,.actions,.comm-actions,.context-actions2,.composer-actions,
         .modal-actions,.mg12-head-actions,.mg12-export-actions,.omni-head-actions,.i13-actions,
         .i13-doc-actions,.s11-card-actions,.s11-run-actions,.s14-secondary-actions,.s14g-note-actions,
         .v155-profile-actions,.v186-hero-actions,.v187-param-hero-actions,.v188-tree-actions,
         .v189-param-head-actions,.v189-secondary-actions,.ws-ticket-actions,.portal-wizard-actions,
         .prod-quick-actions) > :where(button,.btn,.rbs-ui-btn,select){
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    justify-content:center;
  }

  /* Filtros: uma coluna, sem select disputando largura com busca. */
  :where(.filter-row,.ow-filterbar,.v188-ow-filterbar,.v189-filterbar,.ws-queue-filters,
         .v187-filter-card,.service-filter,.mg12-filter-grid,.i13-form-grid,.omni-form-grid,
         .form-grid2,.switch-grid){
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
  }
  :where(.ow-filterbar>div,.v188-ow-filterbar>div,.v189-filterbar>div){width:100%;min-width:0}

  /* Toolbars operacionais principais. */
  .ow-central-actions,.ow-ticket-tools,.ow-customer-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
  }
  .ow-ticket-tools>select{width:100%!important;max-width:none!important}

  /* Chamado staff: controles de status/prioridade e ações sem atropelo. */
  .v189-ticket-actionbar{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    align-items:stretch!important;
  }
  .v189-ticket-actionbar>*{min-width:0!important;max-width:100%!important}
  .v189-action-select{min-width:0!important;width:100%!important}
  .v189-action-select select{width:100%!important;min-height:44px}
  .v189-ticket-actionbar>.rbs-ui-btn{width:100%!important}
  .v189-head-tags,.v189-status-flags,.tags{display:flex;flex-wrap:wrap;gap:6px;max-width:100%}
  .v189-head-tags>*{max-width:100%}
  .v189-responsible-card{width:100%!important;min-width:0!important}

  /* Cliente 360 / perfis: ações e métricas não invadem título nem avatar. */
  .v186-customer360 .ow-customer-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .v186-customer360 .ow-customer-metrics{gap:8px!important}
  .s14g-customer-card,.ow-customer-card,.v189-client-ticket,.v186-ticket-card{max-width:100%;overflow:hidden}
  .s14g-customer-card footer{min-width:0}
  .v155-avatar-editor{width:100%;grid-template-columns:auto minmax(0,1fr)!important}
  .v155-profile-actions{justify-content:stretch!important}

  /* Portal do cliente: hero e atalhos priorizam leitura e toque. */
  .v186-portal-hero{grid-template-columns:minmax(0,1fr)!important}
  .v186-hero-copy{min-width:0}
  .v186-portal-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .v186-portal-shortcuts>button{min-width:0;max-width:100%;overflow:hidden}
  .portal-next-action{max-width:100%;overflow:hidden}

  /* Administração / parâmetros / integrações / automações. */
  .admin-quick-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .v187-param-tools,.v187-param-context .param-context,.v187-param-card,.v189-param-row,
  .i13-grid,.i13-health-grid,.omni-admin-grid,.omni-env-grid,.s11-run-grid,.s11-quality-grid,
  .r14-grid.two,.r14-grid.three{grid-template-columns:minmax(0,1fr)!important}
  .v187-param-control{width:100%;min-width:0}
  .v187-current-value{max-width:100%!important;overflow-wrap:anywhere}
  .i13-head-kpis{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .i13-head-kpis>div{min-width:0!important}

  /* Analytics/BI: painéis refluem, tabelas continuam navegáveis sem invadir o viewport. */
  .mg12-kpis,.mg12-mini-grid,.mg12-compare-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .mg12-grid-2,.mg12-grid-3,.mg12-hub,.mg12-widget-grid,.mg12-goal-grid{grid-template-columns:minmax(0,1fr)!important}
  .mg12-card-head{display:grid!important;grid-template-columns:minmax(0,1fr);gap:8px}
  .mg12-row{grid-template-columns:minmax(0,1fr)!important;gap:7px}
  .mg12-row-kpis{justify-content:flex-start!important}
  .mg12-table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Chat/omnichannel: cabeçalho e ações não comprimem nome do cliente. */
  .ow-chat-head{min-width:0}
  .ow-chat-title{min-width:0;overflow:hidden}
  .ow-chat-title>div,.ow-chat-title>div>strong{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ow-chat-head-actions{display:flex;gap:5px;flex:0 0 auto;min-width:0}
  .omni-top-grid,.omni-template-param-grid{grid-template-columns:minmax(0,1fr)!important}
  .omni-head-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .omni-connection-card{min-width:0;max-width:100%;overflow:hidden}

  /* Modais e sheets: sempre dentro da viewport + safe areas. */
  .modal-shell{padding:calc(env(safe-area-inset-top) + 10px) 10px calc(env(safe-area-inset-bottom) + 10px)!important;overflow:auto}
  .modal-card{
    width:100%!important;
    max-width:calc(100vw - 20px)!important;
    max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px)!important;
    overflow:auto!important;
    border-radius:20px!important;
  }
  .modal-actions{position:sticky;bottom:-16px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 24%);padding-top:16px;padding-bottom:2px;z-index:2}

  /* Listas que possuem metadados laterais: metadados quebram para baixo, não espremem texto. */
  .ticket-row,.admin-item,.check,.comm-row,.notify-row,.pref-row,.presence-row,.mg-row{
    min-width:0;
    max-width:100%;
  }
  .ticket-row{grid-template-columns:minmax(0,1fr)!important}
  .ticket-row>.ticket-no,.ticket-row>.status{justify-self:start}
  .message header{flex-wrap:wrap;align-items:flex-start}
  .message header span{white-space:normal;text-align:left}

  /* Containers horizontais permitidos somente onde fazem sentido: tabs/chips/tabelas. */
  :where(.ow-tabs-scroll,.ow-inbox-tabs,.queue-tabs2,.r14-tabs,.i13-tabs,.mg12-dim-tabs,.v187-param-cats){
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  :where(.ow-tabs-scroll,.ow-inbox-tabs,.queue-tabs2,.r14-tabs,.i13-tabs,.mg12-dim-tabs,.v187-param-cats)::-webkit-scrollbar{display:none}

  /* Paddings móveis consistentes: conteúdo respira sem desperdiçar área útil. */
  .ow-page{padding:10px!important}
  :where(.card,.mg12-card,.r14-section,.v187-more-card){max-width:100%}
}

@media(max-width:430px){
  /* Em iPhones estreitos, ações textuais viram uma coluna quando duas colunas perderiam legibilidade. */
  :where(.toolbar,.topbar-actions,.actions,.comm-actions,.context-actions2,.composer-actions,
         .modal-actions,.mg12-head-actions,.mg12-export-actions,.omni-head-actions,.i13-actions,
         .i13-doc-actions,.s11-card-actions,.s11-run-actions,.s14-secondary-actions,.s14g-note-actions,
         .v155-profile-actions,.v187-param-hero-actions,.v189-param-head-actions,.v189-secondary-actions,
         .ws-ticket-actions,.portal-wizard-actions,.prod-quick-actions){grid-template-columns:minmax(0,1fr)!important}

  .ow-central-actions,.ow-ticket-tools,.ow-customer-actions,.v189-ticket-actionbar,
  .v186-customer360 .ow-customer-actions,.omni-head-actions{grid-template-columns:minmax(0,1fr)!important}

  /* Mantém somente pares compactos realmente úteis em duas colunas. */
  .v186-hero-actions,.v188-tree-actions,.admin-quick-row,.mg12-kpis,.mg12-mini-grid,.mg12-compare-grid,
  .i13-head-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  .v186-portal-shortcuts{grid-template-columns:minmax(0,1fr)!important}
  .v186-customer360 .ow-customer-metrics{grid-template-columns:minmax(0,1fr)!important}
  .s14g-customer-card footer{grid-template-columns:minmax(0,1fr)!important}
  .s14g-customer-card footer span{text-align:left!important}

  .page-head h1,.ow-central-head h1{font-size:clamp(22px,7vw,28px)!important}
  .v189-staff-head h1,.v186-ticket-head h1{font-size:clamp(21px,6.5vw,27px)!important}
}

@media(min-width:761px) and (max-width:1023px){
  /* Tablet / mobile landscape: impede colisões antes do breakpoint desktop. */
  :where(.page-head,.section-head,.ow-ticket-toolbar,.ow-customer-hero,.mg12-head,.i13-head,.omni-page-head){
    flex-wrap:wrap;
  }
  :where(.toolbar,.topbar-actions,.ow-ticket-tools,.ow-central-actions,.ow-customer-actions,.mg12-head-actions,
         .i13-actions,.omni-head-actions,.v189-ticket-actionbar){flex-wrap:wrap!important}
  :where(.btn,.rbs-ui-btn,input,select,textarea){max-width:100%;min-width:0}
  .v189-action-select{min-width:180px;flex:1 1 180px}
}

@media(max-width:430px){
  /* Header operacional: libera largura para aba e ações no iPhone sem perder identidade visual. */
  .ow-mobile-brand strong{display:none!important}
  .ow-mobile-brand{gap:0!important}
  .ow-tabs-scroll .ow-tab{min-width:82px!important;max-width:136px!important}
  .ow-tab-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ow-top-actions{min-width:0}
  .ow-top-actions>button{flex:0 0 31px}
  .ow-mobile-nav button>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* Consulta histórica: nome do cliente é prioritário; estado permanece legível sem esmagar o header. */
  .v186-chat-history-head{height:auto!important;min-height:62px!important;padding:7px 8px!important;align-items:center!important}
  .v186-chat-history-head .ow-chat-title>small{font-size:9px!important;white-space:normal!important;line-height:1.15}
  .v186-chat-history-head .v186-history-pill{padding:6px 8px;font-size:9px;max-width:92px;text-align:center;white-space:normal;line-height:1.1}
}

@media(max-width:760px){
  /* A topbar legada é uma exceção: controles compactos permanecem lado a lado. */
  .topbar-actions{
    display:flex!important;
    width:auto!important;
    flex:0 0 auto;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:6px!important;
  }
  .topbar-actions>button{width:auto!important;min-width:40px!important;max-width:44px!important;padding-inline:8px!important}
  .topbar-actions .density-toggle b,.topbar-actions .nav-global-trigger b,.topbar-actions .nav-global-trigger kbd{display:none!important}

  .composer-actions>div{display:flex;flex-wrap:wrap;gap:7px;min-width:0}
  .composer-actions>div>.btn{flex:1 1 130px}

  /* Textos que antigas versões mantinham em nowrap passam a quebrar dentro do próprio componente. */
  .v187-current-value,.omni-connection-card header p,.omni-webhook code,.v189-owner-flag b,
  .s14g-customer-card h3,.s14g-customer-card p,.s14g-customer-card small{
    white-space:normal!important;
    overflow-wrap:anywhere;
  }
  .omni-webhook code{display:block;max-width:100%}
}