#projects-center-root .left-col{
  max-width: 640px; /* ancho columna izquierda para alinear tarjetas */
}
/* Locations grid (mantener estilos existentes del sistema) */
.locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.location-card {
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.2);
}
.location-card .card-cover { height: 140px; background: rgba(255,255,255,0.04); display:flex; align-items:center; justify-content:center; }
.location-card .card-cover img { width: 100%; height: 100%; object-fit: cover; display:block; }
.location-card .cover-placeholder { color:#cfd8dc; font-size:12px; }
.location-card .card-body { padding: 10px 12px; }
.location-card .card-title { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.location-card .card-sub { opacity: 0.8; font-size: 12px; }
.location-card .card-actions { display:flex; gap:8px; padding: 8px 12px 12px; }
.location-card .card-btn { background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2); border-radius:8px; padding:6px 8px; cursor:pointer; }
.location-card .card-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.18); }

/* Garantizar clic operativo en botón de nueva locación */
#locations-workspace #create-location-btn {
  position: relative;
  z-index: 10;
  pointer-events: auto !important;
}

/* Storyboard filas por escena (concepto imagen de referencia) */
#storyboard-workspace .sb3-root{ display:flex; gap:12px; }
#storyboard-workspace .sb3-rail{ width:180px; display:flex; flex-direction:column; gap:8px; overflow:auto; max-height:60vh; }
#storyboard-workspace .sb3-pill{ padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.06); cursor:pointer; white-space:nowrap; }
#storyboard-workspace .sb3-pill.active{ outline:2px solid rgba(255,255,255,0.35); }
#storyboard-workspace .sb3-stage{ flex:1; display:flex; flex-direction:column; gap:10px; }
#storyboard-workspace .sb3-bar{ position:relative; height:72px; border-radius:12px; background: rgba(255,255,255,0.04); border:2px solid rgba(255,255,255,0.5); overflow:hidden; }
#storyboard-workspace .sb3-shot{ position:absolute; top:6px; bottom:6px; display:flex; align-items:center; justify-content:center; font-weight:900; color:#fff; letter-spacing:1px; border-radius:8px; }
#storyboard-workspace .sb3-toolbar{ display:flex; gap:8px; }

/* Bloques de referencia para la escena activa (usamos clase sb2-block para reusar estilos) */
#storyboard-workspace .sb2-block{ position:absolute; top:0; bottom:0; opacity:0.12; font-size:10px; padding:4px 6px; color:#fff; pointer-events:none; }
#storyboard-workspace .sb2-block.action{ background:#90a4ae; }
#storyboard-workspace .sb2-block.dialogue{ background:#64b5f6; }
#storyboard-workspace .sb2-block.parenthetical{ background:#a5d6a7; }
#storyboard-workspace .sb2-block.transition{ background:#ba68c8; }

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(
        135deg,
        #396cdb 0%,
        #5f92d4 45%,
        #00b4db 75%,
        #0083b0 100%
    );
    color: #ffffff;
    height: 100vh;
    overflow: auto;  /* CORREGIDO: permite scroll si es necesario */
    /* Permitir selección global; controlamos bloqueos solo en botones */
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Editor: permitir selección y caret visibles dentro del editor */
.script-editor, .pages-layer, .page-content, .editor-flow {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

/* Chat: permitir copiar/seleccionar como Cursor */
.right-column, .right-content, .ai-chat-container, .ai-messages, .ai-message, .ai-suggestion-card, .ai-suggestion-item, .ai-suggestion-item .diff, .ai-context-tags, textarea.ai-input {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}
.micro-btn, .ai-send-btn, .composer-actions button, .context-tag .remove-tag { user-select: none; }
.script-editor:focus-within {
  outline: 2px solid rgba(255,255,255,0.25);
  outline-offset: 2px;
}

/* Scrollbar moderno unificado para todas las áreas con clase .modern-scroll */
.modern-scroll { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.08); }
.modern-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.modern-scroll::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.08); border-radius: 8px; }
.modern-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.35); border-radius: 8px; }
.modern-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); }

.container {
    display: flex;
    height: 100vh;
    backdrop-filter: blur(10px);
}

/* Left Column */
.left-column {
    width: 300px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    border-radius: 0 20px 20px 0;
    margin: 10px 0 10px 10px;
}

.main-tabs {
    display: none; /* ocultar tabs de la izquierda, ahora se entra por botón de topbar */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    min-height: 50px;
}

.main-tab {
    flex: 1;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    padding: 15px 20px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
    font-weight: 400;
    text-align: center;
}

.main-tab:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.main-tab.active {
    color: #ffffff;
    border-bottom-color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
}

.main-tab-content {
    flex: 1;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.main-tab-content.active {
    display: flex;
    animation: fadeIn 0.5s ease-in-out;
}

.left-header {
    padding: 25px 20px 20px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.left-header h2 {
    color: #ffffff;
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 15px;
    text-align: center;
}

/* Project Actions */
.project-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* NUEVO: Asegurar que los botones del header sean siempre visibles */
.left-header .project-actions {
    opacity: 1 !important;
    visibility: visible !important;
}

.project-btn{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.95);
  height: 36px; min-width: 110px; padding: 0 12px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  border-radius: 10px; font-weight:600; backdrop-filter: blur(8px) saturate(120%);
  transition: all .18s ease;
}
.project-btn:hover{ background: rgba(255,255,255,0.18); transform: translateY(-1px); }
.project-btn i{ font-size: 14px; }

/* Recent Projects */
.recent-projects {
    padding: 15px;
    flex: 1;
    overflow-y: auto;
}

.recent-projects h3 {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.project-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.project-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.project-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-left-color: rgba(255, 255, 255, 0.3);
}

.project-item.active {
    background: rgba(255, 255, 255, 0.15);
    border-left-color: #667eea;
}

.project-item .project-name {
    font-size: 14px;
    color: #ffffff;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-item .project-path {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Left Tabs */
.left-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0 15px;
    margin-bottom: 15px;
}

.left-tab {
    flex: 1;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    padding: 4px 8px;
    cursor: pointer;
    font-size: 10px;
    text-align: center;
    position: relative;
    transition: all 0.2s ease;
    font-weight: 200;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.left-tab:after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    width: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.left-tab:hover {
    color: rgba(255, 255, 255, 0.6);
}

.left-tab.active {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 300;
}

.left-tab.active:after {
    width: 60%;
}

/* Pestañas centradas para elementos - DISCRETAS */
.centered-tabs {
    justify-content: center;
    gap: 5px;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.01);
    border-radius: 10px;
    margin: 5px 0;
}

.centered-tabs .left-tab {
    flex: none;
    min-width: 45px;
    padding: 3px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.2s ease;
    font-size: 9px;
    font-weight: 200;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.centered-tabs .left-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: none;
}

.centered-tabs .left-tab.active {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.centered-tabs .left-tab.active:after {
    display: none; /* Ocultar la línea inferior para pestañas centradas */
}

.search-box::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.left-content {
    flex: 1;
    padding: 20px;
    position: relative;
    overflow-y: auto;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.section {
    margin-bottom: 30px;
}

.section h3 {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 1px;
}

.scene-list .scene-item, .list-item {
    /* No colorear aquí; el JS establece el fondo por escena/personaje */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #ffffff;
    font-weight: 300;
    font-size: 13px;
}

.scene-list .scene-item:hover, .list-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.scene-list .scene-item.active, .list-item.active {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

/* Center Column */
.center-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    margin: 10px 5px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.center-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: stretch;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255,255,255,0.10); /* translúcido */
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    border-radius: 20px 20px 0 0;
    overflow: visible;
}

.center-header h2 {
    color: #ffffff;
    font-size: 18px;
    font-weight: 300;
    min-height: 22px;
}

#current-project-title:empty { display: none; }
/* Estilos para workspace de proyectos (centro) */
#projects-center-root{ display:flex; flex-direction:column; gap:16px; }
.proj-actions .topbar-btn{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.95);
  padding: 8px 12px;
  border-radius: 10px;
  backdrop-filter: blur(8px) saturate(120%);
  transition: all .18s ease;
}
.proj-actions .topbar-btn:hover{ background: rgba(255,255,255,0.18); transform: translateY(-1px); }
.proj-actions .topbar-btn i{ margin-right:6px; }

/* Forzar estilo moderno en los botones de acciones del workspace de Proyectos */
#projects-center-root .proj-actions button{
  appearance: none; -webkit-appearance: none; outline: none;
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  color: rgba(255,255,255,0.95) !important;
  height: 36px; min-width: 120px; padding: 0 12px;
  border-radius: 10px; font-weight: 600; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  backdrop-filter: blur(8px) saturate(120%);
  transition: all .18s ease;
}
#projects-center-root .proj-actions button:hover{ background: rgba(255,255,255,0.18) !important; transform: translateY(-1px); }

