/* ==========================================================================
   WebMasterOsona V4 — la Yara
   Damunt del botó de WhatsApp, no al costat. L'avatar és fosc amb l'anell
   d'or: sobre paper es llegeix com una moneda i és el que la fa reconeixible
   a totes les nostres coses (Telegram, Discord…).
   ========================================================================== */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* Sense JavaScript no hi ha xat: un botó que no fa res enganya */
html.no-js .yfab,html.no-js .yara{display:none}

/* ── El botó ─────────────────────────────────────────────────────────────── */
.yfab{position:fixed;right:clamp(14px,2.4vw,26px);
  bottom:calc(clamp(14px,2.4vw,26px) + 68px);z-index:81;
  width:56px;height:56px;padding:0;border:0;border-radius:50%;
  background:var(--ink);cursor:pointer;
  box-shadow:0 10px 28px rgba(20,18,15,.28);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.yfab img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.yfab:hover{transform:scale(1.07);box-shadow:0 14px 34px rgba(20,18,15,.34)}
.yfab:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.yfab[aria-expanded="true"]{opacity:0;pointer-events:none;transform:scale(.6)}

/* El punt verd va A DALT i no a baix: just a sota hi ha el botó de
   WhatsApp, també verd i també rodó, i tocant-se es llegien com una sola
   taca verda en comptes de com dues coses diferents. */
.yfab__dot{position:absolute;right:1px;top:1px;width:13px;height:13px;
  border-radius:50%;background:#37B26B;border:2.5px solid var(--paper)}
.yfab__dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;
  border:2px solid #37B26B;animation:ypuls 2.4s var(--ease) infinite}
@keyframes ypuls{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.1);opacity:0}}

.yfab__hint{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);
  background:var(--ink);color:var(--on-dark);font-size:.78rem;font-weight:600;
  white-space:nowrap;border-radius:var(--r-pill);padding:.5em 1em;
  box-shadow:var(--sh-1);opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.yfab:hover .yfab__hint,.yfab:focus-visible .yfab__hint{opacity:1}

/* ── El panell ───────────────────────────────────────────────────────────── */
.yara{position:fixed;right:clamp(14px,2.4vw,26px);bottom:clamp(14px,2.4vw,26px);
  z-index:90;width:min(392px,calc(100vw - 28px));
  max-height:min(640px,calc(100vh - 40px));display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);overflow:hidden}
.yara[hidden]{display:none}

.yara__head{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;
  padding:.9rem 1rem;background:var(--ink);color:var(--on-dark)}
.yara__ava{border-radius:50%;flex:0 0 auto}
.yara__who{min-width:0}
.yara__name{margin:0;font-family:var(--font-display);font-weight:600;font-size:1.12rem;
  letter-spacing:-.01em}
.yara__role{margin:.1rem 0 0;font-size:.74rem;color:var(--on-dark-2)}
.yara__role span{color:#8FDCAE}
.yara__role span::before{content:"";display:inline-block;width:6px;height:6px;
  border-radius:50%;background:#37B26B;margin-right:.4em;vertical-align:.06em}
.yara__x{width:34px;height:34px;display:grid;place-items:center;border:0;padding:0;
  border-radius:50%;background:rgba(247,244,236,.1);color:var(--on-dark);cursor:pointer;
  transition:background .25s var(--ease)}
.yara__x:hover{background:rgba(247,244,236,.2)}
.yara__x .i{width:17px;height:17px}

/* ── Els missatges ───────────────────────────────────────────────────────── */
.yara__msgs{flex:1;min-height:180px;overflow-y:auto;overscroll-behavior:contain;
  padding:1.1rem 1rem .4rem;display:flex;flex-direction:column;gap:.75rem;
  background:var(--paper)}
.ymsg{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.55rem;align-items:end;
  max-width:92%}
.ymsg img{width:26px;height:26px;border-radius:50%;flex:0 0 auto}
.ymsg__b{padding:.68rem .9rem;border-radius:14px;font-size:.9rem;line-height:1.5;
  white-space:pre-wrap;overflow-wrap:anywhere}
.ymsg--yara .ymsg__b{background:var(--surface);border:1px solid var(--line);
  border-bottom-left-radius:5px;color:var(--ink)}
.ymsg--tu{grid-template-columns:minmax(0,1fr);margin-left:auto;justify-items:end}
.ymsg--tu .ymsg__b{background:var(--gold);color:#14120F;border-bottom-right-radius:5px;
  font-weight:500}

/* El cursor mentre escriu. S'amaga sol quan el missatge s'acaba. */
.ymsg--escrivint .ymsg__b::after{content:"";display:inline-block;width:2px;height:1em;
  background:var(--gold-ink);margin-left:2px;vertical-align:-.16em;
  animation:ycaret .9s steps(2) infinite}
@keyframes ycaret{50%{opacity:0}}

.ytyping{display:inline-flex;gap:4px;padding:.15em 0}
.ytyping i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);
  animation:ybounce 1.2s var(--ease) infinite}
