/* Telegram-style navigation; accessible names stay on the buttons.
   #new.floating is hidden everywhere now — .telegram-compose (in the top toolbar) is the one "new
   chat" affordance on both desktop and mobile (the toolbar+bottom-nav shell used to be desktop-only,
   leaving mobile with this floating "+" as its only compose entry point; now that mobile gets the
   same toolbar, the floating button is a redundant duplicate everywhere). */
#new.floating{display:none!important}
.telegram-bottom-nav{height:calc(54px + env(safe-area-inset-bottom))!important;padding:3px 13px calc(3px + env(safe-area-inset-bottom))!important;background:#f5f7f8!important;border-top:1px solid #e5e8ea!important;box-shadow:none!important;backdrop-filter:none}
.telegram-bottom-nav button{position:relative;display:grid!important;place-items:center;min-width:44px;min-height:44px;padding:4px!important;border-radius:50%!important;color:#a0a3a5!important;background:transparent!important;transition:color .15s ease}
.telegram-bottom-nav button:hover{color:#73797d!important}
.telegram-bottom-nav button:focus-visible{outline:2px solid #278bd5;outline-offset:-3px}
.telegram-bottom-nav button>span{display:grid;place-items:center;width:34px;height:34px;background:transparent!important;box-shadow:none!important}
.telegram-bottom-nav button.active{color:#278bd5!important}
.telegram-bottom-nav button.active::after{display:none!important}
.telegram-bottom-nav svg{width:29px!important;height:29px!important;fill:none;stroke:currentColor;stroke-width:1.5!important;stroke-linecap:round;stroke-linejoin:round}
.telegram-bottom-nav .icon-solid{fill:currentColor;stroke:none}
.telegram-bottom-nav .icon-cutout{fill:#f5f7f8;stroke:none}
.telegram-bottom-nav small{display:none}
.telegram-compose svg{width:24px!important;height:24px!important;stroke-width:1.5!important}
.telegram-side-toolbar strong{text-align:center!important}
.telegram-compose:focus-visible{outline:2px solid #278bd5;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.telegram-bottom-nav button{transition:none}}
#dialog:has(.telegram-picker),#dialog:has(.telegram-picker) *{box-sizing:border-box}
#dialog:has(.telegram-picker){direction:rtl!important;text-align:right!important}
.telegram-picker,.telegram-picker h2,.telegram-picker p,.telegram-contact-copy{text-align:right!important;direction:rtl!important}

/* Main bottom bar: raised glass bar, each tab its own color, the active tab sits in a lifted pill. */
.telegram-bottom-nav{height:calc(62px + env(safe-area-inset-bottom))!important;padding:5px 10px calc(5px + env(safe-area-inset-bottom))!important;background:linear-gradient(180deg,rgba(255,255,255,.96),#eef3f6)!important;border-top:1px solid rgba(255,255,255,.9)!important;box-shadow:0 -6px 18px -8px rgba(30,60,90,.28),0 -1px 0 #dfe6ea!important}
.telegram-bottom-nav button{display:flex!important;flex-direction:column;gap:1px;border-radius:16px!important;min-width:56px;transition:transform .15s ease}
.telegram-bottom-nav button>span{width:40px;height:32px;border-radius:12px}
.telegram-bottom-nav button small{display:block!important;font-size:10.5px;line-height:1.2;color:#7c878d}
.telegram-bottom-nav svg{width:25px!important;height:25px!important;filter:drop-shadow(0 2px 2px rgba(0,0,0,.15))}
.telegram-bottom-nav button[data-nav="contacts"]{color:#1f9d48!important}
.telegram-bottom-nav button[data-nav="calls"]{color:#f2780c!important}
.telegram-bottom-nav button[data-nav="chats"]{color:#1f6fe0!important}
.telegram-bottom-nav button[data-nav="work"]{color:#7a3fe0!important}
.telegram-bottom-nav button[data-nav="settings"]{color:#5b6b75!important}
.telegram-bottom-nav button.active>span{background:linear-gradient(145deg,#fff,#e3ecf3)!important;box-shadow:0 4px 10px -4px rgba(30,60,90,.45),inset 0 1px 0 #fff!important}
.telegram-bottom-nav button.active small{color:currentColor;font-weight:700}
.telegram-bottom-nav button:active{transform:scale(.94)}
@media print and (prefers-color-scheme:dark){:root:not([data-theme="light"]) .telegram-bottom-nav{background:linear-gradient(180deg,#1f2a31,#172026)!important;border-top-color:#2a363e!important}:root:not([data-theme="light"]) .telegram-bottom-nav button.active>span{background:linear-gradient(145deg,#2c3a43,#202b32)!important;box-shadow:0 4px 10px -4px #000,inset 0 1px 0 rgba(255,255,255,.08)!important}:root:not([data-theme="light"]) .work-mode .settings-body>button{background:#1f2a31}:root:not([data-theme="light"]) .settings-screen.work-mode{background:#141c21}}

/* The bottom bar is always reachable: settings / میز کار end above it, and on the contacts/keypad
   screen it floats over that screen (mobile). Switching tabs is done from the bar, no ✕ needed. */
.side .settings-screen{bottom:calc(62px + env(safe-area-inset-bottom))}
.telegram-bottom-nav{z-index:25!important}
@media (max-width:720px){
  body.voip-dial-open .telegram-bottom-nav{position:fixed!important;z-index:520!important;left:0;right:0;bottom:0}
  body.voip-dial-open #voip-call-screen{bottom:calc(62px + env(safe-area-inset-bottom))}
  body.voip-dial-open #voip-call-screen .voip-close{visibility:hidden}
  .settings-screen.at-root>header>.settings-back{visibility:hidden}
}