/* FLUXBOT chat app: phone alerts — Settings → Notifications (#alertsPane). Owner: E5. Prefix: .alerts-*
   Dark + light themes through the style.css tokens only; no motion beyond the shared spinner (which style.css already
   stops under prefers-reduced-motion); works from 360 px up. */

#alertsPane .alerts-loading { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--dim); padding: 6px 0; }

/* the status card */
.alerts-card {
  display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; margin-top: 8px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
}
.alerts-ico {
  width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.alerts-ico svg { width: 20px; height: 20px; }
.alerts-card[data-state="on"] .alerts-ico { background: rgba(74, 222, 128, 0.14); color: var(--ok); }
.alerts-card[data-state="blocked"] .alerts-ico,
.alerts-card[data-state="unsupported"] .alerts-ico,
.alerts-card[data-state="serveroff"] .alerts-ico { background: var(--surface-2); color: var(--muted); }
.alerts-card-body { flex: 1; min-width: 0; }
.alerts-line { font-size: 14px; line-height: 1.5; color: var(--text); margin: 0; overflow-wrap: anywhere; }
.alerts-card[data-state="on"] .alerts-line { font-weight: 600; }
.alerts-steps { margin: 8px 0 0; padding-left: 20px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.alerts-steps li + li { margin-top: 2px; }
.alerts-steps b { color: var(--text); font-weight: 600; }
.alerts-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.alerts-acts .btn[aria-busy="true"] { cursor: progress; }
.alerts-acts .btn:disabled { opacity: .7; }
.alerts-go { height: 40px; }
.alerts-ghost { color: var(--muted); border: 1px solid transparent; }
.alerts-ghost:hover { background: var(--hover); color: var(--text); }
.alerts-err { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--danger); overflow-wrap: anywhere; }
.alerts-err[hidden] { display: none; }

/* what to alert me about */
.alerts-prefs .hint { margin-bottom: 4px; }
.alerts-pref { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.alerts-pref:last-child { border-bottom: 0; padding-bottom: 0; }
.alerts-pref-text { min-width: 0; }
.alerts-pref-label { display: block; font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer; }
.alerts-pref-hint { font-size: 12.5px; color: var(--dim); line-height: 1.45; margin-top: 1px; }

/* devices getting alerts (the look of "Your devices") */
.alerts-dev { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.alerts-dev:last-child { border-bottom: 0; }
.alerts-dev-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--surface); color: var(--muted); }
.alerts-dev.current .alerts-dev-ico { background: var(--accent-soft); color: var(--accent); }
.alerts-dev-ico svg { width: 18px; height: 18px; }
.alerts-dev-info { flex: 1; min-width: 0; }
.alerts-dev-name { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere; }
.alerts-dev-sub { font-size: 12.5px; color: var(--dim); overflow-wrap: anywhere; }

.alerts-foot { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.alerts-foot-ico { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.alerts-foot-ios { margin-top: 6px; padding-left: 23px; }

/* phones: the card stacks, buttons go full width */
@media (max-width: 480px) {
  .alerts-card { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; }
  .alerts-ico { align-self: flex-start; }
  .alerts-acts { flex-direction: column; align-items: stretch; }
  .alerts-acts .btn { width: 100%; height: 42px; }
  .alerts-dev { flex-wrap: wrap; }
  .alerts-dev .btn { margin-left: 48px; }
}
@media (forced-colors: active) {
  .alerts-card, .alerts-ico, .alerts-dev-ico { border: 1px solid CanvasText; }
}

/* ---------- the card next to the composer: "Get alerts on your iPhone" / "Turn on notifications" ----------
   #alertsAskMount is the first child of the composer's .dock (position: relative). It only appears on the empty start
   screen (alerts.js closes it as soon as a chat has messages, so it never covers a conversation) and floats above the
   composer, or below it when there's more room, so nothing moves when the card comes or goes. It sits inside .app,
   whose padding already keeps it clear of the notch and rounded corners (safe-area insets), and under every menu,
   modal and toast. */
.alerts-ask-mount { position: absolute; left: 0; right: 0; bottom: 100%; z-index: 6; pointer-events: none; }
.alerts-ask-mount:not(:empty) { padding: 0 24px 10px; }
.alerts-ask-mount[hidden] { display: none; }
/* the empty start screen, when there's more room under the composer (alerts.js sets `top`) */
.alerts-ask-mount[data-at="below"] { bottom: auto; }
.alerts-ask-mount[data-at="below"]:not(:empty) { padding-bottom: 0; }
/* the "scroll to bottom" arrow stays above the card (alerts.js keeps --alerts-ask-h = the card's height) */
.dock > .to-bottom { top: calc(-52px - var(--alerts-ask-h, 0px)); }

.alerts-ask {
  pointer-events: auto; position: relative; max-width: 768px; margin: 0 auto; padding: 16px 16px 14px; border-radius: 22px;
  display: flex; flex-direction: column; overflow: hidden; /* alerts.js may cap its height: then only the body scrolls */
  color: var(--text); border: 1px solid transparent;
  /* glass over a slightly firmer base, so big text behind it (the start screen's greeting) can't show through */
  --alerts-ask-base: rgba(3, 6, 15, 0.55);
  background: linear-gradient(var(--glass-strong), var(--glass-strong)) padding-box, linear-gradient(var(--alerts-ask-base), var(--alerts-ask-base)) padding-box, var(--neon) border-box;
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 50px -22px rgba(0, 3, 12, 0.9), 0 0 36px -16px rgba(30, 144, 255, 0.6);
}
[data-theme="light"] .alerts-ask { --alerts-ask-base: rgba(245, 248, 253, 0.6); }
[data-theme="light"] .alerts-ask { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 16px 40px -20px rgba(8, 30, 80, 0.4), 0 0 28px -16px rgba(11, 102, 245, 0.5); }
.alerts-ask-head { display: flex; gap: 12px; align-items: flex-start; flex: none; }
.alerts-ask-body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.alerts-ask-body.more { -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent); }
/* short screens (alerts.js adds .tight when the card doesn't fit): the three steps side by side, the "why" line and
   the per-step hints give way to one tip line */
.alerts-ask-tip { display: none; }
.alerts-ask[data-kind="ios"].tight .alerts-ask-line { display: none; }
.alerts-ask.tight .alerts-ask-head { align-items: center; }
.alerts-ask.tight .alerts-ask-ico { width: 34px; height: 34px; border-radius: 9px; }
.alerts-ask.tight .alerts-ask-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 9px; }
.alerts-ask.tight .alerts-ask-step { flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 8px 6px; }
.alerts-ask.tight .alerts-ask-art { width: 32px; height: 32px; border-radius: 9px; }
.alerts-ask.tight .alerts-ask-art svg { width: 20px; height: 20px; }
.alerts-ask.tight .alerts-ask-do { align-items: center; }
.alerts-ask.tight .alerts-ask-what { font-size: 12.5px; line-height: 1.3; }
.alerts-ask.tight .alerts-ask-hint { display: none; }
.alerts-ask.tight .alerts-ask-tip { display: block; margin: 6px 2px 0; font-size: 12px; line-height: 1.4; color: var(--dim); }
.alerts-ask.tight .alerts-ask-acts { margin-top: 10px; }
.alerts-ask-ico {
  width: 44px; height: 44px; flex: none; border-radius: 12px; overflow: hidden; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 1px var(--border), 0 6px 18px -8px rgba(30, 144, 255, 0.7);
}
.alerts-ask-ico img { width: 100%; height: 100%; display: block; }
.alerts-ask-ico svg { width: 22px; height: 22px; }
.alerts-ask[data-kind="done"] .alerts-ask-ico { background: rgba(74, 222, 128, 0.14); color: var(--ok); box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.25); }
.alerts-ask-text { flex: 1; min-width: 0; }
.alerts-ask-title { margin: 1px 0 0; font-size: 15.5px; font-weight: 650; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; }
.alerts-ask-line { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }

/* the three Add-to-Home-Screen steps, each with a picture of what to tap */
.alerts-ask-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; counter-reset: alertsask; }
.alerts-ask-step {
  counter-increment: alertsask; display: flex; align-items: center; gap: 14px; padding: 9px 12px 9px 14px;
  border-radius: 14px; background: var(--hover); border: 1px solid var(--border);
}
.alerts-ask-art {
  position: relative; width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center;
  background: var(--surface-2); color: var(--accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.alerts-ask-art svg { width: 24px; height: 24px; }
.alerts-ask-art img { width: 100%; height: 100%; border-radius: 10px; display: block; }
.alerts-ask-art::before {
  content: counter(alertsask); position: absolute; top: -6px; left: -7px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 700; line-height: 1; color: #fff; background: var(--grad);
  box-shadow: 0 0 0 2px var(--bg);
}
.alerts-ask-do { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.alerts-ask-what { font-size: 14px; line-height: 1.35; color: var(--text); overflow-wrap: anywhere; }
/* "Step 1 of 3:" for screen readers only (the number on the picture is drawn by CSS and hidden from them) */
.alerts-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.alerts-ask-step, .alerts-ask-what { position: relative; }
.alerts-ask-what b { font-weight: 650; }
.alerts-ask-hint { font-size: 12px; line-height: 1.4; color: var(--dim); }

.alerts-ask-err { margin: 10px 0 0; }
.alerts-ask-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 14px; flex: none; }
.alerts-ask-acts .btn { height: 42px; min-width: 112px; padding: 0 18px; }
.alerts-ask-acts .btn:disabled { opacity: .8; }
.alerts-ask-acts .btn[aria-busy="true"] { cursor: progress; }
.alerts-ask .btn-primary .spinner { border-color: rgba(255, 255, 255, 0.35); border-top-color: #fff; }
.alerts-ask-ghost { color: var(--muted); border: 1px solid var(--border-strong); background: transparent; }
.alerts-ask-ghost:hover { background: var(--hover); color: var(--text); }

/* comes up from the composer; none of it with reduced motion or "Starfield & animations" off */
@media (prefers-reduced-motion: no-preference) {
  body:not(.fx-off) .alerts-ask.in { animation: alertsAskIn .34s cubic-bezier(.2, .8, .2, 1) both; }
  body:not(.fx-off) .alerts-ask.out { animation: alertsAskOut .18s ease-in forwards; }
}
@keyframes alertsAskIn { from { opacity: 0; transform: translateY(12px) scale(.985); } }
@keyframes alertsAskOut { to { opacity: 0; transform: translateY(8px); } }

@media (max-width: 768px) {
  .alerts-ask-mount:not(:empty) { padding: 0 12px 8px; }
  .alerts-ask-mount[data-at="below"]:not(:empty) { padding-bottom: 0; }
  .alerts-ask { padding: 13px 13px 12px; border-radius: 20px; }
  .alerts-ask-ico { width: 40px; height: 40px; border-radius: 11px; }
  .alerts-ask-title { font-size: 15px; }
  .alerts-ask-line { font-size: 13px; margin-top: 2px; }
  .alerts-ask-steps { margin-top: 11px; gap: 6px; }
  .alerts-ask-step { gap: 12px; padding: 7px 10px 7px 12px; }
  .alerts-ask-art { width: 36px; height: 36px; border-radius: 10px; }
  .alerts-ask-art svg { width: 22px; height: 22px; }
  .alerts-ask-art img { border-radius: 9px; }
  .alerts-ask-what { font-size: 13.5px; }
  .alerts-ask-acts { margin-top: 12px; }
  .alerts-ask-acts .btn { height: 40px; }
}
@media (max-width: 480px) {
  .alerts-ask-acts .btn { flex: 1 1 0; min-width: 0; }
}
@media (forced-colors: active) {
  .alerts-ask { border: 1px solid CanvasText; }
  .alerts-ask-art, .alerts-ask-ico { border: 1px solid CanvasText; }
}