/* 🔔 Notificações — central de avisos ao dono (21/10/2026).
 * Celular primeiro (360–390px): lista compacta e a leitura abre em tela
 * cheia. ≥900px os filtros viram painel suspenso; ≥1100px lista + leitura
 * lado a lado. Usa os tokens do styles.css (--surface, --border,
 * --andy-cyan…); nada de cor solta fora das cores por tipo abaixo. */

#notifications-root {
  --nt-escalation: var(--andy-cyan);
  --nt-owner_note: var(--andy-violet);
  --nt-ask_owner: var(--warning);
  --nt-handoff: #ff9f6b;
  --nt-agenda: var(--success);
  --nt-alert: var(--danger);
  --nt-report: #8fb4ff;
  --nt-radius: 14px;
  -webkit-tap-highlight-color: transparent;
}

#notifications-root .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#notifications-root button {
  font-family: inherit;
  color: inherit;
  cursor: pointer;
}
/* Controles: toque sem atraso, sem selecionar o rótulo no toque longo e
   resposta no aperto (o :hover só vale com mouse). */
#notifications-root button {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
#notifications-root button:not(:disabled):active {
  opacity: 0.78;
  transition: opacity 0.1s ease-out;
}
#notifications-root button:disabled {
  cursor: not-allowed;
}
#notifications-root :focus-visible {
  outline: 2px solid var(--andy-cyan);
  outline-offset: 2px;
}

.nt-ico,
.nt-btn-ico {
  width: 18px;
  height: 18px;
  flex: none;
}
.nt-btn-ico {
  width: 16px;
  height: 16px;
}

/* ---------- aviso do WhatsApp desconectado ---------- */
.nt-banner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--warning-line);
  border-radius: 12px;
  background: var(--warning-soft);
}
.nt-banner-ico {
  width: 20px;
  height: 20px;
  color: var(--warning);
  grid-row: span 2;
}
.nt-banner-txt {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--fg);
}
.nt-banner-btn {
  justify-self: start;
  padding: 0;
  min-height: 32px;
  border: 0;
  background: none;
  color: var(--warning) !important;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- busca + filtros + marcar todas ---------- */
.nt-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 10px;
}
.nt-search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}
.nt-search-ico {
  position: absolute;
  left: 12px;
  width: 18px;
  height: 18px;
  color: var(--fg-dim);
  pointer-events: none;
}
#notifications-root .nt-search-input {
  width: 100%;
  min-height: 44px;
  padding: 0 40px 0 38px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface-strong);
  color: var(--fg);
  font: 16px/1.2 var(--font-display); /* 16px: o iOS não dá zoom */
  -webkit-appearance: none;
  appearance: none;
}
.nt-search-input::placeholder {
  color: var(--fg-dim);
}
.nt-search-input::-webkit-search-cancel-button {
  display: none;
}
.nt-search-input:focus {
  outline: none;
  border-color: rgba(92, 200, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(92, 200, 255, 0.12);
}
.nt-search-clear {
  position: absolute;
  right: 4px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--fg-dim) !important;
}
.nt-search-clear[hidden] {
  display: none;
}

.nt-filter-btn,
.nt-readall {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--fg) !important;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.nt-filter-btn.is-on {
  border-color: rgba(92, 200, 255, 0.5);
  color: var(--andy-cyan) !important;
}
.nt-filter-n {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--andy-cyan);
  color: #04121f;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}
