/* El capítulo del agente, a las 04:30. Todo cuelga de #agent.
   La misma sala de día ahora es de noche: un farol de la calle entra por la vidriera, y el letrero
   cae sobre la pared. El orden es el de una conversación: la promesa, la plata, el porqué, la nota
   y la pregunta. La imagen arranca y termina en --night. */
#agent,#agent *{box-sizing:border-box}
#agent{
  position:relative;height:max(100vh,680px);height:max(100svh,680px);overflow:clip;background:var(--night);color:var(--on-night);isolation:isolate;
  scroll-margin-top:calc(var(--head) * -1);
}

/* ===== La pared ===== */
#agent .v-room{position:absolute;inset:0;z-index:0;pointer-events:none}
#agent .v-light{position:absolute;inset:0;overflow:hidden}
#agent .v-plate{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill}
#agent .v-sign{position:absolute;left:0;top:0;transform-origin:0 0;filter:blur(3.4px);opacity:0;transition:opacity .34s ease-out;will-change:opacity}
#agent.v-dark .v-light{opacity:0}
#agent.v-hum .v-light{animation:v-hum 9s linear infinite}
@keyframes v-hum{0%,100%{opacity:1}11%{opacity:.975}13%{opacity:1}47%{opacity:1}49%{opacity:.965}50%{opacity:.99}53%{opacity:.97}55%{opacity:1}}
/* Arriba y abajo el capítulo es exactamente la noche, para que no haya costura. */
#agent::before,#agent::after{content:"";position:absolute;z-index:1;left:0;right:0;height:72px;pointer-events:none}
#agent::before{top:0;background:linear-gradient(to bottom,var(--night) 4px,transparent)}
#agent::after{bottom:0;background:linear-gradient(to top,var(--night) 4px,transparent)}

/* ===== El escenario ===== */
#agent .v-stage{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(33.3%,auto);height:100%;padding:0 var(--gutter)}
#agent .v-wallzone{display:flex;flex-direction:column;min-height:0;width:calc(56.6vw - var(--gutter) - 20px);padding-top:calc(var(--head) + clamp(6px,2vh,22px))}
#agent h2{flex:none;margin:0 0 clamp(12px,2.3vh,24px);font-size:clamp(1.75rem,3vw,2.75rem);line-height:1.08}

/* ===== La voz: primero la plata, después el porqué ===== */
#agent .v-box{position:relative;flex:1 1 auto;min-height:0;margin-bottom:clamp(8px,1.6vh,18px)}
#agent .v-voice{position:absolute;left:0;right:0;top:0;transition:opacity .4s ease,filter .4s ease}
#agent .v-money{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.22em;margin:0;font-weight:300;line-height:1.02;letter-spacing:-.04em;color:var(--lamp)}
#agent .v-range{white-space:nowrap}
#agent .v-unit{font-size:max(.38em,1.125rem);font-weight:400;line-height:1.25;letter-spacing:-.022em;color:var(--on-night);white-space:nowrap}
#agent .v-money.v-plain{display:block;line-height:1.08;letter-spacing:-.03em;color:var(--on-night);text-wrap:balance}
#agent .v-say{margin:clamp(10px,1.7vh,18px) 0 0;max-width:36em;font-size:clamp(1.0625rem,1.46vw,1.3125rem);font-weight:400;line-height:1.5;letter-spacing:-.008em;color:var(--on-night);text-wrap:pretty}
#agent .v-say em{font-style:normal;font-weight:600}
#agent.v-listen .v-voice{opacity:.34;filter:blur(1px)}

#agent .w{display:inline-block;opacity:0;transform:translateY(.1em);filter:blur(.08em);transition:opacity .42s var(--ease),transform .62s var(--ease),filter .5s var(--ease)}
#agent .w.on{opacity:1;transform:none;filter:none}

