/**
 * The Telegram section of the landing page (#telegram).
 *
 * Sits on top of landing.css — the section, headings and reveal are shared, so
 * this file is only the phone, the conversation that plays inside it, and the
 * steps beside it.
 *
 * The animation is CSS keyframes started by a class the page adds when the
 * phone scrolls into view (js/telegram-page.js). No library, and nothing runs
 * until it is on screen: the audience is on Ethiopian mobile networks and a
 * sequence that has already finished before you scroll to it is wasted work.
 *
 * Every motion here is inside a prefers-reduced-motion guard at the bottom,
 * where the whole conversation simply renders complete and still.
 */

/* ---- the section ------------------------------------------------------------ */

.tgp .lp-center { margin-bottom: clamp(24px, 4vw, 44px); }

/* The headline's second line. Deliberately NOT .lp-gradient: landing.js
   replaces that span with the landing page's rotating nouns ("One feed",
   "One search"), which on this page emptied the line entirely. */
.tgp-gradient {
  background: linear-gradient(100deg, #229ed9 10%, #7fd3f5 40%, #229ed9 70%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: tgp-shimmer 6s linear infinite;
}
@keyframes tgp-shimmer { to { background-position: 220% 0; } }

@media (prefers-reduced-motion: reduce) {
  .tgp-gradient { animation: none; }
}

/* ---- the phone ------------------------------------------------------------- */

.tgp-phone {
  width: min(360px, 100%);
  border-radius: 30px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(244, 247, 252, 0.9));
  border: 1px solid var(--stage-border, rgba(15, 23, 42, 0.12));
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.18);
  justify-self: center;
}

.tgp-phone-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 22px 22px 8px 8px;
  background: linear-gradient(135deg, #2aabee, #229ed9);
  color: #fff;
}

.tgp-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  font-size: 17px;
}

.tgp-bot { font-size: 13.5px; font-weight: 800; }
.tgp-status { font-size: 11px; opacity: 0.85; }

.tgp-chat {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px 12px 16px;
  min-height: 430px;
  background:
    radial-gradient(420px 220px at 20% 0%, rgba(34, 158, 217, 0.10), transparent 70%),
    #eef3f8;
  border-radius: 8px 8px 22px 22px;
}

.tgp-day {
  align-self: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-tertiary, #64748b);
}

.tgp-msg {
  max-width: 86%;
  padding: 9px 12px;
  border-radius: 16px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-primary, #0f172a);
  background: #fff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
}

