/* =================================================================================================
   El chat, **variante táctil**. Las mismas reglas que estaban dentro de `@media (max-width: 720px)` en
   `chat.css`, sacadas a un archivo propio en 0.26.28 y **sin tocar una sola declaración**.

   **Por qué se separó** (observación 15 del usuario, 2026-08-04: «la PWA abierta desde un navegador de
   escritorio conserva estilos viejos»). El corte por **ancho** es correcto para la aplicación de escritorio
   —una ventana estrecha quiere lo mismo que un teléfono— y es **falso para la PWA**: abierta en un navegador
   de escritorio es ancha, así que se llevaba la variante de puntero y el usuario veía el aspecto anterior a
   las correcciones. La PWA es la superficie táctil **independientemente del ancho de la ventana**.

   **Cómo decide cada superficie, sin duplicar una línea.** El reparto lo hace el atributo `media` del
   `<link>`, que es justo para esto:

   - Escritorio: `<link href="css/chat-touch.css" media="(max-width: 720px)">` — el mismo corte de siempre.
   - PWA: `<link href="_content/Contextara.UI/css/chat-touch.css">` — sin condición, siempre.

   La alternativa era repetir el bloque bajo una clase de la PWA, que es exactamente la trampa que `chat.css`
   existe para cerrar: los mismos selectores escritos dos veces divergen, y nadie se entera hasta que el
   usuario compara los dos aparatos.

   **Se carga después de `chat.css`** en las dos superficies: son modificaciones sobre la base, y con el orden
   al revés la base las pisaría (regla 3.y).
   ================================================================================================= */

/* **El ancho y el alto son para la conversacion** (0.23.3). El reparto de antes —cada turno una burbuja con
   su relleno, la respuesta sobre un panel y los comandos sobre verde— gastaba en decoracion el sitio de dos o
   tres lineas de texto en cada turno, que en un telefono es la mitad de lo que se ve.

   Ahora: margenes laterales del **2 %** y nada mas, la respuesta y los comandos **sin caja ni color** —blanco
   lo que dice Claude, gris los comandos— y el aire vertical al minimo. El unico que conserva burbuja es el
   turno del **usuario**, porque es lo que hay que poder distinguir de un vistazo al recorrer hacia atras. */
/* **Sin margenes propios y 3 px entre turnos** (segundo pase del 2026-07-29). Los laterales los pone la
   pagina —4 px—, asi que aqui no se suma nada: el 2 % de antes se sumaba a ese relleno y el texto acababa a
   dos caracteres de cada borde. Y el hueco entre lo que dice Claude y el comando siguiente es exactamente el
   `gap`: con `.1rem` mas el margen de cada entrada quedaban unos 5 px por arriba y otros 5 por abajo. */
.cc-log { padding: 0; gap: 2px; -webkit-overflow-scrolling: touch; }
.cc-entry {
    gap: .1rem; margin: 0; padding: 0; border-radius: 0;
    font-size: .95rem; line-height: 1.4; overflow-wrap: anywhere;
}

/* El turno del usuario: burbuja, y **recortado a tres lineas** con su expansor. Un turno pegado de veinte
   lineas empujaba la respuesta fuera de la pantalla, y la respuesta es lo que se esta esperando. */
/* El turno del usuario es el unico con burbuja, asi que es el unico que necesita un pelo de aire propio:
   pegado a la respuesta anterior se leerian como un bloque. Los 2 px son la mitad de lo que tenia. */