/* Botones modernos reutilizables (incluye los de Proyecto actual) */
.topbar-btn{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.95);
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(8px) saturate(120%);
  transition: all .18s ease;
  height: 36px;
  min-width: 110px;
  justify-content: center;
  box-sizing: border-box;
}
.topbar-btn:hover{ background: rgba(255,255,255,0.18); transform: translateY(-1px); }
.topbar-btn:active{ transform: translateY(0); }
.topbar-btn i{ margin-right:6px; }

/* Botón abrir/eliminar en tarjetas recientes (alineado con topbar-btn) */
.pw-open-item, .pw-remove-item{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.95);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  backdrop-filter: blur(8px) saturate(120%);
  transition: all .18s ease;
}
.pw-open-item:hover, .pw-remove-item:hover{ background: rgba(255,255,255,0.18); transform: translateY(-1px); }
.pw-remove-item{ min-width: 36px; width: 36px; padding: 0; }

/* Asegurar igualdad de los botones de Proyecto actual */
#projects-center-root .current-card .topbar-btn{ min-width: 120px; }

/* Layout de Proyectos (alineado y alturas consistentes) */
#projects-center-root .pw-split{ min-height: calc(100vh - 220px); align-items: stretch; }
#projects-center-root .left-col > div{ margin-bottom: 0; }
#projects-center-root h3{ margin:6px 0 10px; }

#projects-center-root .current-card,
#projects-center-root .project-card{
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  padding: 14px;
}

#projects-center-root .pw-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; }
#projects-center-root #pw-recents .pw-grid{ grid-template-columns: 1fr; }
#projects-center-root .project-card{ width:100%; }
#projects-center-root .current-card{ width:100%; }

/* Panel derecho (Crifloo) a altura total con márgenes simétricos */
#projects-center-root .right-col .card-crifloo{
  height: 100% !important;
  min-height: calc(100vh - 220px) !important;
  margin: 0;
  border-radius: 0;
}

/* Imagen del hero: escalar con margen de seguridad y responsive */
#projects-center-root .right-col .crifloo-hero-bg{
  background-position: right 16px center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important; /* garantiza que no se corte */
}

/* Ocultar título redundante en workspace Proyectos */
#projects-workspace .workspace-title{ display: none; }

.toolbar {
    display: flex;
    flex-wrap: nowrap;            /* una sola fila */
    justify-content: center;      /* centrado */
    align-items: center;
    gap: 8px;                     /* espacio compacto entre botones */
    width: 100%;
    overflow: visible;            /* evita recorte visual en hover, sin barra */
    white-space: nowrap;          /* garantizar una sola fila */
}

/* Split superior: izquierda proyectos, centro botones, derecha tuerca */
.topbar-split{ display:flex; width:100%; align-items:center; }
.top-left,.top-right{ width:96px; display:flex; align-items:center; }
.top-left{ justify-content:flex-start; }
.top-right{ justify-content:flex-end; }
.top-center{ flex:1; display:flex; align-items:center; justify-content:center; }
.icon-btn{ background: rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); color:#fff; height:36px; width:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.icon-btn:hover{ background: rgba(255,255,255,0.18); }

/* topbar antigua eliminada */

.toolbar button {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
    height: 36px;                 /* tamaño compacto */
    width: 36px;                  /* cuadrado para iconos */
    min-width: 36px;
    padding: 0;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;              /* iconos ligeramente más pequeños */
    transition: all 0.2s ease;
    position: relative;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.toolbar button:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    transform: translateY(-1px);
}

.toolbar button.active {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.toolbar button:hover::after {
    display: none; /* desactivar tooltip para evitar "temblor" y mini-scroll */
}

.editor-area {
    flex: 1;
    position: relative;
    overflow: hidden;
}

/* Fondo fotográfico opcional bajo la hoja (vidrio) */
.editor-area::before{
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--editor-bg, none); /* setéalo con: document.querySelector('.editor-area').style.setProperty('--editor-bg', 'url(\'assets/tu-fondo.jpg\')'); */
    background-size: cover;
    background-position: center;
    opacity: 0.6; /* más tenue para dejar protagonismo a la hoja */
    z-index: 0;
}

.workspace {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
    pointer-events: none;
}

.workspace.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.workspace-content {
    height: 100%;
    padding: 30px;
    overflow-y: auto;
}

.workspace-title {
    color: #ffffff;
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 30px;
    text-align: center;
}

/* Ocultar títulos redundantes de secciones (ganar espacio vertical) */
.workspace-title{ display: none !important; }

/* Script Editor Styles */
.script-editor-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: transparent; /* dejar ver el fondo (vidrio) */
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Header del editor con vidrio sutil */
.script-editor-container .editor-header{
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    padding: 15px 25px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    display: flex;
    justify-content: center;
    align-items: center;
}

.editor-info {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center; /* centrar el chip y la info de página */
}

/* Ocultar contador de página en el header del editor (solo chip centrado) */
.editor-info .page-info{ display: none !important; }

.page-info {
    color: #6c757d;
    font-size: 14px;
    font-weight: 500;
}

/* Indicador animado con degradado suave (sin resplandor) */
.element-chip{
    /* Neumórfico plano (sin bisel): fondo suave y doble sombra opuesta */
    background: rgba(255,255,255,0.22);
    color: #2b3b4b;
    padding: 8px 18px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 700;
    min-width: 96px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.25);
    position: relative;
    backdrop-filter: blur(2px) saturate(120%);
    -webkit-backdrop-filter: blur(2px) saturate(120%);
    box-shadow:
      8px 8px 16px rgba(0,0,0,0.12),   /* sombra inferior-derecha */
      -8px -8px 16px rgba(255,255,255,0.45); /* luz superior-izquierda */
}

