@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap');

/* ── Root Variables ──────────────────────────────────────────── */
#lcw-wrapper {
  --lcw-primary:   #FFDC00;
  --lcw-accent:    #000000;
  --lcw-white:     #ffffff;
  --lcw-gray-50:   #f8f8f8;
  --lcw-gray-100:  #f0f0f0;
  --lcw-gray-200:  #e0e0e0;
  --lcw-gray-500:  #9e9e9e;
  --lcw-gray-700:  #444444;
  --lcw-radius:    18px;
  --lcw-shadow:    0 8px 40px rgba(0,0,0,0.18);
  --lcw-font:      'Vazirmatn', Tahoma, sans-serif;
  font-family:     var(--lcw-font);
}

/* ── Toggle Button ───────────────────────────────────────────── */
#lcw-toggle {
  position:         fixed;
  bottom:           28px;
  right:            28px;
  width:            60px;
  height:           60px;
  border-radius:    50%;
  background:       var(--lcw-accent);
  color:            var(--lcw-primary);
  border:           3px solid var(--lcw-primary);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  cursor:           pointer;
  z-index:          99999;
  box-shadow:       0 4px 20px rgba(0,0,0,0.30);
  transition:       transform 0.25s cubic-bezier(.34,1.56,.64,1),
                    box-shadow 0.2s ease,
                    background 0.2s ease;
  padding:          0;
  outline:          none;
}

#lcw-toggle:hover {
  transform:    scale(1.10);
  box-shadow:   0 8px 30px rgba(0,0,0,0.35);
  background:   #111;
}

#lcw-toggle:active {
  transform: scale(0.95);
}

#lcw-toggle.is-open {
  background:   var(--lcw-primary);
  color:        var(--lcw-accent);
  border-color: var(--lcw-accent);
}

/* Pulse ring when offline / has message */
#lcw-toggle::before {
  content:      '';
  position:     absolute;
  inset:        -6px;
  border-radius: 50%;
  border:       2px solid var(--lcw-primary);
  opacity:      0;
  animation:    lcw-pulse 2.5s ease-out infinite;
}

@keyframes lcw-pulse {
  0%   { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.45); }
}

/* Unread badge */
.lcw-badge {
  position:        absolute;
  top:             -4px;
  right:           -4px;
  background:      #ff3b30;
  color:           #fff;
  border-radius:   50%;
  width:           20px;
  height:          20px;
  font-size:       11px;
  font-weight:     700;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border:          2px solid #fff;
  font-family:     var(--lcw-font);
}

/* ── Chat Panel ──────────────────────────────────────────────── */
#lcw-panel {
  position:      fixed;
  bottom:        100px;
  right:         28px;
  width:         360px;
  max-height:    560px;
  background:    var(--lcw-white);
  border-radius: var(--lcw-radius);
  box-shadow:    var(--lcw-shadow);
  z-index:       99998;
  display:       flex;
  flex-direction: column;
  overflow:      hidden;
  border:        2px solid var(--lcw-accent);
  transform:     translateY(20px) scale(0.96);
  opacity:       0;
  pointer-events: none;
  transition:    transform 0.3s cubic-bezier(.34,1.56,.64,1),
                 opacity   0.25s ease;
  direction:     rtl;
}

#lcw-panel.lcw-open {
  transform:      translateY(0) scale(1);
  opacity:        1;
  pointer-events: all;
}

/* ── Header ──────────────────────────────────────────────────── */
.lcw-header {
  background:      var(--lcw-accent);
  color:           var(--lcw-primary);
  padding:         14px 16px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-shrink:     0;
}

.lcw-header-info {
  display:     flex;
  align-items: center;
  gap:         10px;
}

.lcw-avatar {
  width:           38px;
  height:          38px;
  border-radius:   50%;
  background:      rgba(255,220,0,0.18);
  border:          2px solid var(--lcw-primary);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  color:           var(--lcw-primary);
}

