/* ───────── FAQ ───────── */
.faq__list { border-top: 1px solid var(--border-default); }
.qa { border-bottom: 1px solid var(--border-default); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font-size: clamp(17px, 1.4vw, 19px); font-weight: 500; letter-spacing: -.015em; }
.qa summary::-webkit-details-marker { display: none; }
.qa[open] summary { font-weight: 600; }
.qa__icon { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border-default); transition: border-color var(--t-fast) var(--e-out), background-color var(--t-fast) var(--e-out); }
.qa__icon::before, .qa__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -.75px 0 0 -5px; background: var(--text-1); border-radius: 1px; }
.qa__icon::after { transform: rotate(90deg); transition: transform var(--t-med) var(--e-out); }
.qa[open] .qa__icon::after { transform: rotate(0deg); }
.qa summary:hover .qa__icon { background: var(--bg-hover); border-color: var(--border-strong); }
.qa p { padding: 0 56px 26px 0; max-width: 62ch; font-size: 16px; }
html.js:not(.reduce-motion) .qa[open] p { animation: rise-in 250ms var(--e-out) both; }
.faq { padding: 168px var(--pad-x); border-top: 1px solid var(--border-subtle); }
/* ───────── FAQ — ask Sen about Sen ─────────
   No JS: the accordion above. JS: chips on the left, a chat window on the right;
   faq.js builds both from the accordion's own questions and answers. */
.faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head list" ; gap: 64px; }
.faq .sec-head { grid-area: head; margin: 0; }
.faq__list { grid-area: list; }
.faqwin, .faq__chips { display: none; }
html.js .faq__list { display: none; }
html.js .faq { grid-template-areas: "head win" "chips win"; grid-template-rows: auto 1fr; align-items: start; row-gap: 36px; }
html.js .faq .sec-head { margin: 0; }
html.js .faqwin { grid-area: win; display: flex; }
html.js .faq__chips { grid-area: chips; display: grid; gap: 8px; }
@media (min-width: 1025px) { html.js .faqwin { position: sticky; top: 88px; } }

.faqwin { flex-direction: column; height: min(680px, calc(100svh - 150px)); min-height: 460px; overflow: hidden; border: 1px solid var(--border-default); border-radius: 18px; background: var(--canvas-simple); box-shadow: var(--float-shadow); font-size: 15px; line-height: 1.5; }
.faqwin__bar { flex: none; position: relative; display: flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-nav); }
.faqwin__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-default); }
.faqwin__bar span { position: absolute; left: 50%; translate: -50% 0; font-size: 13px; font-weight: 500; color: var(--text-3); }
.faqwin__thread { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 18px; padding: 24px 24px 12px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-default) transparent; }
.faqwin__thread:focus-visible { outline-offset: -3px; }
.faqwin__composer { flex: none; display: flex; align-items: center; gap: 8px; margin: 8px 20px 20px; min-height: 54px; padding: 8px 8px 8px 10px; border-radius: 26px; background: var(--composer); border: 1px solid var(--composer-edge); box-shadow: var(--shadow-subtle); }
.faqwin__plus { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-subtle); color: var(--text-2); }
.faqwin__ph { flex: 1; color: var(--text-4); }
.faqwin__send { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-active); color: var(--text-3); }

.faq__you { align-self: flex-end; max-width: 82%; padding: 10px 16px; border-radius: 18px 18px 6px 18px; background: var(--bubble); font-size: 15px; scroll-margin-top: 16px; }
.faq__sen { display: flex; align-items: flex-start; gap: 12px; max-width: 92%; }
.faq__sen .om { flex: none; width: 24px; height: 24px; margin-top: 2px; }
.faq__bubble { min-width: 0; padding: 12px 16px; border-radius: 6px 18px 18px 18px; background: var(--bg-surface); border: 1px solid var(--border-subtle); }
.faq__dim { color: var(--text-3); }
.faq__bubble .w { display: inline; }
html.js:not(.reduce-motion) .faq__bubble .w:not(.on) { opacity: 0; }
html.js:not(.reduce-motion) .faq__bubble .w { transition: opacity 160ms var(--e-out); }
html.js:not(.reduce-motion) .faq__you.is-new { animation: rise-in 320ms var(--e-out) both; }
html.js:not(.reduce-motion) .faq__sen.is-new { animation: fade-in 260ms var(--e-out) both; }

.faq__chips { margin: 0; }
.faq__chip { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; padding: 10px 14px 10px 20px; border-radius: 24px; border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--text-1); font-size: 15px; font-weight: 500; line-height: 1.35; cursor: pointer; transition: background-color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out); }
.faq__chip:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.faq__chip:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 2px; }
.faq__chip-ic { flex: none; display: grid; place-items: center; color: var(--text-2); }
.faq__chip.is-asked { color: var(--text-3); background: transparent; border-color: var(--border-subtle); }
.faq__chip.is-asked .faq__chip-ic { color: var(--ok-fg); }

/* Accordion (no JS) */
.faq__list { border-top: 1px solid var(--border-default); }

@media (max-width: 1024px) {
    .faq { padding-top: 120px; padding-bottom: 120px; grid-template-columns: 1fr; grid-template-areas: "head" "list"; gap: 40px; }
    html.js .faq { grid-template-areas: "head" "win" "chips"; grid-template-rows: none; row-gap: 28px; }
    html.js .faqwin { height: max(420px, 60svh); scroll-margin-top: 16px; }
}
@media (max-width: 640px) {
    .faq { padding-top: 96px; padding-bottom: 96px; }
    .qa p { padding-right: 0; }
    .faqwin__thread { padding: 18px 16px 8px; }
    .faq__sen { max-width: 100%; }
    .faq__chip { font-size: 14.5px; padding-left: 16px; }
}