/* The try-it conversation in the hero. */
.od { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 30px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; height: 620px; max-height: calc(100svh - 120px); min-height: 480px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.02) inset; }
@media (max-width: 940px) { .od { height: 580px; max-height: none; } }

.od-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--card) 92%, transparent); }
.od-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--card-2); display: grid; place-items: center; flex: none; position: relative; }
.od-avatar svg { width: 22px; height: 22px; overflow: visible; }
.od-avatar .big { transform-origin: 58px 42px; }
.od.busy .od-avatar .big { animation: think 1.4s ease-in-out infinite; }
.od.busy .od-avatar .small { animation: orbit 1.4s ease-in-out infinite; transform-origin: 58px 42px; }
@keyframes think { 50% { transform: scale(0.86); } }
@keyframes orbit { 50% { transform: rotate(-28deg); } }
.od-who { display: grid; line-height: 1.2; min-width: 0; }
.od-who b { font-weight: 700; }
.od-status { font-size: 0.85rem; color: var(--soft); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.od-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.od.busy .od-status i { background: var(--signal); animation: pulse 1.2s infinite; }
.od-status span { transition: opacity 0.2s; }
.od-tag { margin-left: auto; font-size: 0.78rem; color: var(--faint); text-align: right; }

.od-log { overflow-y: auto; padding: 20px 20px 12px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; overscroll-behavior: contain; }
.od-log > * { margin: 0; flex: none; }
.od-log::-webkit-scrollbar { width: 6px; }
.od-log::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.od-me { align-self: flex-end; background: var(--signal); color: #fff; border-radius: 20px 20px 6px 20px; padding: 10px 15px; max-width: 82%; font-weight: 500; animation: send 0.45s var(--ease-spring) both; transform-origin: bottom right; overflow-wrap: anywhere; }
@keyframes send { from { opacity: 0; transform: translateY(40px) scale(0.7); } to { opacity: 1; transform: none; } }

.od-reply { max-width: 92%; line-height: 1.5; overflow-wrap: anywhere; }
.od-reply .word { opacity: 0; animation: fade-word 0.35s ease-out forwards; }
@keyframes fade-word { to { opacity: 1; } }
.od-caret { display: inline-block; width: 8px; height: 1.05em; background: var(--signal); margin-left: 3px; vertical-align: -0.15em; border-radius: 2px; animation: caret 0.9s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }

.od-typing { display: inline-flex; gap: 5px; align-items: center; background: var(--card-2); border-radius: 18px 18px 18px 6px; padding: 12px 15px; width: fit-content; animation: pop-in 0.3s var(--ease-spring) both; }
.od-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--soft); animation: bounce 1.1s infinite; }
.od-typing span:nth-child(2) { animation-delay: 0.15s; }
.od-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-6px); opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }

.od-steps { list-style: none; padding: 0; display: grid; gap: 7px; font-size: 0.9rem; color: var(--soft); }
.od-step { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; animation: step-in 0.35s var(--ease-out) both; }
@keyframes step-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.od-icon { width: 16px; height: 16px; flex: none; position: relative; }
.od-spin { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--signal); animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.od-icon svg { position: absolute; inset: 0; width: 16px; height: 16px; }
.od-icon svg path { fill: none; stroke: var(--ok); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; animation: draw 0.35s var(--ease-out) forwards; }
.od-step em { font-style: normal; color: var(--ink); animation: fade-word 0.4s ease-out both; }

