.telegram-delivery-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 1rem;
  border-top: 3px solid var(--blue);
}

.telegram-delivery-card::after {
  position: absolute;
  top: -2.5rem;
  right: -2rem;
  width: 9rem;
  height: 9rem;
  border: 1.1rem solid var(--blue-soft);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.telegram-delivery-card > * { position: relative; z-index: 1; }
.telegram-delivery-card h2 { margin: .4rem 0 0; font-size: 1.2rem; letter-spacing: -.04em; }
.telegram-delivery-copy { max-width: 38rem; margin: 1rem 0; color: var(--muted); font-size: .74rem; line-height: 1.5; }
.telegram-delivery-state { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.telegram-delivery-state > div { display: grid; gap: .25rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-muted); padding: .75rem; }
.telegram-delivery-state span { color: var(--muted); font-size: .62rem; }
.telegram-delivery-state strong { overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.telegram-delivery-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.telegram-delivery-actions .text-button { margin-left: auto; }
.connections-providers { margin-top: 1rem; }

@media (max-width: 680px) {
  .telegram-delivery-state { grid-template-columns: 1fr; }
  .telegram-delivery-actions .button { flex: 1 1 100%; }
  .telegram-delivery-actions .text-button { margin: .25rem 0 0; }
}

@media (forced-colors: active) {
  .telegram-delivery-card::after { display: none; }
}