@charset "UTF-8";
:root {
  --bg-light: #f7f7f8;
  --bg-dark: #343541;
  --container-light: #fff;
  --container-dark: #202123;
  --text-light: #000;
  --text-dark: #ececf1;
  --user-bg: #10a37f;
  --user-bg-light: #e8f5f0;
  --assistant-bg: #444654;
  --assistant-bg-light: #f7f7f8;
  --code-bg: #1e1e1e;
  --code-bg-light: #f5f5f5;
  --sidebar-light: #f7f7f8;
  --sidebar-dark: #343541;
  --border-light: #e5e5e5;
  --border-dark: #444654;
  --primary-light: #10a37f;
  --primary-dark: #0e8b6e;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg-light);color:var(--text-light);display:flex;height:100vh;font-size:14px;line-height:1.15;
  transition:background .3s,color .3s;overflow:hidden
}
body.dark{background:var(--bg-dark);color:var(--text-dark)}
.sidebar{
  width:260px;min-height:100vh;height:100vh;background:var(--sidebar-light);border-right:1px solid var(--border-light);
  display:flex;flex-direction:column;transition:background .3s,border-color .3s;min-height:0
}
body.dark .sidebar{background:var(--sidebar-dark);border-color:var(--border-dark)}
.sidebar-top{padding:12px;border-bottom:1px solid var(--border-light)}
body.dark .sidebar-top{border-color:var(--border-dark)}

/* >>> El scroll VIVE aquí (no en #chat-history) */
.sidebar-scrollable{
  flex:1;overflow-y:auto;display:flex;flex-direction:column;min-height:0;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}

.project-name{display:flex;align-items:center;gap:12px;font-weight:600;font-size:18px}
.logo-container{display:flex;align-items:center;gap:12px}
.project-icon{width:32px;height:32px;background:var(--user-bg);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}
.project-logo{max-width:240px;max-height:84px;object-fit:contain}
.brand-text{font-weight:600;font-size:18px}
.new-chat{margin-top:12px;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:6px;cursor:pointer;font-weight:500;transition:background .2s}
.new-chat:hover{background:rgba(0,0,0,.05)}
body.dark .new-chat:hover{background:rgba(255,255,255,.05)}

