:root {
  /* Colors are available from template variables. Use them via var(). */
}

* { box-sizing: border-box; }
html,body { height:100%; }
body {
  background: var(--chat-surface-2);
  color: var(--chat-text-primary);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  margin: 16px;
}

.contact-container {
  max-width: 980px;
  margin: 18px auto;
  padding: 20px;
  background: linear-gradient(180deg, var(--chat-surface-2) 0%, rgba(10,20,36,0.6) 100%);
  border-radius: 12px;
  box-shadow: var(--chat-shadow-medium);
  border: 1px solid rgba(255,255,255,0.03);
}

.contact-panel { padding: 8px 6px 18px; }
.page-title {
  font-size: 28px;
  margin: 6px 0 4px;
  color: var(--chat-text-light);
}
.lead { color: var(--chat-text-secondary); margin-bottom: 16px; }

.contact-form { display:block; }
.row { display:flex; gap:18px; margin-bottom:12px; }
.col { flex:1; min-width:0; }
.col-left { }
.col-right { }

.form-label {
  display:block;
  margin-bottom:6px;
  color: var(--chat-text-secondary);
  font-size: 13px;
}

.form-input, .form-textarea {
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  background: var(--chat-surface-1);
  border: 1px solid rgba(255,255,255,0.04);
  color: var(--chat-text-light);
  outline: none;
  transition: var(--chat-transition);
  font-size:14px;
}
.form-input:focus, .form-textarea:focus { border-color: var(--chat-accent-blue); box-shadow: 0 4px 12px rgba(13,110,253,0.12); }

.form-textarea { resize: vertical; min-height:120px; }

.form-actions { display:flex; align-items:center; justify-content:space-between; margin-top:12px; gap:12px; }
.status-message { color: var(--chat-text-secondary); font-size: 13px; }

.buttons { display:flex; gap:8px; }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border-radius:8px; border: none; cursor:pointer; font-weight:600; }
.btn-primary {
  background: var(--chat-accent-blue);
  color: var(--chat-text-light);
  box-shadow: var(--chat-shadow-light);
}
.btn-primary[disabled] { opacity: 0.65; cursor: not-allowed; }
.btn-secondary {
  background: rgba(255,255,255,0.04);
  color: var(--chat-text-light);
  border: 1px solid rgba(255,255,255,0.03);
}

.muted-note { display:block; margin-top:14px; color:var(--chat-text-secondary); font-size:13px; }
.required { color: var(--chat-accent-yellow); }

/* small responsive tweak */
@media (max-width:820px) {
  .row { flex-direction: column; }
}

/* accessibility & focus outline */
.form-input:focus, .form-textarea:focus, .btn:focus { outline: 3px solid rgba(13,110,253,0.12); }

/* insight helpers for testing */
.insight { position: relative; }

/* small spinner for button */
.btn .spinner { display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,0.25); border-top-color: var(--chat-text-light); border-radius:50%; margin-left:8px; animation:spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }