/* ================================================================
   Lifted Leaf Chat Widget v3.0  –  chat.css
================================================================ */
:root{--llc-accent:#4ecdc4;--llc-bg:#1a1a1a;--llc-text:#fff;--llc-radius:16px}
*,*::before,*::after{box-sizing:border-box}

/* ── TOGGLE BUTTON ── */
#llc-toggle-btn{
  position:fixed;display:flex;align-items:center;gap:10px;
  background:var(--llc-accent);border:none;border-radius:60px;
  padding: 9px 30px 9px 30px;cursor:pointer;z-index:99998;
  box-shadow:0 4px 22px rgba(0,0,0,.35);
  transition:transform .2s,box-shadow .2s;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
#llc-toggle-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.4)}
#llc-toggle-btn img{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#fff;flex-shrink:0;padding: 5px;}
#llc-toggle-btn .llc-btn-initials{
  width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.18);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;color:#fff;flex-shrink:0;
}
#llc-toggle-btn .llc-btn-label{color:#000;font-size:20px;font-weight:500;white-space:nowrap}
#llc-toggle-btn .llc-close-x{font-size:20px;color:#fff;display:none;padding:0 4px}
#llc-toggle-btn.open .llc-btn-label,
#llc-toggle-btn.open .llc-btn-initials,
#llc-toggle-btn.open img.llc-logo-img{display:none}
#llc-toggle-btn.open .llc-close-x{display:block}

/* Notification dot */
#llc-notif-dot{
  position:absolute;top:-2px;right:-2px;
  width:13px;height:13px;border-radius:50%;
  background:#e74c3c;border:2px solid #fff;
  opacity:0;transition:opacity .3s;pointer-events:none;
}
#llc-notif-dot.show{opacity:1}

/* Positions */
.llc-pos-bottom-right #llc-toggle-btn,.llc-pos-bottom-right #llc-chat-box{right:20px}
.llc-pos-bottom-left  #llc-toggle-btn,.llc-pos-bottom-left  #llc-chat-box{left:20px}
.llc-pos-bottom-right #llc-toggle-btn,.llc-pos-bottom-left #llc-toggle-btn{bottom:20px}
.llc-pos-bottom-right #llc-chat-box,.llc-pos-bottom-left #llc-chat-box{bottom:82px}
.llc-pos-top-right    #llc-toggle-btn,.llc-pos-top-right   #llc-chat-box{right:20px}
.llc-pos-top-left     #llc-toggle-btn,.llc-pos-top-left    #llc-chat-box{left:20px}
.llc-pos-top-right    #llc-toggle-btn,.llc-pos-top-left    #llc-toggle-btn{top:20px}
.llc-pos-top-right    #llc-chat-box,.llc-pos-top-left      #llc-chat-box{top:82px}

/* ── CHAT BOX ── */
#llc-chat-box{
  position:fixed;width:360px;max-width:calc(100vw - 28px);
  background:var(--llc-bg);border-radius:var(--llc-radius);
  box-shadow:0 16px 55px rgba(0,0,0,.6);
  display:flex;flex-direction:column;overflow:hidden;
  z-index:99999;max-height:min(82vh,620px);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:14px;color:var(--llc-text);
  opacity:0;pointer-events:none;
  transform:translateY(14px) scale(.97);
  transition:opacity .25s ease,transform .25s cubic-bezier(.34,1.56,.64,1);
}
#llc-chat-box.llc-open{opacity:1;pointer-events:all;transform:translateY(0) scale(1)}

/* ── HEADER ── */
#llc-header{
  display:flex;align-items:center;gap:10px;
  padding:13px 16px;background:#111;
  border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;
}
#llc-header-logo{padding: 5px;
  width:42px;height:42px;border-radius:50%;overflow:hidden;
  background:#fff;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;color:#000;flex-shrink:0;
}
#llc-header-logo img{width:100%;height:100%;object-fit:cover;border-radius:50%}
#llc-header-info{flex:1;min-width:0}
#llc-header-name{font-size:15px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#llc-header-tagline{font-size:12px;color:#fff;margin-top:2px;display:flex;align-items:center;gap:5px}
#llc-header-tagline::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--llc-accent);flex-shrink:0;display:inline-block}
#llc-close-btn{background:none;border:none;cursor:pointer;color:rgba(255,255,255,.5);font-size:20px;line-height:1;padding:2px 4px;transition:color .2s}
#llc-close-btn:hover{color:#fff}

