/* Telegram integration and per-user notification preferences. */
.telegram-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.telegram-status-card {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid #e5e5e9;
  border-radius: 15px;
  background: #fafafa;
}

.telegram-status-card span {
  display: block;
  color: #85858b;
  font-size: .67rem;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.telegram-status-card strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: #252529;
  font-size: .9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.telegram-status-card.is-good { background: #f0f8f2; border-color: #d9eadc; }
.telegram-status-card.is-warn { background: #fff8e8; border-color: #f0e1ba; }
.telegram-status-card.is-off { background: #f5f5f6; }
.telegram-status-card.is-error { background: #fff1f0; border-color: #f0d0cd; }

.telegram-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 18px;
}

.telegram-field-help {
  margin-top: 5px;
  color: #7c7c82;
  font-size: .73rem;
  line-height: 1.45;
}

.telegram-token-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  margin: 8px 0 4px;
  color: #55565b;
  font-size: .76rem;
}

.telegram-token-line code {
  padding: 4px 7px;
  border-radius: 7px;
  background: #f0f0f2;
  color: #33343a;
}

.telegram-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.telegram-primary-button {
  background: #2f9d59 !important;
  border-color: #2f9d59 !important;
  color: #fff !important;
}

.telegram-primary-button:hover {
  background: #27884c !important;
  border-color: #27884c !important;
}

.telegram-danger-button {
  background: #fff0ef !important;
  border-color: #efcfcc !important;
  color: #a63832 !important;
}

.telegram-danger-button:hover {
  background: #f9dfdd !important;
  border-color: #e9bbb7 !important;
  color: #912e29 !important;
}

.telegram-webhook-box {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #e5e5e9;
  border-radius: 14px;
  background: #fafafa;
}

.telegram-webhook-box code {
  word-break: break-all;
}

.telegram-step-list {
  display: grid;
  gap: 10px;
}

.telegram-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.telegram-step-number {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #e7e7ea;
  color: #55565b;
  font-size: .72rem;
  font-weight: 750;
}

.telegram-step strong { display: block; font-size: .82rem; }
.telegram-step p { margin-top: 2px; color: #7a7a80; font-size: .72rem; line-height: 1.4; }

.telegram-subscriber-list,
.telegram-delivery-list {
  display: grid;
}

.telegram-subscriber-row,
.telegram-delivery-row {
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid #ececef;
}

.telegram-subscriber-row:first-child,
.telegram-delivery-row:first-child { border-top: 0; }

.telegram-subscriber-row { grid-template-columns: minmax(160px, 1fr) minmax(150px, .8fr) auto; }
.telegram-delivery-row { grid-template-columns: 86px minmax(0, 1fr) minmax(120px, .6fr) auto; }

.telegram-small-muted {
  display: block;
  color: #85858b;
  font-size: .68rem;
}

.telegram-delivery-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 750;
}
.telegram-delivery-status.sent { background: #edf8f0; color: #26713c; }
.telegram-delivery-status.pending,
.telegram-delivery-status.sending { background: #eef4ff; color: #315f9c; }
.telegram-delivery-status.failed { background: #fff0ef; color: #ad3932; }
.telegram-delivery-status.skipped { background: #f2f2f4; color: #777; }

.telegram-user-panel {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #dce7f5;
  border-radius: 18px;
  background: #f6faff;
}

.telegram-user-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.telegram-user-panel-heading p {
  margin-top: 3px;
  color: #718094;
  font-size: .74rem;
}

.telegram-connection-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #e7edf5;
  color: #617084;
  font-size: .68rem;
  font-weight: 750;
  white-space: nowrap;
}
.telegram-connection-pill.is-connected { background: #e6f4e9; color: #2f7445; }

.telegram-connect-link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  padding: 11px 12px;
  border: 1px solid #d9e4f1;
  border-radius: 12px;
  background: #fff;
}
.telegram-connect-link code {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.telegram-preference-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 16px;
  margin-top: 12px;
}

.telegram-preference-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  font-size: .78rem;
}

.telegram-profile-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #dde6f1;
}

@media (max-width: 850px) {
  .telegram-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .telegram-settings-grid { grid-template-columns: 1fr; }
  .telegram-subscriber-row { grid-template-columns: 1fr auto; }
  .telegram-subscriber-row > :nth-child(2) { grid-row: 2; }
  .telegram-delivery-row { grid-template-columns: 74px 1fr auto; }
  .telegram-delivery-row > :nth-child(3) { grid-column: 2; }
}

@media (max-width: 540px) {
  .telegram-status-grid { grid-template-columns: 1fr; }
  .telegram-preference-grid { grid-template-columns: 1fr; }
  .telegram-user-panel-heading { flex-direction: column; }
  .telegram-profile-actions { align-items: stretch; flex-direction: column; }
  .telegram-profile-actions .button,
  .telegram-profile-actions form { width: 100%; }
  .telegram-profile-actions form .button { width: 100%; }
  .telegram-delivery-row { grid-template-columns: 1fr auto; }
  .telegram-delivery-row > :nth-child(3) { grid-column: 1 / -1; }
}