.nt-filter-n[hidden] {
  display: none;
}
/* No celular "Marcar todas" é só o ícone, na linha da busca. */
.nt-bar {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
.nt-readall {
  width: 44px;
  padding: 0;
}
.nt-readall span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.nt-readall:disabled {
  opacity: 0.45;
}

/* ---------- status (segmento) ---------- */
.nt-seg {
  display: grid;
  grid-template-columns: 0.8fr 1.35fr 1fr;
  gap: 4px;
  padding: 4px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(10, 16, 32, 0.6);
}
.nt-seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 8px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--fg-mid) !important;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.nt-seg-btn.is-on {
  background: var(--surface-elev);
  color: var(--fg) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.nt-chip-n {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(159, 191, 255, 0.1);
  color: var(--fg-mid);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.nt-seg-btn.is-hot > .nt-chip-n {
  background: var(--warning-soft);
  color: var(--warning);
}
.is-on > .nt-chip-n {
  background: rgba(92, 200, 255, 0.18);
  color: var(--andy-cyan);
}

/* ---------- folha de filtros (celular) ---------- */
.nt-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1400;
  background: rgba(3, 7, 18, 0.62);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.nt-sheet-open .nt-sheet-backdrop {
  opacity: 1;
}
.nt-sheet-backdrop[hidden] {
  display: none;
}
.nt-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1401;
  display: flex;
  flex-direction: column;
  max-height: min(82vh, 640px);
  max-height: min(82dvh, 640px);
  border: 1px solid var(--border-strong);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  background: #0b1324;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
  transform: translateY(102%);
  visibility: hidden;
  transition:
    transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.26s;
  overscroll-behavior: contain;
}
.nt-sheet-open .nt-sheet {
  transform: none;
  visibility: visible;
  transition:
    transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s;
}
.nt-sheet:focus {
  outline: none;
}
.nt-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 8px 4px 18px;
}
.nt-sheet-head::before {
  /* alça da folha */
  content: '';
  position: absolute;
  top: 7px;
  left: 50%;
  width: 40px;
  height: 4px;
  margin-left: -20px;
  border-radius: 999px;
  background: var(--border-strong);
}
.nt-sheet-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.nt-sheet-close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: none;
}
.nt-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 18px 8px;
  overscroll-behavior: contain;
}
.nt-sheet-foot {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
}

.nt-group + .nt-group {
  margin-top: 18px;
}
.nt-group-label {
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-mid);
}
.nt-group-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.nt-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--fg) !important;
  font-size: 13.5px;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}
.nt-chip.is-on {
  border-color: rgba(92, 200, 255, 0.6);
  background: rgba(92, 200, 255, 0.12);
  color: var(--andy-cyan) !important;
}

.nt-clear-btn,
.nt-apply-btn {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
}
.nt-clear-btn {
  border: 1px solid var(--border-strong);
  background: none;
}
.nt-clear-btn:disabled {
  opacity: 0.45;
}
.nt-apply-btn {
  border: 1px solid rgba(92, 200, 255, 0.55);
  background: rgba(92, 200, 255, 0.16);
  color: var(--andy-cyan) !important;
}

/* ---------- filtros ativos ---------- */
.nt-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.nt-active:not(:empty) {
  margin-bottom: 14px;
}
.nt-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  max-width: 100%;
  padding: 0 8px 0 12px;
  border: 1px solid rgba(92, 200, 255, 0.35);
  border-radius: 999px;
  background: rgba(92, 200, 255, 0.08);
  color: var(--fg) !important;
  font-size: 13px;
}
.nt-pill-dim {
  color: var(--fg-dim);
}
.nt-pill-x {
  width: 14px;
  height: 14px;
  color: var(--fg-mid);
}
.nt-clear-link {
  min-height: 34px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--andy-cyan) !important;
  font-size: 13px;
  font-weight: 600;
}

/* ---------- lista (compacta: assunto, quem e uma linha de prévia) ---------- */
.nt-day + .nt-day {
  margin-top: 18px;
}
.nt-day-label {
  margin: 0 4px 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-mid);
}
.nt-day-list {
  border: 1px solid var(--border);
  border-radius: var(--nt-radius);
  background: var(--surface);
  overflow: hidden;
}

