/*
 * Painel Atendimento (docs/company-attendant.md § Design e UX).
 *
 * Tela de operação: alguém fica com ela aberta o dia inteiro, então o desenho serve à leitura de
 * relance — quem está esperando, quem já foi atendido, quanto tempo resta para responder.
 *
 * Tudo usa os tokens da casca (--surface-strong, --line, --ink-muted, --green, --warn-*,
 * --danger-*). Cor solta aqui é dívida: o tema claro/escuro segue de graça quando os tokens são os
 * de verdade, e quebra em silêncio quando não são — foi o que aconteceu na primeira versão desta
 * folha, que inventou --border e --text-muted e caiu nos fallbacks escritos à mão.
 */

.attendant-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ============================ canal ============================ */

.attendant-channel-card {
    gap: 12px;
}

.attendant-channel-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.attendant-channel-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* O disco com a inicial dá ao canal um rosto — a tela deixa de ser uma lista de campos. */
.attendant-channel-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--green-soft);
    color: var(--on-soft-accent);
    font-weight: 700;
    font-size: 1.05rem;
    text-transform: uppercase;
    /* A foto e redonda porque o circulo e do slot, nao da imagem: assim a inicial e a foto ocupam
       exatamente o mesmo lugar e a troca nao mexe no layout. */
    overflow: hidden;
}

.attendant-channel-avatar > * {
    grid-area: 1 / 1;
}

.attendant-channel-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.attendant-channel-lines {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.attendant-channel-name {
    font-weight: 600;
    font-size: 1.05rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attendant-channel-phone {
    color: var(--ink-muted);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

.attendant-channel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.attendant-channel-note {
    margin: 0;
    color: var(--ink-muted);
    font-size: var(--text-sm);
}

/* ---------- o estado, dito em texto ---------- */

/*
 * "Ativo" sozinho mentia: o canal podia estar registrado na Meta e com o atendente DESLIGADO, e a
 * pessoa lia o selo verde como "está funcionando" (incidente 2026-09-11). O selo agora reflete o
 * que importa — se alguém responde —, e a cor só reforça o que já está escrito.
 */
.attendant-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-hover);
    color: var(--ink-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
}

.attendant-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentcolor;
    flex-shrink: 0;
}

.attendant-badge[data-state="answering"] {
    border-color: color-mix(in srgb, var(--green) 40%, transparent);
    background: var(--green-soft);
    color: var(--on-soft-accent);
}

/* Pulsa devagar: é o único elemento "ao vivo" da tela, e merece dizer isso. */
.attendant-badge[data-state="answering"]::before {
    background: var(--status-live);
    box-shadow: 0 0 0 0 var(--status-live-ring);
    animation: attendant-pulse 2.4s ease-out infinite;
}

.attendant-badge[data-state="paused"] {
    border-color: var(--warn-border);
    background: var(--warn-bg);
    color: var(--warn-ink);
}

.attendant-badge[data-state="waiting"] {
    border-color: var(--line-hover);
}

.attendant-badge[data-state="suspended"] {
    border-color: var(--danger-border);
    background: var(--danger-bg);
    color: var(--danger);
}

@keyframes attendant-pulse {
    0% { box-shadow: 0 0 0 0 var(--status-live-ring); }
    70% { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* O aviso de atendente desligado: não é rodapé, é a informação principal do cartão. */
.attendant-offline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--warn-border);
    border-radius: 12px;
    background: var(--warn-bg);
    color: var(--warn-ink);
    font-size: var(--text-sm);
}

.attendant-offline svg {
    flex-shrink: 0;
}

/* ---------- consumo do mês ---------- */

.attendant-usage {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

.attendant-usage-text {
    color: var(--ink-muted);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

.attendant-usage-track {
    height: 5px;
    border-radius: 999px;
    background: var(--surface-hover);
    overflow: hidden;
}

.attendant-usage-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--green);
    transition: width 240ms ease-out;
}

.attendant-usage[data-state="near"] .attendant-usage-fill { background: var(--warn-ink); }
.attendant-usage[data-state="near"] .attendant-usage-text { color: var(--warn-ink); }
.attendant-usage[data-state="reached"] .attendant-usage-fill { background: var(--danger); }
.attendant-usage[data-state="reached"] .attendant-usage-text { color: var(--danger); font-weight: 600; }

/* ============================ sincronização ============================ */

.attendant-sync {
    border-color: var(--warn-border);
    background: var(--warn-bg);
}

.attendant-sync-body {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.attendant-sync-icon {
    font-size: 1.4rem;
    line-height: 1.2;
}

.attendant-sync-text {
    margin: 4px 0 0;
    color: var(--warn-ink);
    font-size: var(--text-sm);
}

.attendant-sync-countdown {
    margin: 8px 0 0;
    color: var(--warn-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ============================ números ============================ */

.attendant-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.attendant-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-strong);
    box-shadow: var(--shadow-1);
}

.attendant-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* O número que exige ação não pode ter o mesmo peso visual dos outros três. */
.attendant-stat[data-accent="attention"] .attendant-stat-value {
    color: var(--warn-ink);
}

.attendant-stat-label {
    color: var(--ink-muted);
    font-size: var(--text-xs);
}

/* ============================ duas colunas ============================ */

.attendant-board {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 16px;
    align-items: stretch;
    min-height: 480px;
}

.attendant-list-pane,
.attendant-thread-pane {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-strong);
    box-shadow: var(--shadow-2);
}

.attendant-list-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.attendant-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.attendant-filter {
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--ink-muted);
    font: inherit;
    font-size: var(--text-xs);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}

