/* components.css — bolhas, badges, busca, timeline, diálogos, toasts */

/* ============ ChatList (lista lateral) ============ */
.chat-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 12px;
  text-align: left;
}

/* separador começa depois do avatar, como no WhatsApp */
.chat-item::after {
  content: "";
  position: absolute;
  left: 73px; /* 12 padding + 49 avatar + 12 gap */
  right: 0;
  bottom: 0;
  height: 1px;
  background: #F0F2F5;
}

.chat-item:hover { background: #F7F8FA; }

/* item ativo: fundo claro + barrinha verde vertical (WhatsApp Web atual) */
.chat-item.active { background: var(--panel-alt); }
.chat-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--wa-green);
}

.avatar {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 49px;
  height: 49px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--av-color, #6A7D8A);
  color: #fff;
  font-size: 21px;
  font-weight: 600;
  user-select: none;
}

.avatar .avatar-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.avatar.small { width: 38px; height: 38px; font-size: 16.8px; }

.chat-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.chat-item-top,
.chat-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.chat-item-title {
  font-size: 17.4px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-item-preview {
  font-size: 15.4px;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-item-sub {
  font-size: 15px;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-item-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: 0 0 auto;
}

.chat-item-date {
  font-size: 13.8px;
  color: var(--ink-3);
}

.badge-count {
  font-size: 13.2px;
  color: var(--ink-2);
  background: #E1E7EA;
  border-radius: 999px;
  padding: 1px 8px;
}

.chatlist-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 15.6px;
}

/* ============ ChatWindow ============ */
.chat {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.chat-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--panel-alt);
  border-bottom: 1px solid var(--line);
}

.chat-title { flex: 1; min-width: 0; }

.chat-title h2 {
  font-size: 18px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-title p {
  font-size: 15px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* no celular, o cabeçalho do chat continua a barra teal do app —
   lê-se como uma barra só com a da marca (padrão WhatsApp mobile) */
@media (max-width: 767px) {
  .chat-header {
    background: var(--wa-teal);
    border-bottom: 0;
  }

  .chat-title h2 { color: #fff; }
  .chat-title p { color: rgba(255, 255, 255, 0.82); }
  .chat-header .icon-btn { color: rgba(255, 255, 255, 0.85); }
  .chat-header .icon-btn:disabled { opacity: 0.5; }
}

/* barra de filtros (recolhível) */
.filter-bar {
  flex: 0 0 auto;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 10px 14px;
}

.filter-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13.8px;
  color: var(--ink-3);
}

.field select,
.field input[type="date"] {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-size: 15.6px;
  background: #fff;
  color: var(--ink);
}

.type-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  max-width: 420px;
}

.type-checks label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  color: var(--ink-2);
  text-transform: capitalize;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 15.6px;
  font-weight: 500;
}

.btn-primary {
  background: var(--wa-green);
  color: #fff;
}

.btn-primary:hover { background: var(--wa-teal); }

.btn-ghost {
  color: var(--wa-teal-light);
  border: 1px solid currentColor;
}

.btn-ghost:hover { background: rgba(18, 140, 126, 0.08); }

.linklike {
  color: var(--wa-teal);
  text-decoration: underline;
  font: inherit;
}

/* área principal: scroll + timeline */
.chat-main {
  flex: 1;
  display: flex;
  min-height: 0;
}

