/* ============================================================================
   AVFX CRM — POPOVER
   ----------------------------------------------------------------------------
   The frame, the feed row and the menu row. Two shapes, one box.
   Specification: docs/components/05-topbar.md §4.1, §5, §8
   ========================================================================== */

.pop {
  position: fixed; z-index: var(--z-dropdown);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-3);
  overflow: hidden;
  animation: pop-in var(--dur-fast) var(--ease-out);
}

@keyframes pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* --- FEED ----------------------------------------------------------------
   A window onto a queue, not the queue itself. It shows the most recent few
   and sends the operator to the full list for the rest.                    */

.pop--feed { inline-size: 380px; }

.pop__list { max-block-size: 420px; overflow-y: auto; }

.pop__row {
  display: flex; align-items: center; gap: var(--space-4);
  inline-size: 100%; text-align: start;
  padding: var(--space-4) var(--space-5);
  /* The accent bar is a transparent border on every row, so an unread row is
     not two pixels wider than a read one. */
  border-inline-start: 2px solid transparent;
  border-block-end: 1px solid var(--color-border-subtle);
  font-size: var(--fs-xs);
  color: var(--color-text-tertiary);
  transition: background var(--dur-instant);
}
.pop__row:last-child { border-block-end: 0; }
.pop__row:hover { background: var(--color-surface-hover); }

.pop__row.is-unread {
  border-inline-start-color: var(--color-primary);
  color: var(--color-text-primary);
}

.pop__text { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop__row .badge { flex: none; }
.pop__time {
  flex: none; inline-size: 40px; text-align: end;
  font-size: var(--fs-3xs); color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* Plain surface, NOT the sunken tone the filter panels use: .btn--ghost hovers
   to sunken, and a hover you cannot see is a control that looks broken. */
.pop__foot {
  display: flex; justify-content: center;
  padding: var(--space-3);
  border-block-start: 1px solid var(--color-border-subtle);
}

/* --- MENU ---------------------------------------------------------------- */

.pop--menu { inline-size: 220px; padding: var(--space-2); }

.pop__item {
  display: flex; align-items: center; gap: var(--space-4);
  inline-size: 100%; text-align: start;
  block-size: var(--ctl-h-md);
  padding-inline: var(--space-3);
  border-radius: var(--radius-xs);
  font-size: var(--fs-xs);
  color: var(--color-text-primary);
  transition: background var(--dur-instant);
}
.pop__item:hover { background: var(--color-surface-hover); }
.pop__item svg { inline-size: 15px; block-size: 15px; flex: none; color: var(--color-text-tertiary); }

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