/* Tokens de marca/tema → FUENTE ÚNICA en public/css/tokens.css.
   El @import debe ir el primero del fichero. Los mismos tokens se cargan (por link)
   en las páginas standalone de los plugins, para compartir marca sin duplicar. */
@import url('/css/tokens.css');

/* ==================================================================
   Global scrollbar styling — 2026 modern thin + brand tinted
   ==================================================================
   Applies to every scrollable element by default.
   Specific containers can override (.chat-messages, .modal-body, etc.)
   with their own rules further down.
   ================================================================== */

/* Firefox — native thin scrollbar with custom colors */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* WebKit / Chromium / Edge — full control */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  /* The 2px transparent border + background-clip trick creates visual inset
     so the thumb looks 6px thin while keeping 10px hit-area */
  border: 2px solid transparent;
  background-clip: content-box;
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: content-box;
  box-shadow: inset 0 0 0 1px var(--scrollbar-thumb-hover);
}

::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-thumb-active);
  background-clip: content-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

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

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* App Layout */
.app {
  display: flex;
  height: 100vh;
  background: var(--bg-primary);
}

/* Mobile Header */
.mobile-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem; /* Reduced vertical padding to fit 60px */
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border-light);
  position: relative;
  z-index: 100;
  height: 60px; /* Fixed height for consistent calculation */
  box-sizing: border-box; /* Include padding in height calculation */
}

.mobile-header h1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.menu-toggle, .theme-toggle {
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease;
}

.menu-toggle:hover, .theme-toggle:hover {
  background: var(--bg-hover);
}

.menu-toggle i, .theme-toggle i {
  font-size: 1.25rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Sidebar */
.sidebar {
  width: 320px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
  z-index: 10;
  user-select: none;
}

/* Botón de cierre del sidebar: oculto en escritorio, se muestra en móvil (ver @media) */
.sidebar-close-mobile { display: none; }

/* Wrapper de scroll del sidebar: en escritorio es transparente (display:contents),
   así las secciones se comportan como hijas directas de .sidebar (layout sin cambios).
   En móvil pasa a ser la región scrollable (ver @media). */
.sidebar-scroll { display: contents; }

/* Desktop safeguard: prevent sidebar from getting stuck in mobile state */
@media (min-width: 769px) {
  .sidebar {
    position: relative !important;
    transform: none !important;
    width: 320px !important;
  }
  .sidebar-overlay {
    display: none !important;
  }
}

.sidebar-header {
  padding: 1.5rem 1rem;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.sidebar-header .desktop-theme-toggle {
  position: absolute;
  right: 1rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.logo i {
  font-size: 1.5rem;
  color: var(--primary-color);
}

.desktop-theme-toggle {
  display: block;
}

.sidebar-actions {
  padding: 1rem;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.new-chat-btn {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  background: var(--gradient-primary);
  color: var(--text-inverse);
  border: none;
  padding: 0;
  border-radius: 0.75rem;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.new-chat-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.conversations-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ==================== Projects (F1) ==================== */

.projects-section {
  flex-shrink: 0;
  max-height: 40%;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 0.25rem;
  margin-bottom: 0.25rem;
}

.projects-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  cursor: pointer;
  user-select: none;
}

.projects-section-header:hover {
  color: var(--text-secondary);
}

.projects-caret {
  transition: transform 0.2s ease;
}

.projects-section.collapsed .projects-caret {
  transform: rotate(-90deg);
}

.projects-section.collapsed .projects-list {
  display: none;
}

.projects-count {
  font-size: 0.7rem;
  color: var(--text-tertiary);
}

.projects-add-btn {
  margin-left: auto;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.projects-add-btn:hover {
  background: var(--bg-tertiary);
  color: var(--primary-color);
}

.projects-add-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.projects-list {
  overflow-y: auto;
  padding: 0 0.5rem;
}

.projects-empty {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  padding: 0.25rem 0.5rem 0.5rem;
  line-height: 1.4;
}

.project-item {
  margin-bottom: 0.125rem;
}

.project-item-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-primary);
}

.project-item-header:hover {
  background: var(--bg-secondary);
}

.project-caret {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.project-item.expanded .project-caret {
  transform: rotate(90deg);
}

.project-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.project-conv-count {
  font-size: 0.7rem;
  color: var(--text-tertiary);
}

.project-settings-btn {
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.project-item-header:hover .project-settings-btn {
  display: flex;
}

.project-settings-btn:hover {
  background: var(--bg-tertiary);
  color: var(--primary-color);
}

.project-item-body {
  display: none;
  padding-left: 1.25rem;
}

.project-item.expanded .project-item-body {
  display: block;
}

.project-new-chat-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.375rem 0.5rem;
  border: 1px dashed var(--border-medium);
  border-radius: 8px;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 0.75rem;
  cursor: pointer;
  margin: 0.125rem 0 0.25rem;
}

.project-new-chat-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.conversation-item.project-conv {
  padding-left: 0.375rem;
}

/* Project chip in the chat area */
.project-chip {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--border-light);
  border-radius: 99px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  max-width: 50%;
}

.project-chip .project-chip-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-chip:hover {
  border-color: var(--primary-color);
  color: var(--text-primary);
}

/* Agent chip: signals the active chat is wired to a NAiOS agent. Deliberately
   distinct from the project chip (blue, filled) so an agent-bound chat is never
   mistaken for a normal one. Mutually exclusive with the project chip in practice
   (agent-bound chats have no project). */
.agent-chip {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.4rem 0.25rem 0.75rem;
  border: 1px solid #2563eb;
  border-radius: 99px;
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
  font-size: 0.75rem;
  font-weight: 600;
  max-width: 60%;
}

.agent-chip > i.ph-robot {
  font-size: 0.95rem;
  flex-shrink: 0;
}

.agent-chip .agent-chip-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-chip .agent-chip-detach {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  margin-left: 0.15rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #2563eb;
  cursor: pointer;
  flex-shrink: 0;
}

.agent-chip .agent-chip-detach:hover {
  background: rgba(37, 99, 235, 0.25);
}

/* Reserve vertical room under the floating agent chip so it never overlaps the
   first message. Toggled from chat.js alongside the chip's visibility. */
.chat-messages.with-agent-chip {
  padding-top: 2.75rem;
}

/* Project modal */
.project-modal-body {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.project-field-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 0.5rem;
}

.project-field-hint {
  font-weight: 400;
  color: var(--text-tertiary);
}

.project-modal-body select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.875rem;
}

.project-modal-body input[type="text"],
.project-modal-body input[type="email"],
.project-modal-body textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.875rem;
  resize: vertical;
}

.project-modal-body input[type="text"]:focus,
.project-modal-body textarea:focus {
  outline: none;
  border-color: var(--primary-color);
}

.project-kb-list {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 0.25rem;
}

.modal-footer-spacer {
  flex: 1;
}

.project-delete-btn {
  background: transparent;
  border: 1px solid var(--danger-color, #ef4444);
  color: var(--danger-color, #ef4444);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.project-delete-btn:hover {
  background: var(--danger-color, #ef4444);
  color: #fff;
}

/* Move-to-project modal */
.move-project-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.move-project-option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.875rem;
  cursor: pointer;
  text-align: left;
}

.move-project-option:hover:not(:disabled) {
  border-color: var(--primary-color);
}

.move-project-option.current {
  opacity: 0.6;
  cursor: default;
}

.move-project-option.no-project {
  color: var(--text-secondary);
  border-style: dashed;
}

.move-project-option span {
  flex: 1;
}

/* KB quick actions in project modal (F1.5) */
.project-kb-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.375rem;
}

.project-kb-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 0.75rem;
  cursor: pointer;
  text-decoration: none;
}

.project-kb-action-btn:hover {
  color: var(--primary-color);
  background: var(--bg-secondary);
}

.project-kb-newcol {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.project-kb-newcol input {
  flex: 1;
}

.project-kb-newcol .btn-sm {
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
}

.kb-col-upload-btn {
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  flex-shrink: 0;
}

.kb-collection-item:hover .kb-col-upload-btn {
  display: flex;
}

.kb-col-upload-btn:hover {
  background: var(--bg-tertiary);
  color: var(--primary-color);
}

.project-kb-upload-status {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.375rem;
}

.kb-upload-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  padding: 0.25rem 0.375rem;
  background: var(--bg-secondary);
  border-radius: 6px;
}

.kb-upload-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kb-upload-state {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.kb-upload-spinner {
  animation: kbUploadSpin 1s linear infinite;
  color: var(--primary-color);
}

@keyframes kbUploadSpin {
  to { transform: rotate(360deg); }
}

.kb-upload-ok { color: var(--success-color, #10b981); }
.kb-upload-err { color: var(--danger-color, #ef4444); }

/* Duplicate recovery: move the existing doc into the target collection */
.kb-upload-move-btn {
  flex-shrink: 0;
  border: 1px solid var(--primary-color);
  background: transparent;
  color: var(--primary-color);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.kb-upload-move-btn:hover {
  background: var(--primary-color);
  color: #fff;
}
.kb-upload-move-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* Superadmin: projects gating block in plan editor */
.projects-feature-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.5rem 0;
}

.projects-feature-toggle,
.projects-feature-max {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  cursor: pointer;
}

.projects-feature-max input {
  padding: 0.25rem 0.375rem;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* Projects F3: sharing */
.project-shared-badge {
  font-size: 0.8rem;
  color: var(--primary-color);
  flex-shrink: 0;
}

.project-leave-btn {
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.project-item-header:hover .project-leave-btn {
  display: flex;
}

.project-leave-btn:hover {
  background: var(--bg-tertiary);
  color: var(--danger-color, #ef4444);
}

.project-members-block {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  border-top: 1px dashed var(--border-light);
  margin-top: 0.5rem;
  padding-top: 0.25rem;
}

.project-members-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: 150px;
  overflow-y: auto;
}

.project-member-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  background: var(--bg-secondary);
  border-radius: 8px;
  font-size: 0.8125rem;
  color: var(--text-primary);
}

.project-member-row > i {
  color: var(--text-tertiary);
  font-size: 1rem;
}

.project-member-email {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-member-role {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 99px;
  padding: 1px 8px;
  flex-shrink: 0;
}

.project-member-revoke {
  width: 1.375rem;
  height: 1.375rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.project-member-revoke:hover {
  color: var(--danger-color, #ef4444);
  background: var(--bg-tertiary);
}

.project-members-add {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.project-members-add input {
  flex: 1;
}

.project-members-add select {
  width: auto;
  min-width: 120px;
}

.project-members-kb-warning {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--warning-color, #f59e0b);
}

/* KB section in the files side panel ("what does this chat know?") */
.kb-files-section {
  border-top: 1px solid var(--border-light);
  padding: 0.5rem 0.75rem 0.75rem;
  flex-shrink: 0;
  max-height: 40%;
  overflow-y: auto;
}

.kb-files-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  padding-bottom: 0.375rem;
}

.kb-files-header > i:first-child {
  color: var(--primary-color);
}

.kb-files-count {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  background: var(--bg-tertiary);
  border-radius: 99px;
  padding: 0 7px;
}

/* Tamaño (por doc / total por colección / total global) en el árbol KB */
.kb-files-size,
.kb-files-doc-size {
  font-size: 0.66rem;
  color: var(--text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Reproductor Spotify embebido en mensajes del chat */
.spotify-embed {
  margin: 0.5rem 0;
  border-radius: 12px;
  overflow: hidden;
  max-width: 560px;
}
.spotify-embed iframe { display: block; border: 0; }

.kb-files-manage {
  margin-left: auto;
  color: var(--text-tertiary);
  display: flex;
}

.kb-files-manage:hover {
  color: var(--primary-color);
}

.kb-files-group-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.25rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--text-primary);
}

.kb-files-group-header:hover {
  background: var(--bg-secondary);
}

.kb-files-caret {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  transition: transform 0.2s ease;
}

.kb-files-group.expanded .kb-files-caret {
  transform: rotate(90deg);
}

.kb-files-group-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-files-group-docs {
  display: none;
  padding-left: 1.25rem;
}

.kb-files-group.expanded .kb-files-group-docs {
  display: block;
}

.kb-files-doc {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.25rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  border-radius: 6px;
}

.kb-files-doc:hover {
  background: var(--bg-secondary);
}

.kb-files-doc > i:first-child {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.kb-files-doc-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-files-indexed {
  color: var(--success-color, #10b981);
  flex-shrink: 0;
}

.kb-files-pending {
  color: var(--warning-color, #f59e0b);
  flex-shrink: 0;
}

/* Team chats (v1.1, opt-in) */
.project-team-chats {
  border-top: 1px dashed var(--border-light);
  margin-top: 0.25rem;
  padding-top: 0.25rem;
}

.team-chats-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  padding: 0.25rem 0.5rem;
}

.conversation-item.team-conv {
  opacity: 0.85;
}

.team-conv-author {
  font-size: 0.65rem;
  color: var(--primary-color);
  background: var(--bg-tertiary);
  border-radius: 99px;
  padding: 1px 8px;
  flex-shrink: 0;
  max-width: 90px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.input-wrapper.readonly {
  opacity: 0.7;
  background: var(--bg-tertiary);
}

.kb-member-info {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  padding: 0.5rem;
  line-height: 1.4;
}

.kb-member-info i {
  color: var(--primary-color);
  flex-shrink: 0;
  margin-top: 1px;
}

/* F2: selector de fuente KB (Mis colecciones vs workspace compartido) */
.kb-src-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-light);
}
.kb-src-opt.active { background: var(--bg-active, rgba(99,102,241,.12)); border-radius: 8px; }
.kb-src-owner { display: block; font-size: 0.7rem; color: var(--text-secondary); font-weight: 400; }

/* Drag & drop conversations onto projects */
.project-item-header.drag-over {
  background: var(--bg-tertiary);
  outline: 2px dashed var(--primary-color);
  outline-offset: -2px;
}

.conversations-list.drag-over {
  outline: 2px dashed var(--primary-color);
  outline-offset: -4px;
  border-radius: 8px;
}

body.dragging-conversation .conversation-item {
  cursor: grabbing;
}

/* Project-wide files scope in side panel */
.file-conv-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.65rem;
  color: var(--text-tertiary);
  background: var(--bg-tertiary);
  border-radius: 99px;
  padding: 1px 7px;
  max-width: 140px;
  overflow: hidden;
  white-space: nowrap;
}

#filesScopeToggle.active {
  color: var(--primary-color);
  background: var(--bg-tertiary);
}

/* Save session file to project KB (F-polish) */
.kb-save-file {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin: 0 0 0.75rem;
}

.kb-save-tag {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 99px;
  padding: 1px 8px;
  flex-shrink: 0;
}

.kb-save-note {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--text-tertiary);
  padding: 0.25rem 0.375rem;
}

/* Project memory (F2) */
.project-memory-block {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  border-top: 1px dashed var(--border-light);
  margin-top: 0.5rem;
  padding-top: 0.25rem;
}

.project-memory-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.project-memory-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.project-memory-toggle input {
  accent-color: var(--primary-color);
}

/* Canales OmniChat del proyecto: `.modal-body input { width:100% }` estiraba las
   casillas a todo el ancho y separaba cada una de su nombre */
#projectChannelsBlock input[type="checkbox"] {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  accent-color: var(--primary-color);
}

#projectChannelsList .kb-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: 6px;
  font-size: 0.875rem;
  color: var(--text-primary);
  cursor: pointer;
}

#projectChannelsList .kb-dropdown-item:hover {
  background: var(--bg-secondary);
}

#projectChannelsList .kb-dropdown-item span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

#projectChannelsList .kb-dropdown-item small {
  color: var(--text-tertiary);
}

.project-memory-history {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 0.25rem;
}

.memory-history-entry {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  width: 100%;
  text-align: left;
  padding: 0.375rem 0.5rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.memory-history-entry:hover {
  background: var(--bg-secondary);
}

.memory-history-date {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--primary-color);
}

.memory-history-preview {
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* KB overlay: full-screen iframe on top of the project modal */
.kb-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001; /* above .modal and .pasted-edit-overlay */
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
}

.kb-overlay-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-secondary);
}

.kb-overlay-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}

.kb-overlay-back {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 8px;
  background: var(--primary-color);
  color: var(--text-inverse, #fff);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}

.kb-overlay-back:hover {
  opacity: 0.9;
}

.kb-overlay iframe {
  flex: 1;
  width: 100%;
  border: none;
  background: var(--bg-primary);
}

/* KB selector: inherit-from-project toggle */
.kb-collection-item.inherit-toggle {
  border-bottom: 1px dashed var(--border-light);
  margin-bottom: 0.25rem;
  padding-bottom: 0.375rem;
}

.kb-collection-item.inherit-toggle.inheriting .kb-col-name {
  color: var(--primary-color);
  font-weight: 600;
}

.search-container {
  position: relative;
  flex: 1;
}

.search-input {
  width: 100%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-light);
  border-radius: 0.5rem;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--text-primary);
  transition: all 0.2s ease;
}

.search-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
}

.search-input::placeholder {
  color: var(--text-tertiary);
}

.search-icon {
  position: absolute;
  right: 1.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
}

.conversations-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 0.5rem 0.5rem;
}

/* Conversation groups */
.conversation-group {
  margin-bottom: 0.25rem;
}

.conversation-group-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  user-select: none;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-secondary);
}

.conversation-group-header:hover {
  color: var(--text-secondary);
}

.conversation-group-header .group-arrow {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.conversation-group.collapsed .group-arrow {
  transform: rotate(-90deg);
}

.conversation-group-header .group-count {
  margin-left: auto;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--text-tertiary);
  background: var(--bg-hover);
  padding: 0.05rem 0.4rem;
  border-radius: 0.5rem;
}

.pinned-group .conversation-group-header {
  color: var(--primary-color);
  cursor: default;
}

.pinned-group .conversation-group-header .group-count {
  background: color-mix(in srgb, var(--primary-color) 15%, transparent);
  color: var(--primary-color);
}

.conversation-group-items {
  overflow: hidden;
  transition: max-height 0.25s ease;
  max-height: 2000px;
}

.conversation-group.collapsed .conversation-group-items {
  max-height: 0;
}

.conversation-item {
  display: flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 0;
  position: relative;
  gap: 0.35rem;
}

.conversation-item:hover {
  background: var(--bg-hover);
}

.conversation-item.active {
  background: var(--bg-active);
}

.conversation-icon {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative; /* ancla del semáforo de streams (ticket #1) */
}

/* ── Menú de ayuda en la user-bar (ticket #7) ──────────────────────────
   Manual / Soporte / Instalar app: fuera del grid de módulos, siempre a
   un clic. Popup anclado hacia arriba sobre el botón «?». */
.help-menu-wrap { position: relative; display: inline-flex; }
/* Rediseño 13/9: cabecera con avatar + chip, tiles 2×2, ayuda en chips, pie con
   naios.net ♾️ y salir. Mitad de alto que la lista de julio. En móvil (≤640px)
   se convierte en hoja inferior (.help-menu-sheet, JS) con backdrop. */
