/* ================================================================
   forms.css — Callback dialog, field labels, auth, login dialog
   ================================================================ */

/* ---- Field Labels (shared) ---- */
.field-label { display: grid; gap: 6px; font-size: 10px; font-weight: 800; color: #55534d; }
.field-label span { display: flex; align-items: center; gap: 4px; }
.field-label small { color: var(--muted); font-weight: 700; }
.field-label em { color: var(--accent); font-style: normal; }

/* ---- Callback Dialog ---- */
.callback-dialog { width: min(420px, calc(100% - 24px)); padding: 0; border: 0; border-radius: 24px; overflow: hidden; }
.callback-dialog::backdrop { background: rgba(23, 23, 20, .45); backdrop-filter: blur(6px); }
.callback-dialog[open] { animation: dialogPop .35s cubic-bezier(.2,.8,.2,1); }
.callback-dialog form { position: relative; padding: 32px 28px 28px; }
.callback-header { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.callback-icon { display: grid; width: 52px; height: 52px; place-items: center; flex: 0 0 52px; color: white; background: var(--accent); border-radius: 16px; box-shadow: 0 8px 24px rgba(239, 90, 47, .28); }
.callback-icon svg { width: 24px; height: 24px; stroke: none; fill: currentColor; }
.callback-header-text { min-width: 0; }
.callback-header-text h2 { margin: 2px 0 0; font-family: Georgia, serif; font-size: 26px; font-weight: 500; letter-spacing: -.04em; }
.callback-progress {
  margin: -6px 0 16px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.callback-wizard-step[hidden] { display: none !important; }
.callback-description { margin: 0 0 24px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.callback-description strong { color: var(--ink); font-weight: 800; }
.callback-fields { display: grid; gap: 16px; margin-bottom: 20px; }
.callback-nav { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 10px; align-items: stretch; }
.callback-nav .secondary-button { margin-top: 0; min-height: 52px; border-radius: 14px; font-size: 12px; }
.callback-nav .callback-submit { margin-top: 0; }
.callback-next { min-height: 52px; border-radius: 14px; font-size: 12px; }
.callback-fields input,
.callback-fields textarea { width: 100%; min-height: 48px; padding: 11px 14px; margin-top: 2px; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 12px; outline: none; font-size: 11px; transition: border-color .18s ease, box-shadow .18s ease; }
.callback-fields textarea { min-height: 88px; resize: vertical; line-height: 1.45; font-family: inherit; }
.callback-fields select { width: 100%; min-height: 48px; padding: 11px 14px; margin-top: 2px; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 12px; outline: none; font-size: 11px; transition: border-color .18s ease, box-shadow .18s ease; appearance: none; background-image: linear-gradient(45deg, transparent 50%, #888 50%), linear-gradient(135deg, #888 50%, transparent 50%); background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.callback-fields input::placeholder,
.callback-fields textarea::placeholder { color: #b8b4aa; }
.callback-fields input:focus,
.callback-fields textarea:focus,
.callback-fields select:focus { border-color: #e5ac9a; box-shadow: 0 0 0 4px rgba(239, 90, 47, .08); }
.callback-fields input:invalid:not(:placeholder-shown) { border-color: #e06055; box-shadow: 0 0 0 4px rgba(224, 96, 85, .08); }
.callback-fields input.input-error { border-color: #e06055 !important; box-shadow: 0 0 0 4px rgba(224, 96, 85, .08); animation: shake .35s ease; }
.callback-submit { position: relative; min-height: 52px; border-radius: 14px; font-size: 12px; }
.callback-submit .btn-spinner { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .2s ease; }
.callback-submit .btn-spinner svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; animation: spin .8s linear infinite; }
.callback-submit.is-loading .btn-text { opacity: 0; }
.callback-submit.is-loading .btn-spinner { opacity: 1; }
.callback-alt { margin: 16px 0 0; color: var(--muted); font-size: 10px; text-align: center; }
.callback-alt a { color: var(--accent-dark); font-weight: 800; text-decoration: none; }
.callback-alt a:hover { text-decoration: underline; }
.callback-success { display: grid; place-items: center; gap: 10px; padding: 28px 8px; text-align: center; animation: rise .35s ease both; }
.callback-success-icon { display: grid; width: 56px; height: 56px; place-items: center; color: white; background: var(--green); border-radius: 18px; box-shadow: 0 8px 24px rgba(39, 124, 83, .28); }
.callback-success-icon svg { width: 26px; height: 26px; stroke: none; fill: currentColor; }
.callback-success strong { font-size: 15px; color: var(--ink); }
.callback-success p { margin: 0; font-size: 11px; color: var(--muted); }
.callback-form-success .callback-header,
.callback-form-success .callback-progress,
.callback-form-success .callback-wizard-step,
.callback-form-success .callback-description,
.callback-form-success .callback-agent-info,
.callback-form-success .callback-fields,
.callback-form-success .callback-nav,
.callback-form-success .callback-submit,
.callback-form-success .callback-alt,
.callback-form-success #callback-turnstile { display: none !important; }
.turnstile-widget { margin: 12px 0 4px; min-height: 65px; }

.callback-agent-info {
  margin: 0 0 20px;
}
.callback-fields + .callback-agent-info {
  margin-top: -4px;
}
.callback-agent-info .agent-preview-role {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}
.callback-agent-info .agent-preview-description {
  margin: 0;
}
.callback-agent-info .agent-preview-role:not([hidden]) + .agent-preview-description {
  margin-top: 8px;
}

/* ---- Agent preview (full description before starting demo) ---- */
.agent-preview-dialog { width: min(440px, calc(100% - 24px)); }
.agent-preview-panel { position: relative; padding: 32px 28px 28px; }
.agent-preview-header { margin-bottom: 16px; }
.agent-preview-avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  color: white;
  background: var(--accent);
  box-shadow: 0 8px 24px rgba(239, 90, 47, .28);
}
.agent-preview-role {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}
.agent-preview-body {
  display: grid;
  gap: 12px;
  margin: 0 0 22px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--surface, #f7f5f0) 88%, white);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.agent-preview-description {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 550;
  line-height: 1.55;
  white-space: pre-wrap;
}
.agent-preview-goal {
  margin: 0;
  color: var(--accent-dark, var(--accent));
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}
.agent-preview-goal::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  margin-bottom: 1px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}

/* ---- Auth ---- */
.auth-button { display: flex; align-items: center; gap: 6px; padding: 0 11px; min-height: 36px; background: white; border: 1px solid var(--line); border-radius: 10px; font-size: 9px; font-weight: 800; color: var(--ink); }
.auth-button svg { width: 16px; stroke-width: 2; }

/* ---- Login Dialog ---- */
.login-dialog { border: none; border-radius: 24px; padding: 0; max-width: 380px; width: 90vw; overflow: hidden; }
.login-dialog::backdrop { background: rgba(23, 23, 20, .45); backdrop-filter: blur(6px); }
.login-dialog[open] { animation: dialogPop .35s cubic-bezier(.2,.8,.2,1); }
.login-dialog form { padding: 32px 28px 28px; }
.login-header { display: flex; gap: 16px; align-items: center; margin-bottom: 20px; }
.login-icon { display: grid; width: 52px; height: 52px; place-items: center; flex: 0 0 52px; background: #fff; border-radius: 16px; box-shadow: 0 8px 24px rgba(23, 23, 20, .12); overflow: hidden; padding: 4px; }
.login-icon img { width: 100%; height: 100%; object-fit: contain; }
.login-header-text h2 { margin: 2px 0 0; font-family: Georgia, serif; font-size: 26px; font-weight: 500; letter-spacing: -.04em; }
.login-fields { display: grid; gap: 16px; }
.login-fields .field-label input { width: 100%; min-height: 48px; padding: 11px 14px; margin-top: 2px; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 12px; outline: none; font-size: 11px; transition: border-color .18s ease, box-shadow .18s ease; }
.login-fields .field-label input::placeholder { color: #b8b4aa; }
.login-fields .field-label input:focus { border-color: #e5ac9a; box-shadow: 0 0 0 4px rgba(239, 90, 47, .08); }
.login-submit { position: relative; min-height: 52px; border-radius: 14px; font-size: 12px; }
.login-submit .btn-spinner { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .2s ease; }
.login-submit .btn-spinner svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; animation: spin .8s linear infinite; }
.login-submit.is-loading .btn-text { opacity: 0; }
.login-submit.is-loading .btn-spinner { opacity: 1; }
.login-toggle { text-align: center; margin-top: 14px; }
.login-toggle button { color: var(--accent); font-size: 10px; font-weight: 800; }

/* ---- Quick Register ---- */
.quick-register { margin-top: 10px; }
.quick-register.hidden { display: none; }

/* ---- Responsive ---- */
@media (max-width: 620px) {
  .callback-dialog {
    width: 100%;
    max-width: none;
    margin: 0;
    margin-top: auto;
    border-radius: 24px 24px 0 0;
    max-height: min(92dvh, 100%);
  }
  .callback-dialog[open] {
    display: flex;
    flex-direction: column;
    animation: callbackSheetUp .32s cubic-bezier(.2,.8,.2,1);
  }
  .callback-dialog form {
    padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0px));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .callback-header { gap: 12px; }
  .callback-icon { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; }
  .callback-icon svg { width: 20px; height: 20px; }
  .callback-header-text h2 { font-size: 22px; }
  .callback-fields input,
  .callback-fields select { min-height: 52px; font-size: 16px; }
  .callback-nav { grid-template-columns: 1fr 1.35fr; gap: 12px; }
  .callback-next,
  .callback-nav .secondary-button,
  .callback-nav .callback-submit { min-height: 54px; font-size: 13px; }
  .login-dialog form { padding: 24px 20px 22px; }
  .login-header { gap: 12px; }
  .login-icon { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; }
  .login-header-text h2 { font-size: 22px; }
}

@keyframes callbackSheetUp {
  from { transform: translateY(18px); opacity: .86; }
  to { transform: translateY(0); opacity: 1; }
}