/* Telegram Web's island layout: panels float on the wallpaper. Sizes and colours come from the captured CSS. */
:root {
  --color-background-compact-menu: #ffffffeb;
  --color-background-menu-separator: #0000001a;
  --color-text-meta: #686c72;
  --color-links: #3390ec;
  --color-code-bg: #70757914;
  --color-reaction: #ebf3fd;
  --color-reaction-own: #cef0ba;
  --color-default-shadow: #72727240;
  --color-skeleton: #21212126;
  --color-toast: #202020cc;
  --color-scrollbar: #5a5a5a4d;
  --color-page: #dbddbb;
  --shadow-island: 0 1px 4px 0 #0000000d;
  --border-radius-island: 1.5rem;
  --border-radius-menu: 1rem;
  --border-radius-modal: 2rem;
  --middle-header-height: 3rem;
  --panel-gap: 1rem;
  --messages-width: 47.5rem;
  --left-column-width: clamp(16rem, 33vw, 26.5rem);
  --right-column-width: 26.5rem;
  --layer-transition: 0.3s cubic-bezier(0.33, 1, 0.68, 1);
  --slide-transition: 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  --select-transition: 0.2s ease-out;
}

:root[data-theme="dark"] {
  --color-background-secondary: #0f0f0f;
  --color-background-compact-menu: #212121f2;
  --color-background-menu-separator: #ffffff1a;
  --color-text-meta: #fff8;
  --color-links: #8774e1;
  --color-meta-own: #fff8;
  --color-code-bg: #00000080;
  --color-reaction: #2b2a35;
  --color-reaction-own: #675caf;
  --color-default-shadow: #1010109c;
  --color-page: #000;
}

html,
body {
  background: var(--color-page);
}

::selection {
  background: rgb(var(--color-primary-rgb) / 35%);
}

* {
  scrollbar-color: var(--color-scrollbar) transparent;
  scrollbar-width: thin;
}

.icon-button .icon {
  display: block;
}

/* Wallpaper */
#wallpaper {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: var(--wallpaper-picture, var(--color-page));
  background-size: cover;
}

#wallpaper-canvas,
#wallpaper-pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: blur(var(--wallpaper-blur, 0));
}

#wallpaper-pattern {
  opacity: var(--pattern-intensity, 0.5);
  background: #000;
  mix-blend-mode: soft-light;
  -webkit-mask: url("assets/images/pattern.svg") center / 26.875rem repeat;
  mask: url("assets/images/pattern.svg") center / 26.875rem repeat;
}

#wallpaper[data-pattern="off"] #wallpaper-pattern,
#wallpaper[data-mode="mask"] #wallpaper-pattern {
  display: none;
}

#wallpaper[data-mode="mask"] #wallpaper-canvas {
  opacity: var(--pattern-intensity, 0.5);
  -webkit-mask: url("assets/images/pattern.svg") center / 26.875rem repeat;
  mask: url("assets/images/pattern.svg") center / 26.875rem repeat;
}

/* Layout */
#app {
  z-index: 1;
  overflow: hidden;
  background: none;
}

#left {
  position: relative;
  width: var(--left-column-width);
  margin: var(--panel-gap) 0 var(--panel-gap) var(--panel-gap);
  overflow: hidden;
  border: 0;
  border-radius: var(--border-radius-island);
  background: var(--color-background);
  box-shadow: var(--shadow-island);
}

#middle {
  background: none;
}

#middle::before {
  content: none;
}

#empty-state span,
.date-separator > span,
.service-message > span {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  border-radius: var(--border-radius-messages, 0.9375rem);
  background: rgb(0 0 0 / 28%);
  color: #fff;
  font-size: calc(var(--message-text-size, 1rem) - 0.0625rem);
  line-height: 1.25;
}

:root[data-theme="dark"] .date-separator > span,
:root[data-theme="dark"] .service-message > span,
:root[data-theme="dark"] #empty-state span {
  background: #212121;
}

#conversation {
  position: relative;
  height: 100%;
  overflow: hidden;
  transition: transform var(--layer-transition);
  --right-shift: 0px;
}

#messages {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  padding: calc(var(--top-reserve, 4rem) + 0.5rem) max(var(--panel-gap), calc((100% - var(--messages-width)) / 2)) calc(var(--bottom-reserve, 5rem) + 0.75rem);
  overflow-y: auto;
  overflow-anchor: auto;
  transition: padding-inline var(--layer-transition);
}

#messages.with-avatars .bubble:not(.out) {
  margin-left: 2.875rem;
}

.message-day {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  margin-bottom: 0.1875rem;
}

.date-separator {
  position: sticky;
  z-index: 3;
  top: 0;
  align-self: center;
  margin: 0.5rem 0;
  padding: 0;
  border-radius: 0;
  background: none;
  pointer-events: none;
  font-size: inherit;
}

.service-message {
  margin: 0.5rem 0;
  padding: 0;
  border-radius: 0;
  background: none;
}

.unread-divider {
  margin: 0.5rem calc(var(--panel-gap) * -1);
  border-radius: 0.5rem;
  background: rgb(0 0 0 / 28%);
  color: #fff;
}

/* Floating header */
.top-stack {
  position: absolute;
  z-index: 4;
  top: var(--panel-gap);
  left: max(var(--panel-gap), calc((100% - var(--messages-width)) / 2));
  right: max(var(--panel-gap), calc((100% - var(--messages-width)) / 2));
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
  transition: left var(--layer-transition), right var(--layer-transition);
}

.top-stack > * {
  pointer-events: auto;
}

.chat-header,
.pinned-bar,
.chat-search,
.player-bar,
#topics,
.tag-bar {
  border: 0;
  border-radius: var(--border-radius-island);
  background: var(--color-background);
  box-shadow: var(--shadow-island);
}

.chat-header {
  height: var(--middle-header-height);
  padding: 0 0.3125rem;
  gap: 0;
}

.peer {
  padding-left: 0.1875rem;
}

.peer .avatar {
  width: 2.5rem;
  height: 2.5rem;
}

.peer-name {
  line-height: 1.25;
}

.peer-status {
  line-height: 1.125;
}

.chat-header .icon-button {
  color: var(--color-text);
}

.pinned-bar {
  padding: 0 0.25rem 0 0.75rem;
  min-height: 3rem;
}

.pinned-open {
  margin: 0.3125rem 0;
}

.pinned-label {
  color: var(--color-links);
}

.tag-bar {
  display: flex;
  gap: 0.375rem;
  padding: 0.375rem 0.5rem;
  overflow-x: auto;
}

.tag-chip {
  flex: none;
  padding: 0.1875rem 0.625rem;
  border-radius: 1rem;
  background: var(--color-reaction);
  color: var(--color-links);
  font-size: 0.875rem;
  transition: background-color 0.15s, color 0.15s;
}

.tag-chip.active {
  background: var(--color-primary);
  color: #fff;
}

/* Audio player, under the header */
.player-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  height: 3rem;
  padding: 0 0.25rem;
  overflow: hidden;
}

.player-bar .icon-button {
  color: var(--color-primary);
}

.player-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-size: 0.875rem;
}

.player-title,
.player-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-title {
  font-weight: 500;
}

.player-sub {
  color: var(--color-text-secondary);
}

.player-progress {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
}

/* Bubbles */
.bubble {
  position: relative;
  padding: 0.3125rem 0.5rem 0.375rem;
  border-radius: var(--border-radius-messages);
  box-shadow: 0 1px 2px #72727240;
  line-height: 1.3125;
  --bubble-background: var(--color-background);
}

:root[data-theme="dark"] .bubble {
  box-shadow: 0 1px 2px #1010109c;
}

.bubble.out {
  border-radius: var(--border-radius-messages);
  --bubble-background: var(--color-background-own);
}

.bubble:not(.out):not(.last-in-group) {
  border-bottom-left-radius: var(--border-radius-messages-small);
}

.bubble:not(.out):not(.first-in-group) {
  border-top-left-radius: var(--border-radius-messages-small);
}

.bubble.out:not(.last-in-group) {
  border-bottom-right-radius: var(--border-radius-messages-small);
}

.bubble.out:not(.first-in-group) {
  border-top-right-radius: var(--border-radius-messages-small);
}

.bubble.last-in-group:not(.bare):not(.out) {
  border-bottom-left-radius: 0;
}

.bubble.last-in-group:not(.bare).out {
  border-bottom-right-radius: 0;
}

.bubble.last-in-group {
  margin-bottom: 0.3125rem;
}

.bubble-tail {
  position: absolute;
  bottom: -3px;
  width: 0.5625rem;
  height: 1.25rem;
  color: var(--bubble-background);
  pointer-events: none;
}

.bubble:not(.out) > .bubble-tail {
  left: -0.5625rem;
}

.bubble.out > .bubble-tail {
  right: -0.5625rem;
}

.bubble-avatar {
  position: absolute;
  left: -2.875rem;
  bottom: 0;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  font-size: 1rem;
}

.bubble-avatar.online::after {
  display: none;
}

.bubble.bare {
  background: none;
  box-shadow: none;
}

.bubble.bare .meta {
  padding: 0 0.375rem;
  border-radius: 0.625rem;
  background: rgb(0 0 0 / 35%);
  color: #fff;
}

.bubble.jumbo .bubble-text {
  font-size: 4.25em;
  line-height: 1.1;
}

.bubble.jumbo .meta {
  font-size: 0.75rem;
  line-height: 1.25rem;
  float: none;
  display: block;
  width: fit-content;
  margin: 0 0 0 auto;
}

.bubble.with-media {
  padding-top: 0.1875rem;
}

.bubble.with-media.media-only {
  padding: 0;
  overflow: visible;
  border-radius: var(--border-radius-messages) !important;
  background: none;
  box-shadow: none;
}

.bubble.with-media.media-only > .bubble-tail {
  display: none;
}

.bubble.with-media.media-only .bubble-media,
.bubble.with-media.media-only .album {
  margin: 0;
  border-radius: inherit;
}

.bubble.with-media.media-only .bubble-text {
  position: absolute;
  right: 0.375rem;
  bottom: 0.375rem;
}

.bubble.with-media.media-only .meta {
  float: none;
  margin: 0;
  padding: 0 0.375rem;
  border-radius: 0.625rem;
  background: rgb(0 0 0 / 40%);
  color: #fff;
  line-height: 1.25rem;
}

.bubble.pending {
  opacity: 0.85;
}

.bubble.selected {
  outline: 0;
  --bubble-background: color-mix(in srgb, var(--color-primary) 30%, var(--color-background));
  background: var(--bubble-background);
}

.meta {
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
  float: right;
  height: 1rem;
  margin: 0.375rem -0.125rem -0.125rem 0.5rem;
  color: var(--color-text-meta);
  white-space: nowrap;
  user-select: none;
}

.meta-views {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 0.1875rem;
  margin-right: 0.25rem;
}

.meta-views .icon {
  font-size: 0.875rem;
}

.bubble.out .meta .ticks {
  color: var(--color-meta-own);
}

:root[data-theme="dark"] .bubble.out .ticks {
  color: #fff;
}

.ticks {
  margin-left: 0.125rem;
  font-size: 1.125rem;
  letter-spacing: 0;
}

.ticks.failed {
  color: var(--color-error) !important;
}

.link {
  color: var(--color-links);
}

.bubble.out .link {
  color: var(--color-links);
}

:root[data-theme="dark"] .bubble.out .link,
:root[data-theme="dark"] .bubble.out .forwarded,
:root[data-theme="dark"] .bubble.out .quote-name,
:root[data-theme="dark"] .bubble.out .link-preview-site {
  color: #fff;
}

.bubble.out .quote {
  border-left-color: var(--color-meta-own);
  background: rgb(0 0 0 / 7%);
}

:root[data-theme="dark"] .bubble.out .quote,
:root[data-theme="dark"] .bubble.out .link-preview {
  border-left-color: #fff;
  background: rgb(255 255 255 / 12%);
}

.quote {
  margin: 0 0 0.25rem;
  border-radius: 0.375rem;
  background: rgb(var(--color-primary-rgb) / 10%);
}

:root[data-theme="dark"] .quote-text {
  color: rgb(255 255 255 / 85%);
}

.bubble-forward {
  position: absolute;
  top: calc(100% - 2.75rem);
  left: calc(100% + 0.5rem);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.375rem;
  border-radius: 50%;
  background: rgb(0 0 0 / 28%);
  color: #fff;
  opacity: 0;
  transition: opacity 0.15s;
}

.bubble:hover > .bubble-forward,
.bubble-forward:focus-visible {
  opacity: 1;
}

.reactions {
  margin-top: 0.375rem;
}

.reaction {
  padding: 0.125rem 0.5rem;
  background: var(--color-reaction);
  color: var(--color-links);
  font-weight: 500;
  transition: background-color 0.15s, color 0.15s;
}

.bubble.out .reaction {
  background: var(--color-reaction-own);
  color: var(--color-meta-own);
}

:root[data-theme="dark"] .bubble.out .reaction {
  color: #fff;
}

.reaction.mine,
.bubble.out .reaction.mine {
  background: var(--color-primary);
  color: #fff;
}

:root[data-theme="dark"] .bubble.out .reaction.mine {
  background: #fff;
  color: var(--color-primary);
}

/* Audio files */
.audio-track .file-name {
  display: block;
  font-size: 0.9375rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audio-seek {
  height: 0.5rem;
  border-radius: 0.25rem;
  background: rgb(var(--color-text-secondary-rgb) / 30%);
  overflow: hidden;
}

.voice-bar.audio-progress {
  flex: 1;
  height: 100%;
  border-radius: 0;
  background: var(--color-primary);
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left;
}

.bubble.out .audio-progress {
  background: var(--color-meta-own);
}

/* Video messages */
.round-video {
  position: relative;
  width: 15rem;
  height: 15rem;
  overflow: hidden;
  border-radius: 50%;
  background: var(--color-background-secondary);
  cursor: pointer;
  transition: width 0.2s ease-out, height 0.2s ease-out;
}

.round-video.playing {
  width: 20rem;
  height: 20rem;
}

.round-video video,
.round-video .gif-thumbnail {
  border-radius: 50%;
}

.round-video .gif-badge {
  top: auto;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
}

.round-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}

.round-ring circle {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
}

.round-recorder {
  position: fixed;
  z-index: 45;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  background: rgb(0 0 0 / 60%);
  backdrop-filter: blur(6px);
  color: #fff;
}

.round-stage {
  position: relative;
  width: min(22rem, 80vw);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: #000;
}

.round-stage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

.round-stage .round-ring circle {
  stroke: var(--color-primary);
  stroke-width: 2.5;
}

.round-controls {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.round-controls .icon-button {
  color: #fff;
  background: rgb(255 255 255 / 15%);
}

/* Composer */
.composer-wrap {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: var(--panel-gap);
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 max(var(--panel-gap), calc((100% - var(--messages-width)) / 2));
  transition: padding-inline var(--layer-transition);
  pointer-events: none;
}

.composer-wrap > * {
  pointer-events: auto;
}

#composer {
  align-items: flex-end;
  gap: 0.5rem;
  max-width: none;
  padding: 0;
}

.composer-pill {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  border-radius: var(--border-radius-island);
  background: var(--color-background);
  box-shadow: var(--shadow-island);
}

#input {
  min-height: 3rem;
  padding: 0.84375rem 0.25rem;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

#input::placeholder {
  color: var(--color-text-secondary);
}

#composer .composer-button {
  width: 3rem;
  height: 3rem;
  padding: 0.75rem;
  background: none;
  box-shadow: none;
  color: var(--color-text-secondary);
}

#composer .composer-button:hover {
  color: var(--color-primary);
  background: none;
}

.send {
  width: 3rem;
  height: 3rem;
  box-shadow: var(--shadow-island);
}

.compose-bar,
.emoji-panel,
.select-bar,
.blocked-bar,
.recording,
.mention-list {
  margin: 0 0 0.5rem;
  border-radius: var(--border-radius-island);
  background: var(--color-background);
  box-shadow: var(--shadow-island);
}

.compose-bar {
  margin-bottom: 0;
  border-radius: var(--border-radius-island) var(--border-radius-island) 0 0;
  box-shadow: none;
  padding: 0.5rem 0.25rem 0.125rem 0.75rem;
}

.compose-bar + .format-bar {
  bottom: 100%;
}

.recording {
  margin: 0;
  height: 3rem;
  padding: 0 0.25rem 0 0.25rem;
}

.blocked-bar {
  margin: 0;
}

.blocked-bar .button {
  height: 3rem;
  text-transform: none;
}

.mention-list {
  left: var(--panel-gap);
  right: var(--panel-gap);
}

.select-bar {
  margin: 0;
}

/* Emoji picker */
.emoji-panel {
  position: absolute;
  z-index: 5;
  right: max(var(--panel-gap), calc((100% - var(--messages-width)) / 2));
  bottom: calc(100% + 0.5rem);
  width: 26rem;
  max-width: calc(100% - 2rem);
  height: 26rem;
  max-height: 60vh;
  margin: 0;
}

.emoji-grid {
  flex: 1;
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.emoji-tabs {
  flex: none;
  display: flex;
  justify-content: space-between;
  padding: 0 0.5rem 0.25rem;
}

.emoji-tab {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 0.5rem;
  font-size: 1.125rem;
  opacity: 0.6;
  transition: opacity 0.15s, background-color 0.15s;
}

.emoji-tab:hover,
.emoji-tab.active {
  background: var(--color-chat-hover);
  opacity: 1;
}

.emoji-scroll {
  flex: 1;
  min-height: 0;
  padding: 0 0.5rem 0.5rem;
  overflow-y: auto;
}

.emoji-section {
  content-visibility: auto;
  contain-intrinsic-size: auto calc(var(--rows, 8) * 2.75rem + 2rem);
}

.emoji-section-title {
  margin: 0;
  padding: 0.5rem 0.25rem 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.emoji-cells {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr));
}