/* ── MESSAGES ── */
#llc-messages{
  flex:1;overflow-y:auto;padding:14px 13px 8px;
  display:flex;flex-direction:column;gap:9px;
  scroll-behavior:smooth;background:#fff;
}
#llc-messages::-webkit-scrollbar{width:4px}
#llc-messages::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}

.llc-timestamp{
  align-self:center;background:#757575;
  padding:3px 12px;font-size:10px;color:#fff;letter-spacing:.3px;
  text-transform:uppercase;
}
.llc-bot-avatar{font-size:11px;color:#777;margin-bottom:3px;padding-left:2px}
.llc-bot-bubble{
  background:#000;border-radius:4px 16px 16px 16px;
  padding:11px 14px;color:var(--llc-text);font-size:13.5px;line-height:1.55;
  max-width:93%;word-break:break-word;
  animation:llc-pop .22s cubic-bezier(.34,1.56,.64,1);
}
.llc-user-row{display:flex;justify-content:flex-end}
.llc-user-bubble{
  background:var(--llc-accent);color:#000;
  padding:10px 14px;border-radius:30px;
  font-size:14.5px;font-weight:400;line-height:1.5;
  max-width:82%;word-break:break-word;
  animation:llc-pop .2s ease;
}
/* Image / file in bubble */
.llc-bubble-img{max-width:100%;border-radius:10px;display:block;margin-top:6px;cursor:zoom-in}
.llc-bubble-file{color:var(--llc-accent);font-size:12px;margin-top:5px;display:block;text-decoration:underline}

/* Admin reply bubble */
.llc-admin-bubble{
  background:#000;
  border-radius:4px 16px 16px 16px;
  padding:11px 14px;color:#e0fffe;font-size:13.5px;line-height:1.55;
  max-width:93%;word-break:break-word;
  animation:llc-pop .22s ease;
}

/* FAQ buttons */
.llc-faq-list{display:flex;flex-direction:column;gap:8px;margin-top:4px;background-color: #000;padding: 20px; border-radius: 0px 20px 20px 20px; margin-left: 0px;}
.llc-faq-btn{
  white-space:unset;background:transparent;
  border:1.5px solid var(--llc-accent);color:var(--llc-accent);
  padding:10px 14px;border-radius:50px;font-size:13px;line-height:1.4;
  cursor:pointer;text-align:center;width:100%;
  font-family:inherit;
  transition:background .2s,color .2s,transform .15s;
}
.llc-faq-btn:hover{background:var(--llc-accent);color:#000;transform:translateY(-1px)}

/* Typing */
.llc-typing{
  display:flex;align-items:center;gap:4px;
  padding:10px 14px;background:#2a2a2a;
  border-radius:4px 16px 16px 16px;width:fit-content;
}
.llc-typing span{width:7px;height:7px;background:rgba(255,255,255,.4);border-radius:50%;animation:llc-bounce 1.2s infinite}
.llc-typing span:nth-child(2){animation-delay:.2s}
.llc-typing span:nth-child(3){animation-delay:.4s}

/* Contact form */
.llc-form-card{
  background:#000;border-radius: 0px 20px 20px 20px;padding:20px;display:flex;flex-direction:column;gap:20px;width: 80%;margin: auto;}
.llc-form-field{border-bottom: 1px solid #ffffff7a;padding:9px 0}
.llc-form-field:last-of-type{border-bottom:none}
.llc-form-field label{font-size:11.5px;color:rgba(255,255,255,.5);font-weight:500;display:block;margin-bottom:3px}
.llc-form-card .llc-form-field input,.llc-form-card .llc-form-field textarea{
  width:100%;background:transparent;border:none;outline:none;
  color:var(--llc-text);font-size:13.5px;font-family:inherit;padding:2px 0;resize:none;
}
.llc-form-card .llc-form-field input::placeholder,.llc-form-field textarea::placeholder{color:#fff}
.llc-form-card .llc-form-field textarea{min-height:50px}
.llc-form-card .llc-submit-btn{
  background:var(--llc-text);color:#111;border:none;border-radius:50px;
  padding:12px;font-size:14px;font-weight:700;font-family:inherit;
  cursor:pointer;margin-top:14px;width:100%;
  transition:opacity .2s,transform .15s;
}
.llc-submit-btn:hover{opacity:.88;transform:translateY(-1px)}
.llc-submit-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.llc-form-error{font-size:12px;color:#e74c3c;text-align:center;margin-top:6px;display:none}
.llc-form-error.show{display:block}

/* ── ATTACHMENT PREVIEW STRIP ── */
#llc-attach-strip{
  display:none;align-items:center;gap:8px;
  padding:6px 12px 2px;background:#111;font-size:12px;color:#aaa;
}
#llc-attach-strip.show{display:flex}
#llc-attach-thumb{width:40px;height:40px;border-radius:8px;object-fit:cover;border:1px solid #333;display:none}
#llc-attach-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#llc-attach-rm{background:none;border:none;color:#e74c3c;font-size:18px;cursor:pointer;line-height:1;padding:0 2px}

/* ── INPUT BAR ── */
#llc-input-bar{
  display:flex;align-items:center;gap:7px;
  padding:8px 10px;border-top: 1px solid rgb(238, 238, 238);
  background:#fff;flex-shrink:0;
}
#llc-text-input{
  flex:1;border:1px solid rgba(255,255,255,.1);
  border-radius:50px;padding:9px 14px;
  color:#000;font-size:16px;font-family:inherit;outline:none;
  transition:border-color .2s;
}
/* #llc-text-input:focus{border-color:var(--llc-accent)} */
#llc-text-input::placeholder{color:#000}
#llc-input-bar .llc-icon-btn{
  background:none;border:none;cursor:pointer;
  font-size:20px;padding:4px;border-radius:50%;
  transition:background .2s;line-height:1;color:#aaa;
  flex-shrink:0;
}
#llc-input-bar .llc-icon-btn:hover{background:rgba(255,255,255,.07);color:#fff}
#llc-send-btn{
  width:36px;height:36px;border-radius:50%;
  background:var(--llc-accent);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:transform .2s,opacity .2s;padding: 6px;
}
#llc-send-btn:hover{transform:scale(1.1)}
#llc-send-btn svg{width:16px;height:16px;fill:#000}
#llc-file-input{display:none}

/* ── EMOJI PICKER ── */
#llc-emoji-picker{
  position:absolute;bottom:58px;
  background:#1e1e1e;border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:10px;width:280px;
  display:none;flex-wrap:wrap;gap:2px;
  overflow-y:auto;max-height:210px;z-index:10;
  box-shadow:0 6px 24px rgba(0,0,0,.5);
  animation:llc-pop .2s ease;
}
#llc-emoji-picker.open{display:flex}
.llc-pos-bottom-right #llc-emoji-picker,.llc-pos-top-right #llc-emoji-picker{right:0}
.llc-pos-bottom-left  #llc-emoji-picker,.llc-pos-top-left  #llc-emoji-picker{left:0}
#llc-emoji-picker span{font-size:22px;cursor:pointer;padding:4px;border-radius:6px;transition:background .15s}
#llc-emoji-picker span:hover{background:rgba(255,255,255,.1)}

/* ── LIGHTBOX ── */
#llc-lightbox{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.88);z-index:999999;
  align-items:center;justify-content:center;cursor:zoom-out;
}
#llc-lightbox.open{display:flex}
#llc-lightbox img{max-width:90vw;max-height:90vh;border-radius:10px}

/* ── ANIMATIONS ── */
@keyframes llc-pop{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
@keyframes llc-bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}

/* ── MOBILE ── */
@media(max-width:420px){
  #llc-chat-box{width:calc(100vw - 20px)}
  .llc-pos-bottom-right #llc-chat-box,.llc-pos-bottom-left #llc-chat-box{right:10px;left:10px;bottom:78px}
  #llc-toggle-btn{right:10px!important;left:auto!important;bottom:14px!important}
}