/* ============================================================
   /cmd — Chat IA con 4 mascotas guardianas
   Fondo: paisajes de Chile. Tonos claros, aire, sensación limpia.
   ============================================================ */
:root{
  --bg:          #F6F1E8;
  --paper:       #FBF7EE;
  --paper-warm:  #F0E9DA;
  --ink:         #1A150F;
  --ink-mid:     rgba(26,21,15,0.86);
  --ink-dim:     rgba(26,21,15,0.62);
  --ink-faint:   rgba(26,21,15,0.34);
  --line:        rgba(31,26,20,0.12);
  --line-strong: rgba(31,26,20,0.22);

  --accent:      #B86E3C;
  --accent-lt:   #D89A6B;
  --accent-dk:   #8A4F2A;
  --accent-soft: rgba(184,110,60,0.10);

  --venus:    #B86E3C;
  --toby:     #3E7FAD;
  --gladys:   #5B8A6A;
  --lucy:     #C2912E;

  --go:   #5B8A6A;
  --warn: #C58A2B;

  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 20px;

  --serif: 'Fraunces', Georgia, serif;
  --mono:  'JetBrains Mono', ui-monospace, monospace;
  --sans:  'Inter', system-ui, sans-serif;

  --chat-max: 760px;
}

body.cmd-body[data-accent="andean"]  { --accent:#3E7FAD; --accent-lt:#6FA3CA; --accent-dk:#2A5F87; --accent-soft:rgba(62,127,173,.10);}
body.cmd-body[data-accent="valley"]  { --accent:#5B8A6A; --accent-lt:#86AE93; --accent-dk:#3E6449; --accent-soft:rgba(91,138,106,.10);}
body.cmd-body[data-accent="volcano"] { --accent:#C14D2A; --accent-lt:#E07A5A; --accent-dk:#923717; --accent-soft:rgba(193,77,42,.10);}

body.cmd-body *,
body.cmd-body *::before,
body.cmd-body *::after { box-sizing:border-box; }

html.cmd-html, body.cmd-body { margin:0; padding:0; height:100%; }
body.cmd-body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15.5px;
  line-height:1.62;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  overscroll-behavior:none;
}
body.cmd-body button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }
body.cmd-body a{ color:var(--accent-dk); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
body.cmd-body a:hover{ color:var(--accent); }
body.cmd-body ::selection{ background:var(--accent); color:#fff; }

/* ============================================================
   BACKDROP
   ============================================================ */
#cmd-backdrop{ position:fixed; inset:0; z-index:-2; overflow:hidden; }
.bk-slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0;
  transition:opacity 2.8s ease-in-out;
  will-change:opacity;
}
.bk-slide.on{ opacity:1; }
body.cmd-body[data-ambient="off"] .bk-slide{ animation:none !important; }
.bk-slide.on{ animation:cmdKenBurns 28s ease-in-out infinite alternate; }
@keyframes cmdKenBurns{
  0%   { transform:scale(1.04) translate(-0.5%, -0.3%); }
  100% { transform:scale(1.12) translate(0.8%,  0.6%); }
}
#cmd-backdrop::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(246,241,232,0.35) 0%,
    rgba(246,241,232,0.18) 30%,
    rgba(246,241,232,0.28) 70%,
    rgba(246,241,232,0.55) 100%);
}

/* ── DÍA / NOCHE: el fondo se tiñe según la hora real (data-daytime) ── */
#cmd-backdrop{ transition:filter 1.6s ease; }
body.cmd-body[data-daytime="dawn"]  #cmd-backdrop{ filter:saturate(1.05) brightness(1.0) hue-rotate(-6deg); }
body.cmd-body[data-daytime="dusk"]  #cmd-backdrop{ filter:saturate(1.12) brightness(0.86) sepia(.18) hue-rotate(-12deg); }
body.cmd-body[data-daytime="night"] #cmd-backdrop{ filter:brightness(0.48) saturate(0.82) contrast(1.05) hue-rotate(10deg); }
body.cmd-body[data-daytime="dusk"]  #cmd-backdrop::after{
  background:linear-gradient(180deg, rgba(120,60,40,0.18) 0%, rgba(80,40,55,0.34) 70%, rgba(60,30,45,0.5) 100%);
}
body.cmd-body[data-daytime="night"] #cmd-backdrop::after{
  background:linear-gradient(180deg, rgba(20,28,60,0.42) 0%, rgba(12,16,38,0.52) 60%, rgba(8,10,26,0.62) 100%);
}