.emoji-results {
  flex: 1;
  align-content: start;
  padding: 0 0.5rem;
  overflow-y: auto;
}

.emoji-button {
  height: 2.75rem;
  font-size: 1.75rem;
  line-height: 1;
}

.gif-pane {
  flex: 1;
  height: auto;
  min-height: 0;
}

.panel-tabs {
  flex: none;
}

.gif-search {
  flex: none;
}

/* Left column */
.left-header {
  height: 4rem;
  padding: 0 0.75rem;
}

.search {
  height: 2.75rem;
  border-radius: 1.375rem;
  border: 1px solid transparent;
  background: var(--color-background-secondary);
  transition: border-color 0.15s, background-color 0.15s;
}

:root[data-theme="dark"] .search {
  background: #2c2c2c;
}

.search:focus-within {
  border-color: var(--color-primary);
  background: var(--color-background);
  color: var(--color-primary);
}

.connection {
  animation: fade-in 0.2s 0.6s both;
}

.folders {
  position: relative;
  gap: 0;
  padding: 0 0.5rem;
  border-bottom: 1px solid var(--color-borders);
  scrollbar-width: none;
}

#folders {
  flex: none;
}

.folder-tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.625rem 0.75rem;
  border: 0;
  border-radius: 0.5rem 0.5rem 0 0;
  color: var(--color-text-secondary);
  transition: color 0.15s;
}

.folder-tab.active {
  color: var(--color-primary);
}

#topics .folder-tab.active {
  box-shadow: inset 0 -3px var(--color-primary);
}

.tab-marker {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  border-bottom: 3px solid var(--color-primary);
  border-radius: 0 0 2px 2px;
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), width 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.folder-badge {
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3125rem;
  border-radius: 0.625rem;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.25rem;
  text-align: center;
}

.folder-tab:not(.active) .folder-badge {
  background: var(--color-text-secondary);
}

#chat-list {
  padding: 0.25rem 0.5rem 0.5rem;
  overflow-x: hidden;
}

#chat-list > li {
  content-visibility: auto;
  contain-intrinsic-size: auto 4.5rem;
}

.chat-item {
  height: 4.5rem;
  gap: 0.625rem;
  padding: 0.5625rem;
  border-radius: 1rem;
  transition: background-color 0.15s;
}

.compact-list .chat-item {
  height: 3.5rem;
  padding: 0.3125rem 0.5625rem;
}

.compact-list .chat-item .avatar {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.0625rem;
}

.compact-list #chat-list > li {
  contain-intrinsic-size: auto 3.5rem;
}

.chat-item.active {
  --color-text-secondary: rgb(255 255 255 / 85%);
}

.chat-item.active .chat-flag,
.chat-item.active .chat-ticks {
  color: #fff;
}

.chat-title {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.chat-name {
  flex: 0 1 auto;
  font-size: 1rem;
}

.chat-sender {
  color: var(--color-text);
}

.chat-item.active .chat-sender {
  color: #fff;
}

.chat-ticks {
  font-size: 1.125rem;
  color: var(--color-primary);
  padding: 0;
  letter-spacing: 0;
}

.emoji-status {
  flex: none;
  font-size: 0.875rem;
}

.badge {
  background: var(--color-primary);
}

:root[data-theme="dark"] .badge {
  background: var(--color-primary);
}

.badge.muted {
  background: #707579;
}

.mention-badge {
  background: var(--color-primary);
}

.saved-avatar {
  background: linear-gradient(135deg, #8774e1, #5e6ad2) !important;
}

:root:not([data-theme="dark"]) .saved-avatar {
  background: linear-gradient(135deg, #5eb5f7, #3390ec) !important;
}

.saved-avatar .icon {
  font-size: 1.875rem;
}

.avatar-large.saved-avatar .icon {
  font-size: 4rem;
}

.peer .saved-avatar .icon {
  font-size: 1.5rem;
}

.archive-avatar {
  background: #9eaab5;
  font-size: 1.75rem;
}

.archive-row {
  padding: 0.5625rem;
  color: inherit;
  font-weight: 400;
}

.archive-row .chat-name {
  font-weight: 500;
}

#archive-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 500;
}

#archive-back .icon {
  font-size: 1.5rem;
}

.icon-button:has(.icon) {
  display: grid;
  place-items: center;
  color: var(--color-text-secondary);
}

/* Folders down the side */
.folders-sidebar #left {
  padding-left: 4.75rem;
}

.folders-sidebar #folders {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  flex-direction: column;
  width: 4.75rem;
  padding: 4.25rem 0 0.5rem;
  overflow-y: auto;
  border: 0;
  background: var(--color-background-secondary);
}

.folders-sidebar .folder-tab {
  flex-direction: column;
  width: 100%;
  padding: 0.75rem 0.25rem;
  border-radius: 0;
  font-size: 0.75rem;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

.folders-sidebar .tab-marker {
  border: 0;
  border-radius: 0;
  background: rgb(var(--color-primary-rgb) / 14%);
  box-shadow: inset 3px 0 var(--color-primary);
}

/* New chat button */
.fab {
  position: absolute;
  z-index: 3;
  right: 1.25rem;
  bottom: 1.25rem;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  overflow: hidden;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 1px 2px var(--color-default-shadow);
  transform: translateY(5rem);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#left:hover .fab,
.fab:focus-visible {
  transform: none;
}

@media (hover: none) {
  .fab {
    transform: none;
  }
}

/* Menus */
.menu,
.menu-list {
  border-radius: var(--border-radius-menu);
  background: var(--color-background-compact-menu);
  backdrop-filter: blur(25px);
  box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow);
}

.menu {
  min-width: 13.5rem;
  max-height: calc(100vh - 2rem);
  padding: 0.25rem;
  overflow-y: auto;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 2.25rem;
  padding: 0 0.75rem;
  border-radius: 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

.menu-item:hover {
  background: var(--color-background-menu-separator);
}

.menu-item .icon {
  font-size: 1.25rem;
  color: var(--color-text-secondary);
}

.menu-item.danger,
.menu-item.danger .icon {
  color: var(--color-error);
}

.context-menu {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
  overflow: visible;
  background: none;
  backdrop-filter: none;
  box-shadow: none;
}

.context-menu > .menu-list {
  padding: 0.25rem;
  max-height: min(70vh, 30rem);
  overflow-y: auto;
}

.quick-reactions {
  width: fit-content;
  max-width: 20.5rem;
  margin: 0;
  padding: 0.25rem;
  border: 0;
  border-radius: 1.375rem;
  background: var(--color-background-compact-menu);
  backdrop-filter: blur(25px);
  box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow);
}

.quick-reaction {
  transition: transform 0.15s, background-color 0.15s;
}

.quick-reaction:hover {
  transform: scale(1.25);
  background: none;
}

/* Modals */
.modal {
  border-radius: var(--border-radius-modal);
  box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow);
}

.modal-button {
  border-radius: var(--border-radius-menu);
  text-transform: none;
}

.input-group input {
  border-radius: var(--border-radius-menu);
  transition: border-color 0.15s;
}

:root[data-theme="dark"] .input-group input {
  border-color: #5b5b5a;
}

/* Toast, as Telegram's Notification */
.toast {
  left: 50%;
  bottom: auto;
  top: 1.5rem;
  border-radius: var(--border-radius-menu);
  background: var(--color-toast);
  backdrop-filter: blur(25px);
}

/* Right column */
#right {
  position: absolute;
  z-index: 6;
  top: var(--panel-gap);
  right: var(--panel-gap);
  bottom: var(--panel-gap);
  width: calc(var(--right-column-width) - var(--panel-gap));
  overflow-y: auto;
  border: 0;
  border-radius: var(--border-radius-island);
  background: var(--color-background-secondary);
  box-shadow: var(--shadow-island);
}

:root[data-theme="dark"] #right {
  background: #181818;
}

.right-header {
  position: sticky;
  z-index: 3;
  top: 0;
  height: 4rem;
  background: inherit;
}

#right .right-header {
  background: var(--color-background-secondary);
}

:root[data-theme="dark"] #right .right-header {
  background: #181818;
}

.profile {
  padding: 0.5rem 1rem 1rem;
}

.profile-photos {
  width: 7.5rem;
  height: 7.5rem;
  margin: 0 auto 0.75rem;
  border-radius: 50%;
}

#right .details,
.info-actions,
.settings-group {
  margin: 0 0.75rem 0.75rem;
  padding: 0.25rem;
  border-radius: var(--border-radius-island);
  background: var(--color-background);
}

#right .details:empty {
  display: none;
}

.detail-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: 0.4375rem 0.75rem;
  border-radius: 1.125rem;
}

.detail-text {
  min-width: 0;
}

.detail-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.625rem;
  color: #fff;
}

.detail-icon .icon {
  font-size: 1.25rem;
}

.info-switch {
  justify-content: flex-start;
}

.info-switch .switch-mark {
  margin-left: auto;
}

.switch-mark {
  position: relative;
  flex: none;
  width: 2.25rem;
  height: 1.25rem;
  border-radius: 0.625rem;
  background: var(--color-text-secondary);
  transition: background-color 0.15s;
}

.switch-mark::after {
  content: "";
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease-out;
}

[aria-checked="true"] > .switch-mark {
  background: var(--color-primary);
}

[aria-checked="true"] > .switch-mark::after {
  transform: translateX(1rem);
}

.shared {
  margin: 0 0.75rem 0.75rem;
}

.shared-tabs {
  top: 4rem;
  gap: 0.125rem;
  margin-bottom: 0.5rem;
  padding: 0.25rem;
  overflow-x: auto;
  border: 0;
  border-radius: var(--border-radius-island);
  background: var(--color-background);
  scrollbar-width: none;
}

.shared-tab {
  flex: 1 0 auto;
  padding: 0.5rem 0.75rem;
  border-radius: 1.25rem;
  transition: background-color 0.15s, color 0.15s;
}

.shared-tab.active {
  box-shadow: none;
  background: rgb(var(--color-primary-rgb) / 18%);
}

.shared-grid {
  overflow: hidden;
  border-radius: 1rem;
}

.shared-row {
  margin-bottom: 0.25rem;
  border-radius: 1rem;
  background: var(--color-background);
}

/* With room, the conversation moves over for the right column instead of going under it. */
@media (min-width: 1276px) {
  #app.right-open #messages {
    padding-right: max(var(--panel-gap), calc((100% - var(--messages-width) - var(--right-column-width)) / 2 + var(--right-column-width)));
    padding-left: max(var(--panel-gap), calc((100% - var(--messages-width) - var(--right-column-width)) / 2));
  }

  #app.right-open .top-stack {
    right: max(var(--panel-gap), calc((100% - var(--messages-width) - var(--right-column-width)) / 2 + var(--right-column-width)));
    left: max(var(--panel-gap), calc((100% - var(--messages-width) - var(--right-column-width)) / 2));
  }

  #app.right-open .composer-wrap {
    padding-right: max(var(--panel-gap), calc((100% - var(--messages-width) - var(--right-column-width)) / 2 + var(--right-column-width)));
    padding-left: max(var(--panel-gap), calc((100% - var(--messages-width) - var(--right-column-width)) / 2));
  }
}

/* Settings */
.settings {
  background: var(--color-background-secondary);
}

:root[data-theme="dark"] .settings {
  background: #181818;
}

.settings-page {
  padding: 0 0 1.5rem;
}

.settings-page > .settings-heading,
.settings-page > .settings-note {
  margin-inline: 1.5rem;
  padding-inline: 0;
}

.settings-page > :is(.input-group, .button, .settings-list, .wallpaper-tiles, .settings-link, .avatar-edit) {
  margin-inline: 0.75rem;
  width: auto;
}

.settings-page > .avatar-edit {
  width: 7.5rem;
  margin-inline: auto;
}

.settings-list {
  overflow: hidden;
  padding: 0.25rem;
  border-radius: var(--border-radius-island);
  background: var(--color-background);
}

.settings-group .settings-nav,
.settings-list .settings-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 1.25rem;
  transition: background-color 0.15s;
}

.settings-page > .settings-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  /* A button with width: auto shrinks to its text, which left these rows as short pills; Telegram's run full width. */
  width: calc(100% - 1.5rem);
  margin: 0 0.75rem 0.25rem;
  padding: 0.75rem;
  border-radius: 1.25rem;
  background: var(--color-background);
}

.settings-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.625rem;
  color: #fff;
}

.settings-icon .icon {
  font-size: 1.375rem;
}

.settings-icon-danger {
  background: var(--color-error);
}

.settings-nav-title {
  line-height: 1.3;
}

.settings-card-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
}

.settings-card-row > .icon {
  width: 2rem;
  color: var(--color-text-secondary);
  text-align: center;
}

.setting-row {
  min-height: 3rem;
  padding: 0.5rem 0.75rem;
  border-radius: 1.25rem;
  transition: background-color 0.15s;
}

.setting-row input[type="checkbox"],
.checkbox input[type="checkbox"] {
  position: relative;
  width: 2.25rem;
  height: 1.25rem;
  margin: 0;
  border-radius: 0.625rem;
  background: var(--color-text-secondary);
  appearance: none;
  cursor: pointer;
  transition: background-color 0.15s;
}

.setting-row input[type="checkbox"]::after,
.checkbox input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease-out;
}

.setting-row input[type="checkbox"]:checked,
.checkbox input[type="checkbox"]:checked {
  background: var(--color-primary);
}

.setting-row input[type="checkbox"]:checked::after,
.checkbox input[type="checkbox"]:checked::after {
  transform: translateX(1rem);
}

.setting-row input[type="radio"] {
  order: -1;
  width: 1.25rem;
  height: 1.25rem;
}

.setting-slider:hover {
  background: none;
}

.setting-row .range-slider {
  width: 100%;
  height: 0.25rem;
}

.color-input::-moz-color-swatch {
  border: 0;
  border-radius: 50%;
}

.color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-input::-webkit-color-swatch {
  border: 0;
  border-radius: 50%;
}

.range-slider {
  --fill: 50%;
  height: 0.25rem;
  margin: 0.625rem 0 0.25rem;
  border-radius: 0.125rem;
  background: linear-gradient(90deg, var(--color-primary) var(--fill), rgb(var(--color-text-secondary-rgb) / 30%) var(--fill));
  appearance: none;
  cursor: pointer;
}

.range-slider::-webkit-slider-thumb {
  width: 0.875rem;
  height: 0.875rem;
  border: 0;
  border-radius: 50%;
  background: var(--color-primary);
  appearance: none;
}

.range-slider::-moz-range-thumb {
  width: 0.875rem;
  height: 0.875rem;
  border: 0;
  border-radius: 50%;
  background: var(--color-primary);
}

.range-slider::-moz-range-track {
  background: none;
}

.chat-preview-box {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
  padding: 1rem 1.25rem;
  overflow: hidden;
  border-radius: 1.25rem;
  background: linear-gradient(135deg, #88b884, #6ba587 60%, #d5d88d);
}

:root[data-theme="dark"] .chat-preview-box {
  background: linear-gradient(135deg, #4f5bd5, #962fbf 60%, #dd6cb9);
}

.wallpaper-tile {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  transition: transform 0.15s;
}

.wallpaper-tile:hover {
  transform: scale(1.03);
}

.wallpaper-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background: #000;
  mix-blend-mode: soft-light;
  -webkit-mask: url("assets/images/pattern.svg") center / 8.75rem repeat;
  mask: url("assets/images/pattern.svg") center / 8.75rem repeat;
}

/* Skeleton while a chat loads */
.message-skeleton {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.375rem;
  min-height: 100%;
}

.skeleton-bubble {
  position: relative;
  height: 2.25rem;
  overflow: hidden;
  border-radius: var(--border-radius-messages);
  background: var(--color-skeleton);
}

.skeleton-bubble.out {
  align-self: flex-end;
}

/* Effects and exit copies */
#ghosts {
  position: fixed;
  z-index: 70;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.effect-piece {
  position: fixed;
  font-size: 2rem;
  line-height: 1;
}

.meta-effect {
  font-size: 0.75rem;
}

.typing-dots {
  display: inline-flex;
  gap: 2px;
  margin-left: 0.25rem;
  vertical-align: 2px;
}

.typing-dots i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentcolor;
}

/* Phones */
@media (max-width: 925px) {
  :root {
    --panel-gap: 0.5rem;
    --right-column-width: min(26.5rem, 100vw);
  }
}

@media (max-width: 600px) {
  #left {
    width: auto;
    flex: 1;
    margin: 0;
    border-radius: 0;
  }

  body.chat-open #left {
    display: none;
  }

  #right {
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    border-radius: 0;
  }

  #messages.with-avatars .bubble:not(.out) {
    margin-left: 2.625rem;
  }

  .bubble {
    max-width: calc(100% - 2.75rem);
  }

  .emoji-panel {
    left: var(--panel-gap);
    right: var(--panel-gap);
    width: auto;
    max-width: none;
  }
}

.menu-avatar {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.625rem;
}

.members-card {
  border-radius: var(--border-radius-island);
  background: var(--color-background);
  overflow: hidden;
}

.members-card .member-open {
  border-radius: 0;
}

/* Main menu as in Telegram's MainMenu: current account on top, separators, the More submenu with a footer (captured CSS). */
.menu-separator {
  display: block;
  height: 1px;
  margin: 0.25rem -0.25rem;
  background: var(--color-background-menu-separator);
}