.attendant-filter:hover {
    background: var(--surface-hover);
    color: var(--ink);
}

.attendant-filter.is-active {
    border-color: color-mix(in srgb, var(--green) 45%, transparent);
    background: var(--green-soft);
    color: var(--on-soft-accent);
    font-weight: 600;
}

/* A contagem ao lado do filtro responde "quantos?" sem precisar clicar. */
.attendant-filter-count {
    margin-left: 6px;
    opacity: .7;
    font-variant-numeric: tabular-nums;
}

.attendant-filter:focus-visible,
.attendant-item-button:focus-visible,
.attendant-back:focus-visible,
.attendant-dialog-close:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

/* ---------- a lista ---------- */

.attendant-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: min(58vh, 620px);
    overflow-y: auto;
    /* Espaço para o anel de foco não ser cortado pelo overflow. */
    padding-inline: 2px;
}

.attendant-item-button {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 12px;
    width: 100%;
    padding: 11px 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 140ms ease;
}

.attendant-item-button:hover {
    background: var(--surface-hover);
}

.attendant-item-button.is-selected {
    border-color: color-mix(in srgb, var(--green) 35%, transparent);
    background: var(--green-soft);
}

/* Inicial do cliente: dá ritmo à lista e ajuda a reencontrar a mesma conversa. */
.attendant-item-avatar {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface-hover);
    color: var(--ink-muted);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
}

.attendant-item-button.is-selected .attendant-item-avatar {
    background: var(--surface-strong);
    color: var(--on-soft-accent);
}

.attendant-item-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.attendant-item-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attendant-item-time {
    flex-shrink: 0;
    color: var(--ink-muted);
    font-size: var(--text-2xs);
}

.attendant-item-preview {
    min-width: 0;
    color: var(--ink-muted);
    font-size: var(--text-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attendant-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    grid-column: 2;
    margin-top: 3px;
}

.attendant-tag {
    padding: 1px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-hover);
    color: var(--ink-muted);
    font-size: var(--text-2xs);
    font-weight: 600;
}

.attendant-tag-awaiting {
    border-color: var(--warn-border);
    background: var(--warn-bg);
    color: var(--warn-ink);
}

.attendant-tag-human {
    border-color: color-mix(in srgb, var(--green) 35%, transparent);
    background: var(--green-soft);
    color: var(--on-soft-accent);
}

.attendant-tag-unread {
    border-color: transparent;
    background: var(--button-primary);
    color: var(--on-button-primary);
    font-variant-numeric: tabular-nums;
}

.attendant-more {
    align-self: center;
}

/* ============================ conversa ============================ */

.attendant-thread-pane {
    /* O cabeçalho e o composer ficam fixos; só a transcrição rola. */
    max-height: min(78vh, 860px);
}

.attendant-thread-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.attendant-thread-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--green-soft);
    color: var(--on-soft-accent);
    font-weight: 700;
    text-transform: uppercase;
}

.attendant-thread-identity {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.attendant-thread-phone {
    color: var(--ink-muted);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}

.attendant-back {
    display: none;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.attendant-back:hover {
    background: var(--surface-hover);
}

/* ---------- a janela de 24h ---------- */

/*
 * Informação de DECISÃO, não decoração: fora da janela o texto livre não é entregue, e quem
 * descobre isso depois de escrever perdeu a resposta.
 */
.attendant-window {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-hover);
    color: var(--ink-muted);
    font-size: var(--text-sm);
}

.attendant-window::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentcolor;
    flex-shrink: 0;
}

.attendant-window[data-state="closing"] {
    border-color: var(--warn-border);
    background: var(--warn-bg);
    color: var(--warn-ink);
    font-weight: 600;
}

.attendant-window[data-state="closed"] {
    border-color: var(--danger-border);
    background: var(--danger-bg);
    color: var(--danger);
    font-weight: 600;
}

/* ---------- transcrição ---------- */

/*
 * Mesma linguagem do espelho do Outreach no chat (.outreach-mirror-bubble): é a mesma ideia — uma
 * conversa com terceiro sendo lida por dentro do produto —, e duas gramáticas visuais para a mesma
 * coisa fariam o produto parecer dois.
 */
