/* =====================================================================
   CHAT WIDGET STYLES
   Uses the same design tokens as css/styles.css (--panel, --line,
   --radius, --display, --body) so it matches the rest of the site.
===================================================================== */
#cnChat{position:fixed;right:22px;bottom:22px;z-index:999;}

#cnChatToggle{
  width:58px;height:58px;border-radius:50%;
  background:var(--white);color:var(--black);
  border:none;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 30px rgba(0,0,0,0.45);
  transition:transform .25s var(--ease);
}
#cnChatToggle:hover{transform:scale(1.06);}
#cnChatToggle svg{width:24px;height:24px;}

@keyframes cnChatPulseAnim{
  0%,100%{box-shadow:0 8px 30px rgba(0,0,0,0.45),0 0 0 0 rgba(255,255,255,0.35);}
  50%{box-shadow:0 8px 30px rgba(0,0,0,0.45),0 0 0 10px rgba(255,255,255,0);}
}
#cnChatToggle.cnChatPulse{animation:cnChatPulseAnim 1.8s ease-in-out 3;}

#cnChatPanel{
  position:absolute;right:0;bottom:76px;
  width:360px;max-width:calc(100vw - 32px);
  height:520px;max-height:calc(100vh - 140px);
  display:flex;flex-direction:column;
  background:var(--panel);
  opacity:0;pointer-events:none;transform:translateY(16px) scale(0.97);
  transition:opacity .22s var(--ease),transform .22s var(--ease);
  box-shadow:0 20px 60px rgba(0,0,0,0.55);
}
#cnChatPanel.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1);}

#cnChatHeader{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--line);
  flex-shrink:0;
}
#cnChatTitle{font-family:var(--display);font-weight:600;font-size:15px;color:var(--white);}
#cnChatSubtitle{font-size:12px;color:var(--gray-1);margin-top:2px;}
#cnChatCloseBtn{
  background:none;border:none;color:var(--gray-1);font-size:22px;line-height:1;
  cursor:pointer;padding:4px 8px;
}
#cnChatCloseBtn:hover{color:var(--white);}

#cnChatMessages{
  flex:1;overflow-y:auto;padding:16px 18px;
  display:flex;flex-direction:column;gap:10px;
}
.cnChatBubble{
  max-width:85%;padding:10px 13px;border-radius:14px;
  font-size:13.5px;line-height:1.5;word-wrap:break-word;
}
.cnChatBubble.cnChatBot{
  align-self:flex-start;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--line);
  color:var(--white);
  border-bottom-left-radius:4px;
}
.cnChatBubble.cnChatUser{
  align-self:flex-end;
  background:var(--white);
  color:var(--black);
  border-bottom-right-radius:4px;
}
.cnChatTyping{display:flex;gap:4px;align-items:center;padding:12px 15px;}
.cnChatTyping span{
  width:6px;height:6px;border-radius:50%;background:var(--gray-1);
  animation:cnChatBlink 1.2s infinite ease-in-out;
}
.cnChatTyping span:nth-child(2){animation-delay:.2s;}
.cnChatTyping span:nth-child(3){animation-delay:.4s;}
@keyframes cnChatBlink{0%,80%,100%{opacity:.3;}40%{opacity:1;}}

#cnChatInputRow{
  display:flex;align-items:flex-end;gap:8px;
  padding:12px 14px;border-top:1px solid var(--line);flex-shrink:0;
}
#cnChatInput{
  flex:1;resize:none;max-height:110px;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--line);border-radius:12px;
  color:var(--white);font-family:var(--body);font-size:13.5px;
  padding:9px 12px;outline:none;
}
#cnChatInput:focus{border-color:var(--line-strong);}
#cnChatInput::placeholder{color:var(--gray-2);}
#cnChatSend{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  background:var(--white);color:var(--black);border:none;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .15s var(--ease);
}
#cnChatSend:disabled{opacity:.5;cursor:default;}
#cnChatSend svg{width:16px;height:16px;}

@media (max-width:480px){
  #cnChat{right:14px;bottom:14px;}
  #cnChatPanel{width:calc(100vw - 24px);height:calc(100vh - 110px);bottom:74px;right:-6px;}
}