@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;600&family=Cinzel:wght@400;700&display=swap');

    :root{
      --bg-main:#0d0217;
      --bg-panel:#1a0827;
      --gold:#F9DFA5;
      --purple:#4c157e;
      --lila:#E5C8FF;
      --border-width:2px;
      --border-radius:10px;
      --shadow-gold:0 0 10px var(--gold);
    }
    *{box-sizing:border-box;margin:0;padding:0}
    body{
      background:var(--bg-main);color:#fff;font-family:"Merriweather",serif;
      font-size:17px;line-height:1.66;padding:22px;min-height:100vh;
    }

    /* FORM */
    #formulario-personaje{max-width:600px;margin:0 auto 20px;display:none!important;}
    #formulario-personaje h2{
      font-family:"Cinzel",serif;color:var(--gold);margin-bottom:20px;text-align:center;
      font-size:1.8rem;text-shadow:0 0 8px var(--gold);
    }
    #formulario-personaje input,#formulario-personaje textarea{
      width:100%;padding:12px 16px;border-radius:8px;margin-bottom:16px;
      border:var(--border-width) solid var(--gold);
      background:var(--bg-panel)!important;color:var(--gold)!important;
      font-family:"Merriweather",serif;font-size:16px;
      transition:box-shadow .3s ease,border-color .3s ease;
    }
    #formulario-personaje input:focus,#formulario-personaje textarea:focus{
      outline:none;box-shadow:var(--shadow-gold);border-color:var(--lila);
    }
    #formulario-personaje textarea{resize:vertical;min-height:80px;}

    /* HEADER */
    #cabecera{
      display:flex;align-items:center;gap:18px;margin:22px 0 20px;padding:16px;
      background:rgba(26,8,39,.6);border:1px solid var(--gold);
      border-radius:var(--border-radius);backdrop-filter:blur(10px);
    }
    #avatar-personaje{
      max-width:120px;border:var(--border-width) solid var(--gold);border-radius:8px;
      display:none;box-shadow:var(--shadow-gold);transition:transform .3s ease;
    }
    #avatar-personaje:hover{transform:scale(1.05)}
    #avatar-personaje.mostrar{display:block}
    #titulo-historia,#nombre-personaje{
      color:var(--gold);font-family:"Cinzel",serif;margin:0;text-shadow:0 0 6px var(--gold);
    }
    #titulo-historia{font-size:1.5rem;letter-spacing:.5px;font-weight:700;}
    #nombre-personaje{font-size:1.1rem;margin-top:6px;opacity:.9;font-weight:400;}

    /* CHAT */
    #chat{
      background:linear-gradient(135deg,var(--bg-main) 0%,rgba(26,8,39,.8) 100%);
      border:var(--border-width) solid var(--gold);box-shadow:var(--shadow-gold);
      border-radius:var(--border-radius);padding:20px 24px;height:500px;overflow-y:auto;
      margin-bottom:16px;white-space:pre-line;scroll-behavior:smooth;
      scrollbar-width:thin;scrollbar-color:var(--gold) var(--bg-panel);
    }
    #chat::-webkit-scrollbar{width:8px}
    #chat::-webkit-scrollbar-track{background:var(--bg-panel);border-radius:4px}
    #chat::-webkit-scrollbar-thumb{background:var(--gold);border-radius:4px}
    #chat::-webkit-scrollbar-thumb:hover{background:var(--lila)}
    .mensaje{margin-bottom:24px;animation:fadeIn .5s ease-in}
    @keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
    .texto{
      background:rgba(76,21,126,.6);padding:16px 24px;border-radius:var(--border-radius);
      font-family:"Merriweather",serif;border:1px solid rgba(249,223,165,.3);backdrop-filter:blur(5px);
      position:relative;
    }
    .mensaje.personaje .texto{color:var(--gold);font-weight:600;border-left:4px solid var(--gold);}
    .mensaje.tu .texto{color:var(--lila);background:rgba(76,21,126,.4);border-left:4px solid var(--lila);margin-left:20px;}
/* --- ACCIONES MÁS INMERSIVAS, SIN ROMPER EL FLUJO --- */
/* --- TEXTO BASE --- */
.texto {
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* --- ACCIONES --- */
#chat .texto em.accion {
  font-style: italic;
  opacity: 0.95;
  color: #cbb6ff !important;
}

