/* Settings > Notifications: the app list and one app's detail page. Split
   out of wallpaper.css (already at the source line gate) rather than grown
   into it — matches how notification-groups.css split off the bell's own
   panel styling. */

.notif-quiet-times {
  display: flex;
  gap: 14px;
  margin: 10px 0 4px;
}

.notif-time-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--desktop-muted);
}

.notif-time-field input {
  padding: 6px 9px;
  border: 1px solid var(--desktop-border);
  border-radius: 8px;
  background: var(--desktop-surface);
  color: var(--desktop-text);
  font: inherit;
  font-size: 0.8rem;
}

.notif-app-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.notif-app-empty {
  padding: 10px 0;
  color: var(--desktop-muted);
  font-size: 0.78rem;
}

.notif-app-row {
  display: grid;
  grid-template-columns: 26px 1fr auto 14px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 8px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.notif-app-row:hover { background: var(--desktop-surface-strong); }

.notif-app-row .desktop-app-icon { width: 24px; height: 24px; }

.notif-app-row-text {
  overflow: hidden;
  font-size: 0.82rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notif-app-row-state {
  color: var(--desktop-muted);
  font-size: 0.74rem;
  white-space: nowrap;
}

.notif-app-row-chevron {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--desktop-muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- App detail page ------------------------------------------------------ */

.notif-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--desktop-muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.notif-back:hover { color: var(--desktop-text); }

.notif-back svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notif-detail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 0.98rem;
  font-weight: 750;
}

.notif-detail-head .desktop-app-icon { width: 30px; height: 30px; }

.notif-delivery {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.notif-delivery-option {
  padding: 7px 13px;
  border: 1px solid var(--desktop-border);
  border-radius: 999px;
  background: var(--desktop-surface);
  color: inherit;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 600;
}

.notif-delivery-option.is-active {
  background: var(--desktop-text);
  border-color: var(--desktop-text);
  color: var(--desktop-surface-strong);
}

.notif-app-row:focus-visible,
.notif-back:focus-visible,
.notif-delivery-option:focus-visible {
  outline: 2px solid var(--desktop-focus);
  outline-offset: 2px;
}

/* Scoped to this panel only — the General panel's own adjacent toggles
   (install app / ask ALY) keep their existing spacing untouched. */
[data-section-panel="notifications"] .settings-toggle + .settings-toggle { margin-top: 10px; }

/* A track-and-thumb switch instead of a bare checkbox — the same look
   language as the bell's own master toggle and Here's Notifications panel,
   so all three read as one system. Restyling the native checkbox in place
   (rather than swapping in a button) keeps every existing change-event
   listener working untouched — this is a paint change, not a markup one.
   Scoped to this panel only: General's own checkboxes (install app, ask ALY)
   keep their plain look. */
[data-section-panel="notifications"] .settings-toggle {
  justify-content: space-between;
}

[data-section-panel="notifications"] .settings-toggle input {
  order: 2;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 34px;
  height: 20px;
  flex: none;
  margin: 0;
  border-radius: 999px;
  background: var(--desktop-border);
  cursor: pointer;
  transition: background 150ms ease;
}

[data-section-panel="notifications"] .settings-toggle input::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform 150ms ease;
}

[data-section-panel="notifications"] .settings-toggle input:checked {
  background: linear-gradient(135deg, #00a9bf, #0086ad);
}

[data-section-panel="notifications"] .settings-toggle input:checked::before {
  transform: translateX(14px);
}

:root[data-alyssiun-atmosphere="neo"] [data-section-panel="notifications"] .settings-toggle input:checked {
  background: linear-gradient(135deg, #00e5ff, #00b8d4);
}

@media (max-width: 640px) {
  .notif-app-row { min-height: 44px; }
  [data-section-panel="notifications"] .settings-toggle { min-height: 44px; }
}