:root{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:#111827;background:#dfe9f0}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}.hidden{display:none!important}.auth{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(145deg,#e9f4ff,#d8e8f3)}.card{width:min(420px,100%);background:#fff;padding:34px;border-radius:24px;box-shadow:0 20px 60px #1f5d8d24}.brand{display:flex;align-items:center;gap:14px;justify-content:center;margin-bottom:18px}.brand h1{font-size:32px;margin:0}.logo{width:52px;height:52px;border-radius:50%;background:#2481cc;color:#fff;display:grid;place-items:center;font-size:26px;font-weight:900;font-style:italic}.sub{text-align:center;color:#64748b;margin:0 0 25px}.card label{display:block;font-weight:700;margin:14px 0 7px}.input{width:100%;border:1px solid #cbd5e1;padding:14px 16px;border-radius:13px;outline:none}.input:focus{border-color:#2481cc;box-shadow:0 0 0 3px #2481cc20}.otp{text-align:center;font-size:25px;letter-spacing:8px}.primary{width:100%;border:0;border-radius:13px;padding:14px;margin-top:18px;background:#2481cc;color:#fff;font-weight:700;cursor:pointer}.primary:disabled{opacity:.65}.link{display:block;margin:14px auto 0;background:none;border:0;color:#2481cc;cursor:pointer}.hint,.error{text-align:center;font-size:13px}.hint{color:#64748b}.error{color:#dc2626;ay:none!impo8px}.shell{height:100vh;display:grid;grid-template-columns:380px 1fr;max-width:1800px;margin:auto;background:white}.sidebar{border-right:1px solid #dbe3eb;overflow:hidden;display:flex;flex-direction:column}.top{height:86px;background:#2481cc;color:white;display:flex;align-items:center;justify-content:space-between;padding:15px 22px}.brand-ay:i{display:flex;align-items:center;gap:12px;font-size:24px}.brand-ay:i .logo{width:42px;height:42px;font-size:20px}.logout{border:0;border-radius:12px;padding:10px 14px;background:#fff;color:#475569;cursor:pointer}.me{padding:11px 20px 0;font-weight:700}.me small{display:block;color:#64748b;font-weight:400}.search{padding:13px o8px}.search input{width:100%;border:0;background:#f1f5f9;border-radius:28px;padding:14px 20px;outline:none}.chat-list{overflow:auto}.chat-item{width:100%;display:flex;align-items:center;gap:14px;padding:16px 20px;border:0;border-top:1px solid #edf2f7;background:#fff;text-align:left;cursor:pointer}.chat-item:hover,.chat-item.active{background:#eaf4fb}.avatar{flex:0 0 52px;width:52px;height:52px;border-radius:50%;background:#4f8bd1;color:#fff;display:grid;place-items:center;font-size:22px;font-weight:800}.chat-meta{min-width:0;flex:1}.row{display:flex;align-items:center;justify-content:space-between;gap:8px}.row span{color:#64748b;font-size:14px}.preview{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.badge{font-style:normal;background:#2481cc;color:#fff;border-radius:20px;min-width:22px;height:22px;display:grid;place-items:center;font-size:12px}.dot{width:9px;height:9px;background:#22c55e;border-radius:50%}.conversation{display:grid;grid-template-rows:auto 1fr auto;min-width:0;background-color:#dce7ee;background-image:radial-gradient(#fff 1.3px,transparent 1.3px);background-size:28px 28px}.welcome{align-self:center;justify-self:center;text-align:center;color:#64748b}.welcome .logo{margin:auto}.welcome h2{color:#1e293b}.chat-head{height:86px;background:#fff;display:flex;align-items:center;gap:12px;padding:12px 25px}.chat-head .avatar{width:54px}.chat-head small{display:block;color:#2481cc;margin-top:3px}.back{display:none;background:none;border:0;font-size:38px}.messages{overflow:auto;padding:28px 5%;display:flex;flex-direction:column;gap:10px}.message{max-width:min(70%,650px);padding:11px 15px;border-radius:18px;background:#fff;align-self:flex-start;box-shadow:0 1px 1px #00000012;white-space:pre-wrap;overflow-wrap:anywhere}.message.me-msg{align-self:flex-end;background:#e8ffd9}.message span{color:#64748b;font-size:11px;margin-left:10px;white-space:nowrap}.composer{display:flex;gap:12px;padding:18px 4%;background:#fff}.composer textarea{flex:1;border:0;background:#f5f7f9;border-radius:28px;padding:15px 22px;resize:none;outline:none}.send{width:52px;height:52px;border-radius:50%;border:0;background:#2481cc;color:#fff;font-size:24px;cursor:pointer}.empty{text-align:center;color:#64748b;padding:30px}
@media(max-width:760px){.shell{display:block;position:relative;overflow:hidden}.sidebar,.conversation{position:absolute;inset:0}.conversation{transform:translateX(100%);transition:.2s}.chat-open .conversation{transform:none}.top,.chat-head{height:72px}.back{display:block}.message{max-width:86%}.composer{padding:10px}.me{background:#fff}.sidebar{background:#fff}}

@media(max-width:760px){
  html,body,#app{
    height:100%;
    overflow:hidden;
  }

  .shell{
    height:100dvh;
    min-height:100dvh;
  }

  .sidebar,
  .conversation{
    height:100dvh;
    min-height:0;
  }

  .messages{
    min-height:0;
  }

  .composer{
    padding:10px 10px max(10px,env(safe-area-inset-bottom));
    position:relative;
    z-index:5;
  }
}

.me{
  display:flex;
  align-items:center;
  gap:11px;
}

.profile-photo{
  border:0;
  background:none;
  padding:0;
  border-radius:50%;
  cursor:pointer;
}

.profile-photo .avatar{
  width:46px;
  height:46px;
  flex-basis:46px;
}

.avatar{
  overflow:hidden;
}

.avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
}

.account-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.delete-account{
  border:0;
  border-radius:12px;
  padding:10px 12px;
  background:#c62828;
  color:#fff;
  cursor:pointer;
}
@media(max-width:760px){
  .delete-account{
    font-size:12px;
    padding:8px;
  }
}

.legal-links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:16px;
  font-size:13px;
}
.legal-links a{
  color:#326fc4;
  text-decoration:none;
}
.legal-links a:hover{
  text-decoration:underline;
}

/* Call interface */
.head-user{min-width:0}.call-actions{margin-left:auto;display:flex;gap:9px}.call-actions button{width:44px;height:44px;border:0;border-radius:50%;background:#edf5ff;color:#1769aa;font-size:21px;cursor:pointer}.call-actions button:hover{background:#dbeafe}.call-overlay{position:fixed;inset:0;z-index:1000;background:#08111dcc;display:grid;place-items:center;padding:18px}.call-panel{width:min(760px,100%);height:min(780px,calc(100dvh - 36px));display:grid;grid-template-rows:1fr auto;background:#111827;border-radius:24px;overflow:hidden;box-shadow:0 24px 80px #0009}.call-stage{position:relative;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at top,#334155,#0f172a)}.call-stage>video#remoteVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.call-stage.voice>video#remoteVideo,.call-stage.voice>video#localVideo{display:none}.call-person{position:relative;z-index:2;color:white;text-align:center;text-shadow:0 2px 12px #0008}.call-person .avatar{width:112px;height:112px;margin:auto;font-size:46px}.call-person h2{margin:18px 0 5px;font-size:28px}.call-person p{margin:0;color:#dbeafe}.call-stage.video .call-person{opacity:1}.call-stage.video.connected .call-person{opacity:0;pointer-events:none}.call-stage>video#localVideo{position:absolute;right:18px;bottom:18px;width:min(28%,180px);aspect-ratio:3/4;object-fit:cover;border-radius:16px;border:2px solid #fff;z-index:3;background:#111;transform:scaleX(-1)}.call-controls{display:flex;justify-content:center;gap:18px;padding:18px max(18px,env(safe-area-inset-bottom));background:#111827}.call-controls button{width:64px;height:64px;border:0;border-radius:50%;background:#374151;color:#fff;font-size:22px;cursor:pointer}.call-controls button span{display:block;font-size:10px;margin-top:2px}.call-controls button.off{background:#f59e0b}.call-controls .accept-call{background:#16a34a}.call-controls .end-call{background:#dc2626}
@media(max-width:760px){.chat-head{padding:8px 12px;gap:8px}.chat-head .avatar{flex-basis:44px;width:44px;height:44px}.call-actions{gap:5px}.call-actions button{width:40px;height:40px}.call-overlay{padding:0}.call-panel{width:100%;height:100dvh;border-radius:0}.call-stage>video#localVideo{right:12px;bottom:12px;width:28%}.call-controls{padding-bottom:max(18px,env(safe-area-inset-bottom))}}

/* Repairs for legacy minified rules. */
.error{min-height:18px}
.brand-mini{display:flex;align-items:center;gap:12px;font-size:24px}
.brand-mini .logo{width:42px;height:42px;font-size:20px}
.search{padding:13px 18px}


/* =========================================================
   ZEVRO TELEGRAM-OLD-STYLE SETTINGS
   ========================================================= */

.zevro-menu-wrap{
    position:relative;
}

.zevro-menu-button{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    padding:0;
    border:0;
    border-radius:50%;
    background:transparent;
    color:#fff;
    font-size:27px;
    line-height:1;
    cursor:pointer;
}

.zevro-menu-button:active{
    background:rgba(255,255,255,.12);
}

.zevro-main-menu{
    position:absolute;
    z-index:5000;
    top:50px;
    right:0;
    width:220px;
    padding:8px;
    border:1px solid #263445;
    border-radius:14px;
    background:#172332;
    box-shadow:0 16px 45px rgba(0,0,0,.45);
}

.zevro-main-menu button{
    width:100%;
    display:flex;
    align-items:center;
    gap:13px;
    border:0;
    border-radius:10px;
    padding:13px 14px;
    background:transparent;
    color:#f8fafc;
    text-align:left;
    cursor:pointer;
}

.zevro-main-menu button:active{
    background:#243448;
}

.zevro-main-menu button span{
    width:25px;
    text-align:center;
    font-size:20px;
}

.zevro-main-menu button b{
    font-size:15px;
    font-weight:600;
}


/* Full Settings page */

.zevro-settings-screen{
    position:fixed;
    z-index:99990;
    inset:0;
    display:flex;
    flex-direction:column;
    background:#0b1624;
    color:#fff;
    overflow:hidden;
    font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}

.zs-topbar{
    flex:0 0 auto;
    height:72px;
    display:flex;
    align-items:center;
    padding:
        max(10px,env(safe-area-inset-top))
        16px
        8px;
    gap:10px;
    background:#101c2a;
    border-bottom:1px solid rgba(255,255,255,.035);
}

.zs-topbar h1{
    margin:0;
    flex:1;
    font-size:24px;
    font-weight:700;
    letter-spacing:-.3px;
}

.zs-back,
.zs-search-icon,
.zs-more-icon,
.zs-camera{
    border:0;
    background:transparent;
    color:#fff;
    cursor:pointer;
}

.zs-back{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    font-size:42px;
    line-height:32px;
    font-weight:300;
}

.zs-top-actions{
    display:flex;
    align-items:center;
    gap:2px;
}

.zs-search-icon,
.zs-more-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    font-size:28px;
}

.zs-settings-scroll{
    flex:1;
    overflow:auto;
    overscroll-behavior:contain;
    padding-bottom:
        calc(28px + env(safe-area-inset-bottom));
}

.zs-profile{
    min-height:150px;
    display:flex;
    align-items:center;
    gap:18px;
    padding:24px 20px;
    background:#101c2a;
}

.zs-profile-photo{
    flex:0 0 82px;
    width:82px;
    height:82px;
    border-radius:50%;
    overflow:hidden;
    display:grid;
    place-items:center;
    background:#278bd3;
    color:#fff;
    font-size:33px;
    font-weight:800;
}

.zs-profile-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.zs-profile-info{
    min-width:0;
    flex:1;
}

.zs-profile-info strong{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:22px;
    line-height:1.2;
    font-weight:700;
}

.zs-profile-info span{
    display:block;
    margin-top:6px;
    color:#93a1b3;
    font-size:16px;
}

.zs-profile-info small{
    display:block;
    margin-top:10px;
    color:#9aa8b8;
    font-size:14px;
}

.zs-camera{
    flex:0 0 44px;
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    font-size:24px;
    color:#35a8ff;
}

.zs-divider{
    height:12px;
    background:#07111d;
    border-top:1px solid rgba(255,255,255,.025);
    border-bottom:1px solid rgba(255,255,255,.025);
}

.zs-settings-list{
    background:#101c2a;
}

.zs-setting-row{
    width:100%;
    min-height:64px;
    display:flex;
    align-items:center;
    gap:15px;
    padding:9px 18px;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.055);
    background:transparent;
    color:#fff;
    text-align:left;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}

.zs-setting-row:last-child{
    border-bottom:0;
}

.zs-setting-row:active,
.zs-setting-row.zs-tapped{
    background:#18283a;
}

.zs-setting-icon{
    flex:0 0 40px;
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:11px;
    font-size:21px;
    background:#1c8fe1;
}

.zs-setting-row:nth-child(2) .zs-setting-icon{
    background:#f3a516;
}

.zs-setting-row:nth-child(3) .zs-setting-icon{
    background:#36bd58;
}

.zs-setting-row:nth-child(4) .zs-setting-icon{
    background:#eb4e5a;
}

.zs-setting-row:nth-child(5) .zs-setting-icon{
    background:#536ee8;
}

.zs-setting-row:nth-child(6) .zs-setting-icon{
    background:#199ddd;
}

.zs-setting-row:nth-child(7) .zs-setting-icon{
    background:#24b6c7;
}

.zs-setting-row:nth-child(8) .zs-setting-icon{
    background:#ef7e25;
}

.zs-setting-row:nth-child(9) .zs-setting-icon{
    background:#9a4bdf;
}

.zs-setting-name{
    flex:1;
    min-width:0;
    font-size:17px;
    font-weight:500;
}

.zs-setting-arrow{
    color:#7e8b99;
    font-size:32px;
    font-weight:300;
}

.zs-version{
    padding:22px;
    text-align:center;
    color:#607083;
    font-size:13px;
}


/* Mobile tuning */

@media(max-width:700px){

    .zs-topbar{
        height:68px;
        padding-left:8px;
        padding-right:8px;
    }

    .zs-profile{
        min-height:138px;
        padding:20px 18px;
    }

    .zs-profile-photo{
        flex-basis:74px;
        width:74px;
        height:74px;
        font-size:29px;
    }

    .zs-profile-info strong{
        font-size:20px;
    }

    .zs-setting-row{
        min-height:62px;
        padding-left:16px;
        padding-right:14px;
    }
}



/* =========================================================
   ZEVRO OLD-TELEGRAM STYLE HOME
   ========================================================= */

.zevro-home-sidebar{
    position:relative;
    background:#fff;
}


/* ---------- TOP BAR ---------- */

.zevro-home-sidebar .top{
    height:64px;
    min-height:64px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:6px;
    padding:8px 12px;
    background:#4f83aa;
    color:#fff;
}

.zevro-home-sidebar .account-actions{
    order:1;
}

.zevro-home-sidebar .brand-mini{
    order:2;
    flex:1;
    min-width:0;
}

.zevro-home-sidebar .brand-mini .logo{
    display:none;
}

.zevro-home-sidebar .brand-mini b{
    font-size:20px;
    font-weight:600;
}

.zevro-home-sidebar .zevro-menu-button{
    width:42px;
    height:42px;
    font-size:0;
}

.zevro-home-sidebar .zevro-menu-button::before{
    content:'☰';
    font-size:25px;
    color:#fff;
}

.zevro-home-search-button{
    order:3;
    flex:0 0 42px;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    padding:0;
    border:0;
    border-radius:50%;
    background:transparent;
    color:#fff;
    font-size:31px;
    font-weight:300;
    cursor:pointer;
}

.zevro-home-search-button:active,
.zevro-home-sidebar .zevro-menu-button:active{
    background:rgba(255,255,255,.14);
}


/* Keep menu popup working after moving hamburger left */

.zevro-home-sidebar .zevro-main-menu{
    left:0;
    right:auto;
    top:48px;
}


/* ---------- OLD PROFILE AREA HIDDEN ---------- */

/*
 * Existing profile data/input remains in DOM,
 * so Settings/profile-photo code continues working.
 */
.zevro-home-sidebar > .me{
    display:none;
}


/* ---------- WELCOME ---------- */

.zevro-home-welcome{
    flex:0 0 auto;
    min-height:270px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:28px 20px 26px;
    text-align:center;
    background:#fff;
    border-bottom:10px solid #f1f2f3;
}

.zevro-home-welcome h2{
    margin:12px 0 8px;
    color:#363636;
    font-size:20px;
    font-weight:700;
}

.zevro-home-welcome p{
    margin:0;
    color:#8a8f94;
    font-size:14px;
    line-height:1.45;
}


/* ---------- ZEVRO CHICK / EGG ---------- */

.zevro-hatch-logo{
    position:relative;
    width:100px;
    height:100px;
}

.zevro-chick{
    position:absolute;
    z-index:2;
    left:25px;
    top:23px;
    width:52px;
    height:52px;
    border-radius:50%;
    background:#ffd52f;
    border:2px solid #e5b91a;
}

.zevro-eye{
    position:absolute;
    top:17px;
    width:7px;
    height:9px;
    border-radius:50%;
    background:#222;
}

.zevro-eye.left{
    left:13px;
}

.zevro-eye.right{
    right:13px;
}

.zevro-beak{
    position:absolute;
    left:20px;
    top:29px;
    width:13px;
    height:8px;
    border-radius:50% 50% 60% 60%;
    background:#f58220;
}

.zevro-egg-top{
    position:absolute;
    z-index:3;
    left:20px;
    top:5px;
    width:62px;
    height:35px;
    border-radius:60px 60px 8px 8px;
    background:#f5f5f2;
    border:2px solid #bcbcb6;
    transform:rotate(-5deg);
}

.zevro-egg-bottom{
    position:absolute;
    z-index:3;
    left:18px;
    bottom:5px;
    width:66px;
    height:39px;
    border-radius:8px 8px 50px 50px;
    background:#f3f1e8;
    border:2px solid #bbb9af;
}


/* ---------- CONTACTS TITLE ---------- */

.zevro-contacts-title{
    flex:0 0 auto;
    padding:17px 18px 8px;
    background:#fff;
    color:#4395bd;
    font-size:14px;
    font-weight:700;
}


/* ---------- SEARCH ---------- */

.zevro-home-sidebar .search{
    display:none;
    flex:0 0 auto;
    padding:10px 14px;
    background:#fff;
}

.zevro-home-sidebar .search.zevro-search-open{
    display:block;
}

.zevro-home-sidebar .search input{
    width:100%;
    height:43px;
    border:0;
    border-radius:22px;
    padding:0 18px;
    outline:none;
    background:#eef1f4;
    color:#222;
}


/* ---------- CONTACT LIST ---------- */

.zevro-home-sidebar .chat-list{
    flex:1;
    overflow:auto;
    background:#fff;
    padding-bottom:90px;
}

.zevro-home-sidebar .chat-item{
    min-height:70px;
    padding:10px 15px;
    border:0;
    border-bottom:1px solid #edf0f2;
    background:#fff;
}

.zevro-home-sidebar .chat-item:hover,
.zevro-home-sidebar .chat-item.active{
    background:#f4f6f7;
}

.zevro-home-sidebar .avatar{
    width:52px;
    height:52px;
    flex:0 0 52px;
}

.zevro-home-sidebar .chat-meta b{
    color:#292929;
    font-size:16px;
}

.zevro-home-sidebar .preview,
.zevro-home-sidebar .row span{
    color:#8b9197;
}


/* ---------- FLOATING PENCIL ---------- */

.zevro-compose-button{
    position:absolute;
    z-index:150;
    right:20px;
    bottom:22px;
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:50%;
    background:#4b96cf;
    color:#fff;
    font-size:31px;
    font-weight:400;
    box-shadow:0 5px 15px rgba(0,0,0,.25);
    cursor:pointer;
}

.zevro-compose-button:active{
    transform:scale(.95);
}


/* ---------- MOBILE ---------- */

@media(max-width:700px){

    .shell{
        background:#fff;
    }

    .zevro-home-sidebar{
        width:100%;
        height:100vh;
    }

    .zevro-home-sidebar .top{
        height:
            calc(60px + env(safe-area-inset-top));
        min-height:
            calc(60px + env(safe-area-inset-top));
        padding-top:
            calc(6px + env(safe-area-inset-top));
    }

    .zevro-home-welcome{
        min-height:260px;
    }

    .zevro-compose-button{
        right:18px;
        bottom:
            calc(20px + env(safe-area-inset-bottom));
    }

}


/* Smaller-height phones */

@media(max-height:700px) and (max-width:700px){

    .zevro-home-welcome{
        min-height:205px;
        padding-top:14px;
        padding-bottom:14px;
    }

    .zevro-hatch-logo{
        transform:scale(.82);
        margin:-7px 0;
    }
}



/* =========================================================
   ZEVRO ACCOUNT PAGE
   ========================================================= */

.zevro-account-screen{
    position:fixed;
    inset:0;
    z-index:99999;
    display:flex;
    flex-direction:column;
    background:#f1f2f4;
    color:#15171a;
    font-family:
        Inter,
        system-ui,
        -apple-system,
        "Segoe UI",
        sans-serif;
}


.za-header{
    flex:0 0 auto;
    height:68px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:
        max(8px,env(safe-area-inset-top))
        16px
        8px;
    background:#fff;
    border-bottom:1px solid #e1e3e6;
}

.za-header h1{
    margin:0;
    font-size:25px;
    font-weight:700;
}

.za-back{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border:0;
    background:transparent;
    color:#17191c;
    font-size:42px;
    line-height:1;
    cursor:pointer;
}


.za-scroll{
    flex:1;
    overflow:auto;
    padding:
        14px
        16px
        calc(22px + env(safe-area-inset-bottom));
}


/* ---------------- PROFILE ---------------- */

.za-profile-card{
    display:flex;
    align-items:center;
    gap:15px;
    padding:18px;
    margin-bottom:14px;
    border-radius:23px;
    background:#fff;
}

.za-profile-avatar{
    flex:0 0 72px;
    width:72px;
    height:72px;
    overflow:hidden;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#2497e8;
    color:#fff;
    font-size:28px;
    font-weight:800;
}

.za-profile-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.za-profile-text{
    flex:1;
    min-width:0;
}

.za-profile-text strong{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:20px;
}

.za-profile-text span{
    display:block;
    margin-top:4px;
    color:#69717a;
    font-size:15px;
}

.za-profile-text small{
    display:block;
    margin-top:7px;
    color:#838a92;
    font-size:13px;
}

.za-camera{
    width:44px;
    height:44px;
    border:0;
    background:transparent;
    color:#168fe0;
    font-size:24px;
}


/* ---------------- CARDS ---------------- */

.za-card{
    margin-bottom:14px;
    overflow:hidden;
    border-radius:22px;
    background:#fff;
}

.za-section-title{
    padding:
        17px
        18px
        6px;
    color:#168fd5;
    font-size:15px;
    font-weight:700;
}


.za-name-value{
    padding:17px 20px;
    font-size:20px;
    font-family:Georgia,serif;
    font-style:italic;
}

.za-name-divider{
    height:1px;
    margin-left:20px;
    background:#e6e8ea;
}


/* ---------------- BIO ---------------- */

.za-bio-card{
    position:relative;
    min-height:90px;
    display:flex;
    align-items:center;
    padding:20px;
}

.za-bio-text{
    padding-right:50px;
    font-size:18px;
    line-height:1.35;
}

.za-counter{
    position:absolute;
    right:18px;
    bottom:18px;
    color:#969ca3;
}

.za-help{
    margin:
        -3px
        16px
        17px;
    color:#7b8188;
    font-size:14px;
    line-height:1.4;
}

.za-help span{
    color:#168fd5;
}


/* ---------------- INFO ---------------- */

.za-info-row,
.za-action-row{
    width:100%;
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px 18px;
    border:0;
    background:transparent;
    text-align:left;
}

.za-icon{
    flex:0 0 42px;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:13px;
    color:#fff;
    font-size:21px;
    font-weight:700;
}

.za-green{
    background:#33c84a;
}

.za-orange{
    background:#f4a014;
}

.za-blue{
    background:#169bdc;
}

.za-purple{
    background:#9d4de2;
}

.za-info-text{
    flex:1;
    min-width:0;
}

.za-info-text b{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#1b1e21;
    font-size:17px;
    font-weight:500;
}

.za-info-text small{
    display:block;
    margin-top:3px;
    color:#858b91;
    font-size:14px;
}


/* ---------------- ACTIONS ---------------- */

.za-action-card{
    padding:3px 0;
}

.za-action-row b{
    flex:1;
    color:#1b1e21;
    font-size:17px;
    font-weight:500;
}

.za-action-right{
    color:#168fd5;
    font-size:17px;
}

.za-new{
    padding:3px 7px;
    border-radius:7px;
    background:#2f9deb;
    color:#fff;
    font-size:11px;
    font-weight:700;
}

.za-arrow{
    color:#727980;
    font-size:31px;
    line-height:1;
}

.za-line{
    height:1px;
    margin-left:74px;
    background:#e7e8ea;
}


/* ---------------- ACCOUNTS ---------------- */

.za-accounts-card{
    padding-bottom:6px;
}

.za-account-row{
    min-height:65px;
    display:flex;
    align-items:center;
    gap:13px;
    padding:8px 18px;
}

.za-mini-avatar{
    flex:0 0 42px;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#ef5d87;
    color:#fff;
    font-size:14px;
    font-weight:700;
}

.za-account-main{
    flex:1;
    min-width:0;
}

.za-account-main b{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:17px;
}

.za-account-main small{
    display:block;
    margin-top:2px;
    color:#858b91;
}

.za-current-badge{
    width:27px;
    height:27px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#279ee8;
    color:#fff;
    font-weight:800;
}


/* ---------------- LOG OUT ---------------- */

.za-logout-card{
    padding:0;
}

.za-logout{
    width:100%;
    display:flex;
    align-items:center;
    gap:18px;
    padding:18px 20px;
    border:0;
    background:#fff;
    color:#d9272d;
    text-align:left;
    font-size:18px;
    cursor:pointer;
}

.za-logout span{
    font-size:29px;
}


.za-bottom-space{
    height:10px;
}


/* ---------------- MOBILE ---------------- */

@media(max-width:700px){

    .za-scroll{
        padding-left:12px;
        padding-right:12px;
    }

    .za-profile-card{
        border-radius:20px;
    }

    .za-card{
        border-radius:20px;
    }

}



/* =========================================================
   ZEVRO SETTINGS EXTRA SECTIONS
   Screenshot-style cards
   ========================================================= */

.zs-settings-extra-card{
    margin:14px 14px 0;
    overflow:hidden;
    border-radius:22px;
    background:#fff;
    color:#17191c;
}

.zs-extra-heading{
    padding:
        18px
        18px
        8px;
    color:#258fc9;
    font-size:17px;
    font-weight:700;
}

.zs-extra-row{
    width:100%;
    min-height:70px;
    display:flex;
    align-items:center;
    gap:16px;
    padding:10px 18px;
    border:0;
    background:#fff;
    color:#17191c;
    text-align:left;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}

.zs-extra-row:active{
    background:#f1f3f5;
}

.zs-extra-icon{
    flex:0 0 44px;
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:13px;
    color:#fff;
    font-size:23px;
    font-weight:800;
}

.zs-extra-name{
    flex:1;
    min-width:0;
    font-size:18px;
    font-weight:500;
}

.zs-extra-value{
    color:#3d98ca;
    font-size:18px;
}


/* Screenshot-like icon colors */

.zs-premium-icon{
    background:linear-gradient(
        145deg,
        #ad4ce8,
        #5c75f2
    );
}

.zs-stars-icon{
    background:#ed8c0c;
}

.zs-business-icon{
    background:#df4056;
}

.zs-gift-icon{
    background:#f17a18;
}

.zs-question-icon{
    background:#eda10e;
}

.zs-faq-icon{
    background:#1c9bd9;
}

.zs-features-icon{
    background:#a449dc;
}

.zs-privacy-icon{
    background:#35be45;
}


/* Settings screen becomes same light screenshot style */

.zevro-settings-screen{
    background:#f1f2f4;
    color:#15171a;
}

.zs-topbar{
    background:#fff;
    color:#15171a;
    border-bottom:1px solid #e3e5e8;
}

.zs-back,
.zs-search-icon,
.zs-more-icon{
    color:#15171a;
}

.zs-profile{
    background:#fff;
    color:#15171a;
}

.zs-settings-list{
    margin:14px;
    overflow:hidden;
    border-radius:22px;
    background:#fff;
}

.zs-setting-row{
    background:#fff;
    color:#17191c;
}

.zs-setting-row:active,
.zs-setting-row.zs-tapped{
    background:#f1f3f5;
}

.zs-setting-arrow{
    color:#899098;
}

.zs-divider{
    height:0;
    border:0;
}

.zs-version{
    padding:25px 20px 30px;
    color:#8b8f95;
    text-align:center;
    font-size:14px;
}


@media(max-width:700px){

    .zs-settings-extra-card,
    .zs-settings-list{
        margin-left:12px;
        margin-right:12px;
        border-radius:20px;
    }

    .zs-extra-row{
        min-height:66px;
        padding-left:16px;
        padding-right:16px;
    }

    .zs-extra-icon{
        flex-basis:41px;
        width:41px;
        height:41px;
        border-radius:12px;
        font-size:21px;
    }

    .zs-extra-name{
        font-size:17px;
    }
}



/* =========================================================
   Welcome only for brand-new / empty account
   ========================================================= */

.zevro-home-welcome.zevro-welcome-hidden{
    display:none !important;
}

.zevro-contacts-title.zevro-contacts-title-empty{
    display:none !important;
}



/* =========================================================
   ZEVRO NEW MESSAGE SCREEN
   OLD TELEGRAM STYLE
   ========================================================= */

.zevro-new-message-screen{
    position:fixed;
    z-index:100100;
    inset:0;
    display:flex;
    flex-direction:column;
    background:#fff;
    color:#15171a;
    font-family:
        Inter,
        system-ui,
        -apple-system,
        "Segoe UI",
        sans-serif;
}


/* HEADER */

.znm-header{
    flex:0 0 auto;
    min-height:68px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:
        max(8px,env(safe-area-inset-top))
        12px
        8px;
    background:#5287ad;
    color:#fff;
}

.znm-back{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border:0;
    background:transparent;
    color:#fff;
    font-size:43px;
    line-height:1;
}

.znm-title{
    display:flex;
    flex-direction:column;
}

.znm-title b{
    font-size:20px;
    font-weight:600;
}

.znm-title small{
    margin-top:2px;
    color:rgba(255,255,255,.78);
    font-size:12px;
}


/* SEARCH */

.znm-search-wrap{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:10px;
    margin:12px 14px;
    padding:0 15px;
    height:48px;
    border-radius:24px;
    background:#f0f2f4;
}

.znm-search-icon{
    color:#7d858d;
    font-size:25px;
}

.znm-search-wrap input{
    flex:1;
    min-width:0;
    border:0;
    outline:none;
    background:transparent;
    color:#17191c;
    font-size:16px;
}

.znm-search-wrap input::placeholder{
    color:#92989f;
}


/* TITLE */

.znm-section-title{
    flex:0 0 auto;
    padding:
        8px
        18px
        8px;
    color:#3e96c2;
    font-size:14px;
    font-weight:700;
}


/* CONTACT LIST */

.znm-user-list{
    flex:1;
    overflow:auto;
    padding-bottom:
        calc(20px + env(safe-area-inset-bottom));
}

.znm-user{
    width:100%;
    min-height:72px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:9px 16px;
    border:0;
    border-bottom:1px solid #edf0f2;
    background:#fff;
    color:#191b1e;
    text-align:left;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}

.znm-user:active{
    background:#f2f4f5;
}


.znm-avatar{
    flex:0 0 52px;
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border-radius:50%;
    background:#4c91d5;
    color:#fff;
    font-size:21px;
    font-weight:700;
}

.znm-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}


.znm-user-info{
    flex:1;
    min-width:0;
}

.znm-user-info b{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:17px;
    font-weight:600;
}

.znm-user-info small{
    display:block;
    margin-top:4px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#8c9399;
    font-size:14px;
}

.znm-user-info small.online{
    color:#3d99c7;
}

.znm-user-arrow{
    color:#a2a8ad;
    font-size:29px;
}


/* EMPTY / LOADING */

.znm-loading{
    padding:40px;
    text-align:center;
    color:#8c9399;
}

.znm-empty{
    min-height:220px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:30px;
    text-align:center;
    color:#7f868d;
}

.znm-empty-icon{
    margin-bottom:13px;
    font-size:46px;
}

.znm-empty b{
    color:#34383c;
    font-size:17px;
}

.znm-empty span{
    max-width:270px;
    margin-top:7px;
    font-size:14px;
    line-height:1.4;
}



/* =========================================================
   ZEVRO NEW CONTACT
   ========================================================= */

.znm-new-contact-button{
    width:100%;
    min-height:64px;
    display:flex;
    align-items:center;
    gap:15px;
    padding:8px 17px;
    border:0;
    border-bottom:1px solid #edf0f2;
    background:#fff;
    color:#2488c7;
    text-align:left;
    font-size:17px;
    font-weight:600;
    cursor:pointer;
}

