/* WhatsApp operations: session, monitoring, delivery history and controls. */
.wa-central {
  min-width: 0;
  --wa-accent: var(--accent);
  --wa-green: var(--success);
  --wa-danger: var(--danger);
}
.wa-central [hidden] { display: none !important; }
.wa-central :is(button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.wa-session-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--deep);
}
.wa-session-identity { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.wa-session-symbol {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-raised);
  color: var(--accent);
  font-size: 24px;
}
.wa-session-symbol svg { width: 22px; height: 22px; }
.wa-session-identity > div { display: flex; flex-wrap: wrap; gap: 3px 12px; min-width: 0; }
.wa-session-identity strong { font: 700 14px/1.7 Manrope, sans-serif; }
.wa-session-identity #whatsapp-number { color: var(--ink); font-size: 12px; line-height: 2; font-variant-numeric: tabular-nums; }
#wa-session-summary { width: 100%; font-size: 11px; line-height: 1.65; color: var(--muted); overflow-wrap: anywhere; }
.wa-session-state { display: flex; align-items: flex-end; flex-direction: column; gap: 6px; }
.wa-session-state > .small { font-size: 11px; }
.wa-session-bar > .button { flex-shrink: 0; }
.wa-tabs {
  display: flex;
  gap: 4px;
  padding: 0;
  margin: 22px 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.wa-tabs button {
  position: relative;
  border: 0;
  border-radius: 6px 6px 0 0;
  background: transparent;
  color: var(--muted);
  font: 550 12px/1.5 Inter, sans-serif;
  padding: 13px 17px 15px;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.wa-tabs button::after { content: ''; position: absolute; inset: auto 16px 0; height: 2px; border-radius: 2px 2px 0 0; background: transparent; }
.wa-tabs button[aria-selected=true] { color: var(--accent); background: var(--accent-soft); }
.wa-tabs button[aria-selected=true]::after { background: var(--accent); }
.wa-tabs button:hover { color: var(--ink); background: var(--panel-raised); }
.wa-tabs button:focus-visible { outline-offset: -3px; }
.wa-page-feedback:not(:empty) { margin-bottom: 18px; }
.wa-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 0 10px; }
.wa-section-heading h2 { font-size: 20px; letter-spacing: -.035em; }
.wa-section-heading p { font-size: 12px; color: var(--muted); line-height: 1.7; margin-top: 6px; max-width: 680px; }
.wa-period { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin: 0; }
.wa-period > span { font-size: 11px; color: var(--muted); }
.wa-period select { font-size: 12px; width: auto; min-width: 156px; }
.wa-coverage-details { margin: 0 0 20px; font-size: 11px; line-height: 1.7; color: var(--muted); }
.wa-coverage-details summary { cursor: pointer; width: fit-content; }
.wa-coverage-details summary:hover { color: var(--ink); }
.wa-coverage-details p { max-width: 900px; margin: 10px 0 0; padding: 12px 16px; border-left: 2px solid var(--accent); background: var(--deep); border-radius: 0 8px 8px 0; }
.wa-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-bottom: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
}
.wa-metrics article { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 20px; }
.wa-metrics article + article { border-left: 1px solid var(--line); }
.wa-metrics article > span { color: var(--muted); font-size: 11px; }
.wa-metrics strong { font: 700 30px/1.15 Manrope, sans-serif; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.wa-metrics [data-wa-metric=delivered], .wa-metrics [data-wa-metric=read] { color: var(--success); }
.wa-metrics [data-wa-metric=failed] { color: var(--danger); }
.wa-metrics [data-wa-metric=uncertain] { color: var(--warning); }
.wa-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) 296px; align-items: stretch; gap: 20px; }
.wa-dashboard-grid > * { min-width: 0; }
.wa-lower-grid { margin-top: 20px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.wa-central .panel-heading { padding: 20px; gap: 16px; }
.wa-central .panel-heading :is(h2, h3) { font-size: 18px; letter-spacing: -.03em; }
.wa-rate { text-align: right; display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.wa-rate strong { font: 700 23px/1.15 Manrope, sans-serif; color: var(--success); font-variant-numeric: tabular-nums; }
.wa-rate span { font-size: 10px; color: var(--muted); }
.wa-daily-chart { padding: 0 16px; min-height: 220px; display: grid; place-items: center; }
.wa-daily-chart svg { display: block; width: 100%; height: auto; }
.wa-chart-label { fill: var(--muted); font: 11px Inter, sans-serif; font-variant-numeric: tabular-nums; }
.wa-chart-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; }
.wa-bar-total { fill: var(--accent); }
.wa-bar-delivered { fill: var(--success); }
.wa-bar-failed { fill: var(--danger); }
.wa-chart-empty { font-size: 12px; line-height: 1.8; text-align: center; max-width: 360px; color: var(--muted); padding: 28px 16px; }
.wa-chart-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 22px; margin: 10px 20px 20px; font-size: 11px; color: var(--muted); }
.wa-chart-legend > span { display: flex; align-items: center; gap: 7px; }
.wa-chart-legend > span::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }
.wa-chart-legend > .wa-legend-delivered::before { background: var(--success); }
.wa-chart-legend > .wa-legend-failed::before { background: var(--danger); }
.wa-chart-data { margin: 0 20px 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.wa-chart-data summary, .wa-advanced summary, .wa-pairing summary { font-size: 12px; line-height: 1.7; color: var(--ink); cursor: pointer; }
.wa-chart-data table { width: 100%; font-size: 11px; line-height: 1.7; border-collapse: collapse; margin-top: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wa-chart-data :is(th, td) { text-align: right; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.wa-chart-data :is(th, td):first-child { text-align: left; }
.wa-chart-data th { color: var(--muted); font-weight: 500; }
.wa-receipt-note { font-size: 11px; line-height: 1.75; color: var(--muted); padding: 0 20px 20px; }
.wa-queue { padding: 0 20px; margin: 0 0 18px; }
.wa-queue > div { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.wa-queue > div:first-child { padding-top: 0; }
.wa-queue dt { font-size: 12px; color: var(--muted); }
.wa-queue dd { font: 650 21px/1.25 Manrope, sans-serif; margin: 0; font-variant-numeric: tabular-nums; }
.wa-queue [data-wa-queue=failed] { color: var(--danger); }
.wa-queue [data-wa-queue=uncertain] { color: var(--warning); }
.wa-queue-panel > .section-copy { font-size: 11px; line-height: 1.75; color: var(--muted); padding: 0 20px 14px; }
.wa-inline-action { margin: 0 20px 20px; color: var(--accent); font-size: 11px; text-align: left; line-height: 1.6; }
.wa-failure-list { padding: 0 20px 8px; }
.wa-failure-list > .empty-inline { padding: 10px 0 20px; font-size: 12px; line-height: 1.8; }
.wa-failure { display: flex; gap: 14px; align-items: start; padding: 16px 0; border-top: 1px solid var(--line); }
.wa-failure > div { flex: 1; min-width: 0; }
.wa-failure strong { font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.wa-failure p { font-size: 11px; line-height: 1.65; color: var(--muted); margin-top: 6px; overflow-wrap: anywhere; }
.wa-failure .wa-failure-error { color: var(--danger); }
.wa-failure .row-action { flex-shrink: 0; font-size: 11px; }
.wa-session-events { list-style: none; margin: 0; padding: 0 20px 20px; max-height: 346px; overflow: auto; }
.wa-session-events li { display: flex; flex-direction: column; gap: 6px; border-left: 1px solid var(--line); padding: 0 0 20px 18px; position: relative; }
.wa-session-events li:last-child { padding-bottom: 0; }
.wa-session-events li::before { content: ''; height: 7px; width: 7px; background: var(--accent); border-radius: 50%; position: absolute; top: 6px; left: -4px; box-shadow: 0 0 0 4px var(--panel); }
.wa-session-events strong { font-size: 12px; font-weight: 500; line-height: 1.7; overflow-wrap: anywhere; }
.wa-session-events time { font-size: 11px; color: var(--muted); }
.wa-session-events .wa-empty-event { padding: 10px 0 0; border: 0; font-size: 12px; color: var(--muted); line-height: 1.8; }
.wa-session-events .wa-empty-event::before { display: none; }

/* Searchable delivery journal. */
.wa-messages-panel { overflow: hidden; }
.wa-message-filters { padding: 0 20px 20px; display: grid; grid-template-columns: minmax(220px, 2fr) minmax(140px, 1fr) minmax(120px, .8fr) minmax(100px, .7fr) auto; align-items: end; gap: 12px; }
.wa-message-filters label { margin: 0; min-width: 0; }
.wa-message-filters label > span { display: block; font-size: 11px; color: var(--muted); margin-bottom: 7px; }
.wa-message-filters :is(input, select) { font-size: 12px; min-height: 40px; }
.wa-message-filters > .button { min-height: 40px; }
.wa-messages-table { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.6; }
.wa-messages-table th { background: var(--deep); border-block: 1px solid var(--line); color: var(--muted); font-weight: 500; text-align: left; font-size: 11px; padding: 11px 14px; white-space: nowrap; }
.wa-messages-table td { border-bottom: 1px solid var(--line); padding: 16px 14px; vertical-align: middle; }
.wa-messages-table tbody tr:hover { background: var(--panel-raised); }
.wa-messages-table :is(th, td):first-child { padding-left: 20px; }
.wa-messages-table :is(th, td):last-child { padding-right: 20px; text-align: right; }
.wa-messages-table strong { display: block; max-width: 300px; overflow-wrap: anywhere; font-size: 12px; font-weight: 600; }
.wa-message-meta { display: block; font-size: 11px; color: var(--muted); margin-top: 5px; }
.wa-messages-table td:nth-child(2), .wa-messages-table td:nth-child(4) { white-space: nowrap; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.wa-pagination { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; gap: 12px; }
.wa-pagination .button { font-size: 11px; min-height: 36px; }
.wa-messages-panel > .empty-inline { padding: 28px 20px; font-size: 12px; }
.wa-detail-status { margin: 20px 0; }
.wa-message-timeline { list-style: none; margin: 24px 0; padding: 0 0 0 4px; }
.wa-message-timeline li { position: relative; display: flex; justify-content: space-between; gap: 20px; padding: 10px 0 14px 20px; border-left: 1px solid var(--line); }
.wa-message-timeline li::before { position: absolute; left: -4px; top: 16px; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; content: ''; }
.wa-message-timeline strong { font-size: 12px; font-weight: 550; }
.wa-message-timeline time { font-size: 11px; color: var(--muted); }
#wa-message-dialog .wa-receipt-note { padding: 18px 0 0; }

/* Connection and QR stage are independent from the test form. */
.wa-central .whatsapp-panel { margin-bottom: 0; overflow: hidden; }
.connection-provider { display: inline-block; padding: 3px 7px; border: 1px solid var(--line); border-radius: 5px; font: 500 10px/1.4 Inter, sans-serif; letter-spacing: 0; color: var(--muted); margin-left: 8px; vertical-align: middle; }
.connection-area { display: grid; grid-template-columns: minmax(0, 1fr) 270px; align-items: start; gap: 32px; padding: 8px 20px 24px; }
.connection-copy { min-width: 0; }
.connection-copy h3 { font-size: 20px; letter-spacing: -.03em; }
.connection-copy > p:not(.form-feedback) { font-size: 12px; line-height: 1.8; color: var(--muted); margin-top: 10px; max-width: 540px; }
.connection-copy > .connection-number { font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; }
.connection-steps { padding-left: 20px; margin: 20px 0 24px; font-size: 12px; color: var(--muted); line-height: 1.8; }
.connection-steps li { padding-left: 5px; margin-bottom: 10px; }
.connection-steps li::marker { color: var(--accent); font-weight: 650; }
.connection-steps strong { color: var(--ink); font-weight: 550; }
.connection-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.connection-copy .form-feedback { margin-top: 14px; }
.qr-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 280px; min-width: 0; padding: 20px; background: var(--deep); border: 1px solid var(--line); border-radius: 12px; }
.qr-stage img { display: block; background: #fff; border-radius: 8px; max-width: 100%; width: 228px; height: auto; aspect-ratio: 1; object-fit: contain; }
.qr-stage > p { max-width: 215px; text-align: center; font-size: 11px; line-height: 1.6; color: var(--muted); margin-top: 16px; }
.qr-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; min-height: 175px; max-width: 185px; font-size: 12px; color: var(--muted); line-height: 1.7; }
.qr-glyph { display: grid; place-items: center; width: 72px; height: 72px; border: 1px solid var(--line); border-radius: 16px; color: var(--accent); font-size: 48px; line-height: 1; background: var(--panel); }
.qr-stage.is-connected .qr-glyph { color: var(--success); background: color-mix(in srgb, var(--success) 8%, var(--deep)); border-color: color-mix(in srgb, var(--success) 32%, var(--line)); font-size: 32px; border-radius: 50%; }
.wa-session-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }
.wa-session-details dt { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.wa-session-details dd { font-size: 12px; margin: 0; line-height: 1.7; overflow-wrap: anywhere; }
.wa-pairing { padding: 18px 20px; border-top: 1px solid var(--line); background: var(--deep); }
.wa-pairing form { margin-top: 18px; max-width: 580px; }
.wa-pairing-fields { display: flex; gap: 10px; }
.wa-pairing-fields input { flex: 1; min-width: 0; }
.wa-pairing-fields button { white-space: nowrap; }
.wa-pairing output { display: block; width: max-content; max-width: 100%; letter-spacing: .18em; font: 750 28px/1.5 Manrope, sans-serif; font-variant-numeric: tabular-nums; padding: 14px 20px; background: var(--accent-soft); border: 1px solid var(--line); border-radius: 10px; color: var(--accent); overflow-wrap: anywhere; margin: 16px 0; }

/* Explicit test delivery and its receipt guide. */
.wa-test-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 20px; }
.whatsapp-test { padding: 24px; }
.whatsapp-test h2 { font-size: 22px; letter-spacing: -.035em; }
.whatsapp-test h3 { font-size: 18px; }
.test-explanation { font-size: 12px; color: var(--muted); line-height: 1.8; margin: 10px 0 24px; max-width: 620px; }
.whatsapp-test select { max-width: none; margin-bottom: 18px; }
.whatsapp-test .field-help { margin-bottom: 18px; }
.whatsapp-test .form-feedback { margin-top: 14px; }
.whatsapp-test > .small { display: block; margin-top: 12px; font-size: 11px; line-height: 1.7; }
.whatsapp-test > .text-button { display: block; margin-top: 12px; color: var(--accent); }
.whatsapp-test .button-wide { max-width: none; width: 100%; margin-top: 4px; }
.wa-central textarea { display: block; width: 100%; min-width: 0; resize: vertical; border: 1px solid var(--line); background: var(--deep); color: var(--ink); border-radius: 8px; padding: 12px; font: 13px/1.7 Inter, sans-serif; }
.wa-central textarea:disabled { opacity: .55; }
.wa-central textarea::placeholder { color: var(--muted); }
.whatsapp-test input[type=file] { font-size: 12px; padding: 10px; line-height: 1.6; cursor: pointer; overflow: hidden; }
.whatsapp-test input[type=file]:disabled { cursor: not-allowed; opacity: .6; }
.whatsapp-test input[type=file]::file-selector-button { background: var(--panel-raised); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; font: inherit; font-weight: 550; margin-right: 12px; cursor: pointer; }
.whatsapp-test input[type=file]::file-selector-button:hover { border-color: var(--accent); }
.test-file-summary { font-size: 11px; color: var(--muted); line-height: 1.7; overflow-wrap: anywhere; padding: 12px 14px; border: 1px solid var(--line); background: var(--deep); border-radius: 8px; margin-bottom: 18px; }
.test-file-summary.is-error { color: var(--danger); border-color: var(--danger); }
.test-progress { display: block; width: 100%; height: 5px; margin: 16px 0 0; accent-color: var(--accent); border: 0; border-radius: 5px; overflow: hidden; }
.test-progress::-webkit-progress-bar { background: var(--deep); }
.test-progress::-webkit-progress-value { background: var(--accent); }
.test-progress::-moz-progress-bar { background: var(--accent); }
.wa-test-guide { padding: 24px; align-self: start; }
.wa-test-guide h3 { font-size: 18px; letter-spacing: -.03em; }
.wa-test-guide ol { list-style: none; padding: 0 0 0 5px; margin: 24px 0; counter-reset: test-step; }
.wa-test-guide li { position: relative; border-left: 1px solid var(--line); padding: 0 0 24px 24px; counter-increment: test-step; }
.wa-test-guide li:last-child { padding-bottom: 0; border-color: transparent; }
.wa-test-guide li::before { content: counter(test-step); display: grid; place-items: center; position: absolute; width: 20px; height: 20px; background: var(--panel-raised); border: 1px solid var(--line); color: var(--accent); border-radius: 50%; top: 0; left: -11px; font: 600 10px/1 Inter, sans-serif; }
.wa-test-guide strong { display: block; font-size: 12px; font-weight: 600; line-height: 1.7; }
.wa-test-guide li span { display: block; font-size: 11px; line-height: 1.75; color: var(--muted); margin-top: 6px; }
.wa-test-guide > p:not(.eyebrow) { font-size: 11px; line-height: 1.8; color: var(--muted); border-top: 1px solid var(--line); padding-top: 18px; }
.wa-test-guide > .text-button { color: var(--accent); font-size: 11px; margin-top: 16px; text-align: left; }

/* Session and delivery preferences. */
.wa-settings-form { overflow: hidden; }
.wa-settings-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.wa-settings-form > .panel-heading { border-bottom: 1px solid var(--line); }
.wa-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wa-settings-grid > section { padding: 24px; min-width: 0; }
.wa-settings-grid > section + section { border-left: 1px solid var(--line); }
.wa-settings-grid h3 { font-size: 16px; margin-bottom: 20px; }
.wa-settings-form .checkbox-label { display: flex; align-items: start; font-size: 12px; line-height: 1.7; gap: 12px; margin: 20px 0; }
.wa-settings-form .checkbox-label input { margin-top: 3px; }
.wa-settings-form .checkbox-label strong { font-weight: 600; display: block; }
.wa-settings-form .checkbox-label small { font-size: 11px; line-height: 1.7; color: var(--muted); display: block; margin-top: 4px; }
.wa-settings-form input:not([type=checkbox]), .wa-settings-form select { margin-bottom: 18px; }
.wa-settings-form .field-help { margin-top: 8px; font-size: 11px; line-height: 1.7; }
.wa-settings-form label { font-size: 12px; }
.wa-gate-note { font-size: 11px; line-height: 1.75; color: var(--warning); background: color-mix(in srgb, var(--warning) 7%, var(--deep)); border: 1px solid color-mix(in srgb, var(--warning) 22%, var(--line)); padding: 12px 14px; margin: 0 0 22px; border-radius: 8px; }
.wa-advanced { border-top: 1px solid var(--line); padding: 20px 24px; }
.wa-timeouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.wa-timeouts input { margin-top: 8px; }
.wa-settings-actions { padding: 20px 24px; border-top: 1px solid var(--line); background: var(--deep); display: flex; gap: 10px; }
.wa-settings-form > .form-feedback:not(:empty) { padding: 16px 24px 20px; }
.wa-settings-form > .wa-receipt-note { color: var(--accent); padding: 0 24px 20px; }

@media (max-width: 1260px) {
  .wa-dashboard-grid { grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; }
  .wa-lower-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wa-metrics article { padding: 18px 16px; }
  .wa-message-filters { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
  .wa-message-filters label:first-child { grid-column: 1 / -1; }
  .wa-test-layout { grid-template-columns: minmax(0, 1fr) 282px; gap: 16px; }
}
@media (max-width: 1000px) {
  .wa-session-bar { flex-wrap: wrap; gap: 16px; }
  .wa-session-identity { flex-basis: 50%; }
  .wa-session-bar > .button { margin-left: auto; }
  .wa-session-state { align-items: flex-start; }
  .wa-dashboard-grid { grid-template-columns: minmax(0, 1fr) 260px; }
  .wa-lower-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wa-daily-chart { min-height: 200px; padding-inline: 10px; }
  .connection-area { grid-template-columns: minmax(0, 1fr) 240px; gap: 24px; }
  .qr-stage { padding: 16px; }
}
@media (max-width: 780px) {
  .wa-session-identity { flex-basis: 100%; }
  .wa-dashboard-grid, .wa-lower-grid, .wa-test-layout { grid-template-columns: minmax(0, 1fr); }
  .wa-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wa-metrics article:nth-child(4) { border-left: 0; }
  .wa-metrics article:nth-child(n+4) { border-top: 1px solid var(--line); }
  .wa-queue { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .wa-queue > div { flex-direction: column; align-items: start; gap: 8px; padding: 0 0 14px; }
  .wa-settings-grid { grid-template-columns: minmax(0, 1fr); }
  .wa-settings-grid > section + section { border-left: 0; border-top: 1px solid var(--line); }
  .wa-test-guide ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .wa-test-guide li { padding-bottom: 0; border-color: transparent; }
  .wa-section-heading { align-items: start; }
  .wa-period { flex-direction: column; align-items: start; gap: 6px; }
}
@media (max-width: 600px) {
  .wa-session-bar { padding: 16px; gap: 16px; }
  .wa-session-identity strong { font-size: 13px; }
  .wa-session-state { flex: 1; min-width: 130px; }
  .wa-session-state > .small { max-width: 200px; }
  .wa-session-bar > .button { font-size: 11px; padding-inline: 12px; }
  .wa-tabs { margin: 18px 0; gap: 0; }
  .wa-tabs button { font-size: 12px; padding: 12px 14px 14px; }
  .wa-section-heading { flex-direction: column; gap: 16px; margin-bottom: 12px; }
  .wa-section-heading h2 { font-size: 18px; }
  .wa-period { flex-direction: row; align-items: center; align-self: stretch; justify-content: space-between; }
  .wa-period select { min-width: 184px; }
  .wa-metrics article { padding: 16px; }
  .wa-metrics strong { font-size: 28px; }
  .wa-central .panel-heading { padding: 18px 16px; }
  .wa-central .panel-heading :is(h2, h3) { font-size: 17px; }
  .wa-rate strong { font-size: 21px; }
  .wa-rate span { font-size: 10px; }
  .wa-chart-data { margin-inline: 16px; }
  .wa-receipt-note { padding-inline: 16px; }
  .wa-chart-legend { gap: 16px; }
  .wa-daily-chart { min-height: 180px; }
  .wa-daily-chart svg { min-height: 140px; }
  .wa-queue { padding-inline: 16px; gap: 8px; }
  .wa-queue dt { font-size: 11px; }
  .wa-queue dd { font-size: 20px; }
  .wa-queue-panel > .section-copy { padding-inline: 16px; }
  .wa-inline-action { margin-inline: 16px; }
  .wa-failure-list, .wa-session-events { padding-inline: 16px; }
  .wa-failure { gap: 10px; }
  .wa-message-filters { padding-inline: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wa-messages-table thead { display: none; }
  .wa-messages-table, .wa-messages-table tbody, .wa-messages-table td { display: block; }
  .wa-messages-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 18px 16px; gap: 10px; border-top: 1px solid var(--line); }
  .wa-messages-table td { border: 0; padding: 0 !important; min-width: 0; }
  .wa-messages-table td:first-child { grid-column: 1; grid-row: 1; }
  .wa-messages-table td:last-child { grid-column: 2; grid-row: 1; }
  .wa-messages-table td:nth-child(2), .wa-messages-table td:nth-child(3), .wa-messages-table td:nth-child(4) { grid-column: 1 / -1; }
  .wa-messages-table td[data-label]::before { content: attr(data-label); display: inline-block; width: 66px; font-size: 11px; color: var(--muted); }
  .wa-pagination { padding: 16px; gap: 8px; }
  .wa-pagination .button { padding: 8px 10px; }
  .wa-pagination > span { font-size: 11px; }
  .connection-area { grid-template-columns: minmax(0, 1fr); padding: 4px 16px 20px; gap: 24px; }
  .connection-copy h3 { font-size: 18px; }
  .qr-stage { width: 264px; max-width: 100%; justify-self: center; }
  .connection-actions .button { flex: 1 1 45%; font-size: 11px; }
  .connection-actions #whatsapp-disconnect { flex: 1 1 100%; }
  .wa-session-details { gap: 16px; }
  .wa-pairing { padding: 18px 16px; }
  .wa-pairing-fields { flex-direction: column; }
  .wa-pairing output { font-size: 24px; letter-spacing: .14em; }
  .whatsapp-test, .wa-test-guide { padding: 20px 16px; }
  .wa-test-guide ol { display: block; }
  .wa-test-guide li { padding-bottom: 22px; border-color: var(--line); }
  .wa-test-guide li:last-child { border-color: transparent; padding-bottom: 0; }
  .wa-settings-grid > section { padding: 20px 16px; }
  .wa-advanced { padding: 18px 16px; }
  .wa-timeouts { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .wa-timeouts input { margin-bottom: 10px !important; }
  .wa-settings-actions { padding: 18px 16px; flex-wrap: wrap; }
  .wa-settings-actions > .button { flex: 1 1 140px; }
  .wa-settings-form > .form-feedback:not(:empty), .wa-settings-form > .wa-receipt-note { padding-inline: 16px; }
  .wa-settings-form > .panel-heading { flex-wrap: wrap; }
  .wa-message-timeline li { flex-direction: column; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-central * { scroll-behavior: auto; transition: none; }
}