.bk-label{
  position:fixed;
  left:clamp(1rem, 3vw, 2rem);
  top:clamp(1rem, 3vw, 1.5rem);
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink-mid);
  background:rgba(251,247,238,0.75);
  backdrop-filter:blur(6px);
  padding:.35rem .6rem;
  border:1px solid var(--line);
  border-radius:99px;
  z-index:5;
  display:flex; align-items:center; gap:.5rem;
}
.bk-label::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--accent);
}

/* Salir a sitio tradicional */
.bk-exit{
  position:fixed;
  right:clamp(1rem, 3vw, 2rem);
  bottom:clamp(1rem, 3vw, 1.5rem);
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-mid);
  background:rgba(251,247,238,0.85);
  backdrop-filter:blur(8px);
  padding:.5rem .9rem;
  border:1px solid var(--line);
  border-radius:99px;
  z-index:5;
  text-decoration:none;
  display:flex; align-items:center; gap:.45rem;
  transition:border-color .2s, color .2s;
}
.bk-exit:hover{ border-color:var(--accent); color:var(--accent-dk); }

/* ============================================================
   STAGE
   ============================================================ */
.cmd-stage{
  position:fixed; inset:0;
  display:grid;
  grid-template-rows: 1fr auto;
  padding:clamp(1rem, 3vw, 2rem);
  padding-bottom:0;
}

