{
    "name": "Midnight Sonata",
    "blur_strength": 10,
    "main_text_color": "rgba(216, 216, 228, 1)",
    "italics_text_color": "rgba(143, 160, 200, 1)",
    "underline_text_color": "rgba(216, 216, 228, 1)",
    "quote_text_color": "rgba(127, 168, 224, 1)",
    "blur_tint_color": "rgba(12, 24, 60, 1)",
    "chat_tint_color": "rgba(1, 2, 6, 0.15)",
    "user_mes_blur_tint_color": "rgba(10, 14, 32, 0.75)",
    "bot_mes_blur_tint_color": "rgba(6, 9, 22, 0.75)",
    "shadow_color": "rgba(0, 0, 0, 1)",
    "shadow_width": 2,
    "border_color": "rgba(150, 165, 200, 0.7)",
    "font_scale": 1,
    "fast_ui_mode": true,
    "waifuMode": false,
    "avatar_style": 0,
    "chat_display": 0,
    "toastr_position": "toast-top-center",
    "noShadows": true,
    "chat_width": 38,
    "timer_enabled": true,
    "timestamps_enabled": true,
    "timestamp_model_icon": true,
    "mesIDDisplay_enabled": true,
    "hideChatAvatars_enabled": false,
    "message_token_count_enabled": true,
    "expand_message_actions": false,
    "enableZenSliders": false,
    "enableLabMode": false,
    "hotswap_enabled": false,
    "custom_css": "/*!\n * Tema: Midnight Sonata\n * Creado por Annetts, para la comunidad de rol de IA en español y sus fans.\n * Gracias por usar mis bots y este tema <3\n */\n\n@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,700;1,400&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&family=Sacramento&display=swap');\n\n\n/* SIN DESPLAZAMIENTO LATERAL.\n   En celular --mv-frame-width vale 100vw, y 100vw mide el viewport COMPLETO,\n   barra de scroll vertical incluida. Sumado al sangrado con el que las varillas\n   se pegan al borde, el contenido termina siendo unos pocos pixeles mas ancho\n   que la pantalla: de ahi que el tema se corriera de lado al arrastrar el dedo.\n   Esto no recorta nada dentro del chat, solo impide que la pagina se desplace. */\nhtml, body {\n  overflow-x: hidden !important;\n  max-width: 100% !important;\n}\n\n:root {\n  --my-bg-opacity: 0.15;\n  --mes-max-width: 720px;\n  /* Fondo del chat. Antes heredaba el de SillyTavern con var(--body-bg-url). */\n  /* La imagen va solo en la columna del chat. El fondo de la pantalla es un\n     color plano, como en el tarot (ver la regla de #bg1 mas abajo). */\n  --chat-bg-url: url('https://i.ibb.co/XfbLy8xm/7d3f52bb-07b2-4b0b-b2e7-0f133c75916b.png');\n  --quote-ornament: url('https://i.ibb.co/Fb89tynW/pluma-comillas.png');\n\n  /* Iconos de navegacion superior */\n  --nav-send: url('https://i.ibb.co/9M5rXfx/icono-enviar-avion.png');\n  --nav-usersettings: url('https://i.ibb.co/5Wqhx9Gq/icono-usuario-siluetas.png');\n  --nav-api: url('https://i.ibb.co/PsfLD8TH/icono-api-enchufe.png');\n  --nav-noapi: url('https://i.ibb.co/qYsdkZw8/icono-api-caida.png');\n  --nav-sliders: url('https://i.ibb.co/LDfbWfCz/icono-sliders.png');\n  --nav-wand: url('https://i.ibb.co/Ndb2YLSs/icono-editar-lapiz.png');\n  --nav-hamburger: url('https://i.ibb.co/60kYCTVR/icono-hamburguesa.png');\n  --nav-persona: url('https://i.ibb.co/nMxktN4v/icono-personajes-tarjeta.png');\n  --nav-smiley: url('https://i.ibb.co/dsJFPJ8z/icono-carita.png');\n  --nav-dropdown: url('https://i.ibb.co/WvJ3PmSg/icono-desplegable.png');\n  --nav-horae: url('https://i.ibb.co/LhHLM88J/788c31b1-7072-4093-88c8-03dbec8bd43e.png');\n  --nav-gaigai: url('https://i.ibb.co/QjkPP1hm/icono-cuadricula.png');\n  --nav-table: url('https://i.ibb.co/JWJXr1Nb/icono-table.png');\n  --nav-extensions: url('https://i.ibb.co/Wp47hNCS/icono-extensiones-cubos.png');\n  --nav-widrawer: url('https://i.ibb.co/pj15F0mV/icono-worldinfo-libro.png');\n  --nav-advanced: url('https://i.ibb.co/5XnHg9v1/icono-formato-A.png');\n  --nav-backgrounds: url('https://i.ibb.co/Nnf5t7tj/icono-fondos.png');\n\n  /* Fondo exterior nuevo + iconos de acciones de mensaje */\n  --mes-edit-icon: url('https://i.ibb.co/PZnSdjd7/icono-lapiz-pluma.png');\n  --mes-dots-icon: url('https://i.ibb.co/ZRR59JfN/icono-tres-puntos.png');\n  --reasoning-icon: url('https://i.ibb.co/dwMZsGjH/icono-cerebro.png');\n  /* Banner movil nuevo (2172x724 -> proporcion alto/ancho = 33.33%) */\n  --banner-mobile: url('https://i.ibb.co/3y5X9PXt/992e3bc6-ba22-410c-9508-10f192aa4133-artguru.png');\n  /* Nubes con engranajes: capa de MAS ABAJO del encabezado (2012x781 -> 38.82%) */\n  --clouds-mobile: url('https://i.ibb.co/wZcYgVZk/a26368b4-4d42-46eb-9eab-6b2e38efe131.png');\n  /* Aro de gemas del avatar (1269x1240; hueco interior = 71.9% del diametro) */\n  --avatar-frame-mobile: url('https://i.ibb.co/zV44dzRp/2cf9c1d4-fc45-4065-8b5e-7847016a952d.png');\n  /* Pergamino del nombre para celular (2032x774) */\n  --parchment-mobile: url('https://i.ibb.co/MkfJSQFw/f86e94c9-c910-4461-8b35-7b94783cf733.png');\n  /* Varillas laterales sueltas (156x1484 y 164x1484), para repetirlas con\n     repeat-y en vez de estirarlas con border-image. */\n  --rod-left-mobile: url('https://i.ibb.co/zVmRxGvQ/varilla-v2.png');\n  --rod-right-mobile: url('https://i.ibb.co/Kz5mGVVd/varilla-derecha.png');\n  /* Adorno del borde inferior de la caja (1998x461 -> 23.07%) */\n  --deco-bottom-mobile: url('https://i.ibb.co/Swvstt7t/adorno-inferior-v2.png');\n  /* Mancha clara detras del encabezado (2184x720 -> 32.97%) */\n  --header-wash-mobile: url('https://i.ibb.co/zVq9w7r4/80ac2c9e-797f-4ea6-85e6-46f5a61af7f8.png');\n}\n\nbody, .mes_text {\n  font-family: 'Nunito', 'Georgia', sans-serif;\n}\n\nhtml, body {\n  background: radial-gradient(ellipse at center, #0d1530 0%, #060a1c 55%, #050302 100%) !important;\n  background-attachment: fixed !important;\n}\n\nh1, h2, h3, h4, h5, h6, .standoutHeader {\n  font-family: 'Nunito', sans-serif !important;\n  font-weight: 700;\n}\n\n/* ================= PANEL DE AJUSTES: cajas por bloque =================\n   Copiado del criterio de 长夜蔷薇: cada encabezado desplegable lleva su\n   propia caja con borde y fondo, y el contenido que cuelga de un\n   .standoutHeader (como \"Colores del tema\") tambien. Sin esto los bloques se\n   pierden sobre el fondo del panel. */\n#user-settings-block .inline-drawer-header,\n#extensions-settings-button .inline-drawer-header {\n  padding: 4px 10px !important;\n  filter: none !important;\n  border: 1px solid rgba(150, 170, 215, 0.55) !important;\n  border-radius: 5px !important;\n  /* Antes era rgba(104,56,52,.85): un marron rosado plano, mas claro que el\n     resto y sin profundidad, asi que se veia pegado encima del panel. Ahora\n     usa la familia de la caja del chat (rgba(48,28,26)) con un degradado y un\n     filo de luz arriba, para que el dorado del borde y el texto destaquen. */\n  background: linear-gradient(180deg, rgba(22, 33, 66, 0.94), rgba(10, 16, 36, 0.94)) !important;\n  box-shadow: inset 0 1px 0 rgba(205, 218, 245, 0.12) !important;\n  color: #e6ecfa !important;\n  transition: all 0.25s ease;\n}\n\n#user-settings-block .inline-drawer-header:hover,\n#extensions-settings-button .inline-drawer-header:hover {\n  background: linear-gradient(180deg, rgba(30, 44, 84, 0.96), rgba(20, 30, 62, 0.96)) !important;\n  box-shadow: inset 0 1px 0 rgba(205, 218, 245, 0.18), 0 0 6px rgba(205, 218, 245, 0.45) !important;\n}\n\n.standoutHeader.inline-drawer-header {\n  filter: none !important;\n}\n\n/* BOTONES. Los .menu_button venian con el negro por defecto de SillyTavern y\n   quedaban como parches oscuros dentro de los paneles y los popups (los de\n   \"Update all\" y \"Close\" en Gestionar extensiones, por ejemplo). Se les da el\n   mismo tratamiento que a los encabezados del panel. */\n.menu_button,\n.popup .menu_button,\n#dialogue_popup .menu_button {\n  background: linear-gradient(180deg, rgba(22, 33, 66, 0.94), rgba(10, 16, 36, 0.94)) !important;\n  border: 1px solid rgba(150, 170, 215, 0.55) !important;\n  border-radius: 5px !important;\n  box-shadow: inset 0 1px 0 rgba(205, 218, 245, 0.12) !important;\n  color: #e6ecfa !important;\n}\n\n.menu_button:hover,\n.popup .menu_button:hover,\n#dialogue_popup .menu_button:hover {\n  background: linear-gradient(180deg, rgba(30, 44, 84, 0.96), rgba(20, 30, 62, 0.96)) !important;\n  box-shadow: inset 0 1px 0 rgba(205, 218, 245, 0.18), 0 0 6px rgba(205, 218, 245, 0.45) !important;\n}\n\n\n.standoutHeader ~ .inline-drawer-content {\n  border: 1px solid rgba(150, 170, 215, 0.45);\n  border-radius: 5px;\n  padding: 8px !important;\n  color: #dde5f6 !important;\n  background: rgba(18, 28, 58, 0.55) !important;\n  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35),\n              0 4px 12px rgba(0, 0, 0, 0.25);\n}\n\n/* ================= FONDO DEL CHAT ================= */\n/* FONDO DE LA PANTALLA. El tarot deja que los costados de la columna los pinte\n   el fondo de la aplicacion (el de \"Fondos\" de SillyTavern). Aca lo trae el\n   tema, con un velo mas oscuro que el del chat para que la columna resalte y\n   no compita con el texto. */\n/* FONDO DE LA PANTALLA. Medido sobre la captura del tarot: su fondo exterior\n   es un COLOR PLANO (#202e4b en cinco puntos distintos, desviacion cero), que\n   es su propio blur_tint_color. No usan ninguna imagen ahi. Poner una foto,\n   como estaba, hacia que los costados compitieran con la columna en vez de\n   dejarla resaltar. Aca va el equivalente en nuestra paleta. */\nhtml body,\n#bg1,\n#bg_custom,\n#background_image,\nbody {\n  background-image: none !important;\n  /* Antes estaba en #010206, que es casi negro puro: en escritorio los\n     costados quedaban como dos bloques muertos. Nocturnal Harmony usa\n     #261514 ahi, un borgona oscuro pero con color visible. Este es el\n     equivalente en la paleta azul: mismo peso, tono marino. */\n  background-color: #141d3d !important;\n}\n\n#chat {\n  background:\n    linear-gradient(to bottom, rgba(6, 5, 4, var(--my-bg-opacity)), rgba(6, 5, 4, var(--my-bg-opacity))),\n    var(--chat-bg-url);\n  background-position: center top;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-attachment: fixed;\n  border: 0  /* era 1px plata: se veia como una linea vertical clara a los lados, por encima del banner, y se confundia con las varillas */;\n}\n\n/* ================= ESTRUCTURA DEL MENSAJE ================= */\n/* Avatar + pergamino (nombre) + medallon, los tres en UNA SOLA FILA horizontal arriba */\n#chat .mes {\n  position: relative !important;\n  border: none !important;\n  background: transparent !important;\n  width: 100% !important;\n  max-width: var(--mes-max-width) !important;\n  margin: 0 auto 35px auto !important;\n  padding-top: 173px !important;\n  overflow: visible !important;\n\n  /* SillyTavern aplica content-visibility/contain a los mensajes que quedan\n     fuera de la vista para acelerar el scroll, y eso RECORTA todo lo que\n     sobresale de la caja. Por eso el banner se veia entero en el ultimo mensaje\n     y cortado en cuanto subia con un mensaje nuevo. Sin esto, cualquier adorno\n     que sobresalga (el banner arriba, la gema del adorno abajo) se pierde. */\n  /* content-visibility vuelve a 'auto': el navegador se saltea el dibujado de\n     los mensajes fuera de vista, que es de donde sale casi todo el rendimiento\n     del scroll. Recorta lo que sobresalga de la caja, asi que ningun adorno\n     debe salirse (ver --mv-banner-trim-top).\n     contain-intrinsic-size le da una altura estimada a los mensajes que aun no\n     dibujo, para que la barra de scroll no salte mientras se recorren. */\n  contain: layout style !important;\n  content-visibility: auto !important;\n  contain-intrinsic-size: auto 700px !important;\n}\n\n/* El titulo decorativo antiguo se elimino: era el banner de Nocturnal Harmony\n   y llevaba el nombre escrito en la propia imagen. El banner de este tema lo\n   define la regla de #chat .mes::before del bloque @media all, que trae todas\n   sus propiedades y no depende de esta. */\n\n/* Fondo cosmico decorativo: va detras de TODO el encabezado (avatar, pergamino, medallon\n   y hasta detras del marco Nocturnal Harmony), llenando la zona donde antes solo se veia\n   el fondo oscuro liso a traves del marco */\n#chat .mes::after {\n  content: \"\" !important;\n  display: block !important;\n  position: absolute !important;\n  top: 30px !important;\n  left: 5% !important;\n  width: 90% !important;\n  height: 210px !important;\n  /* Fondo cosmico viejo. Lo pisa #chat .mes::after del bloque @media all,\n     que pinta las nubes. Asset borrado. */\n  background-image: none !important;\n  background-size: 100% 100% !important;\n  background-position: center !important;\n  background-repeat: no-repeat !important;\n  z-index: 2 !important;\n  opacity: 0.85;\n  pointer-events: none !important;\n}\n\n.mes, .mes_block {\n  overflow: visible !important;\n  position: relative !important;\n  padding: 0px;\n}\n\n/* Pergamino: centro de la fila, mantiene su proporcion real (3625:1283) via padding-bottom.\n   mes_block arranca ~137px mas abajo que el avatar (por contenido propio de la app antes de el),\n   asi que usamos un top NEGATIVO para subirlo y alinearlo con el avatar. */\n.mes_block::before {\n  content: \"\";\n  position: absolute;\n  top: -82px;\n  left: 31.2%;\n  width: 24%;\n  height: 0 !important;\n  padding-bottom: 8.51%; /* 24% * (227/640) */\n  /* Pergamino viejo. Lo pisa #chat .mes .mes_block::before. Asset borrado. */\n  background-image: none;\n  background-size: 100% 100%;\n  background-repeat: no-repeat;\n  transform: rotate(-4deg);\n  pointer-events: none;\n  z-index: 6;\n}\n\n/* Medallon de fases lunares: a la derecha, superpuesto al borde derecho del pergamino */\n.mes_block::after {\n  content: \"\";\n  position: absolute;\n  top: -120px;\n  left: 36.4%;\n  width: 319px;\n  height: 206px;\n  /* Medallon lunar viejo. Lo pisa #chat .mes .mes_block::after. Asset borrado. */\n  background-image: none;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  pointer-events: none;\n  z-index: 5;\n}\n\n/* Avatar: a la izquierda de la fila, con el aro de gemas como marco */\n/* Neutralizar el wrapper del avatar: SillyTavern a veces lo posiciona con su propio\n   position:absolute y offsets, lo cual descuadraba nuestras propias posiciones */\n.mes .mesAvatarWrapper,\n.mes .avatar-container {\n  position: static !important;\n  top: auto !important;\n  left: auto !important;\n  right: auto !important;\n  bottom: auto !important;\n  margin: 0 !important;\n}\n\n.mes .avatar {\n  position: absolute;\n  top: 82px;\n  left: 13.2%;\n  z-index: 11;\n  width: 108px;\n  height: 108px;\n}\n\n.mes .avatar img {\n  position: absolute;\n  width: 108px;\n  height: 108px;\n  border-radius: 50%;\n  object-fit: cover;\n  left: 0;\n  top: 0;\n  z-index: 8;\n  border: 2px solid rgba(20, 16, 12, 0.6);\n  box-shadow: 0 0 10px rgba(132, 158, 210, 0.4);\n}\n\n/* Aro de gemas: nuevo marco del avatar, centrado sobre la foto */\n.mes .avatar::before {\n  content: \"\";\n  position: absolute;\n  width: 139px;\n  height: 139px;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  /* Aro viejo. Lo pisa #chat .mes .avatar::before, que usa\n     --avatar-frame-mobile. Asset borrado. */\n  background-image: none;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  pointer-events: none;\n  z-index: 15;\n}\n\n/* Nombre del personaje: SOLO texto, centrado sobre el pergamino (sin imagen propia) */\n.mes .mes_block .name_text {\n  position: absolute !important;\n  top: -64px !important;\n  left: 31.2% !important;\n  width: 24% !important;\n  transform: rotate(-7deg) !important;\n  text-align: center !important;\n  padding: 0 !important;\n  box-sizing: border-box !important;\n  z-index: 7;\n  background: transparent !important;\n  font-family: 'Playfair Display', serif !important;\n  font-style: italic !important;\n  font-variant: small-caps !important;\n  font-size: 1.05em !important;\n  font-weight: 600 !important;\n  letter-spacing: 0.03em !important;\n  color: #3a4a72 !important;\n  text-shadow: none !important;\n}\n\n.mes .mes_block .name_text::after {\n  content: none;\n}\n\n/* Cuerpo del mensaje: marco armado con piezas separadas (esquinas + laterales) como\n   multiples capas de fondo. Cada pieza queda fija en su lugar sin deformarse nunca,\n   sin importar cuan largo o corto sea el mensaje. */\n#chat .mes_text {\n  position: relative !important;\n  overflow: visible !important;\n  width: 100% !important;\n  margin: 8px 0 0 0 !important;\n  padding: 60px 90px 95px 70px !important;\n  color: #dde5f6 !important;\n  text-align: left !important;\n  line-height: 1.65 !important;\n  letter-spacing: 0.02em;\n  border: none !important;\n  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;\n  box-sizing: border-box !important;\n\n  background-color: rgba(18, 28, 58, 0.85) !important;\n  /* Marco viejo de Nocturnal Harmony (esquinas, volutas, franja inferior y\n     varillas centrales). La regla #chat .mes .mes_block .mes_text del bloque\n     @media all ya lo pisaba con background-image: none, asi que no se veia.\n     Assets borrados. */\n  background-image: none !important;\n  background-position:\n    top 0 left 0,\n    top 0 right 0,\n    top 0 left 45px,\n    top 0 left 431px,\n    bottom 0 center,\n    left 5px top 10px,\n    right 8px top 10px !important;\n  background-size:\n    65px 64px,\n    71px 79px,\n    261px 38px,\n    218px 34px,\n    100% 70px,\n    8px calc(100% - 10px - 55px),\n    8px calc(100% - 10px - 55px) !important;\n  background-repeat:\n    no-repeat,\n    no-repeat,\n    no-repeat,\n    no-repeat,\n    no-repeat,\n    no-repeat,\n    no-repeat !important;\n}\n\n#chat .mes_text > * {\n  position: relative;\n  z-index: 2;\n}\n\n#chat .mes_text p {\n  margin-bottom: 1.1em !important;\n  margin-top: 0 !important;\n}\n\n#chat .mes_text p:last-child {\n  margin-bottom: 0 !important;\n}\n\n.mes .mes_text q {\n  color: #f2f6ff !important;\n  font-style: italic;\n  border-radius: 5px;\n  border-bottom: 1px dashed rgba(215, 228, 255, 0.9);\n  font-weight: 500;\n  line-height: 1.6 !important;\n  letter-spacing: 0.02em;\n  padding: 2px 10px 2px 24px;\n  position: relative;\n  box-sizing: border-box;\n  background: rgba(58, 82, 140, 0.92);\n}\n\n.mes .mes_text q::before {\n  content: \"\";\n  position: absolute;\n  /* La caja tiene que seguir la proporcion del dibujo o la pluma sale\n     aplastada (bug 9). La pluma nueva, recortada al alfa, mide 597x1534, o\n     sea 0.389 de ancho por alto: con 37 de alto le tocan 14 de ancho.\n     La anterior media 366x1363 (0.269) y la caja era 10x37. */\n  top: -6px;\n  left: 6px;\n  width: 14px;\n  height: 37px;\n  background-image: var(--quote-ornament);\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  pointer-events: none;\n}\n\n.mes .mes_text em {\n  color: #849ed2;\n  font-style: italic;\n}\n\n.mes_text strong {\n  color: #cddaf5;\n}\n\n/* ================= SCROLLBAR DORADO ================= */\n::-webkit-scrollbar {\n  position: absolute;\n  width: 0px;\n  right: 0;\n  background: transparent;\n}\n\n::-webkit-scrollbar-thumb {\n  background: linear-gradient(to bottom, rgba(132, 158, 210, 0.8), rgba(86, 105, 150, 0.8));\n  border: 2px solid rgba(10, 8, 6, 0.9);\n  border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n  background: linear-gradient(to bottom, rgba(200, 214, 245, 0.9), rgba(110, 135, 185, 0.9));\n}\n\n/* ================= PANELES LATERALES ================= */\n#left-nav-panel,\n#right-nav-panel,\n#WorldInfo,\n#user-settings-block,\n#rm_extensions_block,\n#PersonaManagement,\n#Backgrounds,\n#rm_api_block,\n#AdvancedFormatting,\n#table_drawer_content,\n#extensions_settings,\n#extensions_settings2,\n.extensions_block {\n  /* Enrejado fino con un punto de luz en cada cruce, tipo hierro forjado.\n     Reemplaza al zigzag de 16px, que era mas plano. */\n  background:\n    radial-gradient(circle at 0 0, rgba(205, 218, 245, 0.30) 0.8px, transparent 1.2px),\n    repeating-linear-gradient(45deg, transparent 0 13px, rgba(150, 175, 225, 0.11) 13px 14px),\n    repeating-linear-gradient(-45deg, transparent 0 13px, rgba(150, 175, 225, 0.11) 13px 14px),\n    radial-gradient(ellipse at center, #22305a 55%, #0b1128 100%) !important;\n  background-size: 14px 14px, auto, auto, auto !important;\n  background-position: 7px 7px, 0 0, 0 0, center !important;\n  /* Antes rgba(167,125,127,.5), un rosa grisaceo que convivia con el dorado de\n     los recuadros. Unificado a la familia dorada. */\n  border: 1px solid rgba(150, 170, 215, 0.55) !important;\n  border-radius: 6px;\n}\n\n/* TEXTURA DE LOS POPUPS. El color de fondo ya lo pone blur_tint_color desde\n   el JSON, igual que hace el tarot con su azul; aca solo se suma la trama de\n   rombos encima, SIN background-color, para no tapar ese tinte ni volver a\n   pintar contenedores anidados (eso fue lo que amontonaba las ventanas). */\n/* ======= MENSAJES DE SISTEMA Y PANTALLA DE BIENVENIDA =======\n   El mensaje de bienvenida es un .smallSysMes, no una respuesta del personaje,\n   pero heredaba todo el decorado del chat: banner, varillas, pergamino y\n   adorno inferior. El tarot lo resuelve apagando esos pseudo-elementos en\n   .smallSysMes.last_mes; aca se hace lo mismo, sin limitarlo al ultimo. */\n#chat .mes.smallSysMes::before,\n#chat .mes.smallSysMes::after,\n#chat .mes.smallSysMes .mes_block::before,\n#chat .mes.smallSysMes .mes_block::after,\n#chat .mes.smallSysMes .mes_text::before,\n#chat .mes.smallSysMes .mes_text::after,\n#chat .mes.smallSysMes .mesAvatarWrapper::before {\n  opacity: 0 !important;\n  visibility: hidden !important;\n  content: none !important;\n  pointer-events: none !important;\n}\n\n#chat .mes.smallSysMes,\n#chat .mes.smallSysMes .mes_block,\n#chat .mes.smallSysMes .mes_text {\n  background: none !important;\n  background-image: none !important;\n  border: 0 !important;\n  border-image: none !important;\n  box-shadow: none !important;\n  padding-top: 0 !important;\n  padding-bottom: 0 !important;\n  text-align: center !important;\n}\n\n/* Logo y version de TauriTavern en la pantalla de inicio. Los selectores son\n   los que usa el tarot, que es donde estan bien identificados. */\n.welcomePanel .welcomeHeaderLogo {\n  display: none !important;\n}\n\n.welcomeHeaderVersionDisplay {\n  color: transparent !important;\n  font-size: 0 !important;\n}\n\n.welcomeHeaderTitle {\n  margin: 0 !important;\n}\n\n/* El mensaje que contiene la pantalla de inicio no es del personaje, pero\n   heredaba el banner, el pergamino, el aro del avatar, las varillas y el\n   adorno inferior. Aca se apaga todo eso: la clase .smallSysMes no alcanzaba\n   porque este mensaje no la lleva. */\n#chat .mes:has(.welcomePanel)::before,\n#chat .mes:has(.welcomePanel)::after,\n#chat .mes:has(.welcomePanel) .mes_block::before,\n#chat .mes:has(.welcomePanel) .mes_block::after,\n#chat .mes:has(.welcomePanel) .mes_text::before,\n#chat .mes:has(.welcomePanel) .mes_text::after,\n#chat .mes:has(.welcomePanel) .avatar::before,\n#chat .mes:has(.welcomePanel) .mesAvatarWrapper {\n  display: none !important;\n  content: none !important;\n  opacity: 0 !important;\n  visibility: hidden !important;\n}\n\n#chat .mes:has(.welcomePanel),\n#chat .mes:has(.welcomePanel) .mes_block,\n#chat .mes:has(.welcomePanel) .mes_text {\n  background: none !important;\n  background-image: none !important;\n  border: 0 !important;\n  border-image: none !important;\n  box-shadow: none !important;\n  padding-top: 0 !important;\n  padding-bottom: 0 !important;\n}\n\n/* ======= NOTA DE AGRADECIMIENTO =======\n   Mismo recurso que usa Baby Duck Glass: un ::after sobre .welcomePanel con el\n   texto en la propia hoja. Para cambiarlo, editar el content de aqui abajo;\n   \\A es un salto de linea. */\n.welcomePanel {\n  position: relative !important;\n  overflow: visible !important;\n}\n\n.welcomePanel::after {\n  content: \"🎹✦ MIDNIGHT SONATA ✦🪶 \\A Created by Annetts \\A  \\A Un piano para tus personajes. \\A Gracias por elegir mis bots y darle vida a este tema: cada historia, cada mundo y cada voz encuentra aquí su compás. \\A  \\A ─────────────── \\A  \\A 📜 Aviso \\A  \\A Si tienes dudas, sugerencias o quieres compartir tus historias, te invito a unirte a mi canal de WhatsApp. Allí podrás interactuar con lo que comparto y dejar tus mensajes cuando abramos la caja de preguntas ⚜️ \\A  \\A ─────────────── \\A  \\A \\\"Que la noche te encuentre tocando.\\\"\" !important;\n  white-space: pre-wrap !important;\n  display: block !important;\n  text-align: center !important;\n  font-size: 14px !important;\n  line-height: 1.7 !important;\n  color: #dde5f6 !important;\n  margin: 26px auto 34px auto !important;\n  padding: 18px 15px !important;\n  width: 100% !important;\n  max-width: 100% !important;\n  box-sizing: border-box !important;\n  word-wrap: break-word !important;\n  background-color: rgba(12, 20, 44, 0.55) !important;\n  background-image:\n    radial-gradient(circle at 0 0, rgba(205, 218, 245, 0.30) 0.8px, transparent 1.2px),\n    repeating-linear-gradient(45deg, transparent 0 13px, rgba(150, 175, 225, 0.11) 13px 14px),\n    repeating-linear-gradient(-45deg, transparent 0 13px, rgba(150, 175, 225, 0.11) 13px 14px) !important;\n  background-size: 14px 14px, auto, auto !important;\n  background-position: 7px 7px, 0 0, 0 0 !important;\n  border: 1px solid rgba(150, 170, 215, 0.55) !important;\n  border-radius: 6px !important;\n}\n\n/* EDITOR DE PROMPTS. No es un .popup ni usa el tinte del tema: es un\n   formulario propio del gestor de prompts que se dibuja encima de la lista sin\n   fondo, y por eso se leia todo lo de atras.\n   OJO con el selector: el prefijo del id lo comparten TAMBIEN los campos de\n   adentro (..._entry_form_prompt, ..._entry_form_name). Aplicarles a ellos el\n   tamaño a pantalla completa fue lo que reventó el formulario, asi que el\n   contenedor se nombra por id exacto y los campos quedan excluidos. */\n#completion_prompt_manager_popup_edit,\n#completion_prompt_manager_popup {\n  position: fixed !important;\n  top: 0 !important;\n  left: 0 !important;\n  right: 0 !important;\n  bottom: 0 !important;\n  width: 100% !important;\n  max-width: 100% !important;\n  height: 100% !important;\n  max-height: 100% !important;\n  margin: 0 !important;\n  padding: 12px !important;\n  overflow-y: auto !important;\n  z-index: 9998 !important;\n  border: 0 !important;\n  border-radius: 0 !important;\n}\n\n/* El fondo si puede ir por prefijo, pero sin tocar los campos del formulario\n   ni su tamaño: solo pinta el contenedor. */\n[id^=\"completion_prompt_manager_popup\"]:not(input):not(textarea):not(select):not([id*=\"entry_form\"]) {\n  background-color: rgba(8, 14, 32, 1) !important;\n  background-image:\n    radial-gradient(circle at 0 0, rgba(205, 218, 245, 0.30) 0.8px, transparent 1.2px),\n    repeating-linear-gradient(45deg, transparent 0 13px, rgba(150, 175, 225, 0.11) 13px 14px),\n    repeating-linear-gradient(-45deg, transparent 0 13px, rgba(150, 175, 225, 0.11) 13px 14px) !important;\n  background-size: 14px 14px, auto, auto !important;\n  background-position: 7px 7px, 0 0, 0 0 !important;\n}\n\n.popup,\n#dialogue_popup {\n  /* Ademas del desenfoque (blur_strength en el JSON), un color opaco de base:\n     asi el editor tapa la lista de atras aunque el desenfoque no alcance. */\n  background-color: rgba(12, 20, 44, 0.97) !important;\n  background-image:\n    radial-gradient(circle at 0 0, rgba(205, 218, 245, 0.30) 0.8px, transparent 1.2px),\n    repeating-linear-gradient(45deg, transparent 0 13px, rgba(150, 175, 225, 0.11) 13px 14px),\n    repeating-linear-gradient(-45deg, transparent 0 13px, rgba(150, 175, 225, 0.11) 13px 14px) !important;\n  background-size: 14px 14px, auto, auto !important;\n  background-position: 7px 7px, 0 0, 0 0 !important;\n}\n\n.drawer-content {\n  background-color: transparent !important;\n}\n\n#user-settings-block,\n#left-nav-panel,\n#right-nav-panel,\n#WorldInfo,\n#rm_extensions_block,\n#PersonaManagement,\n#Backgrounds,\n#rm_api_block,\n#AdvancedFormatting,\n#table_drawer_content {\n  font-family: 'Nunito', sans-serif !important;\n  color: #d8dff2 !important;\n}\n\n#user-settings-block label,\n#user-settings-block span,\n#user-settings-block small,\n#user-settings-block .checkbox_label,\n#left-nav-panel label,\n#right-nav-panel label {\n  /* Antes #c2cbe2 (rosa grisaceo). Pasado a la familia crema/dorada del\n     resto del tema, que era la incoherencia de la paleta. */\n  color: #dde5f6 !important;\n}\n\n#user-settings-block h3,\n#user-settings-block h4,\n#user-settings-block .title_restorable .flex-container {\n  font-family: 'Nunito', sans-serif !important;\n  font-weight: 700;\n  color: #cddaf5 !important;\n  letter-spacing: 0.02em;\n}\n\n/* Las descripciones bajo cada opcion venian en un naranja saturado que\n   competia con el titulo. En dorado apagado se leen igual pero quedan en\n   segundo plano, que es su jerarquia. */\n#user-settings-block small,\n#user-settings-block .toggle-description,\n#user-settings-block .range-block-counter,\n#left-nav-panel small,\n#right-nav-panel small,\n#rm_api_block small,\n.toggle-description {\n  color: #9aa8c6 !important;\n}\n\n#user-settings-block a,\n#user-settings-block .neutral_warning {\n  color: #cddaf5 !important;\n}\n\n.standoutHeader, h4 {\n  background:\n    linear-gradient(45deg, transparent 6px, rgba(150, 175, 225, 0.16) 6px, rgba(150, 175, 225, 0.16) 7px, transparent 7px),\n    linear-gradient(-45deg, transparent 6px, rgba(150, 175, 225, 0.16) 6px, rgba(150, 175, 225, 0.16) 7px, transparent 7px),\n    linear-gradient(45deg, transparent 3px, rgba(150, 175, 225, 0.11) 3px, rgba(150, 175, 225, 0.11) 4px, transparent 4px),\n    linear-gradient(-45deg, transparent 3px, rgba(150, 175, 225, 0.11) 3px, rgba(150, 175, 225, 0.11) 4px, transparent 4px),\n    rgba(20, 16, 12, 0.8) !important;\n  background-size: 16px 16px, 16px 16px, 16px 16px, 16px 16px, auto !important;\n  background-position: 0 0, 0 0, 8px 8px, 8px 8px, center !important;\n  color: #96afe1 !important;\n  border: 1px solid rgba(205, 218, 245, 0.45) !important;\n  border-radius: 3px !important;\n  box-shadow:\n    0 0 10px rgba(205, 218, 245, 0.3),\n    inset 0 0 10px rgba(132, 158, 210, 0.15) !important;\n}\n\n/* ================= BARRA SUPERIOR DE ICONOS ================= */\n#top-settings-holder {\n  position: relative !important;\n  /* Textura del tema: rayas verticales finas (teclas) con puntos de luz\n     (estrellas) sobre azul marino. Reemplaza al enrejado diagonal dorado. */\n  background:\n    repeating-linear-gradient(90deg,\n      transparent 0 13px,\n      rgba(180, 197, 235, 0.10) 13px 14px),\n    radial-gradient(circle at 7px 7px, rgba(205, 220, 255, 0.20) 0.9px, transparent 1.4px),\n    radial-gradient(circle at 21px 21px, rgba(205, 220, 255, 0.13) 0.7px, transparent 1.2px),\n    linear-gradient(90deg, #080e20, #16203f, #080e20) !important;\n  background-size: 14px 100%, 28px 28px, 28px 28px, auto !important;\n  background-position: 0 0, 0 0, 0 0, center !important;\n  border-bottom: 1px solid rgba(190, 205, 235, 0.35) !important;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);\n}\n\n/* ================= CHATS RECIENTES (pantalla de bienvenida) ================= */\n.recentChat {\n  background: rgba(18, 28, 58, 0.85) !important;\n  border: 1px solid rgba(205, 218, 245, 0.5) !important;\n  border-radius: 6px !important;\n  box-shadow:\n    0 4px 10px rgba(0, 0, 0, 0.4),\n    inset 0 0 10px rgba(132, 158, 210, 0.12) !important;\n  color: #d8dff2 !important;\n  transition: border-color 0.25s ease, box-shadow 0.25s ease;\n  margin-bottom: 6px;\n}\n\n.recentChat:hover {\n  border: 1px solid rgba(205, 218, 245, 0.85) !important;\n  box-shadow:\n    0 4px 14px rgba(0, 0, 0, 0.5),\n    0 0 12px rgba(205, 218, 245, 0.3),\n    inset 0 0 10px rgba(132, 158, 210, 0.18) !important;\n}\n\n.recentChat .chatNameContainer,\n.recentChat .chatMessageContainer,\n.recentChat .recentChatInfo,\n.recentChat .recentChatInfo * {\n  color: #dde5f6 !important;\n}\n\n.recentChat .chatNameContainer b,\n.recentChat .chatNameContainer strong {\n  color: #d8dff2 !important;\n}\n\n/* ================= MENSAJE DE SISTEMA (panel de accesos rapidos: Conexiones de API,\n   Gestion de Personajes, Extensiones) - NO debe llevar marco/banner de personaje ================= */\n.mes:has(.custom-flex-container) {\n  padding-top: 4px !important;\n  margin: -70px auto 20px auto !important;\n}\n\n#chat .mes:has(.custom-flex-container)::before,\n#chat .mes:has(.custom-flex-container)::after {\n  display: none !important;\n}\n\n.mes:has(.custom-flex-container) .mes_block::before,\n.mes:has(.custom-flex-container) .mes_block::after {\n  display: none !important;\n}\n\n.mes:has(.custom-flex-container) .avatar,\n.mes:has(.custom-flex-container) .name_text {\n  display: none !important;\n}\n\n/* El aro dorado con el logo no es .avatar: lo dibuja .avatar::before, y el\n   contenedor .mesAvatarWrapper es el que lo sostiene. Por eso seguia\n   apareciendo aunque el avatar estuviera oculto. */\n#chat .mes:has(.custom-flex-container) .avatar::before,\n#chat .mes:has(.custom-flex-container) .avatar::after,\n#chat .mes:has(.custom-flex-container) .mesAvatarWrapper,\n#chat .mes:has(.custom-flex-container) .mes_block .mes_text::before,\n#chat .mes:has(.custom-flex-container) .mes_block .mes_text::after {\n  display: none !important;\n  content: none !important;\n  visibility: hidden !important;\n}\n\n#chat .mes:has(.custom-flex-container) .mes_text {\n  padding: 20px 0 !important;\n  background-image: none !important;\n  background-color: transparent !important;\n  border: none !important;\n  box-shadow: none !important;\n}\n\n#chat .mes:has(.custom-flex-container) .custom-flex-container {\n  display: flex !important;\n  justify-content: center !important;\n  align-items: center !important;\n  width: 100% !important;\n  margin: 0 auto !important;\n  text-align: center !important;\n  gap: 10px;\n}\n\n/* ================= ICONOS DE ACCIONES DEL MENSAJE (lapiz editar / puntos expandir) ================= */\n.mes .mes_buttons {\n  position: absolute !important;\n  top: 77px !important;\n  right: 78px !important;\n  z-index: 50 !important;\n  background: transparent !important;\n  border: none !important;\n  border-radius: 0 !important;\n  padding: 0 !important;\n  box-shadow: none !important;\n  gap: 6px !important;\n}\n\n.mes_button.mes_edit,\n.mes_button.extraMesButtonsHint {\n  display: inline-flex !important;\n  opacity: 1 !important;\n  width: 26px !important;\n  height: 26px !important;\n  background: transparent !important;\n  border: none !important;\n  color: transparent !important;\n  position: relative;\n  z-index: 99 !important;\n  justify-content: center !important;\n  align-items: center !important;\n  transition: all 0.3s ease;\n}\n\n.mes_button.mes_edit i,\n.mes_button.extraMesButtonsHint i {\n  color: transparent !important;\n  opacity: 0 !important;\n}\n\n.mes_button.mes_edit::before,\n.mes_button.extraMesButtonsHint::before {\n  content: '';\n  display: inline-block;\n  width: 21px;\n  height: 21px;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  transition: all 0.25s ease;\n}\n\n.mes_button.mes_edit::before {\n  background-image: var(--mes-edit-icon);\n}\n\n.mes_button.extraMesButtonsHint::before {\n  background-image: var(--mes-dots-icon);\n}\n\n.mes_button.mes_edit:hover::before,\n.mes_button.extraMesButtonsHint:hover::before {\n  transform: scale(1.15);\n  filter: drop-shadow(0 0 5px rgba(205, 218, 245, 0.7));\n}\n\n/* ================= RAZONAMIENTO (thinking): position relative + top,\n   igual tecnica que el tema de referencia, calibrado a nuestro marco ================= */\n.mes_reasoning_details {\n  position: relative !important;\n  top: 20px !important;\n  width: 100% !important;\n  margin: 0 !important;\n  background: transparent !important;\n  border: none !important;\n  box-shadow: none !important;\n}\n\n/* el texto del razonamiento nunca se muestra */\n.mes_reasoning {\n  display: none !important;\n}\n\n.mes_reasoning_summary {\n  display: flex !important;\n  justify-content: flex-start !important;\n  align-items: center !important;\n  padding-left: 62px !important;\n  width: 100% !important;\n  margin: 0 !important;\n  list-style: none !important;\n  background: transparent !important;\n  border: none !important;\n  box-shadow: none !important;\n  pointer-events: none !important;\n  cursor: default !important;\n}\n\n.mes_reasoning_summary::-webkit-details-marker {\n  display: none !important;\n}\n.mes_reasoning_summary::marker {\n  content: '' !important;\n}\n\n.mes_reasoning_header_block,\n.mes_reasoning_header {\n  width: 26px !important;\n  height: 26px !important;\n  display: flex !important;\n  justify-content: center !important;\n  align-items: center !important;\n  background: transparent !important;\n  border: none !important;\n  box-shadow: none !important;\n  padding: 0 !important;\n  margin: 0 !important;\n}\n\n.mes_reasoning_header_title,\n.mes_reasoning_header span,\n.mes_reasoning_header i,\n.mes_reasoning_arrow {\n  display: none !important;\n}\n\n.mes_reasoning_header::before {\n  content: '';\n  display: block !important;\n  width: 26px;\n  height: 26px;\n  background-image: var(--reasoning-icon);\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n}\n\n/* ================= AJUSTES PARA CELULAR (max-width: 768px) =================\n   Estructura tipo \"塔罗_命运之轮\": el banner y el pergamino se pintan COMO\n   FONDO de la propia caja de texto (#chat .mes_text::before/::after), no como\n   piezas sueltas flotando encima. Asi el color de la caja sube hasta el\n   banner (son el mismo elemento) y nunca se pueden desalinear entre si.\n   El avatar sigue siendo la unica pieza aparte (chica, simple, pegada al\n   borde superior de .mes), igual que en ese tema de referencia. *//* ================= AJUSTES PARA CELULAR (max-width: 768px) =================\n   PASO 1, minimo: solo que la caja de texto toque los bordes completamente.\n   Todo lo demas (banner, medallon, pergamino, avatar reposicionado, varilla)\n   esta apagado a proposito para probar esto solo, sin nada que lo tape o\n   lo desalinee. Se reconstruye de a una pieza despues de confirmar esto. */\n/* Este bloque ya no es solo para celular: el escritorio usa exactamente el\n   mismo diseño. Como todos sus valores estan calibrados en pixeles para un\n   ancho de 360, en pantallas grandes el chat se limita a ese ancho y se\n   centra (regla de mas abajo), en vez de estirarse y descuadrar los adornos. */\n@media all {\n\n  /* --- Numeros que gobiernan el encabezado movil ---\n     Medidos sobre el PNG del banner (2172x724 px):\n       - proporcion alto/ancho = 33.33%  -> --mv-banner-ratio\n       - con 30px de padding lateral, el arte mas profundo que invade la\n         columna de texto baja hasta ~58px -> por eso el padding-top es 72px. */\n  :root {\n    --mv-banner-ratio: 33.98%;  /* 2113x718 */\n    /* Ancho de referencia del marco. En celular es la pantalla; en escritorio\n       lo pisa el bloque de abajo con el ancho de la columna. Antes esto era\n       100vw fijo, y por eso en escritorio el mensaje se estiraba mas alla del\n       chat. */\n    --mv-frame-width: 100vw;\n    --mv-box-padding-top: calc(var(--mv-frame-width) * 0.575000);\n    --mv-box-padding-x: calc(var(--mv-frame-width) * 0.083333);\n\n    /* Varillas laterales. Ahora van como background-image con repeat-y, no\n       como border-image: asi cada baldosa conserva su proporcion real y se\n       repite hacia abajo, en vez de estirarse al largo del mensaje. */\n    /* La varilla nueva (941x1672) tiene el arte solo en el 36.5% central:\n       32% de margen transparente a cada lado. Para que se vea de 34px como\n       antes, la baldosa tiene que medir 93px, y hay que correrla 30px para\n       que el dibujo quede pegado al borde en vez del vacio. */\n    /* PNG recortado: la baldosa ES el dibujo, sin aire a los lados. Antes el\n       archivo traia 297px transparentes a la izquierda y 293 a la derecha\n       (casi dos tercios del ancho), y por eso hacia falta correrlo con bleed.\n       35px reproduce el ancho visible que daba el viejo (93 * 351/941 = 34.7). */\n    /* Crece con el ancho pero con tope: al escalar sin limite, en escritorio la\n       baldosa pasaba de 35px a casi 100 y el poste con sus rosas se metia\n       dentro de la columna de texto. */\n    --mv-rod-w: min(calc(var(--mv-frame-width) * 0.097222), 52px);\n    /* Corre la varilla hacia AFUERA para que el poste quede pegado al borde y\n       no se vea franja de caja a los lados. En el PNG recortado el poste\n       arranca al 43.59% de la baldosa: 35 * 0.4359 = 15.3px, asi que con 15\n       queda al ras. Lo que sobresale (hojas y cinta del lado de adentro) se\n       recorta, que es lo buscado. Mas = mas afuera y empieza a comerse el\n       poste; menos = reaparece el borde. */\n    /* Atado al ancho de la baldosa (15/35), para que el poste siga quedando\n       al ras del borde aunque la varilla llegue a su tope. */\n    --mv-rod-bleed: calc(var(--mv-rod-w) * 0.428571);\n    /* Las varillas empiezan donde empieza el dibujo del banner en los laterales.\n       Medido en el PNG (2113x718): en los bordes el dibujo arranca al 12.7% de\n       su alto, y como el banner mide 33.98% del ancho de la caja, eso son\n       0.3398 * 0.127 = 4.3% del ancho. Pero ese es el punto mas alto del\n       dibujo, en el borde mismo; las curvas de las esquinas caen bastante mas\n       abajo. Medido en pantalla: con 4.3% las varillas quedaban 32px bajo el\n       borde y las curvas arrancan a 85, de ahi el 11.4%.\n       Sin este desfase queda un tramo de varilla suelta arriba, entre el borde\n       de la caja y las esquinas del banner: ese es el hueco que se veia. */\n    --mv-rod-top: calc(var(--mv-frame-width) * 0.114000);\n    /* Bordes del poste dentro de la baldosa, ya descontado el sangrado. p2 es\n       el brillo del centro, para que la linea de empalme tenga el mismo\n       volumen que el poste dibujado.\n       Medido sobre varilla-v2.png (145x944): el poste liso va del 39.31% al\n       49.66%. Esa baldosa esta cortada por dos puntos donde la seccion es\n       identica (poste liso, x 57-71 del PNG), para que al repetirse con\n       repeat-y empalme sin costura. La version anterior conservaba las puntas\n       redondeadas del poste y por eso la varilla se veia partida en cada\n       repeticion. */\n    /* Los dos gradientes van en sentidos opuestos (to right y to left), asi que\n       el de la derecha mide sus paradas desde el borde derecho. Con el PNG de\n       la derecha espejado, el poste queda al mismo 39.31%-49.66% contando desde\n       su lado, y sirve un unico juego de valores para las dos varillas. */\n    --mv-rod-p1: calc(var(--mv-rod-w) * 0.3931 - var(--mv-rod-bleed));\n    --mv-rod-p2: calc(var(--mv-rod-w) * 0.4449 - var(--mv-rod-bleed));\n    --mv-rod-p3: calc(var(--mv-rod-w) * 0.4966 - var(--mv-rod-bleed));\n    /* Viñeta de la caja. Centro: mas bajo = se ve mas el fondo del chat.\n       Borde: cuanto se cierra en oscuro hacia las esquinas. */\n    /* Estructura del tarot: una base pareja (opacity) y encima una viñeta que\n       arranca transparente en el centro y cierra oscura en el borde (edge).\n       Con una sola capa translucida el texto y las comillas perdian contraste. */\n    --mv-mes-opacity: 0.9;\n    --mv-mes-edge: 0.95;\n    /* Separacion vertical entre mensajes. 长夜蔷薇 usa 100px en celular, pero\n       a ellos les cuelgan adornos ~62px por fuera de la caja; a nosotros solo\n       los 16px del adorno inferior, asi que no hace falta tanto. */\n    --mv-mes-gap: calc(var(--mv-frame-width) * 0.127778);\n    /* Hueco despues del ULTIMO mensaje (el de mas abajo). */\n    --mv-last-gap: calc(var(--mv-frame-width) * -0.140900);  /* Estira el ultimo mensaje hasta la barra. -0.0556 venia de Nocturnal\n       Harmony, -0.0966 cerro los 16px medidos, y -0.1409 compensa el recorte\n       del adorno, que subio el borde de la caja otro 4.43%. */\n    /* Cuanto sube la linea de Memory Books para salir del mensaje. */\n    /* En 0: cualquier valor negativo hace que la linea de Memory Books\n       desaparezca en vez de subir, asi que la dejamos donde la pone la\n       extension y solo le damos capa por encima del banner. */\n    --mv-extra-offset: 0px;\n    /* Cuanto sube el nombre respecto del inicio del texto (patron del tarot:\n       top: calc(padding-top - offset)). Un solo numero manda todo. */\n    --mv-name-offset: calc(var(--mv-frame-width) * 0.083333);\n    /* El PNG del banner trae 12px transparentes arriba y la barra dorada\n       recien arranca en y=24 (de 724). Eso dejaba una franja del color de la\n       caja visible por encima del arte. Subimos el banner ese tanto.\n       Va en %, que en un margen se calcula contra el ANCHO del contenedor,\n       asi que escala solo con la pantalla igual que --mv-banner-ratio.\n       24/724 * 33.33% = 1.10% */\n    --mv-banner-trim-top: 0%;  /* PRUEBA: era 4.3%, un margen negativo que sacaba el banner por arriba de\n     la caja. Mientras algo sobresalga hay que desactivar content-visibility,\n     y eso obliga al navegador a dibujar TODOS los mensajes: con seis imagenes\n     grandes cada uno, el scroll se traba. Con el banner dentro de la caja se\n     puede volver a activar. */  /* era 1.1%; +3.2% por los 12px que faltaban arriba */\n\n    /* Nubes (capa de fondo del encabezado).\n       OJO: aca NO sirve el truco de padding-bottom que usa el banner. Los\n       porcentajes de padding se calculan contra el ancho del CONTENEDOR, no\n       contra el ancho del propio elemento, asi que achicar el ancho no\n       achicaba el alto. Como las nubes no ocupan el 100%, van con\n       aspect-ratio, que si respeta su ancho real. */\n    --mv-clouds-ratio: 2081 / 567;\n    --mv-clouds-width: 96%;\n    /* 0.100 dejaba las nubes montadas sobre los adornos colgantes del banner.\n       0.130 las baja unos 11px en una pantalla de 360. SOLO CELULAR: el\n       bloque de escritorio vuelve a fijar 0.100, que ahi esta bien. */\n    --mv-clouds-top: calc(var(--mv-frame-width) * 0.130000);\n    /* Corrimiento horizontal. El arte de las nubes no es simetrico (el lado\n       izquierdo termina antes), asi que centrarlo deja un hueco a la\n       izquierda. Positivo = mover a la izquierda. */\n    --mv-clouds-shift-x: 0px;\n\n    /* Mancha clara del encabezado. Va DEBAJO de todo el arte (z-index 2) para\n       que el avatar, las nubes y el pergamino no se pierdan contra el vino. */\n    /* Ancho y alto sueltos, ya no atados al aspect-ratio del PNG, para poder\n       estirarla a lo ancho y a lo alto por separado. Como es una mancha\n       abstracta, deformarla no se nota. Proporcion original: 32.97%. */\n    /* Ancho: el mensaje menos las dos varillas, asi nunca las desborda por los\n       costados por mas que cambies --mv-rod-w. El alto va suelto, aparte. */\n    --mv-wash-width: calc(100% - 2 * var(--mv-rod-w));\n    --mv-wash-height: calc(var(--mv-frame-width) * 0.438889);\n    --mv-wash-top: calc(var(--mv-frame-width) * 0.066667);\n    --mv-wash-opacity: 0;  /* pincelada crema del tema anterior, apagada */\n\n    /* Avatar. La foto va DENTRO del aro: el hueco del PNG mide 71.9% del\n       diametro exterior, asi que el aro es la foto dividido 0.719.\n       left/top son la esquina de la FOTO, medidos desde el borde de .mes. */\n    --mv-avatar-size: calc(var(--mv-frame-width) * 0.227050);  /* aro B: hueco 73.9% x 71.7%, centro 1.00% mas arriba */\n    --mv-avatar-frame: calc(var(--mv-frame-width) * 0.316667);\n    --mv-avatar-left: calc(var(--mv-frame-width) * 0.138889);\n    --mv-avatar-top: calc(var(--mv-frame-width) * 0.194055);  /* -1.00% por el desvio del hueco */\n    /* Halo beige del avatar y el pergamino. */\n    --mv-glow-size: 1.5px;\n    --mv-glow-color: rgba(225, 234, 252, 1);\n\n    /* Botones (tres puntos + lapiz). En escritorio van en top:77/right:78,\n       que con el encabezado nuevo cae justo encima del arte. Aca se bajan\n       a la franja libre que queda entre el encabezado y el texto. */\n    /* Altura del cerebro, los tres puntos y el lapiz, desde el borde superior\n       de .mes. OJO: el valor que manda es este, para TODOS los mensajes.\n       SillyTavern inserta .mes_reasoning_details tambien en los mensajes sin\n       razonamiento (vacio), asi que el selector :has() de mas abajo matchea\n       siempre y por eso cambiar un valor movia los dos casos a la vez.\n       178px = lo que pidio la raya azul en el mensaje sin razonamiento, que\n       es el caso ajustado: ahi el texto arranca antes y es el que manda. */\n      /* Se descuenta --mv-rod-top: estos botones son absolutos contra\n     .mes_block, que ahora tiene un borde superior transparente, y el area\n     de referencia de un absoluto empieza DESPUES del borde. Sin esto se\n     corren hacia abajo lo mismo que mida el borde. */\n    --mv-buttons-top: calc(var(--mv-frame-width) * 0.494444 - var(--mv-rod-top));\n    /* Igualado a --mv-buttons-top: con el detalle de razonamiento colapsado\n       cuando esta cerrado, el texto arranca a la misma altura en los dos\n       casos, asi que ya no hacen falta valores distintos. Queda como variable\n       aparte por si vuelve a hacer falta separarlos. */\n    --mv-buttons-top-reasoning: calc(var(--mv-frame-width) * 0.494444 - var(--mv-rod-top));\n    --mv-buttons-right: calc(var(--mv-frame-width) * 0.077778);\n    /* El cerebro comparte la altura con los botones pero tiene su propio\n       margen izquierdo, para poder correrlo sin mover los otros dos. */\n    --mv-brain-left: calc(var(--mv-frame-width) * 0.061111);\n\n    /* Tamano del texto del mensaje en celular. */\n    --mv-text-size: 0.97em;\n    /* Cuanto se estira la caja del ULTIMO mensaje hacia abajo para tapar la\n       franja de fondo de #chat que quedaba destapada. Sube el adorno, la\n       fecha, los datos y las flechas con ella: las tres reglas de abajo lo\n       compensan solas, asi que este es el unico numero a mover. */\n    /* Baja la caja del ULTIMO mensaje. OJO: la mueve entera, asi que lo que\n       gana abajo lo destapa arriba (se veia el fondo del chat en la franja del\n       encabezado). En 0 desde que el PNG del adorno llega solo hasta el\n       borde. */\n    --mv-last-fill: 0px;\n    /* Alineacion del texto del mensaje: center o left. */\n    --mv-text-align: center;\n    /* Tamano del razonamiento. OJO: .mes_reasoning es HERMANO de .mes_text, no\n       hijo, asi que su em se mide contra .mes_block y no hereda el tamano del\n       mensaje. Hay que bajarlo por separado o queda mas grande que la\n       respuesta. */\n    --mv-reasoning-size: 0.90em;\n\n    /* Adorno inferior. Misma tecnica que el banner: alto 0 + padding-bottom\n       con la proporcion real del PNG (461/1998 = 23.07%), anclado abajo.\n       El arte invade la columna de texto 76px, de ahi el padding-bottom. */\n    --mv-deco-ratio: 10.68%;  /* adorno-v2: 2192x232 */  /* 2192x329 */\n    /* Cuanto baja el adorno respecto del fondo de la caja. Negativo = mas\n       abajo; sobresale del mensaje, que para eso .mes_text tiene overflow\n       visible. Con 0 el arte queda justo al ras del borde. */\n    /* El adorno se apoya en la base de la caja. */\n    --mv-deco-bottom: 0px;  /* las esquinas del PNG estan 164px mas arriba que la gema: bajarlo para que toquen el borde */  /* 13px de hueco sobre 374 de caja */\n    /* Hunde el dibujo del adorno dentro de su caja (via background-position,\n       no mueve el elemento). En 0 porque el PNG nuevo ya trae las esquinas\n       dibujadas hasta el borde de abajo: antes estaban 62px mas arriba que las\n       gotas del centro y por eso habia que hundirlo y recortar. */\n    --mv-deco-sink: 0px;\n    --mv-box-padding-bottom: calc(var(--mv-frame-width) * 0.369544);  /* adorno (10.68%) + los mismos 95px de metadatos que deja Nocturnal Harmony */  /* Reserva el alto del adorno inferior. Partia de 0.494444, calibrado para el\n       adorno de Nocturnal Harmony (23.07%). Menos 0.0806 por el adorno de este\n       tema (15.01%) y menos 0.0443 mas por el recorte a 10.58%. */\n    /* Fila de datos (fecha, duracion, tokens, numero) sobre el adorno. */\n    /* Altura de TODA la fila de datos (fecha, #, tiempo, tokens, modelo).\n       Al bajar este numero baja el conjunto entero. */\n    --mv-meta-bottom: calc(var(--mv-box-padding-bottom) - 62px);\n    /* Cuanto queda la fecha por encima del resto de la fila. */\n    --mv-meta-gap: calc(var(--mv-frame-width) * 0.047222);\n    /* Altura de las flechas de swipe del ultimo mensaje. */\n    --mv-swipe-bottom: calc(var(--mv-frame-width) * 0.194444);\n    /* La flecha izquierda tiene su propia altura. */\n    --mv-swipe-left-bottom: calc(var(--mv-frame-width) * 0.194444);\n\n    /* Pergamino del nombre. left/top son su esquina superior izquierda,\n       medidos desde el borde de .mes. El alto sale solo del aspect-ratio. */\n    --mv-scroll-ratio: 2073 / 758;\n    /* En px, no en %, para que la relacion con el avatar (que tambien va en px)\n       no cambie segun el ancho de pantalla. Medido sobre la referencia de\n       escritorio: el pergamino mide 1.35 veces el diametro del aro. */\n    --mv-scroll-width: calc(var(--mv-frame-width) * 0.505556);\n    /* Alto derivado del ancho con la proporcion real del PNG (2032x774).\n       Lo necesitamos como numero para poder centrar el nombre. */\n    --mv-scroll-height: calc(var(--mv-scroll-width) * 758 / 2073);\n    /* Punta de flecha medida en x=124.5. El aro del avatar llega hasta 126,\n       asi que el rollo izquierdo se solapa unos 2px con el borde del aro:\n       queda por detras (z-index 6 contra 7), como en la referencia. */\n    --mv-scroll-left: calc(var(--mv-frame-width) * 0.388889);\n    /* SUBIDA DEL PERGAMINO. El pergamino es un ::before de .mes_block, o sea\n       que se mide DESPUES del borde superior transparente (--mv-rod-top),\n       mientras que el aro del avatar cuelga de .mes y no paga ese borde. Por\n       eso el pergamino caia mas abajo que el aro en vez de quedar a su altura.\n       Medido sobre la captura de celular: el centro de la placa quedaba unos\n       39px por debajo del centro del aro, sobre una pantalla de 360.\n       Va en proporcion al ancho, no en px, para que aguante cualquier\n       pantalla. Es el UNICO numero a mover si queda alto o bajo; el nombre\n       cuelga de --mv-scroll-top y sube con el. */\n    --mv-scroll-shift: calc(var(--mv-frame-width) * 0.125000);\n    --mv-scroll-top: calc(var(--mv-frame-width) * 0.202778 - var(--mv-scroll-shift));\n    --mv-scroll-rotate: -4deg;\n    /* Tamano del nombre. El panel plano de este pergamino va del 18.7% al\n       80.2% del ancho: bastante mas generoso que el anterior (27%-75%),\n       asi que el nombre puede ir un poco mas grande. */\n    --mv-name-size: 1.05em;\n    /* Franja escribible del pergamino, medida sobre el alfa del PNG:\n       del 22.1% al 75.1% del alto. El nombre se centra DENTRO de esa franja. */\n    --mv-scroll-panel-top: 22.1%;\n    --mv-scroll-panel-height: 53%;\n  }\n\n  /* #chat es el que realmente necesita escaparse del padding heredado (por\n     eso el truco en .mes solo no alcanzaba: #chat probablemente tiene su\n     propio overflow para el scroll, y recorta cualquier intento de escape\n     desde adentro). Aplicamos el ancla al viewport aca, en el nivel correcto. */\n  #chat {\n    width: var(--mv-frame-width) !important;\n    max-width: var(--mv-frame-width) !important;\n    margin-left: calc(50% - var(--mv-frame-width) / 2) !important;\n    margin-right: calc(50% - var(--mv-frame-width) / 2) !important;\n    padding-left: 0 !important;\n    padding-right: 0 !important;\n    box-sizing: border-box !important;\n  }\n\n  /* NO PONER overflow-x: visible AQUI.\n     El eje vertical esta en auto para que el chat scrollee, y cuando un eje es\n     auto el navegador convierte el 'visible' del otro en 'auto': en vez de\n     dejar asomar el contenido, crea barra de scroll horizontal. Con\n     --mv-frame-width en 100vw (que incluye el ancho de la barra vertical)\n     siempre sobran unos pixeles, y el tema se arrastraba de lado con el dedo.\n     'clip' recorta igual que hidden pero sin crear caja de scroll. */\n  #sheld,\n  #chat_wrapper,\n  #chat {\n    padding-left: 0 !important;\n    padding-right: 0 !important;\n    max-width: 100% !important;\n    overflow-x: hidden !important;\n    overflow-x: clip !important;\n  }\n\n  #sheld,\n  #chat_wrapper {\n    width: 100% !important;\n  }\n\n  #chat .mes {\n    /* El tarot lo tiene explicito: '#chat .mes { overflow: visible !important }'.\n       Sin esto la caja recorta el adorno en su propio borde, y bajarlo con\n       --mv-deco-drop no servia de nada: solo se cortaba mas. */\n    overflow: visible !important;\n    width: 100% !important;\n    max-width: 100% !important;\n    margin-left: 0 !important;\n    margin-right: 0 !important;\n    box-sizing: border-box !important;\n    /* La regla de escritorio reserva 173px arriba para el encabezado viejo\n       (banner + avatar + pergamino flotantes). En celular el banner va DENTRO\n       de la caja, asi que ese espacio queda vacio: lo anulamos.\n       El margen de abajo tambien baja de 35px a 12px. */\n    /* La franja del encabezado ahora la reserva .mes, no .mes_text. Asi el\n       banner y las nubes (que pasaron a .mes::before/::after) no se mueven\n       cuando el razonamiento se despliega y empuja el texto. */\n    /* REFACTOR: la franja del encabezado y el fondo pasaron a .mes_text,\n       siguiendo la estructura del tarot (alli .mes es transparente y la caja\n       la pinta .mes_text con su propio padding). Asi el marco y el adorno\n       inferior son el MISMO elemento y no hay nada que sincronizar. */\n    padding-top: 0 !important;\n    margin-top: 0 !important;\n    margin-bottom: var(--mv-mes-gap) !important;\n    position: relative !important;\n    /* Como .mes_text ya no cubre la franja del encabezado, el color de la caja\n       y las varillas laterales pasan a .mes, que si la cubre entera. */\n    /* Viñeta radial, como el tarot y 长夜蔷薇: el centro deja pasar el fondo\n       del chat y los bordes se cierran en oscuro, asi el texto del medio se\n       lee sobre cualquier imagen. Las varillas son capas por encima. */\n    background: transparent !important;\n  }\n\n  #chat .mes .mes_block {\n    width: 100% !important;\n    max-width: 100% !important;\n    flex: 1 1 100% !important;\n    box-sizing: border-box !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    padding-right: 0 !important;\n    margin-right: 0 !important;\n    left: 0 !important;\n    right: 0 !important;\n    inset: 0 !important;\n    transform: none !important;\n  }\n\n  /* Tecnica del tema tarot: en vez de margenes, se centra con left:50% +\n     translateX(-50%). Esto es inmune a padding heredado del contenedor. */\n  /* Bajar la caja del ultimo mensaje. Crecerla no sirve: el scroll ancla el\n     FINAL del contenido, asi que si crece por dentro todo se corre hacia\n     arriba y el hueco reaparece igual (medido con 0, 20 y 40px: identico).\n     Con 'top' sobre un elemento relative se dibuja mas abajo SIN afectar el\n     layout ni el scroll, que es lo unico que mueve el hueco de verdad. */\n  #chat .mes.last_mes .mes_block .mes_text {\n    top: var(--mv-last-fill) !important;\n  }\n\n  #chat .mes .mes_block .mes_text {\n    /* El fondo y el marco los pinta .mes_block; aca solo el texto. */\n    background: transparent !important;\n    background-image: none !important;\n    box-shadow: none !important;\n    position: relative !important;\n    left: 50% !important;\n    transform: translateX(-50%) !important;\n    width: var(--mv-frame-width) !important;\n    max-width: var(--mv-frame-width) !important;\n    margin: 0 !important;\n    padding-top: 0 !important;\n    padding-bottom: var(--mv-box-padding-bottom) !important;\n    padding-left: var(--mv-box-padding-x) !important;\n    padding-right: var(--mv-box-padding-x) !important;\n    box-sizing: border-box !important;\n    float: none !important;\n    font-size: var(--mv-text-size) !important;\n    /* El tarot usa --mes-text-align: center. Mismo criterio. */\n    text-align: var(--mv-text-align) !important;\n    border-style: none !important;\n    border-image-source: none !important;\n  }\n\n  /* NUBES + ENGRANAJES — capa de mas abajo del encabezado.\n     Va en ::after con z-index 5: por debajo del banner (10) y por debajo\n     del texto (20), asi que el marco dorado la tapa y el texto se lee. */\n  #chat .mes::after {\n    content: \"\" !important;\n    display: block !important;\n    position: absolute !important;\n    left: 50% !important;\n    top: var(--mv-clouds-top) !important;\n    transform: translate(calc(-50% - var(--mv-clouds-shift-x)), 0) !important;\n    width: var(--mv-clouds-width) !important;\n    height: auto !important;\n    aspect-ratio: var(--mv-clouds-ratio) !important;\n    background-image: var(--clouds-mobile) !important;\n    background-size: 100% 100% !important;\n    background-repeat: no-repeat !important;\n    background-position: top center !important;\n    pointer-events: none !important;\n    opacity: 1 !important;\n    z-index: 5 !important;\n  }\n\n  /* BANNER — tecnica del tarot (#chat .mes_text::before):\n     el banner NO es una pieza flotante aparte, se pinta como fondo de la\n     propia caja. Ancho 100% de la caja y altura 0 + padding-bottom con la\n     proporcion real del PNG, asi nunca se deforma ni se desalinea del color\n     de la caja por mas que cambie el ancho de pantalla. */\n  #chat .mes::before {\n    content: \"\" !important;\n    display: block !important;\n    position: absolute !important;\n    left: 50% !important;\n    top: 0 !important;\n    margin-top: calc(0px - var(--mv-banner-trim-top)) !important;\n    transform: translate(-50%, 0) !important;\n    width: 100% !important;\n    height: 0 !important;\n    padding-bottom: var(--mv-banner-ratio) !important;\n    background-image: var(--banner-mobile) !important;\n    background-size: 100% 100% !important;\n    background-repeat: no-repeat !important;\n    background-position: top center !important;\n    pointer-events: none !important;\n    opacity: 1 !important;\n    z-index: 10 !important;\n  }\n\n  /* MEMORY BOOKS — la extension inyecta su linea de \"limite de memoria\" como\n     hijo directo de .mes y el banner (.mes::before, z-index 10) la tapa.\n     Le damos mas capa que el banner a cualquier hijo de .mes que no sea\n     nuestro. Solo z-index: si la extension ya lo posiciona, no le tocamos\n     el position. */\n  #chat .mes > *:not(.mes_block):not(.mesAvatarWrapper):not(.avatar-container):not(.swipe_left):not(.swipe_right) {\n    z-index: 40 !important;\n    /* La subimos al hueco que hay entre mensajes, para que no quede encima\n       del marco dorado. Es transform, asi que no ocupa espacio ni empuja nada. */\n    transform: translateY(var(--mv-extra-offset)) !important;\n  }\n\n  /* DATOS DEL MENSAJE — patron exacto del tarot: una regla comun y luego\n     solo left/bottom por elemento. Sin 'width': ese era el error anterior,\n     los amontonaba. Todos se miden contra .mes, que es position: relative. */\n  #chat .mes .mesIDDisplay,\n  #chat .mes .timestamp,\n  #chat .mes .tokenCounterDisplay,\n  #chat .mes .mes_timer,\n  #chat .mes .timestamp-icon,\n  #chat .mes .fa-ghost {\n    position: absolute !important;\n    font-size: 0.68em !important;\n    opacity: 0.45 !important;\n    color: #8fa6d2 !important;\n    letter-spacing: 0.02em !important;\n    white-space: nowrap !important;\n    z-index: 10 !important;\n    width: auto !important;\n    padding: 0 !important;\n    margin: 0 !important;\n    pointer-events: none !important;\n  }\n\n  #chat .mes .mesIDDisplay {\n    /* Los cuatro se reparten entre el 32% y el 68% del ancho, centrados cada\n       uno sobre su punto con translateX(-50%). Asi quedan agrupados en el\n       medio en vez de estirados de borde a borde. */\n    top: auto !important;\n    bottom: var(--mv-meta-bottom) !important;\n    left: 35% !important;\n    right: auto !important;\n    transform: translateX(-50%) !important;\n  }\n\n  /* Icono del modelo, a la derecha de la misma fila (el tarot lo pone en\n     right: 30%). Sin esto queda suelto contra el borde izquierdo. */\n  #chat .mes .timestamp-icon,\n  #chat .mes .fa-ghost {\n    top: auto !important;\n    bottom: var(--mv-meta-bottom) !important;\n    left: 65% !important;\n    right: auto !important;\n    transform: translateX(-50%) !important;\n  }\n\n  #chat .mes .timestamp {\n    top: auto !important;\n    bottom: calc(var(--mv-meta-bottom) + var(--mv-meta-gap)) !important;\n    left: 0 !important;\n    right: auto !important;\n    width: 100% !important;\n    text-align: center !important;\n    transform: none !important;\n  }\n\n  #chat .mes .tokenCounterDisplay {\n    top: auto !important;\n    bottom: var(--mv-meta-bottom) !important;\n    left: 55% !important;\n    right: auto !important;\n    transform: translateX(-50%) !important;\n  }\n\n  #chat .mes .mes_timer {\n    top: auto !important;\n    bottom: var(--mv-meta-bottom) !important;\n    left: 45% !important;\n    right: auto !important;\n    transform: translateX(-50%) !important;\n  }\n\n  /* El hueco que queda debajo del ultimo mensaje no viene solo del margen:\n     #chat tambien reserva espacio abajo. */\n  #chat {\n    padding-bottom: 0 !important;\n    margin-bottom: 0 !important;\n  }\n\n  /* El hueco que quedaba NO era del mensaje: estaba entre el final de #chat y\n     el inicio de la barra de escritura (se vio en el diagnostico, entre el\n     contorno rojo y el celeste). Se cierra desde los contenedores. */\n  #send_form {\n    margin-top: 0 !important;\n    padding-top: 0 !important;\n  }\n\n  #form_sheld {\n    padding-top: 0 !important;\n    margin-top: 0 !important;\n  }\n\n  /* LA FRANJA DE ABAJO. No es del mensaje ni el gap de #sheld: es fondo de\n     #chat que queda destapado entre el borde inferior de .mes y el borde de\n     #chat (visto en el DIAGNOSTICO 1, entre el contorno verde y el magenta).\n     Subir la barra de escribir NO sirve: #chat es flex:1 y se estira lo mismo\n     que uno la sube, asi que el movimiento se anula. Lo que si funciona es\n     estirar la caja del ultimo mensaje hasta el borde. */\n\n\n  /* Fecha, #, duracion, tokens y flechas cuelgan del fondo de .mes, que ahora\n     esta mas abajo: se les suma lo mismo para que no se muevan de sitio. */\n  #chat .mes.last_mes .mesIDDisplay,\n  #chat .mes.last_mes .mes_timer,\n  #chat .mes.last_mes .tokenCounterDisplay,\n  #chat .mes.last_mes .timestamp-icon {\n    bottom: var(--mv-meta-bottom) !important;\n  }\n\n  /* El icono del modelo (.timestamp-icon) solo tenia 'bottom'. Al ser absolute\n     con left y right en auto se apoya en su posicion estatica, o sea pegado al\n     contador de tokens. Necesita left propio para seguir al grupo.\n     ESTA REGLA VA SOLA: al meterla dentro de la lista de arriba, la coma quedo\n     colgando y el left: 65% se lo comieron tambien el numero de mensaje, el\n     temporizador y los tokens, que terminaron los cuatro apilados en el mismo\n     punto. */\n  #chat .mes .timestamp-icon {\n    left: 65% !important;\n    right: auto !important;\n    transform: translateX(-50%) !important;\n  }\n\n  #chat_wrapper {\n    padding-bottom: 0 !important;\n    margin-bottom: 0 !important;\n  }\n\n\n  /* #sheld es el contenedor flex que apila el chat y la barra de escritura.\n     El hueco que sobraba salia de su separacion entre hijos, no de ninguno\n     de los dos. El tarot no lo toca porque en su version de SillyTavern no\n     existe; en TauriTavern si. */\n  #sheld {\n    gap: 0 !important;\n    row-gap: 0 !important;\n  }\n\n  #sheld > #form_sheld,\n  #form_sheld {\n    margin: 0 !important;\n  }\n\n  #send_form {\n    /* Mismo criterio que el tarot: sin padding arriba ni abajo. */\n    padding-top: 0 !important;\n    padding-bottom: 0 !important;\n    margin: 0 !important;\n  }\n\n  /* El recuadro claro alrededor del campo de escribir no es propio: lo hereda\n     de la regla global .text_pole/textarea/input, que le pone borde y halo a\n     todos los campos del tema. Aca se anula solo para el de escribir; los\n     campos del panel de ajustes conservan el suyo. */\n  #send_textarea,\n  #send_textarea:focus {\n    /* En px y no en em: el em se medía contra #send_form y salia enorme. */\n    font-size: 15px !important;\n    border: 0 !important;\n    box-shadow: none !important;\n    outline: none !important;\n  }\n\n  /* El adorno inferior del ultimo mensaje puede quedar recortado contra la\n     barra de escritura: es a proposito, para que no sobre espacio. */\n  #chat .mes.last_mes .mes_text::after {\n    z-index: 10 !important;\n  }\n\n  /* El ultimo mensaje no necesita el hueco entre burbujas: lo pegamos a la\n     caja de escribir, como hace 长夜蔷薇. */\n  #chat .mes.last_mes {\n    margin-bottom: var(--mv-last-gap) !important;\n  }\n\n  /* FLECHAS DE SWIPE — el tarot las sube a bottom: 90px en .last_mes para que\n     no queden colgando abajo del adorno. Mismo criterio, con variable. */\n  #chat .mes.last_mes .swipe_left {\n    left: 34px !important;\n    right: auto !important;\n    bottom: var(--mv-swipe-left-bottom) !important;\n    top: auto !important;\n    opacity: 1 !important;\n  }\n\n  #chat .mes.last_mes .swipeRightBlock {\n    position: absolute !important;\n    right: 26px !important;\n    left: auto !important;\n    bottom: var(--mv-swipe-bottom) !important;\n    top: auto !important;\n  }\n\n  #chat .mes.last_mes .swipeRightBlock .swipe_right,\n  #chat .mes.last_mes .swipe_right {\n    right: 0 !important;\n    left: auto !important;\n    bottom: 0 !important;\n    top: auto !important;\n    opacity: 1 !important;\n  }\n\n  #chat .mes.last_mes .swipeRightBlock .swipes-counter {\n    position: absolute !important;\n    right: 26px !important;\n    bottom: 0 !important;\n    top: auto !important;\n    opacity: 1 !important;\n  }\n\n  /* ADORNO INFERIOR — tecnica del tarot (taluo_text_deco2 en .mes_text::after),\n     anclado a bottom:0 en vez de top:0. Este pseudo-elemento quedo libre\n     cuando las nubes se mudaron a .mes::after. */\n  #chat .mes .mes_block .mes_text::after {\n    content: \"\" !important;\n    display: block !important;\n    position: absolute !important;\n    left: 50% !important;\n    top: auto !important;\n    bottom: var(--mv-deco-bottom) !important;\n    transform: translate(-50%, 0) !important;\n    width: 100% !important;\n    height: 0 !important;\n    padding-bottom: var(--mv-deco-ratio) !important;\n    background-image: var(--deco-bottom-mobile) !important;\n    background-size: 100% 100% !important;\n    background-repeat: no-repeat !important;\n    background-position: center calc(100% + var(--mv-deco-sink)) !important;\n    pointer-events: none !important;\n    opacity: 1 !important;\n    z-index: 10 !important;\n  }\n\n  /* El texto tiene que quedar POR ENCIMA del banner (el tarot hace lo mismo). */\n  #chat .mes .mes_block .mes_text > * {\n    position: relative !important;\n    z-index: 20 !important;\n  }\n\n  /* Todo lo demas del encabezado (escritorio Y las piezas que agregamos despues)\n     queda apagado de verdad esta vez: pergamino, medallon, avatar posicionado,\n     nombre. TODO lo que no sea \"la caja llega al borde\" esta desactivado. */\n  /* MANCHA DEL ENCABEZADO — reusamos .mes_block::after, que estaba apagado.\n     .mes_block arranca debajo de la franja del encabezado, asi que su top se\n     mide restando --mv-box-padding-top, igual que el pergamino. */\n  #chat .mes .mes_block::after {\n    content: \"\" !important;\n    display: block !important;\n    position: absolute !important;\n    left: 50% !important;\n    top: var(--mv-wash-top) !important;\n    right: auto !important;\n    bottom: auto !important;\n    transform: translate(-50%, 0) !important;\n    width: var(--mv-wash-width) !important;\n    height: var(--mv-wash-height) !important;\n    aspect-ratio: auto !important;\n    background-image: var(--header-wash-mobile) !important;\n    background-size: 100% 100% !important;\n    background-repeat: no-repeat !important;\n    background-position: center !important;\n    opacity: var(--mv-wash-opacity) !important;\n    filter: none !important;\n    pointer-events: none !important;\n    /* Debajo de las nubes (5), del pergamino (6), del avatar (7) y del\n       banner (10): es el fondo de todo el encabezado. */\n    z-index: 2 !important;\n  }\n\n  /* RAZONAMIENTO. En el DOM va ANTES que .mes_text, asi que al desplegarse\n     empujaria la caja de texto y con ella el banner y las nubes, mientras que\n     el avatar y el pergamino (que cuelgan de .mes_block) se quedarian quietos.\n     Para evitarlo volvemos .mes_block una columna flex y lo mandamos al final\n     con 'order': el razonamiento se abre DEBAJO del mensaje y el encabezado\n     nunca se mueve.\n     .mes_reasoning_details queda 'static' a proposito, para que el cerebro\n     (absoluto) se posicione contra .mes_block y no contra el detalle. */\n  #chat .mes .mes_block {\n    /* El cerebro, los tres puntos y el lapiz son absolutos con top negativo y\n       se posicionan contra .mes_block. Si .mes_block pierde su position\n       relative, el ancla pasa a .mes y saltan muy arriba: eso es lo que\n       pasaba al razonar. Se fija aca para que no dependa de otra regla. */\n    position: relative !important;\n    display: flex !important;\n    flex-direction: column !important;\n    /* La franja del encabezado se reserva ACA y no en .mes_text: el bloque de\n       razonamiento va con order 1, o sea antes del texto, y si el padding\n       estaba en .mes_text ese bloque caia dentro del encabezado y su texto se\n       montaba sobre el avatar al desplegarlo. Desde .mes_block, el\n       razonamiento queda debajo del encabezado y empuja el texto, como antes. */\n    /* Un borde superior transparente del alto de --mv-rod-top. No se ve, pero\n       da un area interior donde recortar las varillas (ver background-clip).\n       El padding se reduce en la misma medida para que el contenido no baje. */\n    border-top: var(--mv-rod-top) solid transparent !important;\n    padding-top: calc(var(--mv-box-padding-top) - var(--mv-rod-top)) !important;\n    /* La caja: fondo, viñeta y varillas laterales. Antes vivian en .mes. */\n    background-color: transparent !important;\n    background-image:\n      var(--rod-left-mobile),\n      var(--rod-right-mobile),\n      /* Dos lineas continuas del color del poste, DETRAS de las varillas, para\n         tapar el corte que deja el PNG al repetirse verticalmente.\n         Colores muestreados del PNG nuevo: el poste es plateado, no dorado. */\n      linear-gradient(to right,\n        transparent var(--mv-rod-p1),\n        #63656f     var(--mv-rod-p1),\n        #e7e5ea     var(--mv-rod-p2),\n        #8e8f96     var(--mv-rod-p3),\n        transparent var(--mv-rod-p3)),\n      linear-gradient(to left,\n        transparent var(--mv-rod-p1),\n        #63656f     var(--mv-rod-p1),\n        #e7e5ea     var(--mv-rod-p2),\n        #8e8f96     var(--mv-rod-p3),\n        transparent var(--mv-rod-p3)),\n      radial-gradient(ellipse at center,\n        transparent 50%,\n        rgba(2, 5, 16, var(--mv-mes-edge)) 100%),\n      linear-gradient(135deg,\n        rgba(14, 22, 48, var(--mv-mes-opacity)),\n        rgba(14, 22, 48, var(--mv-mes-opacity))) !important;\n    background-position: calc(0px - var(--mv-rod-bleed)) top, calc(100% + var(--mv-rod-bleed)) top, left top, right top, center center, center center !important;\n    background-repeat: repeat-y, repeat-y, repeat-y, repeat-y, no-repeat, no-repeat !important;\n        background-size: var(--mv-rod-w) auto, var(--mv-rod-w) auto, 100% 100%, 100% 100%, 100% 100%, 100% 100% !important;\n    /* LAS CUATRO CAPAS DE LA VARILLA SE RECORTAN AL AREA INTERIOR (padding-box),\n       o sea por debajo del borde transparente de arriba. El fondo y la vinneta\n       siguen en border-box y cubren la caja entera.\n       Esto NO se puede hacer con background-position: con repeat-y el patron se\n       repite hacia ARRIBA tambien, asi que por mas que se lo desplace vuelve a\n       llenar hasta el borde. Se vio en el diagnostico: las varillas pintadas de\n       rojo llegaban hasta arriba con --mv-rod-top ya aplicado. */\n    background-clip: padding-box, padding-box, padding-box, padding-box, border-box, border-box !important;\n    /* Y el fondo y la vinneta tienen que MEDIRSE sobre el border-box, no solo\n       recortarse ahi: background-origin por defecto las dimensiona sobre el\n       area interior, asi que bajo el borde transparente no quedaba nada que\n       mostrar y se veia el fondo del chat en la franja de arriba. */\n    background-origin: padding-box, padding-box, padding-box, padding-box, border-box, border-box !important;\n    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;\n  }\n\n  /* Misma razon: si el detalle o el resumen del razonamiento reciben position\n     durante la generacion, pasan a ser el ancla del cerebro y lo descolocan. */\n  #chat .mes .mes_block > .mes_reasoning_details,\n  #chat .mes .mes_block > .mes_reasoning_details[open],\n  #chat .mes .mes_block .mes_reasoning_summary {\n    position: static !important;\n  }\n\n\n  /* Solo los mensajes que traen bloque de razonamiento bajan los iconos. */\n  /* Bajan solo los mensajes con razonamiento CON CONTENIDO. El :has() a secas\n     sobre .mes_reasoning_details no sirve: ese bloque existe en todos los\n     mensajes. Aca se exige ademas que .mes_reasoning no este vacio. Si el\n     navegador no lo resuelve, la regla se descarta entera y todos se quedan\n     en --mv-buttons-top, que es el valor correcto para el caso sin\n     razonamiento. */\n  #chat .mes .mes_block:has(> .mes_reasoning_details .mes_reasoning:not(:empty)) .mes_buttons,\n  #chat .mes .mes_block:has(> .mes_reasoning_details .mes_reasoning:not(:empty)) .mes_edit_buttons,\n  #chat .mes .mes_block:has(> .mes_reasoning_details .mes_reasoning:not(:empty)) .mes_reasoning_header {\n    top: var(--mv-buttons-top-reasoning) !important;\n  }\n\n  #chat .mes .mes_block > .ch_name { order: 0 !important; }\n  #chat .mes .mes_block > .mes_reasoning_details { order: 1 !important; }\n  #chat .mes .mes_block > .mes_text { order: 2 !important; }\n\n  #chat .mes .mes_block > .mes_reasoning_details {\n    position: static !important;\n    width: 100% !important;\n    height: auto !important;\n    margin: 0 !important;\n    padding: 0 !important;\n  }\n\n\n  /* El texto del razonamiento SI se muestra (en escritorio esta oculto).\n     Estilo tomado de 长夜蔷薇: sin caja, en italica, un poco mas chico. */\n  #chat .mes .mes_block .mes_reasoning {\n    display: block !important;\n    position: relative !important;\n    /* El 90% de 长夜蔷薇 no sirve aca: ellos no tienen varillas laterales.\n       Sobre 360px dejaria 18px de margen y la varilla mide 34. Usamos el mismo\n       margen lateral que el texto del mensaje para que queden alineados. */\n    width: auto !important;\n    left: auto !important;\n    transform: none !important;\n    margin: 4px var(--mv-box-padding-x) 14px var(--mv-box-padding-x) !important;\n    padding: 0 !important;\n    background: transparent !important;\n    border: none !important;\n    box-shadow: none !important;\n    font-style: italic !important;\n    font-size: var(--mv-reasoning-size) !important;\n    line-height: 1.6 !important;\n    opacity: 0.85 !important;\n  }\n\n  /* El cerebro tiene que poder presionarse: en escritorio esta anulado\n     con pointer-events: none, que es lo que impide abrirlo. */\n  #chat .mes .mes_block .mes_reasoning_summary,\n  #chat .mes .mes_block .mes_reasoning_header {\n    pointer-events: auto !important;\n    cursor: pointer !important;\n  }\n\n  /* El cerebro va en la esquina IZQUIERDA, en la misma linea que el lapiz y\n     los tres puntos. Usa las mismas variables que ellos, asi que si moves los\n     botones el cerebro los sigue solo. El padding-left de 62px es de\n     escritorio y aca lo descolocaria: hay que anularlo. */\n  #chat .mes .mes_block .mes_reasoning_summary {\n    padding: 0 !important;\n    margin: 0 !important;\n  }\n\n  #chat .mes .mes_block .mes_reasoning_header {\n    position: absolute !important;\n    top: var(--mv-buttons-top) !important;\n    left: var(--mv-brain-left) !important;\n    right: auto !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    z-index: 50 !important;\n  }\n\n  #chat .mes .mes_buttons {\n    /* Sin esto el top no hacia NADA: .mes_buttons quedaba en el flujo del\n       .mes_block y caia pegado al texto, y por eso cambiar --mv-buttons-top\n       no movia nada en los mensajes sin razonamiento. Sus dos vecinos\n       (.mes_reasoning_header y .mes_edit_buttons) ya lo tenian; a este se le\n       habia quedado sin poner. */\n    position: absolute !important;\n    top: var(--mv-buttons-top) !important;\n    right: var(--mv-buttons-right) !important;\n    left: auto !important;\n  }\n\n  /* La barra que aparece al editar (.mes_edit_buttons) vive dentro de .ch_name,\n     que colapsamos a height:0, asi que caia arriba de todo, encima del banner.\n     La anclamos en las MISMAS coordenadas que los botones, para que se\n     despliegue en la franja libre igual que la barra de los tres puntos. */\n  #chat .mes .mes_edit_buttons {\n    position: absolute !important;\n    top: var(--mv-buttons-top) !important;\n    right: var(--mv-buttons-right) !important;\n    left: auto !important;\n    bottom: auto !important;\n    margin: 0 !important;\n    /* OJO: aca NO va display. SillyTavern oculta esta barra con display:none\n       y solo la muestra al editar. Un display:flex !important la deja visible\n       siempre y ademas impide que la X la cierre. Solo la posicionamos. */\n    flex-wrap: nowrap !important;\n    justify-content: flex-end !important;\n    align-items: center !important;\n    gap: 6px !important;\n    width: auto !important;\n    z-index: 50 !important;\n  }\n\n  /* AVATAR — el contenedor se saca del flujo (ancho y alto 0) para que no\n     empuje al .mes_block; el avatar se ancla en coordenadas contra .mes. */\n  #chat .mes .mesAvatarWrapper,\n  #chat .mes .avatar-container {\n    display: block !important;\n    position: absolute !important;\n    top: 0 !important;\n    left: 0 !important;\n    /* Ocupa todo .mes pero SIN afectar el flujo (es absolute). Antes media\n       0x0 y, como en TauriTavern el numero de mensaje, la duracion y los\n       tokens cuelgan de aca, quedaban todos pegados al borde izquierdo y\n       fuera del mensaje. Con 100%/100% se posicionan como contra .mes. */\n    width: 100% !important;\n    height: 100% !important;\n    min-width: 0 !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: visible !important;\n    pointer-events: none !important;\n  }\n\n  #chat .mes .avatar {\n    display: block !important;\n    position: absolute !important;\n    left: var(--mv-avatar-left) !important;\n    top: var(--mv-avatar-top) !important;\n    width: var(--mv-avatar-size) !important;\n    height: var(--mv-avatar-size) !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    /* Encima de las nubes (5), debajo del marco dorado (10). */\n    z-index: 7 !important;\n    overflow: visible !important;\n    pointer-events: auto !important;\n  }\n\n  #chat .mes .avatar img {\n    width: 100% !important;\n    height: 100% !important;\n    border-radius: 50% !important;\n    object-fit: cover !important;\n    margin: 0 !important;\n    position: relative !important;\n    z-index: 1 !important;\n    left: 0 !important;\n    top: 0 !important;\n    border: none !important;\n    box-shadow: none !important;\n  }\n\n  /* Aro de gemas, centrado sobre la foto (tecnica del tarot). */\n  #chat .mes .avatar::before {\n    content: \"\" !important;\n    display: block !important;\n    position: absolute !important;\n    width: var(--mv-avatar-frame) !important;\n    height: var(--mv-avatar-frame) !important;\n    left: calc((var(--mv-avatar-size) - var(--mv-avatar-frame)) / 2) !important;\n    top: calc((var(--mv-avatar-size) - var(--mv-avatar-frame)) / 2) !important;\n    background-image: var(--avatar-frame-mobile) !important;\n    background-size: contain !important;\n    background-repeat: no-repeat !important;\n    background-position: center !important;\n    pointer-events: none !important;\n    z-index: 2 !important;\n    /* La regla de escritorio centra el aro con transform: translate(-50%,-50%).\n       Aca ya lo centramos con left/top calculados, asi que hay que anular ese\n       transform explicitamente o el aro se va 39px arriba y a la izquierda. */\n    transform: none !important;\n  /* Sin drop-shadow: es de los efectos mas caros al hacer scroll y aqui se\n     repintaba en cada mensaje. El resplandor se nota poco sobre el azul. */\n  }\n\n  /* NOMBRE — patron del tarot: absoluto contra .mes_block, centrado, y\n     posicionado con calc() contra el MISMO --mv-box-padding-top que usa la\n     caja. Asi, si se cambia el padding, el nombre lo sigue solo. */\n  /* .ch_name vuelve a static. Siendo 'relative' era el contenedor de\n     referencia de la fecha, los tokens y el numero de mensaje, que estan\n     adentro suyo: con altura 0 y arriba de todo, su 'bottom' los mandaba al\n     tope del mensaje. En static la referencia pasa a ser .mes y caen abajo.\n     El z-index ya no hace falta: el nombre tiene z-20 y las nubes z-5. */\n  #chat .mes .mes_block .ch_name {\n    position: static !important;\n    height: 0 !important;\n    min-height: 0 !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: visible !important;\n  }\n\n  /* PERGAMINO — reusamos .mes_block::before, que en escritorio tiene el\n     pergamino rotado -4deg y con padding-bottom. Hay que resetear CADA\n     propiedad: la rotacion, el top negativo, el ancho y el padding, o quedan\n     valores viejos mezclados. */\n  #chat .mes .mes_block::before {\n    content: \"\" !important;\n    display: block !important;\n    position: absolute !important;\n    left: var(--mv-scroll-left) !important;\n    top: var(--mv-scroll-top) !important;\n    right: auto !important;\n    bottom: auto !important;\n    width: var(--mv-scroll-width) !important;\n    height: auto !important;\n    padding-bottom: 0 !important;\n    aspect-ratio: var(--mv-scroll-ratio) !important;\n    transform: rotate(var(--mv-scroll-rotate)) !important;\n    background-image: var(--parchment-mobile) !important;\n    background-size: 100% 100% !important;\n    background-repeat: no-repeat !important;\n    pointer-events: none !important;\n  /* Sin drop-shadow: es de los efectos mas caros al hacer scroll y aqui se\n     repintaba en cada mensaje. El resplandor se nota poco sobre el azul. */\n    /* ENCIMA del aro del avatar, que esta en z-index 11. Antes iba en 6, o sea\n       por detras, y las plumas del aro se le montaban al pergamino. */\n    z-index: 12 !important;\n  }\n\n  /* NOMBRE — encima del pergamino, alineado a su mismo left/width para que\n     quede centrado sobre el, no sobre la caja. */\n  #chat .mes .mes_block .name_text {\n    position: absolute !important;\n    /* En vez de fijar el top a mano, le damos al nombre exactamente la franja\n       escribible del pergamino y lo centramos con flex. Asi queda centrado\n       aunque cambie el tamano de fuente o el font_scale del tema. */\n    top: calc(var(--mv-scroll-top) + var(--mv-scroll-height) * 0.221) !important;\n    height: calc(var(--mv-scroll-height) * 0.53) !important;\n    left: var(--mv-scroll-left) !important;\n    width: var(--mv-scroll-width) !important;\n    display: flex !important;\n    align-items: center !important;\n    justify-content: center !important;\n    line-height: 1 !important;\n    transform: rotate(var(--mv-scroll-rotate)) !important;\n    text-align: center !important;\n    padding: 0 !important;\n    font-size: var(--mv-name-size) !important;\n    white-space: nowrap !important;\n    overflow: hidden !important;\n    text-overflow: ellipsis !important;\n    z-index: 20 !important;\n  }\n}\n\n/* ================= AREA DE ENTRADA DE TEXTO ================= */\n#send_form {\n  position: relative;\n  display: flex !important;\n  align-items: center !important;\n  border: 2px solid transparent;\n  /* El corte de esquina era de 14px y la barra mide 28px de alto: los dos\n     cortes se comian el lado entero, asi que el borde vertical quedaba\n     reducido a un punto y el cuadro se veia abierto a los costados. Con 5px\n     quedan 18px de linea vertical a la vista y el rectangulo cierra. */\n  clip-path: polygon(\n    5px 0, calc(100% - 5px) 0, 100% 5px,\n    100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%,\n    0 calc(100% - 5px), 0 5px\n  ) !important;\n  background:\n    linear-gradient(90deg, #080e20, #16203f, #080e20) padding-box,\n    linear-gradient(135deg, rgba(216, 216, 228, 0.9), rgba(120, 140, 185, 0.35) 45%, rgba(216, 216, 228, 0.7) 100%) border-box !important;\n  filter:\n    drop-shadow(0 0 10px rgba(205, 218, 245, 0.3))\n    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));\n}\n\n#send_form::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n  pointer-events: none;\n  background:\n    repeating-linear-gradient(90deg,\n      transparent 0 13px,\n      rgba(180, 197, 235, 0.30) 13px 14px),\n    radial-gradient(circle at 7px 7px, rgba(205, 220, 255, 0.40) 0.9px, transparent 1.4px),\n    radial-gradient(circle at 21px 21px, rgba(205, 220, 255, 0.28) 0.7px, transparent 1.2px);\n  background-size: 14px 100%, 28px 28px, 28px 28px;\n  background-position: 0 0, 0 0, 0 0;\n  opacity: 0.14;\n}\n\n#send_form:has(#send_textarea:placeholder-shown)::before {\n  content: \"Midnight Sonata\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  font-family: 'Playfair Display', serif;\n  font-style: italic;\n  font-weight: 500;\n  font-size: 0.95em;\n  letter-spacing: 0.07em;\n  color: rgba(200, 215, 245, 0.55);\n  text-shadow: 0 0 8px rgba(190, 210, 250, 0.4);\n  pointer-events: none;\n  white-space: nowrap;\n  z-index: 1;\n}\n\n#send_textarea {\n  position: relative;\n  z-index: 2;\n  color: #d8d8e4 !important;\n  background: transparent !important;\n  font-family: 'Nunito', sans-serif;\n}\n\n#send_textarea::placeholder {\n  opacity: 0 !important;\n}\n\n.text_pole, textarea, input[type=\"text\"], select {\n  background:\n    linear-gradient(45deg, transparent 6px, rgba(150, 175, 225, 0.1) 6px, rgba(150, 175, 225, 0.1) 7px, transparent 7px),\n    linear-gradient(-45deg, transparent 6px, rgba(150, 175, 225, 0.1) 6px, rgba(150, 175, 225, 0.1) 7px, transparent 7px),\n    linear-gradient(45deg, transparent 3px, rgba(150, 175, 225, 0.07) 3px, rgba(150, 175, 225, 0.07) 4px, transparent 4px),\n    linear-gradient(-45deg, transparent 3px, rgba(150, 175, 225, 0.07) 3px, rgba(150, 175, 225, 0.07) 4px, transparent 4px),\n    rgba(15, 12, 9, 0.85) !important;\n  background-size: 16px 16px, 16px 16px, 16px 16px, 16px 16px, auto !important;\n  background-position: 0 0, 0 0, 8px 8px, 8px 8px, center !important;\n  color: #d8dff2 !important;\n  border: 1px solid rgba(205, 218, 245, 0.5) !important;\n  border-radius: 3px !important;\n  box-shadow:\n    0 0 8px rgba(205, 218, 245, 0.25),\n    inset 0 0 12px rgba(132, 158, 210, 0.15) !important;\n}\n\n.text_pole:focus, textarea:focus, input[type=\"text\"]:focus, select:focus {\n  border: 1px solid rgba(205, 218, 245, 0.85) !important;\n  box-shadow:\n    0 0 14px rgba(205, 218, 245, 0.45),\n    inset 0 0 12px rgba(132, 158, 210, 0.2) !important;\n}\n\nselect {\n  -webkit-appearance: none !important;\n  appearance: none !important;\n  background-image: var(--nav-dropdown) !important;\n  background-repeat: no-repeat !important;\n  background-position: right 8px center !important;\n  background-size: 20px 20px !important;\n  padding-right: 32px !important;\n}\n\n/* Flechas de expandir/colapsar (filas de World Info, drawers, etc.) */\n.inline-drawer-icon {\n  color: transparent !important;\n  position: relative;\n  overflow: visible !important;\n}\n\n.inline-drawer-icon::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 30px;\n  height: 30px;\n  background-image: var(--nav-dropdown);\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n  pointer-events: none;\n  transition: transform 0.2s ease;\n  z-index: 5;\n}\n\n/* Solo el estado EXPANDIDO gira, igual que en Nocturnal Harmony: el PNG esta\n   dibujado apuntando hacia abajo, que es el estado cerrado. */\n.inline-drawer-icon.up::after,\n.inline-drawer-icon.fa-circle-chevron-up::after,\n.inline-drawer-icon.fa-chevron-up::after {\n  transform: translate(-50%, -50%) rotate(180deg);\n}\n\n/* ================= BOTONES ================= */\n.menu_button {\n  background: rgba(20, 16, 12, 0.85) !important;\n  color: #96afe1 !important;\n  border: 1px solid rgba(110, 135, 185, 0.45) !important;\n  border-radius: 4px !important;\n  transition: all 0.25s ease !important;\n}\n\n.menu_button:hover {\n  background: rgba(132, 158, 210, 0.85) !important;\n  color: #14100c !important;\n  box-shadow: 0 0 10px rgba(132, 158, 210, 0.5) !important;\n}\n\n/* ================= CHECKBOXES ================= */\ninput[type=\"checkbox\"]:not(:checked) {\n  border: 1px solid rgba(205, 218, 245, 0.55) !important;\n  border-radius: 4px;\n  background: rgba(20, 16, 12, 0.9) !important;\n  filter: none !important;\n}\n\ninput[type=\"checkbox\"]:checked {\n  border: 1px solid rgba(205, 218, 245, 0.75) !important;\n  border-radius: 4px;\n  background: #3a4a72 !important;\n  filter: none !important;\n}\n\ninput[type=\"checkbox\"]:checked::after {\n  content: \"\\263E\" !important;\n  color: #e2eaf8 !important;\n  font-size: 0.75em !important;\n  font-weight: bold !important;\n  position: absolute !important;\n  top: 50% !important;\n  left: 50% !important;\n  transform: translate(-50%, -50%) rotate(-15deg) !important;\n  z-index: 10 !important;\n  display: block !important;\n  line-height: 0.9 !important;\n  pointer-events: none !important;\n  filter: drop-shadow(0 0 4px rgba(205, 218, 245, 0.8));\n}\n\n/* ================= SLIDERS ================= */\ninput[type=\"range\"] {\n  -webkit-appearance: none;\n  appearance: none;\n  border: 1px solid rgba(205, 218, 245, 0.45);\n  border-radius: 5px !important;\n  background: linear-gradient(to right, #26365e, #cddaf5, #26365e) !important;\n  box-shadow: none;\n  filter: none !important;\n  height: 6px;\n  margin-top: 20px !important;\n  accent-color: #7c96cc;\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  background: radial-gradient(circle at 35% 30%, #e8eefb, #8aa4d8 65%, #3a4a72);\n  border: 2px solid #cddaf5;\n  box-shadow: 0 0 6px rgba(205, 218, 245, 0.6);\n  cursor: pointer;\n}\n\ninput[type=\"range\"]::-moz-range-thumb,\ninput[type=\"range\"]::-ms-thumb {\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  background: radial-gradient(circle at 35% 30%, #e8eefb, #8aa4d8 65%, #3a4a72);\n  border: 2px solid #cddaf5;\n  box-shadow: 0 0 6px rgba(205, 218, 245, 0.6);\n  cursor: pointer;\n}\n\n/* ================= FECHA/HORA: al final del mensaje, centrada ================= */\n.mes .timestamp {\n  position: absolute !important;\n  bottom: 64px !important;\n  left: 0 !important;\n  width: 100% !important;\n  text-align: center !important;\n  font-size: 0.72em !important;\n  color: #8fa6d2 !important;\n  opacity: 0.75 !important;\n  z-index: 3;\n  pointer-events: none;\n}\n\n/* ================= NUMERO DE MENSAJE: debajo del pergamino, a la izquierda, sin tocar el medallon ================= */\n.mes .mesIDDisplay {\n  position: absolute !important;\n  bottom: 64px !important;\n  top: auto !important;\n  left: 12% !important;\n  font-size: 0.7em !important;\n  color: #8fa6d2 !important;\n  opacity: 0.6 !important;\n  z-index: 3;\n  pointer-events: none;\n}\n\n/* ================= CONTADOR DE TOKENS: misma fila que la fecha, a la derecha ================= */\n.mes .tokenCounterDisplay {\n  position: absolute !important;\n  bottom: 64px !important;\n  right: 10% !important;\n  font-size: 0.7em !important;\n  color: #8fa6d2 !important;\n  opacity: 0.6 !important;\n  z-index: 3;\n  pointer-events: auto;\n}\n\n.mes .tokenCounterDisplay:hover {\n  opacity: 1 !important;\n  color: #cddaf5 !important;\n}\n\n/* ================= ICONOS DE NAVEGACION SUPERIOR ================= */\n:root {\n  --icon-font-size: 1.05em;\n}\n\n#leftNavDrawerIcon,\n#API-status-top,\n#advanced-formatting-button .drawer-icon,\n#WIDrawerIcon,\n#user-settings-button .drawer-icon,\n#site_logo .drawer-icon,\n#backgrounds-drawer-toggle .drawer-icon,\n#extensions-settings-button .drawer-icon,\n#table_drawer_icon,\n#gaigai-top-btn,\n#horae_drawer_icon,\n#persona-management-button .drawer-icon,\n#rightNavDrawerIcon {\n  position: relative;\n  color: transparent !important;\n  overflow: visible !important;\n  opacity: 1 !important;\n}\n\n#leftNavDrawerIcon::after,\n#API-status-top::after,\n#advanced-formatting-button .drawer-icon::after,\n#WIDrawerIcon::after,\n#user-settings-button .drawer-icon::after,\n#site_logo .drawer-icon::after,\n#backgrounds-drawer-toggle .drawer-icon::after,\n#extensions-settings-button .drawer-icon::after,\n#table_drawer_icon::after,\n#gaigai-top-btn::after,\n#horae_drawer_icon::after,\n#persona-management-button .drawer-icon::after,\n#rightNavDrawerIcon::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: var(--icon-font-size);\n  height: var(--icon-font-size);\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  transition: all 0.3s ease;\n  pointer-events: none;\n  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));\n}\n\n#leftNavDrawerIcon::after { background-image: var(--nav-sliders) !important; }\n#API-status-top::after { background-image: var(--nav-api) !important; }\n#API-status-top.redOverlayGlow::after { background-image: var(--nav-noapi) !important; }\n#advanced-formatting-button .drawer-icon::after { background-image: var(--nav-advanced) !important; }\n#WIDrawerIcon::after { background-image: var(--nav-widrawer) !important; }\n#user-settings-button .drawer-icon::after { background-image: var(--nav-usersettings) !important; }\n#site_logo .drawer-icon::after,\n#backgrounds-drawer-toggle .drawer-icon::after { background-image: var(--nav-backgrounds) !important; }\n#extensions-settings-button .drawer-icon::after { background-image: var(--nav-extensions) !important; }\n#table_drawer_icon::after { background-image: var(--nav-table) !important; }\n#gaigai-top-btn::after { background-image: var(--nav-gaigai) !important; }\n#horae_drawer_icon::after { background-image: var(--nav-horae) !important; }\n#persona-management-button .drawer-icon::after { background-image: var(--nav-smiley) !important; }\n#rightNavDrawerIcon::after { background-image: var(--nav-persona) !important; }\n\n#leftNavDrawerIcon:hover::after,\n#API-status-top:hover::after,\n#advanced-formatting-button .drawer-icon:hover::after,\n#WIDrawerIcon:hover::after,\n#user-settings-button .drawer-icon:hover::after,\n#site_logo .drawer-icon:hover::after,\n#backgrounds-drawer-toggle .drawer-icon:hover::after,\n#extensions-settings-button .drawer-icon:hover::after,\n#table_drawer_icon:hover::after,\n#gaigai-top-btn:hover::after,\n#horae_drawer_icon:hover::after,\n#persona-management-button .drawer-icon:hover::after,\n#rightNavDrawerIcon:hover::after {\n  filter: drop-shadow(0 2px 4px rgba(205, 218, 245, 0.6));\n  transform: translate(-50%, -50%) translateY(2px);\n}\n\n/* ================= BOTONES DE LA BARRA DE ENVIO (varita, menu, enviar) ================= */\n#options_button,\n#extensionsMenuButton,\n#send_but {\n  background: transparent !important;\n  border: none !important;\n  box-shadow: none !important;\n  color: transparent !important;\n  position: relative;\n  overflow: visible !important;\n  opacity: 1 !important;\n  filter: none !important;\n  transition: all 0.3s ease;\n}\n\n#options_button::after,\n#extensionsMenuButton::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 1.4em !important;\n  height: 1.4em !important;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  transition: all 0.3s ease;\n  pointer-events: none;\n  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));\n}\n\n/* El lapiz solo cambia de tamano: su dibujo es casi vertical, asi que con la\n   caja cuadrada de 1.4em llenaba todo el alto y quedaba muy por encima de la\n   hamburguesa, que es apaisada y solo llena el ancho.\n   OJO: aqui va SOLO el tamano. Al separarlo antes se llevo el background-size\n   del bloque de arriba y la hamburguesa quedo dibujada a tamano natural\n   (1499px dentro de 1.4em), o sea invisible. */\n#extensionsMenuButton::after {\n  width: 1.05em !important;\n  height: 1.05em !important;\n}\n\n#send_but::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  /* 52px daban 126px de alto en pantalla y el avion se salia por abajo de la\n     barra; con 40 seguia grande. 30px lo deja a la altura de la hamburguesa. */\n  width: 30px !important;\n  height: 30px !important;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  transition: all 0.3s ease;\n  pointer-events: none;\n  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));\n}\n\n#options_button::after { background-image: var(--nav-hamburger) !important; }\n#extensionsMenuButton::after { background-image: var(--nav-wand) !important; }\n#send_but::after { background-image: var(--nav-send) !important; }\n\n#options_button:hover::after,\n#extensionsMenuButton:hover::after,\n#send_but:hover::after {\n  filter: drop-shadow(0 2px 4px rgba(205, 218, 245, 0.6));\n  transform: translate(-50%, -50%) translateY(2px);\n}\n\n\n/* ================= ESCRITORIO =================\n   El chat se muestra como una columna del mismo ancho que en el celular y\n   centrada. Asi el encabezado, las varillas y el adorno inferior conservan la\n   calibracion que ya funciona, sin tener que rehacer los 72 valores en px del\n   bloque de arriba. --mv-desktop-width es el unico numero a mover si se\n   quiere mas ancha. */\n@media (min-width: 769px) {\n  :root {\n    /* Ancho de la columna en escritorio. Tiene que ser el MISMO que el de la\n       barra de navegacion de arriba, o los laterales del chat no llegan a los\n       extremos y se ve el escalon. Esa barra usa chat_width del JSON, que esta\n       en 38, asi que aca va 38vw. Medido sobre la captura: la barra da 722px\n       en una ventana de 1918, o sea 38% exacto.\n       Si cambias chat_width en los ajustes, cambia este numero igual. */\n    --mv-desktop-width: 38vw;\n    /* La CAJA DEL MENSAJE, con su marco, varillas y adornos, es mas angosta y\n       va centrada dentro del chat: a los lados queda el fondo a la vista. Ese\n       es el punto que faltaba, tenia las dos cosas atadas al mismo numero.\n       Medido sobre la captura del tarot: sus bandas laterales miden 87 y 81px\n       sobre un chat de 718, o sea que el bloque central ocupa el 77%.\n       38vw * 0.77 = 29vw. Bajarlo ensancha las bandas; subirlo las cierra. */\n    --mv-frame-width: 29vw;\n\n    /* FACTOR DE ADORNO. El ancho de la caja (29vw = 554px en una ventana de\n       1912) esta bien para el texto, pero si los adornos se calculan sobre ese\n       ancho crecen un 54% respecto del celular mientras la letra sigue casi\n       igual (solo +6% por el 1.06em de mas abajo). Medido: el aro del avatar\n       daba 180px contra los 114 del celular, con el mismo cuerpo de letra.\n       Por eso los adornos se dibujan sobre --mv-orn-w, que es la caja por este\n       factor, y --mv-orn-off recentra lo que va posicionado a la izquierda.\n       Es el UNICO numero a mover si quedan grandes o chicos. */\n    --mv-orn: 0.85;\n    --mv-orn-w: calc(var(--mv-frame-width) * var(--mv-orn));\n    --mv-orn-off: calc((var(--mv-frame-width) - var(--mv-orn-w)) / 2);\n\n    /* Mismas proporciones del celular, pero sobre --mv-orn-w. Las que llevan\n       --mv-orn-off son posiciones horizontales: sin ese corrimiento el avatar\n       y el pergamino quedarian pegados a la izquierda al angostarse el banner. */\n    --mv-box-padding-top: calc(var(--mv-orn-w) * 0.575000);\n    --mv-avatar-size: calc(var(--mv-orn-w) * 0.227050);\n    --mv-avatar-frame: calc(var(--mv-orn-w) * 0.316667);\n    --mv-avatar-left: calc(var(--mv-orn-off) + var(--mv-orn-w) * 0.138889);\n    --mv-avatar-top: calc(var(--mv-orn-w) * 0.194055);  /* -1.00%: el hueco del aro B no esta en el centro del PNG, igual que en celular */\n    --mv-scroll-width: calc(var(--mv-orn-w) * 0.505556);\n    --mv-scroll-left: calc(var(--mv-orn-off) + var(--mv-orn-w) * 0.388889);\n    /* SUBIDA DEL PERGAMINO EN ESCRITORIO.\n       El pergamino es un ::before de .mes_block, o sea que se mide DESPUES del\n       borde superior transparente (--mv-rod-top). El avatar y el banner, en\n       cambio, cuelgan de .mes y no pagan ese borde. En celular no se nota\n       porque las dos cosas salen del mismo ancho, pero en escritorio no:\n       --mv-rod-top se calcula sobre --mv-frame-width (554px -> 63px) mientras\n       que el pergamino se calcula sobre --mv-orn-w, que es un 15% menor. Las\n       dos referencias dejan de coincidir y el pergamino cae mas abajo de lo\n       que le toca.\n       Medido sobre la captura: el borde inferior del pergamino llegaba a\n       y=246, y las nubes que lo rodean terminan en y=205 (izquierda) y\n       y=190 (derecha), o sea 40-55px por debajo.\n       Este es el UNICO numero a mover si queda alto o bajo. El nombre no hay\n       que tocarlo: cuelga de --mv-scroll-top y sube con el. */\n    /* Medido: con 64px la placa quedaba 11px POR DEBAJO del centro del aro.\n       Pasado a proporcion de --mv-orn-w para que no se desarme al cambiar el\n       ancho de la ventana: 0.1774 equivale a 84px con la caja en 554. */\n    --mv-scroll-shift: calc(var(--mv-orn-w) * 0.131000);\n    --mv-scroll-top: calc(var(--mv-orn-w) * 0.202778 - var(--mv-scroll-shift));\n    /* Igual que en celular: hay que descontar el borde superior transparente\n       de .mes_block, porque estos botones son absolutos y se miden contra el\n       area interior. */\n    --mv-buttons-top: calc(var(--mv-orn-w) * 0.494444 - var(--mv-rod-top));\n    --mv-buttons-top-reasoning: calc(var(--mv-orn-w) * 0.494444 - var(--mv-rod-top));\n\n    /* Fecha, numero de mensaje, tiempo, tokens y modelo, 14px mas abajo.\n       Los cinco cuelgan de --mv-meta-bottom, asi que bajan juntos. Mas\n       negativo = mas abajo. */\n    --mv-meta-bottom: calc(var(--mv-box-padding-bottom) - 76px);\n\n    /* El nombre sobre el pergamino, mas grande. En celular sigue en 1.05em. */\n    --mv-name-size: 1.28em;\n\n    /* Las nubes se bajaron en celular (0.130). Aca se deja el valor viejo:\n       en escritorio estaban bien. */\n    --mv-clouds-top: calc(var(--mv-frame-width) * 0.100000);\n  }\n\n  /* El conjunto (numero de mensaje, tiempo, tokens, modelo) corrido a la\n     derecha, con un paso parejo de 10 puntos entre uno y otro. Van del 35% al\n     65%, o sea centrados en el 50%, que es donde cae el centro de la fecha.\n\n     OJO CON EL ICONO DEL MODELO: es .timestamp-icon, NO .fa-ghost. En todo el\n     CSS solo tenia definido el 'bottom', nunca un 'left', asi que al ser\n     absolute con left y right en auto se quedaba en su posicion estatica, o\n     sea pegado al contador de tokens. Medido sobre la captura: los pasos entre\n     centros daban 56, 55 y 27 px. El ultimo era la mitad porque ese elemento\n     no seguia al grupo. Ahora lleva left propio y se mueve con los demas. */\n  #chat .mes .mesIDDisplay {\n    left: 35% !important;\n  }\n\n  #chat .mes .mes_timer {\n    left: 45% !important;\n  }\n\n  #chat .mes .tokenCounterDisplay {\n    left: 55% !important;\n  }\n\n  #chat .mes .timestamp-icon {\n    left: 65% !important;\n    right: auto !important;\n    transform: translateX(-50%) !important;\n  }\n\n  #chat .mes .fa-ghost {\n    left: 65% !important;\n  }\n\n  /* El banner NO lleva el factor de adorno: queda al ancho completo de la caja.\n     El avatar, el pergamino y la altura del encabezado si lo llevan.\n     Si alguna vez se le vuelve a poner un ancho propio, la altura tiene que ir\n     en longitud absoluta y no en --mv-banner-ratio (33.33%): un padding-bottom\n     en porcentaje se resuelve sobre el ancho del contenedor, no sobre el del\n     propio banner, asi que al angostarlo se estira hacia abajo. */\n\n  /* La caja del mensaje ENTERA va al ancho del marco, no solo el texto.\n     Antes --mv-frame-width estaba puesto solo en .mes_text (linea del bloque\n     @media all): el texto se angostaba pero .mes_block seguia al 100% del\n     chat, asi que las varillas y el banner quedaban pegados al borde y el\n     hueco lateral aparecia justo en el medio. Poniendolo en .mes se angosta\n     todo junto, porque el banner (::before), las nubes (::after), el avatar,\n     .mes_block y sus varillas cuelgan todos de .mes.\n     El max-width tambien va aca porque --mes-max-width vale 720px y si no\n     topa el ancho en pantallas grandes, por encima de 1895px de ventana. */\n  #chat .mes {\n    width: var(--mv-frame-width) !important;\n    max-width: var(--mv-frame-width) !important;\n    margin-left: auto !important;\n    margin-right: auto !important;\n  }\n\n  /* ASI LO HACE EL TAROT (visto con el diagnostico puesto en su tema): #sheld\n     mide lo mismo que la columna, y #chat lo llena entero. Nosotros teniamos\n     una regla '#sheld { width: 100% }' pensada para el celular que, al pasar\n     el bloque a todos los anchos, estiraba #sheld de borde a borde: la columna\n     quedaba flotando adentro y a los lados se veia el contenedor. Esas eran\n     las franjas. */\n  #sheld {\n    width: var(--mv-desktop-width) !important;\n    max-width: 100% !important;\n    left: 50% !important;\n    right: auto !important;\n    transform: translateX(-50%) !important;\n    margin-left: 0 !important;\n    margin-right: 0 !important;\n    background: transparent !important;\n    background-color: transparent !important;\n    border: 0 !important;\n  }\n\n  /* Y la columna llena el contenedor, sin sobrar ni faltar. Los selectores\n     llevan #sheld porque mas arriba hay reglas con dos ids que le ganarian a\n     uno suelto. */\n  #sheld > #chat,\n  #sheld > #form_sheld,\n  #chat,\n  #form_sheld {\n    width: 100% !important;\n    max-width: 100% !important;\n    margin-left: 0 !important;\n    margin-right: 0 !important;\n    align-self: stretch !important;\n  }\n\n  /* Los adornos viejos de escritorio (banner con alto fijo de 273px, marco y\n     medallones) quedan fuera: los reemplaza el juego del bloque de arriba. */\n  #chat .mes .mes_block > .mes_text::before {\n    content: none !important;\n  }\n\n  /* En escritorio el texto se lee mas lejos que el celular, asi que va un\n     punto mas grande. En el celular no cambia nada. */\n  #chat .mes .mes_block .mes_text {\n    font-size: 1.06em !important;\n  }\n}\n",
    "bogus_folders": true,
    "zoomed_avatar_magnification": false,
    "reduced_motion": false,
    "compact_input_area": true,
    "show_swipe_num_all_messages": false,
    "click_to_edit": false,
    "media_display": "list"
}