.nt-row,
.nt-dt-card {
  --k: var(--nt-alert);
}
.nt-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 14px 12px 22px;
  border: 0;
  background: none;
  text-align: left;
  transition: background 0.15s ease;
}
.nt-row + .nt-row {
  border-top: 1px solid var(--border);
}
#notifications-root [data-kind='escalation'] {
  --k: var(--nt-escalation);
}
#notifications-root [data-kind='owner_note'] {
  --k: var(--nt-owner_note);
}
#notifications-root [data-kind='ask_owner'] {
  --k: var(--nt-ask_owner);
}
#notifications-root [data-kind='handoff'] {
  --k: var(--nt-handoff);
}
#notifications-root [data-kind='agenda'] {
  --k: var(--nt-agenda);
}
#notifications-root [data-kind='report'] {
  --k: var(--nt-report);
}
.nt-row:active {
  background: rgba(159, 191, 255, 0.05);
}
.nt-row.is-on {
  background: rgba(92, 200, 255, 0.08);
  box-shadow: inset 3px 0 0 var(--andy-cyan);
}

/* Não lida: ponto na margem esquerda + assunto em negrito. */
.nt-dot {
  position: absolute;
  left: 8px;
  top: 27px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--andy-cyan);
}

.nt-kind-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  color: var(--k);
  background: color-mix(in srgb, var(--k) 14%, transparent);
}
.nt-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.nt-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.nt-title {
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--fg-mid);
  overflow-wrap: anywhere;
}
.nt-row.is-unread .nt-title {
  font-weight: 650;
  color: var(--fg);
}
.nt-time {
  flex: none;
  font-size: 12.5px;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}
.nt-row.is-unread .nt-time {
  color: var(--andy-cyan);
}
.nt-sub {
  display: flex;
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.45;
  white-space: nowrap;
}
.nt-sub-name {
  flex: none;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--fg-mid);
  font-weight: 500;
}
.nt-sub-txt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--fg-dim);
}
.nt-sub-name + .nt-sub-txt::before {
  content: '·';
  margin: 0 6px;
}
.nt-ch-instagram {
  color: var(--brand-instagram-fg);
}
.nt-ch-whatsapp {
  color: var(--brand-whatsapp-fg);
}
.nt-ch-messenger {
  color: var(--brand-messenger-fg);
}

/* Entrega na lista: só quando pede atenção (falhou / na fila). */
.nt-dlv {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 5px;
  min-height: 24px;
  max-width: 100%;
  margin-top: 4px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  font-size: 12px;
}
.nt-dlv-ico {
  width: 13px;
  height: 13px;
  flex: none;
}
.nt-dlv-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nt-dlv.is-queued {
  color: var(--warning);
  border-color: var(--warning-line);
  background: var(--warning-soft);
}
.nt-dlv.is-fail {
  color: var(--danger);
  border-color: var(--danger-line);
  background: var(--danger-soft);
}

.nt-more {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
.nt-more-btn {
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  font-size: 14px;
}

/* ---------- leitura do aviso ---------- */
/* Celular: abre por cima da lista, em tela cheia. */
.nt-detail {
  display: none;
}
.nt-detail-open .nt-detail {
  position: fixed;
  inset: 0;
  z-index: 1450;
  display: block;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(8px + env(safe-area-inset-top)) 16px
    calc(28px + env(safe-area-inset-bottom));
  background: var(--bg-1);
  animation: nt-detail-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes nt-detail-in {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
}
.nt-dt-card {
  max-width: 720px;
  margin: 0 auto;
}
.nt-dt-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin-left: -10px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--andy-cyan) !important;
  font-size: 15px;
  font-weight: 600;
}
.nt-dt-back .nt-btn-ico {
  width: 20px;
  height: 20px;
}
.nt-dt-head {
  padding: 6px 0 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.nt-dt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.nt-dt-kind,
.nt-dt-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
}
.nt-dt-kind {
  color: var(--k);
  background: color-mix(in srgb, var(--k) 14%, transparent);
}
.nt-dt-flag {
  color: var(--warning);
  background: var(--warning-soft);
}
.nt-dt-kind-ico {
  width: 14px;
  height: 14px;
}
.nt-dt-title {
  font: 600 21px/1.3 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--fg);
  overflow-wrap: anywhere;
  outline: none;
}
.nt-dt-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--fg-mid);
}
.nt-dt-when {
  margin-top: 4px;
  font-size: 13px;
  color: var(--fg-dim);
}
.nt-dt-who {
  color: var(--fg);
  font-weight: 500;
}
.nt-dt-sep {
  color: var(--fg-dim);
}

