.wa-inbox-header { min-height: 64px; padding: 12px 16px; gap: 8px; }
.wa-inbox-header-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex: 1; flex-wrap: nowrap; }
.wa-inbox-header-icon { align-self: baseline; width: 32px; height: 32px; flex: 0 0 32px; margin-right: 2px; }
.wa-inbox-header-line h2 { flex-shrink: 0; white-space: nowrap; }
.wa-connection-status { align-self: baseline; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 32px; flex: 0 0 24px; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.wa-connection-status:hover, .wa-connection-status[aria-expanded=true] { background: var(--bg-card-hover); }
.wa-connection-status:focus-visible { outline: 2px solid var(--accent-neon); outline-offset: 2px; }
#wa-instance-phone { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#wa-inbox-header #wa-search-toggle { flex-shrink: 0; }
#wa-connection-info { white-space: pre-line; }
@media (max-width: 380px) {
    .wa-inbox-header { padding-inline: 8px; gap: 4px; }
    .wa-inbox-header-line { gap: 4px; }
    .wa-inbox-header-icon { width: 24px; height: 28px; flex-basis: 24px; margin-right: 0; }
    #wa-inbox-header #wa-search-toggle { width: 24px; }
}
.wa-number-health { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border: 1px solid currentColor; border-radius: 6px; font-size: 10px; font-weight: 700; line-height: 1.3; white-space: nowrap; background: var(--bg-card); }
.wa-number-health.hidden { display: none; }
.wa-contact-skeleton { display: flex; align-items: center; gap: 12px; min-height: 94px; padding: 12px; border-bottom: 1px solid var(--border-default); }
.wa-skeleton-avatar { width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; background: var(--border-hover); }
.wa-skeleton-lines { display: flex; flex: 1; gap: 8px; flex-direction: column; }
.wa-skeleton-lines > span { height: 10px; width: 80%; border-radius: 6px; background: var(--border-hover); }
.wa-skeleton-lines > span:first-child { height: 14px; width: 60%; }
.wa-skeleton-lines > span:last-child { width: 40%; }
.wa-contact-skeleton, .wa-message-skeleton { animation: wa-skeleton-pulse 1.2s ease-in-out infinite alternate; }
.wa-message-skeleton { width: 60%; height: 64px; border-radius: 16px; background: var(--border-hover); margin: 12px 0; }
.wa-message-skeleton:nth-child(even) { margin-left: auto; width: 48%; }
.wa-contact-reveal { animation: wa-contact-enter .18s ease-out; }
.wa-list-sentinel { min-height: 8px; width: 100%; }
.wa-list-feedback { padding: 16px; text-align: center; color: var(--text-secondary); font-size: 13px; }
.wa-list-feedback button { min-height: 40px; margin-top: 8px; padding: 6px 12px; border: 1px solid currentColor; border-radius: 8px; font-weight: 700; }
@keyframes wa-skeleton-pulse { from { opacity: .4; } to { opacity: 1; } }
@keyframes wa-contact-enter { from { opacity: .4; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .wa-contact-skeleton, .wa-message-skeleton, .wa-contact-reveal { animation: none; } }

/* Dialog usa a top layer, acima dos ancestors com transform/backdrop-filter. */
.wa-filters-dialog { box-sizing: border-box; margin: auto; padding: 0; width: min(1100px, 92vw); height: 88dvh; max-width: none; max-height: 94dvh; border: 1px solid var(--border-hover); border-radius: 20px; color: var(--text-primary); background: var(--bg-card); font-family: inherit; box-shadow: 0 8px 24px rgba(0, 0, 0, .24); }
.wa-filters-dialog::backdrop { background: rgba(0, 0, 0, .9); backdrop-filter: none; }
.wa-filters-layout { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.wa-filters-header, .wa-filters-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; flex-shrink: 0; }
.wa-filters-header { border-bottom: 1px solid var(--border-default); }
.wa-filters-heading { display: flex; align-items: center; gap: 12px; }
.wa-filters-heading > svg { color: var(--accent-neon); width: 24px; height: 24px; }
.wa-filters-heading h3 { margin: 0; font-size: 19px; font-weight: 800; }
.wa-filters-heading p { margin: 4px 0 0; color: var(--text-secondary); font-size: 12px; }
.wa-filters-dialog button, .wa-filters-dialog input { font-family: inherit; }
.wa-filters-close, .wa-filter-search button { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--border-default); border-radius: 12px; color: var(--text-secondary); background: var(--bg-page); cursor: pointer; }
.wa-filters-dialog svg { width: 18px; height: 18px; flex-shrink: 0; }
.wa-filter-sections { --wa-filter-scroll-padding: 20px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 1; padding: 20px 24px; scrollbar-gutter: stable; }
.wa-filter-section { margin-bottom: 12px; border: 1px solid var(--border-default); border-radius: 14px; background: var(--bg-page); overflow: clip; }
.wa-filter-section[open] { border-color: var(--accent-neon); }
.wa-filter-section summary { display: flex; align-items: center; gap: 12px; padding: 16px; min-height: 68px; box-sizing: border-box; cursor: pointer; list-style: none; }
.wa-filter-section summary::-webkit-details-marker { display: none; }
/* The section title stays below the modal header; search follows scroll direction. */
.wa-filter-section[open] > summary { position: sticky; top: calc(-1 * var(--wa-filter-scroll-padding)); z-index: 3; background: var(--bg-page); box-shadow: 0 1px 0 var(--border-default); }
.wa-filter-search-anchor { height: 0; }
.wa-filter-search-dock { position: sticky; top: calc(var(--wa-filter-title-height, 68px) - var(--wa-filter-scroll-padding)); z-index: 2; margin: 0 -16px; padding: 12px 16px; background: var(--bg-page); transition: opacity .12s ease, visibility .12s; }
.wa-filter-search-dock .wa-filter-search { margin-top: 0; }
.wa-filter-search-dock.is-scroll-hidden { visibility: hidden; opacity: 0; pointer-events: none; }
@media (max-width: 767px) { .wa-filter-sections { --wa-filter-scroll-padding: 12px; } .wa-filter-search-dock { margin-inline: -10px; padding-inline: 10px; } }
@media (prefers-reduced-motion: reduce) { .wa-filter-search-dock { transition: none; } }

.wa-filter-section summary > svg:first-child { color: var(--accent-neon); }
.wa-filter-section summary > svg:last-child { color: var(--text-secondary); transition: transform .15s; }
.wa-filter-section[open] summary > svg:last-child { transform: rotate(180deg); }
.wa-filter-section-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 750; }
.wa-filter-section-title small { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); font-size: 12px; font-weight: 400; }
.wa-filter-section-body { padding: 0 16px 16px; border-top: 1px solid var(--border-default); }
.wa-filter-search { display: flex; align-items: center; margin-top: 16px; border: 1px solid var(--border-hover); background: var(--bg-card); border-radius: 12px; }
.wa-filter-search:focus-within { outline: 2px solid var(--accent-neon); outline-offset: 2px; }
.wa-filter-search button { border: 0; background: transparent; }
.wa-filter-search input { min-width: 0; width: 100%; height: 46px; padding: 8px 12px 8px 0; border: 0; outline: 0; color: var(--text-primary); background: transparent; font-size: 14px; }
.wa-filter-search input::placeholder { color: var(--text-secondary); opacity: 1; }
.wa-filter-result, .wa-filter-empty { color: var(--text-secondary); font-size: 12px; margin: 12px 0; }
.wa-filter-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wa-filter-option { display: flex; align-items: flex-start; gap: 12px; padding: 14px; min-width: 0; border: 1px solid var(--border-default); border-radius: 12px; background: var(--bg-card); cursor: pointer; transition: border-color .15s; }
.wa-filter-option:hover { border-color: var(--border-hover); background: var(--bg-card-hover); }
.wa-filter-option.is-selected { border-color: var(--accent-neon); background: color-mix(in srgb, var(--accent-neon) 8%, var(--bg-card)); }
.wa-filter-option:focus-within { outline: 2px solid var(--accent-neon); outline-offset: 2px; }
.wa-filter-option input[type=radio] { accent-color: var(--accent-neon); width: 17px; height: 17px; margin: 2px 0 0; flex-shrink: 0; }
.wa-filter-option-content { min-width: 0; flex: 1; }
.wa-filter-option-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wa-filter-option-heading strong { font-size: 14px; overflow-wrap: anywhere; }
.wa-unread-tag { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; padding: 3px 7px; border-radius: 6px; color: var(--text-primary); border: 1px solid var(--border-hover); background: var(--bg-page); font-size: 11px; font-weight: 750; font-variant-numeric: tabular-nums; }
.wa-unread-tag svg { width: 12px; height: 12px; }
.wa-filter-number-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wa-filter-phone { color: var(--text-secondary); font-size: 12px; overflow-wrap: anywhere; }
.wa-filter-option-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wa-filter-option-tags > span { padding: 2px 6px; border-radius: 5px; border: 1px solid var(--border-default); color: var(--text-secondary); font-size: 10px; }
.wa-filters-footer { border-top: 1px solid var(--border-default); flex-wrap: wrap; }
.wa-filter-feedback { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--text-secondary); }
.wa-filter-feedback:empty { display: none; }
.wa-filters-clear, .wa-filters-apply { min-height: 44px; padding: 10px 18px; border-radius: 12px; cursor: pointer; font-size: 13px; font-weight: 750; }
.wa-filters-clear { border: 1px solid var(--border-hover); color: var(--text-primary); background: var(--bg-page); }
.wa-filters-apply { border: 1px solid var(--accent-neon); background: var(--accent-neon); color: var(--bg-page); }
.wa-filters-dialog button:focus-visible, .wa-filter-section summary:focus-visible, .wa-number-health:focus-visible { outline: 2px solid var(--accent-neon); outline-offset: 3px; }
.wa-number-health { cursor: help; color: var(--text-secondary); font-family: inherit; }
:root { --wa-health-warning: oklch(82% .16 85); --wa-health-danger: oklch(75% .16 20); }
html.light { --wa-health-warning: oklch(46% .11 65); --wa-health-danger: oklch(46% .18 25); }
.wa-health-high { color: var(--accent-neon); }
html.light .wa-health-high { color: color-mix(in srgb, var(--accent-neon) 75%, var(--text-primary)); }
html.light .wa-filters-apply { color: var(--text-primary); }
.wa-health-medium { color: var(--wa-health-warning); }
.wa-health-low { color: var(--wa-health-danger); }
.wa-health-tooltip { position: fixed; inset: auto; margin: 0; width: max-content; max-width: min(320px, calc(100vw - 24px)); box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--border-hover); border-radius: 12px; color: var(--text-primary); background: var(--bg-card); box-shadow: 0 8px 28px color-mix(in srgb, var(--text-primary) 20%, transparent); font: 12px/1.6 Inter, sans-serif; }

