/* FarmaInTasca — override e componenti che Tailwind CDN non copre */

:root { --scale: 1; }
html { font-size: calc(16px * var(--scale)); }
body.big-text { --scale: 1.12; }

* { -webkit-tap-highlight-color: transparent; }
.h-13 { height: 3.25rem; }

/* Nasconde scrollbar delle chip row */
.chip-row { scroll-snap-type: x proximity; -ms-overflow-style: none; scrollbar-width: none; }
.chip-row::-webkit-scrollbar { display: none; }
.chip-row > * { scroll-snap-align: start; }

/* ---- Chip categoria ---- */
.chip {
  flex: 0 0 auto; padding: .55rem 1rem; border-radius: 999px;
  background: #fff; color: #17241F; font-weight: 600; font-size: .875rem;
  border: 1px solid rgba(23,36,31,.08); box-shadow: 0 1px 2px rgba(23,36,31,.04);
  display: inline-flex; align-items: center; gap: .4rem; transition: transform .12s, background .15s;
}
.chip:active { transform: scale(.96); }
.chip.is-active { background: #0E8C74; color: #fff; border-color: #0E8C74; }

/* ---- Bottom nav ---- */
.nav-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #6B7A73; font-size: 0; }
.nav-ico { font-size: 1.35rem; line-height: 1; filter: grayscale(1) opacity(.55); transition: filter .15s, transform .15s; }
.nav-lbl { font-size: .68rem; font-weight: 600; }
.nav-btn.is-active { color: #0E8C74; }
.nav-btn.is-active .nav-ico { filter: none; transform: translateY(-1px) scale(1.08); }

/* ---- Skeleton ---- */
.skel { background: linear-gradient(100deg, #e9ece9 30%, #f3f5f2 50%, #e9ece9 70%); background-size: 200% 100%; animation: skel 1.2s infinite; border-radius: .75rem; }
@keyframes skel { to { background-position: -200% 0; } }

/* ---- View transition ---- */
.view { animation: viewIn .22s ease; }
@keyframes viewIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }

/* ---- Chat bubbles ---- */
.bubble { max-width: 82%; padding: .7rem .9rem; border-radius: 1.15rem; font-size: .95rem; line-height: 1.35; }
.bubble-ai { background: #fff; box-shadow: 0 1px 2px rgba(23,36,31,.06); border-bottom-left-radius: .35rem; }
.bubble-user { background: #0E8C74; color: #fff; border-bottom-right-radius: .35rem; }
.bubble-farmacista { background: #E7F4EF; color: #085C4C; border-bottom-left-radius: .35rem; }

.typing span { display: inline-block; width: 7px; height: 7px; margin: 0 1px; border-radius: 50%; background: #6B7A73; animation: typing 1.2s infinite; }
.typing span:nth-child(2){ animation-delay: .2s } .typing span:nth-child(3){ animation-delay: .4s }
@keyframes typing { 0%,60%,100%{ transform: translateY(0); opacity:.4 } 30%{ transform: translateY(-4px); opacity:1 } }

/* ---- Bolla del farmacista: animazione "sigillo" ---- */
.seal { position: relative; border: 2px solid transparent; transition: border-color .4s ease; }
.seal.sealed { border-color: #0E8C74; }
.seal-check { stroke-dasharray: 30; stroke-dashoffset: 30; }
.seal.sealed .seal-check { animation: draw .5s .15s forwards ease; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---- Bounce badge carrello ---- */
@keyframes bump { 0%{ transform: scale(1) } 40%{ transform: scale(1.35) } 100%{ transform: scale(1) } }
.bump { animation: bump .35s ease; }

/* ---- Toast ---- */
.toast { pointer-events: auto; max-width: 92%; padding: .7rem 1rem; border-radius: 999px; color: #fff; font-weight: 600; font-size: .875rem;
  box-shadow: 0 8px 30px rgba(23,36,31,.25); display: flex; align-items: center; gap: .5rem; animation: toastIn .25s ease; }
.toast-ok { background: #0E8C74; } .toast-err { background: #D9503F; } .toast-info { background: #17241F; }
@keyframes toastIn { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- Stepper ---- */
.stepper { display: inline-flex; align-items: center; background: #E7F4EF; border-radius: 999px; }
.stepper button { width: 30px; height: 30px; display: grid; place-items: center; color: #0E8C74; font-weight: 800; font-size: 1.1rem; }
.stepper span { min-width: 22px; text-align: center; font-weight: 700; font-size: .95rem; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}