/* CQ-TEC AI Chatbot — self-contained styling.
   Colors are hardcoded (not theme CSS variables) so this widget looks
   identical regardless of which theme is active. */

/* Toggle button */
#cq-chat-toggle {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #E86B2A;
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
  z-index: 9000;
  transition: background 0.2s, transform 0.2s;
}
#cq-chat-toggle:hover { background: #B84E18; transform: scale(1.06); }
#cq-chat-toggle.active { background: #B84E18; }
#cq-chat-toggle .icon-open { display: block; }
#cq-chat-toggle .icon-open svg { display: block; }
.chatbot-icon-image { width: 26px; height: 26px; object-fit: contain; display: block; }
#cq-chat-toggle .icon-close { display: none; }
#cq-chat-toggle.active .icon-open { display: none; }
#cq-chat-toggle.active .icon-close { display: block; }

/* Chat panel */
#cq-chat {
  position: fixed;
  bottom: 96px;
  right: 28px;
  width: min(360px, calc(100vw - 56px));
  max-height: min(560px, 85dvh);
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  z-index: 8999;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
#cq-chat.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

/* Panel header */
.cq-chat-header {
  background: #1D3461;
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.cq-chat-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.cq-chat-title { flex: 1; }
.cq-chat-title strong { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600; }
#cq-chat-close {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 4px;
  border-radius: 6px;
  opacity: .8;
  transition: opacity 0.15s;
  flex-shrink: 0;
  position: relative;
  z-index: 1; /* stacks above panel content within the header; the panel
                 itself sits at z-index: 8999, well above the toggle
                 button's icon-swap approach this replaces on narrow
                 screens (see the media query below) */
}
#cq-chat-close:hover { opacity: 1; }

/* Messages */
#cq-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}
#cq-chat-body::-webkit-scrollbar { width: 4px; }
#cq-chat-body::-webkit-scrollbar-track { background: transparent; }
#cq-chat-body::-webkit-scrollbar-thumb { background: #E0E5EE; border-radius: 2px; }

.cq-msg { display: flex; flex-direction: column; gap: 6px; max-width: 86%; }
.cq-msg--bot { align-self: flex-start; align-items: flex-start; }
.cq-msg--user { align-self: flex-end; align-items: flex-end; }

.cq-msg-bubble {
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-wrap;
}
.cq-msg--bot .cq-msg-bubble { background: #F5F7FB; color: #111827; border-bottom-left-radius: 4px; }
.cq-msg--user .cq-msg-bubble { background: #E86B2A; color: #fff; border-bottom-right-radius: 4px; }

.cq-msg-action {
  display: inline-block;
  margin-top: 2px;
  padding: 8px 14px;
  background: #E86B2A;
  color: #fff;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: 'Space Grotesk', sans-serif;
  transition: background 0.15s;
}
.cq-msg-action:hover { background: #B84E18; }

/* Typing indicator */
.cq-typing .cq-msg-bubble {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 14px;
}
.cq-typing .cq-msg-bubble span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4B5563;
  display: inline-block;
  animation: cq-bounce 1.1s infinite ease-in-out both;
}
.cq-typing .cq-msg-bubble span:nth-child(1) { animation-delay: 0s; }
.cq-typing .cq-msg-bubble span:nth-child(2) { animation-delay: 0.18s; }
.cq-typing .cq-msg-bubble span:nth-child(3) { animation-delay: 0.36s; }
@keyframes cq-bounce {
  0%, 80%, 100% { transform: scale(0.7); opacity: .5; }
  40%           { transform: scale(1);   opacity: 1; }
}

/* Suggestion chips */
#cq-chat-suggestions {
  padding: 4px 14px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
}
.cq-suggest-chip {
  padding: 6px 12px;
  border: 1.5px solid #E86B2A;
  border-radius: 20px;
  background: transparent;
  color: #E86B2A;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.cq-suggest-chip:hover { background: #E86B2A; color: #fff; }

/* Input footer */
.cq-chat-footer {
  padding: 10px 14px max(14px, env(safe-area-inset-bottom));
  display: flex;
  gap: 8px;
  border-top: 1px solid #E0E5EE;
  flex-shrink: 0;
  background: #FFFFFF;
}
#cq-chat-input {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid #E0E5EE;
  border-radius: 22px;
  font-size: 14px;
  color: #111827;
  background: #F5F7FB;
  outline: none;
  transition: border-color 0.15s;
}
#cq-chat-input:focus { border-color: #E86B2A; }
#cq-chat-send {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #E86B2A;
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  align-self: flex-end;
  transition: background 0.15s;
}
#cq-chat-send:hover { background: #B84E18; }

/* Mobile & tablet — widened from 480px to 768px: the same toggle/panel
   overlap (see comment below) was reported happening on viewports up to
   768px, not just narrow phones, so the full-width bottom-sheet
   treatment now applies at that more conventional "mobile + tablet"
   breakpoint. */
@media (max-width: 768px) {
  #cq-chat {
    bottom: 0; right: 0; left: 0;
    width: 100%;
    max-height: 75dvh;
    border-radius: 12px 12px 0 0;
  }
  #cq-chat-toggle { bottom: 16px; right: 16px; }
  /* The panel becomes a full-width bottom sheet here, occupying the same
     bottom-right corner as the floating toggle button. Without this, the
     toggle (z-index: 9000, higher than the panel's 8999) renders on top
     of the panel — specifically over its Send button, since both sit in
     the same bottom-right corner — blocking taps on it. This also
     removes the redundant second "close" affordance: the toggle
     visually turns into a ✕ when open (.icon-close), which duplicated
     the panel's own #cq-chat-close button in its header. The panel
     already has that dedicated close button, so hiding the toggle while
     open loses no functionality — it just removes the duplicate/overlap.
  */
  #cq-chat-toggle.active { display: none; }
}