.transcript{
  overflow:auto;
  padding:4rem 1rem 1.5rem;
  scroll-behavior:smooth;
  mask-image: linear-gradient(180deg, transparent 0, #000 3rem, #000 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 3rem, #000 100%);
}
.transcript::-webkit-scrollbar{ width:8px; }
.transcript::-webkit-scrollbar-track{ background:transparent; }
.transcript::-webkit-scrollbar-thumb{ background:var(--ink-faint); border-radius:4px; }

.chat{
  max-width:var(--chat-max);
  margin:0 auto;
  padding:0 .5rem;
}

/* ============================================================
   MESSAGES
   ============================================================ */
.msg{
  display:grid;
  grid-template-columns: 42px 1fr;
  gap:.85rem;
  margin-bottom:1.25rem;
  opacity:0;
  transform:translateY(6px);
  animation: msgIn .45s ease forwards;
}
@keyframes msgIn{ to{ opacity:1; transform:translateY(0); } }

/* ──────────────────────────────────────────────────────────────
   PET STAGE — la mascota activa ocupa el panel principal.
   Swap con fade+slide cuando llega una nueva respuesta.
   ────────────────────────────────────────────────────────────── */
.msg.pet-stage{
  /* override de la animación por defecto: usaremos clases */
  animation:none;
  opacity:1;
  transform:none;
  transition:opacity .32s cubic-bezier(.4,0,.2,1),
             transform .32s cubic-bezier(.4,0,.2,1);
}
.msg.pet-stage .bubble{ position:relative; }
.msg.pet-stage .bubble::before{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius: 2px 18px 18px 18px;
  pointer-events:none;
  opacity:0;
  transition:opacity .4s ease;
  box-shadow: 0 18px 48px -14px currentColor;
  color: var(--accent);
}
.msg.pet-stage[data-pet="venus"]  .bubble::before,
.bubble[data-pet="venus"]::before  { color:var(--venus); }
.bubble[data-pet="toby"]::before   { color:var(--toby); }
.bubble[data-pet="gladys"]::before { color:var(--gladys); }
.bubble[data-pet="lucy"]::before  { color:var(--lucy); }
.msg.pet-stage:not(.entering):not(.exiting):not(.past) .bubble::before{
  opacity:.22;
}
/* respuestas en el historial: legibles pero sin el resalte de la activa */
.msg.pet-stage.past .bubble::before{ opacity:0 !important; }
.msg.pet-stage.past{ opacity:.92; }

/* Entrada: viene desde abajo, se disuelve a 0 opacity */
.msg.pet-stage.entering{
  opacity:0;
  transform:translateY(18px);
}
/* Salida: sube y se va */
.msg.pet-stage.exiting{
  opacity:0;
  transform:translateY(-14px) scale(.985);
  pointer-events:none;
}

/* Quip final — frase con guiño del guardián */
.pet-quip{
  margin-top:.85rem !important;
  padding:.45rem .7rem;
  border-top:1px dashed var(--line);
  display:flex;
  align-items:center;
  gap:.55rem;
  font-size:.82rem !important;
  color:var(--ink-dim) !important;
}
.pet-quip em{ font-style:italic; }
.pet-quip-icon{
  font-size:1rem;
  opacity:.85;
}
.pet-quip[data-pet="venus"]  { border-top-color:rgba(184,110,60,0.22); }
.pet-quip[data-pet="toby"]   { border-top-color:rgba(62,127,173,0.22); }
.pet-quip[data-pet="gladys"] { border-top-color:rgba(91,138,106,0.22); }
.pet-quip[data-pet="lucy"]  { border-top-color:rgba(138,79,42,0.28); }

@media (prefers-reduced-motion: reduce){
  .msg.pet-stage, .msg.pet-stage.entering, .msg.pet-stage.exiting{
    transition:none;
    transform:none;
    opacity:1;
  }
  .msg.pet-stage.exiting{ display:none; }
}

.avatar{
  width:42px; height:42px;
  border-radius:50%;
  display:grid; place-items:center;
  font-size:1.15rem;
  background:var(--paper);
  border:1px solid var(--line);
  flex-shrink:0;
  box-shadow:0 2px 8px rgba(31,26,20,.06);
}
.avatar[data-pet="venus"]  { background:#F2E1D1; color:var(--venus); }
.avatar[data-pet="toby"]   { background:#D9E6F0; color:var(--toby); }
.avatar[data-pet="gladys"] { background:#DDE8DF; color:var(--gladys); }
.avatar[data-pet="lucy"]  { background:#E8D8C4; color:var(--lucy); }
.avatar[data-pet="visitor"]{ background:var(--ink); color:#fff; font-family:var(--serif); font-weight:500; font-size:.95rem; }
.avatar[data-pet="system"] { background:var(--paper-warm); color:var(--ink-dim); }

.bubble{ min-width:0; }
.bub-head{
  display:flex; align-items:baseline; gap:.6rem;
  margin-bottom:.2rem;
  flex-wrap:wrap;
}
.bub-head .who{
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.05em;
  color:var(--ink);
}
.bub-head .role{
  font-family:var(--mono);
  font-size:.62rem;
  color:var(--ink-dim);
  text-transform:uppercase;
  letter-spacing:.1em;
}
.bub-head .time{
  margin-left:auto;
  font-family:var(--mono);
  font-size:.65rem;
  color:var(--ink-faint);
}

.bub-body{
  background:#FCFAF4;
  border:1px solid var(--line);
  border-radius: 2px 18px 18px 18px;
  padding:.95rem 1.2rem;
  box-shadow: 0 4px 20px -8px rgba(31,26,20,.12);
}

.msg.visitor{ grid-template-columns: 1fr 42px; }
.msg.visitor .avatar{ order:2; }
.msg.visitor .bub-head .time{ margin-left:0; margin-right:auto; }
.msg.visitor .bub-head{ flex-direction:row-reverse; }
.msg.visitor .bub-body{
  background:var(--ink);
  color:#FAF6EC;
  border-color:transparent;
  border-radius:18px 2px 18px 18px;
  font-family:var(--mono);
  font-size:.88rem;
}
.msg.visitor .bub-body .prompt{ color:var(--accent-lt); margin-right:.4rem; }

.msg.system .bub-body{
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--ink-dim);
  background:transparent;
  border-style:dashed;
  box-shadow:none;
}

.typing::after{
  content:'▌';
  color:var(--accent);
  animation:cmdBlink .9s steps(2,end) infinite;
  margin-left:1px;
}
@keyframes cmdBlink{ 0%,50%{opacity:1;} 51%,100%{opacity:0;} }

.typing-dots{ display:inline-flex; gap:4px; padding:.3rem 0; }
.typing-dots span{
  width:6px; height:6px; border-radius:50%;
  background:var(--ink-dim);
  animation:cmdDot 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2){ animation-delay:.15s; }
.typing-dots span:nth-child(3){ animation-delay:.3s; }
@keyframes cmdDot{
  0%,60%,100%{ transform:translateY(0);    opacity:.4; }
  30%       { transform:translateY(-4px);  opacity:1;  }
}

/* ============================================================
   RESPONSE CONTENT
   ============================================================ */
.rsp{ color:var(--ink); font-family:var(--sans); }
.rsp > *:first-child{ margin-top:0; }
.rsp > *:last-child{ margin-bottom:0; }
.rsp h1,.rsp h2,.rsp h3{
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:-0.015em;
  color:var(--ink);
  line-height:1.15;
  margin:.2rem 0 .45rem;
}
.rsp h1{ font-size:clamp(1.55rem, 3vw, 2rem); }
.rsp h2{ font-size:1.2rem; margin-top:1.1rem; }
.rsp h3{ font-size:.95rem; font-weight:600; margin-top:.9rem; font-family:var(--sans); letter-spacing:.01em; color:var(--ink); }
.rsp p{ margin:.5rem 0; color:var(--ink-mid); font-size:.96rem; line-height:1.62; }
.rsp p strong{ color:var(--ink); font-weight:650; }
.rsp em{ color:var(--accent-dk); font-style:italic; }
.rsp ul{ padding-left:1.2rem; margin:.55rem 0; }
.rsp li{ margin:.3rem 0; color:var(--ink-mid); font-size:.93rem; line-height:1.55; }
.rsp li::marker{ color:var(--accent); }
.rsp code{
  font-family:var(--mono);
  font-size:.82em;
  padding:.08rem .35rem;
  background:var(--paper-warm);
  border:1px solid var(--line);
  border-radius:4px;
  color:var(--accent-dk);
}
.rsp hr{ border:0; border-top:1px solid var(--line); margin:.8rem 0; }

.pet-quote{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.05rem;
  line-height:1.45;
  color:var(--ink);
  padding:.35rem 0 .35rem .8rem;
  border-left:2px solid currentColor;
  margin:.55rem 0;
}
.bubble[data-pet="venus"]  .pet-quote{ color:var(--venus); }
.bubble[data-pet="toby"]   .pet-quote{ color:var(--toby); }
.bubble[data-pet="gladys"] .pet-quote{ color:var(--gladys); }
.bubble[data-pet="lucy"]  .pet-quote{ color:var(--lucy); }

.chip{
  display:inline-flex; align-items:center; gap:.3rem;
  font-family:var(--mono);
  font-size:.68rem;
  padding:.18rem .55rem;
  border-radius:99px;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink-mid);
  margin:.12rem .2rem .12rem 0;
}
.chip.ok  { color:var(--go);   border-color:rgba(91,138,106,.3); background:rgba(91,138,106,.08); }
.chip.warn{ color:var(--warn); border-color:rgba(197,138,43,.3); background:rgba(197,138,43,.08); }
.chip.dot::before{ content:'\2022'; font-size:.7em; }

.p-card{
  padding:.85rem 1rem;
  margin:.55rem 0;
  background:var(--paper);
  border:1px solid var(--line);
  border-left:2px solid var(--toby);
  border-radius:var(--r-sm);
}
.p-card-head{ display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap; }
.p-card-head .idx  { font-family:var(--mono); font-size:.7rem; color:var(--ink-dim); }
.p-card-head .title{ font-family:var(--serif); font-size:1.1rem; color:var(--ink); font-weight:500; letter-spacing:-0.01em; }
.p-card .tag { color:var(--ink-mid); font-size:.85rem; margin:.3rem 0 .45rem; }
.p-card .meta{ display:flex; gap:.9rem; flex-wrap:wrap; font-family:var(--mono); font-size:.68rem; color:var(--ink-dim); }
.p-card .meta b{ color:var(--ink); font-weight:600; }
.p-card .tech{ margin-top:.4rem; font-family:var(--mono); font-size:.68rem; color:var(--ink-dim); }
.p-card .tech span::after{ content:' · '; color:var(--accent); }
.p-card .tech span:last-child::after{ content:''; }

.cmd-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:.45rem;
  margin:.55rem 0 .2rem;
}
.cmd-cell{
  padding:.55rem .7rem;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--paper);
  text-align:left;
  transition:border-color .15s, transform .12s, background .15s;
  cursor:pointer;
}
.cmd-cell:hover{
  border-color:var(--accent);
  background:var(--accent-soft);
  transform:translateY(-1px);
}
.cmd-cell:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.cmd-cell .c{ font-family:var(--mono); font-size:.78rem; color:var(--accent-dk); font-weight:600; }
.cmd-cell .d{ font-size:.72rem; color:var(--ink-mid); margin-top:.15rem; }

.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(110px, 1fr));
  gap:.5rem;
  margin:.55rem 0;
}
.stat{ padding:.6rem .7rem; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper); }
.stat .n{ font-family:var(--serif); font-size:1.5rem; color:var(--accent); line-height:1; font-weight:500; }
.stat .l{ font-family:var(--mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-dim); margin-top:.25rem; }