.cc-user {
    background: #223052; margin: 2px 0 2px 12%; padding: .35rem .5rem; border-radius: 12px;
}
.cc-user .cc-text { white-space: pre-wrap; background: none; border: none; padding: 0; }
.cc-user-text {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.cc-user-text.is-open { display: block; -webkit-line-clamp: none; overflow: visible; }
/* El expansor, **abajo a la derecha de la caja**: es donde termina de leerse el recorte. */
.cc-user-more {
    display: block; margin-left: auto; background: none; border: none; padding: .1rem .1rem 0;
    color: var(--muted); font: inherit; font-size: .78rem; cursor: pointer; text-decoration: underline;
}

/* El de copiar, con area de dedo: 1,7rem se falla con el pulgar. */
.cc-copy { width: 2.1rem; height: 2.1rem; font-size: 1rem; opacity: .85; }

/* **El markdown no pone su propio aire.** Sus parrafos traen `margin: .5rem 0` de la hoja del visor, y ese
   margen se sumaba al hueco del registro: entre lo que dice Claude y el comando siguiente salian 8 px por
   arriba y 8 por abajo cuando lo pedido eran 2. Abajo, cero —el `gap` ya separa—; arriba, la mitad, que es lo
   que evita que dos parrafos seguidos se lean como uno. */
.cc-text.fv-markdown > *:first-child { margin-top: 0; }
.cc-text.fv-markdown > *:last-child { margin-bottom: 0; }
.cc-text.fv-markdown p,
.cc-text.fv-markdown ul,
.cc-text.fv-markdown ol,
.cc-text.fv-markdown blockquote { margin: .25rem 0 0; }

/* Lo que dice Claude: **texto blanco y nada mas**. Sin panel de fondo ni relleno: el fondo no distinguia nada
   —es el turno largo, se reconoce solo— y se comia dos lineas por respuesta. */
.cc-assistant { background: none; padding: 0; color: var(--text); }
.cc-system { color: var(--muted); font-size: .85rem; }
.cc-system .cc-text, .cc-tool .cc-text { font-size: inherit; }
.cc-divider { background: none; }
/* La ultima fila del registro —asterisco, coste del turno y hora—, **pegada**: es una senal de que algo esta
   pasando y una anotacion al pie, no un turno mas, asi que no gasta el aire de una burbuja. Antes esto era
   `.cc-thinking` y hacia falta apagarle el fondo y el relleno de `.cc-entry`; con la fila propia (`.cc-foot` en
   `chat.css`) ya no hereda ninguno de los dos, y aqui solo queda el margen. */
.cc-foot { padding: 0; margin: .05rem 0; }
/* En táctil la estrella es mayor, así que su hueco también. Y **basta con el hueco**: desde 0.27.128 la estrella
   es un SVG que ocupa el cuadrado entero, así que crece con él —antes había que subirle además la letra, porque
   el tamaño lo decidía el glifo—. Ver `.cc-star-slot` en `chat.css` y `FileIcons.Asterisk`. */
.cc-star-slot { width: 1.6rem; height: 1.6rem; }

/* Los comandos: **gris y monoespaciado**, sin caja verde. El color llamaba la atencion hacia lo que menos se
   lee de un turno, y con quince comandos seguidos la pantalla era un semaforo. */
.cc-tool { background: none; color: var(--muted); font-family: var(--mono, monospace); font-size: .85rem; padding: 0; }
.cc-tool .cc-label { color: var(--muted); font-weight: 700; }
.cc-tool-head { min-height: 1.6rem; padding: 0; }
.cc-img { max-height: 40vh; }

/* Las opciones de una pregunta, **apiladas y con altura de dedo**: una fila de botoncitos como la de la
   base se falla con el pulgar. */
.cc-ask { background: none; border: none; padding: 0; gap: .7rem; }
.cc-ask-head { font-size: .68rem; border-radius: 999px; padding: .05rem .5rem; }
.cc-ask-text { font-size: .95rem; line-height: 1.35; }
.cc-ask-opts { flex-direction: column; flex-wrap: nowrap; gap: .4rem; }
.cc-ask-opt {
    width: 100%; border-radius: 10px; background: var(--panel-2);
    padding: .6rem .7rem; min-height: 2.6rem;
}
.cc-ask-on { background: #223052; }
.cc-ask-label { font-size: .95rem; }
.cc-ask-desc { font-size: .8rem; line-height: 1.3; }
.cc-ask-picked { font-size: .9rem; }
.cc-ask-otherinput { font-size: .95rem; padding: .5rem .6rem; }
.cc-ask-send {
    border: none; border-radius: 10px; color: #e6e6e6; padding: .55rem .9rem; min-height: 2.4rem;
}

/* El compositor pegado abajo, respetando el borde curvo del telefono. Los laterales al **2 %**, como el
   registro: los dos anchos tienen que coincidir o el cuadro de texto se ve desalineado con la conversacion. */
/* **Sin raya arriba.** El compositor ya se distingue por su propio cuadro y por los controles de debajo; la
   linea solo gastaba un pixel de conversacion y partia la pantalla en dos. */
.cc-compose {
    padding: 4px 0 calc(4px + env(safe-area-inset-bottom));
    border-top: none; background: var(--bg, transparent);
}
.cc-box { gap: .3rem; }
.cc-input {
    background: var(--panel); border-radius: 12px; font-size: 1rem; padding: .6rem .7rem;
    resize: none; max-height: 40vh;
}
/* **El medidor y el clip van con la pastilla, y enviar/detener se queda solo** a la derecha (0.23.3). Antes
   la pastilla se estiraba y empujaba los otros dos contra el boton de enviar: tres controles pegados al que
   interrumpe el turno, que es el que menos conviene pulsar sin querer. */
.cc-actions { align-items: center; gap: .4rem; }
.cc-settings { flex: 0 0 auto; min-width: 0; }
.cc-pill { font-size: .82rem; padding: .35rem .7rem; min-height: 2.2rem; }
.cc-meter { width: 1.5rem; height: 1.5rem; }

/* Clip y enviar, cuadrados y con area de toque. Y el boton de enviar pasa a **icono**: en un telefono la
   palabra «Enviar» gasta ancho que necesita el cuadro de texto. */
.cc-attach { width: 2.4rem; height: 2.4rem; border: none; background: none; font-size: 1.15rem; }

/* La miniatura, **relativa al botón de enviar de aquí** (2.6rem), pero acotada por el ancho real del telefono:
   el doble exacto se come una franja de conversacion en una pantalla estrecha, y en una tablet se queda corto.
   El aspa crece porque aqui se pulsa con el dedo. */
.cc-thumb { --cc-thumb-h: clamp(3.2rem, 17vw, 5.2rem); }
.cc-thumb img { max-width: 45vw; }
.cc-thumb-x { width: 1.6rem; height: 1.6rem; font-size: 1rem; }
.cc-send { margin-left: auto; flex: 0 0 auto; }
.cc-send .btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.6rem; height: 2.6rem; padding: 0; border-radius: 10px; font-size: 1.1rem;
}
/* **Un solo color para todos los controles.** El de detener salia con el fondo blanco del `.btn` del sistema y
   borde rosa: se leia como el control mas llamativo de la pantalla siendo el que menos hay que pulsar. Ahora
   es la misma superficie que la pastilla y el clip, y lo que dice que hace es el glifo. */
.cc-send .btn, .cc-send .cc-stop, .cc-send .cc-primary {
    background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
}
.cc-send .cc-primary:disabled { opacity: .45; }
.cc-btn-text { display: none; }
.cc-btn-icon { display: inline; }

/* Los dos paneles, como **hoja inferior**. Es la diferencia que sobrevive a la convergencia, y es real: una
   hoja se alcanza con el pulgar y un panel anclado a un botón de la cabecera no. Mismo marcado, otro sitio. */
.cc-settings-back { background: rgba(0,0,0,.45); z-index: 20; }
.cc-settings-panel,
.cc-history-panel {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 21;
    width: auto; max-width: none; max-height: 80vh;
    background: var(--panel-2); border: none; border-top: 1px solid var(--border);
    border-radius: 18px 18px 0 0; box-shadow: none;
    padding: .9rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}
/* **El elegido va en el naranja de Claude, no en el acento del contexto** (0.23.6). En el móvil el acento es
   el color del proyecto, y con un proyecto amarillo el texto blanco sobre amarillo **no se leía**: el reporte
   decía exactamente eso. Los ajustes no son del proyecto —son de la sesión de Claude—, así que el color fijo
   aquí es además el correcto, y el blanco sobre terracota tiene contraste de sobra.

   Se fija con `--chat-accent` **dentro del panel** en vez de reescribir cada regla: los mismos selectores
   (`.seg-item.is-sel`, el rango del esfuerzo, la marca activa) se tiñen solos. */
.cc-settings-panel { gap: .9rem; --chat-accent: #d97757; }
.cc-settings-panel .seg-item.is-sel { color: #e6e6e6; font-weight: 700; }
/* Los rótulos y las marcas, legibles: el gris tenue de la base se pierde en una hoja oscura a pulso. */
.cc-settings-panel .cc-settings-label { color: var(--text); opacity: .8; }
.cc-settings-panel .seg-tick { color: var(--muted); }
.cc-settings-panel .seg-tick.is-sel { color: #e8a48d; font-weight: 700; }
.cc-settings-label { font-size: .8rem; }
.cc-settings-actions { justify-content: stretch; }
.cc-settings-actions .btn { flex: 1 1 0; min-height: 2.6rem; border-radius: 10px; }

.seg { border-radius: 10px; }
.seg-item { background: var(--panel); font-size: .82rem; padding: .5rem .3rem; min-height: 40px; }
.seg-slider { gap: .35rem; }
.seg-slider input[type=range] { min-height: 28px; }
.seg-tick { font-size: .68rem; }

.cc-history-panel { gap: .5rem; }
.cc-history-group-label { font-size: .78rem; }
.cc-history-list { gap: .3rem; }
.cc-history-item { border-color: var(--border); background: var(--panel); border-radius: 10px; }
.cc-history-open { font-size: inherit; gap: .1rem; padding: .6rem .7rem; min-height: 2.8rem; }
.cc-history-name { font-size: .95rem; }
.cc-history-date { font-size: .78rem; }
.cc-history-act { font-size: 1.05rem; padding: 0 .7rem; min-width: 2.6rem; }
.cc-history-group { font-size: .82rem; padding: .5rem .1rem; }
.cc-note { font-size: .88rem; }