:root {
  --primary: #00a884;
  --primary-dark: #008c6e;
  --primary-light: #e8f8f5;
  --secondary: #f0f2f5;
  --accent: #005c4b;
  --text-color: #1a1a2e;
  --text-muted: #667781;
  --own-msg: #d9fdd3;
  --other-msg: #ffffff;
  --bg-chat: #efeae2;
  --bg-sidebar: #ffffff;
  --bg-header: #f8fafb;
  --border: #e8ecf0;
  --danger: #e74c3c;
  --warning: #f39c12;
  --info: #3498db;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.18);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --font: 'Plus Jakarta Sans', sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  background-size: 400% 400%;
  animation: gradientBG 20s ease infinite;
  display: flex; justify-content: center; align-items: center;
  height: 100vh; height: 100dvh; overflow: hidden;
}
@keyframes gradientBG { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

#auth {
  width: 100%; max-width: 420px; padding: 40px 36px; border-radius: 24px;
  background: rgba(255,255,255,0.97); backdrop-filter: blur(20px);
  box-shadow: 0 24px 64px rgba(0,0,0,0.35); z-index: 1000; position: relative;
}
#auth::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--primary),#00d2a8); border-radius:24px 24px 0 0; }
#auth .logo-wrap { text-align:center; margin-bottom:28px; }
#auth .logo-wrap img { width:72px; height:72px; object-fit:contain; }
#auth .app-name { font-size:1.5em; font-weight:700; color:var(--text-color); margin-top:10px; letter-spacing:-0.5px; }
#auth .app-tagline { font-size:0.82em; color:var(--text-muted); margin-top:4px; }
#auth h2 { font-size:1.1em; font-weight:700; color:var(--text-color); margin-bottom:20px; }
.input-group { margin-bottom:14px; }
.input-group label { font-size:0.75em; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.8px; display:block; margin-bottom:6px; }
.form-input {
  width:100%; padding:12px 14px; border:1.5px solid var(--border);
  border-radius:var(--radius-sm); outline:none; font-family:var(--font); font-size:0.95em;
  color:var(--text-color); background:#fff; transition:border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,168,132,0.12); }
.auth-btn {
  width:100%; padding:13px; background:linear-gradient(135deg,var(--primary),#00c49a);
  color:white; border:none; border-radius:var(--radius-sm); cursor:pointer;
  font-weight:700; font-size:0.95em; margin-bottom:12px; font-family:var(--font);
  transition:transform 0.15s, box-shadow 0.15s; box-shadow:0 4px 16px rgba(0,168,132,0.35);
}
.auth-btn:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,168,132,0.45); }
.auth-btn:active { transform:translateY(0); }
.switch-btn { font-size:0.88em; color:var(--primary); cursor:pointer; text-align:center; font-weight:600; }
.switch-btn:hover { text-decoration:underline; }
.persist-group { display:flex; align-items:center; gap:8px; margin-bottom:14px; font-size:0.85em; color:var(--text-muted); }
.persist-group input { width:auto; accent-color:var(--primary); }
#authError { color:var(--danger); margin-top:10px; font-size:0.85em; font-weight:600; text-align:center; }

.terms-link { text-align:center; margin-top:16px; font-size:0.75em; color:var(--text-muted); }
.terms-link a { color:var(--primary); cursor:pointer; font-weight:600; }

#appContainer { display:none; width:95vw; height:90vh; max-width:1400px; background:#fff; box-shadow:var(--shadow-lg); border-radius:var(--radius-md); overflow:hidden; flex-direction:row; position:relative; }

#sidebar { width:340px; background:var(--bg-sidebar); border-right:1px solid var(--border); display:flex; flex-direction:column; position:relative; -webkit-transform:translateZ(0); transform:translateZ(0); }
#sidebarHeader {
  background:var(--bg-header); padding:14px 16px; display:flex;
  justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--border);
}
.user-profile { display:flex; align-items:center; gap:10px; cursor:pointer; }
.user-profile:hover { opacity:0.85; }
.user-name-block { flex:1; min-width:0; }
.user-name-block .uname { font-weight:700; font-size:0.92em; color:var(--text-color); }
.user-name-block .ustatus { font-size:0.72em; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px; margin-top:1px; }
#sidebarActions { display:flex; gap:4px; align-items:center; }
.action-btn {
  cursor:pointer; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.05em; transition:background 0.2s; border:none; background:none;
}
.action-btn:hover { background:rgba(0,0,0,0.06); }
#searchContainer { padding:10px 12px; background:#fff; border-bottom:1px solid var(--border); }
.search-wrap { display:flex; align-items:center; gap:8px; background:var(--secondary); border-radius:var(--radius-sm); padding:8px 12px; }
.search-wrap svg { flex-shrink:0; opacity:0.45; }
#chatSearch { background:none; border:none; outline:none; font-family:var(--font); font-size:0.88em; color:var(--text-color); flex:1; }
#sidebarTabs { display:flex; border-bottom:1px solid var(--border); background:#fff; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
#sidebarTabs::-webkit-scrollbar { display:none; }

.sidebar-tab { flex:0 0 auto; padding:11px 10px; text-align:center; cursor:pointer; font-size:0.82em; color:var(--text-muted); border-bottom:2px solid transparent; transition:all 0.2s; font-weight:600; display:flex; align-items:center; justify-content:center; gap:5px; white-space:nowrap; }

.sidebar-tab.active { color:var(--primary); border-bottom-color:var(--primary); background:var(--primary-light); }

