/* ─── DTech Live Chat Widget Styles ──────────────────────── */

/* Bubble */
#chat-bubble {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6C47FF, #4c1d95);
  border: none; cursor: pointer;
  box-shadow: 0 8px 28px rgba(108,71,255,.45);
  z-index: 9990;
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
  animation: bubblePop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes bubblePop { from { transform: scale(0); } to { transform: scale(1); } }
#chat-bubble:hover { transform: scale(1.1); box-shadow: 0 12px 36px rgba(108,71,255,.55); }
.chat-bubble-icon { font-size: 1.4rem; color: white; }
.chat-badge {
  position: absolute; top: -4px; right: -4px;
  background: #FF6B35; color: white;
  width: 20px; height: 20px; border-radius: 50%;
  font-size: .65rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid white; animation: badgePulse 2s infinite;
}
@keyframes badgePulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
.chat-status-dot {
  position: absolute; bottom: 4px; right: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid white;
}
.chat-status-dot.online  { background: #00D4AA; }
.chat-status-dot.offline { background: #94a3b8; }

/* Window */
.chat-window {
  position: fixed;
  bottom: 100px; right: 28px;
  width: 370px;
  max-height: 580px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0,0,0,.18);
  z-index: 9989;
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: scale(0.85) translateY(30px);
  opacity: 0;
  pointer-events: none;
  transform-origin: bottom right;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
}
.chat-window.open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: all;
}