.element-chip::before{
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.45), /* highlight mínimo arriba */
    inset 0 -2px 4px rgba(0,0,0,0.06);      /* sombra mínima abajo */
}

/* Zoom Controls */
.zoom-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.05);
    padding: 6px 12px;
    border-radius: 25px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.zoom-controls button {
    background: none;
    border: none;
    color: #495057;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-size: 14px;
}

.zoom-controls button:hover {
    background: rgba(0, 123, 255, 0.1);
    color: #007bff;
    transform: scale(1.05);
}

.zoom-controls button:active {
    transform: scale(0.95);
}

#zoom-level {
    font-size: 12px;
    font-weight: 600;
    color: #495057;
    min-width: 45px;
    text-align: center;
    user-select: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#element-cycle {
    background: none;
    border: none;
    color: #495057;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-size: 14px;
    margin-right: 10px;
}

#element-cycle:hover {
    background: rgba(0, 123, 255, 0.1);
    color: #007bff;
}

.script-editor {
    flex: 1;
    padding: 40px;
    background: transparent;  /* usa el vidrio definido en #script-editor */
    outline: none;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.script-editor-container {
    position: relative;
}

/* Páginas US Letter REALES según estándar Final Draft */
/* (El layout de página del editor vive en css/continuous-script-editor.css).
   Eliminado aquí para evitar conflictos de proporción. */

/* SISTEMA DE NUMERACIÓN DE PÁGINA: definido en continuous-script-editor.css */

/* Editor continuo tiene sus propios estilos locales; evitar colisiones globales */
.script-line {
    position: relative;
    z-index: 2;
    background: transparent;
}

.script-line.scene-heading { margin: 0; }

.script-line.character { margin: 0; }

.script-line.dialogue { width: auto; margin: 0; }

.script-line.parenthetical { margin: 0; }

.script-line.transition { margin: 0; }

.script-line.action { margin: 0; }

/* Right Column */
.right-column {
    width: 350px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    border-radius: 20px 0 0 20px;
    margin: 10px 10px 10px 0;
}

/* quitar encabezado del asistente */

.right-content {
    flex: 1;
    padding: 20px;
    overflow: hidden;
    position: relative;
}

.action-section {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.action-section h3 {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: 400;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 400;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 12px 15px;
    color: #ffffff;
    font-size: 14px;
    backdrop-filter: blur(10px);
}

/* Storyboard modal: asegurar scroll y capa de selección correctamente alineados */
.field-input[aria-label="Descripción de escena"]{
  overflow: auto;
  position: relative;
}

/* Columna centrada para selector de rangos tipo página */
.sb-text-col{
  max-width: 62ch;
  width: auto;
}

/* ===== Glass Modal Theme (aplicado a modales existentes sin cambiar lógica) ===== */
#scene-modal.modal-overlay,
#character-modal.modal-overlay,
#location-modal.modal-overlay,
#scene-focus-modal.modal-overlay{
  position: fixed;
  inset: 0;
  display: none; /* controlado por JS existente */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  z-index: 10000;
}

/* Mostrar cuando ModalManager añade la clase 'active' */
#scene-modal.modal-overlay.active,
#character-modal.modal-overlay.active,
#location-modal.modal-overlay.active,
#scene-focus-modal.modal-overlay.active{
  display: flex;
}

#scene-modal .modal,
#character-modal .modal,
#location-modal .modal,
#scene-focus-modal .modal{
  width: 880px;
  max-width: 95vw;
  max-height: 95vh;
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  border-top: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(12px);
  color: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  overflow: hidden;
}

/* Tabs para modales (unificados estilo glass) */
#character-modal .modal-tabs {
  display: flex;
  gap: 8px;
  padding: 8px 0 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 12px;
}
#character-modal .modal-tab {
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.06);
  color: #fff;
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
}
#character-modal .modal-tab.active {
  border-color: rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.25);
  font-weight: 800;
}
#character-modal .modal-tab-panels { display: block; }
#character-modal .modal-tab-panel { display: none; }
#character-modal .modal-tab-panel.active { display: block; }

/* Layout limpio para modal de Personaje */
#character-modal .char-grid { display: grid; gap: 12px; align-items: start; }
#character-modal .cols-2 { grid-template-columns: 260px 1fr; }
#character-modal .cols-3 { grid-template-columns: 1fr 1fr 1fr; }
#character-modal .cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
#character-modal .full { grid-column: 1 / -1; }
#character-modal .img-card { border:1px solid rgba(255,255,255,0.22); background:rgba(255,255,255,0.06); border-radius:12px; padding:10px; display:flex; align-items:center; justify-content:center; min-height:220px; }
#character-modal .section-label { font-weight:800; opacity:.9; margin-top:6px; }

/* Subgrilla de campos para aprovechar espacio */
#character-modal .form-grid { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
#character-modal .span-2 { grid-column: 1 / -1; }

/* Quitar gradiente y bordes "pesados" del header del modal para igualdad con storyboard */
#character-modal .modal-header { 
  background: transparent !important; 
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}

/* Tono y alineación de campos dentro del modal */
#character-modal .modal input,
#character-modal .modal select,
#character-modal .modal textarea { 
  background: rgba(255,255,255,0.06) !important; 
  border: 1px solid rgba(255,255,255,0.22) !important; 
  color: #fff; 
}

#character-modal .modal-content { padding: 16px 18px; }


#scene-modal .modal-header,
#character-modal .modal-header,
#location-modal .modal-header,
#scene-focus-modal .modal-header{
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#scene-modal .modal-content,
#character-modal .modal-content,
#location-modal .modal-content,
#scene-focus-modal .modal-content{
  flex: 1;
  overflow: auto;
  padding: 12px 16px;
  display: block;
}

#scene-modal .modal-actions,
#character-modal .modal-actions,
#location-modal .modal-actions,
#scene-focus-modal .modal-actions{
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.18);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

#character-modal .glass-modal{ /* compat con clase ya existente */
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(12px);
  color: #fff;
}

/* ===== Unificación visual interna (inputs, labels, botones) ===== */
#scene-modal .modal input,
#scene-modal .modal textarea,
#scene-modal .modal select,
#character-modal .modal input,
#character-modal .modal textarea,
#character-modal .modal select,
#location-modal .modal input,
#location-modal .modal textarea,
#location-modal .modal select{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  outline: none;
}

#scene-modal .modal label,
#character-modal .modal label,
#location-modal .modal label{
  color: rgba(255,255,255,0.85);
  font-weight: 700;
  font-size: 12px;
}

#scene-modal .modal .modal-header h3,
#character-modal .modal .modal-header h3,
#location-modal .modal .modal-header h3{
  font-weight: 800;
  color: #fff;
}

#scene-modal .modal .modal-actions .btn,
#character-modal .modal .modal-actions .btn,
#location-modal .modal .modal-actions .btn{
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.06);
  color: #fff;
  transition: background .2s ease, transform .15s ease;
}

