/*
  Chat/atendimento (Corte 2A-2). Usa exclusivamente tokens --crm-* (crm-theme.css).
  Substitui inteiramente o layout antigo (.travel-crm/.conversation-list/.chat-panel/...) do
  app.css nesta rota - as classes antigas ficam sem uso (nao removidas do app.css neste corte
  para nao arriscar quebrar Configuracoes/Comercial, que compartilham parte do chrome generico
  de modal com aquele arquivo; ver CRM_CHATBOT_APP_SHELL_IMPLEMENTATION_PLAN.md).
*/

.crm-chat-shell {
    display: grid;
    grid-template-columns: var(--crm-ticket-list-width) minmax(0, 1fr) var(--crm-contact-panel-width);
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: var(--crm-color-app-bg);
}

.crm-chat-shell.details-closed {
    grid-template-columns: var(--crm-ticket-list-width) minmax(0, 1fr);
}

@media (max-width: 1200px) {
    .crm-chat-shell {
        grid-template-columns: minmax(280px, 320px) minmax(0, 1fr) minmax(260px, 300px);
    }

    .crm-chat-shell.details-closed {
        grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
    }
}

/* UNICHAT-MOBILE-UX-CONFORMANCE-01 (Phase B) — tablet 768–1023 (OD-3 aprovada):
   2 colunas (lista + conversa); a ficha do contato NUNCA é coluna nesta faixa —
   abre como overlay sob demanda (mobile-details-open), fechável. */
@media (max-width: 1023px) {
    .crm-chat-shell,
    .crm-chat-shell.details-closed,
    .crm-chat-shell.details-open {
        grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
    }

    /* Especificidade (0,2,0) de propósito: a regra base .crm-contact-panel (display:flex)
       vem DEPOIS neste arquivo e venceria um seletor de classe única. */
    .crm-chat-shell .crm-contact-panel {
        display: none;
    }

    .crm-chat-shell.mobile-details-open .crm-contact-panel {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: var(--uni-z-modal);
        width: auto;
        max-width: none;
        background: var(--crm-color-surface);
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        overflow-y: auto;
    }

    /* Header da conversa: no shell mobile/tablet a coluna da thread é estreita — a
       identidade (avatar+nome) ocupa a primeira linha inteira e as ações (IA/humano +
       Assumir + menu) quebram para a linha de baixo. Nada é cortado nem esmagado. */
    .crm-thread-header {
        flex-wrap: wrap;
        padding: 10px 12px;
        row-gap: 8px;
    }

    .crm-thread-heading {
        flex: 1 1 100%;
    }

    .crm-thread-heading-copy h2 {
        max-width: none;
    }

    .crm-thread-header .aiagent-conv-control,
    .crm-thread-header .crm-thread-actions {
        flex: 0 1 auto;
        flex-wrap: wrap;
        min-width: 0;
    }

    /* Alvos de toque das ações da conversa (contrato S). */
    .crm-thread-action,
    .crm-thread-icon-action {
        min-height: 40px;
    }
}

/* ---------- Coluna de tickets ---------- */

.crm-ticket-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--crm-color-surface);
    border-right: 1px solid var(--crm-color-border);
    padding: 14px 14px 0;
    box-sizing: border-box;
    gap: 10px;
}

.crm-ticket-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--crm-radius-md);
    border: 1px solid var(--crm-color-border);
    background: var(--crm-color-app-bg);
    flex: 0 0 auto;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

/* correcoes.txt (Owner): destaque de foco visível na busca ("pode ser meio neon"). Fecha o gap
   G12 (DESIGN_GAPS.md): outline:none no input sem substituto visível no container. */
.crm-ticket-search:focus-within {
    border-color: var(--crm-color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--crm-color-primary) 22%, transparent),
                0 0 12px color-mix(in srgb, var(--crm-color-primary) 35%, transparent);
}

.crm-ticket-search .crm-icon {
    width: 16px;
    height: 16px;
    color: var(--crm-color-text-muted);
    flex: 0 0 auto;
}

.crm-ticket-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 13.5px;
    color: var(--crm-color-text);
}

.crm-ticket-search input:focus {
    outline: none;
}

.crm-ticket-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.crm-ticket-toolbar-primary {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: none;
    border-radius: var(--crm-radius-md);
    background: var(--crm-color-primary);
    color: var(--crm-color-on-primary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.crm-ticket-toolbar-primary:hover:not(:disabled) {
    background: var(--crm-color-primary-hover);
    color: var(--crm-color-on-primary);
}

.crm-ticket-toolbar-primary svg {
    width: 15px;
    height: 15px;
    color: currentColor;
    fill: currentColor;
}

.crm-ticket-toolbar-primary span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-ticket-toolbar-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-md);
    background: var(--crm-color-surface);
    color: var(--crm-color-text-muted);
    cursor: pointer;
}

.crm-ticket-toolbar-icon:hover:not(:disabled) {
    border-color: var(--crm-color-primary);
    background: var(--crm-color-primary-soft);
    color: var(--crm-color-primary-soft-text);
}

.crm-ticket-toolbar-icon svg {
    fill: currentColor;
}

.crm-ticket-toolbar-icon svg {
    width: 16px;
    height: 16px;
}

.crm-ticket-toolbar-icon.spinning svg {
    animation: crm-spin 900ms linear infinite;
}

@keyframes crm-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.crm-ticket-toolbar-primary:disabled,
.crm-ticket-toolbar-icon:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.crm-ticket-category-tabs,
.crm-ticket-tabs {
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
    overflow-x: auto;
    scrollbar-width: none;
}

.crm-ticket-category-tabs::-webkit-scrollbar,
.crm-ticket-tabs::-webkit-scrollbar {
    display: none;
}

.crm-ticket-category-tabs button,
.crm-ticket-tabs button {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--crm-color-text-muted);
    font-size: 12.5px;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: var(--crm-radius-sm);
    cursor: pointer;
    white-space: nowrap;
}

.crm-ticket-category-tabs button.active,
.crm-ticket-tabs button.active {
    background: var(--crm-color-primary-soft);
    color: var(--crm-color-primary);
    font-weight: 600;
}

.crm-ticket-tab-count {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--crm-color-border);
    color: var(--crm-color-text-muted);
    font-size: 11px;
    font-weight: 600;
}

.crm-ticket-tabs button.active .crm-ticket-tab-count {
    background: var(--crm-color-primary);
    color: var(--crm-color-on-primary);
}

.crm-ticket-status-message {
    margin: 0;
    padding: 6px 2px 0;
    font-size: 12px;
    color: var(--crm-color-text-muted);
    flex: 0 0 auto;
}

.crm-ticket-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 2px 2px 14px;
    margin: 0 -14px;
    padding-left: 14px;
    padding-right: 14px;
}

.crm-ticket-list-empty {
    padding: 20px 4px;
    color: var(--crm-color-text-muted);
    font-size: 13px;
    text-align: center;
}

/* UNICHAT-CUT-6 (polish, item 3) — onboarding contextual no vazio da lista (só no celular, onde a lista é a tela). */
.crm-ticket-list-onboarding {
    padding: var(--uni-space-6) var(--uni-space-4);
}

.crm-ticket-list-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 2px 2px;
    color: var(--crm-color-text-muted);
    font-size: 12px;
}

.crm-ticket-list-pagination button {
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-sm);
    background: var(--crm-color-surface);
    color: var(--crm-color-text);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    cursor: pointer;
}

.crm-ticket-list-pagination button:disabled {
    cursor: wait;
    opacity: .7;
}

/* ---------- Card de ticket ---------- */

.crm-ticket-card {
    display: flex;
    gap: 10px;
    min-width: 0;
    padding: 10px;
    border-radius: var(--crm-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--crm-transition-fast), border-color var(--crm-transition-fast);
}

.crm-ticket-card:hover {
    background: var(--crm-color-app-bg);
}

.crm-ticket-card.selected {
    background: var(--crm-color-primary-soft);
    border-color: var(--crm-color-primary);
}

.crm-ticket-card.waiting-human:not(.selected) {
    border-color: var(--crm-color-warning);
}

/* OWNER-VISUAL-ACCEPTANCE-CORRECTIONS-01 (§5) — .crm-ticket-avatar deixou de ter estilo próprio: o card
   usa UniAvatar (.crm-contacts-avatar, a ficha aceita de Contatos). A classe fica só como gancho. */
.crm-ticket-avatar { flex: 0 0 auto; }

.crm-ticket-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.crm-ticket-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.crm-ticket-title-row strong {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--crm-color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.crm-ticket-title-row small {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--crm-color-text-muted);
}

.crm-ticket-number {
    margin-right: auto;
    opacity: 0.75;
}

.crm-ticket-time-group {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.crm-ticket-badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
}

.crm-ticket-preview {
    font-size: 12.5px;
    color: var(--crm-color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.crm-ticket-actions-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.crm-ticket-assigned {
    font-size: 11.5px;
    color: var(--crm-color-success);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.crm-ticket-action-chip {
    flex: 0 0 auto;
    border: 1px solid var(--crm-color-border);
    background: var(--crm-color-surface);
    color: var(--crm-color-text);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    cursor: pointer;
}

.crm-ticket-action-chip:hover:not(:disabled) {
    background: var(--crm-color-primary-soft);
    border-color: var(--crm-color-primary);
    color: var(--crm-color-primary);
}

.crm-ticket-unread-badge {
    flex: 0 0 auto;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--crm-color-primary);
    color: var(--crm-color-on-primary);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* CHAT-OMNI-06.1: conversa marcada manualmente como nao lida - ponto sem numero, como no WhatsApp. */
.crm-ticket-unread-badge.dot {
    min-width: 10px;
    width: 10px;
    height: 10px;
    padding: 0;
}

/* ---------- Badges/chips compartilhados ---------- */

.crm-channel-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 22px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--crm-color-app-bg);
    color: var(--crm-color-text-muted);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.2;
    max-width: 130px;
}

.crm-channel-badge .crm-icon {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
}

.crm-channel-badge span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-channel-badge-whatsapp {
    color: var(--crm-color-success);
}

.crm-channel-badge-instagram {
    color: var(--crm-color-danger);
}

.crm-queue-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--crm-queue-color);
    color: var(--crm-queue-on-color);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.2;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-tag-chip {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--crm-color-app-bg);
    color: var(--crm-color-text-muted);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.2;
}

.crm-tag-chip-warning {
    background: color-mix(in srgb, var(--crm-color-warning) 18%, transparent);
    color: var(--crm-color-warning);
}

.crm-tag-chip-waiting {
    background: color-mix(in srgb, var(--crm-color-warning) 18%, transparent);
    color: var(--crm-color-warning);
}

.crm-tag-chip-privileged {
    background: color-mix(in srgb, var(--crm-color-info) 18%, transparent);
    color: var(--crm-color-info);
}

