* { box-sizing: border-box; }
:root { --ink: #17242d; --muted: #687780; --cream: #f5f4f0; --paper: #fffefa; --purple: #7256dd; --purple-dark: #5740b7; --line: #e0e2e8; --wash: #f0edfc; --mint: #dff2e9; }
html { min-width: 320px; background: var(--cream); }
body { margin: 0; min-height: 100vh; overflow-x: hidden; color: var(--ink); background: radial-gradient(circle at 10% 0%, #ebe7ff 0, transparent 32%), var(--cream); font-family: 'DM Sans', sans-serif; }
[hidden] { display: none !important; }
.topbar { min-height: 84px; padding: 16px clamp(16px, 5vw, 72px); display: flex; align-items: center; gap: 13px; border-bottom: 1px solid var(--line); background: rgba(255,254,250,.9); }
.brand-mark { width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(140deg, #8b70f2, #6048c5); color: white; display: grid; place-items: center; font: 700 13px 'Space Grotesk', sans-serif; letter-spacing: .04em; box-shadow: 0 5px 15px #7256dd35; }
.eyebrow { color: var(--purple); font-size: 10px; font-weight: 700; letter-spacing: 1.25px; text-transform: uppercase; }
h1 { margin: 3px 0 0; font: 600 21px 'Space Grotesk', sans-serif; }
.demo-label { margin-left: auto; color: var(--muted); font-size: 12px; }
.app-shell { width: min(1360px, calc(100% - 32px)); min-height: calc(100vh - 136px); margin: 26px auto; display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(340px, .68fr); gap: 22px; align-items: start; }
.conversation-panel, .rail-section { border: 1px solid var(--line); background: rgba(255,254,250,.92); box-shadow: 0 16px 44px rgba(38, 40, 69, .07); }
.conversation-panel { min-height: min(730px, calc(100vh - 136px)); display: flex; flex-direction: column; min-width: 0; }
.panel-heading { min-height: 58px; border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 22px; font-size: 13px; font-weight: 700; }
.live-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #48a77d; box-shadow: 0 0 0 4px var(--mint); }
.text-button { margin-left: auto; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--purple); font: inherit; font-size: 12px; cursor: pointer; }
.text-button:hover { background: var(--wash); }
.trial-meter { display: flex; justify-content: space-between; gap: 12px; padding: 11px 22px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.trial-meter span:first-child { color: var(--ink); font-weight: 600; }
.voice-help { margin: 0; border-bottom: 1px solid var(--line); padding: 10px 22px; color: var(--muted); background: #f8f6ff; font-size: 11px; line-height: 1.5; }
.messages { flex: 1; min-height: 260px; padding: 26px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; overscroll-behavior: contain; }
.message { max-width: 78%; animation: rise .25s ease both; line-height: 1.55; font-size: 14px; }
.message p { margin: 0; white-space: pre-wrap; }
.message.assistant { align-self: flex-start; display: flex; gap: 9px; }
.message.assistant .avatar { flex: 0 0 27px; height: 27px; border-radius: 9px; background: var(--purple); color: white; display: grid; place-items: center; font-size: 9px; font-weight: 700; }
.message.assistant p { background: #f0eefb; border-radius: 2px 14px 14px 14px; padding: 12px 15px; }
.message.user { align-self: flex-end; background: var(--purple-dark); color: white; padding: 12px 15px; border-radius: 14px 2px 14px 14px; }
.composer { display: flex; gap: 9px; padding: 16px 22px 10px; border-top: 1px solid var(--line); }
.composer input { min-width: 0; flex: 1; border: 1px solid #d7d7e0; border-radius: 8px; padding: 13px; color: var(--ink); background: white; font: inherit; outline: none; }
.composer input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px #e9e4ff; }
.composer button, .apply-button { border: 0; border-radius: 8px; background: var(--purple); color: white; padding: 0 20px; font: 700 12px 'DM Sans', sans-serif; cursor: pointer; transition: background .2s, transform .2s; }
.composer button:hover, .apply-button:hover { background: var(--purple-dark); }
.composer button:disabled, .apply-button:disabled { opacity: .5; cursor: not-allowed; }
.composer button span { margin-left: 5px; font-size: 17px; vertical-align: -1px; }
.composer .voice-button { border: 1px solid #d7d5e5; background: var(--wash); color: var(--purple-dark); }
.composer .voice-button:hover { background: #e6e0fa; }
.voice-actions { min-height: 29px; display: flex; align-items: center; gap: 11px; padding: 0 22px 9px; }
.listen-button { border: 0; padding: 4px 0; background: transparent; color: var(--purple-dark); font: 600 11px 'DM Sans', sans-serif; cursor: pointer; }
.listen-button:hover { text-decoration: underline; }
.voice-status { color: var(--muted); font-size: 10px; }
.prompt-row { padding: 0 22px 16px; display: flex; flex-wrap: wrap; gap: 7px; }
.prompt-row button { min-height: 34px; border: 1px solid #d7d5e5; border-radius: 7px; background: transparent; color: #5949a4; padding: 7px 10px; font: 500 11px 'DM Sans', sans-serif; cursor: pointer; }
.prompt-row button:hover { background: var(--wash); }
.demo-footnote { margin: 0; border-top: 1px solid #efedf4; padding: 10px 22px 12px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.insight-rail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rail-section { padding: 20px; }
.section-title { display: flex; align-items: center; gap: 9px; font: 600 15px 'Space Grotesk', sans-serif; }
.section-title > span { color: var(--purple); font-size: 10px; }
.business-title { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.field-label { display: block; margin: 14px 0 6px; color: var(--ink); font-size: 11px; font-weight: 600; }
.field-label span { color: var(--muted); font-weight: 400; }
.field-control { width: 100%; min-height: 39px; border: 1px solid #d7d7e0; border-radius: 7px; background: white; color: var(--ink); padding: 9px 10px; font: 12px 'DM Sans', sans-serif; outline: none; }
.field-control:focus { border-color: var(--purple); box-shadow: 0 0 0 3px #e9e4ff; }
.field-textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
.field-note, .privacy-note { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.apply-button { width: 100%; min-height: 39px; margin-top: 14px; }
.privacy-note { margin-top: 11px; font-size: 10px; }
.real-estate-panel { display: grid; gap: 14px; }
.property-list, .availability-list { display: grid; gap: 9px; margin-top: 13px; }
.property-card { min-width: 0; overflow-wrap: anywhere; border: 1px solid var(--line); border-radius: 7px; background: white; padding: 12px; }
.property-top { display: flex; justify-content: space-between; gap: 8px; color: var(--purple); font-size: 9px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; }
.property-card h3 { margin: 8px 0 3px; font: 600 14px 'Space Grotesk', sans-serif; }
.property-card .location, .availability-note { color: var(--muted); font-size: 11px; }
.property-facts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 10px; font-size: 10px; }
.property-price { margin-top: 10px; font-weight: 700; font-size: 13px; }
.status { color: #328362; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.status.unavailable { color: #bd614d; }
.slot { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); padding: 8px 0; font-size: 11px; }
.slot:last-child { border-bottom: 0; }.slot small { color: var(--muted); }.booked { color: #bd614d; text-transform: uppercase; font-size: 9px; font-weight: 700; }
.empty-state { color: var(--muted); font-size: 11px; line-height: 1.5; }
.site-note { padding: 0 16px 20px; color: var(--muted); text-align: center; font-size: 10px; }
@keyframes rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 940px) { .app-shell { grid-template-columns: minmax(0, 1fr) minmax(300px, .8fr); gap: 14px; } .rail-section { padding: 17px; } }
@media (max-width: 760px) { .topbar { min-height: 76px; } h1 { font-size: 18px; } .app-shell { width: min(680px, calc(100% - 24px)); min-height: 0; margin: 14px auto 20px; grid-template-columns: 1fr; } .conversation-panel { min-height: min(680px, calc(100dvh - 110px)); } .message { max-width: 88%; } }
@media (max-width: 520px) { .topbar { padding: 13px 15px; gap: 10px; } .brand-mark { width: 36px; height: 36px; } .eyebrow { font-size: 9px; letter-spacing: 1px; } h1 { font-size: 16px; } .demo-label { display: none; } .panel-heading { min-height: 54px; padding: 12px 14px; font-size: 12px; } .trial-meter { padding: 10px 14px; font-size: 10px; } .messages { min-height: 280px; padding: 18px 14px; gap: 13px; } .message { max-width: 94%; font-size: 13px; } .message.assistant { gap: 7px; } .message.assistant .avatar { flex-basis: 24px; height: 24px; } .message.assistant p, .message.user { padding: 10px 12px; } .voice-help { padding: 9px 14px; } .composer { gap: 7px; padding: 12px 14px 8px; } .composer input { padding: 11px; font-size: 13px; } .composer button { min-width: 64px; padding: 0 11px; } .voice-actions { padding: 0 14px 9px; flex-wrap: wrap; } .prompt-row { padding: 0 14px 13px; gap: 6px; } .prompt-row button { flex: 1 1 calc(50% - 6px); } .demo-footnote { padding: 9px 14px 11px; } .rail-section { padding: 16px 14px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }