/* Asistente IA — panel lateral. Usa los tokens de app.css (--primary, --secondary, --accent, --line…). */

/* Solo en el dashboard: no aparece en login ni en "Conectar con Meta" */
body:not(:has(#app .topbar)) #assistant-root { display: none; }

/* ───────── Botón flotante ───────── */
.ai-launcher {
  position: fixed; right: var(--gutter); bottom: 24px; z-index: 40;
  display: inline-flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 20px 0 16px;
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: var(--primary); color: #fff; font-weight: 600; font-size: 15px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 35%, transparent), 0 2px 4px rgba(26, 34, 51, .12);
  transition: transform .18s, opacity .18s, background-color .15s;
}
.ai-launcher:hover { background: color-mix(in srgb, var(--primary) 86%, #000); transform: translateY(-1px); }
.ai-launcher .icon { color: var(--accent); }
body.ai-open .ai-launcher { opacity: 0; pointer-events: none; transform: translateY(8px); }

/* ───────── Panel ───────── */
.ai-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50;
  width: min(460px, 100vw);
  display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: -18px 0 48px rgba(26, 34, 51, .14);
  transform: translateX(100%); transition: transform .22s cubic-bezier(.2, .7, .2, 1);
}
.ai-panel.is-open { transform: translateX(0); }

.ai-head { padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.ai-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ai-title-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ai-mark { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--secondary); color: var(--accent); flex: none; }
.ai-head h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.ai-head-actions { display: flex; gap: 4px; }
.ai-icon-btn {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted); cursor: pointer;
}
.ai-icon-btn:hover { background: var(--surface-2); color: var(--ink); }

.ai-context {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 12px; padding: 8px 12px; border-radius: var(--r-inner);
  background: var(--surface-2); font-size: 13px; color: var(--muted);
}
.ai-context-text { flex: 1; min-width: 0; line-height: 1.4; }
.ai-context strong { color: var(--ink); font-weight: 600; }
.ai-context .ai-context-dot { margin-top: 6px; }
.ai-context .ai-tag { flex: none; }
.ai-context-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 3px color-mix(in srgb, var(--up) 18%, transparent); flex: none; }
.ai-context-dot--off { background: var(--faint); box-shadow: none; }
.ai-tag { font-size: 11.5px; font-weight: 600; color: #6B4B10; background: #FBF3E1; border: 1px solid #F0E0B8; border-radius: var(--r-pill); padding: 1px 8px; }

/* ───────── Conversación ───────── */
.ai-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 20px; }
.ai-log { display: grid; gap: 18px; }

.ai-empty { padding: 8px 0; }
.ai-empty-lede { font-size: 16px; line-height: 1.5; color: var(--ink-2); max-width: 38ch; }
.ai-empty-lede strong { color: var(--ink); }
.ai-suggest { display: grid; gap: 8px; margin-top: 18px; }
.ai-chip {
  text-align: left; padding: 11px 14px; border-radius: var(--r-inner);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  font-size: 14px; line-height: 1.35; cursor: pointer; transition: border-color .15s, background-color .15s;
}
.ai-chip:hover { border-color: var(--secondary); background: color-mix(in srgb, var(--secondary) 5%, #fff); color: var(--ink); }

.ai-msg--user { justify-self: end; max-width: 85%; }
.ai-msg--user p {
  background: var(--secondary); color: #fff; padding: 10px 14px;
  border-radius: 16px 16px 4px 16px; font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
}

.ai-msg--assistant { display: grid; gap: 6px; }
.ai-answer {
  padding-left: 14px; border-left: 2px solid var(--accent);
  font-size: 14.5px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere;
}
.ai-answer p { margin: 0 0 10px; }
.ai-answer p:last-child, .ai-answer ul:last-child, .ai-answer ol:last-child { margin-bottom: 0; }
.ai-answer h4 { font-size: 14.5px; font-weight: 700; color: var(--secondary); margin: 16px 0 6px; }
.ai-answer h4:first-child { margin-top: 0; }
.ai-answer ul, .ai-answer ol { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 5px; }
.ai-answer strong { font-weight: 700; }
.ai-answer code { font-size: 13px; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }
.ai-error { color: var(--down); }
.ai-msg--assistant:has(.ai-error) .ai-answer { border-left-color: var(--down); }

.ai-copy {
  justify-self: start; margin-left: 14px; display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: none; padding: 2px 0; font-size: 12.5px; color: var(--faint); cursor: pointer;
}
.ai-copy:hover { color: var(--ink-2); }

.ai-typing { display: inline-flex; gap: 4px; padding: 6px 0; }
.ai-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); animation: ai-blink 1.2s infinite; }
.ai-typing i:nth-child(2) { animation-delay: .15s; }
.ai-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ai-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.ai-divider { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--faint); }
.ai-divider::before, .ai-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ───────── Caja de texto ───────── */
.ai-composer {
  display: flex; align-items: flex-end; gap: 8px; margin: 0 16px;
  padding: 6px 6px 6px 14px; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.ai-composer:focus-within { border-color: var(--secondary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary) 14%, transparent); }
.ai-composer textarea {
  flex: 1; resize: none; border: 0; outline: none; background: transparent; font-family: var(--font);
  font-size: 15px; line-height: 1.45; padding: 8px 0; max-height: 160px; color: var(--ink);
}
.ai-composer textarea:disabled { cursor: not-allowed; }
.ai-send {
  display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none;
  border: 0; border-radius: 50%; background: var(--primary); color: #fff; cursor: pointer;
}
.ai-send:hover { background: color-mix(in srgb, var(--primary) 86%, #000); }
.ai-send.is-stop { background: var(--secondary); }
.ai-send:disabled { background: var(--line-strong); cursor: not-allowed; }
.ai-foot { font-size: 12px; color: var(--faint); padding: 8px 20px 14px; text-align: center; }

/* ───────── Responsive ───────── */
@media (max-width: 640px) {
  .ai-launcher { bottom: 16px; height: 46px; padding: 0 16px 0 14px; font-size: 14.5px; }
  .ai-panel { width: 100vw; border-left: 0; }
  .ai-head { padding: 14px 16px 12px; }
  .ai-scroll { padding: 16px; }
  .ai-composer { margin: 0 12px; }
  .ai-composer textarea { font-size: 16px; } /* evita el zoom automático en iOS */
}

@media print { #assistant-root { display: none !important; } }