/* Bolha informativa do FiveDesk — uma só, em todas as páginas e em todos os temas (28/10/2026).
   Bolha informativa = a que aparece com o cursor sobre o item. O padrão é a dica da troca de cards do
   Painel (.fd-dashboard-switch-tip, dashboard-premium-glow.css): fundo grafite, borda branca translúcida,
   cantos de 8px, texto branco de 12px, sem seta. Antes cada página tinha a sua (branca na barra, grafite
   no Painel, azul-marinho no tema escuro, clara em Conexões e no Chat).
   As folhas das páginas carregam depois e algumas usam !important com #id; o prefixo
   html:not(#fd-bolha-a):not(#fd-bolha-b) dá a especificidade para valer sobre elas sem depender da ordem. */
:root{--fd-bolha-bg:#252830;--fd-bolha-ink:#fff;--fd-bolha-ink-2:rgba(255,255,255,.82);--fd-bolha-ink-3:rgba(255,255,255,.65);--fd-bolha-borda:#ffffff30;--fd-bolha-raio:8px;--fd-bolha-sombra:0 4px 12px #0003}

/* Dicas curtas (um rótulo): o padrão inteiro da referência. */
html:not(#fd-bolha-a):not(#fd-bolha-b) :is(
  .fd-shared-tooltip,
  #fdBouncyNav .fd-dock-tooltip,
  .fd-bouncy-nav .fd-dock-tooltip,
  .fd-topbar-tooltip-overlay,
  .fd-composer-emotion .fd-mood-tooltip,
  .fd-dashboard-switch-tip,
  #page-clientes .campo-ajuda-balloon
){padding:6px 9px!important;border:1px solid var(--fd-bolha-borda)!important;border-radius:var(--fd-bolha-raio)!important;background:var(--fd-bolha-bg)!important;color:var(--fd-bolha-ink)!important;box-shadow:var(--fd-bolha-sombra)!important;font-size:12px!important;font-weight:500!important;line-height:1.2!important;letter-spacing:normal!important;text-transform:none!important}

/* Bolhas de conteúdo (frases, linhas de dados): mesmas cores, borda, cantos e sombra; o layout de cada uma fica. */
html:not(#fd-bolha-a):not(#fd-bolha-b) :is(
  #page-clientes .cx2-st-since-balloon,
  .h-card-help-popup,
  #page-chats .chats-msg-edited-popover,
  #page-acompanhamento .acomp-kcard-class-tooltip,
  #page-relatorios .relatorios-fd :is(.chart-tip,.combo-tip,.heat-tip,.riskmap-tip,.dep-tip,.prj-tip)
){border:1px solid var(--fd-bolha-borda)!important;border-radius:var(--fd-bolha-raio)!important;background:var(--fd-bolha-bg)!important;color:var(--fd-bolha-ink)!important;box-shadow:var(--fd-bolha-sombra)!important}

/* Sem seta, como a referência. */
html:not(#fd-bolha-a):not(#fd-bolha-b) :is(.fd-shared-tooltip,.fd-dock-tooltip,.fd-topbar-tooltip-overlay,.fd-mood-tooltip,#page-clientes .cx2-st-since-balloon,#page-clientes .campo-ajuda-balloon)::before,
html:not(#fd-bolha-a):not(#fd-bolha-b) :is(.fd-shared-tooltip,.fd-dock-tooltip,.fd-topbar-tooltip-overlay,.fd-mood-tooltip,#page-clientes .cx2-st-since-balloon,#page-clientes .campo-ajuda-balloon)::after{display:none!important}

/* Texto interno que era escuro (pensado para bolha clara) passa a ler no grafite. */
html:not(#fd-bolha-a):not(#fd-bolha-b) :is(#page-clientes .cx2-st-since-balloon,#page-chats .chats-msg-edited-popover,#page-clientes .campo-ajuda-balloon,#page-acompanhamento .acomp-kcard-class-tooltip) *{color:inherit!important}
html:not(#fd-bolha-a):not(#fd-bolha-b) #page-relatorios .relatorios-fd .chart-tip :is(.tp-h,.tp-r .vl){color:var(--fd-bolha-ink)!important}
html:not(#fd-bolha-a):not(#fd-bolha-b) #page-relatorios .relatorios-fd .chart-tip .tp-r .nm{color:var(--fd-bolha-ink-2)!important}
html:not(#fd-bolha-a):not(#fd-bolha-b) #page-relatorios .relatorios-fd .chart-tip .tp-pct{color:var(--fd-bolha-ink-3)!important}
html:not(#fd-bolha-a):not(#fd-bolha-b) #page-relatorios .relatorios-fd .dep-tip .tsub{border-top-color:rgba(255,255,255,.15)!important}