.znm-new-contact-button:active{
    background:#f2f4f5;
}

.znm-new-contact-icon{
    flex:0 0 48px;
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#4b94d2;
    color:#fff;
    font-size:32px;
    font-weight:300;
}


/* Full New Contact page */

.zevro-new-contact-screen{
    position:fixed;
    z-index:100200;
    inset:0;
    display:flex;
    flex-direction:column;
    background:#f1f2f4;
    color:#17191c;
    font-family:
        Inter,
        system-ui,
        -apple-system,
        "Segoe UI",
        sans-serif;
}


.znc-header{
    flex:0 0 auto;
    min-height:68px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:
        max(8px,env(safe-area-inset-top))
        11px
        8px;
    background:#5287ad;
    color:#fff;
}

.znc-back{
    flex:0 0 45px;
    width:45px;
    height:45px;
    display:grid;
    place-items:center;
    border:0;
    background:transparent;
    color:#fff;
    font-size:43px;
    line-height:1;
}

.znc-title{
    flex:1;
    font-size:20px;
    font-weight:600;
}

.znc-save{
    min-width:65px;
    height:42px;
    border:0;
    background:transparent;
    color:#fff;
    font-size:16px;
    font-weight:600;
}

.znc-save:disabled{
    opacity:.6;
}


.znc-body{
    flex:1;
    overflow:auto;
    padding:
        25px
        15px
        calc(30px + env(safe-area-inset-bottom));
}


.znc-avatar{
    width:86px;
    height:86px;
    display:grid;
    place-items:center;
    margin:
        5px
        auto
        24px;
    border-radius:50%;
    background:#4b94d2;
    color:#fff;
    font-size:39px;
}


.znc-card{
    overflow:hidden;
    padding:4px 18px;
    border-radius:20px;
    background:#fff;
}

.znc-card label{
    display:block;
    padding-top:14px;
    color:#3a99ca;
    font-size:13px;
    font-weight:600;
}

.znc-card input{
    width:100%;
    height:50px;
    padding:0;
    border:0;
    outline:none;
    background:transparent;
    color:#17191c;
    font-size:18px;
}

.znc-card input::placeholder{
    color:#a1a5aa;
}


.znc-line{
    height:1px;
    background:#e7e9eb;
}


.znc-help{
    margin:13px 13px 0;
    color:#858b91;
    font-size:14px;
    line-height:1.4;
}


.znc-error{
    min-height:24px;
    margin:17px 13px;
    color:#db3138;
    font-size:14px;
    text-align:center;
}



/* ==========================================================
   WHATSAPP-STYLE ZEVRO NEW CHAT
   ========================================================== */

.whatsapp-newchat{
    background:#0b1115 !important;
    color:#f4f7f8 !important;
}


/* HEADER */

.whatsapp-newchat .znm-header{
    min-height:70px;
    background:#0b1115;
    color:#f7f9fa;
    border-bottom:0;
    padding-left:15px;
    padding-right:12px;
}

.whatsapp-newchat .znm-back{
    flex:0 0 45px;
    width:45px;
    height:45px;
    color:#e8edef;
    font-size:30px;
}

.whatsapp-newchat .znm-title{
    flex:1;
}

.whatsapp-newchat .znm-title b{
    font-size:22px;
    font-weight:500;
}

.znm-more{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border:0;
    background:transparent;
    color:#e8edef;
    font-size:29px;
}


/* SEARCH */

.whatsapp-newchat .znm-search-wrap{
    height:53px;
    margin:5px 16px 13px;
    padding:0 17px;
    border-radius:28px;
    background:#20282d;
}

.whatsapp-newchat .znm-search-icon{
    color:#97a1a7;
    font-size:28px;
}

.whatsapp-newchat .znm-search-wrap input{
    color:#f2f5f6;
    font-size:17px;
}

.whatsapp-newchat .znm-search-wrap input::placeholder{
    color:#9ca5aa;
}


/* TOP ACTIONS */

.znm-actions{
    flex:0 0 auto;
    background:#0b1115;
}

.znm-action-row{
    width:100%;
    min-height:73px;
    display:flex;
    align-items:center;
    gap:18px;
    padding:8px 23px;
    border:0;
    background:#0b1115;
    color:#f4f7f8;
    text-align:left;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}

.znm-action-row:active{
    background:#182126;
}

.znm-action-icon{
    flex:0 0 52px;
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#d94e72;
    color:#101417;
    font-size:22px;
    font-weight:800;
}

.znm-action-name{
    flex:1;
    font-size:18px;
    font-weight:500;
}

.znm-qr{
    color:#eef3f5;
    font-size:25px;
}


/* CONTACT HEADING */

.znm-contacts-heading{
    flex:0 0 auto;
    padding:
        18px
        24px
        9px;
    background:#0b1115;
    color:#909ba1;
    font-size:15px;
    font-weight:600;
}


/* CONTACT LIST */

.whatsapp-newchat .znm-user-list{
    background:#0b1115;
}

.whatsapp-newchat .znm-user{
    min-height:75px;
    padding:9px 24px;
    border:0;
    background:#0b1115;
    color:#f5f7f8;
}

.whatsapp-newchat .znm-user:active{
    background:#182126;
}

.whatsapp-newchat .znm-avatar{
    flex:0 0 52px;
    width:52px;
    height:52px;
    background:#52656e;
}

.whatsapp-newchat .znm-user-info b{
    color:#f4f7f8;
    font-size:17px;
    font-weight:500;
}

.whatsapp-newchat .znm-user-info small{
    color:#929da3;
    font-size:14px;
}

.whatsapp-newchat .znm-user-info small.online{
    color:#27a8e0;
}


/* EMPTY */

.whatsapp-newchat .znm-loading,
.whatsapp-newchat .znm-empty{
    color:#929da3;
}

.whatsapp-newchat .znm-empty b{
    color:#f4f7f8;
}


/*
 * Disable old injected New Contact appearance.
 * Our new screen already contains the correct button.
 */
.whatsapp-newchat .znm-new-contact-button{
    display:none !important;
}



/* =========================================================
   FINAL WHATSAPP-LIKE NEW CHAT DESIGN
   ========================================================= */

.znmf-screen{
    position:fixed;
    z-index:999999;
    inset:0;
    display:flex;
    flex-direction:column;
    background:#0b1115;
    color:#f4f6f7;
    font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}

.znmf-header{
    min-height:70px;
    display:flex;
    align-items:center;
    padding:
        max(8px,env(safe-area-inset-top))
        14px
        8px;
    background:#0b1115;
}

.znmf-back,
.znmf-more{
    width:46px;
    height:46px;
    border:0;
    background:transparent;
    color:#f2f5f6;
    font-size:29px;
}

.znmf-title{
    flex:1;
    padding-left:7px;
    font-size:23px;
    font-weight:500;
}

.znmf-search{
    height:54px;
    margin:4px 16px 13px;
    padding:0 17px;
    display:flex;
    align-items:center;
    gap:12px;
    border-radius:28px;
    background:#20282d;
}

.znmf-search span{
    color:#9aa4aa;
    font-size:28px;
}

.znmf-search input{
    flex:1;
    min-width:0;
    border:0;
    outline:none;
    background:transparent;
    color:#f4f6f7;
    font-size:17px;
}

.znmf-search input::placeholder{
    color:#949da3;
}

.znmf-action{
    width:100%;
    min-height:74px;
    display:flex;
    align-items:center;
    gap:18px;
    padding:8px 24px;
    border:0;
    background:#0b1115;
    color:#f4f6f7;
    text-align:left;
}

.znmf-action:active{
    background:#182126;
}

.znmf-action-icon{
    flex:0 0 52px;
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#d94d72;
    font-size:21px;
}

.znmf-action b{
    flex:1;
    font-size:18px;
    font-weight:500;
}

.znmf-qr{
    font-size:26px;
}

.znmf-heading{
    padding:18px 24px 9px;
    color:#909ba1;
    font-size:15px;
    font-weight:600;
}

.znmf-users{
    flex:1;
    overflow:auto;
    padding-bottom:
        calc(20px + env(safe-area-inset-bottom));
}

.znmf-user{
    width:100%;
    min-height:74px;
    display:flex;
    align-items:center;
    gap:15px;
    padding:9px 24px;
    border:0;
    background:#0b1115;
    color:#f4f6f7;
    text-align:left;
}

.znmf-user:active{
    background:#182126;
}

.znmf-avatar{
    flex:0 0 52px;
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border-radius:50%;
    background:#52656e;
    color:#fff;
    font-size:20px;
    font-weight:700;
}

.znmf-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.znmf-info{
    flex:1;
    min-width:0;
}

.znmf-info b{
    display:block;
    color:#f4f6f7;
    font-size:17px;
    font-weight:500;
}

.znmf-info small{
    display:block;
    margin-top:4px;
    color:#929ca2;
    font-size:14px;
}

.znmf-info small.online{
    color:#31a9df;
}

.znmf-loading,
.znmf-empty{
    padding:40px 20px;
    text-align:center;
    color:#929ca2;
}



/* =========================================================
   ZEVRO TELEGRAM-STYLE ACCOUNTS CARD
   ========================================================= */

.zs-accounts-card{
    margin:14px 14px 0;
    overflow:hidden;
    border-radius:22px;
    background:#fff;
    color:#17191c;
}

.zs-accounts-heading{
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 18px 8px;
    color:#258fc9;
    font-size:16px;
    font-weight:700;
}

.zs-accounts-heading small{
    color:#8c9399;
    font-size:13px;
    font-weight:500;
}


.zs-account-row{
    width:100%;
    min-height:66px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:8px 18px;
    border:0;
    border-top:1px solid #eceef0;
    background:#fff;
    color:#17191c;
    text-align:left;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}

.zs-account-row:active{
    background:#f1f3f5;
}


.zs-account-avatar{
    flex:0 0 42px;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#e75b85;
    color:#fff;
    font-size:14px;
    font-weight:700;
}


.zs-account-row:nth-child(2) .zs-account-avatar{
    background:#38a8cd;
}

.zs-account-row:nth-child(3) .zs-account-avatar{
    background:#2998c2;
}

.zs-account-row:nth-child(4) .zs-account-avatar{
    background:#8d65d8;
}


.zs-account-info{
    flex:1;
    min-width:0;
}

.zs-account-info b{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#1a1d20;
    font-size:17px;
    font-weight:600;
}

.zs-account-info small{
    display:block;
    margin-top:3px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#858c92;
    font-size:13px;
}


.zs-account-check{
    width:29px;
    height:29px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#2d9be5;
    color:#fff;
    font-size:17px;
    font-weight:800;
}


.zs-account-arrow{
    color:#747c83;
    font-size:31px;
    line-height:1;
}


/* + Add Account */

.zs-add-account{
    width:100%;
    min-height:62px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:8px 18px;
    border:0;
    border-top:1px solid #eceef0;
    background:#fff;
    color:#218fd1;
    text-align:left;
    cursor:pointer;
    font-size:17px;
    font-weight:600;
}

.zs-add-account:active{
    background:#f1f3f5;
}

.zs-add-account-icon{
    flex:0 0 42px;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#269adf;
    color:#fff;
    font-size:29px;
    font-weight:300;
}


@media(max-width:700px){

    .zs-accounts-card{
        margin-left:12px;
        margin-right:12px;
        border-radius:20px;
    }

}



/* =========================================================
   BACK TO PREVIOUS ZEVRO ACCOUNT
   ========================================================= */

.zevro-back-previous-account{
    width:100%;
    min-height:68px;
    display:flex;
    align-items:center;
    gap:13px;
    margin-top:17px;
    padding:10px 14px;
    border:1px solid #26384d;
    border-radius:15px;
    background:#101c2d;
    color:#fff;
    text-align:left;
    cursor:pointer;
}

.zevro-back-previous-account:active{
    background:#17273b;
}

.zevro-back-previous-account:disabled{
    opacity:.65;
}


.zbpa-avatar{
    flex:0 0 45px;
    width:45px;
    height:45px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#2996d8;
    color:#fff;
    font-size:18px;
    font-weight:800;
}


.zbpa-info{
    flex:1;
    min-width:0;
}

.zbpa-info small{
    display:block;
    color:#8fa5ba;
    font-size:12px;
    font-weight:500;
}

.zbpa-info b{
    display:block;
    margin-top:3px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#fff;
    font-size:16px;
}


.zbpa-arrow{
    color:#91a4b5;
    font-size:29px;
}



/* =========================================================
   ZEVRO CHAT SETTINGS
   ========================================================= */

.zevro-chat-settings{
    position:fixed;
    inset:0;
    z-index:100500;
    display:flex;
    flex-direction:column;
    background:#f1f2f4;
    color:#17191c;
    font-family:
        Inter,
        system-ui,
        -apple-system,
        "Segoe UI",
        sans-serif;
}


/* HEADER */

.zcs-header{
    flex:0 0 auto;
    min-height:69px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:
        max(8px,env(safe-area-inset-top))
        12px
        8px;
    background:#fff;
    border-bottom:1px solid #e3e5e7;
}

.zcs-header h1{
    margin:0;
    font-size:23px;
    font-weight:700;
}

.zcs-back{
    width:45px;
    height:45px;
    display:grid;
    place-items:center;
    border:0;
    background:transparent;
    color:#17191c;
    font-size:42px;
    line-height:1;
}


/* SCROLL */

.zcs-scroll{
    flex:1;
    overflow:auto;
    padding:
        13px
        12px
        calc(25px + env(safe-area-inset-bottom));
}


/* CARD */

.zcs-card{
    overflow:hidden;
    margin-bottom:14px;
    border-radius:21px;
    background:#fff;
}

.zcs-section-label{
    margin:
        7px
        17px
        8px;
    color:#258fc9;
    font-size:14px;
    font-weight:700;
}

.zcs-section-title{
    padding:
        17px
        18px
        8px;
    color:#258fc9;
    font-size:15px;
    font-weight:700;
}


/* ROW */

.zcs-row{
    width:100%;
    min-height:67px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:10px 17px;
    border:0;
    border-bottom:1px solid #ebedef;
    background:#fff;
    color:#17191c;
    text-align:left;
    cursor:pointer;
}

.zcs-row:last-child{
    border-bottom:0;
}

.zcs-row:active{
    background:#f2f4f5;
}

.zcs-row-text{
    flex:1;
    min-width:0;
}

.zcs-row-text b{
    display:block;
    font-size:16px;
    font-weight:600;
}

.zcs-row-text small{
    display:block;
    margin-top:4px;
    color:#858c92;
    font-size:13px;
    line-height:1.3;
}

.zcs-arrow{
    color:#8a9298;
    font-size:30px;
}


/* ICON */

.zcs-icon{
    flex:0 0 42px;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    color:#fff;
    font-size:21px;
}

.zcs-blue{
    background:#319be1;
}

.zcs-cyan{
    background:#25aebc;
}

.zcs-orange{
    background:#ef9417;
}

.zcs-purple{
    background:#9954df;
}


/* SWITCH */

.zcs-switch{
    position:relative;
    flex:0 0 48px;
    width:48px;
    height:28px;
    border-radius:20px;
    background:#c3c8cc;
    transition:.18s;
}

.zcs-switch span{
    position:absolute;
    top:3px;
    left:3px;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 3px #0004;
    transition:.18s;
}

.zcs-switch.on{
    background:#2999df;
}

.zcs-switch.on span{
    transform:translateX(20px);
}


/* MESSAGE TEXT PREVIEW */

.zcs-text-preview{
    padding:14px 18px 8px;
    background:
        radial-gradient(
            #d2dde4 1px,
            transparent 1px
        );
    background-size:20px 20px;
}

.zcs-preview-bubble{
    width:max-content;
    max-width:85%;
    margin-left:auto;
    padding:11px 14px;
    border-radius:
        17px
        17px
        4px
        17px;
    background:#d9fdd3;
    color:#202326;
    line-height:1.35;
}

.zcs-slider-row{
    display:flex;
    align-items:center;
    gap:13px;
    padding:15px 18px 5px;
}

.zcs-slider-row span{
    color:#70787e;
    font-size:14px;
}

.zcs-slider-row .large{
    font-size:23px;
}

.zcs-slider-row input{
    flex:1;
    accent-color:#2999df;
}

.zcs-size-value{
    padding:0 18px 15px;
    text-align:center;
    color:#258fc9;
    font-size:13px;
    font-weight:600;
}

.zcs-bottom-space{
    height:12px;
}


/* =========================================================
   DARK MODE
   ========================================================= */

@media(prefers-color-scheme:dark){

    .zevro-chat-settings{
        background:#0b1115;
        color:#f4f6f7;
    }

    .zcs-header{
        background:#11181d;
        border-bottom-color:#20282e;
    }

    .zcs-header h1,
    .zcs-back{
        color:#f4f6f7;
    }

    .zcs-card{
        background:#171e22;
    }

    .zcs-row{
        background:#171e22;
        color:#f4f6f7;
        border-bottom-color:#252d32;
    }

    .zcs-row:active{
        background:#20282d;
    }

    .zcs-row-text small{
        color:#90999f;
    }

    .zcs-text-preview{
        background-color:#10171b;
    }

    .zcs-preview-bubble{
        background:#005c4b;
        color:#fff;
    }
}



/* =========================================================
   ZEVRO PRIVACY & SECURITY
   ========================================================= */

.zevro-privacy-security{
    position:fixed;
    inset:0;
    z-index:100600;
    display:flex;
    flex-direction:column;
    background:#f1f2f4;
    color:#17191c;
    font-family:
        Inter,
        system-ui,
        -apple-system,
        "Segoe UI",
        sans-serif;
}


/* HEADER */

.zps-header{
    flex:0 0 auto;
    min-height:69px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:
        max(8px,env(safe-area-inset-top))
        12px
        8px;
    background:#fff;
    border-bottom:1px solid #e3e5e7;
}

.zps-header h1{
    margin:0;
    font-size:23px;
    font-weight:700;
}

.zps-back{
    width:45px;
    height:45px;
    display:grid;
    place-items:center;
    border:0;
    background:transparent;
    color:#17191c;
    font-size:42px;
    line-height:1;
}


/* BODY */

.zps-scroll{
    flex:1;
    overflow:auto;
    padding:
        13px
        12px
        calc(25px + env(safe-area-inset-bottom));
}

.zps-section-label{
    margin:
        7px
        17px
        8px;
    color:#258fc9;
    font-size:14px;
    font-weight:700;
}

.zps-card{
    overflow:hidden;
    margin-bottom:14px;
    border-radius:21px;
    background:#fff;
}


/* ROW */

.zps-row{
    width:100%;
    min-height:68px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:10px 17px;
    border:0;
    border-bottom:1px solid #ebedef;
    background:#fff;
    color:#17191c;
    text-align:left;
    cursor:pointer;
}

.zps-row:last-child{
    border-bottom:0;
}

.zps-row:active{
    background:#f2f4f5;
}


.zps-icon{
    flex:0 0 42px;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#2999df;
    color:#fff;
    font-size:20px;
}


.zps-text{
    flex:1;
    min-width:0;
}

.zps-text b{
    display:block;
    font-size:16px;
    font-weight:600;
}

.zps-text small{
    display:block;
    margin-top:4px;
    color:#858c92;
    font-size:13px;
    line-height:1.3;
}


.zps-value{
    max-width:105px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#258fc9;
    font-size:14px;
}


.zps-arrow{
    color:#8a9298;
    font-size:30px;
}


/* SWITCH */

.zps-switch{
    position:relative;
    flex:0 0 48px;
    width:48px;
    height:28px;
    border-radius:20px;
    background:#c3c8cc;
    transition:.18s;
}

.zps-switch span{
    position:absolute;
    top:3px;
    left:3px;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 3px #0004;
    transition:.18s;
}

.zps-switch.on{
    background:#2999df;
}

.zps-switch.on span{
    transform:translateX(20px);
}


/* DELETE */

.zps-danger-row{
    color:#d82f35;
}

.zps-danger-row .zps-icon{
    background:#e24e53;
}


/* DARK */

@media(prefers-color-scheme:dark){

    .zevro-privacy-security{
        background:#0b1115;
        color:#f4f6f7;
    }

    .zps-header{
        background:#11181d;
        border-bottom-color:#20282e;
    }

    .zps-header h1,
    .zps-back{
        color:#f4f6f7;
    }

    .zps-card{
        background:#171e22;
    }

    .zps-row{
        background:#171e22;
        color:#f4f6f7;
        border-bottom-color:#252d32;
    }

    .zps-row:active{
        background:#20282d;
    }

    .zps-text small{
        color:#90999f;
    }
}



/* =========================================================
   ZEVRO NOTIFICATION SETTINGS
   ========================================================= */

.zevro-notification-settings{
    position:fixed;
    inset:0;
    z-index:100700;
    display:flex;
    flex-direction:column;
    background:#f1f2f4;
    color:#17191c;
    font-family:
        Inter,
        system-ui,
        -apple-system,
        "Segoe UI",
        sans-serif;
}


.zns-header{
    flex:0 0 auto;
    min-height:69px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:
        max(8px,env(safe-area-inset-top))
        12px
        8px;
    background:#fff;
    border-bottom:1px solid #e3e5e7;
}

.zns-header h1{
    margin:0;
    font-size:22px;
    font-weight:700;
}

.zns-back{
    width:45px;
    height:45px;
    display:grid;
    place-items:center;
    border:0;
    background:transparent;
    color:#17191c;
    font-size:42px;
    line-height:1;
}


.zns-scroll{
    flex:1;
    overflow:auto;
    padding:
        13px
        12px
        calc(25px + env(safe-area-inset-bottom));
}


.zns-section-label{
    margin:
        7px
        17px
        8px;
    color:#258fc9;
    font-size:14px;
    font-weight:700;
}


.zns-card{
    overflow:hidden;
    margin-bottom:14px;
    border-radius:21px;
    background:#fff;
}


.zns-row{
    width:100%;
    min-height:68px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:10px 17px;
    border:0;
    border-bottom:1px solid #ebedef;
    background:#fff;
    color:#17191c;
    text-align:left;
    cursor:pointer;
}

.zns-row:last-child{
    border-bottom:0;
}

.zns-row:active{
    background:#f2f4f5;
}


.zns-icon{
    flex:0 0 42px;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#2999df;
    color:#fff;
    font-size:20px;
}


.zns-text{
    flex:1;
    min-width:0;
}

.zns-text b{
    display:block;
    font-size:16px;
    font-weight:600;
}

.zns-text small{
    display:block;
    margin-top:4px;
    color:#858c92;
    font-size:13px;
    line-height:1.3;
}


.zns-value{
    max-width:110px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#258fc9;
    font-size:14px;
}


.zns-arrow{
    color:#8a9298;
    font-size:30px;
}


.zns-switch{
    position:relative;
    flex:0 0 48px;
    width:48px;
    height:28px;
    border-radius:20px;
    background:#c3c8cc;
    transition:.18s;
}

.zns-switch span{
    position:absolute;
    top:3px;
    left:3px;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 3px #0004;
    transition:.18s;
}

.zns-switch.on{
    background:#2999df;
}

.zns-switch.on span{
    transform:translateX(20px);
}


.zns-reset-row{
    color:#d52f35;
}

.zns-reset-row .zns-icon{
    background:#e25358;
}


.zns-bottom-space{
    height:12px;
}


@media(prefers-color-scheme:dark){

    .zevro-notification-settings{
        background:#0b1115;
        color:#f4f6f7;
    }

    .zns-header{
        background:#11181d;
        border-bottom-color:#20282e;
    }

    .zns-header h1,
    .zns-back{
        color:#f4f6f7;
    }

    .zns-card{
        background:#171e22;
    }

    .zns-row{
        background:#171e22;
        color:#f4f6f7;
        border-bottom-color:#252d32;
    }

    .zns-row:active{
        background:#20282d;
    }

    .zns-text small{
        color:#90999f;
    }
}



/* =========================================================
   ZEVRO DATA AND STORAGE
   ========================================================= */

.zevro-data-storage{
    position:fixed;
    inset:0;
    z-index:100800;
    display:flex;
    flex-direction:column;
    background:#f1f2f4;
    color:#17191c;
    font-family:
        Inter,
        system-ui,
        -apple-system,
        "Segoe UI",
        sans-serif;
}


.zds-header{
    flex:0 0 auto;
    min-height:69px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:
        max(8px,env(safe-area-inset-top))
        12px
        8px;
    background:#fff;
    border-bottom:1px solid #e3e5e7;
}


.zds-header h1{
    margin:0;
    font-size:22px;
    font-weight:700;
}


.zds-back{
    width:45px;
    height:45px;
    display:grid;
    place-items:center;
    border:0;
    background:transparent;
    color:#17191c;
    font-size:42px;
    line-height:1;
}


.zds-scroll{
    flex:1;
    overflow:auto;
    padding:
        13px
        12px
        calc(25px + env(safe-area-inset-bottom));
}


.zds-section-label{
    margin:
        7px
        17px
        8px;
    color:#258fc9;
    font-size:14px;
    font-weight:700;
}


.zds-card{
    overflow:hidden;
    margin-bottom:14px;
    border-radius:21px;
    background:#fff;
}


.zds-row{
    width:100%;
    min-height:68px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:10px 17px;
    border:0;
    border-bottom:1px solid #ebedef;
    background:#fff;
    color:#17191c;
    text-align:left;
    cursor:pointer;
}


.zds-row:last-child{
    border-bottom:0;
}


.zds-row:active{
    background:#f2f4f5;
}


.zds-icon{
    flex:0 0 42px;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#2999df;
    color:#fff;
    font-size:20px;
}


.zds-text{
    flex:1;
    min-width:0;
}


.zds-text b{
    display:block;
    font-size:16px;
    font-weight:600;
}


.zds-text small{
    display:block;
    margin-top:4px;
    color:#858c92;
    font-size:13px;
    line-height:1.3;
}


.zds-value{
    max-width:100px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#258fc9;
    font-size:14px;
}


.zds-arrow{
    color:#8a9298;
    font-size:30px;
}


/* SWITCH */

.zds-switch{
    position:relative;
    flex:0 0 48px;
    width:48px;
    height:28px;
    border-radius:20px;
    background:#c3c8cc;
    transition:.18s;
}


.zds-switch span{
    position:absolute;
    top:3px;
    left:3px;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 3px #0004;
    transition:.18s;
}


.zds-switch.on{
    background:#2999df;
}


.zds-switch.on span{
    transform:translateX(20px);
}


.zds-reset{
    color:#258fc9;
}


.zds-bottom-space{
    height:12px;
}


/* DARK MODE */

@media(prefers-color-scheme:dark){

    .zevro-data-storage{
        background:#0b1115;
        color:#f4f6f7;
    }

    .zds-header{
        background:#11181d;
        border-bottom-color:#20282e;
    }

    .zds-header h1,
    .zds-back{
        color:#f4f6f7;
    }

    .zds-card{
        background:#171e22;
    }

    .zds-row{
        background:#171e22;
        color:#f4f6f7;
        border-bottom-color:#252d32;
    }

    .zds-row:active{
        background:#20282d;
    }

    .zds-text small{
        color:#90999f;
    }
}



/* =========================================================
   ZEVRO CHAT FOLDERS
   ========================================================= */

.zevro-chat-folders{
    position:fixed;
    inset:0;
    z-index:100900;
    display:flex;
    flex-direction:column;
    background:#f1f2f4;
    color:#17191c;
    font-family:
        Inter,
        system-ui,
        -apple-system,
        "Segoe UI",
        sans-serif;
}


.zcf-header{
    min-height:69px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:
        max(8px,env(safe-area-inset-top))
        12px
        8px;
    background:#fff;
    border-bottom:1px solid #e3e5e7;
}


.zcf-header h1{
    margin:0;
    font-size:23px;
    font-weight:700;
}


.zcf-back{
    width:45px;
    height:45px;
    border:0;
    background:transparent;
    color:#17191c;
    font-size:42px;
}


.zcf-scroll{
    flex:1;
    overflow:auto;
    padding:
        13px
        12px
        calc(25px + env(safe-area-inset-bottom));
}


.zcf-intro{
    margin:
        5px
        8px
        17px;
    color:#7e858b;
    font-size:14px;
    line-height:1.45;
}


.zcf-section-label{
    margin:
        8px
        17px
        8px;
    color:#258fc9;
    font-size:14px;
    font-weight:700;
}


.zcf-card{
    overflow:hidden;
    margin-bottom:15px;
    border-radius:21px;
    background:#fff;
}


/* CREATE */

.zcf-create{
    width:100%;
    min-height:68px;
    display:flex;
    align-items:center;
    gap:15px;
    padding:10px 18px;
    border:0;
    background:#fff;
    color:#258fc9;
    text-align:left;
    font-size:17px;
    font-weight:600;
}


.zcf-create-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#2999df;
    color:#fff;
    font-size:28px;
}


/* FOLDER */

.zcf-folder-row{
    min-height:67px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:10px 17px;
    border-bottom:1px solid #ebedef;
}


.zcf-folder-row:last-child{
    border-bottom:0;
}


.zcf-folder-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#2999df;
    color:#fff;
    font-size:20px;
}


.zcf-folder-info{
    flex:1;
}


.zcf-folder-info b{
    font-size:16px;
}


.zcf-folder-drag{
    color:#92999e;
    font-size:20px;
}


.zcf-delete-folder{
    width:32px;
    height:32px;
    border:0;
    background:transparent;
    color:#db4147;
    font-size:25px;
}


/* RECOMMENDED */

.zcf-recommended{
    width:100%;
    min-height:70px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:10px 17px;
    border:0;
    border-bottom:1px solid #ebedef;
    background:#fff;
    color:#17191c;
    text-align:left;
}


.zcf-recommended:last-child{
    border-bottom:0;
}


.zcf-rec-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#2999df;
    font-size:20px;
}


.zcf-rec-info{
    flex:1;
    min-width:0;
}


.zcf-rec-info b{
    display:block;
    font-size:16px;
}


.zcf-rec-info small{
    display:block;
    margin-top:4px;
    color:#858c92;
    font-size:13px;
}


.zcf-add{
    color:#258fc9;
    font-size:15px;
    font-weight:600;
}


.zcf-bottom-space{
    height:12px;
}


/* DARK MODE */

@media(prefers-color-scheme:dark){

    .zevro-chat-folders{
        background:#0b1115;
        color:#f4f6f7;
    }

    .zcf-header{
        background:#11181d;
        border-bottom-color:#20282e;
    }

    .zcf-header h1,
    .zcf-back{
        color:#f4f6f7;
    }

    .zcf-card{
        background:#171e22;
    }

    .zcf-create,
    .zcf-recommended{
        background:#171e22;
    }

    .zcf-recommended{
        color:#f4f6f7;
        border-bottom-color:#252d32;
    }

    .zcf-folder-row{
        border-bottom-color:#252d32;
    }

    .zcf-rec-info small{
        color:#90999f;
    }
}



/* =========================================================
   ZEVRO DEVICES
   ========================================================= */

.zevro-devices{
    position:fixed;
    inset:0;
    z-index:101000;
    display:flex;
    flex-direction:column;
    background:#f1f2f4;
    color:#17191c;
    font-family:
        Inter,
        system-ui,
        -apple-system,
        "Segoe UI",
        sans-serif;
}


.zdv-header{
    min-height:69px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:
        max(8px,env(safe-area-inset-top))
        12px
        8px;
    background:#fff;
    border-bottom:1px solid #e3e5e7;
}


.zdv-header h1{
    margin:0;
    font-size:23px;
    font-weight:700;
}


.zdv-back{
    width:45px;
    height:45px;
    border:0;
    background:transparent;
    color:#17191c;
    font-size:42px;
}


.zdv-scroll{
    flex:1;
    overflow:auto;
    padding:
        13px
        12px
        calc(25px + env(safe-area-inset-bottom));
}


.zdv-section-label{
    margin:
        7px
        17px
        8px;
    color:#258fc9;
    font-size:14px;
    font-weight:700;
}


.zdv-card{
    overflow:hidden;
    margin-bottom:14px;
    border-radius:21px;
    background:#fff;
}


/* DEVICE ROW */

.zdv-device-row{
    min-height:76px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:11px 17px;
    border-bottom:1px solid #ebedef;
}


.zdv-device-row:last-child{
    border-bottom:0;
}


.zdv-device-icon{
    flex:0 0 46px;
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#2999df;
    color:#fff;
    font-size:23px;
}


.zdv-device-info{
    flex:1;
    min-width:0;
}


.zdv-device-info b{
    display:block;
    font-size:16px;
    font-weight:600;
}


.zdv-device-info small{
    display:block;
    margin-top:3px;
    color:#858c92;
    font-size:13px;
}


.zdv-device-info small.online{
    color:#2999df;
}


.zdv-current{
    color:#2999df;
    font-size:13px;
    font-weight:600;
}


.zdv-remove-device{
    width:35px;
    height:35px;
    border:0;
    background:transparent;
    color:#db4147;
    font-size:27px;
}


/* LINK */

.zdv-link-device{
    width:100%;
    min-height:72px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:10px 17px;
    border:0;
    background:#fff;
    color:#17191c;
    text-align:left;
}


.zdv-link-icon{
    flex:0 0 44px;
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#2999df;
    color:#fff;
    font-size:23px;
}


.zdv-link-text{
    flex:1;
}


.zdv-link-text b{
    display:block;
    font-size:16px;
}


.zdv-link-text small{
    display:block;
    margin-top:4px;
    color:#858c92;
    font-size:13px;
}


.zdv-arrow{
    color:#8a9298;
    font-size:30px;
}


/* EMPTY */