#scene-modal .modal .modal-actions .btn.btn-primary,
#character-modal .modal .modal-actions .btn.btn-primary,
#location-modal .modal .modal-actions .btn.btn-primary{
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.25);
  font-weight: 800;
}

/* Cerrar (icono) estilo glass limpio */
#scene-modal .modal .modal-close,
#character-modal .modal .modal-close,
#location-modal .modal .modal-close{
  background: transparent;
  border: none;
  color: #fff;
  opacity: .9;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, transform .15s ease;
}

#scene-modal .modal .modal-close:hover,
#character-modal .modal .modal-close:hover,
#location-modal .modal .modal-close:hover{
  background: rgba(255,255,255,0.12);
  transform: scale(1.05);
}

/* Cerrar (icono) estilo glass */
#scene-modal .modal .modal-close,
#character-modal .modal .modal-close,
#location-modal .modal .modal-close{
  background: transparent;
  border: none;
  color: #fff;
  opacity: .85;
  cursor: pointer;
}

/* Espaciado uniforme de formularios dentro de modales */
#scene-modal .modal .form-group,
#character-modal .modal .form-group,
#location-modal .modal .form-group{
  margin-bottom: 12px;
}

/* Quitar fondos blancos heredados (fidelidad al glass) */
#scene-modal .modal .modal,
#character-modal .modal .modal,
#location-modal .modal .modal{
  background: transparent;
}

/* Selector de rangos por tokens (Storyboard modal) */
.sb-token {
  white-space: pre;
  position: relative;
  display: inline-block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.sb-token--sel {
  background: var(--sb-sel-bg, rgba(80,140,255,0.35));
}

/* Rango de otros planos: color tenue para referencia, no tapa la selección actual */
.sb-token--other {
  background-image: none;
}

.sb-token--sel-first::before {
  content: '[';
  position: absolute;
  left: -6px;
  top: 0;
  color: rgba(255, 255, 255, 0.85);
  z-index: 2;
}

.sb-token--sel-last::after {
  content: ']';
  position: absolute;
  right: -6px;
  top: 0;
  color: rgba(255, 255, 255, 0.85);
  z-index: 2;
}

.sb-token--edge-focus {
  outline: 1px solid rgba(255, 255, 255, 0.7);
  outline-offset: 1px;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.btn-primary{
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  color: rgba(255,255,255,0.95) !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  transition: all .18s ease;
  box-shadow: none !important;
}
.btn-primary:hover{
  background: rgba(255,255,255,0.18) !important;
  transform: translateY(-1px);
  box-shadow: none !important;
}

/* Loading and Notification Styles */
.loading-indicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 20px 30px;
    border-radius: 15px;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 15px;
}

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 15px 25px;
    border-radius: 12px;
    z-index: 10000;
    max-width: 400px;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.notification.success { background: rgba(40, 167, 69, 0.9); }
.notification.error { background: rgba(220, 53, 69, 0.9); }
.notification.warning { background: rgba(255, 193, 7, 0.9); color: #000; }

/* OpenAI Integration Styles */
.ai-chat-container {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    top: 220px; /* espacio para susurros */
    display: flex;
    flex-direction: column;
    background: transparent;
    border: none;
    border-radius: 12px;
    backdrop-filter: none;
    box-shadow: none;
}

/* Whispers glass panel */
#ai-whispers-container.ai-whispers{
    position: relative;
    height: 180px;
    border-radius: 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.18);
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18) inset; /* solo interna, más sutil */
    backdrop-filter: blur(14px);
    padding: 10px 10px 6px;
    pointer-events: auto;
}
#ai-whispers-container.ai-whispers::before{
    /* Onda radial difusa animada */
    content: "";
    position: absolute;
    inset: -25%;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.08) 28%, rgba(255,255,255,0.03) 52%, transparent 70%);
    filter: blur(10px);
    animation: whisperPulse 6s ease-in-out infinite;
    opacity: 0.9;
}
#ai-whispers-container.ai-whispers::after{
    /* Capa humo sutil */
    content: "";
    position: absolute;
    inset: -40%;
    background: conic-gradient(from 0deg, rgba(255,255,255,0.06), rgba(255,255,255,0.0) 40%, rgba(255,255,255,0.06) 70%, rgba(255,255,255,0.0));
    filter: blur(22px);
    animation: smokeDrift 18s linear infinite;
    mix-blend-mode: screen;
    opacity: 0.5;
}
.whisper-item{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: transparent; border: none; }
.whisper-item.past{ 
    background: transparent;
    opacity: 0.9;
}
.whisper-text{
    max-width: 88%;
    text-align: center;
    color: #f5f7fa;
    font-size: 13px;
    line-height: 1.5;
    text-shadow: 0 2px 10px rgba(0,0,0,0.35);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s ease, transform .3s ease;
}
.whisper-text.show{ opacity: 1; transform: translateY(0); }

@keyframes whisperPulse {
    0% { transform: scale(1) translate(0,0); opacity: 0.8; }
    50% { transform: scale(1.15) translate(0,0); opacity: 1; }
    100% { transform: scale(1) translate(0,0); opacity: 0.8; }
}
@keyframes smokeDrift {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.05); }
    100% { transform: rotate(360deg) scale(1); }
}

.ai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 8px 8px 60px 8px; /* dejar espacio para la barra inferior */
    background: transparent;
    border-radius: 12px;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-message {
    margin-bottom: 15px;
    padding: 12px 15px;
    border-radius: 12px;
    max-width: 85%;
}

.ai-message.user {
    align-self: flex-end;
    background: linear-gradient(135deg, rgba(0,180,219,0.55), rgba(0,131,176,0.55));
    border: 1px solid rgba(255,255,255,0.25);
    text-align: left;
    color: #fff;
    padding: 8px 10px;
    border-radius: 12px 12px 4px 12px;
    max-width: 85%;
    font-size: 12.5px;
}

.ai-message.assistant {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255,255,255,0.18);
    color: #f4f7fb;
    padding: 8px 10px;
    border-radius: 12px 12px 12px 4px;
    max-width: 85%;
    font-size: 12.5px;
}