/* Header */
.chat-header {
  background: linear-gradient(135deg, #6C47FF 0%, #4c1d95 100%);
  padding: 1rem 1.1rem;
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
}
.chat-header-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: white; position: relative;
  flex-shrink: 0;
}
.chat-header-status-dot {
  position: absolute; bottom: 1px; right: 1px;
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid #4c1d95;
}
.chat-header-status-dot.online  { background: #00D4AA; }
.chat-header-status-dot.offline { background: #94a3b8; }
.chat-header-info { flex: 1; }
.chat-header-name   { font-weight: 800; color: white; font-size: .95rem; font-family: 'Syne', sans-serif; }
.chat-header-status { font-size: .72rem; color: rgba(255,255,255,.8); margin-top: 1px; }
.chat-action-btn {
  background: rgba(255,255,255,.15); border: none; color: white;
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.chat-action-btn:hover { background: rgba(255,255,255,.3); }

/* Body / messages */
.chat-body {
  flex: 1; overflow-y: auto; padding: 1rem;
  display: flex; flex-direction: column; gap: .6rem;
  min-height: 200px; max-height: 320px;
  background: #f8f9fe;
}
.chat-body::-webkit-scrollbar { width: 4px; }
.chat-body::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 2px; }

/* Messages */
.chat-msg {
  display: flex; align-items: flex-end; gap: 8px;
  animation: msgIn .3s ease;
}
@keyframes msgIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.chat-msg.user  { flex-direction: row-reverse; }
.chat-msg-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: #e8e3ff; color: #6C47FF;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 800; flex-shrink: 0;
}
.chat-msg.user .chat-msg-avatar { background: #6C47FF; color: white; }
.chat-bubble-msg {
  max-width: 78%; padding: .6rem .85rem;
  border-radius: 16px; font-size: .875rem;
  line-height: 1.6; word-break: break-word;
  position: relative;
}
.chat-msg.bot   .chat-bubble-msg,
.chat-msg.admin .chat-bubble-msg {
  background: white; color: #1a1a2e;
  border: 1px solid #e8ecf2;
  border-bottom-left-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.chat-msg.user .chat-bubble-msg {
  background: linear-gradient(135deg, #6C47FF, #4c1d95);
  color: white; border-bottom-right-radius: 4px;
}
.chat-msg-time {
  font-size: .65rem; color: #94a3b8; margin-top: 2px;
  text-align: right; padding: 0 4px;
}

/* Typing indicator */
.chat-typing {
  display: flex; align-items: center; gap: 8px;
  padding: .4rem .75rem;
}
.typing-dots { display: flex; gap: 4px; }
.typing-dots span {
  width: 7px; height: 7px; border-radius: 50%; background: #cbd5e1;
  animation: typingBounce 1.2s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes typingBounce {
  0%,60%,100% { transform: translateY(0); }
  30% { transform: translateY(-6px); background: #6C47FF; }
}

/* Suggestions / quick replies */
.chat-suggestions {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: .5rem .75rem;
}
.chat-suggestion {
  background: white; border: 1.5px solid #e8e3ff;
  color: #6C47FF; border-radius: 99px;
  padding: 5px 13px; font-size: .78rem; font-weight: 600;
  cursor: pointer; transition: all .2s;
}
.chat-suggestion:hover { background: #6C47FF; color: white; border-color: #6C47FF; }

/* Footer / input */
.chat-footer { flex-shrink: 0; border-top: 1px solid #f1f5f9; background: white; }
.chat-input-area {
  display: flex; align-items: center; gap: 8px;
  padding: .75rem 1rem;
}
.chat-input-field {
  flex: 1; padding: 10px 14px;
  border: 1.5px solid #e2e8f0; border-radius: 12px;
  font-size: .875rem; outline: none;
  font-family: 'DM Sans', sans-serif;
  transition: border-color .2s;
  width: 100%;
}
.chat-input-field:focus { border-color: #6C47FF; }
.chat-send-btn {
  width: 40px; height: 40px; border-radius: 11px;
  background: #6C47FF; border: none; color: white;
  cursor: pointer; font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s, background .2s; flex-shrink: 0;
}
.chat-send-btn:hover { background: #4c1d95; transform: scale(1.05); }
.chat-send-btn.w-100 { width: 100%; border-radius: 12px; height: 42px; gap: 8px; font-size:.875rem; font-weight:700; font-family:'DM Sans',sans-serif; }
.chat-footer-note {
  text-align: center; font-size: .65rem;
  color: #94a3b8; padding: 0 1rem .6rem;
}

/* Human button */
.chat-human-btn-wrap { padding: .5rem 1rem; background: white; border-top: 1px solid #f1f5f9; }
.chat-human-btn {
  width: 100%; padding: 9px; border-radius: 10px;
  background: rgba(108,71,255,.07); border: 1.5px dashed #6C47FF;
  color: #6C47FF; font-weight: 700; font-size: .8rem;
  cursor: pointer; transition: all .2s;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.chat-human-btn:hover { background: #6C47FF; color: white; }

/* Offline form inputs */
.chat-offline-form .chat-input-field { width: 100%; margin-bottom: .5rem; }

/* Admin badge on header */
.chat-admin-badge {
  background: #00D4AA; color: white;
  font-size: .62rem; padding: 2px 7px; border-radius: 99px;
  font-weight: 800; margin-left: 4px;
}

/* Responsive */
@media (max-width: 480px) {
  .chat-window { width: calc(100vw - 20px); right: 10px; bottom: 90px; }
  #chat-bubble { bottom: 20px; right: 16px; }
}

/* ─── Admin Live Chat Panel ─────────────────────────────── */
.live-chat-panel {
  display: grid; grid-template-columns: 300px 1fr;
  height: calc(100vh - 160px); min-height: 500px;
  border: 1px solid var(--border-light); border-radius: var(--radius);
  overflow: hidden; background: white;
}
.chat-sessions-list {
  border-right: 1px solid var(--border-light);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.chat-sessions-header {
  padding: 1rem; border-bottom: 1px solid var(--border-light);
  font-weight: 800; font-family: var(--font-display); font-size: .9rem;
  display: flex; justify-content: space-between; align-items: center;
  flex-shrink: 0;
}
.chat-sessions-scroll { overflow-y: auto; flex: 1; }
.chat-session-item {
  padding: .875rem 1rem; border-bottom: 1px solid #f8f9fe;
  cursor: pointer; transition: background .15s;
  display: flex; align-items: center; gap: 10px;
}
.chat-session-item:hover { background: #f8f9fe; }
.chat-session-item.active { background: rgba(108,71,255,.06); border-left: 3px solid var(--accent); }
.chat-session-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent); color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .9rem; flex-shrink: 0;
}
.chat-session-meta { flex: 1; min-width: 0; }
.chat-session-name { font-weight: 700; font-size: .85rem; }
.chat-session-preview { font-size: .75rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-session-time { font-size: .7rem; color: var(--text-light); flex-shrink: 0; }
.chat-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.admin-chat-main {
  display: flex; flex-direction: column;
  background: #f8f9fe;
}
.admin-chat-topbar {
  padding: .875rem 1.25rem;
  background: white; border-bottom: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.admin-chat-messages { flex: 1; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: .6rem; }
.admin-msg-user  { align-self: flex-start; }
.admin-msg-admin { align-self: flex-end; }
.admin-msg-bubble {
  max-width: 70%; padding: .6rem .9rem; border-radius: 14px;
  font-size: .875rem; line-height: 1.6;
}
.admin-msg-user  .admin-msg-bubble { background: white; border: 1px solid #e2e8f0; border-bottom-left-radius: 4px; }
.admin-msg-admin .admin-msg-bubble { background: var(--accent); color: white; border-bottom-right-radius: 4px; }
.admin-msg-meta  { font-size: .68rem; color: var(--text-muted); margin-top: 2px; padding: 0 4px; }
.admin-chat-input-area {
  background: white; border-top: 1px solid var(--border-light);
  padding: .875rem 1.25rem; display: flex; gap: 10px; flex-shrink: 0;
}
.admin-chat-input {
  flex: 1; border: 1.5px solid var(--border-light); border-radius: 12px;
  padding: 10px 14px; font-size: .875rem; outline: none; resize: none;
  font-family: var(--font-body); transition: border-color .2s;
}
.admin-chat-input:focus { border-color: var(--accent); }
.admin-no-session {
  flex: 1; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 1rem; color: var(--text-muted);
  font-size: .95rem;
}
.online-toggle {
  display: flex; align-items: center; gap: 10px;
}
.toggle-switch {
  position: relative; width: 48px; height: 26px; cursor: pointer;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0; border-radius: 99px;
  background: #cbd5e1; transition: background .3s;
}
.toggle-slider::before {
  content: '';
  position: absolute; height: 20px; width: 20px; left: 3px; bottom: 3px;
  border-radius: 50%; background: white; transition: transform .3s;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.toggle-switch input:checked + .toggle-slider { background: #00D4AA; }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(22px); }