/* public/src/components/telegram-bot-card/telegram-bot-card.css */
.tg-bot-card {
  --tg-blue: #24A1DE;
  --tg-blue-deep: #0088cc;
  position: relative;
  direction: rtl;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  max-width: 560px;
  margin-inline: auto;
  box-sizing: border-box;
  background: var(--card-bg, rgba(255, 255, 255, 0.75));
  border: 1px solid rgba(36, 161, 222, 0.25);
  border-radius: var(--radius-2xl, 24px);
  box-shadow: 0 12px 36px -8px rgba(36, 161, 222, 0.15), 0 4px 16px rgba(0, 0, 0, 0.05);
  -webkit-backdrop-filter: var(--glass-blur, blur(16px));
  backdrop-filter: var(--glass-blur, blur(16px));
  overflow: hidden;
  color: var(--text-color, inherit);
  transition: transform var(--transition-base, 0.25s ease), box-shadow var(--transition-base, 0.25s ease), border-color var(--transition-base, 0.25s ease);
}

[data-theme="dark"] .tg-bot-card,
[data-theme="dark-slate"] .tg-bot-card {
  background: rgba(18, 26, 38, 0.85);
  border-color: rgba(36, 161, 222, 0.35);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.5), 0 0 30px rgba(36, 161, 222, 0.12);
}

.tg-bot-card:hover {
  
  border-color: rgba(36, 161, 222, 0.5);
}

.tg-bot-card>*:not(.tg-bot-glow) {
  position: relative;
  z-index: 1;
}

.tg-bot-glow {
  position: absolute;
  inset: -40% -20% auto auto;
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(36, 161, 222, 0.28), transparent 65%);
  pointer-events: none;
  z-index: 0;
  filter: blur(10px);
}

.tg-bot-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tg-bot-avatar-wrap {
  position: relative;
  flex: none;
}

.tg-bot-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: contain;
  background: rgba(36, 161, 222, 0.12);
  padding: 4px;
  box-sizing: border-box;
}

.tg-bot-badge-icon {
  position: absolute;
  bottom: -2px;
  inset-inline-end: -4px;
  display: flex;
  background: #fff;
  border-radius: 50%;
}

.tg-bot-identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tg-bot-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #10b981;
}

.tg-bot-title {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.4;
}

.tg-bot-handle {
  color: var(--tg-blue-deep);
  font-weight: 700;
  font-size: 0.9rem;
  unicode-bidi: isolate;
  text-align: start;
}

[data-theme="dark"] .tg-bot-handle,
[data-theme="dark-slate"] .tg-bot-handle {
  color: var(--tg-blue);
}

.tg-bot-description {
  margin: 0;
  line-height: 1.8;
  opacity: 0.9;
}

.tg-bot-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: tg-pulse 2s infinite;
}

@keyframes tg-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* feature tiles: icon chip + text in a 2-col grid, divided by hairlines */
.tg-bot-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid rgba(36, 161, 222, 0.2);
  border-radius: var(--radius-xl, 16px);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(36, 161, 222, 0.06), transparent);
}

.tg-bot-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.5;
  border-block-end: 1px solid rgba(36, 161, 222, 0.15);
  border-inline-end: 1px solid rgba(36, 161, 222, 0.15);
}

.tg-bot-feature:nth-child(2n) {
  border-inline-end: 0;
}

.tg-bot-feature:nth-last-child(-n+2) {
  border-block-end: 0;
}

.tg-bot-feature-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #24A1DE, #0088cc);
  box-shadow: 0 4px 10px rgba(36, 161, 222, 0.3);
}

.tg-bot-qr-section {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.tg-bot-qr-box {
  position: relative;
  flex: none;
  width: 168px;
  height: 168px;
  padding: 8px;
  box-sizing: border-box;
  background: rgba(36, 161, 222, 0.08);
  border: 1px solid rgba(36, 161, 222, 0.3);
  border-radius: var(--radius-xl, 16px);
  cursor: zoom-in;
  overflow: hidden;
  font: inherit;
  color: inherit;
}

.tg-bot-qr-box:focus-visible,
.tg-bot-btn:focus-visible,
.tg-bot-btn-text:focus-visible,
.tg-bot-modal-close:focus-visible {
  outline: 3px solid var(--tg-blue);
  outline-offset: 2px;
}

.tg-bot-qr-svg,
.tg-bot-qr-svg svg {
  display: block;
  width: 100%;
  height: 100%;
}

.tg-bot-qr-overlay-hint {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 136, 204, 0.78);
  opacity: 0;
  transition: opacity var(--transition-base, 0.25s ease);
}