.crm-tag-chip-tag {
    background: var(--crm-color-primary-soft);
    color: var(--crm-color-primary);
}

/* CHAT-OMNI-06: contador de conversas do atendimento (card e cabecalho da thread) - mesmo tom
   informativo ja usado por crm-tag-chip-privileged, variante propria para nao sobrepor semantica. */
.crm-tag-chip-info {
    background: color-mix(in srgb, var(--crm-color-info) 18%, transparent);
    color: var(--crm-color-info);
}

/* ---------- Coluna central (thread) ---------- */

.crm-thread-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--crm-color-app-bg);
}

/* CHAT-OMNI-06.1: estado inicial da coluna central quando nenhuma conversa foi selecionada. */
.crm-thread-placeholder {
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    color: var(--crm-color-text-muted);
    font-size: 14px;
}

.crm-thread-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    background: var(--crm-color-surface);
    border-bottom: 1px solid var(--crm-color-border);
    min-width: 0;
}

.crm-thread-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    padding: 0;
}

/* OWNER-VISUAL-ACCEPTANCE-CORRECTIONS-01 (§27) — cabeçalho da conversa usa o avatar canônico (UniAvatar). */
.crm-thread-avatar { flex: 0 0 auto; }

/* CHAT-OMNI-06: seletor de conversas do atendimento - mesma anatomia de .crm-ticket-tabs (linha de
   botões, ativo com fundo primary-soft), só visível quando há mais de uma conversa. */
.crm-conversation-switcher {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: var(--crm-color-surface);
    border-bottom: 1px solid var(--crm-color-border);
    overflow-x: auto;
    scrollbar-width: none;
}

.crm-conversation-switcher::-webkit-scrollbar {
    display: none;
}

.crm-conversation-switcher button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    border: 1px solid var(--crm-color-border);
    background: var(--crm-color-app-bg);
    color: var(--crm-color-text-muted);
    font-size: 11.5px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: var(--crm-radius-lg);
    cursor: pointer;
    white-space: nowrap;
}

.crm-conversation-switcher button.active {
    background: var(--crm-color-primary-soft);
    border-color: var(--crm-color-primary);
    color: var(--crm-color-primary);
    font-weight: 600;
}

.crm-conversation-switcher-principal {
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--crm-color-border);
    color: var(--crm-color-text-muted);
    font-size: 10px;
    font-weight: 600;
}

.crm-conversation-switcher button.active .crm-conversation-switcher-principal {
    background: var(--crm-color-primary);
    color: var(--crm-color-on-primary);
}

/* CHAT-OMNI-09: nao lidas POR conversa. Mesma anatomia de .crm-ticket-unread-badge (o contador do
   card do atendimento) para o atendente reconhecer o indicador sem reaprender - aqui um pouco menor,
   porque convive com o badge de canal dentro da propria aba. */
.crm-conversation-switcher-unread {
    flex: 0 0 auto;
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--crm-color-primary);
    color: var(--crm-color-on-primary);
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Aba ativa ja usa a cor primaria como fundo: o contador inverte para nao sumir. */
.crm-conversation-switcher button.active .crm-conversation-switcher-unread {
    background: var(--crm-color-primary);
    color: var(--crm-color-on-primary);
    box-shadow: 0 0 0 1px var(--crm-color-surface);
}

.crm-conversation-switcher-time {
    font-size: 10.5px;
    color: var(--crm-color-text-muted);
}


.crm-thread-heading-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.crm-thread-eyebrow {
    margin: 0;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--crm-color-text-muted);
}

.crm-thread-heading-copy h2 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--crm-color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 260px;
}

.crm-thread-objective {
    font-size: 11.5px;
    color: var(--crm-color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    max-width: 260px;
}

.crm-thread-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    /* Folga entre o chip de quem atende e o menu, pedida na revisão. Escada de VL-05. */
    gap: var(--uni-space-3);
}

.crm-thread-action {
    border: 1px solid var(--crm-color-border);
    background: var(--crm-color-surface);
    color: var(--crm-color-text);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: var(--crm-radius-sm);
    cursor: pointer;
    white-space: nowrap;
}

.crm-thread-action:hover:not(:disabled) {
    border-color: var(--crm-color-primary);
    color: var(--crm-color-primary);
}

.crm-thread-action.primary {
    background: var(--crm-color-primary);
    border-color: var(--crm-color-primary);
    color: var(--crm-color-on-primary);
}

.crm-thread-action.primary:hover:not(:disabled) {
    background: var(--crm-color-primary-hover);
    border-color: var(--crm-color-primary-hover);
    color: var(--crm-color-on-primary);
}

.crm-thread-action.danger {
    border-color: var(--crm-color-danger);
    color: var(--crm-color-danger);
}

.crm-thread-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.crm-thread-owner-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: var(--crm-radius-sm);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--crm-color-primary);
    background: var(--crm-color-primary-soft);
}

.crm-thread-icon-action {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-sm);
    background: var(--crm-color-surface);
    color: var(--crm-color-text-muted);
    cursor: pointer;
}

.crm-thread-icon-action:hover:not(:disabled) {
    border-color: var(--crm-color-primary);
    background: var(--crm-color-primary-soft);
    color: var(--crm-color-primary-soft-text);
}

.crm-thread-icon-action svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.crm-thread-icon-action .crm-icon {
    fill: none;
    stroke: currentColor;
}

.crm-thread-icon-action.active {
    color: var(--crm-color-primary);
    border-color: var(--crm-color-primary);
}

.crm-thread-icon-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.crm-message-stream {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.crm-message-system {
    align-self: center;
    font-size: 11.5px;
    color: var(--crm-color-text-muted);
    background: var(--crm-color-surface);
    border: 1px solid var(--crm-color-border);
    padding: 4px 10px;
    border-radius: 999px;
}

.crm-message-bubble {
    max-width: min(72%, 520px);
    min-width: 0;
    padding: 8px 12px;
    border-radius: var(--crm-radius-lg);
    background: var(--crm-color-surface);
    color: var(--crm-color-text);
    box-shadow: var(--crm-shadow-sm);
    font-size: 13.5px;
    line-height: 1.45;
    align-self: flex-start;
}

.crm-message-bubble p {
    margin: 2px 0 4px;
    overflow-wrap: break-word;
    word-break: break-word;
}

.crm-message-human-format {
    white-space: pre-line;
}

.crm-message-bubble.outbound {
    align-self: flex-end;
    background: var(--crm-color-primary);
    color: var(--crm-color-on-primary);
}

.crm-message-bubble.bot {
    background: var(--crm-color-primary-soft);
    color: var(--crm-color-text);
}

.crm-message-author {
    font-size: 10.5px;
    font-weight: 600;
    opacity: 0.75;
    margin-bottom: 2px;
}

/* CHAT-OMNI-09: rodape da bolha - hora + icone de status lado a lado (padrao WhatsApp), substitui o
   bloco de texto "Enviando.../Enviada/Falha ao enviar" que aparecia embaixo de TODA mensagem. */
.crm-message-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 2px;
}

.crm-message-bubble time {
    font-size: 10px;
    opacity: 0.7;
}

.crm-message-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.75;
}

.crm-message-status-icon svg {
    width: 13px;
    height: 11px;
}

.crm-message-status-icon.pending svg,
.crm-message-status-icon.failed svg {
    width: 13px;
    height: 13px;
}

.crm-message-status-icon.read {
    color: var(--crm-color-info);
    opacity: 1;
}

.crm-message-status-icon.failed {
    color: var(--crm-color-danger);
    opacity: 1;
}

/* Erro de envio continua em texto - e o unico estado acionavel (motivo + tentar novamente),
   diferente dos demais estados, que viram so o icone no rodape da bolha. */
.crm-message-error-line {
    margin: 2px 0 0 !important;
    padding: 5px 9px;
    border-radius: var(--crm-radius-sm);
    background: color-mix(in srgb, var(--crm-color-surface) 88%, transparent);
    color: var(--crm-color-danger);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    border-left: 2px solid var(--crm-color-danger);
    box-shadow: var(--crm-shadow-sm);
    overflow-wrap: break-word;
}

/* Separador de data centralizado (Hoje/Ontem/dia da semana/data completa) - mesmo padrao do
   WhatsApp: aparece uma vez a cada mudanca de data no fluxo de mensagens, nunca por mensagem. */
.crm-date-separator {
    display: flex;
    justify-content: center;
    margin: 6px 0 2px;
}

.crm-date-separator span {
    font-size: 11px;
    font-weight: 600;
    color: var(--crm-color-text-muted);
    background: var(--crm-color-surface);
    border: 1px solid var(--crm-color-border);
    padding: 4px 12px;
    border-radius: 999px;
}

/* Botao flutuante "ir para o fim" - so aparece quando o atendente rolou para cima no historico. */
.crm-message-stream-wrapper {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.crm-scroll-to-bottom {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid var(--crm-color-border);
    background: var(--crm-color-surface);
    color: var(--crm-color-text-muted);
    box-shadow: var(--crm-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.crm-scroll-to-bottom:hover {
    color: var(--crm-color-text);
    border-color: var(--crm-color-primary);
}

.crm-scroll-to-bottom svg {
    width: 18px;
    height: 18px;
}

.crm-scroll-to-bottom-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--crm-color-primary);
    box-shadow: 0 0 0 2px var(--crm-color-surface);
}

/* ---------- Autocomplete paginado de filtros (Subcorte J) ---------- */

.crm-filter-autocomplete {
    position: relative;
    display: inline-block;
    width: 100%;
}

.crm-filter-autocomplete-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-sm);
    background: var(--crm-color-surface);
    color: var(--crm-color-text);
    font-size: 12.5px;
    cursor: pointer;
    text-align: left;
}

.crm-filter-autocomplete-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-filter-autocomplete-clear {
    flex: 0 0 auto;
    color: var(--crm-color-text-muted);
    font-weight: 700;
    line-height: 1;
    padding: 0 2px;
}

.crm-filter-autocomplete-clear:hover {
    color: var(--crm-color-danger);
}

.crm-filter-autocomplete-panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    left: 0;
    min-width: 220px;
    max-width: 320px;
    background: var(--crm-color-surface-elevated);
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-sm);
    box-shadow: var(--crm-shadow-md, 0 8px 24px rgba(0, 0, 0, 0.18));
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.crm-filter-autocomplete-search {
    padding: 6px 8px;
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-sm);
    background: var(--crm-color-app-bg);
    color: var(--crm-color-text);
    font-size: 12.5px;
}

.crm-filter-autocomplete-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.crm-filter-autocomplete-list li {
    padding: 6px 8px;
    border-radius: var(--crm-radius-sm);
    font-size: 12.5px;
    color: var(--crm-color-text);
    cursor: pointer;
}

.crm-filter-autocomplete-list li:hover {
    background: var(--crm-color-primary-soft);
}

.crm-filter-autocomplete-list li.selected {
    background: var(--crm-color-primary-soft);
    color: var(--crm-color-primary-soft-text);
    font-weight: 600;
}

.crm-filter-autocomplete-note {
    margin: 0;
    padding: 6px 4px;
    font-size: 12px;
    color: var(--crm-color-text-muted);
}

.crm-filter-autocomplete-note.error {
    color: var(--crm-color-danger);
}

.crm-filter-autocomplete-more {
    padding: 6px 8px;
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-sm);
    background: transparent;
    color: var(--crm-color-text);
    font-size: 12px;
    cursor: pointer;
}

.crm-filter-autocomplete-more:hover:not(:disabled) {
    background: var(--crm-color-primary-soft);
}

.crm-message-retry {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border: 1px solid var(--crm-color-danger);
    border-radius: var(--crm-radius-sm);
    background: transparent;
    color: var(--crm-color-danger);
    font-size: 10.5px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.6;
}

.crm-message-retry:hover:not(:disabled) {
    background: color-mix(in srgb, var(--crm-color-danger) 12%, transparent);
}

.crm-message-retry:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ---------- Composer ---------- */

.crm-composer {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 10px 14px;
    background: var(--crm-color-surface);
    border-top: 1px solid var(--crm-color-border);
    box-sizing: border-box;
}

.crm-composer-blocked {
    align-items: center;
    justify-content: center;
}

.crm-composer-blocked p {
    margin: 0;
    font-size: 13px;
    color: var(--crm-color-text-muted);
}

.crm-composer-icon-button {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--crm-radius-sm);
    background: transparent;
    color: var(--crm-color-text-muted);
    cursor: pointer;
}

.crm-composer-icon-button:hover:not(:disabled) {
    background: var(--crm-color-primary-soft);
    color: var(--crm-color-primary-soft-text);
}

.crm-composer-icon-button:disabled {
    opacity: 0.72;
    cursor: not-allowed;
}

.crm-composer-icon-button svg,
.crm-composer-icon-button .crm-icon {
    width: 18px;
    height: 18px;
}

.crm-composer-icon-button svg:not(.crm-icon) {
    fill: currentColor;
}

.crm-composer-icon-button .crm-icon {
    fill: none;
    stroke: currentColor;
}

.crm-composer-quick-reply-anchor {
    position: relative;
    flex: 0 0 auto;
}

.crm-composer-shell {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-lg);
    background: var(--crm-color-app-bg);
    padding: 6px 6px 6px 12px;
}

.crm-composer-shell:focus-within {
    border-color: var(--crm-color-primary);
}

.crm-composer-textarea {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 22px;
    max-height: 120px;
    padding: 6px 0;
    border: none;
    outline: none;
    resize: none;
    background: transparent;
    color: var(--crm-color-text);
    font: inherit;
    font-size: 13.5px;
    line-height: 1.4;
    overflow-y: auto;
}

.crm-composer-textarea::placeholder {
    color: var(--crm-color-text-muted);
}

.crm-composer-send-button {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--crm-color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.crm-composer-send-button:hover:not(:disabled) {
    background: var(--crm-color-primary-soft);
    color: var(--crm-color-primary-soft-text);
}

.crm-composer-send-button.has-content {
    background: var(--crm-color-primary);
    color: var(--crm-color-on-primary);
}

.crm-composer-send-button.has-content:hover:not(:disabled) {
    background: var(--crm-color-primary-hover);
    color: var(--crm-color-on-primary);
}

.crm-composer-send-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.crm-composer-send-button svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.crm-composer-voice-status {
    flex: 0 0 auto;
    max-width: 190px;
    padding: 5px 8px;
    border-radius: 999px;
    background: var(--crm-color-primary-soft);
    color: var(--crm-color-primary-soft-text);
    font-size: 11.5px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-composer-voice-status.recording {
    background: color-mix(in srgb, #ef4444 14%, var(--crm-color-surface));
    color: #b91c1c;
}

:root[data-crm-theme="dark"] .crm-ticket-toolbar-icon,
:root[data-crm-theme="dark"] .crm-thread-icon-action,
:root[data-crm-theme="dark"] .crm-composer-icon-button,
:root[data-crm-theme="dark"] .crm-composer-send-button {
    color: color-mix(in srgb, var(--crm-color-text) 82%, var(--crm-color-text-muted));
}

:root[data-crm-theme="dark"] .crm-composer-icon-button:disabled,
:root[data-crm-theme="dark"] .crm-composer-send-button:disabled {
    color: color-mix(in srgb, var(--crm-color-text) 64%, var(--crm-color-text-muted));
    opacity: 0.78;
}

/* Travel/Comercial embutido no painel direito do chat: neutraliza app.css legado no tema escuro. */
.crm-contact-panel .commercial-panel {
    color: var(--crm-color-text);
}

.crm-contact-panel .commercial-header h3,
.crm-contact-panel .summary-card header h4,
.crm-contact-panel .summary-card-title {
    color: var(--crm-color-text);
}

.crm-contact-panel .commercial-empty,
.crm-contact-panel .summary-card,
.crm-contact-panel .request-history,
.crm-contact-panel .summary-chip {
    border-color: var(--crm-color-border);
    background: var(--crm-color-surface-elevated);
    color: var(--crm-color-text-muted);
}

.crm-contact-panel .commercial-empty {
    border-style: dashed;
    background: color-mix(in srgb, var(--crm-color-surface-elevated) 86%, var(--crm-color-primary-soft));
}

.crm-contact-panel .summary-card-meta,
.crm-contact-panel .summary-card-meta span,
.crm-contact-panel .summary-contact-row,
.crm-contact-panel .summary-chip small {
    color: var(--crm-color-text-muted);
}

.crm-contact-panel .summary-contact-row svg {
    fill: currentColor;
}

.crm-contact-panel .mini-button,
.crm-contact-panel .tag-chip-add {
    border-color: var(--crm-color-border);
    background: var(--crm-color-surface);
    color: var(--crm-color-text);
}

.crm-contact-panel .mini-button:hover:not(:disabled),
.crm-contact-panel .summary-chip:hover {
    border-color: var(--crm-color-primary);
    background: var(--crm-color-primary-soft);
    color: var(--crm-color-primary-soft-text);
}

.crm-contact-panel .mini-button.primary {
    border-color: var(--crm-color-primary);
    background: var(--crm-color-primary);
    color: var(--crm-color-on-primary);
}

.crm-contact-panel .mini-button.primary:hover:not(:disabled) {
    border-color: var(--crm-color-primary-hover);
    background: var(--crm-color-primary-hover);
    color: var(--crm-color-on-primary);
}

.crm-contact-panel .status-badge,
.crm-contact-panel .tag-chip {
    min-height: 22px;
    padding-inline: 10px;
    line-height: 1.2;
}

/* ---------- Painel de contato ---------- */

.crm-contact-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    background: var(--crm-color-surface);
    border-left: 1px solid var(--crm-color-border);
    padding: 16px;
    box-sizing: border-box;
    gap: 16px;
}

.crm-contact-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.crm-contact-header h2 {
    margin: 2px 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--crm-color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.crm-contact-eyebrow {
    margin: 0;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--crm-color-text-muted);
}

.crm-contact-close {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--crm-radius-sm);
    background: transparent;
    color: var(--crm-color-text-muted);
    font-size: 16px;
    cursor: pointer;
}

.crm-contact-close:hover {
    background: var(--crm-color-app-bg);
}

.crm-contact-compact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.crm-contact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.crm-contact-label {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: var(--crm-color-text-muted);
}

.crm-contact-value {
    font-size: 12.5px;
    color: var(--crm-color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    min-width: 0;
}

.crm-contact-select {
    max-width: 160px;
    min-width: 0;
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-sm);
    padding: 4px 6px;
    font-size: 12px;
    background: var(--crm-color-surface);
    color: var(--crm-color-text);
}

.crm-contact-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--crm-color-border);
}

.crm-contact-block h3 {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--crm-color-text-muted);
}

.crm-contact-block button {
    border: 1px solid var(--crm-color-border);
    background: var(--crm-color-surface);
    color: var(--crm-color-text);
    font-size: 12.5px;
    font-weight: 600;
    padding: 8px 10px;
    border-radius: var(--crm-radius-sm);
    cursor: pointer;
    text-align: left;
}

.crm-contact-block button.primary {
    background: var(--crm-color-primary);
    border-color: var(--crm-color-primary);
    color: var(--crm-color-on-primary);
    text-align: center;
}

.crm-contact-block button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* CHAT-OMNI-06: painel "Contato unificado" (identidades de canal + referências externas). */
.crm-contact-identities-muted {
    margin: 0;
    font-size: 12px;
    color: var(--crm-color-text-muted);
}

.crm-contact-identities-subheading {
    margin: 6px 0 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--crm-color-text-muted);
}

.crm-contact-identities-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.crm-contact-identities-list li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.crm-contact-identity-value {
    font-size: 12.5px;
    color: var(--crm-color-text);
}

.crm-contact-field-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--crm-color-text-muted);
}

.crm-contact-field-stack input {
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-sm);
    padding: 6px 8px;
    font-size: 13px;
    color: var(--crm-color-text);
}

/* ---------- Modal de transferência ----------
   O bloco anterior refinava `.field-stack select` e `.modal-actions button` do chrome legado —
   markup que não existe mais aqui. Sobrou o que é próprio deste formulário: o ritmo entre os
   dois campos, na escada de VL-05. */

.crm-transfer-form {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-4);
}

/* ---------- Modal de novo atendimento manual (refinamento sobre o chrome compartilhado) ---------- */

.crm-new-ticket-modal .field-stack input,
.crm-new-ticket-modal .field-stack select {
    padding: 8px 10px;
    border-radius: var(--crm-radius-sm);
    border: 1px solid var(--crm-color-border);
    font-size: 13px;
    color: var(--crm-color-text);
}

.crm-new-ticket-modal .modal-actions button {
    border-radius: var(--crm-radius-sm);
    font-size: 12.5px;
}

/* ---------- Modal de nova conversa ----------
   Revisão do proprietário (2026-09-08). O bloco anterior era escopado por
   `.crm-new-conversation-modal`, classe que sumiu do markup quando o formulário migrou para
   `UniModal`: TODO ele era regra morta, e foi isso que produziu "tudo colado", o DDI numa linha
   separada do número e a tipografia fora do padrão. Agora o escopo é o próprio formulário. */

.crm-new-conversation-form {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-4);
}

/* Telefone é UM campo lido da esquerda para a direita: DDI curto e número no resto da linha.
   O proprietário pediu 15–20% para o DDI; 18% com piso de 96px cabe "🇧🇷 +351" sem truncar. */
