/* ============================================================
   XINGUZINHO_MOBILE_ATENDIMENTO_V4
   Composer integrado ao card + safe-area corrigida
   ============================================================ */

@media (max-width:820px) {

  /*
   * A tela de atendimento não começa mais atrás do relógio /
   * Dynamic Island do iPhone.
   */
  body.xmob-atendimento-aberto .main {
    padding-top:
      calc(
        74px +
        env(safe-area-inset-top)
      ) !important;

    padding-bottom:
      calc(
        92px +
        env(safe-area-inset-bottom)
      ) !important;
  }


  /*
   * O composer deixa de flutuar sobre as mensagens.
   * Agora ele pertence ao fluxo normal da tela, logo abaixo do chat.
   */
  .xmob-composer {
    position:relative !important;
    bottom:auto !important;
    left:auto !important;
    right:auto !important;
    z-index:2 !important;

    margin:
      10px
      0
      0 !important;

    padding:
      8px !important;

    border:
      1px solid
      var(--tema-borda,#2a3953) !important;

    border-radius:
      14px !important;

    background:
      var(--tema-card,#111827) !important;

    backdrop-filter:none !important;

    box-shadow:
      none !important;
  }


  /*
   * O campo fica com mais espaço e não parece uma barra "solta".
   */
  #chatInput.xmob-chat-input {
    min-width:0 !important;
    width:100% !important;
  }


  /*
   * O chat passa a reservar a altura dele normalmente.
   * Não fica escondido atrás do composer.
   */
  #chatMensagens.xmob-chat {
    height:
      min(
        54dvh,
        580px
      ) !important;

    margin-bottom:
      0 !important;

    scroll-padding-bottom:
      18px;
  }


  /*
   * Botão "ir para o fim" deixa de ficar preso à viewport.
   * Ele fica relacionado ao próprio painel do atendimento.
   */
  .xmob-atendimento-panel {
    position:relative !important;
  }


  .xmob-scroll-bottom {
    position:absolute !important;

    right:
      18px !important;

    bottom:
      84px !important;

    z-index:
      8 !important;
  }


  /*
   * Barra inferior continua fixa, mas visualmente separada
   * do campo de mensagem.
   */
  body.xmob-atendimento-aberto
  .xv5-mobile-dock {
    z-index:
      100 !important;

    box-shadow:
      0 10px 26px
      rgba(0,0,0,.22) !important;
  }


  /*
   * Mais respiro entre as ações e a conversa.
   */
  .xmob-acoes-atendimento {
    margin-bottom:
      14px !important;
  }


  /*
   * Evita que o primeiro card fique encostado demais no topo
   * em modo PWA / standalone.
   */
  html.xv5-pwa-standalone
  body.xmob-atendimento-aberto
  .xmob-atendimento-panel {
    margin-top:
      4px !important;
  }


  /*
   * No modo focado, só destaca a borda. Não desloca nem flutua.
   */
  .xmob-composer.focused {
    transform:none !important;

    border-color:
      rgba(37,99,235,.72) !important;

    box-shadow:
      0 0 0 2px
      rgba(37,99,235,.10) !important;
  }
}


/* Celulares estreitos */
@media (max-width:390px) {

  .xmob-composer {
    grid-template-columns:
      36px
      36px
      36px
      minmax(0,1fr)
      42px !important;

    gap:
      5px !important;

    padding:
      6px !important;
  }
}