.chat-scroll {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 0 20px;
  background-color: var(--wa-chat-bg);
  /* padrão de "doodles" sutil, como no WhatsApp */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%233b4a54' stroke-opacity='.07' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='36' cy='36' r='9'/%3E%3Cpath d='M104 22c3.4-7.6 14.4-6 14.4 1.7 0 6-7.6 9.3-14.4 15.2-6.8-6-14.4-9.3-14.4-15.2 0-7.6 11-9.3 14.4-1.7z'/%3E%3Cpath d='M172 36l5 11 11 1.7-8 8 1.9 11-10-5.4-10 5.4 2-11-8-8 11-1.7z'/%3E%3Crect x='24' y='126' width='19' height='19' rx='4'/%3E%3Cpath d='M92 134h27M92 142h19'/%3E%3Ccircle cx='178' cy='137' r='11'/%3E%3Cpath d='M32 188c7.6-9.3 21-9.3 28.6 0'/%3E%3Cpath d='M128 180l10 10m0-10l-10 10'/%3E%3Ccircle cx='198' cy='190' r='6'/%3E%3Cpath d='M58 80c5-3.4 10-3.4 15 0'/%3E%3C/g%3E%3C/svg%3E");
  scrollbar-width: thin;
  scrollbar-color: rgba(11, 20, 26, 0.22) transparent;
}

.chat-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.chat-scroll::-webkit-scrollbar-thumb {
  background: rgba(11, 20, 26, 0.22);
  border-radius: 3px;
}
.chat-scroll::-webkit-scrollbar-track { background: transparent; }

.sentinel {
  height: 1px;
  width: 100%;
}

.banner-slot:empty { display: none; }

.banner {
  margin: 0 14px 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: #FFF4D6;
  border: 1px solid #E8D48B;
  color: #66562B;
  font-size: 15.6px;
}

@media (max-width: 767px) {
  .chat-main { flex-direction: column; }

}

/* ============ Mensagens ============ */
.date-sep {
  display: flex;
  justify-content: center;
  margin: 12px 0 8px;
}

.date-sep span {
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink-3);
  font-size: 12.6px;
  letter-spacing: 0.02em;
  padding: 6px 10px;
  border-radius: var(--radius);
}

.sys-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin: 10px 14px;
}

.sys-capsule {
  background: rgba(225, 228, 230, 0.95);
  color: #454F52;
  font-size: 15px;
  line-height: 1.4;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  max-width: min(560px, 86%);
  text-align: center;
  box-shadow: var(--shadow-bubble);
}

.msg-row {
  display: flex;
  padding: 1px 14px;
}

/* bloco de mensagens consecutivas do mesmo remetente (g-first/g-last):
   2px dentro do bloco, ~8px entre blocos */
.msg-row.g-first { padding-top: 5px; }
.msg-row.g-last { padding-bottom: 3px; }

.msg-row.out { justify-content: flex-end; }

.bubble-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: min(560px, 78%);
}

.msg-row.out .bubble-col { align-items: flex-end; }

.bubble {
  position: relative;
  width: fit-content;
  max-width: 100%;
  background: var(--wa-bubble-in);
  border-radius: var(--radius);
  padding: 6px 9px 8px;
  box-shadow: var(--shadow-bubble);
  font-size: 17px;
  line-height: 1.38;
  color: var(--ink);
  overflow-wrap: break-word;
  overflow: hidden;
}

.msg-row.out .bubble { background: var(--wa-bubble-out); }

/* empilhamento: rabinho apenas na primeira do bloco */
.msg-row:not(.g-first) .bubble::before { display: none; }

/* cantos internos do bloco menos arredondados, como no WhatsApp */
.msg-row.in:not(.g-first) .bubble { border-top-left-radius: 3px; }
.msg-row.in:not(.g-last) .bubble { border-bottom-left-radius: 3px; }
.msg-row.out:not(.g-first) .bubble { border-top-right-radius: 3px; }
.msg-row.out:not(.g-last) .bubble { border-bottom-right-radius: 3px; }

/* rabinho da bolha */
.bubble::before {
  content: "";
  position: absolute;
  top: 0;
  width: 10px;
  height: 13px;
}

.msg-row.in .bubble::before {
  left: -9px;
  background: var(--wa-bubble-in);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}

.msg-row.out .bubble::before {
  right: -9px;
  background: var(--wa-bubble-out);
  clip-path: polygon(0 0, 0 100%, 100% 0);
}

.sender-name {
  font-size: 15.4px;
  font-weight: 600;
  margin: 1px 0 2px;
}

.msg-text { white-space: normal; }

