/* =====================================================================
   VISUAL NOVO DO ATENDIMENTO, versão 3 (07/10/2026). Skill design-sistemas.

   Histórico do mesmo dia:
   - v1, só acabamento: o Marcelo achou fraca.
   - v2, a essência da skill na família do sys (marinho e âmbar): gostou do
     desenho, mas no modo claro "as cores ficaram muito fortes".
   - v3, esta: o DESENHO da v2 fica (tudo flutuando sobre o chão, cantos
     grandes, uma sombra só, pílulas, herói, movimento) e as CORES do modo
     claro voltam a ser as leves de antes: o azul claro nos balões nossos e o
     azul do atendimento nos destaques. O modo escuro continua o da v2.

   As cores fortes viraram variáveis (--ds-ativo-*, --ds-balao-*, --ds-heroi-*,
   --ds-trilho): o claro e o escuro só trocam os valores.

   Como funciona: o Chatwoot pinta tudo a partir de variáveis (--surface-1,
   --background-color...). Trocando as variáveis dentro da prévia, a tela
   inteira muda junto, sem caçar peça por peça.

   Regras que continuam valendo:
   - Altura de 109 px do cartão da lista no computador (o virtualizador
     depende dela). Nada aqui mexe em altura de item da lista.
   - Nada de transição em width, height, top, left ou background na lista
     (regra do efeitos.css: só transform e opacity).
   - No celular, os balões verde e branco de WhatsApp (pedido de 30/07) são
     do inject, com !important, e esta folha não briga com eles.
   - Sem atalho `font:` (descarta a regra inteira, lição de 30/07).
   - Tudo preso a html[data-ds-at]: sem a marca, nada daqui vale.
   ===================================================================== */

