/* "Try your AI" live demo — homepage and /whatsapp/ (js/try-ai.js) */
/* The display rules below would otherwise override the hidden attribute */
.try-ai [hidden] { display: none !important; }
/* No reserved blank space under the input until there's something to say */
.try-ai-status:empty, .try-ai-turnstile:empty { display: none; }
.try-ai { padding: 5rem 0; background: linear-gradient(180deg, #F8F9FF 0%, #FFFFFF 100%); }
.try-ai .section-header p { max-width: 620px; margin-left: auto; margin-right: auto; }
.try-ai-card {
  max-width: 720px; margin: 2rem auto 0; background: #fff;
  border: 1px solid #E5E7EB; border-radius: 16px; padding: 1.5rem;
  box-shadow: 0 20px 50px -24px rgba(30,27,75,.25);
}
.try-ai-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.try-ai-form { display: flex; gap: .625rem; }
.try-ai-form input {
  flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: .8rem 1rem;
  border: 1px solid #D1D5DB; border-radius: 10px; color: var(--gray-900, #111827); background: #fff;
}
.try-ai-form input:focus { outline: none; border-color: var(--indigo-600, #4F46E5); box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
.try-ai-form .btn { white-space: nowrap; }
.try-ai-form .btn[disabled] { opacity: .6; cursor: progress; transform: none; }
.try-ai-status { margin: .75rem 0 0; font-size: .9rem; color: var(--gray-600, #4B5563); display: flex; align-items: center; gap: .5rem; }
.try-ai-status.is-error { color: #B91C1C; }
.try-ai-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(79,70,229,.25); border-top-color: #4F46E5; animation: try-ai-spin .8s linear infinite; }
@keyframes try-ai-spin { to { transform: rotate(360deg); } }

.try-ai-chat { margin-top: 1rem; border: 1px solid #E5E7EB; border-radius: 12px; overflow: hidden; }
.try-ai-chat-head { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; background: #F9FAFB; border-bottom: 1px solid #E5E7EB; font-size: .9rem; font-weight: 600; color: var(--gray-900, #111827); }
.try-ai-chat-head span.dot { width: 8px; height: 8px; border-radius: 50%; background: #10B981; }
.try-ai-chat-head small { margin-left: auto; font-weight: 500; color: #6B7280; }
.try-ai-msgs { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; max-height: 340px; overflow-y: auto; }
.try-ai-msg { max-width: 82%; padding: .625rem .875rem; border-radius: 14px; font-size: .95rem; line-height: 1.55; white-space: pre-wrap; }
.try-ai-msg--user { align-self: flex-end; background: #4F46E5; color: #fff; border-bottom-right-radius: 4px; }
.try-ai-msg--ai { align-self: flex-start; background: #F3F4F6; color: #111827; border-bottom-left-radius: 4px; }
.try-ai-msg--typing { color: #6B7280; font-style: italic; }
.try-ai-chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 1rem .75rem; }
.try-ai-chip { font: inherit; font-size: .85rem; padding: .4rem .75rem; border-radius: 999px; border: 1px solid #C7D2FE; background: #EEF2FF; color: #3730A3; cursor: pointer; }
.try-ai-chip:hover { background: #E0E7FF; }
.try-ai-chip[disabled] { opacity: .5; cursor: not-allowed; }
.try-ai-ask { display: flex; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid #E5E7EB; }
.try-ai-ask input { flex: 1; min-width: 0; font: inherit; font-size: .95rem; padding: .6rem .8rem; border: 1px solid #D1D5DB; border-radius: 8px; }
.try-ai-ask input:focus { outline: none; border-color: #4F46E5; }
.try-ai-left { margin: 0; padding: 0 1rem .75rem; font-size: .8rem; color: #6B7280; }

.try-ai-cta { margin-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.25rem; border-radius: 12px; background: #EEF2FF; border: 1px solid #C7D2FE; }
.try-ai-cta strong { display: block; color: #1E1B4B; font-size: 1rem; }
.try-ai-cta small { color: #4B5563; }
.try-ai-cta.is-final { background: #4F46E5; border-color: #4F46E5; }
.try-ai-cta.is-final strong, .try-ai-cta.is-final small { color: #fff; }
.try-ai-cta.is-final .btn { background: #fff; color: #3730A3; }

@media (max-width: 600px) {
  .try-ai { padding: 3.5rem 0; }
  .try-ai-card { padding: 1rem; }
  .try-ai-form { flex-direction: column; }
  .try-ai-msg { max-width: 92%; }
}