.crm-new-conversation-form .crm-phone-field-row {
    display: flex;
    align-items: flex-start;
    gap: var(--uni-space-2);
}

.crm-new-conversation-form .crm-country-code-field {
    flex: 0 0 18%;
    min-width: 96px;
}

.crm-new-conversation-form .crm-phone-field-row > input {
    flex: 1 1 auto;
    min-width: 0;
}

/* Único controle que não tem altura de linha única: cresce, mas não vira caixa de texto longo. */
.crm-new-conversation-message {
    height: auto;
    min-height: 84px;
    padding: var(--uni-space-3);
    line-height: 1.5;
    resize: vertical;
}

@media (max-width: 480px) {
    /* Em tela estreita 18% não cabe o rótulo do DDI; o piso vira a regra. */
    .crm-new-conversation-form .crm-country-code-field { flex: 0 0 104px; }
}

/* ---------- Modal de historico do atendimento ---------- */

.crm-ticket-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.crm-ticket-history-item {
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-sm);
    padding: 10px 12px;
    background: var(--crm-color-surface-alt, transparent);
}

.crm-ticket-history-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.crm-ticket-history-row strong {
    font-size: 13px;
    color: var(--crm-color-text);
}

.crm-ticket-history-row time {
    font-size: 11.5px;
    color: var(--crm-color-text-muted);
    flex: 0 0 auto;
}

.crm-ticket-history-meta {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--crm-color-text-muted);
}
.crm-composer-signature { display:flex; align-items:center; align-self:center; gap:.35rem; font-size:.75rem; color:var(--crm-color-text-muted); white-space:nowrap; }
.crm-composer-signature input { accent-color:var(--crm-color-primary); }
.crm-composer-signature input:disabled { cursor:not-allowed; }
.crm-composer-signature-locked { align-self:center; font-size:.68rem; font-weight:400; color:var(--crm-color-text-muted); white-space:nowrap; }
/* ---------- Gravação de áudio ----------
   Revisão do proprietário (2026-09-08), lado a lado com o WhatsApp Web: a ordem estava errada e
   as peças, pequenas. A faixa é lixeira · ponto · tempo · ondas · pausar, encostada à direita
   (o botão de enviar vem logo depois, fora deste bloco). */

.crm-composer-shell.is-recording {
    align-items: center;
}

.crm-voice-strip {
    /* Empurra o conjunto para a direita — a textarea está `hidden` durante a gravação e não
       ocupa a linha, então sem isto tudo ficava colado à esquerda. */
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--uni-space-3);
    min-width: 0;
}

/* "Com um bom tamanho": 36px de alvo e glifo de 20px, contra os 34/16 da fileira de ferramentas.
   Esta barra tem uma tarefa só, e as peças dela são as únicas na linha. */
.crm-voice-button {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--crm-radius-sm);
    background: transparent;
    cursor: pointer;
}

.crm-voice-button .crm-icon {
    width: 20px;
    height: 20px;
}

.crm-voice-button:hover {
    background: var(--uni-color-neutral-soft);
}

/* A lixeira é tinta normal: descartar não é a ação de destaque da barra, é a saída. */
.crm-voice-cancel { color: var(--crm-color-text); }

/* O vermelho fica no que interrompe. */
.crm-voice-pause { color: var(--crm-color-danger); }

.crm-voice-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--crm-color-danger);
    animation: crm-voice-pulse 1.1s ease-in-out infinite;
}

/* Pausado, o ponto para de pulsar: piscar sem gravar diria que ainda está gravando. */
.crm-voice-dot.is-paused {
    animation: none;
    opacity: 0.4;
}

@keyframes crm-voice-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
    .crm-voice-dot { animation: none; }
}

.crm-voice-bars {
    flex: 0 0 auto;
    width: 168px;
    display: flex;
    align-items: center;
    gap: 2px;
    height: 24px;
}

.crm-voice-bars.is-paused { opacity: 0.45; }

.crm-voice-bar {
    flex: 1 1 auto;
    max-width: 3px;
    height: 100%;
    border-radius: 999px;
    background: var(--crm-color-primary);
    transform: scaleY(0.15);
    transform-origin: center;
    transition: transform 0.08s linear;
}

/* O tempo vem ANTES das ondas (ordem do WhatsApp) e não pode dançar a cada segundo. */
.crm-voice-timer {
    flex: 0 0 auto;
    min-width: 42px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: var(--uni-font-size-sm);
    color: var(--crm-color-text);
}

/* Em tela estreita as ondas cedem espaço antes de qualquer outra coisa: elas são o enfeite
   informativo da faixa, o tempo e os botões é que decidem. */
@media (max-width: 640px) {
    .crm-voice-bars { width: 84px; }
    .crm-voice-strip { gap: var(--uni-space-2); }
}

/* ---------- Emoji picker (UNICHAT-UX-PRODUCT-ATENDIMENTO-OMNICHANNEL-05) ---------- */
.crm-composer-popover-anchor {
    position: relative;
    flex: 0 0 auto;
}

/* OWNER VISUAL R2 — seletor de emoji com a anatomia do WhatsApp Web (referência "133906.png"):
   abas de contorno no topo, busca em pílula, título da seção, grade de 12, controle emoji·figurinhas embaixo.
   ALTURA FIXA (a grade rola dentro): trocar de categoria nunca muda o tamanho do painel. Fecha por Esc ou
   clicando fora (backdrop transparente); escolher emoji não fecha. */
.emoji-popover-backdrop { position: fixed; inset: 0; z-index: calc(var(--uni-z-dropdown, 40) - 1); background: transparent; }
.emoji-popover {
    position: absolute;
    bottom: calc(100% + 10px);
    left: -8px;
    z-index: var(--uni-z-dropdown, 40);
    display: flex;
    flex-direction: column;
    width: 560px;
    max-width: min(560px, calc(100vw - 24px));
    height: 430px;
    max-height: calc(100vh - 120px);
    background: var(--crm-color-surface);
    border: 1px solid var(--crm-color-border);
    border-radius: 14px;
    box-shadow: var(--crm-shadow-md);
    overflow: hidden;
}
.emoji-popover-tabs {
    display: flex; flex: 0 0 auto; padding: 4px 8px 0;
    border-bottom: 1px solid var(--crm-color-border);
}
.emoji-popover-tab {
    flex: 1 1 0; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--crm-color-text-muted); cursor: pointer; padding: 0;
}
.emoji-popover-tab .crm-icon { width: 22px; height: 22px; }
.emoji-popover-tab:hover { color: var(--crm-color-text); }
.emoji-popover-tab.is-active { color: var(--crm-color-primary); border-bottom-color: var(--crm-color-primary); background: transparent; }
.emoji-popover-search-field {
    display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
    margin: 10px 14px 6px; padding: 0 14px; height: 40px;
    border: 1px solid var(--crm-color-border); border-radius: 999px; background: var(--crm-color-surface); color: var(--crm-color-text-muted);
}
.emoji-popover-search-field:focus-within { border-color: var(--crm-color-primary); }
.emoji-popover-search-field .crm-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.emoji-popover-search { flex: 1 1 auto; min-width: 0; border: none; outline: none; background: transparent; color: var(--crm-color-text); font-size: 14px; }
.emoji-popover-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 8px 8px 14px; }
.emoji-popover-section { margin: 8px 0 6px; font-size: 13px; font-weight: 600; color: var(--crm-color-text-muted); }
.emoji-popover-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; padding: 0; overflow: visible; }
.emoji-popover-item {
    display: inline-flex; align-items: center; justify-content: center; aspect-ratio: 1; height: auto; min-height: 36px;
    border: 0; border-radius: 6px; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; padding: 0;
}
.emoji-popover-item:hover { background: var(--crm-color-surface-elevated); }
.emoji-popover-empty { grid-column: 1 / -1; margin: 24px 0; text-align: center; font-size: 13px; color: var(--crm-color-text-muted); }
.emoji-popover-footer { flex: 0 0 auto; display: flex; justify-content: center; padding: 8px; border-top: 1px solid var(--crm-color-border); }
.emoji-popover-switch { display: inline-flex; border: 1px solid var(--crm-color-border); border-radius: 999px; overflow: hidden; }
.emoji-popover-switch button {
    width: 68px; height: 32px; border: 0; background: transparent; color: var(--crm-color-text-muted); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; border-right: 1px solid var(--crm-color-border);
}
.emoji-popover-switch button:last-child { border-right: 0; }
.emoji-popover-switch button .crm-icon { width: 20px; height: 20px; }
.emoji-popover-switch button.is-active { background: var(--crm-color-surface-elevated); color: var(--crm-color-text); }
.emoji-popover-scroll--stickers { padding: 8px 14px; }
.emoji-popover-stickers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.emoji-popover-sticker { aspect-ratio: 1; border: 0; border-radius: 8px; background: transparent; padding: 6px; cursor: pointer; }
.emoji-popover-sticker:hover { background: var(--crm-color-surface-elevated); }
.emoji-popover-sticker img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 767px) {
    .emoji-popover { position: fixed; left: 8px; right: 8px; bottom: 76px; width: auto; max-width: none; height: min(430px, 60vh); }
    .emoji-popover-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .emoji-popover-item { font-size: 24px; }
}

.crm-ticket-advanced-filters { padding:.25rem .75rem; color:var(--crm-color-text-muted); font-size:.78rem; }
.crm-ticket-advanced-filters summary { cursor:pointer; }
.crm-ticket-advanced-grid { display:grid; gap:.45rem; padding:.55rem 0; }
.crm-ticket-advanced-grid label { display:flex; align-items:center; gap:.4rem; }
.crm-ticket-advanced-grid select, .crm-ticket-advanced-grid input[type=date] { margin-left:auto; max-width:10rem; }
.crm-ticket-clear-filters { border:0; background:transparent; color:var(--crm-color-primary); text-align:left; padding:0; }
.crm-ticket-actions-menu { position:relative; }
/* CHAT-OMNI-06.1: captura o clique fora do menu de acoes. Invisivel de proposito - so o menu deve
   ter destaque visual; fica logo abaixo dele no empilhamento (menu usa z-index 40). */
.crm-menu-backdrop { position:fixed; inset:0; z-index:39; background:transparent; }
.crm-ticket-actions-menu summary { cursor:pointer; list-style:none; padding:.25rem .6rem; font-size:1.25rem; }
/* CHAT-OMNI-06.1: o menu era transparente porque --crm-surface/--crm-border/--crm-text nao existem
   (os tokens reais tem prefixo --crm-color-). Custom property indefinida = valor invalido, entao o
   background simplesmente nao era aplicado. Alinhado agora ao mesmo padrao dos demais popovers do
   chat: surface elevada + borda + sombra media. */
