/* ==========================================================================
   KUGULA CHAT - PADRÃO (Fase 1) - tokens e componentes do módulo de chat.
   Spec: docs/superpowers/specs/2026-09-28-kugula-chat-padrao-design.md
   Regras: todos os nomes levam o prefixo kc-/--kc- (extração futura para um
   pacote partilhado entre os 4 fronts). Tema por atributo, como o Dossiê:
   .kc-chat[data-tema="claro|escuro"].
   ========================================================================== */
.kc-chat {
    --kc-bg: #FAF8F3; --kc-panel: #F3EFE4; --kc-card: #FFFFFF;
    --kc-ink: #17140F; --kc-soft: #5E584E; --kc-line: #E3DDCB; --kc-hover: #ECE6D6;
    --kc-brand: #F25A00; --kc-brand-deep: #9E3800;
    --kc-mine: #FBE0CC; --kc-other: #FFFFFF;
    --kc-quote: rgba(23, 20, 15, .06); --kc-hl: rgba(242, 90, 0, .24);
    --kc-ok: #2A7147; --kc-danger: #C0392B; --kc-azul: #285F93;
    --kc-wall: rgba(23, 20, 15, .055); --kc-scrim: rgba(250, 248, 243, .72);
    --kc-sel: rgba(242, 90, 0, .10); --kc-tint: rgba(242, 90, 0, .12);
    --kc-shadow: 0 8px 24px rgba(23, 20, 15, .14);
}
.kc-chat[data-tema="escuro"] {
    --kc-bg: #17140F; --kc-panel: #1C1812; --kc-card: #201C15;
    --kc-ink: #F2EFE6; --kc-soft: #B8B2A4; --kc-line: #3A362C; --kc-hover: #2A251C;
    --kc-brand: #F25A00; --kc-brand-deep: #FF9A5E;
    --kc-mine: #4B2411; --kc-other: #26211A;
    --kc-quote: rgba(255, 255, 255, .07); --kc-hl: rgba(242, 90, 0, .38);
    --kc-ok: #58B27A; --kc-danger: #F0776A; --kc-azul: #7FB2E5;
    --kc-wall: rgba(242, 239, 230, .05); --kc-scrim: rgba(23, 20, 15, .66);
    --kc-sel: rgba(242, 90, 0, .18); --kc-tint: rgba(242, 90, 0, .18);
    --kc-shadow: 0 8px 28px rgba(0, 0, 0, .5);
}

/* Papel de parede (inspirado em capulana): anéis + pontos, muito discreto. */
.kc-papel {
    background-color: var(--kc-bg);
    background-image:
        radial-gradient(circle, transparent 0 7px, var(--kc-wall) 7px 8px, transparent 8px 12px, var(--kc-wall) 12px 13px, transparent 13.5px),
        radial-gradient(circle, var(--kc-wall) 0 2px, transparent 2.5px);
    background-size: 64px 64px, 64px 64px;
    background-position: 0 0, 32px 32px;
    color: var(--kc-ink);
}

/* ---- Lista de mensagens e bolhas ------------------------------------- */
.kc-lista { display: flex; flex-direction: column; padding: 8px 16px 12px; }
.kc-msg { display: flex; margin-top: 9px; }
.kc-msg--mine { justify-content: flex-end; }
.kc-msg--other { justify-content: flex-start; }
.kc-msg--mine + .kc-msg--mine,
.kc-msg--other + .kc-msg--other { margin-top: 2px; }

.kc-bolha {
    max-width: 76%; box-sizing: border-box; padding: 8px 12px 7px;
    border-radius: 16px; border: 1px solid transparent;
    display: flow-root; position: relative;
    font-size: 14px; line-height: 1.45; word-break: break-word; color: var(--kc-ink);
}
@media (max-width: 767.98px) { .kc-bolha { max-width: 84%; } }
.kc-msg--mine .kc-bolha { background: var(--kc-mine); }
.kc-msg--other .kc-bolha { background: var(--kc-other); border-color: var(--kc-line); }
/* Cauda só na última bolha de um grupo do mesmo lado. */
.kc-msg--mine:not(:has(+ .kc-msg--mine)) .kc-bolha { border-bottom-right-radius: 4px; }
.kc-msg--other:not(:has(+ .kc-msg--other)) .kc-bolha { border-bottom-left-radius: 4px; }
.chat-bolha-selecionada { outline: 2px solid var(--kc-brand); outline-offset: 2px; }

.kc-bolha-hora {
    float: right; margin: 8px 0 -3px 12px; display: inline-flex; gap: 4px; align-items: center;
    font: 400 10.5px 'IBM Plex Mono', ui-monospace, monospace; color: var(--kc-soft); white-space: nowrap;
}
.kc-tique { color: var(--kc-soft); }
.kc-tique--lida { color: var(--kc-brand-deep); }
.kc-bolha-apagada { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-style: italic; color: var(--kc-soft); }
.kc-link { color: var(--kc-brand-deep); text-decoration: underline; word-break: break-all; }

