/* Dany IA — cascara movil.
   Mobile-first de verdad: el escritorio es el caso raro, va al final. */

:root {
  /* Pastel: fondo claro, como pediste */
  --bg:        #F2F0F9;
  --superficie:#FCFBFE;
  --burbuja-ia:#FFFFFF;
  --burbuja-yo:#E4DDF8;
  --tinta:     #241F35;
  --apagado:   #6B6588;
  --linea:     #E2DFEF;
  --acento:    #6D5AC4;

  --rosa:  #F7CFDD;
  --lila:  #DED6F7;
  --menta: #C9EEE0;
  --cielo: #CFE2F8;
  --melo:  #FBE0C6;

  /* Neumorfismo */
  --sombra-oscura: rgba(94, 86, 140, .22);
  --sombra-clara:  rgba(255, 255, 255, .95);

  /* Alto del teclado virtual. Lo calcula viewport.js; 0 si el navegador ya
     encogio el layout por su cuenta (interactive-widget=resizes-content). */
  --kb: 0px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --bg:        #15141D;
    --superficie:#1E1D29;
    --burbuja-ia:#252434;
    --burbuja-yo:#3A3357;
    --tinta:     #EDEAF7;
    --apagado:   #9E98B8;
    --linea:     #302E42;
    --acento:    #AC9BF5;
    --rosa:  #4B2F3B; --lila: #332C4E; --menta: #22423A;
    --cielo: #26374C; --melo: #46352A;
    --sombra-oscura: rgba(0, 0, 0, .5);
    --sombra-clara:  rgba(255, 255, 255, .045);
  }
}

* { box-sizing: border-box; }

/* El navegador oculta [hidden] con una regla suya, y cualquier `display` de
   aqui se la come. Sin este !important, poner .hidden = true no oculta nada:
   el dictado se quedaba en "Escuchando..." para siempre y el visor de imagenes
   dejaba una capa invisible a pantalla completa tragandose los toques.
   Va antes que todo lo demas a proposito: cualquier clase nueva con display
   vuelve a caer en la misma trampa. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overscroll-behavior: none;      /* nada de pull-to-refresh accidental */
}

