/* ===== UNIQTRIX LIVE CHAT WIDGET ===== */

/* Launcher */
#chatLauncher{position:fixed;bottom:28px;right:28px;z-index:9990;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#7B6CF6,#A855F7,#38BDF8);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 28px rgba(123,108,246,0.55);outline:none;animation:chatPulse 3s ease-in-out infinite;transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes chatPulse{0%,100%{box-shadow:0 8px 28px rgba(123,108,246,0.55),0 0 0 0 rgba(123,108,246,0.28)}50%{box-shadow:0 8px 28px rgba(123,108,246,0.55),0 0 0 12px rgba(123,108,246,0)}}
#chatLauncher:hover{transform:scale(1.1)}
#chatLauncher.open{animation:none}
#chatLauncher .chat-icon,#chatLauncher .close-icon{position:absolute;font-size:1.35rem;color:#fff;transition:opacity 0.2s,transform 0.2s}
#chatLauncher .close-icon{opacity:0;transform:rotate(-90deg)}
#chatLauncher.open .chat-icon{opacity:0;transform:rotate(90deg)}
#chatLauncher.open .close-icon{opacity:1;transform:rotate(0)}
#chatBadge{position:absolute;top:-2px;right:-2px;background:#F472B6;color:#fff;border-radius:50%;width:20px;height:20px;font-size:0.63rem;font-weight:700;display:none;align-items:center;justify-content:center;border:2px solid #04060F}
#chatBadge.show{display:flex}

/* Window */
#chatWindow{position:fixed;bottom:102px;right:28px;z-index:9989;width:360px;height:530px;background:#070a1c;border:1px solid rgba(123,108,246,0.22);border-radius:20px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 28px 80px rgba(0,0,0,0.75);transform:scale(0.88) translateY(32px);opacity:0;pointer-events:none;transform-origin:bottom right;transition:transform 0.38s cubic-bezier(0.34,1.56,0.64,1),opacity 0.22s ease}
#chatWindow.open{transform:scale(1) translateY(0);opacity:1;pointer-events:all}

