/* BBTM Foofie Lounge 1.0.5 — chat room */
#bbtm-chat-app{
  --bc-blue:#1a6eb5; --bc-blue-d:#135599; --bc-blue-lt:#eaf3fc;
  --bc-purple:#534AB7; --bc-gold:#F0B429; --bc-gold-lt:#ffd54a;
  --bc-ink:#1a2b3c; --bc-muted:#62809b; --bc-line:#e4eef8;
  font-family:'Nunito',-apple-system,Segoe UI,sans-serif; color:var(--bc-ink);
  max-width:720px; margin:0 auto; display:block;
}
#bbtm-chat-app *{box-sizing:border-box}

.bbtmchat-back{
  display:inline-flex; align-items:center; gap:6px; margin:0 0 12px; text-decoration:none;
  font-family:'Oswald',-apple-system,sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:.74rem;
  color:var(--bc-blue,#1a6eb5); background:#fff; border:1.5px solid #cfe0f6; border-radius:999px !important; padding:9px 15px;
}
.bbtmchat-back:hover{border-color:var(--bc-blue,#1a6eb5); background:#eaf3fc}
.bbtmchat-back:active{transform:scale(.97)}

#bbtm-chat-app .bc-room{
  background:#fff; border-radius:20px; box-shadow:0 10px 30px rgba(26,110,181,.16); overflow:hidden;
  display:flex; flex-direction:column; height:82vh;
}

#bbtm-chat-app .bc-head{
  padding:15px 18px 13px; border-bottom:1px solid var(--bc-line); position:relative;
  background:linear-gradient(180deg,#ffffff,#f7fbff); flex:0 0 auto;
}
#bbtm-chat-app .bc-head::after{content:""; position:absolute; left:18px; right:18px; bottom:-1px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--bc-gold),var(--bc-gold-lt))}
#bbtm-chat-app .bc-head h1{margin:0; font-family:'Oswald',sans-serif; font-weight:700; font-size:1.4rem; display:flex; align-items:center; gap:9px}
#bbtm-chat-app .bc-presence{display:flex; align-items:center; gap:7px; margin-top:5px; font-size:12px; font-weight:700; color:var(--bc-muted);
  background:none; border:none; padding:3px 2px; cursor:pointer; font-family:'Nunito',sans-serif}
#bbtm-chat-app .bc-presence:hover{color:var(--bc-blue-d)}
#bbtm-chat-app .bc-caret{font-size:10px; opacity:.7}
#bbtm-chat-app .bc-stack{display:inline-flex; align-items:center}
#bbtm-chat-app .bc-stack .bc-mini{margin-left:-8px}
#bbtm-chat-app .bc-stack .bc-mini:first-child{margin-left:0}
#bbtm-chat-app .bc-mini{width:24px; height:24px; border-radius:50%; overflow:hidden; flex:0 0 auto;
  border:2px solid #fff; background:#dce9f8; display:inline-flex; align-items:center; justify-content:center; vertical-align:middle}
#bbtm-chat-app .bc-mini img{width:100%; height:100%; object-fit:cover; display:block}
#bbtm-chat-app .bc-mini-init{font-family:'Oswald',sans-serif; font-weight:600; color:#fff; font-size:11px}
#bbtm-chat-app .bc-more{background:#cdd9e8; color:#42607e; font-weight:800; font-size:10px; font-family:'Nunito',sans-serif}

#bbtm-chat-app .bc-whopop{display:none; position:absolute; left:18px; top:100%; margin-top:-4px; z-index:8;
  width:230px; max-width:calc(100% - 36px); background:#fff; border:1px solid var(--bc-line);
  border-radius:14px; box-shadow:0 14px 34px rgba(26,110,181,.22); overflow:hidden}
#bbtm-chat-app .bc-whopop.open{display:block}
#bbtm-chat-app .bc-who-hd{font-family:'Oswald',sans-serif; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--bc-muted); padding:10px 14px 7px; border-bottom:1px solid var(--bc-line)}
#bbtm-chat-app .bc-who-list{max-height:260px; overflow-y:auto; padding:6px}
#bbtm-chat-app .bc-who-row{display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:9px}
#bbtm-chat-app .bc-who-row:hover{background:#f3f8fd}
#bbtm-chat-app .bc-who-name{font-size:13.5px; font-weight:700; color:var(--bc-ink)}
#bbtm-chat-app .bc-who-empty{padding:12px 10px; font-size:13px; color:var(--bc-muted); font-weight:700; text-align:center}

#bbtm-chat-app .bc-dot{width:9px; height:9px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 0 rgba(34,197,94,.5); animation:bcpulse 2.4s infinite}
@keyframes bcpulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
#bbtm-chat-app .bc-rules{margin-top:7px; font-size:11.5px; color:var(--bc-muted)}

#bbtm-chat-app .bc-feed{flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:14px 14px 8px; display:flex; flex-direction:column; gap:11px}
#bbtm-chat-app .bc-older{align-self:center; border:1px solid #d8e4f2; background:#f3f8fd; color:var(--bc-blue);
  font-family:'Nunito',sans-serif; font-weight:800; font-size:12px; border-radius:999px; padding:7px 16px; cursor:pointer; margin-bottom:4px}
