diff --git a/src/client/assets/themes/OasisMobile.css b/src/client/assets/themes/OasisMobile.css
index 95a4f4c..b5216a2 100644
--- a/src/client/assets/themes/OasisMobile.css
+++ b/src/client/assets/themes/OasisMobile.css
@@ -796,3 +796,133 @@ button, input[type="submit"], input[type="button"],
   pointer-events: none;
   margin: 0;
 }
+
+/* ==========================================================================
+   Usabilidad 0.9.1 — Chats estilo Signal + widgets compactos + foros con hilos
+   Todo en NUESTRO tema (carga tras mobile.css → gana por cascada, sin !important)
+   ========================================================================== */
+
+/* --- Chats: burbujas tipo Signal (los hooks .chat-message-self/-author ya existen) --- */
+.chat-messages-list { display: flex; flex-direction: column; gap: 4px; width: 100%; }
+.chat-message {
+  max-width: 82%; width: fit-content; min-width: 0; box-sizing: border-box;
+  padding: 8px 12px; margin: 2px 0;
+  border: 1px solid #343434; background: #1e1e1e;
+  border-radius: 16px; border-bottom-left-radius: 4px;
+  align-self: flex-start;
+}
+.chat-message.chat-message-self {
+  align-self: flex-end; margin-left: auto; margin-right: 0;
+  background: #2a2413; border-color: #5c4c1f;
+  border-bottom-left-radius: 16px; border-bottom-right-radius: 4px;
+}
+.chat-message-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 3px; font-size: 10px; color: var(--c-muted, #8c8c8c); }
+.chat-message.chat-message-self .chat-message-meta { justify-content: flex-end; }
+.chat-message-sender, .chat-message-sender a { font-size: 11px; font-weight: 700; color: #FFA500; }
+.chat-message-date { opacity: .8; }
+.chat-message-text {
+  display: block; font-size: 15px; line-height: 1.42; color: #ececec; margin: 0;
+  word-break: break-word; overflow-wrap: anywhere;
+}
+.chat-message-text a { color: #FFD700; }
+.chat-message-image-wrap { margin-top: 6px; }
+.chat-message-image { max-width: 100%; border-radius: 10px; }
+
+/* --- Compose de chat: caja redondeada + enviar como pill (no bloque naranja de ancho completo) --- */
+.chat-message-form textarea {
+  width: 100%; box-sizing: border-box; border-radius: 14px;
+  padding: 10px 14px; resize: vertical; font-size: 15px;
+}
+.chat-message-form .filter-btn {
+  width: 46px !important; height: 46px !important; min-width: 46px !important; min-height: 46px !important;
+  padding: 0 !important; border-radius: 50% !important;
+  display: inline-flex !important; align-items: center !important; justify-content: center !important;
+  font-size: 0 !important; line-height: 0 !important;
+}
+.chat-message-form .filter-btn::before { content: "\27A4"; font-size: 18px; line-height: 1; color: #121212; }
+.chat-message-form input[type="file"] { font-size: 12px; }
+
+/* --- Botón spread → pill compacto (vence button{min-height:48px}/ancho completo) --- */
+.card-spread-centered, .card-spread-left, .spread-row { margin: 6px 0; }
+.card-spread-centered .spread-btn, .card-spread-left .spread-btn,
+.spread-row .spread-btn, .card-chips-row .spread-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: auto; min-width: 0; min-height: 30px; height: 30px;
+  padding: 2px 14px; font-size: 13px; line-height: 1;
+  border-radius: 999px; border: 1px solid #555; background: #1a1a1a; color: #ffa500;
+}
+.card-spread-centered .spread-btn.spread-btn-on,
+.card-spread-left .spread-btn.spread-btn-on { background: #ffa500; color: #1a1a1a; border-color: #ff7300; }
+
+/* --- Caja de votos (▲ n ▼): compacta y HORIZONTAL.
+   El problema era una cadena de flex-stretch (comment-vote-col flex → estiraba la caja a 135px).
+   Rompemos el estiramiento con height:auto + inline-flex en toda la cadena, con !important
+   para vencer el min-height:44px de .score-btn (762) y el !important de epsylon en mobile.css. --- */
+.comment-vote-col { display: block !important; height: auto !important; min-height: 0 !important; width: auto !important; }
+.forum-score-box {
+  display: inline-flex !important; height: auto !important; min-height: 0 !important;
+  min-width: 0 !important; width: auto !important;
+  padding: 4px 8px !important; border-radius: 10px !important;
+  flex-direction: row !important; flex-wrap: nowrap !important; gap: 12px !important; align-items: center !important;
+}
+.forum-score-form {
+  display: inline-flex !important; height: auto !important; width: auto !important;
+  flex-direction: row !important; flex-wrap: nowrap !important; gap: 12px !important; align-items: center !important;
+}
+.score-btn {
+  flex: 0 0 auto !important;
+  width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important;
+  font-size: 0.95em !important; border-radius: 8px !important; padding: 0 !important;
+}
+.score-total { flex: 0 0 auto !important; font-size: 1.15em !important; min-height: 0 !important; height: auto !important; margin: 0 !important; white-space: nowrap; }
+.comment-votes .votes-count { font-size: 11px; }
+
+/* Aplanar el comentario: quitar las cajas/recuadros internos para que sea UN bloque limpio
+   (cada sección salía como una tarjeta con padding enorme → mucho hueco muerto) */
+.forum-comment .comment-header,
+.forum-comment .comment-body-row,
+.forum-comment .comment-vote-col,
+.forum-comment .comment-text-col,
+.forum-comment .new-reply {
+  background: transparent !important; border: none !important; box-shadow: none !important;
+  padding: 0 !important; margin: 6px 0 0 !important; border-radius: 0 !important;
+}
+.forum-comment .comment-header { margin-top: 0 !important; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; }
+/* la barra de votos de abajo ya muestra el score → ocultar el ▲:0 ▼:0 redundante de la cabecera */
+.forum-comment .comment-header .comment-votes { display: none !important; }
+.forum-comment .comment-text-col p { margin: 4px 0 !important; }
+.forum-comment .comment-text-col > div { background: transparent !important; border: none !important; padding: 0 !important; }
+.forum-comment { padding: 10px 12px !important; margin-bottom: 8px !important; }
+/* barra de votos alineada a la izquierda, no centrada, para que ocupe poco */
+.forum-comment .comment-body-row { display: flex !important; flex-direction: column !important; align-items: flex-start !important; }
+
+/* --- Reply/compose del foro estilo Signal: fila [textarea que crece] + [botón REDONDO con icono ↩] --- */
+.new-reply .comment-form,
+.new-message-form { display: flex !important; flex-direction: row !important; align-items: flex-end !important; gap: 8px !important; margin: 6px 0 0 !important; }
+.new-message-form br { display: none !important; }
+.comment-textarea, .new-message-form textarea {
+  flex: 1 1 auto !important; box-sizing: border-box; border-radius: 14px;
+  padding: 9px 14px; min-height: 42px; resize: none; font-size: 14px; margin: 0 !important;
+}
+.forum-send-btn {
+  flex: 0 0 auto !important;
+  width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important;
+  padding: 0 !important; margin: 0 !important; border-radius: 50% !important;
+  font-size: 0 !important; line-height: 0 !important;
+  display: inline-flex !important; align-items: center !important; justify-content: center !important;
+}
+.forum-send-btn::before { content: "\21A9"; font-size: 20px; line-height: 1; color: #121212; }
+.new-reply { margin-top: 6px; }
+
+/* --- Fase 2: hilos anidados. mobile.css fuerza margin-left:0 !important → necesitamos !important para ganar --- */
+.forum-comment.level-1 { margin-left: 10px !important; border-left: 2px solid #333; }
+.forum-comment.level-2 { margin-left: 20px !important; border-left: 2px solid #3a3a3a; }
+.forum-comment.level-3 { margin-left: 28px !important; border-left: 2px solid #404040; }
+.forum-comment.level-4 { margin-left: 34px !important; border-left: 2px solid #454545; }
+/* comentario destacado: acento sutil a la izquierda en vez del marco naranja enorme */
+.forum-comment.highlighted-reply { border: 1px solid #3a3a3a !important; border-left: 3px solid #FFA500 !important; background: #1b1a16 !important; }
+
+/* --- Reply del foro SIN tocar la vista de epsylon: la cajita se agranda al enfocarla;
+   el botón redondo ↩ está SIEMPRE visible (el usuario pidió icono de reply, no gesto/JS). --- */
+.new-reply .comment-textarea { min-height: 42px; }
+.new-reply:focus-within .comment-textarea { min-height: 64px; }