.skills{ margin:.5rem 0; }
.sk-row{
  display:grid;
  grid-template-columns: 130px 1fr 36px;
  gap:.7rem;
  align-items:center;
  padding:.2rem 0;
  font-size:.82rem;
}
.sk-row .n{ font-family:var(--mono); color:var(--ink); font-size:.78rem; }
.sk-row .bar{ height:3px; background:var(--ink-faint); border-radius:2px; overflow:hidden; }
.sk-row .bar .fill{
  height:100%; width:0;
  background:linear-gradient(90deg, var(--accent), var(--accent-dk));
  transition:width 1.1s cubic-bezier(.2,.7,.3,1);
}
.sk-row .v{ font-family:var(--mono); font-size:.7rem; color:var(--ink-dim); text-align:right; }

.links-row{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.55rem; }
.link-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .8rem;
  border:1px solid var(--line);
  border-radius:99px;
  background:var(--paper);
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--ink);
  text-decoration:none;
  transition:all .15s;
  cursor:pointer;
}
.link-pill:hover{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-dk); }
.link-pill i{ color:var(--accent); }

/* ============================================================
   COMMAND BAR
   ============================================================ */
.dock{
  max-width:var(--chat-max);
  margin:0 auto;
  padding:.8rem 1rem 1.1rem;
  position:relative;
}
.dock-input{
  display:flex; align-items:center; gap:.7rem;
  padding:.8rem 1.1rem;
  background:#FCFAF4;
  border:1px solid var(--line-strong);
  border-radius:99px;
  transition:border-color .15s, box-shadow .15s;
  box-shadow: 0 8px 30px -10px rgba(31,26,20,.15);
}
.dock-input:focus-within{
  border-color:var(--accent);
  box-shadow:
    0 0 0 4px var(--accent-soft),
    0 8px 30px -10px rgba(31,26,20,.18);
}
.dock-prompt{
  color:var(--accent);
  font-family:var(--mono);
  font-weight:600;
  font-size:.9rem;
  flex-shrink:0;
}
#cmdInput{
  flex:1; min-width:0;
  border:0; outline:0;
  background:transparent;
  color:var(--ink);
  font-family:var(--mono);
  font-size:.9rem;
  padding:0;
}
#cmdInput::placeholder{ color:var(--ink-dim); }
.dock-send{
  width:32px; height:32px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  display:grid; place-items:center;
  flex-shrink:0;
  transition:background .15s, transform .12s;
}
.dock-send:hover{ background:var(--accent-dk); }
.dock-send:active{ transform:scale(.95); }

