/* ============================================================================
   El assistent de la web del ICE. Todo cuelga de .as.
   - .as-flotant: dentro del iframe flotante (flotant.js). El iframe mide lo
     que el botón cuando está cerrado y lo que el panel cuando está abierto:
     aquí, botón y panel ocupan todo el iframe.
   - .as-estret: flotante en el móvil (lo avisa flotant.js). Cerrado, solo el
     icono (un cuadrado de 52 px); abierto, un panel que sube desde abajo.
   - sin .as-flotant: el iframe pegado en la página, siempre abierto.
   - .as-pagina: abierto directamente, con la cabecera común.
   Estilo «clar»: blanco, accent azul UPC, esquinas redondeadas, burbujas de
   chat, tarjetas con borde y cápsulas para las sugerencias y el campo.
   ============================================================================ */

.as {
  --as-blau: #0b2b45;        /* el azul oscuro de la portada del ICE */
  --as-blau-fosc: #12395a;   /* al pasar el ratón */
  --as-tinta: #0f1f2e;
  --as-suau: #556270;
  --as-vora: #e3e8ee;
  --as-vora-suau: #eef1f4;
  --as-bombolla: #f1f4f7;
  --as-radi: 14px;

  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--as-tinta);
  -webkit-font-smoothing: antialiased;
}
.as *, .as *::before, .as *::after { box-sizing: border-box; }

body:has(> .as) { margin: 0; background: #fff; }
html:has(.as-flotant), body:has(> .as-flotant) { background: transparent; overflow: hidden; }
.en-iframe .ice-cab { display: none !important; }

/* El círculo con el globo de la cabecera, como el botón: azul oscuro. Los
   tres puntos saltan uno detrás de otro, como cuando alguien escribe, y
   descansan un momento antes de volver a empezar. */
.as-icona {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--as-blau);
  color: #fff;
}
.as-icona circle { transform-box: fill-box; transform-origin: center; animation: as-escriu 2.4s ease-in-out infinite; }
.as-icona circle:nth-of-type(2) { animation-delay: 0.15s; }
.as-icona circle:nth-of-type(3) { animation-delay: 0.3s; }
@keyframes as-escriu {
  0%, 25%, 100% { transform: none; }
  12% { transform: translateY(-2.5px); }
}

/* ─── El botón (solo flotante) ──────────────────────────────────────────── */

/* Como las tarjetas de la portada del ICE: azul oscuro, esquinas apenas
   redondeadas y la letra de la web (Helvetica). El icono va en un círculo
   claro y, al lado, «No trobes / alguna cosa?» en dos líneas; el botón mide
   lo que el texto. Igual en el ordenador y en el móvil. El iframe mide lo que el
   botón: nada puede salir de él.
   Al pasar el ratón (o al llegar con el teclado), tres cosas a la vez: el
   globo se balancea una vez, un brillo cruza el botón y del círculo salen
   ondas celestes mientras el ratón sigue encima. Van aunque el sistema pida
   reducir el movimiento: son pequeñas y solo salen al pasar por encima. */
.as-obrir {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  margin: 0;
  padding: 9px 14px 9px 9px;
  border: 0;
  border-radius: 6px;
  background: var(--as-blau);
  color: #fff;
  font: inherit;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
}
.as-obrir-icona {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}
.as-obrir-icona svg { transform-origin: 50% 80%; }
.as-obrir-text { font-size: 14px; font-weight: 700; line-height: 1.2; }
/* En el móvil, solo el icono: un cuadrado de 52 px. El texto sigue ahí para
   los lectores de pantalla. */
.as-estret .as-obrir { padding: 9px; }
.as-estret .as-obrir-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* La onda: un anillo celeste que crece desde el círculo y se desvanece */
.as-obrir-icona::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #7cc4ec;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
/* El brillo: una franja de luz inclinada, fuera del botón hasta que cruza */
.as-obrir::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
.as-obrir:hover .as-obrir-icona::after, .as-obrir:focus-visible .as-obrir-icona::after { animation: as-ona 1.2s ease-out infinite; }
.as-obrir:hover .as-obrir-icona svg, .as-obrir:focus-visible .as-obrir-icona svg { animation: as-balanceja 0.6s ease-in-out; }
.as-obrir:hover::before, .as-obrir:focus-visible::before { animation: as-brilla 0.8s ease; }
@keyframes as-ona {
  from { transform: scale(1); opacity: 0.9; }
  to   { transform: scale(1.35); opacity: 0; }
}
@keyframes as-balanceja {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-14deg); }
  40% { transform: rotate(10deg); }
  60% { transform: rotate(-6deg); }
  80% { transform: rotate(3deg); }
}
@keyframes as-brilla {
  to { left: 130%; }
}
.as-obrir:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.as-obrir[hidden] { display: none; }

