/* Painel lateral da Inbox: abas Anotações e Lead, e as anotações da IA sobre a conversa.
   Só vale dentro de .inbox e só usa tokens, então acompanha os estilos Regência, WhatsApp e Conversas, claro e escuro. */

/* ---------- cabeçalho com as abas ---------- */
.inbox .lead-lateral { padding: 0; gap: 0; }
.inbox .lat-cab { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--superficie); border-bottom: 1px solid var(--linha); }
.inbox .lat-cab .abas.lat-abas { flex: 1; min-width: 0; }
.inbox .lat-cab .abas.lat-abas button { flex: 1 1 0; min-height: 40px; }
.inbox .lat-cab .fechar-lead { width: 40px; min-height: 40px; flex: none; }
.inbox .lat-painel { padding: 16px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.inbox .lat-painel:focus-visible { outline-offset: -2px; }

/* ---------- anotações ---------- */
.inbox .anot { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.inbox .anot-zona { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.inbox .anot-blocos { gap: 18px; padding-top: 16px; border-top: 1px solid var(--linha); }

.inbox .anot-situacao { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.inbox .anot-situacao > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.inbox .anot-situacao > .larga { grid-column: 1 / -1; }
.inbox .anot-situacao dt { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-tenue); }
.inbox .anot-situacao dd { margin: 0; display: flex; min-width: 0; }
.inbox .anot-situacao .selo { max-width: 100%; white-space: normal; }
.inbox .anot-motivo { font-size: 13px; color: var(--texto-fraco); }

.inbox .anot-bloco { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.inbox .anot-bloco.destaque { background: var(--destaque-suave); border-radius: var(--raio-md); padding: 12px; }
.inbox .anot-titulo { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; letter-spacing: 0; line-height: 1.3; color: var(--texto-fraco); }
.inbox .anot-titulo .icone { color: var(--texto-tenue); }
.inbox .anot-texto { font-size: 14.5px; line-height: 1.5; color: var(--texto); white-space: pre-line; }
.inbox .anot-vazio { font-size: 14px; color: var(--texto-tenue); }
.inbox .anot-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 12px; color: var(--texto-tenue); }

.inbox .anot-resumir { display: flex; flex-direction: column; gap: 8px; }
.inbox .anot-nota { color: var(--texto-fraco); }

/* ---------- adicionar anotação ---------- */
.inbox .anot-nova { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--linha); }
.inbox .anot-nova textarea { min-height: 84px; resize: vertical; }

/* ---------- linha do tempo ---------- */
.inbox .anot-linha-zona { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--linha); min-width: 0; }
.inbox .anot-linha { display: flex; flex-direction: column; gap: 8px; }
.inbox .anot-item { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border: 1px solid var(--linha); background: var(--fundo); border-radius: var(--raio-sm); }
.inbox .anot-item .ic { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--superficie-2); color: var(--texto-fraco); }
.inbox .anot-item.ia .ic { background: var(--destaque-suave); color: var(--destaque); }
.inbox .anot-item .corpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.inbox .anot-item .txt { font-size: 14px; line-height: 1.45; color: var(--texto); white-space: pre-line; }
.inbox .anot-item .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 12px; color: var(--texto-tenue); }
.inbox .anot-item .meta strong { font-weight: 800; }
.inbox .anot-item.alerta { background: var(--alerta-fundo); border-color: transparent; }
.inbox .anot-item.alerta .ic { background: transparent; color: var(--alerta); }
.inbox .anot-item.alerta .meta { color: var(--alerta); }
.inbox .anot-item.nova { animation: anot-entra .6s ease-out; }
@keyframes anot-entra { from { opacity: .35; transform: translateY(-4px); } }
.inbox .anot-mais { align-self: flex-start; min-height: 40px; }