#profileDrawer.yalla-profile-drawer{--profile-red:#ef2437;width:min(390px,calc(100vw - 20px));height:calc(100vh - 20px);margin:10px;border:0;border-radius:18px;background:#fff;box-shadow:0 20px 65px rgba(18,18,20,.25);overflow:hidden;color:#202024}
#profileDrawer .yalla-profile-head{position:relative;padding:26px 23px 18px;border-bottom:1px solid #f0f0f2}
#profileDrawer .yalla-profile-close{position:absolute;top:18px;left:18px;width:35px;height:35px;display:grid;place-items:center;border:0;border-radius:9px;background:#fff;color:#202024;font-size:17px}
#profileDrawer .yalla-profile-close:hover{background:#fff0f2;color:var(--profile-red)}
#profileDrawer .yalla-profile-user{display:flex;align-items:center;gap:14px;padding-top:18px}
#profileDrawer .yalla-profile-avatar{width:69px;height:69px;padding:4px;border:2px solid #ffd7db;border-radius:50%;background:#fff;flex:none}
#profileDrawer .yalla-profile-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;background:var(--profile-red)}
#profileDrawer .yalla-profile-user h3{margin:0 0 7px;font-size:17px;font-weight:850;color:#202024}
#profileDrawer .yalla-profile-user span{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:20px;background:#f6f6f7;color:#777;font-size:9px}
#profileDrawer .yalla-profile-user small{display:block;margin-top:5px;color:#999;direction:ltr;text-align:right;font-size:10px}
#profileDrawer .offcanvas-body{padding:16px 23px 20px;overflow-y:auto}
#profileDrawer .yalla-profile-stats{display:grid;grid-template-columns:repeat(3,1fr);padding:11px 5px;border:1px solid #ececef;border-radius:14px;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.045)}
#profileDrawer .yalla-profile-stats a{min-width:0;padding:0 7px;display:flex;flex-direction:column;align-items:center;gap:3px;border-left:1px solid #ededf0;color:#303034;text-align:center}
#profileDrawer .yalla-profile-stats a:last-child{border:0}
#profileDrawer .yalla-profile-stats i{color:var(--profile-red);font-size:16px}
#profileDrawer .yalla-profile-stats span{font-size:9px;white-space:nowrap}
#profileDrawer .yalla-profile-stats strong{font-size:13px}
#profileDrawer .yalla-profile-menu{margin-top:16px;border:1px solid #ececef;border-radius:14px;overflow:hidden}
#profileDrawer .yalla-profile-menu>a{min-height:45px;padding:9px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eeeeef;color:#29292d;font-size:12px}
#profileDrawer .yalla-profile-menu>a:last-child{border:0}
#profileDrawer .yalla-profile-menu>a:hover{background:#fff7f8;color:var(--profile-red)}
#profileDrawer .yalla-profile-menu>a>span{display:flex;align-items:center;gap:9px}
#profileDrawer .yalla-profile-menu>a>span i{width:25px;height:25px;display:grid;place-items:center;border-radius:7px;background:#fff0f2;color:var(--profile-red)}
#profileDrawer .yalla-profile-menu>a>i{font-size:9px}
#profileDrawer .yalla-profile-promo{min-height:90px;margin-top:16px;padding:14px;display:flex;align-items:center;justify-content:space-between;border:1px solid #ffe1e4;border-radius:13px;background:linear-gradient(135deg,#fff2f3,#fff);overflow:hidden}
#profileDrawer .yalla-profile-promo>div{display:flex;flex-direction:column;align-items:flex-start;gap:3px;z-index:1}
#profileDrawer .yalla-profile-promo strong{font-size:12px}
#profileDrawer .yalla-profile-promo span{font-size:9px;color:#888}
#profileDrawer .yalla-profile-promo a{margin-top:6px;padding:7px 18px;border-radius:7px;background:var(--profile-red);color:#fff;font-size:9px;font-weight:700}
#profileDrawer .yalla-profile-promo>i{font-size:55px;color:var(--profile-red);transform:translateX(-2px)}
#profileDrawer .yalla-profile-logout{width:100%;height:43px;margin-top:15px;display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--profile-red);border-radius:10px;background:#fff;color:var(--profile-red);font-size:12px;font-weight:800}
#profileDrawer .yalla-profile-logout:hover{background:var(--profile-red);color:#fff}
#profileDrawer .yalla-profile-footer{padding:14px 20px 16px;display:flex;flex-direction:column;align-items:center;gap:9px;background:linear-gradient(180deg,#fff7f8,#fff0f2);color:#777}
#profileDrawer .yalla-profile-footer>span{font-size:9px}
#profileDrawer .yalla-profile-footer>div{display:flex;gap:13px}
#profileDrawer .yalla-profile-footer a{width:29px;height:29px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#333;font-size:11px}
#profileDrawer .yalla-profile-footer small{font-size:8px}
@media(max-width:480px){#profileDrawer.yalla-profile-drawer{width:calc(100vw - 12px);height:calc(100vh - 12px);margin:6px}#profileDrawer .offcanvas-body{padding-inline:16px}}

#profileDrawer .yalla-skeleton{display:none;border-radius:8px;background:linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);background-size:400% 100%;animation:yalla-skeleton-shimmer 1.4s ease infinite}
#profileDrawer.is-loading .yalla-skeleton{display:block}
#profileDrawer.is-loading .yalla-skeleton-wrap>*:not(.yalla-skeleton):not(.yalla-skeleton-lines){visibility:hidden}
#profileDrawer .yalla-skeleton-avatar{position:absolute;width:69px;height:69px;border-radius:50%;top:26px;right:23px}
#profileDrawer .yalla-skeleton-lines{position:absolute;top:32px;right:106px;left:23px;display:flex;flex-direction:column;gap:9px}
#profileDrawer .yalla-skeleton-line{height:13px}
#profileDrawer.is-loading .yalla-profile-user{position:relative}
#profileDrawer .yalla-profile-stats.yalla-skeleton-wrap{position:relative}
#profileDrawer .yalla-skeleton-stat{display:none;height:44px}
#profileDrawer.is-loading .yalla-skeleton-stat{display:block}
#profileDrawer.is-loading .yalla-profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:11px}
#profileDrawer.is-loading .yalla-profile-stats a{display:none}
@keyframes yalla-skeleton-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}