.intake-panel { max-width: 42rem; margin: 0 auto; padding: 0 16px 0; text-align: center; } .intake-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--accent-soft, #DCEEF1); color: var(--accent, #0B7A8A); margin-bottom: 8px; } .intake-avatar svg { display: block; } .intake-greeting { font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 650; line-height: 1.3; color: var(--text-primary, #0f172a); margin: 0 0 4px; } .intake-sub { margin: 0 0 12px; color: var(--text-secondary, #64748b); font-size: 0.875rem; } .intake-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 0; } .intake-chip { appearance: none; border: 1px solid var(--border, #e2e8f0); background: var(--surface, #fff); color: var(--text-primary, #0f172a); border-radius: 999px; padding: 6px 14px; font-size: 0.85rem; cursor: pointer; min-height: 36px; transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease; } .intake-chip:hover, .intake-chip:focus-visible { border-color: var(--accent, #0B7A8A); background: var(--accent-soft, #DCEEF1); outline: none; transform: translateY(-1px); } .intake-chip--other { border-style: dashed; } .intake-freetext { display: flex; flex-direction: column; gap: 0.65rem; text-align: left; margin-top: 0.5rem; } .intake-freetext textarea { width: 100%; resize: vertical; min-height: 5rem; padding: 0.75rem 0.9rem; border-radius: 0.75rem; border: 1px solid var(--border, #e2e8f0); font: inherit; background: var(--surface, #fff); color: var(--text-primary, #0f172a); } .intake-submit { align-self: flex-end; min-height: 44px; min-width: 6rem; padding: 0.55rem 1.1rem; border: none; border-radius: 0.65rem; background: var(--accent-fill, var(--accent-primary, #0B7A8A)); color: var(--accent-on-accent, #fff); font-weight: 600; cursor: pointer; } .intake-submit:disabled { opacity: 0.45; cursor: not-allowed; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } @media (max-height: 800px) { .intake-avatar { display: none; } .intake-greeting { font-size: 1.1rem; } .intake-sub { margin-bottom: 8px; } } @media (max-width: 768px) { .intake-panel { margin: 0 auto; padding: 0 8px 8px; } .intake-chips { flex-direction: column; } .intake-chip { width: 100%; } } @media (prefers-reduced-motion: reduce) { .intake-chip { transition: none; } }