/* ==========================================================
   BuddySocial v9.62
   COMPLETE CHAT LIST + FRAME + BUTTONS RESTYLE
   Afgestemd op de echte BuddySocial chatopbouw.
   ========================================================== */

:root{
  --buddy-chat-frame:#2f6fa8;
  --buddy-chat-frame-dark:#245784;
  --buddy-chat-button:#f39a13;
  --buddy-chat-button-dark:#d67f00;
  --buddy-chat-surface:#f3f9fd;
  --buddy-chat-panel:#ffffff;
  --buddy-chat-ink:#2f4f68;
  --buddy-chat-muted:#72889a;
  --buddy-chat-line:#d6e3ec;
  --buddy-chat-soft:#e6f1f9;
  --buddy-chat-warm:#fff3dd;
  --buddy-chat-glow:0 14px 40px rgba(23,59,89,.20);
}

/* basisvariabelen op de widgets zelf */
#friend-chat.friend-chat,
.friend-chat-window{
  --chat-frame:var(--buddy-chat-frame) !important;
  --chat-button:var(--buddy-chat-button) !important;
}

/* =========================
   VRIENDENLIJST BLOK
   ========================= */
#friend-chat.friend-chat{
  background:linear-gradient(180deg,#fcfeff,#eff7fb) !important;
  border:1px solid #7ca2bf !important;
  border-radius:12px 12px 6px 6px !important;
  box-shadow:var(--buddy-chat-glow) !important;
  overflow:hidden !important;
}

#friend-chat .friend-chat-head{
  background:linear-gradient(180deg,#4a8bc3,#2f6fa8) !important;
  border-bottom:1px solid rgba(255,255,255,.15) !important;
}

#friend-chat .friend-chat-toggle{
  min-height:44px !important;
  padding:10px 12px !important;
  color:#fff !important;
  text-shadow:0 1px 0 rgba(0,0,0,.16) !important;
  font-weight:800 !important;
}

#friend-chat .friend-chat-toggle b{
  font-size:13px !important;
}

#friend-chat .chat-online-count,
#friend-chat .chat-unread-badge{
  background:rgba(255,255,255,.16) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.28) !important;
  border-radius:999px !important;
  padding:2px 7px !important;
  font-weight:800 !important;
}

#friend-chat .chat-unread-summary{
  background:#fff7e8 !important;
  color:#7a5314 !important;
  border-bottom:1px solid #ecd3a0 !important;
}

#friend-chat .friend-chat-body{
  background:
    linear-gradient(rgba(255,255,255,.78),rgba(255,255,255,.78)),
    url("../img/chat/buddysocial-chat-bg.svg") center center / 260px auto repeat !important;
}

#friend-chat .chat-selfbar{
  background:rgba(255,255,255,.92) !important;
  border-bottom:1px solid var(--buddy-chat-line) !important;
  padding:8px 10px !important;
}

#friend-chat #chat-status{
  border:1px solid #b5c9d7 !important;
  border-radius:10px !important;
  padding:6px 10px !important;
  background:#fff !important;
  color:var(--buddy-chat-ink) !important;
}

#friend-chat .chat-search{
  background:transparent !important;
  padding:8px !important;
  border-bottom:1px solid #e2edf4 !important;
}

#friend-chat .chat-search input{
  background:#fff !important;
  border:1px solid #b8ccdb !important;
  border-radius:14px !important;
  padding:9px 12px !important;
  color:var(--buddy-chat-ink) !important;
  box-shadow:inset 0 1px 2px rgba(14,44,71,.05) !important;
}

#friend-chat .chat-search input:focus{
  border-color:#4b92c8 !important;
  box-shadow:0 0 0 3px rgba(76,145,199,.14) !important;
  outline:none !important;
}

#friend-chat .chat-friend-list{
  background:rgba(255,255,255,.55) !important;
  padding:6px !important;
  max-height:340px !important;
}

#friend-chat .chat-friend-section{
  background:linear-gradient(180deg,#f4f9fc,#e8f2f8) !important;
  color:#36617f !important;
  border:1px solid #d5e4ee !important;
  border-radius:10px !important;
  margin:5px 2px 7px !important;
  top:2px !important;
}

