/* 알림 for booth owners (activity.js) and hearts over liked booths (hearts.js). */
:root { --heart: #E8467C; --heart-soft: #FDE7EF; --new-bg: #F3F1FE; }

/* The 알림 button: a heart and a count, like any app's notifications. */
#btn-alerts svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
#btn-alerts.has svg { color: var(--heart); }
#alerts-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--heart); color: #fff; font-family: var(--display); font-size: 12px; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; margin-right: -4px; }
#btn-alerts.has { animation: al-pop .32s ease-out; }
@keyframes al-pop { 40% { transform: scale(1.08); } }

/* The like count where visitors walk up to a booth. */
#wu-likes { display: inline-flex; align-items: center; gap: 3px; flex: none; font-size: 12px; color: var(--heart); }
#wu-likes svg { width: 13px; height: 13px; }
#wu-likes b { font-family: var(--display); font-weight: normal; font-variant-numeric: tabular-nums; }

/* Live notices: small, at most two, never in the way of walking. */
#act-toasts { position: fixed; left: 50%; transform: translateX(-50%); top: calc(max(12px, env(safe-area-inset-top)) + 62px); display: grid; gap: 6px; justify-items: center; z-index: 5; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.act-toast { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 6px; border: 0; border-radius: var(--r-pill); background: var(--surface); color: var(--ink); box-shadow: var(--lift); font-family: var(--display); font-size: 14px; animation: al-in .22s ease-out; transition: opacity .2s, transform .2s; }
.act-toast i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--mine); color: var(--accent); }
.act-toast i svg { width: 15px; height: 15px; }
.act-toast.like i { background: var(--heart-soft); color: var(--heart); }
.act-toast.out { opacity: 0; transform: translateY(-6px); }
@keyframes al-in { from { opacity: 0; transform: translateY(-8px) scale(.96); } }
/* Phones: under 내 부스 on the left, clear of the buttons down the right side. */
@media (max-width: 640px) { #act-toasts { left: 14px; transform: none; justify-items: start; top: calc(max(14px, env(safe-area-inset-top)) + 56px); max-width: calc(100vw - 150px); } .act-toast { text-align: left; line-height: 1.3; padding-top: 5px; padding-bottom: 5px; } }

/* Coming back: one warm card with what happened while the owner was away. */
#act-return { position: fixed; left: 12px; right: 12px; margin: 0 auto; max-width: 420px; top: calc(max(12px, env(safe-area-inset-top)) + 62px); z-index: 6; display: flex; align-items: center; gap: 8px; background: var(--surface); border-radius: var(--r-l); box-shadow: var(--lift); padding: 12px 6px 12px 16px; animation: al-in .26s ease-out; border-left: 4px solid var(--heart); }
#ar-body { flex: 1; min-width: 0; display: grid; gap: 1px; }
#ar-body small { font-size: 12px; color: var(--muted); }
#ar-counts { font-family: var(--display); font-size: 17px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
#ar-line { font-size: 13px; color: var(--muted); }
#ar-open { flex: none; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--r-m); background: var(--primary); color: var(--on-primary); font-family: var(--display); font-size: 14px; }
#ar-x { flex: none; width: 40px; height: 44px; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; }
@media (max-width: 640px) { #act-return { top: calc(max(12px, env(safe-area-inset-top)) + 110px); } }
body.modal #act-return, body.modal #act-toasts { visibility: hidden; }

/* The 알림 sheet */
#alerts .mini-sheet { gap: 10px; min-height: min(420px, calc(100dvh - 40px)); align-content: start; }
/* Today's numbers: a plain grey line of facts (it is not a row of tabs). */
#alerts-today { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; padding: 0 2px; font-size: 13px; color: var(--muted); }
#alerts-today[hidden] { display: none; }
#alerts-today span { white-space: nowrap; }
#alerts-today span + span::before { content: "·"; margin-right: 6px; }
#alerts-today .at-label { margin-right: 2px; }
#alerts-today .at-label + span::before { content: none; }
#alerts-today b { color: var(--muted); font-weight: normal; font-variant-numeric: tabular-nums; margin-left: 2px; }
#alerts-list { display: grid; gap: 6px; }
.al-day { margin: 8px 2px 0; font-family: var(--display); font-size: 13px; font-weight: normal; color: var(--muted); }
.al-day:first-child { margin-top: 0; }
/* Visits and likes are facts: plain lines, no card, no button look. New ones are in bold. */
.al-row { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 10px; padding: 4px 6px; border: 0; border-radius: 0; background: transparent; text-align: left; color: var(--muted); font-size: 14px; line-height: 1.4; min-height: 36px; width: 100%; }
.al-row i { width: 24px; height: 24px; display: grid; place-items: center; background: transparent; color: var(--muted); }
.al-row i svg { width: 16px; height: 16px; }
.al-row.like i { color: var(--heart); }
.al-row small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.al-row.new { color: var(--ink); }
.al-row.new .al-text { font-family: var(--display); }
/* Rows that open something (a memo conversation, or the inbox) look like it: a filled row with a › at the end. */
button.al-row, .al-memo { display: grid; align-items: center; gap: 8px; min-height: 52px; padding: 8px 10px 8px 12px; border: 0; border-radius: var(--r-m); background: var(--sunken); color: var(--ink); text-align: left; font-size: 14px; width: 100%; cursor: pointer; }
button.al-row { grid-template-columns: 24px 1fr auto 12px; }
button.al-row i { color: var(--ink); }
button.al-row b { font-family: var(--display); font-weight: normal; color: var(--accent); }
button.al-row::after, .al-memo::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-top: 2px solid var(--muted); transform: rotate(45deg); justify-self: center; }
button.al-row:active, .al-memo:active { filter: brightness(.95); }
/* A memo conversation: who, what they said, when; a dot while unread. */
.al-memo { grid-template-columns: 8px minmax(0, 1fr) auto 12px; }
.al-memo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.al-memo.unread::before { background: var(--coral, #FF7A5C); }
.al-memo-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-memo-text b { font-family: var(--display); font-weight: normal; }
.al-memo-text span { color: var(--muted); }
.al-memo small { font-size: 12px; color: var(--muted); white-space: nowrap; }
#alerts-more { width: 100%; }
#alerts-empty { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 18px 8px 6px; }
#alerts-empty[hidden] { display: none; }
#alerts-empty > i { width: 56px; height: 56px; border-radius: 50%; background: var(--heart-soft); color: var(--heart); display: grid; place-items: center; margin-bottom: 4px; }
#alerts-empty > i svg { width: 28px; height: 28px; }
#alerts-empty p { margin: 0; font-size: 16px; }
#alerts-empty p b { font-family: var(--display); font-weight: normal; }
#alerts-empty small { font-size: 13px; color: var(--muted); }
#alerts-share { margin-top: 10px; min-width: 180px; }
#alerts-sharebox { width: 100%; margin-top: 4px; }

/* Hearts floating up from a liked booth */
#hearts { position: fixed; inset: 0; pointer-events: none; z-index: 7; overflow: hidden; }
.heart-burst { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.heart-burst i { position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; opacity: 0; animation: heart-up 1.6s cubic-bezier(.2, .7, .3, 1) forwards; filter: drop-shadow(0 1px 1px rgba(60, 46, 34, .18)); }
.heart-burst i svg { width: 100%; height: 100%; display: block; }
@keyframes heart-up {
  0% { opacity: 0; transform: translate(0, 0) scale(.3); }
  14% { opacity: 1; transform: translate(calc(var(--dx) * .2), -14px) scale(var(--s)); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), -120px) scale(calc(var(--s) * .9)); }
}
@media (prefers-reduced-motion: reduce) {
  .heart-burst i { animation: heart-still 1.2s ease-out forwards; }
  .act-toast, #act-return, #btn-alerts.has { animation: none; }
}
@keyframes heart-still { 0%, 100% { opacity: 0; } 20%, 70% { opacity: 1; transform: translate(var(--dx), -20px) scale(var(--s)); } }