/* Tarjeta de propuestas IA (en el feed del chat) */
.ai-suggestion-card{ border:1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.06); border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:8px; }
.ai-suggestion-card .header{ display:flex; justify-content:space-between; align-items:center; font-weight:600; color:#fff; }
.ai-suggestion-card .changes{ display:flex; flex-direction:column; gap:8px; }
.ai-suggestion-item{ border:1px solid rgba(255,255,255,0.18); border-radius:8px; padding:8px; background: rgba(0,0,0,0.15); }
.ai-suggestion-item .meta{ font-size:12px; opacity:0.8; margin-bottom:4px; }
.ai-suggestion-item .diff{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size:12px; white-space:pre-wrap; }
.ai-suggestion-item .actions{ display:flex; gap:6px; margin-top:6px; }
.ai-suggestion-item .actions .btn-accept{ background: rgba(46,204,113,0.25); border-color: rgba(46,204,113,0.6); }
.ai-suggestion-item .actions .btn-reject{ background: rgba(231,76,60,0.25); border-color: rgba(231,76,60,0.6); }
/* Espaciado extra para que el chat no se cruce con el compositor */
#ai-messages.ai-messages, .ai-messages{ padding-bottom: 120px; overflow-y:auto; }
.ai-composer{ position: sticky; bottom: 0; z-index: 3; }

.ai-input-container {
    position: absolute;
    left: 8px; right: 8px; bottom: 8px;
    display: block;
}

.ai-composer{
    width: 100%;
    min-height: 44px;
    max-height: 160px;
    padding: 8px 10px 40px; /* espacio inferior para acciones */
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    position: relative;
}

textarea.ai-input{
    width: 100%;
    resize: none;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-size: 13px;
    line-height: 1.4;
}
textarea.ai-input::placeholder{ color: rgba(255,255,255,0.55); }

.composer-actions{
    position: absolute; left: 8px; right: 8px; bottom: 6px;
    display:flex; align-items:center; justify-content:space-between;
}
.composer-left{ display:flex; gap:6px; align-items:center; }
.composer-right{ display:flex; gap:6px; align-items:center; }

/* Etiquetas de contexto (drag & drop) */
.ai-context-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.context-tag{ display:flex; align-items:center; gap:6px; padding:4px 8px; border:1px dashed rgba(255,255,255,0.25); border-radius:8px; color:#e8f5ff; font-size:12px; background: rgba(255,255,255,0.06); }
.context-tag::before{ content: attr(data-prefix); color: rgba(255,255,255,0.6); margin-right:4px; }
.context-tag.scene{ border-color: rgba(86, 156, 214, 0.5); }
.context-tag.character{ border-color: rgba(197, 134, 192, 0.5); }
.context-tag .remove-tag{ background: transparent; border:none; color:#fff; cursor:pointer; font-size:14px; padding:0 2px; }

/* Feedback de drop */
#ai-composer.drag-over{ outline: 2px dashed rgba(86,156,214,0.6); outline-offset: 2px; }

/* Sugerencias IA en el editor */
.ai-change-line{ position: relative; background: linear-gradient(90deg, rgba(76,175,80,0.10), rgba(76,175,80,0.00)); }
.ai-inline-actions{ position:absolute; right:8px; top:50%; transform: translateY(-50%); display:flex; gap:6px; }
.ai-inline-actions .micro-btn{ padding:3px 6px; font-size:11px; border:1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.06); border-radius:6px; }
.ai-inline-actions .micro-btn:first-child{ background: rgba(46,204,113,0.25); border-color: rgba(46,204,113,0.6); }
.ai-inline-actions .micro-btn:nth-child(2){ background: rgba(231,76,60,0.25); border-color: rgba(231,76,60,0.6); }
/* Diff visual inline (inserciones/eliminaciones) */
.ai-diff-insert{ background: rgba(76,175,80,0.20); border-radius:2px; }
.ai-diff-delete{ background: rgba(239,68,68,0.22); text-decoration: line-through; border-radius:2px; }
/* para líneas completas insertadas/eliminadas */
.ai-line-insert{ background: rgba(76,175,80,0.12); outline: 1px dashed rgba(76,175,80,0.5); }
.ai-line-delete{ background: rgba(239,68,68,0.12); outline: 1px dashed rgba(239,68,68,0.5); }
/* Overlay visual de rango multi-bloque */
.ai-range{ position: relative; }
.ai-range::before{ content:""; position:absolute; left:-10px; top:2px; bottom:2px; width:4px; background: linear-gradient(180deg, rgba(46,204,113,0.7), rgba(46,204,113,0.2)); border-radius:4px; }
.ai-range-badge{ position:absolute; left:-10px; transform: translateX(-100%); top: -8px; background: rgba(46,204,113,0.85); color:#0e1b14; font-size:10px; padding:2px 6px; border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,0.25); white-space:nowrap; }
.ai-range-badge .micro-btn{ margin-left:6px; padding:2px 6px; font-size:10px; border:1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); border-radius:6px; cursor:pointer; }
.ai-range-badge .micro-btn{ background: rgba(46,204,113,0.25); border-color: rgba(46,204,113,0.6); }

.ai-send-btn {
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 6px;
    width: 22px;
    height: 22px;
    color: rgba(255,255,255,0.95);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px) saturate(120%);
    transition: all 0.2s ease;
}

.ai-send-btn:hover {
    background: rgba(255,255,255,0.18);
    transform: translateY(-1px);
}

/* Micro acciones estilo Cursor */
.micro-btn{
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  width: 28px; height: 28px;
  border-radius: 8px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: all .15s ease;
}
.micro-btn:hover{ background: rgba(255,255,255,0.12); transform: translateY(-1px); }

/* ESTILOS FALTANTES PARA ELEMENTOS USADOS EN HTML */
/* --- Columna izquierda reactiva (V6) --- */
.scene-list .scene-item, .character-list .character-item{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:8px; transition: background-color .2s ease, transform .2s ease;
  position: relative; cursor:pointer; background: rgba(255,255,255,0.08);
}
.scene-list .scene-item:hover, .character-list .character-item:hover{ background-color: rgba(255,255,255,0.15); transform: translateX(4px); }
.scene-list .scene-item.active, .character-list .character-item.active{ background-color: rgba(255,255,255,0.2); font-weight:600; }
.scene-list .scene-item::after, .character-list .character-item::after{ content:''; position:absolute; left:8px; right:8px; bottom:2px; height:2px; background: var(--accent-color, rgba(255,255,255,.9)); opacity:0; transition: opacity .2s ease; }
.scene-list .scene-item:hover::after, .character-list .character-item:hover::after, .scene-list .scene-item.active::after, .character-list .character-item.active::after{ opacity:.9; }
.scene-number{ opacity:.85; min-width:28px; display:inline-block; }
.scene-title{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-box {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: white;
    font-size: 14px;
    margin-bottom: 15px;
}

.search-box::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.search-box:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.15);
}

/* Grid Layouts for Workspaces */
.scenes-grid,
.characters-grid,
.locations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

.scene-card,
.character-card,
.location-card {
    background: rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

/* Acento de color sincronizado por escena (usamos CSS var --scene-color) */
.scene-card{ border-left: 6px solid var(--scene-color, rgba(255,255,255,0.22)); background-color: var(--scene-color, rgba(255,255,255,0.08)); }

.scene-card.dragging {
    opacity: 0.6;
    transform: scale(0.98);
}

.scene-card.placeholder {
    background: rgba(255,255,255,0.25);
    border: 2px dashed rgba(255,255,255,0.6);
    box-shadow: none;
}

.scene-card:hover,
.character-card:hover,
.location-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    border-color: #667eea;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.card-title {
    font-weight: 600;
    color: #333;
    font-size: 16px;
}

.card-meta {
    font-size: 12px;
    color: #666;
}

.card-content {
    color: #555;
    font-size: 14px;
    line-height: 1.5;
}

.card-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.scene-card:hover .card-actions,
.character-card:hover .card-actions,
.location-card:hover .card-actions {
    opacity: 1;
}

.card-btn {
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.22);
    color: rgba(255,255,255,0.95);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.card-btn:hover {
    background: rgba(255,255,255,0.18);
}

/* Estilos para los botones de proyecto INDIVIDUAL (dentro de cada proyecto) */
.project-item .project-actions {
    display: flex;
    gap: 5px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.project-item:hover .project-actions {
    opacity: 1;
}

.project-item .project-actions button {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 11px;
}

.project-item .project-actions button:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    transform: scale(1.1);
}