.attendant-thread {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 4px 2px;
    list-style: none;
    overflow-y: auto;
}

.attendant-message {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: min(560px, 82%);
    padding: 9px 13px;
    border-radius: 14px;
}

.attendant-message-lead {
    align-self: flex-start;
    border: 1px solid var(--line);
    border-bottom-left-radius: 4px;
    background: var(--surface-hover);
}

.attendant-message-bot,
.attendant-message-member {
    align-self: flex-end;
    border-bottom-right-radius: 4px;
    background: var(--user-bubble);
    color: var(--on-user-bubble);
}

/*
 * Bot e pessoa saem os dois "da empresa", mas precisam ser distinguíveis: a resposta de gente tem
 * um traço na borda. A autoria continua escrita em texto — a marca só reforça.
 */
.attendant-message-member {
    border-right: 3px solid var(--status-live);
}

/* Nota do produto, não fala de ninguém: centralizada, discreta, sem bolha. */
.attendant-message-system {
    align-self: center;
    max-width: 100%;
    padding: 5px 12px;
    border: 1px dashed var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--ink-muted);
    font-size: var(--text-xs);
    text-align: center;
}

/* Link da nota para o registro no app (docs/attendant-apps.md, fase 4): sublinhado, porque numa
   nota discreta a cor sozinha não diz que é clicável. */
.attendant-message-link {
    display: inline-block;
    font-size: var(--text-xs);
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.attendant-message-link:focus-visible {
    outline: 2px solid var(--button-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.attendant-message-author {
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    opacity: .75;
}

.attendant-message-system .attendant-message-author {
    display: none;
}

.attendant-message-text {
    margin: 0;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.attendant-message-time {
    font-size: var(--text-2xs);
    opacity: .7;
}

.attendant-message-failure {
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--danger);
}

.attendant-message-bot .attendant-message-failure,
.attendant-message-member .attendant-message-failure {
    color: var(--warn-bg);
}

/* Em alto contraste do sistema o fundo some; sem borda, as bolhas viram um bloco só. */
@media (forced-colors: active) {
    .attendant-message {
        border: 1px solid CanvasText;
    }
}

/* ---------- ao vivo: presença e digitando (só conversa do site) ---------- */

.attendant-presence {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-muted);
    font-size: var(--text-xs);
}

.attendant-presence::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ink-muted);
    flex-shrink: 0;
}

.attendant-presence[data-state="online"] {
    color: var(--green);
}

.attendant-presence[data-state="online"]::before {
    background: var(--green);
}

.attendant-typing {
    margin: 0;
    color: var(--ink-muted);
    font-size: var(--text-sm);
    font-style: italic;
}

.attendant-offline-hint {
    margin: 0;
    padding: 9px 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-hover);
    color: var(--ink-muted);
    font-size: var(--text-sm);
}

/* O ponto na linha: "há alguém escrevendo aqui" sem precisar abrir. */
.attendant-item-typing {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--green);
    vertical-align: middle;
    animation: attendant-typing-pulse 1.2s ease-in-out infinite;
}

@keyframes attendant-typing-pulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .attendant-item-typing {
        animation: none;
    }
}

/* ---------- responder ---------- */

.attendant-composer {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.attendant-composer .module-input {
    flex: 1;
    min-width: 0;
}

.attendant-template-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.attendant-template-form .module-empty {
    margin: 0;
    text-align: left;
}

#attendantTemplatePreview {
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-hover);
    color: var(--ink-muted);
    font-size: var(--text-sm);
    white-space: pre-wrap;
}

#attendantTemplatePreview:empty {
    display: none;
}

.attendant-template-inputs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}

/* ============================ vazios e onboarding ============================ */

.attendant-empty {
    align-items: center;
    text-align: center;
}

.attendant-empty-art {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--green-soft);
    color: var(--on-soft-accent);
}

.attendant-onboard-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    width: 100%;
    margin-top: 4px;
    text-align: left;
}

.attendant-onboard-form .module-actions,
.attendant-onboard-form > .module-empty,
.attendant-onboard-form .attendant-check {
    grid-column: 1 / -1;
}

.attendant-onboard-cc {
    max-width: 130px;
}

.attendant-onboard-code {
    grid-template-columns: 1fr;
    max-width: 380px;
    margin-inline: auto;
}

.attendant-onboard-code .module-input {
    font-size: 1.3rem;
    letter-spacing: .18em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.attendant-check {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-muted);
    font-size: var(--text-sm);
}

/* Conexão manual: caminho técnico, dobrado. Quem tem as credenciais acha; quem não tem não tropeça. */
.attendant-manual {
    width: 100%;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    text-align: left;
}

.attendant-manual > summary {
    color: var(--ink-muted);
    font-size: var(--text-sm);
    cursor: pointer;
}