.crm-ticket-actions-menu > div { position:absolute; right:0; top:calc(100% + 4px); z-index:40; min-width:13rem; padding:.35rem; background:var(--crm-color-surface-elevated); border:1px solid var(--crm-color-border); border-radius:var(--crm-radius-sm, .55rem); box-shadow:var(--crm-shadow-md, 0 8px 24px rgba(0,0,0,.18)); }
.crm-ticket-actions-menu button { display:block; width:100%; border:0; background:transparent; color:var(--crm-color-text); padding:.55rem; text-align:left; border-radius:.35rem; cursor:pointer; }
/* Hover no mesmo token dos demais itens de lista/menu do chat (.crm-filter-autocomplete-list li).
   Nao usar --crm-color-surface aqui: no tema claro ele e identico a --crm-color-surface-elevated
   (ambos #ffffff), entao o destaque ficaria invisivel. */
.crm-ticket-actions-menu button:hover:not(:disabled),
.crm-ticket-actions-menu button:focus-visible:not(:disabled) { background:var(--crm-color-primary-soft); color:var(--crm-color-primary-soft-text); }
.crm-ticket-actions-menu button:disabled { opacity:.5; cursor:default; }
.crm-ticket-actions-menu summary:hover { color:var(--crm-color-primary); }
.crm-message-image { display:block; max-width:min(320px,100%); max-height:320px; object-fit:contain; border-radius:.5rem; }
.crm-message-sticker { display:block; width:128px; height:128px; object-fit:contain; }
.crm-message-video { display:block; width:min(360px,100%); max-height:360px; border-radius:.5rem; background:#000; }
.crm-message-bubble audio { max-width:100%; }
.crm-message-document { display:flex; gap:.65rem; align-items:center; padding:.65rem; border:1px solid var(--crm-color-border); border-radius:.5rem; color:inherit; text-decoration:none; }

/* UNICHAT-UX-PRODUCT-ATENDIMENTO-OMNICHANNEL-05 — selo por tipo de arquivo (files-desktop.png).
   Cores por token semântico, não hex de marca — mesmo padrão já usado em .crm-channel-badge-
   whatsapp/-instagram (var(--crm-color-success)/--crm-color-danger em vez do verde/gradiente
   reais da marca). Peso 600 (SemiBold): foundations.md recomenda para badges/status; 800/900
   "não replicar em componentes novos" sem uso canônico documentado. */
.crm-message-document-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--crm-radius-sm, 6px);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--crm-color-on-primary);
}
.crm-message-document-badge.tone-word { background: var(--crm-color-info); }
.crm-message-document-badge.tone-excel { background: var(--crm-color-success); }
.crm-message-document-badge.tone-powerpoint { background: var(--crm-color-warning); }
.crm-message-document-badge.tone-pdf { background: var(--crm-color-danger); }
.crm-message-document-badge.tone-text { background: var(--crm-color-text-muted); }
.crm-message-document-badge.tone-generic { background: var(--crm-color-text-muted); }

.crm-message-document-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.crm-message-document-name { overflow-wrap: anywhere; font-size: 13.5px; }
.crm-message-document-info small { color: var(--crm-color-text-muted); font-size: 11.5px; }

.crm-message-media-link { display: inline-block; }

.crm-message-media-broken {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: .65rem .85rem;
    border: 1px dashed var(--crm-color-border);
    border-radius: .5rem;
    color: var(--crm-color-text-muted);
    font-size: 13px;
}
.crm-message-media-broken .crm-icon { width: 16px; height: 16px; flex: 0 0 auto; }

/* ============================================================================
   UNICHAT-MVP-UX-PRODUCT-EXPERIENCE-COMPLETION-01 (Fase B) — Inbox mobile (<=640px)
   Uma coluna só: lista de conversas OU a conversa aberta, com botão de voltar.
   ============================================================================ */

.crm-thread-back { display: none; }

@media (max-width: 767px) {
    .crm-chat-shell,
    .crm-chat-shell.details-closed,
    .crm-chat-shell.details-open {
        grid-template-columns: 1fr;
    }

    /* drill-down: nunca as duas ao mesmo tempo */
    .crm-chat-shell.no-thread .crm-thread-column,
    .crm-chat-shell.no-thread .crm-thread-placeholder {
        display: none;
    }

    .crm-chat-shell.has-thread .crm-ticket-column {
        display: none;
    }

    .crm-ticket-column {
        border-right: 0;
        padding: 10px 10px 0;
    }

    /* barra de voltar no topo da conversa */
    .crm-thread-back {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 10px 12px;
        border: 0;
        border-bottom: 1px solid var(--crm-color-border);
        background: var(--crm-color-surface);
        color: var(--crm-color-primary);
        font-size: 13.5px;
        font-weight: 600;
        cursor: pointer;
    }

    .crm-thread-back svg { width: 18px; height: 18px; }
    /* A ficha em overlay já é regra da faixa <=1023 (acima). */

    /* Composer respeita a safe area inferior (a bottom nav some no nível conversa —
       ver regra :has no fim do arquivo). */
    .crm-composer {
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }

    /* Alvos de toque do composer (contrato S): 44px no mobile, ícone visual inalterado.
       O botão de enviar/gravar usa classe própria (crm-composer-send-button) e ficava de fora
       da regra — 32px, abaixo do mínimo de toque. */
    .crm-composer-icon-button,
    .crm-composer-send-button {
        width: 44px;
        height: 44px;
    }
}

/* Bottom nav x composer (contrato W §47): no nível conversa a barra inferior sai de
   cena e devolve a altura reservada; ao voltar para a lista ela reaparece. Mesmo
   idioma de :has() já homologado no UniCursos (body:has(.courses-mobile-drawer)). */
@media (max-width: 767px) {
    .crm-shell:has(.crm-chat-shell.has-thread) .crm-mobile-nav {
        display: none;
    }

    .crm-shell:has(.crm-chat-shell.has-thread) .crm-shell-main {
        padding-bottom: 0;
    }
}

/* ============================================================================
   UNICHAT-MOBILE-UX-ARCHITECTURE-01 (Phase B / B2) — Inbox como experiência de mensagem
   mobile (OD-1/OD-2/OD-4 B). Desktop (>=1024) intocado: tudo abaixo vive em <=1023/<=767.
   ============================================================================ */

.crm-chat-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.crm-chat-page > .crm-chat-shell {
    flex: 1 1 auto;
    min-height: 0;
}

.crm-thread-actions-desktop {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 0 1 auto;
}

.crm-thread-actions-compact {
    display: none;
}

/* App bar da conversa: identidade tocável (→ detalhes) + chip "quem atende". */
.crm-appbar-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
    border: 0;
    background: transparent;
    color: #ffffff;
    padding: 4px 4px 4px 0;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
}

.crm-appbar-identity:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.75);
    outline-offset: 2px;
}

.crm-appbar-identity .crm-thread-avatar {
    width: 36px;
    height: 36px;
    font-size: 12px;
}

.crm-appbar-identity-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* UNICHAT-UX-PRODUCT-ATENDIMENTO-OMNICHANNEL-05 (D-10, achado do Owner na Acceptance) — o chip
   "quem atende" (ConversationAttendChip/.uni-appbar-chip) só tinha estilo dentro de
   @media (max-width:1023px) (base escura em uni-mobile-ux.css, superfície clara aqui). D-10 passou
   a usar o MESMO chip também no desktop, que ficou sem nenhuma regra — herdava aparência padrão de
   <button> do navegador ("cara de sistema"). Esta cópia sem media query cobre o desktop; as regras
   coladas abaixo continuam valendo em telas menores, redundantes mas inofensivas. */
