/* The Telegram connect offer.
 *
 * Structurally the push-permission card (.pp-card) with a different accent:
 * they are the two out-of-app channels, they sit in the same place on the home
 * page, and making them look like siblings is the point. Only the colour and
 * the fallback row are new.
 */

.tg-card {
  border-color: var(--ebid-telegram);
  background: rgba(34, 158, 217, 0.1);
}

.tg-icon {
  color: var(--ebid-telegram);
  display: inline-flex;
  align-items: center;
}

.tg-icon svg { width: 22px; height: 22px; }

/* Shown only when the tg:// probe found nothing to open the link. Always
   carries the plain t.me link too, because that probe is a heuristic and a
   wrong guess must never leave somebody with no way through. */
.tg-fallback {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  font-size: 12.5px;
}

.tg-fallback a {
  color: var(--ebid-telegram);
  font-weight: 700;
  text-decoration: underline;
}

/* The settings row, where connecting is a permanent affordance rather than a
   dismissible offer. */
.tg-settings-actions { display: flex; gap: 8px; align-items: center; }
.tg-settings-actions .btn { padding: 9px 14px; font-size: 12.5px; }

.tg-fallback { flex-direction: column; align-items: flex-start; }
.tg-fallback-links { display: flex; flex-wrap: wrap; gap: 12px; }

/* The copyable /start command. It is the one path that works in every Telegram
   client, so it must stay readable and selectable even if the copy button is
   blocked (clipboard access needs a secure origin). */
.tg-paste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.9;
}

.tg-paste code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--surface-soft, rgba(0, 0, 0, 0.06));
  border: 1px solid var(--stage-border, rgba(0, 0, 0, 0.12));
  user-select: all;
  word-break: break-all;
}

.tg-paste .btn { padding: 5px 11px; font-size: 11.5px; }