.zdv-empty{
    min-height:180px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:25px;
    text-align:center;
}


.zdv-empty > span{
    font-size:42px;
}


.zdv-empty b{
    margin-top:10px;
    font-size:16px;
}


.zdv-empty small{
    margin-top:6px;
    color:#858c92;
    font-size:13px;
}


/* TERMINATE */

.zdv-terminate{
    width:100%;
    min-height:62px;
    display:flex;
    align-items:center;
    gap:15px;
    padding:10px 18px;
    border:0;
    background:#fff;
    color:#da3339;
    font-size:16px;
    font-weight:600;
    text-align:left;
}


.zdv-help{
    margin:4px 16px 15px;
    color:#858c92;
    font-size:13px;
    line-height:1.45;
}


.zdv-bottom-space{
    height:12px;
}


/* DARK MODE */

@media(prefers-color-scheme:dark){

    .zevro-devices{
        background:#0b1115;
        color:#f4f6f7;
    }

    .zdv-header{
        background:#11181d;
        border-bottom-color:#20282e;
    }

    .zdv-header h1,
    .zdv-back{
        color:#f4f6f7;
    }

    .zdv-card{
        background:#171e22;
    }

    .zdv-device-row{
        border-bottom-color:#252d32;
    }

    .zdv-link-device,
    .zdv-terminate{
        background:#171e22;
    }

    .zdv-link-device{
        color:#f4f6f7;
    }

    .zdv-device-info small,
    .zdv-link-text small,
    .zdv-empty small{
        color:#90999f;
    }
}



/* =========================================================
   ZEVRO POWER SAVING
   ========================================================= */

.zevro-power-saving{
    position:fixed;
    inset:0;
    z-index:101100;
    display:flex;
    flex-direction:column;
    background:#f1f2f4;
    color:#17191c;
    font-family:
        Inter,
        system-ui,
        -apple-system,
        "Segoe UI",
        sans-serif;
}


.zpw-header{
    min-height:69px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:
        max(8px,env(safe-area-inset-top))
        12px
        8px;
    background:#fff;
    border-bottom:1px solid #e3e5e7;
}


.zpw-header h1{
    margin:0;
    font-size:23px;
    font-weight:700;
}


.zpw-back{
    width:45px;
    height:45px;
    border:0;
    background:transparent;
    color:#17191c;
    font-size:42px;
}


.zpw-scroll{
    flex:1;
    overflow:auto;
    padding:
        13px
        12px
        calc(25px + env(safe-area-inset-bottom));
}


.zpw-section-label{
    margin:
        7px
        17px
        8px;
    color:#258fc9;
    font-size:14px;
    font-weight:700;
}


.zpw-card{
    overflow:hidden;
    margin-bottom:14px;
    border-radius:21px;
    background:#fff;
}


.zpw-row{
    width:100%;
    min-height:68px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:10px 17px;
    border:0;
    border-bottom:1px solid #ebedef;
    background:#fff;
    color:#17191c;
    text-align:left;
}


.zpw-row:last-child{
    border-bottom:0;
}


.zpw-icon{
    flex:0 0 42px;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#2da65f;
    color:#fff;
    font-size:20px;
}


.zpw-text{
    flex:1;
    min-width:0;
}


.zpw-text b{
    display:block;
    font-size:16px;
    font-weight:600;
}


.zpw-text small{
    display:block;
    margin-top:4px;
    color:#858c92;
    font-size:13px;
    line-height:1.3;
}


/* SWITCH */

.zpw-switch{
    position:relative;
    flex:0 0 48px;
    width:48px;
    height:28px;
    border-radius:20px;
    background:#c3c8cc;
    transition:.18s;
}


.zpw-switch span{
    position:absolute;
    top:3px;
    left:3px;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 3px #0004;
    transition:.18s;
}


.zpw-switch.on{
    background:#2da65f;
}


.zpw-switch.on span{
    transform:translateX(20px);
}


/* BATTERY TRIGGER */

.zpw-trigger{
    padding:18px;
}


.zpw-trigger-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
}


.zpw-trigger-head span{
    flex:1;
}


.zpw-trigger-head b{
    display:block;
    font-size:16px;
}


.zpw-trigger-head small{
    display:block;
    margin-top:4px;
    color:#858c92;
    font-size:13px;
}


.zpw-trigger-head strong{
    color:#2da65f;
    font-size:16px;
}


.zpw-trigger input{
    width:100%;
    margin-top:18px;
    accent-color:#2da65f;
}


/* RESET */

.zpw-reset{
    color:#258fc9;
}


.zpw-reset .zpw-icon{
    background:#2999df;
}


.zpw-help{
    margin:3px 16px 14px;
    color:#858c92;
    font-size:13px;
    line-height:1.45;
}


.zpw-bottom-space{
    height:12px;
}


/* DARK MODE */

@media(prefers-color-scheme:dark){

    .zevro-power-saving{
        background:#0b1115;
        color:#f4f6f7;
    }

    .zpw-header{
        background:#11181d;
        border-bottom-color:#20282e;
    }

    .zpw-header h1,
    .zpw-back{
        color:#f4f6f7;
    }

    .zpw-card{
        background:#171e22;
    }

    .zpw-row{
        background:#171e22;
        color:#f4f6f7;
        border-bottom-color:#252d32;
    }

    .zpw-text small,
    .zpw-trigger-head small{
        color:#90999f;
    }
}



/* =========================================================
   ZEVRO LANGUAGE
   ========================================================= */

.zevro-language{
    position:fixed;
    inset:0;
    z-index:101200;
    display:flex;
    flex-direction:column;
    background:#f1f2f4;
    color:#17191c;
    font-family:
        Inter,
        system-ui,
        -apple-system,
        "Segoe UI",
        sans-serif;
}


/* HEADER */

.zlg-header{
    min-height:69px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:
        max(8px,env(safe-area-inset-top))
        12px
        8px;
    background:#fff;
    border-bottom:1px solid #e3e5e7;
}


.zlg-header h1{
    margin:0;
    font-size:23px;
    font-weight:700;
}


.zlg-back{
    width:45px;
    height:45px;
    display:grid;
    place-items:center;
    border:0;
    background:transparent;
    color:#17191c;
    font-size:42px;
    line-height:1;
}


/* BODY */

.zlg-scroll{
    flex:1;
    overflow:auto;
    padding:
        13px
        12px
        calc(25px + env(safe-area-inset-bottom));
}


/* SEARCH */

.zlg-search-wrap{
    height:48px;
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:15px;
    padding:0 15px;
    border-radius:16px;
    background:#fff;
}


.zlg-search-wrap span{
    opacity:.55;
}


.zlg-search-wrap input{
    flex:1;
    height:100%;
    border:0;
    outline:0;
    background:transparent;
    color:#17191c;
    font-size:16px;
}


.zlg-section-label{
    margin:
        7px
        17px
        8px;
    color:#258fc9;
    font-size:14px;
    font-weight:700;
}


/* CARD */

.zlg-card{
    overflow:hidden;
    margin-bottom:14px;
    border-radius:21px;
    background:#fff;
}


/* LANGUAGE ROW */

.zlg-row{
    width:100%;
    min-height:65px;
    display:flex;
    align-items:center;
    gap:15px;
    padding:10px 17px;
    border:0;
    border-bottom:1px solid #ebedef;
    background:#fff;
    color:#17191c;
    text-align:left;
    cursor:pointer;
}


.zlg-row:last-child{
    border-bottom:0;
}


.zlg-row:active{
    background:#f2f4f5;
}


/* RADIO */

.zlg-radio{
    flex:0 0 22px;
    width:22px;
    height:22px;
    display:grid;
    place-items:center;
    border:2px solid #a7adb2;
    border-radius:50%;
}


.zlg-radio.active{
    border-color:#2999df;
}


.zlg-radio.active span{
    width:12px;
    height:12px;
    border-radius:50%;
    background:#2999df;
}


/* TEXT */

.zlg-text{
    flex:1;
    min-width:0;
}


.zlg-text b{
    display:block;
    font-size:16px;
    font-weight:600;
}


.zlg-text small{
    display:block;
    margin-top:3px;
    color:#858c92;
    font-size:13px;
}


.zlg-check{
    color:#2999df;
    font-size:22px;
    font-weight:700;
}


.zlg-help{
    margin:3px 16px 15px;
    color:#858c92;
    font-size:13px;
    line-height:1.45;
}


.zlg-bottom-space{
    height:12px;
}


/* DARK MODE */

@media(prefers-color-scheme:dark){

    .zevro-language{
        background:#0b1115;
        color:#f4f6f7;
    }


    .zlg-header{
        background:#11181d;
        border-bottom-color:#20282e;
    }


    .zlg-header h1,
    .zlg-back{
        color:#f4f6f7;
    }


    .zlg-search-wrap,
    .zlg-card{
        background:#171e22;
    }


    .zlg-search-wrap input{
        color:#f4f6f7;
    }


    .zlg-row{
        background:#171e22;
        color:#f4f6f7;
        border-bottom-color:#252d32;
    }


    .zlg-row:active{
        background:#20282d;
    }


    .zlg-text small{
        color:#90999f;
    }
}



/* =========================================================
   IMO-STYLE CHAT HEADER CALL BUTTONS
   ========================================================= */

.chat-head .imo-call-actions{
    display:flex;
    align-items:center;
    gap:9px;
    margin-left:auto;
}

.chat-head .imo-call-button{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    display:grid !important;
    place-items:center !important;
    padding:0 !important;
    border:0 !important;
    border-radius:50% !important;
    background:#eaf5ff !important;
    color:#168fe0 !important;
    box-shadow:none !important;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:
        transform .12s ease,
        background .12s ease;
}

.chat-head .imo-call-button:active{
    transform:scale(.92);
    background:#d9efff !important;
}

.chat-head .imo-call-icon{
    display:block;
    font-size:24px;
    line-height:1;
    transform:rotate(-8deg);
}

.chat-head .imo-video-icon{
    position:relative;
    display:block;
    width:24px;
    height:18px;
    border-radius:4px;
    background:#168fe0;
    font-size:0;
}

.chat-head .imo-video-icon::after{
    content:'';
    position:absolute;
    top:4px;
    right:-7px;
    width:8px;
    height:10px;
    background:#168fe0;
    clip-path:polygon(
        0 20%,
        100% 0,
        100% 100%,
        0 80%
    );
}


/* smaller phones */

@media(max-width:390px){

    .chat-head .imo-call-actions{
        gap:6px;
    }

    .chat-head .imo-call-button{
        width:43px !important;
        height:43px !important;
        min-width:43px !important;
    }

    .chat-head .imo-call-icon{
        font-size:22px;
    }

    .chat-head .imo-video-icon{
        width:22px;
        height:16px;
    }
}


/* dark mode */

@media(prefers-color-scheme:dark){

    .chat-head .imo-call-button{
        background:#153452 !important;
        color:#39a8f2 !important;
    }

    .chat-head .imo-call-button:active{
        background:#1b456b !important;
    }

    .chat-head .imo-video-icon,
    .chat-head .imo-video-icon::after{
        background:#39a8f2;
    }
}


/* =========================================================
   FINAL CLEAN CALL ICON FIX
   ========================================================= */

.chat-head .imo-call-button{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    border-radius:50% !important;
    background:#eaf5ff !important;
    color:#168fe0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    border:0 !important;
}

.chat-head .imo-svg-icon{
    width:24px;
    height:24px;
    display:block;
    fill:currentColor;
}

.chat-head .imo-video-svg{
    width:25px;
    height:25px;
}

/* remove old fake icon styling */
.chat-head .imo-call-icon,
.chat-head .imo-video-icon{
    display:none !important;
}

@media(prefers-color-scheme:dark){

    .chat-head .imo-call-button{
        background:#153452 !important;
        color:#39a8f2 !important;
    }
}



/* =========================================================
   CHAT HEADER 3-DOT BUTTON
   ========================================================= */

.chat-head .imo-chat-more{
    width:36px !important;
    height:46px !important;
    min-width:36px !important;
    display:flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    color:#15191d !important;
}

.chat-head .imo-chat-more span{
    width:4px;
    height:4px;
    display:block;
    border-radius:50%;
    background:currentColor;
}


/* =========================================================
   CHAT 3-DOT POPUP
   ========================================================= */

.zevro-chat-more-menu{
    position:fixed;
    z-index:999999;
    top:
        calc(
            max(
                8px,
                env(safe-area-inset-top)
            )
            + 57px
        );
    right:10px;
    width:235px;
    overflow:hidden;
    padding:6px 0;
    border-radius:13px;
    background:#fff;
    box-shadow:
        0 5px 25px rgba(0,0,0,.22);
}

.zevro-chat-more-menu button{
    width:100%;
    min-height:48px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:8px 17px;
    border:0;
    background:#fff;
    color:#191c1f;
    text-align:left;
}

.zevro-chat-more-menu button:active{
    background:#f0f2f4;
}

.zevro-chat-more-menu button span{
    width:25px;
    text-align:center;
    font-size:18px;
}

.zevro-chat-more-menu button b{
    font-size:15px;
    font-weight:500;
}

.zevro-chat-more-menu button.danger{
    color:#dd343a;
}


/* DARK */

@media(prefers-color-scheme:dark){

    .chat-head .imo-chat-more{
        color:#eef3f5 !important;
    }

    .zevro-chat-more-menu{
        background:#20272c;
        box-shadow:
            0 6px 25px rgba(0,0,0,.45);
    }

    .zevro-chat-more-menu button{
        background:#20272c;
        color:#f3f6f7;
    }

    .zevro-chat-more-menu button:active{
        background:#2a3339;
    }

    .zevro-chat-more-menu button.danger{
        color:#ff6268;
    }
}


/* Hide dashboard compose button while a chat is open */
#zevroComposeButton.zevro-compose-hidden{
    display:none !important;
}



/* =========================================================
   ZEVRO CHANNEL UI
   ========================================================= */

.zevro-create-channel,
.zevro-channel-view{
    position:fixed;
    inset:0;
    z-index:102000;
    display:flex;
    flex-direction:column;
    background:#f1f2f4;
    color:#17191c;
}


.zcc-header,
.zcv-header{
    min-height:69px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:
        max(8px,env(safe-area-inset-top))
        12px
        8px;
    background:#fff;
    border-bottom:1px solid #e3e5e7;
}


.zcc-header h1{
    flex:1;
    margin:0;
    font-size:22px;
}


#zccBack,
#zcvBack{
    width:44px;
    height:44px;
    border:0;
    background:transparent;
    font-size:40px;
}


.zcc-create-button,
.zcv-join{
    border:0;
    background:transparent;
    color:#258fc9;
    font-size:16px;
    font-weight:700;
}


.zcc-body{
    flex:1;
    overflow:auto;
    padding:18px 12px 30px;
}


.zcc-avatar{
    width:88px;
    height:88px;
    display:grid;
    place-items:center;
    margin:5px auto 20px;
    border-radius:50%;
    background:#2999df;
    color:#fff;
    font-size:39px;
}


.zcc-card{
    overflow:hidden;
    margin-bottom:15px;
    padding:5px 18px;
    border-radius:20px;
    background:#fff;
}


.zcc-card label{
    display:block;
    padding-top:13px;
    color:#258fc9;
    font-size:13px;
    font-weight:600;
}


.zcc-card input,
.zcc-card textarea{
    width:100%;
    box-sizing:border-box;
    border:0;
    outline:0;
    background:transparent;
    color:#17191c;
    font-size:17px;
    padding:11px 0;
}


.zcc-line{
    height:1px;
    background:#e6e8ea;
}


.zcc-section-title{
    margin:7px 17px 8px;
    color:#258fc9;
    font-size:14px;
    font-weight:700;
}


.zcc-choice{
    display:flex !important;
    align-items:center;
    gap:14px;
    min-height:65px;
    color:#17191c !important;
}


.zcc-choice input{
    width:22px;
    flex:0 0 22px;
}


.zcc-choice span b,
.zcc-choice span small{
    display:block;
}


.zcc-choice span small{
    margin-top:4px;
    color:#858c92;
}


.zcc-username{
    display:flex;
    align-items:center;
    gap:5px;
}


.zcc-help{
    display:block;
    padding-bottom:14px;
    color:#858c92;
}


.zcc-error{
    min-height:25px;
    padding:5px 12px;
    color:#d7353b;
    text-align:center;
}


/* CHANNEL VIEW */

.zcv-avatar{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#2999df;
}


.zcv-info{
    flex:1;
    min-width:0;
}


.zcv-info b,
.zcv-info small{
    display:block;
}


.zcv-info small{
    margin-top:3px;
    color:#858c92;
}


.zcv-posts{
    flex:1;
    overflow:auto;
    padding:20px;
}


.zcv-post{
    max-width:680px;
    margin:0 auto 12px;
    padding:14px 16px;
    border-radius:16px;
    background:#fff;
}


.zcv-post small{
    display:block;
    margin-top:7px;
    color:#858c92;
    text-align:right;
}


.zcv-empty{
    padding:50px 20px;
    color:#858c92;
    text-align:center;
}


.zcv-composer{
    display:flex;
    gap:10px;
    padding:
        10px
        12px
        calc(10px + env(safe-area-inset-bottom));
    background:#fff;
}


.zcv-composer textarea{
    flex:1;
    resize:none;
    border:0;
    outline:0;
    padding:14px 17px;
    border-radius:25px;
    background:#f1f3f5;
}


.zcv-composer button{
    width:50px;
    height:50px;
    border:0;
    border-radius:50%;
    background:#2999df;
    color:#fff;
    font-size:22px;
}


@media(prefers-color-scheme:dark){

    .zevro-create-channel,
    .zevro-channel-view{
        background:#0b1115;
        color:#f4f6f7;
    }

    .zcc-header,
    .zcv-header,
    .zcc-card,
    .zcv-post,
    .zcv-composer{
        background:#171e22;
    }

    .zcc-card input,
    .zcc-card textarea,
    .zcc-choice{
        color:#f4f6f7 !important;
    }

    #zccBack,
    #zcvBack{
        color:#f4f6f7;
    }

    .zcv-composer textarea{
        background:#252d32;
        color:#fff;
    }
}



/* =========================================================
   ZEVRO CHANNELS IN MAIN CHAT DASHBOARD
   Telegram-style mixed chat/channel list
   ========================================================= */

.zevro-channel-chat-item{
    position:relative;
}

.zevro-channel-avatar{
    background:#4b96cf;
    color:#fff;
    overflow:hidden;
    font-size:22px;
}

.zevro-channel-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.zevro-channel-mini{
    flex:0 0 auto;
    margin-left:7px;
    color:#6c9fc3;
    font-size:13px;
}

.zevro-channel-chat-item .chat-meta b{
    font-weight:700;
}

.zevro-channel-chat-item .preview{
    color:#7e8991;
}


/*
 * When channel overlay is open,
 * floating pencil stays behind it anyway.
 */
.zevro-compose-hidden{
    display:none !important;
}



/* =========================================================
   ZEVRO GROUP SYSTEM
   ========================================================= */


/* Dashboard */

.zevro-group-avatar{
    background:#548fce;
    color:#fff;
    overflow:hidden;
    font-size:21px;
}

.zevro-group-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.zevro-group-mini{
    flex:0 0 auto;
    margin-left:6px;
    font-size:13px;
    color:#7798b1;
}


/* Member picker */

.zevro-new-group-screen,
.zevro-group-name-screen,
.zevro-group-view{
    position:fixed;
    z-index:100500;
    inset:0;
    display:flex;
    flex-direction:column;
    background:#0b1115;
    color:#f5f7f8;
}

.zng-header,
.zgn-header,
.zgv-header{
    flex:0 0 auto;
    min-height:68px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:
        max(8px,env(safe-area-inset-top))
        13px
        8px;
    background:#11191e;
}

.zng-back,
.zgn-header button,
.zgv-header button{
    min-width:44px;
    height:44px;
    border:0;
    background:transparent;
    color:#f5f7f8;
    font-size:24px;
}

.zng-title{
    flex:1;
    display:flex;
    flex-direction:column;
}

.zng-title b{
    font-size:20px;
}

.zng-title small{
    margin-top:2px;
    color:#9aa4aa;
}

.zng-next{
    color:#48a9df;
    font-size:16px;
}

.zng-next:disabled{
    opacity:.35;
}


.zng-selected{
    flex:0 0 auto;
    display:flex;
    gap:12px;
    overflow:auto;
    padding:8px 16px;
}

.zng-selected:empty{
    display:none;
}

.zng-selected-person{
    width:62px;
    flex:0 0 62px;
    text-align:center;
}

.zng-selected-avatar{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    margin:auto;
    overflow:hidden;
    border-radius:50%;
    background:#4e91cf;
    color:#fff;
}

.zng-selected-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.zng-selected-person small{
    display:block;
    margin-top:4px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}


.zng-search{
    flex:0 0 auto;
    height:50px;
    display:flex;
    align-items:center;
    gap:9px;
    margin:8px 15px;
    padding:0 15px;
    border-radius:26px;
    background:#20282d;
}

.zng-search input{
    flex:1;
    border:0;
    outline:0;
    background:transparent;
    color:#fff;
    font-size:16px;
}

.zng-section-title{
    padding:10px 20px;
    color:#8f9ba2;
    font-size:14px;
}

.zng-users{
    flex:1;
    overflow:auto;
}

.zng-user{
    width:100%;
    min-height:70px;
    display:flex;
    align-items:center;
    gap:13px;
    padding:9px 17px;
    border:0;
    background:transparent;
    color:#fff;
    text-align:left;
}

.zng-user:active,
.zng-user.selected{
    background:#172126;
}

.zng-avatar{
    flex:0 0 50px;
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border-radius:50%;
    background:#4e91cf;
}

.zng-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.zng-user-info{
    flex:1;
    min-width:0;
}

.zng-user-info b,
.zng-user-info small{
    display:block;
}

.zng-user-info small{
    margin-top:4px;
    color:#9ca6ac;
}

.zng-check{
    width:26px;
    height:26px;
    display:grid;
    place-items:center;
    border:2px solid #68767e;
    border-radius:50%;
    color:#fff;
}

.zng-user.selected .zng-check{
    border-color:#2499d5;
    background:#2499d5;
}

.zng-empty{
    padding:45px 20px;
    color:#909ba1;
    text-align:center;
}


/* Group name */

.zgn-header h1{
    flex:1;
    margin:0;
    font-size:20px;
}

#zgnCreate{
    color:#43a9df;
    font-size:16px;
}

.zgn-body{
    flex:1;
    overflow:auto;
    padding:25px 16px;
}

.zgn-avatar{
    width:84px;
    height:84px;
    display:grid;
    place-items:center;
    margin:0 auto 22px;
    border-radius:50%;
    background:#4d91cf;
    font-size:34px;
}

.zgn-card{
    padding:10px 18px;
    border-radius:18px;
    background:#182126;
}

.zgn-card label{
    display:block;
    color:#45a7da;
    font-size:13px;
}

.zgn-card input{
    width:100%;
    height:48px;
    border:0;
    outline:0;
    background:transparent;
    color:#fff;
    font-size:18px;
}

.zgn-members{
    margin-top:18px;
}

.zgn-member{
    display:flex;
    align-items:center;
    gap:12px;
    padding:8px;
}

.zgn-member span{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#4e91cf;
}

.zgn-error{
    padding:17px;
    color:#f15b64;
    text-align:center;
}


/* Group chat */

.zgv-avatar{
    flex:0 0 47px;
    width:47px;
    height:47px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#4c91cf;
}

.zgv-info{
    flex:1;
}

.zgv-info b,
.zgv-info small{
    display:block;
}

.zgv-info small{
    margin-top:2px;
    color:#9ba5aa;
}

.zgv-messages{
    flex:1;
    overflow:auto;
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:18px 14px;
    background:#0d151a;
}

.zgv-message{
    max-width:82%;
    align-self:flex-start;
    padding:9px 12px 7px;
    border-radius:14px;
    background:#202a30;
    overflow-wrap:anywhere;
}

.zgv-message.mine{
    align-self:flex-end;
    background:#174b37;
}

.zgv-sender{
    display:block;
    margin-bottom:4px;
    color:#55b9e9;
    font-size:13px;
}

.zgv-message small{
    display:block;
    margin-top:4px;
    color:#9fa9ae;
    font-size:11px;
    text-align:right;
}

.zgv-empty{
    margin:auto;
    color:#8d989e;
}

.zgv-composer{
    flex:0 0 auto;
    display:flex;
    gap:8px;
    padding:
        10px
        12px
        calc(10px + env(safe-area-inset-bottom));
    background:#11191e;
}

.zgv-composer textarea{
    flex:1;
    min-width:0;
    min-height:48px;
    max-height:120px;
    padding:13px 17px;
    border:0;
    border-radius:24px;
    outline:0;
    resize:none;
    background:#202a30;
    color:#fff;
}

.zgv-composer button{
    flex:0 0 48px;
    width:48px;
    height:48px;
    border:0;
    border-radius:50%;
    background:#248fca;
    color:#fff;
    font-size:21px;
}



/* =========================================================
   ZEVRO OTHER USER PROFILE
   ========================================================= */

.zevro-profile-open{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:0;
    border:0;
    background:transparent;
    color:inherit;
    text-align:left;
    cursor:pointer;
}

.zevro-profile-open b,
.zevro-profile-open small{
    display:block;
}


.zevro-user-profile{
    position:fixed;
    z-index:100800;
    inset:0;
    display:flex;
    flex-direction:column;
    background:#0b1115;
    color:#f5f7f8;
    font-family:
        Inter,
        system-ui,
        -apple-system,
        "Segoe UI",
        sans-serif;
}


.zup-header{
    flex:0 0 auto;
    min-height:68px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:
        max(8px,env(safe-area-inset-top))
        12px
        8px;
    background:#11191e;
}

.zup-back,
.zup-more{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border:0;
    background:transparent;
    color:#fff;
    font-size:25px;
}

.zup-title{
    flex:1;
    font-size:20px;
    font-weight:600;
}


.zup-body{
    flex:1;
    overflow:auto;
    padding-bottom:
        calc(24px + env(safe-area-inset-bottom));
}


.zup-profile-top{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:28px 20px 22px;
    background:#11191e;
}

.zup-avatar{
    width:112px;
    height:112px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border-radius:50%;
    background:#4d91cf;
    color:#fff;
    font-size:42px;
    font-weight:700;
}

.zup-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.zup-profile-top h1{
    margin:16px 0 5px;
    font-size:24px;
}

.zup-status{
    color:#87969f;
    font-size:14px;
}


.zup-actions{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    padding:14px;
}

.zup-action{
    min-height:80px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:0;
    border-radius:15px;
    background:#172126;
    color:#fff;
}

.zup-action span{
    font-size:23px;
}

.zup-action b{
    font-size:13px;
    font-weight:500;
}


.zup-card{
    margin:0 14px 14px;
    overflow:hidden;
    border-radius:18px;
    background:#172126;
}

.zup-info-row{
    min-height:68px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px 17px;
    border-bottom:1px solid #253038;
}

.zup-info-row:last-child{
    border-bottom:0;
}

.zup-info-icon{
    flex:0 0 32px;
    width:32px;
    text-align:center;
    color:#51a9dc;
    font-size:20px;
}

.zup-info-main{
    flex:1;
    min-width:0;
}

.zup-info-main b{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:16px;
    font-weight:500;
}

.zup-info-main small{
    display:block;
    margin-top:3px;
    color:#85939b;
    font-size:13px;
}


.zup-list-row{
    width:100%;
    min-height:62px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:10px 17px;
    border:0;
    border-bottom:1px solid #253038;
    background:transparent;
    color:#fff;
    text-align:left;
}

.zup-list-row:last-child{
    border-bottom:0;
}

.zup-list-row > span:first-child{
    width:30px;
    text-align:center;
}

.zup-list-row b{
    flex:1;
    font-weight:500;
}

.zup-row-right{
    color:#7f8e96;
}



/* =========================================================
   CHANNEL + GROUP PROFILE
   ========================================================= */

.zcgp-profile-screen{
    position:fixed;
    z-index:101000;
    inset:0;
    display:flex;
    flex-direction:column;
    background:#0b1115;
    color:#f4f7f8;
}


.zcgp-header{
    min-height:68px;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:10px;
    padding:
        max(8px,env(safe-area-inset-top))
        12px
        8px;
    background:#11191e;
}


.zcgp-header button{
    width:44px;
    height:44px;
    border:0;
    background:transparent;
    color:#fff;
    font-size:24px;
}


.zcgp-header h1{
    flex:1;
    margin:0;
    font-size:20px;
}


.zcgp-body{
    flex:1;
    overflow:auto;
    padding-bottom:
        calc(25px + env(safe-area-inset-bottom));
}


.zcgp-top{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:27px 20px 20px;
    background:#11191e;
}


.zcgp-avatar{
    width:112px;
    height:112px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border-radius:50%;
    background:#4d91cf;
    color:#fff;
    font-size:44px;
}


.zcgp-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}


.zcgp-top h2{
    margin:15px 0 5px;
    font-size:24px;
}


.zcgp-top p{
    margin:0;
    color:#8e9aa1;
}


.zcgp-actions{
    display:grid;
    grid-template-columns:
        repeat(3,1fr);
    gap:10px;
    padding:14px;
}


.zcgp-actions button{
    min-height:78px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:0;
    border-radius:15px;
    background:#172126;
    color:#fff;
}


.zcgp-actions span{
    font-size:22px;
}


.zcgp-actions b{
    font-size:13px;
    font-weight:500;
}


.zcgp-card{
    margin:0 14px 14px;
    overflow:hidden;
    border-radius:18px;
    background:#172126;
}


.zcgp-info{
    padding:15px 18px;
    border-bottom:
        1px solid #253038;
}


.zcgp-info:last-child{
    border-bottom:0;
}


.zcgp-info small{
    display:block;
    margin-bottom:5px;
    color:#49a9db;
    font-size:13px;
}


.zcgp-info b{
    display:block;
    font-size:16px;
    font-weight:500;
}


.zcgp-section-title{
    padding:
        5px
        22px
        10px;
    color:#87949b;
    font-size:14px;
}


.zcgp-member-row{
    width:100%;
    min-height:68px;
    display:flex;
    align-items:center;
    gap:13px;
    padding:9px 15px;
    border:0;
    border-bottom:
        1px solid #253038;
    background:transparent;
    color:#fff;
    text-align:left;
}


.zcgp-member-row:last-child{
    border-bottom:0;
}


.zcgp-member-row:active{
    background:#202b31;
}


.zcgp-member-avatar{
    flex:0 0 48px;
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border-radius:50%;
    background:#4d91cf;
}


.zcgp-member-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}


.zcgp-member-row > span{
    flex:1;
    min-width:0;
}


.zcgp-member-row b,
.zcgp-member-row small{
    display:block;
}


.zcgp-member-row small{
    margin-top:4px;
    color:#89969d;
}


.zcgp-no-members{
    padding:30px;
    color:#89969d;
    text-align:center;
}


/* Header profile tap area */

.zcv-avatar,
.zcv-info,
.zgv-avatar,
.zgv-info{
    cursor:pointer;
}



/* =========================================================
   ZEVRO CALL DURATION
   AUDIO + VIDEO — TOP CENTER
   ========================================================= */

.call-stage{
    position:relative;
}


/*
 * Always stay above remote/local video.
 */
.zevro-call-duration-top{
    position:absolute !important;

    top:
        calc(
            env(safe-area-inset-top, 0px)
            + 18px
        ) !important;

    left:50% !important;

    transform:
        translateX(-50%) !important;

    z-index:999 !important;

    min-width:82px;

    padding:
        7px
        13px;

    border-radius:18px;

    background:
        rgba(7,15,27,.58);

    color:#fff !important;

    text-align:center;

    font-size:18px !important;

    font-weight:600;

    line-height:1;

    letter-spacing:.5px;

    font-variant-numeric:
        tabular-nums;

    text-shadow:
        0 1px 3px
        rgba(0,0,0,.75);

    box-shadow:
        0 2px 10px
        rgba(0,0,0,.18);

    pointer-events:none;
}


/*
 * Video call:
 * keep timer over remote camera.
 */
.call-stage.video
.zevro-call-duration-top{
    display:block;
}


/*
 * But before actual connection JS inline
 * display:none still controls visibility.
 */
.call-stage.video
.zevro-call-duration-top:not(.running){
    display:none !important;
}


/*
 * Connected voice call uses exactly
 * the same top-center position.
 */
.call-stage.connected
.zevro-call-duration-top.running{
    display:block !important;
}



/* =========================================
   ZEVRO CALL TIMER - UNDER USER NAME
   ========================================= */

.zevro-call-duration-under-name{
    margin: 6px 0 0 !important;
    padding: 0 !important;

    font-size: 18px !important;
    line-height: 24px !important;
    font-weight: 500 !important;

    color: #ffffff !important;

    text-align: center !important;
    font-variant-numeric: tabular-nums;

    position: relative !important;
    z-index: 20 !important;
}

.zevro-call-duration-under-name.running{
    display: block !important;
}

/*
 * When connected, hide the word "Connected".
 * Timer becomes the status under the name.
 */
.call-person:has(.zevro-call-duration-under-name.running) #callStatus{
    display: none !important;
}

/* Old top timer style can no longer affect layout */
.zevro-call-duration-top{
    display: none !important;
}



/* =========================================================
   ZEVRO MODERN VOICE CALL DASHBOARD
   ========================================================= */


/* FULL SCREEN */

