/* Release 331: Ask Scoutics played on the home page (static/js/home_ask.js). The chat parts repeat assistant.css (.sca-*) under .hq. */
.hq { --hq-ink: #18181b; --hq-muted: #63636b; --hq-line: #e4e4e7; --hq-pale: #f4f4f5; --hq-accent: #3030ff; padding: var(--sx-section, 6rem) 0 0; }
.hq[hidden] { display: none; }
.hq-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: center; }   /* release 332: the chat window's own width (assistant.css: 400px) */
.hq-copy { display: grid; gap: .75rem; max-width: 34rem; }
.hq-eyebrow { margin: 0; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--hq-accent); }
.hq-copy p.hq-lede { margin: 0; color: #52525b; font-size: 1.0625rem; line-height: 1.6; }
.hq-list { margin: .25rem 0 0; padding: 0; list-style: none; display: grid; gap: .45rem; color: #3f3f46; font-size: .9375rem; }
.hq-list li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--hq-accent); margin-right: .6rem; vertical-align: 2px; }
.hq-actions { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; margin-top: .75rem; }
.hq-again { font: inherit; font-size: .875rem; font-weight: 600; color: var(--hq-ink); background: #fff; border: 1px solid var(--hq-line); border-radius: 999px; padding: .5rem .9rem; cursor: pointer; }
.hq-again:hover { border-color: #a1a1aa; }
/* the chat window, as assistant.css draws it */
.hq-panel { width: 100%; max-width: 400px; justify-self: end; display: flex; flex-direction: column; height: 520px; background: #fff; border: 1px solid var(--hq-line); border-radius: 16px; box-shadow: 0 24px 60px -24px rgba(24,24,27,.35); overflow: hidden;
  font: 14px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--hq-ink); }
.hq-head { padding: 14px 16px; border-bottom: 1px solid var(--hq-line); }
.hq-head h3 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.hq-head p { margin: 2px 0 0; font-size: 12px; color: var(--hq-muted); }
.hq-log { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.hq-msg { max-width: 88%; padding: 9px 12px; border-radius: 12px; background: var(--hq-pale); word-wrap: break-word; animation: hq-in .3s ease-out; }
.hq-msg p { margin: 0; } .hq-msg p + p { margin-top: 6px; }
.hq-msg.is-user { align-self: flex-end; background: var(--hq-ink); color: #fff; }
.hq-msg.is-wait { color: var(--hq-muted); display: flex; align-items: center; gap: 8px; }
.hq-src { font-size: 11px; color: var(--hq-muted); margin-top: 6px !important; }
.hq .hq-go { color: var(--hq-accent) !important; font-weight: 600; text-decoration: none; } .hq-go:hover { text-decoration: underline; }
.hq-dots { display: inline-flex; gap: 3px; } .hq-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--hq-muted); animation: hq-b 1s infinite; }
.hq-dots i:nth-child(2) { animation-delay: .15s; } .hq-dots i:nth-child(3) { animation-delay: .3s; }
.hq-form { display: flex; align-items: center; gap: 8px; margin: 0 12px; padding: 8px; border: 1px solid var(--hq-line); border-radius: 12px; }
.hq-input { flex: 1; min-width: 0; min-height: 21px; padding: 6px 4px; color: var(--hq-ink); }
.hq-input:empty::before { content: "Ask about odds, sportsbooks or player stats"; color: #a1a1aa; }
.hq-input:not(:empty)::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 1px; background: var(--hq-ink); vertical-align: -2px; animation: hq-caret 1s steps(1) infinite; }
.hq-send { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--hq-ink); display: grid; place-items: center; }
.hq-send svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hq-foot { margin: 6px 0 0; padding: 0 14px 12px; font-size: 11px; line-height: 1.4; color: var(--hq-muted); }
@keyframes hq-b { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
@keyframes hq-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes hq-caret { 50% { opacity: 0; } }
@media (max-width: 900px) { .hq-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .hq-panel { height: 600px; justify-self: center; } }
@media (prefers-reduced-motion: reduce) { .hq-msg, .hq-dots i, .hq-input::after { animation: none; } }