#admin-telegram-notifications-host {
  position: fixed;
  z-index: 24;
  box-sizing: border-box;
  color: #17201a;
  font-family: inherit;
}

#admin-telegram-notifications-host[hidden] {
  display: none;
}

#admin-telegram-notifications-host *,
.telegram-notification-dialog * {
  box-sizing: border-box;
  letter-spacing: 0;
}

.telegram-notification-panel {
  max-height: calc(100vh - 24px);
  overflow: auto;
  border: 1px solid #c9d4c9;
  border-left: 4px solid #247148;
  border-radius: 7px;
  background: #f5faf6;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(20, 52, 34, 0.08);
}

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

.telegram-notification-header h2 {
  margin: 0;
  font-size: 17px;
}

.telegram-notification-header p {
  margin: 4px 0 0;
  color: #617067;
  font-size: 12px;
}

.telegram-notification-status {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #e4ece6;
  padding: 5px 9px;
  color: #53645a;
  font-size: 11px;
}

.telegram-notification-status[data-tone="success"] { background: #dff3e6; color: #176a39; }
.telegram-notification-status[data-tone="working"] { background: #e5edf7; color: #285880; }
.telegram-notification-status[data-tone="warning"] { background: #fff1d6; color: #805715; }
.telegram-notification-status[data-tone="error"] { background: #fde7e5; color: #9e2a23; }

.telegram-notification-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px 12px;
}

.telegram-notification-grid label,
.telegram-recipient-field {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #4f6156;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.telegram-notification-grid label[hidden],
.telegram-recipient-field[hidden] { display: none; }
.telegram-notification-grid .wide { grid-column: 1 / -1; }
.telegram-notification-grid small { float: right; font-weight: 400; text-transform: none; }

.telegram-notification-grid input,
.telegram-notification-grid select,
.telegram-notification-grid textarea {
  width: 100%;
  border: 1px solid #bac8bc;
  border-radius: 6px;
  background: #fff;
  padding: 9px 10px;
  color: #17201a;
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
}

.telegram-notification-grid textarea {
  min-height: 90px;
  resize: vertical;
}

.telegram-notification-grid input:focus,
.telegram-notification-grid select:focus,
.telegram-notification-grid textarea:focus {
  outline: 2px solid rgba(36, 113, 72, 0.18);
  border-color: #247148;
}

.telegram-recipient-combobox {
  position: relative;
  min-width: 0;
}

.telegram-recipient-options {
  position: absolute;
  z-index: 6;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  max-height: 228px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #aebdaf;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(20, 52, 34, 0.16);
  text-transform: none;
}

.telegram-recipient-options[hidden] { display: none; }

.telegram-recipient-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  border: 0;
  border-bottom: 1px solid #e2e8e3;
  background: #fff;
  padding: 8px 10px;
  color: #17201a;
  text-align: left;
  cursor: pointer;
}

.telegram-recipient-option:last-child { border-bottom: 0; }
.telegram-recipient-option:hover,
.telegram-recipient-option.active { background: #eaf4ed; }

.telegram-recipient-option-identity {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.telegram-recipient-option-identity strong,
.telegram-recipient-option-identity small,
.telegram-recipient-option-contacts {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.telegram-recipient-option-identity strong { font-size: 13px; }
.telegram-recipient-option-identity small { color: #607067; font-size: 11px; }
.telegram-recipient-option-contacts { color: #52645a; font-size: 11px; font-weight: 400; }

.telegram-recipient-message {
  padding: 12px;
  color: #617067;
  font-size: 12px;
  font-weight: 400;
}

.telegram-recipient-message[data-tone="error"] { color: #9c2d27; }

.telegram-notification-preview {
  margin-top: 12px;
  border: 1px solid #b9cdbd;
  border-radius: 6px;
  background: #fff;
  padding: 11px 12px;
}

.telegram-notification-preview p { margin: 5px 0 0; color: #5d6d63; font-size: 12px; }

.telegram-notification-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 9px;
}

.telegram-notification-metrics div {
  border-left: 1px solid #dce4de;
  padding-left: 10px;
}

.telegram-notification-metrics div:first-child { border-left: 0; padding-left: 0; }
.telegram-notification-metrics strong { display: block; font-size: 17px; }
.telegram-notification-metrics span { display: block; margin-top: 2px; color: #66766c; font-size: 10px; }

.telegram-notification-error {
  margin: 10px 0 0;
  border: 1px solid #e4b7b2;
  border-radius: 6px;
  background: #fff4f3;
  padding: 8px 10px;
  color: #9c2d27;
  font-size: 12px;
}

.telegram-notification-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.telegram-notification-actions button,
.telegram-notification-dialog button {
  min-height: 34px;
  border: 1px solid #b8c5ba;
  border-radius: 6px;
  background: #fff;
  padding: 7px 12px;
  color: #203127;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.telegram-notification-actions button.primary,
.telegram-notification-dialog button.primary {
  border-color: #247148;
  background: #247148;
  color: #fff;
}

.telegram-notification-actions button:disabled { cursor: default; opacity: 0.5; }

.telegram-notification-dialog {
  width: min(500px, calc(100vw - 28px));
  border: 1px solid #bcc8be;
  border-radius: 7px;
  background: #fff;
  padding: 0;
  color: #17201a;
}

.telegram-notification-dialog::backdrop { background: rgba(17, 31, 22, 0.58); }
.telegram-notification-dialog form { padding: 18px; }
.telegram-notification-dialog h3 { margin: 0 0 10px; font-size: 18px; }
.telegram-notification-dialog p { margin: 7px 0; color: #4f6056; font-size: 13px; line-height: 1.45; }
.telegram-notification-dialog-reason { border-left: 3px solid #d8b768; padding-left: 9px; }
.telegram-notification-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

@media (max-width: 720px) {
  #admin-telegram-notifications-host { left: 8px !important; right: 8px; width: auto !important; }
  .telegram-notification-panel { padding: 12px; }
  .telegram-notification-header { display: grid; }
  .telegram-notification-grid { grid-template-columns: 1fr; }
  .telegram-notification-grid .wide { grid-column: auto; }
  .telegram-notification-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .telegram-notification-actions { flex-direction: column; }
}