.crm-thread-chip.uni-appbar-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-height: 32px;
    padding: 2px 12px 2px 10px;
    border-radius: 999px;
    border: 1px solid var(--crm-color-border);
    background: var(--crm-color-app-bg);
    color: var(--crm-color-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.1;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-thread-chip.uni-appbar-chip .crm-icon,
.crm-thread-chip.uni-appbar-chip svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.crm-thread-chip.uni-appbar-chip .uni-appbar-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

/* Achado do proprietário (2026-09-08): no tema claro o hover ficava PRETO. O token usado era o
   da barra lateral (`--crm-color-sidebar-bg-hover`, #161b22), que é escuro por definição e não
   acompanha o tema — o chip vive no cabeçalho claro da conversa, não na sidebar. */
.crm-thread-chip.uni-appbar-chip:hover {
    background: var(--uni-color-neutral-soft);
}

.crm-thread-chip.uni-appbar-chip:focus-visible {
    outline: 2px solid var(--crm-color-primary);
    outline-offset: 2px;
}

.crm-thread-chip.uni-appbar-chip.is-ai { color: var(--crm-color-primary); }
.crm-thread-chip.uni-appbar-chip.is-me { color: var(--crm-color-success, #15803d); }
.crm-thread-chip.uni-appbar-chip.is-other { color: var(--crm-color-warning, #b45309); }
.crm-thread-chip.uni-appbar-chip.is-waiting { color: var(--crm-color-danger, #b91c1c); }

@media (max-width: 1023px) {
    .crm-thread-actions-compact {
        display: flex;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto;
    }

    /* Chip "quem atende" sobre superfície clara (header do tablet). */
    .crm-thread-chip.uni-appbar-chip {
        border-color: var(--crm-color-border);
        background: var(--crm-color-app-bg);
        color: var(--crm-color-text);
        min-height: 32px;
    }

    .crm-thread-chip.uni-appbar-chip.is-ai { color: var(--crm-color-primary); }
    .crm-thread-chip.uni-appbar-chip.is-me { color: var(--crm-color-success, #15803d); }
    .crm-thread-chip.uni-appbar-chip.is-other { color: var(--crm-color-warning, #b45309); }
    .crm-thread-chip.uni-appbar-chip.is-waiting { color: var(--crm-color-danger, #b91c1c); }

    /* Header da conversa (tablet): 1 linha — identidade · chip · ⋮. Eyebrow/objetivo saem. */
    .crm-thread-header {
        flex-wrap: nowrap;
        align-items: center;
        padding: 8px 12px;
        gap: 8px;
    }

    .crm-thread-heading {
        flex: 1 1 auto;
        min-width: 0;
    }

    .crm-thread-eyebrow,
    .crm-thread-objective {
        display: none;
    }

    .crm-thread-heading-copy h2 {
        font-size: 15px;
    }

    /* Lista: tags do contato e ações secundárias saem do card (contrato H/O). */
    .crm-ticket-card .crm-tag-chip-tag,
    .crm-ticket-action-chip--secondary {
        display: none;
    }

    .crm-ticket-column {
        padding: 10px 12px 0;
        gap: 8px;
    }

    /* Sheet de filtros: grid de 1 coluna, campos de 44px. */
    .crm-ticket-advanced-grid--sheet {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        font-size: 14px;
        color: var(--crm-color-text);
    }

    .crm-ticket-advanced-grid--sheet > label {
        display: grid;
        gap: 6px;
        font-weight: 600;
    }

    .crm-ticket-advanced-grid--sheet > label.crm-ticket-filter-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        font-weight: 500;
    }

    .crm-ticket-advanced-grid--sheet > label.crm-ticket-filter-toggle input {
        width: 20px;
        height: 20px;
        margin: 0;
    }

    .crm-ticket-advanced-grid--sheet select,
    .crm-ticket-advanced-grid--sheet input[type="date"] {
        width: 100%;
        min-height: 44px;
        padding: 8px 12px;
        border: 1px solid var(--crm-color-border);
        border-radius: var(--crm-radius-sm);
        background: var(--crm-color-surface);
        color: var(--crm-color-text);
        font: inherit;
        font-weight: 400;
        box-sizing: border-box;
    }

    /* Ficha do contato como superfície de detalhe: app bar própria, cabeçalho legado some. */
    .crm-chat-shell.mobile-details-open .crm-contact-panel {
        padding-top: 0;
        padding-bottom: var(--uni-page-tail);
        gap: var(--uni-appbar-gap);
    }

    /* A app bar da ficha é o teto da superfície: rompe o padding lateral do painel (16px)
       para ficar edge-to-edge, como a app bar de página. */
    .crm-chat-shell.mobile-details-open .crm-contact-panel > .uni-detail-head {
        display: grid;
        margin: 0 -16px;
        width: calc(100% + 32px);
        position: sticky;
        top: 0;
    }

    .crm-chat-shell.mobile-details-open .crm-contact-panel > .crm-contact-header {
        display: none;
    }
}

@media (min-width: 768px) {
    .crm-chat-appbar-conv {
        display: none !important;
    }
}

@media (max-width: 767px) {
    /* Celular: com conversa aberta a app bar da CONVERSA substitui a da lista e o header/back
       da thread (o stream começa logo abaixo da app bar). */
    .crm-chat-page.has-thread .crm-chat-appbar-page {
        display: none;
    }

    .crm-chat-shell.has-thread .crm-thread-header,
    .crm-chat-shell.has-thread .crm-thread-back {
        display: none;
    }

    .crm-chat-appbar-conv .uni-appbar-actions .uni-appbar-chip {
        max-width: 132px;
    }
}


/* ============================================================================
   B8 - ficha do contato: menos ruído, cards no padrão Uni e respiro no fim.
   ============================================================================ */

@media (max-width: 1023px) {
    /* O título da seção vem do <summary>; o <h3> interno viraria repetição. */
    .crm-contact-collapse .crm-contact-block > h3,
    .crm-contact-collapse .commercial-header > div:first-child {
        display: none;
    }

    .crm-contact-collapse .crm-contact-block,
    .crm-contact-collapse .commercial-panel {
        border-top: 0;
        padding: 0 14px 14px;
    }

    .crm-contact-collapse .commercial-header {
        justify-content: flex-end;
    }
}

@media (min-width: 1024px) {
    .crm-contact-collapse > summary {
        display: none;
    }
}

/* Cards Contratante/Pedido no padrão de card do Uni (superfície, raio, sombra leve). */
.crm-contact-panel .summary-card {
    gap: 10px;
    padding: 14px;
    border-radius: var(--crm-radius-md);
    background: var(--crm-color-surface);
    box-shadow: var(--crm-shadow-sm);
}

.crm-contact-panel .summary-card header h4 {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--crm-color-text-muted);
}

.crm-contact-panel .summary-card-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.crm-contact-panel .summary-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 12.5px;
}

.crm-contact-panel .mini-button,
.crm-contact-panel .tag-chip-add {
    min-height: 32px;
    padding: 0 12px;
    border-radius: var(--crm-radius-sm);
    font-weight: 500;
}

.crm-contact-panel .commercial-header h3 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--crm-color-text-muted);
}

/* ============================================================================
   Atendimento — quarta superfície do corte visual (rodada 1: lista, conversa e
   composer). Só o que a conformidade com o contrato exigiu; o corte 05 continua
   sendo a base e não é revertido.
   ========================================================================== */

/* CV-05 — as ferramentas do composer agora vivem DENTRO do campo, à esquerda,
   como o microfone e o enviar já viviam à direita. */
.crm-composer-tools {
    display: flex;
    align-items: center;
    gap: var(--uni-space-1);
    flex: 0 0 auto;
    align-self: flex-end;
}

/* O shell deixa de ter recuo à esquerda: quem dá respiro agora é o primeiro
   ícone. Sem isto o grupo de ferramentas ficaria descolado da borda. */
.crm-composer-shell {
    padding: var(--uni-space-1) var(--uni-space-1) var(--uni-space-1) var(--uni-space-1);
}

/* VL-44 — o campo do composer é campo de entrada: realce neon azul, nunca âmbar. */
.crm-composer-shell:focus-within {
    border-color: var(--crm-color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--crm-color-primary) 22%, transparent);
}

/* D-12 — o "+" é um ícone, não um botão primário de largura total. */
.crm-ticket-toolbar-new {
    color: var(--crm-color-primary);
}

.crm-ticket-toolbar-new:hover:not(:disabled) {
    background: var(--uni-color-primary-soft);
}

/* D-06 / VL-21 — popover de filtros da lista, mesma anatomia já homologada em
   /contatos. Posicionado por `uniUx.anchor` (VL-30). */
/* O gatilho de filtros divide a linha com o "+" e o atualizar, e empurra para a
   direita: as tres acoes da lista numa faixa so. */
.crm-ticket-filters {
    position: relative;
    margin-left: auto;
}

.crm-ticket-filter-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    border: 0;
    background: transparent;
    cursor: default;
}

.crm-ticket-filters-panel {
    position: fixed;
    z-index: 41;
    width: min(420px, calc(100vw - var(--uni-space-6)));
    max-height: min(70vh, 560px);
    overflow-y: auto;
    padding: var(--uni-space-4);
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-lg);
    background: var(--crm-color-surface);
    box-shadow: var(--crm-shadow-md);
}

.crm-ticket-filters-body {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-4);
}

.crm-ticket-filters-group {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
}

.crm-ticket-filters-group h3 {
    margin: 0;
    font-size: var(--uni-font-size-sm);
    font-weight: 600;
    color: var(--crm-color-text);
}

.crm-ticket-filters-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uni-space-2);
}

/* A categoria vira chip dentro do popover: era uma faixa de abas que cortava o
   último rótulo no meio, sem sinal de que havia mais. Em chips ela quebra linha. */
.crm-ticket-filter-chip {
    padding: var(--uni-space-1) var(--uni-space-3);
    border: 1px solid var(--crm-color-border);
    border-radius: var(--uni-radius-pill);
    background: var(--crm-color-surface);
    color: var(--crm-color-text-muted);
    font-size: var(--uni-font-size-sm);
    cursor: pointer;
}

.crm-ticket-filter-chip:hover { background: var(--uni-color-neutral-soft); }

.crm-ticket-filter-chip.active {
    border-color: var(--crm-color-primary);
    background: var(--uni-color-primary-soft);
    color: var(--crm-color-primary);
    font-weight: 600;
}

.crm-ticket-filter-chip:focus-visible {
    outline: 2px solid var(--uni-color-focus-ring);
    outline-offset: 2px;
}

/* D-14 — as ações do card vivem no menu, não na linha. O gatilho só ganha peso
   ao passar o mouse ou receber foco: VL-11 diz que o ⋮ não tem contorno. */
.crm-ticket-card-menu {
    position: absolute;
    top: var(--uni-space-2);
    right: var(--uni-space-2);
    opacity: 0;
    transition: opacity 140ms ease;
}

.crm-ticket-card:hover .crm-ticket-card-menu,
.crm-ticket-card:focus-within .crm-ticket-card-menu,
.crm-ticket-card.selected .crm-ticket-card-menu { opacity: 1; }

/* CV-02 — a IA se identifica com selo próprio; o atendente humano só aparece
   quando há mais de um respondendo na mesma conversa. */
.crm-message-author.is-ai {
    display: inline-flex;
    align-items: center;
    gap: var(--uni-space-1);
}

.crm-message-author.is-ai .crm-icon {
    width: 14px;
    height: 14px;
}

/* O menu do card é posicionado em relação ao próprio card. Sem isto ele se
   ancoraria no primeiro ancestral posicionado — a coluna inteira. */
.crm-ticket-card { position: relative; }

/* Com o menu no canto superior direito, a linha do título precisa de folga para
   não passar por baixo dele. */
.crm-ticket-card:hover .crm-ticket-title-row,
.crm-ticket-card:focus-within .crm-ticket-title-row,
.crm-ticket-card.selected .crm-ticket-title-row { padding-right: var(--uni-space-6); }

/* VL-28 / A-17 — no tema escuro a bolha recebida media 1,08:1 contra o fundo da
   conversa: o texto continuava legível (14:1), mas a BOLHA sumia como forma, e é
   ela que separa uma mensagem da outra. Clarear o fundo até 3:1 deixaria a
   conversa manchada; a regra já diz o que fazer — "chrome escuro + conteúdo
   escuro, separados por 1px semântico" (VL-28 / UI-08B). */
:root[data-crm-theme="dark"] .crm-message-bubble.inbound {
    border: 1px solid var(--crm-color-border);
}

/* Revisão do proprietário (2026-09-08) — primeira linha da coluna no padrão do
   WhatsApp Web: identidade à esquerda, ações à direita. */
.crm-ticket-brandbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uni-space-3);
    /* Sem recuo lateral próprio: a coluna já o tem, e somar o dobro desalinhava o "+" da ponta
       da busca em 16px — a revisão pediu os dois na mesma vertical. */
    padding: var(--uni-space-2) 0 var(--uni-space-3);
}

.crm-ticket-brandbar-actions {
    display: flex;
    align-items: center;
    gap: var(--uni-space-2);
}

/* O "+" é o mesmo círculo azul da ação de adicionar das listas (VL-35): a mesma
   ação, com a mesma forma, nas duas superfícies. */
.crm-ticket-new-circle {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--uni-color-primary);
    color: var(--uni-color-on-primary);
    cursor: pointer;
    transition: background-color 0.14s ease;
}

.crm-ticket-new-circle svg { width: 18px; height: 18px; fill: currentColor; }
.crm-ticket-new-circle:hover:not(:disabled) { background: var(--uni-color-primary-hover); }
/* UNICHAT-CUT-6 (polish, item 3) — desabilitado de verdade: sem cor de ação, cursor de bloqueio (sem canal). */
.crm-ticket-new-circle:disabled { background: var(--uni-color-neutral-soft); color: var(--uni-color-text-muted); cursor: not-allowed; }