/* ---- Citação dentro da bolha ---------------------------------------- */
.kc-citacao {
    display: flex; gap: 8px; margin-bottom: 6px; padding: 6px 10px 6px 8px;
    border-radius: 8px; background: var(--kc-quote); text-decoration: none; color: inherit;
}
.kc-citacao-barra { width: 3px; border-radius: 2px; background: var(--kc-brand-deep); flex: none; }
.kc-citacao--outra .kc-citacao-barra { background: var(--kc-azul); }
.kc-citacao-corpo { min-width: 0; display: flex; flex-direction: column; }
.kc-citacao-nome { font: 600 13px 'Zilla Slab', Georgia, serif; color: var(--kc-brand-deep); }
.kc-citacao--outra .kc-citacao-nome { color: var(--kc-azul); }
.kc-citacao-texto {
    font-size: 12.5px; line-height: 1.35; color: var(--kc-soft);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- Cartão de referência (produto/avaliação) ------------------------ */
.kc-cartao {
    display: flex; gap: 10px; align-items: center; margin-bottom: 6px; padding: 8px;
    border-radius: 12px; background: var(--kc-quote); text-decoration: none; color: inherit;
}
.kc-cartao-img, .kc-cartao-ph { width: 52px; height: 52px; border-radius: 10px; flex: none; background: var(--kc-line); }
.kc-cartao-img { object-fit: cover; }
.kc-cartao-ph { display: grid; place-items: center; color: var(--kc-soft); }
.kc-cartao-titulo { font-size: 13px; font-weight: 600; line-height: 1.25; }
.kc-cartao-sub { font: 500 12.5px 'IBM Plex Mono', ui-monospace, monospace; color: var(--kc-brand-deep); }

/* ---- Separadores da linha do tempo ---------------------------------- */
.kc-data { display: flex; justify-content: center; margin: 14px 0 6px; }
.kc-data > span {
    padding: 4px 12px; border-radius: 999px; background: var(--kc-card); border: 1px solid var(--kc-line);
    font: 400 11px 'IBM Plex Mono', ui-monospace, monospace; color: var(--kc-soft);
}
/* Data colada ao topo enquanto se rola - cada .kc-data é um irmão direto de
   #lista-mensagens-conversa (scroll container), por isso o "empilhamento"
   nativo (cada data nova substitui a anterior, estilo lista de contactos do
   iOS) funciona só com position:sticky, sem JS. */
.kc-data { position: sticky; top: 0; z-index: 2; }

/* Reservado (sem marcação PHP até haver dados - Fase 5): carimbo de evento. */
.kc-evento { display: flex; justify-content: center; margin: 12px 0 4px; }
.kc-evento > span {
    display: inline-flex; gap: 8px; align-items: center; padding: 5px 12px; border-radius: 999px;
    border: 1px dashed var(--kc-soft); background: var(--kc-bg);
    font: 400 11px 'IBM Plex Mono', ui-monospace, monospace; color: var(--kc-soft);
}
/* Divisor "Mensagens não lidas" (Fase 4) - ver includes/partials/divisor_nao_lidas.php. */
.kc-nao-lidas { display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; font: 500 11px 'IBM Plex Mono', ui-monospace, monospace; color: var(--kc-brand-deep); }
.kc-nao-lidas::before, .kc-nao-lidas::after { content: ''; flex: 1; height: 1px; background: var(--kc-brand); }
.kc-nao-lidas > span { white-space: nowrap; }

/* ---- Botões, cabeçalho, presença ------------------------------------ */
.kc-btn-icone {
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; flex: none;
    display: inline-grid; place-items: center; background: transparent; color: var(--kc-ink);
    cursor: pointer; text-decoration: none; transition: background .16s;
}
.kc-btn-icone:hover { background: var(--kc-hover); color: var(--kc-ink); }
.kc-btn-icone:focus-visible, .kc-menu-item:focus-visible, .kc-btn-enviar:focus-visible { outline: 2px solid var(--kc-brand); outline-offset: 2px; }
.kc-btn-icone--pequeno { width: 32px; height: 32px; }
/* Alvo de toque de 44 px no "X" da citação sem aumentar a altura do bloco. */
.kc-compositor-citacao .kc-btn-icone--pequeno { width: 44px; height: 44px; margin: -8px -4px -8px 0; }
.kc-btn-icone--suave { color: var(--kc-soft); }

.kc-cabecalho {
    display: flex; align-items: center; gap: 12px; min-height: 64px; box-sizing: border-box; padding: 0 8px 0 12px;
    background: var(--kc-panel); border-bottom: 1px solid var(--kc-line); flex: none; position: relative; z-index: 6;
    color: var(--kc-ink);
}
.kc-cabecalho-texto { flex: 1; min-width: 0; }
/* Telemóvel com cantos curvos: os 3 pontinhos ficavam encostados ao canto e cortados */
@media (max-width: 767.98px) { .kc-cabecalho { padding-right: max(24px, env(safe-area-inset-right, 0px)); gap: 8px; } }
.kc-cabecalho-nome { font: 600 18px/1.2 'Zilla Slab', Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-cabecalho-acoes { display: flex; align-items: center; gap: 2px; flex: none; }
.kc-presenca { font-size: 12px; color: var(--kc-soft); }
.kc-presenca--online { color: var(--kc-ok); font-weight: 500; }
.kc-escrever { font-size: 12px; color: var(--kc-brand-deep); font-style: italic; }
.kc-cabecalho--selecao .kc-cabecalho-nome { font-size: 20px; }

/* ---- Popover de opções ---------------------------------------------- */
.kc-menu-wrap { position: relative; }
.kc-menu {
    position: absolute; top: calc(100% + 6px); right: 0; width: 268px; z-index: 20;
    border-radius: 16px; background: var(--kc-card); border: 1px solid var(--kc-line); box-shadow: var(--kc-shadow);
    color: var(--kc-ink);
    animation: kc-menu-entrada .16s ease-out; transform-origin: top right;
}
.kc-menu[hidden], .kc-submenu[hidden] { display: none; }
.kc-menu-item {
    display: flex; align-items: center; gap: 14px; width: 100%; height: 44px; padding: 0 16px; border: 0;
    background: transparent; color: var(--kc-ink); font: 500 14px 'Montserrat', sans-serif; text-align: left; cursor: pointer;
}
.kc-menu-item:hover { background: var(--kc-hover); }
.kc-menu-item > span { flex: 1; }
.kc-menu-item--perigo { color: var(--kc-danger); }
.kc-menu-sep { height: 6px; background: var(--kc-panel); }
.kc-menu form { margin: 0; }
.kc-menu > :first-child, .kc-menu > :first-child > .kc-menu-item:first-child { border-radius: 16px 16px 0 0; }
.kc-menu > :last-child, .kc-menu > :last-child > .kc-menu-item:last-child { border-radius: 0 0 16px 16px; }
.kc-menu-grupo { position: relative; }
.kc-submenu {
    position: absolute; top: 0; right: calc(100% + 8px); width: 216px; z-index: 21;
    border-radius: 16px; background: var(--kc-card); border: 1px solid var(--kc-line); box-shadow: var(--kc-shadow); overflow: hidden;
}
@media (max-width: 767.98px) {
    .kc-submenu { position: static; width: auto; border: 0; box-shadow: none; border-radius: 0; background: var(--kc-panel); }
}
@keyframes kc-menu-entrada { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* ---- Pesquisa na conversa (barra) ----------------------------------- */
.kc-pesquisa { padding: 8px 16px; background: var(--kc-panel); border-bottom: 1px solid var(--kc-line); }
.kc-campo-pesquisa {
    display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 22px;
    background: var(--kc-card); border: 1px solid var(--kc-line); color: var(--kc-soft);
}
.kc-campo-pesquisa:focus-within { border-color: var(--kc-brand); box-shadow: 0 0 0 3px var(--kc-tint); }
.kc-campo-pesquisa input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--kc-ink); font-size: 14px; }

/* ---- "Ir para o fim" ------------------------------------------------ */
.kc-fab-fim {
    position: absolute; right: 20px; bottom: 5.5rem; z-index: 5; width: 44px; height: 44px; padding: 0;
    display: grid; place-items: center; border-radius: 50%; cursor: pointer;
    background: var(--kc-card); color: var(--kc-ink); border: 1px solid var(--kc-line); box-shadow: var(--kc-shadow);
}
.kc-fab-fim.d-none { display: none !important; }
/* Contador de mensagens novas chegadas enquanto a pessoa está rolada para
   cima (Fase 4) - ver assets/js/mensagens-ajax.js. */
.kc-fab-contador {
    position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px;
    display: grid; place-items: center; border-radius: 999px; background: var(--kc-brand); color: #fff;
    font: 700 10px 'IBM Plex Mono', ui-monospace, monospace; line-height: 1; box-shadow: 0 0 0 2px var(--kc-card);
}
.kc-fab-contador.d-none { display: none !important; }

/* ---- Envio otimista (Fase 4) ------------------------------------------
   Bolha "pendente" é um placeholder mínimo e deliberadamente diferente da
   bolha real (nunca recria mensagem_bolha.php em JS - ver
   assets/js/mensagens-ajax.js) - só texto + estado, substituída pela bolha
   real do servidor assim que a resposta chega. */
.kc-bolha--pendente { opacity: .6; }
.kc-bolha--falhada { opacity: 1; border: 1px solid var(--kc-danger); }
.kc-relogio-pendente { color: var(--kc-soft); }
.kc-retry {
    background: none; border: 0; padding: 0; font: 600 10.5px 'IBM Plex Mono', ui-monospace, monospace;
    color: var(--kc-danger); text-decoration: underline; cursor: pointer;
}

/* ---- "Coreografia" da seleção por premir-e-segurar (Fase 4) ----------- */
@keyframes kc-selecionar-pulso { from { transform: scale(.97); } to { transform: scale(1); } }
.chat-bolha-selecionada { animation: kc-selecionar-pulso .18s ease-out; }

/* ---- Respostas rápidas + aviso de segurança (Fase 5, Comércio) -------- */
.kc-respostas-rapidas {
    flex: none; display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 8px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.kc-respostas-rapidas::-webkit-scrollbar { display: none; }
.kc-chip-rapida {
    flex: none; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--kc-brand);
    background: var(--kc-tint); color: var(--kc-brand-deep); font: 500 12.5px 'Montserrat', sans-serif;
    white-space: nowrap; cursor: pointer; transition: background .16s;
}
.kc-chip-rapida:hover { background: var(--kc-brand); color: #fff; }
.kc-aviso-seguranca {
    flex: none; display: flex; align-items: center; gap: 6px; padding: 0 16px 8px;
    font: 400 11px 'IBM Plex Mono', ui-monospace, monospace; color: var(--kc-soft);
}
.kc-aviso-seguranca svg { flex: none; opacity: .7; }

/* ---- Compositor ------------------------------------------------------ */
/* NOVO (Out/2026): respiro reservado no fundo, por cima da área de gesto do telemóvel
   (env(safe-area-inset-bottom) — 0 em telemóveis sem entalhe/barra de gestos, não afeta
   nada aí). Protege o compositor de qualquer elemento fixo por baixo dele, mesmo que a
   bottom-nav volte a aparecer por algum caminho que não preveja. */
.kc-compositor-form { flex: none; margin: 0; padding: 0 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
.kc-compositor { padding: 5px; border-radius: 26px; background: var(--kc-card); border: 1px solid var(--kc-line); color: var(--kc-ink); }
.kc-compositor-linha { display: flex; align-items: flex-end; gap: 2px; }
.kc-compositor textarea {
    flex: 1; min-width: 0; min-height: 42px; max-height: 144px; padding: 10px 6px; border: 0; outline: 0; resize: none;
    background: transparent; color: var(--kc-ink); font: 400 14.5px/1.4 'Montserrat', sans-serif; box-shadow: none;
}
.kc-compositor textarea::placeholder { color: var(--kc-soft); }
/* O .form-control:focus do Bootstrap (0,2,0) ganharia a .kc-compositor textarea (0,1,1); o contorno de foco
   já vem da borda do contentor (.kc-campo-pesquisa:focus-within / .kc-compositor), por isso nada de contorno duplo. */
.kc-compositor textarea:focus, .kc-compositor textarea:focus-visible,
.kc-campo-pesquisa input:focus, .kc-campo-pesquisa input:focus-visible { background: transparent; color: var(--kc-ink); box-shadow: none; outline: 0; }
.kc-btn-enviar {
    width: 40px; height: 40px; margin-bottom: 1px; padding: 0; border: 0; border-radius: 50%; flex: none;
    display: grid; place-items: center; background: var(--kc-brand); color: #fff; cursor: pointer;
}
.kc-btn-enviar:disabled { background: var(--kc-line); color: var(--kc-soft); cursor: default; }
.kc-compositor-citacao {
    display: flex; gap: 10px; align-items: center; margin: 2px 2px 4px; padding: 8px 8px 8px 12px;
    border-radius: 14px; background: var(--kc-quote); color: var(--kc-brand-deep);
}
.kc-compositor-citacao.d-none { display: none !important; }
.kc-compositor-citacao .kc-citacao-corpo { flex: 1; }
.kc-compositor-citacao .kc-citacao-texto { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Estados vazio e de carregamento -------------------------------- */
.kc-vazio { flex: 1; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; padding: 24px; text-align: center; color: var(--kc-soft); }
.kc-esqueleto {
    height: 38px; border-radius: 14px; background: linear-gradient(90deg, var(--kc-line), var(--kc-hover), var(--kc-line));
    background-size: 200% 100%; animation: kc-brilho 1.2s linear infinite;
}
.kc-esqueleto--avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; }
@keyframes kc-brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
    .chat-painel-mensagens { animation: none !important; }
    .kc-papel *, .kc-papel *::before, .kc-papel *::after, .kc-sidebar *, .kc-menu, .kc-menu *, .kc-esqueleto, .kc-pesq-painel * { animation: none !important; transition: none !important; }
}

/* Foco visível do compositor (o textarea não tem contorno próprio). */
.kc-compositor:focus-within { border-color: var(--kc-brand); box-shadow: 0 0 0 3px var(--kc-tint); }

/* ==========================================================================
   FASE 2 - LISTA DE CONVERSAS (sidebar). Spec: 2026-09-28-kugula-chat-fase2-lista-design.md
   ========================================================================== */
.kc-sidebar { display: flex; flex-direction: column; background: var(--kc-panel); color: var(--kc-ink); overflow-y: auto; }
.kc-sidebar > * { flex-shrink: 0; }
.kc-sidebar-cab { display: flex; align-items: center; gap: 6px; padding: 16px 8px 6px 20px; min-height: 64px; box-sizing: border-box; }
.kc-sidebar-cab[hidden] { display: none; }
.kc-sidebar-titulo { flex: 1; margin: 0; font: 600 26px/1.15 'Zilla Slab', Georgia, serif; }
.kc-sidebar-cab--selecao { padding-left: 8px; }
.kc-sidebar-cab--selecao .kc-sidebar-titulo { font-size: 24px; }
.kc-sidebar-pesquisa { margin: 6px 16px 10px; }
.kc-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 16px 10px; scrollbar-width: none; }
.kc-chips::-webkit-scrollbar { display: none; }
.kc-chip {
    flex: none; display: inline-flex; gap: 6px; align-items: center; padding: 11px 14px; border-radius: 999px;
    border: 1px solid var(--kc-line); background: transparent; color: var(--kc-ink); cursor: pointer;
    font: 500 13px 'Montserrat', sans-serif;
}
.kc-chip:focus-visible { outline: 2px solid var(--kc-brand); outline-offset: 2px; }
.kc-chip[aria-pressed="true"] { font-weight: 600; border-color: var(--kc-brand); background: var(--kc-tint); color: var(--kc-brand-deep); }
@media (min-width: 768px) { .kc-chips { flex-wrap: wrap; overflow: visible; } }
.kc-chip-n { font: 400 11.5px 'IBM Plex Mono', ui-monospace, monospace; }
.kc-chip-n:empty { display: none; }

.kc-dica {
    display: flex; gap: 12px; align-items: center; margin: 0 16px 8px; padding: 12px 6px 12px 14px;
    border-radius: 16px; background: var(--kc-card); border: 1px solid var(--kc-line);
}
.kc-dica[hidden] { display: none; }
.kc-dica-icone { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--kc-tint); color: var(--kc-brand-deep); }
.kc-dica .kc-btn-icone--pequeno { width: 44px; height: 44px; margin: -8px 0; }
.kc-dica-corpo { flex: 1; min-width: 0; }
.kc-dica-titulo { font: 600 15px 'Zilla Slab', Georgia, serif; }
.kc-dica-texto { font-size: 12.5px; line-height: 1.35; color: var(--kc-soft); }

