#fr-widget { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 9999; font-family: 'Segoe UI', system-ui, sans-serif; }
#fr-toggle {
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--accent, #2563eb), var(--accent2, #1d4ed8));
  color: #fff; font-size: 1.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
#fr-panel {
  display: none; width: 340px; height: 480px; margin-bottom: 0.75rem;
  background: var(--surface, #fff); border: 1px solid var(--border, #d1d9e6);
  border-radius: 12px; flex-direction: column; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
#fr-panel.open { display: flex; }
/* display:flex en hijos anula [hidden] del UA; forzar ocultamiento al iniciar chat */
#fr-panel [hidden] { display: none !important; }
#fr-header {
  padding: 0.75rem 1rem; background: var(--surface2, #eef1f6); font-weight: 600;
  border-bottom: 1px solid var(--border, #d1d9e6); color: var(--text, #1e293b);
}
#fr-messages { flex: 1; overflow-y: auto; padding: 0.75rem; background: var(--bg, #f4f6fa); }
#fr-messages .msg { margin-bottom: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 8px; font-size: 0.875rem; max-width: 85%; line-height: 1.4; }
#fr-messages .msg-bot { background: var(--surface, #fff); border: 1px solid var(--border, #d1d9e6); margin-right: auto; color: var(--text, #1e293b); }
#fr-messages .msg-user { background: linear-gradient(135deg, var(--accent, #2563eb), var(--accent2, #1d4ed8)); color: #fff; margin-left: auto; }
#fr-messages .msg-choices { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.35rem 0; background: transparent; border: none; max-width: 100%; }
.fr-choice-btn {
  display: block; width: 100%; text-align: left; padding: 0.5rem 0.75rem;
  border: 1px solid var(--accent, #2563eb); border-radius: 8px; background: var(--surface, #fff);
  color: var(--accent, #2563eb); font-size: 0.8125rem; font-weight: 600; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.fr-choice-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--accent, #2563eb), var(--accent2, #1d4ed8));
  color: #fff;
}
.fr-choice-btn.disabled, .fr-choice-btn:disabled { opacity: 0.55; cursor: default; }
.fr-prechat {
  flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.65rem;
  background: var(--bg, #f4f6fa);
}
.fr-prechat-title { margin: 0; font-weight: 600; color: var(--text, #1e293b); font-size: 0.95rem; }
.fr-prechat-hint { margin: 0 0 0.25rem; font-size: 0.8125rem; color: var(--muted, #64748b); }
.fr-prechat label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.75rem; font-weight: 600; color: var(--muted, #64748b); }
.fr-prechat input {
  padding: 0.55rem 0.65rem; border: 1px solid var(--border, #d1d9e6); border-radius: 8px;
  font-size: 0.875rem; background: var(--surface, #fff); color: var(--text, #1e293b);
}
.fr-prechat input:focus { outline: 2px solid var(--accent, #2563eb); outline-offset: 1px; }
.fr-btn-primary {
  margin-top: 0.35rem; padding: 0.65rem 1rem; border: none; border-radius: 8px; cursor: pointer;
  background: linear-gradient(135deg, var(--accent, #2563eb), var(--accent2, #1d4ed8));
  color: #fff; font-weight: 600; font-size: 0.875rem;
}
.fr-btn-primary:hover { filter: brightness(1.05); }
#fr-quick {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
  padding: 0.5rem 0.75rem; border-top: 1px solid var(--border, #d1d9e6);
  background: var(--surface2, #eef1f6);
}
.fr-quick-label { font-size: 0.7rem; color: var(--muted, #64748b); font-weight: 600; width: 100%; margin-bottom: 0.15rem; }
.fr-quick-btn {
  padding: 0.3rem 0.55rem; border: 1px solid var(--border, #d1d9e6); border-radius: 999px;
  background: var(--surface, #fff); color: var(--text, #1e293b); font-size: 0.75rem; cursor: pointer;
}
.fr-quick-btn:hover {
  border-color: var(--accent, #2563eb); color: var(--accent, #2563eb);
}
#fr-input { display: flex; border-top: 1px solid var(--border, #d1d9e6); background: var(--surface, #fff); }
#fr-input input { flex: 1; border: none; padding: 0.75rem; outline: none; background: transparent; color: var(--text, #1e293b); }
#fr-input button {
  border: none; background: var(--accent, #2563eb); color: #fff; padding: 0 1rem; cursor: pointer; font-size: 1rem;
}
.fr-prechat-status { margin: 0; font-size: 0.8125rem; color: var(--muted, #64748b); }
.fr-prechat-status.fr-prechat-err { color: var(--err, #dc2626); }
.msg-error {
  display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start;
  border-color: var(--err, #dc2626) !important; background: color-mix(in srgb, var(--err, #dc2626) 8%, var(--surface, #fff)) !important;
}
.fr-retry-btn {
  padding: 0.35rem 0.75rem; border: 1px solid var(--accent, #2563eb); border-radius: 6px;
  background: var(--surface, #fff); color: var(--accent, #2563eb); font-size: 0.8125rem; font-weight: 600; cursor: pointer;
}
.fr-retry-btn:hover {
  background: linear-gradient(135deg, var(--accent, #2563eb), var(--accent2, #1d4ed8)); color: #fff;
}