.bubble-meta {
  float: right;
  margin: 8px -2px -4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 13.2px;
  color: var(--wa-timestamp-ink);
}

.bubble-meta .ticks { opacity: 0.9; }

/* duplo check azul = mensagem "lida" (bolhas do dono) */
.msg-row.out .bubble-meta .ticks { color: var(--tick-read); opacity: 1; }

/* citação (reply) */
.quote {
  display: block;
  border-left: 4px solid var(--wa-teal-light);
  background: rgba(0, 0, 0, 0.045);
  border-radius: 5px;
  padding: 5px 8px;
  margin: 2px 0 5px;
  overflow: hidden;
}

.quote strong {
  display: block;
  font-size: 15px;
  color: var(--wa-teal-light);
  margin-bottom: 1px;
}

.quote span {
  display: block;
  font-size: 15.4px;
  color: var(--ink-2);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.quote-missing {
  border-left-color: var(--wa-timestamp);
  color: var(--ink-muted);
  font-style: italic;
}

/* mídia */
.media { margin: 2px 0 4px; }

.media img,
.media video {
  border-radius: var(--radius-sm);
  max-width: min(320px, 100%);
  width: 100%;
}

/* botão que envolve a imagem para abrir o lightbox */
button.media-zoom {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--radius-sm);
}

button.media-zoom img { transition: filter 120ms ease; }
button.media-zoom:hover img { filter: brightness(0.96); }

.media figcaption,
.media-caption {
  font-size: 16.6px;
  margin-top: 4px;
}

.media-broken {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  font-size: 15px;
  padding: 14px 12px;
  background: rgba(255, 255, 255, 0.6);
}

.media-broken img,
.media-broken video { display: none; }

.media-placeholder {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.65);
  padding: 12px;
  font-size: 15.6px;
  color: var(--ink-2);
}

.media-placeholder svg { color: var(--ink-3); }
.media-placeholder small { color: var(--ink-muted); font-size: 13.8px; }

/* áudio */
.audio-card {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 4px;
}

.audio-card svg { color: var(--ink-3); flex: 0 0 auto; }

.audio-card audio {
  width: min(240px, 58vw);
  height: 36px;
}

.audio-dur {
  font-size: 13.2px;
  color: var(--wa-timestamp-ink);
  white-space: nowrap;
}

/* documento */
.doc-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(11, 20, 26, 0.06);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 2px 0 4px;
  min-width: 220px;
}

.doc-card svg {
  color: #B23B3B;
  flex: 0 0 auto;
}

.doc-name {
  display: block;
  font-size: 16.2px;
  color: var(--ink);
  word-break: break-all;
}

.doc-hint {
  display: block;
  font-size: 13.8px;
  color: var(--ink-muted);
}

a.doc-card:hover { background: #fff; }

/* chamada */
.call-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 0 2px;
  min-width: 170px;
}

.call-card svg { flex: 0 0 auto; }

.call-card.in svg { color: #1F8B4D; }
.call-card.out svg { color: #1F6FA8; }
.call-card.missed svg { color: var(--danger); }

.call-label { display: block; font-size: 16.8px; color: var(--ink); }
.call-dur { display: block; font-size: 13.8px; color: var(--ink-muted); }

/* ações sob a bolha */
.msg-side {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  padding: 0 2px;
}

.source-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.6px;
  color: var(--ink-3);
  border-bottom: 1px dotted var(--wa-timestamp);
  padding: 1px 2px;
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.source-badge:hover { color: var(--wa-teal); border-bottom-color: currentColor; }
.source-badge svg { flex: 0 0 auto; opacity: 0.7; }

.mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--ink-muted);
  opacity: 0.55;
}

.msg-row:hover .mini-btn,
.mini-btn:focus-visible { opacity: 1; }
.mini-btn:hover { background: rgba(11, 20, 26, 0.07); color: var(--wa-teal); }

.sys-badge { border-bottom-color: var(--wa-timestamp); }