.help-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: auto;
  width: 300px;
  max-width: calc(100vw - 16px);
  padding: 8px;
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-color, #dde0ea);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(20, 22, 40, .16), 0 2px 8px rgba(20, 22, 40, .08);
  font-size: .84rem;
  /* por ENCIMA de los quick-buttons flotantes de plugins (9998/9999) */
  z-index: 10000;
}
.help-menu-grab { display: none; }
.help-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 9px;
  font-size: .84rem;
  color: var(--text-primary, #1a1c25);
  text-decoration: none;
  position: relative;
  line-height: 1.2;
}
.help-menu-item:hover { background: var(--bg-secondary, #eef0f6); }
.help-menu-item i { font-size: 1.05rem; color: var(--text-secondary, #5c6272); }
button.help-menu-item {
  width: auto;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
/* cabecera */
.help-menu-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 10px;
  border-bottom: 1px solid var(--border-color, #dde0ea);
  margin-bottom: 8px;
}
.help-menu-avatar {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-color, #6366f1);
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .02em;
  overflow: hidden;
}
.help-menu-avatar img { width: 100%; height: 100%; object-fit: cover; }
.help-menu-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.help-menu-who strong { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.help-menu-chip {
  align-self: flex-start;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg-secondary, #eef0f6);
  color: var(--text-secondary, #5c6272);
}
.help-menu-chip--role { background: color-mix(in srgb, var(--primary-color, #6366f1) 14%, transparent); color: var(--primary-color, #6366f1); }
.help-menu-profile { flex: 0 0 auto; padding: 7px; border-radius: 50%; color: var(--text-secondary, #5c6272); }
.help-menu-profile i { font-size: 1.25rem; }
/* tiles 2×2 */
.help-menu-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.help-menu-item.help-menu-tile {
  border: 1px solid var(--border-color, #dde0ea);
  background: var(--bg-secondary, #f6f7fb);
  padding: 9px 10px;
  min-height: 40px;
  font-weight: 500;
}
.help-menu-item.help-menu-tile:hover { border-color: var(--primary-color, #6366f1); background: var(--bg-secondary, #eef0f6); }
.help-menu-tile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ayuda en chips */
.help-menu-help { display: flex; gap: 6px; margin-top: 8px; }
.help-menu-chipbtn {
  flex: 1;
  justify-content: center;
  padding: 9px 6px;
  border-radius: 999px;
  background: var(--bg-secondary, #f6f7fb);
}
.help-menu-chipbtn i { font-size: 1.15rem; }
.help-menu-chipbtn[hidden] { display: none; }
/* texto solo para lectores de pantalla (el tooltip lleva la etiqueta) */
.help-menu-srlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* pie */
.help-menu-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color, #dde0ea);
}
.help-menu-brand { padding: 6px 8px; font-size: .78rem; color: var(--text-secondary, #5c6272); }
.help-menu-brand i:first-child { font-size: 1.15rem; color: var(--primary-color, #6366f1); }
.help-menu-ext { font-size: .8rem !important; opacity: .7; }
.help-menu-sep { height: 1px; background: var(--border-color, #dde0ea); margin: 5px 4px; }
/* idioma de la interfaz a un clic */
.help-menu-lang { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 0 2px; }
.help-menu-lang > i { font-size: 1.05rem; color: var(--text-secondary, #5c6272); }
.help-menu-select {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: .82rem;
  padding: 6px 8px;
  border: 1px solid var(--border-color, #dde0ea);
  border-radius: 8px;
  background: var(--bg-secondary, #f6f7fb);
  color: var(--text-primary, #16181d);
  cursor: pointer;
}
.help-menu-select:hover { border-color: var(--primary-color, #6366f1); }
.help-menu-select:disabled { opacity: .6; cursor: progress; }
.help-menu-danger, .help-menu-danger i { color: var(--danger-color, #e5484d) !important; }
.help-menu-danger { padding: 6px 8px; font-size: .8rem; font-weight: 500; }
.help-menu-danger:hover { background: color-mix(in srgb, var(--danger-color, #e5484d) 10%, transparent); }
.help-menu-upgrade, .help-menu-upgrade i { color: var(--primary-color, #6366f1) !important; font-weight: 600; }
.help-menu-upgrade { border-color: color-mix(in srgb, var(--primary-color, #6366f1) 45%, transparent); }
/* hoja inferior (móvil): la pone el JS cuando el viewport es ≤640px */
.help-menu-backdrop { position: fixed; inset: 0; background: rgba(15, 17, 30, .45); z-index: 9999; }
.help-menu.help-menu-sheet {
  position: fixed !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
  width: auto; max-width: none;
  border-radius: 18px 18px 0 0;
  padding: 6px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  max-height: 70vh; overflow-y: auto;
  box-shadow: 0 -12px 40px rgba(20, 22, 40, .25);
  animation: help-menu-up .18s ease-out;
  touch-action: pan-y;
}
.help-menu-sheet .help-menu-grab { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--border-color, #dde0ea); margin: 4px auto 10px; }
.help-menu-sheet .help-menu-tile { min-height: 44px; }
.help-menu-sheet .help-menu-chipbtn, .help-menu-sheet .help-menu-danger, .help-menu-sheet .help-menu-brand { min-height: 40px; }
@keyframes help-menu-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }

/* ── Welcome moderno estilo Claude (rediseño 23/7) ─────────────────────────
   Saludo + input centrado vertical (re-parentado por ui-manager) + chips de
   modo discretos en lugar de las 5 cards de la v1. Al enviar, el input vuelve
   a su dock inferior (hideWelcomeScreen → _undockInput). */
/* El welcome vive como HERMANO de #chatMessages (portal de ui-manager) y
   ocupa su hueco cuando está visible */
.welcome-screen {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  align-items: center;
  justify-content: center;
}
.welcome-modern {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  max-width: none;
  padding: 24px;
}
.welcome-greeting {
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -.02em;
}
.welcome-sub {
  margin: 0 0 18px;
  color: var(--text-secondary, #5c6272);
  font-size: 1.02rem;
}
.welcome-input-dock { width: min(760px, 100%); }
/* El .input-area dentro del welcome pierde su piel de dock inferior */
.welcome-input-dock .input-area {
  background: transparent;
  border-top: none;
  padding: 0;
}
/* Ticket #32: la sombra iba en .input-container, que NO es una caja sino un
   flex row de dos pieles separadas por gap .75rem (selector de modo + input).
   La tarjeta abarcaba las dos y el hueco del gap se veía como una franja
   blanca "dentro" de ella. Cada pieza lleva ahora su propia sombra. */
.welcome-input-dock .input-wrapper {
  box-shadow: 0 8px 30px rgba(20, 22, 40, .10);
  border-radius: 16px;
}
.welcome-input-dock .mode-selector-trigger {
  box-shadow: 0 8px 30px rgba(20, 22, 40, .10);
}
.welcome-chips {
  /* Ocultos (petición Miquel 23/7: welcome limpio, solo saludo + input).
     El markup se conserva: los modos siguen accesibles en el selector del
     input, y reactivar los chips = quitar esta línea. */
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.mode-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--border-color, #dde0ea);
  border-radius: 999px;
  background: var(--bg-primary, #fff);
  color: var(--text-secondary, #5c6272);
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .12s, color .12s, transform .12s;
}
.mode-chip i { font-size: 1rem; }
.mode-chip:hover {
  border-color: var(--primary-color, #6366f1);
  color: var(--primary-color, #6366f1);
  transform: translateY(-1px);
}
.mode-chip.active, .mode-chip.selected {
  border-color: var(--primary-color, #6366f1);
  color: var(--primary-color, #6366f1);
  background: color-mix(in srgb, var(--primary-color, #6366f1) 9%, transparent);
}
.mode-chip.disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 640px) {
  .welcome-greeting { font-size: 1.5rem; }
  .welcome-modern { padding: 14px; }
  .welcome-chips { gap: 6px; }
  .mode-chip { padding: 6px 11px; font-size: .78rem; }
}

/* ── Config de módulos + vista compacta (mejora 23/7) ─────────────────────── */
.modules-config-btn {
  background: none;
  border: none;
  color: var(--text-secondary, #8a90a5);
  padding: 3px;
  /* pegado al chevron de colapso, en el extremo derecho (el header usa
     space-between y sin esto quedaba flotando en medio) */
  margin-left: auto;
  margin-right: 4px;
  cursor: pointer;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  font-size: .95rem;
  opacity: 0;
  transition: opacity .15s;
}
.modules-header:hover .modules-config-btn { opacity: 1; }
.modules-config-btn:hover { color: var(--primary-color, #6366f1); background: var(--bg-secondary, #eef0f6); }
/* Rail colapsado: la sección MÓDULOS entera sobra — el lanzador ⊞ de la
   user-bar (modal de cards) cumple ese papel (petición Miquel 23/7) */
.sidebar.is-collapsed .modules-config-btn { display: none !important; }
.sidebar.is-collapsed #modulesSection { display: none !important; }

.mods-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(10, 12, 22, .5);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.mods-modal-backdrop[hidden] { display: none !important; }
.mods-modal {
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-color, #dde0ea);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(10, 12, 22, .35);
  width: min(440px, 94vw);
  max-height: 78vh;
  overflow-y: auto;
  padding: 16px;
}
.mods-modal-launcher { width: min(680px, 94vw); }
@media (min-width: 1100px) {
  .mods-modal { max-height: 78vh; }
}
.mods-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.mods-modal-head strong { display: flex; align-items: center; gap: 7px; font-size: 1rem; }
.mods-modal-head i { color: var(--primary-color, #6366f1); }
.mods-modal-close {
  background: none;
  border: none;
  color: var(--text-secondary, #8a90a5);
  cursor: pointer;
  font-size: 1.05rem;
  padding: 4px;
  border-radius: 6px;
}
.mods-modal-close:hover { background: var(--bg-secondary, #eef0f6); }

.mods-compact-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--border-color, #dde0ea);
  border-radius: 10px;
  cursor: pointer;
  background: var(--bg-secondary, #f6f7fb);
}
.mods-compact-row input { margin-top: 3px; accent-color: var(--primary-color, #6366f1); }
.mods-compact-row span { display: flex; flex-direction: column; gap: 2px; }
.mods-compact-row small { color: var(--text-secondary, #8a90a5); font-size: .78rem; line-height: 1.35; }
.mods-config-subtitle {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-secondary, #8a90a5);
  margin: 14px 2px 6px;
}
.mods-modal-head-actions { display: flex; align-items: center; gap: 2px; }

/* Config compacta en 2 columnas (hay instancias con 20+ módulos) */
.mods-config-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px 8px;
}
.mods-config-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 6px;
  border-radius: 7px;
  cursor: pointer;
  font-size: .8rem;
  min-width: 0;
}
.mods-config-row:hover { background: var(--bg-secondary, #eef0f6); }
.mods-config-row input { accent-color: var(--primary-color, #6366f1); flex-shrink: 0; }
.mods-config-icon { color: var(--mod-color, #6366f1); display: inline-flex; font-size: .95rem; width: 17px; justify-content: center; flex-shrink: 0; }
.mods-config-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Cards compactas */
.mods-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(98px, 1fr));
  gap: 8px;
}
.mods-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px 9px;
  border: 1px solid var(--border-color, #dde0ea);
  border-radius: 11px;
  text-decoration: none;
  color: var(--text-primary, #1a1c25);
  background: var(--bg-primary, #fff);
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.mods-card:hover {
  border-color: var(--mod-color, #6366f1);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(10, 12, 22, .12);
}
.mods-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: var(--mod-color, #6366f1);
  background: color-mix(in srgb, var(--mod-color, #6366f1) 13%, transparent);
}
.mods-card-name {
  font-size: .7rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.mods-empty { color: var(--text-secondary, #8a90a5); font-size: .85rem; text-align: center; padding: 18px; }

@media (max-width: 640px) {
  .mods-cards-grid { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 7px; }
  .mods-config-list { grid-template-columns: 1fr; }
  .mods-modal { padding: 12px; }
  .modules-config-btn { opacity: 1; } /* sin hover en táctil */
}

/* Rail colapsado (64px): anclado a right:0 el popup se iba 150px a la
   IZQUIERDA, fuera del viewport (bug reportado 20/7). Se abre a la DERECHA
   del rail, alineado al botón — mismo criterio que los sidebar-flyout. */
.sidebar.is-collapsed .help-menu {
  right: auto;
  left: calc(100% + 10px);
  bottom: 4px;
}

/* Menú portalizado a body (23/7): coords fijas calculadas en JS con
   compensación de zoom; anula los anclajes relativos de arriba */
.help-menu-floating,
.sidebar.is-collapsed ~ * .help-menu-floating {
  position: fixed !important;
  right: auto !important;
}

/* ── Semáforo de streams por conversación (ticket #1) ──────────────────
   🟠 generando · 🟢 respuesta lista sin abrir · 🔴 terminó con error.
   Vive sobre el icono para seguir visible con la sidebar colapsada. */
.conv-status-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--bg-secondary, #fff);
  z-index: 2;
  pointer-events: none;
}
.conv-status-dot.working {
  background: #f59e0b;
  animation: convDotPulse 1.2s ease-in-out infinite;
}
.conv-status-dot.ready { background: #10b981; }
.conv-status-dot.error { background: #ef4444; }
@keyframes convDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}

.conversation-icon i {
  font-size: 1rem;
  color: var(--text-tertiary);
}

.conversation-item.active .conversation-icon i {
  color: var(--primary-color);
}

.conversation-title {
  flex: 1;
  min-width: 0;
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--text-primary);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  mask-image: linear-gradient(to right, transparent 0, black 0, black calc(100% - 8px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 8px), transparent 100%);
}

.conversation-title span {
  display: inline-block;
  white-space: nowrap;
  padding-right: 1rem;
}

/* Scroll effect on hover - requires JS to set --scroll-distance */
.conversation-item:hover .conversation-title.needs-scroll span {
  animation: scrollTitle var(--scroll-duration, 4s) ease-in-out infinite;
  animation-delay: 0.5s;
}

@keyframes scrollTitle {
  0%, 15% { transform: translateX(0); }
  45%, 55% { transform: translateX(var(--scroll-distance, 0px)); }
  85%, 100% { transform: translateX(0); }
}

.conversation-item.active .conversation-title {
  font-weight: 500;
}

.conversation-time {
  font-size: 0.625rem;
  color: var(--text-tertiary);
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 0.25rem;
}

/* Kebab menu */
.conversation-menu {
  position: relative;
  flex-shrink: 0;
}

.menu-kebab-btn {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 0.125rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.2s ease;
  margin-right: -0.25rem;
}

.conversation-item:hover .menu-kebab-btn,
.conversation-menu.open .menu-kebab-btn {
  opacity: 1;
}

.menu-kebab-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.menu-kebab-btn i {
  font-size: 1rem;
}

/* Dropdown */
.conversation-dropdown {
  position: fixed;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 0.5rem;
  box-shadow: var(--shadow-lg);
  min-width: 120px;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.25rem);
  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
}

.conversation-menu.open .conversation-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-action {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.dropdown-action:first-child {
  border-radius: 0.5rem 0.5rem 0 0;
}

.dropdown-action:last-child {
  border-radius: 0 0 0.5rem 0.5rem;
}

.dropdown-action:hover {
  background: var(--bg-hover);
}

.dropdown-action.delete-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger-color);
}

.dropdown-action i {
  font-size: 0.875rem;
  color: var(--text-tertiary);
}

.dropdown-action.delete-btn:hover i {
  color: var(--danger-color);
}

.action-btn {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.25rem;
  transition: all 0.2s ease;
}

.action-btn:hover {
  color: var(--text-secondary);
  background: var(--bg-hover);
}

.delete-btn:hover {
  color: var(--danger-color);
}

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-tertiary);
}

.empty-state i {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

/* Main Content */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-chat);
  overflow: hidden;
}

.chat-container {
  flex: 1;
  min-width: 380px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Welcome Screen */
.welcome-screen {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.welcome-content {
  text-align: center;
  max-width: 600px;
}

.welcome-icon {
  margin-bottom: 2rem;
}

.welcome-icon i {
  font-size: 4rem;
  color: var(--primary-color);
}

.welcome-content h2 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.welcome-content p {
  color: var(--text-secondary);
  font-size: 1.125rem;
  margin-bottom: 3rem;
}

.welcome-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  max-width: 600px;
  margin: 0 auto;
}

.mode-card {
  background: var(--bg-secondary);
  border: 2px solid var(--border-light);
  border-radius: 1rem;
  padding: 1.5rem 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.mode-card:hover {
  border-color: var(--primary-color);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.mode-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: auto;
}

.mode-card.disabled:hover {
  border-color: var(--border-light);
  transform: none;
  box-shadow: none;
}

.mode-card i {
  font-size: 2rem;
  color: var(--primary-color);
  margin-bottom: 0.75rem;
}

.mode-card h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.mode-card p {
  color: var(--text-secondary);
  font-size: 0.8rem;
  line-height: 1.3;
  margin: 0;
}

/* Messages */
.message {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.message.user {
  flex-direction: row-reverse;
}

.message-avatar {
  width: 2rem;
  height: 2rem;
  background: var(--bg-tertiary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.message.user .message-avatar {
  background: var(--primary-color);
  color: var(--text-inverse);
}

.message.assistant .message-avatar {
  background: var(--accent-color);
  color: var(--text-inverse);
}

.message-avatar i {
  font-size: 1rem;
}

.message-content {
  flex: 1;
  max-width: 70%;
  position: relative;
}

.message.user .message-content {
  text-align: right;
}

/* Model Info Badge - Mini subtle tag */
.model-info-badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-color);
  border-radius: 50%;
  opacity: 0.9;
  transition: all 0.2s ease;
  cursor: help;
  z-index: 150;
  pointer-events: all;
  box-shadow: var(--shadow-sm);
}

.model-info-badge:hover {
  opacity: 1;
  transform: scale(1.15);
  background: var(--primary-hover);
}

.model-info-badge i {
  font-size: 14px;
  color: #ffffff;
}

/* Model Tooltip */
.model-tooltip {
  position: absolute;
  bottom: -32px;
  right: 0;
  background: rgba(0, 0, 0, 0.9);
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.model-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  right: 6px;
  border: 5px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.9);
}

.model-info-badge:hover .model-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-4px);
}

.message-text {
  background: var(--bg-secondary);
  padding: 0.875rem 1rem;
  border-radius: 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-primary) !important; /* Force text color */
  word-wrap: break-word;
  margin-bottom: 0.25rem;
}

/* Ensure all text inside message-text uses correct color */
.message-text * {
  color: inherit;
}

/* Markdown Styles for Assistant Messages */
.message.assistant .message-text {
  white-space: normal;
}

/* Preserve line breaks in user messages (multiline textarea input) */
.message.user .message-text {
  white-space: pre-wrap;
}

.message.assistant .message-text h1,
.message.assistant .message-text h2,
.message.assistant .message-text h3,
.message.assistant .message-text h4,
.message.assistant .message-text h5,
.message.assistant .message-text h6 {
  margin: 1rem 0 0.5rem;
  font-weight: 600;
  line-height: 1.3;
}

.message.assistant .message-text h1:first-child,
.message.assistant .message-text h2:first-child,
.message.assistant .message-text h3:first-child {
  margin-top: 0;
}

.message.assistant .message-text h1 { font-size: 1.5rem; }
.message.assistant .message-text h2 { font-size: 1.3rem; }
.message.assistant .message-text h3 { font-size: 1.1rem; }
.message.assistant .message-text h4 { font-size: 1rem; }

.message.assistant .message-text p {
  margin: 0.5rem 0;
}

.message.assistant .message-text ul,
.message.assistant .message-text ol {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

.message.assistant .message-text li {
  margin: 0.25rem 0;
}

.message.assistant .message-text code {
  background: var(--bg-tertiary);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.875em;
}

.message.assistant .message-text pre {
  background: var(--bg-tertiary);
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 0.75rem 0;
}

.message.assistant .message-text pre code {

    padding: 0;
    font-size: 0.875rem;
    line-height: 1.5;

}

.message.assistant .message-text pre code.hljs {
    background: transparent;
    padding: 0;
}


.message.assistant .message-text blockquote {
  border-left: 3px solid var(--primary-color);
  margin: 0.75rem 0;
  padding-left: 1rem;
  color: var(--text-secondary);
}

.message.assistant .message-text strong {
  font-weight: 600;
}

.message.assistant .message-text em {
  font-style: italic;
}

.message.assistant .message-text a {
  color: var(--primary-color);
  text-decoration: underline;
}

.message.assistant .message-text a:hover {
  color: var(--primary-hover);
}

.message.assistant .message-text hr {
  margin: 1rem 0;
  border: none;
  border-top: 1px solid var(--border-light);
}

.message.assistant .message-text table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0;
}

.message.assistant .message-text th,
.message.assistant .message-text td {
  padding: 0.5rem;
  border: 1px solid var(--border-light);
  text-align: left;
}

.message.assistant .message-text th {
  background: var(--bg-tertiary);
  font-weight: 600;
}

.message.user .message-text {
  background: var(--gradient-primary);
  color: #ffffff !important;
  border-bottom-right-radius: 0.25rem;
  white-space: pre-wrap;
}

.message.user .message-text * {
  color: #ffffff !important;
}

/* Landing prompt card (overrides user bubble gradient) */
.message.user .message-text.has-landing-card,
.message.user .message-text:has(.landing-prompt-card) {
  background: none;
  padding: 0;
  color: inherit !important;
}

.message.user .message-text.has-landing-card *,
.message.user .message-text:has(.landing-prompt-card) * {
  color: inherit !important;
}

.landing-prompt-card {
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 0.75rem;
  overflow: hidden;
  min-width: 260px;
}

.landing-prompt-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}

.landing-prompt-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.landing-prompt-icon i {
  font-size: 18px;
  color: #fff !important;
}

.landing-prompt-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.landing-prompt-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #1f2937) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.landing-prompt-meta {
  font-size: 11px;
  color: var(--text-muted, #9ca3af) !important;
}

.landing-prompt-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  color: var(--text-muted, #9ca3af) !important;
  transition: background 0.15s;
  flex-shrink: 0;
}

.landing-prompt-toggle:hover {
  background: var(--bg-tertiary, rgba(0,0,0,0.05));
}

.landing-prompt-toggle i {
  font-size: 16px;
  color: var(--text-muted, #9ca3af) !important;
}

.landing-prompt-body {
  border-top: 1px solid var(--border-color, #e2e8f0);
  max-height: 300px;
  overflow-y: auto;
}

.landing-prompt-body pre {
  margin: 0;
  padding: 10px 14px;
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-secondary, #6b7280) !important;
  background: none;
}

.message.assistant .message-text {
  border-bottom-left-radius: 0.25rem;
}

.message-image {
  position: relative;
  display: flex;
  justify-content: center;
  border-radius: 0.75rem;
  margin: 0.5rem 0;
  padding: 0.25rem;
  box-shadow: var(--shadow-md);
}

.message-image img {
  max-width: 500px;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.75rem;
}

/* Multiple attachments gallery */
.message-attachments-gallery {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0.5rem 0;
  position: relative;
}

.message-attachments-gallery.multi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  max-width: 100%;
}

.message-attachments-gallery.multi .message-image {
  margin: 0;
}

.message-attachments-gallery.multi .message-image img {
  max-width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.message-attachments-gallery.multi .message-audio,
.message-attachments-gallery.multi .message-video {
  margin: 0;
}

/* 2 items: 2 columns */
.message-attachments-gallery.multi:has(> :nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
}

/* 3+ items: 3 columns max */
.message-attachments-gallery.multi:has(> :nth-child(3)) {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

@media (max-width: 768px) {
  .message-attachments-gallery.multi {
    grid-template-columns: repeat(2, 1fr);
  }

  .message-attachments-gallery.multi:has(> :nth-child(3)) {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .message-attachments-gallery.multi {
    grid-template-columns: 1fr;
  }
}

.image-download-btn {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: white;
}

.image-download-btn:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.1);
}

.image-download-btn i {
  font-size: 1rem;
}

/* Multimedia Content Styles */
.message-media {
  margin-bottom: 0.5rem;
}

.message-video {
  position: relative;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--bg-tertiary);
  margin: 0.5rem auto;
  max-width: 800px;
}

.message-video video {
  width: 480px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Vertical videos (portrait) should be smaller */
.message-video.video-vertical {
  max-width: 350px;
}

.message-video.video-vertical video {
  max-width: 350px;
}

.message-audio {
  background: var(--bg-tertiary);
  border-radius: 0.75rem;
  padding: 1rem;
  box-shadow: var(--shadow-sm);
  max-width: 350px;
}

.message-audio audio {
  width: 100%;
  margin-bottom: 0.5rem;
}

.media-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.05);
}

.media-name {
  font-size: 0.875rem;
  color: var(--text-secondary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-download-btn {
  background: var(--primary-color);
  border: none;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: white;
  flex-shrink: 0;
}

.media-download-btn:hover {
  background: var(--primary-hover);
  transform: scale(1.1);
}

.media-download-btn i {
  font-size: 0.875rem;
}

.message-time {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-top: 0.25rem;
}

.message.user .message-time {
  text-align: right;
}

/* Transcription and Video Analysis Styling */
.transcription-section,
.video-section {
  margin-top: 0.75rem;
  border: 1px solid var(--border-light);
  border-radius: 0.5rem;
  background: var(--bg-tertiary);
  overflow: hidden;
}

.video-section {
  border-color: var(--primary-color);
}

.transcription-header {
  background: var(--accent-color);
  color: var(--text-inverse);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.video-section .transcription-header {
  background: var(--primary-color);
}

.transcription-header i {
  font-size: 0.875rem;
}

.transcription-item {
  padding: 0.75rem;
  border-bottom: 1px solid var(--border-light);
}

.transcription-item:last-child {
  border-bottom: none;
}

.transcription-filename {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 0.375rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.transcription-filename::before {
  content: "🎵";
  font-size: 0.75rem;
}

.transcription-text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-primary);
  padding: 0.5rem;
  border-radius: 0.375rem;
  border-left: 3px solid var(--accent-color);
}

.video-section .transcription-text {
  border-left-color: var(--primary-color);
}

/* Code Block */
.code-block-container {
  margin: 1rem 0;
  border: 1px solid var(--border-light);
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--bg-secondary);
}

.code-tabs {
  display: flex;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-light);
  padding: 0;
}

.code-tab-btn {
  padding: 0.625rem 1.25rem;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  border-bottom: 2px solid transparent;
}

.code-tab-btn:hover {
  color: var(--primary-color);
  background: rgba(99, 102, 241, 0.05);
}

.code-tab-btn.active {
  color: var(--primary-color);
  background: var(--bg-primary);
  border-bottom-color: var(--primary-color);
}

.code-tab-content {
  position: relative;
}

.code-tab-panel {
  display: none;
}

.code-tab-panel.active {
  display: block;
}

.code-tab-panel[data-panel="preview"] {
  padding: 0;
  background: white;
}

.preview-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-light);
}

.preview-resolution-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  padding: 0.375rem 0.625rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.preview-resolution-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-medium);
  color: var(--text-primary);
}

.preview-resolution-btn.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

.preview-resolution-btn i {
  font-size: 1rem;
}

.preview-resolution-label {
  font-weight: 500;
  min-width: 52px;
  text-align: center;
}

.preview-iframe-container {
  width: 100%;
  min-height: 150px;
  max-height: 750px;
  height: 350px; /* Default before JS sets dynamic height */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #e5e7eb;
  overflow: auto;
  padding: 1rem;
  transition: height 0.2s ease;
}

.preview-iframe-container iframe {
  height: 100%;
  border: none;
  display: block;
  background: white;
  transition: width 0.3s ease, box-shadow 0.3s ease;
}

.preview-iframe-container.desktop iframe {
  width: 100%;
}

.preview-iframe-container.tablet iframe {
  width: 768px;
  max-width: 100%;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
  border-radius: 8px;
}

.preview-iframe-container.mobile iframe {
  width: 375px;
  max-width: 100%;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
  border-radius: 8px;
}

.code-tab-panel[data-panel="code"] {
  background: var(--bg-primary);
}

.code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-light);
}

.code-lang {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.code-action-btn {
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-left: 0.5rem;
}

.code-action-btn:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.code-action-btn.success {
  background: var(--success-color);
  color: white;
  border-color: var(--success-color);
}

/* Mobile: solo iconos en preview header */
@media (max-width: 640px) {
  .preview-resolution-label {
    display: none;
  }

  .preview-resolution-btn {
    padding: 0.375rem;
    gap: 0;
  }

  .code-action-btn {
    font-size: 0;
    padding: 0.375rem;
    gap: 0;
  }

  .code-action-btn i {
    font-size: 1rem;
  }
}

.code-tab-panel[data-panel="code"] pre {
  margin: 0;
  padding: 1rem;
  overflow-x: auto;
  background: var(--bg-primary);
}

.code-tab-panel[data-panel="code"] code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-primary);
  display: block;
  white-space: pre;
}

/* Share Panel Styles */
.share-container {
  padding: 1.5rem;
  max-width: 600px;
  margin: 0 auto;
}

.share-section {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 0.5rem;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.share-section h4 {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.share-section h4 i {
  color: var(--primary-color);
}

.share-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.option-row label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.checkbox-label input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  cursor: pointer;
}

.password-input-row {
  margin-top: -0.5rem;
}

.password-input-row input,
.share-password-input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border-light);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  background: var(--bg-secondary);
  color: var(--text-primary);
  transition: border-color 0.2s;
}

.password-input-row input:focus,
.share-password-input:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* Custom share slug (/s/<slug>) */
.option-row-slug .share-slug-input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-light);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--bg-secondary);
  color: var(--text-primary);
  transition: border-color 0.2s;
}

.option-row-slug .share-slug-input:focus {
  outline: none;
  border-color: var(--primary-color);
}

.option-row-slug .share-slug-input.is-invalid {
  border-color: #ef4444;
}

.slug-preview {
  margin-top: -0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  word-break: break-all;
}

.slug-preview strong {
  color: var(--text-primary);
}

.slug-preview-hint {
  color: #b45309;
}

.expiration-select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-light);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  min-width: 150px;
}

.btn-generate-link {
  width: 100%;
  padding: 0.75rem;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-generate-link:hover:not(:disabled) {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.btn-generate-link:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.generated-link {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-light);
}

.link-display {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.share-link-input {
  flex: 1;
  padding: 0.75rem;
  border: 1px solid var(--border-light);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: 'Courier New', monospace;
}

.btn-copy-link {
  padding: 0.75rem 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 0.375rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-copy-link:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.link-info {
  display: flex;
  gap: 1.5rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.link-info span {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.email-share {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.email-input,
.email-message {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border-light);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: inherit;
  transition: border-color 0.2s;
}

.email-input:focus,
.email-message:focus {
  outline: none;
  border-color: var(--primary-color);
}

.email-message {
  resize: vertical;
  min-height: 80px;
}

.btn-send-email {
  padding: 0.75rem;
  background: var(--accent-color);
  color: white;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-send-email:hover:not(:disabled) {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}

.btn-send-email:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.share-footer {
  text-align: center;
  padding: 1rem;
  color: var(--text-tertiary);
}

.share-footer i {
  margin-right: 0.25rem;
}

/* Share Modal - Compact & Custom Scrollbar */
#shareModal .html-preview-modal-content {
  scrollbar-width: thin;
  scrollbar-color: var(--primary-color) transparent;
}

#shareModal .html-preview-modal-content::-webkit-scrollbar {
  width: 5px;
}

#shareModal .html-preview-modal-content::-webkit-scrollbar-track {
  background: transparent;
  margin: 0.5rem 0;
}

#shareModal .html-preview-modal-content::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.4);
  border-radius: 3px;
}

#shareModal .html-preview-modal-content::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
}

#shareModal .html-preview-modal-header {
  padding: 0.75rem 1rem;
}

#shareModal .share-container {
  padding: 0.75rem 1rem 1rem;
}

#shareModal .share-section {
  padding: 0.75rem;
  margin-bottom: 0.625rem;
}

#shareModal .share-section:last-of-type {
  margin-bottom: 0.375rem;
}

#shareModal .share-section h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.875rem;
}

#shareModal .share-options {
  gap: 0.5rem;
}

#shareModal .option-row {
  gap: 0.75rem;
}

#shareModal .btn-generate-link {
  padding: 0.5rem;
  font-size: 0.8125rem;
}

#shareModal .generated-link {
  margin-top: 0.625rem;
  padding-top: 0.625rem;
}

#shareModal .link-display {
  margin-bottom: 0.5rem;
}

#shareModal .share-link-input {
  padding: 0.5rem 0.625rem;
  font-size: 0.8125rem;
}

#shareModal .btn-copy-link {
  padding: 0.5rem 0.75rem;
}

#shareModal .link-info {
  font-size: 0.75rem;
  gap: 1rem;
}

#shareModal .email-share {
  gap: 0.5rem;
}

#shareModal .email-input,
#shareModal .email-message {
  padding: 0.5rem 0.625rem;
  font-size: 0.8125rem;
}

#shareModal .email-message {
  min-height: 44px;
  resize: none;
}

#shareModal .btn-send-email {
  padding: 0.5rem;
  font-size: 0.8125rem;
}

#shareModal .share-footer {
  padding: 0.375rem 0.5rem;
  font-size: 0.75rem;
}

#shareModal .password-input-row input {
  padding: 0.5rem 0.625rem;
  font-size: 0.8125rem;
}

#shareModal .expiration-select {
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  min-width: 120px;
}

#shareModal .option-row-slug .share-slug-input {
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
}

/* Typing Indicator */
.typing-indicator {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  opacity: 0.9;
  --typing-color: #10b981;
  --typing-speed: 1.4s;
}

.typing-indicator .typing-avatar {
  width: 2rem;
  height: 2rem;
  background: var(--accent-color);
  color: var(--text-inverse);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.typing-indicator .typing-avatar i {
  font-size: 1rem;
}

.typing-content {
  flex: 1;
  max-width: 70%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.typing-text {
  color: var(--typing-color);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.5rem 0;
}

.typing-dots {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  padding: 0.5rem 0;
}

.typing-dots span {
  width: 0.5rem;
  height: 0.5rem;
  background: var(--typing-color);
  border-radius: 50%;
  animation: typing var(--typing-speed) infinite ease-in-out;
}

.typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.typing-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1.2);
    opacity: 1;
  }
}

/* "Pensando..." streaming placeholder — animated so the long pre-stream phase
   (IntentRouter + KB retrieval + tool loading, before the first SSE byte) never
   looks frozen. Gentle opacity pulse + animated trailing dots. */
.stream-thinking {
  color: var(--text-tertiary);
  font-style: italic;
  animation: thinkingPulse 1.5s ease-in-out infinite;
}
@keyframes thinkingPulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}
.thinking-dots::after {
  content: '';
  animation: thinkingDots 1.4s steps(1, end) infinite;
}
@keyframes thinkingDots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: '...'; }
}

/* Input Area */
.input-area {
  background: var(--bg-input);
  border-top: 1px solid var(--border-light);
  padding: 1rem;
}

.input-container {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  max-width: 1200px;
  margin: 0 auto;
}

.mode-selector {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mode-selector-trigger {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 0.75rem;
  padding: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}

.mode-selector-trigger:hover {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.mode-selector-panel {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 0.5rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 0.75rem;
  padding: 0.25rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(10px);
  transition: all 0.2s ease;
  box-shadow: var(--shadow-lg);
  z-index: 9;
}

.mode-selector.expanded .mode-selector-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.mode-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mode-btn:hover {
  color: var(--primary-color);
  background: rgba(99, 102, 241, 0.1);
}

.mode-btn.active {
  background: var(--primary-color);
  color: var(--text-inverse);
  box-shadow: var(--shadow-sm);
}

.mode-btn.disabled,
.mode-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mode-btn.disabled:hover,
.mode-btn:disabled:hover {
  color: var(--text-secondary);
  background: transparent;
}

.mode-btn i {
  font-size: 1.125rem;
}

.input-form {
  flex: 1;
}

.input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 0.75rem;
  padding: 0.25rem 0.375rem;
  transition: all 0.2s ease;
}

.input-wrapper:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
}

#messageInput {
  flex: 1;
  background: none;
  border: none;
  padding: 0.875rem 1rem;
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-primary);
  resize: none;
  overflow-y: hidden;
  max-height: 96px; /* ~3 líneas, sincronizado con autoResizeInput() */
}

#messageInput:focus {
  outline: none;
}

#messageInput::placeholder {
  color: var(--text-tertiary);
}

.send-btn {
  background: var(--primary-color);
  color: var(--text-inverse);
  border: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.send-btn:hover {
  background: var(--primary-hover);
  transform: scale(1.1);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
}

/* Auto Tools Button */
/* System Prompt Preset Selector */
.prompt-preset-wrapper {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.prompt-preset-btn {
  background: none;
  border: none;
  color: var(--text-tertiary);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 1.05rem;
  flex-shrink: 0;
}

.prompt-preset-btn:hover {
  color: var(--primary-color);
  background: rgba(99, 102, 241, 0.08);
  transform: scale(1.1);
}

.prompt-preset-btn.active {
  color: #a855f7;
  background: rgba(168, 85, 247, 0.1);
}

.prompt-preset-dropdown {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  min-width: 250px;
  z-index: 100;
  overflow: hidden;
  animation: kbDropdownIn 0.15s ease-out;
}

.prompt-preset-dropdown.visible {
  display: block;
}

.prompt-preset-dropdown-header {
  padding: 0.6rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.prompt-preset-list {
  padding: 0.35rem 0;
}

.prompt-preset-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.85rem;
  cursor: pointer;
  transition: background 0.15s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  color: var(--text-primary);
  font-size: 0.85rem;
}

.prompt-preset-item:hover {
  background: var(--bg-secondary);
}

.prompt-preset-item.active {
  background: rgba(99, 102, 241, 0.08);
}

.prompt-preset-item > i:first-child {
  font-size: 1.15rem;
  flex-shrink: 0;
  width: 1.5rem;
  text-align: center;
}

.prompt-preset-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.prompt-preset-name {
  font-weight: 600;
  font-size: 0.85rem;
}

.prompt-preset-desc {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prompt-preset-check {
  color: var(--primary-color);
  font-size: 1rem;
  flex-shrink: 0;
}

/* ========== Chat Settings Unified Menu ========== */
.chat-settings-wrapper {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.chat-settings-btn {
  background: none;
  border: none;
  color: var(--text-tertiary);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 1.1rem;
  position: relative;
  flex-shrink: 0;
}

.chat-settings-btn:hover {
  color: var(--primary-color);
  background: rgba(99, 102, 241, 0.08);
  transform: scale(1.1);
}

.chat-settings-dot {
  display: none;
  position: absolute;
  top: 3px;
  right: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary-color);
}

.chat-settings-dot.visible {
  display: block;
}

.chat-settings-menu {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 0.85rem;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
  min-width: 260px;
  max-width: 300px;
  z-index: 200;
  /* El menú crece hacia ARRIBA (bottom: 100%) y no tenía techo: al desplegar
     «Módulos» con muchos módulos se salía por el borde superior de la pantalla,
     y con `overflow: hidden` ni siquiera aparecía scroll — el contenido de
     arriba quedaba inalcanzable. La versión móvil (hoja inferior) ya se
     limitaba con max-height + scroll; esto es lo mismo para escritorio.
     Se descuentan DOS cosas: ~140px de la barra de escribir (por debajo, que es
     de donde cuelga) y ~60px de aire por arriba. Sin ese aire el menú crece
     hasta besar el borde superior de la ventana y parece cortado aunque quepa.

     TICKET #79: esta cuenta es una APROXIMACIÓN y se quedaba corta —en 1440×780
     daba 530px reales cuando encima del composer solo hay 480, y el menú se
     salía por arriba incluso con todo plegado—. El techo de verdad lo mide
     `fitChatSettingsMenu()` (chat.js) al abrir, al redimensionar y al teclear,
     y lo escribe en línea. Lo de aquí queda como red de seguridad por si el JS
     no llegara a correr. */
  max-height: calc(100vh - 200px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;   /* al llegar al final no arrastra la página */
  /* Al desplegar una sección (p. ej. «Módulos» con sus 10 casillas) el navegador
     reajusta solo el scroll para dejar quieto lo que ya veías — y eso se lleva
     los primeros elementos fuera de vista: abrías Módulos y «Web Search»
     desaparecía. Aquí no interesa: el menú se lee de arriba abajo. */
  overflow-anchor: none;
  animation: chatSettingsIn 0.15s ease-out;
}

@media (min-width: 1100px) {
  .chat-settings-menu { max-height: calc(100vh - 200px); }
}

.chat-settings-menu.visible {
  display: block;
}

.chat-settings-handle {
  display: none;
  justify-content: center;
  padding: 0.4rem 0 0.1rem;
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: 1.1rem;
}

.chat-settings-handle:hover {
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .chat-settings-handle {
    display: flex;
  }
}

.chat-settings-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 199;
}

.chat-settings-overlay.visible {
  display: block;
}

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

.chat-settings-section {
  padding: 0.4rem 0;
}

.chat-settings-divider {
  height: 1px;
  background: var(--border-color);
  margin: 0;
}

.cs-section-title {
  padding: 0.4rem 0.9rem 0.25rem;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.chat-settings-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  color: var(--text-primary);
  font-size: 0.85rem;
  transition: background 0.12s;
}

.chat-settings-item:hover {
  background: var(--bg-secondary);
}

.chat-settings-item > i:first-child {
  font-size: 1.1rem;
  width: 1.4rem;
  text-align: center;
  flex-shrink: 0;
  color: var(--text-secondary);
}

.cs-item-label {
  flex: 1;
  font-weight: 500;
}

.cs-item-arrow {
  color: var(--text-tertiary);
  font-size: 0.85rem;
}

/* Toggle pill */
.cs-item-toggle {
  width: 34px;
  height: 18px;
  border-radius: 9px;
  background: var(--border-medium, #555);
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}

.cs-item-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}

.cs-item-toggle.on {
  background: var(--primary-color);
}

.cs-item-toggle.on::after {
  transform: translateX(16px);
}

/* KB collections inside the menu */
.cs-kb-collections {
  padding: 0 0.5rem 0.3rem 2.4rem;
}

.cs-kb-collections .kb-dropdown-list {
  max-height: 160px;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  padding: 0.2rem 0;
}

/* Módulos (ticket #27) — el listado necesita SU PROPIO techo, no el del menú.
   Era el único sublistado sin él: con 27 módulos instalados entraban 721px de
   golpe y el menú pasaba de 460 a 1180px de contenido (2,8 pantallas medidas en
   1440×900, 3,2 en 1366×768), se veían 3 módulos de 27 y «Modo asistente»
   quedaba a 1388px del inicio. El techo del menú (#79) evitaba que se saliera
   de la pantalla, pero lo estiraba al 58% del alto de la ventana.
   Mismo patrón que .kb-dropdown-list, su vecino de arriba.
   La botonera «Todos/Ninguno» se queda fuera de esta caja a propósito. */
.cs-mod-scroll {
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;   /* al llegar al final no arrastra el menú */
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  padding: 0.15rem 0.2rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border-medium) transparent;
}

.cs-mod-scroll::-webkit-scrollbar {
  width: 5px;
}

.cs-mod-scroll::-webkit-scrollbar-track {
  background: transparent;
  margin: 0.25rem 0;
}

.cs-mod-scroll::-webkit-scrollbar-thumb {
  background: var(--border-medium);
  border-radius: 3px;
}

.cs-mod-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* Preset items in the menu */
.cs-preset-list {
  padding: 0 0.4rem 0.2rem;
}

.cs-preset-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  color: var(--text-primary);
  font-size: 0.8rem;
  border-radius: 0.45rem;
  transition: background 0.12s;
}

.cs-preset-item:hover {
  background: var(--bg-secondary);
}

.cs-preset-item.active {
  background: rgba(99, 102, 241, 0.1);
}

.cs-preset-item > i:first-child {
  font-size: 1rem;
  width: 1.3rem;
  text-align: center;
  flex-shrink: 0;
}

.cs-preset-item .cs-preset-name {
  flex: 1;
  font-weight: 500;
}

.cs-preset-item .cs-preset-check {
  color: var(--primary-color);
  font-size: 0.9rem;
}

.auto-tools-btn {
  background: var(--bg-tertiary, rgba(150, 150, 150, 0.1));
  color: var(--text-tertiary);
  border: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.auto-tools-btn:hover:not(.active) {
  background: var(--bg-hover, rgba(150, 150, 150, 0.2));
  color: var(--text-secondary);
  transform: scale(1.1);
}

.auto-tools-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  box-shadow: 0 3px 12px rgba(102, 126, 234, 0.4);
  animation: pulse-glow 2s ease-in-out infinite;
}

.auto-tools-btn.active:hover {
  transform: scale(1.1);
  box-shadow: 0 5px 16px rgba(102, 126, 234, 0.5);
}

.auto-tools-btn i {
  font-size: 1.05rem;
  transition: transform 0.3s ease;
}

.auto-tools-btn.active i {
  transform: rotate(15deg);
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 3px 12px rgba(102, 126, 234, 0.4);
  }
  50% {
    box-shadow: 0 3px 20px rgba(102, 126, 234, 0.6);
  }
}

/* File Upload Button */
.file-upload-btn {
  background: none;
  border: none;
  color: var(--text-tertiary);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 1.05rem;
  flex-shrink: 0;
}

.file-upload-btn:hover {
  color: var(--primary-color);
  background: rgba(99, 102, 241, 0.08);
  transform: scale(1.1);
}

.file-upload-btn.uploading {
  color: var(--primary-color);
  animation: pulse 2s infinite;
}

/* Web Search Button */
.web-search-btn {
  background: none;
  border: none;
  color: var(--text-tertiary);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 1.05rem;
  position: relative;
  flex-shrink: 0;
}

.web-search-btn:hover {
  color: var(--primary-color);
  background: rgba(99, 102, 241, 0.08);
  transform: scale(1.1);
}

.web-search-btn.active {
  color: var(--primary-color);
  background: rgba(99, 102, 241, 0.1);
}

.web-search-btn.active:hover {
  color: var(--primary-color);
  background: rgba(99, 102, 241, 0.15);
}

.web-search-btn.searching {
  color: var(--primary-color);
  animation: pulse 2s infinite;
}

/* Only show web search button in chat mode */
body:not([data-mode="chat"]) .web-search-btn {
  display: none;
}

/* Knowledge Base Toggle Button */
.kb-toggle-btn {
  background: none;
  border: none;
  color: var(--text-tertiary);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 1.05rem;
  position: relative;
  flex-shrink: 0;
}

.kb-toggle-btn:hover {
  color: var(--primary-color);
  background: rgba(99, 102, 241, 0.08);
  transform: scale(1.1);
}

.kb-toggle-btn.active {
  color: var(--primary-color);
  background: rgba(99, 102, 241, 0.1);
}

.kb-toggle-btn.active:hover {
  color: var(--primary-color);
  background: rgba(99, 102, 241, 0.15);
}

/* Only show KB toggle button in chat mode */
body:not([data-mode="chat"]) .kb-toggle-btn {
  display: none;
}

/* KB Collections Dropdown */
.kb-toggle-wrapper {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.kb-collections-dropdown {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  min-width: 220px;
  max-width: 280px;
  z-index: 100;
  overflow: hidden;
  animation: kbDropdownIn 0.15s ease-out;
}

.kb-collections-dropdown.visible {
  display: block;
}

@keyframes kbDropdownIn {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.kb-dropdown-list {
  max-height: 240px;
  overflow-y: auto;
  padding: 0.35rem 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border-medium) transparent;
}

.kb-dropdown-list::-webkit-scrollbar {
  width: 5px;
}

.kb-dropdown-list::-webkit-scrollbar-track {
  background: transparent;
  margin: 0.25rem 0;
}

.kb-dropdown-list::-webkit-scrollbar-thumb {
  background: var(--border-medium);
  border-radius: 3px;
}

.kb-dropdown-list::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

.kb-collection-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 0.85rem;
  color: var(--text-primary);
  user-select: none;
}

.kb-collection-item:hover {
  background: var(--bg-secondary);
}

.kb-collection-item input[type="checkbox"] {
  accent-color: var(--primary-color);
  width: 15px;
  height: 15px;
  cursor: pointer;
  flex-shrink: 0;
}

.kb-collection-item .kb-col-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.kb-collection-item .kb-col-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kb-collection-item .kb-col-count {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.kb-collection-item.kb-master-toggle {
  font-weight: 600;
}

.kb-col-status {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  border-radius: 0.3rem;
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary-color);
  flex-shrink: 0;
}

.kb-dropdown-divider {
  height: 1px;
  background: var(--border-color);
  margin: 0.3rem 0;
}

.kb-dropdown-section-title {
  padding: 0.35rem 0.85rem 0.15rem;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kb-collection-item.all-toggle {
  font-weight: 600;
}

/* Counter badge on KB button */
.kb-toggle-btn .kb-filter-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--primary-color);
  color: white;
  font-size: 0.6rem;
  font-weight: 700;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

/* Drag & Drop Styles */
.chat-container {
  position: relative;
}

.drag-drop-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(59, 130, 246, 0.1);
  backdrop-filter: blur(4px);
  border: 3px dashed var(--primary-color);
  border-radius: 1rem;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: all 0.3s ease;
}

.drag-drop-overlay.active {
  display: flex;
}

.drag-drop-content {
  text-align: center;
  padding: 2rem;
  background: var(--bg-primary);
  border-radius: 1rem;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-light);
}

.drag-drop-content i {
  font-size: 4rem;
  color: var(--primary-color);
  margin-bottom: 1rem;
  display: block;
}

.drag-drop-content h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.drag-drop-content p {
  color: var(--text-secondary);
  font-size: 1rem;
  margin: 0;
}

.chat-container.drag-over {
  background: rgba(59, 130, 246, 0.05);
}

.chat-container.drag-over .drag-drop-overlay {
  display: flex;
  animation: dragPulse 1s infinite ease-in-out;
}

@keyframes dragPulse {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.02);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.9;
  }
}

.send-btn:disabled {
  background: var(--text-tertiary);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.send-btn i {
  font-size: 1.05rem;
}

.clear-btn {
  background: var(--danger-color);
  color: var(--text-inverse);
  border: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.clear-btn:hover {
  background: #dc2626;
  transform: scale(1.05);
}

.clear-btn i {
  font-size: 1.125rem;
}

/* Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.modal.show {
  display: flex;
}

.modal-content {
  background: var(--bg-primary);
  border-radius: 1rem;
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 400px;
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-light);
}

.modal-header h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.modal-body {
  padding: 1.5rem;
}

.modal-body input {
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  color: var(--text-primary);
  transition: all 0.2s ease;
}

.modal-body input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
}

.modal-footer {
  display: flex;
  gap: 0.75rem;
  padding: 1.5rem;
  border-top: 1px solid var(--border-light);
  justify-content: flex-end;
}

/* ========== File Upload Modal ========== */
.file-upload-modal-content {
  max-width: 520px;
}

.fu-dropzone {
  border: 2px dashed var(--border-medium, #555);
  border-radius: 0.75rem;
  padding: 1.5rem 1rem;
  text-align: center;
  transition: all 0.2s;
  cursor: pointer;
}

.fu-dropzone.dragover {
  border-color: var(--primary-color);
  background: rgba(99, 102, 241, 0.06);
}

.fu-dropzone > i {
  font-size: 2rem;
  color: var(--text-tertiary);
  margin-bottom: 0.5rem;
  display: block;
}

.fu-dropzone p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 0.6rem;
}

.fu-browse-link {
  background: none;
  border: none;
  color: var(--primary-color);
  font-weight: 600;
  cursor: pointer;
  font-size: 0.85rem;
  text-decoration: underline;
}

.fu-formats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  margin-bottom: 0.4rem;
}

.fu-format-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  border-radius: 0.3rem;
  background: var(--bg-secondary);
  color: var(--text-tertiary);
}

.fu-limit {
  font-size: 0.7rem;
  color: var(--text-tertiary);
}

.fu-preview-list {
  margin-top: 0.75rem;
}

.fu-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.fu-clear-btn {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.fu-clear-btn:hover {
  color: #ef4444;
}

.fu-preview-grid {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-medium) transparent;
}

.fu-preview-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border-light);
  border-radius: 0.5rem;
  transition: background 0.15s;
}

.fu-preview-item.error {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.05);
}

.fu-preview-thumb {
  width: 40px;
  height: 40px;
  border-radius: 0.35rem;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  font-size: 1.2rem;
  color: var(--text-tertiary);
}

.fu-preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fu-preview-info {
  flex: 1;
  min-width: 0;
}

.fu-preview-name {
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  color: var(--text-primary);
}

.fu-preview-meta {
  font-size: 0.68rem;
  color: var(--text-tertiary);
}

.fu-preview-error {
  font-size: 0.68rem;
  color: #ef4444;
}

.fu-preview-remove {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.2rem;
  border-radius: 50%;
  flex-shrink: 0;
  transition: all 0.15s;
}

.fu-preview-remove:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

@media (max-width: 768px) {
  .file-upload-modal-content {
    max-width: 100%;
    max-height: 80vh;
    margin: auto 0.5rem 0;
    border-radius: 1rem 1rem 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    animation: chatSettingsMobileIn 0.2s ease-out;
  }
}

.btn {
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.btn-primary {
  background: var(--primary-color);
  color: var(--text-inverse);
}

.btn-primary:hover {
  background: var(--primary-hover);
}

.btn-secondary {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
}

.btn-secondary:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Image Edit Functionality Styles */
.image-buttons {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  gap: 0.5rem;
  opacity: 0;
  transition: all 0.3s ease;
}

.message-image:hover .image-buttons {
  opacity: 1;
}

.image-action-btn {
  background: rgba(0, 0, 0, 0.7);
  border: none;
  color: white;
  padding: 0.5rem;
  border-radius: 0.375rem;
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
}

.image-action-btn:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.05);
}

/* Individual image info badge */
.image-info-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  cursor: pointer;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.message-image:hover .image-info-badge {
  opacity: 1;
}

.image-info-badge i {
  font-size: 0.875rem;
}

.image-info-tooltip {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 4px;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 100;
}

.image-info-badge:hover .image-info-tooltip {
  opacity: 1;
  visibility: visible;
}

/* Individual image delete button */
.image-delete-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(220, 38, 38, 0.8);
  border: none;
  color: white;
  padding: 0.375rem;
  border-radius: 0.375rem;
  cursor: pointer;
  font-size: 0.875rem;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
}

.message-image:hover .image-delete-btn {
  opacity: 1;
}

.image-delete-btn:hover {
  background: rgba(185, 28, 28, 0.95);
  transform: scale(1.1);
}

/* Deleting animation for images */
.message-image.deleting {
  animation: fadeOutScale 0.3s ease forwards;
}

@keyframes fadeOutScale {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}

.edit-image-preview {
  margin-bottom: 1rem;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
}

.edit-image-preview img {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Edit modal wide layout for references */
.modal-content-wide {
  max-width: 700px;
}

.edit-modal-layout {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.edit-modal-layout .edit-image-preview {
  flex: 1;
  min-width: 200px;
  margin-bottom: 0;
}

.edit-section-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.edit-references-section {
  flex: 1;
  min-width: 200px;
}

.edit-references-hint {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  margin: 0 0 0.75rem 0;
}

.edit-references-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  min-height: 60px;
}

.edit-reference-item {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid var(--border-light);
  background: var(--bg-secondary);
}

.edit-reference-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.edit-reference-item .remove-reference-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.edit-reference-item:hover .remove-reference-btn {
  opacity: 1;
}

.add-reference-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border: 1px dashed var(--border-light);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.add-reference-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background: rgba(59, 130, 246, 0.05);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-primary);
}

.btn-outline:hover {
  background: var(--bg-secondary);
}

@media (max-width: 600px) {
  .modal-content-wide {
    max-width: 95%;
  }

  .edit-modal-layout {
    flex-direction: column;
    gap: 1rem;
  }

  .edit-modal-layout .edit-image-preview,
  .edit-references-section {
    min-width: auto;
  }
}

/* Video Generation Modal */
.video-compact-row {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.video-reference-area { display: flex; align-items: center; gap: 0.35rem; }
.video-refs-panel {
  margin-top: 0.6rem; padding: 0.5rem 0.6rem;
  background: var(--bg-tertiary, var(--bg-secondary)); border: 1px dashed var(--border-light);
  border-radius: 0.375rem; min-height: 42px;
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.video-refs-list { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.video-refs-list:empty + .video-refs-empty { display: flex; }
.video-refs-list:not(:empty) + .video-refs-empty { display: none; }
.video-refs-empty {
  display: flex; align-items: center; gap: 0.35rem;
  color: var(--text-secondary); font-size: 0.75rem; opacity: 0.5;
}
.video-mini-btn {
  width: 36px; height: 36px; border: 1px solid var(--border-light); border-radius: 0.375rem;
  background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
  transition: all 0.15s;
}
.video-mini-btn:hover { border-color: var(--primary-color); color: var(--primary-color); }
.video-mini-btn.active { border-color: var(--primary-color); color: var(--primary-color); background: color-mix(in srgb, var(--primary-color) 10%, transparent); }
.video-brand-slot {
  width: 64px; height: 48px; border: 1.5px dashed var(--border-light); border-radius: 6px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--bg-primary); transition: all 0.15s;
}
.video-brand-slot:hover { border-color: var(--primary-color); }
.video-brand-slot.has-image { border-style: solid; border-color: var(--primary-color); }
.video-brand-preview { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--text-secondary); font-size: 0.65rem; }
.video-brand-preview i { font-size: 1rem; }
.video-brand-preview img { max-width: 56px; max-height: 40px; object-fit: contain; }
.video-ai-btn { background: linear-gradient(135deg, var(--primary-color), #8b5cf6); color: #fff !important; border-color: transparent; }
.video-ai-btn:hover { opacity: 0.85; border-color: transparent; color: #fff !important; }
.video-ai-btn:disabled { opacity: 0.5; cursor: wait; }
.video-ai-tip {
  font-size: 0.72rem; color: var(--primary-color); padding: 0.3rem 0; width: 100%;
  display: flex; align-items: center; gap: 0.3rem; animation: fadeIn 0.3s;
}
.video-ai-updated {
  animation: aiFlash 1.5s ease;
}
.video-lang-select {
  padding: 0.3rem 0.5rem; font-size: 0.75rem; border-radius: 0.375rem;
  background: var(--bg-secondary); color: var(--text-primary);
  border: 1px solid var(--border-light); cursor: pointer;
}
.video-lang-select:focus { outline: none; border-color: var(--primary-color); }
.video-avatar-active {
  background: linear-gradient(135deg, #e67e22, #f39c12) !important;
  color: #fff !important; border-color: transparent !important;
}
.video-avatar-active:hover { opacity: 0.85; }
.video-avatar-voice-wrap { display: flex; gap: 0.5rem; align-items: center; }
.extend-suggestions-loading {
  font-size: 0.75rem; color: var(--text-secondary); padding: 0.3rem 0;
}
.extend-suggestions-chips { display: flex; flex-direction: column; gap: 0.35rem; }
.extend-suggestion-chip {
  padding: 0.4rem 0.65rem; font-size: 0.75rem; line-height: 1.3;
  background: var(--bg-secondary); border: 1px solid var(--border-light);
  border-radius: 0.5rem; cursor: pointer; color: var(--text-primary);
  transition: all 0.15s; text-align: left;
}
.extend-suggestion-chip:hover {
  border-color: var(--primary-color); background: var(--bg-hover);
}
.extend-pose-chips { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.extend-pose-chip {
  padding: 0.3rem 0.6rem; font-size: 0.72rem; background: var(--bg-secondary);
  border: 1px solid var(--border-light); border-radius: 1rem; cursor: pointer;
  color: var(--text-secondary); transition: all 0.15s;
}
.extend-pose-chip:hover { border-color: var(--primary-color); color: var(--primary-color); }
.extend-pose-chip.selected { border-color: var(--primary-color); background: color-mix(in srgb, var(--primary-color) 12%, transparent); color: var(--primary-color); }
.extend-pose-custom { width: 100%; padding: 0.4rem 0.6rem; font-size: 0.75rem; border: 1px solid var(--border-light); border-radius: 0.375rem; background: var(--bg-primary); color: var(--text-primary); }
.video-extend-btn {
  background: var(--primary-color) !important; color: #fff !important;
  border-radius: 0.375rem; opacity: 0.85;
}
.video-extend-btn:hover { opacity: 1; }
.video-extend-preview { background: var(--bg-tertiary, var(--bg-secondary)); border-radius: 0.5rem; overflow: hidden; }
@keyframes aiFlash {
  0% { box-shadow: 0 0 0 0 rgba(99,102,241,0.5); }
  30% { box-shadow: 0 0 0 3px rgba(99,102,241,0.3); }
  100% { box-shadow: none; }
}
.video-ref-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--bg-secondary); border: 1px solid var(--border-light);
  border-radius: 0.375rem; padding: 0.2rem 0.5rem 0.2rem 0.2rem;
  font-size: 0.75rem; color: var(--text-secondary); max-width: 180px;
}
.video-ref-chip img {
  width: 28px; height: 28px; border-radius: 0.25rem; object-fit: cover; flex-shrink: 0;
}
.video-ref-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-ref-remove {
  background: none; border: none; color: var(--text-secondary); cursor: pointer;
  padding: 0; margin-left: auto; font-size: 0.7rem; line-height: 1;
  display: flex; align-items: center; opacity: 0.6; transition: opacity 0.15s;
}
.video-ref-remove:hover { opacity: 1; color: var(--danger-color, #e74c3c); }
.video-param-buttons { display: flex; gap: 0.3rem; }
.video-param-btn {
  padding: 0.35rem 0.6rem; border: 1px solid var(--border-light); border-radius: 0.375rem;
  cursor: pointer; font-size: 0.75rem; background: var(--bg-secondary); color: var(--text-primary);
  transition: all 0.15s; display: flex; align-items: center; gap: 0.25rem; line-height: 1;
}
.video-param-btn:hover { border-color: var(--primary-color); background: var(--bg-hover); }
.video-param-btn.selected { border-color: var(--primary-color); background: var(--primary-color); color: #fff; }
.video-model-type-badge {
  font-size: 0.6rem; padding: 0.05rem 0.3rem; border-radius: 0.2rem;
  font-weight: 600; text-transform: uppercase; margin-left: 0.25rem;
}
.video-model-type-badge.t2v { background: var(--primary-color); color: #fff; }
.video-model-type-badge.i2v { background: #e67e22; color: #fff; }
.video-model-select-wrap { position: relative; }
.video-model-select {
  width: 100%; padding: 0.45rem 0.75rem; font-size: 0.8125rem;
  background: var(--bg-secondary); color: var(--text-primary);
  border: 1px solid var(--border-light); border-radius: 0.375rem;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.6rem center;
  cursor: pointer; transition: border-color 0.15s;
}
.video-model-select:focus { outline: none; border-color: var(--primary-color); }
.video-model-select option, .video-model-select optgroup {
  background: var(--bg-secondary); color: var(--text-primary);
}
.form-label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.35rem; }
.form-group { margin-bottom: 1rem; }

.modal-body textarea {
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  color: var(--text-primary);
  transition: all 0.2s ease;
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

.modal-body textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
}

/* Modal de proyecto: los textareas (instrucciones y memoria) se agrandan
   también en horizontal desde la esquina, acotados a su contenedor; el modal
   es más ancho que el resto para que ese arrastre tenga recorrido. */
.project-modal-body textarea {
  resize: both;
  max-width: 100%;
}
.modal-content.project-modal-content {
  /* doble clase: gana a las .modal-content{max-width} que vienen más abajo */
  max-width: min(1100px, 95vw);
}

/* Responsive Design */
@media (max-width: 768px) {
  .app {
    flex-direction: column;
  }

  .mobile-header {
    display: flex;
    /* Con viewport-fit=cover (#36) el contenido pasa por DEBAJO de la barra de
       estado; la cabecera se aparta ella sola. Va también la altura porque es
       fija con box-sizing:border-box — si solo se subiera el padding, el
       contenido se comprimiría dentro de los mismos 60px. */
    padding-top: calc(0.75rem + env(safe-area-inset-top, 0px));
    height: calc(60px + env(safe-area-inset-top, 0px));
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;             /* móvil: ocupa TODO el ancho para ver mejor el contenido */
    height: 100vh;           /* fallback navegadores sin dvh */
    height: 100dvh;          /* dynamic viewport height: respeta la barra del navegador móvil
                                → el footer (user-bar) queda SIEMPRE visible, no se corta */
    max-height: 100dvh;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 200;
    display: flex;
    flex-direction: column;
    overflow: hidden;        /* el scroll lo gestiona .sidebar-scroll; el footer queda fijo */
    /* Ocupa la pantalla entera, así que se aparta por arriba (barra de estado)
       y por abajo (indicador de inicio): si no, la fila del logo y la user-bar
       con el avatar quedan tapadas en la PWA instalada (#36). */
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
  }

  /* Botón de cierre (X) — solo visible en móvil, alineado a la derecha del header */
  .sidebar-close-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 2.1rem;
    height: 2.1rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
  }
  .sidebar-close-mobile:hover { background: var(--bg-hover); color: var(--text-primary); }

  /* Región scrollable: ocupa el espacio libre y scrollea; el .user-bar (hermano,
     fuera de este wrapper) queda SIEMPRE fijo abajo gracias al flex. */
  .sidebar-scroll {
    order: 3;                /* entre acciones(2) y user-bar(4) */
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  /* REORDER SIDEBAR EN MÓVIL — orden lógico (igual que escritorio):
     header → acciones (nuevo chat + buscar) → Proyectos → chats → Módulos → usuario.
     FIX: la regla anterior ordenaba .user-profile-section (elemento ya inexistente;
     hoy es .user-bar). Sin order, .projects-section y .user-bar caían a order:0 y
     FLOTABAN por encima del header. Ahora todas las secciones tienen order explícito.
     Además: scroll ÚNICO en .sidebar (sin scroll anidado en conversaciones) para que
     al expandir Proyectos/Módulos el contenido fluya y NO se corte. */
  /* Header + acciones: COMPACTOS y FIJOS arriba (fuera del wrapper scrollable). */
  .sidebar-header {
    order: 1;
    flex: 0 0 auto;
    padding: 0.5rem 1rem;           /* era 1.5rem → compacto */
  }
  .sidebar-header .logo-icon,
  .sidebar-header .logo-text { max-height: 24px; }
  .sidebar-actions {
    order: 2;
    flex: 0 0 auto;
    padding: 0.5rem 0.75rem;        /* era 1rem → compacto */
    gap: 0.5rem;
  }
  .sidebar-actions .new-chat-btn {
    width: 2.1rem; height: 2.1rem; min-width: 2.1rem;
  }
  .sidebar-actions .search-input { padding-top: 0.45rem; padding-bottom: 0.45rem; }
  .projects-section { order: 3; }
  .conversations-section {
    order: 4;
    flex: 0 0 auto;       /* altura natural; el scroll lo gestiona .sidebar */
    overflow: visible;
    min-height: 0;
  }
  .modules-section {
    order: 5;
    margin-top: 0;
    border-top: 1px solid var(--border-light);
  }
  /* Footer del sidebar fijo abajo: es hermano de .sidebar-scroll (no entra en su
     scroll). Con .sidebar-scroll en flex:1, el footer (flex:0 0 auto) queda pinado
     abajo del drawer tanto si el contenido es corto como si scrollea. */
  .user-bar {
    order: 4;
    flex: 0 0 auto;
    margin-top: 0;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-light);
  }

  /* Make user profile compact in mobile */
  .user-profile-section .user-avatar {
    width: 32px;
    height: 32px;
  }

  .user-profile-section .user-avatar i {
    font-size: 16px;
  }

  .user-profile-section .user-name {
    font-size: 14px;
    font-weight: 500;
  }

  .user-profile-section .plan-badge {
    font-size: 10px;
    padding: 2px 6px;
  }

  .user-profile-compact-stats {
    font-size: 12px;
  }

  .user-profile-compact-stats i {
    font-size: 14px;
  }

  /* Reset conversations-list padding */
  .conversations-list {
    padding-bottom: 0.5rem;
  }

  /* Add margin to last conversation item */
  .conversation-item:last-child {
    margin-bottom: 0.5rem;
  }

  .sidebar.show {
    transform: translateX(0);
  }

  .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 150;
    display: none;
  }

  .sidebar-overlay.show {
    display: block;
  }

  .main-content {
    margin-top: 0;
    height: calc(100vh - 60px); /* Subtract mobile header height */
    max-height: calc(100vh - 60px);
    padding-bottom: 0; /* Remove bottom padding since input-area is fixed */
  }

  /* #87: con una pestaña de módulo abierta, la altura tiene que ser la
     VISIBLE. En iOS Safari 100vh incluye la franja de la barra inferior del
     navegador, y el iframe del módulo (flex:1 aquí dentro) acababa con su
     borde inferior — donde Talk pinta el composer — detrás de esa barra, sin
     nada que deslizar. El chat no lo sufre porque su input es fixed; el
     iframe sí. dvh + safe-areas = el mismo remedio del sidebar (#36).
     Scoped a .module-tab-open: el chat de siempre no cambia ni un píxel. */
  body.module-tab-open .main-content {
    height: calc(100dvh - 60px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 60px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }

  .chat-container {
    padding-bottom: 0; /* Remove padding since input-area is fixed */
  }

  .desktop-theme-toggle {
    display: none;
  }

  .input-container {
    gap: 0.375rem;
    align-items: center;
  }

  .mode-selector {
    order: 1;
  }

  .mode-selector-panel {
    left: 0;
    transform: translateY(10px);
  }

  .mode-selector.expanded .mode-selector-panel {
    transform: translateY(0);
  }

  .mode-selector-trigger .mode-btn {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
  }

  .mode-selector-trigger .mode-btn i {
    font-size: 1rem;
  }

  .input-form {
    flex: 1;
    min-width: 0;
    order: 2;
  }

  .input-wrapper {
    padding: 0.125rem;
  }

  .file-upload-btn,
  .web-search-btn,
  .kb-toggle-btn {
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
    font-size: 0.875rem;
  }

  .session-files-btn,
  .auto-tools-btn,
  .chat-settings-btn,
  .send-btn {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
  }

  /* Chat settings menu: bottom-sheet on mobile */
  .chat-settings-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    border-radius: 1rem 1rem 0 0;
    max-width: 100%;
    min-width: 100%;
    max-height: 70vh;
    overflow-y: auto;
    animation: chatSettingsMobileIn 0.2s ease-out;
  }

  /* En la hoja inferior el techo fijo de 220px se come casi la mitad del alto
     útil (591px medidos en un 390×844), así que aquí se mide en pantalla. */
  .cs-mod-scroll {
    max-height: 34vh;
  }

  .chat-settings-menu.visible ~ .chat-settings-overlay {
    display: block;
  }

  @keyframes chatSettingsMobileIn {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  .session-files-btn i,
  .auto-tools-btn i,
  .send-btn i {
    font-size: 0.875rem;
  }

  #messageInput {
    font-size: 0.9rem;
    padding: 0.5rem 0.375rem;
  }

  .clear-btn {
    order: 3;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    font-size: 1rem;
  }

  .welcome-modes {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    max-width: 100%;
  }

  .mode-card {
    padding: 0.75rem 0.5rem;
    aspect-ratio: auto;
    min-height: 100px;
  }

  .mode-card i {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  .mode-card h3 {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
  }

  .mode-card p {
    font-size: 0.7rem;
    line-height: 1.2;
  }

  .message-content {
    max-width: 85%;
  }

  .welcome-content {
    padding: 1rem;
  }

  .welcome-screen {
    padding: 1rem;
  }

  .welcome-content h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  .welcome-content > p {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
  }

  .message-video video {
    width: 90%;
  }
}

@media (max-width: 480px) {
  .sidebar {
    width: 100%;
  }

  .input-area {
    padding: 0.75rem;
    /* Ticket #36: apartarse del indicador de inicio del iPhone. El inset solo
       existe con viewport-fit=cover (ver el <meta> de index.ejs); donde no hay
       muescas vale 0 y esto es idéntico al padding de siempre. */
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--bg-input);
    border-top: 1px solid var(--border-light);
  }

  /* …salvo cuando el input está en el centro del welcome: ahí el `fixed` de
     arriba lo sacaba del flujo y lo volvía a clavar al fondo, deshaciendo el
     re-parenteo del JS. Era la otra mitad del ticket #36 («sigue viéndose
     abajo»): en escritorio no pasaba porque este `fixed` es solo de móvil. */
  .welcome-input-dock .input-area {
    position: static;
    padding-bottom: 0.75rem;
    /* La regla de arriba repone fondo y borde de dock inferior; dentro del
       welcome no van (en claro no se notaba, en oscuro salía una banda). */
    background: transparent;
    border-top: none;
  }

  .chat-messages {
    padding: 0.75rem;
    /* Hueco para la barra fija; en iPhone esa barra crece lo que mida el
       indicador de inicio (#36), así que el hueco crece con ella o el último
       mensaje se queda debajo. */
    padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px));
  }

  .modal-content {
    margin: 1rem;
    max-width: none;
  }

  .welcome-screen {
    padding: 0.75rem;
    padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px));
  }

  .welcome-modes {
    gap: 0.5rem;
  }

  .mode-card {
    padding: 0.625rem 0.375rem;
    min-height: 90px;
    border-radius: 0.75rem;
  }

  .mode-card i {
    font-size: 1.25rem;
    margin-bottom: 0.375rem;
  }

  .mode-card h3 {
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
  }

  .mode-card p {
    font-size: 0.65rem;
    line-height: 1.15;
  }

  .welcome-content h2 {
    font-size: 1.25rem;
  }

  .welcome-content > p {
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
  }

  /* Fix input area for mobile */
  .input-container {
    gap: 0.25rem;
    flex-wrap: nowrap;
  }

  .input-form {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  .input-wrapper {
    display: flex;
    align-items: center;
    padding: 0.125rem;
    gap: 0.125rem;
  }

  #messageInput {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    padding: 0.5rem 0.25rem;
  }

  .file-upload-btn,
  .web-search-btn,
  .kb-toggle-btn {
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    flex-shrink: 0;
  }

  .file-upload-btn i,
  .web-search-btn i,
  .kb-toggle-btn i {
    font-size: 0.8125rem;
  }

  .session-files-btn,
  .auto-tools-btn,
  .send-btn {
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
    flex-shrink: 0;
  }

  .session-files-btn i,
  .auto-tools-btn i,
  .send-btn i {
    font-size: 0.8125rem;
  }

  .mode-selector-trigger .mode-btn {
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
  }

  .mode-selector-trigger .mode-btn i {
    font-size: 0.8125rem;
  }
}

/* Extra small screens (360px and below) */
@media (max-width: 360px) {
  .input-area {
    padding: 0.5rem;
  }

  .input-container {
    gap: 0.125rem;
  }

  #messageInput {
    font-size: 0.8125rem;
    padding: 0.375rem 0.25rem;
  }

  .file-upload-btn,
  .web-search-btn,
  .kb-toggle-btn {
    width: 1.375rem;
    height: 1.375rem;
    min-width: 1.375rem;
  }

  .file-upload-btn i,
  .web-search-btn i,
  .kb-toggle-btn i {
    font-size: 0.75rem;
  }

  .session-files-btn,
  .auto-tools-btn,
  .send-btn {
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
  }

  .session-files-btn i,
  .auto-tools-btn i,
  .send-btn i {
    font-size: 0.75rem;
  }

  .mode-selector-trigger .mode-btn {
    width: 1.375rem;
    height: 1.375rem;
    min-width: 1.375rem;
  }

  .mode-selector-trigger .mode-btn i {
    font-size: 0.75rem;
  }

  .chat-messages {
    padding-bottom: 120px;
  }

  .welcome-screen {
    padding-bottom: 120px;
  }
}

/* Scrollbar Styling */
.conversations-list::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.tts-voice-cards::-webkit-scrollbar {
  width: 5px;
}

.conversations-list::-webkit-scrollbar-track,
.chat-messages::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.tts-voice-cards::-webkit-scrollbar-track {
  background: transparent;
}

.conversations-list::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.tts-voice-cards::-webkit-scrollbar-thumb {
  background: var(--border-medium);
  border-radius: 3px;
}

.conversations-list::-webkit-scrollbar-thumb:hover,
.chat-messages::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
.tts-voice-cards::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}

.modal-body, .tts-voice-cards {
  scrollbar-width: thin;
  scrollbar-color: var(--border-medium) transparent;
}

/* Theme Transition */
* {
  transition-property: background-color, border-color, color, fill, stroke, box-shadow;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

/* Attached Files UI */
.attached-files {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  max-width: 100%;
  font-size: 0.8rem;
}

.attached-files-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.clear-attachments-btn {
  background: none;
  border: none;
  color: var(--danger-color);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.clear-attachments-btn:hover {
  background: var(--bg-hover);
}

.attached-files-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.attached-file {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  transition: border-color 0.2s;
  max-width: fit-content;
}

.attached-file:hover {
  border-color: var(--border-medium);
}

.attached-file i {
  color: var(--primary-color);
  font-size: 0.9rem;
  flex-shrink: 0;
}

.file-name {
  flex: 1;
  font-size: 0.7rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.remove-file-btn {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.remove-file-btn:hover {
  background: var(--bg-hover);
  color: var(--danger-color);
}

/* Responsive adjustments for attached files */
@media (max-width: 768px) {
  .attached-files {
    margin-left: 0;
    margin-right: 0;
  }

  .attached-file {
    padding: 0.5rem;
  }

  .file-name {
    font-size: 0.8rem;
  }
}

/* Pasted Content Preview UI */
.pasted-content-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  animation: slideDown 0.2s ease-out;
}

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

.pasted-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  position: relative;
  transition: all 0.2s ease;
  max-width: 320px;
}

.pasted-item:hover {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-sm);
}

/* Pasted Image Thumbnail */
.pasted-image .pasted-image-thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pasted-image .pasted-image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Pasted Text Capsule */
.pasted-text {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  cursor: pointer;
}

.pasted-edit-hint {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  vertical-align: middle;
}

.pasted-text:hover .pasted-edit-hint {
  color: var(--primary-color);
}

.pasted-text-preview {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  max-width: 100%;
}

.pasted-text-preview i {
  color: var(--primary-color);
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.pasted-text-snippet {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.4;
  max-height: 3.6em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

/* Pasted Item Info */
.pasted-item-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
  min-width: 0;
}

.pasted-item-name {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pasted-item-type {
  font-size: 0.65rem;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.pasted-item-type i {
  font-size: 0.75rem;
}

.pasted-item-stats {
  font-size: 0.65rem;
  color: var(--text-tertiary);
  font-weight: 500;
}

/* Remove Button */
.pasted-item-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--danger-color);
  color: white;
  border: 2px solid var(--bg-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.2s ease;
}

.pasted-item:hover .pasted-item-remove {
  opacity: 1;
  transform: scale(1);
}

.pasted-item-remove:hover {
  background: #dc2626;
  transform: scale(1.1);
}

/* Edit Button (text capsules) */
.pasted-item-edit {
  position: absolute;
  top: -6px;
  right: 18px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary-color);
  color: white;
  border: 2px solid var(--bg-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.2s ease;
}

.pasted-item:hover .pasted-item-edit {
  opacity: 1;
  transform: scale(1);
}

.pasted-item-edit:hover {
  transform: scale(1.1);
}

/* Pasted Text Edit Modal */
.pasted-edit-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
  animation: fadeIn 0.15s ease-out;
}

.pasted-edit-modal {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg, 0 10px 40px rgba(0, 0, 0, 0.2));
  animation: slideDown 0.2s ease-out;
}

.pasted-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border-light);
}

.pasted-edit-header h3 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pasted-edit-header h3 i {
  color: var(--primary-color);
}

.pasted-edit-close {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 1.125rem;
  padding: 0.25rem;
  border-radius: 6px;
  display: flex;
}

.pasted-edit-close:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}

.pasted-edit-textarea {
  flex: 1;
  min-height: 240px;
  margin: 1rem;
  padding: 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-primary);
  resize: none;
}

.pasted-edit-textarea:focus {
  outline: none;
  border-color: var(--primary-color);
}

.pasted-edit-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 1rem 1rem;
}

.pasted-edit-stats {
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

.pasted-edit-actions {
  display: flex;
  gap: 0.5rem;
}

.pasted-edit-cancel,
.pasted-edit-save {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pasted-edit-cancel {
  background: transparent;
  border: 1px solid var(--border-medium);
  color: var(--text-secondary);
}

.pasted-edit-cancel:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.pasted-edit-save {
  background: var(--primary-color);
  border: 1px solid var(--primary-color);
  color: var(--text-inverse, #fff);
}

.pasted-edit-save:hover {
  opacity: 0.9;
}

/* Clear All Button */
.pasted-clear-all {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: 1px dashed var(--border-medium);
  border-radius: 8px;
  color: var(--text-tertiary);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pasted-clear-all:hover {
  border-color: var(--danger-color);
  color: var(--danger-color);
  background: rgba(239, 68, 68, 0.05);
}

.pasted-clear-all i {
  font-size: 0.875rem;
}

/* Responsive adjustments for pasted content */
@media (max-width: 768px) {
  .pasted-content-preview {
    padding: 0.5rem;
    gap: 0.5rem;
  }

  .pasted-item {
    max-width: 100%;
    width: 100%;
  }

  .pasted-image .pasted-image-thumb {
    width: 48px;
    height: 48px;
  }

  .pasted-item-remove {
    opacity: 1;
    transform: scale(1);
  }
}

/* Image Lightbox Styles */
#imageLightboxModal {
  background: rgba(0, 0, 0, 0.9);
  z-index: 2000;
}

.lightbox-content {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  box-sizing: border-box;
}

.lightbox-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2001;
  transition: all 0.3s ease;
  //color: var(--text-primary);
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.1);
}

.lightbox-close i {
  font-size: 1.5rem;
}

.lightbox-image-container {
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-image-container img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: var(--shadow-xl);
  cursor: grab;
}

.lightbox-image-container img:active {
  cursor: grabbing;
}

/* Make message images clickable */
.message-image img {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.message-image img:hover {
  transform: scale(1.02);
}

/* Mobile responsive for lightbox */
@media (max-width: 768px) {
  .lightbox-close {
    top: calc(env(safe-area-inset-top, 0px) + 1rem);
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
  }

  .lightbox-close i {
    font-size: 1.25rem;
  }

  .lightbox-content {
    padding: 1rem;
    padding-top: calc(env(safe-area-inset-top, 0px) + 4rem);
  }

  .lightbox-image-container {
    max-width: 95vw;
    max-height: 80vh;
  }

  /* Smaller images on mobile */
  .message-image img {
    max-width: 280px;
  }
}

@media (max-width: 480px) {
  .lightbox-close {
    top: calc(env(safe-area-inset-top, 0px) + 0.75rem);
    right: 0.75rem;
    width: 2.25rem;
    height: 2.25rem;
  }

  .lightbox-close i {
    font-size: 1.125rem;
  }

  .lightbox-content {
    padding-top: calc(env(safe-area-inset-top, 0px) + 3.5rem);
  }

  .lightbox-image-container {
    max-height: 75vh;
  }
}

/* HTML Preview Modal */
.html-preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.html-preview-modal.show {
  opacity: 1;
  visibility: visible;
}

.html-preview-modal-content {
  background: var(--bg-primary);
  border-radius: 0.75rem;
  width: 95vw;
  height: 95vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.html-preview-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-light);
}

.html-preview-header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.html-preview-modal-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.html-preview-close {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.html-preview-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.html-preview-close i {
  font-size: 1.5rem;
}

.html-preview-modal-body {
  flex: 1;
  overflow: hidden;
  background: #e5e7eb;
}

/* Modal iframe container with resolution support */
.modal-iframe-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: auto;
  padding: 1rem;
  background: #e5e7eb;
}

.modal-iframe-container iframe {
  height: 100%;
  border: none;
  display: block;
  background: white;
  transition: width 0.3s ease, box-shadow 0.3s ease;
}

.modal-iframe-container.desktop iframe {
  width: 100%;
  height: 100%;
}

.modal-iframe-container.tablet iframe {
  width: 768px;
  max-width: 100%;
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
  border-radius: 8px;
}

.modal-iframe-container.mobile iframe {
  width: 375px;
  max-width: 100%;
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
  border-radius: 8px;
}

/* Authentication Pages */
.auth-container {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 2rem 1rem;
  overflow-x: hidden;
}

:root[data-theme="dark"] .auth-container {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
}

.auth-card {
  background: var(--bg-primary);
  border-radius: 1rem;
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 450px;
  padding: 2.5rem;
}

.auth-header {
  text-align: center;
  margin-bottom: 2rem;
}

.auth-logo {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.auth-header h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.auth-subtitle {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.auth-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
  background: var(--bg-tertiary);
  padding: 0.375rem;
  border-radius: 0.75rem;
}

.auth-tab {
  flex: 1;
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  border-radius: 0.5rem;
  color: var(--text-secondary);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.auth-tab:hover {
  background: var(--bg-hover);
}

.auth-tab.active {
  background: var(--bg-primary);
  color: var(--primary-color);
  box-shadow: var(--shadow-sm);
}

.auth-tab i {
  font-size: 1.25rem;
}

.auth-form-container {
  display: none;
}

.auth-form-container.active {
  display: block;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.form-group label i {
  font-size: 1.125rem;
  color: var(--text-secondary);
}

.form-group input {
  padding: 0.875rem 1rem;
  border: 1.5px solid var(--border-light);
  border-radius: 0.5rem;
  font-size: 1rem;
  color: var(--text-primary);
  background: var(--bg-input);
  transition: all 0.2s ease;
}

.form-group input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.form-group select {
  padding: 0.875rem 2.5rem 0.875rem 1rem;
  border: 1.5px solid var(--border-light);
  border-radius: 0.5rem;
  font-size: 1rem;
  color: var(--text-primary);
  background-color: var(--bg-input);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.form-group select:hover {
  border-color: var(--primary-color);
  background-color: var(--bg-secondary);
}

.form-group select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.form-group select option {
  padding: 0.75rem 1rem;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.form-group small,
.form-group .form-help {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
  line-height: 1.4;
}

.form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.checkbox-label input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}

.link-text {
  color: var(--primary-color);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.link-text:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

.btn {
  padding: 0.875rem 1.5rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-primary {
  background: var(--primary-color);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-block {
  width: 100%;
}

.alert {
  padding: 1rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  animation: slideDown 0.3s ease;
}

.alert i {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.alert-error {
  background: #fef2f2;
  color: #991b1b;
  border-left: 4px solid #ef4444;
}

:root[data-theme="dark"] .alert-error {
  background: #7f1d1d;
  color: #fecaca;
}

.alert-success {
  background: #f0fdf4;
  color: #166534;
  border-left: 4px solid #10b981;
}

:root[data-theme="dark"] .alert-success {
  background: #14532d;
  color: #bbf7d0;
}

.form-note {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 1rem;
  line-height: 1.5;
}

.demo-credentials {
  background: var(--bg-tertiary);
  padding: 1rem;
  border-radius: 0.5rem;
  margin-top: 1.5rem;
  text-align: center;
}

.demo-credentials p {
  margin: 0.25rem 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.demo-credentials p:first-child {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

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

/* Modules Section in Sidebar - Icon Grid */
.modules-section {
  padding: 0.375rem;
  border-top: 1px solid var(--border-light);
  transition: all 0.3s ease;
}

.modules-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.375rem 0.5rem;
  cursor: pointer;
  border-radius: 0.375rem;
  transition: background 0.2s ease;
}

.modules-header:hover {
  background: var(--bg-hover);
}

.modules-title {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
}

.modules-count {
  background: var(--primary-color);
  color: white;
  font-size: 0.6rem;
  padding: 0.1rem 0.35rem;
  border-radius: 8px;
  font-weight: 600;
}

.modules-toggle-icon {
  color: var(--text-tertiary);
  font-size: 0.75rem;
  transition: transform 0.3s ease;
}

.modules-section:not(.collapsed) .modules-toggle-icon {
  transform: rotate(180deg);
}

.modules-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(1.75rem, 1fr));
  gap: 0.35rem;
  overflow: hidden;
  transition: all 0.3s ease;
  /* #119: con 40+ módulos y el grupo «Empresa» al final, 200px recortaba la
     última fila y media; el tope solo acota la animación de plegado. */
  max-height: 480px;
  padding: 0.4rem 0.15rem;
  justify-items: center;
}

.modules-section.collapsed .modules-list {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

/* Ticket #119: separador de grupo dentro de la rejilla de módulos (ocupa la
   fila entera). Mismo tono tipográfico que el título de la sección. */
.modules-group-label {
  grid-column: 1 / -1;
  justify-self: stretch;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.2rem;
  padding: 0.15rem 0.1rem 0.05rem;
  border-top: 1px solid var(--border-light);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
}
.modules-group-label i { font-size: 0.75rem; }
.mods-cards-group {
  grid-column: 1 / -1;
  margin-top: 0.35rem;
  padding: 0.25rem 0.2rem 0.1rem;
  border-top: 1px solid var(--border-color, #dde0ea);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
}

.module-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.4rem;
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 1rem;
  transition: all 0.2s ease;
  background: transparent;
  border: 1px solid var(--border-light);
  cursor: pointer;
}

.module-item:hover {
  transform: scale(1.1);
  color: var(--primary-color);
  border-color: var(--primary-color);
  background: rgba(99, 102, 241, 0.08);
}

.module-item:active {
  transform: scale(0.95);
}

/* Emoji used as a module icon (when the manifest icon isn't a ph- class) */
.module-item .module-emoji {
  font-size: 1.05rem;
  line-height: 1;
}

/* Hide module name on desktop - show only on hover via native title tooltip */
.module-item .module-name {
  display: none;
}

/* Identidad de color por módulo: icono tintado con su --mod-color (paleta
   determinista servida desde el EJS) y borde sutil del mismo tono. */
.module-item[style*="--mod-color"] {
  color: var(--mod-color);
  border-color: color-mix(in srgb, var(--mod-color) 30%, transparent);
}
.module-item[style*="--mod-color"]:hover {
  color: var(--mod-color);
  border-color: var(--mod-color);
  background: color-mix(in srgb, var(--mod-color) 12%, transparent);
}

/* Tag del header: al hacer hover sobre un módulo, su nombre aparece centrado
   en el hueco entre "MÓDULOS (n)" y el chevron, con el color del módulo. */
.module-hover-tag {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 0 8px;
  pointer-events: none;
}
.module-hover-tag[hidden] { display: none; }
.module-hover-tag > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: transparent;
  animation: modTagIn 0.14s ease;
}
.module-hover-tag > span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
@keyframes modTagIn {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .module-hover-tag > span { animation: none; }
}
/* sin hover real (táctil) o sidebar en modo raíl: el tag no aplica */
@media (hover: none) { .module-hover-tag { display: none !important; } }
.sidebar.is-collapsed .module-hover-tag { display: none !important; }

/* Mobile: modules with small label below icon */
@media (max-width: 768px) {
  .modules-section {
    padding: 0.5rem;
  }

  .modules-section:not(.collapsed) {
    padding-bottom: 0.75rem;
  }

  /* Lista compacta de 2 columnas (icono izquierda + nombre) en vez de cards
     grandes: 14 módulos caben en 7 filas densas y se escanean mejor. */
  .modules-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.375rem;
    padding: 0.5rem;
    justify-items: stretch;
    /* Scroll propio para que todos los módulos sean alcanzables dentro del
       layout flex del sidebar. */
    max-height: 40vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .module-item {
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    min-width: 0;
    padding: 0.5rem 0.625rem;
    gap: 0.5rem;
    font-size: 1.05rem;
    border-radius: 0.5rem;
  }

  .module-item i,
  .module-item .module-emoji {
    flex: none;
  }

  /* Show module name on mobile */
  .module-item .module-name {
    display: block;
    flex: 1;
    min-width: 0;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
  }
}

/* User Profile Section in Sidebar - Compact Single Row */
.user-profile-section {
  margin-top: auto;
  padding: 0.5rem;
  border-top: 1px solid var(--border-light);
  transition: all 0.3s ease;
  overflow: hidden;
}

/* Collapsed state */
.user-profile-section.collapsed {
  padding: 0.5rem;
}

.user-profile-section.collapsed .user-profile-expanded {
  display: none;
}

.user-profile-section.collapsed .user-profile-info {
  margin-bottom: 0;
}

/* Header styling - Single row compact */
.user-profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-radius: 0.375rem;
  padding: 0.375rem 0.5rem;
  background: var(--bg-secondary);
}

.user-profile-header:hover {
  background: var(--bg-hover);
}

.user-profile-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

/* Compact stats for collapsed state */
.user-profile-compact-stats {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
}

.compact-counter {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  background: var(--bg-primary);
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 600;
}

.compact-counter.warning {
  background: rgba(251, 191, 36, 0.1);
  color: #f59e0b;
}

.compact-counter.danger {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.compact-counter.token-counter {
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.18), rgba(234, 179, 8, 0.12));
  color: #b45309;
  border: 1px solid rgba(234, 179, 8, 0.35);
}

.compact-counter.token-counter i { color: #eab308; }

.user-actions-stats.token-stats {
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.15), rgba(234, 179, 8, 0.08));
  border: 1px solid rgba(234, 179, 8, 0.3);
  color: #b45309;
}

.user-actions-stats.token-stats i { color: #eab308; }

.billing-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 12px;
  transition: all 0.15s;
}

.billing-link:hover {
  background: var(--bg-tertiary);
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.upgrade-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: white !important;
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25);
  transition: all 0.2s;
}

.upgrade-link i { font-size: 12px; }

.upgrade-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.4);
  background: linear-gradient(135deg, #4f46e5, #4338ca);
}

.profile-toggle-icon {
  color: var(--text-tertiary);
  transition: transform 0.3s ease;
  font-size: 0.75rem;
}

.user-profile-section:not(.collapsed) .profile-toggle-icon {
  transform: rotate(180deg);
}

/* Expanded content */
.user-profile-expanded {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-light);
  transition: all 0.3s ease;
}

/* Compact avatar */
.user-avatar {
  width: 1.5rem;
  height: 1.5rem;
  background: var(--primary-color);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
  overflow: hidden;
}
.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.user-details {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.user-name {
  font-weight: 500;
  color: var(--text-primary);
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-plan {
  display: flex;
  align-items: center;
}

/* Compact plan badge */
.plan-badge {
  display: inline-block;
  padding: 0.1rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.plan-badge.freemium {
  background: var(--surface-secondary);
  color: var(--text-secondary);
}

.plan-badge.premium {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.plan-badge.pro {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
}

.plan-badge.admin {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
}

/* Compact expanded section - single row */
.user-stats {
  display: none; /* Hidden - stats shown in compact row below */
}

.user-stats-label {
  color: var(--text-tertiary);
  font-size: 0.65rem;
}

.user-stats-value {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.7rem;
}

.unlimited-badge {
  color: var(--success-color, #10b981);
  font-size: 0.6rem;
  font-weight: 500;
}

/* Single row: stats + actions */
.user-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* Compact stats inline with actions */
.user-actions-stats {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: var(--bg-primary);
  border-radius: 0.25rem;
  font-size: 0.65rem;
  color: var(--text-secondary);
  margin-right: auto;
}

.user-actions-stats i {
  font-size: 0.7rem;
  color: var(--text-tertiary);
}

.user-action-btn {
  padding: 0.375rem 0.5rem;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.user-action-btn i {
  font-size: 0.85rem;
}

.user-action-btn span {
  display: none; /* Hide text, show only icons */
}

.user-action-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.user-action-btn.logout-btn {
  color: var(--text-tertiary);
}

.user-action-btn.logout-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* Profile Page — 2026 UI/UX centered layout */
.profile-page {
  min-height: 100vh;
  background: var(--bg-secondary);
  padding: 32px 20px 64px;
  display: flex;
  justify-content: center;
}

.profile-container {
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
}

.profile-header {
  margin-bottom: 32px;
  text-align: center;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 20px;
  transition: all 0.2s ease;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
}

.back-btn:hover {
  color: var(--primary-color);
  border-color: var(--primary-color);
  transform: translateX(-2px);
}

.back-btn i {
  font-size: 15px;
}

.profile-header h1 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.5px;
}

.profile-header h1 i {
  font-size: 32px;
  color: var(--primary-color);
}

.profile-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.profile-card {
  background: var(--bg-primary);
  border-radius: 14px;
  padding: 24px 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.profile-card:hover {
  border-color: color-mix(in srgb, var(--primary-color) 25%, var(--border-light));
}

/* ==================== Avatar card (Fase 7) · 2026 centered ==================== */
.profile-avatar-card .avatar-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  padding: 12px 0 8px;
}

.avatar-preview-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 0 0 6px var(--bg-secondary),
    0 0 0 7px var(--border-light),
    0 12px 40px rgba(0, 0, 0, 0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.avatar-preview-wrap:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 0 0 6px var(--bg-secondary),
    0 0 0 7px var(--primary-color),
    0 16px 50px color-mix(in srgb, var(--primary-color) 30%, transparent);
}

.avatar-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 40%, rgba(15, 23, 42, 0.78) 100%);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 20px;
  gap: 3px;
  opacity: 0;
  transition: opacity 0.22s ease;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.avatar-overlay i { font-size: 22px; }
.avatar-preview-wrap:hover .avatar-overlay { opacity: 1; }

.avatar-info {
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.avatar-info-title {
  margin: 0;
  font-size: 15px;
  color: var(--text-primary);
  font-weight: 700;
}

.avatar-info-desc {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  max-width: 420px;
}

.avatar-info-desc code {
  background: var(--bg-tertiary);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-family: 'SF Mono', Monaco, Consolas, monospace;
}

.avatar-info-fallback {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--text-muted);
  font-style: italic;
  max-width: 420px;
}

.avatar-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.profile-card h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 1.5rem 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-light);
}

.profile-card h2 i {
  font-size: 1.5rem;
  color: var(--primary-color);
}

.profile-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.25rem;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.info-item label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-value {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--bg-secondary);
  border-radius: 0.5rem;
  font-size: 0.95rem;
  color: var(--text-primary);
  font-weight: 500;
}

.info-value i {
  font-size: 1.125rem;
  color: var(--primary-color);
  flex-shrink: 0;
}

.badge-admin {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-user {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.85rem;
  font-weight: 600;
}

/* Quick Actions Grid */
.quick-actions-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.action-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 0.75rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.action-link:hover {
  background: var(--bg-tertiary);
  border-color: var(--primary-color);
  transform: translateX(4px);
}

.action-icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-primary);
  color: white;
  border-radius: 0.75rem;
  flex-shrink: 0;
}

.action-icon i {
  font-size: 1.5rem;
}

.action-content {
  flex: 1;
}

.action-content h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.25rem 0;
}

.action-content p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0;
}

.action-arrow {
  font-size: 1.25rem;
  color: var(--text-tertiary);
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.action-link:hover .action-arrow {
  color: var(--primary-color);
  transform: translateX(4px);
}

.profile-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.profile-form .form-group small {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: -0.25rem;
}

.form-message {
  padding: 0.875rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  animation: slideDown 0.3s ease;
}

.form-message.success {
  background: #f0fdf4;
  color: #166534;
  border-left: 4px solid #10b981;
}

:root[data-theme="dark"] .form-message.success {
  background: #14532d;
  color: #bbf7d0;
}

.form-message.error {
  background: #fef2f2;
  color: #991b1b;
  border-left: 4px solid #ef4444;
}

:root[data-theme="dark"] .form-message.error {
  background: #7f1d1d;
  color: #fecaca;
}

/* Responsive */
@media (max-width: 768px) {
  .profile-page {
    padding: 1rem;
  }

  .profile-header h1 {
    font-size: 1.5rem;
  }

  .profile-header h1 i {
    font-size: 1.75rem;
  }

  .profile-card {
    padding: 1.25rem;
  }

  .profile-info-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* SuperAdmin Panel */
.superadmin-page {
  min-height: 100vh;
  background: var(--bg-secondary);
  padding: 1rem;
}

.superadmin-container {
  max-width: 1400px;
  margin: 0 auto;
}

.superadmin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.superadmin-header h1 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.superadmin-header h1 i {
  font-size: 2.25rem;
  color: #667eea;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.user-info {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.user-info strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Statistics Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--bg-primary);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.stat-icon i {
  color: white !important;
}

.stat-icon.users {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-icon.messages {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-icon.conversations {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-icon.admins {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-content {
  flex: 1;
  min-width: 0;
}

.stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.stat-detail {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.stat-trend {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.stat-trend .trend-up {
  color: #10b981;
}

.stat-trend .trend-down {
  color: #ef4444;
}

.stat-trend i {
  font-size: 0.875rem;
}

/* Dashboard Stats Container */
.dashboard-stats-container {
  margin-bottom: 2rem;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.dashboard-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.dashboard-title i {
  color: var(--primary-color);
}

.period-filters {
  display: flex;
  gap: 0.5rem;
}

.period-btn {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-light);
  border-radius: 0.5rem;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.period-btn:hover {
  background: var(--bg-hover);
  border-color: var(--primary-color);
}

.period-btn.active {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

/* Charts Row */
.charts-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.chart-card {
  background: var(--bg-primary);
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}

.chart-header {
  margin-bottom: 1rem;
}

.chart-header h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.chart-header h3 i {
  color: var(--primary-color);
  font-size: 1.1rem;
}

.chart-body {
  height: 200px;
  position: relative;
}

/* Top Users Card */
.top-users-card {
  background: var(--bg-primary);
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  margin-top: 1.5rem;
}

.top-users-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.top-user-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  background: var(--bg-secondary);
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

.top-user-item:hover {
  background: var(--bg-hover);
}

.top-user-rank {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color) 0%, #7c3aed 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.top-user-info {
  flex: 1;
  min-width: 0;
}

.top-user-email {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-user-name {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.top-user-stats {
  flex-shrink: 0;
}

.top-user-messages {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary-color);
  background: rgba(99, 102, 241, 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

/* Top Models List */
.top-models-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.top-model-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--bg-secondary);
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

.top-model-item:hover {
  background: var(--bg-hover);
}

.top-model-rank {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.top-model-info {
  flex: 1;
  min-width: 0;
}

.top-model-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.375rem;
}

.top-model-bar {
  height: 4px;
  background: var(--bg-tertiary);
  border-radius: 2px;
  overflow: hidden;
}

.top-model-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981 0%, #06b6d4 100%);
  border-radius: 2px;
  transition: width 0.5s ease;
}

.top-model-stats {
  flex-shrink: 0;
}

.top-model-count {
  font-size: 0.8rem;
  font-weight: 600;
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

.loading-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.loading-placeholder i {
  animation: spin 1s linear infinite;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  color: var(--text-tertiary);
  font-size: 0.9rem;
}

.empty-state i {
  font-size: 2rem;
  opacity: 0.5;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Responsive: Charts */
@media (max-width: 992px) {
  .charts-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .dashboard-stats-container {
    padding: 1rem;
  }

  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .dashboard-title {
    font-size: 1.25rem;
  }

  .period-filters {
    width: 100%;
  }

  .period-btn {
    flex: 1;
    text-align: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .stat-card {
    padding: 0.875rem;
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }

  .stat-icon {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.1rem;
  }

  .stat-number {
    font-size: 1.5rem;
  }

  .stat-label {
    font-size: 0.7rem;
  }

  .stat-detail {
    font-size: 0.65rem;
  }

  .stat-trend {
    font-size: 0.65rem;
  }

  .chart-card {
    padding: 1rem;
  }

  .chart-header h3 {
    font-size: 0.9rem;
  }

  .top-user-item,
  .top-model-item {
    padding: 0.5rem;
    gap: 0.5rem;
  }

  .top-user-rank,
  .top-model-rank {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.65rem;
  }

  .top-user-email,
  .top-model-name {
    font-size: 0.75rem;
  }

  .top-user-name {
    font-size: 0.65rem;
  }

  .top-user-messages,
  .top-model-count {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .stat-card {
    padding: 0.75rem 0.5rem;
  }

  .stat-icon {
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
    border-radius: 0.5rem;
  }

  .stat-number {
    font-size: 1.25rem;
  }

  .stat-label {
    font-size: 0.65rem;
  }

  .stat-detail {
    font-size: 0.6rem;
  }

  .period-btn {
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
  }
}

/* Navigation Cards Grid */
.nav-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.nav-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 1.25rem 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nav-card:hover {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.nav-card:hover .nav-card-arrow {
  display: none;
}

.nav-card-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-card-icon i {
  font-size: 1.25rem;
  color: white;
}

.nav-card-icon.users {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.nav-card-icon.plans {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.nav-card-icon.invitations {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.nav-card-icon.config {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.nav-card-icon.preferences {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.nav-card-icon.plugins {
  background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
}

.nav-card-icon.customization {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}

.nav-card-content {
  min-width: 0;
}

.nav-card-content h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.125rem 0;
}

.nav-card-content p {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.3;
}

.nav-card-stat {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.nav-card-stat .stat-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-color);
}

.nav-card-stat .stat-label {
  font-size: 0.7rem;
  color: var(--text-tertiary);
}

.nav-card-arrow {
  display: none;
}

@media (max-width: 992px) {
  .nav-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .nav-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .nav-card {
    padding: 1rem 0.75rem;
  }

  .nav-card-icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .nav-card-icon i {
    font-size: 1.25rem;
  }

  .nav-card-content h3 {
    font-size: 0.85rem;
  }

  .nav-card-content p {
    display: none;
  }
}

/* Customization Tab Styles */
.customization-section {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.customization-section h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.25rem 0;
  font-size: 1.1rem;
  color: var(--text-primary);
}

.customization-form .form-group {
  margin-bottom: 1.25rem;
}

.customization-form .form-group label {
  display: block;
  margin-bottom: 0.375rem;
  font-weight: 500;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.customization-form .form-group input,
.customization-form .form-group textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border-light);
  border-radius: 0.5rem;
  font-family: inherit;
  font-size: 0.9rem;
  transition: border 0.2s;
  background: var(--bg-input);
  color: var(--text-primary);
}

.customization-form .form-group input:focus,
.customization-form .form-group textarea:focus {
  outline: none;
  border-color: var(--primary-color);
}

.customization-form .form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.customization-form .form-group small {
  display: block;
  margin-top: 0.25rem;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.customization-form .form-actions {
  padding-top: 1rem;
  border-top: 1px solid var(--border-light);
  text-align: right;
}

/* Brand Grid */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.brand-item {
  text-align: center;
}

.brand-item h4 {
  margin: 0 0 0.75rem 0;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.brand-preview-box {
  background: var(--bg-tertiary);
  border: 2px dashed var(--border-medium);
  border-radius: 0.75rem;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  margin-bottom: 0.75rem;
}

.brand-preview-box.dark {
  background: #1e293b;
}

.brand-preview-box img {
  max-width: 100%;
  max-height: 80px;
  object-fit: contain;
}

.brand-preview-box.empty {
  opacity: 0.5;
}

.brand-status {
  margin-bottom: 0.5rem;
}

.brand-status .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.brand-status .status-badge.default {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.brand-status .status-badge.custom {
  background: #dcfce7;
  color: #166534;
}

[data-theme="dark"] .brand-status .status-badge.custom {
  background: #14532d;
  color: #86efac;
}

.brand-item small {
  display: block;
  color: var(--text-tertiary);
  font-size: 0.7rem;
  margin-bottom: 0.75rem;
}

.brand-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

@media (max-width: 992px) {
  .brand-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .brand-grid {
    grid-template-columns: 1fr;
  }

  .customization-section {
    padding: 1rem;
  }
}

/* Tabs */
.superadmin-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border-light);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  background: none;
  border: none;
  border-radius: 0.5rem 0.5rem 0 0;
  color: var(--text-secondary);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 3px solid transparent;
  text-decoration: none;
}

a.tab-btn {
  font-family: var(--font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}

.tab-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.tab-btn.active {
  background: var(--bg-primary);
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

.tab-btn i {
  font-size: 1.125rem;
}

/* Tab Content */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.section-header h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.section-header h2 i {
  color: var(--primary-color);
}

.section-actions {
  display: flex;
  gap: 0.5rem;
}

/* Data Table */
/* ==================== Data table — 2026 compact + responsive ==================== */
.table-container {
  background: var(--bg-primary);
  border-radius: 14px;
  overflow-x: auto; /* horizontal scroll on narrow viewports */
  overflow-y: visible;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  -webkit-overflow-scrolling: touch;
}

.table-container table {
  overflow: visible;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 760px; /* prevents columns from collapsing too much; horizontal scroll below this */
}

.data-table tbody,
.data-table tr {
  overflow: visible;
}

.data-table th {
  background: var(--bg-tertiary);
  padding: 10px 14px;
  text-align: left;
  font-weight: 700;
  font-size: 11px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: sticky;
  top: 0;
  z-index: 2;
}

.data-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
  font-size: 13px;
  /* Universal truncation for all cells */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.data-table td:last-child {
  overflow: visible;
  position: relative;
  white-space: normal;
  max-width: none;
}

.data-table tr:hover {
  background: var(--bg-hover);
}

.data-table tr:last-child td {
  border-bottom: none;
}

/* Table Elements */
.user-email {
  font-weight: 500;
  color: var(--text-primary);
}

.badge {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-superadmin {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.badge-admin {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
}

.badge-active {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

/* ==================== CREATE USER MODAL STYLES ==================== */

#createUserModal .modal-header {
  background: linear-gradient(135deg, var(--primary-color) 0%, #764ba2 100%);
  color: white;
  border-radius: 0.75rem 0.75rem 0 0;
  padding: 1.25rem 1.5rem;
}

#createUserModal .modal-header h2 {
  color: white;
}

#createUserModal .modal-header h2 i {
  color: white;
}

#createUserModal .modal-header .modal-close {
  color: white;
  opacity: 0.8;
}

#createUserModal .modal-header .modal-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

#createUserModal .modal-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem;
}

#createUserModal .form-group {
  margin-bottom: 0;
}

#createUserModal .form-group label {
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-primary);
}

#createUserModal .form-group label i {
  font-size: 1.1rem;
  color: var(--primary-color);
}

#createUserModal .form-group input,
#createUserModal .form-group select {
  width: 100%;
}

/* Role select with visual indicators */
#create-role {
  font-weight: 500;
}

#create-role option[value="user"] {
  padding-left: 0.5rem;
}

#create-role option[value="admin"] {
  background: linear-gradient(90deg, rgba(240, 147, 251, 0.1), transparent);
}

#create-role option[value="superadmin"] {
  background: linear-gradient(90deg, rgba(102, 126, 234, 0.1), transparent);
}

/* Password field container */
.password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-input-wrapper input {
  flex: 1;
  padding-right: 3rem !important;
}

.password-input-wrapper .password-toggle {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  color: var(--text-secondary);
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.password-input-wrapper .password-toggle:hover {
  color: var(--primary-color);
  background: var(--bg-tertiary);
}

/* Role description help text */
#createUserModal .form-help {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.875rem;
  background: var(--bg-tertiary);
  border-radius: 0.5rem;
  border-left: 3px solid var(--primary-color);
  margin-top: 0.75rem;
  font-size: 0.85rem;
}

#createUserModal .form-help div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

#createUserModal .form-help strong {
  color: var(--text-primary);
  min-width: 110px;
}

/* Plan group transition */
#create-plan-group {
  transition: opacity 0.2s ease, max-height 0.3s ease;
  overflow: hidden;
}

#create-plan-group[style*="display: none"] {
  opacity: 0;
  max-height: 0;
}

/* Modal footer buttons */
#createUserModal .modal-footer {
  border-top: 1px solid var(--border-light);
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  background: var(--bg-secondary);
  border-radius: 0 0 0.75rem 0.75rem;
}

#createUserModal .modal-footer .btn-primary {
  background: linear-gradient(135deg, var(--primary-color) 0%, #764ba2 100%);
  border: none;
}

#createUserModal .modal-footer .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* ==================== END CREATE USER MODAL STYLES ==================== */

.role-select, .plan-select, .status-select {
  padding: 5px 8px;
  border: 1px solid var(--border-light);
  border-radius: 7px;
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 12px;
  min-width: 80px;
  max-width: 160px;
  cursor: pointer;
  font-family: inherit;
}

.user-email {
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 220px;
}

.editable-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 140px;
}

.message-count {
  font-weight: 600;
  font-size: 12px;
  color: var(--primary-color);
}

.unlimited-text {
  color: var(--success-color, #10b981);
  font-weight: 500;
  font-size: 12px;
}

.text-muted {
  color: var(--text-secondary);
  font-style: italic;
  font-size: 12px;
}

.date-text {
  font-size: 12px;
  color: var(--text-secondary);
}

.action-buttons {
  display: flex;
  gap: 3px;
  flex-wrap: nowrap;
}

.btn-icon {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 14px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  flex-shrink: 0;
}

.btn-icon:hover {
  transform: translateY(-1px);
  color: var(--text-primary);
}

.btn-icon.reset-btn:hover {
  background: var(--primary-color);
  color: white;
}

.btn-icon.delete-btn:hover {
  background: var(--danger-color);
  color: white;
}

.btn-icon.view-btn:hover {
  background: #6366f1;
  color: white;
}

.btn-icon.edit-btn:hover {
  background: #f59e0b;
  color: white;
}

.btn-icon.impersonate-btn:hover {
  background: #8b5cf6;
  color: white;
}

.btn-icon.password-btn:hover {
  background: #0ea5e9;
  color: white;
}

/* Impersonation Pill - Minimal floating indicator */
.impersonation-pill {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 9999;
  font-family: inherit;
}

.impersonation-pill-collapsed {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(139, 92, 246, 0.9);
  backdrop-filter: blur(8px);
  border-radius: 20px;
  color: white;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
  transition: all 0.2s ease;
}

.impersonation-pill-collapsed i {
  font-size: 14px;
}

.impersonation-pill-collapsed:hover {
  background: rgba(139, 92, 246, 1);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

.impersonation-pill-expanded {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: rgba(30, 30, 40, 0.95);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  min-width: 200px;
}

.impersonation-pill:hover .impersonation-pill-collapsed,
.impersonation-pill:focus-within .impersonation-pill-collapsed {
  display: none;
}

.impersonation-pill:hover .impersonation-pill-expanded,
.impersonation-pill:focus-within .impersonation-pill-expanded {
  display: flex;
}

.impersonation-pill-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
}

.impersonation-pill-info i {
  color: #8b5cf6;
  font-size: 16px;
}

.impersonation-pill-info span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

.impersonation-pill-exit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: #8b5cf6;
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.impersonation-pill-exit:hover {
  background: #7c3aed;
  transform: translateY(-1px);
}

.impersonation-pill-exit i {
  font-size: 14px;
}

/* Mobile: icon only, tap to expand */
@media (max-width: 768px) {
  .impersonation-pill {
    top: 8px;
    right: 8px;
  }

  .impersonation-pill-collapsed {
    padding: 8px;
    border-radius: 50%;
  }

  .impersonation-pill-collapsed .impersonation-pill-label {
    display: none;
  }

  .impersonation-pill-collapsed i {
    font-size: 16px;
  }

  .impersonation-pill-expanded {
    right: 0;
    min-width: 180px;
  }
}

/* User Detail Modals */
.user-detail-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-light);
}

.user-detail-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.user-detail-section h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.user-detail-section h3 i {
  color: var(--primary-color);
  font-size: 1.25rem;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.detail-item label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.detail-item p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-primary);
  font-weight: 500;
}

@media (max-width: 600px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
}

/* Plans Grid */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.plan-card {
  background: var(--bg-primary);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  transition: all 0.2s ease;
}

.plan-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.plan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.plan-header h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.toggle-btn {
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--danger-color);
  color: white;
}

.toggle-btn.active {
  background: var(--success-color, #10b981);
}

.toggle-btn:hover {
  transform: scale(1.05);
}

.plan-stats {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.plan-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.plan-stat-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.plan-stat-value {
  font-weight: 600;
  color: var(--text-primary);
}

.plan-actions {
  display: flex;
  gap: 0.5rem;
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-content {
  background: var(--bg-primary);
  border-radius: 1rem;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}

.modal-close {
  width: 2rem;
  height: 2rem;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.modal-footer {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 1.5rem;
  border-top: 1px solid var(--border-light);
}

.modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  padding: 1.5rem;
  border-top: 1px solid var(--border-light);
  margin-top: 1.5rem;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.form-section {
  margin-top: 1.5rem;
}

.form-section h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 1rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.parameters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.parameters-grid .form-group {
  margin-bottom: 0;
}

/* Notifications */
.notification {
  position: fixed;
  top: 2rem;
  right: 2rem;
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 1001;
  transform: translateX(400px);
  opacity: 0;
  transition: all 0.3s ease;
  max-width: 400px;
}

.notification.show {
  transform: translateX(0);
  opacity: 1;
}

.notification.success {
  border-left: 4px solid var(--success-color, #10b981);
}

.notification.error {
  border-left: 4px solid var(--danger-color);
}

.notification.info {
  border-left: 4px solid var(--primary-color);
}

.notification i {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.notification.success i {
  color: var(--success-color, #10b981);
}

.notification.error i {
  color: var(--danger-color);
}

.notification.info i {
  color: var(--primary-color);
}

/* Manage Button Style */
.manage-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
}

.manage-btn:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
  .superadmin-page {
    padding: 0.5rem;
  }

  .superadmin-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .superadmin-header h1 {
    font-size: 1.25rem;
  }

  .superadmin-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.25rem;
    padding-bottom: 0.5rem;
  }

  .tab-btn {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .section-header h2 {
    font-size: 1.1rem;
  }

  .table-container {
    overflow-x: auto;
    overflow-y: visible;
  }

  .data-table {
    min-width: 800px;
  }

  .plans-grid {
    grid-template-columns: 1fr;
  }

  .notification {
    right: 1rem;
    left: 1rem;
    transform: translateY(-100px);
    max-width: none;
  }

  .notification.show {
    transform: translateY(0);
  }

  .back-btn {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
  }

  .back-btn span {
    display: none;
  }

  .user-info {
    font-size: 0.75rem;
  }

  .user-info span {
    display: block;
  }
}

/* Configuration Tab Styles */
.models-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

/* Compact cards take less space */
.models-grid:has(.model-card.compact:not(.expanded)) {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

/* Expanded cards take more space */
.model-card.expanded {
  grid-column: span 2;
}

@media (max-width: 1200px) {
  .model-card.expanded {
    grid-column: span 1;
  }
}

.model-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Compact state (default) */
.model-card.compact .model-details {
  display: none;
}

.model-card.compact .model-header {
  cursor: pointer;
  user-select: none;
}

/* Expanded state */
.model-card.expanded .model-details {
  display: block;
}

.model-card.expanded {
  background: var(--bg-primary);
  border-color: var(--accent-color);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
}

.model-card:hover {
  border-color: var(--accent-color);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
  transform: translateY(-2px);
}

.model-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(135deg, var(--bg-primary), var(--bg-secondary));
  text-align: center;
}

.model-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  background: var(--accent-color);
  border-radius: 1rem;
  color: white;
  font-size: 2rem;
}

.model-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.model-info h3 {
  margin: 0 0 0.25rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.model-name {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', monospace;
  background: var(--bg-primary);
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  border: 1px solid var(--border-color);
  display: inline-block;
  max-width: 100%;
  word-break: break-all;
}

.model-actions {
  display: flex;
  gap: 0.5rem;
}

.model-parameters {
  padding: 1.5rem;
}

.model-parameters h4 {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.model-parameters h4::before {
  content: '';
  width: 0.25rem;
  height: 1rem;
  background: var(--accent-color);
  border-radius: 0.125rem;
}

.model-parameters ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.model-parameters li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.875rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.model-parameters li:last-child {
  border-bottom: none;
}

.model-parameters li strong {
  color: var(--text-primary);
  font-weight: 600;
}

.model-parameters li ul {
  margin-top: 0.5rem;
  padding-left: 1rem;
}

.model-parameters li ul li {
  padding: 0.25rem 0;
  border-bottom: 1px solid rgba(var(--border-color-rgb), 0.5);
  font-size: 0.8rem;
}

/* New elements for expandable cards */
.model-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.status-badge.active {
  background: rgba(34, 197, 94, 0.1);
  color: #059669;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.expand-icon {
  font-size: 1.25rem;
  color: var(--text-secondary);
  transition: transform 0.2s ease, color 0.2s ease;
}

.model-card.compact .expand-icon:hover {
  color: var(--accent-color);
  transform: scale(1.1);
}

.model-details {
  border-top: 1px solid var(--border-color);
  background: var(--bg-primary);
}

.model-actions {
  display: flex;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  background: rgba(var(--accent-color-rgb), 0.05);
  border-top: 1px solid var(--border-color);
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.parameters-list {
  max-height: 300px;
  overflow-y: auto;
}

.parameters-list code {
  background: rgba(var(--accent-color-rgb), 0.1);
  color: var(--accent-color);
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.8em;
  font-family: 'Courier New', monospace;
}

.sub-params {
  margin-top: 0.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--border-color);
}

.no-params {
  color: var(--text-secondary);
  font-style: italic;
}

.loading-state, .error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  text-align: center;
  color: var(--text-secondary);
  grid-column: 1 / -1;
}

.loading-state i, .error-state i {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.6;
}

.loading-state i.ph-spin {
  animation: spin 1s linear infinite;
}

.error-state {
  color: #dc2626;
}

.error-state i {
  color: #dc2626;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Responsive adjustments for configuration tab */
@media (max-width: 768px) {
  .models-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .model-header {
    padding: 1rem;
  }

  .model-parameters {
    padding: 1rem;
  }

  .model-icon {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.25rem;
  }
}

/* Logo Styles */
.logo-container {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: 30px;
}

.logo-icon {
  max-height: 19px;
  width: auto;
  object-fit: contain;
}

.logo-text {
  
  width: 120px;
  object-fit: contain;
}

/* Mobile Header Logo */
.mobile-header .header-logo {
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
}

.mobile-header .logo-icon {
  position: absolute;
  left: 3.25rem;
  top: 50%;
  transform: translateY(-50%);
}

.mobile-header .logo-text {
  /* Centered in container */
}

.mobile-header h1 {
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  justify-content: center;
}

/* Sidebar Logo */
.sidebar-header .logo {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}

.sidebar-header .sidebar-logo {
  height: 26px;
  width: 100%;
  justify-content: center;
}

.sidebar-header .logo-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.sidebar-header .logo-text {
  /* Centered in the container */
}

/* Login Page Logo */
.auth-logo .login-logo {
  height: 80px;
  margin: 0 auto;
  justify-content: center;
  gap: 0.75rem;
}

.auth-logo .login-logo .logo-icon {
  height: 80%;
}

.auth-logo .login-logo .logo-text {
  height: 70%;
}

/* Logo dinámico para login - con soporte de tema claro/oscuro */
.auth-logo .login-logo .logo-main {
  max-height: 100%;
  width: auto;
  max-width: 280px;
  object-fit: contain;
}

/* Welcome Screen Inline Logo */
.inline-logo {
  display: inline-flex;
  height: 1.5em;
  vertical-align: middle;
  margin: 0 0.25rem;
}

.logo-text-inline {
  height: 100%;
  width: auto;
  object-fit: contain;
}

/* Dark mode adjustments for logos - Auto invert to white */
:root[data-theme="dark"] .logo-container .logo-text {
  filter: brightness(0) invert(1);
}

:root[data-theme="dark"] .logo-container .logo-icon {
  filter: brightness(0.95);
}

/* Responsive Logo Sizes */
@media (max-width: 768px) {
  .logo-container {
    height: 22px;
  }

  .sidebar-header .sidebar-logo {
    height: 22px;
  }

  .auth-logo .login-logo {
    height: 64px;
  }

  .auth-logo .login-logo .logo-main {
    max-width: 120px;
  }

  .auth-card {
    padding: 1.25rem;
    margin: 0 0.5rem;
  }

  .auth-container {
    padding: 0.75rem 0.5rem;
  }

  .auth-header {
    margin-bottom: 1rem;
  }

  .auth-logo {
    margin-bottom: 0.5rem;
  }

  .auth-subtitle {
    font-size: 0.85rem;
  }

  .auth-tabs {
    margin-bottom: 1rem;
  }

  .auth-form {
    gap: 0.875rem;
  }

  .form-group {
    gap: 0.375rem;
  }

  .form-group input {
    padding: 0.75rem 0.875rem;
    font-size: 0.95rem;
  }

  .form-group label {
    font-size: 0.85rem;
  }

  .mobile-header .header-logo {
    height: 20px;
    min-width: 180px;
  }

  .inline-logo {
    height: 1.25em;
  }
}

/* Message Action Buttons */
.message-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.message.assistant:hover .message-actions,
.message.user:hover .message-actions {
  opacity: 1;
}

.message-action-btn {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
}

.message-action-btn:hover {
  background: var(--bg-hover);
  color: var(--text-secondary);
  transform: scale(1.05);
}

.message-action-btn:active {
  transform: scale(0.95);
}

.stop-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #ef4444;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse-stop 1.5s ease-in-out infinite;
  transition: background 0.2s;
}
.stop-btn:hover {
  background: #dc2626;
}
@keyframes pulse-stop {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.save-html-artifact-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 5px 12px;
  font-size: 0.78rem;
  color: var(--text-tertiary);
  background: transparent;
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.save-html-artifact-btn:hover {
  color: #4361ee;
  border-color: #4361ee;
  background: rgba(67, 97, 238, 0.06);
}
.save-html-artifact-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.save-html-artifact-btn i {
  font-size: 1rem;
}

/* Download Container with Dropdown */
.download-container {
  position: relative;
  display: inline-block;
}

.download-dropdown {
  position: absolute;
  bottom: 100%;
  right: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 0.5rem;
  box-shadow: var(--shadow-lg);
  min-width: 120px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.2s ease;
  margin-bottom: 0.25rem;
}

.download-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-light);
  transition: background-color 0.15s ease;
  white-space: nowrap;
}

.dropdown-item:last-child {
  border-bottom: none;
}

.dropdown-item:hover {
  background: var(--bg-hover);
}

.dropdown-item:first-child {
  border-radius: 0.5rem 0.5rem 0 0;
}

.dropdown-item:last-child {
  border-radius: 0 0 0.5rem 0.5rem;
}

.dropdown-item i {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Message Delete Button */
.message-delete-btn {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 50%;
  font-size: 0.75rem;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  opacity: 0;
  z-index: 150;
  box-shadow: var(--shadow-sm);
}

.message:hover .message-delete-btn {
  opacity: 1;
}

.message-delete-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  transform: scale(1.1);
}

/* Panel "N pasos realizados": va como primer hijo de .message-content, justo
   bajo los badges de esquina (papelera a la izquierda, info de modelo a la
   derecha, ambos absolute 22px). Reservar hueco a ambos lados evita el solape. */
.cc-tasks-summary {
  padding-left: 28px;
  padding-right: 28px;
}
.cc-tasks-summary > summary {
  list-style-position: inside;
}

.message-delete-btn:active {
  transform: scale(0.95);
}

/* Deleting animation */
.message.deleting {
  animation: fadeOut 0.3s ease forwards;
  pointer-events: none;
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-20px);
  }
}

/* Notification Styles */
.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-light);
  font-size: 0.875rem;
  font-weight: 500;
  z-index: 10000;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.3s ease;
  max-width: 300px;
}

.notification.show {
  opacity: 1;
  transform: translateX(0);
}

.notification.success {
  background: var(--accent-color);
  color: white;
  border-color: var(--accent-color);
}

.notification.error {
  background: var(--danger-color);
  color: white;
  border-color: var(--danger-color);
}

/* Mobile Responsiveness for Actions */
@media (max-width: 768px) {
  .message-actions {
    margin-top: 0.75rem;
    opacity: 1; /* Always visible on mobile */
  }

  .message-action-btn {
    min-width: 32px;
    height: 32px;
    font-size: 1rem;
  }

  .download-dropdown {
    min-width: 140px;
    right: -10px;
  }

  .notification {
    right: 10px;
    top: 10px;
    max-width: calc(100vw - 20px);
  }
}

/* ============================================
   SKELETON LOADING & SHIMMER EFFECTS
   ============================================ */

/* Skeleton base */
.skeleton-loader {
  position: relative;
  overflow: hidden;
  background: var(--bg-tertiary);
  border-radius: 8px;
}

/* Shimmer animation */
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.skeleton-loader::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
  animation: shimmer 2s infinite ease-in-out;
}

[data-theme="dark"] .skeleton-loader::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 100%
  );
}

/* Image skeleton */
.skeleton-image {
  width: 100%;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.skeleton-image-icon {
  position: absolute;
  color: var(--text-tertiary);
  font-size: 48px;
  opacity: 0.3;
  z-index: 1;
  animation: pulse 2s ease-in-out infinite;
}

/* Video skeleton */
.skeleton-video {
  width: 100%;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.skeleton-video-icon {
  position: absolute;
  color: var(--text-tertiary);
  font-size: 64px;
  opacity: 0.3;
  z-index: 1;
  animation: pulse 2s ease-in-out infinite;
}

/* Audio skeleton */
.skeleton-audio {
  width: 100%;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.skeleton-audio-waves {
  display: flex;
  gap: 4px;
  align-items: center;
  z-index: 1;
}

.skeleton-audio-wave {
  width: 3px;
  background: var(--text-tertiary);
  border-radius: 2px;
  opacity: 0.3;
  animation: wave 1s ease-in-out infinite;
}

.skeleton-audio-wave:nth-child(1) {
  height: 12px;
  animation-delay: 0s;
}

.skeleton-audio-wave:nth-child(2) {
  height: 24px;
  animation-delay: 0.1s;
}

.skeleton-audio-wave:nth-child(3) {
  height: 18px;
  animation-delay: 0.2s;
}

.skeleton-audio-wave:nth-child(4) {
  height: 30px;
  animation-delay: 0.3s;
}

.skeleton-audio-wave:nth-child(5) {
  height: 20px;
  animation-delay: 0.4s;
}

.skeleton-audio-wave:nth-child(6) {
  height: 16px;
  animation-delay: 0.5s;
}

.skeleton-audio-wave:nth-child(7) {
  height: 24px;
  animation-delay: 0.6s;
}

@keyframes wave {
  0%, 100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.5);
  }
}

/* Progress bar */
.skeleton-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--bg-tertiary);
  overflow: hidden;
  z-index: 2;
}

.skeleton-progress-bar {
  height: 100%;
  background: var(--primary-color);
  transition: width 0.3s ease;
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 10px var(--primary-color);
}

/* Progress percentage */
.skeleton-progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 600;
  z-index: 1;
  opacity: 0.5;
}

/* Pulse animation */
@keyframes pulse {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
}

/* Loading fade-in */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.media-loaded {
  animation: fadeIn 0.5s ease-in;
}

/* Skeleton container in messages */
.message-image .skeleton-loader,
.message-video .skeleton-loader,
.message-audio .skeleton-loader {
  margin-bottom: 8px;
}

/* Hide skeleton when media is loaded */
.skeleton-loader.hidden {
  display: none;
}

/* ==================== SUPERADMIN FOOTER ==================== */
.superadmin-footer {
  background: transparent;
  padding: 0.75rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-top: 3rem;
  border-top: 1px solid var(--border-light);
  opacity: 0.6;
  transition: opacity 0.2s;
}

.superadmin-footer:hover {
  opacity: 1;
}

/* ==================== USER FILTERS & PAGINATION ==================== */
.users-filters {
  background: var(--bg-secondary);
  padding: 1.25rem;
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border-light);
}

.search-box {
  position: relative;
  margin-bottom: 1rem;
}

.search-box i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 1.125rem;
}

.search-box input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 3rem;
  border: 1px solid var(--border-light);
  border-radius: 0.5rem;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.9375rem;
  transition: all 0.2s;
}

.search-box input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.filter-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.filter-select {
  flex: 1;
  min-width: 150px;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border-light);
  border-radius: 0.5rem;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.results-info {
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-align: right;
}

.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding: 1rem;
}

