/*
 * Tips + Rain styles. Reuses the synthwave design tokens from styles.css (--brand, --violet, --surface,
 * --line, --sp-*, --r-*, --fs-*) -- NO new color literals beyond a couple of token-derived accents. The
 * tip/rain panel is built from the existing .card/.field/.row/button primitives; this file only adds the
 * tip-specific list + announcement chrome. a11y: focus-visible rings inherited from styles.css; all
 * motion is gated behind prefers-reduced-motion.
 */

/* ------------------------------ tips panel -------------------------------- */

.tips-balance {
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
  color: var(--violet);
}

.tips-guest {
  color: var(--muted);
  font-size: var(--fs-sm);
  padding: var(--sp-3) 0;
}

.tips-actions {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.tips-actions > * { flex: 1 1 220px; min-width: 0; }

.tips-actions .rain-action button {
  /* The rain CTA gets the neon gradient treatment to read as the "fun" action. */
  background: linear-gradient(92deg, var(--violet) 0%, var(--brand) 60%, var(--accent) 120%);
}

.tips-hint {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: var(--sp-1);
}

/* ------------------------------ history list ------------------------------ */

.tips-list {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  max-height: 340px;
  overflow-y: auto;
}

.tip-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.tip-item .tip-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  flex: 0 0 auto;
  color: var(--violet);
}
.tip-item.rain .tip-ic { color: var(--accent-text); }

.tip-item .tip-ic svg { width: 18px; height: 18px; }

.tip-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.tip-title {
  font-size: var(--fs-sm);
  color: var(--fg-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tip-amount {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.tip-amount.in  { color: var(--ok, #34d399); }
.tip-amount.out { color: var(--fg-dim); }

.tip-time {
  font-size: var(--fs-xs);
  color: var(--muted);
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.tips-empty {
  color: var(--muted);
  font-size: var(--fs-sm);
  padding: var(--sp-4) 0;
  text-align: center;
}

/* ---------------------- live chat announcement row ------------------------ */

/* A tip/rain announcement rendered inline in the chat feed (chat.js builds the <li>; we style it). */
.chat-msg.tip-announce {
  align-items: center;
  gap: var(--sp-2);
  background: var(--brand-soft);
  border-left: 3px solid var(--violet);
  border-radius: var(--r-sm);
  padding: 4px var(--sp-2);
}
.chat-msg.tip-announce.rain { border-left-color: var(--accent-text); }
.chat-msg.tip-announce .tip-ic {
  display: inline-flex;
  align-items: center;
  color: var(--violet);
}
.chat-msg.tip-announce.rain .tip-ic { color: var(--accent-text); }
.chat-msg.tip-announce .tip-ic svg { width: 14px; height: 14px; }

/* ------------------------------ a11y / motion ----------------------------- */

/* .hidden { display: none !important; } — provided by the shared styles/03-layout-forms.css (loaded first); not redefined here. */

/* New rows fade/slide in -- but only when motion is allowed. */
@media (prefers-reduced-motion: no-preference) {
  .tip-item.ti-new,
  .chat-msg.tip-announce {
    animation: tip-in var(--dur-2, .22s) var(--ease-out, ease) both;
  }
  @keyframes tip-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
  }
}