#chat .mensaje.tu .texto em.accion{
  color:#cbb6ff !important;
}

#chat .texto .dialogo{
  color: var(--gold) !important;
  font-style: normal !important;
  font-weight: 700;
}

#chat .texto .narrativa{
  color: #cbb6ff !important;
  font-style: italic !important;
  opacity: 0.95;
}

#chat .texto .accion-line{
  display:inline;
}

#chat .texto .usuario-texto{
  color: inherit !important;
  font-style: normal !important;
}

/* --- CURSIVA GENERAL (por si acaso) --- */
.texto em {
  font-style: italic;
}

    /* INPUT & CTA */
    #chat-form{display:flex;flex-direction:column;gap:16px;width:100%;margin-bottom:12px;}
    #chat-input-group{display:flex;gap:12px;align-items:stretch;}
    #chat-input-group input{
      flex:1;padding:14px 18px;border:var(--border-width) solid var(--gold);border-radius:8px;
      background:var(--bg-panel);color:var(--lila);font-family:"Merriweather",serif;font-size:16px;
      transition:all .3s ease;
    }
    #chat-input-group input:focus{
      outline:none;box-shadow:var(--shadow-gold);border-color:var(--lila);background:rgba(26,8,39,.9);
    }
    #chat-input-group input::placeholder{color:rgba(229,200,255,.6);}

    #chat-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
    button{
      background:linear-gradient(135deg,var(--bg-panel) 0%,rgba(76,21,126,.8) 100%);
      border:var(--border-width) solid var(--gold);color:var(--gold);
      padding:12px 24px;border-radius:var(--border-radius);font-family:"Cinzel",serif;
      font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;
      box-shadow:var(--shadow-gold);transition:all .3s ease;position:relative;overflow:hidden;
    }
    button::before{
      content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
      background:linear-gradient(90deg,transparent,rgba(249,223,165,.2),transparent);
      transition:left .5s ease;
    }
    button:hover::before{left:100%}
    button:hover{background:linear-gradient(135deg,var(--purple) 0%,rgba(76,21,126,1) 100%);box-shadow:0 0 20px var(--gold);transform:translateY(-2px);}
    button:active{transform:translateY(0)}
    #chat-input-group button{padding:14px 28px;white-space:nowrap;}

    /* ERROR / OK */
    #error{color:#ff6b6b;font-size:.9rem;margin-bottom:16px;display:none;background:rgba(255,107,107,.1);
      padding:12px 16px;border-radius:6px;border:1px solid rgba(255,107,107,.3);text-align:center;}
    #success{color:#4caf50;font-size:.9rem;margin-bottom:16px;display:none;background:rgba(76,175,80,.1);
      padding:12px 16px;border-radius:6px;border:1px solid rgba(76,175,80,.3);text-align:center;}

    /* RESPONSIVE */
    @media (max-width:768px){
      body{padding:16px}
      #chat{height:400px;padding:16px 18px}
      #cabecera{flex-direction:column;text-align:center;gap:12px}
      #avatar-personaje{max-width:100px}
      #titulo-historia{font-size:1.3rem}
      #chat-input-group{flex-direction:column}
      #chat-actions{gap:8px}
      button{padding:10px 16px;font-size:12px}
      .mensaje.tu .texto{margin-left:10px}
    }

    /* LOADING */
    .loading{opacity:.7;animation:pulse 1.5s infinite;}
    @keyframes pulse{0%,100%{opacity:.7}50%{opacity:1}}

    /* Ocultar badge si existiera */
    #estado-debug{display:none!important;}

    /* Barra afinidad */
    #afinidad-wrap{
      height:14px;width:100%;background:rgba(255,255,255,.06);
      border:1px solid var(--gold);border-radius:6px;margin:6px 0 6px;overflow:hidden;
    }
    #afinidad-bar{
      height:100%;width:50%;display:block;
      transition:width .35s ease,background .35s ease,box-shadow .35s ease;
      box-shadow:0 0 8px rgba(0,0,0,.3) inset;
    }
    #afinidad-num{
      text-align:right;font-size:12px;color:#F9DFA5;opacity:.55;margin:-10px 0 18px;user-select:none;
    }

    /* Ocultar file input */
    #chat-form input[type="file"]{display:none!important;width:0!important;height:0!important;opacity:0!important;position:absolute!important;left:-9999px!important;}
  
