/* WhatsApp Mobile v1.2 — Bubble via JS, input bar hardened */
@media(max-width:768px){

.wa-shell{flex-direction:column;position:fixed;inset:0;z-index:40}
.wa-rail{display:none!important}

.wa-list{width:100%!important;height:100%;border:none!important;display:flex;flex-direction:column}

.wa-lh{padding:12px 16px 6px!important}
.wa-lh h2{font-size:22px!important;font-weight:700!important}

.wa-search{padding:0 12px 10px!important}
.wa-search input{background:#f0f2f5!important;border-radius:24px!important;padding:10px 16px 10px 36px!important;font-size:15px!important}

.wa-filters{padding:0 12px 10px!important;gap:8px!important}
.wa-fb{padding:6px 14px!important;border-radius:18px!important;font-size:14px!important}

.wa-it{padding:10px 16px!important;gap:14px!important;border-bottom:none!important}
.wa-it-av{width:52px!important;height:52px!important;font-size:22px!important}
.wa-it-name{font-size:16px!important;font-weight:500!important}
.wa-it-msg{font-size:14px!important;margin-top:3px!important}
.wa-com-av{width:52px!important;height:52px!important}
.wa-items{padding-bottom:80px!important;flex:1;overflow-y:auto;scrollbar-width:none}
.wa-items::-webkit-scrollbar{display:none}

/* BOTTOM TABS */
.wa-mob-tabs{
 display:flex!important;position:fixed;bottom:0;left:0;right:0;z-index:60;
 padding:6px 0 env(safe-area-inset-bottom,6px)!important;
 background:#fff!important;border-top:1px solid #e2e8f0!important;
}
.wa-mob-tabs button{
 flex:1;background:none;border:none;padding:6px 0 4px!important;
 font-size:11px!important;font-weight:500;
 display:flex!important;flex-direction:column;align-items:center;gap:3px!important;
 color:#54656f!important;opacity:1!important;position:relative;cursor:pointer;
}
.wa-mob-tabs button.active{color:#00a884!important}
.wa-mob-tabs button.active::before{
 content:'';position:absolute;top:0;left:25%;right:25%;
 height:3px;border-radius:0 0 3px 3px;background:#00a884;
}
.wa-mob-tabs button svg{width:24px;height:24px}

/* FAB */
.wa-fab{
 position:fixed;bottom:76px;right:16px;
 width:56px;height:56px;border-radius:16px;
 background:#00a884;color:#fff;border:none;
 box-shadow:0 4px 12px rgba(0,168,132,.35);
 display:flex;align-items:center;justify-content:center;
 font-size:28px;cursor:pointer;z-index:55;
}

/* CONTENT PANEL — fullscreen overlay */
.wa-ct{
 display:none!important;
 position:fixed!important;inset:0!important;
 z-index:70!important;
 flex-direction:column!important;
 background:#efeae2!important;
}
.wa-shell.wa-show-ct .wa-ct{display:flex!important}
.wa-shell.wa-show-ct .wa-list{display:none!important}
.wa-shell.wa-show-ct .wa-mob-tabs{display:none!important}
.wa-shell.wa-show-ct .wa-fab{display:none!important}

/* Chat header with back button */
.wa-ct-head{
 padding:8px 8px!important;gap:6px!important;
 background:#f0f2f5!important;border-bottom:1px solid #e9edef!important;
 min-height:52px;flex-shrink:0!important;
 display:flex!important;align-items:center!important;
}
.wa-back{
 display:flex!important;background:none;border:none;
 font-size:24px!important;cursor:pointer;
 padding:8px!important;color:#54656f;
 min-width:40px!important;min-height:40px!important;
 align-items:center;justify-content:center;
 -webkit-tap-highlight-color:transparent;
}
.wa-ct-head-av{width:36px!important;height:36px!important;flex-shrink:0}
.wa-ct-head-name{font-size:15px!important;font-weight:600!important}
.wa-ct-head-sub{font-size:11px!important}

/* Chat body */
.wa-ct-body{
 flex:1!important;min-height:0!important;
 padding:8px 10px!important;
 overflow-y:auto!important;
 -webkit-overflow-scrolling:touch;
 scrollbar-width:none;
}
.wa-ct-body::-webkit-scrollbar{display:none}

/* === INPUT BAR — HARDENED FOR MOBILE === */
.wa-ct-foot{
 padding:6px 4px env(safe-area-inset-bottom,6px)!important;
 background:#f0f2f5!important;
 border-top:1px solid #e9edef!important;
 gap:2px!important;
 flex-shrink:0!important;
 display:flex!important;
 align-items:center!important;
 min-height:52px!important;
 position:relative!important;
 z-index:10!important;
}
.wa-ct-foot #wa-input{
 flex:1!important;min-width:0!important;
 padding:10px 14px!important;
 border-radius:22px!important;
 font-size:16px!important;
 background:#fff!important;
 border:none!important;
 outline:none!important;
 -webkit-appearance:none!important;
}
.wa-ib-btn{
 padding:8px!important;min-width:38px!important;min-height:38px!important;
 flex-shrink:0!important;display:flex!important;
 align-items:center!important;justify-content:center!important;
 -webkit-tap-highlight-color:transparent;
}
.wa-ib-action{
 width:44px!important;height:44px!important;min-width:44px!important;
 flex-shrink:0!important;
 -webkit-tap-highlight-color:transparent;
}

/* Bubbles */
.wa-mr{max-width:88%!important}
.wa-bub{font-size:15px!important;padding:6px 10px 4px!important;position:relative!important}
.wa-bub img.wa-bub-img{max-width:220px!important}

/* ⋮ DELETE BUTTON — always visible, big touch target */
.wa-bub-menu{
 opacity:1!important;
 font-size:22px!important;
 padding:6px 8px!important;
 min-width:34px!important;
 min-height:34px!important;
 display:flex!important;
 align-items:center!important;justify-content:center!important;
 touch-action:manipulation!important;
 -webkit-tap-highlight-color:transparent;
 cursor:pointer!important;
}

/* Delete dropdown — bottom sheet */
.wa-bub-dd{
 position:fixed!important;
 bottom:0!important;left:0!important;right:0!important;
 top:auto!important;
 border-radius:16px 16px 0 0!important;
 min-width:100%!important;
 padding:8px 0 env(safe-area-inset-bottom,8px)!important;
 z-index:200!important;
 box-shadow:0 -4px 20px rgba(0,0,0,.15)!important;
 background:#fff!important;
}
.wa-bub-dd button{padding:16px 20px!important;font-size:16px!important}

/* Context menu — bottom sheet */
.wa-ctx-menu{
 position:fixed!important;
 bottom:0!important;left:0!important;right:0!important;
 top:auto!important;
 border-radius:16px 16px 0 0!important;
 min-width:100%!important;
 padding:8px 0 env(safe-area-inset-bottom,8px)!important;
 z-index:200!important;
 background:#fff!important;
}
.wa-ctx-item{padding:16px 20px!important;font-size:16px!important}

/* Emoji picker */
.wa-ep-wrap{bottom:52px!important;max-height:240px!important;border-radius:12px 12px 0 0!important}
.wa-ep-grid{grid-template-columns:repeat(7,1fr)!important}

/* Attach menu */
.wa-attach-menu{
 position:fixed!important;
 bottom:60px!important;left:8px!important;right:8px!important;
 border-radius:16px!important;
}

/* Settings */
.wa-settings-item{padding:14px 16px!important}

/* Plus menu */
.wa-plus-menu{
 position:fixed!important;
 bottom:0!important;left:0!important;right:0!important;
 top:auto!important;border-radius:16px 16px 0 0!important;
 z-index:100!important;
 box-shadow:0 -4px 20px rgba(0,0,0,.12)!important;
 padding:8px 0 env(safe-area-inset-bottom,8px)!important;
}

/* Backdrop for menus */
#wa-ctx-bd{z-index:199!important}
}

/* Small screens */
@media(max-width:380px){
 .wa-it-av{width:46px!important;height:46px!important}
 .wa-it{padding:8px 12px!important;gap:10px!important}
 .wa-mob-tabs button{font-size:10px!important}
 .wa-ib-btn{padding:6px!important;min-width:32px!important;min-height:32px!important}
 .wa-ib-action{width:38px!important;height:38px!important;min-width:38px!important}
}
