/* ============================================================
   DFX-AI — Asistente IA + recomendaciones (DonghuaFlix)
   Usa los tokens existentes: --red, --glass, --glass-brd, --line…
   ============================================================ */

/* ---- Botón flotante (FAB) ---- */
#dfxAiFab{
  position:fixed;right:22px;bottom:22px;z-index:95;
  width:50px;height:50px;border-radius:50%;cursor:pointer;
  border:1.5px solid var(--glass-brd);
  background:var(--glass);backdrop-filter:blur(16px) saturate(1.3);
  color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 28px rgba(0,0,0,.55);
  transition:transform .2s ease,background .2s,border-color .2s;
}
#dfxAiFab svg{width:22px;height:22px}
#dfxAiFab:hover{background:var(--red);border-color:var(--red);transform:scale(1.07)}
#dfxAiFab .dfxai-dot{
  position:absolute;top:8px;right:8px;width:9px;height:9px;border-radius:50%;
  background:var(--red);border:2px solid #0a0a0c;
}
@media(max-width:900px){
  #dfxAiFab{
    right:14px;
    bottom:calc(84px + env(safe-area-inset-bottom));
  }
}

/* Oculto donde molestaría: modo cine y fallback */
body.dfx-cine #dfxAiFab{display:none !important}

/* ---- Panel del chat ---- */
#dfxAiPanel{
  position:fixed;right:16px;bottom:16px;z-index:96;
  width:min(400px,calc(100vw - 24px));
  max-height:min(72vh,640px);
  display:none;flex-direction:column;
  background:rgba(13,14,19,.94);
  backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid var(--glass-brd);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;
  font-size:14px;line-height:1.45;
}
#dfxAiPanel.open{display:flex;animation:dfxaiIn .22s ease both}
@keyframes dfxaiIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:900px){
  #dfxAiPanel{
    right:10px;left:10px;bottom:calc(76px + env(safe-area-inset-bottom));
    width:auto;max-height:70vh;
  }
}
@media (prefers-reduced-motion:reduce){#dfxAiPanel.open{animation:none}}

/* cabecera */
.dfxai-head{display:flex;align-items:center;gap:10px;padding:11px 12px;border-bottom:1px solid var(--line)}
.dfxai-avatar{
  width:30px;height:30px;border-radius:50%;flex:none;
  background:rgba(229,9,20,.14);color:var(--red);
  display:grid;place-items:center;
}
.dfxai-avatar svg{width:16px;height:16px}
.dfxai-title{color:#fff;font-weight:700;font-size:14px}
.dfxai-sub{color:var(--muted);font-size:11px;margin-top:1px}
.dfxai-iconbtn{
  width:30px;height:30px;border-radius:8px;border:none;background:transparent;
  color:var(--muted);cursor:pointer;display:grid;place-items:center;flex:none;
}
.dfxai-iconbtn:hover{background:rgba(255,255,255,.08);color:#fff}
.dfxai-iconbtn svg{width:15px;height:15px}

/* mensajes */
.dfxai-msgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:9px;scrollbar-width:thin}
.dfxai-msg{
  max-width:88%;padding:8px 12px;border-radius:12px;
  font-size:13.5px;color:#fff;word-wrap:break-word;
}
.dfxai-msg.ai{align-self:flex-start;background:var(--surface2);border:1px solid var(--line);border-bottom-left-radius:4px}
.dfxai-msg.me{align-self:flex-end;background:var(--red);border-bottom-right-radius:4px}
.dfxai-chips{display:flex;gap:6px;flex-wrap:wrap;align-self:flex-start}
.dfxai-chip{
  font-size:12px;color:#d5d8de;cursor:pointer;font-family:inherit;
  border:1px solid var(--glass-brd);border-radius:999px;
  background:var(--glass);padding:6px 12px;transition:.15s;
}
.dfxai-chip:hover{background:rgba(255,255,255,.18);color:#fff}
.dfxai-typing{display:flex;gap:4px;align-items:center;padding:12px}
.dfxai-typing i{width:6px;height:6px;border-radius:50%;background:#7c8089;animation:dfxaiBlink 1.2s infinite}
.dfxai-typing i:nth-child(2){animation-delay:.2s}
.dfxai-typing i:nth-child(3){animation-delay:.4s}
@keyframes dfxaiBlink{0%,80%,100%{opacity:.25}40%{opacity:1}}

/* tarjetas de recomendación dentro del chat */
.dfxai-card{
  display:flex;gap:10px;border:1px solid var(--line);border-radius:10px;
  padding:8px;margin-top:8px;background:rgba(0,0,0,.25);
}
.dfxai-thumb{
  flex:none;width:46px;height:64px;border-radius:6px;overflow:hidden;
  background:#101218;display:grid;place-items:center;color:#4a4f5c;
}
.dfxai-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.dfxai-nothumb{font-size:14px}
.dfxai-cbody{flex:1;min-width:0}
.dfxai-ctitle{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dfxai-cmeta{font-size:11px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dfxai-creason{display:flex;gap:5px;align-items:center;font-size:11px;color:#c9ccd2;margin-top:4px}
.dfxai-creason svg{width:11px;height:11px;color:var(--red);flex:none}
.dfxai-clink{
  display:inline-block;margin-top:6px;font-size:12px;font-weight:600;color:#fff;
  border-bottom:1px solid var(--muted);cursor:pointer;text-decoration:none;
}
.dfxai-clink:hover{border-color:var(--red);color:#fff}

/* error + reintentar */
.dfxai-retry{margin-top:8px;font-size:11.5px;color:var(--muted)}
.dfxai-retry button{
  background:none;border:1px solid var(--glass-brd);color:#fff;border-radius:999px;
  padding:4px 12px;font-size:11.5px;cursor:pointer;font-family:inherit;
}
.dfxai-retry button:hover{border-color:var(--red)}

/* barra de entrada */
.dfxai-inputbar{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line)}
.dfxai-inputbar input{
  flex:1;min-width:0;background:var(--surface2);border:1px solid var(--line);
  border-radius:10px;padding:9px 13px;color:#fff;font-size:13.5px;font-family:inherit;outline:none;
}
.dfxai-inputbar input:focus{border-color:var(--red)}
.dfxai-send{
  width:38px;height:38px;border-radius:10px;border:none;cursor:pointer;flex:none;
  background:var(--red);color:#fff;display:grid;place-items:center;
  transition:transform .15s ease,filter .15s ease;
}
.dfxai-send svg{width:17px;height:17px}
.dfxai-send:hover{filter:brightness(1.15)}
.dfxai-send:active{transform:scale(.94)}

/* accesibilidad: foco visible coherente con la Fase 1 */
#dfxAiFab:focus-visible,.dfxai-chip:focus-visible,.dfxai-send:focus-visible,.dfxai-iconbtn:focus-visible,.dfxai-inputbar input:focus-visible{
  outline:2px solid var(--red);outline-offset:2px;
}