.avatar-sm { width:42px; height:42px; border-radius:50%; background:#ccc; display:flex; align-items:center; justify-content:center; color:white; font-weight:700; flex-shrink:0; font-size:1.1em; overflow:hidden; position:relative; }
.avatar-sm img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.online-dot { position:absolute; bottom:1px; right:1px; width:11px; height:11px; border-radius:50%; background:#25d366; border:2px solid #fff; z-index:2; display:none; }
.online-dot.visible { display:block; }

#chatList { flex:1; overflow-y:auto; display:none; min-height:0; -webkit-overflow-scrolling:touch; -webkit-transform:translateZ(0); transform:translateZ(0); }
#chatList.active { display:block; }
#channelList { flex:1; overflow-y:auto; display:none; min-height:0; -webkit-overflow-scrolling:touch; -webkit-transform:translateZ(0); transform:translateZ(0); }
#channelList.active { display:block; }
.chat-item { padding:11px 14px; display:flex; align-items:center; gap:12px; cursor:pointer; border-bottom:1px solid #f5f5f5; transition:background 0.15s; position:relative; }
.chat-item:hover { background:#f7f9fb; }
.chat-item.active { background:var(--primary-light); border-left:3px solid var(--primary); }
.chat-info { flex:1; overflow:hidden; }
.chat-name-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:3px; }
.chat-name-txt { font-weight:600; color:var(--text-color); font-size:0.92em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.chat-time { font-size:0.7em; color:var(--text-muted); white-space:nowrap; flex-shrink:0; }
.chat-preview-row { display:flex; align-items:center; justify-content:space-between; gap:4px; }
.chat-last-msg { font-size:0.8em; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.unread-badge {
  background:var(--primary); color:white; border-radius:12px;
  min-width:20px; height:20px; padding:0 5px; font-size:0.68em;
  display:flex; align-items:center; justify-content:center; font-weight:700;
  flex-shrink:0; animation:badgePop 0.3s ease;
}
@keyframes badgePop { from{transform:scale(0)} to{transform:scale(1)} }
.chat-online-status { font-size:0.7em; margin-top:2px; }
.chat-online-status.online { color:#25d366; }
.chat-online-status.offline { color:#bbb; }

.channel-item { padding:11px 14px; display:flex; align-items:center; gap:12px; cursor:pointer; border-bottom:1px solid #f5f5f5; transition:background 0.15s; }
.channel-item:hover { background:#f7f9fb; }
.channel-item.active { background:var(--primary-light); border-left:3px solid var(--primary); }
.channel-badge { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--accent)); color:white; display:flex; align-items:center; justify-content:center; font-size:1.2em; flex-shrink:0; overflow:hidden; }
.channel-badge img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.channel-info { flex:1; overflow:hidden; }
.channel-name { font-weight:600; font-size:0.92em; color:var(--text-color); }
.channel-sub-count { font-size:0.75em; color:var(--text-muted); margin-top:2px; }
.channel-type-badge { background:rgba(0,168,132,0.12); color:var(--primary); font-size:0.62em; padding:2px 7px; border-radius:10px; font-weight:700; margin-left:4px; }
.channel-coadmin-badge { background:rgba(52,152,219,0.12); color:var(--info); font-size:0.62em; padding:2px 7px; border-radius:10px; font-weight:700; margin-left:4px; }

#fab { position:absolute; bottom:84px; right:16px; width:52px; height:52px; background:linear-gradient(135deg,var(--primary),#00c49a); border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-size:1.5em; box-shadow:0 4px 16px rgba(0,168,132,0.4); cursor:pointer; z-index:100; transition:transform 0.2s, box-shadow 0.2s; border:none; }
#fab:hover { transform:scale(1.08); box-shadow:0 6px 24px rgba(0,168,132,0.5); }

/* Radio banner compact */
#radioBanner{position:relative;overflow:hidden;width:100%;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:#0f0f0f;font-family:'Inter',sans-serif;border-top:1px solid rgba(255,255,255,.06);flex-shrink:0;}
#radioBanner::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,0,60,.18) 0%,rgba(255,60,0,.12) 40%,transparent 70%);pointer-events:none;}
#radioBanner::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,50,50,.6) 30%,rgba(255,100,0,.5) 60%,transparent);}
.rb-left{display:flex;align-items:center;gap:10px;position:relative;z-index:2;min-width:0;flex:1;}
.rb-logo-wrap{position:relative;width:40px;height:40px;flex-shrink:0;}
.rb-logo-outer-ring{position:absolute;inset:-3px;border-radius:14px;border:1px solid rgba(255,50,50,.25);animation:rbSpinRing 6s linear infinite;}
.rb-logo-inner{width:40px;height:40px;border-radius:12px;background:linear-gradient(145deg,#1e1e1e,#141414);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.rb-logo-inner::before{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:rgba(255,255,255,.03);border-radius:12px 12px 0 0;}
.rb-logo-svg{width:20px;height:20px;position:relative;z-index:1;}
.rb-pulse-ring{position:absolute;inset:-2px;border-radius:14px;border:1.5px solid rgba(255,40,40,.4);animation:rbPulsate 2s ease-out infinite;}
@keyframes rbSpinRing{to{transform:rotate(360deg);}}
@keyframes rbPulsate{0%{transform:scale(1);opacity:.7;}100%{transform:scale(1.45);opacity:0;}}
.rb-info{display:flex;flex-direction:column;gap:2px;min-width:0;}
.rb-live-pill{display:inline-flex;align-items:center;gap:4px;background:rgba(255,30,30,.15);border:1px solid rgba(255,50,50,.2);padding:2px 7px 2px 5px;border-radius:14px;width:fit-content;}
.rb-live-dot{width:5px;height:5px;background:#ff2e2e;border-radius:50%;box-shadow:0 0 6px rgba(255,0,0,.7);animation:rbBlinkDot 1.4s ease-in-out infinite;flex-shrink:0;}
@keyframes rbBlinkDot{0%,100%{opacity:1;}50%{opacity:.3;}}
.rb-live-text{font-size:8px;font-weight:700;letter-spacing:1.5px;color:rgba(255,255,255,.7);text-transform:uppercase;}
.rb-station-row{display:flex;align-items:center;gap:8px;min-width:0;}
.rb-station-name{font-size:17px;font-weight:800;letter-spacing:-.3px;color:#fff;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;}
.rb-switches{display:flex;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:6px;padding:2px;gap:2px;flex-shrink:0;}
.rb-sw-btn{background:transparent;border:none;color:rgba(255,255,255,.35);font-family:'Inter',sans-serif;font-size:8px;font-weight:700;letter-spacing:.6px;padding:3px 7px;border-radius:4px;cursor:pointer;transition:all .2s;text-transform:uppercase;}
.rb-sw-btn.active{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.12);}
.rb-sw-btn:hover:not(.active){color:rgba(255,255,255,.55);}
.rb-center{display:flex;align-items:center;gap:8px;position:relative;z-index:2;flex-shrink:0;}
.rb-play-btn{width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;background:linear-gradient(145deg,#ff2040,#ff5500);box-shadow:0 3px 12px rgba(255,30,30,.4),0 1px 0 rgba(255,255,255,.15) inset;display:flex;align-items:center;justify-content:center;transition:all .25s cubic-bezier(.34,1.56,.64,1);position:relative;flex-shrink:0;}
.rb-play-btn::before{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(145deg,rgba(255,255,255,.15),transparent);}
.rb-play-btn:hover{transform:scale(1.08);box-shadow:0 5px 18px rgba(255,30,30,.55),0 1px 0 rgba(255,255,255,.2) inset;}
.rb-play-btn:active{transform:scale(.95);}
.rb-play-icon{width:14px;height:14px;fill:#fff;position:relative;z-index:1;transition:transform .2s;filter:drop-shadow(0 1px 3px rgba(0,0,0,.3));}
.rb-waveform{display:flex;align-items:center;gap:2px;height:24px;}
.rb-waveform span{display:block;width:2px;border-radius:1.5px;background:linear-gradient(to top,rgba(255,50,0,.8),rgba(255,180,0,.5));animation:rbWave 1.2s ease-in-out infinite;}
.rb-waveform span:nth-child(1){height:8px;animation-delay:0s;}
.rb-waveform span:nth-child(2){height:16px;animation-delay:.1s;}
.rb-waveform span:nth-child(3){height:11px;animation-delay:.2s;}
.rb-waveform span:nth-child(4){height:20px;animation-delay:.3s;}
.rb-waveform span:nth-child(5){height:10px;animation-delay:.4s;}
.rb-waveform span:nth-child(6){height:17px;animation-delay:.5s;}
.rb-waveform span:nth-child(7){height:9px;animation-delay:.6s;}
@keyframes rbWave{0%,100%{transform:scaleY(.4);opacity:.5;}50%{transform:scaleY(1);opacity:1;}}
@media(max-width:768px){
  #radioBanner{height:64px;padding:0 10px;}
  .rb-station-name{font-size:14px;max-width:80px;}
  .rb-logo-wrap{width:32px;height:32px;}
  .rb-logo-inner{width:32px;height:32px;border-radius:10px;}
  .rb-logo-svg{width:16px;height:16px;}
  .rb-play-btn{width:34px;height:34px;}
  .rb-play-icon{width:12px;height:12px;}
  .rb-waveform{display:none!important;}
  .rb-live-text{font-size:7px;}
  .rb-sw-btn{font-size:7px;padding:2px 5px;}
}
@media(max-width:440px){
  .rb-switches{display:flex;flex-wrap:wrap;gap:2px;}
  .rb-sw-btn{font-size:6px;padding:2px 4px;}
  .rb-station-name{font-size:12px;max-width:60px;}
}

#chatArea { flex:1; background:var(--bg-chat); display:flex; flex-direction:column; position:relative; }
#chatHeader {
  background:var(--bg-header); padding:10px 16px; display:flex;
  align-items:center; gap:12px; border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
#chatHeaderInfo { flex:1; cursor:pointer; min-width:0; }
#activeChatName { font-weight:700; font-size:0.97em; color:var(--text-color); display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#chatHeaderStatus { font-size:0.75em; color:var(--text-muted); margin-top:2px; display:flex; align-items:center; gap:4px; }
#typingIndicator { font-size:0.75em; color:var(--primary); height:1.1em; display:flex; align-items:center; gap:3px; }
.typing-msg { background:white !important; border-bottom-left-radius:3px !important; min-width:60px; padding:14px 18px !important; }
.typing-msg .typing { display:flex; gap:5px; align-items:center; }
.typing-msg .typing span { width:10px; height:10px; background:#888; border-radius:50%; animation:bounce 1.4s infinite ease-in-out; }
.typing-msg .typing span:nth-child(2) { animation-delay:0.2s; }
.typing-msg .typing span:nth-child(3) { animation-delay:0.4s; }
@keyframes bounce { 0%,80%,100% { transform:translateY(0); opacity:0.5; } 40% { transform:translateY(-8px); opacity:1; } }
.header-actions { display:flex; gap:2px; align-items:center; }
.header-btn { background:none; border:none; width:38px; height:38px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.2s; font-size:1.05em; }
.header-btn:hover { background:rgba(0,0,0,0.06); }
#chatHeaderNameEditBtn { background:none; border:none; cursor:pointer; padding:2px 6px; border-radius:4px; font-size:0.7em; color:var(--primary); font-weight:600; opacity:0; transition:opacity 0.2s; }
#chatHeader:hover #chatHeaderNameEditBtn { opacity:1; }

#chatMessages { flex:1; padding:16px; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; gap:6px; background-image:url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png'); transition:background 0.3s ease; }
.message { max-width:72%; padding:8px 12px; border-radius:10px; font-size:0.91em; position:relative; box-shadow:0 1px 3px rgba(0,0,0,0.08); word-wrap:break-word; overflow-wrap:break-word; word-break:break-word; animation:msgFadeIn 0.25s ease; font-family:var(--font); transition:all 0.35s cubic-bezier(.4,0,.2,1); }
.msg-own { align-self:flex-end; background:var(--own-msg); border-bottom-right-radius:3px; border-left:3px solid var(--primary); padding-left:9px; }
.msg-other { align-self:flex-start; background:var(--other-msg); border-bottom-left-radius:3px; border-left:3px solid var(--accent); padding-left:9px; }
@keyframes msgFadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.msg-user { font-size:0.74em; font-weight:700; margin-bottom:3px; }
.msg-time { font-size:0.68em; color:var(--text-muted); text-align:right; margin-top:4px; display:flex; align-items:center; justify-content:flex-end; gap:4px; }
.trans-badge { font-size:0.6em; color:#53bdeb; cursor:pointer; margin-top:4px; display:inline-block; user-select:none; } .trans-badge:hover { text-decoration:underline; }
.tick { font-size:0.8em; }
.tick.seen { color:#53bdeb; }
.tick.delivered { color:#aaa; }
.msg-image { max-width:100%; max-height:320px; width:auto; border-radius:8px; display:block; margin-top:4px; cursor:pointer; object-fit:contain; transition:opacity 0.15s; }
.msg-image:hover { opacity:0.88; }
.msg-video { max-width:100%; border-radius:8px; display:block; margin-top:4px; background:#000; }
.youtube-embed { max-width:100%; margin:6px 0; border-radius:8px; overflow:hidden; }
.youtube-embed iframe { width:100%; aspect-ratio:16/9; border-radius:8px; border:none; }
.enc-badge { font-size:0.62em; background:rgba(0,168,132,0.15); color:var(--accent); padding:1px 5px; border-radius:4px; margin-left:4px; }
.reply-quote { background:rgba(0,0,0,0.04); border-left:3px solid var(--primary); padding:4px 8px; margin-bottom:4px; border-radius:4px; }
.reply-quote-user { font-size:0.72em; font-weight:700; color:var(--primary); margin-bottom:2px; }
.reply-quote-text { font-size:0.78em; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.msg-own .reply-quote { border-left-color:var(--accent); background:rgba(0,92,75,0.06); }
.msg-system { align-self:center; background:rgba(0,0,0,0.07); color:var(--text-muted); font-size:0.75em; padding:5px 14px; border-radius:12px; text-align:center; max-width:80%; }

.message-wrapper { display:flex; flex-direction:column; position:relative; max-width:100%; }
.message-wrapper.own { align-items:flex-end; }
.message-wrapper.other { align-items:flex-start; }
.msg-actions { position:absolute; top:-10px; display:flex; gap:2px; opacity:0; transition:opacity 0.2s; z-index:20; }
.message-wrapper.own .msg-actions { right:8px; left:auto; flex-direction:row-reverse; }
.message-wrapper.other .msg-actions { left:8px; right:auto; }
.message-wrapper:hover .msg-actions { opacity:1; }
.message-wrapper:hover .msg-actions, .message-wrapper.touch-hover .msg-actions { opacity:1; }
@media (hover:none) {
  .message-wrapper { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
  .msg-actions .msg-action-btn { width:28px; height:28px; font-size:0.78em; }
}
.msg-action-btn { background:#fff; border:1px solid var(--border); border-radius:50%; width:26px; height:26px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:0.78em; box-shadow:var(--shadow-sm); transition:background 0.15s; }
.msg-action-btn:hover { background:var(--secondary); }
.msg-action-btn.delete:hover { background:#fff0f0; border-color:var(--danger); }
.reaction-trigger { position:absolute; top:-10px; opacity:1; cursor:pointer; font-size:0.82em; background:#fff; border:1px solid var(--border); border-radius:50%; width:24px; height:24px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); z-index:10; }
.message-wrapper.own .reaction-trigger { left:8px; right:auto; }
.message-wrapper.other .reaction-trigger { right:8px; left:auto; }
@media (hover:none) { .reaction-trigger { width:22px; height:22px; top:-8px; } }
.reaction-picker { position:absolute; bottom:24px; background:#fff; border:1px solid var(--border); border-radius:30px; padding:6px 10px; display:none; gap:6px; box-shadow:var(--shadow-md); z-index:200; animation:popIn 0.15s ease; }
@keyframes popIn { from{transform:scale(0.7);opacity:0} to{transform:scale(1);opacity:1} }
.message-wrapper.own .reaction-picker { right:4px; left:auto; }
.message-wrapper.other .reaction-picker { left:4px; right:auto; }
@media (max-width:768px) { .reaction-picker { bottom:20px; padding:4px 8px; } .reaction-picker span { font-size:1.1em; } }
.reaction-picker span { font-size:1.3em; cursor:pointer; transition:transform 0.1s; }
.reaction-picker span:hover { transform:scale(1.3); }
.reactions-row { display:flex; flex-wrap:wrap; gap:3px; margin-top:3px; }
.reaction-bubble { background:rgba(0,0,0,0.06); border:1px solid rgba(0,0,0,0.08); border-radius:12px; padding:2px 7px; font-size:0.8em; display:flex; align-items:center; gap:3px; cursor:pointer; transition:background 0.15s; }
.reaction-bubble:hover { background:rgba(0,168,132,0.1); }
.reaction-bubble.mine { border-color:var(--primary); background:rgba(0,168,132,0.08); }
.reaction-count { font-size:0.72em; color:#555; font-weight:700; }
.channel-msg { align-self:flex-start; background:white; max-width:82%; border-left:3px solid var(--primary); }

#chatInputContainer { background:var(--bg-header); display:flex; flex-direction:column; position:relative; border-top:1px solid var(--border); }
.chat-input-row { display:flex; align-items:center; gap:10px; padding:10px 14px; width:100%; }
#imageUploadInput, #audioUploadInput { display:none; }
#messageInput { flex:1; background:#fff; border:1.5px solid var(--border); padding:10px 14px; border-radius:22px; outline:none; font-family:var(--font); font-size:0.91em; color:var(--text-color); transition:border-color 0.2s; }
#messageInput:focus { border-color:var(--primary); }
#emojiPickerWrapper { position:absolute; bottom:70px; left:14px; z-index:1000; display:none; }
#gifPickerWrapper { position:absolute; bottom:70px; left:14px; z-index:1000; display:none; width:320px; background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow-lg); overflow:hidden; }
#gifSearchBar { display:flex; gap:6px; padding:10px; border-bottom:1px solid var(--border); }
#gifSearchInput { flex:1; padding:8px 10px; border:1.5px solid var(--border); border-radius:var(--radius-sm); outline:none; font-family:var(--font); font-size:0.82em; }
#gifSearchInput:focus { border-color:var(--primary); }
#gifSearchBtn { background:var(--primary); color:white; border:none; border-radius:var(--radius-sm); padding:8px 10px; cursor:pointer; font-size:0.85em; }
#gifResults { display:grid; grid-template-columns:repeat(2,1fr); gap:4px; padding:8px; max-height:280px; overflow-y:auto; }
#gifResults img { width:100%; border-radius:6px; cursor:pointer; transition:transform 0.15s; }
#gifResults img:hover { transform:scale(1.05); }
.gif-loading { text-align:center; padding:20px; color:var(--text-muted); font-size:0.85em; }
#musicPickerWrapper { position:absolute; bottom:70px; left:14px; z-index:1000; display:none; width:320px; background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow-lg); overflow:hidden; }
#musicSearchBar { display:flex; gap:6px; padding:10px; border-bottom:1px solid var(--border); }
#musicSearchInput { flex:1; padding:8px 10px; border:1.5px solid var(--border); border-radius:var(--radius-sm); outline:none; font-family:var(--font); font-size:0.82em; }
#musicSearchInput:focus { border-color:var(--primary); }
#musicSearchBtn { background:var(--primary); color:white; border:none; border-radius:var(--radius-sm); padding:8px 10px; cursor:pointer; font-size:0.85em; }
#musicResults { max-height:300px; overflow-y:auto; padding:6px; }
#blockedOverlay { display:none; background:#fff5f5; border-top:1px solid #ffd6d6; padding:14px 20px; text-align:center; color:var(--danger); font-size:0.88em; font-weight:600; }
#channelReadOnlyBar { display:none; background:var(--secondary); border-top:1px solid var(--border); padding:12px 20px; text-align:center; color:var(--text-muted); font-size:0.85em; }
.upload-progress { width:100%; height:3px; background:#e0e0e0; border-radius:2px; margin-top:4px; display:none; }
.upload-progress-bar { height:100%; background:var(--primary); border-radius:2px; transition:width 0.3s; }
.cloudinary-upload-status { font-size:0.75em; color:var(--primary); padding:4px 8px; display:none; }

#channelAdminBar { display:none; background:#f0f8f5; border-top:1px solid #c8e6c9; padding:10px 14px; flex-shrink:0; }
#channelAdminInput { width:100%; border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:8px 12px; outline:none; font-size:0.88em; font-family:var(--font); margin-bottom:8px; }
#channelAdminInput:focus { border-color:var(--primary); }
#channelAdminActions { display:flex; gap:8px; }
#channelAdminActions button, #channelAdminActions label { flex:1; padding:8px 10px; border:none; border-radius:var(--radius-sm); cursor:pointer; font-size:0.82em; font-weight:700; font-family:var(--font); text-align:center; white-space:nowrap; }
#channelSendTextBtn { background:var(--primary); color:white; }
#channelSendImgBtn { background:var(--info); color:white; display:flex; align-items:center; justify-content:center; }

#recordingBar { display:none; align-items:center; gap:10px; background:#fff5f5; border-top:1px solid #ffd6d6; padding:10px 14px; font-size:0.88em; color:var(--danger); }
#recordingBar.active { display:flex; }
#recordingTimer { font-weight:700; min-width:40px; font-family:'JetBrains Mono',monospace; }
#recordingWave { flex:1; height:28px; display:flex; align-items:center; gap:2px; }
.wave-bar { width:3px; background:var(--danger); border-radius:2px; animation:wave 0.6s ease-in-out infinite; min-height:4px; }
.wave-bar:nth-child(1){animation-delay:0s}.wave-bar:nth-child(2){animation-delay:0.1s}.wave-bar:nth-child(3){animation-delay:0.2s}.wave-bar:nth-child(4){animation-delay:0.3s}.wave-bar:nth-child(5){animation-delay:0.4s}.wave-bar:nth-child(6){animation-delay:0.2s}.wave-bar:nth-child(7){animation-delay:0.1s}
@keyframes wave { 0%,100%{height:5px} 50%{height:22px} }
#cancelRecBtn { background:none; border:none; font-size:1.3em; cursor:pointer; color:var(--danger); }
#sendVoiceBtn { background:var(--primary); border:none; border-radius:50%; width:36px; height:36px; color:white; font-size:1.1em; cursor:pointer; display:flex; align-items:center; justify-content:center; }
#micBtn { background:none; border:none; font-size:1.45em; cursor:pointer; transition:color 0.2s, transform 0.2s; display:flex; align-items:center; justify-content:center; color:var(--text-muted); width:36px; height:36px; border-radius:50%; }
#micBtn:hover { color:var(--primary); background:rgba(0,168,132,0.08); }
#micBtn.recording { color:var(--danger); animation:pulse 1s infinite; }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }

.audio-player-wrap { display:flex; align-items:center; gap:8px; min-width:200px; max-width:260px; }
.audio-play-btn { background:var(--primary); border:none; border-radius:50%; width:36px; height:36px; color:white; font-size:0.95em; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.audio-progress-wrap { flex:1; display:flex; flex-direction:column; gap:3px; }
.audio-progress { -webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:2px; background:#ddd; cursor:pointer; outline:none; }
.audio-progress::-webkit-slider-thumb { -webkit-appearance:none; width:10px; height:10px; border-radius:50%; background:var(--primary); cursor:pointer; }
.audio-duration { font-size:0.67em; color:var(--text-muted); display:flex; justify-content:space-between; }
.audio-waveform { display:flex; align-items:center; height:20px; gap:1.5px; }
.audio-waveform-bar { width:2.5px; border-radius:2px; background:#bbb; flex-shrink:0; }
.audio-waveform-bar.played { background:var(--primary); }

#notifBanner { position:fixed; top:20px; right:20px; background:#fff; border-left:4px solid var(--primary); padding:12px 16px; border-radius:var(--radius-md); box-shadow:var(--shadow-lg); display:none; z-index:9999; min-width:280px; max-width:340px; animation:slideDown 0.3s ease; cursor:pointer; }
@keyframes slideDown { from{transform:translateY(-60px);opacity:0} to{transform:translateY(0);opacity:1} }

.modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:2000; justify-content:center; align-items:center; backdrop-filter:blur(4px); }
.modal-content { background:#fff; padding:24px; border-radius:var(--radius-md); width:90%; max-width:460px; max-height:82vh; overflow-y:auto; box-shadow:var(--shadow-lg); }
.modal-content h3 { font-size:1.1em; font-weight:700; color:var(--text-color); margin-bottom:18px; display:flex; align-items:center; gap:8px; }
.modal-label { font-size:0.75em; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.8px; margin-bottom:6px; margin-top:14px; display:block; }
.modal-input { width:100%; padding:10px 12px; border:1.5px solid var(--border); border-radius:var(--radius-sm); outline:none; font-family:var(--font); font-size:0.9em; color:var(--text-color); transition:border-color 0.2s; }
.modal-input:focus { border-color:var(--primary); }
.modal-btn-row { display:flex; gap:10px; margin-top:18px; }
.btn-primary { flex:1; padding:11px; background:linear-gradient(135deg,var(--primary),#00c49a); color:white; border:none; border-radius:var(--radius-sm); cursor:pointer; font-weight:700; font-family:var(--font); font-size:0.9em; }
.btn-secondary { flex:1; padding:11px; background:var(--secondary); color:var(--text-muted); border:none; border-radius:var(--radius-sm); cursor:pointer; font-weight:600; font-family:var(--font); font-size:0.9em; }
.btn-danger { background:#fff0f0; color:var(--danger); border:1px solid #ffd6d6; padding:9px 14px; border-radius:var(--radius-sm); cursor:pointer; width:100%; margin-top:10px; font-size:0.88em; font-family:var(--font); font-weight:600; }
.user-select-list { margin:12px 0; max-height:200px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--radius-sm); }
#participantsList { margin-top:12px; }
.participant-item { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); font-size:0.88em; }
.admin-badge { background:#e1f5fe; color:var(--info); font-size:0.68em; padding:2px 7px; border-radius:4px; font-weight:700; }
.coadmin-badge { background:#e8f5e9; color:#2e7d32; font-size:0.68em; padding:2px 7px; border-radius:4px; font-weight:700; }
.remove-btn { color:var(--danger); cursor:pointer; font-size:0.78em; font-weight:600; margin-left:6px; }
.admin-btn { color:var(--primary); cursor:pointer; font-size:0.78em; font-weight:600; margin-left:6px; }

.settings-avatar-preview { display:flex; align-items:center; gap:16px; margin-bottom:18px; padding:16px; background:var(--secondary); border-radius:var(--radius-md); }
.avatar-lg { width:68px; height:68px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:1.8em; color:white; font-weight:700; flex-shrink:0; }
.avatar-lg img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.save-settings-btn { width:100%; padding:12px; background:linear-gradient(135deg,var(--primary),#00c49a); color:white; border:none; border-radius:var(--radius-sm); cursor:pointer; font-weight:700; font-size:0.95em; margin-top:8px; font-family:var(--font); }
.notif-toggle-row { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid #f0f0f0; font-size:0.88em; color:var(--text-color); }
.toggle-switch { position:relative; width:40px; height:22px; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#ccc; border-radius:22px; transition:0.3s; }
.toggle-slider:before { position:absolute; content:""; height:16px; width:16px; left:3px; bottom:3px; background:white; border-radius:50%; transition:0.3s; }
.toggle-switch input:checked + .toggle-slider { background:var(--primary); }
.toggle-switch input:checked + .toggle-slider:before { transform:translateX(18px); }

.photo-upload-tabs { display:flex; gap:6px; margin-bottom:10px; }
.photo-tab-btn { flex:1; padding:7px; border:1.5px solid var(--border); border-radius:var(--radius-sm); background:none; cursor:pointer; font-size:0.82em; font-family:var(--font); font-weight:600; transition:all 0.2s; }
.photo-tab-btn.active { border-color:var(--primary); background:var(--primary-light); color:var(--primary); }
.photo-upload-file-area { border:2px dashed var(--border); border-radius:var(--radius-sm); padding:20px; text-align:center; cursor:pointer; transition:border-color 0.2s; }
.photo-upload-file-area:hover { border-color:var(--primary); }
.photo-upload-file-area input { display:none; }
.photo-upload-file-area .upload-icon { font-size:2em; margin-bottom:8px; }
.photo-upload-file-area p { font-size:0.82em; color:var(--text-muted); }

#callModal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(10,20,30,0.95); z-index:8000; flex-direction:column; align-items:center; justify-content:center; }
#callModal.active { display:flex; }
#callVideoContainer { display:none; width:100%; height:100%; position:absolute; top:0; left:0; background:#000; flex-direction:column; border-radius:12px; overflow:hidden; }
#callVideoContainer.active { display:flex; }
#remoteVideos { flex:1; min-height:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); grid-auto-rows:1fr; gap:2px; background:#111; }
#remoteVideos video { max-width:100%; max-height:100%; width:auto; height:auto; margin:auto; object-fit:contain; background:#222; }
#localVideo { position:absolute; bottom:80px; right:20px; width:140px; max-height:180px; object-fit:cover; border-radius:12px; border:2px solid rgba(255,255,255,0.3); background:#333; transform:scaleX(-1); z-index:10; }
#callAvatarBig { display:none; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:96px; height:96px; border-radius:50%; background:var(--primary); align-items:center; justify-content:center; color:white; font-weight:700; overflow:hidden; animation:callPulse 2s infinite; z-index:5; }
#callAvatarBig.active { display:flex; }
#callAvatarBigText { font-size:2.4em; }
#callVideoControls { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; gap:12px; align-items:center; z-index:10; background:rgba(0,0,0,0.5); padding:10px 18px; border-radius:30px; backdrop-filter:blur(8px); }
#callVideoControls button { width:44px; height:44px; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform 0.2s; background:rgba(255,255,255,0.15); color:white; }
#callVideoControls button:hover { transform:scale(1.1); }
#callVideoControls button#callVidEndBtn { background:var(--danger); width:50px; height:50px; }
#callVideoControls button.muted { background:rgba(255,79,111,0.3); color:var(--danger); }
#callVideoControls button.cam-off { background:rgba(255,79,111,0.3); color:var(--danger); }
#callContent { display:flex; flex-direction:column; align-items:center; gap:16px; z-index:1; }
#callAvatar { width:96px; height:96px; border-radius:50%; background:var(--primary); display:flex; align-items:center; justify-content:center; font-size:2.4em; color:white; font-weight:700; overflow:hidden; animation:callPulse 2s infinite; }
#callAvatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
@keyframes callPulse { 0%,100%{box-shadow:0 0 0 0 rgba(0,168,132,0.6)} 50%{box-shadow:0 0 0 28px rgba(0,168,132,0)} }
#callName { color:white; font-size:1.4em; font-weight:700; }
#callStatus { color:rgba(255,255,255,0.65); font-size:0.92em; }
#callActions { display:flex; gap:16px; margin-top:8px; }
.call-btn { width:60px; height:60px; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform 0.2s; }
.call-btn:hover { transform:scale(1.1); }
.call-btn.accept { background:#25d366; color:white; }
.call-btn.reject, .call-btn.end { background:var(--danger); color:white; }
.call-btn.mute, .call-btn.cam { background:rgba(255,255,255,0.15); color:white; }
.call-btn.muted { background:rgba(255,79,111,0.3); color:var(--danger); }
.call-btn.cam-off { background:rgba(255,79,111,0.3); color:var(--danger); }
.call-btn.share { background:rgba(255,255,255,0.15); color:white; }
.call-btn.sharing { background:rgba(0,168,132,0.4); color:#00a884; }
.call-btn.sharing svg { animation: pulse-share 1.5s ease-in-out infinite; }
@keyframes pulse-share { 0%,100% { opacity:1; } 50% { opacity:0.5; } }
#callVideoControls button.sharing { background:rgba(0,168,132,0.4); color:#00a884; }
#incomingCallBanner { display:none; position:fixed; top:20px; right:20px; background:white; border-radius:var(--radius-lg); padding:16px 20px; box-shadow:var(--shadow-lg); z-index:7999; min-width:280px; animation:slideDown 0.3s ease; }
#incomingCallBanner.active { display:block; }
#incomingCallInfo { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.incoming-avatar { width:48px; height:48px; border-radius:50%; background:var(--primary); color:white; display:flex; align-items:center; justify-content:center; font-size:1.2em; font-weight:700; flex-shrink:0; overflow:hidden; }
.incoming-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
#incomingCallActions { display:flex; gap:10px; }
#incomingCallActions button { flex:1; padding:10px; border:none; border-radius:var(--radius-sm); font-size:0.88em; cursor:pointer; font-weight:700; font-family:var(--font); }
#acceptCallBtn { background:#25d366; color:white; }
#rejectCallBtn { background:var(--danger); color:white; }

#statusBar { padding:10px 14px 8px; border-bottom:1px solid var(--border); background:#fff; }
#statusBarTitle { font-size:0.72em; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.8px; font-weight:700; margin-bottom:10px; }
#statusAvatarsList { display:flex; gap:12px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
#statusAvatarsList::-webkit-scrollbar { display:none; }
.status-avatar-wrap { display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; flex-shrink:0; min-width:52px; }
.status-ring { width:50px; height:50px; border-radius:50%; padding:2px; background:conic-gradient(#00a884 0%,#00a884 100%); transition:all 0.2s; }
.status-ring.seen { background:conic-gradient(#c5c5c5 0%,#c5c5c5 100%); }
.status-ring.my-status { background:conic-gradient(#00a884 0%,#00a884 100%); }
.status-ring-inner { width:100%; height:100%; border-radius:50%; overflow:hidden; border:2px solid #fff; display:flex; align-items:center; justify-content:center; font-size:1.05em; font-weight:700; color:white; background:#ccc; }
.status-ring-inner img { width:100%; height:100%; object-fit:cover; }
.status-avatar-name { font-size:0.68em; color:var(--text-muted); max-width:52px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.my-status-add { position:relative; }
.my-status-add::after { content:"+"; position:absolute; bottom:0; right:0; width:18px; height:18px; background:var(--primary); border-radius:50%; border:2px solid #fff; display:flex; align-items:center; justify-content:center; font-size:12px; color:white; font-weight:700; line-height:14px; text-align:center; }

#statusViewerModal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.92); z-index:5000; flex-direction:column; align-items:center; justify-content:center; }
#statusViewerInner { width:100%; max-width:420px; height:100%; max-height:680px; position:relative; display:flex; flex-direction:column; background:#111; border-radius:var(--radius-md); overflow:hidden; }
#statusProgressBar { display:flex; gap:3px; padding:10px 10px 0; position:absolute; top:0; left:0; right:0; z-index:10; }
.status-prog-seg { flex:1; height:3px; background:rgba(255,255,255,0.3); border-radius:2px; overflow:hidden; }
.status-prog-fill { height:100%; background:#fff; width:0%; transition:width 0.1s linear; }
#statusViewerHeader { position:absolute; top:20px; left:0; right:0; padding:0 12px; display:flex; align-items:center; gap:10px; z-index:10; }
#statusViewerAvatar { width:38px; height:38px; border-radius:50%; overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1em; color:white; }
#statusViewerAvatar img { width:100%; height:100%; object-fit:cover; }
#statusViewerInfo { flex:1; }
#statusViewerName { color:#fff; font-weight:700; font-size:0.92em; }
#statusViewerTime { color:rgba(255,255,255,0.55); font-size:0.72em; }
#statusViewerClose { color:#fff; font-size:1.3em; cursor:pointer; padding:4px 8px; background:none; border:none; }
#statusViewerContent { flex:1; display:flex; align-items:center; justify-content:center; padding:20px; position:relative; z-index:10; cursor:pointer; min-height:0; overflow-y:auto; }

.status-nav-left, .status-nav-right { position:absolute; top:0; bottom:0; width:40%; cursor:pointer; z-index:5; pointer-events:none; }
.status-nav-left { left:0; } .status-nav-right { right:0; }
#statusReplyBar { padding:10px 12px; background:transparent; display:flex; align-items:center; gap:10px; border-top:1px solid rgba(255,255,255,0.1); }
#statusReplyInput { flex:1; background:rgba(255,255,255,0.12); border:none; border-radius:20px; padding:9px 16px; color:#fff; outline:none; font-size:0.88em; font-family:var(--font); }
#statusReplyInput::placeholder { color:rgba(255,255,255,0.45); }
#statusReplySend { background:var(--primary); border:none; border-radius:50%; width:38px; height:38px; color:white; font-size:1.1em; cursor:pointer; display:flex; align-items:center; justify-content:center; }
#statusViewerActions { padding:8px 12px; display:flex; gap:8px; }
#statusViewerActions button { flex:1; padding:8px; border:none; border-radius:var(--radius-sm); cursor:pointer; font-size:0.8em; font-weight:700; font-family:var(--font); }
#addAnotherStatusBtn { background:var(--primary); color:white; }
#deleteCurrentStatusBtn { background:#fff3f3; color:var(--danger); border:1px solid #ffd6d6; }
#statusViewersPanel { padding:6px 14px 10px; display:flex; flex-direction:column; gap:4px; cursor:pointer; border-top:1px solid rgba(255,255,255,0.1); }
#statusViewersToggleBtn { background:none; border:none; color:rgba(255,255,255,0.55); font-size:0.8em; cursor:pointer; text-align:left; padding:4px 0; display:flex; align-items:center; gap:6px; font-family:var(--font); }
#statusViewersListExpanded { display:none; max-height:120px; overflow-y:auto; }
.viewers-list-item { display:flex; align-items:center; gap:8px; padding:4px 0; color:rgba(255,255,255,0.8); font-size:0.78em; }
.viewers-list-avatar { width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center; font-size:0.72em; font-weight:700; overflow:hidden; flex-shrink:0; }
.viewers-list-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }

.status-type-tabs { display:flex; gap:8px; margin-bottom:16px; }
.status-type-tab { flex:1; padding:9px; border:1.5px solid var(--border); border-radius:var(--radius-sm); background:none; cursor:pointer; font-size:0.88em; font-family:var(--font); font-weight:600; transition:all 0.2s; }
.status-type-tab.active { border-color:var(--primary); background:var(--primary-light); color:var(--primary); }
#statusTextPreview { width:100%; height:110px; border-radius:var(--radius-sm); padding:12px; font-size:1em; border:1.5px solid var(--border); outline:none; resize:none; font-family:var(--font); }
#statusTextPreview:focus { border-color:var(--primary); }
.status-bg-picker { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.status-bg-swatch { width:28px; height:28px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:transform 0.15s; }
.status-bg-swatch.selected { border-color:#333; transform:scale(1.2); }
#statusImageSection { display:none; }
#statusImageUrlInput { width:100%; padding:10px 12px; border:1.5px solid var(--border); border-radius:var(--radius-sm); outline:none; font-size:0.88em; font-family:var(--font); margin-bottom:8px; }
#statusVideoSection { display:none; }
.publish-status-btn { width:100%; padding:12px; background:linear-gradient(135deg,var(--primary),#00c49a); color:white; border:none; border-radius:var(--radius-sm); cursor:pointer; font-weight:700; margin-top:12px; font-size:0.92em; font-family:var(--font); }

.channel-reactions-row { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
.channel-reaction-bubble { background:rgba(0,0,0,0.06); border:1px solid rgba(0,0,0,0.1); border-radius:12px; padding:2px 8px; font-size:0.8em; display:flex; align-items:center; gap:3px; cursor:pointer; transition:background 0.15s; }
.channel-reaction-bubble.mine { border-color:var(--primary); background:rgba(0,168,132,0.1); }
.channel-react-trigger { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--secondary); border:1px solid var(--border); cursor:pointer; font-size:0.88em; margin-top:5px; }
.channel-react-picker { display:none; gap:6px; padding:6px 10px; background:#fff; border:1px solid var(--border); border-radius:30px; box-shadow:var(--shadow-md); margin-top:4px; animation:popIn 0.15s ease; }
.channel-react-picker.open { display:flex; }
.channel-react-picker span { font-size:1.3em; cursor:pointer; transition:transform 0.1s; }
.channel-react-picker span:hover { transform:scale(1.3); }

.system-badge { background:linear-gradient(135deg,#e74c3c,#c0392b); color:white; font-size:0.58em; padding:1px 6px; border-radius:4px; font-weight:700; margin-left:4px; vertical-align:middle; }
.status-dot { width:9px; height:9px; border-radius:50%; background:#ccc; display:inline-block; margin-right:4px; }
.status-dot.online { background:#25d366; }

#termsModal .modal-content { max-width:560px; max-height:80vh; }
.terms-body { font-size:0.85em; line-height:1.65; color:var(--text-color); }
.terms-body h4 { margin:14px 0 6px; font-weight:700; color:var(--text-color); }
.terms-body p { margin-bottom:8px; color:var(--text-muted); }

#bgPermModal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:9000; justify-content:center; align-items:center; backdrop-filter:blur(4px); }
#bgPermModal.active { display:flex; }
#bgPermContent { background:white; border-radius:var(--radius-lg); padding:30px; max-width:360px; width:90%; text-align:center; }
.perm-icon { font-size:2.8em; margin-bottom:12px; }
#bgPermContent h3 { margin:0 0 10px; color:var(--text-color); font-size:1.1em; font-weight:700; }
#bgPermContent p { color:var(--text-muted); font-size:0.88em; line-height:1.5; margin-bottom:18px; }
.perm-steps { background:var(--secondary); border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:16px; text-align:left; }
.perm-steps div { font-size:0.8em; color:#444; padding:4px 0; display:flex; align-items:flex-start; gap:8px; }
.perm-steps .step-num { background:var(--primary); color:white; border-radius:50%; width:18px; height:18px; display:flex; align-items:center; justify-content:center; font-size:0.72em; font-weight:700; flex-shrink:0; margin-top:1px; }
.perm-btn-primary { width:100%; padding:12px; background:var(--primary); color:white; border:none; border-radius:var(--radius-sm); cursor:pointer; font-weight:700; font-size:0.95em; margin-bottom:8px; font-family:var(--font); }
.perm-btn-secondary { width:100%; padding:10px; background:var(--secondary); color:var(--text-muted); border:none; border-radius:var(--radius-sm); cursor:pointer; font-size:0.88em; font-family:var(--font); }

#imgPreviewModal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.88); z-index:3000; justify-content:center; align-items:center; cursor:zoom-out; }
#imgPreviewModal img { max-width:90vw; max-height:90vh; border-radius:var(--radius-sm); }

.toast { position:fixed; bottom:32px; left:50%; transform:translateX(-50%); background:#1a1a2e; color:#fff; padding:10px 22px; border-radius:22px; z-index:9999; font-size:0.88em; animation:msgFadeIn 0.3s ease; font-family:var(--font); box-shadow:var(--shadow-md); }

#updateBanner { display:none; position:fixed; top:0; left:0; right:0; background:linear-gradient(90deg,var(--primary),#00c49a); color:white; padding:12px 20px; text-align:center; z-index:9998; font-size:0.88em; font-weight:600; }
#updateBanner button { background:white; color:var(--primary); border:none; border-radius:15px; padding:4px 14px; margin-left:10px; cursor:pointer; font-weight:700; font-size:0.88em; font-family:var(--font); }

#pwaPrompt { display:none; position:fixed; bottom:80px; left:50%; transform:translateX(-50%); background:white; border-radius:var(--radius-lg); padding:16px 20px; box-shadow:var(--shadow-lg); z-index:7000; max-width:320px; width:90%; text-align:center; }
#pwaPrompt.show { display:block; animation:slideDown 0.3s ease; }
#pwaPromptActions { display:flex; gap:10px; margin-top:12px; }
#pwaPromptActions button { flex:1; padding:10px; border:none; border-radius:var(--radius-sm); cursor:pointer; font-weight:700; font-family:var(--font); }
#installPwaBtn { background:var(--primary); color:white; }
#dismissPwaBtn { background:var(--secondary); color:var(--text-muted); }

#chatNameEditInput { border:none; border-bottom:2px solid var(--primary); outline:none; font-size:0.97em; font-weight:700; color:var(--text-color); font-family:var(--font); background:transparent; width:auto; min-width:100px; max-width:200px; }

#languageGroup { position:relative; }
.searchable-select-wrap { position:relative; }
.lang-search-input { width:100%; padding:12px 14px; border:1.5px solid var(--border); border-radius:var(--radius-sm); outline:none; font-family:var(--font); font-size:0.95em; color:var(--text-color); background:#fff; transition:border-color 0.2s, box-shadow 0.2s; cursor:pointer; }
.lang-search-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,168,132,0.12); }
.lang-search-input::placeholder { color:#aaa; }
.lang-dropdown { display:none; position:absolute; top:100%; left:0; right:0; z-index:100; max-height:200px; overflow-y:auto; background:#fff; border:1.5px solid var(--border); border-top:none; border-radius:0 0 var(--radius-sm) var(--radius-sm); box-shadow:var(--shadow-md); }
.lang-dropdown.open { display:block; }
.lang-option { padding:9px 14px; cursor:pointer; font-size:0.88em; color:var(--text-color); display:flex; align-items:center; gap:8px; transition:background 0.1s; }
.lang-option:hover { background:var(--primary-light); }
.lang-option.selected { background:var(--primary-light); color:var(--primary); font-weight:600; }
.lang-option .lang-native { flex:1; }
.lang-option .lang-code { font-size:0.72em; color:var(--text-muted); min-width:36px; text-align:right; }
#plusBtn { background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;color:var(--text-muted);flex-shrink:0;transition:background 0.2s,transform 0.2s; }
#plusBtn:hover { background:rgba(0,0,0,0.06); }
#plusBtn.active { transform:rotate(45deg); color:var(--primary); }
#emojiToggle { background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;color:var(--text-muted);flex-shrink:0;transition:background 0.2s; }
#emojiToggle:hover { background:rgba(0,0,0,0.06); color:var(--primary); }

#extendedBar { display:none; position:absolute; bottom:64px; left:10px; background:#fff; border-radius:16px; box-shadow:var(--shadow-lg); padding:8px 10px; gap:6px; z-index:150; }
#extendedBar.active { display:flex; }
#extendedBar button, #extendedBar label { background:none; border:none; cursor:pointer; color:var(--text-muted); display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; transition:background 0.15s; flex-shrink:0; }
#extendedBar button:hover, #extendedBar label:hover { background:var(--secondary); }

::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#ccc; border-radius:4px; }

/* Verified badge */
.verified-badge { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; min-width:16px; min-height:16px; border-radius:50%; background:#1d9bf0; color:white; margin-left:4px; vertical-align:middle; flex-shrink:0; }
.verified-badge svg { width:10px; height:10px; display:block; }
.msg-user .verified-badge { width:14px; height:14px; min-width:14px; min-height:14px; }
.msg-user .verified-badge svg { width:9px; height:9px; }

/* Verification section in settings */
#verificationSection { margin:8px 0; }
#verificationSection button { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:10px; border:none; border-radius:var(--radius-sm); cursor:pointer; font-family:var(--font); font-weight:700; font-size:0.85em; margin-top:6px; }
.verif-request-btn { background:var(--primary); color:white; }
.verif-pending { background:var(--secondary); color:var(--text-muted); cursor:default; }
.verif-approved { background:#e8f5e9; color:#2e7d32; cursor:default; }
.verif-rejected { background:#ffebee; color:#c62828; cursor:default; }
.verif-admin-pending { background:#fff3e0; color:#e65100; border:1px solid #ffcc80; width:100%; padding:10px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.verif-admin-pending .verif-actions { display:flex; gap:6px; }
.verif-admin-pending .verif-actions button { padding:6px 12px; border:none; border-radius:var(--radius-sm); cursor:pointer; font-family:var(--font); font-weight:700; font-size:0.78em; }
.verif-admin-pending .verif-actions .approve { background:#2e7d32; color:white; }
.verif-admin-pending .verif-actions .reject { background:#c62828; color:white; }

#reportDescription { resize:vertical; min-height:80px; font-family:var(--font); }

@media (max-width: 768px) {
  #sidebar { width:100%; min-height:100%; }
  #chatArea { display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:500; flex-direction:column; }
  #appContainer { width:100vw; height:100vh; height:100dvh; border-radius:0; }
  #fab { bottom:76px; }
  .message { max-width:85%; }
  #extendedBar { bottom:62px; left:6px; padding:6px 8px; }
  #extendedBar button, #extendedBar label { width:38px; height:38px; }
  #chatMessages { padding:12px; }
  .chat-name-txt { max-width:140px; }
  .modal-content { max-width:94%; max-height:90vh; padding:18px; }
  #statusViewerInner { max-height:100vh; border-radius:0; }
  .message-wrapper { max-width:100%; }
}
.music-search-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; cursor:pointer; transition:background 0.15s; }
.music-search-item:hover { background:var(--secondary); }
.music-search-item:active { background:rgba(0,0,0,0.08); }
.music-search-item-info { flex:1; min-width:0; }
.music-search-item-title { font-size:0.88em; font-weight:600; color:var(--text-color); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.music-search-item-artist { font-size:0.75em; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Overflow fixes */
img, video, iframe, svg { max-width:100%; height:auto; }
#appContainer { max-width:100vw; }
#chatList .chat-item, #channelList .channel-item { max-width:100%; box-sizing:border-box; }
#activeChatName { max-width:100%; }
#chatMessages .message-wrapper { max-width:100%; }
.header-actions { flex-shrink:0; }
#chatHeaderInfo { min-width:0; overflow:hidden; }
#sidebar { min-width:0; }
input, textarea, select { max-width:100%; box-sizing:border-box; }
#forwardList .chat-item { max-width:100%; }
#settingsModal .modal-content, #groupInfoModal .modal-content, #channelInfoModal .modal-content { max-width:94vw; }
@media(max-width:480px){
  #auth { max-width:100%; margin:10px; padding:24px 20px; }
  .chat-input-row { gap:6px; padding:8px 10px; }
  #messageInput { font-size:0.85em; padding:8px 12px; }
  #plusBtn, #emojiToggle, #micBtn { width:32px; height:32px; }
  #plusBtn svg, #emojiToggle svg, #micBtn svg { width:18px; height:18px; }
  #sendBtn { width:34px; height:34px; }
  #sendBtn svg { width:13px; height:13px; }
}

/* ── Coupe du Monde 26 ── */
#wc26List { flex:1; overflow-y:auto; display:none; min-height:0; -webkit-overflow-scrolling:touch; }
#wc26List.active { display:block; }
#worldProsList { flex:1; overflow-y:auto; display:none; min-height:0; }
#worldProsList.active { display:block; }
#liveprosList { flex:1; overflow:hidden; display:none; min-height:0; flex-direction:column; }
#liveprosList.active { display:flex; }
#liveprosHeader { flex-shrink:0; }
.wc26-pred-btn:hover { border-color:var(--primary) !important; color:var(--primary) !important; background:var(--primary-light); }
#wc26Header { padding:10px 12px; border-bottom:1px solid var(--border); background:#fff; }
#wc26TitleRow { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
#wc26Title { font-weight:700; font-size:0.95em; color:var(--text-color); }
#wc26RefreshBtn { background:none; border:none; cursor:pointer; font-size:1.1em; color:var(--text-muted); padding:2px 6px; border-radius:6px; transition:background 0.15s; }
#wc26RefreshBtn:hover { background:var(--secondary); color:var(--text-color); }
#wc26RefreshBtn.spinning { animation:wc26Spin 0.7s linear infinite; }
@keyframes wc26Spin { to{transform:rotate(360deg)} }
#wc26Stats { display:flex; gap:8px; margin-bottom:6px; flex-wrap:wrap; }
.wc26-stat { font-size:0.7em; color:var(--text-muted); font-weight:600; letter-spacing:0.3px; }
#wc26Tabs { display:flex; gap:3px; margin-bottom:6px; overflow-x:auto; }
.wc26-tab { padding:4px 10px; border-radius:6px; border:1px solid transparent; font-size:0.7em; font-weight:600; cursor:pointer; color:var(--text-muted); background:transparent; transition:all 0.15s; font-family:var(--font); white-space:nowrap; }
.wc26-tab:hover { color:var(--text-color); }
.wc26-tab.on { background:var(--primary-light); border-color:var(--primary); color:var(--primary); }
#wc26Groups { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:4px; }
.wc26-grp-btn { padding:3px 8px; border-radius:5px; border:1px solid var(--border); background:var(--secondary); color:var(--text-muted); font-size:0.65em; cursor:pointer; font-family:var(--font); transition:all 0.15s; }
.wc26-grp-btn:hover { border-color:var(--border2); color:var(--text-color); }
.wc26-grp-btn.on { background:var(--primary-light); border-color:var(--primary); color:var(--primary); }
#wc26Content { padding:8px 10px; flex:1; overflow-y:auto; }
#wc26Map { flex:1; min-height:200px; border-radius:8px; margin:8px; z-index:0; position:relative; overflow:hidden; background:#000; }
#wc26Map canvas { display:block; border-radius:8px; }
.wc26-map-popup { position:absolute; bottom:16px; left:16px; right:16px; background:var(--bg-card); border:1px solid var(--border-color); border-radius:10px; padding:10px; box-shadow:0 4px 20px rgba(0,0,0,0.3); max-height:240px; overflow-y:auto; z-index:10; font-family:var(--font); }
.wc26-loading { text-align:center; padding:40px 10px; }
.wc26-spinner { width:28px; height:28px; border:2px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:wc26Spin 0.7s linear infinite; margin:0 auto 12px; }
.wc26-loading p { color:var(--text-muted); font-size:0.78rem; }
.wc26-empty { text-align:center; padding:30px 10px; color:var(--text-muted); font-size:0.82rem; }
.wc26-error { background:rgba(255,64,96,0.08); border:1px solid rgba(255,64,96,0.2); border-radius:8px; padding:12px 16px; color:var(--danger); font-size:0.78rem; display:flex; align-items:center; gap:8px; }
.wc26-card { background:var(--surface, #f7f9fb); border:1px solid var(--border); border-radius:10px; padding:10px 12px; margin-bottom:5px; position:relative; overflow:hidden; cursor:default; transition:border-color 0.15s; }
.wc26-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:transparent; }
.wc26-card.is-live::before { background:#00ff7f; }
.wc26-card.is-upcoming::before { background:var(--primary); }
.wc26-card.is-done::before { background:var(--text-muted); }
.wc26-card.is-friendly.is-upcoming::before { background:#ff9800; }
.wc26-card.is-friendly.is-live::before { background:#ff5722; }
.wc26-card.is-friendly.is-done::before { background:#9e9e9e; }
.wc26-card.is-friendly { border-left:3px solid transparent; }
.wc26-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; gap:4px; }
.wc26-card-comp { font-size:0.62rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wc26-card-grp { font-size:0.6rem; background:var(--primary-light); color:var(--primary); border-radius:4px; padding:1px 6px; flex-shrink:0; }
.wc26-card-status { font-size:0.65rem; font-weight:700; padding:2px 8px; border-radius:5px; flex-shrink:0; white-space:nowrap; }
.wc26-s-live { background:rgba(0,255,127,0.12); color:#00aa5e; border:1px solid rgba(0,255,127,0.2); }
.wc26-s-done { background:rgba(97,97,97,0.12); color:var(--text-muted); border:1px solid rgba(97,97,97,0.15); }
.wc26-s-upcoming { background:rgba(0,168,132,0.1); color:var(--primary); border:1px solid rgba(0,168,132,0.15); }
.wc26-card-teams { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:6px; }
.wc26-team { display:flex; align-items:center; gap:6px; }
.wc26-team.away { flex-direction:row-reverse; text-align:right; }
.wc26-flag { font-size:1.1rem; flex-shrink:0; }
.wc26-flag-img { width:20px; height:15px; vertical-align:middle; border-radius:2px; object-fit:cover; flex-shrink:0; display:inline-block; box-shadow:0 1px 2px rgba(0,0,0,0.1); }
.wc26-tname { font-size:0.82rem; font-weight:600; color:var(--text-color); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wc26-tname.win { color:var(--primary); }
.wc26-scores { display:flex; align-items:center; gap:3px; flex-shrink:0; }
.wc26-sc { font-weight:700; font-size:1.3rem; color:var(--text-color); line-height:1; min-width:18px; text-align:center; }
.wc26-sc.win { color:var(--primary); }
.wc26-sc-sep { font-weight:700; font-size:1rem; color:var(--border); }
.wc26-sc-vs { font-size:0.7rem; color:var(--text-muted); font-weight:600; }
.wc26-card-foot { display:flex; align-items:center; justify-content:space-between; margin-top:5px; padding-top:5px; border-top:1px solid var(--border); font-size:0.62rem; color:var(--text-muted); gap:4px; }
.wc26-card-venue { display:flex; align-items:center; gap:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.wc26-card-dt { font-family:'JetBrains Mono',monospace; flex-shrink:0; }
.wc26-countdown { font-size:0.65rem; color:var(--primary); font-weight:600; }

/* ── Music Pros ── */
#musicProsList { flex:1; overflow-y:auto; display:none; min-height:0; background:#fff; }
#musicProsList.active { display:block; }
.mp-header { padding:12px 14px; border-bottom:1px solid var(--border); background:var(--bg-header); }
.mp-header-title { font-weight:700; font-size:0.95em; color:var(--text-color); display:flex; align-items:center; gap:6px; }
.mp-tabs { display:flex; gap:4px; margin-top:8px; }
.mp-tab { padding:6px 14px; border-radius:8px; border:1px solid transparent; font-size:0.78em; font-weight:600; cursor:pointer; color:var(--text-muted); background:transparent; transition:all 0.15s; font-family:var(--font); }
.mp-tab:hover { color:var(--text-color); background:var(--secondary); }
.mp-tab.active { background:var(--primary-light); border-color:var(--primary); color:var(--primary); }
.mp-content { flex:1; overflow-y:auto; padding:8px; }
.mp-pane { display:none; }
.mp-pane.active { display:block; }

/* Radio stations grid */
.mp-radio-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:4px; }
.mp-radio-card { display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 8px; border-radius:12px; border:1px solid var(--border); cursor:pointer; transition:all 0.15s; background:#fff; }
.mp-radio-card:hover { border-color:var(--primary); background:var(--primary-light); }
.mp-radio-card.active { border-color:var(--primary); background:var(--primary-light); box-shadow:0 0 0 2px rgba(0,168,132,0.15); }
.mp-radio-card img { width:48px; height:48px; border-radius:50%; object-fit:cover; }
.mp-radio-card .mp-radio-name { font-size:0.75em; font-weight:600; color:var(--text-color); text-align:center; }
.mp-radio-card .mp-radio-playing { font-size:0.6em; color:var(--primary); display:none; align-items:center; gap:3px; }
.mp-radio-card.active .mp-radio-playing { display:flex; }

/* iTunes search */
.mp-search-bar { display:flex; gap:6px; margin-bottom:10px; }
.mp-search-input { flex:1; padding:9px 12px; border:1.5px solid var(--border); border-radius:var(--radius-sm); outline:none; font-family:var(--font); font-size:0.85em; }
.mp-search-input:focus { border-color:var(--primary); }
.mp-search-btn { padding:9px 14px; background:var(--primary); color:white; border:none; border-radius:var(--radius-sm); cursor:pointer; font-family:var(--font); }
.mp-search-result { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; cursor:pointer; transition:background 0.15s; }
.mp-search-result:hover { background:var(--secondary); }
.mp-search-result img { width:40px; height:40px; border-radius:6px; object-fit:cover; flex-shrink:0; }
.mp-search-result-info { flex:1; min-width:0; }
.mp-search-result-title { font-size:0.85em; font-weight:600; color:var(--text-color); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-search-result-artist { font-size:0.72em; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-search-result-add { background:none; border:none; color:var(--primary); cursor:pointer; padding:4px 8px; border-radius:6px; font-size:0.85em; font-weight:600; flex-shrink:0; transition:background 0.15s; }
.mp-search-result-add:hover { background:rgba(0,168,132,0.1); }

/* Playlists */
.mp-playlists-header { display:flex; align-items:center; justify-content:space-between; padding:6px 4px 10px; }
.mp-playlists-title { font-size:0.78em; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; }
.mp-create-playlist-btn { padding:6px 12px; background:var(--primary); color:white; border:none; border-radius:var(--radius-sm); cursor:pointer; font-size:0.75em; font-weight:700; font-family:var(--font); }
.mp-playlist-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; cursor:pointer; transition:background 0.15s; border-bottom:1px solid var(--border); }
.mp-playlist-item:hover { background:var(--secondary); }
.mp-playlist-icon { width:36px; height:36px; border-radius:8px; background:linear-gradient(135deg,var(--primary),var(--accent)); display:flex; align-items:center; justify-content:center; color:white; font-size:1em; flex-shrink:0; }
.mp-playlist-info { flex:1; min-width:0; }
.mp-playlist-name { font-size:0.88em; font-weight:600; color:var(--text-color); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-playlist-count { font-size:0.7em; color:var(--text-muted); }
.mp-playlist-tracks { flex:1; overflow-y:auto; padding:4px; }
.mp-playlist-track { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; border-bottom:1px solid var(--border); }
.mp-playlist-track:last-child { border-bottom:none; }
.mp-playlist-track-num { width:20px; font-size:0.72em; color:var(--text-muted); text-align:center; flex-shrink:0; }
.mp-playlist-track-img { width:36px; height:36px; border-radius:6px; object-fit:cover; flex-shrink:0; }
.mp-playlist-track-info { flex:1; min-width:0; }
.mp-playlist-track-title { font-size:0.82em; font-weight:600; color:var(--text-color); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-playlist-track-artist { font-size:0.7em; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-playlist-track-remove { background:none; border:none; color:var(--danger); cursor:pointer; padding:4px; font-size:0.82em; border-radius:50%; width:28px; height:28px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mp-playlist-track-remove:hover { background:rgba(231,76,60,0.1); }
.mp-playlist-actions { display:flex; gap:6px; padding:10px 4px; }
.mp-playlist-btn { flex:1; padding:8px; border:none; border-radius:var(--radius-sm); cursor:pointer; font-weight:700; font-size:0.78em; font-family:var(--font); display:flex; align-items:center; justify-content:center; gap:4px; }
.mp-playlist-btn.play { background:var(--primary); color:white; }
.mp-playlist-btn.share { background:var(--secondary); color:var(--text-muted); }
.mp-playlist-btn.back { background:var(--secondary); color:var(--text-muted); }

/* Expanded Player */
#expandedPlayer { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:linear-gradient(160deg,#0d0d0d 0%,#1a0a0a 50%,#0d0d0d 100%); z-index:10000; flex-direction:column; align-items:center; justify-content:center; color:white; }
#expandedPlayer.active { display:flex; }
#expandedPlayer[data-theme="dark"] { background:linear-gradient(160deg,#0d0d0d 0%,#1a0a0a 50%,#0d0d0d 100%); }
.ep-close { position:absolute; top:16px; left:16px; width:36px; height:36px; border-radius:50%; border:none; background:rgba(255,255,255,0.1); color:white; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1.1em; transition:background 0.2s; z-index:10; }
.ep-close:hover { background:rgba(255,255,255,0.2); }
.ep-artwork { width:280px; height:280px; border-radius:16px; object-fit:cover; box-shadow:0 16px 48px rgba(0,0,0,0.5); margin-bottom:24px; }
.ep-artwork-placeholder { width:280px; height:280px; border-radius:16px; background:linear-gradient(135deg,#333,#555); display:flex; align-items:center; justify-content:center; font-size:4em; margin-bottom:24px; box-shadow:0 16px 48px rgba(0,0,0,0.5); }
.ep-info { text-align:center; margin-bottom:20px; width:100%; max-width:360px; }
.ep-title { font-size:1.15em; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ep-artist { font-size:0.85em; color:rgba(255,255,255,0.6); margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ep-progress-wrap { width:100%; max-width:360px; height:3px; background:rgba(255,255,255,0.15); border-radius:2px; cursor:pointer; position:relative; margin-bottom:6px; }
.ep-progress-fill { height:100%; background:var(--primary); border-radius:2px; width:0%; transition:width 0.2s; }
.ep-time-row { display:flex; justify-content:space-between; width:100%; max-width:360px; font-size:0.65em; color:rgba(255,255,255,0.5); margin-bottom:16px; }
.ep-controls { display:flex; align-items:center; gap:24px; }
.ep-ctrl-btn { background:none; border:none; color:white; cursor:pointer; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
.ep-ctrl-btn:hover { transform:scale(1.1); }
.ep-ctrl-btn:active { transform:scale(0.95); }
.ep-ctrl-btn.ep-play { width:60px; height:60px; background:rgba(255,255,255,0.15); backdrop-filter:blur(4px); }
.ep-ctrl-btn.ep-play:hover { background:rgba(255,255,255,0.2); }
.ep-ctrl-btn.ep-prev svg, .ep-ctrl-btn.ep-next svg { width:20px; height:20px; }
.ep-ctrl-btn.ep-play svg { width:24px; height:24px; }
.ep-source { font-size:0.65em; color:rgba(255,255,255,0.3); margin-top:24px; display:flex; align-items:center; gap:4px; }

@media(max-width:480px){
  .ep-artwork, .ep-artwork-placeholder { width:220px; height:220px; }
  .ep-controls { gap:18px; }
  .ep-ctrl-btn.ep-play { width:52px; height:52px; }
}

/* ===== BUBBLE THEMES ===== */
.bubble-theme-btn { position:relative; }
.bubble-theme-btn svg { pointer-events:none; }
.bubble-theme-popup { position:absolute; top:calc(100% + 6px); right:0; background:var(--bg-card); border:1px solid var(--border-color); border-radius:10px; box-shadow:0 4px 16px rgba(0,0,0,0.15); padding:6px; display:none; z-index:100; min-width:160px; }
.bubble-theme-popup.open { display:block; }
.bubble-theme-option { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:6px; cursor:pointer; font-size:0.8em; color:var(--text-color); transition:background 0.15s; border:none; background:none; width:100%; text-align:left; font-family:var(--font); }
.bubble-theme-option:hover { background:rgba(0,0,0,0.06); }
.bubble-theme-option.active { background:rgba(0,168,132,0.1); color:var(--primary); font-weight:600; }

/* Modern */
#chatMessages.theme-modern .msg-own { border-radius:8px; border-bottom-right-radius:3px; border-left-color:var(--primary); }
#chatMessages.theme-modern .msg-other { border-radius:8px; border-bottom-left-radius:3px; border-left-color:var(--accent); }

/* Outline */
#chatMessages.theme-outline .message { border-left-width:0; padding-left:12px; }
#chatMessages.theme-outline .msg-own { background:transparent; border:2px solid var(--primary); border-radius:12px; box-shadow:none; }
#chatMessages.theme-outline .msg-other { background:transparent; border:2px solid var(--border-color); border-radius:12px; box-shadow:none; }

/* Soft */
#chatMessages.theme-soft .msg-own { border-radius:18px; border-bottom-right-radius:4px; border-left-color:var(--primary); }
#chatMessages.theme-soft .msg-other { border-radius:18px; border-bottom-left-radius:4px; border-left-color:var(--accent); }

/* Compact */
#chatMessages.theme-compact .message { padding:5px 10px 5px 7px; max-width:65%; }
#chatMessages.theme-compact .msg-own { border-radius:7px; border-bottom-right-radius:2px; border-left-color:var(--primary); }
#chatMessages.theme-compact .msg-other { border-radius:7px; border-bottom-left-radius:2px; border-left-color:var(--accent); }

/* Preview bubbles for theme selector */
.bubble-theme-preview { width:28px; height:20px; flex-shrink:0; display:flex; flex-direction:column; gap:2px; justify-content:center; padding:2px; }
.preview-bubble { height:6px; border-radius:4px; transition:all 0.3s ease; }
.preview-own { width:18px; background:var(--primary); align-self:flex-end; border-left:2px solid var(--primary); }
.preview-other { width:14px; background:var(--other-msg); align-self:flex-start; border-left:2px solid var(--accent); }
.bubble-theme-option[data-theme="outline"] .preview-own { background:transparent; border:1px solid var(--primary); border-left-width:0; }
.bubble-theme-option[data-theme="outline"] .preview-other { background:transparent; border:1px solid var(--border-color); border-left-width:0; }
.bubble-theme-option[data-theme="soft"] .preview-bubble { border-radius:8px; }
.bubble-theme-option[data-theme="compact"] .preview-bubble { height:4px; }

/* Face Modal */
#faceModal { font-family:var(--font); }
#faceModal video { transition:border-color 0.3s; }
#faceModal video.detected { border-color:#25d366 !important; }
#faceLoginBtn { display:none; width:100%; padding:11px; border:none; border-radius:var(--radius-sm); cursor:pointer; font-weight:600; font-family:var(--font); align-items:center; justify-content:center; }
#faceLoginBtn svg { flex-shrink:0; }
#biometricSection .btn-save { background:var(--primary); color:white; }