.attendant-manual > summary:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

/* O formulário técnico usa a mesma grade do onboarding: são o mesmo tipo de tarefa. */
.attendant-manual-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.attendant-manual-form .module-actions,
.attendant-manual-form .attendant-check {
    grid-column: 1 / -1;
}

.attendant-handoff,
.attendant-test-reset {
    flex-shrink: 0;
}

/* ============================ editor do atendente ============================ */

.attendant-dialog {
    width: min(660px, calc(100vw - 32px));
    max-height: min(88vh, 900px);
    padding: 0;
    /* Quem rola é o form, e só ele. O diálogo tem overflow automático por padrão do navegador, e
       com o form pedindo `max-height: inherit` MAIS o próprio padding o conteúdo passava da caixa:
       apareciam duas barras, uma dentro da outra. */
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-strong);
    color: var(--ink);
    box-shadow: var(--shadow-3);
}

.attendant-dialog::backdrop {
    background: var(--scrim);
}

/* [open] é obrigatório: sem ele o `display: flex` venceria o `display: none` que o navegador
   aplica a um dialog fechado, e a caixa apareceria no meio da página. */
.attendant-dialog[open] {
    display: flex;
    flex-direction: column;
}

.attendant-dialog-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* min-height: 0 deixa o flex encolher abaixo do conteúdo — sem isso o item de flex não rola. */
    flex: 1;
    min-height: 0;
    padding: 20px 24px 22px;
    overflow-y: auto;
}

.attendant-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.attendant-dialog-close {
    padding: 6px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--ink-muted);
    cursor: pointer;
}

.attendant-dialog-close:hover {
    background: var(--surface-hover);
    color: var(--ink);
}

.attendant-dialog-lede {
    margin: 0;
    text-align: left;
}

.attendant-textarea {
    min-height: 170px;
    line-height: 1.55;
    font-family: inherit;
    resize: vertical;
}

/* Gruda no fim para o botão não sumir num formulário longo. */
.attendant-dialog-actions {
    position: sticky;
    bottom: -22px;
    margin-top: 2px;
    padding: 12px 0 2px;
    background: linear-gradient(to bottom, transparent, var(--surface-strong) 45%);
}

/* ============================ caixa de teste ============================ */

/* A caixa de teste é um cartão como os outros; só a transcrição dentro dela é menor. */
.attendant-testbench {
    gap: 10px;
}

.attendant-test-thread {
    max-height: 320px;
    padding: 0;
}

.attendant-test-thread:empty {
    display: none;
}