body {
  background: var(--bg);
  color: var(--tinta);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

/* ---------- halos pastel ----------
   Sin filter:blur, que es lo caro en GPU movil.
   El borde que se veia antes no era (solo) el fondo oscuro: un radial-gradient
   de color a transparente tiene caida LINEAL, y el ojo lee esa pendiente
   constante como un contorno. Con paradas que imitan una gaussiana
   (alfa = e^-(r/0.42)^2) el borde desaparece. */
.halos {
  position: fixed;
  inset: -40%;
  z-index: 0;
  pointer-events: none;
  contain: strict;
}
.halos span {
  position: absolute;
  width: 85%;
  height: 70%;
  border-radius: 50%;
  opacity: var(--halo-op, .8);
  will-change: transform;
  background: radial-gradient(closest-side,
    rgba(var(--c), 1)    0%,
    rgba(var(--c), .88) 15%,
    rgba(var(--c), .60) 30%,
    rgba(var(--c), .32) 45%,
    rgba(var(--c), .13) 60%,
    rgba(var(--c), .04) 75%,
    rgba(var(--c), .01) 88%,
    rgba(var(--c), 0)  100%);
}
.halos span:nth-child(1) { --c: 249,201,220; animation: h1 34s ease-in-out infinite; }
.halos span:nth-child(2) { --c: 203,217,248; animation: h2 41s ease-in-out infinite; }
.halos span:nth-child(3) { --c: 198,239,221; animation: h3 29s ease-in-out infinite; }
.halos span:nth-child(4) { --c: 251,225,194; animation: h4 37s ease-in-out infinite; }

/* En oscuro, los mismos pastel claros gritan. Van tonos profundos y con menos
   presencia: se notan moviendose, pero no flotan encima del texto. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .halos span { --halo-op: .5; }
  :root:not([data-tema="claro"]) .halos span:nth-child(1) { --c: 122, 72, 110; }
  :root:not([data-tema="claro"]) .halos span:nth-child(2) { --c:  56, 86, 138; }
  :root:not([data-tema="claro"]) .halos span:nth-child(3) { --c:  44, 104,  86; }
  :root:not([data-tema="claro"]) .halos span:nth-child(4) { --c: 124,  86,  48; }
}

@keyframes h1 { 0%,100% { transform: translate(-12%,-4%) scale(1);    } 50% { transform: translate(46%,30%)  scale(1.25); } }
@keyframes h2 { 0%,100% { transform: translate(50%,-10%) scale(1.15); } 50% { transform: translate(-8%,38%)  scale(.9);   } }
@keyframes h3 { 0%,100% { transform: translate(26%,46%)  scale(.95);  } 50% { transform: translate(-6%,-8%) scale(1.28); } }
@keyframes h4 { 0%,100% { transform: translate(-4%,36%)  scale(1.2);  } 50% { transform: translate(42%,-6%) scale(.92);  } }

@media (prefers-reduced-motion: reduce) {
  .halos span { animation-duration: 200s; }
}
body[data-ahorro="1"] .halos span { animation: none; }

/* ---------- estructura ----------
   dvh con fallback. Si el navegador encoge el layout con el teclado
   (Chrome Android), --kb queda en 0 y esto ya basta. */
.app {
  position: relative;
  z-index: 1;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* ---------- cabecera ---------- */
.cab {
  padding: calc(var(--safe-t) + .5rem) .8rem .5rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.marca {
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.marca i {
  width: 11px; height: 11px; border-radius: 50%;
  background: linear-gradient(135deg, #B9A8F0, #7FD3B6, #F2A9C4);
}

/* selector de modo */
.modos {
  margin-left: auto;
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 14px;
  background: var(--linea);
}
.modos button {
  appearance: none; border: 0; cursor: pointer;
  min-height: 36px; padding: 0 .7rem;
  border-radius: 11px; background: transparent;
  color: var(--apagado);
  font: 600 .8rem system-ui, sans-serif;
  transition: background .15s, color .15s;
}
.modos button[aria-pressed="true"] {
  background: var(--superficie);
  color: var(--tinta);
  box-shadow: 0 1px 3px var(--sombra-oscura);
}

/* ---------- hilo ---------- */
.hilo {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: .3rem .8rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  scrollbar-width: thin;
}

.msg {
  max-width: 88%;
  padding: .6rem .85rem;
  border-radius: 18px;
  font-size: .95rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.msg.yo {
  align-self: flex-end;
  background: var(--burbuja-yo);
  border-bottom-right-radius: 6px;
}
.msg.ia {
  align-self: flex-start;
  background: var(--burbuja-ia);
  border-bottom-left-radius: 6px;
  box-shadow: 0 1px 3px var(--sombra-oscura);
}
.msg.ia.trabajando { padding: .5rem .7rem; }

/* Contenido ancho: que scrollee el bloque, nunca la pagina */
.msg pre, .msg table { overflow-x: auto; max-width: 100%; }
.msg pre {
  background: var(--bg);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: .6rem .7rem;
  font: .82rem/1.5 ui-monospace, Consolas, monospace;
  margin: .5rem 0;
}
.msg img { max-width: 100%; border-radius: 12px; display: block; }

/* ---------- markdown dentro de la burbuja ---------- */
/* Sin quitarle el margen al primer y ultimo bloque, cada burbuja crece por
   arriba y por abajo con un hueco vacio que no pinta nada. */
.msg-txt > :first-child { margin-top: 0; }
.msg-txt > :last-child { margin-bottom: 0; }
.msg-txt p { margin: .5rem 0; }
.msg-txt ul, .msg-txt ol { margin: .5rem 0; padding-left: 1.25rem; }
.msg-txt li { margin: .15rem 0; }
.msg-txt li > p { margin: 0; }
.msg-txt h1, .msg-txt h2, .msg-txt h3, .msg-txt h4 {
  margin: .75rem 0 .35rem;
  font-size: 1rem; font-weight: 700; line-height: 1.3;
}
.msg-txt a {
  color: var(--acento);
  text-decoration: underline; text-underline-offset: 2px;
}
.msg-txt code {
  background: var(--bg); border: 1px solid var(--linea); border-radius: 6px;
  padding: .05rem .3rem;
  font: .85em/1.4 ui-monospace, Consolas, monospace;
}
.msg-txt pre code { background: none; border: 0; padding: 0; font-size: 1em; }
.msg-txt blockquote {
  margin: .5rem 0; padding-left: .7rem;
  border-left: 3px solid var(--lila); color: var(--apagado);
}
/* display:block para que la tabla pueda scrollear sola sin arrastrar la pagina */
.msg-txt table { border-collapse: collapse; font-size: .85rem; display: block; }
.msg-txt th, .msg-txt td { border: 1px solid var(--linea); padding: .3rem .45rem; text-align: left; }
.msg-txt th { background: var(--bg); }
.msg-txt hr { border: 0; border-top: 1px solid var(--linea); margin: .75rem 0; }

.vacio {
  margin: auto;
  text-align: center;
  color: var(--apagado);
  font-size: .9rem;
  padding: 2rem 1rem;
  max-width: 30ch;
}
.vacio b { display: block; color: var(--tinta); font-size: 1.05rem; margin-bottom: .3rem; }

/* ---------- barra de escribir ---------- */
.barra {
  /* Sin backdrop-filter: es caro en movil y aqui no aporta nada. */
  background: var(--bg);
  border-top: 1px solid var(--linea);
  padding: .5rem .7rem calc(.5rem + var(--safe-b) + var(--kb));
  transition: padding-bottom .12s ease-out;
}

.adjuntos { display: flex; gap: .4rem; flex-wrap: wrap; padding-bottom: .45rem; }
.adjuntos:empty { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: 10px; padding: .25rem .3rem .25rem .55rem;
  font-size: .78rem; max-width: 12rem;
}
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip img { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; }
.chip button {
  appearance: none; border: 0; background: none; cursor: pointer;
  color: var(--apagado); font-size: 1.1rem; line-height: 1;
  min-width: 28px; min-height: 28px;
}

/* Los botones, debajo del input. El clip se queda a la izquierda y empuja al
   resto a la derecha, donde llega el pulgar. El empuje va en el clip y no en
   los otros dos: con dos margenes automaticos flexbox parte el hueco entre los
   dos y el microfono se quedaba en mitad de la fila. */
.fila { display: flex; align-items: center; gap: .45rem; padding-top: .5rem; }
#bAdjuntar { margin-right: auto; }

.icono {
  appearance: none; border: 0; cursor: pointer;
  flex: 0 0 auto;
  width: 46px; height: 46px;      /* toque comodo */
  border-radius: 15px;
  background: var(--lila);
  color: var(--tinta);
  display: grid; place-items: center;
  box-shadow: 4px 4px 10px var(--sombra-oscura), -4px -4px 10px var(--sombra-clara);
  transition: box-shadow .15s, transform .15s;
}
.icono:active {
  box-shadow: inset 3px 3px 8px var(--sombra-oscura), inset -3px -3px 8px var(--sombra-clara);
  transform: translateY(1px);
}
.icono svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icono.enviar { background: var(--acento); color: #fff; }
.icono.enviar[disabled] { opacity: .4; box-shadow: none; }
.icono.enviar.parar { background: var(--rosa); color: var(--tinta); }

/* Textarea: crece hasta 6 renglones y despues scrollea. Ese 6 tiene que
   coincidir con el autoAlto(texto, 6) de app.js, o en los navegadores sin
   field-sizing el alto y el tope dicen cosas distintas.
   16px minimo o Android/iOS hacen zoom al enfocar. */
#texto {
  display: block;
  width: 100%;
  resize: none;
  border: 1px solid var(--linea);
  border-radius: 15px;
  background: var(--superficie);
  color: var(--tinta);
  font: 16px/1.45 system-ui, sans-serif;
  padding: .7rem .85rem;
  min-height: 46px;
  max-height: calc(6 * 1.45em + 1.4rem);
  overflow-y: auto;
  field-sizing: content;          /* donde exista, hace el trabajo solo */
}
#texto:focus { outline: 2px solid var(--acento); outline-offset: -1px; }
#texto::placeholder { color: var(--apagado); }

.pie {
  font-size: .7rem;
  color: var(--apagado);
  text-align: center;
  padding-top: .4rem;
}

/* ---------- microfono ---------- */
.icono.micro.grabando {
  background: var(--rosa);
  animation: pulso 1.4s ease-in-out infinite;
}
@keyframes pulso {
  0%, 100% { box-shadow: 4px 4px 10px var(--sombra-oscura), -4px -4px 10px var(--sombra-clara), 0 0 0 0 rgba(226, 105, 140, .5); }
  50%      { box-shadow: 4px 4px 10px var(--sombra-oscura), -4px -4px 10px var(--sombra-clara), 0 0 0 9px rgba(226, 105, 140, 0); }
}
@media (prefers-reduced-motion: reduce) { .icono.micro.grabando { animation: none; } }

.dictado {
  display: flex; align-items: center; gap: .45rem;
  font-size: .8rem; color: var(--apagado);
  padding: 0 .2rem .45rem;
}
.dictado .punto {
  width: 9px; height: 9px; border-radius: 50%;
  background: #E2698C; flex: 0 0 auto;
  animation: latir 1.1s ease-in-out infinite;
}
@keyframes latir { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* ---------- cajon de conversaciones ---------- */
.cab-btn {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; color: var(--tinta); flex: 0 0 auto;
}
.cab-btn:active { background: var(--linea); }
.cab-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.velo {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(20, 16, 40, .42);
  opacity: 0; transition: opacity .22s;
}
.velo.abierto { opacity: 1; }

.cajon {
  position: fixed; z-index: 21;
  top: 0; bottom: 0; left: 0;
  width: min(84vw, 330px);
  background: var(--superficie);
  border-right: 1px solid var(--linea);
  padding: calc(var(--safe-t) + .6rem) .7rem calc(var(--safe-b) + .7rem);
  display: flex; flex-direction: column; gap: .55rem;
  transform: translateX(-102%);
  transition: transform .24s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 4px 0 26px rgba(40, 30, 80, .18);
}
.cajon.abierto { transform: translateX(0); }

.cajon-cab { display: flex; align-items: center; gap: .5rem; padding-left: .35rem; }
.cajon-cab strong { flex: 1; font-size: 1rem; }

.nueva {
  appearance: none; border: 0; cursor: pointer;
  display: flex; align-items: center; gap: .5rem;
  min-height: 46px; padding: 0 .9rem;
  border-radius: 14px; background: var(--lila); color: var(--tinta);
  font: 700 .88rem system-ui, sans-serif;
  box-shadow: 3px 3px 9px var(--sombra-oscura), -3px -3px 9px var(--sombra-clara);
}
.nueva:active { box-shadow: inset 3px 3px 7px var(--sombra-oscura); }
.nueva svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

.lista { overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .3rem; }
.conv {
  display: flex; align-items: center; gap: .4rem;
  border-radius: 12px; padding: .1rem .1rem .1rem .7rem;
  background: transparent; transition: background .15s;
}
.conv.activa { background: var(--lila); }
.conv > button.abrir {
  appearance: none; border: 0; background: none; cursor: pointer;
  flex: 1; min-width: 0; text-align: left; padding: .6rem 0;
  color: var(--tinta); font: 400 .88rem system-ui, sans-serif;
}
.conv .t { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv .f { display: block; font-size: .72rem; color: var(--apagado); margin-top: .1rem; }
.conv > button.tirar {
  appearance: none; border: 0; background: none; cursor: pointer;
  color: var(--apagado); width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 10px; display: grid; place-items: center; font-size: 1.15rem; line-height: 1;
}
.lista .ninguna { color: var(--apagado); font-size: .85rem; padding: .8rem .7rem; }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- escritorio: caso secundario ---------- */
@media (min-width: 720px) {
  .app { max-width: 780px; margin: 0 auto; }
  .msg { max-width: 76%; }
}

/* ---------- pie del cajon ---------- */
.cajon-pie {
  margin-top: auto;
  padding-top: .6rem;
  border-top: 1px solid var(--linea);
  display: flex; flex-direction: column; gap: .45rem;
}
.quien { display: flex; align-items: center; gap: .55rem; padding: .1rem .3rem; }
.quien .ini {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 auto;
  background: var(--menta); color: var(--tinta);
  font: 700 .82rem system-ui, sans-serif;
}
.quien .nom {
  font-size: .86rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.salir {
  appearance: none; border: 0; cursor: pointer;
  display: flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: 0 .8rem;
  border-radius: 13px; background: var(--rosa); color: var(--tinta);
  font: 700 .85rem system-ui, sans-serif;
}
.salir:active { filter: brightness(.95); }
.salir svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Aviso de version nueva disponible (lo dispara el service worker) */
.actualiza {
  position: fixed; left: 50%; bottom: calc(1rem + var(--safe-b));
  transform: translateX(-50%); z-index: 30;
  display: flex; align-items: center; gap: .6rem;
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: 14px; padding: .55rem .7rem .55rem .9rem;
  box-shadow: 0 6px 22px var(--sombra-oscura);
  font-size: .84rem;
}
/* El recuadro de instalar reusa el del aviso de version nueva, pero con dos
   botones y texto que puede dar la vuelta en una pantalla estrecha. */
.instalar { max-width: min(92vw, 27rem); flex-wrap: wrap; }
.instalar span { flex: 1 1 12rem; }
.instalar b { font-weight: 700; }
.instalar .no {
  background: transparent; color: var(--apagado);
  min-width: 34px; padding: 0 .4rem; font-size: 1rem;
}

.actualiza button {
  appearance: none; border: 0; cursor: pointer;
  background: var(--acento); color: #fff;
  border-radius: 10px; min-height: 34px; padding: 0 .75rem;
  font: 700 .8rem system-ui, sans-serif;
}

/* ---------- imagenes en las burbujas ---------- */
.msg-txt { white-space: pre-wrap; }
.msg .galeria + .msg-txt { margin-top: .45rem; }

.galeria { display: grid; gap: 4px; }
.galeria img {
  width: 100%; max-width: 240px; height: auto;
  border-radius: 12px; display: block; cursor: zoom-in;
  background: var(--linea);
  object-fit: cover;
}
.galeria.varias { grid-template-columns: 1fr 1fr; }
.galeria.varias img { max-width: none; aspect-ratio: 1; }

.adj-fichero {
  display: flex; align-items: center; gap: .45rem;
  background: var(--bg); border: 1px solid var(--linea);
  border-radius: 11px; padding: .45rem .6rem; margin-bottom: .3rem;
  text-decoration: none; color: var(--tinta); font-size: .82rem;
}
.adj-fichero .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adj-fichero .p { color: var(--apagado); font-size: .74rem; flex: 0 0 auto; }

/* ---------- visor a pantalla completa ---------- */
.visor-img {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(12, 10, 24, .93);
  display: flex; flex-direction: column;
  opacity: 0; transition: opacity .18s;
}
.visor-img.abierto { opacity: 1; }
.visor-barra {
  display: flex; align-items: center; gap: .5rem;
  padding: calc(var(--safe-t) + .5rem) .7rem .5rem;
  color: #F2F0F9;
}
.visor-nombre {
  flex: 1; min-width: 0; font-size: .84rem; opacity: .82;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.visor-btn {
  appearance: none; border: 0; cursor: pointer; text-decoration: none;
  width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto;
  background: rgba(255, 255, 255, .12); color: #F2F0F9;
  display: grid; place-items: center; font-size: 1.05rem;
}
.visor-btn:active { background: rgba(255, 255, 255, .22); }
.visor-lienzo {
  flex: 1; min-height: 0; display: grid; place-items: center;
  padding: .5rem .7rem calc(var(--safe-b) + .8rem);
}
.visor-lienzo img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; border-radius: 8px;
  /* Que el navegador deje hacer pellizco para acercar. */
  touch-action: pinch-zoom;
}