.call-overlay{
    position:fixed !important;
    inset:0 !important;
    z-index:999999 !important;

    background:
        linear-gradient(
            165deg,
            #2496e8 0%,
            #467be7 42%,
            #7950ef 100%
        ) !important;

    color:#fff !important;
}


.call-panel{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;

    border-radius:0 !important;
    background:transparent !important;

    display:flex !important;
    flex-direction:column !important;
}


/* =========================================================
   VOICE CALL STAGE
   ========================================================= */

.call-stage.voice{
    flex:1 !important;
    min-height:0 !important;

    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;

    position:relative !important;

    background:transparent !important;

    padding-top:
        calc(
            env(safe-area-inset-top,0px)
            + 135px
        ) !important;
}


/*
 * Voice call does not need remote/local video visible.
 */
.call-stage.voice #remoteVideo,
.call-stage.voice #localVideo{
    display:none !important;
}


/* =========================================================
   USER AREA
   ========================================================= */

.call-stage.voice .call-person{
    position:relative !important;

    inset:auto !important;
    transform:none !important;

    width:100% !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;

    color:#fff !important;
    text-align:center !important;

    z-index:10 !important;
}


/* Avatar outer rings */

.zevro-call-avatar-ring{
    width:218px;
    height:218px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:
        rgba(255,255,255,.08);

    border:
        14px solid
        rgba(255,255,255,.08);

    box-shadow:
        0 0 0 15px
        rgba(255,255,255,.055);

    margin-bottom:28px;
}


/* Existing Zevro avatar becomes large */

.zevro-call-avatar-ring .avatar{
    width:176px !important;
    height:176px !important;

    min-width:176px !important;

    border-radius:50% !important;

    display:grid !important;
    place-items:center !important;

    overflow:hidden !important;

    background:
        linear-gradient(
            145deg,
            #9b77ef,
            #6247d8
        ) !important;

    color:#fff !important;

    font-size:66px !important;
    font-weight:500 !important;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.08);
}


.zevro-call-avatar-ring .avatar img{
    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
}


/* NAME */

.call-stage.voice .call-person h2{
    margin:
        0
        0
        9px !important;

    padding:0 !important;

    color:#fff !important;

    font-size:38px !important;
    line-height:1.1 !important;

    font-weight:500 !important;

    text-shadow:
        0 2px 8px
        rgba(0,0,0,.08);
}


/* Status / duration row */

.zevro-call-state{
    min-height:27px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    color:
        rgba(255,255,255,.95);
}


.zevro-call-signal{
    display:none;

    font-size:16px;
    letter-spacing:-2px;

    transform:
        translateY(1px);
}


/* TIMER */

.zevro-call-duration-under-name{
    margin:0 !important;

    padding:0 !important;

    color:#fff !important;

    font-size:19px !important;
    line-height:25px !important;

    font-weight:400 !important;

    font-variant-numeric:
        tabular-nums;
}


.zevro-call-duration-under-name.running{
    display:block !important;
}


.zevro-call-duration-under-name.running
~ #callStatus{
    display:none !important;
}


/*
 * Once timer starts show small connection bars.
 */
.zevro-call-state:has(
    .zevro-call-duration-under-name.running
) .zevro-call-signal{
    display:inline-block;
}


/* Initial Calling / Connecting */

.call-stage.voice #callStatus{
    margin:0 !important;

    color:
        rgba(255,255,255,.90) !important;

    font-size:18px !important;

    font-weight:400 !important;
}


/* =========================================================
   BOTTOM CALL CONTROLS
   ========================================================= */

.call-overlay .call-controls{
    flex:0 0 auto !important;

    width:100% !important;

    display:flex !important;
    align-items:flex-end !important;
    justify-content:space-evenly !important;

    gap:12px !important;

    padding:
        18px
        22px
        calc(
            30px +
            env(safe-area-inset-bottom,0px)
        ) !important;

    background:transparent !important;

    border:0 !important;
}


.call-overlay .call-controls button{
    width:78px !important;
    height:78px !important;

    min-width:78px !important;

    border:0 !important;
    border-radius:50% !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    gap:4px !important;

    background:
        rgba(255,255,255,.17) !important;

    color:#fff !important;

    font-size:27px !important;

    box-shadow:none !important;
}


.call-overlay .call-controls button span{
    position:absolute !important;

    transform:
        translateY(61px);

    width:100px;

    color:#fff !important;

    font-size:14px !important;
    line-height:18px !important;

    font-weight:400 !important;

    text-align:center !important;
}


.call-overlay .call-controls
button.end-call{
    background:#f5222d !important;

    color:#fff !important;
}


/* Mute state */

.call-overlay .call-controls
button.off:not(.end-call){
    background:
        rgba(255,255,255,.92) !important;

    color:#624fe2 !important;
}


/* =========================================================
   VIDEO CALL
   Keep remote camera full screen
   ========================================================= */

.call-stage.video{
    position:relative !important;

    background:#0b1424 !important;
}


.call-stage.video #remoteVideo{
    position:absolute !important;

    inset:0 !important;

    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
}


.call-stage.video #localVideo{
    z-index:30 !important;
}


/*
 * During video calls only name/status/timer can remain
 * subtle over video.
 */
.call-stage.video .call-person{
    z-index:20 !important;
}


/* Remove old timer top placement completely */

.zevro-call-duration-top{
    display:none !important;
}


/* =========================================================
   VOICE CALL BOTTOM 4 BUTTONS
   ========================================================= */

.call-stage.voice + .call-controls{
    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
    align-items:end !important;
    gap:10px !important;

    width:100% !important;

    padding:
        18px
        10px
        calc(34px + env(safe-area-inset-bottom,0px))
        !important;
}

.call-stage.voice + .call-controls .zevro-call-action{
    width:68px !important;
    height:68px !important;
    min-width:68px !important;

    margin:0 auto !important;

    position:relative !important;

    border:0 !important;
    border-radius:50% !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    background:rgba(255,255,255,.17) !important;
    color:#fff !important;
}

.call-stage.voice + .call-controls .zevro-call-action b{
    font-size:25px !important;
    font-weight:400 !important;
    line-height:1 !important;
}

.call-stage.voice + .call-controls .zevro-call-action span{
    position:absolute !important;

    left:50% !important;
    top:78px !important;

    transform:translateX(-50%) !important;

    width:86px !important;

    text-align:center !important;
    white-space:nowrap !important;

    font-size:12px !important;
    line-height:16px !important;

    color:#fff !important;
}

.call-stage.voice + .call-controls #speakerCall.speaker-on{
    background:#fff !important;
    color:#6652dc !important;
}

.call-stage.voice + .call-controls #startVideoCall{
    background:rgba(255,255,255,.95) !important;
    color:#6652dc !important;
}

.call-stage.voice + .call-controls #endCall{
    background:#f5222d !important;
    color:#fff !important;
}



/* =========================================================
   ZEVRO VOICE CALL BUTTONS
   MATCH REFERENCE SCREEN
   ========================================================= */

.call-stage.voice + .call-controls{
    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;

    width:100% !important;

    gap:8px !important;

    align-items:end !important;
    justify-items:center !important;

    padding:
        18px
        12px
        calc(38px + env(safe-area-inset-bottom,0px))
        !important;

    background:transparent !important;
}


/* ALL FOUR BUTTONS */

.call-stage.voice + .call-controls
.zevro-call-action{

    width:74px !important;
    height:74px !important;

    min-width:74px !important;
    min-height:74px !important;

    margin:0 !important;

    padding:0 !important;

    position:relative !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border:none !important;
    border-radius:50% !important;

    background:
        rgba(255,255,255,.17)
        !important;

    color:#fff !important;

    box-shadow:none !important;

    overflow:visible !important;
}


/* ICON */

.call-stage.voice + .call-controls
.zevro-call-action b{

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin:0 !important;
    padding:0 !important;

    font-size:29px !important;

    line-height:1 !important;

    font-weight:400 !important;

    font-family:
        "Segoe UI Emoji",
        "Noto Color Emoji",
        sans-serif !important;
}


/* LABEL UNDER BUTTON */

.call-stage.voice + .call-controls
.zevro-call-action span{

    position:absolute !important;

    left:50% !important;
    top:88px !important;

    transform:
        translateX(-50%) !important;

    width:95px !important;

    margin:0 !important;
    padding:0 !important;

    color:#fff !important;

    font-size:13px !important;
    line-height:17px !important;

    font-weight:400 !important;

    text-align:center !important;

    white-space:nowrap !important;
}


/* =========================================================
   SPEAKER
   ========================================================= */

.call-stage.voice + .call-controls
#speakerCall{

    background:
        rgba(255,255,255,.17)
        !important;

    color:#fff !important;
}


.call-stage.voice + .call-controls
#speakerCall.speaker-on{

    background:#fff !important;

    color:#6752dd !important;
}


/* =========================================================
   START VIDEO
   White circle like reference
   ========================================================= */

.call-stage.voice + .call-controls
#startVideoCall{

    background:#fff !important;

    color:#5b43cc !important;
}


/* =========================================================
   MUTE
   ========================================================= */

.call-stage.voice + .call-controls
#muteCall{

    background:
        rgba(255,255,255,.17)
        !important;

    color:#fff !important;
}


.call-stage.voice + .call-controls
#muteCall.off{

    background:#fff !important;

    color:#6752dd !important;
}


/* =========================================================
   END CALL
   ========================================================= */

.call-stage.voice + .call-controls
#endCall{

    background:#f5222d !important;

    color:#fff !important;
}


/* =========================================================
   KEEP BUTTON ROW LOW LIKE REFERENCE
   ========================================================= */

.call-panel{
    position:relative !important;
}


.call-stage.voice{
    padding-bottom:0 !important;
}


.call-stage.voice + .call-controls{
    flex:0 0 145px !important;
}


/* =========================================================
   SMALL PHONE WIDTH
   ========================================================= */

@media (max-width:380px){

    .call-stage.voice + .call-controls
    .zevro-call-action{

        width:68px !important;
        height:68px !important;

        min-width:68px !important;
        min-height:68px !important;
    }


    .call-stage.voice + .call-controls
    .zevro-call-action b{

        font-size:27px !important;
    }


    .call-stage.voice + .call-controls
    .zevro-call-action span{

        top:81px !important;

        font-size:12px !important;
    }
}


/* ===== ZEVRO FINAL VOICE CALL 4 BUTTON UI ===== */

#callOverlay .call-controls{
    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
    align-items:center !important;
    justify-items:center !important;

    width:100% !important;
    box-sizing:border-box !important;

    gap:4px !important;

    padding:
        15px 10px
        calc(38px + env(safe-area-inset-bottom,0px))
        !important;
}


/* BUTTON CIRCLE */

#callOverlay .call-controls .zevro-call-action{
    position:relative !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:72px !important;
    height:72px !important;

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

    padding:0 !important;
    margin:0 !important;

    border:0 !important;
    border-radius:50% !important;

    background:rgba(255,255,255,.16) !important;

    color:#fff !important;

    box-shadow:none !important;
    overflow:visible !important;
}


/* ICON */

#callOverlay .call-controls .zevro-call-action b{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin:0 !important;
    padding:0 !important;

    font-size:28px !important;
    line-height:1 !important;

    font-weight:400 !important;
}


/* TEXT BELOW CIRCLE */

#callOverlay .call-controls .zevro-call-action span{
    position:absolute !important;

    top:84px !important;
    left:50% !important;

    transform:translateX(-50%) !important;

    display:block !important;

    width:90px !important;

    margin:0 !important;
    padding:0 !important;

    font-size:13px !important;
    line-height:16px !important;
    font-weight:400 !important;

    color:#fff !important;

    text-align:center !important;
    white-space:nowrap !important;
}


/* SPEAKER */

#callOverlay #speakerCall{
    background:rgba(255,255,255,.16) !important;
    color:#fff !important;
}

#callOverlay #speakerCall.speaker-on{
    background:#fff !important;
    color:#6550dc !important;
}


/* START VIDEO = WHITE */

#callOverlay #startVideoCall{
    background:#fff !important;
    color:#5741c8 !important;
}


/* MUTE */

#callOverlay #muteCall{
    background:rgba(255,255,255,.16) !important;
    color:#fff !important;
}

#callOverlay #muteCall.off{
    background:#fff !important;
    color:#6550dc !important;
}


/* END CALL = RED */

#callOverlay #endCall{
    background:#f5222d !important;
    color:#fff !important;
}


/* KEEP CONTROLS AT BOTTOM */

#callOverlay .call-panel{
    min-height:100% !important;
}

#callOverlay .call-controls{
    flex-shrink:0 !important;
}


/* SMALL SCREEN */

@media(max-width:380px){

    #callOverlay .call-controls .zevro-call-action{
        width:66px !important;
        height:66px !important;

        min-width:66px !important;
        min-height:66px !important;
        max-width:66px !important;
    }

    #callOverlay .call-controls .zevro-call-action b{
        font-size:26px !important;
    }

    #callOverlay .call-controls .zevro-call-action span{
        top:78px !important;
        font-size:12px !important;
    }
}



/* =========================================================
   ZEVRO CALL TIMER - TOP CENTER
   ========================================================= */

/*
 * Timer stays in same HTML element,
 * but visually moves to top center.
 */
#callOverlay #callDuration{
    position:fixed !important;

    top:
        calc(
            env(safe-area-inset-top,0px)
            + 42px
        ) !important;

    left:50% !important;

    transform:
        translateX(-50%) !important;

    z-index:1000002 !important;

    width:auto !important;

    margin:0 !important;
    padding:7px 14px !important;

    border-radius:18px !important;

    background:
        rgba(15,25,55,.32) !important;

    color:#fff !important;

    font-size:18px !important;
    line-height:22px !important;
    font-weight:500 !important;

    font-variant-numeric:
        tabular-nums !important;

    text-align:center !important;

    pointer-events:none !important;
}


/*
 * Before connection timer remains hidden.
 */
#callOverlay #callDuration:not(.running){
    display:none !important;
}


/*
 * Once running, force visible at top.
 */
#callOverlay #callDuration.running{
    display:block !important;
}


/*
 * Name/status area remains clean.
 */
#callOverlay .zevro-call-state{
    min-height:28px !important;
}


/*
 * Don't show signal bars beside timer anymore.
 */
#callOverlay .zevro-call-signal{
    display:none !important;
}


/*
 * Connected text disappears once timer starts.
 */
#callOverlay
.zevro-call-duration-under-name.running
~ #callStatus{
    display:none !important;
}



/* =========================================================
   ZEVRO WHATSAPP-STYLE VOICE CALL TOP
   ========================================================= */


/* ---------------------------------------------------------
   VOICE: remove big center avatar
   --------------------------------------------------------- */

#callOverlay .call-stage.voice
.zevro-call-avatar-ring{
    display:none !important;
}


/* ---------------------------------------------------------
   USER NAME -> TOP CENTER
   --------------------------------------------------------- */

#callOverlay .call-stage.voice
.call-person{

    position:static !important;

    inset:auto !important;
    transform:none !important;

    width:auto !important;
    height:auto !important;

    display:block !important;
}


#callOverlay .call-stage.voice
.call-person h2{

    position:fixed !important;

    top:
        calc(
            env(safe-area-inset-top,0px)
            + 78px
        ) !important;

    left:50% !important;

    transform:
        translateX(-50%) !important;

    z-index:1000010 !important;

    width:
        min(
            68vw,
            420px
        ) !important;

    margin:0 !important;
    padding:0 !important;

    color:#fff !important;

    font-size:30px !important;
    line-height:38px !important;

    font-weight:600 !important;

    text-align:center !important;

    overflow:hidden !important;
    white-space:nowrap !important;
    text-overflow:ellipsis !important;

    text-shadow:
        0 1px 5px
        rgba(0,0,0,.25) !important;
}


/* ---------------------------------------------------------
   CALLING / RINGING -> BELOW NAME
   --------------------------------------------------------- */

#callOverlay .call-stage.voice
#callStatus{

    position:fixed !important;

    top:
        calc(
            env(safe-area-inset-top,0px)
            + 121px
        ) !important;

    left:50% !important;

    transform:
        translateX(-50%) !important;

    z-index:1000011 !important;

    width:auto !important;

    margin:0 !important;
    padding:0 !important;

    color:
        rgba(255,255,255,.82)
        !important;

    background:transparent !important;

    font-size:20px !important;
    line-height:28px !important;

    font-weight:400 !important;

    text-align:center !important;

    white-space:nowrap !important;
}


/* ---------------------------------------------------------
   CONNECTED TIMER
   SAME PLACE AS CALLING/RINGING
   --------------------------------------------------------- */

#callOverlay .call-stage.voice
#callDuration{

    position:fixed !important;

    top:
        calc(
            env(safe-area-inset-top,0px)
            + 121px
        ) !important;

    left:50% !important;

    transform:
        translateX(-50%) !important;

    z-index:1000012 !important;

    width:auto !important;

    margin:0 !important;
    padding:0 !important;

    background:transparent !important;

    border-radius:0 !important;

    box-shadow:none !important;

    color:
        rgba(255,255,255,.82)
        !important;

    font-size:20px !important;
    line-height:28px !important;

    font-weight:400 !important;

    text-align:center !important;

    font-variant-numeric:
        tabular-nums !important;

    white-space:nowrap !important;
}


#callOverlay .call-stage.voice
#callDuration:not(.running){

    display:none !important;
}


#callOverlay .call-stage.voice
#callDuration.running{

    display:block !important;
}


/*
 * Connected হলে word "Connected" থাকবে না,
 * একই জায়গায় timer থাকবে।
 */
#callOverlay .call-stage.voice
.zevro-call-duration-under-name.running
~ #callStatus{

    display:none !important;
}


/*
 * পুরোনো signal bars remove
 */
#callOverlay .call-stage.voice
.zevro-call-signal{

    display:none !important;
}


/* =========================================================
   LEFT / RIGHT TOP BUTTONS
   ========================================================= */

#callOverlay .zevro-call-top-actions{

    position:fixed !important;

    top:
        calc(
            env(safe-area-inset-top,0px)
            + 72px
        ) !important;

    left:0 !important;
    right:0 !important;

    z-index:1000020 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    padding:
        0
        24px !important;

    pointer-events:none !important;
}


#callOverlay .zevro-call-top-btn{

    width:76px !important;
    height:76px !important;

    min-width:76px !important;
    min-height:76px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    border-radius:50% !important;

    background:
        rgba(18,27,32,.88)
        !important;

    color:#fff !important;

    font-size:31px !important;
    line-height:1 !important;

    box-shadow:
        0 5px 18px
        rgba(0,0,0,.18)
        !important;

    pointer-events:auto !important;

    -webkit-tap-highlight-color:
        transparent !important;
}


#callOverlay .zevro-call-top-btn:active{

    transform:
        scale(.94) !important;
}


/* =========================================================
   KEEP VOICE AREA CLEAN
   ========================================================= */

#callOverlay .call-stage.voice{

    padding-top:0 !important;

    background:
        linear-gradient(
            165deg,
            #2997e6 0%,
            #4c75e5 48%,
            #7650ed 100%
        ) !important;
}


/* =========================================================
   VIDEO CALL:
   DON'T FORCE WHATSAPP VOICE LAYOUT
   ========================================================= */

#callOverlay .call-stage.video
.zevro-call-top-actions{

    display:none !important;
}


/* =========================================================
   SMALL PHONE
   ========================================================= */

@media(max-width:380px){

    #callOverlay .zevro-call-top-btn{

        width:66px !important;
        height:66px !important;

        min-width:66px !important;
        min-height:66px !important;

        font-size:27px !important;
    }


    #callOverlay .zevro-call-top-actions{

        padding:
            0
            18px !important;
    }


    #callOverlay .call-stage.voice
    .call-person h2{

        font-size:27px !important;
    }


    #callOverlay .call-stage.voice
    #callStatus,
    #callOverlay .call-stage.voice
    #callDuration{

        font-size:18px !important;
    }
}



/* =========================================================
   ZEVRO EXACT VOICE CALL LAYOUT
   Reference screenshot layout
   ========================================================= */


/* =========================================================
   VOICE MAIN AREA
   ========================================================= */

#callOverlay .call-stage.voice{
    position:relative !important;

    flex:1 1 auto !important;

    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;

    padding:
        calc(env(safe-area-inset-top,0px) + 135px)
        0
        0 !important;

    background:
        linear-gradient(
            165deg,
            #3198e4 0%,
            #4d7be5 48%,
            #7850ec 100%
        ) !important;
}


/* =========================================================
   CENTER PERSON BLOCK
   ========================================================= */

#callOverlay .call-stage.voice .call-person{
    position:relative !important;

    inset:auto !important;
    transform:none !important;

    width:100% !important;
    height:auto !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;

    margin:0 !important;
    padding:0 !important;

    color:#fff !important;

    text-align:center !important;

    z-index:15 !important;
}


/* =========================================================
   AVATAR — SHOW AGAIN
   ========================================================= */

#callOverlay .call-stage.voice
.zevro-call-avatar-ring{
    display:grid !important;

    width:190px !important;
    height:190px !important;

    place-items:center !important;

    margin:
        0
        auto
        25px !important;

    border-radius:50% !important;

    background:
        rgba(255,255,255,.055)
        !important;

    border:
        12px solid
        rgba(255,255,255,.07)
        !important;

    box-shadow:
        0 0 0 13px
        rgba(255,255,255,.045)
        !important;
}


#callOverlay .call-stage.voice
.zevro-call-avatar-ring .avatar{
    width:154px !important;
    height:154px !important;

    min-width:154px !important;
    min-height:154px !important;

    display:grid !important;
    place-items:center !important;

    border-radius:50% !important;

    overflow:hidden !important;

    background:
        linear-gradient(
            145deg,
            #a278ed,
            #6348d9
        ) !important;

    color:#fff !important;

    font-size:60px !important;
    font-weight:500 !important;
}


#callOverlay .call-stage.voice
.zevro-call-avatar-ring .avatar img{
    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
}


/* =========================================================
   USER NAME — UNDER AVATAR
   ========================================================= */

#callOverlay .call-stage.voice
.call-person h2{
    position:static !important;

    top:auto !important;
    left:auto !important;

    transform:none !important;

    width:auto !important;
    max-width:85vw !important;

    margin:
        0
        0
        8px !important;

    padding:0 !important;

    color:#fff !important;

    font-size:34px !important;
    line-height:40px !important;

    font-weight:500 !important;

    text-align:center !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}


/* =========================================================
   STATUS / TIMER UNDER NAME
   ========================================================= */

#callOverlay .call-stage.voice
.zevro-call-state{
    position:relative !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    min-height:28px !important;

    margin:0 !important;
    padding:0 !important;
}


#callOverlay .call-stage.voice
#callStatus{
    position:static !important;

    top:auto !important;
    left:auto !important;

    transform:none !important;

    width:auto !important;

    margin:0 !important;
    padding:0 !important;

    background:transparent !important;

    color:
        rgba(255,255,255,.92)
        !important;

    font-size:19px !important;
    line-height:26px !important;

    font-weight:400 !important;

    text-align:center !important;
}


/* TIMER SAME POSITION AS CALLING / RINGING */

#callOverlay .call-stage.voice
#callDuration{
    position:static !important;

    top:auto !important;
    left:auto !important;

    transform:none !important;

    width:auto !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    border-radius:0 !important;

    background:transparent !important;

    box-shadow:none !important;

    color:
        rgba(255,255,255,.92)
        !important;

    font-size:19px !important;
    line-height:26px !important;

    font-weight:400 !important;

    text-align:center !important;

    font-variant-numeric:
        tabular-nums !important;
}


#callOverlay .call-stage.voice
#callDuration:not(.running){
    display:none !important;
}


#callOverlay .call-stage.voice
#callDuration.running{
    display:block !important;
}


/*
 * Connected হলে status hide,
 * timer exactly same place-এ থাকবে.
 */
#callOverlay .call-stage.voice
#callDuration.running
~ #callStatus{
    display:none !important;
}


/* no signal graphic beside timer */

#callOverlay .call-stage.voice
.zevro-call-signal{
    display:none !important;
}


/* =========================================================
   SMALL LEFT + RIGHT TOP BUTTONS
   ========================================================= */

#callOverlay .zevro-call-top-actions{
    position:fixed !important;

    top:
        calc(
            env(safe-area-inset-top,0px)
            + 52px
        ) !important;

    left:0 !important;
    right:0 !important;

    z-index:1000020 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    padding:
        0
        24px !important;

    pointer-events:none !important;
}


#callOverlay .zevro-call-top-btn{
    width:48px !important;
    height:48px !important;

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

    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border:0 !important;
    border-radius:50% !important;

    background:transparent !important;

    color:#fff !important;

    font-size:25px !important;
    line-height:1 !important;

    box-shadow:none !important;

    pointer-events:auto !important;
}


/* =========================================================
   BOTTOM FOUR BUTTONS
   ========================================================= */

#callOverlay .call-controls{
    padding:
        15px
        10px
        calc(
            38px +
            env(safe-area-inset-bottom,0px)
        ) !important;
}


/* =========================================================
   VIDEO CALL NOT AFFECTED
   ========================================================= */

#callOverlay .call-stage.video
.zevro-call-top-actions{
    display:none !important;
}


/* =========================================================
   SMALL SCREEN
   ========================================================= */

@media(max-width:380px){

    #callOverlay .call-stage.voice{
        padding-top:
            calc(
                env(safe-area-inset-top,0px)
                + 120px
            ) !important;
    }


    #callOverlay .call-stage.voice
    .zevro-call-avatar-ring{
        width:174px !important;
        height:174px !important;
    }


    #callOverlay .call-stage.voice
    .zevro-call-avatar-ring .avatar{
        width:140px !important;
        height:140px !important;

        min-width:140px !important;
        min-height:140px !important;

        font-size:55px !important;
    }


    #callOverlay .call-stage.voice
    .call-person h2{
        font-size:31px !important;
        line-height:37px !important;
    }


    #callOverlay .call-stage.voice
    #callStatus,
    #callOverlay .call-stage.voice
    #callDuration{
        font-size:18px !important;
    }


    #callOverlay .zevro-call-top-btn{
        width:44px !important;
        height:44px !important;

        min-width:44px !important;
        min-height:44px !important;

        font-size:23px !important;
    }
}


/* ===== ZEVRO TOP BUTTONS ABSOLUTE CORNER FIX ===== */

#callOverlay .zevro-call-top-actions{
    position:fixed !important;

    top:calc(env(safe-area-inset-top, 0px) + 8px) !important;
    left:0 !important;
    right:0 !important;

    width:100% !important;
    height:52px !important;

    margin:0 !important;
    padding:0 !important;

    display:block !important;

    z-index:999999 !important;

    pointer-events:none !important;
}


/* LEFT CORNER */

#callOverlay .zevro-call-top-actions
.zevro-call-top-btn:first-child{
    position:absolute !important;

    top:0 !important;
    left:8px !important;
    right:auto !important;

    width:46px !important;
    height:46px !important;

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

    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;

    font-size:25px !important;

    pointer-events:auto !important;
}


/* RIGHT CORNER */

#callOverlay .zevro-call-top-actions
.zevro-call-top-btn:last-child{
    position:absolute !important;

    top:0 !important;
    right:8px !important;
    left:auto !important;

    width:46px !important;
    height:46px !important;

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

    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;

    font-size:25px !important;

    pointer-events:auto !important;
}



/* =========================================================
   ZEVRO TELEGRAM-STYLE INCOMING CALL
   ========================================================= */


/* Full background */

#callOverlay.zevro-incoming-call{
    background:
        linear-gradient(
            165deg,
            #5578ea 0%,
            #309ee0 100%
        ) !important;
}


#callOverlay.zevro-incoming-call
.call-panel{
    width:100% !important;
    height:100% !important;

    display:flex !important;
    flex-direction:column !important;

    background:transparent !important;

    border:0 !important;
    border-radius:0 !important;
}


/* =========================================================
   MAIN CENTER AREA
   ========================================================= */

#callOverlay.zevro-incoming-call
.call-stage{
    position:relative !important;

    flex:1 1 auto !important;

    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;

    padding:
        calc(env(safe-area-inset-top,0px) + 175px)
        0
        0 !important;

    background:transparent !important;
}


/* Hide incoming video surfaces */

#callOverlay.zevro-incoming-call
#remoteVideo,

#callOverlay.zevro-incoming-call
#localVideo{
    display:none !important;
}


/* Person */

#callOverlay.zevro-incoming-call
.call-person{
    position:static !important;

    inset:auto !important;
    transform:none !important;

    width:100% !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;

    margin:0 !important;
    padding:0 !important;

    text-align:center !important;

    z-index:10 !important;
}


/* =========================================================
   AVATAR
   ========================================================= */

#callOverlay.zevro-incoming-call
.zevro-call-avatar-ring{
    display:grid !important;
    place-items:center !important;

    width:188px !important;
    height:188px !important;

    margin:
        0
        auto
        28px !important;

    border-radius:50% !important;

    background:
        rgba(255,255,255,.06)
        !important;

    border:
        11px solid
        rgba(255,255,255,.08)
        !important;

    box-shadow:
        0 0 0 13px
        rgba(255,255,255,.045)
        !important;
}


#callOverlay.zevro-incoming-call
.zevro-call-avatar-ring .avatar{
    width:154px !important;
    height:154px !important;

    min-width:154px !important;
    min-height:154px !important;

    display:grid !important;
    place-items:center !important;

    overflow:hidden !important;

    border-radius:50% !important;

    background:
        linear-gradient(
            145deg,
            #a477ef,
            #6245d4
        ) !important;

    color:#fff !important;

    font-size:58px !important;
    font-weight:500 !important;
}


#callOverlay.zevro-incoming-call
.zevro-call-avatar-ring .avatar img{
    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
}


/* =========================================================
   NAME
   ========================================================= */

#callOverlay.zevro-incoming-call
.call-person h2{
    position:static !important;

    top:auto !important;
    left:auto !important;

    transform:none !important;

    max-width:85vw !important;

    margin:
        0
        0
        8px !important;

    padding:0 !important;

    color:#fff !important;

    font-size:34px !important;
    line-height:41px !important;

    font-weight:500 !important;

    text-align:center !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}


/* =========================================================
   ZEVRO CALL TEXT
   ========================================================= */

#callOverlay.zevro-incoming-call
.zevro-call-state{
    min-height:auto !important;

    margin:0 !important;
    padding:0 !important;

    display:block !important;
}


#callOverlay.zevro-incoming-call
#callStatus{
    position:static !important;

    top:auto !important;
    left:auto !important;

    transform:none !important;

    margin:0 !important;
    padding:0 !important;

    background:transparent !important;

    color:
        rgba(255,255,255,.92)
        !important;

    font-size:19px !important;
    line-height:27px !important;

    font-weight:400 !important;

    text-align:center !important;
}


/* Incoming screen never needs duration */

#callOverlay.zevro-incoming-call
#callDuration,

#callOverlay.zevro-incoming-call
.zevro-call-signal{
    display:none !important;
}


/* =========================================================
   TOP LEFT SMALL EXPAND
   ========================================================= */

#callOverlay.zevro-incoming-call
.zevro-call-top-actions{
    position:fixed !important;

    top:
        calc(
            env(safe-area-inset-top,0px)
            + 36px
        ) !important;

    left:14px !important;
    right:auto !important;

    width:48px !important;
    height:48px !important;

    padding:0 !important;

    display:block !important;

    z-index:1000 !important;

    pointer-events:none !important;
}


#callOverlay.zevro-incoming-call
#zevroCallExpand{
    position:absolute !important;

    inset:0 !important;

    width:48px !important;
    height:48px !important;

    min-width:48px !important;
    min-height:48px !important;

    padding:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    background:transparent !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    color:#fff !important;

    font-size:26px !important;

    pointer-events:auto !important;
}


/* Telegram incoming reference doesn't show add-person */

#callOverlay.zevro-incoming-call
#zevroCallAddPerson{
    display:none !important;
}


/* =========================================================
   ACCEPT + DECLINE BOTTOM
   ========================================================= */

#callOverlay.zevro-incoming-call
.call-controls{
    flex:0 0 190px !important;

    width:100% !important;

    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;

    padding:
        18px
        68px
        calc(
            35px +
            env(safe-area-inset-bottom,0px)
        ) !important;

    box-sizing:border-box !important;

    background:transparent !important;

    border:0 !important;
}


/* Both round buttons */

#callOverlay.zevro-incoming-call
.zevro-incoming-action{
    position:relative !important;

    width:76px !important;
    height:76px !important;

    min-width:76px !important;
    min-height:76px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    border-radius:50% !important;

    color:#fff !important;

    overflow:visible !important;

    box-shadow:none !important;
}


/* PHONE ICON */

#callOverlay.zevro-incoming-call
.zevro-incoming-action b{
    display:block !important;

    margin:0 !important;
    padding:0 !important;

    color:#fff !important;

    font-size:33px !important;
    line-height:1 !important;

    font-weight:400 !important;
}


/* Label */

#callOverlay.zevro-incoming-call
.zevro-incoming-action span{
    position:absolute !important;

    top:88px !important;
    left:50% !important;

    transform:
        translateX(-50%) !important;

    width:100px !important;

    color:#fff !important;

    font-size:15px !important;
    line-height:20px !important;

    font-weight:400 !important;

    text-align:center !important;

    white-space:nowrap !important;
}


/* ACCEPT GREEN */

#callOverlay.zevro-incoming-call
#acceptIncoming{
    background:#2ed43c !important;
}


/* DECLINE RED */

#callOverlay.zevro-incoming-call
#rejectIncoming{
    background:#f5222d !important;
}