/* ─── El panel ──────────────────────────────────────────────────────────── */

.as-panell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #fff;
  border: 1px solid var(--as-vora);
}
.as-panell[hidden] { display: none; }
.as-flotant .as-panell { border: 0; animation: as-entra 0.22s ease-out; }
.as-estret .as-panell { animation-name: as-puja; }
.as-pagina .as-panell {
  max-width: 640px;
  height: min(660px, calc(100vh - 140px));
  min-height: 440px;
  margin: 2rem auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(6, 19, 31, 0.10);
}
@keyframes as-entra {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes as-puja {
  from { transform: translateY(40%); }
  to   { transform: none; }
}

.as-cap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  padding: 12px 10px 12px 16px;
  border-bottom: 1px solid var(--as-vora-suau);
  background: #fff;
}
.as-cap-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.as-cap-text strong { font-size: 15px; font-weight: 600; }
.as-cap-text span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--as-suau);
}
/* El puntito verde de «disponible» */
.as-cap-text span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2fb67c;
}
.as-tancar {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--as-suau);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.as-tancar:hover { background: var(--as-bombolla); color: var(--as-tinta); }
.as-tancar:focus-visible { outline: 2px solid var(--as-blau); outline-offset: -2px; }

/* La rayita de arriba del panel en el móvil (solo adorno) */
.as-nansa { display: none; }
.as-estret .as-nansa {
  display: block;
  position: absolute;
  top: 6px;
  left: 50%;
  width: 36px;
  height: 4px;
  margin-left: -18px;
  border-radius: 2px;
  background: #d5dce3;
}
.as-estret .as-cap { padding-top: 18px; touch-action: none; }  /* se desliza hacia abajo para cerrar */
.as-complet .as-panell { border-radius: 0; }
/* En el móvil se cierra deslizando: la flecha no se ve, pero sigue ahí para
   los lectores de pantalla (y aparece si se llega con el teclado) */
.as-estret .as-tancar:not(:focus-visible) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0; }

/* ─── La conversación ───────────────────────────────────────────────────── */

.as-missatges {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 16px;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}
.as-msg {
  max-width: 88%;
  padding: 10px 14px;
  overflow-wrap: anywhere;
  animation: as-entra 0.18s ease-out;
}
.as-msg p { margin: 0; }
.as-msg-bot {
  align-self: flex-start;
  border-radius: var(--as-radi) var(--as-radi) var(--as-radi) 4px;
  background: var(--as-bombolla);
}
.as-msg-jo {
  align-self: flex-end;
  border-radius: var(--as-radi) var(--as-radi) 4px var(--as-radi);
  background: var(--as-blau);
  color: #fff;
}