/* Header */
.chat-header{background:linear-gradient(135deg,#7B6CF6 0%,#A855F7 50%,#38BDF8 100%);padding:13px 15px;display:flex;align-items:center;gap:10px;flex-shrink:0}
.chat-header-avatar{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.18);border:2px solid rgba(255,255,255,0.3);display:flex;align-items:center;justify-content:center;font-size:1rem;color:#fff;flex-shrink:0;overflow:hidden}
.chat-header-info{flex:1;min-width:0}
.chat-agent-name{font-family:'Space Grotesk',sans-serif;font-size:0.9rem;font-weight:700;color:#fff}
.chat-status-line{display:flex;align-items:center;gap:5px;font-size:0.69rem;color:rgba(255,255,255,0.82);margin-top:1px}
.chat-status-dot{width:6px;height:6px;border-radius:50%;background:#4ade80;flex-shrink:0;animation:onlinePulse 2s ease-in-out infinite}
.chat-status-dot.offline{background:rgba(255,255,255,0.38);animation:none}
@keyframes onlinePulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.7);opacity:0.5}}
.chat-header-close{background:rgba(255,255,255,0.14);border:none;color:#fff;width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:0.8rem;display:flex;align-items:center;justify-content:center;transition:background 0.2s;flex-shrink:0}
.chat-header-close:hover{background:rgba(255,255,255,0.26)}

/* Pre-form */
#chatPreForm{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 20px;gap:11px}
.chat-pre-title{font-family:'Space Grotesk',sans-serif;font-size:0.97rem;font-weight:700;color:#F0EEFF;text-align:center}
.chat-pre-sub{font-size:0.78rem;color:rgba(240,238,255,0.38);text-align:center;line-height:1.5;margin-top:-4px}
.chat-pre-input{width:100%;background:rgba(240,238,255,0.04);border:1px solid rgba(123,108,246,0.2);border-radius:10px;padding:9px 13px;color:#F0EEFF;font-family:'Inter',sans-serif;font-size:0.84rem;outline:none;transition:border-color 0.2s,background 0.2s}
.chat-pre-input:focus{border-color:#7B6CF6;background:rgba(123,108,246,0.07)}
.chat-pre-input::placeholder{color:rgba(240,238,255,0.22)}
.chat-start-btn{width:100%;background:linear-gradient(135deg,#7B6CF6,#A855F7,#38BDF8);border:none;border-radius:10px;padding:11px;color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:0.86rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:opacity 0.2s,transform 0.2s}
.chat-start-btn:hover{opacity:0.88;transform:translateY(-1px)}

/* Messages area */
#chatMessages{flex:1;overflow-y:auto;padding:14px 12px 8px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth;min-height:0}
#chatMessages::-webkit-scrollbar{width:3px}
#chatMessages::-webkit-scrollbar-thumb{background:rgba(123,108,246,0.3);border-radius:2px}
.chat-empty{text-align:center;color:rgba(240,238,255,0.2);font-size:0.8rem;margin:auto;padding:20px}

/*
 * ALIGNMENT RULES:
 * AGENT   (support team) → LEFT side:  [small avatar] [bubble | time below]
 * VISITOR (website user) → RIGHT side: [bubble | time below] [small avatar]
 */

/* Base row */
.chat-msg {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 7px;
  width: 100%;
  animation: bubbleIn 0.25s ease;
}
@keyframes bubbleIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* AGENT: avatar left → content right */
.chat-msg.from-agent  { justify-content: flex-start; }

/* VISITOR: content left-of-avatar, pushed to right */
.chat-msg.from-visitor { justify-content: flex-end; }

/* Small avatar */
.chat-msg-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.58rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
  align-self: flex-end;
}
.from-agent   .chat-msg-avatar {
  background: linear-gradient(135deg,#7B6CF6,#38BDF8);
  order: 0;   /* avatar FIRST = left */
}
.from-visitor .chat-msg-avatar {
  background: linear-gradient(135deg,#F472B6,#FB923C);
  order: 1;   /* avatar LAST = right */
}

/* Content column: bubble + timestamp */
.chat-msg-content {
  display: flex;
  flex-direction: column;
  max-width: 72%;
}
.from-agent   .chat-msg-content {
  align-items: flex-start;
  order: 1;   /* content AFTER avatar = right of avatar */
}
.from-visitor .chat-msg-content {
  align-items: flex-end;
  order: 0;   /* content BEFORE avatar = left of avatar */
}

/* Bubble */
.chat-msg-bubble {
  padding: 9px 13px;
  border-radius: 16px;
  font-size: 0.83rem;
  line-height: 1.58;
  word-break: break-word;
  overflow-wrap: anywhere;
  display: inline-block;
  max-width: 100%;
}
.from-agent .chat-msg-bubble {
  background: rgba(123,108,246,0.12);
  border: 1px solid rgba(123,108,246,0.22);
  color: rgba(240,238,255,0.92);
  border-bottom-left-radius: 3px;
}
.from-visitor .chat-msg-bubble {
  background: linear-gradient(135deg,#7B6CF6,#A855F7);
  color: #fff;
  border-bottom-right-radius: 3px;
  box-shadow: 0 4px 14px rgba(123,108,246,0.4);
}

/* Time stamp */
.chat-msg-time {
  font-size: 0.59rem;
  color: rgba(240,238,255,0.25);
  margin-top: 3px;
  padding: 0 2px;
}
.from-agent   .chat-msg-time { text-align: left; }
.from-visitor .chat-msg-time { text-align: right; }

/* Typing dots */
.chat-typing{display:none;align-items:flex-end;gap:7px;padding:0 12px 6px}
.chat-typing.show{display:flex}
.typing-bubble{background:rgba(123,108,246,0.1);border:1px solid rgba(123,108,246,0.18);border-radius:14px;border-bottom-left-radius:3px;padding:8px 12px;display:flex;gap:4px;align-items:center}
.typing-dot{width:5px;height:5px;border-radius:50%;background:rgba(123,108,246,0.7);animation:typeB 1.2s ease-in-out infinite}
.typing-dot:nth-child(2){animation-delay:0.2s}.typing-dot:nth-child(3){animation-delay:0.4s}
@keyframes typeB{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}

/* Offline bar */
.chat-offline-bar{background:rgba(212,175,55,0.07);border-top:1px solid rgba(212,175,55,0.18);color:rgba(212,175,55,0.82);font-size:0.71rem;padding:8px 14px;text-align:center;display:none;flex-shrink:0}
.chat-offline-bar.show{display:block}

/* Input area */
.chat-input-area{padding:9px 10px;border-top:1px solid rgba(123,108,246,0.1);display:flex;gap:7px;align-items:flex-end;flex-shrink:0;background:rgba(240,238,255,0.01)}
#chatInput{flex:1;background:rgba(240,238,255,0.04);border:1px solid rgba(123,108,246,0.17);border-radius:12px;padding:9px 13px;color:#F0EEFF;font-family:'Inter',sans-serif;font-size:0.82rem;resize:none;outline:none;max-height:96px;min-height:36px;line-height:1.45;transition:border-color 0.2s}
#chatInput:focus{border-color:#7B6CF6}
#chatInput::placeholder{color:rgba(240,238,255,0.22)}
#chatInput:disabled{opacity:0.32}
#chatSendBtn{width:36px;height:36px;background:linear-gradient(135deg,#7B6CF6,#38BDF8);border:none;border-radius:10px;color:#fff;font-size:0.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity 0.2s,transform 0.2s}
#chatSendBtn:hover{opacity:0.85;transform:scale(1.07)}
#chatSendBtn:disabled{opacity:0.32;cursor:not-allowed;transform:none}

@media(max-width:480px){
  #chatWindow{width:calc(100vw - 16px);right:8px;bottom:84px;height:calc(100vh - 110px);max-height:570px;border-radius:16px}
  #chatLauncher{right:12px;bottom:12px;width:54px;height:54px}
}