/* ============ Proveniência (badges §16) ============ */
.prov-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.6px;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

/* cores neutras: explicam proveniência, nunca sugerem culpa */
.prov-official { color: #1F6FA8; border-color: #BFD8E8; }
.prov-investigation { color: #6B5EA8; border-color: #D6D0EE; }
.prov-secondary { color: #6E7B83; border-color: #D8DEE2; }
.prov-pending { color: #9AA3A8; border-color: #E3E7EA; }

.prov-badge:hover { border-color: currentColor; }

.msg-side { flex-wrap: wrap; }

/* ============ Natureza do conteúdo (tag discreta §4) ============ */
.kind-tag {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wa-teal);
  background: rgba(18, 140, 126, 0.09);
  border-radius: 999px;
  padding: 1px 8px;
  width: fit-content;
  margin: 1px 0 3px;
}

.msg-row.in .kind-tag { color: #0E7A6C; }

/* ============ Encaminhadas: atribuição nunca vira remetente (§17) ============ */
.fwd-attribution {
  font-size: 12px;
  color: var(--ink-muted);
  border-top: 1px dashed rgba(11, 20, 26, 0.14);
  margin-top: 4px;
  padding-top: 3px;
}

/* ============ Links de evidência (§8/§26): origem externa e página do PDF ============ */
.evidence-links {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 5px 0 3px;
}

.evidence-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  font-size: 12.6px;
  color: var(--wa-teal);
  border: 1px solid rgba(18, 140, 126, 0.35);
  border-radius: 999px;
  padding: 3px 11px;
  background: rgba(255, 255, 255, 0.55);
}

.evidence-link:hover { background: #fff; border-color: var(--wa-teal); }

.source-dialog .sha {
  font-size: 11.5px;
  background: var(--panel-alt);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ============ Nota editorial — SEMPRE fora da bolha (§1/§5) ============ */
.editorial-note {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  max-width: min(560px, 88%);
  margin: 4px 2px 10px;
  padding: 7px 10px;
  border-left: 3px solid var(--wa-teal);
  background: rgba(255, 255, 255, 0.6);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-2);
  font-style: italic;
}

.editorial-note svg { flex: 0 0 auto; margin-top: 2px; color: var(--wa-teal); opacity: 0.8; }
.editorial-note strong { font-style: normal; color: var(--ink); }

.msg-row.out + .editorial-note,
.msg-row.out .editorial-note { align-self: flex-end; }

/* bolha com hora não divulgada: rótulo cabe no meta */
.bubble.no-time .bubble-meta time { font-size: 11.4px; letter-spacing: 0.01em; }

/* ============ Evento editorial da timeline (§14) ============ */
/* Registro neutro: SEM avatar, SEM bolha, SEM check, SEM lado. */
.event-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin: 14px auto 10px;
  max-width: min(560px, 86%);
  padding: 10px 14px;
  border: 1px dashed #B9C4CA;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.72);
  text-align: center;
}

.event-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

.event-content {
  font-size: 15.4px;
  line-height: 1.45;
  color: var(--ink-2);
}

.event-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.2px;
  color: var(--ink-muted);
  flex-wrap: wrap;
  justify-content: center;
}

/* dialog de fonte */
.source-dialog dd .muted { color: var(--ink-muted); }
.source-dialog dd strong.ok { color: #1F8B4D; font-weight: 600; }
.source-dialog dd a { color: var(--wa-teal); }
.source-dialog #sd-url { color: var(--wa-teal); }
.source-dialog #sd-url[hidden] { display: none; }

/* destaque de deep-link */
@keyframes flash-highlight {
  0%, 100% { box-shadow: var(--shadow-bubble); }
  25%, 65% { box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.85); }
}

.msg-highlight .bubble {
  animation: flash-highlight 2.4s ease 2;
}

/* ============ Barra de entrada (decorativa — somente leitura) ============ */
.chat-inputbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #F0F2F5;
  border-top: 1px solid var(--line);
}

.chat-inputbar .icon-btn { color: var(--ink-3); }
.chat-inputbar .icon-btn:disabled {
  cursor: default;
  opacity: 0.55;
}

.chat-inputbar .input-mic {
  background: var(--wa-green);
  color: #fff;
  border-radius: 50%;
}
.chat-inputbar .input-mic:disabled { opacity: 0.85; }

/* pílula branca da digitação: emoji e clipe dentro, mic verde fora (WA atual) */
.chat-input-pill {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border-radius: 999px;
  padding: 4px 8px;
}

.chat-input-fake {
  flex: 1;
  min-width: 0;
  font-size: 15.6px;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}

/* ============ Lightbox de mídia ============ */
.media-dialog {
  width: min(900px, 94vw);
  border-radius: 12px;
  background: #1F2C33;
  color: #fff;
  overflow: visible;
}

.media-dialog figure {
  position: relative;
  margin: 0;
  padding: 34px 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.media-dialog .media-stage {
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: auto;
  border-radius: 8px;
}

.media-dialog img {
  max-width: 100%;
  max-height: 62vh;
  border-radius: 8px;
  cursor: zoom-in;
  transition: transform 160ms ease;
}

.media-dialog.zoomed .media-stage { overflow: auto; }
.media-dialog.zoomed img {
  cursor: zoom-out;
  transform: scale(1.75);
  transform-origin: top center;
  max-height: none;
}

.media-dialog figcaption {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  text-align: center;
  max-width: 640px;
}

.media-dialog .media-caption-text { font-size: 16.8px; line-height: 1.4; }

.media-dialog .media-dialog-ref {
  font-size: 13.8px;
  color: rgba(255, 255, 255, 0.72);
}

.media-dialog .media-dialog-ref button,
.media-dialog .media-dialog-ref a {
  color: #7ADFD3;
  text-decoration: underline;
  font: inherit;
}

.media-dialog .icon-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  color: #fff;
}

.media-dialog .icon-btn:hover { background: rgba(255, 255, 255, 0.12); }

/* header da conversa: ícones estilo WhatsApp */
.chat-header .icon-btn { color: var(--ink-3); }
.chat-header .icon-btn:disabled { opacity: 0.5; cursor: default; }
.chat-header .icon-btn:disabled:hover { background: transparent; }

/* estado vazio / erro */
.empty-state,
.error-card {
  margin: 40px auto;
  max-width: 420px;
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow-bubble);
  padding: 22px;
  text-align: center;
  color: var(--ink-2);
  font-size: 16.8px;
}

