Spaces:
Sleeping
Sleeping
| :root { | |
| --bg: #f4edf8; | |
| --paper: #ffffff; | |
| --paper-soft: #f2e7f6; | |
| --hero-dark: #4f4155; | |
| --hero-mid: #6a5a73; | |
| --hero-accent: #8f76a0; | |
| --ink: #2f2940; | |
| --muted: #7d748f; | |
| --line: rgba(122, 95, 146, 0.18); | |
| --violet: #8449a9; | |
| --violet-strong: #723e92; | |
| --violet-soft: #d8c7e8; | |
| --shadow: 0 18px 40px rgba(47, 41, 64, 0.08); | |
| } | |
| html, | |
| body, | |
| #root { | |
| min-height: 100%; | |
| height: 100%; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| font-family: "Trebuchet MS", "Segoe UI", sans-serif; | |
| color: var(--ink); | |
| background: var(--bg); | |
| overflow-x: hidden; | |
| } | |
| button, | |
| textarea { | |
| font: inherit; | |
| } | |
| img { | |
| max-width: 100%; | |
| } | |
| .bootScreen { | |
| min-height: 100vh; | |
| display: grid; | |
| place-items: center; | |
| padding: 24px; | |
| background: | |
| linear-gradient(135deg, rgba(79, 65, 85, 0.88), rgba(143, 118, 160, 0.68)), | |
| url("/images/cover.jpg") center/cover no-repeat; | |
| } | |
| .bootCard { | |
| width: min(420px, 92vw); | |
| padding: 28px 24px; | |
| border-radius: 24px; | |
| background: rgba(255, 255, 255, 0.9); | |
| box-shadow: var(--shadow); | |
| text-align: center; | |
| } | |
| .bootLogo { | |
| width: 72px; | |
| height: 72px; | |
| margin: 0 auto 14px; | |
| border-radius: 22px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| } | |
| .bootLogo img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .bootCard h1 { | |
| margin: 0; | |
| font-size: 32px; | |
| } | |
| .bootCard p { | |
| margin: 8px 0 18px; | |
| color: var(--muted); | |
| } | |
| .bootBar { | |
| height: 10px; | |
| border-radius: 999px; | |
| background: rgba(114, 62, 146, 0.1); | |
| overflow: hidden; | |
| } | |
| .bootBar span { | |
| display: block; | |
| width: 42%; | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--violet-soft), var(--violet), var(--violet-soft)); | |
| animation: bootSlide 1.1s infinite; | |
| } | |
| .siteShell { | |
| min-height: 100vh; | |
| } | |
| .siteNav { | |
| position: sticky; | |
| top: 0; | |
| z-index: 20; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 16px 34px; | |
| background: rgba(79, 65, 85, 0.94); | |
| color: white; | |
| backdrop-filter: blur(12px); | |
| } | |
| .siteBrand, | |
| .siteLinks button, | |
| .footerGrid button { | |
| border: none; | |
| background: transparent; | |
| cursor: pointer; | |
| } | |
| .siteBrand { | |
| color: white; | |
| font-size: 26px; | |
| font-weight: 700; | |
| letter-spacing: 0.4px; | |
| } | |
| .siteLinks { | |
| display: flex; | |
| align-items: center; | |
| gap: 22px; | |
| } | |
| .siteLinks button { | |
| color: rgba(255, 255, 255, 0.88); | |
| font-weight: 600; | |
| } | |
| .siteLinks .navCta { | |
| color: white; | |
| font-weight: 800; | |
| } | |
| .heroSection { | |
| position: relative; | |
| min-height: 500px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 72px 24px; | |
| background: | |
| linear-gradient(130deg, rgba(58, 46, 67, 0.54), rgba(111, 92, 124, 0.38)), | |
| linear-gradient(145deg, rgba(255, 255, 255, 0.04) 18%, transparent 18%, transparent 37%, rgba(255, 255, 255, 0.03) 37%, rgba(255, 255, 255, 0.03) 58%, transparent 58%), | |
| url("/images/sitecover.png") center/cover no-repeat; | |
| color: white; | |
| overflow: hidden; | |
| } | |
| .heroOverlay { | |
| position: absolute; | |
| inset: 0; | |
| background: | |
| linear-gradient(125deg, rgba(255, 255, 255, 0.04) 18%, transparent 18%, transparent 40%, rgba(255, 255, 255, 0.03) 40%, rgba(255, 255, 255, 0.03) 68%, transparent 68%); | |
| pointer-events: none; | |
| } | |
| .heroContent { | |
| position: relative; | |
| width: min(980px, 100%); | |
| text-align: center; | |
| } | |
| .heroLead { | |
| margin: 0; | |
| font-size: clamp(26px, 4vw, 52px); | |
| font-weight: 300; | |
| } | |
| .heroContent h1 { | |
| margin: 10px 0 0; | |
| font-size: clamp(48px, 7vw, 96px); | |
| line-height: 0.95; | |
| color: #d98fff; | |
| } | |
| .heroContent h2 { | |
| margin: 4px 0 0; | |
| font-size: clamp(28px, 4vw, 56px); | |
| font-weight: 400; | |
| } | |
| .heroSubtext { | |
| width: min(760px, 100%); | |
| margin: 28px auto 0; | |
| font-size: 19px; | |
| line-height: 1.7; | |
| color: rgba(255, 255, 255, 0.9); | |
| } | |
| .heroActions { | |
| margin-top: 28px; | |
| display: flex; | |
| justify-content: center; | |
| gap: 16px; | |
| flex-wrap: wrap; | |
| } | |
| .primaryBtn, | |
| .secondaryBtn, | |
| .ghost, | |
| .sendBtn { | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; | |
| } | |
| .primaryBtn { | |
| border: none; | |
| background: var(--violet); | |
| color: white; | |
| padding: 13px 24px; | |
| font-weight: 700; | |
| box-shadow: 0 10px 24px rgba(114, 62, 146, 0.26); | |
| } | |
| .primaryBtn:hover, | |
| .secondaryBtn:hover, | |
| .ghost:hover, | |
| .sendBtn:hover { | |
| transform: translateY(-1px); | |
| } | |
| .secondaryBtn { | |
| border: 1px solid rgba(255, 255, 255, 0.65); | |
| background: rgba(255, 255, 255, 0.08); | |
| color: white; | |
| padding: 13px 24px; | |
| font-weight: 700; | |
| } | |
| .wide { | |
| width: 100%; | |
| } | |
| .container { | |
| width: min(1120px, calc(100vw - 48px)); | |
| margin: 0 auto; | |
| } | |
| .container.narrow { | |
| width: min(920px, calc(100vw - 48px)); | |
| } | |
| .introBand, | |
| .lavenderSection, | |
| .copyrightBar { | |
| background: var(--paper-soft); | |
| } | |
| .introBand { | |
| padding: 28px 0; | |
| text-align: center; | |
| } | |
| .introBand p { | |
| margin: 0; | |
| font-size: 20px; | |
| line-height: 1.8; | |
| color: var(--muted); | |
| } | |
| .contentSection, | |
| .splitSection, | |
| .lavenderSection { | |
| padding: 72px 0; | |
| } | |
| .sectionHeading { | |
| margin: 0 auto 34px; | |
| max-width: 760px; | |
| text-align: center; | |
| } | |
| .sectionHeading h2 { | |
| margin: 0; | |
| font-size: 48px; | |
| } | |
| .sectionHeading p { | |
| margin: 14px 0 0; | |
| color: var(--muted); | |
| font-size: 18px; | |
| line-height: 1.7; | |
| } | |
| .featureGrid, | |
| .miniGrid { | |
| display: grid; | |
| gap: 26px; | |
| align-items: stretch; | |
| justify-content: center; | |
| } | |
| .featureGrid { | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| max-width: 980px; | |
| margin: 0 auto; | |
| } | |
| .miniGrid { | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| max-width: 1120px; | |
| margin: 0 auto; | |
| } | |
| .featureCard, | |
| .miniCard, | |
| .signupCard, | |
| .benefitPanel, | |
| .chatIntroCard, | |
| .card { | |
| background: var(--paper); | |
| border: 1px solid var(--line); | |
| box-shadow: var(--shadow); | |
| } | |
| .featureCard, | |
| .miniCard { | |
| padding: 28px 24px; | |
| border-radius: 18px; | |
| text-align: center; | |
| min-height: 320px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .featureIcon, | |
| .miniIcon { | |
| margin: 0 auto 20px; | |
| font-size: 32px; | |
| min-height: 40px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .featureCard h3, | |
| .miniCard h3 { | |
| margin: 0 0 14px; | |
| font-size: 24px; | |
| color: var(--violet-strong); | |
| min-height: 64px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .featureCard p, | |
| .miniCard p { | |
| margin: 0; | |
| color: var(--muted); | |
| line-height: 1.65; | |
| max-width: 250px; | |
| } | |
| .splitLayout, | |
| .supportGrid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 34px; | |
| align-items: center; | |
| } | |
| .imagePanel { | |
| border-radius: 18px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| } | |
| .imagePanel img { | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| min-height: 420px; | |
| object-fit: cover; | |
| } | |
| .textPanel h2, | |
| .signupCard h2, | |
| .benefitPanel h2 { | |
| margin: 0 0 18px; | |
| font-size: 42px; | |
| } | |
| .offerList, | |
| .benefitList { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 18px; | |
| } | |
| .offerList { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .offerList li, | |
| .benefitList div { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| padding-bottom: 16px; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .offerList strong, | |
| .benefitList strong { | |
| color: var(--violet-strong); | |
| font-size: 18px; | |
| } | |
| .offerList span, | |
| .benefitList span, | |
| .signupCard p, | |
| .finePrint, | |
| .siteFooter p, | |
| .siteFooter span { | |
| color: var(--muted); | |
| line-height: 1.7; | |
| } | |
| .signupCard, | |
| .benefitPanel { | |
| padding: 30px; | |
| border-radius: 20px; | |
| } | |
| .ctaStack { | |
| margin-top: 24px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .finePrint { | |
| margin: 18px 0 0; | |
| font-size: 14px; | |
| } | |
| .siteFooter { | |
| padding-top: 44px; | |
| background: var(--paper-soft); | |
| } | |
| .footerGrid { | |
| display: grid; | |
| grid-template-columns: 1.2fr 1fr 1fr; | |
| gap: 32px; | |
| padding-bottom: 36px; | |
| } | |
| .footerGrid h3 { | |
| margin: 0 0 16px; | |
| font-size: 22px; | |
| } | |
| .footerGrid button, | |
| .footerGrid span { | |
| display: block; | |
| margin-bottom: 10px; | |
| text-align: left; | |
| color: var(--muted); | |
| } | |
| .copyrightBar { | |
| padding: 18px 24px 26px; | |
| text-align: center; | |
| color: var(--muted); | |
| font-size: 14px; | |
| } | |
| .app { | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .app.chatPage { | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| .topbar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 16px; | |
| padding: 16px 24px; | |
| background: rgba(255, 255, 255, 0.92); | |
| border-bottom: 1px solid var(--line); | |
| backdrop-filter: blur(12px); | |
| } | |
| .brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| } | |
| .logo { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 16px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| } | |
| .logo img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .topbar h1 { | |
| margin: 0; | |
| font-size: 28px; | |
| } | |
| .topbar p { | |
| margin: 4px 0 0; | |
| color: var(--muted); | |
| } | |
| .topActions { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .ghost { | |
| border: 1px solid var(--line); | |
| background: white; | |
| color: var(--ink); | |
| padding: 12px 16px; | |
| font-weight: 700; | |
| } | |
| .main { | |
| flex: 1; | |
| display: grid; | |
| grid-template-columns: 1fr 340px; | |
| gap: 18px; | |
| padding: 16px 24px 16px; | |
| align-items: stretch; | |
| min-height: 0; | |
| overflow: hidden; | |
| } | |
| .chatArea { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| min-height: 0; | |
| height: 100%; | |
| min-width: 0; | |
| } | |
| .chatIntroCard, | |
| .card { | |
| padding: 16px 18px; | |
| border-radius: 18px; | |
| } | |
| .chatIntroCard { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| .chatIntroTop { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| gap: 18px; | |
| } | |
| .introBadge { | |
| padding: 8px 12px; | |
| border-radius: 999px; | |
| background: rgba(132, 73, 169, 0.1); | |
| color: var(--violet-strong); | |
| font-size: 13px; | |
| font-weight: 700; | |
| white-space: nowrap; | |
| } | |
| .chatIntroCard h2, | |
| .card h2 { | |
| margin: 0 0 8px; | |
| font-size: 24px; | |
| } | |
| .chatIntroCard p, | |
| .muted { | |
| margin: 0; | |
| color: var(--muted); | |
| line-height: 1.5; | |
| font-size: 16px; | |
| } | |
| .statusBar, | |
| .statusNote, | |
| .escalationCard, | |
| .authHint, | |
| .authUserLabel { | |
| color: var(--muted); | |
| line-height: 1.5; | |
| } | |
| .statusBar, | |
| .statusNote { | |
| border-radius: 14px; | |
| padding: 10px 12px; | |
| background: rgba(132, 73, 169, 0.06); | |
| border: 1px solid rgba(132, 73, 169, 0.1); | |
| } | |
| .statusNote { | |
| background: rgba(255, 255, 255, 0.9); | |
| } | |
| .escalationCard { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| border-radius: 14px; | |
| padding: 12px 14px; | |
| background: rgba(196, 62, 62, 0.08); | |
| border: 1px solid rgba(196, 62, 62, 0.22); | |
| color: #8e2d2d; | |
| } | |
| .chatBox { | |
| flex: 1; | |
| min-height: 0; | |
| overflow-y: auto; | |
| padding: 16px; | |
| border-radius: 20px; | |
| background: rgba(255, 255, 255, 0.88); | |
| border: 1px solid var(--line); | |
| box-shadow: var(--shadow); | |
| } | |
| .row { | |
| display: flex; | |
| margin-bottom: 14px; | |
| } | |
| .row.user { | |
| justify-content: flex-end; | |
| } | |
| .bubble { | |
| max-width: min(760px, 90%); | |
| padding: 14px 16px; | |
| border-radius: 18px; | |
| background: white; | |
| border: 1px solid var(--line); | |
| box-shadow: 0 8px 20px rgba(47, 41, 64, 0.05); | |
| } | |
| .bubble.user { | |
| background: linear-gradient(135deg, rgba(132, 73, 169, 0.12), rgba(132, 73, 169, 0.04)); | |
| } | |
| .bubbleText { | |
| white-space: pre-wrap; | |
| line-height: 1.6; | |
| } | |
| .meta { | |
| margin-top: 10px; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| .escalationBanner { | |
| margin-top: 12px; | |
| padding: 12px 14px; | |
| border-radius: 14px; | |
| background: rgba(196, 62, 62, 0.08); | |
| border: 1px solid rgba(196, 62, 62, 0.22); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| color: #8e2d2d; | |
| } | |
| .chip { | |
| padding: 5px 9px; | |
| border-radius: 999px; | |
| border: 1px solid var(--line); | |
| background: rgba(244, 237, 248, 0.95); | |
| color: var(--violet-strong); | |
| font-size: 12px; | |
| } | |
| .composer { | |
| display: flex; | |
| gap: 12px; | |
| padding: 12px; | |
| border-radius: 18px; | |
| background: rgba(255, 255, 255, 0.92); | |
| border: 1px solid var(--line); | |
| box-shadow: var(--shadow); | |
| } | |
| .suggestionBtn { | |
| text-align: left; | |
| border: 1px solid var(--line); | |
| background: rgba(250, 242, 252, 0.92); | |
| border-radius: 16px; | |
| padding: 12px 14px; | |
| cursor: pointer; | |
| color: var(--violet-strong); | |
| box-shadow: 0 6px 14px rgba(47, 41, 64, 0.04); | |
| } | |
| textarea { | |
| flex: 1; | |
| resize: none; | |
| border-radius: 12px; | |
| border: 1px solid var(--line); | |
| padding: 12px 14px; | |
| min-height: 74px; | |
| outline: none; | |
| } | |
| textarea:focus { | |
| border-color: rgba(132, 73, 169, 0.44); | |
| box-shadow: 0 0 0 3px rgba(132, 73, 169, 0.12); | |
| } | |
| .sendBtn { | |
| min-width: 122px; | |
| border: none; | |
| background: var(--violet); | |
| color: white; | |
| font-weight: 800; | |
| } | |
| .sendBtn:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| } | |
| .sidePanel { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 14px; | |
| min-height: 0; | |
| height: 100%; | |
| overflow-y: auto; | |
| padding-right: 4px; | |
| } | |
| .sidePanel > .card, | |
| .sidePanel > .authCard, | |
| .sidePanel > .conversationCard { | |
| min-width: 0; | |
| } | |
| .suggestions { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| margin-top: 10px; | |
| } | |
| .suggestionBtn:hover { | |
| background: rgba(244, 232, 249, 0.98); | |
| border-color: rgba(132, 73, 169, 0.28); | |
| } | |
| .sidePanel .card { | |
| padding: 14px 16px; | |
| border-radius: 16px; | |
| } | |
| .authCard { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .authHeader { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .authToggle { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 8px; | |
| } | |
| .authTab { | |
| border: 1px solid var(--line); | |
| border-radius: 12px; | |
| background: rgba(255, 255, 255, 0.92); | |
| color: var(--ink); | |
| padding: 10px 12px; | |
| cursor: pointer; | |
| font-weight: 700; | |
| } | |
| .authTab.active { | |
| background: rgba(132, 73, 169, 0.12); | |
| color: var(--violet-strong); | |
| border-color: rgba(132, 73, 169, 0.24); | |
| } | |
| .authField { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| color: var(--ink); | |
| font-size: 14px; | |
| font-weight: 600; | |
| } | |
| .authField input { | |
| width: 100%; | |
| border-radius: 12px; | |
| border: 1px solid var(--line); | |
| padding: 11px 12px; | |
| outline: none; | |
| } | |
| .authField input:focus { | |
| border-color: rgba(132, 73, 169, 0.44); | |
| box-shadow: 0 0 0 3px rgba(132, 73, 169, 0.12); | |
| } | |
| .authActions { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .authUserLabel { | |
| margin: 0; | |
| font-weight: 700; | |
| color: var(--violet-strong); | |
| word-break: break-word; | |
| } | |
| .conversationCard { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .conversationHeader { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| } | |
| .conversationAction { | |
| padding: 8px 12px; | |
| } | |
| .conversationList { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| max-height: 240px; | |
| overflow-y: auto; | |
| } | |
| .conversationItem { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| text-align: left; | |
| border: 1px solid var(--line); | |
| background: rgba(250, 242, 252, 0.92); | |
| border-radius: 14px; | |
| padding: 12px 14px; | |
| cursor: pointer; | |
| color: var(--ink); | |
| } | |
| .conversationItem strong { | |
| color: var(--violet-strong); | |
| } | |
| .conversationItem span, | |
| .conversationItem small { | |
| color: var(--muted); | |
| } | |
| .conversationItem.active { | |
| background: rgba(132, 73, 169, 0.14); | |
| border-color: rgba(132, 73, 169, 0.28); | |
| } | |
| .deleteConversationBtn { | |
| color: #7f2d2d; | |
| } | |
| .sidePanel .card h2 { | |
| margin-bottom: 6px; | |
| font-size: 22px; | |
| } | |
| .sidePanel .muted { | |
| font-size: 15px; | |
| line-height: 1.45; | |
| } | |
| .sidePanel .suggestionBtn { | |
| padding: 10px 14px; | |
| border-radius: 14px; | |
| font-size: 15px; | |
| line-height: 1.35; | |
| } | |
| .medicalShortcut { | |
| gap: 10px; | |
| } | |
| .symptomForm { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| margin-top: 10px; | |
| } | |
| .symptomField { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--ink); | |
| } | |
| .symptomField select, | |
| .symptomField input, | |
| .symptomField textarea { | |
| width: 100%; | |
| border-radius: 12px; | |
| border: 1px solid var(--line); | |
| padding: 11px 12px; | |
| outline: none; | |
| background: white; | |
| } | |
| .symptomField select:focus, | |
| .symptomField input:focus, | |
| .symptomField textarea:focus { | |
| border-color: rgba(132, 73, 169, 0.44); | |
| box-shadow: 0 0 0 3px rgba(132, 73, 169, 0.12); | |
| } | |
| .symptomSplit { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 10px; | |
| } | |
| .symptomChecks { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 8px 12px; | |
| } | |
| .symptomChecks label { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 8px; | |
| color: var(--muted); | |
| font-size: 14px; | |
| line-height: 1.35; | |
| } | |
| .symptomChecks input { | |
| margin-top: 2px; | |
| } | |
| .typing { | |
| display: flex; | |
| gap: 6px; | |
| } | |
| .compactInfo { | |
| padding-top: 16px; | |
| } | |
| .medicalShortcut { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 14px; | |
| } | |
| .medicalShell { | |
| padding: 18px 24px 24px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 18px; | |
| } | |
| .medicalHero { | |
| padding: 24px; | |
| } | |
| .medicalHero h2 { | |
| margin: 0 0 10px; | |
| font-size: 36px; | |
| } | |
| .medicalGrid { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 18px; | |
| align-items: start; | |
| } | |
| .medicalCard { | |
| padding: 22px; | |
| align-self: start; | |
| } | |
| .medicalCard h3 { | |
| margin: 0 0 12px; | |
| font-size: 24px; | |
| color: var(--violet-strong); | |
| } | |
| .doctorList { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 18px; | |
| } | |
| .doctorList > div { | |
| padding-bottom: 16px; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .doctorList > div:last-child { | |
| padding-bottom: 0; | |
| border-bottom: none; | |
| } | |
| .doctorList strong { | |
| display: block; | |
| margin-bottom: 6px; | |
| color: var(--ink); | |
| } | |
| .doctorList p { | |
| margin: 4px 0; | |
| color: var(--muted); | |
| line-height: 1.65; | |
| } | |
| .medicalList { | |
| margin: 0; | |
| padding-left: 20px; | |
| color: var(--muted); | |
| line-height: 1.8; | |
| } | |
| .medicalActions { | |
| margin-top: 18px; | |
| } | |
| .medicalDoctors { | |
| grid-row: span 2; | |
| } | |
| .typing span { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 999px; | |
| background: var(--violet); | |
| animation: bounce 1.1s infinite; | |
| } | |
| .typing span:nth-child(2) { | |
| animation-delay: 0.15s; | |
| } | |
| .typing span:nth-child(3) { | |
| animation-delay: 0.3s; | |
| } | |
| @media (max-width: 1400px) { | |
| .main { | |
| grid-template-columns: minmax(0, 1fr) 300px; | |
| gap: 14px; | |
| padding: 14px 18px; | |
| } | |
| .topbar { | |
| padding: 14px 18px; | |
| } | |
| .topbar h1 { | |
| font-size: 26px; | |
| } | |
| .topbar p { | |
| font-size: 14px; | |
| } | |
| .chatIntroCard, | |
| .card { | |
| padding: 14px 16px; | |
| } | |
| .chatBox { | |
| padding: 14px; | |
| } | |
| .bubble { | |
| max-width: min(680px, 94%); | |
| } | |
| } | |
| @media (max-width: 1200px) { | |
| .app.chatPage { | |
| height: auto; | |
| min-height: 100vh; | |
| overflow: visible; | |
| } | |
| .main { | |
| grid-template-columns: 1fr; | |
| gap: 14px; | |
| padding: 14px 16px 18px; | |
| overflow: visible; | |
| } | |
| .chatArea, | |
| .sidePanel { | |
| height: auto; | |
| min-height: auto; | |
| } | |
| .sidePanel { | |
| overflow: visible; | |
| padding-right: 0; | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 12px; | |
| } | |
| .sidePanel .card, | |
| .sidePanel .authCard, | |
| .sidePanel .conversationCard { | |
| height: 100%; | |
| } | |
| .chatBox { | |
| min-height: 420px; | |
| max-height: 56vh; | |
| } | |
| .composer { | |
| position: sticky; | |
| bottom: 12px; | |
| z-index: 10; | |
| } | |
| } | |
| @media (max-width: 980px) { | |
| .siteNav, | |
| .topbar { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| .siteLinks { | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| } | |
| .featureGrid, | |
| .miniGrid, | |
| .splitLayout, | |
| .supportGrid, | |
| .footerGrid, | |
| .main, | |
| .medicalGrid, | |
| .symptomSplit, | |
| .symptomChecks { | |
| grid-template-columns: 1fr; | |
| } | |
| .miniGrid { | |
| max-width: none; | |
| } | |
| .chatIntroTop { | |
| flex-direction: column; | |
| } | |
| .heroContent h1 { | |
| font-size: clamp(44px, 12vw, 78px); | |
| } | |
| .heroContent h2 { | |
| font-size: clamp(26px, 7vw, 42px); | |
| } | |
| } | |
| @media (max-width: 720px) { | |
| .siteNav, | |
| .topbar, | |
| .main, | |
| .medicalShell { | |
| padding-left: 16px; | |
| padding-right: 16px; | |
| } | |
| .container, | |
| .container.narrow { | |
| width: min(100vw - 32px, 100%); | |
| } | |
| .heroSection { | |
| min-height: 420px; | |
| padding: 56px 18px; | |
| background-position: 68% center; | |
| } | |
| .sectionHeading h2, | |
| .textPanel h2, | |
| .signupCard h2, | |
| .benefitPanel h2 { | |
| font-size: 34px; | |
| } | |
| .bubble { | |
| max-width: 100%; | |
| } | |
| .composer { | |
| flex-direction: column; | |
| position: sticky; | |
| bottom: 8px; | |
| } | |
| .sendBtn { | |
| min-height: 48px; | |
| width: 100%; | |
| } | |
| .siteBrand { | |
| font-size: 22px; | |
| } | |
| .siteLinks { | |
| width: 100%; | |
| justify-content: flex-start; | |
| } | |
| .topActions { | |
| width: 100%; | |
| flex-wrap: wrap; | |
| } | |
| .topActions .ghost { | |
| flex: 1 1 180px; | |
| } | |
| .featureCard, | |
| .miniCard, | |
| .signupCard, | |
| .benefitPanel, | |
| .medicalCard { | |
| min-height: auto; | |
| } | |
| .featureCard h3, | |
| .miniCard h3 { | |
| min-height: auto; | |
| } | |
| .featureCard p, | |
| .miniCard p { | |
| max-width: none; | |
| } | |
| .heroSubtext { | |
| margin-top: 18px; | |
| font-size: 16px; | |
| line-height: 1.6; | |
| } | |
| .introBand p, | |
| .sectionHeading p { | |
| font-size: 16px; | |
| line-height: 1.6; | |
| } | |
| .main { | |
| padding-bottom: 20px; | |
| } | |
| .chatIntroCard h2, | |
| .card h2 { | |
| font-size: 21px; | |
| } | |
| .sidePanel { | |
| grid-template-columns: 1fr; | |
| } | |
| .chatBox { | |
| min-height: 340px; | |
| max-height: none; | |
| } | |
| .meta { | |
| gap: 6px; | |
| } | |
| .chip { | |
| font-size: 11px; | |
| padding: 4px 8px; | |
| } | |
| .medicalHero h2 { | |
| font-size: 30px; | |
| } | |
| .medicalCard h3 { | |
| font-size: 22px; | |
| } | |
| } | |
| @media (max-width: 560px) { | |
| .siteNav, | |
| .topbar, | |
| .main, | |
| .medicalShell { | |
| padding-left: 12px; | |
| padding-right: 12px; | |
| } | |
| .siteNav { | |
| padding-top: 12px; | |
| padding-bottom: 12px; | |
| } | |
| .siteLinks { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 10px; | |
| } | |
| .siteLinks button { | |
| width: 100%; | |
| text-align: left; | |
| padding: 10px 0; | |
| } | |
| .heroSection { | |
| min-height: 360px; | |
| padding: 44px 14px; | |
| background-position: 72% center; | |
| } | |
| .heroLead { | |
| font-size: clamp(20px, 7vw, 28px); | |
| } | |
| .heroContent h1 { | |
| margin-top: 8px; | |
| font-size: clamp(34px, 14vw, 52px); | |
| line-height: 1; | |
| } | |
| .heroContent h2 { | |
| font-size: clamp(20px, 9vw, 32px); | |
| } | |
| .heroActions { | |
| gap: 10px; | |
| } | |
| .heroActions .primaryBtn, | |
| .heroActions .secondaryBtn, | |
| .ctaStack .primaryBtn, | |
| .ctaStack .secondaryBtn, | |
| .medicalActions .primaryBtn { | |
| width: 100%; | |
| } | |
| .chatIntroCard, | |
| .card, | |
| .chatBox, | |
| .composer, | |
| .signupCard, | |
| .benefitPanel, | |
| .medicalHero, | |
| .medicalCard { | |
| border-radius: 14px; | |
| } | |
| .chatBox { | |
| padding: 12px; | |
| } | |
| .chatIntroCard, | |
| .card { | |
| padding: 12px 13px; | |
| } | |
| .bubble { | |
| padding: 12px 13px; | |
| border-radius: 14px; | |
| } | |
| .meta { | |
| display: none; | |
| } | |
| .topbar h1 { | |
| font-size: 24px; | |
| } | |
| .topbar p { | |
| font-size: 14px; | |
| } | |
| .logo { | |
| width: 42px; | |
| height: 42px; | |
| border-radius: 12px; | |
| } | |
| textarea { | |
| min-height: 64px; | |
| } | |
| .composer textarea, | |
| .symptomField select, | |
| .symptomField input, | |
| .symptomField textarea, | |
| .authField input, | |
| textarea { | |
| font-size: 16px; | |
| } | |
| .medicalList { | |
| padding-left: 18px; | |
| } | |
| } | |
| @keyframes bootSlide { | |
| 0% { | |
| transform: translateX(-60%); | |
| } | |
| 100% { | |
| transform: translateX(160%); | |
| } | |
| } | |
| @keyframes bounce { | |
| 0%, | |
| 80%, | |
| 100% { | |
| transform: translateY(0); | |
| opacity: 0.45; | |
| } | |
| 40% { | |
| transform: translateY(-5px); | |
| opacity: 1; | |
| } | |
| } | |