/* The counter page: a conversation laid out like a receipt roll, not a chat bubble window. */
.counter{display:grid;gap:var(--space);max-inline-size:52rem}
.counter-log{display:flex;flex-direction:column;gap:1rem;min-block-size:4rem}
.counter-message{display:grid;gap:.15rem;max-inline-size:40rem;padding:.85rem 1.1rem;border-radius:14px;border:1px solid var(--line);background:var(--paper)}
.counter-message p{margin:0;white-space:pre-line}
.counter-message-user{justify-self:start;background:var(--citron);border-color:var(--ink)}
.counter-message-assistant{justify-self:end;background:var(--tint)}
.counter-who{font-size:.75rem;font-weight:700;color:var(--muted)}
.counter-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,9rem),1fr));gap:.75rem}
.counter-card{display:grid;gap:.35rem;text-decoration:none;border:1px solid var(--line);border-radius:12px;padding:.5rem;background:var(--paper)}
.counter-card img{inline-size:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;background:var(--tint)}
.counter-card strong{font-variant-numeric:tabular-nums}
.counter-bouquet{border:1px solid var(--ink);border-radius:14px;padding:1rem 1.2rem;background:var(--paper)}
.counter-bouquet ul{margin:0 0 .5rem;padding-inline-start:1.2rem}
.counter-bouquet p{margin-block-end:.75rem}
.counter-image img{inline-size:min(100%,24rem);aspect-ratio:1;object-fit:cover;border-radius:12px}
.counter-form{display:grid;gap:.75rem;position:sticky;inset-block-end:0;padding-block:.75rem;background:var(--paper);border-block-start:1px solid var(--line)}
.counter-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.counter-chip{min-block-size:44px;padding-inline:.9rem;border:1px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);font-weight:600}
.counter-chip:hover{background:var(--citron)}
.counter-notice{margin:0}
.counter-row{display:grid;grid-template-columns:1fr auto;gap:.6rem;align-items:end}
.counter-row textarea{min-block-size:3.2rem;max-block-size:8rem}
.counter-reset{justify-self:start}
@media (max-width:40rem){.counter-row{grid-template-columns:1fr}.counter-row .button{inline-size:100%}}
@media (prefers-reduced-motion:no-preference){.counter-message{animation:counter-in .32s var(--ease-out)}}
@keyframes counter-in{from{opacity:0;translate:0 .4rem}to{opacity:1;translate:0}}