.empty-state h3,
.error-card h3 {
  font-size: 19.2px;
  margin-bottom: 6px;
  color: var(--ink);
}

.error-card code {
  background: var(--panel-alt);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 14.4px;
}

.error-card .btn { margin-top: 12px; }

/* ============ Home ============ */
.home {
  flex: 1;
  overflow-y: auto;
  background: var(--panel-alt);
  padding: 26px 16px 60px;
}

.home-inner {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hero h1 {
  font-size: 31.2px;
  color: var(--wa-teal-dark);
  margin-bottom: 6px;
}

.hero p {
  color: var(--ink-2);
  font-size: 18px;
  max-width: 60ch;
}

.notice {
  background: #FFF8E1;
  border: 1px solid #EAD591;
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 16.2px;
  color: #66562B;
}

.notice strong:first-child { display: block; margin-bottom: 4px; color: #574A24; }

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.hl-card {
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow-bubble);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.hl-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-pop);
}

.hl-card h3 { font-size: 18px; color: var(--wa-teal-dark); }
.hl-card p { font-size: 15.6px; color: var(--ink-2); }
.hl-card .hl-meta { font-size: 13.8px; color: var(--ink-muted); margin-top: auto; }

.section-title {
  font-size: 19.2px;
  color: var(--ink);
  margin-top: 8px;
}

.howto {
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow-bubble);
  padding: 16px 18px;
  font-size: 16.2px;
  color: var(--ink-2);
}