/* Characters grid */
.characters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.character-card {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  backdrop-filter: blur(4px);
}
.character-card .card-cover { height: 140px; background: rgba(255,255,255,0.15); display:flex; align-items:center; justify-content:center; }
.character-card .card-cover img { width: 100%; height: 100%; object-fit: cover; display:block; }
.character-card .cover-placeholder { color:#555; font-size: 12px; }
.character-card .card-body { padding: 10px 12px; }
.character-card .card-title { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.character-card .card-sub { font-size: 12px; opacity: 0.8; }
.character-card .card-actions { display:flex; gap:8px; padding: 8px 12px 12px; }
.character-card .card-btn { background: rgba(255,255,255,0.85); border: none; border-radius: 8px; padding: 6px 8px; cursor: pointer; }
.character-card .card-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.18); }

/* Avatar en lista izquierda de actores */
.left-column .character-item {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
}
.left-column .character-item .character-avatar { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,0.6); display:flex; align-items:center; justify-content:center; font-weight: 700; color:#333; }
.left-column .character-item .character-avatar img { width: 100%; height: 100%; object-fit: cover; display:block; }
.left-column .character-item .character-avatar.placeholder { font-size: 12px; }

/* Locations grid */
.locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.location-card { display:flex; flex-direction:column; border-radius:12px; overflow:hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.12); backdrop-filter: blur(4px); background: rgba(255,255,255,0.8); }
.location-card .card-cover { height: 140px; background: rgba(255,255,255,0.15); display:flex; align-items:center; justify-content:center; }
.location-card .card-cover img { width:100%; height:100%; object-fit: cover; display:block; }
.location-card .cover-placeholder { color:#555; font-size: 12px; }
.location-card .card-body { padding: 10px 12px; }
.location-card .card-title { font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.location-card .card-sub { font-size: 12px; opacity: 0.8; }
.location-card .card-actions { display:flex; gap:8px; padding: 8px 12px 12px; }
.location-card .card-btn { background: rgba(255,255,255,0.85); border:none; border-radius:8px; padding: 6px 8px; cursor:pointer; }
.location-card .card-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.18); }

/* Debug visual de Locaciones eliminado: front vaciado */

/* ===== ZOOM INDIVIDUAL POR PÁGINA (ARQUITECTURA ORIGINAL) ===== */
/* Cada página se escala individualmente con transform: scale() */
/* mover transiciones de página a CSS del editor para evitar colisión */
/* .script-page { transition: transform 0.1s ease; transform-origin: center top; } */

.pages-layer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px; /* separador entre páginas equivalente al margin */
  width: 100%;
  transform-origin: center top;
}

/* Indicador de "pensando" con monstruo peludo */
.thinking-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #6b7280;
  font-style: italic;
}

.monster-silhouette {
  width: 24px;
  height: 24px;
  position: relative;
  background: #6b7280;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  animation: monsterFloat 2s ease-in-out infinite;
}

.monster-silhouette::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 6px;
  width: 4px;
  height: 4px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 6px 0 0 #ffffff;
  animation: monsterEyes 1.5s ease-in-out infinite;
}

.monster-silhouette::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 3px;
  background: #4b5563;
  border-radius: 0 0 4px 4px;
  animation: monsterMouth 2s ease-in-out infinite;
}

/* --- Rediseño Workspace de Arte --- */
#art-workspace .workspace-content{ display:flex; flex-direction:column; gap:16px; }
.art-grid{ display:grid; grid-template-columns: repeat(2, minmax(380px, 1fr)); gap:16px; align-items:start; }
@media (max-width: 1200px){ .art-grid{ grid-template-columns: 1fr; } }
.art-scene-card{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.art-scene-card-header{
  font-weight: 700;
  font-size: 14px;
  opacity: 0.9;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 8px;
}
.art-category{ margin-top: 8px; }
.art-category-title{
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.art-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(0,0,0,0.10);
  margin-bottom: 6px;
  font-size: 13px;
}
.art-item-name{ flex-grow: 1; }
.art-item-notes{
  font-size: 12px;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

/* Chips minimalistas para ítems de arte */
.art-tiles{ display:flex; flex-wrap:wrap; gap:10px; }
.art-tile{ display:flex; align-items:center; gap:10px; background: rgba(255,255,255,0.08); border:2px solid transparent; border-radius:10px; padding:8px 10px; transition: all .18s ease; }
.art-tile:hover{ border-color:#667eea; box-shadow: 0 8px 30px rgba(0,0,0,0.15); }
.art-tile .thumb{ width:42px; height:42px; background:#1f2937; background-size:cover; background-position:center; border-radius:8px; flex:0 0 auto; }
.art-tile .name{ font-weight:600; opacity:.95; }
.art-tile .actions{ display:flex; gap:6px; }
.art-tile.suggested{ border-style: dashed; border-color: rgba(102,126,234,0.6); background: rgba(255,255,255,0.06); }

/* UI profesional Arte: header y filas */
.art-scene-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.art-scene-header .hdr-title{ font-weight:700; font-size:14px; opacity:.95; }
.art-scene-header .hdr-actions{ display:flex; gap:6px; }
.ai-enhance-btn{ background: rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.22); color:#fff; height:28px; width:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .18s ease; }
.ai-enhance-btn:hover{ background: rgba(255,255,255,0.18); transform: translateY(-1px); }

.art-items-container{ display:flex; flex-direction:column; gap:8px; }
.art-category-block{ background: rgba(0,0,0,0.10); border:1px solid rgba(255,255,255,0.18); border-radius:10px; padding:8px; position:relative; z-index:0; }
.art-category-title{ font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.6px; color: rgba(255,255,255,0.8); margin-bottom:8px; }
.art-item-row{ display:grid; grid-template-columns: 22px 48px 1fr 64px minmax(120px,1fr) 128px 28px; gap:8px; align-items:center; padding:8px 10px; border-radius:10px; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15); min-height:52px; position:relative; }
.drag-handle{ cursor: grab; color: rgba(255,255,255,0.6); user-select:none; display:inline-flex; align-items:center; justify-content:center; }
.drag-handle:active{ cursor: grabbing; }
.art-item-row input, .art-item-row select{ min-width:0; }
.art-item-row .micro-btn{ justify-self: end; }
.art-thumb{ width:44px; height:44px; background: rgba(255,255,255,0.12); background-size: cover; background-position: center; border-radius:8px; border:1px dashed rgba(255,255,255,0.35); position:relative; cursor:pointer; }
.art-thumb.empty::before{ content:'+'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.85); font-weight:700; font-size:18px; }
.art-thumb:hover{ border-style: solid; background: rgba(255,255,255,0.16); }
.art-item-status{ width: 120px; min-width: 120px; }
.art-item-qty{ width:64px; }
.art-items-container{ display:flex; flex-direction:column; gap:8px; }
.art-category-body{ display:block; padding-top:4px; }
.art-category-block{ position:relative; overflow:hidden; }
.art-category-title{ display:flex; align-items:center; gap:6px; }
.art-category-title .spacer{ flex:1 1 auto; }
.art-category-title .micro-btn{ margin-left:auto; }
.cat-label{ font-weight:700; letter-spacing:.6px; }
.cat-label-input{ background: rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,0.35); color:#fff; border-radius:6px; padding:4px 6px; font-size:12px; }
.dragging-item{ opacity: .6; }
.dragging-cat{ opacity: .6; }
.art-category-body.drop-over{ outline: 2px dashed rgba(255,255,255,0.45); outline-offset: 2px; border-radius:10px; }
.art-category-title.drop-over{ outline: 2px dashed rgba(255,255,255,0.45); outline-offset: 2px; border-radius:8px; }
/* responsive: una columna en pantallas angostas */
@media (max-width: 1100px){
  .art-items-container{ grid-template-columns: 1fr; }
  .art-category-body{ grid-template-columns: 1fr; }
}

/* Evitar solapamiento del texto sugerido */
.art-category-block .art-item-row::after{ content:''; position:absolute; right:6px; top:6px; bottom:6px; width:0; pointer-events:none; }

/* Recortar textos largos dentro de inputs */
.art-item-name, .art-item-notes{ text-overflow:ellipsis; overflow:hidden; }
.art-category-title{ cursor: pointer; }
.art-category-body{ display:block; }
.art-item-row.suggested{ border-style:dashed; opacity:.95; }
.art-item-row input,.art-item-row select{ background: rgba(0,0,0,0.15); border:1px solid rgba(255,255,255,0.22); color:#fff; border-radius:6px; padding:6px 8px; height:30px; font-size:12px; }

/* Desactivar movimientos/animaciones en Arte para evitar mareos */
#art-workspace .scene-card{ transition: none !important; }
#art-workspace .scene-card:hover{ transform: none !important; box-shadow: none !important; }
#art-workspace .ai-enhance-btn, #art-workspace .micro-btn{ transition: none !important; }
#art-workspace .ai-enhance-btn:hover, #art-workspace .micro-btn:hover{ transform: none !important; }
#art-workspace .art-item-row, #art-workspace .art-category-block, #art-workspace .art-items-container{ transition: none !important; }

/* Desactivar levantamiento (hover lift) en tarjetas de escena en todo el sistema */
.scene-card{ transition: none !important; }
.scene-card:hover{ transform: none !important; box-shadow: none !important; }


/* Micro animaciones */
@keyframes monsterFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-2px); }
}