.kc-lista-conv { display: flex; flex-direction: column; }
.kc-conv-wrap { position: relative; flex: none; overflow: hidden; touch-action: pan-y; }
.kc-conv-wrap.kc-conv--oculta { display: none; }
.kc-conv {
    display: flex; gap: 12px; align-items: center; height: 72px; box-sizing: border-box; margin: 0 6px; padding: 0 10px;
    border-radius: 14px; background: var(--kc-panel); color: inherit; text-decoration: none; position: relative;
    transition: transform .18s ease-out, background .16s;
}
.kc-conv { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.kc-conv:hover, .kc-conv:focus-visible { background: var(--kc-hover); color: inherit; }
.kc-conv:focus-visible { outline: 2px solid var(--kc-brand); outline-offset: -2px; }
.kc-conv--ativa { background: var(--kc-hover); }
.kc-conv--selecionada, .kc-conv--selecionada:hover { background: var(--kc-sel); }
.kc-conv-wrap--arrastando .kc-conv { transition: none; }
.kc-conv-acoes { position: absolute; top: 0; right: 6px; bottom: 0; display: flex; visibility: hidden; }
.kc-conv-wrap--arrastando .kc-conv-acoes, .kc-conv-wrap--aberto .kc-conv-acoes { visibility: visible; }
.kc-conv-acao {
    width: 76px; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    font: 600 11px 'Montserrat', sans-serif; cursor: pointer; color: var(--kc-bg); background: var(--kc-soft);
}
.kc-conv-acao--arquivar { background: var(--kc-brand); color: #17140F; }
.kc-conv-acao:last-child { border-radius: 0 14px 14px 0; }

.kc-avatar {
    display: inline-grid; place-items: center; flex: none; position: relative; border-radius: 50%; color: #fff;
    font-family: 'Zilla Slab', Georgia, serif; font-weight: 600; line-height: 1;
}
.kc-avatar--loja { border-radius: 30%; }
.kc-avatar--suporte { background: var(--kc-brand); color: #17140F; }
.kc-conv-avatar { position: relative; flex: none; display: inline-flex; }
.kc-conv-check {
    position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%;
    display: grid; place-items: center; background: var(--kc-brand); color: #17140F; border: 2px solid var(--kc-panel);
}
.kc-conv-check[hidden] { display: none; }

.kc-conv-corpo { flex: 1; min-width: 0; }
.kc-conv-linha1, .kc-conv-linha2 { display: flex; align-items: center; gap: 6px; }
.kc-conv-linha2 { margin-top: 3px; gap: 8px; }
.kc-conv-nome { font: 600 16px 'Zilla Slab', Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-conv-mudo, .kc-conv-pin { display: inline-flex; color: var(--kc-soft); flex: none; }
.kc-conv-mudo[hidden], .kc-conv-pin[hidden], .kc-conv-rascunho-rot[hidden], .kc-conv-pilula[hidden] { display: none; }
.kc-conv-hora { margin-left: auto; flex: none; font: 400 11px 'IBM Plex Mono', ui-monospace, monospace; color: var(--kc-soft); }
.kc-conv--nao-lida .kc-conv-hora { color: var(--kc-brand-deep); font-weight: 500; }
.kc-conv--silenciada .kc-conv-hora { color: var(--kc-soft); font-weight: 400; }
.kc-conv-previa { flex: 1; min-width: 0; font-size: 13px; color: var(--kc-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-conv-rascunho-rot { color: var(--kc-brand-deep); font-weight: 600; }
.kc-conv-pilula {
    min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box; border-radius: 11px; flex: none;
    display: grid; place-items: center; background: var(--kc-brand); color: #17140F; font: 500 11.5px 'IBM Plex Mono', ui-monospace, monospace;
}
.kc-conv--silenciada .kc-conv-pilula { background: var(--kc-line); color: var(--kc-soft); }

.kc-lista-sem-resultados { padding: 28px 24px; text-align: center; font-size: 13.5px; color: var(--kc-soft); }
.kc-lista-sem-resultados[hidden] { display: none; }
.kc-lista-mais { padding: 14px 16px 22px; text-align: center; }
.kc-vazio-atalhos { display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; margin-top: 24px; }
.kc-atalho {
    width: 110px; display: flex; flex-direction: column; align-items: center; gap: 10px; border: 0; background: transparent;
    color: var(--kc-ink); text-decoration: none; cursor: pointer; font: 600 13px 'Montserrat', sans-serif; text-align: center;
}
.kc-atalho:hover { color: var(--kc-ink); }
.kc-atalho-icone {
    width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
    background: var(--kc-card); border: 1px solid var(--kc-line); color: var(--kc-brand-deep);
}
.kc-atalho:focus-visible .kc-atalho-icone { outline: 2px solid var(--kc-brand); outline-offset: 2px; }
.kc-vazio-pilula {
    padding: 8px 16px; border-radius: 999px; background: var(--kc-card); border: 1px solid var(--kc-line);
    font: 400 12.5px 'IBM Plex Mono', ui-monospace, monospace; color: var(--kc-soft);
}

/* ==========================================================================
   FASE 3 - PESQUISA NA CONVERSA. Spec: 2026-09-28-kugula-chat-fase3-pesquisa-design.md
   ========================================================================== */
.kc-pesquisa-linha { display: flex; align-items: center; gap: 8px; }
.kc-pesquisa-linha .kc-campo-pesquisa { flex: 1; }
.kc-pesquisa-passos { display: flex; align-items: center; gap: 2px; flex: none; }
.kc-pesquisa-contador { min-width: 44px; text-align: center; font: 500 12px 'IBM Plex Mono', ui-monospace, monospace; color: var(--kc-soft); }

/* Realce: sublinhado na cor de marca, sem alterar o layout do texto. */
mark.kc-msg-realce { background: var(--kc-hl); color: inherit; border-radius: 3px; padding: 0 1px; }
.kc-msg-pulso .kc-bolha { animation: kc-pulso .9s ease-out; }
@keyframes kc-pulso {
    0% { box-shadow: 0 0 0 0 var(--kc-tint); }
    60% { box-shadow: 0 0 0 8px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* Painel lateral de resultados - só desktop (>=992px); no mobile a pesquisa fica só na barra. */
.kc-pesq-painel {
    display: none; position: absolute; top: 0; right: 76px; bottom: 0; width: 320px; z-index: 8;
    background: var(--kc-panel); border-left: 1px solid var(--kc-line); flex-direction: column; box-shadow: var(--kc-shadow);
}
@media (min-width: 992px) {
    .kc-pesq-painel.kc-pesq-painel--aberto { display: flex; }
}
.kc-pesq-painel-cab { display: flex; align-items: center; gap: 6px; padding: 14px 8px 10px 18px; border-bottom: 1px solid var(--kc-line); flex: none; }
.kc-pesq-painel-titulo { flex: 1; font: 600 17px 'Zilla Slab', Georgia, serif; }
.kc-pesq-resultados { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 0; }
.kc-pesq-item {
    display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 18px;
    cursor: pointer; color: var(--kc-ink);
}
.kc-pesq-item:hover, .kc-pesq-item:focus-visible { background: var(--kc-hover); }
.kc-pesq-item-hora { font: 400 10.5px 'IBM Plex Mono', ui-monospace, monospace; color: var(--kc-soft); }
.kc-pesq-item-texto { font-size: 13.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; }
.kc-pesq-vazio, .kc-pesq-aviso { padding: 16px 18px; font-size: 12.5px; color: var(--kc-soft); }
.kc-pesq-aviso { border-top: 1px solid var(--kc-line); margin-top: auto; }

/* Painel "Informação" da conversa. Desktop (>=992px): painel de 320 px sobre a conversa. Mobile: ecrã
   inteiro com seta "voltar" (artboard 20-Mobile-informacao-da-loja). */
.kc-painel-info {
    display: none; position: absolute; top: 0; right: 0; bottom: 0; width: 100%; z-index: 9;
    background: var(--kc-panel); border-left: 1px solid var(--kc-line); flex-direction: column;
    box-shadow: var(--kc-shadow); overflow-y: auto;
}
.kc-painel-info.kc-painel-info--aberto { display: flex; }
/* No desktop a navbar flutuante ocupa os 76 px da direita (como no painel de pesquisa). */
@media (min-width: 992px) { .kc-painel-info { width: 320px; right: 76px; } }
.kc-ic-so-mobile { display: inline-grid; }
.kc-ic-so-desktop { display: none; }
@media (min-width: 992px) { .kc-ic-so-mobile { display: none; } .kc-ic-so-desktop { display: inline-grid; } }
.kc-painel-info-loja { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 2px; }
.kc-painel-info-loja[hidden] { display: none; }
.kc-loja-estado { font: 600 13px 'Montserrat', sans-serif; }
.kc-loja-estado--aberta { color: var(--kc-ok); }
.kc-loja-estado--fechada { color: var(--kc-danger); }
.kc-loja-preparo, .kc-loja-slogan { font-size: 12.5px; color: var(--kc-soft); }
.kc-loja-selos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; }
.kc-loja-selo { padding: 3px 10px; border-radius: 999px; background: var(--kc-tint); color: var(--kc-brand-deep); font: 600 11.5px 'Montserrat', sans-serif; }
.kc-painel-info-atalhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; padding: 0 14px 14px; flex: none; }
.kc-info-atalho {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 72px; padding: 10px 4px;
    background: var(--kc-card); border: 1px solid var(--kc-line); border-radius: 14px; color: var(--kc-brand-deep); text-decoration: none;
    font: 600 12px 'Montserrat', sans-serif; cursor: pointer;
}
.kc-info-atalho span { color: var(--kc-ink); }
.kc-info-atalho:hover, .kc-info-atalho:focus-visible { background: var(--kc-hover); outline: none; }
.kc-info-atalho--perigo { color: var(--kc-danger); }
.kc-painel-info-cab { display: flex; align-items: center; gap: 6px; padding: 14px 8px 10px 18px; border-bottom: 1px solid var(--kc-line); flex: none; }
.kc-painel-info-titulo { flex: 1; font: 600 17px 'Zilla Slab', Georgia, serif; color: var(--kc-ink); }
.kc-painel-info-perfil { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 18px 22px; text-align: center; flex: none; }
.kc-painel-info-nome { font: 600 17px 'Zilla Slab', Georgia, serif; color: var(--kc-ink); }
.kc-painel-info-linha {
    display: flex; align-items: flex-start; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--kc-line);
    color: var(--kc-soft); font-size: 13.5px; line-height: 1.4; flex: none;
}
.kc-painel-info-linha svg { flex: none; margin-top: 1px; }
.kc-painel-info-acoes { padding: 8px 0; border-top: 1px solid var(--kc-line); margin-top: auto; flex: none; }
.kc-painel-info-acao {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 18px; border: 0; background: transparent;
    color: var(--kc-ink); font: 500 14px 'Montserrat', sans-serif; text-align: left; cursor: pointer;
}
.kc-painel-info-acao:hover, .kc-painel-info-acao:focus-visible { background: var(--kc-hover); }


/* Separadores "Geral · Pedido #N": várias conversas com a mesma loja numa só linha da lista. */
.kc-grupo-chips { display: flex; gap: 8px; padding: 8px 14px; overflow-x: auto; border-bottom: 1px solid var(--kc-linha, rgba(23,20,15,0.12)); background: var(--kc-fundo-cab, transparent); flex: 0 0 auto; }
.kc-grupo-chips::-webkit-scrollbar { display: none; }
.kc-grupo-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--kc-soft, #6b665e); border: 1px solid var(--kc-linha, rgba(23,20,15,0.12)); background: transparent; }
.kc-grupo-chip:hover { border-color: var(--kugula-primary, #F25A00); color: inherit; }
.kc-grupo-chip:focus-visible { outline: 2px solid var(--kugula-primary, #F25A00); outline-offset: 2px; }
.kc-grupo-chip--ativo { background: var(--kugula-primary, #F25A00); border-color: var(--kugula-primary, #F25A00); color: #fff; }
.kc-grupo-chip-pilula { background: var(--kugula-primary, #F25A00); color: #fff; border-radius: 999px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }

/* ---- Anexar ao chat (artboard 18): folha por baixo no mobile, cartão central no desktop ---- */
.kc-folha[hidden] { display: none; }
.kc-folha { position: fixed; inset: 0; z-index: 2200; display: flex; align-items: flex-end; justify-content: center; }
.kc-folha-fundo { position: absolute; inset: 0; background: var(--kc-scrim, rgba(23, 20, 15, 0.45)); }
.kc-folha-caixa {
    position: relative; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; padding: 8px 18px 22px;
    background: var(--kc-panel, #F3EFE4); border-radius: 22px 22px 0 0; color: var(--kc-ink, #17140F); box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2);
}
@media (min-width: 768px) { .kc-folha { align-items: center; } .kc-folha-caixa { border-radius: 22px; } }
.kc-folha-pega { width: 44px; height: 5px; margin: 6px auto 14px; border-radius: 3px; background: var(--kc-line, #E3DDCB); }
.kc-folha-titulo { margin: 0 0 14px; font: 600 22px 'Zilla Slab', Georgia, serif; }
.kc-folha-grelha { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kc-folha-cartao {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; text-align: left; cursor: pointer;
    background: var(--kc-card, #fff); border: 1px solid var(--kc-line, #E3DDCB); border-radius: 18px; color: inherit;
}
.kc-folha-cartao:hover, .kc-folha-cartao:focus-visible { border-color: var(--kc-brand, #F25A00); outline: none; }
.kc-folha-cartao-titulo { font: 600 17px 'Zilla Slab', Georgia, serif; }
.kc-folha-cartao-desc { font-size: 13px; color: var(--kc-soft, #5E584E); }
.kc-folha-ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 14px; }
.kc-folha-ic--laranja { background: #F7E2D4; color: #B84200; }
.kc-folha-ic--azul { background: #DDE9F6; color: #285F93; }
.kc-folha-ic--verde { background: #DCEFE3; color: #2A7147; }
.kc-folha-ic--roxo { background: #E8E0F3; color: #6B4BA3; }
.kc-folha-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.kc-folha-topo .kc-folha-titulo { margin: 0; }
.kc-folha-voltar { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 20px; cursor: pointer; }
.kc-folha-voltar:hover { background: var(--kc-hover, rgba(0, 0, 0, 0.06)); }
.kc-folha-lista { display: flex; flex-direction: column; }
.kc-folha-vazio { margin: 18px 0; color: var(--kc-soft, #5E584E); font-size: 14px; }
.kc-folha-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--kc-line, #E3DDCB); }
.kc-folha-item:first-child { border-top: 0; }
.kc-folha-item-ic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; overflow: hidden; background: var(--kc-hover, #ECE7D9); color: var(--kc-soft, #5E584E); }
.kc-folha-item-ic img { width: 100%; height: 100%; object-fit: cover; }
.kc-folha-item-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kc-folha-item-titulo { font: 600 15px 'Zilla Slab', Georgia, serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-folha-item-sub { font-size: 13px; color: var(--kc-soft, #5E584E); }
.kc-folha-anexar {
    flex: none; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--kc-brand, #F25A00); background: transparent;
    color: var(--kc-brand-deep, #9E3800); font: 600 13px 'Montserrat', sans-serif; cursor: pointer;
}
.kc-folha-anexar:hover, .kc-folha-anexar:focus-visible { background: var(--kc-brand, #F25A00); color: #fff; outline: none; }
/* Chip do anexo escolhido, por cima da caixa de texto */
.kc-compositor-anexo { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--kc-line); color: var(--kc-brand-deep); }
.kc-compositor-anexo[hidden] { display: none; }
.kc-anexo-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.kc-anexo-rotulo { font: 500 11px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .02em; color: var(--kc-soft); }
.kc-anexo-nome { font: 600 14px 'Zilla Slab', Georgia, serif; color: var(--kc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Foto real do avatar (por cima da inicial; se a imagem falhar é removida e a inicial aparece) */
.kc-avatar { position: relative; overflow: hidden; }
.kc-avatar > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Reações de uma mensagem (só leitura: a API devolve [{reacao,total,minha}]) */
.kc-reacoes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.kc-reacao { font-size: 0.8rem; line-height: 1; padding: 3px 7px; border-radius: 999px; background: rgba(128, 128, 128, 0.22); border: 1px solid transparent; }
.kc-reacao--minha { border-color: var(--kc-brand); }

/* Reagir e fixar (backend v2.1.98.9) */
.kc-reacao { cursor: pointer; font-family: inherit; color: inherit; }
.kc-reacao:hover { filter: brightness(1.08); }
.kc-reagir-barra { display: flex; gap: 6px; justify-content: center; padding: 8px 12px; background: var(--kc-surface, #fff); border-bottom: 1px solid rgba(128,128,128,.25); }
.kc-reagir-op { font-size: 1.35rem; line-height: 1; background: transparent; border: 0; border-radius: 999px; padding: 6px 9px; cursor: pointer; }
.kc-reagir-op:hover { background: rgba(128,128,128,.22); }
.kc-fixada { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--kc-surface, #fff); border-bottom: 1px solid rgba(128,128,128,.25); color: var(--kc-brand); font-size: .85rem; }
.kc-fixada[hidden] { display: none; }
.kc-fixada-corpo { flex: 1; min-width: 0; text-align: left; background: transparent; border: 0; color: inherit; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: inherit; }
.kc-msg--fixada .kc-bolha { box-shadow: 0 0 0 2px var(--kc-brand); }
.kc-msg--destaque .kc-bolha { animation: kc-destaque 1.4s ease-out; }
@keyframes kc-destaque { 0% { box-shadow: 0 0 0 6px var(--kc-brand); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .kc-msg--destaque .kc-bolha { animation: none; box-shadow: 0 0 0 3px var(--kc-brand); } }

/* ===== Chat Global (backend v2.1.98.38): sala pública de clientes ===== */
.kc-atalho-global { display: flex; align-items: center; gap: 12px; margin: 8px 12px; padding: 12px 14px; border-radius: 12px;
    background: var(--kc-card); border: 1px solid var(--kc-line); color: var(--kc-ink); text-decoration: none; }
.kc-atalho-global:hover { background: var(--kc-hover); color: var(--kc-ink); }
.kc-atalho-global-icone { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--kc-tint); color: var(--kc-brand); flex: none; }
.kc-atalho-global-texto { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.kc-atalho-global-texto small { color: var(--kc-soft); }
/* Atalhos compactos (nova conversa / grupo / global): uma linha fixa no topo da lista, sem ocupar o ecrã no telemóvel */
/* Botão "+" fixo no canto da lista: abre Nova conversa / Novo grupo / Chat Global. */
.kc-novo { position: sticky; bottom: 16px; height: 0; z-index: 5; }
.kc-novo-btn {
    position: absolute; right: 16px; bottom: 0; width: 56px; height: 56px; border: 0; border-radius: 50%;
    display: grid; place-items: center; background: var(--kc-brand); color: #17140F; cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28); transition: transform .16s;
}
.kc-novo-btn[aria-expanded="true"] { transform: rotate(45deg); }
.kc-novo-btn:focus-visible { outline: 2px solid var(--kc-ink); outline-offset: 2px; }
.kc-novo-menu {
    position: absolute; right: 16px; bottom: 68px; width: min(280px, calc(100vw - 32px)); padding: 6px;
    background: var(--kc-panel); border: 1px solid var(--kc-line); border-radius: 14px; box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
}
.kc-novo-menu[hidden] { display: none; }
.kc-novo-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--kc-ink); text-decoration: none; }
.kc-novo-item:hover { background: var(--kc-hover); color: var(--kc-ink); }
.kc-novo-item svg { color: var(--kc-brand-deep); }
.kc-novo-item span { display: flex; flex-direction: column; font: 600 14px 'Montserrat', sans-serif; line-height: 1.25; }
.kc-novo-item small { font-weight: 400; font-size: 12px; color: var(--kc-soft); }
@media (max-width: 991.98px) {
    .kc-novo { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
.kc-global { display: flex; flex-direction: column; max-width: 760px; height: calc(100vh - 140px); min-height: 420px; margin: 16px auto;
    background: var(--kc-bg); border: 1px solid var(--kc-line); border-radius: 14px; overflow: hidden; color: var(--kc-ink); }
.kc-global-topo { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--kc-panel); border-bottom: 1px solid var(--kc-line); }
.kc-global-topo a { color: var(--kc-ink); }
.kc-global-icone { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--kc-tint); color: var(--kc-brand); }
.kc-global-titulo { display: flex; flex-direction: column; min-width: 0; }
.kc-global-titulo small { color: var(--kc-soft); }
.kc-global-lista { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: var(--kc-bg); }
.kc-global-msg { align-self: flex-start; max-width: 80%; padding: 8px 12px; border-radius: 14px; background: var(--kc-other); border: 1px solid var(--kc-line);
    display: flex; flex-direction: column; gap: 2px; word-break: break-word; }
.kc-global-msg--minha { align-self: flex-end; background: var(--kc-mine); border-color: transparent; }
.kc-global-nome { font-size: 12px; font-weight: 700; color: var(--kc-brand-deep); }
.kc-global-hora { align-self: flex-end; font-size: 11px; color: var(--kc-soft); }
.kc-global-form { display: flex; gap: 8px; padding: 10px 12px; background: var(--kc-panel); border-top: 1px solid var(--kc-line); }
.kc-global-form input { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 22px; border: 1px solid var(--kc-line); background: var(--kc-card); color: var(--kc-ink); }
.kc-global-form input:focus { outline: 2px solid var(--kc-brand); outline-offset: 1px; }
.kc-global-enviar { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--kc-brand); color: #fff; }
.kc-global-enviar:disabled { opacity: .6; }
@media (max-width: 991px) { .kc-global { height: calc(100vh - 190px); margin: 8px; } }

/* ===== Grupos privados (backend v2.1.98.41) ===== */
.kc-avatar--grupo { background: var(--kc-azul); color: #fff; }
.kc-bolha-remetente { display: block; font-size: 12px; font-weight: 700; color: var(--kc-brand-deep); margin-bottom: 2px; }
.kc-novo-grupo { height: auto; min-height: 420px; }
.kc-grupo-form { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.kc-grupo-rotulo { font-size: 13px; font-weight: 700; color: var(--kc-soft); }
.kc-grupo-form input[type="search"] { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--kc-line); background: var(--kc-card); color: var(--kc-ink); }
.kc-grupo-form input[type="search"]:focus { outline: 2px solid var(--kc-brand); outline-offset: 1px; }
.kc-grupo-form input[type="text"] { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--kc-line); background: var(--kc-card); color: var(--kc-ink); }
.kc-grupo-form input[type="text"]:focus { outline: 2px solid var(--kc-brand); outline-offset: 1px; }
.kc-grupo-lista { max-height: 320px; overflow-y: auto; border: 1px solid var(--kc-line); border-radius: 10px; background: var(--kc-card); }
.kc-grupo-pessoa { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--kc-line); cursor: pointer; margin: 0; }
.kc-grupo-pessoa:last-child { border-bottom: 0; }
.kc-grupo-pessoa:hover { background: var(--kc-hover); }
.kc-grupo-erro { color: var(--kc-danger); font-size: 13px; }
.kc-grupo-criar { align-self: flex-end; padding: 10px 22px; border: 0; border-radius: 22px; background: var(--kc-brand); color: #fff; font-weight: 700; }
.kc-grupo-criar:disabled { opacity: .5; }

/* ===== Chamadas de áudio (API v2.1.98.43) - ecrã de chamada; fora de .kc-chat, por isso com cores próprias ===== */
.kc-chamada { position: fixed; right: 16px; bottom: 16px; z-index: 100000; width: min(360px, calc(100vw - 32px)); }
.kc-chamada.kc-chamada--escolher { inset: 0; right: auto; bottom: auto; width: auto; display: grid; place-items: center; background: rgba(23, 20, 15, .78); }
.kc-chamada[hidden] { display: none !important; }
.kc-chamada-cartao { width: min(340px, 92vw); padding: 28px 22px; border-radius: 22px; background: #201C15; color: #F2EFE6; text-align: center; box-shadow: 0 16px 48px rgba(0, 0, 0, .55); }
.kc-chamada-avatar { width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; font-size: 36px; font-weight: 700; background: #F25A00; color: #17140F; }
.kc-chamada-nome { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.kc-chamada-estado { color: #B8B2A4; margin-bottom: 8px; min-height: 22px; }
.kc-chamada-nota { color: #8F897B; font-size: 12px; margin-bottom: 18px; }
.kc-chamada-botoes { display: flex; gap: 12px; justify-content: center; }
.kc-chamada-btn { min-width: 110px; padding: 11px 18px; border: 0; border-radius: 26px; font-weight: 700; color: #fff; }
.kc-chamada-btn[hidden] { display: none; }
.kc-chamada-btn--aceitar { background: #2A7147; }
.kc-chamada-btn--rejeitar { background: #C0392B; }
.kc-chamada-lista { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 18px; max-height: 50vh; overflow-y: auto; }
.kc-chamada-pessoa { padding: 11px 14px; border: 1px solid #3A362C; border-radius: 12px; background: #26211A; color: #F2EFE6; text-align: left; }
.kc-chamada-pessoa:hover { background: #2A251C; border-color: #F25A00; }
.kc-chamada-aviso { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 100001; max-width: 90vw; padding: 11px 18px; border-radius: 14px; background: #201C15; color: #F2EFE6; box-shadow: 0 8px 28px rgba(0, 0, 0, .5); }
.kc-chamada-aviso[hidden] { display: none; }
.kc-gg-linha { display: flex; gap: 8px; }
.kc-gg-linha input { flex: 1; min-width: 0; }
.kc-gg-add { margin-left: auto; padding: 5px 12px; border: 0; border-radius: 16px; background: var(--kc-brand); color: #fff; font-size: 13px; }
.kc-gg-add:disabled { opacity: .5; }
.kc-gg-perigo { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.kc-gg-membro { cursor: default; }

/* ===== Chamadas v.46-.48: vídeo, conferência e controlos ===== */
.kc-chamada-cartao--larga { width: min(720px, 96vw); }
.kc-chamada-topo { display: flex; flex-direction: column; align-items: center; }
.kc-ch-videos { display: grid; gap: 8px; margin: 14px 0; grid-template-columns: 1fr; }
.kc-ch-videos[data-n="3"], .kc-ch-videos[data-n="4"] { grid-template-columns: 1fr 1fr; }
.kc-ch-videos[data-n="5"], .kc-ch-videos[data-n="6"] { grid-template-columns: 1fr 1fr 1fr; }
.kc-ch-videos[data-n="2"] { grid-template-columns: 1fr 1fr; }
.kc-ch-tile { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #2A251C; display: grid; place-items: center; }
.kc-ch-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.kc-ch-tile.kc-ch-tile--eu video { transform: scaleX(-1); }
.kc-ch-tile.sem-video video { visibility: hidden; }
.kc-ch-tile-av { width: 56px; height: 56px; border-radius: 50%; background: #F25A00; color: #17140F; display: grid; place-items: center; font-size: 24px; font-weight: 800; }
.kc-ch-tile:not(.sem-video) .kc-ch-tile-av { display: none; }
.kc-ch-tile-nome { position: absolute; left: 8px; bottom: 6px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 10px; }
.kc-ch-tile.a-entrar { opacity: .6; }
.kc-ch-tile.a-entrar::after { content: "a entrar…"; position: absolute; top: 8px; right: 8px; color: #fff; font-size: 11px; background: rgba(0, 0, 0, .55); padding: 2px 8px; border-radius: 10px; }
.kc-ch-controlos { gap: 10px; flex-wrap: wrap; }
.kc-ch-ctl { width: 48px; height: 48px; border-radius: 50%; border: 1px solid #3A362C; background: #2A251C; color: #F2EFE6; font-size: 20px; }
.kc-ch-ctl.off { background: #F2EFE6; color: #17140F; }
.kc-ch-ctl--fim { background: #C0392B; border-color: #C0392B; color: #fff; }
.kc-ch-ctl[hidden] { display: none; }
.kc-chamada-botoes[hidden], .kc-ch-videos[hidden], .kc-chamada-btn[hidden] { display: none !important; }

/* Painel flutuante de chamada: nunca cobre a página inteira; o chat continua utilizável. */
.kc-chamada:not(.kc-chamada--escolher) .kc-chamada-cartao { width: 100%; padding: 14px 16px 16px; border-radius: 18px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); border: 1px solid #3A362C; }
.kc-chamada[data-fase="entrada"]:not(.kc-chamada--escolher) { top: 84px; bottom: auto; }
.kc-chamada[data-fase="entrada"] .kc-chamada-avatar { animation: kc-ch-toque 1.2s ease-in-out infinite; }
@keyframes kc-ch-toque { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 90, 0, .55); } 50% { box-shadow: 0 0 0 14px rgba(242, 90, 0, 0); } }
.kc-ch-barra { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 4px; }
.kc-chamada[data-fase="entrada"] .kc-ch-barra { display: none; }
.kc-ch-mini { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #2A251C; color: #F2EFE6; font-size: 14px; line-height: 1; }
.kc-ch-mini[hidden] { display: none; }
.kc-chamada[data-tam="grande"]:not(.kc-chamada--escolher) { width: min(760px, calc(100vw - 32px)); }
.kc-chamada[data-tam="grande"] .kc-ch-tile { aspect-ratio: 16 / 9; }
.kc-chamada[data-tam="normal"] .kc-chamada-nota { display: none; }
/* Pílula: só nome, tempo e controlos; os vídeos continuam a tocar fora do ecrã. */
.kc-chamada[data-tam="min"]:not(.kc-chamada--escolher) { width: auto; max-width: calc(100vw - 32px); }
.kc-chamada[data-tam="min"] .kc-chamada-cartao { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 32px; }
.kc-chamada[data-tam="min"] .kc-ch-barra { order: 3; margin: 0; }
.kc-chamada[data-tam="min"] .kc-chamada-topo { flex-direction: row; gap: 8px; order: 1; text-align: left; }
.kc-chamada[data-tam="min"] .kc-chamada-avatar { width: 34px; height: 34px; margin: 0; font-size: 16px; }
.kc-chamada[data-tam="min"] .kc-chamada-nome { font-size: 14px; margin: 0; }
.kc-chamada[data-tam="min"] .kc-chamada-estado { font-size: 12px; margin: 0; min-height: 0; }
.kc-chamada[data-tam="min"] .kc-chamada-nota { display: none; }
.kc-chamada[data-tam="min"] .kc-ch-controlos { order: 2; gap: 6px; }
.kc-chamada[data-tam="min"] .kc-ch-ctl { width: 36px; height: 36px; font-size: 15px; }
.kc-chamada[data-tam="min"] .kc-ch-videos { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; margin: 0; }
@media (max-width: 600px) {
    .kc-chamada:not(.kc-chamada--escolher) { right: 8px; left: 8px; width: auto; }
    .kc-chamada[data-tam="min"]:not(.kc-chamada--escolher) { top: 8px; bottom: auto; }
    .kc-chamada[data-tam="min"] .kc-chamada-cartao { background: #1F5D3A; border-radius: 16px; }
    .kc-chamada[data-fase="entrada"]:not(.kc-chamada--escolher) { top: 8px; }
/* Telemóvel: tela cheia durante a chamada; «▾» minimiza para uma bolha e a página volta a poder usar-se. */
@media (max-width: 600px) {
    .kc-chamada[data-tam="normal"]:not(.kc-chamada--escolher), .kc-chamada[data-tam="grande"]:not(.kc-chamada--escolher), .kc-chamada[data-fase="entrada"]:not(.kc-chamada--escolher) { inset: 0; width: auto; max-width: none; background: #17140F; display: flex; }
    .kc-chamada[data-tam="normal"]:not(.kc-chamada--escolher) .kc-chamada-cartao, .kc-chamada[data-tam="grande"]:not(.kc-chamada--escolher) .kc-chamada-cartao, .kc-chamada[data-fase="entrada"]:not(.kc-chamada--escolher) .kc-chamada-cartao { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; justify-content: center; overflow-y: auto; }
    .kc-chamada .kc-ch-barra { position: absolute; top: 10px; right: 10px; margin: 0; }
    .kc-chamada .kc-ch-mini { width: 40px; height: 40px; font-size: 18px; }
    .kc-chamada .kc-ch-videos { grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0; }
    .kc-chamada .kc-ch-videos[data-n="1"] { grid-template-columns: 1fr; }
    .kc-chamada .kc-ch-tile, .kc-chamada[data-tam="grande"] .kc-ch-tile { aspect-ratio: 4 / 3; max-height: 30vh; }
    .kc-chamada-nota { display: none; }
    .kc-chamada .kc-ch-controlos { margin-top: 18px; padding-bottom: env(safe-area-inset-bottom); }
    /* Bolha: só a foto; toque para voltar à chamada. */
    .kc-chamada[data-tam="min"]:not(.kc-chamada--escolher):not([data-fase="entrada"]) { left: auto; top: auto; right: 12px; bottom: 96px; width: auto; background: none; }
    .kc-chamada[data-tam="min"] .kc-chamada-cartao { width: 64px; height: 64px; padding: 0; border-radius: 50%; justify-content: center; background: #1F5D3A; box-shadow: 0 0 0 3px #2A7147, 0 8px 24px rgba(0, 0, 0, .5); }
    .kc-chamada[data-tam="min"] .kc-chamada-topo { flex-direction: column; }
    .kc-chamada[data-tam="min"] .kc-chamada-avatar { width: 52px; height: 52px; }
    .kc-chamada[data-tam="min"] .kc-chamada-nome, .kc-chamada[data-tam="min"] .kc-chamada-estado, .kc-chamada[data-tam="min"] .kc-ch-controlos, .kc-chamada[data-tam="min"] .kc-ch-barra { display: none; }
}
/* Computador: o painel arrasta-se pela barra de cima. */
.kc-ch-barra { cursor: grab; touch-action: none; }
.kc-ch-barra .kc-ch-mini { cursor: pointer; }
.kc-chamada.kc-chamada--movida { right: auto; bottom: auto; }

}

/* Janela da chamada (chamada.php): o painel ocupa a janela toda. */
body.kc-popup { margin: 0; min-height: 100vh; background: #17140F; }
.kc-popup .kc-chamada:not(.kc-chamada--escolher) { inset: 0; width: auto; max-width: none; }
.kc-popup .kc-chamada:not(.kc-chamada--escolher) .kc-chamada-cartao { height: 100%; border-radius: 0; border: 0; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; box-shadow: none; }
.kc-popup .kc-ch-barra { display: none; }
.kc-popup .kc-ch-videos { flex: 1; align-content: center; }

/* Registo de chamada na conversa */
.kc-msg--chamada { display: flex; justify-content: center; margin: 8px 0; }
.kc-chamada-registo { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; background: rgba(120, 120, 128, .14); color: inherit; max-width: 92%; flex-wrap: wrap; justify-content: center; }
.kc-chamada-registo svg { flex: none; opacity: .75; }
.kc-chamada-registo-hora { opacity: .6; font-size: 11.5px; }
.kc-msg--chamada-ma .kc-chamada-registo { background: rgba(220, 53, 69, .14); color: #c0392b; }
/* Foto de perfil nas chamadas */
.kc-chamada-avatar, .kc-ch-tile-av { position: relative; overflow: hidden; }
.kc-chamada-avatar img, .kc-ch-tile-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Convite pendente (v2.1.98.56) */
.kc-convite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--kc-borda, #e4e4e7); background: var(--kc-superficie, #fff); }
.kc-convite-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; font-size: 14px; }
.kc-convite-texto span { font-size: 13px; opacity: .7; }
.kc-convite-botoes { display: flex; gap: 8px; }
/* Barra "chamada em curso" na página principal (a chamada vive na janela chamada.php). */
.kc-chamada-voltar { position: fixed; top: 0; left: 0; right: 0; z-index: 100001; padding: 8px 12px; border: 0; background: #1F5D3A; color: #fff; font-weight: 600; font-size: 14px; text-align: center; }