/* =========================================================
   SMALL PHONE
   ========================================================= */

@media(max-width:380px){

    #callOverlay.zevro-incoming-call
    .call-stage{
        padding-top:
            calc(
                env(safe-area-inset-top,0px)
                + 150px
            ) !important;
    }


    #callOverlay.zevro-incoming-call
    .zevro-call-avatar-ring{
        width:174px !important;
        height:174px !important;
    }


    #callOverlay.zevro-incoming-call
    .zevro-call-avatar-ring .avatar{
        width:140px !important;
        height:140px !important;

        min-width:140px !important;
        min-height:140px !important;
    }


    #callOverlay.zevro-incoming-call
    .call-person h2{
        font-size:31px !important;
    }


    #callOverlay.zevro-incoming-call
    .call-controls{
        padding-left:52px !important;
        padding-right:52px !important;
    }


    #callOverlay.zevro-incoming-call
    .zevro-incoming-action{
        width:70px !important;
        height:70px !important;

        min-width:70px !important;
        min-height:70px !important;
    }
}


/* =========================================================
   ZEVRO VOICE CALL — FORCE 4 CONTROLS VISIBLE
   ========================================================= */

#callOverlay:not(.zevro-incoming-call) .call-controls{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;

    width:100% !important;
    max-width:100% !important;

    box-sizing:border-box !important;

    overflow:visible !important;

    gap:4px !important;

    align-items:center !important;
    justify-items:center !important;

    padding-left:8px !important;
    padding-right:8px !important;
}


/* SPEAKER MUST ALWAYS BE VISIBLE ON ACTIVE VOICE CALL */

#callOverlay:not(.zevro-incoming-call) #speakerCall{
    display:flex !important;

    visibility:visible !important;
    opacity:1 !important;

    position:relative !important;

    width:68px !important;
    height:68px !important;

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

    margin:0 auto !important;
    padding:0 !important;

    align-items:center !important;
    justify-content:center !important;

    border:0 !important;
    border-radius:50% !important;

    background:rgba(255,255,255,.17) !important;

    color:#fff !important;

    overflow:visible !important;
}


/* Speaker icon */

#callOverlay #speakerCall b{
    display:block !important;

    font-size:27px !important;
    line-height:1 !important;

    color:inherit !important;
}


/* Speaker text */

#callOverlay #speakerCall span{
    display:block !important;

    position:absolute !important;

    top:80px !important;
    left:50% !important;

    transform:translateX(-50%) !important;

    width:90px !important;

    color:#fff !important;

    font-size:12px !important;
    line-height:16px !important;

    text-align:center !important;
    white-space:nowrap !important;
}


/* speaker ON state */

#callOverlay #speakerCall.speaker-on{
    background:#fff !important;
    color:#6250db !important;
}


/* Ensure remaining 3 buttons also fit */

#callOverlay:not(.zevro-incoming-call)
#startVideoCall,

#callOverlay:not(.zevro-incoming-call)
#muteCall,

#callOverlay:not(.zevro-incoming-call)
#endCall{

    display:flex !important;

    width:68px !important;
    height:68px !important;

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

    margin:0 auto !important;
}


/* Very small displays */

@media(max-width:360px){

    #callOverlay:not(.zevro-incoming-call)
    .call-controls .zevro-call-action{

        width:62px !important;
        height:62px !important;

        min-width:62px !important;
        min-height:62px !important;
        max-width:62px !important;
    }

    #callOverlay #speakerCall{
        width:62px !important;
        height:62px !important;

        min-width:62px !important;
        min-height:62px !important;
        max-width:62px !important;
    }
}



/* =========================================================
   ZEVRO FINAL CHAT UI
   SINGLE SOURCE OF TRUTH
   ========================================================= */


/* ---------------------------------------------------------
   COMPOSER
   --------------------------------------------------------- */

.composer{
    align-items:flex-end !important;
}

.zevro-voice-message-button{
    width:52px;
    height:52px;
    min-width:52px;

    border:0;
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#eef3f6;
    color:#2481cc;

    font-size:23px;

    cursor:pointer;

    -webkit-tap-highlight-color:transparent;
}

.zevro-voice-message-button.recording{
    background:#ef4444;
    color:#fff;

    animation:zevroVoicePulse 1s infinite;
}

.zevro-voice-message-button:disabled{
    opacity:.6;
}

@keyframes zevroVoicePulse{
    0%{transform:scale(1)}
    50%{transform:scale(.9)}
    100%{transform:scale(1)}
}


/* =========================================================
   NORMAL TEXT MESSAGE
   ========================================================= */

#messages .message:not(.zevro-voice-message){
    width:fit-content !important;
    min-width:0 !important;
    max-width:76% !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    display:block !important;
    flex:none !important;

    padding:7px 11px 5px !important;
    margin:0 !important;

    box-sizing:border-box !important;

    border-radius:17px !important;

    white-space:pre-wrap !important;
    overflow-wrap:anywhere !important;
}


/* received text */

#messages .message.them:not(.zevro-voice-message){
    align-self:flex-start !important;
    background:#fff !important;
}


/* sent text */

#messages .message.me-msg:not(.zevro-voice-message){
    align-self:flex-end !important;
    background:#e4ffd2 !important;
}


/* actual message text */

#messages
.message:not(.zevro-voice-message)
.zevro-message-text{
    display:inline !important;

    width:auto !important;
    height:auto !important;

    margin:0 !important;
    padding:0 !important;

    color:#111827 !important;

    font-size:16px !important;
    line-height:20px !important;
}


/* =========================================================
   MESSAGE TIME
   ========================================================= */

#messages .message .zevro-message-time{
    position:static !important;

    display:block !important;

    width:auto !important;
    height:auto !important;

    min-height:0 !important;
    max-height:none !important;

    margin:2px 0 0 !important;
    padding:0 !important;

    color:#748391 !important;

    font-size:11px !important;
    line-height:13px !important;

    text-align:right !important;

    white-space:nowrap !important;
}


/* =========================================================
   WHATSAPP STYLE VOICE MESSAGE
   ========================================================= */

#messages .message.zevro-voice-message{
    position:relative !important;

    width:285px !important;
    min-width:285px !important;
    max-width:285px !important;

    height:68px !important;
    min-height:68px !important;
    max-height:68px !important;

    display:block !important;
    flex:none !important;

    margin:0 !important;

    padding:
        7px
        9px
        5px !important;

    box-sizing:border-box !important;

    border-radius:18px !important;

    overflow:hidden !important;
}


/* received */

#messages .message.them.zevro-voice-message{
    align-self:flex-start !important;
    background:#fff !important;
}


/* sent */

#messages .message.me-msg.zevro-voice-message{
    align-self:flex-end !important;
    background:#e4ffd2 !important;
}


/* =========================================================
   VOICE MAIN ROW
   ========================================================= */

#messages
.message.zevro-voice-message
.zevro-voice-bubble{
    position:relative !important;

    width:100% !important;

    height:43px !important;
    min-height:43px !important;
    max-height:43px !important;

    display:flex !important;

    flex-direction:row !important;

    align-items:center !important;

    gap:8px !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;

    opacity:1 !important;
    visibility:visible !important;
}


/* =========================================================
   PLAY BUTTON
   ========================================================= */

#messages .zevro-voice-play{
    position:relative !important;

    width:42px !important;
    height:42px !important;

    min-width:42px !important;
    min-height:42px !important;

    max-width:42px !important;
    max-height:42px !important;

    flex:
        0
        0
        42px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    border-radius:50% !important;

    color:#fff !important;

    font-size:17px !important;
    line-height:1 !important;

    opacity:1 !important;
    visibility:visible !important;

    cursor:pointer !important;
}


#messages
.message.me-msg.zevro-voice-message
.zevro-voice-play{
    background:#55bd5a !important;
}


#messages
.message.them.zevro-voice-message
.zevro-voice-play{
    background:#248bd1 !important;
}


/* =========================================================
   VOICE INFO
   ========================================================= */

#messages .zevro-voice-info{
    position:relative !important;

    flex:
        1
        1
        auto !important;

    min-width:0 !important;

    height:42px !important;

    display:flex !important;

    flex-direction:column !important;

    justify-content:center !important;

    gap:1px !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;

    opacity:1 !important;
    visibility:visible !important;
}


/* =========================================================
   WAVEFORM
   ========================================================= */

#messages .zevro-voice-wave{
    width:100% !important;

    height:24px !important;
    min-height:24px !important;
    max-height:24px !important;

    display:flex !important;

    align-items:center !important;

    gap:2px !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;

    opacity:1 !important;
    visibility:visible !important;
}


#messages .zevro-voice-wave i{
    display:block !important;

    width:3px !important;
    min-width:3px !important;

    flex:
        1
        1
        3px !important;

    max-width:4px !important;

    border-radius:5px !important;

    background:#6e9f72 !important;

    opacity:1 !important;
}


/* Different waveform heights */

#messages .zevro-voice-wave i:nth-child(4n+1){
    height:8px !important;
}

#messages .zevro-voice-wave i:nth-child(4n+2){
    height:15px !important;
}

#messages .zevro-voice-wave i:nth-child(4n+3){
    height:22px !important;
}

#messages .zevro-voice-wave i:nth-child(4n){
    height:12px !important;
}


/* =========================================================
   DURATION
   ========================================================= */

#messages .zevro-voice-info small{
    display:block !important;

    width:auto !important;
    height:13px !important;

    min-height:13px !important;

    margin:0 !important;
    padding:0 !important;

    color:#748391 !important;

    font-size:11px !important;
    line-height:13px !important;

    opacity:1 !important;
    visibility:visible !important;
}


/* actual audio hidden */

#messages .zevro-voice-audio{
    display:none !important;
}


/* =========================================================
   VOICE MESSAGE TIME
   bottom-right, same bubble
   ========================================================= */

#messages
.message.zevro-voice-message
.zevro-message-time{
    position:absolute !important;

    right:9px !important;
    bottom:5px !important;

    display:block !important;

    width:auto !important;
    height:13px !important;

    margin:0 !important;
    padding:0 !important;

    font-size:11px !important;
    line-height:13px !important;

    color:#748391 !important;

    white-space:nowrap !important;

    z-index:5 !important;
}


/* Leave room for message time */

#messages
.message.zevro-voice-message
.zevro-voice-info{
    padding-right:58px !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:760px){

    #messages{
        gap:7px !important;
    }

    #messages
    .message:not(.zevro-voice-message){
        max-width:82% !important;
    }

    #messages
    .message.zevro-voice-message{
        width:280px !important;
        min-width:280px !important;
        max-width:280px !important;
    }

    .zevro-voice-message-button,
    .send{
        width:46px !important;
        height:46px !important;
        min-width:46px !important;
    }

    .composer{
        gap:7px !important;
    }
}


@media(max-width:360px){

    #messages
    .message.zevro-voice-message{
        width:255px !important;
        min-width:255px !important;
        max-width:255px !important;
    }

    #messages .zevro-voice-play{
        width:39px !important;
        height:39px !important;

        min-width:39px !important;
        min-height:39px !important;

        max-width:39px !important;
        max-height:39px !important;

        flex-basis:39px !important;
    }
}


/* =========================================================
   END ZEVRO FINAL CHAT UI
   ========================================================= */



/* =========================================================
   ZEVRO FINAL TELEGRAM / WHATSAPP VOICE MESSAGE
   DO NOT ADD VOICE CSS BELOW THIS BLOCK
   ========================================================= */

/* ---------- NORMAL TEXT ---------- */

#messages .message:not(.zevro-voice-message){
    width:fit-content !important;
    min-width:0 !important;
    max-width:76% !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    display:block !important;
    flex:none !important;

    padding:7px 11px 5px !important;
    margin:0 !important;

    box-sizing:border-box !important;

    border-radius:17px !important;
}

#messages .message.them:not(.zevro-voice-message){
    align-self:flex-start !important;
    background:#fff !important;
}

#messages .message.me-msg:not(.zevro-voice-message){
    align-self:flex-end !important;
    background:#e4ffd2 !important;
}

#messages .message:not(.zevro-voice-message) .zevro-message-text{
    display:inline !important;

    margin:0 !important;
    padding:0 !important;

    font-size:16px !important;
    line-height:21px !important;
}

#messages .message:not(.zevro-voice-message) .zevro-message-time{
    display:inline !important;

    position:static !important;

    width:auto !important;
    height:auto !important;

    margin-left:7px !important;
    padding:0 !important;

    font-size:11px !important;
    line-height:14px !important;

    white-space:nowrap !important;
}


/* =========================================================
   VOICE OUTER BUBBLE
   ========================================================= */

#messages .message.zevro-voice-message{
    position:relative !important;

    width:300px !important;
    min-width:300px !important;
    max-width:300px !important;

    height:64px !important;
    min-height:64px !important;
    max-height:64px !important;

    display:block !important;
    flex:none !important;

    margin:0 !important;
    padding:7px 9px 5px !important;

    box-sizing:border-box !important;

    border-radius:18px !important;

    overflow:visible !important;

    white-space:normal !important;
}


/* SENT */

#messages .message.me-msg.zevro-voice-message{
    align-self:flex-end !important;
    background:#e4ffd2 !important;
}


/* RECEIVED */

#messages .message.them.zevro-voice-message{
    align-self:flex-start !important;
    background:#fff !important;
}


/* =========================================================
   VOICE CONTENT ROW
   ========================================================= */

#messages .message.zevro-voice-message > .zevro-voice-bubble{
    position:absolute !important;

    left:9px !important;
    right:9px !important;
    top:7px !important;

    width:auto !important;

    height:43px !important;
    min-height:43px !important;
    max-height:43px !important;

    display:flex !important;
    flex-direction:row !important;

    align-items:center !important;

    gap:8px !important;

    margin:0 !important;
    padding:0 !important;

    box-sizing:border-box !important;

    visibility:visible !important;
    opacity:1 !important;

    overflow:hidden !important;
}


/* =========================================================
   PLAY BUTTON
   ========================================================= */

#messages .message.zevro-voice-message .zevro-voice-play{
    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    visibility:visible !important;
    opacity:1 !important;

    width:43px !important;
    height:43px !important;

    min-width:43px !important;
    min-height:43px !important;

    max-width:43px !important;
    max-height:43px !important;

    flex:0 0 43px !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    border-radius:50% !important;

    font-size:17px !important;
    line-height:1 !important;

    cursor:pointer !important;
}

#messages .message.me-msg.zevro-voice-message .zevro-voice-play{
    background:#59bf59 !important;
    color:#fff !important;
}

#messages .message.them.zevro-voice-message .zevro-voice-play{
    background:#2481cc !important;
    color:#fff !important;
}


/* hide real audio element */

#messages .message.zevro-voice-message .zevro-voice-audio{
    display:none !important;
}


/* =========================================================
   WAVEFORM AREA
   ========================================================= */

#messages .message.zevro-voice-message .zevro-voice-info{
    display:flex !important;

    visibility:visible !important;
    opacity:1 !important;

    flex:1 1 0 !important;

    min-width:0 !important;
    width:auto !important;

    height:43px !important;
    min-height:43px !important;
    max-height:43px !important;

    flex-direction:column !important;

    justify-content:center !important;
    align-items:stretch !important;

    gap:0 !important;

    margin:0 !important;
    padding:0 1px !important;

    overflow:hidden !important;
}


/* waveform */

#messages .message.zevro-voice-message .zevro-voice-wave{
    display:flex !important;

    visibility:visible !important;
    opacity:1 !important;

    flex-direction:row !important;

    align-items:center !important;

    width:100% !important;

    height:25px !important;
    min-height:25px !important;
    max-height:25px !important;

    gap:2px !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;
}


/* waveform bars */

#messages .message.zevro-voice-message .zevro-voice-wave i{
    display:block !important;

    visibility:visible !important;
    opacity:1 !important;

    width:3px !important;
    min-width:3px !important;

    flex:0 0 3px !important;

    border-radius:4px !important;

    margin:0 !important;
    padding:0 !important;
}


/* SENT WAVE */

#messages .message.me-msg.zevro-voice-message .zevro-voice-wave i{
    background:#59b75b !important;
}


/* RECEIVED WAVE */

#messages .message.them.zevro-voice-message .zevro-voice-wave i{
    background:#7091a7 !important;
}


/* waveform heights */

#messages .zevro-voice-wave i:nth-child(4n+1){
    height:9px !important;
}

#messages .zevro-voice-wave i:nth-child(4n+2){
    height:16px !important;
}

#messages .zevro-voice-wave i:nth-child(4n+3){
    height:23px !important;
}

#messages .zevro-voice-wave i:nth-child(4n){
    height:13px !important;
}


/* =========================================================
   DURATION
   ========================================================= */

#messages .message.zevro-voice-message .zevro-voice-info small{
    display:block !important;

    visibility:visible !important;
    opacity:1 !important;

    width:100% !important;

    height:13px !important;
    min-height:13px !important;

    margin:0 !important;
    padding:0 !important;

    color:#73828b !important;

    font-size:11px !important;
    line-height:13px !important;

    text-align:left !important;

    white-space:nowrap !important;
}


/* =========================================================
   MESSAGE TIME + TICKS
   ========================================================= */

#messages .message.zevro-voice-message > .zevro-message-time{
    display:block !important;

    visibility:visible !important;
    opacity:1 !important;

    position:absolute !important;

    right:9px !important;
    bottom:5px !important;

    width:auto !important;
    height:13px !important;

    margin:0 !important;
    padding:0 !important;

    color:#73828b !important;

    font-size:11px !important;
    line-height:13px !important;

    white-space:nowrap !important;

    z-index:5 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:760px){

    #messages .message.zevro-voice-message{
        width:min(300px,82vw) !important;
        min-width:min(300px,82vw) !important;
        max-width:min(300px,82vw) !important;

        height:64px !important;
        min-height:64px !important;
        max-height:64px !important;
    }

}


/* ===== END ZEVRO FINAL VOICE CSS ===== */



/* =========================================================
   ZEVRO FINAL TEXT MESSAGE ONLY FIX
   IMPORTANT: DOES NOT TOUCH VOICE MESSAGE
   ========================================================= */

#messages .message:not(.zevro-voice-message){
    width:fit-content !important;
    min-width:0 !important;
    max-width:76% !important;

    height:fit-content !important;
    min-height:0 !important;
    max-height:none !important;

    flex:0 0 auto !important;

    display:block !important;

    position:relative !important;

    padding:7px 10px 5px !important;
    margin:0 !important;

    box-sizing:border-box !important;

    border-radius:17px !important;

    white-space:normal !important;
    overflow:visible !important;
}


/* SENT TEXT */

#messages .message.me-msg:not(.zevro-voice-message){
    align-self:flex-end !important;

    width:fit-content !important;
    height:fit-content !important;

    background:#e4ffd2 !important;
}


/* RECEIVED TEXT */

#messages .message.them:not(.zevro-voice-message){
    align-self:flex-start !important;

    width:fit-content !important;
    height:fit-content !important;

    background:#fff !important;
}


/* ACTUAL TEXT */

#messages
.message:not(.zevro-voice-message)
.zevro-message-text{

    display:inline !important;

    position:static !important;

    width:auto !important;
    height:auto !important;

    min-width:0 !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    font-size:16px !important;
    line-height:21px !important;

    white-space:pre-wrap !important;
    overflow-wrap:anywhere !important;
}


/* TIME BESIDE TEXT */

#messages
.message:not(.zevro-voice-message)
.zevro-message-time{

    display:inline-block !important;

    position:static !important;

    width:auto !important;
    height:auto !important;

    min-width:0 !important;
    min-height:0 !important;

    margin:0 0 0 7px !important;
    padding:0 !important;

    vertical-align:baseline !important;

    font-size:11px !important;
    line-height:14px !important;

    white-space:nowrap !important;
}


/* MOBILE TEXT */

@media(max-width:760px){

    #messages .message:not(.zevro-voice-message){
        width:fit-content !important;
        min-width:0 !important;
        max-width:82% !important;

        height:fit-content !important;
        min-height:0 !important;
        max-height:none !important;

        padding:7px 10px 5px !important;
    }

}


/* ===== END TEXT-ONLY FIX ===== */



/* =========================================================
   ZEVRO VIDEO CALL - FULL SCREEN VIDEO ONLY
   IMPORTANT: DOES NOT TOUCH VOICE CALL / CHAT / VOICE MESSAGE
   ========================================================= */


/* VIDEO CALL MAIN STAGE */
#callOverlay:not(.zevro-incoming-call) .call-stage.video{
    position:relative !important;

    width:100% !important;
    height:100% !important;
    min-height:0 !important;

    padding:0 !important;
    margin:0 !important;

    overflow:hidden !important;

    background:#111 !important;
}


/* REMOTE PERSON VIDEO = FULL MAIN SCREEN */
#callOverlay:not(.zevro-incoming-call)
.call-stage.video
#remoteVideo{
    display:block !important;

    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    min-width:100% !important;
    min-height:100% !important;
    max-width:none !important;
    max-height:none !important;

    margin:0 !important;
    padding:0 !important;

    object-fit:cover !important;
    object-position:center center !important;

    border:0 !important;
    border-radius:0 !important;

    background:#111 !important;

    z-index:1 !important;
}


/* HIDE LARGE PROFILE PHOTO/NAME AFTER VIDEO CONNECTS */
#callOverlay:not(.zevro-incoming-call)
.call-stage.video.connected
.call-person{
    display:none !important;
}


/* WHILE CONNECTING KEEP PERSON INFO ABOVE VIDEO */
#callOverlay:not(.zevro-incoming-call)
.call-stage.video:not(.connected)
.call-person{
    position:absolute !important;

    left:0 !important;
    right:0 !important;
    top:12% !important;

    z-index:5 !important;

    pointer-events:none !important;
}


/* LOCAL / MY CAMERA = SMALL FLOATING PREVIEW */
#callOverlay:not(.zevro-incoming-call)
.call-stage.video
#localVideo{
    display:block !important;

    position:absolute !important;

    top:
        calc(
            env(safe-area-inset-top,0px)
            + 22px
        ) !important;

    right:16px !important;
    left:auto !important;
    bottom:auto !important;

    width:112px !important;
    height:158px !important;

    min-width:112px !important;
    min-height:158px !important;

    max-width:112px !important;
    max-height:158px !important;

    margin:0 !important;
    padding:0 !important;

    object-fit:cover !important;
    object-position:center !important;

    border:3px solid rgba(255,255,255,.95) !important;
    border-radius:18px !important;

    background:#222 !important;

    box-shadow:
        0 5px 18px rgba(0,0,0,.35)
        !important;

    z-index:20 !important;

    transform:none !important;
}


/* TOP ACTIONS ABOVE VIDEO */
#callOverlay:not(.zevro-incoming-call)
.call-stage.video
.zevro-call-top-actions{
    z-index:30 !important;
}


/* VIDEO CALL CONTROLS MUST STAY ABOVE VIDEO */
#callOverlay:not(.zevro-incoming-call)
.call-panel:has(.call-stage.video)
.call-controls{
    position:relative !important;

    z-index:40 !important;

    flex-shrink:0 !important;
}


/* SMALL PHONES */
@media(max-width:380px){

    #callOverlay:not(.zevro-incoming-call)
    .call-stage.video
    #localVideo{
        width:96px !important;
        height:136px !important;

        min-width:96px !important;
        min-height:136px !important;

        max-width:96px !important;
        max-height:136px !important;

        right:12px !important;

        border-radius:16px !important;
    }
}



/* =========================================================
   ZEVRO WHATSAPP-LIKE VIDEO CALL FINAL
   VIDEO CALL ONLY
   ========================================================= */


/* FULL SCREEN OVERLAY */

#callOverlay:not(.zevro-incoming-call):has(.call-stage.video){
    background:#000 !important;
}


/* PANEL = WHOLE PHONE */

#callOverlay:not(.zevro-incoming-call)
.call-panel:has(.call-stage.video){

    position:fixed !important;
    inset:0 !important;

    width:100vw !important;
    height:100dvh !important;

    min-height:100dvh !important;
    max-height:none !important;

    display:block !important;

    padding:0 !important;
    margin:0 !important;

    background:#000 !important;

    overflow:hidden !important;
}


/* =========================================================
   VIDEO STAGE = ENTIRE SCREEN
   ========================================================= */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video{

    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    padding:0 !important;
    margin:0 !important;

    overflow:hidden !important;

    background:#000 !important;
}


/* =========================================================
   REMOTE VIDEO = FULL SCREEN AFTER CONNECT
   ========================================================= */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video
#remoteVideo{

    position:absolute !important;
    inset:0 !important;

    display:block !important;

    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
    object-position:center center !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    border-radius:0 !important;

    background:#000 !important;

    z-index:1 !important;
}


/* =========================================================
   BEFORE ANSWER:
   YOUR OWN CAMERA FILLS THE SCREEN
   ========================================================= */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video:not(.connected)
#localVideo{

    position:absolute !important;
    inset:0 !important;

    display:block !important;

    width:100% !important;
    height:100% !important;

    min-width:100% !important;
    min-height:100% !important;

    max-width:none !important;
    max-height:none !important;

    object-fit:cover !important;
    object-position:center center !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    background:#000 !important;

    z-index:2 !important;
}


/* =========================================================
   AFTER ANSWER:
   REMOTE FULLSCREEN + MY CAMERA SMALL PREVIEW
   ========================================================= */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video.connected
#localVideo{

    position:absolute !important;

    top:
        calc(
            env(safe-area-inset-top,0px)
            + 70px
        ) !important;

    right:14px !important;

    left:auto !important;
    bottom:auto !important;

    display:block !important;

    width:92px !important;
    height:132px !important;

    min-width:92px !important;
    min-height:132px !important;

    max-width:92px !important;
    max-height:132px !important;

    object-fit:cover !important;

    margin:0 !important;
    padding:0 !important;

    border:2px solid rgba(255,255,255,.9) !important;
    border-radius:16px !important;

    box-shadow:
        0 4px 18px
        rgba(0,0,0,.35)
        !important;

    z-index:30 !important;
}


/* =========================================================
   NAME + STATUS AT TOP CENTER
   ========================================================= */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video
.call-person{

    position:absolute !important;

    top:
        calc(
            env(safe-area-inset-top,0px)
            + 48px
        ) !important;

    left:50% !important;

    transform:translateX(-50%) !important;

    width:72% !important;

    display:block !important;

    margin:0 !important;
    padding:0 !important;

    text-align:center !important;

    z-index:20 !important;

    pointer-events:none !important;
}


/* NO BIG PROFILE PHOTO ON VIDEO CALL */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video
.zevro-call-avatar-ring{

    display:none !important;
}


/* NAME */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video
.call-person h2{

    display:block !important;

    margin:0 !important;
    padding:0 !important;

    color:#fff !important;

    font-size:23px !important;
    line-height:29px !important;

    font-weight:500 !important;

    text-shadow:
        0 1px 4px
        rgba(0,0,0,.6)
        !important;
}


/* STATUS / TIMER */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video
.zevro-call-state{

    margin-top:3px !important;

    color:#fff !important;
}


#callOverlay:not(.zevro-incoming-call)
.call-stage.video
#callStatus,

#callOverlay:not(.zevro-incoming-call)
.call-stage.video
#callDuration{

    color:rgba(255,255,255,.92) !important;

    font-size:15px !important;
    line-height:20px !important;

    text-shadow:
        0 1px 3px
        rgba(0,0,0,.6)
        !important;
}


/* DON'T HIDE NAME AFTER CONNECT */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video.connected
.call-person{

    display:block !important;
}


/* =========================================================
   RIGHT SIDE ROUND BUTTONS
   ========================================================= */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video
.zevro-call-top-actions{

    position:absolute !important;

    top:
        calc(
            env(safe-area-inset-top,0px)
            + 70px
        ) !important;

    right:14px !important;
    left:auto !important;

    width:58px !important;
    height:auto !important;

    display:flex !important;
    flex-direction:column !important;

    align-items:center !important;

    gap:14px !important;

    padding:0 !important;
    margin:0 !important;

    z-index:45 !important;
}


/* TOP BUTTONS */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video
.zevro-call-top-btn{

    position:static !important;

    width:56px !important;
    height:56px !important;

    min-width:56px !important;
    min-height:56px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    padding:0 !important;
    margin:0 !important;

    border:0 !important;
    border-radius:50% !important;

    background:rgba(20,27,31,.92) !important;

    color:#fff !important;

    font-size:24px !important;

    box-shadow:none !important;
}


/* HIDE EXPAND BUTTON — SECOND SCREENSHOT DOESN'T NEED IT */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video
#zevroCallExpand{

    display:none !important;
}


/* ADD PERSON STAYS */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video
#zevroCallAddPerson{

    display:flex !important;
}


/* =========================================================
   SWITCH CAMERA = RIGHT SIDE BUTTON
   ========================================================= */

#callOverlay:not(.zevro-incoming-call)
.call-panel:has(.call-stage.video)
#switchCamera{

    position:fixed !important;

    top:
        calc(
            env(safe-area-inset-top,0px)
            + 140px
        ) !important;

    right:14px !important;

    width:56px !important;
    height:56px !important;

    min-width:56px !important;
    min-height:56px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    padding:0 !important;
    margin:0 !important;

    border:0 !important;
    border-radius:50% !important;

    background:rgba(20,27,31,.92) !important;

    color:#fff !important;

    z-index:60 !important;
}


#callOverlay:not(.zevro-incoming-call)
.call-panel:has(.call-stage.video)
#switchCamera b{

    font-size:23px !important;
    line-height:1 !important;
}


#callOverlay:not(.zevro-incoming-call)
.call-panel:has(.call-stage.video)
#switchCamera span{

    display:none !important;
}


/* =========================================================
   BOTTOM BLACK PILL CONTROLS
   ========================================================= */

#callOverlay:not(.zevro-incoming-call)
.call-panel:has(.call-stage.video)
.call-controls{

    position:absolute !important;

    left:50% !important;

    bottom:
        calc(
            env(safe-area-inset-bottom,0px)
            + 26px
        ) !important;

    transform:translateX(-50%) !important;

    width:calc(100% - 32px) !important;
    max-width:520px !important;

    height:92px !important;

    display:grid !important;

    grid-template-columns:
        repeat(4,1fr)
        !important;

    align-items:center !important;
    justify-items:center !important;

    gap:4px !important;

    padding:10px 12px !important;

    margin:0 !important;

    box-sizing:border-box !important;

    background:
        rgba(19,26,30,.96)
        !important;

    border:0 !important;
    border-radius:46px !important;

    z-index:50 !important;
}


/* =========================================================
   ONLY 4 MAIN BOTTOM BUTTONS
   ========================================================= */

#callOverlay:not(.zevro-incoming-call)
.call-panel:has(.call-stage.video)
#speakerCall,

#callOverlay:not(.zevro-incoming-call)
.call-panel:has(.call-stage.video)
#cameraCall,

#callOverlay:not(.zevro-incoming-call)
.call-panel:has(.call-stage.video)
#muteCall,

#callOverlay:not(.zevro-incoming-call)
.call-panel:has(.call-stage.video)
#endCall{

    position:relative !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    width:62px !important;
    height:62px !important;

    min-width:62px !important;
    min-height:62px !important;

    max-width:62px !important;
    max-height:62px !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    border-radius:50% !important;

    color:#fff !important;

    background:
        rgba(46,55,60,.95)
        !important;

    overflow:hidden !important;
}


/* SPEAKER WHITE WHEN ACTIVE */

#callOverlay:not(.zevro-incoming-call)
.call-panel:has(.call-stage.video)
#speakerCall.speaker-on{

    background:#fff !important;
    color:#111 !important;
}


/* END CALL RED */

#callOverlay:not(.zevro-incoming-call)
.call-panel:has(.call-stage.video)
#endCall{

    background:#f20d42 !important;
    color:#fff !important;
}


/* BOTTOM ICON SIZE */

#callOverlay:not(.zevro-incoming-call)
.call-panel:has(.call-stage.video)
.call-controls
.zevro-call-action b{

    font-size:25px !important;
    line-height:1 !important;
}


/* HIDE TEXT LABELS LIKE SECOND SCREENSHOT */

#callOverlay:not(.zevro-incoming-call)
.call-panel:has(.call-stage.video)
.call-controls
.zevro-call-action span{

    display:none !important;
}


/* =========================================================
   SMALL SCREEN
   ========================================================= */

@media(max-width:380px){

    #callOverlay:not(.zevro-incoming-call)
    .call-panel:has(.call-stage.video)
    .call-controls{

        width:calc(100% - 24px) !important;

        height:82px !important;

        bottom:
            calc(
                env(safe-area-inset-bottom,0px)
                + 18px
            ) !important;
    }


    #callOverlay:not(.zevro-incoming-call)
    .call-panel:has(.call-stage.video)
    #speakerCall,

    #callOverlay:not(.zevro-incoming-call)
    .call-panel:has(.call-stage.video)
    #cameraCall,

    #callOverlay:not(.zevro-incoming-call)
    .call-panel:has(.call-stage.video)
    #muteCall,

    #callOverlay:not(.zevro-incoming-call)
    .call-panel:has(.call-stage.video)
    #endCall{

        width:56px !important;
        height:56px !important;

        min-width:56px !important;
        min-height:56px !important;

        max-width:56px !important;
        max-height:56px !important;
    }
}


/* ===== END WHATSAPP-LIKE VIDEO CALL ===== */


/* =========================================================
   ZEVRO VIDEO CALL NAME CENTER FIX
   VIDEO CALL ONLY
   ========================================================= */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video