.pagination-pages {
  display: flex;
  gap: 0.375rem;
}

.page-btn {
  min-width: 2.5rem;
  padding: 0.5rem 0.75rem;
}

.page-btn.active {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.pagination-container .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .filter-row {
    flex-direction: column;
  }

  .filter-select {
    width: 100%;
  }

  .results-info {
    text-align: center;
  }
}

/* ========================================
   Background Processing Indicator
   ======================================== */
.background-processing-indicator {
  position: fixed;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--background-color);
  border: 2px solid var(--primary-color);
  border-radius: 30px;
  padding: 12px 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: slideUpFade 0.3s ease-out;
}

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.background-processing-indicator .processing-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.background-processing-indicator .processing-spinner {
  width: 20px;
  height: 20px;
  border: 3px solid var(--border-color);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.background-processing-indicator span {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color);
}

/* Dark mode adjustments */
body.dark-mode .background-processing-indicator {
  background: var(--message-bg);
  border-color: var(--primary-color);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .background-processing-indicator {
    bottom: 100px;
    max-width: 90%;
    padding: 10px 20px;
  }

  .background-processing-indicator span {
    font-size: 13px;
  }

  .background-processing-indicator .processing-spinner {
    width: 18px;
    height: 18px;
  }
}

/* ==================== MY SHARES PAGE ==================== */

