/* =============================================================
   Componente — barra de aplicativo (header)
   Mobile-first: cabe em 360px sem estourar. Título trunca,
   ações ficam com alvo de toque de 44px.
   ============================================================= */

@layer components {

  .app-bar {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--app-bar-height);
    padding: var(--space-2) var(--space-3);
    padding-top: calc(var(--space-2) + env(safe-area-inset-top, 0px));
    background-color: color-mix(in srgb, var(--surface-raised) 92%, transparent);
    backdrop-filter: blur(12px);
    border-block-end: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-1);
  }

  .app-bar__identity {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    flex: 1;
  }

  .app-bar__mark {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    flex: none;
    border-radius: var(--radius-circle);
    object-fit: cover;
    background-color: var(--surface-overlay);
    box-shadow: 0 0 0 2px var(--border-subtle);
  }

  .app-bar__titles {
    min-width: 0;
  }

  .app-bar__title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
    color: var(--text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Linha de apoio: o texto encolhe, o aviso de conexão não. Em 360px o
     resumo trunca; o que a pessoa precisa ver continua inteiro. */
  .app-bar__support {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-inline-size: 0;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-bar__support > span:first-child {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-bar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: none;
  }

  /* Menu suspenso da conta */
  .app-bar__menu-anchor {
    position: relative;
    flex: none;
  }

  .menu {
    position: absolute;
    inset-block-start: calc(100% + var(--space-2));
    inset-inline-end: 0;
    z-index: var(--z-dropdown);
    min-inline-size: 12rem;
    padding: var(--space-2);
    background-color: var(--surface-overlay);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.375rem);
    transition:
      opacity var(--dur-fast) var(--ease-out),
      transform var(--dur-fast) var(--ease-out),
      visibility var(--dur-fast) var(--ease-out);
  }

  .menu[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    inline-size: 100%;
    min-block-size: var(--tap-target);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text-default);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    text-align: start;
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }

  .menu__item > svg {
    inline-size: var(--icon-md);
    block-size: var(--icon-md);
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--text-muted);
  }

  .menu__item:hover,
  .menu__item:focus-visible {
    background-color: var(--surface-hover);
    color: var(--text-strong);
  }

  .menu__item--danger {
    color: var(--danger-text);
  }

  .menu__item--danger > svg {
    color: var(--danger-text);
  }

  .menu__item--danger:hover,
  .menu__item--danger:focus-visible {
    background-color: color-mix(in srgb, var(--danger-fill) 22%, transparent);
    color: var(--text-strong);
  }

  .menu__separator {
    block-size: 1px;
    margin: var(--space-2) var(--space-1);
    background-color: var(--border-subtle);
  }
}