.crm-ticket-new-circle:focus-visible {
    outline: 2px solid var(--uni-color-focus-ring);
    outline-offset: 2px;
}

/* A wordmark na coluna clara não pode herdar o tamanho da versão da sidebar. */
.crm-ticket-brandbar .crm-brand-mark { flex: 0 1 auto; min-width: 0; }

/* `.crm-brand-word` nasce com `opacity: 0` porque na sidebar-rail ela só aparece
   quando o trilho expande. Reusada aqui, fora daquele contexto, herdava o zero e
   sobrava só o símbolo. Na coluna de conversas a marca é permanente. */
.crm-ticket-brandbar .crm-brand-word {
    opacity: 1;
    white-space: nowrap;
}

/* Revisão do proprietário (2026-09-08): a busca do WhatsApp Web tem os cantos
   quase circulares. `radius-pill` já é o token da família para isso. */
.crm-ticket-search { border-radius: var(--uni-radius-pill); }

/* Só a wordmark no cabeçalho da lista: sem o símbolo, a marca ocupa a linha
   inteira à esquerda e não compete com as ações. */
.crm-brand-mark--wordmark-only .crm-brand-word { opacity: 1; }
.crm-ticket-brandbar .crm-brand-wordmark-img { height: 22px; width: auto; }

/* D-12 — painel de nova conversa que SUBSTITUI a lista (não é modal). */
.crm-new-conversation {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.crm-new-conversation-header {
    display: flex;
    align-items: center;
    gap: var(--uni-space-3);
    padding: var(--uni-space-4) var(--uni-space-4) var(--uni-space-3);
}

.crm-new-conversation-header h2 {
    margin: 0;
    font-size: var(--uni-font-size-lg);
    font-weight: 600;
    color: var(--crm-color-text);
}

.crm-new-conversation-back {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--crm-color-text);
    cursor: pointer;
}

.crm-new-conversation-back:hover { background: var(--uni-color-neutral-soft); }

.crm-new-conversation-back:focus-visible {
    outline: 2px solid var(--uni-color-focus-ring);
    outline-offset: 2px;
}

.crm-new-conversation-search { margin: 0 0 var(--uni-space-3); }

.crm-new-conversation-action,
.crm-new-conversation-contact {
    display: flex;
    align-items: center;
    gap: var(--uni-space-3);
    width: 100%;
    padding: var(--uni-space-3) var(--uni-space-4);
    border: 0;
    background: transparent;
    color: var(--crm-color-text);
    text-align: left;
    cursor: pointer;
}

.crm-new-conversation-action:hover,
.crm-new-conversation-contact:hover { background: var(--uni-color-neutral-soft); }

.crm-new-conversation-action:focus-visible,
.crm-new-conversation-contact:focus-visible {
    outline: 2px solid var(--uni-color-focus-ring);
    outline-offset: -2px;
}

.crm-new-conversation-action-icon,
.crm-new-conversation-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: var(--uni-font-size-sm);
    font-weight: 600;
}

.crm-new-conversation-action-icon {
    background: var(--uni-color-primary);
    color: var(--uni-color-on-primary);
}

.crm-new-conversation-action-icon .crm-icon { width: 18px; height: 18px; }

.crm-new-conversation-avatar {
    background: var(--uni-color-neutral-soft);
    color: var(--crm-color-text-muted);
}

