.tgdc {
  display: grid;
  gap: 1rem;
  color: var(--tgdc-ink, inherit);
  font-family: var(--tgdc-font, inherit);
  text-align: left;
}

.tgdc-row { display: grid; gap: 0.35rem; }

.tgdc label { font-weight: 600; font-size: 0.95rem; }

.tgdc select,
.tgdc textarea,
.tgdc input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--tgdc-border, color-mix(in srgb, currentColor 30%, transparent));
  border-radius: var(--tgdc-radius, 8px);
  background: var(--tgdc-field-bg, rgba(0, 0, 0, 0.25));
  color: inherit;
  font: inherit;
}

.tgdc select:disabled { opacity: 0.8; cursor: not-allowed; }

.tgdc textarea { resize: vertical; min-height: 8rem; }

.tgdc select:focus-visible,
.tgdc textarea:focus-visible,
.tgdc input:focus-visible,
.tgdc-send:focus-visible {
  outline: 2px solid var(--tgdc-accent, #7c6cff);
  outline-offset: 2px;
}

.tgdc option { color: #111; background: #fff; }

.tgdc-count { justify-self: end; font-size: 0.8rem; color: var(--tgdc-ink-soft, color-mix(in srgb, currentColor 65%, transparent)); }
.tgdc-count.tgdc-over { color: var(--tgdc-error, #ff7b7b); }

.tgdc-hint { margin: 0; font-size: 0.82rem; color: var(--tgdc-ink-soft, color-mix(in srgb, currentColor 65%, transparent)); }


.tgdc-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.tgdc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

.tgdc-send {
  padding: 0.65rem 1.6rem;
  border: 0;
  border-radius: var(--tgdc-radius, 8px);
  background: var(--tgdc-accent, #7c6cff);
  color: var(--tgdc-accent-ink, #fff);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.tgdc-send:disabled { opacity: 0.6; cursor: progress; }

.tgdc-status { margin: 0; font-size: 0.9rem; }
.tgdc-status[data-kind='error'] { color: var(--tgdc-error, #ff7b7b); }
.tgdc-status[data-kind='success'] { color: var(--tgdc-success, #6fd99b); }