/*
 * Telegram alerts UI — shared across StrikeRadar (frontend/index.html)
 * and LayoffRadar (frontend/layoff-radar/index.html). Loaded by both
 * pages so the tiered card / sign-in hero / reminder pill render the
 * same on both surfaces and can't drift apart.
 *
 * Selectors here are paired with the markup emitted by
 * frontend/js/telegram.js. If you rename a class on one side, rename
 * it on the other.
 *
 * Theme variables (--card, --text-primary, etc.) come from each page's
 * own stylesheet; this file deliberately stays palette-neutral so a
 * future radar with a different theme picks up its own --card etc.
 * without overrides here.
 */

/* Telegram connection card (visible only when signed in) */
.tg-card { background: var(--card); border-radius: 12px; padding: 14px 16px; margin: 12px 0; border: 1px solid rgba(56, 189, 248, 0.12); }
.tg-card-inner { display: flex; align-items: center; gap: 14px; }
.tg-icon { width: 40px; height: 40px; min-width: 40px; border-radius: 10px; background: rgba(56, 189, 248, 0.15); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.tg-icon-active { background: rgba(34, 197, 94, 0.18); color: #22c55e; font-weight: 700; }
.tg-info { flex: 1; min-width: 0; }
.tg-title { font-size: 13px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.tg-detail { font-size: 11px; color: var(--text-secondary); margin-top: 3px; line-height: 1.4; }
.tg-pill { display: inline-block; padding: 2px 8px; border-radius: 10px; background: rgba(34, 197, 94, 0.15); color: #22c55e; font-size: 10px; font-weight: 600; letter-spacing: 0.3px; }
.tg-action { padding: 8px 14px; border: none; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; transition: opacity 0.15s; white-space: nowrap; font-family: inherit; }
.tg-action:hover { opacity: 0.9; }
.tg-connect { background: #38bdf8; color: #0a0a0f; }
.tg-disconnect { background: transparent; color: var(--text-secondary); border: 1px solid var(--card-elevated); }
.tg-disconnect:hover { color: var(--text-primary); border-color: rgba(255, 255, 255, 0.2); }

/*
 * Compact footer pill: shown instead of the prominent .tg-card once the
 * subscription is older than the grace period (see telegram.js). Sits
 * above the footer-links row, gives a quiet reminder + disconnect link.
 */
.tg-footer-pill { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 0 14px; font-size: 11px; color: var(--text-secondary); }
.tg-footer-pill-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: rgba(34, 197, 94, 0.18); color: #22c55e; font-size: 9px; font-weight: 700; }
.tg-footer-pill-text { color: var(--text-secondary); }
.tg-footer-pill-action { color: var(--text-secondary); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.2); cursor: pointer; }
.tg-footer-pill-action:hover { color: var(--text-primary); text-decoration-color: rgba(255, 255, 255, 0.5); }

/*
 * Sign-in hero (logged-out only). Two-line layout, subtle blue gradient
 * tint, dark themed sign-in CTA. Sits above the donate banner.
 */
.tg-hero { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--card); border: 1px solid rgba(56, 189, 248, 0.30); border-radius: 12px; margin: 12px 0 16px; background-image: linear-gradient(180deg, rgba(56, 189, 248, 0.06) 0%, rgba(56, 189, 248, 0) 100%); }
.tg-hero-icon { width: 38px; height: 38px; min-width: 38px; border-radius: 10px; background: rgba(56, 189, 248, 0.18); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.tg-hero-text { flex: 1; }
.tg-hero-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.tg-hero-sub { font-size: 11.5px; color: var(--text-secondary); margin-top: 3px; line-height: 1.4; }
.tg-hero-cta { display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--card-elevated); border: 1px solid rgba(56, 189, 248, 0.35); border-radius: 8px; color: var(--text-primary); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; transition: background 0.15s, border-color 0.15s; }
.tg-hero-cta:hover { background: rgba(56, 189, 248, 0.12); border-color: rgba(56, 189, 248, 0.55); }
.tg-hero-cta-icon { width: 14px; height: 14px; }

/* Tiered-preview hero variant. Stacks vertically and slots the 40/50/60
   tier list (reusing .tg-card-tiered-tier* styles from the post-sign-in
   card) between the header and the CTA. */
.tg-hero.tg-hero-tiered { flex-direction: column; align-items: stretch; gap: 10px; }
.tg-hero-tiered-head { display: flex; align-items: center; gap: 14px; }
.tg-hero-cta-block { width: 100%; justify-content: center; padding: 10px 14px; }

/* In-app browser variant. Same vertical stack as tiered, but with a
   prominent "primary" CTA + a copy-link fallback below. Used when
   Google OAuth is blocked (FB/IG/etc. webviews). */
.tg-hero.tg-hero-inapp { flex-direction: column; align-items: stretch; gap: 10px; }
.tg-hero-cta-primary { background: #38bdf8; color: #0a0a0f; border-color: #38bdf8; font-size: 13px; padding: 12px 14px; }
.tg-hero-cta-primary:hover { background: #7dd3fc; border-color: #7dd3fc; }
.tg-hero-inapp-fallback { font-size: 11px; color: var(--text-secondary); text-align: center; line-height: 1.4; }
.tg-hero-inapp-copy { background: none; border: none; padding: 0; color: #38bdf8; font-family: inherit; font-size: 11px; cursor: pointer; text-decoration: underline; }
.tg-hero-inapp-copy:hover { color: #7dd3fc; }

/*
 * Connect-with-tiers card. Larger variant of .tg-card used when the user
 * is signed in but not connected — lists the 3 alert thresholds so they
 * see what they're signing up for, with a × dismiss button to hide it
 * in favor of the footer reminder pill.
 */
.tg-card-tiered { position: relative; background: var(--card); border-radius: 12px; padding: 14px 16px; margin: 12px 0; border: 1px solid rgba(56, 189, 248, 0.12); }
.tg-card-tiered-dismiss { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border: none; background: transparent; color: var(--text-muted); font-size: 16px; line-height: 1; cursor: pointer; border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; padding: 0; }
.tg-card-tiered-dismiss:hover { background: var(--card-elevated); color: var(--text-primary); }
.tg-card-tiered-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding-right: 24px; }
.tg-card-tiered-head .tg-icon { width: 36px; height: 36px; min-width: 36px; border-radius: 9px; background: rgba(56, 189, 248, 0.15); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.tg-card-tiered-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.tg-card-tiered-sub { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.tg-card-tiered-tiers { list-style: none; padding: 8px 0 12px; margin: 0; display: flex; flex-direction: column; gap: 5px; border-top: 1px solid var(--card-elevated); }
.tg-card-tiered-tier { display: flex; align-items: center; gap: 10px; font-size: 11.5px; }
.tg-card-tiered-tier-emoji { font-size: 13px; width: 16px; text-align: center; }
.tg-card-tiered-tier-pct { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--text-primary); min-width: 36px; }
.tg-card-tiered-tier-label { color: var(--text-secondary); }
.tg-card-tiered-cta { display: block; width: 100%; padding: 9px; background: #38bdf8; color: #0a0a0f; border: none; border-radius: 8px; font-weight: 600; font-size: 12px; cursor: pointer; font-family: inherit; transition: opacity 0.15s; }
.tg-card-tiered-cta:hover { opacity: 0.92; }

/*
 * Reminder pill — shown after the user dismisses the connect card.
 * Reuses the same footer slot as .tg-footer-pill (only one is visible
 * at a time). Blue dot signals "available, not yet on".
 */
.tg-reminder-pill { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 0 14px; font-size: 11px; color: var(--text-secondary); }
.tg-reminder-pill-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: rgba(56, 189, 248, 0.18); color: #38bdf8; font-size: 9px; }
.tg-reminder-pill-text { color: var(--text-secondary); }
.tg-reminder-pill-action { color: var(--text-secondary); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.2); cursor: pointer; }
.tg-reminder-pill-action:hover { color: var(--text-primary); text-decoration-color: rgba(255, 255, 255, 0.5); }