:root{--b:#0D47FF;--t:#00D4C4;--n:#0A1B3D;--g:#1F2937;--m:#6B7280;--bg:#F5F8FC;--bd:#E5E7EB}*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:var(--bg);color:var(--g)}a{text-decoration:none;color:inherit}.topbar{height:70px;background:#fff;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;padding:0 28px}.brand{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:900;color:var(--b)}.brand-icon{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--b),var(--t));color:#fff;display:grid;place-items:center}.topbar nav{display:flex;gap:18px;font-weight:700}.topbar nav a:hover{color:var(--b)}.danger{color:#DC2626!important}.page{max-width:1200px;margin:auto;padding:28px}.card{background:#fff;border:1px solid var(--bd);border-radius:18px;padding:22px;box-shadow:0 10px 30px rgba(15,23,42,.06)}.auth{min-height:calc(100vh - 130px);display:grid;place-items:center}.auth .card{width:min(460px,100%)}h1,h2,h3{color:var(--n);margin-top:0}label{display:block;font-weight:700;margin:14px 0 6px}input,textarea{width:100%;padding:12px 14px;border:1px solid #CBD5E1;border-radius:12px;font:inherit}textarea{min-height:100px}.btn,button{display:inline-flex;align-items:center;justify-content:center;padding:11px 16px;border:0;border-radius:12px;font-weight:800;cursor:pointer;background:linear-gradient(135deg,var(--b),var(--t));color:#fff}.btn2{background:#EEF2FF;color:var(--b)}.alert{padding:12px 14px;border-radius:12px;margin:12px 0}.error{background:#FEE2E2;color:#991B1B}.ok{background:#DCFCE7;color:#166534}.grid{display:grid;gap:20px}.grid2{grid-template-columns:320px 1fr}.list{display:flex;flex-direction:column;gap:10px}.item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--bd);border-radius:14px;background:#fff}.item:hover{border-color:#93C5FD}.avatar{width:48px;height:48px;border-radius:50%;object-fit:cover}.avatar-lg{width:100px;height:100px}.grow{flex:1;min-width:0}.meta{font-size:13px;color:var(--m)}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px}.stat{padding:18px;border:1px solid var(--bd);border-radius:16px;background:#fff}.stat b{display:block;font-size:26px;color:var(--b)}.chat{display:grid;grid-template-columns:330px 1fr;min-height:72vh;background:#fff;border:1px solid var(--bd);border-radius:18px;overflow:hidden}.side{padding:14px;border-right:1px solid var(--bd);background:#F8FAFC}.mainchat{display:flex;flex-direction:column}.chathead{padding:14px 18px;border-bottom:1px solid var(--bd);display:flex;gap:12px;align-items:center}.messages{height:55vh;overflow:auto;padding:20px;background:linear-gradient(#F8FAFC,#EEF6FF)}.row{display:flex;margin-bottom:12px}.mine{justify-content:flex-end}.bubble{max-width:72%;padding:10px 13px;border:1px solid var(--bd);border-radius:16px;background:#fff}.mine .bubble{background:linear-gradient(135deg,var(--b),#1687FF);color:#fff;border:0}.bubble small{display:block;opacity:.75;margin-top:5px}.compose{padding:14px;border-top:1px solid var(--bd);display:flex;gap:10px}.empty{text-align:center;padding:30px;color:var(--m)}@media(max-width:850px){.grid2,.chat{grid-template-columns:1fr}.side{border-right:0;border-bottom:1px solid var(--bd)}.stats{grid-template-columns:1fr}.topbar nav{gap:9px;font-size:13px}.page{padding:16px}}

/* WAOLINK approved branding */
.brand{gap:9px}
.brand img{width:44px;height:44px;object-fit:cover;border-radius:12px}
.brand-word{display:flex;align-items:baseline;line-height:1;font-weight:900;letter-spacing:-1px}
.brand-word strong{font-size:25px;color:#0A47B8}
.brand-word small{font-size:16px;color:#00AFC0;margin-left:2px;font-weight:900}
.auth-brand{text-align:center;margin-bottom:18px}
.auth-brand img{width:min(390px,92%);height:auto}
.auth-card{overflow:hidden}
@media(max-width:650px){
  .brand-word strong{font-size:20px}
  .brand-word small{font-size:13px}
  .topbar{padding:0 14px}
}

/* Correct approved WAOLINK branding */
.brand-icon{display:none!important}
.brand{display:flex;align-items:center;gap:9px}
.brand-logo-img{width:42px;height:42px;object-fit:cover;border-radius:11px}
.brand-word{display:flex;align-items:baseline;line-height:1;font-weight:900;letter-spacing:-1px}
.brand-word strong{font-size:27px;color:#0B49BA}
.brand-word small{font-size:16px;color:#00B7C5;margin-left:2px;font-weight:900}
.auth-card{width:min(520px,100%);overflow:hidden}
.auth-brand{text-align:center;margin:-6px 0 12px}
.auth-brand img{display:block;width:100%;max-width:455px;height:auto;margin:0 auto}
@media(max-width:650px){
  .brand-logo-img{width:38px;height:38px}
  .brand-word strong{font-size:22px}
  .brand-word small{font-size:13px}
  .auth-brand img{max-width:390px}
}

/* Messaging phase 2 */
.chat-list-icon{
  width:38px;height:38px;border-radius:12px;
  background:linear-gradient(135deg,var(--b),var(--t));
  color:#fff;display:grid;place-items:center;flex:0 0 auto
}
.message-wrap{max-width:76%;position:relative}
.message-wrap:hover .message-actions{opacity:1}
.bubble{max-width:none}
.sender-name{display:block;margin-bottom:4px;font-size:12px;color:#0B49BA}
.mine .sender-name{color:#fff}
.quoted-message{
  border-left:3px solid var(--t);
  background:rgba(13,71,255,.08);
  border-radius:8px;
  padding:7px 9px;
  margin-bottom:7px;
  font-size:12px
}
.mine .quoted-message{background:rgba(255,255,255,.16);border-left-color:#fff}
.quoted-message strong{display:block;margin-bottom:2px}
.message-footer{
  display:flex;justify-content:flex-end;gap:8px;
  margin-top:6px;font-size:11px;opacity:.8
}
.read-status{color:#7FF7F0;font-weight:800}
.delivery-status{font-weight:700}
.message-actions{
  display:flex;gap:6px;margin-top:4px;
  opacity:0;transition:.15s ease
}
.message-actions button{
  padding:4px 8px;border-radius:8px;
  background:#EAF1FF;color:#0B49BA;font-size:11px
}
.message-actions .delete-action{background:#FEE2E2;color:#B91C1C}
.deleted-message{font-style:italic;opacity:.72}
.reply-bar{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;border-top:1px solid var(--bd);
  background:#F8FAFC
}
.reply-bar[hidden]{display:none}
.reply-bar strong{color:#0B49BA}
.reply-close{
  width:34px;height:34px;padding:0;border-radius:50%;
  background:#E5E7EB;color:#374151;font-size:22px
}
.typing-indicator{font-size:12px;color:#00A6A6;margin-top:2px;font-weight:700}
@media(max-width:700px){
  .message-wrap{max-width:88%}
  .message-actions{opacity:1}
}

/* Media messaging stage */
.compose{align-items:center}
.compose-tool{
  flex:0 0 42px;width:42px;height:42px;padding:0;border-radius:50%;
  background:#EAF1FF;color:#0B49BA;font-size:25px;font-weight:500
}
.compose-tool.microphone{font-size:18px;background:#E6FFFB;color:#007A78}
.compose-tool:hover{transform:translateY(-1px)}
.attachment-preview,.recording-bar{
  display:flex;align-items:center;gap:12px;padding:10px 14px;
  border-top:1px solid var(--bd);background:#F8FAFC
}
.attachment-preview[hidden],.recording-bar[hidden]{display:none}
.recording-bar{color:#B91C1C}
.record-dot{
  width:10px;height:10px;border-radius:50%;background:#EF4444;
  animation:recordPulse 1s infinite
}
@keyframes recordPulse{50%{opacity:.25}}
.btn-stop-record,.btn-cancel-record{
  padding:7px 12px;border-radius:9px;font-size:12px
}
.btn-stop-record{background:#DC2626;color:#fff}
.btn-cancel-record{background:#E5E7EB;color:#374151}
.upload-progress{
  padding:8px 14px;border-top:1px solid var(--bd);background:#fff;
  display:flex;align-items:center;gap:10px
}
.upload-progress[hidden]{display:none}
.upload-progress-track{
  flex:1;height:8px;background:#E5E7EB;border-radius:99px;overflow:hidden
}
#uploadProgressBar{
  width:0;height:100%;background:linear-gradient(90deg,var(--b),var(--t));
  transition:width .12s
}
#uploadProgressText{font-size:12px;color:#64748B;min-width:92px}
.chat-image{
  display:block;max-width:min(360px,100%);max-height:330px;
  border-radius:12px;object-fit:cover;cursor:zoom-in;margin-bottom:8px
}
.attachment-download{
  display:block;font-size:11px;margin-top:6px;
  color:inherit;text-decoration:underline;opacity:.8
}
.voice-note{
  display:flex;align-items:center;gap:9px;min-width:280px;
  max-width:100%;padding:6px 0
}
.voice-note-icon{
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.22)
}
.voice-note audio{width:260px;max-width:calc(100vw - 180px);height:38px}
.document-card{
  display:flex;align-items:center;gap:11px;
  padding:11px;border-radius:12px;
  background:rgba(255,255,255,.18);color:inherit;margin-bottom:7px
}
:not(.mine) .document-card{background:#F1F5F9}
.document-icon{
  width:42px;height:42px;border-radius:10px;background:#fff;
  display:grid;place-items:center;font-size:23px;flex:0 0 auto
}
.document-details{min-width:0;display:flex;flex-direction:column}
.document-details strong{
  max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.document-details small{opacity:.75;margin-top:3px}
.image-viewer{
  position:fixed;inset:0;z-index:1000;background:rgba(2,6,23,.92);
  display:grid;place-items:center;padding:40px
}
.image-viewer[hidden]{display:none}
.image-viewer img{
  max-width:94vw;max-height:90vh;object-fit:contain;border-radius:8px
}
.image-viewer-close{
  position:fixed;top:18px;right:24px;width:44px;height:44px;
  border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:30px
}
body.modal-open{overflow:hidden}
.date-separator{
  width:max-content;max-width:90%;margin:14px auto;
  padding:5px 12px;border-radius:999px;background:#DDE9F7;
  color:#475569;font-size:12px;font-weight:800;position:sticky;top:5px;z-index:2
}
@media(max-width:700px){
  .compose{gap:6px}
  .compose-tool{width:38px;height:38px;flex-basis:38px}
  .chat-image{max-width:100%;max-height:280px}
  .voice-note{min-width:220px}
  .voice-note audio{width:210px}
  .image-viewer{padding:20px}
}

.chat-header-tool,.mobile-back-button{margin-left:auto;width:38px;height:38px;border-radius:50%;padding:0;background:#eef4ff;color:#0b49ba}.mobile-back-button{display:none;margin-left:0;font-size:28px}.forwarded-label,.edited-label{font-size:11px;opacity:.7;font-style:italic}.reaction-summary{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}.reaction-chip{padding:3px 7px;border-radius:999px;background:#f1f5f9;color:#334155;border:1px solid #d8e1ec;font-size:12px}.mine .reaction-chip{background:rgba(255,255,255,.2);color:#fff}.mine-reaction{outline:2px solid #00d4c4}.reaction-picker{position:absolute;bottom:32px;left:0;z-index:20;display:flex;gap:3px;padding:6px;border-radius:999px;background:#fff;box-shadow:0 8px 28px rgba(15,23,42,.2)}.reaction-picker button{width:31px;height:31px;padding:0;border-radius:50%;background:transparent;font-size:18px}.search-panel{border-bottom:1px solid var(--bd);background:#fff;padding:10px 14px;position:relative}.search-panel[hidden]{display:none}.search-panel>button{position:absolute;top:14px;right:18px;width:30px;height:30px;border-radius:50%;padding:0;background:#e5e7eb;color:#475569}.search-results{max-height:240px;overflow:auto;margin-top:8px;display:grid;gap:6px}.search-result-item{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:center;text-align:left;padding:9px 10px;background:#f8fafc;color:#334155;border:1px solid #e2e8f0;border-radius:10px}.search-result-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-highlight .bubble{animation:flash 1.8s}@keyframes flash{50%{box-shadow:0 0 0 5px rgba(0,212,196,.45)}}@media(max-width:760px){.page{padding:0}.chat{display:block;min-height:calc(100vh - 70px);border-radius:0}.chat .side{display:block;width:100%;min-height:calc(100vh - 70px)}.chat .mainchat{display:none;height:calc(100vh - 70px)}.chat.mobile-chat-open .side{display:none}.chat.mobile-chat-open .mainchat{display:flex}.mobile-back-button{display:grid;place-items:center}.search-result-item{grid-template-columns:1fr}.message-actions{flex-wrap:wrap}}

.chat-load-error{
  margin:30px auto;
  max-width:560px;
  padding:14px 16px;
  border-radius:12px;
  background:#FEE2E2;
  color:#991B1B;
  border:1px solid #FECACA;
  text-align:center;
  font-weight:700;
}

/* Final stable reaction picker */
.reaction-picker-fixed{
  position:fixed!important;
  display:flex!important;
  gap:5px;
  padding:7px;
  min-width:278px;
  border-radius:999px;
  background:#fff;
  border:1px solid #dbe4ef;
  box-shadow:0 12px 35px rgba(15,23,42,.28);
  z-index:99999!important;
  pointer-events:auto!important;
}
.reaction-picker-fixed button{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:transparent!important;
  font-size:22px!important;
  line-height:38px!important;
  cursor:pointer!important;
  pointer-events:auto!important;
}
.reaction-picker-fixed button:hover{
  background:#eef4ff!important;
  transform:scale(1.08);
}

/* Compact reaction picker UI */
.reaction-picker-fixed{
  position:fixed!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;

  width:280px!important;
  min-width:280px!important;
  max-width:280px!important;
  height:46px!important;
  min-height:46px!important;
  max-height:46px!important;

  padding:4px 8px!important;
  margin:0!important;
  border-radius:24px!important;
  background:#ffffff!important;
  border:1px solid #dbe4ef!important;
  box-shadow:0 8px 24px rgba(15,23,42,.18)!important;
  overflow:visible!important;
  z-index:99999!important;

  bottom:auto!important;
  right:auto!important;
}

.reaction-picker-fixed button{
  display:grid!important;
  place-items:center!important;

  width:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  max-height:38px!important;

  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:50%!important;
  background:transparent!important;

  font-size:21px!important;
  line-height:1!important;
  cursor:pointer!important;
  pointer-events:auto!important;
}

.reaction-picker-fixed button:hover{
  background:#eef4ff!important;
  transform:scale(1.08)!important;
}

@media(max-width:520px){
  .reaction-picker-fixed{
    width:258px!important;
    min-width:258px!important;
    max-width:258px!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    padding:3px 6px!important;
  }

  .reaction-picker-fixed button{
    width:36px!important;
    min-width:36px!important;
    max-width:36px!important;
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
    font-size:20px!important;
  }
}

/* Expanded emoji reaction picker */
.reaction-picker-fixed{
  width:min(420px,calc(100vw - 24px))!important;
  min-width:0!important;
  max-width:min(420px,calc(100vw - 24px))!important;
  height:52px!important;
  min-height:52px!important;
  max-height:52px!important;

  justify-content:flex-start!important;
  gap:4px!important;
  padding:6px 8px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:thin;
  scrollbar-color:#cbd5e1 transparent;
  white-space:nowrap!important;
}

.reaction-picker-fixed::-webkit-scrollbar{
  height:4px;
}
.reaction-picker-fixed::-webkit-scrollbar-thumb{
  background:#cbd5e1;
  border-radius:999px;
}
.reaction-picker-fixed::-webkit-scrollbar-track{
  background:transparent;
}

.reaction-picker-fixed button{
  flex:0 0 38px!important;
  width:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  max-height:38px!important;
  font-size:22px!important;
}

@media(max-width:520px){
  .reaction-picker-fixed{
    width:calc(100vw - 20px)!important;
    max-width:calc(100vw - 20px)!important;
    height:50px!important;
    min-height:50px!important;
    max-height:50px!important;
  }
  .reaction-picker-fixed button{
    flex-basis:36px!important;
    width:36px!important;
    min-width:36px!important;
    max-width:36px!important;
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
    font-size:21px!important;
  }
}

/* Safe conversation info and shared media page */
.conversation-info-page{max-width:980px;margin:0 auto;display:grid;gap:20px}
.info-hero{display:flex;align-items:center;gap:18px}
.group-info-avatar{width:100px;height:100px;border-radius:28px;display:grid;place-items:center;font-size:42px;background:linear-gradient(135deg,var(--b),var(--t));color:white}
.shared-image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.shared-image-card{display:block;border:1px solid var(--bd);border-radius:14px;overflow:hidden;background:#fff}
.shared-image-card img{width:100%;height:130px;object-fit:cover;display:block}
.shared-image-card span{display:block;padding:7px 9px;font-size:12px;color:#64748b}
.shared-list{display:grid;gap:10px}
.shared-list-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--bd);border-radius:14px;background:#fff}
.shared-file-icon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:#eef4ff;font-size:22px;flex:0 0 auto}
.shared-list-item audio{width:100%;max-width:420px;margin-top:8px}
.chat-header-tool.info-link{display:grid;place-items:center;text-decoration:none;font-weight:900;font-size:18px}
@media(max-width:760px){.conversation-info-page{padding:0 12px}.info-hero{align-items:flex-start;flex-wrap:wrap}.shared-image-grid{grid-template-columns:repeat(2,1fr)}}

/* Make the new conversation info button clearly visible */
.chat-header-tool.info-link{
  display:grid!important;
  place-items:center!important;
  width:38px!important;
  height:38px!important;
  border-radius:50%!important;
  background:#EEF4FF!important;
  color:#0B49BA!important;
  text-decoration:none!important;
  font-weight:900!important;
  font-size:18px!important;
  margin-left:8px!important;
}
.chat-header-tool.info-link:hover{
  background:#DBEAFE!important;
  transform:translateY(-1px);
}
.chat-info-floating{
  position:absolute;
  right:18px;
  top:78px;
  z-index:8;
  padding:8px 12px;
  border-radius:999px;
  background:#EEF4FF;
  color:#0B49BA;
  font-weight:900;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(15,23,42,.12);
}

/* Conversation info button and page layout fix */
.chat-header-tools{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}
.chat-header-tools .chat-header-tool,
.chat-header-tool.info-link{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  margin:0!important;
  background:#EEF4FF!important;
  color:#0B49BA!important;
  text-decoration:none!important;
  font-weight:900!important;
  font-size:18px!important;
  border:0!important;
}
.chat-header-tools .chat-header-tool:hover,
.chat-header-tool.info-link:hover{
  background:#DBEAFE!important;
  transform:translateY(-1px);
}

.conversation-info-page{
  width:min(980px,calc(100vw - 32px))!important;
  max-width:980px!important;
  margin:0 auto!important;
  display:grid!important;
  gap:18px!important;
}
.info-profile-card{padding:18px!important}
.info-hero{display:flex!important;align-items:center!important;gap:18px!important}
.group-info-avatar{width:92px!important;height:92px!important;border-radius:26px!important;display:grid!important;place-items:center!important;font-size:40px!important;background:linear-gradient(135deg,var(--b),var(--t))!important;color:white!important}

.shared-card{padding:0!important;overflow:hidden!important}
.shared-tabs{
  display:flex;
  gap:6px;
  padding:12px;
  border-bottom:1px solid var(--bd);
  overflow-x:auto;
  background:#fff;
}
.shared-tab{
  flex:0 0 auto;
  border:0;
  border-radius:999px;
  padding:9px 14px;
  background:#EEF4FF;
  color:#0B49BA;
  font-weight:900;
}
.shared-tab span{
  display:inline-grid;
  place-items:center;
  min-width:20px;
  height:20px;
  margin-left:5px;
  border-radius:999px;
  background:#fff;
  font-size:12px;
}
.shared-tab.active{
  background:linear-gradient(135deg,var(--b),var(--t));
  color:#fff;
}
.shared-tab-panel{
  display:none;
  padding:16px;
}
.shared-tab-panel.active{display:block}

.shared-image-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr))!important;
  gap:14px!important;
}
.shared-image-card{
  border:1px solid var(--bd)!important;
  border-radius:16px!important;
  overflow:hidden!important;
  background:#fff!important;
  box-shadow:0 4px 14px rgba(15,23,42,.05)!important;
}
.shared-image-card img{
  width:100%!important;
  height:145px!important;
  max-height:145px!important;
  object-fit:cover!important;
  display:block!important;
}
.shared-item-footer{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px;
  align-items:flex-start;
}
.shared-item-footer strong{
  display:block;
  max-width:170px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:13px;
}
.shared-item-footer span{
  display:block;
  color:#64748b;
  font-size:12px;
  margin-top:3px;
}
.shared-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.shared-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 9px;
  border-radius:999px;
  background:#EEF4FF;
  color:#0B49BA;
  font-size:12px;
  font-weight:900;
  text-decoration:none;
}
.shared-actions a:hover{background:#DBEAFE}
.shared-list{display:grid!important;gap:10px!important}
.shared-list-item{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  padding:12px!important;
  border:1px solid var(--bd)!important;
  border-radius:14px!important;
  background:#fff!important;
}
.shared-file-icon{
  width:46px!important;
  height:46px!important;
  border-radius:13px!important;
  display:grid!important;
  place-items:center!important;
  background:#eef4ff!important;
  font-size:22px!important;
  flex:0 0 auto!important;
}
.shared-list-item audio{width:100%!important;max-width:420px!important;margin-top:8px!important}

@media(max-width:760px){
  .conversation-info-page{width:100%!important;padding:0 12px!important}
  .info-hero{align-items:flex-start!important;flex-wrap:wrap!important}
  .shared-image-grid{grid-template-columns:repeat(2,1fr)!important}
  .shared-image-card img{height:120px!important;max-height:120px!important}
  .shared-list-item{align-items:flex-start!important;flex-wrap:wrap!important}
  .shared-actions{width:100%;justify-content:flex-start}
}

/* Forced visible conversation info button */
.chat-title-actions{
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}
.chat-info-button{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  background:#EEF4FF!important;
  color:#0B49BA!important;
  text-decoration:none!important;
  font-weight:900!important;
  font-size:19px!important;
  border:0!important;
  box-shadow:0 4px 12px rgba(15,23,42,.08)!important;
}
.chat-info-button:hover{
  background:#DBEAFE!important;
  transform:translateY(-1px);
}
.chat-info-floating-fixed{
  position:absolute;
  top:78px;
  right:20px;
  z-index:20;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:38px;
  padding:0 13px;
  border-radius:999px;
  background:#EEF4FF;
  color:#0B49BA;
  font-weight:900;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(15,23,42,.14);
}

/* Chat list improvement */
.conversation-list{display:grid;gap:10px}
.conversation-list.compact{gap:8px}
.conversation-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border:1px solid var(--bd);
  border-radius:16px;
  background:#fff;
  color:inherit;
  text-decoration:none;
  transition:.16s ease;
}
.conversation-card:hover{
  border-color:#b7cdfd;
  background:#f8fbff;
  transform:translateY(-1px);
}
.conversation-card.active{
  border-color:#0D47FF;
  background:#eef4ff;
}
.conversation-card.unread{
  border-color:#00D4C4;
  box-shadow:0 4px 18px rgba(0,212,196,.12);
}
.conversation-group-avatar{
  width:48px;
  height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:linear-gradient(135deg,var(--b),var(--t));
  color:#fff;
  font-size:21px;
}
.conversation-text{min-width:0;flex:1}
.conversation-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
}
.conversation-title-row strong{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.conversation-title-row span{
  color:#64748b;
  font-size:12px;
  flex:0 0 auto;
}
.conversation-preview{
  margin-top:4px;
  color:#64748b;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.conversation-card.unread .conversation-preview,
.conversation-card.unread .conversation-title-row strong{
  color:#0A1B3D;
  font-weight:900;
}
.unread-badge{
  position:absolute;
  right:10px;
  bottom:10px;
  min-width:21px;
  height:21px;
  padding:0 6px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#00D4C4;
  color:#fff;
  font-size:12px;
  font-weight:900;
}
.side .conversation-card{padding:10px}
.side .conversation-preview{max-width:185px}
@media(max-width:760px){
  .side .conversation-preview{max-width:calc(100vw - 150px)}
}

/* More visible chat-list update */
.conversation-list{gap:12px!important}
.conversation-card{
  min-height:76px!important;
  padding:13px 14px!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
}
.conversation-card.active{
  border:2px solid #0D47FF!important;
  background:linear-gradient(135deg,#eef4ff,#f4fffd)!important;
}
.conversation-card.unread{
  border:2px solid #00D4C4!important;
  background:linear-gradient(135deg,#ecfeff,#ffffff)!important;
}
.conversation-avatar-wrap{position:relative;flex:0 0 auto}
.conversation-avatar-wrap .avatar,.conversation-group-avatar{
  width:52px!important;
  height:52px!important;
}
.online-dot{
  position:absolute;
  right:1px;
  bottom:2px;
  width:13px;
  height:13px;
  border-radius:50%;
  background:#22c55e;
  border:2px solid #fff;
  box-shadow:0 0 0 2px rgba(34,197,94,.2);
}
.conversation-title-row strong{font-size:16px!important}
.conversation-time{
  font-size:12px!important;
  font-weight:800!important;
  color:#0B49BA!important;
  background:#EEF4FF;
  padding:3px 7px;
  border-radius:999px;
}
.conversation-preview-row{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:5px;
  min-width:0;
}
.conversation-preview-label{
  flex:0 0 auto;
  font-size:10px;
  line-height:1;
  padding:4px 6px;
  border-radius:999px;
  background:#E6FFFB;
  color:#007A78;
  font-weight:900;
  text-transform:uppercase;
}
.conversation-preview{
  margin-top:0!important;
  font-size:13px!important;
  color:#334155!important;
}
.conversation-subtitle{
  margin-top:3px;
  font-size:11px;
  color:#64748b;
}
.unread-badge{
  top:10px!important;
  right:10px!important;
  bottom:auto!important;
  min-width:24px!important;
  height:24px!important;
  background:#ff3366!important;
  box-shadow:0 4px 12px rgba(255,51,102,.28);
}
.side .conversation-card{min-height:72px!important}
.side .conversation-title-row strong{max-width:135px}
.side .conversation-preview{max-width:150px!important}
@media(max-width:760px){
  .side .conversation-preview{max-width:calc(100vw - 190px)!important}
  .conversation-card{min-height:78px!important}
}

/* WAOLINK QR contacts */
.qr-page{
  min-height:calc(100vh - 120px);
  display:grid;
  place-items:center;
  padding:24px;
}
.qr-card{
  width:min(520px,100%);
  text-align:center;
}
.qr-profile{
  display:flex;
  align-items:center;
  gap:14px;
  text-align:left;
  margin-bottom:18px;
}
.qr-profile.center{
  justify-content:center;
  text-align:center;
  flex-direction:column;
}
.qr-profile h1{
  margin:0 0 4px;
}
.qr-box{
  width:292px;
  height:292px;
  margin:0 auto 14px;
  display:grid;
  place-items:center;
  border-radius:28px;
  background:#fff;
  border:1px solid var(--bd);
  box-shadow:0 16px 38px rgba(15,23,42,.10);
}
.qr-box img{
  width:260px;
  height:260px;
  display:block;
}
.qr-user{
  display:grid;
  gap:3px;
  margin-bottom:14px;
}
.qr-user strong{
  font-size:22px;
}
.qr-user span{
  color:#64748b;
}
.qr-link-row{
  display:flex;
  gap:8px;
  margin:14px 0;
}
.qr-link-row input{
  flex:1;
  min-width:0;
}
.qr-link-row button{
  flex:0 0 auto;
}
.qr-actions{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
.qr-note{
  margin-top:14px;
  font-size:12px;
  color:#64748b;
}
.center-text{text-align:center}
@media(max-width:620px){
  .qr-page{padding:14px}
  .qr-profile{align-items:flex-start}
  .qr-box{
    width:250px;
    height:250px;
    border-radius:22px;
  }
  .qr-box img{
    width:220px;
    height:220px;
  }
  .qr-link-row{
    flex-direction:column;
  }
}


/* Brand consistency hotfix */
.brand{
  gap:12px;
}
.brand-logo-img{
  width:42px!important;
  height:42px!important;
  object-fit:cover;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(10,71,184,.12);
}
.brand-word{
  display:inline-flex;
  align-items:flex-end;
  gap:0;
  line-height:1;
  letter-spacing:-0.6px;
}
.brand-word strong,
.brand-inline strong{
  font-size:25px;
  font-weight:900;
  color:#0A47B8;
}
.brand-word small,
.brand-inline small{
  font-size:15px;
  font-weight:900;
  color:#14C7D2;
  margin-left:2px;
  line-height:1.05;
}
.brand-qr-title{
  display:flex;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 6px;
}
.brand-inline{
  display:inline-flex;
  align-items:flex-end;
  line-height:1;
  letter-spacing:-0.6px;
}
.brand-qr-title .brand-inline strong{
  font-size:50px;
}
.brand-qr-title .brand-inline small{
  font-size:28px;
}
.btn-brand strong{color:inherit;font-size:inherit}
.btn-brand small{color:inherit;font-size:.82em}
.qr-card .meta{max-width:420px}
@media(max-width:650px){
  .brand-word strong{font-size:22px}
  .brand-word small{font-size:13px}
  .brand-qr-title{gap:6px}
  .brand-qr-title .brand-inline strong{font-size:34px}
  .brand-qr-title .brand-inline small{font-size:20px}
}


/* Unified WAOLINK brand style */
.brand-inline{
  display:inline-flex;
  align-items:flex-end;
  line-height:1;
  letter-spacing:-0.9px;
}
.brand-inline strong{
  font-size:1em;
  color:#0B49BA;
  font-weight:900;
}
.brand-inline small{
  font-size:.60em;
  color:#00B7C5;
  margin-left:2px;
  font-weight:900;
}

.auth-waolink{
  min-height:calc(100vh - 130px);
}
.auth-brand-card{
  width:min(560px,100%);
  padding:26px;
  border-radius:24px;
  box-shadow:0 16px 40px rgba(11,73,186,.10);
}
.auth-brand-top{
  margin-bottom:10px;
}
.brand-welcome{
  text-align:center;
  margin-bottom:18px;
}
.brand-welcome h1{
  margin:0 0 8px;
  font-size:38px;
  line-height:1.05;
}
.brand-welcome h1 .brand-inline{
  font-size:1em;
}
.brand-welcome p{
  margin:0;
  color:#64748b;
  font-size:15px;
}
.brand-form input{
  background:#f8fbff;
}
.brand-btn-full{
  min-height:48px;
  font-size:16px;
}
.auth-switch{
  text-align:center;
  margin-top:16px;
}
.brand-link{
  color:#0D47FF;
  font-weight:800;
}

.brand-dashboard-top{
  margin-bottom:18px;
  padding:20px 24px;
  background:linear-gradient(135deg,#ffffff,#f4fbff);
}
.brand-dashboard-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.brand-dashboard-wordmark .brand-inline{
  font-size:52px;
}
.brand-dashboard-wordmark p{
  margin:8px 0 0;
  color:#64748b;
  font-size:15px;
}
.brand-dashboard-user{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border:1px solid var(--bd);
  border-radius:16px;
  background:#fff;
}
.brand-dashboard-user strong{
  color:var(--n);
}
.brand-stats{
  margin-top:0;
}
.brand-stat{
  background:linear-gradient(180deg,#fff,#fbfdff);
}
.brand-stat span{
  display:block;
  color:#334155;
  font-weight:700;
}
.profile-summary-card{
  border-radius:22px;
}
.profile-summary-top{
  display:flex;
  align-items:center;
  gap:18px;
}
.avatar-xl{
  width:112px;
  height:112px;
}
.profile-summary-note{
  margin:10px 0 0;
  color:#64748b;
}
.profile-summary-actions{
  display:grid;
  gap:10px;
  margin-top:20px;
}
.brand-conversation-card{
  border-radius:22px;
}
.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.section-head h2{
  margin:0;
}
.section-chip{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border-radius:999px;
  background:#eef4ff;
  color:#0B49BA;
  font-size:12px;
  font-weight:900;
  letter-spacing:.2px;
}

.brand-profile-card{
  max-width:860px;
  margin:auto;
  overflow:hidden;
  padding:0;
  border-radius:24px;
}
.brand-profile-banner{
  padding:26px 30px;
  background:linear-gradient(135deg,#f4fbff,#eef4ff);
  border-bottom:1px solid var(--bd);
}
.brand-profile-title .brand-inline{
  font-size:48px;
}
.brand-profile-title p{
  margin:8px 0 0;
  color:#64748b;
  font-weight:700;
}
.brand-profile-body{
  display:flex;
  gap:22px;
  align-items:flex-start;
  padding:28px 30px;
}
.avatar-hero{
  width:120px;
  height:120px;
}
.brand-profile-bio{
  margin:14px 0 0;
  color:#334155;
  line-height:1.55;
}
.brand-profile-meta{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
  margin-top:18px;
  max-width:420px;
}
.meta-box{
  padding:12px 14px;
  border:1px solid var(--bd);
  border-radius:16px;
  background:#f8fbff;
}
.meta-box strong{
  display:block;
  color:var(--n);
  margin-bottom:5px;
}
.meta-box span{
  color:#64748b;
  font-size:14px;
}

@media(max-width:850px){
  .brand-dashboard-title,
  .brand-profile-body,
  .profile-summary-top{
    flex-direction:column;
    align-items:flex-start;
  }
  .brand-dashboard-wordmark .brand-inline{
    font-size:42px;
  }
  .brand-profile-title .brand-inline{
    font-size:40px;
  }
  .brand-profile-meta{
    grid-template-columns:1fr;
  }
}

@media(max-width:650px){
  .auth-brand-card{
    padding:20px 16px;
  }
  .brand-welcome h1{
    font-size:30px;
  }
  .brand-dashboard-top,
  .brand-profile-banner,
  .brand-profile-body{
    padding:18px;
  }
  .brand-dashboard-wordmark .brand-inline{
    font-size:34px;
  }
  .brand-profile-title .brand-inline{
    font-size:32px;
  }
  .avatar-xl,
  .avatar-hero{
    width:96px;
    height:96px;
  }
}

/* Privacy settings */
.privacy-page{
  width:min(900px, calc(100vw - 32px));
  margin:0 auto;
}
.privacy-card{
  border-radius:24px;
  overflow:hidden;
}
.privacy-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding-bottom:18px;
  border-bottom:1px solid var(--bd);
}
.privacy-brand{
  font-size:40px;
  margin-bottom:8px;
}
.privacy-head h1{
  margin:0 0 7px;
}
.privacy-head p{
  margin:0;
  color:#64748b;
}
.privacy-form{
  display:grid;
  gap:0;
}
.privacy-setting{
  display:grid;
  grid-template-columns:1fr 260px;
  gap:18px;
  align-items:center;
  padding:18px 0;
  border-bottom:1px solid var(--bd);
}
.privacy-setting h3{
  margin:0 0 6px;
}
.privacy-setting p{
  margin:0;
  color:#64748b;
}
.privacy-setting select{
  width:100%;
  padding:12px 14px;
  border:1px solid #CBD5E1;
  border-radius:12px;
  background:#f8fbff;
  font:inherit;
  font-weight:700;
}
.switch-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  margin:0;
  padding:12px 14px;
  border:1px solid #CBD5E1;
  border-radius:12px;
  background:#f8fbff;
  font-weight:800;
}
.switch-row input{
  width:20px;
  height:20px;
}
.privacy-save{
  margin-top:20px;
  min-height:48px;
}
.profile-action-stack{
  display:flex;
  flex-direction:column;
  gap:10px;
}
@media(max-width:760px){
  .privacy-page{
    width:100%;
    padding:0 12px;
  }
  .privacy-head{
    flex-direction:column;
  }
  .privacy-setting{
    grid-template-columns:1fr;
    gap:10px;
  }
  .privacy-brand{
    font-size:32px;
  }
}

/* WAOLINK Notifications */
.privacy-head-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.notification-card .privacy-setting button{
  width:100%;
}
.notification-status{
  margin-top:16px;
}
@media(max-width:760px){
  .privacy-head-actions{
    justify-content:flex-start;
  }
}

/* Safety / block and report */
.safety-card{
  max-width:780px;
  margin:0 auto;
}
.safety-user-card{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 0;
}
.safety-user-card h2{
  margin:0 0 4px;
}
.safety-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.danger-btn{
  background:linear-gradient(135deg,#ef4444,#f97316)!important;
}
.soft-line{
  border:0;
  border-top:1px solid var(--bd);
  margin:20px 0;
}
.report-form{
  display:grid;
  gap:10px;
}
.report-form select{
  width:100%;
  padding:12px 14px;
  border:1px solid #CBD5E1;
  border-radius:12px;
  background:#f8fbff;
  font:inherit;
}
.blocked-chat-banner{
  margin:10px 14px 0;
  padding:10px 12px;
  border-radius:12px;
  background:#fee2e2;
  color:#991b1b;
  font-weight:800;
  text-align:center;
}
.chat-info-button.safety-link{
  font-size:17px!important;
}

/* Phone support */
.phone-row{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:10px;
}
.phone-row select{
  width:100%;
  padding:12px 14px;
  border:1px solid #CBD5E1;
  border-radius:12px;
  background:#f8fbff;
  font:inherit;
  font-weight:700;
}
.phone-help{
  margin:8px 0 12px;
}
.verified{
  color:#059669;
}
.not-verified{
  color:#dc2626;
}
.meta-box small{
  display:block;
  margin-top:4px;
  color:#64748b;
}
@media(max-width:650px){
  .phone-row{
    grid-template-columns:1fr;
  }
}

/* Phone support profile fixes */
.small-inline-btn{
  display:inline-flex!important;
  margin-top:8px!important;
  padding:8px 12px!important;
  min-height:auto!important;
  font-size:13px!important;
}
button:disabled,
input:disabled{
  opacity:.55!important;
  cursor:not-allowed!important;
}

/* PHONE SAVE DISPLAY FIX */
.phone-row{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:10px;
}
.phone-row select{
  width:100%;
  padding:12px 14px;
  border:1px solid #CBD5E1;
  border-radius:12px;
  background:#f8fbff;
  font:inherit;
  font-weight:700;
}
.phone-help{margin:8px 0 12px}
.verified{color:#059669}
.not-verified{color:#dc2626}
.meta-box small{display:block;margin-top:4px;color:#64748b}
@media(max-width:650px){
  .phone-row{grid-template-columns:1fr}
}

/* PROFILE LAYOUT + PHONE DISPLAY FIX */
.fixed-profile-card{
  max-width:860px!important;
  margin:auto!important;
  overflow:hidden!important;
}
.profile-clean-body{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:24px!important;
  padding:28px 30px 18px!important;
}
.profile-clean-left{
  display:flex!important;
  align-items:flex-start!important;
  gap:22px!important;
  min-width:0!important;
}
.profile-main-details h1{
  margin:0 0 8px!important;
  font-size:30px!important;
}
.profile-clean-actions{
  display:grid!important;
  gap:10px!important;
  min-width:190px!important;
  flex:0 0 190px!important;
}
.profile-info-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  padding:0 30px 28px!important;
}
.profile-info-grid .meta-box{
  min-width:0!important;
}
.profile-info-grid .meta-box span{
  display:block!important;
  overflow-wrap:anywhere!important;
  line-height:1.35!important;
}
.phone-meta-box small{
  font-weight:900!important;
}
@media(max-width:760px){
  .profile-clean-body{
    flex-direction:column!important;
    padding:22px!important;
  }
  .profile-clean-left{
    flex-direction:column!important;
  }
  .profile-clean-actions{
    width:100%!important;
    min-width:0!important;
    flex:auto!important;
  }
  .profile-info-grid{
    grid-template-columns:1fr!important;
    padding:0 22px 22px!important;
  }
}

/* CONTACT DISCOVERY */
.discover-card{
  max-width:900px;
  margin:0 auto;
}
.discover-search{
  display:grid;
  grid-template-columns:1fr 120px;
  gap:10px;
  margin:18px 0;
}
.discover-search input{
  min-height:48px;
}
.discover-list{
  display:grid;
  gap:12px;
}
.discover-user-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px;
  border:1px solid var(--bd);
  border-radius:18px;
  background:linear-gradient(180deg,#fff,#f8fbff);
}
.discover-user-card strong{
  display:block;
  font-size:17px;
  color:var(--n);
}
.discover-user-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:6px;
  font-size:13px;
  color:#64748b;
}
.discover-actions{
  margin-left:auto;
  display:flex;
  gap:8px;
}
.discover-empty{
  padding:28px;
  text-align:center;
  color:#64748b;
}
@media(max-width:700px){
  .discover-search{
    grid-template-columns:1fr;
  }
  .discover-user-card{
    align-items:flex-start;
    flex-direction:column;
  }
  .discover-actions{
    width:100%;
    margin-left:0;
  }
  .discover-actions .btn,
  .discover-actions form,
  .discover-actions button{
    width:100%;
  }
}

/* PHONE LOGIN FLOW */
.phone-login-card{
  max-width:560px!important;
}
.phone-login-alt{
  width:100%;
  margin-top:10px;
  text-align:center;
}
.phone-login-note{
  margin-top:14px;
  padding:10px 12px;
  border-radius:12px;
  background:#eef4ff;
  color:#334155;
  font-size:13px;
  text-align:center;
}


/* =========================================================
   WAOLINK MOBILE LAYOUT
   Layout only. No message/database logic changed.
   ========================================================= */

@media(max-width: 820px){
  html, body{
    width:100%;
    min-width:0!important;
    overflow-x:hidden!important;
  }

  body{
    background:#f3f7fb!important;
  }

  .topbar,
  header,
  .nav{
    min-height:58px!important;
  }

  .topbar{
    padding:8px 12px!important;
    gap:8px!important;
    position:sticky!important;
    top:0!important;
    z-index:50!important;
    background:#fff!important;
  }

  .topbar .brand img,
  header .brand img{
    max-height:34px!important;
  }

  .topbar nav,
  header nav{
    display:flex!important;
    gap:10px!important;
    overflow-x:auto!important;
    white-space:nowrap!important;
    -webkit-overflow-scrolling:touch!important;
    padding-bottom:2px!important;
  }

  .topbar nav a,
  header nav a{
    font-size:13px!important;
    padding:6px 2px!important;
  }

  main,
  .container,
  .page,
  .wrap{
    width:100%!important;
    max-width:100%!important;
    padding:10px!important;
    margin:0!important;
  }

  .card{
    border-radius:18px!important;
  }

  /* Dashboard mobile */
  .brand-dashboard-top,
  .stats,
  .brand-dashboard-grid,
  .grid,
  .grid2{
    width:100%!important;
    max-width:100%!important;
  }

  .brand-dashboard-title{
    flex-direction:column!important;
    align-items:flex-start!important;
  }

  .brand-dashboard-wordmark .brand-inline{
    font-size:36px!important;
  }

  .stats,
  .brand-stats{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  .brand-dashboard-grid,
  .grid2{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  .profile-summary-top{
    flex-direction:row!important;
    align-items:center!important;
  }

  .avatar-xl{
    width:74px!important;
    height:74px!important;
  }

  /* Chat mobile layout */
  .chatwrap,
  .chat-wrap,
  .chat-layout,
  .chat-page{
    width:100%!important;
    max-width:100%!important;
    height:calc(100vh - 84px)!important;
    min-height:calc(100vh - 84px)!important;
    margin:0!important;
    border-radius:18px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    overflow:hidden!important;
  }

  .sidebar,
  .chat-sidebar,
  .chatlist,
  .chat-list{
    width:100%!important;
    max-width:100%!important;
    border-right:0!important;
    border-bottom:1px solid var(--bd, #e5e7eb)!important;
    max-height:none!important;
  }

  body.wao-mobile-chat-open .sidebar,
  body.wao-mobile-chat-open .chat-sidebar,
  body.wao-mobile-chat-open .chatlist,
  body.wao-mobile-chat-open .chat-list{
    display:none!important;
  }

  body.wao-mobile-chat-open .chat-main,
  body.wao-mobile-chat-open .conversation,
  body.wao-mobile-chat-open .chatpanel,
  body.wao-mobile-chat-open .chat-panel{
    display:flex!important;
    width:100%!important;
    max-width:100%!important;
  }

  .chat-main,
  .conversation,
  .chatpanel,
  .chat-panel{
    min-width:0!important;
    height:100%!important;
    flex-direction:column!important;
  }

  .chathead,
  .chat-head,
  .chat-header{
    min-height:64px!important;
    padding:10px 12px!important;
    position:sticky!important;
    top:0!important;
    z-index:8!important;
    background:#fff!important;
    gap:8px!important;
  }

  .chathead .avatar,
  .chat-head .avatar,
  .chat-header .avatar{
    width:42px!important;
    height:42px!important;
  }

  .wao-mobile-back-chat-list{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:34px!important;
    padding:7px 10px!important;
    margin-right:6px!important;
    border-radius:999px!important;
    background:#eef4ff!important;
    color:#0D47FF!important;
    text-decoration:none!important;
    font-weight:900!important;
    font-size:13px!important;
  }

  .messages{
    flex:1!important;
    height:auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    padding:12px!important;
    -webkit-overflow-scrolling:touch!important;
  }

  .row,
  .msg-row,
  .message-row{
    max-width:100%!important;
  }

  .bubble,
  .message-bubble{
    max-width:82vw!important;
    word-break:break-word!important;
    overflow-wrap:anywhere!important;
  }

  .mine .bubble,
  .mine .message-bubble{
    margin-left:auto!important;
  }

  .bubble img,
  .message-bubble img,
  .attachment-image{
    max-width:100%!important;
    height:auto!important;
    border-radius:12px!important;
  }

  .compose,
  .composer,
  .sendbar,
  .message-input-bar{
    position:sticky!important;
    bottom:0!important;
    z-index:10!important;
    background:#fff!important;
    padding:10px!important;
    gap:8px!important;
    border-top:1px solid var(--bd, #e5e7eb)!important;
  }

  #sendForm{
    width:100%!important;
  }

  #sendForm input,
  #sendForm textarea,
  .compose input,
  .composer input,
  .sendbar input{
    min-height:44px!important;
    font-size:16px!important;
  }

  #sendForm button,
  .compose button,
  .composer button,
  .sendbar button{
    min-height:44px!important;
    min-width:58px!important;
  }

  .message-actions,
  .actions{
    flex-wrap:wrap!important;
  }

  /* Contacts / Profile / Privacy mobile */
  .privacy-page,
  .discover-card,
  .privacy-card,
  .fixed-profile-card,
  .brand-profile-card{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
  }

  .privacy-head{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:12px!important;
  }

  .privacy-head-actions{
    width:100%!important;
  }

  .privacy-head-actions .btn,
  .privacy-head .btn{
    width:100%!important;
  }

  .discover-search{
    grid-template-columns:1fr!important;
  }

  .discover-user-card{
    flex-direction:column!important;
    align-items:flex-start!important;
  }

  .discover-actions,
  .discover-actions form,
  .discover-actions .btn,
  .discover-actions button{
    width:100%!important;
  }

  .profile-clean-body{
    flex-direction:column!important;
  }

  .profile-clean-left{
    flex-direction:column!important;
    align-items:flex-start!important;
  }

  .profile-clean-actions{
    width:100%!important;
    grid-template-columns:1fr!important;
  }

  .profile-info-grid{
    grid-template-columns:1fr!important;
  }

  .phone-row{
    grid-template-columns:1fr!important;
  }

  .privacy-setting{
    grid-template-columns:1fr!important;
  }

  .privacy-setting select,
  .privacy-setting input,
  .privacy-setting button,
  .switch-row{
    width:100%!important;
  }
}

@media(max-width: 480px){
  .brand-inline strong{
    font-size:.95em!important;
  }

  .brand-inline small{
    font-size:.52em!important;
  }

  .chatwrap,
  .chat-wrap,
  .chat-layout,
  .chat-page{
    height:calc(100vh - 72px)!important;
    min-height:calc(100vh - 72px)!important;
    border-radius:0!important;
  }

  main,
  .container,
  .page,
  .wrap{
    padding:6px!important;
  }

  .messages{
    padding:10px 8px!important;
  }

  .bubble,
  .message-bubble{
    max-width:86vw!important;
  }

  .topbar nav a,
  header nav a{
    font-size:12px!important;
  }
}


/* =========================================================
   WAOLINK PROPER MOBILE CHAT FIX
   This fixes mobile view where only chat list appeared.
   ========================================================= */

@media(max-width:820px){
  body.wao-mobile-chat-open{
    overflow:hidden!important;
  }

  body.wao-mobile-chat-open main,
  body.wao-mobile-chat-open .container,
  body.wao-mobile-chat-open .page,
  body.wao-mobile-chat-open .wrap{
    padding:0!important;
    margin:0!important;
    width:100%!important;
    max-width:100%!important;
  }

  .wao-chat-shell,
  .chatwrap,
  .chat-wrap,
  .chat-layout,
  .chat-page{
    width:100%!important;
    max-width:100%!important;
  }

  body.wao-mobile-chat-open .wao-chat-shell,
  body.wao-mobile-chat-open .chatwrap,
  body.wao-mobile-chat-open .chat-wrap,
  body.wao-mobile-chat-open .chat-layout,
  body.wao-mobile-chat-open .chat-page{
    display:block!important;
    position:relative!important;
    width:100vw!important;
    max-width:100vw!important;
    height:calc(100vh - 58px)!important;
    min-height:calc(100vh - 58px)!important;
    margin:0!important;
    border-radius:0!important;
    overflow:hidden!important;
    background:#f0f7ff!important;
  }

  body.wao-mobile-chat-open .wao-mobile-hidden-sidebar,
  body.wao-mobile-chat-open .wao-chat-sidebar-real,
  body.wao-mobile-chat-open .sidebar,
  body.wao-mobile-chat-open .chat-sidebar,
  body.wao-mobile-chat-open .chatlist,
  body.wao-mobile-chat-open .chat-list{
    display:none!important;
    visibility:hidden!important;
    width:0!important;
    max-width:0!important;
    height:0!important;
    overflow:hidden!important;
  }

  body.wao-mobile-chat-open .wao-mobile-visible-panel,
  body.wao-mobile-chat-open .wao-chat-panel-real,
  body.wao-mobile-chat-open .chat-main,
  body.wao-mobile-chat-open .conversation,
  body.wao-mobile-chat-open .chatpanel,
  body.wao-mobile-chat-open .chat-panel,
  body.wao-mobile-chat-open .panel{
    display:flex!important;
    flex-direction:column!important;
    visibility:visible!important;
    width:100vw!important;
    max-width:100vw!important;
    height:calc(100vh - 58px)!important;
    min-height:calc(100vh - 58px)!important;
    margin:0!important;
    padding:0!important;
    border-radius:0!important;
    background:#f0f7ff!important;
  }

  body.wao-mobile-chat-open .chathead,
  body.wao-mobile-chat-open .chat-head,
  body.wao-mobile-chat-open .chat-header{
    min-height:60px!important;
    height:auto!important;
    flex:0 0 auto!important;
    padding:9px 10px!important;
    background:#fff!important;
    border-bottom:1px solid #dbe5f0!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    position:relative!important;
    z-index:20!important;
  }

  .wao-mobile-back-chat-list{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:72px!important;
    min-height:34px!important;
    padding:6px 9px!important;
    border-radius:999px!important;
    background:#eaf2ff!important;
    color:#0D47FF!important;
    font-weight:900!important;
    font-size:13px!important;
    text-decoration:none!important;
    white-space:nowrap!important;
  }

  body.wao-mobile-chat-open .messages{
    flex:1 1 auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    padding:12px 10px!important;
    -webkit-overflow-scrolling:touch!important;
  }

  body.wao-mobile-chat-open .compose,
  body.wao-mobile-chat-open .composer,
  body.wao-mobile-chat-open .sendbar,
  body.wao-mobile-chat-open .message-input-bar,
  body.wao-mobile-chat-open form#sendForm{
    flex:0 0 auto!important;
    position:sticky!important;
    bottom:0!important;
    z-index:30!important;
    background:#fff!important;
    padding:8px!important;
    border-top:1px solid #dbe5f0!important;
  }

  body.wao-mobile-chat-open #sendForm{
    display:flex!important;
    gap:7px!important;
    align-items:center!important;
    width:100%!important;
  }

  body.wao-mobile-chat-open #sendForm input,
  body.wao-mobile-chat-open #sendForm textarea{
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    min-height:44px!important;
    font-size:16px!important;
    border-radius:14px!important;
  }

  body.wao-mobile-chat-open #sendForm button{
    flex:0 0 auto!important;
    min-width:58px!important;
    min-height:44px!important;
    border-radius:14px!important;
  }

  body.wao-mobile-chat-open .bubble,
  body.wao-mobile-chat-open .message-bubble{
    max-width:82vw!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
  }

  body.wao-mobile-chat-open .bubble img,
  body.wao-mobile-chat-open .message-bubble img{
    max-width:100%!important;
    height:auto!important;
  }
}

/* Keep chat list nice when viewing the chat list only in mobile */
@media(max-width:820px){
  body:not(.wao-mobile-chat-open) .chatwrap,
  body:not(.wao-mobile-chat-open) .chat-wrap,
  body:not(.wao-mobile-chat-open) .chat-layout,
  body:not(.wao-mobile-chat-open) .chat-page{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
  }
}


/* =========================================================
   WAOLINK MOBILE CHAT POLISH
   Fixes screenshot issues: cramped input, too many action buttons,
   oversized header controls, better WhatsApp-style mobile feel.
   ========================================================= */

@media(max-width:820px){
  /* Full mobile width in emulator */
  body.wao-mobile-chat-open .wao-chat-shell,
  body.wao-mobile-chat-open .chatwrap,
  body.wao-mobile-chat-open .chat-wrap,
  body.wao-mobile-chat-open .chat-layout,
  body.wao-mobile-chat-open .chat-page{
    width:100%!important;
    max-width:100%!important;
  }

  body.wao-mobile-chat-open .wao-mobile-visible-panel,
  body.wao-mobile-chat-open .wao-chat-panel-real,
  body.wao-mobile-chat-open .chat,
  body.wao-mobile-chat-open .mainchat,
  body.wao-mobile-chat-open .chat-main,
  body.wao-mobile-chat-open .conversation,
  body.wao-mobile-chat-open .chatpanel,
  body.wao-mobile-chat-open .chat-panel,
  body.wao-mobile-chat-open .panel{
    width:100%!important;
    max-width:100%!important;
  }

  /* Header polish */
  body.wao-mobile-chat-open .chathead{
    min-height:56px!important;
    padding:7px 8px!important;
    gap:6px!important;
    box-shadow:0 2px 8px rgba(15,23,42,.05)!important;
  }

  body.wao-mobile-chat-open .chathead .avatar{
    width:38px!important;
    height:38px!important;
  }

  body.wao-mobile-chat-open .chathead strong,
  body.wao-mobile-chat-open .chathead b{
    font-size:14px!important;
    line-height:1.1!important;
  }

  body.wao-mobile-chat-open .chathead .meta{
    font-size:11px!important;
    line-height:1.1!important;
  }

  body.wao-mobile-chat-open .chat-title-actions{
    display:flex!important;
    gap:5px!important;
    margin-left:auto!important;
  }

  body.wao-mobile-chat-open .chat-info-button,
  body.wao-mobile-chat-open .chat-header-tool{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    min-height:32px!important;
    font-size:14px!important;
    border-radius:999px!important;
  }

  .wao-mobile-back-chat-list{
    min-width:34px!important;
    width:34px!important;
    height:34px!important;
    min-height:34px!important;
    padding:0!important;
    overflow:hidden!important;
    text-indent:-999px!important;
    position:relative!important;
  }
  .wao-mobile-back-chat-list::after{
    content:'‹'!important;
    position:absolute!important;
    inset:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-indent:0!important;
    font-size:26px!important;
    line-height:1!important;
  }

  /* Messages */
  body.wao-mobile-chat-open .messages{
    padding:10px 8px 12px!important;
    background:#eef7ff!important;
  }

  body.wao-mobile-chat-open .row,
  body.wao-mobile-chat-open .msg-row,
  body.wao-mobile-chat-open .message-row{
    margin-bottom:12px!important;
  }

  body.wao-mobile-chat-open .bubble,
  body.wao-mobile-chat-open .message-bubble{
    max-width:78vw!important;
    padding:10px 12px!important;
    border-radius:15px!important;
    font-size:14px!important;
    line-height:1.35!important;
  }

  body.wao-mobile-chat-open .mine .bubble,
  body.wao-mobile-chat-open .mine .message-bubble{
    border-bottom-right-radius:5px!important;
  }

  body.wao-mobile-chat-open .row:not(.mine) .bubble,
  body.wao-mobile-chat-open .msg-row:not(.mine) .message-bubble{
    border-bottom-left-radius:5px!important;
  }

  body.wao-mobile-chat-open .bubble small,
  body.wao-mobile-chat-open .message-bubble small{
    font-size:10px!important;
  }

  /* Hide action buttons by default on mobile to keep chat clean */
  body.wao-mobile-chat-open .message-actions,
  body.wao-mobile-chat-open .actions{
    display:none!important;
    margin-top:5px!important;
    gap:5px!important;
    flex-wrap:wrap!important;
  }

  body.wao-mobile-chat-open .row.wao-mobile-actions-open .message-actions,
  body.wao-mobile-chat-open .msg-row.wao-mobile-actions-open .actions,
  body.wao-mobile-chat-open .message-row.wao-mobile-actions-open .message-actions,
  body.wao-mobile-chat-open .row:hover .message-actions,
  body.wao-mobile-chat-open .msg-row:hover .actions,
  body.wao-mobile-chat-open .message-row:hover .message-actions{
    display:flex!important;
  }

  body.wao-mobile-chat-open .message-actions button,
  body.wao-mobile-chat-open .message-actions a,
  body.wao-mobile-chat-open .actions button,
  body.wao-mobile-chat-open .actions a{
    font-size:11px!important;
    padding:4px 7px!important;
    border-radius:8px!important;
  }

  /* Composer/input fix */
  body.wao-mobile-chat-open .compose{
    display:grid!important;
    grid-template-columns:38px 38px minmax(0,1fr) 56px!important;
    align-items:center!important;
    gap:6px!important;
    padding:8px!important;
    background:#fff!important;
  }

  body.wao-mobile-chat-open .compose > *{
    min-width:0!important;
  }

  body.wao-mobile-chat-open .compose-tool{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    border-radius:999px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:17px!important;
    padding:0!important;
  }

  body.wao-mobile-chat-open form#sendForm{
    display:contents!important;
  }

  body.wao-mobile-chat-open #sendForm input,
  body.wao-mobile-chat-open #sendForm textarea,
  body.wao-mobile-chat-open .compose input[type="text"],
  body.wao-mobile-chat-open .compose input[name="body"]{
    grid-column:3!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:40px!important;
    min-height:40px!important;
    padding:0 12px!important;
    font-size:14px!important;
    border-radius:14px!important;
  }

  body.wao-mobile-chat-open #sendForm button[type="submit"],
  body.wao-mobile-chat-open .compose button[type="submit"]{
    grid-column:4!important;
    width:56px!important;
    min-width:56px!important;
    height:40px!important;
    min-height:40px!important;
    padding:0!important;
    border-radius:14px!important;
    font-size:13px!important;
  }

  /* Date separators cleaner */
  body.wao-mobile-chat-open .date-separator,
  body.wao-mobile-chat-open .day-separator{
    font-size:11px!important;
    padding:5px 10px!important;
    border-radius:999px!important;
  }
}

@media(max-width:380px){
  body.wao-mobile-chat-open .compose{
    grid-template-columns:34px 34px minmax(0,1fr) 52px!important;
    gap:5px!important;
  }

  body.wao-mobile-chat-open .compose-tool{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
  }

  body.wao-mobile-chat-open #sendForm button[type="submit"],
  body.wao-mobile-chat-open .compose button[type="submit"]{
    width:52px!important;
    min-width:52px!important;
  }

  body.wao-mobile-chat-open .bubble,
  body.wao-mobile-chat-open .message-bubble{
    max-width:80vw!important;
  }
}


/* =========================================================
   WAOLINK MOBILE ACTION BUTTON + INPUT FINAL FIX
   ========================================================= */

@media(max-width:820px){

  /* Hide all message action rows by default on mobile */
  body.wao-mobile-chat-open .msg-actions,
  body.wao-mobile-chat-open .message-actions,
  body.wao-mobile-chat-open .actions,
  body.wao-mobile-chat-open .bubble-actions,
  body.wao-mobile-chat-open .message-tools{
    display:none!important;
    visibility:hidden!important;
    height:0!important;
    min-height:0!important;
    overflow:hidden!important;
    margin:0!important;
    padding:0!important;
  }

  /* Show actions only when the message row is tapped/opened */
  body.wao-mobile-chat-open .row.wao-mobile-actions-open .msg-actions,
  body.wao-mobile-chat-open .row.wao-mobile-actions-open .message-actions,
  body.wao-mobile-chat-open .row.wao-mobile-actions-open .actions,
  body.wao-mobile-chat-open .msg-row.wao-mobile-actions-open .msg-actions,
  body.wao-mobile-chat-open .msg-row.wao-mobile-actions-open .message-actions,
  body.wao-mobile-chat-open .msg-row.wao-mobile-actions-open .actions,
  body.wao-mobile-chat-open .message-row.wao-mobile-actions-open .msg-actions,
  body.wao-mobile-chat-open .message-row.wao-mobile-actions-open .message-actions,
  body.wao-mobile-chat-open .message-row.wao-mobile-actions-open .actions{
    display:flex!important;
    visibility:visible!important;
    height:auto!important;
    overflow:visible!important;
    margin-top:5px!important;
    padding:0!important;
    gap:5px!important;
    flex-wrap:wrap!important;
  }

  body.wao-mobile-chat-open .msg-actions button,
  body.wao-mobile-chat-open .msg-actions a,
  body.wao-mobile-chat-open .message-actions button,
  body.wao-mobile-chat-open .message-actions a,
  body.wao-mobile-chat-open .actions button,
  body.wao-mobile-chat-open .actions a{
    font-size:11px!important;
    padding:4px 7px!important;
    border-radius:8px!important;
    line-height:1!important;
  }

  /* More compact message spacing */
  body.wao-mobile-chat-open .row,
  body.wao-mobile-chat-open .msg-row,
  body.wao-mobile-chat-open .message-row{
    margin-bottom:10px!important;
  }

  /* Make input section use the full width */
  body.wao-mobile-chat-open .compose{
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    padding:8px!important;
    width:100%!important;
    box-sizing:border-box!important;
  }

  body.wao-mobile-chat-open .compose-tool{
    flex:0 0 38px!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    padding:0!important;
  }

  body.wao-mobile-chat-open form#sendForm{
    display:flex!important;
    flex:1 1 auto!important;
    min-width:0!important;
    gap:6px!important;
    align-items:center!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
  }

  body.wao-mobile-chat-open #sendForm input,
  body.wao-mobile-chat-open #sendForm textarea,
  body.wao-mobile-chat-open .compose input[name="body"],
  body.wao-mobile-chat-open .compose input[type="text"]{
    flex:1 1 auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:40px!important;
    min-height:40px!important;
    font-size:14px!important;
    padding:0 12px!important;
    border-radius:14px!important;
    box-sizing:border-box!important;
  }

  body.wao-mobile-chat-open #sendForm button[type="submit"],
  body.wao-mobile-chat-open .compose button[type="submit"]{
    flex:0 0 54px!important;
    width:54px!important;
    min-width:54px!important;
    height:40px!important;
    min-height:40px!important;
    padding:0!important;
    font-size:13px!important;
    border-radius:14px!important;
  }

  /* Stop horizontal overflow */
  body.wao-mobile-chat-open *{
    max-width:100%;
    box-sizing:border-box;
  }

  body.wao-mobile-chat-open .bubble,
  body.wao-mobile-chat-open .message-bubble{
    max-width:78vw!important;
  }
}


/* =========================================================
   WAOLINK FORCE MOBILE ACTION HIDE FIX
   Directly hides action buttons by class added in PHP + JS.
   ========================================================= */

@media(max-width:820px){
  body.wao-mobile-chat-open .wao-mobile-msg-action{
    display:none!important;
    visibility:hidden!important;
    width:0!important;
    height:0!important;
    min-width:0!important;
    min-height:0!important;
    overflow:hidden!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    opacity:0!important;
    pointer-events:none!important;
  }

  body.wao-mobile-chat-open .wao-mobile-actions-open .wao-mobile-msg-action{
    display:inline-flex!important;
    visibility:visible!important;
    width:auto!important;
    height:auto!important;
    min-width:auto!important;
    min-height:auto!important;
    overflow:visible!important;
    margin:4px 4px 0 0!important;
    padding:5px 8px!important;
    border:0!important;
    opacity:1!important;
    pointer-events:auto!important;
    font-size:11px!important;
    line-height:1!important;
    border-radius:8px!important;
  }

  /* If any old action row remains, collapse it when no open class */
  body.wao-mobile-chat-open .wao-mobile-action-row:not(.wao-mobile-actions-open) .msg-actions,
  body.wao-mobile-chat-open .wao-mobile-action-row:not(.wao-mobile-actions-open) .message-actions,
  body.wao-mobile-chat-open .wao-mobile-action-row:not(.wao-mobile-actions-open) .actions{
    display:block!important;
    height:0!important;
    min-height:0!important;
    overflow:hidden!important;
    margin:0!important;
    padding:0!important;
  }

  /* Keep input wide */
  body.wao-mobile-chat-open .compose{
    display:flex!important;
    width:100%!important;
    gap:6px!important;
    padding:8px!important;
  }

  body.wao-mobile-chat-open .compose-tool{
    flex:0 0 36px!important;
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
  }

  body.wao-mobile-chat-open form#sendForm{
    flex:1 1 auto!important;
    min-width:0!important;
    display:flex!important;
    gap:6px!important;
  }

  body.wao-mobile-chat-open #sendForm input,
  body.wao-mobile-chat-open #sendForm textarea{
    flex:1 1 auto!important;
    min-width:0!important;
    width:100%!important;
  }

  body.wao-mobile-chat-open #sendForm button[type="submit"]{
    flex:0 0 54px!important;
  }
}


/* =========================================================
   WAOLINK MOBILE ACTIONS INLINE JS FIX
   The JS in chat.php now hides/shows actions inline.
   This CSS only controls their mobile appearance when shown.
   ========================================================= */
@media(max-width:820px){
  body.wao-mobile-chat-open .message-actions.wao-mobile-inline-actions{
    gap:5px!important;
    flex-wrap:wrap!important;
    margin-top:5px!important;
  }

  body.wao-mobile-chat-open .message-actions.wao-mobile-inline-actions button,
  body.wao-mobile-chat-open .message-actions.wao-mobile-inline-actions a{
    font-size:11px!important;
    padding:5px 8px!important;
    border-radius:8px!important;
    line-height:1!important;
  }

  body.wao-mobile-chat-open .compose{
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    padding:8px!important;
  }

  body.wao-mobile-chat-open form#form,
  body.wao-mobile-chat-open form#sendForm{
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    width:100%!important;
  }

  body.wao-mobile-chat-open .compose-tool{
    flex:0 0 38px!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
  }

  body.wao-mobile-chat-open #body,
  body.wao-mobile-chat-open input[name="body"]{
    flex:1 1 auto!important;
    min-width:0!important;
    width:100%!important;
    height:42px!important;
    min-height:42px!important;
  }

  body.wao-mobile-chat-open #sendButton,
  body.wao-mobile-chat-open button[type="submit"]{
    flex:0 0 56px!important;
    width:56px!important;
    min-width:56px!important;
    height:42px!important;
    min-height:42px!important;
  }
}


/* =========================================================
   WAOLINK FORWARD MODAL
   Replaces browser prompt with clean in-app forward picker.
   ========================================================= */
.wao-forward-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
}
.wao-forward-modal.open{
  display:block;
}
.wao-forward-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.42);
  backdrop-filter:blur(3px);
}
.wao-forward-card{
  position:relative;
  z-index:2;
  width:min(520px, calc(100vw - 28px));
  max-height:min(720px, calc(100vh - 28px));
  margin:7vh auto 0;
  background:#fff;
  border:1px solid #dbe5f0;
  border-radius:24px;
  box-shadow:0 24px 80px rgba(15,23,42,.25);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.wao-forward-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:20px;
  border-bottom:1px solid #e5edf7;
  background:linear-gradient(180deg,#fff,#f8fbff);
}
.wao-forward-brand{
  display:block;
  margin-bottom:6px;
}
.wao-forward-head h2{
  margin:0;
  font-size:24px;
  color:#061a40;
}
.wao-forward-head p{
  margin:5px 0 0;
  color:#64748b;
  font-size:13px;
}
.wao-forward-close{
  width:38px;
  height:38px;
  border:0;
  border-radius:999px;
  background:#eef4ff;
  color:#0D47FF;
  font-size:24px;
  font-weight:900;
  cursor:pointer;
}
.wao-forward-body{
  padding:14px;
  overflow:auto;
}
.wao-forward-search{
  width:100%;
  height:46px;
  border:1px solid #cbd5e1;
  border-radius:14px;
  padding:0 14px;
  font-size:15px;
  margin-bottom:12px;
}
.wao-forward-list{
  display:grid;
  gap:10px;
}
.wao-forward-row{
  width:100%;
  border:1px solid #dbe5f0;
  background:#fff;
  border-radius:18px;
  padding:12px;
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
  text-align:left;
}
.wao-forward-row:hover{
  border-color:#05c7d9;
  background:#f0fdff;
}
.wao-forward-avatar{
  width:44px;
  height:44px;
  border-radius:999px;
  overflow:hidden;
  background:linear-gradient(135deg,#1155ff,#00c8c8);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  flex:0 0 auto;
}
.wao-forward-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.wao-forward-info{
  min-width:0;
  flex:1;
}
.wao-forward-info strong{
  display:block;
  color:#061a40;
  font-size:15px;
}
.wao-forward-info small{
  display:block;
  color:#64748b;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.wao-forward-send{
  flex:0 0 auto;
  background:#eaf2ff;
  color:#0D47FF;
  border-radius:999px;
  padding:7px 10px;
  font-size:12px;
  font-weight:900;
}
.wao-forward-empty{
  padding:20px;
  text-align:center;
  color:#64748b;
}
.wao-forward-empty.error{
  color:#b91c1c;
  background:#fee2e2;
  border-radius:14px;
}
.wao-forward-footer{
  padding:14px;
  border-top:1px solid #e5edf7;
  display:flex;
  justify-content:flex-end;
  background:#fff;
}
.wao-forward-list.loading{
  opacity:.55;
  pointer-events:none;
}

@media(max-width:820px){
  .wao-forward-card{
    width:100vw;
    height:100vh;
    max-height:100vh;
    margin:0;
    border-radius:0;
  }
  .wao-forward-head{
    padding:16px;
  }
  .wao-forward-head h2{
    font-size:22px;
  }
  .wao-forward-row{
    border-radius:16px;
  }
}


/* =========================================================
   WAOLINK EDIT MESSAGE MODAL
   Replaces browser prompt with clean in-app edit dialog.
   ========================================================= */
.wao-edit-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:10000;
}
.wao-edit-modal.open{
  display:block;
}
.wao-edit-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.42);
  backdrop-filter:blur(3px);
}
.wao-edit-card{
  position:relative;
  z-index:2;
  width:min(520px, calc(100vw - 28px));
  margin:12vh auto 0;
  background:#fff;
  border:1px solid #dbe5f0;
  border-radius:24px;
  box-shadow:0 24px 80px rgba(15,23,42,.25);
  overflow:hidden;
}
.wao-edit-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:20px;
  border-bottom:1px solid #e5edf7;
  background:linear-gradient(180deg,#fff,#f8fbff);
}
.wao-edit-brand{
  display:block;
  margin-bottom:6px;
}
.wao-edit-head h2{
  margin:0;
  font-size:24px;
  color:#061a40;
}
.wao-edit-head p{
  margin:5px 0 0;
  color:#64748b;
  font-size:13px;
}
.wao-edit-close{
  width:38px;
  height:38px;
  border:0;
  border-radius:999px;
  background:#eef4ff;
  color:#0D47FF;
  font-size:24px;
  font-weight:900;
  cursor:pointer;
}
.wao-edit-body{
  padding:16px;
}
.wao-edit-text{
  width:100%;
  min-height:130px;
  border:1px solid #cbd5e1;
  border-radius:16px;
  padding:12px 14px;
  resize:vertical;
  font:inherit;
  font-size:15px;
  outline:none;
}
.wao-edit-text:focus{
  border-color:#05c7d9;
  box-shadow:0 0 0 4px rgba(5,199,217,.12);
}
.wao-edit-hint{
  margin-top:8px;
  color:#64748b;
  font-size:12px;
}
.wao-edit-footer{
  padding:14px 16px;
  border-top:1px solid #e5edf7;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  background:#fff;
}
@media(max-width:820px){
  .wao-edit-card{
    width:100vw;
    min-height:100vh;
    margin:0;
    border-radius:0;
    display:flex;
    flex-direction:column;
  }
  .wao-edit-body{
    flex:1;
  }
  .wao-edit-text{
    min-height:220px;
  }
  .wao-edit-footer{
    position:sticky;
    bottom:0;
  }
  .wao-edit-footer .btn{
    flex:1;
  }
}


/* EDIT UNTIL READ */
.edit-locked,
button[data-can-edit="0"],
a[data-can-edit="0"]{
  display:none!important;
}


/* =========================================================
   WAOLINK RESTORE LOGIN POLISH
   Keep this at the end so later feature updates do not revert login.
   ========================================================= */

.auth-waolink{
  min-height:calc(100vh - 82px)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:34px 16px!important;
}

.auth-brand-card{
  max-width:430px!important;
  width:100%!important;
  border-radius:24px!important;
  padding:28px 26px!important;
}

.auth-brand-top{
  text-align:center!important;
  margin-bottom:8px!important;
}

.auth-brand-top img{
  width:min(265px, 74%)!important;
  max-height:210px!important;
  object-fit:contain!important;
  display:block!important;
  margin:0 auto 8px!important;
}

.brand-welcome{
  text-align:center!important;
  margin:2px 0 18px!important;
}

.brand-welcome h1{
  margin:0 0 6px!important;
  font-size:28px!important;
  line-height:1.1!important;
  color:#061a40!important;
  font-weight:900!important;
}

.brand-welcome p{
  margin:0!important;
  font-size:13px!important;
  color:#64748b!important;
}

.auth-card label{
  font-weight:900!important;
  color:#111827!important;
  font-size:14px!important;
}

.auth-card input{
  min-height:44px!important;
  border-radius:13px!important;
}

.auth-card .brand-btn-full,
.auth-card button[type="submit"]{
  min-height:46px!important;
  border-radius:13px!important;
  font-weight:900!important;
}

.polished-phone-login{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-height:44px!important;
  margin-top:10px!important;
  border-radius:13px!important;
  font-weight:900!important;
  text-decoration:none!important;
  background:#eef4ff!important;
  color:#0D47FF!important;
}

.polished-phone-login:hover{
  background:#e2ecff!important;
}

.auth-switch{
  text-align:center!important;
  margin:16px 0 0!important;
  color:#334155!important;
}

.auth-switch .brand-link,
.auth-switch a{
  font-weight:900!important;
  color:#0D47FF!important;
}

/* Safety: if an old duplicate phone button remains, hide the second one */
.auth-card .phone-login-alt + .phone-login-alt{
  display:none!important;
}

@media(max-width:520px){
  .auth-waolink{
    align-items:flex-start!important;
    padding:18px 12px!important;
  }

  .auth-brand-card{
    border-radius:20px!important;
    padding:24px 18px!important;
  }

  .auth-brand-top img{
    width:min(235px, 72%)!important;
    max-height:180px!important;
  }

  .brand-welcome h1{
    font-size:25px!important;
  }
}


/* =========================================================
   WAOLINK DELETE MESSAGE MODAL
   ========================================================= */
.wao-delete-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:10001;
}
.wao-delete-modal.open{
  display:block;
}
.wao-delete-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.42);
  backdrop-filter:blur(3px);
}
.wao-delete-card{
  position:relative;
  z-index:2;
  width:min(500px, calc(100vw - 28px));
  margin:12vh auto 0;
  background:#fff;
  border:1px solid #dbe5f0;
  border-radius:24px;
  box-shadow:0 24px 80px rgba(15,23,42,.25);
  overflow:hidden;
}
.wao-delete-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:20px;
  border-bottom:1px solid #e5edf7;
  background:linear-gradient(180deg,#fff,#f8fbff);
}
.wao-delete-brand{
  display:block;
  margin-bottom:6px;
}
.wao-delete-head h2{
  margin:0;
  font-size:24px;
  color:#061a40;
}
.wao-delete-head p{
  margin:5px 0 0;
  color:#64748b;
  font-size:13px;
}
.wao-delete-close{
  width:38px;
  height:38px;
  border:0;
  border-radius:999px;
  background:#eef4ff;
  color:#0D47FF;
  font-size:24px;
  font-weight:900;
  cursor:pointer;
}
.wao-delete-body{
  padding:16px;
  display:grid;
  gap:12px;
}
.wao-delete-preview{
  padding:12px 14px;
  border:1px solid #dbe5f0;
  border-radius:16px;
  background:#f8fbff;
  color:#334155;
  font-size:14px;
  max-height:90px;
  overflow:auto;
}
.wao-delete-option{
  width:100%;
  text-align:left;
  border:1px solid #dbe5f0;
  border-radius:18px;
  background:#fff;
  padding:14px;
  cursor:pointer;
  display:grid;
  gap:4px;
}
.wao-delete-option:hover{
  border-color:#05c7d9;
  background:#f0fdff;
}
.wao-delete-option strong{
  color:#061a40;
  font-size:15px;
}
.wao-delete-option small{
  color:#64748b;
  font-size:12px;
}
.wao-delete-option.danger:hover{
  border-color:#ef4444;
  background:#fff5f5;
}
.wao-delete-option.danger strong{
  color:#b91c1c;
}
.wao-delete-option:disabled{
  opacity:.55;
  pointer-events:none;
}
.wao-delete-footer{
  padding:14px 16px;
  border-top:1px solid #e5edf7;
  display:flex;
  justify-content:flex-end;
  background:#fff;
}
@media(max-width:820px){
  .wao-delete-card{
    width:100vw;
    min-height:100vh;
    margin:0;
    border-radius:0;
    display:flex;
    flex-direction:column;
  }
  .wao-delete-body{
    flex:1;
  }
  .wao-delete-footer .btn{
    width:100%;
  }
}


/* WAOLINK RESTORE DELETE TOAST */
.wao-restore-toast{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%) translateY(24px);
  z-index:10050;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:min(520px, calc(100vw - 28px));
  background:#061a40;
  color:#fff;
  padding:12px 14px;
  border-radius:18px;
  box-shadow:0 20px 60px rgba(15,23,42,.28);
  opacity:0;
  pointer-events:none;
  transition:.22s ease;
}
.wao-restore-toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}
.wao-restore-toast span{ flex:1; font-size:14px; }
.wao-restore-toast button{
  border:0;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
}
#waoRestoreBtn{
  background:#05c7d9;
  color:#001b36;
  padding:8px 12px;
}
#waoRestoreClose{
  width:30px;
  height:30px;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:18px;
}
#waoRestoreBtn:disabled{ opacity:.6; pointer-events:none; }
@media(max-width:820px){
  .wao-restore-toast{
    bottom:12px;
    min-width:calc(100vw - 18px);
    border-radius:16px;
  }
}


/* =========================================================
   WAOLINK RESTORE BUTTON ON DELETED MESSAGE
   Restore now appears beside message action buttons instead of
   immediately asking/showing a restore bar.
   ========================================================= */
.wao-restore-message-btn{
  background:#e8fff7!important;
  color:#047857!important;
  border:0!important;
  border-radius:8px!important;
  padding:5px 9px!important;
  font-size:12px!important;
  font-weight:900!important;
  cursor:pointer!important;
}
.wao-restore-message-btn:hover{
  background:#c8f7e6!important;
}
.wao-restore-message-btn:disabled{
  opacity:.6!important;
  pointer-events:none!important;
}
.wao-restore-actions-row{
  display:flex;
  gap:6px;
  margin-top:6px;
}

/* Do not show the old immediate restore toast in this version */
.wao-restore-toast{
  display:none!important;
}

@media(max-width:820px){
  body.wao-mobile-chat-open .wao-mobile-actions-open .wao-restore-message-btn,
  body.wao-mobile-chat-open .wao-restore-message-btn{
    display:inline-flex!important;
    visibility:visible!important;
    width:auto!important;
    height:auto!important;
    min-width:auto!important;
    min-height:auto!important;
    overflow:visible!important;
    margin:4px 4px 0 0!important;
    padding:5px 8px!important;
    border:0!important;
    opacity:1!important;
    pointer-events:auto!important;
    font-size:11px!important;
    line-height:1!important;
    border-radius:8px!important;
  }
}


/* =========================================================
   WAOLINK FRIENDLY RESTORE NOTICE
   Replaces browser alert for restore errors/no backup.
   ========================================================= */
.wao-notice-toast{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%) translateY(24px);
  z-index:10070;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:min(520px, calc(100vw - 28px));
  background:#061a40;
  color:#fff;
  padding:12px 14px;
  border-radius:18px;
  box-shadow:0 20px 60px rgba(15,23,42,.28);
  opacity:0;
  pointer-events:none;
  transition:.22s ease;
}
.wao-notice-toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}
.wao-notice-toast.error{
  background:#7f1d1d;
}
.wao-notice-toast.success{
  background:#064e3b;
}
.wao-notice-toast.info{
  background:#061a40;
}
.wao-notice-toast span{
  flex:1;
  font-size:14px;
}
#waoNoticeClose{
  width:30px;
  height:30px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:18px;
  font-weight:900;
  cursor:pointer;
}
.wao-restore-message-btn.restore-unavailable{
  background:#e5e7eb!important;
  color:#64748b!important;
  cursor:not-allowed!important;
}
@media(max-width:820px){
  .wao-notice-toast{
    bottom:12px;
    min-width:calc(100vw - 18px);
    border-radius:16px;
  }
}


/* =========================================================
   WAOLINK PWA INSTALL
   ========================================================= */
.wao-install-app-btn{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:10080;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,#0D47FF,#05C7D9);
  color:#fff;
  font-weight:900;
  padding:12px 16px;
  box-shadow:0 14px 38px rgba(13,71,255,.26);
  cursor:pointer;
}
.wao-install-help{
  position:fixed;
  inset:0;
  z-index:10090;
  background:rgba(15,23,42,.42);
  backdrop-filter:blur(3px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.wao-install-help-card{
  width:min(440px,100%);
  background:#fff;
  border-radius:22px;
  padding:22px;
  box-shadow:0 24px 80px rgba(15,23,42,.25);
  position:relative;
}
.wao-install-help-card h3{
  margin:0 0 10px;
  color:#061a40;
  font-size:24px;
}
.wao-install-help-card p{
  color:#334155;
  line-height:1.5;
}
.wao-install-help-close{
  position:absolute;
  right:14px;
  top:14px;
  width:34px;
  height:34px;
  border:0;
  border-radius:999px;
  background:#eef4ff;
  color:#0D47FF;
  font-size:22px;
  font-weight:900;
  cursor:pointer;
}
@media(max-width:820px){
  .wao-install-app-btn{
    right:12px;
    bottom:12px;
    padding:10px 13px;
    font-size:13px;
  }
}


/* =========================================================
   WAOLINK STANDALONE INSTALLED APP POLISH
   Applies only when WAOLINK is opened as installed PWA.
   ========================================================= */
.wao-standalone-app body,
body.wao-standalone-app-body{
  background:#f3f7fb!important;
}

.wao-standalone-app .wao-install-app-btn,
body.wao-standalone-app-body .wao-install-app-btn{
  display:none!important;
}

.wao-installed-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:10px;
  padding:4px 9px;
  border-radius:999px;
  background:#eaf2ff;
  color:#0D47FF;
  font-size:11px;
  font-weight:900;
}

/* Dashboard looks more app-like in standalone mode */
.wao-standalone-app .dashboard-wrap,
.wao-standalone-app .dash-wrap,
.wao-standalone-app main,
body.wao-standalone-app-body main{
  max-width:1180px!important;
}

/* Chat window uses more height in installed desktop app */
.wao-standalone-app .chatwrap,
.wao-standalone-app .chat-wrap,
.wao-standalone-app .chat-layout,
.wao-standalone-app .chat-page{
  height:calc(100vh - 128px)!important;
  min-height:680px!important;
}

.wao-standalone-app .messages{
  min-height:0!important;
}

/* Make app window feel less like website */
.wao-standalone-app header,
body.wao-standalone-app-body header{
  position:sticky!important;
  top:0!important;
  z-index:100!important;
  background:#fff!important;
  box-shadow:0 1px 0 rgba(15,23,42,.08)!important;
}

.wao-standalone-app header a,
body.wao-standalone-app-body header a{
  -webkit-user-select:none;
  user-select:none;
}

/* Better large installed-app chat width */
@media(min-width:1100px){
  .wao-standalone-app .chatwrap,
  .wao-standalone-app .chat-wrap,
  .wao-standalone-app .chat-layout,
  .wao-standalone-app .chat-page{
    max-width:1180px!important;
  }

  .wao-standalone-app .messages{
    padding-left:26px!important;
    padding-right:26px!important;
  }
}

/* Keep installed mobile app full screen */
@media(max-width:820px){
  .wao-standalone-app header{
    position:sticky!important;
  }

  .wao-standalone-app .wao-installed-badge{
    display:none!important;
  }
}


/* =========================================================
   WAOLINK install modal brand polish
   ========================================================= */
.wao-install-dashboard-btn{
  width:100%;
}

.wao-install-help{
  position:fixed;
  inset:0;
  background:rgba(9,16,38,.30);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:9999;
}

.wao-install-help-card{
  position:relative;
  width:min(560px,96vw);
  background:#fff;
  border:1px solid #dbe4f0;
  border-radius:24px;
  padding:28px 28px 24px;
  box-shadow:0 18px 50px rgba(15,23,42,.18);
}

.wao-install-help-close{
  position:absolute;
  top:14px;
  right:14px;
  width:42px;
  height:42px;
  border-radius:50%;
  background:#eef3ff;
  color:#0D47FF;
  font-size:28px;
  line-height:1;
  padding:0;
}

.wao-install-brandline{
  margin:0 0 10px;
}

.wao-install-brand-word{
  display:inline-flex;
  align-items:baseline;
  line-height:1;
  letter-spacing:-1px;
  font-weight:900;
}

.wao-install-brand-word strong{
  font-size:42px;
  color:#0B49BA;
}

.wao-install-brand-word small{
  font-size:25px;
  color:#00B7C5;
  margin-left:3px;
  font-weight:900;
}

.wao-install-title{
  margin:0 0 8px;
  font-size:22px;
  color:#0A1B3D;
}

.wao-install-subtitle{
  margin:0 0 16px;
  color:#64748b;
}

.wao-install-list{
  margin:12px 0 0 18px;
  padding:0;
  color:#1f2937;
}

.wao-install-list li{
  margin:8px 0;
}

.wao-install-steps{
  display:grid;
  gap:12px;
  margin-top:12px;
}

.wao-install-step{
  border:1px solid #e6ebf5;
  background:#f8fbff;
  border-radius:16px;
  padding:14px 16px;
}

.wao-install-step b{
  display:block;
  color:#0A1B3D;
  margin-bottom:6px;
}

.wao-install-step p{
  margin:0;
  line-height:1.55;
  color:#334155;
}

.wao-standalone-app .wao-install-dashboard-btn,
body.wao-standalone-app-body .wao-install-dashboard-btn{
  display:none !important;
}

@media(max-width:650px){
  .wao-install-help-card{
    padding:22px 18px 20px;
    border-radius:20px;
  }
  .wao-install-brand-word strong{
    font-size:34px;
  }
  .wao-install-brand-word small{
    font-size:20px;
  }
  .wao-install-title{
    font-size:20px;
  }
}


/* =========================================================
   WAOLINK LOGIN BRAND + GREETING FIX
   Replaces large one-font logo image with the same WAO large
   + LINK small lockup used across the app.
   ========================================================= */
.login-brand-lockup{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  margin:0 0 18px!important;
}

.login-brand-icon{
  width:72px!important;
  height:72px!important;
  object-fit:cover!important;
  border-radius:18px!important;
  box-shadow:0 10px 26px rgba(13,71,255,.16)!important;
}

.login-brand-word{
  display:inline-flex!important;
  align-items:baseline!important;
  line-height:1!important;
  letter-spacing:-2px!important;
  font-weight:900!important;
}

.login-brand-word strong{
  font-size:56px!important;
  color:#0B49BA!important;
}

.login-brand-word small{
  font-size:31px!important;
  color:#00B7C5!important;
  margin-left:4px!important;
  font-weight:900!important;
  letter-spacing:-1px!important;
}

.brand-welcome{
  text-align:center!important;
  margin:0 0 18px!important;
}

.brand-welcome h1{
  font-size:30px!important;
  margin:0 0 6px!important;
  color:#061a40!important;
  font-weight:900!important;
  letter-spacing:-.6px!important;
}

.brand-welcome p{
  margin:0!important;
  color:#475569!important;
  font-size:14px!important;
}

.mini-brand{
  display:inline-flex!important;
  align-items:baseline!important;
  line-height:1!important;
  vertical-align:-1px!important;
  font-weight:900!important;
}

.mini-brand strong{
  color:#0B49BA!important;
  font-size:15px!important;
}

.mini-brand small{
  color:#00B7C5!important;
  font-size:10px!important;
  margin-left:1px!important;
  font-weight:900!important;
}

.polished-phone-login{
  gap:8px!important;
}

/* remove old main-logo sizing from login/register cards when lockup is used */
.auth-brand-top.login-brand-lockup img{
  max-width:none!important;
}

/* keep only one phone login button even if an older copy remains */
.auth-card .phone-login-alt + .phone-login-alt{
  display:none!important;
}

@media(max-width:520px){
  .login-brand-lockup{
    gap:9px!important;
  }

  .login-brand-icon{
    width:58px!important;
    height:58px!important;
    border-radius:15px!important;
  }

  .login-brand-word strong{
    font-size:44px!important;
  }

  .login-brand-word small{
    font-size:24px!important;
  }

  .brand-welcome h1{
    font-size:27px!important;
  }
}


/* =========================================================
   WAOLINK CLEAN PROFESSIONAL LOGIN FINAL
   ========================================================= */
.auth-waolink{
  min-height:calc(100vh - 86px)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:34px 16px!important;
}

.auth-brand-card{
  width:min(430px, calc(100vw - 28px))!important;
  max-width:430px!important;
  border-radius:24px!important;
  padding:30px 28px 28px!important;
  background:#fff!important;
  box-shadow:0 24px 70px rgba(15,23,42,.08)!important;
}

.clean-login-brand{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  margin:0 0 22px!important;
  text-align:center!important;
}

.clean-brand-word{
  display:inline-flex!important;
  align-items:baseline!important;
  justify-content:center!important;
  line-height:.92!important;
  letter-spacing:-2px!important;
  font-weight:900!important;
}

.clean-brand-word strong{
  color:#0B49BA!important;
  font-size:58px!important;
  font-weight:900!important;
}

.clean-brand-word small{
  color:#00B7C5!important;
  font-size:31px!important;
  margin-left:4px!important;
  font-weight:900!important;
  letter-spacing:-1px!important;
}

.clean-brand-tagline{
  display:block!important;
  font-size:13px!important;
  color:#64748b!important;
  font-weight:700!important;
  letter-spacing:.2px!important;
}

.clean-login-intro{
  text-align:center!important;
  margin:0 0 22px!important;
}

.clean-login-intro h1{
  margin:0 0 7px!important;
  font-size:25px!important;
  line-height:1.15!important;
  font-weight:900!important;
  color:#061a40!important;
  letter-spacing:-.4px!important;
}

.clean-login-intro p{
  margin:0 auto!important;
  max-width:310px!important;
  color:#64748b!important;
  font-size:14px!important;
  line-height:1.45!important;
}

.auth-card label{
  display:block!important;
  margin:13px 0 6px!important;
  font-size:14px!important;
  font-weight:900!important;
  color:#111827!important;
}

.auth-card input{
  width:100%!important;
  min-height:46px!important;
  border:1px solid #cbd5e1!important;
  border-radius:14px!important;
  padding:10px 13px!important;
  font-size:14px!important;
  background:#f8fbff!important;
  outline:none!important;
}

.auth-card input:focus{
  border-color:#0D47FF!important;
  box-shadow:0 0 0 4px rgba(13,71,255,.10)!important;
}

.auth-card .brand-btn-full,
.auth-card button[type="submit"]{
  width:100%!important;
  min-height:48px!important;
  border-radius:14px!important;
  margin-top:18px!important;
  font-weight:900!important;
  box-shadow:0 12px 28px rgba(13,71,255,.18)!important;
}

.login-or-divider{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin:13px 0 10px!important;
  color:#94a3b8!important;
  font-size:12px!important;
  font-weight:800!important;
  text-transform:uppercase!important;
}

.login-or-divider::before,
.login-or-divider::after{
  content:""!important;
  height:1px!important;
  flex:1!important;
  background:#e5edf7!important;
}

.polished-phone-login{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-height:46px!important;
  margin-top:0!important;
  border-radius:14px!important;
  background:#eef4ff!important;
  color:#0D47FF!important;
  font-weight:900!important;
  text-decoration:none!important;
}

.polished-phone-login:hover{
  background:#e3edff!important;
}

.auth-switch{
  text-align:center!important;
  margin:18px 0 0!important;
  color:#475569!important;
  font-size:14px!important;
}

.auth-switch a{
  color:#0D47FF!important;
  font-weight:900!important;
  text-decoration:none!important;
}

.auth-card .phone-login-alt + .phone-login-alt{
  display:none!important;
}

@media(max-width:520px){
  .auth-waolink{
    align-items:flex-start!important;
    padding:22px 12px!important;
  }

  .auth-brand-card{
    padding:26px 18px 24px!important;
    border-radius:20px!important;
  }

  .clean-brand-word strong{
    font-size:48px!important;
  }

  .clean-brand-word small{
    font-size:26px!important;
  }

  .clean-login-intro h1{
    font-size:23px!important;
  }
}


/* =========================================================
   WAOLINK DESKTOP APP + CHAT LAYOUT POLISH
   Makes installed WAOLINK feel closer to a real desktop messenger.
   Browser view is also improved, but installed PWA gets the strongest polish.
   ========================================================= */

/* Top header cleaner for app usage */
.wao-pwa-installed .topbar,
body.wao-pwa-installed-body .topbar{
  height:62px!important;
  min-height:62px!important;
  padding:0 26px!important;
  background:#fff!important;
  border-bottom:1px solid #dfe7f2!important;
  box-shadow:0 1px 0 rgba(15,23,42,.04)!important;
}

.wao-pwa-installed .topbar .brand,
body.wao-pwa-installed-body .topbar .brand{
  min-width:190px!important;
}

.wao-pwa-installed .topbar nav,
body.wao-pwa-installed-body .topbar nav{
  display:flex!important;
  align-items:center!important;
  gap:20px!important;
  margin-left:auto!important;
}

.wao-pwa-installed .topbar nav a,
body.wao-pwa-installed-body .topbar nav a{
  font-weight:900!important;
  color:#061a40!important;
  text-decoration:none!important;
  padding:8px 0!important;
}

.wao-pwa-installed .topbar nav a:hover,
body.wao-pwa-installed-body .topbar nav a:hover{
  color:#0D47FF!important;
}

.wao-pwa-installed .topbar nav .danger,
body.wao-pwa-installed-body .topbar nav .danger{
  color:#dc2626!important;
}

/* General installed app page width */
.wao-pwa-installed .page,
body.wao-pwa-installed-body .page{
  padding-top:24px!important;
}

/* Chat app shell */
.wao-chat-page-view .chatwrap,
.wao-chat-page-view .chat-wrap,
.wao-chat-page-view .chat-layout,
.wao-chat-page-view .chat-page,
.wao-chat-page-view .chat-shell{
  width:min(1420px, calc(100vw - 42px))!important;
  max-width:1420px!important;
  height:calc(100vh - 112px)!important;
  min-height:720px!important;
  margin:0 auto!important;
  border-radius:24px!important;
  overflow:hidden!important;
  background:#fff!important;
  border:1px solid #dbe5f0!important;
  box-shadow:0 18px 60px rgba(15,23,42,.07)!important;
}

/* Common grid/flex chat shell support */
.wao-chat-page-view .chatwrap,
.wao-chat-page-view .chat-wrap,
.wao-chat-page-view .chat-layout{
  display:grid!important;
  grid-template-columns:340px minmax(0, 1fr)!important;
}

/* Left conversation sidebar */
.wao-chat-page-view .sidebar,
.wao-chat-page-view .chat-sidebar,
.wao-chat-page-view .conversations,
.wao-chat-page-view .chat-list-panel{
  width:auto!important;
  min-width:0!important;
  background:#fff!important;
  border-right:1px solid #dbe5f0!important;
  overflow:auto!important;
}

.wao-chat-page-view .sidebar h2,
.wao-chat-page-view .chat-sidebar h2,
.wao-chat-page-view .conversations h2,
.wao-chat-page-view .chat-list-panel h2{
  padding:18px 20px 10px!important;
  margin:0!important;
  font-size:22px!important;
}

/* Chat list cards */
.wao-chat-page-view .chat-item,
.wao-chat-page-view .conversation-item,
.wao-chat-page-view .conversation-card{
  margin:10px 14px!important;
  border-radius:18px!important;
  min-height:74px!important;
  border:1px solid #e0e8f3!important;
  transition:.18s ease!important;
}

.wao-chat-page-view .chat-item:hover,
.wao-chat-page-view .conversation-item:hover,
.wao-chat-page-view .conversation-card:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 10px 28px rgba(13,71,255,.08)!important;
}

.wao-chat-page-view .chat-item.active,
.wao-chat-page-view .conversation-item.active,
.wao-chat-page-view .conversation-card.active{
  border-color:#0D47FF!important;
  background:#f2fbff!important;
}

/* Main chat side */
.wao-chat-page-view .chat-main,
.wao-chat-page-view .conversation-main,
.wao-chat-page-view .chat-panel{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  height:100%!important;
  background:#eef6ff!important;
}

/* Conversation header */
.wao-chat-page-view .chat-header,
.wao-chat-page-view .conversation-header,
.wao-chat-page-view .thread-header{
  min-height:74px!important;
  padding:14px 22px!important;
  background:#fff!important;
  border-bottom:1px solid #dbe5f0!important;
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
}

/* Messages area */
.wao-chat-page-view .messages,
.wao-chat-page-view .chat-messages,
.wao-chat-page-view #messages{
  flex:1!important;
  min-height:0!important;
  height:auto!important;
  padding:28px 34px!important;
  overflow:auto!important;
  background:linear-gradient(180deg,#f4faff 0%,#edf6ff 100%)!important;
}

/* Bubble sizing so long text looks natural */
.wao-chat-page-view .bubble,
.wao-chat-page-view .message-bubble{
  max-width:min(680px, 72%)!important;
  border-radius:18px!important;
  line-height:1.45!important;
  box-shadow:0 4px 16px rgba(15,23,42,.05)!important;
}

.wao-chat-page-view .bubble.me,
.wao-chat-page-view .message-bubble.me,
.wao-chat-page-view .outgoing .bubble,
.wao-chat-page-view .message.outgoing .bubble{
  border-bottom-right-radius:8px!important;
}

.wao-chat-page-view .bubble.them,
.wao-chat-page-view .message-bubble.them,
.wao-chat-page-view .incoming .bubble,
.wao-chat-page-view .message.incoming .bubble{
  border-bottom-left-radius:8px!important;
}

/* Message actions neater */
.wao-chat-page-view .message-actions,
.wao-chat-page-view .msg-actions,
.wao-chat-page-view .actions{
  display:flex!important;
  gap:6px!important;
  flex-wrap:wrap!important;
  margin-top:6px!important;
}

.wao-chat-page-view .message-actions button,
.wao-chat-page-view .msg-actions button,
.wao-chat-page-view .actions button,
.wao-chat-page-view .message-actions a,
.wao-chat-page-view .msg-actions a,
.wao-chat-page-view .actions a{
  border-radius:8px!important;
  padding:5px 8px!important;
  font-size:12px!important;
  font-weight:900!important;
}

/* Composer/input area */
.wao-chat-page-view .composer,
.wao-chat-page-view .chat-input,
.wao-chat-page-view .message-input-bar,
.wao-chat-page-view form.send-form{
  min-height:78px!important;
  padding:14px 20px!important;
  background:#fff!important;
  border-top:1px solid #dbe5f0!important;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
}

.wao-chat-page-view .composer input[type="text"],
.wao-chat-page-view .chat-input input[type="text"],
.wao-chat-page-view .message-input-bar input[type="text"],
.wao-chat-page-view form.send-form input[type="text"],
.wao-chat-page-view textarea[name="body"],
.wao-chat-page-view input[name="body"]{
  min-height:48px!important;
  border-radius:16px!important;
  padding:0 18px!important;
  background:#fff!important;
  border:1px solid #cbd5e1!important;
  font-size:15px!important;
}

.wao-chat-page-view .composer input:focus,
.wao-chat-page-view .chat-input input:focus,
.wao-chat-page-view .message-input-bar input:focus,
.wao-chat-page-view form.send-form input:focus{
  border-color:#0D47FF!important;
  box-shadow:0 0 0 4px rgba(13,71,255,.10)!important;
}

.wao-chat-page-view .composer button,
.wao-chat-page-view .chat-input button,
.wao-chat-page-view .message-input-bar button,
.wao-chat-page-view form.send-form button{
  min-height:48px!important;
  border-radius:16px!important;
  font-weight:900!important;
}

/* Dashboard installed app width */
.wao-pwa-installed .dash,
.wao-pwa-installed .dashboard,
.wao-pwa-installed .dashboard-wrap,
.wao-pwa-installed .dash-wrap,
body.wao-pwa-installed-body .dash,
body.wao-pwa-installed-body .dashboard,
body.wao-pwa-installed-body .dashboard-wrap,
body.wao-pwa-installed-body .dash-wrap{
  width:min(1180px, calc(100vw - 48px))!important;
  max-width:1180px!important;
}

/* Make installed dashboard cards slightly more spacious */
.wao-pwa-installed .card,
body.wao-pwa-installed-body .card{
  border-color:#dbe5f0!important;
}

/* Larger screens: use more space */
@media(min-width:1500px){
  .wao-chat-page-view .chatwrap,
  .wao-chat-page-view .chat-wrap,
  .wao-chat-page-view .chat-layout,
  .wao-chat-page-view .chat-page,
  .wao-chat-page-view .chat-shell{
    width:min(1560px, calc(100vw - 70px))!important;
    max-width:1560px!important;
  }

  .wao-chat-page-view .chatwrap,
  .wao-chat-page-view .chat-wrap,
  .wao-chat-page-view .chat-layout{
    grid-template-columns:370px minmax(0, 1fr)!important;
  }

  .wao-chat-page-view .messages,
  .wao-chat-page-view .chat-messages,
  .wao-chat-page-view #messages{
    padding-left:44px!important;
    padding-right:44px!important;
  }
}

/* Mobile/tablet: preserve the existing mobile chat behaviour */
@media(max-width:820px){
  .wao-chat-page-view .chatwrap,
  .wao-chat-page-view .chat-wrap,
  .wao-chat-page-view .chat-layout,
  .wao-chat-page-view .chat-page,
  .wao-chat-page-view .chat-shell{
    width:100vw!important;
    max-width:100vw!important;
    height:calc(100vh - 64px)!important;
    min-height:0!important;
    margin:0!important;
    border-radius:0!important;
    border-left:0!important;
    border-right:0!important;
    box-shadow:none!important;
  }

  .wao-chat-page-view .chatwrap,
  .wao-chat-page-view .chat-wrap,
  .wao-chat-page-view .chat-layout{
    display:block!important;
  }

  .wao-chat-page-view .messages,
  .wao-chat-page-view .chat-messages,
  .wao-chat-page-view #messages{
    padding:14px 12px!important;
  }

  .wao-chat-page-view .bubble,
  .wao-chat-page-view .message-bubble{
    max-width:86%!important;
  }

  .wao-pwa-installed .topbar,
  body.wao-pwa-installed-body .topbar{
    height:58px!important;
    min-height:58px!important;
    padding:0 12px!important;
  }
}


/* =========================================================
   WAOLINK QR + GROUPS POLISH
   ========================================================= */
.qr-actions .btn-primary{
  min-width:150px!important;
}

.wao-groups-card{
  width:min(1080px, calc(100vw - 42px))!important;
  max-width:1080px!important;
  margin:34px auto!important;
  padding:24px!important;
  border-radius:24px!important;
  background:#fff!important;
  border:1px solid #dbe5f0!important;
  box-shadow:0 18px 60px rgba(15,23,42,.07)!important;
}

.wao-groups-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:20px!important;
  margin-bottom:18px!important;
}

.wao-groups-head h1{
  margin:0 0 6px!important;
  font-size:32px!important;
  color:#061a40!important;
}

.wao-groups-head .meta{
  margin:0!important;
  color:#64748b!important;
  font-size:14px!important;
}

.wao-create-group-btn{
  min-width:160px!important;
  min-height:54px!important;
  border-radius:16px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-weight:900!important;
  background:linear-gradient(135deg,#0D47FF,#05C7D9)!important;
  color:#fff!important;
  text-decoration:none!important;
}

.wao-groups-list{
  display:grid!important;
  gap:12px!important;
}

.wao-group-item{
  display:flex!important;
  align-items:center!important;
  gap:16px!important;
  padding:16px!important;
  border:1px solid #dbe5f0!important;
  border-radius:18px!important;
  background:#fff!important;
  text-decoration:none!important;
  color:#061a40!important;
  transition:.18s ease!important;
}

.wao-group-item:hover{
  transform:translateY(-1px)!important;
  border-color:#0D47FF!important;
  box-shadow:0 12px 30px rgba(13,71,255,.08)!important;
  background:#f8fcff!important;
}

.wao-group-avatar{
  width:54px!important;
  height:54px!important;
  border-radius:18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 54px!important;
  background:linear-gradient(135deg,#0D47FF,#05C7D9)!important;
  color:#fff!important;
  font-size:22px!important;
}

.wao-group-main{
  min-width:0!important;
  flex:1!important;
}

.wao-group-title-row{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin-bottom:8px!important;
}

.wao-group-title-row strong{
  font-size:18px!important;
  color:#061a40!important;
}

.wao-group-title-row span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  padding:5px 10px!important;
  background:#eef4ff!important;
  color:#0D47FF!important;
  font-size:12px!important;
  font-weight:900!important;
  white-space:nowrap!important;
}

.wao-group-members{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  flex-wrap:wrap!important;
}

.wao-group-members span{
  display:inline-flex!important;
  align-items:center!important;
  max-width:170px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  border-radius:999px!important;
  padding:5px 9px!important;
  background:#f1f5f9!important;
  color:#334155!important;
  font-size:12px!important;
  font-weight:800!important;
}

@media(max-width:820px){
  .wao-groups-card{
    width:calc(100vw - 24px)!important;
    margin:18px auto!important;
    padding:18px!important;
    border-radius:20px!important;
  }

  .wao-groups-head{
    flex-direction:column!important;
    align-items:stretch!important;
  }

  .wao-create-group-btn{
    width:100%!important;
  }

  .wao-group-title-row{
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:8px!important;
  }

  .wao-group-item{
    align-items:flex-start!important;
  }
}


/* =========================================================
   WAOLINK GROUP INFO PAGE
   ========================================================= */
.wao-group-info-card{
  width:min(920px, calc(100vw - 42px))!important;
  max-width:920px!important;
  margin:34px auto!important;
  padding:24px!important;
  border-radius:24px!important;
  background:#fff!important;
  border:1px solid #dbe5f0!important;
  box-shadow:0 18px 60px rgba(15,23,42,.07)!important;
}

.wao-group-info-top{
  display:flex!important;
  justify-content:flex-end!important;
  margin-bottom:16px!important;
}

.wao-group-hero{
  display:flex!important;
  align-items:center!important;
  gap:20px!important;
  padding:20px!important;
  border-radius:22px!important;
  background:linear-gradient(135deg,#f8fbff,#eef8ff)!important;
  border:1px solid #dbe5f0!important;
  margin-bottom:20px!important;
}

.wao-group-large-avatar{
  width:96px!important;
  height:96px!important;
  border-radius:30px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:linear-gradient(135deg,#0D47FF,#05C7D9)!important;
  color:#fff!important;
  font-size:42px!important;
  box-shadow:0 14px 34px rgba(13,71,255,.16)!important;
}

.wao-group-hero-main{
  min-width:0!important;
}

.wao-group-brand{
  margin-bottom:6px!important;
}

.wao-group-hero h1{
  margin:0 0 6px!important;
  font-size:32px!important;
  color:#061a40!important;
}

.wao-group-hero p{
  margin:0!important;
  color:#64748b!important;
  font-weight:800!important;
}

.wao-group-name-form{
  margin:0 0 22px!important;
}

.wao-group-name-form label{
  font-weight:900!important;
  color:#061a40!important;
  display:block!important;
  margin-bottom:8px!important;
}

.wao-group-inline-form{
  display:flex!important;
  gap:10px!important;
}

.wao-group-inline-form input{
  flex:1!important;
  min-height:48px!important;
  border-radius:14px!important;
  border:1px solid #cbd5e1!important;
  padding:0 14px!important;
}

.wao-group-inline-form button,
.wao-add-members-btn{
  min-height:48px!important;
  border:0!important;
  border-radius:14px!important;
  padding:0 18px!important;
  font-weight:900!important;
  color:#fff!important;
  background:linear-gradient(135deg,#0D47FF,#05C7D9)!important;
  cursor:pointer!important;
}

.wao-group-section{
  border-top:1px solid #e5edf7!important;
  padding-top:20px!important;
  margin-top:20px!important;
}

.wao-group-section-title{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:14px!important;
  margin-bottom:12px!important;
}

.wao-group-section-title h2{
  margin:0!important;
  color:#061a40!important;
  font-size:22px!important;
}

.wao-group-section-title span{
  display:inline-flex!important;
  align-items:center!important;
  border-radius:999px!important;
  padding:5px 10px!important;
  background:#eef4ff!important;
  color:#0D47FF!important;
  font-size:12px!important;
  font-weight:900!important;
}

.wao-group-member-list{
  display:grid!important;
  gap:10px!important;
}

.wao-group-member{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  padding:12px!important;
  border:1px solid #dbe5f0!important;
  border-radius:16px!important;
  background:#fff!important;
}

.wao-group-member-main{
  min-width:0!important;
  flex:1!important;
  display:grid!important;
  gap:3px!important;
}

.wao-group-member-main strong{
  color:#061a40!important;
  font-size:15px!important;
}

.wao-group-member-main span{
  color:#64748b!important;
  font-size:12px!important;
}

.wao-admin-badge{
  border-radius:999px!important;
  padding:5px 10px!important;
  background:#ecfdf5!important;
  color:#047857!important;
  font-size:12px!important;
  font-weight:900!important;
}

.wao-danger-lite,
.wao-danger-outline,
.wao-danger-solid{
  border-radius:12px!important;
  min-height:38px!important;
  padding:0 12px!important;
  font-weight:900!important;
  cursor:pointer!important;
}

.wao-danger-lite{
  border:0!important;
  background:#fee2e2!important;
  color:#b91c1c!important;
}

.wao-danger-outline{
  border:1px solid #fecaca!important;
  background:#fff!important;
  color:#b91c1c!important;
}

.wao-danger-solid{
  border:0!important;
  background:#dc2626!important;
  color:#fff!important;
}

.wao-add-member-grid{
  display:grid!important;
  grid-template-columns:repeat(2, minmax(0, 1fr))!important;
  gap:10px!important;
  margin-bottom:14px!important;
}

.wao-add-member-option{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:12px!important;
  border:1px solid #dbe5f0!important;
  border-radius:16px!important;
  background:#fff!important;
  cursor:pointer!important;
}

.wao-add-member-option:hover{
  border-color:#0D47FF!important;
  background:#f8fcff!important;
}

.wao-add-member-option input{
  width:auto!important;
}

.wao-add-member-option span{
  display:grid!important;
  gap:2px!important;
  min-width:0!important;
}

.wao-add-member-option strong{
  color:#061a40!important;
  font-size:14px!important;
}

.wao-add-member-option small{
  color:#64748b!important;
}

.wao-group-actions{
  display:flex!important;
  justify-content:space-between!important;
  gap:12px!important;
  border-top:1px solid #e5edf7!important;
  padding-top:20px!important;
  margin-top:22px!important;
}

.wao-group-card-actions{
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
}

.wao-group-info-pill{
  border-radius:999px!important;
  padding:6px 10px!important;
  background:#eef4ff!important;
  color:#0D47FF!important;
  font-size:12px!important;
  font-weight:900!important;
}

@media(max-width:820px){
  .wao-group-info-card{
    width:calc(100vw - 24px)!important;
    margin:18px auto!important;
    padding:18px!important;
    border-radius:20px!important;
  }

  .wao-group-hero{
    flex-direction:column!important;
    align-items:flex-start!important;
  }

  .wao-group-large-avatar{
    width:78px!important;
    height:78px!important;
    border-radius:24px!important;
    font-size:34px!important;
  }

  .wao-group-hero h1{
    font-size:26px!important;
  }

  .wao-group-inline-form,
  .wao-group-actions{
    flex-direction:column!important;
  }

  .wao-add-member-grid{
    grid-template-columns:1fr!important;
  }

  .wao-group-actions button,
  .wao-group-inline-form button{
    width:100%!important;
  }

  .wao-group-member{
    align-items:flex-start!important;
  }
}


/* =========================================================
   WAOLINK GROUP CONFIRM MODAL
   Replaces browser confirm boxes on Group Info page.
   ========================================================= */
.wao-group-confirm-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:10090;
}

.wao-group-confirm-modal.open{
  display:block;
}

.wao-group-confirm-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.46);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.wao-group-confirm-card{
  position:relative;
  z-index:2;
  width:min(430px, calc(100vw - 28px));
  margin:12vh auto 0;
  border-radius:24px;
  background:#fff;
  border:1px solid #dbe5f0;
  padding:28px;
  box-shadow:0 24px 80px rgba(15,23,42,.25);
  text-align:center;
}

.wao-group-confirm-close{
  position:absolute;
  top:14px;
  right:14px;
  width:38px;
  height:38px;
  border:0;
  border-radius:999px;
  background:#eef4ff;
  color:#0D47FF;
  font-size:24px;
  line-height:1;
  font-weight:900;
  cursor:pointer;
}

.wao-group-confirm-brand{
  margin-bottom:12px;
}

.wao-group-confirm-icon{
  width:58px;
  height:58px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 14px;
  background:#fff7ed;
  color:#ea580c;
  font-size:30px;
  font-weight:900;
}

.wao-group-confirm-modal.danger .wao-group-confirm-icon{
  background:#fee2e2;
  color:#dc2626;
}

.wao-group-confirm-card h2{
  margin:0 0 8px;
  color:#061a40;
  font-size:24px;
}

.wao-group-confirm-card p{
  margin:0;
  color:#475569;
  line-height:1.5;
  font-size:15px;
}

.wao-group-confirm-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:22px;
}

.wao-group-confirm-actions .btn,
.wao-group-confirm-submit{
  min-height:44px;
  min-width:116px;
  border-radius:14px;
  border:0;
  font-weight:900;
  cursor:pointer;
}

.wao-group-confirm-submit{
  background:linear-gradient(135deg,#0D47FF,#05C7D9);
  color:#fff;
}

.wao-group-confirm-submit.danger{
  background:#dc2626;
  color:#fff;
}

@media(max-width:520px){
  .wao-group-confirm-card{
    margin:0;
    width:100vw;
    min-height:100vh;
    border-radius:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  .wao-group-confirm-actions{
    flex-direction:column-reverse;
  }

  .wao-group-confirm-actions .btn,
  .wao-group-confirm-submit{
    width:100%;
  }
}


/* =========================================================
   WAOLINK GROUP CONFIRM BUTTON + INSTALL BUTTON FIX
   ========================================================= */

/* Ensure the confirm modal action text is always visible */
#waoGroupConfirmSubmit,
.wao-group-confirm-submit{
  color:#fff!important;
  font-size:15px!important;
  font-weight:900!important;
  text-indent:0!important;
  overflow:visible!important;
  white-space:nowrap!important;
  min-width:122px!important;
}

#waoGroupConfirmSubmit span,
.wao-group-confirm-submit span{
  display:inline!important;
  color:#fff!important;
  font-size:15px!important;
  font-weight:900!important;
  line-height:1!important;
  visibility:visible!important;
  opacity:1!important;
}

#waoGroupConfirmSubmit.danger,
.wao-group-confirm-submit.danger{
  background:#dc2626!important;
  color:#fff!important;
}

#waoGroupConfirmSubmit.danger span,
.wao-group-confirm-submit.danger span{
  color:#fff!important;
}

/* Remove install controls from dashboard/incognito view */
.wao-install-dashboard-btn,
#waoInstallAppBtn{
  display:none!important;
}


/* =========================================================
   WAOLINK SAFETY CONFIRM MODAL
   Replaces browser confirm box on Safety Controls page.
   ========================================================= */
.wao-safety-confirm-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:10095;
}

.wao-safety-confirm-modal.open{
  display:block;
}

.wao-safety-confirm-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.46);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.wao-safety-confirm-card{
  position:relative;
  z-index:2;
  width:min(430px, calc(100vw - 28px));
  margin:12vh auto 0;
  border-radius:24px;
  background:#fff;
  border:1px solid #dbe5f0;
  padding:28px;
  box-shadow:0 24px 80px rgba(15,23,42,.25);
  text-align:center;
}

.wao-safety-confirm-close{
  position:absolute;
  top:14px;
  right:14px;
  width:38px;
  height:38px;
  border:0;
  border-radius:999px;
  background:#eef4ff;
  color:#0D47FF;
  font-size:24px;
  line-height:1;
  font-weight:900;
  cursor:pointer;
}

.wao-safety-confirm-brand{
  margin-bottom:12px;
}

.wao-safety-confirm-icon{
  width:58px;
  height:58px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 14px;
  background:#fff7ed;
  color:#ea580c;
  font-size:28px;
  font-weight:900;
}

.wao-safety-confirm-modal.danger .wao-safety-confirm-icon{
  background:#fee2e2;
  color:#dc2626;
}

.wao-safety-confirm-card h2{
  margin:0 0 8px;
  color:#061a40;
  font-size:24px;
}

.wao-safety-confirm-card p{
  margin:0;
  color:#475569;
  line-height:1.5;
  font-size:15px;
}

.wao-safety-confirm-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:22px;
}

.wao-safety-confirm-actions .btn,
.wao-safety-confirm-submit{
  min-height:44px;
  min-width:124px;
  border-radius:14px;
  border:0;
  font-weight:900;
  cursor:pointer;
}

.wao-safety-confirm-submit{
  background:linear-gradient(135deg,#0D47FF,#05C7D9);
  color:#fff!important;
}

.wao-safety-confirm-submit.danger{
  background:#dc2626!important;
  color:#fff!important;
}

.wao-safety-confirm-submit span{
  color:#fff!important;
  font-size:15px!important;
  font-weight:900!important;
}

@media(max-width:520px){
  .wao-safety-confirm-card{
    margin:0;
    width:100vw;
    min-height:100vh;
    border-radius:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  .wao-safety-confirm-actions{
    flex-direction:column-reverse;
  }

  .wao-safety-confirm-actions .btn,
  .wao-safety-confirm-submit{
    width:100%;
  }
}


/* =========================================================
   WAOLINK SAFETY BLOCK BUTTON WORKING FIX
   ========================================================= */
#blockButton,
#unblockButton{
  cursor:pointer!important;
  pointer-events:auto!important;
}

#waoSafetyConfirmSubmit{
  pointer-events:auto!important;
  cursor:pointer!important;
  opacity:1!important;
  min-width:135px!important;
}

#waoSafetyConfirmSubmit span{
  color:#fff!important;
  display:inline!important;
  opacity:1!important;
  visibility:visible!important;
}

#waoSafetyConfirmSubmit:disabled{
  opacity:.75!important;
  cursor:wait!important;
}

.wao-safety-confirm-submit.danger{
  background:#dc2626!important;
  color:#fff!important;
}


/* =========================================================
   WAOLINK REACTION NAMES ON HOVER
   Shows who reacted when hovering/focusing reaction count.
   ========================================================= */
.reaction-chip{
  position:relative!important;
}

.reaction-chip[data-reaction-names]{
  cursor:pointer!important;
}

.wao-reaction-name-tooltip{
  position:fixed;
  z-index:10120;
  max-width:260px;
  padding:8px 11px;
  border-radius:12px;
  background:#061a40;
  color:#fff;
  font-size:12px;
  line-height:1.35;
  font-weight:800;
  box-shadow:0 12px 32px rgba(15,23,42,.24);
  pointer-events:none;
  white-space:normal;
}

.wao-reaction-name-tooltip::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-6px;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:6px solid #061a40;
}

@media(max-width:820px){
  .wao-reaction-name-tooltip{
    max-width:220px;
    font-size:11px;
  }
}


/* =========================================================
   WAOLINK GROUP ADMIN CONTROLS
   ========================================================= */
.wao-member-admin-actions{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
}

.wao-admin-lite{
  min-height:38px!important;
  padding:0 12px!important;
  border:0!important;
  border-radius:12px!important;
  background:#eaf2ff!important;
  color:#0D47FF!important;
  font-size:12px!important;
  font-weight:900!important;
  cursor:pointer!important;
}

.wao-admin-lite:hover{
  background:#dbeafe!important;
}

.wao-group-card-actions{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  margin-left:auto!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
}

.wao-group-info-action{
  background:#ecfdf5!important;
  color:#047857!important;
  cursor:pointer!important;
}

.wao-group-info-action:hover{
  background:#d1fae5!important;
}

@media(max-width:820px){
  .wao-member-admin-actions{
    width:100%!important;
    justify-content:flex-start!important;
    margin-top:8px!important;
  }

  .wao-member-admin-actions form{
    flex:1!important;
  }

  .wao-member-admin-actions button{
    width:100%!important;
  }

  .wao-group-card-actions{
    width:100%!important;
    justify-content:flex-start!important;
    margin-top:10px!important;
  }
}


/* =========================================================
   WAOLINK GROUP INVITE LINK + QR
   ========================================================= */
.wao-invite-section .meta{
  color:#64748b!important;
  line-height:1.5!important;
}

.wao-invite-card{
  border:1px solid #dbe5f0!important;
  border-radius:18px!important;
  background:#f8fbff!important;
  padding:16px!important;
}

.wao-invite-link-row{
  display:flex!important;
  gap:10px!important;
  margin-bottom:16px!important;
}

.wao-invite-link-row input{
  flex:1!important;
  min-height:46px!important;
  border-radius:14px!important;
  border:1px solid #cbd5e1!important;
  padding:0 13px!important;
  font-weight:700!important;
  color:#061a40!important;
}

.wao-copy-invite-btn{
  min-height:46px!important;
  border:0!important;
  border-radius:14px!important;
  padding:0 18px!important;
  font-weight:900!important;
  color:#fff!important;
  background:linear-gradient(135deg,#0D47FF,#05C7D9)!important;
  cursor:pointer!important;
}

.wao-invite-qr-wrap{
  display:flex!important;
  align-items:center!important;
  gap:16px!important;
  padding:14px!important;
  border-radius:16px!important;
  background:#fff!important;
  border:1px solid #e5edf7!important;
}

.wao-invite-qr{
  width:132px!important;
  height:132px!important;
  border-radius:14px!important;
  border:1px solid #dbe5f0!important;
  background:#fff!important;
  padding:6px!important;
}

.wao-invite-qr-wrap strong{
  display:block!important;
  color:#061a40!important;
  font-size:18px!important;
  margin-bottom:5px!important;
}

.wao-invite-actions{
  display:flex!important;
  justify-content:space-between!important;
  gap:10px!important;
  align-items:center!important;
  margin-top:14px!important;
}

.wao-group-invite-page{
  width:min(620px, calc(100vw - 34px))!important;
  margin:42px auto!important;
  padding:26px!important;
  border-radius:24px!important;
  background:#fff!important;
  border:1px solid #dbe5f0!important;
  box-shadow:0 20px 70px rgba(15,23,42,.08)!important;
}

.wao-group-invite-hero{
  display:flex!important;
  align-items:center!important;
  gap:18px!important;
  padding:18px!important;
  border-radius:20px!important;
  background:linear-gradient(135deg,#f8fbff,#eef8ff)!important;
  border:1px solid #dbe5f0!important;
  margin-bottom:20px!important;
}

.wao-group-invite-page h1{
  margin:5px 0 4px!important;
  color:#061a40!important;
  font-size:30px!important;
}

.wao-group-invite-page h2{
  margin:8px 0 0!important;
  color:#0D47FF!important;
  font-size:22px!important;
}

.wao-group-invite-page p{
  margin:0!important;
  color:#64748b!important;
}

.wao-invite-dashboard-link{
  width:100%!important;
  margin-top:10px!important;
}

@media(max-width:720px){
  .wao-invite-link-row,
  .wao-invite-actions,
  .wao-invite-qr-wrap,
  .wao-group-invite-hero{
    flex-direction:column!important;
    align-items:stretch!important;
  }

  .wao-copy-invite-btn,
  .wao-invite-actions .btn,
  .wao-invite-actions button{
    width:100%!important;
  }

  .wao-invite-qr{
    width:180px!important;
    height:180px!important;
    margin:auto!important;
  }
}


/* =========================================================
   WAOLINK CLICKABLE MESSAGE LINKS
   Makes invite links and website links clickable inside chat messages.
   ========================================================= */
.wao-message-link{
  color:#0D47FF!important;
  font-weight:900!important;
  text-decoration:underline!important;
  text-underline-offset:2px!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}

.mine .wao-message-link{
  color:#fff!important;
  text-decoration:underline!important;
}

.message-text{
  overflow-wrap:anywhere!important;
}


/* =========================================================
   WAOLINK GROUP INVITE PREVIEW CARD IN CHAT
   Turns long invite links into a clean preview card.
   ========================================================= */
.wao-invite-preview-card{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  width:min(430px, 100%)!important;
  margin:4px 0!important;
  padding:12px!important;
  border-radius:18px!important;
  border:1px solid #dbe5f0!important;
  background:linear-gradient(135deg,#f8fbff,#eef8ff)!important;
  color:#061a40!important;
  text-decoration:none!important;
  box-shadow:0 8px 24px rgba(15,23,42,.06)!important;
}

.wao-invite-preview-card:hover{
  border-color:#0D47FF!important;
  transform:translateY(-1px)!important;
  box-shadow:0 12px 32px rgba(13,71,255,.12)!important;
}

.wao-invite-preview-icon{
  width:52px!important;
  height:52px!important;
  border-radius:17px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:linear-gradient(135deg,#0D47FF,#05C7D9)!important;
  color:#fff!important;
  font-size:24px!important;
  flex:0 0 auto!important;
}

.wao-invite-preview-main{
  min-width:0!important;
  flex:1!important;
  display:grid!important;
  gap:2px!important;
}

.wao-invite-preview-brand{
  color:#0D47FF!important;
  font-size:11px!important;
  font-weight:1000!important;
  letter-spacing:.03em!important;
  text-transform:uppercase!important;
}

.wao-invite-preview-main strong{
  color:#061a40!important;
  font-size:15px!important;
  font-weight:1000!important;
}

.wao-invite-preview-main span{
  color:#64748b!important;
  font-size:12px!important;
  line-height:1.35!important;
}

.wao-invite-preview-action{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:34px!important;
  border-radius:999px!important;
  padding:0 12px!important;
  background:#0D47FF!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:1000!important;
  flex:0 0 auto!important;
}

.mine .wao-invite-preview-card{
  background:#fff!important;
  color:#061a40!important;
}

.mine .wao-invite-preview-main strong{
  color:#061a40!important;
}

.mine .wao-invite-preview-main span{
  color:#64748b!important;
}

.wao-message-link-extra{
  margin-top:8px!important;
}

@media(max-width:820px){
  .wao-invite-preview-card{
    gap:10px!important;
    padding:10px!important;
    border-radius:16px!important;
  }

  .wao-invite-preview-icon{
    width:46px!important;
    height:46px!important;
    border-radius:15px!important;
    font-size:21px!important;
  }

  .wao-invite-preview-action{
    min-height:30px!important;
    padding:0 10px!important;
  }
}


/* =========================================================
   WAOLINK INVITE DUPLICATE WARNING
   Warns before sending the same group invite again.
   ========================================================= */
.wao-invite-duplicate-warning{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin:8px 12px!important;
  padding:10px!important;
  border-radius:18px!important;
  border:1px solid #bfdbfe!important;
  background:#eff6ff!important;
  box-shadow:0 10px 26px rgba(13,71,255,.08)!important;
}

.wao-duplicate-icon{
  width:42px!important;
  height:42px!important;
  border-radius:14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:linear-gradient(135deg,#0D47FF,#05C7D9)!important;
  color:#fff!important;
  font-size:19px!important;
  flex:0 0 auto!important;
}

.wao-duplicate-main{
  display:grid!important;
  gap:2px!important;
  min-width:0!important;
  flex:1!important;
}

.wao-duplicate-main strong{
  color:#061a40!important;
  font-size:13px!important;
  font-weight:1000!important;
}

.wao-duplicate-main span{
  color:#64748b!important;
  font-size:12px!important;
  line-height:1.35!important;
}

.wao-duplicate-send,
.wao-duplicate-cancel{
  min-height:36px!important;
  border-radius:12px!important;
  padding:0 12px!important;
  font-size:12px!important;
  font-weight:1000!important;
  cursor:pointer!important;
}

.wao-duplicate-send{
  border:0!important;
  background:#0D47FF!important;
  color:#fff!important;
}

.wao-duplicate-cancel{
  border:0!important;
  background:#e8eefc!important;
  color:#0D47FF!important;
}

@media(max-width:820px){
  .wao-invite-duplicate-warning{
    flex-wrap:wrap!important;
    align-items:flex-start!important;
  }

  .wao-duplicate-main{
    flex:1 1 calc(100% - 56px)!important;
  }

  .wao-duplicate-send,
  .wao-duplicate-cancel{
    flex:1!important;
  }
}


/* =========================================================
   WAOLINK DIRECT GROUP INVITE SEND
   Send invite link to selected available contacts without copy/paste.
   ========================================================= */
.wao-direct-invite-box{
  margin-top:16px!important;
  padding:15px!important;
  border-radius:18px!important;
  background:#fff!important;
  border:1px solid #dbe5f0!important;
}

.wao-direct-invite-title{
  display:grid!important;
  gap:3px!important;
  margin-bottom:12px!important;
}

.wao-direct-invite-title strong{
  color:#061a40!important;
  font-size:16px!important;
  font-weight:1000!important;
}

.wao-direct-invite-title span{
  color:#64748b!important;
  font-size:13px!important;
  line-height:1.4!important;
}

.wao-direct-invite-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
  margin-bottom:13px!important;
}

.wao-direct-invite-option{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:11px!important;
  border-radius:16px!important;
  border:1px solid #dbe5f0!important;
  background:#f8fbff!important;
  cursor:pointer!important;
}

.wao-direct-invite-option:hover{
  border-color:#0D47FF!important;
  background:#eef8ff!important;
}

.wao-direct-invite-option input{
  width:auto!important;
  flex:0 0 auto!important;
}

.wao-direct-invite-option span{
  display:grid!important;
  gap:2px!important;
  min-width:0!important;
}

.wao-direct-invite-option strong{
  color:#061a40!important;
  font-size:14px!important;
}

.wao-direct-invite-option small{
  color:#64748b!important;
  font-size:12px!important;
}

.wao-send-invite-btn{
  width:100%!important;
  min-height:46px!important;
  border:0!important;
  border-radius:14px!important;
  color:#fff!important;
  background:linear-gradient(135deg,#0D47FF,#05C7D9)!important;
  font-weight:1000!important;
  cursor:pointer!important;
}

.wao-direct-invite-empty{
  margin-top:14px!important;
  padding:13px!important;
  border-radius:15px!important;
  background:#f8fafc!important;
  color:#64748b!important;
  font-weight:800!important;
  text-align:center!important;
  border:1px dashed #cbd5e1!important;
}

@media(max-width:820px){
  .wao-direct-invite-grid{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   WAOLINK GROUP INVITE STATUS
   Shows admin who was invited and who joined.
   ========================================================= */
.wao-invite-status-list{
  display:grid!important;
  gap:10px!important;
}

.wao-invite-status-row{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  padding:12px!important;
  border-radius:17px!important;
  border:1px solid #dbe5f0!important;
  background:#fff!important;
}

.wao-invite-status-main{
  min-width:0!important;
  flex:1!important;
  display:grid!important;
  gap:2px!important;
}

.wao-invite-status-main strong{
  color:#061a40!important;
  font-size:15px!important;
  font-weight:1000!important;
}

.wao-invite-status-main span,
.wao-invite-status-main small,
.wao-invite-status-right small{
  color:#64748b!important;
  font-size:12px!important;
}

.wao-invite-status-right{
  display:grid!important;
  gap:5px!important;
  justify-items:end!important;
  text-align:right!important;
}

.wao-invite-status-badge{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:26px!important;
  border-radius:999px!important;
  padding:0 10px!important;
  font-size:12px!important;
  font-weight:1000!important;
}

.wao-invite-status-badge.joined{
  background:#ecfdf5!important;
  color:#047857!important;
}

.wao-invite-status-badge.pending{
  background:#fff7ed!important;
  color:#c2410c!important;
}

@media(max-width:720px){
  .wao-invite-status-row{
    align-items:flex-start!important;
  }

  .wao-invite-status-right{
    justify-items:start!important;
    text-align:left!important;
  }
}


/* =========================================================
   WAOLINK GROUP JOIN NOTIFICATION
   Styles "joined using invite link" message inside group chat.
   ========================================================= */
.bubble.join-notification-bubble{
  background:#ecfdf5!important;
  border:1px solid #bbf7d0!important;
  color:#047857!important;
  font-weight:900!important;
}

.bubble.join-notification-bubble .sender-name{
  color:#047857!important;
}

.bubble.join-notification-bubble .message-text{
  color:#047857!important;
}


/* =========================================================
   WAOLINK GROUP LEAVE NOTIFICATION
   Styles "left the group" message inside group chat.
   ========================================================= */
.bubble.leave-notification-bubble{
  background:#fff7ed!important;
  border:1px solid #fed7aa!important;
  color:#c2410c!important;
  font-weight:900!important;
}

.bubble.leave-notification-bubble .sender-name{
  color:#c2410c!important;
}

.bubble.leave-notification-bubble .message-text{
  color:#c2410c!important;
}


/* =========================================================
   WAOLINK GROUP REMOVED NOTIFICATION
   Styles "was removed from the group by" message inside group chat.
   ========================================================= */
.bubble.removed-notification-bubble{
  background:#fef2f2!important;
  border:1px solid #fecaca!important;
  color:#b91c1c!important;
  font-weight:900!important;
}

.bubble.removed-notification-bubble .sender-name{
  color:#b91c1c!important;
}

.bubble.removed-notification-bubble .message-text{
  color:#b91c1c!important;
}


/* =========================================================
   WAOLINK GROUP ABOUT SECTION
   Admin can add group purpose/rules; all members can view.
   ========================================================= */
.wao-group-about-section{
  border-top:1px solid #e5edf7!important;
}

.wao-group-about-form{
  display:grid!important;
  gap:10px!important;
}

.wao-group-about-form textarea{
  width:100%!important;
  min-height:120px!important;
  resize:vertical!important;
  border-radius:16px!important;
  border:1px solid #cbd5e1!important;
  padding:13px 14px!important;
  color:#061a40!important;
  line-height:1.5!important;
  font-size:14px!important;
  background:#fff!important;
}

.wao-group-about-form textarea:focus{
  outline:none!important;
  border-color:#0D47FF!important;
  box-shadow:0 0 0 4px rgba(13,71,255,.10)!important;
}

.wao-about-form-footer{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
}

.wao-about-form-footer small{
  color:#64748b!important;
  font-weight:800!important;
}

.wao-about-form-footer button{
  min-height:44px!important;
  border:0!important;
  border-radius:14px!important;
  padding:0 18px!important;
  color:#fff!important;
  background:linear-gradient(135deg,#0D47FF,#05C7D9)!important;
  font-weight:1000!important;
  cursor:pointer!important;
}

.wao-group-about-view{
  padding:14px!important;
  border-radius:16px!important;
  border:1px solid #dbe5f0!important;
  background:#f8fbff!important;
  color:#334155!important;
  line-height:1.6!important;
  font-size:14px!important;
  white-space:normal!important;
}

@media(max-width:720px){
  .wao-about-form-footer{
    flex-direction:column!important;
    align-items:stretch!important;
  }

  .wao-about-form-footer button{
    width:100%!important;
  }
}


/* =========================================================
   WAOLINK GROUP PHOTO / ICON
   Group photo appears on Group Info, Groups page and Chat header.
   ========================================================= */
.wao-group-photo-large{
  object-fit:cover!important;
  background:#fff!important;
}

.wao-group-photo-thumb{
  object-fit:cover!important;
  background:#fff!important;
}

.wao-chat-group-default-avatar{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:linear-gradient(135deg,#0D47FF,#05C7D9)!important;
  color:#fff!important;
  font-size:18px!important;
}

.wao-group-photo-form{
  display:flex!important;
  align-items:stretch!important;
  gap:12px!important;
  flex-wrap:wrap!important;
}

.wao-photo-upload-box{
  flex:1!important;
  min-width:240px!important;
  display:grid!important;
  gap:4px!important;
  padding:14px!important;
  border:1px dashed #93c5fd!important;
  border-radius:16px!important;
  background:#f8fbff!important;
  cursor:pointer!important;
}

.wao-photo-upload-box:hover{
  background:#eef8ff!important;
  border-color:#0D47FF!important;
}

.wao-photo-upload-box input{
  width:100%!important;
}

.wao-photo-upload-box span{
  color:#061a40!important;
  font-size:14px!important;
  font-weight:1000!important;
}

.wao-photo-upload-box small{
  color:#64748b!important;
  font-size:12px!important;
}

.wao-group-photo-form button{
  min-height:52px!important;
  border:0!important;
  border-radius:14px!important;
  padding:0 18px!important;
  color:#fff!important;
  background:linear-gradient(135deg,#0D47FF,#05C7D9)!important;
  font-weight:1000!important;
  cursor:pointer!important;
}

.wao-remove-photo-form{
  margin-top:10px!important;
}

@media(max-width:720px){
  .wao-group-photo-form{
    flex-direction:column!important;
  }

  .wao-group-photo-form button,
  .wao-remove-photo-form button{
    width:100%!important;
  }
}


/* =========================================================
   WAOLINK GROUP PHOTO EVERYWHERE FIX
   Ensures group photo appears in chat list / dashboard recent list too.
   ========================================================= */
.conversation-avatar-wrap .avatar,
.conversation-list .avatar,
.wao-group-photo-thumb,
.chathead .avatar{
  object-fit:cover!important;
}

.conversation-avatar-wrap .avatar{
  width:52px!important;
  height:52px!important;
  border-radius:18px!important;
}


/* =========================================================
   WAOLINK GROUP MESSAGE PINNING
   Admin can pin a group message at the top of chat.
   ========================================================= */
.wao-pinned-message-banner{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  padding:12px!important;
  margin:0 0 8px!important;
  border-radius:18px!important;
  border:1px solid #bfdbfe!important;
  background:linear-gradient(135deg,#f8fbff,#eef8ff)!important;
  box-shadow:0 10px 26px rgba(13,71,255,.08)!important;
}

.wao-pin-icon{
  width:44px!important;
  height:44px!important;
  border-radius:15px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:linear-gradient(135deg,#0D47FF,#05C7D9)!important;
  color:#fff!important;
  font-size:20px!important;
  flex:0 0 auto!important;
}

.wao-pin-main{
  min-width:0!important;
  flex:1!important;
  display:grid!important;
  gap:2px!important;
}

.wao-pin-main strong{
  color:#061a40!important;
  font-size:14px!important;
  font-weight:1000!important;
}

.wao-pin-main span{
  color:#334155!important;
  font-size:13px!important;
  line-height:1.35!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.wao-pin-main small{
  color:#64748b!important;
  font-size:11px!important;
  font-weight:800!important;
}

.wao-pin-jump,
.wao-pin-unpin{
  min-height:36px!important;
  border:0!important;
  border-radius:12px!important;
  padding:0 12px!important;
  font-size:12px!important;
  font-weight:1000!important;
  cursor:pointer!important;
}

.wao-pin-jump{
  color:#fff!important;
  background:#0D47FF!important;
}

.wao-pin-unpin{
  color:#b91c1c!important;
  background:#fee2e2!important;
}

.pinned-message-row .bubble{
  outline:2px solid rgba(13,71,255,.22)!important;
  outline-offset:3px!important;
}

.wao-pin-highlight .bubble{
  animation:waoPinPulse 1.6s ease-in-out!important;
}

@keyframes waoPinPulse{
  0%,100%{box-shadow:0 8px 24px rgba(15,23,42,.08);}
  50%{box-shadow:0 0 0 7px rgba(13,71,255,.18),0 14px 34px rgba(13,71,255,.16);}
}

@media(max-width:820px){
  .wao-pinned-message-banner{
    flex-wrap:wrap!important;
    align-items:flex-start!important;
  }

  .wao-pin-main{
    flex:1 1 calc(100% - 58px)!important;
  }

  .wao-pin-jump,
  .wao-pin-unpin{
    flex:1!important;
  }
}


/* =========================================================
   WAOLINK GROUP MUTE NOTIFICATIONS
   User can mute browser notifications and sounds for a group.
   ========================================================= */
.wao-mute-button{
  cursor:pointer!important;
  border:0!important;
}

.wao-mute-button.muted{
  background:#fff7ed!important;
  color:#c2410c!important;
}

.wao-mute-button:disabled{
  opacity:.65!important;
  cursor:wait!important;
}

.wao-group-mute-note{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding:12px 14px!important;
  border-radius:16px!important;
  border:1px solid #bfdbfe!important;
  background:#eff6ff!important;
  color:#0f172a!important;
  margin-bottom:14px!important;
}

.wao-group-mute-note strong{
  color:#061a40!important;
  font-weight:1000!important;
}

.wao-group-mute-note span{
  color:#475569!important;
  font-size:13px!important;
  font-weight:800!important;
}

.wao-group-mute-note.muted{
  border-color:#fed7aa!important;
  background:#fff7ed!important;
}

.wao-group-mute-note.muted strong{
  color:#c2410c!important;
}

@media(max-width:720px){
  .wao-group-mute-note{
    flex-direction:column!important;
    align-items:flex-start!important;
  }
}


/* =========================================================
   WAOLINK STICKY CHAT HEADER
   Keeps one-to-one and group chat header visible like WhatsApp.
   ========================================================= */
.chat{
  height:calc(100vh - 120px)!important;
  min-height:640px!important;
  max-height:calc(100vh - 120px)!important;
  overflow:hidden!important;
}

.mainchat{
  min-height:0!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
}

.chathead{
  position:sticky!important;
  top:0!important;
  z-index:40!important;
  background:#fff!important;
  flex:0 0 auto!important;
  box-shadow:0 1px 0 rgba(15,23,42,.06)!important;
}

.messages{
  flex:1 1 auto!important;
  height:auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scroll-behavior:smooth!important;
}

.compose{
  flex:0 0 auto!important;
  position:sticky!important;
  bottom:0!important;
  z-index:35!important;
  background:#fff!important;
}

.side{
  min-height:0!important;
  overflow-y:auto!important;
}

@media(max-width:850px){
  .chat{
    height:calc(100vh - 92px)!important;
    min-height:calc(100vh - 92px)!important;
    max-height:calc(100vh - 92px)!important;
  }

  .chathead{
    top:0!important;
  }
}

@media(max-width:520px){
  .chat{
    height:calc(100vh - 74px)!important;
    min-height:calc(100vh - 74px)!important;
    max-height:calc(100vh - 74px)!important;
    border-radius:0!important;
  }
}


/* =========================================================
   WAOLINK UNREAD MESSAGE BADGES
   Makes unread count clear on left chat list and dashboard recent list.
   ========================================================= */
.wao-unread-summary{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  margin:0 0 12px!important;
  padding:10px 12px!important;
  border-radius:16px!important;
  border:1px solid #bfdbfe!important;
  background:linear-gradient(135deg,#eff6ff,#eef8ff)!important;
  color:#061a40!important;
  box-shadow:0 8px 22px rgba(13,71,255,.08)!important;
}

.wao-unread-summary span{
  width:30px!important;
  height:30px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#fff!important;
  background:linear-gradient(135deg,#0D47FF,#05C7D9)!important;
  font-size:13px!important;
  font-weight:1000!important;
  flex:0 0 auto!important;
}

.wao-unread-summary strong{
  font-size:13px!important;
  font-weight:1000!important;
  color:#061a40!important;
}

.conversation-card.unread{
  border-color:#0D47FF!important;
  background:linear-gradient(135deg,#f8fbff,#eef8ff)!important;
  box-shadow:0 10px 28px rgba(13,71,255,.10)!important;
}

.conversation-card.unread .conversation-title-row strong{
  color:#061a40!important;
  font-weight:1000!important;
}

.conversation-card.unread .conversation-preview{
  color:#061a40!important;
  font-weight:900!important;
}

.conversation-preview-label.new{
  background:#0D47FF!important;
  color:#fff!important;
}

.unread-badge{
  min-width:25px!important;
  height:25px!important;
  padding:0 8px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#fff!important;
  background:#0D47FF!important;
  font-size:12px!important;
  font-weight:1000!important;
  box-shadow:0 8px 18px rgba(13,71,255,.25)!important;
}

.conversation-card.unread .conversation-time{
  color:#0D47FF!important;
  font-weight:1000!important;
}

@media(max-width:820px){
  .wao-unread-summary{
    margin:0 0 10px!important;
  }
}


/* =========================================================
   WAOLINK MESSAGE INFO / READ BY DETAILS
   Shows read, delivered and not-read users.
   ========================================================= */
.wao-message-info-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:10140;
}

.wao-message-info-modal.open{
  display:block;
}

.wao-message-info-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.46);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.wao-message-info-card{
  position:relative;
  z-index:2;
  width:min(560px, calc(100vw - 28px));
  max-height:86vh;
  overflow:auto;
  margin:7vh auto 0;
  border-radius:24px;
  background:#fff;
  border:1px solid #dbe5f0;
  box-shadow:0 24px 80px rgba(15,23,42,.25);
  padding:22px;
}

.wao-message-info-close{
  position:absolute;
  top:13px;
  right:13px;
  width:38px;
  height:38px;
  border:0;
  border-radius:999px;
  background:#eef4ff;
  color:#0D47FF;
  font-size:24px;
  line-height:1;
  font-weight:900;
  cursor:pointer;
}

.wao-message-info-head{
  padding:12px 46px 16px 0;
  border-bottom:1px solid #e5edf7;
}

.wao-message-info-head h2{
  margin:8px 0 8px;
  color:#061a40;
  font-size:26px;
}

.wao-message-info-head p{
  margin:0 0 6px;
  color:#334155;
  line-height:1.45;
  font-weight:800;
  overflow-wrap:anywhere;
}

.wao-message-info-head small{
  color:#64748b;
  font-weight:800;
}

.wao-message-info-body{
  display:grid;
  gap:16px;
  margin-top:16px;
}

.wao-message-info-section{
  border:1px solid #dbe5f0;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
}

.wao-message-info-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  background:#f8fbff;
  border-bottom:1px solid #e5edf7;
}

.wao-message-info-section-head h3{
  margin:0;
  color:#061a40;
  font-size:17px;
}

.wao-message-info-section-head span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:26px;
  height:26px;
  border-radius:999px;
  padding:0 8px;
  background:#0D47FF;
  color:#fff;
  font-size:12px;
  font-weight:1000;
}

.wao-message-info-person{
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px 14px;
  border-bottom:1px solid #eef2f7;
}

.wao-message-info-person:last-child{
  border-bottom:0;
}

.wao-message-info-person-main{
  min-width:0;
  flex:1;
  display:grid;
  gap:2px;
}

.wao-message-info-person-main strong{
  color:#061a40;
  font-size:14px;
}

.wao-message-info-person-main span{
  color:#64748b;
  font-size:12px;
}

.wao-message-info-person-right{
  display:grid;
  gap:2px;
  justify-items:end;
  text-align:right;
}

.wao-message-info-person-right b{
  color:#0D47FF;
  font-size:12px;
}

.wao-message-info-person-right small{
  color:#64748b;
  font-size:11px;
}

.wao-message-info-empty{
  padding:14px;
  color:#64748b;
  font-weight:800;
  text-align:center;
  background:#fff;
}

@media(max-width:560px){
  .wao-message-info-card{
    width:100vw;
    height:100vh;
    max-height:100vh;
    margin:0;
    border-radius:0;
  }

  .wao-message-info-person{
    align-items:flex-start;
  }

  .wao-message-info-person-right{
    justify-items:start;
    text-align:left;
  }
}


/* =========================================================
   WAOLINK CHAT HEADER ACTION POLISH
   Makes Info and Safety top icons more attractive.
   ========================================================= */
.chat-title-actions{
  gap:10px!important;
  flex-wrap:wrap!important;
}

.chat-info-button.wao-header-action{
  width:auto!important;
  min-width:unset!important;
  height:44px!important;
  padding:0 14px 0 10px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  font-size:14px!important;
  font-weight:900!important;
  line-height:1!important;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease!important;
}

.chat-info-button.wao-header-action:hover{
  transform:translateY(-2px)!important;
  filter:saturate(1.02)!important;
}

.wao-header-action .wao-header-action-icon{
  width:24px!important;
  height:24px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:14px!important;
  font-weight:1000!important;
  line-height:1!important;
  flex:0 0 24px!important;
}

.wao-header-action .wao-header-action-text{
  font-size:13px!important;
  font-weight:1000!important;
  letter-spacing:.01em!important;
  white-space:nowrap!important;
}

.chat-info-button.wao-header-action.info-link{
  background:linear-gradient(135deg,#eff6ff 0%, #dbeafe 100%)!important;
  color:#0b49ba!important;
  border:1px solid #bfdbfe!important;
  box-shadow:0 10px 22px rgba(59,130,246,.14)!important;
}

.chat-info-button.wao-header-action.info-link .wao-header-action-icon{
  background:#fff!important;
  color:#0d47ff!important;
  box-shadow:0 4px 10px rgba(59,130,246,.18)!important;
  text-transform:lowercase!important;
  font-style:normal!important;
}

.chat-info-button.wao-header-action.info-link:hover{
  background:linear-gradient(135deg,#dbeafe 0%, #bfdbfe 100%)!important;
}

.chat-info-button.wao-header-action.safety-link{
  background:linear-gradient(135deg,#fff7ed 0%, #ffedd5 100%)!important;
  color:#c2410c!important;
  border:1px solid #fdba74!important;
  box-shadow:0 10px 22px rgba(249,115,22,.14)!important;
}

.chat-info-button.wao-header-action.safety-link .wao-header-action-icon{
  background:#fff!important;
  color:#ea580c!important;
  box-shadow:0 4px 10px rgba(249,115,22,.18)!important;
  font-size:13px!important;
}

.chat-info-button.wao-header-action.safety-link:hover{
  background:linear-gradient(135deg,#ffedd5 0%, #fed7aa 100%)!important;
}

@media(max-width:760px){
  .chat-info-button.wao-header-action{
    padding:0 10px!important;
  }

  .wao-header-action .wao-header-action-text{
    display:none!important;
  }
}


/* =========================================================
   WAOLINK MUTE BELL BUTTON POLISH
   Makes mute bell match professional Info/Safety header actions.
   ========================================================= */
.chat-info-button.wao-header-action.wao-mute-button{
  background:linear-gradient(135deg,#ecfdf5 0%, #d1fae5 100%)!important;
  color:#047857!important;
  border:1px solid #86efac!important;
  box-shadow:0 10px 22px rgba(16,185,129,.14)!important;
}

.chat-info-button.wao-header-action.wao-mute-button .wao-header-action-icon{
  background:#fff!important;
  color:#059669!important;
  box-shadow:0 4px 10px rgba(16,185,129,.18)!important;
  font-size:13px!important;
}

.chat-info-button.wao-header-action.wao-mute-button:hover{
  background:linear-gradient(135deg,#d1fae5 0%, #bbf7d0 100%)!important;
}

.chat-info-button.wao-header-action.wao-mute-button.muted{
  background:linear-gradient(135deg,#fff7ed 0%, #ffedd5 100%)!important;
  color:#c2410c!important;
  border:1px solid #fdba74!important;
  box-shadow:0 10px 22px rgba(249,115,22,.14)!important;
}

.chat-info-button.wao-header-action.wao-mute-button.muted .wao-header-action-icon{
  background:#fff!important;
  color:#ea580c!important;
  box-shadow:0 4px 10px rgba(249,115,22,.18)!important;
}

.chat-info-button.wao-header-action.wao-mute-button.muted:hover{
  background:linear-gradient(135deg,#ffedd5 0%, #fed7aa 100%)!important;
}

.chat-info-button.wao-header-action.wao-mute-button:disabled{
  opacity:.65!important;
  cursor:wait!important;
}


/* =========================================================
   WAOLINK CHAT LIST TYPING INDICATOR
   Shows "Maha is typing..." in the left chat list/dashboard.
   ========================================================= */
.conversation-card.typing-active{
  border-color:#05C7D9!important;
  background:linear-gradient(135deg,#f0fdff,#ecfeff)!important;
  box-shadow:0 10px 28px rgba(5,199,217,.12)!important;
}

.conversation-preview-label.typing{
  background:#05C7D9!important;
  color:#fff!important;
}

.conversation-preview.typing{
  color:#0891b2!important;
  font-weight:1000!important;
  font-style:italic!important;
}

.conversation-card.typing-active .conversation-title-row strong{
  color:#061a40!important;
}

.conversation-card.typing-active .conversation-time{
  color:#0891b2!important;
  font-weight:1000!important;
}


/* =========================================================
   WAOLINK CHAT LIST ONLINE / LAST SEEN STATUS
   Clear online/offline/group status in left chat list and dashboard.
   ========================================================= */
.conversation-subtitle{
  margin-top:7px!important;
}

.wao-chat-list-status{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  width:max-content!important;
  max-width:100%!important;
  padding:4px 9px!important;
  border-radius:999px!important;
  font-size:11px!important;
  font-weight:1000!important;
  line-height:1!important;
  border:1px solid transparent!important;
  white-space:nowrap!important;
}

.wao-chat-list-status-dot{
  width:7px!important;
  height:7px!important;
  border-radius:999px!important;
  display:inline-block!important;
  flex:0 0 7px!important;
}

.wao-chat-list-status.online{
  background:#ecfdf5!important;
  color:#047857!important;
  border-color:#86efac!important;
}

.wao-chat-list-status.online .wao-chat-list-status-dot{
  background:#22c55e!important;
  box-shadow:0 0 0 3px rgba(34,197,94,.16)!important;
}

.wao-chat-list-status.offline{
  background:#f8fafc!important;
  color:#64748b!important;
  border-color:#e2e8f0!important;
}

.wao-chat-list-status.offline .wao-chat-list-status-dot{
  background:#94a3b8!important;
}

.wao-chat-list-status.group{
  background:#eff6ff!important;
  color:#0d47ff!important;
  border-color:#bfdbfe!important;
}

.wao-chat-list-status.group .wao-chat-list-status-dot{
  background:#0d47ff!important;
  box-shadow:0 0 0 3px rgba(13,71,255,.12)!important;
}


/* =========================================================
   WAOLINK ADVANCED CHAT SEARCH
   Search inside one conversation by date, text, sender name or file name.
   ========================================================= */
.wao-chat-search-panel{
  margin:10px 14px 0!important;
  padding:12px!important;
  border:1px solid #bfdbfe!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#f8fbff,#eef8ff)!important;
  box-shadow:0 12px 28px rgba(13,71,255,.09)!important;
  z-index:20!important;
}

.wao-chat-search-top{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
}

.wao-chat-search-top input,
#searchInput{
  flex:1!important;
  min-height:44px!important;
  border:1px solid #bfdbfe!important;
  border-radius:999px!important;
  padding:0 16px!important;
  background:#fff!important;
  color:#061a40!important;
  font-weight:800!important;
  outline:none!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important;
}

.wao-chat-search-top input:focus,
#searchInput:focus{
  border-color:#0D47FF!important;
  box-shadow:0 0 0 4px rgba(13,71,255,.12)!important;
}

#closeSearch{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  border:0!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#0D47FF!important;
  font-size:24px!important;
  font-weight:1000!important;
  cursor:pointer!important;
  box-shadow:0 6px 16px rgba(13,71,255,.12)!important;
}

.wao-chat-search-help{
  margin:9px 5px 0!important;
  color:#64748b!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.45!important;
}

.wao-chat-search-help b{
  color:#0D47FF!important;
}

.search-results{
  display:grid!important;
  gap:8px!important;
  margin-top:10px!important;
  max-height:330px!important;
  overflow:auto!important;
  padding-right:3px!important;
}

.wao-search-summary{
  padding:7px 10px!important;
  border-radius:999px!important;
  width:max-content!important;
  max-width:100%!important;
  background:#0D47FF!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:1000!important;
}

.wao-search-loading{
  padding:12px!important;
  text-align:center!important;
  color:#0D47FF!important;
  font-weight:1000!important;
}

.search-result-item,
.wao-search-result-item{
  width:100%!important;
  border:1px solid #dbeafe!important;
  border-radius:16px!important;
  background:#fff!important;
  padding:11px 12px!important;
  text-align:left!important;
  cursor:pointer!important;
  display:grid!important;
  gap:6px!important;
  box-shadow:0 6px 16px rgba(15,23,42,.05)!important;
}

.search-result-item:hover,
.wao-search-result-item:hover{
  border-color:#0D47FF!important;
  transform:translateY(-1px)!important;
  box-shadow:0 10px 24px rgba(13,71,255,.10)!important;
}

.wao-search-result-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
}

.wao-search-result-head strong{
  color:#061a40!important;
  font-size:14px!important;
}

.wao-search-result-head small{
  color:#64748b!important;
  font-size:11px!important;
  font-weight:900!important;
  white-space:nowrap!important;
}

.wao-search-result-item span{
  color:#334155!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1.35!important;
  overflow-wrap:anywhere!important;
}

.wao-search-result-meta{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  flex-wrap:wrap!important;
}

.wao-search-result-meta b{
  padding:4px 8px!important;
  border-radius:999px!important;
  background:#eff6ff!important;
  color:#0D47FF!important;
  font-size:11px!important;
  font-weight:1000!important;
  text-transform:capitalize!important;
}

.wao-search-result-meta small,
.wao-search-result-meta em{
  color:#64748b!important;
  font-size:11px!important;
  font-weight:800!important;
  font-style:normal!important;
}

.search-highlight{
  outline:4px solid rgba(13,71,255,.30)!important;
  border-radius:18px!important;
  animation:waoSearchPulse 1.1s ease-in-out 2!important;
}

@keyframes waoSearchPulse{
  0%,100%{box-shadow:0 0 0 rgba(13,71,255,0)}
  50%{box-shadow:0 0 0 10px rgba(13,71,255,.15)}
}

@media(max-width:760px){
  .wao-chat-search-panel{
    margin:8px 10px 0!important;
    border-radius:16px!important;
  }

  .wao-chat-search-help{
    font-size:11px!important;
  }

  .search-results{
    max-height:280px!important;
  }
}


/* =========================================================
   WAOLINK STARRED / FAVOURITE MESSAGES
   ========================================================= */
.wao-message-star-marker{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:22px!important;
  height:22px!important;
  border-radius:999px!important;
  margin-top:6px!important;
  background:#fef3c7!important;
  color:#b45309!important;
  font-size:13px!important;
  font-weight:1000!important;
  box-shadow:0 4px 10px rgba(245,158,11,.18)!important;
}

.wao-message-starred .bubble{
  box-shadow:0 8px 24px rgba(245,158,11,.10)!important;
}

.wao-star-action{
  background:#fffbeb!important;
  color:#b45309!important;
  border-color:#fde68a!important;
}

.wao-starred-page{
  width:min(980px,100%)!important;
  margin:0 auto!important;
}

.wao-starred-hero{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:18px!important;
  margin-bottom:18px!important;
  padding:24px!important;
  border-radius:26px!important;
  background:linear-gradient(135deg,#fff7ed,#eff6ff)!important;
  border:1px solid #fde68a!important;
  box-shadow:0 18px 50px rgba(15,23,42,.08)!important;
}

.wao-starred-hero h1{
  margin:8px 0 6px!important;
  color:#061a40!important;
  font-size:32px!important;
}

.wao-starred-hero p{
  margin:0!important;
  color:#64748b!important;
  font-weight:800!important;
}

.wao-starred-count{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  width:max-content!important;
  max-width:100%!important;
  padding:10px 13px!important;
  margin:0 0 14px!important;
  border-radius:999px!important;
  background:#fffbeb!important;
  border:1px solid #fde68a!important;
  color:#92400e!important;
  font-weight:1000!important;
}

.wao-starred-count span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:28px!important;
  height:28px!important;
  border-radius:999px!important;
  background:#f59e0b!important;
  color:#fff!important;
}

.wao-starred-list{
  display:grid!important;
  gap:12px!important;
}

.wao-starred-card{
  display:flex!important;
  gap:13px!important;
  padding:14px!important;
  border-radius:20px!important;
  border:1px solid #e5edf7!important;
  background:#fff!important;
  text-decoration:none!important;
  color:inherit!important;
  box-shadow:0 8px 22px rgba(15,23,42,.05)!important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease!important;
}

.wao-starred-card:hover{
  transform:translateY(-2px)!important;
  border-color:#f59e0b!important;
  box-shadow:0 16px 38px rgba(245,158,11,.14)!important;
}

.wao-starred-icon{
  width:42px!important;
  height:42px!important;
  border-radius:16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#fffbeb!important;
  color:#b45309!important;
  font-size:22px!important;
  font-weight:1000!important;
  flex:0 0 42px!important;
}

.wao-starred-main{
  min-width:0!important;
  flex:1!important;
}

.wao-starred-top{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:12px!important;
}

.wao-starred-top strong{
  color:#061a40!important;
  font-size:15px!important;
}

.wao-starred-top small{
  color:#64748b!important;
  font-size:12px!important;
  font-weight:900!important;
  white-space:nowrap!important;
}

.wao-starred-card p{
  margin:7px 0 10px!important;
  color:#334155!important;
  font-weight:850!important;
  line-height:1.45!important;
  overflow-wrap:anywhere!important;
}

.wao-starred-meta{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
}

.wao-starred-meta span{
  padding:5px 9px!important;
  border-radius:999px!important;
  background:#f8fafc!important;
  color:#64748b!important;
  border:1px solid #e2e8f0!important;
  font-size:11px!important;
  font-weight:900!important;
}

.wao-starred-empty{
  border-radius:20px!important;
  background:#fffbeb!important;
  border:1px solid #fde68a!important;
}

@media(max-width:760px){
  .wao-starred-hero{
    flex-direction:column!important;
    align-items:flex-start!important;
    padding:18px!important;
  }

  .wao-starred-hero h1{
    font-size:26px!important;
  }

  .wao-starred-card{
    align-items:flex-start!important;
  }

  .wao-starred-top{
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:3px!important;
  }
}

/* WAOLINK conversation starred button + modal */
.chat-info-button.wao-header-action.starred-link{background:linear-gradient(135deg,#fffbeb,#fef3c7)!important;color:#b45309!important;border:1px solid #fde68a!important;box-shadow:0 10px 22px rgba(245,158,11,.14)!important}
.chat-info-button.wao-header-action.starred-link .wao-header-action-icon{background:#fff!important;color:#d97706!important;box-shadow:0 4px 10px rgba(245,158,11,.18)!important;font-size:15px!important}
.chat-info-button.wao-header-action.starred-link:hover{background:linear-gradient(135deg,#fef3c7,#fde68a)!important}
.wao-header-count{min-width:20px!important;height:20px!important;border-radius:999px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0 6px!important;background:#f59e0b!important;color:#fff!important;font-size:11px!important;font-weight:1000!important;margin-left:-3px!important}
.wao-conversation-starred-modal{display:none;position:fixed;inset:0;z-index:10145}
.wao-conversation-starred-modal.open{display:block}
.wao-conversation-starred-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.46);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.wao-conversation-starred-card{position:relative;z-index:2;width:min(620px,calc(100vw - 28px));max-height:86vh;overflow:auto;margin:7vh auto 0;border-radius:24px;background:#fff;border:1px solid #fde68a;box-shadow:0 24px 80px rgba(15,23,42,.25);padding:22px}
.wao-conversation-starred-close{position:absolute;top:13px;right:13px;width:38px;height:38px;border:0;border-radius:999px;background:#fffbeb;color:#b45309;font-size:24px;line-height:1;font-weight:900;cursor:pointer}
.wao-conversation-starred-head{padding:12px 46px 16px 0;border-bottom:1px solid #fde68a}
.wao-conversation-starred-head h2{margin:8px 0;color:#061a40;font-size:26px}
.wao-conversation-starred-head p{margin:0;color:#64748b;font-weight:800}
.wao-conversation-starred-body{display:grid;gap:12px;margin-top:15px}
.wao-conversation-starred-count{display:flex;align-items:center;gap:10px;width:max-content;max-width:100%;padding:9px 12px;border-radius:999px;background:#fffbeb;border:1px solid #fde68a;color:#92400e;font-weight:1000}
.wao-conversation-starred-count span{min-width:26px;height:26px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#f59e0b;color:#fff}
.wao-conversation-starred-list{display:grid;gap:10px}
.wao-conversation-starred-item{width:100%;display:flex;gap:12px;align-items:flex-start;border:1px solid #e5edf7;border-radius:18px;background:#fff;padding:12px;text-align:left;cursor:pointer;box-shadow:0 7px 20px rgba(15,23,42,.05)}
.wao-conversation-starred-item:hover{border-color:#f59e0b;box-shadow:0 14px 32px rgba(245,158,11,.13);transform:translateY(-1px)}
.wao-conversation-starred-icon{width:38px;height:38px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:#fffbeb;color:#b45309;font-size:20px;font-weight:1000;flex:0 0 38px}
.wao-conversation-starred-main{min-width:0;flex:1}
.wao-conversation-starred-top{display:flex;justify-content:space-between;gap:12px;align-items:center}
.wao-conversation-starred-top strong{color:#061a40;font-size:14px}
.wao-conversation-starred-top small{color:#64748b;font-size:11px;font-weight:900;white-space:nowrap}
.wao-conversation-starred-item p{margin:7px 0 9px;color:#334155;font-weight:850;line-height:1.42;overflow-wrap:anywhere}
.wao-conversation-starred-meta{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.wao-conversation-starred-meta span,.wao-conversation-starred-meta small,.wao-conversation-starred-meta em{padding:4px 8px;border-radius:999px;background:#f8fafc;color:#64748b;border:1px solid #e2e8f0;font-size:11px;font-weight:900;font-style:normal}
.wao-conversation-starred-foot{margin-top:14px;display:flex;justify-content:flex-end}
@media(max-width:760px){.wao-header-count{position:absolute!important;margin-left:0!important;top:-5px!important;right:-5px!important}.wao-conversation-starred-card{width:100vw;height:100vh;max-height:100vh;margin:0;border-radius:0}.wao-conversation-starred-top{flex-direction:column;align-items:flex-start;gap:2px}}


/* =========================================================
   WAOLINK ARCHIVE CHATS
   Hide chats from main list without deleting them.
   ========================================================= */
.chat-info-button.wao-header-action.archive-link{
  background:linear-gradient(135deg,#f8fafc 0%, #e2e8f0 100%)!important;
  color:#475569!important;
  border:1px solid #cbd5e1!important;
  box-shadow:0 10px 22px rgba(71,85,105,.12)!important;
}

.chat-info-button.wao-header-action.archive-link .wao-header-action-icon{
  background:#fff!important;
  color:#475569!important;
  box-shadow:0 4px 10px rgba(71,85,105,.16)!important;
  font-size:14px!important;
}

.chat-info-button.wao-header-action.archive-link:hover{
  background:linear-gradient(135deg,#e2e8f0 0%, #cbd5e1 100%)!important;
}

.chat-info-button.wao-header-action.archive-link.archived{
  background:linear-gradient(135deg,#ecfdf5 0%, #d1fae5 100%)!important;
  color:#047857!important;
  border-color:#86efac!important;
}

.chat-info-button.wao-header-action.archive-link.archived .wao-header-action-icon{
  color:#059669!important;
}

.chat-info-button.wao-header-action.archive-link:disabled{
  opacity:.65!important;
  cursor:wait!important;
}

.wao-archived-page{
  width:min(980px,100%)!important;
  margin:0 auto!important;
}

.wao-archived-hero{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:18px!important;
  margin-bottom:18px!important;
  padding:24px!important;
  border-radius:26px!important;
  background:linear-gradient(135deg,#f8fafc,#eff6ff)!important;
  border:1px solid #dbeafe!important;
  box-shadow:0 18px 50px rgba(15,23,42,.08)!important;
}

.wao-archived-hero h1{
  margin:8px 0 6px!important;
  color:#061a40!important;
  font-size:32px!important;
}

.wao-archived-hero p{
  margin:0!important;
  color:#64748b!important;
  font-weight:800!important;
}

.archived-panel{
  padding:16px!important;
  border-radius:24px!important;
}

.archived-panel .conversation-list{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))!important;
  gap:12px!important;
}

@media(max-width:760px){
  .wao-archived-hero{
    flex-direction:column!important;
    align-items:flex-start!important;
    padding:18px!important;
  }

  .wao-archived-hero h1{
    font-size:26px!important;
  }
}


/* =========================================================
   WAOLINK ARCHIVE CONFIRM MODAL
   Replaces default browser "localhost says" popup.
   ========================================================= */
.wao-archive-confirm-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:10200;
}

.wao-archive-confirm-modal.open{
  display:block;
}

.wao-archive-confirm-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.46);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.wao-archive-confirm-card{
  position:relative;
  z-index:2;
  width:min(430px, calc(100vw - 30px));
  margin:15vh auto 0;
  padding:24px;
  border-radius:26px;
  background:#fff;
  border:1px solid #dbeafe;
  box-shadow:0 26px 90px rgba(15,23,42,.26);
  text-align:center;
}

.wao-archive-confirm-icon{
  width:58px;
  height:58px;
  margin:0 auto 12px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#eff6ff,#e2e8f0);
  color:#475569;
  font-size:28px;
  box-shadow:0 12px 26px rgba(71,85,105,.14);
}

.wao-archive-confirm-card h3{
  margin:0 0 8px;
  color:#061a40;
  font-size:23px;
}

.wao-archive-confirm-card p{
  margin:0;
  color:#475569;
  font-weight:800;
  line-height:1.45;
}

.wao-archive-confirm-actions{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:20px;
}

.wao-archive-confirm-actions button{
  min-height:42px;
  border:0;
  border-radius:999px;
  padding:0 18px;
  font-weight:1000;
  cursor:pointer;
}

.wao-archive-cancel{
  background:#f8fafc;
  color:#475569;
  border:1px solid #e2e8f0!important;
}

.wao-archive-ok{
  background:linear-gradient(135deg,#0D47FF,#05C7D9);
  color:#fff;
  box-shadow:0 12px 24px rgba(13,71,255,.18);
}

.wao-archive-confirm-actions button:hover{
  transform:translateY(-1px);
}


/* =========================================================
   WAOLINK TOP NAV THREE DOT MENU
   Keeps Chats visible and puts Contacts/Groups/Privacy/Notifications/etc. into 3 dots.
   ========================================================= */
.wao-top-nav{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  position:relative!important;
}

.wao-top-nav-main{
  display:inline-flex!important;
  align-items:center!important;
  height:38px!important;
  padding:0 12px!important;
  border-radius:999px!important;
  background:#eff6ff!important;
  color:#061a40!important;
  font-weight:1000!important;
  text-decoration:none!important;
}

.wao-top-nav-main:hover{
  background:#dbeafe!important;
}

.wao-top-menu-wrap{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
}

.wao-top-menu-button{
  width:40px!important;
  height:40px!important;
  border:1px solid #dbeafe!important;
  border-radius:999px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  background:#eff6ff!important;
  cursor:pointer!important;
  box-shadow:0 8px 18px rgba(13,71,255,.10)!important;
}

.wao-top-menu-button span{
  width:4px!important;
  height:4px!important;
  border-radius:999px!important;
  background:#0D47FF!important;
  display:block!important;
}

.wao-top-menu-button:hover,
.wao-top-menu-button.open{
  background:#dbeafe!important;
  transform:translateY(-1px)!important;
}

.wao-top-menu-dropdown{
  position:absolute!important;
  top:48px!important;
  right:0!important;
  width:250px!important;
  border-radius:20px!important;
  border:1px solid #dbeafe!important;
  background:#fff!important;
  box-shadow:0 24px 70px rgba(15,23,42,.22)!important;
  padding:8px!important;
  z-index:11000!important;
}

.wao-top-menu-dropdown[hidden]{
  display:none!important;
}

.wao-top-menu-dropdown::before{
  content:""!important;
  position:absolute!important;
  top:-8px!important;
  right:14px!important;
  width:16px!important;
  height:16px!important;
  background:#fff!important;
  border-left:1px solid #dbeafe!important;
  border-top:1px solid #dbeafe!important;
  transform:rotate(45deg)!important;
}

.wao-top-menu-item{
  width:100%!important;
  min-height:44px!important;
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
  padding:9px 10px!important;
  border-radius:14px!important;
  text-decoration:none!important;
  color:#061a40!important;
  font-weight:1000!important;
}

.wao-top-menu-item:hover{
  background:#f8fbff!important;
  transform:translateX(2px)!important;
}

.wao-top-menu-item span{
  width:32px!important;
  height:32px!important;
  border-radius:12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#eff6ff!important;
  color:#0D47FF!important;
  font-size:15px!important;
  flex:0 0 32px!important;
}

.wao-top-menu-item strong{
  font-size:14px!important;
  font-weight:1000!important;
}

.wao-top-menu-item.danger{
  color:#dc2626!important;
}

.wao-top-menu-item.danger span{
  background:#fef2f2!important;
  color:#dc2626!important;
}

@media(max-width:760px){
  .wao-top-menu-dropdown{
    right:-8px!important;
    width:min(260px, calc(100vw - 22px))!important;
  }
}


/* =========================================================
   WAOLINK PREFERRED LANGUAGE
   Foundation for future voice-note translation.
   ========================================================= */
.wao-language-card{
  width:min(760px,100%)!important;
  margin:0 auto!important;
  border-radius:26px!important;
  overflow:hidden!important;
}

.wao-language-head{
  display:flex!important;
  justify-content:space-between!important;
  align-items:flex-start!important;
  gap:18px!important;
  padding:22px!important;
  border-radius:22px!important;
  background:linear-gradient(135deg,#eff6ff,#eef8ff)!important;
  border:1px solid #dbeafe!important;
  margin-bottom:18px!important;
}

.wao-language-head h1{
  margin:8px 0 6px!important;
  color:#061a40!important;
  font-size:30px!important;
}

.wao-language-head p{
  margin:0!important;
  color:#64748b!important;
  font-weight:800!important;
}

.wao-language-form{
  display:grid!important;
  gap:16px!important;
}

.wao-language-form label{
  display:grid!important;
  gap:8px!important;
  font-weight:1000!important;
  color:#061a40!important;
}

.wao-language-form select{
  min-height:48px!important;
  border-radius:16px!important;
  border:1px solid #bfdbfe!important;
  background:#fff!important;
  padding:0 14px!important;
  font:inherit!important;
  font-weight:900!important;
  color:#061a40!important;
}

.wao-language-preview{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:12px!important;
  padding:13px 14px!important;
  border-radius:16px!important;
  background:#f8fbff!important;
  border:1px solid #e5edf7!important;
}

.wao-language-preview strong{
  color:#061a40!important;
}

.wao-language-preview span{
  padding:6px 11px!important;
  border-radius:999px!important;
  background:#0D47FF!important;
  color:#fff!important;
  font-weight:1000!important;
}

.wao-language-note{
  margin-top:18px!important;
  padding:15px!important;
  border-radius:18px!important;
  background:#fffbeb!important;
  border:1px solid #fde68a!important;
}

.wao-language-note strong{
  color:#92400e!important;
}

.wao-language-note p{
  margin:6px 0 0!important;
  color:#78350f!important;
  font-weight:800!important;
}

.language-meta-box small{
  color:#0D47FF!important;
  font-weight:900!important;
}

@media(max-width:760px){
  .wao-language-head{
    flex-direction:column!important;
  }

  .wao-language-preview{
    flex-direction:column!important;
    align-items:flex-start!important;
  }
}


/* =========================================================
   WAOLINK VOICE NOTE TRANSLATION UI
   Foundation UI for speech-to-text, translation and translated playback.
   ========================================================= */
.wao-voice-translation-panel{
  margin-top:10px!important;
  padding:12px!important;
  border-radius:17px!important;
  border:1px solid #bfdbfe!important;
  background:linear-gradient(135deg,#f8fbff,#eef8ff)!important;
  display:grid!important;
  gap:10px!important;
  max-width:360px!important;
}

.wao-voice-translation-head{
  display:flex!important;
  gap:10px!important;
  align-items:center!important;
}

.wao-voice-translation-head > span{
  width:34px!important;
  height:34px!important;
  border-radius:13px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#fff!important;
  color:#0D47FF!important;
  box-shadow:0 6px 14px rgba(13,71,255,.12)!important;
  flex:0 0 34px!important;
}

.wao-voice-translation-head strong{
  display:block!important;
  color:#061a40!important;
  font-size:13px!important;
  font-weight:1000!important;
}

.wao-voice-translation-head small{
  display:block!important;
  color:#64748b!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:1.3!important;
}

.wao-voice-translation-meta{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:6px!important;
}

.wao-voice-translation-meta span{
  padding:5px 8px!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#0D47FF!important;
  border:1px solid #dbeafe!important;
  font-size:11px!important;
  font-weight:1000!important;
}

.wao-voice-translation-note{
  margin:0!important;
  color:#475569!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.4!important;
}

.wao-voice-translation-actions{
  display:flex!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}

.wao-voice-translation-actions button{
  border:0!important;
  border-radius:999px!important;
  min-height:36px!important;
  padding:0 13px!important;
  background:linear-gradient(135deg,#0D47FF,#05C7D9)!important;
  color:#fff!important;
  font-weight:1000!important;
  cursor:pointer!important;
  box-shadow:0 10px 20px rgba(13,71,255,.16)!important;
}

.wao-voice-translation-actions button:disabled{
  opacity:.65!important;
  cursor:wait!important;
}

.wao-voice-translation-details{
  border-radius:13px!important;
  background:#fff!important;
  border:1px solid #e5edf7!important;
  padding:8px 10px!important;
}

.wao-voice-translation-details summary{
  cursor:pointer!important;
  color:#0D47FF!important;
  font-weight:1000!important;
  font-size:12px!important;
}

.wao-voice-translation-details p,
.wao-voice-translated-text p{
  margin:7px 0 0!important;
  color:#334155!important;
  font-size:12px!important;
  line-height:1.45!important;
  font-weight:800!important;
}

.wao-voice-translated-text{
  padding:10px!important;
  border-radius:13px!important;
  background:#fff!important;
  border:1px solid #e5edf7!important;
}

.wao-voice-translated-text strong{
  color:#061a40!important;
  font-size:12px!important;
  font-weight:1000!important;
}

.mine .wao-voice-translation-panel{
  background:linear-gradient(135deg,#eff6ff,#e0f2fe)!important;
  border-color:rgba(255,255,255,.55)!important;
}

@media(max-width:760px){
  .wao-voice-translation-panel{
    max-width:100%!important;
  }
}


/* WAOLINK profile picture upload */
.wao-profile-photo-edit{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  padding:14px!important;
  border:1px solid #dbeafe!important;
  background:#f8fbff!important;
  border-radius:18px!important;
  margin-bottom:14px!important;
}

.wao-profile-photo-edit .avatar{
  width:76px!important;
  height:76px!important;
  border-radius:999px!important;
  object-fit:cover!important;
  flex:0 0 76px!important;
  border:4px solid #fff!important;
  box-shadow:0 10px 24px rgba(15,23,42,.10)!important;
}

.wao-profile-photo-edit label{
  flex:1!important;
  display:grid!important;
  gap:7px!important;
}

.wao-profile-photo-edit label span{
  font-weight:1000!important;
  color:#061a40!important;
}

.wao-profile-photo-edit input[type=file]{
  min-height:44px!important;
  border:1px solid #bfdbfe!important;
  border-radius:14px!important;
  padding:9px!important;
  background:#fff!important;
}

.wao-profile-photo-edit small{
  color:#64748b!important;
  font-weight:800!important;
}

@media(max-width:760px){
  .wao-profile-photo-edit{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
}


/* =========================================================
   WAOLINK LIVE MOBILE LAYOUT FIX
   WhatsApp-style mobile chat: clean list, full-screen chat,
   sticky header and bottom composer.
   ========================================================= */
@media(max-width:820px){
  html,
  body{
    width:100%!important;
    min-height:100%!important;
    overflow-x:hidden!important;
    background:#eef4fb!important;
  }

  body{
    font-size:14px!important;
  }

  .topbar{
    position:sticky!important;
    top:0!important;
    z-index:5000!important;
    height:62px!important;
    min-height:62px!important;
    padding:8px 12px!important;
    background:#fff!important;
    border-bottom:1px solid #dbeafe!important;
  }

  .topbar .brand,
  .brand{
    min-width:0!important;
  }

  .topbar .brand-logo-img,
  .brand-logo-img{
    width:34px!important;
    height:34px!important;
  }

  .topbar .brand-word strong,
  .brand-word strong{
    font-size:22px!important;
  }

  .topbar .brand-word small,
  .brand-word small{
    font-size:12px!important;
  }

  main,
  .main,
  .page,
  .content{
    width:100%!important;
    max-width:100%!important;
    padding:0!important;
    margin:0!important;
  }

  .card,
  .panel{
    border-radius:0!important;
  }

  /* Chat shell */
  .chat-layout,
  .chatwrap,
  .chat-wrap,
  .wao-chat-shell{
    width:100%!important;
    max-width:100%!important;
    height:calc(100dvh - 62px)!important;
    min-height:calc(100dvh - 62px)!important;
    margin:0!important;
    border-radius:0!important;
    display:block!important;
    overflow:hidden!important;
    border:0!important;
    box-shadow:none!important;
  }

  /* Chat list / conversation sidebar on mobile */
  .conversations,
  .conversation-list-panel,
  .conversation-sidebar,
  .chat-sidebar,
  .sidebar,
  .wao-chat-sidebar-real{
    width:100%!important;
    max-width:100%!important;
    height:calc(100dvh - 62px)!important;
    overflow-y:auto!important;
    border:0!important;
    border-radius:0!important;
    padding:14px!important;
    background:#f8fbff!important;
  }

  .conversations h2,
  .conversation-list-panel h2,
  .chat-sidebar h2,
  .sidebar h2{
    font-size:22px!important;
    margin:6px 0 14px!important;
  }

  .conversation-card,
  .conversation-item{
    width:100%!important;
    min-height:82px!important;
    border-radius:20px!important;
    padding:12px!important;
    margin-bottom:10px!important;
    background:#fff!important;
    box-shadow:0 8px 24px rgba(15,23,42,.06)!important;
  }

  .conversation-card .avatar,
  .conversation-list .avatar,
  .conversation-avatar-wrap .avatar{
    width:52px!important;
    height:52px!important;
    min-width:52px!important;
  }

  .conversation-title-row strong{
    font-size:15px!important;
  }

  .conversation-preview,
  .conversation-subtitle{
    font-size:12px!important;
  }

  /* When a conversation is open, hide list and show only chat */
  body.wao-mobile-chat-open .conversations,
  body.wao-mobile-chat-open .conversation-list-panel,
  body.wao-mobile-chat-open .conversation-sidebar,
  body.wao-mobile-chat-open .chat-sidebar,
  body.wao-mobile-chat-open .sidebar,
  body.wao-mobile-chat-open .wao-chat-sidebar-real,
  .wao-mobile-hidden-sidebar{
    display:none!important;
  }

  body.wao-mobile-chat-open .chat-main,
  body.wao-mobile-chat-open .conversation,
  body.wao-mobile-chat-open .chatpanel,
  body.wao-mobile-chat-open .chat-panel,
  body.wao-mobile-chat-open .wao-chat-panel-real,
  .wao-mobile-visible-panel{
    display:flex!important;
    flex-direction:column!important;
    position:fixed!important;
    inset:62px 0 0 0!important;
    width:100vw!important;
    height:calc(100dvh - 62px)!important;
    max-width:100vw!important;
    border-radius:0!important;
    border:0!important;
    background:#eaf4ff!important;
    z-index:2500!important;
    overflow:hidden!important;
  }

  /* Chat header */
  body.wao-mobile-chat-open .chathead,
  body.wao-mobile-chat-open .chat-head,
  body.wao-mobile-chat-open .chat-header{
    position:sticky!important;
    top:0!important;
    z-index:2600!important;
    min-height:64px!important;
    height:auto!important;
    padding:8px 10px!important;
    gap:9px!important;
    background:rgba(255,255,255,.96)!important;
    border-bottom:1px solid #dbeafe!important;
    backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px)!important;
  }

  .wao-mobile-back-chat-list{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    height:38px!important;
    min-width:76px!important;
    padding:0 10px!important;
    border-radius:999px!important;
    background:#eff6ff!important;
    color:#0D47FF!important;
    font-weight:1000!important;
    text-decoration:none!important;
    border:1px solid #dbeafe!important;
    flex:0 0 auto!important;
  }

  body.wao-mobile-chat-open .chathead .avatar,
  body.wao-mobile-chat-open .chat-header .avatar{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
  }

  body.wao-mobile-chat-open .chat-title,
  body.wao-mobile-chat-open .chat-title strong,
  body.wao-mobile-chat-open .chathead strong{
    font-size:15px!important;
    line-height:1.1!important;
  }

  body.wao-mobile-chat-open .chat-title small,
  body.wao-mobile-chat-open .chat-meta{
    font-size:11px!important;
  }

  body.wao-mobile-chat-open .chat-title-actions{
    margin-left:auto!important;
    flex:0 0 auto!important;
  }

  /* Messages area */
  body.wao-mobile-chat-open .messages{
    flex:1 1 auto!important;
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
    overflow-y:auto!important;
    padding:14px 10px 96px!important;
    background:#eaf4ff!important;
    scroll-behavior:smooth!important;
  }

  body.wao-mobile-chat-open .row{
    margin:8px 0!important;
    width:100%!important;
  }

  body.wao-mobile-chat-open .message-wrap{
    max-width:86%!important;
  }

  body.wao-mobile-chat-open .row.mine .message-wrap{
    margin-left:auto!important;
  }

  body.wao-mobile-chat-open .bubble{
    max-width:100%!important;
    border-radius:18px!important;
    padding:10px 11px!important;
    font-size:13px!important;
    line-height:1.35!important;
    overflow-wrap:anywhere!important;
  }

  body.wao-mobile-chat-open .message-footer{
    font-size:10px!important;
    gap:5px!important;
  }

  body.wao-mobile-chat-open .chat-image{
    max-width:100%!important;
    border-radius:14px!important;
  }

  body.wao-mobile-chat-open .voice-note{
    max-width:100%!important;
  }

  body.wao-mobile-chat-open .voice-note audio{
    width:210px!important;
    max-width:100%!important;
  }

  body.wao-mobile-chat-open .wao-voice-translation-panel{
    max-width:100%!important;
    padding:10px!important;
    border-radius:15px!important;
  }

  /* Bottom composer */
  body.wao-mobile-chat-open .compose{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:2700!important;
    min-height:74px!important;
    padding:9px 10px calc(9px + env(safe-area-inset-bottom))!important;
    background:rgba(255,255,255,.98)!important;
    border-top:1px solid #dbeafe!important;
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    box-shadow:0 -10px 30px rgba(15,23,42,.08)!important;
  }

  body.wao-mobile-chat-open form#sendForm,
  body.wao-mobile-chat-open .compose form{
    flex:1!important;
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    width:100%!important;
  }

  body.wao-mobile-chat-open .compose-tool,
  body.wao-mobile-chat-open .attach-btn,
  body.wao-mobile-chat-open .voice-btn{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    border-radius:999px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  body.wao-mobile-chat-open #sendForm input,
  body.wao-mobile-chat-open #sendForm textarea,
  body.wao-mobile-chat-open .compose input[name="body"],
  body.wao-mobile-chat-open .compose textarea[name="body"]{
    flex:1!important;
    min-width:0!important;
    min-height:44px!important;
    height:44px!important;
    border-radius:999px!important;
    font-size:14px!important;
    padding:0 14px!important;
  }

  body.wao-mobile-chat-open #sendForm button[type="submit"],
  body.wao-mobile-chat-open .compose button[type="submit"]{
    width:56px!important;
    min-width:56px!important;
    height:44px!important;
    border-radius:14px!important;
    padding:0!important;
    font-size:13px!important;
  }

  /* Message action buttons */
  body.wao-mobile-chat-open .message-actions.wao-mobile-inline-actions{
    max-width:100%!important;
    overflow-x:auto!important;
    padding:6px 2px!important;
    gap:5px!important;
  }

  body.wao-mobile-chat-open .message-actions.wao-mobile-inline-actions button,
  body.wao-mobile-chat-open .message-actions.wao-mobile-inline-actions a{
    white-space:nowrap!important;
    font-size:11px!important;
    min-height:30px!important;
    padding:0 8px!important;
  }

  /* Modals fit mobile screen */
  .wao-forward-modal-card,
  .wao-conversation-starred-card,
  .wao-message-info-card,
  .wao-archive-confirm-card{
    width:calc(100vw - 20px)!important;
    max-width:calc(100vw - 20px)!important;
    max-height:88dvh!important;
    margin:7dvh auto 0!important;
    border-radius:22px!important;
  }

  .wao-forward-list{
    max-height:55dvh!important;
    overflow-y:auto!important;
  }

  /* Profile/language/auth pages */
  .auth,
  .privacy-page,
  .wao-language-card,
  .brand-profile-card,
  .fixed-profile-card{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:14px!important;
  }

  .auth-card,
  .privacy-card,
  .brand-profile-card,
  .fixed-profile-card{
    width:100%!important;
    max-width:100%!important;
    border-radius:22px!important;
  }

  .profile-clean-body,
  .privacy-head,
  .wao-language-head{
    flex-direction:column!important;
    align-items:flex-start!important;
  }

  .profile-info-grid{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:430px){
  body.wao-mobile-chat-open .message-wrap{
    max-width:90%!important;
  }

  body.wao-mobile-chat-open .voice-note audio{
    width:185px!important;
  }

  body.wao-mobile-chat-open .chat-info-button,
  body.wao-mobile-chat-open .wao-chat-menu-button{
    width:38px!important;
    height:38px!important;
  }

  .wao-top-menu-dropdown,
  .wao-chat-menu-dropdown{
    right:0!important;
    width:min(285px, calc(100vw - 16px))!important;
  }
}


/* =========================================================
   WAOLINK WHATSAPP-LIKE MOBILE SPACING POLISH
   Goal: make mobile dashboard/chat feel cleaner, lighter,
   less crowded, and closer to the breathing space of
   WhatsApp mobile layout.
   ========================================================= */

@media (max-width: 820px){
  body{
    background:#edf2f6!important;
  }

  .page,
  .wrap,
  .container,
  main{
    padding:10px!important;
  }

  /* Compact top dashboard banner */
  .brand-dashboard-top{
    margin:0 0 12px!important;
    padding:16px!important;
    border-radius:24px!important;
    background:linear-gradient(180deg,#f8fbff,#f2f7fc)!important;
    box-shadow:0 8px 24px rgba(15,23,42,.05)!important;
  }

  .brand-dashboard-title{
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
  }

  .brand-dashboard-wordmark .brand-inline{
    font-size:29px!important;
    line-height:1!important;
    letter-spacing:-.8px!important;
  }

  .brand-dashboard-wordmark p{
    margin:6px 0 0!important;
    font-size:13px!important;
    line-height:1.35!important;
    color:#667085!important;
  }

  .brand-dashboard-user{
    max-width:100%!important;
    padding:8px 10px!important;
    gap:10px!important;
    border-radius:18px!important;
    box-shadow:none!important;
  }

  .brand-dashboard-user .avatar{
    width:42px!important;
    height:42px!important;
  }

  .brand-dashboard-user strong{
    display:block!important;
    font-size:15px!important;
    line-height:1.2!important;
  }

  .brand-dashboard-user .meta{
    font-size:12px!important;
  }

  /* Put stats in one WhatsApp-like compact row */
  .stats,
  .brand-stats{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
    margin:0 0 12px!important;
  }

  .stat,
  .brand-stat{
    min-height:auto!important;
    padding:14px 12px!important;
    border-radius:22px!important;
    background:#fff!important;
    box-shadow:0 6px 18px rgba(15,23,42,.04)!important;
    text-align:left!important;
  }

  .stat b,
  .brand-stat b{
    font-size:30px!important;
    line-height:1!important;
    margin-bottom:6px!important;
  }

  .brand-stat span,
  .stat span{
    font-size:13px!important;
    line-height:1.2!important;
    color:#475467!important;
  }

  /* Make recent conversations the first main focus like WhatsApp */
  .brand-dashboard-grid,
  .grid2{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  .brand-conversation-card{
    order:1!important;
  }

  .profile-summary-card{
    order:2!important;
  }

  .profile-summary-card,
  .brand-conversation-card{
    padding:16px!important;
    border-radius:24px!important;
    box-shadow:0 8px 24px rgba(15,23,42,.05)!important;
  }

  .section-head{
    margin-bottom:12px!important;
    align-items:center!important;
  }

  .section-head h2{
    font-size:21px!important;
    line-height:1.2!important;
  }

  .section-chip{
    padding:6px 10px!important;
    font-size:11px!important;
  }

  /* Compact recent conversation cards */
  .conversation-list{
    gap:10px!important;
  }

  .conversation-card{
    min-height:70px!important;
    padding:12px 13px!important;
    border-radius:20px!important;
    box-shadow:none!important;
  }

  .conversation-avatar-wrap .avatar,
  .conversation-group-avatar{
    width:48px!important;
    height:48px!important;
  }

  .conversation-title-row strong{
    font-size:15px!important;
  }

  .conversation-time{
    font-size:11px!important;
    padding:3px 7px!important;
  }

  .conversation-preview-row{
    gap:5px!important;
    margin-top:4px!important;
  }

  .conversation-preview-label{
    font-size:10px!important;
    padding:4px 6px!important;
  }

  .conversation-preview{
    font-size:13px!important;
  }

  .conversation-subtitle{
    margin-top:3px!important;
    font-size:11px!important;
  }

  /* Profile summary card less crowded */
  .profile-summary-top{
    flex-direction:row!important;
    align-items:center!important;
    gap:14px!important;
  }

  .avatar-xl{
    width:78px!important;
    height:78px!important;
  }

  .profile-summary-top h2{
    margin:0 0 4px!important;
    font-size:22px!important;
    line-height:1.15!important;
  }

  .profile-summary-note{
    margin:6px 0 0!important;
    font-size:14px!important;
    line-height:1.45!important;
  }

  .profile-summary-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    margin-top:14px!important;
  }

  .profile-summary-actions .btn,
  .profile-summary-actions a.btn,
  .profile-summary-actions a.btn2{
    min-height:50px!important;
    width:100%!important;
    border-radius:18px!important;
    padding:12px 10px!important;
    font-size:15px!important;
    line-height:1.2!important;
    text-align:center!important;
  }

  .profile-summary-actions > *:first-child{
    grid-column:1 / -1!important;
  }

  /* Chat page also slightly cleaner on mobile */
  body.wao-mobile-chat-open .messages,
  .wao-chat-page-view .messages{
    padding:12px 10px 14px!important;
  }

  body.wao-mobile-chat-open .chathead,
  body.wao-mobile-chat-open .chat-head,
  body.wao-mobile-chat-open .chat-header,
  .wao-chat-page-view .conversation-header{
    padding:10px 12px!important;
    min-height:62px!important;
  }

  body.wao-mobile-chat-open .compose,
  body.wao-mobile-chat-open .composer,
  body.wao-mobile-chat-open .message-input-bar,
  .wao-chat-page-view .composer,
  .wao-chat-page-view .message-input-bar{
    padding:10px!important;
  }
}

@media (max-width: 560px){
  .brand-dashboard-title{
    flex-direction:column!important;
    align-items:flex-start!important;
  }

  .brand-dashboard-user{
    width:100%!important;
  }

  .stats,
  .brand-stats{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  .stat,
  .brand-stat{
    padding:12px 10px!important;
  }

  .stat b,
  .brand-stat b{
    font-size:26px!important;
  }

  .brand-stat span,
  .stat span{
    font-size:12px!important;
  }

  .profile-summary-actions{
    grid-template-columns:1fr!important;
  }

  .profile-summary-actions > *:first-child{
    grid-column:auto!important;
  }
}


/* WAOLINK SETTINGS MENU CLEANUP */
.profile-summary-actions-minimal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.profile-summary-settings-note{margin-top:14px;padding:14px 16px;border-radius:18px;background:#f6f9fc;border:1px solid #e2e8f0;display:grid;gap:4px;}
.profile-summary-settings-note strong{color:#102a5e;font-size:14px;}
.profile-summary-settings-note span{color:#667085;font-size:13px;line-height:1.45;}
.wao-settings-card{max-width:860px;margin:0 auto;border-radius:28px;}
.wao-settings-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px;}
.wao-settings-head h1{margin:10px 0 6px;font-size:34px;line-height:1.05;}
.wao-settings-head p{margin:0;color:#667085;}
.wao-settings-back{white-space:nowrap;}
.wao-settings-profile{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:22px;background:#f8fbff;border:1px solid #e2e8f0;margin-bottom:18px;}
.wao-settings-profile strong{display:block;font-size:20px;color:#102a5e;margin-bottom:3px;}
.wao-settings-profile small{display:block;margin-top:5px;color:#667085;}
.wao-settings-list{display:grid;gap:12px;}
.wao-settings-item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border-radius:20px;border:1px solid #e6ecf3;background:#fff;text-decoration:none;color:inherit;box-shadow:0 6px 18px rgba(15,23,42,.04);}
.wao-settings-item:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(15,23,42,.07);}
.wao-settings-item strong{display:block;font-size:16px;color:#102a5e;margin-bottom:4px;}
.wao-settings-item span{display:block;color:#667085;font-size:13px;line-height:1.4;}
.wao-settings-item em{font-style:normal;font-size:22px;color:#0D47FF;}
@media (max-width:820px){.profile-summary-actions-minimal{grid-template-columns:1fr 1fr!important;}.profile-summary-settings-note{margin-top:12px!important;padding:12px 14px!important;border-radius:16px!important;}.wao-settings-card{padding:16px!important;border-radius:24px!important;}.wao-settings-head{flex-direction:column!important;align-items:flex-start!important;margin-bottom:14px!important;}.wao-settings-head h1{font-size:28px!important;margin:8px 0 4px!important;}.wao-settings-profile{padding:14px!important;border-radius:20px!important;margin-bottom:14px!important;}.wao-settings-profile strong{font-size:18px!important;}.wao-settings-list{gap:10px!important;}.wao-settings-item{padding:14px!important;border-radius:18px!important;}}
@media (max-width:560px){.profile-summary-actions-minimal{grid-template-columns:1fr!important;}.wao-settings-item strong{font-size:15px!important;}.wao-settings-item span{font-size:12px!important;}}


/* =========================================================
   WAOLINK TOP 3-DOT CLICK FIX
   Makes top-right 3-dot menu clickable and visible on mobile/live.
   ========================================================= */
.topbar,
.topbar *,
.wao-top-nav,
.wao-top-menu-wrap,
.wao-top-menu-button,
.wao-top-menu-dropdown{
  pointer-events:auto!important;
}

.topbar{
  overflow:visible!important;
  z-index:50000!important;
}

.wao-top-nav{
  position:relative!important;
  z-index:50002!important;
  overflow:visible!important;
}

.wao-top-menu-wrap{
  position:relative!important;
  z-index:50003!important;
  overflow:visible!important;
}

.wao-top-menu-button{
  position:relative!important;
  z-index:50004!important;
  cursor:pointer!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:rgba(13,71,255,.15)!important;
}

.wao-top-menu-button::before{
  content:""!important;
  position:absolute!important;
  inset:-12px!important;
  border-radius:999px!important;
}

.wao-top-menu-dropdown{
  z-index:50005!important;
  pointer-events:auto!important;
}

.wao-top-menu-dropdown.open{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}

.wao-top-menu-dropdown[hidden]{
  display:none!important;
}

@media(max-width:820px){
  .wao-top-menu-dropdown{
    position:fixed!important;
    top:66px!important;
    right:10px!important;
    width:min(292px, calc(100vw - 20px))!important;
    max-height:calc(100dvh - 82px)!important;
    overflow-y:auto!important;
    background:#fff!important;
    border:1px solid #dbeafe!important;
    border-radius:22px!important;
    box-shadow:0 22px 70px rgba(15,23,42,.22)!important;
  }

  .wao-top-menu-item{
    min-height:50px!important;
  }
}


/* =========================================================
   WAOLINK SIMPLE MESSAGE THREE-DOT STYLE
   Replaces white circular message-menu button with a simple
   plain 3-dot look inside chat messages.
   ========================================================= */
.wao-simple-dots-trigger{
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  padding:2px 4px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#123caa!important;
  font-size:26px!important;
  font-weight:700!important;
  line-height:1!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-decoration:none!important;
}

.wao-simple-dots-trigger:hover,
.wao-simple-dots-trigger:focus{
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
  opacity:.78!important;
}

.row.mine .wao-simple-dots-trigger,
.mine .wao-simple-dots-trigger,
.message-row.mine .wao-simple-dots-trigger,
.msg-row.mine .wao-simple-dots-trigger{
  color:rgba(255,255,255,.96)!important;
}

.wao-simple-dots-trigger span,
.wao-simple-dots-trigger i,
.wao-simple-dots-trigger svg{
  background:transparent!important;
  box-shadow:none!important;
}

@media(max-width:820px){
  .wao-simple-dots-trigger{
    font-size:24px!important;
    padding:2px 3px!important;
  }
}


/* =========================================================
   WAOLINK REMOVE WHITE CIRCLE FROM MESSAGE THREE-DOTS
   Strong patch: message bubble menu becomes plain dots only.
   It does not affect the top header 3-dot menu.
   ========================================================= */

/* Common message menu button selectors */
.messages .wao-simple-dots-trigger,
.messages .message-menu-button,
.messages .msg-menu-button,
.messages .message-more-button,
.messages .msg-more-button,
.messages .more-button,
.messages .more-btn,
.messages .kebab-button,
.messages .kebab-btn,
.messages .ellipsis-button,
.messages .ellipsis-btn,
.messages .bubble > button:not(.reaction-chip):not(.reaction-picker button),
.messages .message-bubble > button:not(.reaction-chip):not(.reaction-picker button),
.messages .voice-note + button,
.messages audio + button{
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  padding:0 3px!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  outline:0!important;
  color:#ffffff!important;
  font-size:24px!important;
  font-weight:900!important;
  line-height:1!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* Remove pseudo-element circles if any previous CSS created them */
.messages .wao-simple-dots-trigger::before,
.messages .wao-simple-dots-trigger::after,
.messages .message-menu-button::before,
.messages .message-menu-button::after,
.messages .msg-menu-button::before,
.messages .msg-menu-button::after,
.messages .more-button::before,
.messages .more-button::after,
.messages .kebab-button::before,
.messages .kebab-button::after,
.messages .ellipsis-button::before,
.messages .ellipsis-button::after,
.messages .bubble > button::before,
.messages .bubble > button::after,
.messages .message-bubble > button::before,
.messages .message-bubble > button::after{
  content:none!important;
  display:none!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* Incoming white message: blue dots, still no circle */
.messages .row:not(.mine) .wao-simple-dots-trigger,
.messages .row:not(.mine) .message-menu-button,
.messages .row:not(.mine) .msg-menu-button,
.messages .row:not(.mine) .message-more-button,
.messages .row:not(.mine) .msg-more-button,
.messages .row:not(.mine) .more-button,
.messages .row:not(.mine) .more-btn,
.messages .row:not(.mine) .kebab-button,
.messages .row:not(.mine) .kebab-btn,
.messages .row:not(.mine) .ellipsis-button,
.messages .row:not(.mine) .ellipsis-btn,
.messages .row:not(.mine) .bubble > button,
.messages .row:not(.mine) .message-bubble > button{
  color:#0D47FF!important;
}

/* Outgoing blue message: white dots, no circle */
.messages .row.mine .wao-simple-dots-trigger,
.messages .mine .wao-simple-dots-trigger,
.messages .row.mine .message-menu-button,
.messages .mine .message-menu-button,
.messages .row.mine .msg-menu-button,
.messages .mine .msg-menu-button,
.messages .row.mine .more-button,
.messages .mine .more-button,
.messages .row.mine .kebab-button,
.messages .mine .kebab-button,
.messages .row.mine .ellipsis-button,
.messages .mine .ellipsis-button,
.messages .row.mine .bubble > button,
.messages .mine .bubble > button,
.messages .row.mine .message-bubble > button,
.messages .mine .message-bubble > button{
  color:#ffffff!important;
}

/* Hover/focus remains simple */
.messages .wao-simple-dots-trigger:hover,
.messages .wao-simple-dots-trigger:focus,
.messages .message-menu-button:hover,
.messages .message-menu-button:focus,
.messages .msg-menu-button:hover,
.messages .msg-menu-button:focus,
.messages .more-button:hover,
.messages .more-button:focus,
.messages .kebab-button:hover,
.messages .kebab-button:focus,
.messages .ellipsis-button:hover,
.messages .ellipsis-button:focus,
.messages .bubble > button:hover,
.messages .bubble > button:focus,
.messages .message-bubble > button:hover,
.messages .message-bubble > button:focus{
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
  transform:none!important;
  opacity:.75!important;
}

/* If the white circle is positioned absolute inside bubble, keep only dots */
.messages .bubble button[aria-label*="More"],
.messages .bubble button[aria-label*="Options"],
.messages .bubble button[title*="More"],
.messages .bubble button[title*="Options"],
.messages .message-bubble button[aria-label*="More"],
.messages .message-bubble button[aria-label*="Options"],
.messages .message-bubble button[title*="More"],
.messages .message-bubble button[title*="Options"]{
  background:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0 3px!important;
  color:inherit!important;
}

@media(max-width:820px){
  .messages .wao-simple-dots-trigger,
  .messages .message-menu-button,
  .messages .msg-menu-button,
  .messages .more-button,
  .messages .kebab-button,
  .messages .ellipsis-button,
  .messages .bubble > button,
  .messages .message-bubble > button{
    font-size:22px!important;
  }
}


/* =========================================================
   WAOLINK RESTORE MESSAGES + MOBILE LAYOUT - restoremessageslayout20260809
   Uses user's uploaded working chat.php and only corrects mobile layout.
   ========================================================= */
:root{
  --wao-topbar-h:62px;
  --wao-android-nav-gap:86px;
  --wao-compose-h:78px;
}

html,body{
  max-width:100%!important;
  overflow-x:hidden!important;
}

/* HEADER: prevent logo overlap */
.topbar{
  height:var(--wao-topbar-h)!important;
  min-height:var(--wao-topbar-h)!important;
  padding:8px 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  background:#fff!important;
  border-bottom:1px solid #dbeafe!important;
  overflow:visible!important;
  position:sticky!important;
  top:0!important;
  z-index:90000!important;
}

.topbar .brand{
  flex:1 1 auto!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  overflow:hidden!important;
}

.brand-logo-img{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  max-width:34px!important;
  border-radius:10px!important;
  object-fit:cover!important;
}

.brand-word{
  display:flex!important;
  align-items:baseline!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}

.brand-word strong{
  font-size:22px!important;
  color:#0B49BA!important;
  line-height:1!important;
}

.brand-word small{
  font-size:12px!important;
  color:#00B7C5!important;
  margin-left:2px!important;
  line-height:1!important;
}

.wao-top-nav{
  flex:0 0 auto!important;
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  overflow:visible!important;
  z-index:90001!important;
}

.wao-top-menu-wrap{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:relative!important;
  overflow:visible!important;
  z-index:90002!important;
}

#waoTopMenuButton.wao-top-menu-button{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  padding:0!important;
  border:1px solid #dbeafe!important;
  border-radius:999px!important;
  background:#eff6ff!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}

#waoTopMenuButton.wao-top-menu-button span{
  width:4px!important;
  height:4px!important;
  display:block!important;
  border-radius:50%!important;
  background:#0D47FF!important;
}

#waoTopMenuDropdown,
#waoTopMenuDropdown[hidden]{
  display:none!important;
}

#waoTopMenuDropdown.open{
  display:block!important;
  position:fixed!important;
  top:66px!important;
  right:10px!important;
  width:min(280px, calc(100vw - 20px))!important;
  max-height:calc(100svh - 82px)!important;
  overflow-y:auto!important;
  background:#fff!important;
  border:1px solid #dbeafe!important;
  border-radius:20px!important;
  box-shadow:0 18px 52px rgba(15,23,42,.24)!important;
  padding:8px!important;
  z-index:90003!important;
}

#waoTopMenuDropdown.open .wao-top-menu-item{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-height:44px!important;
  padding:10px 12px!important;
  border-radius:14px!important;
  color:#0f172a!important;
  text-decoration:none!important;
}

/* MOBILE HEADER: hide small icon to stop overlap, show clean WAOLINK text */
@media(max-width:820px){
  .brand-logo-img{
    display:none!important;
  }

  .topbar .brand{
    max-width:calc(100vw - 72px)!important;
  }

  .wao-top-nav-main{
    display:none!important;
  }
}

/* MOBILE CHAT LAYOUT */
@media(max-width:820px){
  body.wao-mobile-chat-open{
    background:#eaf4ff!important;
    overflow:hidden!important;
  }

  body.wao-mobile-chat-open .page{
    padding:0!important;
    margin:0!important;
    width:100vw!important;
    max-width:100vw!important;
    height:calc(100svh - var(--wao-topbar-h))!important;
    overflow:hidden!important;
  }

  body.wao-mobile-chat-open .chat{
    width:100vw!important;
    height:calc(100svh - var(--wao-topbar-h))!important;
    min-height:calc(100svh - var(--wao-topbar-h))!important;
    max-height:calc(100svh - var(--wao-topbar-h))!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    display:block!important;
    overflow:hidden!important;
    background:#eaf4ff!important;
  }

  body.wao-mobile-chat-open .side{
    display:none!important;
  }

  body.wao-mobile-chat-open .mainchat{
    position:fixed!important;
    left:0!important;
    right:0!important;
    top:var(--wao-topbar-h)!important;
    bottom:var(--wao-android-nav-gap)!important;
    width:100vw!important;
    height:auto!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    background:#eaf4ff!important;
    z-index:5000!important;
  }

  body.wao-mobile-chat-open .chathead{
    flex:0 0 62px!important;
    min-height:62px!important;
    height:62px!important;
    padding:8px 10px!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    overflow:hidden!important;
    background:#fff!important;
    border-bottom:1px solid #dbeafe!important;
    box-shadow:0 4px 14px rgba(15,23,42,.06)!important;
  }

  body.wao-mobile-chat-open .mobile-back-button{
    display:grid!important;
    place-items:center!important;
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    padding:0!important;
    margin:0!important;
    border-radius:50%!important;
    font-size:28px!important;
    background:#eef4ff!important;
    color:#0b49ba!important;
  }

  body.wao-mobile-chat-open .chathead .avatar{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
  }

  body.wao-mobile-chat-open .chathead strong{
    font-size:17px!important;
    line-height:1.1!important;
    max-width:145px!important;
    display:block!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }

  body.wao-mobile-chat-open .chathead .meta,
  body.wao-mobile-chat-open #presence{
    font-size:12px!important;
    white-space:nowrap!important;
  }

  body.wao-mobile-chat-open .chat-title-actions{
    margin-left:auto!important;
    display:flex!important;
    align-items:center!important;
    gap:5px!important;
    flex:0 0 auto!important;
    max-width:42px!important;
    overflow:visible!important;
  }

  body.wao-mobile-chat-open .chat-title-actions .wao-header-action:not(.info-link){
    display:none!important;
  }

  body.wao-mobile-chat-open .wao-header-action-text,
  body.wao-mobile-chat-open .wao-header-count{
    display:none!important;
  }

  body.wao-mobile-chat-open .chat-info-button,
  body.wao-mobile-chat-open .chat-header-tool{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    padding:0!important;
    margin:0!important;
    border-radius:50%!important;
    display:grid!important;
    place-items:center!important;
    font-size:18px!important;
    background:#eef4ff!important;
    color:#0b49ba!important;
  }

  body.wao-mobile-chat-open #searchToggle{
    flex:0 0 36px!important;
    margin-left:4px!important;
  }

  body.wao-mobile-chat-open .messages{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    background:#eaf4ff!important;
    padding:12px 10px calc(var(--wao-compose-h) + 20px)!important;
    scroll-behavior:auto!important;
  }

  body.wao-mobile-chat-open .compose{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:var(--wao-android-nav-gap)!important;
    width:100vw!important;
    height:var(--wao-compose-h)!important;
    min-height:var(--wao-compose-h)!important;
    margin:0!important;
    padding:9px 10px 12px!important;
    background:#fff!important;
    border-top:1px solid #dbeafe!important;
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    z-index:6000!important;
    box-shadow:0 -8px 24px rgba(15,23,42,.08)!important;
  }

  body.wao-mobile-chat-open .compose-tool{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    flex:0 0 38px!important;
    padding:0!important;
    border-radius:50%!important;
  }

  body.wao-mobile-chat-open #body{
    flex:1 1 auto!important;
    min-width:0!important;
    width:auto!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    font-size:16px!important;
    border-radius:999px!important;
    padding:10px 14px!important;
  }

  body.wao-mobile-chat-open #sendButton{
    width:52px!important;
    min-width:52px!important;
    height:42px!important;
    padding:0!important;
    border-radius:14px!important;
    font-size:13px!important;
  }
}

/* MESSAGE THREE DOTS: visible on every normal message */
.message-wrap{
  position:relative!important;
}

.wao-message-kebab{
  position:absolute!important;
  top:8px!important;
  right:8px!important;
  width:22px!important;
  min-width:22px!important;
  height:28px!important;
  min-height:28px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  z-index:80!important;
  cursor:pointer!important;
}

.wao-message-kebab span{
  width:4px!important;
  height:4px!important;
  min-width:4px!important;
  min-height:4px!important;
  display:block!important;
  border-radius:50%!important;
  background:#0D47FF!important;
}

.mine .wao-message-kebab span,
.row.mine .wao-message-kebab span{
  background:#fff!important;
}

.messages .message-actions,
.messages .msg-actions,
.messages .actions{
  z-index:2000!important;
}


/* =========================================================
   WAOLINK MOBILE POSITION + THREE-DOT MENU FIX - mobilepositionmenu20260809
   Fixes: header overlap, mobile dots click, composer too high/jumping.
   ========================================================= */
:root{
  --wao-topbar-h:70px;
  --wao-compose-h:76px;
}

html,body{
  max-width:100%!important;
  overflow-x:hidden!important;
}

/* Header spacing */
.topbar{
  height:var(--wao-topbar-h)!important;
  min-height:var(--wao-topbar-h)!important;
  padding:14px 14px 8px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  background:#fff!important;
  border-bottom:1px solid #dbeafe!important;
  overflow:visible!important;
  position:sticky!important;
  top:0!important;
  z-index:90000!important;
}

.topbar .brand{
  flex:1 1 auto!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  overflow:hidden!important;
}

@media(max-width:820px){
  .brand-logo-img{
    display:none!important;
  }

  .brand-word strong{
    font-size:21px!important;
    line-height:1!important;
  }

  .brand-word small{
    font-size:12px!important;
    line-height:1!important;
  }

  .wao-top-nav-main{
    display:none!important;
  }
}

.wao-top-nav{
  margin-left:auto!important;
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  overflow:visible!important;
  z-index:90001!important;
}

#waoTopMenuButton.wao-top-menu-button{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  padding:0!important;
  border:1px solid #dbeafe!important;
  border-radius:999px!important;
  background:#eff6ff!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}

#waoTopMenuButton.wao-top-menu-button span{
  width:4px!important;
  height:4px!important;
  display:block!important;
  border-radius:50%!important;
  background:#0D47FF!important;
}

#waoTopMenuDropdown,
#waoTopMenuDropdown[hidden]{
  display:none!important;
}

#waoTopMenuDropdown.open{
  display:block!important;
  position:fixed!important;
  top:74px!important;
  right:10px!important;
  width:min(280px, calc(100vw - 20px))!important;
  max-height:calc(100dvh - 90px)!important;
  overflow-y:auto!important;
  background:#fff!important;
  border:1px solid #dbeafe!important;
  border-radius:20px!important;
  box-shadow:0 18px 52px rgba(15,23,42,.24)!important;
  padding:8px!important;
  z-index:90003!important;
}

/* Mobile chat layout: composer is part of flex layout, not fixed high above keyboard */
@media(max-width:820px){
  body.wao-mobile-chat-open{
    background:#eaf4ff!important;
    overflow:hidden!important;
  }

  body.wao-mobile-chat-open .page{
    padding:0!important;
    margin:0!important;
    width:100vw!important;
    max-width:100vw!important;
    height:calc(100dvh - var(--wao-topbar-h))!important;
    overflow:hidden!important;
  }

  body.wao-mobile-chat-open .chat{
    width:100vw!important;
    height:calc(100dvh - var(--wao-topbar-h))!important;
    min-height:0!important;
    max-height:calc(100dvh - var(--wao-topbar-h))!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    display:block!important;
    overflow:hidden!important;
    background:#eaf4ff!important;
  }

  body.wao-mobile-chat-open .side{
    display:none!important;
  }

  body.wao-mobile-chat-open .mainchat{
    position:fixed!important;
    left:0!important;
    right:0!important;
    top:var(--wao-topbar-h)!important;
    bottom:0!important;
    width:100vw!important;
    height:auto!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    background:#eaf4ff!important;
    z-index:5000!important;
  }

  body.wao-mobile-chat-open .chathead{
    flex:0 0 62px!important;
    min-height:62px!important;
    height:62px!important;
    padding:8px 10px!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    overflow:hidden!important;
    background:#fff!important;
    border-bottom:1px solid #dbeafe!important;
    box-shadow:0 4px 14px rgba(15,23,42,.06)!important;
  }

  body.wao-mobile-chat-open .mobile-back-button{
    display:grid!important;
    place-items:center!important;
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    padding:0!important;
    margin:0!important;
    border-radius:50%!important;
    font-size:28px!important;
    background:#eef4ff!important;
    color:#0b49ba!important;
  }

  body.wao-mobile-chat-open .chathead .avatar{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
  }

  body.wao-mobile-chat-open .chathead strong{
    font-size:17px!important;
    line-height:1.1!important;
    max-width:145px!important;
    display:block!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }

  body.wao-mobile-chat-open .chat-title-actions{
    margin-left:auto!important;
    display:flex!important;
    align-items:center!important;
    gap:5px!important;
    flex:0 0 auto!important;
    max-width:42px!important;
    overflow:visible!important;
  }

  body.wao-mobile-chat-open .chat-title-actions .wao-header-action:not(.info-link){
    display:none!important;
  }

  body.wao-mobile-chat-open .wao-header-action-text,
  body.wao-mobile-chat-open .wao-header-count{
    display:none!important;
  }

  body.wao-mobile-chat-open .chat-info-button,
  body.wao-mobile-chat-open .chat-header-tool{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    padding:0!important;
    margin:0!important;
    border-radius:50%!important;
    display:grid!important;
    place-items:center!important;
    font-size:18px!important;
    background:#eef4ff!important;
    color:#0b49ba!important;
  }

  body.wao-mobile-chat-open .messages{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    background:#eaf4ff!important;
    padding:12px 10px 12px!important;
    scroll-behavior:auto!important;
  }

  body.wao-mobile-chat-open .compose{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    flex:0 0 var(--wao-compose-h)!important;
    width:100%!important;
    height:var(--wao-compose-h)!important;
    min-height:var(--wao-compose-h)!important;
    margin:0!important;
    padding:8px 10px 12px!important;
    background:#fff!important;
    border-top:1px solid #dbeafe!important;
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    z-index:6000!important;
    box-shadow:0 -8px 24px rgba(15,23,42,.08)!important;
  }

  body.wao-mobile-chat-open .compose-tool{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    flex:0 0 38px!important;
    padding:0!important;
    border-radius:50%!important;
  }

  body.wao-mobile-chat-open #body{
    flex:1 1 auto!important;
    min-width:0!important;
    width:auto!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    font-size:16px!important;
    border-radius:999px!important;
    padding:10px 14px!important;
  }

  body.wao-mobile-chat-open #sendButton{
    width:52px!important;
    min-width:52px!important;
    height:42px!important;
    padding:0!important;
    border-radius:14px!important;
    font-size:13px!important;
  }
}

/* Message three-dot button */
.message-wrap{
  position:relative!important;
}

.wao-message-kebab{
  position:absolute!important;
  top:8px!important;
  right:8px!important;
  width:22px!important;
  min-width:22px!important;
  height:28px!important;
  min-height:28px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  z-index:100!important;
  cursor:pointer!important;
}

.wao-message-kebab span{
  width:4px!important;
  height:4px!important;
  min-width:4px!important;
  min-height:4px!important;
  display:block!important;
  border-radius:50%!important;
  background:#0D47FF!important;
}

.mine .wao-message-kebab span,
.row.mine .wao-message-kebab span{
  background:#fff!important;
}

/* Hide menu until message row gets open class */
.messages .message-actions,
.messages .msg-actions,
.messages .actions{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  height:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
  margin:0!important;
  padding:0!important;
}

.messages .row.wao-message-menu-open .message-actions,
.messages .row.wao-mobile-actions-open .message-actions{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  height:auto!important;
  overflow:visible!important;
  pointer-events:auto!important;
  position:absolute!important;
  top:36px!important;
  right:8px!important;
  z-index:2000!important;
  min-width:158px!important;
  max-width:calc(100vw - 34px)!important;
  padding:7px!important;
  margin:0!important;
  border-radius:16px!important;
  background:#fff!important;
  border:1px solid rgba(148,163,184,.22)!important;
  box-shadow:0 18px 44px rgba(15,23,42,.20)!important;
  flex-direction:column!important;
  gap:4px!important;
}

.messages .message-actions button,
.messages .message-actions a{
  width:100%!important;
  min-height:38px!important;
  padding:9px 12px!important;
  border:0!important;
  border-radius:11px!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#0f172a!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  text-align:left!important;
  font-size:13px!important;
  font-weight:700!important;
}


/* =========================================================
   WAOLINK FINAL COMPOSER LIFT - composerlift20260809
   Small lift so the message box sits above Android navigation.
   ========================================================= */
@media(max-width:820px){
  :root{
    --wao-bottom-lift:52px;
  }

  body.wao-mobile-chat-open .mainchat{
    bottom:var(--wao-bottom-lift)!important;
  }

  body.wao-mobile-chat-open .compose{
    padding-bottom:10px!important;
  }

  body.wao-mobile-chat-open .messages{
    padding-bottom:14px!important;
  }
}


/* =========================================================
   WAOLINK KEYBOARD GAP + SUGGESTIONS FIX - keyboardgapfix20260809
   When typing, remove the artificial bottom lift so composer
   sits directly above the Android keyboard, WhatsApp-style.
   ========================================================= */
@media(max-width:820px){
  body.wao-mobile-chat-open.wao-keyboard-open .mainchat{
    bottom:0!important;
  }

  body.wao-mobile-chat-open.wao-keyboard-open .compose{
    padding-bottom:8px!important;
    margin-bottom:0!important;
  }

  body.wao-mobile-chat-open.wao-keyboard-open .messages{
    padding-bottom:10px!important;
    scroll-behavior:auto!important;
  }
}


/* =========================================================
   WAOLINK PROFESSIONAL MOBILE HOME PAGE - homepolish20260809
   WhatsApp-inspired cleaner first page.
   ========================================================= */

.wao-home-page{
  width:min(980px,100%);
  margin:0 auto;
  position:relative;
}

.wao-home-hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  padding:8px 2px 16px;
}

.wao-home-kicker{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:5px 10px;
  border-radius:999px;
  background:#eaf4ff;
  color:#0D47FF;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.08em;
}

.wao-home-title h1{
  margin:10px 0 4px;
  font-size:42px;
  line-height:1;
  letter-spacing:-1.7px;
  color:#061a40;
}

.wao-home-title p{
  margin:0;
  color:#64748b;
  font-size:16px;
  font-weight:700;
}

.wao-home-quick-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.wao-home-quick-actions a{
  width:44px;
  height:44px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#eef4ff;
  color:#0D47FF;
  font-size:23px;
  font-weight:1000;
  box-shadow:0 10px 26px rgba(13,71,255,.10);
  border:1px solid #dbeafe;
}

.wao-home-search{
  min-height:50px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 16px;
  border-radius:999px;
  background:#eef4ff;
  border:1px solid #dbeafe;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  margin:0 0 14px;
}

.wao-home-search span{
  font-size:20px;
  opacity:.72;
}

.wao-home-search input{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  outline:0!important;
  padding:0!important;
  height:48px!important;
  min-height:48px!important;
  width:100%!important;
  font-size:16px!important;
  color:#0f172a!important;
}

.wao-home-search input::placeholder{
  color:#64748b;
}

.wao-home-filters{
  display:flex;
  align-items:center;
  gap:8px;
  overflow-x:auto;
  padding:0 0 14px;
  scrollbar-width:none;
}

.wao-home-filters::-webkit-scrollbar{
  display:none;
}

.wao-home-filters button{
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  background:#f3f7fb;
  border:1px solid #dbeafe;
  color:#334155;
  font-weight:900;
  display:inline-flex;
  gap:7px;
  align-items:center;
  white-space:nowrap;
  box-shadow:none;
}

.wao-home-filters button.active{
  background:linear-gradient(135deg,#0D47FF,#00D4C4);
  color:#fff;
  border-color:transparent;
  box-shadow:0 12px 28px rgba(13,71,255,.18);
}

.wao-home-filters button b{
  font-size:12px;
  opacity:.92;
}

.wao-home-conversations{
  background:#fff;
  border:1px solid #e5edf7;
  border-radius:28px;
  padding:10px;
  box-shadow:0 18px 50px rgba(15,23,42,.08);
  overflow:hidden;
}

.wao-home-conversations .conversation-list{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
}

.wao-home-conversations .conversation-card{
  position:relative!important;
  min-height:82px!important;
  display:grid!important;
  grid-template-columns:58px 1fr auto!important;
  align-items:center!important;
  gap:12px!important;
  padding:12px 10px!important;
  border:0!important;
  border-bottom:1px solid #edf2f7!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#0f172a!important;
}

.wao-home-conversations .conversation-card:last-child{
  border-bottom:0!important;
}

.wao-home-conversations .conversation-card:hover,
.wao-home-conversations .conversation-card.active{
  background:#f7fbff!important;
}

.wao-home-conversations .conversation-avatar-wrap{
  width:58px!important;
  height:58px!important;
  position:relative!important;
}

.wao-home-conversations .conversation-avatar-wrap .avatar,
.wao-home-conversations .conversation-group-avatar{
  width:58px!important;
  height:58px!important;
  min-width:58px!important;
  border-radius:50%!important;
  object-fit:cover!important;
}

.wao-home-conversations .conversation-text{
  min-width:0!important;
}

.wao-home-conversations .conversation-title-row{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin-bottom:4px!important;
}

.wao-home-conversations .conversation-title-row strong{
  font-size:18px!important;
  line-height:1.15!important;
  font-weight:1000!important;
  color:#0f172a!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}

.wao-home-conversations .conversation-time{
  font-size:13px!important;
  color:#64748b!important;
  font-weight:800!important;
  white-space:nowrap!important;
}

.wao-home-conversations .conversation-preview-row{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0!important;
}

.wao-home-conversations .conversation-preview-label{
  display:inline-flex!important;
  align-items:center!important;
  height:20px!important;
  padding:0 7px!important;
  border-radius:999px!important;
  background:#e6fffb!important;
  color:#00857f!important;
  font-size:10px!important;
  font-weight:1000!important;
  text-transform:uppercase!important;
  flex:0 0 auto!important;
}

.wao-home-conversations .conversation-preview-label.new,
.wao-home-conversations .conversation-card.unread .conversation-preview-label{
  background:#0D47FF!important;
  color:#fff!important;
}

.wao-home-conversations .conversation-preview{
  min-width:0!important;
  color:#475569!important;
  font-size:15px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.wao-home-conversations .conversation-subtitle{
  margin-top:5px!important;
}

.wao-home-conversations .wao-chat-list-status{
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  min-height:22px!important;
  padding:0 9px!important;
  border-radius:999px!important;
  font-size:12px!important;
  font-weight:900!important;
}

.wao-home-conversations .wao-chat-list-status.online{
  background:#dcfce7!important;
  color:#047857!important;
}

.wao-home-conversations .wao-chat-list-status.group{
  background:#eef4ff!important;
  color:#0D47FF!important;
}

.wao-home-conversations .wao-chat-list-status.offline{
  background:#f1f5f9!important;
  color:#64748b!important;
}

.wao-home-conversations .unread-badge{
  position:absolute!important;
  right:10px!important;
  bottom:14px!important;
  min-width:22px!important;
  height:22px!important;
  padding:0 6px!important;
  border-radius:999px!important;
  background:#00D4C4!important;
  color:#052e2b!important;
  display:grid!important;
  place-items:center!important;
  font-size:12px!important;
  font-weight:1000!important;
}

.wao-home-fab{
  position:fixed;
  right:18px;
  bottom:86px;
  width:58px;
  height:58px;
  border-radius:18px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg,#0D47FF,#00D4C4);
  box-shadow:0 18px 42px rgba(13,71,255,.30);
  z-index:120;
  text-decoration:none;
}

.wao-home-fab span{
  font-size:30px;
  font-weight:1000;
  line-height:1;
}

.wao-home-bottom-nav{
  display:none;
}

@media(max-width:820px){
  body:not(.wao-mobile-chat-open){
    background:#eaf4ff!important;
  }

  body:not(.wao-mobile-chat-open) .page{
    padding:12px 14px 108px!important;
    margin:0!important;
    width:100%!important;
    max-width:100%!important;
  }

  .wao-home-page{
    width:100%!important;
    max-width:100%!important;
  }

  .wao-home-hero{
    padding:8px 2px 12px!important;
    align-items:center!important;
  }

  .wao-home-kicker{
    display:none!important;
  }

  .wao-home-title h1{
    font-size:34px!important;
    letter-spacing:-1.2px!important;
    margin:0 0 3px!important;
  }

  .wao-home-title p{
    font-size:14px!important;
  }

  .wao-home-quick-actions{
    gap:8px!important;
  }

  .wao-home-quick-actions a{
    width:40px!important;
    height:40px!important;
    font-size:22px!important;
  }

  .wao-home-search{
    margin:0 0 12px!important;
    min-height:48px!important;
    border-radius:24px!important;
  }

  .wao-home-filters{
    padding-bottom:12px!important;
  }

  .wao-home-conversations{
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    padding:0!important;
    overflow:visible!important;
  }

  .wao-home-conversations .empty{
    background:#fff!important;
    border-radius:24px!important;
    padding:26px 18px!important;
    box-shadow:0 12px 35px rgba(15,23,42,.08)!important;
  }

  .wao-home-conversations .conversation-card{
    min-height:84px!important;
    padding:12px 2px!important;
    grid-template-columns:60px 1fr auto!important;
    gap:12px!important;
    border-bottom:1px solid rgba(148,163,184,.18)!important;
  }

  .wao-home-conversations .conversation-card:hover,
  .wao-home-conversations .conversation-card.active{
    background:transparent!important;
  }

  .wao-home-conversations .conversation-avatar-wrap,
  .wao-home-conversations .conversation-avatar-wrap .avatar,
  .wao-home-conversations .conversation-group-avatar{
    width:58px!important;
    height:58px!important;
    min-width:58px!important;
  }

  .wao-home-conversations .conversation-title-row strong{
    font-size:17px!important;
  }

  .wao-home-conversations .conversation-preview{
    font-size:14px!important;
  }

  .wao-home-fab{
    bottom:90px!important;
    right:18px!important;
    width:58px!important;
    height:58px!important;
  }

  .wao-home-bottom-nav{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    min-height:76px!important;
    padding:8px 14px calc(8px + env(safe-area-inset-bottom,0px))!important;
    display:grid!important;
    grid-template-columns:repeat(4,1fr)!important;
    gap:4px!important;
    background:rgba(255,255,255,.96)!important;
    border-top:1px solid #dbeafe!important;
    box-shadow:0 -14px 40px rgba(15,23,42,.10)!important;
    z-index:100!important;
    backdrop-filter:blur(12px)!important;
    -webkit-backdrop-filter:blur(12px)!important;
  }

  .wao-home-bottom-nav a{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    border-radius:18px!important;
    color:#64748b!important;
    text-decoration:none!important;
    font-size:11px!important;
    font-weight:900!important;
    min-width:0!important;
  }

  .wao-home-bottom-nav a span{
    font-size:21px!important;
    line-height:1!important;
  }

  .wao-home-bottom-nav a strong{
    font-size:11px!important;
    line-height:1!important;
  }

  .wao-home-bottom-nav a.active{
    color:#0D47FF!important;
    background:#eaf4ff!important;
  }
}

@media(min-width:821px){
  .wao-home-page{
    padding-top:8px;
  }
}


/* =========================================================
   WAOLINK BOTTOM TABS + GROUP CARD POLISH - tabsgroupspolish20260809
   Fixes the group page overlap and improves mobile bottom tabs.
   ========================================================= */

/* Hide any old plain-text mobile footer/nav that may still be injected */
@media(max-width:820px){
  footer,
  .footer,
  .mobile-footer,
  .bottom-links,
  .bottom-nav:not(.wao-home-bottom-nav),
  .wao-old-bottom-nav,
  .wao-mobile-plain-nav{
    display:none!important;
  }
}

/* Professional app-style bottom tabs */
@media(max-width:820px){
  .wao-home-bottom-nav{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    min-height:78px!important;
    padding:8px 12px calc(9px + env(safe-area-inset-bottom,0px))!important;
    display:grid!important;
    grid-template-columns:repeat(4,1fr)!important;
    gap:6px!important;
    background:rgba(255,255,255,.97)!important;
    border-top:1px solid #dbeafe!important;
    box-shadow:0 -16px 44px rgba(15,23,42,.12)!important;
    z-index:400!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
  }

  .wao-home-bottom-nav a{
    min-width:0!important;
    min-height:58px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    border-radius:22px!important;
    color:#64748b!important;
    text-decoration:none!important;
    font-weight:1000!important;
    transition:.16s ease!important;
  }

  .wao-home-bottom-nav a span{
    display:grid!important;
    place-items:center!important;
    width:34px!important;
    height:26px!important;
    font-size:22px!important;
    line-height:1!important;
  }

  .wao-home-bottom-nav a strong{
    display:block!important;
    font-size:11px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  .wao-home-bottom-nav a.active{
    color:#0D47FF!important;
    background:#eaf4ff!important;
  }

  .wao-home-bottom-nav a.active span{
    border-radius:999px!important;
    background:#dbeafe!important;
  }

  .wao-home-fab{
    bottom:92px!important;
    right:20px!important;
    width:56px!important;
    height:56px!important;
    border-radius:18px!important;
  }
}

/* Groups page overlap fix */
.wao-groups-card{
  overflow:visible!important;
}

.wao-groups-list{
  display:grid!important;
  gap:14px!important;
}

.wao-group-item{
  position:relative!important;
  display:grid!important;
  grid-template-columns:74px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:16px!important;
  min-height:112px!important;
  padding:18px!important;
  border:1px solid #dbe5ef!important;
  border-radius:22px!important;
  background:#fff!important;
  overflow:hidden!important;
}

.wao-group-avatar,
.wao-group-photo-thumb{
  width:64px!important;
  height:64px!important;
  min-width:64px!important;
  border-radius:18px!important;
  object-fit:cover!important;
  display:grid!important;
  place-items:center!important;
}

.wao-group-main{
  min-width:0!important;
  overflow:hidden!important;
}

.wao-group-title-row{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:10px!important;
  min-width:0!important;
}

.wao-group-title-row strong{
  display:block!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:normal!important;
  line-height:1.15!important;
}

.wao-group-title-row span{
  flex:0 0 auto!important;
}

.wao-group-members{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  margin-top:10px!important;
}

.wao-group-members span{
  display:inline-flex!important;
  align-items:center!important;
  min-height:28px!important;
  max-width:160px!important;
  padding:0 10px!important;
  border-radius:999px!important;
  background:#f1f5f9!important;
  color:#334155!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-weight:800!important;
}

.wao-group-card-actions{
  position:static!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  flex-wrap:wrap!important;
  min-width:0!important;
}

.wao-group-info-pill{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:36px!important;
  padding:0 14px!important;
  border-radius:999px!important;
  white-space:nowrap!important;
  font-weight:900!important;
}

/* Mobile group page: stack actions under title so nothing overlaps */
@media(max-width:820px){
  .wao-groups-card{
    margin:0!important;
    padding:22px 18px!important;
    border-radius:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  .wao-groups-head{
    display:block!important;
  }

  .wao-groups-head h1{
    font-size:38px!important;
    letter-spacing:-1px!important;
    margin-bottom:8px!important;
  }

  .wao-groups-head .meta{
    font-size:16px!important;
    line-height:1.35!important;
    margin-bottom:20px!important;
  }

  .wao-create-group-btn{
    width:100%!important;
    min-height:56px!important;
    border-radius:20px!important;
    margin:0 0 20px!important;
  }

  .wao-group-item{
    display:grid!important;
    grid-template-columns:68px 1fr!important;
    gap:14px!important;
    align-items:start!important;
    min-height:0!important;
    padding:16px!important;
    border-radius:24px!important;
    overflow:visible!important;
  }

  .wao-group-avatar,
  .wao-group-photo-thumb{
    width:62px!important;
    height:62px!important;
    min-width:62px!important;
    border-radius:18px!important;
  }

  .wao-group-main{
    min-width:0!important;
    overflow:visible!important;
  }

  .wao-group-title-row{
    display:block!important;
    min-width:0!important;
  }

  .wao-group-title-row strong{
    font-size:22px!important;
    line-height:1.08!important;
    margin-bottom:10px!important;
    white-space:normal!important;
    overflow:visible!important;
  }

  .wao-group-title-row span{
    display:inline-flex!important;
    min-height:32px!important;
    align-items:center!important;
    padding:0 12px!important;
    border-radius:999px!important;
    background:#eef4ff!important;
    color:#0D47FF!important;
    font-weight:1000!important;
  }

  .wao-group-members{
    margin-top:12px!important;
    gap:8px!important;
  }

  .wao-group-members span{
    max-width:120px!important;
    min-height:30px!important;
  }

  .wao-group-card-actions{
    grid-column:1 / -1!important;
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    margin-top:12px!important;
  }

  .wao-group-info-pill{
    width:100%!important;
    min-height:40px!important;
    padding:0 12px!important;
    border-radius:999px!important;
  }
}


/* =========================================================
   WAOLINK SAFE CAMERA + ADD CONTACT - safeaddcameracontact20260809
   Safe version: dashboard only links to separate pages.
   ========================================================= */

.wao-home-camera-link{
  width:44px;
  height:44px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#eef4ff;
  color:#0D47FF;
  font-size:21px;
  font-weight:1000;
  box-shadow:0 10px 26px rgba(13,71,255,.10);
  border:1px solid #dbeafe;
  text-decoration:none;
}

@media(max-width:820px){
  .wao-home-quick-actions{
    gap:8px!important;
  }

  .wao-home-quick-actions a,
  .wao-home-camera-link{
    width:40px!important;
    height:40px!important;
    font-size:21px!important;
  }

  .wao-home-fab{
    bottom:112px!important;
    right:20px!important;
  }
}

.wao-add-contact-page,
.wao-camera-page{
  width:min(760px,100%);
  margin:0 auto;
}

.wao-add-contact-card,
.wao-camera-card{
  padding:28px;
  border-radius:28px;
}

.wao-add-contact-head,
.wao-camera-page-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  margin-bottom:22px;
}

.wao-add-contact-head h1,
.wao-camera-page-head h1{
  margin:0 0 6px;
  font-size:40px;
  letter-spacing:-1px;
  color:#061a40;
}

.wao-add-contact-head p,
.wao-camera-page-head p{
  margin:0;
  color:#64748b;
  line-height:1.35;
}

.wao-add-contact-search,
.wao-camera-form{
  display:grid;
  gap:12px;
  margin-bottom:16px;
}

.wao-add-contact-search{
  grid-template-columns:1fr auto;
}

.wao-add-contact-search input,
.wao-camera-form select,
.wao-camera-form input[type="file"]{
  min-height:48px;
  border-radius:16px;
  border:1px solid #dbeafe;
  background:#fff;
  padding:10px 14px;
  font-size:16px;
}

.wao-add-contact-results{
  display:grid;
  gap:12px;
}

.wao-add-contact-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px;
  border:1px solid #dbeafe;
  border-radius:20px;
  background:#fff;
}

.wao-add-contact-row small{
  display:block;
  color:#64748b;
  margin-top:2px;
}

.wao-camera-status{
  border-radius:14px;
  padding:10px 12px;
  background:#eef4ff;
  color:#0D47FF;
  font-weight:800;
}

.wao-camera-status.ok{
  background:#dcfce7;
  color:#047857;
}

.wao-camera-status.error{
  background:#fee2e2;
  color:#b91c1c;
}

@media(max-width:820px){
  .wao-add-contact-card,
  .wao-camera-card{
    padding:22px 18px!important;
    border-radius:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  .wao-add-contact-head,
  .wao-camera-page-head{
    display:block!important;
  }

  .wao-add-contact-head h1,
  .wao-camera-page-head h1{
    font-size:38px!important;
  }

  .wao-add-contact-head .btn,
  .wao-camera-page-head .btn{
    margin-top:16px!important;
  }

  .wao-add-contact-search{
    grid-template-columns:1fr!important;
  }

  .wao-add-contact-row{
    border-radius:22px!important;
    background:#fff!important;
    align-items:flex-start!important;
  }

  .wao-add-contact-row .avatar{
    width:54px!important;
    height:54px!important;
    min-width:54px!important;
  }
}


/* =========================================================
   WAOLINK REAL CAMERA + ADD CONTACT IMPROVEMENT - realcameraaddcontact20260809
   ========================================================= */

/* Add contact: make the actual add option obvious */
.wao-add-contact-direct{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  margin:0 0 16px;
  padding:14px;
  border-radius:20px;
  background:#eaf4ff;
  border:1px solid #dbeafe;
}

.wao-add-contact-direct input{
  min-height:48px;
  border-radius:16px;
  border:1px solid #dbeafe;
  padding:0 14px;
  font-size:16px;
}

.wao-add-contact-empty strong{
  color:#061a40;
}

/* Real camera page */
.wao-live-camera-box{
  display:grid;
  gap:12px;
}

.wao-live-camera-box label{
  font-weight:900;
  color:#334155;
}

.wao-live-camera-box select{
  width:100%;
  min-height:48px;
  border-radius:16px;
  border:1px solid #dbeafe;
  background:#fff;
  padding:0 14px;
  font-size:16px;
}

.wao-camera-preview{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  border-radius:24px;
  overflow:hidden;
  background:#dbeafe;
  border:1px solid #cbdff8;
  display:grid;
  place-items:center;
}

.wao-camera-preview video,
.wao-camera-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

#waoCameraPlaceholder{
  display:grid;
  place-items:center;
  gap:8px;
  text-align:center;
  color:#0f172a;
  padding:20px;
}

#waoCameraPlaceholder span{
  font-size:44px;
}

#waoCameraPlaceholder strong{
  font-size:20px;
}

#waoCameraPlaceholder small{
  color:#64748b;
}

.wao-camera-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.wao-camera-actions .btn{
  min-height:46px;
  border-radius:16px;
}

.wao-camera-fallback{
  display:grid;
  gap:8px;
  padding:12px;
  border-radius:18px;
  background:#f8fbff;
  border:1px dashed #cbdff8;
}

.wao-camera-fallback span{
  color:#64748b;
  font-weight:800;
}

.wao-camera-fallback input{
  width:100%;
}

@media(max-width:820px){
  .wao-add-contact-direct{
    grid-template-columns:1fr!important;
  }

  .wao-camera-preview{
    aspect-ratio:3/4;
    border-radius:22px;
  }

  .wao-camera-actions{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   WAOLINK WHATSAPP-STYLE CONTACT + AUTO CAMERA - whatsappstylecontactcamera20260809
   ========================================================= */

/* Dashboard plus now opens the WhatsApp-style Select Contact page */
@media(max-width:820px){
  .wao-home-fab{
    bottom:112px!important;
    right:20px!important;
  }
}

/* Make hidden always respected inside camera/video preview */
.wao-camera-preview [hidden],
.wao-video-preview [hidden]{
  display:none!important;
}

/* Select contact page */
.wao-select-contact-page{
  width:min(780px,100%);
  margin:0 auto;
}

.wao-select-contact-shell{
  background:#fff;
  border:1px solid #e5edf7;
  border-radius:28px;
  padding:22px;
  box-shadow:0 18px 50px rgba(15,23,42,.08);
}

.wao-select-contact-top{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}

.wao-select-back{
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#eef4ff;
  color:#0D47FF;
  font-size:34px;
  font-weight:900;
  text-decoration:none;
}

.wao-select-contact-top h1{
  margin:0;
  font-size:30px;
  color:#061a40;
}

.wao-select-contact-top p{
  margin:3px 0 0;
  color:#64748b;
  font-weight:700;
}

.wao-select-search-shortcut{
  margin-left:auto;
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#eef4ff;
  text-decoration:none;
  font-size:22px;
}

.wao-select-actions{
  display:grid;
  gap:8px;
  margin-bottom:18px;
}

.wao-select-action-row{
  width:100%;
  border:0;
  background:transparent;
  display:grid;
  grid-template-columns:56px 1fr auto;
  align-items:center;
  gap:14px;
  min-height:64px;
  padding:8px 4px;
  text-decoration:none;
  color:#0f172a;
  text-align:left;
  cursor:pointer;
}

.wao-select-green-icon{
  width:50px;
  height:50px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#22c55e;
  color:#fff;
  font-size:22px;
  font-weight:1000;
}

.wao-select-action-row strong{
  font-size:18px;
  font-weight:1000;
}

.wao-select-action-row em{
  font-style:normal;
  color:#64748b;
  font-size:24px;
}

.wao-new-contact-panel{
  border:1px solid #dbeafe;
  background:#f8fbff;
  border-radius:22px;
  padding:16px;
  margin:0 0 18px;
}

.wao-new-contact-panel[hidden]{
  display:none!important;
}

.wao-new-contact-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}

.wao-new-contact-head strong{
  font-size:18px;
  color:#061a40;
}

.wao-new-contact-head button{
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:#eaf4ff;
  color:#0D47FF;
  font-size:24px;
}

.wao-new-contact-form{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  margin-bottom:10px;
}

.wao-new-contact-form input{
  min-height:46px;
  border-radius:16px;
  border:1px solid #dbeafe;
  padding:0 14px;
  font-size:15px;
}

.wao-new-contact-results{
  display:grid;
  gap:10px;
  margin-top:12px;
}

.wao-select-filter{
  min-height:48px;
  display:flex;
  align-items:center;
  margin:0 0 16px;
}

.wao-select-filter input{
  width:100%;
  min-height:48px;
  border-radius:999px;
  border:1px solid #dbeafe;
  background:#eef4ff;
  padding:0 16px;
  font-size:16px;
}

.wao-select-section-title{
  margin:0 0 10px;
  font-size:16px;
  color:#64748b;
}

.wao-select-contact-list{
  display:grid;
  gap:2px;
}

.wao-select-contact-row{
  display:grid;
  grid-template-columns:54px 1fr auto;
  align-items:center;
  gap:14px;
  min-height:68px;
  padding:9px 4px;
  text-decoration:none;
  color:#0f172a;
  border-bottom:1px solid rgba(148,163,184,.16);
}

.wao-select-contact-row.compact{
  grid-template-columns:48px 1fr auto;
  background:#fff;
  border:1px solid #dbeafe;
  border-radius:18px;
  padding:10px;
}

.wao-select-contact-row .avatar{
  width:50px!important;
  height:50px!important;
  min-width:50px!important;
}

.wao-select-contact-row strong{
  display:block;
  font-size:17px;
  font-weight:1000;
}

.wao-select-contact-row span{
  display:block;
  color:#64748b;
  margin-top:3px;
  font-size:14px;
}

/* Auto camera page */
.wao-camera-preview video,
.wao-camera-preview img,
.wao-video-preview video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.wao-camera-actions,
.wao-video-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

/* Video call icon on chat header */
.video-call-link .wao-header-action-icon{
  font-size:18px!important;
}

.wao-video-call-page{
  width:min(760px,100%);
  margin:0 auto;
}

.wao-video-call-card{
  min-height:calc(100dvh - 120px);
  border-radius:28px;
  padding:22px;
  background:#061a40;
  color:#fff;
  box-shadow:0 22px 70px rgba(15,23,42,.25);
}

.wao-video-call-top{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}

.wao-video-back{
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  background:rgba(255,255,255,.12);
  text-decoration:none;
  font-size:34px;
}

.wao-video-call-top h1{
  margin:0;
  color:#fff;
  font-size:28px;
}

.wao-video-call-top p{
  margin:3px 0 0;
  color:rgba(255,255,255,.72);
}

.wao-video-preview{
  position:relative;
  width:100%;
  aspect-ratio:3/4;
  border-radius:26px;
  overflow:hidden;
  background:#0f172a;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.14);
  margin-bottom:16px;
}

#waoVideoPlaceholder{
  display:grid;
  place-items:center;
  gap:8px;
  text-align:center;
  padding:24px;
}

#waoVideoPlaceholder span{
  font-size:46px;
}

#waoVideoPlaceholder strong{
  font-size:22px;
}

#waoVideoPlaceholder small{
  color:rgba(255,255,255,.68);
}

@media(max-width:820px){
  .wao-select-contact-shell{
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:transparent!important;
    padding:18px 14px 92px!important;
  }

  .wao-select-contact-top h1{
    font-size:26px!important;
  }

  .wao-select-action-row{
    min-height:66px!important;
  }

  .wao-new-contact-form{
    grid-template-columns:1fr!important;
  }

  .wao-select-contact-row{
    grid-template-columns:56px 1fr auto!important;
  }

  .wao-select-contact-row.compact{
    grid-template-columns:50px 1fr!important;
  }

  .wao-select-contact-row.compact form,
  .wao-select-contact-row.compact > .btn{
    grid-column:1 / -1!important;
    width:100%!important;
  }

  .wao-camera-preview{
    aspect-ratio:3/4!important;
  }

  body.wao-mobile-chat-open .chat-title-actions{
    max-width:84px!important;
    gap:6px!important;
  }

  body.wao-mobile-chat-open .chat-title-actions .wao-header-action:not(.info-link):not(.video-call-link){
    display:none!important;
  }

  body.wao-mobile-chat-open .video-call-link,
  body.wao-mobile-chat-open .info-link{
    display:grid!important;
  }

  .wao-video-call-card{
    border-radius:0!important;
    min-height:calc(100dvh - 70px)!important;
    margin:0 -14px!important;
  }
}


/* =========================================================
   WAOLINK FIX ADD CONTACT + VIDEO CAMERA ICON - fixaddcontactvideocamera20260809
   ========================================================= */

/* Add contact panel: clearer WhatsApp-style form */
.wao-new-contact-head{
  align-items:flex-start!important;
  gap:10px!important;
}

.wao-new-contact-head strong{
  display:block!important;
}

.wao-new-contact-head small{
  display:block!important;
  margin-top:4px!important;
  color:#64748b!important;
  font-size:13px!important;
  line-height:1.25!important;
  font-weight:700!important;
}

.wao-new-contact-form:first-of-type{
  background:#fff!important;
  border:1px solid #dbeafe!important;
  border-radius:18px!important;
  padding:10px!important;
}

.wao-new-contact-form:first-of-type .btn{
  background:linear-gradient(135deg,#0D47FF,#00D4C4)!important;
  color:#fff!important;
  border:0!important;
}

.wao-new-contact-results{
  max-height:none!important;
  overflow:visible!important;
}

/* Keep video call camera icon visible in private chat header */
.video-call-link{
  display:grid!important;
  place-items:center!important;
  visibility:visible!important;
  opacity:1!important;
}

.video-call-link .wao-header-action-icon{
  font-size:20px!important;
  line-height:1!important;
}

@media(max-width:820px){
  body.wao-mobile-chat-open .chat-title-actions{
    max-width:92px!important;
    width:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:6px!important;
    overflow:visible!important;
  }

  body.wao-mobile-chat-open .video-call-link,
  body.wao-mobile-chat-open .info-link{
    display:grid!important;
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    place-items:center!important;
    opacity:1!important;
    visibility:visible!important;
  }

  body.wao-mobile-chat-open .chat-title-actions .wao-header-action:not(.video-call-link):not(.info-link){
    display:none!important;
  }

  body.wao-mobile-chat-open #searchToggle{
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
    flex:0 0 36px!important;
  }
}


/* =========================================================
   WAOLINK MANUAL CONTACT + VIDEO CAMERA FIX - manualcontactvideofix20260809
   ========================================================= */

.wao-create-contact-form{
  display:grid!important;
  gap:12px!important;
  padding:14px!important;
  border-radius:20px!important;
  background:#fff!important;
  border:1px solid #dbeafe!important;
  margin-bottom:12px!important;
}

.wao-create-contact-form label{
  display:grid!important;
  gap:6px!important;
  color:#334155!important;
  font-weight:900!important;
}

.wao-create-contact-form input{
  min-height:46px!important;
  border-radius:16px!important;
  border:1px solid #dbeafe!important;
  padding:0 14px!important;
  font-size:16px!important;
  background:#fff!important;
}

.wao-create-contact-form .btn{
  min-height:48px!important;
  border-radius:16px!important;
  background:linear-gradient(135deg,#0D47FF,#00D4C4)!important;
  color:#fff!important;
  border:0!important;
}

.wao-new-contact-divider{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  color:#64748b!important;
  font-weight:800!important;
  margin:12px 0!important;
}

.wao-new-contact-divider:before,
.wao-new-contact-divider:after{
  content:""!important;
  height:1px!important;
  background:#dbeafe!important;
  flex:1!important;
}

.manual-title{
  margin-top:22px!important;
}

.manual-contact{
  background:#fff!important;
}

.manual-avatar{
  background:linear-gradient(135deg,#0D47FF,#00D4C4)!important;
  color:#fff!important;
  display:grid!important;
  place-items:center!important;
  font-weight:1000!important;
  font-size:22px!important;
}

.wao-not-on-waolink{
  display:inline-flex!important;
  align-items:center!important;
  min-height:32px!important;
  padding:0 10px!important;
  border-radius:999px!important;
  background:#fff7ed!important;
  color:#c2410c!important;
  font-weight:900!important;
  font-size:12px!important;
  white-space:nowrap!important;
}

/* Force video camera icon visible on private chat header */
.video-call-link{
  display:grid!important;
  place-items:center!important;
  opacity:1!important;
  visibility:visible!important;
}

.video-call-link .wao-header-action-icon{
  font-size:20px!important;
  line-height:1!important;
}

@media(max-width:820px){
  body.wao-mobile-chat-open .chat-title-actions{
    max-width:96px!important;
    width:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:6px!important;
    overflow:visible!important;
  }

  body.wao-mobile-chat-open .video-call-link,
  body.wao-mobile-chat-open .chat-title-actions .video-call-link{
    display:grid!important;
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    place-items:center!important;
  }

  body.wao-mobile-chat-open .chat-title-actions .wao-header-action:not(.video-call-link):not(.info-link){
    display:none!important;
  }

  body.wao-mobile-chat-open .info-link{
    display:grid!important;
  }

  .wao-select-contact-row.manual-contact{
    grid-template-columns:56px 1fr!important;
  }

  .wao-not-on-waolink{
    grid-column:1 / -1!important;
    width:max-content!important;
    margin-left:70px!important;
  }
}

/* Video call page */
.wao-video-call-page{
  width:min(760px,100%);
  margin:0 auto;
}

.wao-video-call-card{
  min-height:calc(100dvh - 120px);
  border-radius:28px;
  padding:22px;
  background:#061a40;
  color:#fff;
  box-shadow:0 22px 70px rgba(15,23,42,.25);
}

.wao-video-call-top{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}

.wao-video-back{
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  background:rgba(255,255,255,.12);
  text-decoration:none;
  font-size:34px;
}

.wao-video-call-top h1{
  margin:0;
  color:#fff;
  font-size:28px;
}

.wao-video-call-top p{
  margin:3px 0 0;
  color:rgba(255,255,255,.72);
}

.wao-video-preview{
  position:relative;
  width:100%;
  aspect-ratio:3/4;
  border-radius:26px;
  overflow:hidden;
  background:#0f172a;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.14);
  margin-bottom:16px;
}

.wao-video-preview video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.wao-video-preview [hidden]{
  display:none!important;
}

#waoVideoPlaceholder{
  display:grid;
  place-items:center;
  gap:8px;
  text-align:center;
  padding:24px;
}

#waoVideoPlaceholder span{
  font-size:46px;
}

#waoVideoPlaceholder strong{
  font-size:22px;
}

#waoVideoPlaceholder small{
  color:rgba(255,255,255,.68);
}

.wao-video-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

@media(max-width:820px){
  .wao-video-call-card{
    border-radius:0!important;
    min-height:calc(100dvh - 70px)!important;
    margin:0 -14px!important;
  }
}


/* =========================================================
   WAOLINK PROFESSIONAL DESKTOP HOME - desktopprohome20260809
   Desktop-only polish. Mobile layout is preserved.
   ========================================================= */

@media(min-width:821px){
  body{
    background:
      radial-gradient(circle at 18% 10%, rgba(13,71,255,.08), transparent 30%),
      radial-gradient(circle at 84% 18%, rgba(0,212,196,.10), transparent 28%),
      #f4f8fd!important;
  }

  .topbar{
    height:72px!important;
    min-height:72px!important;
    padding:14px 28px!important;
    background:rgba(255,255,255,.86)!important;
    border-bottom:1px solid rgba(219,234,254,.92)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    box-shadow:0 8px 28px rgba(15,23,42,.05)!important;
  }

  .topbar .brand{
    gap:10px!important;
  }

  .brand-logo-img{
    width:38px!important;
    height:38px!important;
    border-radius:12px!important;
  }

  .brand-word strong{
    font-size:24px!important;
    letter-spacing:-.8px!important;
  }

  .brand-word small{
    font-size:13px!important;
  }

  .wao-top-nav-main{
    height:38px!important;
    padding:0 18px!important;
    border-radius:999px!important;
    background:#eef4ff!important;
    color:#061a40!important;
    font-weight:1000!important;
  }

  #waoTopMenuButton.wao-top-menu-button{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
  }

  .page{
    width:100%!important;
    max-width:none!important;
    padding:34px 42px 44px!important;
    margin:0!important;
  }

  .wao-home-page{
    width:min(1280px, 100%)!important;
    max-width:1280px!important;
    margin:0 auto!important;
    display:grid!important;
    grid-template-columns:minmax(520px, 780px) minmax(320px, 420px)!important;
    gap:28px!important;
    align-items:start!important;
  }

  .wao-home-hero{
    grid-column:1 / -1!important;
    display:grid!important;
    grid-template-columns:1fr auto!important;
    align-items:end!important;
    padding:22px 28px!important;
    border-radius:30px!important;
    background:linear-gradient(135deg,#ffffff 0%,#eef7ff 100%)!important;
    border:1px solid #dbeafe!important;
    box-shadow:0 18px 55px rgba(15,23,42,.08)!important;
  }

  .wao-home-kicker{
    display:inline-flex!important;
    background:#eaf4ff!important;
    color:#0D47FF!important;
  }

  .wao-home-title h1{
    font-size:44px!important;
    margin:10px 0 6px!important;
    letter-spacing:-1.8px!important;
  }

  .wao-home-title p{
    font-size:17px!important;
    color:#64748b!important;
  }

  .wao-home-quick-actions{
    gap:12px!important;
  }

  .wao-home-quick-actions a,
  .wao-home-camera-link,
  .wao-home-camera-action{
    width:46px!important;
    height:46px!important;
    border-radius:16px!important;
    background:#fff!important;
    border:1px solid #dbeafe!important;
    box-shadow:0 12px 28px rgba(13,71,255,.11)!important;
    transition:transform .15s ease, box-shadow .15s ease!important;
  }

  .wao-home-quick-actions a:hover,
  .wao-home-camera-link:hover,
  .wao-home-camera-action:hover{
    transform:translateY(-2px)!important;
    box-shadow:0 18px 36px rgba(13,71,255,.18)!important;
  }

  .wao-home-search{
    grid-column:1!important;
    min-height:54px!important;
    border-radius:18px!important;
    background:#fff!important;
    border:1px solid #dbeafe!important;
    box-shadow:0 10px 28px rgba(15,23,42,.04)!important;
    margin:0!important;
  }

  .wao-home-filters{
    grid-column:1!important;
    padding:0!important;
    margin:-14px 0 -4px!important;
  }

  .wao-home-filters button{
    min-height:40px!important;
    padding:0 18px!important;
    border-radius:14px!important;
    background:#fff!important;
    box-shadow:0 8px 22px rgba(15,23,42,.04)!important;
  }

  .wao-home-filters button.active{
    background:linear-gradient(135deg,#0D47FF,#00D4C4)!important;
    color:#fff!important;
    box-shadow:0 14px 30px rgba(13,71,255,.20)!important;
  }

  .wao-home-conversations{
    grid-column:1!important;
    border-radius:30px!important;
    background:#fff!important;
    border:1px solid #e5edf7!important;
    padding:10px!important;
    box-shadow:0 24px 70px rgba(15,23,42,.10)!important;
    min-height:360px!important;
  }

  .wao-home-conversations .conversation-card{
    min-height:92px!important;
    grid-template-columns:66px 1fr auto!important;
    padding:14px 16px!important;
    border-radius:22px!important;
    border-bottom:0!important;
    margin:2px 0!important;
    transition:background .15s ease, transform .15s ease, box-shadow .15s ease!important;
  }

  .wao-home-conversations .conversation-card:hover{
    background:#f6fbff!important;
    transform:translateY(-1px)!important;
    box-shadow:0 10px 26px rgba(15,23,42,.06)!important;
  }

  .wao-home-conversations .conversation-avatar-wrap,
  .wao-home-conversations .conversation-avatar-wrap .avatar,
  .wao-home-conversations .conversation-group-avatar{
    width:62px!important;
    height:62px!important;
    min-width:62px!important;
  }

  .wao-home-conversations .conversation-title-row strong{
    font-size:18px!important;
  }

  .wao-home-conversations .conversation-preview{
    font-size:15px!important;
  }

  .wao-home-desktop-panel{
    grid-column:2!important;
    grid-row:2 / span 3!important;
    display:block!important;
    position:sticky!important;
    top:96px!important;
  }

  .wao-desktop-panel-card{
    min-height:440px!important;
    border-radius:34px!important;
    padding:30px!important;
    background:
      linear-gradient(145deg, rgba(13,71,255,.95), rgba(0,212,196,.92)),
      #0D47FF!important;
    color:#fff!important;
    box-shadow:0 30px 85px rgba(13,71,255,.24)!important;
    overflow:hidden!important;
    position:relative!important;
  }

  .wao-desktop-panel-card:before{
    content:""!important;
    position:absolute!important;
    width:260px!important;
    height:260px!important;
    border-radius:50%!important;
    right:-90px!important;
    top:-90px!important;
    background:rgba(255,255,255,.16)!important;
  }

  .wao-desktop-panel-card:after{
    content:""!important;
    position:absolute!important;
    width:180px!important;
    height:180px!important;
    border-radius:50%!important;
    left:-70px!important;
    bottom:-70px!important;
    background:rgba(255,255,255,.11)!important;
  }

  .wao-desktop-panel-card > *{
    position:relative!important;
    z-index:1!important;
  }

  .wao-desktop-panel-logo{
    display:inline-flex!important;
    align-items:baseline!important;
    padding:8px 12px!important;
    border-radius:16px!important;
    background:rgba(255,255,255,.18)!important;
    border:1px solid rgba(255,255,255,.20)!important;
    margin-bottom:48px!important;
  }

  .wao-desktop-panel-logo strong{
    font-size:24px!important;
    letter-spacing:-1px!important;
  }

  .wao-desktop-panel-logo small{
    font-size:13px!important;
    margin-left:2px!important;
    color:#c6fff9!important;
    font-weight:1000!important;
  }

  .wao-desktop-panel-card h2{
    margin:0 0 10px!important;
    font-size:34px!important;
    letter-spacing:-1.2px!important;
    color:#fff!important;
  }

  .wao-desktop-panel-card p{
    margin:0 0 24px!important;
    color:rgba(255,255,255,.82)!important;
    line-height:1.55!important;
    font-size:15px!important;
  }

  .wao-desktop-stat-grid{
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:10px!important;
    margin:24px 0!important;
  }

  .wao-desktop-stat-grid div{
    padding:14px 10px!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.16)!important;
    border:1px solid rgba(255,255,255,.16)!important;
    text-align:center!important;
  }

  .wao-desktop-stat-grid strong{
    display:block!important;
    font-size:24px!important;
    color:#fff!important;
    line-height:1!important;
  }

  .wao-desktop-stat-grid span{
    display:block!important;
    margin-top:6px!important;
    color:rgba(255,255,255,.78)!important;
    font-weight:800!important;
    font-size:12px!important;
  }

  .wao-desktop-panel-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:12px!important;
    margin-top:28px!important;
  }

  .wao-desktop-panel-actions a{
    min-height:46px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:16px!important;
    background:#fff!important;
    color:#0D47FF!important;
    text-decoration:none!important;
    font-weight:1000!important;
  }

  .wao-home-fab{
    width:58px!important;
    height:58px!important;
    right:34px!important;
    bottom:34px!important;
    border-radius:20px!important;
  }

  .wao-home-bottom-nav{
    display:none!important;
  }
}

@media(min-width:821px) and (max-width:1100px){
  .wao-home-page{
    grid-template-columns:1fr!important;
  }

  .wao-home-desktop-panel{
    grid-column:1!important;
    grid-row:auto!important;
    position:static!important;
  }

  .wao-desktop-panel-card{
    min-height:260px!important;
  }
}


/* =========================================================
   WAOLINK DESKTOP INSTALL APP PWA - desktopinstallpwa20260809
   ========================================================= */

@media(min-width:821px){
  .wao-desktop-install-row{
    position:relative!important;
    z-index:2!important;
    margin:20px 0 8px!important;
    display:grid!important;
    gap:8px!important;
  }

  .wao-install-desktop-btn,
  .wao-install-desktop-float{
    min-height:48px!important;
    border:0!important;
    border-radius:16px!important;
    padding:0 18px!important;
    background:#fff!important;
    color:#0D47FF!important;
    font-weight:1000!important;
    cursor:pointer!important;
    box-shadow:0 14px 34px rgba(15,23,42,.14)!important;
  }

  .wao-install-desktop-btn:hover,
  .wao-install-desktop-float:hover{
    transform:translateY(-1px)!important;
  }

  .wao-install-desktop-help{
    color:rgba(255,255,255,.78)!important;
    font-size:12px!important;
    line-height:1.35!important;
    font-weight:700!important;
  }

  .wao-install-desktop-float{
    position:fixed!important;
    right:104px!important;
    bottom:38px!important;
    z-index:260!important;
    background:linear-gradient(135deg,#0D47FF,#00D4C4)!important;
    color:#fff!important;
  }
}

@media(max-width:820px){
  #waoInstallDesktopApp,
  #waoInstallDesktopHelp{
    display:none!important;
  }
}


/* =========================================================
   WAOLINK HIDE INSTALL BUTTON AFTER INSTALL + MOBILE PROTECT
   desktopinstallhide_mobileprotect_20260810
   ========================================================= */

body.wao-pwa-installed #waoInstallDesktopApp,
body.wao-pwa-installed #waoInstallDesktopHelp,
body.wao-mobile-client #waoInstallDesktopApp,
body.wao-mobile-client #waoInstallDesktopHelp {
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

@media (display-mode: standalone),
       (display-mode: fullscreen),
       (display-mode: minimal-ui),
       (display-mode: window-controls-overlay) {
  #waoInstallDesktopApp,
  #waoInstallDesktopHelp {
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
  }
}

@media(max-width:820px) {
  #waoInstallDesktopApp,
  #waoInstallDesktopHelp,
  .wao-desktop-install-row {
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
  }
}



/* =========================================================
   WAOLINK MOBILE TOP BAR + DESKTOP PANEL HIDE FIX
   mobiletopdesktoppanel_20260810
   ========================================================= */

html,
body {
  color-scheme: light!important;
}

@media(max-width:820px) {
  html,
  body {
    background:#eaf4ff!important;
    color-scheme:light!important;
  }

  /* Keep the WAOLINK logo clear of the phone status bar */
  .topbar {
    background:#fff!important;
    min-height:76px!important;
    height:76px!important;
    padding:18px 22px 10px!important;
    display:flex!important;
    align-items:center!important;
    border-bottom:1px solid #dbeafe!important;
    box-shadow:0 6px 18px rgba(15,23,42,.04)!important;
    z-index:90000!important;
  }

  .topbar .brand {
    align-items:center!important;
    min-width:0!important;
    overflow:visible!important;
  }

  .brand-logo-img {
    display:none!important;
  }

  .brand-word {
    display:flex!important;
    align-items:baseline!important;
    transform:none!important;
    opacity:1!important;
    filter:none!important;
  }

  .brand-word strong {
    font-size:25px!important;
    line-height:1!important;
    color:#0B49BA!important;
    letter-spacing:-1px!important;
  }

  .brand-word small {
    font-size:13px!important;
    line-height:1!important;
    color:#00B7C5!important;
    margin-left:2px!important;
  }

  /* Desktop Stay Connected panel is only for desktop */
  .wao-home-desktop-panel,
  .wao-desktop-panel-card,
  .wao-desktop-panel-logo,
  .wao-desktop-stat-grid,
  .wao-desktop-panel-actions,
  .wao-desktop-install-row {
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    height:0!important;
    min-height:0!important;
    max-height:0!important;
    overflow:hidden!important;
    margin:0!important;
    padding:0!important;
    pointer-events:none!important;
  }

  /* Keep the home list clean with enough space for bottom tabs */
  body:not(.wao-mobile-chat-open) .page {
    padding-top:18px!important;
    padding-bottom:112px!important;
  }

  .wao-home-page {
    display:block!important;
  }

  .wao-home-conversations {
    margin-bottom:10px!important;
  }

  .wao-home-fab {
    bottom:114px!important;
  }
}

/* Samsung/Android PWA fallback: cover the very top with the same light color */
@media(max-width:820px) and (display-mode: standalone) {
  body::before {
    content:""!important;
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    height:10px!important;
    background:#fff!important;
    z-index:89999!important;
    pointer-events:none!important;
  }
}


/* =========================================================
   WAOLINK MOBILE REAL STATUS BAR VISIBILITY FIX - mobilestatusvisible_20260810
   Makes Android/PWA status icons visible like WhatsApp.
   ========================================================= */
@media(max-width:820px) {
  html {
    background:#061A40!important;
  }

  body {
    background:#eaf4ff!important;
  }

  /* The real phone status icons are white in the installed app.
     This dark band gives them contrast without changing the dashboard. */
  .topbar {
    background:linear-gradient(to bottom, #061A40 0 34px, #ffffff 34px 100%)!important;
    border-bottom:1px solid #dbeafe!important;
    box-shadow:0 6px 18px rgba(15,23,42,.05)!important;
  }

  .topbar .brand,
  .wao-top-nav {
    transform:translateY(8px)!important;
  }

  /* Hide desktop-only panel on every mobile state. */
  .wao-home-desktop-panel,
  .wao-desktop-panel-card,
  .wao-desktop-panel-logo,
  .wao-desktop-stat-grid,
  .wao-desktop-panel-actions,
  .wao-desktop-install-row {
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    height:0!important;
    min-height:0!important;
    max-height:0!important;
    overflow:hidden!important;
    margin:0!important;
    padding:0!important;
    pointer-events:none!important;
  }

  body:not(.wao-mobile-chat-open) .page {
    padding-top:18px!important;
    padding-bottom:112px!important;
  }

  .wao-home-page {
    display:block!important;
  }
}

@media(max-width:820px) and (display-mode: standalone),
       (max-width:820px) and (display-mode: fullscreen),
       (max-width:820px) and (display-mode: minimal-ui),
       (max-width:820px) and (display-mode: window-controls-overlay) {
  .topbar {
    background:linear-gradient(to bottom, #061A40 0 36px, #ffffff 36px 100%)!important;
  }
}


/* =========================================================
   WAOLINK WHATSAPP-STYLE MOBILE CHAT HEADER - whatsappchatheader_20260810
   On mobile chat page: hide WAOLINK logo bar and move contact
   header into the same top position like WhatsApp.
   ========================================================= */

@media(max-width:820px){
  body.wao-mobile-chat-open{
    background:#061016!important;
    overflow:hidden!important;
  }

  body.wao-mobile-chat-open .topbar{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    height:0!important;
    min-height:0!important;
    max-height:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }

  body.wao-mobile-chat-open .page{
    padding:0!important;
    margin:0!important;
    width:100vw!important;
    max-width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    background:#eaf4ff!important;
    overflow:hidden!important;
  }

  body.wao-mobile-chat-open .chat{
    width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    min-height:100dvh!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    overflow:hidden!important;
    background:#eaf4ff!important;
  }

  body.wao-mobile-chat-open .mainchat{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    background:#eaf4ff!important;
    overflow:hidden!important;
    z-index:6000!important;
  }

  body.wao-mobile-chat-open .chathead{
    position:relative!important;
    top:auto!important;
    flex:0 0 96px!important;
    height:96px!important;
    min-height:96px!important;
    width:100%!important;
    padding:34px 10px 8px!important;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    background:#061016!important;
    color:#fff!important;
    border:0!important;
    border-bottom:1px solid rgba(255,255,255,.06)!important;
    box-shadow:none!important;
    overflow:visible!important;
    z-index:20000!important;
  }

  body.wao-mobile-chat-open .mobile-back-button{
    display:grid!important;
    place-items:center!important;
    width:38px!important;
    height:44px!important;
    min-width:38px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#fff!important;
    font-size:42px!important;
    font-weight:300!important;
    line-height:1!important;
    box-shadow:none!important;
  }

  body.wao-mobile-chat-open .chathead .avatar{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    border-radius:50%!important;
    border:0!important;
  }

  body.wao-mobile-chat-open .chathead > div:not(.chat-title-actions):not(.wao-chat-more-menu){
    min-width:0!important;
    flex:1 1 auto!important;
  }

  body.wao-mobile-chat-open .chathead strong{
    display:block!important;
    color:#fff!important;
    font-size:20px!important;
    line-height:1.12!important;
    font-weight:800!important;
    letter-spacing:-.2px!important;
    max-width:calc(100vw - 226px)!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }

  body.wao-mobile-chat-open .chathead .meta,
  body.wao-mobile-chat-open .typing-indicator{
    color:rgba(255,255,255,.72)!important;
    font-size:13px!important;
    line-height:1.2!important;
    font-weight:500!important;
    max-width:calc(100vw - 226px)!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }

  body.wao-mobile-chat-open .chat-title-actions{
    margin-left:auto!important;
    flex:0 0 auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:12px!important;
    width:auto!important;
    max-width:none!important;
    overflow:visible!important;
  }

  /* Show only video + phone in the header. Put everything else inside the three-dot menu. */
  body.wao-mobile-chat-open .chat-title-actions .wao-header-action{
    display:none!important;
  }

  body.wao-mobile-chat-open .chat-title-actions .video-call-link,
  body.wao-mobile-chat-open .chat-title-actions .voice-call-link{
    display:grid!important;
    place-items:center!important;
    width:34px!important;
    height:40px!important;
    min-width:34px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#fff!important;
    box-shadow:none!important;
    opacity:1!important;
    visibility:visible!important;
  }

  body.wao-mobile-chat-open .chat-title-actions .video-call-link .wao-header-action-icon,
  body.wao-mobile-chat-open .chat-title-actions .voice-call-link .wao-header-action-icon{
    display:block!important;
    color:#fff!important;
    font-size:24px!important;
    line-height:1!important;
    filter:grayscale(1) brightness(2.2)!important;
  }

  body.wao-mobile-chat-open .wao-header-action-text,
  body.wao-mobile-chat-open .wao-header-count{
    display:none!important;
  }

  body.wao-mobile-chat-open #searchToggle{
    display:none!important;
  }

  body.wao-mobile-chat-open .chat-header-more{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    width:28px!important;
    height:40px!important;
    min-width:28px!important;
    padding:0!important;
    margin-left:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#fff!important;
    z-index:22000!important;
  }

  body.wao-mobile-chat-open .chat-header-more span{
    width:5px!important;
    height:5px!important;
    border-radius:50%!important;
    background:#fff!important;
    display:block!important;
  }

  body.wao-mobile-chat-open .wao-chat-more-menu[hidden]{
    display:none!important;
  }

  body.wao-mobile-chat-open .wao-chat-more-menu.open{
    position:absolute!important;
    top:82px!important;
    right:8px!important;
    width:210px!important;
    display:grid!important;
    gap:2px!important;
    padding:8px!important;
    border-radius:14px!important;
    background:#fff!important;
    border:1px solid rgba(148,163,184,.18)!important;
    box-shadow:0 22px 60px rgba(0,0,0,.28)!important;
    z-index:25000!important;
  }

  body.wao-mobile-chat-open .wao-chat-more-menu a,
  body.wao-mobile-chat-open .wao-chat-more-menu button{
    width:100%!important;
    min-height:40px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    padding:0 12px!important;
    border:0!important;
    border-radius:10px!important;
    background:transparent!important;
    color:#0f172a!important;
    text-align:left!important;
    font-size:14px!important;
    font-weight:800!important;
    text-decoration:none!important;
    box-shadow:none!important;
  }

  body.wao-mobile-chat-open .wao-chat-more-menu a:active,
  body.wao-mobile-chat-open .wao-chat-more-menu button:active{
    background:#eef4ff!important;
  }

  body.wao-mobile-chat-open .messages{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow-y:auto!important;
    background:#eaf4ff!important;
    padding-top:12px!important;
  }

  body.wao-mobile-chat-open .compose{
    flex:0 0 var(--wao-compose-h, 76px)!important;
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    width:100%!important;
    margin:0!important;
    z-index:18000!important;
  }
}

@media(max-width:820px) and (display-mode: standalone),
       (max-width:820px) and (display-mode: fullscreen),
       (max-width:820px) and (display-mode: minimal-ui),
       (max-width:820px) and (display-mode: window-controls-overlay){
  body.wao-mobile-chat-open .chathead{
    padding-top:36px!important;
    min-height:98px!important;
    height:98px!important;
    flex-basis:98px!important;
  }
}

/* Voice call page */
.wao-voice-call-page .wao-voice-call-avatar{
  min-height:330px;
  display:grid;
  place-items:center;
  gap:10px;
  text-align:center;
  color:#fff;
}

.wao-voice-pulse{
  width:120px;
  height:120px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.20);
  font-size:46px;
  animation:waoVoicePulse 1.8s ease-in-out infinite;
}

.wao-voice-call-avatar strong{
  font-size:26px;
  color:#fff;
}

.wao-voice-call-avatar span{
  color:rgba(255,255,255,.72);
  font-weight:700;
}

@keyframes waoVoicePulse{
  0%,100%{transform:scale(1); box-shadow:0 0 0 0 rgba(255,255,255,.22);}
  50%{transform:scale(1.04); box-shadow:0 0 0 18px rgba(255,255,255,0);}
}


/* =========================================================
   WAOLINK MOBILE CHAT HEADER AMENDMENT - mobilechatheaderamend_20260810
   Fixes dashboard top dots, clearer call/video icons and composer lift.
   ========================================================= */

/* 1) Dashboard top three-dot menu: make clickable and move down into the white bar */
@media(max-width:820px){
  body:not(.wao-mobile-chat-open) .topbar{
    overflow:visible!important;
    z-index:90000!important;
  }

  body:not(.wao-mobile-chat-open) .wao-top-nav,
  body:not(.wao-mobile-chat-open) .wao-top-menu-wrap{
    overflow:visible!important;
    position:relative!important;
    z-index:92000!important;
    transform:translateY(12px)!important;
  }

  body:not(.wao-mobile-chat-open) #waoTopMenuButton,
  body:not(.wao-mobile-chat-open) .wao-top-menu-button{
    pointer-events:auto!important;
    position:relative!important;
    z-index:93000!important;
    touch-action:manipulation!important;
  }

  body:not(.wao-mobile-chat-open) .wao-top-menu-dropdown{
    position:fixed!important;
    top:76px!important;
    right:14px!important;
    width:min(280px, calc(100vw - 28px))!important;
    max-height:calc(100dvh - 96px)!important;
    overflow-y:auto!important;
    z-index:94000!important;
    border-radius:20px!important;
    background:#fff!important;
    box-shadow:0 22px 60px rgba(15,23,42,.22)!important;
  }

  body:not(.wao-mobile-chat-open) .wao-top-menu-dropdown[hidden]{
    display:none!important;
  }

  body:not(.wao-mobile-chat-open) .wao-top-menu-dropdown.open{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }
}

/* 2) Mobile chat header: use clear line icons, not solid white emoji blobs */
@media(max-width:820px){
  body.wao-mobile-chat-open .chat-title-actions .video-call-link .wao-header-action-icon,
  body.wao-mobile-chat-open .chat-title-actions .voice-call-link .wao-header-action-icon{
    position:relative!important;
    display:block!important;
    width:25px!important;
    height:25px!important;
    font-size:0!important;
    color:#fff!important;
    filter:none!important;
  }

  /* simple video camera outline icon */
  body.wao-mobile-chat-open .wao-video-line-icon::before{
    content:""!important;
    position:absolute!important;
    left:2px!important;
    top:6px!important;
    width:15px!important;
    height:12px!important;
    border:3px solid #fff!important;
    border-radius:3px!important;
    background:transparent!important;
    box-sizing:border-box!important;
  }

  body.wao-mobile-chat-open .wao-video-line-icon::after{
    content:""!important;
    position:absolute!important;
    right:1px!important;
    top:7px!important;
    width:0!important;
    height:0!important;
    border-top:6px solid transparent!important;
    border-bottom:6px solid transparent!important;
    border-left:8px solid #fff!important;
  }

  /* simple phone receiver outline icon */
  body.wao-mobile-chat-open .wao-phone-line-icon::before{
    content:""!important;
    position:absolute!important;
    left:3px!important;
    top:3px!important;
    width:17px!important;
    height:17px!important;
    border:3px solid #fff!important;
    border-top-color:transparent!important;
    border-right-color:transparent!important;
    border-radius:0 0 0 16px!important;
    transform:rotate(-35deg)!important;
    box-sizing:border-box!important;
  }

  body.wao-mobile-chat-open .wao-phone-line-icon::after{
    content:""!important;
    position:absolute!important;
    right:2px!important;
    top:2px!important;
    width:7px!important;
    height:4px!important;
    border-radius:3px!important;
    background:#fff!important;
    transform:rotate(-35deg)!important;
    box-shadow:-13px 15px 0 #fff!important;
  }
}

/* 3) Composer lift: keep text box above Android navigation bar again */
@media(max-width:820px){
  :root{
    --wao-compose-h:78px!important;
    --wao-android-nav-gap:84px!important;
  }

  body.wao-mobile-chat-open .compose{
    flex:0 0 calc(var(--wao-compose-h, 78px) + env(safe-area-inset-bottom,0px))!important;
    min-height:calc(var(--wao-compose-h, 78px) + env(safe-area-inset-bottom,0px))!important;
    padding:10px 10px calc(14px + env(safe-area-inset-bottom,0px))!important;
    background:#fff!important;
    border-top:1px solid #dbeafe!important;
    transform:translateY(-14px)!important;
    margin-bottom:14px!important;
    z-index:22000!important;
  }

  body.wao-mobile-chat-open .messages{
    padding-bottom:calc(var(--wao-compose-h, 78px) + 26px + env(safe-area-inset-bottom,0px))!important;
  }
}

@media(max-width:820px) and (display-mode: standalone),
       (max-width:820px) and (display-mode: fullscreen),
       (max-width:820px) and (display-mode: minimal-ui),
       (max-width:820px) and (display-mode: window-controls-overlay){
  body.wao-mobile-chat-open .compose{
    transform:translateY(-18px)!important;
    margin-bottom:18px!important;
    padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))!important;
  }
}


/* =========================================================
   WAOLINK FINAL MOBILE CHAT ICONS / BACK / TOP DOTS FIX
   mobilechaticonsbacktopdots_20260810
   ========================================================= */

/* A) Dashboard 3-dot button: pull it back up so it sits fully inside the white top bar */
@media(max-width:820px){
  body:not(.wao-mobile-chat-open) .wao-top-nav,
  body:not(.wao-mobile-chat-open) .wao-top-menu-wrap{
    transform:translateY(0px)!important;
    overflow:visible!important;
    position:relative!important;
    z-index:92000!important;
  }

  body:not(.wao-mobile-chat-open) #waoTopMenuButton,
  body:not(.wao-mobile-chat-open) .wao-top-menu-button{
    transform:translateY(0px)!important;
    margin-top:0!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
    z-index:93000!important;
  }

  body:not(.wao-mobile-chat-open) .wao-top-menu-dropdown{
    top:66px!important;
    right:12px!important;
    z-index:94000!important;
  }
}

/* B) Chat header icons: remove the solid white circular background and draw clean line icons */
@media(max-width:820px){
  body.wao-mobile-chat-open .chat-title-actions .video-call-link,
  body.wao-mobile-chat-open .chat-title-actions .voice-call-link{
    display:grid!important;
    place-items:center!important;
    width:34px!important;
    height:40px!important;
    min-width:34px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    background-color:transparent!important;
    box-shadow:none!important;
    outline:0!important;
    opacity:1!important;
    visibility:visible!important;
  }

  body.wao-mobile-chat-open .chat-title-actions .video-call-link::before,
  body.wao-mobile-chat-open .chat-title-actions .voice-call-link::before,
  body.wao-mobile-chat-open .chat-title-actions .video-call-link::after,
  body.wao-mobile-chat-open .chat-title-actions .voice-call-link::after{
    display:none!important;
    content:none!important;
  }

  body.wao-mobile-chat-open .chat-title-actions .video-call-link .wao-header-action-icon,
  body.wao-mobile-chat-open .chat-title-actions .voice-call-link .wao-header-action-icon{
    position:relative!important;
    display:block!important;
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    font-size:0!important;
    line-height:0!important;
    color:#fff!important;
    background:transparent!important;
    background-color:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    filter:none!important;
    overflow:visible!important;
  }

  body.wao-mobile-chat-open .wao-video-line-icon::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:2px!important;
    top:7px!important;
    width:16px!important;
    height:12px!important;
    border:3px solid #fff!important;
    border-radius:3px!important;
    background:transparent!important;
    box-sizing:border-box!important;
  }

  body.wao-mobile-chat-open .wao-video-line-icon::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:18px!important;
    top:8px!important;
    width:8px!important;
    height:10px!important;
    background:transparent!important;
    clip-path:polygon(0 25%,100% 0,100% 100%,0 75%)!important;
    border:3px solid #fff!important;
    border-left:0!important;
    border-radius:1px!important;
    box-sizing:border-box!important;
  }

  body.wao-mobile-chat-open .wao-phone-line-icon::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:5px!important;
    top:4px!important;
    width:17px!important;
    height:20px!important;
    border:3px solid #fff!important;
    border-top:0!important;
    border-right:0!important;
    border-radius:0 0 0 15px!important;
    background:transparent!important;
    transform:rotate(-38deg)!important;
    box-sizing:border-box!important;
  }

  body.wao-mobile-chat-open .wao-phone-line-icon::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:17px!important;
    top:2px!important;
    width:8px!important;
    height:5px!important;
    background:#fff!important;
    border-radius:3px!important;
    transform:rotate(-38deg)!important;
    box-shadow:-15px 17px 0 #fff!important;
  }
}

/* C) Back arrow: make the tappable link sit on top and behave like a normal WhatsApp back arrow */
@media(max-width:820px){
  body.wao-mobile-chat-open .mobile-back-button{
    display:grid!important;
    place-items:center!important;
    width:42px!important;
    height:48px!important;
    min-width:42px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#fff!important;
    font-size:44px!important;
    font-weight:300!important;
    line-height:1!important;
    text-decoration:none!important;
    box-shadow:none!important;
    cursor:pointer!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
    position:relative!important;
    z-index:26000!important;
  }
}


/* =========================================================
   WAOLINK FINAL TOP DOTS CENTER + SIMPLE PHONE ICON
   topdotsphoneicon_final2_20260810
   ========================================================= */

/* Dashboard: keep the top three-dot button centred inside the white bar */
@media(max-width:820px){
  body:not(.wao-mobile-chat-open) .topbar{
    overflow:visible!important;
    z-index:90000!important;
  }

  body:not(.wao-mobile-chat-open) .wao-top-nav{
    overflow:visible!important;
    position:relative!important;
    z-index:92000!important;
    align-items:center!important;
  }

  body:not(.wao-mobile-chat-open) .wao-top-menu-wrap{
    overflow:visible!important;
    position:relative!important;
    z-index:92000!important;
    transform:translateY(7px)!important;
  }

  body:not(.wao-mobile-chat-open) #waoTopMenuButton,
  body:not(.wao-mobile-chat-open) .wao-top-menu-button{
    transform:none!important;
    margin-top:0!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
    z-index:93000!important;
  }

  body:not(.wao-mobile-chat-open) .wao-top-menu-dropdown{
    top:78px!important;
    right:12px!important;
    z-index:94000!important;
  }
}

/* Mobile chat header: replace the ugly phone drawing with a simple phone handset icon */
@media(max-width:820px){
  body.wao-mobile-chat-open .chat-title-actions .voice-call-link{
    display:grid!important;
    place-items:center!important;
    width:34px!important;
    height:40px!important;
    min-width:34px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    background-color:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  body.wao-mobile-chat-open .chat-title-actions .voice-call-link .wao-header-action-icon,
  body.wao-mobile-chat-open .chat-title-actions .voice-call-link .wao-phone-line-icon,
  body.wao-mobile-chat-open .wao-phone-line-icon::before,
  body.wao-mobile-chat-open .wao-phone-line-icon::after{
    display:none!important;
    content:none!important;
    background:none!important;
    box-shadow:none!important;
    border:0!important;
  }

  body.wao-mobile-chat-open .chat-title-actions .voice-call-link::before{
    content:""!important;
    display:block!important;
    width:27px!important;
    height:27px!important;
    background:#fff!important;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1C10.61 21 3 13.39 3 4c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.24.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center/contain no-repeat!important;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1C10.61 21 3 13.39 3 4c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.24.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center/contain no-repeat!important;
    transform:none!important;
    border:0!important;
    box-shadow:none!important;
    border-radius:0!important;
  }

  body.wao-mobile-chat-open .chat-title-actions .voice-call-link::after{
    display:none!important;
    content:none!important;
  }
}


/* =========================================================
   WAOLINK DASHBOARD TOP DOTS WHITE BAR HEIGHT FIX
   topdots_whitebar_height_20260810
   ========================================================= */

/* Dashboard only: increase the white bar height and centre the 3-dot button inside it */
@media(max-width:820px){
  body:not(.wao-mobile-chat-open) .topbar{
    height:88px!important;
    min-height:88px!important;
    max-height:88px!important;
    padding:10px 26px 12px!important;
    display:flex!important;
    align-items:center!important;
    overflow:visible!important;
    position:relative!important;
    z-index:90000!important;
    background:#fff!important;
    border-bottom:1px solid #dbeafe!important;
  }

  body:not(.wao-mobile-chat-open) .topbar .brand{
    align-self:center!important;
    transform:none!important;
    margin:0!important;
  }

  body:not(.wao-mobile-chat-open) .wao-top-nav{
    margin-left:auto!important;
    height:100%!important;
    min-height:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    position:relative!important;
    overflow:visible!important;
    z-index:92000!important;
  }

  body:not(.wao-mobile-chat-open) .wao-top-menu-wrap{
    position:relative!important;
    right:auto!important;
    top:auto!important;
    transform:none!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    height:100%!important;
    overflow:visible!important;
    z-index:93000!important;
  }

  body:not(.wao-mobile-chat-open) #waoTopMenuButton,
  body:not(.wao-mobile-chat-open) .wao-top-menu-button{
    width:54px!important;
    height:54px!important;
    min-width:54px!important;
    min-height:54px!important;
    margin:0!important;
    transform:none!important;
    position:relative!important;
    top:auto!important;
    right:auto!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
    z-index:94000!important;
  }

  body:not(.wao-mobile-chat-open) .wao-top-menu-dropdown{
    position:fixed!important;
    top:92px!important;
    right:14px!important;
    z-index:95000!important;
  }
}


/* =========================================================
   WAOLINK RESTORE MOBILE STATUS BAR + TOPBAR
   restore_mobile_status_topbar_20260810
   This reverses the too-tall white bar and restores the dark
   phone-status area above it.
   ========================================================= */

@media(max-width:820px){
  /* Dashboard/mobile home only */
  body:not(.wao-mobile-chat-open){
    background:#eaf4ff!important;
  }

  /* Create the dark strip at the very top so Android time/battery icons are visible */
  body:not(.wao-mobile-chat-open)::before{
    content:""!important;
    position:fixed!important;
    left:0!important;
    right:0!important;
    top:0!important;
    height:30px!important;
    background:#061016!important;
    z-index:89999!important;
    pointer-events:none!important;
  }

  /* White app bar starts below the phone status strip */
  body:not(.wao-mobile-chat-open) .topbar{
    position:relative!important;
    height:76px!important;
    min-height:76px!important;
    max-height:76px!important;
    padding:0 26px!important;
    margin-top:30px!important;
    display:flex!important;
    align-items:center!important;
    background:#fff!important;
    border-bottom:1px solid #dbeafe!important;
    overflow:visible!important;
    z-index:90000!important;
  }

  body:not(.wao-mobile-chat-open) .topbar .brand{
    align-self:center!important;
    display:flex!important;
    align-items:center!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
  }

  body:not(.wao-mobile-chat-open) .brand-logo-img{
    width:0!important;
    height:0!important;
    display:none!important;
  }

  body:not(.wao-mobile-chat-open) .brand-word strong{
    font-size:30px!important;
    line-height:1!important;
  }

  body:not(.wao-mobile-chat-open) .brand-word small{
    font-size:16px!important;
    line-height:1!important;
  }

  body:not(.wao-mobile-chat-open) .wao-top-nav{
    margin-left:auto!important;
    height:76px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    position:relative!important;
    overflow:visible!important;
    z-index:92000!important;
  }

  body:not(.wao-mobile-chat-open) .wao-top-menu-wrap{
    height:76px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    position:relative!important;
    overflow:visible!important;
    z-index:93000!important;
  }

  body:not(.wao-mobile-chat-open) #waoTopMenuButton,
  body:not(.wao-mobile-chat-open) .wao-top-menu-button{
    width:52px!important;
    height:52px!important;
    min-width:52px!important;
    min-height:52px!important;
    margin:0!important;
    padding:0!important;
    top:auto!important;
    right:auto!important;
    transform:none!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
    z-index:94000!important;
  }

  body:not(.wao-mobile-chat-open) .wao-top-menu-dropdown{
    position:fixed!important;
    top:112px!important;
    right:14px!important;
    width:min(280px, calc(100vw - 28px))!important;
    max-height:calc(100dvh - 130px)!important;
    overflow-y:auto!important;
    z-index:95000!important;
    border-radius:20px!important;
    background:#fff!important;
    box-shadow:0 22px 60px rgba(15,23,42,.22)!important;
  }

  body:not(.wao-mobile-chat-open) .wao-top-menu-dropdown[hidden]{
    display:none!important;
  }

  body:not(.wao-mobile-chat-open) .wao-top-menu-dropdown.open{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }

  /* Pull page content back to the correct place after topbar restoration */
  body:not(.wao-mobile-chat-open) .page{
    padding-top:28px!important;
  }
}


/* =========================================================
   WAOLINK VOICE RECORDING BAR FULL VISIBILITY FIX
   recordingbarfull_20260810
   ========================================================= */

/* Mobile chat only: show the voice recording strip fully above the text box */
@media(max-width:820px){
  body.wao-mobile-chat-open #recordingBar.recording-bar:not([hidden]){
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:calc(104px + env(safe-area-inset-bottom,0px))!important;
    min-height:54px!important;
    height:auto!important;
    padding:9px 12px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    flex-wrap:nowrap!important;
    background:rgba(255,255,255,.98)!important;
    border-top:1px solid #dbeafe!important;
    border-bottom:1px solid #dbeafe!important;
    box-shadow:0 -8px 28px rgba(15,23,42,.10)!important;
    z-index:28000!important;
    transform:none!important;
    overflow:visible!important;
    white-space:nowrap!important;
    color:#b91c1c!important;
    font-size:15px!important;
    line-height:1.2!important;
  }

  body.wao-mobile-chat-open #recordingBar .record-dot{
    width:10px!important;
    height:10px!important;
    min-width:10px!important;
    flex:0 0 10px!important;
  }

  body.wao-mobile-chat-open #recordingBar strong{
    display:inline-block!important;
    max-width:44vw!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:15px!important;
    line-height:1.2!important;
    margin:0!important;
  }

  body.wao-mobile-chat-open #recordingTime{
    display:inline-block!important;
    min-width:48px!important;
    color:#b91c1c!important;
    font-size:15px!important;
    font-weight:800!important;
    line-height:1.2!important;
  }

  body.wao-mobile-chat-open .btn-stop-record,
  body.wao-mobile-chat-open .btn-cancel-record{
    min-height:34px!important;
    height:34px!important;
    padding:0 14px!important;
    border:0!important;
    border-radius:13px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:14px!important;
    font-weight:1000!important;
    line-height:1!important;
    flex:0 0 auto!important;
    margin:0!important;
  }

  body.wao-mobile-chat-open .btn-stop-record{
    background:#dc2626!important;
    color:#fff!important;
  }

  body.wao-mobile-chat-open .btn-cancel-record{
    background:#e5e7eb!important;
    color:#334155!important;
  }

  /* Keep composer clearly below the recording bar */
  body.wao-mobile-chat-open .compose{
    z-index:27000!important;
  }

  /* Give message list a little more space while recording */
  body.wao-mobile-chat-open .messages{
    padding-bottom:calc(var(--wao-compose-h, 78px) + 92px + env(safe-area-inset-bottom,0px))!important;
  }
}

@media(max-width:380px){
  body.wao-mobile-chat-open #recordingBar.recording-bar:not([hidden]){
    gap:7px!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }

  body.wao-mobile-chat-open #recordingBar strong{
    max-width:34vw!important;
    font-size:14px!important;
  }

  body.wao-mobile-chat-open .btn-stop-record,
  body.wao-mobile-chat-open .btn-cancel-record{
    padding:0 10px!important;
    font-size:13px!important;
  }
}


/* =========================================================
   WAOLINK MOBILE COMPOSER GAP + HEIGHT FIX
   composer_gap_height_fix_20260810
   Reduces the awkward empty gap above the text box and makes
   the bottom composer section slimmer.
   ========================================================= */

@media(max-width:820px){
  /* Normal chat screen: remove the excessive reserved space under the last message */
  body.wao-mobile-chat-open .messages{
    padding-bottom:14px!important;
  }

  /* Only add extra space while the voice recording bar is actually open */
  body.wao-mobile-chat-open.wao-recording-active .messages{
    padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))!important;
  }

  body.wao-mobile-chat-open #recordingBar.recording-bar[hidden]{
    display:none!important;
  }

  /* Make the bottom message section slimmer and cleaner */
  body.wao-mobile-chat-open .compose{
    flex:0 0 70px!important;
    min-height:70px!important;
    height:70px!important;
    padding:8px 10px 8px!important;
    margin:0!important;
    transform:none!important;
    background:#fff!important;
    border-top:1px solid #dbeafe!important;
    box-shadow:0 -6px 22px rgba(15,23,42,.06)!important;
    z-index:27000!important;
  }

  body.wao-mobile-chat-open .compose-tool{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    flex:0 0 44px!important;
    font-size:24px!important;
  }

  body.wao-mobile-chat-open .compose-tool.microphone{
    font-size:18px!important;
  }

  body.wao-mobile-chat-open .compose input#body,
  body.wao-mobile-chat-open #body{
    min-height:48px!important;
    height:48px!important;
    padding:0 18px!important;
    border-radius:24px!important;
    font-size:17px!important;
  }

  body.wao-mobile-chat-open #sendButton{
    min-height:48px!important;
    height:48px!important;
    min-width:72px!important;
    padding:0 18px!important;
    border-radius:20px!important;
    font-size:16px!important;
  }

  /* Voice recording bar sits just above the slimmer composer */
  body.wao-mobile-chat-open #recordingBar.recording-bar:not([hidden]){
    bottom:calc(70px + env(safe-area-inset-bottom,0px))!important;
    min-height:50px!important;
    padding:8px 10px!important;
  }
}

/* Installed/mobile app: keep it above Android navigation but not too tall */
@media(max-width:820px) and (display-mode: standalone),
       (max-width:820px) and (display-mode: fullscreen),
       (max-width:820px) and (display-mode: minimal-ui),
       (max-width:820px) and (display-mode: window-controls-overlay){
  body.wao-mobile-chat-open .compose{
    height:72px!important;
    min-height:72px!important;
    flex-basis:72px!important;
    padding-bottom:10px!important;
  }

  body.wao-mobile-chat-open #recordingBar.recording-bar:not([hidden]){
    bottom:calc(72px + env(safe-area-inset-bottom,0px))!important;
  }
}


/* =========================================================
   WAOLINK COMPOSER ABOVE ANDROID NAVIGATION FIX
   composer_above_nav_fix_20260810
   Keeps the message box above Android navigation without adding
   the large awkward gap above the composer.
   ========================================================= */

@media(max-width:820px){
  :root{
    --wao-mobile-nav-reserve:72px!important;
    --wao-compose-h:66px!important;
  }

  /* Reserve space for Android navigation at the bottom of the fixed chat screen */
  body.wao-mobile-chat-open .mainchat{
    box-sizing:border-box!important;
    padding-bottom:var(--wao-mobile-nav-reserve)!important;
  }

  /* Keep the message list tight; no big empty gap under the final message */
  body.wao-mobile-chat-open .messages{
    padding-bottom:10px!important;
  }

  body.wao-mobile-chat-open.wao-recording-active .messages{
    padding-bottom:62px!important;
  }

  /* Slim composer, now naturally sitting above the reserved Android nav space */
  body.wao-mobile-chat-open .compose{
    position:relative!important;
    flex:0 0 var(--wao-compose-h)!important;
    height:var(--wao-compose-h)!important;
    min-height:var(--wao-compose-h)!important;
    max-height:var(--wao-compose-h)!important;
    padding:7px 10px!important;
    margin:0!important;
    transform:none!important;
    background:#fff!important;
    border-top:1px solid #dbeafe!important;
    box-shadow:0 -6px 18px rgba(15,23,42,.05)!important;
    z-index:27000!important;
  }

  body.wao-mobile-chat-open .compose-tool{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    flex:0 0 42px!important;
    font-size:24px!important;
  }

  body.wao-mobile-chat-open .compose-tool.microphone{
    font-size:18px!important;
  }

  body.wao-mobile-chat-open .compose input#body,
  body.wao-mobile-chat-open #body{
    min-height:46px!important;
    height:46px!important;
    padding:0 17px!important;
    border-radius:23px!important;
    font-size:16px!important;
  }

  body.wao-mobile-chat-open #sendButton{
    min-height:46px!important;
    height:46px!important;
    min-width:70px!important;
    padding:0 16px!important;
    border-radius:19px!important;
    font-size:16px!important;
  }

  /* Recording strip appears above the composer and above Android navigation */
  body.wao-mobile-chat-open #recordingBar.recording-bar:not([hidden]){
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:calc(var(--wao-mobile-nav-reserve) + var(--wao-compose-h))!important;
    min-height:50px!important;
    padding:8px 10px!important;
    z-index:28000!important;
  }
}

@media(max-width:820px) and (display-mode: standalone),
       (max-width:820px) and (display-mode: fullscreen),
       (max-width:820px) and (display-mode: minimal-ui),
       (max-width:820px) and (display-mode: window-controls-overlay){
  :root{
    --wao-mobile-nav-reserve:76px!important;
    --wao-compose-h:66px!important;
  }
}


/* =========================================================
   WAOLINK RESTORE CALLS + REAL VOICE TRANSLATION
   restore_calls_translation_oldschema_20260810
   ========================================================= */

.wao-incoming-call-modal{
  position:fixed!important;
  inset:0!important;
  z-index:999999!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:18px!important;
  background:rgba(2,6,23,.62)!important;
  backdrop-filter:blur(8px)!important;
}

.wao-incoming-call-card{
  width:min(380px, calc(100vw - 32px))!important;
  border-radius:28px!important;
  background:#fff!important;
  padding:24px 20px!important;
  text-align:center!important;
  box-shadow:0 28px 80px rgba(0,0,0,.28)!important;
}

.wao-incoming-call-pulse{
  width:78px!important;
  height:78px!important;
  margin:0 auto 14px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(135deg,#0D47FF,#00D4C4)!important;
  color:#fff!important;
  font-size:34px!important;
  animation:waoCallPulse 1.7s ease-in-out infinite!important;
}

.wao-incoming-call-title{
  font-weight:1000!important;
  color:#061a40!important;
  font-size:24px!important;
  margin-bottom:4px!important;
}

.wao-incoming-call-name{
  color:#64748b!important;
  font-weight:800!important;
  margin-bottom:18px!important;
}

.wao-incoming-call-actions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
}

.wao-incoming-call-actions a,
.wao-incoming-call-actions button{
  min-height:48px!important;
  border:0!important;
  border-radius:999px!important;
  font-weight:1000!important;
  text-decoration:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.wao-call-decline{
  background:#fee2e2!important;
  color:#991b1b!important;
}

.wao-call-accept{
  background:linear-gradient(135deg,#16a34a,#22c55e)!important;
  color:#fff!important;
}

@keyframes waoCallPulse{
  0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(13,71,255,.30); }
  50%{ transform:scale(1.04); box-shadow:0 0 0 18px rgba(13,71,255,0); }
}

.wao-live-call-page{
  width:min(900px,100%)!important;
  margin:0 auto!important;
}

.wao-live-call-card{
  min-height:calc(100dvh - 120px)!important;
  border-radius:30px!important;
  padding:18px!important;
  background:#061016!important;
  color:#fff!important;
  box-shadow:0 28px 80px rgba(15,23,42,.30)!important;
}

.wao-live-call-top{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  margin-bottom:14px!important;
}

.wao-live-call-back{
  width:44px!important;
  height:44px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  background:rgba(255,255,255,.10)!important;
  color:#fff!important;
  text-decoration:none!important;
  font-size:34px!important;
}

.wao-live-call-top h1{
  margin:0!important;
  color:#fff!important;
  font-size:28px!important;
}

.wao-live-call-top p{
  margin:2px 0 0!important;
  color:rgba(255,255,255,.72)!important;
  font-weight:800!important;
}

.wao-live-call-stage{
  position:relative!important;
  min-height:420px!important;
  border-radius:26px!important;
  overflow:hidden!important;
  background:#0f172a!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(255,255,255,.12)!important;
}

.wao-live-call-stage video#remoteVideo{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

.wao-live-call-stage.audio-only video#remoteVideo{
  display:none!important;
}

#localVideo{
  position:absolute!important;
  right:14px!important;
  bottom:14px!important;
  width:150px!important;
  height:200px!important;
  border-radius:18px!important;
  object-fit:cover!important;
  border:2px solid rgba(255,255,255,.72)!important;
  box-shadow:0 12px 40px rgba(0,0,0,.35)!important;
}

.wao-live-call-placeholder{
  position:absolute!important;
  inset:0!important;
  display:grid!important;
  place-items:center!important;
  align-content:center!important;
  gap:8px!important;
  text-align:center!important;
  padding:24px!important;
  background:linear-gradient(145deg,rgba(6,16,22,.92),rgba(13,71,255,.45))!important;
}

.wao-live-call-placeholder[hidden]{
  display:none!important;
}

.wao-live-call-placeholder span{
  font-size:54px!important;
}

.wao-live-call-placeholder strong{
  color:#fff!important;
  font-size:26px!important;
}

.wao-live-call-placeholder small{
  color:rgba(255,255,255,.78)!important;
}

.wao-live-call-actions{
  display:flex!important;
  justify-content:center!important;
  gap:12px!important;
  margin-top:16px!important;
}

.wao-live-call-actions button,
.wao-live-call-actions a{
  min-height:52px!important;
  padding:0 22px!important;
  border:0!important;
  border-radius:999px!important;
  font-weight:1000!important;
  text-decoration:none!important;
}

#startCallButton{
  background:#22c55e!important;
  color:#fff!important;
}

#endCallButton,
.wao-live-call-end{
  background:#dc2626!important;
  color:#fff!important;
}

.wao-translate-action{
  color:#0D47FF!important;
}

@media(max-width:820px){
  .wao-live-call-card{
    min-height:100dvh!important;
    border-radius:0!important;
    margin:0!important;
  }

  .wao-live-call-stage{
    min-height:calc(100dvh - 160px)!important;
    border-radius:20px!important;
  }

  #localVideo{
    width:104px!important;
    height:138px!important;
  }
}


/* =========================================================
   WAOLINK CALL UI + BACK BUTTON FIX - call_ui_backfix_20260810
   ========================================================= */

.wao-call-note{
  display:none!important;
}

.wao-live-call-actions{
  margin-top:18px!important;
  margin-bottom:0!important;
}

.wao-live-call-actions .btn,
.wao-live-call-actions button,
.wao-live-call-actions a{
  cursor:pointer!important;
}

@media(max-width:820px){
  body:has(.wao-live-call-page) .topbar{
    display:none!important;
  }

  .wao-live-call-page{
    width:100vw!important;
    min-height:100dvh!important;
    margin:0!important;
    background:#061016!important;
  }

  .wao-live-call-card{
    min-height:100dvh!important;
    padding:28px 14px 88px!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:#061016!important;
  }

  .wao-live-call-top{
    display:none!important;
  }

  .wao-live-call-stage{
    min-height:calc(100dvh - 178px)!important;
    border-radius:24px!important;
    border:1px solid rgba(255,255,255,.10)!important;
    background:radial-gradient(circle at 50% 32%, rgba(13,71,255,.34), rgba(6,16,22,.95) 58%)!important;
    box-shadow:0 18px 45px rgba(0,0,0,.28)!important;
  }

  .wao-live-call-placeholder{
    background:linear-gradient(145deg, rgba(6,16,22,.86), rgba(13,71,255,.28))!important;
  }

  .wao-live-call-placeholder span{
    font-size:44px!important;
  }

  .wao-live-call-placeholder strong{
    font-size:28px!important;
  }

  .wao-live-call-placeholder small{
    font-size:16px!important;
  }

  #localVideo{
    width:112px!important;
    height:144px!important;
    right:20px!important;
    bottom:20px!important;
    border-radius:22px!important;
  }

  .wao-live-call-actions{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:calc(18px + env(safe-area-inset-bottom,0px))!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:repeat(4, minmax(0,1fr))!important;
    gap:10px!important;
    z-index:30000!important;
  }

  .wao-live-call-actions button,
  .wao-live-call-actions a{
    min-height:58px!important;
    padding:0 8px!important;
    border-radius:22px!important;
    font-size:15px!important;
    white-space:normal!important;
    line-height:1.08!important;
  }

  .wao-live-call-actions button:nth-child(3):last-child,
  .wao-live-call-actions a:nth-child(3):last-child{
    grid-column:auto!important;
  }
}


/* =========================================================
   WAOLINK CALL REPLAY + MOBILE CALL UI FIX
   call_replay_ui_fix_20260810
   ========================================================= */

@media(max-width:820px){
  body:has(.wao-live-call-page){
    background:#061016!important;
    overflow:hidden!important;
  }

  body:has(.wao-live-call-page) .page{
    padding:0!important;
    margin:0!important;
    width:100vw!important;
    max-width:100vw!important;
    min-height:100dvh!important;
    background:#061016!important;
    overflow:hidden!important;
  }

  .wao-live-call-page{
    width:100vw!important;
    min-height:100dvh!important;
    height:100dvh!important;
    margin:0!important;
    padding:0!important;
    background:#061016!important;
    overflow:hidden!important;
  }

  .wao-live-call-card{
    width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    padding:34px 14px 160px!important;
    box-sizing:border-box!important;
    border-radius:0!important;
    background:linear-gradient(180deg,#061016 0%,#061016 58%,#071827 100%)!important;
    box-shadow:none!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
  }

  .wao-live-call-top{
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    height:62px!important;
    min-height:62px!important;
    margin:0 0 12px!important;
    color:#fff!important;
  }

  .wao-live-call-back{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    border-radius:50%!important;
    background:rgba(255,255,255,.08)!important;
    color:#fff!important;
    font-size:34px!important;
    line-height:1!important;
  }

  .wao-live-call-top h1{
    font-size:22px!important;
    line-height:1.1!important;
    margin:0!important;
    color:#fff!important;
  }

  .wao-live-call-top p{
    font-size:14px!important;
    line-height:1.2!important;
    margin:3px 0 0!important;
    color:rgba(255,255,255,.70)!important;
  }

  .wao-live-call-stage{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    border-radius:28px!important;
    overflow:hidden!important;
    background:radial-gradient(circle at 50% 26%, rgba(13,71,255,.40), rgba(6,16,22,.96) 58%)!important;
    border:1px solid rgba(255,255,255,.12)!important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.02), 0 18px 45px rgba(0,0,0,.28)!important;
  }

  .wao-live-call-placeholder{
    background:linear-gradient(145deg, rgba(6,16,22,.66), rgba(13,71,255,.16))!important;
    display:grid!important;
    place-items:center!important;
    align-content:center!important;
    gap:8px!important;
  }

  .wao-live-call-placeholder span{
    width:78px!important;
    height:78px!important;
    border-radius:50%!important;
    display:grid!important;
    place-items:center!important;
    background:rgba(255,255,255,.10)!important;
    font-size:34px!important;
    box-shadow:0 16px 50px rgba(0,0,0,.22)!important;
  }

  .wao-live-call-placeholder strong{
    font-size:28px!important;
    color:#fff!important;
  }

  .wao-live-call-placeholder small{
    max-width:260px!important;
    color:rgba(255,255,255,.72)!important;
    font-size:15px!important;
  }

  #localVideo{
    right:18px!important;
    bottom:18px!important;
    width:112px!important;
    height:144px!important;
    border-radius:22px!important;
    border:2px solid rgba(255,255,255,.55)!important;
    background:#0f172a!important;
  }

  .wao-live-call-actions{
    position:fixed!important;
    left:14px!important;
    right:14px!important;
    bottom:calc(92px + env(safe-area-inset-bottom,0px))!important;
    margin:0!important;
    width:auto!important;
    display:grid!important;
    grid-template-columns:repeat(3, minmax(0,1fr))!important;
    align-items:center!important;
    justify-content:center!important;
    gap:12px!important;
    z-index:30000!important;
  }

  .wao-live-call-page[data-type="video"] .wao-live-call-actions{
    grid-template-columns:repeat(3, minmax(0,1fr))!important;
  }

  .wao-live-call-actions button,
  .wao-live-call-actions a{
    width:100%!important;
    min-width:0!important;
    min-height:58px!important;
    height:58px!important;
    padding:0 8px!important;
    border-radius:22px!important;
    font-size:15px!important;
    font-weight:1000!important;
    white-space:normal!important;
    line-height:1.08!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
  }

  .wao-call-started #startCallButton,
  .wao-live-call-page.wao-call-started #startCallButton,
  #startCallButton[hidden]{
    display:none!important;
  }

  .wao-live-call-page.wao-call-started[data-type="audio"] .wao-live-call-actions{
    grid-template-columns:1fr 1fr!important;
    left:48px!important;
    right:48px!important;
  }

  .wao-live-call-page.wao-call-started[data-type="video"] .wao-live-call-actions{
    grid-template-columns:1fr 1fr 1fr!important;
  }

  #muteButton,
  #cameraButton{
    background:#eef4ff!important;
    color:#0D47FF!important;
  }

  #endCallButton{
    background:#dc2626!important;
    color:#fff!important;
  }
}


/* =========================================================
   WAOLINK RECEIVER BACK + CLEAN MOBILE CALL UI FIX
   receiver_back_callui_fix_20260810
   ========================================================= */

@media(max-width:820px){
  body.wao-call-screen-active{
    background:#061016!important;
    overflow:hidden!important;
  }

  body.wao-call-screen-active .topbar{
    display:none!important;
  }

  body.wao-call-screen-active .page{
    padding:0!important;
    margin:0!important;
    width:100vw!important;
    max-width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    background:#061016!important;
    overflow:hidden!important;
  }

  body.wao-call-screen-active .wao-live-call-page{
    width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    margin:0!important;
    padding:0!important;
    background:#061016!important;
    overflow:hidden!important;
  }

  body.wao-call-screen-active .wao-live-call-card{
    width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    padding:34px 16px calc(176px + env(safe-area-inset-bottom,0px))!important;
    box-sizing:border-box!important;
    border:0!important;
    border-radius:0!important;
    background:linear-gradient(180deg,#061016 0%,#071827 100%)!important;
    box-shadow:none!important;
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
    overflow:hidden!important;
  }

  body.wao-call-screen-active .wao-live-call-top{
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    flex:0 0 58px!important;
    height:58px!important;
    min-height:58px!important;
    margin:0!important;
  }

  body.wao-call-screen-active .wao-live-call-back{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    border-radius:50%!important;
    background:rgba(255,255,255,.10)!important;
    color:#fff!important;
    font-size:34px!important;
    line-height:1!important;
  }

  body.wao-call-screen-active .wao-live-call-top h1{
    font-size:22px!important;
    color:#fff!important;
    margin:0!important;
    line-height:1.08!important;
  }

  body.wao-call-screen-active .wao-live-call-top p{
    font-size:14px!important;
    color:rgba(255,255,255,.72)!important;
    margin:3px 0 0!important;
  }

  body.wao-call-screen-active .wao-live-call-stage{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    border-radius:28px!important;
    background:radial-gradient(circle at 50% 28%, rgba(13,71,255,.42), rgba(6,16,22,.96) 60%)!important;
    border:1px solid rgba(255,255,255,.12)!important;
    box-shadow:0 14px 40px rgba(0,0,0,.24)!important;
    overflow:hidden!important;
  }

  body.wao-call-screen-active .wao-live-call-placeholder{
    background:linear-gradient(145deg, rgba(6,16,22,.68), rgba(13,71,255,.18))!important;
  }

  body.wao-call-screen-active #localVideo{
    right:18px!important;
    bottom:18px!important;
    width:112px!important;
    height:144px!important;
    border-radius:22px!important;
    border:2px solid rgba(255,255,255,.58)!important;
    background:#0f172a!important;
  }

  body.wao-call-screen-active .wao-live-call-actions{
    position:fixed!important;
    left:50%!important;
    right:auto!important;
    bottom:calc(88px + env(safe-area-inset-bottom,0px))!important;
    transform:translateX(-50%)!important;
    width:min(92vw,430px)!important;
    margin:0!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    z-index:30000!important;
  }

  body.wao-call-screen-active .wao-live-call-actions button,
  body.wao-call-screen-active .wao-live-call-actions a{
    flex:1 1 0!important;
    min-width:0!important;
    max-width:118px!important;
    height:58px!important;
    min-height:58px!important;
    padding:0 8px!important;
    border-radius:22px!important;
    font-size:15px!important;
    font-weight:1000!important;
    line-height:1.08!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
  }

  body.wao-call-screen-active .wao-live-call-page.wao-call-started #startCallButton,
  body.wao-call-screen-active .wao-call-started #startCallButton,
  body.wao-call-screen-active #startCallButton[hidden]{
    display:none!important;
  }

  body.wao-call-screen-active .wao-live-call-page.wao-call-started[data-type="audio"] .wao-live-call-actions{
    width:min(78vw,320px)!important;
  }

  body.wao-call-screen-active #muteButton,
  body.wao-call-screen-active #cameraButton{
    background:#eef4ff!important;
    color:#0D47FF!important;
  }

  body.wao-call-screen-active #endCallButton{
    background:#dc2626!important;
    color:#fff!important;
  }
}


/* =========================================================
   WAOLINK CALL BUTTONS CENTER + AUDIO TO VIDEO UPGRADE
   call_buttons_video_upgrade_20260810
   ========================================================= */

@media(max-width:820px){
  body.wao-call-screen-active .wao-live-call-card{
    padding:34px 16px calc(160px + env(safe-area-inset-bottom,0px))!important;
  }

  body.wao-call-screen-active .wao-live-call-actions{
    position:fixed!important;
    left:50%!important;
    right:auto!important;
    bottom:calc(88px + env(safe-area-inset-bottom,0px))!important;
    transform:translateX(-50%)!important;
    width:calc(100vw - 32px)!important;
    max-width:460px!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    align-items:center!important;
    justify-items:stretch!important;
    justify-content:center!important;
    gap:10px!important;
    z-index:30000!important;
  }

  body.wao-call-screen-active .wao-live-call-actions button,
  body.wao-call-screen-active .wao-live-call-actions a{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:56px!important;
    min-height:56px!important;
    padding:0 6px!important;
    border-radius:21px!important;
    font-size:14px!important;
    font-weight:1000!important;
    line-height:1.05!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    text-decoration:none!important;
    white-space:normal!important;
    box-sizing:border-box!important;
  }

  body.wao-call-screen-active .wao-live-call-page.wao-call-started .wao-live-call-actions,
  body.wao-call-screen-active .wao-call-started .wao-live-call-actions{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  body.wao-call-screen-active .wao-live-call-page.wao-call-started[data-type="audio"] .wao-live-call-actions,
  body.wao-call-screen-active .wao-live-call-page.wao-call-started[data-type="video"] .wao-live-call-actions{
    left:50%!important;
    right:auto!important;
    width:calc(100vw - 32px)!important;
    max-width:460px!important;
    transform:translateX(-50%)!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  body.wao-call-screen-active #startCallButton[hidden],
  body.wao-call-screen-active .wao-call-started #startCallButton,
  body.wao-call-screen-active .wao-live-call-page.wao-call-started #startCallButton{
    display:none!important;
  }

  body.wao-call-screen-active #muteButton,
  body.wao-call-screen-active #cameraButton,
  body.wao-call-screen-active #upgradeVideoButton{
    background:#eef4ff!important;
    color:#0D47FF!important;
  }

  body.wao-call-screen-active #endCallButton{
    background:#dc2626!important;
    color:#fff!important;
  }
}

@media(max-width:380px){
  body.wao-call-screen-active .wao-live-call-actions{
    width:calc(100vw - 18px)!important;
    gap:7px!important;
  }
  body.wao-call-screen-active .wao-live-call-actions button,
  body.wao-call-screen-active .wao-live-call-actions a{
    height:52px!important;
    min-height:52px!important;
    border-radius:18px!important;
    font-size:13px!important;
  }
}


/* WAOLINK in-place video upgrade + background push UI - inplace_video_background_push_20260810 */
.wao-enable-call-notifications{position:fixed;left:50%;bottom:94px;transform:translateX(-50%);width:min(520px,calc(100vw - 28px));z-index:100000;background:#fff;border:1px solid #dbeafe;border-radius:18px;box-shadow:0 18px 48px rgba(15,23,42,.20);padding:12px 12px 12px 16px;display:flex;align-items:center;gap:12px;color:#0f172a}
.wao-enable-call-notifications>div{min-width:0;flex:1}
.wao-enable-call-notifications strong{display:block;font-size:15px;font-weight:900}
.wao-enable-call-notifications span{display:block;margin-top:2px;font-size:12px;color:#64748b}
.wao-enable-push-btn{border:0;border-radius:13px;padding:10px 14px;background:linear-gradient(135deg,#0d47ff,#12c6c1);color:#fff;font-weight:900}
.wao-dismiss-push-btn{width:30px;height:30px;border:0;border-radius:50%;background:#eef4ff;color:#0d47ff;font-size:20px;font-weight:900}
body.wao-call-screen-active .wao-live-call-actions{width:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;flex-wrap:wrap!important;margin:18px auto 0!important;padding:0 14px!important;box-sizing:border-box!important}
body.wao-call-screen-active .wao-live-call-actions>*{flex:0 0 auto!important;margin:0!important;position:relative!important;left:auto!important;right:auto!important;transform:none!important}
@media(max-width:820px){.wao-enable-call-notifications{bottom:92px}body.wao-call-screen-active .wao-live-call-actions{justify-content:center!important;padding:0 12px!important;gap:10px!important}}


/* =========================================================
   WAOLINK MOBILE FIXED DASHBOARD HEADER - fixedhomehead20260818
   WhatsApp-style behaviour: app/header controls stay visible and
   only the conversation list scrolls on mobile.
   ========================================================= */
@media(max-width:820px){
  html,
  body:not(.wao-mobile-chat-open){
    height:100%!important;
    min-height:100%!important;
    overflow:hidden!important;
  }

  body:not(.wao-mobile-chat-open) .topbar{
    flex:0 0 76px!important;
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    z-index:90000!important;
  }

  body:not(.wao-mobile-chat-open) .page{
    height:calc(100dvh - 76px)!important;
    min-height:0!important;
    overflow:hidden!important;
    padding:0 14px!important;
    margin:0!important;
    width:100%!important;
    max-width:100%!important;
  }

  body:not(.wao-mobile-chat-open) .wao-home-page{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    max-width:100%!important;
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  body:not(.wao-mobile-chat-open) .wao-home-fixed-head{
    flex:0 0 auto!important;
    position:relative!important;
    z-index:50!important;
    padding:12px 0 0!important;
    background:#eaf4ff!important;
  }

  body:not(.wao-mobile-chat-open) .wao-home-hero{
    flex:0 0 auto!important;
    margin:0!important;
  }

  body:not(.wao-mobile-chat-open) .wao-home-search{
    flex:0 0 auto!important;
  }

  body:not(.wao-mobile-chat-open) .wao-home-filters{
    flex:0 0 auto!important;
    margin:0!important;
  }

  body:not(.wao-mobile-chat-open) .wao-home-conversations{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    padding-bottom:108px!important;
    margin:0!important;
    scrollbar-width:none!important;
  }

  body:not(.wao-mobile-chat-open) .wao-home-conversations::-webkit-scrollbar{
    display:none!important;
  }

  body:not(.wao-mobile-chat-open) .wao-home-conversations .conversation-list{
    min-height:min-content!important;
  }

  body:not(.wao-mobile-chat-open) .wao-home-bottom-nav{
    z-index:95000!important;
  }

  body:not(.wao-mobile-chat-open) .wao-home-fab{
    z-index:95100!important;
  }
}

/* WAOLINK chat wallpaper picker */
.wao-chat-wallpaper{background-attachment:local!important;background-size:auto!important}
.wao-wallpaper-default{background:linear-gradient(#f8fafc,#eef6ff)!important}
.wao-wallpaper-soft_grey{background:linear-gradient(180deg,#f3f4f6 0%,#e5e7eb 100%)!important}
.wao-wallpaper-clean_white{background:#ffffff!important}
.wao-wallpaper-ocean{background:linear-gradient(145deg,#e7f2ff 0%,#dffafa 52%,#eef5ff 100%)!important}
.wao-wallpaper-midnight{background:linear-gradient(160deg,#132238 0%,#0d1b2a 55%,#162b45 100%)!important}
.wao-wallpaper-dots{
  background-color:#edf6ff!important;
  background-image:radial-gradient(circle at 1px 1px,rgba(13,71,255,.14) 1.15px,transparent 1.3px)!important;
  background-size:20px 20px!important;
}

.wao-wallpaper-settings-page{max-width:980px;margin:0 auto 32px}
.wao-wallpaper-settings-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:20px}
.wao-wallpaper-settings-head h1{margin:6px 0 4px}.wao-wallpaper-settings-head p{margin:0;color:#64748b}
.wao-wallpaper-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.wao-wallpaper-option{position:relative;margin:0;padding:10px;border:2px solid #dbe3ee;border-radius:18px;background:#fff;cursor:pointer;overflow:hidden;transition:.15s ease}
.wao-wallpaper-option:hover{border-color:#93b9ff;transform:translateY(-1px)}
.wao-wallpaper-option.selected{border-color:#0d47ff;box-shadow:0 0 0 3px rgba(13,71,255,.10)}
.wao-wallpaper-option input{position:absolute;opacity:0;pointer-events:none}
.wao-wallpaper-preview{display:block;height:150px;border-radius:13px;border:1px solid rgba(15,23,42,.08);position:relative;overflow:hidden}
.wao-preview-bubble{position:absolute;width:54%;height:22px;border-radius:12px;background:#fff;left:12px;top:28px;box-shadow:0 2px 5px rgba(15,23,42,.08)}
.wao-preview-bubble.right{left:auto;right:12px;top:64px;background:linear-gradient(135deg,#0d47ff,#1687ff)}
.wao-preview-bubble.short{width:38%;top:100px}
.wao-wallpaper-option-copy{display:block;padding:11px 4px 3px}.wao-wallpaper-option-copy strong{display:block;color:#0a1b3d;font-size:16px}.wao-wallpaper-option-copy small{display:block;color:#64748b;margin-top:4px;line-height:1.35}
.wao-wallpaper-check{position:absolute;right:17px;top:17px;width:29px;height:29px;border-radius:50%;display:none;place-items:center;background:#0d47ff;color:#fff;font-weight:900;box-shadow:0 3px 9px rgba(13,71,255,.28)}
.wao-wallpaper-option.selected .wao-wallpaper-check{display:grid}
.wao-wallpaper-actions{display:flex;gap:10px;margin-top:20px}
@media(max-width:760px){.wao-wallpaper-settings-page{margin:0 10px 28px}.wao-wallpaper-settings-head{flex-direction:column}.wao-wallpaper-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wao-wallpaper-preview{height:125px}}
@media(max-width:430px){.wao-wallpaper-grid{grid-template-columns:1fr}.wao-wallpaper-preview{height:140px}.wao-wallpaper-actions{flex-direction:column}.wao-wallpaper-actions .btn{width:100%}}

/* =========================================================
   WAOLINK CHAT WALLPAPER V1.1 - MOBILE PRIORITY FIX
   Keep wallpaper choice above legacy mobile .messages backgrounds.
   ========================================================= */
body .messages.wao-chat-wallpaper.wao-wallpaper-default,
body.wao-mobile-chat-open .messages.wao-chat-wallpaper.wao-wallpaper-default{
  background:linear-gradient(#f8fafc,#eef6ff)!important;
  background-image:linear-gradient(#f8fafc,#eef6ff)!important;
}
body .messages.wao-chat-wallpaper.wao-wallpaper-soft_grey,
body.wao-mobile-chat-open .messages.wao-chat-wallpaper.wao-wallpaper-soft_grey{
  background:linear-gradient(180deg,#f3f4f6 0%,#e5e7eb 100%)!important;
  background-image:linear-gradient(180deg,#f3f4f6 0%,#e5e7eb 100%)!important;
}
body .messages.wao-chat-wallpaper.wao-wallpaper-clean_white,
body.wao-mobile-chat-open .messages.wao-chat-wallpaper.wao-wallpaper-clean_white{
  background:#ffffff!important;
  background-color:#ffffff!important;
  background-image:none!important;
}
body .messages.wao-chat-wallpaper.wao-wallpaper-ocean,
body.wao-mobile-chat-open .messages.wao-chat-wallpaper.wao-wallpaper-ocean{
  background:linear-gradient(145deg,#e7f2ff 0%,#dffafa 52%,#eef5ff 100%)!important;
  background-image:linear-gradient(145deg,#e7f2ff 0%,#dffafa 52%,#eef5ff 100%)!important;
}
body .messages.wao-chat-wallpaper.wao-wallpaper-midnight,
body.wao-mobile-chat-open .messages.wao-chat-wallpaper.wao-wallpaper-midnight{
  background:linear-gradient(160deg,#132238 0%,#0d1b2a 55%,#162b45 100%)!important;
  background-image:linear-gradient(160deg,#132238 0%,#0d1b2a 55%,#162b45 100%)!important;
}
body .messages.wao-chat-wallpaper.wao-wallpaper-dots,
body.wao-mobile-chat-open .messages.wao-chat-wallpaper.wao-wallpaper-dots{
  background-color:#eef5ff!important;
  background-image:radial-gradient(circle at 2px 2px,rgba(13,71,255,.13) 1.5px,transparent 1.6px)!important;
  background-size:22px 22px!important;
}