.my-shares-page {
  min-height: 100vh;
  background: var(--bg-secondary);
  padding-bottom: 2rem;
}

.my-shares-page .page-header {
  background: var(--gradient-primary);
  color: white;
  padding: 2rem 0;
  margin-bottom: 2rem;
}

.my-shares-page .page-header .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.my-shares-page .back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  transition: color 0.2s;
}

.my-shares-page .back-btn:hover {
  color: white;
}

.my-shares-page .page-header h1 {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.my-shares-page .page-header h1 i {
  font-size: 2.5rem;
}

.my-shares-page .subtitle {
  font-size: 1rem;
  opacity: 0.9;
  margin: 0;
}

.my-shares-page .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Empty State */
.empty-state-large {
  text-align: center;
  padding: 4rem 2rem;
  background: var(--bg-primary);
  border-radius: 1rem;
  border: 2px dashed var(--border-light);
}

.empty-state-large i {
  font-size: 5rem;
  color: var(--text-tertiary);
  margin-bottom: 1.5rem;
}

.empty-state-large h2 {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.75rem 0;
}

.empty-state-large p {
  font-size: 1rem;
  color: var(--text-secondary);
  margin: 0 0 2rem 0;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* Shares Grid */
.shares-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

/* Share Card */
.share-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 0.75rem;
  padding: 1.25rem;
  transition: all 0.3s ease;
  position: relative;
}

.share-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-color);
}