.ytyping i:nth-child(2){animation-delay:.15s}
.ytyping i:nth-child(3){animation-delay:.3s}
@keyframes ybounce{0%,60%,100%{transform:none;opacity:.45}30%{transform:translateY(-4px);opacity:1}}

/* ── Preguntes per començar ──────────────────────────────────────────────── */
.yara__chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:.55rem 1rem 0;background:var(--paper)}
.yara__chips[hidden]{display:none}
.yara__chip{font:inherit;font-size:.78rem;color:var(--ink-2);cursor:pointer;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-pill);
  padding:.42em .9em;transition:.25s var(--ease)}
.yara__chip:hover{border-color:var(--gold);color:var(--ink);background:var(--gold-soft)}

/* ── Escriure ────────────────────────────────────────────────────────────── */
.yara__form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem;
  padding:.75rem 1rem;background:var(--paper);border-top:1px solid var(--line)}
.yara__in{font:inherit;font-size:.9rem;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-pill);padding:.7em 1em;min-width:0}
.yara__in:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-tint)}
.yara__send{width:42px;height:42px;display:grid;place-items:center;border:0;padding:0;
  border-radius:50%;background:var(--gold);color:#14120F;cursor:pointer;
  transition:transform .25s var(--ease),opacity .25s var(--ease)}
.yara__send:hover{transform:scale(1.07)}
.yara__send[disabled]{opacity:.45;cursor:default;transform:none}
.yara__send .i{width:18px;height:18px}

.yara__note{display:grid;grid-template-columns:auto 1fr;gap:.45em;align-items:start;
  margin:0;padding:0 1rem .85rem;font-size:.68rem;line-height:1.45;color:var(--ink-3);
  background:var(--paper)}
.yara__note .i{width:.95em;height:.95em;margin-top:.25em}

/* A joc amb el de WhatsApp: 46 px i enganxat al de sota. */
@media (max-width:560px){
  .yfab{width:46px;height:46px;right:10px;bottom:calc(10px + 54px)}
  .yfab__hint{display:none}
}
/* AIXÒ ÉS EL QUE FEIA EL ZOOM. Safari de l'iPhone amplia la pàgina sola en
   enfocar un camp amb la lletra de menys de 16 px, i en ampliar-la ho
   descol·loca tot. El camp estava a .9rem = 14,4 px.
   No es resol amb `maximum-scale=1` a la meta viewport: això impedeix
   ampliar amb els dits i deixa fora qui ho necessita per llegir. Es resol
   amb la mida de lletra, que és el que Safari mira. 16 px justos. */
@media (max-width:820px){
  .yara__in{font-size:16px}
}
@media (max-width:480px){
  .yara{right:8px;left:8px;width:auto;
    /* `--teclat` la posa yara.js amb el que el teclat s'ha menjat de la
       pantalla; val 0 mentre no n'hi ha. */
    bottom:calc(8px + var(--teclat, 0px));
    /* `vh` primer com a xarxa: si el navegador no entén `dvh`, es queda amb
       aquesta. */
    max-height:calc(100vh - 16px);
    /* `dvh` i no `vh`: al mòbil `100vh` és la pantalla AMB la barra del
       navegador amagada, o sigui més alta del que es veu de veritat. Amb
       `vh` el panell sortia per dalt i la capçalera de la Yara quedava
       tallada; en obrir-se el teclat, el camp d'escriure quedava a sota. */
    max-height:calc(100dvh - 16px - var(--teclat, 0px))}
  .yara__msgs{min-height:0}
  /* Amb poc espai, primer ha de caber el que s'escriu. Els suggeriments i
     l'avís de privacitat cedeixen. */
  .yara__note{font-size:.64rem;padding-bottom:.6rem}
}
/* Pantalla curta (mòbil ajagut, o el teclat obert): fora els suggeriments i
   l'avís. Val més un xat que funcioni que un xat complet que no hi cap. */
@media (max-height:520px){
  .yara__chips,.yara__note{display:none}
  .yara__msgs{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .yfab__dot::after,.ytyping i,.ymsg--escrivint .ymsg__b::after{animation:none}
}