/* Support form (3.27.0): identity check states. A conversation can only be opened by the owner of a character,
   so the form shows inline field errors and one clear, generic "does not match" panel. */
.verify-lede { margin: 0 0 22px; max-width: 46ch; color: var(--text); }

.field-hint { margin: 7px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.field-hint a { font-weight: 700; }
.field-error { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--bad); }
.field-error:empty { display: none; }
.field-error::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7v6M12 16.5v.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7v6M12 16.5v.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.field.is-invalid input { border-color: var(--dread); background: #1f0d09; }
.field.is-invalid input:focus { border-color: var(--gold); }

/* the "these do not match our records" panel: text, an icon and a full border, not colour alone */
.form-alert {
  display: grid;
  gap: 4px;
  margin: 4px 0 18px;
  padding: 13px 16px 12px;
  color: var(--text);
  background: rgba(200, 67, 42, .12);
  border: 1px solid rgba(255, 143, 115, .55);
  border-radius: 8px;
}
.form-alert[hidden] { display: none; }
.form-alert strong { font: 700 16px/1.25 var(--display); color: #ffc7bb; overflow-wrap: anywhere; }
.form-alert p { font-size: 15px; line-height: 1.5; color: var(--text); }

#cs-start[disabled] { cursor: progress; }
.support-grid input:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }

@media (max-width: 440px) {
  #cs-start { width: 100%; }
}