/* The bell panel's app cards: one collapsed row per sending app, an inline
   expanded item list, and a per-card overflow menu. Split out of
   notification-items.css (itself already split from notifications.css) so
   every notification source file stays under the 300-line gate. */

.notification-group-list {
  margin: 0;
  padding: 6px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* No overflow:hidden here: the overflow menu (below) is an absolutely
   positioned child of the row and needs to paint outside this box's own
   bounds when the card is collapsed. Nothing inside relies on this element
   clipping to its own radius — the expanded background lives on this same
   box, so it already respects the radius on its own. */
.notification-group {
  border-radius: 11px;
}

.notification-group.is-expanded {
  background: var(--desktop-surface-strong);
}

.notification-group-row {
  position: relative;
  display: flex;
  align-items: center;
  padding-right: 6px;
}

.notification-group-summary {
  flex: 1;
  display: grid;
  grid-template-columns: 26px 1fr 15px;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 8px 4px 8px 8px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.notification-group-summary:hover {
  background: var(--desktop-surface-strong);
}

/* Shrinking the box alone left the (unscaled) 26px glyph nearly filling a
   28px box — every icon read as slightly too heavy and inconsistently
   cropped depending on its own shape. Scaling the glyph down with it keeps
   the same padding ratio the full-size app icon uses everywhere else. */
.notification-group-summary .desktop-app-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
}

.notification-group-summary .desktop-app-icon svg {
  width: 15px;
  height: 15px;
}

.notification-group-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.notification-group-top {
  display: flex;
  align-items: center;
  gap: 7px;
}

.notification-group-top strong {
  font-size: 12.5px;
  font-weight: 600;
}

.notification-group-badge {
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: #00a9bf;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

:root[data-alyssiun-atmosphere="neo"] .notification-group-badge {
  background: #00e5ff;
  color: #04161a;
}

.notification-group-latest {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  color: var(--desktop-muted);
  font-size: 11.5px;
}

.notification-group-latest-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.notification-group-latest-time {
  flex: none;
}

.notification-group-chevron {
  flex: none;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--desktop-muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 160ms ease;
}

.notification-group.is-expanded .notification-group-chevron {
  transform: rotate(90deg);
}

.notification-group-more {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--desktop-muted);
  cursor: pointer;
}

.notification-group-more:hover,
.notification-group-more[aria-expanded="true"] {
  background: var(--desktop-surface-strong);
  color: var(--desktop-text);
}

.notification-group-more svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.notification-group-menu {
  position: absolute;
  top: calc(100% + 2px);
  right: 4px;
  /* Above a later sibling card's own background (a collapsed card, or an
     expanded one's item list) — see .notification-group's own note on why
     this box is allowed to paint outside its parent's bounds at all. */
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 152px;
  padding: 5px;
  border: 1px solid var(--desktop-border);
  border-radius: 9px;
  background: var(--desktop-surface);
  box-shadow: var(--desktop-shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.notification-group-menu[hidden] {
  display: none;
}

.notification-group-menu button {
  padding: 7px 9px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--desktop-text);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.notification-group-menu button:hover {
  background: var(--desktop-surface-strong);
}

.notification-group-items {
  margin: 0;
  padding: 0 6px 6px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}