/* XINGUZINHO_MOBILE_VISUAL_V5 — conversa focada e layouts sem cortes. */
@media (max-width:820px), (max-width:1024px) and (pointer:coarse) {
  .main, .main > *, .main .panel, .main .topbar > * { min-width:0; max-width:100%; }
  .main { scroll-padding-bottom:100px; }
  .main .topbar { gap:12px; flex-wrap:wrap; align-items:flex-start; }
  .main .topbar h2 { font-size:21px; line-height:1.25; overflow-wrap:anywhere; }
  .main .topbar span, .main .ticket-meta, .main .user-info, .main p,
  .main .ticket strong, .main .ticket-title { overflow-wrap:anywhere; }
  .main .ticket, .main .ticket > *, .main .stat, .main .x-adm-card > *,
  .main .xt-colab-texto, .main .xt-colab-item > * { min-width:0; }
  .main .panel { border-radius:16px; }
  .main .panel-header { gap:8px; flex-wrap:wrap; overflow-wrap:anywhere; }
  .main button { min-height:42px; max-width:100%; white-space:normal; }
  .main input:not([type="checkbox"]):not([type="radio"]), .main select, .main textarea {
    min-width:0; max-width:100%; font-size:16px;
  }
  .main .xmobile-form-grid { grid-template-columns:minmax(0,1fr) !important; }
  .main .xmobile-form-grid > * { min-width:0 !important; max-width:100% !important; grid-column:auto !important; }
  .main .xmobile-form-row { flex-wrap:wrap !important; gap:10px !important; }
  .main .xmobile-form-row > input, .main .xmobile-form-row > select,
  .main .xmobile-form-row > label { flex:1 1 170px !important; min-width:0 !important; max-width:100% !important; }
  .main .xmobile-form-row > button { flex:0 1 auto; }
  #cabecalhoContexto { padding:15px; gap:12px; border-radius:18px; }
  #cabecalhoContexto h2 { font-size:19px; line-height:1.3; overflow-wrap:anywhere; }
  #cabecalhoContexto .cabecalho-contexto-acoes {
    display:flex; flex-wrap:wrap; gap:7px; width:100%; min-width:0; justify-content:flex-start;
  }
  #cabecalhoContexto .cabecalho-contexto-acoes > button,
  #cabecalhoContexto .cabecalho-contexto-acoes > .xinguzinho-notif-wrap {
    flex:0 0 42px; min-width:0; margin:0; max-width:42px;
  }
  #cabecalhoContexto .cabecalho-contexto-acoes button { width:42px; min-width:0; min-height:44px; padding:0; border-radius:13px; }
  #cabecalhoContexto .cabecalho-contexto-setor {
    flex:1 0 100%; max-width:100%; min-width:0; width:auto;
    white-space:normal; overflow:visible; overflow-wrap:anywhere; text-align:left; padding:8px 10px;
  }
  #cabecalhoContexto .tema-toggle-texto,
  #cabecalhoContexto .xinguzinho-push-button span { display:none; }
  .xmobile-table-scroll {
    width:100%; max-width:100%; min-width:0; overflow-x:auto; overscroll-behavior-x:contain;
    scrollbar-width:thin; border-radius:12px; -webkit-overflow-scrolling:touch;
  }
  .xmobile-table-scroll:focus-visible { outline:2px solid #60a5fa; outline-offset:2px; }
  .xmobile-table-scroll.has-overflow::before {
    content:'↔ Deslize para ver todas as colunas'; display:block; position:sticky; left:0;
    width:100%; padding:8px 10px; font-size:11px; color:var(--tema-secundario,#64748b);
    background:var(--tema-card-2,#f1f5f9);
  }
  .main .xmobile-table-scroll table { min-width:560px; max-width:none; }
  .main .xmobile-table-scroll th, .main .xmobile-table-scroll td { white-space:normal; overflow-wrap:anywhere; }
  .xmobile-modal-overlay { padding:10px !important; }
  .xmobile-modal-overlay > :first-child {
    min-width:0 !important; max-width:100% !important; max-height:calc(var(--xmobile-viewport-height,100dvh) - 20px) !important;
    overflow-y:auto; overscroll-behavior:contain;
  }
  .xmobile-modal-overlay input, .xmobile-modal-overlay select, .xmobile-modal-overlay textarea { min-width:0; max-width:100%; font-size:16px; }
  .xmobile-modal-overlay .xmobile-form-grid { grid-template-columns:minmax(0,1fr) !important; }
  .xmobile-modal-overlay .xmobile-form-grid > * { min-width:0 !important; max-width:100% !important; grid-column:auto !important; }
  .xmobile-modal-overlay .xmobile-form-row { flex-wrap:wrap !important; }
  .main .xt-colab-texto strong, .main .xt-colab-texto small, .main .x-adm-multi-item span {
    white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere;
  }

  /* A conversa ocupa a altura disponível. Só mensagens rolam; o campo fica visível. */
  body.xmob-atendimento-aberto { padding-bottom:0 !important; }
  body.xmob-atendimento-aberto .main {
    position:fixed; top:var(--xmobile-viewport-top,0px); left:0; right:0; z-index:1;
    height:var(--xmobile-viewport-height,100dvh) !important; min-height:0 !important;
    display:flex; flex-direction:column; overflow:hidden;
    padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom) !important;
    background:var(--tema-card,#fff);
  }
  body.xmob-atendimento-aberto .xv5-mobile-dock { display:none !important; }
  body.xmob-atendimento-aberto .xmob-atendimento-topbar {
    flex:none; min-height:56px; margin:0 !important; padding:8px 12px 8px 60px !important;
    grid-template-columns:auto minmax(0,1fr); gap:10px !important;
    border-bottom:1px solid var(--tema-borda,#e2e8f0); background:var(--tema-card,#fff);
  }
  body.xmob-atendimento-aberto .xmob-atendimento-topbar > div:last-child { overflow:visible; }
  body.xmob-atendimento-aberto .xmob-atendimento-topbar > div:last-child strong {
    white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere;
    border:0; padding:2px 0; background:transparent; font-size:10px;
  }
  body.xmob-atendimento-aberto .mobile-menu-toggle { top:calc(8px + env(safe-area-inset-top)) !important; }
  body.xmob-atendimento-aberto .xmob-atendimento-panel {
    flex:1; min-height:0; min-width:0; display:flex; flex-direction:column;
    border:0 !important; border-radius:0 !important; box-shadow:none;
  }
  body.xmob-atendimento-aberto .xmob-atendimento-panel > .panel-header { display:none; }
  body.xmob-atendimento-aberto .xmob-atendimento-conteudo {
    flex:1; min-height:0; display:flex; flex-direction:column; padding:0 !important;
  }
  body.xmob-atendimento-aberto .xmob-colaborador {
    flex:none; margin:0 !important; padding:12px 16px 4px; font-size:17px !important; line-height:1.35;
  }
  body.xmob-atendimento-aberto .xmob-colaborador #atendimentoNomeAtual {
    width:auto; min-height:0; white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere;
  }
  .xmob-detalhes-area { flex:none; position:relative; z-index:20; padding:0 12px 8px; }
  .xmob-detalhes-area .xmob-detalhes-toolbar { margin:0; }
  .xmob-detalhes-area .xmob-detalhes-toggle { min-height:36px; padding:7px 10px; font-size:11px; border:0; background:var(--tema-card-2,#f1f5f9); }
  .xmob-detalhes-area .xmob-detalhes.open {
    position:absolute; left:8px; right:8px; top:100%; margin:0;
    max-height:calc(var(--xmobile-viewport-height,100dvh) - 235px); overflow-y:auto;
    background:var(--tema-card,#fff); box-shadow:0 18px 35px rgba(15,23,42,.2);
  }
  .xmob-detalhes .xmob-acoes-atendimento { grid-template-columns:repeat(2,minmax(0,1fr)) !important; margin:12px 0 0 !important; }
  .xmob-detalhes .xmob-acoes-atendimento > button { min-width:0; padding:10px; font-size:11px; }
  .xmob-conversa { flex:1; min-height:0; display:flex; flex-direction:column; margin:0 !important; }
  body.xmob-atendimento-aberto #chatMensagens.xmob-chat {
    flex:1; height:auto !important; min-height:0 !important; max-height:none !important;
    padding:14px 12px !important; margin:0 !important; border:0 !important; border-radius:0 !important;
    background:#eef3ec !important;
    background-image:radial-gradient(rgba(54,91,73,.045) 1px,transparent 1px) !important;
    background-size:18px 18px !important; scroll-behavior:auto;
  }
  .xmob-msg-row { min-width:0; margin-bottom:9px !important; }
  .xmob-msg-bubble { min-width:0; max-width:86% !important; padding:9px 11px !important; font-size:14px !important; line-height:1.5 !important; border-radius:13px !important; overflow-wrap:anywhere; box-shadow:0 1px 2px rgba(15,23,42,.09); }
  body.xmob-atendimento-aberto .xmob-msg-out > .xmob-msg-bubble {
    background:#d9fdd3 !important; color:#17332c !important; border-bottom-right-radius:3px !important;
  }
  body.xmob-atendimento-aberto .xmob-msg-in > .xmob-msg-bubble {
    background:#fff !important; color:#172033 !important; border:0 !important; border-bottom-left-radius:3px !important;
  }
  .xmob-msg-bubble > div[style*="min-width"], .xmob-msg-bubble a {
    min-width:0 !important; max-width:100% !important; overflow-wrap:anywhere;
  }
  .xmob-msg-bubble audio { width:240px !important; max-width:100% !important; }
  .xmob-msg-bubble a > * { min-width:0; }
  .xmob-msg-bubble img, .xmob-msg-bubble video { max-width:100% !important; object-fit:contain; }
  body.xmob-atendimento-aberto .xmob-composer {
    flex:none; position:relative !important; display:grid !important;
    grid-template-columns:44px minmax(0,1fr) 44px !important; gap:7px !important;
    padding:9px 10px !important; margin:0 !important; min-height:64px;
    border:0 !important; border-top:1px solid var(--tema-borda,#dbe3ec) !important;
    border-radius:0 !important; background:var(--tema-card,#fff) !important;
  }
  body.xmob-atendimento-aberto .xmob-composer:not(.has-tools) { grid-template-columns:minmax(0,1fr) 44px !important; }
  .xmob-tool-toggle { grid-column:1; grid-row:1; width:44px; height:44px; min-height:44px; padding:0; border:0; border-radius:50%; font-size:26px; background:var(--tema-card-2,#f1f5f9); color:var(--tema-texto,#334155); }
  body.xmob-atendimento-aberto #chatInput.xmob-chat-input { grid-column:2; grid-row:1; height:44px !important; border-radius:24px !important; padding:0 14px !important; border:0 !important; background:var(--tema-card-2,#f1f5f9) !important; }
  .xmob-composer:not(.has-tools) #chatInput.xmob-chat-input { grid-column:1 !important; }
  body.xmob-atendimento-aberto .xmob-send, body.xmob-atendimento-aberto .xmob-mic {
    grid-column:3; grid-row:1; width:44px !important; height:44px !important; min-height:44px !important;
    border-radius:50% !important; background:#128c7e !important; color:white !important; border:0 !important; opacity:1;
  }
  .xmob-composer:not(.has-tools) .xmob-send, .xmob-composer:not(.has-tools) .xmob-mic { grid-column:2 !important; }
  body.xmob-atendimento-aberto .xmob-composer.has-mic:not(.tem-texto) > .xmob-send { display:none !important; }
  body.xmob-atendimento-aberto .xmob-composer.tem-texto > .xmob-mic { display:none !important; }
  .xmob-composer-tools { display:none; position:absolute; bottom:calc(100% + 8px); left:10px; z-index:30; padding:10px; gap:10px; border:1px solid var(--tema-borda,#dbe3ec); border-radius:16px; background:var(--tema-card,#fff); box-shadow:0 10px 28px rgba(15,23,42,.18); }
  .xmob-composer.tools-open .xmob-composer-tools { display:flex; }
  body.xmob-atendimento-aberto .xmob-composer > div:not(.xmob-composer-tools) { grid-column:2 / -1; min-width:0; }
  body.xmob-atendimento-aberto .xmob-scroll-bottom { bottom:82px !important; right:14px !important; background:var(--tema-card,#fff); }
  html[data-theme="dark"] body.xmob-atendimento-aberto #chatMensagens.xmob-chat { background-color:#0b141a !important; }
  html[data-theme="dark"] body.xmob-atendimento-aberto .xmob-msg-in > .xmob-msg-bubble { background:#202c33 !important; color:#e9edef !important; }
  html[data-theme="dark"] body.xmob-atendimento-aberto .xmob-msg-out > .xmob-msg-bubble { background:#005c4b !important; color:#e9edef !important; }
  html[data-theme="dark"] .xmob-composer-tools { background:#202c33; }
}
@media (min-width:1025px), (min-width:821px) and (pointer:fine) {
  .xmob-composer-tools { display:contents; }
  .xmob-tool-toggle { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .xmob-detalhes, .xmob-action, .xmob-tool, .xmob-send, .xmob-scroll-bottom { animation:none !important; transition:none !important; }
}

@media (max-width:820px), (max-width:1024px) and (pointer:coarse) {
  #cabecalhoContexto .cabecalho-contexto-acoes > .xinguzinho-notif-wrap.xmobile-has-actions {
    display:flex; flex:0 0 91px; max-width:91px; gap:7px;
  }
  #cabecalhoContexto .xinguzinho-notif-wrap > button { flex:0 0 42px; width:42px; min-width:42px; }
  #cabecalhoContexto .cabecalho-contexto-acoes button { background:var(--tema-card-2,#f8fafc); color:var(--tema-texto,#172033); border:1px solid var(--tema-borda,#e2e8f0); }
  #cabecalhoContexto .cabecalho-contexto-acoes > .xinguzinho-pwa-install,
  #cabecalhoContexto .cabecalho-contexto-acoes > .xinguzinho-push-button { font-size:19px; }
  body.xmob-atendimento-aberto .xmob-colaborador { display:flex; align-items:center; gap:10px; }
  body.xmob-atendimento-aberto .xmob-colaborador::before {
    content:attr(data-iniciais); display:flex; align-items:center; justify-content:center;
    flex:0 0 34px; height:34px; border-radius:50%; background:#e3f3ef; color:#147d6c; font-size:12px; font-weight:700;
  }
  body.xmob-atendimento-aberto .xmob-colaborador #atendimentoNomeAtual { flex:1; min-width:0; }
  body.xmob-atendimento-aberto .xmob-atendimento-topbar > div:last-child strong { color:var(--tema-secundario,#64748b); }
}

@media (max-width:820px), (max-width:1024px) and (pointer:coarse) {
  body.xmob-atendimento-aberto .xmob-composer.read-only { grid-template-columns:44px minmax(0,1fr) !important; }
  body.xmob-atendimento-aberto .xmob-composer.read-only:not(.has-tools) { grid-template-columns:minmax(0,1fr) !important; }
  .xmob-composer.read-only:not(.has-tools) > div { grid-column:1 / -1 !important; }
}
@media (max-width:820px), (max-width:1024px) and (pointer:coarse) {
  #xinguzinhoNotifPainel {
    position:fixed !important; left:10px !important; right:10px !important;
    top:calc(72px + env(safe-area-inset-top)) !important; width:auto !important;
    max-width:none !important; max-height:calc(var(--xmobile-viewport-height,100dvh) - 100px) !important;
    overflow-y:auto; border-radius:16px;
  }
}

/* A mesma navegação em celulares na horizontal e tablets de toque. */
@media (max-width:820px), (max-width:1024px) and (pointer:coarse) {
  .app:not(.hidden) { display:block !important; width:100%; height:var(--xmobile-viewport-height,100dvh); }
  .main { width:100%; height:var(--xmobile-viewport-height,100dvh); padding:72px 12px calc(92px + env(safe-area-inset-bottom)); overflow-y:auto; overflow-x:hidden; }
  .sidebar { display:flex !important; position:fixed; top:0; bottom:0; left:0; width:min(86vw,310px); height:var(--xmobile-viewport-height,100dvh); z-index:10002; padding:22px 18px; overflow-y:auto; transform:translateX(-105%); transition:transform .2s ease; box-shadow:12px 0 35px rgba(0,0,0,.2); }
  .sidebar.mobile-open { transform:translateX(0); }
  .mobile-menu-toggle { display:flex !important; position:fixed; top:12px; left:12px; width:44px; height:44px; padding:0; align-items:center; justify-content:center; z-index:10001; border:0; border-radius:13px; background:#071d35; color:#fff; font-size:23px; }
  .mobile-menu-backdrop { position:fixed; inset:0; display:none; z-index:10000; background:rgba(15,23,42,.52); }
  .mobile-menu-backdrop.active { display:block; }
  .xv5-mobile-dock { display:flex; position:fixed; left:8px; right:8px; bottom:calc(8px + env(safe-area-inset-bottom)); min-height:58px; padding:6px; gap:2px; align-items:flex-end; justify-content:space-around; border:1px solid var(--tema-borda,#e2e8f0); border-radius:17px; background:var(--tema-card,#fff); z-index:9000; box-shadow:0 8px 24px rgba(15,23,42,.16); }
  .xv5-mobile-dock button { flex:1; min-width:0; padding:5px 2px; display:grid; place-items:center; gap:2px; background:transparent; border:0; border-radius:10px; color:var(--tema-secundario,#64748b); }
  .xv5-mobile-dock button > span { font-size:18px; }
  .xv5-mobile-dock button > small { font-size:9px; }
  .xmob-atendimento-topbar { display:grid !important; }
  .xmob-detalhes:not(.open) { display:none; }
  .xmob-detalhes-toggle { display:grid; grid-template-columns:24px minmax(0,1fr) 20px; align-items:center; gap:8px; width:100%; text-align:left; }
  .xmob-scroll-bottom { position:absolute !important; width:38px; height:38px; border:1px solid var(--tema-borda,#e2e8f0); border-radius:50%; opacity:0; pointer-events:none; }
  .xmob-scroll-bottom.visible { opacity:1; pointer-events:auto; }
  .xmobile-modal-overlay [style*="display:flex"] { flex-wrap:wrap; }
}
@media (max-width:820px), (max-width:1024px) and (pointer:coarse) {
  body.xmob-atendimento-aberto .xmob-composer.tem-texto .xmob-send {
    background:#128c7e !important; box-shadow:0 3px 10px rgba(18,140,126,.18);
  }
  html[data-theme="dark"] .xmob-msg-bubble a {
    background:rgba(255,255,255,.07) !important; color:#e9edef !important;
  }
}

@media (max-width:820px), (max-width:1024px) and (pointer:coarse) {
  #cabecalhoContexto { flex-direction:column; align-items:stretch; }
  body.xmob-atendimento-aberto #cabecalhoContexto { display:none !important; }
}
@media (max-width:820px), (max-width:1024px) and (pointer:coarse) {
  .main .xv3-page { grid-template-columns:minmax(0,1fr); }
  .main .xv3-page > *, .main .xv3-card, .main .xv3-card > * { min-width:0; max-width:100%; }
  .main .xv3-card small, .main .xv3-card span { white-space:normal; overflow-wrap:anywhere; }
  .main .xpt-board { grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:minmax(0,1fr); overflow-x:visible; }
  .main .xpt-coluna { min-width:0; }
  .main .xpt-coluna-corpo { max-height:none; }
}
@media (max-width:820px), (max-width:1024px) and (pointer:coarse) {
  .xmobile-modal-overlay {
    top:var(--xmobile-viewport-top,0px) !important; bottom:auto !important;
    height:var(--xmobile-viewport-height,100dvh) !important; align-items:center !important;
    overflow-y:auto !important;
  }
}

/* XINGUZINHO_MEUS_CONVERSAS_V1 — exclusivamente Meus atendimentos.
   Superfícies neutras; verde limitado ao filtro ativo e ao contador de não lidas. */
.main:has(> .xmeus-topbar, > .xmeus-web) {
  --xmeus-bg:#fff;
  --xmeus-text:#111b21;
  --xmeus-muted:#667781;
  --xmeus-search:#f0f2f5;
  --xmeus-border:#edf0f2;
  --xmeus-active:#d9fdd3;
  --xmeus-active-text:#176b3a;
  --xmeus-avatar:#e9edef;
  background:var(--xmeus-bg) !important;
}
html[data-theme="dark"] .main:has(> .xmeus-topbar, > .xmeus-web) {
  background:var(--xmeus-bg) !important;
  --xmeus-bg:#111b21;
  --xmeus-text:#e9edef;
  --xmeus-muted:#8696a0;
  --xmeus-search:#202c33;
  --xmeus-border:#202c33;
  --xmeus-active:#103b2b;
  --xmeus-active-text:#a3e9bb;
  --xmeus-avatar:#28373f;
}
.xmeus-sr {
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0); white-space:nowrap !important; border:0 !important;
}
.main .topbar.xmeus-topbar {
  display:flex !important; flex-wrap:nowrap !important; align-items:center !important;
  gap:12px !important; padding:14px 16px !important; margin:0 !important;
  background:var(--xmeus-bg) !important; border:0 !important; box-shadow:none !important;
}
.xmeus-topbar .xmeus-titulo { flex:1; min-width:0; }
.main .xmeus-topbar h2 { font-size:24px; font-weight:700; color:var(--xmeus-text) !important; }
.xmeus-topbar .xmeus-titulo > span { font-size:11px; color:var(--xmeus-muted); }
.xmeus-topbar .xmeus-header-acoes { display:flex; width:auto !important; flex:none; gap:8px; }
.main .xmeus-header-acoes button {
  display:flex; align-items:center; justify-content:center; flex:none;
  width:42px; height:42px; min-height:42px; padding:0;
  background:transparent !important; color:var(--xmeus-muted) !important;
  border:0 !important; border-radius:50%;
}
.main .panel.xmeus-filtros,
.main .panel.xmeus-lista-panel {
  background:var(--xmeus-bg) !important; border:0 !important;
  border-radius:0 !important; box-shadow:none !important; margin:0 !important;
}
.xmeus-filtros .xmeus-filtros-grid {
  display:grid !important; grid-template-columns:minmax(0,1fr) auto !important;
  padding:4px 16px 12px !important; gap:12px 8px !important; align-items:center !important;
}
.xmeus-busca { grid-column:1 / -1; min-width:0; }
.main #meusAtendimentosBusca {
  width:100%; min-height:46px; margin:0 !important; padding:12px 18px !important;
  background:var(--xmeus-search) !important; color:var(--xmeus-text) !important;
  border:0 !important; border-radius:24px !important; font-size:16px;
}
#meusAtendimentosBusca::placeholder { color:var(--xmeus-muted); opacity:1; }
.xmeus-tags { grid-column:2; grid-row:2; max-width:110px; }
.main .xmeus-filtros #meusFiltroTagsBotao { max-width:110px !important; }
.xmeus-filtros .xmeus-leitura { display:flex; gap:8px; grid-column:1; grid-row:2; min-width:0; }
.main .xmeus-leitura button,
.main .xmeus-filtros #meusFiltroTagsBotao {
  min-height:34px !important; width:auto !important; margin:0 !important;
  padding:7px 12px !important; font-size:12px; font-weight:600;
  border:0 !important; border-radius:20px !important;
  background:var(--xmeus-search) !important; color:var(--xmeus-muted) !important;
}
.main .xmeus-leitura button[aria-pressed="true"] {
  background:var(--xmeus-active) !important; color:var(--xmeus-active-text) !important;
}
.xmeus-filtros #meusFiltroTagsPainel {
  left:auto !important; right:0 !important; max-width:calc(100vw - 32px) !important;
}
.main .xmeus-lista-panel > .panel-header {
  padding:6px 16px 12px !important; margin:0; font-size:11px;
  border:0 !important; background:var(--xmeus-bg) !important; color:var(--xmeus-muted) !important;
}
.main #meusAtendimentosLista .xmeus-conversa {
  display:flex !important; align-items:center; width:100%; min-width:0; max-width:100%;
  min-height:88px; padding:14px 16px; gap:13px; margin:0;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  background:var(--xmeus-bg) !important; color:var(--xmeus-text) !important;
  text-align:left; font-weight:400; cursor:pointer;
}
.xmeus-avatar {
  display:flex; align-items:center; justify-content:center; flex:0 0 50px;
  width:50px; height:50px; border-radius:50%;
  background:var(--xmeus-avatar); color:var(--xmeus-muted); font-size:17px; font-weight:600;
}
.xmeus-texto { display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; }
.xmeus-nome { font-size:16px; font-weight:600; line-height:1.35; }
.xmeus-previa { font-size:13px; line-height:1.5; color:var(--xmeus-muted); }
.xmeus-etiquetas { font-size:11px; color:var(--xmeus-muted); }
.xmeus-texto > :not(.xmeus-sr) { overflow:hidden; white-space:nowrap !important; text-overflow:ellipsis; }
.xmeus-indicadores { display:flex; flex-direction:column; align-items:flex-end; align-self:flex-start; gap:9px; flex:none; padding-top:2px; }
.xmeus-horario { font-size:11px; color:var(--xmeus-muted); }
.xmeus-badge {
  display:flex; align-items:center; justify-content:center; min-width:20px; height:20px;
  padding:0 6px; border-radius:12px; background:#25d366; color:#073b1a; font-size:11px; font-weight:700;
}
.xmeus-nao-lida .xmeus-horario { color:#16833d; }
html[data-theme="dark"] .xmeus-nao-lida .xmeus-horario { color:#25d366; }
.main .xmeus-conversa:focus-visible,
.main .xmeus-header-acoes button:focus-visible,
.main .xmeus-filtros :is(button,input):focus-visible { outline:2px solid #16833d; outline-offset:-3px; }
.main #meusAtendimentosLista .xmeus-conversa:hover { background:var(--xmeus-search) !important; }
@media (max-width:820px), (max-width:1024px) and (pointer:coarse) {
  .main:has(> .xmeus-topbar, > .xmeus-web) {
    min-height:100dvh !important;
    padding:env(safe-area-inset-top) 0 calc(92px + env(safe-area-inset-bottom)) !important;
  }
  .main:has(> .xmeus-topbar, > .xmeus-web) #cabecalhoContexto { display:none !important; }
  .main .topbar.xmeus-topbar { padding:12px 16px 12px 60px !important; min-height:72px; }
  .main .xmeus-topbar h2 { font-size:22px; }
  body:has(.main > .xmeus-topbar) .mobile-menu-toggle {
    top:calc(16px + env(safe-area-inset-top)) !important;
    background:transparent !important; color:#54656f !important; box-shadow:none !important;
  }
  html[data-theme="dark"] body:has(.main > .xmeus-topbar) .mobile-menu-toggle { color:#aebac1 !important; }
  .main .xmeus-filtros .xmobile-form-grid > * { grid-column:initial !important; }
  .main .xmeus-filtros .xmobile-form-grid > .xmeus-busca { grid-column:1 / -1 !important; }
  .main .xmeus-filtros .xmobile-form-grid > .xmeus-tags { grid-column:2 !important; grid-row:2 !important; }
  .main .xmeus-filtros .xmobile-form-grid > .xmeus-leitura { grid-column:1 !important; grid-row:2 !important; }
}
@media (max-width:359px) {
  .main .xmeus-filtros .xmeus-filtros-grid { gap:10px 5px !important; padding-left:12px !important; padding-right:12px !important; }
  .main .xmeus-leitura { gap:5px; }
  .main .xmeus-leitura button, .main .xmeus-filtros #meusFiltroTagsBotao { padding:7px 9px !important; font-size:11px; }
  .main #meusAtendimentosLista .xmeus-conversa { padding:13px 12px; gap:10px; }
  .xmeus-avatar { flex-basis:44px; width:44px; height:44px; font-size:15px; }
}

/* XINGUZINHO_MEUS_WHATSAPP_WEB_V1 — lista e conversa lado a lado. */
@media (min-width:821px) {
  .app:has(.main > .xmeus-web) { grid-template-columns:240px minmax(0,1fr); }
  .main:has(> .xmeus-web) {
    padding:0 !important; height:100dvh !important; min-height:0 !important;
    overflow:hidden !important; color:var(--xmeus-text);
  }
  .main:has(> .xmeus-web) > #cabecalhoContexto { display:none !important; }
  .xmeus-web {
    height:100%; width:100%; display:grid;
    grid-template-columns:clamp(270px,32%,370px) minmax(0,1fr);
    background:var(--xmeus-bg); overflow:hidden;
  }
  .xmeus-web-lista {
    display:flex; flex-direction:column; min-height:0; min-width:0;
    border-right:1px solid var(--xmeus-border); background:var(--xmeus-bg);
  }
  .main .xmeus-web-lista .xmeus-topbar { flex:none; min-height:80px; padding:14px 16px !important; }
  .xmeus-web-lista .xmeus-topbar h2 { font-size:22px; }
  .xmeus-web-lista .xmeus-header-acoes { gap:2px !important; }
  .xmeus-web-lista .xmeus-header-acoes button { width:36px; height:36px; min-height:36px; }
  .main .xmeus-web-lista .xmeus-filtros { flex:none; overflow:visible; z-index:5 !important; }
  .main .xmeus-web-lista .xmeus-lista-panel {
    flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; z-index:1 !important;
  }
  .xmeus-web-lista #meusAtendimentosLista { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
  .main .xmeus-web-lista #meusAtendimentosLista .xmeus-conversa { min-height:82px; gap:10px; padding:13px 14px; }
  .xmeus-web-lista .xmeus-avatar { width:44px; height:44px; flex-basis:44px; font-size:15px; }
  .xmeus-web-lista .xmeus-nome { font-size:14px; }
  .xmeus-web-lista .xmeus-previa { font-size:12px; }
  .main .xmeus-web-lista #meusAtendimentosLista .xmeus-selecionada { background:var(--xmeus-search) !important; }
  .xmeus-web-lista #meusFiltroTagsPainel { width:280px !important; max-width:238px !important; }
  .xmeus-web-conversa { position:relative; min-height:0; min-width:0; overflow:hidden; background:#f0f2f5; }
  .xweb-espera {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:16px; height:100%; padding:32px; text-align:center; color:var(--xmeus-muted);
    border-bottom:5px solid #25d366;
  }
  .xweb-espera svg { opacity:.55; }
  .xweb-espera h2 { font-size:28px; font-weight:400; color:var(--xmeus-text); line-height:1.3; }
  .xweb-espera p { font-size:14px; line-height:1.7; max-width:440px; }
  .xweb-espera > span { margin-top:18px; font-size:12px; line-height:1.5; }
  .xmeus-web-conversa[aria-busy="true"]::after {
    content:'Carregando conversa…'; position:absolute; inset:0; z-index:20;
    display:grid; place-items:center; background:var(--xmeus-bg); color:var(--xmeus-muted); opacity:.92;
  }
  .main .xmeus-web-conversa .xweb-chat-panel {
    display:flex; flex-direction:column; height:100%; min-height:0; min-width:0;
    overflow:hidden; border:0 !important; border-radius:0 !important; box-shadow:none !important;
    background:var(--xmeus-bg) !important;
  }
  .xweb-chat-cabecalho {
    display:flex; align-items:center; gap:12px; flex:none; min-height:70px;
    padding:10px 20px; background:var(--xmeus-search); border-bottom:1px solid var(--xmeus-border);
  }
  .xweb-chat-cabecalho .xmeus-avatar { width:42px; height:42px; flex-basis:42px; font-size:15px; }
  .xweb-chat-identidade { flex:1; min-width:0; display:grid; gap:3px; }
  .xweb-chat-identidade #atendimentoNomeAtual { width:100%; margin:0; padding:0; font-size:15px !important; font-weight:600 !important; color:var(--xmeus-text) !important; }
  .xweb-chat-identidade > span { font-size:11px; color:var(--xmeus-muted); overflow-wrap:anywhere; }
  .xweb-chat-cabecalho .xweb-fechar { flex:none; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--xmeus-muted); font-size:27px; }
  .xweb-chat-detalhes { flex:none; position:relative; z-index:10; background:var(--xmeus-search); }
  .xweb-chat-detalhes > summary { cursor:pointer; padding:8px 20px; font-size:12px; line-height:1.5; color:var(--xmeus-muted); }
  .xweb-chat-detalhes > .xweb-detalhes-conteudo {
    position:absolute; left:12px; right:12px; top:100%; z-index:10;
    max-height:var(--xweb-altura-detalhes,calc(100dvh - 190px)); overflow-y:auto; overscroll-behavior:contain;
    padding:20px !important; border:1px solid var(--xmeus-border); border-radius:12px;
    background:var(--xmeus-bg); color:var(--xmeus-text); box-shadow:0 10px 25px rgba(11,20,26,.18);
  }
  .xweb-chat-detalhes button { max-width:100%; white-space:normal; }
  .xweb-chat-detalhes .ticket-meta { color:var(--xmeus-muted); overflow-wrap:anywhere; }
  .main .xmeus-web-conversa #chatMensagens.xweb-chat {
    flex:1; min-height:0 !important; height:auto !important; max-height:none !important;
    overflow-y:auto; overscroll-behavior:contain; margin:0 !important; padding:24px 6% !important;
    border:0 !important; border-radius:0 !important; background:#efeae2 !important;
    background-image:radial-gradient(rgba(105,91,70,.05) 1px,transparent 1px) !important;
    background-size:20px 20px !important;
  }
  .xweb-msg-row { min-width:0; margin-bottom:10px !important; }
  .xweb-msg-bubble {
    min-width:0; max-width:80% !important; padding:9px 12px !important; border:0 !important;
    border-radius:10px !important; background:#fff !important; color:#111b21 !important;
    box-shadow:0 1px 2px rgba(11,20,26,.1); font-size:14px; line-height:1.5; overflow-wrap:anywhere;
  }
  .xweb-msg-saida > .xweb-msg-bubble { background:#d9fdd3 !important; border-bottom-right-radius:3px !important; }
  .xweb-msg-row:not(.xweb-msg-saida) > .xweb-msg-bubble { border-bottom-left-radius:3px !important; }
  .xweb-msg-bubble :is(img,video,audio) { max-width:100% !important; }
  .xweb-msg-bubble :is(a,a > div) { min-width:0 !important; max-width:100% !important; overflow-wrap:anywhere; }
  .main .xweb-composer {
    display:flex !important; flex:none; align-items:center; gap:6px !important;
    margin:0 !important; padding:12px 14px !important; min-height:70px; border:0;
    background:var(--xmeus-search); border-top:1px solid var(--xmeus-border);
  }
  .main .xweb-composer #chatInput {
    flex:1; min-width:0; height:44px; margin:0 !important; padding:11px 15px;
    background:var(--xmeus-bg) !important; color:var(--xmeus-text) !important;
    border:0 !important; border-radius:10px;
  }
  .main .xweb-composer > button {
    flex:none; display:flex; align-items:center; justify-content:center;
    width:36px !important; min-width:36px !important; height:40px; padding:0 !important;
    border:0 !important; border-radius:50%; background:transparent !important;
    color:var(--xmeus-muted) !important; font-size:20px;
  }
  .main .xweb-composer > .xweb-enviar { background:#008069 !important; color:#fff !important; font-size:19px; }
  .xweb-composer:has(#chatInput:placeholder-shown) > .xweb-enviar { display:none !important; }
  .xweb-composer:has(#chatInput:not(:placeholder-shown)) > .xweb-mic { display:none !important; }
  .xweb-chat-panel :is(button,input,summary):focus-visible { outline:2px solid #16833d; outline-offset:2px; }
  html[data-theme="dark"] .xmeus-web-conversa { background:#222e35; }
  html[data-theme="dark"] .main .xmeus-web-conversa #chatMensagens.xweb-chat { background-color:#0b141a !important; }
  html[data-theme="dark"] .xweb-msg-bubble { background:#202c33 !important; color:#e9edef !important; }
  html[data-theme="dark"] .xweb-msg-saida > .xweb-msg-bubble { background:#005c4b !important; }
  html[data-theme="dark"] .xweb-msg-bubble a { color:#e9edef !important; background:rgba(255,255,255,.06) !important; }
}

/* Etiquetas e ações visíveis continuamente na conversa Web. */
@media (min-width:821px) {
  .xweb-controles {
    flex:none; min-width:0; padding:10px 16px;
    background:var(--xmeus-bg); border-bottom:1px solid var(--xmeus-border);
  }
  .xweb-etiquetas { display:flex; align-items:flex-start; gap:10px; min-width:0; }
  .xweb-etiquetas-rotulo { flex:none; padding-top:7px; font-size:12px; font-weight:600; color:var(--xmeus-muted); }
  .xweb-etiquetas #tagsAtendimento { flex:1; min-width:0; }
  .xweb-etiquetas #tagsAtendimento > div { min-width:0; }
  .xweb-etiquetas #tagsAtendimento span { max-width:100%; overflow-wrap:anywhere; }
  .xweb-acoes { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:8px; min-width:0; }
  .main .xweb-acoes > button {
    flex:0 1 auto; width:auto !important; max-width:100%; min-width:0;
    min-height:32px; margin:0 !important; padding:7px 10px !important;
    border-radius:8px; font-size:12px !important; line-height:1.35;
    white-space:normal; overflow-wrap:anywhere;
  }
  .xweb-controles #pr-chat-status:empty { display:none; }
  .xweb-controles :is(button,select,input):focus-visible { outline:2px solid #16833d; outline-offset:2px; }
}