/* Não lidas: vermelho semântico com contraste nos dois temas. */
:root { --wa-unread-bg: oklch(50% .2 25); --wa-unread-text: var(--select-text); }
html.light { --wa-unread-text: var(--bg-card); }
.wa-unread-tag { color: var(--wa-unread-text); background: var(--wa-unread-bg); border-color: var(--wa-unread-bg); }

/* Small per-conversation customer-service window. */
.wa-contact-window { display:flex; margin-top:5px; }
.wa-window-tag { display:inline-flex; align-items:center; gap:4px; max-width:100%; padding:2px 6px; border-radius:5px; border:1px solid var(--border-hover); background:var(--bg-card); color:var(--text-secondary); font-size:10px; font-weight:600; line-height:1.4; white-space:nowrap; }
.wa-window-tag svg { flex-shrink:0; }
.wa-window-tag.is-open { color:var(--accent-neon); background:color-mix(in srgb,var(--accent-neon) 10%,var(--bg-page)); border-color:color-mix(in srgb,var(--accent-neon) 40%,var(--border-default)); }
#wa-24h-banner { flex-shrink:0; }
@media(max-width:767px) { #wa-24h-banner { margin:4px 8px; padding:8px; gap:6px; flex-wrap:wrap; } #wa-24h-banner>div { min-width:180px; } }

.wa-filter-default { display:flex; align-items:center; gap:9px; margin-left:auto; color:var(--text-primary); cursor:pointer; font-size:12px; font-weight:650; }
.wa-filter-default input { width:18px; height:18px; flex-shrink:0; accent-color:var(--accent-neon); cursor:pointer; }
.wa-filter-default small { display:block; margin-top:3px; color:var(--text-secondary); font-size:10px; font-weight:400; }
.wa-filters-dialog [aria-busy="true"], .wa-filter-default input:disabled { cursor:wait; }
@media(max-width:600px) { .wa-filter-default { order:-1; flex-basis:100%; margin-left:0; min-height:40px; } .wa-filter-feedback { order:-2; } }

/* Saúde desconhecida: atenção em todas as telas, com contraste em ambos os temas. */
.wa-health-unknown { color: var(--wa-health-warning); background: color-mix(in srgb, var(--wa-health-warning) 10%, var(--bg-card)); }
.wa-dispatch-health { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--border-hover); border-radius:10px; background:var(--bg-card); }
.wa-dispatch-number { font-size:12px; font-weight:600; color:var(--text-primary); overflow-wrap:anywhere; }
.wa-dispatch-limit { margin-left:auto; }
.wa-capacity-alert { --wa-alert-solid: oklch(46% .18 25); box-sizing:border-box; width:min(560px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); padding:0; border:1px solid var(--wa-health-danger); border-radius:16px; background:var(--bg-card); color:var(--text-primary); box-shadow:0 12px 36px rgb(0 0 0 / .28); font:14px/1.55 Inter,sans-serif; overflow:auto; }
.wa-capacity-alert::backdrop { background:rgb(0 0 0 / .9); }
.wa-capacity-alert header { padding:20px 24px; border-bottom:1px solid color-mix(in srgb,var(--wa-health-danger) 40%,transparent); background:color-mix(in srgb,var(--wa-health-danger) 12%,var(--bg-card)); }
.wa-capacity-alert h2 { margin:0; color:var(--wa-health-danger); font-size:19px; line-height:1.35; font-weight:800; }
.wa-capacity-alert header p { margin:8px 0 0; font-size:12px; color:var(--text-secondary); overflow-wrap:anywhere; }
#wa-capacity-message { padding:8px 24px; }
#wa-capacity-message p { margin:14px 0; }
.wa-capacity-alert footer { display:flex; justify-content:flex-end; gap:12px; padding:16px 24px 24px; }
.wa-capacity-alert button { padding:12px 16px; border:1px solid var(--border-hover); border-radius:10px; font:600 12px/1.4 Inter,sans-serif; background:var(--bg-page); color:var(--text-primary); cursor:pointer; }
.wa-capacity-alert .wa-capacity-proceed { background:var(--wa-alert-solid); color:oklch(100% 0 0); border-color:var(--wa-alert-solid); }
.wa-capacity-alert button:focus-visible { outline:2px solid var(--wa-health-danger); outline-offset:3px; }
@media(max-width:480px) { .wa-dispatch-limit { margin-left:0; } .wa-capacity-alert header { padding:18px; } #wa-capacity-message { padding:4px 18px; } .wa-capacity-alert footer { padding:16px 18px 18px; flex-direction:column; } }