.attendant-test-form {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.attendant-test-form .module-input {
    flex: 1;
    min-width: 0;
}

/* ============================ celular ============================ */

@media (max-width: 900px) {
    .attendant-board {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .attendant-back {
        display: inline-flex;
    }

    /* Uma coisa de cada vez: a lista some quando a conversa abre, e volta pelo botão. */
    .attendant-board .attendant-thread-pane {
        display: none;
    }

    .attendant-board.is-thread-open .attendant-list-pane {
        display: none;
    }

    .attendant-board.is-thread-open .attendant-thread-pane {
        display: flex;
    }

    .attendant-thread-pane {
        max-height: none;
    }

    .attendant-list {
        max-height: none;
    }

    .attendant-message {
        max-width: 90%;
    }
}

@media (max-width: 560px) {
    .attendant-composer,
    .attendant-test-form {
        flex-wrap: wrap;
    }

    .attendant-composer .module-button,
    .attendant-test-form .module-button {
        width: 100%;
    }

    .attendant-channel-actions .module-button {
        flex: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .attendant-badge[data-state="answering"]::before,
    .attendant-usage-fill,
    .attendant-item-button,
    .attendant-filter {
        animation: none;
        transition: none;
    }
}

/* Conhecimento: quais fontes de dados o atendente consulta.
   docs/attendant-data-sources.md § Design e UX */
.attendant-knowledge {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px;
    margin: 0;
}

.attendant-knowledge legend {
    padding: 0 6px;
}

.attendant-knowledge-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 10px;
}

.attendant-knowledge-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
}

.attendant-knowledge-item:hover {
    background: var(--surface-hover);
}

/* Inelegível continua visível e legível — ela ensina a regra. O que muda é o cursor e o peso,
   nunca o contraste do texto: motivo que não se lê não explica nada. */
.attendant-knowledge-item.is-blocked {
    cursor: not-allowed;
}

.attendant-knowledge-item.is-blocked:hover {
    background: none;
}

.attendant-knowledge-check {
    margin-top: 2px;
    flex: none;
    accent-color: var(--button-primary);
}

.attendant-knowledge-check:focus-visible {
    outline: 2px solid var(--button-primary);
    outline-offset: 2px;
}

.attendant-knowledge-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.attendant-knowledge-name {
    color: var(--ink);
}

.attendant-knowledge-note {
    font-size: var(--text-xs);
    color: var(--ink-muted);
}

.attendant-knowledge-count {
    margin-top: 10px;
}

/* Segundo tempo: quais colunas da tabela saem para o cliente. */
.attendant-knowledge-card + .attendant-knowledge-card {
    border-top: 1px solid var(--line);
}

.attendant-knowledge-tables {
    padding: 0 10px 12px 34px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.attendant-knowledge-table {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    margin: 0;
}

.attendant-knowledge-table legend {
    font-size: var(--text-sm);
    color: var(--ink);
    padding: 0 6px;
}

/* Grade que vira uma coluna só no celular — a marcação é o gesto principal da tela e não pode
   depender de largura. */
.attendant-knowledge-columns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 2px;
}

.attendant-knowledge-column {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
}

.attendant-knowledge-column:hover {
    background: var(--surface-hover);
}

.attendant-knowledge-column.is-blocked {
    cursor: not-allowed;
}

.attendant-knowledge-column.is-blocked:hover {
    background: none;
}

.attendant-knowledge-bulk {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.attendant-knowledge-bulk-button {
    font-size: var(--text-xs);
    padding: 4px 10px;
}

/* A prévia imita a mensagem que o cliente recebe — é o que faz a decisão de coluna ser concreta. */
.attendant-knowledge-preview {
    margin-top: 10px;
}

.attendant-knowledge-preview-title {
    font-size: var(--text-xs);
    color: var(--ink-muted);
    margin: 0 0 6px;
}

.attendant-knowledge-preview-bubble {
    background: var(--surface-strong);
    border: 1px solid var(--line);
    border-radius: 12px 12px 12px 4px;
    padding: 8px 12px;
    font-size: var(--text-sm);
    color: var(--ink);
    /* A linha pode ser longa; quebra em vez de esticar o diálogo. */
    overflow-wrap: anywhere;
}

@media (max-width: 560px) {
    .attendant-knowledge-tables {
        padding-left: 12px;
    }

    .attendant-knowledge-columns {
        grid-template-columns: 1fr;
    }
}

/* Apps: o que o atendente usa dos apps da empresa (docs/attendant-apps.md § Design e UX).
   Mesma casca das fontes — card, marcação, segundo tempo — com uma camada a mais: por entidade,
   três permissões e, por campo, mostrar e preencher. */
.attendant-apps-entity {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.attendant-apps-entity legend {
    font-size: var(--text-sm);
    color: var(--ink);
    padding: 0 6px;
}

.attendant-apps-switches {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
}

.attendant-apps-switch {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--ink);
}

.attendant-apps-switch:hover {
    background: var(--surface-hover);
}

.attendant-apps-switch.is-blocked {
    cursor: not-allowed;
    color: var(--ink-muted);
}

.attendant-apps-switch.is-blocked:hover {
    background: none;
}

/* Aviso de exposição: cor de atenção com texto escuro sobre fundo claro — o contraste não depende
   do tom, e o texto diz o risco por extenso. */
.attendant-apps-warning {
    margin: 0;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--warn-border);
    background: var(--warn-bg);
    color: var(--warn-ink);
    font-size: var(--text-xs);
}

/* Tabela de campos: nome à esquerda, as duas marcações alinhadas em colunas estreitas. Uma grade
   e não uma <table>: no celular ela segue legível sem rolagem lateral. */
.attendant-apps-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 74px 74px;
    align-items: center;
    column-gap: 8px;
    row-gap: 2px;
}

.attendant-apps-fields-head {
    font-size: var(--text-xs);
    color: var(--ink-muted);
    padding: 0 8px 4px;
}

.attendant-apps-fields-head.is-toggle,
.attendant-apps-field-toggle {
    text-align: center;
    justify-self: center;
}

.attendant-apps-field-name {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 8px;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: var(--text-sm);
}

.attendant-apps-field-toggle input {
    width: 18px;
    height: 18px;
}

.attendant-apps-leads {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 8px;
}

.attendant-apps-lead {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--ink-muted);
}

@media (max-width: 560px) {
    .attendant-apps-fields {
        grid-template-columns: minmax(0, 1fr) 60px 64px;
    }
}

/* Ferramentas: o que o atendente chama das ferramentas da empresa (docs/company-tools.md § Design
   e UX). Mesma casca dos apps; por argumento, um seletor de quem preenche. */
.attendant-tools-tag {
    margin-left: 6px;
    border-color: var(--danger-border);
    background: var(--danger-bg);
    color: var(--danger);
}

.attendant-tools-args {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.attendant-tools-arg {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 190px);
    align-items: center;
    gap: 4px 8px;
    padding: 4px 8px;
    font-size: var(--text-sm);
    color: var(--ink);
}

