/* Payam Mehr - Telegram-style UI layer v1 (remove this file + telegram-ui.js to revert) */
/* ---------- home header ---------- */
body.tg-ui aside>header{display:flex!important;align-items:center;gap:4px;min-height:56px!important;padding:calc(6px + env(safe-area-inset-top,0px)) 6px 6px!important}
body.tg-ui aside>header>div:first-child{flex:1;min-width:0}
body.tg-ui aside>header .account-actions,body.tg-ui aside>header #me{display:none!important}
body.tg-ui aside>header .brand{font-size:19px!important}
#tgMenuBtn,#tgSearchBtn{width:44px;height:44px;border:0;background:none;border-radius:50%;display:grid;place-items:center;color:inherit;cursor:pointer;flex:none;-webkit-tap-highlight-color:transparent}
#tgMenuBtn:active,#tgSearchBtn:active{background:rgba(255,255,255,.15)}
#tgMenuBtn svg,#tgSearchBtn svg,#tgDrawer svg,#tgFab svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* tiles + calendar move into the drawer */
body.tg-ui aside>.tools{display:none!important}
/* search appears from the header icon */
body.tg-ui aside>#search{display:none!important}
body.tg-ui aside.tg-searching>#search{display:block!important;margin:8px 12px!important;width:auto!important}
/* ---------- chat list rows ---------- */
body.tg-ui #conversations .item{border-radius:0!important;margin:0!important;box-shadow:none!important;border:0!important;padding:9px 12px!important;min-height:72px;box-sizing:border-box;position:relative;background:transparent!important;transform:none!important}
body.tg-ui #conversations .item::after{content:"";position:absolute;bottom:0;left:0;right:78px;height:1px;background:rgba(0,0,0,.06);pointer-events:none}
body.tg-ui #conversations .item.active{background:rgba(15,138,108,.11)!important}
@media (hover:hover){body.tg-ui #conversations .item:hover{background:rgba(0,0,0,.035)!important}}
body.tg-ui #conversations .item .avatar{width:54px!important;height:54px!important;min-width:54px!important;border-radius:50%!important;font-size:21px!important;font-weight:600;box-shadow:none!important}
body.tg-ui #conversations .item .avatar img{border-radius:50%!important}
body.tg-ui #conversations .item-head{display:flex!important;align-items:center;gap:6px}
body.tg-ui #conversations .item-head b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px}
.tg-time{font-size:12px;opacity:.55;white-space:nowrap;flex:none;font-weight:400}
body.tg-ui #conversations .item.unread .tg-time{color:#0f8a6c;opacity:1}
body.tg-ui #conversations .item p{white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;opacity:.62;margin-top:3px!important;font-size:14.5px}
body.tg-ui #conversations .unread-badge{background:#0f8a6c!important;border-radius:12px!important;min-width:22px;height:22px;line-height:22px;padding:0 6px;font-size:12px;text-align:center}
/* ---------- floating new-message button ---------- */
#tgFab{position:fixed;z-index:30;width:56px;height:56px;border-radius:50%;border:0;background:#0f8a6c;color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.28);display:grid;place-items:center;cursor:pointer;transition:transform .15s,opacity .15s;-webkit-tap-highlight-color:transparent}
#tgFab:active{transform:scale(.92)}
#tgFab.hide{opacity:0;pointer-events:none;transform:scale(.6)}
#tgFabMenu{position:fixed;z-index:31;min-width:200px;padding:6px 0;border-radius:14px;background:var(--panel,#fff);box-shadow:0 8px 28px rgba(0,0,0,.24);direction:rtl;animation:tgPop .15s ease-out}
#tgFabMenu button{display:flex;gap:14px;align-items:center;width:100%;border:0;background:none;padding:12px 18px;font:inherit;font-size:15px;color:inherit;cursor:pointer;text-align:right}
#tgFabMenu button:active{background:rgba(0,0,0,.06)}
/* ---------- side drawer ---------- */
#tgDrawerBack{position:fixed;inset:0;z-index:9980;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .2s}
#tgDrawerBack.show{opacity:1;pointer-events:auto}
#tgDrawer{position:fixed;top:0;bottom:0;right:0;z-index:9981;width:min(300px,82vw);background:var(--panel,#fff);box-shadow:-4px 0 24px rgba(0,0,0,.2);transform:translateX(105%);transition:transform .22s ease-out;overflow-y:auto;direction:rtl;padding-bottom:env(safe-area-inset-bottom,0px)}
#tgDrawer.show{transform:none}
#tgDrawer .tgd-head{background:linear-gradient(135deg,#0b5c4a,#16967a);color:#fff;padding:calc(22px + env(safe-area-inset-top,0px)) 18px 16px}
#tgDrawer .tgd-ava{width:64px;height:64px;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.2);margin-bottom:12px;display:grid;place-items:center;font-size:26px}
#tgDrawer .tgd-ava img{width:100%;height:100%;object-fit:cover}
#tgDrawer .tgd-name{font-size:16px;font-weight:700}
#tgDrawer .tgd-sec{padding:6px 0;border-bottom:1px solid rgba(0,0,0,.07)}
#tgDrawer .tgd-sec:empty{display:none}
#tgDrawer .tgd-cap{padding:8px 20px 2px;font-size:12px;opacity:.55}
#tgDrawer button.tgd-item{display:flex;align-items:center;gap:18px;width:100%;min-height:48px;border:0;background:none;padding:0 20px;font:inherit;font-size:15px;color:inherit;cursor:pointer;text-align:right}
#tgDrawer button.tgd-item:active{background:rgba(0,0,0,.06)}
#tgDrawer button.tgd-item .ic{width:24px;text-align:center;font-size:19px;flex:none}
#tgDrawer button.tgd-item.danger{color:#e53935}
@keyframes tgPop{from{opacity:0;transform:scale(.9)}}
/* ---------- chat header subtitle ---------- */
.tg-sub{display:block;font-size:12.5px;opacity:.65;font-weight:400;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-title-stack.is-typing .tg-sub{display:none}
/* ---------- composer: mic <-> send like Telegram ---------- */
body.tg-ui #sendForm.tg-empty #textSendBtn{display:none!important}
body.tg-ui #sendForm:not(.tg-empty) #voiceBtn{display:none!important}
@media (prefers-color-scheme:dark){#tgFabMenu,#tgDrawer{background:#212629;color:#eee}body.tg-ui #conversations .item::after{background:rgba(255,255,255,.06)}}

/* ---------- glass controls (Telegram liquid-glass style) ---------- */
body.tg-ui #tgFab{background:rgba(15,138,108,.82);-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255,255,255,.35);box-shadow:0 6px 20px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.35)}
body.tg-ui #scrollToLatest,body.tg-ui .chat #back,body.tg-ui #pmSearchBtn,body.tg-ui #emojiBtn,body.tg-ui #voiceBtn{background:rgba(255,255,255,.55)!important;-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255,255,255,.65)!important;box-shadow:0 2px 10px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.85)!important;border-radius:50%!important;opacity:1}
body.tg-ui #tgMenuBtn,body.tg-ui #tgSearchBtn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
body.tg-ui .composer-input-shell{background:rgba(255,255,255,.75)!important;-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);border:1px solid rgba(255,255,255,.75)!important;box-shadow:0 2px 12px rgba(0,0,0,.07),inset 0 1px 0 rgba(255,255,255,.9)!important}
body.tg-ui #chatHead{background:rgba(255,255,255,.8)!important;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)}
body.tg-ui #pmCtx .cx-menu,body.tg-ui #pmCtx .cx-reacts,body.tg-ui #tgFabMenu,body.tg-ui #pmListCtx .lc-menu{background:rgba(255,255,255,.82)!important;-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);border:1px solid rgba(255,255,255,.7)}
@media (prefers-color-scheme:dark){
 body.tg-ui #scrollToLatest,body.tg-ui .chat #back,body.tg-ui #pmSearchBtn,body.tg-ui #emojiBtn,body.tg-ui #voiceBtn,body.tg-ui .composer-input-shell,body.tg-ui #chatHead,body.tg-ui #pmCtx .cx-menu,body.tg-ui #pmCtx .cx-reacts,body.tg-ui #tgFabMenu,body.tg-ui #pmListCtx .lc-menu{background:rgba(36,41,45,.72)!important;border-color:rgba(255,255,255,.1)!important;box-shadow:0 2px 12px rgba(0,0,0,.3)!important}}
/* ---------- desktop: full-width window, wider chat list like Telegram Desktop ---------- */
@media (min-width:900px){
 body.premium-ui.tg-ui main#app{max-width:none!important;grid-template-columns:clamp(380px,33vw,500px) minmax(0,1fr)!important;border-radius:0!important;border:0!important;box-shadow:none!important}
}
/* icon centering inside round header buttons */
#tgMenuBtn,#tgSearchBtn,#pmSearchBtn{padding:0!important;margin:0!important;line-height:0!important;box-sizing:border-box!important;min-width:44px!important}
#tgMenuBtn svg,#tgSearchBtn svg,#pmSearchBtn svg{display:block!important;margin:auto!important}

/* ---------- desktop: vertical folder rail (Telegram Desktop) ---------- */
@media (min-width:900px){
 body.tg-ui aside{position:relative}
 body.tg-ui #pmFolders{position:absolute;top:var(--tg-head,56px);bottom:0;right:0;width:76px;flex-direction:column;align-items:stretch;gap:2px;padding:8px 0;border:0!important;border-left:1px solid rgba(0,0,0,.07)!important;overflow-y:auto;background:rgba(0,0,0,.025);z-index:2}
 body.tg-ui #pmFolders button{display:flex;flex-direction:column;align-items:center;gap:4px;margin:0 6px;padding:10px 2px 8px;border:0!important;border-radius:12px;font-size:11.5px;font-weight:600;position:relative;white-space:normal;line-height:1.3;text-align:center}
 body.tg-ui #pmFolders button::before{font-size:22px;line-height:1;filter:grayscale(1);opacity:.65}
 body.tg-ui #pmFolders button.on::before{filter:none;opacity:1}
 body.tg-ui #pmFolders button[data-k="all"]::before{content:"💬"}
 body.tg-ui #pmFolders button[data-k="unread"]::before{content:"🔵"}
 body.tg-ui #pmFolders button[data-k="group"]::before{content:"👥"}
 body.tg-ui #pmFolders button[data-k="channel"]::before{content:"📢"}
 body.tg-ui #pmFolders button[data-k="direct"]::before{content:"👤"}
 body.tg-ui #pmFolders button.on{background:rgba(15,138,108,.12)}
 body.tg-ui #pmFolders b{position:absolute;top:4px;left:8px;margin:0!important;min-width:16px;padding:0 4px;font-size:10.5px;line-height:17px}
 body.tg-ui aside>#conversations,body.tg-ui aside.tg-searching>#search,body.tg-ui aside>#hampayamGlobalSearchResults{margin-right:76px!important}
}
/* ---------- chat header avatar ---------- */
.tg-head-ava{width:42px!important;height:42px!important;min-width:42px;border-radius:50%!important;flex:none;display:grid!important;place-items:center;font-size:17px!important;font-weight:600;overflow:hidden;cursor:pointer;margin-inline-end:4px;box-shadow:none!important;position:static!important}
.tg-head-ava img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.tg-head-ava *:not(img){display:none!important}
/* chat ⋮ button: glass like the search button */
body.tg-ui #tgChatMore{background:rgba(255,255,255,.55)!important;color:inherit!important;-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255,255,255,.65)!important;box-shadow:0 2px 10px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.85)!important;border-radius:50%!important;min-width:44px}
html[data-hampayam-theme="shams"] body.tg-ui #tgChatMore{background:rgba(36,41,45,.72)!important;border-color:rgba(255,255,255,.1)!important}

@media (min-width:900px){body.tg-ui #pmFolders button[data-k^="f"]::before{content:attr(data-ico)}}