.hq-intro { display: flex; flex-direction: column; align-items: center; min-height: 100%; padding: 8px 0 20px; text-align: center; }
.hq-intro[hidden] { display: none; }
.hq-intro h1 { margin: 14px 0 6px; font-family: var(--hud-font); font-weight: 400; font-size: 26px; line-height: 1.3; color: #fff; text-shadow: 0 1px 8px rgba(30, 24, 48, 0.35); }
.hq-intro > p { margin: 0 0 14px; max-width: 330px; color: rgba(255, 255, 255, 0.92); font-size: 14px; line-height: 1.7; }
.hq-ic { width: 70%; height: 70%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.hq-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: min(100%, 360px); }
.hq-reason { display: grid; gap: 3px; padding: 12px 12px 11px; border: 1.5px solid #634A2E; border-radius: 16px; background: var(--grain), #FFFBF2; color: #634A2E; text-align: left; cursor: pointer; box-shadow: -4px 3px 0 rgba(48, 44, 41, 0.45); transition: translate 0.1s, box-shadow 0.1s, background-color 0.15s; }
.hq-reason b { font-family: var(--hud-font); font-weight: 400; font-size: 18px; line-height: 1.2; }
.hq-reason small { color: #8A7A66; font-size: 11.5px; font-weight: 700; line-height: 1.4; }
.hq-reason.is-urgent { border-color: #8f1d22; }
.hq-reason.is-urgent b { color: #C8323A; }
.hq-reason:active { translate: -3px 2px; box-shadow: none; }
.hq-reason[aria-pressed="true"] { background: #634A2E; box-shadow: none; translate: -3px 2px; }
.hq-reason[aria-pressed="true"] b, .hq-reason[aria-pressed="true"] small { color: #FEEBC4; }
.hq-intro .hq-urgent { margin: 14px 0 0; padding: 9px 14px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 12px; background: rgba(200, 50, 58, 0.34); color: #fff; font-size: 13.5px; font-weight: 700; line-height: 1.6; }
.hq-intro .hq-urgent[hidden] { display: none; }

.hq-tick { font-style: normal; font-size: 12px; letter-spacing: -0.12em; opacity: 0.8; }
.hq-tick.is-seen { color: #7fd6ff; opacity: 1; }
.hq-msg-time { display: block; margin-top: 3px; color: rgba(255, 255, 255, 0.75); font-size: 11px; }
.ai-user + .hq-msg-time { align-self: flex-end; }
.hq-from { margin: 0 0 4px; color: #C8323A; font-weight: 900; font-size: 12.5px; }
.hq-closed { margin: 0 0 8px; padding: 6px 12px; border-radius: 999px; background: rgba(254, 235, 196, 0.9); color: #634A2E; font-size: 12.5px; font-weight: 700; text-align: center; }
.hq-closed[hidden] { display: none; }
.hq-share { display: flex; align-items: center; gap: 8px; margin: 0 4px 8px; color: rgba(255, 255, 255, 0.92); font-size: 12.5px; font-weight: 700; }
.hq-share[hidden] { display: none; }
.hq-share input { width: 18px; height: 18px; accent-color: #634A2E; }
.hq-push { display: grid; gap: 8px; margin: 0 2px 10px; padding: 12px 14px; border: 1.5px solid #634A2E; border-radius: 16px; background: var(--grain), #FEEBC4; color: #634A2E; box-shadow: -4px 3px 0 rgba(48, 44, 41, 0.45); }
.hq-push[hidden] { display: none; }
.hq-push b { font-size: 14px; font-weight: 900; line-height: 1.4; }
.hq-push button { justify-self: start; padding: 9px 18px; border: 0; border-radius: 999px; background: #C8323A; color: #fff; font: 400 17px var(--hud-font); letter-spacing: 0.03em; cursor: pointer; }
.hq-push button[hidden] { display: none; }
.hq-push button:active { scale: 0.96; }
.hq-push span { color: #6b573b; font-size: 12.5px; font-weight: 700; line-height: 1.5; }
.hq-push span:empty { display: none; }

body.hq-page { background: linear-gradient(180deg, #3a1018, #7d1f2a 55%, #c8323a); }
.hq-page .ai-full { background: var(--grain), radial-gradient(70% 28% at 10% 4%, #8f1d22 0%, transparent 70%), radial-gradient(60% 26% at 92% 30%, #e2622e 0%, transparent 70%), radial-gradient(70% 30% at 12% 70%, #c8323a 0%, transparent 70%), linear-gradient(180deg, #3a1018 0%, #7d1f2a 40%, #c8323a 78%, #e88a5a 100%); }