/* ===============================
   BURBUJAS EQUITATIVAS (mismo marco, distinto color)
   - Sin tocar fondos ni botones
   - Solo diferencia por color de borde + color de texto
================================ */

/* PERSONAJE (dorado) */
#chat .mensaje.personaje .texto{
  border: 1px solid rgba(249,223,165,.32) !important;
  border-left: 3px solid rgba(249,223,165,.60) !important;
  color: var(--gold) !important;
  box-shadow: none !important;
}

#chat .mensaje.tu .texto{
  background: rgba(52, 24, 88, 0.55) !important;
  border: 1px solid rgba(176,142,255,.42) !important;
  border-left: 3px solid rgba(176,142,255,.62) !important;
  color: rgba(238,230,255,.98) !important;
  box-shadow: none !important;
}

/* Opcional: una pizca de diferenciación sin brillo (solo línea izquierda sutil) */
#chat .mensaje.personaje .texto{
  border-left: 3px solid rgba(249,223,165,.60) !important;
}
#chat .mensaje.tu .texto{
  border-left: 3px solid rgba(176,142,255,.55) !important;
}

/* ==========================================================
   SCRIPTIA FREE V2 · avatar lateral + chat panorámico
   ========================================================== */
html,body{width:100%;min-height:100%;overflow-x:hidden;}
body{
  padding:clamp(12px,2vw,28px);
  background:
    radial-gradient(circle at 12% 18%,rgba(104,39,145,.22),transparent 34%),
    radial-gradient(circle at 86% 78%,rgba(150,87,38,.13),transparent 32%),
    linear-gradient(145deg,#07010e 0%,#10031c 48%,#08010f 100%);
}
#scriptia-free-v2{
  width:min(1480px,100%);
  height:min(860px,calc(100dvh - 40px));
  min-height:680px;
  margin:0 auto;
  padding:14px;
  display:grid;
  grid-template-columns:minmax(250px,27%) minmax(0,1fr);
  gap:14px;
  overflow:hidden;
  border:1px solid rgba(229,200,255,.78);
  border-radius:22px;
  background:rgba(9,1,16,.72);
  box-shadow:0 22px 70px rgba(0,0,0,.58),0 0 24px rgba(229,200,255,.13);
  backdrop-filter:blur(10px);
}
#character-panel{
  position:relative;
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(249,223,165,.78);
  border-radius:18px;
  background:
    linear-gradient(180deg,rgba(18,4,28,.1),rgba(8,1,13,.92)),
    radial-gradient(circle at 50% 20%,rgba(76,21,126,.5),transparent 50%),
    #0b0211;
  box-shadow:inset 0 0 28px rgba(249,223,165,.06),0 0 18px rgba(0,0,0,.35);
}
#character-panel::before{
  content:'✦';
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:rgba(249,223,165,.22);
  font-size:clamp(72px,12vw,150px);
  text-shadow:0 0 30px rgba(249,223,165,.16);
}
#avatar-frame{
  position:absolute;
  inset:0;
  overflow:hidden;
}
#avatar-frame::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(8,1,14,.02) 40%,rgba(8,1,14,.92) 100%),
    linear-gradient(90deg,rgba(8,1,14,.2),transparent 35%,rgba(8,1,14,.12));
}
#avatar-personaje{
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center top;
  border:0;
  border-radius:0;
  box-shadow:none;
  transform:none!important;
}
#avatar-personaje.mostrar{display:block;animation:avatarReveal .55s ease both;}
@keyframes avatarReveal{from{opacity:0;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}
#character-meta{
  position:absolute;
  z-index:2;
  left:0;right:0;bottom:0;
  padding:38px 24px 24px;
  background:linear-gradient(180deg,transparent,rgba(8,1,14,.92) 52%);
}
#character-kicker{
  display:block;
  margin-bottom:5px;
  color:rgba(229,200,255,.72);
  font-family:"Cinzel",serif;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
