/* ============================================================
   XINGUZINHO_MOBILE_ATENDIMENTO_V3
   Atendimento mobile redesenhado
   ============================================================ */

@media (max-width:820px) {

  body.xmob-atendimento-aberto .main {
    padding:
      66px
      8px
      calc(
        94px +
        env(safe-area-inset-bottom)
      ) !important;
    scroll-padding-bottom:
      calc(
        150px +
        env(safe-area-inset-bottom)
      );
  }


  body.xmob-atendimento-aberto
  #cabecalhoContexto {
    display:none !important;
  }


  body.xmob-atendimento-aberto
  .xmob-atendimento-topbar {
    min-height:48px;
    margin:
      0
      0
      8px !important;
    padding-left:54px;
    display:grid !important;
    grid-template-columns:
      auto
      minmax(0,1fr);
    gap:8px !important;
    align-items:center !important;
  }


  body.xmob-atendimento-aberto
  .xmob-atendimento-topbar > div {
    min-width:0 !important;
    flex:none !important;
  }


  body.xmob-atendimento-aberto
  .xmob-atendimento-topbar > div:first-child button {
    min-height:40px;
    height:40px;
    padding:
      0
      12px;
    border-radius:12px;
    font-size:12px;
    font-weight:700;
  }


  body.xmob-atendimento-aberto
  .xmob-atendimento-topbar > div:last-child {
    display:flex;
    justify-content:flex-end;
    overflow:hidden;
  }


  body.xmob-atendimento-aberto
  .xmob-atendimento-topbar > div:last-child strong {
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    padding:
      6px
      9px;
    border:1px solid var(--tema-borda,#26364f);
    border-radius:999px;
    background:var(--tema-card,#111827);
    color:var(--tema-texto-secundario,#cbd5e1);
    font-size:10px;
    font-weight:700;
  }


  body.xmob-atendimento-aberto
  .mobile-menu-toggle {
    top:
      calc(
        10px +
        env(safe-area-inset-top)
      ) !important;
    left:10px !important;
    width:42px !important;
    height:42px !important;
    border-radius:13px !important;
    box-shadow:
      0 8px 22px
      rgba(0,0,0,.28);
  }


  .xmob-atendimento-panel {
    position:relative;
    overflow:visible;
    margin:0 !important;
    border-radius:18px !important;
    border:
      1px solid
      var(--tema-borda,#253552) !important;
    box-shadow:
      0 12px 30px
      rgba(0,0,0,.14);
  }


  .xmob-atendimento-panel >
  .panel-header {
    padding:
      12px
      14px !important;
    border-bottom:
      1px solid
      var(--tema-borda,#253552);
    font-size:11px !important;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.7px;
    opacity:.78;
  }


  .xmob-atendimento-conteudo {
    padding:
      14px !important;
  }


  .xmob-colaborador {
    margin:
      0
      0
      8px !important;
    padding-right:4px;
    font-size:20px !important;
    line-height:1.2;
  }


  .xmob-colaborador button {
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }


  .xmob-detalhes-toolbar {
    margin:
      2px
      0
      12px;
  }


  .xmob-detalhes-toggle {
    width:100%;
    min-height:44px;
    display:grid;
    grid-template-columns:
      24px
      1fr
      20px;
    align-items:center;
    gap:8px;
    padding:
      10px
      12px;
    border:
      1px solid
      var(--tema-borda,#2b3a55);
    border-radius:13px;
    background:
      var(--tema-card-2,#162033);
    color:
      var(--tema-texto,#eef2ff);
    text-align:left;
    font-size:12px;
    font-weight:700;
    transition:
      transform .15s ease,
      border-color .15s ease,
      background .15s ease;
  }


  .xmob-detalhes-toggle b {
    text-align:right;
    font-size:16px;
    opacity:.72;
  }


  .xmob-detalhes-toggle:active {
    transform:scale(.985);
  }


  .xmob-detalhes {
    display:none;
    padding:
      12px;
    margin:
      0
      0
      14px;
    border:
      1px solid
      var(--tema-borda,#26364f);
    border-radius:14px;
    background:
      color-mix(
        in srgb,
        var(--tema-card,#111827) 92%,
        transparent
      );
  }


  .xmob-detalhes.open {
    display:block;
    animation:
      xmobFadeIn
      .18s
      ease-out;
  }


  .xmob-detalhes .ticket-meta {
    padding:
      10px
      12px;
    border-radius:11px;
    background:
      var(--tema-card-2,#162033);
    line-height:1.85;
    font-size:11px;
  }


  .xmob-detalhes hr {
    margin:
      14px
      0 !important;
    border-color:
      var(--tema-borda,#26364f) !important;
  }


  .xmob-detalhes h3 {
    margin-top:
      14px !important;
    margin-bottom:4px;
    font-size:12px;
  }


  .xmob-detalhes p {
    margin-top:
      4px !important;
    font-size:12px;
    line-height:1.5 !important;
  }


  .xmob-timeline-btn {
    width:100%;
    min-height:42px;
    border-radius:12px !important;
    background:
      var(--tema-card-2,#162033) !important;
    color:
      var(--tema-texto,#eef2ff) !important;
    border:
      1px solid
      var(--tema-borda,#2b3a55) !important;
    font-size:12px !important;
    font-weight:700;
  }


  .xmob-status-card {
    margin:
      0
      0
      10px !important;
    padding:
      11px
      12px !important;
    border:
      1px solid
      rgba(34,197,94,.28);
    border-left:
      3px solid
      #22c55e;
    border-radius:12px;
    background:
      rgba(34,197,94,.07);
    color:
      var(--tema-texto,#eef2ff);
    font-size:11px;
    line-height:1.5;
  }


  .xmob-status-card strong {
    display:inline-block;
    margin-top:2px;
    color:
      var(--tema-texto,#fff);
  }


  .xmob-acoes-atendimento {
    display:grid !important;
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
    gap:8px !important;
    margin-top:
      10px !important;
  }


  .xmob-action {
    width:100% !important;
    min-width:0 !important;
    min-height:44px !important;
    padding:
      10px
      12px !important;
    border-radius:12px !important;
    font-size:11px !important;
    font-weight:800 !important;
    box-shadow:none !important;
    transition:
      transform .12s ease,
      filter .12s ease !important;
  }


  .xmob-action:active {
    transform:
      scale(.97);
    filter:
      brightness(.92);
  }


  .xmob-action-transferir {
    background:
      #2563eb !important;
  }


  .xmob-action-rejeitar {
    background:
      #c2410c !important;
  }


  .xmob-action-finalizar {
    grid-column:
      1 / -1;
    background:
      #b91c1c !important;
  }


  #chatMensagens.xmob-chat {
    min-height:
      320px !important;
    height:
      min(
        52dvh,
        560px
      ) !important;
    max-height:
      none !important;
    margin-top:
      14px !important;
    padding:
      10px !important;
    border:
      1px solid
      var(--tema-borda,#26364f) !important;
    border-radius:
      16px !important;
    background:
      color-mix(
        in srgb,
        var(--tema-card-2,#0d1526) 94%,
        #000 6%
      ) !important;
    overscroll-behavior:
      contain;
    scroll-behavior:
      smooth;
    scrollbar-width:
      thin;
  }


  .xmob-msg-row {
    margin-bottom:
      8px !important;
  }


  .xmob-msg-bubble {
    max-width:
      88% !important;
    padding:
      9px
      11px !important;
    border-radius:
      15px !important;
    font-size:
      13px !important;
    line-height:
      1.42 !important;
    box-shadow:
      0 4px 12px
      rgba(0,0,0,.08);
    word-break:
      break-word;
  }


  .xmob-msg-out >
  .xmob-msg-bubble {
    background:
      linear-gradient(
        145deg,
        #2563eb,
        #1d4ed8
      ) !important;
    color:
      #fff !important;
    border:
      0 !important;
    border-bottom-right-radius:
      5px !important;
  }


  .xmob-msg-in >
  .xmob-msg-bubble {
    background:
      var(--tema-card,#172236) !important;
    color:
      var(--tema-texto,#f8fafc) !important;
    border:
      1px solid
      var(--tema-borda,#2b3a55) !important;
    border-bottom-left-radius:
      5px !important;
  }


  .xmob-msg-center >
  .xmob-msg-bubble {
    max-width:
      94% !important;
  }


  .xmob-msg-bubble img {
    max-width:
      min(
        100%,
        280px
      ) !important;
    height:auto !important;
    border-radius:
      12px !important;
  }


  .xmob-msg-bubble audio {
    max-width:
      100% !important;
    width:
      min(
        280px,
        100%
      ) !important;
  }


  .xmob-composer {
    position:sticky !important;
    bottom:
      calc(
        76px +
        env(safe-area-inset-bottom)
      );
    z-index:60;
    display:grid !important;
    grid-template-columns:
      42px
      42px
      42px
      minmax(0,1fr)
      46px;
    gap:
      7px !important;
    align-items:center !important;
    margin:
      10px
      -2px
      0 !important;
    padding:
      8px !important;
    border:
      1px solid
      var(--tema-borda,#2a3953);
    border-radius:
      16px;
    background:
      color-mix(
        in srgb,
        var(--tema-card,#111827) 94%,
        transparent
      );
    backdrop-filter:
      blur(16px);
    box-shadow:
      0 12px 28px
      rgba(0,0,0,.20);
    transition:
      border-color .16s ease,
      box-shadow .16s ease,
      transform .16s ease;
  }


  .xmob-composer.focused {
    border-color:
      rgba(37,99,235,.75);
    box-shadow:
      0 12px 30px
      rgba(37,99,235,.16);
  }


  .xmob-tool,
  .xmob-send {
    min-width:
      0 !important;
    width:
      42px !important;
    height:
      42px !important;
    min-height:
      42px !important;
    padding:
      0 !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
    border-radius:
      12px !important;
    font-size:
      17px !important;
    transition:
      transform .12s ease,
      background .12s ease,
      border-color .12s ease;
  }


  .xmob-tool {
    background:
      var(--tema-card-2,#182338) !important;
    color:
      var(--tema-texto,#f8fafc) !important;
    border:
      1px solid
      var(--tema-borda,#2a3953) !important;
  }


  .xmob-tool:active,
  .xmob-send:active {
    transform:
      scale(.92);
  }


  #chatInput.xmob-chat-input {
    min-width:
      0 !important;
    width:
      100% !important;
    height:
      42px !important;
    min-height:
      42px !important;
    margin:
      0 !important;
    padding:
      0
      11px !important;
    border-radius:
      12px !important;
    border:
      1px solid
      var(--tema-borda,#2a3953) !important;
    background:
      var(--tema-card-2,#0f172a) !important;
    color:
      var(--tema-texto,#f8fafc) !important;
    box-shadow:
      none !important;
    font-size:
      16px !important;
  }


  #chatInput.xmob-chat-input::placeholder {
    color:
      var(--tema-texto-secundario,#94a3b8);
  }


  .xmob-send {
    width:
      46px !important;
    background:
      #334155 !important;
    color:
      #fff !important;
    border:
      0 !important;
    opacity:.65;
  }


  .xmob-composer.tem-texto
  .xmob-send {
    background:
      #2563eb !important;
    opacity:1;
    box-shadow:
      0 5px 14px
      rgba(37,99,235,.28);
  }


  .xmob-scroll-bottom {
    position:fixed;
    right:18px;
    bottom:
      calc(
        156px +
        env(safe-area-inset-bottom)
      );
    z-index:70;
    width:38px;
    height:38px;
    min-width:38px;
    min-height:38px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:
      1px solid
      var(--tema-borda,#334155);
    background:
      var(--tema-card,#111827);
    color:
      var(--tema-texto,#fff);
    box-shadow:
      0 8px 20px
      rgba(0,0,0,.24);
    opacity:0;
    pointer-events:none;
    transform:
      translateY(8px);
    transition:
      opacity .16s ease,
      transform .16s ease;
  }


  .xmob-scroll-bottom.visible {
    opacity:1;
    pointer-events:auto;
    transform:
      translateY(0);
  }


  body.xmob-atendimento-aberto
  .xv5-mobile-dock {
    left:10px;
    right:10px;
    bottom:
      calc(
        8px +
        env(safe-area-inset-bottom)
      );
    min-height:
      58px;
    padding:
      5px
      6px;
    border-radius:
      18px;
    box-shadow:
      0 14px 34px
      rgba(0,0,0,.28);
  }


  body.xmob-atendimento-aberto
  .xv5-mobile-dock button {
    min-height:
      44px;
    border-radius:
      12px;
    transition:
      transform .12s ease,
      background .12s ease;
  }


  body.xmob-atendimento-aberto
  .xv5-mobile-dock button:active {
    transform:
      scale(.94);
    background:
      rgba(37,99,235,.12);
  }


  body.xmob-atendimento-aberto
  .xv5-mobile-dock
  .xv5-mobile-search {
    width:
      54px;
    height:
      54px;
    min-width:
      54px;
    transform:
      translateY(-7px);
    border-radius:
      17px;
  }


  @keyframes xmobFadeIn {
    from {
      opacity:0;
      transform:
        translateY(-4px);
    }

    to {
      opacity:1;
      transform:
        translateY(0);
    }
  }
}


/* ============================================================
   LIGHT MODE
   ============================================================ */

@media (max-width:820px) {

  html:not([data-theme="dark"])
  .xmob-msg-in >
  .xmob-msg-bubble {
    background:
      #fff !important;
    color:
      #0f172a !important;
    border-color:
      #dbe3ef !important;
  }


  html:not([data-theme="dark"])
  #chatMensagens.xmob-chat {
    background:
      #f1f5f9 !important;
  }


  html:not([data-theme="dark"])
  .xmob-status-card {
    color:
      #14532d;
  }


  html:not([data-theme="dark"])
  .xmob-status-card strong {
    color:
      #166534;
  }


  html:not([data-theme="dark"])
  .xmob-detalhes {
    background:
      #fff;
  }


  html:not([data-theme="dark"])
  .xmob-composer {
    background:
      rgba(255,255,255,.96);
  }
}


/* ============================================================
   CELULARES MUITO ESTREITOS
   ============================================================ */

@media (max-width:390px) {

  .xmob-composer {
    grid-template-columns:
      38px
      38px
      38px
      minmax(0,1fr)
      42px;
    gap:
      5px !important;
    padding:
      6px !important;
  }


  .xmob-tool {
    width:
      38px !important;
    height:
      40px !important;
  }


  .xmob-send {
    width:
      42px !important;
  }


  .xmob-acoes-atendimento {
    grid-template-columns:
      1fr;
  }


  .xmob-action-finalizar {
    grid-column:auto;
  }
}