/* ═══════════════════════════════════════════════════════════════════════════
   KcoreTexto — el formato básico de los comentarios.

   Hoja del MOTOR, servida a las dos superficies por el mismo camino que
   `kcore-ficha.css`: la Mesa y el portal tienen que ver el mismo comentario
   igual. Ver la cabecera de `kcore-texto.js`.

   Los selectores llevan las DOS raíces (`#kcore-root` y `#dbch-root`) por lo
   mismo que `kcore-ficha.css`: es una sola hoja para las dos, y sin la raíz de
   cada una, Astra —el tema del portal— estila los `<p>` y los `<h4>` por su
   cuenta y el comentario sale con los márgenes del blog.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── El texto ya formateado ──────────────────────────────────────────────── */

/* ⚠️ El contenedor de un cuerpo formateado NO puede llevar `white-space:
   pre-wrap`. Los saltos los pone `formatea()` como `<br>` y como párrafos; con
   pre-wrap encima saldrían los dos y cada mensaje tendría el doble de aire.
   Las dos superficies quitan esa propiedad de su cuerpo de comentario. */

:is(#kcore-root, #dbch-root) .kc-fmt-p {
  margin: 0 0 8px;
  font-size: inherit; line-height: inherit; color: inherit;
  font-family: inherit; font-weight: inherit;
  word-break: break-word;
}
:is(#kcore-root, #dbch-root) .kc-fmt-p:last-child { margin-bottom: 0; }

/* EL TÍTULO. Se distingue por PESO y por un espacio arriba, no por tamaño:
   dentro de una columna de conversación de 320px, un título más grande se lee
   como un mensaje que grita. Es la misma escala del cuerpo, en semibold y con
   aire propio, que es lo que hace falta para separar secciones. */
:is(#kcore-root, #dbch-root) .kc-fmt-h {
  margin: 14px 0 6px;
  font-size: inherit; line-height: 1.4;
  font-weight: 700; color: var(--text-1);
  font-family: inherit;
  letter-spacing: -.01em;
  word-break: break-word;
}
:is(#kcore-root, #dbch-root) .kc-fmt-h:first-child { margin-top: 0; }

:is(#kcore-root, #dbch-root) .kc-fmt-p strong,
:is(#kcore-root, #dbch-root) .kc-fmt-h strong { font-weight: 700; }
:is(#kcore-root, #dbch-root) .kc-fmt-p em,
:is(#kcore-root, #dbch-root) .kc-fmt-h em { font-style: italic; }

/* ── El campo con formato en vivo ─────────────────────────────────────────
 *
 * Hereda las clases del `<textarea>` al que sustituye, así que el borde, el
 * fondo y el relleno se los sigue poniendo cada superficie (`.kc-chat-bar
 * textarea` en la Mesa, `.dbch-thread-inputbar textarea` en el portal). Aquí
 * va solo lo que un `div` editable necesita y un textarea traía de fábrica.
 */

:is(#kcore-root, #dbch-root) .kc-fmt-ed {
  /* El alto lo decide el contenido, entre estos dos topes. Es lo que
     reemplaza al `autoAlto`/`autoCrecer` del JS, que en un div no aplica. */
  min-height: 38px;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;      /* un textarea respeta los saltos; un div no */
  word-break: break-word;
  outline: none;
  cursor: text;
}

/* El texto de ayuda. Un div no tiene `placeholder`, así que lo pinta el CSS
   desde el atributo que escribe el campo. Va con `pointer-events: none` para
   que un clic sobre él llegue igual al editor y ponga el cursor. */
:is(#kcore-root, #dbch-root) .kc-fmt-ed.kc-fmt-vacio::before {
  content: attr(data-ph);
  color: var(--text-3, #9CA3AF);
  pointer-events: none;
  display: block;
}

/* Deshabilitado. Un `div` con `contenteditable="false"` no lo estila el
   navegador, así que el aspecto de «no se puede escribir» lo pone la clase. */
:is(#kcore-root, #dbch-root) .kc-fmt-ed.kc-fmt-off {
  background: var(--surface-3, #F4F4F2);
  color: var(--text-3, #9CA3AF);
  cursor: default;
}

/* Lo que se ve mientras se escribe. Es a propósito la MISMA escala del mensaje
   ya enviado: si el título se viera distinto al redactarlo, el campo dejaría de
   ser una previsualización de lo que se va a mandar, que es el punto entero. */
:is(#kcore-root, #dbch-root) .kc-fmt-ed strong,
:is(#kcore-root, #dbch-root) .kc-fmt-ed b { font-weight: 700; }
:is(#kcore-root, #dbch-root) .kc-fmt-ed em,
:is(#kcore-root, #dbch-root) .kc-fmt-ed i { font-style: italic; }
:is(#kcore-root, #dbch-root) .kc-fmt-ed .kc-ed-h {
  font-weight: 700;
  color: var(--text-1, #0D1117);
  letter-spacing: -.01em;
  margin-top: 6px;
}
:is(#kcore-root, #dbch-root) .kc-fmt-ed .kc-ed-h:first-child { margin-top: 0; }

/* ── La barra ────────────────────────────────────────────────────────────── */

/* Va en su propio renglón ENCIMA del campo. Los dos compositores son filas
   flex (textarea + botón redondo), así que la barra se cuela como un hijo más
   y se manda sola a la primera línea con `order` + `flex-basis: 100%`. Así
   ninguna de las dos superficies tiene que reestructurar su marcado — que es
   justo lo que se quería evitar teniendo dos.

   `flex-wrap: wrap` lo pone cada superficie en su fila: es la única propiedad
   que esta hoja no puede dar sin pisar la maquetación del compositor. */
:is(#kcore-root, #dbch-root) .kc-fmt-bar {
  order: -1;
  flex: 0 0 100%;
  display: flex; align-items: center; gap: 2px;
  margin: 0 0 7px;
}

:is(#kcore-root, #dbch-root) .kc-fmt-b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  min-width: 26px; max-width: 26px; min-height: 26px; max-height: 26px;
  box-sizing: border-box; padding: 0; margin: 0; line-height: 1;
  border: 1px solid transparent; border-radius: 7px;
  background: transparent; color: var(--text-2);
  font-family: inherit; font-size: 13px; cursor: pointer;
  transition: background .13s ease, color .13s ease, border-color .13s ease;
}
:is(#kcore-root, #dbch-root) .kc-fmt-b:hover {
  background: var(--tint); border-color: var(--tint-border); color: var(--on-tint);
}
:is(#kcore-root, #dbch-root) .kc-fmt-b:active { transform: translateY(1px); }
/* El foco por teclado SÍ se ve: la barra se recorre con Tab y sin esto no hay
   forma de saber en qué botón se está. */
:is(#kcore-root, #dbch-root) .kc-fmt-b:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
:is(#kcore-root, #dbch-root) .kc-fmt-b strong { font-weight: 800; }
:is(#kcore-root, #dbch-root) .kc-fmt-b em { font-style: italic; font-family: Georgia, serif; }