:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#111;background:#f2f4f7}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:#f2f4f7}button,input{font:inherit}
body{overflow:hidden}.app{height:100dvh;display:flex;flex-direction:column}.topbar{height:62px;flex:0 0 62px;background:#fff;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;padding:0 16px;gap:12px;z-index:20}
.back{text-decoration:none;color:#111;font-size:29px;line-height:1}.brand{min-width:0}.brand b{display:block;font-size:17px}.brand small{display:none}
.icon-btn,.new-chat,.back-chat,.attach{border:0;background:transparent;cursor:pointer}.icon-btn{margin-left:auto;font-size:23px;color:#555}.messenger-shell{flex:1;min-height:0;display:flex;max-width:1200px;width:100%;margin:0 auto;background:#fff;box-shadow:0 0 25px rgba(0,0,0,.04)}
.sidebar{width:370px;flex:0 0 370px;border-right:1px solid #e5e7eb;display:flex;flex-direction:column;min-height:0;background:#fff}.sidebar-head{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 16px}.sidebar-head b{font-size:22px}.sidebar-head small{margin-left:7px;color:#8b95a1}.new-chat{font-size:28px;color:#111}.search{margin:0 12px 10px;background:#f1f3f5;border-radius:12px;padding:0 12px;height:43px;display:flex;align-items:center;gap:7px}.search span{font-size:22px;color:#7a838d}.search input{border:0;background:transparent;outline:0;width:100%;font-size:14px}.people{overflow:auto;flex:1}.person{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid #f0f1f2;cursor:pointer;min-height:72px}.person:hover{background:#f7f8f9}.person.active{background:#eef1f4}.avatar{width:50px;height:50px;border-radius:50%;object-fit:cover;background:#ddd;flex:0 0 50px}.person-main{min-width:0;flex:1}.person-top{display:flex;justify-content:space-between;gap:8px}.person b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.person-time{font-size:10px;color:#8b95a1;white-space:nowrap}.person-preview{display:flex;align-items:center;gap:5px;margin-top:4px}.person-preview small{color:#7a838d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dot{display:none}.unread{background:#111;color:#fff;border-radius:12px;min-width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center;font-size:10px;padding:0 5px}
.empty{padding:35px 20px;text-align:center;color:#7a838d;font-size:13px}.chat-panel{flex:1;min-width:0;position:relative;background:#eef1f4;display:flex;flex-direction:column} #chatView:not([hidden]){display:flex;flex:1;min-height:0;flex-direction:column}.welcome{margin:auto;text-align:center;color:#6b7280;padding:25px}.welcome-icon{font-size:50px}.welcome h2{color:#222;margin:12px 0 7px}.welcome p{margin:0;font-size:14px}.chatHead{height:64px;flex:0 0 64px;background:#fff;border-bottom:1px solid #e1e5e9;display:flex;align-items:center;padding:0 12px;gap:10px;z-index:3}.back-chat{font-size:25px;display:none}.big{width:42px;height:42px;flex-basis:42px}.peer-info{min-width:0}.peer-info b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.peer-info small{display:block;color:#71808f;font-size:11px;margin-top:2px}.chatHead .icon-btn{margin-left:auto}.messages{flex:1;overflow:auto;padding:18px max(18px,4vw) 12px;display:flex;flex-direction:column;gap:6px;scroll-behavior:smooth}.bubble{position:relative;max-width:min(72%,520px);padding:8px 38px 8px 11px;border-radius:16px;line-height:1.4;font-size:14px;white-space:pre-wrap;word-break:break-word;box-shadow:0 1px 1px rgba(0,0,0,.04)}.mine{align-self:flex-end;background:#111;color:#fff;border-bottom-right-radius:5px}.theirs{align-self:flex-start;background:#fff;color:#111;border-bottom-left-radius:5px}.message-body{white-space:pre-wrap;word-break:break-word}.message-menu-btn{position:absolute;top:5px;right:5px;width:26px;height:26px;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;display:grid;place-items:center;font-size:21px;line-height:1;opacity:.72;touch-action:manipulation}.message-menu-btn:hover,.message-menu-btn:focus{background:rgba(127,127,127,.16);opacity:1}.message-actions-menu{position:absolute;right:8px;top:34px;min-width:118px;background:#fff;color:#111;border:1px solid #e2e5e8;border-radius:10px;box-shadow:0 12px 26px rgba(0,0,0,.18);padding:5px;z-index:80}.message-actions-menu button{display:block;width:100%;border:0;background:transparent;text-align:left;padding:9px 10px;border-radius:7px;cursor:pointer;font-size:13px}.message-actions-menu button:hover{background:#f2f4f6}.message-action-delete{color:#c62828!important}.meta{font-size:9px;opacity:.68;margin-top:4px;text-align:right;display:flex;align-items:center;justify-content:flex-end;gap:5px}.message-time{display:inline-block}.ticks{font-size:13px;line-height:1;font-weight:700;letter-spacing:-2px}.ticks.delivered{color:currentColor}.ticks.read{color:#34b7f1}.typing{height:22px;padding:0 22px;color:#6b7280;font-size:11px}.composer{min-height:58px;background:#fff;border-top:1px solid #ddd;display:flex;align-items:center;gap:7px;padding:8px 12px}.composer input{flex:1;border:1px solid #d9dee3;border-radius:23px;padding:11px 14px;outline:0;background:#f8f9fa}.composer input:focus{border-color:#999;background:#fff}.attach{font-size:23px;color:#666;width:35px}.send{border:0;background:#111;color:#fff;width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:18px}.bottom-nav{height:62px;flex:0 0 62px;background:#fff;border-top:1px solid #ddd;display:flex;justify-content:space-around;z-index:30}.bottom-nav a{color:#69717a;text-decoration:none;font-size:18px;text-align:center;padding-top:8px;min-width:70px}.bottom-nav span{display:block;font-size:10px;margin-top:3px}.bottom-nav .active{color:#111;font-weight:800}.toast{position:fixed;left:50%;bottom:80px;transform:translate(-50%,15px);background:#111;color:#fff;padding:10px 15px;border-radius:20px;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:99}.toast.show{opacity:1;transform:translate(-50%,0)}.forward-overlay{position:fixed;inset:0;z-index:10000;background:rgba(8,11,15,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:18px}.forward-dialog{width:min(430px,94vw);max-height:min(680px,90vh);background:#fff;border-radius:20px;box-shadow:0 25px 80px rgba(0,0,0,.28);display:flex;flex-direction:column;overflow:hidden}.forward-head{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #e5e7eb}.forward-head strong{font-size:16px}.forward-head button{border:0;background:#f1f3f5;border-radius:50%;width:34px;height:34px;font-size:22px;cursor:pointer}.forward-preview{margin:12px 14px;padding:10px 12px;background:#f4f6f8;border-radius:12px;font-size:13px;white-space:pre-wrap;word-break:break-word;max-height:130px;overflow:auto}.forward-list{overflow:auto;padding:4px 8px 10px}.forward-person{width:100%;border:0;background:transparent;display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:12px;cursor:pointer;text-align:left}.forward-person:hover{background:#f4f6f8}.forward-person .avatar{width:42px;height:42px;flex-basis:42px}.forward-person span{font-weight:700;font-size:14px;color:#111}
@media(max-width:720px){.message-menu-btn{opacity:.8}.messenger-shell{box-shadow:none}.sidebar{width:100%;flex-basis:100%;border:0}.chat-panel{position:absolute;inset:62px 0 62px 0;z-index:15;display:none}.chat-panel.open{display:flex}.chatHead .back-chat{display:block}.bottom-nav{height:62px}.sidebar.hidden{display:none}.bubble{max-width:84%}.topbar{height:62px;flex-basis:62px}}
@media(min-width:721px){.sidebar{display:flex!important}.chat-panel{display:flex!important}.sidebar-head{padding-top:2px}}

/* ===== SAFANK REAL CALL UI ===== */
.call-tools{margin-left:auto;display:flex;align-items:center;gap:6px;flex-shrink:0;position:relative}.call-btn{width:42px;height:42px;border:1px solid #e0e4e8;background:#fff;color:#24303a;border-radius:50%;display:grid;place-items:center;padding:0;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.08);transition:background .15s,box-shadow .15s,transform .15s}.call-btn:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.12);background:#f7f9fa}.call-btn:active{transform:translateY(0);box-shadow:0 1px 4px rgba(0,0,0,.08)}.call-btn.audio{color:#168c56}.call-btn.video{color:#1b6fd1}.call-icon{width:20px;height:20px;display:block}.call-btn:disabled{opacity:.5;cursor:not-allowed}.chat-refresh{margin-left:0!important}.chat-menu-btn{border:0;background:transparent;color:#555;width:38px;height:42px;border-radius:12px;font-size:28px;line-height:1;cursor:pointer;display:grid;place-items:center}.chat-menu-btn:hover{background:#f3f4f6}.chat-menu{position:absolute;right:12px;top:56px;min-width:150px;background:#fff;border:1px solid #e2e5e8;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.14);padding:6px;z-index:50}.chat-menu button{width:100%;border:0;background:transparent;text-align:left;padding:10px 12px;border-radius:8px;cursor:pointer;font-size:13px;color:#c62828}.chat-menu button:hover{background:#f8f9fa}
.call-overlay[hidden],.ctrl[hidden]{display:none!important}
.call-overlay{position:fixed;inset:0;z-index:9999;background:rgba(8,11,15,.78);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:18px}.call-window{width:min(720px,96vw);background:#11161b;color:#fff;border-radius:26px;overflow:hidden;box-shadow:0 30px 100px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.09)}.call-header{height:64px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08)}.call-header strong{display:block;font-size:17px}.call-header small{display:block;color:#9da8b3;font-size:11px;margin-top:3px}.call-close{border:0;background:#252c33;color:#fff;width:34px;height:34px;border-radius:50%;font-size:23px;cursor:pointer}.video-stage{position:relative;background:#050607;aspect-ratio:16/9}.video-stage video{width:100%;height:100%;object-fit:cover;background:#050607}.video-stage #localVideo{position:absolute;right:15px;bottom:15px;width:26%;height:30%;border:2px solid #fff;border-radius:13px;object-fit:cover}.video-placeholder{position:absolute;inset:0;display:grid;place-items:center;font-size:54px;pointer-events:none}.audio-stage{min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.audio-stage img{width:118px;height:118px;border-radius:50%;object-fit:cover;border:4px solid #26303a;box-shadow:0 0 0 16px rgba(32,197,106,.07)}.audio-stage strong{font-size:22px}.audio-stage span{font-size:13px;color:#aeb8c2}.call-controls{display:flex;justify-content:center;gap:12px;padding:18px;flex-wrap:wrap}.ctrl{min-width:58px;height:58px;border:0;border-radius:18px;background:#2a323a;color:#fff;cursor:pointer;font-weight:800;font-size:19px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.ctrl span{font-size:9px;font-weight:700}.ctrl.accept{background:#18a85b}.ctrl.end,.ctrl.reject{background:#df4047}.ctrl.on{background:#d48a18}
@media(max-width:720px){.call-tools{gap:4px}.call-btn{width:48px;height:45px;border-radius:12px}.call-svg{font-size:19px}.call-btn small{font-size:8px}.chatHead{padding:0 7px;gap:6px}.call-window{width:100%;border-radius:20px}.audio-stage{min-height:300px}.ctrl{min-width:52px;height:52px;border-radius:16px}}
@media(max-width:500px){.peer-info{max-width:88px}.call-btn{width:43px;height:41px}.call-btn small{font-size:7px}.chat-refresh{display:none}.chat-menu-btn{width:36px;height:41px}}

/* Keep HTML [hidden] elements hidden until JavaScript explicitly shows them. */
[hidden]{display:none !important}

/* FIX16: ensure message actions/ticks are visible and not suppressed by stale/overriding CSS */
.bubble .message-menu-btn{display:grid !important;visibility:visible !important;opacity:.8 !important;z-index:5 !important;}
.bubble .ticks{display:inline-block !important;visibility:visible !important;opacity:1 !important;min-width:16px;}

.peer-presence-online{color:#20c56a!important}
.peer-presence-offline{color:#71808f!important}

/* FIX 19: silent background refresh/status only. */
#refreshUsers{display:none!important;visibility:hidden!important;pointer-events:none!important}

/* FIX 18: chat list no presence dots. */
.person-preview .dot{display:none!important;}

/* FIX 20: mobile-first layout and lighter first paint. */
html,body{min-height:100%;overscroll-behavior:none}
.app{min-height:100dvh}
.messenger-shell{position:relative;overflow:hidden}
@supports not (height:100dvh){.app{height:100vh;min-height:100vh}}
@media(max-width:720px){
  html,body{width:100%;height:100%;background:#fff}
  .app{height:100dvh;min-height:100dvh;background:#fff}
  .topbar{height:56px;flex:0 0 56px;padding:0 14px;gap:10px}
  .back{font-size:27px}
  .brand b{font-size:16px}
  .messenger-shell{flex:1;min-height:0;height:auto;width:100%;max-width:none;margin:0;box-shadow:none;background:#fff;overflow:hidden}
  .sidebar{width:100%;flex:1 1 auto;min-height:0;overflow:hidden}
  .sidebar-head{height:58px;padding:0 14px}
  .sidebar-head b{font-size:21px}
  .search{height:42px;margin:0 10px 8px;border-radius:21px}
  .people{min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}
  .person{min-height:68px;padding:9px 12px;gap:10px}
  .avatar{width:46px;height:46px;flex-basis:46px}
  .person b{font-size:15px}
  .person-preview small{font-size:12px}
  .chat-panel{inset:0!important;position:absolute!important;width:100%;height:100%;z-index:15;display:none}
  .chat-panel.open{display:flex!important}
  .chatHead{height:58px;flex:0 0 58px;padding:0 7px;gap:6px}
  .chatHead .back-chat{display:block;width:34px;min-width:34px;height:42px}
  .big{width:40px;height:40px;flex-basis:40px}
  .peer-info{flex:1;max-width:none;min-width:0}
  .peer-info b{font-size:15px}
  .peer-info small{font-size:10px}
  .call-tools{gap:2px;margin-left:4px}
  .call-btn{width:40px;height:40px;border-radius:50%;box-shadow:none}
  .call-icon{width:18px;height:18px}
  .chat-menu-btn{width:34px;height:40px;font-size:25px}
  .messages{padding:9px 8px 10px;gap:5px;-webkit-overflow-scrolling:touch}
  .bubble{max-width:84%;font-size:14px;border-radius:15px;padding:8px 34px 8px 10px}
  .message-menu-btn{width:24px;height:24px;top:4px;right:4px;font-size:19px}
  .message-actions-menu{right:6px;top:31px;min-width:132px}
  .message-actions-menu button{padding:10px 11px;font-size:14px}
  .meta{font-size:9px}
  .ticks{font-size:13px}
  .typing{height:20px;padding:0 12px}
  .composer{min-height:56px;padding:6px 7px;gap:5px}
  .composer input{min-width:0;font-size:16px;padding:10px 13px}
  .attach{width:32px;font-size:21px}
  .send{width:42px;height:42px;flex:0 0 42px}
  .bottom-nav{height:56px;flex:0 0 56px}
  .bottom-nav a{padding-top:6px;min-width:62px;font-size:17px}
  .bottom-nav span{font-size:9px;margin-top:2px}
  .forward-overlay{padding:0;align-items:flex-end}
  .forward-dialog{width:100%;max-height:82vh;border-radius:18px 18px 0 0}
}