.menu-current .menu-avatar {
  width: 1.75rem;
  height: 1.75rem;
}

.menu-current-name {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.menu-item.submenu .submenu-icon {
  margin-left: auto;
  font-size: 1rem;
}

.menu-item .menu-item-name {
  margin-right: 2rem;
}

.menu-item > .switch-mark {
  margin-left: auto;
  width: 2.125rem;
  height: 0.875rem;
  background: var(--color-gray, #c4c9cc);
}

.menu-item > .switch-mark::after {
  top: -0.125rem;
  left: 0;
  width: 1.125rem;
  height: 1.125rem;
  border: 0.125rem solid var(--color-gray, #c4c9cc);
  background: var(--color-background);
  box-sizing: border-box;
}

.menu-item[aria-checked="true"] > .switch-mark::after {
  border-color: var(--color-primary);
}

.submenu-list {
  padding-bottom: 0;
  overflow: hidden;
}

.menu-footer {
  margin: 0.25rem -0.25rem 0;
  padding: 0.25rem 0.5rem;
  background: var(--color-chat-hover, var(--color-background-menu-separator));
  color: var(--color-text-secondary);
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.25;
}

.menu-item.checked,
.menu-item.checked .icon {
  color: var(--color-primary);
}

.player-bar #player-order.active {
  color: var(--color-primary);
}

/* Telegram's ReactionSelector__hint above the effects row in the send menu. */
.menu-hint {
  padding: 0.25rem 0.5rem;
  color: var(--color-text-secondary);
  text-align: center;
  text-wrap: balance;
  font-size: 0.75rem;
}

.quick-reactions.with-hint {
  flex-wrap: wrap;
  justify-content: center;
  border-radius: 1rem;
}

.quick-reactions.with-hint > .menu-hint {
  flex-basis: 100%;
}

/* LeftSearch (captured CSS): tab list, section headings with a link on the right, the media grid. */
.search-tabs {
  flex: none;
}

.list-heading.section-heading {
  padding: 0.625rem 0.5rem 0.625rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.section-link {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-right: 0.5rem;
  color: var(--color-links, var(--color-primary));
  font-weight: 500;
  font-size: 1rem;
  transition: opacity 0.15s ease-in;
}

.section-link:hover {
  opacity: 0.85;
}

.dropdown-link .icon {
  width: 1rem;
  font-size: 1rem;
}

.search-media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.0625rem;
  padding: 0.25rem 0;
}

.search-media-cell {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  background: var(--color-background-secondary, #0000000d);
}

.search-media-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-media-duration {
  position: absolute;
  left: 0.25rem;
  top: 0.25rem;
  padding: 0 0.25rem;
  border-radius: 0.25rem;
  background: rgb(0 0 0 / 25%);
  color: #fff;
  font-size: 0.75rem;
}

/* Telegram's AudioPlayer bar: skip buttons around play, a clickable track, playlist, volume that opens a slider on hover. */
.player-bar .icon-button {
  flex: none;
  width: 2rem;
  height: 2rem;
  font-size: 1.25rem;
}

.player-bar .icon-button:disabled {
  opacity: 0.4;
}

.player-bar > .icon-button:not(#player-toggle, #player-prev, #player-next, #player-order.active) {
  color: var(--color-text-secondary);
}

button.player-text {
  align-items: flex-start;
  padding: 0.125rem 0.5rem;
  border-radius: 0.5rem;
  text-align: left;
}

button.player-text:hover {
  background: var(--color-chat-hover);
}

.player-volume {
  display: flex;
  align-items: center;
}

.player-volume-range {
  width: 0;
  opacity: 0;
  accent-color: var(--color-primary);
  transition: width 0.2s ease, opacity 0.2s ease;
}

.player-volume:hover .player-volume-range,
.player-volume:focus-within .player-volume-range {
  width: 5rem;
  opacity: 1;
}

/* TextFormatter's Add Link: a divider, the link button, and the URL field that replaces the buttons. */
.format-bar {
  align-items: center;
}

.format-divider {
  width: 1px;
  height: 1.25rem;
  margin: 0 0.25rem;
  background: var(--color-borders);
}

#format-link .icon,
#format-link-apply .icon {
  font-size: 1.25rem;
}

.format-link-field {
  display: none;
  align-items: center;
}

.format-bar.link-mode > :not(.format-link-field) {
  display: none;
}

.format-bar.link-mode > .format-link-field {
  display: flex;
}

#format-link-url {
  width: 12rem;
  height: 2rem;
  padding: 0 0.5rem;
  border: 0;
  outline: 0;
  background: none;
  color: var(--color-text);
  font-size: 0.875rem;
}

#format-link-apply {
  color: var(--color-primary);
}

.text-link {
  color: var(--color-links, var(--color-primary));
}

/* Telegram's hover quick reaction beside the bubble (Message .quick-reaction). */
.bubble-quick-reaction {
  position: absolute;
  top: 0;
  left: calc(100% + 0.375rem);
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border-radius: 50%;
  background: var(--color-background);
  box-shadow: 0 1px 2px #72727240;
  font-size: 1rem;
  line-height: 1;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.15s, transform 0.15s;
}

.bubble.out > .bubble-quick-reaction {
  left: auto;
  right: calc(100% + 0.375rem);
}

.bubble:hover > .bubble-quick-reaction,
.bubble-quick-reaction:focus-visible {
  opacity: 1;
  transform: scale(1);
}

.bubble-quick-reaction:hover {
  transform: scale(1.1);
}

/* With a channel's forward button on the same side, the heart sits above it. */
.bubble:has(> .bubble-forward) > .bubble-quick-reaction {
  top: auto;
  bottom: 3rem;
}

.date-separator > span {
  pointer-events: auto;
  cursor: pointer;
}

.right-header-edit {
  margin-left: auto;
}

/* Telegram's MessageCall bubble: title, arrow with time and length, and a button to call again. */
.call-message {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 12rem;
  padding: 0.125rem 0;
}

.call-text {
  flex: 1;
}

.call-title {
  font-weight: 500;
}

.call-sub {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

.call-arrow {
  color: #4fae4e;
  font-size: 1rem;
  transform: rotate(-45deg);
}

.bubble:not(.out) .call-arrow {
  transform: rotate(-45deg) scaleX(-1);
}

.call-failed .call-arrow {
  color: var(--color-error);
}

.call-again {
  color: var(--color-primary);
  font-size: 1.5rem;
}

.bubble.out .call-again {
  color: var(--color-message-meta-own, #4fae4e);
}

.forwarded-name {
  padding: 0;
  color: inherit;
  font: inherit;
  font-weight: 500;
}

.forwarded-name:not(.hidden-author):hover {
  text-decoration: underline;
}

.forwarded-name.hidden-author {
  cursor: default;
}

/* Personal Channel card on a profile and the Saved Music list. */
.personal-channel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  text-align: left;
}

.personal-channel:hover {
  background: var(--color-chat-hover);
}

.personal-channel-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.personal-channel-label {
  color: var(--color-text-secondary);
  font-size: 0.75rem;
}

.personal-channel-title {
  font-weight: 500;
}

.personal-channel-sub {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

.saved-music-time {
  margin-left: auto;
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
}

#player-profile.active {
  color: var(--color-primary);
}

.settings-count {
  margin-left: auto;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

.faq-answer,
.policy-text {
  line-height: 1.4;
}

/* QR code: the button on the Username row and the card in its window. */
.detail-qr {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-left: auto;
  border-radius: 50%;
  color: var(--color-primary);
  cursor: pointer;
}

.detail-qr:hover {
  background: var(--color-chat-hover);
}

.qr-glyph {
  width: 1.375rem;
  height: 1.375rem;
}

.qr-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem;
  border-radius: 1.25rem;
  background: linear-gradient(135deg, #6ec9cb, #65aadd 50%, #a695e7);
}

.qr-image {
  width: 13rem;
  height: 13rem;
  padding: 0.5rem;
  border-radius: 1rem;
  background: #fff;
  image-rendering: pixelated;
}

.qr-username {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.qr-note {
  text-align: center;
}

/* Telegram's Date attachment card. */
.date-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  align-items: center;
  min-width: 14rem;
  padding: 0.25rem 0 0.375rem;
}

.date-card-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 3rem;
  overflow: hidden;
  border-radius: 0.625rem;
  background: var(--color-background);
  box-shadow: 0 1px 2px #72727240;
}

.date-card-month {
  width: 100%;
  padding: 0.0625rem 0;
  background: #e8555e;
  color: #fff;
  text-align: center;
  font-size: 0.625rem;
  font-weight: 600;
}

.date-card-day {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.6;
}

.date-card-title {
  font-weight: 500;
}

.date-card-when,
.date-card-relative {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

.date-card-add {
  grid-column: 1 / -1;
  margin-top: 0.25rem;
  padding: 0.375rem;
  border-radius: 0.5rem;
  background: var(--color-reaction, #3390ec1a);
  color: var(--color-links, var(--color-primary));
  font-weight: 500;
}

/* Rich text from the formatting menus. */
.text-heading {
  margin: 0.125rem 0 0.375rem;
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1.25;
}

/* Checklist items, tables and formulas, as Telegram Android draws them in a bubble (capture 2026-11-08). */
.text-checklist {
  margin: 0.25rem 0;
  padding: 0;
  list-style: none;
}

.text-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.125rem 0;
}

.text-check {
  flex: none;
  width: 1.125em;
  height: 1.125em;
  margin-top: 0.15em;
  border: 2px solid var(--color-text-secondary, #707579);
  border-radius: 0.3125rem;
  opacity: 0.7;
}

.text-checklist li.done .text-check {
  border-color: var(--color-primary);
  background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 90% no-repeat;
  opacity: 1;
}

.text-checklist li.done .text-check-label {
  text-decoration: line-through;
  opacity: 0.6;
}

.text-table-wrap {
  max-width: 100%;
  margin: 0.375rem 0;
  overflow-x: auto;
}

.text-table {
  width: 100%;
  border: 1px solid rgb(128 128 128 / 30%);
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 0.625rem;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.text-table td {
  min-width: 4rem;
  padding: 0.375rem 0.75rem;
  border-color: rgb(128 128 128 / 30%);
  border-color: color-mix(in srgb, currentColor 18%, transparent);
  border-style: solid;
  border-width: 0 1px 1px 0;
  vertical-align: top;
}

.text-table tr > td:last-child {
  border-right-width: 0;
}

.text-table tr:last-child > td {
  border-bottom-width: 0;
}

.text-formula {
  margin: 0.375rem 0;
  font-family: "Latin Modern Math", "STIX Two Math", "Cambria Math", "Times New Roman", serif;
  font-size: 1.25em;
  font-style: italic;
  text-align: center;
  overflow-x: auto;
}

.tex-frac {
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
  font-size: 0.85em;
  text-align: center;
}

.tex-num {
  border-bottom: 1px solid currentColor;
}

.tex-sqrt {
  border-top: 1px solid currentColor;
}

.text-divider {
  margin: 0.375rem 0;
  border: 0;
  border-top: 1px solid currentColor;
  opacity: 0.25;
}

.text-list {
  margin: 0.125rem 0;
  padding-left: 1.25rem;
}

/* Profile tabs: Saved Messages, Polls, Groups. */
.shared-chat {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem 1rem;
  text-align: left;
}

.shared-message {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
}

.shared-message-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Telegram's floating jump buttons above Go to bottom. */
.jump-stack {
  position: absolute;
  z-index: 4;
  right: 1.5rem;
  bottom: 9rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.jump-button {
  position: relative;
  right: auto;
  bottom: auto;
  font-size: 1.5rem;
}

.jump-button[hidden] {
  display: none;
}

.reaction-badge {
  display: inline-grid;
  place-items: center;
  background: #e8555e;
  color: #fff;
}

.reaction-badge .icon {
  font-size: 0.875rem;
}

:root[data-theme="dark"] .reaction-badge {
  background: #e8555e;
}

.send-as {
  flex: none;
}

.send-as .avatar {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.75rem;
}

/* Mood chips under Search Emoji, and the picker's backspace. */
.emoji-moods {
  display: flex;
  gap: 0.25rem;
  padding: 0 0.5rem 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.emoji-mood {
  flex: none;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 50%;
  font-size: 1.125rem;
  line-height: 1;
}

.emoji-mood:hover,
.emoji-mood.active {
  background: var(--color-chat-hover);
}

.emoji-delete {
  margin-left: auto;
  font-size: 1.25rem;
  color: var(--color-text-secondary);
}

.stories-toggle {
  flex: none;
  font-size: 1.375rem;
  color: var(--color-text-secondary);
}

.stories-toggle.has-stories {
  color: var(--color-primary);
}

/* Forward picker: a tick at the end of each chat's row, to send to several. */
.forward-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.forward-row .member-open {
  flex: 1;
  min-width: 0;
}

.forward-tick {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-right: 0.5rem;
  accent-color: var(--color-primary);
}

.forward-option {
  margin-bottom: 0.25rem;
}

.poll.closed .poll-option {
  cursor: default;
}

/* Upload bar above the composer. */
.upload-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 auto 0.5rem;
  padding: 0.25rem 0.25rem 0.25rem 0.75rem;
  width: min(100%, 30rem);
  border-radius: 0.75rem;
  background: var(--color-background);
  box-shadow: var(--shadow-island);
  font-size: 0.875rem;
}

.upload-bar[hidden] {
  display: none;
}

.upload-text {
  flex: none;
  color: var(--color-text-secondary);
}

.upload-track {
  flex: 1;
  height: 0.25rem;
  overflow: hidden;
  border-radius: 0.125rem;
  background: var(--color-background-menu-separator);
}

.upload-fill {
  display: block;
  height: 100%;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.15s linear;
}

/* Hide with Spoiler: blurred under Telegram's dots until tapped. */
.media-spoiler {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.media-spoiler img,
.media-spoiler video {
  filter: blur(1.5rem);
  transform: scale(1.2);
}

.media-spoiler::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: url("assets/images/spoiler-dots.png") repeat rgb(0 0 0 / 30%);
}

.spoiler-cell img {
  filter: blur(0.75rem);
}

.attach-option {
  margin-top: 0.25rem;
}

.attach-option[hidden] {
  display: none;
}

.requests-all {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  padding-bottom: 0.25rem;
}

.search-date {
  margin-right: 0.25rem;
}

.search-date .icon {
  font-size: 1rem;
}

.report-row {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-borders);
}

.report-title {
  font-weight: 500;
}

.report-text {
  margin: 0.25rem 0;
  overflow-wrap: anywhere;
}

.report-actions {
  display: flex;
  gap: 1rem;
}

.saved-source-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem;
}

.birthdays-today {
  margin-bottom: 0.25rem;
}

/* Phones: Telegram's compact AudioPlayer (capture: lO.compactPlayer) keeps only play/pause, the track and close; the
   skip, speed, profile, playlist, volume and order controls don't fit next to a readable title. */
.player-title,
.player-sub {
  max-width: 100%;
}

@media (max-width: 600px) {
  .player-bar {
    gap: 0;
    padding: 0 0.25rem 0 0.375rem;
  }

  #player-prev,
  #player-next,
  #player-speed,
  #player-profile,
  #player-list,
  .player-volume,
  #player-order {
    display: none !important;
  }

  .player-bar .icon-button {
    width: 2.5rem;
    height: 2.5rem;
  }
}

.menu-item .menu-icon-space {
  flex: none;
  display: inline-block;
  width: 1em;
  height: 1em;
}

/* Phones: the header, search, pinned message and audio player join into one panel flush with the top, as in Telegram's
   mobile layout. Separate islands left gaps where half-cut messages showed through, and cost 8px of height each. */
@media (max-width: 600px) {
  .top-stack {
    top: 0;
    left: 0;
    right: 0;
    gap: 0;
    padding-top: var(--safe-top);
    overflow: hidden;
    border-radius: 0 0 var(--border-radius-island) var(--border-radius-island);
    background: var(--color-background);
    box-shadow: var(--shadow-island);
    pointer-events: auto;
  }

  .top-stack > * {
    border-radius: 0;
    box-shadow: none;
  }

  .top-stack > * + * {
    border-top: 1px solid var(--color-borders);
  }
}

/* The text takes the free space, so a count such as Blocked Users' "None" sits at the right edge as in Telegram. */
.settings-nav > .settings-nav-text {
  flex: 1;
  min-width: 0;
}

/* width: auto above shrinks a <button> to its text, which made Save a small circle; buttons span the page like the fields. */
.settings-page > .button {
  width: calc(100% - 1.5rem);
}

/* A raised field label sits across the field's top border; only its lower half needs the field's colour, so on the grey
   Settings page it no longer shows a white box above the border. */
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
  background: linear-gradient(to bottom, transparent calc(50% - 0.1875rem), var(--color-background) calc(50% - 0.1875rem));
}

/* Android WebViews before Chrome 111 have no color-mix(); a variable holding one would leave the selected bubble blank. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .bubble.selected {
    --bubble-background: rgb(var(--color-primary-rgb) / 30%);
  }
}

/* Telegram for Android's bottom bar. Sizes in dp from the 2026-11-08 capture at density 420. */
#contacts-tab[hidden] { display: none; }
#contacts-tab-body { flex: 1; min-height: 0; overflow-y: auto; }
.tab-in { animation: tab-in 0.15s ease-out; }
@keyframes tab-in { from { opacity: 0; } }
body.tabbar-root #settings-back { display: none; }
body.tabbar-root .settings .left-header h2 { margin-inline-start: 0.75rem; }

.tabbar {
  position: absolute;
  z-index: 16;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  height: 72px;
  padding: 8px;
  pointer-events: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.tabbar.off { transform: translateY(100%); opacity: 0; visibility: hidden; transition: transform 0.2s ease, opacity 0.2s ease, visibility 0s 0.2s; }
.tabbar-pill {
  position: relative;
  display: flex;
  width: min(328px, 100%);
  height: 56px;
  padding: 4px;
  border-radius: 28px;
  background: var(--color-background);
  box-shadow: 0 1px 8px rgb(0 0 0 / 16%), 0 0 1px rgb(0 0 0 / 12%);
  pointer-events: auto;
}
.tabbar-selection {
  position: absolute;
  top: 4px;
  left: 0;
  height: 48px;
  border-radius: 24px;
  background: var(--color-primary);
  opacity: 0.12;
  pointer-events: none;
}
.tabbar-selection.slides { transition: transform 0.3s cubic-bezier(0.3, 0, 0.1, 1), width 0.3s cubic-bezier(0.3, 0, 0.1, 1); }
.tabbar-item {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  height: 48px;
  padding: 4px 10px 0;
  border: 0;
  border-radius: 24px;
  background: none;
  color: var(--color-text);
  -webkit-tap-highlight-color: transparent;
}
.tabbar-item.selected { color: var(--color-primary); }
.tabbar-item:active .tabbar-icon { transform: scale(0.92); }
.tabbar-icon { display: block; width: 24px; height: 24px; flex: none; transition: transform 0.1s ease; }
.tabbar-icon svg { display: block; width: 24px; height: 24px; fill: currentColor; }
.tabbar-icon.avatar { display: grid; place-items: center; line-height: 1; width: 22px; height: 22px; margin: 1px; border-radius: 50%; overflow: hidden; font-size: 9px; }
.tabbar-label { font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap; }
.tabbar-badge {
  position: absolute;
  top: 2px;
  left: calc(50% + 3px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 1.5px var(--color-background);
}
.tabbar-badge[hidden] { display: none; }
body.tabbar-shown #chat-list { padding-bottom: 72px; }
body.tabbar-shown .settings-page, body.tabbar-shown #contacts-tab-body { padding-bottom: 80px; }
body.tabbar-shown .fab { right: 20px; bottom: 78px; width: 48px; height: 48px; }

/* Telegram for Android's Chats page (reference 5443056584901730462.jpg), Android only. Sizes in dp. */
.app-title { display: none; }
body.has-tabbar .android-head { flex-wrap: wrap; gap: 0; height: auto; padding: 4px 6px 0 11px; }
body.has-tabbar .android-head .app-title {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  height: 48px;
  margin: 0;
  padding-left: 11px;
  overflow: hidden;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.2px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body.has-tabbar .android-head .menu-wrap { order: 2; }
body.has-tabbar .android-head .stories-toggle { order: 1; }
body.has-tabbar .android-head .stories-toggle:not(.has-stories) { display: none; }
body.has-tabbar .android-head .search { order: 3; flex: 1 1 100%; height: 42px; margin: 6px 5px 0 0; padding: 0 16px; border-radius: 21px; gap: 14px; }
body.has-tabbar .android-head .search input { font-size: 16px; }
body.has-tabbar .android-head .menu { right: 0; left: auto; transform-origin: top right; }
body.has-tabbar .android-head .submenu-list { right: 0; left: auto; }
body.has-tabbar #folders {
  margin: 10px 11px 4px;
  padding: 4px;
  border: 0;
  border-radius: 21px;
  background: var(--color-background-secondary);
  overflow-x: auto;
  overflow-y: hidden;
}
:root[data-theme="dark"] body.has-tabbar #folders { background: #2c2c2c; }
body.has-tabbar #folders .folder-tab {
  flex: 1 0 auto;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 500;
}
body.has-tabbar #folders .tab-marker {
  border: 0;
  border-radius: 16px;
  /* rgb(… / 16%) rather than color-mix(), which Android WebViews before Chrome 111 drop (no highlight at all). */
  background: rgb(var(--color-primary-rgb) / 16%);
}
body.has-tabbar #folders .folder-badge { min-width: 20px; height: 20px; border-radius: 10px; font-size: 12px; line-height: 20px; }
body.has-tabbar #new-chat-fab .compose-icon { width: 26px; height: 26px; fill: currentColor; }
#camera-fab[hidden] { display: none; }
body.has-tabbar #camera-fab {
  right: 24px;
  bottom: 138px;
  width: 40px;
  height: 40px;
  background: var(--color-background);
  color: var(--color-text);
  font-size: 22px;
  box-shadow: 0 1px 6px rgb(0 0 0 / 22%), 0 0 1px rgb(0 0 0 / 20%);
}
:root[data-theme="dark"] body.has-tabbar #camera-fab { background: #2c2c2c; }