.share-card.inactive {
  opacity: 0.6;
  background: var(--bg-secondary);
}

.share-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-light);
}

.share-id {
  font-family: 'Courier New', monospace;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-color);
}

.share-status {
  display: flex;
  gap: 0.5rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-active {
  background: #d1fae5;
  color: #065f46;
}

.badge-inactive {
  background: #e5e7eb;
  color: #6b7280;
}

.badge-expired {
  background: #fee2e2;
  color: #991b1b;
}

body.dark-mode .badge-active {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
}

body.dark-mode .badge-inactive {
  background: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
}

body.dark-mode .badge-expired {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

/* Share Card Meta */
.share-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.share-card-meta span {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.share-card-meta i {
  font-size: 1rem;
  color: var(--primary-color);
}

/* Share Card Actions */
.share-card-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--border-light);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 1.25rem;
}

.btn-icon:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
  transform: scale(1.05);
}

.btn-icon.btn-danger:hover {
  background: #ef4444;
  border-color: #ef4444;
}

/* ==================== ANALYTICS MODAL ==================== */

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.modal-content {
  position: relative;
  max-width: 700px;
  max-height: 90vh;
  overflow-y: auto;
  margin: 2rem auto;
  background: var(--bg-primary);
  border-radius: 1rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-secondary);
  border-radius: 1rem 1rem 0 0;
}

