/* Geometry matched to the supplied 1913 x 870 Telegram viewport.
   Smaller viewports use the same hierarchy with compact touch sizes. */
:root {
  --chat-width: 900px;
  --sidebar-width: clamp(320px, 25.1vw, 480px);
  --detail-width: 420px;
  --workspace-gap: 14px;
  --workspace-top: 22px;
  --workspace-bottom: 20px;
  --workspace-edge: 14px;
}
.telegram .workspace {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  column-gap: var(--workspace-gap);
  padding: var(--workspace-top) var(--workspace-edge) var(--workspace-bottom);
}
.telegram .sidebar { border-radius: 28px; }
.telegram .chat-stage { padding: 0; min-width: 0; }
.telegram :is(#chatSection, #groupChatSection) { height: 100%; min-width: 0; }
.telegram :is(.chat-header, #messagesList, #groupMessages, #messageForm, #groupMessageForm, .chat-tools, .tg-pinned-message, .tg-composer-state) {
  width: 100%; max-width: var(--chat-width); align-self: center;
}
.telegram .chat-header { min-height: 60px; padding: 5px 9px 5px 5px; gap: 12px; border-radius: 34px; }
.telegram .chat-header h2 { margin: 0; font-size: 22px; line-height: 27px; font-weight: 500; }
.telegram .chat-header .muted { font-size: 16px; line-height: 20px; }
.telegram .chat-header-avatar { flex-basis: 50px; min-width: 50px; width: 50px; height: 50px; font-size: 23px; }
.telegram .icon-button, .telegram .chat-header #groupSettings { width: 42px; min-width: 42px; height: 42px; min-height: 42px; padding: 9px; }
.telegram .tg-icon { width: 24px; height: 24px; stroke-width: 1.7; }
.telegram .tg-top { height: 80px; min-height: 80px; padding: 12px 16px 12px 18px; gap: 16px; }
.telegram #conversationSearch { height: 56px; min-height: 56px; padding: 12px 20px 12px 60px; border-radius: 30px; font-size: 20px; }
.telegram .tg-search-box > .tg-icon { width: 26px; height: 26px; top: 15px; left: 18px; }
.telegram .tg-profile-prompt { min-height: 70px; margin: 8px 10px 10px; border-radius: 18px; }
.telegram .tg-profile-prompt-action { min-height: 70px; padding: 10px 36px 10px 12px; gap: 2px; font-size: 18px; line-height: 24px; border-radius: 18px; }
.telegram .tg-dismiss { top: 10px; right: 8px; width: 30px; min-height: 30px; }
.telegram .tg-dismiss .tg-icon { width: 18px; height: 18px; }
.telegram .tg-threads { padding: 0 10px 80px; }
.telegram .tg-room { min-height: 90px; padding: 10px; gap: 10px; border-radius: 24px; }
.telegram .tg-avatar { width: 68px; min-width: 68px; height: 68px; font-size: 28px; }
.telegram .tg-room-info { gap: 4px; }
.telegram :is(.tg-room-info strong, .tg-room-top strong) { font-size: 20px; line-height: 26px; }
.telegram .tg-preview { font-size: 20px; line-height: 26px; }
.telegram .tg-room-top time { font-size: 14px; line-height: 22px; }
.telegram :is(.tg-mute, .tg-pin) { width: 16px; height: 16px; }
.telegram .tg-badge { min-width: 26px; height: 26px; padding: 2px 7px; font-size: 16px; line-height: 22px; background: #0cbe48; }
.telegram .tg-room.selected .tg-badge { background: #fff; color: var(--accent); }
.telegram .tg-archive-folder { width: calc(100% - 20px); margin: 0 10px; min-height: 90px; padding: 10px; gap: 10px; }
.telegram .tg-archive-folder strong { font-size: 20px; line-height: 26px; }
.telegram .tg-archive-folder .tg-badge { background: #c7ccd0; color: #fff; }
.telegram .tg-compose { width: 56px; height: 56px; right: 16px; bottom: 16px; }
.telegram .tg-row-menu { width: 28px; min-width: 28px; }
.telegram .tg-row-menu .tg-icon { width: 21px; height: 21px; }
.telegram :is(#messagesList, #groupMessages) { padding: 18px 10px 20px; gap: 5px; }
.telegram #groupMessages { padding-left: 54px; }
.telegram .chat-message { max-width: min(85%, 620px); padding: 8px 11px 6px; }
.telegram .message-text { font-size: 20px; line-height: 1.32; }
.telegram .message-sender { font-size: 18px; line-height: 23px; }
.telegram .chat-message time { font-size: 12px; line-height: 18px; margin-left: 10px; }
.telegram .chat-message.mine[data-verified=true] time::after { font-size: 15px; }
.telegram .message-avatar { width: 36px; height: 36px; left: -44px; font-size: 13px; }
.telegram .chat-message[data-day] { margin-top: 52px; }
.telegram .chat-message[data-day]::before { top: -44px; font-size: 18px; line-height: 26px; padding: 3px 12px; }
.telegram .message-reply strong { font-size: 16px; line-height: 22px; }
.telegram .message-reply span { font-size: 18px; line-height: 24px; }
.telegram .chat-message .message-reaction { min-height: 32px; font-size: 16px; line-height: 24px; padding: 3px 10px; }
.telegram .tg-composer-state, .telegram .tg-pinned-message { font-size: 16px; line-height: 22px; }
.telegram :is(#messageForm, #groupMessageForm) { min-height: 60px; border-radius: 32px; padding: 5px 6px 5px 13px; gap: 8px; }
.telegram :is(#messageForm, #groupMessageForm) textarea { min-height: 48px; font-size: 20px; line-height: 26px; padding: 10px 5px; }
.telegram :is(#messageForm, #groupMessageForm) .primary { width: 50px; height: 50px; min-height: 50px; min-width: 50px; }
.telegram :is(#emojiToggle, #groupEmojiToggle, .file-button) { width: 36px; height: 42px; min-width: 36px; min-height: 42px; }
.telegram :is(#emojiToggle, #groupEmojiToggle, .file-button) .tg-icon { width: 27px; height: 27px; }
.telegram .chat-jump { width: 60px; height: 60px; min-height: 60px; bottom: 70px; right: max(0px, calc((100% - var(--chat-width)) / 2)); }
.telegram .chat-jump .tg-icon { width: 32px; height: 32px; }
.telegram .chat-tools { padding: 8px 0 2px; }
.telegram .chat-tools input { height: 48px; font-size: 18px; }
.telegram .chat-search-status { font-size: 14px; }
.telegram :is(.tg-menu, .tg-submenu, .tg-context) { min-width: 240px; padding: 5px; border-radius: 12px; }
.telegram .tg-menu > button { min-height: 42px; padding: 10px 13px; font-size: 15px; gap: 15px; }
.telegram .tg-menu .tg-icon { width: 22px; height: 22px; }
.telegram #profileDialog {
  inset: var(--workspace-top) auto var(--workspace-bottom) var(--workspace-edge);
  width: var(--sidebar-width); height: auto; max-height: none; padding: 20px; border-radius: 28px;
}
.telegram :is(.tg-info, #groupSettingsDialog) {
  inset: var(--workspace-top) var(--workspace-edge) var(--workspace-bottom) auto;
  width: var(--detail-width); height: auto; max-height: none; padding: 20px; border-radius: 28px;
}
.telegram .info-open .chat-stage { margin-right: calc(var(--detail-width) + var(--workspace-gap)); }
.telegram .tg-info .tg-avatar { width: 110px; height: 110px; margin: 16px auto 22px; font-size: 40px; }
.telegram :is(#profileDialog, #groupSettingsDialog, .tg-info) .dialog-top { gap: 10px; padding: 8px 0 14px; }
.telegram :is(#profileDialog, #groupSettingsDialog, .tg-info) .dialog-top h2 { flex: 1; margin: 0; font-size: 22px; line-height: 28px; font-weight: 500; }
.telegram dialog { font-size: 16px; }
.telegram dialog :is(input:not([type=checkbox]):not([type=file]), textarea) { font-size: 16px; min-height: 46px; padding: 11px 12px; }
.telegram dialog :is(label, .muted, p) { font-size: 14px; line-height: 1.5; }
.telegram dialog .dialog-top > button { width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 7px; border-radius: 50%; font-size: 20px; }
.telegram dialog button { font-size: 15px; min-height: 42px; }
.telegram .settings-choices > button { min-height: 56px; font-size: 16px; }
.telegram #groupMembers .list-row { min-height: 76px; padding-left: 61px; }
.telegram #groupMembers .list-row::before { width: 48px; height: 48px; top: 14px; }
.telegram #groupMembers .list-title { font-size: 16px; }
.telegram #groupMembers .list-detail { font-size: 14px; }
.telegram .group-member-menu { position: fixed; top: 60px; right: auto; width: 240px; max-width: calc(100vw - 32px); overflow-y: auto; z-index: 8; }
.telegram .group-member-menu button { min-height: 44px; font-size: 15px; }
.telegram #groupSettingsDialog .dialog-top, .telegram #profileDialog .dialog-top { top: -20px; z-index: 5; }
.telegram #confirmDialog, .telegram #recoveryDialog { width: 460px; max-width: calc(100vw - 24px); padding: 24px; max-height: calc(100dvh - 24px); }
.telegram #recoveryDialog .recovery-top { position: sticky; top: -24px; padding: 0 0 10px; margin: 0; background: var(--surface); z-index: 5; }
.telegram #recoveryDialog .recovery-top h2 { flex: 1; font-size: 21px; line-height: 28px; font-weight: 500; margin: 0; text-align: left; }
.telegram #recoveryDialog .recovery-mark { width: 54px; height: 54px; margin: 8px auto 14px; background: var(--soft); color: var(--accent); font-size: 28px; }
.telegram #recoveryDescription { text-align: center; margin: 0 0 18px; }
.telegram #recoveryCode { font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; user-select: all; }
.telegram #recoveryLogout { display: block; margin: 14px auto 0; }
.telegram #recoverySubmit { width: 100%; }
.telegram #recoveryClose:disabled { cursor: wait; opacity: .45; }
.telegram #confirmDialog .dialog-top h2 { margin: 0; flex: 1; font-size: 21px; font-weight: 500; }
.telegram #confirmDialog form { margin: 0; }
@media (max-width: 1499px) and (min-width: 701px) {
  :root { --workspace-top: 14px; --workspace-bottom: 14px; --workspace-edge: 10px; --workspace-gap: 10px; --sidebar-width: clamp(320px, 27vw, 400px); --detail-width: 380px; }
  .telegram .info-open .chat-stage { margin-right: 0; }
  .telegram .tg-top { height: 72px; min-height: 72px; padding: 8px 12px; gap: 10px; }
  .telegram #conversationSearch { font-size: 16px; min-height: 48px; height: 48px; padding-left: 46px; }
  .telegram .tg-search-box > .tg-icon { top: 12px; left: 14px; width: 23px; height: 23px; }
  .telegram .tg-room, .telegram .tg-archive-folder { min-height: 76px; padding: 10px 8px; border-radius: 18px; }
  .telegram .tg-avatar { width: 56px; min-width: 56px; height: 56px; font-size: 23px; }
  .telegram :is(.tg-room-info strong, .tg-room-top strong, .tg-archive-folder strong, .tg-preview) { font-size: 16px; line-height: 23px; }
  .telegram .tg-room-top time { font-size: 12px; }
  .telegram .tg-profile-prompt, .telegram .tg-profile-prompt-action { min-height: 64px; }
  .telegram .tg-profile-prompt-action { font-size: 15px; line-height: 21px; }
  .telegram .message-text { font-size: 17px; line-height: 1.4; }
  .telegram :is(#messageForm, #groupMessageForm) textarea { font-size: 17px; }
  .telegram .message-sender { font-size: 15px; line-height: 21px; }
  .telegram .chat-message[data-day]::before { font-size: 15px; line-height: 22px; }
}
@media (max-width: 700px) {
  :root { --workspace-top: 0px; --workspace-bottom: 0px; --workspace-edge: 0px; --sidebar-width: 100vw; --detail-width: 100vw; }
  .telegram .workspace { display: block; padding: 0; height: 100dvh; }
  .telegram .sidebar { border-radius: 0; }
  .telegram .chat-stage { padding: 6px 8px max(8px, env(safe-area-inset-bottom)); height: 100%; background: none; }
  .telegram .info-open .chat-stage { margin-right: 0; }
  .telegram .tg-top { height: 72px; min-height: 72px; padding: 8px 12px; gap: 8px; }
  .telegram #conversationSearch { min-height: 48px; height: 48px; font-size: 17px; padding-left: 46px; }
  .telegram .tg-search-box > .tg-icon { top: 12px; left: 14px; width: 23px; height: 23px; }
  .telegram .tg-room, .telegram .tg-archive-folder { min-height: 76px; padding: 10px 8px; gap: 10px; border-radius: 18px; }
  .telegram .tg-avatar { width: 54px; min-width: 54px; height: 54px; font-size: 22px; }
  .telegram :is(.tg-room-info strong, .tg-room-top strong, .tg-archive-folder strong, .tg-preview) { font-size: 16px; line-height: 23px; }
  .telegram .tg-room-top time { font-size: 12px; }
  .telegram .tg-profile-prompt, .telegram .tg-profile-prompt-action { min-height: 64px; }
  .telegram .tg-profile-prompt-action { font-size: 15px; line-height: 21px; }
  .telegram .chat-header { min-height: 58px; padding: 5px; border-radius: 32px; gap: 6px; }
  .telegram .chat-header-avatar { width: 42px; min-width: 42px; height: 42px; flex-basis: 42px; font-size: 18px; }
  .telegram .chat-header h2 { font-size: 17px; line-height: 23px; }
  .telegram .chat-header .muted { font-size: 13px; line-height: 18px; }
  .telegram .chat-header .icon-button, .telegram .chat-header #groupSettings { width: 34px; min-width: 34px; height: 38px; min-height: 38px; padding: 6px; }
  .telegram :is(#messagesList, #groupMessages) { padding: 14px 4px 18px; }
  .telegram #groupMessages { padding-left: 39px; }
  .telegram .chat-message { max-width: 90%; padding: 7px 9px 5px; }
  .telegram .message-text { font-size: 16px; line-height: 1.4; }
  .telegram .message-sender { font-size: 14px; line-height: 20px; }
  .telegram .message-avatar { width: 28px; height: 28px; left: -34px; font-size: 11px; }
  .telegram .chat-message time { font-size: 10px; line-height: 15px; }
  .telegram .chat-message[data-day] { margin-top: 45px; }
  .telegram .chat-message[data-day]::before { top: -37px; font-size: 14px; line-height: 22px; padding: 2px 11px; }
  .telegram .message-reply strong { font-size: 13px; line-height: 19px; }
  .telegram .message-reply span { font-size: 14px; line-height: 20px; }
  .telegram :is(#messageForm, #groupMessageForm) { min-height: 56px; border-radius: 30px; gap: 4px; padding: 4px 5px 4px 9px; }
  .telegram :is(#messageForm, #groupMessageForm) textarea { font-size: 16px; line-height: 23px; min-height: 44px; padding: 10px 3px; }
  .telegram :is(#messageForm, #groupMessageForm) .primary { width: 46px; min-width: 46px; height: 46px; min-height: 46px; }
  .telegram .chat-jump { width: 48px; height: 48px; min-height: 48px; bottom: 70px; right: 0; }
  .telegram .chat-tools input { font-size: 16px; }
  .telegram .tg-search-status { font-size: 13px; }
  .telegram :is(#profileDialog, #groupSettingsDialog, .tg-info) { inset: 0; width: 100%; max-width: 100%; height: 100dvh; border-radius: 0; padding: 16px; }
  .telegram :is(#profileDialog, #groupSettingsDialog) .dialog-top { top: -16px; }
  .telegram #recoveryDialog { padding: 20px; }
  .telegram #recoveryDialog .recovery-top { top: -20px; }
  .telegram .tg-composer-state, .telegram .tg-pinned-message { font-size: 14px; }
}
/* Keep the same column proportions under browser zoom / OS display scaling. */
:root { --chat-width: clamp(720px, 47.05vw, 900px); }
@media (min-width: 1500px) and (max-width: 1912px) {
  :root { --workspace-top: clamp(14px, 1.15vw, 22px); --workspace-bottom: clamp(14px, 1.0455vw, 20px); --workspace-edge: clamp(10px, .732vw, 14px); --workspace-gap: clamp(10px, .732vw, 14px); }
  .telegram .tg-top { height: 4.182vw; min-height: 4.182vw; padding-top: .627vw; padding-bottom: .627vw; gap: .836vw; }
  .telegram #conversationSearch { height: 2.927vw; min-height: 2.927vw; font-size: 1.0455vw; padding-left: 3.136vw; }
  .telegram .tg-search-box > .tg-icon { width: 1.36vw; height: 1.36vw; top: .784vw; }
  .telegram .tg-profile-prompt, .telegram .tg-profile-prompt-action { min-height: 3.66vw; }
  .telegram .tg-profile-prompt-action { font-size: .941vw; line-height: 1.255vw; }
  .telegram .tg-room, .telegram .tg-archive-folder { min-height: 4.705vw; padding-top: .523vw; padding-bottom: .523vw; }
  .telegram .tg-avatar { width: 3.555vw; min-width: 3.555vw; height: 3.555vw; font-size: 1.464vw; }
  .telegram :is(.tg-room-info strong, .tg-room-top strong, .tg-archive-folder strong, .tg-preview) { font-size: 1.0455vw; line-height: 1.36vw; }
  .telegram .tg-room-top time { font-size: .732vw; }
  .telegram .chat-header { min-height: 3.136vw; gap: .627vw; }
  .telegram .chat-header h2 { font-size: 1.15vw; line-height: 1.412vw; }
  .telegram .chat-header .muted { font-size: .836vw; line-height: 1.0455vw; }
  .telegram .chat-header-avatar { width: 2.613vw; min-width: 2.613vw; height: 2.613vw; flex-basis: 2.613vw; font-size: 1.2vw; }
  .telegram .message-text { font-size: 1.0455vw; }
  .telegram .message-sender { font-size: .941vw; line-height: 1.2vw; }
  .telegram :is(#messageForm, #groupMessageForm) { min-height: 3.136vw; padding-top: .2614vw; padding-bottom: .2614vw; }
  .telegram :is(#messageForm, #groupMessageForm) textarea { min-height: 2.509vw; font-size: 1.0455vw; line-height: 1.36vw; padding-top: .523vw; padding-bottom: .523vw; }
  .telegram :is(#messageForm, #groupMessageForm) .primary { width: 2.613vw; min-width: 2.613vw; height: 2.613vw; min-height: 2.613vw; }
}

.telegram :is(#groupSettingsDialog, #createGroupDialog)[aria-busy=true] { cursor: progress; }
.telegram :is(#groupSettingsDialog, #createGroupDialog)[aria-busy=true] button:disabled { cursor: progress; }