.chat-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.chat-release { color: var(--accent); font-size: 13px; margin-bottom: 20px; }
.chat-intro h2 { font-size: clamp(32px, 3.8vw, 54px); line-height: 1.2; letter-spacing: -.04em; margin-bottom: 24px; }
.chat-lead { max-width: 480px; font-size: 18px; }
.chat-benefits { margin: 30px 0; }
.chat-benefits > div + div { margin-top: 22px; }
.chat-benefits dt { color: var(--text); font-size: 16px; font-weight: 600; }
.chat-benefits dd { margin: 6px 0 0; color: var(--text-soft); font-size: 14px; line-height: 1.7; }
.chat-entry { margin: 0 0 10px; font-size: 14px; color: var(--text); }
.chat-requirements { font-size: 13px; line-height: 1.8; }
.chat-download-link { font-size: 14px; color: var(--accent); }
.chat-demo-wrap { min-width: 0; }
.chat-demo { border: 1px solid var(--line-strong); border-radius: 24px; background: var(--surface); overflow: hidden; }
.chat-demo-header { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); padding: 22px; }
.chat-demo-header img { flex: none; border-radius: 50%; }
.chat-demo-header > div { min-width: 0; flex: 1; }
.chat-demo-header strong { display: block; font-size: 17px; }
.chat-demo-header span { display: block; font-size: 12px; color: var(--text-soft); margin-top: 3px; }
.chat-demo button, .chat-reset { cursor: pointer; font: 500 13px/1.4 var(--body-font); color: var(--text); }
.chat-demo-header button { background: transparent; border: 0; padding: 10px 0 10px 8px; flex: none; color: var(--text-soft); }
.chat-demo button:hover, .chat-reset:hover { color: var(--accent); }
.chat-demo-body { position: relative; min-height: 310px; }
.chat-demo-messages { height: 310px; overflow-y: auto; padding: 24px; scrollbar-width: thin; }
.chat-message { margin-bottom: 22px; }
.chat-message span { display: block; color: var(--text-soft); font-size: 12px; margin-bottom: 7px; }
.chat-message p { margin: 0; color: var(--text); font-size: 16px; line-height: 1.75; white-space: pre-line; }
.chat-message-user { text-align: right; }
.chat-message-user p { display: inline-block; padding: 10px 15px; background: var(--accent-soft); border-radius: 16px 16px 4px 16px; text-align: left; }
.chat-demo-history, .chat-demo-confirm { position: absolute; inset: 0; background: var(--surface-solid); padding: 24px; overflow-y: auto; }
.chat-demo h3 { margin: 0 0 20px; font-size: 19px; }
.chat-demo-history > button { display: flex; justify-content: space-between; width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.chat-demo-history > button[aria-current="true"] { color: var(--accent); }
.chat-demo-history span { color: var(--text-soft); font-size: 12px; }
.chat-demo-history > p, .chat-demo-confirm > p { font-size: 14px; margin-top: 20px; }
.chat-demo-confirm > div { display: flex; gap: 12px; margin-top: 28px; }
.chat-demo-confirm button { border: 1px solid var(--line-strong); padding: 10px 16px; border-radius: 10px; background: var(--surface); }
.chat-demo-composer { margin: 0 20px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-strong); display: flex; flex-direction: column; gap: 16px; }
.chat-demo-composer p { flex: 1; margin: 0; font-size: 14px; }
.chat-demo-composer button { padding: 10px 14px; border: 0; border-radius: 10px; background: var(--accent); color: var(--page); white-space: nowrap; }
.chat-demo-composer button:disabled { opacity: .55; cursor: default; }
.chat-demo-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; }
.chat-model-picker { position: relative; }
.chat-model-picker:not([open]) .chat-model-options { display: none; }
.chat-model-picker summary { display: flex; align-items: center; gap: 12px; padding: 10px 8px; cursor: pointer; color: var(--text-soft); font-size: 13px; list-style: none; }
.chat-model-picker summary::-webkit-details-marker { display: none; }
.chat-model-picker summary:focus-visible { outline: 2px solid var(--accent); border-radius: 8px; }
.chat-model-options { position: absolute; z-index: 3; bottom: calc(100% + 8px); left: 0; width: min(280px, 65vw); padding: 8px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface-solid); box-shadow: 0 12px 32px #0002; }
.chat-model-options p { padding: 8px; font-size: 11px; color: var(--text-soft); }
.chat-model-options button { display: flex; justify-content: space-between; width: 100%; background: transparent; color: var(--text); text-align: left; padding: 10px; }
.chat-model-options button span { color: var(--text-soft); font-size: 12px; }
.chat-model-options button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.chat-demo-footer { margin: 14px 20px 18px; text-align: center; font-size: 12px; }
.chat-demo-note { margin: 16px 0 0; color: var(--text-soft); font-size: 12px; line-height: 1.7; }
.chat-reset { background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); padding: 5px 0; margin-top: 8px; color: var(--text-soft); }
@media (max-width: 1000px) { .chat-section { grid-template-columns: 1fr; } .chat-demo-wrap { width: 100%; max-width: 650px; } .chat-lead { max-width: 650px; } }
@media (max-width: 480px) { .chat-demo-header { padding: 18px 14px; gap: 9px; } .chat-demo-header img { width: 32px; height: 32px; } .chat-demo-header strong { font-size: 16px; } .chat-demo-header span { font-size: 11px; } .chat-demo-messages { padding: 20px 16px; } .chat-demo-composer { margin-inline: 12px; padding: 12px; } .chat-demo-composer button { padding: 10px; } .chat-message p { font-size: 15px; } }