@keyframes monsterEyes {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes monsterMouth {
  0%, 100% { transform: translateX(-50%) scaleY(1); }
  50% { transform: translateX(-50%) scaleY(0.8); }
}

/* Variante para mensajes de error */
.thinking-indicator.error .monster-silhouette {
  background: #ef4444;
  animation: monsterShake 0.5s ease-in-out infinite;
}

@keyframes monsterShake {
  0%, 100% { transform: translateX(0px); }
  25% { transform: translateX(-1px); }
  75% { transform: translateX(1px); }
}

/* Variante para mensajes de éxito */
.thinking-indicator.success .monster-silhouette {
  background: #10b981;
  animation: monsterBounce 0.6s ease-in-out infinite;
}

@keyframes monsterBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Handles DnD */
.drag-handle{ cursor: grab; color: rgba(255,255,255,0.6); user-select:none; display:inline-flex; align-items:center; justify-content:center; }
.drag-handle:active{ cursor: grabbing; }
/* Lista de escenas (columna izquierda y grilla) */
.scene-card.dragging{ opacity:.7; }
.scene-card.placeholder{ background: rgba(255,255,255,0.12); border: 2px dashed rgba(255,255,255,0.35); }
/* Hint en lista de escenas */
.scene-list-hint{ font-size:12px; opacity:.75; margin: 6px 0 8px; }
.scene-item{ position: relative; }
.scene-item .drag-handle{ margin-right:6px; opacity:.8; }
/* Indicador de drop en lista de escenas (columna izquierda) */
.scene-drop-indicator{ height: 2px; background: rgba(102,126,234,0.9); margin: 4px 0; border-radius: 1px; }
/* Refinado visual del drop-indicator para DnD por índice */
.scene-drop-indicator{ position: fixed; height:3px; background: rgba(102,126,234,0.9); border-radius:3px; box-shadow: 0 0 10px rgba(102,126,234,0.8); z-index: 9999; pointer-events:none; }
/* Ocultar salto visual del editor hasta que esté listo */
#editor-workspace .script-editor-container{ opacity:0; transition: opacity .3s ease-in-out; }
#editor-workspace.ready .script-editor-container{ opacity:1; }
/* Reemplazo del borde de foco en el contenedor editable */
#script-editor .pages-container:focus{ outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,0.15); }
/* Foco por clase (más fiable que :focus) */
#script-editor .pages-container.editor-focused{ outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,0.15); }
/* Marca gris de contexto (última línea activa cuando se pierde foco) */
.script-line.context-marker{ background: linear-gradient(90deg, rgba(189,195,199,0.12), rgba(189,195,199,0.08)) !important; transition: background-color .3s ease; }
/* Punto sutil para contexto cuando el editor no está activo */
.script-line.context-marker::after{
  content: '';
  position: absolute;
  top: 50%;
  left: -20px;
  width: 6px; height: 6px;
  background-color: rgba(255, 82, 82, 0.5);
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 8px rgba(255, 82, 82, 0.5);
}
/* Marcadores de resaltado elegantes */
/* Marcador orgánico con textura (pseudo-elemento) */
.line-highlight-marker, .line-highlight-marker-character{ position: relative; }
/* Incrustación SVG como data URI para evitar dependencias de archivo */
.line-highlight-marker::before, .line-highlight-marker-character::before{ content:''; position:absolute; left:-10px; right:-10px; top:0; bottom:0; z-index:-1; background-color:#FFEB3B; -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='20' viewBox='0 0 200 20'><g fill='%23fff'><path d='M0 8h200v4H0z M5 7h20v2H5z M40 9h15v3H40z M70 8h25v4H70z M110 7h18v3H110z M150 9h30v3H150z'/></g></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='20' viewBox='0 0 200 20'><g fill='%23fff'><path d='M0 8h200v4H0z M5 7h20v2H5z M40 9h15v3H40z M70 8h25v4H70z M110 7h18v3H110z M150 9h30v3H150z'/></g></svg>"); -webkit-mask-size:200px 100%; mask-size:200px 100%; opacity:0; transform:scaleX(0); transform-origin:left; transition: transform .4s cubic-bezier(0.1,0.7,0.6,1), opacity .4s ease; border-radius:2px; }
.line-highlight-marker-character::before{ background-color:#81D4FA; }
.line-highlight-marker.highlighted::before, .line-highlight-marker-character.highlighted::before{ opacity:.75; transform:scaleX(1); }
/* Tooltip genérico UI */
.ui-tooltip{
  position: fixed;
  z-index: 99999;
  background: rgba(20,20,30,0.95);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px;
  font-size: 12px;
  padding: 4px 8px;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* --- Arreglo del Layout del Agente de IA --- */
.ai-chat-container { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.ai-messages { flex: 1 1 auto; overflow-y: auto; padding: 8px; }
.ai-input-container { flex-shrink: 0; position: relative; }
#ai-composer { max-height: 250px; display: flex; flex-direction: column; }
#ai-context-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; max-height: 80px; overflow-y: auto; }
textarea.ai-input { max-height: 120px; overflow-y: auto; }

/* --- Blindaje de visibilidad para columna de IA --- */
.right-column { display: flex !important; flex-direction: column; }
.right-content { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }
#ai-whispers-container, .ai-chat-container { display: flex !important; visibility: visible !important; opacity: 1 !important; }
.ai-chat-container { position: relative; overflow: hidden; }
.ai-messages { flex: 1; overflow-y: auto; }
.ai-input-container { position: relative; bottom: auto; left: auto; right: auto; padding: 10px 0 0 0; }
#ai-composer { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 12px; }

/* --- Sistema de Foco y Contexto del Editor --- */
/* Asegurar visibilidad del contenedor del editor en estado ready */
#editor-workspace.loading .script-editor-container { opacity: 0; }
#editor-workspace.ready .script-editor-container { opacity: 1; transition: opacity 0.3s ease; }

/* Garantizar que el contenedor de páginas tenga altura y posicionamiento adecuados
   (el layout exacto de páginas vive en css/continuous-script-editor.css). */
#script-editor .pages-container { position: relative; min-height: 600px; outline: none; }
/* .script-page, .page { position: absolute; left: 0; right: 0; margin: 0 auto; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.08); border-radius: 8px; } */

/* Forzar color de texto visible en el editor (desactivado; definido en continuous-script-editor.css) */
/* #script-editor, #script-editor .page-content, #script-editor .script-line { color: #000; } */

/* Asegurar que el contenedor tenga altura visible para el primer pintado */
.script-editor-container { min-height: 70vh; }
#script-editor { min-height: inherit; }

#script-editor .pages-container.editor-focused {
    outline: none;
    box-shadow: 0 0 0 3px rgba(130, 177, 255, 0.25);
}

.script-line.context-marker { position: relative; }
.script-line.context-marker::after {
    content: ''; position: absolute; top: 50%; left: -22px;
    width: 8px; height: 8px;
    background-color: rgba(255, 82, 82, 0.5);
    border-radius: 50%; transform: translateY(-50%);
    box-shadow: 0 0 10px rgba(255, 82, 82, 0.5);
}

/* --- Sistema de Resaltado Orgánico --- */
.script-line {
    position: relative; /* Necesario para los pseudo-elementos */
}
.line-highlight-marker, .line-highlight-marker-character { position: relative; }
.line-highlight-marker::before, .line-highlight-marker-character::before {
    content: ''; position: absolute; left: -15px; right: -15px; top: 0; bottom: 0;
    z-index: -1; background-color: #FFEB3B;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='30' viewBox='0 0 200 30'%3E%3Cdefs%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.03 0.6' numOctaves='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='2.5'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='200' height='30' fill='white' filter='url(%23f)'/%3E%3C/svg%3E");
    mask-size: 300px 100%;
    opacity: 0; transform: scaleX(0); transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
}
.line-highlight-marker-character::before { background-color: #81D4FA; }
.script-line.highlighted::before { opacity: 0.65; transform: scaleX(1); }
.ai-chat-container{ display:flex; flex-direction:column; height:100%; overflow:hidden; }
.ai-messages{ flex:1 1 auto; overflow-y:auto; padding-bottom:10px; }
.ai-input-container{ flex-shrink:0; position:relative; }
#ai-composer{ max-height:250px; display:flex; flex-direction:column; }
#ai-context-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; max-height:80px; overflow-y:auto; }
textarea.ai-input{ max-height:120px; overflow-y:auto; }

/* === Overrides finales para el chat (garantizar compositor visible) === */
.right-content { display:flex; flex-direction:column; }
#ai-whispers-container { flex:0 0 180px; margin-bottom:16px; }
.ai-chat-container { position: relative !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; display:flex; flex-direction:column; height: calc(100% - 0px); }
.ai-messages { flex: 1 1 auto; overflow-y:auto; padding: 8px 8px 80px 8px; }
.ai-input-container { position: sticky !important; left:auto !important; right:auto !important; bottom: 0 !important; padding: 8px; }
#ai-composer { display:flex; flex-direction:column; }

/* Estilos del diseño mini de chat (coherente con el snippet pedido) */
.ai-whispers-container{ height:180px; background: rgba(255,255,255,0.05); border-radius:8px; border:1px solid rgba(255,255,255,0.12); margin-bottom:16px; padding:12px; font-size:12px; color:#cfe9ff; }
.composer{ background: rgba(255,255,255,0.08); border-radius:12px; border:1px solid rgba(255,255,255,0.18); padding:12px; position:sticky; bottom:0; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.composer-input{ width:100%; background:transparent; border:none; color:#f4fbff; font-size:14px; resize:none; min-height:44px; max-height:160px; font-family:inherit; line-height:1.5; padding:2px 0; }
.composer-input::placeholder{ color:#9fd8ea; }
.composer-controls{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,0.10); }
.micro-buttons{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.micro-btn{ width:22px; height:22px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; color:#d7f1ff; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); cursor:pointer; transition: all .12s cubic-bezier(.4,0,.2,1); }
.micro-btn:hover{ background:rgba(255,255,255,0.18); color:#ffffff; transform: translateY(-1px) scale(1.03); }
.micro-btn:active{ transform: scale(0.98); background: rgba(255,255,255,0.08); }
.micro-btn svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7; vector-effect: non-scaling-stroke; shape-rendering: geometricPrecision; }
.send-btn{ width:22px; height:22px; border-radius:6px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22); color: rgba(255,255,255,0.95); backdrop-filter: blur(8px) saturate(120%); display:inline-flex; align-items:center; justify-content:center; }
.send-btn:hover{ background: rgba(255,255,255,0.18); transform: translateY(-1px) scale(1.02); }
.send-btn:active{ transform: scale(0.98); }
.send-btn:disabled{ background: rgba(255,255,255,0.05); color:#666; cursor:not-allowed; transform:none; box-shadow:none; }
.send-btn svg{ width:14px; height:14px; }
.tag-input{ background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18); border-radius:6px; color:#eafaff; font-size:12px; padding:8px 10px; margin-bottom:8px; width:100%; font-family:inherit; }
.tag-input::placeholder{ color:#a6def0; }
.tags-container{ display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; min-height:20px; }
.tag{ background: rgba(51,199,234,0.18); border:1px solid rgba(51,199,234,0.38); color:#d4f3ff; font-size:11px; padding:2px 6px; border-radius:4px; display:flex; align-items:center; gap:4px; }
.tag-remove{ cursor:pointer; color:#d4f3ff; font-size:12px; line-height:1; }
.undo-redo-group{ display:flex; gap:2px; background: rgba(255,255,255,0.03); border-radius:6px; padding:2px; }

/* Mejorar contraste de mensajes y centrado vertical del contenido */
.message .message-content{ display:inline-flex; align-items:center; }
.message.user .message-content{ background: linear-gradient(135deg, #00b4db 0%, #0083b0 100%); color:#ffffff; }
.message.ai .message-content{ background: rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.18); color:#eafaff; }