.lcw-agent-info {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.lcw-agent-name {
  font-size:   14px;
  font-weight: 600;
  line-height: 1;
}

.lcw-status {
  display:     flex;
  align-items: center;
  gap:         5px;
  font-size:   11px;
  opacity:     0.85;
}

.lcw-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
}

.lcw-status.online  .lcw-dot { background: #00e676; box-shadow: 0 0 6px #00e676; }
.lcw-status.offline .lcw-dot { background: #9e9e9e; }

.lcw-header-close {
  background:   transparent;
  border:       none;
  color:        var(--lcw-primary);
  cursor:       pointer;
  padding:      4px;
  border-radius: 50%;
  display:      flex;
  align-items:  center;
  transition:   background 0.15s;
}

.lcw-header-close:hover {
  background: rgba(255,220,0,0.15);
}

/* ── Pre-chat form ───────────────────────────────────────────── */
.lcw-prechat {
  padding:    20px;
  flex:       1;
  overflow-y: auto;
}

.lcw-prechat-intro p {
  font-size:     13px;
  color:         var(--lcw-gray-700);
  margin:        0 0 16px;
  line-height:   1.6;
}

.lcw-field {
  margin-bottom: 14px;
}

.lcw-field label {
  display:       block;
  font-size:     12px;
  font-weight:   600;
  color:         var(--lcw-accent);
  margin-bottom: 5px;
}

.lcw-field input {
  width:         100%;
  height:        40px;
  border:        1.5px solid var(--lcw-gray-200);
  border-radius: 10px;
  padding:       0 12px;
  font-size:     14px;
  font-family:   var(--lcw-font);
  direction:     rtl;
  transition:    border-color 0.2s;
  box-sizing:    border-box;
  color:         var(--lcw-accent);
  background:    var(--lcw-gray-50);
}

.lcw-field input:focus {
  outline:      none;
  border-color: var(--lcw-primary);
  background:   #fff;
}

.lcw-btn-primary {
  width:         100%;
  height:        44px;
  background:    var(--lcw-accent);
  color:         var(--lcw-primary);
  border:        2px solid var(--lcw-accent);
  border-radius: 12px;
  font-size:     14px;
  font-weight:   700;
  font-family:   var(--lcw-font);
  cursor:        pointer;
  margin-top:    6px;
  transition:    all 0.2s;
  letter-spacing: 0.5px;
}

.lcw-btn-primary:hover {
  background: var(--lcw-primary);
  color:      var(--lcw-accent);
  transform:  translateY(-1px);
}

/* ── Messages Area ───────────────────────────────────────────── */
.lcw-messages {
  flex:          1;
  overflow-y:    auto;
  padding:       16px;
  background:    var(--lcw-gray-50);
  display:       flex;
  flex-direction: column;
  gap:           10px;
  scroll-behavior: smooth;
}

.lcw-messages::-webkit-scrollbar { width: 4px; }
.lcw-messages::-webkit-scrollbar-track { background: transparent; }
.lcw-messages::-webkit-scrollbar-thumb { background: var(--lcw-gray-200); border-radius: 4px; }

/* Message bubble */
.lcw-msg {
  display:        flex;
  flex-direction: column;
  max-width:      78%;
  animation:      lcw-fade-in 0.25s ease;
}

@keyframes lcw-fade-in {
  from { opacity:0; transform: translateY(8px); }
  to   { opacity:1; transform: translateY(0); }
}

.lcw-msg.user-msg { align-self: flex-end; align-items: flex-end; }
.lcw-msg.agent-msg { align-self: flex-start; align-items: flex-start; }

.lcw-bubble {
  padding:       10px 14px;
  border-radius: 16px;
  font-size:     14px;
  line-height:   1.55;
  word-break:    break-word;
}

.user-msg  .lcw-bubble {
  background:          var(--lcw-accent);
  color:               var(--lcw-primary);
  border-bottom-left-radius: 4px;
}

.agent-msg .lcw-bubble {
  background:           var(--lcw-white);
  color:                var(--lcw-accent);
  border:               1.5px solid var(--lcw-gray-200);
  border-bottom-right-radius: 4px;
}

.lcw-time {
  font-size: 10px;
  color:     var(--lcw-gray-500);
  margin-top: 3px;
  padding: 0 4px;
}

/* ── Typing Indicator ────────────────────────────────────────── */
.lcw-typing {
  padding:     12px 16px;
  background:  var(--lcw-gray-50);
  display:     flex;
  gap:         5px;
  align-items: center;
  flex-shrink: 0;
}

.lcw-typing span {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--lcw-gray-500);
  animation:     lcw-bounce 1.2s ease infinite;
}

.lcw-typing span:nth-child(1) { animation-delay: 0s; }
.lcw-typing span:nth-child(2) { animation-delay: 0.2s; }
.lcw-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes lcw-bounce {
  0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
  40%           { transform: scale(1.2); opacity: 1; background: var(--lcw-primary); }
}

/* ── Quick Replies ───────────────────────────────────────────── */
.lcw-quick-replies {
  padding:    8px 12px;
  display:    flex;
  gap:        6px;
  flex-wrap:  wrap;
  background: var(--lcw-gray-50);
  border-top: 1px solid var(--lcw-gray-100);
  flex-shrink: 0;
}

.lcw-quick-btn {
  background:    transparent;
  border:        1.5px solid var(--lcw-accent);
  color:         var(--lcw-accent);
  padding:       5px 12px;
  border-radius: 20px;
  font-size:     12px;
  font-family:   var(--lcw-font);
  cursor:        pointer;
  transition:    all 0.15s;
  font-weight:   500;
}

.lcw-quick-btn:hover {
  background: var(--lcw-accent);
  color:      var(--lcw-primary);
  transform:  translateY(-1px);
}

/* ── Input Area ──────────────────────────────────────────────── */
.lcw-input-area {
  display:      flex;
  align-items:  flex-end;
  gap:          8px;
  padding:      10px 12px;
  background:   var(--lcw-white);
  border-top:   1.5px solid var(--lcw-gray-100);
  flex-shrink:  0;
}

#lcw-input {
  flex:          1;
  border:        1.5px solid var(--lcw-gray-200);
  border-radius: 14px;
  padding:       9px 14px;
  font-size:     14px;
  font-family:   var(--lcw-font);
  resize:        none;
  outline:       none;
  line-height:   1.5;
  max-height:    100px;
  direction:     rtl;
  background:    var(--lcw-gray-50);
  transition:    border-color 0.2s;
  color:         var(--lcw-accent);
}

#lcw-input:focus {
  border-color: var(--lcw-primary);
  background:   #fff;
}

#lcw-input::placeholder { color: var(--lcw-gray-500); }

.lcw-send-btn {
  width:         40px;
  height:        40px;
  background:    var(--lcw-gray-200);
  color:         var(--lcw-gray-500);
  border:        none;
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  cursor:        pointer;
  flex-shrink:   0;
  transition:    all 0.2s;
  padding:       0;
}

.lcw-send-btn:not(:disabled) {
  background: var(--lcw-accent);
  color:      var(--lcw-primary);
  transform:  scale(1);
}

.lcw-send-btn:not(:disabled):hover {
  transform:  scale(1.08);
  background: #111;
}

.lcw-send-btn:disabled { cursor: default; }

/* ── Footer brand ────────────────────────────────────────────── */
.lcw-footer-brand {
  text-align:  center;
  font-size:   10px;
  color:       var(--lcw-gray-500);
  padding:     6px;
  background:  var(--lcw-white);
  flex-shrink: 0;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  #lcw-panel {
    left:       12px;
    right:      12px;
    width:      auto;
    bottom:     90px;
    max-height: calc(100vh - 110px);
  }
  #lcw-toggle {
    right:  20px;
    bottom: 20px;
  }
}