.howto ol { list-style: decimal; padding-left: 20px; display: grid; gap: 6px; }

.howto code {
  background: var(--panel-alt);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 14.4px;
}

/* ============ Card de perfil do contato ============ */
.profile-dialog {
  width: min(440px, 92vw);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  background: var(--panel);
  color: var(--ink);
}

.pf-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 4px;
}

.pf-avatar {
  width: 64px;
  height: 64px;
  font-size: 28.8px;
  flex: 0 0 auto;
}

.pf-id { flex: 1; min-width: 0; }

.pf-id h3 {
  font-size: 21.6px;
  color: var(--ink);
  line-height: 1.2;
}

.pf-id p {
  font-size: 15.6px;
  color: var(--wa-teal-light);
  margin-top: 2px;
}

.profile-dialog .icon-btn { color: var(--ink-3); }
.profile-dialog .icon-btn:hover { background: rgba(11, 20, 26, 0.07); }

.pf-aliases {
  padding: 4px 18px 0;
  font-size: 14.4px;
  color: var(--ink-muted);
}

.pf-summary {
  padding: 10px 18px 0;
  font-size: 16.6px;
  line-height: 1.5;
  color: var(--ink-2);
}

.pf-sources-title {
  padding: 14px 18px 4px;
  font-size: 14.4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

.pf-sources {
  padding: 0 18px;
  display: grid;
  gap: 8px;
  list-style: none;
}

.pf-sources li {
  font-size: 15.6px;
  line-height: 1.4;
  padding-left: 14px;
  position: relative;
}

.pf-sources li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wa-teal-light);
}

.pf-sources a {
  color: var(--wa-teal);
  text-decoration: underline;
  text-decoration-color: rgba(18, 140, 126, 0.35);
  overflow-wrap: anywhere;
}

.pf-sources a:hover { color: var(--wa-teal-dark); }

.pf-sources-empty {
  padding: 4px 18px;
  font-size: 15.6px;
  color: var(--ink-muted);
}

/* nota de rodapé do card de perfil — separada por linha, com respiro */
.profile-dialog .dlg-note {
  margin: 14px 18px 0;
  padding: 12px 0 18px;
  border-top: 1px solid var(--line);
  font-size: 14.4px;
  line-height: 1.5;
  color: var(--ink-muted);
  text-wrap: pretty;
}

/* avatar clicável (lista e header) */
.avatar-btn {
  cursor: pointer;
  border: 0;
  padding: 0;
  background: var(--av-color, #6A7D8A);
  transition: box-shadow 120ms ease;
}

.avatar-btn:hover,
.avatar-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(18, 140, 126, 0.35);
}

/* avatar no header da conversa (40px, como no WhatsApp Web) */
.chat-header .avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  font-size: 17.6px;
}

/* ============ Diálogo de fonte ============ */
.source-dialog {
  width: min(480px, 92vw);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  background: var(--panel);
  color: var(--ink);
}

.source-dialog form { padding: 20px; }

.source-dialog h3 {
  font-size: 18px;
  color: var(--wa-teal-dark);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.source-dialog dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px;
  font-size: 16.2px;
}

.source-dialog dt { color: var(--ink-muted); }
.source-dialog dd { color: var(--ink); overflow-wrap: anywhere; }

.source-dialog .dlg-note {
  margin-top: 12px;
  font-size: 14.4px;
  color: var(--ink-muted);
}

.source-dialog menu {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0;
}

/* ============ Toast ============ */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  background: #1F2C33;
  color: #fff;
  font-size: 15.6px;
  padding: 9px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow-pop);
  z-index: 60;
  max-width: 86vw;
  text-align: center;
}

/* ============ Noscript ============ */
.noscript-box {
  margin: 30px auto;
  max-width: 520px;
  background: var(--panel);
  border-radius: var(--radius);
  padding: 20px;
  font-size: 16.8px;
  color: var(--ink-2);
  box-shadow: var(--shadow-bubble);
}