/* Escribiendo… (tres puntos) */
.as-esperant { display: flex; gap: 5px; padding: 15px 16px; }
.as-esperant span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9aa6b2;
  animation: as-punt 1s infinite ease-in-out;
}
.as-esperant span:nth-child(2) { animation-delay: 0.15s; }
.as-esperant span:nth-child(3) { animation-delay: 0.3s; }
@keyframes as-punt {
  0%, 60%, 100% { transform: none; opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* Las páginas encontradas: tarjetas que se pulsan enteras. La burbuja que
   las lleva se ensancha para que quepan */
.as-msg-bot:has(.as-pagines) { max-width: 100%; width: 100%; }
.as-pagines { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 2px; padding: 0; list-style: none; }
/* Cada tipo de respuesta, su color, con fondos transparentes sobre la
   burbuja: página (azul oscuro), noticia (ámbar) y buscador (verde azulado).
   El título va en el azul del chat; la flecha y la nota («Notícia · …»,
   «3 resultats»), del color de su tipo. */
.as-pagines a {
  --tipus: 11, 43, 69;             /* azul oscuro */
  --tipus-text: #0b2b45;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(var(--tipus), 0.22);
  border-radius: 10px;
  background: rgba(var(--tipus), 0.06);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.as-noticies a { --tipus: 217, 119, 6; --tipus-text: #92400e; }      /* ámbar */
.as-cercadors a { --tipus: 13, 148, 136; --tipus-text: #0f6b63; }    /* verde azulado */
.as-pagines a > span { flex: 1; min-width: 0; }
.as-pagines strong { display: block; color: var(--as-blau); font-weight: 600; }
.as-pagines a > span span { display: block; margin-top: 2px; color: var(--as-suau); font-size: 13.5px; line-height: 1.4; }
.as-pagines svg { flex: none; color: var(--tipus-text); transition: transform 0.15s ease; }
.as-pagines a:hover { background: rgba(var(--tipus), 0.12); border-color: rgba(var(--tipus), 0.4); }
.as-pagines a:hover svg { transform: translateX(3px); }
.as-pagines a:focus-visible { outline: 2px solid var(--as-blau); outline-offset: 2px; }

/* Los buscadores: la misma tarjeta, con cuántos resultados y unos títulos */
.as-msg p.as-cercadors-titol { margin-top: 12px; color: var(--as-suau); font-size: 13.5px; }
.as-cercadors a { align-items: flex-start; }
.as-cercadors svg { margin-top: 2px; }
.as-cercadors em { display: inline; margin-left: 6px; color: var(--tipus-text); font-size: 13px; font-style: normal; font-weight: 600; }
.as-cercadors strong { display: inline; }
/* Los títulos de ejemplo, en dos líneas como mucho */
.as-cercadors .as-mostra {
  display: -webkit-box;
  margin-top: 4px;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 13px;
}
.as-msg-bot:has(.as-cercadors) { max-width: 100%; width: 100%; }

/* Las noticias: la tarjeta de las páginas, con «Notícia · fecha» bajo el título.
   Los documentos de la web del ICE, igual, con «PDF» o «Fitxer» */
.as-noticies a, .as-web a { align-items: flex-start; }
.as-noticies svg, .as-web svg { margin-top: 2px; }
.as-noticies em, .as-web em { display: block; margin-top: 2px; color: var(--tipus-text); font-size: 12.5px; font-style: normal; font-weight: 600; }
.as-msg-bot:has(.as-noticies), .as-msg-bot:has(.as-web) { max-width: 100%; width: 100%; }

/* Lo demás (noticias, buscadores, documentos), a petición: la pregunta y una
   tarjeta del tamaño de las respuestas, con borde discontinuo para que no se
   confunda con una página. La respuesta que trae, enfocable pero sin marco */
.as-msg p.as-altres-pregunta { margin-top: 12px; }
.as-altres {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px dashed #9fb0c0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.as-altres > span { flex: 1; min-width: 0; }
.as-altres strong { display: block; color: var(--as-tinta); font-weight: 600; }
.as-altres > span span { display: block; margin-top: 2px; color: var(--as-suau); font-size: 13.5px; line-height: 1.4; }
.as-altres svg { flex: none; margin-top: 2px; color: var(--as-suau); transition: transform 0.15s ease; }
.as-altres:hover { border-color: var(--as-blau); background: rgba(11, 43, 69, 0.05); }
.as-altres:hover svg { transform: translateY(2px); }
.as-altres:focus-visible { outline: 2px solid var(--as-blau); outline-offset: 2px; }
.as-msg-bot:has(.as-altres) { max-width: 100%; width: 100%; }
.as-msg-bot:focus { outline: none; }

/* Preguntas de ejemplo */
.as-suggeriments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.as-suggeriments button {
  padding: 5px 12px;
  border: 1px solid #cdd6df;
  border-radius: 999px;
  background: #fff;
  color: var(--as-blau-fosc);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.as-suggeriments button:hover { background: var(--as-blau); border-color: var(--as-blau); color: #fff; }
.as-suggeriments button:focus-visible { outline: 2px solid var(--as-blau); outline-offset: 1px; }

/* ─── Escribir: el campo y el botón dentro de una cápsula ───────────────── */

.as-form {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  margin: 10px 12px 12px;
  padding: 4px 4px 4px 16px;
  border: 1px solid #d5dce3;
  border-radius: 999px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.as-form:focus-within { border-color: var(--as-blau); box-shadow: 0 0 0 3px rgba(11, 43, 69, 0.15); }
.as-form input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 16px;   /* con menos, el iPhone acerca la página al escribir */
}
.as-form input:focus { outline: none; }
.as-form input::placeholder { color: #8a96a3; }
.as-form button {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--as-blau);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.as-form button:hover { background: var(--as-blau-fosc); }
.as-form button:focus-visible { outline: 2px solid var(--as-tinta); outline-offset: 2px; }

.as-amagat {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.as-noscript { margin: 0; padding: 12px 16px; color: var(--as-suau); }

/* Si el sistema pide reducir el movimiento, nada se mueve, salvo el botón
   (sus animaciones son pequeñas y solo salen al pasar por encima) y los
   puntos del globo de la cabecera (decisión del usuario) */
@media (prefers-reduced-motion: reduce) {
  .as :not(.as-obrir, .as-obrir *, .as-icona circle),
  .as :not(.as-obrir, .as-obrir *)::before,
  .as :not(.as-obrir, .as-obrir *)::after { animation: none !important; transition: none !important; }
}