/* Widget Lola — todos los selectores con prefijo .lola- para no chocar con el host. */
.lola-root, .lola-root * { box-sizing: border-box; }
.lola-root {
  --lola-color: #1a73e8;
  --lola-color-dark: #1357b1;
  --lola-bg: #ffffff;
  --lola-bg-alt: #f6f7fb;
  --lola-fg: #1f2330;
  --lola-muted: #6b7280;
  --lola-border: #e1e4ec;
  position: fixed;
  bottom: 24px;
  z-index: 999999;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: var(--lola-fg);
}
.lola-root.lola-pos-bottom-right { right: 24px; }
.lola-root.lola-pos-bottom-left  { left:  24px; }

.lola-toggle {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--lola-color); color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  transition: transform 0.15s ease, background 0.15s ease;
}
.lola-toggle:hover { transform: translateY(-2px); background: var(--lola-color-dark); }
.lola-toggle svg { width: 28px; height: 28px; }

.lola-window {
  position: fixed;
  bottom: 96px;
  width: 380px;
  height: min(620px, 80vh);
  max-height: 80vh;
  background: var(--lola-bg);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.lola-root.lola-pos-bottom-right .lola-window { right: 24px; }
.lola-root.lola-pos-bottom-left  .lola-window { left:  24px; }
.lola-root.lola-open .lola-window { display: flex; }

.lola-header {
  background: var(--lola-color); color: #fff;
  padding: 14px 16px; display: flex; align-items: center; gap: 10px;
}
.lola-header img { width: 32px; height: 32px; color: #fff; }
.lola-header .lola-title { font-weight: 600; }
.lola-header .lola-subtitle { font-size: 12px; opacity: 0.9; }
.lola-header-text { flex: 1; line-height: 1.2; }
.lola-header .lola-close {
  background: transparent; border: none; color: #fff; font-size: 22px; cursor: pointer; padding: 0; line-height: 1;
}

.lola-messages {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--lola-bg-alt);
}
.lola-msg { max-width: 88%; line-height: 1.45; word-wrap: break-word; }
.lola-msg-user {
  align-self: flex-end;
  background: var(--lola-color); color: #fff;
  padding: 10px 14px; border-radius: 16px 16px 4px 16px;
}
.lola-msg-assistant {
  align-self: flex-start;
  background: #fff;
  padding: 10px 14px; border-radius: 16px 16px 16px 4px;
  border: 1px solid var(--lola-border);
}
.lola-msg-assistant p { margin: 0 0 8px 0; }
.lola-msg-assistant p:last-child { margin-bottom: 0; }
.lola-msg-assistant ol, .lola-msg-assistant ul { margin: 6px 0; padding-left: 22px; }
.lola-msg-assistant code { background: #f0f2f7; padding: 1px 5px; border-radius: 4px; font-family: ui-monospace, monospace; font-size: 12px; }
.lola-msg-assistant pre { background: #f0f2f7; padding: 10px; border-radius: 6px; overflow-x: auto; font-size: 12px; }
.lola-msg-assistant pre code { background: transparent; padding: 0; }
.lola-msg-assistant a { color: var(--lola-color); }
.lola-msg-assistant blockquote { border-left: 3px solid var(--lola-border); margin: 6px 0; padding-left: 10px; color: var(--lola-muted); }
.lola-msg-assistant table { border-collapse: collapse; margin: 6px 0; font-size: 13px; }
.lola-msg-assistant table th, .lola-msg-assistant table td { border: 1px solid var(--lola-border); padding: 4px 8px; }

.lola-msg-error {
  align-self: stretch; background: #fdecec; color: #851515; padding: 10px 14px; border-radius: 8px;
  border: 1px solid #f5b8b8; font-size: 13px;
}

.lola-typing {
  display: inline-flex; gap: 4px; padding: 6px 0;
}
.lola-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--lola-muted); display: block;
  animation: lola-bounce 1.2s infinite ease-in-out both;
}
.lola-typing span:nth-child(2) { animation-delay: 0.15s; }
.lola-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes lola-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-4px); opacity: 1; }
}

.lola-feedback {
  display: flex; gap: 6px; margin-top: 6px; align-items: center;
}
.lola-feedback button {
  background: transparent; border: 1px solid var(--lola-border); cursor: pointer;
  padding: 2px 8px; border-radius: 12px; font-size: 13px; color: var(--lola-muted);
}
.lola-feedback button:hover { background: var(--lola-bg-alt); }
.lola-feedback button.lola-fb-active { background: var(--lola-color); color: #fff; border-color: var(--lola-color); }
.lola-feedback .lola-fb-thanks { color: var(--lola-muted); font-size: 12px; }

.lola-input-area {
  display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--lola-border); background: var(--lola-bg);
}
.lola-input-area textarea {
  flex: 1; resize: none; border: 1px solid var(--lola-border); border-radius: 10px;
  padding: 10px 12px; font: inherit; min-height: 40px; max-height: 120px; outline: none;
  background: var(--lola-bg-alt);
}
.lola-input-area textarea:focus { border-color: var(--lola-color); background: #fff; }
.lola-send {
  background: var(--lola-color); color: #fff; border: none; border-radius: 50%;
  width: 40px; height: 40px; cursor: pointer; flex: 0 0 40px;
  display: flex; align-items: center; justify-content: center;
}
.lola-send:hover { background: var(--lola-color-dark); }
.lola-send:disabled { opacity: 0.5; cursor: not-allowed; }
.lola-send svg { width: 18px; height: 18px; }

.lola-footer {
  text-align: center; padding: 6px; font-size: 11px; color: var(--lola-muted);
  border-top: 1px solid var(--lola-border); background: var(--lola-bg);
}

/* Mobile: ventana full-screen */
@media (max-width: 640px) {
  .lola-root.lola-open .lola-window {
    right: 0 !important; left: 0 !important; bottom: 0 !important;
    width: 100vw; height: 100vh; max-height: none; border-radius: 0;
  }
  .lola-root.lola-open .lola-toggle { display: none; }
}