.call-person{
    position:absolute !important;

    top:
        calc(
            env(safe-area-inset-top,0px)
            + 52px
        ) !important;

    left:0 !important;
    right:0 !important;

    width:100% !important;
    max-width:100% !important;

    margin:0 !important;
    padding:0 80px !important;

    transform:none !important;

    box-sizing:border-box !important;

    text-align:center !important;

    overflow:visible !important;

    z-index:25 !important;
}


/* NAME */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video
.call-person h2{
    display:block !important;

    width:100% !important;
    max-width:100% !important;

    margin:0 !important;
    padding:0 !important;

    color:#fff !important;

    font-size:23px !important;
    line-height:29px !important;

    font-weight:500 !important;

    text-align:center !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}


/* STATUS / TIMER */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video
.zevro-call-state{
    width:100% !important;

    margin:3px 0 0 !important;
    padding:0 !important;

    text-align:center !important;
}


#callOverlay:not(.zevro-incoming-call)
.call-stage.video
#callStatus,

#callOverlay:not(.zevro-incoming-call)
.call-stage.video
#callDuration{
    display:block !important;

    position:static !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    text-align:center !important;

    color:#fff !important;
}


/* hide signal bars on video call */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video
.zevro-call-signal{
    display:none !important;
}


/* small phone */

@media(max-width:380px){

    #callOverlay:not(.zevro-incoming-call)
    .call-stage.video
    .call-person{
        padding-left:65px !important;
        padding-right:65px !important;
    }
}



/* =========================================================
   ZEVRO WHATSAPP STYLE VIDEO CALL UI
   UI ONLY - EXISTING WEBRTC/CALL LOGIC UNCHANGED
   ========================================================= */

#callOverlay:not(.zevro-incoming-call){
    padding:0 !important;
    background:#0b1115 !important;
}

#callOverlay:not(.zevro-incoming-call) .call-panel{
    position:relative !important;
    width:100% !important;
    max-width:none !important;
    height:100dvh !important;
    max-height:none !important;

    display:block !important;

    border-radius:0 !important;
    overflow:hidden !important;

    background:#0b1115 !important;
    box-shadow:none !important;
}


/* =========================
   VIDEO AREA
   ========================= */

#callOverlay:not(.zevro-incoming-call) .call-stage.video{
    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    display:block !important;

    background:#111820 !important;
    overflow:hidden !important;
}


/* Other person's video = FULL SCREEN */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video #remoteVideo{

    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    object-fit:cover !important;

    border:0 !important;
    border-radius:0 !important;

    background:#10171c !important;

    z-index:1 !important;
}


/* =========================
   NAME + CALL TIMER
   ========================= */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video .call-person{

    position:absolute !important;

    top:max(55px, calc(env(safe-area-inset-top) + 30px)) !important;
    left:50% !important;

    transform:translateX(-50%) !important;

    z-index:20 !important;

    width:auto !important;
    max-width:60% !important;

    text-align:center !important;

    color:#fff !important;

    text-shadow:0 1px 5px rgba(0,0,0,.8) !important;

    opacity:1 !important;
    pointer-events:none !important;
}


/* Hide big center avatar during video */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video .zevro-call-avatar-ring{

    display:none !important;
}


#callOverlay:not(.zevro-incoming-call)
.call-stage.video .call-person h2{

    margin:0 !important;

    color:#fff !important;

    font-size:22px !important;
    line-height:28px !important;

    font-weight:500 !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}


/* Call status */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video #callStatus{

    margin:2px 0 0 !important;

    color:#fff !important;

    font-size:15px !important;
    line-height:20px !important;

    font-weight:400 !important;
}


/* Connected duration */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video #callDuration{

    margin:2px 0 0 !important;

    color:#fff !important;

    font-size:15px !important;
    line-height:20px !important;

    font-weight:400 !important;
}


/* Hide signal graphic */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video .zevro-call-signal{

    display:none !important;
}


/* =========================
   TOP ACTION BUTTONS
   ========================= */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video .zevro-call-top-actions{

    position:absolute !important;

    top:max(54px, calc(env(safe-area-inset-top) + 28px)) !important;

    left:18px !important;
    right:18px !important;

    z-index:30 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    pointer-events:none !important;
}


#callOverlay:not(.zevro-incoming-call)
.call-stage.video .zevro-call-top-btn{

    pointer-events:auto !important;

    width:58px !important;
    height:58px !important;

    min-width:58px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:0 !important;

    border:0 !important;
    border-radius:50% !important;

    background:rgba(19,28,33,.94) !important;

    color:#fff !important;

    font-size:23px !important;
    line-height:1 !important;

    box-shadow:none !important;
}


/* =========================
   MY VIDEO = FLOATING BOX
   ========================= */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video #localVideo{

    display:block !important;

    position:absolute !important;

    right:18px !important;

    bottom:168px !important;

    width:43% !important;
    max-width:220px !important;

    height:auto !important;
    aspect-ratio:3 / 4 !important;

    object-fit:cover !important;

    border:0 !important;

    border-radius:18px !important;

    background:#151b1f !important;

    box-shadow:
        0 4px 20px rgba(0,0,0,.38) !important;

    transform:scaleX(-1) !important;

    z-index:15 !important;
}


/* =========================
   BOTTOM WHATSAPP CONTROL BAR
   ========================= */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video + .call-controls{

    position:absolute !important;

    left:18px !important;
    right:18px !important;

    bottom:max(
        18px,
        calc(env(safe-area-inset-bottom) + 10px)
    ) !important;

    z-index:50 !important;

    height:94px !important;

    padding:0 13px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:space-around !important;

    gap:8px !important;

    border-radius:48px !important;

    background:rgba(19,28,33,.96) !important;

    box-shadow:
        0 4px 22px rgba(0,0,0,.30) !important;
}


/* Every control */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video + .call-controls button{

    position:relative !important;

    flex:0 0 60px !important;

    width:60px !important;
    height:60px !important;

    min-width:60px !important;

    margin:0 !important;
    padding:0 !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    border:0 !important;

    border-radius:50% !important;

    background:#202a30 !important;

    color:#fff !important;

    box-shadow:none !important;
}


/* Icons */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video + .call-controls button b{

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    width:100% !important;
    height:100% !important;

    margin:0 !important;

    font-size:25px !important;
    line-height:1 !important;

    font-weight:400 !important;
}


/* WhatsApp style doesn't show text under controls */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video + .call-controls button span{

    display:none !important;
}


/* Speaker + camera = white active buttons */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video + .call-controls #speakerCall,

#callOverlay:not(.zevro-incoming-call)
.call-stage.video + .call-controls #cameraCall{

    background:#fff !important;
    color:#101820 !important;
}


/* Mute */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video + .call-controls #muteCall{

    background:#202a30 !important;
    color:#fff !important;
}


/* Camera switch = dark circle */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video + .call-controls #switchCamera{

    background:#202a30 !important;
    color:#fff !important;
}


/* End call = WhatsApp red */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video + .call-controls #endCall{

    background:#f50046 !important;
    color:#fff !important;
}


/* Disabled controls */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video + .call-controls button.off{

    background:#465158 !important;
    color:#fff !important;
}


/* =========================
   SMALL PHONE
   ========================= */

@media(max-width:480px){

    #callOverlay:not(.zevro-incoming-call)
    .call-stage.video #localVideo{

        right:16px !important;
        bottom:155px !important;

        width:43% !important;
        max-width:185px !important;

        border-radius:17px !important;
    }


    #callOverlay:not(.zevro-incoming-call)
    .call-stage.video + .call-controls{

        left:14px !important;
        right:14px !important;

        height:88px !important;

        padding-left:9px !important;
        padding-right:9px !important;
    }


    #callOverlay:not(.zevro-incoming-call)
    .call-stage.video + .call-controls button{

        flex-basis:56px !important;

        width:56px !important;
        height:56px !important;

        min-width:56px !important;
    }


    #callOverlay:not(.zevro-incoming-call)
    .call-stage.video + .call-controls button b{

        font-size:23px !important;
    }


    #callOverlay:not(.zevro-incoming-call)
    .call-stage.video .zevro-call-top-btn{

        width:54px !important;
        height:54px !important;

        min-width:54px !important;
    }
}


/* =========================
   KEEP VOICE CALL UNTOUCHED
   ========================= */



/* =========================================================
   ZEVRO WHATSAPP-STYLE OUTGOING VIDEO CALL - RINGING STATE
   ========================================================= */


/* Always keep outgoing video call stage full-screen */
#callOverlay:not(.zevro-incoming-call) .call-stage.video{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    overflow:hidden !important;
}


/* ---------------------------------------------------------
   CALLER NAME / STATUS
   WhatsApp-style centered at top
   --------------------------------------------------------- */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video .call-person{

    position:absolute !important;

    top:max(
        70px,
        calc(env(safe-area-inset-top) + 45px)
    ) !important;

    left:50% !important;
    right:auto !important;

    transform:translateX(-50%) !important;

    width:70% !important;
    max-width:340px !important;

    margin:0 !important;
    padding:0 !important;

    text-align:center !important;

    z-index:40 !important;

    opacity:1 !important;

    pointer-events:none !important;
}


#callOverlay:not(.zevro-incoming-call)
.call-stage.video .call-person h2{

    display:block !important;

    margin:0 !important;

    color:#fff !important;

    font-size:23px !important;
    line-height:29px !important;

    font-weight:600 !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;

    text-align:center !important;
}


/* Ringing / Calling */
#callOverlay:not(.zevro-incoming-call)
.call-stage.video #callStatus{

    display:block !important;

    margin:4px 0 0 !important;

    color:rgba(255,255,255,.92) !important;

    font-size:16px !important;
    line-height:21px !important;

    text-align:center !important;
}


/* Connected call timer */
#callOverlay:not(.zevro-incoming-call)
.call-stage.video #callDuration{

    margin:4px 0 0 !important;

    color:#fff !important;

    font-size:16px !important;

    text-align:center !important;
}


/* Hide avatar in video-call screen */
#callOverlay:not(.zevro-incoming-call)
.call-stage.video .zevro-call-avatar-ring{

    display:none !important;
}


/* Hide old signal bars */
#callOverlay:not(.zevro-incoming-call)
.call-stage.video .zevro-call-signal{

    display:none !important;
}


/* ---------------------------------------------------------
   TOP SIDE ACTIONS
   Similar WhatsApp video-call controls
   --------------------------------------------------------- */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video .zevro-call-top-actions{

    position:absolute !important;

    top:max(
        70px,
        calc(env(safe-area-inset-top) + 45px)
    ) !important;

    left:auto !important;
    right:18px !important;

    width:58px !important;

    display:flex !important;
    flex-direction:column !important;

    align-items:center !important;

    gap:16px !important;

    z-index:50 !important;

    pointer-events:auto !important;
}


#callOverlay:not(.zevro-incoming-call)
.call-stage.video .zevro-call-top-btn{

    width:58px !important;
    height:58px !important;
    min-width:58px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    border-radius:50% !important;

    background:rgba(24,34,39,.92) !important;

    color:#fff !important;

    font-size:23px !important;

    box-shadow:none !important;
}


/* ---------------------------------------------------------
   LOCAL VIDEO
   While calling/ringing keep self-preview visible
   --------------------------------------------------------- */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video #localVideo{

    position:absolute !important;

    right:18px !important;
    bottom:165px !important;

    width:42% !important;
    max-width:190px !important;

    aspect-ratio:3/4 !important;

    object-fit:cover !important;

    border:0 !important;
    border-radius:18px !important;

    background:#131a1f !important;

    z-index:25 !important;

    transform:scaleX(-1) !important;

    box-shadow:
        0 5px 22px rgba(0,0,0,.35) !important;
}


/* ---------------------------------------------------------
   BOTTOM CALL BAR
   --------------------------------------------------------- */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video + .call-controls{

    position:absolute !important;

    left:18px !important;
    right:18px !important;

    bottom:max(
        18px,
        calc(env(safe-area-inset-bottom) + 8px)
    ) !important;

    z-index:60 !important;

    min-height:92px !important;
    height:92px !important;

    padding:0 12px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:space-around !important;

    gap:8px !important;

    border-radius:48px !important;

    background:rgba(17,26,31,.96) !important;

    box-shadow:
        0 4px 18px rgba(0,0,0,.35) !important;
}


/* Keep buttons circular */
#callOverlay:not(.zevro-incoming-call)
.call-stage.video + .call-controls button{

    flex:0 0 60px !important;

    width:60px !important;
    height:60px !important;

    min-width:60px !important;

    border-radius:50% !important;
}


/* End button */
#callOverlay:not(.zevro-incoming-call)
.call-stage.video + .call-controls #endCall{

    background:#f50046 !important;
    color:#fff !important;
}


/* ---------------------------------------------------------
   CONNECTED STATE
   Keep title visible like WhatsApp
   --------------------------------------------------------- */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video.connected .call-person{

    opacity:1 !important;
    pointer-events:none !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:480px){

    #callOverlay:not(.zevro-incoming-call)
    .call-stage.video .call-person{

        top:max(
            62px,
            calc(env(safe-area-inset-top) + 38px)
        ) !important;

        width:62% !important;
    }


    #callOverlay:not(.zevro-incoming-call)
    .call-stage.video .call-person h2{

        font-size:21px !important;
    }


    #callOverlay:not(.zevro-incoming-call)
    .call-stage.video .zevro-call-top-actions{

        top:max(
            60px,
            calc(env(safe-area-inset-top) + 36px)
        ) !important;

        right:15px !important;
    }


    #callOverlay:not(.zevro-incoming-call)
    .call-stage.video .zevro-call-top-btn{

        width:54px !important;
        height:54px !important;
        min-width:54px !important;
    }


    #callOverlay:not(.zevro-incoming-call)
    .call-stage.video #localVideo{

        right:15px !important;
        bottom:155px !important;

        width:42% !important;
        max-width:170px !important;
    }


    #callOverlay:not(.zevro-incoming-call)
    .call-stage.video + .call-controls{

        left:14px !important;
        right:14px !important;

        height:88px !important;
        min-height:88px !important;
    }
}


/* =========================================================
   ZEVRO VIDEO CALL - CENTER NAME + STATUS
   ========================================================= */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video .call-person{

    position:absolute !important;

    top:max(
        72px,
        calc(env(safe-area-inset-top) + 46px)
    ) !important;

    left:50% !important;
    right:auto !important;

    transform:translateX(-50%) !important;

    width:72% !important;
    max-width:360px !important;

    margin:0 !important;
    padding:0 !important;

    text-align:center !important;

    z-index:45 !important;

    opacity:1 !important;
    pointer-events:none !important;
}


#callOverlay:not(.zevro-incoming-call)
.call-stage.video .call-person h2{

    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    color:#fff !important;

    font-size:23px !important;
    line-height:29px !important;

    font-weight:600 !important;

    text-align:center !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}


#callOverlay:not(.zevro-incoming-call)
.call-stage.video .zevro-call-state{

    width:100% !important;

    display:flex !important;
    flex-direction:column !important;

    align-items:center !important;
    justify-content:center !important;

    text-align:center !important;
}


#callOverlay:not(.zevro-incoming-call)
.call-stage.video #callStatus{

    width:100% !important;

    margin:4px 0 0 !important;
    padding:0 !important;

    color:rgba(255,255,255,.92) !important;

    font-size:16px !important;
    line-height:21px !important;

    text-align:center !important;
}


#callOverlay:not(.zevro-incoming-call)
.call-stage.video #callDuration{

    width:100% !important;

    margin:4px 0 0 !important;
    padding:0 !important;

    color:#fff !important;

    font-size:16px !important;
    line-height:21px !important;

    text-align:center !important;
}


/* keep avatar/signal hidden in video call */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video .zevro-call-avatar-ring,
#callOverlay:not(.zevro-incoming-call)
.call-stage.video .zevro-call-signal{

    display:none !important;
}


/* connected হওয়ার পরও center title থাকবে */

#callOverlay:not(.zevro-incoming-call)
.call-stage.video.connected .call-person{

    left:50% !important;
    transform:translateX(-50%) !important;

    opacity:1 !important;
}


/* Mobile */

@media(max-width:480px){

    #callOverlay:not(.zevro-incoming-call)
    .call-stage.video .call-person{

        top:max(
            66px,
            calc(env(safe-area-inset-top) + 40px)
        ) !important;

        left:50% !important;

        width:64% !important;

        transform:translateX(-50%) !important;
    }

    #callOverlay:not(.zevro-incoming-call)
    .call-stage.video .call-person h2{

        font-size:21px !important;
        line-height:27px !important;
    }

    #callOverlay:not(.zevro-incoming-call)
    .call-stage.video #callStatus,
    #callOverlay:not(.zevro-incoming-call)
    .call-stage.video #callDuration{

        font-size:15px !important;
    }
}


/* =========================================================
   FINAL HARD FIX
   OUTGOING VIDEO CALL NAME + STATUS TRUE CENTER
   ========================================================= */

html body #callOverlay:not(.zevro-incoming-call)
.call-panel .call-stage.video .call-person{

    position:absolute !important;

    top:max(
        68px,
        calc(env(safe-area-inset-top) + 42px)
    ) !important;

    left:0 !important;
    right:0 !important;

    width:100% !important;
    max-width:none !important;

    margin:0 !important;
    padding:0 90px !important;

    transform:none !important;

    display:block !important;

    text-align:center !important;

    z-index:999 !important;

    opacity:1 !important;
    visibility:visible !important;

    pointer-events:none !important;
}


html body #callOverlay:not(.zevro-incoming-call)
.call-panel .call-stage.video .call-person h2{

    display:block !important;

    width:100% !important;

    margin:0 auto !important;
    padding:0 !important;

    color:#fff !important;

    font-size:23px !important;
    line-height:29px !important;

    font-weight:600 !important;

    text-align:center !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}


html body #callOverlay:not(.zevro-incoming-call)
.call-panel .call-stage.video .zevro-call-state{

    width:100% !important;

    display:flex !important;
    flex-direction:column !important;

    align-items:center !important;
    justify-content:center !important;

    margin:0 !important;
    padding:0 !important;

    text-align:center !important;
}


html body #callOverlay:not(.zevro-incoming-call)
.call-panel .call-stage.video #callStatus{

    display:block !important;

    position:static !important;

    width:100% !important;

    margin:4px auto 0 !important;
    padding:0 !important;

    color:rgba(255,255,255,.95) !important;

    font-size:16px !important;
    line-height:21px !important;

    text-align:center !important;

    transform:none !important;
}


html body #callOverlay:not(.zevro-incoming-call)
.call-panel .call-stage.video #callDuration{

    position:static !important;

    width:100% !important;

    margin:4px auto 0 !important;
    padding:0 !important;

    color:#fff !important;

    font-size:16px !important;
    line-height:21px !important;

    text-align:center !important;

    transform:none !important;
}


/* Video call-এ old avatar + signal hide */

html body #callOverlay:not(.zevro-incoming-call)
.call-panel .call-stage.video .zevro-call-avatar-ring,

html body #callOverlay:not(.zevro-incoming-call)
.call-panel .call-stage.video .zevro-call-signal{

    display:none !important;
}


/* Connected হওয়ার পরও same position */

html body #callOverlay:not(.zevro-incoming-call)
.call-panel .call-stage.video.connected .call-person{

    left:0 !important;
    right:0 !important;

    width:100% !important;

    transform:none !important;

    opacity:1 !important;
    visibility:visible !important;
}


/* Right-side buttons যেন name-এর উপর না আসে */

html body #callOverlay:not(.zevro-incoming-call)
.call-panel .call-stage.video .zevro-call-top-actions{

    left:auto !important;
    right:16px !important;

    width:58px !important;

    z-index:1000 !important;
}


/* Mobile exact center */

@media(max-width:480px){

    html body #callOverlay:not(.zevro-incoming-call)
    .call-panel .call-stage.video .call-person{

        top:max(
            62px,
            calc(env(safe-area-inset-top) + 36px)
        ) !important;

        left:0 !important;
        right:0 !important;

        width:100% !important;

        padding-left:78px !important;
        padding-right:78px !important;

        transform:none !important;
    }


    html body #callOverlay:not(.zevro-incoming-call)
    .call-panel .call-stage.video .call-person h2{

        font-size:21px !important;
        line-height:27px !important;
    }


    html body #callOverlay:not(.zevro-incoming-call)
    .call-panel .call-stage.video #callStatus,

    html body #callOverlay:not(.zevro-incoming-call)
    .call-panel .call-stage.video #callDuration{

        font-size:15px !important;
    }
}


/* =========================================================
   ZEVRO VOICE CALL - FULL SCREEN FIX
   Prevent video-call CSS from affecting audio calls
   ========================================================= */

#callOverlay:not(.zevro-incoming-call) .call-stage.voice{
    position:absolute !important;
    inset:0 0 150px 0 !important;

    width:100% !important;
    height:auto !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    overflow:hidden !important;

    background:
        linear-gradient(
            160deg,
            #369be7 0%,
            #537be9 55%,
            #7756ee 100%
        ) !important;
}


/* Voice call has no videos */
#callOverlay:not(.zevro-incoming-call)
.call-stage.voice #remoteVideo,

#callOverlay:not(.zevro-incoming-call)
.call-stage.voice #localVideo{

    display:none !important;
}


/* Person area */
#callOverlay:not(.zevro-incoming-call)
.call-stage.voice .call-person{

    position:relative !important;

    top:auto !important;
    left:auto !important;
    right:auto !important;

    width:100% !important;
    max-width:none !important;

    margin:0 !important;
    padding:40px 20px !important;

    transform:none !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    text-align:center !important;

    opacity:1 !important;
    visibility:visible !important;

    z-index:10 !important;
}


/* Show profile avatar on voice call */
#callOverlay:not(.zevro-incoming-call)
.call-stage.voice .zevro-call-avatar-ring{

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    width:155px !important;
    height:155px !important;

    margin:0 auto 22px !important;

    border-radius:50% !important;

    background:rgba(255,255,255,.08) !important;

    box-shadow:
        0 0 0 16px rgba(255,255,255,.06),
        0 0 0 32px rgba(255,255,255,.035) !important;
}


#callOverlay:not(.zevro-incoming-call)
.call-stage.voice .zevro-call-avatar-ring .avatar{

    width:135px !important;
    height:135px !important;

    margin:0 !important;

    border-radius:50% !important;

    overflow:hidden !important;

    font-size:48px !important;
}


#callOverlay:not(.zevro-incoming-call)
.call-stage.voice .zevro-call-avatar-ring .avatar img{

    width:100% !important;
    height:100% !important;

    object-fit:cover !important;

    border-radius:50% !important;
}


/* Name */
#callOverlay:not(.zevro-incoming-call)
.call-stage.voice .call-person h2{

    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    color:#fff !important;

    font-size:31px !important;
    line-height:38px !important;

    font-weight:700 !important;

    text-align:center !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}


/* Status / duration */
#callOverlay:not(.zevro-incoming-call)
.call-stage.voice .zevro-call-state{

    width:100% !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;

    margin-top:8px !important;

    text-align:center !important;
}


#callOverlay:not(.zevro-incoming-call)
.call-stage.voice #callStatus,

#callOverlay:not(.zevro-incoming-call)
.call-stage.voice #callDuration{

    position:static !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    color:rgba(255,255,255,.95) !important;

    font-size:20px !important;
    line-height:27px !important;

    text-align:center !important;

    transform:none !important;
}


#callOverlay:not(.zevro-incoming-call)
.call-stage.voice .zevro-call-signal{

    display:none !important;
}


/* Top actions */
#callOverlay:not(.zevro-incoming-call)
.call-stage.voice .zevro-call-top-actions{

    position:absolute !important;

    top:max(
        55px,
        calc(env(safe-area-inset-top) + 30px)
    ) !important;

    left:22px !important;
    right:22px !important;

    width:auto !important;

    display:flex !important;
    flex-direction:row !important;

    justify-content:space-between !important;
    align-items:center !important;

    z-index:30 !important;
}


#callOverlay:not(.zevro-incoming-call)
.call-stage.voice .zevro-call-top-btn{

    width:58px !important;
    height:58px !important;

    min-width:58px !important;

    border:0 !important;
    border-radius:50% !important;

    background:rgba(20,29,35,.88) !important;

    color:#fff !important;

    font-size:22px !important;
}


/* =========================================================
   VOICE CALL BOTTOM BAR
   ========================================================= */

#callOverlay:not(.zevro-incoming-call)
.call-stage.voice + .call-controls{

    position:absolute !important;

    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    width:100% !important;
    height:150px !important;

    padding:
        18px
        18px
        max(22px,env(safe-area-inset-bottom))
        !important;

    display:flex !important;

    align-items:flex-start !important;
    justify-content:space-around !important;

    gap:8px !important;

    border-radius:0 !important;

    background:#0b1115 !important;

    z-index:50 !important;
}


#callOverlay:not(.zevro-incoming-call)
.call-stage.voice + .call-controls .zevro-call-action{

    flex:0 0 74px !important;

    width:74px !important;
    height:74px !important;

    min-width:74px !important;

    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    flex-direction:column !important;

    align-items:center !important;
    justify-content:center !important;

    border-radius:50% !important;

    background:#252e34 !important;

    color:#fff !important;
}


/* Start video white */
#callOverlay:not(.zevro-incoming-call)
.call-stage.voice + .call-controls #startVideoCall{

    background:#fff !important;
    color:#12191e !important;
}


/* End call red */
#callOverlay:not(.zevro-incoming-call)
.call-stage.voice + .call-controls #endCall{

    background:#f50046 !important;
    color:#fff !important;
}


#callOverlay:not(.zevro-incoming-call)
.call-stage.voice + .call-controls .zevro-call-action b{

    display:block !important;

    margin:0 !important;

    font-size:27px !important;
    line-height:1 !important;
}


#callOverlay:not(.zevro-incoming-call)
.call-stage.voice + .call-controls .zevro-call-action span{

    display:block !important;

    position:absolute !important;

    top:82px !important;

    width:95px !important;

    color:#fff !important;

    font-size:13px !important;

    text-align:center !important;
}


/* Mobile */
@media(max-width:480px){

    #callOverlay:not(.zevro-incoming-call)
    .call-stage.voice{

        inset:0 0 145px 0 !important;
    }

    #callOverlay:not(.zevro-incoming-call)
    .call-stage.voice .zevro-call-avatar-ring{

        width:145px !important;
        height:145px !important;
    }

    #callOverlay:not(.zevro-incoming-call)
    .call-stage.voice .zevro-call-avatar-ring .avatar{

        width:125px !important;
        height:125px !important;
    }

    #callOverlay:not(.zevro-incoming-call)
    .call-stage.voice .call-person h2{

        font-size:29px !important;
    }

    #callOverlay:not(.zevro-incoming-call)
    .call-stage.voice + .call-controls{

        height:145px !important;
    }

    #callOverlay:not(.zevro-incoming-call)
    .call-stage.voice + .call-controls .zevro-call-action{

        flex-basis:68px !important;

        width:68px !important;
        height:68px !important;

        min-width:68px !important;
    }

    #callOverlay:not(.zevro-incoming-call)
    .call-stage.voice + .call-controls .zevro-call-action span{

        top:76px !important;
    }
}


/* =========================================================
   ZEVRO AUDIO CALL
   TELEGRAM-LIKE SMALL COMPACT DESIGN
   ========================================================= */


/* Full gradient screen */
html body #callOverlay:not(.zevro-incoming-call)
.call-panel .call-stage.voice{

    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding-bottom:125px !important;

    background:
        linear-gradient(
            160deg,
            #3699e5 0%,
            #537bea 55%,
            #7657ef 100%
        ) !important;

    overflow:hidden !important;
}


/* Voice call person block */
html body #callOverlay:not(.zevro-incoming-call)
.call-stage.voice .call-person{

    position:relative !important;

    top:auto !important;
    left:auto !important;
    right:auto !important;

    width:100% !important;

    margin:0 !important;
    padding:0 25px !important;

    transform:none !important;

    display:flex !important;
    flex-direction:column !important;

    align-items:center !important;
    justify-content:center !important;

    text-align:center !important;

    opacity:1 !important;
}


/* SMALLER avatar */
html body #callOverlay:not(.zevro-incoming-call)
.call-stage.voice .zevro-call-avatar-ring{

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    width:126px !important;
    height:126px !important;

    margin:0 auto 18px !important;

    border-radius:50% !important;

    background:rgba(255,255,255,.06) !important;

    box-shadow:
        0 0 0 11px rgba(255,255,255,.045),
        0 0 0 22px rgba(255,255,255,.025) !important;
}


html body #callOverlay:not(.zevro-incoming-call)
.call-stage.voice .zevro-call-avatar-ring .avatar{

    width:112px !important;
    height:112px !important;

    margin:0 !important;

    border-radius:50% !important;

    overflow:hidden !important;

    font-size:40px !important;
}


html body #callOverlay:not(.zevro-incoming-call)
.call-stage.voice .zevro-call-avatar-ring .avatar img{

    width:100% !important;
    height:100% !important;

    object-fit:cover !important;

    border-radius:50% !important;
}


/* Smaller name */
html body #callOverlay:not(.zevro-incoming-call)
.call-stage.voice .call-person h2{

    margin:0 !important;

    color:#fff !important;

    font-size:25px !important;
    line-height:31px !important;

    font-weight:500 !important;

    text-align:center !important;
}


/* Calling / Ringing / timer */
html body #callOverlay:not(.zevro-incoming-call)
.call-stage.voice .zevro-call-state{

    width:100% !important;

    margin-top:5px !important;

    display:flex !important;
    flex-direction:column !important;

    align-items:center !important;

    text-align:center !important;
}


html body #callOverlay:not(.zevro-incoming-call)
.call-stage.voice #callStatus,

html body #callOverlay:not(.zevro-incoming-call)
.call-stage.voice #callDuration{

    position:static !important;

    width:auto !important;

    margin:0 !important;
    padding:0 !important;

    color:rgba(255,255,255,.95) !important;

    font-size:17px !important;
    line-height:23px !important;

    text-align:center !important;

    transform:none !important;
}


html body #callOverlay:not(.zevro-incoming-call)
.call-stage.voice .zevro-call-signal{

    display:none !important;
}


/* =========================================================
   SMALL TOP BUTTONS
   ========================================================= */

html body #callOverlay:not(.zevro-incoming-call)
.call-stage.voice .zevro-call-top-actions{

    position:absolute !important;

    top:max(
        45px,
        calc(env(safe-area-inset-top) + 20px)
    ) !important;

    left:24px !important;
    right:24px !important;

    width:auto !important;

    display:flex !important;
    flex-direction:row !important;

    align-items:center !important;
    justify-content:space-between !important;

    z-index:50 !important;
}


html body #callOverlay:not(.zevro-incoming-call)
.call-stage.voice .zevro-call-top-btn{

    width:46px !important;
    height:46px !important;

    min-width:46px !important;

    padding:0 !important;
    margin:0 !important;

    border:0 !important;
    border-radius:50% !important;

    background:rgba(24,34,39,.90) !important;

    color:#fff !important;

    font-size:18px !important;

    box-shadow:none !important;
}


/* =========================================================
   TELEGRAM-LIKE SMALL BOTTOM CONTROLS
   ========================================================= */

html body #callOverlay:not(.zevro-incoming-call)
.call-stage.voice + .call-controls{

    position:absolute !important;

    left:18px !important;
    right:18px !important;

    bottom:max(
        22px,
        calc(env(safe-area-inset-bottom) + 12px)
    ) !important;

    width:auto !important;
    height:95px !important;

    padding:0 !important;

    display:flex !important;

    align-items:flex-start !important;
    justify-content:space-around !important;

    gap:4px !important;

    background:transparent !important;

    border-radius:0 !important;

    box-shadow:none !important;

    z-index:100 !important;
}


/* SMALL buttons */
html body #callOverlay:not(.zevro-incoming-call)
.call-stage.voice + .call-controls .zevro-call-action{

    position:relative !important;

    flex:0 0 58px !important;

    width:58px !important;
    height:58px !important;

    min-width:58px !important;

    margin:0 !important;
    padding:0 !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    border:0 !important;
    border-radius:50% !important;

    background:rgba(255,255,255,.15) !important;

    color:#fff !important;

    box-shadow:none !important;
}


/* Start video slightly light like Telegram */
html body #callOverlay:not(.zevro-incoming-call)
.call-stage.voice + .call-controls #startVideoCall{

    background:rgba(255,255,255,.22) !important;

    color:#fff !important;
}


/* End call */
html body #callOverlay:not(.zevro-incoming-call)
.call-stage.voice + .call-controls #endCall{

    background:#ef3340 !important;

    color:#fff !important;
}


/* Small icons */
html body #callOverlay:not(.zevro-incoming-call)
.call-stage.voice + .call-controls .zevro-call-action b{

    display:flex !important;

    width:100% !important;
    height:100% !important;

    align-items:center !important;
    justify-content:center !important;

    margin:0 !important;

    font-size:22px !important;
    line-height:1 !important;
}


/* Small labels below circle */
html body #callOverlay:not(.zevro-incoming-call)
.call-stage.voice + .call-controls .zevro-call-action span{

    display:block !important;

    position:absolute !important;

    top:65px !important;
    left:50% !important;

    width:82px !important;

    transform:translateX(-50%) !important;

    color:#fff !important;

    font-size:11px !important;
    line-height:15px !important;

    font-weight:400 !important;

    text-align:center !important;

    white-space:nowrap !important;
}


/* =========================================================
   MOBILE EXACT TELEGRAM SIZE
   ========================================================= */