.modal-header h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-primary);
}

.modal-header h3 i {
  color: var(--primary-color);
}

.btn-close {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  transition: all 0.2s;
}

.btn-close:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  background: var(--bg-secondary);
  border-radius: 0 0 1rem 1rem;
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 0.75rem;
  padding: 1.25rem;
  text-align: center;
  transition: all 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  font-size: 2rem;
  color: var(--primary-color);
  margin-bottom: 0.75rem;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

/* Chart Section */
.chart-section {
  margin-bottom: 2rem;
}

.chart-section h4 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 1rem 0;
}

.bar-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 180px;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 0.75rem;
  margin-bottom: 0.5rem;
}

.chart-bar {
  flex: 1;
  background: var(--gradient-primary);
  border-radius: 0.375rem 0.375rem 0 0;
  min-height: 8px;
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
}

.chart-bar:hover {
  opacity: 0.8;
  transform: scaleY(1.05);
}

.bar-label {
  position: absolute;
  top: -1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.chart-labels {
  display: flex;
  justify-content: space-around;
  padding: 0 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
}

/* QR Section */
.qr-section {
  text-align: center;
  padding: 1.5rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
}

.qr-section h4 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 1rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.qr-section h4 i {
  color: var(--primary-color);
}

.qr-image {
  max-width: 300px;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  background: white;
  padding: 1rem;
}

/* Link Section */
.link-section {
  margin-bottom: 1rem;
}

.link-section h4 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 1rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.link-section h4 i {
  color: var(--primary-color);
}

.link-copy-row {
  display: flex;
  gap: 0.5rem;
}

.link-copy-row input {
  flex: 1;
  padding: 0.75rem;
  border: 1px solid var(--border-light);
  border-radius: 0.5rem;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: 'Courier New', monospace;
  font-size: 0.875rem;
}

.link-copy-row input:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* Notification Toast */
.notification-toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: 1rem 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border-light);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 10000;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s ease;
}

.notification-toast.show {
  transform: translateY(0);
  opacity: 1;
}

.notification-toast i {
  font-size: 1.5rem;
}

.notification-success {
  border-color: #10b981;
}

.notification-success i {
  color: #10b981;
}

.notification-error {
  border-color: #ef4444;
}

.notification-error i {
  color: #ef4444;
}

.notification-info {
  border-color: var(--primary-color);
}

.notification-info i {
  color: var(--primary-color);
}

/* ==================== RESPONSIVE DESIGN ==================== */

@media (max-width: 768px) {
  .my-shares-page .page-header {
    padding: 1.5rem 0;
  }

  .my-shares-page .page-header h1 {
    font-size: 1.5rem;
  }

  .my-shares-page .page-header h1 i {
    font-size: 2rem;
  }

  .shares-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .share-card-actions {
    justify-content: center;
  }

  .modal-content {
    margin: 1rem;
    max-height: calc(100vh - 2rem);
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-card {
    padding: 1rem;
  }

  .stat-value {
    font-size: 1.5rem;
  }

  .bar-chart {
    height: 140px;
  }

  .notification-toast {
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
    max-width: calc(100% - 2rem);
  }
}

/* ============================================
   Quick Plugin Modal (Prompts, etc.)
   ============================================ */

.modal.active {
  display: flex;
}

.quick-plugin-modal-content {
  max-width: 480px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.quick-plugin-modal-content .modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  min-height: 300px;
}

.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--text-secondary);
}

.loading-spinner i {
  font-size: 32px;
  animation: spin 1s linear infinite;
}

.loading-spinner p {
  margin-top: 10px;
  font-size: 14px;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Mode Separator */
.mode-separator {
  width: 1px;
  height: 24px;
  background: var(--border-light);
  margin: 0 4px;
}

/* Quick Button Style */
.mode-btn.quick-btn {
  color: var(--accent-color);
}

.mode-btn.quick-btn:hover {
  color: var(--primary-color);
  background: rgba(99, 102, 241, 0.1);
}

/* Error state in modal */
.quick-plugin-modal-content .error {
  color: var(--danger-color);
  text-align: center;
  padding: 40px 20px;
}

/* Responsive for quick plugin modal */
@media (max-width: 640px) {
  .quick-plugin-modal-content {
    max-width: 100%;
    max-height: 90vh;
    margin: 10px;
  }
}

/* ===== Confirm Modal with Timeout ===== */
.confirm-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}

.confirm-modal.active {
  opacity: 1;
  visibility: visible;
}

.confirm-modal-content {
  background: var(--bg-primary);
  border-radius: 1rem;
  padding: 1.5rem;
  max-width: 360px;
  width: 90%;
  text-align: center;
  transform: scale(0.9);
  transition: transform 0.2s ease;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.confirm-modal.active .confirm-modal-content {
  transform: scale(1);
}

.confirm-modal-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  background: rgba(239, 68, 68, 0.1);
}

.confirm-modal-icon i {
  font-size: 1.75rem;
  color: var(--danger-color, #ef4444);
}

.confirm-modal[data-type="warning"] .confirm-modal-icon {
  background: rgba(245, 158, 11, 0.1);
}

.confirm-modal[data-type="warning"] .confirm-modal-icon i {
  color: #f59e0b;
}

.confirm-modal[data-type="info"] .confirm-modal-icon {
  background: rgba(59, 130, 246, 0.1);
}

.confirm-modal[data-type="info"] .confirm-modal-icon i {
  color: #3b82f6;
}

.confirm-modal-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}

.confirm-modal-message {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0 0 1.5rem;
  line-height: 1.5;
}

.confirm-modal-actions {
  display: flex;
  gap: 0.75rem;
}

.confirm-modal-btn {
  flex: 1;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.confirm-modal-cancel {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.confirm-modal-cancel:hover {
  background: var(--bg-tertiary);
}

.confirm-modal-confirm {
  background: var(--danger-color, #ef4444);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.confirm-modal-confirm:hover {
  background: #dc2626;
}

.confirm-btn-countdown {
  font-size: 0.75rem;
  opacity: 0.9;
}

/* Dark mode adjustments */
[data-theme="dark"] .confirm-modal-content {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* ============================================
   Knowledge Base Sources Indicator
   ============================================ */

.kb-sources-indicator {
  margin-top: 0.75rem;
  background: var(--bg-secondary, #f8f9fa);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
  font-size: 0.875rem;
}

[data-theme="dark"] .kb-sources-indicator {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.3);
}

.kb-sources-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  color: var(--primary-color, #6366f1);
  font-weight: 500;
  transition: background 0.2s;
}

.kb-sources-header:hover {
  background: var(--bg-hover, rgba(99, 102, 241, 0.1));
}

.kb-sources-header i.ph-books {
  font-size: 1rem;
}

.kb-sources-header span {
  flex: 1;
}

.kb-sources-toggle {
  background: none;
  border: none;
  color: inherit;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.kb-sources-list {
  border-top: 1px solid var(--border-color, #e5e7eb);
  max-height: 200px;
  overflow-y: auto;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}

.kb-sources-list.collapsed {
  max-height: 0;
  opacity: 0;
  border-top: none;
  padding: 0;
}

.kb-source-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  color: var(--text-primary, #1f2937);
  text-decoration: none;
  transition: background 0.2s;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.kb-source-item:last-child {
  border-bottom: none;
}

.kb-source-item:hover {
  background: var(--bg-hover, rgba(99, 102, 241, 0.1));
}

.kb-source-item i {
  color: var(--primary-color, #6366f1);
  font-size: 1rem;
}

.kb-source-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-source-similarity {
  background: var(--primary-color, #6366f1);
  color: white;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

[data-theme="dark"] .kb-source-item {
  color: var(--text-primary, #f3f4f6);
  border-color: rgba(99, 102, 241, 0.2);
}

/* Fuentes multimedia (galería KB) con miniatura */
.kb-source-item--media {
  align-items: stretch;
  gap: 0.625rem;
}
.kb-source-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 56px;
  height: 42px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-secondary, #f3f4f6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kb-source-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kb-source-thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  font-size: 1.4rem !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  pointer-events: none;
}
.kb-source-thumb--audio {
  background: linear-gradient(135deg, #10b981, #0ea5e9);
}
.kb-source-thumb--audio i {
  color: #fff !important;
  font-size: 1.3rem !important;
}
.kb-source-item--media .kb-source-meta {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.kb-source-item--media .kb-source-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* Media incrustada en el cuerpo de la respuesta del chat (KB assets) */
.kb-chat-media {
  display: block;
  max-width: 100%;
  margin: 0.5rem 0;
  border-radius: 10px;
}
.kb-chat-image {
  max-height: 60vh;
  object-fit: contain;
}
.kb-chat-video {
  max-height: 60vh;
  background: #000;
}
.kb-chat-audio {
  width: 100%;
}
.kb-chat-audio audio {
  width: 100%;
  max-width: 480px;
}

/* ==========================================
   MEDIA LIBRARY MODAL
   ========================================== */

.modal-content-large {
  max-width: 900px;
  width: 95%;
  max-height: 85vh;
}

.media-library-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.media-library-tabs {
  display: flex;
  gap: 0.5rem;
}

.media-tab {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-color, #e5e7eb);
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-secondary, #6b7280);
  transition: all 0.2s;
}

.media-tab:hover {
  background: var(--bg-secondary, #f3f4f6);
}

.media-tab.active {
  background: var(--primary-color, #6366f1);
  color: white;
  border-color: var(--primary-color, #6366f1);
}

.media-library-info {
  font-size: 0.875rem;
  color: var(--text-secondary, #6b7280);
}

.media-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.75rem;
  max-height: 50vh;
  overflow-y: auto;
  padding: 0.5rem;
}

.media-library-loading,
.media-library-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: var(--text-secondary, #6b7280);
  text-align: center;
}

.media-library-loading i,
.media-library-empty i {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  opacity: 0.5;
}

.media-library-empty span {
  font-size: 0.8rem;
  opacity: 0.7;
}

.media-library-slots-info {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary, #f3f4f6);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--text-secondary, #6b7280);
  margin-bottom: 0.5rem;
}

.media-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s;
}

.media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-item:hover {
  border-color: var(--primary-color, #6366f1);
  transform: scale(1.02);
}

.media-item.selected {
  border-color: var(--primary-color, #6366f1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}

.media-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.2s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.5rem;
}

.media-item:hover .media-item-overlay,
.media-item.selected .media-item-overlay {
  opacity: 1;
}

.media-item-check {
  align-self: flex-end;
}

.media-item-check i {
  font-size: 1.5rem;
  color: white;
  opacity: 0;
  transition: opacity 0.2s;
}

.media-item.selected .media-item-check i {
  opacity: 1;
  color: var(--primary-color, #6366f1);
  background: white;
  border-radius: 50%;
}

.media-item-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.media-item-source,
.media-item-date {
  font-size: 0.7rem;
  color: white;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.media-item-date {
  opacity: 0.8;
}

/* Shake animation for max selection */
.media-item.shake {
  animation: shake 0.5s ease-in-out;
}

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

/* Reference buttons container */
.reference-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.library-btn {
  flex: 1;
}

.library-btn i {
  margin-right: 0.25rem;
}

/* Library badge on reference items */
.edit-reference-item .library-badge,
.reference-thumbnail .library-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: var(--primary-color, #6366f1);
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}

/* Dark theme adjustments */
[data-theme="dark"] .media-library-header {
  border-color: var(--border-color, #374151);
}

[data-theme="dark"] .media-tab {
  border-color: var(--border-color, #374151);
  color: var(--text-secondary, #9ca3af);
}

[data-theme="dark"] .media-tab:hover {
  background: var(--bg-tertiary, #1f2937);
}

[data-theme="dark"] .media-library-slots-info {
  background: var(--bg-tertiary, #1f2937);
}

[data-theme="dark"] .media-item {
  background: var(--bg-tertiary, #1f2937);
}

/* Responsive */
@media (max-width: 768px) {
  .modal-content-large {
    max-width: 100%;
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .media-library-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    max-height: 60vh;
  }

  .media-library-header {
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
  }
}

/* ==================== SIDE PANEL ==================== */

.side-panel {
  width: 0;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  border-left: 1px solid var(--border-color);
  transition: width 0.3s ease, min-width 0.3s ease;
  position: relative;
  z-index: 50;
}

.side-panel.open {
  width: 480px;
  min-width: 360px;
  max-width: 92vw;
}

.side-panel-resize-handle {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 60;
  background: transparent;
  transition: background 0.2s;
}

.side-panel-resize-handle:hover,
.side-panel-resize-handle.dragging {
  background: var(--accent-primary, #667eea);
  opacity: 0.5;
}

.side-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
  gap: 0.5rem;
  flex-shrink: 0;
  min-height: 48px;
  position: relative;
  z-index: 10;
}

.side-panel-tabs {
  display: flex;
  gap: 0.25rem;
  min-width: 0;
  overflow: hidden;
}

.side-panel-tab {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 0.35rem 0.75rem;
  border-radius: 0.375rem;
  cursor: pointer;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.2s;
  white-space: nowrap;
}

.side-panel-tab:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.side-panel-tab.active {
  background: var(--bg-hover);
  color: var(--text-primary);
  font-weight: 600;
}

.side-panel-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.side-panel-artifact-select {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  max-width: 140px;
  cursor: pointer;
}

.side-panel-action-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.side-panel-action-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.side-panel-action-btn.success {
  color: var(--success-color, #22c55e);
}

/* Mobile menu for side panel */
.sp-mobile-only { display: none; }
.sp-mobile-menu-wrapper { position: relative; display: none; }

@media (max-width: 768px) {
  .sp-desktop-only { display: none !important; }
  .sp-mobile-only { display: flex !important; }
  .sp-mobile-menu-wrapper { display: block !important; }
}

.sp-mobile-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 0.5rem;
  box-shadow: var(--shadow-lg);
  min-width: 160px;
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: all 0.15s ease;
}
.sp-mobile-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sp-mobile-dropdown-section {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border-light);
}
.sp-mobile-artifact-select {
  width: 100%;
  padding: 0.3rem 0.4rem;
  font-size: 0.8rem;
  border: 1px solid var(--border-light);
  border-radius: 0.3rem;
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.sp-mobile-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--text-primary);
  text-align: left;
}
.sp-mobile-dropdown-item:hover {
  background: var(--bg-hover);
}
.sp-mobile-dropdown-item i {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.session-files-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  margin: 0.5rem 0;
  border: 1px solid var(--border-light);
  border-radius: 0.5rem;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.session-files-link-btn:hover {
  background: var(--accent-color, #4361ee);
  color: #fff;
  border-color: var(--accent-color, #4361ee);
}
.session-files-link-btn i {
  font-size: 0.9rem;
}

.side-panel-separator {
  width: 1px;
  height: 1.25rem;
  background: var(--border-color);
  flex-shrink: 0;
}

.side-panel-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.side-panel-tab-content {
  display: none;
  flex: 1;
  overflow: hidden;
  position: relative;
}

.side-panel-tab-content.active {
  display: flex;
  flex-direction: column;
}

.side-panel-iframe-container {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  position: relative;
}

.side-panel-iframe-container.desktop {
  max-width: 100%;
}

.side-panel-iframe-container.tablet {
  max-width: 768px;
  margin: 0 auto;
}

.side-panel-iframe-container.mobile {
  max-width: 375px;
  margin: 0 auto;
}

.side-panel-iframe-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: #ffffff;
}

/* Artifact editor (CodeMirror lateral) — Fase 1.3 */
.artifact-editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-secondary);
  flex-shrink: 0;
}
.artifact-editor-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.artifact-editor-label i {
  color: var(--primary-color);
  flex-shrink: 0;
}
.artifact-editor-version {
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--bg-tertiary);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
}
.artifact-editor-dirty {
  color: var(--warning-color, #f59e0b);
  font-size: 16px;
  line-height: 1;
  margin-left: 4px;
}
.artifact-editor-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.artifact-editor-actions .btn-sm {
  padding: 5px 10px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.artifact-editor-actions .btn-sm[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.artifact-editor-host {
  flex: 1;
  min-height: 0;
  position: relative;
  background: var(--bg-primary);
  display: flex;
  overflow: hidden;
}

/* Shell = wrapper that pairs gutter + textarea side-by-side at full height */
.artifact-editor-shell {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  position: relative;
}

/* Gutter — line numbers column. Scroll is driven from the textarea's scroll
   handler so the numbers stay aligned with their lines.
   font-size/line-height/padding MUST match the textarea exactly. */
.artifact-editor-gutter {
  flex: 0 0 auto;
  min-width: 44px;
  padding: 12px 0;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-light);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.55;
  text-align: right;
  color: var(--text-tertiary);
  user-select: none;
  overflow: hidden;
  scrollbar-width: none;
}
.artifact-editor-gutter::-webkit-scrollbar { display: none; }
.ae-gutter-line {
  padding: 0 12px 0 10px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: color 0.08s ease, background 0.08s ease;
}
.ae-gutter-line.active {
  color: var(--primary-color);
  background: var(--bg-hover);
  font-weight: 600;
}

/* Edit area = relative container that stacks the highlight layer (backing)
   and the textarea (foreground, transparent text). The font-family, size,
   line-height, tab-size, padding, white-space MUST be identical across the
   two so caret/cursor/selection align perfectly with the colored tokens. */
.ae-edit-area {
  flex: 1;
  min-width: 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: var(--bg-primary);
}

/* Backing layer — colored HTML produced by highlight.js. Non-interactive. */
.ae-highlight {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.55;
  tab-size: 2;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}
.ae-highlight code {
  background: transparent !important;
  padding: 0 !important;
  font: inherit !important;
  display: block;
}

/* Textarea — the foreground edit surface. Text itself is transparent so only
   the highlight layer paints characters; we keep caret + selection visible. */
.artifact-editor-textarea {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  resize: none;
  padding: 12px 14px;
  margin: 0;
  background: transparent;
  color: transparent;
  caret-color: var(--primary-color);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.55;
  tab-size: 2;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-font-smoothing: antialiased;
  -webkit-text-fill-color: transparent;
}
.artifact-editor-textarea::placeholder { color: var(--text-tertiary); }
.artifact-editor-textarea:focus { outline: none; }
.artifact-editor-textarea::selection {
  background: rgba(99, 102, 241, 0.4);
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Thin custom scrollbar — discreet on the side panel */
.artifact-editor-textarea::-webkit-scrollbar { width: 10px; height: 10px; }
.artifact-editor-textarea::-webkit-scrollbar-track { background: transparent; }
.artifact-editor-textarea::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, rgba(127, 127, 127, 0.35));
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.artifact-editor-textarea::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover, rgba(127, 127, 127, 0.55));
  background-clip: padding-box;
  border: 2px solid transparent;
}
.artifact-editor-textarea::-webkit-scrollbar-corner { background: transparent; }
.artifact-editor-history-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 280px;
  max-height: 340px;
  overflow: auto;
  background: var(--bg-primary);
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  box-shadow: var(--shadow-lg);
  z-index: 100;
  padding: 4px;
}
.artifact-editor-history-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-primary);
  text-align: left;
}
.artifact-editor-history-item:hover {
  background: var(--bg-hover);
}
.artifact-editor-history-item .hv-ver {
  font-weight: 600;
  color: var(--primary-color);
  min-width: 28px;
}
.artifact-editor-history-item .hv-source {
  color: var(--text-tertiary);
  font-size: 11px;
  padding: 1px 6px;
  background: var(--bg-tertiary);
  border-radius: 3px;
}
.artifact-editor-history-item .hv-date {
  color: var(--text-tertiary);
  font-size: 11px;
  margin-left: auto;
}
.artifact-editor-history-loading,
.artifact-editor-history-empty {
  padding: 12px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 12px;
}

/* Image picker modal — Fase 2 */
.image-picker-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}
.image-picker-modal.open { display: flex; }
.image-picker-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.image-picker-dialog {
  position: relative;
  width: min(880px, 92vw);
  height: min(640px, 86vh);
  background: var(--bg-primary);
  border-radius: 10px;
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.image-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-secondary);
}
.image-picker-tabs {
  display: flex;
  gap: 4px;
}
.ipm-tab {
  background: transparent;
  border: 1px solid transparent;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ipm-tab:hover { background: var(--bg-hover); color: var(--text-primary); }
.ipm-tab.active {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-medium);
}
.ipm-close {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.ipm-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.image-picker-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.ipm-pane {
  display: none;
  height: 100%;
  flex-direction: column;
  padding: 12px;
  overflow: auto;
}
.ipm-pane.active { display: flex; }
.ipm-session-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.ipm-search {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 13px;
}
.ipm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  align-content: start;
  flex: 1;
  overflow: auto;
}
.ipm-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  transition: transform 0.08s ease, border-color 0.08s ease;
}
.ipm-card:hover {
  transform: translateY(-1px);
  border-color: var(--primary-color);
}
.ipm-card-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--bg-tertiary);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ipm-card-thumb img,
.ipm-card-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ipm-card-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ipm-card-name {
  padding: 6px 8px;
  font-size: 11px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.ipm-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 16px;
  color: var(--text-tertiary);
  font-size: 13px;
  gap: 8px;
}
.ipm-empty i { font-size: 32px; }
.ipm-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px dashed var(--border-medium);
  border-radius: 10px;
  padding: 36px 16px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background 0.08s ease, border-color 0.08s ease;
}
.ipm-drop:hover, .ipm-drop.drag {
  background: var(--bg-hover);
  border-color: var(--primary-color);
}
.ipm-drop-icon { font-size: 36px; color: var(--primary-color); }
.ipm-drop-label { font-size: 14px; font-weight: 500; }
.ipm-drop-sub { font-size: 12px; color: var(--text-tertiary); }
.ipm-upload-progress { margin-top: 12px; }
.ipm-up-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--bg-secondary);
  font-size: 13px;
}
.ipm-up-row.ok { color: #16a34a; }
.ipm-up-row.err { color: var(--danger-color); }
.ipm-gen-prompt {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 13px;
  resize: vertical;
  font-family: inherit;
}
.ipm-gen-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.ipm-gen-status { font-size: 12px; color: var(--text-tertiary); }
.ipm-gen-hint { margin-top: 8px; font-size: 11px; color: var(--text-tertiary); }
.ipm-gen-result { margin-top: 16px; }
.ipm-gen-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  max-width: 320px;
}
.ipm-gen-card img {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border-light);
}

/* Inline edit toolbar (Fase 3.1) */
#sidePanelInlineEdit.active {
  background: var(--primary-color);
  color: white;
}
.inline-edit-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 12px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}
.inline-edit-toolbar .iet-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}
.inline-edit-toolbar .iet-actions {
  display: inline-flex;
  gap: 6px;
}

/* Quick-styles floating overlay (Fase 3.2 rewritten) */
#sidePanelStylePanel.active {
  background: var(--primary-color);
  color: white;
}
.artifact-style-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  max-width: 90%;
  background: var(--bg-primary);
  border-left: 1px solid var(--border-medium);
  box-shadow: -4px 0 16px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  z-index: 50;
  font-size: 13px;
}
.aso-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-secondary);
  flex-shrink: 0;
}
.aso-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--text-primary);
}
.aso-close {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 16px;
  padding: 4px 6px;
  border-radius: 4px;
}
.aso-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.aso-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}
.aso-section { margin-bottom: 18px; }
.aso-section:last-child { margin-bottom: 0; }
.aso-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-bottom: 8px;
  font-weight: 600;
}
.aso-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.aso-label {
  font-size: 12px;
  color: var(--text-secondary);
}
.aso-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Extracted-palette swatches */
.aso-palette {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
}
.aso-swatch {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  cursor: pointer;
}
.aso-swatch input[type="color"] {
  width: 100%;
  height: 40px;
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.aso-swatch-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.aso-swatch-hex {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9px;
  color: var(--text-secondary);
}
.aso-swatch-count {
  font-size: 9px;
  color: var(--text-tertiary);
}
.aso-empty {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.5;
  padding: 4px 0;
}
.aso-hint {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 4px;
  font-family: ui-monospace, Menlo, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aso-select {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 12px;
  font-family: inherit;
}
.aso-control input[type="range"] {
  flex: 1;
  accent-color: var(--primary-color);
}
.aso-unit {
  font-size: 11px;
  color: var(--text-tertiary);
  min-width: 32px;
  text-align: right;
}
.aso-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-secondary);
  flex-shrink: 0;
}

.side-panel-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-secondary);
  text-align: center;
  padding: 2rem;
  gap: 0.5rem;
}

.side-panel-empty i {
  font-size: 3rem;
  opacity: 0.3;
}