#bbtm-chat-app .bc-older:hover{border-color:var(--bc-blue)}
#bbtm-chat-app .bc-empty{align-self:center; color:var(--bc-muted); font-weight:700; font-size:13px; padding:24px 0}
#bbtm-chat-app .bc-day{align-self:center; font-size:11px; font-weight:800; color:var(--bc-muted); background:#eef4fb; border-radius:999px; padding:4px 12px}

#bbtm-chat-app .bc-msg{display:flex; gap:10px; align-items:flex-start; position:relative}
#bbtm-chat-app .bc-av{width:38px; height:38px; border-radius:50%; flex:0 0 auto; overflow:hidden;
  display:flex; align-items:center; justify-content:center; background:#dce9f8}
#bbtm-chat-app .bc-av img{width:100%; height:100%; object-fit:cover; display:block}
#bbtm-chat-app .bc-av-init{font-family:'Oswald',sans-serif; font-weight:600; color:#fff; font-size:15px}
#bbtm-chat-app .bc-body{max-width:78%}
#bbtm-chat-app .bc-meta{display:flex; align-items:baseline; gap:8px; margin:0 0 3px 2px}
#bbtm-chat-app .bc-who{font-family:'Oswald',sans-serif; font-weight:600; font-size:13px; color:var(--bc-ink)}
#bbtm-chat-app .bc-time{font-size:10.5px; color:#9bb0c6; font-weight:700}
#bbtm-chat-app .bc-bubble{background:#f1f6fc; border:1px solid #e6eef8; border-radius:4px 14px 14px 14px;
  padding:9px 13px; font-size:14.5px; line-height:1.4; color:#26384a; white-space:pre-wrap; word-break:break-word}

#bbtm-chat-app .bc-msg.me{flex-direction:row-reverse}
#bbtm-chat-app .bc-msg.me .bc-body{display:flex; flex-direction:column; align-items:flex-end}
#bbtm-chat-app .bc-msg.me .bc-meta{margin:0 2px 3px 0; flex-direction:row-reverse}
#bbtm-chat-app .bc-msg.me .bc-bubble{background:linear-gradient(180deg,#5a6fe0,#534AB7); border-color:transparent; color:#fff; border-radius:14px 4px 14px 14px}
#bbtm-chat-app .bc-msg.me .bc-av{background:linear-gradient(180deg,#5a6fe0,#3f37a0)}

/* moderation */
#bbtm-chat-app .bc-mod{display:inline-flex; gap:4px; margin-left:4px}
#bbtm-chat-app .bc-del,#bbtm-chat-app .bc-ban{border:none; background:transparent; cursor:pointer; font-size:12px; opacity:.45; padding:0 2px; line-height:1}
#bbtm-chat-app .bc-del:hover,#bbtm-chat-app .bc-ban:hover{opacity:1}

/* new-messages pill */
#bbtm-chat-app .bc-newpill{position:relative; align-self:center; margin:-30px auto 6px; z-index:3;
  display:none; border:none; cursor:pointer; background:var(--bc-purple); color:#fff; font-weight:800; font-size:12px;
  border-radius:999px; padding:7px 16px; box-shadow:0 6px 16px rgba(83,74,183,.4)}
#bbtm-chat-app .bc-newpill.show{display:inline-block}

/* composer */
#bbtm-chat-app .bc-composer{display:flex; gap:9px; align-items:center; padding:12px; border-top:1px solid var(--bc-line); background:#fff; flex:0 0 auto}
#bbtm-chat-app .bc-composer input{flex:1; border:1.5px solid #d8e4f2; border-radius:999px; padding:12px 16px;
  font-family:'Nunito',sans-serif; font-size:14.5px; outline:none; background:#f8fbff; color:var(--bc-ink)}
#bbtm-chat-app .bc-composer input:focus{border-color:var(--bc-blue); background:#fff}
#bbtm-chat-app .bc-send{flex:0 0 auto; border:none; cursor:pointer; border-radius:999px; padding:12px 20px;
  font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:.8rem;
  color:#3a2a05; background:linear-gradient(180deg,var(--bc-gold-lt),var(--bc-gold)); box-shadow:0 3px 10px rgba(240,180,41,.4)}
#bbtm-chat-app .bc-send:active{transform:scale(.96)}
#bbtm-chat-app .bc-composer.bc-off{opacity:.65}
#bbtm-chat-app .bc-composer.bc-off input,#bbtm-chat-app .bc-composer.bc-off .bc-send{cursor:not-allowed}
#bbtm-chat-app .bc-note{min-height:0; text-align:center; font-size:12px; font-weight:700; color:var(--bc-muted); padding:0 12px}
#bbtm-chat-app .bc-note:not(:empty){padding:4px 12px 10px}

@media (max-width:430px){
  #bbtm-chat-app .bc-room{height:80vh; border-radius:16px}
  #bbtm-chat-app .bc-body{max-width:80%}
}