/* V22.2.82 / build 2303 — refinamento da Central de Notificações mobile.
   Escopo: espaçamento/legibilidade dos cards e limite visual de 5 notificações.
   Cabeçalho, saúde do push e ações permanecem fora da área rolável. */
@media (max-width:760px){
  #notificationsDialog .notifications-card{
    grid-template-rows:auto auto auto!important;
  }

  /* Somente a lista rola. O teto comporta até 5 cards típicos e também
     respeita aparelhos com pouca altura útil. */
  #notificationsDialog .notifications-list,
  #notificationsDialog .notifications-list.has-scroll{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:8px!important;
    width:100%!important;
    min-height:0!important;
    max-height:min(390px,calc(100dvh - 320px))!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    padding:2px 2px 2px 1px!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-gutter:auto!important;
  }

  /* Cada aviso cresce pelo próprio conteúdo. Nada usa altura fixa que possa
     esmagar título, descrição ou horário em linhas sobrepostas. */
  #notificationsDialog .notification-item{
    flex:0 0 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:72px!important;
    display:grid!important;
    grid-template-columns:8px minmax(0,1fr)!important;
    grid-template-areas:
      "dot copy"
      ". time"!important;
    column-gap:9px!important;
    row-gap:6px!important;
    align-items:start!important;
    align-content:start!important;
    padding:10px 11px!important;
    margin:0!important;
    border-radius:12px!important;
    overflow:hidden!important;
  }
  #notificationsDialog .notification-dot{
    grid-area:dot!important;
    align-self:start!important;
    width:6px!important;
    height:6px!important;
    margin:6px 0 0!important;
  }
  #notificationsDialog .notification-copy{
    grid-area:copy!important;
    display:flex!important;
    flex-direction:column!important;
    gap:4px!important;
    width:100%!important;
    min-width:0!important;
    overflow:visible!important;
  }
  #notificationsDialog .notification-copy strong,
  #notificationsDialog .notification-copy small,
  #notificationsDialog .notification-copy em{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    position:static!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  #notificationsDialog .notification-copy strong{
    font-size:.8rem!important;
    line-height:1.22!important;
  }
  #notificationsDialog .notification-copy small{
    font-size:.7rem!important;
    line-height:1.34!important;
    color:#c4c7cd!important;
  }
  #notificationsDialog .notification-copy em{
    font-size:.65rem!important;
    line-height:1.3!important;
  }
  #notificationsDialog .notification-item time{
    grid-area:time!important;
    justify-self:start!important;
    align-self:start!important;
    position:static!important;
    width:auto!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    font-size:.61rem!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }
}

@media (max-width:390px){
  #notificationsDialog .notifications-list,
  #notificationsDialog .notifications-list.has-scroll{
    max-height:min(370px,calc(100dvh - 305px))!important;
    gap:7px!important;
  }
  #notificationsDialog .notification-item{
    min-height:70px!important;
    padding:9px 10px!important;
  }
}