#friend-chat .chat-friend-section span{
  background:#fff !important;
  color:#376280 !important;
  border:1px solid #c7d8e5 !important;
  box-shadow:0 1px 1px rgba(18,49,76,.05) !important;
}

#friend-chat .chat-friend-row{
  background:rgba(255,255,255,.88) !important;
  border:1px solid #dce8f0 !important;
  border-radius:12px !important;
  margin:0 0 6px 0 !important;
  min-height:54px !important;
  padding:8px 10px !important;
  box-shadow:0 2px 8px rgba(30,67,95,.05) !important;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease !important;
}

#friend-chat .chat-friend-row:hover{
  background:#f1f8fd !important;
  transform:translateY(-1px) !important;
  box-shadow:0 4px 14px rgba(30,67,95,.10) !important;
}

#friend-chat .chat-friend-row.status-offline{
  background:#f7fbfd !important;
}

#friend-chat .chat-avatar{
  width:38px !important;
  height:38px !important;
  border-radius:50% !important;
  border:2px solid #fff !important;
  box-shadow:0 0 0 1px #a5bfd0 !important;
  background:#d8e8f3 !important;
  color:#2d668f !important;
}

#friend-chat .chat-friend-open b{
  color:#294d69 !important;
  font-size:12px !important;
}

#friend-chat .chat-friend-open small,
#friend-chat .chat-friend-text small{
  color:#7a90a1 !important;
  font-size:10px !important;
}

#friend-chat .chat-row-actions{
  gap:6px !important;
}

#friend-chat .chat-row-call{
  width:32px !important;
  height:32px !important;
  border-radius:10px !important;
  border:1px solid #bdd2e1 !important;
  background:linear-gradient(180deg,#ffffff,#eef6fb) !important;
  box-shadow:0 1px 4px rgba(28,63,92,.08) !important;
  color:#2f6fa8 !important;
}

#friend-chat .chat-row-call:hover{
  background:linear-gradient(180deg,#fff7ea,#ffebc7) !important;
  border-color:#e4b664 !important;
  color:#a96500 !important;
  transform:translateY(-1px) !important;
}

/* =========================
   LOSSE CHATVENSTERS / FRAMES
   ========================= */
.chat-windows{
  gap:10px !important;
}

.friend-chat-window{
  background:linear-gradient(180deg,#ffffff,#f4f9fc) !important;
  border:1px solid #7aa0be !important;
  border-radius:12px 12px 6px 6px !important;
  box-shadow:0 18px 48px rgba(19,51,77,.23) !important;
  overflow:hidden !important;
}

.friend-chat-window > header{
  min-height:48px !important;
  padding:8px 10px !important;
  background:linear-gradient(180deg,#4c8ec6,#2f6fa8) !important;
  color:#fff !important;
  border-bottom:1px solid rgba(255,255,255,.16) !important;
}

.friend-chat-window .chat-peer b{
  color:#fff !important;
  font-size:12px !important;
}

.friend-chat-window .chat-peer small{
  color:#e4f2ff !important;
  opacity:1 !important;
  font-size:9px !important;
}

.friend-chat-window .chat-head-actions{
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
}

/* header buttons */
.friend-chat-window .chat-head-actions button,
.friend-chat-window .chat-call-btn,
.friend-chat-window .chat-buzz-btn,
.friend-chat-window .chat-e2e-btn,
.friend-chat-window .chat-close{
  min-width:34px !important;
  height:34px !important;
  border-radius:10px !important;
  border:1px solid rgba(255,255,255,.28) !important;
  background:rgba(255,255,255,.14) !important;
  color:#fff !important;
  box-shadow:none !important;
  font-weight:800 !important;
}

.friend-chat-window .chat-buzz-btn{
  min-width:auto !important;
  padding:0 9px !important;
}

.friend-chat-window .chat-head-actions button:hover,
.friend-chat-window .chat-call-btn:hover,
.friend-chat-window .chat-buzz-btn:hover,
.friend-chat-window .chat-e2e-btn:hover,
.friend-chat-window .chat-close:hover{
  background:rgba(255,255,255,.24) !important;
  transform:translateY(-1px) !important;
}

.friend-chat-window .chat-close{
  font-size:20px !important;
  line-height:1 !important;
}

/* =========================
   CHAT GESPREKSVLAK
   ========================= */
.friend-chat-window .chat-log{
  position:relative !important;
  overflow:auto !important;
  padding:12px !important;
  gap:9px !important;
  background-color:#eef6fb !important;
  background-image:
    linear-gradient(rgba(255,255,255,.58),rgba(255,255,255,.58)),
    url("../img/chat/buddysocial-chat-bg.svg") !important;
  background-position:center center, center center !important;
  background-repeat:repeat, repeat !important;
  background-size:auto, 280px auto !important;
  scroll-behavior:smooth !important;
}

.friend-chat-window .chat-log::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 10% 17%,rgba(243,154,19,.11) 0 40px,transparent 41px),
    radial-gradient(circle at 84% 22%,rgba(47,111,168,.11) 0 42px,transparent 43px),
    radial-gradient(circle at 68% 74%,rgba(243,154,19,.09) 0 50px,transparent 51px) !important;
  z-index:0 !important;
}

