:root{
  --bg:#f6f5f2;--card:#fff;--ink:#1d1d1b;--muted:#6b6a65;--line:#e2e0d9;
  --acc:#1f5eff;--acc-ink:#fff;--acc-soft:#e8eeff;--bot:#fff;--user:#1f5eff;--warn:#b45309;--warn-bg:#fff4e0;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#141413;--card:#1e1e1c;--ink:#ecebe6;--muted:#9a9890;--line:#33322e;--acc:#6b93ff;--acc-ink:#0b0b0a;--acc-soft:#232a40;--bot:#1e1e1c;--user:#3b63d8;--warn:#f3b45f;--warn-bg:#3a2d15}
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;display:flex;flex-direction:column}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px;background:var(--card);border-bottom:1px solid var(--line)}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:36px;height:36px;border-radius:10px;background:var(--acc);color:var(--acc-ink);display:grid;place-items:center;font-size:20px}
h1{font-size:16px;margin:0}.brand p{margin:0;color:var(--muted);font-size:12px}
.top-actions{display:flex;gap:8px}
.progress{height:3px;background:var(--line)}#barra{height:100%;width:0;background:var(--acc);transition:width .3s}
.layout{flex:1;min-height:0;display:grid;grid-template-columns:1fr 340px;gap:0;max-width:1200px;width:100%;margin:0 auto}
.chat{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line)}
.mensajes{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
.msg{max-width:88%;padding:10px 14px;border-radius:14px;white-space:pre-wrap;word-wrap:break-word;animation:in .2s ease}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bot{align-self:flex-start;background:var(--bot);border:1px solid var(--line)}
.user{align-self:flex-end;background:var(--user);color:#fff}
.tag{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--acc);margin-bottom:2px}
.msg .ayuda{display:block;color:var(--muted);font-size:13px;margin-top:4px}
.warn{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.msg img{max-width:220px;border-radius:8px;display:block;margin-bottom:6px}
.controles{border-top:1px solid var(--line);background:var(--card);padding:12px 16px;display:flex;flex-direction:column;gap:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:7px 12px;border-radius:999px;cursor:pointer;font:inherit;font-size:14px}
.chip:hover{border-color:var(--acc)}
.chip.sel{background:var(--acc-soft);border-color:var(--acc);color:var(--acc);font-weight:600}
.fila{display:flex;gap:8px;align-items:flex-end}
textarea,input[type=text]{flex:1;font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 11px;resize:vertical;min-height:42px}
textarea:focus,input:focus{outline:2px solid var(--acc);outline-offset:-1px}
button{font:inherit;cursor:pointer}
.primary{background:var(--acc);color:var(--acc-ink);border:0;border-radius:10px;padding:10px 16px;font-weight:600}
.primary:disabled{opacity:.5;cursor:not-allowed}
.ghost{background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:6px 12px;font-size:13px}
.ghost:hover{border-color:var(--acc)}
.fila-btn{display:flex;gap:8px;flex-wrap:wrap}
.panel{overflow-y:auto;padding:16px 18px;background:var(--card)}
.panel-head{display:flex;justify-content:space-between;align-items:center}
.panel h2{font-size:14px;margin:0}
.sec{margin:14px 0 4px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.item{display:block;width:100%;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:7px 10px;margin-top:6px;color:var(--ink)}
.item:hover{border-color:var(--acc)}
.item b{display:block;font-size:12px;color:var(--muted);font-weight:600}
.item span{font-size:13px;white-space:pre-wrap;word-break:break-word}
.muted{color:var(--muted)}.small{font-size:12px}
.final{display:flex;flex-direction:column;gap:10px}
.final textarea{min-height:280px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px}
.adj{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.only-mobile{display:none}
@media (max-width:820px){
  .layout{grid-template-columns:1fr}
  .chat{border-right:0}
  .only-mobile{display:inline-block}
  .panel{position:fixed;inset:0;z-index:10;transform:translateX(100%);transition:transform .25s}
  .panel.abierto{transform:none}
  .top{padding:10px 14px}.brand p{display:none}
  .msg{max-width:94%}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}