:root { --wfchat-blue: #1972f5; --wfchat-aqua: #22c7b8; }
.wfchat-launcher {
  position: fixed; right: 24px; bottom: 24px; z-index: 2147483000;
  width: 60px; height: 60px; border: 0; border-radius: 50%;
  background: #1972f5; color: white; display: grid; place-items: center;
  box-shadow: 0 8px 26px rgba(25,114,245,.35); cursor: pointer;
}
.wfchat-launcher svg { width: 30px; height: 30px; }
.wfchat-panel {
  position: fixed; right: 24px; bottom: 24px; z-index: 2147483001;
  width: 380px; max-width: calc(100vw - 32px); height: 620px; max-height: calc(100vh - 48px);
  display: none; grid-template-rows: 68px auto 1fr 72px;
  border-radius: 14px; overflow: hidden; background: white;
  box-shadow: 0 24px 70px rgba(15,23,42,.28);
  font: 14px/1.35 Arial, sans-serif; color: #111827;
}
.wfchat-panel.open { display: grid; }
.wfchat-head {
  background: linear-gradient(135deg, var(--wfchat-blue), #155bd8 55%, var(--wfchat-aqua));
  color: white; display: flex; align-items: center; justify-content: space-between; padding: 0 16px;
}
.wfchat-team { display: flex; align-items: center; gap: 10px; }
.wfchat-avatars { display: flex; }
.wfchat-avatar {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid white;
  background-size: cover; background-position: center; box-shadow: 0 4px 14px rgba(15,23,42,.18);
}
.wfchat-avatar + .wfchat-avatar { margin-left: -10px; }
.wfchat-paola { background-image: url("https://image.crisp.chat/process/thumbnail/?url=https%3A%2F%2Fstorage.crisp.chat%2Fusers%2Favatar%2Foperator%2Fd9589b64611ab000%2F9776f5ce-c4c0-46f2-9bbe-6b1a1f_czndr3.jpeg&width=120&height=120&1691076651142"); }
.wfchat-massimo { background-image: url("https://image.crisp.chat/avatar/operator/ed882652-8b75-4aa9-9e44-78611fb0d7e5/120/?1691076651142"); }
.wfchat-title strong, .wfchat-title span { display: block; }
.wfchat-title span { font-size: 12px; opacity: .9; }
.wfchat-close { border: 0; background: transparent; color: white; font-size: 28px; cursor: pointer; }
.wfchat-profile {
  display: grid; grid-template-columns: 1fr; gap: 9px; padding: 14px 14px 12px;
  border-bottom: 1px solid #dbeafe; background: #eff6ff;
}
.wfchat-profile-title strong, .wfchat-profile-title span { display: block; }
.wfchat-profile-title strong { color: #0f172a; font-size: 15px; }
.wfchat-profile-title span { color: #475569; font-size: 12px; margin-top: 2px; }
.wfchat-profile label {
  display: grid; gap: 5px; color: #1e3a8a; font-size: 12px; font-weight: 800;
}
.wfchat-profile input {
  width: 100%; min-width: 0; border: 1px solid #93c5fd; border-radius: 10px; padding: 11px 12px;
  font: inherit; background: white;
}
.wfchat-profile input.wfchat-invalid {
  border-color: #dc2626; box-shadow: 0 0 0 2px rgba(220,38,38,.12);
}
.wfchat-profile-hint {
  color: #1d4ed8; font-size: 12px;
}
.wfchat-messages { overflow: auto; background: #f8fafc; padding: 14px; }
.wfchat-start-note {
  border: 1px dashed #93c5fd; border-radius: 12px; background: #eff6ff;
  color: #1e3a8a; padding: 13px; margin-bottom: 12px;
}
.wfchat-start-note strong, .wfchat-start-note span { display: block; }
.wfchat-start-note span { margin-top: 4px; font-size: 12px; color: #475569; }
.wfchat-card {
  display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #e5e7eb;
  border-radius: 12px; background: white; margin-bottom: 12px;
}
.wfchat-card strong, .wfchat-card span { display: block; }
.wfchat-card span { color: #6b7280; font-size: 12px; }
.wfchat-msg {
  max-width: 82%; padding: 10px 12px; border-radius: 14px; background: white;
  margin: 0 0 10px; box-shadow: 0 1px 0 rgba(15,23,42,.05); white-space: pre-wrap;
}
.wfchat-msg.visitor { margin-left: auto; background: #1972f5; color: white; }
.wfchat-msg.system { margin-left: auto; margin-right: auto; background: #fef3c7; color: #92400e; font-size: 12px; }
.wfchat-read {
  color: #64748b; font-size: 11px; text-align: right; margin: -6px 2px 10px;
}
.wfchat-typing {
  display: inline-flex; align-items: center; max-width: 82%; padding: 8px 11px;
  border-radius: 999px; background: white; color: #64748b; font-size: 12px;
  box-shadow: 0 1px 0 rgba(15,23,42,.05); margin-bottom: 10px;
}
.wfchat-attachment {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 7px; padding: 7px 8px;
  border-radius: 8px; background: rgba(25,114,245,.08); color: inherit; text-decoration: none;
}
.wfchat-compose {
  display: grid; grid-template-columns: auto 1fr auto; gap: 8px; padding: 12px;
  border-top: 1px solid #e5e7eb; background: white;
}
.wfchat-compose input[type=text] {
  min-width: 0; border: 1px solid #d1d5db; border-radius: 999px; padding: 0 14px;
}
.wfchat-file {
  width: 40px; border: 1px solid #d1d5db; border-radius: 999px; background: white; cursor: pointer;
  display: grid; place-items: center; color: #6b7280;
}
.wfchat-file input { display: none; }
.wfchat-send { border: 0; border-radius: 999px; background: #1972f5; color: white; padding: 0 16px; font-weight: 800; }
@media(max-width: 640px) {
  .wfchat-launcher { right: 18px; bottom: 18px; }
  .wfchat-panel { right: 12px; bottom: 12px; width: calc(100vw - 24px); height: min(620px, calc(100vh - 24px)); }
}