/* ---------- tokens: modo claro (leve, com a cara de antes) ---------- */
html[data-ds-at] {
  --ds-page:  #e8ecf2;   /* o chão, atrás de tudo */
  --ds-panel: #f4f6f9;   /* as grandes áreas: menu, lista, conversa, coluna do lead */
  --ds-card:  #fdfdfe;   /* o que se toca: cartões, balões, campos */
  --ds-hair:  #e3e8ef;   /* fio de 1px, quase nunca */
  --ds-ink:   #0f1a2a;
  --ds-muted: #5b6b80;
  --ds-faint: #6b7a90;

  /* destaque: o azul do atendimento, em tons leves */
  --ds-azul: #1f93ff;
  --ds-trilho: #1f93ff;                 /* o traço do item ativo */
  --ds-ativo-fundo: #e3efff;            /* pílula ativa: aba, barra do celular */
  --ds-ativo-txt: #1565c0;
  --ds-ativo-sombra: 0 4px 12px -6px rgba(31, 147, 255, .45);

  /* balão nosso: o azul claro de antes, agora com o canto novo */
  --ds-balao: #daecff;
  --ds-balao-txt: #1c2024;
  --ds-balao-meta: rgba(28, 32, 36, .55);
  --ds-balao-link: #1565c0;
  --ds-balao-sombra: 0 1px 2px rgba(15, 23, 42, .06);

  /* herói do lead: claro no modo claro (textura só no escuro, regra da skill) */
  --ds-heroi: linear-gradient(135deg, #eaf3ff 0%, #f7faff 55%, #fdfdfe 100%);
  --ds-heroi-txt: var(--ds-ink);
  --ds-heroi-ponta: var(--ds-faint);
  --ds-heroi-vazio: #e1e8f1;
  --ds-heroi-sombra: inset 0 0 0 1px #dbe7f7;

  --ds-rose-bg: #fdeceb;
  --ds-r-lg: 26px;  --ds-r-md: 20px;  --ds-r-sm: 14px;  --ds-r-xs: 12px;
  --ds-gap: 10px;

  --ds-shadow: 0 1px 2px rgba(10, 19, 32, .05), 0 10px 26px -14px rgba(10, 19, 32, .2);
  --ds-shadow-alta: 0 2px 4px rgba(10, 19, 32, .05), 0 20px 40px -18px rgba(10, 19, 32, .26);
  --ds-shadow-pop: 0 0 0 1px var(--ds-hair), 0 24px 60px -20px rgba(10, 19, 32, .3);
  --ds-focus: 0 0 0 3px var(--ds-card), 0 0 0 5px var(--ds-azul);
  --ds-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- tokens: modo escuro (o da v2, que ficou bom) ---------- */
html[data-ds-at]:is(.dark, .playad-escuro), html[data-ds-at] body.dark {
  --ds-page:  #0b0e13;
  --ds-panel: #12161d;
  --ds-card:  #191e27;
  --ds-hair:  #252c37;
  --ds-ink:   #e9edf3;
  --ds-muted: #a3adbb;
  --ds-faint: #8590a1;

  --ds-azul: #4a6fa5;
  --ds-trilho: #f6a01c;
  --ds-ativo-fundo: linear-gradient(180deg, #2a4a75, #13243b);
  --ds-ativo-txt: #f2f6fb;
  --ds-ativo-sombra: 0 6px 14px -8px rgba(0, 0, 0, .6);

  --ds-balao: linear-gradient(160deg, #4a6fa5 0%, #1c3352 60%, #13243b 100%);
  --ds-balao-txt: #eef3f9;
  --ds-balao-meta: rgba(238, 243, 249, .68);
  --ds-balao-link: #ffd38f;
  --ds-balao-sombra: 0 12px 26px -16px rgba(0, 0, 0, .65);

  --ds-heroi: color-mix(in srgb, #13243b 55%, #000);
  --ds-heroi-txt: #eef3f9;
  --ds-heroi-ponta: rgba(238, 243, 249, .55);
  --ds-heroi-vazio: rgba(255, 255, 255, .16);
  --ds-heroi-sombra: 0 14px 30px -16px rgba(0, 0, 0, .7);

  --ds-rose-bg: #33201f;
  --ds-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 12px 28px -14px rgba(0, 0, 0, .75);
  --ds-shadow-alta: 0 2px 4px rgba(0, 0, 0, .5), 0 24px 48px -18px rgba(0, 0, 0, .8);
  --ds-shadow-pop: 0 0 0 1px var(--ds-hair), 0 24px 60px -20px rgba(0, 0, 0, .8);
}

/* ---------- as cores do próprio Chatwoot: só os cinzas mudam ----------
   O Chatwoot guarda cada cor como "R G B". O :root dele vale (0,1,0); estas
   valem mais, e o bloco claro não pega quando o escuro está ligado. O azul
   dos balões e dos botões fica o de fábrica no claro. */
html[data-ds-at]:not(.dark):not(.playad-escuro) {
  --background-color: 232 236 242;
  --surface-1: 244 246 249;
  --surface-2: 244 246 249;
  --solid-1: 253 253 254;
  --solid-2: 253 253 254;
  --solid-3: 253 253 254;
  --border-weak: 227 232 239;
}
html[data-ds-at]:is(.dark, .playad-escuro), html[data-ds-at] body.dark {
  --background-color: 11 14 19;
  --surface-1: 18 22 29;
  --surface-2: 18 22 29;
  --solid-1: 25 30 39;
  --solid-2: 25 30 39;
  --solid-3: 37 44 55;
  --border-weak: 37 44 55;
}

/* ---------- as nossas cores (--pl-*): só fundos e bordas ----------
   :root[data-ds-at] vale (0,2,0) e passa o html.playad-escuro do inject.
   O cartão aberto da lista é desenhado aqui embaixo (cartão que flutua com
   o traço azul); a pintura antiga dele fica transparente. */
:root[data-ds-at] {
  --pl-sup: var(--ds-card);
  --pl-sup2: var(--ds-panel);
  --pl-borda: #dfe5ee;
  --pl-borda2: var(--ds-hair);
  --pl-sel-fundo: transparent;
  --pl-sel-barra: transparent;
  --pl-sel-txt: #1d4ed8;
}
:root[data-ds-at].playad-escuro {
  --pl-sup: #191e27;
  --pl-sup2: #12161d;
  --pl-borda: #2b3340;
  --pl-borda2: #252c37;
  --pl-sel-fundo: transparent;
  --pl-sel-barra: transparent;
  --pl-sel-txt: #e9edf3;
}

html[data-ds-at] :is(button, a, input, select, [tabindex]):focus-visible {
  outline: 0;
  box-shadow: var(--ds-focus);
}

/* =====================================================================
   1. A MOLDURA (computador): tudo flutua sobre o chão
   ===================================================================== */
@media (min-width: 768px) {
  /* menu: painel solto, canto grande */
  html[data-ds-at] aside {
    --background-color: 244 246 249;   /* o degradê de rolagem do menu pega a cor do menu */
    align-self: stretch;
    height: auto;
    margin: var(--ds-gap) 0 var(--ds-gap) var(--ds-gap);
    padding: 8px 4px 10px;
    border-radius: var(--ds-r-lg);
    background: var(--ds-panel);
    box-shadow: var(--ds-shadow);
  }
  html[data-ds-at]:is(.dark, .playad-escuro) aside, html[data-ds-at] body.dark aside { --background-color: 18 22 29; }
  /* telas do Chatwoot que não são a conversa: um quadro só, solto */
  html[data-ds-at] main {
    align-self: stretch;
    height: auto;
    margin: var(--ds-gap);
    border-radius: var(--ds-r-lg);
    box-shadow: var(--ds-shadow);
  }
  /* a conversa: as três colunas viram três painéis com respiro entre eles */
  html[data-ds-at] main:has(.conversations-list-wrap) {
    margin: 0;
    padding: var(--ds-gap);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  html[data-ds-at] main:has(.conversations-list-wrap) > section { gap: var(--ds-gap); }
  html[data-ds-at] .conversations-list-wrap,
  html[data-ds-at] .conversation-details-wrap,
  html[data-ds-at] main section > div.bg-n-surface-2 {
    border: 0;
    border-radius: var(--ds-r-lg);
    background: var(--ds-panel);
    box-shadow: var(--ds-shadow);
  }
  html[data-ds-at] .conversation-details-wrap { border-left-width: 0; }
  /* a lista rola dentro do canto redondo */
  html[data-ds-at] .conversations-list { border-radius: 0 0 var(--ds-r-lg) var(--ds-r-lg); }
}

/* =====================================================================
   2. MENU LATERAL
   ===================================================================== */
html[data-ds-at] aside #sidebar-account-switcher span {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.025em;
}
/* rótulo de grupo ("Pastas") em caixa alta, como na skill */
html[data-ds-at] aside div[class~="pointer-events-none"][class~="text-n-slate-10"] {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ds-faint);
}
html[data-ds-at] aside :is(a, li > div) { border-radius: 12px; }
/* item ativo: vira cartão branco com o traço azul à esquerda */
html[data-ds-at] aside :is(a[class~="bg-n-alpha-2"], a.active) {
  position: relative;
  background: var(--ds-card);
  box-shadow: var(--ds-shadow);
  color: var(--ds-ink);
  font-weight: 600;
}
html[data-ds-at] aside :is(a[class~="bg-n-alpha-2"], a.active)::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  width: 3px;
  height: 14px;
  margin-top: -7px;
  border-radius: 3px;
  background: var(--ds-trilho);
}

/* =====================================================================
   3. LISTA DE CONVERSAS
   ===================================================================== */
/* título "Conversas": apertado, como os títulos da skill */
html[data-ds-at] .conversations-list-wrap > div:first-child h1 {
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -.035em;
  color: var(--ds-ink);
}
/* abas Minhas / Não atribuídas / Todos: controle de pílula */
html[data-ds-at] .conversations-list-wrap > div:has(a[class*="after:bg-"]) {
  border-bottom: 0;
  margin: 2px 0 6px;
  height: auto;
}
html[data-ds-at] .conversations-list-wrap ul:has(> li > a[class*="after:bg-"]) {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--ds-card);
  box-shadow: var(--ds-shadow);
}
html[data-ds-at] .conversations-list-wrap li:has(> a[class*="after:bg-"]) {
  position: relative;
  z-index: 1;
  margin: 0;
}
html[data-ds-at] .conversations-list-wrap a[class*="after:bg-"] {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--ds-muted);
  transition: color .25s ease;
}
html[data-ds-at] .conversations-list-wrap a[class*="after:bg-"]::after { display: none; }
html[data-ds-at] .conversations-list-wrap a[class~="after:bg-n-brand"] {
  color: var(--ds-ativo-txt);
  background: var(--ds-ativo-fundo);
}
/* com o movimento ligado (ds-atendimento.js), quem pinta é a pílula que desliza.
   A marca vai em atributo de dados: o Vue reescreve o class a cada atualização. */
html[data-ds-at] [data-ds-at-pilula] a[class~="after:bg-n-brand"] { background: none; }
html[data-ds-at] .ds-at-pilula {
  position: absolute;
  top: 4px;
  left: 0;
  z-index: 0;
  height: 30px;
  border-radius: 999px;
  transform-origin: 0 50%;
  pointer-events: none;
  background: var(--ds-ativo-fundo);
  box-shadow: var(--ds-ativo-sombra);
}
/* busca: pílula sobre o painel (o inject usa !important, e a faixa atrás
   dela tinha fundo próprio) */
html[data-ds-at] div:has(> #playad-busca-input) { background: transparent !important; }
html[data-ds-at] #playad-busca-input {
  height: 42px !important;
  border-radius: 999px !important;
  border-color: transparent !important;
  background: var(--ds-card) !important;
  box-shadow: var(--ds-shadow) !important;
  color: var(--ds-ink);
}
html[data-ds-at] #playad-busca-input::placeholder { color: var(--ds-faint); }
html[data-ds-at] #playad-busca-input:focus { outline: 0; box-shadow: var(--ds-focus) !important; }
html[data-ds-at] #playad-visao { border-radius: 999px; }
/* a faixa e a janela de prioridade ganharam desenho próprio no inject (07/10) */
html[data-ds-at] .conversations-list { background: transparent; }

/* cada conversa: o fundo vira uma camada (::after) que só aparece no
   passar do mouse e no cartão aberto. A altura do item não muda. */
html[data-ds-at] .conversations-list .conversation {
  isolation: isolate;
  background-color: transparent;
  font-variant-numeric: tabular-nums;
}
html[data-ds-at] .conversations-list .conversation:hover { background-color: transparent; }
html[data-ds-at] .conversations-list .conversation::after {
  content: "";
  position: absolute;
  inset: 4px 6px;
  z-index: -1;
  border-radius: 16px;
  background: var(--ds-card);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
html[data-ds-at] .conversations-list .conversation:hover::after { opacity: .65; }
/* o cartão aberto (pedido de 05/08: bem marcado) flutua, com o traço azul */
html[data-ds-at] .conversations-list .conversation:is(.active, :has(.active))::after {
  opacity: 1;
  background:
    linear-gradient(var(--ds-trilho), var(--ds-trilho)) 0 50% / 4px 46% no-repeat,
    var(--ds-card);
  box-shadow: var(--ds-shadow-alta);
}
/* selo de não lidas: a cor de antes, com um anel da cor do painel */
html[data-ds-at] .conversations-list .conversation span.rounded-full.text-xxs {
  box-shadow: 0 0 0 2px var(--ds-panel);
}

/* =====================================================================
   4. CONVERSA
   ===================================================================== */
/* cabeçalho: nome apertado (maior só no computador: no celular o nome divide
   a linha com a etiqueta e o Resolver, e maior ele virava "D..") */
html[data-ds-at] .conversation-details-wrap > div:first-child span.font-medium.truncate {
  letter-spacing: -.02em;
  color: var(--ds-ink);
}
@media (min-width: 768px) {
  html[data-ds-at] .conversation-details-wrap > div:first-child span.font-medium.truncate {
    font-size: 15.5px;
    font-weight: 650;
  }
}
html[data-ds-at] .conversation-details-wrap > div:first-child button { border-radius: 999px; }
/* o miolo da conversa e a área da caixa de resposta ficam sem fundo próprio:
   quem pinta é o painel, com o canto redondo */
html[data-ds-at] ul.conversation-panel,
html[data-ds-at] .conversation-details-wrap div.flex.relative.flex-col.bg-n-surface-1 {
  background: transparent;
}

/* balão de quem escreveu para nós: cartão claro com a sombra embaixo */
html[data-ds-at] ul.conversation-panel .left-bubble {
  border-radius: 20px 20px 20px 6px;
  background-color: var(--ds-card);
  box-shadow: var(--ds-shadow);
}
/* balão nosso: no claro, o azul claro de antes; no escuro, marinho em
   degradê. O balão de áudio vem com fundo transparente de fábrica e fica. */
html[data-ds-at] ul.conversation-panel .right-bubble.bg-n-solid-blue:not(.bg-transparent) {
  border-radius: 20px 20px 6px 20px;
  color: var(--ds-balao-txt);
  background: var(--ds-balao);
  box-shadow: var(--ds-balao-sombra);
}
html[data-ds-at] ul.conversation-panel .right-bubble.bg-n-solid-blue:not(.bg-transparent) :is(p, span, div, li, strong, em, h1, h2, h3) {
  color: inherit;
}
html[data-ds-at] ul.conversation-panel .right-bubble.bg-n-solid-blue:not(.bg-transparent) a { color: var(--ds-balao-link); }
html[data-ds-at] ul.conversation-panel .right-bubble.bg-n-solid-blue:not(.bg-transparent) [class*="text-n-slate-1"] {
  color: var(--ds-balao-meta);
}
/* peças claras dentro do balão (arquivo, áudio, prévia de link): texto
   escuro sempre, senão o nome do PDF some no cartãozinho branco */
html[data-ds-at] ul.conversation-panel .right-bubble.bg-n-solid-blue :is([class*="bg-n-alpha-white"], [class*="bg-white"], [class*="bg-n-solid-1"], [class*="bg-n-solid-2"]),
html[data-ds-at] ul.conversation-panel .right-bubble.bg-n-solid-blue :is([class*="bg-n-alpha-white"], [class*="bg-white"], [class*="bg-n-solid-1"], [class*="bg-n-solid-2"]) * {
  color: var(--ds-ink) !important;
}
/* notas privadas e mensagens do robô mantêm a cor de fábrica, só o canto muda */
html[data-ds-at] ul.conversation-panel .right-bubble:not(.bg-n-solid-blue) {
  border-radius: 20px 20px 6px 20px;
  box-shadow: var(--ds-shadow);
}

/* caixa de resposta: cartão solto sobre o painel, botão Enviar em pílula */
html[data-ds-at] .reply-box {
  margin: 0 var(--ds-gap) var(--ds-gap);
  border-color: transparent !important;
  border-radius: 22px;
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-alta);
  transition: box-shadow .25s ease;
}
html[data-ds-at] .reply-box:focus-within {
  box-shadow: var(--ds-shadow-alta), 0 0 0 4px color-mix(in srgb, var(--ds-azul) 14%, transparent);
}
html[data-ds-at] .reply-box > div:first-child { border-bottom: 1px solid var(--ds-hair); }
html[data-ds-at] .reply-box > div:first-child button { border-radius: 999px; }
html[data-ds-at] .reply-box button.bg-n-brand {
  height: 38px;
  padding: 0 20px;
  border-radius: 999px;
  outline: 0;
  font-weight: 600;
  box-shadow: 0 6px 14px -8px rgba(31, 147, 255, .6);
}
/* faixa das turmas: vidro, no mesmo lugar */
html[data-ds-at] .playad-turmas-chip {
  border-radius: 999px;
  border-color: transparent;
  background: color-mix(in srgb, var(--ds-card) 80%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: var(--ds-shadow-alta);
}

/* =====================================================================
   5. COLUNA DO LEAD
   ===================================================================== */
/* nome do lead: apertado */
html[data-ds-at] main section > div.bg-n-surface-2 .relative.items-center.w-full.p-4 :is(h3, span.text-base, span.font-medium) {
  letter-spacing: -.025em;
}
/* bloco Agente e Etiquetas: cartão */
html[data-ds-at] [data-playad-sec="acoes"] .outline {
  outline-color: transparent;
  border-radius: var(--ds-r-md);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow);
}
html[data-ds-at] main section > div.bg-n-surface-2 button.drag-handle {
  border-radius: var(--ds-r-sm);
  outline-color: transparent;
  background: var(--ds-card);
}

/* o cartão do lead */
html[data-ds-at] .playad-cartao {
  border-color: transparent;
  border-radius: var(--ds-r-md);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow);
}
/* O HERÓI DA COLUNA: a etapa do funil. No claro, azul bem leve; no escuro,
   escuro com anéis e brilho âmbar (textura só no escuro, regra da skill). */