.side-panel-empty p {
  font-size: 1rem;
  font-weight: 500;
}

.side-panel-empty span {
  font-size: 0.8rem;
  opacity: 0.6;
}

/* Session files button in input area */
.session-files-btn {
  background: var(--bg-tertiary, rgba(150, 150, 150, 0.1));
  color: var(--text-tertiary);
  border: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.session-files-btn:hover {
  background: var(--bg-hover, rgba(150, 150, 150, 0.2));
  color: var(--text-secondary);
  transform: scale(1.1);
}

.session-files-btn i {
  font-size: 1.05rem;
}

/* Session Files Header */
.session-files-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.session-files-title {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.session-files-title i {
  font-size: 0.9375rem;
}

.session-files-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.session-files-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  background: none;
  color: var(--text-secondary);
  border-radius: 0.375rem;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.2s;
}

.session-files-action-btn:hover {
  background: var(--bg-hover);
  color: var(--accent-color);
}

.session-files-action-btn.active {
  color: var(--accent-primary, #667eea);
  background: rgba(102, 126, 234, 0.1);
}

.session-files-action-btn.spinning i {
  animation: session-files-spin 0.6s linear infinite;
}

@keyframes session-files-spin {
  to { transform: rotate(360deg); }
}

/* Session Files Grid */
.session-files-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.75rem;
  padding: 0.75rem;
  overflow-y: auto;
  flex: 1;
}

.session-file-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  padding: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  text-align: center;
  position: relative;
}

.session-file-card:hover {
  border-color: var(--accent-primary, #667eea);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.session-file-card .file-icon {
  font-size: 2rem;
  color: var(--text-secondary);
}

.session-file-card .file-thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0.375rem;
}

.session-file-card .file-name {
  font-size: 0.7rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.session-file-card .file-badge {
  font-size: 0.6rem;
  padding: 0.1rem 0.4rem;
  border-radius: 0.25rem;
  background: var(--accent-primary, #667eea);
  color: #fff;
}

/* Kebab menu on file cards */
.file-kebab-btn {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  background: var(--bg-secondary);
  color: var(--text-tertiary);
  border-radius: 0.25rem;
  cursor: pointer;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
  z-index: 2;
}

.session-file-card:hover .file-kebab-btn,
.file-kebab-btn.open {
  opacity: 1;
}

.file-kebab-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* File context menu (dropdown) */
.file-context-menu {
  position: fixed;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  z-index: 99999;
  min-width: 140px;
  padding: 0.25rem;
  display: none;
}

.file-context-menu.open {
  display: block;
}

.file-context-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
  border-radius: 0.375rem;
  width: 100%;
  text-align: left;
  transition: background 0.15s;
}

.file-context-menu-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.file-context-menu-item.danger {
  color: #ef4444;
}

.file-context-menu-item.danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* Side panel download dropdown items */
.download-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  border-radius: 6px;
  white-space: nowrap;
}

.download-dropdown-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.download-dropdown-item .download-hint {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.5;
}

/* Session Files List View */
.session-files-list {
  display: flex;
  flex-direction: column;
  padding: 0.375rem;
  overflow-y: auto;
  flex: 1;
  gap: 1px;
}

/* Cabecera y filas comparten la MISMA rejilla de columnas: Nombre | Tipo | Tamaño | Fecha | ⋮ */
.session-files-list-head,
.session-file-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px 60px 84px 22px;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.5rem;
}

.session-files-list-head {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-light);
  position: sticky;
  top: 0;
  background: var(--bg-primary);
  z-index: 1;
}
.session-files-list-head .sfl-size { text-align: right; }

.session-file-row {
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}

.session-file-row:hover {
  background: var(--bg-hover);
}

.sfl-col { min-width: 0; }

.sfl-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.session-file-row .file-row-icon {
  font-size: 1.05rem;
  color: var(--text-secondary);
  flex-shrink: 0;
  width: 1.25rem;
  text-align: center;
}

.session-file-row .file-row-thumb {
  width: 1.4rem;
  height: 1.4rem;
  object-fit: cover;
  border-radius: 0.25rem;
  flex-shrink: 0;
}

.session-file-row .file-row-name {
  font-size: 0.75rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sfl-size, .sfl-date {
  font-size: 0.66rem;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sfl-size { text-align: right; }

.sfl-type { overflow: hidden; }
.sfl-type .file-type-badge { max-width: 100%; }

.sfl-kebab { display: flex; justify-content: center; }

.session-file-row .file-kebab-btn {
  position: static;
  opacity: 0;
  flex-shrink: 0;
}

.session-file-row:hover .file-kebab-btn,
.session-file-row .file-kebab-btn.open {
  opacity: 1;
}

.session-file-row .file-context-menu {
  /* positioned via JS */
}

/* File type badges */
.file-type-badge {
  font-size: 0.6rem;
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.file-type-badge.badge-artifact {
  background: rgba(139, 92, 246, 0.15);
  color: #8b5cf6;
}

.file-type-badge.badge-image {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.file-type-badge.badge-audio {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.file-type-badge.badge-video {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.file-type-badge.badge-file {
  background: rgba(107, 114, 128, 0.15);
  color: #6b7280;
}

/* File Viewer Overlay (inside files tab) */
.file-viewer-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 10;
  background: var(--bg-primary);
  flex-direction: column;
}

.file-viewer-overlay.active {
  display: flex;
}

.file-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.file-viewer-title {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.file-viewer-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: 1.1rem;
  padding: 0.25rem;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.file-viewer-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.file-viewer-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
}

.file-viewer-content img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.file-viewer-content video {
  max-width: 100%;
  max-height: 100%;
}

.file-viewer-content audio {
  width: 90%;
}

/* Upload dropzone */
.upload-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  border: 2px dashed var(--border-color);
  border-radius: 0.75rem;
  text-align: center;
  color: var(--text-tertiary);
  transition: all 0.2s;
  cursor: pointer;
}

.upload-dropzone i {
  font-size: 2.5rem;
  color: var(--text-secondary);
}

.upload-dropzone p {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin: 0;
}

.upload-dropzone span {
  font-size: 0.75rem;
}

.upload-dropzone.drag-over {
  border-color: var(--accent-primary, #667eea);
  background: rgba(102, 126, 234, 0.05);
}

.upload-dropzone.drag-over i {
  color: var(--accent-primary, #667eea);
}

/* Upload preview list */
.upload-preview-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  max-height: 200px;
  overflow-y: auto;
  margin-top: 0.75rem;
}

.upload-preview-list:empty {
  display: none;
}

.upload-preview-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 0.375rem;
  font-size: 0.75rem;
}

.upload-preview-item i {
  font-size: 1rem;
  color: var(--text-secondary);
}

.upload-preview-item .upload-file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}

.upload-preview-item .upload-file-size {
  color: var(--text-tertiary);
  font-size: 0.65rem;
  flex-shrink: 0;
}

.upload-preview-item .upload-file-remove {
  border: none;
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 0.125rem;
  font-size: 0.875rem;
  line-height: 1;
  border-radius: 0.25rem;
  flex-shrink: 0;
}

.upload-preview-item .upload-file-remove:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

/* Compact mode adjustments for files */
.side-panel.compact .session-files-grid {
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 0.5rem;
  padding: 0.5rem;
}

.side-panel.compact .session-file-card .file-icon {
  font-size: 1.5rem;
}

.side-panel.compact .session-files-title {
  font-size: 0.75rem;
}

.side-panel.compact .session-files-action-btn {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.875rem;
}

/* Artifact card in messages */
.artifact-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  margin: 0.5rem 0;
  cursor: pointer;
  transition: all 0.2s;
}

.artifact-card:hover {
  border-color: var(--accent-primary, #667eea);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.artifact-card-icon {
  font-size: 1.5rem;
  color: var(--accent-primary, #667eea);
  flex-shrink: 0;
}

.artifact-card-info {
  flex: 1;
  min-width: 0;
}

.artifact-card-title {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.artifact-card-meta {
  font-size: 0.7rem;
  color: var(--text-secondary);
}

.artifact-card-action {
  background: var(--accent-primary, #667eea);
  color: #fff;
  border: none;
  padding: 0.35rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.artifact-card-action:hover {
  opacity: 0.9;
  transform: scale(1.05);
}

/* Dock button in HTML code blocks */
.dock-side-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  transition: all 0.2s;
}

.dock-side-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

/* Back to chat button & mobile menu - hidden on desktop */
.side-panel-back-btn {
  display: none;
}

.side-panel-more-btn {
  display: flex;
}

.side-panel-mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1001;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 0.5rem;
  box-shadow: var(--shadow-lg);
  min-width: 170px;
  padding: 0.25rem 0;
}

.side-panel-mobile-menu.open {
  display: block;
}

.side-panel-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.85rem;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--text-primary);
  text-align: left;
  white-space: nowrap;
}

.side-panel-menu-item:hover {
  background: var(--bg-hover);
}

.side-panel-menu-item i {
  font-size: 0.9rem;
  color: var(--text-secondary);
  width: 16px;
  text-align: center;
}

/* Compact mode: narrow panel collapses actions into three-dot menu */
.side-panel.compact .side-panel-header {
  overflow: visible;
}

.side-panel.compact .side-panel-actions .side-panel-action-btn,
.side-panel.compact .side-panel-actions .side-panel-separator,
.side-panel.compact .side-panel-actions .side-panel-artifact-select {
  display: none;
}

.side-panel.compact .side-panel-actions .side-panel-action-btn.side-panel-more-btn,
.side-panel.compact .side-panel-actions #sidePanelClose {
  display: flex;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.25rem;
  color: var(--text-primary);
}

.side-panel.compact .side-panel-mobile-menu {
  display: none;
  position: absolute;
  top: 48px;
  right: 0.5rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  padding: 0.375rem;
  z-index: 310;
  box-shadow: var(--shadow-lg);
  min-width: 160px;
}

.side-panel.compact .side-panel-mobile-menu.open {
  display: flex;
  flex-direction: column;
}

.side-panel.compact .side-panel-menu-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.side-panel.compact .side-panel-menu-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.side-panel.compact .side-panel-menu-item i {
  font-size: 1rem;
  width: 1.25rem;
  text-align: center;
}

/* Mobile: Side panel becomes fullscreen overlay */
@media (max-width: 768px) {
  .side-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0 !important;
    min-width: 0 !important;
    z-index: 300;
    border-left: none;
  }

  .side-panel.open {
    width: 100% !important;
    min-width: 100% !important;
  }

  .side-panel-resize-handle {
    display: none;
  }

  /* Back button */
  .side-panel-back-btn {
    display: flex;
    color: var(--primary-color);
    font-weight: 600;
  }

  /* Hide individual action buttons, separator, and close */
  .side-panel-actions .side-panel-action-btn,
  .side-panel-actions .side-panel-separator {
    display: none;
  }

  /* Show three-dot trigger and close button */
  .side-panel-actions .side-panel-more-btn,
  .side-panel-actions #sidePanelClose {
    display: flex;
  }

  /* Dropdown menu */
  .side-panel-mobile-menu {
    display: none;
    position: absolute;
    top: 48px;
    right: 0.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.375rem;
    z-index: 310;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    min-width: 160px;
  }

  .side-panel-mobile-menu.open {
    display: flex;
    flex-direction: column;
  }

  .side-panel-menu-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
  }

  .side-panel-menu-item:hover,
  .side-panel-menu-item:active {
    background: var(--bg-hover);
    color: var(--text-primary);
  }

  .side-panel-menu-item i {
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
  }
}

/* ===== Diagram Viewer ===== */

/* Action buttons on diagram hover */
.mermaid-pending pre {
    opacity: 0.6;
    font-style: italic;
}
.mermaid-error pre {
    border-left: 3px solid var(--danger-color);
}
/* Hide Mermaid.js error rendering that leaks into the DOM */
#d[id^="mermaid-"], .error-icon, svg[id^="mermaid-"][aria-roledescription="error"] { display: none !important; }
body > #d[id^="mermaid-"] { display: none !important; }

.mermaid-diagram {
  position: relative;
}

.diagram-action-buttons {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.mermaid-diagram:hover .diagram-action-buttons {
  opacity: 1;
}

.diagram-chat-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: background 0.15s ease;
  backdrop-filter: blur(4px);
}

.diagram-chat-btn:hover {
  background: rgba(0, 0, 0, 0.75);
}

/* Diagram Viewer Modal */
#diagramViewerModal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 2000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#diagramViewerModal.show {
  display: flex;
}

.diagram-viewer-toolbar {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 6px;
  z-index: 10;
}

.diagram-viewer-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  transition: background 0.15s ease;
}

.diagram-viewer-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

.diagram-viewer-svg-container {
  width: 90vw;
  height: 85vh;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 12px;
  user-select: none;
  -webkit-user-select: none;
}

.diagram-viewer-svg-container:active {
  cursor: grabbing;
}

.diagram-viewer-svg-container svg {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}

.diagram-viewer-zoom-indicator {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.8125rem;
  font-weight: 500;
  backdrop-filter: blur(4px);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .diagram-action-buttons {
    opacity: 1;
  }

  .diagram-viewer-toolbar {
    top: 10px;
    right: 10px;
    gap: 4px;
  }

  .diagram-viewer-btn {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .diagram-viewer-svg-container {
    width: 96vw;
    height: 88vh;
  }
}

/* TTS Voice Selection */
.tts-voice-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tts-voice-section h4 {
  margin: 0 0 8px 0;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
}

.tts-voice-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tts-voice-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 2px solid var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--bg-secondary);
  min-width: 140px;
}

.tts-voice-card:hover {
  border-color: var(--primary-color);
  background: var(--bg-hover);
}

.tts-voice-card.selected {
  border-color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 10%, var(--bg-secondary));
  box-shadow: 0 0 0 1px var(--primary-color);
}

.tts-voice-card .voice-name {
  font-weight: 600;
  font-size: 0.9rem;
}

.tts-voice-card .voice-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* TTS inline confirmation in chat */
.tts-confirmation {
  padding: 12px;
  border-radius: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
}

.tts-confirmation .tts-voice-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}

.tts-voice-pill {
  padding: 6px 12px;
  border: 2px solid var(--border-color);
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.85rem;
  background: var(--bg-secondary);
  transition: all 0.2s ease;
}

.tts-voice-pill:hover {
  border-color: var(--primary-color);
}

.tts-voice-pill.selected {
  border-color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 15%, var(--bg-secondary));
  font-weight: 600;
}

.tts-confirmation-buttons {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

/* ==================================================================
   SuperAdmin Sidebar Layout (Fase A — 2026 modern sidebar)
   ================================================================== */

.superadmin-page.sa-layout {
  padding: 0;
  min-height: 100vh;
  background: var(--bg-secondary);
  /* Sidebar is position:fixed so we reserve space with padding-left */
  padding-left: 260px;
}

.sa-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 260px;
  background: var(--bg-primary);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 100;
}

.sa-sidebar-header {
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.sa-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
}

.sa-brand-logo-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: calc(100% - 85px); /* reserve space for the role badge */
  overflow: hidden;
  height: 40px;
}

.sa-brand-logo {
  max-width: 100%;
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.sa-brand-logo-fallback {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sa-brand-icon-fallback {
  font-size: 26px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  flex-shrink: 0;
}

.sa-brand-fallback-text {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==================================================================
   Animated role badge (superadmin / admin / user)
   ================================================================== */

.sa-role-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px 5px 8px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  border-radius: 999px;
  color: white;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 1;
}

.sa-role-badge i {
  font-size: 12px;
  z-index: 2;
  position: relative;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.sa-role-badge-text {
  z-index: 2;
  position: relative;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Shimmer overlay — subtle moving highlight */
.sa-role-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 80%
  );
  transform: translateX(-100%);
  animation: saRoleBadgeShimmer 3.2s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}

@keyframes saRoleBadgeShimmer {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* Pulse glow on the box-shadow */
@keyframes saRoleBadgePulseViolet {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(168, 85, 247, 0),
      0 3px 10px rgba(99, 102, 241, 0.38);
  }
  50% {
    box-shadow:
      0 0 0 5px rgba(168, 85, 247, 0.18),
      0 5px 18px rgba(99, 102, 241, 0.55);
  }
}

@keyframes saRoleBadgePulseBlue {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(14, 165, 233, 0),
      0 3px 10px rgba(59, 130, 246, 0.35);
  }
  50% {
    box-shadow:
      0 0 0 5px rgba(14, 165, 233, 0.15),
      0 5px 18px rgba(59, 130, 246, 0.48);
  }
}

/* ---- SUPERADMIN: gradient violet/pink + crown + pulse ---- */
.sa-role-superadmin {
  background: linear-gradient(
    135deg,
    #6366f1 0%,
    #8b5cf6 33%,
    #a855f7 66%,
    #ec4899 100%
  );
  background-size: 220% 220%;
  animation:
    saRoleGradientShift 5s ease-in-out infinite,
    saRoleBadgePulseViolet 2.8s ease-in-out infinite;
}

@keyframes saRoleGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ---- ADMIN: gradient blue + shield + pulse ---- */
.sa-role-admin {
  background: linear-gradient(135deg, #3b82f6 0%, #0ea5e9 100%);
  animation: saRoleBadgePulseBlue 3s ease-in-out infinite;
}

/* ---- USER: neutral gray, no animation ---- */
.sa-role-user {
  background: linear-gradient(135deg, #64748b 0%, #475569 100%);
  animation: none;
}
.sa-role-user::before { display: none; }

/* Respect reduced-motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .sa-role-badge,
  .sa-role-badge::before {
    animation: none !important;
  }
}

.sa-sidebar-close {
  display: none;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  cursor: pointer;
  padding: 4px;
}

.sa-nav {
  flex: 1;
  overflow-y: auto;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sa-nav-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Group header — clickable, collapsible */
.sa-nav-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 9px;
  font-family: inherit;
  width: 100%;
  text-align: left;
  transition: background 0.15s;
  /* Reset browser's <button> default styling which forces color: ButtonText
     (typically black regardless of dark mode) */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: var(--text-primary);
  font-size: inherit;
}
.sa-nav-group-header:hover {
  background: var(--bg-tertiary);
}

.sa-nav-group-text {
  flex: 1;
  min-width: 0;
}

.sa-nav-group-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-primary) !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.2;
}

.sa-nav-group-desc {
  font-size: 10px;
  color: var(--text-muted) !important;
  margin-top: 2px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.sa-nav-group-chevron {
  font-size: 13px;
  color: var(--text-muted) !important;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}
.sa-nav-group.expanded .sa-nav-group-chevron {
  transform: rotate(180deg);
}

/* Items grid — 2 columns, hidden when collapsed */
.sa-nav-group-items {
  display: none;
  /* minmax(0, 1fr) is the critical trick: the `0` min track size lets
     grid cells shrink below their content, so long labels don't force
     the grid to grow beyond the sidebar width */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  padding: 0 3px 2px;
  min-width: 0;
  max-width: 100%;
}
.sa-nav-group.expanded .sa-nav-group-items {
  display: grid;
  animation: saNavGroupItemsIn 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes saNavGroupItemsIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Nav item cards — icon on top, label below */
.sa-nav-item.tab-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 6px 12px !important;
  /* No border by default — active state uses box-shadow inset instead to
     avoid layout shift between inactive and active states */
  border: none !important;
  background: transparent !important;
  border-radius: 11px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  cursor: pointer;
  text-align: center;
  margin: 0 !important;
  position: relative;
  min-height: 78px;
  transition: all 0.18s ease;
  border-bottom: none !important;
  width: 100%;
  max-width: 100%;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden;
}

.sa-nav-item-icon {
  display: flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--bg-tertiary);
  transition: all 0.18s ease;
  flex-shrink: 0;
}

.sa-nav-item-icon i,
.sa-nav-item.tab-btn i {
  font-size: 20px !important;
  color: var(--text-secondary);
  transition: color 0.18s ease;
  margin: 0 !important;
}

.sa-nav-item-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-secondary);
  transition: color 0.18s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
}

.sa-nav-item.tab-btn:hover {
  background: var(--bg-tertiary) !important;
  transform: translateY(-1px);
}
.sa-nav-item.tab-btn:hover .sa-nav-item-icon {
  background: color-mix(in srgb, var(--primary-color) 15%, transparent);
}
.sa-nav-item.tab-btn:hover .sa-nav-item-icon i {
  color: var(--primary-color);
}
.sa-nav-item.tab-btn:hover .sa-nav-item-label {
  color: var(--text-primary);
}

/* Active state — tinted card + gradient icon box
   Uses box-shadow inset for the border effect to avoid layout shift */
.sa-nav-item.tab-btn.active {
  background: color-mix(in srgb, var(--primary-color) 10%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-color) 35%, transparent);
}
.sa-nav-item.tab-btn.active .sa-nav-item-icon {
  background: linear-gradient(135deg, var(--primary-color), #4f46e5);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--primary-color) 38%, transparent);
}
.sa-nav-item.tab-btn.active .sa-nav-item-icon i,
.sa-nav-item.tab-btn.active i {
  color: white !important;
}
.sa-nav-item.tab-btn.active .sa-nav-item-label {
  color: var(--primary-color);
  font-weight: 700;
}

/* Orphan last item (groups with odd item count) spans both columns.
   Examples: Meta (1 item), Configuración (3 items — Personalización), Features (3 items — Referrals) */
.sa-nav-group-items > .sa-nav-item.tab-btn:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.sa-sidebar-footer {
  padding: 14px 16px;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.sa-user {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sa-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  overflow: hidden;
  flex-shrink: 0;
}
.sa-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sa-user-avatar > i {
  font-size: 18px;
  flex-shrink: 0;
}

.sa-user-info {
  flex: 1;
  min-width: 0;
}

.sa-user-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sa-user-role {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}

.sa-back-link,
.sa-theme-toggle {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  transition: all 0.15s;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
}

.sa-back-link:hover,
.sa-theme-toggle:hover {
  background: var(--primary-color);
  color: white;
}

.sa-theme-toggle i {
  font-size: 18px;
}

/* Main content area */
.sa-layout .sa-main {
  max-width: none;
  margin: 0;
  padding: 24px 32px 40px;
  /* Scroll naturally with the window — no internal scroll container */
  min-height: 100vh;
}

.sa-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 24px;
}

.sa-hamburger {
  display: none;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  width: 40px;
  height: 40px;
  border-radius: 10px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.sa-topbar-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
}

.sa-topbar-title i {
  color: var(--primary-color);
  font-size: 24px;
}

.sa-topbar-spacer { flex: 1; }

/* Hide the legacy horizontal tabs bar when using sidebar layout */
.sa-layout .superadmin-tabs {
  display: none !important;
}

/* Mobile: off-canvas sidebar */
.sa-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  z-index: 99;
}

@media (max-width: 1023px) {
  /* Remove the reserved sidebar space on mobile (sidebar becomes off-canvas) */
  .superadmin-page.sa-layout {
    padding-left: 0;
  }

  .sa-sidebar {
    width: 280px;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 200;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  }

  .sa-sidebar.open {
    transform: translateX(0);
  }

  .sa-sidebar-backdrop.open {
    display: block;
  }

  .sa-sidebar-close {
    display: inline-flex;
  }

  .sa-hamburger {
    display: inline-flex;
  }

  .sa-layout .sa-main {
    padding: 20px 18px 40px;
  }

  .sa-topbar-title {
    font-size: 18px;
  }
}

/* ======================================================================
   User Bar — minimalist single-row footer (2026-04-21)
   Sits at bottom of the sidebar. Avatar + name + plan + stats + actions
   all on one horizontal row. No expand/collapse.
   ====================================================================== */

.user-bar {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-primary);
  min-height: 48px;
}

.user-bar-avatar {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), #4f46e5);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 14px;
  flex-shrink: 0;
}
.user-bar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.user-bar-identity {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.user-bar-name {
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
}

.user-bar-stats {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.user-bar-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--bg-secondary);
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.user-bar-chip i { font-size: 12px; opacity: 0.85; }

.user-bar-chip.warning {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.3);
  color: #d97706;
}
.user-bar-chip.warning i { color: #f59e0b; opacity: 1; }

.user-bar-chip.danger {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
  color: #dc2626;
}
.user-bar-chip.danger i { color: #ef4444; opacity: 1; }

.user-bar-chip-tokens {
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.18), rgba(234, 179, 8, 0.12));
  border-color: rgba(234, 179, 8, 0.4);
  color: #b45309;
}
.user-bar-chip-tokens i { color: #eab308; opacity: 1; }

.user-bar-chip-unlimited {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.25);
  color: #10b981;
  padding: 4px 6px;
}
.user-bar-chip-unlimited i { color: #10b981; opacity: 1; }

.user-bar-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  /* Acciones (💬 🔔 ⋯) ancladas al borde DERECHO de la barra; identidad y
     chips quedan a la izquierda (petición Miquel 23/7) */
  margin-left: auto;
}

.user-bar-btn {
  width: 28px;
  height: 28px;
  min-width: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
  padding: 0;
}
.user-bar-btn i { font-size: 15px; }
.user-bar-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-color);
}
.user-bar-btn:active {
  transform: scale(0.94);
}
.user-bar-btn-danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.25);
}

.user-bar-upgrade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: white;
  text-decoration: none;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.28);
  transition: all 0.15s;
}
.user-bar-upgrade:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.45);
}
.user-bar-upgrade i { font-size: 14px; }

/* Plan-badge tightening within the bar (overrides default padding only here) */
.user-bar .plan-badge {
  flex-shrink: 0;
  padding: 2px 6px;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.4px;
}

/* Mobile: compress further but stay in one row. Drop the name below ~320px
   by hiding it — the avatar already identifies the user, stats+actions are
   the primary value. */
@media (max-width: 480px) {
  .user-bar { padding: 6px 8px; gap: 4px; }
  .user-bar-chip { padding: 3px 6px; font-size: 10.5px; }
  .user-bar-chip i { font-size: 11px; }
  .user-bar-btn, .user-bar-upgrade { width: 26px; height: 26px; min-width: 26px; }
  .user-bar-btn i, .user-bar-upgrade i { font-size: 13px; }
}

@media (max-width: 360px) {
  .user-bar-name { display: none; }
  .user-bar .plan-badge { font-size: 8.5px; padding: 2px 5px; }
}

/* ======================================================================
   Kebab menu — row actions dropdown (2026-04-22)
   Replaces the horizontal strip of icon buttons in table rows with a
   single three-dots trigger that opens a floating menu on click.
   ====================================================================== */

.kebab-wrapper {
  position: relative;
  display: inline-flex;
  justify-content: flex-end;
}

.kebab-trigger {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.15s;
}
.kebab-trigger i { font-size: 18px; line-height: 1; }

.kebab-trigger:hover,
.kebab-wrapper.open .kebab-trigger {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

/* Menu escapes the table container via position:fixed + JS coordinates */
.kebab-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  min-width: 200px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
  padding: 4px;
  z-index: 9999;
  animation: kebabFadeIn 0.12s ease-out;
}

@keyframes kebabFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.kebab-wrapper.open .kebab-menu {
  display: block;
}

.kebab-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}

.kebab-item i {
  font-size: 16px;
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: color 0.12s;
}

.kebab-item:hover {
  background: var(--bg-hover);
}
.kebab-item:hover i { color: var(--primary-color); }