.crm-new-conversation-contact-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.crm-new-conversation-contact-body strong {
    font-size: var(--uni-font-size-md);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-new-conversation-contact-body small {
    font-size: var(--uni-font-size-sm);
    color: var(--crm-color-text-muted);
}

.crm-new-conversation-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.crm-new-conversation-state {
    margin: 0;
    padding: var(--uni-space-4);
    font-size: var(--uni-font-size-sm);
    color: var(--crm-color-text-muted);
}

/* Revisão do proprietário (2026-09-08): o painel do "+" tinha recuo próprio somado
   ao da coluna e parecia outra página. Sem recuo lateral, ele ocupa exatamente a
   mesma calha da lista que substituiu — a troca de superfície não deve deslocar
   nada no eixo horizontal. */
.crm-new-conversation-header { padding: var(--uni-space-2) 0 var(--uni-space-3); }
.crm-new-conversation-search { margin: 0 0 var(--uni-space-3); }

.crm-new-conversation-action,
.crm-new-conversation-contact {
    padding: var(--uni-space-2);
    border-radius: var(--crm-radius-md);
}

/* O símbolo cinza fecha a linha do título, alinhado com o fim da busca. */
.crm-new-conversation-brand {
    margin-left: auto;
    width: 22px;
    height: 22px;
    opacity: .38;
    filter: grayscale(1);
}

/* "Novo contato" tem o mesmo peso dos nomes da lista: é uma escolha entre iguais. */
.crm-new-conversation-action strong {
    font-size: var(--uni-font-size-md);
    font-weight: 600;
}

/* O avatar é o mesmo da lista de contatos (`.crm-contacts-avatar`), então aqui só
   resta o círculo da ação, que segue a cor do produto por ser ação, não pessoa. */
.crm-new-conversation-action-icon {
    width: 38px;
    height: 38px;
}

/* Revisão do proprietário (2026-09-08) — ficha do contato: um assunto por bloco,
   com rótulo, controle e a ação daquele assunto juntos. Antes "Categoria" e o
   select vinham, depois "Atendente", e só então o botão de criar categoria: o
   assunto ficava partido ao meio por outro. */
.crm-contact-field {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
    padding: var(--uni-space-3) 0;
}

.crm-contact-field + .crm-contact-field {
    border-top: 1px solid var(--crm-color-border);
}

/* As duas ações de acrescentar da ficha ("Nova categoria", "Criar oportunidade")
   usam a mesma variante e o mesmo alinhamento. */
.crm-contact-inline-action { align-self: flex-start; }

.crm-contact-inline-actions {
    display: flex;
    justify-content: flex-start;
    padding-top: var(--uni-space-2);
}

/* Atendente com cara, não com uma linha de texto. */
.crm-contact-assignee {
    display: flex;
    align-items: center;
    gap: var(--uni-space-3);
}

.crm-contact-assignee-name {
    font-size: var(--uni-font-size-md);
    font-weight: 600;
    color: var(--crm-color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* O cabeçalho inteiro abre a ficha; o cursor precisa dizer isso. */
.crm-thread-header.is-clickable { cursor: pointer; }
.crm-thread-header.is-clickable:hover { background: var(--uni-color-neutral-soft); }
.crm-thread-header .crm-thread-actions { cursor: default; }

/* ---------- Anexo: clipe + menu (revisão do proprietário, 2026-09-08) ----------
   O gatilho do UniMenu já nasce sem contorno e com o mesmo hover do produto; aqui ele só assume
   a geometria da fileira do composer (34px / `radius-sm`) para não destoar do emoji e da resposta
   rápida ao lado. Reuso do componente, não um botão novo. */
.crm-composer-attach { display: flex; }

.crm-composer-attach .uni-menu-trigger {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    border-radius: var(--crm-radius-sm);
}

/* O menu abre PARA CIMA — o composer está no rodapé, e o `uniUx.anchor` do UniMenu já resolve
   isso sozinho. O que falta é largura: são três rótulos curtos, não a lista de um cabeçalho. */
.crm-composer-attach .uni-menu-panel {
    min-width: 208px;
}

/* Os itens são `<label>` (cada um carrega o seu próprio seletor de arquivo com `accept`
   diferente), então não herdam o `:hover` que a folha canônica escreve para `button.uni-menu-item`
   por meio do elemento. A classe é a mesma; só o hover precisa ser dito aqui. */
.crm-composer-attach label.uni-menu-item:hover {
    background: var(--uni-color-neutral-soft);
}

.crm-composer-attach label.uni-menu-item:focus-visible {
    outline: 2px solid var(--uni-color-focus-ring);
    outline-offset: 2px;
}

/* ---------- A-12: player de áudio do produto ----------
   Revisão do proprietário (2026-09-08), com o WhatsApp Web ao lado. O `<audio controls>` nativo
   era uma cápsula BRANCA do sistema operacional dentro da bolha azul — as "duas camadas de cores"
   que ele apontou —, com botão de volume e ⋮ próprios, que não pertencem a uma conversa.

   Aqui não há cápsula: o player é transparente sobre a bolha e herda a cor dela. Por isso tudo
   usa `currentColor` com opacidade, em vez de tokens fixos: a mesma peça serve à bolha azul de
   saída e à bolha clara de entrada sem uma linha de exceção por caso. */

.uni-audio {
    --p: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: var(--uni-space-3);
    min-width: 232px;
    margin: 2px 0;
}

.uni-audio audio { display: none; }

.uni-audio-play {
    grid-row: 1 / span 2;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.uni-audio-play:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.uni-audio-play svg { width: 22px; height: 22px; }

/* Um controle, dois glifos: alternar no C# custaria um round-trip por play/pause. */
.uni-audio-glyph-pause { display: none; }
.uni-audio.is-playing .uni-audio-glyph-play { display: none; }
.uni-audio.is-playing .uni-audio-glyph-pause { display: inline; }

.uni-audio-track {
    position: relative;
    grid-column: 2;
    height: 26px;
    cursor: pointer;
    touch-action: none;
}

.uni-audio-track:focus-visible {
    outline: 2px solid var(--uni-color-focus-ring);
    outline-offset: 3px;
    border-radius: var(--crm-radius-xs);
}

/* Duas linhas idênticas: a de baixo é o "não tocado", a de cima é a mesma onda na cor cheia,
   recortada em `--p`. Recolorir 42 barras a cada quadro seria mais caro e não garantiria que as
   alturas casassem. */
.uni-audio-wave {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 2px;
}

.uni-audio-wave-base { opacity: 0.42; }

.uni-audio-wave-played {
    clip-path: inset(0 calc(100% - var(--p) * 100%) 0 0);
}

.uni-audio-bar {
    flex: 1 1 auto;
    min-width: 2px;
    max-width: 3px;
    border-radius: 999px;
    background: currentColor;
}

/* O ponto que anda com o áudio, e que a pessoa arrasta. */
.uni-audio-thumb {
    position: absolute;
    top: 50%;
    left: calc(var(--p) * 100%);
    width: 11px;
    height: 11px;
    margin-left: -5.5px;
    border-radius: 999px;
    background: currentColor;
    transform: translateY(-50%);
    pointer-events: none;
}

.uni-audio-time {
    grid-column: 2;
    font-size: 11px;
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    padding-top: 2px;
}

/* A hora e os ✓✓ da mensagem sobem para a MESMA linha do tempo do áudio, como no WhatsApp: o
   tempo à esquerda, o relógio à direita. Sem isto o rodapé da bolha ficava com duas linhas. */
.crm-message-bubble.has-audio {
    position: relative;
    padding-bottom: 8px;
}

.crm-message-bubble.has-audio .crm-message-meta {
    position: absolute;
    right: 12px;
    bottom: 6px;
    margin-top: 0;
}

/* ---------- Menu da mensagem (chevron no hover) ----------
   "Quando passa o mouse por cima aparece a setinha pra baixo que ao clicar abre o menu." Fica
   escondido — não `display: none`, que tiraria o foco do teclado — e aparece no hover, no foco e
   enquanto o menu está aberto. */
.crm-message-bubble { position: relative; }

.crm-message-menu {
    position: absolute;
    top: 2px;
    right: 4px;
    opacity: 0;
    transition: opacity var(--crm-transition-fast);
}

/* `:focus-within` deixava o chevron aceso depois de qualquer clique dentro da bolha — tocar um
   áudio acendia a seta e ela ficava. `:has(:focus-visible)` revela para quem chega pelo teclado,
   que é o caso que o hover não cobre, e ignora o foco deixado por um clique de mouse. */
.crm-message-bubble:hover .crm-message-menu,
.crm-message-bubble:has(:focus-visible) .crm-message-menu,
.crm-message-menu.is-open {
    opacity: 1;
}

.crm-message-menu .uni-menu-row-trigger {
    min-width: 26px;
    min-height: 26px;
    color: inherit;
    opacity: 0.75;
}

.crm-message-menu .uni-menu-row-trigger:hover {
    background: color-mix(in srgb, currentColor 16%, transparent);
    color: inherit;
    opacity: 1;
}

/* OWNER-VISUAL-ACCEPTANCE-CORRECTIONS-01 (§20–§21) — a bolha NÃO reserva espaço para o chevron. Antes,
   `:has(.crm-message-menu) { padding-right: 34px }` alargava toda bolha com menu (texto, foto, documento,
   áudio, modelo) mesmo com a seta invisível: mudava largura, quebra de linha e a posição da hora. Como no
   WhatsApp, a ação se SOBREPÕE ao conteúdo (absoluta, com um degradê da cor da bolha por trás) e ocupa
   zero de layout quando escondida. Ver crm-chat-fidelity.css (.crm-message-menu). */

/* UNICHAT-POST-CAMPAIGN-OPERATIONAL-HARDENING-20260910-01 / FEAT-14 — formatação do WhatsApp na
   exibição: quebras de linha preservadas e as quatro marcas suportadas, com a mesma aparência do app. */
.crm-message-formatted { white-space: pre-wrap; overflow-wrap: anywhere; }
.crm-message-formatted strong { font-weight: 700; }
.crm-message-formatted em { font-style: italic; }
.crm-message-formatted s { text-decoration: line-through; }
.crm-message-formatted code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.92em;
    background: rgba(0, 0, 0, .06);
    border-radius: 4px;
    padding: 0 3px;
}
.crm-message-bubble.outbound .crm-message-formatted code { background: rgba(255, 255, 255, .18); }

/* Composer: prévia leve da formatação enquanto digita + atalhos. */
.crm-composer-format-preview {
    margin: 0 0 4px;
    padding: 6px 10px;
    border-left: 3px solid var(--crm-color-primary);
    background: var(--crm-color-surface-muted, rgba(0,0,0,.04));
    color: var(--crm-color-text);
    font-size: 0.9rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    border-radius: 6px;
}
.crm-composer-format-preview small { display: block; color: var(--crm-color-text-muted); font-size: .72rem; margin-bottom: 2px; }
.crm-composer-format-tools { display: inline-flex; gap: 2px; }
.crm-composer-format-tools button {
    border: 0; background: transparent; cursor: pointer; padding: 2px 6px; border-radius: 4px;
    color: var(--crm-color-text-muted); font-size: .85rem; line-height: 1.4;
}
.crm-composer-format-tools button:hover { background: rgba(0,0,0,.06); color: var(--crm-color-text); }

/* INBOUND-ORCHESTRATOR-01 — indicação de resposta automática provável.

   Tom de METADADO, não de alerta. A linha de erro ao lado usa `--crm-color-danger` e borda
   esquerda porque a falha é acionável; esta não é um problema a resolver, é o contexto que
   explica por que o Atendente de IA não respondeu. Se chamasse a mesma atenção que um erro, a
   conversa passaria a parecer cheia de problemas que não existem.

   Mesma métrica da linha de erro (11px/1.4, mesmo raio e respiro) para as duas conviverem na
   mesma bolha sem criar um terceiro degrau de escala — ver o residual PAA-AIKB-03. */
.crm-message-auto-notice {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin: 2px 0 0 !important;
    padding: 4px 8px;
    border-radius: var(--crm-radius-sm);
    background: color-mix(in srgb, var(--crm-color-surface) 88%, transparent);
    color: var(--crm-color-text-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: break-word;
}

.crm-message-auto-notice svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
}

/* Quem corrigiu é atribuição, não o fato principal: pesa menos que o selo. */
.crm-message-auto-notice-source {
    font-weight: 500;
    opacity: 0.85;
}

/* ---------- CUT 5I (§29) — editor de etiquetas do contato (painel da conversa + ficha) ---------- */
.crm-contact-tags-editor { display: flex; flex-direction: column; gap: var(--uni-space-2); }
.crm-contact-tags-row { display: flex; flex-wrap: wrap; gap: 6px; min-height: 22px; }
.crm-contact-tag-chip {
    display: inline-flex; align-items: center; gap: 2px; max-width: 100%;
    padding: 2px 4px 2px 10px; border-radius: 999px;
    background: color-mix(in srgb, var(--tag-color, #64748b) 16%, transparent);
    color: var(--tag-color, #64748b); border: 1px solid color-mix(in srgb, var(--tag-color, #64748b) 40%, transparent);
    font-size: 11.5px; font-weight: 600; line-height: 1.2;
}
.crm-contact-tag-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-contact-tag-chip-remove {
    display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
    border: none; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; padding: 0;
}
.crm-contact-tag-chip-remove .crm-icon { width: 12px; height: 12px; }
.crm-contact-tag-chip-remove:hover:not(:disabled) { background: color-mix(in srgb, var(--tag-color, #64748b) 22%, transparent); }
.crm-contact-tag-chip-remove:focus-visible { outline: 2px solid var(--crm-color-primary); outline-offset: 1px; }
.crm-contact-tags-empty, .crm-contact-tags-hint, .crm-contact-tags-loading { color: var(--crm-color-text-muted); font-size: 12px; display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.crm-contact-tags-hint a { color: var(--crm-color-primary); }
.crm-contact-tags-error { color: var(--crm-color-danger); font-size: 12px; margin: 0; }
.crm-contact-tags-add .uni-combobox { max-width: 260px; }
/* No toque o <summary> "Etiquetas" já é o título da seção; o rótulo interno só existe no desktop (summary oculto). */
@media (max-width: 1023px) { .crm-contact-tags-heading { display: none; } }

/* ============================================================================
   CUT 5I — atendimento com IA × responsabilidade no header da conversa.
   Dois conceitos, dois controles, com respiro entre eles: o atalho de IA (à esquerda) e o chip
   "Responsável: …". Azul só quando a IA está de fato ativa; indisponível nunca parece operacional.
   ============================================================================ */
.crm-ai-quick.uni-appbar-btn {
    margin-right: 8px;
    color: var(--crm-color-text-muted);
}
.crm-thread-ai-quick.uni-appbar-btn { width: 36px; height: 36px; min-width: 36px; }
.crm-thread-ai-quick.uni-appbar-btn .crm-icon,
.crm-thread-ai-quick.uni-appbar-btn svg { width: 20px; height: 20px; }
.crm-thread-ai-quick.uni-appbar-btn:hover,
.crm-thread-ai-quick.uni-appbar-btn:focus-visible { background: var(--uni-color-neutral-soft); color: var(--crm-color-text); }
.crm-thread-ai-quick.uni-appbar-btn:focus-visible { outline: 2px solid var(--crm-color-primary); outline-offset: 2px; }
.crm-thread-ai-quick.uni-appbar-btn.is-ai-on { color: var(--crm-color-primary); background: var(--crm-color-primary-soft); }
.crm-ai-quick.uni-appbar-btn.is-ai-unavailable { opacity: 0.5; }
.crm-ai-quick.uni-appbar-btn.is-busy { cursor: progress; }
.crm-ai-quick.uni-appbar-btn:disabled { opacity: 0.45; }
.crm-ai-quick .crm-ai-quick-error-dot { background: var(--crm-color-danger); }

/* App bar escura do celular: mesma família de cores do chip dessa superfície. */
.crm-chat-appbar-conv .crm-ai-quick.uni-appbar-btn { color: rgba(255, 255, 255, 0.72); margin-right: 4px; }
.crm-chat-appbar-conv .crm-ai-quick.uni-appbar-btn.is-ai-on { color: #9ad0ff; background: rgba(154, 208, 255, 0.16); }

.uni-appbar-chip-label { overflow: hidden; text-overflow: ellipsis; }

/* Sheet de Atendimento: responsável com transferir ao lado; títulos em caixa normal, só nesta sheet. */
.crm-attend-sheet .uni-sheet-group-title {
    font-size: var(--uni-font-size-sm, 13px);
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--crm-color-text);
}
.crm-attend-responsible-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.crm-attend-responsible-text { margin: 0; color: var(--crm-color-text); font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.crm-attend-responsible-text strong { font-weight: 600; }
.crm-attend-ai { padding-top: 8px; border-top: 1px solid var(--crm-color-border); }
/* .uni-sheet-form label vira grid (uma coluna): devolve a linha toggle + rótulo, descrição abaixo do rótulo. */
.uni-sheet-form .crm-attend-ai label.uni-switch-row,
.crm-attend-ai .uni-switch-row { display: flex; align-items: flex-start; gap: 12px; padding: 4px 0; font-weight: 500; }
.crm-attend-ai .uni-switch { flex: 0 0 auto; margin-top: 2px; }
.crm-attend-ai .uni-switch-text { flex: 1 1 auto; }
.crm-attend-ai .aiagent-attendance-link { align-self: flex-start; font-size: 13px; font-weight: 600; color: var(--crm-color-primary); padding-left: 56px; }

@media (max-width: 767px) {
    /* Celular: o atalho de IA entrou na app bar e a identidade da conversa vence. O prefixo sai só do visual
       (ponto verde + "você"/nome); nome acessível e tooltip continuam "Responsável: …" e a sheet diz por extenso. */
    .crm-chat-appbar-conv .uni-appbar-chip-prefix { display: none; }
    .crm-chat-appbar-conv .uni-appbar-actions .uni-appbar-chip { max-width: 112px; padding: 2px 8px 2px 7px; gap: 5px; }
    .crm-chat-appbar-conv .crm-ai-quick.uni-appbar-btn { margin-right: 2px; }
}