:root{--bg:#eef2f7;--panel:#fff;--ink:#172033;--muted:#718096;--line:#e4e9f0;--brand:#167d70;--brand2:#0f665c;--soft:#e8f7f3;--danger:#b42318}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink)}a{color:var(--brand);text-decoration:none}.auth-body{min-height:100vh;background:linear-gradient(140deg,#eaf6f4,#f5f7fb);display:flex;align-items:center;justify-content:center;padding:20px}.auth-card,.admin-card{background:#fff;width:min(100%,420px);padding:30px;border-radius:20px;box-shadow:0 18px 60px #193c3514}.auth-card h1{text-align:center;margin:12px 0 2px}.brand-mark,.brand-mini{display:flex;align-items:center;justify-content:center;background:var(--brand);color:#fff;font-weight:800;border-radius:15px;width:52px;height:52px;margin:auto;font-size:25px}.muted,.switch{text-align:center;color:var(--muted);font-size:14px}.auth-card form{display:flex;flex-direction:column;gap:9px;margin-top:24px}.auth-card label{font-size:14px;font-weight:650;margin-top:6px}.auth-card input,.search-wrap input,.composer input[type=text],.composer input:not([type]){width:100%;padding:12px 13px;border:1px solid #d7dee8;border-radius:10px;font:inherit;outline:none}.auth-card input:focus,.search-wrap input:focus,.composer input:focus{border-color:var(--brand);box-shadow:0 0 0 3px #167d701a}.primary{background:var(--brand);border:0;color:#fff;border-radius:10px;padding:12px 17px;font-weight:700;cursor:pointer;font:inherit}.primary:hover{background:var(--brand2)}.primary:disabled{opacity:.6;cursor:wait}.full{width:100%;margin-top:12px}.alert,.success{padding:11px 13px;border-radius:10px;font-size:14px;margin:14px 0}.alert{background:#fff0ef;color:var(--danger)}.success{background:#e8f8ef;color:#17683b}.switch{margin-top:20px}.chat-body{background:var(--bg);height:100dvh;overflow:hidden}.app{height:100dvh;display:grid;grid-template-columns:340px 1fr;max-width:1500px;margin:auto;background:#fff;box-shadow:0 0 40px #142c4010}.sidebar{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}.side-header{display:flex;align-items:center;gap:10px;padding:17px;border-bottom:1px solid var(--line)}.brand-mini{width:39px;height:39px;border-radius:12px;margin:0;font-size:20px;flex-shrink:0}.side-header strong,.side-header small{display:block}.side-header small{font-size:12px;color:var(--muted);margin-top:2px}.logout{margin-left:auto;font-size:12px}.me-row{display:flex;align-items:center;gap:10px;padding:15px 17px;border-bottom:1px solid var(--line)}.avatar{width:42px;height:42px;flex-shrink:0;border-radius:50%;background:#d8eee9;color:var(--brand2);display:flex;align-items:center;justify-content:center;font-weight:800;overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover}.me-info{min-width:0;flex:1}.me-info strong,.me-info small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.me-info small{font-size:12px;color:var(--muted);margin-top:3px}.icon-link{font-size:19px}.search-wrap{display:flex;gap:5px;padding:13px 14px 8px}.search-wrap input{background:#f5f7fa;border:1px solid transparent}.search-wrap button{border:0;background:transparent;color:var(--muted);font-size:23px;cursor:pointer}.section-title{padding:10px 17px 6px;font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}.user-list{overflow-y:auto;flex:1}.user-item{width:100%;border:0;background:#fff;display:flex;align-items:center;gap:10px;text-align:left;padding:12px 15px;cursor:pointer;border-bottom:1px solid #f0f2f5}.user-item:hover,.user-item.selected{background:#f0f8f6}.user-copy{min-width:0;flex:1}.user-copy strong,.user-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-copy strong{font-size:14px}.user-copy small{font-size:12px;color:var(--muted);margin-top:4px}.presence{width:8px;height:8px;border-radius:50%;background:#b8c0cc}.presence.online{background:#20b26b}.unread{font-size:11px;background:var(--brand);color:#fff;padding:3px 6px;border-radius:12px}.empty{padding:20px;color:var(--muted);font-size:13px;text-align:center}.side-footer{padding:12px 15px;border-top:1px solid var(--line);font-size:11px;color:var(--muted);line-height:1.5}.conversation{min-width:0;display:flex;flex-direction:column;background:#f7f9fc}.welcome{margin:auto;text-align:center;padding:25px;color:var(--muted)}.welcome-icon{width:76px;height:76px;border-radius:24px;background:var(--soft);color:var(--brand);display:grid;place-items:center;font-size:35px;margin:0 auto 20px}.welcome h2{color:var(--ink);margin:0 0 8px}.welcome p{font-size:14px}.hidden{display:none!important}.thread{display:flex;flex-direction:column;height:100%;min-height:0}.thread-header{display:flex;align-items:center;gap:12px;padding:13px 20px;background:#fff;border-bottom:1px solid var(--line)}.thread-person strong,.thread-person small{display:block}.thread-person small{font-size:12px;color:var(--muted);margin-top:3px}.messages{flex:1;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:10px}.in-thread{margin:auto}.message-row{display:flex;justify-content:flex-start}.message-row.mine{justify-content:flex-end}.bubble{max-width:min(75%,520px);background:#fff;border:1px solid var(--line);border-radius:15px 15px 15px 4px;padding:10px 12px;box-shadow:0 2px 5px #162b3907;overflow-wrap:anywhere}.mine .bubble{background:#dcf7ef;border-color:#ccece1;border-radius:15px 15px 4px 15px}.message-text{font-size:14px;line-height:1.5;white-space:normal}.message-meta{font-size:10px;color:#73818f;display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:5px}.delete-message{border:0;background:transparent;color:#8c989f;cursor:pointer;font-size:16px;line-height:1}.message-image{display:block;margin-top:5px}.message-image img{max-width:260px;max-height:260px;border-radius:8px;display:block}.composer{display:flex;align-items:center;gap:9px;padding:13px 16px;background:#fff;border-top:1px solid var(--line)}.composer input[type=text],.composer input:not([type]){flex:1;min-width:0;border-radius:24px;background:#f5f7fa;border-color:transparent}.attach{width:39px;height:39px;border-radius:50%;background:#edf3f3;color:var(--brand);display:grid;place-items:center;font-size:25px;cursor:pointer;flex-shrink:0}.send-btn{border-radius:24px;padding:10px 17px}.composer-hint{background:#fff;padding:0 20px 8px;font-size:11px;color:var(--muted)}.error-text{color:var(--danger)!important}.profile-card>a{display:inline-block;margin-bottom:15px}.admin-card{width:min(100%,1100px)}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;font-size:14px}th,td{text-align:left;border-bottom:1px solid var(--line);padding:12px}th{background:#f6f8fa}@media(max-width:720px){.app{grid-template-columns:115px 1fr}.side-header{padding:12px 8px;gap:6px;flex-wrap:wrap}.side-header>div:nth-child(2){display:none}.logout{margin:0;font-size:11px}.me-row{padding:10px 7px;flex-direction:column;text-align:center;gap:5px}.me-info{width:100%}.me-info small{display:none}.icon-link{display:none}.search-wrap{padding:8px 5px;gap:0}.search-wrap input{font-size:11px;padding:9px 5px;min-width:0}.search-wrap button{display:none}.section-title{padding:8px 6px;font-size:9px}.user-item{padding:10px 5px;flex-direction:column;gap:5px;text-align:center}.user-copy{width:100%}.user-copy strong{font-size:11px}.user-copy small{font-size:9px}.presence{display:none}.unread{position:absolute;margin-left:75px;margin-top:-42px}.side-footer{font-size:9px;padding:7px}.messages{padding:12px 8px}.bubble{max-width:92%;padding:9px}.message-image img{max-width:180px}.thread-header{padding:10px}.composer{padding:9px 7px;gap:5px}.attach{width:32px;height:32px}.send-btn{padding:9px;font-size:12px}.composer input[type=text],.composer input:not([type]){padding:10px;font-size:13px}.auth-card{padding:24px 20px}}

/* Mobile chat navigation improvements */
.mobile-back{display:none;border:0;background:transparent;color:var(--brand);font-size:28px;line-height:1;padding:3px 8px 3px 0;cursor:pointer;flex-shrink:0}
@media(max-width:720px){
  .chat-body{height:100dvh;overflow:hidden}
  .app{display:block;position:relative;width:100%;height:100dvh;max-width:none;overflow:hidden}
  .sidebar{position:absolute;inset:0;width:100%;height:100%;border-right:0;background:#fff;z-index:2;display:flex}
  .side-header{flex-wrap:nowrap;padding:15px 16px;gap:11px}
  .side-header>div:nth-child(2){display:block}
  .side-header>div:nth-child(2) strong{font-size:17px}
  .side-header>div:nth-child(2) small{font-size:12px}
  .logout{margin-left:auto;font-size:13px}
  .me-row{flex-direction:row;text-align:left;padding:12px 16px;gap:11px}
  .me-info{width:auto;flex:1}
  .me-info strong{font-size:14px}
  .me-info small{display:block;font-size:12px}
  .icon-link{display:block}
  .search-wrap{padding:12px 14px 8px;gap:6px}
  .search-wrap input{font-size:14px;padding:12px;border-radius:12px}
  .search-wrap button{display:block;min-width:30px}
  .section-title{padding:10px 17px 7px;font-size:11px}
  .user-list{padding-bottom:10px}
  .user-item{position:relative;flex-direction:row;text-align:left;padding:12px 16px;gap:11px;min-height:70px}
  .user-item .avatar{width:46px;height:46px;font-size:17px}
  .user-copy{flex:1;width:auto}
  .user-copy strong{font-size:14px}
  .user-copy small{font-size:12px}
  .presence{display:block}
  .unread{position:static;margin:0;font-size:11px}
  .side-footer{font-size:11px;padding:10px 15px}
  .conversation{position:absolute;inset:0;z-index:3;width:100%;height:100%;display:none;background:#f7f9fc}
  body.conversation-open .sidebar{display:none}
  body.conversation-open .conversation{display:flex}
  .welcome{display:none}
  .thread-header{min-height:64px;padding:10px 13px;gap:9px}
  .mobile-back{display:block}
  .thread-header .avatar{width:40px;height:40px}
  .thread-person{min-width:0;flex:1}
  .thread-person strong{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .thread-person small{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .messages{padding:14px 10px;gap:9px}
  .bubble{max-width:86%;padding:10px 12px}
  .message-text{font-size:15px}
  .message-image img{max-width:min(68vw,280px);max-height:38vh}
  .message-meta{font-size:10px}
  .composer{padding:9px 9px calc(9px + env(safe-area-inset-bottom));gap:7px}
  .attach{width:38px;height:38px;font-size:24px}
  .composer input[type=text],.composer input:not([type]){font-size:15px;padding:11px 13px;min-height:42px}
  .send-btn{font-size:14px;padding:10px 13px;white-space:nowrap}
  .composer-hint{padding:0 14px 7px;font-size:11px}
}
@media(max-width:380px){
  .side-header{padding:12px}
  .logout{font-size:12px}
  .user-item{padding:10px 12px}
  .send-btn{padding:10px}
  .attach{width:34px;height:34px}
  .composer{gap:5px}
}

/* Email-based contact search */
.search-note{padding:0 15px 7px;font-size:11px;color:var(--muted);line-height:1.4}
.search-results{max-height:220px;overflow:auto;border-bottom:1px solid var(--line)}
.search-result{display:flex;align-items:center;gap:8px;padding:9px 12px;border-top:1px solid #f0f2f5;background:#fbfdfd}
.search-result span{min-width:0;flex:1}
.search-result strong,.search-result small{display:block;overflow-wrap:anywhere}
.search-result strong{font-size:12px}
.search-result small{font-size:10px;color:var(--muted);margin-top:3px}
.search-result button{border:0;border-radius:8px;background:var(--brand);color:#fff;padding:7px 10px;font-weight:700;cursor:pointer}
.search-result button:disabled{opacity:.5}
.search-empty{padding:10px 12px;color:var(--muted);font-size:11px}
@media(max-width:720px){.search-note{padding:0 10px 6px;font-size:10px}.search-results{max-height:180px}.search-result{padding:8px 9px}.search-result button{padding:6px 8px;font-size:11px}}

/* Voice messaging */
.voice-btn{width:39px;height:39px;flex-shrink:0;border:0;border-radius:50%;background:#edf3f3;color:var(--brand);font-size:20px;cursor:pointer}.voice-btn:disabled{opacity:.6;cursor:wait}.voice-preview{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 16px;background:#fff;border-top:1px solid var(--line)}.voice-preview span{font-size:12px;color:var(--muted)}.voice-preview audio{width:min(100%,300px);height:38px}.voice-preview .primary,.cancel-voice{border:0;border-radius:9px;padding:8px 11px;cursor:pointer;font:inherit;font-size:13px}.cancel-voice{background:#f0f2f5;color:#485465}.voice-player{display:flex;align-items:center;margin-top:7px}.voice-play-btn{border:0;border-radius:18px;padding:8px 15px;background:var(--brand);color:#fff;cursor:pointer;font:inherit;font-size:13px;min-width:88px}.voice-play-btn:active{opacity:.8}.message-audio{display:none!important}.voice-preview .primary:disabled{opacity:.6}@media(max-width:720px){.voice-btn{width:36px;height:36px}.voice-preview{padding:8px;gap:7px}.voice-preview audio{width:100%;order:2}.voice-preview span{width:100%}.voice-preview .primary,.cancel-voice{font-size:12px;padding:8px}}

/* Desktop chat scrolling fix: keep the message list as the scrollable area */
@media (min-width:721px){
  .app{height:100vh;height:100dvh;min-height:0;overflow:hidden}
  .conversation{height:100%;min-height:0;overflow:hidden}
  .thread{height:100%;min-height:0;flex:1 1 auto;overflow:hidden}
  .messages{min-height:0;flex:1 1 0%;overflow-y:scroll;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-gutter:stable}
  .messages::-webkit-scrollbar{width:10px}
  .messages::-webkit-scrollbar-track{background:#eef2f7;border-radius:8px}
  .messages::-webkit-scrollbar-thumb{background:#aebbc7;border:2px solid #eef2f7;border-radius:8px}
  .messages{scrollbar-width:thin;scrollbar-color:#aebbc7 #eef2f7}
}

/* Image attachment selection and remove control */
.selected-image-info{display:flex;align-items:center;gap:10px;padding:5px 18px 8px;background:#fff;font-size:12px;color:var(--muted);min-width:0}.selected-image-info span{overflow-wrap:anywhere;min-width:0}.selected-image-info button{flex-shrink:0;border:0;border-radius:8px;background:#fff0ef;color:var(--danger);padding:5px 9px;cursor:pointer;font:inherit}.selected-image-info.hidden{display:none!important}

.notification-toggle{border:1px solid var(--line);background:#f6f8fa;color:var(--ink);border-radius:9px;padding:7px 9px;font:inherit;font-size:11px;cursor:pointer;white-space:nowrap}.notification-toggle:hover,.notification-toggle.notification-on{background:var(--soft);border-color:#b8e2d7;color:var(--brand2)}.notification-toggle:disabled{opacity:.55;cursor:not-allowed}@media(max-width:720px){.notification-toggle{font-size:10px;padding:6px 7px}.side-header{gap:5px}.logout{font-size:10px}}


/* Compact mobile-app-style headers and notification control */
.side-header{min-height:58px;padding:9px 12px;gap:8px}
.side-header .brand-mini{width:34px;height:34px;border-radius:10px;font-size:18px}
.side-header>div:nth-child(2) strong{font-size:15px;line-height:1.15}
.side-header>div:nth-child(2) small{font-size:11px;margin-top:1px}
.notification-toggle{flex-shrink:0;padding:6px 8px;font-size:11px;line-height:1.2}
.thread-header{min-height:56px;padding:7px 12px;gap:9px}
.thread-header .avatar{width:38px;height:38px}
.mobile-back{width:34px;min-width:34px;text-align:center;font-size:27px;padding:0 4px}
@media(max-width:720px){
  .side-header{min-height:54px;padding:7px 10px;gap:7px}
  .side-header>div:nth-child(2) strong{font-size:15px}
  .side-header>div:nth-child(2) small{font-size:10px}
  .notification-toggle{font-size:10px;padding:6px 7px;border-radius:8px}
  .logout{font-size:11px;white-space:nowrap}
  .thread-header{min-height:54px;padding:6px 9px;gap:7px}
  .thread-header .avatar{width:36px;height:36px}
}
@media(max-width:380px){
  .side-header{padding:6px 7px;gap:5px}
  .side-header .brand-mini{width:30px;height:30px}
  .side-header>div:nth-child(2) small{display:none}
  .notification-toggle{font-size:9px;padding:5px 5px}
  .logout{font-size:10px}
}

/* FIX: clearly visible top border + lower mobile header controls */
@media screen and (max-width:720px){
  .chat-body .side-header,
  .chat-body .thread-header{
    border-top:4px solid #167d70 !important;
    padding-top:18px !important;
    box-sizing:border-box !important;
  }
  .chat-body .side-header .notification-toggle,
  .chat-body .thread-header .mobile-back{
    margin-top:8px !important;
    position:relative;
    top:2px;
  }
}