html[data-ds-at] .playad-cartao .playad-funil {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 6px 6px 0;
  padding: 14px 16px 12px;
  border-radius: 16px;
  color: var(--ds-heroi-txt);
  background: var(--ds-heroi);
  box-shadow: var(--ds-heroi-sombra);
}
html[data-ds-at]:is(.dark, .playad-escuro) .playad-cartao .playad-funil::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-radial-gradient(ellipse at 95% 105%, transparent 0 11px, color-mix(in srgb, #f6a01c 22%, transparent) 12px 13px),
    radial-gradient(60% 70% at 100% 100%, #2a4a75, transparent 70%),
    radial-gradient(55% 55% at 0% 0%, #13243b, transparent 70%);
}
html[data-ds-at]:is(.dark, .playad-escuro) .playad-cartao .playad-funil::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(90% 80% at 100% 100%, color-mix(in srgb, #f6a01c 26%, transparent), transparent 60%);
}
html[data-ds-at] .playad-funil .fb i { height: 6px; border-radius: 999px; }
html[data-ds-at] .playad-funil .fb i:not(.f) { background: var(--ds-heroi-vazio); }
html[data-ds-at] .playad-funil .fl .et {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.02em;
}
html[data-ds-at]:is(.dark, .playad-escuro) .playad-funil .fl .et { filter: brightness(1.35) saturate(1.1); }
html[data-ds-at] .playad-funil .fl .ponta { color: var(--ds-heroi-ponta); }
/* os avisos moram embaixo dos botões desde 07/10: um fio os separa da grade */
html[data-ds-at] .playad-cartao .playad-status { background: transparent; border-top: 1px solid var(--ds-hair); }

/* grade de ações: itens cinza dentro do cartão branco (camada certa), que
   sobem e viram cartão no passar do mouse, e afundam no toque */
html[data-ds-at] .playad-acoes {
  gap: 8px;
  padding: 10px;
  background: transparent;
  border-top-color: transparent;
}
html[data-ds-at] .playad-acoes .playad-ac {
  border-radius: var(--ds-r-sm);
  border-color: transparent;
  background: var(--ds-panel);
  box-shadow: none;
  transition: transform .45s var(--ds-ease), box-shadow .25s ease, background-color .2s ease;
}
html[data-ds-at] .playad-acoes .playad-ac:not([disabled]):hover {
  transform: translateY(-2px);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-alta);
}
html[data-ds-at] .playad-acoes .playad-ac:not([disabled]):active {
  transform: scale(.97);
  transition-duration: .12s;
}
html[data-ds-at] .playad-acoes .playad-ac.on { box-shadow: inset 0 0 0 1.5px var(--ds-azul); background: var(--ds-card); }
html[data-ds-at] .playad-acoes .playad-ac.perigo:not([disabled]):hover { background: var(--ds-rose-bg); }

/* rótulos de seção em caixa alta, como na skill */
html[data-ds-at] .playad-cartao .tit {
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ds-faint);
}
html[data-ds-at] .playad-cartao .rot { color: var(--ds-faint); }
html[data-ds-at] .playad-anot .nota,
html[data-ds-at] .playad-hist .rec,
html[data-ds-at] .playad-campos .res {
  border-color: transparent;
  border-radius: 12px;
  background: var(--ds-panel);
}
html[data-ds-at] .playad-anot textarea {
  border-color: transparent;
  border-radius: var(--ds-r-xs);
  background: var(--ds-panel);
}
html[data-ds-at] .playad-anot textarea:focus { outline: 0; box-shadow: var(--ds-focus); }
html[data-ds-at] .playad-hist .qd, html[data-ds-at] .playad-campos .vl { font-variant-numeric: tabular-nums; }

/* gavetas e aviso */
html[data-ds-at] .playad-gaveta.aberta { animation: ds-at-gaveta .35s var(--ds-ease); }
html[data-ds-at] .playad-toast.on { animation: ds-at-estalo .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes ds-at-gaveta { from { opacity: 0; transform: translateY(-8px); } }
@keyframes ds-at-estalo { from { opacity: 0; transform: translateY(8px) scale(.9); } }

/* =====================================================================
   6. CELULAR: sem moldura (cada pixel conta), mas com as mesmas peças
   ===================================================================== */
@media (max-width: 767px) {
  /* com o cartão do lead aberto (ele cobre a conversa), o atalho das Turmas não
     tem onde escrever e ficava por cima do texto do cartão */
  html[data-ds-at] body:has(main section > div.bg-n-surface-2) #playad-turmas { display: none !important; }
  html[data-ds-at] .reply-box { margin: 0 6px 6px; border-radius: 20px; }
  html[data-ds-at] .conversations-list .conversation::after { inset: 3px 4px; }
  /* barra de baixo (Chat, Kanban, Contatos, Mais): pílula de vidro solta da
     borda, ocupando a mesma altura de antes (o respiro de baixo é a área
     segura do aparelho), com o item ativo na mesma pílula das abas */
  html[data-ds-at] #playad-tabbar {
    left: 10px;
    right: 10px;
    bottom: max(env(safe-area-inset-bottom, 0px), 8px);
    height: 64px;   /* a mesma altura da barra de antes (TABBAR_H = 64 desde 23/09) */
    padding: 4px;
    border-top: 0;
    border-radius: 22px;
    background: color-mix(in srgb, var(--ds-card) 82%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    backdrop-filter: blur(18px) saturate(1.6);
    box-shadow: var(--ds-shadow-pop);
  }
  html[data-ds-at] #playad-tabbar button {
    gap: 3px;
    padding: 6px 2px;
    border-radius: 18px;
    transition: color .25s ease, transform .35s var(--ds-ease);
  }
  html[data-ds-at] #playad-tabbar button:active { transform: scale(.94); }
  html[data-ds-at] #playad-tabbar button.ativo {
    color: var(--ds-ativo-txt);
    background: var(--ds-ativo-fundo);
    box-shadow: var(--ds-ativo-sombra);
  }
}

/* quem pediu menos movimento no aparelho vê tudo parado */
@media (prefers-reduced-motion: reduce) {
  html[data-ds-at] .playad-acoes .playad-ac,
  html[data-ds-at] .playad-gaveta.aberta,
  html[data-ds-at] .playad-toast.on,
  html[data-ds-at] .conversations-list .conversation::after { transition: none !important; animation: none !important; }
  html[data-ds-at] .playad-acoes .playad-ac:hover,
  html[data-ds-at] .playad-acoes .playad-ac:active { transform: none !important; }
}