/* Texto da IA em campos: "Chave: valor" vira linha, "- item" vira lista. */
.nt-dt-body {
  display: grid;
  gap: 18px;
}
.nt-dt-sec {
  display: grid;
  gap: 10px;
}
.nt-dt-p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg);
  overflow-wrap: anywhere;
}
.nt-dt-kv {
  display: grid;
  grid-template-columns: minmax(92px, 36%) minmax(0, 1fr);
  gap: 9px 14px;
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}
.nt-dt-kv dt {
  padding-top: 1px;
  font-size: 13.5px;
  color: var(--fg-mid);
  overflow-wrap: anywhere;
}
.nt-dt-kv dd {
  margin: 0;
  color: var(--fg);
  overflow-wrap: anywhere;
}
.nt-dt-list {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg);
}
dd .nt-dt-list {
  margin-top: 2px;
}
.nt-dt-list li::marker {
  color: var(--k);
}
.nt-dt-ask {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--warning-line);
  border-radius: 12px;
  background: var(--warning-soft);
}
.nt-dt-ask-ico {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--warning);
}
.nt-dt-ask p {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--fg);
}

.nt-dt-foot {
  display: grid;
  gap: 12px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.nt-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(92, 200, 255, 0.55);
  border-radius: 12px;
  background: rgba(92, 200, 255, 0.16);
  color: var(--andy-cyan) !important;
  font-size: 15px;
  font-weight: 600;
}
.nt-dt-dlv {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg-dim);
}
.nt-dt-dlv .nt-dlv-ico {
  margin-top: 2px;
}
.nt-dt-dlv.is-ok {
  color: var(--success);
}
.nt-dt-dlv.is-queued {
  color: var(--warning);
}
.nt-dt-dlv.is-fail {
  color: var(--danger);
}
.nt-dt-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 320px;
  text-align: center;
}

/* ---------- vazio / erro ---------- */
.nt-empty,
.nt-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 44px 20px 48px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--nt-radius);
}
.nt-empty-art {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  border-radius: 20px;
  color: var(--andy-cyan);
  background: radial-gradient(
    circle at 50% 35%,
    rgba(92, 200, 255, 0.2),
    rgba(92, 200, 255, 0.04) 70%
  );
  border: 1px solid rgba(92, 200, 255, 0.22);
}
.nt-empty-ico {
  width: 28px;
  height: 28px;
}
.nt-empty-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}
.nt-empty-text,
.nt-error p {
  max-width: 44ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-mid);
}
.nt-empty .nt-clear-btn,
.nt-error .nt-clear-btn {
  margin-top: 18px;
}

/* ---------- skeleton ---------- */
.nt-skel {
  display: block;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(159, 191, 255, 0.06) 0%,
    rgba(159, 191, 255, 0.13) 50%,
    rgba(159, 191, 255, 0.06) 100%
  );
  background-size: 200% 100%;
  animation: nt-shimmer 1.3s ease-in-out infinite;
}
.nt-skel-day {
  width: 64px;
  height: 12px;
  margin: 4px 2px 12px;
}
.nt-skel-row {
  display: flex;
  gap: 12px;
  padding: 16px 14px;
}
.nt-skel-row + .nt-skel-row {
  border-top: 1px solid var(--border);
}
.nt-skel-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex: none;
}
.nt-skel-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.nt-skel-l1 {
  width: 70%;
  height: 13px;
}
.nt-skel-l2 {
  width: 38%;
  height: 10px;
}
.nt-skel-l3 {
  width: 92%;
  height: 10px;
}
@keyframes nt-shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}

