/* SattiChat — Clean Mobile-First WhatsApp UI */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;color-scheme:light}
html{color-scheme:light only;forced-color-adjust:none}
html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;overflow:hidden;background:#efeae2 !important;color:#111b21 !important}
:root{
  --g:#25d366;--gd:#075e54;--gm:#128c7e;
  --bm:#d9fdd3;--bt:#fff;--bc:#efeae2;
  --bi:#f0f2f5;--bd:#e9edef;
  --t1:#111b21;--t2:#667781;--t3:#8696a0;
  --blue:#53bdeb;--red:#e53935;
  --hh:56px;
}

/* ── AUTH ─────────────────────────────────────────────────── */
.auth-body{background:linear-gradient(160deg,var(--gd),var(--gm));min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}
.auth-container{background:#fff;border-radius:20px;padding:36px 28px;width:100%;max-width:400px;box-shadow:0 12px 40px rgba(0,0,0,.22)}
.auth-logo{text-align:center;margin-bottom:24px}
.auth-logo i{font-size:52px;color:var(--g)}
.auth-logo h1{font-size:28px;color:var(--gd);margin:8px 0 4px;font-weight:700}
.auth-logo p{color:var(--t3);font-size:14px}
.auth-tabs{display:flex;border-radius:10px;overflow:hidden;border:1.5px solid var(--bd);margin-bottom:20px}
.tab-btn{flex:1;padding:11px;border:none;background:var(--bi);cursor:pointer;font-size:15px;font-weight:500}
.tab-btn.active{background:var(--g);color:#fff;font-weight:700}
.auth-form{display:flex;flex-direction:column;gap:13px}
.auth-form.hidden{display:none}
.input-group{display:flex;align-items:center;border:1.5px solid var(--bd);border-radius:10px;padding:0 14px;background:#fafafa}
.input-group:focus-within{border-color:var(--g);background:#fff}
.input-group i{color:var(--t3);margin-right:10px;width:16px;font-size:14px}
.input-group input{flex:1;border:none;background:transparent;padding:13px 0;font-size:16px;outline:none;color:var(--t1)}
.btn-primary{background:var(--g);color:#fff;border:none;border-radius:10px;padding:14px;font-size:16px;font-weight:700;cursor:pointer;width:100%}
.auth-divider{text-align:center;margin:16px 0;color:var(--t3);font-size:13px;position:relative}
.auth-divider::before,.auth-divider::after{content:'';position:absolute;top:50%;width:40%;height:1px;background:var(--bd)}
.auth-divider::before{left:0}.auth-divider::after{right:0}
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;border:1.5px solid var(--bd);border-radius:10px;padding:12px;text-decoration:none;color:var(--t1);font-size:15px;background:#fff}
.btn-google img{width:20px;height:20px}
.alert{padding:10px 14px;border-radius:10px;margin-bottom:14px;font-size:14px}
.alert-error{background:#fdecea;color:#c62828;border:1px solid #f5c6cb}

/* ══════════════════════════════════════════════════════════
   DESKTOP LAYOUT (≥769px): side-by-side panels
══════════════════════════════════════════════════════════ */
.chat-body{height:100dvh;overflow:hidden}
.app-container{display:flex;height:100dvh;width:100%;background:#fff;overflow:hidden}

/* Sidebar — fixed width on desktop */
.sidebar{width:360px;min-width:280px;max-width:400px;flex-shrink:0;display:flex;flex-direction:column;border-right:1px solid var(--bd);background:#fff;height:100%;overflow:hidden}

/* Chat window — fills remaining space */
.chat-window{flex:1;display:flex;flex-direction:column;height:100%;overflow:hidden;min-width:0}
/* Empty state */
.chat-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--t3);gap:12px;background:var(--bc)}
.chat-empty-icon{width:80px;height:80px;border-radius:50%;background:rgba(37,211,102,.12);display:flex;align-items:center;justify-content:center}
.chat-empty-icon i{font-size:38px;color:var(--g)}
.chat-empty h2{font-size:22px;color:var(--t1);font-weight:400}
.chat-empty p{font-size:14px}
.chat-empty.hidden{display:none}

/* Chat area — flex column, fills chat-window */
.chat-area{display:flex;flex-direction:column;height:100%;overflow:hidden;background:var(--bc)}
.chat-area.hidden{display:none}

/* ══════════════════════════════════════════════════════════
   MOBILE LAYOUT (≤768px): ONE panel at a time
   JS shows/hides .sidebar and .chat-window
══════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .app-container{position:fixed;inset:0;display:block;overflow:hidden}

  /* Sidebar: full screen, shown by default */
  .sidebar{
    position:absolute;inset:0;
    width:100%;max-width:100%;min-width:0;
    height:100%;z-index:1;
    display:flex;flex-direction:column;
  }
  .sidebar.sc-hide{display:none}

  /* Chat window: full screen, hidden by default */
  .chat-window{
    position:absolute;inset:0;
    width:100%;height:100%;z-index:2;
    display:none;flex-direction:column;
  }
  .chat-window.sc-show{display:flex}

  /* Chat area fills the window */
  .chat-area{flex:1;display:flex;flex-direction:column;height:100%;overflow:hidden}
  .chat-area.hidden{display:none}

  /* Back button visible */
  .back-btn{display:flex !important}

  /* Bigger bubbles */
  .bubble{max-width:86%}
  .msg-image{max-width:100%;max-height:220px}
  .msg-video,.msg-audio,.doc-link{max-width:100%}
  .messages-container{padding:8px 3%}

  /* Hide extra header buttons */
  .chat-header-actions button:nth-child(n+3){display:none}

  /* Tabs: icons only */
  .stab span{display:none !important}
  .stab{padding:10px 4px !important}
  .stab i{font-size:18px !important}

  /* Attach menu */
  .attach-menu{bottom:72px;left:6px}
}
@media(max-width:480px){
  .auth-container{padding:28px 18px}
  .bubble{max-width:90%}
  .modal-box{padding:20px 16px}
}

/* ── SIDEBAR INTERNALS ────────────────────────────────────── */
.sidebar-header{display:flex;align-items:center;gap:10px;background:var(--gd);color:#fff;padding:8px 14px;height:var(--hh);flex-shrink:0}
.my-avatar{flex-shrink:0}
.my-avatar img,.my-avatar .avatar-initials{width:38px;height:38px;border-radius:50%;object-fit:cover}
.my-avatar .avatar-initials{background:var(--g);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}
.my-name{flex:1;font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header-actions{display:flex;align-items:center;gap:2px}
.header-actions button,.header-actions a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.12);border:none;color:#fff;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;text-decoration:none;-webkit-tap-highlight-color:transparent}

.sidebar-tabs{display:flex !important;background:var(--gd) !important;flex-shrink:0;overflow-x:auto}
.stab{flex:1;min-width:0;padding:8px 4px;border:none;background:transparent !important;color:rgba(255,255,255,.6) !important;font-size:10px;cursor:pointer;display:flex !important;flex-direction:column;align-items:center;gap:2px;border-bottom:3px solid transparent !important;border-radius:0 !important;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.stab i{font-size:16px}
.stab span{font-size:10px}
.stab.active{color:#fff !important;border-bottom-color:#fff !important}

.search-bar{display:flex;align-items:center;gap:8px;background:var(--bi);margin:6px 10px;border-radius:10px;padding:8px 12px;flex-shrink:0}
.search-bar i{color:var(--t3);font-size:14px}
.search-bar input{border:none;background:transparent;flex:1;font-size:14px;outline:none;color:var(--t1)}

.stab-content{flex:1;overflow-y:auto;display:flex;flex-direction:column;-webkit-overflow-scrolling:touch}
.stab-content.hidden{display:none}
.contact-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}

.contact-item{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--bd);-webkit-tap-highlight-color:transparent;user-select:none}
.contact-item:active{background:#f0f0f0}
.contact-item.active{background:#f5f6f6}
.contact-item.has-unread .contact-name{font-weight:700}

.contact-avatar{position:relative;flex-shrink:0}
.contact-avatar img,.contact-avatar .avatar-initials{width:50px;height:50px;border-radius:50%;object-fit:cover}
.contact-avatar .avatar-initials{background:var(--gm);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px}
.status-dot{position:absolute;bottom:2px;right:2px;width:13px;height:13px;border-radius:50%;border:2.5px solid #fff;transition:background .3s}
.status-dot.online{background:var(--g);box-shadow:0 0 0 0 rgba(37,211,102,.7);animation:statusPulse 2.5s ease-in-out infinite}
.status-dot.offline{background:#ccc;animation:none;box-shadow:none}
.status-dot.away{background:#ffc107;animation:none}
@keyframes statusPulse{0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}60%{box-shadow:0 0 0 5px rgba(37,211,102,0)}}

.contact-info{flex:1;min-width:0}
.contact-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:3px}
.contact-name{font-weight:500;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t1)}
.contact-time{font-size:11.5px;color:var(--t3);flex-shrink:0;margin-left:6px}
.contact-bottom{display:flex;justify-content:space-between;align-items:center}
.contact-preview{font-size:13px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unread-badge{background:var(--g);color:#fff;border-radius:50%;min-width:20px;height:20px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px;flex-shrink:0}
.no-contacts{text-align:center;color:var(--t3);padding:48px 20px;font-size:14px}
.new-room-btn{display:flex;align-items:center;gap:10px;padding:14px 16px;color:var(--gm);font-weight:600;font-size:14px;cursor:pointer;border-top:1px solid var(--bd);-webkit-tap-highlight-color:transparent}
.new-room-btn i{font-size:16px}

/* ── CHAT HEADER ──────────────────────────────────────────── */
.chat-header{display:flex;align-items:center;gap:10px;background:var(--gd);color:#fff;padding:8px 12px;height:var(--hh);flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.back-btn{display:none;background:none;border:none;color:#fff;font-size:22px;cursor:pointer;padding:6px 8px;border-radius:50%;flex-shrink:0;-webkit-tap-highlight-color:transparent;align-items:center;justify-content:center}
.chat-header-avatar{cursor:pointer;flex-shrink:0}
.chat-header-avatar img,.chat-header-avatar .avatar-initials{width:38px;height:38px;border-radius:50%;object-fit:cover}
.chat-header-avatar .avatar-initials{background:var(--g);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}
.chat-header-info{flex:1;min-width:0;cursor:pointer}
.chat-header-info span:first-child{display:block;font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-status{font-size:12px;opacity:.85}
.chat-header-actions{display:flex;gap:2px}
.chat-header-actions button{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12);border:none;color:#fff;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}

/* ── MESSAGES ─────────────────────────────────────────────── */
.msg-search-bar{display:flex;align-items:center;gap:10px;background:var(--bi);padding:8px 14px;border-bottom:1px solid var(--bd);flex-shrink:0}
.msg-search-bar.hidden{display:none}
.msg-search-bar i{color:var(--t3)}
.msg-search-bar input{flex:1;border:none;background:transparent;font-size:14px;outline:none}
.msg-search-bar button{background:none;border:none;cursor:pointer;color:var(--t3);font-size:18px}

.messages-container{flex:1;overflow-y:auto;padding:8px 4%;background-color:var(--bc);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath fill='%23c8c8c8' fill-opacity='.07' d='M0 0h40v40H0zm40 40h40v40H40z'/%3E%3C/svg%3E");-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.no-msgs{text-align:center;color:var(--t3);font-size:13px;margin:40px 0}

.date-sep{text-align:center;margin:10px 0}
.date-sep span{background:rgba(225,245,254,.9);color:#54656f;font-size:12px;padding:4px 12px;border-radius:8px;font-weight:500}

.message{display:flex;margin-bottom:2px;align-items:flex-end;gap:4px}
.message.mine{justify-content:flex-end}
.message.theirs{justify-content:flex-start}
.message.group-start{margin-top:8px}

.bubble{max-width:72%;padding:7px 10px 5px;border-radius:7.5px;position:relative;word-break:break-word;box-shadow:0 1px 2px rgba(0,0,0,.13)}
.message.mine .bubble{background:var(--bm);border-top-right-radius:2px}
.message.theirs .bubble{background:var(--bt);border-top-left-radius:2px}
.message.mine .bubble::after{content:'';position:absolute;top:0;right:-7px;border:7px solid transparent;border-top-color:var(--bm);border-right:0}
.message.theirs .bubble::after{content:'';position:absolute;top:0;left:-7px;border:7px solid transparent;border-top-color:var(--bt);border-left:0}

.msg-text{font-size:14.5px;line-height:1.5;white-space:pre-wrap;color:var(--t1)}
.msg-meta{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:3px;float:right;margin-left:8px}
.msg-time{font-size:11px;color:var(--t3);white-space:nowrap}
.ticks{font-size:14px;line-height:1}
.ticks.sent i,.ticks.delivered i{color:var(--t3)}
.ticks.read i{color:var(--blue)}

.reply-quote{border-left:3px solid var(--g);background:rgba(0,0,0,.06);border-radius:6px;padding:6px 10px;margin-bottom:6px;font-size:12.5px;cursor:pointer}
.reply-quote .rq-name{color:var(--gm);font-weight:700;margin-bottom:2px;font-size:12px}
.reply-quote .rq-text{color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}

.msg-image{max-width:240px;max-height:240px;border-radius:6px;display:block;cursor:pointer;object-fit:cover}
.msg-video{max-width:260px;border-radius:6px;display:block}
.msg-audio{display:block;width:100%;min-width:180px;max-width:260px}
.doc-link{display:flex;align-items:center;gap:10px;color:var(--gd);text-decoration:none;font-size:14px;background:rgba(0,0,0,.04);padding:10px 12px;border-radius:8px;min-width:180px;max-width:260px}
.doc-link:hover,.doc-link:active{background:rgba(0,0,0,.08)}
.doc-link i{font-size:26px;flex-shrink:0}
.doc-link .doc-info{min-width:0}
.doc-link .doc-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.doc-link .doc-size{font-size:11px;color:var(--t3)}

.typing-indicator{padding:4px 14px 6px;font-size:13px;color:var(--t3);font-style:italic;display:flex;align-items:center;gap:6px;flex-shrink:0}
.typing-indicator.hidden{display:none}
.typing-dots span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--t3);animation:typingDot 1.2s infinite}
.typing-dots span:nth-child(2){animation-delay:.2s}.typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes typingDot{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}

/* ── INPUT AREA ───────────────────────────────────────────── */
.message-input-area{background:var(--bi);padding:6px 8px;border-top:1px solid var(--bd);flex-shrink:0;position:relative}
.reply-bar{display:flex;align-items:center;gap:10px;background:#fff;border-radius:8px;padding:8px 12px;margin-bottom:6px;border-left:4px solid var(--g)}
.reply-bar.hidden{display:none}
.reply-bar-content{flex:1;min-width:0}
.reply-bar-name{font-size:12px;font-weight:700;color:var(--gm)}
.reply-bar-text{font-size:13px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reply-bar-close{background:none;border:none;cursor:pointer;color:var(--t3);font-size:18px;padding:2px}

.file-preview{display:flex;align-items:center;gap:10px;background:#fff;border-radius:8px;padding:8px 12px;margin-bottom:6px;border:1px solid var(--bd)}
.file-preview.hidden{display:none}
.file-preview-thumb{width:40px;height:40px;border-radius:6px;object-fit:cover}
.file-preview-info{min-width:0}
.file-preview-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;font-size:13px}
.file-preview-size{font-size:11px;color:var(--t3)}
.file-preview button{background:none;border:none;cursor:pointer;color:var(--t3);font-size:18px;padding:4px;border-radius:50%}
.media-caption{font-size:13px;margin-top:5px;padding:2px 4px;word-break:break-word;color:inherit;opacity:.9}

.rec-bar{display:flex;align-items:center;gap:10px;background:#fff;border-radius:8px;padding:10px 14px;margin-bottom:6px;border-left:4px solid var(--red)}
.rec-bar.hidden{display:none}
.rec-dot{width:10px;height:10px;border-radius:50%;background:var(--red);animation:blink 1s infinite;flex-shrink:0}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
#recTimer{font-weight:700;color:var(--red);min-width:38px;font-size:14px}
#recLabel{flex:1;color:var(--t2);font-size:13px}
.rec-cancel{background:none;border:none;cursor:pointer;color:var(--red);font-size:18px;padding:4px 8px;border-radius:6px}

.input-row{display:flex;align-items:flex-end;gap:6px}
.attach-btn,.emoji-btn{width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:50%;cursor:pointer;border:none;font-size:20px;flex-shrink:0;color:var(--t2);-webkit-tap-highlight-color:transparent}
.emoji-btn{font-size:22px}
#msgInput{flex:1;border:none;border-radius:22px;padding:11px 16px;font-size:16px;outline:none;resize:none;background:#fff;max-height:130px;line-height:1.45;font-family:inherit;box-shadow:0 1px 2px rgba(0,0,0,.13);color:var(--t1);-webkit-appearance:none;appearance:none}
#msgInput::placeholder{color:var(--t3)}
.mic-btn{width:46px;height:46px;border-radius:50%;background:var(--g);border:none;cursor:pointer;color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none;box-shadow:0 2px 8px rgba(37,211,102,.4)}
.mic-btn:active,.mic-btn.recording{background:var(--red)}
.mic-btn.hidden{display:none}
.send-btn{width:46px;height:46px;border-radius:50%;background:var(--g);border:none;color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px rgba(37,211,102,.4);-webkit-tap-highlight-color:transparent}
.send-btn:active{transform:scale(.95)}
.send-btn:disabled{background:#ccc;box-shadow:none;cursor:not-allowed}
.send-btn.hidden{display:none}

.attach-menu{position:absolute;bottom:70px;left:8px;background:#fff;border-radius:14px;box-shadow:0 4px 20px rgba(0,0,0,.2);padding:8px;display:flex;flex-direction:column;gap:2px;z-index:50;min-width:180px}
.attach-menu.hidden{display:none}
.attach-menu-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;cursor:pointer;font-size:14px;color:var(--t1);-webkit-tap-highlight-color:transparent}
.attach-menu-item:active{background:var(--bi)}
.ami-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;flex-shrink:0}

/* ── VIDEO OVERLAY ────────────────────────────────────────── */
.vid-overlay{position:fixed;inset:0;z-index:500;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center}
.vid-overlay.hidden{display:none}
.vid-overlay video{width:100%;max-height:calc(100% - 110px);object-fit:cover}
.vid-controls{position:absolute;bottom:32px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:28px}
.vid-ctrl-btn{width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;font-size:22px;display:flex;align-items:center;justify-content:center}
.vid-ctrl-btn.cancel{background:rgba(255,255,255,.2);color:#fff}
.vid-ctrl-btn.record{background:var(--red);color:#fff;width:70px;height:70px;font-size:28px}
.vid-ctrl-btn.send{background:var(--g);color:#fff}
.vid-ctrl-btn.hidden{display:none}
.vid-timer{position:absolute;top:20px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.55);color:#fff;padding:5px 14px;border-radius:14px;font-size:14px;font-weight:700}
.vid-timer.hidden{display:none}

/* ── MODALS ───────────────────────────────────────────────── */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.modal.hidden{display:none}
.modal-box{background:#fff;border-radius:16px;padding:24px;width:100%;max-width:440px;max-height:90vh;overflow-y:auto;box-shadow:0 8px 32px rgba(0,0,0,.25)}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.modal-header h3{font-size:18px;font-weight:700;color:var(--t1)}
.modal-header button{width:32px;height:32px;border-radius:50%;background:var(--bi);border:none;cursor:pointer;font-size:16px;color:var(--t2);display:flex;align-items:center;justify-content:center}
.modal-field{margin-bottom:16px}
.modal-field label{display:block;font-size:13px;font-weight:600;color:var(--t2);margin-bottom:6px}
.modal-field input,.modal-field textarea,.modal-field select{width:100%;border:1.5px solid var(--bd);border-radius:10px;padding:11px 14px;font-size:15px;outline:none;font-family:inherit}
.modal-field input:focus,.modal-field textarea:focus{border-color:var(--g)}
.modal-field textarea{resize:vertical;min-height:70px}
.checkbox-field label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:400;color:var(--t1);cursor:pointer}

/* ── CONTEXT MENU ─────────────────────────────────────────── */
@keyframes ctxPop{from{transform:scale(.88) translateY(6px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.ctx-item i{width:18px;color:var(--t2)}
.ctx-item.danger{color:var(--red)}.ctx-item.danger i{color:var(--red)}

/* ── LIGHTBOX ─────────────────────────────────────────────── */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:900;display:flex;align-items:center;justify-content:center;cursor:zoom-out}
.lightbox.hidden{display:none}
.lightbox img{max-width:95vw;max-height:95vh;border-radius:6px;object-fit:contain}
.lightbox-close{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.15);border:none;color:#fff;width:44px;height:44px;border-radius:50%;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* ── TOAST ────────────────────────────────────────────────── */
#toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.75);color:#fff;padding:9px 20px;border-radius:20px;font-size:14px;z-index:9999;pointer-events:none;transition:opacity .3s;white-space:nowrap}

/* ── SCROLLBAR ────────────────────────────────────────────── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#ccc;border-radius:4px}

/* ── Reply highlight flash ────────────────────────────────── */
.message.highlight .bubble {
    animation: msgHighlight 1.5s ease;
}
@keyframes msgHighlight {
    0%,100% { background: inherit; }
    30%      { background: rgba(37,211,102,.25); }
}

/* ── Read ticks ───────────────────────────────────────────── */
.ticks.sending i    { color: #f97316; animation: tickPulse 1s ease-in-out infinite; }
.ticks.sent i      { color: #aaa; }
.ticks.delivered i { color: #aaa; }
.ticks.read i      { color: #53bdeb; }
@keyframes tickPulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── Toast ────────────────────────────────────────────────── */
#toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.75);
    color: #fff;
    padding: 9px 20px;
    border-radius: 20px;
    font-size: 14px;
    z-index: 9999;
    pointer-events: none;
    transition: opacity .3s;
    white-space: nowrap;
    opacity: 0;
}

/* ── Reactions on bubbles ─────────────────────────────────── */
.reactions { display:flex; flex-wrap:wrap; gap:3px; margin-top:4px; }
.reaction-bar{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px;padding:0 2px}
.reaction-chip{display:inline-flex;align-items:center;gap:2px;background:rgba(0,0,0,.07);border-radius:20px;padding:3px 8px;font-size:15px;cursor:pointer;border:1.5px solid transparent;transition:border .1s,transform .12s;user-select:none;-webkit-tap-highlight-color:transparent}
.reaction-chip.mine{border-color:var(--g,#128c7e);background:rgba(18,140,126,.12)}
.reaction-chip:active{transform:scale(1.2)}
.reaction-chip sup{font-size:10px;color:#555;margin-left:1px}

/* ── Hover reply button (desktop) — fixed slip-away ─────────
   Use opacity/visibility instead of display:none so the button
   stays in the hover zone. A ::before on .bubble extends the
   hover area sideways so the mouse never leaves while moving.   */
.message{position:relative}
.bubble{position:relative;overflow:visible}
.msg-reply-hover-btn{
  opacity:0;visibility:hidden;pointer-events:none;
  position:absolute;top:50%;
  transform:translateY(-50%) scale(.8);
  background:#fff;border:none;border-radius:50%;
  width:32px;height:32px;
  box-shadow:0 2px 8px rgba(0,0,0,.22);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#555;font-size:13px;z-index:10;
  transition:opacity .12s, transform .12s, visibility 0s .12s;
}
.msg-reply-hover-btn:hover{background:#f0f0f0;color:var(--g,#128c7e)}
.message.mine  .msg-reply-hover-btn{left:-40px}
.message.theirs .msg-reply-hover-btn{right:-40px}
/* Show on bubble hover AND keep visible when hovering the button itself */
.bubble:hover .msg-reply-hover-btn,
.msg-reply-hover-btn:hover{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateY(-50%) scale(1);
  transition:opacity .1s, transform .1s, visibility 0s;
}

/* ── Force light mode — override browser dark mode ───────── */
@media (prefers-color-scheme: dark) {
  html, body { background: #efeae2 !important; color: #111b21 !important; }
  .app-container, .sidebar, .chat-window, .chat-area { background: #fff !important; color: #111b21 !important; }
  .messages-container { background-color: #efeae2 !important; }
  .bubble { color: #111b21 !important; }
  .message.mine .bubble { background: #d9fdd3 !important; }
  .message.theirs .bubble { background: #fff !important; }
  .contact-item { background: #fff !important; color: #111b21 !important; }
  .sidebar-header, .chat-header { background: #075e54 !important; }
  .message-input-area { background: #f0f2f5 !important; }
  #msgInput { background: #fff !important; color: #111b21 !important; }
  .auth-body { background: linear-gradient(160deg,#075e54,#128c7e) !important; }
  .auth-container { background: #fff !important; color: #111b21 !important; }
  input, textarea, select { background: #fff !important; color: #111b21 !important; }
}

/* ── Image message wrapper ────────────────────────────────── */
.msg-img-wrap { display: block; cursor: pointer; }
.msg-img-wrap img {
  max-width: 240px;
  max-height: 240px;
  border-radius: 6px;
  display: block;
  object-fit: cover;
  background: #f0f0f0;
}
@media (max-width: 768px) {
  .msg-img-wrap img { max-width: 100%; max-height: 260px; }
}

/* ── Media download button ────────────────────────────────── */
.media-wrap { position: relative; display: inline-block; }
.media-dl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(0,0,0,.45);
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    position: absolute;
    bottom: 6px; right: 6px;
    z-index: 2;
    transition: background .15s;
}
.media-dl-btn:hover { background: rgba(0,0,0,.7); }
.msg-img-wrap { position: relative; display: inline-block; cursor: pointer; }
.msg-img-wrap .media-dl-btn { bottom: 6px; right: 6px; }
.media-wrap .msg-video,
.media-wrap .msg-audio { display: block; }
.media-wrap .media-dl-btn { position: static; margin-top: 4px; border-radius: 8px; width: auto; height: auto; padding: 4px 10px; font-size: 12px; gap: 4px; background: rgba(0,0,0,.12); color: var(--t2); }
.media-wrap .media-dl-btn i { font-size: 12px; }
.media-wrap .media-dl-btn::after { content: ' Download'; }

/* ── Room sender name ─────────────────────────────────────── */
.sender-name { display: block; font-size: 12px; font-weight: 700; margin-bottom: 2px; }

/* ── Contact cell number ──────────────────────────────────── */
.contact-cell {
    font-size: 11.5px;
    color: var(--gm);
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.contact-cell i { font-size: 10px; opacity: .8; }

/* ── Clickable cell number ────────────────────────────────── */
.contact-cell {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: var(--gm);
    margin-bottom: 2px;
    border-radius: 4px;
    padding: 1px 4px 1px 2px;
    transition: background .15s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.contact-cell:hover, .contact-cell:active { background: rgba(18,140,126,.1); }
.contact-cell i { font-size: 10px; opacity: .8; }

/* ── Call options popup ───────────────────────────────────── */
.call-popup {
    position: fixed;
    z-index: 2000;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 28px rgba(0,0,0,.22);
    padding: 6px 0 8px;
    min-width: 220px;
    animation: popIn .15s ease;
}
@keyframes popIn {
    from { opacity: 0; transform: scale(.92) translateY(-4px); }
    to   { opacity: 1; transform: scale(1)  translateY(0); }
}
.call-popup-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--t3);
    padding: 6px 16px 8px;
    border-bottom: 1px solid var(--bd);
    display: flex;
    align-items: center;
    gap: 6px;
}
.call-popup-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    text-decoration: none;
    color: var(--t1);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .12s;
}
.call-popup-item:hover, .call-popup-item:active { background: var(--bi); }
.call-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    color: #fff;
}
.call-icon.sim   { background: #1e88e5; }
.call-icon.wa    { background: #25d366; }
.call-icon.wamsg { background: #128c7e; }