/* TG-MOCKUP — мокап Telegram-чата в hero */

.tg-mockup {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 0 0 auto;
  background: linear-gradient(180deg, #17212B, #0E1621);
  border: 1px solid var(--border-bright);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow-lg), var(--glow-tg);
}

.tg-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: #17212B;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tg-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--grad-brand);
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 18px;
}

.tg-meta-name { color: #fff; font-weight: 600; font-size: 15px; display: block; }
.tg-meta-status { font-size: 12px; color: var(--accent-mint); }

.tg-body {
  padding: 20px;
  min-height: 440px;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(46, 166, 255, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(178, 75, 243, 0.06) 0%, transparent 40%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.msg {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(8px);
  animation: msg-in 420ms var(--ease-out) forwards;
}

.msg.bot { align-self: flex-start; background: #182533; color: #E8EEF3; border-bottom-left-radius: 6px; }
.msg.user { align-self: flex-end; background: #2B5278; color: #fff; border-bottom-right-radius: 6px; }
.msg-time { display: block; font-size: 10px; opacity: 0.5; margin-top: 2px; text-align: right; }
.msg.d1 { animation-delay: 100ms; }
.msg.d2 { animation-delay: 700ms; }
.msg.d3 { animation-delay: 1400ms; }
.msg.d4 { animation-delay: 2100ms; }
.msg.d5 { animation-delay: 2800ms; }

.msg-btn {
  display: block;
  padding: 10px 14px;
  margin-top: 6px;
  background: rgba(46, 166, 255, 0.14);
  color: var(--accent-tg);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur-fast);
}
.msg-btn:hover { background: rgba(46, 166, 255, 0.22); }

.msg-inline { margin-top: 8px; }

.msg-div {
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: -1px;
  font-size: 11px;
}

.tg-reply {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 10px 12px;
  background: #17212B;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.reply-btn {
  padding: 10px 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #E8EEF3;
  border-radius: 8px;
  font-size: 12px;
  text-align: center;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-fast);
}
.reply-btn:hover { background: rgba(255, 255, 255, 0.1); }

@media (max-width: 899.98px) {
  .tg-mockup { margin: 0 auto; }
}