.od-card { background: var(--card-2); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; display: grid; gap: 7px; max-width: 94%; animation: card-in 0.5s var(--ease-out) both; transform-origin: top left; }
@keyframes card-in { from { opacity: 0; transform: translateY(10px) scale(0.97); clip-path: inset(0 0 60% 0 round 18px); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 18px); } }
.od-meta { font-size: 0.8rem; color: var(--soft); }
.od-body { line-height: 1.45; }
.od-change { font-size: 0.95rem; }
.od-change s { color: var(--soft); }
.od-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.od-list li { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); gap: 10px; animation: step-in 0.35s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 0.08s); }
.od-list b { font-variant-numeric: tabular-nums; }
.od-note { margin-top: 4px; font-size: 0.9rem; color: var(--soft); }
.od-actions { display: flex; gap: 8px; margin-top: 6px; animation: step-in 0.35s var(--ease-out) 0.2s both; }
.od-yes, .od-no, .od-link { border: 0; border-radius: 999px; padding: 9px 16px; font: 700 0.9rem/1 var(--font); cursor: pointer; transition: transform 0.15s, background 0.2s; }
.od-yes { background: var(--signal); color: #fff; }
.od-yes:hover { background: var(--signal-hi); }
.od-yes:active, .od-no:active { transform: scale(0.95); }
.od-no { background: var(--line); color: var(--ink); }
.od-link { background: var(--ink); color: var(--paper); width: fit-content; display: inline-block; text-decoration: none; }
.od-yes:disabled, .od-no:disabled { opacity: 0.4; cursor: default; }
.od-wait { font-size: 0.78rem; color: var(--faint); }
.od-result { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; animation: step-in 0.35s var(--ease-out) both; }
.od-result.ok { color: var(--ok); }
.od-result.skip { color: var(--soft); font-weight: 500; }
.od-result svg { width: 18px; height: 18px; }
.od-result svg path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; animation: draw 0.4s var(--ease-out) forwards; }
.od-card.sent { animation: settle 0.5s var(--ease-out) both; }
@keyframes settle { 0% { transform: scale(1); } 40% { transform: scale(0.98); } 100% { transform: scale(1); } }
.od-sending { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--soft); }
.od-sending .od-spin { position: static; display: inline-block; width: 14px; height: 14px; }
.od-playing .eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.od-playing .eq span { width: 3px; background: var(--signal); border-radius: 2px; animation: eq 0.9s ease-in-out infinite; }
.od-playing .eq span:nth-child(2) { animation-delay: 0.2s; }
.od-playing .eq span:nth-child(3) { animation-delay: 0.4s; }
.od-playing .eq span:nth-child(4) { animation-delay: 0.1s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 16px; } }
.od-playing b { font-size: 1.1rem; }

.od-chips { display: flex; gap: 8px; padding: 10px 20px 4px; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 85%, transparent); }
.od-chips::-webkit-scrollbar { display: none; }
.od-chip { flex: none; background: transparent; color: var(--ink); border: 1.5px solid var(--line); border-radius: 999px; padding: 8px 13px; font: 500 0.9rem/1.2 var(--font); cursor: pointer; transition: border-color 0.2s, background 0.2s, transform 0.15s; animation: chip-in 0.4s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 0.06s); }
@keyframes chip-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.od-chip:hover:not(:disabled) { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 10%, transparent); }
.od-chip:active:not(:disabled) { transform: scale(0.96); }
.od-chip:disabled { opacity: 0.35; cursor: default; }
.od-chip.reset { color: var(--soft); border-style: dashed; }

.od-composer { display: flex; gap: 8px; align-items: center; margin: 8px 14px 14px; padding: 6px 6px 6px 16px; background: var(--paper); border: 1.5px solid var(--line); border-radius: 999px; transition: border-color 0.2s, box-shadow 0.2s; }
.od-composer:focus-within, .od-composer.typing { border-color: var(--signal); box-shadow: 0 0 0 4px rgba(255, 100, 64, 0.12); }
.od-composer input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 400 1rem var(--font); }
.od-composer input:focus-visible { outline: none; }
.od-composer input::placeholder { color: var(--faint); }
.od-sendbtn { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--line); color: var(--soft); display: grid; place-items: center; cursor: pointer; flex: none; transition: background 0.2s, color 0.2s, transform 0.2s var(--ease-spring); }
.od-sendbtn svg { width: 18px; height: 18px; }
.od-sendbtn.ready { background: var(--signal); color: #fff; transform: scale(1.06); }
.od-sendbtn.fire { animation: fire 0.35s var(--ease-out); }
@keyframes fire { 50% { transform: scale(0.85) rotate(-12deg); } }
.od-sendbtn:disabled { cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .od *, .od *::before, .od *::after { animation: none !important; transition: none !important; }
  .od-reply .word, .od-step em { opacity: 1 !important; }
  .od-icon svg path, .od-result svg path { stroke-dashoffset: 0 !important; }
  .od-log { scroll-behavior: auto; }
}