/*
 * inbox.css, CSS de página do Atendimento (/app/inbox), portado do template
 * templates/immersive/inbox.html. TODO seletor é escopado sob .wa-scope
 * (o <main> do inbox é class="wa-scope wa-frame") para não vazar a outras telas.
 * Componentes de bolha/janela (.ck-*) vêm de chat-kit.css; aqui é só o LAYOUT da página.
 */

  /* ============================================================
     WhatsApp-Web styling (scoped to .wa-frame), lifted from
     whatsapp-atendimento.html, adapted to live INSIDE the
     immersive shell as a floating panel under the top nav.
     ============================================================ */
  .wa-scope{
    --wa-pane:#ffffff;
    --wa-header:#f0f2f5;
    --wa-app-bg:#f0f2f5;
    --wa-search:#f0f2f5;
    --wa-icon:#54656f;
    --wa-name:#111b21;
    --wa-meta:#667781;
    --wa-divider:#e9edef;
    --wa-hover:#f5f6f6;
    --wa-active:#f0f2f5;
    --wa-green:#25d366;
    --wa-green-dark:#1da855;
    --wa-tick:#53bdeb;
    --wa-wallpaper:#efeae2;
    --wa-bubble-in:#ffffff;
    --wa-bubble-out:#d9fdd3;
  }

  /* ---- floating immersive frame around the WA app ---- */
  .wa-scope.wa-frame{
    height:calc(100vh - var(--nav-h));
    padding:14px 22px 18px;
    /* o pai (.main-content.inbox-page) é flex-column; sem width definida as
       margin:0 auto impedem o stretch e o frame encolhe p/ o conteúdo (ficava
       mais estreito que o Dashboard). width:100% restaura a largura cheia até o
       max-width, centralizada, igual ao template (lá o frame é filho do body). */
    width:100%;
    max-width:var(--maxw);
    /* tamanho mínimo da tela: nunca encolher abaixo disto, em janelas
       estreitas a página rola na horizontal (via .main-content.inbox-page)
       em vez de esmagar o chat. (lista min 360 + chat usável ~540 + padding) */
    min-width:964px;
    margin:0 auto;
    box-sizing:border-box;
    overflow:hidden;
  }
  .wa-scope .wa-eyebrow{
    display:inline-flex;align-items:center;gap:7px;
    font-family:var(--ff-body);
    font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
    color:var(--faint);margin:0 2px 9px;
  }
  .wa-scope .wa-eyebrow svg{width:14px;height:14px;color:var(--gold)}
  .wa-scope .wa-eyebrow .sep{opacity:.45}
  .wa-scope .wa-eyebrow b{color:var(--azul-deep);font-weight:700}

  .wa-scope .wa{
    display:flex;
    height:calc(100vh - var(--nav-h) - 14px - 18px - 29px);
    width:100%;
    min-width:920px;
    background:var(--wa-app-bg,#f0f2f5);
    border-radius:18px;
    overflow:hidden;
    position:relative;
    border:1px solid var(--hair);
    box-shadow:var(--sh-float);
    font-family:"Hanken Grotesk",system-ui,sans-serif;
    font-size:15px;
    color:var(--wa-name);
    -webkit-font-smoothing:antialiased;
  }
  /* thin brand accent strip at the very top of the panel */
  .wa-scope .wa::before{
    content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:50;
    background:linear-gradient(90deg,var(--azul),var(--gold-bright));
  }
  .wa-scope *{box-sizing:border-box;}

  /* ============ LEFT PANE ============ */
  .wa-scope .wa .left{
    width:30%;min-width:360px;max-width:460px;
    background:var(--wa-pane);
    display:flex;flex-direction:column;
    border-right:1px solid var(--wa-divider);
  }
  .wa-scope .wa .left-header{
    height:59px;flex:0 0 59px;
    background:var(--wa-header);
    display:flex;align-items:center;justify-content:space-between;
    padding:0 16px;
  }
  .wa-scope .wa .op-avatar{
    width:40px;height:40px;border-radius:50%;
    background:linear-gradient(135deg,#2F5096,#3d6bc4);
    color:#fff;display:flex;align-items:center;justify-content:center;
    font-weight:600;font-size:15px;cursor:pointer;flex:0 0 40px;
  }
  .wa-scope .wa .wa-icon-row{display:flex;align-items:center;gap:4px;}
  .wa-scope .wa .wa-ic{
    width:40px;height:40px;border:none;background:transparent;border-radius:50%;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    color:var(--wa-icon);transition:background .12s;
  }
  .wa-scope .wa .wa-ic:hover{background:rgba(0,0,0,.05);}
  .wa-scope .wa .wa-ic svg{width:24px;height:24px;}

  .wa-scope .wa .search-row{
    padding:8px 12px;background:var(--wa-pane);
    display:flex;align-items:center;gap:8px;
    border-bottom:1px solid var(--wa-divider);
  }
  .wa-scope .wa .search-pill{
    flex:1;height:35px;background:var(--wa-search);border-radius:8px;
    display:flex;align-items:center;padding:0 12px;gap:14px;
  }
  .wa-scope .wa .search-pill svg{width:18px;height:18px;color:var(--wa-icon);flex:0 0 18px;}
  .wa-scope .wa .search-pill input{
    border:none;background:transparent;outline:none;flex:1;
    font-family:inherit;font-size:14px;color:var(--wa-name);
  }
  .wa-scope .wa .search-pill input::placeholder{color:var(--wa-meta);}

  /* componentes de filtro (botão FILTROS, chips, guard [hidden]) → filters.css (v3.80.0) */

  .wa-scope .wa .chat-list{flex:1;overflow-y:auto;}
  .wa-scope .wa .chat-list::-webkit-scrollbar{width:6px;}
  .wa-scope .wa .chat-list::-webkit-scrollbar-thumb{background:#d1d7db;border-radius:3px;}
  .wa-scope .wa .chat-list::-webkit-scrollbar-thumb:hover{background:#bcc4c9;}

  .wa-scope .wa .chat-row{
    height:72px;padding:0 13px;display:flex;align-items:center;gap:13px;
    cursor:pointer;position:relative;
  }
  .wa-scope .wa .chat-row:hover{background:var(--wa-hover);}
  .wa-scope .wa .chat-row.active{background:var(--wa-active);}
  .wa-scope .wa .chat-avatar{
    width:49px;height:49px;border-radius:50%;flex:0 0 49px;
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-weight:600;font-size:17px;
  }
  .wa-scope .wa .chat-body{
    flex:1;min-width:0;height:72px;
    display:flex;flex-direction:column;justify-content:center;
    border-top:1px solid var(--wa-divider);
  }
  .wa-scope .wa .chat-row:first-child .chat-body{border-top:none;}
  .wa-scope .wa .chat-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
  .wa-scope .wa .chat-name{font-size:16px;color:var(--wa-name);font-weight:500;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .wa-scope .wa .chat-time{font-size:12px;color:var(--wa-meta);flex:0 0 auto;}
  .wa-scope .wa .chat-time.unread{color:var(--wa-green-dark);font-weight:600;}
  .wa-scope .wa .chat-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px;}
  .wa-scope .wa .chat-preview{
    font-size:14px;color:var(--wa-meta);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    display:flex;align-items:center;gap:3px;min-width:0;
  }
  .wa-scope .wa .chat-preview .tick{flex:0 0 16px;color:var(--wa-tick);}
  .wa-scope .wa .chat-preview .tick svg{width:16px;height:16px;display:block;}
  .wa-scope .wa .chat-preview span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .wa-scope .wa .badge-unread{
    flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;border-radius:11px;
    background:var(--wa-green);color:#fff;font-size:12px;font-weight:600;
    display:flex;align-items:center;justify-content:center;line-height:1;
  }
  .wa-scope .wa .pin-ic{flex:0 0 auto;color:var(--wa-meta);}
  .wa-scope .wa .pin-ic svg{width:16px;height:16px;display:block;}

  /* ============ RIGHT PANE ============ */
  .wa-scope .wa .right{flex:1;display:flex;flex-direction:column;min-width:0;position:relative;}
  .wa-scope .wa .right-header{
    height:59px;flex:0 0 59px;background:var(--wa-header);
    display:flex;align-items:center;justify-content:space-between;
    padding:0 16px;z-index:5;
  }
  .wa-scope .wa .rh-left{display:flex;align-items:center;gap:12px;cursor:pointer;flex:1;min-width:0;}
  .wa-scope .wa .rh-avatar{width:40px;height:40px;border-radius:50%;flex:0 0 40px;
    display:flex;align-items:center;justify-content:center;}
  /* Pintura so quando NAO e icone de canal (ver chat-kit.css). */
  .wa-scope .wa .rh-avatar:not(.chan){color:#fff;font-weight:600;font-size:15px;
    background:linear-gradient(135deg,#c2992f,#e0b94f);}
  .wa-scope .wa .rh-info{min-width:0;}
  .wa-scope .wa .rh-name{font-size:16px;font-weight:500;color:var(--wa-name);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .wa-scope .wa .rh-status{font-size:13px;color:var(--wa-meta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .wa-scope .wa .rh-status .on{color:var(--wa-green-dark);}
  .wa-scope .wa .rh-right{display:flex;align-items:center;gap:4px;}

  .wa-scope .wa .messages{
    flex:1;min-height:0;overflow-y:auto;position:relative;
    padding:12px 7%;
    background-color:var(--wa-wallpaper);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23000000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round' opacity='0.045'%3E%3Cpath d='M30 28c-4 0-7 3-7 7s3 7 7 7h6v6l6-6h2c4 0 7-3 7-7s-3-7-7-7z'/%3E%3Ccircle cx='190' cy='34' r='9'/%3E%3Cpath d='M190 25v18M181 34h18'/%3E%3Cpath d='M96 36l5 9 10 1-7 7 2 10-10-5-10 5 2-10-7-7 10-1z'/%3E%3Cpath d='M150 90c0-6 5-10 11-10s11 4 11 10c0 7-11 14-11 14s-11-7-11-14z'/%3E%3Cpath d='M40 100h22v15H40z M44 100v-4a7 7 0 0114 0v4'/%3E%3Cpath d='M118 110l4 4 8-9'/%3E%3Ccircle cx='124' cy='112' r='12'/%3E%3Cpath d='M198 130c-7 0-12 4-12 9 0 3 2 5 4 7l-2 7 7-4c1 0 2 1 3 1 7 0 12-4 12-10s-5-10-12-10z'/%3E%3Cpath d='M28 160l8 4v10l-8 4-8-4v-10z'/%3E%3Cpath d='M90 168a10 10 0 1020 0 10 10 0 10-20 0z M100 158v-6'/%3E%3Cpath d='M160 178h20l-3 16h-14z M167 178c0-5 6-5 6 0'/%3E%3Cpath d='M210 196l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z'/%3E%3Cpath d='M52 200c-5 0-9 3-9 7s4 7 9 7h4l5 5v-5c5-1 8-4 8-7 0-4-4-7-9-7z'/%3E%3Cpath d='M118 206l6 6 12-13'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat:repeat;
  }
  .wa-scope .wa .messages::-webkit-scrollbar{width:7px;}
  .wa-scope .wa .messages::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:3px;}

  .wa-scope .wa .date-pill{
    background:#fff;color:#54656f;font-size:12px;font-weight:500;
    padding:5px 12px;border-radius:8px;text-transform:uppercase;
    box-shadow:0 1px .5px rgba(11,20,26,.13);letter-spacing:.3px;
  }
  .wa-scope .wa .date-wrap{display:flex;justify-content:center;margin:8px 0 14px;}
  .wa-scope .wa .sys-pill{display:flex;justify-content:center;margin:6px 0 12px;}
  .wa-scope .wa .encrypt-pill{
    background:#ffeecd;color:#54656f;font-size:12.5px;line-height:1.4;
    padding:6px 12px;border-radius:6px;text-align:center;max-width:80%;
    box-shadow:0 1px .5px rgba(11,20,26,.13);display:flex;align-items:center;gap:6px;
    justify-content:center;flex-wrap:wrap;
  }
  .wa-scope .wa .encrypt-pill svg{width:12px;height:12px;color:#54656f;flex:0 0 12px;}

  .wa-scope .wa .row-msg{display:flex;margin-bottom:8px;}
  .wa-scope .wa .row-msg.out{justify-content:flex-end;}
  .wa-scope .wa .bubble{
    position:relative;max-width:65%;border-radius:8px;
    padding:6px 8px 8px 9px;
    box-shadow:0 1px .5px rgba(11,20,26,.13);
    font-size:14.2px;line-height:1.32;color:var(--wa-name);
    word-wrap:break-word;
  }
  .wa-scope .wa .bubble.in{background:var(--wa-bubble-in);border-top-left-radius:0;}
  .wa-scope .wa .bubble.out{background:var(--wa-bubble-out);border-top-right-radius:0;}
  .wa-scope .wa .bubble.in::before{
    content:"";position:absolute;top:0;left:-8px;width:8px;height:13px;
    background:var(--wa-bubble-in);
    clip-path:polygon(100% 0,0 0,100% 100%);
  }
  .wa-scope .wa .bubble.out::before{
    content:"";position:absolute;top:0;right:-8px;width:8px;height:13px;
    background:var(--wa-bubble-out);
    clip-path:polygon(0 0,100% 0,0 100%);
  }
  .wa-scope .wa .bubble .txt{padding-right:54px;white-space:pre-wrap;}
  .wa-scope .wa .bubble .meta{
    float:right;margin:6px 0 -2px 8px;
    font-size:11px;color:var(--wa-meta);
    display:inline-flex;align-items:center;gap:3px;line-height:1;
    position:relative;top:4px;
  }
  .wa-scope .wa .bubble .meta .tick{color:var(--wa-tick);display:inline-flex;}
  .wa-scope .wa .bubble .meta .tick svg{width:16px;height:16px;display:block;}

  /* image bubble */
  .wa-scope .wa .bubble.media{padding:3px 3px 4px 3px;max-width:330px;}
  .wa-scope .wa .bubble.media .img{
    width:100%;height:200px;border-radius:6px;overflow:hidden;position:relative;
    background:linear-gradient(135deg,#76b6e0,#3a7bb5 55%,#f3d27a);
  }
  .wa-scope .wa .bubble.media .img .sun{position:absolute;top:22px;right:30px;width:46px;height:46px;border-radius:50%;
    background:radial-gradient(circle,#fff6cf,#ffd76a);box-shadow:0 0 30px #ffe08a;}
  .wa-scope .wa .bubble.media .img .palm{position:absolute;bottom:0;left:18px;font-size:54px;line-height:1;filter:drop-shadow(0 2px 2px rgba(0,0,0,.2));}
  .wa-scope .wa .bubble.media .img .palm2{position:absolute;bottom:0;right:24px;font-size:42px;line-height:1;}
  .wa-scope .wa .bubble.media .img .wave{position:absolute;bottom:0;left:0;right:0;height:46px;
    background:linear-gradient(0deg,rgba(58,123,181,.85),transparent);}
  .wa-scope .wa .bubble.media .cap{padding:6px 6px 0 6px;font-size:14.2px;}
  .wa-scope .wa .bubble.media .cap .meta{top:2px;}

  /* audio bubble */
  .wa-scope .wa .bubble.audio{padding:8px 10px;max-width:330px;}
  .wa-scope .wa .audio-row{display:flex;align-items:center;gap:9px;}
  .wa-scope .wa .audio-av{width:42px;height:42px;border-radius:50%;flex:0 0 42px;position:relative;
    background:linear-gradient(135deg,#c2992f,#e0b94f);display:flex;align-items:center;justify-content:center;
    color:#fff;font-weight:600;font-size:14px;}
  .wa-scope .wa .audio-av .mic{position:absolute;bottom:-2px;right:-2px;width:17px;height:17px;border-radius:50%;
    background:#54656f;display:flex;align-items:center;justify-content:center;}
  .wa-scope .wa .audio-av .mic svg{width:11px;height:11px;color:#fff;}
  .wa-scope .wa .play-btn{border:none;background:transparent;color:#54656f;cursor:pointer;flex:0 0 26px;
    display:flex;align-items:center;justify-content:center;}
  .wa-scope .wa .play-btn svg{width:26px;height:26px;}
  .wa-scope .wa .wf{flex:1;height:26px;display:flex;align-items:center;gap:2px;position:relative;}
  .wa-scope .wa .wf .bar{width:2px;border-radius:1px;background:#9bb3a6;}
  .wa-scope .wa .wf .bar.played{background:#06cf9c;}
  .wa-scope .wa .wf .dot{position:absolute;top:50%;left:34%;transform:translateY(-50%);
    width:11px;height:11px;border-radius:50%;background:#06cf9c;box-shadow:0 0 0 1px #fff;}
  .wa-scope .wa .audio-dur{font-size:11px;color:var(--wa-meta);margin-top:4px;padding-left:35px;}
  .wa-scope .wa .audio-dur .meta-time{float:right;display:inline-flex;gap:3px;align-items:center;}

  /* composer */
  .wa-scope .wa .composer{
    min-height:62px;flex:0 0 auto;background:var(--wa-header);
    display:flex;align-items:flex-end;gap:8px;padding:10px 16px;
  }
  .wa-scope .wa .composer .wa-ic svg{width:26px;height:26px;}
  .wa-scope .wa .compose-input{
    flex:1;background:#fff;border-radius:8px;padding:9px 12px;
    display:flex;align-items:center;min-height:42px;
  }
  .wa-scope .wa .compose-input input{border:none;outline:none;flex:1;font-family:inherit;font-size:15px;color:var(--wa-name);background:transparent;}
  .wa-scope .wa .compose-input input::placeholder{color:var(--wa-meta);}

  /* hide the immersive nav on narrow screens already handled by app.css;
     keep the WA panel usable down to tablet */
  @media (max-width:1180px){
    .wa-scope.wa-frame{padding:12px 14px 14px;}
  }

  /* ============================================================
     Left-pane "Ordenar e filtrar" dropdown surface
     (the chat-chrome popovers now live in the shared chat-kit)
     ============================================================ */

  /* generic popover/dropdown surface, componentes de filtro (.pop*, .pop-item*) → filters.css (v3.80.0) */

  /* ============================================================
     Floating chat header (matches lead-detail.html): the right
     pane reads as a "floating card" with a small top gap + rounded
     top. Badges and action buttons come from the shared chat-kit.
     ============================================================ */

  /* let the right pane breathe so its header floats like a card */
  .wa-scope .wa .right{padding-top:10px;background:transparent;}
  .wa-scope .wa .right-header{
    height:auto;flex:0 0 auto;min-height:62px;
    border-radius:14px 14px 0 0;
    align-items:flex-start;padding:11px 16px 12px;
    box-shadow:0 -1px 0 rgba(17,27,33,.04);
  }
  .wa-scope .wa .rh-left{align-items:flex-start;gap:12px;}
  .wa-scope .wa .rh-avatar{margin-top:1px;}
  .wa-scope .wa .rh-info{display:flex;flex-direction:column;gap:5px;}
  .wa-scope .wa .rh-name{display:flex;align-items:center;gap:8px;min-width:0;}
  .wa-scope .wa .rh-name #cp-name-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .wa-scope .wa .rh-name .rh-phone{
    flex:none;font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:400;color:var(--wa-meta);
  }
  /* row that holds the shared chat-kit badges (.ck-window / .ck-assign) */
  .wa-scope .wa .rh-badges{display:flex;align-items:center;flex-wrap:wrap;gap:7px;}

  /* relative anchor for the left-pane sort/filter popover */
  .wa-scope .wa .left-header .wa-icon-row{position:relative;}

  /* ============================================================
     B2: Ações em massa (bulk select)
     ============================================================ */
  .wa-scope .wa .row-check{
    flex:0 0 0;width:0;overflow:hidden;opacity:0;
    display:flex;align-items:center;justify-content:center;
    transition:flex-basis .14s,width .14s,opacity .12s,margin .14s;margin:0;
  }
  /* `flex-basis` na regra de revelação, e não só `width` (W1.2/F2). A caixa é
     item de um flex container, e num item o `flex-basis` do atalho `flex:0 0 0`
     acima VENCE o `width`: medido headless, ela ficava 0x0, invisível e sem
     como clicar, e a barra de seleção em massa do Atendimento era inalcançável
     por este caminho. Tirar o flex-basis daqui reabre o buraco em silêncio. */
  .wa-scope .wa .chat-row:hover .row-check,
  .wa-scope .wa.bulk-mode .row-check{flex-basis:22px;width:22px;opacity:1;margin-right:1px;}
  /* `display:block` explícito (W1.2/F2). O chat.css, que é a pele antiga e
     carrega ANTES desta folha, tem `.convo-check{display:none}` de uma marcação
     que não existe mais, e nada aqui sobrescrevia: medido headless, o input
     computava `display:none`, então a caixa da conversa nunca apareceu desde o
     re-skin. Tirar esta linha apaga a caixa de novo, sem quebrar teste de
     lógica nenhum. */
  .wa-scope .wa .row-check input{
    display:block;margin:0;
    appearance:none;-webkit-appearance:none;
    width:18px;height:18px;border:2px solid #b8c0cc;border-radius:5px;
    background:#fff;cursor:pointer;flex:0 0 18px;position:relative;transition:.12s;
  }
  .wa-scope .wa .row-check input:checked{background:#2F5096;border-color:#2F5096;}
  .wa-scope .wa .row-check input:checked::after{
    content:"";position:absolute;top:1px;left:5px;width:5px;height:9px;
    border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
  }
  .wa-scope .wa .chat-row.sel{background:rgba(47,80,150,.07);}
  .wa-scope .wa .chat-row.sel:hover{background:rgba(47,80,150,.1);}

  .wa-scope .wa .bulk-bar{
    display:none;align-items:center;gap:8px;
    padding:9px 12px;background:#eef2fb;border-bottom:1px solid var(--wa-divider);
    font-family:"Hanken Grotesk",sans-serif;
  }
  .wa-scope .wa.bulk-mode .bulk-bar{display:flex;}
  .wa-scope .wa.bulk-mode .search-row{display:none;}
  .wa-scope .wa.bulk-mode .chips-row{display:none;}
  .wa-scope .wa .bulk-all{display:flex;align-items:center;gap:8px;flex:0 0 auto;cursor:pointer;}
  .wa-scope .wa .bulk-all input{
    appearance:none;-webkit-appearance:none;
    width:18px;height:18px;border:2px solid #93a0b5;border-radius:5px;
    background:#fff;cursor:pointer;flex:0 0 18px;position:relative;transition:.12s;
  }
  .wa-scope .wa .bulk-all input:checked{background:#2F5096;border-color:#2F5096;}
  .wa-scope .wa .bulk-all input:checked::after{
    content:"";position:absolute;top:1px;left:5px;width:5px;height:9px;
    border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
  }
  .wa-scope .wa .bulk-all input:indeterminate{background:#2F5096;border-color:#2F5096;}
  .wa-scope .wa .bulk-all input:indeterminate::after{
    content:"";position:absolute;top:7px;left:3px;width:10px;height:2px;
    background:#fff;border:none;transform:none;
  }
  .wa-scope .wa .bulk-count{font-size:13px;font-weight:700;color:#2F5096;flex:0 0 auto;}
  .wa-scope .wa .bulk-actions{display:flex;align-items:center;gap:2px;margin-left:auto;flex:0 0 auto;}
  .wa-scope .wa .bulk-act{
    display:flex;align-items:center;gap:5px;
    border:none;background:transparent;border-radius:8px;cursor:pointer;
    padding:6px 9px;font-family:inherit;font-size:12.5px;font-weight:600;color:#2F5096;
  }
  .wa-scope .wa .bulk-act:hover{background:rgba(47,80,150,.1);}
  .wa-scope .wa .bulk-act.danger{color:#c0392b;}
  .wa-scope .wa .bulk-act.danger:hover{background:rgba(192,57,43,.1);}
  /* --muted (#5A6373), não --wa-meta (#667781): medido, --wa-meta dá 4,14:1
     sobre o fundo #eef2fb da barra, abaixo do piso de 4,5:1 do WCAG AA para
     texto pequeno. --muted mede 5,40:1 no mesmo fundo. */
  .wa-scope .wa .bulk-act.muted{color:var(--muted);}
  .wa-scope .wa .bulk-act.muted:hover{background:rgba(0,0,0,.06);}
  .wa-scope .wa .bulk-act svg{width:16px;height:16px;}
  /* W1.2/F2: a barra ancora os seletores do lote, e ação fora da faixa de
     seleção dela (a "Unificar" da W1.4 pede exatamente dois) fica inerte e
     visível, porque sumir esconderia que ela existe.

     A barra quebra em DUAS linhas neste painel, e não é preferência: o painel
     da esquerda mede 360px fixos (30% do .wa, que nunca passa do min-width
     porque o frame tem max-width 1240), então sobram 335px úteis. Medido
     headless em 1440x900, as quatro ações mais o Limpar ocupavam exatamente
     335px em linha única, com Arquivar e Limpar já fora do painel. Com a
     contagem e o Limpar na primeira linha, a linha de ações usa 276px de 335. */
  .wa-scope .wa .bulk-bar{position:relative;flex-wrap:wrap;row-gap:4px;}
  .wa-scope .wa .bulk-actions{flex-basis:100%;margin-left:0;justify-content:flex-end;}
  .wa-scope .wa #bulk-clear{margin-left:auto;}
  .wa-scope .wa .bulk-act[disabled]{opacity:.42;cursor:default;}
  .wa-scope .wa .bulk-act[disabled]:hover{background:transparent;}
  .wa-scope .wa .bulk-bar .bulk-pop{right:10px;top:40px;min-width:220px;}

  /* ============================================================
     B4: Badge de janela 24h na lista + B7 chips (responsável/tag)
     ============================================================ */
  .wa-scope .wa .chat-meta-row{display:flex;align-items:center;gap:6px;margin-top:3px;flex-wrap:nowrap;overflow:hidden;}
  .wa-scope .wa .win-badge{
    display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;
    height:18px;padding:0 7px;border-radius:30px;
    font-size:10.5px;font-weight:600;font-family:"Hanken Grotesk",sans-serif;line-height:1;
  }
  .wa-scope .wa .win-badge svg{width:11px;height:11px;}
  .wa-scope .wa .win-badge.open{background:rgba(31,169,113,.12);color:#157a52;border:1px solid rgba(31,169,113,.25);}
  .wa-scope .wa .win-badge.closed{background:#f1f3f6;color:#667781;border:1px solid #e4e8ee;}
  .wa-scope .wa .win-badge.none{background:transparent;color:#9aa6b2;border:1px dashed #d6dce4;}

  .wa-scope .wa .assignee-chip{
    display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;
    height:18px;padding:0 7px 0 5px;border-radius:30px;
    background:rgba(47,80,150,.09);color:#2F5096;border:1px solid rgba(47,80,150,.16);
    font-size:10.5px;font-weight:600;font-family:"Hanken Grotesk",sans-serif;line-height:1;
    max-width:96px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .wa-scope .wa .assignee-chip svg{width:11px;height:11px;flex:0 0 11px;}
  .wa-scope .wa .tag-dot{
    display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;
    font-size:10.5px;font-weight:600;color:var(--wa-meta);font-family:"Hanken Grotesk",sans-serif;line-height:1;
  }
  .wa-scope .wa .tag-dot i{width:8px;height:8px;border-radius:50%;flex:0 0 8px;}

  /* B8: botão "atribuir" inline na linha */
  .wa-scope .wa .row-assign-btn{
    flex:0 0 26px;width:26px;height:26px;border:none;background:transparent;border-radius:50%;
    display:none;align-items:center;justify-content:center;cursor:pointer;color:var(--wa-icon);
  }
  .wa-scope .wa .chat-row:hover .row-assign-btn{display:flex;}
  .wa-scope .wa.bulk-mode .chat-row:hover .row-assign-btn{display:none;}
  .wa-scope .wa .row-assign-btn:hover{background:rgba(0,0,0,.07);}
  .wa-scope .wa .row-assign-btn svg{width:18px;height:18px;}

  /* ============================================================
     B9: Empty-state da lista
     ============================================================ */
  .wa-scope .wa .empty-state{
    display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;
    flex:1;padding:40px 28px;gap:12px;color:var(--wa-meta);
  }
  .wa-scope .wa .empty-state.show{display:flex;}
  .wa-scope .wa .empty-state .es-ic{
    width:64px;height:64px;border-radius:50%;background:#f0f2f5;
    display:flex;align-items:center;justify-content:center;color:#9aa6b2;
  }
  .wa-scope .wa .empty-state .es-ic svg{width:30px;height:30px;}
  .wa-scope .wa .empty-state h4{font-family:"Outfit",sans-serif;font-size:16px;font-weight:600;color:var(--wa-name);margin:0;}
  .wa-scope .wa .empty-state p{font-size:13px;line-height:1.45;margin:0;max-width:240px;}

  /* ============================================================
     B10: Submenu "Por estágio" dentro do dropdown
     ============================================================ */
  /* .pop-item.has-sub, .pi-caret, .stage-sub* → filters.css (v3.80.0) */

  /* ============================================================
     B6: Tipos de mídia nas bolhas
     ============================================================ */
  /* video */
  .wa-scope .wa .bubble.media .vid{
    width:100%;height:200px;border-radius:6px;overflow:hidden;position:relative;
    background:linear-gradient(135deg,#2d5a3d,#1f7a4d 55%,#9fd9a8);
  }
  .wa-scope .wa .bubble.media .vid .road{position:absolute;bottom:0;left:0;right:0;height:60px;
    background:linear-gradient(0deg,rgba(20,40,28,.7),transparent);}
  .wa-scope .wa .bubble.media .vid .mtn{position:absolute;bottom:38px;left:20px;font-size:46px;line-height:1;}
  .wa-scope .wa .bubble.media .vid .play-overlay{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:50px;height:50px;border-radius:50%;background:rgba(0,0,0,.55);
    display:flex;align-items:center;justify-content:center;color:#fff;
  }
  .wa-scope .wa .bubble.media .vid .play-overlay svg{width:26px;height:26px;}
  .wa-scope .wa .bubble.media .vid .vid-dur{
    position:absolute;top:8px;left:8px;display:inline-flex;align-items:center;gap:4px;
    background:rgba(0,0,0,.5);color:#fff;font-size:11px;font-weight:600;padding:2px 7px;border-radius:20px;
  }
  .wa-scope .wa .bubble.media .vid .vid-dur svg{width:11px;height:11px;}

  /* document */
  .wa-scope .wa .bubble.doc{max-width:300px;}
  .wa-scope .wa .doc-card{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.04);border-radius:8px;padding:11px 12px;}
  .wa-scope .wa .doc-card .doc-ic{
    width:38px;height:46px;flex:0 0 38px;border-radius:5px;background:#fff;
    display:flex;align-items:center;justify-content:center;color:#d23f3f;
    box-shadow:0 1px 2px rgba(0,0,0,.12);position:relative;
  }
  .wa-scope .wa .doc-card .doc-ic svg{width:22px;height:22px;}
  .wa-scope .wa .doc-card .doc-info{min-width:0;flex:1;}
  .wa-scope .wa .doc-card .doc-name{font-size:13.5px;font-weight:600;color:var(--wa-name);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .wa-scope .wa .doc-card .doc-sub{font-size:11.5px;color:var(--wa-meta);margin-top:2px;}
  .wa-scope .wa .doc-card .doc-dl{flex:0 0 auto;color:#54656f;display:flex;align-items:center;}
  .wa-scope .wa .doc-card .doc-dl svg{width:22px;height:22px;}
  .wa-scope .wa .bubble.doc .meta{margin-top:5px;}

  /* sticker */
  .wa-scope .wa .row-msg .bubble.sticker{
    background:transparent!important;box-shadow:none;padding:0;max-width:140px;
  }
  .wa-scope .wa .bubble.sticker::before{display:none;}
  .wa-scope .wa .bubble.sticker .stk{
    width:128px;height:128px;border-radius:14px;
    display:flex;align-items:center;justify-content:center;font-size:84px;line-height:1;
    filter:drop-shadow(0 2px 3px rgba(0,0,0,.18));
  }
  .wa-scope .wa .bubble.sticker .stk-meta{
    text-align:right;font-size:11px;color:var(--wa-meta);margin-top:2px;
    display:flex;align-items:center;justify-content:flex-end;gap:4px;
  }

  /* location */
  .wa-scope .wa .bubble.loc{padding:3px 3px 6px 3px;max-width:300px;}
  .wa-scope .wa .loc-map{
    width:100%;height:130px;border-radius:6px 6px 0 0;overflow:hidden;position:relative;
    background:
      linear-gradient(135deg,#dfe7d6,#cdd9c4),
      repeating-linear-gradient(0deg,transparent,transparent 22px,rgba(255,255,255,.6) 22px,rgba(255,255,255,.6) 24px),
      repeating-linear-gradient(90deg,transparent,transparent 30px,rgba(255,255,255,.6) 30px,rgba(255,255,255,.6) 32px);
  }
  .wa-scope .wa .loc-map .road-d{position:absolute;top:40%;left:-10%;right:-10%;height:10px;background:#f3d27a;transform:rotate(-8deg);}
  .wa-scope .wa .loc-map .pin{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);color:#e63946;
  }
  .wa-scope .wa .loc-map .pin svg{width:30px;height:30px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3));}
  .wa-scope .wa .loc-info{padding:6px 8px 0;}
  .wa-scope .wa .loc-info b{font-size:13.5px;font-weight:600;color:var(--wa-name);display:block;}
  .wa-scope .wa .loc-info small{font-size:12px;color:var(--wa-meta);}
  .wa-scope .wa .bubble.loc .meta{margin-top:3px;}

  /* reaction chip overlapping a previous bubble */
  .wa-scope .wa .row-msg.has-reaction{margin-bottom:18px;}
  .wa-scope .wa .bubble{overflow:visible;}
  .wa-scope .wa .reaction{
    position:absolute;bottom:-13px;right:8px;
    background:#fff;border:1px solid var(--wa-divider);border-radius:20px;
    padding:1px 6px;font-size:13px;line-height:1.4;
    box-shadow:0 1px 2px rgba(11,20,26,.13);z-index:2;
  }
  .wa-scope .wa .row-msg.out .reaction{right:auto;left:8px;}

  /* unsupported message */
  .wa-scope .wa .bubble.unsupported .txt{
    display:flex;align-items:center;gap:7px;color:var(--wa-meta);font-style:italic;padding-right:0;
  }
  .wa-scope .wa .bubble.unsupported svg{width:16px;height:16px;flex:0 0 16px;color:#9aa6b2;}

  /* media processing placeholder */
  .wa-scope .wa .bubble.processing{max-width:240px;}
  .wa-scope .wa .proc-row{display:flex;align-items:center;gap:9px;color:var(--wa-meta);font-size:13.5px;}
  .wa-scope .wa .proc-spin{
    width:18px;height:18px;flex:0 0 18px;border-radius:50%;
    border:2px solid rgba(0,0,0,.15);border-top-color:#54656f;
    animation:wa-spin .8s linear infinite;
  }
  @keyframes wa-spin{to{transform:rotate(360deg);}}

  /* ============================================================
     B5: Bolha otimista (enviando / falha)
     ============================================================ */
  .wa-scope .wa .bubble.out.pending{opacity:.78;}
  .wa-scope .wa .bubble.out.pending .meta .tick{color:var(--wa-meta);}
  .wa-scope .wa .bubble.out.failed{box-shadow:0 1px .5px rgba(11,20,26,.13),0 0 0 1px rgba(192,57,43,.35);}
  .wa-scope .wa .send-fail{
    display:flex;align-items:center;gap:5px;margin-top:5px;
    font-size:11.5px;color:#c0392b;font-weight:600;
  }
  .wa-scope .wa .send-fail svg{width:14px;height:14px;flex:0 0 14px;}
  .wa-scope .wa .send-fail .retry{color:#c0392b;text-decoration:underline;cursor:pointer;}

  /* ============================================================
     B11: Composer read-only / per-channel note (Unificado vs número)
     ============================================================ */
  .wa-scope .wa .composer-note{
    display:none;flex:0 0 auto;align-items:center;justify-content:center;gap:8px;
    min-height:52px;padding:10px 16px;background:var(--wa-header);
    font-family:"Hanken Grotesk",sans-serif;font-size:13px;color:var(--wa-meta);text-align:center;
  }
  .wa-scope .wa .composer-note svg{width:16px;height:16px;flex:0 0 16px;color:#9aa6b2;}
  .wa-scope .wa.unified-view .composer{display:none;}
  .wa-scope .wa.unified-view .composer-note{display:flex;}
  .wa-scope .wa .ch-note{
    display:none;align-items:center;justify-content:center;gap:6px;
    padding:5px 16px;background:#fff;border-top:1px solid var(--wa-divider);
    font-family:"Hanken Grotesk",sans-serif;font-size:11.5px;font-weight:600;color:#157a52;
  }
  .wa-scope .wa .ch-note svg{width:12px;height:12px;flex:0 0 12px;}
  .wa-scope .wa:not(.unified-view) .ch-note.show{display:flex;}

  /* row-assign popover (B8) reuses .pop look; positioned via JS */
  .wa-scope .wa #rowAssignPop{min-width:200px;}

  /* B10/B8 chips on small panes stay tidy */
  @media (max-width:1180px){
    .wa-scope .wa .assignee-chip{max-width:74px;}
  }

  /* Drawer "Dados do contato": agora é o .ck-crm.drawer do chat-kit (chat-kit.css:
     .ck-ov + .ck-crm.drawer + grid multi-coluna em .ck-pane[data-crm-pane]).
     O drawer autorado aqui (.lead-drawer/.ld-drawer-*) foi removido, era estreito
     p/ o layout de 2 colunas antigo e duplicava o cabeçalho do _lead-crm. */