#nombre-personaje{
  font-size:clamp(1.25rem,2.2vw,2rem);
  line-height:1.15;
  letter-spacing:.055em;
  text-shadow:0 2px 18px rgba(0,0,0,.9),0 0 10px rgba(249,223,165,.25);
}
#chat-panel{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  gap:10px;
  padding:14px;
  border:1px solid rgba(249,223,165,.7);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(31,8,43,.74),rgba(11,2,18,.88));
  box-shadow:inset 0 0 30px rgba(76,21,126,.12);
}
#feedback-layer{position:absolute;z-index:10;top:18px;left:50%;width:min(720px,calc(100% - 40px));transform:translateX(-50%);}
#cabecera{
  min-height:68px;
  margin:0;
  padding:14px 18px;
  border:0;
  border-bottom:1px solid rgba(249,223,165,.28);
  border-radius:12px 12px 4px 4px;
  background:linear-gradient(90deg,rgba(28,5,39,.82),rgba(52,13,67,.58));
}
#cabecera>div{width:100%;}
#titulo-historia{
  font-size:clamp(1.15rem,2vw,1.75rem);
  line-height:1.25;
  color:#fff4d2;
  text-shadow:0 0 10px rgba(249,223,165,.18);
}
#afinidad-block{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:0 4px;}
#afinidad-wrap{height:10px;margin:0;}
#afinidad-num{min-width:72px;margin:0;text-align:right;font-size:11px;opacity:.72;}
#chat{
  height:auto;
  min-height:0;
  margin:0;
  padding:20px;
  border:1px solid rgba(249,223,165,.62);
  border-radius:16px;
  background:
    radial-gradient(circle at 80% 15%,rgba(76,21,126,.12),transparent 35%),
    rgba(8,1,14,.62);
  box-shadow:inset 0 0 25px rgba(0,0,0,.28);
}
.mensaje{max-width:88%;margin-bottom:14px;}
.mensaje.personaje{margin-right:auto;}
.mensaje.tu{margin-left:auto;}
.texto{padding:13px 17px;border-radius:14px;font-size:clamp(15px,1.25vw,17px);}
.mensaje.tu .texto{margin-left:0;}
#chat-form{gap:10px;margin:0;}
#chat-input-group{
  gap:8px;
  padding:7px;
  border:1px solid rgba(229,200,255,.45);
  border-radius:14px;
  background:rgba(12,2,20,.78);
}
#chat-input-group input{
  min-width:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
#chat-input-group input:focus{box-shadow:none;background:transparent;}
#chat-input-group button{border-radius:10px;box-shadow:none;padding:12px 24px;}
#chat-actions{gap:8px;justify-content:flex-end;}
#chat-actions button{padding:9px 15px;border-width:1px;border-radius:999px;font-size:10px;box-shadow:0 0 8px rgba(249,223,165,.14);}
.mensaje-sistema{
  margin:14px 0;
  padding:18px;
  border:1px solid rgba(249,223,165,.55);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(76,21,126,.72),rgba(22,5,32,.94));
  color:#fff3cf;
}
.mensaje-sistema a{color:#fff0b7;text-decoration:none;}
.mensaje-sistema a:hover{text-decoration:underline;}
@media (max-width:820px){
  body{padding:0;background:#090111;}
  #scriptia-free-v2{
    height:100dvh;
    min-height:620px;
    padding:8px;
    grid-template-columns:1fr;
    grid-template-rows:clamp(150px,24dvh,220px) minmax(0,1fr);
    gap:8px;
    border:0;
    border-radius:0;
  }
  #character-panel{border-radius:14px;}
  #avatar-personaje{object-position:center 22%;}
  #character-meta{padding:34px 18px 15px;}
  #character-kicker{font-size:9px;}
  #nombre-personaje{font-size:1.25rem;}
  #chat-panel{padding:8px;gap:7px;border-radius:14px;}
  #cabecera{min-height:48px;padding:9px 12px;flex-direction:row;text-align:left;}
  #titulo-historia{font-size:1rem;}
  #afinidad-block{gap:7px;}
  #chat{height:auto;padding:12px;}
  .mensaje{max-width:96%;margin-bottom:10px;}
  .texto{padding:11px 13px;font-size:14px;line-height:1.55;}
  #chat-input-group{flex-direction:row;}
  #chat-input-group input{padding:10px 9px;font-size:14px;}
  #chat-input-group button{padding:10px 13px;font-size:10px;}
  #chat-actions{gap:6px;justify-content:center;}
  #chat-actions button{padding:8px 10px;font-size:9px;}
}
@media (max-width:430px){
  #chat-actions button{flex:1 1 auto;}
  #afinidad-num{min-width:60px;font-size:10px;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;}
}


#scriptia-chat{display:contents;}