/* Visible in AI search */
.as { display: grid; gap: 1.25rem; max-width: 980px; }
.as h3 { font-size: var(--t-l); margin-bottom: .2rem; }
.as p { margin: 0; }
.as-top { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.as-toggle { display: inline-flex; background: var(--paper-3); border-radius: var(--r-pill); padding: 4px; }
.as-tab { border: 0; background: transparent; padding: .5em 1.1em; border-radius: var(--r-pill); font-weight: 600; font-size: var(--t-s); cursor: pointer; color: var(--ink-2); transition: background .2s, color .2s; }
.as-tab[aria-pressed="true"] { background: var(--ink); color: #fff; }
.as-tab:not([aria-pressed="true"]):hover { background: var(--line); }

/* mock window */
.as-win { background: var(--paper); border-radius: var(--r-l); box-shadow: var(--shadow-device); overflow: hidden; display: flex; flex-direction: column; min-height: 470px; }
.as-winbar { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.as-replay { margin-left: auto; padding: .4em .9em; }
.as-logo { width: 22px; height: 22px; border-radius: 7px; background: conic-gradient(from 200deg, var(--mint), var(--ink-3), var(--mint)); display: inline-block; }
.as-chat { flex: 1; padding: 1.25rem 1.25rem 1rem; display: grid; gap: 1.25rem; align-content: start; }
.as-user { justify-self: end; max-width: 80%; background: var(--paper-3); border-radius: 18px; border-bottom-right-radius: 6px; padding: .7rem 1rem; min-height: 2.6rem; }
.as-user span { display: inline; }
.as-ans { display: grid; grid-template-columns: 30px 1fr; gap: .8rem; align-items: start; min-height: 220px; }
.as-avatar { width: 30px; height: 30px; border-radius: 10px; background: conic-gradient(from 200deg, var(--mint), var(--ink-3), var(--mint)); }
.as-acol { display: grid; gap: .8rem; min-width: 0; }
.as-acol .typing-dots { justify-self: start; }
.as-acol p { line-height: 1.55; }
.as-ideas { margin: 0; padding-left: 1.2rem; display: grid; gap: .2rem; }
.as-ideas li { animation: rise .35s var(--ease-out) both; }
.as-prods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.as-prod { align-content: start; }
.as-prod img { aspect-ratio: 1; }
.as-deal { animation: asdeal .5s var(--ease-spring) both; }
@keyframes asdeal { from { opacity: 0; transform: translateY(18px) rotate(-3deg) scale(.94); } to { opacity: 1; transform: none; } }
.as-sources { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s var(--ease-out); }
.as-sources.as-in { opacity: 1; transform: none; }
.as-src { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--t-xs); font-weight: 600; background: var(--paper-2); box-shadow: 0 0 0 1px var(--line); padding: .25em .7em .25em .3em; border-radius: var(--r-pill); }
.as-src i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; background: var(--paper-3); display: grid; place-items: center; font-size: 11px; }
.as-composer { margin: 0 1.25rem 1.1rem; padding: .7rem 1rem; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink-3); font-size: var(--t-s); }

/* scorecard */
.as-score { background: var(--paper); border-radius: var(--r-l); box-shadow: 0 0 0 1px var(--line); padding: 1.25rem; display: grid; gap: 1.1rem; }
.as-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.as-gauge-card { position: sticky; top: 1rem; display: grid; justify-items: center; gap: .3rem; text-align: center; background: var(--paper-2); border-radius: var(--r-m); padding: 1rem .8rem; }
.as-gauge { width: 100%; max-width: 220px; overflow: visible; }
.as-arc-bg, .as-arc { fill: none; stroke-width: 16; stroke-linecap: round; }
.as-arc-bg { stroke: var(--paper-3); }
.as-arc { stroke: var(--mint); }
.as-gnum { margin-top: -3.4rem; display: grid; line-height: 1; }
.as-gnum b { font-family: var(--f-display); font-size: var(--t-3xl); font-variant-numeric: tabular-nums; }
.as-gnum span { font-size: var(--t-xs); color: var(--ink-3); margin-top: .2rem; }
.as-gnote { font-weight: 600; margin-top: .5rem !important; }
.as-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.as-row { display: grid; grid-template-columns: 28px 1fr; gap: .8rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.as-row:first-child { padding-top: 0; }
.as-row:last-child { border-bottom: 0; }
.as-row.is-flip { animation: asflip .45s var(--ease-out); }
@keyframes asflip { from { background: var(--yellow-soft); } to { background: transparent; } }
.as-ico { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-3); color: var(--ink-3); transition: background .3s, color .3s; }
.as-ico[data-s="ok"] { background: var(--mint); color: #fff; }
.as-ico[data-s="warn"] { background: var(--yellow); color: var(--ink); }
.as-ico[data-s="bad"] { background: var(--red); color: #fff; }
.as-rmain { display: grid; gap: .35rem; min-width: 0; }
.as-rtitle { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.as-state { margin-left: auto; font-size: var(--t-xs); font-weight: 700; padding: .15em .6em; border-radius: var(--r-pill); background: var(--paper-3); }
.as-state[data-s="ok"] { background: var(--mint-soft); color: #11776d; }
.as-state[data-s="warn"] { background: var(--yellow-soft); color: #8a6a00; }
.as-state[data-s="bad"] { background: var(--red-soft); color: var(--red); }
.as-bar { height: 8px; border-radius: var(--r-pill); background: var(--paper-3); overflow: hidden; }
.as-bar i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--ink-3); transition: width .8s var(--ease-out), background .3s; }
.as-bar i[data-s="ok"] { background: var(--mint); }
.as-bar i[data-s="warn"] { background: var(--yellow); }
.as-bar i[data-s="bad"] { background: var(--red); }
.as-also { background: var(--paper-2); border-radius: var(--r-m); padding: .9rem 1rem; }
.as-also h4 { font-size: var(--t-m); margin-bottom: .5rem; }
.as-also ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.as-also li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) auto; gap: .8rem; align-items: baseline; font-size: var(--t-s); }
.as-also li span { color: var(--ink-2); }
.as-also em { font-style: normal; }

/* tests */
.as-tests { background: var(--paper); border-radius: var(--r-l); box-shadow: 0 0 0 1px var(--line); padding: 1.25rem; display: grid; gap: .8rem; }
.as-testhead { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.as-tcount { display: grid; text-align: right; }
.as-tcount b { font-family: var(--f-display); font-size: var(--t-2xl); line-height: 1; color: var(--mint); font-variant-numeric: tabular-nums; }
.as-tcount span { font-size: var(--t-xs); color: var(--ink-3); }
.as-tlist { list-style: none; margin: 0; padding: 0; display: grid; }
.as-tlist li { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .55rem .2rem; border-bottom: 1px solid var(--line); font-size: var(--t-s); }
.as-tlist li:last-child { border-bottom: 0; }
.as-tlist li.is-flip { animation: asflip .45s var(--ease-out); }
.as-pill { white-space: nowrap; transition: background .3s, color .3s; }

@media (max-width: 860px) {
  .as-grid { grid-template-columns: 1fr; }
  .as-gauge-card { position: static; }
  .as-also li { grid-template-columns: 1fr; gap: .1rem; }
}
@media (max-width: 560px) {
  .as-prods { grid-template-columns: 1fr; }
  .as-prod { grid-template-columns: 90px 1fr; }
  .as-state { margin-left: 0; }
  .as-ans { grid-template-columns: 1fr; }
  .as-avatar { display: none; }
  .as-winbar .xs { display: none; }
}