:root{--bg:#0f1621;--panel:#17212b;--panel2:#232e3c;--text1:#e1e8f0;--text2:#9aacbe;--text3:#708499;--border:#0f1621;--hover:#202b36;--bubble-in:#182533;--bubble-out:#2b5278;--accent:#5288c1;--radius:12px;}
*{box-sizing:border-box;margin:0;padding:0;}
#messenger-root{width:100%;height:600px;font-family:'Roboto',sans-serif;font-size:14px;color:var(--text1);background:var(--bg);border-radius:var(--radius);overflow:hidden;}
.msnr-app{display:flex;height:100%;}
.msnr-sidebar{width:340px;min-width:260px;display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--border);}
.msnr-chat-panel{flex:1;display:flex;flex-direction:column;background:var(--bg);}
.msnr-sidebar-header{display:flex;align-items:center;gap:8px;padding:10px 12px;height:56px;background:var(--panel);border-bottom:1px solid var(--border);}
.msnr-sidebar-header-title{flex:1;font-size:18px;font-weight:500;}
.msnr-logo{background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.msnr-search{background:var(--bg);border:none;outline:none;color:var(--text1);padding:8px 14px;font-size:14px;border-radius:20px;margin:8px 12px;width:calc(100% - 24px);}
.msnr-search::placeholder{color:var(--text3);}
.msnr-chat-list{flex:1;overflow-y:auto;}
.msnr-chat-list::-webkit-scrollbar{width:4px;}
.msnr-chat-list::-webkit-scrollbar-thumb{background:var(--panel2);border-radius:2px;}
.msnr-chat-item{display:flex;align-items:center;gap:12px;padding:8px 12px;cursor:pointer;transition:background .12s;}
.msnr-chat-item:hover{background:var(--hover);}
.msnr-chat-item.active{background:#1f3040;}
.msnr-chat-meta{flex:1;min-width:0;}
.msnr-chat-top{display:flex;justify-content:space-between;align-items:baseline;}
.msnr-chat-name{font-size:15px;font-weight:500;color:var(--text1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;}
.msnr-chat-time{font-size:12px;color:var(--text3);flex-shrink:0;}
.msnr-chat-preview{font-size:13px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
.msnr-empty-chats{padding:24px;text-align:center;color:var(--text3);font-size:13px;line-height:1.6;}
.msnr-avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;color:#fff;flex-shrink:0;}
.msnr-chat-header{display:flex;align-items:center;gap:10px;padding:0 12px;height:56px;background:var(--panel);border-bottom:1px solid var(--border);flex-shrink:0;}
.msnr-peer-info{flex:1;min-width:0;}
.msnr-peer-name{font-size:16px;font-weight:500;display:block;}
.msnr-peer-status{font-size:13px;color:var(--accent);}
.msnr-header-actions{display:flex;gap:2px;}
.msnr-icon-btn{background:none;border:none;cursor:pointer;color:var(--text2);padding:8px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s;}
.msnr-icon-btn:hover{background:var(--hover);color:var(--text1);}
.msnr-icon-btn svg{width:22px;height:22px;fill:currentColor;}
.msnr-back-btn{display:none;}
.msnr-messages{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:2px;background:var(--bg);}
.msnr-messages::-webkit-scrollbar{width:4px;}
.msnr-messages::-webkit-scrollbar-thumb{background:var(--panel2);border-radius:2px;}
.msnr-no-msgs{text-align:center;padding:40px;color:var(--text3);font-size:13px;}
.msnr-msg{display:flex;flex-direction:column;max-width:72%;}
.msnr-msg.out{align-self:flex-end;align-items:flex-end;}
.msnr-msg.in{align-self:flex-start;align-items:flex-start;}
.msnr-bubble{padding:8px 12px;border-radius:18px;font-size:14px;line-height:1.45;word-break:break-word;}
.msnr-msg.out .msnr-bubble{background:var(--bubble-out);border-bottom-right-radius:4px;}
.msnr-msg.in .msnr-bubble{background:var(--bubble-in);border-bottom-left-radius:4px;}
.msnr-msg-time{font-size:11px;color:var(--text3);margin-top:2px;display:flex;align-items:center;gap:4px;}
.msnr-msg-check{color:#8ba8c4;font-size:12px;}
.msnr-msg-check.delivered{color:var(--accent);}
.msnr-date-divider{display:flex;align-items:center;margin:12px 0;}
.msnr-date-divider span{background:rgba(23,33,43,.9);color:var(--text3);font-size:12px;padding:3px 10px;border-radius:10px;margin:auto;}

/* Voice message bubble */
.msnr-voice-bubble{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:18px;min-width:200px;max-width:280px;cursor:pointer;}
.msnr-msg.out .msnr-voice-bubble{background:var(--bubble-out);border-bottom-right-radius:4px;}
.msnr-msg.in .msnr-voice-bubble{background:var(--bubble-in);border-bottom-left-radius:4px;}
.msnr-voice-play{width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s;}
.msnr-msg.out .msnr-voice-play{background:rgba(255,255,255,0.15);}
.msnr-msg.in  .msnr-voice-play{background:rgba(255,255,255,0.1);}
.msnr-voice-play:hover{background:rgba(255,255,255,0.25)!important;}
.msnr-voice-play svg{width:18px;height:18px;fill:#fff;}
.msnr-voice-info{flex:1;min-width:0;}
.msnr-voice-waveform{height:24px;display:flex;align-items:center;gap:1.5px;margin-bottom:3px;}
.msnr-voice-bar{width:3px;border-radius:2px;background:rgba(255,255,255,0.35);transition:background .2s;}
.msnr-voice-bar.played{background:rgba(255,255,255,0.75);}
.msnr-voice-dur{font-size:11px;color:var(--text3);}

/* Voice record button */
.msnr-btn-voice{background:none;border:none;cursor:pointer;color:var(--text2);padding:6px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s;flex-shrink:0;}
.msnr-btn-voice:hover{background:var(--hover);color:var(--text1);}
.msnr-btn-voice svg{width:22px;height:22px;fill:currentColor;}
.msnr-btn-voice.recording{color:#e53935;animation:msnr-pulse 1s infinite;}
@keyframes msnr-pulse{0%,100%{opacity:1;}50%{opacity:.4;}}

/* Recording indicator */
.msnr-recording-indicator{display:flex;align-items:center;gap:8px;padding:6px 12px;background:rgba(229,57,53,.12);border-radius:20px;font-size:13px;color:#e57373;}
.msnr-rec-dot{width:8px;height:8px;border-radius:50%;background:#e53935;animation:msnr-pulse 1s infinite;}

.msnr-input-area{display:flex;align-items:flex-end;gap:4px;padding:8px 12px;background:var(--panel);border-top:1px solid var(--border);flex-shrink:0;}
.msnr-input-wrap{flex:1;}
.msnr-input{width:100%;background:var(--bg);border:none;outline:none;color:var(--text1);padding:10px 14px;font-size:14px;border-radius:22px;resize:none;line-height:1.4;max-height:100px;overflow-y:auto;font-family:inherit;}
.msnr-input::placeholder{color:var(--text3);}
.msnr-btn-send{background:var(--accent);border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .12s;}
.msnr-btn-send:hover{background:#3d72ab;}
.msnr-btn-send svg{width:20px;height:20px;fill:#fff;}
.msnr-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text3);gap:16px;}
.msnr-empty svg{opacity:.3;}

/* QR screen */
.msnr-qr-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:32px;background:var(--panel);gap:16px;}
.msnr-qr-screen h2{font-size:22px;font-weight:500;color:var(--text1);}
.msnr-qr-box{background:#fff;padding:12px;border-radius:12px;position:relative;display:inline-block;}
.msnr-qr-spinner{width:144px;height:144px;display:flex;align-items:center;justify-content:center;}
.msnr-qr-spinner::after{content:'';width:32px;height:32px;border:3px solid var(--accent);border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.msnr-qr-steps{list-style:none;display:flex;flex-direction:column;gap:8px;}
.msnr-qr-steps li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text2);}
.msnr-qr-steps .n{background:var(--accent);color:#fff;border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;}

/* Settings modal */
.msnr-settings-overlay{position:absolute;inset:0;z-index:100;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;}
.msnr-settings-box{background:var(--panel);border-radius:16px;padding:28px 32px;width:340px;max-width:92%;display:flex;flex-direction:column;gap:16px;box-shadow:0 8px 40px rgba(0,0,0,.5);animation:msnr-pop .2s ease;}
.msnr-settings-box h3{font-size:17px;font-weight:600;color:var(--text1);margin:0;}
.msnr-settings-row{display:flex;flex-direction:column;gap:4px;}
.msnr-settings-label{font-size:12px;color:var(--accent);text-transform:uppercase;letter-spacing:.05em;}
.msnr-settings-value{font-size:14px;color:var(--text2);word-break:break-all;}
.msnr-settings-btn{background:var(--panel2);border:none;color:var(--text1);padding:10px 0;border-radius:22px;font-size:14px;cursor:pointer;transition:background .12s;width:100%;}
.msnr-settings-btn:hover{background:var(--hover);}
.msnr-settings-btn.danger{background:#7f2020;}
.msnr-settings-btn.danger:hover{background:#9e2a2a;}
.msnr-settings-close{align-self:flex-end;background:none;border:none;color:var(--text3);cursor:pointer;font-size:20px;padding:0;margin-top:-8px;}
@keyframes msnr-pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}

/* Incoming call */
#msnr-incoming-call{display:none;position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.75);align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.msnr-incoming-inner{background:var(--panel);border-radius:20px;padding:32px 40px;display:flex;flex-direction:column;align-items:center;gap:12px;min-width:260px;box-shadow:0 8px 40px rgba(0,0,0,.5);animation:msnr-pop .25s ease;}
.msnr-incoming-avatar{width:72px;height:72px;border-radius:50%;background:var(--accent);color:#fff;font-size:28px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.msnr-incoming-name{font-size:20px;font-weight:600;color:var(--text1);}
.msnr-incoming-type{font-size:14px;color:var(--text2);}

/* Active call */
#msnr-active-call{display:none;position:fixed;inset:0;z-index:9000;background:#0f1621;align-items:center;justify-content:center;}
.msnr-active-call-inner{width:100%;max-width:500px;display:flex;flex-direction:column;align-items:center;gap:24px;padding:48px 32px;position:relative;}
.msnr-active-call-inner.msnr-active-call-video{padding:0;height:100vh;max-width:100%;justify-content:flex-end;}
.msnr-call-avatar-big{width:96px;height:96px;border-radius:50%;background:var(--accent);color:#fff;font-size:36px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.msnr-call-name{font-size:22px;font-weight:600;color:var(--text1);}
.msnr-call-status{font-size:14px;color:var(--text2);margin-top:4px;}
.msnr-video-remote{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;}
.msnr-video-local{position:absolute;bottom:100px;right:16px;width:100px;height:150px;object-fit:cover;border-radius:12px;border:2px solid rgba(255,255,255,.2);z-index:2;}
.msnr-call-actions,.msnr-call-controls{display:flex;gap:20px;align-items:center;justify-content:center;}
.msnr-call-controls{padding:16px 32px 32px;background:rgba(15,22,33,.85);border-radius:24px;backdrop-filter:blur(8px);z-index:3;width:100%;}
.msnr-call-btn{border:none;cursor:pointer;border-radius:50%;width:58px;height:58px;display:flex;align-items:center;justify-content:center;transition:transform .12s,background .12s;}
.msnr-call-btn:hover{transform:scale(1.08);}
.msnr-call-btn svg{width:26px;height:26px;fill:#fff;}
.msnr-call-accept{background:#0ac630;}
.msnr-call-accept:hover{background:#08b329;}
.msnr-call-reject,.msnr-call-hangup{background:#e53935;}
.msnr-call-reject svg,.msnr-call-hangup svg{transform:rotate(135deg);}
.msnr-call-reject:hover,.msnr-call-hangup:hover{background:#c62828;}
.msnr-call-ctrl{background:rgba(255,255,255,.15);}
.msnr-call-ctrl:hover{background:rgba(255,255,255,.25);}
.msnr-call-btn-active{background:rgba(255,255,255,.08)!important;}
.msnr-call-btn-active svg{opacity:.45;}

@media(max-width:680px){
  .msnr-sidebar{width:100%;display:flex;}
  .msnr-chat-panel{display:none;}
  .msnr-app.chat-open .msnr-sidebar{display:none;}
  .msnr-app.chat-open .msnr-chat-panel{display:flex;}
  .msnr-back-btn{display:flex!important;}
}