.kebab-item-danger {
  color: #dc2626;
}
.kebab-item-danger i { color: #ef4444; }
.kebab-item-danger:hover {
  background: rgba(239, 68, 68, 0.08);
  color: #b91c1c;
}
.kebab-item-danger:hover i { color: #dc2626; }

.kebab-divider {
  height: 1px;
  background: var(--border-light);
  margin: 4px 6px;
}

/* ======================================================================
   Model fallback pill (2026-04-23)
   Appears at the top of an assistant message when the primary model
   failed upstream and the server retried with a different one.
   ====================================================================== */
.model-fallback-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin: 0 0 10px 0;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-radius: 8px;
  color: #d97706;
  font-size: 11.5px;
  line-height: 1.4;
  font-weight: 500;
}
.model-fallback-pill i {
  font-size: 14px;
  color: #f59e0b;
  flex-shrink: 0;
}
.model-fallback-pill strong {
  font-weight: 700;
  color: #b45309;
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 10.5px;
  background: rgba(251, 191, 36, 0.12);
  padding: 1px 6px;
  border-radius: 4px;
}

.appearance-info {
  flex: 1;
}
.appearance-info strong {
  display: inline-block;
  font-size: 14px;
  color: var(--text-primary, #1f2937);
}
.appearance-info p {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  line-height: 1.5;
}
.appearance-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
  border-radius: 10px;
  margin-left: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.appearance-status {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-muted, #6b7280);
}
.appearance-status.appearance-ok { color: #16a34a; }
.appearance-status.appearance-warn { color: #dc2626; }
.appearance-status a { color: inherit; text-decoration: underline;
}

/* ======================================================================
   SIDEBAR — Collapse toggle + collapsed rail + hover flyout (Pattern A)
   ====================================================================== */

/* Right-edge collapse toggle. Lives on the sidebar but visually pokes out
   onto the chat area. Visible on hover-of-sidebar by default; always
   visible while sidebar is collapsed so the user can re-expand. */
.sidebar-collapse-toggle {
  position: absolute;
  top: 18px;
  right: -12px;
  z-index: 12;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border-color, var(--border-light));
  background: var(--bg-secondary, #1f2937);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.sidebar-collapse-toggle i { font-size: 13px; line-height: 1; }
.sidebar:hover .sidebar-collapse-toggle,
.sidebar.is-collapsed .sidebar-collapse-toggle,
.sidebar-collapse-toggle:focus-visible {
  opacity: 1;
}
.sidebar-collapse-toggle:hover {
  background: var(--bg-hover, #374151);
  color: var(--text-primary);
  transform: scale(1.08);
}
/* Mobile: this is a desktop-only feature — hide the button entirely. */
@media (max-width: 768px) {
  .sidebar-collapse-toggle { display: none !important; }
}

/* ── Collapsed rail (~64px) ─────────────────────────────────────────── */
@media (min-width: 769px) {
  .sidebar.is-collapsed {
    width: 64px !important;
    transition: width 0.2s ease;
  }
  .sidebar { transition: width 0.2s ease; }

  /* Header: shrink padding, drop the wordmark, stack vertical */
  .sidebar.is-collapsed .sidebar-header {
    padding: 0.75rem 0.5rem;
    flex-direction: column;
    gap: 0.5rem;
  }
  .sidebar.is-collapsed .sidebar-header .logo-text { display: none; }
  .sidebar.is-collapsed .sidebar-header .logo-icon {
    width: 32px; height: 32px;
  }
  /* Theme toggle in collapsed mode: shrink, drop the button-y background,
     and push it slightly down so it doesn't visually compete with the
     infinity logo or the chunky + new-chat button below. */
  .sidebar.is-collapsed .sidebar-header .desktop-theme-toggle {
    position: static;
    margin-top: 12px;
    padding: 4px;
    border-radius: 6px;
    background: transparent;
    opacity: 0.65;
    transition: opacity 0.15s ease, background 0.15s ease;
  }
  .sidebar.is-collapsed .sidebar-header .desktop-theme-toggle:hover {
    opacity: 1;
    background: var(--bg-hover);
  }
  .sidebar.is-collapsed .sidebar-header .desktop-theme-toggle .theme-icon {
    font-size: 14px;
  }

  /* Actions row: hide search, shrink + button */
  .sidebar.is-collapsed .sidebar-actions {
    padding: 0.5rem;
    flex-direction: column;
  }
  .sidebar.is-collapsed .search-container { display: none; }
  .sidebar.is-collapsed .new-chat-btn {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
  }

  /* Conversation groups become square tiles (3-char abbr + count badge).
     The actual conversation items (.conversation-group-items) are
     hidden — they get shown via the JS flyout on hover. */
  .sidebar.is-collapsed .conversations-list {
    padding: 0.35rem;
    overflow: visible;
  }
  .sidebar.is-collapsed .conversation-group {
    margin-bottom: 0.35rem;
  }
  .sidebar.is-collapsed .conversation-group-header {
    position: static; /* drop sticky so all tiles stack normally */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1px;
    padding: 6px 4px;
    border-radius: 8px;
    background: var(--bg-secondary, transparent);
    height: 48px;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .sidebar.is-collapsed .conversation-group-header:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
  }
  /* Active-group highlight: when the currently-open chat lives in this
     section, mark its chip with a blue accent so the user knows where
     they are without expanding the sidebar. Uses :has() (modern browsers). */
  .sidebar.is-collapsed .conversation-group:has(.conversation-item.active) .conversation-group-header {
    border: 1px solid var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 15%, transparent);
    color: var(--primary-color);
  }
  .sidebar.is-collapsed .conversation-group:has(.conversation-item.active) .conversation-group-header::before {
    color: var(--primary-color);
  }
  .sidebar.is-collapsed .conversation-group:has(.conversation-item.active) .group-count {
    background: color-mix(in srgb, var(--primary-color) 25%, transparent);
    color: var(--primary-color);
  }
  /* Hide the original chevron arrow + text label */
  .sidebar.is-collapsed .conversation-group-header > i.group-arrow,
  .sidebar.is-collapsed .conversation-group-header > span:not(.group-count) {
    display: none;
  }
  /* Show the short label via data-attribute */
  .sidebar.is-collapsed .conversation-group-header::before {
    content: attr(data-short-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
  }
  .sidebar.is-collapsed .conversation-group-header .group-count {
    margin: 0;
    font-size: 10px;
    padding: 1px 6px;
    line-height: 1.2;
  }
  /* Pinned group: icon stays but smaller (the only chip with a real icon) */
  .sidebar.is-collapsed .pinned-group .conversation-group-header > i.ph-push-pin {
    display: inline-block;
    font-size: 14px;
  }
  .sidebar.is-collapsed .pinned-group .conversation-group-header::before {
    display: none;
  }
  /* Hide conversation items in rail — they appear in the flyout */
  .sidebar.is-collapsed .conversation-group-items { display: none !important; }

  /* Modules section in rail: just icon + count */
  .sidebar.is-collapsed .modules-section { padding: 0.35rem; }
  .sidebar.is-collapsed .modules-header {
    flex-direction: column;
    gap: 2px;
    padding: 6px 4px;
    height: 48px;
    justify-content: center;
  }
  .sidebar.is-collapsed .modules-title { font-size: 0; gap: 2px; flex-direction: column; }
  .sidebar.is-collapsed .modules-title i.ph-puzzle-piece {
    font-size: 16px;
  }
  .sidebar.is-collapsed .modules-count { font-size: 10px; padding: 1px 5px; }
  .sidebar.is-collapsed .modules-toggle-icon { display: none; }
  .sidebar.is-collapsed .modules-list { display: none !important; }

  /* Projects section in rail: folders icon + count chip (tree shows in flyout) */
  .sidebar.is-collapsed .projects-section {
    padding: 0.35rem;
    max-height: none;
  }
  .sidebar.is-collapsed .projects-section-header {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1px;
    padding: 6px 4px;
    height: 48px;
    border-radius: 8px;
    background: var(--bg-secondary, transparent);
    transition: background 0.15s ease, color 0.15s ease;
  }
  .sidebar.is-collapsed .projects-section-header:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
  }
  .sidebar.is-collapsed .projects-section-header .projects-caret,
  .sidebar.is-collapsed .projects-section-header > span:not(.projects-count),
  .sidebar.is-collapsed .projects-add-btn { display: none; }
  .sidebar.is-collapsed .projects-section-header i.ph-folders { font-size: 16px; }
  .sidebar.is-collapsed .projects-count { font-size: 10px; padding: 1px 5px; }
  .sidebar.is-collapsed .projects-list { display: none !important; }
  /* Active chat lives inside a project → highlight the chip */
  .sidebar.is-collapsed .projects-section:has(.conversation-item.active) .projects-section-header {
    border: 1px solid var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 15%, transparent);
    color: var(--primary-color);
  }

  /* User bar: avatar + actions stacked, identity & stats hidden */
  .sidebar.is-collapsed .user-bar {
    flex-direction: column;
    padding: 8px 6px;
    gap: 6px;
    min-height: 0;
  }
  .sidebar.is-collapsed .user-bar-identity,
  .sidebar.is-collapsed .user-bar-stats { display: none; }
  .sidebar.is-collapsed .user-bar-actions {
    flex-direction: column;
    gap: 4px;
    margin: 0;
  }
}

/* ── Flyout panel (overlay anchored to the right of the rail) ─────── */
.sidebar-flyout {
  position: fixed;
  z-index: 999;
  width: 320px;
  max-width: calc(100vw - 80px);
  background: var(--bg-secondary, #1f2937);
  border: 1px solid var(--border-color, var(--border-light));
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  display: none;
  flex-direction: column;
  /* NOTE: no `transform` and no `overflow: hidden` on this outer container.
     Both create a stacking/containing block that clips child `position:fixed`
     elements (the kebab dropdowns) — making them invisible. Scrolling is
     handled by .sidebar-flyout-items below. */
  transition: opacity 0.14s ease;
}
.sidebar-flyout.is-open {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}
.sidebar-flyout.is-immediate { transition: none; }
.sidebar-flyout.is-pinned {
  border-color: var(--primary-color, #6366f1);
}
.sidebar-flyout-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-primary, transparent);
}
/* "Nuevo proyecto" action inside the projects flyout header */
.sidebar-flyout-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.sidebar-flyout-add:hover {
  background: var(--bg-hover);
  color: var(--primary-color);
}
.sidebar-flyout-add.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.sidebar-flyout-add i { font-size: 14px; }
.sidebar-flyout-items {
  overflow-y: auto;
  flex: 1;
  padding: 6px;
}
/* Reset .conversation-group-items max-height inside flyout: the rule
   `.conversation-group.collapsed .conversation-group-items{max-height:0}`
   was scoped to the original parent. Inside the flyout, our items live
   outside that parent, so they expand naturally — but we still want a
   sane scroll inside the panel. */
.sidebar-flyout .conversation-group-items {
  max-height: none !important;
  overflow: visible;
}
.sidebar-flyout .modules-list {
  max-height: none !important;
  opacity: 1 !important;
  padding: 4px;
}
.sidebar-flyout .projects-list {
  display: block !important;
  max-height: none !important;
  overflow: visible;
  padding: 4px;
}

/* "Cargar más" pagination button — sits inside .conversation-group-items
   below the visible slice. Discreet, matches the sidebar's tone. */
.load-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 4px;
  padding: 6px 8px;
  background: transparent;
  border: 1px dashed var(--border-light);
  border-radius: 6px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.load-more-btn:hover {
  background: var(--bg-hover);
  color: var(--text-secondary);
  border-color: var(--border-color, var(--border-light));
  border-style: solid;
}
.load-more-btn i { font-size: 12px; }
.load-more-btn .load-more-count { font-weight: 700; color: var(--text-secondary); }
/* Hide load-more in collapsed rail (items hidden anyway) — but show
   normally inside the flyout. */
.sidebar.is-collapsed .conversation-group-items .load-more-btn { display: none; }
.sidebar-flyout .load-more-btn { display: flex !important; }
/* Zoom CSS de escritorio (1.25) RETIRADO el 21/9/2026 (decisión Miquel): tamaño natural en todas las vistas; las alturas con vh vuelven a su valor sin compensar. */
@media (min-width: 1100px) {
    .app, .sidebar { height: 100vh; }
    .lightbox-content { width: 100vw; height: 100vh; }
    .auth-container, .profile-page, .superadmin-page, .my-shares-page,
    .sa-layout .sa-main { min-height: 100vh; }
    .superadmin-page.sa-layout { min-height: 100vh; }
    .modal-content { max-height: 90vh; }
    .modal-content-large { max-height: 85vh; }
    .pasted-edit-modal { max-height: 85vh; }
    .html-preview-modal-content { height: 95vh; }
    .lightbox-image-container { max-height: 90vh; }
    .quick-plugin-modal-content { max-height: 80vh; }
    .kb-chat-image, .kb-chat-video { max-height: 60vh; }
    .media-library-grid { max-height: 50vh; }
    .image-picker-dialog { height: min(640px, 86vh); }
    .diagram-viewer-svg-container { height: 85vh; }
}

/* ═══════ Ámbito de la Base de Conocimiento en el composer (#72) ═══════
   El selector existía pero vivía dentro del menú «Chat settings»: nadie lo
   encontraba. Esta píldora hace visible a QUÉ se está consultando y abre el
   mismo selector. No mide alturas de viewport a propósito. */
.kb-scope-bar {
  display: flex;
  justify-content: flex-start;
  margin: 0 0 0.375rem 0.25rem;
}
.kb-scope-bar[hidden] { display: none !important; }

.kb-scope-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  max-width: 100%;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.kb-scope-pill:hover { border-color: var(--primary-color); color: var(--text-primary); }
.kb-scope-pill:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.kb-scope-pill i { font-size: 0.875rem; flex-shrink: 0; }
.kb-scope-caret { opacity: 0.6; }

/* Acotado = destacado. Sin filtro se ve discreto para no añadir ruido. */
.kb-scope-pill.is-narrowed {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.kb-scope-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 22ch;
}

/* ── Artifact activo (ticket #90) ─────────────────────────────────────────
   Las dos píldoras (KB y artifact) comparten fila; cada una se oculta sola. */
.composer-scope-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.5rem;
}
.art-scope-bar { position: relative; }

.art-scope-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  max-width: min(360px, 90vw);
  max-height: 50vh;
  overflow-y: auto;
  padding: 0.3rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
  z-index: 200;
}
.art-scope-menu[hidden] { display: none !important; }
.art-scope-menu-title {
  padding: 0.35rem 0.6rem 0.25rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.art-scope-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.8rem;
  text-align: left;
  cursor: pointer;
}
.art-scope-item:hover, .art-scope-item:focus-visible { background: var(--bg-secondary); outline: none; }
.art-scope-item.is-current { color: var(--primary-color); }
.art-scope-item i { flex-shrink: 0; font-size: 0.95rem; }
.art-scope-item-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-scope-v { margin-left: auto; padding-left: 0.5rem; font-size: 0.7rem; opacity: 0.6; }

/* Tarjeta «¿a cuál?»: un botón por artifact, con el mismo aspecto que la píldora. */
.art-pick .art-pick-q { margin-bottom: 0.25rem; }
.art-pick-opts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.art-pick-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--primary-color);
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-color) 8%, transparent);
  color: var(--primary-color);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.2s ease;
}
.art-pick-btn:hover { background: color-mix(in srgb, var(--primary-color) 16%, transparent); }
.art-pick-btn:disabled { opacity: 0.5; cursor: default; }
.art-pick-btn span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 32ch; }
.art-pick-btn .art-pick-v { font-size: 0.7rem; opacity: 0.7; }
.art-pick-cancel {
  margin-top: 0.6rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
}
@media (max-width: 768px) {
  .kb-scope-text { max-width: 14ch; }
}

/* ═══════ Módulos en pestañas (#74) ═══════
   .main-content ya es un flex column; la barra es una fila fija y los marcos
   ocupan el resto. Sin pestañas abiertas nada de esto existe (hidden), así que
   el chat de siempre no pierde ni un píxel. */
.module-tabs-bar {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem 0;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;          /* GOTCHA de la casa: sin esto la barra se encoge */
}
.module-tabs-bar::-webkit-scrollbar { display: none; }
.module-tabs-bar[hidden],
.module-tabs-host[hidden] { display: none !important; }

/* 23/9/2026: la barra de desplazamiento va oculta, así que cuando hay pestañas fuera de la
   vista se nota con una sombra interior en el borde (la sombra inset no se desplaza con el
   contenido: queda pegada al borde del contenedor). */
.module-tabs-bar.has-more-end:not(.is-left) { box-shadow: inset -28px 0 18px -18px rgba(0, 0, 0, .18); }
.module-tabs-bar.has-more-start:not(.is-left) { box-shadow: inset 28px 0 18px -18px rgba(0, 0, 0, .18); }
.module-tabs-bar.has-more-start.has-more-end:not(.is-left) { box-shadow: inset 28px 0 18px -18px rgba(0, 0, 0, .18), inset -28px 0 18px -18px rgba(0, 0, 0, .18); }

/* 23/9: reordenar arrastrando */
.mtab.is-dragging { opacity: .45; }
.mtab.drop-before { box-shadow: inset 3px 0 0 var(--primary-color); }
.mtab.drop-after { box-shadow: inset -3px 0 0 var(--primary-color); }
.mtab.is-active.drop-before { box-shadow: inset 3px 0 0 var(--primary-color), inset 0 2px 0 var(--mod-color, var(--primary-color)); }
.mtab.is-active.drop-after { box-shadow: inset -3px 0 0 var(--primary-color), inset 0 2px 0 var(--mod-color, var(--primary-color)); }

/* 23/9: barra a la IZQUIERDA del chat (solo escritorio; en móvil manda el selector).
   Se saca del flujo de la columna y el contenido se aparta con padding: sin tocar el DOM. */
@media (min-width: 901px) {
  body.has-module-tabs[data-module-tabs-position="left"] .main-content { position: relative; padding-left: 184px; }
  .module-tabs-bar.is-left {
    position: absolute; left: 0; top: 0; bottom: 0; width: 184px;
    flex-direction: column; align-items: stretch; gap: 0.125rem;
    padding: 0.5rem 0.375rem;
    border-bottom: none; border-right: 1px solid var(--border-light);
    overflow-x: hidden; overflow-y: auto;
  }
  .module-tabs-bar.is-left .mtab {
    max-width: none; width: 100%;
    padding: 0.5rem 0.625rem;
    border: 1px solid transparent; border-radius: 0.5rem;
    text-align: left;
  }
  .module-tabs-bar.is-left .mtab .mtab-name { flex: 1; min-width: 0; }
  .module-tabs-bar.is-left .mtab.is-active {
    border-color: var(--border-light);
    box-shadow: inset 3px 0 0 var(--mod-color, var(--primary-color));
  }
  .module-tabs-bar.is-left .mtab.drop-before { box-shadow: inset 0 3px 0 var(--primary-color); }
  .module-tabs-bar.is-left .mtab.drop-after { box-shadow: inset 0 -3px 0 var(--primary-color); }
  .module-tabs-bar.is-left.has-more-end { box-shadow: inset 0 -28px 18px -18px rgba(0, 0, 0, .18); }
  .module-tabs-bar.is-left.has-more-start { box-shadow: inset 0 28px 18px -18px rgba(0, 0, 0, .18); }
  .module-tabs-bar.is-left.has-more-start.has-more-end { box-shadow: inset 0 28px 18px -18px rgba(0, 0, 0, .18), inset 0 -28px 18px -18px rgba(0, 0, 0, .18); }
  /* a la izquierda no hay que acortar nombres por ancho de ventana */
  .module-tabs-bar.is-left .mtab:not(.is-active) .mtab-name { display: inline; }

  /* 24/9: carril de SOLO ICONOS (48 px), como la barra de actividad de un editor: cada
     pestaña es un cuadrado de 36 px con el icono; el nombre sale en un tooltip al pasar o al
     enfocar; la activa lleva una barra de acento a la izquierda en el color del módulo.
     Chat va fija arriba; las pestañas, en su propia zona con scroll (rueda, gesto o las
     flechas), con degradado en el borde por el que hay más. Sin ✕: botón central, menú
     contextual (clic derecho) o la lista. */
  body.has-module-tabs[data-module-tabs-position="rail"] .main-content { position: relative; padding-left: 48px; }
  .module-tabs-bar.is-rail { width: 48px; padding: 0.5rem 0.375rem; gap: 0.25rem; overflow: hidden; }
  .module-tabs-bar.is-rail.has-more-start,
  .module-tabs-bar.is-rail.has-more-end,
  .module-tabs-bar.is-rail.has-more-start.has-more-end { box-shadow: none; }
  .module-tabs-bar.is-rail .mtab-rail-sep { flex: 0 0 1px; height: 1px; margin: 0.125rem 0.25rem 0.25rem; background: var(--border-light); }
  .module-tabs-bar.is-rail .mtab-rail-zone {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
    overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
    padding: 2px 0;
  }
  .module-tabs-bar.is-rail .mtab-rail-zone::-webkit-scrollbar { display: none; }
  .module-tabs-bar.is-rail.has-more-start .mtab-rail-zone { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22px); mask-image: linear-gradient(to bottom, transparent, #000 22px); }
  .module-tabs-bar.is-rail.has-more-end .mtab-rail-zone { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); }
  .module-tabs-bar.is-rail.has-more-start.has-more-end .mtab-rail-zone { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 22px, #000 calc(100% - 22px), transparent); }
  .module-tabs-bar.is-rail .mtab-rail-arrow {
    flex: 0 0 16px; height: 16px; width: 100%; padding: 0; border: 0; background: transparent;
    color: var(--text-secondary); font-size: 0.75rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center; border-radius: 4px;
  }
  .module-tabs-bar.is-rail .mtab-rail-arrow:hover { background: var(--bg-primary); color: var(--text-primary); }
  .module-tabs-bar.is-rail .mtab-rail-arrow[hidden] { display: none; }
  .module-tabs-bar.is-rail .mtab {
    position: relative; flex: 0 0 36px; width: 36px; height: 36px; padding: 0; margin: 0;
    justify-content: center; align-items: center; gap: 0;
    border: 0; border-radius: 0.625rem; text-align: center;
  }
  .module-tabs-bar.is-rail .mtab i { font-size: 1.125rem; }
  .module-tabs-bar.is-rail .mtab .mtab-emoji { font-size: 1.0625rem; }
  .module-tabs-bar.is-rail .mtab:not(.is-active) .mtab-name,
  .module-tabs-bar.is-rail .mtab.is-active .mtab-name,
  .module-tabs-bar.is-rail .mtab .mtab-close { display: none; }
  .module-tabs-bar.is-rail .mtab.is-active { background: var(--bg-chat); border: 0; box-shadow: none; }
  /* la barra de acento va DENTRO del cuadrado: la zona de scroll recorta lo que sobresale */
  .module-tabs-bar.is-rail .mtab.is-active::before {
    content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 2px 2px 0;
    background: var(--mod-color, var(--primary-color));
  }
  .module-tabs-bar.is-rail .mtab:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 1px; }
  .module-tabs-bar.is-rail .mtab.drop-before { box-shadow: inset 0 3px 0 var(--primary-color); }
  .module-tabs-bar.is-rail .mtab.drop-after { box-shadow: inset 0 -3px 0 var(--primary-color); }
}

/* 24/9: tooltip del carril (un solo elemento flotante en body: el carril recorta lo que sobresale)
   y menú contextual de pestaña (clic derecho en cualquier posición). */
.mtab-tip {
  position: fixed; z-index: 10000; transform: translateY(-50%);
  padding: 4px 9px; border-radius: 6px; white-space: nowrap; pointer-events: none;
  background: var(--text-primary); color: var(--bg-primary);
  font-size: 0.78rem; line-height: 1.3; box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.mtab-tip[hidden] { display: none; }
.mtab-menu-backdrop { position: fixed; inset: 0; z-index: 10000; }
.mtab-menu {
  position: fixed; z-index: 10001; min-width: 190px; padding: 4px;
  background: var(--bg-primary); border: 1px solid var(--border-light); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}
.mtab-menu-title { padding: 6px 10px 4px; font-size: 0.72rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.mtab-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px;
  border: 0; border-radius: 6px; background: transparent; color: var(--text-primary);
  font: inherit; font-size: 0.82rem; text-align: left; cursor: pointer;
}
.mtab-menu button i { font-size: 0.95rem; color: var(--text-secondary); }
.mtab-menu button:hover, .mtab-menu button:focus-visible { background: var(--bg-secondary); outline: none; }

/* 23/9: «Configurar módulos» — selector de posición, filtro y acciones de la lista */
.mods-position-row { display: flex; flex-direction: column; gap: 6px; margin: -2px 0 0 0; padding: 8px 12px 10px 40px; border: 1px solid var(--border-color, #dde0ea); border-top: 0; border-radius: 0 0 10px 10px; background: var(--bg-secondary, #f6f7fb); }
.mods-compact-row:has(#moduleTabsToggle) { border-radius: 10px 10px 0 0; }
.mods-position-row.is-disabled { opacity: .45; pointer-events: none; }
.mods-position-row > small { color: var(--text-secondary, #8a90a5); font-size: .78rem; }
.mods-segmented { display: inline-flex; flex-direction: row; border: 1px solid var(--border-color, #dde0ea); border-radius: 8px; overflow: hidden; background: var(--bg-primary, #fff); width: max-content; position: relative; }
.mods-segmented label { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: .8rem; cursor: pointer; color: var(--text-secondary, #8a90a5); }
.mods-segmented label + label { border-left: 1px solid var(--border-color, #dde0ea); }
.mods-segmented label i { font-size: .95rem; }
.mods-segmented input { position: absolute; opacity: 0; width: 0; height: 0; }
.mods-segmented label:has(input:checked) { background: var(--primary-color, #6366f1); color: #fff; }
.mods-config-tools { display: flex; align-items: center; gap: 8px; margin: 0 2px 6px; }
.mods-config-tools input { flex: 1; min-width: 0; padding: 5px 9px; border: 1px solid var(--border-color, #dde0ea); border-radius: 8px; font: inherit; font-size: .8rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1f2937); }
.mods-config-tools button { border: 0; background: transparent; color: var(--primary-color, #6366f1); font: inherit; font-size: .76rem; cursor: pointer; padding: 2px 4px; }
.mods-config-tools button:hover { text-decoration: underline; }
.mods-config-count { font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.mods-config-row[hidden] { display: none; }

.mtab {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  max-width: 200px;
  padding: 0.375rem 0.625rem;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 0.5rem 0.5rem 0 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.mtab:hover { background: var(--bg-primary); color: var(--text-primary); }
.mtab.is-active {
  background: var(--bg-chat);
  border-color: var(--border-light);
  color: var(--text-primary);
  box-shadow: inset 0 2px 0 var(--mod-color, var(--primary-color));
}
.mtab i { font-size: 0.9375rem; }
.mtab.is-active i:first-child { color: var(--mod-color, var(--primary-color)); }
.mtab-name { overflow: hidden; text-overflow: ellipsis; }
.mtab-close {
  display: inline-flex;
  opacity: 0.5;
  border-radius: 50%;
  padding: 1px;
}
.mtab-close:hover { opacity: 1; background: var(--border-light); }
.mtab-chat i:first-child { color: var(--primary-color); }
/* #184: pestañas de conversación (chats de proyectos): mismo aspecto, icono de chat; el nombre lleva «Proyecto · título» */
.mtab.mtab-conv i:first-child { color: var(--mod-color, var(--primary-color)); }
.mtab.mtab-conv .mtab-name { font-style: normal; }
/* «Abrir en pestaña» solo tiene sentido con el modo pestañas encendido */
body:not([data-module-view-mode="tabs"]) .dropdown-action.tab-btn { display: none !important; }

/* Muchos módulos: primero se acorta el nombre, luego desaparece y queda el
   icono. NUNCA dos filas — comería altura de trabajo de forma permanente. */
@media (max-width: 1200px) {
  .mtab { max-width: 140px; }
}
@media (max-width: 1000px) {
  .mtab:not(.is-active) .mtab-name { display: none; }
}

/* Los marcos: todos cargados, solo se ve el activo. Ocultar con display:none
   conserva el estado del iframe (no se recarga) — es justo lo que se busca. */
.module-tabs-host { flex: 1; min-height: 0; position: relative; }
.mtab-frame {
  display: none;
  position: absolute;
  inset: 0;                /* nada de medir alturas: inmune a vh y a zoom */
  width: 100%;
  height: 100%;
  border: 0;
}
.mtab-frame.is-active { display: block; }

/* Con una pestaña de módulo activa, el chat se aparta sin descargarse.
   OJO: `.input-area` NO está dentro de `.chat-container`, es su HERMANO dentro
   de .main-content — hay que nombrarlo aparte. Y en móvil además es
   `position: fixed; bottom: 0; z-index: 50`, así que si se olvida no solo se
   ve: se queda FLOTANDO SOBRE el módulo y le tapa la franja inferior (se comió
   los botones de avanzar del asistente de bienvenida de los plugins). */
body.module-tab-open .chat-container,
body.module-tab-open .input-area { display: none; }

/* El lateral NO se toca al entrar en un módulo (decisión de Miquel, 26/8).
   Se probó recogerlo para devolverle ancho al módulo —el iframe queda en
   1576px, el módulo cruza su umbral de zoom (1375) y se queda con 1261px CSS
   frente a los 1581 de pantalla completa— pero que la columna izquierda
   desaparezca sola al cambiar de pestaña resulta molesto y desorienta.
   La columna se queda como esté; si alguien quiere más ancho para el módulo,
   la colapsa con su botón de siempre. Consecuencia asumida: dentro de la
   pestaña los elementos se ven algo más grandes que a pantalla completa.
   (Nota 21/9/2026: el zoom CSS se retiró de toda la plataforma; el párrafo
   anterior describe el estado de agosto.) */

/* Móvil: un conmutador en vez de pestañas (5 pestañas en 390px no se usan) */
.module-tabs-bar.is-switcher { padding: 0.375rem 0.5rem; }
.mtab-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4375rem 0.75rem;
  border: 1px solid var(--border-light);
  border-radius: 0.5rem;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.8125rem;
  font-family: inherit;
  cursor: pointer;
}
.mtab-switch .mtab-name { flex: 1; text-align: left; }
.mtab-count {
  background: var(--primary-color);
  color: #fff;
  border-radius: 999px;
  padding: 0 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
}
/* Fondo de la hoja. Además de atenuar, es quien recoge el toque «fuera»: el
   cierre por clic sobre document no funcionaba porque lo único visible fuera
   es el módulo, y va en un iframe (sus clics no llegan al padre). */
.mtab-sheet-backdrop {
  position: fixed;
  inset: 0;                 /* nada de medir: inmune a vh y a zoom */
  z-index: 10090;
  background: rgb(0 0 0 / 0.35);
}

/* Tirador: afordancia de «esto se cierra» y zona de toque generosa */
.mtab-sheet-handle {
  display: block;
  width: 40px;
  height: 4px;
  margin: 8px auto 4px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--border-light);
  cursor: pointer;
}
.mtab-sheet-handle::before {          /* área de toque mayor que el trazo */
  content: '';
  display: block;
  margin: -12px -30px;
  height: 28px;
}

.mtab-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  /* Por encima de las capas flotantes del chat (botones 9999, menús 10000).
     Con el 400 de antes cualquier cosa flotante la tapaba y parecía que el
     conmutador no hacía nada. */
  z-index: 10100;
  background: var(--bg-secondary);
  border-radius: 1rem 1rem 0 0;
  box-shadow: 0 -8px 32px rgb(0 0 0 / 0.25);
  padding: 0.5rem;
  max-height: 60dvh;
  overflow-y: auto;
}
.mtab-sheet-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.75rem;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.875rem;
  font-family: inherit;
  cursor: pointer;
}
.mtab-sheet-row.is-active { background: var(--bg-primary); font-weight: 600; }
.mtab-sheet-row .mtab-name { flex: 1; text-align: left; }
/* 24/9: «Abrir otro módulo» en el selector móvil */
.mtab-sheet-head { margin: 0.5rem 0.75rem 0.25rem; padding-top: 0.5rem; border-top: 1px solid var(--border-color, rgba(128,128,128,.25)); font-size: 0.72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.mtab-sheet-row.is-other { color: var(--text-secondary); }
.mtab-sheet-row.is-other .ph, .mtab-sheet-row.is-other .mtab-emoji { opacity: .8; }

/* Fuentes de la Ayuda de la plataforma (carpeta del sistema, solo lectura): sin enlace */
.kb-source-item--help {
  cursor: default;
}
.kb-source-item--help:hover {
  background: transparent;
}
.kb-source-help-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.7rem;
  opacity: 0.75;
  white-space: nowrap;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
}
.kb-source-help-tag i {
  font-size: 0.75rem;
}