.dock-hint{
  font-family:var(--mono);
  font-size:.65rem;
  color:var(--ink-dim);
  margin-top:.5rem;
  padding:0 1rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  opacity:.8;
  flex-wrap:wrap;
}
.dock-hint kbd{
  font-family:var(--mono); font-size:.6rem;
  padding:.1rem .35rem;
  border:1px solid var(--line);
  border-radius:4px;
  color:var(--ink-mid);
  background:var(--paper);
}

.ac{
  position:absolute;
  left:1rem; right:1rem;
  bottom:calc(100% - .3rem);
  background:var(--paper);
  border:1px solid var(--line-strong);
  border-radius:var(--r-md);
  box-shadow:0 -16px 50px -10px rgba(31,26,20,.20);
  padding:.4rem;
  display:none;
  max-height:280px;
  overflow:auto;
  z-index:10;
}
.ac.show{ display:block; }
.ac-item{
  display:flex; align-items:center; gap:.6rem;
  padding:.45rem .6rem;
  border-radius:var(--r-sm);
  font-size:.82rem;
  cursor:pointer;
}
.ac-item .ic{
  width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center;
  font-size:.7rem;
  flex-shrink:0;
}
.ac-item .ic[data-pet="venus"]  { background:#F2E1D1; color:var(--venus); }
.ac-item .ic[data-pet="toby"]   { background:#D9E6F0; color:var(--toby); }
.ac-item .ic[data-pet="gladys"] { background:#DDE8DF; color:var(--gladys); }
.ac-item .ic[data-pet="lucy"]  { background:#E8D8C4; color:var(--lucy); }
.ac-item .ic[data-pet="system"] { background:var(--paper-warm); color:var(--ink-dim); }
.ac-item .c{ font-family:var(--mono); color:var(--accent-dk); min-width:110px; font-weight:600; font-size:.78rem; }
.ac-item .d{ color:var(--ink-mid); font-size:.72rem; flex:1; }
.ac-item.active, .ac-item:hover{ background:var(--accent-soft); }

/* ============================================================
   TWEAKS
   ============================================================ */
.tweaks-panel{
  position:fixed; right:1rem; top:1rem; z-index:300;
  width:250px;
  background:rgba(251,247,238,0.98);
  backdrop-filter:blur(20px);
  border:1px solid var(--line-strong);
  border-radius:var(--r-md);
  padding:1rem;
  font-family:var(--sans);
  font-size:.8rem;
  box-shadow:0 20px 50px -10px rgba(31,26,20,.2);
}
body.cmd-body[data-tweaks="off"] .tweaks-panel{ display:none; }
.tweaks-open-btn{
  position:fixed; right:1rem; top:1rem; z-index:299;
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line-strong);
  background:rgba(251,247,238,0.85);
  backdrop-filter:blur(10px);
  color:var(--ink-mid);
  display:grid; place-items:center;
  font-size:.85rem;
  cursor:pointer;
  transition:color .2s, border-color .2s;
}
.tweaks-open-btn:hover{ color:var(--accent-dk); border-color:var(--accent); }
body.cmd-body[data-tweaks="on"] .tweaks-open-btn{ display:none; }

.tweaks-head{
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom:.5rem; margin-bottom:.7rem;
  border-bottom:1px solid var(--line);
}
.tweaks-head h4{
  font-family:var(--mono);
  font-size:.65rem;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--accent-dk);
  margin:0;
}
.tweaks-head button{ color:var(--ink-dim); font-size:1.1rem; padding:0 .2rem; }
.tw-row{ margin-bottom:.65rem; }
.tw-row .l{ font-family:var(--mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-dim); margin-bottom:.3rem; display:block; }
.tw-chips{ display:flex; gap:.25rem; flex-wrap:wrap; }
.tw-chip{
  flex:1; min-width:0;
  padding:.35rem .3rem;
  font-family:var(--mono);
  font-size:.68rem;
  border-radius:var(--r-sm);
  background:var(--paper-warm);
  border:1px solid var(--line);
  color:var(--ink-mid);
  text-align:center;
  cursor:pointer;
}
.tw-chip.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.tw-switch{ display:flex; justify-content:space-between; align-items:center; }
.tw-switch .l{ margin-bottom:0; }
.tg{ width:32px; height:18px; border-radius:10px; background:var(--line-strong); position:relative; cursor:pointer; transition:background .2s; border:0; }
.tg::after{ content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.tg.on{ background:var(--accent); }
.tg.on::after{ transform:translateX(14px); }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:560px){
  .transcript{ padding:3.5rem .5rem 1rem; }
  .msg{ grid-template-columns: 36px 1fr; gap:.65rem; }
  .msg.visitor{ grid-template-columns: 1fr 36px; }
  .avatar{ width:36px; height:36px; font-size:1rem; }
  .dock{ padding:.6rem .5rem .9rem; }
  .dock-input{ padding:.6rem .85rem; }
  .ac{ left:.5rem; right:.5rem; }
  .bk-label{ font-size:.6rem; padding:.3rem .5rem; }
  .bk-exit{ font-size:.6rem; padding:.35rem .6rem; }
  .tweaks-panel{ right:.5rem; top:.5rem; width:220px; }
  .sk-row{ grid-template-columns:110px 1fr 30px; }
}

@media (prefers-reduced-motion: reduce){
  .bk-slide.on{ animation:none; transform:none; }
  .msg{ animation:none; opacity:1; transform:none; }
  .typing::after{ animation:none; }
  .typing-dots span{ animation:none; }
  .qb-chip, .qb-service, .svc-card { animation:none; transition:none; }
}

/* ============================================================
   QUICKBAR — interactive shortcuts above the input
   Always visible. Commands + dynamic services from Django.
   ============================================================ */
.quickbar{
  position:relative;
  padding:.85rem 1rem .9rem;
  background:linear-gradient(180deg, rgba(251,247,238,0.96), rgba(246,241,232,0.92));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  border-radius:14px 14px 0 0;
  margin-bottom:-1px;
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  display:flex;
  flex-direction:column;
  gap:.7rem;
  animation:qbFadeIn .6s cubic-bezier(0.16,1,0.3,1) .15s both;
}
@keyframes qbFadeIn{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:translateY(0); }
}

.qb-section{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  align-items:center;
}

.qb-chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.42rem .8rem .42rem .55rem;
  background:rgba(255,255,255,0.85);
  border:1px solid var(--line);
  border-radius:100px;
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:500;
  color:var(--ink);
  letter-spacing:-0.005em;
  cursor:pointer;
  transition:transform .25s cubic-bezier(0.34,1.56,0.64,1),
             background .2s ease, border-color .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.qb-chip:hover{
  background:#fff;
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:0 6px 18px -8px rgba(184,110,60,0.45);
}
.qb-chip:active{ transform:translateY(0) scale(0.97); }
.qb-chip .qb-ic{
  width:22px; height:22px;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent-dk);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.7rem;
  transition:background .2s, color .2s;
}
.qb-chip:hover .qb-ic{ background:var(--accent); color:#fff; }
.qb-chip[data-pet="venus"]    .qb-ic{ background:rgba(184,110,60,.14);  color:var(--venus); }
.qb-chip[data-pet="venus"]:hover    .qb-ic{ background:var(--venus);  color:#fff; }
.qb-chip[data-pet="toby"]     .qb-ic{ background:rgba(62,127,173,.14); color:var(--toby); }
.qb-chip[data-pet="toby"]:hover     .qb-ic{ background:var(--toby);   color:#fff; }
.qb-chip[data-pet="gladys"]   .qb-ic{ background:rgba(91,138,106,.14); color:var(--gladys); }
.qb-chip[data-pet="gladys"]:hover   .qb-ic{ background:var(--gladys); color:#fff; }
.qb-chip[data-pet="dachshund"] .qb-ic{ background:rgba(138,79,42,.14); color:var(--lucy); }
.qb-chip[data-pet="dachshund"]:hover .qb-ic{ background:var(--lucy); color:#fff; }
.qb-chip--ghost{ background:transparent; color:var(--ink-mid); }
.qb-chip--ghost:hover{ color:var(--ink); }

/* Services strip — horizontal scrollable, with label */
.qb-services{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding-top:.55rem;
  border-top:1px dashed var(--line);
}
.qb-services-label{
  font-family:var(--mono);
  font-size:.62rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--accent-dk);
  flex-shrink:0;
  padding-left:.2rem;
}
.qb-services-track{
  display:flex;
  gap:.45rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  padding-bottom:2px;
  flex:1;
  scroll-behavior:smooth;
}
.qb-services-track::-webkit-scrollbar{ height:4px; }
.qb-services-track::-webkit-scrollbar-track{ background:transparent; }
.qb-services-track::-webkit-scrollbar-thumb{ background:rgba(184,110,60,0.3); border-radius:4px; }

.qb-service{
  flex-shrink:0;
  scroll-snap-align:start;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.5rem .8rem .5rem .55rem;
  background:rgba(255,255,255,0.85);
  border:1px solid var(--line);
  border-radius:12px;
  cursor:pointer;
  font-family:var(--sans);
  color:var(--ink);
  text-align:left;
  transition:transform .3s cubic-bezier(0.34,1.56,0.64,1),
             background .2s, border-color .2s, box-shadow .25s;
  max-width:260px;
}
.qb-service:hover{
  background:#fff;
  border-color:var(--gladys);
  transform:translateY(-2px);
  box-shadow:0 10px 24px -10px rgba(91,138,106,0.45);
}
.qb-service:active{ transform:translateY(0) scale(0.98); }
.qb-service-ic{
  width:28px; height:28px;
  border-radius:8px;
  background:linear-gradient(135deg, rgba(91,138,106,0.14), rgba(91,138,106,0.06));
  color:var(--gladys);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.85rem;
  flex-shrink:0;
}
.qb-service:hover .qb-service-ic{
  background:linear-gradient(135deg, var(--gladys), #3E6449);
  color:#fff;
}
.qb-service-text{ display:flex; flex-direction:column; min-width:0; }
.qb-service-title{
  font-size:.8rem;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-0.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.qb-service-meta{
  font-family:var(--mono);
  font-size:.62rem;
  color:var(--ink-mid);
  letter-spacing:0.04em;
  font-variant-numeric:tabular-nums;
}

@media (max-width: 640px){
  .quickbar{ padding:.7rem .7rem .75rem; }
  .qb-chip{ font-size:.72rem; padding:.38rem .65rem .38rem .45rem; }
  .qb-chip .qb-lab{ display:none; }
  .qb-chip .qb-ic{ width:24px; height:24px; font-size:.78rem; }
  .qb-chip--ghost .qb-lab{ display:inline; }
  .qb-services-label{ display:none; }
  .qb-service{ max-width:200px; }
}

/* ============================================================
   SERVICE CARDS — premium cards shown when /servicios runs
   ============================================================ */
.svc-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:.85rem;
  margin:1rem 0 1.2rem;
}
@media (min-width: 640px){
  .svc-grid{ grid-template-columns:1fr 1fr; }
}

.svc-card{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
  padding:1.1rem 1.15rem 1.05rem;
  display:flex;
  flex-direction:column;
  gap:.7rem;
  transition:transform .4s cubic-bezier(0.16,1,0.3,1),
             box-shadow .4s ease, border-color .3s ease;
  overflow:hidden;
}
.svc-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 0% 0%, rgba(91,138,106,0.10), transparent 50%);
  pointer-events:none;
  opacity:0;
  transition:opacity .4s ease;
}
.svc-card:hover{
  transform:translateY(-3px);
  border-color:rgba(91,138,106,0.5);
  box-shadow:0 18px 40px -16px rgba(30,20,10,0.30);
}
.svc-card:hover::before{ opacity:1; }

.svc-head{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:start;
  gap:.7rem;
  position:relative;
}
.svc-icon{
  width:40px; height:40px;
  border-radius:11px;
  background:linear-gradient(135deg, rgba(91,138,106,0.18), rgba(91,138,106,0.06));
  color:var(--gladys);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.05rem;
  flex-shrink:0;
}
.svc-title-row{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.svc-title{
  font-family:var(--serif);
  font-size:1.05rem;
  font-weight:500;
  color:var(--ink);
  letter-spacing:-0.02em;
  line-height:1.2;
  margin:0;
  display:flex; align-items:center; gap:.4rem;
}
.svc-star{ color:#D89A2B; font-size:.78rem; }
.svc-meta{
  font-family:var(--mono);
  font-size:.66rem;
  color:var(--ink-mid);
  letter-spacing:0.14em;
  text-transform:uppercase;
}
.svc-price{
  text-align:right;
  display:flex; flex-direction:column;
  align-items:flex-end; gap:.05rem;
  flex-shrink:0;
}
.svc-price-from{
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-mid);
}
.svc-price-num{
  font-family:var(--serif);
  font-size:1rem;
  font-weight:500;
  color:var(--accent-dk);
  letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
}

.svc-desc{
  font-size:.86rem;
  line-height:1.55;
  color:var(--ink-mid);
  margin:0;
}

.svc-foot{
  display:flex;
  flex-direction:column;
  gap:.7rem;
  padding-top:.6rem;
  border-top:1px dashed var(--line);
}
.svc-pills{ display:flex; flex-wrap:wrap; gap:.35rem; }
.svc-pill{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.22rem .55rem;
  background:rgba(184,110,60,0.08);
  border:1px solid rgba(184,110,60,0.18);
  border-radius:100px;
  font-family:var(--mono);
  font-size:.62rem;
  color:var(--accent-dk);
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.svc-pill i{ font-size:.62rem; }

.svc-actions{ display:flex; gap:.45rem; flex-wrap:wrap; }
.svc-btn{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.5rem .9rem;
  border-radius:10px;
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:500;
  cursor:pointer;
  border:none;
  text-decoration:none;
  transition:transform .3s cubic-bezier(0.34,1.56,0.64,1),
             background .2s ease, color .2s ease;
}
.svc-btn--primary{
  background:var(--accent);
  color:#fff;
}
.svc-btn--primary:hover{ background:var(--accent-dk); transform:translateY(-2px); color:#fff; }
.svc-btn--ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line-strong);
}
.svc-btn--ghost:hover{ background:rgba(184,110,60,0.06); border-color:var(--accent); color:var(--accent-dk); }
.svc-btn:active{ transform:translateY(0) scale(0.97); }

.svc-note{
  font-size:.82rem;
  color:var(--ink-mid);
  text-align:center;
  line-height:1.5;
  margin-top:.5rem;
}
.svc-link{
  background:none;
  border:none;
  color:var(--accent-dk);
  font-weight:600;
  cursor:pointer;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  font-family:inherit;
  font-size:inherit;
  padding:0;
}
.svc-link:hover{ color:var(--accent); }