.attendant-tools-arg-name {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.attendant-tools-arg-name code {
    font-size: var(--text-sm);
}

.attendant-tools-required {
    margin-left: 6px;
    font-size: var(--text-2xs);
    color: var(--ink-muted);
    font-weight: 600;
}

.attendant-tools-constant {
    grid-column: 1 / -1;
}

@media (max-width: 560px) {
    .attendant-tools-arg {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Foto de perfil do WhatsApp (docs/attendant-profile.md).
   O estado É a imagem: um círculo só, mostrando o que está no ar agora. Dois círculos lado a lado
   — "atual" e "prévia" — obrigariam a pessoa a decidir qual é qual. */
.attendant-avatar-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.attendant-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    /* O WhatsApp corta no círculo; mostrar aqui já cortado é mostrar a verdade. */
    object-fit: cover;
    border: 1px solid var(--line);
    background: var(--surface-strong);
    flex: none;
}

.attendant-avatar-empty {
    display: grid;
    place-items: center;
    color: var(--ink-muted);
}

.attendant-avatar-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    /* Sem isto o bloco de texto força a linha a esticar além do diálogo no estreito. */
    min-width: 0;
    flex: 1 1 220px;
}

.attendant-avatar-actions .module-empty {
    margin: 0;
}

.attendant-avatar-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Destrutivo em vermelho (padrao de 2026-08-26). Cor sozinha nao carrega o aviso: o rotulo ja diz
   "Remover", e a confirmacao explica o que some. */
.attendant-avatar-buttons .is-danger {
    color: var(--danger, #a43b35);
}

.attendant-avatar-status {
    margin: 8px 0 0;
}

/* A falha é da Meta com frequência, e a cor diz isso antes da leitura. */
.attendant-avatar-status.is-error {
    color: var(--danger, #b3261e);
}

/* O slot guarda o lugar da foto enquanto ela sobe: sem tamanho fixo, o spinner apareceria num
   quadrado de zero pixel e a linha inteira pularia quando a imagem nova chegasse. */
.attendant-avatar-slot {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 72px;
    height: 72px;
    flex: none;
}

.attendant-avatar-slot > * {
    grid-area: 1 / 1;
}

.attendant-avatar-spinner {
    display: none;
    width: 24px;
    height: 24px;
    border: 2px solid var(--ink-muted);
    border-right-color: transparent;
    border-radius: 999px;
    animation: attendant-avatar-spin 700ms linear infinite;
}

/* Enquanto sobe: a foto apaga o suficiente para o spinner ler, e nao some — ver a foto ANTIGA
   esmaecida diz "esta sendo substituida"; um buraco branco diz "sumiu". */
.attendant-avatar-slot.is-sending .attendant-avatar {
    opacity: 0.35;
}

.attendant-avatar-slot.is-sending .attendant-avatar-spinner {
    display: block;
}

@keyframes attendant-avatar-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Nunca some o indicador para quem pediu menos movimento: ele passa a piscar em degraus, que
   cumpre o mesmo papel sem o giro continuo. */
@media (prefers-reduced-motion: reduce) {
    .attendant-avatar-spinner {
        animation: attendant-avatar-spin 1.6s steps(8) infinite;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .attendant-avatar {
        transition: opacity 160ms ease;
    }
}

/* O botao usa o mesmo estado "ocupado" dos outros formularios (core/busy-button.ts). A regra de
   .is-busy no app.css lista os botoes um a um; este entra pelo nome dele. */
.attendant-avatar-actions .module-button-ghost.is-busy {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    opacity: 0.92;
    cursor: progress;
}

/* Destrutivo em vermelho (padrao de 2026-08-26), e empurrado para o fim da linha: desligar nao
   disputa o mesmo clique de configurar. */
.attendant-remove-channel {
    color: var(--danger, #a43b35);
    margin-left: auto;
}

@media (max-width: 560px) {
    .attendant-remove-channel {
        margin-left: 0;
    }
}

/* Perfil do WhatsApp: recolhido por padrao. Sao quatro campos que se preenchem uma vez e quase
   nunca se revisitam — abertos, empurrariam para baixo as instrucoes, que sao o trabalho de todo
   dia. docs/attendant-profile.md § Fase 2 */
.attendant-profile-details {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0 14px;
    margin-bottom: 16px;
    background: var(--surface);
}

.attendant-profile-summary {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 0;
    cursor: pointer;
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--ink);
    /* O triangulo nativo fica no canto e a linha inteira e clicavel. */
    list-style-position: inside;
}

.attendant-profile-summary:focus-visible {
    outline: 2px solid var(--button-primary);
    outline-offset: 2px;
    border-radius: 8px;
}

.attendant-profile-summary .module-empty {
    margin: 0;
    font-weight: 400;
    /* Alinha com o texto, e nao com o triangulo. */
    padding-left: 18px;
}

.attendant-profile-details[open] .attendant-profile-summary {
    border-bottom: 1px solid var(--line);
    margin-bottom: 12px;
}

.attendant-profile-details > .module-field {
    margin-bottom: 12px;
}

/* O segundo site e opcional e nao ganha rotulo proprio: dois rotulos iguais confundem mais do que
   uma caixa a mais explica. */
.attendant-profile-site-2 {
    margin-top: 6px;
}

.attendant-profile-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 14px;
}

.attendant-profile-status {
    margin: 0;
}

.attendant-profile-status.is-error {
    color: var(--danger, #a43b35);
}

/* Numeros desligados (docs/attendant-removal.md § Fase 2). Cartao discreto: e sobre o passado, e
   ler o passado nao pode competir com atender agora. */
.attendant-retired {
    opacity: 0.92;
}

.attendant-retired-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.attendant-retired-item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-strong);
}

.attendant-retired-lines {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 200px;
}

.attendant-retired-name {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--ink);
    /* Nome de marca longo nao empurra o botao para fora do cartao. */
    overflow-wrap: anywhere;
}

.attendant-retired-phone {
    font-size: var(--text-xs);
    color: var(--ink-muted);
}

/* A faixa que diz que a lista mostra o passado. Cor sozinha nao carrega o aviso: o texto diz. */
.attendant-archive-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 10px;
    padding: 8px 12px;
    border: 1px dashed var(--line);
    border-radius: 10px;
    background: var(--surface-strong);
    font-size: var(--text-xs);
    color: var(--ink-muted);
}

