/* chat/style_user_chat.css */
:root{
  --bg: #0a0f1e;
  --panel: #111a30;
  --panel-2: #0f162b;
  --text: #e0e8ff;
  --muted: #9fb3ff;
  --neon: #00bfff;
  --neon-2:#22d3ff;
  --bubble:#1a2340;
  --shadow: 0 12px 38px rgba(0,191,255,0.15);
  --danger: #ff3b30;
}


/* === 🔴 BADGE NOTIFIKASI PESAN BARU === */

/* === Badge merah di launcher === */
#sjm-chat-launcher{
  position: fixed; right: 16px; bottom: 16px;
  /* properti lainmu sudah ada */
}
#sjm-chat-launcher { position: fixed; } /* pastikan position set */
#sjm-chat-badge{
  position: absolute;
  top: -6px; right: -6px;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ff3b30; /* merah iOS-like */
  color: #fff;
  font: 700 12px/20px 'Poppins', system-ui;
  text-align: center;
  box-shadow: 0 0 0 2px rgba(10,15,30,0.75); /* ring biar kontras di neon */
}
.hidden{ display:none!important; }

/* kecilkan & rapikan tampilan waktu */
.sjm-msg-bubble small time{
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
}

@keyframes pulseBadge {
  0%,100% { transform: scale(1); box-shadow: 0 0 8px rgba(255,59,48,0.8); }
  50%     { transform: scale(1.25); box-shadow: 0 0 14px rgba(255,59,48,1); }
}



/* Overlay + Widget */
#sjm-chat-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 9997;
  backdrop-filter: blur(3px);
}
.hidden{ display: none !important; }

#sjm-chat-widget{
  position: fixed; right: 16px; bottom: 80px;
  width: 360px; max-width: calc(100vw - 24px);
  height: 520px; max-height: calc(100vh - 120px);
  background: var(--panel-2); color: var(--text);
  border-radius: 18px; box-shadow: var(--shadow);
  overflow: hidden;
  z-index: 9999;
  display: flex; flex-direction: column;
  border: 1px solid #1f2b50;
  animation: fadeInChat 0.3s ease;
}
@keyframes fadeInChat {
  from { opacity: 0; transform: translateY(30px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header */
.sjm-chat-header{
  display:flex; align-items:center; justify-content:space-between;
  background: var(--panel);
  padding: 12px 12px;
  border-bottom: 1px solid #1f2b50;
}
.sjm-chat-header strong{ color: #fff; display:block; }
.sjm-chat-header small{ color: var(--muted); font-size: 12px; }

.sjm-icon-btn{
  background: transparent; border: none; color: #fff; cursor: pointer;
  width: 36px; height: 36px; border-radius: 10px;
  transition: all 0.25s ease;
}
.sjm-icon-btn:hover{ background: rgba(255,255,255,.06); transform: scale(1.1); }

/* Body */
#sjm-chat-body{ flex:1; overflow:auto; padding: 12px; }
#sjm-chat-messages{ display:flex; flex-direction:column; gap:10px; }

/* Pesan */
.sjm-msg{ display:flex; }
.sjm-msg.user{ justify-content:flex-start; }
.sjm-msg.admin{ justify-content:flex-end; }

.sjm-msg-bubble{
  max-width: 75%;
  background: var(--bubble);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 14px;
  line-height: 1.45;
  box-shadow: 0 0 6px rgba(0,0,0,0.4);
}
.sjm-msg.admin .sjm-msg-bubble{
  background: var(--neon);
  color: #002133;
  box-shadow: 0 0 12px rgba(0,191,255,.5);
}
.sjm-msg-bubble small{
  display:block;
  margin-top:6px;
  color:#0b1a33;
  opacity:.8
}
.sjm-msg.user .sjm-msg-bubble small{ color: #9fb3ff; }

/* === Efek pesan baru (highlight neon) === */
.new-msg .sjm-msg-bubble {
  position: relative;
  animation: glowNew 1.5s ease-out;
}
@keyframes glowNew {
  0%   { box-shadow: 0 0 15px var(--neon-2); transform: scale(1.02); }
  50%  { box-shadow: 0 0 25px var(--neon); }
  100% { box-shadow: 0 0 12px rgba(0,191,255,.4); transform: scale(1); }
}

/* Gambar di bubble */
.sjm-img-link img{
  max-width: 220px;
  width: 100%;
  height: auto;
  border-radius: 12px;
  display:block;
  margin-bottom: 6px;
  box-shadow: 0 0 12px rgba(0,191,255,0.25);
  transition: transform 0.3s ease;
}
.sjm-img-link img:hover { transform: scale(1.02); }

/* Input area */
.sjm-chat-input{
  display:flex; align-items:center; gap:8px;
  padding:10px; background: var(--panel);
  border-top:1px solid #1f2b50;
}
#sjm-pesan{
  flex:1; height:42px; border:none; outline:none;
  background:#1c2b45; color:#fff;
  border-radius: 20px; padding: 0 14px;
  font-family:'Poppins',sans-serif;
}
.sjm-send-btn{
  width:44px; height:44px;
  border:none; border-radius: 50%;
  background: var(--neon); color:#002133;
  cursor:pointer; transition: all 0.3s ease;
}
.sjm-send-btn:hover{
  background: var(--neon-2);
  box-shadow: 0 0 10px var(--neon);
}
.sjm-attach-btn{
  width:44px; height:44px;
  display:inline-grid; place-items:center;
  border-radius: 50%;
  background:#1c2b45; color:#bcd4ff;
  cursor:pointer; transition: all 0.3s ease;
}
.sjm-attach-btn:hover{ outline: 1px solid #294a88; transform: scale(1.05); }

/* Preview attach */
#sjm-attach-preview{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:10px;
  background:#0e1a33; border-top:1px solid #1f2b50;
}
#sjm-attach-preview img{
  max-height:70px; width:auto; border-radius:10px;
  box-shadow: 0 0 10px rgba(0,191,255,0.3);
}

/* Mobile full-screen feel */
@media (max-width: 480px){
  #sjm-chat-widget{
    right: 0; left: 0; bottom: 0; top: auto;
    width: 100vw; height: 65vh; max-height: 65vh;
    border-radius: 16px 16px 0 0;
  }
}

/* Responsive Chat (Mobile UX) */
@media (max-width: 600px) {
  #sjm-chat-widget {
    width: 100vw !important;
    height: 70vh !important;
    right: 0; left: 0; bottom: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -6px 20px rgba(0,191,255,0.25);
  }
  .sjm-chat-input {
    flex-wrap: nowrap;
    padding: 8px 10px;
    gap: 6px;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
  }
  #sjm-pesan {
    flex: 1 1 auto;
    min-width: 0;
    height: 42px;
    font-size: 14px;
    padding: 8px 12px;
  }
  .sjm-attach-btn,
  .sjm-send-btn {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
  }
  #sjm-chat-body { padding-bottom: 80px !important; }
  #sjm-attach-preview { padding: 6px 10px; flex-wrap: nowrap; }
}

@media (max-width: 400px) {
  #sjm-pesan { font-size: 13px; padding: 6px 10px; }
  .sjm-attach-btn, .sjm-send-btn { width: 38px; height: 38px; }
}