/* Widget flotante del asistente de búsqueda. Reusa .msg/.msg-opts/.chip/.typing
   de app.css para las burbujas del chat; acá sólo el shell flotante. */

.casist{position:fixed;right:20px;bottom:20px;z-index:80;font-family:'Sora',system-ui,sans-serif;}

/* Burbuja colapsada */
.casist-bubble{position:relative;width:58px;height:58px;border-radius:50%;background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 16px 34px -12px rgba(228,50,43,.7);
  cursor:pointer;transition:transform .15s,background .15s;}
.casist-bubble:hover{background:var(--red-deep);transform:translateY(-2px);}
.casist-bubble i{font-size:24px;line-height:1;}
/* Escala >100% + recorte redondo en la propia imagen: el borde pixelado del gif
   queda croppeado y el contorno lo da el border-radius (suave). El badge va sobre
   el botón (sin overflow:hidden) para no recortarse. */
.casist-robot{width:112%;height:112%;object-fit:cover;border-radius:50%;display:block;pointer-events:none;}
.casist.open .casist-bubble{display:none;}
/* Llamador: el robotito se mueve cada tanto para invitar (sólo cerrado). */
.casist:not(.open) .casist-bubble{animation:casistWobble 5s ease-in-out infinite;}
.casist.nudge:not(.open) .casist-bubble{animation:casistBounce .6s ease-in-out 3;}
@keyframes casistWobble{0%,88%,100%{transform:rotate(0) translateY(0);}91%{transform:rotate(-9deg);}94%{transform:rotate(7deg);}97%{transform:rotate(-4deg);}}
@keyframes casistBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}

/* Globo de invitación */
.casist-callout{position:absolute;right:0;bottom:70px;width:max-content;max-width:220px;background:var(--ink);color:#fff;
  border-radius:14px;border-bottom-right-radius:5px;border:2px solid #fff;padding:11px 32px 11px 14px;font-size:13.5px;font-weight:600;line-height:1.35;
  box-shadow:0 8px 26px -6px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.35);cursor:pointer;animation:casistPop .25s ease-out;}
/* Cola con doble triángulo: el blanco (borde) detrás del negro, para no perder el contorno. */
.casist-callout::before{content:'';position:absolute;right:18px;bottom:-11px;border:9px solid transparent;border-top-color:#fff;border-bottom:0;}
.casist-callout::after{content:'';position:absolute;right:20px;bottom:-7px;border:7px solid transparent;border-top-color:var(--ink);border-bottom:0;}
.casist-callout-x{position:absolute;top:5px;right:7px;color:rgba(255,255,255,.6);font-size:17px;line-height:1;width:20px;height:20px;cursor:pointer;}
.casist-callout-x:hover{color:#fff;}
@keyframes casistPop{from{opacity:0;transform:translateY(8px) scale(.9);}to{opacity:1;transform:none;}}
.casist-badge{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;border-radius:11px;
  background:var(--ink);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--paper);font-family:'Space Mono';}

/* Panel expandido */
.casist-panel{display:flex;flex-direction:column;width:380px;max-width:calc(100vw - 32px);height:560px;max-height:calc(100vh - 40px);
  background:var(--white);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);overflow:hidden;}
.casist:not(.open) .casist-panel{display:none;}