/* ===== Telegram for Android look (Android only, body.has-tabbar), measured from capture/data_files/android_telegram/2026-11-08T10-05-39.
   Sizes in dp (CSS px in the WebView). ===== */

/* Chat header: three floating islands - a round back button, a pill with avatar and name, a pill of actions. */
body.has-tabbar .chat-header {
  gap: 6px;
  height: auto;
  margin: 8px 6px 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
body.has-tabbar .chat-header > #back-button,
body.has-tabbar .chat-header > #header-peer,
body.has-tabbar .chat-header > .header-actions {
  background: var(--color-background);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
body.has-tabbar .chat-header > #back-button {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
}
body.has-tabbar .chat-header > #back-button svg { width: 24px; height: 24px; }
body.has-tabbar .chat-header > #header-peer {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  gap: 10px;
  padding: 2px 16px 2px 2px;
  border-radius: 23px;
}
body.has-tabbar .chat-header #header-avatar { width: 42px; height: 42px; font-size: 16px; }
body.has-tabbar .chat-header .peer-name { font-size: 17px; font-weight: 500; line-height: 21px; }
body.has-tabbar .chat-header .peer-status { font-size: 13px; line-height: 17px; }
body.has-tabbar .chat-header > .header-actions {
  display: flex;
  flex: none;
  align-items: center;
  height: 46px;
  padding: 0 4px;
  border-radius: 23px;
}
body.has-tabbar .header-actions .icon-button { width: 38px; height: 38px; }
body.has-tabbar .header-actions .icon-button svg { width: 24px; height: 24px; }
body.has-tabbar .header-actions .icon-button .icon { font-size: 24px; }
body.has-tabbar #info-button { display: none; }

/* Composer: one white pill, emoji on the left, attach on the right, the round mic/send button inside it. */
body.has-tabbar #composer {
  gap: 0;
  align-items: flex-end;
  padding: 3px 3px 3px 0;
  border-radius: 23px;
  background: var(--color-background);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
body.has-tabbar #composer .composer-pill {
  flex: 1;
  min-height: 40px;
  background: transparent;
  box-shadow: none;
}
body.has-tabbar #composer .composer-pill::before,
body.has-tabbar #composer .composer-pill::after { display: none; }
body.has-tabbar #composer #emoji-button { order: -1; }
body.has-tabbar #composer #input { font-size: 17px; }
body.has-tabbar #composer .send {
  flex: none;
  width: 40px;
  height: 40px;
  margin: 0;
  box-shadow: none;
}
body.has-tabbar #composer .send svg { width: 22px; height: 22px; }

/* Menus: opaque, 48 dp rows, regular 16 sp text, 24 dp icons. */
body.has-tabbar .menu-list {
  border-radius: 20px;
  background: var(--color-background);
  backdrop-filter: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
body.has-tabbar .context-menu .menu-item,
body.has-tabbar .menu-list .menu-item {
  gap: 22px;
  height: 48px;
  padding: 0 20px;
  border-radius: 0;
  font-size: 16px;
  font-weight: 400;
}
body.has-tabbar .menu-list .menu-item .icon { font-size: 24px; color: var(--color-text-secondary); }
body.has-tabbar .menu-list .menu-item.danger .icon { color: inherit; }
body.has-tabbar .menu.context-menu { padding: 0; min-width: 220px; }
body.has-tabbar .context-menu .menu-list { padding: 6px 0; overflow: hidden; }

/* Settings pages: a round back island, the title centred, rows grouped into one card per section. */
body.has-tabbar .settings .left-header { position: relative; justify-content: center; min-height: 62px; }
body.has-tabbar #settings-back {
  position: absolute;
  left: 6px;
  top: 8px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-background);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
body.has-tabbar .settings .left-header h2 { font-size: 20px; font-weight: 500; text-align: center; }
body.has-tabbar.tabbar-root .settings .left-header { justify-content: flex-start; }
body.has-tabbar.tabbar-root .settings .left-header h2 { text-align: left; }
body.has-tabbar .settings-page > :is(.settings-nav, .setting-row) {
  width: calc(100% - 24px);
  margin: 0 12px;
  border-radius: 0;
  background: var(--color-background);
}
body.has-tabbar .settings-page > .setting-row { padding: 14px 20px; font-size: 16px; }
body.has-tabbar .settings-page > :is(.settings-nav, .setting-row):not(:is(.settings-nav, .setting-row, .settings-heading) + *) {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
body.has-tabbar .settings-page > :is(.settings-nav, .setting-row):not(:has(+ :is(.settings-nav, .setting-row))) {
  margin-bottom: 12px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
/* A section title followed by rows sits inside their card, in blue (Archive Settings, Privacy). */
body.has-tabbar .settings-page > .settings-heading:has(+ :is(.settings-nav, .setting-row)) {
  margin: 0 12px;
  padding: 16px 20px 4px;
  border-radius: 16px 16px 0 0;
  background: var(--color-background);
  font-size: 15px;
}
body.has-tabbar .settings-page > .settings-heading:has(+ .settings-list) { margin-top: 12px; }
body.has-tabbar .settings-page > .settings-note { margin: -4px 20px 16px; padding: 0; font-size: 14px; }

/* Profile: round close and ⋮ islands with no title, a row of tiles under the name. */
body.has-tabbar #right .right-header { justify-content: space-between; background: transparent; box-shadow: none; }
body.has-tabbar #right .right-header h2 { display: none; }
body.has-tabbar #right .right-header .icon-button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-background);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
body.has-tabbar #right .right-header #info-close { margin-right: auto; }
body.has-tabbar #right .right-header .right-header-edit { order: 2; }
body.has-tabbar #right .right-header #info-more { order: 3; margin-left: 8px; }
body.has-tabbar .info-tiles {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 6px;
  margin: 4px 12px 12px;
}
body.has-tabbar .info-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  height: 54px;
  padding-top: 6px;
  border-radius: 14px;
  background: var(--color-background);
  color: var(--color-text);
}
body.has-tabbar .info-tile .icon { font-size: 26px; }
body.has-tabbar .info-tile-label { font-size: 12px; font-weight: 500; }
body.has-tabbar .info-tile:active { background: var(--color-chat-hover); }
.info-tiles { display: none; }
body.has-tabbar .info-tiles { display: grid; }
/* The header islands float over the messages (capture), so the phone top panel loses its white backing on Android;
   the pinned bar, search and audio player under it become islands of their own. */
body.has-tabbar .top-stack {
  gap: 6px;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}
body.has-tabbar .top-stack > :not(.chat-header) {
  margin: 0 6px;
  border-top: 0;
  border-radius: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Telegram for Android's Contacts tab (api33play emulator, 2026-11-08). Sizes in dp. */
#contacts-tab > .left-header { position: relative; justify-content: center; min-height: 62px; }
#contacts-tab > .left-header h2 { font-size: 20px; font-weight: 500; text-align: center; }
.contacts-actions {
  position: absolute;
  right: 6px;
  top: 8px;
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 4px;
  border-radius: 23px;
  background: var(--color-background);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.contacts-actions .icon-button { width: 38px; height: 38px; }
.contacts-actions .icon { font-size: 24px; }
.contacts-android { position: relative; padding: 4px 0 16px; }
.contacts-search {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 42px;
  margin: 0 12px 12px;
  padding: 0 16px;
  border-radius: 21px;
  background: var(--color-background);
  color: var(--color-text-secondary);
}
.contacts-search[hidden] { display: none; }
.contacts-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--color-text); font-size: 16px; outline: none; }
.contacts-card {
  margin: 0 12px 12px;
  padding: 4px 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--color-background);
}
.contacts-card[hidden] { display: none; }
.contacts-shortcut {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  height: 50px;
  padding: 0 18px;
  font-size: 16px;
  text-align: left;
}
.contacts-shortcut-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 8px;
  color: #fff;
}
.contacts-shortcut-icon .icon { font-size: 20px; }
.contacts-heading {
  margin: 0;
  padding: 14px 21px 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-primary);
}
.contact-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: 56px;
  padding: 0 14px;
  text-align: left;
}
.contact-row:active, .contacts-shortcut:active { background: var(--color-chat-hover); }
.contact-avatar { flex: none; width: 44px; height: 44px; font-size: 17px; }
.contact-text { display: flex; flex-direction: column; min-width: 0; }
.contact-name { overflow: hidden; font-size: 16px; font-weight: 500; line-height: 21px; white-space: nowrap; text-overflow: ellipsis; }
.contact-status { overflow: hidden; font-size: 14px; line-height: 20px; color: var(--color-text-secondary); white-space: nowrap; text-overflow: ellipsis; }
.contact-status.online { color: var(--color-primary); }
.contact-name.missed, .call-direction.missed { color: var(--color-error); }
.contacts-empty { padding: 12px 21px 16px; color: var(--color-text-secondary); }
.contacts-fab {
  position: fixed;
  z-index: 3;
  right: 20px;
  bottom: 78px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
}
.contacts-fab .icon { font-size: 24px; }
#contacts-tab[hidden] .contacts-fab { display: none; }
.recent-calls .contact-row { padding: 0 4px; }
.contacts-sort-icon { width: 24px; height: 24px; }

/* Chats tab, re-measured on the api33play emulator (2026-11-08, status bar excluded): title 31 dp centred 24 dp down,
   search pill 40 dp at 58 dp, folder track 44 dp at 103 dp with 36 dp segments, 70 dp rows with a 52 dp avatar 11 dp
   from the edge and the name at 77 dp, 16 sp preview, 13 sp time, sender name in the accent colour (light theme). */
body.has-tabbar .android-head .app-title { height: 40px; align-self: flex-start; margin-top: 2px; }
body.has-tabbar .android-head .search { height: 40px; border-radius: 20px; }
body.has-tabbar #folders { margin: 5px 11px 3px; padding: 4px; border-radius: 22px; }
body.has-tabbar #folders .folder-tab { height: 36px; border-radius: 18px; }
body.has-tabbar #chat-list { padding-inline: 0; }
body.has-tabbar #chat-list .chat-item {
  gap: 14px;
  width: 100%;
  height: 70px;
  min-height: 70px;
  margin: 0;
  padding: 0 16px 0 11px;
  border-radius: 0;
}
body.has-tabbar #chat-list .chat-item > .avatar { width: 52px; height: 52px; font-size: 20px; }
body.has-tabbar #chat-list .chat-name { font-size: 17px; font-weight: 500; }
body.has-tabbar #chat-list .chat-preview { font-size: 16px; }
body.has-tabbar #chat-list .chat-time { font-size: 13px; }
body.has-tabbar #chat-list .chat-sender { color: var(--color-primary); }
:root[data-theme="dark"] body.has-tabbar #chat-list .chat-sender { color: var(--color-text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.has-tabbar #chat-list .chat-sender { color: var(--color-text); } }
body.has-tabbar #chat-list .badge { min-width: 22px; height: 22px; border-radius: 11px; font-size: 13px; line-height: 22px; }
body.has-tabbar .android-head .search { margin-top: 12px; }

/* ===== Telegram for Android 13.2.1, Chats tab (api33play emulator, 2026-11-08). Colours are the Night theme's, sampled from
   screenshots; sizes in dp. ===== */