/* ===== La mesa: la nota y, después, la pregunta ===== */
#agent .v-tablezone{display:grid;grid-template-columns:minmax(0,clamp(380px,32vw,430px)) minmax(0,1fr);gap:clamp(24px,4.4vw,72px);align-items:start;padding:clamp(12px,2.6vh,26px) 0 clamp(30px,6vh,56px)}
#agent .v-ask{justify-self:end;min-width:0;width:100%;max-width:800px}
#agent .v-field{display:flex;align-items:center;gap:12px;height:60px;padding:0 7px 0 24px;border:1px solid var(--line-night);border-radius:var(--r-pill);background:var(--night-2);transition:border-color .18s,box-shadow .18s}
#agent .v-field:focus-within{border-color:var(--lamp);box-shadow:0 0 0 1px var(--lamp)}
#agent .v-field label{flex:none;font:600 1.0625rem/1 var(--sans);color:var(--on-night)}
#agent .v-field input{flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;border-radius:0;background:none;outline:0;box-shadow:none;font:400 1.0625rem/1.2 var(--sans);color:var(--on-night);caret-color:var(--lamp);text-overflow:ellipsis}
#agent .v-field input::placeholder{color:var(--on-night-2);opacity:1}
#agent .v-go{flex:none;display:grid;place-items:center;width:46px;height:46px;padding:0;border:0;border-radius:var(--r-pill);background:var(--lamp);color:var(--lamp-ink);cursor:pointer;transition:background-color .18s,color .18s,transform .18s var(--ease)}
@media (hover:hover){#agent .v-go:not(:disabled):hover{background:color-mix(in srgb,var(--lamp) 76%,var(--paper));transform:translateX(2px)}}
#agent .v-go:active:not(:disabled){transform:scale(.95)}
#agent .v-go:disabled{background:var(--night-3);color:var(--on-night-2);cursor:default}
#agent .v-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(8px,1.3vh,12px)}
#agent .v-chip{appearance:none;min-height:38px;padding:0 15px;border:1px solid var(--line-night);border-radius:var(--r-pill);background:none;color:var(--on-night);font:500 .9375rem/1 var(--sans);white-space:nowrap;cursor:pointer;transition:background-color .18s,color .18s,border-color .18s,transform .18s var(--ease)}
@media (hover:hover){#agent .v-chip:hover{border-color:var(--on-night-2);background:color-mix(in srgb,var(--on-night) 9%,transparent)}}
#agent .v-chip:active{transform:scale(.97)}
#agent .v-chip[aria-pressed="true"]{border-color:var(--lamp);background:var(--lamp);color:var(--lamp-ink)}
#agent .v-honest{margin:clamp(8px,1.3vh,12px) 0 0;font-size:.8125rem;line-height:1.35;color:var(--on-night-2)}

/* ===== La nota: papel iluminado que el agente le pasa sobre la mesa ===== */
#agent .v-note{visibility:hidden;opacity:0;width:100%;padding:15px 18px 15px 20px;color:var(--ink);border-radius:calc(var(--r-s)*.5);background:linear-gradient(100deg,color-mix(in srgb,var(--paper) 88%,var(--lamp)) 0%,var(--paper) 62%);transform:rotate(-.8deg);transform-origin:20% 100%;box-shadow:14px 22px 30px -14px color-mix(in srgb,var(--night) 86%,transparent),3px 5px 9px color-mix(in srgb,var(--night) 50%,transparent)}
#agent .v-note.on{visibility:visible;opacity:1;transition:transform .95s var(--ease),opacity .3s ease}
#agent .v-note.enter{visibility:visible;opacity:0;transform:translate(-90px,36px) rotate(-3.6deg);transition:none}
#agent .v-note.out{visibility:visible;opacity:0;transform:translate(-100px,24px) rotate(-4deg);transition:transform .34s cubic-bezier(.5,0,.9,.4),opacity .3s ease}
#agent .v-note-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
#agent .v-note h3{margin:0;font-size:1.0625rem;font-weight:600;letter-spacing:-.018em;line-height:1.2;color:var(--ink)}
#agent .v-note-head span{flex:none;font-size:.8125rem;color:var(--ink-2)}
#agent .v-note ul{list-style:none;margin:9px 0 0;padding:0}
#agent .v-note li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:3px 0;font-size:.9375rem;line-height:1.3}
#agent .v-note li>span:first-child{min-width:0}
#agent .v-val{flex:none;font-weight:700;letter-spacing:-.012em;white-space:nowrap;font-variant-numeric:tabular-nums}
#agent .v-val.tag{font-weight:500;letter-spacing:0;color:var(--ink-2)}
#agent .v-note-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-top:9px}
#agent .v-note-foot p{margin:0;min-height:3.96em;font-size:.8125rem;line-height:1.32;color:var(--ink-2)}
#agent .v-note-foot b{font-weight:600;color:var(--ink)}
#agent .v-note .btn{flex:none}
#agent .v-note .btn:focus-visible{outline-color:var(--lamp-deep)}

@media (max-width:1320px){
  #agent .v-chip{padding:0 13px;font-size:.9rem}
  #agent .v-note li{font-size:.875rem}
}

/* ===== Teléfono y tablet: un solo hilo, de la promesa a la pregunta ===== */
@media (max-width:999px){
  #agent{height:auto;display:block}
  #agent .v-room{top:calc(var(--head) + 6px);bottom:auto;height:87.2vw;-webkit-mask-image:linear-gradient(#000 68%,transparent);mask-image:linear-gradient(#000 68%,transparent)}
  #agent .v-plate{object-fit:cover;object-position:50% 0}
  #agent .v-stage{display:block;height:auto}
  #agent .v-wallzone{width:auto;padding-top:calc(var(--head) + 10px)}
  #agent h2{margin:0;font-size:1.625rem}
  #agent .v-box{flex:none;margin:calc(60vw - 84px) 0 0}
  #agent .v-voice{position:relative}
  #agent .v-say{margin-top:8px;max-width:none;font-size:1.0625rem;line-height:1.46}
  #agent .v-tablezone{grid-template-columns:minmax(0,1fr);gap:14px;padding:14px 0 max(34px,env(safe-area-inset-bottom))}
  #agent .v-ask{justify-self:stretch;max-width:none}
  #agent .v-note{padding:12px 14px 12px 15px;transform:rotate(-.5deg)}
  #agent .v-field{height:54px;padding:0 5px 0 18px;gap:9px}
  #agent .v-field label,#agent .v-field input{font-size:1rem}
  #agent .v-go{width:44px;height:44px}
  #agent .v-chips{gap:6px}
  #agent .v-chip{min-height:36px;padding:0 11px;font-size:.875rem}
  #agent .v-chip[data-id=grocery]{order:1}#agent .v-chip[data-id=pharmacy]{order:2}#agent .v-chip[data-id=electronics]{order:3}#agent .v-chip[data-id=hardware]{order:4}#agent .v-chip[data-id=pet]{order:5}#agent .v-chip[data-id=beauty]{order:6}
  #agent .v-note h3{font-size:1rem}
  #agent .v-note ul{margin-top:6px}
  #agent .v-note li{gap:10px;padding:2px 0;font-size:.8125rem}
  #agent .v-note-foot{align-items:center;gap:10px;margin-top:7px}
  #agent .v-note-foot p{min-height:3.8em;font-size:.75rem;line-height:1.27}
}

@media (prefers-reduced-motion:reduce){
  #agent .w,#agent .v-sign,#agent .v-voice,#agent .v-note{transition:none!important}
  #agent .v-light{animation:none!important}
}