.casist-head{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 12px;border-bottom:1px solid var(--line-soft);background:var(--paper);}
.casist-brand{flex:1;min-width:0;font-size:13px;font-weight:800;letter-spacing:-.2px;color:var(--ink);display:flex;align-items:center;gap:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.casist-brand i{color:var(--red);}
.casist-rubros{display:flex;gap:5px;flex:1;min-width:0;}
.casist-rubros button{flex:1;border:1px solid var(--line);background:var(--white);border-radius:999px;padding:7px 4px;
  font-family:inherit;font-size:12px;font-weight:700;color:var(--ink-soft);cursor:pointer;transition:all .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.casist-rubros button:hover{border-color:var(--ink);color:var(--ink);}
.casist-rubros button.on{background:var(--ink);color:#fff;border-color:var(--ink);}
.casist-rubros button .rb-badge{display:inline-block;margin-left:4px;background:var(--red);color:#fff;border-radius:8px;
  font-size:10px;font-weight:800;padding:0 4px;font-family:'Space Mono';}
.casist-rubros button.on .rb-badge{background:#fff;color:var(--ink);}
.casist-min{width:30px;height:30px;flex:0 0 30px;border-radius:50%;color:var(--ink-mute);font-size:18px;line-height:1;cursor:pointer;}
.casist-min:hover{background:var(--paper-2);color:var(--ink);}

.casist-sub{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 14px;border-bottom:1px solid var(--line-soft);}
.casist-title{font-size:12.5px;font-weight:800;letter-spacing:-.2px;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.casist-tools{display:flex;gap:6px;flex:0 0 auto;}
.casist-tools button{font-family:'Space Mono';font-size:10.5px;letter-spacing:.2px;font-weight:700;text-transform:uppercase;
  color:var(--ink-mute);border:1px solid var(--line);border-radius:8px;padding:4px 7px;cursor:pointer;transition:all .15s;}
.casist-tools button:hover{border-color:var(--red);color:var(--red);}

.casist-log{flex:1;overflow-y:auto;padding:16px 16px 8px;display:flex;flex-direction:column;gap:10px;background:var(--paper);}

/* Lista de búsquedas guardadas (overlay sobre el log) */
.casist-saved{position:absolute;left:0;right:0;top:96px;bottom:0;background:var(--white);overflow-y:auto;padding:14px;z-index:2;}
.casist-saved h4{font-size:12px;font-family:'Space Mono';text-transform:uppercase;letter-spacing:.6px;color:var(--ink-mute);margin-bottom:10px;}
.casist-saved .empty{font-size:13px;color:var(--ink-mute);text-align:center;padding:24px 10px;line-height:1.5;}
.cs-item{border:1px solid var(--line);border-radius:13px;padding:11px 12px;margin-bottom:9px;cursor:pointer;transition:border-color .15s;background:var(--white);}
.cs-item:hover{border-color:var(--ink);}
.cs-item .cs-t{font-size:13px;font-weight:700;color:var(--ink);line-height:1.3;}
.cs-item .cs-m{display:flex;align-items:center;gap:7px;margin-top:6px;flex-wrap:wrap;}
.cs-tag{font-size:10.5px;font-family:'Space Mono';font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:2px 7px;border-radius:7px;}
.cs-tag.activa{background:rgba(31,157,107,.13);color:var(--green);}
.cs-tag.resuelta{background:var(--paper-2);color:var(--ink-mute);}
.cs-tag.nuevos{background:var(--red);color:#fff;}
.cs-tag.notif{background:rgba(47,107,212,.13);color:var(--blue);}
.cs-item .cs-x{float:right;color:var(--ink-mute);font-size:16px;line-height:1;padding:0 3px;}
.cs-item .cs-x:hover{color:var(--red);}

.casist-actions{display:flex;gap:8px;padding:9px 12px;border-top:1px solid var(--line-soft);background:var(--white);}
.casist-actions button{flex:1;border:1px solid var(--line);background:var(--white);border-radius:11px;padding:9px 6px;
  font-family:inherit;font-size:12.5px;font-weight:700;color:var(--ink-soft);cursor:pointer;transition:all .15s;}
.casist-actions button:hover{border-color:var(--ink);color:var(--ink);}
.casist-actions button.on{background:rgba(47,107,212,.12);border-color:var(--blue);color:var(--blue);}
.casist-actions button.done{background:rgba(31,157,107,.12);border-color:var(--green);color:var(--green);}

.casist-input{display:flex;gap:8px;align-items:center;padding:11px 12px;border-top:1px solid var(--line-soft);background:var(--white);}
.casist-input input{flex:1;border:1.5px solid var(--line);background:var(--paper);border-radius:12px;padding:11px 13px;
  font-family:inherit;font-size:13.5px;color:var(--ink);}
.casist-input input:focus{outline:none;border-color:var(--ink);background:var(--white);}
.casist-input button[type=submit]{width:40px;height:40px;flex:0 0 40px;border-radius:11px;background:var(--red);color:#fff;
  font-size:16px;cursor:pointer;transition:background .15s;}
.casist-input button[type=submit]:hover{background:var(--red-deep);}

.casist .ver-todo{align-self:flex-start;}

/* Indicador "Acá tenés la lista" → renglón propio, destacado, apuntando a la grilla */
.casist-pointer{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;color:var(--red);
  font-family:'Space Mono';font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  padding:2px 2px 2px 0;}
.casist-pointer i{font-size:15px;animation:casistPoint 1s ease-in-out infinite;}
@keyframes casistPoint{0%,100%{transform:translateX(0);}50%{transform:translateX(-4px);}}

/* ============ Header contextual de listados de rubro (SSR, cacheable) ============ */
.ll-controls{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;}
.ll-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.ll-loc{display:inline-flex;align-items:center;gap:7px;background:var(--white);border:1.5px solid var(--line);
  border-radius:999px;padding:7px 14px;color:var(--ink);font-weight:600;}
.ll-loc i{color:var(--red);}
.ll-loc select{border:0;background:transparent;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;outline:none;max-width:200px;}
.ll-chips{display:flex;gap:8px;flex-wrap:wrap;}
.ll-tipos{gap:8px;overflow-x:auto;padding-bottom:2px;}
.ll-chip{display:inline-flex;align-items:center;gap:6px;background:var(--white);border:1.5px solid var(--line);
  border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:700;color:var(--ink-soft);cursor:pointer;
  transition:all .15s;white-space:nowrap;text-decoration:none;}
.ll-chip:hover{border-color:var(--ink);color:var(--ink);}
.ll-chip.on{background:var(--ink);color:#fff;border-color:var(--ink);}
.ll-chip .ll-c{font-family:'Space Mono';font-size:11px;font-weight:700;opacity:.6;}
.ll-chip.on .ll-c{opacity:.8;}
.ll-chip.loc i.fa-location-dot{color:var(--red);}
.ll-chip.loc.on i.fa-location-dot{color:#fff;}
.ll-chip.loc [data-loc-name]:empty::before{content:'Tu localidad';opacity:.8;}
.ll-sep{width:1px;height:22px;background:var(--line);margin:0 2px;}
.ll-chip.widen{border-color:var(--line);color:var(--red);}
.ll-chip.widen:hover{border-color:var(--red);background:rgba(228,50,43,.06);}
/* Nav de 2 niveles (productos): rubros (nivel 1) + subtipos (nivel 2). */
.ll-rubros .ll-chip.on{background:var(--ink);color:#fff;border-color:var(--ink);}
.ll-tipos.ll-subtipos{margin-top:2px;padding-top:10px;border-top:1px dashed var(--line);}
.ll-tipos.ll-subtipos .ll-chip{font-size:12.5px;padding:6px 12px;}
.ll-tipos.ll-subtipos .ll-chip:not(.on){background:var(--paper);}

/* Buscador de texto del sidebar */
.sf-search{display:flex;align-items:center;gap:7px;background:var(--paper);border:1.5px solid var(--line);
  border-radius:12px;padding:0 6px 0 12px;transition:border-color .15s,background .15s;}
.sf-search:focus-within{border-color:var(--ink);background:var(--white);}
.sf-search > i.fa-magnifying-glass{color:var(--ink-mute);font-size:13px;flex:0 0 auto;}
.sf-search input{flex:1;min-width:0;border:0;background:transparent;padding:11px 0;font-family:inherit;font-size:13.5px;color:var(--ink);}
.sf-search input:focus{outline:none;}
.sf-search-x{flex:0 0 auto;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  color:var(--ink-mute);font-size:12px;text-decoration:none;transition:.15s;}
.sf-search-x:hover{background:var(--paper-2);color:var(--ink);}
.sf-search-go{flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:var(--red);color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:12px;cursor:pointer;border:0;transition:background .15s;}
.sf-search-go:hover{background:var(--red-deep);}

.sf-apply{width:100%;margin-top:6px;background:var(--red);color:#fff;border:0;border-radius:11px;padding:11px;
  font-family:inherit;font-weight:700;font-size:13.5px;cursor:pointer;transition:background .15s;}
.sf-apply:hover{background:var(--red-deep);}

.pager{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:32px;font-family:'Space Mono';color:var(--ink-mute);}

/* Ampliación al pie (mismas variantes que el chatbot) */
.ll-widen{margin-top:34px;padding-top:22px;border-top:1px solid var(--line-soft);}
.ll-widen-h{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:800;letter-spacing:-.2px;color:var(--ink);margin-bottom:14px;}
.ll-widen-h i{color:var(--red);}
/* Variante de cercanía (vehículos): invitación explícita, no chip. */
.ll-widen-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  background:var(--white);border:1.5px solid var(--line);border-radius:14px;padding:14px 18px;
  font-size:15px;font-weight:700;color:var(--ink);text-decoration:none;transition:border-color .15s,background .15s;}
.ll-widen-cta:hover{border-color:var(--red);background:rgba(228,50,43,.05);}
.ll-widen-cta i{color:var(--red);flex:0 0 auto;}
.ll-widen-cta.loading{opacity:.6;pointer-events:none;}
.ll-widen-cta.expanded{border-color:var(--red);background:rgba(228,50,43,.05);color:var(--ink-mute);}
.ll-widen-cta.expanded i{transform:rotate(90deg);transition:transform .2s;}
/* Resultados adicionales expandidos (separados de los ya vistos). */
.ll-cercanos{margin-top:18px;}
.llc-block{margin-top:18px;}
.llc-h{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:800;color:var(--ink);
  margin:0 0 14px;padding-top:16px;border-top:1px dashed var(--line);}
.llc-h i{color:var(--red);}
.llc-h span{font-family:'Space Mono';font-size:12px;font-weight:700;color:#fff;background:var(--red);
  border-radius:999px;padding:2px 9px;}

/* Rubro activo destacado en el nav (estás "dentro" de ese rubro) */
.app-header .nav > a.active,
.app-header .nav .nav-dd-toggle.active{color:var(--red);font-weight:700;}

/* Aviso en /buscar (el chat se movió al widget) */
.us-hint{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--white);border:1px solid var(--line);
  border-radius:14px;padding:12px 16px;margin-bottom:16px;font-size:13.5px;color:var(--ink-soft);}
.us-hint b{color:var(--ink);font-weight:700;}

@media (max-width:480px){
  .casist{right:12px;bottom:12px;}
  .casist-panel{width:calc(100vw - 24px);height:calc(100vh - 90px);}
}

/* Asistente SÓLO en desktop: en móvil el panel ocupa toda la pantalla y estorba la búsqueda.
   Se reactivará cuando se optimice para móvil (el JS tampoco se inicializa en este ancho). */
@media (max-width:768px){
  #clasiAsistente{display:none !important;}
}