@media (hover: hover) and (pointer: fine) {
  .nt-row:hover:not(.is-on) {
    background: rgba(159, 191, 255, 0.045);
  }
  .nt-row:hover .nt-title {
    color: var(--fg);
  }
  .nt-chip:hover:not(.is-on) {
    border-color: rgba(92, 200, 255, 0.4);
  }
  .nt-seg-btn:hover:not(.is-on) {
    color: var(--fg) !important;
  }
  .nt-open:hover {
    background: rgba(92, 200, 255, 0.24);
  }
  .nt-dt-back:hover {
    background: rgba(159, 191, 255, 0.07);
  }
  .nt-filter-btn:hover,
  .nt-more-btn:hover,
  .nt-clear-btn:hover:not(:disabled) {
    border-color: rgba(92, 200, 255, 0.45);
  }
  .nt-readall:hover:not(:disabled) {
    color: var(--fg) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nt-skel {
    animation: none;
  }
  .nt-sheet,
  .nt-sheet-backdrop,
  .nt-row {
    transition: none;
  }
  .nt-detail-open .nt-detail {
    animation: none;
  }
}

/* ---------- 600–1099px: a leitura vira painel lateral por cima ---------- */
@media (min-width: 600px) and (max-width: 1099px) {
  .nt-detail-open .nt-detail {
    left: auto;
    width: min(560px, 100%);
    padding: 16px 24px 28px;
    border-left: 1px solid var(--border-strong);
    box-shadow: -16px 0 40px rgba(0, 0, 0, 0.45);
  }
}

/* ---------- ≥900px: filtros num painel suspenso ---------- */
@media (min-width: 900px) {
  .nt-bar {
    position: relative;
    grid-template-columns: minmax(0, 460px) auto 1fr auto;
  }
  .nt-readall {
    grid-column: 4;
    width: auto;
    padding: 0 14px;
  }
  .nt-readall span {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }
  .nt-seg {
    width: 460px;
  }
  .nt-sheet-backdrop {
    background: transparent;
  }
  .nt-sheet {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: auto;
    bottom: auto;
    width: 420px;
    max-height: min(70vh, 560px);
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
    transform: translateY(-6px);
    opacity: 0;
    transition:
      transform 0.16s ease,
      opacity 0.16s ease,
      visibility 0s linear 0.16s;
  }
  .nt-sheet-open .nt-sheet {
    transform: none;
    opacity: 1;
    transition:
      transform 0.16s ease,
      opacity 0.16s ease,
      visibility 0s;
  }
  .nt-sheet-head {
    padding: 12px 8px 0 18px;
  }
  .nt-sheet-head::before {
    display: none;
  }
  .nt-sheet-title {
    font-size: 15px;
  }
  .nt-chip {
    min-height: 36px;
    font-size: 13px;
  }
  .nt-sheet-foot {
    padding: 12px 18px 14px;
  }
}

/* ---------- ≥1100px: lista + leitura lado a lado ---------- */
@media (min-width: 1100px) {
  .nt-layout {
    display: grid;
    grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }
  .nt-detail,
  .nt-detail-open .nt-detail {
    position: sticky;
    top: 16px;
    inset: auto;
    z-index: auto;
    display: block;
    width: auto;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 22px 28px 28px;
    border: 1px solid var(--border);
    border-radius: var(--nt-radius);
    background: var(--surface);
    box-shadow: none;
    animation: none;
  }
  .nt-dt-back {
    display: none;
  }
  .nt-dt-title {
    font-size: 23px;
  }
  .nt-open {
    justify-self: start;
  }
}

/* Ponto no botão do menu (celular) quando há aviso não lido. */
.mobile-nav-dot {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 12px);
  left: 38px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--bg-1);
  pointer-events: none;
}
.mobile-nav-dot[hidden] {
  display: none;
}