/* Home extras: mock spacing on a 4px/8px scale, conversation replay. Hiding rules sit under .hx.hxr (hx: head script, hxr: js). */
#chat .phone-body { --hx-ok: 1; position: relative; padding: 16px; gap: 8px; min-height: 344px; }
#chat .phone-topbar { padding: 12px 16px; gap: 12px; }
#chat .phone-avatar { width: 32px; height: 32px; }
#chat .bubble { max-width: 80%; padding: 8px 12px; }
#chat .bubble.in { border-bottom-left-radius: 4px; }
#chat .bubble.out { border-bottom-right-radius: 4px; }
.hx.hxr #chat .bubble { animation: none; opacity: 0; transform: none; }
.hx.hxr #chat .play .bubble { animation: hx-pop 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hx.hxr #chat .play .bubble.in { animation-delay: 0.2s; }
.hx.hxr #chat .play .bubble.out { animation-delay: 2.2s; }
.hx.hxr #chat .play .bubble.out.second { animation-delay: 4.1s; }
.hx #chat .typing { position: absolute; right: 16px; display: flex; gap: 4px; padding: 12px; border-radius: 12px 12px 4px 12px; background: var(--btn-bg); opacity: 0; }
.hx #chat .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--btn-fg); }
.hx #chat .play .typing i { animation: hx-dot 1s infinite ease-in-out; }
.hx #chat .play .typing i:nth-child(2) { animation-delay: 0.15s; }
.hx #chat .play .typing i:nth-child(3) { animation-delay: 0.3s; }
.hx #chat .play .t1 { animation: hx-typ 1.5s 0.7s both; }
.hx #chat .play .t2 { animation: hx-typ 1.5s 2.6s both; }
@keyframes hx-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes hx-typ { 0%, 100% { opacity: 0; } 10%, 90% { opacity: 1; } }
@keyframes hx-dot { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; transform: translateY(-3px); } }
.hx #chat .hx-replay { display: block; min-height: 44px; margin-top: 4px; padding: 0 4px; border: 0; background: none; color: var(--fg); font: inherit; font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; visibility: hidden; }
.hx #chat .hx-replay.show { visibility: visible; }
/* In-text links: 1px underline at rest, 2px in the accent on hover and keyboard focus */
:is(:is(#why, #cost, #chat, #diag, #offers, #contact) :is(p, li, .stat-label) a:not(.btn), .offers-all, .cost-link) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: currentColor; transition: text-decoration-thickness 0.15s, text-decoration-color 0.15s; }
:is(:is(#why, #cost, #chat, #diag, #offers, #contact) :is(p, li, .stat-label) a:not(.btn), .offers-all, .cost-link):is(:hover, :focus-visible) { text-decoration-thickness: 2px; text-decoration-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { :is(:is(#why, #cost, #chat, #diag, #offers, #contact) :is(p, li, .stat-label) a:not(.btn), .offers-all, .cost-link) { transition: none; } }