.tg-bot-qr-box:hover .tg-bot-qr-overlay-hint,
.tg-bot-qr-box:focus-visible .tg-bot-qr-overlay-hint {
  opacity: 1;
}

.tg-bot-qr-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 160px;
  min-width: 0;
}

.tg-bot-qr-tip {
  font-size: 0.9rem;
  opacity: 0.85;
  line-height: 1.7;
}

.tg-bot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.tg-bot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-xl, 16px);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  box-sizing: border-box;
  transition: transform var(--transition-base, 0.25s ease), box-shadow var(--transition-base, 0.25s ease), background var(--transition-base, 0.25s ease);
}

.tg-bot-btn--primary {
  flex: 1 1 200px;
  color: #fff;
  background: linear-gradient(135deg, #24A1DE, #0088cc);
  box-shadow: 0 6px 20px rgba(36, 161, 222, 0.45);
}

.tg-bot-btn--primary:hover {
  
  box-shadow: 0 10px 28px rgba(36, 161, 222, 0.6);
  color: #fff;
}

.tg-bot-btn--primary .tg-arrow-icon {
  transition: transform var(--transition-base, 0.25s ease);
}

.tg-bot-btn--primary:hover .tg-arrow-icon {
  transform: translateX(-4px);
}

.tg-bot-btn--secondary {
  position: relative;
  overflow: hidden;
  background: transparent;
  color: inherit;
  border-color: rgba(36, 161, 222, 0.5);
}

.tg-bot-btn--secondary:hover {
  background: rgba(36, 161, 222, 0.12);
}

.tg-bot-btn--secondary::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.35);
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}

.tg-bot-btn-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 8px;
  background: none;
  border: 0;
  color: var(--tg-blue-deep);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border-radius: 10px;
  align-self: flex-start;
}

[data-theme="dark"] .tg-bot-btn-text,
[data-theme="dark-slate"] .tg-bot-btn-text {
  color: var(--tg-blue);
}

.tg-bot-btn-text:hover {
  background: rgba(36, 161, 222, 0.1);
}

.tg-check-icon {
  display: none;
}

.tg-bot-copy-btn.is-copied {
  color: #10b981;
  border-color: #10b981;
  animation: tg-shake 0.4s;
}

.tg-bot-copy-btn.is-copied .tg-copy-icon {
  display: none;
}

.tg-bot-copy-btn.is-copied .tg-check-icon {
  display: inline;
}

.tg-bot-copy-btn.is-copied::after {
  animation: tg-ripple 0.6s ease-out;
}

@keyframes tg-shake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-3px);
  }

  75% {
    transform: translateX(3px);
  }
}

@keyframes tg-ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }

  100% {
    transform: scale(30);
    opacity: 0;
  }
}

/* variants */
.tg-bot-card--compact {
  padding: 14px;
  gap: 10px;
  max-width: 420px;
}

.tg-bot-card--compact .tg-bot-avatar {
  width: 40px;
  height: 40px;
}

.tg-bot-card--compact .tg-bot-qr-box {
  width: 128px;
  height: 128px;
}

.tg-bot-card--banner {
  padding: 12px 16px;
  gap: 8px;
  max-width: none;
  border-radius: var(--radius-xl, 16px);
}

.tg-bot-card--banner .tg-bot-avatar {
  width: 36px;
  height: 36px;
}

.tg-bot-card--banner .tg-bot-description {
  font-size: 0.9rem;
  line-height: 1.6;
}

.tg-bot-card--banner .tg-bot-btn {
  min-height: 38px;
  padding: 0 14px;
}

.tg-bot-card--banner .tg-bot-actions {
  justify-content: center;
}

/* Primary + copy buttons stack full-width; the QR text button is centered below */
.tg-bot-card--banner .tg-bot-btn {
  flex: 1 1 100%;
  width: 100%;
}

.tg-bot-card--banner .tg-bot-btn--primary {
  flex: 1 1 100%;
}

.tg-bot-card--banner .tg-bot-show-qr-btn {
  align-self: center;
  margin-inline: auto;
  flex: 0 0 auto;
}

.tg-bot-card--showcase {
  max-width: 640px;
}

/* modal + lightbox */
.tg-bot-modal,
.tg-bot-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(5, 12, 22, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: tg-fade 0.2s ease-out;
  overflow-y: auto;
}

.tg-bot-lightbox {
  z-index: 100001;
}

.tg-bot-modal-shell {
  position: relative;
  width: min(100%, 560px);
}

