/*
 * Panel del editor dentro de LibreChat. No toca su maquetación: son dos capas fijas
 * (barra de contenido a la izquierda, panel de edición a la derecha) y un único
 * desplazamiento sobre #root, que es lo que no cambia entre versiones de LibreChat.
 */

:root {
  --ed-rail: 244px;
  --ed-panel: 384px;
  --ed-bg: #ffffff;
  --ed-bg2: #f4f4f6;
  --ed-ink: #1a1a20;
  --ed-muted: #6b6b78;
  --ed-line: #e3e3e9;
  --ed-acc: #2f5fd8;
  --ed-acc-bg: #eaf0ff;
  --ed-warn-bg: #fdf1dc;
  --ed-warn: #8a5a06;
  --ed-danger: #c02a1e;
  --ed-ok: #16794a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ed-bg: #181920; --ed-bg2: #14151b; --ed-ink: #e9e9ef; --ed-muted: #9a9aa8;
    --ed-line: #272831; --ed-acc: #7b9cff; --ed-acc-bg: #1a2036;
    --ed-warn-bg: #33270f; --ed-warn: #e0b45c; --ed-ok: #5fc08d;
  }
}

/* Desplaza la app de LibreChat para hacer sitio, sin tocar su interior. */
#root { padding-left: var(--ed-rail); transition: padding .18s ease; }
body.ed-panel-abierto #root { padding-right: var(--ed-panel); }
body.ed-oculto #root { padding-left: 0; }

.ed-rail, .ed-panel {
  position: fixed; top: 0; bottom: 0; z-index: 40;
  background: var(--ed-bg); color: var(--ed-ink);
  font: 13px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column; overflow: hidden;
}
.ed-rail { left: 0; width: var(--ed-rail); border-right: 1px solid var(--ed-line); }
.ed-panel { right: 0; width: var(--ed-panel); border-left: 1px solid var(--ed-line); }
body.ed-oculto .ed-rail { display: none; }

.ed-cab { padding: 11px 13px; border-bottom: 1px solid var(--ed-line); display: flex; align-items: center; gap: 8px; }
.ed-cab strong { font-size: 12px; font-weight: 600; }
.ed-cab .ed-x { margin-left: auto; }
.ed-cuerpo { flex: 1; overflow-y: auto; padding: 9px; }
.ed-pie { padding: 10px; border-top: 1px solid var(--ed-line); background: var(--ed-bg2); }

.ed-sel { width: 100%; font: inherit; font-size: 12px; padding: 5px 7px; border: 1px solid var(--ed-line); border-radius: 7px; background: var(--ed-bg); color: inherit; }
.ed-secs { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; }
.ed-sec { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 7px; cursor: pointer; border: none; background: none; color: inherit; font: inherit; text-align: left; width: 100%; }
.ed-sec:hover { background: var(--ed-bg2); }
.ed-sec.on { background: var(--ed-acc-bg); color: var(--ed-acc); font-weight: 600; }
.ed-sec .ed-n { margin-left: auto; font-size: 11px; color: var(--ed-muted); }

.ed-buscar { width: 100%; font: inherit; font-size: 12px; padding: 6px 8px; border: 1px solid var(--ed-line); border-radius: 7px; background: var(--ed-bg); color: inherit; margin-bottom: 7px; }
.ed-items { display: flex; flex-direction: column; gap: 3px; }
.ed-item { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 7px; cursor: pointer; border: 1px solid transparent; background: none; color: inherit; font: inherit; text-align: left; width: 100%; }
.ed-item:hover { background: var(--ed-bg2); }
.ed-item.on { border-color: var(--ed-acc); background: var(--ed-acc-bg); }
.ed-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-pt { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--ed-ok); }
.ed-pt.bor { background: #d79a2b; }

.ed-btn { font: inherit; font-size: 12px; padding: 6px 11px; border: 1px solid var(--ed-line); border-radius: 7px; background: var(--ed-bg); color: inherit; cursor: pointer; }
.ed-btn:hover { border-color: var(--ed-acc); }
.ed-btn:disabled { opacity: .5; cursor: default; }
.ed-btn.pri { background: var(--ed-acc); color: #fff; border-color: transparent; }
.ed-btn.grande { width: 100%; padding: 10px; font-size: 13px; font-weight: 600; }
.ed-x { border: none; background: none; color: var(--ed-muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 5px; border-radius: 6px; }
.ed-x:hover { background: var(--ed-bg2); color: var(--ed-ink); }

.ed-campo { display: flex; flex-direction: column; gap: 3px; margin-bottom: 9px; }
.ed-campo label { font-size: 11px; color: var(--ed-muted); }
.ed-campo input, .ed-campo textarea, .ed-campo select {
  width: 100%; font: inherit; font-size: 13px; padding: 6px 8px;
  border: 1px solid var(--ed-line); border-radius: 7px; background: var(--ed-bg); color: inherit;
}
.ed-campo textarea { resize: vertical; min-height: 60px; }
.ed-campo input:focus, .ed-campo textarea:focus { outline: none; border-color: var(--ed-acc); }

.ed-etq { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; }
.ed-etq.bor { background: var(--ed-warn-bg); color: var(--ed-warn); }
.ed-etq.pub { background: #e6f4ec; color: var(--ed-ok); }

.ed-aviso { margin: 9px 0; padding: 8px 10px; border-radius: 7px; font-size: 12px; line-height: 1.45; }
.ed-aviso.at { background: var(--ed-warn-bg); color: var(--ed-warn); }
.ed-aviso.ok { background: #e6f4ec; color: var(--ed-ok); }
.ed-aviso.mal { background: #fdeceb; color: var(--ed-danger); }
.ed-aviso ul { margin: 5px 0 0; padding-left: 16px; }

.ed-bloq { display: flex; align-items: center; gap: 7px; padding: 6px 8px; background: var(--ed-bg2); border: 1px solid var(--ed-line); border-radius: 7px; margin-bottom: 4px; font-size: 12px; }
.ed-bloq b { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--ed-acc); font-weight: 600; }
.ed-bloq i { font-style: normal; color: var(--ed-muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ed-lista { display: flex; flex-direction: column; gap: 3px; margin-top: 7px; }
.ed-le { display: flex; align-items: center; gap: 6px; padding: 5px 7px; background: var(--ed-bg2); border: 1px solid var(--ed-line); border-radius: 7px; font-size: 12px; }
.ed-le span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-le img { width: 34px; height: 26px; object-fit: cover; border-radius: 4px; flex: none; }
.ed-mini { border: none; background: none; color: var(--ed-muted); cursor: pointer; padding: 1px 4px; border-radius: 5px; font-size: 13px; flex: none; }
.ed-mini:hover { background: var(--ed-bg); color: var(--ed-ink); }
.ed-mini.del:hover { color: var(--ed-danger); }
.ed-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 5px; margin-top: 7px; }
.ed-gal figure { margin: 0; position: relative; }
.ed-gal img { width: 100%; height: 54px; object-fit: cover; border-radius: 6px; display: block; }
.ed-gal .ed-mini { position: absolute; top: 1px; right: 1px; background: var(--ed-bg); border: 1px solid var(--ed-line); }

.ed-vacio { color: var(--ed-muted); font-size: 12px; padding: 10px 4px; }
.ed-abrir { position: fixed; left: 8px; bottom: 8px; z-index: 41; }

@media (max-width: 1100px) {
  #root { padding-left: 0; }
  body.ed-panel-abierto #root { padding-right: 0; }
  .ed-rail { display: none; }
  .ed-panel { width: 100%; }
}