/* alerts.css: the chapter alert bell, the notifications inbox in the account menu, and the profile alerts card */

/* ===== bell in the manga dialog ===== */

/* the slot sits inline with the other action buttons */
.alert_slot { display: inline-flex; }

/* bell button keeps the quiet ghost look until it is on */
.alert_bell { gap: var(--space_2); transition: background-color var(--duration_fast) var(--ease_hover), color var(--duration_fast) var(--ease_hover), border-color var(--duration_fast) var(--ease_hover); }

/* bell outline drawing */
.alert_bell_icon { fill: none; transition: transform var(--duration_base) var(--ease_out); }

/* on state: lavender wash, filled bell */
.alert_bell.is_on { background: var(--tint_lavender); border-color: var(--color_lavender); color: var(--color_lavender); }

/* filled bell when alerts are on */
.alert_bell.is_on .alert_bell_icon path:first-child { fill: currentColor; }

/* a small ring of the bell when it turns on */
.alert_bell.is_on .alert_bell_icon { animation: bell_ring 420ms var(--ease_out) 1; transform-origin: 50% 10%; }

/* the ring keyframes */
@keyframes bell_ring { 0% { transform: rotate(0); } 30% { transform: rotate(14deg); } 60% { transform: rotate(-10deg); } 100% { transform: rotate(0); } }

/* first use explainer under the dialog buttons */
.alert_explainer { margin-top: var(--space_3); padding: var(--space_4); background: var(--color_panel_raised); border-radius: var(--radius_md); box-shadow: 0 0 0 1px var(--tint_outline); max-width: 520px; animation: fade_up var(--duration_base) var(--ease_out) both; }

/* explainer text */
.alert_explainer p { margin: 0 0 var(--space_3); color: var(--color_paper); font-size: var(--text_md); line-height: var(--leading_body); }

/* explainer buttons in a row */
.alert_explainer_actions { display: flex; flex-wrap: wrap; gap: var(--space_2); }

/* the entrance for the explainer */
@keyframes fade_up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ===== account menu inbox ===== */

/* the avatar holds the unseen dot */
.avatar_btn { position: relative; }

/* lavender dot on the avatar corner when chapters are new */
.avatar_dot { position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--color_lavender); box-shadow: 0 0 0 2px var(--color_ink); }

/* hidden dot is gone */
.avatar_dot[hidden] { display: none; }

/* the inbox block at the top of the menu */
.menu_inbox { margin: 0 0 var(--space_2); padding-bottom: var(--space_2); box-shadow: 0 1px 0 var(--tint_outline); min-width: 280px; }

/* heading row with the count and mark all */
.inbox_head { display: flex; align-items: center; justify-content: space-between; gap: var(--space_2); padding: var(--space_1) var(--space_3); }

/* small heading text */
.inbox_heading { font-size: var(--text_sm); font-weight: 700; color: var(--color_paper); display: inline-flex; align-items: center; gap: var(--space_2); }

/* the unseen count pill */
.inbox_count { min-width: 20px; padding: 0 6px; border-radius: var(--radius_pill); background: var(--color_lavender); color: var(--color_on_accent); font-size: var(--text_xs); line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }

/* mark all seen is a small text button, not a full row */
.user_menu .inbox_mark_all { width: auto; min-height: 32px; padding: 0 var(--space_2); font-size: var(--text_sm); color: var(--color_lavender); }

/* list of releases */
.inbox_list { list-style: none; margin: 0; padding: 0; }

/* each release is a full width button with the cover and text */
.user_menu .inbox_item { display: flex; align-items: center; gap: var(--space_3); padding: var(--space_2) var(--space_3); }

/* small cover thumbnail */
.inbox_cover { width: 32px; height: 44px; object-fit: cover; border-radius: var(--radius_xs); background: var(--color_panel_raised); flex-shrink: 0; outline: 1px solid var(--tint_outline); outline-offset: -1px; }

/* title and chapter stacked */
.inbox_text { display: flex; flex-direction: column; min-width: 0; }

/* manga title on one line */
.inbox_title { font-size: var(--text_md); color: var(--color_paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }

/* chapter and time under the title */
.inbox_meta { font-size: var(--text_xs); color: var(--color_muted); }

/* unseen releases get a lavender marker on the left */
.inbox_item.is_unseen { box-shadow: inset 3px 0 0 var(--color_lavender); }

/* unseen titles are bold */
.inbox_item.is_unseen .inbox_title { font-weight: 700; }

/* empty inbox text */
.user_menu .inbox_empty { margin: var(--space_1) var(--space_3) var(--space_2); font-size: var(--text_sm); color: var(--color_muted); }

/* ===== profile alerts card ===== */

/* device notification row */
.push_row { display: flex; align-items: center; justify-content: space-between; gap: var(--space_4); margin: var(--space_4) 0; padding: var(--space_3) var(--space_4); background: var(--color_panel_raised); border-radius: var(--radius_md); }

/* row title */
.push_row_title { margin: 0; font-weight: 700; color: var(--color_paper); }

/* row note */
.push_row_note { margin-top: var(--space_1); }

/* switch track */
.push_switch { position: relative; flex-shrink: 0; width: 52px; height: 30px; border-radius: var(--radius_pill); border: 0; background: var(--color_rule); cursor: pointer; transition: background-color var(--duration_base) var(--ease_out); }

/* bigger invisible hit area */
.push_switch::before { content: ""; position: absolute; inset: -7px; }

/* the knob */
.push_switch_knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--color_paper); box-shadow: var(--shadow_sm); transition: transform var(--duration_base) var(--ease_out); }

/* on state track */
.push_switch[aria-checked="true"] { background: var(--color_lavender); }

/* on state knob slides right */
.push_switch[aria-checked="true"] .push_switch_knob { transform: translateX(22px); }

/* switch that cannot be used */
.push_switch:disabled { opacity: 0.45; cursor: not-allowed; }

/* list of followed manga */
.alert_list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space_2); }

/* one followed manga */
.alert_row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: var(--space_3); padding: var(--space_2) var(--space_3); border-radius: var(--radius_sm); background: var(--color_panel_raised); }

/* its cover */
.alert_row_cover { width: 36px; height: 50px; object-fit: cover; border-radius: var(--radius_xs); background: var(--color_panel_high); outline: 1px solid var(--tint_outline); outline-offset: -1px; }

/* its title */
.alert_row_title { color: var(--color_paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* reduced motion turns off the bell ring, the explainer slide and the switch slides */
@media (prefers-reduced-motion: reduce) {
  /* no ring or slide */
  .alert_bell.is_on .alert_bell_icon, .alert_explainer { animation: none; }
  /* no sliding */
  .push_switch, .push_switch_knob, .alert_bell { transition: none; }
}