* { box-sizing: border-box; }
:root { --brand-color: #4f46e5; --brand-color-hover: #4338ca; }
html, body { margin: 0; height: 100%; width: 100%; font-family: 'Segoe UI', system-ui, sans-serif; background: transparent; overflow: hidden; }

/* El iframe embebido en la web del cliente es siempre del mismo tamaño (fijo, sticky
   abajo a la derecha); dentro de él, solo la burbuja y el panel reciben clics: el resto
   del área es transparente y "pointer-events: none" para no bloquear la página del cliente. */
#widget-container { position: relative; width: 100%; height: 100%; pointer-events: none; }

.widget-bubble {
  position: absolute; bottom: 20px; right: 20px; width: 60px; height: 60px; border-radius: 50%;
  background: var(--brand-color); color: #fff; border: none; display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.28); pointer-events: auto; transition: transform .15s ease;
}
.widget-bubble:hover { transform: scale(1.06); }

.widget {
  position: absolute; bottom: 96px; right: 20px;
  width: min(340px, calc(100% - 40px)); height: min(520px, calc(100% - 116px));
  display: none; flex-direction: column; background: #ffffff;
  border-radius: 14px; overflow: hidden; box-shadow: 0 12px 34px rgba(0,0,0,0.22);
  pointer-events: auto;
}
.widget.open { display: flex; }

.widget-header {
  background: var(--brand-color); color: white; padding: 14px 16px; font-weight: 600; font-size: 14px;
  display: flex; justify-content: space-between; align-items: center;
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; display: inline-block; }

.widget-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: #f9fafb; }
.widget-msg { max-width: 80%; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.4; }
.widget-msg.visitor { align-self: flex-end; background: var(--brand-color); color: white; border-bottom-right-radius: 3px; }
.widget-msg.bot, .widget-msg.agent { align-self: flex-start; background: white; border: 1px solid #e5e7eb; border-bottom-left-radius: 3px; }
.widget-msg a { color: inherit; text-decoration: underline; }
.widget-msg.bot a, .widget-msg.agent a { color: var(--brand-color); }

.widget-typing { padding: 0 14px 6px; font-size: 11px; color: #9ca3af; font-style: italic; }

.widget-handoff-actions { display: flex; gap: 8px; align-self: flex-start; margin-top: -2px; }
.widget-handoff-btn {
  padding: 6px 16px; border-radius: 14px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.widget-handoff-btn.yes { background: var(--brand-color); color: #fff; border: 1px solid var(--brand-color); }
.widget-handoff-btn.yes:hover { background: var(--brand-color-hover); }
.widget-handoff-btn.no { background: white; color: #374151; border: 1px solid #e5e7eb; }
.widget-handoff-btn.no:hover { background: #f3f4f6; }

.widget-input-row { display: flex; padding: 10px; border-top: 1px solid #e5e7eb; background: white; gap: 8px; }
.widget-input-row input {
  flex: 1; padding: 10px 12px; border-radius: 20px; border: 1px solid #e5e7eb; font-size: 13.5px; outline: none;
}
.widget-input-row input:focus { border-color: var(--brand-color); }
.widget-input-row button {
  width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--brand-color); color: white;
  font-size: 15px; cursor: pointer; flex-shrink: 0;
}
.widget-input-row button:hover { background: var(--brand-color-hover); }

.widget-watermark {
  text-align: center; font-size: 10.5px; color: #9ca3af; padding: 5px 0 7px; background: white;
}