/* ============================================================
   DGTechQA — Chat + Community redesign, animated bottom menubar
   Linked from dgtechqa_mobile.html and chat.html
   ============================================================ */

/* ───────────── shared keyframes ───────────── */
@keyframes tkUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes tkSlide{from{opacity:0;transform:translateX(-18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes tkPop{0%{transform:scale(.6)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes tkPing{from{opacity:.7;transform:scale(.85)}to{opacity:0;transform:scale(1.9)}}
@keyframes tkSpin{to{transform:rotate(360deg)}}
@keyframes tkFlow{to{background-position:100% 0}}
@keyframes tkSweep{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes tkBounce{0%{transform:translateY(0)}40%{transform:translateY(-5px)}100%{transform:translateY(0)}}
@keyframes tkRip{to{transform:scale(3);opacity:0}}
.tk-rip{position:absolute;border-radius:50%;background:rgba(37,211,102,.25);transform:scale(0);pointer-events:none;animation:tkRip .55s ease-out forwards}

/* ═════════════ BOTTOM MENUBAR — main page ═════════════ */
html[data-mobile-app] .bottom-nav{border-radius:20px 20px 0 0!important;border-top:0!important;
  box-shadow:0 -6px 24px -8px rgba(11,20,26,.22)!important;padding:8px 6px calc(8px + var(--sab,0px))!important}
html[data-mobile-app] .bn-item{position:relative;font-size:11px!important;font-weight:700!important;transition:color .2s,transform .15s}
html[data-mobile-app] .bn-item i{width:54px!important;height:30px!important;transition:background .25s,width .35s cubic-bezier(.34,1.56,.64,1),transform .25s}
html[data-mobile-app] .bn-item.active i{width:64px!important;background:linear-gradient(135deg,rgba(37,211,102,.28),rgba(0,168,132,.2))!important;
  color:#075E54!important;animation:tkBounce .45s ease}
html[data-mobile-app] .bn-item.active{color:var(--text)!important;font-weight:800!important}
html[data-mobile-app] .bn-item:active i{transform:scale(.88)}

/* ═════════════ BOTTOM MENUBAR — chat page ═════════════ */
@media(max-width:820px){
  .mnav{border-radius:20px 20px 0 0;border-top:0!important;box-shadow:0 -6px 24px -8px rgba(11,20,26,.22)!important}
  .mnav a{position:relative;transition:color .2s}
  .mnav a i{width:54px;transition:width .35s cubic-bezier(.34,1.56,.64,1),transform .25s,background .25s}
  .mnav a.active i{width:64px;background:linear-gradient(135deg,rgba(37,211,102,.28),rgba(0,168,132,.2));animation:tkBounce .45s ease}
  .mnav a:active i{transform:scale(.88)}
}

/* ═════════════ CHAT TAB ═════════════ */
@media(max-width:820px){
  .chat-head{position:relative;background:var(--surface);border-bottom:0;padding:12px 14px 6px}
  .ch-t h1{display:flex;align-items:center;gap:7px}
  .ch-t h1::after{content:"";width:7px;height:7px;border-radius:50%;background:#25d366;box-shadow:0 0 0 0 rgba(37,211,102,.6);animation:tkPing2 2s infinite}
  @keyframes tkPing2{70%{box-shadow:0 0 0 7px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
  .rbtn{transition:transform .2s,background .2s}
  .rbtn:active{transform:scale(.9)}
  .rbtn.spin i{animation:tkSpin .7s cubic-bezier(.4,0,.2,1)}

  /* segmented tabs with a sliding thumb */
  .tabs{position:relative;margin:4px 12px 8px;padding:4px;border:0;border-radius:16px;background:var(--surface2)}
  .tabs::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:12px;
    background:linear-gradient(135deg,#128C7E,#25d366);box-shadow:0 6px 14px -6px rgba(18,140,126,.8);
    transition:transform .4s cubic-bezier(.34,1.4,.64,1)}
  .tabs[data-active="members"]::before{transform:translateX(100%)}
  .tab{position:relative;z-index:1;padding:9px 6px;border:0!important;border-radius:12px;transition:color .25s}
  .tab.active{color:#fff!important}
  .tab .pill{background:rgba(255,255,255,.25);color:#fff}
  .tab:not(.active) .pill{background:var(--accent);color:#fff}
  .tab .pill.soft,.tab:not(.active) .pill.soft{background:rgba(127,138,148,.2);color:var(--muted);border:0}
  .tab.active .pill.soft{background:rgba(255,255,255,.25);color:#fff}

  .search{border:0;padding:2px 12px 8px}
  .search label{border:1px solid transparent;border-radius:16px;background:var(--surface2);padding:9px 14px;
    transition:box-shadow .25s,border-color .25s,background .25s}
  .search label:focus-within{background:var(--surface);border-color:#25d366;box-shadow:0 0 0 4px rgba(37,211,102,.16)}
  .search label:focus-within i{color:#128C7E;transform:scale(1.15)}
  .search i{transition:transform .25s,color .25s}

  .list{padding-top:2px}
  .sec-cap{display:flex;align-items:center;gap:8px;padding:10px 18px 4px;color:#128C7E}
  .sec-cap::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(18,140,126,.35),transparent)}
  .row{position:relative;overflow:hidden;width:calc(100% - 20px);margin:4px 10px;padding:9px 12px;border:0;border-radius:18px;
    background:var(--surface);box-shadow:0 1px 2px rgba(11,20,26,.09);
    transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,background .2s}
  .row:active,.row.sel{transform:scale(.975);background:var(--surface2)}
  .avatar{box-shadow:0 6px 12px -6px rgba(0,0,0,.45);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
  .row:active .avatar{transform:rotate(-6deg) scale(1.08)}
  .dot.on{background:#25d366}
  .dot.on::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid #25d366;animation:tkPing 1.9s ease-out infinite}
  .rsub .badge{animation:tkPop .5s cubic-bezier(.34,1.56,.64,1) both}
  .list.enter .row,.list.enter .sec-cap{animation:tkSlide .5s cubic-bezier(.22,1,.36,1) both}
  .list.enter .row:nth-child(1){animation-delay:35ms}.list.enter .row:nth-child(2){animation-delay:70ms}.list.enter .row:nth-child(3){animation-delay:105ms}.list.enter .row:nth-child(4){animation-delay:140ms}.list.enter .row:nth-child(5){animation-delay:175ms}.list.enter .row:nth-child(6){animation-delay:210ms}.list.enter .row:nth-child(7){animation-delay:245ms}.list.enter .row:nth-child(8){animation-delay:280ms}.list.enter .row:nth-child(9){animation-delay:315ms}.list.enter .row:nth-child(10){animation-delay:350ms}.list.enter .row:nth-child(11){animation-delay:385ms}.list.enter .row:nth-child(12){animation-delay:420ms}.list.enter .row:nth-child(13){animation-delay:455ms}.list.enter .row:nth-child(14){animation-delay:490ms}

  .fab{border-radius:20px;background:linear-gradient(135deg,#128C7E,#25d366)!important;box-shadow:0 12px 22px -8px rgba(18,140,126,.8);
    animation:tkPop .6s cubic-bezier(.34,1.56,.64,1) .3s both;transition:transform .2s}
  .fab::after{content:"";position:absolute;inset:0;border-radius:20px;border:2px solid #25d366;animation:tkPing 2.4s ease-out 1.2s infinite;pointer-events:none}
  .fab:active{transform:scale(.88) rotate(-8deg)}
  .send{transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
  .send:active{transform:scale(.86) rotate(-12deg)}
  .composer textarea{transition:box-shadow .25s,border-color .25s}
  .composer textarea:focus{border-color:#25d366;box-shadow:0 0 0 4px rgba(37,211,102,.16)}
  .sheet{animation:tkUp .35s cubic-bezier(.22,1,.36,1)}
  .overlay.open{animation:tkFade .25s ease}
  @keyframes tkFade{from{opacity:0}to{opacity:1}}
}

/* ═════════════ COMMUNITY TAB ═════════════ */
html[data-mobile-app] #cmApp{border:0!important;border-radius:22px!important;background:var(--wa-bg,#fff);
  box-shadow:0 1px 2px rgba(11,20,26,.10),0 16px 32px -18px rgba(0,128,105,.5)!important}
#tab-community.active #cmApp{animation:tkUp .55s cubic-bezier(.22,1,.36,1) both}
html[data-mobile-app] #cmApp .wa-top{position:relative;overflow:hidden;flex-direction:column;align-items:stretch;gap:10px;padding:16px 14px 14px;
  background:linear-gradient(120deg,#064e46,#0b8f74,#25d366,#0b8f74,#064e46)!important;background-size:300% 100%!important;
  animation:tkFlow 9s ease-in-out infinite alternate!important}
#cmApp .wa-top::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.2) 50%,transparent 65%);transform:translateX(-120%);animation:tkSweep 5.5s ease-in-out 1s infinite}
#cmApp .wa-top>div{position:relative;z-index:1}
html[data-mobile-app] #cmApp .wa-top h3{font-size:16px!important}
html[data-mobile-app] #cmApp .wa-top small{font-size:11px!important}
#cmApp .cm-search{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.95);border-radius:14px;padding:8px 12px;color:#667781;
  transition:box-shadow .25s,transform .25s}
#cmApp .cm-search:focus-within{box-shadow:0 0 0 4px rgba(255,255,255,.3);transform:scale(1.015)}
#cmApp .cm-search input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:13px;color:#111b21}
#cmApp .cm-search i{font-size:12px}
#cmApp .cm-count{margin-left:auto;font-size:10px;font-weight:800;background:rgba(255,255,255,.22);padding:3px 9px;border-radius:999px;color:#fff;align-self:flex-start}
#cmApp .wa-top .cm-headrow{display:flex;align-items:center;justify-content:space-between;gap:8px}

#cmApp .wa-list{border-top:0;padding:6px 8px 10px}
#cmApp .cm-cap{display:flex;align-items:center;gap:8px;padding:10px 8px 4px;font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#128C7E}
#cmApp .cm-cap::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(18,140,126,.35),transparent)}
html[data-mobile-app] #cmApp .wa-row{margin:3px 0;padding:9px 10px;border-radius:16px;gap:11px;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .2s,box-shadow .2s}
#cmApp .wa-row::before{display:none!important}
#cmApp .wa-row::after{content:"\f054";font-family:"Font Awesome 6 Free"!important;font-weight:900;font-size:10px;color:#b1bac0;margin-left:auto;flex:none;transition:transform .2s,color .2s}
html[data-mobile-app] #cmApp .wa-row:active{transform:scale(.97);background:#f0f7f4!important}
#cmApp .wa-row:active::after{transform:translateX(4px);color:#128C7E}
html[data-mobile-app] #cmApp .wa-av{flex:0 0 42px;width:42px;height:42px;font-size:16px;border-radius:14px;box-shadow:0 6px 12px -6px rgba(0,0,0,.45);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
#cmApp .wa-row:active .wa-av{transform:rotate(-8deg) scale(1.1)}
html[data-mobile-app] #cmApp .wa-nm b{font-size:13px!important}
html[data-mobile-app] #cmApp .wa-pv p{font-size:11px!important}
#tab-community.active .wa-row{animation:tkSlide .5s cubic-bezier(.22,1,.36,1) both}
#tab-community.active .wa-row:nth-child(1){animation-delay:0.16s}#tab-community.active .wa-row:nth-child(2){animation-delay:0.20s}#tab-community.active .wa-row:nth-child(3){animation-delay:0.24s}#tab-community.active .wa-row:nth-child(4){animation-delay:0.28s}#tab-community.active .wa-row:nth-child(5){animation-delay:0.32s}#tab-community.active .wa-row:nth-child(6){animation-delay:0.36s}#tab-community.active .wa-row:nth-child(7){animation-delay:0.40s}#tab-community.active .wa-row:nth-child(8){animation-delay:0.44s}#tab-community.active .wa-row:nth-child(9){animation-delay:0.48s}#tab-community.active .wa-row:nth-child(10){animation-delay:0.52s}#tab-community.active .wa-row:nth-child(11){animation-delay:0.56s}#tab-community.active .wa-row:nth-child(12){animation-delay:0.60s}#tab-community.active .wa-row:nth-child(13){animation-delay:0.64s}#tab-community.active .wa-row:nth-child(14){animation-delay:0.68s}#tab-community.active .wa-row:nth-child(15){animation-delay:0.72s}#tab-community.active .wa-row:nth-child(16){animation-delay:0.76s}#tab-community.active .wa-row:nth-child(17){animation-delay:0.80s}#tab-community.active .wa-row:nth-child(18){animation-delay:0.84s}#tab-community.active .wa-row:nth-child(19){animation-delay:0.88s}#tab-community.active .wa-row:nth-child(20){animation-delay:0.92s}#tab-community.active .wa-row:nth-child(21){animation-delay:0.96s}
#cmApp .cm-empty{display:none;text-align:center;font-size:12px;color:#667781;padding:22px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
}