@media(max-width:480px){

    html body #callOverlay:not(.zevro-incoming-call)
    .call-stage.voice{

        padding-bottom:110px !important;
    }


    html body #callOverlay:not(.zevro-incoming-call)
    .call-stage.voice .zevro-call-avatar-ring{

        width:118px !important;
        height:118px !important;

        margin-bottom:15px !important;
    }


    html body #callOverlay:not(.zevro-incoming-call)
    .call-stage.voice .zevro-call-avatar-ring .avatar{

        width:105px !important;
        height:105px !important;
    }


    html body #callOverlay:not(.zevro-incoming-call)
    .call-stage.voice .call-person h2{

        font-size:24px !important;
        line-height:29px !important;
    }


    html body #callOverlay:not(.zevro-incoming-call)
    .call-stage.voice #callStatus,

    html body #callOverlay:not(.zevro-incoming-call)
    .call-stage.voice #callDuration{

        font-size:16px !important;
    }


    html body #callOverlay:not(.zevro-incoming-call)
    .call-stage.voice .zevro-call-top-btn{

        width:43px !important;
        height:43px !important;

        min-width:43px !important;

        font-size:17px !important;
    }


    html body #callOverlay:not(.zevro-incoming-call)
    .call-stage.voice + .call-controls{

        left:10px !important;
        right:10px !important;

        bottom:max(
            20px,
            calc(env(safe-area-inset-bottom) + 10px)
        ) !important;

        height:88px !important;
    }


    html body #callOverlay:not(.zevro-incoming-call)
    .call-stage.voice + .call-controls .zevro-call-action{

        flex-basis:54px !important;

        width:54px !important;
        height:54px !important;

        min-width:54px !important;
    }


    html body #callOverlay:not(.zevro-incoming-call)
    .call-stage.voice + .call-controls .zevro-call-action b{

        font-size:20px !important;
    }


    html body #callOverlay:not(.zevro-incoming-call)
    .call-stage.voice + .call-controls .zevro-call-action span{

        top:61px !important;

        width:76px !important;

        font-size:10px !important;
    }
}


/* =====================================================
   ZEVRO AUDIO CALL - SMALL TELEGRAM STYLE BUTTONS
   ONLY TOP + BOTTOM BUTTON POSITION/SIZE
   ===================================================== */


/* ---------- TOP LEFT + TOP RIGHT ---------- */

html body #callOverlay:not(.zevro-incoming-call)
.call-stage.voice .zevro-call-top-actions{
    position:absolute !important;

    top:max(18px, calc(env(safe-area-inset-top) + 8px)) !important;
    left:10px !important;
    right:10px !important;

    width:auto !important;

    display:flex !important;
    flex-direction:row !important;
    justify-content:space-between !important;
    align-items:center !important;

    z-index:100 !important;
}


/* top 2 buttons smaller */

html body #callOverlay:not(.zevro-incoming-call)
.call-stage.voice .zevro-call-top-btn{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;

    padding:0 !important;
    margin:0 !important;

    border-radius:50% !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    font-size:16px !important;

    box-shadow:none !important;
}


/* ---------- BOTTOM 4 CONTROLS ---------- */

html body #callOverlay:not(.zevro-incoming-call)
.call-stage.voice + .call-controls{
    position:absolute !important;

    left:8px !important;
    right:8px !important;

    bottom:max(
        8px,
        calc(env(safe-area-inset-bottom) + 4px)
    ) !important;

    width:auto !important;
    height:78px !important;

    padding:0 !important;
    margin:0 !important;

    display:flex !important;
    flex-direction:row !important;
    justify-content:space-around !important;
    align-items:flex-start !important;

    gap:2px !important;

    background:transparent !important;
    box-shadow:none !important;

    z-index:100 !important;
}


/* bottom circle buttons smaller */

html body #callOverlay:not(.zevro-incoming-call)
.call-stage.voice + .call-controls .zevro-call-action{
    position:relative !important;

    flex:0 0 48px !important;

    width:48px !important;
    height:48px !important;

    min-width:48px !important;
    min-height:48px !important;

    max-width:48px !important;
    max-height:48px !important;

    padding:0 !important;
    margin:0 !important;

    border-radius:50% !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}


/* icon smaller */

html body #callOverlay:not(.zevro-incoming-call)
.call-stage.voice + .call-controls .zevro-call-action b{
    display:flex !important;

    width:100% !important;
    height:100% !important;

    align-items:center !important;
    justify-content:center !important;

    margin:0 !important;

    font-size:18px !important;
    line-height:1 !important;
}


/* label smaller and directly under button */

html body #callOverlay:not(.zevro-incoming-call)
.call-stage.voice + .call-controls .zevro-call-action span{
    position:absolute !important;

    top:53px !important;
    left:50% !important;

    transform:translateX(-50%) !important;

    width:72px !important;

    margin:0 !important;

    font-size:10px !important;
    line-height:12px !important;

    text-align:center !important;
    white-space:nowrap !important;
}


/* End Call stays red */

html body #callOverlay:not(.zevro-incoming-call)
.call-stage.voice + .call-controls #endCall{
    background:#ef3340 !important;
}


/* Smaller phones */

@media(max-width:400px){

    html body #callOverlay:not(.zevro-incoming-call)
    .call-stage.voice .zevro-call-top-actions{
        left:8px !important;
        right:8px !important;
    }

    html body #callOverlay:not(.zevro-incoming-call)
    .call-stage.voice .zevro-call-top-btn{
        width:36px !important;
        height:36px !important;

        min-width:36px !important;
        min-height:36px !important;

        font-size:15px !important;
    }

    html body #callOverlay:not(.zevro-incoming-call)
    .call-stage.voice + .call-controls .zevro-call-action{
        flex-basis:46px !important;

        width:46px !important;
        height:46px !important;

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

        max-width:46px !important;
        max-height:46px !important;
    }

    html body #callOverlay:not(.zevro-incoming-call)
    .call-stage.voice + .call-controls .zevro-call-action b{
        font-size:17px !important;
    }

    html body #callOverlay:not(.zevro-incoming-call)
    .call-stage.voice + .call-controls .zevro-call-action span{
        top:51px !important;
        font-size:9px !important;
    }
}



/* =========================================================
   ZEVRO - WHATSAPP STYLE CALL HISTORY CARD
   ========================================================= */

.message.zevro-call-history-message{
    min-width:230px !important;
    max-width:285px !important;
    padding:7px 9px 5px !important;
}


/* Call card */
.zevro-call-history-card{
    display:flex !important;
    align-items:center !important;
    gap:11px !important;

    min-height:58px !important;

    padding:4px 5px 5px 2px !important;

    cursor:pointer !important;
}


/* Round call icon */
.zevro-call-history-icon{
    width:46px !important;
    height:46px !important;

    min-width:46px !important;

    border-radius:50% !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    background:rgba(0,0,0,.13) !important;

    font-size:25px !important;
    font-weight:700 !important;
    line-height:1 !important;
}


/* Text section */
.zevro-call-history-info{
    flex:1 !important;
    min-width:0 !important;

    display:flex !important;
    flex-direction:column !important;

    justify-content:center !important;
}


/* Voice call / Video call */
.zevro-call-history-title{
    font-size:16px !important;
    line-height:20px !important;

    font-weight:700 !important;

    white-space:nowrap !important;
}


/* Duration / callback */
.zevro-call-history-sub{
    margin-top:2px !important;

    font-size:14px !important;
    line-height:18px !important;

    opacity:.68 !important;

    white-space:nowrap !important;
}


/* Missed call icon */
.zevro-call-missed .zevro-call-history-icon{
    color:#ef476f !important;
}


/* Time stays at bottom-right like WhatsApp */
.zevro-call-history-message .zevro-message-time{
    display:block !important;
    text-align:right !important;

    margin-top:-4px !important;

    font-size:11px !important;
    opacity:.65 !important;
}


/* Sent call card */
.message.me-msg.zevro-call-history-message{
    border-radius:12px 3px 12px 12px !important;
}


/* Received call card */
.message.them.zevro-call-history-message{
    border-radius:3px 12px 12px 12px !important;
}



/* =========================================================
   ZEVRO CHANNEL CLICKABLE HEADER
   ========================================================= */

#zevroChannelView .zcv-header{
    cursor:pointer;
}

#zevroChannelView .zcv-avatar,
#zevroChannelView .zcv-info{
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}

#zevroChannelView .zcv-info{
    user-select:none;
    -webkit-user-select:none;
}


/* =========================================================
   CHANNEL PROFILE MUST OPEN ABOVE CHANNEL
   ========================================================= */

#zevroChannelView{
    z-index:10000 !important;
}

#zevroChannelProfile{
    position:fixed !important;
    inset:0 !important;

    width:100% !important;
    height:100dvh !important;

    z-index:20000 !important;

    visibility:visible !important;
    opacity:1 !important;

    pointer-events:auto !important;

    overflow:auto !important;
}


/* Group profile-ও একই সমস্যা যেন না হয় */

#zevroGroupView{
    z-index:10000 !important;
}

#zevroGroupProfile{
    position:fixed !important;
    inset:0 !important;

    width:100% !important;
    height:100dvh !important;

    z-index:20000 !important;

    visibility:visible !important;
    opacity:1 !important;

    pointer-events:auto !important;

    overflow:auto !important;
}


/* =========================================================
   CHANNEL INFO BACK BUTTON - BIG TOUCH AREA
   icon remains visually small
   ========================================================= */

#zevroChannelProfile #zcpBack{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;

    padding:0 !important;
    margin:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border:0 !important;
    background:transparent !important;

    font-size:25px !important;
    line-height:1 !important;

    cursor:pointer !important;

    position:relative !important;
    z-index:99999 !important;

    pointer-events:auto !important;

    -webkit-tap-highlight-color:transparent !important;
    touch-action:manipulation !important;
}



/* =========================================================
   ZEVRO MESSAGE LONG-PRESS MENU
   ========================================================= */

.zevro-message-menu-overlay,
.zevro-delete-choice-overlay{
    position:fixed !important;
    inset:0 !important;

    z-index:999999 !important;

    background:rgba(0,0,0,.28) !important;

    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;

    padding:
        18px
        14px
        max(22px,env(safe-area-inset-bottom))
        !important;
}


.zevro-message-menu,
.zevro-delete-choice{
    width:min(92vw,420px) !important;

    overflow:hidden !important;

    border-radius:18px !important;

    background:#20282d !important;

    color:#fff !important;

    box-shadow:
        0 12px 40px rgba(0,0,0,.38)
        !important;
}


.zevro-message-menu button{
    width:100% !important;
    min-height:58px !important;

    padding:0 20px !important;

    border:0 !important;

    display:flex !important;
    align-items:center !important;

    gap:16px !important;

    background:transparent !important;
    color:#fff !important;

    font-size:17px !important;

    text-align:left !important;
}


.zevro-message-menu button span{
    width:28px !important;

    font-size:22px !important;

    text-align:center !important;
}


.zevro-message-menu button b{
    font-weight:500 !important;
}


.zevro-message-delete-action{
    color:#ff5964 !important;
}


.zevro-delete-choice{
    padding:10px !important;
}


.zevro-delete-choice h3{
    margin:10px 12px 14px !important;

    font-size:18px !important;
}


.zevro-delete-choice button{
    width:100% !important;
    min-height:52px !important;

    margin:3px 0 !important;
    padding:0 16px !important;

    border:0 !important;
    border-radius:12px !important;

    background:transparent !important;
    color:#fff !important;

    font-size:16px !important;

    text-align:left !important;
}


.zevro-delete-choice button.danger{
    color:#ff5964 !important;
}


.zevro-delete-choice button:active,
.zevro-message-menu button:active{
    background:rgba(255,255,255,.08) !important;
}


/* =========================================================
   ZEVRO BOTFATHER COMMAND MENU
   ========================================================= */

#composer{
    position:relative !important;
}


.zevro-bot-command-menu{

    position:absolute !important;

    left:10px !important;
    right:10px !important;

    bottom:calc(
        100% + 8px
    ) !important;

    max-height:310px !important;

    overflow-y:auto !important;

    border-radius:18px !important;

    background:
        rgba(28,32,36,.98)
        !important;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.28)
        !important;

    z-index:999999 !important;

    padding:
        6px
        0
        !important;
}


.zevro-bot-command-item{

    width:100% !important;

    min-height:56px !important;

    border:0 !important;

    padding:
        7px
        14px
        !important;

    background:
        transparent
        !important;

    display:flex !important;

    align-items:center !important;

    gap:12px !important;

    color:#fff !important;

    text-align:left !important;
}


.zevro-bot-command-item:active{

    background:
        rgba(255,255,255,.08)
        !important;
}


.zevro-bot-command-avatar{

    flex:
        0 0 38px
        !important;

    width:38px !important;
    height:38px !important;

    border-radius:
        50%
        !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    background:
        #42a5e8
        !important;

    color:#fff !important;

    font-weight:
        700
        !important;

    font-size:
        17px
        !important;
}


.zevro-bot-command-copy{

    min-width:0 !important;

    display:flex !important;

    align-items:
        baseline
        !important;

    gap:
        10px
        !important;
}


.zevro-bot-command-copy b{

    font-size:
        16px
        !important;

    font-weight:
        600
        !important;

    white-space:
        nowrap
        !important;
}


.zevro-bot-command-copy span{

    font-size:
        14px
        !important;

    color:
        #aeb5bb
        !important;

    overflow:hidden !important;

    text-overflow:
        ellipsis
        !important;

    white-space:
        nowrap
        !important;
}



/* =========================================================
   BOTFATHER MY BOTS BUTTONS
   ========================================================= */

.zevro-botfather-inline-buttons{

    width:100% !important;

    display:grid !important;

    grid-template-columns:
        repeat(2,minmax(0,1fr))
        !important;

    gap:6px !important;

    margin-top:10px !important;
}


.zevro-botfather-inline-button{

    width:100% !important;

    min-height:46px !important;

    padding:
        8px 10px
        !important;

    border:0 !important;

    border-radius:
        9px
        !important;

    background:
        #596879
        !important;

    color:#fff !important;

    font-size:
        15px
        !important;

    font-weight:
        500
        !important;

    overflow:hidden !important;

    white-space:
        nowrap
        !important;

    text-overflow:
        ellipsis
        !important;

    -webkit-tap-highlight-color:
        transparent
        !important;
}


.zevro-botfather-inline-button:active{

    transform:
        scale(.98)
        !important;

    background:
        #667789
        !important;
}


.zevro-botfather-inline-button:disabled{

    opacity:.65 !important;
}


/*
 * If only one button at the end
 * (Back / next page etc), allow full width.
 */

.zevro-botfather-inline-button:last-child:nth-child(odd){

    grid-column:
        1 / -1
        !important;
}


/* =========================================================
   ZEVRO CHAT GALLERY V1
   ========================================================= */

.zevro-gallery-button{

    flex:0 0 48px !important;

    width:48px !important;
    height:48px !important;

    border:0 !important;
    border-radius:50% !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    background:#eef7fc !important;

    font-size:23px !important;

    padding:0 !important;

    -webkit-tap-highlight-color:
        transparent !important;
}


.zevro-gallery-button:active{

    transform:
        scale(.95) !important;
}


.zevro-chat-photo-button{

    display:block !important;

    padding:0 !important;
    margin:0 !important;

    border:0 !important;

    background:transparent !important;

    max-width:260px !important;

    overflow:hidden !important;

    border-radius:14px !important;
}


.zevro-chat-photo{

    display:block !important;

    width:auto !important;

    max-width:260px !important;

    max-height:340px !important;

    object-fit:cover !important;

    border-radius:14px !important;
}


.zevro-photo-caption{

    margin-top:5px !important;
}


.zevro-photo-viewer{

    position:fixed !important;

    inset:0 !important;

    width:100% !important;
    height:100dvh !important;

    z-index:9999999 !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    background:#000 !important;

    padding:
        max(20px,env(safe-area-inset-top))
        0
        max(20px,env(safe-area-inset-bottom))
        !important;
}


.zevro-photo-viewer img{

    width:100% !important;
    height:100% !important;

    object-fit:contain !important;
}


.zevro-photo-viewer-close{

    position:absolute !important;

    top:
        max(
            12px,
            calc(env(safe-area-inset-top) + 4px)
        ) !important;

    left:12px !important;

    width:46px !important;
    height:46px !important;

    z-index:2 !important;

    border:0 !important;
    border-radius:50% !important;

    background:
        rgba(20,20,20,.7)
        !important;

    color:#fff !important;

    font-size:35px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}



/* =========================================================
   ZEVRO TELEGRAM GALLERY FRONTEND V2
   ========================================================= */

.zevro-gallery-button{
    width:44px;
    min-width:44px;
    height:44px;
    border:0;
    background:transparent;
    border-radius:50%;
    font-size:25px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    padding:0;
}

.zevro-gallery-button:active{
    transform:scale(.92);
}

.zevro-gallery-button:disabled{
    opacity:.45;
}


.message.zevro-image-message{
    padding:4px;
    overflow:hidden;
    max-width:min(78vw,360px);
}

.zevro-chat-photo-wrap{
    overflow:hidden;
    border-radius:14px;
}

.zevro-chat-photo{
    display:block;
    width:100%;
    max-width:340px;
    max-height:430px;
    object-fit:cover;
    border-radius:12px;
    cursor:pointer;
}

.zevro-photo-caption{
    padding:8px 9px 4px;
    font-size:15px;
    line-height:1.35;
    overflow-wrap:anywhere;
}


.zevro-photo-viewer{
    position:fixed;
    inset:0;
    z-index:9999999;
    background:rgba(0,0,0,.96);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
}

.zevro-photo-viewer img{
    display:block;
    max-width:100vw;
    max-height:100vh;
    object-fit:contain;
    user-select:none;
}

.zevro-photo-viewer-close{
    position:absolute;
    top:max(15px,env(safe-area-inset-top));
    left:15px;
    z-index:2;
    width:48px;
    height:48px;
    border:0;
    border-radius:50%;
    background:rgba(20,20,20,.72);
    color:#fff;
    font-size:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

@media(max-width:700px){

    .zevro-gallery-button{
        width:42px;
        min-width:42px;
        height:42px;
        font-size:24px;
    }

    .message.zevro-image-message{
        max-width:82vw;
    }

    .zevro-chat-photo{
        max-width:78vw;
        max-height:55vh;
    }
}



/* =========================================================
   ZEVRO MOBILE COMPOSER WIDTH FIX V1
   Gallery + Input + Mic + Send stay inside screen
   ========================================================= */

#composer.composer{
    box-sizing:border-box !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;

    gap:6px !important;

    padding-left:10px !important;
    padding-right:10px !important;

    overflow:visible !important;
}


/* Gallery */

#composer #zevroGalleryButton{
    flex:0 0 44px !important;

    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;

    height:44px !important;

    margin:0 !important;
    padding:0 !important;

    box-sizing:border-box !important;
}


/* Message field MUST shrink */

#composer #messageInput{
    flex:1 1 auto !important;

    width:0 !important;
    min-width:0 !important;
    max-width:none !important;

    box-sizing:border-box !important;

    margin:0 !important;
}


/* Voice */

#composer #zevroVoiceMessage{
    flex:0 0 44px !important;

    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;

    height:44px !important;

    margin:0 !important;

    box-sizing:border-box !important;
}


/* Send */

#composer .send{
    flex:0 0 48px !important;

    width:48px !important;
    min-width:48px !important;
    max-width:48px !important;

    height:48px !important;

    margin:0 !important;

    box-sizing:border-box !important;
}


/* Mobile */

@media(max-width:700px){

    #composer.composer{
        gap:5px !important;

        padding-left:8px !important;
        padding-right:8px !important;
    }

    #composer #zevroGalleryButton{
        flex-basis:42px !important;
        width:42px !important;
        min-width:42px !important;
        max-width:42px !important;
        height:42px !important;
    }

    #composer #zevroVoiceMessage{
        flex-basis:42px !important;
        width:42px !important;
        min-width:42px !important;
        max-width:42px !important;
        height:42px !important;
    }

    #composer .send{
        flex-basis:46px !important;
        width:46px !important;
        min-width:46px !important;
        max-width:46px !important;
        height:46px !important;
    }

    #composer #messageInput{
        min-width:0 !important;
        width:0 !important;
    }
}


/* Extra narrow phones */

@media(max-width:380px){

    #composer.composer{
        gap:3px !important;

        padding-left:5px !important;
        padding-right:5px !important;
    }

    #composer #zevroGalleryButton,
    #composer #zevroVoiceMessage{
        flex-basis:40px !important;
        width:40px !important;
        min-width:40px !important;
        max-width:40px !important;
        height:40px !important;
    }

    #composer .send{
        flex-basis:43px !important;
        width:43px !important;
        min-width:43px !important;
        max-width:43px !important;
        height:43px !important;
    }
}



/* =========================================================
   ZEVRO MULTI PHOTO PREVIEW V1
   ========================================================= */

.zevro-multi-photo-preview{
    position:fixed;
    inset:0;
    z-index:99999999;

    width:100%;
    height:100dvh;

    background:#0d1418;
    color:#fff;

    display:flex;
    flex-direction:column;

    padding:
        max(10px,env(safe-area-inset-top))
        0
        max(8px,env(safe-area-inset-bottom));
}


.zevro-preview-top{
    flex:0 0 auto;

    min-height:58px;

    display:flex;
    align-items:center;

    gap:12px;

    padding:0 14px;
}


.zevro-preview-top > div{
    display:flex;
    flex-direction:column;
}


.zevro-preview-top b{
    font-size:18px;
}


.zevro-preview-top small{
    color:#aeb8be;
    font-size:13px;
}


.zevro-preview-close{
    width:44px;
    height:44px;

    border:0;
    border-radius:50%;

    background:transparent;
    color:#fff;

    font-size:28px;
}


.zevro-preview-strip{
    flex:0 0 82px;

    width:100%;

    display:flex;

    gap:7px;

    overflow-x:auto;

    padding:6px 10px;

    box-sizing:border-box;
}


.zevro-preview-thumb{
    position:relative;

    flex:0 0 70px;

    width:70px;
    height:70px;

    border-radius:8px;

    overflow:hidden;

    background:#263238;
}


.zevro-preview-thumb img{
    width:100%;
    height:100%;

    object-fit:cover;
}


.zevro-preview-remove{
    position:absolute;

    top:3px;
    right:3px;

    width:25px;
    height:25px;

    border:0;
    border-radius:50%;

    background:rgba(0,0,0,.72);

    color:#fff;

    font-size:20px;
    line-height:20px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;
}


.zevro-preview-main{
    flex:1 1 auto;

    min-height:0;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    background:#050708;
}


.zevro-preview-main img{
    display:block;

    width:100%;
    height:100%;

    max-width:100%;
    max-height:100%;

    object-fit:contain;
}


.zevro-preview-bottom{
    flex:0 0 auto;

    display:flex;
    align-items:flex-end;

    gap:8px;

    padding:
        10px
        12px
        4px;
}


#zevroPhotoCaption{
    flex:1 1 auto;

    min-width:0;

    min-height:46px;
    max-height:110px;

    resize:none;

    box-sizing:border-box;

    border:0;
    outline:none;

    border-radius:24px;

    background:#202a30;
    color:#fff;

    padding:12px 16px;

    font-size:16px;
}


#zevroPhotoCaption::placeholder{
    color:#98a3a9;
}


.zevro-preview-send{
    flex:0 0 50px;

    width:50px;
    height:50px;

    border:0;
    border-radius:50%;

    background:#2596d1;
    color:#fff;

    font-size:25px;

    display:flex;
    align-items:center;
    justify-content:center;
}


.zevro-preview-send:disabled{
    opacity:.5;
}


@media(max-width:500px){

    .zevro-preview-strip{
        flex-basis:76px;
    }

    .zevro-preview-thumb{
        flex-basis:64px;

        width:64px;
        height:64px;
    }
}



/* =========================================================
   ZEVRO CHAT SWITCH LOADING
   ========================================================= */

.zevro-chat-loading{
    width:100%;
    min-height:120px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:6px;
}

.zevro-chat-loading span{
    width:7px;
    height:7px;

    border-radius:50%;

    background:#8ea1aa;

    animation:
        zevroChatLoadingDot
        .9s
        infinite
        alternate;
}

.zevro-chat-loading span:nth-child(2){
    animation-delay:.15s;
}

.zevro-chat-loading span:nth-child(3){
    animation-delay:.3s;
}

@keyframes zevroChatLoadingDot{
    from{
        opacity:.3;
        transform:translateY(0);
    }

    to{
        opacity:1;
        transform:translateY(-4px);
    }
}



/* =========================================================
   ZEVRO DASHBOARD PENCIL ONLY V1

   Dashboard       = SHOW pencil
   Personal Chat   = HIDE pencil
   ========================================================= */

/*
 * Mobile personal chat opens by adding .chat-open
 * to the page/shell.
 *
 * Never allow dashboard compose pencil to float
 * over an opened personal conversation.
 */
.chat-open #zevroComposeButton,
body.chat-open #zevroComposeButton,
.shell.chat-open #zevroComposeButton{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
}


/*
 * Existing JS-controlled hide state.
 */
#zevroComposeButton.zevro-compose-hidden{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
}


/*
 * Channel / Group / Profile screens must never show
 * dashboard pencil above their overlays.
 */
body:has(#zevroChannelView) #zevroComposeButton,
body:has(#zevroGroupView) #zevroComposeButton,
body:has(#zevroChannelProfile) #zevroComposeButton,
body:has(#zevroGroupProfile) #zevroComposeButton{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
}



/* =========================================================
   ZEVRO TELEGRAM ATTACHMENT SHEET V1
   ========================================================= */

.zevro-attachment-overlay{
    position:fixed;
    inset:0;

    z-index:99999990;

    display:flex;
    align-items:flex-end;
    justify-content:center;

    background:rgba(0,0,0,.38);
}


.zevro-attachment-sheet{
    width:100%;
    max-width:600px;

    box-sizing:border-box;

    padding:
        8px
        14px
        max(20px,calc(env(safe-area-inset-bottom) + 12px));

    background:#172126;
    color:#fff;

    border-radius:22px 22px 0 0;

    box-shadow:
        0 -8px 30px
        rgba(0,0,0,.25);

    animation:
        zevroAttachmentUp
        .18s
        ease-out;
}


@keyframes zevroAttachmentUp{

    from{
        transform:translateY(100%);
    }

    to{
        transform:translateY(0);
    }
}


.zevro-attachment-handle{
    width:38px;
    height:4px;

    margin:
        2px auto
        12px;

    border-radius:10px;

    background:#66757d;
}


.zevro-attachment-title{
    padding:
        0 5px
        13px;

    font-size:17px;
    font-weight:700;
}


.zevro-attachment-grid{
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:10px;
}


.zevro-attachment-item{
    min-width:0;

    border:0;
    outline:0;

    background:transparent;
    color:#fff;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:7px;

    padding:8px 2px;

    font-size:13px;

    cursor:pointer;
}


.zevro-attachment-icon{
    width:56px;
    height:56px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#26343b;

    font-size:27px;
}


.zevro-attachment-item:active
.zevro-attachment-icon{
    transform:scale(.92);
}


@media(max-width:360px){

    .zevro-attachment-sheet{
        padding-left:8px;
        padding-right:8px;
    }

    .zevro-attachment-grid{
        gap:4px;
    }

    .zevro-attachment-icon{
        width:52px;
        height:52px;

        font-size:25px;
    }
}



/* =========================================================
   ZEVRO FILE CONTACT FRONTEND V1
   ========================================================= */


/* ---------------- FILE CARD ---------------- */

.message.zevro-file-message{
    padding:6px !important;
    min-width:min(75vw,300px);
}


.zevro-file-message-card{
    display:flex;
    align-items:center;

    gap:11px;

    min-width:250px;
    max-width:340px;

    padding:8px;

    border-radius:13px;

    text-decoration:none;

    color:inherit;
}


.zevro-file-message-icon{
    flex:0 0 48px;

    width:48px;
    height:48px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#3f8ec8;
    color:#fff;
}


.zevro-file-message-icon span{
    margin:0 !important;

    color:#fff !important;

    font-size:10px !important;
    font-weight:800;
}


.zevro-file-message-info{
    flex:1 1 auto;

    min-width:0;

    display:flex;
    flex-direction:column;

    text-align:left;
}


.zevro-file-message-info b{
    overflow:hidden;

    text-overflow:ellipsis;
    white-space:nowrap;

    font-size:14px;
}


.zevro-file-message-info small{
    margin-top:4px;

    color:#70808a;

    font-size:12px;
}


.zevro-file-message-action{
    flex:0 0 32px;

    width:32px;
    height:32px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:rgba(0,0,0,.06);

    font-size:20px;
}


/* ---------------- CONTACT PICKER ---------------- */

.zevro-contact-share-overlay{
    position:fixed;
    inset:0;

    z-index:99999995;

    display:flex;
    align-items:flex-end;
    justify-content:center;

    background:rgba(0,0,0,.42);
}


.zevro-contact-share-sheet{
    width:100%;
    max-width:600px;

    height:min(78dvh,650px);

    display:flex;
    flex-direction:column;

    overflow:hidden;

    border-radius:22px 22px 0 0;

    background:#fff;
    color:#172027;
}


.zevro-contact-share-head{
    flex:0 0 60px;

    display:flex;
    align-items:center;

    gap:12px;

    padding:6px 14px;

    border-bottom:
        1px solid #e8edf0;
}


.zevro-contact-share-head button{
    width:42px;
    height:42px;

    border:0;
    border-radius:50%;

    background:transparent;

    font-size:27px;
}


.zevro-contact-share-head b{
    font-size:18px;
}


.zevro-contact-share-search{
    padding:8px 12px;
}


.zevro-contact-share-search input{
    width:100%;
    height:45px;

    border:0;
    outline:none;

    border-radius:22px;

    background:#eef3f6;

    padding:0 17px;

    font-size:15px;
}


.zevro-contact-share-list{
    flex:1 1 auto;

    overflow-y:auto;

    padding-bottom:
        max(
            10px,
            env(safe-area-inset-bottom)
        );
}


.zevro-contact-share-user{
    width:100%;

    min-height:66px;

    display:flex;
    align-items:center;

    gap:12px;

    border:0;

    background:#fff;

    padding:7px 15px;

    text-align:left;
}


.zevro-contact-share-user:active{
    background:#edf4f8;
}


.zevro-contact-picker-avatar{
    flex:0 0 48px;

    width:48px;
    height:48px;

    border-radius:50%;

    object-fit:cover;
}


.zevro-contact-picker-letter{
    display:flex;

    align-items:center;
    justify-content:center;

    background:#368ed0;
    color:#fff;

    font-size:20px;
    font-weight:700;
}


.zevro-contact-share-meta{
    flex:1;

    min-width:0;

    display:flex;
    flex-direction:column;
}


.zevro-contact-share-meta b{
    font-size:15px;
}


.zevro-contact-share-meta small{
    margin-top:4px;

    color:#72818a;

    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}


.zevro-contact-share-empty{
    padding:35px 20px;

    text-align:center;

    color:#74828b;
}


/* ---------------- SHARED CONTACT CARD ---------------- */

.message.zevro-contact-message{
    padding:6px !important;
}


.zevro-shared-contact-card{
    width:min(72vw,300px);

    display:flex;
    align-items:center;

    gap:11px;

    border:0;

    border-radius:14px;

    background:transparent;

    padding:7px;

    text-align:left;
}


.zevro-shared-contact-avatar{
    flex:0 0 52px;

    width:52px;
    height:52px;

    border-radius:50%;

    object-fit:cover;
}


.zevro-shared-contact-letter{
    display:flex;
    align-items:center;
    justify-content:center;

    background:#3c92ce;
    color:#fff;

    font-size:21px;
    font-weight:700;
}


.zevro-shared-contact-info{
    flex:1;

    min-width:0;

    display:flex;
    flex-direction:column;
}


.zevro-shared-contact-info b{
    overflow:hidden;

    text-overflow:ellipsis;
    white-space:nowrap;
}


.zevro-shared-contact-info small{
    margin-top:3px;

    color:#72818a;
}


.zevro-shared-contact-info span{
    margin:6px 0 0 !important;

    color:#2789c4 !important;

    font-size:12px !important;

    font-weight:600;
}


@media(max-width:500px){

    .zevro-file-message-card{
        min-width:220px;
        max-width:75vw;
    }

    .zevro-contact-share-sheet{
        height:82dvh;
    }
}



/* =========================================================
   ZEVRO NORMAL USER USERNAME V1
   ========================================================= */

.zevro-username-screen{
    position:fixed;
    inset:0;

    z-index:99999999;

    background:#fff;

    color:#18232a;

    overflow:auto;
}


.zevro-username-panel{
    width:100%;
    min-height:100dvh;

    background:#fff;
}


.zevro-username-head{
    height:68px;

    display:flex;
    align-items:center;

    gap:10px;

    padding:
        max(6px,env(safe-area-inset-top))
        14px
        6px;

    border-bottom:
        1px solid #e8edf0;
}


.zevro-username-head button{
    width:44px;
    height:44px;

    border:0;

    border-radius:50%;

    background:transparent;

    font-size:27px;
}


.zevro-username-head b{
    font-size:19px;
}


.zevro-username-body{
    width:min(520px,100%);

    margin:auto;

    padding:28px 20px;
}


.zevro-username-body label{
    display:block;

    margin-bottom:8px;

    font-size:14px;

    color:#378fca;
}


.zevro-username-input-wrap{
    height:52px;

    display:flex;
    align-items:center;

    border-bottom:
        2px solid #378fca;
}


.zevro-username-input-wrap span{
    margin:0 3px 0 0 !important;

    color:#378fca !important;

    font-size:19px !important;
}


.zevro-username-input-wrap input{
    flex:1;

    min-width:0;

    border:0;
    outline:0;

    font-size:18px;

    padding:0 3px;
}


.zevro-username-body p{
    margin:16px 0 24px;

    color:#71808a;

    font-size:14px;

    line-height:1.45;
}


.zevro-username-save,
.zevro-username-remove{
    width:100%;

    min-height:50px;

    margin-top:8px;

    border:0;

    border-radius:12px;

    font-size:16px;
    font-weight:600;
}


.zevro-username-save{
    background:#278fd0;
    color:#fff;
}


.zevro-username-remove{
    background:#f2f5f7;
    color:#e24949;
}


.zevro-username-menu-item{
    width:100%;

    min-height:55px;

    display:flex;

    align-items:center;

    gap:13px;

    border:0;

    background:#fff;

    padding:8px 14px;

    text-align:left;
}


.zevro-username-menu-item > span{
    width:30px;

    margin:0 !important;

    font-size:20px !important;
}


.zevro-username-menu-item div{
    display:flex;

    flex-direction:column;
}


.zevro-username-menu-item b{
    font-size:15px;
}


.zevro-username-menu-item small{
    margin-top:2px;

    color:#78878f;

    font-size:12px;
}



/* =========================================================
   ZEVRO NORMAL BOT SLASH COMMAND MENU V1
   ========================================================= */

.zevro-normal-bot-command-menu{
    max-height:320px !important;
}


.zevro-normal-bot-command-item{
    min-height:58px !important;
}


.zevro-normal-bot-command-avatar-img{

    flex:0 0 38px;

    width:38px;
    height:38px;

    border-radius:50%;

    object-fit:cover;
}



/* =========================================================
   ZEVRO BOT INLINE KEYBOARD V1
   ========================================================= */

.zevro-bot-inline-keyboard{
    display:flex;
    flex-direction:column;
    gap:4px;

    width:100%;

    margin-top:6px;
}


.zevro-bot-inline-row{
    display:flex;
    gap:4px;

    width:100%;
}


.zevro-bot-inline-btn{
    flex:1 1 0;

    min-width:0;
    min-height:38px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:7px 10px;

    border:0;
    border-radius:8px;

    background:rgba(40,145,220,.13);

    color:#2387c8;

    font-size:14px;
    font-weight:600;

    text-decoration:none;

    cursor:pointer;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}


.zevro-bot-inline-btn:active{
    transform:scale(.98);
}


.zevro-bot-inline-btn:disabled{
    opacity:.55;
}



/* ZEVRO BOT REPLY KEYBOARD V1 */
.zevro-bot-reply-keyboard{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:10px 12px;
    background:var(--panel,#fff);
    border-top:1px solid rgba(127,127,127,.18);
}

.zevro-bot-reply-row{
    display:flex;
    gap:8px;
}

.zevro-bot-reply-btn{
    flex:1;
    min-height:42px;
    padding:9px 12px;
    border:0;
    border-radius:12px;
    background:#e6f3fb;
    color:#1675a9;
    font:inherit;
    font-weight:700;
    cursor:pointer;
}

.zevro-bot-reply-btn:active{
    transform:scale(.98);
}


/* ZEVRO BOT WEB APP MENU BUTTON V1 */

.zevro-bot-menu-button{
    flex:0 0 auto;
    max-width:120px;
    min-height:48px;
    padding:0 15px;
    border:0;
    border-radius:24px;
    background:#2481cc;
    color:#fff;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    cursor:pointer;
}

.zevro-bot-menu-button:active{
    transform:scale(.96);
}

.zevro-bot-menu-button[hidden]{
    display:none !important;
}

@media(max-width:760px){

    .zevro-bot-menu-button{
        max-width:100px;
        min-height:46px;
        padding:0 12px;
        font-size:13px;
    }
}



/* =========================================
   ZEVRO BOT KEYBOARD — DARK MODE FIX
   ========================================= */

@media (prefers-color-scheme: dark) {

  /* Keyboard area */
  .zmf-bot-keyboard {
    background: #17212b !important;
    color: #f5f5f5 !important;
  }

  /* All bot keyboard buttons */
  .zmf-bot-keyboard button,
  .zmf-bot-keyboard .keyboard-button,
  .zmf-bot-keyboard .reply-keyboard-button,
  .zmf-bot-keyboard [class*="KeyboardButton"] {
    background: #263746 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    border-color: #34495a !important;
    opacity: 1 !important;

    box-shadow: none !important;
  }

  /* Text/elements inside buttons */
  .zmf-bot-keyboard button *,
  .zmf-bot-keyboard .keyboard-button *,
  .zmf-bot-keyboard .reply-keyboard-button *,
  .zmf-bot-keyboard [class*="KeyboardButton"] * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
  }

  /* Tap state */
  .zmf-bot-keyboard button:active,
  .zmf-bot-keyboard .keyboard-button:active,
  .zmf-bot-keyboard .reply-keyboard-button:active,
  .zmf-bot-keyboard [class*="KeyboardButton"]:active {
    background: #30475a !important;
  }

}


/* =========================================
   ZEVRO CHAT — TELEGRAM STYLE COMPOSER
   ========================================= */

@media (max-width:900px) {

  body.zevro-chat-screen-open #zevroBottomNav {
    display:none !important;
  }

  body.zevro-chat-screen-open #chatView {
    height:100dvh !important;
    max-height:100dvh !important;
    min-height:100dvh !important;
  }

  body.zevro-chat-screen-open #chatView .conversation {
    height:100% !important;
    min-height:0 !important;
  }

  body.zevro-chat-screen-open #composer {
    flex:0 0 auto !important;

    display:flex !important;
    align-items:flex-end !important;

    gap:8px !important;

    width:100% !important;

    padding:
      7px
      8px
      max(7px,env(safe-area-inset-bottom))
      !important;

    margin:0 !important;

    background:
      rgba(255,255,255,.96)
      !important;

    border-top:
      1px solid rgba(0,0,0,.08)
      !important;

    box-shadow:
      0 -1px 8px rgba(0,0,0,.04)
      !important;

    z-index:50 !important;
  }


  /* Telegram-style text field */
  body.zevro-chat-screen-open #composer textarea,
  body.zevro-chat-screen-open #composer input[type="text"] {

    flex:1 1 auto !important;

    min-width:0 !important;
    min-height:48px !important;
    max-height:120px !important;

    margin:0 !important;

    padding:
      13px
      48px
      12px
      45px
      !important;

    border:0 !important;
    outline:0 !important;

    border-radius:24px !important;

    background:#f1f3f5 !important;

    color:#111 !important;
    -webkit-text-fill-color:#111 !important;

    font-size:17px !important;
    line-height:22px !important;

    box-shadow:none !important;

    resize:none !important;
  }


  body.zevro-chat-screen-open #composer textarea::placeholder,
  body.zevro-chat-screen-open #composer input[type="text"]::placeholder {
    color:#858b91 !important;
    opacity:1 !important;
  }


  /* Composer buttons */
  body.zevro-chat-screen-open #composer button {

    flex:0 0 auto !important;

    width:46px !important;
    height:46px !important;

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

    padding:0 !important;
    margin:1px 0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border:0 !important;
    border-radius:50% !important;

    box-shadow:none !important;

    font-size:23px !important;

    cursor:pointer !important;
  }


  /* Attachment / emoji style buttons */
  body.zevro-chat-screen-open #composer button:not(.send) {
    background:transparent !important;

    color:#67727d !important;
    -webkit-text-fill-color:#67727d !important;
  }


  /* Send button */
  body.zevro-chat-screen-open #composer .send,
  body.zevro-chat-screen-open #composer button[type="submit"] {

    background:#3390ec !important;

    color:#fff !important;
    -webkit-text-fill-color:#fff !important;

    width:48px !important;
    height:48px !important;

    min-width:48px !important;
  }


  body.zevro-chat-screen-open #composer .send:active,
  body.zevro-chat-screen-open #composer button[type="submit"]:active {
    transform:scale(.94);
  }

}


