/* ==========================================================================
   Purified Solutions — Chat Widget
   Compiled from provided SCSS, recolored to brand tokens (css/style.css)
   ========================================================================== */

:root {
  --chat-h: 540px;
  --chat-w: 360px;
  --chat-d: 16px;
  --chat-radius: 12px;
  --chat-btn: 56px;
  --chat-primary: var(--blue-deep, #2b6dab);
  --chat-primary-dark: var(--blue-deep-dark, #1f4f7d);
  --chat-accent: var(--mist, #eef6fb);
  --chat-bg: var(--white, #fff);
  --chat-ink: var(--ink, #0a0e12);
  --chat-font: var(--gray, #5a6b78);
}

.chatbox-open,
.chatbox-close,
.chatbox-popup,
.chatbox-panel {
  font-family: var(--font-body, "IBM Plex Sans", sans-serif);
}

.chatbox-open, .chatbox-close {
  position: fixed;
  bottom: 0;
  right: 0;
  width: var(--chat-btn);
  height: var(--chat-btn);
  color: var(--chat-bg);
  background-color: var(--chat-primary);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(10, 14, 18, 0.22);
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.chatbox-open:hover, .chatbox-close:hover { background-color: var(--chat-primary-dark); transform: translateY(-2px); }
.chatbox-open { margin: var(--chat-d); }
.chatbox-close { display: none; margin: var(--chat-d) calc(2 * var(--chat-d) + var(--chat-btn)) var(--chat-d) var(--chat-d); }

.chatbox-popup, .chatbox-panel {
  display: none;
  position: fixed;
  box-shadow: 0 12px 40px rgba(10, 14, 18, 0.22);
  flex-direction: column;
  z-index: 999;
  background-color: var(--chat-bg);
}

.chatbox-popup {
  bottom: calc(2 * var(--chat-d) + var(--chat-btn));
  right: var(--chat-d);
  width: var(--chat-w);
  height: var(--chat-h);
  max-height: calc(100vh - 120px);
  border-radius: var(--chat-radius);
  overflow: hidden;
}

.chatbox-panel {
  top: 0; right: 0; bottom: 0;
  width: min(420px, 100vw);
}

.chatbox-popup__header,
.chatbox-panel__header {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  padding: 14px var(--chat-d);
  color: var(--chat-bg);
  background-color: var(--chat-primary);
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 0 0 auto;
}
.chatbox-popup__header { border-top-left-radius: var(--chat-radius); border-top-right-radius: var(--chat-radius); }

.chatbox-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chatbox-brand-icon { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
.chatbox-brand-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chatbox-brand-name {
  font-family: var(--font-display, sans-serif);
  font-weight: 700;
  font-size: 1rem;
  color: var(--chat-bg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chatbox-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  color: rgba(255,255,255,0.85);
}

.chat-status-dot { position: relative; width: 11px; height: 11px; flex-shrink: 0; }
.chat-status-dot .dot-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 1;
  background: radial-gradient(circle at 30% 30%, rgb(50,255,100), rgb(15,204,69) 60%, rgb(10,150,40) 100%);
  box-shadow:
    inset -1px -1px 3px rgba(0,0,0,0.2),
    inset 1px 1px 3px rgba(255,255,255,0.3),
    0 2px 4px rgba(0,0,0,0.4);
}
.chat-status-dot .dot-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 0;
  background-color: rgb(15,204,69);
  animation: chat-status-pulse 1.4s ease-in-out infinite;
}
@keyframes chat-status-pulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(2.2); opacity: 0; }
}

.chatbox-panel-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.chatbox-maximize, .chatbox-minimize, .chatbox-panel-close {
  color: var(--chat-bg);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 6px;
  opacity: 0.9;
  margin-left: auto;
}
.chatbox-maximize:hover, .chatbox-minimize:hover, .chatbox-panel-close:hover { opacity: 1; }

.chatbox-popup__main, .chatbox-panel__main {
  box-sizing: border-box;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--chat-d);
  background: var(--chat-accent);
}

.chatbox-msg {
  max-width: 84%;
  margin-bottom: 10px;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 0.88rem;
  line-height: 1.4;
}
.chatbox-msg-bot {
  background: var(--chat-bg);
  color: var(--chat-ink);
  border: 1px solid var(--line, #e1ecf3);
  border-bottom-left-radius: 4px;
  margin-right: auto;
}
.chatbox-msg-user {
  background: var(--chat-primary);
  color: var(--chat-bg);
  border-bottom-right-radius: 4px;
  margin-left: auto;
}
.chatbox-msg-typing { display: flex; align-items: center; gap: 4px; padding-top: 12px; padding-bottom: 12px; }
.chatbox-msg-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--chat-font);
  opacity: 0.5;
  animation: chat-typing-bounce 1.1s ease-in-out infinite;
}
.chatbox-msg-typing span:nth-child(2) { animation-delay: 0.15s; }
.chatbox-msg-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.chatbox-quick-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; margin-bottom: 12px; }
.chatbox-quick-btn {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--chat-primary);
  color: var(--chat-primary);
  background: var(--chat-bg);
  cursor: pointer;
}
.chatbox-quick-btn:hover { background: var(--chat-primary); color: var(--chat-bg); }

.chatbox-popup__footer, .chatbox-panel__footer {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  padding: 10px var(--chat-d);
  border-top: 1px solid var(--line, #e1ecf3);
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  background: var(--chat-bg);
}
.chatbox-popup__footer { border-bottom-left-radius: var(--chat-radius); border-bottom-right-radius: var(--chat-radius); }

.chatbox-popup__footer textarea, .chatbox-panel__footer textarea {
  box-sizing: border-box;
  flex: 1;
  margin: 0;
  height: 22px;
  max-height: 80px;
  padding: 0;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 22px;
  color: var(--chat-ink);
  background-color: transparent;
  border: 0;
  outline: 0;
  resize: none;
  overflow: hidden;
}
.chatbox-popup__footer textarea::placeholder, .chatbox-panel__footer textarea::placeholder { color: var(--chat-font); }

.chatbox-send {
  color: var(--chat-primary);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 1.1rem;
  flex-shrink: 0;
  padding: 4px;
}
.chatbox-send:disabled { opacity: 0.4; cursor: default; }
.chatbox-send:hover:not(:disabled) { color: var(--chat-primary-dark); }

.chatbox-human-link {
  text-align: center;
  padding: 6px var(--chat-d) 0;
  flex: 0 0 auto;
  background: var(--chat-bg);
}
.chatbox-human-link button {
  background: none;
  border: none;
  color: var(--chat-primary);
  font-size: 0.76rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
}

/* ---------- Escalation form ---------- */

.chatbox-escalate {
  display: none;
  flex: 0 0 auto;
  max-height: 45vh;
  overflow-y: auto;
  padding: var(--chat-d);
  background: var(--chat-bg);
  border-top: 1px solid var(--line, #e1ecf3);
}
.chatbox-escalate.is-open { display: block; }
.chatbox-escalate-head { margin-bottom: 8px; }
.chatbox-escalate-close {
  background: none;
  border: none;
  padding: 4px 0;
  color: var(--chat-primary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.chatbox-escalate-close:hover { text-decoration: underline; }
.chatbox-escalate p {
  margin: 0 0 10px;
  font-size: 0.82rem;
  color: var(--chat-font);
}
.chatbox-escalate-row { margin-bottom: 8px; }
.chatbox-escalate-row input, .chatbox-escalate-row textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 0.85rem;
  padding: 8px 10px;
  border: 1px solid var(--line, #e1ecf3);
  border-radius: 7px;
  background: var(--chat-accent);
  color: var(--chat-ink);
}
.chatbox-escalate-row textarea { resize: vertical; min-height: 54px; }
.chatbox-escalate-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chatbox-escalate-actions button {
  flex: 1 1 0;
  min-width: 88px;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 9px 8px;
  border-radius: 7px;
  border: 1.5px solid var(--chat-primary);
  cursor: pointer;
  /* All three are equal, valid choices — none should read as "the" default.
     A shared pulse (staggered slightly per button) draws the eye to the
     whole group rather than singling one out. */
  background: var(--chat-bg);
  color: var(--chat-primary);
  animation: chatbox-escalate-pulse 2.2s ease-in-out infinite;
}
.chatbox-escalate-actions button:hover { background: var(--chat-accent); animation-play-state: paused; }
.chatbox-escalate-text { animation-delay: 0s; }
.chatbox-escalate-call { animation-delay: 0.25s; }
.chatbox-escalate-email { animation-delay: 0.5s; }

@keyframes chatbox-escalate-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(43, 109, 171, 0.35); }
  50% { box-shadow: 0 0 0 5px rgba(43, 109, 171, 0); }
}
.chatbox-escalate-status { font-size: 0.78rem; color: var(--chat-font); margin-top: 8px; }

@media (max-width: 480px) {
  .chatbox-popup {
    right: 8px;
    left: 8px;
    width: auto;
    bottom: calc(2 * var(--chat-d) + var(--chat-btn));
  }
}