/* >>> Quitar el scroll interno y el flex:1 del historial para que el scroll sea de todo el panel */
.chat-history{
  /* antes: flex:1; overflow-y:auto;  */
  flex:0 0 auto;
  overflow:visible;
  padding:12px 0;
}
.chat-item{display:flex;align-items:center;gap:12px;padding:8px 12px;margin:0 12px 4px;border-radius:6px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .2s;font-size:13px}
.chat-item:hover{background:rgba(0,0,0,.05)}
body.dark .chat-item:hover{background:rgba(255,255,255,.05)}
.chat-item.active{background:rgba(0,0,0,.1)}
body.dark .chat-item.active{background:rgba(255,255,255,.05);color:var(--primary-dark)}
.chat-item-icon{color:#a5a5a5;font-size:14px}
body.dark .chat-item-icon{color:#a5a5a5}

/* Botonera 2x2 */
.history-actions{
  padding:12px;border-top:1px solid var(--border-light);
  display:grid;grid-template-columns:1fr 1fr;gap:8px
}
body.dark .history-actions{border-color:var(--border-dark)}
.history-btn{
  background:none;border:1px solid var(--border-light);border-radius:6px;padding:8px;cursor:pointer;font-size:12px;color:var(--text-light);
  transition:background .2s,border-color .2s;display:flex;flex-direction:column;align-items:center;gap:4px
}
body.dark .history-btn{border-color:var(--border-dark);color:var(--text-dark)}
.history-btn:hover{background:rgba(0,0,0,.05);border-color:var(--user-bg)}
body.dark .history-btn:hover{background:rgba(255,255,255,.05)}
.history-btn i{font-size:16px}

/* (sin .sidebar-bottom; ya no existe) */

.main-container{flex:1;display:flex;flex-direction:column;overflow:hidden}
.custom-header{padding:10px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-light);background:var(--container-light)}
body.dark .custom-header{border-color:var(--border-dark);background:var(--container-dark)}
.header-left,.header-right{display:flex;align-items:center;gap:12px}
.add-to-history-btn,.export-pdf-btn{background:var(--primary-light);color:#fff;border:none;padding:6px 12px;font-size:14px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .2s}
.add-to-history-btn:hover,.export-pdf-btn:hover{background:var(--primary-dark)}
.model-selector{display:flex;align-items:center;gap:12px;position:relative}
.model-dropdown{position:relative;flex:1 1 auto;min-width:0}
.model-button{display:flex;align-items:center;gap:8px;background:#f7f7f8;border:1px solid var(--border-light);border-radius:6px;padding:6px 12px;cursor:pointer;font-size:14px;transition:background .2s,border-color .2s;position:relative}
body .model-button:hover{background:#f0f0f2}
body.dark .model-button{background:#343541;border-color:#444654;color:#ececf1}
body.dark .model-button:hover{background:#444654}
.model-dropdown-menu{position:absolute;top:calc(100% + 8px);left:0;background:#fff;border:1px solid var(--border-light);border-radius:8px;min-width:180px;width:100%;z-index:11000;display:none;padding:6px;box-shadow:0 2px 12px rgba(0,0,0,.1);max-height:240px;overflow-y:auto}
body.dark .model-dropdown-menu{background:var(--container-dark);border-color:var(--border-dark)}
.model-dropdown.active .model-dropdown-menu{display:block}
.model-option{padding:8px 12px;border-radius:6px;cursor:pointer;transition:background .2s;font-size:14px;min-height:44px;display:flex;align-items:center}
.model-option:hover{background:#f0f0f2}
body.dark .model-option:hover{background:#444654}
.model-option.selected{background:rgba(16,163,127,.1);color:var(--user-bg);font-weight:500}
.mode-selector{display:flex;align-items:center;gap:10px}
.mode-label{font-size:14px}
.mode-buttons{display:flex;background:#f0f0f0;border-radius:6px;overflow:hidden}
body.dark .mode-buttons{background:#444654}
.mode-button{padding:6px 12px;background:none;border:none;cursor:pointer;font-size:13px;transition:background .2s,color .2s}
body.dark .mode-button{color:#a5a5a5}
.mode-button.active{background:var(--user-bg);color:#fff}
.mode-button:not(.active):hover{background:rgba(0,0,0,.05)}
body.dark .mode-button:not(.active):hover{background:rgba(255,255,255,.05)}
.options{display:flex;align-items:center;gap:16px}
.theme-toggle{background:none;border:none;cursor:pointer;color:inherit;font-size:20px;padding:6px;border-radius:6px;transition:background .2s}
.theme-toggle:hover{background:rgba(0,0,0,.05)}
body.dark .theme-toggle:hover{background:rgba(255,255,255,.05)}

.chat-container{flex:1;overflow:hidden;display:flex;flex-direction:column}
.chat{flex:1;overflow-y:auto;padding:10px 16px;display:flex;flex-direction:column;gap:6px}
.scroll-smooth{scroll-behavior:smooth}
.message{max-width:800px;margin:0 auto;padding:12px;border-radius:12px;white-space:pre-wrap;word-break:break-word;font-size:15px}
.user{align-self:flex-end;background:var(--user-bg);color:#fff;border-bottom-right-radius:2px}
body .user{background:var(--user-bg)}
body .user .message-body{color:#fff}
body.dark .user{background:var(--user-bg)}
body.dark .user .message-body{color:#fff}
.assistant{align-self:flex-start;background:var(--assistant-bg);color:#fff;border-bottom-left-radius:2px}
body:not(.dark) .assistant{background:var(--assistant-bg-light);color:var(--text-light)}
body:not(.dark) .assistant .message-body{color:var(--text-light)}
.input-area{padding:10px 16px;display:flex;border-top:1px solid var(--border-light);background:var(--container-light)}
body.dark .input-area{background:var(--container-dark);border-top-color:var(--border-dark)}
textarea{flex:1;resize:vertical;min-height:90px;max-height:200px;padding:10px 16px;border-radius:8px;border:1px solid #d9d9d9;font-family:inherit;font-size:15px;line-height:1.3;transition:border-color .2s}
body.dark textarea{background:#343541;color:#ececf1;border-color:#444654}
textarea:focus{border-color:#10a37f;outline:none}
button#send{margin-left:12px;background:#10a37f;color:#fff;border:none;padding:10px 16px;font-size:15px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}
button#send:hover{background:#0e8b6e}
button#send:disabled{background:#d9d9d9;cursor:not-allowed}
body.dark button#send:disabled{background:#444654}
pre{background:var(--code-bg);color:#f8f8f2;padding:8px;border-radius:8px;overflow-x:auto;position:relative;font-size:13px;line-height:1.3;margin-top:2px}
body:not(.dark) pre{background:var(--code-bg-light);color:#333}
code{font-family:Consolas,Monaco,monospace}
.copy-btn{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.1);color:#f8f8f2;border:none;border-radius:4px;font-size:12px;padding:4px 8px;cursor:pointer;transition:background .2s}
body:not(.dark) .copy-btn{background:rgba(0,0,0,.1);color:#333}
.copy-btn:hover{background:rgba(255,255,255,.2)}
body:not(.dark) .copy-btn:hover{background:rgba(0,0,0,.2)}
.thinking-indicator{display:inline-flex;align-items:center;gap:4px}
.thinking-indicator span{height:6px;width:6px;border-radius:50%;background:#fff;display:inline-block;animation:blink 1.4s infinite both}
body:not(.dark) .thinking-indicator span{background:#333}
.thinking-indicator span:nth-child(2){animation-delay:.2s}
.thinking-indicator span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.2}30%{opacity:1}}
.theme-indicator{position:fixed;bottom:20px;right:20px;background:rgba(0,0,0,.7);color:#fff;padding:8px 12px;border-radius:6px;font-size:14px;z-index:1000;opacity:0;transition:opacity .3s}
.theme-indicator.show{opacity:1}
.chat-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;text-align:center;min-height:0}
.chat-empty-title{font-size:22px;font-weight:600;margin-bottom:8px}
.chat-empty-subtitle{font-size:15px;color:#666;margin-bottom:12px;max-width:600px}
body.dark .chat-empty-subtitle{color:#a5a5a5}
.chat-empty-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:650px;margin-top:8px}
.chat-empty-button{background:#f0f0f0;border:1px solid #d9d9d9;border-radius:6px;padding:6px 12px;font-size:14px;cursor:pointer;transition:background .2s,border-color .2s}
body .chat-empty-button:hover{background:#e0e0e2}
body.dark .chat-empty-button{background:#444654;border-color:#555;color:#ececf1}
body.dark .chat-empty-button:hover{background:#555}
.message-content{margin-top:4px;line-height:1.3}
.message-title{font-weight:600;margin-bottom:3px;color:var(--text-light)}
body.dark .message-title{color:var(--text-dark)}
.message-body{word-wrap:break-word;overflow-wrap:break-word;line-height:1.3;margin-bottom:4px}
.notification{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(16,163,127,.9);color:#fff;padding:10px 20px;border-radius:8px;font-size:14px;z-index:1000;opacity:0;transition:opacity .3s,transform .3s;max-width:80%;text-align:center;line-height:1.3}
.notification.show{opacity:1;transform:translateX(-50%) translateY(-10px)}
.notification.error{background:rgba(220,38,38,.9)}
.notification.success{background:rgba(16,163,127,.9)}
.notification.warning{background:rgba(245,158,11,.9)}
#file-input{display:none}
.pdf-progress{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.7);color:#fff;padding:16px;border-radius:10px;font-size:14px;z-index:1001;display:none;line-height:1.3}
.pdf-progress.show{display:block}

/* Modal */
.modal{display:none;position:fixed;z-index:10000;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,.5)}
.modal-content{background-color:var(--container-light);border-radius:8px;margin:15% auto;padding:16px;border:1px solid var(--border-light);max-width:500px;text-align:center;box-shadow:0 4px 8px rgba(0,0,0,.2)}
body.dark .modal-content{background-color:var(--container-dark);border-color:var(--border-dark)}
.modal-content p{margin-bottom:0;color:var(--text-light);line-height:1.3}
body.dark .modal-content p{color:var(--text-dark)}
.close{color:#aaa;float:right;font-size:28px;font-weight:700;cursor:pointer;transition:color .2s}
.close:hover,.close:focus{color:var(--primary-light)}

/* Listas compactas */
.message-body ul,.message-body ol{padding-left:1.5em;margin:2px 0;line-height:1.2}
.message-body li{margin:1px 0;line-height:1.2}
.message-body li::marker{font-size:.95em}
.assistant .message-body ul,.assistant .message-body ol{padding-left:1.8em}
.user .message-body ul,.user .message-body ol{padding-left:.8em}
.assistant .message-body ul li::marker{content:"\2022 ";font-weight:700}
.message-body li p{display:inline;line-height:1.2}
.message-body p{margin:0 0 2px;line-height:1.2}
.message-body h1,.message-body h2,.message-body h3,.message-body h4,.message-body h5,.message-body h6{margin-top:0;margin-bottom:3px;line-height:1.2}
.message-body h4,.message-body h5,.message-body h6{margin-bottom:2px}
.message-body pre{margin:3px 0}
.message-body br{margin:1px 0}
.message-body table{margin:3px 0;border-collapse:collapse;width:100%}
.message-body td,.message-body th{padding:5px 8px;border:1px solid #ddd}
.message-body blockquote{margin:3px 0;padding-left:10px;border-left:3px solid #ddd}
.message-body hr{margin:5px 0;border:none;height:1px;background-color:#eee}

/* ===== Responsive ===== */
@supports (height: 100dvh){ body{height:100dvh} }

/* Header una sola línea escritorio */
@media (min-width:769px){
  .custom-header{flex-wrap:nowrap;gap:8px}
  .model-selector{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px}
  .options{flex-shrink:0;display:flex;align-items:center;gap:8px}
  .model-button #current-model{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
  .mode-buttons{flex-shrink:0}
}

/* Off-canvas móvil */
.sidebar-toggle{display:none}
@media (max-width:768px){
  .sidebar-toggle{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--border-light);padding:6px 10px;border-radius:6px;font-size:16px;cursor:pointer}
  body.dark .sidebar-toggle{border-color:var(--border-dark)}
  .sidebar{
    position:fixed!important;top:0;left:-280px!important;width:260px;height:100dvh;z-index:10000;transition:left .25s ease;box-shadow:0 6px 24px rgba(0,0,0,.15)
  }
  body.sidebar-open .sidebar{left:0!important}

  /* El scroll sigue siendo del panel completo */
  .sidebar-scrollable{overflow-y:auto;min-height:0;height:100%}

  .sidebar .sidebar-top{padding:8px}
  .sidebar .chat-history{margin:4px 0}

  /* Barra oscurecida detrás cuando está abierto */
  body.sidebar-open::after{
    content:"";position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:9999
  }

  /* Header corredera en móvil */
  .custom-header{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding:6px 8px}
  .custom-header::-webkit-scrollbar{display:none}
  .custom-header{scrollbar-width:none}
  .model-selector,.options{flex:0 0 auto;min-width:auto;display:inline-flex;align-items:center;gap:6px}
  .model-button,.mode-buttons,.add-to-history-btn,.export-pdf-btn,.theme-toggle,.sidebar-toggle{flex:0 0 auto;scroll-snap-align:start}
  .model-button{padding:4px 8px;font-size:12px;position:relative;z-index:101}
  .model-button i{font-size:14px}
  .model-button #current-model{font-size:12px;max-width:55vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .model-dropdown-menu{position:fixed;top:auto;right:auto;left:0;bottom:0;min-width:0;width:100%;max-height:50vh;z-index:11001;margin-top:auto;padding:12px 6px 20px;box-shadow:0 -4px 12px rgba(0,0,0,.15);border-radius:16px 16px 0 0;border:none;border-top:1px solid var(--border-light);transform:translateY(calc(100% + 8px));transition:transform .25s ease-out;will-change:transform}
  body.dark .model-dropdown-menu{border-top-color:var(--border-dark)}
  .model-dropdown.active .model-dropdown-menu{transform:translateY(0)}
  .model-option{min-height:44px;font-size:14px;justify-content:space-between;cursor:pointer}
  .model-option:hover{background:#f0f0f2}
  body.dark .model-option:hover{background:#444654}
  .mode-buttons{border-radius:6px}
  .mode-button{padding:4px 8px;font-size:12px;line-height:1.1}
  .add-to-history-btn,.export-pdf-btn{padding:4px 8px;font-size:12px;border-radius:6px;gap:6px}
  .add-to-history-btn i,.export-pdf-btn i{font-size:14px}
  .theme-toggle{padding:4px;font-size:16px}
  textarea{min-height:68px}
}

/* Restablecer en escritorio (>960px) */
@media (min-width:961px){
  .sidebar{position:relative!important;left:0!important;height:100vh;box-shadow:none}
  body.sidebar-open::after{content:none!important}
  .model-dropdown-menu{position:absolute;top:calc(100% + 8px);left:0}
}

/* Móviles muy estrechos: esconder texto largo */
@media (max-width:360px){
  .add-to-history-btn span,.export-pdf-btn span{display:none}
  .add-to-history-btn,.export-pdf-btn{padding:6px}
}
/* Fuerza apertura del desplegable cuando el contenedor está activo (desktop y móvil) */
.model-dropdown.active .model-dropdown-menu{ display:block !important; }

/* En móvil, asegúrate de que además se anima hacia arriba (ya tienes transform, lo reforzamos) */
@media (max-width:768px){
  .model-dropdown.active .model-dropdown-menu{ transform:translateY(0) !important; }
}

.attach-btn {
  background:none;
  border:none;
  cursor:pointer;
  font-size:18px;
  padding:6px;
  border-radius:6px;
  transition:background .2s;
  color:inherit;
}
.attach-btn:hover {
  background:rgba(0,0,0,.05);
}
body.dark .attach-btn:hover {
  background:rgba(255,255,255,.05);
}
/* Popup de archivos adjuntos */
.attach-popup {
  position: absolute;
  background: var(--bg-color, #fff);
  color: inherit;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  font-size: 13px;
  max-width: 240px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 9999;
}
.attach-popup ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.attach-popup li {
  padding: 4px 0;
  border-bottom: 1px solid rgba(0,0,0,.05);
  word-break: break-word;
}
.attach-popup li:last-child {
  border-bottom: none;
}