:root[data-theme="dark"]:has(body.has-tabbar) { --color-page: #1d2733; }
:root[data-theme="dark"] body.has-tabbar {
  --color-background: #1d2733;
  --color-background-secondary: #2c3541;
  --color-text: #fff;
  --color-text-secondary: #7d8b99;
  --color-text-secondary-rgb: 125 139 153;
  --color-text-meta: #737f8b;
  --color-borders: #151e27;
  --color-chat-hover: #253140;
  --color-background-compact-menu: #283848;
  --color-background-menu-separator: #1e2e3e;
  --color-background-own: #2b5278;
  --color-reaction: #2b3b4c;
  --color-reaction-own: #3e6a96;
}
/* A colour picked in Appearance still wins; without one the accent is Night's blue. */
:root[data-theme="dark"]:not([style*="--color-primary"]) body.has-tabbar {
  --color-primary: #229af0;
  --color-primary-rgb: 34 154 240;
  --color-links: #64afe9;
  --color-chat-active: #2b4057;
}
:root[data-theme="dark"] body.has-tabbar .android-head .search { background: #2c3541; border-color: transparent; }
:root[data-theme="dark"] body.has-tabbar .android-head .search input::placeholder { color: #959aa0; }
:root[data-theme="dark"] body.has-tabbar #folders { background: #233140; }
:root[data-theme="dark"] body.has-tabbar #folders .tab-marker { background: #2b4057; }
:root[data-theme="dark"] body.has-tabbar #folders .folder-tab { color: #8b97a2; }
:root[data-theme="dark"] body.has-tabbar #folders .folder-tab.active { color: #6abdff; }
:root[data-theme="dark"] body.has-tabbar #folders .folder-tab .folder-badge { background: #8b97a2; color: #233140; }
:root[data-theme="dark"] body.has-tabbar #folders .folder-tab.active .folder-badge { background: #6abdff; color: #2b4057; }
:root[data-theme="dark"] body.has-tabbar #chat-list .badge { background: #5ba3d8; color: #fff; }
:root[data-theme="dark"] body.has-tabbar #chat-list .badge.muted { background: #3e5263; }
:root[data-theme="dark"] body.has-tabbar #chat-list .chat-time { color: #737f8b; }
:root[data-theme="dark"] body.has-tabbar #chat-list .chat-name { color: #fff; }
:root[data-theme="dark"] body.has-tabbar .archive-avatar { background: #384b5a; }
:root[data-theme="dark"] body.has-tabbar #camera-fab { background: #202b39; color: #fff; }
:root[data-theme="dark"] body.has-tabbar .tabbar-pill { background: #202d3d; }
:root[data-theme="dark"] body.has-tabbar .tabbar-selection { background: #20364d; opacity: 1; }
:root[data-theme="dark"] body.has-tabbar .menu-list { background: #283848; }
:root[data-theme="dark"] body.has-tabbar .menu-list .menu-item .icon { color: #fff; }

/* Popup menus: 200 dp wide, flush 48 dp rows, ~12 dp corners, an 8 dp band between groups. */
body.has-tabbar .menu.context-menu { min-width: 196px; }
body.has-tabbar .context-menu .menu-list { padding: 0; border-radius: 12px; }
body.has-tabbar .context-menu .menu-separator { height: 8px; margin: 0; background: var(--color-background-menu-separator); }
:root:not([data-theme="dark"]) body.has-tabbar .context-menu .menu-separator { background: #f0f0f0; }
.icon.icon-sun::before {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Search: the pill folds away once the list scrolls, leaving a 🔍 beside ⋮; it opens again at the top or from the 🔍. */
.android-search-button { display: none; }
body.has-tabbar .android-head .android-search-button { position: absolute; top: 5px; right: 54px; display: grid; width: 40px; height: 40px; visibility: hidden; opacity: 0; transition: opacity 0.2s; }
body.has-tabbar .android-head .android-search-button .icon { font-size: 24px; }
body.has-tabbar.chats-search-folded .android-head .android-search-button { visibility: visible; opacity: 1; }
body.has-tabbar .android-head .search { max-height: 52px; overflow: hidden; transition: max-height 0.22s ease, margin 0.22s ease, opacity 0.18s ease; }
body.has-tabbar.chats-search-folded .android-head .search:not(:focus-within) { max-height: 0; margin-top: 0; margin-bottom: 0; opacity: 0; pointer-events: none; }

/* FABs slide down out of view while scrolling down and come back on the way up. */
body.has-tabbar #new-chat-fab, body.has-tabbar #camera-fab { transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), opacity 0.2s; }
body.has-tabbar.chats-fabs-away #new-chat-fab, body.has-tabbar.chats-fabs-away #camera-fab { transform: translateY(160px); opacity: 0; pointer-events: none; }

/* Selection: the header becomes ✕, the count and the actions; picked avatars get a green check. */
.android-select-head {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 56px;
  padding: 4px 6px 0 6px;
  background: var(--color-background);
  animation: android-select-in 0.18s ease-out;
}
.android-select-head[hidden] { display: none; }
.android-select-head .icon-button { width: 48px; height: 48px; flex: none; }
.android-select-head .icon-button .icon { font-size: 24px; color: var(--color-text); }
.android-select-head .icon-button[hidden] { display: none; }
.android-select-count { margin-left: 18px; font-size: 20px; font-weight: 500; }
.android-select-space { flex: 1; }
body.has-tabbar .android-head { position: relative; }
body.chats-selecting .android-head .app-title,
body.chats-selecting .android-head .menu-wrap,
body.chats-selecting .android-head .android-search-button,
body.chats-selecting .android-head .stories-toggle { visibility: hidden; }
@keyframes android-select-in { from { opacity: 0; } to { opacity: 1; } }
.pick-mark {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--color-background);
  border-radius: 50%;
  background: #5ec245;
  color: #fff;
  animation: pick-in 0.18s cubic-bezier(0.3, 1.5, 0.6, 1);
}
.pick-mark .icon { font-size: 14px; font-weight: 700; }
@keyframes pick-in { from { transform: scale(0); } to { transform: scale(1); } }
body.chats-selecting #chat-list .chat-item { user-select: none; }

/* A hidden archive folds out of the list and comes back while pulled down from the top. */
body.has-tabbar.archive-folded:not(.archive-peek) #chat-list .archive-item { display: none; }
body.has-tabbar.archive-peek #chat-list .archive-item { animation: archive-peek 0.25s ease-out; }
@keyframes archive-peek { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: none; } }

.archive-help-row { margin: 0 0 14px; }
.archive-help-row b { display: block; margin-bottom: 4px; font-size: 16px; }
.archive-help-row p { margin: 0; color: var(--color-text-secondary); font-size: 15px; line-height: 1.4; }
:root[data-theme="dark"] body.has-tabbar .saved-avatar { background: linear-gradient(#66bbf8, #45a3e4); }
:root:not([data-theme="dark"]) body.has-tabbar .saved-avatar { background: linear-gradient(#72d5fd, #2a9ef1); }

/* ===== Telegram for Android 13.2.1, Profile tab (api33play emulator, 2026-11-08). Sizes in dp, Night colours sampled. ===== */
body.has-tabbar {
  --ptab-page: var(--color-background-secondary);
  --ptab-tile: var(--color-background);
  --ptab-card: var(--color-background);
  --ptab-track: var(--color-background);
  --ptab-seg: rgb(var(--color-primary-rgb) / 14%);
  --ptab-seg-text: var(--color-primary);
  --ptab-seg-dim: var(--color-text-secondary);
  --ptab-status: var(--color-text-secondary);
}
:root[data-theme="dark"] body.has-tabbar {
  --ptab-page: #151e27;
  --ptab-tile: #283543;
  --ptab-card: #1d2733;
  --ptab-track: #1d2633;
  --ptab-seg: #2b3d51;
  --ptab-seg-text: #79c4fc;
  --ptab-seg-dim: #778793;
  --ptab-status: #768691;
}
#settings[data-page="me"] > .left-header { display: none; }
#settings[data-page="me"], #settings[data-page="me"] .settings-page { background: var(--ptab-page); }
#settings[data-page="me"] .settings-page { padding: 0 0 140px; }
.ptab { position: relative; }
.ptab-top {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  margin-bottom: -56px;
  padding: 5px 6px;
  transition: background-color 0.2s;
}
.ptab-folded .ptab-top { background: var(--ptab-page); }
.ptab-round {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ptab-tile);
  color: var(--color-text);
}
.ptab-round svg, .ptab-round .icon { width: 24px; height: 24px; font-size: 24px; }
.ptab-mini { flex: 1; min-width: 0; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s; pointer-events: none; }
.ptab-folded .ptab-mini { opacity: 1; transform: none; }
.ptab-mini-name { overflow: hidden; font-size: 18px; font-weight: 500; line-height: 26px; white-space: nowrap; text-overflow: ellipsis; }
.ptab-mini-status { font-size: 14px; line-height: 18px; color: var(--ptab-status); }
.ptab-hero { display: flex; flex-direction: column; align-items: center; padding: 34px 16px 0; }
.ptab-avatar { width: 96px; height: 96px; font-size: 36px; overflow: hidden; }
.ptab-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ptab-name { display: flex; align-items: center; gap: 6px; max-width: 100%; margin: 11px 0 0; overflow: hidden; font-size: 20px; font-weight: 500; line-height: 35px; white-space: nowrap; text-overflow: ellipsis; }
.ptab-emoji-status { font-size: 18px; }
.ptab-status { margin: 0; font-size: 14px; line-height: 21px; color: var(--ptab-status); }
.ptab-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 24px 14px 0; }
.ptab-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 54px;
  border-radius: 12px;
  background: var(--ptab-tile);
  color: var(--color-text);
  font-size: 12px;
  font-weight: 500;
}
.ptab-tile .icon { font-size: 24px; }
.ptab-tile:active, .ptab-round:active, .ptab-row:active { filter: brightness(1.15); }
.ptab-card { margin: 18px 12px 0; padding: 0; overflow: hidden; border-radius: 14px; background: var(--ptab-card); }
.ptab-row { display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 61px; padding: 6px 18px; text-align: left; }
.ptab-row-value { overflow-wrap: anywhere; font-size: 16px; line-height: 24px; }
.ptab-row-label { font-size: 13px; line-height: 20px; color: var(--color-text-secondary); }
.ptab-tabs { position: sticky; top: 56px; z-index: 2; display: flex; justify-content: center; margin-top: 16px; padding: 2px 0 6px; background: var(--ptab-page); }
.ptab-track { position: relative; display: inline-flex; padding: 4px; border-radius: 22px; background: var(--ptab-track); }
.ptab-marker { position: absolute; top: 4px; left: 4px; height: 36px; border-radius: 18px; background: var(--ptab-seg); transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), width 0.25s cubic-bezier(0.2, 0, 0, 1); }
.ptab-seg { position: relative; height: 36px; padding: 0 14px; border-radius: 18px; color: var(--ptab-seg-dim); font-size: 15px; font-weight: 500; transition: color 0.2s; }
.ptab-seg.active { color: var(--ptab-seg-text); }
/* Tall enough that the header always scrolls away and the segments reach the top, even with no posts. */
.ptab-body { min-height: calc(100dvh - 108px); }
.ptab-expanded .ptab-avatar img { border-radius: 0; }
#settings[data-page="me"] .settings-page { padding-bottom: 0; }
.ptab-empty { padding: 66px 46px 0; text-align: center; animation: ptab-fade 0.2s ease-out; }
.ptab-empty h3 { margin: 0 0 8px; font-size: 20px; font-weight: 500; }
.ptab-empty p { margin: 0; font-size: 14px; line-height: 18px; color: var(--color-text-secondary); }
.ptab-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 8px; animation: ptab-fade 0.2s ease-out; }
.ptab-post { aspect-ratio: 3 / 4; padding: 0; overflow: hidden; background: var(--ptab-tile); }
.ptab-post img, .ptab-post video { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes ptab-fade { from { opacity: 0; } to { opacity: 1; } }
.ptab-add {
  position: fixed;
  left: 50%;
  bottom: 72px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px 0 14px;
  border-radius: 19px;
  background: var(--color-primary);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  transform: translateX(-50%);
  box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
}
.ptab-add .icon { font-size: 22px; }
/* The avatar opened full width, with the name over it and the tiles on its lower edge. */
.ptab-expanded .ptab-hero { position: relative; height: 100vw; max-height: 480px; padding: 0 16px 76px; justify-content: flex-end; align-items: flex-start; }
.ptab-expanded .ptab-avatar { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; animation: ptab-open 0.25s cubic-bezier(0.2, 0, 0, 1); }
.ptab-expanded .ptab-avatar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgb(0 0 0 / 45%)); }
.ptab-expanded .ptab-name, .ptab-expanded .ptab-status { position: relative; color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / 40%); }
.ptab-expanded .ptab-name { font-size: 24px; }
.ptab-expanded .ptab-actions { position: relative; margin-top: -68px; }
.ptab-expanded .ptab-tile { background: rgb(0 0 0 / 28%); color: #fff; backdrop-filter: blur(12px); }
.ptab-expanded .ptab-round { background: rgb(0 0 0 / 28%); color: #fff; }
@keyframes ptab-open { from { clip-path: circle(48px at 50% 82px); } to { clip-path: circle(150% at 50% 50%); } }

/* ===== Telegram for Android 13.2.1, Settings screen (api33play emulator, 2026-11-08). Sizes in dp. ===== */
:root[data-theme="dark"] body.has-tabbar .settings { background: var(--ptab-page); }
body.has-tabbar .settings { background: var(--ptab-page); }
:root[data-theme="dark"] body.has-tabbar .settings-group,
:root[data-theme="dark"] body.has-tabbar .settings-page > :is(.settings-nav, .setting-row, .settings-heading) { background: var(--ptab-card); }
/* The header floats over the page: back island left, 🔍 ⋮ pill right, the title only once the name has scrolled away. */
.sx-tools { display: none; }
body.has-tabbar #settings[data-page="main"] > .left-header { position: absolute; inset: 0 0 auto 0; z-index: 3; background: transparent; transition: background-color 0.2s; }
body.has-tabbar #settings[data-page="main"].sx-scrolled > .left-header { background: var(--ptab-page); }
body.has-tabbar #settings[data-page="main"] #settings-title { opacity: 0; transition: opacity 0.2s; }
body.has-tabbar #settings[data-page="main"].sx-scrolled #settings-title { opacity: 1; }
body.has-tabbar.tabbar-root #settings[data-page="main"] > .left-header { justify-content: center; }
body.has-tabbar.tabbar-root #settings[data-page="main"] #settings-back { visibility: hidden; }
body.has-tabbar #settings[data-page="main"] .sx-tools {
  position: absolute;
  top: 8px;
  right: 6px;
  display: flex;
  height: 46px;
  padding: 0 1px;
  border-radius: 23px;
  background: var(--ptab-tile);
}
body.has-tabbar #settings-back { background: var(--ptab-tile); box-shadow: none; }
.sx-tools .icon-button { width: 43px; height: 46px; border-radius: 23px; color: var(--color-text); }
.sx-tools .icon { font-size: 24px; }
/* Hero */
.sx-hero { display: flex; flex-direction: column; align-items: center; padding: 37px 16px 0; }
.sx-avatar { position: relative; width: 92px; height: 92px; font-size: 34px; overflow: visible; }
.sx-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.sx-camera {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 3px solid var(--ptab-page);
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
}
.sx-camera .icon { font-size: 16px; }
.sx-name { max-width: 100%; margin: 9px 0 0; overflow: hidden; font-size: 22px; font-weight: 600; line-height: 30px; white-space: nowrap; text-overflow: ellipsis; }
.sx-sub { margin: 0; font-size: 14px; line-height: 18px; color: var(--color-text-secondary); }
/* Cards: 12 dp in from the edges, 16 dp corners, flush rows, round 28 dp icons. */
body.has-tabbar #settings[data-page="main"] .settings-group,
body.has-tabbar #settings[data-page="search"] .settings-group { margin: 12px 12px 0; padding: 0; overflow: hidden; border-radius: 16px; }
body.has-tabbar #settings[data-page="main"] .settings-group .settings-nav,
body.has-tabbar #settings[data-page="search"] .settings-group .settings-nav {
  gap: 19px;
  min-height: 51px;
  padding: 6px 18px;
  border-radius: 0;
}
body.has-tabbar #settings[data-page="main"] .settings-nav:has(.settings-nav-sub),
body.has-tabbar #settings[data-page="search"] .settings-nav:has(.settings-nav-sub) { min-height: 61px; }
body.has-tabbar .settings-group .settings-icon { width: 28px; height: 28px; border-radius: 50%; }
body.has-tabbar .settings-group .settings-icon .icon { font-size: 18px; }
body.has-tabbar #settings[data-page="main"] .settings-nav-title { font-size: 16px; line-height: 22px; }
body.has-tabbar #settings[data-page="main"] .settings-nav-sub { font-size: 13px; line-height: 18px; color: var(--color-text-secondary); }
.sx-heading { padding: 14px 18px 4px; color: var(--color-primary); font-size: 15px; font-weight: 500; }
.sx-version { margin: 16px 16px 0; color: var(--color-text-secondary); font-size: 13px; line-height: 17px; text-align: center; }
#settings[data-page="main"] .settings-page { padding-bottom: 96px; }
/* Search */
.sx-search-input {
  display: block;
  width: calc(100% - 24px);
  height: 46px;
  margin: 4px 12px 0;
  padding: 0 20px;
  border: 0;
  border-radius: 23px;
  background: var(--ptab-tile);
  color: var(--color-text);
  font: inherit;
  font-size: 17px;
  outline: none;
}
.sx-results[hidden], .sx-empty[hidden] { display: none; }
.sx-empty { text-align: center; }
body.has-tabbar #settings[data-page="search"] .sx-search-input { position: absolute; top: 8px; left: 60px; z-index: 3; width: calc(100% - 66px); margin: 0; }
body.has-tabbar #settings[data-page="search"] .settings-page { padding-top: 4px; }
body.has-tabbar #settings[data-page="main"] #settings-back, body.has-tabbar #settings[data-page="main"] .sx-tools { top: 5px; }

/* ===== Telegram for Android 13.2.1, Calls tab (api33play emulator, 2026-11-08). Sizes in dp. ===== */
#calls-tab[hidden] { display: none; }
#calls-tab { background: var(--ptab-page); }
#calls-tab-body { flex: 1; min-height: 0; overflow-y: auto; }
body.tabbar-shown #calls-tab-body { padding-bottom: 80px; }
#calls-tab > .left-header { position: relative; justify-content: center; min-height: 62px; }
#calls-tab > .left-header h2 { font-size: 20px; font-weight: 500; text-align: center; }
.calls-actions { position: absolute; right: 6px; top: 8px; }
.calls-actions .icon-button { width: 46px; height: 46px; border-radius: 50%; background: var(--ptab-tile); color: var(--color-text); }
.calls-actions .icon { font-size: 24px; }
.calls-select {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px;
  background: var(--ptab-page);
}
.calls-select[hidden] { display: none; }
.calls-select .icon-button { width: 46px; height: 46px; border-radius: 50%; background: var(--ptab-tile); color: var(--color-text); }
.calls-select .icon { font-size: 24px; }
.calls-select-count { flex: 1; font-size: 20px; font-weight: 500; }
.calls-android { position: relative; padding: 4px 0 16px; }
.calls-android .contacts-card { background: var(--ptab-card); }
.calls-create-row { display: flex; align-items: center; gap: 30px; width: 100%; height: 50px; padding: 0 22px; color: #64b5ef; font-size: 16px; text-align: left; }
:root:not([data-theme="dark"]) .calls-create-row { color: var(--color-primary); }
.calls-phone-plus { position: relative; display: grid; place-items: center; width: 26px; height: 26px; }
.calls-phone-plus .icon { font-size: 24px; }
.calls-phone-plus b { position: absolute; top: -6px; right: -6px; font-size: 15px; font-weight: 700; line-height: 1; }
.calls-list .recent-call { display: flex; align-items: center; gap: 14px; width: 100%; height: 56px; padding: 0 4px 0 14px; cursor: pointer; }
.calls-list .recent-call:active { background: var(--color-chat-hover); }
.calls-list .contact-text { flex: 1; }
.calls-list .contact-name { color: var(--color-text); }
.call-direction { display: flex; align-items: center; gap: 4px; }
.calls-dir-arrow { font-size: 13px; font-weight: 700; }
.calls-dir-arrow.out { color: #4fae4e; }
.calls-dir-arrow.in { color: var(--color-text-secondary); }
.call-direction.missed .calls-dir-arrow { color: var(--color-error); }
.call-again { flex: none; width: 48px; height: 48px; color: #64b5ef; }
:root:not([data-theme="dark"]) .call-again { color: var(--color-primary); }
.call-again .icon { font-size: 24px; }
.calls-list .recent-call.picked .contact-avatar { position: relative; }
.calls-empty { padding: 60px 40px 0; text-align: center; }
.calls-empty h3 { margin: 0 0 8px; font-size: 20px; font-weight: 500; }
.calls-empty p { margin: 0; color: var(--color-text-secondary); font-size: 14px; }
.calls-fab { position: fixed; }
#calls-tab[hidden] .calls-fab { display: none; }
.calls-fab .icon { font-size: 22px; }
.calls-fab-plus { position: absolute; top: 9px; right: 10px; font-size: 14px; font-weight: 700; line-height: 1; }
/* New Call: a page over the tab with its own back arrow and search. */
.calls-new {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  background: var(--color-background);
  animation: ptab-fade 0.18s ease-out;
}
.calls-new-head { display: flex; align-items: center; gap: 22px; height: 62px; padding: 0 8px; }
.calls-new-head h2 { margin: 0; font-size: 20px; font-weight: 500; }
.calls-new-back { width: 46px; height: 46px; }
.calls-new-back .icon { font-size: 24px; }
.calls-new-search { margin: 0 12px 8px; background: var(--color-background-secondary); }
.calls-new-list { flex: 1; overflow-y: auto; padding-bottom: 16px; }
.calls-new-list .contact-row { padding: 0 16px; }
body.calls-new-open .tabbar { display: none; }
/* Contacts: Telegram's filled icons. */
/* Only the arrow turns red on a missed call; going out and coming in are both grey, as in Telegram. */
.call-direction.missed { color: var(--color-text-secondary); }
.calls-dir-arrow { display: inline-grid; width: 13px; height: 13px; color: var(--color-text-secondary); }
.calls-dir-arrow svg { width: 13px; height: 13px; }
.calls-dir-arrow.out, .calls-dir-arrow.in { color: var(--color-text-secondary); }
.call-direction.missed .calls-dir-arrow { color: #e5555b; }
.call-again .icon { color: inherit; }
.calls-list .call-again.icon-button { color: #64b5ef; }
:root:not([data-theme="dark"]) .calls-list .call-again.icon-button { color: var(--color-primary); }
.calls-dir-arrow svg { fill: none; }

/* ===== Telegram for Android 13.2.1, chat screen (api33play emulator, 2026-11-08). ===== */
/* Header: back island, title pill, then Call + ⋮ in a private chat or ⋮ alone (a round island) in a group. */
body.has-tabbar .chat-header #search-chat { display: none; }
body.has-tabbar .chat-header > .header-actions { min-width: 46px; justify-content: center; }
body.has-tabbar .chat-header > .header-actions:not(:has(#call-button:not([hidden]))) { width: 46px; padding: 0; }
body.has-tabbar .chat-header > .header-actions .icon-button { color: var(--color-text); }
/* Composer: send-as, emoji, Message, paperclip in the pill; the round record/send button beside it. */
body.has-tabbar #composer #send-as { order: -2; }
body.has-tabbar #composer #emoji-button { order: -1; }
body.has-tabbar #composer #input { order: 0; }
body.has-tabbar #composer #attach { order: 1; }
body.has-tabbar #record[data-mode="round"] .icon { font-size: 24px; }
/* Night: Telegram's dark blue chat, bubbles and panels. */
:root[data-theme="dark"] body.has-tabbar { --color-chat-backdrop: #0f1720; }
:root[data-theme="dark"] body.has-tabbar .chat-header > #back-button,
:root[data-theme="dark"] body.has-tabbar .chat-header > #header-peer,
:root[data-theme="dark"] body.has-tabbar .chat-header > .header-actions { background: #242d39; }
:root[data-theme="dark"] body.has-tabbar #composer .composer-pill { background: #212d3b; }
/* Message selection (long press). */
.msg-select-head { display: none; }
body.has-tabbar .chat-header { position: relative; }
body.has-tabbar .msg-select-head:not([hidden]) {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  animation: ptab-fade 0.15s ease-out;
}
.msg-select-head .msg-select-close { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--color-background); color: var(--color-text); }
.msg-select-pill { display: flex; flex: 1; align-items: center; min-width: 0; height: 46px; padding: 0 16px; border-radius: 23px; background: var(--color-background); font-size: 18px; font-weight: 500; }
.msg-select-tools { display: flex; flex: none; align-items: center; height: 46px; padding: 0 4px; border-radius: 23px; background: var(--color-background); }
.msg-select-tools .icon-button { width: 40px; height: 40px; color: var(--color-text); }
.msg-select-tools .icon-button[hidden] { display: none; }
.msg-select-head .icon { font-size: 24px; }
:root[data-theme="dark"] body.has-tabbar .msg-select-close,
:root[data-theme="dark"] body.has-tabbar .msg-select-pill,
:root[data-theme="dark"] body.has-tabbar .msg-select-tools { background: #242d39; }
body.msg-selecting #messages .bubble:not(.out) { translate: 34px 0; transition: translate 0.18s ease-out; }
body.has-tabbar #messages .bubble { transition: translate 0.18s ease-out; }
.sel-check {
  position: absolute;
  left: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid rgb(255 255 255 / 85%);
  border-radius: 50%;
  pointer-events: none;
  animation: pick-in 0.15s ease-out;
}
.sel-check.on { border-color: transparent; background: #5ec245; color: #fff; }
.sel-check .icon { font-size: 14px; }
body.has-tabbar #messages .bubble.selected { --bubble-background: var(--color-background); background: var(--bubble-background); }
body.has-tabbar #messages .bubble.out.selected { --bubble-background: var(--color-background-own); }
body.has-tabbar #messages .bubble.selected::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgb(94 194 69 / 12%); pointer-events: none; }
/* Reply and Forward replace the composer, as two wide pills. */
body.has-tabbar .select-bar #select-cancel,
body.has-tabbar .select-bar .select-count,
body.has-tabbar .select-bar #select-copy,
body.has-tabbar .select-bar #select-download,
body.has-tabbar .select-bar #select-delete { display: none; }
body.has-tabbar .select-bar:not([hidden]) { display: flex; gap: 8px; padding: 0 6px 8px; background: transparent; box-shadow: none; }
body.has-tabbar .select-bar .button { display: flex; flex: 1; align-items: center; justify-content: center; gap: 10px; height: 46px; border-radius: 23px; background: var(--color-background); color: var(--color-text); font-size: 16px; font-weight: 500; }
:root[data-theme="dark"] body.has-tabbar .select-bar .button { background: #212d3b; }
body.has-tabbar .select-bar .button[hidden] { display: none; }
body.has-tabbar .select-bar .button { text-transform: none; letter-spacing: 0; }
body.has-tabbar .select-bar .button .icon { font-size: 22px; }
body.has-tabbar .select-bar .button span { display: inline; }
body.msg-selecting .chat-header > :not(.msg-select-head) { visibility: hidden; }
/* Attach sheet */
.attach-backdrop { position: fixed; inset: 0; z-index: 40; background: rgb(0 0 0 / 35%); animation: ptab-fade 0.18s ease-out; }
.attach-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 41;
  display: flex;
  flex-direction: column;
  height: min(62vh, 520px);
  border-radius: 18px 18px 0 0;
  background: var(--color-background);
  animation: attach-up 0.22s cubic-bezier(0.2, 0, 0, 1);
}
.attach-sheet.closing { animation: attach-down 0.18s ease-in forwards; }
.attach-backdrop.closing { opacity: 0; transition: opacity 0.18s; }
@keyframes attach-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes attach-down { to { transform: translateY(100%); } }
.attach-handle { align-self: center; width: 36px; height: 4px; margin: 8px 0 6px; border-radius: 2px; background: var(--color-text-secondary); opacity: 0.4; }
.attach-sheet-grid { display: grid; flex: 1; grid-template-columns: repeat(3, 1fr); grid-auto-rows: calc((100vw - 4px) / 3); gap: 2px; overflow-y: auto; }
.attach-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--color-background-secondary); color: var(--color-text); }
.attach-camera { background: #000; color: #fff; }
.attach-tile .icon { font-size: 32px; }
.attach-gallery { grid-column: span 2; color: var(--color-text-secondary); font-size: 14px; }
.attach-tabs { display: flex; gap: 2px; padding: 6px 8px calc(8px + var(--safe-bottom)); overflow-x: auto; scrollbar-width: none; }
.attach-tab { display: flex; flex: none; flex-direction: column; align-items: center; gap: 2px; min-width: 62px; padding: 6px 4px 4px; border-radius: 14px; color: var(--color-text); }
.attach-tab.active { background: rgb(var(--color-primary-rgb) / 14%); color: var(--color-primary); }
.attach-tab-icon .icon { font-size: 24px; }
.attach-tab-label { font-size: 12px; font-weight: 500; white-space: nowrap; }
:root[data-theme="dark"] body.has-tabbar .attach-sheet { background: #1d2733; }
/* Emoji panel: Telegram for Android's centred pill reads Emoji, GIFs, Stickers, with ⌫ at the right. */
body.has-tabbar .panel-tabs { position: relative; display: flex; justify-content: center; gap: 0; padding: 6px 0 8px; }
body.has-tabbar .panel-tab { height: 32px; padding: 0 14px; border-radius: 0; background: var(--color-background-secondary); color: var(--color-text-secondary); font-size: 14px; font-weight: 500; }
body.has-tabbar .panel-tab[data-panel-tab="emoji"] { order: 0; border-radius: 16px 0 0 16px; padding-left: 16px; }
body.has-tabbar .panel-tab[data-panel-tab="gifs"] { order: 1; }
body.has-tabbar .panel-tab[data-panel-tab="stickers"] { order: 2; border-radius: 0 16px 16px 0; padding-right: 16px; }
body.has-tabbar .panel-tab.active { color: var(--color-text); }
body.has-tabbar .panel-tab.active::before { content: ""; position: absolute; inset: 3px 4px; z-index: -1; border-radius: 13px; background: rgb(255 255 255 / 10%); }
:root:not([data-theme="dark"]) body.has-tabbar .panel-tab.active::before { background: rgb(0 0 0 / 8%); }
body.has-tabbar .panel-tab { position: relative; z-index: 0; }
body.has-tabbar #emoji-delete { position: absolute; right: 10px; top: 6px; order: 3; }
:root[data-theme="dark"] body.has-tabbar .panel-tab { background: #2b3644; }

/* ===== Telegram for Android 13.2.1, New Message / New Group / New Channel (api33play, 2026-11-08). ===== */
.nc-page {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: var(--ptab-page, var(--color-background-secondary));
  animation: nc-in 0.22s cubic-bezier(0.2, 0, 0, 1);
}
.nc-page.nc-leaving { animation: nc-out 0.18s ease-in forwards; }
.nc-page.nc-covered { visibility: hidden; }
@keyframes nc-in { from { transform: translateX(30%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes nc-out { to { transform: translateX(30%); opacity: 0; } }
body.nc-open .tabbar { display: none; }
.nc-head { position: relative; display: flex; flex: none; align-items: center; gap: 16px; min-height: 62px; padding: 8px 6px; }
.nc-back { flex: none; width: 46px; height: 46px; border-radius: 50%; color: var(--color-text); }
.nc-centered .nc-back { background: var(--ptab-tile); }
.nc-back .icon { font-size: 24px; }
.nc-titles { min-width: 0; }
.nc-centered .nc-titles { position: absolute; left: 60px; right: 60px; text-align: center; pointer-events: none; }
.nc-title { margin: 0; overflow: hidden; font-size: 20px; font-weight: 500; line-height: 26px; white-space: nowrap; text-overflow: ellipsis; }
.nc-sub { font-size: 14px; color: var(--color-text-secondary); line-height: 18px; }
.nc-sub[hidden] { display: none; }
.nc-tools { position: absolute; right: 6px; top: 8px; display: flex; align-items: center; height: 46px; padding: 0 4px; border-radius: 23px; background: var(--ptab-tile); }
.nc-tools .icon-button { width: 38px; height: 38px; color: var(--color-text); }
.nc-tools .icon { font-size: 24px; }
.nc-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0 96px; }
.nc-card { background: var(--ptab-card, var(--color-background)); }
.nc-search { margin: 0 12px 10px; background: var(--ptab-tile); }
.nc-search[hidden] { display: none; }
.nc-list { background: var(--color-background); }
.nc-list .contact-row, .nc-card .contact-row { padding: 0 14px; }
.nc-person .contact-avatar { position: relative; overflow: visible; }
.nc-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; }
.nc-chips[hidden] { display: none; }
.nc-chip { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 0; border-radius: 16px; background: var(--ptab-tile); color: var(--color-text); font-size: 14px; }
.nc-chip-avatar { width: 32px; height: 32px; font-size: 13px; }
.nc-fab { position: absolute; right: 20px; bottom: 24px; transform: none; }
.nc-fab .icon { font-size: 24px; }
.nc-name-card { display: flex; align-items: center; gap: 16px; margin: 0 12px 12px; padding: 16px; background: var(--ptab-card, var(--color-background)); }
.nc-photo { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--color-primary) center / cover no-repeat; color: #fff; }
.nc-photo .icon { font-size: 28px; }
.nc-photo.has-photo .icon { visibility: hidden; }
.nc-name, .nc-about { flex: 1; min-width: 0; height: 40px; border: 0; border-bottom: 2px solid var(--color-primary); background: none; color: var(--color-text); font: inherit; font-size: 18px; outline: none; }
.nc-about { width: calc(100% - 32px); margin: 8px 16px; border-bottom-width: 1px; border-color: var(--color-borders); font-size: 16px; }
.nc-shake { animation: nc-shake 0.35s; }
@keyframes nc-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.nc-row { display: flex; align-items: center; gap: 22px; width: 100%; height: 50px; padding: 0 18px; color: var(--color-text); font-size: 16px; text-align: left; }
.nc-row .icon { font-size: 24px; color: var(--color-text-secondary); }
.nc-row-label { flex: 1; }
.nc-row-value { color: var(--color-primary); }
.nc-note { margin: 8px 24px 16px; color: var(--color-text-secondary); font-size: 14px; line-height: 1.35; }
.nc-intro-page .nc-body { display: flex; flex-direction: column; align-items: center; padding: 20px 32px; text-align: center; }
.nc-art { position: relative; display: grid; place-items: center; width: 180px; height: 220px; margin: 20px 0 40px; border: 10px solid var(--ptab-tile); border-radius: 26px; background: #8ec5f7; color: #fff; }
.nc-art .icon { font-size: 72px; }
.nc-art-bubble { position: absolute; top: 10px; left: -40px; padding: 18px 16px; border: 4px solid #fff; border-radius: 50%; background: #3a6f9f; font-size: 18px; }
.nc-intro-title { margin: 0 0 14px; font-size: 22px; font-weight: 500; }
.nc-intro-text { margin: 0 0 40px; color: var(--color-text-secondary); font-size: 15px; line-height: 1.4; }
.nc-wide { width: 100%; height: 48px; border-radius: 24px; background: linear-gradient(90deg, #229af0, #4fb5f5); color: #fff; font-size: 16px; font-weight: 500; }
.nc-name:focus-visible, .nc-about:focus-visible, .nc-search input:focus-visible { outline: none; }
.nc-page:not(.nc-centered):not(.nc-intro-page) .nc-list { background: transparent; }
body .nc-page .nc-fab { right: 20px; bottom: 24px; width: 56px; height: 56px; }

/* ===== Telegram for Android 13.2.1, chat profile (api33play emulator, 2026-11-08). ===== */
:root[data-theme="dark"] body.has-tabbar #right,
:root[data-theme="dark"] body.has-tabbar #right .right-header { background: var(--ptab-page); }
:root[data-theme="dark"] body.has-tabbar #right .details,
:root[data-theme="dark"] body.has-tabbar #right .info-tile,
:root[data-theme="dark"] body.has-tabbar #right .shared-section,
:root[data-theme="dark"] body.has-tabbar #right .members { background: var(--ptab-card); }
:root[data-theme="dark"] body.has-tabbar #right .right-header .icon-button { background: var(--ptab-tile); }
body.has-tabbar #right .info-actions { display: none; }
body.has-tabbar #right .profile .avatar-large { width: 96px; height: 96px; font-size: 36px; }
body.has-tabbar #right .profile h3 { font-size: 20px; font-weight: 500; }
body.has-tabbar #right .profile p { font-size: 14px; color: var(--ptab-status); }
/* The info rows: value over label, no icons. */
body.has-tabbar #right .details .detail-row > .icon,
body.has-tabbar #right .details .detail-icon { display: none; }
body.has-tabbar #right .right-header { position: sticky; top: 0; z-index: 3; }
.right-mini { display: none; }
body.has-tabbar #right .right-mini { display: block; flex: 1; min-width: 0; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s; pointer-events: none; }
body.has-tabbar #right.right-folded .right-mini { opacity: 1; transform: none; }
.right-mini-name { overflow: hidden; font-size: 18px; font-weight: 500; line-height: 24px; white-space: nowrap; text-overflow: ellipsis; }
.right-mini-status { font-size: 14px; color: var(--ptab-status); }
body.has-tabbar #right .shared-tabs { position: sticky; top: 62px; z-index: 2; }

/* ===== Telegram for Android 13.2.1, settings pages: section titles inside their card, values on the right. ===== */
body.has-tabbar .settings-page > .settings-heading { background: transparent; }
body.has-tabbar .settings-page > .settings-heading:has(+ .settings-group),
body.has-tabbar .settings-page > .settings-heading:has(+ .settings-list) {
  margin: 12px 12px 0;
  padding: 14px 18px 4px;
  border-radius: 16px 16px 0 0;
  background: var(--ptab-card, var(--color-background));
  font-size: 15px;
}
body.has-tabbar .settings-page > .settings-heading + :is(.settings-group, .settings-list) { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
body.has-tabbar .settings-page > .settings-group { background: var(--ptab-card, var(--color-background)); }
body.has-tabbar .settings-page > .settings-note { margin: 8px 24px 4px; }
body.has-tabbar .settings-group .sx-heading { padding: 14px 18px 4px; }
body.has-tabbar .settings-group .setting-row { min-height: 50px; padding: 10px 18px; font-size: 16px; }
.sx-vrow { display: flex; align-items: center; gap: 20px; width: 100%; min-height: 52px; padding: 0 18px; border-radius: 0; font-size: 16px; text-align: left; }
.sx-vrow > .icon { flex: none; font-size: 24px; color: var(--color-text-secondary); }
.sx-vrow-title { flex: 1; min-width: 0; }
.sx-vrow-value { flex: none; color: #64b5ef; font-size: 16px; }
:root:not([data-theme="dark"]) .sx-vrow-value { color: var(--color-primary); }
body.has-tabbar .settings-page > .settings-group { border-radius: 16px; }
body.has-tabbar .settings-page > .settings-heading + .settings-group { border-radius: 0 0 16px 16px; }

/* ===== Telegram for Android 13.2.1, media viewer (api33play emulator, 2026-11-08). ===== */
.lb-play, .lb-bottom, .lb-line, .lb-gear { display: none; }
body.has-tabbar .lightbox.lb-android { background: rgb(0 0 0 / var(--lb-fade, 1)); backdrop-filter: none; touch-action: none; }
.lb-android .lightbox-top {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 56px;
  padding: 0 4px;
  background: linear-gradient(rgb(0 0 0 / 40%), transparent);
  transition: opacity 0.2s;
}
.lb-android .lightbox-actions { display: contents; }
.lb-android #lightbox-close { order: -1; }
.lb-android #lightbox-close svg { display: none; }
.lb-android #lightbox-close::before { content: ""; width: 24px; height: 24px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11H7.8l5.6-5.6L12 4l-8 8 8 8 1.4-1.4L7.8 13H20z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11H7.8l5.6-5.6L12 4l-8 8 8 8 1.4-1.4L7.8 13H20z'/%3E%3C/svg%3E") center / contain no-repeat; }
.lb-android .lightbox-sender { order: 0; flex: 1; min-width: 0; padding-left: 12px; }
.lb-android #lightbox-avatar { display: none; }
.lb-android .lightbox-name { font-size: 18px; font-weight: 500; }
.lb-android .lightbox-date { font-size: 14px; opacity: 0.85; }
.lb-android #lightbox-download, .lb-android #lightbox-delete, .lb-android #lightbox-speed { display: none; }
.lb-android #lightbox-forward { order: 1; }
.lb-android .lb-gear { order: 2; }
.lb-android.lb-video .lb-gear { display: grid; }
.lb-android #lightbox-more { order: 3; }
.lb-android .lightbox-action { display: grid; place-items: center; width: 48px; height: 48px; color: #fff; }
.lb-android .lightbox-action .icon { font-size: 24px; }
.lb-android .lightbox-count { position: absolute; top: 62px; left: 50%; z-index: 3; padding: 2px 10px; border-radius: 12px; background: rgb(0 0 0 / 35%); color: #fff; font-size: 14px; transform: translateX(-50%); transition: opacity 0.2s; }
.lb-android .lightbox-nav { display: none; }
.lb-android #lightbox-image, .lb-android #lightbox-video { max-width: 100%; max-height: 100%; transform-origin: center; will-change: transform; }
.lb-android .lb-play { position: absolute; top: 50%; left: 50%; z-index: 3; display: none; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgb(0 0 0 / 45%); color: #fff; transform: translate(-50%, -50%); transition: opacity 0.2s; }
.lb-android.lb-video .lb-play { display: grid; }
.lb-android .lb-play .icon { font-size: 34px; }
.lb-android .lb-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: none; align-items: center; gap: 14px; padding: 12px 16px calc(14px + var(--safe-bottom)); background: linear-gradient(transparent, rgb(0 0 0 / 45%)); color: #fff; transition: opacity 0.2s; }
.lb-android.lb-video .lb-bottom { display: flex; }
.lb-seek { flex: 1; height: 20px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; }
.lb-seek::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(90deg, #fff var(--fill, 0%), rgb(255 255 255 / 35%) var(--fill, 0%)); }
.lb-seek::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5.5px; border-radius: 50%; background: #fff; -webkit-appearance: none; }
.lb-time { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-android .lb-line { position: absolute; left: 16px; right: 16px; bottom: calc(10px + var(--safe-bottom)); z-index: 2; display: none; height: 2px; background: #fff; opacity: 0; transform: scaleX(0); transform-origin: left; }
.lb-android.lb-video.lb-hidden .lb-line { display: block; opacity: 0.8; }
.lb-android.lb-hidden .lightbox-top, .lb-android.lb-hidden .lightbox-count, .lb-android.lb-hidden .lb-play, .lb-android.lb-hidden .lb-bottom, .lb-android.lb-hidden .lightbox-caption { opacity: 0; pointer-events: none; }
.lb-android .lightbox-caption { position: absolute; left: 0; right: 0; bottom: 64px; z-index: 3; padding: 8px 16px; background: rgb(0 0 0 / 45%); }

/* ===== Telegram for Android 13.2.1, voice messages and the audio bar (api33play emulator, 2026-11-08). ===== */
body.has-tabbar #messages .voice-speed { display: none; }
body.has-tabbar .voice-time { font-variant-numeric: tabular-nums; }
body.has-tabbar .lb-android:not(.lb-video) .lb-gear { display: none; }
body.has-tabbar #player-bar:not([hidden]) {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  margin: 6px 6px 0;
  padding: 0 4px;
  overflow: hidden;
  border-radius: 20px;
  background: var(--ptab-card, var(--color-background));
  box-shadow: none;
}
body.has-tabbar #player-bar #player-prev,
body.has-tabbar #player-bar #player-next,
body.has-tabbar #player-bar #player-profile,
body.has-tabbar #player-bar #player-list,
body.has-tabbar #player-bar .player-volume,
body.has-tabbar #player-bar #player-order { display: none; }
body.has-tabbar #player-bar #player-toggle { width: 36px; height: 36px; color: #64b5ef; }
:root:not([data-theme="dark"]) body.has-tabbar #player-bar #player-toggle { color: var(--color-primary); }
body.has-tabbar #player-bar .player-text { display: flex; flex: 1; align-items: baseline; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; text-align: left; }
body.has-tabbar #player-bar .player-title { flex: none; max-width: 55%; overflow: hidden; font-size: 16px; font-weight: 500; text-overflow: ellipsis; }
body.has-tabbar #player-bar .player-sub { overflow: hidden; color: var(--color-text-secondary); font-size: 16px; text-overflow: ellipsis; }
body.has-tabbar #player-bar #player-speed { display: grid; flex: none; place-items: center; min-width: 30px; height: 22px; margin: 0 6px; padding: 0 3px; border: 1.6px solid currentColor; border-radius: 5px; background: none; color: var(--color-text-secondary); font-size: 12px; font-weight: 700; line-height: 1; }
body.has-tabbar #player-bar #player-speed.fast { color: #64b5ef; }
body.has-tabbar #player-bar #player-close { width: 36px; height: 36px; color: var(--color-text-secondary); }
body.has-tabbar #player-bar .player-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #3a9be8; transform-origin: left; }
body.has-tabbar #player-bar.on-list { margin: 6px 11px 2px; }
body.has-tabbar #player-bar #player-speed { display: grid !important; }
body.has-tabbar #player-bar .player-text { flex-direction: row; align-items: center; padding: 0 4px; }
/* Saved Messages' avatar: Telegram's blue gradient (the painted avatar colour is inline, hence !important). */
:root[data-theme="dark"] body.has-tabbar .saved-avatar { background: linear-gradient(#66bbf8, #45a3e4) !important; }
:root:not([data-theme="dark"]) body.has-tabbar .saved-avatar { background: linear-gradient(#72d5fd, #2a9ef1) !important; }

/* Composer (Telegram for Android 13.2.1): the pill holds emoji, Message and 📎; the round record/send button stands apart,
   the same 46 dp height and centred on the same line; nothing behind them. */
body.has-tabbar #composer { gap: 6px; align-items: flex-end; padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
body.has-tabbar #composer .composer-pill { min-height: 46px; padding: 3px 4px; border-radius: 23px; background: var(--color-background); box-shadow: 0 1px 3px rgb(0 0 0 / 12%); align-items: flex-end; }
body.has-tabbar #composer .composer-pill .composer-button { width: 40px; height: 40px; }
body.has-tabbar #composer .send { width: 46px; height: 46px; border-radius: 50%; }
body.has-tabbar #composer .composer-pill { padding: 0 4px; }
body.has-tabbar #composer .composer-pill .composer-button { height: 46px; }
body.has-tabbar #composer #input { min-height: 46px; padding-top: 12px; padding-bottom: 12px; line-height: 22px; }
/* The go-down button (and the mention / reaction jumps above it) on the record button's centre line, as in Telegram. */
body.has-tabbar #to-latest, body.has-tabbar .jump-stack { right: 8px; }
body.has-tabbar #to-latest, body.has-tabbar .jump-stack .jump-button { width: 46px; height: 46px; }
#calls-tab .calls-back { position: absolute; left: 6px; top: 8px; width: 46px; height: 46px; border-radius: 50%; background: var(--ptab-tile); color: var(--color-text); }
#calls-tab .calls-back .icon { font-size: 24px; }
#calls-tab .calls-fab { bottom: 24px; }

/* ===== Telegram for Android 13.2.1, Account (Edit Info). ===== */
.sx-done { display: none; }
body.has-tabbar #settings[data-page="profile"] .sx-done:not([hidden]) { position: absolute; top: 8px; right: 6px; display: grid; width: 46px; height: 46px; border-radius: 50%; background: var(--ptab-tile); color: #64b5ef; }
.sx-done .icon { font-size: 24px; }
.sx-inline { display: block; width: calc(100% - 36px); height: 52px; margin: 0 18px; padding: 0; border: 0; border-bottom: 1px solid var(--color-borders); background: none; color: var(--color-text); font: inherit; font-size: 16px; outline: none; }
.settings-group .sx-inline:last-child { border-bottom: 0; }
.sx-inline:focus-visible { outline: none; }
.sx-inline-row { display: flex; align-items: center; padding-right: 18px; }
.sx-inline-row .sx-inline { flex: 1; border-bottom: 0; }
.sx-counter { color: var(--color-text-secondary); font-size: 15px; }
body.has-tabbar .settings-group .sx-info-row { display: flex; align-items: center; gap: 19px; min-height: 56px; padding: 6px 18px; border-radius: 0; text-align: left; }
body.has-tabbar .sx-info-row .settings-icon { width: 28px; height: 28px; border-radius: 8px; }
.sx-grow { flex: 1; }
.sx-link { padding: 0; color: #64b5ef; font: inherit; }
:root:not([data-theme="dark"]) .sx-link { color: var(--color-primary); }
body.has-tabbar .settings-group .sx-account { display: flex; align-items: center; gap: 22px; width: 100%; min-height: 52px; padding: 0 18px; border-radius: 0; font-size: 16px; text-align: left; }
.sx-account .icon { font-size: 24px; }
.sx-account.sx-blue { color: #64b5ef; }
.sx-account.sx-red { color: #e5555b; }
body.has-tabbar #settings[data-page="profile"] #name-colors { padding: 8px 18px 14px; }

/* ===== Telegram for Android 13.2.1, story camera (Add a post / My Story). ===== */
.icon.icon-flash::before, .icon.icon-flash-off::before { content: ""; display: block; width: 1em; height: 1em; background: currentColor; }
.icon.icon-flash::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E") center / contain no-repeat; }
.icon.icon-flash-off::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M13 2.5 4.5 13.5h6.5l-1 8 8.5-11.5h-6.5z'/%3E%3Cpath d='M3 3l18 18' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M13 2.5 4.5 13.5h6.5l-1 8 8.5-11.5h-6.5z'/%3E%3Cpath d='M3 3l18 18' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.story-camera { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: #000; color: #fff; animation: attach-up 0.22s cubic-bezier(0.2, 0, 0, 1); }
body.camera-open .tabbar { display: none; }
.cam-frame { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 0 0 18px 18px; background: #111; }
.cam-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam-video.mirrored { transform: scaleX(-1); }
.cam-top { position: absolute; inset: 0 0 auto 0; z-index: 2; display: flex; align-items: center; gap: 6px; height: 64px; padding: 6px 8px; background: linear-gradient(rgb(0 0 0 / 40%), transparent); }
.cam-round { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; }
.cam-round .icon { font-size: 24px; }
.cam-back { margin-right: auto; }
.cam-flash.on { color: #ffd84d; }
.cam-timer { position: absolute; left: 50%; top: 18px; display: none; padding: 3px 10px; border-radius: 12px; background: rgb(0 0 0 / 35%); font-size: 14px; font-variant-numeric: tabular-nums; transform: translateX(-50%); }
.story-camera[data-mode="video"] .cam-timer, .story-camera.cam-recording .cam-timer { display: block; }
.story-camera.cam-recording .cam-timer { background: #e5393566; }
.cam-live-who { display: none; align-items: center; gap: 10px; position: absolute; left: 56px; top: 12px; }
.cam-live-who .avatar { width: 36px; height: 36px; font-size: 14px; }
.cam-live-text { display: flex; flex-direction: column; font-size: 14px; line-height: 17px; }
.cam-live-text span { font-size: 12px; opacity: 0.7; }
.story-camera[data-mode="live"] .cam-live-who { display: flex; }
.story-camera[data-mode="live"] .cam-flash { display: none; }
.cam-controls { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; }
.cam-gallery { width: 42px; height: 42px; border-radius: 8px; background: rgb(255 255 255 / 20%) center / cover no-repeat; }
.cam-gallery.thumb .icon { visibility: hidden; }
.cam-shutter { width: 76px; height: 76px; border: 5px solid #fff; border-radius: 50%; background: rgb(255 255 255 / 85%); transition: transform 0.15s, background 0.2s; }
.cam-shutter:active { transform: scale(0.92); }
.story-camera[data-mode="video"] .cam-shutter { background: #f43c3c; }
.story-camera.cam-recording .cam-shutter { background: #f43c3c; transform: scale(1.12); border-color: rgb(255 255 255 / 60%); }
.cam-flip { width: 44px; height: 44px; background: rgb(255 255 255 / 25%); }
.cam-start-live { display: none; flex: 1; height: 48px; border-radius: 24px; background: #d83f58; color: #fff; font-size: 16px; font-weight: 500; }
.story-camera[data-mode="live"] .cam-controls > :not(.cam-start-live) { display: none; }
.story-camera[data-mode="live"] .cam-start-live { display: block; }
.story-camera[data-mode="live"] .cam-controls { padding: 0 14px; }
.cam-modes { display: flex; flex: none; justify-content: center; gap: 8px; height: 96px; padding: 16px 0 calc(16px + var(--safe-bottom)); }
.cam-mode { height: 34px; padding: 0 16px; border-radius: 17px; color: #fff; font-size: 15px; font-weight: 500; }
.cam-mode.active { background: rgb(255 255 255 / 18%); }
.cam-flash-screen { position: absolute; inset: 0; z-index: 70; background: #fff; opacity: 0; pointer-events: none; transition: opacity 0.1s; }
.story-camera.cam-screen-flash .cam-flash-screen { opacity: 0.95; }
.story-camera.cam-shot .cam-frame { animation: ptab-fade 0.2s; }
.cam-denied-box { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px; text-align: center; color: rgb(255 255 255 / 75%); }
.cam-denied-box .icon { font-size: 48px; }
.story-camera.cam-denied .cam-denied-box { display: flex; }
.cam-editor { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; justify-content: flex-end; background: #000; }
.cam-editor-media { position: absolute; inset: 0 0 96px 0; width: 100%; height: calc(100% - 96px); border-radius: 0 0 18px 18px; object-fit: cover; }
.cam-editor-back { position: absolute; top: 10px; left: 8px; background: rgb(0 0 0 / 30%); }
.cam-audience { position: absolute; top: 18px; left: 50%; padding: 5px 14px; border-radius: 15px; background: rgb(0 0 0 / 40%); color: #fff; font-size: 14px; transform: translateX(-50%); }
.cam-editor-bar { position: relative; display: flex; align-items: center; gap: 10px; height: 96px; padding: 0 12px calc(var(--safe-bottom)); }
.cam-caption { flex: 1; height: 46px; padding: 0 18px; border: 0; border-radius: 23px; background: rgb(255 255 255 / 12%); color: #fff; font: inherit; font-size: 16px; outline: none; }
.cam-post { display: grid; flex: none; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #229af0; color: #fff; }
.cam-post .icon { font-size: 26px; }
.cam-post.busy { opacity: 0.6; }

/* ===== Telegram for Android 13.2.1, stories row at the top of Chats. ===== */
body.has-tabbar .android-head .stories-toggle { display: none !important; }
body.has-tabbar #stories:not([hidden]) { display: flex; gap: 4px; padding: 6px 8px 2px; overflow-x: auto; scrollbar-width: none; max-height: 100px; transition: max-height 0.22s ease, opacity 0.18s ease, padding 0.22s ease; }
body.has-tabbar.chats-search-folded #stories, body.has-tabbar.chats-selecting #stories { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; overflow: hidden; }
body.has-tabbar .story-chip { display: flex; flex: none; flex-direction: column; align-items: center; gap: 4px; width: 70px; padding: 0; background: none; }
body.has-tabbar .story-chip .avatar { position: relative; width: 58px; height: 58px; padding: 0; overflow: visible; font-size: 22px; box-shadow: 0 0 0 2.5px var(--color-background), 0 0 0 4.5px #8b97a2; }
body.has-tabbar .story-chip .avatar img { border-radius: 50%; }
body.has-tabbar .story-chip.unseen .avatar { box-shadow: 0 0 0 2.5px var(--color-background), 0 0 0 4.5px #34c76f; background-clip: padding-box; }
body.has-tabbar .story-chip.unseen .avatar::after { content: ""; position: absolute; inset: -4.5px; z-index: -1; border-radius: 50%; background: linear-gradient(225deg, #34c76f, #3497ff); }
body.has-tabbar .story-chip.unseen .avatar { box-shadow: 0 0 0 2.5px var(--color-background); }
body.has-tabbar .story-add .avatar { box-shadow: none; }
.story-plus { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid var(--color-background); border-radius: 50%; background: #229af0; color: #fff; font-size: 16px; font-weight: 700; line-height: 1; }
body.has-tabbar .story-name { max-width: 68px; overflow: hidden; color: var(--color-text); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
body.has-tabbar .story-chip.seen .story-name { color: var(--color-text-secondary); }
/* The story ring: a gradient (unseen) or grey (seen) ring drawn over the avatar's edge, a gap of the page colour inside. */
body.has-tabbar .story-chip .avatar, body.has-tabbar .story-chip.unseen .avatar { box-shadow: none; }
body.has-tabbar .story-chip:not(.story-add) .avatar::after {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: 1;
  border: 2.5px solid transparent;
  border-radius: 50%;
  background: linear-gradient(#8b97a2, #8b97a2) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
body.has-tabbar .story-chip.unseen:not(.story-add) .avatar::after { background: linear-gradient(225deg, #34c76f, #3497ff) border-box; }
body.has-tabbar #stories { padding-top: 10px; }

/* ===== Telegram for Android 13.2.1, profile shared lists. ===== */
body.has-tabbar #right .shared-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px; margin: 6px 0 0; padding: 0; border-radius: 0; background: transparent; }
body.has-tabbar #right .shared-grid > * { aspect-ratio: 1; width: 100%; height: auto; border-radius: 0; overflow: hidden; }
body.has-tabbar #right .shared-grid img, body.has-tabbar #right .shared-grid video { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.tg-list-card { margin: 6px 12px 12px; overflow: hidden; border-radius: 16px; background: var(--ptab-card, var(--color-background)); }
.tg-list-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 6px 14px; text-align: left; color: var(--color-text); }
.tg-list-row + .tg-list-row { border-top: 0; }
.tg-list-play { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #3a9be8; color: #fff; }
.tg-list-play svg, .tg-list-play .icon { width: 22px; height: 22px; font-size: 22px; fill: #fff; }
.tg-file-badge { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 8px; color: #fff; font-size: 13px; font-weight: 700; text-transform: lowercase; }
.tg-list-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.tg-list-title { overflow: hidden; font-size: 16px; font-weight: 500; line-height: 21px; white-space: nowrap; text-overflow: ellipsis; }
.tg-list-sub { overflow: hidden; color: var(--color-text-secondary); font-size: 14px; line-height: 19px; white-space: nowrap; text-overflow: ellipsis; }
body.has-tabbar #right .shared-row { margin: 0 12px 8px; }
.tg-list-text .voice-unplayed, .tg-list-text .voice-speed { display: none !important; }
body.has-tabbar #right .shared .tg-list-card { margin: 6px 0 12px; }
body.has-tabbar .android-head #stories { order: 3; flex: 1 1 100%; margin: 0 -6px 0 -11px; }
body.has-tabbar .android-head .search { order: 4; }

/* Messages scroll under the floating header islands and the status bar, and are seen between the islands, as in Telegram
   for Android (2026-11-09, user's screenshot); they used to be cut at the islands' lower edge. */
body.has-tabbar #messages { clip-path: none; }
.story-camera.cam-denied .cam-video { visibility: hidden; }
.service-message > .saved-empty { display: flex; flex-direction: column; gap: 6px; max-width: 270px; padding: 14px 18px; border-radius: 16px; text-align: left; }
.saved-empty > b { font-weight: 500; text-align: center; }
.saved-empty > span::before { content: "•"; margin-right: 8px; }

/* Android app (2026-11-09): the page lies under the status and navigation bars instead of between two plain strips, and
   those bars show the app through a light blur (MainActivity reports their heights; browsers use the safe area). */
:root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --sys-scrim: rgb(255 255 255 / 10%); }
:root[data-theme="dark"] { --sys-scrim: rgb(0 0 0 / 8%); }
.sys-scrim { position: fixed; z-index: 2147483000; left: 0; right: 0; display: none; pointer-events: none; background: var(--sys-scrim); -webkit-backdrop-filter: blur(3px) saturate(1.15); backdrop-filter: blur(3px) saturate(1.15); }
#sys-top { top: 0; height: var(--safe-top); }
#sys-bottom { bottom: 0; height: var(--safe-bottom); }
html.sys-bars .sys-scrim { display: block; }
@media (max-width: 600px) {
  html.sys-bars #left { padding-top: var(--safe-top); }
  html.sys-bars #chat-list { padding-bottom: calc(0.5rem + var(--safe-bottom)); }
  html.sys-bars body.tabbar-shown #chat-list { padding-bottom: calc(72px + var(--safe-bottom)); }
  html.sys-bars body.tabbar-shown .settings-page, html.sys-bars body.tabbar-shown #contacts-tab-body, html.sys-bars body.tabbar-shown #calls-tab-body { padding-bottom: calc(80px + var(--safe-bottom)); }
  html.sys-bars .tabbar { height: calc(72px + var(--safe-bottom)); padding-bottom: calc(8px + var(--safe-bottom)); }
  html.sys-bars body.tabbar-shown .fab { bottom: calc(78px + var(--safe-bottom)); }
  html.sys-bars body.has-tabbar #camera-fab { bottom: calc(138px + var(--safe-bottom)); }
  html.sys-bars .composer-wrap { bottom: calc(var(--panel-gap) + var(--safe-bottom)); }
  /* Pages laid over the list (2026-11-09): their buttons sat under the status bar. A transparent top border moves the page,
     its absolutely placed buttons included, below the bar, while its background still runs under the bar. */
  html.sys-bars :is(#settings, #contacts-tab, #calls-tab, #right, .nc-page) { border-top: var(--safe-top) solid transparent; }
  html.sys-bars .cam-top { height: calc(64px + var(--safe-top)); padding-top: calc(6px + var(--safe-top)); }
}

/* Stories fold away (2026-11-09, Telegram for Android): hidden by default as a stack of small avatars beside the title,
   pulled out from the top of the list. --stories-p (0…1) follows the finger; the classes animate the rest of the way. */
body.has-tabbar .android-head #stories:not([hidden]) {
  --p: var(--stories-p, 0);
  max-height: calc(var(--p) * 100px);
  padding-top: calc(var(--p) * 10px);
  padding-bottom: calc(var(--p) * 2px);
  opacity: min(1, calc(var(--p) * 1.6));
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.2, 0.9, 0.3, 1), padding 0.3s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.22s ease;
}
body.has-tabbar.stories-open .android-head #stories:not([hidden]) { --p: 1; overflow-x: auto; }
body.has-tabbar.stories-dragging .android-head #stories:not([hidden]) { transition: none; }
body.has-tabbar .android-head #stories .story-chip {
  transform: translateY(calc((1 - var(--p)) * -34px)) scale(calc(0.4 + var(--p) * 0.6));
  transform-origin: 50% 0;
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
}
body.has-tabbar.stories-dragging .android-head #stories .story-chip { transition: none; }
body.has-tabbar .android-head #stories .story-chip:nth-child(n + 2) { transition-delay: 0.02s; }
body.has-tabbar .android-head #stories .story-chip:nth-child(n + 3) { transition-delay: 0.04s; }
body.has-tabbar.chats-search-folded .android-head #stories, body.has-tabbar.chats-selecting .android-head #stories { max-height: 0 !important; }
.stories-stack { display: none; }
body.has-tabbar .android-head .stories-stack { display: flex; align-items: center; order: 0; align-self: center; margin-inline-start: 10px; padding: 4px; background: none; border-radius: 14px; opacity: calc(1 - var(--stories-pp, 0)); transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1); }
body.has-tabbar.stories-open .android-head .stories-stack, body.has-tabbar.stories-dragging .android-head .stories-stack { opacity: 0; transform: translateY(14px) scale(1.4); pointer-events: none; }
body.has-tabbar.chats-selecting .android-head .stories-stack { visibility: hidden; }
.stories-stack[hidden] { display: none !important; }
.stories-mini { position: relative; width: 26px; height: 26px; flex: none; font-size: 11px; border: 2px solid var(--color-background); border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1.5px #8b97a2; }
.stories-mini.unseen { box-shadow: 0 0 0 1.5px #34c76f; }
.stories-mini + .stories-mini { margin-inline-start: -9px; }
.stories-mini::after { display: none !important; }
body.has-tabbar .android-head .app-title { flex: none; }
body.has-tabbar .android-head .stories-stack { flex: 1; justify-content: flex-start; min-width: 0; height: 40px; }
body.has-tabbar .android-head .stories-stack.empty { pointer-events: none; }

/* A video message, sticker or other bare bubble has no background, so the bubble shadow drew a thin dark frame around it
   in Night Mode (2026-11-09). Only the circle or sticker itself shows, as in Telegram. */
.bubble.bare, :root[data-theme="dark"] .bubble.bare, body.has-tabbar .bubble.bare { box-shadow: none !important; }
.bubble.bare::before, .bubble.bare::after { box-shadow: none !important; }
.round-video { background: transparent; clip-path: circle(50% at 50% 50%); }
.round-video:not(.loaded) { background: rgb(0 0 0 / 12%); }
.round-video video, .round-video .gif-thumbnail { transform: scale(1.02); }
#chat-list { overscroll-behavior-y: contain; }

/* Chat search on Android (2026-11-09, user's screenshot of Telegram for Android): the title, stories and folders give way
   to the field with ✕, the filters become pills in a rounded track, an empty search shows the people you talk to and
   the chats picked from search under "Recent". */
.search-close { display: none; }
body.has-tabbar.chats-searching .android-head .search-close { display: grid; flex: none; width: 36px; height: 36px; margin-inline-end: -10px; color: var(--color-text-secondary); }
body.has-tabbar.chats-searching .android-head .search-close .icon { font-size: 22px; }
body.has-tabbar.chats-searching .android-head :is(.app-title, #menu-button, .stories-stack, #stories, .android-search-button, #stories-toggle) { display: none !important; }
body.has-tabbar.chats-searching .android-head .search { max-height: 52px !important; margin-top: 4px !important; opacity: 1 !important; pointer-events: auto !important; }
body.has-tabbar.chats-searching #folders { display: none !important; }
body.has-tabbar #search-tabs { margin: 8px 11px 4px; padding: 4px; gap: 2px; border: 0; border-radius: 22px; background: var(--color-background-secondary); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
:root[data-theme="dark"] body.has-tabbar #search-tabs { background: #2c2c2c; }
body.has-tabbar #search-tabs::-webkit-scrollbar { display: none; }
body.has-tabbar #search-tabs .tab-marker { display: none; }
body.has-tabbar #search-tabs .folder-tab { flex: none; height: 32px; padding: 0 14px; border: 0; border-radius: 16px; font-size: 15px; font-weight: 500; color: var(--color-text-secondary); }
body.has-tabbar #search-tabs .folder-tab::after { display: none; }
body.has-tabbar #search-tabs .folder-tab.active { background: rgb(var(--color-primary-rgb) / 16%); color: var(--color-primary); }
:root[data-theme="dark"] body.has-tabbar #search-tabs .folder-tab.active { color: #6abdff; }
.search-people { display: flex; gap: 4px; padding: 10px 6px 8px; overflow-x: auto; scrollbar-width: none; list-style: none; }
.search-people::-webkit-scrollbar { display: none; }
.search-person { display: flex; flex: none; flex-direction: column; align-items: center; gap: 6px; width: 78px; padding: 0; border: 0; background: none; color: var(--color-text); }
.search-person .avatar { width: 62px; height: 62px; font-size: 22px; }
.search-person-name { max-width: 74px; overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
body.has-tabbar #chat-list .search-recent-heading { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 8px 16px; background: var(--color-background-secondary); font-size: 15px; font-weight: 500; color: var(--color-text-secondary); }
:root[data-theme="dark"] body.has-tabbar #chat-list .search-recent-heading { background: rgb(0 0 0 / 22%); }
body.has-tabbar #chat-list .search-recent-heading .section-link { float: none; margin: 0; font-size: 15px; font-weight: 400; color: var(--color-text-secondary); }
body.has-tabbar #chat-list .search-recent .chat-preview { color: var(--color-text-secondary); }
body.has-tabbar.chats-searching :is(#new-chat-fab, #camera-fab) { display: none !important; }
body.has-tabbar.chats-searching .android-head .search { border-color: transparent !important; box-shadow: none !important; outline: none; }

/* Attach sheet as in Telegram for Android (2026-11-09, user's screenshot): the camera's live picture fills a tall first
   tile, the phone's recent photos follow three to a row with a pick circle, and the tabs float in a blurred pill. */
.attach-sheet { overflow: hidden; }
.attach-sheet-grid { position: relative; align-content: start; grid-auto-rows: calc((100vw - 4px) / 3); padding-bottom: calc(92px + var(--safe-bottom)); scrollbar-width: none; }
.attach-sheet-grid::-webkit-scrollbar { display: none; }
.attach-camera { position: relative; grid-row: span 2; overflow: hidden; padding: 0; border: 0; }
.attach-camera-live { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.attach-camera .icon { position: absolute; top: 12px; right: 12px; z-index: 1; font-size: 28px; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 40%)); }
.attach-camera:not(:has(video)) .icon { position: static; font-size: 32px; }
.attach-gallery { grid-row: span 2; padding: 12px; border: 0; text-align: center; }
.attach-photo { position: relative; padding: 0; overflow: hidden; border: 0; background: var(--color-background-secondary); }
.attach-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.15s cubic-bezier(0.2, 0, 0, 1); }
.attach-photo.picked img { transform: scale(0.84); }
.attach-check { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 3px rgb(0 0 0 / 35%); font-size: 13px; font-weight: 600; color: #fff; transition: background-color 0.15s; }
.attach-photo.picked .attach-check { background: var(--color-primary); }
.attach-duration { position: absolute; left: 6px; bottom: 6px; padding: 1px 6px; border-radius: 9px; background: rgb(0 0 0 / 45%); font-size: 12px; color: #fff; }
.attach-tabs, .attach-pick-bar { position: absolute; left: 10px; right: 10px; bottom: calc(10px + var(--safe-bottom)); z-index: 2; border-radius: 32px; box-shadow: 0 2px 12px rgb(0 0 0 / 18%); }
.attach-tabs { padding: 5px; background: rgb(255 255 255 / 82%); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
:root[data-theme="dark"] .attach-tabs { background: rgb(36 47 61 / 84%); }
.attach-tab { min-width: 66px; padding: 7px 6px 5px; border: 0; border-radius: 26px; background: none; }
.attach-pick-bar { display: none; align-items: center; gap: 8px; padding: 0; box-shadow: none; }
.attach-sheet.has-picks .attach-tabs { display: none; }
.attach-sheet.has-picks .attach-pick-bar { display: flex; }
.attach-pick-caption { flex: 1; min-width: 0; height: 48px; padding: 0 18px; border: 0; border-radius: 24px; background: var(--color-background); box-shadow: 0 2px 10px rgb(0 0 0 / 18%); font-size: 16px; color: var(--color-text); outline: none; }
.attach-pick-send { position: relative; display: grid; flex: none; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--color-primary); color: #fff; box-shadow: 0 2px 10px rgb(0 0 0 / 18%); }
.attach-pick-send .icon { font-size: 24px; }
.attach-pick-count { position: absolute; right: -2px; bottom: -2px; min-width: 20px; height: 20px; padding: 0 5px; border: 2px solid var(--color-background); border-radius: 10px; background: var(--color-primary); font-size: 11px; font-weight: 600; line-height: 16px; }