.attendant-archive-banner[hidden] {
    display: none;
}

/* Pagamentos no diálogo da persona (docs/company-payments.md § Fase 5): dois interruptores e o teto. */
.attendant-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
}

.attendant-payments-max {
    max-width: 14rem;
}

/* ============================ lista de assistentes ============================ */

/*
 * N assistentes por empresa (docs/attendant-web-widget.md § A tela). Grade sem scroll horizontal,
 * ações só no menu ⋯ (module-grid-actions): as células quebram linha, e a "última atividade" some
 * no estreito antes de a tabela estourar.
 */
.attendant-home,
.attendant-detail,
.attendant-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.attendant-home[hidden],
.attendant-detail[hidden],
.attendant-panel[hidden] {
    display: none;
}

.attendant-assistants-lede {
    margin: -6px 0 8px;
    text-align: left;
}

.attendant-assistants-table tbody tr {
    cursor: pointer;
}

/* O nome é um BOTÃO de verdade: a linha inteira responde ao clique, mas o teclado precisa de alvo. */
.attendant-row-open {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 2px 4px 2px 2px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.attendant-row-open:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

.attendant-row-avatar {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--green-soft);
    color: var(--accent-ink);
    font-weight: 700;
    font-size: var(--text-sm);
}

.attendant-row-lines {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.attendant-row-name {
    font-weight: 600;
}

.attendant-row-sub {
    color: var(--ink-muted);
    font-size: var(--text-xs);
}

.attendant-cell-channels {
    white-space: nowrap;
}

/* Ícone do canal: `title` para quem passa o mouse e texto oculto para o leitor de tela. */
.attendant-kind {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-right: 2px;
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink-muted);
    vertical-align: middle;
}

.attendant-kind-whatsapp {
    color: var(--green);
}

.attendant-kind-icon {
    flex: 0 0 auto;
}

.attendant-item-name .attendant-kind {
    width: 18px;
    height: 18px;
    margin-right: 4px;
    background: transparent;
}

.attendant-card-title-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.attendant-card-title-icon .attendant-kind-icon {
    color: var(--ink-muted);
}

/* A barra fina da grade: texto em cima, trilho de 4px embaixo, e nunca mais larga que a célula. */
.attendant-usage-mini {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    min-width: 96px;
    max-width: 160px;
}

.attendant-usage-mini .attendant-usage-text {
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}

.attendant-usage-mini .attendant-usage-track {
    display: block;
    height: 4px;
}

.attendant-usage-mini .attendant-usage-fill {
    display: block;
    height: 100%;
}

.attendant-cell-state .attendant-badge {
    white-space: nowrap;
}

.attendant-cell-activity {
    color: var(--ink-muted);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.module-table td.attendant-col-actions {
    text-align: right;
}

@media (max-width: 700px) {
    .attendant-col-activity {
        display: none;
    }
}

/* ============================ detalhe: cabeçalho e abas ============================ */

.attendant-detail-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.attendant-back-all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    color: var(--ink-muted);
    font-size: var(--text-sm);
    text-decoration: none;
}

.attendant-back-all:hover {
    color: var(--ink);
    text-decoration: underline;
}

.attendant-back-all:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
    border-radius: 6px;
}

.attendant-detail-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.attendant-detail-lines {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 6px;
}

