/* The master status pill, the header's "Mark all read", the paused empty
   state, and the <640px bottom-sheet layout. Split out of notifications.css
   (already at the source line gate) rather than grown into it, matching how
   notification-groups.css and notification-items.css were already split off
   it for the same reason. The "Default" reset control now lives in
   Settings > Notifications instead — see settings-notifications.css. */

/* The master pill: the one thing in this header that must read as on/off at
   a glance, not just by its text. ON takes the accent fill everything else in
   this panel already uses for "live" (the badge, a pinned dot); OFF is a
   quiet outline — present, but clearly inert. It now only ever navigates to
   Settings (see notification-master.js) — reading the state and changing it
   are no longer the same gesture. */
.notification-master {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}

.notification-master-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
}

.notification-master.is-on {
  background: linear-gradient(135deg, #00a9bf, #0086ad);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 169, 191, 0.35);
}

.notification-master.is-on .notification-master-dot {
  background: #ffffff;
}

:root[data-alyssiun-atmosphere="neo"] .notification-master.is-on {
  background: linear-gradient(135deg, #00e5ff, #00b8d4);
  color: #03181d;
  box-shadow: 0 2px 10px rgba(0, 229, 255, 0.4);
}

.notification-master.is-off {
  background: none;
  border-color: var(--desktop-border);
  color: var(--desktop-muted);
}

.notification-master.is-off .notification-master-dot {
  background: var(--desktop-muted);
}

.notification-master.is-off:hover {
  border-color: var(--desktop-muted);
  color: var(--desktop-text);
}

/* Right side of the header: the global "Mark all read" and the close X sit
   together, pushed off from the master pill by this wrapper's own auto
   margin rather than by either button individually. */
.notification-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.notification-mark-all {
  padding: 6px 12px;
  border: 1px solid var(--desktop-border);
  border-radius: 999px;
  background: none;
  color: var(--desktop-muted);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.notification-mark-all:hover {
  border-color: var(--desktop-muted);
  color: var(--desktop-text);
}

.notification-mark-all:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Shown instead of the group list while the master switch is off — the
   "quiet empty state" the panel body renders in place of stale cards. */
.notification-paused {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 34px 20px;
  text-align: center;
}

.notification-paused-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

.notification-paused-body {
  margin: 0;
  color: var(--desktop-muted);
  font-size: 12px;
  line-height: 1.5;
  max-width: 240px;
}

.notification-paused-resume {
  margin-top: 4px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #00a9bf, #0086ad);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

:root[data-alyssiun-atmosphere="neo"] .notification-paused-resume {
  background: linear-gradient(135deg, #00e5ff, #00b8d4);
  color: #03181d;
}

/* A grab handle only a touch bottom sheet needs; hidden entirely above the
   mobile breakpoint. */
.notification-sheet-handle {
  display: none;
}

@media (max-width: 640px) {
  /* The dropdown becomes a centered card, not a bottom sheet glued to the
     edge: a sheet only ever grows as tall as the max-height it's given, so a
     card or two left it a thin sliver hugging the bottom of the screen with
     the rest of the viewport empty above it — barely enough room to read
     one notification, let alone several. A real height (not just a cap)
     plus centering via inset + auto margins gives it real room every time,
     content-light or not, and doesn't fight the drag-to-dismiss gesture
     below the way a `transform: translate(-50%, -50%)` centering trick
     would (that drag sets `transform` directly, which would otherwise wipe
     out the centering offset on every move). The oversized shadow behind it
     is a CSS-only backdrop — it dims the desktop so the card reads as the
     one thing to interact with, without an extra overlay element. */
  .notification-panel {
    position: fixed;
    inset: 0;
    margin: auto;
    width: calc(100% - 24px);
    max-width: 420px;
    height: min(82dvh, 720px);
    max-height: min(82dvh, 720px);
    border-radius: 18px;
    border-width: 1px;
    box-shadow: 0 0 0 100vmax rgba(10, 12, 16, 0.5), var(--desktop-shadow);
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .notification-panel.is-dragging {
    transition: none;
  }

  .notification-sheet-handle {
    display: flex;
    justify-content: center;
    flex: none;
    padding: 8px 0 2px;
    touch-action: none;
    cursor: grab;
  }

  .notification-sheet-handle::after {
    content: "";
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--desktop-border);
  }

  /* 44px minimum tap targets throughout, per platform guidance. */
  .notification-close {
    width: 44px;
    height: 44px;
  }

  .notification-close svg {
    width: 17px;
    height: 17px;
  }

  .notification-master,
  .notification-mark-all {
    min-height: 40px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .notification-master {
    padding-left: 10px;
    padding-right: 12px;
    font-size: 12.5px;
  }

  /* The close button's real 44px tap target (see above) has to come from
     somewhere in a row this tight: less padding around the header and its
     three controls, not a smaller "Mark all read" hit area or a wrapped
     header — a wider button that spills past the panel's own rounded
     corner is worse than a slightly snugger row. */
  .notification-panel-head {
    gap: 6px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .notification-header-actions {
    gap: 4px;
  }

  /* Two short lines ("Mark all" / "read") rather than one long one — there
     just isn't 320px of room for a full pill this size next to a
     44px-tall close button, and a button that wraps its own label is a far
     smaller compromise than one whose neighbor spills past the panel's own
     rounded corner. */
  .notification-mark-all {
    padding: 4px 9px;
    width: 62px;
    line-height: 1.25;
  }

  .notification-group-summary {
    min-height: 44px;
  }

  .notification-item,
  .notification-card {
    min-height: 44px;
  }

  /* The label stays the same size (see notification-items.css) — only the
     button's own tap target grows to the real 44px minimum. */
  .notification-read-toggle {
    width: 64px;
    min-height: 44px;
    font-size: 11.5px;
  }
}