/* One shared Telegram-inspired surface for chats, lists, sheets and forms. */
:root{--tg-blue:var(--brand,#3396da);--tg-blue-soft:color-mix(in srgb,var(--brand,#3396da) 14%,white);--tg-side:#f8fafb;--tg-line:#e7ecef;--tg-muted:#8b969e;--tg-text:#18242b;--tg-chat:var(--chat,#cde8bd);--brand-dark:var(--brand-dark,#2587c9);--line:var(--tg-line);--muted:var(--tg-muted);--panel:#fff;--side:var(--tg-side)}
body{background:#d9e8d2;color:var(--tg-text)}.shell{grid-template-columns:340px minmax(460px,1fr);grid-template-areas:'side main';max-width:1420px;margin:auto;background:#fff;box-shadow:0 12px 48px #25382a24}.side{grid-area:side}.shell>main{grid-area:main}.side{border-left:1px solid var(--tg-line);border-right:0;background:var(--tg-side)}.side-head{height:58px;padding:8px 14px;background:#f7f9fa;border-bottom:1px solid var(--tg-line)}.search{height:34px;background:#fff;border:1px solid #edf0f2;border-radius:18px;color:#96a0a7;padding:0 12px}.search input{font-size:16px}.round{width:36px;height:36px;color:#53646c}.round:hover{background:#eaf0f3}.side-title{padding:8px 16px 6px}.side-title strong{font-size:17px}.side-title span{font-size:11px;color:var(--tg-muted)}.account-identity{margin-top:8px;background:#fff;border-color:#edf1f3;border-radius:10px}.label-bar{margin-top:7px}#list{height:calc(100% - 116px);padding:0;background:var(--tg-side)}.conversation{position:relative;min-height:72px;gap:11px;padding:9px 13px;border-radius:0;border-bottom:1px solid var(--tg-line);background:transparent}.conversation:hover{background:#f0f6f9}.conversation.active{background:var(--brand)!important;color:#fff}.conversation.active span{color:#eaf6ff}.conversation .circle{width:50px;height:50px;background:linear-gradient(145deg,color-mix(in srgb,var(--brand) 55%,white),var(--brand));font-size:18px}.conversation strong{font-size:14px}.conversation span{margin-top:3px;font-size:12px}.conversation .unread{margin-right:auto;background:var(--brand);color:#fff}.conversation.active .unread{background:#fff;color:var(--brand)}.empty{font-size:13px}.empty-action{border-color:color-mix(in srgb,var(--brand) 35%,white)!important;color:var(--brand)!important;background:#fff!important}.floating{left:15px!important;bottom:17px!important;width:48px!important;min-width:48px!important;height:48px!important;border-radius:12px!important;background:var(--brand)!important;box-shadow:0 7px 18px color-mix(in srgb,var(--brand-dark) 25%,transparent)!important}.floating{display:grid!important;place-items:center!important}.floating span{display:none!important}
main{background:var(--chat)!important;background-image:radial-gradient(color-mix(in srgb,var(--theme-primary,var(--brand,#168c7e)) 10%,transparent) 1px,transparent 1px)!important;background-size:19px 19px!important}.top{height:calc(58px + env(safe-area-inset-top));padding:calc(6px + env(safe-area-inset-top)) 14px 6px;background:#f7f9fa;border-bottom:1px solid #b6d5b4}.head-avatar{width:39px;height:39px;background:linear-gradient(145deg,color-mix(in srgb,var(--brand) 55%,white),var(--brand))}.chat-identity{text-align:right}.chat-identity strong{font-size:14px}.chat-identity small{font-size:11px}.welcome{margin:15vh auto;background:#ffffffd9;border-radius:16px;box-shadow:0 2px 10px #33542d14}.bubble{border-radius:11px 11px 3px 11px;box-shadow:0 1px 1px #344b3022}.mine .bubble{background:var(--bubble-mine);border-radius:11px 11px 11px 3px}.message-arrow{color:#556570}.message-menu,.header-menu,.attach-menu{border-color:#e5eaec;border-radius:14px;box-shadow:0 10px 28px #273f4722}.message-menu button,.header-menu button,.attach-menu button{color:#253941}.message-menu button:hover,.header-menu button:hover,.attach-menu button:hover{background:#edf7fd!important}#composer{padding:8px max(15px,5vw) calc(8px + env(safe-area-inset-bottom));background:#f2f5f5;border:0}.input-wrap{border:0;border-radius:23px}/* themed via var(--brand), not hardcoded telegram blue, so this skin does not fight the color-theme picker */.send{background:var(--brand)!important}.send:disabled{background:#b9c5c8!important}.attach{color:#6d7c82}.info{border-right:1px solid var(--tg-line);border-left:0;box-shadow:8px 0 26px #183d3420}.info header{height:58px;background:#f7f9fa}.info .logo{background:var(--brand)}.info nav{border-top-color:#f0f3f5}.info nav button:hover,.info-tabs button.active{background:var(--tg-blue-soft)!important;color:var(--brand-dark)!important}
dialog{border-radius:18px!important;box-shadow:0 20px 60px #1d343f3d!important}dialog::backdrop{background:#19334062!important;backdrop-filter:blur(2px)}dialog input,dialog select{border-color:#dce5e9!important;border-radius:10px!important}dialog input:focus,dialog select:focus{border-color:var(--tg-blue)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent)!important}.primary,.profile-save,.privacy-dialog footer button:last-child,.sessions-dialog footer button{background:var(--brand)!important}.profile-dialog,.privacy-dialog,.sessions-dialog,.registration-settings,.message-editor-dialog{border-radius:18px!important}.profile-avatar,.account-identity-avatar{background:var(--brand)!important}.profile-close{background:#edf2f5!important;color:#3d535e}.profile-dialog label,.privacy-dialog label{color:#405860}.info-list li,.session-list article{border-color:var(--tg-line)}.person-avatar{background:var(--tg-blue-soft);color:var(--brand-dark)}.telegram-picker h2,.telegram-picker-hint{padding-right:2px}
@media(min-width:721px){html,body{min-width:900px}.shell{height:100dvh}}@media(max-width:720px){body{background:#fff}.shell{direction:rtl;max-width:none;box-shadow:none}.side{border:0}.side-head{height:58px}.side-title{display:none}#list{height:calc(100% - 58px);padding-bottom:82px}.conversation{min-height:70px}.conversation.active{background:var(--tg-blue-soft)!important;color:var(--tg-text)}.conversation.active span{color:var(--tg-muted)}.conversation.active .unread{background:#42a2df;color:#fff}.floating{left:16px!important;bottom:calc(18px + env(safe-area-inset-bottom))!important;width:54px!important;min-width:54px!important;height:54px!important;border-radius:50%!important}.top{height:calc(58px + env(safe-area-inset-top))}.head-avatar{width:38px;height:38px}.bubble{max-width:84%}.telegram-picker{direction:rtl}}

/* Compact Telegram-like composer and contextual menus. */
/* Was `align-items:center!important` too — correct back when #composer was a single flex ROW
   (it vertically centered the icons next to a taller textarea), but #composer is now a flex
   COLUMN (stacking .composer-row above the voice-recording bar), where align-items controls the
   HORIZONTAL axis instead — it was shrink-wrapping .composer-row to its own content width and
   centering that small cluster, instead of letting it stretch to fill #composer's full width.
   That's the actual bug behind "the message box is tiny with big gaps on both sides". */
#composer{min-height:62px}.attach,.send,.input-wrap button{width:44px!important;height:44px!important;border-radius:50%!important;background:#fff!important;border:1px solid #e4ece8!important;color:#4f6660!important;box-shadow:0 2px 7px #27433512!important}.send{background:var(--brand)!important;border-color:var(--brand)!important;color:#fff!important}.input-wrap{min-height:46px!important;background:#fff!important;border:1px solid #e6ece8!important;padding:2px 8px 2px 14px!important}/* iOS Safari auto-zooms the whole page in on focus for any text input/textarea whose computed
   font-size is under 16px — the "screen suddenly gets bigger the instant I tap the message
   field, and I have to pinch back out" report is exactly that, triggered by this having been
   14px. 16px is the documented minimum to opt out of that zoom; it doesn't need to look bigger
   in the UI (the bubble/message text elsewhere stays 14px), it only has to measure ≥16px while
   focused, so this affects nothing visually except stopping the zoom. */
.input-wrap textarea{font-size:16px!important}.attach-menu{right:18px!important;bottom:74px!important;min-width:196px!important;padding:7px!important;border:0!important;border-radius:16px!important;background:#fff!important}.attach-menu button{display:flex!important;align-items:center!important;gap:11px!important;min-height:39px!important;padding:8px 11px!important;border-radius:9px!important;font-size:13px!important}.attach-menu button .app-icon{width:19px!important;height:19px!important;color:#3f6472!important}.header-menu{min-width:224px!important;padding:7px!important;border:0!important;border-radius:16px!important}.header-menu button{min-height:40px!important;padding:9px 12px!important;border-radius:9px!important;font-size:13px!important}.top>#voice-call,.top>#video-call,#more{background:#fff!important;border:1px solid #e4ece8!important}.top>#voice-call,.top>#video-call{width:42px!important;height:42px!important}.top>#more{width:42px!important;height:42px!important}#messages .date-separator span{background:#7eaa79!important;color:#fff!important;border-radius:12px!important;padding:4px 10px!important}@media(max-width:720px){.attach-menu{right:0!important;left:0!important;bottom:0!important;border-radius:20px 20px 0 0!important}.attach-menu button{justify-content:center!important}}

.telegram-side-toolbar{height:calc(56px + env(safe-area-inset-top));display:flex;align-items:center;gap:10px;padding:calc(9px + env(safe-area-inset-top)) 14px 9px;background:#fff;border-bottom:1px solid var(--tg-line);direction:ltr}.telegram-side-toolbar strong{flex:1;color:#18242b;font-size:16px;text-align:right;direction:rtl}.telegram-profile{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:var(--tg-blue-soft);color:var(--brand-dark);font:700 13px Vazir,Tahoma,sans-serif;cursor:pointer}.telegram-compose{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:9px;background:transparent;color:var(--brand);cursor:pointer}.telegram-compose svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* This search row sits right below the toolbar above, which already reserves the notch/status-bar
   inset — adding safe-area-top here too would double that gap on a phone, so it stays a flat 48px. */
.side>.side-head{height:48px;padding:7px 14px;background:#fff}.side>.side-head>#menu,.side>.side-head>#voip-quick-call{display:none}.side>.side-head .search{height:34px}.side>.side-title{display:none}
/* toolbar (56px + notch) + this search row (48px) + the bottom nav below (54px + home-indicator)
   — one formula for both desktop and mobile now that both use the same toolbar+bottom-nav shell
   (env() is simply 0 on a desktop browser with no notch/home-indicator, collapsing this to the
   old fixed constant there; a phone gets the real inset on both ends instead). */
#list{height:calc(100% - 158px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;padding-bottom:10px}
/* The toolbar's own compose pencil (top-right) is the one "new chat" affordance now, on both
   desktop and mobile (previously only desktop got this toolbar at all) — the old floating "+" is
   redundant and hidden unconditionally, see rasan-navigation.css's #new.floating rule. */
.telegram-bottom-nav{position:absolute;z-index:3;right:0;bottom:0;left:0;display:flex;justify-content:space-around;align-items:center;height:60px;padding:7px 14px;background:#fff;border-top:1px solid var(--tg-line);box-shadow:0 -4px 15px #183b4110}.telegram-bottom-nav button{display:grid;place-items:center;border:0;background:transparent;color:#9aa5aa;cursor:pointer}.telegram-bottom-nav button.active{color:var(--brand)}.telegram-bottom-nav svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* VoIP access gate — the «تماس» entry only exists for users with at least one gateway line
   (pstn-dialer-ui.js toggles body.voip-available). Everyone else uses internal رَسان calls from
   a chat header instead, exactly as before this feature. The nav is a flex row, so hiding this
   one button just lets its neighbors redistribute the space — no column-track math needed. */
body:not(.voip-available) .telegram-bottom-nav [data-nav="calls"]{display:none!important}

/* Quick "hard refresh" button in the sidebar toolbar (telegram-sidebar.js), desktop and mobile
   both. Mirrors .telegram-compose's look; the same action is also always available in
   تنظیمات ← «بروزرسانی برنامه» for anyone who missed this icon. */
.telegram-refresh{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:9px;background:transparent;color:var(--brand);cursor:pointer}
.telegram-refresh:hover{background:var(--tg-blue-soft)}
.telegram-refresh svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s ease}
.telegram-refresh:active svg{transform:rotate(-180deg)}