/* Sugerencias que rotan sobre el cuadro de texto (sugerencias.js). Mismo sistema que app.css:
   tinta, iris #00A3E0, Switzer y Geist Mono, esquinas rectas. El brillo es el del iris del ojo: un halo
   que respira despacio, sin neón; con movimiento reducido queda fijo. */
body.con-presets #sugerencias{display:none!important}   /* las 4 fijas de app.js quedan reemplazadas */

.presets{display:flex;flex-direction:column;gap:6px;container-type:inline-size}
.presets__tit{margin:0;display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  font:500 .74rem var(--f-mono,ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;color:#a9a6a0}
.presets__tit b{font-weight:400;color:#8f8c86;letter-spacing:.04em;font-variant-numeric:tabular-nums}

.presets__fila{display:grid;grid-template-columns:1fr;gap:6px;
  transition:opacity .22s ease,transform .22s ease}
.presets__fila.saliendo{opacity:0;transform:translateY(4px)}

.preset{position:relative;display:flex;align-items:center;gap:9px;min-width:0;min-height:54px;padding:8px 12px;
  font:400 .9rem/1.25 var(--f-txt,system-ui,sans-serif);text-align:left;color:var(--fondo,#E8E6E1);
  background:#1b2025;border:1.5px solid rgba(0,163,224,.55);cursor:pointer;
  box-shadow:0 0 14px -4px rgba(0,163,224,.42);animation:preset-respira 3.6s ease-in-out infinite alternate;
  transition:border-color .18s ease,background-color .18s ease,transform .18s cubic-bezier(.16,1,.3,1)}
.preset::before{content:"";flex:0 0 8px;height:8px;border-radius:50%;background:var(--iris,#00A3E0);
  box-shadow:0 0 6px rgba(0,163,224,.8)}
.preset span{min-width:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.preset:hover,.preset:focus-visible{border-color:var(--iris,#00A3E0);background:#212a31;transform:translateY(-1px)}
.preset:active{transform:translateY(0)}
.preset:disabled{cursor:default;color:#8f8c86;border-color:#3d4247;box-shadow:none;animation:none}
.preset:disabled::before{background:#555a5e;box-shadow:none}
.preset+.preset{animation-delay:-1.8s}   /* los dos no respiran al mismo tiempo */

.presets--quieto .preset{opacity:.45;cursor:not-allowed;animation:none;box-shadow:none}

@keyframes preset-respira{
  from{box-shadow:0 0 10px -5px rgba(0,163,224,.30)}
  to{box-shadow:0 0 18px -3px rgba(0,163,224,.55)}
}
/* Columna del chat ancha (tableta acostada, monitor sin tablero): dos por renglón */
@container (min-width:620px){.presets__fila{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
@media (prefers-reduced-motion:reduce){
  .preset{animation:none}
  .presets__fila{transition:none}
}
/* «Ver como» (2026-11-10): la franja vive dentro del formulario en fila de empresa.css; ocupa su propia línea. */
.e-caja:has(> #presets-como){flex-wrap:wrap}
#presets-como{flex:1 0 100%;min-width:0}