/* Telegram-like dark composer */
@media
  (max-width:900px)
  and (prefers-color-scheme:dark) {

  body.zevro-chat-screen-open #composer {

    background:#17212b !important;

    border-top-color:
      rgba(255,255,255,.06)
      !important;
  }

  body.zevro-chat-screen-open #composer textarea,
  body.zevro-chat-screen-open #composer input[type="text"] {

    background:#202b33 !important;

    color:#f4f4f4 !important;
    -webkit-text-fill-color:#f4f4f4 !important;
  }

  body.zevro-chat-screen-open #composer textarea::placeholder,
  body.zevro-chat-screen-open #composer input[type="text"]::placeholder {
    color:#87939d !important;
  }

  body.zevro-chat-screen-open #composer button:not(.send) {
    color:#9aa7b1 !important;
    -webkit-text-fill-color:#9aa7b1 !important;
  }

}

/* ==================================================
   ZEVRO TELEGRAM NAV FINAL
   Bottom 4 tabs = DASHBOARD ONLY
   ================================================== */

@media (max-width:900px) {

    /* Any open chat -> hide dashboard tabs */
    body:has(#shell.chat-open) #zevroBottomNav {
        display:none !important;
        visibility:hidden !important;
        pointer-events:none !important;
    }

    /* Dashboard -> show tabs */
    body:not(:has(#shell.chat-open)) #zevroBottomNav {
        display:flex !important;
        visibility:visible !important;
        pointer-events:auto !important;
    }

}

/* ZEVRO CHAT — composer bottom position fix */
@media (max-width:900px) {

    #shell.chat-open {
        --zmf-nav: 0px !important;
    }

    #shell.chat-open .conversation {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
    }

    #shell.chat-open #composer {
        margin-bottom: 0 !important;
        bottom: 0 !important;
        padding-bottom:
            max(8px, env(safe-area-inset-bottom))
            !important;
    }

}

/* ZEVRO DASHBOARD — remove extra strip above bottom navigation */
@media (max-width:900px) {

  #zevroBottomNav {
    margin-top: 0 !important;
    border-top: 0 !important;
  }

  body:not(:has(#shell.chat-open)) .shell,
  body:not(:has(#shell.chat-open)) .sidebar {
    padding-bottom: var(--zmf-nav) !important;
    margin-bottom: 0 !important;
  }

}

/* ZEVRO DASHBOARD — kill light-blue strip above bottom nav */
@media (max-width:900px) {

  body:not(:has(#shell.chat-open)) {
    background:#ffffff !important;
  }

  body:not(:has(#shell.chat-open)) #app,
  body:not(:has(#shell.chat-open)) #shell,
  body:not(:has(#shell.chat-open)) .sidebar,
  body:not(:has(#shell.chat-open)) .chat-list {
    background:#ffffff !important;
  }

  #zevroBottomNav {
    background:#ffffff !important;
    box-shadow:none !important;
    border-top:1px solid #eeeeee !important;
  }

  /* remove any reserved colored footer area */
  body:not(:has(#shell.chat-open)) #shell {
    margin-bottom:0 !important;
  }

}

/* ZEVRO DASHBOARD BOTTOM NAV — COMPACT HEIGHT */
@media (max-width:900px) {

  #zevroBottomNav {
    height:72px !important;
    min-height:72px !important;

    padding:
      3px
      8px
      max(4px, env(safe-area-inset-bottom))
      !important;

    margin:0 !important;

    align-items:flex-start !important;
  }

  #zevroBottomNav button,
  #zevroBottomNav a {
    height:58px !important;
    min-height:58px !important;

    padding:2px 4px !important;
    margin:0 !important;
  }

  #zevroBottomNav svg,
  #zevroBottomNav img {
    margin-top:0 !important;
    margin-bottom:1px !important;
  }

}

/* =====================================================
   ZEVRO BOT CHAT — TELEGRAM ORDER FINAL
   Messages
   Composer
   Bot keyboard
   Bottom
   ===================================================== */

@media (max-width:900px) {

  /*
   * Bot keyboard goes to the very bottom.
   * Dashboard nav is already hidden in chat.
   */
  #shell.chat-open .zmf-bot-keyboard {
    position:fixed !important;

    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    margin:0 !important;

    z-index:99989 !important;

    max-height:min(42vh,280px) !important;
    overflow-y:auto !important;

    background:#ffffff !important;

    border-top:
      1px solid #e6e9ef !important;

    box-shadow:none !important;

    padding-bottom:
      max(6px,env(safe-area-inset-bottom))
      !important;
  }


  /*
   * Composer sits immediately ABOVE bot keyboard.
   */
  #shell.chat-open:has(.zmf-bot-keyboard)
  #composer:not(.hidden) {

    position:fixed !important;

    left:0 !important;
    right:0 !important;

    bottom:
      calc(var(--zmf-keyboard-h,0px))
      !important;

    margin:0 !important;

    z-index:99991 !important;

    padding-bottom:7px !important;
  }


  /*
   * Messages get all remaining upper space.
   * Prevent last messages hiding behind composer/keyboard.
   */
  #shell.chat-open:has(.zmf-bot-keyboard)
  #messages {

    padding-bottom:
      calc(
        var(--zmf-keyboard-h,0px)
        + var(--zmf-composer-h,52px)
        + 12px
      )
      !important;
  }


  /*
   * Normal user chat has NO bot keyboard.
   * Composer remains at screen bottom.
   */
  #shell.chat-open:not(:has(.zmf-bot-keyboard))
  #composer:not(.hidden) {

    bottom:0 !important;

    padding-bottom:
      max(8px,env(safe-area-inset-bottom))
      !important;
  }

}


/* Dark mode bot keyboard */
@media
  (max-width:900px)
  and (prefers-color-scheme:dark) {

  #shell.chat-open .zmf-bot-keyboard {
    background:#17212b !important;

    border-top-color:
      rgba(255,255,255,.06)
      !important;
  }

}

/* =========================================
   ZEVRO BOT CHAT — HORIZONTAL SHIFT FIX
   ========================================= */

@media (max-width:900px) {

  html,
  body {
    max-width:100vw !important;
    overflow-x:hidden !important;
  }

  #shell.chat-open,
  #shell.chat-open .conversation,
  #shell.chat-open #messages {
    width:100% !important;
    max-width:100vw !important;
    min-width:0 !important;
    overflow-x:hidden !important;
    box-sizing:border-box !important;
  }

  #shell.chat-open #composer {
    width:100vw !important;
    max-width:100vw !important;
    min-width:0 !important;

    left:0 !important;
    right:auto !important;

    box-sizing:border-box !important;
    overflow-x:hidden !important;
  }

  #shell.chat-open .zmf-bot-keyboard {
    width:100vw !important;
    max-width:100vw !important;
    min-width:0 !important;

    left:0 !important;
    right:auto !important;

    margin:0 !important;
    box-sizing:border-box !important;

    overflow-x:hidden !important;
  }

  #shell.chat-open .zmf-bot-keyboard > *,
  #shell.chat-open .zmf-bot-keyboard button {
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  #shell.chat-open #messageInput {
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

}

/* =========================================================
   ZEVRO NOTIFICATIONS — TELEGRAM STYLE V2
   ========================================================= */

.zevro-notification-settings{
    position:fixed !important;
    inset:0 !important;
    z-index:100800 !important;
    background:#000 !important;
    color:#f5f5f5 !important;
    overflow:hidden !important;
    font-family:Inter,Arial,sans-serif !important;
}

/* Header */
.zevro-notification-settings .zns-header{
    position:sticky !important;
    top:0 !important;
    z-index:50 !important;
    height:72px !important;
    min-height:72px !important;
    display:flex !important;
    align-items:center !important;
    padding:0 18px !important;
    margin:0 !important;
    background:#242426 !important;
    border:0 !important;
    box-shadow:none !important;
}

.zevro-notification-settings .zns-header h1{
    margin:0 !important;
    padding:0 !important;
    color:#fff !important;
    font-size:23px !important;
    line-height:1 !important;
    font-weight:600 !important;
    letter-spacing:-.3px !important;
}

.zevro-notification-settings .zns-back{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    display:grid !important;
    place-items:center !important;
    margin:0 14px 0 -8px !important;
    padding:0 !important;
    color:#fff !important;
    background:transparent !important;
    border:0 !important;
    border-radius:50% !important;
    font-size:34px !important;
}

/* Scroll area */
.zevro-notification-settings .zns-content,
.zevro-notification-settings main{
    height:calc(100dvh - 72px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding:0 18px 30px !important;
    margin:0 !important;
    background:#000 !important;
    box-sizing:border-box !important;
    scrollbar-width:none !important;
}

.zevro-notification-settings .zns-content::-webkit-scrollbar,
.zevro-notification-settings main::-webkit-scrollbar{
    display:none !important;
}

/* Section labels */
.zevro-notification-settings .zns-section-label{
    margin:0 !important;
    padding:22px 28px 10px !important;
    color:#8fa6ff !important;
    font-size:16px !important;
    line-height:1.2 !important;
    font-weight:500 !important;
}

/* Cards */
.zevro-notification-settings .zns-card{
    width:100% !important;
    margin:0 0 18px !important;
    padding:0 !important;
    overflow:hidden !important;
    background:#181819 !important;
    border:0 !important;
    border-radius:23px !important;
    box-shadow:none !important;
}

/* Rows */
.zevro-notification-settings .zns-row{
    width:100% !important;
    min-height:78px !important;
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
    margin:0 !important;
    padding:13px 28px !important;
    box-sizing:border-box !important;
    color:#f6f6f7 !important;
    background:#181819 !important;
    border:0 !important;
    border-bottom:1px solid #29292b !important;
    border-radius:0 !important;
    text-align:left !important;
}

.zevro-notification-settings .zns-row:last-child{
    border-bottom:0 !important;
}

.zevro-notification-settings .zns-row:active{
    background:#222224 !important;
}

/* Telegram-like plain icons */
.zevro-notification-settings .zns-icon{
    flex:0 0 48px !important;
    width:48px !important;
    height:48px !important;
    display:grid !important;
    place-items:center !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    color:#9a9a9f !important;
    border:0 !important;
    border-radius:0 !important;
    font-size:25px !important;
    filter:grayscale(1) !important;
}

/* Text */
.zevro-notification-settings .zns-text{
    flex:1 1 auto !important;
    min-width:0 !important;
    padding:0 !important;
}

.zevro-notification-settings .zns-text b{
    display:block !important;
    margin:0 !important;
    color:#f6f6f7 !important;
    font-size:18px !important;
    line-height:1.25 !important;
    font-weight:500 !important;
}

.zevro-notification-settings .zns-text small{
    display:block !important;
    margin-top:4px !important;
    color:#89898e !important;
    font-size:14px !important;
    line-height:1.3 !important;
    font-weight:400 !important;
}

/* Right-side values */
.zevro-notification-settings .zns-value{
    flex:0 0 auto !important;
    max-width:145px !important;
    margin-left:auto !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    color:#899cff !important;
    font-size:17px !important;
    font-weight:500 !important;
}

.zevro-notification-settings .zns-arrow{
    flex:0 0 auto !important;
    color:#656568 !important;
    font-size:25px !important;
}

/* Telegram-style switches */
.zevro-notification-settings .zns-switch{
    position:relative !important;
    flex:0 0 52px !important;
    width:52px !important;
    height:29px !important;
    margin-left:auto !important;
    border-radius:999px !important;
    background:#555558 !important;
    border:0 !important;
    box-shadow:none !important;
    transition:background .16s ease !important;
}

.zevro-notification-settings .zns-switch span{
    position:absolute !important;
    top:3px !important;
    left:3px !important;
    width:23px !important;
    height:23px !important;
    border-radius:50% !important;
    background:#222224 !important;
    box-shadow:none !important;
    transform:none !important;
    transition:transform .16s ease,background .16s ease !important;
}

.zevro-notification-settings .zns-switch.on{
    background:#708dff !important;
}

.zevro-notification-settings .zns-switch.on span{
    background:#252527 !important;
    transform:translateX(23px) !important;
}

/* Reset card */
.zevro-notification-settings .zns-reset-row,
.zevro-notification-settings .zns-reset-row .zns-text b{
    color:#f5f5f5 !important;
}

.zevro-notification-settings .zns-reset-row .zns-icon{
    color:#96969b !important;
    background:transparent !important;
}

/* Bottom breathing space */
.zevro-notification-settings .zns-bottom-space{
    height:max(22px,env(safe-area-inset-bottom)) !important;
}

/* Mobile */
@media(max-width:900px){

    .zevro-notification-settings .zns-header{
        height:72px !important;
        min-height:72px !important;
        padding-left:15px !important;
        padding-right:15px !important;
    }

    .zevro-notification-settings .zns-header h1{
        font-size:22px !important;
    }

    .zevro-notification-settings .zns-content,
    .zevro-notification-settings main{
        height:calc(100dvh - 72px) !important;
        padding-left:18px !important;
        padding-right:18px !important;
    }

    .zevro-notification-settings .zns-section-label{
        padding-left:28px !important;
        padding-right:28px !important;
    }

    .zevro-notification-settings .zns-card{
        border-radius:22px !important;
    }

    .zevro-notification-settings .zns-row{
        min-height:76px !important;
        padding:12px 27px !important;
    }
}


/* ZEVRO NOTIFICATION THEME FIX */
.zevro-notification-settings{
    background:#f1f2f4 !important;
    color:#17191c !important;
}

.zevro-notification-settings .zns-content,
.zevro-notification-settings main{
    background:#f1f2f4 !important;
}

.zevro-notification-settings .zns-header{
    background:#ffffff !important;
    border-bottom:1px solid #e2e5e8 !important;
}

.zevro-notification-settings .zns-header h1,
.zevro-notification-settings .zns-back{
    color:#17191c !important;
}

.zevro-notification-settings .zns-card,
.zevro-notification-settings .zns-row{
    background:#ffffff !important;
    color:#17191c !important;
}

.zevro-notification-settings .zns-row{
    border-bottom-color:#eceff1 !important;
}

.zevro-notification-settings .zns-text b{
    color:#17191c !important;
}

@media(prefers-color-scheme:dark){

    .zevro-notification-settings{
        background:#000 !important;
        color:#f5f5f5 !important;
    }

    .zevro-notification-settings .zns-content,
    .zevro-notification-settings main{
        background:#000 !important;
    }

    .zevro-notification-settings .zns-header{
        background:#242426 !important;
        border-bottom-color:#242426 !important;
    }

    .zevro-notification-settings .zns-header h1,
    .zevro-notification-settings .zns-back{
        color:#fff !important;
    }

    .zevro-notification-settings .zns-card,
    .zevro-notification-settings .zns-row{
        background:#181819 !important;
        color:#f6f6f7 !important;
    }

    .zevro-notification-settings .zns-row{
        border-bottom-color:#29292b !important;
    }

    .zevro-notification-settings .zns-text b{
        color:#f6f6f7 !important;
    }
}


/* =========================================================
   ZEVRO SETTINGS THEME — FINAL FIX
   ========================================================= */

/* ---------- LIGHT DEFAULT ---------- */

body:not(.zevro-auto-night-dark) .zevro-notification-settings,
body:not(.zevro-auto-night-dark) .zevro-privacy-security{
    background:#f1f2f4 !important;
    color:#17191c !important;
}

body:not(.zevro-auto-night-dark) .zevro-notification-settings .zns-content,
body:not(.zevro-auto-night-dark) .zevro-notification-settings main,
body:not(.zevro-auto-night-dark) .zevro-privacy-security .zps-scroll{
    background:#f1f2f4 !important;
}

body:not(.zevro-auto-night-dark) .zevro-notification-settings .zns-header,
body:not(.zevro-auto-night-dark) .zevro-privacy-security .zps-header{
    background:#fff !important;
    border-bottom-color:#e3e6e9 !important;
}

body:not(.zevro-auto-night-dark) .zevro-notification-settings .zns-header h1,
body:not(.zevro-auto-night-dark) .zevro-notification-settings .zns-back,
body:not(.zevro-auto-night-dark) .zevro-privacy-security .zps-header h1,
body:not(.zevro-auto-night-dark) .zevro-privacy-security .zps-back{
    color:#17191c !important;
}

body:not(.zevro-auto-night-dark) .zevro-notification-settings .zns-card,
body:not(.zevro-auto-night-dark) .zevro-notification-settings .zns-row,
body:not(.zevro-auto-night-dark) .zevro-privacy-security .zps-card,
body:not(.zevro-auto-night-dark) .zevro-privacy-security .zps-row{
    background:#fff !important;
    color:#17191c !important;
}

body:not(.zevro-auto-night-dark) .zevro-notification-settings .zns-row{
    border-bottom-color:#eceff1 !important;
}

body:not(.zevro-auto-night-dark) .zevro-privacy-security .zps-row{
    border-bottom-color:#eceff1 !important;
}

body:not(.zevro-auto-night-dark) .zevro-notification-settings .zns-text b,
body:not(.zevro-auto-night-dark) .zevro-privacy-security .zps-text b{
    color:#17191c !important;
}


/* ---------- AUTO-NIGHT DARK ---------- */

body.zevro-auto-night-dark .zevro-notification-settings,
body.zevro-auto-night-dark .zevro-privacy-security{
    background:#000 !important;
    color:#f5f5f5 !important;
}

body.zevro-auto-night-dark .zevro-notification-settings .zns-content,
body.zevro-auto-night-dark .zevro-notification-settings main,
body.zevro-auto-night-dark .zevro-privacy-security .zps-scroll{
    background:#000 !important;
}

body.zevro-auto-night-dark .zevro-notification-settings .zns-header,
body.zevro-auto-night-dark .zevro-privacy-security .zps-header{
    background:#242426 !important;
    border-bottom-color:#242426 !important;
}

body.zevro-auto-night-dark .zevro-notification-settings .zns-header h1,
body.zevro-auto-night-dark .zevro-notification-settings .zns-back,
body.zevro-auto-night-dark .zevro-privacy-security .zps-header h1,
body.zevro-auto-night-dark .zevro-privacy-security .zps-back{
    color:#fff !important;
}

body.zevro-auto-night-dark .zevro-notification-settings .zns-card,
body.zevro-auto-night-dark .zevro-notification-settings .zns-row,
body.zevro-auto-night-dark .zevro-privacy-security .zps-card,
body.zevro-auto-night-dark .zevro-privacy-security .zps-row{
    background:#181819 !important;
    color:#f6f6f7 !important;
}

body.zevro-auto-night-dark .zevro-notification-settings .zns-row,
body.zevro-auto-night-dark .zevro-privacy-security .zps-row{
    border-bottom-color:#29292b !important;
}

body.zevro-auto-night-dark .zevro-notification-settings .zns-text b,
body.zevro-auto-night-dark .zevro-privacy-security .zps-text b{
    color:#f6f6f7 !important;
}


/* =========================================================
   PRIVACY & SECURITY — FORCE LIGHT WHEN AUTO NIGHT IS OFF
   ========================================================= */

html body:not(.zevro-auto-night-dark) #zevroPrivacySecurity{
    background:#f1f2f4 !important;
    color:#17191c !important;
}

html body:not(.zevro-auto-night-dark) #zevroPrivacySecurity .zps-scroll{
    background:#f1f2f4 !important;
}

html body:not(.zevro-auto-night-dark) #zevroPrivacySecurity .zps-header{
    background:#ffffff !important;
    border-bottom:1px solid #e4e7ea !important;
}

html body:not(.zevro-auto-night-dark) #zevroPrivacySecurity .zps-header h1,
html body:not(.zevro-auto-night-dark) #zevroPrivacySecurity .zps-back{
    color:#17191c !important;
}

html body:not(.zevro-auto-night-dark) #zevroPrivacySecurity .zps-card{
    background:#ffffff !important;
    color:#17191c !important;
}

html body:not(.zevro-auto-night-dark) #zevroPrivacySecurity .zps-row{
    background:#ffffff !important;
    color:#17191c !important;
    border-bottom-color:#eceff1 !important;
}

html body:not(.zevro-auto-night-dark) #zevroPrivacySecurity .zps-row:active{
    background:#f3f5f6 !important;
}

html body:not(.zevro-auto-night-dark) #zevroPrivacySecurity .zps-text b{
    color:#17191c !important;
}

html body:not(.zevro-auto-night-dark) #zevroPrivacySecurity .zps-text small{
    color:#858c92 !important;
}

html body:not(.zevro-auto-night-dark) #zevroPrivacySecurity .zps-icon{
    color:#7d858b !important;
}

html body:not(.zevro-auto-night-dark) #zevroPrivacySecurity .zps-value{
    color:#637cff !important;
}
.zevro-reply-bar{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;border-left:3px solid #2481cc;background:#fff}.zevro-reply-bar div{min-width:0;display:flex;flex-direction:column}.zevro-reply-bar b,.zevro-reply-quote b,.zevro-forward-label{color:#2481cc;font-size:13px}.zevro-reply-bar span{max-width:75vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#667085;font-size:13px}.zevro-reply-bar button{border:0;background:transparent;font-size:25px;color:#667085}.zevro-reply-quote{margin:-2px 0 6px;padding:5px 8px;border-left:3px solid #2481cc;border-radius:4px;background:rgba(36,129,204,.09);display:flex;flex-direction:column}.zevro-reply-quote span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:#4b5563}.zevro-forward-label{margin-bottom:4px;font-style:italic}
.zevro-forward-picker{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.38);display:flex;align-items:flex-end;justify-content:center}
.zevro-forward-sheet{width:100%;max-width:600px;max-height:82vh;background:#fff;border-radius:18px 18px 0 0;overflow:hidden;box-shadow:0 -6px 30px rgba(0,0,0,.18)}
.zevro-forward-head{height:58px;display:flex;align-items:center;gap:14px;padding:0 16px;border-bottom:1px solid #e8edf2;font-size:19px}
.zevro-forward-head button{border:0;background:transparent;font-size:30px;line-height:1;padding:4px;color:#222}
.zevro-forward-list{overflow:auto;max-height:calc(82vh - 58px);padding:6px 0 18px}
.zevro-forward-user{width:100%;border:0;background:#fff;display:flex;align-items:center;gap:14px;padding:10px 18px;text-align:left;font-size:17px;color:#111}
.zevro-forward-user:active{background:#edf4fa}.zevro-forward-user .avatar{width:48px;height:48px;flex:0 0 48px}
.zevro-forward-user:disabled{opacity:.5}.zevro-forward-empty{padding:30px;text-align:center;color:#7b8794}


.zevro-edit-overlay{
 position:fixed;inset:0;z-index:100001;
 background:rgba(0,0,0,.45);
 display:flex;align-items:center;justify-content:center;
 padding:20px
}
.zevro-edit-box{
 width:100%;max-width:500px;
 background:#fff;border-radius:14px;padding:18px
}
.zevro-edit-box h3{margin:0 0 14px}
.zevro-edit-box textarea{
 width:100%;min-height:110px;
 box-sizing:border-box;
 border:2px solid #2481cc;border-radius:10px;
 padding:12px;font-size:17px;resize:none
}
.zevro-edit-box>div{
 display:flex;justify-content:flex-end;gap:10px;margin-top:12px
}
.zevro-edit-box button{
 border:0;border-radius:8px;padding:10px 18px;font-size:16px
}
.zevro-edit-box button.save{background:#2481cc;color:#fff}


.zevro-multi-select-bar{
 position:fixed;top:0;left:0;right:0;z-index:100005;
 height:62px;background:#2481cc;color:white;
 display:flex;align-items:center;gap:16px;padding:0 16px;
 box-shadow:0 2px 8px rgba(0,0,0,.25)
}
.zevro-multi-select-bar button{
 border:0;background:transparent;color:white;
 font-size:35px
}
.zevro-multi-select-bar span{flex:1}
#messages .message.zevro-message-selected{
 outline:3px solid #2481cc!important;
 background:#cfeaff!important
}


/* Telegram-style selection */
body.zevro-selecting .zevro-message-menu-overlay{
 display:none!important;
}

body.zevro-selecting #composer{
 display:none!important;
}

.zevro-multi-select-bar{
 top:8px!important;
 left:8px!important;
 right:8px!important;
 height:55px!important;
 border-radius:28px!important;
 background:#20262d!important;
 padding:0 15px!important;
}

.zevro-multi-select-bar button{
 font-size:24px!important;
 padding:7px!important;
}

#messages .message{
 position:relative;
}

body.zevro-selecting #messages .message{
 margin-left:48px!important;
}

body.zevro-selecting #messages .message::before{
 content:'';
 position:absolute;
 left:-40px;
 top:50%;
 transform:translateY(-50%);
 width:24px;
 height:24px;
 border:2px solid #8c99a5;
 border-radius:50%;
 background:white;
 box-sizing:border-box;
}

body.zevro-selecting #messages .message.zevro-message-selected::before{
 content:'✓';
 display:flex;
 align-items:center;
 justify-content:center;
 color:white;
 background:#2481cc;
 border-color:#2481cc;
 font-weight:bold;
}

#messages .message.zevro-message-selected{
 outline:none!important;
 background:rgba(36,129,204,.16)!important;
}

/* Stop Android text selection during message select */
#messages .message,
#messages .message *{
 -webkit-user-select:none!important;
 user-select:none!important;
 -webkit-touch-callout:none!important;
}

/* Blue double-check means Seen */
.message.me-msg .zevro-message-time{
 color:#78858f;
}
.message.me-msg[data-seen="true"] .zevro-message-time{
 color:#168acd;
}

.zevro-message-time.zevro-status-seen{
 color:#168acd!important;
}