:root { --f1: #FFFFFF; --f2: #F7F9FC; --f3: #1A202C; --f4: #4c5767; --f5: #0f172a; --fx: #00e691; --error: #feb2b2; --error-text: #e53e3e; --radius: 12px; --shadow: 0 20px 40px rgba(0,0,0,0.06); --bezier: cubic-bezier(0.25, 0.8, 0.25, 1); }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter-Regular', Arial, sans-serif; background: var(--f2); color: var(--f3); -webkit-font-smoothing: antialiased; }
.chat-landing-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 0; }
.chat-layout-container { width: min(1200px, 92%); margin: auto; display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; }
.chat-hero-intro { padding-right: 20px; }
.badge-label { display: inline-block; background: var(--f5); color: var(--fx); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; padding: 6px 14px; border-radius: 30px; margin-bottom: 20px; }
.hero-main-title { font-family: 'Mailpress-Bold', Arial, sans-serif; font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 700; line-height: 1.15; color: var(--f5); letter-spacing: -0.02em; margin-bottom: 20px; }
.hero-body-desc { font-size: 16px; color: var(--f4); line-height: 1.65; margin-bottom: 35px; }
.trust-metrics-row { display: flex; gap: 30px; border-top: 1px solid #e2e8f0; padding-top: 25px; }
.metric-node { font-size: 14px; color: var(--f4); line-height: 1.5; flex: 1; }
.metric-node strong { color: var(--f5); font-size: 16px; display: block; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; }
.chat-card-interface { background: var(--f1); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid #e2e8f0; display: flex; flex-direction: column; overflow: hidden; height: 720px; }
.chat-interface-header { background: var(--f5); padding: 20px 25px; display: flex; align-items: center; gap: 15px; }
.avatar-status-dot { width: 10px; height: 10px; background: var(--fx); border-radius: 50%; box-shadow: 0 0 0 4px rgba(0,208,132,0.25); }
.concierge-name { color: var(--f1); font-size: 16px; font-weight: 700; }
.concierge-status { color: #a0aec0; font-size: 12px; }
.chat-scroller-viewport { flex: 1; padding: 25px; overflow-y: auto; background: #f8fafc; display: flex; flex-direction: column; gap: 20px; scroll-behavior: smooth; }
.chat-bubble-row { display: flex; width: 100%; animation: bubbleReveal 0.4s var(--bezier) forwards; transform-origin: left bottom; }
.chat-bubble-row.bot-row .bubble-content { background: var(--f5); color: var(--f1); border-radius: 2px 16px 16px 16px; padding: 15px 20px; font-size: 14px; max-width: 85%; line-height: 1.5; box-shadow: 0 4px 10px rgba(0,0,0,0.04); }
.interactive-input-card { background: var(--f1); border: 1px solid #e2e8f0; border-radius: 16px; padding: 25px; width: 100%; box-shadow: 0 4px 15px rgba(0,0,0,0.02); animation: bubbleReveal 0.5s var(--bezier) 0.15s forwards; opacity: 0; }
.form-field-group { display: flex; flex-direction: column; margin-bottom: 18px; }
.form-field-group label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; color: var(--f3); }
.form-field-group input, .form-field-group textarea, .form-field-group select { padding: 12px 16px; font-size: 14px; border: 1px solid #cbd5e1; border-radius: 8px; color: var(--f5); background: var(--f1); transition: all 0.2s ease; font-family: inherit; appearance: none; -webkit-appearance: none; }
.form-field-group select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23718096'><path d='M0 3h12L6 10z'/></svg>"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.form-field-group input:focus, .form-field-group textarea:focus, .form-field-group select:focus { outline: none; border-color: var(--f5); box-shadow: 0 0 0 3px rgba(0,0,0,0.04); }
.field-alert-hint { display: none; font-size: 11px; color: var(--error-text); margin-top: 5px; font-weight: 500; }
.form-field-group.has-error input, .form-field-group.has-error textarea, .form-field-group.has-error select { border-color: var(--error-text); background: rgba(229,62,62,0.01); }
.form-field-group.has-error .field-alert-hint { display: block; }
.concierge-submit-btn { width: 100%; padding: 14px; background: var(--fx); color: var(--f5); font-weight: 700; border: none; border-radius: 8px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; transition: all 0.2s ease; margin-top: 8px; box-shadow: 0 4px 12px rgba(0,208,132,0.2); }
.concierge-submit-btn:hover { background: #00be78; transform: translateY(-1px); box-shadow: 0 6px 15px rgba(0,208,132,0.3); }
.hidden-honeypot { display: none !important; visibility: hidden !important; }
.system-lockout-mask { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 99999; align-items: center; justify-content: center; flex-direction: column; gap: 20px; color: var(--f1); }
.system-lockout-mask.active { display: flex; }
.spinner-loader-element { width: 40px; height: 40px; border: 3px solid rgba(255,255,255,0.1); border-top-color: var(--fx); border-radius: 50%; animation: systemSpin 0.8s linear infinite; }
.lockout-notice-string { font-size: 16px; font-weight: 500; letter-spacing: 0.5px; text-align: center; padding: 0 20px; }
@keyframes bubbleReveal { from { opacity:0; transform:translateY(15px); } to { opacity:1; transform:translateY(0); } }
@keyframes systemSpin { to { transform:rotate(360deg); } }
@media (max-width: 968px) { .chat-layout-container { grid-template-columns: 1fr; gap: 40px; } .chat-card-interface { height: 740px; } }