.tg-bot-modal .tg-bot-header {
  padding-inline-end: 0;
  padding-inline-start: 0;
}

.tg-bot-modal .tg-bot-card {
  padding-top: 28px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overflow-x: hidden;
}

.tg-bot-modal .tg-bot-identity {
  padding-inline-end: 0;
}

/* The card is a flex column with a max-height: without this, children that
   have overflow:hidden (features grid, QR box) get shrunk/clipped when the
   content gets taller on narrow screens, instead of the card scrolling. */
.tg-bot-modal .tg-bot-card>* {
  flex-shrink: 0;
}

.tg-bot-modal .tg-bot-qr-box {
  flex: none;
  min-height: 168px;
}

/* Sticky header so the title/handle never scroll away */
.tg-bot-modal .tg-bot-header {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-block: 4px;
  margin-block-start: -4px;
}

/* Redirect button full-width in modal */
.tg-bot-modal .tg-bot-redirect-btn {
  flex: 1 1 100% !important;
  width: 100%;
}

/* QR text button centered in modal */
.tg-bot-modal .tg-bot-show-qr-btn,
.tg-bot-modal .tg-bot-download-qr-btn {
  align-self: center;
}

.tg-bot-modal-close:hover {
  background: rgba(36, 161, 222, 0.25);
}

.tg-bot-modal-close {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  z-index: 3;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  backdrop-filter: blur(6px);
  border-radius: 50%;
  border: 1px solid rgba(36, 161, 222, 0.4);
  background: rgba(255, 255, 255, 0.15);
  color: inherit;
  cursor: pointer;
  font-size: 1rem;
}

.tg-bot-lightbox-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.tg-bot-lightbox-qr {
  width: min(86vw, 520px);
  aspect-ratio: 1;
  background: #fff;
  padding: 12px;
  border-radius: var(--radius-xl, 16px);
  box-sizing: border-box;
}

.tg-bot-lightbox-qr svg {
  width: 100%;
  height: 100%;
  display: block;
}

.tg-bot-lightbox .tg-bot-handle {
  color: #fff;
  font-size: 1.1rem;
}

.tg-bot-lightbox .tg-bot-btn--secondary {
  color: #fff;
}

@keyframes tg-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (max-width: 480px) {
  .tg-bot-card {
    padding: 16px;
  }

  .tg-bot-modal {
    padding: 8px;
  }

  .tg-bot-modal .tg-bot-card {
    max-height: calc(100dvh - 16px);
  }

  .tg-bot-qr-section {
    justify-content: center;
  }

  .tg-bot-qr-meta {
    align-items: center;
    text-align: center;
  }

  .tg-bot-qr-meta .tg-bot-btn-text {
    align-self: center;
  }

  .tg-bot-btn {
    flex: 1 1 100%;
  }
}

@media (min-width: 1800px) {
  .tg-bot-card--showcase {
    max-width: 720px;
  }
}

html[data-motion="reduced"] .tg-bot-card,
html[data-motion="reduced"] .tg-bot-card *,
html[data-motion="reduced"] .tg-bot-modal,
html[data-motion="reduced"] .tg-bot-lightbox {
  animation: none !important;
  transition: none !important;
}

html[data-motion="reduced"] .tg-bot-card:hover,
html[data-motion="reduced"] .tg-bot-btn--primary:hover {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {

  .tg-bot-card,
  .tg-bot-card *,
  .tg-bot-modal,
  .tg-bot-lightbox {
    animation: none !important;
    transition: none !important;
  }
}

/* QR scan line */
.tg-bot-qr-box::after {
  content: "";
  position: absolute;
  inset-inline: 8px;
  top: 8px;
  height: 2px;
  border-radius: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #24A1DE, transparent);
  box-shadow: 0 0 10px #24A1DE;
  animation: tg-scan 3s ease-in-out infinite;
}

@keyframes tg-scan {

  0%,
  100% {
    transform: translateY(0);
    opacity: 0;
  }

  10%,
  90% {
    opacity: 1;
  }

  50% {
    transform: translateY(150px);
  }
}

@media (max-width: 380px) {
  .tg-bot-features {
    grid-template-columns: 1fr;
  }

  .tg-bot-feature {
    border-inline-end: 0 !important;
    border-block-end: 1px solid rgba(36, 161, 222, .15) !important;
  }

  .tg-bot-feature:last-child {
    border-block-end: 0 !important;
  }
}

html[data-motion="reduced"] .tg-bot-qr-box::after {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .tg-bot-qr-box::after {
    display: none;
  }
}