.attendant-detail-name {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: var(--text-heading-sm);
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.attendant-detail-lines .attendant-badge {
    align-self: flex-start;
}

/* As abas usam o mesmo item do module-nav (Saúde, Pedidos), só que dentro da página. */
.attendant-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: none;
}

.attendant-tabs .module-nav-item[hidden] {
    display: none;
}

/* ---------- filtro por canal ---------- */
.attendant-channel-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.attendant-channel-filter[hidden] {
    display: none;
}

.attendant-channel-filter-label {
    color: var(--ink-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---------- persona ---------- */
.attendant-persona-summary {
    margin: 0;
    text-align: left;
}

.attendant-persona-summary.is-warning {
    color: var(--warn-ink);
    font-weight: 600;
}

/* ============================ cartão Site ============================ */

.attendant-web-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.attendant-web-lede {
    margin: 0;
    text-align: left;
}

/* Configuração à esquerda, prévia à direita; o snippet corre embaixo dos dois. */
.attendant-web-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 20px 24px;
    align-items: start;
}

.attendant-web-body[hidden] {
    display: none;
}

.attendant-web-settings {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 18px;
}

.attendant-web-origins,
.attendant-web-form fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.attendant-web-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.attendant-web-form fieldset {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.attendant-web-form .module-actions {
    justify-content: flex-start;
}

.attendant-web-accent-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* O seletor de cor nativo, aparado ao tamanho de um campo. */
.attendant-color {
    width: 44px;
    height: 38px;
    padding: 2px;
    border: 1px solid var(--line-control);
    border-radius: 10px;
    background: var(--surface);
    cursor: pointer;
}

.attendant-color:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

.attendant-hex {
    width: 10ch;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-transform: uppercase;
}

.attendant-field-error {
    margin: 0;
    color: var(--danger);
    text-align: left;
}

.attendant-field-error:empty {
    display: none;
}

/* ---------- domínios (chips) ---------- */
.attendant-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
    padding: 0;
    list-style: none;
}

.attendant-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 4px 6px 4px 10px;
    border: 1px solid var(--line-control);
    border-radius: 999px;
    background: var(--surface);
    font-size: var(--text-sm);
}

.attendant-chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attendant-chip-remove {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-muted);
    cursor: pointer;
}

.attendant-chip-remove:hover {
    background: var(--surface-hover);
    color: var(--danger);
}

.attendant-chip-remove:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 1px;
}

.attendant-chips-empty {
    margin: 0;
    text-align: left;
}

.attendant-chip-form {
    display: flex;
    gap: 8px;
}

.attendant-chip-form .module-input {
    flex: 1;
    min-width: 0;
}

/* ---------- prévia ---------- */
.attendant-web-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.attendant-web-frame-wrap {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

.attendant-web-frame {
    display: block;
    width: 100%;
    height: 440px;
    border: 0;
    background: transparent;
}

/* ---------- snippet ---------- */
.attendant-web-snippet {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.attendant-snippet-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Quebra linha em vez de rolar: o snippet é curto e a página não pode ganhar barra horizontal. */
.attendant-snippet {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--text-sm);
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.attendant-snippet:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

.attendant-snippet-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.attendant-copied {
    color: var(--green);
    font-size: var(--text-sm);
    font-weight: 600;
}

/* ============================ novo assistente ============================ */

.attendant-textarea-short {
    min-height: 84px;
}

.attendant-where {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.attendant-where-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
}

/* Cartões marcáveis: a caixa fica visível (é o controle), o cartão inteiro é o alvo. */
.attendant-where-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 4px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--line-control);
    border-radius: 14px;
    background: var(--surface);
    cursor: pointer;
}

.attendant-where-card input {
    grid-row: 1 / span 2;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--green);
}

.attendant-where-card .attendant-kind-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    color: var(--ink-muted);
}

.attendant-where-card:hover {
    border-color: var(--ink-muted);
}

.attendant-where-card:has(input:checked) {
    border-color: var(--green);
    background: var(--green-soft);
}

.attendant-where-card:has(input:focus-visible) {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

.attendant-where-title {
    font-weight: 600;
}

.attendant-where-hint {
    color: var(--ink-muted);
    font-size: var(--text-xs);
    line-height: 1.4;
}

@media (prefers-reduced-motion: no-preference) {
    .attendant-where-card,
    .attendant-chip-remove,
    .attendant-row-open {
        transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
    }
}

@media (max-width: 900px) {
    .attendant-web-body {
        grid-template-columns: 1fr;
    }

    .attendant-web-frame {
        height: 380px;
    }
}

@media (max-width: 560px) {
    .attendant-where-cards {
        grid-template-columns: 1fr;
    }

    .attendant-chip-form,
    .attendant-web-accent-row {
        flex-wrap: wrap;
    }

    .attendant-detail-identity .attendant-channel-actions {
        width: 100%;
    }
}