.friend-chat-window .chat-log > *{
  position:relative !important;
  z-index:1 !important;
}

.friend-chat-window .chat-bubble{
  max-width:80% !important;
  padding:9px 11px !important;
  border:1px solid #cfdee8 !important;
  background:rgba(255,255,255,.95) !important;
  border-radius:14px 14px 14px 4px !important;
  box-shadow:0 3px 10px rgba(39,71,97,.08) !important;
  color:var(--buddy-chat-ink) !important;
  line-height:1.36 !important;
}

.friend-chat-window .chat-bubble.mine{
  background:linear-gradient(180deg,#fff6e8,#ffe7be) !important;
  border-color:#e7bf73 !important;
  color:#5c451d !important;
  border-radius:14px 14px 4px 14px !important;
}

.friend-chat-window .chat-bubble small{
  color:#8c98a2 !important;
  font-size:9px !important;
  margin-top:4px !important;
}

.friend-chat-window .chat-bubble-text.has-emote{
  font-size:20px !important;
  line-height:1.5 !important;
}

/* emotes bar */
.friend-chat-window .chat-emotes{
  padding:6px 7px !important;
  border-top:1px solid #dde8ef !important;
  background:rgba(255,255,255,.97) !important;
}

.friend-chat-window .chat-emotes button{
  border:1px solid #c5d5e1 !important;
  background:linear-gradient(180deg,#ffffff,#f1f8fc) !important;
  border-radius:9px !important;
  padding:3px 7px !important;
  box-shadow:0 1px 4px rgba(39,71,97,.05) !important;
}

.friend-chat-window .chat-emotes button:hover{
  background:linear-gradient(180deg,#fff8eb,#ffeed1) !important;
  border-color:#e3b764 !important;
}

/* share tools and extra rows */
.friend-chat-window .chat-share-tools,
.friend-chat-window .chat-youtube-row,
.friend-chat-window .chat-e2e-panel,
.friend-chat-window .chat-typing-indicator{
  background:#fff !important;
  border-top:1px solid #e2ebf1 !important;
}

.friend-chat-window .chat-share-tools{
  padding:7px 8px !important;
}

.friend-chat-window .chat-share-tools button,
.friend-chat-window .chat-upload-btn,
.friend-chat-window .chat-emote-toggle,
.friend-chat-window .chat-e2e-manage,
.friend-chat-window .chat-e2e-row button,
.friend-chat-window .chat-e2e-actions button{
  border:1px solid #c7d7e3 !important;
  background:linear-gradient(180deg,#fff,#f2f8fc) !important;
  color:#2f6fa8 !important;
  border-radius:10px !important;
  min-height:34px !important;
  font-weight:700 !important;
}

.friend-chat-window .chat-share-tools button:hover,
.friend-chat-window .chat-upload-btn:hover,
.friend-chat-window .chat-emote-toggle:hover,
.friend-chat-window .chat-e2e-manage:hover,
.friend-chat-window .chat-e2e-row button:hover,
.friend-chat-window .chat-e2e-actions button:hover{
  background:linear-gradient(180deg,#fff9ee,#ffeccc) !important;
  border-color:#dfb86d !important;
  color:#9e6500 !important;
}

/* typing note */
.friend-chat-window .chat-typing-indicator{
  color:#698195 !important;
}

/* invoerveld */
.friend-chat-window .chat-send-form{
  background:rgba(255,255,255,.98) !important;
  border-top:1px solid #dbe6ee !important;
  padding:8px !important;
  grid-template-columns:minmax(0,1fr) auto !important;
}

.friend-chat-window .chat-compose-row{
  background:transparent !important;
  gap:7px !important;
  align-items:end !important;
}

.friend-chat-window .chat-send-form input,
.friend-chat-window .chat-text-input{
  background:#fff !important;
  color:#28435a !important;
  border:1px solid #b6cad8 !important;
  border-radius:16px !important;
  padding:9px 12px !important;
  box-shadow:inset 0 1px 2px rgba(20,48,72,.05) !important;
}

.friend-chat-window .chat-send-form input:focus,
.friend-chat-window .chat-text-input:focus{
  outline:none !important;
  border-color:#4e92c6 !important;
  box-shadow:0 0 0 3px rgba(78,146,198,.14) !important;
}

.friend-chat-window .chat-send-btn,
.friend-chat-window .chat-send-form button{
  border:1px solid var(--buddy-chat-button-dark) !important;
  background:linear-gradient(180deg,#f7aa31,#e28707) !important;
  color:#fff !important;
  border-radius:14px !important;
  min-height:36px !important;
  padding:0 14px !important;
  font-weight:800 !important;
  box-shadow:0 4px 10px rgba(224,136,9,.20) !important;
}

.friend-chat-window .chat-send-btn:hover,
.friend-chat-window .chat-send-form button:hover{
  filter:brightness(1.02) !important;
  transform:translateY(-1px) !important;
}

/* mobiele open view ook mee restylen */
body.mobile-chat-open .friend-chat-window{
  background:linear-gradient(180deg,#ffffff,#f4f9fc) !important;
}

body.mobile-chat-open .friend-chat-window > header{
  background:linear-gradient(180deg,#4c8ec6,#2f6fa8) !important;
  color:#fff !important;
}

body.mobile-chat-open .chat-log{
  background-color:#eef6fb !important;
  background-image:
    linear-gradient(rgba(255,255,255,.60),rgba(255,255,255,.60)),
    url("../img/chat/buddysocial-chat-bg.svg") !important;
  background-repeat:repeat, repeat !important;
  background-position:center center, center center !important;
  background-size:auto, 230px auto !important;
}

body.mobile-chat-open .chat-send-form{
  background:#fff !important;
  border-top:1px solid #dbe6ee !important;
}

body.mobile-chat-open .chat-head-actions button,
body.mobile-chat-open .chat-call-btn,
body.mobile-chat-open .chat-buzz-btn,
body.mobile-chat-open .chat-e2e-btn,
body.mobile-chat-open .chat-close{
  background:rgba(255,255,255,.14) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.28) !important;
}

@media(max-width:760px){
  #friend-chat.friend-chat{
    border-radius:14px !important;
  }

  #friend-chat .chat-friend-list{
    max-height:none !important;
  }

  .friend-chat-window{
    border-radius:14px !important;
  }

  .friend-chat-window .chat-log{
    background-size:auto, 230px auto !important;
  }

  .friend-chat-window .chat-bubble{
    max-width:88% !important;
  }
}

/* ==========================================================
   BuddySocial v9.64 SAFE Hyves-style status + notifications
   Passive CSS only: no observer, no timer, no extra polling.
   ========================================================== */

.online-dot,
.chat-presence-dot,
.chat-status-dot{
  border:1px solid rgba(36,67,89,.30) !important;
  box-shadow:0 0 0 2px #fff,0 1px 3px rgba(14,45,67,.16) !important;
}

.online-dot.status-online,
.chat-presence-dot.status-online,
.chat-status-dot.online{
  background:#42bd54 !important;
}
.online-dot.status-busy,
.chat-presence-dot.status-busy,
.chat-status-dot.busy{
  background:#f2a125 !important;
}
.online-dot.status-invisible,
.chat-presence-dot.status-invisible{
  background:#8999a6 !important;
}
.online-dot.status-offline,
.chat-status-dot.offline{
  background:#a6b1ba !important;
}

#friend-chat .chat-friend-row.status-online{border-left:4px solid #42bd54 !important}
#friend-chat .chat-friend-row.status-busy{border-left:4px solid #f2a125 !important}
#friend-chat .chat-friend-row.status-offline{border-left:4px solid #a6b1ba !important;opacity:.78 !important}

.notification-count-badge,
.message-count-badge,
.chat-unread-badge,
.chat-row-unread{
  background:linear-gradient(180deg,#ffb536,#ed8e08) !important;
  color:#fff !important;
  border:1px solid #c87300 !important;
  box-shadow:0 1px 3px rgba(75,44,0,.23) !important;
  border-radius:999px !important;
  font-weight:900 !important;
}

.notification-dropdown{
  width:min(410px,94vw) !important;
  border:1px solid #7c9db5 !important;
  border-radius:7px !important;
  background:#fff !important;
  box-shadow:0 14px 38px rgba(22,54,79,.28) !important;
}
.notification-dropdown-head{
  background:linear-gradient(180deg,#f7fafc,#dfeaf2) !important;
  border-bottom:1px solid #9fb8ca !important;
  color:#2d5876 !important;
}
.notification-dropdown-list{
  background:#f4f8fb !important;
}
.notification-dropdown-item{
  background:#fff !important;
  border-bottom:1px solid #dce7ee !important;
}
.notification-dropdown-item.is-unread{
  background:#fff9e8 !important;
  box-shadow:inset 4px 0 #f2a125 !important;
}
.notification-dropdown-item:hover{
  background:#edf6fc !important;
}
.notification-dropdown-icon{
  width:34px !important;
  height:34px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:6px !important;
  background:linear-gradient(180deg,#f8fbfd,#e5eff6) !important;
  border:1px solid #c0d3e0 !important;
}
.notification-dropdown-footer{
  background:linear-gradient(180deg,#fafcfd,#e7eff5) !important;
  border-top:1px solid #b8cad7 !important;
  color:#2d6f9d !important;
}

.buddy-toast{
  border:1px solid #7e9fb6 !important;
  border-radius:7px !important;
  background:linear-gradient(180deg,#ffffff,#f1f6f9) !important;
  box-shadow:0 12px 34px rgba(22,57,83,.28) !important;
}
.buddy-toast-icon{
  border-radius:6px !important;
  border:1px solid #bfd1dd !important;
  background:linear-gradient(180deg,#f8fbfd,#e6f0f6) !important;
}
.notifications-box>.retro-box-title{
  background:linear-gradient(180deg,#4b8bc1,#2f6fa8) !important;
  color:#fff !important;
}
.notification-filterbar{
  background:linear-gradient(180deg,#fafcfd,#e8f0f5) !important;
}
.notification-filterbar a.active{
  background:#f39a13 !important;
  color:#fff !important;
  border-color:#d37d00 !important;
}

@media(max-width:760px){
  .notification-dropdown{
    width:100% !important;
    max-width:none !important;
  }
}
/* v9.69 - final chat background restore override */
#chat-windows .friend-chat-window .chat-log,
.friend-chat-window .chat-log,
body.mobile-chat-open .chat-log{
  background-color:#eef6fb !important;
  background-image:
    linear-gradient(rgba(255,255,255,.58),rgba(255,255,255,.58)),
    url("../img/chat/buddysocial-chat-bg.svg") !important;
  background-repeat:repeat,repeat !important;
  background-position:center center,center center !important;
  background-size:auto,280px auto !important;
}

#friend-chat .friend-chat-body{
  background:
    linear-gradient(rgba(255,255,255,.78),rgba(255,255,255,.78)),
    url("../img/chat/buddysocial-chat-bg.svg") center center / 260px auto repeat !important;
}

@media(max-width:760px){
  #chat-windows .friend-chat-window .chat-log,
  .friend-chat-window .chat-log,
  body.mobile-chat-open .chat-log{
    background-size:auto,230px auto !important;
  }
}