.fd-contact-label-menu,.fd-contact-label-submenu{box-sizing:border-box;padding:0.4375rem;border:1px solid #ffffffa6;border-radius:1.375rem;background:linear-gradient(135deg,#ffffffe6,#eeeeeedd 58%,#ffffffe0);backdrop-filter:blur(1.125rem) saturate(1.1);-webkit-backdrop-filter:blur(1.125rem) saturate(1.1);color:#34363c;box-shadow:inset 0 1px 1px #ffffffc0,inset 0 -1px 1px #ffffff45,0 0.625rem 1.75rem #00000014;font:500 0.75rem/1.125rem Inter,'Segoe UI',sans-serif}
.fd-contact-label-menu{position:fixed;z-index:10040;min-width:12.75rem}
.fd-contact-label-menu button{appearance:none;display:flex;align-items:center;gap:0.6875rem;box-sizing:border-box;width:100%;min-height:2.625rem;border:0;border-radius:0.9375rem;padding:0.625rem 0.75rem;text-align:left;background:transparent;color:inherit;font:inherit;cursor:pointer;outline:none;box-shadow:none;transition:background-color 180ms,color 180ms}
.fd-contact-label-menu button:is(:hover,:focus-visible){background:#ffffff80;color:#0078ff;outline:none;box-shadow:none}
.fd-contact-label-menu button[aria-expanded=true],.fd-contact-label-menu button[aria-checked=true]{background:#ffffff65;color:#0078ff}
.fd-contact-label-menu button svg{width:1.0625rem;height:1.0625rem;flex:none;color:#85878e}
.fd-contact-label-swatch{width:0.5625rem;height:0.5625rem;flex:none;border-radius:50%;background:var(--fd-label-color,#85878e)}
.fd-contact-label-menu button:disabled{opacity:.45;cursor:default}.fd-contact-label-menu button:disabled:hover{background:transparent;color:inherit}
.fd-contact-label-menu p{margin:0.25rem 0.5rem;max-width:14.375rem}.fd-contact-label-menu p:empty{display:none}
.fd-contact-label-submenu{position:absolute;left:calc(100% + 0.625rem);top:3.0625rem;min-width:13.125rem;max-width:16.25rem;max-height:min(25rem,60vh);overflow:auto;scrollbar-width:thin;scrollbar-color:#8993a833 transparent;overscroll-behavior:contain}
.fd-contact-label-submenu.opens-left{left:auto;right:calc(100% + 0.625rem)}
.fd-contact-label-submenu[hidden]{display:none}
/* Sem :has() na raiz (22/10/2026): html:has(...)/body:has(...) com seletor de tag no fim invalidavam todos os span do
   documento a cada mudança no DOM (bancada v2). .fd-v2-minimal/.fd-app-dark ficam no #appScreen (div) e o tema escuro
   também liga body.fd-portal-dark — mesma especificidade, mesmo resultado. */
body.fd-portal-dark :is(.fd-contact-label-menu,.fd-contact-label-submenu){background:linear-gradient(135deg,#45474cf0,#303237eb 58%,#383b41eb);border-color:#ffffff30;color:#dedee3;box-shadow:inset 0 1px 1px #ffffff30,0 0.625rem 1.75rem #00000026}
body.fd-portal-dark .fd-contact-label-menu button:is(:hover,:focus-visible,[aria-expanded=true],[aria-checked=true]){background:#ffffff12;color:#78b9ff}
.fd-contact-photo-viewer{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#ffffffed;color:#172b4d}
.fd-contact-photo-viewer::backdrop{background:#ffffffbf}
.fd-contact-photo-viewer header{position:absolute;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;font:0.875rem system-ui}
.fd-contact-photo-viewer header button{border:0;background:transparent;font-size:1.75rem;cursor:pointer;color:inherit}
.fd-contact-photo-viewer>img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:min(80vw,50rem);max-height:80vh;object-fit:contain}
.fd-contact-photo-viewer>p{position:absolute;top:50%;width:100%;text-align:center}
.fd-kanban-photo[role=button]{cursor:pointer}.fd-kanban-photo[role=button]:focus-visible{outline:0.125rem solid #688ad1;outline-offset:0.1875rem}
.fd-indevidos-panel{position:absolute;inset:0.5rem;min-height:0;display:flex;flex-direction:column}.fd-indevidos-panel[hidden]{display:none}.fd-indevidos-panel>.fd-kanban-list{flex:1;min-height:0}.fd-indevidos-panel>p{font:0.75rem system-ui;margin:0.25rem 0.5rem}.fd-indevidos-panel>p:empty{display:none}
/* Faixa diagonal inspirada em Uiverse.io / mrhyddenn (massive-earwig-94). */
.fd-chat-header-contact-label{display:inline-block;vertical-align:baseline;padding:1px 0.375rem;border-radius:0.3125rem;background:#2563eb12;color:#2563eb;font:inherit}
.fd-chat-header-contact-label[data-label=revenda]{background:#15803d12;color:#15803d}
.fd-kanban-item.has-contact-ribbon{position:relative}
.fd-contact-ribbon{position:absolute;overflow:hidden;width:6.5rem;height:6.5rem;top:-0.3125rem;right:-0.3125rem;pointer-events:none;z-index:2}
.fd-contact-ribbon::before{content:attr(data-label);position:absolute;right:-2rem;top:1.375rem;width:9.375rem;height:1.5rem;display:flex;align-items:center;justify-content:center;transform:rotate(45deg);background:linear-gradient(45deg,#ff6547,#ffb144 51%,#ff7053);color:#fff;font:600 0.5625rem system-ui;letter-spacing:.03em;box-shadow:0 0.25rem 0.5rem #0003}
.fd-contact-ribbon::after{content:'';position:absolute;width:0.3125rem;height:0.3125rem;bottom:0;right:0;background:#cc3f47;box-shadow:-6.1875rem -6.1875rem #cc3f47}

/* 21/10/2026: cada etiqueta pinta a faixa com a própria cor (--fd-ribbon-cor); sem cor, o laranja.
   As dobras quadradas do ::after vazavam do card como pontos vermelhos — saem. */
.fd-contact-ribbon[style*="--fd-ribbon-cor"]::before{background:linear-gradient(45deg,color-mix(in srgb,var(--fd-ribbon-cor) 82%,#000),var(--fd-ribbon-cor) 51%,color-mix(in srgb,var(--fd-ribbon-cor) 78%,#fff))}
.fd-contact-ribbon::after{display:none}


/* Etiquetas ao lado do nome no cabeçalho do chat (21/10/2026). */
.fd-group-chat-title-row{display:flex;align-items:center;gap:0.375rem;min-width:0}
.fd-group-chat-title-row>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-chat-header-labels{display:inline-flex;flex:none;gap:0.25rem}
.fd-chat-header-labels[hidden]{display:none}
.fd-chat-header-labels>.fd-chat-header-contact-label{font-size:0.625rem;font-weight:600;line-height:1.4}
/* Faixa dentro do card (22/10/2026): nasce na margem interna de cima e termina na lateral direita, sem vazar — o card recorta no próprio raio. */
.fd-kanban-item.has-contact-ribbon{overflow:hidden}
.fd-kanban-item.has-contact-ribbon>.fd-contact-ribbon{top:0;right:0;width:5.25rem;height:5.25rem;border-top-right-radius:inherit}
.fd-kanban-item.has-contact-ribbon>.fd-contact-ribbon::before{right:-2.25rem;top:1rem;width:8.25rem;height:1.375rem;box-shadow:0 0.125rem 0.375rem #0002}
/* Etiquetas no cabecalho (24/10/2026): a direita do bloco nome + ticket, centralizadas nele, na cor de cada etiqueta. */
.fd-group-chat-head>.fd-group-chat-title{flex:0 1 auto}
.fd-group-chat-head>.fd-chat-header-labels{display:inline-flex;align-items:center;align-self:center;flex:none;gap:0.25rem}
.fd-group-chat-head>.fd-chat-header-labels[hidden]{display:none}
.fd-group-chat-head>.fd-chat-header-labels>.fd-chat-header-contact-label{padding:0.125rem 0.5rem;border-radius:0.375rem;background:color-mix(in srgb,var(--fd-label-cor,#2563eb) 14%,transparent);color:var(--fd-label-cor,#2563eb);font-size:0.6875rem;font-weight:600;line-height:1.4}
.fd-group-chat-head>.fd-contact-presence{align-self:center;margin-left:0.25rem}
/* 24/10/2026: etiquetas de volta na linha do nome (pílula na cor da etiqueta) e status online na
   linha do número do chamado. */
.fd-group-chat-title-row>.fd-chat-header-labels>.fd-chat-header-contact-label{padding:0.0625rem 0.4375rem;border-radius:0.375rem;background:color-mix(in srgb,var(--fd-label-cor,#2563eb) 14%,transparent);color:var(--fd-label-cor,#2563eb);font-size:0.625rem;font-weight:600;line-height:1.4;white-space:nowrap}
.fd-group-chat-title>small>.fd-contact-presence{margin-left:0.5rem}
/* Etiquetas com contraste e largura padrão (24/10/2026): texto escuro na etiqueta clara e claro na
   escura (--fd-*-texto, calculado pela luminância); a pílula do cabeçalho tem sempre a largura de 20
   caracteres, com o nome centralizado. */
.fd-contact-ribbon::before{color:var(--fd-ribbon-texto,#fff)}
.fd-group-chat-title-row>.fd-chat-header-labels>.fd-chat-header-contact-label{display:inline-flex;align-items:center;justify-content:center;box-sizing:content-box;width:20ch;overflow:hidden;text-overflow:ellipsis;background:var(--fd-label-cor,#2563eb);color:var(--fd-label-texto,#fff);font-variant-numeric:tabular-nums}
/* Etiqueta do cabeçalho no estilo "Draggable Tags" (Framer), reta (24/10/2026): fundo na cor da
   etiqueta, texto num tom mais escuro da mesma cor — qualquer cor se adapta —, canto arredondado,
   peso 600, sombra suave e o ícone antes do nome. Largura fixa de 20 caracteres. */
/* Etiqueta de verdade (26/10/2026): largura do texto, 5px de cada lado, fundo claro na cor, borda fina e ilhós. */
.fd-group-chat-title-row>.fd-chat-header-labels>.fd-chat-header-contact-label.is-tag{--fd-tag-cor:var(--fd-label-cor,#6667ab);display:inline-flex;align-items:center;justify-content:flex-start;gap:0.25rem;box-sizing:border-box;width:auto;max-width:20ch;height:1.25rem;padding:0 5px;border:1px solid color-mix(in oklab,var(--fd-tag-cor) 40%,transparent);border-radius:0.25rem;background:color-mix(in oklab,var(--fd-tag-cor) 12%,#fff);color:var(--fd-label-texto-fixo,color-mix(in oklab,var(--fd-tag-cor) 72%,#000));font:600 0.6875rem/1 Inter,'Segoe UI',sans-serif;letter-spacing:.01em;box-shadow:none;overflow:hidden;transition:background-color 150ms ease,border-color 150ms ease}
.fd-chat-header-contact-label.is-tag .fd-tag-icone{flex:none;width:0.3125rem;height:0.3125rem;border-radius:50%;background:currentColor;font-size:0;opacity:.75}
.fd-chat-header-contact-label.is-tag .fd-tag-texto{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-app-dark .fd-group-chat-title-row>.fd-chat-header-labels>.fd-chat-header-contact-label.is-tag{background:color-mix(in oklab,var(--fd-tag-cor) 20%,#1c1e23);border-color:color-mix(in oklab,var(--fd-tag-cor) 50%,transparent);color:var(--fd-label-texto-fixo,color-mix(in oklab,var(--fd-tag-cor) 62%,#fff));box-shadow:none}
.fd-group-chat-title-row>.fd-chat-header-labels>.fd-chat-header-contact-label.is-tag[role=button]:hover{background:color-mix(in oklab,var(--fd-tag-cor) 20%,#fff)}
.fd-app-dark .fd-group-chat-title-row>.fd-chat-header-labels>.fd-chat-header-contact-label.is-tag[role=button]:hover{background:color-mix(in oklab,var(--fd-tag-cor) 30%,#1c1e23)}
/* 26/10/2026: a etiqueta do cabeçalho abre a lista de etiquetas. */
.fd-chat-header-contact-label.is-tag[role=button]{cursor:pointer}
.fd-chat-header-contact-label.is-tag[role=button]:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}
/* Cor da fonte escolhida no editor (26/10/2026): fundo sólido na cor da etiqueta, como o usuário pintou. */
.fd-group-chat-title-row>.fd-chat-header-labels>.fd-chat-header-contact-label.is-tag[style*="--fd-label-texto-fixo"]{background:var(--fd-tag-cor);border-color:transparent}