.tgp-msg-in { align-self: flex-start; border-bottom-left-radius: 5px; }
.tgp-msg-out {
  align-self: flex-end;
  border-bottom-right-radius: 5px;
  background: #d8f2c8;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

/* The alert itself, shaped like the message the bot really sends. */
.tgp-alert { width: 86%; }
.tgp-alert-top { font-size: 10.5px; font-weight: 800; color: #229ed9; text-transform: uppercase; letter-spacing: 0.04em; }
.tgp-alert-title { margin-top: 3px; font-size: 13px; font-weight: 800; line-height: 1.35; }
.tgp-alert-org { font-size: 11.5px; color: var(--text-tertiary, #64748b); }
.tgp-alert-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.tgp-alert-chips span {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(34, 158, 217, 0.12);
  color: #0b6f9c;
  font-size: 10.5px;
  font-weight: 700;
}
.tgp-alert-link { margin-top: 8px; font-size: 11.5px; font-weight: 700; color: #229ed9; }

.tgp-typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 11px 13px;
  border-radius: 16px 16px 16px 5px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
}
.tgp-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #94a3b8;
}

/* ---- the conversation playing ----------------------------------------------
   Each step waits its turn: the typing bubble appears, then is replaced by the
   alert it was "writing". Held at opacity 0 until the page says is-running, so
   the sequence starts when it is watched rather than at load. */

#tgp-chat .tgp-msg,
#tgp-chat .tgp-typing { opacity: 0; }

#tgp-chat.is-running .tgp-msg,
#tgp-chat.is-running .tgp-typing {
  animation: tgp-pop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

#tgp-chat.is-running [data-step="1"] { animation-delay: 0.2s; }
#tgp-chat.is-running [data-step="2"] { animation-delay: 1.1s; }
#tgp-chat.is-running [data-step="3"] { animation-delay: 2.4s; }
#tgp-chat.is-running [data-step="4"] { animation-delay: 3.6s; }
#tgp-chat.is-running [data-step="5"] { animation-delay: 4.5s; }

/* The typing bubble is the one thing that leaves again — the alert takes its
   place, the way it does in a real chat. */
#tgp-chat.is-running [data-step="2"] {
  animation: tgp-pop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 1.1s forwards,
             tgp-typing-out 0.35s ease-in 2.3s forwards;
}
#tgp-chat.is-running [data-step="2"] span {
  animation: tgp-blink 1.1s ease-in-out infinite;
}
#tgp-chat.is-running [data-step="2"] span:nth-child(2) { animation-delay: 0.16s; }
#tgp-chat.is-running [data-step="2"] span:nth-child(3) { animation-delay: 0.32s; }

@keyframes tgp-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes tgp-typing-out {
  to { opacity: 0; transform: translateY(-6px) scale(0.96); height: 0; padding: 0; margin: -4px 0; }
}
@keyframes tgp-blink {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50%      { opacity: 1; transform: translateY(-3px); }
}

/* ---- steps ------------------------------------------------------------------ */

.tgp-side { display: grid; gap: 16px; }

.tgp-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

.tgp-step {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px 18px;
  border-radius: var(--r-lg, 18px);
  background: var(--surface-solid, #fff);
  border: 1px solid var(--stage-border, rgba(15, 23, 42, 0.1));
}
.tgp-step h3 { margin: 0 0 4px; font-size: 15.5px; }
.tgp-step p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--text-secondary, #475569); }

.tgp-step-n {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2aabee, #229ed9);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
}

/* ---- the message, annotated -------------------------------------------------- */

.tgp-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 900px) {
  .tgp-split { grid-template-columns: 1fr; }
  .tgp-phone { margin: 0 auto; }
}

.tgp-list { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.tgp-list li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary, #475569);
}

.tgp-quiet {
  padding: 18px 20px;
  border-radius: var(--r-lg, 18px);
  background: var(--surface-solid, #fff);
  border: 1px solid var(--stage-border, rgba(15, 23, 42, 0.1));
}
.tgp-quiet h3 { margin: 0 0 6px; font-size: 17px; }
.tgp-quiet p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.65; color: var(--text-secondary, #475569); }
.tgp-quiet-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--stage-border, rgba(15, 23, 42, 0.08));
  font-size: 13px;
  color: var(--text-secondary, #475569);
}
.tgp-quiet-row span:first-child {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  color: #0b6f9c;
}

/* ---- commands ----------------------------------------------------------------- */

.tgp-cmds { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.tgp-cmd {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 14px 16px;
  border-radius: var(--r-md, 14px);
  background: var(--surface-solid, #fff);
  border: 1px solid var(--stage-border, rgba(15, 23, 42, 0.1));
  font-size: 13.5px;
  color: var(--text-secondary, #475569);
}
.tgp-cmd code {
  font-size: 13px;
  font-weight: 700;
  color: #0b6f9c;
  background: rgba(34, 158, 217, 0.1);
  padding: 2px 8px;
  border-radius: 8px;
}

/* ---- motion off ----------------------------------------------------------------
   The whole conversation, complete and still. The failure to avoid is content
   that stays invisible because its animation never runs. */

@media (prefers-reduced-motion: reduce) {
  .tgp-plane { animation: none; }
  #tgp-chat .tgp-msg,
  #tgp-chat .tgp-typing { opacity: 1; animation: none !important; }
  #tgp-chat .tgp-typing { display: none; }
}