:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #1c1c1f; background: #ececee; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; background: radial-gradient(circle at 13% 6%, #fff 0 1px, transparent 2px), linear-gradient(135deg, #e5e5e7, #fafafa); }
.chat-shell { width: min(820px, 100%); height: min(820px, calc(100vh - 64px)); min-height: 650px; background: rgba(255, 255, 255, .94); border: 1px solid #d8d8db; border-radius: 26px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 28px 70px rgba(20, 20, 23, .14), 0 2px 5px rgba(20, 20, 23, .04); }
.hero { position: relative; z-index: 5; flex: 0 0 auto; overflow: hidden; padding: 25px 32px 27px; color: #1c1c1f; background: linear-gradient(112deg, #fff, #fafafa 66%, #f2f2f3); border-bottom: 4px solid #c8102e; }
.hero::after { position: absolute; content: ""; width: 340px; height: 340px; right: -150px; bottom: -245px; border: 1px solid rgba(200,16,46,.19); border-radius: 50%; box-shadow: 0 0 0 30px rgba(200,16,46,.05), 0 0 0 60px rgba(200,16,46,.025); }
.brand-row, .hero-copy { position: relative; z-index: 1; }
.brand-row { display: flex; justify-content: space-between; align-items: center; }
.header-tools { display: flex; align-items: center; gap: 12px; transform: translateY(-8px); }.language-toggle { display: inline-flex; overflow: hidden; border: 1px solid #c8102e; border-radius: 7px; background: #fff; box-shadow: 0 1px 2px rgba(20,20,23,.06); }.language-toggle button { min-width: 36px; border: 0; border-left: 1px solid rgba(200,16,46,.25); padding: 5px 7px; color: #9d1028; background: transparent; font: 750 .67rem/1 inherit; cursor: pointer; transition: color .16s, background .16s; }.language-toggle button:first-child { border-left: 0; }.language-toggle button:hover { background: #fff1f3; }.language-toggle button.is-selected { color: #fff; background: #c8102e; }
.brand { display: block; line-height: 0; }.brand img { width: 116px; height: 28px; object-fit: contain; }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; color: #66666a; }
.status i { width: 7px; height: 7px; background: #c8102e; border-radius: 50%; box-shadow: 0 0 0 4px rgba(200,16,46,.1); }
.hero-copy { margin-top: 30px; }
h1 { max-width: 480px; margin: 5px 0 8px; font-size: clamp(1.65rem, 4vw, 2.2rem); letter-spacing: -.045em; line-height: 1.12; }
.hero p { margin: 0; color: #69696d; }
.eyebrow { color: #c8102e !important; font-size: .68rem; font-weight: 800; letter-spacing: .16em; }
.hero-orbit { position: absolute; right: 43px; top: 61px; width: 90px; height: 90px; border: 1px solid rgba(200,16,46,.2); border-radius: 50%; }
.hero-orbit::before, .hero-orbit::after { position: absolute; content: ""; border: 1px solid rgba(200,16,46,.14); border-radius: 50%; inset: 13px; }
.hero-orbit::after { inset: 27px; background: #c8102e; border: 0; box-shadow: 0 0 30px rgba(200,16,46,.32); }
.hero-orbit span { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #36363a; }
.hero-orbit span:nth-child(1) { left: 7px; top: 23px; }.hero-orbit span:nth-child(2) { right: 10px; bottom: 16px; }.hero-orbit span:nth-child(3) { left: 38px; top: -2px; }
#messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 26px 32px 18px; display: flex; flex-direction: column; gap: 13px; white-space: pre-wrap; scrollbar-color: #c8d3d5 transparent; }
.message { max-width: 86%; min-width: 0; padding: 13px 16px; border-radius: 16px; line-height: 1.58; font-size: .94rem; }
.assistant { align-self: flex-start; display: flex; gap: 10px; align-items: flex-start; background: #f5f5f6; border: 1px solid #e1e1e3; border-top-left-radius: 4px; }
.avatar { flex: 0 0 22px; width: 22px; height: 22px; padding: 3px; border-radius: 7px; background: #fff; border: 1px solid #d9d9dc; object-fit: contain; }
.thinking-message { padding: 11px 14px; }.thinking-content { display: flex; align-items: center; gap: 9px; color: #667176; font-size: .83rem; }.thinking-dots { display: inline-flex; align-items: center; gap: 3px; height: 10px; }.thinking-dot { width: 5px; height: 5px; border-radius: 50%; background: #e45f35; animation: thinking-pulse 1.1s ease-in-out infinite; }.thinking-dot:nth-child(2) { animation-delay: .14s; }.thinking-dot:nth-child(3) { animation-delay: .28s; }@keyframes thinking-pulse { 0%, 80%, 100% { opacity: .25; transform: translateY(1px) scale(.8); } 40% { opacity: 1; transform: translateY(-1px) scale(1.12); } }
.rich-answer { min-width: 0; flex: 1; white-space: normal; }.rich-answer > :first-child { margin-top: 0; }.rich-answer > :last-child { margin-bottom: 0; }.rich-answer p { margin: 0 0 9px; }.rich-answer h3, .rich-answer h4 { margin: 3px 0 8px; color: #27272a; font-size: .95rem; }.rich-answer ul { margin: 2px 0 9px; padding-left: 18px; }.rich-answer li { margin: 3px 0; }.rich-answer strong { color: #c8102e; font-weight: 800; }
.model-link { color: #c8102e; font-weight: 800; text-decoration: underline; text-decoration-color: rgba(200,16,46,.32); text-underline-offset: 2px; cursor: pointer; }.model-link:hover, .model-link:focus { color: #971027; text-decoration-color: currentColor; outline: none; }
.product-popover { position: fixed; z-index: 20; display: none; width: 278px; gap: 10px; padding: 10px; border: 1px solid #dddde0; border-top: 3px solid #c8102e; border-radius: 11px; background: #fff; box-shadow: 0 14px 34px rgba(20,20,24,.18); pointer-events: none; }.product-popover.is-visible { display: flex; }.product-popover img { width: 76px; height: 70px; flex: 0 0 auto; object-fit: contain; background: #f6f6f7; border-radius: 7px; mix-blend-mode: multiply; }.product-popover div { display: grid; gap: 2px; min-width: 0; }.product-popover span { color: #717176; font-size: .66rem; font-weight: 800; letter-spacing: .06em; }.product-popover strong { color: #c8102e; font-size: .78rem; line-height: 1.25; }.product-popover small { color: #56565b; font-size: .67rem; line-height: 1.35; }
.answer-note { margin: 9px 0; padding: 8px 10px; border-left: 3px solid #c8102e; border-radius: 0 7px 7px 0; color: #626266; background: #fff4f5; font-size: .74rem; line-height: 1.45; }
.table-wrap { position: relative; width: 100%; max-width: 100%; margin: 10px 0; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid #dedee1; border-radius: 10px; background: #fff; box-shadow: 0 3px 9px rgba(25,25,28,.05); }.compare-table { width: 100%; min-width: 420px; border-collapse: collapse; font-size: .78rem; line-height: 1.45; }.compare-table th { padding: 11px 10px 9px; color: #29292c; background: #f5f5f6; border-top: 3px solid #c8102e; border-bottom: 1px solid #d8d8db; text-align: left; font-weight: 750; white-space: nowrap; }.compare-table th strong { color: #29292c; }.compare-table th:first-child { color: #fff; background: #c8102e; border-top-color: #c8102e; border-bottom-color: #c8102e; }.compare-table th:first-child strong { color: #fff; }.table-product-image { display: block; width: 100%; min-width: 120px; height: 76px; margin-top: 8px; border-radius: 7px; background: #fff; overflow: hidden; }.table-product-image img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .18s ease; }.table-product-image:hover img { transform: scale(1.05); }.compare-table td { padding: 9px 10px; color: #505055; border-top: 1px solid #e7e7e9; vertical-align: top; }.compare-table td:first-child { color: #29292c; font-weight: 750; background: #f5f5f6; white-space: nowrap; }.compare-table tr:nth-child(even) td:not(:first-child) { background: #fcfcfc; }.compare-table td strong { color: #c8102e; }.compare-table td:has(strong) { font-weight: 650; }
.table-expand { position: sticky; left: calc(100% - 39px); z-index: 3; float: right; width: 32px; height: 32px; margin: 6px 6px -38px 0; border: 1px solid #d9d9dc; border-radius: 8px; background: rgba(255,255,255,.94); color: #c8102e; font-size: 1rem; cursor: pointer; box-shadow: 0 2px 6px rgba(25,25,28,.1); }.table-expand:hover { background: #fff4f5; border-color: #c8102e; }
.table-row-image { display: block; width: 58px; height: 46px; margin-top: 6px; object-fit: contain; border-radius: 6px; background: #fff; mix-blend-mode: multiply; }.table-modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 14px; background: rgba(20,20,24,.68); }.table-modal-panel { display: flex; flex-direction: column; width: min(1120px, 100%); max-height: calc(100vh - 28px); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,.3); }.table-modal-bar { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; color: #fff; background: #29292c; }.table-modal-close { border: 1px solid rgba(255,255,255,.35); border-radius: 7px; padding: 6px 9px; color: #fff; background: transparent; font: inherit; font-size: .78rem; cursor: pointer; }.table-modal-content { flex: 1; overflow: auto; padding: 12px; background: #f2f2f3; }.table-modal-content .compare-table { min-width: 760px; background: #fff; font-size: .93rem; }.table-modal-content .compare-table th { padding: 13px 14px; }.table-modal-content .compare-table td { padding: 12px 14px; }.table-modal-content .table-product-image { height: 150px; min-width: 190px; }.table-modal-content .model-link { pointer-events: auto; }
@media (max-width: 700px) { .table-modal { padding: 0; place-items: stretch; }.table-modal-panel { width: 100%; max-height: 100vh; border-radius: 0; }.table-modal-content { padding: 12px; }.table-modal-content .compare-table { min-width: 620px; font-size: .9rem; }.table-modal-content .compare-table th { padding: 12px; }.table-modal-content .compare-table td { padding: 12px; }.table-modal-content .table-product-image { height: 130px; min-width: 165px; }.table-modal-content .table-row-image { width: 70px; height: 54px; } }
.user { align-self: flex-end; background: #29292c; color: #fff; border-bottom-right-radius: 4px; box-shadow: 0 7px 15px rgba(20,20,23,.12); }
.message-model { align-self: flex-start; margin: -7px 0 1px 34px; color: #91a0a4; font-size: .68rem; font-weight: 650; letter-spacing: .02em; }
.related-label { align-self: flex-start; margin: 1px 0 -5px; color: #718287; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.source-list { align-self: flex-start; width: min(86%, 650px); margin: -4px 0 4px; color: #718287; font-size: .72rem; }.source-list summary { width: fit-content; cursor: pointer; list-style: none; }.source-list summary::before { content: '⌄'; display: inline-block; margin-right: 6px; color: #e65b30; transition: transform .18s; }.source-list[open] summary::before { transform: rotate(180deg); }.source-links { display: grid; gap: 5px; margin-top: 8px; padding: 9px 10px; border: 1px solid #dce6e4; border-radius: 9px; background: #fff; }.source-links a { color: #527077; text-decoration: none; }.source-links a:hover { color: #d94d22; text-decoration: underline; }
.suggestion-wrap { flex: 0 0 auto; padding: 0 32px 17px; }
.suggestion-wrap > p { margin: 0 0 8px; color: #819095; font-size: .72rem; font-weight: 700; letter-spacing: .08em; }
.suggestions { display: flex; gap: 8px; flex-wrap: wrap; }
.suggestions button { border: 1px solid #dae4e4; background: #fff; padding: 8px 11px; border-radius: 99px; cursor: pointer; color: #4c5e65; font: inherit; font-size: .8rem; transition: .18s ease; }
.suggestions button:hover { border-color: #c8102e; color: #c8102e; background: #fff5f6; transform: translateY(-1px); }
form { flex: 0 0 auto; padding: 17px 32px 23px; display: flex; gap: 10px; border-top: 1px solid #edf1f1; background: #fbfcfb; }
.input-wrap { position: relative; flex: 1; }
input { width: 100%; height: 48px; border: 1px solid #cbd8d8; border-radius: 13px; padding: 0 60px 0 14px; color: #152433; background: #fff; font: inherit; outline: 0; transition: border .18s, box-shadow .18s; }
input:focus { border-color: #c8102e; box-shadow: 0 0 0 3px rgba(200,16,46,.12); }
.input-hint { position: absolute; right: 10px; top: 13px; padding: 3px 5px; border: 1px solid #e0e5e4; border-radius: 5px; color: #9ba7a9; font-size: .62rem; }
form button { display: inline-flex; align-items: center; gap: 8px; height: 48px; border: 0; border-radius: 13px; padding: 0 16px; background: #c8102e; color: #fff; font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 6px 13px rgba(200,16,46,.22); transition: transform .18s, background .18s; }
form button:hover { background: #a80d26; transform: translateY(-1px); } form button b { font-size: 1.15rem; font-weight: 400; }
.product-list { display: grid; gap: 8px; margin-top: -5px; }
.product-card { display: flex; gap: 12px; text-decoration: none; color: inherit; border: 1px solid #dedee1; border-radius: 13px; padding: 10px 14px 10px 17px; background: #fff; transition: .18s ease; position: relative; overflow: hidden; }.product-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(#d9324b, #c8102e); }.product-card-body { display: grid; gap: 3px; min-width: 0; flex: 1; }.product-thumb { order: 2; width: 82px; height: 66px; object-fit: contain; mix-blend-mode: multiply; border-radius: 8px; background: #f5f5f6; }
.product-card:hover { border-color: #d85a70; transform: translateY(-1px); box-shadow: 0 7px 15px rgba(28,28,31,.08); }.product-card strong { color: #c8102e; }.product-card span { font-size: .72rem; color: #717176; font-weight: 800; letter-spacing: .06em; }.product-card small { line-height: 1.4; color: #505055; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
@media (max-width: 620px) { body { min-height: 100dvh; padding: 0; } .chat-shell { height: 100dvh; min-height: 0; border: 0; border-radius: 0; } .hero { padding: 22px 20px; }.hero-copy { margin-top: 26px; }.hero-orbit { right: 15px; top: 54px; transform: scale(.72); }.status { font-size: .64rem; } #messages { padding: 20px 12px 18px; }.message { max-width: 96%; } .suggestion-wrap { padding: 0 20px 14px; } form { padding: 14px 20px calc(19px + env(safe-area-inset-bottom, 0px)); } form button span { display: none; } form button { padding: 0 14px; } }